:root{
  /* Brand book Clairvidence · version 1.0 · 29.07.2026
     Outfit pour la voix (200/300/500/600), Space Grotesk pour les repères (400/500/700). */
  --font-text:"Outfit",system-ui,sans-serif;
  --font-utility:"Space Grotesk",ui-monospace,monospace;

  /* Papiers, encres, filets */
  --color-paper:#F4F1EA;      /* fond par défaut */
  --color-paper-alt:#E9E3D7;  /* alternance de sections, cellules */
  --color-ink:#111820;        /* texte, filets, signe */
  --color-ink-rgb:17,24,32;   /* même encre, pour les alphas */
  --color-ink-soft:#5B6671;   /* texte secondaire, libellés */
  --color-rule:#CFC8BA;       /* filets fins */
  --color-field:#FFFFFF;      /* fond des champs formulaire */

  /* Bleu de relevé : liens, boutons, repères, focus. Ne touche jamais le signe. */
  --color-accent:#3E6575;
  --color-accent-ink:#F4F1EA;
  --color-accent-ink-rgb:244,241,234;
  --color-accent-light:#9CC3D1; /* accent sur fond sombre uniquement */

  /* Nuit : moments de bascule, favicon */
  --color-night:#0B1014;
  --color-night-alt:#141C23;

  /* Encres des bandes INVERSÉES — contrat, pas alias.
     Trois fonds de cette feuille basculent avec la tonalité : --color-night
     (le pied), --color-accent (la bande contact), --color-invert-bg. En
     tonalité sombre « la nuit devient le jour » : le fond passe au clair.
     Toute encre posée dessus DOIT donc basculer avec lui, sinon on obtient du
     clair sur clair — c'est ce qui rendait le pied illisible. Les variantes
     `-rgb` existent pour les alphas : rgba(var(--color-invert-ink-rgb),.14).
     Aucune valeur claire en dur sur ces bandes ; le banc le vérifie. */
  --color-invert-bg:var(--color-night);
  --color-invert-ink:var(--color-paper);
  --color-invert-ink-rgb:244,241,234;
  --color-invert-soft:#A3AEB8;

  --radius-sm:3px; --hair:1px; --thick:2px; --plinth:6px;
  --frame:1360px;
  --ease:cubic-bezier(.22,.61,.36,1);
}
[data-theme="dark"]{
  --color-paper:#0B1014;
  --color-paper-alt:#141C23;
  --color-ink:#F1EEE7;
  --color-ink-rgb:241,238,231;
  --color-ink-soft:#9AA5AF;
  --color-rule:#232C35;
  --color-accent:#9CC3D1;   /* obligatoire dès que le fond est sombre */
  --color-accent-ink:#0B1014;
  --color-accent-ink-rgb:11,16,20;
  --color-accent-light:#3E6575;
  --color-night:#F4F1EA;    /* la nuit devient le jour, pour les bascules */
  --color-night-alt:#E9E3D7;
  --color-invert-bg:var(--color-night);
  --color-invert-ink:#0B1014;
  --color-invert-ink-rgb:11,16,20;
  --color-invert-soft:#5B6671;
  --color-field:#070B0E;
}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    --color-paper:#0B1014;
    --color-paper-alt:#141C23;
    --color-ink:#F1EEE7;
    --color-ink-rgb:241,238,231;
    --color-ink-soft:#9AA5AF;
    --color-rule:#232C35;
    --color-accent:#9CC3D1;
    --color-accent-ink:#0B1014;
    --color-accent-ink-rgb:11,16,20;
    --color-accent-light:#3E6575;
    --color-night:#F4F1EA;
    --color-night-alt:#E9E3D7;
    --color-invert-bg:var(--color-night);
    --color-invert-ink:#0B1014;
    --color-invert-ink-rgb:11,16,20;
    --color-invert-soft:#5B6671;
    --color-field:#070B0E;
  }
}

*{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:76px}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{transition:none!important;animation:none!important}}
body{
  margin:0;background:var(--color-paper);color:var(--color-ink);
  font-family:var(--font-text);font-weight:300;font-size:15.5px;line-height:1.7;
  -webkit-font-smoothing:antialiased;
  overflow-x:clip;
}
main{overflow-x:clip}
h1,h2,h3{margin:0;font-weight:200;text-wrap:balance}
p{margin:0}
img{max-width:100%;display:block}

a{color:var(--color-accent);text-decoration:none;transition:color .2s var(--ease),background-color .2s var(--ease),border-color .2s var(--ease)}
a:hover{color:var(--color-ink)}
:where(a,button,summary,input,textarea):focus-visible{outline:var(--thick) solid var(--color-accent);outline-offset:3px}

.skip{position:absolute;left:-9999px;top:0;z-index:99}
.skip:focus{left:8px;top:8px;background:var(--color-ink);color:var(--color-paper);padding:10px 16px;font-family:var(--font-utility);font-size:12.5px}

/* ---------- cadre de relevé ---------- */
.band{padding:0 28px;display:flex;justify-content:center}
.band--sep{border-top:var(--thick) solid var(--color-ink)}
.frame{width:100%;max-width:var(--frame);border-left:var(--hair) solid var(--color-rule);border-right:var(--hair) solid var(--color-rule);padding:0 clamp(16px,3vw,44px)}

.util{font-family:var(--font-utility);font-size:11.5px;font-weight:500;letter-spacing:.18em;text-transform:uppercase;color:var(--color-ink-soft)}
.metarow{display:flex;flex-wrap:wrap;gap:12px 32px;justify-content:space-between}

/* ---------- bandeau + en-tête ---------- */
.flagbar{background:var(--color-ink);color:var(--color-paper);padding:8px 28px;display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap}
.flagbar span{font-family:var(--font-utility);font-size:11px;font-weight:500;letter-spacing:.18em;text-transform:uppercase}
.flagbar span+span{opacity:.72}

.head{position:sticky;top:0;z-index:40;background:var(--color-paper);border-bottom:var(--thick) solid var(--color-ink);padding:13px 28px;display:flex;flex-wrap:nowrap;gap:20px;align-items:center;justify-content:space-between}
.head nav.nav-main,.head .nav-end{align-items:center;gap:22px}

/* Menu principal · liens vers les sections, centré entre le signe et le CTA.
   Caché par défaut, révélé au-dessus de 900 px pour éviter tout débordement mobile. */
.nav-main{display:none;align-items:center;gap:28px;flex:1 1 auto;justify-content:center}
@media (min-width:901px){.nav-main{display:flex}.burger{display:none!important}.phone{display:inline-flex}}
.nav-main a{font-family:var(--font-utility);font-size:12.5px;font-weight:500;letter-spacing:.06em;text-transform:uppercase;color:var(--color-ink-soft);padding:6px 2px;border-bottom:var(--thick) solid transparent;transition:color .2s var(--ease),border-color .2s var(--ease)}
.nav-main a:hover,.nav-main a.on{color:var(--color-ink);border-bottom-color:var(--color-accent)}
.nav-end{display:flex;align-items:center;gap:22px;flex:0 0 auto}
.phone{font-family:var(--font-utility);font-size:13px;font-weight:500;letter-spacing:.02em;color:var(--color-ink)}
.phone:hover{color:var(--color-accent)}

/* Burger · visible sur mobile seulement, remplace le tel */
.burger{display:none;background:transparent;border:0;padding:0;width:44px;height:44px;cursor:pointer;flex-direction:column;align-items:center;justify-content:center;gap:5px;position:relative}
.burger span{display:block;width:22px;height:2px;background:var(--color-ink);transition:transform .25s var(--ease),opacity .25s var(--ease)}
.burger[aria-expanded="true"] span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.burger[aria-expanded="true"] span:nth-child(2){opacity:0}
.burger[aria-expanded="true"] span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
.burger:focus-visible{outline:var(--thick) solid var(--color-accent);outline-offset:3px;border-radius:4px}

/* Drawer mobile · plein écran, ouvert par le burger */
.nav-drawer{position:fixed;inset:0;z-index:35;background:var(--color-paper);padding:76px 24px 32px;display:flex;flex-direction:column;overflow-y:auto;-webkit-overflow-scrolling:touch}
.nav-drawer[hidden]{display:none}
.nav-drawer nav{display:flex;flex-direction:column;gap:0}
.nav-drawer a{padding:16px 4px;font-family:var(--font-text);font-size:22px;font-weight:200;letter-spacing:-0.02em;color:var(--color-ink);border-bottom:var(--hair) solid var(--color-rule);transition:color .2s var(--ease),padding-left .2s var(--ease)}
.nav-drawer a:hover{color:var(--color-accent);padding-left:8px}
.nav-drawer a.drawer-cta{margin-top:24px;background:var(--color-accent);color:var(--color-accent-ink);text-align:center;padding:18px 16px;border-radius:var(--radius-sm);border:0;font-family:var(--font-utility);font-size:14px;font-weight:700;letter-spacing:.06em;text-transform:uppercase}
.nav-drawer a.drawer-cta:hover{background:var(--color-ink);color:var(--color-paper);padding-left:16px}

