/* ══════════════════════════════════════════════════════════════
   Frédérique Oberlé : Orthophonie & Orthologie · Boersch / Colmar
   Feuille de style commune à toutes les pages du site.
   Identité bleu pétrole (cf. MODIFICATIONS-A-FAIRE.md, point 2).
   ══════════════════════════════════════════════════════════════ */

/* RESET */
*,*::before,*::after{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth; overflow-x:clip; overflow-y:auto}

/* ══════════════════════════════════
   COULEURS DU SITE
   Structure type medecin-template :
     fonds ivoire / blanc / pierre (beige)
     accent bleu pétrole en touches (boutons, liens, CTA)
   Nuances inspirées Alma light + DA Oberlé #2E6E7E.
══════════════════════════════════ */
:root{
  /* Fonds neutres chauds (pages) */
  --blanc:      #FFFFFF;
  --creme:      #FAF8F5;   /* ivoire page */
  --creme2:     #F6F3EE;   /* ivoire très léger */
  --creme3:     #F0EDE7;   /* pierre claire */
  --texte:      #1A1D1C;
  --texte-s:    #3A4340;   /* corps — contraste sur beige */
  --texte-m:    #5A635F;

  /* Accent bleu pétrole + variantes (détails, pas fonds de section) */
  --accent:      #2E6E7E;
  --accent-l:    #3F9BB0;
  --accent-mid:  #6EC4D4;   /* aqua clair — contraste fort entre cards */
  --accent-pale: #D4EBF0;   /* lavis bleu — citations / notes uniquement */
  --accent-d:    #1A4552;
  --accent-soft: #EAF5F7;   /* hover discret bleu — cards sur fond crème */
  --hover-beige: #F6F3EE;   /* hover discret beige — cards sur fond blanc */

  --sauge:      #5F7263;   /* proche medecin — secondaire */
  --sauge-d:    #465649;
  --sauge-l:    #DCE5DE;
  --sauge-deep: #2A4534;

  --corail:     #D4846A;   /* reserve — pas utilise sur les cards */
  --corail-l:   #E8B5A4;

  --miel:       #C9A24A;   /* etoiles avis uniquement */
  --miel-pale:  #F5F0E4;

  --perle:      #E8E4DC;   /* bordures pierre claires */
  --noir:       #14191A;

  --serif: 'Lora', Georgia, serif;
  --sans:  'Jost', sans-serif;
}

body{
  font-family: var(--sans);
  background: var(--creme);
  color: var(--texte);
  font-weight: 400;
  letter-spacing: 0.01em;
  line-height: 1.8;
  font-size: 16px;
}

/* ══════════════════════════════════
   LETTRES GÉANTES FOND FIXE
══════════════════════════════════ */
#bg-letters{position:fixed; inset:0; z-index:0; pointer-events:none; overflow:hidden}
#bg-letters span{position:absolute; font-family:var(--serif); font-weight:400; user-select:none; line-height:1; color:rgba(46,110,126,0.07)}
#bg-letters .bl1{font-size:40vw; top:-8%; left:-5%}
#bg-letters .bl2{font-size:30vw; top:30%; right:-8%; color:rgba(154,139,114,0.08)}
#bg-letters .bl3{font-size:24vw; bottom:5%; left:6%; color:rgba(46,110,126,0.06)}
#bg-letters .bl4{font-size:18vw; top:55%; left:35%; color:rgba(110,196,212,0.07)}
#bg-letters .bl5{font-size:26vw; bottom:-8%; right:-5%; color:rgba(46,110,126,0.07)}

.site-wrap{position:relative; z-index:1}

/* ══════════════════════════════════
   NAVIGATION
══════════════════════════════════ */
.nav{
  position:sticky; top:0; z-index:500;
  display:flex; align-items:center; justify-content:space-between;
  height:84px; padding:0 4rem;
  background:var(--creme);
  border-bottom:1px solid var(--perle);
  transition:box-shadow .3s;
}
.nav.scrolled{box-shadow:0 2px 24px rgba(26,29,28,0.08)}

.logo{
  cursor:pointer; text-decoration:none;
  display:inline-flex; flex-direction:column; align-items:stretch;
  text-align:center; gap:0.15rem;
}
.logo-top{
  font-size:.55rem; font-weight:300; letter-spacing:0.22em; text-transform:uppercase;
  color:var(--texte-m); line-height:1.3;
}
.logo-main{
  font-family:var(--serif); font-size:1.6rem; font-weight:400; letter-spacing:0.02em;
  color:var(--texte); line-height:1.15; white-space:nowrap;
}
.logo-main em{font-style:italic; color:var(--accent)}
.logo-sub{
  font-size:.5rem; font-weight:300; letter-spacing:0.22em; text-transform:uppercase;
  color:var(--accent); display:flex; align-items:center; justify-content:center;
  gap:0.55rem; margin-top:0.15rem; width:100%;
}
.logo-sub::before,.logo-sub::after{
  content:''; flex:1 1 0; height:1px; min-width:10px; max-width:28px;
  background:var(--accent); opacity:.85;
}

.nav-links{display:flex; list-style:none}
.nav-links a{
  display:flex; align-items:center; height:84px;
  padding:0 0.95rem;
  font-size:.72rem; font-weight:400; letter-spacing:0.16em; text-transform:uppercase;
  color:var(--texte-s); text-decoration:none; cursor:pointer;
  position:relative;
  transition:color .3s;
}
.nav-links a::after{
  content:''; position:absolute;
  bottom:18px; left:0.95rem; right:0.95rem;
  height:2px; background:transparent;
  transition:background .3s;
}
.nav-links a:hover{color:var(--accent)}
.nav-links a:hover::after{background:rgba(46,110,126,0.45)}
.nav-links a.active{color:var(--accent)}
.nav-links a.active::after{background:var(--accent)}

.nav-rdv{
  font-family:var(--sans); font-size:.6rem; font-weight:400;
  letter-spacing:0.2em; text-transform:uppercase;
  color:var(--blanc); background:var(--accent);
  border:none; cursor:pointer; padding:0.75rem 1.6rem;
  transition:background .3s, transform .2s; white-space:nowrap;
  border-radius:2px; text-decoration:none; display:inline-block;
}
.nav-rdv:hover{background:var(--accent-d); transform:translateY(-1px)}
.nav-mobile-cta{display:none}
.logo-img-mobile{display:none}

/* ══════════════════════════════════
   TYPOGRAPHIE GLOBALE
══════════════════════════════════ */
.eyebrow{
  display:inline-flex; align-items:center; gap:.75rem;
  font-size:.68rem; font-weight:500; letter-spacing:0.28em;
  text-transform:uppercase; color:var(--accent); margin-bottom:1.2rem;
}
.eyebrow-wrap{max-width:100%; align-items:flex-start}
.eyebrow-wrap span{min-width:0; white-space:normal; line-height:1.45}
.eyebrow-light{color:rgba(255,255,255,0.92)}
.eyebrow-light::before{background:rgba(255,255,255,0.75)}

