/* ============================================================
   PICTORI — systeme de design
   Genere depuis maquette/index.html. Ne pas editer a la main :
   modifier la maquette puis relancer l'extraction.

   Utilisation dans Elementor : ajouter la classe a la section.
     .px-hero      section d'ouverture avec plans parallax
     .px-reveal    apparition au defilement  (data-delai="1|2|3")
     .px-sticky    colonne gauche collante
     .px-bandeau   bandeau sombre pleine largeur
     data-vitesse="0.3"  vitesse de parallax d'un element

   Les couleurs sont des variables : changer :root suffit a
   retheme le site entier.
   ============================================================ */

/* ============================================================
   PICTORI — maquette home  (v3)
   Palette : rose #fca2ae (releve sur le logo) + blanc + noir chaud.
   AUCUN BLEU.  AUCUN DEGRADE.  AUCUN PRIX.
   ------------------------------------------------------------
   Dans WordPress :  hello-elementor-child/assets/pictori.css
   Les sections Elementor portent juste une classe :
     .px-reveal   .px-sticky   data-vitesse="0.3"
   ============================================================ */
:root{
  --rose:#fca2ae;
  --rose-fonce:#e8768a;
  --rose-pale:#fde8eb;
  --rose-voile:#fef5f7;
  --encre:#241f1e;        /* noir chaud, zero bleu */
  --encre-douce:#6d6360;  /* gris chaud */
  --bord:#f2e2e5;
  --blanc:#ffffff;
  --r-l:26px;   /* grands arrondis facon josepho */
  --r-m:18px;
  --max:1200px;
  --serif:"Fraunces",Georgia,serif;
  --sans:"Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
}
.wrap{max-width:var(--max);margin:0 auto;padding:0 24px}
h1,h2{font-family:var(--serif);font-weight:600;line-height:1.06;margin:0;letter-spacing:-.025em}
h1{font-size:clamp(2.7rem,6.8vw,5rem)}
h2{font-size:clamp(2rem,4.4vw,3.3rem)}
h3{font-family:var(--sans);font-weight:700;font-size:1.2rem;line-height:1.28;margin:0;letter-spacing:-.015em}
.sur-titre{font-size:.74rem;font-weight:700;letter-spacing:.22em;text-transform:uppercase;color:var(--rose-fonce);display:flex;align-items:center;gap:11px;margin-bottom:18px}
.sur-titre::before{content:"";width:28px;height:2px;background:var(--rose)}
.centre{text-align:center}
.centre .sur-titre{justify-content:center}
.doux{color:var(--encre-douce)}

.btn{display:inline-flex;align-items:center;justify-content:center;gap:9px;padding:16px 32px;border-radius:100px;text-decoration:none;font-weight:600;font-size:.96rem;border:2px solid transparent;cursor:pointer;transition:transform .25s cubic-bezier(.2,.9,.3,1),background .25s,color .25s,border-color .25s}
.btn-p{background:var(--rose);color:var(--encre)}
.btn-p:hover{background:var(--rose-fonce);color:var(--blanc);transform:translateY(-3px)}
.btn-s{border-color:var(--rose);color:var(--encre)}
.btn-s:hover{background:var(--rose-pale);transform:translateY(-3px)}
.btn-b{background:var(--blanc);color:var(--encre)}
.btn-b:hover{background:var(--rose-pale);transform:translateY(-3px)}
.btn-n{background:var(--encre);color:var(--blanc)}
.btn-n:hover{background:var(--rose-fonce);transform:translateY(-3px)}

/* ---------- en-tete ---------- */
/* selecteur nomme : un "header" nu aurait touche tout autre en-tete du site */
#entete{position:fixed;inset:0 0 auto 0;z-index:60;padding:18px 0;transition:background .35s,box-shadow .35s,padding .35s}
/* la barre d'administration de WordPress est elle aussi fixee en haut :
   sans decalage elle recouvrait l'en-tete pour les comptes connectes */
body.admin-bar #entete{top:32px}
/* Sous 783 px, WordPress passe sa barre d'administration en position
   absolue : elle defile avec la page. Garder un decalage de 46 px
   laissait donc un vide permanent sous l'en-tete des qu'on defilait.
   On ne decale que lorsque la barre est reellement fixe. */
