:root{
  --ink:#0B0B0C; --ink-2:#3A3D42; --ink-3:#6B7076;
  --paper:#FFFFFF; --mist:#F4F5F6; --line:#E3E5E8;
  --accent:#269FE0;        /* bleu historique du site — aplats/graphismes */
  --accent-ink:#14688F;    /* variante foncée — texte, ratio AA sur blanc */
  --accent-wash:#EAF5FC;
  --angle:3.5deg;
  --r:2px;
  --sp:clamp(1.25rem,4vw,2.5rem);
  --shell:min(1240px,100% - 2*var(--sp));
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0; background:var(--paper); color:var(--ink);
  font-family:'Lexend Deca',system-ui,-apple-system,"Segoe UI",sans-serif;
  font-size:17px; line-height:1.65; font-weight:300;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%; display:block}
a{color:inherit}
.shell{width:var(--shell); margin-inline:auto}
h1,h2,h3{line-height:1.1; letter-spacing:-.015em; margin:0; font-weight:400}
.display{font-family:'Righteous',system-ui,sans-serif; letter-spacing:.005em}
:where(a,button,input,textarea,select,summary):focus-visible{
  outline:3px solid var(--accent-ink); outline-offset:3px; border-radius:var(--r);
}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.skip{position:absolute;left:-9999px;top:0;background:var(--ink);color:#fff;padding:.75rem 1rem;z-index:100}
.skip:focus{left:.5rem;top:.5rem}

/* ---------- en-tête ---------- */
/* En-tête posé SUR le bandeau au chargement — il rend au héros la hauteur
   qu'il occupait, et se solidifie dès qu'on défile. La classe est posée par
   site.js ; sans JS l'en-tête reste opaque, donc toujours lisible. */
.hdr{
  /* fixed et non sticky : sticky occupe de la place dans le flux et repousserait
     le bandeau vers le bas — or c'est justement la hauteur qu'on veut lui rendre.
     Le padding-top des bandeaux compense la hauteur de l'en-tête. */
  position:fixed;top:0;left:0;right:0;z-index:50;
  background:rgba(255,255,255,.92);backdrop-filter:blur(10px);
  border-bottom:1px solid var(--line);
  transition:background .3s ease,border-color .3s ease,box-shadow .3s ease;
}
.hdr--sur-hero{
  /* Pas « transparent » mais un voile dégradé : mesuré, les liens blancs posés
     directement sur la photo tombent à 1,88:1 sur « Contact ». Ce voile les
     ramène au-dessus de 4,5:1 sans rendre l'en-tête opaque — le bandeau garde
     sa pleine hauteur, ce qui est tout l'intérêt. */
  background-color:transparent;   /* explicite : ne pas dependre du raccourci */
  background-image:linear-gradient(180deg,rgba(11,11,12,.70) 0%,rgba(11,11,12,.62) 45%,rgba(11,11,12,0) 100%);
  background-size:100% 150px;background-repeat:no-repeat;
  backdrop-filter:none;border-bottom-color:transparent;
}
.hdr--sur-hero .mark{color:#fff}
.hdr--sur-hero .mark span{color:rgba(255,255,255,.72)}
/* le logo est noir : on l'inverse en blanc plutôt que de charger un 2e fichier */
.hdr--sur-hero .mark__logo{filter:brightness(0) invert(1)}
.hdr--sur-hero .nav a{color:rgba(255,255,255,.88)}
.hdr--sur-hero .nav a:hover{color:#fff;background:rgba(255,255,255,.14)}
.hdr--sur-hero .nav a[aria-current]{color:#fff}
.hdr--sur-hero .tel{background-color:rgba(255,255,255,.14);box-shadow:inset 0 0 0 1px rgba(255,255,255,.5)}
.hdr--sur-hero .tel:hover{background-color:transparent}
.hdr--sur-hero .burger{background:rgba(255,255,255,.14);border-color:rgba(255,255,255,.45)}
.hdr--sur-hero .burger svg{stroke:#fff}
/* menu mobile ouvert : on redevient lisible, le panneau est blanc */
.hdr--sur-hero .hdr__in.is-open .burger{background:#fff;border-color:#fff}
.hdr--sur-hero .hdr__in.is-open .burger svg{stroke:var(--ink)}
.hdr__in{display:flex;align-items:center;gap:1.5rem;min-height:76px}
/* min-height : le lien vers l'accueil est une cible tactile comme une autre */
.mark{display:flex;align-items:center;gap:.7rem;text-decoration:none;font-weight:500;font-size:.94rem;min-height:44px}
/* le VRAI logo du cabinet (monogramme VT dans un cercle tracé à main levée),
   récupéré depuis la médiathèque du site en production */
.mark__logo{flex:0 0 auto;width:42px;height:36px;object-fit:contain}
.mark b{font-family:'Righteous',sans-serif;font-weight:400;letter-spacing:.01em}
.mark span{display:block;font-size:.72rem;color:var(--ink-3);letter-spacing:.06em;text-transform:uppercase;font-weight:400}
.nav{margin-left:auto;display:flex;align-items:center;gap:.35rem}
.nav a{
  text-decoration:none;font-size:.94rem;font-weight:400;color:var(--ink-2);
  padding:.65rem .8rem;border-radius:var(--r);transition:color .18s,background .18s;
}
.nav a:hover{color:var(--ink);background:var(--mist)}
.nav a[aria-current]{color:var(--ink);font-weight:500;box-shadow:inset 0 -2px 0 var(--accent)}
.tel{
  display:inline-flex;align-items:center;gap:.55rem;min-height:46px;padding:.6rem 1.15rem;
  background-color:var(--ink);color:#fff;text-decoration:none;font-weight:500;font-size:.94rem;
  white-space:nowrap;border-radius:0;
  clip-path:polygon(0 0,100% 0,100% calc(100% - 10px),calc(100% - 10px) 100%,0 100%);
  background-image:linear-gradient(var(--accent),var(--accent));
  background-repeat:no-repeat;background-position:left center;background-size:0% 100%;
  transition:background-size .4s cubic-bezier(.22,.8,.28,1),color .2s ease .05s;
}
.tel:hover{background-size:100% 100%;color:#06222F}
.tel:focus-visible{outline:none;box-shadow:inset 0 0 0 3px #fff,inset 0 0 0 5px var(--ink)}
.burger{display:none;margin-left:auto;min-width:44px;min-height:44px;border:1px solid var(--line);background:#fff;border-radius:var(--r);cursor:pointer}

/* ---------- héros ---------- */
.hero{position:relative;background:var(--ink);color:#fff;overflow:hidden}
.hero__media{position:absolute;inset:0}
/* Carrousel : mêmes 3 photos et même cadence (9 s) que le RevSlider en production.
   Les vues sont empilées et se fondent ; le texte, lui, ne bouge pas. */
.hero__media img{
  position:absolute;inset:0;
  width:100%;height:100%;object-fit:cover;object-position:78% 22%;
  filter:grayscale(1) contrast(1.04);
  opacity:0;transition:opacity 1.1s ease,
    filter .75s cubic-bezier(.22,.8,.28,1),transform 1.1s cubic-bezier(.22,.8,.28,1);
}
.hero__media img.is-active{opacity:1}
.hero__nav{
  position:absolute;left:0;right:0;bottom:clamp(3.4rem,7vw,5.4rem);z-index:4;
  width:var(--shell);margin-inline:auto;display:flex;align-items:center;gap:.5rem;
}
.hero__pt{
  width:34px;height:14px;padding:0;border:0;cursor:pointer;background:none;
}
.hero__pt::before{
  content:"";display:block;height:3px;background:rgba(255,255,255,.42);
  transition:background .3s ease,transform .3s ease;transform-origin:left;
}
.hero__pt:hover::before{background:rgba(255,255,255,.75)}
.hero__pt[aria-current="true"]::before{background:var(--accent);transform:scaleY(1.7)}
.hero__pt:focus-visible{outline:2px solid #fff;outline-offset:4px}
.hero__pause{
  margin-left:.4rem;width:30px;height:30px;display:inline-flex;align-items:center;
  justify-content:center;border:1px solid rgba(255,255,255,.42);background:none;
  color:rgba(255,255,255,.8);cursor:pointer;border-radius:var(--r);
  transition:color .2s,border-color .2s;
}
.hero__pause:hover{color:#fff;border-color:#fff}
.hero__pause:focus-visible{outline:2px solid #fff;outline-offset:3px}
@media (prefers-reduced-motion:reduce){
  .hero__media img{transition:none}
}
.hero__media::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(103deg,rgba(11,11,12,.90) 0%,rgba(11,11,12,.72) 34%,rgba(11,11,12,.22) 62%,rgba(11,11,12,0) 88%);
  transition:opacity .75s ease;
}
/* Le héros suit la même règle que les cartes : le monochrome se rompt à
   l'interaction. Ces photos-là contiennent vraiment de la couleur (mesuré),
   contrairement aux 4 photos de soins — inutile d'y forcer un duotone.
   Les deux premières bornes du dégradé ne bougent pas : c'est là qu'est le texte. */
@media (hover:hover){
  .hero:hover .hero__media img,.hero:focus-within .hero__media img{
    filter:grayscale(0) contrast(1.02) saturate(1.06);transform:scale(1.02);
  }
  .hero:hover .hero__media::after,.hero:focus-within .hero__media::after{
    background:linear-gradient(103deg,rgba(11,11,12,.90) 0%,rgba(11,11,12,.70) 34%,rgba(11,11,12,.14) 62%,rgba(11,11,12,0) 86%);
  }
}
.hero__in{position:relative;padding:calc(76px + clamp(4rem,11vw,8.5rem)) 0 clamp(6rem,12vw,9rem)}
.hero__kicker{
  display:inline-flex;align-items:center;gap:.6rem;font-size:.78rem;letter-spacing:.16em;
  text-transform:uppercase;color:#fff;opacity:.82;margin-bottom:1.5rem;font-weight:400;
}
.hero__kicker::before{content:"";width:34px;height:2px;background:var(--accent)}
.hero h1{font-size:clamp(2.6rem,7.4vw,5rem);max-width:15ch;margin-bottom:1.1rem}
/* Sous-titre, PAS une action : ni fond plein, ni bordure, ni coupe —
   rien qui puisse le confondre avec un bouton. La barre verticale
   est un marqueur éditorial, jamais lu comme cliquable. */
.hero__role{
  display:block;max-width:32ch;margin:0 0 2.4rem;
  padding:.1rem 0 .1rem 1.05rem;border-left:2px solid var(--accent);
  background:none;color:rgba(255,255,255,.94);
  font-size:clamp(1.05rem,2.2vw,1.38rem);font-weight:300;line-height:1.4;
}
.hero__cta{display:flex;flex-wrap:wrap;gap:.85rem}
/* Boutons : même coupe angulaire que les cartes, et la couleur qui
   balaie au survol — la mécanique monochrome→couleur du site. */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.65rem;
  min-height:54px;padding:.95rem 1.8rem;text-decoration:none;
  font-weight:500;font-size:1rem;letter-spacing:.005em;line-height:1;
  border:1.5px solid transparent;cursor:pointer;border-radius:0;
  clip-path:polygon(0 0,100% 0,100% calc(100% - 13px),calc(100% - 13px) 100%,0 100%);
  background-repeat:no-repeat;background-position:left center;background-size:0% 100%;
  transition:background-size .42s cubic-bezier(.22,.8,.28,1),
             color .22s ease .06s, border-color .22s, transform .12s;
}
.btn svg{transition:transform .28s cubic-bezier(.22,.8,.28,1);flex:0 0 auto}
.btn:hover{background-size:100% 100%}
.btn:hover svg{transform:translateX(4px)}
.btn:active{transform:translateY(1px)}
/* le clip rogne l'outline : anneau de focus en interne */
.btn:focus-visible{outline:none;box-shadow:inset 0 0 0 3px var(--accent-ink),inset 0 0 0 5px #fff}

.btn--primary{
  background-color:var(--ink);color:#fff;border-color:var(--ink);
  background-image:linear-gradient(var(--accent),var(--accent));
}
.btn--primary:hover{color:#06222F;border-color:var(--accent)}
.btn--primary:focus-visible{box-shadow:inset 0 0 0 3px #fff,inset 0 0 0 5px var(--ink)}

/* sur fond sombre le bouton noir disparaîtrait : on inverse le repos,
   la couleur reste réservée au survol */
.hero .btn--primary,.sec--ink .btn--primary{
  background-color:#fff;color:var(--ink);border-color:#fff;
}
.hero .btn--primary:hover,.sec--ink .btn--primary:hover{color:#06222F;border-color:var(--accent)}

/* le balayage est la signature de l'action principale :
   le bouton secondaire se contente d'un voile */
.btn--ghost{
  color:#fff;border-color:rgba(255,255,255,.6);background-image:none;
  /* voile sombre : le libellé reste lisible même sur une zone claire de la photo */
  background-color:rgba(11,11,12,.42);backdrop-filter:blur(2px);
  transition:background-color .22s,border-color .22s,transform .12s;
}
.btn--ghost:hover{border-color:#fff;background-color:rgba(11,11,12,.68)}
.btn--ghost:focus-visible{box-shadow:inset 0 0 0 3px #fff,inset 0 0 0 5px var(--ink)}
/* la coupe : un seul angle, réutilisé partout */
.cut{position:absolute;left:0;right:0;bottom:-1px;height:clamp(48px,7vw,104px);pointer-events:none;z-index:3}
.cut svg{width:100%;height:100%;display:block}

/* ---------- bandeau infos ---------- */
.facts{background:var(--mist);border-bottom:1px solid var(--line)}
.facts__grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(220px,100%),1fr));gap:1px;background:var(--line)}
.fact{background:var(--mist);padding:1.6rem clamp(1rem,2vw,1.8rem)}
/* max(12px,…) : en dessous de 12 px un libellé en capitales espacées devient pénible */
.fact dt{font-size:max(12px,.74rem);letter-spacing:.13em;text-transform:uppercase;color:var(--ink-3);margin-bottom:.45rem;font-weight:500}
.fact dd{margin:0;font-size:1rem;font-weight:400;color:var(--ink)}
/* le numéro est une action : il lui faut une vraie zone de contact */
.fact dd a{display:inline-flex;align-items:center;min-height:44px;margin:-.6rem 0;
  text-decoration:none;color:var(--accent-ink);font-weight:500}
.fact dd a:hover{text-decoration:underline}

/* ---------- sections ---------- */
.sec{padding:clamp(4rem,9vw,7rem) 0}
.sec--mist{background:var(--mist)}
.sec--ink{background:var(--ink);color:#fff}
.sec__head{max-width:56ch;margin-bottom:clamp(2.4rem,5vw,3.6rem)}
.eyebrow{
  display:inline-flex;align-items:center;gap:.6rem;font-size:.76rem;letter-spacing:.16em;
  text-transform:uppercase;color:var(--ink-3);margin-bottom:1rem;font-weight:500;
}
.eyebrow::before{content:"";width:26px;height:2px;background:var(--accent)}
.sec--ink .eyebrow{color:rgba(255,255,255,.7)}
.sec h2{font-size:clamp(1.9rem,4.4vw,3rem);margin-bottom:1rem}
.lede{font-size:clamp(1rem,1.6vw,1.13rem);color:var(--ink-2);margin:0}
.sec--ink .lede{color:rgba(255,255,255,.78)}

/* ---------- soins ---------- */
.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(238px,100%),1fr));gap:clamp(1rem,2vw,1.5rem)}
.card{
  position:relative;background:#fff;border:1px solid var(--line);text-decoration:none;color:inherit;
  display:flex;flex-direction:column;overflow:hidden;transition:border-color .2s,transform .2s,box-shadow .2s;
  clip-path:polygon(0 0,100% 0,100% calc(100% - 26px),calc(100% - 26px) 100%,0 100%);
}
.card:hover{border-color:var(--ink);transform:translateY(-3px);box-shadow:0 12px 28px -18px rgba(11,11,12,.5)}
/* Deux régimes de survol selon ce que contient VRAIMENT le fichier :

   — photo en couleur (héros, cabinet) : la couleur d'origine revient ;
   — photo déjà en N&B (les 4 traitements, saturation 0,000) : aucune couleur
     à restituer, donc le BLEU DE LA MARQUE balaie l'image de gauche à droite,
     même courbe et même durée que le remplissage des boutons.

   Dans les deux cas la règle du site tient : le monochrome se rompt à l'interaction. */
/* Les photos de soins portent une découpe angulaire aplatie dans le fichier source
   par l'ancien thème. Elle a été rendue transparente : la coupe se fond dans la
   carte et redevient le geste voulu à l'origine. Les calques de survol sont donc
   masqués par la même forme, sinon ils teinteraient la découpe. */
.card__img{aspect-ratio:1/1;overflow:hidden;background:#fff;position:relative;isolation:isolate}
.card__img::before,.card__img::after{
  -webkit-mask-image:url(img/cut-mask.png);mask-image:url(img/cut-mask.png);
  -webkit-mask-size:100% 100%;mask-size:100% 100%;
  -webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;
}
.card__img img{
  width:100%;height:100%;object-fit:cover;
  filter:grayscale(1) brightness(.94) contrast(.96);
  transition:filter .4s ease,transform .55s cubic-bezier(.22,.8,.28,1);
}
/* le balayage bleu — colorise le N&B, ne dépend d'aucune couleur source */
.card__img::before{
  content:"";position:absolute;inset:0;z-index:2;pointer-events:none;
  background-image:linear-gradient(var(--accent),var(--accent));
  background-repeat:no-repeat;background-position:left center;background-size:0% 100%;
  mix-blend-mode:color;
  transition:background-size .5s cubic-bezier(.22,.8,.28,1);
}
/* voile de repos, qui se lève */
.card__img::after{
  content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(180deg,rgba(11,11,12,.16),rgba(11,11,12,.40));
  transition:opacity .4s ease;
}
.card:hover .card__img::before,.card:focus-visible .card__img::before{background-size:100% 100%}
.card:hover .card__img::after,.card:focus-visible .card__img::after{opacity:0}
.card:hover .card__img img,.card:focus-visible .card__img img{
  filter:grayscale(1) brightness(1.06) contrast(1.04);transform:scale(1.045);
}
.card__body{padding:1.3rem 1.4rem 1.7rem}
.card h3{font-size:1.22rem;margin-bottom:.4rem;font-weight:500}
.card p{margin:0;font-size:.93rem;color:var(--ink-3)}
.card__go{display:inline-flex;align-items:center;gap:.4rem;margin-top:1rem;font-size:.9rem;font-weight:500;color:var(--accent-ink)}
.card__go svg{transition:transform .2s}
.card:hover .card__go svg{transform:translateX(4px)}

/* ---------- praticien ---------- */
.split{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr);gap:clamp(1.8rem,4vw,3.5rem);align-items:center}
.split__media{position:relative}
.split__media img{width:100%;filter:grayscale(1);transition:filter .45s ease}
.split__media:hover img{filter:grayscale(0)}
.split__media::after{content:"";position:absolute;left:-14px;bottom:-14px;width:96px;height:96px;border-left:3px solid var(--accent);border-bottom:3px solid var(--accent);z-index:-1}
.creds{list-style:none;margin:1.8rem 0 0;padding:0;display:grid;gap:.85rem}
.creds li{display:flex;gap:.85rem;align-items:flex-start;font-size:.98rem;color:var(--ink-2)}
.creds svg{flex:0 0 auto;margin-top:.28rem;color:var(--accent-ink)}

/* ---------- cabinet : 3 volets ---------- */
.steps{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(250px,100%),1fr));gap:1px;background:rgba(255,255,255,.16)}
/* Ces trois blocs annoncent du contenu : ils DOIVENT être cliquables et le
   montrer. Sans repère d'action, le visiteur lit une promesse sans issue. */
.step{
  display:flex;flex-direction:column;background:var(--ink);padding:clamp(1.6rem,3vw,2.2rem);
  text-decoration:none;color:inherit;transition:background .25s;
}
.step:hover,.step:focus-visible{background:#15161A}
.step__n{font-family:'Righteous',sans-serif;font-size:2.4rem;color:var(--accent);line-height:1;margin-bottom:.9rem;display:block}
.step h3{font-size:1.18rem;margin-bottom:.6rem;font-weight:500}
.step p{margin:0;font-size:.95rem;color:rgba(255,255,255,.72)}
.step__go{
  display:inline-flex;align-items:center;gap:.45rem;margin-top:auto;padding-top:1.2rem;
  font-size:.9rem;font-weight:500;color:#7FCBF2;
}
.step__go svg{transition:transform .22s}
.step:hover .step__go svg{transform:translateX(4px)}

/* ---------- galerie du cabinet ---------- */
/* 4 photos : 420px mini => 2 colonnes sur 1240, donc 2x2 et pas 3+1 orphelin */
.galerie{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(420px,100%),1fr));gap:clamp(.8rem,1.6vw,1.2rem)}
.shot{position:relative;overflow:hidden;aspect-ratio:3/2;background:var(--mist)}
.shot img{
  width:100%;height:100%;object-fit:cover;
  filter:grayscale(1) contrast(1.02);
  transition:filter .6s cubic-bezier(.22,.8,.28,1),transform .8s cubic-bezier(.22,.8,.28,1);
}
.shot figcaption{
  position:absolute;left:0;right:0;bottom:0;padding:1.4rem 1.1rem .9rem;
  font-size:.9rem;color:#fff;
  background:linear-gradient(180deg,rgba(11,11,12,0),rgba(11,11,12,.78));
}
@media (hover:hover){
  .shot:hover img{filter:grayscale(0) contrast(1.02) saturate(1.05);transform:scale(1.03)}
}

/* ---------- infos pratiques ---------- */
.info{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(260px,100%),1fr));gap:clamp(1.6rem,3vw,2.6rem)}
.info h3{font-size:.8rem;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-3);margin-bottom:.9rem;font-weight:500}
.info p,.info li{margin:0 0 .35rem;font-size:.98rem;color:var(--ink-2)}
.info ul{list-style:none;padding:0;margin:0}
.info a{color:var(--accent-ink);font-weight:500;text-decoration:none}
.info a:hover{text-decoration:underline}
.hours{display:grid;grid-template-columns:auto 1fr;gap:.3rem 1.2rem;font-size:.98rem}
.hours dt{color:var(--ink-3)}
.hours dd{margin:0;font-variant-numeric:tabular-nums;color:var(--ink)}

/* ---------- contact ---------- */
.form{display:grid;gap:1.1rem;max-width:620px}
.row{display:grid;grid-template-columns:1fr 1fr;gap:1.1rem}
.field label{display:block;font-size:.88rem;font-weight:500;margin-bottom:.4rem}
.field .hint{display:block;font-size:.82rem;color:var(--ink-3);font-weight:300;margin-top:.3rem}
.field input,.field textarea{
  width:100%;min-height:52px;padding:.85rem 1rem;font:inherit;font-size:1rem;
  border:1px solid var(--line);border-radius:var(--r);background:#fff;color:var(--ink);
  transition:border-color .18s,box-shadow .18s;
}
.field textarea{min-height:140px;resize:vertical}
.field input:hover,.field textarea:hover{border-color:var(--ink-3)}
.field input:focus,.field textarea:focus{border-color:var(--accent-ink);box-shadow:0 0 0 3px var(--accent-wash);outline:none}
.req{color:var(--accent-ink)}

/* ---------- pied ---------- */
.ftr{background:var(--ink);color:rgba(255,255,255,.62);padding:2.6rem 0;font-size:.88rem}
.ftr__in{display:flex;flex-wrap:wrap;gap:1rem 2rem;align-items:center;justify-content:space-between}
.ftr a{color:rgba(255,255,255,.85);text-decoration:none}
.ftr a:hover{text-decoration:underline}
.ftr nav{display:flex;gap:.4rem 1.4rem;flex-wrap:wrap}
/* liens de pied de page : 23 px de haut au doigt, c'était trop peu */
.ftr nav a{display:inline-flex;align-items:center;min-height:44px}

@media (max-width:880px){
  .split{grid-template-columns:1fr}
  .burger{display:block}
  .hdr__in{gap:.75rem;position:relative}
  .tel span{display:none}
  /* la navigation devient un panneau déroulant, réellement ouvrable */
  .nav{
    display:none;position:absolute;top:100%;left:0;right:0;z-index:60;
    flex-direction:column;align-items:stretch;gap:0;margin:0;
    background:#fff;border:1px solid var(--line);border-top:0;
    box-shadow:0 18px 34px -22px rgba(11,11,12,.55);
  }
  .hdr__in.is-open .nav{display:flex}
  .nav a{padding:.95rem 1.15rem;border-radius:0;border-bottom:1px solid var(--line)}
  .nav a:last-child{border-bottom:0}
  .nav a[aria-current]{box-shadow:inset 3px 0 0 var(--accent)}
  .burger[aria-expanded="true"]{background:var(--ink);border-color:var(--ink)}
  .burger[aria-expanded="true"] svg{stroke:#fff}
}
@media (max-width:560px){
  .row{grid-template-columns:1fr}
  body{font-size:16px}
  /* ⚠️ `.mark span` attrape AUSSI le conteneur du nom : il faisait disparaître
     « Dr Thomas de Valence » de tout l'en-tête mobile. On ne masque que le
     sous-titre, c'est-à-dire le span imbriqué. */
  .mark > span > span{display:none}
  .mark b{font-size:.86rem;display:block}
  .mark > span{min-width:0}          /* autorise le nom à passer sur deux lignes */
  .mark__logo{width:35px;height:30px}
  .hdr__in{min-height:64px;gap:.5rem}
  .hero__in{padding-top:calc(64px + clamp(4rem,11vw,8.5rem))}
  .phero__in{padding-top:calc(64px + clamp(2.6rem,6vw,4.6rem))}
  .hero__cta .btn{width:100%}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;transition-duration:.01ms!important}
  .card:hover{transform:none}
}

/* ============================================================
   PAGES INTÉRIEURES
   ============================================================ */

/* fil d'Ariane */
.crumb{font-size:.86rem;color:var(--ink-3);margin:0 0 1.1rem;display:flex;flex-wrap:wrap;gap:.45rem;align-items:center}
.crumb a{color:rgba(255,255,255,.72);text-decoration:none}
.crumb a:hover{color:#fff;text-decoration:underline}
.crumb svg{opacity:.5}
.phero .crumb{color:rgba(255,255,255,.6)}

/* héros de page : compact, sombre, même coupe que l'accueil */
.phero{position:relative;background:var(--ink);color:#fff;overflow:hidden}
.phero__media{position:absolute;inset:0}
.phero__media img{width:100%;height:100%;object-fit:cover;filter:grayscale(1) brightness(.62) contrast(1.02);
  transition:filter .75s cubic-bezier(.22,.8,.28,1)}
.phero__media::after{content:"";position:absolute;inset:0;z-index:2;
  background:linear-gradient(100deg,rgba(11,11,12,.92) 0%,rgba(11,11,12,.74) 45%,rgba(11,11,12,.42) 100%);
  transition:background .75s ease}
/* Deux régimes, comme sur les cartes, selon ce que contient le fichier :
   photo couleur → la couleur revient ; photo réellement N&B → le bleu balaie.
   Les 4 photos de soins sont de vrais fichiers monochromes (saturation nulle),
   d'où la classe .phero--bw : y enlever le grayscale ne produirait rien. */
.phero--bw .phero__media{isolation:isolate}
.phero--bw .phero__media::before{
  content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background-image:linear-gradient(var(--accent),var(--accent));
  background-repeat:no-repeat;background-position:left center;background-size:0% 100%;
  mix-blend-mode:color;transition:background-size .8s cubic-bezier(.22,.8,.28,1);
}
@media (hover:hover){
  .phero:not(.phero--bw):hover .phero__media img,
  .phero:not(.phero--bw):focus-within .phero__media img{
    filter:grayscale(0) brightness(.72) contrast(1.02) saturate(1.06);
  }
  .phero:hover .phero__media::after,.phero:focus-within .phero__media::after{
    background:linear-gradient(100deg,rgba(11,11,12,.92) 0%,rgba(11,11,12,.72) 45%,rgba(11,11,12,.34) 100%);
  }
  .phero--bw:hover .phero__media::before,
  .phero--bw:focus-within .phero__media::before{background-size:100% 100%}
}
/* z-index:3 — le voile de .phero__media::after est en z-index:2 (il doit passer
   au-dessus du balayage bleu, en 1). Sans ce 3, le voile se peint PAR-DESSUS
   le texte : titre et chapo delaves sur les 8 pages interieures. */
.phero__in{position:relative;z-index:3;padding:calc(76px + clamp(2.6rem,6vw,4.6rem)) 0 clamp(4.2rem,8vw,6.4rem)}
.phero h1{font-size:clamp(2.05rem,5.2vw,3.5rem);max-width:20ch;margin:0 0 1rem}
.phero .lede{color:rgba(255,255,255,.82);max-width:60ch}

/* texte long */
.prose{max-width:68ch}
.prose p{margin:0 0 1.15rem;color:var(--ink-2)}
.prose p:last-child{margin-bottom:0}
.prose h2{font-size:clamp(1.5rem,3vw,2.05rem);margin:2.6rem 0 .9rem}
.prose h3{font-size:clamp(1.15rem,2.2vw,1.4rem);margin:2rem 0 .7rem;font-weight:500}
.prose strong{font-weight:600;color:var(--ink)}
.prose ul{margin:0 0 1.15rem;padding-left:1.1rem;color:var(--ink-2)}
.prose li{margin-bottom:.5rem}
.prose a{color:var(--accent-ink);font-weight:500}

/* mise en page 2 colonnes : contenu + encart latéral */
.withaside{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,340px);gap:clamp(2rem,5vw,4rem);align-items:start}
.aside{background:var(--mist);border:1px solid var(--line);padding:clamp(1.4rem,3vw,1.9rem);position:sticky;top:96px;
  clip-path:polygon(0 0,100% 0,100% calc(100% - 26px),calc(100% - 26px) 100%,0 100%)}
.aside h2{font-size:1.12rem;margin:0 0 1rem;font-weight:500}
.aside dl{display:grid;grid-template-columns:auto 1fr;gap:.3rem 1rem;margin:0 0 1.3rem;font-size:.94rem}
.aside dt{color:var(--ink-3)}
.aside dd{margin:0;font-variant-numeric:tabular-nums}
.aside .btn{width:100%}

/* blocs question / réponse */
.qa{border-top:1px solid var(--line);padding-top:1.6rem;margin-top:1.6rem}
.qa:first-of-type{border-top:0;padding-top:0;margin-top:0}
.qa__q{display:flex;gap:.9rem;align-items:baseline;margin:0 0 .7rem}
.qa__n{font-family:'Righteous',sans-serif;color:var(--accent);font-size:1.05rem;flex:0 0 auto}
.qa h3{margin:0;font-size:clamp(1.15rem,2.3vw,1.45rem);font-weight:500}

/* autres traitements */
.related{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(220px,100%),1fr));gap:1rem}
.rel{display:flex;align-items:center;gap:.9rem;padding:1rem 1.15rem;background:#fff;border:1px solid var(--line);
  text-decoration:none;color:inherit;font-weight:500;transition:border-color .2s,transform .2s;
  clip-path:polygon(0 0,100% 0,100% calc(100% - 18px),calc(100% - 18px) 100%,0 100%)}
.rel:hover{border-color:var(--ink);transform:translateY(-2px)}
.rel svg{margin-left:auto;color:var(--accent-ink);transition:transform .2s;flex:0 0 auto}
.rel:hover svg{transform:translateX(4px)}
.rel__t{font-size:.98rem}

/* carte / accès */
.mapbox{aspect-ratio:16/10;background:var(--mist);border:1px solid var(--line);display:flex;
  align-items:center;justify-content:center;text-align:center;padding:1.5rem;color:var(--ink-3);font-size:.92rem;
  clip-path:polygon(0 0,100% 0,100% calc(100% - 30px),calc(100% - 30px) 100%,0 100%)}

@media (max-width:900px){
  .withaside{grid-template-columns:1fr}
  .aside{position:static}
}

/* ─────────────────────────────────────────────────────────────────────────
   VOILE DES BANDEAUX EN MOBILE — a garder EN FIN DE FEUILLE.
   Les voiles par defaut sont des degrades HORIZONTAUX calibres pour le
   desktop : en ecran etroit la zone sombre se comprime et le titre se
   retrouve sur la partie claire de la photo (constate sur orthodontie,
   contact et confidentialite). On repasse en degrade vertical avec un
   alpha jamais inferieur a .80 : le fond compose reste sous 60/255 quelle
   que soit la photo, soit plus de 10:1 avec du texte blanc.
   ⚠️ Ce bloc DOIT rester apres `.phero__media::after` (ligne ~385) :
   a specificite egale, c'est la derniere regle qui gagne.
   ───────────────────────────────────────────────────────────────────────── */
@media (max-width:880px){
  .hero__media::after,
  .hero:hover .hero__media::after,.hero:focus-within .hero__media::after{
    background:linear-gradient(180deg,rgba(11,11,12,.82) 0%,rgba(11,11,12,.80) 55%,rgba(11,11,12,.88) 100%);
  }
  .phero__media::after,
  .phero:hover .phero__media::after,.phero:focus-within .phero__media::after{
    background:linear-gradient(180deg,rgba(11,11,12,.84) 0%,rgba(11,11,12,.80) 50%,rgba(11,11,12,.90) 100%);
  }
}

/* l'en-tête est fixe : les ancres doivent s'arrêter en dessous, pas dessous */
:target,[id]{scroll-margin-top:96px}
@media (max-width:560px){ :target,[id]{scroll-margin-top:80px} }

/* Entre 881 et 1200 px, le nom + le menu + le bouton d'appel ne tiennent plus
   sur une ligne : le menu passait sur deux lignes. On libère la place en
   masquant le sous-titre de la marque et en resserrant les liens. */
@media (min-width:881px) and (max-width:1200px){
  .mark > span > span{display:none}
  .nav a{padding:.65rem .55rem;font-size:.9rem}
  .hdr__in{gap:1rem}
}

/* ─── Surlignage des mots-clés — repris du site actuel ────────────────────
   L'existant fait : fond noir au repos, fond bleu au survol de la section.
   On garde le geste, mais pas la couleur : son #88cee7 sur du blanc donne
   1,9:1, illisible. On prend --accent-ink (#14688F), mesuré à 5,9:1.
   Sur fond sombre, le rapport s'inverse pour que le mot reste visible. */
.hl{
  display:inline-block;padding:0 .34em;
  background:var(--ink);color:#fff;
  transition:background .35s cubic-bezier(.22,.8,.28,1),color .35s ease;
}
.sec:hover .hl,.sec:focus-within .hl{background:var(--accent-ink)}
/* sections sombres : le noir disparaîtrait, on inverse */
.sec--ink .hl,.hero .hl,.phero .hl{background:#fff;color:var(--ink)}
.sec--ink:hover .hl,.sec--ink:focus-within .hl{background:var(--accent);color:#06222F}
@media (prefers-reduced-motion:reduce){ .hl{transition:none} }

/* ─── Bouton Doctolib — modèle des autres sites MREL (logo dans le bouton) ──
   Le cabinet prend ses rendez-vous sur Doctolib : c'est l'action principale.
   Même coupe angulaire et même balayage que les autres boutons du site ;
   le logo est celui de Doctolib, en blanc sur le bouton sombre. */
.btn--dl{
  background-color:var(--ink);color:#fff;border-color:var(--ink);
  background-image:linear-gradient(#107ACA,#107ACA);
  gap:.7rem;
}
.btn--dl:hover{color:#fff;border-color:#107ACA}
.btn--dl img{height:18px;width:auto;flex:0 0 auto}
/* sur fond sombre, le bouton s'inverse comme les autres boutons principaux */
.hero .btn--dl,.sec--ink .btn--dl{background-color:#fff;color:var(--ink);border-color:#fff}
.hero .btn--dl:hover,.sec--ink .btn--dl:hover{color:#fff;border-color:#107ACA}
.hero .btn--dl img,.sec--ink .btn--dl img{content:url(img/doctolib.png)}
.hero .btn--dl:hover img,.sec--ink .btn--dl:hover img{content:url(img/doctolib-blanc.png)}
/* dans l'encart des pages intérieures les deux boutons s'empilent */
.aside .btn{width:100%;margin-bottom:.55rem}
/* le bouton téléphone y est secondaire : il est sur fond clair, pas sombre */
.aside .btn--tel{color:var(--ink);border-color:var(--line);background-color:#fff;backdrop-filter:none}
.aside .btn--tel:hover{border-color:var(--ink);background-color:#fff}
/* bloc de prise de RDV en ligne, en tête de la page contact */
.rdv-direct{
  display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;
  gap:1.4rem;padding:clamp(1.6rem,3vw,2.2rem);background:var(--mist);
  border-left:3px solid var(--accent);
}
.rdv-direct h2{font-size:clamp(1.4rem,2.6vw,1.9rem);margin-bottom:.4rem}
.rdv-direct p{margin:0;color:var(--ink-2)}
@media (max-width:640px){ .rdv-direct .btn{width:100%} }

/* ─── FAQ ─────────────────────────────────────────────────────────────────
   <details>/<summary> natifs : ouverture au clavier, lisible sans JS, et
   indexable même replié (le contenu est dans le DOM). */
.faq{max-width:informatif;max-width:72ch;margin-inline:auto}
.faq__q{
  border-top:1px solid var(--line);
}
.faq__q:last-child{border-bottom:1px solid var(--line)}
.faq__q > summary{
  list-style:none;cursor:pointer;display:flex;align-items:flex-start;gap:1rem;
  padding:1.25rem 0;font-size:clamp(1.02rem,2vw,1.15rem);font-weight:500;
  color:var(--ink);min-height:44px;
}
.faq__q > summary::-webkit-details-marker{display:none}
.faq__q > summary::after{
  content:"";flex:0 0 auto;margin-left:auto;width:13px;height:13px;
  border-right:2px solid var(--accent-ink);border-bottom:2px solid var(--accent-ink);
  transform:rotate(45deg);transform-origin:center;margin-top:.45rem;
  transition:transform .25s ease;
}
.faq__q[open] > summary::after{transform:rotate(-135deg);margin-top:.75rem}
.faq__q > summary:hover{color:var(--accent-ink)}
.faq__q > summary:focus-visible{outline:3px solid var(--accent-ink);outline-offset:2px}
.faq__r{padding:0 0 1.4rem;color:var(--ink-2)}
.faq__r p{margin:0 0 .8rem}
.faq__r p:last-child{margin:0}
.faq__r a{color:var(--accent-ink);font-weight:500}
@media (prefers-reduced-motion:reduce){ .faq__q > summary::after{transition:none} }

/* ─── Module de prise de rendez-vous (Doctolib) ───────────────────────────
   Reprend ce que fait le site actuel : réservation sans quitter la page. */
.prise-rdv h2{margin-bottom:.5rem}
.prise-rdv .lede{margin-bottom:1.4rem}
.prise-rdv iframe{width:100%;border:1px solid var(--line);background:var(--mist);display:block}
.prise-rdv__repli{margin:.9rem 0 0;font-size:.92rem;color:var(--ink-3)}
.prise-rdv__repli a{color:var(--accent-ink);font-weight:500}

/* ─── Sous-menu « Orthodontie » ───────────────────────────────────────────
   Desktop : déroulant au survol ET au focus clavier. Mobile : liste imbriquée
   toujours dépliée dans le panneau — au doigt, un déroulant en cache plus
   qu'il n'en montre. */
.nav__grp{position:relative;display:flex;align-items:center}
.nav__chev{margin-left:.3rem;transition:transform .2s ease;flex:0 0 auto}
.nav__sous{display:none}

@media (min-width:881px){
  .nav__sous{
    position:absolute;top:100%;left:0;min-width:230px;z-index:60;
    flex-direction:column;padding:.4rem;
    background:#fff;border:1px solid var(--line);
    box-shadow:0 18px 34px -22px rgba(11,11,12,.55);
  }
  .nav__grp:hover .nav__sous,
  .nav__grp:focus-within .nav__sous{display:flex}
  .nav__grp:hover .nav__chev{transform:rotate(180deg)}
  .nav__sous a{white-space:nowrap;color:var(--ink-2)}
  /* sur l'en-tête transparent, le panneau reste blanc : il est posé sur la photo */
  .hdr--sur-hero .nav__sous a{color:var(--ink-2)}
  .hdr--sur-hero .nav__sous a:hover{color:var(--ink);background:var(--mist)}
}

@media (max-width:880px){
  .nav__grp{display:block;border-bottom:1px solid var(--line)}
  .nav__grp > a{border-bottom:0}
  .nav__chev{display:none}
  .nav__sous{display:block;padding:0 0 .5rem}
  /* display:flex — sans ça les liens restent en ligne et se mettent sur deux
     colonnes ; et min-height:44px pour rester une cible tactile correcte */
  .nav__sous a{
    display:flex;align-items:center;min-height:44px;
    padding:.55rem 1.15rem .55rem 2.3rem;border-bottom:0;font-size:.94rem;
    color:var(--ink-3);position:relative;
  }
  .nav__sous a::before{
    content:"";position:absolute;left:1.3rem;top:50%;width:8px;height:1px;
    background:var(--accent);
  }
  .nav__sous a[aria-current]{color:var(--ink);font-weight:500}
}

/* ─── Au doigt, il n'y a pas de survol ────────────────────────────────────
   Tous les effets couleur du site sont derrière `hover:hover` : sur mobile
   ils ne se déclenchaient JAMAIS. On les rejoue à l'apparition à l'écran,
   via la classe `.est-vu` posée par site.js (IntersectionObserver). */
@media (hover:none){
  .card__img::before,.card__img::after,.card__img img,
  .shot img,.hl,.hero__media img,.phero--bw .phero__media::before{
    transition-duration:.85s;
  }
  .card.est-vu .card__img::before{background-size:100% 100%}
  .card.est-vu .card__img::after{opacity:0}
  .card.est-vu .card__img img{filter:grayscale(1) brightness(1.06) contrast(1.04)}
  .shot.est-vu img{filter:grayscale(0) contrast(1.02) saturate(1.05)}
  .sec.est-vu .hl{background:var(--accent-ink)}
  .sec--ink.est-vu .hl{background:var(--accent);color:#06222F}
  .hero.est-vu .hero__media img{filter:grayscale(0) contrast(1.02) saturate(1.06)}
  .phero--bw.est-vu .phero__media::before{background-size:100% 100%}
  /* le décalage donne un enchaînement au lieu d'un basculement en bloc */
  .card.est-vu{transition-delay:var(--retard,0ms)}
  .card.est-vu .card__img::before,
  .card.est-vu .card__img::after,
  .card.est-vu .card__img img{transition-delay:var(--retard,0ms)}
  .shot.est-vu img{transition-delay:var(--retard,0ms)}
}
@media (hover:none) and (prefers-reduced-motion:reduce){
  .card__img::before,.card__img::after,.card__img img,
  .shot img,.hl,.hero__media img,.phero--bw .phero__media::before{
    transition-duration:.01ms;
  }
}

/* ─── Signature de l'agence ───────────────────────────────────────────── */
.ftr__agence{
  flex-basis:100%;margin:1.4rem 0 0;padding-top:1.2rem;
  border-top:1px solid rgba(255,255,255,.14);
  font-size:.84rem;color:rgba(255,255,255,.5);
}
.ftr__agence a{color:rgba(255,255,255,.78);text-decoration:underline;text-underline-offset:3px}
.ftr__agence a:hover{color:#fff}

/* ─── Bouton flottant de prise de rendez-vous (mobile) ────────────────────
   Modèle Toledano / Fazaiee : il APPARAÎT au défilement, il n'est pas une
   barre collée en bas qui recouvre le contenu dès l'arrivée.
   Deux implémentations volontairement superposées :
   · JS (site.js) qui pose `.cta-visible` sur le body après 420 px ;
   · repli CSS pur en `animation-timeline` pour les navigateurs récents.
   ⚠️ Le `@supports` n'est pas décoratif : sans lui, un navigateur qui ignore
   les animations liées au défilement appliquerait `opacity:0` et ne
   révélerait JAMAIS le bouton — on perdrait le seul accès mobile au RDV. */
.cta-flot{display:none}

@media (max-width:700px){
  .cta-flot{
    display:inline-flex;align-items:center;justify-content:center;gap:.55rem;
    position:fixed;left:50%;transform:translateX(-50%);bottom:14px;z-index:70;
    width:calc(100% - 28px);min-height:54px;padding:.9rem 1.2rem;
    background-color:var(--ink);color:#fff;text-decoration:none;
    font-weight:500;font-size:1rem;line-height:1;
    clip-path:polygon(0 0,100% 0,100% calc(100% - 13px),calc(100% - 13px) 100%,0 100%);
    box-shadow:0 14px 30px -14px rgba(11,11,12,.75);
  }
  .cta-flot img{height:16px;width:auto;flex:0 0 auto}
  .cta-flot:focus-visible{outline:3px solid #fff;outline-offset:-6px}
  /* le pied de page réserve la place du bouton, sinon il masque la fin du contenu */
  .ftr{padding-bottom:calc(2.6rem + 68px)}

  /* état par défaut : masqué, révélé par la classe posée par site.js */
  .cta-flot{opacity:0;transform:translateX(-50%) translateY(18px);pointer-events:none;
    transition:opacity .32s ease,transform .32s cubic-bezier(.22,.8,.28,1)}
  body.cta-visible .cta-flot{opacity:1;transform:translateX(-50%);pointer-events:auto}

  /* repli sans JS, pour les navigateurs qui savent lier une animation au défilement */
  @supports (animation-timeline: scroll()){
    body:not(.cta-js) .cta-flot{
      animation:cta-apparait linear both;
      animation-timeline:scroll(root block);
      animation-range:340px 430px;
    }
    @keyframes cta-apparait{
      to{opacity:1;transform:translateX(-50%);pointer-events:auto}
    }
  }
}
@media (max-width:700px) and (prefers-reduced-motion:reduce){
  .cta-flot{transition:none}
}