/* ==========================================================================
   CENTRE DENTAIRE SAN FRANCISCO — Design system (accueil complet)
   Sans JavaScript · Mobile first
   ========================================================================== */

/* 1. RESET ---------------------------------------------------------------- */
*,*::before,*::after{box-sizing:border-box;} *{margin:0;}
html,body{overflow-x:hidden;} html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;}
body{min-height:100vh;line-height:1.5;}
img,picture{max-width:100%;display:block;}
input,button,textarea,select{font:inherit;} a{color:inherit;text-decoration:none;} ul{list-style:none;padding:0;}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;scroll-behavior:auto!important;}}

/* 2. TOKENS --------------------------------------------------------------- */
:root{
  --navy-h1:#06245A; --navy:#062760; --navy-nav:#071F50;
  --slate-baseline:#617BA8; --slate-desc:#4F6384;
  --color-blue:#4686CA; --color-sky:#B7DEF2; --color-sage:#3F8F7A; --color-text:#1C2733;
  --bg:#F9FCFF; --white:#FFFFFF;
  --font-body:'Manrope',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  --font-accent:'Instrument Serif',Georgia,serif;
  --space-2:8px;--space-3:12px;--space-4:16px;--space-5:24px;--space-6:32px;--space-7:44px;--space-8:60px;
  --container-max:1400px; --hero-max:1800px; --side-pad:20px; --sec-pad:28px;
  --radius-pill:999px; --radius-card:22px;
  --shadow-badge:0 12px 34px rgba(6,39,96,.14);
  --shadow-card:0 14px 40px rgba(6,39,96,.10);
  --shadow-soft:0 8px 26px rgba(6,39,96,.07);
  --shadow-nav-panel:0 18px 44px rgba(6,39,96,.14);
}
@media (min-width:641px){:root{--side-pad:30px;}}
@media (min-width:901px){:root{--side-pad:60px; --sec-pad:40px;}}

/* 3. BASE ----------------------------------------------------------------- */
body{font-family:var(--font-body);color:var(--color-text);background:var(--bg);font-size:16px;-webkit-font-smoothing:antialiased;}
h1,h2,h3{font-family:var(--font-body);color:var(--navy-h1);line-height:1.1;}
.container{width:100%;max-width:var(--container-max);margin-inline:auto;padding-inline:var(--side-pad);}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0;}
.icon{width:20px;height:20px;flex-shrink:0;}
a:focus-visible,button:focus-visible,summary:focus-visible,.nav-toggle-btn:focus-within{outline:2px solid var(--color-blue);outline-offset:3px;border-radius:4px;}

/* 4. BOUTONS -------------------------------------------------------------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:9px;font-family:var(--font-body);font-weight:600;font-size:.95rem;white-space:nowrap;border:1px solid transparent;border-radius:var(--radius-pill);cursor:pointer;transition:transform .2s ease,background-color .2s ease,border-color .2s ease;}
.btn-primary{background:var(--navy);color:var(--white);padding:14px 26px;}
.btn-primary:hover{background:#0a2f74;transform:translateY(-1px);}
.btn-ghost{background:rgba(255,255,255,.75);color:var(--navy);border-color:rgba(70,134,202,.35);padding:14px 24px;backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px);}
.btn-ghost:hover{background:var(--white);border-color:rgba(70,134,202,.6);transform:translateY(-1px);}

/* Surlignage animé premium */
.mark{position:relative;color:var(--navy);font-weight:500;white-space:nowrap;}
.mark::before{content:'';position:absolute;left:-.1em;right:-.1em;bottom:.04em;height:.5em;z-index:-1;background:linear-gradient(120deg,rgba(183,222,242,.9),rgba(150,200,245,.75));border-radius:3px;transform-origin:left center;transform:scaleX(0);animation:mark-in .9s cubic-bezier(.6,.02,.2,1) .35s forwards;}
@keyframes mark-in{to{transform:scaleX(1);}}
/* Variante multi-mots : le surlignage suit les retours à la ligne */
.mark-flow{color:var(--navy);font-weight:500;padding:0 .1em;background-image:linear-gradient(120deg,rgba(183,222,242,.9),rgba(150,200,245,.75));background-repeat:no-repeat;background-position:0 .82em;background-size:0 .5em;-webkit-box-decoration-break:clone;box-decoration-break:clone;animation:mark-flow-in .9s cubic-bezier(.6,.02,.2,1) .35s forwards;}
@keyframes mark-flow-in{to{background-size:100% .5em;}}
@media(prefers-reduced-motion:reduce){.mark::before{transform:scaleX(1);}.mark-flow{background-size:100% .5em;}}

/* 5. HERO ----------------------------------------------------------------- */
.hero{--ribbon-h:58px;position:relative;width:calc(100% - 32px);max-width:var(--hero-max);margin:16px auto 0;border-radius:28px;overflow:hidden;background:var(--bg);isolation:isolate;}
.hero-photo{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:62% 50%;z-index:-2;}
.hero-veil{position:absolute;inset:0;z-index:-1;pointer-events:none;background:radial-gradient(38% 30% at 20% 22%,rgba(120,175,235,.22),transparent 70%),radial-gradient(30% 26% at 82% 16%,rgba(150,200,245,.30),transparent 70%),linear-gradient(180deg,rgba(249,252,255,.98) 0%,rgba(249,252,255,.95) 48%,rgba(249,252,255,.72) 72%,rgba(249,252,255,.22) 100%);}
.hero-content{position:relative;z-index:10;display:flex;flex-direction:column;padding:128px var(--side-pad) calc(34px + var(--ribbon-h));}
.hero-title{font-weight:800;font-size:clamp(2.9rem,8.5vw,3.6rem);letter-spacing:-.045em;line-height:1;color:var(--navy-h1);}
.hero-baseline{margin-top:var(--space-4);font-weight:400;font-size:clamp(1.55rem,5.4vw,2rem);line-height:1.2;letter-spacing:-.025em;color:var(--slate-baseline);}
.hero-desc{margin-top:var(--space-5);font-weight:400;font-size:1.08rem;line-height:1.5;color:var(--slate-desc);max-width:32ch;}
.hero-actions{display:flex;flex-wrap:wrap;gap:var(--space-3);margin-top:var(--space-6);}
.hero-badge{display:none;position:absolute;z-index:15;top:88px;right:var(--side-pad);align-items:center;gap:10px;transition:transform .2s ease,background-color .2s ease,border-color .2s ease;background:rgba(255,255,255,.55);backdrop-filter:blur(14px) saturate(140%);-webkit-backdrop-filter:blur(14px) saturate(140%);border:1px solid rgba(255,255,255,.55);border-radius:18px;padding:10px 15px;box-shadow:0 4px 16px rgba(6,39,96,.06);}
.hero-badge-rating{display:flex;align-items:center;gap:5px;font-size:.83rem;font-weight:700;color:var(--navy);white-space:nowrap;}
.hero-badge-sub{font-size:.76rem;color:var(--slate-desc);}
.hero-badge:hover{background:rgba(255,255,255,.72);border-color:rgba(255,255,255,.7);transform:translateY(-2px);}