@media screen and (max-width:782px){
  /* On la refixe plutot que de la laisser defiler : sinon il faut
     choisir entre un vide permanent sous l'en-tete et un logo cache
     derriere la barre en haut de page. Ne concerne que les comptes
     connectes, les visiteurs ne voient pas cette barre. */
  body.admin-bar #wpadminbar{position:fixed}
  body.admin-bar #entete{top:46px}
}
#entete.colle{background:var(--blanc);box-shadow:0 1px 0 var(--bord);padding:11px 0}
.nav{display:flex;align-items:center;justify-content:space-between;gap:22px}
.logo{display:flex;align-items:center;gap:11px;text-decoration:none;color:var(--encre)}
.logo img{height:52px;width:auto;display:block}
@media(max-width:620px){.logo img{height:38px}}
.liens{display:flex;gap:28px;font-size:.93rem;font-weight:500}
.liens a{text-decoration:none;color:var(--encre-douce);transition:color .2s;position:relative}
.liens a::after{content:"";position:absolute;left:0;bottom:-5px;width:0;height:2px;background:var(--rose);transition:width .3s}
.liens a:hover{color:var(--encre)}
.liens a:hover::after{width:100%}
@media(max-width:1020px){.liens{display:none}}

/* ---------- HERO ---------- */
.px-hero{position:relative;min-height:100svh;display:flex;align-items:center;overflow:hidden;padding:150px 0 90px;background:var(--rose-voile)}
.plan{position:absolute;inset:0;will-change:transform;pointer-events:none}
.plan-formes b{position:absolute;border-radius:50%;display:block}
.d1{width:min(46vw,540px);aspect-ratio:1;background:var(--rose-pale);top:-14%;right:-9%}
.d2{width:min(24vw,260px);aspect-ratio:1;background:var(--rose);opacity:.28;bottom:-8%;left:-6%}
.d3{width:min(13vw,140px);aspect-ratio:1;background:var(--rose);opacity:.2;top:22%;left:52%}
.plan-colonnes{display:flex;justify-content:space-between;align-items:flex-end;padding:0 4vw}
.colonne{width:clamp(24px,3.2vw,42px);background:var(--rose-pale);border-radius:6px 6px 0 0}
.colonne:nth-child(odd){height:38vh}.colonne:nth-child(even){height:24vh}
@media(max-width:760px){.plan-colonnes{display:none}}
.plan-photos{z-index:3}
.polaroid{position:absolute;width:clamp(108px,12.5vw,176px);aspect-ratio:3/3.7;background:var(--blanc);border-radius:5px;padding:9px 9px 32px;box-shadow:0 20px 44px -16px rgba(36,31,30,.24);transform:rotate(var(--r,0deg))}
.polaroid i{display:block;width:100%;height:100%;border-radius:2px;background:var(--c,var(--rose));background-size:cover;background-position:center}
.p1{top:15%;left:3%;--r:-9deg;--c:url("/wp-content/uploads/pictori/img/mariage-2.jpg") center/cover}
.p2{top:59%;left:8%;--r:7deg;--c:url("/wp-content/uploads/pictori/img/event-pro-2.jpg") center/cover}
.p3{top:11%;right:5%;--r:11deg;--c:url("/wp-content/uploads/pictori/img/retro-mariage.jpg") center/cover}
.p4{top:63%;right:7%;--r:-6deg;--c:url("/wp-content/uploads/pictori/img/mariage-3.jpg") center/cover}
@media(max-width:1020px){.p2,.p4{display:none}.p1{left:-5%}.p3{right:-5%}}
.hero-txt{position:relative;z-index:5;max-width:800px}
.hero-txt h1{margin-bottom:24px}
.hero-txt h1 em{font-style:normal;position:relative;white-space:nowrap;z-index:1}
.hero-txt h1 em::after{content:"";position:absolute;left:-.06em;right:-.06em;bottom:.05em;height:.34em;background:var(--rose);z-index:-1;border-radius:3px;transform:scaleX(0);transform-origin:left;transition:transform .95s .45s cubic-bezier(.2,.9,.3,1)}
.charge .hero-txt h1 em::after{transform:scaleX(1)}
.accroche{font-size:1.16rem;color:var(--encre-douce);max-width:550px;margin-bottom:32px}
.cta-duo{display:flex;gap:13px;flex-wrap:wrap}
.mention{font-size:.88rem;color:var(--encre-douce);margin:22px 0 0;display:flex;gap:22px;flex-wrap:wrap}
.mention span{display:flex;align-items:center;gap:8px}
.mention span::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--rose)}
.hero-txt>*{opacity:0;transform:translateY(24px);transition:opacity .85s cubic-bezier(.2,.9,.3,1),transform .85s cubic-bezier(.2,.9,.3,1)}
.charge .hero-txt>*{opacity:1;transform:none}
.charge .hero-txt>*:nth-child(2){transition-delay:.08s}
.charge .hero-txt>*:nth-child(3){transition-delay:.16s}
.charge .hero-txt>*:nth-child(4){transition-delay:.24s}
.charge .hero-txt>*:nth-child(5){transition-delay:.32s}

