/* Le rapport v5 (DESIGN-v5 §7). DA Olyris 2026-07 : sable / taupe / nuit, Inter Tight 300 + 400.
   Jetons et registres repris de la v4 validee (public/assets/quiz.css) : sable accueille et repond,
   taupe explique (le pourquoi), nuit affirme (ce qu'Olyris OS reprend, l'appel).
   La couleur d'etat ne marque que deux evenements : l'etape la plus faible et le prochain mur. */

:root {
  --sable: #EFEDE8;
  --sable-2: #E3E0D8;
  --filet: #D4CFC3;
  --taupe: #BEB3A6;
  --nuit-2: #1A1917;
  --nuit: #0E0E0D;
  --ink: #17150F;
  --graphite: #5C5951;
  --graphite-nuit: #8A867C;
  --filet-nuit: #2A2824;
  --etat: #B8442B;
  --etat-nuit: #D2542F;

  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --gutter: clamp(16px, 5vw, 80px);
  --pad: clamp(40px, 6.5vw, 104px);
  --fg: var(--ink);
  --fg-2: var(--graphite);
  --line: var(--filet);
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; background: var(--sable); }
body {
  margin: 0;
  background: var(--sable);
  color: var(--ink);
  font-family: "Inter Tight", "Helvetica Neue", Arial, sans-serif;
  font-weight: 400;
  font-size: 18px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
h1, h2, h3, p, ol, ul { margin: 0; }
ol, ul { padding: 0; list-style: none; }
h1, h2, h3 { font-weight: 300; }
a { color: inherit; }
button { font: inherit; color: inherit; cursor: pointer; }
::selection { background: var(--taupe); color: var(--ink); }

.wrap { width: 100%; max-width: 1280px; margin: 0 auto; padding: 0 var(--gutter); }

.eyebrow {
  font-size: 14px; font-weight: 500; letter-spacing: 0.14em; text-transform: uppercase;
  line-height: 1.4; color: var(--fg-2);
}
.k { font-size: 14px; font-weight: 500; letter-spacing: 0.14em; text-transform: uppercase; line-height: 1.4; }
.chip {
  display: inline-flex; align-items: center; gap: 6px; vertical-align: 0.14em;
  padding: 3px 10px; border: 1px solid var(--line); border-radius: 999px;
  font-size: 14px; font-weight: 500; letter-spacing: 0.1em; text-transform: uppercase; line-height: 1.3; color: var(--fg-2);
  white-space: nowrap;
}
.r-hero h1 .chip { vertical-align: 0.5em; margin-left: 6px; letter-spacing: 0.1em; }

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 56px; padding: 0 28px;
  border: 1px solid var(--ink); border-radius: 6px;
  background: var(--ink); color: var(--sable);
  font-size: 17px; font-weight: 400; text-decoration: none; text-align: center;
  transition: transform 200ms var(--ease), background-color 200ms var(--ease), color 200ms var(--ease);
}
.btn:hover { transform: translateY(-1px); }
.btn:focus-visible { outline: 2px solid currentColor; outline-offset: 3px; }
.btn.ghost { background: transparent; color: var(--ink); border-color: var(--ink); }
.btn .arrow { width: 18px; height: 18px; flex: none; }
.copied { display: block; min-height: 22px; margin-top: 10px; font-size: 16px; color: var(--graphite); }

/* ---------- Barre haute ---------- */
.bar { border-bottom: 1px solid var(--filet); }
.bar-in { display: flex; align-items: center; justify-content: space-between; gap: 16px; height: 64px; }
.logo { display: block; height: 16px; width: auto; }
.bar-r { display: flex; gap: 20px; font-size: 16px; color: var(--graphite); }
@media (max-width: 719px) { .bar-r .bar-date { display: none; } .bar-in { height: 56px; } .logo { height: 14px; } }