/* Signe · brand book §1 : un C léger, un montant, un V retourné gras.
   Le signe est monochrome en toutes circonstances : la couleur ne lui est jamais appliquée. */
.sign{display:inline-flex;align-items:center;gap:10px;color:var(--color-ink);text-decoration:none;line-height:1}
.sign:hover{color:var(--color-ink)}
.mono{display:inline-flex;align-items:center;gap:5px;line-height:1;color:inherit}
.mono .c{font-family:var(--font-text);font-size:1em;font-weight:200}
.mono .bar{display:inline-block;width:var(--thick);height:.86em;background:currentColor}
.mono .v{font-family:var(--font-text);font-size:1em;font-weight:600;display:inline-block;transform:rotate(180deg)}
.wordmark{font-family:var(--font-text);font-size:22px;font-weight:200;letter-spacing:-0.014em;color:var(--color-ink)}
.wordmark .v{font-weight:600}
.head .mono{font-size:22px}

.btn{
  font-family:var(--font-utility);font-size:12.5px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;
  background:var(--color-accent);color:var(--color-accent-ink);padding:11px 20px;border:0;border-radius:var(--radius-sm);
  cursor:pointer;display:inline-block;
}
.btn:hover{background:var(--color-ink);color:var(--color-paper)}
.head .btn{background:transparent;color:var(--color-accent);border:var(--hair) solid var(--color-accent);padding:10px 18px;font-size:12px}
.head .btn:hover{background:var(--color-accent);color:var(--color-accent-ink)}
.btn--lg{font-size:14px;padding:17px 30px}
.ext{color:var(--color-accent);border-bottom:var(--hair) solid var(--color-accent)}
.ext:hover{color:var(--color-ink);border-color:var(--color-ink)}

/* ---------- hero ---------- */
.hero{padding-top:36px;padding-bottom:40px}
.hero .metarow{padding-bottom:12px}
.scale{position:relative;height:8px;border-left:var(--hair) solid var(--color-ink);border-right:var(--hair) solid var(--color-ink);background-image:repeating-linear-gradient(90deg,var(--color-rule) 0 var(--hair),transparent var(--hair) 13px);border-bottom:var(--hair) solid var(--color-rule);overflow:hidden}
.scale::after{content:"";position:absolute;top:0;bottom:0;width:2px;background:var(--color-accent);animation:sweep 9s var(--ease) infinite;left:0}
@keyframes sweep{0%,4%{left:0;opacity:0}6%{opacity:1}48%,52%{left:calc(100% - 2px);opacity:1}54%,100%{left:calc(100% - 2px);opacity:0}}
@media (prefers-reduced-motion:reduce){.scale::after{animation:none}}
.hero h1{margin-top:24px;font-size:clamp(44px,7.2vw,104px);line-height:.94;letter-spacing:-0.045em}
.hero h1 em{font-family:var(--font-utility);font-style:normal;font-weight:700;letter-spacing:-0.035em}
.hero-foot{margin-top:28px;display:flex;flex-wrap:wrap;gap:28px;align-items:flex-end;justify-content:space-between}
.signature{max-width:36ch;font-size:clamp(18px,1.9vw,23px);font-style:italic;line-height:1.35}
.lead{margin-top:20px;max-width:44ch;line-height:1.85;color:var(--color-ink-soft)}

/* ---------- pour qui ---------- */
.forwho{margin-top:26px;padding-top:16px;border-top:var(--hair) solid var(--color-rule);max-width:90ch;font-size:clamp(15px,1.35vw,18px);line-height:1.45;letter-spacing:-0.012em}
.forwho .util{display:block;margin-bottom:8px}

/* ---------- le renversement · bandeau pleine largeur, sans cadre ---------- */
.rev{
  position:relative;width:100%;
  border-top:var(--thick) solid var(--color-ink);border-bottom:var(--thick) solid var(--color-ink);
  background:var(--color-paper-alt);color:var(--color-ink);
  /* Hauteur fixée : accommode la paire la plus longue (« Le ton qui donne envie
     de rester, d'acheter ou de consommer ») sans variation entre paires. */
  height:clamp(440px,52vh,520px);
  padding:22px clamp(20px,5vw,90px) 24px;
  display:flex;flex-direction:column;
  transition:background-color 1s var(--ease),color 1s var(--ease);
  overflow:hidden;
}
.rev.side2{background:var(--color-invert-bg);color:var(--color-invert-ink)}

.rev-mark{position:absolute;top:0;left:0;width:50%;height:var(--thick);background:var(--color-accent);transition:left 1s var(--ease);pointer-events:none}
.rev.side2 .rev-mark{left:50%}

.rev-meta{display:flex;flex-wrap:wrap;gap:10px 32px;justify-content:space-between;font-family:var(--font-utility);font-size:11.5px;font-weight:500;letter-spacing:.18em;text-transform:uppercase;color:var(--color-ink-soft);transition:color 1s var(--ease)}
.rev.side2 .rev-meta{color:var(--color-invert-soft)}

.rev-stage{flex:1 1 auto;display:flex;align-items:center;justify-content:flex-start;padding:clamp(24px,4vw,52px) 0}
.rev.side2 .rev-stage{justify-content:flex-end}

.rev-say{max-width:min(92%,980px);display:flex;flex-direction:column;gap:16px;transition:opacity .85s var(--ease)}
.rev.side2 .rev-say{text-align:right;align-items:flex-end}
.rev-say.out{opacity:0}