/* ---------- preuve sociale ---------- */
.preuve{border-bottom:1px solid var(--bord)}
.preuve .wrap{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;padding:34px 24px}
.stat{text-align:center}
.stat b{display:block;font-family:var(--serif);font-size:1.9rem;line-height:1.1}
.stat span{font-size:.85rem;color:var(--encre-douce)}
.etoiles{color:var(--rose-fonce);letter-spacing:2px;font-size:1.15rem;line-height:1.1}
@media(max-width:760px){.preuve .wrap{grid-template-columns:repeat(2,1fr);gap:24px}}


/* ---------- bandeau logos clients ---------- */
.clients{padding:44px 0 48px;border-bottom:1px solid var(--bord)}
.clients .titre{text-align:center;font-size:.74rem;font-weight:700;letter-spacing:.2em;text-transform:uppercase;color:var(--encre-douce);margin-bottom:28px}
.rangee{display:flex;align-items:center;justify-content:center;gap:clamp(26px,5vw,60px);flex-wrap:wrap}
.rangee img{height:clamp(22px,2.6vw,34px);width:auto;opacity:.5;filter:grayscale(1);transition:opacity .3s,filter .3s}
.rangee img:hover{opacity:1;filter:grayscale(0)}

/* ---------- sections ---------- */
.sect{padding:clamp(76px,10vw,140px) 0;position:relative}
.fond-pale{background:var(--rose-voile)}
.fond-rose{background:var(--rose-pale)}
.entete{max-width:660px;margin-bottom:54px}
.centre .entete{margin-left:auto;margin-right:auto}
.entete p{font-size:1.08rem;color:var(--encre-douce);margin-top:16px}
/* APPARITION AU DEFILEMENT — approche additive
   Le contenu n'est JAMAIS masque au depart. L'apparition est une animation
   jouee quand le script ajoute .vu, et non un etat initial a annuler.
   Consequence : si le script ne tourne pas, si l'observateur ne se declenche
   jamais, ou si la page n'est pas peinte, tout reste lisible. Un texte doit
   pouvoir se passer de JavaScript pour s'afficher. */
@keyframes px-apparition{from{opacity:0;transform:translateY(34px)}to{opacity:1;transform:none}}
/* forwards et non both : avec "both", l'etat de depart (opacity 0) s'applique
   AVANT le declenchement et pendant le delai. Si l'animation ne demarre jamais,
   l'element resterait invisible. Avec "forwards", rien ne s'applique tant que
   l'animation n'a pas joue : le contenu est visible par defaut. */
html.px-anim .px-reveal.vu{animation:px-apparition .8s cubic-bezier(.2,.9,.3,1) forwards}
html.px-anim .px-reveal[data-delai="1"]{animation-delay:.09s}
html.px-anim .px-reveal[data-delai="2"]{animation-delay:.18s}
html.px-anim .px-reveal[data-delai="3"]{animation-delay:.27s}

/* ============================================================
   SEGMENTS — grandes cartes facon josepho.io
   ============================================================ */