/* ---------- 1. Le titre : ce qui le freine ---------- */
.r-hero { padding: clamp(40px, 7vw, 112px) 0 clamp(40px, 6vw, 96px); }
.h-eyebrow { display: flex; flex-wrap: wrap; gap: 6px 14px; color: var(--graphite); }
.h-poste { color: var(--ink); }
.h-poste::before { content: ""; display: inline-block; width: 18px; height: 1px; background: var(--graphite); vertical-align: 0.3em; margin-right: 14px; }
.r-hero h1 {
  margin-top: clamp(20px, 2.4vw, 32px);
  font-size: clamp(34px, 5.2vw, 78px); line-height: 1.02; letter-spacing: -0.03em;
  max-width: 15.5em; text-wrap: balance;
}
/* Le titre du rapport, et le bloc que nomme une ancre (#assistant), recoivent le focus par script a
   l'ouverture : jamais de contour (tabindex -1, hors de l'ordre de tabulation). Les contours du
   clavier, sur les boutons, liens et replis, ne changent pas. */
.report [tabindex="-1"]:focus { outline: none; }
.h-verdict { margin-top: clamp(22px, 2.6vw, 36px); display: grid; gap: 12px; max-width: 46em; }
.h-mag { font-size: clamp(21px, 2.1vw, 30px); font-weight: 300; line-height: 1.25; letter-spacing: -0.01em; }
.h-constat { font-size: 17px; line-height: 1.5; color: var(--graphite); max-width: 40em; }
.h-constat .chip, .h-mag .chip { margin-left: 4px; }
/* Anglais : aucun mot seul en derniere ligne de l'ampleur, du constat et du repere de l'etape la
   plus faible (les lignes anglaises tombent ailleurs ; le rendu francais, valide, ne change pas). */
.report[lang="en"] .h-mag, .report[lang="en"] .h-constat, .report[lang="en"] .fn-flag { text-wrap: pretty; }
.nw { white-space: nowrap; }

/* Le parcours : cellules reliees, la plus faible marquee d'un filet d'etat. */
.funnel { margin-top: clamp(32px, 4vw, 56px); padding-top: 24px; border-top: 1px solid var(--filet); }
.fn-row { display: grid; grid-template-columns: repeat(var(--n), minmax(0, 1fr)); gap: 12px; margin-top: 18px; }
.fn-step {
  position: relative; display: grid; align-content: start; gap: 6px;
  background: var(--sable-2); border-radius: 10px; padding: 18px 20px 20px;
  border-top: 2px solid transparent;
}
.fn-step + .fn-step::before {
  content: ""; position: absolute; left: -12px; top: 50%; width: 12px; height: 1px; background: var(--graphite);
}
.fn-v { font-size: clamp(22px, 2vw, 30px); font-weight: 300; line-height: 1.15; letter-spacing: -0.015em; }
.fn-l { font-size: 16px; color: var(--graphite); line-height: 1.35; }
.fn-vol .fn-v { font-variant-numeric: tabular-nums; }
.fn-step.is-muted .fn-v { color: var(--graphite); }
.fn-step.is-weak { border-top-color: var(--etat); }
.fn-flag { display: flex; align-items: baseline; gap: 8px; margin-top: 8px; font-size: 16px; color: var(--ink); line-height: 1.35; }
.fn-flag i { flex: none; width: 8px; height: 8px; border-radius: 50%; background: var(--etat); transform: translateY(-1px); }
.band { display: flex; gap: 4px; margin-bottom: 4px; }
.band i { width: 22px; height: 6px; border-radius: 2px; background: var(--filet); }
.band i.on { background: var(--ink); }
.band.is-weak i.on { background: var(--etat); }
.band.is-unknown i { background: transparent; border: 1px dashed var(--graphite); }
.band.is-spacer { visibility: hidden; }
.fn-note { margin-top: 12px; font-size: 16px; color: var(--graphite); }