.t-banner{font-family:var(--serif); font-size:clamp(2rem,5.5vw,5.8rem); font-weight:400; color:#ffffff; line-height:1.02; margin-bottom:1.6rem}
.t-banner em{font-style:normal; font-weight:inherit; color:inherit}

.t-section{font-family:var(--serif); font-size:clamp(1.8rem,3.5vw,3.2rem); font-weight:400; line-height:1.1; color:var(--texte)}
.t-section em{font-style:normal; font-weight:inherit; color:var(--accent)}

.t-sub{font-family:var(--serif); font-size:1.5rem; font-weight:400; color:var(--texte); margin-bottom:0.8rem; line-height:1.25}

.body-t{font-size:1rem; line-height:1.9; color:var(--texte-s)}
.body-t-sm{font-size:.9rem; line-height:1.9; color:var(--texte-s)}
.body-t a:not(.btn),
.body-t-sm a:not(.btn),
.legal-wrap a:not(.btn),
.accord-body a:not(.btn),
.cd-val a:not(.btn){
  color:var(--accent); text-decoration:none; transition:color .3s;
}
.body-t a:not(.btn):hover,
.body-t-sm a:not(.btn):hover,
.legal-wrap a:not(.btn):hover,
.accord-body a:not(.btn):hover,
.cd-val a:not(.btn):hover{color:var(--accent-d)}
.body-t a:not(.btn):focus-visible,
.body-t-sm a:not(.btn):focus-visible,
.legal-wrap a:not(.btn):focus-visible,
.accord-body a:not(.btn):focus-visible,
.cd-val a:not(.btn):focus-visible{
  outline:2px solid var(--accent); outline-offset:3px;
}
.legal-wrap a.btn.btn-solid{
  color:var(--blanc); -webkit-text-fill-color:var(--blanc);
}
.legal-wrap a.btn.btn-solid:hover{
  color:var(--blanc); -webkit-text-fill-color:var(--blanc); background:var(--accent-d);
}
.legal-wrap a.btn.btn-dark{
  color:var(--texte); -webkit-text-fill-color:var(--texte);
}
.legal-wrap a.btn.btn-dark:hover{
  color:var(--blanc); -webkit-text-fill-color:var(--blanc);
}

.gold-line{width:48px; height:2px; background:linear-gradient(90deg, var(--accent), var(--accent-mid)); margin:2rem 0; border:none}
.pad{padding:5.5rem 5rem}
.pad-h{padding:0 5rem}

/* ══════════════════════════════════
   BOUTONS
══════════════════════════════════ */
.btn{
  display:inline-block; font-family:var(--sans);
  font-size:.68rem; font-weight:400; letter-spacing:0.16em; text-transform:uppercase;
  padding:0.9rem 2rem; border:1px solid currentColor;
  background:transparent; cursor:pointer; transition:all .32s; text-decoration:none;
}
.btn-dark{color:var(--texte); border-color:var(--texte)}
.btn-dark:hover{background:var(--texte); color:var(--blanc)}
.btn-sauge{color:var(--sauge-d); border-color:var(--sauge-d)}
.btn-sauge:hover{background:var(--sauge-d); color:var(--blanc)}
.btn-accent{color:var(--accent); border-color:var(--accent)}
.btn-accent:hover{background:var(--accent); color:var(--blanc)}
.btn-solid{background:var(--accent); color:var(--blanc); border-color:var(--accent)}
.btn-solid:hover{background:var(--accent-d)}
.btn-ol{color:#ffffff; border-color:var(--accent-mid); background:rgba(63,155,176,0.32)}
.btn-ol:hover{background:var(--accent-l); color:#ffffff; border-color:var(--accent-l)}

/* ══════════════════════════════════
   BANNIÈRES
══════════════════════════════════ */
.banner{position:relative; width:100%; overflow:hidden}
.banner-hero-h{height:82vh; min-height:560px; max-height:760px}
.b-accueil.banner-hero-h{height:70vh; min-height:480px; max-height:660px}

/* La bannière d'accueil (nav + hero + stats) tient toujours dans la fenêtre
   d'ouverture : le hero absorbe l'espace restant pour qu'aucune amorce de
   la section suivante ne dépasse en bas au chargement. */
.home-hero-viewport{display:flex; flex-direction:column; height:calc(100vh - 84px); height:calc(100svh - 84px)}
.home-hero-viewport .b-accueil.banner-hero-h{flex:1 1 0%; height:0; min-height:420px; max-height:none}
.home-hero-viewport .hero-stats-wrap{flex-shrink:0}
.banner-page-h{height:82vh; min-height:560px; max-height:760px}
.banner-short-h{height:82vh; min-height:560px; max-height:760px}

.b-img{position:absolute; inset:0}
img.b-img-el{
  width:100%; height:100%; object-fit:cover; display:block;
}
.b-accueil img.b-img-el{object-position:center 35%}
.b-orthophonie img.b-img-el{object-position:center 40%}
.b-orthologie img.b-img-el{object-position:75% 40%}
.b-methode img.b-img-el{object-position:center 20%}
.b-conseils img.b-img-el{object-position:center 25%}
.b-contact img.b-img-el{object-position:center 58%}
.b-contact .b-overlay{
  background:linear-gradient(108deg,
    rgba(26,26,20,0.44) 0%,
    rgba(26,26,20,0.26) 48%,
    rgba(26,26,20,0.10) 100%);
}

.b-overlay{
  position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(108deg,
    rgba(26,26,20,0.52) 0%,
    rgba(26,26,20,0.32) 48%,
    rgba(26,26,20,0.12) 100%);
}
.b-accueil .b-overlay{
  background:linear-gradient(108deg,
    rgba(26,26,20,0.68) 0%,
    rgba(26,26,20,0.45) 42%,
    rgba(26,26,20,0.16) 100%);
}
.b-letter{
  position:absolute; right:-3%; bottom:-12%;
  font-family:var(--serif); font-weight:400;
  font-size:72vh; line-height:0.78;
  color:rgba(247,244,239,0.04);
  pointer-events:none; user-select:none; letter-spacing:-0.02em;
}
.b-content{position:relative; z-index:2; height:100%; display:flex; flex-direction:column; justify-content:center; align-items:center; text-align:center; padding:5rem}
.b-aside{max-width:76ch; margin-top:1.4rem; background:rgba(255,255,255,.96); border-radius:14px; padding:1.7rem 2.2rem; border:1px solid rgba(46,110,126,.18); text-align:left}
.b-aside p{
  font-family:var(--serif); font-size:clamp(.98rem,.3vw + .92rem,1.1rem);
  font-weight:400; font-style:normal; color:var(--texte);
  line-height:1.75; letter-spacing:.01em;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
}
.b-aside cite{
  display:inline-block; margin-top:1rem;
  font-family:var(--sans); font-style:normal; font-size:.78rem; font-weight:500;
  letter-spacing:.12em; text-transform:uppercase; color:var(--accent);
  line-height:1.5;
}

.b-sub{font-size:1rem; line-height:1.9; color:rgba(255,255,255,0.82); max-width:76ch; margin:0 auto 2rem}

.scroll-cue{
  width:100%; display:flex; flex-direction:column; align-items:center; gap:.5rem;
  padding:1.6rem 0 1.4rem; background:var(--creme); border:none; cursor:pointer;
  color:var(--accent); font-family:var(--sans); font-size:.6rem;
  letter-spacing:.3em; text-transform:uppercase; transition:color .3s;
}
.scroll-cue:hover{color:var(--accent-d)}
.scroll-cue::after{content:''; width:1px; height:20px; background:linear-gradient(to bottom, var(--accent), transparent); animation:cueLine 2s ease-in-out infinite}
.scroll-cue:hover::after{background:linear-gradient(to bottom, var(--accent-d), transparent)}
@keyframes cueLine{0%{transform:scaleY(0); transform-origin:top} 50%{transform:scaleY(1); transform-origin:top} 50.001%{transform-origin:bottom} 100%{transform:scaleY(0); transform-origin:bottom}}

.hero-stats-wrap{background:var(--blanc); border-top:3px solid var(--accent); border-bottom:1px solid var(--perle); box-shadow:0 4px 20px rgba(26,29,28,.05)}
.hero-stats{display:grid; grid-template-columns:repeat(3,1fr); width:100%}
.h-stat{padding:2.2rem 1.15rem; border-right:1px solid var(--perle); text-align:center; transition:background .3s; display:flex; align-items:center; justify-content:center; overflow:hidden}
.h-stat:hover{background:var(--hover-beige)}
.h-stat:last-child{border-right:none}
.h-stat-inner{display:flex; flex-direction:column; align-items:center; gap:.55rem; width:100%; animation:statPop .6s ease both}
.h-stat-num{font-family:var(--sans); font-size:.9rem; font-weight:500; letter-spacing:.04em; color:var(--accent-d); line-height:1.3; white-space:nowrap}
.h-stat:nth-child(2) .h-stat-num{color:var(--accent)}
.h-stat:nth-child(3) .h-stat-num{color:var(--accent-mid)}
.h-stat-title{font-family:var(--serif); font-size:clamp(1.22rem,1.35vw + .45rem,1.68rem); font-weight:400; color:var(--texte); line-height:1.2; white-space:nowrap}
@keyframes statPop{from{opacity:0; transform:translateY(8px)} to{opacity:1; transform:translateY(0)}}
.h-stat-desc{font-size:clamp(.84rem,.45vw + .48rem,.94rem); color:var(--texte-s); line-height:1.4; white-space:nowrap}

.hero-badge{display:inline-flex; align-items:center; gap:0.8rem; background:rgba(255,255,255,0.15); border:1px solid rgba(255,255,255,0.35); padding:0.5rem 1.1rem; margin-bottom:2.5rem}
.hero-badge span{font-size:.58rem; font-weight:300; letter-spacing:0.26em; text-transform:uppercase; color:#ffffff}
.hero-actions{display:flex; align-items:center; justify-content:center; gap:2rem; flex-wrap:wrap}
.hero-google-sticker{
  position:absolute; right:2rem; bottom:1.8rem; z-index:3;
  display:inline-flex; align-items:center; gap:.65rem;
  background:rgba(255,255,255,.96); border:1px solid rgba(46,110,126,.18);
  padding:.55rem .9rem; text-decoration:none; color:var(--texte);
  box-shadow:0 8px 28px rgba(20,25,26,.14);
  transition:transform .25s ease, box-shadow .25s ease;
}
.hero-google-sticker:hover{transform:translateY(-2px); box-shadow:0 12px 32px rgba(20,25,26,.18)}
.hero-google-stars{color:var(--miel); font-size:.85rem; letter-spacing:.06em; line-height:1}
.hero-google-text{display:flex; flex-direction:column; gap:.1rem; line-height:1.15}
.hero-google-text strong{font-family:var(--serif); font-size:.95rem; font-weight:500; color:var(--texte)}
.hero-google-text span{font-size:.52rem; letter-spacing:.16em; text-transform:uppercase; color:var(--texte-m)}
.ghost-btn{font-size:.62rem; letter-spacing:0.2em; text-transform:uppercase; color:rgba(255,255,255,0.65); background:none; border:none; cursor:pointer; font-family:var(--sans); transition:color .3s}
.ghost-btn:hover{color:var(--accent-l)}

/* ══════════════════════════════════
   ACCUEIL
══════════════════════════════════ */
.about-grid{display:grid; grid-template-columns:380px 1fr; gap:0; min-height:580px}
.portrait-col{position:relative; overflow:hidden; background:var(--sauge-deep)}
.portrait-img{
  width:100%; height:100%; min-height:580px;
  object-fit:cover; object-position:center 12%;
  display:block;
  filter:none;
  image-rendering:auto;
}
.portrait-caption{position:absolute; bottom:0; left:0; right:0; padding:2rem; background:linear-gradient(to top, rgba(20,20,14,.92) 0%, transparent 100%)}
.portrait-name{font-family:var(--serif); font-size:1.4rem; font-weight:400; color:rgba(247,244,239,.9)}
.portrait-role{font-size:.58rem; letter-spacing:.22em; text-transform:uppercase; color:#ffffff; margin-top:.3rem}

.about-content{padding:5.5rem 5rem; background:var(--blanc); display:flex; flex-direction:column; justify-content:center}
.cred-list{display:flex; flex-direction:column; gap:.55rem; margin-top:1.8rem}
.cred-item{display:flex; align-items:flex-start; gap:.9rem; padding:.8rem 1.1rem; background:var(--creme); border-left:2px solid var(--perle); font-size:.9rem; color:var(--texte-s); transition:border-color .3s, background .3s}
.cred-item:hover{border-left-color:var(--accent); background:var(--accent-soft)}
.cred-dot{width:6px; height:6px; border-radius:50%; background:var(--accent); flex-shrink:0; margin-top:.55rem}

.cred-timeline{
  display:grid; grid-template-columns:repeat(auto-fit, minmax(200px,1fr)); gap:1.3rem;
}
.cred-timeline .cred-item{
  flex-direction:column; align-items:flex-start; gap:1rem;
  background:var(--blanc); border:1px solid var(--perle); border-left:none;
  border-top:3px solid var(--accent-pale); padding:1.7rem 1.5rem;
  transition:border-top-color .3s, box-shadow .3s, transform .3s;
}
.cred-timeline .cred-item:hover{
  border-top-color:var(--accent); background:var(--blanc);
  box-shadow:0 8px 28px rgba(20,25,26,.08); transform:translateY(-3px);
}
.cred-timeline .cred-dot{
  width:30px; height:30px; border-radius:50%; margin-top:0; flex-shrink:0;
  background:var(--accent-pale); display:flex; align-items:center; justify-content:center;
  transition:background .3s;
}
.cred-timeline .cred-dot svg{width:15px; height:15px; color:var(--accent-d)}
.cred-timeline .cred-item:hover .cred-dot{background:var(--accent)}
.cred-timeline .cred-item:hover .cred-dot svg{color:var(--blanc)}
.parcours-dots{display:none; justify-content:center; gap:.6rem; margin-top:1.2rem}

.services{padding:5.5rem 5rem; background:var(--creme); position:relative}
.services > *:not(.services-letters){position:relative; z-index:1}
/* Lettres propres à la section, fixed + clip = même effet parallaxe que #bg-letters */
.services-letters{
  position:absolute; top:0; left:0; width:100%; height:100%;
  clip:rect(0, auto, auto, 0); pointer-events:none; z-index:0;
}
.services-letters span{
  position:fixed; font-family:var(--serif); font-weight:400;
  user-select:none; line-height:1; color:rgba(46,110,126,0.07);
}
.services-letters .sv-bl1{font-size:36vw; top:-6%; left:-6%}
.services-letters .sv-bl2{font-size:28vw; top:35%; right:-8%; color:rgba(154,139,114,0.08)}
.services-letters .sv-bl3{font-size:20vw; bottom:2%; left:28%; color:rgba(110,196,212,0.07)}
.services-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:1.8rem; margin-top:3.5rem}
.s-card{background:var(--blanc); border:1px solid var(--perle); padding:3rem 2.5rem; transition:all .35s; position:relative; overflow:hidden; cursor:pointer; text-decoration:none; display:block; color:inherit}
.s-card::after{content:''; position:absolute; bottom:0; left:0; right:0; height:3px; background:linear-gradient(90deg, var(--accent-d), var(--accent)); transform:scaleX(0); transform-origin:left; transition:transform .4s}
.s-card:nth-child(2)::after{background:linear-gradient(90deg, var(--accent), var(--accent-l))}
.s-card:nth-child(3)::after{background:linear-gradient(90deg, var(--accent-l), var(--accent-mid))}
.s-card:hover{box-shadow:0 10px 50px rgba(46,110,126,.12); transform:translateY(-4px); border-color:var(--accent-l); background:var(--accent-soft)}
.s-card:hover::after{transform:scaleX(1)}
.s-num{font-family:var(--serif); font-size:4.4rem; font-weight:400; color:var(--accent-pale); line-height:1; margin-bottom:1rem; transition:color .3s}
.s-card:nth-child(1) .s-num{color:rgba(26,69,82,0.35)}
.s-card:nth-child(2) .s-num{color:rgba(46,110,126,0.38)}
.s-card:nth-child(3) .s-num{color:rgba(110,196,212,0.55)}
.s-card:nth-child(1):hover .s-num{color:rgba(26,69,82,0.8)}
.s-card:nth-child(2):hover .s-num{color:rgba(46,110,126,0.85)}
.s-card:nth-child(3):hover .s-num{color:rgba(110,196,212,0.95)}
.s-name{font-family:var(--serif); font-size:1.45rem; font-weight:400; color:var(--texte); margin-bottom:.9rem}
.s-text{font-size:.92rem; line-height:1.9; color:var(--texte-s)}
.s-link{display:inline-flex; align-items:center; gap:.5rem; margin-top:1.8rem; font-size:.62rem; letter-spacing:.2em; text-transform:uppercase; color:var(--accent); background:none; border:none; cursor:pointer; font-family:var(--sans); font-weight:300; transition:gap .3s, color .3s}
.s-card:hover .s-link{gap:.9rem; color:var(--accent-d)}

.key-figures{background:var(--blanc); padding:5.5rem 5rem; display:grid; grid-template-columns:repeat(4,1fr); gap:0; border-top:3px solid var(--accent)}
.kf{padding:2rem 2.5rem; text-align:center; border-right:1px solid var(--perle)}
.kf:last-child{border-right:none}
.kf-num{font-family:var(--serif); font-size:3.2rem; font-weight:400; color:var(--accent-mid); line-height:1; display:block; margin-bottom:.5rem}
.kf:nth-child(2) .kf-num{color:var(--accent-l)}
.kf:nth-child(3) .kf-num{color:var(--accent)}
.kf:nth-child(4) .kf-num{color:var(--accent-d)}
.kf-title{font-family:var(--serif); font-size:clamp(1.35rem,2vw,1.65rem); font-weight:400; color:var(--texte); margin-bottom:.4rem}
.kf-text{font-size:.9rem; color:var(--texte-s); line-height:1.7}

.cta-band{padding:5.5rem 5rem; background:linear-gradient(115deg, var(--accent-d) 0%, var(--accent) 48%, var(--accent-l) 100%); display:grid; grid-template-columns:1fr auto; gap:4rem; align-items:center; border-left:none}
.cta-txt{font-family:var(--serif); font-size:clamp(1.55rem,.9vw + 1rem,2.55rem); font-weight:400; font-style:normal; color:rgba(255,255,255,.96); line-height:1.35; max-width:60ch}
.cta-band .btn{color:rgba(255,255,255,.92); border-color:rgba(255,255,255,.55); background:transparent}
.cta-band .btn:hover{background:rgba(255,255,255,.14); color:#fff; border-color:#fff}
.cta-band .btn-solid{background:var(--blanc); color:var(--accent-d); border-color:var(--blanc)}
.cta-band .btn-solid:hover{background:var(--creme); color:var(--accent-d); border-color:var(--creme)}

/* Avis : bande courte accueil */
.avis-strip{padding:3rem 5rem; background:var(--blanc); display:flex; align-items:center; gap:1.2rem; border-top:1px solid var(--perle); border-bottom:1px solid var(--perle); flex-wrap:wrap}
.avis-strip .stars{color:var(--miel); font-size:1.1rem; letter-spacing:.08em}
.stars{color:var(--miel)}
.avis-strip p{font-size:0.9rem; color:var(--texte-s)}
.avis-strip a{margin-left:auto; font-size:0.64rem; letter-spacing:.2em; text-transform:uppercase; color:var(--accent); text-decoration:none}
.avis-strip a:hover{color:var(--accent-d)}

/* ══════════════════════════════════
   ORTHOLOGIE / mise en page 2 colonnes
══════════════════════════════════ */
.two-col{display:grid; grid-template-columns:1fr 1fr; gap:0}
.col-l{padding:5.5rem 5rem; background:var(--creme)}
.col-r{padding:5.5rem 5rem; background:var(--blanc)}

.quote-box{background:var(--accent-pale); border-left:4px solid var(--accent); padding:2.2rem 2.5rem; margin-top:2.2rem}
.quote-box p{
  font-family:var(--serif); font-size:1.28rem; font-weight:400; font-style:normal;
  color:var(--texte); line-height:1.75; letter-spacing:.01em;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
}
.quote-box .quote-attr,
.quote-box cite{
  display:block; margin-top:1rem;
  font-family:var(--sans); font-style:normal; font-size:.82rem; font-weight:500;
  letter-spacing:.08em; text-transform:uppercase; color:var(--accent); line-height:1.5;
}

.accord{display:flex; flex-direction:column}
.accord-item{border-top:1px solid var(--perle); cursor:pointer; transition:background .25s}
.accord-item:last-child{border-bottom:1px solid var(--perle)}
.accord-dot{width:11px; height:11px; border-radius:50%; background:var(--accent); flex-shrink:0; transition:transform .3s}
.accord-item:hover .accord-dot{transform:scale(1.4)}
.accord-name{font-family:var(--serif); font-size:1.1rem; font-weight:400; color:var(--texte); flex:1}
.accord-icon{font-size:.85rem; color:var(--perle); transition:all .3s; font-family:var(--sans)}
.accord-item:hover .accord-icon,.accord-item.open .accord-icon{color:var(--accent)}
.accord-item.open .accord-icon{transform:rotate(90deg)}
.accord-body{display:none; padding:0 0 1.5rem 1.8rem; font-size:.92rem; line-height:1.9; color:var(--texte-s)}
.accord-item.open .accord-body{display:block}
.accord-header{all:unset; display:flex; align-items:center; gap:1rem; padding:1.5rem 0; cursor:pointer; width:100%; box-sizing:border-box}
.accord-header:focus-visible,
a:focus-visible,
button:focus-visible{
  outline:2px solid var(--accent);
  outline-offset:3px;
}
h2.accord-name{margin:0; font-family:var(--serif); font-size:1.1rem; font-weight:400; color:var(--texte); flex:1; line-height:1.35}
.faq-aeo .accord-item{cursor:default}
.faq-aeo .accord-header{cursor:default; padding:1.5rem 0 0.65rem}
.faq-aeo .accord-icon{display:none}
.faq-aeo .accord-body{display:block}

.accord-center{margin:0 auto}
.faq-more{margin:2rem auto 0; text-align:center; max-width:780px; font-size:.85rem; color:var(--texte-m)}
.faq-more a{color:var(--accent); text-decoration:none; border-bottom:1px solid var(--accent-pale); transition:border-color .3s}
.faq-more a:hover{border-color:var(--accent)}

.src-lbl{font-size:.6rem; letter-spacing:.28em; text-transform:uppercase; color:var(--accent); display:block; margin-bottom:0.9rem; margin-top:2rem}
.src-box{background:rgba(94,154,114,.1); border-left:3px solid var(--sauge); padding:2rem 2.5rem; margin-top:1.5rem}
.src-box p{font-size:.92rem; color:var(--texte-s); line-height:1.9}

.steps-section{padding:5.5rem 5rem; background:var(--blanc); position:relative}
.steps-section > *:not(.steps-letters){position:relative; z-index:1}
.steps-letters{
  position:absolute; top:0; left:0; width:100%; height:100%;
  clip:rect(0, auto, auto, 0); pointer-events:none; z-index:0;
}
.steps-letters span{
  position:fixed; font-family:var(--serif); font-weight:400;
  user-select:none; line-height:1; color:rgba(46,110,126,0.07);
}
.steps-letters .st-bl1{font-size:34vw; top:-5%; left:-5%}
.steps-letters .st-bl2{font-size:26vw; top:38%; right:-7%; color:rgba(154,139,114,0.08)}
.steps-letters .st-bl3{font-size:18vw; bottom:4%; left:30%; color:rgba(110,196,212,0.07)}
.steps-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:1px; background:var(--perle); margin-top:4rem}
.step{background:var(--blanc); padding:3rem 2.2rem; position:relative; transition:background .35s}
.step:hover{background:var(--hover-beige)}
.step::before{content:''; position:absolute; top:0; left:0; right:0; height:3px; background:var(--accent-pale); transition:background .3s}
.step:hover::before{background:var(--accent)}
.step:nth-child(1)::before{background:rgba(110,196,212,.55)}
.step:nth-child(1):hover::before{background:var(--accent-mid)}
.step:nth-child(2)::before{background:rgba(63,155,176,.45)}
.step:nth-child(2):hover::before{background:var(--accent-l)}
.step:nth-child(3)::before{background:rgba(46,110,126,.4)}
.step:nth-child(3):hover::before{background:var(--accent)}
.step:nth-child(4)::before{background:rgba(26,69,82,.35)}
.step:nth-child(4):hover::before{background:var(--accent-d)}
.step-n{font-family:var(--serif); font-size:2.6rem; font-weight:400; color:rgba(110,196,212,.5); line-height:1; margin-bottom:1.5rem; display:block}
.step:nth-child(2) .step-n{color:rgba(63,155,176,.4)}
.step:nth-child(3) .step-n{color:rgba(46,110,126,.35)}
.step:nth-child(4) .step-n{color:rgba(26,69,82,.28)}
.step-t{font-family:var(--serif); font-size:1.2rem; font-weight:400; color:var(--texte); margin-bottom:.8rem}
.step-d{font-size:.9rem; line-height:1.9; color:var(--texte-s)}
.step-tag{display:inline-block; margin-top:1.2rem; font-size:.58rem; letter-spacing:.18em; text-transform:uppercase; color:var(--accent-l); border-bottom:1px solid rgba(63,155,176,.45); padding-bottom:.2rem}

.temos{padding:5.5rem 5rem; background:var(--creme)}
.temos-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:1.8rem; margin-top:3.5rem}
.avis-actions{
  display:flex; flex-direction:column; align-items:center; gap:1.1rem;
  margin-top:2.8rem; text-align:center;
}
.avis-link-secondary{
  font-size:0.72rem; letter-spacing:.15em; text-transform:uppercase;
  color:var(--accent); text-decoration:none; transition:color .25s;
}
.avis-link-secondary:hover{color:var(--accent-d)}
.temo{background:var(--blanc); border:1px solid var(--perle); padding:2.8rem 2.2rem; transition:all .3s; border-top:3px solid var(--accent-d)}
.temo:nth-child(2){border-top-color:var(--accent)}
.temo:nth-child(3){border-top-color:var(--accent-mid)}
.temo:hover{background:var(--accent-soft); transform:translateY(-3px); box-shadow:0 6px 30px rgba(46,110,126,.1)}
.temo-mark{font-family:var(--serif); font-size:4rem; font-weight:400; color:rgba(63,155,176,.28); line-height:1; display:block; margin-bottom:.4rem}
.temo-q{font-family:var(--serif); font-size:1.32rem; font-weight:400; font-style:normal; color:var(--texte); line-height:1.85; margin-bottom:1.8rem}
.temo-author{font-size:.62rem; letter-spacing:.2em; text-transform:uppercase; color:var(--accent)}
.temo-detail{font-size:.78rem; color:var(--texte-s); margin-top:.25rem}

/* ══════════════════════════════════
   CARROUSEL D'AVIS
══════════════════════════════════ */
.carousel{position:relative; max-width:760px; margin:3.5rem auto 0}
.carousel-viewport{overflow:hidden}
.carousel-track{display:flex; transition:transform .5s cubic-bezier(.4,0,.2,1)}
.carousel-slide{flex:0 0 100%; padding:0 .5rem; box-sizing:border-box}
.carousel-slide .temo{border-top:3px solid var(--accent-l); text-align:center; padding:3rem 3.5rem}
.carousel-slide .temo-q{font-size:1.25rem}
.carousel-arrows{display:flex; justify-content:space-between; position:absolute; top:50%; left:-1.5rem; right:-1.5rem; transform:translateY(-50%); pointer-events:none}
.carousel-arrow{pointer-events:auto; width:44px; height:44px; border-radius:50%; background:var(--blanc); border:1px solid var(--perle); color:var(--texte); cursor:pointer; display:flex; align-items:center; justify-content:center; font-size:1.1rem; transition:background .3s, color .3s, border-color .3s; box-shadow:0 4px 16px rgba(20,25,26,.08)}
.carousel-arrow:hover{background:var(--accent); color:var(--blanc); border-color:var(--accent)}
.carousel-dots{display:flex; justify-content:center; gap:.6rem; margin-top:2rem}
.carousel-dot{width:8px; height:8px; border-radius:50%; background:var(--perle); border:none; cursor:pointer; padding:0; transition:background .3s, transform .3s}
.carousel-dot.active{background:var(--accent); transform:scale(1.3)}
@media(min-width:769px){
  .carousel[data-layout="grid-desktop"]{max-width:none}
  .carousel[data-layout="grid-desktop"] .carousel-viewport{overflow:visible}
  .carousel[data-layout="grid-desktop"] .carousel-track{
    display:grid; grid-template-columns:repeat(3,1fr); gap:1.8rem; transform:none !important;
  }
  .carousel[data-layout="grid-desktop"] .carousel-slide{padding:0}
  .carousel[data-layout="grid-desktop"] .carousel-slide .temo{padding:2.8rem 2.2rem}
  .carousel[data-layout="grid-desktop"] .carousel-slide:nth-child(1) .temo{border-top-color:var(--accent-d)}
  .carousel[data-layout="grid-desktop"] .carousel-slide:nth-child(2) .temo{border-top-color:var(--accent)}
  .carousel[data-layout="grid-desktop"] .carousel-slide:nth-child(3) .temo{border-top-color:var(--accent-mid)}
  .carousel[data-layout="grid-desktop"] .carousel-arrows,
  .carousel[data-layout="grid-desktop"] .carousel-dots{display:none}
}

/* ══════════════════════════════════
   MA MÉTHODE
══════════════════════════════════ */
.formations-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:1.8rem; margin:3.5rem auto 0; max-width:1100px}
.formation{padding:2.8rem 2.2rem; background:var(--blanc); border:1px solid var(--perle); border-top:3px solid var(--accent-d); transition:border-top-color .3s, box-shadow .3s}
.formation:nth-child(2){border-top-color:var(--accent)}
.formation:nth-child(3){border-top-color:var(--accent-mid)}
.formation:hover{border-top-color:var(--accent-l); box-shadow:0 4px 24px rgba(46,110,126,.1); background:var(--accent-soft)}
.formation{overflow:hidden}
.formation-img{width:100%; height:150px; object-fit:cover; object-position:center; margin-bottom:1.8rem; filter:saturate(.92); transition:filter .35s, transform .5s ease; display:block}
.formation:hover .formation-img{filter:saturate(1); transform:scale(1.06)}
.formation-name{font-family:var(--serif); font-size:1.2rem; font-weight:400; color:var(--texte); margin-bottom:.8rem}
.formation-text{font-size:.92rem; line-height:1.9; color:var(--texte-s)}

.timeline{position:relative; padding-left:3.6rem; margin-top:2.5rem; display:flex; flex-direction:column}
.timeline::before{content:''; position:absolute; left:1.2rem; top:1.2rem; bottom:2.8rem; width:1px; background:linear-gradient(to bottom, var(--accent) 0%, var(--accent-pale) 85%, transparent 100%)}
.tl-item{position:relative; padding:0 0 2.8rem 1.6rem; border-radius:8px; transition:background .3s}
.tl-item:hover{background:var(--accent-soft)}
.tl-num{
  font-family:var(--serif); font-size:.85rem; color:var(--accent-d);
  position:absolute; left:-3.6rem; top:0; width:2.4rem; height:2.4rem; border-radius:50%;
  background:var(--accent-pale); border:2px solid var(--creme); box-shadow:0 0 0 1px var(--accent-pale);
  display:flex; align-items:center; justify-content:center; transition:background .3s, color .3s;
}
.tl-item:hover .tl-num{background:var(--accent); color:var(--blanc)}
.tl-title{font-family:var(--serif); font-size:1.15rem; font-weight:400; color:var(--texte); margin-bottom:.6rem; padding-top:.4rem}
.tl-text{font-size:.9rem; line-height:1.9; color:var(--texte-s)}

.methode-aside-media{
  display:block;
  width:100%;
  max-width:420px;
  height:auto;
  object-fit:contain;
  border:1px solid var(--perle);
  margin:0 auto;
}
.methode-process{align-items:stretch}
.methode-process .col-r{
  display:flex;
  flex-direction:column;
  gap:1.5rem;
  align-items:center;
}
.methode-process-top,
.methode-process-bottom{
  width:100%;
}
.methode-process-bottom .eyebrow{margin-top:0}

/* Citation du cabinet — lettres parallaxe uniquement sur ce bloc */
.citation-cabinet{position:relative; background:var(--creme)}
.citation-cabinet > *:not(.citation-letters){position:relative; z-index:1}
.citation-letters{
  position:absolute; top:0; left:0; width:100%; height:100%;
  clip:rect(0, auto, auto, 0); pointer-events:none; z-index:0;
}
.citation-letters span{
  position:fixed; font-family:var(--serif); font-weight:400;
  user-select:none; line-height:1; color:rgba(46,110,126,0.07);
}
.citation-letters .ct-bl1{font-size:22vw; top:12%; left:42%}
.citation-letters .ct-bl2{font-size:16vw; top:28%; right:2%; color:rgba(154,139,114,0.08)}
.citation-cabinet-box{padding:2.8rem; position:relative; z-index:1}
.citation-cabinet-box p{
  font-family:var(--serif); font-size:1.3rem; font-weight:400;
  font-style:normal; color:var(--texte); line-height:1.65;
}
.citation-cabinet-box span{
  display:block; margin-top:1.2rem; font-size:.62rem;
  letter-spacing:.2em; text-transform:uppercase; color:var(--accent);
}

.pause-layout{display:grid; grid-template-columns:1fr 1fr; gap:0; align-items:stretch}
.pause-left{padding:5.5rem 5rem; display:flex; flex-direction:column; justify-content:center}
.pause-right{background:var(--creme); display:flex; align-items:center; justify-content:center; padding:5.5rem 5rem; position:relative; overflow:hidden}
.pause-img-bg{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:center 60%; opacity:.18; pointer-events:none; display:block}
.pause-visual{position:relative; z-index:1; display:flex; flex-direction:column; align-items:center; gap:2.8rem}
.pause-ring{width:250px; height:250px; border-radius:50%; border:1px solid rgba(46,110,126,.35); display:flex; flex-direction:column; align-items:center; justify-content:center; gap:.4rem; position:relative; background:rgba(255,255,255,0.7)}
.pause-ring::before{content:''; position:absolute; inset:14px; border-radius:50%; border:1px solid rgba(46,110,126,.12)}
.pause-big{font-family:var(--serif); font-size:2.8rem; font-weight:400; color:var(--accent-d)}
.pause-lbl{font-size:.58rem; letter-spacing:.2em; text-transform:uppercase; color:var(--texte-m); text-align:center}
.pause-info{text-align:center}
.pause-info strong{display:block; font-family:var(--serif); font-size:2.2rem; font-weight:400; color:var(--accent-d); margin-bottom:.3rem}
.pause-info span{font-size:.85rem; color:var(--texte-m)}

/* ══════════════════════════════════
   ORTHOPHONIE
══════════════════════════════════ */
.ortho-cards{display:grid; grid-template-columns:repeat(3,1fr); gap:1px; background:var(--perle); margin-top:3.5rem}
.ortho-card{background:var(--blanc); transition:background .35s; overflow:hidden}
.ortho-card:hover{background:var(--accent-soft)}
.ortho-card-img{width:100%; height:140px; object-fit:cover; object-position:center; filter:saturate(.9); transition:filter .35s, transform .5s ease; display:block}
.ortho-card:hover .ortho-card-img{filter:saturate(1); transform:scale(1.06)}
.ortho-card-content{padding:2rem 2.2rem}
.ortho-card-name{font-family:var(--serif); font-size:1.35rem; font-weight:500; color:var(--texte); margin-bottom:.75rem; letter-spacing:.01em; line-height:1.25}
.ortho-card-text{font-size:.92rem; line-height:1.9; color:var(--texte-s)}

.quand-grid{display:grid; grid-template-columns:1fr 1fr; gap:0}
.quand-left{padding:5.5rem 5rem; background:var(--creme)}
.quand-right{padding:5.5rem 5rem; background:var(--blanc)}
.signal-list{display:flex; flex-direction:column; gap:.55rem; margin-top:1.8rem}
.signal{
  display:flex; align-items:flex-start; gap:.9rem;
  padding:.85rem 1.1rem; background:var(--creme); border-left:2px solid var(--perle);
  font-size:.88rem; color:var(--texte-s); transition:border-color .3s, background .3s;
}
.signal:hover{border-left-color:var(--accent); background:var(--accent-soft)}
.signal-dot{width:7px; height:7px; border-radius:50%; background:var(--accent); flex-shrink:0; margin-top:.5rem}

/* ══════════════════════════════════
   CONTACT
══════════════════════════════════ */
.contact-main{display:block; scroll-margin-top:6rem}
.contact-form-wrap{
  max-width:760px; margin:0 auto; padding:5.5rem 5rem; background:var(--blanc);
  text-align:center;
}
.contact-form-wrap .t-sub{color:var(--accent)}
.contact-form-intro{font-size:1rem; line-height:1.9; color:var(--texte-s); margin:0 auto 2rem; max-width:58ch}
.contact-form-wrap .cd-encarts{margin:0 0 1.8rem}
.contact-form-wrap .cd-encarts .cd-encart{grid-template-columns:1fr; text-align:center}
.contact-form-wrap .two-col{gap:1.8rem; margin-bottom:0; grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
.contact-form-wrap .two-col .cd-encart{grid-template-columns:1fr; justify-items:center; text-align:center}
.contact-form-wrap .two-col .cd-lbl{padding-top:0}

.cd-row{display:grid; grid-template-columns:80px 1fr; gap:.5rem; padding:.9rem 0; border-bottom:1px solid rgba(199,205,206,.5); font-size:.92rem}
.cd-row:last-child{border-bottom:none}
.cd-lbl{font-size:.68rem; font-weight:500; letter-spacing:.22em; text-transform:uppercase; color:var(--accent); align-self:flex-start; padding-top:.15rem}
.cd-val{color:var(--texte-s); line-height:1.7}
.cd-encarts{display:flex; flex-direction:column; gap:.55rem; margin:1rem 0 0}
.cd-encart{
  display:grid; grid-template-columns:80px 1fr; gap:.75rem;
  padding:.85rem 1.1rem; background:var(--creme); border-left:2px solid var(--perle);
  font-size:.92rem; transition:border-color .3s, background .3s;
}
.cd-encart:hover{border-left-color:var(--accent); background:var(--accent-soft)}
.cd-encart .cd-lbl{padding-top:.2rem}

.cross-link-box{margin-top:2.5rem; padding:1.6rem 1.8rem; background:var(--creme); border-left:2px solid var(--accent-l)}
.cross-link-box p{font-size:0.88rem; color:var(--texte-s); line-height:1.75}
.cross-link-box a{color:var(--accent); text-decoration:none; border-bottom:1px solid rgba(46,110,126,.4)}
.cross-link-box a:hover{color:var(--accent-d)}

.cabinets-zigzag{background:var(--creme); border-top:2px solid var(--perle); border-bottom:2px solid var(--perle)}
.cabinets-zigzag-header{padding:3rem 5rem 0}
.cabinets-zigzag-header .t-section{padding:0; margin-bottom:2rem}
.zigzag-row{display:grid; grid-template-columns:1fr 1fr; min-height:380px}
.zigzag-img{position:relative; overflow:hidden; min-height:380px}
.zigzag-img img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; display:block}
.zigzag-img-boersch img{object-position:center 45%}
.zigzag-img-colmar img{object-position:center 42%}
.zigzag-text{padding:4rem 5rem; display:flex; flex-direction:column; justify-content:center; background:var(--blanc)}
.zigzag-text .t-sub{color:var(--accent)}
.zigzag-text .cd-row{padding:.9rem 0}
.zigzag-map-actions{margin-top:1.75rem; width:100%}
.zigzag-map-trigger{display:flex; flex-direction:column; align-items:center; gap:.5rem; width:100%}
.zigzag-map-note{font-size:.62rem; color:var(--texte-m); opacity:.7; margin:0; line-height:1.5; letter-spacing:.01em; text-align:center; max-width:36ch}
.maps-embed-inline:empty{display:none}
.maps-embed-inline iframe{width:100%; height:240px; border:none; display:block; margin-top:1rem}

/* ══════════════════════════════════
   CABINET DE COLMAR
══════════════════════════════════ */
.colmar-content{display:grid; grid-template-columns:400px 1fr; gap:0; min-height:600px}
.colmar-img-col{position:relative; overflow:hidden}
.colmar-img-col img{width:100%; height:100%; min-height:600px; object-fit:cover; object-position:center 40%; display:block; transition:transform 8s ease}
.colmar-content:hover .colmar-img-col img{transform:scale(1.05)}
.colmar-text-col{padding:5.5rem 5rem; background:var(--blanc); display:flex; flex-direction:column; justify-content:center; position:relative}
.colmar-text-col > *:not(.colmar-letters){position:relative; z-index:1}
.colmar-letters{
  position:absolute; top:0; left:0; width:100%; height:100%;
  clip:rect(0, auto, auto, 0); pointer-events:none; z-index:0;
}
.colmar-letters span{
  position:fixed; font-family:var(--serif); font-weight:400;
  user-select:none; line-height:1; color:rgba(46,110,126,0.07);
}
.colmar-letters .cm-bl1{font-size:26vw; top:4%; left:26%}
.colmar-letters .cm-bl2{font-size:20vw; top:22%; right:-3%; color:rgba(154,139,114,0.08)}
.colmar-letters .cm-bl3{font-size:18vw; top:48%; left:32%; color:rgba(110,196,212,0.07)}
.colmar-letters .cm-bl4{font-size:22vw; top:58%; right:10%; color:rgba(46,110,126,0.06)}
.colmar-letters .cm-bl5{font-size:16vw; bottom:12%; left:40%; color:rgba(154,139,114,0.07)}
.colmar-letters .cm-bl6{font-size:24vw; bottom:-2%; right:-2%; color:rgba(46,110,126,0.07)}
.colmar-title{font-family:var(--serif); font-size:2.5rem; font-weight:400; color:var(--texte); line-height:1.2; margin-bottom:1.5rem}
.colmar-title em{font-style:normal; color:var(--accent)}
.alert-box{background:rgba(46,110,126,.1); border:1px solid rgba(46,110,126,.28); padding:2rem 2.5rem; margin:2rem auto 0}
.alert-box p{font-size:.95rem; color:var(--texte-s); line-height:1.85}

/* ══════════════════════════════════
   CONSEILS
══════════════════════════════════ */
.conseils-intro{padding:5.5rem 5rem 3rem; background:var(--creme); max-width:860px; margin:0 auto; text-align:center}
.conseils-intro .eyebrow{justify-content:center}
.conseils-intro .gold-line{margin-left:auto; margin-right:auto}
.intro-collapsible{display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:2; overflow:hidden}
.intro-collapsible.expanded{display:block; -webkit-line-clamp:unset; overflow:visible}
.intro-toggle{
  display:flex; align-items:center; gap:.4rem; margin:1.2rem auto 0;
  background:none; border:none; cursor:pointer; font-family:var(--sans);
  font-size:.66rem; letter-spacing:.15em; text-transform:uppercase; color:var(--accent);
}
.intro-toggle svg{width:14px; height:14px; transition:transform .3s}
.intro-toggle.expanded svg{transform:rotate(180deg)}

.theme-nav-wrap{
  display:flex; align-items:center; gap:.35rem;
  padding:1rem 5rem 1.5rem; background:rgba(250,248,245,.94); backdrop-filter:blur(10px);
  position:-webkit-sticky; position:sticky; top:84px; z-index:90;
}
.theme-nav{
  display:flex; flex-wrap:wrap; justify-content:center; gap:.8rem;
  flex:1; min-width:0; padding:0; background:transparent;
  position:relative; top:auto; z-index:auto;
}
.theme-nav-arrow{
  display:none; flex-shrink:0; align-items:center; justify-content:center;
  width:34px; height:34px; padding:0; border:none; background:transparent;
  color:var(--accent); cursor:pointer; transition:color .25s, opacity .25s;
}
.theme-nav-arrow svg{width:22px; height:22px; display:block}
.theme-nav-arrow:hover{color:var(--accent-d)}
.theme-nav-arrow[disabled]{opacity:.28; cursor:default; pointer-events:none}
.theme-nav button{
  display:flex; align-items:center; gap:.55rem;
  font-family:var(--sans); font-size:0.64rem; letter-spacing:.18em; text-transform:uppercase;
  color:var(--accent-d); text-decoration:none; cursor:pointer;
  padding:.7rem 1.3rem; border:1px solid var(--accent-pale); background:var(--blanc);
  transition:all .25s; border-radius:999px;
}
.theme-nav button svg{width:15px; height:15px; flex-shrink:0}
.theme-nav button:hover{background:var(--accent-soft); border-color:var(--accent-l)}
.theme-nav button.active{background:var(--accent); border-color:var(--accent); color:var(--blanc)}

.conseil-theme{padding:0 5rem 5.5rem; background:var(--creme); scroll-margin-top:170px}
.conseil-theme:nth-child(even){background:var(--blanc)}
.conseil-theme-top{padding-top:4rem; display:grid; grid-template-columns:1.1fr 1fr; gap:3.5rem; align-items:center}
.conseil-theme-head{max-width:560px; margin:0 auto; text-align:center}
.conseil-theme-head .eyebrow{justify-content:center}
.conseil-theme-img{
  aspect-ratio:4/3; border-radius:8px; overflow:hidden;
  background:linear-gradient(160deg, var(--creme2), var(--creme3));
  display:flex; align-items:center; justify-content:center; color:var(--accent-l);
}
.conseil-theme-img img{width:100%; height:100%; object-fit:cover; display:block}
.conseil-theme-img svg{width:30%; height:30%; opacity:.5}
.conseil-theme-top.reverse{grid-template-columns:1fr 1.1fr}
.conseil-theme-top.reverse .conseil-theme-img{order:-1}
.theme-icon{
  width:52px; height:52px; border-radius:50%; background:var(--accent-pale);
  display:flex; align-items:center; justify-content:center; color:var(--accent-d);
  margin:0 auto 1.2rem;
}
.theme-icon svg{width:24px; height:24px}

.conseils-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:1.5rem; margin-top:2.5rem}
.conseil-card{background:var(--blanc); border:1px solid var(--perle); padding:2.8rem 2.2rem; transition:all .35s; border-top:3px solid var(--accent-mid)}
.conseil-card:nth-child(3n+2){border-top-color:var(--accent)}
.conseil-card:nth-child(3n+3){border-top-color:var(--accent-d)}
.conseil-card:hover{border-top-color:var(--accent-l); box-shadow:0 6px 30px rgba(46,110,126,.1); transform:translateY(-3px); background:var(--accent-soft)}
.conseil-theme:nth-child(even) .conseil-card:hover{background:var(--hover-beige)}
.conseil-card-head{display:flex; align-items:center; justify-content:space-between; margin-bottom:1.2rem}
.conseil-num{font-family:var(--serif); font-size:2.8rem; font-weight:400; color:rgba(110,196,212,.45); line-height:1; display:block}
.conseil-card:nth-child(3n+2) .conseil-num{color:rgba(46,110,126,.35)}
.conseil-card:nth-child(3n+3) .conseil-num{color:rgba(26,69,82,.35)}
.conseil-icon{
  width:44px; height:44px; border-radius:50%; background:var(--accent-pale);
  display:flex; align-items:center; justify-content:center; color:var(--accent); flex-shrink:0;
}
.conseil-icon svg{width:20px; height:20px}
.conseil-title{font-family:var(--serif); font-size:1.2rem; font-weight:400; color:var(--texte); margin-bottom:.8rem}
.conseil-text{font-size:.92rem; line-height:1.9; color:var(--texte-s)}

.methode-process-lead{text-align:center; margin-bottom:2.5rem}
.methode-process-lead .eyebrow{justify-content:center}
.methode-process-lead .gold-line{margin-left:auto; margin-right:auto}
.methode-process-lead .body-t{max-width:62ch; margin-left:auto; margin-right:auto}

.conseils-carousel{position:relative; margin-top:2.5rem; padding:0 3.2rem}
@media(min-width:769px){
  .theme-cards-carousel{padding:0}
  .theme-cards-carousel .carousel-viewport{overflow:visible; scroll-snap-type:none}
  .theme-cards-carousel .carousel-arrows,
  .theme-cards-carousel .carousel-dots,
  .theme-cards-carousel .carousel-counter{display:none}
  .theme-cards-carousel .carousel-slide{flex:1 1 0; padding:0 .75rem}
  .theme-cards-carousel .carousel-slide:first-child{padding-left:0}
  .theme-cards-carousel .carousel-slide:last-child{padding-right:0}
}
.conseils-carousel:focus{outline:none}
.conseils-carousel:focus-visible{outline:2px solid var(--accent); outline-offset:6px}
.conseils-carousel .carousel-viewport{
  overflow-x:auto; overflow-y:hidden;
  scroll-snap-type:x mandatory; scroll-behavior:smooth;
  -webkit-overflow-scrolling:touch; scrollbar-width:none;
  overscroll-behavior-x:contain;
}
.conseils-carousel .carousel-viewport::-webkit-scrollbar{display:none}
.conseils-carousel .carousel-track{display:flex; align-items:stretch}
.conseils-carousel .carousel-slide{
  flex:0 0 calc(100% / 3); padding:0 .75rem; box-sizing:border-box; display:flex;
  scroll-snap-align:none;
}
.conseils-carousel .carousel-slide:nth-child(3n+1){scroll-snap-align:start}
.conseils-carousel .conseil-card{width:100%; margin:0}
.conseils-carousel .carousel-arrows{left:0; right:0; top:0; bottom:4.6rem; transform:none; align-items:center; z-index:2}
.conseils-carousel .carousel-arrow{
  background:var(--accent); border-color:var(--accent); color:var(--blanc);
  box-shadow:0 6px 24px rgba(20,25,26,.18);
}
.conseils-carousel .carousel-arrow:hover{
  background:var(--accent-d); border-color:var(--accent-d); color:var(--blanc);
}
.conseils-carousel .carousel-arrow:disabled{
  opacity:0; visibility:hidden; pointer-events:none; box-shadow:none;
}
.conseils-carousel .carousel-dots{margin-top:1.8rem}
.conseils-carousel .carousel-slide:nth-child(3n+2) .conseil-card{border-top-color:var(--accent)}
.conseils-carousel .carousel-slide:nth-child(3n+3) .conseil-card{border-top-color:var(--accent-d)}
.conseils-carousel .carousel-slide:nth-child(3n+2) .conseil-num{color:rgba(46,110,126,.35)}
.conseils-carousel .carousel-slide:nth-child(3n+3) .conseil-num{color:rgba(26,69,82,.35)}
.carousel-counter{
  display:none; font-family:var(--serif); font-size:1.15rem; color:var(--texte-m);
  text-align:center; margin:1.4rem 0 0; letter-spacing:.04em
}
.carousel-arrow:disabled{opacity:.28; cursor:default; pointer-events:none; box-shadow:none}

@media (prefers-reduced-motion: reduce){
  .carousel-track{transition:none}
  .conseils-carousel .carousel-viewport{scroll-behavior:auto}
}

.conseil-note{margin:0 5rem 5.5rem; padding:2.5rem 3rem; background:var(--creme); border-left:4px solid var(--accent)}
.conseil-note p{font-family:var(--serif); font-size:1.25rem; font-style:normal; font-weight:400; color:var(--texte); line-height:1.65}

/* ══════════════════════════════════
   PAGES LÉGALES
══════════════════════════════════ */
.legal-wrap{max-width:860px; margin:0 auto; padding:5.5rem 5rem}
.legal-block{margin-top:3rem; display:flex; flex-direction:column; gap:2.5rem}
.legal-block h2{font-family:var(--serif); font-size:1.4rem; font-weight:400; color:var(--texte); margin-bottom:.8rem}
.legal-title{font-family:var(--serif); font-size:3rem; font-weight:400; margin-bottom:2rem; color:var(--texte)}
.legal-title em{font-style:normal; color:var(--accent)}
.legal-source{margin-top:2.5rem; font-size:.8rem; line-height:1.7; color:var(--texte-s)}
.error-actions{display:flex; flex-wrap:wrap; gap:1rem; margin-top:2.5rem}

/* ══════════════════════════════════
   FOOTER
══════════════════════════════════ */
.footer{background:var(--creme); position:relative; overflow:hidden; border-top:3px solid var(--accent)}
.footer-content{position:relative; z-index:1; display:grid; grid-template-columns:1.4fr 1fr 1fr 1fr; gap:3rem; padding:4rem 5rem}
.footer-brand-name{font-family:var(--serif); font-size:1.65rem; font-weight:400; color:var(--texte)}
.footer-brand-name em{font-style:italic; color:var(--accent)}
.footer-logo-img{width:160px; max-width:100%; height:auto; display:block; margin-bottom:.6rem}
.footer-brand-sub{font-size:.52rem; letter-spacing:.3em; text-transform:uppercase; color:var(--accent); margin-top:.4rem}
.footer-desc{font-size:.85rem; line-height:1.85; color:var(--texte-m); margin-top:1.4rem; max-width:28ch}
.footer-nav-title{font-size:.68rem; font-weight:500; letter-spacing:.26em; text-transform:uppercase; color:var(--accent); margin-bottom:1.4rem}
.footer-nav-list{list-style:none; display:flex; flex-direction:column; gap:.8rem}
.footer-nav-list a{font-size:.88rem; color:var(--texte-s); text-decoration:none; transition:color .3s; cursor:pointer}
.footer-nav-list a:hover{color:var(--accent)}
.f-contact{font-size:.85rem; color:var(--texte-s); line-height:2}
.f-contact a{
  color:var(--accent); text-decoration:none;
  transition:color .3s;
}
.f-contact a:hover{color:var(--accent-d)}
.footer-bottom{border-top:1px solid var(--perle); padding:1.8rem 5rem; display:flex; justify-content:space-between; align-items:center; gap:1.5rem; flex-wrap:wrap}
.footer-copy{font-size:.72rem; color:var(--texte-m)}
.footer-credit{font-size:.72rem; color:var(--texte-m)}
.footer-credit a{
  color:var(--accent); text-decoration:none;
  transition:color .2s;
}
.footer-credit a:hover{color:var(--accent-d)}
.footer-legal-link{font-size:.72rem; color:var(--texte-m); cursor:pointer; text-decoration:none; transition:color .2s}
.footer-legal-link:hover{color:var(--accent)}

/* ══════════════════════════════════
   ANIMATIONS
══════════════════════════════════ */
.reveal{opacity:0; transform:translateY(24px); transition:opacity .75s ease, transform .75s ease}
.reveal.in{opacity:1; transform:translateY(0)}
.rd1{transition-delay:.09s} .rd2{transition-delay:.19s}
.rd3{transition-delay:.29s} .rd4{transition-delay:.42s}

::-webkit-scrollbar{width:5px}
::-webkit-scrollbar-track{background:var(--creme)}
::-webkit-scrollbar-thumb{background:var(--perle); border-radius:3px}
::-webkit-scrollbar-thumb:hover{background:var(--accent)}

.ortho-banner-aside{max-width:76ch; margin-top:1.4rem; background:rgba(255,255,255,.96); border-radius:14px; padding:1.7rem 2.2rem; text-align:center; border:1px solid rgba(46,110,126,.18)}
.ortho-banner-aside svg{margin-left:auto; margin-right:auto; margin-bottom:.4rem !important; opacity:.55 !important}
.ortho-quote-txt{
  font-family:var(--serif); font-size:clamp(.98rem,.3vw + .92rem,1.08rem);
  font-weight:400; font-style:normal; color:var(--texte);
  line-height:1.75; margin-bottom:.6rem; letter-spacing:.01em;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
}
.ortho-quote-cite{
  display:inline-block; font-family:var(--sans); font-style:normal;
  font-size:.78rem; font-weight:500; letter-spacing:.12em;
  text-transform:uppercase; color:var(--accent); line-height:1.5;
}

/* ══════════════════════════════════
   RESPONSIVE : MOBILE FIRST
══════════════════════════════════ */
.nav-hamburger{display:none; background:none; border:none; cursor:pointer; flex-direction:column; gap:5px; padding:4px; z-index:600}
.nav-hamburger span{display:block; width:24px; height:2px; background:var(--texte); transition:all .3s}
.nav-hamburger.open span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.nav-hamburger.open span:nth-child(2){opacity:0}
.nav-hamburger.open span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
body.nav-open{
  position:fixed; left:0; right:0; width:100%;
  overflow:hidden; touch-action:none; overscroll-behavior:none;
}

@media(max-width:1024px){
  .nav{padding:0 2.5rem}
  .pad,.pad-h{padding:4rem 3rem}
  .services{padding:4rem 3rem}
  .footer-content{grid-template-columns:1fr 1fr; gap:2.5rem; padding:3rem}
}

@media(max-width:768px){
  .nav{padding:0 1.5rem; height:68px}
  .home-hero-viewport{height:auto; min-height:0}
  .home-hero-viewport .b-accueil.banner-hero-h{
    flex:none; height:66svh; height:66vh; min-height:420px;
  }
  .logo-main{font-size:1.3rem}
  .logo-top,.logo-sub{display:none}
  .logo-img-mobile{display:none}
  /* Logo image uniquement quand le menu mobile est ouvert — agrandi + centré */
  .nav:has(.nav-hamburger.open){height:130px}
  .nav:has(.nav-hamburger.open) .logo{
    position:absolute; left:50%; top:50%; transform:translate(-50%,-50%);
    z-index:1;
  }
  .nav:has(.nav-hamburger.open) .logo-main{display:none}
  .nav:has(.nav-hamburger.open) .logo-img-mobile{
    display:block; height:110px; width:auto; max-width:260px; object-fit:contain
  }
  /* Croix toujours à droite, taille d'origine */
  .nav:has(.nav-hamburger.open) .nav-hamburger{
    position:absolute; right:1.5rem; top:50%; transform:translateY(-50%);
    margin-left:auto; z-index:2;
  }
  .nav-hamburger{display:flex; margin-left:auto}
  .nav-links{
    display:flex; position:fixed; inset:0; top:68px; flex-direction:column;
    background:rgba(250,248,245,0.98); backdrop-filter:blur(20px);
    padding:2rem 1.5rem; align-items:flex-start; gap:0; overflow-y:auto; z-index:499;
    overscroll-behavior:contain; -webkit-overflow-scrolling:touch;
    opacity:0; visibility:hidden; pointer-events:none;
    transition:opacity .3s ease, visibility .3s, top .25s ease;
  }
  .nav:has(.nav-hamburger.open) .nav-links{top:130px}
  .nav-links.open{opacity:1; visibility:visible; pointer-events:auto}
  .nav-links li{width:100%; opacity:0; transform:translateX(-14px); transition:opacity .4s ease, transform .4s ease}
  .nav-links.open li{opacity:1; transform:translateX(0)}
  .nav-links.open li:nth-child(1){transition-delay:.06s}
  .nav-links.open li:nth-child(2){transition-delay:.11s}
  .nav-links.open li:nth-child(3){transition-delay:.16s}
  .nav-links.open li:nth-child(4){transition-delay:.21s}
  .nav-links.open li:nth-child(5){transition-delay:.26s}
  .nav-links.open li:nth-child(6){transition-delay:.31s}
  .nav-links.open li:nth-child(7){transition-delay:.36s}
  .nav-links a{height:auto; padding:1rem 0; font-size:1rem; letter-spacing:0.08em; border-bottom:1px solid rgba(199,205,206,.4); width:100%}
  .nav-links a::after{display:none}
  .nav-rdv{display:none}
  .nav-mobile-cta{display:flex; justify-content:center; width:100%; border-bottom:none; margin-top:1.5rem}
  .nav-mobile-cta a{
    all:unset; box-sizing:border-box; cursor:pointer; text-align:center;
    font-family:var(--sans); font-size:.68rem; font-weight:400; letter-spacing:0.2em; text-transform:uppercase;
    color:var(--blanc); background:var(--accent); padding:0.9rem 2.4rem; border-radius:2px;
    transition:background .3s;
  }
  .nav-mobile-cta a:hover{background:var(--accent-d)}

  .banner-hero-h{height:78svh; height:78vh; min-height:480px}
  .b-accueil.banner-hero-h{height:66svh; height:66vh; min-height:420px}
  .banner-page-h{height:78svh; height:78vh; min-height:480px}
  .banner-short-h{height:78svh; height:78vh; min-height:480px}
  .b-content{padding:2rem 1.5rem}
  .b-accueil .b-content{padding-bottom:2rem}
  .b-sub{font-size:.88rem}
  .hero-stats{grid-template-columns:1fr}
  .h-stat{width:100%; border-right:none; border-bottom:1px solid rgba(199,205,206,.4); padding:1.4rem 1.5rem; overflow:visible}
  .h-stat:last-child{border-bottom:none}
  .h-stat-num{white-space:normal}
  .h-stat-title{font-size:1.28rem; white-space:normal}
  .h-stat-desc{white-space:normal}
  .hero-badge{
    display:inline-flex; flex-wrap:wrap; justify-content:center;
    gap:.45rem .6rem; max-width:100%;
    padding:.4rem .7rem; margin-bottom:1.2rem;
  }
  .hero-badge span{font-size:.52rem; letter-spacing:.14em}
  .hero-google-sticker{right:1.2rem; bottom:1.2rem; padding:.45rem .75rem; gap:.5rem}
  .hero-google-stars{font-size:.75rem}
  .hero-google-text strong{font-size:.85rem}
  .hero-google-text span{font-size:.48rem}

  .about-grid{grid-template-columns:1fr}
  .portrait-col{min-height:320px}
  .portrait-img{min-height:320px}
  .about-content{padding:3rem 1.5rem}
  .services{padding:3rem 1.5rem}
  .services-grid{grid-template-columns:1fr; gap:1.2rem; margin-top:2rem}
  .key-figures{grid-template-columns:1fr 1fr; padding:2rem 1.5rem}
  .kf{padding:1.5rem 1rem}
  .cta-band{grid-template-columns:1fr; gap:1.5rem; padding:3rem 1.5rem}
  .avis-strip{padding:1.5rem; flex-direction:column; align-items:flex-start}
  .avis-strip a{margin-left:0}

  .two-col,.quand-grid,.pause-layout,.colmar-content{grid-template-columns:1fr}
  .col-l,.col-r,.quand-left,.quand-right,.pause-left,.colmar-text-col{padding:3rem 1.5rem}
  .methode-process .col-r{display:flex; flex-direction:column}
  .methode-aside-media{max-width:100%; min-height:0}
  .pause-right{padding:3rem 1.5rem}
  .colmar-img-col{
    min-height:0;
    aspect-ratio:4/5;
    width:100%;
  }
  .colmar-img-col img{min-height:0; height:100%; object-position:center 45%}
  .colmar-content:hover .colmar-img-col img{transform:none}

  .steps-section{padding:3rem 1.5rem}
  .steps-grid{grid-template-columns:1fr 1fr}

  .pad{padding:3rem 1.5rem}
  .formations-grid{grid-template-columns:1fr; gap:1.2rem}

  .ortho-cards{grid-template-columns:1fr}

  .cred-timeline{
    display:flex; flex-direction:row; gap:0; margin-top:1.4rem;
    overflow-x:auto; scroll-snap-type:x mandatory;
    -webkit-overflow-scrolling:touch; scrollbar-width:none;
    overscroll-behavior-x:contain;
  }
  .cred-timeline::-webkit-scrollbar{display:none}
  .cred-timeline .cred-item{
    flex:0 0 100%; scroll-snap-align:start; scroll-snap-stop:always;
    justify-content:center; box-sizing:border-box;
  }
  .parcours-dots{display:flex}

  .temos{padding:3rem 1.5rem}
  .carousel{max-width:100%}
  .carousel-arrows{left:0; right:0; padding:0 .25rem}
  .carousel-slide .temo{padding:2.2rem 1.5rem}
  .carousel-slide .temo-q{font-size:1.05rem}
  .temos-grid{grid-template-columns:1fr; gap:1.2rem}

  .conseils-intro{padding:3rem 1.5rem 1.5rem; max-width:none}
  .theme-nav-wrap{
    padding:.8rem .4rem; top:68px; gap:.15rem;
    background:var(--creme); z-index:120;
  }
  .theme-nav-arrow{display:flex}
  .theme-nav{
    flex-wrap:nowrap; overflow-x:auto; justify-content:flex-start;
    -webkit-overflow-scrolling:touch; scroll-behavior:smooth;
    scrollbar-width:none; padding:.1rem 0;
  }
  .theme-nav::-webkit-scrollbar{display:none}
  .theme-nav button{white-space:nowrap; flex-shrink:0}
  .conseil-theme{padding:0 1.5rem 3rem; scroll-margin-top:140px}
  .conseil-theme-top,
  .conseil-theme-top.reverse{grid-template-columns:1fr; gap:1.8rem; padding-top:2.5rem}
  .conseil-theme-img,
  .conseil-theme-top.reverse .conseil-theme-img{order:-1}
  .conseils-grid{grid-template-columns:1fr; gap:1.2rem; margin-top:1.5rem}
  .conseils-carousel{
    padding:0; margin-top:1.5rem;
    display:grid;
    grid-template-columns:auto minmax(0,1fr) auto;
    grid-template-areas:
      "viewport viewport viewport"
      "prev counter next";
    align-items:center;
    column-gap:.85rem;
  }
  .conseils-carousel .carousel-viewport{grid-area:viewport; width:100%}
  .conseils-carousel .carousel-slide,
  .conseils-carousel .carousel-slide:nth-child(3n+1){
    flex:0 0 100%; padding:0; scroll-snap-align:start; scroll-snap-stop:always;
  }
  .conseils-carousel .carousel-arrows{
    display:contents; position:static;
    left:auto; right:auto; top:auto; bottom:auto; transform:none;
  }
  .conseils-carousel .carousel-prev{grid-area:prev; justify-self:end}
  .conseils-carousel .carousel-next{grid-area:next; justify-self:start}
  .conseils-carousel .carousel-arrow{position:static; margin-top:1.15rem}
  .conseils-carousel .carousel-arrow:disabled{opacity:.28; visibility:visible}
  .conseils-carousel .carousel-dots{display:none}
  .conseils-carousel .carousel-counter{display:block; grid-area:counter; margin:1.15rem 0 0}
  .conseil-note{margin:0 1.5rem 3rem; padding:1.8rem 2rem}

  .cabinets-zigzag-header{padding:2.5rem 1.5rem 0}
  .zigzag-row{grid-template-columns:1fr}
  .zigzag-img{min-height:240px}
  .zigzag-img-colmar{order:-1}
  .zigzag-text{padding:2.5rem 1.5rem}

  .contact-form-wrap{padding:3rem 1.5rem}
  .contact-form-wrap .two-col{gap:1.2rem; grid-template-columns:1fr}

  .footer-content{
    grid-template-columns:1fr 1fr; gap:2rem; padding:2.5rem 1.5rem;
  }
  /* Brand et Contact en pleine largeur ; Disciplines | Informations côte à côte */
  .footer-content > :first-child,
  .footer-content > :last-child{grid-column:1 / -1}
  .footer-bottom{flex-direction:column; gap:1rem; text-align:center; padding:1.5rem}

  .legal-wrap{padding:3rem 1.5rem}

}

@media(max-width:480px){
  .steps-grid{grid-template-columns:1fr}
  .key-figures{grid-template-columns:1fr}
  .kf-num{font-size:2.5rem}
}

/* ══════════════════════════════════
   RETOUR EN HAUT
══════════════════════════════════ */
.back-to-top{
  position:fixed; right:2rem; bottom:2rem; z-index:400;
  width:46px; height:46px; border-radius:50%;
  background:var(--accent); border:1px solid var(--accent);
  color:var(--blanc); display:flex; align-items:center; justify-content:center;
  cursor:pointer; opacity:0; visibility:hidden; transform:translateY(10px);
  transition:opacity .35s ease, transform .35s ease, visibility .35s, background .3s, border-color .3s;
  box-shadow:0 6px 24px rgba(20,25,26,.18);
}
.back-to-top.visible{opacity:1; visibility:visible; transform:translateY(0)}
.back-to-top:hover{background:var(--accent-d); border-color:var(--accent-d)}
.back-to-top svg{width:16px; height:16px}
/* Masqué quand le menu mobile est ouvert */
body.nav-open .back-to-top{opacity:0; visibility:hidden; pointer-events:none}

@media(max-width:768px){
  .back-to-top{right:1.2rem; bottom:1.2rem; width:42px; height:42px}
}

/* ══════════════════════════════════
   MODIFICATIONS 21/07/2026
══════════════════════════════════ */

/* Heros — suppression de la petite barre « - » à gauche des intitulés */
.eyebrow-light::before{display:none}

/* L'Orthologie — encadré « Pour toute information » centré sous les 2 colonnes */
.src-box-center{max-width:860px; margin:3rem auto 0; text-align:center; border-left:none}

/* L'Orthologie — section « troubles » : sur ordinateur, l'accordéon remplit la
   hauteur pour que les deux colonnes se terminent à la même hauteur en bas */
@media(min-width:769px){
  .ortho-troubles .col-r{display:flex; flex-direction:column}
  .ortho-troubles .col-r .accord{flex:1 1 auto; justify-content:space-between}
}

/* Accueil — cards « Ce que je propose » : texte centré */
.services-grid .s-card{text-align:center}
.services-grid .s-card .s-link{justify-content:center}

/* Accueil — cards « Deux cabinets en Alsace » : contenu centré */
.cabinets-grid{display:grid; grid-template-columns:1fr 1fr; gap:1.8rem}
.cabinets-grid .s-card{text-align:center}
.cabinets-grid .s-card .eyebrow{justify-content:center}
.cabinets-grid .s-card .s-link{justify-content:center}

/* Ma Méthode — cards « Le socle pluridisciplinaire » : texte centré */
.formations-grid .formation{text-align:center}

/* Ma Méthode — « Parcours professionnel » : centré sur ordinateur et mobile */
.parcours-title{display:flex; justify-content:center}

/* Ma Méthode — les 5 cards du parcours : texte + logo centrés */
.cred-timeline .cred-item{align-items:center; text-align:center}

/* L'Orthologie — « Le déroulement » : chiffres et texte des 4 étapes centrés */
.steps-grid .step{text-align:center}

/* L'Orthologie — « Avis Google vérifiés » : avis centrés dans les cards */
.temos-grid .temo{text-align:center}

/* Ma Méthode — sur ordinateur, la photo (flex-basis 0) remplit exactement l'espace
   restant : la colonne de droite épouse la hauteur de la gauche et le bas des deux
   textes s'aligne automatiquement, quel que soit le contenu */
@media(min-width:769px){
  .methode-process .col-r{justify-content:flex-start}
  .methode-aside-media{flex:1 1 0; min-height:0; height:auto; max-height:none; object-fit:cover; object-position:center top}
  /* compense l'espacement bas du dernier point de la frise (col-l) */
  .methode-process-bottom{margin-bottom:2.8rem}
}

/* L'Orthophonie — image de langage qui comble l'espace vide sous l'encadré légal */
.ortho-intro-media{display:block; width:100%; height:auto; margin-top:2rem; object-fit:cover}
@media(min-width:769px){
  /* force les 2 colonnes à la même hauteur */
  #ortho-intro{align-items:stretch}
  #ortho-intro .col-l{display:flex; flex-direction:column}
  .ortho-intro-media{flex:1 1 0; min-height:220px; height:auto}
  /* colonne de droite : la liste des signaux s'étire pour finir au même niveau que l'image de gauche */
  #ortho-intro .col-r{display:flex; flex-direction:column}
  #ortho-intro .signal-list{flex:1 1 auto; justify-content:space-between}
}

/* Mobile : les 2 cards « Deux cabinets » en pleine largeur, une par ligne, centrées */
@media(max-width:768px){
  .cabinets-grid{grid-template-columns:1fr; gap:1.2rem}
  .cabinets-grid .s-card{padding:2.2rem 1.6rem}

  /* Accueil — « Mon cabinet » : titre + texte centrés sur mobile,
     les points (cred-list) restent alignés à gauche */
  .about-content{text-align:center}
  .about-content .eyebrow{display:flex; justify-content:center}
  .about-content .gold-line{margin-left:auto; margin-right:auto}
  .about-content .cred-list{text-align:left}

  /* L'Orthologie — « Pourquoi consulter ? » : image + texte empilés sur mobile */
  .ortho-why-grid{grid-template-columns:1fr !important; gap:2rem !important; padding:3rem 1.5rem !important}
  .ortho-why-img{height:340px !important}

  /* L'Orthologie — « Le déroulement » : cards en pleine largeur (une par ligne) sur mobile */
  .steps-grid{grid-template-columns:1fr}

  /* L'Orthologie — encadré « Pour toute information » : marges latérales sur mobile */
  .src-box-center{margin:2rem 1.5rem 0}

  /* L'Orthologie — texte centré sur mobile (sauf les points de l'accordéon des troubles) */
  #ortho-c .reveal.rd2{text-align:center}
  #ortho-c .reveal.rd2 .eyebrow{display:flex; justify-content:center}
  #ortho-c .reveal.rd2 .gold-line{margin-left:auto; margin-right:auto}

  .ortho-troubles .col-l,
  .ortho-troubles .col-r{text-align:center}
  .ortho-troubles .eyebrow{display:flex; justify-content:center}
  .ortho-troubles .gold-line{margin-left:auto; margin-right:auto}
  .ortho-troubles .quote-box{text-align:center}
  .ortho-troubles .col-r .accord{text-align:left}
  .ortho-troubles .col-r .accord .accord-name{text-align:left}

  /* Mobile — au chargement, seul le hero est visible sur les pages internes
     (l'accueil, en .banner-hero-h + .home-hero-viewport, garde ses 3 points visibles) */
  .banner-page-h,
  .banner-short-h{height:calc(100vh - 68px); height:calc(100svh - 68px)}

  /* L'Orthophonie — texte centré sur mobile (sauf les points « Signaux à surveiller ») */
  #ortho-intro .col-l,
  #ortho-intro .col-r{text-align:center}
  #ortho-intro .eyebrow{display:flex; justify-content:center}
  #ortho-intro .gold-line{margin-left:auto; margin-right:auto}
  #ortho-intro .quote-box{text-align:center}
  #ortho-intro .signal-list,
  #ortho-intro .signal-list .signal{text-align:left}

  .ortho-champs{text-align:center}
  .ortho-champs .eyebrow{display:flex; justify-content:center}
  .ortho-champs .body-t{margin-left:auto; margin-right:auto}
  .ortho-cards .ortho-card-content{text-align:center}

  /* L'Orthologie — « Avis Google vérifiés » : carrousel horizontal scrollable sur mobile */
  .temos-grid{
    display:flex; gap:1rem; margin-top:2.5rem;
    overflow-x:auto; scroll-snap-type:x mandatory;
    -webkit-overflow-scrolling:touch;
    scroll-padding-left:1.5rem;
    padding-bottom:.6rem;
    scrollbar-width:none;
  }
  .temos-grid::-webkit-scrollbar{display:none}
  .temos-grid .temo{flex:0 0 85%; scroll-snap-align:center}

  /* Ma Méthode — cards du parcours : symbole au-dessus du texte, centré sur mobile */
  .cred-timeline .cred-item{flex-direction:column; align-items:center; text-align:center}

  /* Ma Méthode — « Citation du cabinet » + bloc en dessous centrés sur mobile */
  .methode-process-top,
  .methode-process-bottom{text-align:center}
  .methode-process-top .eyebrow,
  .methode-process-bottom .eyebrow{justify-content:center}

  /* Ma Méthode — « La signature de la méthode » (La Pause Thérapeutique) centrée sur mobile */
  .pause-left{text-align:center}
  .pause-left .eyebrow{justify-content:center}
  .pause-left .gold-line{margin-left:auto; margin-right:auto}

}

@media(min-width:769px){
  .theme-cards-carousel{padding:0}
  .theme-cards-carousel .carousel-viewport{overflow:visible; scroll-snap-type:none}
  .theme-cards-carousel .carousel-arrows,
  .theme-cards-carousel .carousel-dots,
  .theme-cards-carousel .carousel-counter{display:none}
  .theme-cards-carousel .carousel-slide{flex:1 1 0; padding:0 .75rem}
  .theme-cards-carousel .carousel-slide:first-child{padding-left:0}
  .theme-cards-carousel .carousel-slide:last-child{padding-right:0}
}