.segments{display:grid;grid-template-columns:1fr 1fr;gap:24px}
@media(max-width:900px){.segments{grid-template-columns:1fr}}
.segment{
  position:relative;display:block;text-decoration:none;color:var(--blanc);
  border-radius:var(--r-l);overflow:hidden;aspect-ratio:16/10;
  transition:transform .45s cubic-bezier(.2,.9,.3,1),box-shadow .45s;
}
.segment:hover{transform:translateY(-8px);box-shadow:0 34px 64px -30px rgba(36,31,30,.42)}
.seg-fond{position:absolute;inset:-6%;will-change:transform;background-size:cover;background-position:center}
.seg-part{background-image:url("/wp-content/uploads/pictori/img/mariage-1.jpg")}
.seg-pro{background-image:url("/wp-content/uploads/pictori/img/event-pro-1.jpg")}
.seg-voile{position:absolute;inset:0;background:rgba(36,31,30,.42)}
.segment:hover .seg-voile{background:rgba(36,31,30,.30)}
.seg-voile-bas{position:absolute;inset:auto 0 0 0;height:58%;background:rgba(36,31,30,.42)}
.seg-txt{position:absolute;inset:auto 0 0 0;padding:34px 34px 32px;z-index:3}
.seg-txt .kicker{font-size:.74rem;font-weight:700;letter-spacing:.26em;text-transform:uppercase;opacity:.9;margin-bottom:6px}
.seg-txt h3{font-size:clamp(1.5rem,2.6vw,2.05rem);font-weight:800;letter-spacing:-.02em}
.seg-txt p{margin:8px 0 0;font-size:.96rem;opacity:.9;max-width:400px}
.seg-fleche{
  position:absolute;top:26px;right:26px;z-index:3;width:46px;height:46px;border-radius:50%;
  background:var(--blanc);display:grid;place-items:center;transition:transform .35s;
}
.seg-pro .seg-fleche{background:var(--rose)}
.segment:hover .seg-fleche{transform:rotate(45deg)}
.seg-fleche svg{width:20px;height:20px;stroke:var(--encre);fill:none;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}