/* ---------- Le pont (contradiction, redirection, inconnu) ---------- */
.r-bridge { padding-bottom: clamp(40px, 5vw, 72px); margin-top: calc(-1 * clamp(8px, 2vw, 40px)); }
.bridge-card { background: var(--sable-2); border-left: 2px solid var(--ink); border-radius: 0 10px 10px 0; padding: clamp(20px, 2.6vw, 36px) clamp(20px, 3vw, 44px); max-width: 1000px; }
.bridge-card .eyebrow { color: var(--ink); }
.bridge-t { margin-top: 10px; font-size: clamp(18px, 1.6vw, 22px); line-height: 1.45; }

/* ---------- 2. Pourquoi ca arrive : aplat taupe, le texte y est toujours ink ---------- */
.r-goal { padding-bottom: clamp(40px, 5vw, 72px); }
.goal { display: grid; gap: 12px; padding-top: 22px; border-top: 1px solid var(--filet); }
@media (min-width: 960px) { .goal { grid-template-columns: 280px 1fr; gap: 56px; align-items: baseline; } }
.goal-body { display: grid; gap: 8px; max-width: 44em; }
.goal-t { font-size: clamp(20px, 1.9vw, 26px); font-weight: 300; line-height: 1.3; letter-spacing: -0.01em; }
.goal-e { font-size: 17px; line-height: 1.5; color: var(--graphite); }

.r-why { background: var(--taupe); color: var(--ink); padding: var(--pad) 0; --line: rgba(23, 21, 15, 0.34); --fg-2: var(--ink); }
.why-row { display: grid; gap: 14px; }
@media (min-width: 960px) { .why-row { grid-template-columns: 280px 1fr; gap: 56px; align-items: start; } }
.why-cause { padding-bottom: clamp(24px, 2.6vw, 36px); margin-bottom: clamp(24px, 2.6vw, 36px); border-bottom: 1px solid rgba(23, 21, 15, 0.28); }
@media (min-width: 960px) { .why-cause .k { padding-top: 12px; } }
.cause-t { font-size: clamp(24px, 2.6vw, 38px); font-weight: 300; line-height: 1.18; letter-spacing: -0.02em; max-width: 24em; }
.why-head { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; }
@media (min-width: 960px) { .why-head { flex-direction: column; align-items: flex-start; padding-top: 10px; } }
.r-why .chip { color: var(--ink); }
.why-t { font-size: clamp(21px, 2.15vw, 32px); font-weight: 300; line-height: 1.34; letter-spacing: -0.012em; max-width: 30em; }

/* ---------- 3. Ce qui le regle, ce qui ne le regle pas ---------- */
.r-fix { padding: var(--pad) 0; }
.hors {
  display: flex; align-items: baseline; gap: 14px; margin-bottom: clamp(28px, 3vw, 44px);
  padding: clamp(18px, 2vw, 26px) clamp(20px, 2.4vw, 32px); background: var(--sable-2);
  border-top: 2px solid var(--etat); border-radius: 10px;
  font-size: clamp(22px, 2.2vw, 32px); font-weight: 300; line-height: 1.2; letter-spacing: -0.015em;
}
.hors i { flex: none; width: 10px; height: 10px; background: var(--etat); border-radius: 50%; transform: translateY(-2px); }
.fix-grid { display: grid; gap: 32px; }
@media (min-width: 900px) { .fix-grid { grid-template-columns: 1fr 1fr; gap: clamp(40px, 5vw, 88px); } }
.fix .k { display: flex; align-items: center; gap: 12px; padding-bottom: 14px; border-bottom: 1px solid var(--ink); }
.fix.is-no .k { color: var(--graphite); border-bottom-color: var(--filet); }
.fix p { margin-top: 16px; font-size: 18px; line-height: 1.55; max-width: 34em; }
.mk { position: relative; width: 16px; height: 16px; flex: none; }
.is-yes .mk::before { content: ""; position: absolute; left: 2px; top: 1px; width: 6px; height: 11px; border-right: 1.5px solid var(--ink); border-bottom: 1.5px solid var(--ink); transform: rotate(45deg); left: 5px; }
.is-no .mk::before, .is-no .mk::after { content: ""; position: absolute; left: 7px; top: 1px; width: 1.5px; height: 14px; background: var(--graphite); transform: rotate(45deg); }
.is-no .mk::after { transform: rotate(-45deg); }

