/* =====================================================================
   CLINIC TÊTE D'OR — « Clarté »
   Interface médicale épurée : fonds blancs et gris perle, un seul bleu
   (celui du logo CTO), grandes typographies nettes, rendus 3D posés sur
   la page, annotations techniques reliées par des filets.
   Polices : Geist (titres et texte), Geist Mono (annotations).
   Aucune ressource externe, aucun cookie.
   ===================================================================== */

@font-face{ font-family:'Geist'; font-style:normal; font-weight:300 700; font-display:swap;
  src:url(polices/geist.woff2) format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD }
@font-face{ font-family:'Geist Mono'; font-style:normal; font-weight:400 500; font-display:swap;
  src:url(polices/geist-mono.woff2) format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD }
@font-face{ font-family:'Raleway Logo'; font-style:normal; font-weight:400; font-display:swap;
  src:url(polices/raleway-logo.woff2) format('woff2') }

:root{
  /* Thème clair uniquement : les rendus 3D sont photographiés sur blanc. */
  color-scheme:light;

  /* — neutres, très légèrement teintés du bleu du logo — */
  --fond:          oklch(0.968 0.004 220);   /* gris perle de la page */
  --surface:       oklch(0.995 0.002 220);   /* panneaux blancs */
  --fond-2:        oklch(0.945 0.008 220);
  --encre:         oklch(0.20 0.015 235);
  --encre-douce:   oklch(0.48 0.015 230);    /* 6,9:1 sur blanc */
  --encre-pale:    oklch(0.62 0.012 228);    /* annotations, 4,6:1 */
  --trait:         oklch(0.91 0.006 220);
  --trait-fort:    oklch(0.84 0.01 222);

  /* — le bleu du logo CTO (#6AAAC2) et ses déclinaisons — */
  --logo:          oklch(0.71 0.07 222);
  --marque:        oklch(0.52 0.085 228);    /* boutons pleins : blanc 4,9:1 */
  --marque-fonce:  oklch(0.42 0.075 230);
  --sur-marque:    oklch(0.995 0.002 220);
  --marque-pale:   oklch(0.95 0.022 222);
  --marque-voile:  oklch(0.84 0.065 222);

  /* — compatibilité avec les pages annexes (mentions, 404) — */
  --nuit:          oklch(0.24 0.03 232);
  --sur-nuit:      oklch(0.96 0.008 220);
  --sur-nuit-doux: oklch(0.80 0.02 222);
  --vert:          oklch(0.66 0.15 152);
  --ambre:         oklch(0.68 0.13 70);
  --alerte:        oklch(0.52 0.17 27);
  --alerte-pale:   oklch(0.97 0.02 30);

  --e-2xs:4px; --e-xs:8px; --e-sm:12px; --e-md:16px; --e-lg:24px; --e-xl:32px; --e-2xl:48px; --e-3xl:64px; --e-4xl:96px;
  --e-section:clamp(80px, 10vw, 144px);
  --gouttiere:clamp(16px, 3.4vw, 40px);

  --titre:'Geist', -apple-system, 'Segoe UI', Roboto, sans-serif;
  --texte:'Geist', -apple-system, 'Segoe UI', Roboto, sans-serif;
  --mono:'Geist Mono', ui-monospace, 'SF Mono', Menlo, monospace;

  --r-sm:12px; --r-md:20px; --r-lg:28px; --r-xl:36px;
  --large:1280px;
  --ombre:0 1px 2px oklch(0.2 0.02 235 / 0.04), 0 24px 48px -28px oklch(0.2 0.02 235 / 0.18);
  --sortie:cubic-bezier(0.16, 1, 0.3, 1);
}

*,*::before,*::after{ box-sizing:border-box }
html{ scroll-behavior:smooth; scroll-padding-top:100px; -webkit-text-size-adjust:100% }
body{
  margin:0; background:var(--fond); color:var(--encre);
  font-family:var(--texte); font-size:1rem; line-height:1.6; font-feature-settings:"ss01";
  -webkit-font-smoothing:antialiased; overflow-x:clip;
}
img{ max-width:100%; display:block; height:auto }
a{ color:var(--marque); text-underline-offset:3px }
h1,h2,h3{ margin:0; font-family:var(--titre); font-weight:500; letter-spacing:-0.04em; text-wrap:balance }
h2{ font-size:clamp(2.2rem, 4.8vw, 4rem); line-height:1 }
h3{ font-size:1.3rem; line-height:1.2; letter-spacing:-0.025em }
p{ margin:0 0 var(--e-md); text-wrap:pretty }
.large{ max-width:var(--large); margin-inline:auto; padding-inline:var(--gouttiere) }
section{ padding-block:var(--e-section) }

.repere{ display:inline-flex; align-items:center; gap:10px; font:400 0.78rem/1 var(--mono); letter-spacing:0.02em; color:var(--encre-pale) }
.repere b{ font-weight:500; color:var(--marque) }
.chapo{ font-size:clamp(1.05rem, 1.3vw, 1.2rem); line-height:1.55; color:var(--encre-douce); max-width:46ch }
.doux{ color:var(--encre-pale) }

