/* =====================================================================
   Pro Esthetic — feuille de style unique (mobile d'abord)
   Polices auto-hebergees, aucune requete externe.
   ===================================================================== */

@font-face{ font-family:"Source Sans 3"; src:url("/assets/fonts/source-sans-3-latin-wght-normal.woff2") format("woff2"); font-weight:300 700; font-display:swap; }
@font-face{ font-family:"Source Serif 4"; src:url("/assets/fonts/source-serif-4-latin-600-normal.woff2") format("woff2"); font-weight:600; font-display:swap; }
@font-face{ font-family:"Source Serif 4"; src:url("/assets/fonts/source-serif-4-latin-400-normal.woff2") format("woff2"); font-weight:400; font-display:swap; }
@font-face{ font-family:"Source Serif 4"; src:url("/assets/fonts/source-serif-4-latin-400-italic.woff2") format("woff2"); font-weight:400; font-style:italic; font-display:swap; }
/* Jost : logo et petites etiquettes en capitales (police d'origine de la marque) */
@font-face{ font-family:"Jost"; src:url("/assets/fonts/jost-latin-wght-normal.woff2") format("woff2"); font-weight:300 700; font-display:swap; }

:root{
  --paper:#FBF8F4; --cream:#F3ECE3; --sand:#E8DDD0; --sage:#EEF1EC; --white:#FFFFFF;
  --ink:#1E1A17; --ink-2:#463D36; --ink-3:#6B6057; --line:rgba(30,26,23,.12);
  --caramel:#B06B37; --caramel-dk:#8C5124; --caramel-lt:#E0AE85; --pine:#26302A; --gold:#E8A23A;
  --on-dark:#F3ECE3; --on-dark-2:rgba(243,236,227,.85);

  --serif:"Source Serif 4", Georgia, "Times New Roman", serif;
  --sans:"Source Sans 3", -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --brand:"Jost", -apple-system, "Segoe UI", sans-serif;

  --wrap:80rem; --gutter:1.25rem; --section:3.25rem; --header-h:4.5rem;
  --r-xl:1.75rem; --r-lg:1.5rem; --r-md:1.25rem; --r-sm:.875rem;
}
@media (min-width:768px){ :root{ --gutter:2.5rem; --section:5rem; } }
@media (min-width:1024px){ :root{ --section:6rem; --header-h:5.5rem; } }