/* ---------- 4-5. Nuit : ce qu'Olyris OS reprendrait, le prochain mur, la carte ---------- */
.r-os { background: var(--nuit); color: var(--sable); padding: var(--pad) 0; --fg-2: var(--graphite-nuit); --line: var(--filet-nuit); }
.os-lead { display: grid; gap: 14px; max-width: 1040px; }
.os-lead .eyebrow { color: var(--taupe); }
.os-t { font-size: clamp(22px, 2.3vw, 34px); font-weight: 300; line-height: 1.3; letter-spacing: -0.015em; max-width: 28em; }
.mur { margin-top: clamp(32px, 4vw, 56px); display: grid; gap: 10px; max-width: 760px; padding: 20px 24px; border: 1px solid var(--filet-nuit); border-top: 2px solid var(--etat-nuit); border-radius: 10px; background: var(--nuit-2); }
.mur-k { display: flex; align-items: center; gap: 10px; color: var(--sable); }
.mur-k i { width: 8px; height: 8px; border-radius: 50%; background: var(--etat-nuit); }
.mur-t { font-size: 17px; line-height: 1.5; color: var(--sable); }
.map { margin-top: clamp(48px, 6vw, 96px); padding-top: clamp(28px, 3vw, 40px); border-top: 1px solid var(--filet-nuit); }
/* Sans remede (ampleur faible), la section nuit commence par le mur ou la carte. */
.r-os .wrap > :first-child { margin-top: 0; }
.r-os .wrap > .map:first-child { border-top: 0; padding-top: 0; }
.map-h { margin-top: 10px; font-size: clamp(26px, 2.8vw, 42px); line-height: 1.08; letter-spacing: -0.02em; max-width: 22em; text-wrap: balance; }

/* L'organigramme : vous, puis vos quatre postes. Connecteurs en CSS, sans mesure au runtime. */
.org { margin-top: clamp(28px, 3.4vw, 48px); }
.org-you { display: flex; justify-content: center; }
.org-you .c { position: relative; width: 64px; height: 64px; border-radius: 50%; background: var(--sable); color: var(--ink); display: grid; place-items: center; font-size: 16px; font-weight: 500; }
.org-cols { position: relative; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; margin-top: 56px; }
.org-you .c::after { content: ""; position: absolute; left: 50%; top: 100%; width: 1px; height: 28px; background: var(--graphite-nuit); }
.org-cols::before { content: ""; position: absolute; top: -28px; left: calc((100% - 48px) / 8); right: calc((100% - 48px) / 8); height: 1px; background: var(--graphite-nuit); }
.org-card {
  position: relative; display: grid; align-content: start; gap: 10px;
  padding: 20px 20px 22px; border-radius: 10px; background: var(--nuit-2); border: 1px solid var(--filet-nuit);
}
.org-card::before { content: ""; position: absolute; left: 50%; top: -29px; width: 1px; height: 28px; background: var(--graphite-nuit); }
.o-tag { display: inline-flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 500; letter-spacing: 0.12em; text-transform: uppercase; color: var(--graphite-nuit); }
.o-tag i { width: 8px; height: 8px; border-radius: 50%; background: var(--etat-nuit); }
.o-l { font-size: 20px; line-height: 1.25; }
.o-t { font-size: 16px; line-height: 1.45; color: var(--graphite-nuit); }
.org-card.is-lit { background: var(--sable); color: var(--ink); border-color: var(--sable); }
.org-card.is-lit .o-tag { color: var(--graphite); }
.org-card.is-lit .o-l { font-weight: 500; }
.org-card.is-lit .o-t { color: var(--graphite); }
.org-card.is-lit::before { background: var(--sable); }
.org-card.is-mur { border-top: 2px solid var(--etat-nuit); }
.org-card.is-mur .o-tag { color: var(--sable); }
/* Replis (postes hors du sien, site lu) : ouverts et inertes sur grand ecran, repliables sur mobile. */
.o-fold summary { display: grid; gap: 10px; align-content: start; }
.o-fold > .o-t { display: block; margin-top: 10px; }
details > summary { list-style: none; }
details > summary::-webkit-details-marker { display: none; }
.o-more { display: none; }
@media (min-width: 720px) { .o-fold > summary, .site-card > summary, .fold-m > summary { pointer-events: none; } }
.o-tag.is-empty { min-height: 20px; }
.fix.is-no > summary .k { width: 100%; }
.call-qs > summary { display: flex; align-items: center; gap: 12px; }