.rev-lab{font-family:var(--font-utility);font-size:11.5px;font-weight:700;letter-spacing:.2em;text-transform:uppercase;color:var(--color-ink-soft);transition:color 1s var(--ease)}
.rev.side2 .rev-lab{color:var(--color-accent)}
[data-theme="dark"] .rev.side2 .rev-lab{color:#2C4A63}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .rev.side2 .rev-lab{color:#2C4A63}}

.rev-word{margin:0;max-width:13ch;font-weight:200;font-size:clamp(28px,5vw,68px);line-height:1.02;letter-spacing:-0.038em;text-wrap:balance}
.rev.side2 .rev-word{margin-left:auto}

/* Ticks · barres cliquables pour sauter à une paire */
.rev-ticks{display:flex;align-items:center;gap:8px}
.rev-ticks button{flex:1 1 auto;height:16px;padding:0;background:transparent;border:0;cursor:pointer;position:relative;-webkit-appearance:none;appearance:none}
.rev-ticks button::before{content:"";position:absolute;left:0;right:0;top:50%;transform:translateY(-50%);height:var(--thick);background:var(--color-rule);transition:background-color .4s var(--ease),height .2s var(--ease)}
.rev-ticks button:hover::before{height:4px;background:var(--color-ink-soft)}
.rev-ticks button.on::before{background:var(--color-accent);height:3px}
.rev.side2 .rev-ticks button::before{background:rgba(255,255,255,.22)}
.rev.side2 .rev-ticks button:hover::before{background:rgba(255,255,255,.5)}
.rev.side2 .rev-ticks button.on::before{background:var(--color-accent-light)}
.rev-ticks button:focus-visible{outline:var(--thick) solid var(--color-accent);outline-offset:4px;border-radius:2px}

/* Ligne de contrôles en bas du bandeau : ticks + prev/next côte à côte */
.rev-controls{display:flex;align-items:center;gap:16px}
.rev-controls .rev-ticks{flex:1 1 auto;min-width:0}
.rev-nav{display:flex;gap:4px;flex:0 0 auto}
.rev-nav button{width:44px;height:44px;padding:0;background:transparent;border:var(--hair) solid var(--color-rule);color:var(--color-ink-soft);cursor:pointer;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;font-family:var(--font-utility);font-size:18px;font-weight:400;transition:all .2s var(--ease);line-height:1}
.rev-nav button:hover{border-color:var(--color-ink);color:var(--color-ink)}
.rev.side2 .rev-nav button{border-color:rgba(var(--color-invert-ink-rgb),.24);color:rgba(var(--color-invert-ink-rgb),.72)}
.rev.side2 .rev-nav button:hover{border-color:var(--color-paper);color:var(--color-paper)}
.rev-nav button:focus-visible{outline:var(--thick) solid var(--color-accent);outline-offset:3px}

/* ---------- colonne + plan ---------- */
.split{display:flex;flex-wrap:wrap;align-items:flex-start}
.plan{flex:0 0 33%;position:sticky;top:76px;align-self:flex-start;padding:32px clamp(20px,3vw,40px) 40px 0;border-right:var(--hair) solid var(--color-rule);min-width:0}
.plan-head{display:flex;justify-content:space-between;align-items:baseline;gap:16px}
.plan-grid{margin-top:18px;display:grid;grid-template-columns:repeat(4,1fr);grid-template-rows:repeat(5,minmax(58px,1fr));gap:6px;border:var(--thick) solid var(--color-ink);padding:6px;background:var(--color-paper-alt)}
.zone{grid-area:var(--area,auto);border:var(--hair) solid var(--color-ink);background:transparent;color:var(--color-ink);padding:9px 10px;min-height:44px;display:flex;flex-direction:column;justify-content:space-between;gap:6px;cursor:pointer;text-align:left;font:inherit;transition:background-color .25s var(--ease),color .25s var(--ease)}
.zone b{font-family:var(--font-utility);font-size:11.5px;font-weight:700;letter-spacing:.12em}
.zone span{font-family:var(--font-utility);font-size:12.5px;font-weight:500;line-height:1.25}
.zone.on{background:var(--color-accent);color:var(--color-accent-ink)}
.plan-cta{margin-top:22px;padding-top:16px;border-top:var(--hair) solid var(--color-rule);display:flex;flex-wrap:wrap;gap:14px;align-items:center}
.plan-cta .btn{background:var(--color-ink);color:var(--color-paper)}
.plan-cta .btn:hover{background:var(--color-accent);color:var(--color-accent-ink)}

.col{flex:1 1 0;min-width:0;padding-left:clamp(20px,3vw,36px)}
.col section{padding:44px 0 48px;border-bottom:var(--hair) solid var(--color-rule)}
.col section:first-child{padding-top:40px}
.col section:last-child{border-bottom:0}
.col h2{margin-top:18px;max-width:20ch;font-size:clamp(30px,4.4vw,58px);line-height:.98;letter-spacing:-0.038em}
.col h2.sm{font-size:clamp(28px,4vw,52px);line-height:1;letter-spacing:-0.036em}
.col p.body{margin-top:20px;max-width:60ch;line-height:1.9;color:var(--color-ink-soft);text-align:justify;hyphens:auto;-webkit-hyphens:auto}
.col p.body.short{text-align:left}
.col p.it{margin:18px 0 28px;max-width:56ch;font-size:16px;font-style:italic;line-height:1.6;color:var(--color-ink-soft)}
.col p.fine{margin-top:14px;max-width:72ch;font-family:var(--font-utility);font-size:11.5px;line-height:1.75;color:var(--color-ink-soft)}

/* ---------- la scène : une figure par section, à gauche ---------- */
.stage{position:relative;min-height:400px}
.fig{position:absolute;inset:0;display:flex;flex-direction:column;justify-content:center;gap:14px;opacity:0;visibility:hidden;transition:opacity .5s var(--ease);pointer-events:none}
.fig.on{opacity:1;visibility:visible;pointer-events:auto}
/* Sur une page de section, il n'y a qu'UNE figure et aucun défilement pour
   l'activer : le script n'allume que celle de la section courante, et sans
   scroll aucune ne s'allume jamais. Elle serait restée invisible, la colonne
   de gauche vide — c'est ce qu'on voyait au premier rendu de /principe. */
.clairvidence-section .fig{opacity:1;visibility:visible;pointer-events:auto}
.fig-cap{font-family:var(--font-utility);font-size:11.5px;font-weight:500;letter-spacing:.18em;text-transform:uppercase;color:var(--color-ink-soft)}

/* 1 · le principe : des strates qui se densifient jusqu'à masquer */
.strata{display:flex;flex-direction:column;gap:6px;height:240px}
.strata i{flex:1 1 0;border:var(--hair) solid var(--color-rule);display:block}
/* Trames volontairement discrètes : le trait est au filet, pas à l'encre, et le
   pas ne descend pas sous 8px. En dessous, deux traits noirs de 1px qui se
   croisent à 45° papillotent — c'est ce qui piquait les yeux sur la strate active. */
.strata i:nth-child(1){background-image:repeating-linear-gradient(45deg,var(--color-rule) 0 1px,transparent 1px 20px)}
.strata i:nth-child(2){background-image:repeating-linear-gradient(45deg,var(--color-rule) 0 1px,transparent 1px 15px)}
.strata i:nth-child(3){background-image:repeating-linear-gradient(45deg,var(--color-rule) 0 1px,transparent 1px 11px)}
.strata i:nth-child(4){background-image:repeating-linear-gradient(45deg,var(--color-rule) 0 1px,transparent 1px 8px)}
.strata i:nth-child(5){background:var(--color-rule)}
.strata-foot{font-family:var(--font-utility);font-size:11px;color:var(--color-ink-soft)}

/* 3 · le déroulé : chevrons et barres de longueurs différentes */
/* 3 · déroulé colonne · timeline verticale sobre, un trait qui descend et se termine sur le CTA */
.flow{display:flex;flex-direction:column;gap:0;position:relative;padding-left:0}
.flow-step{position:relative;padding:14px 0 14px 40px;display:flex;flex-direction:column;gap:6px}
.flow-step::before{content:"";position:absolute;left:9px;top:0;bottom:0;width:var(--hair);background:var(--color-rule)}
.flow-step:first-child::before{top:22px}
.flow-step:last-child::before{bottom:auto;height:22px}
.flow-step::after{content:"";position:absolute;left:5px;top:22px;width:9px;height:9px;border-radius:50%;background:var(--color-accent);border:2px solid var(--color-paper)}
.flow-num{position:absolute;left:22px;top:14px;font-family:var(--font-utility);font-size:11.5px;font-weight:700;letter-spacing:.14em;color:var(--color-accent)}
.flow-t{margin-left:20px;font-family:var(--font-text);font-size:15px;font-weight:400;letter-spacing:-0.01em;color:var(--color-ink)}
.flow-d{margin-left:20px;font-family:var(--font-utility);font-size:11px;color:var(--color-ink-soft);letter-spacing:.02em}
.flow-chev{display:none}

/* 4 · le rapport : des constats classés par priorité */
.report{border:var(--thick) solid var(--color-ink);background:var(--color-paper-alt);padding:18px}
.report i{display:block;height:9px;background:var(--color-rule);margin-bottom:9px}
.report i.hi{background:var(--color-accent)}
.report i:nth-child(1){width:100%}.report i:nth-child(2){width:86%}.report i:nth-child(3){width:72%}
.report i:nth-child(4){width:58%}.report i:nth-child(5){width:44%}.report i:nth-child(6){width:30%}
.report-foot{margin-top:14px;padding-top:12px;border-top:var(--hair) solid var(--color-rule);font-family:var(--font-utility);font-size:11px;color:var(--color-ink-soft)}

/* 5 · les établissements : une palette d'icônes */
/* 5 · Établissements · palette d'icônes homogènes, inversion au survol */
.icons{margin-top:28px;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:0;border:var(--hair) solid var(--color-ink);background:var(--color-paper)}
.icons figure{margin:0;min-width:0;min-height:126px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;padding:14px 6px;position:relative;transition:background-color .35s var(--ease),color .35s var(--ease);color:var(--color-ink-soft);overflow:hidden}
.icons figure::after{content:"";position:absolute;inset:0;border-right:var(--hair) solid var(--color-rule);border-bottom:var(--hair) solid var(--color-rule);pointer-events:none;transition:opacity .35s var(--ease)}
.icons figure:nth-child(5n)::after{border-right:0}
.icons figure:nth-last-child(-n+5)::after{border-bottom:0}
.icons figure.on,.icons figure:hover{background:var(--color-ink);color:var(--color-paper)}
.icons figure.on::after,.icons figure:hover::after{opacity:0}
.icons svg{width:34px;height:34px;flex:0 0 34px;stroke:currentColor;stroke-width:1.5;fill:none;stroke-linecap:round;stroke-linejoin:round;color:var(--color-ink);transition:color .35s var(--ease)}
.icons figure.on svg,.icons figure:hover svg{color:var(--color-paper)}
/* La cellule ne fait que 52px de large : on gagne en corps ce qu'on rend en
   interlettrage, sinon les légendes se coupent davantage qu'elles ne le font. */
.icons figcaption{font-family:var(--font-utility);font-size:10.5px;letter-spacing:.04em;text-transform:uppercase;text-align:center;line-height:1.25;color:inherit;overflow-wrap:anywhere;max-width:100%;hyphens:auto;-webkit-hyphens:auto}
@media (max-width:560px){
  .icons{grid-template-columns:repeat(3,minmax(0,1fr))}
  .icons figure{min-height:104px}
  /* Reset des règles desktop et application des bordures pour 3 col */
  .icons figure:nth-child(5n)::after{border-right:var(--hair) solid var(--color-rule)}
  .icons figure:nth-child(3n)::after{border-right:0}
  .icons figure:nth-last-child(-n+5)::after{border-bottom:var(--hair) solid var(--color-rule)}
  .icons figure:nth-last-child(-n+3)::after{border-bottom:0}
}

/* Ancres sous en-tête sticky : évite que le titre passe sous le header */
:target,section[id]{scroll-margin-top:80px}
@media (max-width:900px){:target,section[id]{scroll-margin-top:64px}}

/* 6 · l'offre : ce qui est dans le périmètre, ce qui est dehors */
/* 6 · Périmètre · cadre technique avec repères de coin, dehors en hachures */
.perim{position:relative;margin-top:14px;display:flex;flex-direction:column;gap:6px}
.perim-in{position:relative;border:var(--thick) solid var(--color-ink);background:var(--color-paper-alt);padding:22px 20px 20px;display:flex;flex-direction:column;gap:10px}
.perim-in::before,.perim-in::after{content:"";position:absolute;width:11px;height:11px;background:var(--color-paper-alt);border:var(--thick) solid var(--color-accent)}
.perim-in::before{top:-6px;left:-6px}
.perim-in::after{bottom:-6px;right:-6px}
.perim-out{position:relative;padding:18px 20px 16px;background-image:repeating-linear-gradient(-45deg,transparent 0 6px,var(--color-rule) 6px 7px);display:flex;flex-direction:column;gap:10px}
.perim span{font-size:14.5px;line-height:1.5;color:var(--color-ink)}
.perim-out span{color:var(--color-ink-soft)}
.perim-lab{font-family:var(--font-utility);font-size:11.5px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--color-accent);margin-bottom:2px;background:var(--color-paper-alt);align-self:flex-start;padding:2px 6px}
.perim-out .perim-lab{color:var(--color-ink);background:var(--color-paper)}