/* 6. NAVBAR (cadre translucide, plus transparent) ------------------------- */
.hero-header{position:absolute;top:14px;left:var(--side-pad);right:var(--side-pad);z-index:30;display:flex;align-items:center;justify-content:space-between;gap:var(--space-4);padding:8px 10px 8px 18px;border-radius:16px;background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.34);backdrop-filter:blur(14px) saturate(140%);-webkit-backdrop-filter:blur(14px) saturate(140%);box-shadow:0 4px 18px rgba(6,39,96,.04);}
.brand{display:flex;flex-direction:column;align-items:center;text-align:center;font-weight:700;font-size:.98rem;line-height:1.1;color:var(--navy-h1);letter-spacing:-.012em;}
.brand span{white-space:nowrap;}
.btn-rdv{padding:10px 18px;font-size:.82rem;}
.nav-checkbox{position:absolute;opacity:0;width:1px;height:1px;pointer-events:none;}
.nav-toggle-btn{display:flex;align-items:center;justify-content:center;width:38px;height:38px;cursor:pointer;border-radius:10px;}
.burger{position:relative;width:22px;height:14px;display:block;}
.burger span{position:absolute;left:0;width:100%;height:2px;border-radius:2px;background:var(--navy-nav);transition:transform .25s ease,opacity .25s ease;}
.burger span:nth-child(1){top:0;}.burger span:nth-child(2){top:6px;}.burger span:nth-child(3){top:12px;}
.nav-checkbox:checked~.nav-toggle-btn .burger span:nth-child(1){transform:translateY(6px) rotate(45deg);}
.nav-checkbox:checked~.nav-toggle-btn .burger span:nth-child(2){opacity:0;}
.nav-checkbox:checked~.nav-toggle-btn .burger span:nth-child(3){transform:translateY(-6px) rotate(-45deg);}
.main-nav{position:absolute;top:calc(100% + 10px);right:0;min-width:250px;background:var(--white);border-radius:18px;box-shadow:var(--shadow-nav-panel);padding:var(--space-4);display:none;}
.nav-checkbox:checked~.main-nav{display:block;}
.nav-list{display:flex;flex-direction:column;gap:2px;}
.nav-list>li>a{display:block;padding:12px;border-radius:10px;font-weight:500;font-size:1rem;color:var(--navy-nav);}
.nav-list>li>a:hover{background:var(--bg);}
.nav-dropdown summary{display:flex;align-items:center;gap:6px;padding:12px;border-radius:10px;font-weight:500;font-size:1rem;color:var(--navy-nav);cursor:pointer;list-style:none;}
.nav-dropdown summary::-webkit-details-marker{display:none;}
.nav-dropdown summary::after{content:'';width:7px;height:7px;border-right:1.6px solid currentColor;border-bottom:1.6px solid currentColor;transform:rotate(45deg);margin-top:-3px;transition:transform .2s ease;}
.nav-dropdown[open] summary::after{transform:rotate(-135deg);margin-top:3px;}
.dropdown-menu{padding:4px 0 6px 12px;display:flex;flex-direction:column;gap:1px;}
.dropdown-menu a{display:block;padding:9px 12px;border-radius:8px;font-size:.94rem;color:var(--slate-desc);}
.dropdown-menu a:hover{background:var(--bg);color:var(--navy);}

/* 7. SECTIONS ------------------------------------------------------------- */
.section{width:100%;max-width:var(--container-max);margin-inline:auto;padding:var(--sec-pad) var(--side-pad);}
.section-eyebrow{font-weight:600;font-size:.8rem;letter-spacing:.14em;text-transform:uppercase;color:var(--color-sage);}
.title-soft{font-weight:400;font-size:clamp(1.7rem,4.4vw,2.35rem);line-height:1.14;letter-spacing:-.025em;color:var(--slate-baseline);}
.head-center{text-align:center;max-width:680px;margin:0 auto var(--space-5);}
.head-center .section-eyebrow{display:block;}
.head-center .title-soft{margin-top:12px;}
.head-center .sub{margin-top:10px;font-size:1.02rem;line-height:1.55;color:var(--slate-desc);}
.head-left{max-width:860px;margin-bottom:var(--space-5);}
.head-left .section-eyebrow{display:block;margin-bottom:10px;}