/* ---------- 6. Trois actions ---------- */
.r-actions { padding: var(--pad) 0; }
.sec-h { font-size: clamp(28px, 3.2vw, 48px); line-height: 1.06; letter-spacing: -0.025em; max-width: 18em; }
.acts { display: grid; gap: 0; margin-top: clamp(24px, 3vw, 44px); counter-reset: a; }
@media (min-width: 960px) { .acts { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(28px, 3vw, 48px); } }
.acts li { display: grid; gap: 12px; align-content: start; padding: 20px 0 22px; border-top: 1px solid var(--ink); }
.acts .n { font-size: clamp(34px, 3vw, 48px); font-weight: 300; line-height: 1; letter-spacing: -0.03em; font-variant-numeric: tabular-nums; }
.acts p { font-size: 18px; line-height: 1.5; }

/* ---------- Partage (salarie, P14) ---------- */
.r-share { padding-bottom: clamp(40px, 5vw, 72px); }
.share-card { display: grid; gap: 20px; background: var(--sable-2); border-radius: 12px; padding: clamp(22px, 3vw, 40px); }
@media (min-width: 900px) { .share-card { grid-template-columns: 1fr auto; align-items: center; gap: 48px; } }
.share-h { font-size: clamp(22px, 2.2vw, 30px); line-height: 1.2; letter-spacing: -0.015em; max-width: 24em; }
.share-p { margin-top: 10px; font-size: 17px; color: var(--graphite); }

/* ---------- 7. L'appel : nuit, le geste principal de la page ---------- */
.r-call { background: var(--nuit); color: var(--sable); padding: var(--pad) 0; --fg-2: var(--graphite-nuit); --line: var(--filet-nuit); }
.call-grid { display: grid; gap: 40px; }
@media (min-width: 960px) { .call-grid { grid-template-columns: 1.05fr 1fr; gap: clamp(48px, 6vw, 112px); align-items: start; } }
.call-main .eyebrow { color: var(--taupe); }
.call-h { margin-top: 16px; font-size: clamp(32px, 4.2vw, 64px); line-height: 1.02; letter-spacing: -0.03em; text-wrap: balance; max-width: 13em; }
.call-cta { margin-top: clamp(28px, 3vw, 40px); }
.r-call .btn { background: var(--sable); color: var(--ink); border-color: var(--sable); min-height: 60px; font-size: 18px; padding: 0 32px; }
.call-note { margin-top: 14px; font-size: 16px; color: var(--graphite-nuit); }
.call-qs .eyebrow { color: var(--graphite-nuit); }
.qs { margin-top: 18px; }
.qs li { display: grid; grid-template-columns: 40px 1fr; gap: 12px; padding: 16px 0; border-top: 1px solid var(--filet-nuit); }
.qs li:last-child { border-bottom: 1px solid var(--filet-nuit); }
.qs .n { font-size: 14px; font-weight: 500; letter-spacing: 0.14em; color: var(--taupe); padding-top: 4px; }
.qs p { font-size: 18px; line-height: 1.45; }