/* 7 · l'expert */
.portrait{border:var(--hair) solid var(--color-ink);width:100%;max-width:260px;aspect-ratio:4/5;object-fit:cover;object-position:50% 30%;margin-top:32px}

/* 8 · l'écosystème : à distance, sur site */
.eco{display:flex;flex-direction:column;gap:10px}
.eco div{border:var(--hair) solid var(--color-rule);padding:16px 18px;font-family:var(--font-utility);font-size:13px;line-height:1.5}
.eco div.here{border:var(--thick) solid var(--color-ink);background:var(--color-paper-alt);font-weight:700}

/* 9 · la FAQ */
.qmark{font-size:170px;font-weight:200;line-height:.8;letter-spacing:-0.04em;color:var(--color-accent)}

@media (max-width:900px){
  .stage{display:none}
  .fig{position:static;opacity:1;visibility:visible;pointer-events:auto;margin:0 0 28px}
  .fig.inline{display:flex}
  .layers{height:170px}
}

/* ---------- listes ---------- */
.frictions{margin-top:28px;display:flex;flex-direction:column}
.friction{border-top:var(--hair) solid var(--color-rule);padding:13px 12px;display:flex;gap:16px;align-items:baseline;transition:background-color .25s var(--ease)}
.friction:last-child{border-bottom:var(--hair) solid var(--color-rule)}
.friction b{font-family:var(--font-utility);font-size:11.5px;font-weight:700;letter-spacing:.1em;color:var(--color-accent);flex:0 0 22px}
.friction.on{background:var(--color-paper-alt)}

/* 3 · déroulé section principale · trois colonnes, séparateurs verticaux seulement */
.steps{margin-top:32px;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0;border-top:var(--thick) solid var(--color-ink)}
.steps>div{padding:24px 24px 8px 0;display:flex;flex-direction:column;gap:14px}
.steps>div+div{padding-left:24px;border-left:var(--hair) solid var(--color-rule)}
.steps b{font-family:var(--font-utility);font-size:12px;font-weight:700;letter-spacing:.22em;color:var(--color-accent);display:inline-block}
.steps h3{margin:0;font-size:22px;font-weight:300;letter-spacing:-0.024em;line-height:1.1;color:var(--color-ink);max-width:16ch;text-wrap:balance}
.steps p{margin:0;font-size:14.5px;line-height:1.7;color:var(--color-ink-soft);max-width:34ch}

/* 4 · Ce que vous obtenez · liste éditoriale avec marqueur numéroté */
.cells{margin-top:28px;display:flex;flex-direction:column;gap:0;border-top:var(--thick) solid var(--color-ink);counter-reset:cell}
.cells>div{display:block;padding:22px 4px 22px 80px;border-bottom:var(--hair) solid var(--color-rule);font-size:17px;line-height:1.5;color:var(--color-ink);position:relative}
.cells>div:last-child{border-bottom:0}
.cells>div::before{counter-increment:cell;content:counter(cell,decimal-leading-zero);position:absolute;left:0;top:22px;width:60px;font-family:var(--font-utility);font-size:12px;font-weight:700;letter-spacing:.18em;color:var(--color-accent)}
.cells>div::after{content:"";position:absolute;left:14px;top:50%;width:26px;height:var(--hair);background:var(--color-accent);transform:translateY(-50%);opacity:0;transition:opacity .3s var(--ease),transform .3s var(--ease)}
.cells>div:hover::after{opacity:1;transform:translate(4px,-50%)}


/* 6 · Offre section principale · deux colonnes typées, différenciation par le trait */
.scope{margin-top:28px;display:grid;grid-template-columns:1fr 1fr;gap:0;border-top:var(--thick) solid var(--color-ink)}
.scope>div{padding:22px 24px;position:relative}
.scope>div+div{border-left:var(--hair) solid var(--color-rule)}
.scope .util{display:block;margin-bottom:18px;font-family:var(--font-utility);font-size:11px;font-weight:700;letter-spacing:.18em;text-transform:uppercase}
.scope>div:first-child .util{color:var(--color-accent)}
.scope>div:last-child .util{color:var(--color-ink-soft)}
.scope ul{margin:0;padding:0;list-style:none;display:flex;flex-direction:column;gap:12px}
.scope li{padding-left:22px;position:relative;font-size:15px;line-height:1.5}
.scope>div:first-child li{color:var(--color-ink)}
.scope>div:first-child li::before{content:"";position:absolute;left:0;top:.62em;width:12px;height:var(--thick);background:var(--color-accent)}
.scope>div:last-child li{color:var(--color-ink-soft)}
.scope>div:last-child li::before{content:"";position:absolute;left:0;top:.62em;width:12px;height:var(--hair);background:var(--color-ink-soft)}

.expert{margin-top:24px;display:flex;flex-wrap:wrap;gap:24px;align-items:flex-start}
.expert img{flex:0 0 auto;width:112px;height:140px;object-fit:cover;object-position:50% 32%;border:var(--hair) solid var(--color-ink)}
.expert div{flex:1 1 300px;max-width:56ch;min-width:0}
.expert p{text-align:justify;hyphens:auto;-webkit-hyphens:auto}
.expert p+p{margin-top:16px;color:var(--color-ink-soft)}

details{border-top:var(--hair) solid var(--color-rule);padding:16px 0}
details summary{display:flex;justify-content:space-between;gap:20px;align-items:baseline;list-style:none;cursor:pointer}
details summary::-webkit-details-marker{display:none}
details summary span{font-family:var(--font-utility);font-size:16px;font-weight:500;letter-spacing:-0.008em;max-width:44ch}
details summary i{font-family:var(--font-utility);font-size:14px;font-weight:700;font-style:normal;color:var(--color-accent);flex:0 0 auto}
details[open] summary i{transform:rotate(45deg)}
details p{margin-top:12px;max-width:60ch;font-size:15px;line-height:1.85;color:var(--color-ink-soft)}