/* --- accessibilité --- */
.evitement{ position:absolute; left:-9999px; top:8px; z-index:300; background:var(--marque); color:var(--sur-marque); padding:10px 18px; border-radius:var(--r-sm) }
.evitement:focus{ left:8px }
:focus-visible{ outline:2px solid var(--marque); outline-offset:3px; border-radius:8px }

/* --- boutons : pilule + pastille fléchée --- */
.cta{ display:inline-flex; align-items:center; gap:6px; text-decoration:none }
.bouton{
  display:inline-flex; align-items:center; justify-content:center; gap:10px; cursor:pointer; text-decoration:none; white-space:nowrap;
  font:500 0.95rem/1 var(--titre); letter-spacing:-0.01em; padding:15px 24px; border-radius:100px; border:1px solid transparent;
  transition:background 300ms var(--sortie), color 300ms var(--sortie), border-color 300ms var(--sortie), transform 400ms var(--sortie);
}
.bouton-plein{ background:var(--marque); color:var(--sur-marque) }
.bouton-trait{ background:var(--surface); border-color:var(--trait-fort); color:var(--encre) }
.bouton-trait:hover{ border-color:var(--encre) }
.bouton-petit{ padding:12px 18px; font-size:0.9rem }
.fleche{
  width:48px; height:48px; flex:none; border-radius:50%; display:grid; place-items:center;
  background:var(--marque); color:var(--sur-marque); transition:transform 500ms var(--sortie), background 300ms;
}
.fleche svg{ transition:transform 500ms var(--sortie) }
.cta:hover .bouton-plein, .cta:hover .fleche{ background:var(--marque-fonce) }
.cta:hover .fleche svg{ transform:rotate(45deg) }
.cta-petit .bouton{ padding:12px 18px; font-size:0.9rem }
.cta-petit .fleche{ width:41px; height:41px }

/* --- étiquettes (pilules) --- */
.pilules{ display:flex; flex-wrap:wrap; gap:6px; list-style:none; margin:0; padding:0 }
.pilules li{ padding:8px 14px; border-radius:100px; background:var(--surface); border:1px solid var(--trait); font:400 0.8rem var(--titre); color:var(--encre); box-shadow:0 1px 2px oklch(0.2 0.02 235 / 0.04) }

/* =====================================================================
   OUVERTURE : un grand panneau blanc posé sur la page
   ===================================================================== */
.scene{ padding:10px; }
.panneau-haut{
  position:relative; overflow:hidden; isolation:isolate; border-radius:var(--r-xl);
  background:var(--surface); min-height:min(100svh - 20px, 900px);
  display:grid; grid-template-rows:auto 1fr auto;
  box-shadow:0 0 0 1px var(--trait);
}
.panneau-haut::after{ /* voile bleu du bas */
  content:""; position:absolute; z-index:0; pointer-events:none; inset:auto -10% -30% -10%; height:70%;
  background:radial-gradient(55% 75% at 50% 100%, color-mix(in oklab, var(--marque-voile) 95%, transparent) 0%, color-mix(in oklab, var(--marque-voile) 45%, transparent) 40%, transparent 72%);
}

/* en-tête */
.entete{ position:relative; z-index:20; display:flex; align-items:center; justify-content:space-between; gap:var(--e-lg); padding:22px clamp(18px, 3vw, 40px) }
.marque{ display:flex; align-items:center; gap:12px; text-decoration:none; color:inherit; flex:none }
.monogramme{ width:54px; height:auto; aspect-ratio:560/280; color:var(--logo); flex:none; overflow:visible }
.marque b{ display:block; font:400 1rem/1.1 'Raleway Logo', var(--texte); letter-spacing:0.03em; text-transform:uppercase; color:var(--logo); white-space:nowrap }
.marque small{ display:block; font:400 0.66rem/1.4 var(--mono); color:var(--encre-pale); white-space:nowrap }
.menu{ display:flex; gap:4px; list-style:none; margin:0; padding:0 }
.menu a{ display:block; padding:9px 13px; border-radius:100px; text-decoration:none; color:var(--encre); font-size:0.9rem; white-space:nowrap; transition:background 250ms }
.menu a:hover{ background:var(--fond) }
.entete-actions{ display:flex; align-items:center; gap:8px }
.hamburger{ display:none; width:46px; height:46px; border-radius:50%; border:1px solid var(--trait-fort); background:var(--surface); color:var(--encre); cursor:pointer; place-items:center }

/* barre fixe qui apparaît au défilement */
.barre-haut{
  position:fixed; z-index:70; top:10px; left:50%; width:min(calc(100% - 20px), 1100px); transform:translate(-50%, -140%);
  display:flex; align-items:center; justify-content:space-between; gap:var(--e-md); padding:8px 8px 8px 18px; border-radius:100px;
  background:color-mix(in oklab, var(--surface) 82%, transparent); backdrop-filter:blur(16px) saturate(170%);
  border:1px solid var(--trait); box-shadow:var(--ombre); transition:transform 600ms var(--sortie);
}
.barre-haut.visible{ transform:translate(-50%, 0) }
.barre-haut .menu a{ font-size:0.86rem; padding:8px 11px }