/* ---------- bornes ---------- */
.bornes{display:grid;grid-template-columns:1fr 1fr;gap:24px}
@media(max-width:880px){.bornes{grid-template-columns:1fr}}
.borne{background:var(--blanc);border:1px solid var(--bord);border-radius:var(--r-l);overflow:hidden;display:flex;flex-direction:column;transition:transform .4s cubic-bezier(.2,.9,.3,1),border-color .4s,box-shadow .4s}
.borne:hover{transform:translateY(-7px);border-color:var(--rose);box-shadow:0 26px 54px -26px rgba(36,31,30,.26)}
.visuel{aspect-ratio:4/3;position:relative;display:grid;place-items:center}
.v-moderne{background:var(--rose-pale) url("/wp-content/uploads/pictori/img/moderne.jpg") center/cover}
.v-retro{background:var(--encre) url("/wp-content/uploads/pictori/img/retro-chic.jpg") center/cover}
.silhouette{width:34%;aspect-ratio:.5;position:relative}
.silhouette b{position:absolute;left:0;right:0;top:0;height:62%;border-radius:10px 10px 4px 4px;background:var(--blanc);border:3px solid var(--encre)}
.v-retro .silhouette b{background:var(--rose);border-color:var(--blanc)}
.silhouette b::after{content:"";position:absolute;inset:15% 13% 26%;border-radius:3px;background:var(--rose)}
.v-retro .silhouette b::after{background:var(--encre)}
.silhouette b::before{content:"";position:absolute;left:50%;bottom:9%;width:15%;aspect-ratio:1;border-radius:50%;background:var(--encre);transform:translateX(-50%)}
.v-retro .silhouette b::before{background:var(--blanc)}
.silhouette i{position:absolute;left:43%;right:43%;top:60%;bottom:7%;background:var(--encre)}
.v-retro .silhouette i{background:var(--blanc)}
.silhouette u{position:absolute;left:14%;right:14%;bottom:0;height:7%;border-radius:3px;background:var(--encre)}
.v-retro .silhouette u{background:var(--blanc)}
.badge{position:absolute;top:16px;left:16px;background:var(--blanc);color:var(--encre);padding:6px 15px;border-radius:100px;font-size:.72rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;border:1px solid var(--bord)}
.borne-corps{padding:28px 28px 30px;display:flex;flex-direction:column;flex:1}
.borne-corps h3{margin-bottom:9px}
.borne-corps>p{color:var(--encre-douce);font-size:.96rem;margin-bottom:20px}
.inclus{list-style:none;padding:0;margin:0 0 26px;font-size:.95rem;display:grid;gap:10px}
.inclus li{display:flex;gap:11px;align-items:flex-start;color:var(--encre-douce)}
.inclus li::before{content:"";flex:0 0 18px;height:18px;margin-top:3px;border-radius:50%;background:var(--rose-pale);background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23e8768a' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E");background-size:11px;background-position:center;background-repeat:no-repeat}
.borne .btn{margin-top:auto}

/* ============================================================
   GABARIT — bloc en deux colonnes avec apercu
   ============================================================ */
.duo{display:grid;grid-template-columns:1fr 1fr;gap:64px;align-items:center}
@media(max-width:940px){.duo{grid-template-columns:1fr;gap:44px}}
.duo.inverse .visu-col{order:-1}
.liste-puces{list-style:none;padding:0;margin:26px 0 32px;display:grid;gap:16px}
.liste-puces li{display:flex;gap:14px;align-items:flex-start}
.liste-puces .n{flex:0 0 30px;height:30px;border-radius:9px;background:var(--rose-pale);display:grid;place-items:center;font-weight:700;font-size:.85rem;color:var(--rose-fonce)}
.liste-puces strong{display:block;font-weight:600;margin-bottom:2px}
.liste-puces span{color:var(--encre-douce);font-size:.94rem}

/* apercu gabarit : une bande photo 3 vignettes */
.apercu-gabarit{
  background:var(--rose-pale);border-radius:var(--r-l);padding:44px;
  display:grid;place-items:center;
}
.bande{
  width:min(228px,72%);background:var(--blanc);border-radius:10px;padding:14px 14px 52px;
  box-shadow:0 24px 50px -22px rgba(36,31,30,.34);display:grid;gap:10px;position:relative;
}
.bande .vue{width:100%;aspect-ratio:4/3;border-radius:5px;background:var(--rose) center/cover}
.bande .vue:nth-child(1){background-image:url("/wp-content/uploads/pictori/img/mariage-1.jpg")}
.bande .vue:nth-child(2){background-image:url("/wp-content/uploads/pictori/img/mariage-2.jpg")}
.bande .vue:nth-child(3){background-image:url("/wp-content/uploads/pictori/img/retro-mariage.jpg")}
.bande .legende{position:absolute;left:0;right:0;bottom:14px;text-align:center;font-family:var(--serif);font-weight:700;font-size:1.02rem;color:var(--encre)}
.bande .legende small{display:block;font-family:var(--sans);font-weight:500;font-size:.68rem;letter-spacing:.2em;text-transform:uppercase;color:var(--rose-fonce);margin-top:2px}

/* apercu espace client : fenetre applicative */
.apercu-espace{background:var(--encre);border-radius:var(--r-l);padding:26px;box-shadow:0 30px 60px -30px rgba(36,31,30,.5)}
.fenetre{background:var(--blanc);border-radius:14px;overflow:hidden}
.fenetre .barre{display:flex;gap:6px;padding:12px 14px;border-bottom:1px solid var(--bord)}
.fenetre .barre i{width:9px;height:9px;border-radius:50%;background:var(--bord);display:block}
.fenetre .barre i:first-child{background:var(--rose)}
.fenetre .corps{padding:18px}
.fenetre .titre-app{font-weight:700;font-size:.94rem;margin-bottom:14px;display:flex;align-items:center;justify-content:space-between}
.fenetre .titre-app em{font-style:normal;font-size:.68rem;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--rose-fonce);background:var(--rose-pale);padding:4px 10px;border-radius:100px}
.mosaique{display:grid;grid-template-columns:repeat(4,1fr);gap:7px}
.mosaique i{display:block;aspect-ratio:1;border-radius:6px;background:var(--rose-pale) center/cover}
.mosaique i:nth-child(4n+1){background-image:url("/wp-content/uploads/pictori/img/mariage-1.jpg")}
.mosaique i:nth-child(4n+2){background-image:url("/wp-content/uploads/pictori/img/event-pro-2.jpg")}
.mosaique i:nth-child(4n+3){background-image:url("/wp-content/uploads/pictori/img/mariage-2.jpg")}
.mosaique i:nth-child(4n){background-image:url("/wp-content/uploads/pictori/img/retro-mariage.jpg")}
.ligne-btn{display:flex;gap:8px;margin-top:16px}
.faux-btn{flex:1;text-align:center;padding:10px;border-radius:100px;font-size:.76rem;font-weight:600;background:var(--rose);color:var(--encre)}
.faux-btn.vide{background:transparent;border:1.5px solid var(--bord);color:var(--encre-douce)}

