/* ============================================================
   POLICES — servies depuis notre hébergement, jamais depuis un tiers.
   Fraunces et Inter, sous licence SIL Open Font License 1.1
   (les licences sont déposées dans /fonts/).
   Sous-ensemble latin pour le français ; le latin étendu n'est
   téléchargé par le navigateur que s'il rencontre un caractère
   qui l'exige.
   ============================================================ */
@font-face{
  font-family:'Fraunces';
  font-style:normal;
  font-weight:100 900;
  font-display:swap;
  src:url('../fonts/fraunces-latin.woff2') format('woff2-variations'),
      url('../fonts/fraunces-latin.woff2') format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face{
  font-family:'Fraunces';
  font-style:italic;
  font-weight:100 900;
  font-display:swap;
  src:url('../fonts/fraunces-latin-italic.woff2') format('woff2-variations'),
      url('../fonts/fraunces-latin-italic.woff2') format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face{
  font-family:'Fraunces';
  font-style:normal;
  font-weight:100 900;
  font-display:swap;
  src:url('../fonts/fraunces-latin-ext.woff2') format('woff2-variations'),
      url('../fonts/fraunces-latin-ext.woff2') format('woff2');
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}
@font-face{
  font-family:'Fraunces';
  font-style:italic;
  font-weight:100 900;
  font-display:swap;
  src:url('../fonts/fraunces-latin-ext-italic.woff2') format('woff2-variations'),
      url('../fonts/fraunces-latin-ext-italic.woff2') format('woff2');
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}
@font-face{
  font-family:'Inter';
  font-style:normal;
  font-weight:100 900;
  font-display:swap;
  src:url('../fonts/inter-latin.woff2') format('woff2-variations'),
      url('../fonts/inter-latin.woff2') format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face{
  font-family:'Inter';
  font-style:italic;
  font-weight:100 900;
  font-display:swap;
  src:url('../fonts/inter-latin-italic.woff2') format('woff2-variations'),
      url('../fonts/inter-latin-italic.woff2') format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face{
  font-family:'Inter';
  font-style:normal;
  font-weight:100 900;
  font-display:swap;
  src:url('../fonts/inter-latin-ext.woff2') format('woff2-variations'),
      url('../fonts/inter-latin-ext.woff2') format('woff2');
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}
@font-face{
  font-family:'Inter';
  font-style:italic;
  font-weight:100 900;
  font-display:swap;
  src:url('../fonts/inter-latin-ext-italic.woff2') format('woff2-variations'),
      url('../fonts/inter-latin-ext-italic.woff2') format('woff2');
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}

/* ============================================================
   LE LABORATOIRE AFFINITÉS — feuille de style
   Charte mère : affinites.ch (Fraunces + Inter, fond 0E0F12, or C8A86B)
   Ajout Laboratoire : deux couleurs d'univers déjà présentes
   dans la charte du Cabinet — l'indigo des outils (PRO)
   et le vert des hommes (PERSO).
   ============================================================ */

:root{
  --espace:#8A93C0;          /* la couleur de l'espace — le Laboratoire */
  --espace-soft:#6F79A8;
  --espace-rgb:138,147,192;
  --labo:#8A93C0;            /* la voix du Laboratoire, invariable */
  --labo-soft:#6F79A8;
  --labo-rgb:138,147,192;
  /* — socle hérité du Cabinet, inchangé — */
  --bg:#0E0F12;
  --surface:#16181D;
  --surface-2:#1C1F26;
  --line:#2A2E37;
  --text:#E7E9EC;
  --muted:#9AA0A8;
  --faint:#787E86;
  --gold:#C8A86B;
  --gold-soft:#A98E55;

  /* — les deux univers du Laboratoire — */
  --pro:#B2BAC6;          /* l'anthracite clair de l'entreprise */
  --pro-deep:#6B5B95;
  --pro-wash:rgba(178,186,198,.10);
  --perso:#B58A98;        /* le rose poudré */
  --perso-deep:#8A5F6E;
  --perso-wash:rgba(181,138,152,.10);

  /* — états d'une brique — */
  --ouverte:#C8A86B;
  --chantier:#D08C5A;
  --etude:#7E8694;
  --registre:#565C67;

  --maxw:1080px;
  --wide:1180px;
}

*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth;overflow-x:clip}
body{
  background:var(--bg);color:var(--text);
  font-family:'Inter',system-ui,-apple-system,sans-serif;font-weight:400;line-height:1.7;
  -webkit-font-smoothing:antialiased;overflow-x:clip;
}
img{max-width:100%;height:auto;display:block}
::selection{background:var(--espace);color:#0E0F12}
:focus-visible{outline:2px solid var(--espace);outline-offset:3px}

h1,h2,h3,h4{font-family:'Fraunces',Georgia,serif;font-weight:400;line-height:1.14;letter-spacing:-.015em}
a{color:inherit}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 32px}
.wrap-wide{max-width:var(--wide);margin:0 auto;padding:0 32px}
@media(max-width:640px){.wrap,.wrap-wide{padding:0 20px}}

.eyebrow{font-size:12px;letter-spacing:.22em;text-transform:uppercase;color:var(--espace);font-weight:500;margin-bottom:20px}
.eyebrow.pro{color:var(--pro)} .eyebrow.perso{color:var(--perso)}
.em{color:var(--espace);font-style:italic}
.em-pro{color:var(--pro);font-style:italic}
.em-perso{color:var(--perso);font-style:italic}

/* ---------- barre de navigation ---------- */
.mainnav{position:fixed;top:0;left:0;right:0;z-index:100;background:#1A1D24;padding:14px 0}
.mainnav::after{content:"";position:absolute;left:0;right:0;bottom:0;height:1px;background:var(--line);z-index:102}
.mainnav .wrap-wide{display:flex;align-items:center;justify-content:space-between;gap:20px}
.mn-brand{display:flex;align-items:center;gap:11px;text-decoration:none;flex-shrink:0}
.mn-emblem{width:30px;height:30px}.mn-emblem svg{width:100%;height:100%;display:block}
.mn-tri{transform-origin:60px 60px;animation:spin 30s linear infinite}
.mn-name{font-family:'Fraunces',serif;font-size:18px;color:var(--text);letter-spacing:.01em}
.mn-name small{display:block;font-family:'Inter',sans-serif;font-size:9.5px;letter-spacing:.28em;
  text-transform:uppercase;color:var(--espace-soft);margin-top:1px;font-weight:500}
.mn-links{display:flex;align-items:center;gap:2px}
.mn-links a{font-size:13.5px;color:var(--muted);text-decoration:none;padding:8px 14px;border-radius:20px;transition:all .2s;white-space:nowrap}
.mn-links a:hover{color:var(--text);background:var(--surface)}
.mn-links a.active,.mn-links a.mn-current{color:var(--espace)}
.mn-links a.mn-cta{background:var(--espace);color:#0E0F12;font-weight:500;margin-left:8px}
.mn-links a.mn-cta:hover{background:#d9bd83}
.mn-links a.mn-back{color:var(--faint);font-size:12.5px}
.mn-burger{display:none;background:none;border:none;color:var(--text);cursor:pointer;padding:6px}
.mn-burger svg{width:24px;height:24px}
@media(max-width:860px){.mainnav .mn-links{position:fixed;top:135px;left:0;right:0;flex-direction:column;align-items:stretch;gap:0;
    background:rgba(14,15,18,.985);backdrop-filter:blur(16px);border-bottom:1px solid var(--line);
    padding:12px 16px 20px;transform:translateY(calc(-100% - 140px));transition:transform .3s;z-index:99;max-height:88vh;overflow-y:auto}.mainnav .mn-links.open{transform:translateY(0)}.mainnav .mn-links a{padding:13px 14px;border-radius:9px;font-size:15px}.mainnav .mn-links a.mn-cta{margin-left:0;margin-top:8px;text-align:center}.mainnav .mn-burger{display:block}
}

/* ---------- sections : le séparateur officiel du Cabinet ---------- */
.sec{padding:108px 0;position:relative}
@media(max-width:760px){.sec{padding:76px 0}}
.sec:first-of-type{padding-top:0}

/* le liseré doré, tracé au défilement */
.sec:not(:first-of-type)::before,
.sec.sep-force::before{
  content:"";position:absolute;top:0;left:50%;transform:translateX(-50%);
  width:0;height:1px;
  background:linear-gradient(90deg,transparent,var(--line) 18%,var(--espace-soft) 50%,var(--line) 82%,transparent);
  opacity:0;transition:opacity .5s ease, width 1.2s cubic-bezier(.3,.7,.2,1);
}
.sec.sep-in::before{opacity:.9;width:min(680px,82%)}

/* le losange, posé au centre du liseré */
.sec:not(:first-of-type)::after,
.sec.sep-force::after{
  content:"";position:absolute;top:0;left:50%;
  width:7px;height:7px;transform:translate(-50%,-50%) rotate(45deg) scale(0);
  background:var(--bg);border:1px solid var(--espace);
  box-shadow:0 0 12px rgba(var(--espace-rgb),.5);
  transition:transform .7s cubic-bezier(.3,1.5,.5,1) .4s;
}
.sec.sep-in::after{transform:translate(-50%,-50%) rotate(45deg) scale(1)}

@media(prefers-reduced-motion:reduce){
  .sec::before{opacity:.9!important;width:min(680px,82%)!important;transition:none}
  .sec::after{transform:translate(-50%,-50%) rotate(45deg) scale(1)!important;transition:none}
}

/* séparateur autonome, entre deux blocs qui ne sont pas des sections */
.sep-seule{position:relative;height:0;margin:0}
.sep-seule::before,.sep-seule::after{content:"";position:absolute;left:50%}
.sep-seule::before{top:0;transform:translateX(-50%);width:min(680px,82%);height:1px;
  background:linear-gradient(90deg,transparent,var(--line) 18%,var(--espace-soft) 50%,var(--line) 82%,transparent);opacity:.9}
.sep-seule::after{top:0;width:7px;height:7px;transform:translate(-50%,-50%) rotate(45deg);
  background:var(--bg);border:1px solid var(--espace);box-shadow:0 0 12px rgba(var(--espace-rgb),.5)}

/* ---------- tête de section : centrée, comme sur le Cabinet ---------- */
.sec-head{max-width:72ch;margin:0 auto 54px;text-align:center}
.sec-head h2{font-size:clamp(28px,4.4vw,46px);max-width:24ch;margin:0 auto}
.sec-head .intro{font-size:clamp(17px,2vw,19px);color:var(--muted);font-weight:300;
  max-width:62ch;margin:22px auto 0;line-height:1.7}
.sec-head.gauche{margin-left:0;margin-right:0;text-align:left;max-width:60ch}
.sec-head.gauche h2{margin-left:0;max-width:none}
.sec-head.gauche .intro{margin-left:0;margin-right:0}

.reveal{opacity:0;transform:translateY(24px);transition:opacity .8s cubic-bezier(.2,.7,.2,1),transform .8s cubic-bezier(.2,.7,.2,1)}
.reveal.in{opacity:1;transform:none}
@media(prefers-reduced-motion:reduce){.reveal{opacity:1;transform:none;transition:none}}

/* ---------- boutons ---------- */
.btn{font-family:inherit;cursor:pointer;font-size:15px;letter-spacing:.01em;text-decoration:none;
  padding:15px 30px;border-radius:30px;transition:all .3s;display:inline-flex;align-items:center;gap:10px;border:0}
.btn-gold{background:var(--espace);color:#0E0F12;font-weight:500}
.btn-gold:hover{background:#d9bd83;transform:translateY(-2px)}
.btn-pro{background:var(--pro);color:#0E0F12;font-weight:500}
.btn-pro:hover{background:#9ba3cc;transform:translateY(-2px)}
.btn-perso{background:var(--perso);color:#0E0F12;font-weight:500}
.btn-perso:hover{background:#C0929F;transform:translateY(-2px)}
.btn-ghost{border:1px solid var(--line);color:var(--text);background:transparent}
.btn-ghost:hover{border-color:var(--espace);color:var(--espace)}
.btn-sm{padding:11px 22px;font-size:14px}
.btn-block{width:100%;justify-content:center}

/* ---------- HERO ---------- */
.hero{min-height:92vh;display:flex;flex-direction:column;justify-content:center;padding:150px 0 90px;position:relative;overflow:hidden}
.hero-mesh{position:absolute;inset:0;pointer-events:none;z-index:0;opacity:.55}
.hero .wrap{position:relative;z-index:1}
.hero h1{font-size:clamp(38px,5.4vw,70px);max-width:18ch;margin-bottom:28px}
.hero .lead{font-size:clamp(18px,2.3vw,23px);color:var(--muted);font-weight:300;max-width:50ch;margin-bottom:18px;line-height:1.5}
.hero .sign{font-size:15px;color:var(--text);font-weight:300;max-width:54ch;
  padding-left:18px;border-left:2px solid var(--espace);margin-bottom:44px;line-height:1.6}
.hero .sign b{color:var(--espace);font-weight:500}
.hero-cta{display:flex;gap:14px;flex-wrap:wrap;align-items:center}
@media(max-width:640px){.hero-cta .btn{width:100%;justify-content:center}}

/* emblème animé du Laboratoire : le triangle du Cabinet, ouvert en constellation */
.lab-emblem{width:112px;height:112px;margin:0 0 30px;position:relative}
.lab-emblem::before{content:"";position:absolute;inset:-18%;border-radius:50%;
  background:radial-gradient(circle,rgba(var(--espace-rgb),.16),transparent 66%);pointer-events:none}
.lab-emblem svg{width:100%;height:100%;overflow:visible}
.le-ring{transform-origin:60px 60px;animation:spin 22s linear infinite}
.le-tri{transform-origin:60px 60px;animation:spinRev 30s linear infinite}
.le-core{transform-box:fill-box;transform-origin:center;animation:breath 3.8s ease-in-out infinite}
.le-sat{transform-origin:60px 60px}
.le-s1{animation:spin 13s linear infinite}
.le-s2{animation:spinRev 19s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
@keyframes spinRev{to{transform:rotate(-360deg)}}
@keyframes breath{0%,100%{opacity:.55;transform:scale(1)}50%{opacity:1;transform:scale(1.28)}}
@media(prefers-reduced-motion:reduce){.le-ring,.le-tri,.le-core,.le-sat,.mn-tri{animation:none}}

/* ---------- bandeau de liaison Cabinet ↔ Laboratoire ---------- */
.bridge{background:linear-gradient(180deg,var(--bg),#0B0C0F 50%,var(--bg))}
.bridge-grid{display:grid;grid-template-columns:1fr auto 1fr;gap:34px;align-items:center}
.bridge-card{padding:28px 30px;border:1px solid var(--line);border-radius:16px;background:var(--surface)}
.bridge-card h3{font-size:22px;margin-bottom:8px}
.bridge-card .dom{font-size:11.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--faint);margin-bottom:14px}
.bridge-card p{font-size:14.5px;color:var(--muted);font-weight:300;line-height:1.65}
.bridge-card.cab{border-color:rgba(var(--espace-rgb),.28)}
.bridge-card.lab{border-color:rgba(178,186,198,.28)}
.bridge-link{display:flex;flex-direction:column;align-items:center;gap:8px;color:var(--espace);font-size:11px;
  letter-spacing:.2em;text-transform:uppercase;white-space:nowrap}
.bridge-link svg{width:52px;height:52px}
@media(max-width:860px){.bridge-grid{grid-template-columns:1fr}.bridge-link{flex-direction:row}.bridge-link svg{transform:rotate(90deg)}}


/* ════════════════════════════════════════════════════════════
   LA COUCHE INSTRUMENT
   Tout ce qui suit obéit à une seule idée : le Laboratoire mesure.
   Traits fins, graduations, repères, écarts. Jamais de décor gratuit.
   ════════════════════════════════════════════════════════════ */

/* ── les signes ───────────────────────────────────────────── */
.ic{width:24px;height:24px;display:block;flex:0 0 auto}
.ic-sm{width:18px;height:18px}
.ic-lg{width:34px;height:34px}
.ic-xl{width:46px;height:46px}

.sceau{position:relative;width:56px;height:56px;display:grid;place-items:center;flex:0 0 56px;
  border:1px solid var(--line);border-radius:14px;background:var(--bg);transition:all .4s cubic-bezier(.2,.7,.2,1)}
.sceau::after{content:"";position:absolute;inset:-1px;border-radius:14px;opacity:0;transition:opacity .4s;
  box-shadow:0 0 0 1px currentColor, 0 0 24px -6px currentColor}
.sceau.pro{color:var(--pro)} .sceau.perso{color:var(--perso)} .sceau.or{color:var(--espace)}
.sceau .ic{width:26px;height:26px}
.sceau-lg{width:70px;height:70px;flex-basis:70px;border-radius:18px}
.sceau-lg .ic{width:34px;height:34px}

/* graduations — le motif de service du Laboratoire */
.grad{display:flex;align-items:flex-end;gap:3px;height:12px}
.grad i{width:1px;background:var(--line);height:5px;display:block}
.grad i:nth-child(5n+1){height:11px;background:var(--espace-soft)}

/* ── le cadran d'affinité (hero de la page d'accueil) ─────── */
.cadran{position:relative;width:100%;max-width:460px;margin:0 auto;aspect-ratio:1}
.cadran svg{width:100%;height:100%;overflow:visible;display:block}
.cd-arc{fill:none;stroke:var(--line);stroke-width:1}
.cd-tick{stroke:var(--line);stroke-width:1}
.cd-tick.maj{stroke:var(--espace-soft)}
.cd-sweep{fill:none;stroke:var(--espace);stroke-width:1.4;stroke-linecap:round;opacity:.9;
  stroke-dasharray:var(--len);stroke-dashoffset:var(--len)}
.cd-mark{transform-origin:200px 200px}
.cd-node{fill:var(--bg);stroke-width:1.6}
.cd-node.pro{stroke:var(--pro)} .cd-node.perso{stroke:var(--perso)}
.cd-link{stroke-width:1;stroke-dasharray:2 4;opacity:.5}
.cd-link.pro{stroke:var(--pro)} .cd-link.perso{stroke:var(--perso)}
.cd-tri{fill:none;stroke:var(--espace);stroke-width:2;stroke-linejoin:round}
.cd-core{fill:var(--text)}
.cd-halo{fill:url(#lueur);opacity:.9}
.cd-lbl{font-family:'Inter',sans-serif;font-size:9px;letter-spacing:.22em;
  text-transform:uppercase;fill:var(--faint)}
.cd-val{font-family:'Fraunces',serif;font-size:34px;fill:var(--text)}
.cd-val tspan{font-size:15px;fill:var(--faint)}
@media(prefers-reduced-motion:no-preference){
  .cadran.vu .cd-sweep{animation:trace 1.8s cubic-bezier(.3,.7,.2,1) .2s forwards}
  .cadran.vu .cd-mark.m1{animation:conv1 2.2s cubic-bezier(.4,.9,.3,1) .3s both}
  .cadran.vu .cd-mark.m2{animation:conv2 2.2s cubic-bezier(.4,.9,.3,1) .45s both}
  .cd-rot{transform-origin:200px 200px;animation:tour 46s linear infinite}
  .cd-rot-i{transform-origin:200px 200px;animation:tour-i 62s linear infinite}
  .cd-halo{animation:souffle 4.4s ease-in-out infinite}
}
@keyframes trace{to{stroke-dashoffset:0}}
@keyframes conv1{from{transform:rotate(-58deg)}to{transform:rotate(0)}}
@keyframes conv2{from{transform:rotate(64deg)}to{transform:rotate(0)}}
@keyframes tour{to{transform:rotate(360deg)}}
@keyframes tour-i{to{transform:rotate(-360deg)}}
@keyframes souffle{0%,100%{opacity:.7;r:26}50%{opacity:1;r:33}}

/* ── tracé au défilement, générique ───────────────────────── */
.trace path,.trace line,.trace circle,.trace polyline,.trace polygon{
  stroke-dasharray:var(--l,300);stroke-dashoffset:var(--l,300);
  transition:stroke-dashoffset 1.5s cubic-bezier(.3,.7,.2,1)}
.trace.vu path,.trace.vu line,.trace.vu circle,.trace.vu polyline,.trace.vu polygon{stroke-dashoffset:0}
@media(prefers-reduced-motion:reduce){
  .trace path,.trace line,.trace circle,.trace polyline,.trace polygon{stroke-dashoffset:0!important;transition:none}
  .cadran .cd-sweep{stroke-dashoffset:0}
}

/* ── la bande de chiffres ─────────────────────────────────── */
.bande{display:grid;grid-template-columns:repeat(4,1fr);border-top:1px solid var(--line);
  border-bottom:1px solid var(--line)}
.bande div{padding:26px 24px;border-right:1px solid var(--line);display:flex;flex-direction:column;gap:4px}
.bande div:last-child{border-right:0}
.bande .n{font-family:'Fraunces',serif;font-size:clamp(26px,3.4vw,38px);color:var(--espace);line-height:1;
  font-variant-numeric:tabular-nums}
.bande .l{font-size:12px;color:var(--faint);font-weight:300;letter-spacing:.02em}
@media(max-width:760px){.bande{grid-template-columns:1fr 1fr}
  .bande div:nth-child(2n){border-right:0}
  .bande div:nth-child(-n+2){border-bottom:1px solid var(--line)}}

/* ── mise en page éditoriale ──────────────────────────────── */
.duo{display:grid;grid-template-columns:1.06fr .94fr;gap:64px;align-items:center}
.duo.serre{gap:48px}
.duo.haut{align-items:start}
.duo-inv{direction:rtl}.duo-inv>*{direction:ltr}
@media(max-width:940px){.duo,.duo.serre{grid-template-columns:1fr;gap:44px}.duo-inv{direction:ltr}}

.mot{font-family:'Fraunces',serif;font-size:clamp(26px,3.6vw,40px);line-height:1.2;
  letter-spacing:-.015em;margin-bottom:20px}
.txt{font-size:16.5px;color:var(--muted);font-weight:300;line-height:1.78;margin-bottom:17px}
.txt:last-child{margin-bottom:0}
.txt b{color:var(--text);font-weight:500}
.txt em{color:var(--text);font-style:italic}

/* chiffre fantôme */
.fantome{position:absolute;top:-26px;left:-14px;font-family:'Fraunces',serif;font-size:170px;
  line-height:1;color:var(--surface-2);z-index:0;pointer-events:none;user-select:none;letter-spacing:-.04em}
.sur{position:relative;z-index:1}

/* ── la litanie (liste rythmée à filets) ──────────────────── */
.litanie{border-top:1px solid var(--line)}
.litanie li{list-style:none;display:grid;grid-template-columns:34px 1fr;gap:18px;align-items:center;
  padding:19px 4px;border-bottom:1px solid var(--line);transition:padding-left .3s,border-color .3s}
.litanie li:hover{padding-left:12px;border-color:var(--espace-soft)}
/* les signes de la litanie portent la couleur du lieu : ils annoncent
   ce que le Laboratoire mesure, ils ne sont pas de la ponctuation.
   Legerement en retrait au repos pour que la phrase reste le sujet,
   pleins au survol — le geste garde ainsi sa reponse. */
.litanie .ic{color:var(--espace);color:color-mix(in srgb,var(--espace) 80%,var(--bg));transition:color .3s}
.litanie li:hover .ic{color:var(--espace)}
.litanie span{font-size:16.5px;color:var(--muted);font-weight:300}
.litanie b{color:var(--text);font-weight:500}

/* ── le pont Cabinet ↔ Laboratoire ────────────────────────── */
.pont{display:grid;grid-template-columns:1fr 148px 1fr;gap:0;align-items:stretch}
.pont-carte{padding:34px 34px 30px;border:1px solid var(--line);border-radius:18px;background:var(--surface);
  position:relative;overflow:hidden}
.pont-carte::before{content:"";position:absolute;inset:0 auto 0 0;width:2px}
.pont-carte.cab::before{background:var(--espace)}
.pont-carte.lab::before{background:linear-gradient(180deg,var(--pro),var(--perso))}
.pont-carte .dom{font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--faint);margin-bottom:14px}
.pont-carte h3{font-size:25px;margin-bottom:10px}
.pont-carte p{font-size:14.8px;color:var(--muted);font-weight:300;line-height:1.68}
.pont-carte ul{list-style:none;margin-top:18px;padding-top:16px;border-top:1px solid var(--line)}
.pont-carte li{font-size:13.5px;color:var(--faint);font-weight:300;display:flex;gap:9px;align-items:center;margin-bottom:8px}
.pont-carte li .ic{width:15px;height:15px;color:var(--espace-soft)}
.pont-flux{position:relative;display:grid;place-items:center}
.pont-flux svg{width:100%;height:100%;position:absolute;inset:0}
.pf-ligne{stroke:var(--line);stroke-width:1;fill:none}
.pf-bille{fill:var(--espace);r:2.6}
@media(prefers-reduced-motion:no-preference){
  .pf-b1{animation:glisse 3.6s linear infinite}
  .pf-b2{animation:glisse 3.6s linear 1.2s infinite}
  .pf-b3{animation:glisse-r 4.4s linear .6s infinite}
}
@keyframes glisse{0%{transform:translateX(0);opacity:0}12%{opacity:1}88%{opacity:1}100%{transform:translateX(148px);opacity:0}}
@keyframes glisse-r{0%{transform:translateX(148px);opacity:0}12%{opacity:1}88%{opacity:1}100%{transform:translateX(0);opacity:0}}
.pont-flux .lbl{position:relative;z-index:1;font-size:10px;letter-spacing:.2em;text-transform:uppercase;
  color:var(--espace-soft);background:var(--bg);padding:6px 10px;text-align:center;line-height:1.5}
@media(max-width:940px){
  .pont{grid-template-columns:1fr;gap:20px}
  .pont-flux{height:80px}
  .pont-flux svg{display:none}
}

/* ── le rail du parcours ──────────────────────────────────── */
.rail{position:relative;padding-top:34px}
.rail-ligne{position:absolute;top:12px;left:6%;right:6%;height:1px;background:var(--line)}
.rail-ligne::after{content:"";position:absolute;top:-1px;left:0;height:3px;width:0;border-radius:2px;
  background:linear-gradient(90deg,var(--espace-soft),var(--espace));transition:width 2.4s cubic-bezier(.3,.7,.2,1) .2s}
.rail.vu .rail-ligne::after{width:100%}
.rail-stations{display:grid;grid-template-columns:repeat(4,1fr);gap:26px}
.rail-st{text-align:center;position:relative;padding-top:6px}
.rail-st::before{content:"";position:absolute;top:-27px;left:50%;width:9px;height:9px;
  transform:translateX(-50%) rotate(45deg) scale(0);background:var(--bg);border:1px solid var(--espace);
  transition:transform .5s cubic-bezier(.3,1.5,.5,1)}
.rail.vu .rail-st::before{transform:translateX(-50%) rotate(45deg) scale(1)}
.rail.vu .rail-st:nth-child(2)::before{transition-delay:.6s}
.rail.vu .rail-st:nth-child(3)::before{transition-delay:1.2s}
.rail.vu .rail-st:nth-child(4)::before{transition-delay:1.8s}
.rail-st .sceau{margin:0 auto 16px}
.rail-st .n{font-size:10.5px;letter-spacing:.2em;text-transform:uppercase;color:var(--espace-soft);
  font-weight:600;margin-bottom:9px}
.rail-st h4{font-size:18px;margin-bottom:8px}
.rail-st p{font-size:13.8px;color:var(--muted);font-weight:300;line-height:1.62}
@media(max-width:860px){
  .rail-stations{grid-template-columns:1fr 1fr;gap:34px 20px}
  .rail-ligne{display:none}
  .rail-st::before{display:none}
}
@media(max-width:520px){.rail-stations{grid-template-columns:1fr}}

/* ── la constellation des vingt ───────────────────────────── */
.constel{position:relative;width:100%;max-width:1060px;margin:0 auto}
.constel svg{width:100%;height:auto;display:block;overflow:visible}
.cs-axe{stroke:var(--line);stroke-width:1;stroke-dasharray:2 6;opacity:.6}
.cs-arc{fill:none;stroke:var(--line);stroke-width:1;opacity:.5}
.cs-fam-arc{fill:none;stroke:var(--espace-soft);stroke-width:1.4;opacity:.45;stroke-linecap:round}
.cs-fam{font-family:'Inter',sans-serif;font-size:8.4px;letter-spacing:.22em;
  text-transform:uppercase;fill:var(--espace-soft);opacity:.72}
.cs-titre{font-family:'Inter',sans-serif;font-size:9px;letter-spacing:.26em;
  text-transform:uppercase;fill:var(--faint)}
.cs-fil{stroke-width:1;opacity:.34;stroke-linecap:round}
.cs-fil.pro{stroke:var(--pro)} .cs-fil.perso{stroke:var(--perso)}

/* le balayage — un tour toutes les 14 s */
.cs-balai{transform-origin:500px 322px;opacity:0}
.constel.vu .cs-balai{opacity:1}
@media(prefers-reduced-motion:no-preference){
  .constel.vu .cs-balai{animation:balaye 14s linear infinite}
}
@keyframes balaye{to{transform:rotate(360deg)}}

/* chaque nœud porte son signe */
.cs-g{cursor:pointer}
.cs-g .cs-tuile{fill:var(--surface);stroke:var(--line);stroke-width:1;
  transition:stroke .3s,fill .3s}
.cs-g .cs-signe{color:var(--faint);transition:color .3s}
.cs-g.pro .cs-signe{color:var(--pro);opacity:.62}
.cs-g.perso .cs-signe{color:var(--perso);opacity:.62}
.cs-g.e-ouverte .cs-tuile{fill:var(--surface-2);stroke:rgba(var(--espace-rgb),.5)}
.cs-g.e-ouverte .cs-signe{color:var(--espace);opacity:1}
.cs-lbl{font-family:'Inter',sans-serif;font-size:8.6px;letter-spacing:.13em;
  text-transform:uppercase;fill:var(--faint);transition:fill .3s}
.cs-g.e-ouverte .cs-lbl,.cs-g.e-chantier .cs-lbl{fill:var(--muted)}

/* pastilles d'état */
.cs-p{stroke-width:0}
.cs-ouverte{fill:var(--espace)}
/* .cs-chantier : voir « LES QUATRE ETATS », plus bas */
.cs-etude{fill:var(--etude)}
.cs-registre{fill:none;stroke:var(--registre);stroke-width:1;stroke-dasharray:1.5 1.5}
.cs-halo-t{fill:none;stroke:var(--espace);stroke-width:1;opacity:.16}

/* le réveil au passage du balayage : chaque nœud s'allume à son tour */
@media(prefers-reduced-motion:no-preference){
  .constel.vu .cs-g .cs-tuile{animation:reveil 14s linear infinite;animation-delay:var(--ph)}
  .constel.vu .cs-g .cs-signe{animation:reveil-s 14s linear infinite;animation-delay:var(--ph)}
  .constel.vu .cs-g.e-ouverte .cs-halo-t{animation:souffle-t 3.6s ease-in-out infinite}
}
@keyframes reveil{0%,4%{stroke:rgba(var(--espace-rgb),.75)}14%,100%{stroke:var(--line)}}
@keyframes reveil-s{0%,4%{opacity:1}16%,100%{opacity:.62}}
@keyframes souffle-t{0%,100%{opacity:.1}50%{opacity:.3}}

/* survol : le voisinage s'estompe, le nœud grandit */
.cs-g>*{transition:transform .3s cubic-bezier(.3,1.4,.5,1)}
.constel.a-survol .cs-g{opacity:.28;transition:opacity .3s}
.constel.a-survol .cs-g:hover{opacity:1}
.cs-g:hover .cs-tuile{stroke:var(--espace);fill:var(--surface-2)}
.cs-g:hover .cs-signe{opacity:1;color:var(--espace)}
.cs-g:hover .cs-lbl{fill:var(--text)}

/* le cœur */
.cs-anneau{fill:none;stroke:var(--line);stroke-width:1;stroke-dasharray:2 7}
.cs-coeur{fill:none;stroke:var(--espace);stroke-width:2.4;stroke-linejoin:round}

/* la bulle de survol */
.cs-bulle{position:absolute;z-index:5;pointer-events:none;max-width:288px;
  background:var(--surface-2);border:1px solid var(--line);border-radius:14px;
  padding:16px 18px;box-shadow:0 18px 46px -18px rgba(0,0,0,.9);
  opacity:0;transform:translateY(6px);transition:opacity .2s,transform .2s}
.cs-bulle.on{opacity:1;transform:none}
.cs-bulle .n{display:flex;align-items:baseline;gap:10px;margin-bottom:8px}
.cs-bulle h5{font-family:'Fraunces',serif;font-weight:400;font-size:18px;color:var(--text)}
.cs-bulle .c{font-size:9.5px;letter-spacing:.18em;text-transform:uppercase;color:var(--faint)}
.cs-bulle p{font-size:13px;color:var(--muted);font-weight:300;line-height:1.55;margin-bottom:12px}
.cs-bulle .etat{font-size:10px}
@media(max-width:760px){.cs-bulle{display:none}}

.constel-legende{display:flex;gap:12px 26px;flex-wrap:wrap;justify-content:center;margin-top:30px}

/* ── les tuiles, seconde version ──────────────────────────── */
.fam{margin-bottom:56px}
.fam-tete{display:flex;align-items:center;gap:16px;margin-bottom:22px}
.fam-tete .trait{flex:1;height:1px;background:var(--line)}
.fam-tete h3{font-size:19px;white-space:nowrap}
.fam-tete span{font-size:12.5px;color:var(--faint);font-weight:300;white-space:nowrap}
@media(max-width:640px){.fam-tete{flex-wrap:wrap;gap:8px}.fam-tete .trait{display:none}}

.tuiles{display:grid;grid-template-columns:repeat(auto-fill,minmax(276px,1fr));gap:16px}
.tuile{position:relative;display:flex;flex-direction:column;padding:26px 26px 22px;border-radius:16px;
  border:1px solid var(--line);background:var(--surface);text-decoration:none;overflow:hidden;min-height:236px;
  transition:border-color .35s,transform .35s,background .35s}
.tuile::after{content:"";position:absolute;top:0;right:0;width:74px;height:74px;pointer-events:none;
  background:radial-gradient(circle at 100% 0,var(--tuile-c,transparent),transparent 70%);opacity:.14}
.tuile .haut{display:flex;align-items:flex-start;justify-content:space-between;gap:14px;margin-bottom:18px}
.tuile .code{font-size:10px;letter-spacing:.2em;text-transform:uppercase;color:var(--faint);font-weight:500;
  padding-top:6px}
.tuile h4{font-size:22px;margin-bottom:10px;transition:color .35s}
.tuile p{font-size:13.8px;color:var(--muted);font-weight:300;line-height:1.62;flex:1}
.tuile .bas{display:flex;align-items:center;justify-content:space-between;gap:9px;flex-wrap:wrap;margin-top:18px;
  padding-top:14px;border-top:1px solid var(--line)}
.tuile .prix{font-size:13px;color:var(--faint);font-weight:300}
.tuile.pro{--tuile-c:var(--pro)} .tuile.perso{--tuile-c:var(--perso)}
.tuile .sceau{width:48px;height:48px;flex-basis:48px;border-radius:13px}
.tuile .sceau .ic{width:23px;height:23px}
.tuile.ouverte{background:var(--surface-2)}
.tuile.ouverte .sceau{border-color:rgba(var(--espace-rgb),.36)}
a.tuile:hover{border-color:var(--espace);transform:translateY(-3px)}
a.tuile:hover h4{color:var(--espace)}
a.tuile:hover .sceau::after{opacity:.55}
.tuile.close{cursor:default}
.tuile.close h4,.tuile.close p{opacity:.66;transition:opacity .35s}
.tuile.close .sceau{opacity:.6;transition:opacity .35s}
.tuile.close:hover{border-color:#39404C;background:var(--surface-2)}
.tuile.close:hover h4,.tuile.close:hover p,.tuile.close:hover .sceau{opacity:1}

.etat{display:inline-flex;align-items:center;gap:7px;font-size:10.5px;letter-spacing:.13em;
  text-transform:uppercase;font-weight:600;white-space:nowrap}
.etat::before{content:"";width:7px;height:7px;border-radius:50%;flex-shrink:0}
.etat.ouverte{color:var(--espace)}.etat.ouverte::before{background:var(--espace);box-shadow:0 0 8px rgba(var(--espace-rgb),.8)}

.etat.etude{color:var(--etude)}.etat.etude::before{background:var(--etude);opacity:.8}
.etat.registre{color:var(--registre)}.etat.registre::before{background:none;border:1px dashed var(--registre)}

.eveil{display:inline-flex;align-items:center;gap:7px;font-size:11px;white-space:nowrap;color:var(--faint);
  background:transparent;border:1px solid var(--line);border-radius:20px;padding:6px 13px;
  cursor:pointer;font-family:inherit;transition:all .25s}
.eveil:hover{border-color:var(--espace-soft);color:var(--espace);background:rgba(var(--espace-rgb),.05)}
.eveil.done{border-color:var(--espace);color:var(--espace);cursor:default}
.eveil .ic{width:13px;height:13px}

/* ── le filtre ────────────────────────────────────────────── */
.filtre{display:flex;gap:8px;flex-wrap:wrap;justify-content:center;margin-bottom:48px}
.filtre button{font-family:inherit;font-size:13px;color:var(--muted);background:transparent;
  border:1px solid var(--line);border-radius:22px;padding:9px 18px;cursor:pointer;transition:all .25s;
  display:inline-flex;align-items:center;gap:8px}
.filtre button:hover{color:var(--text);border-color:var(--faint)}
.filtre button[aria-pressed="true"]{background:var(--espace);border-color:var(--espace);color:#0E0F12;font-weight:500}
.filtre button .n{font-size:11px;opacity:.7}

/* ── cartes vedettes des deux briques ouvertes ────────────── */
.vedettes{display:grid;grid-template-columns:1fr 1fr;gap:20px}
@media(max-width:940px){.vedettes{grid-template-columns:1fr}}
.vedette{position:relative;display:flex;flex-direction:column;padding:38px 36px 32px;border-radius:20px;
  border:1px solid var(--line);background:var(--surface-2);text-decoration:none;overflow:hidden;
  transition:border-color .4s,transform .4s}
.vedette::before{content:"";position:absolute;top:0;left:0;right:0;height:2px;background:var(--v-c)}
.vedette::after{content:"";position:absolute;top:-40%;right:-20%;width:70%;height:80%;pointer-events:none;
  background:radial-gradient(circle,var(--v-c),transparent 68%);opacity:.07}
.vedette.pro{--v-c:var(--pro)} .vedette.perso{--v-c:var(--perso)}
.vedette:hover{transform:translateY(-4px);border-color:var(--v-c)}
.vedette .tete{display:flex;align-items:center;gap:16px;margin-bottom:22px}
.vedette .code{font-size:10.5px;letter-spacing:.2em;text-transform:uppercase;color:var(--faint);font-weight:500}
.vedette h3{font-size:31px;margin:2px 0 0}
.vedette .prom{font-size:15.5px;color:var(--muted);font-weight:300;line-height:1.68;margin-bottom:24px}
.vedette .apercu-mini{border:1px solid var(--line);border-radius:12px;background:var(--bg);padding:18px 20px;
  margin-bottom:22px}
.vedette .pied{display:flex;align-items:center;justify-content:space-between;gap:14px;margin-top:auto;
  padding-top:18px;border-top:1px solid var(--line)}
.vedette .px{font-family:'Fraunces',serif;font-size:26px;color:var(--v-c);line-height:1}
.vedette .px small{font-size:13px;color:var(--faint);font-family:'Inter',sans-serif}
.vedette .go{display:inline-flex;align-items:center;gap:9px;font-size:14px;color:var(--v-c);font-weight:500}
.vedette .go .ic{width:17px;height:17px;transition:transform .3s}
.vedette:hover .go .ic{transform:translateX(5px)}

/* barres d'écart miniatures */
.mini-gap{display:grid;gap:9px}
.mini-gap .r{display:grid;grid-template-columns:74px 1fr 34px;gap:11px;align-items:center;font-size:11.5px}
.mini-gap .k{color:var(--faint)}
.mini-gap .t{position:relative;height:6px;border-radius:4px;background:#21252D;overflow:hidden}
.mini-gap .want{position:absolute;inset:0 auto 0 0;border-radius:4px;background:rgba(var(--espace-rgb),.3);
  width:0;transition:width 1.1s cubic-bezier(.3,.7,.2,1)}
.mini-gap .got{position:absolute;inset:0 auto 0 0;border-radius:4px;background:var(--v-c,var(--pro));
  width:0;transition:width 1.1s cubic-bezier(.3,.7,.2,1) .18s}
.vu .mini-gap .want{width:var(--w)} .vu .mini-gap .got{width:var(--g)}
.mini-gap .d{text-align:right;font-variant-numeric:tabular-nums;font-weight:500}
.mini-gap .d.neg{color:var(--espace);color:color-mix(in srgb,var(--espace) 48%,var(--bg))}.mini-gap .d.pos{color:var(--perso)}

/* mini-cube */
.mini-cube{display:grid;grid-template-columns:repeat(4,1fr);gap:5px}
.mini-cube i{height:30px;border-radius:6px;border:1px solid var(--line);background:var(--bg);
  display:grid;place-items:center;font-family:'Fraunces',serif;font-size:13px;color:var(--faint);
  font-style:normal;opacity:0;transform:scale(.86);transition:all .5s cubic-bezier(.3,1.3,.5,1)}
.vu .mini-cube i{opacity:1;transform:none}
.vu .mini-cube i:nth-child(2){transition-delay:.1s}
.vu .mini-cube i:nth-child(3){transition-delay:.2s}
.vu .mini-cube i:nth-child(4){transition-delay:.3s}
.mini-cube i.hi{background:rgba(181,138,152,.16);border-color:var(--perso);color:var(--perso)}

/* ── l'appareil : une suite d'épreuves reliées par un fil ─── */
.appareil{position:relative;padding-left:0}
.appareil>li{list-style:none;position:relative;display:grid;grid-template-columns:56px 1fr;gap:26px;
  padding-bottom:38px}
.appareil>li:last-child{padding-bottom:0}
.appareil>li::before{content:"";position:absolute;left:27px;top:60px;bottom:-4px;width:1px;background:var(--line)}
.appareil>li:last-child::before{display:none}
.appareil .num{position:absolute;left:-46px;top:16px;font-family:'Fraunces',serif;font-size:14px;
  color:var(--faint);font-variant-numeric:tabular-nums}
.appareil h4{font-size:20px;margin:12px 0 9px}
.appareil p{font-size:15px;color:var(--muted);font-weight:300;line-height:1.72}
.appareil p b{color:var(--text);font-weight:500}
.appareil .sort{display:inline-flex;align-items:center;gap:8px;margin-top:12px;font-size:12.5px;
  color:var(--espace-soft);border:1px solid var(--line);border-radius:20px;padding:5px 13px;background:var(--bg)}
.appareil .sort .ic{width:14px;height:14px}
@media(max-width:640px){
  .appareil>li{grid-template-columns:44px 1fr;gap:18px}
  .appareil>li::before{left:21px;top:50px}
  .appareil .sceau{width:44px;height:44px;flex-basis:44px}
  .appareil .num{display:none}
}

/* ── le panneau d'instrument (extraits de rapport) ────────── */
.panneau{position:relative;border:1px solid var(--line);border-radius:18px;background:var(--surface);
  overflow:hidden}
.panneau::before,.panneau::after{content:"";position:absolute;width:9px;height:9px;pointer-events:none;
  border-color:var(--espace-soft);opacity:.55}
.panneau::before{top:11px;left:11px;border-top:1px solid;border-left:1px solid}
.panneau::after{bottom:11px;right:11px;border-bottom:1px solid;border-right:1px solid}
.pn-tete{padding:16px 26px;border-bottom:1px solid var(--line);background:var(--surface-2);
  display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap}
.pn-tete .t{font-size:10.5px;letter-spacing:.2em;text-transform:uppercase;color:var(--espace-soft);
  font-weight:600;display:flex;align-items:center;gap:9px}
.pn-tete .t .ic{width:15px;height:15px}
.pn-tete .r{font-size:11.5px;color:var(--faint);font-weight:300}
.pn-corps{padding:32px 30px}
.pn-note{padding:0 30px 22px;font-size:12.5px;color:var(--faint);font-weight:300;line-height:1.6}

/* barres d'écart, taille réelle */
.gap-r{margin-bottom:22px}
.gap-r:last-child{margin-bottom:0}
.gap-l{display:flex;justify-content:space-between;align-items:baseline;gap:12px;margin-bottom:8px;font-size:13.5px}
.gap-l b{color:var(--text);font-weight:500}
.gap-l .v{font-size:12.5px;color:var(--faint);font-variant-numeric:tabular-nums}
.gap-l .v em{font-style:normal;font-weight:600}
.gap-l .v em.neg{color:var(--espace);color:color-mix(in srgb,var(--espace) 48%,var(--bg))}.gap-l .v em.pos{color:var(--perso)}
.gap-t{position:relative;height:10px;border-radius:6px;background:#20242C;overflow:hidden}
.gap-t .w{position:absolute;inset:0 auto 0 0;border-radius:6px;background:rgba(var(--espace-rgb),.28);width:0;
  transition:width 1.2s cubic-bezier(.3,.7,.2,1)}
.gap-t .g{position:absolute;inset:0 auto 0 0;border-radius:6px;background:var(--pro);width:0;
  transition:width 1.2s cubic-bezier(.3,.7,.2,1) .2s}
.vu .gap-t .w{width:var(--w)} .vu .gap-t .g{width:var(--g)}
.gap-leg{display:flex;gap:26px;flex-wrap:wrap;margin-top:22px;padding-top:16px;border-top:1px solid var(--line);
  font-size:12px;color:var(--faint);font-weight:300}
.gap-leg span{display:inline-flex;align-items:center;gap:9px}
.gap-leg i{width:15px;height:8px;border-radius:4px;display:inline-block}

/* le duel */
.duel{display:grid;gap:11px}
.duel-l{display:grid;grid-template-columns:24px 1fr 56px;gap:15px;align-items:center;padding:15px 18px;
  border:1px solid var(--line);border-radius:12px;background:var(--bg);
  opacity:0;transform:translateX(-10px);transition:all .6s cubic-bezier(.3,.7,.2,1)}
.vu .duel-l{opacity:1;transform:none}
.vu .duel-l:nth-child(2){transition-delay:.12s}
.vu .duel-l:nth-child(3){transition-delay:.24s}
.vu .duel-l:nth-child(4){transition-delay:.36s}
.duel-l.gagne{border-color:var(--pro);background:var(--pro-wash)}
.duel-l .rk{font-family:'Fraunces',serif;font-size:16px;color:var(--faint)}
.duel-l.gagne .rk{color:var(--pro)}
.duel-l .nm{font-size:14.5px;color:var(--text)}
.duel-l .nm small{display:block;font-size:12.5px;color:var(--faint);font-weight:300;margin-top:3px}
.duel-l .sc{font-family:'Fraunces',serif;font-size:23px;text-align:right;color:var(--muted);
  font-variant-numeric:tabular-nums}
.duel-l.gagne .sc{color:var(--pro)}

/* le cube rôle × environnement */
.cube{display:grid;grid-template-columns:auto repeat(4,1fr);gap:7px;font-size:12.5px}
.cube .h{font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:var(--faint);
  padding:0 0 8px;font-weight:600;text-align:center}
.cube .rl{font-size:13px;color:var(--text);padding:12px 16px 12px 0;display:flex;align-items:center}
.cube .c{border-radius:10px;padding:15px 8px;text-align:center;font-family:'Fraunces',serif;font-size:19px;
  border:1px solid var(--line);background:var(--bg);color:var(--faint);font-variant-numeric:tabular-nums;
  opacity:0;transform:scale(.9);transition:opacity .45s,transform .45s cubic-bezier(.3,1.3,.5,1),background .45s}
.vu .cube .c{opacity:1;transform:none}
.cube .c.hi{background:rgba(181,138,152,.17);border-color:var(--perso);color:var(--perso)}
.cube .c.mid{background:rgba(181,138,152,.06);border-color:rgba(181,138,152,.3);color:#C79FAB}
@media(max-width:640px){.cube{font-size:11px;gap:5px}.cube .rl{font-size:11.5px;padding-right:8px}
  .cube .c{padding:11px 4px;font-size:15px}}

/* affinité contre maturité */
.am{display:grid;grid-template-columns:1fr auto 1fr;gap:20px;align-items:stretch}
.am-c{padding:24px 24px;border:1px solid var(--line);border-radius:14px;background:var(--bg)}
.am-c.gagne{border-color:var(--perso)}
.am-c .k{font-size:10.5px;letter-spacing:.15em;text-transform:uppercase;color:var(--faint);margin-bottom:14px}
.am-jauge{display:flex;align-items:baseline;gap:10px;margin-bottom:5px}
.am-jauge .v{font-family:'Fraunces',serif;font-size:31px;line-height:1;font-variant-numeric:tabular-nums}
.am-jauge .l{font-size:11.5px;color:var(--faint)}
.am-c .n{font-size:12.8px;color:var(--muted);font-weight:300;line-height:1.55;margin-bottom:16px}
.am-c .n:last-child{margin-bottom:0}
.am-c .aff{color:var(--perso)} .am-c .mat-bas{color:var(--espace);color:color-mix(in srgb,var(--espace) 48%,var(--bg))} .am-c .mat-haut{color:var(--perso)}
.am-vs{display:grid;place-items:center;font-size:10.5px;letter-spacing:.2em;text-transform:uppercase;
  color:var(--faint);writing-mode:vertical-rl}
@media(max-width:700px){.am{grid-template-columns:1fr}.am-vs{writing-mode:horizontal-tb;padding:4px 0}}

/* ── le rapport, en volume ────────────────────────────────── */
.liasse{position:relative;perspective:1400px;padding:10px 0}
.liasse-p{position:relative;border:1px solid var(--line);border-radius:12px;background:var(--surface);
  padding:26px 26px 22px;transform-style:preserve-3d;transition:transform .6s cubic-bezier(.3,.7,.2,1)}
.liasse-p+.liasse-p{margin-top:-62px}
.liasse-p:nth-child(1){transform:translateX(0) rotateZ(-1.4deg)}
.liasse-p:nth-child(2){transform:translateX(22px) rotateZ(.7deg)}
.liasse-p:nth-child(3){transform:translateX(44px) rotateZ(2deg)}
.liasse:hover .liasse-p:nth-child(1){transform:translateX(-14px) rotateZ(-3deg)}
.liasse:hover .liasse-p:nth-child(3){transform:translateX(58px) rotateZ(3.4deg)}
.liasse-p .pg{font-size:10px;letter-spacing:.2em;text-transform:uppercase;color:var(--faint);margin-bottom:12px}
.liasse-p h5{font-family:'Fraunces',serif;font-weight:400;font-size:17px;margin-bottom:12px}
.liasse-p .ln{height:1px;background:var(--line);margin-bottom:9px}
.liasse-p .ln.c{width:62%} .liasse-p .ln.d{width:84%} .liasse-p .ln.e{width:48%}
@media(max-width:640px){.liasse-p+.liasse-p{margin-top:-56px}
  .liasse-p:nth-child(2){transform:translateX(12px) rotateZ(.7deg)}
  .liasse-p:nth-child(3){transform:translateX(24px) rotateZ(2deg)}}

/* ── sommaire du livrable ─────────────────────────────────── */
.sommaire{border:1px solid var(--line);border-radius:16px;overflow:hidden;background:var(--surface)}
.sommaire .st{padding:17px 26px;border-bottom:1px solid var(--line);background:var(--surface-2);
  font-size:10.5px;letter-spacing:.2em;text-transform:uppercase;color:var(--espace-soft);font-weight:600}
.sommaire ol{list-style:none;counter-reset:p}
.sommaire li{counter-increment:p;padding:13px 26px;border-bottom:1px solid var(--line);display:grid;
  grid-template-columns:32px 1fr;gap:15px;font-size:14.5px;color:var(--muted);font-weight:300;
  transition:background .25s}
.sommaire li:hover{background:var(--surface-2)}
.sommaire li:last-child{border-bottom:0}
.sommaire li::before{content:"P" counter(p);font-size:11px;color:var(--faint);letter-spacing:.05em;padding-top:3px}
.sommaire li b{color:var(--text);font-weight:500}

/* ── le comptoir (achat) ──────────────────────────────────── */
.comptoir{border:1px solid var(--line);border-radius:20px;background:var(--surface);overflow:hidden;
  position:sticky;top:96px}
.comptoir .ct{padding:18px 28px;border-bottom:1px solid var(--line);background:var(--surface-2);
  font-size:10.5px;letter-spacing:.2em;text-transform:uppercase;font-weight:600;
  display:flex;align-items:center;gap:9px}
.comptoir .ct .ic{width:15px;height:15px}
.comptoir .corps{padding:28px}
.opt{padding:22px 0;border-bottom:1px solid var(--line)}
.opt:first-child{padding-top:0}
.opt:last-of-type{border-bottom:0;padding-bottom:8px}
.opt .nm{font-family:'Fraunces',serif;font-size:20px;margin-bottom:6px}
.opt .pr{font-family:'Fraunces',serif;font-size:34px;line-height:1;margin-bottom:10px;
  font-variant-numeric:tabular-nums}
.opt .pr small{font-size:14px;color:var(--faint);font-family:'Inter',sans-serif;margin-left:3px}
.opt p{font-size:13.5px;color:var(--muted);font-weight:300;line-height:1.62;margin-bottom:16px}
.opt.pro .pr{color:var(--pro)} .opt.perso .pr{color:var(--perso)} .opt .pr{color:var(--espace)}
.gages{border-top:1px solid var(--line);padding:20px 28px;background:var(--bg)}
.gages li{list-style:none;display:grid;grid-template-columns:17px 1fr;gap:11px;align-items:start;
  font-size:12.8px;color:var(--faint);font-weight:300;line-height:1.55;margin-bottom:11px}
.gages li:last-child{margin-bottom:0}
.gages .ic{width:15px;height:15px;color:var(--espace-soft);margin-top:2px}
.gages b{color:var(--muted);font-weight:500}
@media(max-width:940px){.comptoir{position:static}}

/* ── les lois ─────────────────────────────────────────────── */
.lois{display:grid;gap:1px;border:1px solid var(--line);border-radius:18px;overflow:hidden;background:var(--line)}
.loi{background:var(--surface);padding:28px 32px;display:grid;grid-template-columns:52px 1fr;gap:24px;
  align-items:start;transition:background .3s}
.loi:hover{background:var(--surface-2)}
.loi .sceau{width:52px;height:52px;flex-basis:52px;border-radius:13px}
.loi .n{font-family:'Fraunces',serif;font-size:12px;color:var(--faint);letter-spacing:.1em;margin-bottom:6px}
.loi h4{font-size:19px;margin-bottom:9px}
.loi p{font-size:15px;color:var(--muted);font-weight:300;line-height:1.72}
.loi p em{color:var(--text);font-style:italic}
@media(max-width:560px){.loi{grid-template-columns:1fr;gap:14px;padding:24px}}

/* ── la chaîne de traitement ──────────────────────────────── */
.chaine{position:relative;border:1px solid var(--line);border-radius:18px;background:var(--surface);
  padding:38px 34px;overflow:hidden}
.chaine-grille{display:grid;grid-template-columns:repeat(5,1fr);gap:0;position:relative;z-index:1}
.ch-et{text-align:center;padding:0 10px;position:relative}
.ch-et .sceau{margin:0 auto 14px;background:var(--surface);position:relative;z-index:2}
.ch-et .n{font-size:9.5px;letter-spacing:.2em;text-transform:uppercase;color:var(--espace-soft);
  font-weight:600;margin-bottom:8px}
.ch-et h4{font-size:16px;margin-bottom:7px}
.ch-et p{font-size:12.8px;color:var(--muted);font-weight:300;line-height:1.55}
.ch-fil{position:absolute;top:66px;left:10%;right:10%;height:1px;background:var(--line);z-index:0}
.ch-bille{position:absolute;top:-2.5px;width:5px;height:5px;border-radius:50%;background:var(--espace);
  box-shadow:0 0 10px var(--espace)}
@media(prefers-reduced-motion:no-preference){.ch-bille{animation:parcourt 5.2s cubic-bezier(.6,0,.4,1) infinite}}
@keyframes parcourt{0%{left:0;opacity:0}8%{opacity:1}92%{opacity:1}100%{left:100%;opacity:0}}
.ch-rejet{margin-top:26px;padding-top:22px;border-top:1px dashed var(--line);display:flex;gap:14px;
  align-items:flex-start;font-size:13.5px;color:var(--muted);font-weight:300;line-height:1.6}
.ch-rejet .ic{color:var(--espace);flex:0 0 20px;margin-top:2px}
@media(max-width:860px){
  .chaine-grille{grid-template-columns:1fr 1fr;gap:30px 16px}
  .ch-fil,.ch-bille{display:none}
}
@media(max-width:520px){.chaine-grille{grid-template-columns:1fr}}

/* ── les limites ──────────────────────────────────────────── */
/* le panneau des limites : une limite est un retrait, pas une alarme.
   Il prend la couleur du lieu, comme le signe d'interdiction. */
.limites{border:1px solid rgba(var(--espace-rgb),.30);border-radius:18px;background:rgba(var(--espace-rgb),.04);
  padding:34px 36px;position:relative;overflow:hidden}
.limites .tete{display:flex;align-items:center;gap:14px;margin-bottom:20px}
.limites .sceau{border-color:rgba(var(--espace-rgb),.42);color:var(--espace);width:48px;height:48px;flex-basis:48px}
.limites h3{font-size:21px;color:var(--espace)}
.limites li{list-style:none;font-size:15px;color:var(--muted);font-weight:300;line-height:1.72;
  padding-left:24px;position:relative;margin-bottom:12px}
.limites li:last-child{margin-bottom:0}
.limites li::before{content:"";position:absolute;left:2px;top:11px;width:10px;height:1px;background:var(--espace);opacity:.6}
.limites li b{color:var(--text);font-weight:500}

/* ── l'offert ─────────────────────────────────────────────── */
.offert{border:1px dashed rgba(var(--espace-rgb),.4);border-radius:20px;background:rgba(var(--espace-rgb),.03);
  padding:36px 38px;display:grid;grid-template-columns:auto 1fr auto;gap:28px;align-items:center}
.offert .sceau{color:var(--espace)}
.offert h3{font-size:23px;margin-bottom:10px}
.offert p{font-size:15px;color:var(--muted);font-weight:300;line-height:1.66;max-width:58ch}
@media(max-width:820px){.offert{grid-template-columns:1fr;gap:22px;text-align:left}
  .offert .btn{width:100%;justify-content:center}}

/* ── questions ────────────────────────────────────────────── */
.faq{border-top:1px solid var(--line)}
.faq details{border-bottom:1px solid var(--line)}
.faq summary{padding:24px 0;cursor:pointer;font-size:17px;color:var(--text);list-style:none;
  display:flex;justify-content:space-between;gap:20px;align-items:center;font-family:'Fraunces',serif;
  transition:color .25s}
.faq summary:hover{color:var(--espace)}
.faq summary::-webkit-details-marker{display:none}
.faq summary .plus{flex:0 0 22px;height:22px;position:relative}
.faq summary .plus::before,.faq summary .plus::after{content:"";position:absolute;background:var(--espace);
  transition:transform .28s}
.faq summary .plus::before{top:10.5px;left:0;width:22px;height:1px}
.faq summary .plus::after{left:10.5px;top:0;width:1px;height:22px}
.faq details[open] summary .plus::after{transform:scaleY(0)}
.faq details p{font-size:15px;color:var(--muted);font-weight:300;line-height:1.76;padding:0 0 24px;max-width:78ch}

/* ── grille tarifaire ─────────────────────────────────────── */
.table-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch;border:1px solid var(--line);border-radius:18px}
.grille{width:100%;border-collapse:collapse;font-size:14.5px;min-width:660px}
.grille th{text-align:left;font-size:10.5px;letter-spacing:.15em;text-transform:uppercase;
  color:var(--espace-soft);font-weight:600;padding:16px 18px;border-bottom:1px solid var(--line);
  background:var(--surface-2)}
.grille td{padding:15px 18px;border-bottom:1px solid var(--line);color:var(--muted);font-weight:300;
  vertical-align:middle}
.grille tr:last-child td{border-bottom:0}
.grille tbody tr{transition:background .25s}
.grille tbody tr:hover{background:var(--surface)}
.grille .nom{display:flex;align-items:center;gap:14px}
.grille .nom .ic{width:21px;height:21px;color:var(--faint)}
.grille tr.pro .nom .ic{color:var(--pro)} .grille tr.perso .nom .ic{color:var(--perso)}
.grille .nom .txt{display:block}
.grille .nom b{color:var(--text);font-weight:500;display:block;font-size:14.5px}
.grille .nom .cd{display:block;font-size:10.5px;color:var(--faint);letter-spacing:.15em;
  text-transform:uppercase;margin-top:2px}
.grille .p{color:var(--espace);white-space:nowrap}
.grille td a{color:var(--espace);text-decoration:none}

/* ── clôture ──────────────────────────────────────────────── */
.closing{text-align:center}
.closing .sceau{margin:0 auto 26px}
.closing h2{font-size:clamp(28px,4.4vw,46px);max-width:22ch;margin:0 auto 22px}
.closing p{font-size:17px;color:var(--muted);font-weight:300;max-width:54ch;margin:0 auto 34px;line-height:1.65}
.closing-cta{display:flex;gap:14px;justify-content:center;flex-wrap:wrap}
@media(max-width:640px){.closing-cta .btn{width:100%;justify-content:center}}

/* ── citation ─────────────────────────────────────────────── */
.quote{font-family:'Fraunces',serif;font-style:italic;font-size:clamp(23px,3.4vw,34px);line-height:1.38;
  color:var(--text);max-width:24ch;margin:0 auto;text-align:center}
.quote span{color:var(--espace)}
.quote-sub{text-align:center;font-size:14px;color:var(--faint);font-weight:300;margin-top:26px}
.quote-sub a{color:var(--espace);text-decoration:underline;text-underline-offset:3px}

/* ── prose légale ─────────────────────────────────────────── */
.prose{max-width:74ch;margin:0 auto}
.prose h2{font-size:27px;margin:56px 0 16px;padding-top:24px;position:relative}
.prose h2::before{content:"";position:absolute;top:0;left:0;width:46px;height:1px;background:var(--espace-soft)}
.prose h2:first-child{margin-top:0}
.prose h3{font-size:19px;margin:34px 0 12px;color:var(--espace)}
.prose p{font-size:15.8px;color:var(--muted);font-weight:300;line-height:1.8;margin-bottom:16px}
.prose ul,.prose ol{margin:0 0 18px 24px}
.prose li{font-size:15.8px;color:var(--muted);font-weight:300;line-height:1.8;margin-bottom:9px}
.prose li::marker{color:var(--espace-soft)}
.prose b,.prose strong{color:var(--text);font-weight:500}
.prose em{color:var(--text)}
.prose a{color:var(--espace);text-decoration:underline;text-underline-offset:3px}
.prose .maj{border-left:2px solid var(--espace);background:var(--surface);padding:20px 26px;
  margin:28px 0;font-size:14.5px;color:var(--muted);border-radius:0 12px 12px 0}
.prose hr{border:0;height:1px;margin:48px 0;
  background:linear-gradient(90deg,transparent,var(--line) 18%,var(--espace-soft) 50%,var(--line) 82%,transparent)}
.prose .table-scroll{margin:26px 0}

/* ── fenêtre d'éveil ──────────────────────────────────────── */
.ov{position:fixed;inset:0;background:rgba(8,9,11,.88);backdrop-filter:blur(10px);z-index:200;
  display:flex;align-items:center;justify-content:center;padding:24px;opacity:0;visibility:hidden;
  transition:opacity .3s,visibility .3s}
.ov.open{opacity:1;visibility:visible}
.ov-box{background:var(--surface);border:1px solid var(--line);border-radius:20px;max-width:540px;width:100%;
  padding:42px 40px;position:relative;transform:translateY(18px) scale(.985);transition:transform .35s cubic-bezier(.3,.9,.3,1);
  max-height:88vh;overflow-y:auto}
.ov.open .ov-box{transform:none}
.ov-x{position:absolute;top:18px;right:18px;background:none;border:0;color:var(--faint);cursor:pointer;padding:8px;
  transition:color .2s}
.ov-x:hover{color:var(--text)}
.ov-x .ic{width:20px;height:20px}
.ov-box h3{font-size:26px;margin-bottom:12px}
.ov-box .sub{font-size:14.5px;color:var(--muted);font-weight:300;line-height:1.68;margin-bottom:26px}
.fld{margin-bottom:18px}
.fld label{display:block;font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--espace-soft);
  font-weight:600;margin-bottom:9px}
.fld input,.fld select,.fld textarea{width:100%;background:var(--bg);border:1px solid var(--line);
  border-radius:11px;padding:14px 16px;color:var(--text);font-family:inherit;font-size:15px;
  transition:border-color .2s}
.fld input:focus,.fld select:focus,.fld textarea:focus{outline:0;border-color:var(--espace-soft)}
.fld .hint{font-size:12.5px;color:var(--faint);font-weight:300;margin-top:8px;line-height:1.55}
.chk{display:flex;gap:12px;align-items:flex-start;font-size:13px;color:var(--muted);font-weight:300;
  line-height:1.58;margin-bottom:20px}
.chk input{width:16px;height:16px;margin-top:3px;flex-shrink:0;accent-color:var(--espace)}
.chk a{color:var(--espace-soft)}

/* pied du cadran */
.cadran{margin:0 auto}
.cadran-pied{display:flex;justify-content:space-between;align-items:baseline;gap:14px;margin-top:22px;
  font-size:10px;letter-spacing:.22em;text-transform:uppercase}
.cadran-pied .l{color:var(--faint)}
.cadran-pied .l.pro{color:var(--pro)} .cadran-pied .l.perso{color:var(--perso)}
.cadran-pied .c{color:var(--espace-soft);font-size:9.5px}
@media(max-width:520px){.cadran-pied .c{display:none}}
/* noms toujours lisibles pour ce qui est ouvert ou en chantier */
.cs-lbl.fixe{opacity:.9;fill:var(--muted)}
.cs-g:hover .cs-lbl.fixe{fill:var(--text)}

/* hero d'accueil : les mots à gauche, l'instrument à droite */
.hero-duo{width:100%;gap:70px;align-items:center}
.hero-instrument{max-width:440px;width:100%;margin:0 auto}
.hero .wrap-wide{position:relative;z-index:1}
@media(max-width:940px){
  .hero{min-height:auto;padding:130px 0 70px}
  .hero-duo{gap:52px}
  .hero-instrument{max-width:340px;order:-1}
}

/* LA BANNIERE D'UNIVERS — on doit voir d'un coup d'oeil qu'on change
   de monde. Elle porte la couleur de son univers : anthracite chez
   l'entreprise, rose poudre chez le particulier. */
.fam-univers{display:flex;align-items:center;gap:15px;margin:8px 0 34px;
  padding:17px 24px;border-radius:14px;border:1px solid var(--line);background:var(--surface)}
.fam-univers .pt{width:9px;height:9px;border-radius:50%;flex:0 0 9px}
.fam-univers h2{font-family:'Fraunces',serif;font-size:25px;font-weight:400;margin:0;line-height:1.15;white-space:nowrap}
.fam-univers h2 em{font-style:normal}
.fam-univers .nb{font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--faint);white-space:nowrap}
.fam-univers .trait{flex:1;height:1px;min-width:20px}
.fam-univers.pro{border-color:rgba(178,186,198,.34);background:rgba(178,186,198,.05)}
.fam-univers.pro .pt{background:var(--pro);box-shadow:0 0 10px rgba(178,186,198,.65)}
.fam-univers.pro h2 em{color:var(--pro)}
.fam-univers.pro .trait{background:linear-gradient(90deg,rgba(178,186,198,.5),transparent)}
.fam-univers.perso{border-color:rgba(181,138,152,.34);background:rgba(181,138,152,.05)}
.fam-univers.perso .pt{background:var(--perso);box-shadow:0 0 10px rgba(181,138,152,.65)}
.fam-univers.perso h2 em{color:var(--perso)}
.fam-univers.perso .trait{background:linear-gradient(90deg,rgba(181,138,152,.5),transparent)}
/* le titre d'une famille prend la couleur de son univers */
.fam.pro .fam-tete h3{color:var(--pro)}
.fam.perso .fam-tete h3{color:var(--perso)}
.fam.pro .fam-tete .trait{background:linear-gradient(90deg,rgba(178,186,198,.32),var(--line))}
.fam.perso .fam-tete .trait{background:linear-gradient(90deg,rgba(181,138,152,.32),var(--line))}
/* la tuile porte son monde jusqu'au prix et a la fleche */
a.tuile .go{color:var(--tuile-c,var(--espace))}
/* le nom d'un instrument porte la couleur de son monde */
a.tuile h4{color:var(--tuile-c,var(--text))}

.tuile .prix{color:var(--tuile-c,var(--faint))}
.tuile.ouverte .sceau{border-color:color-mix(in srgb,var(--tuile-c,var(--espace)) 44%,transparent)}

.fam-univers .eyebrow{margin:0}
.gains{list-style:none}
.gains li{display:grid;grid-template-columns:22px 1fr;gap:14px;align-items:start;margin-bottom:16px;
  font-size:14.5px;color:var(--muted);font-weight:300;line-height:1.62}
.gains li:last-child{margin-bottom:0}
.gains .ic{width:19px;height:19px;color:var(--espace-soft);margin-top:2px}
.gains b{color:var(--text);font-weight:500}

/* trois cartes de fond */
.trois{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
@media(max-width:940px){.trois{grid-template-columns:1fr}}
.trois-c{padding:32px 30px;border:1px solid var(--line);border-radius:18px;background:var(--surface);
  transition:border-color .35s,transform .35s}
.trois-c:hover{border-color:var(--espace-soft);transform:translateY(-3px)}
.trois-c .sceau{margin-bottom:20px}
.trois-c h4{font-size:20px;margin-bottom:12px}
.trois-c p{font-size:14.8px;color:var(--muted);font-weight:300;line-height:1.7}

/* liste de ce que ce n'est pas */
.nonlist{list-style:none}
.nonlist li{display:grid;grid-template-columns:22px 1fr;gap:14px;align-items:center;
  padding:13px 0;border-bottom:1px solid var(--line);font-size:15px;color:var(--muted);font-weight:300}
.nonlist li:last-child{border-bottom:0}
/* le signe d'interdiction ne crie pas : il retire. Il prend la couleur
   du lieu, comme le sceau d'« Aucune commission », et se tient un cran
   en retrait — une negation n'a pas besoin d'une teinte a elle. */
.nonlist .x{color:var(--espace);opacity:.72;display:flex}

.chantier-c{display:grid;grid-template-columns:auto 1fr;gap:18px;align-items:start;padding:20px 0;
  border-bottom:1px solid var(--line)}
.chantier-c:last-child{border-bottom:0;padding-bottom:0}
.chantier-c:first-child{padding-top:0}
.chantier-c .code{font-size:10px;letter-spacing:.2em;text-transform:uppercase;color:var(--faint);
  font-weight:500;margin-bottom:5px}
.chantier-c h4{font-size:20px;margin-bottom:8px}
.chantier-c p{font-size:14px;color:var(--muted);font-weight:300;line-height:1.62}
/* quatre tuiles par rangée sur grand écran */
.tuiles{grid-template-columns:repeat(auto-fill,minmax(252px,1fr))}

/* tuile : les repères en haut, l'action en bas */
.tuile .reperes{display:flex;flex-direction:column;align-items:flex-end;gap:7px;text-align:right}
.tuile .reperes .code{padding-top:2px}
.tuile .bas{justify-content:space-between}
.tuile .go{display:inline-flex;align-items:center;gap:8px;font-size:13px;color:var(--espace);font-weight:500}
.tuile .go .ic{width:15px;height:15px;transition:transform .3s}
a.tuile:hover .go .ic{transform:translateX(4px)}
.tuile.close .bas{justify-content:flex-start}

/* ════════════════════════════════════════════════════════════
   EN-TÊTE DES PAGES SECONDAIRES
   Le titre respire sous la barre, un filigrane porte l'identité
   de la page, une graduation signe l'entrée.
   ════════════════════════════════════════════════════════════ */
.hero-page{position:relative;padding:178px 0 76px;text-align:center;overflow:hidden}
.hero-page .hero-glow{position:absolute;top:-38%;left:50%;transform:translateX(-50%);
  width:70vw;height:70vw;max-width:820px;max-height:820px;pointer-events:none;z-index:0;
  background:radial-gradient(circle,rgba(var(--espace-rgb),.085),transparent 62%)}
.hero-page .filigrane{position:absolute;top:60%;left:50%;transform:translate(-50%,-50%);
  width:360px;height:360px;pointer-events:none;z-index:0;opacity:.035;color:var(--espace)}
.hero-page .filigrane svg{width:100%;height:100%;stroke-width:.5}
.hero-page.pro .filigrane{color:var(--pro);opacity:.055}
.hero-page.perso .filigrane{color:var(--perso);opacity:.055}
.hero-page .wrap{position:relative;z-index:1}
.hero-page .dedans{max-width:820px;margin:0 auto}

.hero-page .marque{display:flex;align-items:flex-end;justify-content:center;gap:4px;height:14px;
  margin-bottom:26px}
.hero-page .marque i{width:1px;background:var(--line);height:6px;display:block}
.hero-page .marque i:nth-child(4){height:14px;background:var(--espace)}
.hero-page .marque i:nth-child(3),.hero-page .marque i:nth-child(5){height:10px;background:var(--espace-soft)}

.hero-page .eyebrow{margin-bottom:20px}
.hero-page .badge{display:inline-flex;align-items:center;gap:10px;font-size:11px;letter-spacing:.2em;
  text-transform:uppercase;padding:8px 17px;border-radius:22px;border:1px solid var(--line);
  margin-bottom:24px;font-weight:600;background:var(--surface)}
.hero-page .badge::before{content:"";width:6px;height:6px;border-radius:50%;background:currentColor}
.hero-page .badge.pro{color:var(--pro);border-color:rgba(178,186,198,.42)}
.hero-page .badge.perso{color:var(--perso);border-color:rgba(181,138,152,.42)}
.hero-page h1{font-size:clamp(34px,5.2vw,60px);max-width:19ch;margin:0 auto 24px}
.hero-page .lead{font-size:clamp(16.5px,2vw,19px);color:var(--muted);font-weight:300;
  max-width:64ch;margin:0 auto;line-height:1.72}
.hero-page .etats{display:flex;gap:12px 24px;flex-wrap:wrap;justify-content:center;margin-top:36px}
.hero-page .etats .etat{font-size:10.5px;letter-spacing:.11em}
@media(max-width:760px){
  .hero-page{padding:132px 0 58px}
  .hero-page .filigrane{width:300px;height:300px}
}
@media(max-width:560px){
  .hero-page .badge{font-size:9.5px;letter-spacing:.13em;padding:7px 14px;gap:8px}
  .hero-page .badge::before{width:5px;height:5px}
}

/* toute cible d'ancre se pose sous la barre, jamais dessous */
[id]{scroll-margin-top:92px}

/* ════════════════════════════════════════════════════════════
   PIED DE PAGE
   ════════════════════════════════════════════════════════════ */
.site-footer{background:#0B0C0E;border-top:1px solid var(--line);padding:64px 0 32px;margin-top:0}
.footer-top{display:grid;grid-template-columns:1.15fr repeat(4,1fr);gap:40px;margin-bottom:48px}
.footer-brand .fb-emblem{width:40px;height:40px;margin-bottom:16px}
.footer-brand .fb-emblem svg{width:100%;height:100%;display:block}
.footer-brand .fb-name{font-family:'Fraunces',serif;font-size:20px;color:var(--text);font-weight:400;line-height:1.7;margin-bottom:8px}
.footer-brand .fb-name small{display:block;font-family:'Inter',system-ui,sans-serif;font-size:9.5px;
  letter-spacing:.28em;text-transform:uppercase;color:var(--espace-soft);margin-top:1px;font-weight:500;line-height:1}
.footer-brand p{font-family:'Inter',system-ui,sans-serif;font-size:13.5px;color:var(--muted);font-weight:300;line-height:1.6;
  max-width:30ch}
.footer-col h4{font-family:'Inter',system-ui,sans-serif;font-size:11px;line-height:1.4;letter-spacing:.14em;
  text-transform:uppercase;color:var(--espace-soft);font-weight:600;margin-bottom:16px}
.footer-col ul{list-style:none}
.footer-col li{font-family:'Inter',system-ui,sans-serif;font-size:16px;line-height:1.7;margin-bottom:10px}
.footer-col a{font-family:'Inter',system-ui,sans-serif;font-size:14px;line-height:1.7;color:var(--muted);font-weight:300;text-decoration:none;
  transition:color .25s}
.footer-col a:hover{color:var(--espace)}
.footer-bottom{border-top:1px solid var(--line);padding-top:24px;display:flex;
  justify-content:space-between;align-items:center;flex-wrap:wrap;gap:14px}
.footer-bottom .copy{font-family:'Inter',system-ui,sans-serif;font-size:12.5px;line-height:1.7;color:#787E86}
.footer-bottom .copy a{color:var(--faint);text-decoration:none;border-bottom:1px solid var(--line)}
.footer-bottom .copy a:hover{color:var(--espace-soft)}
.footer-bottom .legal{font-size:12.5px;display:flex;gap:20px;flex-wrap:wrap}
.footer-bottom .legal a{color:var(--faint);text-decoration:none;transition:color .25s}
.footer-bottom .legal a:hover{color:var(--espace-soft)}
@media(max-width:820px){
  .footer-top{grid-template-columns:1fr 1fr;gap:32px}
  .footer-brand{grid-column:1 / -1}
  .footer-bottom{flex-direction:column;align-items:flex-start;gap:10px}
}

/* les familles, sous la carte */
.constel-familles{display:grid;gap:14px;margin-top:34px;padding-top:26px;border-top:1px solid var(--line)}
.fam-ligne{display:flex;align-items:center;gap:14px;flex-wrap:wrap}
.fam-u{font-size:10px;letter-spacing:.2em;text-transform:uppercase;font-weight:600;
  min-width:118px;flex:0 0 auto}
.fam-u.pro{color:var(--pro)} .fam-u.perso{color:var(--perso)}
.fam-puce{display:inline-flex;flex-direction:column;gap:2px;padding:8px 15px;border-radius:11px;
  border:1px solid var(--line);background:var(--surface);font-size:10px;letter-spacing:.13em;
  text-transform:uppercase;color:var(--faint)}
.fam-puce span{font-family:'Fraunces',serif;font-size:14px;letter-spacing:0;text-transform:none;
  color:var(--text)}
.fam-puce.pro{border-color:rgba(178,186,198,.28)}
.fam-puce.perso{border-color:rgba(181,138,152,.28)}
@media(max-width:760px){.fam-u{min-width:0;width:100%}.fam-puce{font-size:9px;padding:7px 12px}
  .fam-puce span{font-size:13px}}
.cs-bulle .f{font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:var(--espace-soft);
  margin-bottom:10px}


/* ═══════════════════════════════════════════════════════════
   LE PROFIL DIMENSIONNEL — briques L'Accordage et Le Premier Verre
   Une dimension, sa graduation, son plancher. Jamais une note unique.
   ═══════════════════════════════════════════════════════════ */
.dim-t{display:grid;gap:16px}
.dim-r{display:grid;grid-template-columns:22px 1fr;gap:15px;align-items:start}
.dim-r .rn{font-family:'Fraunces',serif;font-size:13px;color:var(--faint);
  line-height:1.5;letter-spacing:.04em;padding-top:1px}
.dim-r .rl{display:flex;align-items:baseline;justify-content:space-between;gap:14px;margin-bottom:8px}
.dim-r .rl b{font-size:14px;font-weight:500;color:var(--text)}
.dim-r .rl .rv{font-family:'Fraunces',serif;font-size:19px;color:var(--perso);
  line-height:1;font-variant-numeric:tabular-nums}
.dim-r.sous .rl .rv{color:var(--espace);color:color-mix(in srgb,var(--espace) 48%,var(--bg))}
.dim-r .rp{font-size:11.5px;color:var(--faint);font-weight:300;margin-top:8px;line-height:1.55}
.dim-r .rp em{font-style:normal;color:var(--espace);color:color-mix(in srgb,var(--espace) 48%,var(--bg))}
/* la piste : graduée tous les dix, comme un instrument */
.dim-p{position:relative;height:9px;border-radius:5px;background:#21252D;overflow:hidden}
.dim-p::before{content:"";position:absolute;inset:0;z-index:2;pointer-events:none;
  background:repeating-linear-gradient(90deg,transparent 0,transparent calc(10% - 1px),
    rgba(14,15,18,.75) calc(10% - 1px),rgba(14,15,18,.75) 10%)}
.dim-p i{position:absolute;inset:0 auto 0 0;width:0;border-radius:5px;
  background:linear-gradient(90deg,var(--perso-soft,#8A626F),var(--perso));
  transition:width 1.15s cubic-bezier(.16,1,.3,1);transition-delay:var(--d,0s)}
.dim-r.sous .dim-p i{background:linear-gradient(90deg,color-mix(in srgb,var(--espace) 26%,var(--bg)),color-mix(in srgb,var(--espace) 48%,var(--bg)))}
.vu .dim-p i,.reveal.in .dim-p i{width:var(--v)}
/* le plancher : le trait qu'il faut franchir */
.dim-p b{position:absolute;top:-3px;bottom:-3px;width:1px;background:var(--espace);z-index:3;
  box-shadow:0 0 7px rgba(var(--espace-rgb),.6)}
.dim-leg{display:flex;flex-wrap:wrap;gap:20px;margin-top:20px;padding-top:16px;
  border-top:1px solid var(--line);font-size:11px;color:var(--faint);font-weight:300}
.dim-leg span{display:inline-flex;align-items:center;gap:8px}
.dim-leg i{width:14px;height:6px;border-radius:3px;display:inline-block}
.dim-leg i.pl{width:1px;height:13px;border-radius:0;background:var(--espace);
  box-shadow:0 0 7px rgba(var(--espace-rgb),.6)}

/* le verdict d'attachement, en tête du profil */
.verdict{display:flex;align-items:center;gap:18px;padding:20px 22px;margin-bottom:26px;
  border:1px solid var(--line);border-radius:14px;background:var(--bg)}
.verdict .vd-s{flex:0 0 62px;height:62px;border-radius:50%;display:grid;place-items:center;
  border:1px solid rgba(181,138,152,.4);background:rgba(181,138,152,.07)}
.verdict .vd-s span{font-family:'Fraunces',serif;font-size:23px;color:var(--perso);line-height:1}
.verdict .vd-l{font-size:10.5px;letter-spacing:.2em;text-transform:uppercase;
  color:var(--faint);font-weight:500;margin-bottom:5px;display:block}
.verdict h5{font-family:'Fraunces',serif;font-weight:400;font-size:19px;margin-bottom:5px}
.verdict p{font-size:12.5px;color:var(--muted);font-weight:300;line-height:1.6}

/* mini-profil, pour la tuile vedette */
.mini-dim{display:grid;gap:8px}
.mini-dim .r{display:grid;grid-template-columns:96px 1fr 28px;gap:11px;align-items:center;font-size:11.5px}
.mini-dim .k{color:var(--faint)}
.mini-dim .t{position:relative;height:6px;border-radius:4px;background:#21252D;overflow:hidden}
.mini-dim .t i{position:absolute;inset:0 auto 0 0;width:0;border-radius:4px;background:var(--v-c);
  transition:width 1s cubic-bezier(.16,1,.3,1);transition-delay:var(--d,0s)}
.vu .mini-dim .t i{width:var(--v)}
.mini-dim .d{text-align:right;font-variant-numeric:tabular-nums;color:var(--muted);font-weight:500}

/* la ligne perdante du duel : celle qui commande le rapport */
.duel-l.perd{border-color:rgba(208,140,90,.35);background:rgba(208,140,90,.045)}
.duel-l.perd .sc{color:var(--espace);color:color-mix(in srgb,var(--espace) 48%,var(--bg))}

/* le bandeau d'une brique en chantier, sur sa propre page */
.ov-chantier{display:flex;align-items:flex-start;gap:14px;max-width:640px;margin:0 auto 26px;
  padding:15px 20px;border:1px solid rgba(208,140,90,.32);border-radius:12px;
  background:rgba(208,140,90,.06);text-align:left}
.ov-chantier .ic{width:20px;height:20px;flex:0 0 20px;margin-top:2px;
  color:var(--espace);color:color-mix(in srgb,var(--espace) 88%,var(--bg))}
.ov-chantier span{font-size:13.5px;color:var(--muted);font-weight:300;line-height:1.62}
.ov-chantier b{font-weight:500;color:var(--espace);color:color-mix(in srgb,var(--espace) 88%,var(--bg))}


/* ═══════════════════════════════════════════════════════════
   L'INSTRUMENT — la page de réponse
   Une question par écran. Aucun barème visible, jamais.
   ═══════════════════════════════════════════════════════════ */
.instr-page{min-height:100vh;display:flex;flex-direction:column;padding-top:74px}
.instr-tete{text-align:center;padding:52px 0 4px}
.instr-tete h1{font-size:clamp(30px,4.4vw,44px);line-height:1.1;margin:14px 0 12px}
.instr-tete .lead{font-size:15px;color:var(--muted);font-weight:300;max-width:52ch;margin:0 auto}
.instr-corps{flex:1;display:flex;flex-direction:column;justify-content:center;
  max-width:760px;width:100%;margin:0 auto;padding:34px 26px 90px}

/* la jauge : une reglette graduee, un cran par question */
.jauge{margin-bottom:46px;user-select:none}
.jauge-piste{position:relative;height:2px;background:var(--line);border-radius:2px;overflow:hidden}
.jauge-piste i{position:absolute;inset:0 auto 0 0;width:var(--p);border-radius:2px;
  background:linear-gradient(90deg,var(--espace-soft),var(--espace));
  transition:width .5s cubic-bezier(.16,1,.3,1)}
.jauge-crans{display:flex;gap:3px;margin-top:9px}
.jauge-crans span{flex:1;height:6px;border-radius:1px;background:#1E222A;
  transition:background .35s ease,transform .35s cubic-bezier(.16,1,.3,1);transform-origin:bottom}
.jauge-crans span.fait{background:var(--espace-soft)}
.jauge-crans span.ici{background:var(--espace);transform:scaleY(2.1)}
.jauge-txt{display:flex;justify-content:space-between;align-items:baseline;gap:16px;margin-top:13px;
  font-size:10.5px;letter-spacing:.18em;text-transform:uppercase;color:var(--faint);font-weight:500}
.jauge-txt em{font-style:normal;color:#5C626B}
.jauge-dim{color:var(--espace-soft);letter-spacing:.14em;text-align:right}

/* les ecrans */
.scene{position:relative;min-height:380px}
.vue{opacity:0;transform:translateX(var(--dx,18px));
  transition:opacity .42s ease,transform .42s cubic-bezier(.16,1,.3,1)}
.vue.de-gauche{--dx:-18px}
.vue.la{opacity:1;transform:none}

/* la question */
.q-rep{font-size:10.5px;letter-spacing:.2em;text-transform:uppercase;color:var(--faint);
  font-weight:500;margin-bottom:18px}
.q-t{font-family:'Fraunces',Georgia,serif;font-weight:400;font-size:clamp(23px,3.1vw,31px);
  line-height:1.26;letter-spacing:-.012em;margin-bottom:34px;max-width:24ch}
.q-opts{display:grid;gap:11px}
.q-o{display:grid;grid-template-columns:34px 1fr;gap:16px;align-items:center;width:100%;
  padding:19px 22px;border:1px solid var(--line);border-radius:13px;background:var(--surface);
  color:var(--text);text-align:left;font:inherit;font-size:15px;line-height:1.55;cursor:pointer;
  transition:border-color .22s,background .22s,transform .22s cubic-bezier(.16,1,.3,1)}
.q-o:hover{border-color:var(--espace-soft);background:var(--surface-2);transform:translateX(4px)}
.q-o:focus-visible{outline:none;border-color:var(--espace);box-shadow:0 0 0 3px rgba(var(--espace-rgb),.16)}
.q-k{display:grid;place-items:center;width:26px;height:26px;border-radius:50%;
  border:1px solid var(--line);font-family:'Fraunces',serif;font-size:12.5px;color:var(--faint);
  transition:all .22s}
.q-o:hover .q-k{border-color:var(--espace-soft);color:var(--espace-soft)}
.q-o.pris{border-color:var(--espace);background:rgba(var(--espace-rgb),.055)}
.q-o.pris .q-k{background:var(--espace);border-color:var(--espace);color:#0E0F12}
.q-pied{display:flex;align-items:center;justify-content:space-between;gap:18px;margin-top:26px}
.q-retour{background:none;border:none;font:inherit;font-size:13px;color:var(--faint);
  cursor:pointer;padding:6px 0;border-bottom:1px solid transparent;transition:.2s}
.q-retour:hover:not(:disabled){color:var(--muted);border-bottom-color:var(--line)}
.q-retour:disabled{opacity:.3;cursor:default}
.q-aide{font-size:11.5px;color:#5C626B;font-weight:300}
.q-aide b{color:var(--faint);font-weight:500;font-family:'Fraunces',serif}
@media(max-width:620px){.q-aide{display:none}}

/* l'inter-chapitre */
.vue-seuil{text-align:center;max-width:58ch;margin:0 auto;padding:20px 0}
.seuil-num{font-family:'Fraunces',serif;font-size:15px;letter-spacing:.3em;color:var(--espace-soft);
  margin-bottom:22px}
.vue-seuil h2{font-family:'Fraunces',serif;font-weight:400;font-size:clamp(25px,3.4vw,34px);
  line-height:1.2;margin-bottom:20px}
.seuil-c{font-size:15.5px;color:var(--muted);font-weight:300;line-height:1.72;margin-bottom:26px}
.vue-seuil blockquote{position:relative;padding:20px 26px;margin-bottom:26px;border-radius:12px;
  border:1px solid var(--line);background:var(--surface);
  font-family:'Fraunces',serif;font-style:italic;font-size:15px;color:var(--text);line-height:1.62}
.seuil-jalon{display:inline-block;padding:13px 20px;margin-bottom:26px;border-radius:11px;
  border:1px solid rgba(var(--espace-rgb),.26);background:rgba(var(--espace-rgb),.05);
  font-size:13px;color:var(--muted);font-weight:300;line-height:1.6}
.seuil-cta{display:flex;gap:12px;justify-content:center;flex-wrap:wrap}

/* la cloture */
.vue-clos{text-align:center;max-width:54ch;margin:0 auto;padding:14px 0}
.clos-sceau{width:74px;height:74px;margin:0 auto 26px;color:var(--espace)}
.clos-sceau .cl-a{stroke-dasharray:164;stroke-dashoffset:164;animation:cl-tracer 1s .1s ease forwards}
.clos-sceau .cl-b{stroke-dasharray:34;stroke-dashoffset:34;animation:cl-tracer .5s .85s ease forwards}
@keyframes cl-tracer{to{stroke-dashoffset:0}}
.vue-clos h2{font-family:'Fraunces',serif;font-weight:400;font-size:clamp(26px,3.5vw,35px);
  margin-bottom:18px}
.clos-p{font-size:15px;color:var(--muted);font-weight:300;line-height:1.72;margin-bottom:26px}
.clos-delai{display:inline-flex;align-items:center;gap:16px;padding:15px 26px;margin-bottom:22px;
  border:1px solid var(--line);border-radius:12px;background:var(--surface)}
.clos-delai .k{font-size:10.5px;letter-spacing:.2em;text-transform:uppercase;color:var(--faint);
  font-weight:500}
.clos-delai .v{font-family:'Fraunces',serif;font-size:21px;color:var(--espace)}
.clos-n{font-size:13px;color:var(--faint);font-weight:300;line-height:1.66;margin-bottom:28px}
.clos-cta{display:flex;gap:12px;justify-content:center;flex-wrap:wrap}

/* les ecrans d'etat */
.ecran{text-align:center;max-width:52ch;margin:60px auto;padding:38px 34px;
  border:1px solid var(--line);border-radius:16px;background:var(--surface)}
.ecran h2{font-family:'Fraunces',serif;font-weight:400;font-size:25px;margin-bottom:16px}
.ecran p{font-size:14.5px;color:var(--muted);font-weight:300;line-height:1.72;margin-bottom:24px}

/* le comptoir de commande */
.cmd{max-width:520px;margin:0 auto;position:relative}
.cmd-t{display:flex;align-items:center;gap:16px;padding-bottom:20px;margin-bottom:24px;
  border-bottom:1px solid var(--line)}
.cmd-t h2{font-family:'Fraunces',serif;font-weight:400;font-size:25px;margin:0}
.cmd-t .px{margin-left:auto;font-family:'Fraunces',serif;font-size:29px;color:var(--espace);
  line-height:1;white-space:nowrap}
.cmd-t .px small{font-size:12.5px;color:var(--faint);font-family:'Inter',sans-serif;margin-left:4px}
.cmd-champ{margin-bottom:17px}
.cmd-champ > label{display:block;font-size:11px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--faint);font-weight:500;margin-bottom:8px}
.cmd-champ input{width:100%;padding:14px 16px;border:1px solid var(--line);border-radius:11px;
  background:var(--bg);color:var(--text);font:inherit;font-size:15px;transition:border-color .2s}
.cmd-champ input:focus{outline:none;border-color:var(--espace-soft)}
/* un champ en faute se signale par le trait, pas par une couleur a lui */
.cmd-champ input[aria-invalid="true"]{border-color:var(--espace);border-width:2px}
.cmd-champ .err{display:none;font-size:12px;color:var(--espace);font-weight:500;margin-top:7px}
.cmd-champ input[aria-invalid="true"] ~ .err{display:block}
.cmd-pot{position:absolute;left:-9999px;width:1px;height:1px;opacity:0}
.cmd-aveu{display:grid;grid-template-columns:19px 1fr;gap:12px;align-items:start;margin:22px 0;
  font-size:12.5px;color:var(--muted);font-weight:300;line-height:1.62}
.cmd-aveu input{width:17px;height:17px;margin-top:2px;accent-color:var(--espace)}
.cmd-aveu a{color:var(--espace-soft);text-decoration:underline;text-underline-offset:3px}
.cmd-note{margin-top:20px;padding-top:18px;border-top:1px solid var(--line);
  font-size:11.5px;color:var(--faint);font-weight:300;line-height:1.66}

/* les cartes d'offre du comptoir */
.cmd .q-o{align-items:flex-start;padding:20px 22px}
.cmd .q-o .q-k{margin-top:3px}
.cmd .q-o .q-x b{display:block;font-family:'Fraunces',Georgia,serif;font-weight:400;
  font-size:18px;letter-spacing:0;text-transform:none;margin-bottom:5px;color:var(--text)}
.cmd .q-o.pris .q-k::after{content:"";width:9px;height:9px;border-radius:50%;background:#0E0F12}

/* le dépôt de matière */
.cmd-champ textarea{width:100%;padding:14px 16px;border:1px solid var(--line);border-radius:11px;
  background:var(--bg);color:var(--text);font:inherit;font-size:14.5px;line-height:1.65;
  resize:vertical;min-height:74px;transition:border-color .2s}
.cmd-champ textarea:focus{outline:none;border-color:var(--espace-soft)}
.cmd-champ textarea[aria-invalid="true"]{border-color:var(--espace);border-width:2px}
.cmd-champ textarea[aria-invalid="true"] ~ .err{display:block}
.cmd-champ .aide{font-size:11.5px;color:var(--faint);font-weight:300;line-height:1.6;margin-top:7px}
.cmd-champ .compte{color:var(--espace);color:color-mix(in srgb,var(--espace) 48%,var(--bg))}
.cmd-champ .compte.ok{color:var(--perso)}

/* reseaux du pied — aligne sur le Cabinet */
.fb-right{display:flex;align-items:center;gap:22px;flex-wrap:wrap}
.fb-social{display:flex;align-items:center;gap:4px}
.fb-social a{display:flex;align-items:center;justify-content:center;width:40px;height:40px;color:var(--faint);transition:color .25s,transform .25s}
.fb-social a:hover{color:var(--espace);transform:translateY(-1px)}
.fb-social svg{width:20px;height:20px;display:block}

/* ===== barre B : les trois espaces dans une seule barre ===== */
.mainnav{padding:11px 0 9px}
.mainnav .mn-haut{display:flex;align-items:center;gap:22px;justify-content:flex-start;margin-bottom:6px}
.mainnav .mn-bas{display:flex;align-items:center}
.mn-filet{width:1px;height:30px;background:var(--line);flex-shrink:0}
.mn-espaces{display:flex;align-items:center;gap:2px}
.mn-esp{display:inline-flex;align-items:center;gap:8px;font-size:13.5px;color:var(--muted);
  text-decoration:none;padding:7px 14px;border-radius:20px;white-space:nowrap;
  transition:color .2s,background .2s}
.mn-esp .pt{width:7px;height:7px;border-radius:50%;flex-shrink:0;opacity:.5;transition:opacity .2s}
.mn-esp:hover{color:var(--text)}
.mn-esp:hover .pt{opacity:.9}
.esp-cab .pt{background:#C8A86B} .esp-lab .pt{background:#8A93C0} .esp-aca .pt{background:#7BA88C}
.esp-cab.actif{color:#C8A86B;background:rgba(200,168,107,.13)}
.esp-lab.actif{color:#8A93C0;background:rgba(138,147,192,.13)}
.esp-aca.actif{color:#7BA88C;background:rgba(123,168,140,.13)}
.mn-esp.actif .pt{opacity:1}
.mn-bas .mn-links{flex:1}
.mn-haut .mn-burger{margin-left:auto}
.mn-name small{color:var(--gold-soft)}
@media(max-width:860px){.mainnav .mn-haut{flex-wrap:wrap;gap:12px;margin-bottom:0}.mainnav .mn-name small{display:none}.mainnav .mn-filet{display:none}.mainnav .mn-espaces{flex-basis:100%;order:3;gap:2px;margin-top:8px}.mainnav .mn-esp{flex:1;justify-content:center;font-size:12.5px;padding:8px 5px;gap:7px}.mainnav .mn-esp .art{display:none}.mainnav .mn-esp .pt{width:6px;height:6px}.mainnav .mn-links{top:135px}
}

.footer-col a.fesp{display:inline-flex;align-items:center;gap:9px}
.footer-col a.fesp .pt{width:7px;height:7px;border-radius:50%;flex-shrink:0;opacity:.85}

.mainnav .wrap-wide.mn-haut,.mainnav .wrap.mn-haut{display:flex;align-items:center;gap:22px;justify-content:flex-start;margin-bottom:6px}
.mainnav .wrap-wide.mn-bas,.mainnav .wrap.mn-bas{justify-content:flex-start;gap:0}

/* ===== barre B v2 ===== */
.mainnav .wrap-wide.mn-haut,.mainnav .wrap.mn-haut{justify-content:space-between}
.mn-espaces{margin-left:auto}
.mainnav .wrap-wide.mn-bas,.mainnav .wrap.mn-bas{display:flex;align-items:center;justify-content:space-between;gap:18px}
.mn-bas .mn-slogan{flex:0 0 auto}
.mn-bas .mn-links{margin-left:auto}
.mn-slogan{font-family:'Fraunces',serif;font-style:italic;font-size:15px;color:var(--muted);
  line-height:1.3;white-space:nowrap;transition:opacity .25s;padding-left:41px}
.mainnav{transition:border-color .3s,box-shadow .3s,padding .25s}
.mn-name small{transition:opacity .2s,max-height .25s;overflow:hidden}
.mainnav.scrolled{padding:4px 0 4px}
.mainnav.scrolled .mn-haut{margin-bottom:0}
.mainnav.scrolled .mn-name small{opacity:0;max-height:0;margin-top:0}
.mainnav.scrolled .mn-slogan{opacity:0;pointer-events:none}
.mn-esp,.mn-links a{transition:padding .25s,color .2s,background .2s}
.mainnav.scrolled .mn-esp{padding-top:5px;padding-bottom:5px}
.mainnav.scrolled .mn-links a{padding-top:6px;padding-bottom:6px}
/* ===== socle commun de la barre — strictement identique sur les trois espaces ===== */
.mainnav{padding:11px 0 9px}
.mainnav .wrap.mn-haut,.mainnav .wrap-wide.mn-haut,
.mainnav .wrap.mn-bas,.mainnav .wrap-wide.mn-bas{max-width:1180px;margin-left:auto;margin-right:auto;padding-left:24px;padding-right:24px}
.mainnav .mn-haut{margin-bottom:6px}
.mn-brand{gap:11px}
.mn-emblem,.mn-emblem svg{width:30px;height:30px}
.mn-name{font-size:18px;line-height:1.7;letter-spacing:.01em}
.mn-name small{font-size:9.5px;letter-spacing:.28em;margin-top:1px;line-height:1}
.mn-slogan{font-size:15px;padding-left:41px}
.mn-links{gap:4px}
.mn-links a{font-size:13.5px;padding:8px 15px}
.mn-esp{font-size:13.5px;padding:7px 14px;gap:8px;line-height:23px}
.mn-esp .art{display:none}
.mainnav{border-bottom:1px solid transparent}
.mn-links a{line-height:23px}
/* ===== fin du socle ===== */
/* ===== socle commun du pied — strictement identique sur les trois espaces ===== */
html .site-footer .wrap,html .site-footer .wrap-wide{max-width:1180px;margin-left:auto;margin-right:auto;
  padding-left:24px;padding-right:24px}
/* ===== fin du socle ===== */
@media(max-width:1199px){
  .mn-links a{padding:8px 10px}
  .mainnav .wrap-wide.mn-bas,.mainnav .wrap.mn-bas{gap:12px}
}
@media(max-width:860px){.mn-slogan{display:none}}

.mn-bas .mn-links{flex:0 0 auto}

/* ===== MODALE CONTACT ===== */
.modal-overlay{position:fixed;inset:0;background:rgba(8,9,11,.82);backdrop-filter:blur(6px);
    display:flex;align-items:center;justify-content:center;padding:24px;z-index:1000;
    opacity:0;visibility:hidden;transition:opacity .35s ease,visibility .35s}
  .modal-overlay.open{opacity:1;visibility:visible}
  .modal{background:linear-gradient(165deg,#1A1D23,#141519);border:1px solid var(--line);border-radius:14px;
    max-width:540px;width:100%;max-height:92vh;overflow-y:auto;position:relative;
    transform:translateY(24px) scale(.98);transition:transform .4s cubic-bezier(.3,.9,.3,1);box-shadow:0 30px 80px rgba(0,0,0,.5);
    scrollbar-width:none;-ms-overflow-style:none}
  .modal::-webkit-scrollbar{width:0;height:0;display:none}
  .modal-overlay.open .modal{transform:none}
  .modal::before{content:"";position:absolute;top:0;left:0;right:0;height:3px;background:linear-gradient(90deg,var(--espace),transparent);border-radius:14px 14px 0 0}
  .modal-close{position:absolute;top:16px;right:16px;width:36px;height:36px;border-radius:50%;border:1px solid var(--line);
    background:transparent;color:var(--muted);cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all .3s;z-index:2}
  .modal-close:hover{border-color:var(--espace-soft);color:var(--espace)}
  .modal-close svg{width:16px;height:16px}
  .modal-body,.modal-success{padding:34px 36px 28px}
  .modal-body .eyebrow{margin-bottom:14px}
  .modal-body h3{font-size:26px;margin-bottom:10px}
  .modal-sub{font-size:14.5px;color:var(--muted);font-weight:300;line-height:1.5;margin-bottom:18px}
    .modal-context[hidden]{display:none}
  .modal-context{display:flex;flex-direction:column;gap:3px;padding:11px 16px;border-left:2px solid var(--espace);
    background:rgba(var(--espace-rgb),.06);border-radius:0 6px 6px 0;margin-bottom:20px}
  .modal-context-label{font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--espace-soft)}
  .modal-context-val{font-family:'Fraunces',serif;font-size:17px;color:var(--espace)}
  .modal-fields{display:flex;flex-direction:column;gap:13px}
  .mf-row{display:grid;grid-template-columns:1fr 1fr;gap:13px}
  @media(max-width:520px){ .mf-row{grid-template-columns:1fr} }
  .mf{display:flex;flex-direction:column;gap:6px}
  .mf label{font-size:12px;letter-spacing:.04em;color:var(--muted)}
  .mf input{background:var(--bg);border:1px solid var(--line);border-radius:4px;padding:11px 14px;
    color:var(--text);font-family:inherit;font-size:15px;transition:border-color .25s}
  .mf input:focus{outline:none;border-color:var(--espace-soft)}
  .mf input::placeholder{color:var(--faint)}
  .modal-error{margin-top:14px;font-size:13.5px;color:#e08a7a;background:rgba(224,138,122,.08);
    border:1px solid rgba(224,138,122,.25);border-radius:6px;padding:11px 14px}
  .modal-submit{margin-top:18px;width:100%;justify-content:center}
  .modal-submit:disabled{opacity:.6;cursor:wait}
  .modal-legal{margin-top:13px;font-size:12px;color:var(--faint);text-align:center;line-height:1.5}
  .modal-success{text-align:center}
  .modal-success-mark{width:72px;height:72px;margin:0 auto 22px;color:var(--espace)}
  .modal-success-mark svg{width:100%;height:100%}
  .modal-success h3{font-size:28px;margin-bottom:12px}
  .modal-success p{font-size:15px;color:var(--muted);font-weight:300;line-height:1.6;margin-bottom:26px;max-width:36ch;margin-left:auto;margin-right:auto}
  @media(max-width:520px){
    .modal-body,.modal-success{padding:34px 24px 26px}
  }

/* bloc téléphone contact */
  .modal-phone{display:flex;align-items:center;gap:13px;padding:15px 18px;margin-bottom:22px;
    background:rgba(var(--espace-rgb),.07);border:1px solid rgba(var(--espace-rgb),.28);border-radius:10px;
    text-decoration:none;transition:all .2s}
  .modal-phone:hover{background:rgba(var(--espace-rgb),.12);border-color:var(--espace)}
  .modal-phone-ico{flex-shrink:0;width:40px;height:40px;border-radius:50%;display:flex;align-items:center;justify-content:center;
    background:rgba(var(--espace-rgb),.14);border:1px solid rgba(var(--espace-rgb),.35)}
  .modal-phone-ico svg{width:19px;height:19px;stroke:var(--espace)}
  .modal-phone-txt{display:flex;flex-direction:column;gap:1px}
  .modal-phone-label{font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--espace-soft)}
  .modal-phone-num{font-family:'Fraunces',serif;font-size:23px;color:var(--espace);letter-spacing:.01em;line-height:1.1}
  .modal-phone-noah{margin-left:auto;padding-left:16px;border-left:1px solid rgba(var(--espace-rgb),.28);
    display:flex;flex-direction:column;gap:2px;max-width:150px;flex-shrink:0}
  .modal-phone-noah-label{font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--espace-soft)}
  .modal-phone-noah-txt{font-size:12.5px;color:var(--muted);line-height:1.35}
  @media(max-width:520px){ .modal-phone-num{font-size:20px}
    .modal-phone{flex-wrap:wrap}
    .modal-phone-noah{margin-left:0;padding-left:0;border-left:none;padding-top:12px;margin-top:12px;
      border-top:1px solid rgba(var(--espace-rgb),.28);max-width:none;width:100%;flex-direction:row;gap:6px;align-items:baseline} }

/* ===== téléphone : la barre ne bouge plus au défilement ===== */
@media(max-width:860px){
  .mainnav.scrolled{padding:11px 0 9px}
  .mainnav.scrolled .mn-haut{margin-bottom:6px}
  .mainnav.scrolled .mn-name small{opacity:1;max-height:none;margin-top:1px}
  .mainnav.scrolled .mn-esp{padding-top:8px;padding-bottom:8px}
  .mainnav.scrolled .mn-links a{padding-top:13px;padding-bottom:13px}
}

/* ===== le seuil — les trois espaces (identique au Cabinet) ===== */
.seuil{padding:108px 0}
.seuil-tete{display:block;text-align:center;margin-bottom:52px}
.seuil-tete .eyebrow{margin-bottom:18px}
.seuil-sign{font-family:'Fraunces',serif;font-size:clamp(27px,3.7vw,39px);line-height:1.24;
  margin:0 0 16px;letter-spacing:-.01em}
.seuil-sign .s-cab{color:var(--espace)}
.seuil-sign .s-lab{color:#8A93C0}
.seuil-sign .s-aca{color:#B58A98}
.seuil-dit{font-size:15.5px;line-height:1.72;color:var(--muted);max-width:58ch;margin:0 auto;text-wrap:balance}
.seuil-portes{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px;align-items:stretch}
.porte{position:relative;background:var(--surface);border:1px solid var(--line);border-radius:18px;
  padding:32px 28px;display:flex;flex-direction:column}
.porte.ici{border-color:rgba(138,147,192,.55)}
.porte-badge{position:absolute;top:-11px;left:28px;font-size:10px;letter-spacing:.1em;
  text-transform:uppercase;font-weight:700;color:#0E0F12;background:#B2BAC6;padding:5px 15px;border-radius:20px}
.porte-nom{display:flex;align-items:center;gap:10px;margin-bottom:8px}
.porte-nom .pt{width:8px;height:8px;border-radius:50%;flex-shrink:0}
.porte-nom h3{font-family:'Fraunces',serif;font-size:27px;font-weight:400;line-height:1.2;margin:0}
.porte-verbe{font-family:'Fraunces',serif;font-size:19px;line-height:1.4;color:var(--text);margin:0 0 16px}
.porte-verbe i{font-style:italic}
.porte-txt{font-size:14.5px;line-height:1.7;color:var(--muted);font-weight:300;margin:0 0 22px}
.porte-bas{margin-top:auto;padding-top:20px;border-top:1px solid var(--line)}
.porte-prix{font-size:12.5px;color:var(--faint);margin-bottom:14px}
.porte .btn{width:100%;justify-content:center;font-size:14.5px;padding:13px 26px}
.porte .btn-gold{border:1px solid transparent}
.porte.ici .btn{background:#8A93C0;border-color:transparent;color:#0E0F12;font-weight:500}
.porte.ici .btn:hover{background:#A2AAD2}
@media(max-width:900px){
  .seuil{padding:88px 0}
  /* un peu plus d'air entre les trois portes empilees (29.08) */
  .seuil-portes{grid-template-columns:1fr;gap:22px}
}
@media(max-width:720px){
  .seuil-sign{font-size:26px;line-height:1.35}
  .seuil-sign span{display:block}
  .seuil-tete{margin-bottom:38px}
}

/* ===== téléphone : les grilles ne peuvent plus dépasser leur colonne ===== */
@media(max-width:940px){
  .duo,.duo.serre,.duo.haut{grid-template-columns:minmax(0,1fr)}
}
@media(max-width:760px){
  .pn-corps{padding:26px 18px;overflow-x:auto}
}

/* ===== téléphone : l'en-tête de page dégage la barre (135 px) ===== */
@media(max-width:860px){
  .hero-page{padding:190px 0 58px}
  .hero-page .filigrane{width:300px;height:300px}
}

/* ===== la barre ne bouge plus au défilement — desktop comme téléphone ===== */
.mainnav.scrolled{padding:11px 0 9px}
.mainnav.scrolled .mn-haut{margin-bottom:6px}
.mainnav.scrolled .mn-name small{opacity:1;max-height:none;margin-top:1px}
.mainnav.scrolled .mn-slogan{opacity:1;pointer-events:auto}
.mainnav.scrolled .mn-esp{padding-top:7px;padding-bottom:7px}
.mainnav.scrolled .mn-links a{padding-top:8px;padding-bottom:8px}
@media(max-width:860px){
  .mainnav.scrolled .mn-esp{padding-top:8px;padding-bottom:8px}
  .mainnav.scrolled .mn-links a{padding-top:13px;padding-bottom:13px}
}
.porte-prix{text-align:center}

/* ===== la barre : même respiration des liens sur toutes les pages ===== */
.mn-links a{padding-left:15px;padding-right:15px}
@media(max-width:1010px){
  .mn-links a{padding-left:10px;padding-right:10px}
  .mainnav .wrap.mn-bas,.mainnav .wrap-wide.mn-bas{gap:12px}
}
@media(max-width:940px){
  .mn-links a{padding-left:7px;padding-right:7px}
}

/* ===== téléphone : le héros dégage la barre, comme l'Académie (29.08) ===== */
@media(max-width:860px){
  .hero{padding-top:172px}
}

/* ═══════════════════════════════════════════════════════════
   LA CLEF DE LA CARTE — deux univers, six familles, quatre états
   ═══════════════════════════════════════════════════════════ */
.constel-clef{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin-top:40px;
  padding-top:32px;border-top:1px solid var(--line)}
.clef-u{position:relative;background:var(--surface);border:1px solid var(--line);
  border-radius:16px;padding:22px 24px 18px;overflow:hidden}
.clef-u::before{content:"";position:absolute;left:0;top:0;bottom:0;width:2px}
.clef-u.pro::before{background:linear-gradient(180deg,var(--pro),rgba(178,186,198,0))}
.clef-u.perso::before{background:linear-gradient(180deg,var(--perso),rgba(181,138,152,0))}
.clef-tete{display:flex;align-items:baseline;gap:9px;margin-bottom:15px}
.clef-tete .pt{width:7px;height:7px;border-radius:50%;flex-shrink:0;transform:translateY(-1px)}
.clef-u.pro .clef-tete .pt{background:var(--pro);box-shadow:0 0 9px rgba(178,186,198,.6)}
.clef-u.perso .clef-tete .pt{background:var(--perso);box-shadow:0 0 9px rgba(181,138,152,.6)}
.clef-nom{font-size:10.5px;letter-spacing:.2em;text-transform:uppercase;font-weight:600}
.clef-u.pro .clef-nom{color:var(--pro)}
.clef-u.perso .clef-nom{color:var(--perso)}
.clef-nb{margin-left:auto;font-size:11px;color:var(--faint);letter-spacing:.04em;white-space:nowrap}
/* le chapeau : ce que l'univers promet, avant le detail des familles */
.clef-lead{margin:-3px 0 15px;font-size:13px;line-height:1.62;color:var(--muted);
  font-weight:300;padding-bottom:14px;border-bottom:1px solid rgba(231,233,236,.06)}
.clef-fams{list-style:none;margin:0;padding:0;display:grid}
.clef-fams li{display:flex;gap:16px;align-items:baseline;
  padding:10px 0;border-top:1px solid rgba(231,233,236,.055)}
.clef-fams li:first-child{border-top:none;padding-top:0}
.clef-fams li:last-child{padding-bottom:0}
.clef-fams b{font-family:'Fraunces',serif;font-weight:400;font-size:16.5px;color:var(--text);
  line-height:1.35;flex:0 0 118px}
.clef-fams span{font-size:12.5px;color:var(--muted);font-weight:300;line-height:1.5}
@media(max-width:820px){
  .constel-clef{grid-template-columns:1fr;gap:14px;margin-top:32px;padding-top:26px}
  .clef-u{padding:20px 20px 16px}
  .clef-fams li{flex-direction:column;gap:2px;padding:9px 0}
  .clef-fams b{flex:0 0 auto}
  .clef-fams b{font-size:16px}
}

/* les quatre états, en clair */
.constel-legende{margin-top:26px;padding-top:24px;border-top:1px solid var(--line);
  display:flex;flex-direction:column;align-items:center;gap:16px}
.lg-titre{font-size:10px;letter-spacing:.22em;text-transform:uppercase;color:var(--faint);font-weight:600}
.lg-etats{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;width:100%}
.lg-etat{display:flex;align-items:flex-start;gap:11px;
  padding:13px 15px;border:1px solid var(--line);border-radius:12px;background:var(--surface)}
.lg-txt{min-width:0}
.lg-etat::before{content:"";width:8px;height:8px;border-radius:50%;margin-top:5px;flex:0 0 8px;box-sizing:border-box}
.lg-etat b{display:block;font-size:10.5px;letter-spacing:.11em;text-transform:uppercase;
  font-weight:600;line-height:1.5}
.lg-etat i{font-style:normal;font-size:10px;letter-spacing:0;color:var(--faint);margin-left:6px}
.lg-etat small{display:block;font-size:12px;color:var(--faint);font-weight:300;
  letter-spacing:0;text-transform:none;line-height:1.45;margin-top:4px}
.lg-etat.ouverte{border-color:rgba(var(--espace-rgb),.32)}
.lg-etat.ouverte b{color:var(--espace)}
.lg-etat.ouverte::before{background:var(--espace);box-shadow:0 0 9px rgba(var(--espace-rgb),.85)}

.lg-etat.etude b{color:var(--etude)}
.lg-etat.etude::before{background:var(--etude);opacity:.8}
.lg-etat.registre b{color:var(--registre)}
.lg-etat.registre::before{background:none;border:1px dashed var(--registre)}
@media(max-width:900px){.lg-etats{grid-template-columns:1fr 1fr}}
@media(max-width:520px){.lg-etats{grid-template-columns:1fr}}

/* ===== les inserts de texte prennent la couleur du Laboratoire (29.08) =====
   Teinte propre à l'accent : un cran plus claire que l'indigo « entreprise »,
   pour que le Laboratoire souligne avec le même poids que l'or du Cabinet
   et le vert de l'Académie (7.74:1 contre 8.46 et 7.14). ===== */


/* ===== pas de halo ni de filigrane derrière les titres — comme au Cabinet (29.08) ===== */
.hero-page .hero-glow,.hero-page .filigrane{display:none}

/* ═══════════════════════════════════════════════════════════
   LA BANDE DES QUATRE CHIFFRES — refaite (29.08)
   Plus de cadre : un filet fin entre les colonnes, un chiffre
   qui respire, une clef en Fraunces, une glose en dessous.
   ═══════════════════════════════════════════════════════════ */
.bande{display:grid;grid-template-columns:repeat(4,1fr);border-top:0;border-bottom:0;
  gap:0;padding:6px 0}
.bande div{padding:4px 34px 4px 0;border-right:1px solid var(--line);
  display:grid;grid-template-columns:auto 1fr;column-gap:18px;row-gap:2px;align-items:baseline}
.bande div + div{padding-left:34px}
.bande div:last-child{border-right:0;padding-right:0}
.bande .n{grid-row:1 / span 2;font-family:'Fraunces',serif;
  font-size:clamp(34px,3.6vw,46px);color:var(--espace);line-height:.92;
  font-variant-numeric:tabular-nums;letter-spacing:-.02em}
.bande .k{font-family:'Fraunces',serif;font-size:16px;color:var(--text);line-height:1.25;
  letter-spacing:0}
.bande .l{font-size:12.5px;color:var(--faint);font-weight:300;line-height:1.5;letter-spacing:.01em}
@media(max-width:940px){
  .bande{grid-template-columns:1fr 1fr;row-gap:26px}
  .bande div{padding:0 26px 0 0}
  .bande div + div{padding-left:0}
  .bande div:nth-child(2n){border-right:0;padding-right:0}
  .bande div:nth-child(2n+1){padding-right:26px}
  .bande .n{font-size:38px}
}
@media(max-width:560px){
  .bande{grid-template-columns:1fr;row-gap:22px}
  .bande div,.bande div:nth-child(2n+1){border-right:0;padding:0}
}

/* ═══════════════════════════════════════════════════════════
   LES LOSANGES — même espace au-dessus qu'en dessous (29.08)
   Le bloc qui précède un séparateur laisse exactement l'espace
   que la section suivante laisse en dessous.
   ═══════════════════════════════════════════════════════════ */
.sec.sep-force,.sec:not(:first-of-type){padding-top:108px}
*:has(+ .sec.sep-force),*:has(+ .sec:not(:first-of-type)){padding-bottom:108px}
@media (max-width: 760px) {
  .sec.sep-force,.sec:not(:first-of-type){padding-top:76px}
  *:has(+ .sec.sep-force),*:has(+ .sec:not(:first-of-type)){padding-bottom:76px}
}

/* ===== la bande : le tableau se ferme avant le losange, sur téléphone (29.08) ===== */
@media (max-width: 940px) {
  .bande div + div{border-top:1px solid var(--line);padding-top:24px}
  .bande div:nth-child(2){border-top:0;padding-top:0}
  .bande{row-gap:24px}
}
@media (max-width: 560px) {
  .bande div + div{border-top:1px solid var(--line);padding-top:22px}
  .bande div:nth-child(2){border-top:1px solid var(--line);padding-top:22px}
  .bande{row-gap:22px}
}

/* ===== l'en-tête de page respire moins avant la première section ===== */
.hero-page.hero-page{padding-bottom:76px}
.hero-page + .sec{padding-top:76px}

/* ═══════════════════════════════════════════════════════════
   LA BANDE SUR TÉLÉPHONE — quatre cases, deux lignes (29.08)
   ═══════════════════════════════════════════════════════════ */
@media (max-width: 940px) {
  .bande{grid-template-columns:1fr 1fr;gap:12px;padding:0}
  .bande div,
  .bande div + div,
  .bande div:nth-child(2n),
  .bande div:nth-child(2n+1),
  .bande div:nth-child(2){
    display:block;border:1px solid var(--line);border-top:1px solid var(--line);
    border-right:1px solid var(--line);border-radius:14px;
    background:var(--surface);padding:18px 16px}
  .bande .n{display:block;font-size:36px;line-height:1;margin-bottom:10px}
  .bande .k{display:block;font-size:15px;line-height:1.3;margin-bottom:4px}
  .bande .l{display:block;font-size:12px;line-height:1.45}
}
@media (max-width: 560px) {
  .bande{grid-template-columns:1fr 1fr;gap:10px}
  .bande div,.bande div + div,.bande div:nth-child(2n),
  .bande div:nth-child(2n+1),.bande div:nth-child(2){padding:16px 14px}
  .bande .n{font-size:32px;margin-bottom:8px}
  .bande .k{font-size:14.5px}
  .bande .l{font-size:11.5px}
}

/* le bouton de la Liste d'Éveil : il n'appartient ni à l'entreprise ni
   au particulier — il parle au nom du Laboratoire, il en prend la couleur */
.btn-lab{background:#8A93C0;color:#0E0F12;font-weight:500}
.btn-lab:hover{background:#A2AAD2;transform:translateY(-2px)}


/* ============================================================
   LES TROIS ZONES DE COULEUR — arrete le 1er septembre 2026
   Meme discipline que l'Academie : un seul jeton porte la couleur
   du lieu, la page le declare une fois sur son <body>.

   1. LE CABINET EST LA MAISON — et rien d'autre n'est dore.
      L'en-tete, le pied, la marque, l'embleme, le pont vers le
      Cabinet. Un bouton du Laboratoire n'est jamais dore.
   2. LA PAGE PORTE LA COULEUR DE SON INSTRUMENT. Rose poudre chez
      le particulier, anthracite clair chez l'entreprise,
      bleu-lavande quand le Laboratoire parle de lui-meme.
   3. LE CONTACT PARLE AU NOM DU LABORATOIRE — bleu sur chaque page.

   SEULE EXCEPTION ASSUMEE : l'etat « Ouverte ». Il appartient a une
   legende de quatre couleurs (ouverte / chantier / etude / registre).
   Le repeindre casserait la legende, pas la charte.
   ============================================================ */

body.esp-entreprise{--espace:#B2BAC6;--espace-soft:#7E8694;--espace-rgb:178,186,198}
body.esp-particulier{--espace:#B58A98;--espace-soft:#8A5F6E;--espace-rgb:181,138,152}

/* — 1. le chrome du Cabinet — */
.mn-name small{color:var(--gold-soft)}
/* le bouton de la barre mene aux instruments du Laboratoire :
   il parle en son nom, pas au nom du Cabinet. */
.mn-links a.mn-cta{background:var(--labo);color:#0E0F12}
.mn-links a.mn-cta:hover{background:#A2AAD2}
.footer-brand .fb-name small{color:var(--gold-soft)}
.footer-col h4{color:var(--gold-soft)}
.footer-col a:hover{color:var(--gold)}
.footer-bottom .copy a:hover,.footer-bottom .legal a:hover{color:var(--gold-soft)}
.fb-social a:hover{color:var(--gold)}
.bridge-link{color:var(--gold)}
.pont-carte.cab::before{background:var(--gold)}
.seuil-sign .s-cab{color:var(--gold)}

/* — LES QUATRE ETATS : une seule teinte, quatre degres —
   Un etat n'est pas une famille : c'est un degre d'avancement. Il se dit
   donc en luminosite, pas en couleur nouvelle. La forme de la pastille
   double l'information — pleine, cerclee, sourde, pointillee — pour que
   l'echelle reste lisible meme sans percevoir la nuance.
   Aucune quatrieme teinte n'entre dans la charte. */
.etat.ouverte{color:var(--espace)}
.etat.ouverte::before{background:var(--espace);border:0;box-shadow:0 0 8px rgba(var(--espace-rgb),.75)}
.etat.chantier{color:var(--espace);color:color-mix(in srgb,var(--espace) 88%,var(--bg))}
.etat.chantier::before{background:none;border:1.5px solid color-mix(in srgb,var(--espace) 78%,var(--bg));box-shadow:none}
.etat.etude{color:var(--espace);color:color-mix(in srgb,var(--espace) 76%,var(--bg))}
.etat.etude::before{background:color-mix(in srgb,var(--espace) 50%,var(--bg));border:0;opacity:1;box-shadow:none}
.etat.registre{color:var(--espace);color:color-mix(in srgb,var(--espace) 64%,var(--bg))}
.etat.registre::before{background:none;border:1px dashed color-mix(in srgb,var(--espace) 36%,var(--bg));box-shadow:none}
.lg-etat.ouverte{border-color:rgba(var(--espace-rgb),.32)}
.lg-etat.ouverte b{color:var(--espace)}
.lg-etat.ouverte::before{background:var(--espace);border:0;box-shadow:0 0 9px rgba(var(--espace-rgb),.85)}
.lg-etat.chantier b{color:var(--espace);color:color-mix(in srgb,var(--espace) 88%,var(--bg))}
.lg-etat.chantier::before{background:none;border:1.5px solid color-mix(in srgb,var(--espace) 78%,var(--bg))}
.lg-etat.etude b{color:var(--espace);color:color-mix(in srgb,var(--espace) 76%,var(--bg))}
.lg-etat.etude::before{background:color-mix(in srgb,var(--espace) 50%,var(--bg));border:0;opacity:1}
.lg-etat.registre b{color:var(--espace);color:color-mix(in srgb,var(--espace) 64%,var(--bg))}
.lg-etat.registre::before{background:none;border:1px dashed color-mix(in srgb,var(--espace) 36%,var(--bg))}
/* la carte des vingt suit la meme echelle */
.cs-ouverte{fill:var(--espace)}
.cs-chantier{fill:var(--bg);stroke:color-mix(in srgb,var(--espace) 78%,var(--bg))}
.cs-etude{fill:color-mix(in srgb,var(--espace) 54%,var(--bg))}
.cs-registre{fill:none;stroke:color-mix(in srgb,var(--espace) 36%,var(--bg));stroke-width:1;stroke-dasharray:1.5 1.5}
/* la porte du Laboratoire, le badge « vous etes ici » compris */
.porte-badge{background:#8A93C0}

/* — 2. le bouton principal porte la couleur du lieu. Il s'appelle
   encore btn-gold dans le balisage : le nom ment, la couleur non. — */
.btn-gold{background:var(--espace);color:#0E0F12;font-weight:500}
.btn-gold:hover{background:var(--espace);filter:brightness(1.12);transform:translateY(-2px)}

/* — les pages mixtes : chaque ligne, chaque tuile porte son monde,
   et le neutre est le bleu du Laboratoire, jamais l'or. — */
.grille th{color:var(--espace-soft)}
.grille .p{color:var(--espace)}
.grille td a{color:var(--espace)}
.grille tr.pro .p,.grille tr.pro td a,.grille tr.pro .nom{color:var(--pro)}
.grille tr.perso .p,.grille tr.perso td a,.grille tr.perso .nom{color:var(--perso)}
.filtre button[aria-pressed="true"]{background:var(--espace);border-color:var(--espace);color:#0E0F12}
a.tuile:hover{border-color:var(--espace)}
a.tuile:hover h4{color:var(--espace)}
a.tuile.pro:hover{border-color:var(--pro)}  a.tuile.pro:hover h4{color:var(--pro)}
a.tuile.perso:hover{border-color:var(--perso)}  a.tuile.perso:hover h4{color:var(--perso)}

/* — la carte des vingt — */
.cs-halo-t{stroke:var(--espace)}
.cs-coeur{stroke:var(--espace)}
.cs-fam{fill:var(--espace-soft)}
.cs-fam-arc{stroke:var(--espace-soft)}
.cs-bulle .f{color:var(--espace-soft)}
.cs-g:hover .cs-tuile{stroke:var(--espace)}
.cs-g:hover .cs-signe{color:var(--espace)}
.cs-g.pro:hover .cs-tuile{stroke:var(--pro)}  .cs-g.pro:hover .cs-signe{color:var(--pro)}
.cs-g.perso:hover .cs-tuile{stroke:var(--perso)}  .cs-g.perso:hover .cs-signe{color:var(--perso)}
.cs-g.pro.e-ouverte .cs-signe{color:var(--pro)}
.cs-g.perso.e-ouverte .cs-signe{color:var(--perso)}

/* — sur une page d'instrument, le sceau suit la couleur du lieu — */
body.esp-particulier .sceau.pro,body.esp-particulier .sceau.perso,
body.esp-entreprise .sceau.pro,body.esp-entreprise .sceau.perso{color:var(--espace)}

/* — 3. le contact et la Liste d'Eveil : la voix du Laboratoire — */
.modal::before{background:linear-gradient(90deg,var(--labo),transparent)}
.modal-close:hover{border-color:var(--labo-soft);color:var(--labo)}
.modal .eyebrow{color:var(--labo)}
.modal-context{border-left-color:var(--labo);background:rgba(var(--labo-rgb),.08)}
.modal-context-label{color:var(--labo-soft)}
.modal-context-val{color:var(--labo)}
.mf input:focus,.mf select:focus,.mf textarea:focus{border-color:var(--labo-soft)}
.modal-success-mark{color:var(--labo)}
.modal-phone:hover{background:rgba(var(--labo-rgb),.14);border-color:var(--labo)}
.modal-phone-ico svg{stroke:var(--labo)}
.modal-phone-label,.modal-phone-noah-label{color:var(--labo-soft)}
.modal-phone-num{color:var(--labo)}
.eveil:hover{border-color:var(--labo-soft);color:var(--labo);background:rgba(var(--labo-rgb),.06)}
.eveil.done{border-color:var(--labo);color:var(--labo)}
.btn-lab,.ov-box .btn-gold,.ov-box .btn{background:var(--labo);color:#0E0F12;font-weight:500}
.btn-lab:hover,.ov-box .btn:hover{background:#A2AAD2;transform:translateY(-2px);filter:none}


/* LE TELEPHONE ================================================
   Tout ce qui suit vit sous 760 px et NE FAIT QU'AJOUTER.
   Aucune regle de bureau n'est modifiee : ce bloc est en fin de
   feuille, il n'existe pas au-dessus de 760 px.
   ============================================================ */
@media(max-width:760px){
  .table-scroll{overflow-x:visible;border:0;border-radius:0;background:none}
  .grille{min-width:0;width:100%;display:block;border-collapse:separate;font-size:14.5px}
  .grille thead{position:absolute;width:1px;height:1px;padding:0;margin:-1px;
    overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
  .grille tbody{display:block}
  .grille tbody tr{display:block;border:1px solid var(--line);border-radius:16px;
    background:var(--surface-2);padding:18px 20px;margin:0 0 12px}
  .grille tbody td{display:block;border:0;padding:0;white-space:normal}
  .grille.tarifs tbody tr{display:grid;grid-template-columns:1fr auto;gap:12px 14px;
    align-items:center;grid-template-areas:"nom nom" "mes mes" "prix etat"}
  .grille.tarifs tbody td:nth-child(1){grid-area:nom}
  .grille.tarifs tbody td:nth-child(2){grid-area:mes;font-size:13.5px;color:var(--muted);line-height:1.6}
  .grille.tarifs tbody td:nth-child(3){grid-area:prix;font-size:19px;white-space:nowrap}
  .grille.tarifs tbody td:nth-child(4){grid-area:etat;justify-self:end}
  .grille.lexique tbody td:nth-child(1){font-family:'Fraunces',serif;font-size:16.5px;
    color:var(--text);margin-bottom:7px}
  .grille.lexique tbody td:nth-child(2){font-size:13.5px;color:var(--muted);line-height:1.65}
  .grille.donnees tbody td,.grille.tiers tbody td{padding:9px 0;border-top:1px solid var(--line)}
  .grille.donnees tbody td:first-child,.grille.tiers tbody td:first-child{border-top:0;padding-top:0}
  .grille.donnees tbody td::before,.grille.tiers tbody td::before{display:block;
    font-size:9.5px;letter-spacing:.16em;text-transform:uppercase;
    color:var(--espace-soft);margin-bottom:4px}
  .grille.donnees tbody td:nth-child(1)::before{content:"Cat\0000e9gorie"}
  .grille.donnees tbody td:nth-child(2)::before{content:"Contenu"}
  .grille.donnees tbody td:nth-child(3)::before{content:"Finalit\0000e9"}
  .grille.donnees tbody td:nth-child(4)::before{content:"Base l\0000e9gale"}
  .grille.tiers tbody td:nth-child(1)::before{content:"Prestataire"}
  .grille.tiers tbody td:nth-child(2)::before{content:"R\0000f4le"}
  .grille.tiers tbody td:nth-child(3)::before{content:"Pays"}
  .grille.tiers tbody td:nth-child(4)::before{content:"Garantie"}
  /* — 2. PLANCHER TYPOGRAPHIQUE. En capitales espacees, sous 11 px,
     ce n'est plus de la typographie, c'est un motif. On reprend ici
     les selecteurs EXACTS du socle : un selecteur plus court perdrait
     par specificite, quelle que soit sa position dans la feuille. — */
  .mn-name small,.footer-brand .fb-name small{font-size:10.5px;letter-spacing:.2em}
  .cd-lbl,.cs-bulle .c,.ch-et .n,.cadran-pied .c,.cadran-pied{font-size:11px}
  .pont-flux .lbl,.cs-bulle .etat,.cs-bulle .f,.cs-titre{font-size:11px}
  .tuile .code,.chantier-c .code,.liasse-p .pg,.cube .h{font-size:11px}
  .fam-u,.fam-puce,.porte-badge,.lg-titre,.lg-etat i{font-size:11px}
  .vedette .code{font-size:11.5px}

  /* — 3. CE QU'UN POUCE DOIT POUVOIR ATTEINDRE : 44 px. — */
  .eveil{min-height:44px;padding-top:12px;padding-bottom:12px}
  .filtre button{min-height:44px}
  .mn-burger{min-width:44px;min-height:44px}
  .modal-close,.ov-x{width:44px;height:44px}

  /* le bandeau d'univers : lisible plutot que compact. S'il doit
     passer sur deux lignes, qu'il passe sur deux lignes. */
  .hero-page .badge{font-size:11px;letter-spacing:.12em;white-space:normal;
    text-align:center;line-height:1.45}
  /* .pn-corps garde le defilement lateral voulu par le socle :
     c'est un graphique, pas du texte. */

  /* LA BANNIERE D'UNIVERS SUR TELEPHONE — 25 px en nowrap avec un compte
     et un trait a cote, ca ne tient pas dans 335 px. On laisse respirer. */
  /* la pastille et le nom tiennent sur la meme ligne : une puce seule
     au-dessus d'un titre, ce n'est pas une banniere, c'est un accident.
     Le compte passe dessous. */
  .fam-univers{flex-wrap:wrap;gap:6px 12px;padding:15px 18px;align-items:center}
  .fam-univers .pt{order:1}
  .fam-univers h2{order:2;font-size:20px;white-space:normal;flex:1 1 0;min-width:0}
  .fam-univers .nb{order:3;flex:1 1 100%;margin-left:21px}
  .fam-univers .trait{display:none}

  /* LA CARTE SUR TELEPHONE — essai d'agrandissement annule le 1er sept.
     La carte est composee pour etre vue entiere : la couper ne la rend
     pas plus maniable, elle la rend illisible. Elle tient donc dans
     l'ecran, decorative, et c'est la liste au-dessous qui donne l'acces. */
}

/* le balai lumineux de la carte : il appartient au lieu, pas au Cabinet */
.cs-balai line,.cs-balai{stroke:var(--espace)}