/* ==========================================================================
   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;}

@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;}
}
@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);}

.footer-bottom{border-top:1px solid rgba(255,255,255,.10);}
.footer-bottom{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:12px;
  width:100%;max-width:var(--container-max);margin-inline:auto;
  padding:18px var(--side-pad);font-size:.85rem;color:rgba(255,255,255,.55);}
.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:8px 18px;}
.footer-sign{color:rgba(255,255,255,.5);}
.footer-sign a{position:relative;display:inline-block;font-weight:700;color:var(--color-sky);
  transition:filter .3s ease;}
.footer-sign a::after{content:'';position:absolute;left:0;right:0;bottom:-3px;height:1.5px;
  background:var(--color-sky);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.25);}
@supports ((-webkit-background-clip:text) or (background-clip:text)){
  .footer-sign a span{
    background-image:linear-gradient(100deg,var(--color-sky) 0%,var(--color-sky) 38%,#fff 50%,
      var(--color-sky) 62%,var(--color-sky) 100%);
    background-size:280% 100%;background-repeat:no-repeat;
    -webkit-background-clip:text;background-clip:text;color:transparent;
    animation:sign-shine 5.5s cubic-bezier(.5,0,.5,1) infinite;}
}
@keyframes sign-shine{
  0%,14%{background-position:100% 0;}
  58%,100%{background-position:0% 0;}
}
@media(prefers-reduced-motion:reduce){
  .footer-sign a span{animation:none;background-image:none;color:var(--color-sky);}
  .footer-sign a::after{transition:none;}
}

/* 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;}
}