/* Feuille de l'accueil, extraite de l'inline de index-b.html le 24/08/2026.
   Jumelle de styles.css : les deux ont diverge, voir le rapport. */
:root{
  --white:#ffffff;
  --off:#FAF9FA;
  --ink:#1E1916;
  --black:#000000;
  --mauve:#AF9CAD;
  --mauve-dark:#775F73;
  --mauve-light:#D7CED6;
  --mauve-bg:#F3F0F3;
  --muted:#6E6469;
  --line:#E4DEE3;
  --display:"Tenor Sans",Helvetica,Arial,sans-serif;
  --body:"Raleway",Arial,sans-serif;
  --pad:clamp(22px,4.5vw,76px);
  --maxw:1360px;
  --ease:cubic-bezier(.2,.75,.25,1);
}
.skip-link{position:absolute;left:-9999px;top:0;z-index:200;background:#775F73;color:#fff;padding:12px 20px;font-size:12px;letter-spacing:.1em;text-transform:uppercase;text-decoration:none}
.skip-link:focus{left:0}
*{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:150px}
body{margin:0;background:var(--white);color:var(--ink);font-family:var(--body);font-size:15.5px;font-weight:400;line-height:1.75;-webkit-font-smoothing:antialiased}
body.menu-open{overflow:hidden}
img{max-width:100%;display:block}
a{color:inherit}
sup{font-size:.62em;vertical-align:super;line-height:0}
h1,h2,h3{font-family:var(--display);font-weight:400;text-transform:uppercase;letter-spacing:.05em;line-height:1.22;margin:0}
.wrap{max-width:var(--maxw);margin:0 auto;padding-inline:var(--pad)}
.eyebrow{font-size:11px;letter-spacing:.28em;text-transform:uppercase;color:var(--mauve-dark);font-weight:600;display:block;margin-bottom:16px}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;padding:15px 32px;border-radius:999px;font-size:11px;font-weight:600;letter-spacing:.18em;text-transform:uppercase;text-decoration:none;transition:all .25s var(--ease);border:1px solid transparent;cursor:pointer;font-family:var(--body);text-align:center}
.btn-dark{background:#5A4758;color:#fff;border-color:#5A4758}
.btn-dark:hover{background:#463745;border-color:#463745}
.btn-light{background:transparent;color:var(--ink);border-color:var(--black)}
.btn-light:hover{background:var(--black);color:#fff}
.btn-white{background:#fff;color:var(--mauve-dark);border-color:#fff}
.btn-white:hover{background:transparent;color:#fff;border-color:#fff}

/* ---------- Topbar ---------- */
.topbar{background:var(--white);border-bottom:1px solid var(--line)}
.topbar-in{display:flex;justify-content:flex-end;align-items:center;gap:10px;padding-block:10px}
.pill{font-size:10px;letter-spacing:.16em;text-transform:uppercase;font-weight:600;text-decoration:none;color:var(--ink);border:1px solid var(--ink);border-radius:999px;padding:7px 16px;transition:all .25s var(--ease);white-space:nowrap}
.pill:hover{background:var(--black);color:#fff}
.pill-ig{display:inline-grid;place-items:center;width:30px;height:30px;border-radius:50%;background:var(--mauve-light);color:var(--mauve-dark);text-decoration:none;transition:background .25s,color .25s}
.pill-ig svg{width:14px;height:14px;display:block}
.pill-ig:hover{background:var(--mauve);color:#fff}

/* ---------- Header ---------- */
.site-header{position:sticky;top:0;z-index:60;background:rgba(255,255,255,.96);backdrop-filter:blur(10px);border-bottom:1px solid var(--line)}
.header-in{display:flex;align-items:center;justify-content:space-between;gap:16px;height:84px}
.brand{display:flex;align-items:center;text-decoration:none;flex-shrink:0}
.brand img{height:34px;width:auto;max-width:none}
nav.main-nav{display:flex;align-items:center;gap:0}
nav.main-nav>div{position:relative}
.nav-link{display:inline-flex;align-items:center;gap:5px;padding:10px 7px;font-size:10.5px;line-height:1.3;letter-spacing:.12em;text-transform:uppercase;color:var(--ink);text-decoration:none;background:none;border:none;cursor:pointer;font-family:var(--body);font-weight:500;white-space:nowrap;position:relative}
.nav-link::after{content:"";position:absolute;left:9px;right:9px;bottom:4px;height:1px;background:var(--mauve-dark);transform:scaleX(0);transform-origin:left;transition:transform .25s var(--ease)}
.nav-link:hover::after,.has-mega:focus-within .nav-link::after{transform:scaleX(1)}
.nav-link:hover{color:var(--mauve-dark)}
.nav-link .chev{font-size:8px;color:var(--mauve);transition:transform .2s}
.has-mega:hover .chev,.has-mega:focus-within .chev{transform:rotate(180deg)}
/* Super mega menu : un seul panneau pleine largeur pour tous les univers */
.megapanel{position:absolute;top:100%;left:0;right:0;background:#fff;border-top:2px solid var(--mauve);border-bottom:1px solid var(--line);box-shadow:0 30px 60px rgba(30,25,22,.12);opacity:0;pointer-events:none;transform:translateY(-6px);visibility:hidden;transition:opacity .22s var(--ease),transform .22s var(--ease),visibility 0s .22s;z-index:70}
.site-header.mega-open .megapanel{opacity:1;pointer-events:auto;transform:translateY(0);visibility:visible;transition:opacity .22s var(--ease),transform .22s var(--ease)}
.megapanel-in{display:grid;grid-template-columns:repeat(4,1fr) 1.1fr;gap:clamp(20px,2.5vw,44px);padding-block:38px 42px}
.megacol .mega-title{font-family:var(--display);font-size:11px;letter-spacing:.24em;text-transform:uppercase;color:var(--black);margin:0 0 16px;padding-bottom:12px;border-bottom:1px solid var(--line)}
.megacol ul{list-style:none;margin:0;padding:0}
.megacol li+li{margin-top:2px}
.megacol a{display:block;padding:6px 0;font-size:13px;text-decoration:none;color:var(--muted);transition:color .18s,padding-left .18s}
.megacol a:hover{color:var(--black);padding-left:6px}
.megacol .mega-all{margin-top:12px;font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;font-weight:600;color:var(--mauve-dark)}
.megacol .mega-all:hover{color:var(--black)}
.megacol.is-hot .mega-title{border-bottom-color:var(--mauve);color:var(--mauve-dark)}
.megacta{background:var(--mauve-bg);padding:26px 28px;display:flex;flex-direction:column;gap:14px;justify-content:center}
.megacta p{margin:0;font-size:13px;color:var(--muted);line-height:1.7}
.megacta strong{font-family:var(--display);font-weight:400;letter-spacing:.06em;text-transform:uppercase;color:var(--black);font-size:13px;display:block;margin-bottom:6px}
.megacta .btn{align-self:flex-start;padding:12px 24px}
.megacta .megacta-tel{font-size:13px;font-weight:600;color:var(--ink);text-decoration:none}
.megacta .megacta-tel:hover{color:var(--mauve-dark)}
.header-cta{display:flex;align-items:center;gap:14px;flex-shrink:0}
.header-tel{font-size:13px;letter-spacing:.06em;text-decoration:none;color:var(--ink);font-weight:600;white-space:nowrap}
.header-cta .btn{white-space:nowrap;padding:12px 18px}
.menu-toggle{display:none;background:none;border:1px solid var(--line);padding:10px 12px;cursor:pointer;font-family:var(--body);font-size:11px;letter-spacing:.14em;width:auto;height:auto;min-height:44px}

/* ---------- Parcours bar ---------- */
.parcours{position:sticky;top:84px;z-index:55;background:var(--mauve-light);border-bottom:1px solid var(--line)}
.parcours-in{display:flex;gap:2px;overflow-x:auto;scrollbar-width:none}
.parcours-in::-webkit-scrollbar{display:none}
.parcours a{flex:0 0 auto;padding:13px 18px;font-size:10.5px;letter-spacing:.18em;text-transform:uppercase;text-decoration:none;color:rgba(30,25,22,.85);border-bottom:2px solid transparent;transition:color .2s,border-color .2s;white-space:nowrap;font-weight:500}
.parcours a:hover{color:var(--ink)}.parcours a,.parcours span{color:var(--muted)}
.parcours a.active{color:var(--black);border-bottom-color:var(--black)}

/* ---------- Hero ---------- */
.hero{background:var(--white);position:relative}
.hero-in{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(32px,5vw,80px);align-items:center;padding-block:clamp(48px,7vw,96px);padding-right:26px}
.hero h1{font-size:clamp(30px,4.4vw,56px);color:var(--black)}
.hero h1::after{content:"";display:block;width:64px;height:2px;background:var(--black);margin-top:24px}
.hero-lede{font-size:16px;font-weight:400;color:var(--muted);max-width:52ch;margin:22px 0 8px}
.hero-quote{font-family:var(--body);font-style:italic;font-weight:400;font-size:clamp(16px,1.8vw,19px);color:var(--mauve-dark);margin:18px 0 30px;border-left:2px solid var(--mauve);padding-left:20px;max-width:56ch}
.hero-actions{display:flex;gap:14px;flex-wrap:wrap}
.hero-media{position:relative}
.hero-media::before{content:"";position:absolute;top:26px;right:-26px;bottom:-26px;left:26px;background:var(--mauve-light);z-index:-1}
.hero-media img{width:100%;height:auto;position:relative}
.hero-proof{display:flex;gap:clamp(24px,4vw,64px);border-top:1px solid var(--line);padding-block:24px;flex-wrap:wrap}
.hero-proof div strong{font-family:var(--display);font-size:22px;letter-spacing:.04em;color:var(--black);display:block}
.hero-proof div span{font-size:12px;letter-spacing:.06em;color:var(--muted)}

/* ---------- Sections ---------- */
section.block{padding-block:clamp(60px,8vw,110px)}
.block-alt{background:var(--mauve-bg)}
.block-mauve{background:#5A4758;color:#fff}   /* 5,72:1 — blanc sur #AF9CAD plafonnait a 2,57:1 */
.block-head{max-width:780px;margin-bottom:clamp(32px,4vw,56px)}
.block-head h2{font-size:clamp(24px,3vw,38px);color:var(--black)}
.block-mauve .block-head h2{color:#fff}
.block-head p{color:var(--muted);margin:16px 0 0}
.block-mauve .block-head p{color:#FFFFFF}

/* Vidéo / philosophie */
.philo{display:grid;grid-template-columns:.9fr 1.1fr;gap:clamp(32px,5vw,80px);align-items:center}
.video-slot{position:relative;overflow:hidden}
.video-slot img{width:100%}
.video-slot .play{position:absolute;inset:0;display:grid;place-items:center;background:rgba(30,25,22,.22);transition:background .25s}
.video-slot:hover .play{background:rgba(30,25,22,.38)}
.play span{width:74px;height:74px;border-radius:50%;background:rgba(255,255,255,.94);display:grid;place-items:center;font-size:20px;color:var(--black);padding-left:5px}
/* aligne le header de l'accueil sur les sous-pages (premium.css) */
.site-header{height:86px}
.brand{flex:0 0 clamp(192px,15vw,235px)}
.main-nav{justify-content:center;margin-left:auto;gap:clamp(10px,1.1vw,20px)}
.video-note{font-size:10.5px;letter-spacing:.18em;text-transform:uppercase;color:var(--muted);margin-top:12px}
.video-slot video{display:block;width:100%;height:auto;background:#1e1916}
.video-slot .play{border:0;padding:0;width:100%;color:#fff;cursor:pointer;appearance:none;-webkit-appearance:none;transition:background .25s,opacity .3s}
.video-slot .play svg{filter:drop-shadow(0 2px 14px rgba(0,0,0,.5))}
.video-slot.is-playing .play{opacity:0;pointer-events:none}
.philo h2{font-size:clamp(23px,2.8vw,34px);color:var(--black)}
.philo blockquote{font-family:var(--body);font-style:italic;font-size:clamp(16px,1.8vw,19px);color:var(--mauve-dark);border-left:2px solid var(--mauve);margin:24px 0;padding-left:22px}

/* Univers */
.univers-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:26px}
.univers-card{position:relative;background:#fff;border:1px solid var(--line);overflow:hidden;display:flex;flex-direction:column;transition:box-shadow .3s var(--ease),transform .3s var(--ease)}
.univers-card:hover{box-shadow:0 22px 50px rgba(30,25,22,.1);transform:translateY(-3px)}
.univers-card img{height:230px;object-fit:cover;width:100%;filter:grayscale(1) contrast(1.05)}
.univers-body{padding:28px 30px 30px;display:flex;flex-direction:column;flex:1}
.univers-num{font-family:var(--display);font-size:12px;letter-spacing:.3em;color:var(--mauve-dark);margin-bottom:10px}
.univers-body h3{font-size:18px;letter-spacing:.06em;color:var(--black)}

/* Bande citation (fidèle au bloc "révolution de la graisse" du site) */
.quote-band{background:#5A4758;color:#fff;text-align:center;padding-block:clamp(56px,7vw,96px)}
.quote-band h2{font-size:clamp(20px,2.6vw,32px);color:#fff;max-width:900px;margin-inline:auto}
.quote-band .q{font-family:var(--body);font-size:clamp(13.5px,1.5vw,16px);letter-spacing:.08em;text-transform:uppercase;color:rgba(255,255,255,.92);max-width:880px;margin:26px auto 34px;line-height:2}
.quote-band .btn{border-color:#fff}
.univers-body p{color:var(--muted);font-size:14px;margin:12px 0 18px}
.univers-links{list-style:none;margin:0 0 24px;padding:0;columns:2;column-gap:20px}
.univers-links li{break-inside:avoid}
.univers-links a{display:block;font-size:13px;padding:5px 0;text-decoration:none;color:var(--ink)}
.univers-links a:hover{color:var(--mauve-dark)}
.univers-links a::before{content:"— ";color:var(--mauve)}
.univers-body .btn{margin-top:auto;align-self:flex-start}
.badge-4mains{position:absolute;top:16px;left:16px;background:var(--black);color:#fff;font-size:9.5px;letter-spacing:.2em;text-transform:uppercase;padding:8px 13px}

/* Comparateur */
.compare-wrap{display:grid;grid-template-columns:1.15fr .85fr;gap:clamp(30px,5vw,70px);align-items:center}
.before-after{position:relative;aspect-ratio:2/1;overflow:hidden;touch-action:none;user-select:none;background:var(--mauve-light);--position:50%;max-width:425px;margin-inline:auto}
.before-after img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;pointer-events:none}
.before-after .img-before{clip-path:inset(0 calc(100% - var(--position)) 0 0)}
.ba-divider{position:absolute;top:0;bottom:0;left:var(--position);width:2px;background:#fff;transform:translateX(-50%);pointer-events:none}
.ba-handle{position:absolute;top:50%;left:var(--position);transform:translate(-50%,-50%);width:52px;height:52px;border-radius:50%;background:#fff;border:1px solid var(--mauve);display:grid;place-items:center;font-size:14px;color:var(--black);pointer-events:none;box-shadow:0 6px 18px rgba(30,25,22,.25)}
.ba-tag{position:absolute;top:14px;font-size:9.5px;letter-spacing:.22em;text-transform:uppercase;background:rgba(30,25,22,.72);color:#fff;padding:6px 11px;pointer-events:none}
.ba-tag.avant{left:14px}.ba-tag.apres{right:14px}
.ba-range{width:100%;margin-top:14px;accent-color:var(--mauve-dark)}
.compare-side h2{font-size:clamp(23px,2.8vw,34px);color:var(--black)}
.compare-side p{color:var(--muted)}
.case-switch{display:flex;gap:10px;margin:22px 0}
.case-switch button{font-family:var(--body);font-size:11px;letter-spacing:.14em;text-transform:uppercase;font-weight:600;padding:11px 18px;border:1px solid var(--line);background:#fff;cursor:pointer;transition:all .2s}
.case-switch button[aria-pressed="true"]{background:var(--black);color:#fff;border-color:var(--black)}
.case-note{font-size:12.5px;color:var(--muted)}
.legal-note{font-size:11.5px;color:var(--muted);margin-top:18px;border-top:1px solid var(--line);padding-top:12px}

/* Diagnostic — soft structuralism / double-bezel (agency-tier) */
.diag{
  --diag-spring:cubic-bezier(.32,.72,0,1);
  --diag-face:#FBF9FA;
  --diag-ink:var(--ink);
}
.diag .eyebrow{color:#FFFFFF}
.diag-tabs{
  display:inline-flex;
  align-items:center;
  gap:4px;
  margin-bottom:clamp(28px,3.5vw,40px);
  padding:5px;
  background:rgba(30,25,22,.16);
  border-radius:999px;
  border:1px solid rgba(255,255,255,.14);
  backdrop-filter:blur(8px);
  -webkit-backdrop-filter:blur(8px);
}
.diag-tabs button{
  font-family:var(--body);
  font-size:11px;
  letter-spacing:.14em;
  text-transform:uppercase;
  font-weight:500;
  padding:12px 22px;
  background:transparent;
  border:none;
  border-radius:999px;
  color:#FFFFFF;
  cursor:pointer;
  transition:background .35s var(--diag-spring),color .35s var(--diag-spring),box-shadow .35s var(--diag-spring);
}
.diag-tabs button:hover{color:#fff}
.diag-tabs button[aria-selected="true"]{
  background:#fff;
  color:var(--ink);
  font-weight:600;
  box-shadow:0 8px 22px rgba(30,25,22,.14);
}

/* Plateau double-bezel qui contient la grille active */
.diag-shell{
  padding:10px;
  border-radius:28px;
  background:rgba(30,25,22,.1);
  border:1px solid rgba(255,255,255,.14);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.12);
}
.diag-grid{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:12px;
  align-items:stretch;
}
/* CRITIQUE : display:grid doit céder à [hidden], sinon les 2 panels s'empilent */
.diag-grid[hidden]{
  display:none !important;
}

/* Carte = cellule stable ; le hover anime la face intérieure (pas de jitter grille) */
.diag-card{
  position:relative;
  margin:0;
  padding:0;
  border:0;
  background:transparent;
  min-height:300px;
  isolation:isolate;
}
.diag-card-face{
  position:relative;
  z-index:1;
  height:100%;
  min-height:300px;
  display:flex;
  flex-direction:column;
  padding:clamp(28px,3vw,36px) clamp(24px,2.5vw,32px) clamp(22px,2.2vw,28px);
  border-radius:20px;
  background:var(--diag-face);
  color:var(--diag-ink);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.85),
    0 1px 2px rgba(30,25,22,.04),
    0 14px 36px rgba(30,25,22,.08);
  overflow:hidden;
  transform:translate3d(0,0,0) scale(1);
  transition:
    transform .55s var(--diag-spring),
    box-shadow .55s var(--diag-spring),
    background .45s var(--diag-spring);
  will-change:transform;
}
/* Glow mauve doux sous le contenu au hover */
.diag-card-face::after{
  content:"";
  position:absolute;
  left:-30%;
  right:-30%;
  bottom:-45%;
  height:70%;
  background:radial-gradient(ellipse at center,rgba(175,156,173,.38) 0%,rgba(175,156,173,0) 68%);
  opacity:0;
  pointer-events:none;
  transition:opacity .55s var(--diag-spring);
  z-index:0;
}
.diag-card-face > *{position:relative;z-index:1}
.diag-card:hover .diag-card-face,
.diag-card:focus-within .diag-card-face{
  transform:translate3d(0,-8px,0) scale(1.015);
  background:#fff;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.95),
    0 2px 4px rgba(30,25,22,.04),
    0 28px 60px rgba(30,25,22,.16),
    0 8px 20px rgba(142,119,138,.12);
}
.diag-card:hover .diag-card-face::after,
.diag-card:focus-within .diag-card-face::after{opacity:1}

.diag-card .age{
  font-family:var(--display);
  font-size:clamp(28px,2.7vw,36px);
  letter-spacing:-.015em;
  text-transform:none;
  font-weight:400;
  color:var(--black);
  display:block;
  margin:0 0 16px;
  line-height:1.15;
  padding:0;
  border:0;
}
.diag-card h3{
  font-family:var(--body);
  font-size:14px;
  font-weight:600;
  letter-spacing:.02em;
  text-transform:none;
  margin:0 0 18px;
  color:var(--mauve-dark);
  line-height:1.45;
}
.diag-card p{
  font-size:14px;
  line-height:1.75;
  color:var(--muted);
  margin:0 0 32px;
  flex:1;
  max-width:34ch;
}

/* CTA island : pastille qui se remplit (sans déplacer le hitbox) */
.diag-cta{
  font-size:12px;
  letter-spacing:.03em;
  text-transform:none;
  font-weight:600;
  color:var(--ink);
  text-decoration:none;
  display:inline-flex;
  align-items:center;
  gap:12px;
  margin-top:auto;
  align-self:flex-start;
  padding:8px 10px 8px 18px;
  border-radius:999px;
  background:rgba(30,25,22,.05);
  border:1px solid rgba(30,25,22,.06);
  transition:
    background .45s var(--diag-spring),
    color .45s var(--diag-spring),
    border-color .45s var(--diag-spring),
    box-shadow .45s var(--diag-spring);
}
.diag-cta .diag-go{
  width:34px;
  height:34px;
  flex-shrink:0;
  border-radius:50%;
  display:inline-grid;
  place-items:center;
  font-size:14px;
  line-height:1;
  color:var(--ink);
  background:#fff;
  border:1px solid rgba(30,25,22,.08);
  box-shadow:0 2px 8px rgba(30,25,22,.06);
  transition:
    background .45s var(--diag-spring),
    color .45s var(--diag-spring),
    border-color .45s var(--diag-spring),
    box-shadow .45s var(--diag-spring);
}
.diag-card:hover .diag-cta,
.diag-card:focus-within .diag-cta,
.diag-cta:hover,
.diag-cta:focus-visible{
  background:var(--black);
  color:#fff;
  border-color:var(--black);
  box-shadow:0 10px 24px rgba(30,25,22,.18);
}
.diag-card:hover .diag-cta .diag-go,
.diag-card:focus-within .diag-cta .diag-go,
.diag-cta:hover .diag-go,
.diag-cta:focus-visible .diag-go{
  background:rgba(255,255,255,.14);
  color:#fff;
  border-color:rgba(255,255,255,.22);
  box-shadow:none;
}

.diag-disclaimer{
  font-size:12px;
  line-height:1.7;
  color:#FFFFFF;
  margin-top:clamp(28px,3.5vw,40px);
  max-width:72ch;
  padding:0;
  border:0;
}

/* Avis */

/* Actualités */
.news-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.news-card{background:#fff;border:1px solid var(--line);padding:30px;display:flex;flex-direction:column;transition:box-shadow .3s,transform .3s}
.news-card:hover{box-shadow:0 18px 44px rgba(30,25,22,.08);transform:translateY(-3px)}
.news-card time{font-size:10.5px;letter-spacing:.2em;text-transform:uppercase;color:var(--mauve-dark)}
.news-card h3{font-size:15.5px;letter-spacing:.05em;color:var(--black);margin:12px 0 10px;line-height:1.45}
.news-card p{font-size:13.5px;color:var(--muted);margin:0 0 20px}
.news-card a{margin-top:auto;font-size:11px;letter-spacing:.14em;text-transform:uppercase;font-weight:600;text-decoration:none;color:var(--mauve-dark)}
.news-card a:hover{color:var(--black)}

/* FAQ */
.faq{max-width:840px}
.faq details{border-bottom:1px solid var(--line)}
.faq summary{font-family:var(--display);font-size:15px;letter-spacing:.05em;text-transform:uppercase;color:var(--black);padding:24px 40px 24px 0;cursor:pointer;list-style:none;position:relative;line-height:1.5}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";position:absolute;right:6px;top:50%;transform:translateY(-50%);font-family:var(--body);font-size:22px;color:var(--mauve-dark);transition:transform .25s}
.faq details[open] summary::after{transform:translateY(-50%) rotate(45deg)}
.faq details p{color:var(--muted);font-size:14px;margin:0 0 26px;max-width:66ch}

/* Contact */
.contact{background:#5A4758;color:#fff}
.contact .eyebrow{color:#fff}
.contact-in{display:grid;grid-template-columns:.85fr 1.15fr;gap:clamp(36px,5vw,80px);align-items:start}
.contact h2{font-size:clamp(24px,3vw,38px);color:#fff}
.contact-lede{color:rgba(255,255,255,.9);font-size:14.5px;margin:18px 0 34px;max-width:44ch}
/* Parcours en 3 étapes */
.steps{display:grid;gap:0;position:relative;margin-bottom:36px}
.step{display:grid;grid-template-columns:44px 1fr;gap:18px;padding-block:16px;position:relative}
.step::before{content:"";position:absolute;left:21px;top:56px;bottom:-8px;width:1px;background:rgba(255,255,255,.35)}
.step:last-child::before{display:none}
.step-num{width:44px;height:44px;border-radius:50%;border:1px solid rgba(255,255,255,.6);display:grid;place-items:center;font-family:var(--display);font-size:14px;color:#fff;background:rgba(255,255,255,.08)}
.step h3{font-size:12.5px;letter-spacing:.14em;color:#fff;margin-bottom:4px}
.step p{margin:0;font-size:13px;color:#FFFFFF;line-height:1.7}
.contact-coords{border-top:1px solid rgba(255,255,255,.3);padding-top:24px;font-size:13.5px;color:rgba(255,255,255,.9);line-height:2}
.contact-coords a{color:#fff;text-decoration:none;font-weight:600}
.contact-coords a:hover{text-decoration:underline}
/* Carte formulaire */
.form-card{background:var(--white);color:var(--ink);padding:clamp(28px,3.5vw,48px);box-shadow:0 34px 80px rgba(30,25,22,.22);position:relative}
.form-card::before{content:"";position:absolute;top:12px;left:-12px;right:12px;bottom:-12px;border:1px solid rgba(255,255,255,.45);z-index:-1;pointer-events:none}
.form-title{font-family:var(--display);font-size:17px;letter-spacing:.08em;text-transform:uppercase;color:var(--black);margin:0 0 6px}
.form-sub{font-size:13px;color:var(--muted);margin:0 0 28px}
.cform{display:grid;gap:22px}
.cform-row{display:grid;grid-template-columns:1fr 1fr;gap:18px}
/* Champs à labels flottants */
.field{position:relative}
.field input,.field textarea{width:100%;background:transparent;border:0;border-bottom:1px solid var(--line);padding:20px 0 10px;color:var(--ink);font-family:var(--body);font-size:14.5px;transition:border-color .2s}
.field textarea{resize:vertical;min-height:76px}
.field label{position:absolute;left:0;top:18px;font-size:13.5px;letter-spacing:.04em;color:var(--muted);pointer-events:none;transition:all .2s var(--ease);transform-origin:left}
.field input:focus,.field textarea:focus{outline:none;border-bottom-color:var(--black)}
.field input:focus~label,.field textarea:focus~label,
.field input:not(:placeholder-shown)~label,.field textarea:not(:placeholder-shown)~label{top:0;font-size:10px;letter-spacing:.18em;text-transform:uppercase;font-weight:600;color:var(--mauve-dark)}
.field::after{content:"";position:absolute;left:0;right:100%;bottom:0;height:2px;background:var(--mauve-dark);transition:right .3s var(--ease)}
.field:focus-within::after{right:0}
/* Puces motif */
.chips-label{font-size:10px;letter-spacing:.18em;text-transform:uppercase;font-weight:600;color:var(--mauve-dark);display:block;margin-bottom:12px}
.chips{display:flex;flex-wrap:wrap;gap:9px}
.chip{font-family:var(--body);font-size:12px;letter-spacing:.06em;padding:10px 18px;border:1px solid var(--line);border-radius:999px;background:#fff;color:var(--ink);cursor:pointer;transition:all .2s var(--ease)}
.chip:hover{border-color:var(--mauve-dark)}
.chip[aria-pressed="true"]{background:var(--black);border-color:var(--black);color:#fff}
/* Zone photos */
.dropzone{border:1px dashed var(--mauve);border-radius:2px;background:var(--mauve-bg);padding:20px;display:flex;align-items:center;gap:16px;cursor:pointer;transition:border-color .2s,background .2s}
.dropzone:hover{border-color:var(--mauve-dark);background:#EFE9EE}
.dropzone-ico{width:42px;height:42px;border-radius:50%;background:#fff;display:grid;place-items:center;font-size:16px;color:var(--mauve-dark);flex-shrink:0}
.dropzone p{margin:0;font-size:12.5px;color:var(--muted);line-height:1.6}
.dropzone strong{color:var(--ink);font-weight:600;display:block;font-size:13px}
.dropzone input{display:none}
.dropzone .dz-count{color:var(--mauve-dark);font-weight:600}
/* Consentement + envoi */
.consent{display:flex;gap:12px;align-items:flex-start;font-size:11.5px;color:var(--muted);line-height:1.7}
.consent input{margin-top:3px;accent-color:var(--mauve-dark);width:15px;height:15px;flex-shrink:0}
.form-foot{display:flex;align-items:center;justify-content:space-between;gap:18px;flex-wrap:wrap}
.trust{display:flex;gap:16px;font-size:10.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.trust span::before{content:"— ";color:var(--mauve)}
.cform .hp{position:absolute;left:-9999px}
/* État succès */
.form-success{display:none;text-align:center;padding:clamp(30px,4vw,50px) 10px}
.form-success .ok{width:64px;height:64px;border-radius:50%;background:var(--mauve-bg);color:var(--mauve-dark);font-size:24px;display:grid;place-items:center;margin:0 auto 22px}
.form-success h3{font-size:17px;letter-spacing:.08em;color:var(--black);margin-bottom:12px}
.form-success p{font-size:13.5px;color:var(--muted);max-width:42ch;margin:0 auto}
.form-card.is-sent .cform,.form-card.is-sent .form-title,.form-card.is-sent .form-sub{display:none}
.form-card.is-sent .form-success{display:block}

/* Footer */
.site-footer{background:var(--off);border-top:1px solid var(--line);color:var(--muted);padding-block:56px 36px;font-size:12.5px}
.footer-cols{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:32px;margin-bottom:40px}
.footer-brand p{margin:16px 0 0;line-height:1.9}
.footer-title{font-family:var(--display);font-size:11px;letter-spacing:.22em;text-transform:uppercase;color:var(--black);margin:0 0 14px}
.footer-cols nav a{display:block;padding:4px 0;text-decoration:none;color:var(--muted)}
.footer-cols nav a:hover{color:var(--black)}
.footer-legal{border-top:1px solid var(--line);padding-top:24px}
.footer-legal p{margin:0 0 10px;max-width:110ch;font-size:11.5px;line-height:1.8}
.footer-legal strong{color:var(--ink)}

/* Mobile CTA bar */
.mobile-cta{display:none;position:fixed;bottom:0;left:0;right:0;z-index:70;background:#fff;border-top:1px solid var(--line);padding:12px var(--pad);gap:12px}
.mobile-cta a{flex:1;justify-content:center}

/* Accessibilité & micro-détails */
:focus-visible{outline:2px solid var(--mauve-dark);outline-offset:3px}
.before-after{cursor:ew-resize}
.faq summary:hover{color:var(--mauve-dark)}
::selection{background:var(--mauve-light)}

/* Menu mobile plein écran */
.mobile-menu{position:fixed;inset:0;background:var(--white);z-index:90;display:flex;flex-direction:column;opacity:0;pointer-events:none;visibility:hidden;transition:opacity .25s var(--ease),visibility 0s .25s}
.mobile-menu.is-open{opacity:1;pointer-events:auto;visibility:visible;transition:opacity .25s var(--ease)}
.mm-head{display:flex;align-items:center;justify-content:space-between;height:72px;padding-inline:var(--pad);border-bottom:1px solid var(--line);flex-shrink:0}
.mm-head img{height:30px;width:auto;max-width:none}
.mm-close{background:none;border:1px solid var(--line);border-radius:999px;width:42px;height:42px;font-size:16px;cursor:pointer;color:var(--ink);display:grid;place-items:center}
.mm-close:hover{border-color:var(--black)}
.mm-body{flex:1;overflow-y:auto;padding:10px var(--pad) 30px;-webkit-overflow-scrolling:touch}
.mm-body>details,.mm-body>a.mm-link{border-bottom:1px solid var(--line)}
.mm-body summary{font-family:var(--display);font-size:16px;letter-spacing:.08em;text-transform:uppercase;color:var(--black);padding:20px 34px 20px 0;cursor:pointer;list-style:none;position:relative}
.mm-body summary::-webkit-details-marker{display:none}
.mm-body summary::after{content:"+";position:absolute;right:4px;top:50%;transform:translateY(-50%);font-family:var(--body);font-size:20px;color:var(--mauve-dark);transition:transform .25s}
.mm-body details[open] summary::after{transform:translateY(-50%) rotate(45deg)}
.mm-sub{padding:0 0 16px}
.mm-sub a{display:block;padding:9px 0 9px 16px;font-size:14px;text-decoration:none;color:var(--muted);border-left:2px solid var(--mauve-light)}
.mm-sub a:active,.mm-sub a:hover{color:var(--black);border-left-color:var(--mauve-dark)}
a.mm-link{display:block;font-family:var(--display);font-size:16px;letter-spacing:.08em;text-transform:uppercase;color:var(--black);padding:20px 0;text-decoration:none}
.mm-foot{padding:18px var(--pad) 26px;border-top:1px solid var(--line);display:grid;gap:10px;flex-shrink:0;background:var(--off)}
.mm-foot .btn{width:100%}

/* Reveal */
.reveal{opacity:0;transform:translateY(22px);transition:opacity .7s var(--ease),transform .7s var(--ease)}
.reveal.in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .reveal{opacity:1;transform:none;transition:none}
}

/* ---------- Responsive ---------- */
@media (max-width:1360px){
  nav.main-nav{display:none}
  .megapanel{display:none}
  .menu-toggle{display:inline-flex}
  .header-tel{display:none}
  .header-cta .btn{display:none}
}
@media (max-width:960px){
  .topbar{display:none}
  .hero-in,.philo,.compare-wrap,.contact-in{grid-template-columns:1fr}
  .univers-grid{grid-template-columns:1fr}
  .diag-grid,.news-grid{grid-template-columns:1fr}
  .diag-shell{padding:8px;border-radius:22px}
  .diag-grid{gap:10px}
  .diag-card,.diag-card-face{min-height:0}
  .diag-card-face{border-radius:16px;padding:26px 22px 22px}
  .diag-card:hover .diag-card-face,
  .diag-card:focus-within .diag-card-face{transform:translate3d(0,-4px,0) scale(1.01)}
  .diag-card .age{margin-bottom:14px}
  .diag-card h3{margin-bottom:16px}
  .diag-tabs{display:flex;width:100%;max-width:420px}
  .diag-tabs button{flex:1;padding-inline:10px;text-align:center;font-size:10px}
  .footer-cols{grid-template-columns:1fr 1fr}
  .cform-row{grid-template-columns:1fr}
  .form-card::before{display:none}
  .form-foot{flex-direction:column;align-items:stretch}
  .form-foot .btn{width:100%}
  .mobile-cta{display:flex}
  body{padding-bottom:70px}
  .hero-media{order:-1}
  .hero-media::before{display:none}
  .hero-in{padding-right:var(--pad)}
}
@media (min-width:961px) and (max-width:1100px){
  .diag-grid{gap:10px}
  .diag-card-face{padding:26px 20px 22px}
  .diag-card .age{font-size:26px}
}
@media (prefers-reduced-motion:reduce){
  .diag-card-face,
  .diag-card-face::after,
  .diag-cta,
  .diag-cta .diag-go,
  .diag-tabs button{transition:none !important}
  .diag-card:hover .diag-card-face,
  .diag-card:focus-within .diag-card-face{transform:none}
}

/* Bouton menu mobile : burger, plus de rectangle ni de libelle. */
.menu-toggle{border:0;padding:0;width:44px;height:44px;background:none;cursor:pointer;
  flex-direction:column;align-items:center;justify-content:center;gap:5px}
.mt-bar{display:block;width:22px;height:1.5px;background:var(--ink,#1e1916);
  transition:transform .26s cubic-bezier(.2,.75,.25,1),opacity .18s}
.menu-toggle[aria-expanded="true"] .mt-bar:nth-child(1){transform:translateY(6.5px) rotate(45deg)}
.menu-toggle[aria-expanded="true"] .mt-bar:nth-child(2){opacity:0}
.menu-toggle[aria-expanded="true"] .mt-bar:nth-child(3){transform:translateY(-6.5px) rotate(-45deg)}

/* Safari iOS : un element fixe en inset:0 est dimensionne sur le grand viewport,
   donc le pied du menu passe sous la barre du navigateur. dvh suit la barre. */
.mobile-menu{height:100vh;height:100dvh}
/* et le scroll du menu ne doit pas entrainer la page derriere */
.mm-body{overscroll-behavior:contain}

/* ------------------------------------------------------------------ *
 * Navigation entre 1024 et 1360 px.
 *
 * Le point de rupture etait cale sur --maxw (1360px), pas sur ce dont
 * la navigation a besoin. Resultat : toute fenetre plus etroite que
 * 1361px perdait la navigation, le telephone et le bouton de rendez-
 * vous, et n'affichait plus qu'un logo, un burger et mille pixels de
 * vide. C'est la largeur d'une fenetre Safari non plein ecran sur un
 * MacBook.
 *
 * Mesure : logo 235 + navigation 692 + bouton 208 + marges. En
 * resserrant l'interlettrage a .07em et les marges internes a 4px, le
 * tout tient jusqu'a 1024px. Verifie de 1024 a 1360 px sur WebKit et
 * sur Chrome : aucun chevauchement, aucun debordement.
 * ------------------------------------------------------------------ */
@media (min-width:1024px) and (max-width:1360px){
  nav.main-nav{
    display:flex;flex-direction:row;align-items:center;
    position:static;inset:auto;width:auto;height:auto;max-height:none;
    padding:0;background:none;overflow:visible;transform:none;
    opacity:1;visibility:visible;z-index:auto;border:0;
  }
  .megapanel{display:block}
  .menu-toggle{display:none}
  .header-in{padding-left:clamp(20px,3vw,44px);padding-right:clamp(20px,3vw,44px)}
  /* styles.css et premium.css passent ces liens en 28-44px sous 1220px :
     c'etait le gabarit d'un ancien menu plein ecran qui n'existe plus. */
  .main-nav a,.main-nav button,.nav-expertise summary{
    font-family:var(--body);font-size:10.5px;font-weight:500;line-height:1.3;
    letter-spacing:.07em;text-transform:uppercase;padding:10px 4px;
  }
  .nav-link::after{left:5px;right:5px}
}
@media (min-width:1024px) and (max-width:1259px){
  .header-cta .btn{display:none}
}
@media (min-width:1260px) and (max-width:1360px){
  .header-cta .btn{display:inline-flex;padding-left:16px;padding-right:16px}
}

/* Menu ouvert : le panneau (z-index 90) recouvre l'en-tete (z-index 60).
   Le burger restait donc affiche mais inerte, on ne pouvait plus fermer
   qu'avec la croix. Le panneau porte deja son logo et sa croix : on
   retire le burger tant qu'il est ouvert. */
body.menu-open .menu-toggle{visibility:hidden;pointer-events:none}

/* Le cadre decale derriere le formulaire (.form-card::before, z-index:-1)
   remontait jusqu'a la racine faute de contexte d'empilement sur un
   ancetre : il se retrouvait derriere le mauve de la section, donc
   invisible. Il n'apparaissait que le temps de l'animation d'entree,
   quand .reveal posait encore un transform. isolation cree le contexte
   au niveau de la section : le cadre se pose derriere la carte et
   devant le fond. */
.block.contact{isolation:isolate}

/* ==================================================================
   Retours du Dr Hayot, 25/08
   ================================================================== */

/* 1. Le portrait va au bord du cadre et prend toute la largeur de sa
      colonne. Il etait retenu par un padding-right sur la grille et par
      le carre decoratif decale, qui l'enfoncaient vers l'interieur. */
@media (min-width:961px){
  .hero-in{padding-right:0}
  /* on ressort exactement de la gouttiere, pas d'un pixel de plus :
     (--maxw - 100vw) / 2 vaut la gouttiere en negatif, et 0 des que la
     fenetre est plus etroite que le contenu. */
  .hero-media{margin-right:min(0px, calc((var(--maxw) - 100vw) / 2))}
  .hero-media::before{display:none}
  .hero-media img{width:100%;display:block;object-fit:cover}
}

/* 2. Le bandeau de reperes occupe toute la largeur au lieu de se tasser
      a gauche, et chaque repere apparait a la suite du precedent. */
@media (min-width:761px){
  .hero-proof{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));
    gap:clamp(20px,3vw,48px);align-items:start}
  .hero-proof div{position:relative;padding-left:22px}
  .hero-proof div::before{content:"";position:absolute;left:0;top:6px;bottom:4px;
    width:1px;background:var(--mauve-light)}
  .hero-proof div:first-child{padding-left:0}
  .hero-proof div:first-child::before{display:none}
}
.hero-proof div{opacity:0;transform:translateY(14px);
  animation:reperes .7s cubic-bezier(.2,.75,.25,1) forwards}
.hero-proof div:nth-child(1){animation-delay:.10s}
.hero-proof div:nth-child(2){animation-delay:.22s}
.hero-proof div:nth-child(3){animation-delay:.34s}
.hero-proof div:nth-child(4){animation-delay:.46s}
@keyframes reperes{to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){
  .hero-proof div{animation:none;opacity:1;transform:none}
}
.hero-proof div strong{font-size:clamp(22px,2.2vw,30px);line-height:1.05}

/* 3. Cas 01 / 02 / 03 : sur telephone les trois boutons se serraient sur
      une ligne, la zone tactile tombait sous 44 px et un doigt attrapait
      le voisin. Ils passent en grille, hauteur de touche garantie. */
@media (max-width:640px){
  .case-switch{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin:20px 0}
  .case-switch button{min-height:46px;padding:12px 6px;font-size:10.5px;letter-spacing:.1em}
}
.case-switch button{touch-action:manipulation}

/* 4. Le titre de bloc ne laisse plus un mot seul sur la derniere ligne. */
.block-head h2,.philo h2,.compare-side h2{text-wrap:balance}

/* « Mode drapeau a revoir, la justification ne plait pas » : il n'y a aucun
   text-align:justify sur le site. Le paragraphe de la philosophie etait le
   seul sans mesure : environ 80 signes par ligne, ce qui rend le bord droit
   irregulier invisible et donne l'impression d'un bloc justifie. */
.philo p{max-width:62ch;text-wrap:pretty}

/* ------------------------------------------------------------------ 25/08
   Le comparateur avant / apres sur telephone.
   C'est le « CAS 01 CAS 02 CAS 03 » signale par le praticien, et ce n'est
   pas un probleme de lien : les trois boutons fonctionnent. Le probleme est
   geometrique. Entre le bas de la photo et le haut des boutons il y a
   305 px de texte. La fenetre reellement utilisable entre l'en-tete colle
   plus la barre de parcours (133 px) et la barre d'appel basse (96 px) vaut
   436 px sur un iPhone barres visibles. Il en faudrait 524. On appuie donc
   sur CAS 02 et rien ne bouge a l'ecran, parce que la photo est hors champ.
   Les boutons remontent sous la photo, le texte descend. */
@media (max-width: 960px){
  .compare-side{display:flex;flex-direction:column}
  .compare-side .case-switch{order:-3;margin-top:16px;margin-bottom:10px}
  .compare-side .case-note{order:-2;margin:0 0 22px}
  .compare-side .eyebrow{order:-1}
}

/* Le comparateur portait touch-action:none et occupe 89 % de la largeur de
   l'ecran : un balayage vertical commence sur la photo ne faisait defiler
   la page d'aucun pixel, contre 311 px pour le meme geste a cote. La page
   paraissait figee. pan-y rend le defilement vertical au doigt et laisse
   le glissement horizontal au script. */
.before-after{touch-action:pan-y}

/* Sur iOS, un champ dont la police est sous 16 px declenche un zoom
   automatique a la saisie. L'accueil ne charge pas identite.css, la regle
   doit donc etre reprise ici. */
@media (max-width: 900px){
  .field input,.field textarea,
  input[type="search"],input[type="text"],input[type="email"],input[type="tel"],
  textarea,select{font-size:16px}
}
/* Contour de focus lisible sur clair comme sur pourpre. */
:focus-visible{outline:2px solid var(--purple-deep,#5A4758);outline-offset:2px;
  box-shadow:0 0 0 4px rgba(255,255,255,.9)}
.block-mauve :focus-visible,.quote-band :focus-visible,.contact :focus-visible,
.btn-dark:focus-visible,.mobile-actions a:last-child:focus-visible{
  outline-color:#fff;box-shadow:0 0 0 4px rgba(62,47,61,.9)}

/* ------------------------------------------------------------------ 25/08
   Le contenu ne depend plus du JavaScript pour etre visible. La regle
   .reveal{opacity:0} laissait vingt blocs invisibles tant que
   l'IntersectionObserver n'avait pas pose la classe .in : sans script, ou
   avant son execution, le visiteur voyait l'en-tete puis du blanc.
   Visible par defaut, masque seulement si le script a pu se signaler. */
.reveal{opacity:1;transform:none}
html.js .reveal{opacity:0;transform:translateY(22px)}
html.js .reveal.in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){
  html.js .reveal{opacity:1;transform:none;transition:none}
}

/* 03/09, retour du Dr Hayot : la photo colle au header et occupe toute la
   hauteur de l'entree, au lieu de flotter avec une marge au-dessus. La marge
   verticale passe sur la colonne de texte, qui reste centree. */
@media (min-width:961px){
  .hero-in{padding-block:0;align-items:stretch}
  .hero-in > div:first-child{padding-block:clamp(48px,7vw,96px);align-self:center}
  .hero-media{position:relative;min-height:520px}
  .hero-media img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 12%}
}