/* ---------- L'assistant ---------- */
.r-assist { padding: var(--pad) 0 0; }
.assist-card { display: grid; gap: 28px; background: var(--sable-2); border-radius: 12px; padding: clamp(24px, 3.4vw, 48px); }
@media (min-width: 960px) { .assist-card { grid-template-columns: 1.3fr 1fr; gap: clamp(40px, 5vw, 80px); align-items: end; } }
.assist-h { margin-top: 12px; font-size: clamp(24px, 2.4vw, 36px); line-height: 1.12; letter-spacing: -0.02em; max-width: 20em; text-wrap: balance; }
.assist-steps { margin-top: 20px; display: grid; gap: 10px; }
.assist-steps li { display: grid; grid-template-columns: 28px 1fr; gap: 10px; font-size: 17px; line-height: 1.45; }
.assist-steps .n { width: 24px; height: 24px; border-radius: 50%; border: 1px solid var(--graphite); display: grid; place-items: center; font-size: 14px; font-weight: 500; color: var(--graphite); }
.assist-sub { display: none; margin-top: 12px; font-size: 17px; line-height: 1.45; color: var(--graphite); }
/* Le bloc d'attente d'une langue sans assistant (anglais, view.js) : le texte d'attente, a toutes les largeurs. */
.assist-pending { margin-top: 12px; font-size: 17px; line-height: 1.45; color: var(--graphite); max-width: 36em; }
/* Sans colonne de droite (bloc d'attente), la carte tient sur une colonne et son titre sur la largeur. */
@media (min-width: 960px) {
  .assist-card:not(:has(.assist-side)) { grid-template-columns: 1fr; }
  .assist-card:not(:has(.assist-side)) .assist-h { max-width: none; }
}
.assist-side { display: grid; gap: 16px; justify-items: start; }
.assist-open { font-size: 18px; line-height: 1.45; padding: 16px 18px; background: var(--sable); border-radius: 8px; border: 1px solid var(--filet); }

/* ---------- Ce qu'on a lu sur votre site ---------- */
.r-site { padding: clamp(40px, 4vw, 64px) 0 0; }
.site-card { border-top: 1px solid var(--filet); padding-top: 24px; display: grid; gap: 16px; }
.site-head { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; }
.facts { display: grid; gap: 8px; max-width: 46em; }
.facts li { display: grid; grid-template-columns: 18px 1fr; gap: 8px; font-size: 17px; line-height: 1.45; }
.facts li::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--taupe); margin-top: 9px; }


/* ---------- Niveau d'autonomie ---------- */
.r-auto { padding: clamp(48px, 5vw, 88px) 0 clamp(40px, 5vw, 72px); }
.r-auto .wrap { display: grid; gap: 14px; }
.auto-t { font-size: clamp(24px, 2.6vw, 40px); font-weight: 300; line-height: 1.2; letter-spacing: -0.02em; max-width: 24em; text-wrap: balance; }

/* ---------- Pied ---------- */
.r-foot { border-top: 1px solid var(--filet); padding: 22px 0 40px; }
.foot-in { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 24px; font-size: 16px; color: var(--graphite); }

/* ---------- Barre d'appel ---------- */
.cta-bar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 20; background: var(--nuit); color: var(--sable); border-top: 1px solid var(--filet-nuit); }
.cta-bar[hidden] { display: none; }
.cta-in { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding-top: 10px; padding-bottom: calc(10px + env(safe-area-inset-bottom)); }
.cta-t { font-size: 17px; }
.cta-bar .btn { background: var(--sable); color: var(--ink); border-color: var(--sable); min-height: 48px; padding: 0 22px; font-size: 16px; }
@media (max-width: 719px) { .cta-t { display: none; } .cta-bar .btn { width: 100%; } }