/* 8. NOS SOINS (bento, compact) ------------------------------------------- */
.soins-grid{display:grid;grid-template-columns:1fr;gap:var(--space-3);}
.soin-card{position:relative;background:var(--white);border:1px solid rgba(6,39,96,.06);border-radius:18px;box-shadow:var(--shadow-soft);padding:18px 20px;overflow:hidden;}
.soin-num{font-weight:700;font-size:.9rem;color:var(--color-sage);}
.soin-name{margin-top:3px;font-weight:700;font-size:1.18rem;color:var(--navy-h1);letter-spacing:-.01em;}
.soin-desc{margin-top:7px;font-size:.9rem;line-height:1.45;color:var(--slate-desc);max-width:34ch;}
.soin-ic{position:absolute;top:18px;right:18px;width:46px;height:46px;border-radius:999px;background:var(--bg);border:1px solid rgba(6,39,96,.06);display:flex;align-items:center;justify-content:center;color:var(--navy);}
.soin-ic svg{width:22px;height:22px;}
.soin-feature{padding:0;min-height:280px;display:flex;}
.soin-feature .feat-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:right center;z-index:0;}
.soin-feature .feat-veil{position:absolute;inset:0;z-index:1;background:linear-gradient(90deg,rgba(255,255,255,.97) 0%,rgba(255,255,255,.9) 34%,rgba(255,255,255,.5) 58%,rgba(255,255,255,.05) 82%);}
.soin-feature .feat-body{position:relative;z-index:2;display:flex;flex-direction:column;padding:20px;width:100%;}
.feat-badge{align-self:flex-start;display:inline-flex;align-items:center;gap:6px;background:var(--navy);color:#fff;font-weight:600;font-size:.7rem;letter-spacing:.03em;padding:5px 11px;border-radius:999px;margin-bottom:12px;}
.feat-badge svg{width:12px;height:12px;}
.soin-feature .soin-name{font-size:1.55rem;margin-top:4px;}
.feat-priority{margin-top:auto;display:flex;align-items:center;gap:12px;padding-top:18px;}
.feat-priority .soin-ic{position:static;width:46px;height:46px;}
.feat-priority p{font-size:.86rem;line-height:1.4;color:var(--slate-desc);}
.feat-priority strong{color:var(--navy-h1);}
.soins-foot{display:flex;flex-wrap:wrap;justify-content:center;gap:12px var(--space-6);margin-top:var(--space-5);padding-top:var(--space-4);border-top:1px solid rgba(6,39,96,.08);}
.soins-foot li{display:flex;align-items:center;gap:9px;font-size:.88rem;color:var(--slate-desc);}
.soins-foot svg{width:18px;height:18px;color:var(--color-sage);}

/* 9. AVANT / APRÈS -------------------------------------------------------- */
.ba-head{display:flex;align-items:flex-end;justify-content:space-between;gap:var(--space-5);margin-bottom:var(--space-5);flex-wrap:wrap;}
.ba-head .section-eyebrow{display:block;margin-bottom:10px;}
.ba-nav{display:flex;gap:10px;}
.ba-nav a{display:inline-flex;align-items:center;justify-content:center;width:50px;height:50px;border-radius:999px;background:var(--white);border:1px solid rgba(6,39,96,.12);box-shadow:var(--shadow-card);color:var(--navy);transition:transform .2s ease,background-color .2s ease;}
.ba-nav a:hover{background:var(--color-sage);color:#fff;border-color:transparent;transform:translateY(-1px);}
.ba-nav svg{width:20px;height:20px;}
.ba-scroller{display:grid;grid-auto-flow:column;grid-auto-columns:82%;gap:var(--space-4);overflow-x:auto;scroll-snap-type:x mandatory;padding-bottom:6px;scrollbar-width:none;}
.ba-scroller::-webkit-scrollbar{display:none;}
.ba-card{scroll-snap-align:start;display:flex;flex-direction:column;gap:10px;}
.ba-frame{position:relative;aspect-ratio:4/3;border-radius:16px;overflow:hidden;box-shadow:var(--shadow-card);--p:50%;animation:ba-glide 10s ease-in-out infinite alternate;}
.ba-card:nth-child(2) .ba-frame{animation-delay:-.8s;}.ba-card:nth-child(3) .ba-frame{animation-delay:-1.6s;}
.ba-card:nth-child(4) .ba-frame{animation-delay:-2.3s;}.ba-card:nth-child(5) .ba-frame{animation-delay:-3.1s;}
.ba-card:nth-child(6) .ba-frame{animation-delay:-3.9s;}.ba-card:nth-child(7) .ba-frame{animation-delay:-4.7s;}
.ba-card:nth-child(8) .ba-frame{animation-delay:-5.4s;}.ba-card:nth-child(9) .ba-frame{animation-delay:-6.2s;}
.ba-before,.ba-after{position:absolute;inset:0;background:#E9F3FB;}
.ba-after{clip-path:inset(0 0 0 var(--p));}
.ba-before img,.ba-after img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;}
.ba-tag{position:absolute;top:12px;z-index:3;font-size:.66rem;font-weight:700;letter-spacing:.08em;padding:5px 11px;border-radius:999px;}
.ba-tag-before{left:12px;background:rgba(6,39,96,.82);color:#fff;}
.ba-tag-after{right:12px;background:var(--color-sage);color:#fff;}
.ba-divider{position:absolute;top:0;bottom:0;left:var(--p);width:2px;background:rgba(255,255,255,.9);z-index:4;transform:translateX(-1px);}
.ba-handle{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:42px;height:42px;border-radius:999px;background:var(--white);box-shadow:0 6px 18px rgba(6,39,96,.28);display:flex;align-items:center;justify-content:center;}
.ba-handle svg{width:18px;height:18px;color:var(--navy);}
.ba-caption{font-size:.76rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--slate-baseline);}
@property --p{syntax:'<percentage>';inherits:true;initial-value:50%;}
@keyframes ba-glide{from{--p:18%;}to{--p:78%;}}

/* 10. NOS CHIFFRES -------------------------------------------------------- */
.stats{background:radial-gradient(40% 60% at 15% 30%,rgba(150,200,245,.18),transparent 70%),radial-gradient(40% 60% at 85% 40%,rgba(120,175,235,.16),transparent 70%),var(--bg);}
.stats-inner{display:grid;grid-template-columns:1fr 1fr;gap:var(--space-4);}
.stat{position:relative;display:flex;align-items:center;justify-content:center;min-height:80px;}
.stat-num{font-weight:800;font-size:clamp(3rem,11vw,4.8rem);line-height:1;color:rgba(70,134,202,.26);letter-spacing:-.03em;display:inline-flex;align-items:center;}
.stat-inf{font-size:1.34em;line-height:0;margin-left:.02em;position:relative;top:-.028em;}
.stat-label{position:absolute;left:0;right:0;top:50%;transform:translateY(-50%);text-align:center;font-weight:700;font-size:clamp(1.05rem,3.4vw,1.4rem);color:var(--navy-h1);}

/* 11. SECTIONS SPLIT (Centre / Chirurgienne) ------------------------------ */
.split{display:grid;grid-template-columns:1fr;gap:var(--space-5);align-items:center;}
/* sans cela, la largeur intrinsèque des images impose sa loi à la grille */
.split>*{min-width:0;}
.split-text .section-eyebrow{display:block;margin-bottom:12px;}
.split-text .title-soft{margin-bottom:14px;}
.split-text p{color:var(--slate-desc);line-height:1.65;font-size:1.02rem;}
.split-text p+p{margin-top:12px;}
.split-text .btn{margin-top:20px;}
@media(min-width:900px){
  .split{grid-template-columns:1fr 1fr;gap:var(--space-7);}
  .split.reverse .split-media{order:2;}
  /* En dessous de 1200px, deux colonnes laissent trop peu de largeur : la
     mosaïque devient élancée et le texte s'allonge. La section repasse sur une
     seule colonne, mosaïque centrée à largeur bornée. */
  #cabinet .split{grid-template-columns:1fr;}
}

/* Mosaïque « Notre Centre » — 4 tuiles, chacune au format de sa photo.
   Sur desktop elle épouse la hauteur de la colonne de texte (voir .split). */
.mosaic{display:grid;min-width:0;gap:10px;grid-template-columns:1.24fr 1fr;grid-template-rows:repeat(5,1fr);
  grid-template-areas:"a b" "a b" "a c" "d c" "d c";aspect-ratio:1/1.12;
  max-width:520px;margin-inline:auto;}
.tile-a{grid-area:a;} .tile-b{grid-area:b;} .tile-c{grid-area:c;} .tile-d{grid-area:d;}
.tile{position:relative;display:block;min-width:0;overflow:hidden;border-radius:18px;background:#E9F3FB;
  box-shadow:var(--shadow-soft);
  transition:transform .5s cubic-bezier(.22,.61,.36,1),box-shadow .5s cubic-bezier(.22,.61,.36,1);}
.tile img{width:100%;height:100%;object-fit:cover;transition:transform .7s cubic-bezier(.22,.61,.36,1);}
.tile-veil{position:absolute;inset:0;opacity:.85;transition:opacity .45s ease;
  background:linear-gradient(180deg,rgba(6,36,90,0) 45%,rgba(6,36,90,.62) 100%);}
.tile-cap{position:absolute;left:0;right:0;bottom:0;z-index:2;display:flex;align-items:baseline;gap:8px;
  padding:16px 14px 13px;color:#fff;opacity:.94;transform:translateY(4px);
  transition:transform .45s cubic-bezier(.22,.61,.36,1),opacity .45s ease;}
.tile-num{font-weight:700;font-size:.64rem;letter-spacing:.12em;color:var(--color-sky);}
.tile-name{font-weight:600;font-size:.9rem;letter-spacing:-.01em;text-shadow:0 1px 12px rgba(6,36,90,.6);}
.tile-zoom{position:absolute;top:11px;right:11px;z-index:2;width:32px;height:32px;border-radius:999px;
  display:flex;align-items:center;justify-content:center;color:var(--navy);
  background:rgba(255,255,255,.86);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);
  opacity:0;transform:scale(.8);transition:opacity .35s ease,transform .35s cubic-bezier(.34,1.4,.5,1);}
.tile-zoom svg{width:16px;height:16px;}
@media(hover:hover){
  .tile:hover{transform:translateY(-4px);box-shadow:var(--shadow-card);}
  .tile:hover img{transform:scale(1.07);}
  .tile:hover .tile-veil{opacity:1;}
  .tile:hover .tile-cap{transform:none;opacity:1;}
  .tile:hover .tile-zoom{opacity:1;transform:none;}
}

/* Visionneuse */
.lightbox{border:0;padding:0;margin:auto;background:transparent;
  width:max-content;max-width:min(94vw,900px);max-height:94vh;overflow:visible;}
.lightbox::backdrop{background:rgba(6,30,72,.74);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);}
.lightbox img{display:block;width:auto;height:auto;max-width:100%;max-height:calc(94vh - 74px);
  margin-inline:auto;border-radius:18px;box-shadow:0 30px 80px rgba(0,0,0,.45);background:#0b1d3d;}
.lb-bar{display:flex;align-items:center;justify-content:space-between;gap:14px;margin-top:12px;color:#fff;}
.lb-name{font-weight:600;font-size:.95rem;}
.lb-nav{display:flex;gap:8px;}
.lb-nav button{width:38px;height:38px;border-radius:999px;cursor:pointer;color:#fff;
  border:1px solid rgba(255,255,255,.3);background:rgba(255,255,255,.12);
  display:flex;align-items:center;justify-content:center;transition:background-color .2s ease;}
.lb-nav button:hover{background:rgba(255,255,255,.26);}
.lb-nav svg{width:18px;height:18px;}
.lightbox[open]{animation:lb-in .32s cubic-bezier(.22,.61,.36,1);}
@keyframes lb-in{from{opacity:0;transform:scale(.96);}to{opacity:1;transform:none;}}
@media(prefers-reduced-motion:reduce){
  .tile,.tile img,.tile-cap,.tile-veil,.tile-zoom,.lightbox[open]{transition:none;animation:none;}
}

/* Portrait placeholder (Wiam) */
.praticienne{display:flex;flex-direction:column;align-items:center;gap:16px;max-width:340px;margin-inline:auto;}
.praticienne-id{text-align:center;}
.praticienne-id .section-eyebrow{display:block;margin-bottom:6px;}
.praticienne-name{font-weight:700;font-size:clamp(1.25rem,3.2vw,1.5rem);letter-spacing:-.02em;color:var(--navy-h1);}
.portrait{width:100%;height:auto;aspect-ratio:4/5;object-fit:cover;object-position:50% 22%;display:block;
  border-radius:22px;background:linear-gradient(135deg,#E9F3FB,#CFE6F5);box-shadow:var(--shadow-card);}

/* 12. AVIS GOOGLE --------------------------------------------------------- */
.reviews-grid{display:grid;grid-template-columns:1fr;gap:var(--space-5);align-items:start;}
.reviews-grid>*{min-width:0;}
.rev-section-head{margin-bottom:var(--space-4);}
.rev-intro .title-soft{margin:12px 0 14px;}
.rev-intro p{color:var(--slate-desc);line-height:1.6;font-size:1.02rem;max-width:34ch;}
.rev-actions{display:flex;align-items:center;flex-wrap:wrap;gap:12px;margin-top:20px;}
.social-links{display:flex;gap:10px;}
.social-btn{display:inline-flex;align-items:center;justify-content:center;width:48px;height:48px;border-radius:999px;background:var(--white);border:1px solid rgba(6,39,96,.12);box-shadow:var(--shadow-soft);color:var(--navy);transition:transform .2s ease,background-color .2s ease,color .2s ease,border-color .2s ease;}
.social-btn svg{width:22px;height:22px;}
.social-btn:hover{transform:translateY(-2px);color:#fff;border-color:transparent;}
.social-ig:hover{background:linear-gradient(45deg,#F09433,#E6683C 25%,#DC2743 50%,#CC2366 75%,#BC1888);}
.social-fb:hover{background:#1877F2;}
.rev-panel{min-width:0;background:rgba(233,243,251,.6);border:1px solid rgba(6,39,96,.06);border-radius:24px;padding:20px;}
.rev-panel-top{display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap;margin-bottom:16px;}
.rev-score{display:flex;align-items:center;gap:12px;}
.rev-score .g{width:34px;height:34px;}
.rev-score .big{font-size:1.8rem;font-weight:800;color:var(--navy-h1);line-height:1;}
.rev-score .meta{font-size:.82rem;color:var(--slate-baseline);}
.rev-stars{color:#F2B705;letter-spacing:1px;font-size:.9rem;}
.rev-pause-cb{position:absolute;opacity:0;width:1px;height:1px;pointer-events:none;}
.rev-pause-btn{display:inline-flex;align-items:center;gap:8px;padding:9px 16px 9px 13px;border-radius:var(--radius-pill);background:var(--white);border:1px solid rgba(6,39,96,.12);box-shadow:var(--shadow-soft);color:var(--navy);font-weight:600;font-size:.82rem;cursor:pointer;user-select:none;transition:background-color .2s ease,transform .2s ease;}
.rev-pause-btn:hover{background:var(--bg);transform:translateY(-1px);}
.rev-pause-btn svg{width:16px;height:16px;}
.rev-pause-btn .ic-play,.rev-pause-btn .txt-play{display:none;}
.rev-pause-cb:checked~.rev-panel-top .rev-pause-btn .ic-pause,
.rev-pause-cb:checked~.rev-panel-top .rev-pause-btn .txt-pause{display:none;}
.rev-pause-cb:checked~.rev-panel-top .rev-pause-btn .ic-play,
.rev-pause-cb:checked~.rev-panel-top .rev-pause-btn .txt-play{display:inline-flex;}
.rev-pause-cb:focus-visible~.rev-panel-top .rev-pause-btn{outline:2px solid var(--color-blue);outline-offset:3px;}
.rev-marquee{position:relative;min-width:0;overflow:hidden;padding-block:4px;-webkit-mask-image:linear-gradient(90deg,transparent,#000 3%,#000 97%,transparent);mask-image:linear-gradient(90deg,transparent,#000 3%,#000 97%,transparent);}
.rev-track{display:flex;gap:14px;width:max-content;animation:rev-scroll 118s linear infinite;}
.rev-group{display:flex;gap:14px;flex:none;}
.review-card{flex:none;width:274px;display:flex;flex-direction:column;background:var(--white);border:1px solid rgba(6,39,96,.06);border-radius:16px;padding:16px;box-shadow:var(--shadow-soft);}
@keyframes rev-scroll{from{transform:translateX(0);}to{transform:translateX(calc(-50% - 7px));}}
.rev-pause-cb:checked~.rev-marquee .rev-track{animation-play-state:paused;}
@media(hover:hover){.rev-marquee:hover .rev-track{animation-play-state:paused;}}
@media(prefers-reduced-motion:reduce){.rev-track{animation:none;}}
.rev-head{display:flex;align-items:center;gap:10px;margin-bottom:9px;}
.rev-avatar{width:38px;height:38px;border-radius:999px;display:flex;align-items:center;justify-content:center;color:#fff;font-weight:700;font-size:.9rem;flex-shrink:0;}
.rev-name{font-weight:700;font-size:.9rem;color:var(--navy-h1);}
.rev-time{font-size:.76rem;color:var(--slate-baseline);}
.rev-card-stars{color:#F2B705;font-size:.82rem;letter-spacing:1px;margin-bottom:7px;}
.rev-text{font-size:.88rem;line-height:1.5;color:var(--slate-desc);}

/* 13. RESPONSIVE ---------------------------------------------------------- */
@media (min-width:641px){.hero-badge{display:flex;}}
@media (min-width:720px){
  .ba-scroller{grid-auto-columns:calc((100% - var(--space-5)) / 2);}
  .stats-inner{grid-template-columns:repeat(4,1fr);}
  .soins-grid{grid-template-columns:1.3fr 1fr 1fr;grid-template-areas:"endo soin esth" "endo impl paro" "endo chir chir";gap:var(--space-3);}
  .soin-endo{grid-area:endo;}.soin-impl{grid-area:impl;}.soin-paro{grid-area:paro;}
  .soin-soin{grid-area:soin;}.soin-esth{grid-area:esth;}.soin-chir{grid-area:chir;}
  .soin-chir{display:flex;flex-direction:column;justify-content:center;}
  .soin-chir .soin-ic{top:50%;transform:translateY(-50%);}
  .soin-chir .soin-desc{max-width:52ch;}
}
@media(min-width:960px){
  .reviews-grid{grid-template-columns:.82fr 1.6fr;gap:var(--space-7);}
  .rev-intro{padding-top:66px;}
}
@media (min-width:1024px){
  :root{--hero-h:680px;}
  .hero{min-height:var(--hero-h);}
  /* La photo est cadrée serré et presque carrée : en pleine largeur, un
     bandeau 1,8:1 n'en montrait qu'une bande. Elle occupe donc la moitié
     droite, où son rapport est presque respecté, et se fond dans le fond
     clair par un masque. Le texte se détache sur ce fond, sans voile épais. */
  .hero-photo{left:auto;right:0;width:72%;object-position:50% 34%;
    --masque:radial-gradient(72% 200% at 88% 16%,
      #000 46%,rgba(0,0,0,.88) 57%,rgba(0,0,0,.64) 68%,rgba(0,0,0,.38) 79%,
      rgba(0,0,0,.15) 89%,rgba(0,0,0,.04) 96%,transparent 100%);
    -webkit-mask-image:var(--masque);mask-image:var(--masque);}
  .hero-veil{background:radial-gradient(42% 52% at 18% 30%,rgba(120,175,235,.13),transparent 74%),
    linear-gradient(90deg,rgba(249,252,255,.98) 0%,rgba(249,252,255,.93) 22%,
      rgba(249,252,255,.74) 34%,rgba(249,252,255,.48) 45%,rgba(249,252,255,.22) 56%,
      rgba(249,252,255,.06) 66%,rgba(249,252,255,0) 76%);}
  .hero-header{top:20px;left:5.5%;right:5.5%;padding:8px 8px 8px 24px;}
  .hero-content{width:56%;min-height:var(--hero-h);padding:104px 5.5% 46px;justify-content:center;}
  .hero-content .btn{min-height:54px;}
  .hero-badge{top:50%;margin-top:99px;bottom:auto;left:auto;right:6.5%;padding:12px 18px;}
  .nav-checkbox,.nav-toggle-btn{display:none;}
  .main-nav{display:block;position:static;background:transparent;box-shadow:none;padding:0;min-width:0;}
  .nav-list{flex-direction:row;align-items:center;gap:28px;}
  .nav-list>li>a{padding:6px 0;font-size:.94rem;}
  .nav-list>li>a:hover{background:transparent;color:var(--color-blue);}
  .nav-dropdown{position:relative;}
  .nav-dropdown summary{padding:6px 0;font-size:.94rem;}
  .nav-dropdown summary:hover{color:var(--color-blue);}
  .dropdown-menu{position:absolute;top:calc(100% + 16px);left:50%;transform:translateX(-50%);min-width:260px;background:var(--white);border-radius:16px;box-shadow:var(--shadow-nav-panel);padding:12px;}
  .dropdown-menu a{padding:10px 12px;}
  .ba-scroller{grid-auto-columns:calc((100% - 2*var(--space-5)) / 3);gap:var(--space-5);}
}
@media (min-width:1440px){.hero-content{width:52%;padding-left:6%;}}

/* 14. NOUS CONTACTER ------------------------------------------------------ */
.contact{padding-bottom:var(--space-6);}
.contact-shell{display:grid;grid-template-columns:1fr;gap:var(--space-6);align-items:start;
  background:linear-gradient(160deg,rgba(233,243,251,.55),rgba(249,252,255,.9));
  border:1px solid rgba(6,39,96,.06);border-radius:28px;padding:24px;}
.contact-shell>*{min-width:0;}

/* Colonne gauche */
.contact-aside .section-eyebrow{display:block;margin-bottom:12px;}
.contact-aside .title-soft{margin-bottom:14px;}
.contact-lead{color:var(--slate-desc);line-height:1.6;font-size:1.02rem;max-width:34ch;}
.contact-infos{margin-top:var(--space-5);padding-top:var(--space-5);border-top:1px solid rgba(6,39,96,.08);display:flex;flex-direction:column;gap:18px;}
.contact-infos li{display:flex;gap:14px;padding-bottom:18px;border-bottom:1px solid rgba(6,39,96,.08);}
.contact-infos li:last-child{padding-bottom:0;border-bottom:0;}
.contact-ic{flex:none;width:46px;height:46px;border-radius:14px;background:rgba(183,222,242,.42);display:flex;align-items:center;justify-content:center;color:var(--color-blue);}
.contact-ic svg{width:21px;height:21px;}
.contact-label{font-weight:700;font-size:1rem;color:var(--navy-h1);letter-spacing:-.01em;}
.contact-val{margin-top:4px;font-size:.94rem;line-height:1.55;color:var(--slate-desc);}
.contact-val a:hover{color:var(--color-blue);}
.contact-link{display:inline-flex;align-items:center;gap:7px;margin-top:7px;font-weight:600;font-size:.9rem;color:var(--color-blue);}
.contact-link svg{width:15px;height:15px;transition:transform .2s ease;}
.contact-link:hover svg{transform:translateX(4px);}
.contact-trust{display:flex;gap:14px;margin-top:var(--space-5);padding:16px;border-radius:18px;background:var(--white);border:1px solid rgba(6,39,96,.06);box-shadow:var(--shadow-soft);}
.contact-trust .contact-ic{width:42px;height:42px;color:var(--color-sage);background:rgba(63,143,122,.12);}
.contact-trust .contact-label{font-size:.95rem;}
.contact-trust .contact-val{font-size:.86rem;}

/* Panneau droit */
.contact-panel{background:var(--white);border:1px solid rgba(6,39,96,.06);border-radius:24px;box-shadow:var(--shadow-card);padding:20px;}
.contact-tabs{display:grid;grid-template-columns:1fr;gap:10px;padding-bottom:18px;border-bottom:1px solid rgba(6,39,96,.08);}
.contact-tab{display:inline-flex;align-items:center;justify-content:center;gap:10px;padding:14px 16px;border-radius:14px;font-weight:600;font-size:.94rem;color:var(--navy);background:var(--white);border:1px solid rgba(6,39,96,.12);transition:background-color .2s ease,color .2s ease,border-color .2s ease,transform .2s ease;}
.contact-tab svg{width:19px;height:19px;flex:none;}
.contact-tab:hover{background:var(--bg);border-color:rgba(70,134,202,.45);transform:translateY(-1px);}
.contact-tab.is-active{background:var(--navy);color:var(--white);border-color:transparent;}
.contact-tab.is-active:hover{background:#0a2f74;}
.contact-tab-wa svg{color:#25D366;}
.contact-tab-wa:hover{background:rgba(37,211,102,.10);border-color:rgba(37,211,102,.45);}

/* Formulaire */
.contact-form{display:grid;grid-template-columns:1fr;gap:16px;padding-top:20px;}
.hp-field{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden;}
.field{display:flex;flex-direction:column;gap:8px;min-width:0;}
.field label{font-weight:600;font-size:.92rem;color:var(--navy-h1);}
.req{color:#D4622A;}
.opt{font-weight:500;color:var(--slate-baseline);}
.input-wrap{position:relative;display:flex;align-items:center;}
.input-wrap>svg{position:absolute;left:14px;width:19px;height:19px;color:var(--slate-baseline);pointer-events:none;}
.input-wrap input,.input-wrap select,.input-wrap textarea{width:100%;font-family:var(--font-body);font-size:.95rem;color:var(--color-text);background:var(--white);border:1px solid rgba(6,39,96,.14);border-radius:14px;padding:14px 16px 14px 44px;transition:border-color .2s ease,box-shadow .2s ease;}
.input-wrap textarea{padding:14px 16px 34px 44px;resize:vertical;min-height:132px;line-height:1.55;}
.input-wrap input::placeholder,.input-wrap textarea::placeholder{color:#9AAAC2;}
.input-wrap input:focus,.input-wrap select:focus,.input-wrap textarea:focus{outline:none;border-color:var(--color-blue);box-shadow:0 0 0 3px rgba(70,134,202,.16);}
.input-select select{appearance:none;-webkit-appearance:none;padding-left:16px;padding-right:44px;cursor:pointer;color:var(--color-text);}
.input-select select:invalid{color:#9AAAC2;}
.input-select .sel-arrow{position:absolute;right:16px;left:auto;width:18px;height:18px;color:var(--slate-baseline);pointer-events:none;}
.input-textarea>svg{top:16px;}
.char-count{position:absolute;right:16px;bottom:12px;font-size:.78rem;color:var(--slate-baseline);pointer-events:none;}
.form-foot{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:14px;padding-top:4px;}
.req-note{font-size:.85rem;color:var(--slate-desc);}
.btn-send{padding:15px 26px;}
/* Précision affichée seulement si le script tourne : sans lui, le formulaire
   repart vers Netlify et la phrase serait fausse. */
.form-note{display:none;font-size:.85rem;line-height:1.5;color:var(--slate-desc);}
.js .form-note{display:block;}

@media (min-width:560px){
  .contact-tabs{grid-template-columns:repeat(3,1fr);}
  .contact-form{grid-template-columns:1fr 1fr;gap:18px;}
  .field-full{grid-column:1 / -1;}
  .form-foot{grid-column:1 / -1;}
  .form-note{grid-column:1 / -1;}
}
@media (min-width:960px){
  .contact-shell{grid-template-columns:.82fr 1.6fr;gap:var(--space-7);padding:32px;}
  .contact-panel{padding:26px;}
}

/* 15. PLATEAU TECHNIQUE (Notre cabinet) ----------------------------------- */
.equip-title{margin-top:var(--space-5);font-weight:700;font-size:.8rem;letter-spacing:.14em;text-transform:uppercase;color:var(--color-sage);}
.equip-grid{margin-top:12px;display:grid;grid-template-columns:1fr;gap:9px;}
.equip{display:flex;align-items:center;gap:11px;padding:10px 12px;border-radius:14px;background:var(--white);border:1px solid rgba(6,39,96,.07);box-shadow:var(--shadow-soft);}
.equip-ic{flex:none;width:38px;height:38px;border-radius:11px;background:rgba(183,222,242,.42);display:flex;align-items:center;justify-content:center;color:var(--color-blue);}
.equip-ic svg{width:21px;height:21px;}
.equip-name{font-weight:600;font-size:.85rem;line-height:1.35;color:var(--navy-h1);}
@media (min-width:520px){.equip-grid{grid-template-columns:1fr 1fr;}}

/* 16. AJUSTEMENTS MOBILE (≤640px) ----------------------------------------- */
@media (max-width:640px){
  /* Photo : voile allégé + léger flou, pour que le visage reste lisible
     derrière un texte qui doit rester contrasté. */
  /* Cadrage : praticienne à droite, patiente en bas à gauche. Voile allégé
     dans la moitié haute pour qu'on la distingue, renforcé plus bas où se
     trouvent le texte courant et les boutons. */
  .hero-photo{filter:blur(1.2px);object-position:70% 50%;}
  .hero-veil{background:linear-gradient(180deg,rgba(249,252,255,.34) 0%,rgba(249,252,255,.40) 30%,
    rgba(249,252,255,.58) 44%,rgba(249,252,255,.80) 54%,rgba(249,252,255,.90) 68%,
    rgba(249,252,255,.93) 88%,rgba(249,252,255,.80) 100%);}

  /* Badge Google : dans le flux, entre la navbar et le titre */
  .hero-badge{display:flex;position:static;width:max-content;max-width:100%;margin:98px auto 0;padding:6px 11px;gap:8px;
    border-radius:14px;background:rgba(255,255,255,.26);border-color:rgba(255,255,255,.4);box-shadow:none;}
  .hero-badge>svg{width:18px;height:18px;}
  .hero-badge-rating{font-size:.74rem;}
  .hero-badge-sub{font-size:.68rem;}
  .hero-content{padding:20px var(--side-pad) calc(22px + var(--ribbon-h));align-items:center;text-align:center;}
  .hero-desc{max-width:32ch;}

  /* Les deux CTA : centrés, chacun sur sa ligne */
  .hero-actions{flex-direction:column;align-items:center;width:100%;gap:10px;}
  .hero-actions .btn{width:100%;max-width:300px;}


  /* Prendre RDV doit tomber sur les 3 boutons + le formulaire */
  .contact-panel{order:-1;}
  .contact-shell{display:flex;flex-direction:column;}
}
#contact-actions{scroll-margin-top:14px;}

/* 17. FRISE — PARCOURS & FORMATIONS --------------------------------------- */
.frise{margin-top:var(--space-6);padding-top:var(--space-5);border-top:1px solid rgba(6,39,96,.08);}
.frise-title{font-weight:600;font-size:.8rem;letter-spacing:.14em;text-transform:uppercase;color:var(--color-sage);text-align:center;}
.frise-hint{display:flex;align-items:center;justify-content:center;gap:8px;font-size:.8rem;color:var(--slate-baseline);margin-top:8px;}
.frise-hint svg{width:16px;height:16px;}

.htl{overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;padding:10px 0 4px;}
.htl::-webkit-scrollbar{display:none;}
.htl-track{position:relative;display:flex;min-width:max-content;padding:0 20px;list-style:none;margin:0;}
.htl-track::before{content:'';position:absolute;top:50%;left:149px;right:149px;height:2px;transform:translateY(-1px);
  background:var(--color-blue);}

.htl-item{position:relative;flex:0 0 258px;scroll-snap-align:center;display:grid;grid-template-rows:1fr 60px 1fr;}
.htl-node{grid-row:2;display:flex;align-items:center;justify-content:center;}
.htl-dot{position:relative;z-index:2;width:44px;height:44px;border-radius:999px;background:var(--white);
  border:2px solid var(--color-sky);box-shadow:var(--shadow-soft);display:flex;align-items:center;justify-content:center;color:var(--navy);}
.htl-dot svg{width:21px;height:21px;}

.htl-card{position:relative;width:230px;justify-self:center;background:var(--white);border:1px solid rgba(6,39,96,.06);
  border-radius:16px;box-shadow:var(--shadow-soft);padding:14px 16px;}
.htl-year{display:inline-block;font-weight:700;font-size:.72rem;letter-spacing:.06em;color:var(--color-sage);
  background:rgba(63,143,122,.1);padding:3px 10px;border-radius:999px;margin-bottom:7px;}
.htl-name{font-weight:700;font-size:.92rem;line-height:1.28;color:var(--navy-h1);}
.htl-meta{margin-top:5px;font-size:.8rem;line-height:1.35;color:var(--slate-desc);}

.htl-item:nth-child(odd) .htl-card{grid-row:1;align-self:end;margin-bottom:16px;}
.htl-item:nth-child(even) .htl-card{grid-row:3;align-self:start;margin-top:16px;}
.htl-item .htl-card::after{content:'';position:absolute;left:50%;width:2px;height:16px;background:var(--color-sky);transform:translateX(-1px);}
.htl-item:nth-child(odd) .htl-card::after{bottom:-16px;}
.htl-item:nth-child(even) .htl-card::after{top:-16px;}

.htl-key .htl-dot{background:var(--navy);border-color:var(--navy);color:#fff;}
.htl-key .htl-card{border-color:rgba(6,39,96,.14);box-shadow:var(--shadow-card);}

/* Ancres de navigation : un peu d'air au-dessus de la cible */
#accueil,#sourires,#soins,#cabinet,#praticienne,#avis,#rdv{scroll-margin-top:16px;}
[id^="soin-"]{scroll-margin-top:90px;}


/* Mosaïque en vis-à-vis du texte à partir de 1100px : à cette largeur la
   colonne est assez large pour que les tuiles gardent le format de leur photo. */
@media (min-width:1200px){
  /* La mosaïque est plus haute que le texte (photos en portrait) : on rend un
     peu de largeur au texte et on l'aère, pour que les deux colonnes se
     terminent presque ensemble au lieu de laisser un grand vide à droite. */
  #cabinet .split{grid-template-columns:.93fr 1.07fr;align-items:center;}
  .mosaic{max-width:none;margin-inline:0;}
  #cabinet .split-text p{line-height:1.78;}
  #cabinet .split-text p+p{margin-top:17px;}
  #cabinet .equip-title{margin-top:var(--space-6);}
  #cabinet .equip-grid{margin-top:16px;gap:12px;}
  #cabinet .equip{padding:14px 16px;gap:13px;}
  #cabinet .equip-ic{width:42px;height:42px;}
  #cabinet .equip-name{font-size:.89rem;}
}

/* Mosaïque sur petit écran : légendes resserrées pour tenir sur une ligne */
@media (max-width:640px){
  .mosaic{gap:8px;}
  .tile{border-radius:15px;}
  .tile-cap{padding:12px 10px 10px;gap:6px;}
  .tile-name{font-size:.78rem;}
  .tile-num{font-size:.58rem;}
  .tile-zoom{width:27px;height:27px;top:8px;right:8px;}
  .tile-zoom svg{width:14px;height:14px;}
}

/* 19. PAGE DE CONFIRMATION D'ENVOI (/merci) -------------------------------- */
.merci-page{display:flex;min-height:100vh;align-items:center;justify-content:center;
  padding:var(--space-6) var(--side-pad);
  background:radial-gradient(60% 50% at 20% 10%,rgba(150,200,245,.20),transparent 70%),
    radial-gradient(50% 45% at 85% 85%,rgba(63,143,122,.12),transparent 70%),var(--bg);}
.merci{width:100%;max-width:600px;display:flex;flex-direction:column;align-items:center;gap:18px;}
.merci-card{width:100%;background:var(--white);border:1px solid rgba(6,39,96,.06);border-radius:28px;
  box-shadow:var(--shadow-card);padding:40px 30px 34px;text-align:center;}
.merci-check{display:flex;align-items:center;justify-content:center;width:76px;height:76px;margin:0 auto 20px;
  border-radius:999px;background:rgba(63,143,122,.12);color:var(--color-sage);}
.merci-check svg{width:42px;height:42px;}
.merci-check-o{stroke-dasharray:145;stroke-dashoffset:145;animation:merci-o .7s cubic-bezier(.22,.61,.36,1) .1s forwards;}
.merci-check-v{stroke-dasharray:36;stroke-dashoffset:36;animation:merci-v .45s cubic-bezier(.22,.61,.36,1) .6s forwards;}
@keyframes merci-o{to{stroke-dashoffset:0;}}
@keyframes merci-v{to{stroke-dashoffset:0;}}
.merci-card .section-eyebrow{display:block;margin-bottom:12px;}
.merci-card .title-soft{margin-bottom:16px;}
.merci-lead{color:var(--slate-desc);line-height:1.7;font-size:1.02rem;max-width:44ch;margin-inline:auto;}
.merci-actions{display:flex;flex-wrap:wrap;justify-content:center;gap:12px;margin-top:26px;}
.merci-urgent{margin-top:22px;padding-top:20px;border-top:1px solid rgba(6,39,96,.08);
  font-size:.92rem;color:var(--slate-desc);}
.merci-urgent a{font-weight:600;color:var(--color-sage);text-decoration:underline;text-underline-offset:3px;}
.merci-urgent a:hover{color:var(--navy);}
.merci-adresse{font-size:.84rem;line-height:1.6;color:var(--slate-baseline);text-align:center;}
@media(prefers-reduced-motion:reduce){.merci-check-o,.merci-check-v{animation:none;stroke-dashoffset:0;}}

/* 20. PLATEAU TECHNIQUE — apparition et survol ---------------------------- */
.equip{transition:translate .4s cubic-bezier(.22,.61,.36,1),box-shadow .4s ease,border-color .4s ease,
  opacity .6s cubic-bezier(.22,.61,.36,1),transform .6s cubic-bezier(.22,.61,.36,1);}
.js .equip{opacity:0;transform:translateY(16px);}
.js .equip.is-in{opacity:1;transform:none;}
.js .equip:nth-child(2){transition-delay:.09s;}
.js .equip:nth-child(3){transition-delay:.18s;}
.js .equip:nth-child(4){transition-delay:.27s;}
.equip-ic{transition:background-color .4s ease,color .4s ease,scale .4s cubic-bezier(.34,1.4,.5,1),rotate .4s cubic-bezier(.34,1.4,.5,1);}
@media(hover:hover){
  .equip:hover{translate:0 -3px;box-shadow:var(--shadow-card);border-color:rgba(70,134,202,.30);}
  .equip:hover .equip-ic{background:rgba(70,134,202,.20);color:var(--navy);scale:1.07;rotate:-4deg;}
}
@media(prefers-reduced-motion:reduce){
  .js .equip{opacity:1;transform:none;}
  .equip,.equip-ic{transition:none;}
}

/* 21. PIED DE PAGE -------------------------------------------------------- */
.site-footer{background:#062147;color:rgba(255,255,255,.78);margin-top:var(--space-6);}
.footer-inner{width:100%;max-width:var(--container-max);margin-inline:auto;
  padding:var(--space-7) var(--side-pad) var(--space-6);
  display:grid;grid-template-columns:1fr;gap:var(--space-6);}
.footer-logo{display:flex;flex-direction:column;font-weight:700;font-size:1.18rem;line-height:1.15;
  letter-spacing:-.015em;color:#fff;margin-bottom:12px;}
.footer-logo span{color:var(--color-sky);}
.footer-desc{font-size:.92rem;line-height:1.65;color:rgba(255,255,255,.7);max-width:38ch;}
.footer-contact{margin-top:20px;display:flex;flex-direction:column;gap:11px;}
.footer-contact li{display:flex;align-items:center;gap:11px;font-size:.93rem;}
.footer-ic{flex:none;width:32px;height:32px;border-radius:10px;display:flex;align-items:center;justify-content:center;
  background:rgba(183,222,242,.12);color:var(--color-sky);}
.footer-ic svg{width:16px;height:16px;}
.footer-contact a{color:rgba(255,255,255,.86);transition:color .2s ease;}
.footer-contact a:hover{color:var(--color-sky);}

.footer-title{font-weight:700;font-size:.76rem;letter-spacing:.14em;text-transform:uppercase;
  color:var(--color-sky);margin-bottom:16px;}
.footer-title-2{margin-top:26px;}
.footer-col ul{display:flex;flex-direction:column;gap:11px;}
.footer-col ul a{font-size:.93rem;color:rgba(255,255,255,.78);transition:color .2s ease,padding-left .2s ease;}
.footer-col ul a:hover{color:#fff;padding-left:4px;}

.footer-social{display:flex;gap:11px;}
.footer-soc{display:inline-flex;align-items:center;justify-content:center;width:42px;height:42px;
  border-radius:999px;color:#fff;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.16);
  transition:transform .25s ease,background-color .25s ease,border-color .25s ease;}
.footer-soc svg{width:20px;height:20px;}
.footer-soc:hover{transform:translateY(-2px);border-color:transparent;}
.footer-soc-ig:hover{background:linear-gradient(45deg,#F09433,#E6683C 25%,#DC2743 50%,#CC2366 75%,#BC1888);}
.footer-soc-fb:hover{background:#1877F2;}
.footer-horaires{font-size:.92rem;line-height:1.7;color:rgba(255,255,255,.72);}

/* Bandeau de signature : une bande pleine largeur, plus sombre que le pied
   de page, avec le copyright à gauche et la signature de l'agence à droite. */
.footer-signature{position:relative;background:#04142C;border-top:1px solid rgba(255,255,255,.08);}
.footer-signature::before{content:'';position:absolute;top:-1px;left:0;right:0;height:1px;
  background:linear-gradient(90deg,transparent,rgba(183,222,242,.28) 22%,rgba(183,222,242,.28) 78%,transparent);}
.footer-bottom{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:10px 24px;
  width:100%;max-width:var(--container-max);margin-inline:auto;
  padding:20px var(--side-pad);font-size:.85rem;color:rgba(255,255,255,.5);}
.footer-cta{font-weight:600;color:var(--color-sky);transition:color .2s ease;}
.footer-cta:hover{color:#fff;}
.site-footer a:focus-visible{outline:2px solid var(--color-sky);outline-offset:3px;border-radius:4px;}

@media (min-width:720px){
  .footer-inner{grid-template-columns:1.5fr 1fr 1fr;gap:var(--space-7);}
}

/* Signature de l'agence — reflet qui balaie le nom, soulignement au survol */
.footer-legal{display:flex;flex-wrap:wrap;align-items:center;gap:6px 16px;}
.footer-legal .footer-cta{position:relative;padding-left:17px;}
.footer-legal .footer-cta::before{content:'';position:absolute;left:0;top:50%;width:1px;height:12px;
  margin-top:-6px;background:rgba(255,255,255,.18);}
.footer-sign{display:flex;align-items:center;gap:7px;margin-left:auto;color:rgba(255,255,255,.42);letter-spacing:.005em;}
/* Bleu médian au repos : le balayage jusqu'au blanc reste bien lisible,
   ce que ne permettait pas le ciel clair (#B7DEF2), trop proche du blanc. */
.footer-sign{--sign:#6FB3DC;}
.footer-sign a{position:relative;display:inline-block;font-weight:700;color:var(--sign);
  letter-spacing:-.01em;transition:filter .3s ease;}
.footer-sign a::after{content:'';position:absolute;left:0;right:0;bottom:-3px;height:1.5px;
  background:var(--sign);transform:scaleX(0);transform-origin:right center;
  transition:transform .38s cubic-bezier(.22,.61,.36,1);}
.footer-sign a:hover::after{transform:scaleX(1);transform-origin:left center;}
.footer-sign a:hover{filter:brightness(1.18);}
@supports ((-webkit-background-clip:text) or (background-clip:text)){
  .footer-sign a span{
    background-image:linear-gradient(102deg,var(--sign) 0%,var(--sign) 30%,#B7DEF2 42%,
      #fff 50%,#B7DEF2 58%,var(--sign) 70%,var(--sign) 100%);
    background-size:320% 100%;background-repeat:no-repeat;
    -webkit-background-clip:text;background-clip:text;color:transparent;
    will-change:background-position;
    animation:sign-shine 5s linear infinite;}
  /* le halo suit le reflet : le nom s'allume au passage de la lumière */
  .footer-sign a{animation:sign-glow 5s linear infinite;}
}
@keyframes sign-shine{
  0%,14%{background-position:100% 0;}
  52%,100%{background-position:0% 0;}
}
@keyframes sign-glow{
  0%,20%{text-shadow:none;}
  35%{text-shadow:0 0 18px rgba(183,222,242,.7);}
  52%,100%{text-shadow:none;}
}
@media(prefers-reduced-motion:reduce){
  .footer-sign a span{animation:none;background-image:none;color:var(--sign);}
  .footer-sign a{animation:none;text-shadow:none;}
  .footer-sign a::after{transition:none;}
}
/* Entre 641 et 900px, on resserre légèrement pour garder la bande sur une ligne. */
@media (min-width:641px) and (max-width:900px){
  .footer-bottom{font-size:.79rem;gap:8px 16px;}
  .footer-legal{gap:6px 13px;}
}
@media (max-width:640px){
  .footer-bottom{flex-direction:column;align-items:flex-start;gap:12px;padding:18px var(--side-pad) 22px;}
  .footer-legal{flex-direction:column;align-items:flex-start;gap:10px;}
  .footer-legal .footer-cta{padding-left:0;}
  .footer-legal .footer-cta::before{display:none;}
  .footer-sign{margin-left:0;}
}

/* 22. HERO — palier tablette (641-1023px) --------------------------------
   En dessous de 1024px la photo reprend toute la largeur, mais le voile
   vertical d'origine était calibré sur l'ancienne image : le texte des CTA
   tombait sur la blouse. Cadrage recentré et voile renforcé. */
@media (min-width:641px) and (max-width:1023px){
  .hero-photo{filter:blur(1.3px);object-position:68% 38%;}
  .hero-veil{background:radial-gradient(60% 34% at 22% 16%,rgba(150,200,245,.16),transparent 72%),
    linear-gradient(180deg,rgba(249,252,255,.93) 0%,rgba(249,252,255,.84) 30%,
      rgba(249,252,255,.86) 55%,rgba(249,252,255,.93) 78%,rgba(249,252,255,.86) 100%);}
}

/* 23. HERO — ruban défilant des soins -------------------------------------
   Bandeau en verre dépoli posé sur le bas du hero : la photo reste devinable
   au travers, le visage de la patiente n'est pas masqué. */
.hero-ribbon{position:absolute;left:0;right:0;bottom:0;z-index:12;overflow:hidden;
  background:linear-gradient(180deg,rgba(255,255,255,.34),rgba(255,255,255,.60));
  backdrop-filter:blur(16px) saturate(150%);-webkit-backdrop-filter:blur(16px) saturate(150%);
  border-top:1px solid rgba(255,255,255,.55);
  box-shadow:0 -10px 30px -22px rgba(6,39,96,.35);
  -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 5%,#000 95%,transparent 100%);
  mask-image:linear-gradient(90deg,transparent 0,#000 5%,#000 95%,transparent 100%);}
.ribbon-track{display:flex;width:max-content;animation:ribbon 42s linear infinite;}
.ribbon-group{display:flex;align-items:center;}
.ribbon-group li{display:flex;align-items:center;gap:11px;padding:17px 30px;
  font-weight:600;font-size:.93rem;letter-spacing:-.005em;color:var(--navy);white-space:nowrap;}
.ribbon-group li .icon{width:21px;height:21px;color:var(--color-blue);}
/* séparateur : petit losange sage entre deux entrées */
.ribbon-group li::after{content:'';width:5px;height:5px;margin-left:30px;border-radius:1px;
  background:var(--color-sage);opacity:.5;transform:rotate(45deg);}
@keyframes ribbon{from{transform:translateX(0);}to{transform:translateX(calc(-100% / 3));}}
@media(hover:hover){.hero-ribbon:hover .ribbon-track{animation-play-state:paused;}}
@media(prefers-reduced-motion:reduce){.ribbon-track{animation:none;}}

@media (max-width:640px){
  .hero{--ribbon-h:50px;}
  .ribbon-group li{padding:14px 20px;font-size:.86rem;gap:9px;}
  .ribbon-group li::after{margin-left:20px;}
  .ribbon-group li .icon{width:19px;height:19px;}
}