/* ---------- contact ---------- */
.contact{background:var(--color-accent);color:var(--color-accent-ink);border-top:var(--thick) solid var(--color-ink);padding:72px 28px 88px;display:flex;justify-content:center}
.contact .frame{border-color:rgba(var(--color-accent-ink-rgb),.24)}
.contact .btn{background:var(--color-accent-ink);color:var(--color-accent)}
.contact .btn:hover{background:var(--color-ink);color:var(--color-paper)}
.contact form .btn{width:auto;min-width:min(240px,50%)}
.contact h2{max-width:18ch;font-size:clamp(30px,4.6vw,62px);line-height:.98;letter-spacing:-0.04em}
.contact .util{color:rgba(var(--color-accent-ink-rgb),.9)}
.contact-grid{margin-top:36px;display:flex;flex-wrap:wrap;gap:44px;align-items:flex-start}
form{flex:0 1 50%;min-width:min(100%,320px);max-width:520px;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
.f{display:flex;flex-direction:column;gap:6px}
.f.full{grid-column:1/-1}
label{font-family:var(--font-utility);font-size:11.5px;font-weight:500;letter-spacing:.14em;text-transform:uppercase;color:var(--color-accent-ink);display:inline-flex;align-items:center;gap:3px}
label .req{color:var(--color-accent-ink);font-weight:700;font-size:13px;line-height:1}
label .sr{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
input,textarea{font-family:inherit;font-size:15.5px;font-weight:300;color:var(--color-ink);background:var(--color-field);border:var(--hair) solid transparent;border-radius:var(--radius-sm);padding:12px 14px;width:100%}
input::placeholder,textarea::placeholder{color:rgba(var(--color-ink-rgb),.4);font-weight:300;font-style:italic}
textarea{min-height:130px;resize:vertical}
input:focus,textarea:focus{outline:none;border-color:var(--color-accent)}
.aside{flex:1 1 240px;min-width:0;display:flex;flex-direction:column;gap:22px}
@media (max-width:720px){
  form{flex-basis:100%;max-width:100%}
  .aside{flex-basis:100%}
  .contact-grid{gap:32px}
  .aside dd{overflow-wrap:anywhere}
}
.aside dt{font-family:var(--font-utility);font-size:11.5px;font-weight:500;letter-spacing:.14em;text-transform:uppercase;color:var(--color-accent-ink);opacity:.92}
.aside dd{margin:6px 0 0;font-size:16px}
.aside dd a{color:var(--color-accent-ink);border-bottom:var(--hair) solid rgba(var(--color-accent-ink-rgb),.86)}

/* ---------- pied ---------- */
/* ---------- pied · une seule bande, tout se déplie sur place ---------- */
.foot{background:var(--color-night);color:var(--color-invert-ink);padding:56px 28px 32px;display:flex;justify-content:center}
.foot .frame{width:100%;max-width:var(--frame);border:0;padding:0}
.foot .wordmark,.foot .sign,.foot .mono{color:var(--color-invert-ink)}
.foot .sign{gap:12px}
.foot .mono{font-size:24px}

/* haut : signe + tagline à gauche, canaux à droite */
.foot-top{display:grid;grid-template-columns:1.15fr 1fr 1fr;gap:40px;align-items:flex-start;padding-bottom:36px;border-bottom:var(--hair) solid rgba(var(--color-invert-ink-rgb),.14)}
.foot .tagline{margin-top:14px;font-family:var(--font-text);font-size:16px;font-style:italic;font-weight:200;letter-spacing:-0.006em;color:rgba(var(--color-invert-ink-rgb),.92);max-width:36ch}
.foot .slogan{margin-top:10px;font-family:var(--font-utility);font-size:11px;font-weight:500;letter-spacing:.18em;text-transform:uppercase;color:var(--color-accent-light);max-width:46ch}
.foot-reach{display:flex;flex-direction:column;gap:12px}
.foot-contact{justify-self:center;align-items:center;text-align:center}
.foot-partner{justify-self:end}
.foot-reach a{font-family:var(--font-utility);font-size:13px;color:var(--color-invert-ink);letter-spacing:.02em;padding-bottom:3px;border-bottom:var(--hair) solid rgba(var(--color-invert-ink-rgb),.24)}
.foot-reach a:hover{border-bottom-color:var(--color-invert-ink)}
/* Bloc partenaire méthodologique · en haut à droite du footer */
.foot-partner{display:flex;flex-direction:column;align-items:flex-end;gap:8px;padding-bottom:18px;margin-bottom:6px;border-bottom:var(--hair) solid rgba(var(--color-invert-ink-rgb),.14)}
.foot-partner-label{font-family:var(--font-utility);font-size:10.5px;font-weight:500;letter-spacing:.16em;text-transform:uppercase;color:rgba(var(--color-invert-ink-rgb),.62)}
.foot-partner a{border-bottom:0;padding:0;display:inline-block}
.foot-partner a:hover{border-bottom:0}
.foot-partner img{display:block;height:22px;width:auto;filter:invert(1) brightness(1.05);opacity:.9;transition:opacity .2s var(--ease)}
.foot-partner a:hover img{opacity:1}

/* accordéon légal */
.legal{padding:36px 0 8px}
.legal-head{font-family:var(--font-utility);font-size:11px;font-weight:500;letter-spacing:.22em;text-transform:uppercase;color:rgba(var(--color-invert-ink-rgb),.86);margin:0 0 14px}
.legal-head span{color:var(--color-accent-light);margin-right:6px}
.legal-block{border-top:var(--hair) solid rgba(var(--color-invert-ink-rgb),.14);padding:0;margin:0}
.legal-block:last-of-type{border-bottom:var(--hair) solid rgba(var(--color-invert-ink-rgb),.14)}
.legal-block summary{display:flex;align-items:center;justify-content:space-between;gap:24px;padding:18px 4px;cursor:pointer;list-style:none;font-family:var(--font-text);font-size:19px;font-weight:400;letter-spacing:-0.014em;color:var(--color-invert-ink);transition:color .2s var(--ease)}
.legal-block summary::-webkit-details-marker{display:none}
.legal-block summary:hover{color:var(--color-accent-light)}
.legal-block summary i{font-family:var(--font-utility);font-size:20px;font-weight:500;font-style:normal;color:var(--color-accent-light);transition:transform .3s var(--ease)}
.legal-block[open] summary i{transform:rotate(90deg)}
.legal-body{padding:4px 0 28px;max-width:92ch;font-size:14.5px;line-height:1.75;color:rgba(var(--color-invert-ink-rgb),.92)}
.legal-body p{margin:0 0 14px;color:rgba(var(--color-invert-ink-rgb),.92)}
.legal-body p strong{font-weight:500;color:var(--color-invert-ink)}
.legal-body a{color:var(--color-accent-light);border-bottom:var(--hair) solid rgba(156,189,214,.4)}
.legal-body a:hover{border-bottom-color:var(--color-accent-light)}
.legal-updated{font-family:var(--font-utility);font-size:11.5px;color:rgba(var(--color-invert-ink-rgb),.86);letter-spacing:.02em;padding-bottom:6px;border-bottom:var(--hair) solid rgba(var(--color-invert-ink-rgb),.1);margin-bottom:16px!important}
.legal-list{margin:0 0 14px;padding-left:18px}
.legal-list li{margin-bottom:8px}

/* barre du bas : préférences cookies + copyright */
.foot-bar{margin-top:28px;padding-top:20px;border-top:var(--hair) solid rgba(var(--color-invert-ink-rgb),.14);display:flex;flex-wrap:wrap;gap:14px 28px;align-items:center;justify-content:space-between;font-family:var(--font-utility);font-size:11.5px;color:rgba(var(--color-invert-ink-rgb),.9);letter-spacing:.02em}
.foot-bar p{margin:0}
.foot-bar a{color:var(--color-invert-ink);border-bottom:var(--hair) solid rgba(var(--color-invert-ink-rgb),.32)}
.foot-bar a:hover{border-bottom-color:var(--color-invert-ink)}
.cookies-btn{background:none;border:0;padding:0;font:inherit;color:rgba(var(--color-invert-ink-rgb),.9);cursor:pointer;letter-spacing:.02em;text-decoration:underline;text-underline-offset:4px;text-decoration-color:rgba(var(--color-invert-ink-rgb),.28);text-decoration-thickness:1px;transition:color .2s var(--ease),text-decoration-color .2s var(--ease)}
.cookies-btn:hover{color:var(--color-invert-ink);text-decoration-color:var(--color-invert-ink)}

/* ---------- Cookies · bandeau + modale, brand book Clairvidence ---------- */
.cookie-bar{position:fixed;bottom:16px;left:16px;right:16px;z-index:100;background:var(--color-night);color:var(--color-invert-ink);border:var(--hair) solid rgba(var(--color-invert-ink-rgb),.14);border-radius:var(--radius-sm);padding:20px 24px;display:flex;flex-wrap:wrap;gap:18px;align-items:center;justify-content:space-between;box-shadow:0 20px 60px -20px rgba(0,0,0,.5);max-width:1200px;margin:0 auto}
.cookie-bar[hidden]{display:none}
.cookie-bar-icon{flex:0 0 auto;font-family:var(--font-text);font-size:14px;font-weight:400;color:var(--color-accent-light);border:var(--hair) solid rgba(156,189,214,.5);border-radius:50%;width:30px;height:30px;display:inline-flex;align-items:center;justify-content:center}
.cookie-bar p{flex:1 1 380px;margin:0;font-size:13.5px;line-height:1.6;color:rgba(var(--color-invert-ink-rgb),.9)}
.cookie-bar p a{color:var(--color-accent-light);border-bottom:var(--hair) solid rgba(156,189,214,.5);cursor:pointer}
.cookie-bar-actions{flex:0 0 auto;display:flex;gap:10px;flex-wrap:wrap}
.cookie-btn{font-family:var(--font-utility);font-size:12px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;padding:14px 20px;border:var(--hair) solid var(--color-accent-light);border-radius:999px;background:transparent;color:var(--color-accent-light);cursor:pointer;transition:all .2s var(--ease);min-height:44px}
.cookie-btn:hover{background:var(--color-accent-light);color:var(--color-night)}
.cookie-btn.primary{background:var(--color-accent-light);color:var(--color-night)}
.cookie-btn.primary:hover{background:var(--color-invert-ink);border-color:var(--color-invert-ink)}

.cookie-modal{position:fixed;inset:0;z-index:200;background:rgba(11,16,20,.78);display:flex;align-items:center;justify-content:center;padding:20px;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px)}
.cookie-modal[hidden]{display:none}
.cookie-modal-inner{background:var(--color-night);color:var(--color-invert-ink);border:var(--hair) solid rgba(var(--color-invert-ink-rgb),.16);border-radius:var(--radius-sm);padding:32px 30px 26px;max-width:460px;width:100%;position:relative}
.cookie-modal-close{position:absolute;top:12px;right:14px;background:transparent;border:0;color:rgba(var(--color-invert-ink-rgb),.6);font-size:24px;cursor:pointer;padding:6px 10px;line-height:1;border-radius:4px}
.cookie-modal-close:hover{color:var(--color-invert-ink);background:rgba(var(--color-invert-ink-rgb),.08)}
.cookie-modal-head{font-family:var(--font-utility);font-size:11px;font-weight:500;letter-spacing:.22em;text-transform:uppercase;color:var(--color-accent-light);margin:0 0 6px}
.cookie-modal-head span{color:rgba(var(--color-invert-ink-rgb),.5);margin-right:4px}
.cookie-modal h3{margin:0 0 14px;font-family:var(--font-text);font-size:22px;font-weight:400;letter-spacing:-0.014em;color:var(--color-invert-ink)}
.cookie-modal-desc{font-size:13.5px;line-height:1.6;color:rgba(var(--color-invert-ink-rgb),.82);margin:0 0 4px}
.cookie-modal-desc a{color:var(--color-accent-light);border-bottom:var(--hair) solid rgba(156,189,214,.4)}
.cookie-cat{padding:18px 0;border-top:var(--hair) solid rgba(var(--color-invert-ink-rgb),.14);display:grid;grid-template-columns:1fr auto;gap:6px 20px;align-items:center}
.cookie-cat:first-of-type{margin-top:16px}
.cookie-cat:last-of-type{border-bottom:var(--hair) solid rgba(var(--color-invert-ink-rgb),.14);margin-bottom:22px}
.cookie-cat h4{margin:0;font-family:var(--font-text);font-size:15px;font-weight:500;color:var(--color-invert-ink);grid-column:1;grid-row:1}
.cookie-cat p{margin:0;font-size:12.5px;line-height:1.5;color:rgba(var(--color-invert-ink-rgb),.76);grid-column:1;grid-row:2}
.cookie-toggle{grid-column:2;grid-row:1/3;width:44px;height:24px;background:rgba(var(--color-invert-ink-rgb),.18);border-radius:999px;position:relative;cursor:pointer;border:0;padding:0;transition:background .2s var(--ease)}
.cookie-toggle[data-on="true"]{background:var(--color-accent-light)}
.cookie-toggle[data-locked="true"]{opacity:.55;cursor:not-allowed}
.cookie-toggle::before{content:"";position:absolute;top:2px;left:2px;width:20px;height:20px;background:var(--color-invert-ink);border-radius:50%;transition:transform .2s var(--ease)}
.cookie-toggle[data-on="true"]::before{transform:translateX(20px);background:var(--color-night)}
.cookie-modal-actions{display:flex;gap:10px;justify-content:flex-end;flex-wrap:wrap}

@media (max-width:560px){
  .cookie-bar{padding:16px;flex-direction:column;align-items:stretch}
  .cookie-bar-actions{justify-content:stretch}
  .cookie-bar-actions .cookie-btn{flex:1}
  .cookie-modal-inner{padding:26px 22px 22px}
}

@media (max-width:900px){
  .foot-top{grid-template-columns:1fr;gap:28px}
  .foot-reach{justify-self:start}
  .legal-block summary{font-size:17px}
}

/* ---------- adaptatif ---------- */
@media (max-width:900px){
  .plan{position:static;flex:1 1 100%;border-right:0;border-bottom:var(--hair) solid var(--color-rule);padding:28px 0 32px}
  .col{flex:1 1 100%;padding-left:0}
  html{scroll-padding-top:64px}
}
/* Sous 900 px : le menu principal disparaît, le burger apparaît */
@media (max-width:900px){
  .nav-main{display:none}
  .burger{display:inline-flex}
  .phone{display:none}
}
@media (max-width:560px){
  .band,.flagbar,.head,.contact,.foot{padding-left:16px;padding-right:16px}
  .rev-out{align-items:flex-start;text-align:left}
  form{grid-template-columns:1fr}
  /* La grille 2×5 mobile a été retirée : le plan garde son asymétrie desktop
     (voir le bloc « ajustements mobile » en fin de feuille). */
  /* En-tête mobile compact : monogramme + wordmark + burger + CTA sur une ligne */
  .head{padding:8px 16px;gap:10px;flex-wrap:nowrap}
  /* wordmark visible aussi en mobile, avec taille réduite */
  .head .wordmark{font-size:17px}
  .nav-end{gap:8px}
  .head .btn{padding:8px 14px;font-size:11px}
  .head .mono{font-size:20px}
}
/* En-dessous de 380 px (iPhone SE 1re gen, écrans compressés) : masque le
   monogramme abstrait, garde le wordmark « Clairvidence » qui identifie la
   marque directement (le monogramme seul ne dit rien au visiteur). */
@media (max-width:380px){
  .head .mono{display:none}
  .nav-drawer{padding:64px 20px 28px}
  .nav-drawer a{font-size:20px;padding:14px 4px}
  /* Bandeau cookies mobile : compact, texte réduit, boutons en ligne */
  .cookie-bar{padding:12px 14px 14px;gap:10px;flex-direction:row;align-items:flex-start;flex-wrap:wrap;bottom:8px;left:8px;right:8px}
  .cookie-bar-icon{display:none}
  .cookie-bar p{flex:1 1 100%;font-size:12.5px;line-height:1.5}
  .cookie-bar-actions{flex:1 1 100%;gap:8px}
  .cookie-bar-actions .cookie-btn{flex:1;padding:10px 12px;font-size:11px;letter-spacing:.04em;min-height:40px}
}
/* Cibles tactiles ≥ 44px sur mobile · WCAG 2.5.5 */
@media (hover:none),(max-width:900px){
  .foot-reach a,.cookies-btn,
  .aside dd a,
  .btn{min-height:44px;display:inline-flex;align-items:center}
  .btn--lg{min-height:48px}
}

/* ==========================================================================
   PROGRESSION AU DÉFILEMENT · 02.08.2026
   La colonne de gauche suit la lecture : les éléments s'activent l'un après
   l'autre à mesure qu'on descend, et le survol relie la figure au texte.
   Le modèle est celui de la section 02, déjà en place (.zone / .friction).
   ========================================================================== */

/* — bandeau du renversement · lisibilité — */
.rev-meta{font-size:12.5px}
.rev-lab{font-size:12.5px}
.rev-n{font-variant-numeric:tabular-nums}
/* le bleu d'accent sur fond nuit descend à 2.4:1 : on passe sur la teinte claire */
.rev.side2 .rev-lab{color:var(--color-accent-light)}
.rev-word{font-size:clamp(30px,4.4vw,58px)}

/* — 01 · les strates s'empilent à mesure qu'on descend — */
.strata i{opacity:.3;transform:translateX(-6px);
  transition:opacity .5s var(--ease),transform .5s var(--ease),
             box-shadow .3s var(--ease),border-color .3s var(--ease)}
.strata i.on{opacity:1;transform:none;border-color:var(--color-ink-soft)}
/* La strate qui vient d'être posée est marquée par une barre d'accent, comme
   les livrables, le périmètre et le déroulé. L'anneau de 2px qui l'entourait
   doublait le filet et vibrait contre la trame. */
.strata i.cur{box-shadow:inset 3px 0 0 var(--color-accent);border-color:var(--color-ink)}

/* ---- Plancher d'atténuation · WCAG 1.4.3 ----------------------------------
   Mesuré sur ce fond de papier : --color-ink donne 15.84:1 et tient jusqu'à
   0.61 d'opacité ; --color-ink-soft ne donne que 5.19:1 et tombe sous 4.5:1
   dès 0.94 ; --color-accent, 5.96:1, dès 0.88. Un état inactif à 0.45 mettait
   donc « Hors périmètre » et sa liste à 1.88:1 — du texte que le lecteur doit
   pouvoir lire, pas une décoration. Le plancher est fixé à 0.62, et les encres
   secondaires repassent en encre pleine tant que leur bloc est inactif : elles
   y retrouvent le gris que l'atténuation leur donnait, au-dessus du seuil.
   L'emphase de l'état actif, elle, est portée par le filet d'accent. */
.flow-step:not(.on) .flow-num, .flow-step:not(.on) .flow-d,
.steps>div:not(.on) b, .steps>div:not(.on) p,
.livr-item:not(.on) b, .livr-item:not(.on) .livr-d,
.scope>div:not(.on) .util, .scope>div:not(.on) li,
.perim:not(.p-in) .perim-in span, .perim:not(.p-out) .perim-out span,
.eco div:not(.on){color:var(--color-ink)}
.cells>div:not(.on)::before{color:var(--color-ink)}

/* — 03 · le déroulé · gauche et droite liées — */
.flow-step{opacity:.62;transition:opacity .35s var(--ease)}
.flow-step.on{opacity:1}
.flow-step.on::after{background:var(--color-accent);width:13px;height:13px;left:3px}
/* La colonne active était teintée à même la boîte. Or la première colonne a
   padding-left:0 pour aligner son texte sur le titre : le fond venait donc
   mordre les lettres, sans marge à gauche ni sous le dernier paragraphe.
   On désigne la colonne active par un filet d'accent en tête, comme ailleurs,
   et on rend au bas de colonne l'air qui lui manquait. */
.steps>div{opacity:.62;padding-bottom:22px;
  transition:opacity .3s var(--ease),box-shadow .3s var(--ease)}
.steps>div.on{opacity:1;box-shadow:inset 0 3px 0 var(--color-accent)}

/* — 04 · les trois livrables —
   La figure montrait un classement de six barres par priorité : elle n'illustrait
   que le premier des trois livrables annoncés par la section, d'où l'impression
   d'un décompte faux. Trois éléments distincts, un par cellule du texte. */
.livr{margin-top:22px;border:var(--hair) solid var(--color-ink);
  background:var(--color-paper);display:flex;flex-direction:column}
.livr-item{display:grid;grid-template-columns:46px 1fr;column-gap:14px;row-gap:3px;
  padding:17px 16px;opacity:.62;
  transition:opacity .35s var(--ease),background-color .35s var(--ease)}
.livr-item + .livr-item{border-top:var(--hair) solid var(--color-rule)}
.livr-item svg{grid-column:1;grid-row:1/4;align-self:center;justify-self:center;
  width:30px;height:30px;stroke:currentColor;stroke-width:1.5;fill:none;
  stroke-linecap:round;stroke-linejoin:round;color:var(--color-ink);
  transition:color .35s var(--ease)}
.livr-item b{grid-column:2;font-family:var(--font-utility);font-size:11px;
  font-weight:700;letter-spacing:.14em;color:var(--color-accent);
  transition:color .35s var(--ease)}
.livr-t{grid-column:2;font-size:15px;line-height:1.35;color:var(--color-ink);
  transition:color .35s var(--ease)}
.livr-d{grid-column:2;font-family:var(--font-utility);font-size:11px;
  letter-spacing:.05em;text-transform:uppercase;color:var(--color-ink-soft);
  transition:color .35s var(--ease)}
.livr-item.on,.livr-item:hover{opacity:1;background:var(--color-ink)}
.livr-item.on svg,.livr-item:hover svg,
.livr-item.on b,.livr-item:hover b,
.livr-item.on .livr-t,.livr-item:hover .livr-t,
.livr-item.on .livr-d,.livr-item:hover .livr-d{color:var(--color-paper)}
.cells>div{transition:background-color .3s var(--ease),opacity .3s var(--ease);opacity:.62}
.cells>div.on{opacity:1;background:var(--color-paper-alt)}

/* — 06 · le périmètre · le point de rupture dedans / dehors —
   L'opacité seule ne suffisait pas à désigner le bloc actif : le « dedans » porte
   déjà un cadre épais et des repères d'angle, le « dehors » n'est qu'une trame
   hachurée pâle. Une barre d'accent et un cartouche inversé tranchent nettement. */
.perim-in,.perim-out{opacity:.62;
  transition:opacity .45s var(--ease),box-shadow .45s var(--ease)}
.perim.p-in .perim-in,.perim.p-out .perim-out{opacity:1;
  box-shadow:inset 4px 0 0 var(--color-accent)}
.perim-lab{transition:background-color .35s var(--ease),color .35s var(--ease)}
.perim.p-in .perim-in .perim-lab{background:var(--color-accent);color:var(--color-paper)}
.perim.p-out .perim-out .perim-lab{background:var(--color-ink);color:var(--color-paper)}
.scope>div{opacity:.62;transition:opacity .35s var(--ease),background-color .35s var(--ease)}
.scope>div.on{opacity:1;background:var(--color-paper-alt);
  box-shadow:inset 0 3px 0 var(--color-accent)}

/* — 07 · le portrait · il se pose à mesure qu'on descend —
   Un seuil binaire ne se voyait pas : la bascule tombait dans les 50 premiers
   pixels de la fenêtre de la figure, donc l'état gris n'existait à l'écran que
   le temps d'un cran de molette. La pose est maintenant continue, --pose allant
   de 0 à 1 au fil du défilement. Pas de transition : c'est le scroll qui mène. */
.portrait{--pose:0;
  filter:grayscale(calc(.55 * (1 - var(--pose)))) contrast(calc(1 - .06 * (1 - var(--pose))));
  transform:scale(calc(1 + .045 * (1 - var(--pose)))) translateY(calc(8px * (1 - var(--pose))))}

/* — 08 · après l'audit · 01 puis 02 — */
.eco div{opacity:.62;transition:opacity .45s var(--ease)}
.eco div.on{opacity:1}

@media (prefers-reduced-motion: reduce){
  .strata i,.flow-step,.steps>div,.livr-item,.cells>div,
  .perim-in,.perim-out,.scope>div,.eco div{opacity:1;transform:none}
  .portrait{filter:none;transform:none}
}
.cv-hp{position:absolute!important;left:-10000px!important;width:1px!important;height:1px!important;overflow:hidden!important}
.cv-form-status{flex:1 1 100%;padding:14px 16px;border:1px solid currentColor;margin:0 0 18px}
body.menu-open{overflow:hidden}
@media (min-width:901px){.nav-drawer{display:none!important}}

.zone:nth-child(1){--area:1 / 1 / 3 / 3}.zone:nth-child(2){--area:1 / 3 / 3 / 4}.zone:nth-child(3){--area:1 / 4 / 4 / 5}.zone:nth-child(4){--area:3 / 1 / 4 / 2}.zone:nth-child(5){--area:3 / 2 / 4 / 4}.zone:nth-child(6){--area:4 / 1 / 5 / 3}.zone:nth-child(7){--area:4 / 3 / 5 / 4}.zone:nth-child(8){--area:4 / 4 / 5 / 5}.zone:nth-child(9){--area:5 / 1 / 6 / 3}.zone:nth-child(10){--area:5 / 3 / 6 / 5}

.portrait.pose-on{opacity:1;transform:translateY(0) scale(1)}
.not-found{max-width:760px;margin:12vh auto;padding:24px}

/* ==========================================================================
   Ajustements mobile — retours Yan du 06.08.2026
   Issues #43 #45 #46 #47 #50 #51 #52 #54. Bloc placé en fin de feuille pour
   battre la spécificité des règles desktop sans les réécrire.
   ========================================================================== */

/* --- #52 · asides redondants masqués sous 900 px -------------------------- */
/* Ces figures redisent ce que le corps de texte porte déjà. On conserve celles
   qui apportent un contenu propre : plan (2), palette (5), portrait (7). */
@media (max-width:900px){
  fig[data-fig="1"],fig[data-fig="3"],fig[data-fig="4"],
  fig[data-fig="6"],fig[data-fig="8"],fig[data-fig="9"]{display:none!important}
  .plan{padding:0;border-bottom:0}
  .plan-head,.plan-cta{display:none}
}

/* --- #43 · hero mobile ---------------------------------------------------- */
/* Le CTA du header double celui du drawer : on l'enlève pour alléger. */
@media (max-width:900px){
  .head .btn{display:none}
}
@media (max-width:560px){
  .hero .metarow{flex-direction:column;gap:6px}
  .hero .metarow>span{width:100%}
  .hero .metarow>span:nth-child(4){display:none}
}

/* --- #45 · plan des 10 zones ---------------------------------------------- */
/* Les libellés doublonnent la liste des frictions : seuls les numéros restent. */
.plan-grid .zone span{display:none}
.friction-lab{color:var(--color-accent)}
.friction.on .friction-lab,.friction.flash .friction-lab{color:var(--color-accent)}
/* Flash de repérage après un tap : fond papier-alt, jamais l'accent bleu —
   le titre noir deviendrait illisible dessus. */
.friction.flash{background:var(--color-paper-alt)}

/* --- #46 · déroulé (03) --------------------------------------------------- */
@media (max-width:560px){
  .steps{grid-template-columns:1fr;border-top:0}
  .steps>div{padding:18px 14px 14px;border-top:var(--hair) solid var(--color-rule);
             border-left:3px solid var(--color-rule);padding-left:14px}
  /* Bat la règle desktop `.steps>div+div` qui ne posait qu'un filet de 1 px :
     sans cet override, 01 avait 3 px et 02/03 en avaient 1. */
  .steps>div+div{border-left:3px solid var(--color-rule);padding-left:14px}
  .steps>div.on,.steps>div+div.on{border-left-color:var(--color-accent);
             background:var(--color-paper-alt);padding-left:18px;box-shadow:none}
}

/* --- #47 · offre (06) ----------------------------------------------------- */
@media (max-width:560px){
  .scope{grid-template-columns:1fr}
  .scope>div+div{border-left:0}
  /* Inclus : cadre technique, comme le perim « in » du desktop. */
  .scope>div:first-child{border:var(--thick) solid var(--color-ink);
             background:var(--color-paper-alt);position:relative}
  .scope>div:first-child::before,.scope>div:first-child::after{content:"";
             position:absolute;width:7px;height:7px;background:var(--color-accent)}
  .scope>div:first-child::before{top:-4px;left:-4px}
  .scope>div:first-child::after{bottom:-4px;right:-4px}
  /* Possibilités : hachures, comme le perim « out ». */
  .scope>div:nth-child(2){background:repeating-linear-gradient(45deg,
             transparent 0 6px,var(--color-rule) 6px 7px)}
  .scope .util{background:var(--color-paper);padding:2px 6px;width:fit-content}
}

/* --- #50 · cells (04) ----------------------------------------------------- */
@media (max-width:560px){
  .cells>div{padding-left:56px;padding-right:16px}
  .cells>div::before{left:14px;width:40px}
}
@media (max-width:900px){
  /* Barre de survol inutile au tactile, et elle restait collée au numéro
     après un tap. */
  .cells>div::after{display:none}
}

/* --- #51 · FAQ (09) ------------------------------------------------------- */
@media (max-width:900px){
  .col h2,.col h2.sm{margin-bottom:14px}
  #faq{margin-top:12px}
  #faq details:first-of-type{border-top:var(--hair) solid var(--color-rule)}
}

/* --- #54 · typographie mobile --------------------------------------------- */
@media (max-width:560px){
  body{font-size:16.5px;line-height:1.65}
  .col p.body{font-size:16.5px;line-height:1.75}
  .col p.it{font-size:17px;line-height:1.6}
  .forwho{font-size:16px}
  .friction span{font-size:15px}
  .friction b{font-size:12px}
  .cells>div{font-size:17.5px;line-height:1.5}
  .scope li{font-size:16px;line-height:1.55}
  .steps h3{font-size:23px}
  .steps p{font-size:15.5px;line-height:1.7}
  .signature{font-size:19px}
  .lead{font-size:16.5px;line-height:1.7}
  details summary span{font-size:17px}
  details p{font-size:16px;line-height:1.75}
}

/* --- #48 · footer en 3 colonnes ------------------------------------------- */
/* Le partenaire méritait sa propre colonne : noyé entre les contacts, il se
   lisait comme une coordonnée de plus. */
.foot-top{grid-template-columns:1.15fr 1fr auto}
.foot-partner{align-items:flex-start;padding-bottom:0;margin-bottom:0;border-bottom:0}
/* `filter:invert` échangeait le orange et le teal de l'emblème. La variante
   blanche du logo porte déjà les bonnes couleurs : aucun filtre. */
.foot-partner img{filter:none}
@media (max-width:900px){
  .foot-top{grid-template-columns:1fr}
  .foot-partner{align-items:flex-start}
}

/* ---------------------------------------------------------------------------
   Consentement — bandeau et fenêtre de préférences · #107

   🔴 RÈGLE ABSOLUE : rien de cette section ne vient d'une autre marque.

   Ce composant portait sur son bouton principal un vert citron qui
   n'appartient à aucun jeton Clairvidence : c'était l'accent d'une AUTRE
   marque de la maison, arrivé ici avec un composant repris sans re-marquage.
   Une couleur qui traverse deux marques n'est pas une inélégance : c'est la
   charte qui cesse de vouloir dire quelque chose.

   La valeur exacte n'est pas recopiée ici, même en commentaire : un banc
   cherche ces valeurs dans tout le thème, et une garde qui s'autorise des
   exceptions pour les commentaires est une garde qu'on apprend à contourner.

   Toutes les valeurs ci-dessous sont donc des JETONS du :root de cette
   feuille. Aucune valeur hexadécimale n'est écrite en dur — c'est ce qui rend
   la faute impossible à refaire sans qu'un banc la voie. Le brand book
   Clairvidence 1.0 fait foi ; les textes viennent de content/index.md.
   --------------------------------------------------------------------------- */

/* ---- Le bandeau, court : informer, et laisser la main ---- */
.cv-consent{position:fixed;left:0;right:0;bottom:0;z-index:9999;
  background:var(--color-night);color:var(--color-paper);
  border-top:var(--hair) solid var(--color-accent-light);
  box-shadow:0 -8px 24px rgba(0,0,0,.35)}
.cv-consent[hidden]{display:none}
.cv-consent-in{max-width:var(--frame);margin:0 auto;padding:20px 24px;
  display:flex;flex-wrap:wrap;gap:16px 28px;align-items:center}
.cv-consent-txt{flex:1 1 320px;margin:0;
  font-family:var(--font-text);font-size:.86rem;line-height:1.55;
  color:var(--color-invert-soft)}
.cv-consent-txt b{display:block;margin-bottom:5px;
  font-family:var(--font-utility);font-size:.72rem;font-weight:500;
  letter-spacing:.16em;text-transform:uppercase;color:var(--color-accent-light)}
.cv-consent-txt a{color:var(--color-accent-light);
  border-bottom:var(--hair) solid var(--color-accent-light)}
.cv-consent-btns{display:flex;gap:12px;flex-wrap:wrap}

/* ---- Les boutons, communs au bandeau et à la fenêtre ---- */
.cv-c-btn{cursor:pointer;border-radius:var(--radius-sm);padding:11px 20px;
  font-family:var(--font-utility);font-size:.78rem;letter-spacing:.04em;
  border:var(--hair) solid var(--color-accent-light);
  background:transparent;color:var(--color-paper);
  transition:background .18s var(--ease),color .18s var(--ease)}
.cv-c-btn:hover{background:rgba(156,195,209,.14)}
.cv-c-btn:focus-visible{outline:var(--thick) solid var(--color-accent-light);outline-offset:2px}
/* Une seule action pleine : deux boutons pleins ne disent plus lequel suivre. */
.cv-c-primaire{background:var(--color-accent-light);color:var(--color-night);
  border-color:var(--color-accent-light);font-weight:500}
.cv-c-primaire:hover{background:var(--color-paper);border-color:var(--color-paper)}

/* ---- La fenêtre « Vos préférences » ---- */
.cv-prefs{position:fixed;inset:0;z-index:10000;display:flex;
  align-items:center;justify-content:center;padding:24px}
.cv-prefs[hidden]{display:none}
.cv-prefs-fond{position:absolute;inset:0;background:rgba(11,16,20,.72)}
.cv-prefs-carte{position:relative;width:100%;max-width:560px;max-height:86vh;overflow:auto;
  background:var(--color-night-alt);color:var(--color-paper);
  border:var(--hair) solid var(--color-accent-light);
  border-radius:var(--radius-sm);padding:30px 30px 26px}
.cv-prefs-x{position:absolute;top:14px;right:16px;background:transparent;border:0;
  color:var(--color-invert-soft);font-size:26px;line-height:1;cursor:pointer;padding:4px 8px}
.cv-prefs-x:hover{color:var(--color-paper)}
.cv-prefs-surtitre{margin:0 0 8px;font-family:var(--font-utility);font-size:.7rem;
  letter-spacing:.16em;text-transform:uppercase;color:var(--color-accent-light)}
.cv-prefs-titre{margin:0 0 8px;font-family:var(--font-text);font-weight:300;
  font-size:1.5rem;letter-spacing:-.01em;color:var(--color-paper)}
.cv-prefs-intro{margin:0 0 20px;max-width:52ch;
  font-family:var(--font-text);font-size:.85rem;line-height:1.6;
  color:var(--color-invert-soft)}
.cv-prefs-intro a{color:var(--color-accent-light);
  border-bottom:var(--hair) solid var(--color-accent-light)}

/* ---- Une catégorie : ce qu'elle fait, et son interrupteur ---- */
.cv-cat{display:flex;gap:20px;align-items:flex-start;padding:16px 0;
  border-top:var(--hair) solid rgba(156,195,209,.24)}
.cv-cat-txt{flex:1}
.cv-cat-nom{font-family:var(--font-text);font-size:.95rem;font-weight:500;
  color:var(--color-paper)}
.cv-cat-note{font-family:var(--font-utility);font-size:.68rem;letter-spacing:.1em;
  text-transform:uppercase;color:var(--color-accent-light)}
.cv-cat-de{margin-top:5px;font-family:var(--font-text);font-size:.82rem;line-height:1.55;
  color:var(--color-invert-soft)}

/* ---- L'interrupteur : la case du navigateur reste, mais invisible.
       Elle porte le focus, le clavier et l'état ; le style ne fait que
       l'habiller. La retirer aurait coûté l'accessibilité qu'elle donne. ---- */
.cv-sw{position:relative;width:46px;height:26px;flex:none;margin-top:2px;display:block}
.cv-sw input{position:absolute;inset:0;width:100%;height:100%;margin:0;opacity:0;
  cursor:pointer;z-index:1}
.cv-sw-piste{position:absolute;inset:0;border-radius:99px;
  background:var(--color-night);border:var(--hair) solid var(--color-invert-soft);
  transition:background .2s var(--ease),border-color .2s var(--ease)}
.cv-sw-piste::after{content:"";position:absolute;top:3px;left:3px;width:18px;height:18px;
  border-radius:50%;background:var(--color-invert-soft);transition:transform .2s var(--ease),background .2s var(--ease)}
.cv-sw input:checked + .cv-sw-piste{background:rgba(156,195,209,.24);
  border-color:var(--color-accent-light)}
.cv-sw input:checked + .cv-sw-piste::after{background:var(--color-accent-light);
  transform:translateX(20px)}
.cv-sw input:focus-visible + .cv-sw-piste{outline:var(--thick) solid var(--color-accent-light);
  outline-offset:2px}
.cv-sw input:disabled{cursor:not-allowed}
.cv-sw input:disabled + .cv-sw-piste{opacity:.5}

.cv-prefs-actions{display:flex;gap:12px;flex-wrap:wrap;margin-top:24px;padding-top:20px;
  border-top:var(--hair) solid rgba(156,195,209,.24)}
.cv-prefs-actions .cv-c-btn{flex:1;text-align:center}

@media (max-width:640px){
  .cv-consent-in{gap:16px}
  .cv-consent-btns{width:100%}
  .cv-consent-btns .cv-c-btn{flex:1}
  .cv-prefs-carte{padding:26px 20px 22px}
}
@media (prefers-reduced-motion:reduce){
  .cv-c-btn,.cv-sw-piste,.cv-sw-piste::after{transition:none}
}