/* =========================================================
   CONCEPT OUVERTURE — patrons de mise en page communs
   ---------------------------------------------------------
   Regroupe les regles STRICTEMENT identiques entre plusieurs
   pages : sections, hero, cartes, formulaires, timeline, CTA.

   Ordre de chargement (defini dans partials/head.php) :
     1. assets/site.css          charte + chrome (header, footer…)
     2. assets/layout.css        CE FICHIER — patrons de section
     3. assets/pages/<page>.css  specificites de la page

   Une page qui a besoin d'une variante redefinit simplement la
   regle dans son propre fichier : il est charge apres, il gagne.

   L'ordre des regles ci-dessous reproduit celui des fichiers
   d'origine : le modifier peut changer le rendu entre selecteurs
   de meme specificite.

   ⚠️  Ne pas recopier ces regles dans un CSS de page.
   ========================================================= */


.section-head p{color:var(--muted);font-size:1.05rem}
.hero{background:var(--navy);color:#fff;position:relative;overflow:hidden}
.hero::after{content:"";position:absolute;right:-140px;top:-140px;width:440px;height:440px;border-radius:50%;background:radial-gradient(circle,rgba(248,182,138,.20),transparent 70%);z-index:0}
.hero .eyebrow{color:var(--sand)}
.hero h1 em{color:var(--sand);font-style:normal}
.hero-ctas{display:flex;flex-wrap:wrap;gap:14px}
.hero-benefits{display:grid;grid-template-columns:1fr 1fr;gap:14px;width:100%}
.hbenef{background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.18);border-radius:var(--radius-sm);backdrop-filter:blur(8px) saturate(140%);-webkit-backdrop-filter:blur(8px) saturate(140%);padding:18px 20px}
.hbenef .t{font-family:var(--font-body);font-weight:600;color:#fff;font-size:1rem;line-height:1.35;margin-bottom:7px;display:flex;gap:9px;align-items:flex-start}
.hbenef .t svg{color:var(--sand);flex:none;margin-top:2px}
.hbenef .d{font-size:.85rem;color:rgba(255,255,255,.72)}
.pain-list{list-style:none;display:flex;flex-direction:column;gap:14px;margin-top:6px;max-width:70ch}
.pain-list li{display:flex;gap:14px;align-items:flex-start;background:#fff;border:1px solid var(--line);border-left:4px solid var(--accent);border-radius:var(--radius-sm);padding:16px 18px;font-size:1.04rem;color:var(--navy)}
.pain-list .x{flex:none;width:26px;height:26px;border-radius:50%;background:#fdecea;color:var(--accent);display:grid;place-items:center;font-weight:800;margin-top:1px}
.pain-intro{font-family:var(--font-title);font-weight:700;color:var(--navy);font-size:1.1rem;margin-bottom:18px}
.constat-note{margin-top:22px;color:var(--muted);font-size:1.05rem;max-width:70ch}
.statement{padding:88px 0}
.statement.navy{background:var(--navy);color:#fff}
.statement.cream{background:var(--cream-2)}
.statement-inner{max-width:820px;margin:0 auto;text-align:center}
.statement .eyebrow{color:var(--accent);margin-bottom:14px;display:block}
.statement.navy .eyebrow{color:var(--sand)}
.statement h2{font-size:clamp(2rem,4vw,2.9rem);margin-bottom:18px}
.statement.navy h2{color:#fff}
.statement.navy h2 em{color:var(--sand);font-style:normal}
.statement p{font-size:1.14rem;color:var(--muted);max-width:62ch;margin:0 auto}
.statement.navy p{color:rgba(255,255,255,.82)}
.feature-card{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:28px;display:flex;flex-direction:column}
.feature-card .badge{font-family:var(--font-title);font-weight:800;font-size:.78rem;letter-spacing:.04em;text-transform:uppercase;color:var(--accent);margin-bottom:10px}
.feature-card h3{font-size:1.18rem;margin-bottom:16px}
.objective-note{margin-top:auto;padding-top:18px}
.objective-note .box{background:var(--cream);border:1px solid var(--line);border-radius:var(--radius-sm);padding:14px 16px;font-size:.9rem;color:var(--navy);display:flex;gap:10px;align-items:flex-start}
.objective-note .ico{color:var(--accent);flex:none;margin-top:1px}
.guarantee{background:var(--sand)}
.guarantee-inner{display:flex;gap:40px;align-items:center;flex-wrap:wrap}
.guarantee .big{font-family:var(--font-title);font-weight:900;font-size:clamp(3.4rem,9vw,6rem);color:var(--accent);line-height:.85;flex:none}
.guarantee .txt{max-width:54ch}
.guarantee h2{color:var(--navy);font-size:clamp(1.6rem,3vw,2.2rem);margin-bottom:10px}
.guarantee p{color:#6b4229;font-size:1.08rem}
.guarantee p b{color:var(--navy)}
.guarantee .seal{margin-top:10px;font-family:var(--font-title);font-weight:700;color:var(--navy)}
.pro{background:linear-gradient(180deg,#eef3f9,#e4ecf6)}
.full-note{margin-top:24px;background:var(--navy);color:#fff;border-radius:var(--radius);padding:20px 24px;display:flex;gap:12px;align-items:flex-start;font-size:1rem}
.full-note .ico{color:var(--sand);flex:none;margin-top:2px}
.obj-list{display:flex;flex-direction:column;gap:16px;max-width:960px}
.obj{display:grid;grid-template-columns:1fr 1.1fr;background:#fff;border:1px solid var(--line);border-radius:var(--radius);overflow:hidden}
.obj .q{padding:22px 24px;background:var(--cream-2)}
.obj .a{padding:22px 24px;border-left:1px solid var(--line)}
.obj .lbl{font-size:.72rem;text-transform:uppercase;letter-spacing:.12em;font-family:var(--font-title);font-weight:700;margin-bottom:7px}
.obj .q .lbl{color:var(--muted)}
.obj .a .lbl{color:var(--accent)}
.obj .q p{font-style:italic;color:var(--navy);font-size:1.04rem}
.obj .a p{color:var(--navy);font-size:1rem}
.benefit-table{border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;background:#fff;max-width:1000px;margin:0 auto}
.bt-row{display:grid;grid-template-columns:1fr 1fr}
.bt-row + .bt-row{border-top:1px solid var(--line)}
.bt-head > div{background:var(--navy);color:#fff;padding:15px 24px;font-family:var(--font-body);font-weight:600;font-size:.95rem}
.bt-head > div + div{border-left:1px solid rgba(255,255,255,.15)}
.bt-row > div{padding:18px 24px}
.bt-row .ben{font-weight:600;color:var(--navy);border-right:1px solid var(--line)}
.bt-row .imp{color:var(--muted);display:flex;gap:10px;align-items:flex-start}
.bt-row .imp .arrow{color:var(--accent);flex:none;font-weight:800}
.steps{max-width:840px;margin:0 auto;display:flex;flex-direction:column}
.step{display:flex;gap:24px;padding-bottom:34px;position:relative}
.step:last-child{padding-bottom:0}
.step .num{flex:none;width:48px;height:48px;border-radius:50%;background:var(--navy);color:#fff;display:grid;place-items:center;font-family:var(--font-title);font-weight:800;font-size:1.15rem;z-index:1}
.step::before{content:"";position:absolute;left:23px;top:48px;bottom:0;width:2px;background:var(--line)}
.step:last-child::before{display:none}
.step .body{padding-top:8px}
.step .body h3{font-size:1.16rem;margin-bottom:5px}
.step .body p{color:var(--muted)}
.step .body ul{list-style:none;margin-top:8px;display:flex;flex-direction:column;gap:6px}
.step .body ul li{color:var(--muted);display:flex;gap:9px;align-items:flex-start}
.step .body ul li::before{content:"•";color:var(--accent);font-weight:800;flex:none}
.final-cta{background:var(--navy);color:#fff;position:relative;overflow:hidden}
.final-cta::after{content:"";position:absolute;left:-120px;bottom:-160px;width:420px;height:420px;border-radius:50%;background:radial-gradient(circle,rgba(248,182,138,.16),transparent 70%)}
.cta-points{display:grid;grid-template-columns:repeat(2,1fr);gap:14px;margin-bottom:32px;text-align:left}
.cta-point{background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.18);border-radius:var(--radius-sm);padding:16px 18px;display:flex;flex-direction:column;gap:4px}
.cta-point b{font-family:var(--font-body);font-weight:600;color:#fff;font-size:1rem}
.cta-point span{color:var(--sand);font-size:.94rem;display:flex;align-items:center;gap:7px}
.cta-points .cta-point:last-child:nth-child(odd){grid-column:1 / -1}
.final-cta .closing{color:rgba(255,255,255,.82);font-size:1.08rem;max-width:60ch;margin:0 auto}
.contact{background:var(--navy);color:#fff}
.contact .section-head h2{color:#fff}
.contact .section-head p{color:rgba(255,255,255,.74)}
.form-wrap{max-width:640px;margin:0 auto}
.form-card{background:#fff;border-radius:var(--radius);padding:30px;color:var(--navy)}
.field{margin-bottom:16px}
.field label{display:block;font-weight:600;font-size:.9rem;margin-bottom:6px}
.field input,.field textarea,.field select{width:100%;font-family:var(--font-body);font-size:1rem;color:var(--navy); border:1.5px solid var(--line);border-radius:var(--radius-sm);padding:.8rem .9rem;background:#fff; transition:border-color .15s ease,box-shadow .15s ease}
.field input:focus,.field textarea:focus,.field select:focus{outline:none;border-color:var(--blue);box-shadow:0 0 0 4px rgba(12,140,233,.14)}
.field textarea{min-height:120px;resize:vertical}
.form-card .btn{width:100%;justify-content:center;margin-top:6px}
.rgpd-notice{margin-top:16px;font-size:.8rem;color:var(--muted);line-height:1.55}
.rgpd-notice a{color:var(--blue);text-decoration:underline}
.form-success{background:#eaf7ef;border:1px solid #b6e3c6;color:#1f7a44;border-radius:var(--radius);padding:30px;text-align:center}
.form-success[hidden]{display:none}
.form-success .ico{width:56px;height:56px;border-radius:50%;background:#47b375;color:#fff;display:grid;place-items:center;margin:0 auto 14px;font-size:1.6rem}
.form-success h3{color:#1f7a44}
.feature-grid.two{grid-template-columns:repeat(2,1fr)}
.ph span::before{content:"";width:8px;height:8px;border-radius:2px;background:var(--accent)}
.breadcrumb{background:var(--cream-2);border-bottom:1px solid var(--line);font-size:.86rem}
.breadcrumb ol{list-style:none;display:flex;flex-wrap:wrap;gap:8px;align-items:center;padding:12px 0;color:var(--muted)}
.breadcrumb a:hover{color:var(--accent)}
.breadcrumb .sep{opacity:.5}
.breadcrumb [aria-current]{color:var(--navy);font-weight:600}
.hero-visual .ph{min-height:400px;border:none;box-shadow:0 30px 60px rgba(0,0,0,.35)}
.hero-points{display:flex;gap:24px;margin-top:30px;flex-wrap:wrap}
.hero-points div{display:flex;flex-direction:column}
.hero-points .num{font-family:var(--font-title);font-weight:800;font-size:1.5rem;color:var(--sand)}
.hero-points .lbl{font-size:.82rem;color:rgba(255,255,255,.72)}
.feat-list{list-style:none;display:flex;flex-direction:column;gap:14px;margin-top:22px}
.feat-list li{display:flex;gap:12px;align-items:flex-start;font-size:1.02rem;color:var(--navy)}
.feat-list .c{flex:none;width:24px;height:24px;border-radius:50%;background:#eaf7ef;color:#17714a;display:grid;place-items:center;font-weight:800;font-size:.74rem;margin-top:2px}
.mat-card{background:#fff;border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;display:flex;flex-direction:column;transition:transform .18s ease,box-shadow .18s ease}
.mat-card:hover{transform:translateY(-4px);box-shadow:0 18px 40px rgba(27,51,79,.12)}
.mat-card .body{padding:24px;display:flex;flex-direction:column;flex:1}
/* Graisse 700 et non 800 (valeur héritée de la règle h1..h4), et taille
   portée à 1,4 rem : en ExtraBold à 20 px, le blanc entre le point du
   « i » et sa hampe ne fait qu'un pixel, que l'anti-crénelage comble —
   le point disparaît. Le Bold est déjà chargé, aucun fichier en plus. */
.mat-card h3{font-weight:700;font-size:1.4rem;letter-spacing:0;margin-bottom:8px}
.mat-card .tagline{color:var(--accent);font-family:var(--font-body);font-weight:600;font-size:.88rem;margin-bottom:12px}
.mat-card p{color:var(--muted);font-size:.96rem;margin-bottom:16px}
.mat-card .pts{list-style:none;display:flex;flex-direction:column;gap:9px;margin-top:auto}
.mat-card .pts li{display:flex;gap:10px;align-items:flex-start;font-size:.9rem;color:var(--navy)}
.mat-card .pts .c{flex:none;width:20px;height:20px;border-radius:50%;background:var(--cream-2);color:var(--navy);display:grid;place-items:center;font-weight:800;font-size:.66rem;margin-top:1px}
.cta-band{background:var(--sand)}
.cta-band .inner{display:flex;gap:32px;align-items:center;justify-content:space-between;flex-wrap:wrap}
.cta-band h2{color:var(--navy);font-size:clamp(1.6rem,3vw,2.1rem);margin-bottom:6px}
.cta-band p{color:#6b4229;font-size:1.05rem}
.cta-band .btn{flex:none}
.faq-list{max-width:820px;margin:0 auto;display:flex;flex-direction:column;gap:12px}
.faq{background:#fff;border:1px solid var(--line);border-radius:var(--radius-sm);overflow:hidden}
.faq summary{list-style:none;cursor:pointer;padding:20px 22px;display:flex;justify-content:space-between;align-items:center;gap:16px;font-family:var(--font-title);font-weight:700;font-size:1.06rem;color:var(--navy)}
.faq summary::-webkit-details-marker{display:none}
.faq summary .plus{flex:none;width:26px;height:26px;border-radius:50%;background:var(--cream-2);color:var(--accent);display:grid;place-items:center;font-size:1.2rem;line-height:1;transition:transform .2s ease,background .2s ease}
.faq[open] summary .plus{transform:rotate(45deg);background:var(--accent);color:#fff}
.faq .answer{padding:0 22px 20px;color:var(--muted);font-size:1rem}
.faq .answer p + p{margin-top:10px}
.profil-switch{display:flex;gap:12px;margin-bottom:22px}
.profil-switch label{flex:1;cursor:pointer}
.profil-switch input{position:absolute;opacity:0;pointer-events:none}
.profil-switch .opt{display:flex;flex-direction:column;gap:2px;border:2px solid var(--line);border-radius:var(--radius-sm); padding:14px 16px;transition:border-color .15s ease,background .15s ease}
.profil-switch .opt b{font-family:var(--font-body);font-weight:600}
.profil-switch .opt small{color:var(--muted);font-size:.82rem}
.profil-switch input:checked + .opt{border-color:var(--accent);background:#fff5f3}
.profil-switch input:focus-visible + .opt{box-shadow:0 0 0 4px rgba(192,54,45,.18)}
.contact-info{display:flex;flex-direction:column;gap:18px}
.info-item{display:flex;gap:14px;align-items:flex-start}
.info-item .ico{width:42px;height:42px;border-radius:10px;background:rgba(255,255,255,.1);color:var(--sand);display:grid;place-items:center;flex:none}
.info-item b{display:block;font-family:var(--font-body);font-weight:600}
.info-item span{color:rgba(255,255,255,.74);font-size:.94rem}
/* Les coordonnées sont du texte, sauf le téléphone et le lien LinkedIn :
   on les distingue par la couleur sable et un soulignement au survol,
   sinon rien ne les signale comme cliquables au milieu du bloc.

   Le rembourrage agrandit la zone tactile — une ligne de texte ne fait
   que 19 px de haut, là où un doigt en demande une quarantaine. La marge
   négative la reprend au pixel près : la zone déborde sur le vide
   alentour sans déplacer quoi que ce soit. C'est surtout vrai du
   téléphone, dont l'intérêt même est d'être touché sur un mobile. */
.info-item a{
  color:var(--sand);transition:color .15s ease;
  display:inline-block;padding:11px 6px;margin:-11px -6px;
}
.info-item a:hover{color:#fff;text-decoration:underline}
.map{border-radius:var(--radius);overflow:hidden;border:1px solid rgba(255,255,255,.18)}
.map iframe{display:block;width:100%;height:220px;border:0}

/* =========================================================
   MUR D'AVIS GOOGLE
   ---------------------------------------------------------
   Bloc réutilisable : placé ici plutôt que dans un CSS de page
   pour que partials/avis-google.php puisse être déposé sur
   n'importe quelle page sans ajouter de <link>.

   Le balisage est construit par assets/avis.js — voir ce fichier
   pour la correspondance des classes.
   ========================================================= */
.avis-entete{display:flex;flex-wrap:wrap;align-items:center;gap:14px;margin-bottom:30px}
.avis-note{font-family:var(--font-title);font-weight:800;font-size:2.6rem;line-height:1;color:var(--navy);letter-spacing:-.02em}
.avis-resume{display:flex;flex-direction:column;gap:3px}
.avis-volume{color:var(--muted);font-size:.88rem}
.avis-cta{margin-left:auto}

/* Les étoiles gardent le jaune Google plutôt que l'accent du site :
   c'est ce jaune qui atteste au visiteur qu'il lit un vrai avis Google
   et non un témoignage rédigé en interne. */
.avis-etoiles{display:inline-flex;gap:2px;line-height:0}
.avis-etoiles svg{width:17px;height:17px}
.avis-etoiles svg.on{fill:#fbbc04}
.avis-etoiles svg.off{fill:var(--line)}

/* ---- Carrousel ----
   La piste est un conteneur de défilement natif : glissement tactile,
   inertie et trackpad viennent du navigateur, le JS ne pilote que
   scrollLeft. Le nombre de cartes par écran est fixé ICI (3, puis 2,
   puis 1) et mesuré par avis.js — ne pas le dupliquer en JS. */
.avis-carrousel{position:relative}
.avis-piste{
  --avis-visibles:3;
  display:grid;grid-auto-flow:column;
  grid-auto-columns:calc((100% - (var(--avis-visibles) - 1) * 24px) / var(--avis-visibles));
  gap:24px;list-style:none;
  overflow-x:auto;overscroll-behavior-x:contain;
  scroll-snap-type:x mandatory;
  scrollbar-width:none;-ms-overflow-style:none;
}
.avis-piste::-webkit-scrollbar{display:none}
.avis-piste:focus-visible{outline:2px solid var(--accent);outline-offset:2px;border-radius:var(--radius)}
/* Assez de cartes pour tout voir : on redevient une grille classique. */
.avis-piste.est-fixe{grid-auto-flow:row;grid-template-columns:repeat(var(--avis-visibles),1fr);grid-auto-columns:auto;overflow-x:visible}

.avis-nav{display:flex;align-items:center;justify-content:center;gap:16px;margin-top:26px}
.avis-nav[hidden]{display:none}
.avis-fleche{
  width:44px;height:44px;flex:none;border-radius:50%;cursor:pointer;
  background:#fff;border:1px solid var(--line);color:var(--navy);
  display:grid;place-items:center;
  transition:background .15s ease,color .15s ease,border-color .15s ease,opacity .15s ease;
}
.avis-fleche svg{width:20px;height:20px}
.avis-fleche:hover:not(:disabled){background:var(--navy);border-color:var(--navy);color:#fff}
.avis-fleche:disabled{opacity:.35;cursor:default}
.avis-points{display:flex;align-items:center;gap:9px}
.avis-point{
  width:9px;height:9px;padding:0;border:0;border-radius:50%;cursor:pointer;
  background:var(--line);transition:background .15s ease,transform .15s ease;
}
.avis-point:hover{background:var(--blue-light)}
.avis-point.est-actif{background:var(--accent);transform:scale(1.25)}

.avis-carte{scroll-snap-align:start;background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:26px;display:flex;flex-direction:column;gap:14px}
.avis-auteur{display:flex;align-items:center;gap:12px}
.avis-avatar{width:44px;height:44px;flex:none;border-radius:50%;object-fit:cover}
.avis-avatar-vide{display:grid;place-items:center;background:var(--blue);color:#fff;font-family:var(--font-title);font-weight:700;font-size:1.05rem;text-transform:uppercase}
.avis-identite{display:flex;flex-direction:column;gap:1px;min-width:0}
.avis-nom{font-family:var(--font-body);font-weight:600;font-size:.95rem;color:var(--navy);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.avis-date{color:var(--muted);font-size:.8rem}
.avis-texte{font-size:1rem;color:var(--navy);overflow-wrap:break-word}

/* Repli à 6 lignes : au-delà, une carte très longue déséquilibre
   toute la rangée de la grille. */
.avis-texte.est-tronque{display:-webkit-box;-webkit-line-clamp:6;line-clamp:6;-webkit-box-orient:vertical;overflow:hidden}
.avis-plus{align-self:flex-start;padding:0;border:0;background:none;color:var(--accent);font-family:var(--font-body);font-weight:600;font-size:.88rem;cursor:pointer}
.avis-plus:hover{text-decoration:underline}

/* Attribution Google : exigée par les conditions d'utilisation
   de l'API, avec le nom et la photo de l'auteur. Ne pas retirer. */
.avis-pied{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-top:auto;padding-top:14px;border-top:1px solid var(--line)}
.avis-source{display:inline-flex;align-items:center;gap:6px;color:var(--muted);font-size:.8rem}
.avis-source:hover{color:var(--navy)}
.avis-signaler{color:var(--muted);font-size:.74rem;opacity:.7}
.avis-signaler:hover{opacity:1;text-decoration:underline}
.avis-logo-g{width:15px;height:15px;flex:none}
.avis-cta .avis-logo-g{width:17px;height:17px}

@media (max-width:980px){
  .hero-visual{order:-1}
  .cards,.quotes,.values{grid-template-columns:repeat(2,1fr)}
  .avis-piste{--avis-visibles:2}
  .gallery{grid-template-columns:repeat(2,1fr)}
}

@media (max-width:680px){
  .avis-piste{--avis-visibles:1}
  /* Sur une colonne, le bouton collé à droite serait à la ligne tout seul. */
  .avis-cta{margin-left:0}
  .obj{grid-template-columns:1fr}
  .obj .a{border-left:none;border-top:1px solid var(--line)}
  .bt-row{grid-template-columns:1fr}
  .bt-row .ben{border-right:none;border-bottom:1px solid var(--line)}
  .bt-head{display:none}
  .guarantee-inner{gap:20px}
  .cta-band .inner{flex-direction:column;align-items:flex-start}
}

@media (max-width:400px){
  .profil-switch{flex-direction:column}
}