/* ---------- Mobile : une colonne, un rail pour le parcours et la carte ---------- */
@media (max-width: 719px) {
  :root { --pad: 36px; }
  body { font-size: 17px; }
  .r-hero { padding: 28px 0 32px; }
  .r-hero h1 { margin-top: 14px; }
  .h-eyebrow { flex-direction: column; gap: 2px; }
  .h-poste::before { display: none; }
  .h-verdict { margin-top: 18px; gap: 8px; }
  .h-mag { font-size: 20px; }
  .h-constat { font-size: 16px; line-height: 1.45; }
  .funnel { margin-top: 24px; padding-top: 18px; }
  .fn-note { font-size: 16px; margin-top: 10px; }
  .r-bridge { padding-bottom: 24px; margin-top: 0; }
  .bridge-card { padding: 18px 18px 20px; }
  .bridge-t { font-size: 17px; line-height: 1.45; margin-top: 8px; }
  .why-row { gap: 10px; }
  .why-cause { padding-bottom: 16px; margin-bottom: 16px; }
  .cause-t { font-size: 22px; }
  .r-goal { padding-bottom: 24px; }
  .goal { padding-top: 16px; gap: 8px; }
  .goal-t { font-size: 18px; line-height: 1.35; }
  .goal-e { font-size: 16px; line-height: 1.45; }
  .o-tag.is-empty, .band.is-spacer { display: none; }
  .r-hero h1 .chip { vertical-align: 0.35em; }
  .nw { white-space: normal; }
  .fold-m > summary { cursor: pointer; }
  .fix.is-no > summary .k .o-more { margin-left: auto; color: var(--graphite); }
  .fix.is-no:not([open]) > summary .k { border-bottom: 0; padding-bottom: 0; }
  .call-qs > summary { justify-content: space-between; padding: 14px 0; border-top: 1px solid var(--filet-nuit); border-bottom: 1px solid var(--filet-nuit); }
  .call-qs > summary .o-more { color: var(--graphite-nuit); }
  .call-qs[open] > summary { border-bottom: 0; }
  .why-t { font-size: 19px; line-height: 1.38; }
  .hors { font-size: 20px; margin-bottom: 22px; padding: 14px 16px; }
  .fix-grid { gap: 26px; }
  .fix .k { padding-bottom: 10px; }
  .fix p { margin-top: 10px; line-height: 1.5; }
  .os-lead { gap: 10px; }
  .os-t { font-size: 20px; line-height: 1.32; }
  .mur { margin-top: 24px; padding: 16px 16px 18px; gap: 8px; }
  .mur-t { font-size: 16px; line-height: 1.45; }
  .map { margin-top: 32px; padding-top: 22px; }
  .map-h { font-size: 24px; }
  .sec-h { font-size: 26px; }
  .acts { margin-top: 14px; }
  .acts li { grid-template-columns: 40px 1fr; gap: 8px; padding: 14px 0 14px; }
  .acts .n { font-size: 24px; line-height: 1.1; }
  .call-h { margin-top: 12px; font-size: 30px; }
  .call-cta { margin-top: 22px; }
  .r-call .btn { width: 100%; }
  .call-note { margin-top: 10px; }
  .qs { margin-top: 12px; }
  .r-assist { padding-top: 36px; }
  .assist-card { padding: 20px 18px 22px; gap: 16px; }
  .assist-h { font-size: 22px; }
  .assist-steps { display: none; }
  .assist-sub { display: block; }
  .assist-side { gap: 12px; }
  .assist-open { font-size: 16px; padding: 12px 14px; }
  .assist-side .btn { width: 100%; }
  .copied { min-height: 0; margin-top: 0; }
  .copied:empty { display: none; }
  .r-site { padding-top: 28px; }
  .site-card { padding-top: 16px; gap: 12px; }
  .site-card:not([open]) { gap: 0; }
  .site-head { cursor: pointer; }
  .facts li { font-size: 16px; }
  .r-auto { padding: 32px 0 28px; }
  .auto-t { font-size: 22px; }
  .r-foot { padding: 16px 0 24px; }
  .foot-in { font-size: 16px; gap: 8px; }
  .o-fold > summary { cursor: pointer; grid-template-columns: 1fr auto; align-items: center; column-gap: 12px; row-gap: 4px; }
  .o-fold > summary .o-tag { grid-column: 1; }
  .o-fold > summary .o-l { grid-column: 1; }
  .o-more { display: block; grid-column: 2; grid-row: 1 / span 2; width: 10px; height: 10px; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: rotate(45deg); margin: 0 4px 4px 0; color: var(--graphite-nuit); }
  .site-head .o-more { margin-left: auto; color: var(--graphite); }
  .site-head .chip { display: none; }
  .auto-t { font-size: 21px; }
  details[open] > summary .o-more { transform: rotate(-135deg); margin: 4px 4px 0 0; }
  /* Cibles tactiles de 44 px de haut au moins, sans changer le dessin : une zone invisible autour du
     titre des replis (« Ce qui ne le regle pas », site lu : 20 px dessines) ; un poste replie de la
     carte repond sur toute sa carte, jusqu'au texte quand il est ouvert. */
  .fix.is-no > summary, .site-head, .o-fold > summary { position: relative; }
  .fix.is-no > summary::after, .site-head::after { content: ""; position: absolute; inset: -13px 0; }
  .o-fold > summary::after { content: ""; position: absolute; inset: -14px -16px -10px; }
  .fn-row { grid-template-columns: 1fr; gap: 8px; margin-top: 14px; }
  .fn-step { grid-template-columns: 1fr auto; align-items: baseline; column-gap: 12px; row-gap: 2px; padding: 14px 16px 14px; }
  .fn-step .band { grid-column: 2; grid-row: 1; align-self: center; margin: 0; }
  .fn-step .fn-v { grid-column: 1; grid-row: 1; font-size: 21px; }
  .fn-step .fn-l, .fn-step .fn-flag { grid-column: 1 / -1; }
  .fn-step + .fn-step::before { left: 24px; top: -8px; width: 1px; height: 8px; }
  .band i { width: 14px; }
  .fix p, .acts p, .qs p { font-size: 17px; }
  .acts li { padding: 16px 0 18px; gap: 8px; }
  .acts .n { font-size: 30px; }
  .qs li { grid-template-columns: 32px 1fr; padding: 14px 0; }
  .call-grid { gap: 32px; }

  .org { margin-top: 24px; }
  .org-you { justify-content: flex-start; }
  .org-you .c { width: 52px; height: 52px; font-size: 15px; }
  .org-you .c::after { display: none; }
  .org-cols { grid-template-columns: 1fr; gap: 10px; margin: 0 0 0 26px; padding: 18px 0 0 18px; border-left: 1px solid var(--graphite-nuit); }
  .org-cols::before { display: none; }
  .org-card { padding: 14px 16px 14px; gap: 6px; }
  .org-card::before { left: -19px; top: 26px; width: 18px; height: 1px; }
  /* Le rail s'arrete au dernier poste. */
  .org-card:last-child::after { content: ""; position: absolute; left: -20px; top: 27px; bottom: -2px; width: 3px; background: var(--nuit); }
  .o-l { font-size: 18px; }
  .o-t { font-size: 16px; }
  .assist-card { gap: 22px; }
}

/* ---------- L'index des fixtures (brouillon seulement) ---------- */
.fx-index { padding-top: 64px; padding-bottom: 96px; }
.fx-index h1 { margin-top: 16px; font-size: clamp(32px, 4vw, 56px); line-height: 1.05; letter-spacing: -0.025em; }
.fx-list { margin-top: 36px; border-top: 1px solid var(--filet); }
.fx-list a { display: grid; gap: 4px; padding: 14px 0; border-bottom: 1px solid var(--filet); text-decoration: none; }
@media (min-width: 900px) { .fx-list a { grid-template-columns: 320px 1fr; gap: 24px; } }
.fx-list a:hover .fx-n { text-decoration: underline; }
.fx-n { font-weight: 500; }
.fx-l { color: var(--graphite); }
/* La liste des deux langues : un lien vers chacune, puis une liste par langue. */
.fx-langs { margin-top: 20px; display: flex; gap: 24px; font-weight: 500; }
.fx-lang { margin-top: 56px; }
.fx-h { font-size: clamp(24px, 2.4vw, 32px); line-height: 1.2; letter-spacing: -0.015em; }

@media (prefers-reduced-motion: reduce) { * { transition-duration: 1ms !important; animation: none !important; } }