/* contenu de l'ouverture */
.ouverture{ position:relative; display:grid; grid-template-columns:minmax(0,5.4fr) minmax(0,4fr) minmax(0,2.6fr); gap:var(--e-lg); padding:clamp(16px, 4vh, 48px) clamp(18px, 3vw, 40px) 0; align-items:stretch }
.ouverture-texte{ display:flex; flex-direction:column; justify-content:space-between; padding-bottom:clamp(24px, 6vh, 72px); z-index:2 }
.ouverture h1{ font-size:clamp(2.9rem, 5.4vw, 5.4rem); line-height:0.95; letter-spacing:-0.055em; font-weight:500 }
.ouverture h1 .l{ display:block; overflow:hidden; padding-bottom:0.06em; margin-bottom:-0.06em }
.ouverture h1 .l > span{ display:inline-block }
.ouverture h1 .doux{ color:var(--encre-pale) }
.ouverture-bas{ display:grid; gap:var(--e-lg); max-width:340px; margin-top:var(--e-2xl) }
.ouverture-bas p{ margin:0; color:var(--encre-douce); font-size:0.98rem; line-height:1.5 }

/* rendu central */
.rendu{ position:relative; align-self:end; justify-self:center; width:min(118%, 600px); aspect-ratio:4/5; margin-bottom:-4%; z-index:1 }
.rendu-img{ position:absolute; inset:0; width:100%; height:100%; object-fit:contain; transform-origin:50% 80%; will-change:transform;
  /* bords fondus : le fond blanc du rendu se confond avec le panneau */
  -webkit-mask-image:linear-gradient(to right, transparent 0, #000 20%, #000 80%, transparent 100%), linear-gradient(to bottom, transparent 0, #000 16%, #000 84%, transparent 100%);
  -webkit-mask-composite:source-in;
  mask-image:linear-gradient(to right, transparent 0, #000 20%, #000 80%, transparent 100%), linear-gradient(to bottom, transparent 0, #000 16%, #000 84%, transparent 100%);
  mask-composite:intersect }
.rendu-filets{ position:absolute; inset:0; width:100%; height:100%; overflow:visible; pointer-events:none }
.rendu-filets path{ fill:none; stroke:var(--encre-pale); stroke-width:0.22; stroke-dasharray:1; stroke-dashoffset:0 }
.note{ position:absolute; font:400 0.78rem/1.35 var(--mono); color:var(--encre-douce); white-space:nowrap }
.note b{ display:block; font-weight:500; color:var(--encre) }
.note-1{ left:96%; top:11.5% }
.note-2{ right:96%; top:63.5%; text-align:right }
.ouverture-texte, .ouverture-cote{ position:relative }
/* variante carrée : gouttière en rotation (vidéo 16:9 recadrée au centre) */
.rendu-carre{ aspect-ratio:1; align-self:center; margin-bottom:0; width:min(132%, 700px) }
.rendu-carre .rendu-img{ object-fit:cover; background:#fff; inset:-9%; width:118%; height:118% }
.rendu-carre .rendu-img{ transform:perspective(1100px) rotateY(-24deg) rotateX(9deg) }
.js .rendu-carre .rendu-img{ animation-name:poser-cote }
@keyframes poser-cote{
  from{ opacity:0; transform:perspective(1100px) translateY(40px) rotateY(-34deg) rotateX(9deg) scale(0.96) }
  to{ opacity:1; transform:perspective(1100px) rotateY(-24deg) rotateX(9deg) }
}
/* gouttière photo-réaliste en relief (perspective pilotée par la souris) */
.rendu-relief{ perspective:1100px }
.rendu-relief .relief{ position:absolute; inset:-6%; transform-style:preserve-3d; will-change:transform }
.rendu-relief .rendu-img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; transform:none !important; background:transparent;
  -webkit-mask-image:radial-gradient(closest-side, #000 72%, transparent 100%); mask-image:radial-gradient(closest-side, #000 72%, transparent 100%) }
.js .rendu-relief .rendu-img{ animation-name:poser }
.rendu-relief .reflet{ position:absolute; inset:14% 10% 22%; border-radius:40%; pointer-events:none; mix-blend-mode:soft-light; opacity:.9;
  background:radial-gradient(38% 30% at var(--rx, 35%) var(--ry, 30%), rgba(255,255,255,.95), rgba(255,255,255,0) 70%) }
.rendu-relief::after{ /* ombre portée qui glisse à l'opposé de l'inclinaison */
  content:""; position:absolute; left:22%; right:22%; bottom:6%; height:9%; border-radius:50%; z-index:-1;
  background:radial-gradient(closest-side, oklch(0.45 0.05 230 / .22), transparent); transform:translateX(var(--ox, 0px)); filter:blur(6px) }
@media (hover:hover) and (pointer:fine){ .rendu-relief .indice-3d{ display:inline-flex } }

/* gouttière en 3D : remplace la vidéo en fondu une fois prête */
.vue3d{ position:absolute; inset:-9%; opacity:0; transition:opacity 900ms var(--sortie); z-index:1 }
.vue3d canvas{ width:100% !important; height:100% !important; display:block; cursor:grab; touch-action:pan-y }
.vue3d canvas:active{ cursor:grabbing }
.en-3d .vue3d{ opacity:1 }
/* halo bleuté derrière la gouttière, comme un studio photo */
.vue3d::before{ content:""; position:absolute; inset:12% 8% 18%; z-index:-1; border-radius:50%;
  background:radial-gradient(closest-side, color-mix(in oklab, var(--marque-voile) 55%, transparent), transparent); filter:blur(8px) }
.en-3d .rendu-img{ opacity:0 !important; transition:opacity 900ms var(--sortie) }
.rendu .indice-3d{ position:absolute; left:50%; bottom:2%; transform:translateX(-50%); z-index:2; display:none; align-items:center; gap:8px;
  font:400 0.72rem var(--mono); color:var(--encre-pale); white-space:nowrap; pointer-events:none }
@media (hover:hover) and (pointer:fine){ .en-3d .indice-3d{ display:inline-flex } }
/* écrans moyens et petits : la gouttière reste dans sa colonne, annotations à l'intérieur du cadre */
@media (max-width:1200px){
  .rendu-carre{ width:min(100%, 560px) }
  .rendu-carre .vue3d{ inset:0 }
  .rendu-carre .rendu-filets{ display:none }
  .rendu-carre .note-1{ left:auto !important; right:0 !important; top:4% !important; text-align:right }
  .rendu-carre .note-2{ right:auto !important; left:0 !important; top:auto !important; bottom:8%; text-align:left }
}
.rendu-carre .note-1{ left:96%; top:22% }
.rendu-carre .note-2{ right:96%; top:65.5% }
.point{ position:absolute; width:10px; height:10px; margin:-5px 0 0 -5px; border-radius:50% }
.point::after{ content:""; position:absolute; inset:-6px; border-radius:50%; border:1px solid var(--marque); animation:pulsation 2.4s var(--sortie) infinite }
@keyframes pulsation{ from{ transform:scale(0.4); opacity:1 } to{ transform:scale(1.6); opacity:0 } }

/* colonne droite */
.ouverture-cote{ display:flex; flex-direction:column; justify-content:space-between; gap:var(--e-lg); align-items:flex-end; text-align:right; padding-bottom:clamp(24px, 6vh, 72px); z-index:2 }
.statut{ display:inline-flex; align-items:center; gap:10px; padding:9px 15px 9px 12px; border-radius:100px; background:var(--surface); border:1px solid var(--trait); font-size:0.85rem; color:var(--encre-douce); box-shadow:0 1px 2px oklch(0.2 0.02 235 / 0.04) }
.pastille{ width:8px; height:8px; border-radius:50%; background:var(--vert); position:relative; flex:none }
.pastille::after{ content:""; position:absolute; inset:-5px; border-radius:50%; border:1.5px solid color-mix(in oklab, var(--vert) 40%, transparent); animation:pulsation 2.6s var(--sortie) infinite }
.pastille.ferme{ background:var(--ambre) } .pastille.ferme::after{ border-color:color-mix(in oklab, var(--ambre) 40%, transparent) }
.cote-texte{ margin-top:var(--e-md); font-size:0.88rem; line-height:1.45; color:var(--encre-douce); max-width:22ch }
.ouverture-cote .pilules{ justify-content:flex-end; max-width:290px }

/* bandeau bas du panneau */
.panneau-pied{ position:relative; z-index:2; display:grid; grid-template-columns:repeat(3, 1fr); gap:var(--e-lg); margin:0 clamp(18px, 3vw, 40px); padding:18px 0 22px; border-top:1px solid color-mix(in oklab, var(--encre) 12%, transparent); font-size:0.85rem; line-height:1.4 }
.panneau-pied span:nth-child(2){ text-align:center } .panneau-pied span:nth-child(3){ text-align:right }

/* =====================================================================
   SECTIONS
   ===================================================================== */
.tete{ display:grid; grid-template-columns:minmax(0,1.1fr) minmax(0,0.9fr); gap:var(--e-lg) var(--e-3xl); align-items:end; margin-bottom:var(--e-2xl) }
.tete h2{ margin-top:var(--e-md) }
.tete .chapo{ margin:0; justify-self:end }

/* soins : trois cartes avec rendus */
.soins-grille{ display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:12px }
.soin{
  position:relative; display:flex; flex-direction:column; border-radius:var(--r-lg); background:var(--surface); overflow:hidden; isolation:isolate;
  box-shadow:0 0 0 1px var(--trait); transition:transform 600ms var(--sortie), box-shadow 600ms var(--sortie);
}
.soin:hover{ transform:translateY(-6px); box-shadow:0 0 0 1px var(--trait), var(--ombre) }
.soin-visuel{ position:relative; aspect-ratio:1; overflow:hidden }
.soin-visuel::after{ content:""; position:absolute; inset:auto 0 0; height:40%; background:linear-gradient(transparent, var(--surface)) }
.soin-visuel img{ width:100%; height:100%; object-fit:cover; transition:transform 1.2s var(--sortie) }
.soin:hover .soin-visuel img{ transform:scale(1.05) translateY(-2%) }
.soin-num{ position:absolute; z-index:2; top:18px; left:20px; font:400 0.78rem var(--mono); color:var(--encre-pale) }
.soin-corps{ padding:0 24px 26px; display:flex; flex-direction:column; gap:12px; flex:1 }
.soin h3{ font-size:1.6rem; letter-spacing:-0.035em }
.soin p{ margin:0; color:var(--encre-douce); font-size:0.95rem }
.soin .pilules{ margin-top:auto; padding-top:8px }
.soin .pilules li{ background:var(--fond); border-color:transparent; box-shadow:none }
.mention{ margin-top:var(--e-xl); font-size:0.88rem; color:var(--encre-pale); max-width:70ch }

/* parcours : une ligne et quatre points */
.parcours{ background:var(--surface); border-block:1px solid var(--trait) }
.etapes{ position:relative; list-style:none; margin:var(--e-3xl) 0 0; padding:0; display:grid; grid-template-columns:repeat(4, minmax(0,1fr)); gap:var(--e-lg) }
.etapes::before, .etapes::after{ content:""; position:absolute; left:0; right:0; top:6px; height:1px; background:var(--trait-fort) }
.etapes::after{ background:var(--marque); transform-origin:left; transform:scaleX(var(--p, 0)); transition:transform 120ms linear }
.etape{ position:relative; padding-top:42px }
.etape::before{ content:""; position:absolute; top:0; left:0; width:13px; height:13px; border-radius:50%; background:var(--surface); border:1.5px solid var(--trait-fort); transition:border-color 400ms, background 400ms, box-shadow 400ms }
.etape.active::before{ background:var(--marque); border-color:var(--marque); box-shadow:0 0 0 6px var(--marque-pale) }
.etape .repere{ margin-bottom:var(--e-md) }
.etape h3{ font-size:1.25rem }
.etape p{ margin:10px 0 0; color:var(--encre-douce); font-size:0.95rem; max-width:32ch }

/* équipe */
.filtres{ display:flex; flex-wrap:wrap; gap:6px; margin-bottom:var(--e-lg) }
.filtre{ font:400 0.88rem var(--titre); padding:10px 16px; border-radius:100px; cursor:pointer; border:1px solid var(--trait-fort); background:var(--surface); color:var(--encre); transition:all 300ms var(--sortie) }
.filtre:hover{ border-color:var(--encre) }
.filtre[aria-pressed="true"]{ background:var(--encre); border-color:var(--encre); color:var(--surface) }
.filtre .compte{ font-family:var(--mono); font-size:0.78rem; margin-left:6px; opacity:0.6 }
.praticiens{ list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(4, minmax(0,1fr)); gap:12px }
.praticien{
  view-transition-name:var(--vt); position:relative; display:flex; flex-direction:column; gap:14px; padding:22px; border-radius:var(--r-md);
  background:var(--surface); box-shadow:0 0 0 1px var(--trait); transition:transform 500ms var(--sortie), box-shadow 500ms var(--sortie);
}
.praticien:hover{ transform:translateY(-4px); box-shadow:0 0 0 1px var(--trait), var(--ombre) }
.praticien[hidden]{ display:none }
.initiales{ width:52px; height:52px; border-radius:50%; display:grid; place-items:center; font:500 1rem var(--titre); letter-spacing:-0.02em; color:var(--marque); background:var(--marque-pale) }
.praticien b{ display:block; font-weight:500; font-size:1.02rem; line-height:1.25; letter-spacing:-0.015em }
.praticien small{ display:block; margin-top:4px; font:400 0.76rem var(--mono); color:var(--encre-pale) }
.langues{ display:flex; flex-wrap:wrap; align-items:center; gap:10px 16px; margin-top:var(--e-xl); padding:20px 24px; border-radius:var(--r-md); background:var(--surface); box-shadow:0 0 0 1px var(--trait) }
.langues p{ margin:0; font-size:0.95rem; color:var(--encre-douce); flex:1 1 280px }

/* prise en charge */
.charge-grille{ display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:12px }
.carte{ padding:28px; border-radius:var(--r-lg); background:var(--surface); box-shadow:0 0 0 1px var(--trait); display:flex; flex-direction:column; gap:12px }
.carte .repere{ margin-bottom:var(--e-lg) }
.carte h3{ font-size:1.5rem; letter-spacing:-0.035em }
.carte p{ margin:0; color:var(--encre-douce); font-size:0.95rem }

/* accès */
.acces-grille{ display:grid; grid-template-columns:minmax(0,0.85fr) minmax(0,1.15fr); gap:12px }
.acces-photo{ position:relative; margin:0; border-radius:var(--r-lg); overflow:hidden; min-height:420px; box-shadow:0 0 0 1px var(--trait) }
.acces-photo img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover }
.acces-photo figcaption{ position:absolute; left:14px; right:14px; bottom:14px; display:flex; justify-content:space-between; align-items:center; gap:12px; padding:14px 16px; border-radius:18px;
  background:color-mix(in oklab, var(--surface) 86%, transparent); backdrop-filter:blur(14px); font-size:0.9rem }
.acces-photo figcaption b{ display:block; font-weight:500 }
.acces-photo figcaption small{ font:400 0.76rem var(--mono); color:var(--encre-douce) }
.acces-infos{ display:grid; gap:12px; align-content:start }
.bloc{ padding:24px; border-radius:var(--r-lg); background:var(--surface); box-shadow:0 0 0 1px var(--trait) }
.bloc h3{ font-size:1.05rem; font-weight:500; margin-bottom:var(--e-md) }
.bloc-titre{ display:flex; justify-content:space-between; align-items:baseline; gap:12px; margin-bottom:var(--e-md) }
.bloc-titre h3{ margin:0 }
.deux{ display:grid; grid-template-columns:minmax(0,0.85fr) minmax(0,1.15fr); gap:12px }
@media (max-width:1280px){ .deux{ grid-template-columns:1fr } }
.transports{ list-style:none; margin:0; padding:0; display:grid; gap:14px }
.transports li{ display:grid; grid-template-columns:auto 1fr; gap:14px; align-items:center }
.lignes{ display:flex; gap:4px }
.ligne-tc{ min-width:36px; height:26px; padding:0 7px; border-radius:7px; display:inline-grid; place-items:center; font:600 0.78rem var(--titre); color:#fff }
.ligne-tc.tram{ background:oklch(0.50 0.12 300) } .ligne-tc.bus{ background:oklch(0.52 0.14 25) } .ligne-tc.parking{ background:oklch(0.48 0.10 250) }
.transports b{ display:block; font-weight:500; font-size:0.95rem }
.transports .detail{ display:block; font-size:0.85rem; color:var(--encre-douce); line-height:1.4 }
.horaires{ margin:0; padding:0; list-style:none }
.horaires li{ display:flex; justify-content:space-between; gap:var(--e-md); padding:9px 0; border-bottom:1px solid var(--trait); font:400 0.88rem var(--mono) }
.horaires li:last-child{ border-bottom:0 }
.horaires .repos{ color:var(--encre-pale) }
.horaires li.aujourdhui{ color:var(--marque); font-weight:500 }
.contact-liste{ list-style:none; margin:0; padding:0 }
.contact-liste li{ display:grid; grid-template-columns:84px 1fr; gap:var(--e-md); padding:9px 0; border-bottom:1px solid var(--trait); font-size:0.92rem }
.contact-liste li:last-child{ border-bottom:0 }
.contact-liste .intitule{ font:400 0.76rem/1.9 var(--mono); color:var(--encre-pale) }
.contact-liste a{ font-weight:500 }
.urgences{ display:flex; gap:14px; padding:20px 22px; border-radius:var(--r-lg); background:var(--alerte-pale); box-shadow:0 0 0 1px color-mix(in oklab, var(--alerte) 20%, transparent) }
.urgences svg{ color:var(--alerte); flex:none }
.urgences p{ margin:0; font-size:0.92rem }
.urgences b{ color:var(--alerte) }

/* FAQ */
.faq-grille{ display:grid; grid-template-columns:minmax(0,0.8fr) minmax(0,1.2fr); gap:var(--e-3xl); align-items:start }
.faq-grille .tete{ display:block; margin:0; position:sticky; top:110px }
.faq-grille .tete .chapo{ margin-top:var(--e-md); justify-self:start }
.faq{ display:grid; gap:8px }
.faq-item{ border-radius:var(--r-md); background:var(--surface); box-shadow:0 0 0 1px var(--trait) }
.faq-q{ all:unset; box-sizing:border-box; width:100%; cursor:pointer; display:flex; justify-content:space-between; align-items:center; gap:var(--e-md); padding:20px 22px; font:500 1.02rem/1.35 var(--titre); letter-spacing:-0.015em; color:var(--encre) }
.faq-q:focus-visible{ outline:2px solid var(--marque); outline-offset:2px; border-radius:var(--r-md) }
.faq-q .plus{ width:32px; height:32px; border-radius:50%; flex:none; display:grid; place-items:center; background:var(--fond); transition:transform 500ms var(--sortie), background 300ms, color 300ms }
.faq-q[aria-expanded="true"] .plus{ transform:rotate(45deg); background:var(--marque); color:var(--sur-marque) }
.faq-r{ display:grid; grid-template-rows:0fr; visibility:hidden; transition:grid-template-rows 500ms var(--sortie), visibility 0s linear 500ms }
.faq-q[aria-expanded="true"] + .faq-r{ grid-template-rows:1fr; visibility:visible; transition:grid-template-rows 500ms var(--sortie) }
.faq-r > div{ overflow:hidden }
.faq-r p{ margin:0; padding:0 22px 22px; color:var(--encre-douce); font-size:0.95rem }

/* appel final : même panneau que l'ouverture */
.final{ padding:0 10px 10px }
.final-panneau{
  position:relative; overflow:hidden; isolation:isolate; border-radius:var(--r-xl); background:var(--surface); box-shadow:0 0 0 1px var(--trait);
  display:grid; grid-template-columns:minmax(0,1.2fr) minmax(0,0.8fr); align-items:end; gap:var(--e-xl); padding:clamp(40px, 7vw, 96px) clamp(18px, 4vw, 64px);
}
.final-panneau::after{ content:""; position:absolute; z-index:-1; inset:-20% -10% -60% 30%; background:radial-gradient(50% 50% at 70% 70%, color-mix(in oklab, var(--marque-voile) 80%, transparent), transparent 70%) }
.final-panneau h2{ font-size:clamp(2.4rem, 5.6vw, 5rem); letter-spacing:-0.05em; line-height:0.98 }
.final-panneau h2 .doux{ color:var(--encre-pale) }
.final-actions{ display:grid; gap:var(--e-md); justify-items:start }
.final-actions p{ margin:0; color:var(--encre-douce); max-width:36ch }
.final-dent{ position:absolute; z-index:-1; right:clamp(-60px, -3vw, -20px); bottom:-22%; width:min(34vw, 400px); pointer-events:none;
  -webkit-mask-image:radial-gradient(50% 50% at 50% 50%, #000 55%, transparent 100%); mask-image:radial-gradient(50% 50% at 50% 50%, #000 55%, transparent 100%) }

/* pied de page */
.pied{ padding:var(--e-3xl) 0 var(--e-lg) }
.pied-grille{ display:grid; grid-template-columns:1.6fr 1fr 1fr 1fr; gap:var(--e-xl); padding-bottom:var(--e-2xl); border-bottom:1px solid var(--trait) }
.pied h4{ margin:0 0 var(--e-md); font:400 0.76rem var(--mono); color:var(--encre-pale) }
.pied ul{ list-style:none; margin:0; padding:0; display:grid; gap:8px; font-size:0.92rem }
.pied a{ color:var(--encre); text-decoration:none }
.pied a:hover{ color:var(--marque) }
.pied-geant{ margin:var(--e-xl) 0 var(--e-md); font:500 clamp(3rem, 12.4vw, 11.5rem)/0.86 var(--titre); letter-spacing:-0.065em; color:var(--fond-2); white-space:nowrap; overflow:hidden; user-select:none }
.pied-bas{ display:flex; justify-content:space-between; flex-wrap:wrap; gap:var(--e-md); font:400 0.76rem var(--mono); color:var(--encre-pale) }

.barre-mobile{ display:none }

/* =====================================================================
   ANIMATIONS
   ===================================================================== */
.js .monte > span{ transform:translateY(105%); animation:monter 1.1s var(--sortie) forwards; animation-delay:var(--d, 0s) }
@keyframes monter{ to{ transform:none } }
.js .apparait{ opacity:0; transform:translateY(14px); animation:apparaitre 1s var(--sortie) forwards; animation-delay:var(--d, .4s) }
@keyframes apparaitre{ to{ opacity:1; transform:none } }
.js .rendu-img{ opacity:0; transform:translateY(40px) scale(0.96); animation:poser 1.6s var(--sortie) .2s forwards }
@keyframes poser{ to{ opacity:1; transform:none } }
.js .rendu-filets path{ stroke-dashoffset:1; animation:tracer 1.2s var(--sortie) forwards; animation-delay:var(--d, 1.1s) }
@keyframes tracer{ to{ stroke-dashoffset:0 } }
.js .rendu-filets circle, .js .point{ opacity:0; animation:apparaitre .6s var(--sortie) forwards; animation-delay:var(--d, 1s) }
.js .pilules.cascade li{ opacity:0; transform:translateY(8px) scale(0.96); animation:apparaitre .7s var(--sortie) forwards; animation-delay:calc(1.2s + var(--i, 0) * 70ms) }
.js .trace path, .js .trace circle{ stroke-dasharray:1; stroke-dashoffset:1; animation:tracer 1.4s var(--sortie) forwards }
.js .trace :nth-child(2){ animation-delay:.12s } .js .trace :nth-child(3){ animation-delay:.24s }

.js .venir{ opacity:0; transform:translateY(24px); transition:opacity 900ms var(--sortie), transform 900ms var(--sortie); transition-delay:var(--d, 0s) }
.js .venir.la{ opacity:1; transform:none }

@media (prefers-reduced-motion:reduce){
  html{ scroll-behavior:auto }
  *, *::before, *::after{ animation-duration:0.01ms !important; animation-delay:0s !important; animation-iteration-count:1 !important; transition-duration:0.01ms !important }
  .js .venir{ opacity:1; transform:none }
}

/* =====================================================================
   ADAPTATIONS
   ===================================================================== */
@media (max-width:1200px){
  .ouverture{ grid-template-columns:minmax(0,1.1fr) minmax(0,0.9fr) }
  .ouverture-cote{ grid-column:1 / -1; flex-direction:row; align-items:center; justify-content:space-between; text-align:left; padding-bottom:var(--e-lg) }
  .ouverture-cote .pilules{ justify-content:flex-end }
  .note-1{ left:auto; right:-2%; text-align:right }
  .note-2{ right:auto; left:2%; text-align:left; top:59% }
  .praticiens{ grid-template-columns:repeat(3, minmax(0,1fr)) }
}
@media (max-width:1060px){
  .entete .menu, .entete .entete-actions .bouton-trait{ display:none }
  .barre-haut .menu{ display:none }
  .hamburger{ display:grid }
  .menu.mobile{
    display:flex; position:fixed; inset:0; z-index:90; flex-direction:column; justify-content:center; gap:0; padding:96px var(--gouttiere) 40px;
    background:var(--surface); clip-path:circle(0 at calc(100% - 46px) 46px); visibility:hidden;
    transition:clip-path 700ms var(--sortie), visibility 0s linear 700ms;
  }
  .menu.mobile.ouvert{ clip-path:circle(150% at calc(100% - 46px) 46px); visibility:visible; transition:clip-path 800ms var(--sortie) }
  .menu.mobile a{ padding:14px 0; border-radius:0; border-bottom:1px solid var(--trait); font-size:clamp(1.8rem, 7vw, 2.6rem); letter-spacing:-0.045em }
  .menu.mobile a:hover{ background:none }
  .fermer-menu{ position:absolute; top:22px; right:var(--gouttiere) }
}
@media (min-width:1061px){ .menu.mobile{ display:none } }
@media (max-width:900px){
  .ouverture{ grid-template-columns:1fr }
  .ouverture-texte{ padding-bottom:0 }
  .rendu{ width:min(92%, 440px) }
  .ouverture-cote{ flex-direction:column; align-items:flex-start }
  .ouverture-cote .pilules{ justify-content:flex-start }
  .tete, .faq-grille, .acces-grille, .final-panneau{ grid-template-columns:1fr }
  .tete .chapo{ justify-self:start }
  .faq-grille .tete{ position:static }
  .soins-grille, .charge-grille{ grid-template-columns:1fr }
  .soin{ display:grid; grid-template-columns:minmax(0,0.8fr) minmax(0,1.2fr) }
  .soin-visuel::after{ display:none }
  .soin-corps{ padding:24px 24px 24px 0 }
  .etapes{ grid-template-columns:1fr 1fr; row-gap:var(--e-2xl) }
  .etapes::before, .etapes::after{ display:none }
  .praticiens{ grid-template-columns:repeat(2, minmax(0,1fr)) }
  .pied-grille{ grid-template-columns:1fr 1fr }
  .final-dent{ width:min(70vw, 360px); bottom:-20%; opacity:0.6 }
}
@media (max-width:640px){
  body{ padding-bottom:84px }
  .scene{ padding:6px }
  .panneau-haut{ border-radius:24px; min-height:auto }
  .entete{ padding:14px 14px }
  .entete .entete-actions .cta{ display:none }
  .monogramme{ width:46px } .marque b{ font-size:0.94rem }
  .ouverture{ padding:8px 16px 0 }
  .ouverture h1{ font-size:clamp(2.6rem, 12.5vw, 3.6rem) }
  .ouverture-bas{ margin-top:var(--e-xl) }
  .note{ font-size:0.68rem } .note-1{ top:6% } .note-2{ top:62% }
  .panneau-pied{ grid-template-columns:1fr; gap:6px; margin:0 16px }
  .panneau-pied span:nth-child(n){ text-align:left }
  .soin{ grid-template-columns:1fr }
  .soin-corps{ padding:0 22px 24px }
  .etapes{ grid-template-columns:1fr }
  .praticiens{ grid-template-columns:1fr 1fr; gap:8px }
  .praticien{ padding:16px }
  .contact-liste li{ grid-template-columns:1fr; gap:0 }
  .acces-photo{ min-height:340px }
  .final{ padding:0 6px 6px }
  .pied-grille{ grid-template-columns:1fr }
  .barre-haut{ display:none }
  .barre-mobile{
    display:flex; gap:6px; position:fixed; z-index:80; left:8px; right:8px; bottom:8px; padding:6px; padding-bottom:calc(6px + env(safe-area-inset-bottom));
    border-radius:100px; background:color-mix(in oklab, var(--surface) 86%, transparent); backdrop-filter:blur(16px) saturate(170%);
    box-shadow:0 0 0 1px var(--trait), var(--ombre); transform:translateY(150%); transition:transform 600ms var(--sortie);
  }
  .barre-mobile.visible{ transform:none }
  .barre-mobile .bouton{ flex:1; padding:14px 10px }
  .barre-mobile .appel{ flex:0 0 auto }
}