/* ---------- Base ---------- */
*,*::before,*::after{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; scroll-padding-top:calc(var(--header-h) + 1rem); }
body{ margin:0; background:var(--paper); color:var(--ink-2); font-family:var(--sans); font-size:1.0625rem; line-height:1.6; -webkit-font-smoothing:antialiased; }
@media (min-width:768px){ body{ font-size:1.125rem; line-height:1.65; } }
img{ max-width:100%; height:auto; display:block; }
svg{ flex:none; }
a{ color:inherit; }
p{ margin:0 0 1em; }
ul,ol{ margin:0; padding:0; list-style:none; }
button{ font:inherit; color:inherit; }
h1,h2,h3{ font-family:var(--serif); font-weight:600; color:var(--ink); line-height:1.12; letter-spacing:-.015em; margin:0 0 .5em; }
h1{ font-size:clamp(2.25rem, 1.6rem + 3vw, 3.75rem); line-height:1.08; }
h2{ font-size:clamp(1.75rem, 1.3rem + 2vw, 2.75rem); }
h3{ font-size:1.25rem; line-height:1.25; }
strong{ font-weight:600; color:var(--ink); }
.wrap{ width:100%; max-width:var(--wrap); margin-inline:auto; padding-inline:var(--gutter); }
.section{ padding-block:var(--section); }
.bg-cream{ background:var(--cream); }
.bg-pine{ background:var(--pine); color:var(--on-dark-2); }
.bg-pine h2,.bg-pine h3{ color:var(--paper); }
.eyebrow{ display:flex; align-items:center; gap:.6rem; font-family:var(--brand); font-weight:500; font-size:.75rem; letter-spacing:.18em; text-transform:uppercase; color:var(--caramel-dk); margin:0 0 .9rem; }
.bg-pine .eyebrow{ color:var(--caramel-lt); }
.lead{ font-size:1.125rem; line-height:1.55; }
@media (min-width:768px){ .lead{ font-size:1.25rem; } }
.muted{ color:var(--ink-3); }
.small{ font-size:.9375rem; }
.visually-hidden{ position:absolute!important; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }
.skip-link{ position:absolute; left:-999px; top:0; z-index:400; background:var(--ink); color:#fff; padding:.75rem 1rem; }
.skip-link:focus{ left:1rem; top:1rem; }
:focus-visible{ outline:2px solid var(--caramel); outline-offset:3px; }
[hidden]{ display:none!important; }

/* ---------- Boutons ---------- */
.btn{ display:inline-flex; align-items:center; justify-content:center; gap:.6rem; min-height:3.25rem; padding:0 1.5rem; border-radius:999px; border:1.5px solid transparent; font-weight:600; font-size:1rem; text-decoration:none; cursor:pointer; white-space:nowrap; transition:background-color .2s, color .2s, border-color .2s; }
.btn-dark{ background:var(--ink); color:var(--paper); }
.btn-dark:hover{ background:var(--caramel-dk); }
.btn-line{ border-color:var(--ink); color:var(--ink); background:transparent; }
.btn-line:hover{ background:var(--ink); color:var(--paper); }
.btn-light{ background:var(--paper); color:var(--ink); }
.btn-light:hover{ background:var(--sand); }
.btn-caramel{ background:var(--caramel-dk); color:#fff; }
.btn-caramel:hover{ background:#73411c; }
.btn-ghost-light{ border-color:rgba(243,236,227,.55); color:var(--paper); }
.btn-ghost-light:hover{ background:var(--paper); color:var(--ink); }
.actions{ display:grid; gap:.625rem; margin-top:1.5rem; }
.actions.two{ grid-template-columns:1fr 1fr; }
@media (min-width:768px){ .actions,.actions.two{ display:flex; flex-wrap:wrap; gap:.75rem; } }
.link{ font-weight:600; color:var(--ink); text-decoration:underline; text-decoration-color:var(--caramel); text-underline-offset:.3em; display:inline-flex; align-items:center; gap:.4rem; }
.link:hover{ color:var(--caramel-dk); }
.icon-circle{ width:2.5rem; height:2.5rem; border-radius:999px; display:inline-flex; align-items:center; justify-content:center; background:var(--paper); color:var(--ink); flex:none; }

/* ---------- En-tete : barre flottante (pilule blanche) ---------- */
/* La barre flotte au-dessus du contenu : le premier bloc de chaque page passe dessous,
   sa couleur de fond remplit l'espace du haut (bordure transparente de la hauteur de la barre). */
.site-header{ position:sticky; top:0; z-index:100; height:var(--header-h); margin-bottom:calc(var(--header-h) * -1); padding:.75rem .75rem 0; pointer-events:none; }
main > :first-child{ border-top:var(--header-h) solid transparent; }
.head-bar{ pointer-events:auto; position:relative; height:3.75rem; max-width:var(--wrap); margin-inline:auto; padding:0 .5rem 0 1.25rem; display:flex; align-items:center; gap:1rem; background:var(--white); border-radius:999px; box-shadow:0 1px 2px rgba(30,26,23,.06), 0 12px 30px -18px rgba(30,26,23,.35); }
.logo{ font-family:var(--brand); font-size:1.2rem; letter-spacing:.1em; text-decoration:none; color:var(--ink); white-space:nowrap; line-height:1; }
.logo .l1{ font-weight:300; } .logo .l2{ font-weight:600; }
.nav-desktop{ display:none; margin-inline:auto; }
.nav-desktop > ul{ display:flex; gap:.25rem; align-items:center; }
.nav-desktop > ul > li > a{ text-decoration:none; color:var(--ink); font-weight:600; font-size:.9375rem; padding:.6rem 1rem; border-radius:999px; display:inline-flex; align-items:center; gap:.35rem; white-space:nowrap; transition:background-color .2s; }
.nav-desktop > ul > li > a:hover, .nav-desktop > ul > li > a[aria-current="page"], .has-sub.is-open > a, .has-sub:focus-within > a{ background:var(--cream); }
/* « Soins » occupe toute la hauteur de la barre : la souris reste dessus jusqu'au panneau */
.nav-desktop{ align-self:stretch; }
.nav-desktop > ul{ height:100%; }
.has-sub{ height:100%; display:flex; align-items:center; }
.has-sub > a svg{ transition:transform .2s; }
.has-sub.is-open > a svg, .has-sub:focus-within > a svg{ transform:rotate(180deg); }

/* Panneau « Soins » : masque tant qu'il n'est pas ouvert (ses photos ne se chargent qu'a l'ouverture) */
.mega{ display:none; position:absolute; left:0; right:0; top:calc(100% + .75rem); padding:1.75rem; background:var(--white); border-radius:2rem; box-shadow:0 40px 80px -30px rgba(30,26,23,.45); animation:mega-in .25s ease; }
.mega::before{ content:""; position:absolute; left:0; right:0; top:-1rem; height:1rem; }
/* Ouverture : classe .is-open geree par main.js (petit delai de fermeture), survol direct sans JavaScript */
html:not(.js) .has-sub:hover .mega, .has-sub:focus-within .mega, .has-sub.is-open .mega{ display:block; }
@keyframes mega-in{ from{ opacity:0; transform:translateY(-6px); } }
@media (prefers-reduced-motion:reduce){ .mega{ animation:none; } }
.mega-grid{ display:grid; grid-template-columns:repeat(4, minmax(0, 1fr)) 18rem; gap:1.5rem; }
.mega-card{ display:flex; flex-direction:column; gap:.625rem; }
.mega a{ text-decoration:none; color:var(--ink); }
.mega-img{ display:block; height:8.75rem; border-radius:1.25rem; overflow:hidden; }
.mega-img img{ width:100%; height:100%; object-fit:cover; transition:transform .5s ease; }
.mega-card:hover .mega-img img{ transform:scale(1.04); }
.mega-title{ display:flex; justify-content:space-between; align-items:center; gap:.5rem; font-family:var(--serif); font-weight:600; font-size:1.25rem; line-height:1.15; }
.mega-title svg{ flex:none; color:var(--caramel-dk); transition:transform .2s; }
.mega-title:hover svg{ transform:translateX(3px); }
.mega ul{ list-style:none; margin:0; padding:0; display:grid; gap:.4rem; }
.mega ul a{ font-size:.9375rem; color:var(--ink-3); }
.mega ul a:hover{ color:var(--ink); text-decoration:underline; text-underline-offset:3px; }
.mega-quiz{ display:flex; flex-direction:column; background:var(--sage); border-radius:1.5rem; padding:1.5rem; }
.mega-quiz .eyebrow{ margin-bottom:.75rem; }
.mega-quiz-t{ font-family:var(--serif); font-weight:600; font-size:1.5rem; line-height:1.1; color:var(--ink); }
.mega-quiz-t em{ font-weight:400; color:var(--caramel-dk); }
.mega-quiz-p{ margin:.6rem 0 1.25rem; font-size:.9375rem; color:var(--ink-2); }
.mega-quiz .btn{ margin-top:auto; width:100%; }

.head-actions{ margin-left:auto; display:flex; align-items:center; gap:.5rem; }
/* Statut d'ouverture dans la barre : pastille teintee, point qui « respire » quand c'est ouvert */
.head-bar .head-status{ display:none; height:2.25rem; padding:0 .875rem 0 .75rem; gap:.5rem; border-radius:999px; background:#E4EFE7; color:#2B6645; font-size:.8125rem; font-weight:600; white-space:nowrap; }
.head-bar .head-status::before{ width:.5rem; height:.5rem; background:currentColor; animation:st-pulse 2.4s ease-out infinite; }
.head-bar .head-status.closed{ background:#F5E7E2; color:#9A4636; }
.head-bar .head-status.closed::before{ animation:none; }
@keyframes st-pulse{ 0%{ box-shadow:0 0 0 0 rgba(43,102,69,.45); } 70%, 100%{ box-shadow:0 0 0 .45rem rgba(43,102,69,0); } }
@media (prefers-reduced-motion:reduce){ .head-bar .head-status::before{ animation:none; } }
.head-call{ width:2.75rem; height:2.75rem; border-radius:999px; display:inline-flex; align-items:center; justify-content:center; background:var(--cream); color:var(--ink); }
.menu-btn{ height:2.75rem; padding:0 1rem 0 .875rem; border-radius:999px; border:0; background:var(--ink); color:var(--paper); display:inline-flex; align-items:center; gap:.6rem; font-weight:600; font-size:.9375rem; cursor:pointer; }
.menu-btn .bars{ display:flex; flex-direction:column; gap:5px; }
.menu-btn .bars span{ display:block; height:1.5px; background:currentColor; }
.menu-btn .bars span:first-child{ width:16px; } .menu-btn .bars span:last-child{ width:11px; }
.head-tel{ display:none; }
@media (min-width:1024px){
  .site-header{ padding:1.25rem 2.5rem 0; }
  .head-bar{ height:4.25rem; padding:0 .625rem 0 2rem; }
  .nav-desktop{ display:block; }
  .head-call,.menu-btn{ display:none; }
  .head-bar .head-status{ display:inline-flex; margin-right:.5rem; }
  .head-bar .logo{ font-size:1.45rem; }
  .head-tel{ display:inline-flex; min-height:3rem; padding:0 1.35rem; font-size:.9375rem; }
}
/* Ecrans d'ordinateur etroits : on resserre pour que tout tienne sur une ligne */
@media (min-width:1024px) and (max-width:1279px){
  .site-header{ padding-inline:1.25rem; }
  .head-bar{ padding-left:1.5rem; gap:.5rem; }
  .head-bar .head-status{ display:none; }
  .head-bar .logo{ font-size:1.3rem; }
  .nav-desktop > ul > li > a{ padding:.55rem .7rem; font-size:.875rem; }
  .head-tel{ padding:0 1rem; }
  .mega-grid{ grid-template-columns:repeat(4, minmax(0, 1fr)) 15rem; gap:1.125rem; }
}

/* ---------- Menu mobile (plein ecran, hors du header) ---------- */
.mnav{ position:fixed; inset:0; z-index:300; background:var(--paper); display:flex; flex-direction:column; overflow-y:auto; opacity:0; visibility:hidden; transition:opacity .2s, visibility .2s; }
body.menu-open{ overflow:hidden; }
body.menu-open .mnav{ opacity:1; visibility:visible; }
.mnav-top{ flex:none; margin:.75rem .75rem 0; height:3.75rem; padding:0 .5rem 0 1.25rem; display:flex; align-items:center; justify-content:space-between; background:var(--white); border-radius:999px; box-shadow:0 1px 2px rgba(30,26,23,.06), 0 12px 30px -18px rgba(30,26,23,.35); }
.mnav-close{ height:2.75rem; padding:0 1rem 0 .875rem; border-radius:999px; border:0; background:var(--cream); color:var(--ink); display:inline-flex; align-items:center; gap:.5rem; font:inherit; font-weight:600; font-size:.9375rem; cursor:pointer; }
.mnav-body{ flex:1; padding:1.5rem 1rem 1rem; }
.mnav-body .eyebrow{ margin:0 .25rem .75rem; }
.mnav-grid{ display:grid; grid-template-columns:1fr 1fr; gap:.625rem; }
.mnav-grid a{ display:block; padding:.5rem .5rem .75rem; background:var(--white); border-radius:1.375rem; text-decoration:none; box-shadow:0 1px 2px rgba(30,26,23,.06); }
.mnav-grid img{ display:block; width:100%; height:6.5rem; object-fit:cover; border-radius:1rem; }
.mnav-grid span{ display:block; padding:.6rem .375rem 0; font-family:var(--serif); font-weight:600; font-size:1.0625rem; line-height:1.2; color:var(--ink); }
.mnav-quiz{ display:flex; align-items:center; justify-content:space-between; gap:.75rem; margin-top:.75rem; padding:1rem 1rem 1rem 1.125rem; background:var(--sage); border-radius:1.375rem; text-decoration:none; }
.mnav-quiz b{ display:block; font-family:var(--serif); font-weight:600; font-size:1.1875rem; line-height:1.15; color:var(--ink); }
.mnav-quiz em{ font-weight:400; color:var(--caramel-dk); }
.mnav-quiz small{ display:block; margin-top:.15rem; font-size:.875rem; color:var(--ink-3); }
.mnav-quiz-go{ flex:none; width:2.75rem; height:2.75rem; border-radius:999px; background:var(--ink); color:var(--paper); display:flex; align-items:center; justify-content:center; }
.mnav-links{ margin-top:.75rem; padding-inline:.25rem; }
.mnav-links a{ height:3.25rem; display:flex; align-items:center; justify-content:space-between; border-bottom:1px solid var(--line); text-decoration:none; color:var(--ink); font-family:var(--serif); font-weight:600; font-size:1.25rem; }
.mnav-links li:last-child a{ border-bottom:0; }
.mnav-links svg{ color:var(--caramel-dk); }
.mnav-info{ flex:none; margin:0 .75rem .75rem; padding:1.125rem; border-radius:1.375rem; background:var(--pine); color:var(--on-dark-2); }
.mnav-info .status{ color:var(--paper); }
.mnav-info p{ margin:.125rem 0 .875rem 1rem; font-size:.9375rem; }
.mnav-info .actions{ margin:0; }
.mnav-info .btn{ min-height:3.125rem; }
@media (min-width:1024px){ .mnav{ display:none; } }

/* Statut d'ouverture (rempli par JS) */
.status{ display:inline-flex; align-items:center; gap:.5rem; font-weight:600; font-size:.9375rem; color:var(--ink); }
.status::before{ content:""; width:.5rem; height:.5rem; border-radius:9px; background:#2F7A4F; }
.status.closed::before{ background:#A8483A; }
.mnav-info .status::before{ background:#6FCF97; }
.mnav-info .status.closed::before{ background:#F2A28F; }

/* ---------- Hero accueil (fond sapin, photo en arche qui deborde) ---------- */
.hero{ padding-block:1.5rem 0; }
.hero .wrap{ display:grid; gap:2rem; }
.hero h1{ color:var(--paper); font-size:clamp(2.5rem, 1.7rem + 3.6vw, 4.25rem); line-height:1.03; letter-spacing:-.02em; margin-bottom:1rem; }
.hero h1 em{ font-style:italic; font-weight:400; color:var(--caramel-lt); }
.hero .lead{ color:var(--on-dark-2); max-width:34rem; }
.hero .actions{ display:flex; align-items:center; flex-wrap:wrap; gap:1.25rem; }
.hero-status{ display:flex; margin:0 0 1.125rem; font-size:.9375rem; color:var(--on-dark-2); }
.hero-status::before{ background:#6FCF97; }
.hero-status.closed::before{ background:#F2A28F; }
.link-light{ font-weight:600; color:var(--paper); text-decoration:underline; text-decoration-color:var(--caramel-lt); text-underline-offset:5px; }
/* Note Google du hero : carte blanche, comme sur la page Avis */
.hero-visual{ position:relative; }
/* Note Google du hero. Mobile : sous les boutons ; ordinateur : a cheval sur le bord gauche de la photo */
.hero-rating{ display:inline-flex; align-items:center; gap:.875rem; padding:.75rem .75rem .75rem 1rem; background:var(--white); border-radius:1.375rem; color:var(--ink); text-decoration:none; box-shadow:0 18px 40px -24px rgba(0,0,0,.6); }
.hero-rating-inline{ margin-top:1.625rem; }
.hero-rating-photo{ display:none; }
.hr-meta{ display:flex; flex-direction:column; gap:.2rem; line-height:1.15; }
.hr-top{ display:flex; align-items:center; gap:.5rem; }
.hr-num{ font-family:var(--serif); font-weight:600; font-size:1.75rem; line-height:1; color:var(--ink); }
.hero-rating .stars{ font-size:1rem; }
.hr-sub{ font-size:.875rem; color:var(--ink-2); }
.hr-go{ flex:none; width:2.5rem; height:2.5rem; margin-left:.375rem; border-radius:999px; background:var(--cream); display:inline-flex; align-items:center; justify-content:center; color:var(--ink); transition:transform .2s; }
.hero-rating:hover .hr-go{ transform:translateX(3px); }
.hero-media{ position:relative; overflow:hidden; width:min(19rem, 82%); aspect-ratio:15/16; margin:0 auto -9rem; border-radius:999px 999px 1.5rem 1.5rem; z-index:2; }
.hero-media img{ width:100%; height:100%; object-fit:cover; }
.after-hero{ padding-top:calc(9rem + var(--section)); }
@media (min-width:1024px){
  .hero{ padding-block:4rem 0; }
  .hero .wrap{ grid-template-columns:1.1fr .9fr; gap:4rem; align-items:end; }
  .hero-text{ padding-bottom:5rem; }
  .hero-media{ width:100%; max-width:28rem; aspect-ratio:auto; height:36rem; margin:0 0 -6rem auto; border-radius:999px 999px 1.75rem 1.75rem; }
  .hero-visual{ width:100%; max-width:28rem; margin-left:auto; }
  .hero-rating-inline{ display:none; }
  .hero-rating-photo{ display:inline-flex; position:absolute; z-index:3; left:-1.75rem; bottom:2.25rem; padding:1rem 1rem 1rem 1.25rem; white-space:nowrap; }
  .hero-rating-photo .hr-num{ font-size:2.25rem; }
  .after-hero{ padding-top:calc(6rem + var(--section)); }
}
.stars{ color:var(--gold); letter-spacing:.08em; }

/* ---------- En-tete de section ---------- */
.section-head{ margin-bottom:1.5rem; }
.section-head p{ margin:0; }
@media (min-width:1024px){
  .section-head{ display:flex; justify-content:space-between; align-items:flex-end; gap:2rem; margin-bottom:2.75rem; }
  .section-head > div{ max-width:40rem; }
  .section-head h2{ margin:0; }
}

/* ---------- Sliders (cartes qui defilent au doigt) ---------- */
.slider-track{ display:flex; gap:.875rem; overflow-x:auto; scroll-snap-type:x mandatory; scroll-padding-inline:var(--gutter); padding-inline:var(--gutter); margin-inline:calc(var(--gutter) * -1); scrollbar-width:none; -ms-overflow-style:none; }
.slider-track::-webkit-scrollbar{ display:none; }
.slider-track > *{ scroll-snap-align:start; flex:none; }
.slider-controls{ display:flex; align-items:center; gap:.625rem; margin-top:1.25rem; }
html:not(.js) .slider-controls{ display:none; }
.slider-progress{ flex:1; height:3px; border-radius:9px; background:rgba(30,26,23,.14); position:relative; overflow:hidden; margin-right:.5rem; }
.slider-progress span{ position:absolute; top:0; bottom:0; left:0; width:35%; border-radius:9px; background:var(--ink); transition:left .15s ease; }
.slider-btn{ width:2.75rem; height:2.75rem; border-radius:999px; border:1.5px solid rgba(30,26,23,.25); background:transparent; color:var(--ink); display:inline-flex; align-items:center; justify-content:center; cursor:pointer; }
.slider-btn.next{ background:var(--ink); border-color:var(--ink); color:var(--paper); }
.slider-btn:disabled{ opacity:.35; cursor:default; }
/* Au-dela de 1024px, les sliders "grid-lg" deviennent des grilles */
@media (min-width:1024px){
  .grid-lg .slider-track{ display:grid; grid-template-columns:repeat(var(--cols,4),minmax(0,1fr)); gap:1.5rem; overflow:visible; margin:0; padding:0; }
  .grid-lg .slider-controls{ display:none; }
}

/* Cartes de soins */
.svc{ width:14.75rem; text-decoration:none; color:var(--ink); }
.svc-img{ aspect-ratio:4/5; border-radius:var(--r-md); overflow:hidden; }
.svc-img img{ width:100%; height:100%; object-fit:cover; transition:transform .4s ease; }
.svc:hover .svc-img img{ transform:scale(1.03); }
.svc-meta{ display:flex; justify-content:space-between; align-items:flex-end; gap:.75rem; margin-top:.75rem; }
.svc-title{ font-family:var(--serif); font-weight:600; font-size:1.25rem; line-height:1.2; }
.svc-price{ font-size:.9375rem; color:var(--ink-3); margin-top:.125rem; }
.svc .icon-circle{ background:var(--cream); }
.bg-cream .svc .icon-circle{ background:var(--paper); }
@media (min-width:1024px){ .svc{ width:auto; } .svc-title{ font-size:1.4375rem; } }

/* ---------- Specialite (fond sapin) ---------- */
.signature-media{ height:9.5rem; border-radius:var(--r-md); overflow:hidden; margin-bottom:2rem; }
.signature-media img{ width:100%; height:100%; object-fit:cover; }
/* La photo reste visible tant que la video ne joue pas vraiment (iPhone en economie d'energie, format refuse…) */
.signature-media{ position:relative; }
.signature-media video{ position:absolute; inset:0; display:block; width:100%; height:100%; object-fit:cover; opacity:0; transition:opacity .8s ease; }
.signature-media video.is-playing{ opacity:1; }
.numbered{ margin-top:1.75rem; }
.numbered li{ display:flex; gap:1rem; padding:1rem 0; border-top:1px solid rgba(243,236,227,.18); }
.numbered li:last-child{ border-bottom:1px solid rgba(243,236,227,.18); }
.numbered .n{ font-family:var(--serif); font-weight:600; color:var(--caramel-lt); width:1.625rem; flex:none; }
.numbered b{ display:block; color:var(--paper); font-weight:600; }
.numbered span{ font-size:1rem; }
@media (min-width:1024px){
  .signature .wrap{ display:grid; grid-template-columns:1fr 1fr; gap:4.5rem; align-items:center; }
  .signature-media{ height:32.5rem; border-radius:var(--r-xl); margin:0; }
  .numbered{ display:grid; grid-template-columns:1fr 1fr; gap:1.75rem 2rem; }
  .numbered li{ flex-direction:column; gap:.25rem; padding:.875rem 0 0; border-bottom:0!important; border-top-color:rgba(243,236,227,.22); }
}

/* ---------- Avis ---------- */
.g-badge{ width:1.875rem; height:1.875rem; border-radius:999px; background:#fff; display:inline-flex; align-items:center; justify-content:center; flex:none; }
.rating-big{ display:flex; align-items:flex-end; gap:.875rem; margin:.625rem 0 1.5rem; }
.rating-big .num{ font-family:var(--serif); font-weight:600; font-size:3.75rem; line-height:.95; color:var(--ink); }
.rating-big .stars{ font-size:1.125rem; }
.rating-card{ background:var(--white); border-radius:1.375rem; padding:1.125rem 1.25rem; display:flex; align-items:center; gap:1rem; box-shadow:0 12px 32px -18px rgba(30,26,23,.35); text-decoration:none; color:var(--ink); }
.rating-card .num{ font-family:var(--serif); font-weight:600; font-size:1.875rem; color:var(--ink); }
.rating-card .meta{ flex:1; line-height:1.25; }
.rating-card .meta div:last-child{ font-size:.9375rem; color:var(--ink-2); }

.review{ border-radius:var(--r-lg); padding:1.375rem; background:var(--white); color:var(--ink); }
.review-top{ display:flex; justify-content:space-between; align-items:center; gap:.75rem; margin-bottom:.75rem; }
.review-tag{ font-size:.8125rem; font-weight:600; color:var(--caramel-dk); background:var(--cream); border-radius:999px; padding:.2rem .65rem; text-align:right; }
.review p{ margin:0 0 1rem; color:var(--ink); }
.review-by{ display:flex; align-items:center; gap:.75rem; }
.avatar{ width:2.5rem; height:2.5rem; border-radius:999px; background:var(--sand); color:var(--ink); display:inline-flex; align-items:center; justify-content:center; font-family:var(--serif); font-weight:600; flex:none; }
.review-by b{ display:block; font-weight:600; line-height:1.3; }
.review-by small{ display:block; font-size:.875rem; color:var(--ink-3); line-height:1.3; }
.review.tone-sage{ background:var(--sage); } .review.tone-sage .review-tag{ background:var(--white); color:var(--pine); } .review.tone-sage .avatar{ background:#C9D3C7; }
.review.tone-cream{ background:var(--cream); } .review.tone-cream .review-tag{ background:var(--white); } .review.tone-cream .avatar{ background:var(--white); }
.review.tone-white{ border:1px solid rgba(30,26,23,.07); } .review.tone-white .avatar{ background:#D9C3A5; }
.review.featured{ background:var(--pine); color:var(--on-dark); }
.review.featured p{ font-family:var(--serif); font-size:1.3125rem; line-height:1.4; color:var(--paper); }
.review.featured .avatar{ background:var(--caramel); color:#fff; }
.review.featured .review-by b{ color:var(--paper); }
.review.featured .review-by small{ color:rgba(243,236,227,.75); }
.review .more{ display:none; background:none; border:0; padding:0; margin:-.5rem 0 1rem; font-weight:600; font-size:.9375rem; color:var(--caramel-dk); cursor:pointer; }
html.js .review.is-long:not(.open) p{ display:-webkit-box; -webkit-line-clamp:5; -webkit-box-orient:vertical; overflow:hidden; }
html.js .review.is-long .more{ display:inline-block; }
.review-photo{ position:relative; margin:0; border-radius:var(--r-lg); overflow:hidden; height:13.75rem; }
.review-photo img{ width:100%; height:100%; object-fit:cover; }
.review-photo figcaption{ position:absolute; left:.75rem; right:.75rem; bottom:.75rem; background:rgba(251,248,244,.95); border-radius:1rem; padding:.75rem .875rem; font-size:.9375rem; line-height:1.4; color:var(--ink); }
.review-photo a{ color:var(--caramel-dk); font-weight:600; }
.review-list{ display:grid; gap:.75rem; }
@media (min-width:1024px){
  .review-list{ display:block; columns:3 20rem; column-gap:1.25rem; }
  .review-list > *{ break-inside:avoid; margin-bottom:1.25rem; }
  html.js .review.is-long:not(.open) p{ -webkit-line-clamp:unset; display:block; }
  html.js .review.is-long .more{ display:none; }
  .review-photo{ height:21.25rem; }
  .review{ padding:1.625rem; }
  .review.featured p{ font-size:1.4375rem; }
}
/* Bloc avis de l'accueil */
.home-reviews .review{ width:18.5rem; }
@media (min-width:1024px){
  .home-reviews .wrap{ display:grid; grid-template-columns:1fr 2fr; gap:2rem; align-items:start; }
  .home-reviews .slider-track{ --cols:2; }
  .home-reviews .review{ width:auto; }
  .home-reviews .review:nth-child(n+3){ display:none; }
  .rating-big .num{ font-size:5.5rem; }
}

/* Page avis : ouverture */
.quote-hero{ padding-block:1rem 2.25rem; }
.quote-mark{ font-family:var(--serif); font-size:5.6rem; line-height:.6; color:var(--caramel); height:2.5rem; margin-top:1rem; }
.quote-text{ font-family:var(--serif); font-style:italic; font-weight:400; font-size:clamp(2.1rem, 1.5rem + 3vw, 3.6rem); line-height:1.12; letter-spacing:-.01em; color:var(--ink); margin:0 0 .875rem; }
.chips{ display:flex; flex-wrap:wrap; gap:.5rem; }
.chips span{ border-radius:999px; padding:.5rem .875rem; background:var(--cream); color:var(--ink); font-size:.9375rem; font-weight:600; }
.chips span:first-child{ background:var(--pine); color:var(--paper); }
.quote-hero .chips span{ background:var(--paper); } .quote-hero .chips span:first-child{ background:var(--pine); }
.quote-photo{ display:none; }
@media (min-width:1024px){
  .quote-hero{ padding-block:2rem 5.5rem; }
  .quote-hero .grid{ display:grid; grid-template-columns:1fr 1fr; gap:4.5rem; align-items:center; }
  .quote-mark{ font-size:8.75rem; height:4rem; margin-top:2.25rem; }
  .quote-photo{ display:block; position:relative; }
  .quote-photo .ph{ height:35rem; border-radius:17.5rem 17.5rem 2rem 2rem; overflow:hidden; }
  .quote-photo .ph img{ width:100%; height:100%; object-fit:cover; }
  .quote-photo .rating-card{ position:absolute; left:-1.75rem; bottom:2.25rem; padding:1.25rem 1.5rem; }
  .quote-photo .rating-card .num{ font-size:2.5rem; }
  .quote-hero .rating-card.mobile-only{ display:none; }
}

/* Carte d'appel (photo + fond sapin) */
.cta-card{ border-radius:var(--r-xl); overflow:hidden; background:var(--pine); color:var(--on-dark-2); }
.cta-card .ph{ height:9.5rem; }
.cta-card .ph img{ width:100%; height:100%; object-fit:cover; }
.cta-card .body{ padding:1.625rem 1.375rem 1.5rem; }
.cta-card h2{ color:var(--paper); font-size:1.625rem; }
@media (min-width:768px){
  .cta-card{ display:grid; grid-template-columns:1fr 1fr; }
  .cta-card .ph{ height:auto; min-height:20rem; }
  .cta-card .body{ padding:3.5rem; display:flex; flex-direction:column; justify-content:center; align-items:flex-start; }
  .cta-card h2{ font-size:2.5rem; }
}

/* ---------- Cosmetiques ---------- */
.product{ width:9.75rem; }
.product img{ aspect-ratio:1; width:100%; object-fit:cover; border-radius:1rem; }
.product h3{ font-family:var(--sans); font-weight:600; font-size:1rem; line-height:1.3; margin:.625rem 0 .125rem; letter-spacing:0; }
.product p{ font-size:.875rem; color:var(--ink-3); margin:0; }
@media (min-width:1024px){ .product{ width:auto; } .product img{ border-radius:var(--r-md); } .products .slider-track{ --cols:5; } }

/* ---------- Venir a l'institut ---------- */
.visit-media{ height:14.375rem; border-radius:var(--r-md); overflow:hidden; margin-bottom:1.75rem; }
.visit-media img{ width:100%; height:100%; object-fit:cover; }
.hours{ background:var(--cream); border-radius:var(--r-md); padding:.5rem 1.25rem; }
.bg-cream .hours{ background:var(--paper); }
.hours li{ display:flex; justify-content:space-between; align-items:center; gap:1rem; padding:.7rem 0; border-bottom:1px solid rgba(30,26,23,.1); font-size:1rem; }
.hours li:last-child{ border-bottom:0; }
.hours li.closed{ color:var(--ink-3); }
.hours li.is-today{ font-weight:600; color:var(--ink); }
.hours .today{ font-size:.75rem; font-weight:600; background:var(--pine); color:var(--on-dark); border-radius:999px; padding:.1rem .6rem; margin-left:.5rem; }
@media (min-width:1024px){
  .visit .wrap{ display:grid; grid-template-columns:1fr 1fr; gap:4.5rem; align-items:center; }
  .visit-media{ height:35rem; border-radius:var(--r-xl); margin:0; }
}

/* ---------- En-tete des pages interieures ---------- */
.page-hero{ padding-block:1.125rem 2.25rem; }
.page-hero h1{ margin-bottom:.75rem; }
.breadcrumb ol{ display:flex; flex-wrap:wrap; gap:.4rem; font-size:.875rem; color:var(--ink-3); margin-bottom:1.125rem; }
.breadcrumb a{ color:var(--ink-2); }
.breadcrumb li + li::before{ content:"/"; margin-right:.4rem; }
.tags{ display:flex; flex-wrap:wrap; gap:.5rem; margin:1.125rem 0 0; }
.tags span{ background:var(--cream); border-radius:999px; padding:.35rem .875rem; font-size:.9375rem; font-weight:600; color:var(--ink); }
.page-hero-media{ border-radius:1.375rem; overflow:hidden; height:15.625rem; margin-top:1.625rem; }
.page-hero-media img{ width:100%; height:100%; object-fit:cover; }
@media (min-width:1024px){
  .page-hero{ padding-block:2rem 4.5rem; }
  .page-hero .grid{ display:grid; grid-template-columns:1.05fr 1fr; gap:4rem; align-items:center; }
  .page-hero-media{ height:31.25rem; margin:0; border-radius:var(--r-xl); }
  .page-hero.text-only .lead{ max-width:44rem; }
}

/* Benefices (regles fines, pas de cartes) */
.benefits{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:1.375rem 1rem; }
.benefits > div{ border-top:1.5px solid var(--ink); padding-top:.75rem; }
.benefits b{ display:block; color:var(--ink); line-height:1.3; }
.benefits span{ display:block; font-size:.9375rem; line-height:1.5; margin-top:.25rem; }
@media (min-width:1024px){ .benefits{ grid-template-columns:repeat(3,minmax(0,1fr)); gap:2.25rem 2.5rem; } .benefits b{ font-family:var(--serif); font-size:1.375rem; } .benefits span{ font-size:1.0625rem; } }

/* Tableau comparatif */
.compare-wrap{ border-radius:var(--r-md); overflow:hidden; border:1px solid var(--line); }
.compare{ font-size:.9375rem; width:100%; border-collapse:collapse; }
.compare th,.compare td{ padding:.75rem; text-align:left; vertical-align:top; }
.compare thead th{ background:var(--pine); color:var(--paper); font-weight:600; }
.compare tbody th{ font-weight:600; color:var(--ink); }
.compare tbody tr + tr{ border-top:1px solid rgba(30,26,23,.1); }
.compare tbody tr:nth-child(even){ background:var(--cream); }
.compare-src{ font-size:.875rem; color:var(--ink-3); margin-top:.75rem; }
@media (min-width:768px){ .compare{ font-size:1.0625rem; } .compare th,.compare td{ padding:1rem 1.25rem; } }

/* Onglets (tarifs femme / homme) */
.tablist{ display:grid; grid-template-columns:1fr 1fr; padding:.25rem; border-radius:999px; background:var(--sand); margin-bottom:1.125rem; max-width:26rem; }
.tablist button{ height:2.75rem; border:0; border-radius:999px; background:transparent; font-weight:600; cursor:pointer; color:var(--ink); }
.tablist button[aria-selected="true"]{ background:var(--ink); color:var(--paper); }
html:not(.js) .tablist{ display:none; }
html:not(.js) [role="tabpanel"][hidden]{ display:block!important; margin-top:1rem; }
.tabpanel-title{ display:none; }
html:not(.js) .tabpanel-title{ display:block; }

/* Listes de prix et carte des soins */
.price-card{ background:var(--paper); border-radius:var(--r-md); padding:.25rem 1.125rem; }
.price-list li{ display:flex; justify-content:space-between; align-items:baseline; gap:.75rem; padding:.875rem 0; border-bottom:1px solid rgba(30,26,23,.1); color:var(--ink); }
.price-list li:last-child{ border-bottom:0; }
.price-list small{ display:block; font-size:.875rem; color:var(--ink-3); }
.price-list .p{ font-family:var(--serif); font-weight:600; font-size:1.125rem; white-space:nowrap; }
.price-note{ font-size:.9375rem; color:var(--ink-3); margin:0; padding:.875rem 0; border-top:1px solid rgba(30,26,23,.1); }
.menu-item{ display:grid; grid-template-columns:1fr auto; gap:.25rem 1.5rem; padding:1.25rem 0; border-bottom:1px solid rgba(30,26,23,.1); }
.menu-item:first-child{ border-top:1.5px solid var(--ink); }
.menu-item h3{ margin:0; font-size:1.1875rem; }
.menu-item .p{ grid-row:1 / span 2; grid-column:2; text-align:right; font-family:var(--serif); font-weight:600; font-size:1.125rem; color:var(--ink); white-space:nowrap; }
.menu-item .p small{ display:block; font-family:var(--sans); font-weight:400; font-size:.8125rem; color:var(--ink-3); }
.menu-item p{ grid-column:1; margin:.25rem 0 0; font-size:1rem; }
.menu-item a{ color:var(--caramel-dk); font-weight:600; }
@media (max-width:519px){ .menu-item{ grid-template-columns:1fr; } .menu-item .p{ grid-row:auto; grid-column:1; text-align:left; margin-top:.375rem; } }
.price-cols{ display:grid; gap:2rem; }
.price-cols h2{ font-size:1.5rem; display:flex; justify-content:space-between; align-items:baseline; gap:1rem; margin-bottom:.75rem; }
.price-cols h2 a{ font-family:var(--sans); font-size:.9375rem; font-weight:600; color:var(--caramel-dk); letter-spacing:0; }
@media (min-width:1024px){ .price-cols{ grid-template-columns:1fr 1fr; gap:3rem 4rem; } }

/* Carte des soins par rubriques */
.carte{ background:var(--paper); border-radius:var(--r-md); padding:1.25rem 1.125rem .5rem; }
.bg-cream .carte{ background:var(--paper); }
.section:not(.bg-cream) .carte{ background:var(--cream); }
.carte-group + .carte-group{ margin-top:1.25rem; padding-top:1.25rem; border-top:1.5px solid rgba(30,26,23,.14); }
.carte-group h3{ font-size:1.125rem; margin:0 0 .25rem; }
.carte-desc{ font-size:.9375rem; margin:0 0 .25rem; color:var(--ink-2); }
.carte-desc a{ color:var(--caramel-dk); font-weight:600; }
.carte .price-list li{ padding:.65rem 0; }
.carte .price-note{ margin-top:.5rem; font-style:italic; }
@media (min-width:1024px){
  .carte{ padding:1.75rem 2rem 1rem; }
  .carte.cols, #tarifs .carte, .tabpanels .carte{ columns:2; column-gap:3rem; }
  .carte.cols .carte-group, #tarifs .carte .carte-group, .tabpanels .carte .carte-group{ break-inside:avoid; margin-bottom:1.5rem; }
  #tarifs .carte .carte-group + .carte-group, .tabpanels .carte .carte-group + .carte-group{ margin-top:0; padding-top:0; border-top:0; margin-bottom:1.5rem; }
  #tarifs .carte .price-note, .tabpanels .carte .price-note{ column-span:all; }
}

/* Bande de photos de soins */
.photo-strip{ margin-bottom:2.25rem; }
.photo-strip .slider-track > figure{ width:12.5rem; margin:0; }
.photo-strip img{ aspect-ratio:375/420; width:100%; object-fit:cover; border-radius:var(--r-md); }
.photo-strip figcaption{ font-family:var(--brand); font-size:.75rem; letter-spacing:.14em; text-transform:uppercase; margin-top:.625rem; color:var(--ink-2); }
@media (min-width:1024px){ .photo-strip .slider-track > figure{ width:auto; } }

/* FAQ */
.faq details{ border-bottom:1px solid rgba(30,26,23,.12); }
.faq summary{ list-style:none; min-height:3.75rem; padding:.875rem 0; display:flex; align-items:center; justify-content:space-between; gap:1rem; cursor:pointer; font-weight:600; font-size:1.0625rem; line-height:1.35; color:var(--ink); }
.faq summary::-webkit-details-marker{ display:none; }
.faq summary::after{ content:"+"; flex:none; width:2rem; height:2rem; border-radius:999px; background:var(--cream); display:flex; align-items:center; justify-content:center; font-size:1.25rem; font-weight:400; color:var(--caramel-dk); transition:transform .2s; }
.bg-cream .faq summary::after{ background:var(--paper); }
.faq details[open] summary::after{ transform:rotate(45deg); }
.faq details p{ margin:0 0 1.125rem; font-size:1rem; max-width:46rem; }
@media (min-width:1024px){ .split{ display:grid; grid-template-columns:.85fr 1.15fr; gap:4rem; } .split > :first-child h2{ position:sticky; top:calc(var(--header-h) + 2rem); } .faq summary{ font-size:1.1875rem; } }

/* Bloc d'appel sapin */
.cta-box{ border-radius:var(--r-lg); background:var(--pine); color:var(--on-dark-2); padding:2rem 1.375rem; text-align:center; }
.cta-box h2{ color:var(--paper); font-size:1.625rem; }
.cta-box .actions{ justify-content:center; }
@media (min-width:768px){ .cta-box{ padding:3.5rem 3rem; } .cta-box h2{ font-size:2.375rem; } }

/* Mise en avant (photo + texte) */
.feature{ display:grid; gap:1.5rem; align-items:center; }
.feature-media{ border-radius:var(--r-md); overflow:hidden; aspect-ratio:5/4; }
.feature-media img{ width:100%; height:100%; object-fit:cover; }
@media (min-width:1024px){ .feature{ grid-template-columns:1fr 1fr; gap:4.5rem; } .feature-media{ border-radius:var(--r-xl); } }

/* Contact : carte en facade */
.map{ position:relative; border-radius:var(--r-md); overflow:hidden; aspect-ratio:4/3; background:var(--sand); }
.map img{ width:100%; height:100%; object-fit:cover; filter:saturate(.75); }
.map button{ position:absolute; left:50%; bottom:1rem; transform:translateX(-50%); }
.map iframe{ position:absolute; inset:0; width:100%; height:100%; border:0; }
.contact-grid{ display:grid; gap:2rem; }
.contact-big{ font-family:var(--serif); font-weight:600; font-size:1.625rem; line-height:1.35; }
.contact-big a{ text-decoration:none; color:var(--ink); }
.label{ font-family:var(--brand); font-size:.75rem; letter-spacing:.18em; text-transform:uppercase; color:var(--caramel-dk); margin:0 0 .5rem; }
@media (min-width:1024px){ .contact-grid{ grid-template-columns:1fr 1.2fr; gap:4rem; align-items:start; } }

/* Pages legales */
.prose{ max-width:46rem; }
.prose h2{ font-size:1.5rem; margin-top:2.25rem; }

/* ---------- Pied de page ---------- */
.site-footer{ background:var(--pine); color:var(--on-dark-2); padding-block:2.75rem 7rem; font-size:1rem; }
.site-footer a{ color:var(--on-dark); text-decoration:none; }
.site-footer a:hover{ text-decoration:underline; }
.site-footer .logo{ color:var(--paper); }
.footer-follow{ margin-top:1.75rem; }
.footer-follow h2{ font-family:var(--brand); font-weight:500; font-size:.75rem; letter-spacing:.18em; text-transform:uppercase; color:var(--caramel-lt); margin:0 0 .75rem; }
.site-footer .footer-social{ width:2.75rem; height:2.75rem; border-radius:999px; background:var(--paper); color:var(--pine); display:inline-flex; align-items:center; justify-content:center; transition:background-color .2s, transform .2s; }
.site-footer .footer-social:hover{ background:var(--caramel-lt); transform:translateY(-2px); text-decoration:none; }
.footer-grid{ display:grid; grid-template-columns:1fr 1fr; gap:2rem 1.5rem; margin-top:1.75rem; }
.footer-grid h2{ font-family:var(--brand); font-weight:500; font-size:.75rem; letter-spacing:.18em; text-transform:uppercase; color:var(--caramel-lt); margin:0 0 .75rem; }
.footer-grid ul{ display:grid; gap:.5rem; }
.footer-grid .wide{ grid-column:1 / -1; }
.footer-bottom{ margin-top:2rem; padding-top:1.25rem; border-top:1px solid rgba(243,236,227,.15); font-size:.875rem; color:rgba(243,236,227,.65); display:flex; flex-wrap:wrap; justify-content:space-between; gap:.75rem; }
@media (min-width:1024px){
  .site-footer{ padding-block:4.5rem 2rem; }
  .footer-top{ display:grid; grid-template-columns:1.3fr 3fr; gap:3rem; }
  .footer-grid{ grid-template-columns:repeat(3,1fr); margin-top:0; }
  .footer-grid .wide{ grid-column:auto; }
}

/* ---------- Barre d'appel flottante (mobile) ---------- */
.callbar{ position:fixed; left:.75rem; right:.75rem; bottom:max(.75rem, env(safe-area-inset-bottom)); z-index:90; height:3.75rem; border-radius:999px; background:var(--ink); display:grid; grid-template-columns:1fr 1fr; gap:.375rem; padding:.375rem; box-shadow:0 10px 30px rgba(30,26,23,.25); }
/* La barre n apparait qu au defilement (le haut de page contient deja l appel) */
.callbar{ transition:transform .35s ease, opacity .35s ease, visibility .35s; }
html.js .callbar[data-reveal]:not(.is-shown){ transform:translateY(calc(100% + 1.5rem)); opacity:0; visibility:hidden; }
@media (prefers-reduced-motion:reduce){ .callbar{ transition:none; } }
.callbar a{ border-radius:999px; display:flex; align-items:center; justify-content:center; gap:.5rem; color:var(--paper); text-decoration:none; font-weight:600; }
.callbar a:first-child{ background:var(--caramel-dk); color:#fff; }
@media (min-width:1024px){ .callbar{ display:none; } }

@media (prefers-reduced-motion:reduce){ *,*::before,*::after{ transition:none!important; scroll-behavior:auto!important; } }

/* ---------- Bandeau cookies (GA4) ---------- */
.consent{ position:fixed; left:.75rem; right:.75rem; bottom:max(.75rem, env(safe-area-inset-bottom)); z-index:200; background:var(--white); color:var(--ink-2); border-radius:var(--r-lg); padding:1.125rem 1.125rem 1rem; box-shadow:0 18px 50px -12px rgba(30,26,23,.35); font-size:.9375rem; line-height:1.45; }
.consent p{ margin:0 0 .875rem; }
.consent a{ color:var(--ink); }
.consent-actions{ display:grid; grid-template-columns:1fr 1fr; gap:.5rem; }
.consent .btn{ min-height:2.875rem; padding:0 1rem; }
@media (min-width:768px){
  .consent{ left:auto; right:1.5rem; bottom:1.5rem; max-width:26rem; }
}
.linklike{ background:none; border:0; padding:0; font:inherit; color:inherit; text-decoration:underline; text-underline-offset:3px; cursor:pointer; }

/* ---------- Quiz « Quel soin pour ma peau ? » : ambiance zen ---------- */
.zen{ position:relative; overflow:hidden; background:var(--sage); padding-block:1.25rem 4rem; }
.zen-wrap{ position:relative; max-width:58rem; text-align:center; }
.zen .breadcrumb{ text-align:left; }
.zen .eyebrow{ justify-content:center; margin-top:2rem; }
.zen h1{ font-size:clamp(2.5rem, 1.8rem + 3.4vw, 4.25rem); line-height:1.02; letter-spacing:-.02em; margin:0 0 .875rem; }
.zen h1 em{ font-weight:400; color:var(--caramel-dk); }
.zen-lead{ margin:0 auto 2.25rem; max-width:30rem; font-size:1.0625rem; color:var(--ink-2); }
/* Ondes : des cercles fins qui s'elargissent tres lentement, comme des ronds dans l'eau */
.zen-waves{ position:absolute; left:50%; top:9rem; width:56rem; max-width:none; transform:translateX(-50%); pointer-events:none; }
.zen-waves circle{ fill:none; stroke:var(--pine); stroke-width:.6; opacity:0; transform-origin:300px 300px; animation:zen-wave 12s linear infinite; }
.zen-waves circle:nth-child(2){ animation-delay:-4s; }
.zen-waves circle:nth-child(3){ animation-delay:-8s; }
@keyframes zen-wave{ 0%{ transform:scale(.6); opacity:0; } 15%{ opacity:.22; } 100%{ transform:scale(2.4); opacity:0; } }

.quiz{ position:relative; max-width:46rem; margin-inline:auto; text-align:left; background:var(--white); border-radius:2rem; padding:1.75rem 1.25rem 1.5rem; box-shadow:0 30px 60px -30px rgba(38,48,42,.35); }
@media (min-width:640px){ .quiz{ padding:2.5rem 2.5rem 2.25rem; } }
.quiz-progress{ height:3px; margin:0 0 1.5rem; background:var(--sage); border-radius:3px; overflow:hidden; }
.quiz-progress span{ display:block; height:100%; width:0; background:var(--caramel); transition:width .6s cubic-bezier(.2,.7,.2,1); }
.quiz-step, .quiz-result{ animation:zen-in .55s cubic-bezier(.2,.7,.2,1); }
@keyframes zen-in{ from{ opacity:0; transform:translateY(10px); } to{ opacity:1; transform:none; } }
.quiz-count{ margin:0 0 .5rem; font-family:var(--brand); font-weight:500; font-size:.75rem; letter-spacing:.18em; text-transform:uppercase; color:var(--ink-3); }
.quiz-q{ font-size:clamp(1.5rem, 1.25rem + 1.2vw, 2rem); line-height:1.15; margin:0 0 1.5rem; outline:none; }

.quiz-tiles{ display:grid; grid-template-columns:1fr 1fr; gap:.75rem; }
@media (min-width:640px){ .quiz-tiles{ grid-template-columns:repeat(4, 1fr); } }
.quiz-tile{ display:flex; flex-direction:column; align-items:center; gap:.75rem; padding:1.25rem .75rem 1.125rem; border:1px solid var(--line); border-radius:1.5rem; background:var(--paper); color:var(--ink); font:inherit; font-weight:600; cursor:pointer; transition:transform .25s ease, box-shadow .25s ease, border-color .25s ease; }
.quiz-tile-img{ width:4.75rem; height:4.75rem; border-radius:50%; overflow:hidden; }
.quiz-tile-img img{ width:100%; height:100%; object-fit:cover; transition:transform .5s ease; }
.quiz-tile:hover{ transform:translateY(-3px); box-shadow:0 14px 28px -18px rgba(30,26,23,.45); border-color:transparent; }
.quiz-tile:hover img{ transform:scale(1.08); }

.quiz-rows{ display:grid; border-top:1px solid var(--line); }
.quiz-row{ display:flex; align-items:center; justify-content:space-between; gap:1rem; min-height:3.75rem; padding:.875rem .25rem; border:0; border-bottom:1px solid var(--line); background:none; color:var(--ink); font:inherit; font-size:1.0625rem; font-weight:600; text-align:left; cursor:pointer; }
.quiz-row svg{ flex:none; color:var(--caramel-dk); transition:transform .25s ease; }
.quiz-row:hover svg{ transform:translateX(4px); }
.quiz-tile:focus-visible, .quiz-row:focus-visible, .quiz-back:focus-visible{ outline:2px solid var(--caramel); outline-offset:3px; }
.quiz-back{ display:inline-flex; align-items:center; gap:.45rem; height:2.375rem; margin-top:1.5rem; padding:0 .95rem; border:1px solid var(--line); border-radius:999px; background:var(--paper); font:inherit; font-size:.875rem; font-weight:600; color:var(--ink-2); cursor:pointer; transition:border-color .2s, color .2s; }
.quiz-back:hover{ border-color:var(--ink); color:var(--ink); }
.quiz-result-top{ display:flex; align-items:center; justify-content:space-between; gap:1rem; margin-bottom:.5rem; }
.quiz-result-top .eyebrow, .quiz-result-top .quiz-back{ margin:0; }

.quiz-result{ display:grid; gap:1.25rem; }
.quiz-result-media{ aspect-ratio:16/9; border-radius:1.375rem; overflow:hidden; }
.quiz-result-media img{ width:100%; height:100%; object-fit:cover; }
@media (min-width:640px){ .quiz-result{ grid-template-columns:15rem 1fr; gap:2rem; align-items:start; } .quiz-result-media{ aspect-ratio:3/4; } }
.quiz-result .eyebrow{ justify-content:flex-start; margin:0 0 .5rem; }
.quiz-result .quiz-q{ margin-bottom:.75rem; }
.quiz-result-body > p{ margin:0 0 1rem; }
.quiz-price{ display:inline-block; padding:.35rem .9rem; border-radius:999px; background:var(--sage); font-weight:600; color:var(--pine); }
.quiz-actions{ display:grid; gap:.625rem; margin-top:.25rem; }
@media (min-width:480px){ .quiz-actions{ display:flex; flex-wrap:wrap; } }
@media (prefers-reduced-motion:reduce){ .zen-waves circle, .quiz-step, .quiz-result{ animation:none; } .zen-waves{ display:none; } }

.quiz-guide{ display:grid; gap:1.75rem; }
@media (min-width:900px){ .quiz-guide{ grid-template-columns:1fr 1fr; gap:2rem 3rem; } }
.quiz-guide h3{ margin:0 0 .5rem; padding-bottom:.5rem; border-bottom:1.5px solid var(--ink); }
.quiz-guide ul{ list-style:none; margin:0; padding:0; }
.quiz-guide li{ display:grid; grid-template-columns:1fr auto; gap:.15rem 1rem; padding:.75rem 0; border-bottom:1px solid var(--line); }
.quiz-guide li > span:first-child{ grid-column:1 / -1; font-size:.875rem; color:var(--ink-3); }
.quiz-guide li a{ font-weight:600; color:var(--ink); }
.quiz-guide .p{ color:var(--ink-2); white-space:nowrap; }

/* Acces au quiz : bandeau clair (accueil) et ligne de lien (pages visage / corps) */
.quiz-band{ display:grid; gap:1rem; margin-top:2rem; padding:1.375rem 1.25rem; border-radius:1.5rem; background:var(--paper); }
.quiz-band-k{ margin:0; font-size:.9375rem; color:var(--ink-3); }
.quiz-band-t{ margin:0; font-family:var(--serif); font-weight:600; font-size:1.3125rem; line-height:1.2; color:var(--ink); }
.quiz-band-chips{ display:flex; flex-wrap:wrap; gap:.5rem; }
.quiz-band-chips a{ display:inline-flex; align-items:center; min-height:2.75rem; padding:0 1.125rem; border-radius:999px; border:1px solid var(--line); background:var(--white); color:var(--ink); font-weight:600; font-size:.9375rem; text-decoration:none; transition:border-color .2s, transform .2s; }
.quiz-band-chips a:hover{ border-color:var(--ink); transform:translateY(-2px); }
@media (min-width:900px){ .quiz-band{ grid-template-columns:auto 1fr; align-items:center; gap:2rem; padding:1.5rem 1.75rem; } .quiz-band-chips{ justify-content:flex-end; } }
.quiz-band-one{ background:var(--white); }
@media (min-width:900px){ .quiz-band-one{ grid-template-columns:1fr auto; } }

/* ---------- Page Tarifs : recherche, categories collantes, forfaits, rubriques repliables ---------- */
.tz-hero{ background:var(--sage); padding-block:1.25rem 2rem; }
.tz-hero .eyebrow{ margin-top:1.5rem; }
.tz-hero h1{ font-size:clamp(2.5rem, 1.8rem + 3.4vw, 4.25rem); line-height:1.02; letter-spacing:-.02em; margin:0 0 1.25rem; }
.tz-hero h1 em{ font-weight:400; color:var(--caramel-dk); }
.tsearch{ position:relative; display:flex; align-items:center; height:3.625rem; max-width:40rem; border-radius:999px; background:var(--white); box-shadow:0 1px 2px rgba(30,26,23,.06), 0 18px 40px -24px rgba(30,26,23,.45); }
.tsearch input{ flex:1; min-width:0; height:100%; padding:0 1rem 0 1.375rem; border:0; border-radius:999px; background:transparent; font:inherit; font-size:1rem; font-weight:600; color:var(--ink); outline:none; }
.tsearch input::-webkit-search-cancel-button{ -webkit-appearance:none; }
.tsearch:focus-within{ box-shadow:0 0 0 2px var(--ink), 0 18px 40px -24px rgba(30,26,23,.45); }
.tsearch-hint{ position:absolute; left:1.375rem; top:50%; transform:translateY(-50%); pointer-events:none; color:var(--ink-3); white-space:nowrap; display:flex; align-items:center; gap:.3rem; }
.tsearch-hint b{ color:var(--ink); font-weight:600; padding-right:2px; border-right:2px solid var(--caramel); animation:tz-caret 1s steps(1) infinite; min-height:1.2em; }
@keyframes tz-caret{ 50%{ border-right-color:transparent; } }
.tsearch.is-typing .tsearch-hint, .tsearch:focus-within .tsearch-hint{ display:none; }
.tsearch-btn{ flex:none; width:2.875rem; height:2.875rem; margin-right:.375rem; border:0; border-radius:999px; background:var(--ink); color:var(--paper); display:inline-flex; align-items:center; justify-content:center; cursor:pointer; }
.tsearch-status{ margin:.75rem 0 0 .5rem; min-height:1.25rem; font-size:.875rem; color:var(--ink-2); }
.tsearch-status button{ margin-left:.5rem; background:none; border:0; padding:0; font:inherit; font-weight:600; color:var(--ink); text-decoration:underline; text-underline-offset:3px; cursor:pointer; }
@media (min-width:1024px){
  .tz-hero{ padding-block:2rem 3.5rem; text-align:center; }
  .tz-hero .breadcrumb{ text-align:left; }
  .tz-hero .eyebrow{ justify-content:center; }
  .tsearch{ height:4rem; margin-inline:auto; }
  .tsearch input, .tsearch-hint{ font-size:1.0625rem; }
  .tsearch-btn{ width:3.25rem; height:3.25rem; }
}

.tcats{ background:var(--paper); border-bottom:1px solid var(--line); }
.tcats ul{ list-style:none; margin:0; padding:.75rem 0; display:flex; gap:.5rem; overflow-x:auto; scrollbar-width:none; margin-inline:calc(var(--gutter) * -1); padding-inline:var(--gutter); }
.tcats ul::-webkit-scrollbar{ display:none; }
.tcats a{ display:inline-flex; align-items:center; gap:.625rem; height:2.5rem; padding:0 1rem; border-radius:999px; border:1px solid var(--line); background:var(--white); color:var(--ink); text-decoration:none; font-size:.875rem; white-space:nowrap; transition:border-color .2s; }
.tcats a:hover{ border-color:var(--ink); }
.tcats-img, .tcats small{ display:none; }
@media (min-width:1024px){
  .tcats ul{ display:grid; grid-template-columns:repeat(5, minmax(0, 1fr)); gap:.75rem; padding-block:1rem; overflow:visible; margin-inline:0; padding-inline:0; }
  .tcats a{ height:auto; padding:.5rem 1rem .5rem .5rem; gap:.75rem; }
  .tcats-img{ display:block; flex:none; width:3rem; height:3rem; border-radius:50%; overflow:hidden; }
  .tcats-img img{ width:100%; height:100%; object-fit:cover; }
  .tcats a > span:last-child{ display:flex; flex-direction:column; line-height:1.2; white-space:normal; }
  .tcats small{ display:block; font-size:.8125rem; color:var(--ink-3); }
}

.tz-list{ padding-block:1.5rem 3rem; }
.tcat{ padding-top:1.5rem; scroll-margin-top:calc(var(--header-h) + .5rem); }
@media (min-width:1024px){ .tcat{ padding-top:2.5rem; } }
.tcat-head{ display:flex; align-items:center; gap:.875rem; margin-bottom:1rem; }
.tcat-img{ flex:none; width:3.25rem; height:3.25rem; border-radius:50%; overflow:hidden; }
.tcat-img img{ width:100%; height:100%; object-fit:cover; }
.tcat-head h2{ margin:0; font-size:clamp(1.5rem, 1.3rem + .9vw, 2.125rem); line-height:1.1; }
.tcat-head p{ margin:.2rem 0 0; font-size:.875rem; color:var(--ink-3); }
.tcat-head a{ color:var(--ink-2); }
.tcat-body{ display:grid; gap:.75rem; }
.tcat-groups{ display:grid; gap:.5rem; align-content:start; align-items:start; }
@media (min-width:1024px){
  .tcat-body{ grid-template-columns:1fr 1fr; gap:1.5rem; align-items:start; }
  .tcat:not(.has-offers) .tcat-groups{ grid-column:1 / -1; grid-template-columns:1fr 1fr; gap:.5rem 1.5rem; }
}

.toffers{ background:var(--pine); border-radius:1.625rem; padding:1.125rem .875rem .875rem; }
.toffers-head{ display:flex; justify-content:space-between; align-items:baseline; gap:1rem; margin:0 .25rem .875rem; }
.toffers-head h3{ margin:0; color:var(--paper); font-size:1.375rem; }
.toffers-head span{ font-size:.8125rem; font-weight:600; color:var(--caramel-lt); }
.toffers ul{ list-style:none; margin:0; padding:0; display:grid; gap:.5rem; }
@media (min-width:1024px){ .toffers{ padding:1.5rem; } .toffers ul{ grid-template-columns:1fr 1fr; } }
.toffer{ display:flex; justify-content:space-between; align-items:center; gap:.75rem; padding:.875rem 1rem; border-radius:1.25rem; background:var(--white); color:var(--ink); }
.toffer-name{ line-height:1.3; }
.tsave{ display:table; margin-top:.375rem; padding:.15rem .55rem; border-radius:999px; background:#E3EDE6; color:#2F6B4A; font-size:.75rem; font-weight:600; }
.toffer-price{ text-align:right; white-space:nowrap; }
.toffer-price s{ display:block; font-size:.8125rem; color:var(--ink-3); }
.toffer-price b{ font-family:var(--serif); font-weight:600; font-size:1.5rem; }

.tgrp{ background:var(--white); border-radius:1.25rem; box-shadow:0 1px 2px rgba(30,26,23,.05); }
.tgrp summary{ display:flex; align-items:center; gap:.75rem; min-height:3.75rem; padding:0 1rem 0 1.125rem; cursor:pointer; list-style:none; }
.tgrp summary::-webkit-details-marker{ display:none; }
.tgrp-name{ font-family:var(--serif); font-weight:600; font-size:1.125rem; color:var(--ink); }
.tgrp-count{ font-size:.8125rem; color:var(--ink-3); white-space:nowrap; }
.tgrp-from{ margin-left:auto; font-size:.875rem; white-space:nowrap; }
.tgrp-from b{ color:var(--ink); }
.tgrp-chev{ flex:none; width:1.875rem; height:1.875rem; border-radius:999px; background:var(--cream); display:inline-flex; align-items:center; justify-content:center; color:var(--ink); transition:transform .25s; }
.tgrp[open] .tgrp-chev{ transform:rotate(180deg); }
.tgrp-desc{ margin:-.25rem 1.125rem .5rem; font-size:.875rem; color:var(--ink-3); }
.tgrp ul{ list-style:none; margin:0; padding:0 1.125rem .5rem; }
.tgrp li{ display:flex; justify-content:space-between; align-items:baseline; gap:1rem; padding:.7rem 0; border-top:1px solid var(--line); }
.tgrp li small{ display:block; font-size:.8125rem; color:var(--ink-3); }
.tgrp li b{ white-space:nowrap; color:var(--ink); }
@media (max-width:420px){ .tgrp-count{ display:none; } }

.tz-list mark{ background:#F3D9C2; color:inherit; border-radius:4px; padding:0 2px; }
.tz-empty{ margin-top:2rem; padding:1.5rem; border-radius:1.5rem; background:var(--white); text-align:center; }
.tz-empty p{ margin:0 0 1rem; }
.tz-foot{ margin:2rem 0 0; font-size:.875rem; color:var(--ink-3); }

/* ---------- Page Avis : themes cliquables (filtres) ---------- */
.rfilter button{ display:inline-flex; align-items:center; gap:.4rem; border:0; border-radius:999px; padding:.5rem .875rem; background:var(--cream); color:var(--ink); font:inherit; font-size:.9375rem; font-weight:600; cursor:pointer; transition:background-color .2s, color .2s, transform .2s; }
.rfilter button small{ font-size:.75rem; font-weight:600; color:var(--ink-3); background:rgba(255,255,255,.7); border-radius:999px; padding:.05rem .45rem; }
.rfilter button:hover{ transform:translateY(-1px); }
.rfilter button[aria-pressed="true"]{ background:var(--pine); color:var(--paper); }
.rfilter button[aria-pressed="true"] small{ background:rgba(243,236,227,.18); color:var(--paper); }
.rfilter button:focus-visible{ outline:2px solid var(--caramel); outline-offset:2px; }
.rfilter-bar{ margin:0 0 .75rem; scroll-margin-top:calc(var(--header-h) + 1rem); }
@media (max-width:767px){
  .rfilter-bar{ flex-wrap:nowrap; overflow-x:auto; scrollbar-width:none; margin-inline:calc(var(--gutter) * -1); padding:.25rem var(--gutter) .5rem; }
  .rfilter-bar::-webkit-scrollbar{ display:none; }
  .rfilter-bar button{ flex:none; }
}
.rfilter-bar button{ background:var(--white); box-shadow:0 1px 2px rgba(30,26,23,.06); }
.rfilter-status{ min-height:1.25rem; margin:0 0 1rem; font-size:.875rem; color:var(--ink-2); }
.review mark{ background:#F3D9C2; color:inherit; border-radius:4px; padding:0 2px; }