/* ---------- tunnel ---------- */
.px-sticky{display:grid;grid-template-columns:.85fr 1.15fr;gap:60px;align-items:start}
@media(max-width:900px){.px-sticky{grid-template-columns:1fr;gap:34px}}
.colle-moi{position:sticky;top:124px}
@media(max-width:900px){.colle-moi{position:static}}
.etapes{display:grid;gap:14px;counter-reset:e}
.etape{display:flex;gap:20px;padding:26px;border-radius:var(--r-m);background:var(--blanc);border:1px solid var(--bord);transition:border-color .35s,transform .35s}
.etape:hover{border-color:var(--rose);transform:translateX(6px)}
.etape .num{counter-increment:e;flex:0 0 44px;height:44px;border-radius:50%;display:grid;place-items:center;font-family:var(--serif);font-size:1.14rem;font-weight:700;background:var(--rose);color:var(--blanc)}
.etape .num::before{content:counter(e,decimal-leading-zero)}
.etape h3{margin-bottom:6px;font-size:1.12rem}
.etape p{margin:0;font-size:.95rem;color:var(--encre-douce)}
.rassure{margin-top:22px;padding:20px 24px;border-radius:var(--r-m);background:var(--rose-pale);font-size:.95rem}

/* ---------- cartes 3 ---------- */
.grille3{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
@media(max-width:880px){.grille3{grid-template-columns:1fr}}
.carte{padding:32px 28px;border-radius:var(--r-m);background:var(--blanc);border:1px solid var(--bord);transition:border-color .35s,transform .35s}
.carte:hover{border-color:var(--rose);transform:translateY(-5px)}
.pictogramme{width:46px;height:46px;border-radius:13px;background:var(--rose-pale);display:grid;place-items:center;margin-bottom:18px}
.pictogramme svg{width:23px;height:23px;stroke:var(--rose-fonce);fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.carte h3{font-size:1.06rem;margin-bottom:8px}
.carte p{font-size:.93rem;color:var(--encre-douce);margin:0}

/* ---------- bandeau parc ---------- */
.px-bandeau{position:relative;overflow:hidden;background:var(--encre);color:var(--blanc);padding:clamp(80px,10vw,130px) 0}
.px-bandeau .photo{position:absolute;inset:-8%;background:url("/wp-content/uploads/pictori/img/event-pro-3.jpg") center/cover;opacity:.22;will-change:transform}
.px-bandeau .forme{position:absolute;border-radius:50%;background:var(--rose);opacity:.15;will-change:transform}
.px-bandeau .f1{width:min(40vw,440px);aspect-ratio:1;top:-22%;left:-8%}
.px-bandeau .f2{width:min(28vw,300px);aspect-ratio:1;bottom:-24%;right:-4%}
.px-bandeau .wrap{position:relative;z-index:2;max-width:780px;text-align:center;margin:0 auto}
.px-bandeau .sur-titre{color:var(--rose);justify-content:center}
.px-bandeau .sur-titre::before{background:var(--rose)}
.px-bandeau p{color:#d8cfcc;font-size:1.1rem;margin-top:18px}

/* ---------- avis ---------- */
.avis{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
@media(max-width:880px){.avis{grid-template-columns:1fr}}
.avis blockquote{margin:0;padding:30px 28px;background:var(--blanc);border:1px solid var(--bord);border-radius:var(--r-m);display:flex;flex-direction:column;gap:14px}
.avis .etoiles{font-size:1rem}
.avis p{margin:0;font-size:.96rem;color:var(--encre-douce);flex:1}
.avis footer{display:flex;align-items:center;gap:12px;font-size:.9rem}
.avis .rond{width:36px;height:36px;border-radius:50%;background:var(--rose);display:grid;place-items:center;font-weight:700;color:var(--blanc);font-size:.86rem}
.avis strong{font-weight:600;display:block}
.avis small{color:var(--encre-douce)}

/* ---------- FAQ ---------- */
.faq{max-width:820px;margin:0 auto;text-align:left}
details{border-bottom:1px solid var(--bord);padding:4px 0}
summary{cursor:pointer;list-style:none;padding:21px 42px 21px 0;position:relative;font-weight:600;font-size:1.04rem;transition:color .25s}
summary::-webkit-details-marker{display:none}
summary:hover{color:var(--rose-fonce)}
summary::after{content:"";position:absolute;right:6px;top:50%;width:12px;height:12px;border-right:2px solid var(--rose-fonce);border-bottom:2px solid var(--rose-fonce);transform:translateY(-70%) rotate(45deg);transition:transform .3s}
details[open] summary::after{transform:translateY(-30%) rotate(-135deg)}
details p{color:var(--encre-douce);padding:0 40px 21px 0;margin:0;font-size:.97rem}

/* ---------- CTA final ---------- */
.final{background:var(--rose);padding:clamp(70px,9vw,120px) 0;text-align:center}
.final h2{margin-bottom:18px}
.final p{opacity:.84;max-width:520px;margin:0 auto 30px;font-size:1.06rem}
.final .cta-duo{justify-content:center}

/* ---------- pied ---------- */
footer.pied-page{background:var(--blanc);border-top:1px solid var(--bord);padding:60px 0 30px}
.pied{display:flex;justify-content:space-between;gap:34px;flex-wrap:wrap;margin-bottom:38px}
.pied>div:first-child p{color:var(--encre-douce);font-size:.93rem;max-width:300px;margin:14px 0 0}
.pied-cols{display:flex;gap:56px;flex-wrap:wrap}
.pied-cols h4{font-size:.74rem;letter-spacing:.16em;text-transform:uppercase;color:var(--rose-fonce);margin:0 0 15px;font-weight:700}
.pied-cols a{display:block;color:var(--encre-douce);text-decoration:none;font-size:.93rem;margin-bottom:10px;transition:color .2s}
.pied-cols a:hover{color:var(--encre)}
.bas{border-top:1px solid var(--bord);padding-top:24px;display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;font-size:.85rem;color:var(--encre-douce)}

@media(prefers-reduced-motion:reduce){
  *{animation:none!important;transition-duration:.01ms!important}
  .px-reveal{opacity:1;transform:none}
  .plan,.forme,.seg-fond{transform:none!important}
  html{scroll-behavior:auto}
}

/* ---------- menu de telephone ----------
   La barre de liens disparait a 1020 px. Sans bouton, le menu n'existait
   plus du tout en dessous : ni liens, ni acces a la FAQ ou a l'espace
   client. Le bouton ouvre un panneau qui reprend les memes entrees. */
.burger{
  display:none; width:44px; height:44px; padding:11px 10px;
  background:none; border:none; cursor:pointer;
  flex-direction:column; justify-content:space-between;
}
.burger span{
  display:block; height:2px; width:100%; border-radius:2px;
  background:var(--encre); transition:transform .28s, opacity .2s;
}
.burger[aria-expanded="true"] span:nth-child(1){transform:translateY(9px) rotate(45deg)}
.burger[aria-expanded="true"] span:nth-child(2){opacity:0}
.burger[aria-expanded="true"] span:nth-child(3){transform:translateY(-9px) rotate(-45deg)}

.menu-mobile{
  display:none; flex-direction:column; gap:2px;
  padding:14px 24px 26px;
  background:var(--blanc);
  border-top:1px solid var(--bord);
  box-shadow:0 18px 30px -18px rgba(36,31,30,.25);
}
.menu-mobile[hidden]{display:none!important}
.menu-mobile a{
  text-decoration:none; color:var(--encre); font-weight:500;
  padding:14px 0; border-bottom:1px solid var(--bord);
}
.menu-mobile a:last-child{border-bottom:none}
.menu-mobile .btn{margin-top:16px; justify-content:center}

@media(max-width:1020px){
  .burger{display:flex}
  .menu-mobile:not([hidden]){display:flex}
  /* le bouton de devis vit dans le panneau, la barre reste au logo */
  #entete .nav > .btn{display:none}
}
/* l'en-tete cesse d'etre transparent quand le panneau est ouvert */
body.menu-ouvert #entete{background:var(--blanc)}
body.menu-ouvert{overflow:hidden}