/* BEC — site public. Système visuel : jetons, typographie, fragments, sections. */

@font-face {
  font-family: "Public Sans";
  src: url("../fonts/public-sans.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

:root {
  /* Marque */
  --white: #FFFFFF;
  --canvas: #F5F6F8;
  --ink: #111318;
  --ink-soft: #5F6670;
  --ink-faint: #666D78;
  --border: #E1E4E8;
  --border-strong: #CED3D9;
  --cobalt: #3157E5;
  --cobalt-strong: #2446C9;
  --cobalt-soft: #EEF1FF;
  --cobalt-line: #C9D3FB;
  --night: #111318;

  /* Couleurs réelles du produit (questionnaire et cartographie) */
  --p-accent: #4966D8;
  --p-accent-soft: #EEF1FD;
  --p-accent-line: #C7D1F6;
  --p-positive: #0F7A52;
  --p-partial: #C17F00;
  --p-partial-text: #946000;
  --p-negative: #C23B2E;
  --p-uncorroborated: #7A6FA6;
  --p-pending: #2F7FA6;
  --p-positive-tint: #D9EAE3;
  --p-partial-tint: #F5EAD6;
  --p-negative-tint: #F5E0DE;
  --p-quote-line: #C7CCD2;

  --font: "Public Sans", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --mono: ui-monospace, "SF Mono", SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;

  --container: 1296px;
  --gutter: clamp(20px, 5vw, 72px);
  --header-h: 72px;
  --section-y: clamp(88px, 10vw, 152px);

  --r-lg: 18px;
  --r-md: 14px;
  --r-sm: 10px;
  --r-xs: 8px;

  --shadow-frag: 0 1px 1px rgba(17, 19, 24, 0.03), 0 2px 5px -1px rgba(17, 19, 24, 0.05), 0 16px 36px -14px rgba(17, 19, 24, 0.14);
  --shadow-frag-lift: 0 1px 1px rgba(17, 19, 24, 0.03), 0 4px 10px -2px rgba(17, 19, 24, 0.06), 0 22px 44px -16px rgba(17, 19, 24, 0.18);
  --shadow-frame: 0 1px 2px rgba(17, 19, 24, 0.04), 0 24px 64px -24px rgba(17, 19, 24, 0.22);

  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
  --t-micro: 160ms;
}

/* ---------------------------------------------------------------- Base */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-padding-top: calc(var(--header-h) + 16px); }
/* sous le pied de page (rebond de défilement de Safari), le fond reste celui du pied de page et
   non une bande blanche ; le contenu garde le fond blanc du body */
html { background: var(--night); overscroll-behavior-y: none; }
body {
  margin: 0;
  background: var(--white);
  color: var(--ink);
  font-family: var(--font);
  font-size: 16px;
  line-height: 1.6;
  font-feature-settings: "kern" 1;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  overflow-x: clip;
}
img, svg { display: block; max-width: 100%; }
h1, h2, h3, h4, p, figure, blockquote, dl, dd, ol, ul { margin: 0; }
ol, ul { padding: 0; list-style: none; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
:focus-visible { outline: 2px solid var(--cobalt); outline-offset: 3px; border-radius: 4px; }
::selection { background: #D5DDFC; color: var(--ink); }

.skip-link {
  position: fixed; left: 16px; top: -64px; z-index: 100;
  padding: 10px 16px; border-radius: var(--r-xs);
  background: var(--ink); color: var(--white); font-size: 14px; font-weight: 600;
  transition: top var(--t-micro) var(--ease);
}
.skip-link:focus { top: 12px; }
.visually-hidden {
  position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

.container { width: 100%; max-width: calc(var(--container) + 2 * var(--gutter)); margin-inline: auto; padding-inline: var(--gutter); }
.section { position: relative; padding-block: var(--section-y); }
.section--canvas { background: var(--canvas); }
.section--cobalt { background: var(--cobalt); color: var(--white); }
.section--night { background: var(--night); color: var(--white); }

/* ---------------------------------------------------------- Typographie */
.display {
  font-size: clamp(2.7rem, 1.35rem + 3.9vw, 4.75rem);
  line-height: 1.01;
  letter-spacing: -0.045em;
  font-weight: 560;
  text-wrap: balance;
}
.h2 {
  font-size: clamp(2.05rem, 1.25rem + 2.35vw, 3.35rem);
  line-height: 1.05;
  letter-spacing: -0.038em;
  font-weight: 560;
  text-wrap: balance;
}
.h3 { font-size: 1.375rem; line-height: 1.2; letter-spacing: -0.02em; font-weight: 600; }
.eyebrow {
  display: inline-flex; align-items: center; gap: 10px;
  font-size: 0.75rem; line-height: 1.3; letter-spacing: 0.14em; text-transform: uppercase;
  font-weight: 650; color: var(--cobalt);
}
.eyebrow::before { content: ""; width: 18px; height: 1.5px; background: currentColor; border-radius: 2px; }
.lede { font-size: clamp(1.0625rem, 0.98rem + 0.3vw, 1.1875rem); line-height: 1.58; color: var(--ink-soft); letter-spacing: -0.006em; text-wrap: pretty; }
.body-l { font-size: 1.0625rem; line-height: 1.62; color: var(--ink-soft); text-wrap: pretty; }
.mono { font-family: var(--mono); font-size: 0.75rem; letter-spacing: 0.01em; }
.section--cobalt .eyebrow, .section--night .eyebrow { color: var(--white); }
.section--cobalt .lede, .section--cobalt .body-l { color: #E1E7FD; }
.section--night .lede, .section--night .body-l { color: #B9BFC8; }

.section-head { display: grid; gap: 22px; max-width: 760px; }
.section-head .h2 { margin-top: 2px; }

/* ------------------------------------------------------------- Boutons */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 48px; padding: 13px 20px; border-radius: 11px;
  font-size: 15px; font-weight: 600; letter-spacing: -0.005em; line-height: 1.2;
  transition: background-color var(--t-micro) var(--ease), box-shadow var(--t-micro) var(--ease), color var(--t-micro) var(--ease), transform var(--t-micro) var(--ease);
  white-space: nowrap;
}
.btn--primary {
  background: var(--cobalt); color: var(--white);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.16), 0 1px 2px rgba(17, 19, 24, 0.14), 0 6px 16px -8px rgba(49, 87, 229, 0.55);
}
.btn--primary:hover { background: var(--cobalt-strong); }
.btn--primary:active { transform: translateY(1px); }
.btn--ghost { color: var(--ink); background: var(--white); box-shadow: inset 0 0 0 1px var(--border-strong); }
.btn--ghost:hover { box-shadow: inset 0 0 0 1px var(--ink-soft); }
.btn--small { min-height: 38px; padding: 9px 14px; border-radius: 9px; font-size: 14px; }
.btn .arrow { transition: transform var(--t-micro) var(--ease); }
.btn:hover .arrow, .link-arrow:hover .arrow { transform: translateX(3px); }
.link-arrow {
  display: inline-flex; align-items: center; gap: 8px; min-height: 44px;
  font-size: 15px; font-weight: 600; color: var(--ink);
}
.link-arrow:hover { color: var(--cobalt); }
/* renvoi discret d'une page à l'autre (Produit ↔ Méthode) */
.link-arrow--quiet { min-height: 36px; font-size: 14px; color: var(--ink-soft); }
.link-arrow--quiet:hover { color: var(--cobalt); }
.section--night .link-arrow, .section--cobalt .link-arrow { color: var(--white); }
.section--night .link-arrow:hover { color: #C9D3FB; }
.arrow { display: inline-block; }

/* -------------------------------------------------------------- En-tête */
.site-header {
  position: fixed; inset: 0 0 auto 0; z-index: 50; height: var(--header-h);
  background: rgba(245, 246, 248, 0);
  transition: background-color 200ms var(--ease), box-shadow 200ms var(--ease);
}
.site-header.is-solid, .site-header.menu-open {
  background: rgba(255, 255, 255, 0.92);
  -webkit-backdrop-filter: saturate(160%) blur(14px);
  backdrop-filter: saturate(160%) blur(14px);
  box-shadow: 0 1px 0 var(--border);
}
.site-header .container { height: 100%; display: flex; align-items: center; gap: 40px; }
.brand { display: inline-flex; align-items: center; color: var(--ink); flex-shrink: 0; border-radius: 6px; }
.brand svg { height: 25px; width: auto; }
.site-nav { display: flex; align-items: center; gap: 4px; margin-right: auto; }
.site-nav a {
  display: inline-flex; align-items: center; min-height: 40px; padding: 0 12px; border-radius: 8px;
  font-size: 15px; font-weight: 500; color: var(--ink-soft);
  transition: color var(--t-micro) var(--ease), background-color var(--t-micro) var(--ease);
}
.site-nav a:hover { color: var(--ink); background: rgba(17, 19, 24, 0.04); }
.site-nav a[aria-current="page"] { color: var(--ink); }
.header-cta { margin-left: auto; }
.menu-toggle { display: none; }
.mobile-menu { display: none; }

/* ----------------------------------------------------- Fragments : base */
.frag {
  position: relative;
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  box-shadow: var(--shadow-frag);
  font-size: 14px;
  line-height: 1.5;
  color: var(--ink);
}
.frag--lg { border-radius: var(--r-lg); }
.frag__head {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 12px 16px 0;
  font-size: 10.5px; letter-spacing: 0.12em; text-transform: uppercase; font-weight: 650; color: var(--ink-faint);
}
.frag__head .mono { font-size: 11px; letter-spacing: 0.02em; text-transform: none; font-weight: 500; color: var(--ink-faint); }
.frag__body { padding: 10px 16px 16px; }
.frag__foot {
  display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px;
  padding: 10px 16px 12px; border-top: 1px solid var(--border);
  font-size: 12px; color: var(--ink-faint);
}
.frag__foot .mono { font-size: 10.5px; overflow-wrap: anywhere; }

.domain-code { font-family: var(--mono); font-size: 12px; font-weight: 600; color: var(--p-accent); letter-spacing: 0.01em; }
.domain-line { font-family: var(--mono); font-size: 11.5px; font-weight: 600; color: var(--p-accent); letter-spacing: 0; line-height: 1.45; }

.state { display: inline-flex; align-items: center; gap: 7px; font-size: 13px; font-weight: 600; line-height: 1.3; white-space: nowrap; }
.state::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: currentColor; flex-shrink: 0; }
.state--demonstrated { color: var(--p-positive); }
.state--partially_demonstrated { color: var(--p-partial-text); }
.state--partially_demonstrated::before { background: var(--p-partial); }
.state--not_demonstrated { color: var(--p-negative); }
.state--uncorroborated { color: var(--p-uncorroborated); }
.state--pending_review { color: var(--p-pending); }
.state-note { font-size: 12px; color: var(--ink-faint); font-weight: 400; }

/* barres segmentées (grammaire de la cartographie) */
.segbar { display: flex; gap: 2px; height: 5px; width: 100%; }
.segbar i { position: relative; display: block; height: 100%; flex: var(--n) 1 0; }
.segbar i::before { content: ""; position: absolute; inset: -7px 0; }
.segbar i[data-s="demonstrated"] { background: var(--p-positive); }
.segbar i[data-s="partially_demonstrated"] { background: var(--p-partial); }
.segbar i[data-s="not_demonstrated"] { background: var(--p-negative); }
.segbar i[data-s="uncorroborated"] { background: var(--p-uncorroborated); }
.segbar i[data-s="pending_review"] { background: var(--p-pending); }
.segbar--lg { height: 8px; }

.legend { display: flex; flex-wrap: wrap; gap: 6px 16px; font-size: 12px; color: var(--ink-soft); }
.legend span { display: inline-flex; align-items: center; gap: 6px; }
.legend span::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--c); }

/* A. Data tile */
.t-data__rows { display: grid; gap: 12px; }
.t-data__row { display: grid; grid-template-columns: 34px 1fr auto; column-gap: 10px; row-gap: 6px; align-items: baseline; }
.t-data__row .label { font-size: 13px; line-height: 1.35; color: var(--ink); min-width: 0; }
.t-data__row .count { font-family: var(--mono); font-size: 11px; color: var(--ink-faint); }
.t-data__row .segbar { grid-column: 2 / -1; }
.t-data .legend { margin-top: 14px; }

/* B. Legal tile */
.t-legal .nature { color: var(--ink-soft); }
.t-legal__cite { font-size: 17px; line-height: 1.3; font-weight: 650; letter-spacing: -0.012em; }
.t-legal__title { margin-top: 4px; font-size: 14px; line-height: 1.45; color: var(--ink-soft); }
.t-legal__links { display: flex; flex-wrap: wrap; gap: 8px 14px; align-items: center; margin-top: 12px; }
.verified {
  display: inline-flex; align-items: center; gap: 6px; min-height: 28px;
  font-size: 12.5px; font-weight: 600; color: var(--cobalt);
  border-radius: 6px;
}
.verified:hover { text-decoration: underline; text-underline-offset: 3px; }
.verified svg { width: 11px; height: 11px; }
.tag {
  display: inline-flex; align-items: center; min-height: 22px; padding: 2px 8px; border-radius: 6px;
  font-size: 11.5px; font-weight: 550; line-height: 1.3; color: var(--ink-soft); background: var(--canvas); box-shadow: inset 0 0 0 1px var(--border);
}

/* C. Evidence tile */
.t-evidence__title { font-size: 15.5px; font-weight: 650; letter-spacing: -0.01em; line-height: 1.35; }
.t-evidence__meta { margin-top: 2px; font-size: 12.5px; color: var(--ink-faint); }
.quote {
  margin-top: 12px; padding: 2px 0 2px 14px; border-left: 1px solid var(--p-quote-line);
  font-size: 14.5px; line-height: 1.55; font-style: italic; color: var(--ink);
}
.quote .locator { display: block; margin-top: 8px; font-style: normal; font-family: var(--mono); font-size: 10.5px; color: var(--ink-faint); overflow-wrap: anywhere; }
mark, .mark {
  color: inherit; background-color: transparent;
  background-image: linear-gradient(var(--hl, #DCE4FF), var(--hl, #DCE4FF));
  background-repeat: no-repeat; background-size: 100% 100%;
  padding: 0.04em 0.12em; margin: 0 -0.12em; border-radius: 3px;
  -webkit-box-decoration-break: clone; box-decoration-break: clone;
}

/* D. Finding tile */
.t-finding__title { margin-top: 6px; font-size: 16.5px; line-height: 1.3; font-weight: 650; letter-spacing: -0.014em; }
.t-finding__state { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 12px; margin-top: 12px; }

/* E. Question tile (grammaire du questionnaire) */
.t-question__bar { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 18px 0; font-size: 12px; color: var(--ink-soft); }
.t-question__bar strong { font-weight: 600; color: var(--ink); }
.t-question__progress { margin: 10px 18px 0; height: 2px; background: var(--border); border-radius: 2px; overflow: hidden; }
.t-question__progress i { display: block; height: 100%; width: var(--w, 40%); background: linear-gradient(90deg, var(--p-positive) 0 18%, var(--p-accent) 18% 100%); }
.t-question__q { padding: 14px 18px 0; font-size: 19px; line-height: 1.28; letter-spacing: -0.02em; font-weight: 500; }
.term { text-decoration: underline dotted rgba(17, 19, 24, 0.45); text-decoration-thickness: 1px; text-underline-offset: 4px; }
.t-question__label { padding: 12px 18px 0; font-size: 12.5px; color: var(--ink-soft); }
.choices { display: grid; gap: 6px; padding: 10px 18px 18px; }
.choice {
  display: flex; align-items: flex-start; gap: 10px; padding: 9px 12px;
  border: 1px solid var(--border); border-radius: 10px; background: var(--white);
  font-size: 13.5px; line-height: 1.4;
}
.choice .box { flex-shrink: 0; width: 15px; height: 15px; margin-top: 2px; border-radius: 4px; border: 1.5px solid #B8BEC6; background: var(--white); }
.choice .box.radio { border-radius: 50%; }
.choice.is-checked { background: var(--p-accent-soft); border-color: var(--p-accent-line); }
.choice.is-checked .box { background: var(--p-accent); border-color: var(--p-accent); box-shadow: inset 0 0 0 2.5px var(--p-accent-soft); }
.choice.is-checked .box:not(.radio) { box-shadow: none; background: var(--p-accent) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2.5 6.2 5 8.6l4.6-5' fill='none' stroke='%23fff' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 11px no-repeat; }
.choices--fade { position: relative; max-height: var(--fade-h, 220px); overflow: hidden; -webkit-mask-image: linear-gradient(#000 70%, transparent); mask-image: linear-gradient(#000 70%, transparent); }
.field { display: grid; gap: 6px; padding: 12px 18px 0; }
.field__label { font-size: 12.5px; font-weight: 550; color: var(--ink-soft); }
.field__value { padding: 10px 12px; border: 1px solid var(--border-strong); border-radius: 9px; font-size: 14px; line-height: 1.45; background: var(--white); }
.field__help { font-size: 11.5px; color: var(--ink-faint); }

/* F. Context tile (panneau « Contexte de la question ») */
.t-context { padding: 18px 18px 16px; }
.t-context__title { font-size: 15px; font-weight: 600; letter-spacing: -0.01em; }
.t-context__sub { font-size: 12px; color: var(--ink-faint); margin-top: 2px; }
.ctx-block { padding: 14px 0 12px; border-top: 1px solid var(--border); }
.ctx-block:first-of-type { margin-top: 14px; }
.small-label { font-size: 10.5px; letter-spacing: 0.12em; text-transform: uppercase; font-weight: 650; color: var(--ink-faint); }
.ctx-block p:not(.small-label) { margin-top: 6px; font-size: 13.5px; line-height: 1.5; color: var(--ink); }
.trigger {
  padding: 13px 14px 13px 15px; border-radius: 8px; background: var(--p-accent-soft);
  box-shadow: inset 3px 0 0 var(--p-accent), inset 0 0 0 1px var(--p-accent-line);
}
.trigger .small-label { color: var(--p-accent); }
.trigger ul { display: grid; gap: 6px; margin-top: 8px; }
.trigger li { position: relative; padding-left: 14px; font-size: 13.5px; line-height: 1.5; }
.trigger li::before { content: ""; position: absolute; left: 2px; top: 0.62em; width: 4px; height: 4px; border-radius: 50%; background: var(--ink-soft); }

/* G. Declaration tile */
.t-decl__q { font-size: 13px; line-height: 1.45; color: var(--ink-soft); font-style: italic; }
.dl { display: grid; gap: 10px; margin-top: 12px; }
.dl div { display: grid; gap: 2px; }
.dl dt { font-size: 11.5px; color: var(--ink-faint); }
.dl dd { font-size: 14px; line-height: 1.45; font-weight: 500; }

/* H. Narrative fragment */
.t-narr__num { font-family: var(--mono); font-size: 11px; color: var(--ink-faint); }
.t-narr__title { margin-top: 6px; font-size: 16px; line-height: 1.3; font-weight: 650; letter-spacing: -0.012em; }
.t-narr__stats { margin-top: 4px; font-size: 12.5px; color: var(--ink-soft); }
.t-narr__text { margin-top: 10px; font-size: 13.5px; line-height: 1.55; color: var(--ink); }
.codes { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 12px; }
.codes span { font-family: var(--mono); font-size: 11px; font-weight: 600; color: var(--p-accent); padding: 3px 7px; border-radius: 6px; background: var(--p-accent-soft); }

/* ------------------------------------------------------------- 1. Hero */
.hero { position: relative; background: var(--canvas); padding-top: calc(var(--header-h) + clamp(20px, 2.6vw, 40px)); padding-bottom: clamp(56px, 6vw, 96px); overflow: clip; }
.hero__grid { display: grid; grid-template-columns: minmax(0, 0.82fr) minmax(0, 1.18fr); gap: clamp(32px, 3.6vw, 56px); align-items: center; }
.hero__copy { position: relative; z-index: 2; }
.hero .display { margin-top: 22px; font-size: clamp(2.7rem, 1rem + 3.9vw, 4.5rem); max-width: 7.2em; }
.hero .lede { margin-top: 24px; max-width: 25em; }
.hero__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 22px; margin-top: 34px; }
/* pour qui, puis le déroulé d'un dossier en trois temps */
.hero__for { margin-top: 14px; max-width: 30em; font-size: 15.5px; line-height: 1.55; font-weight: 500; color: var(--ink); text-wrap: pretty; }
.hero__steps { display: flex; flex-wrap: wrap; gap: 8px 22px; margin-top: 26px; font-size: 13.5px; line-height: 1.4; color: var(--ink-soft); }
.hero__steps li { display: inline-flex; align-items: baseline; gap: 7px; }
.hero__steps .mono { font-size: 11px; font-weight: 600; color: var(--cobalt); }
.home-define { margin-top: 24px; max-width: 36em; padding-left: 14px; border-left: 2px solid rgba(255, 255, 255, 0.5); font-size: 15px; line-height: 1.55; color: #E1E7FD; text-wrap: pretty; }
.home-define strong { color: var(--white); font-weight: 650; }
.hero__stage { display: grid; grid-template-columns: minmax(0, 0.44fr) minmax(0, 0.56fr); gap: 26px; align-items: start; }
.hero__col { display: grid; gap: 18px; align-content: start; }
.hero__col--b { padding-top: 58px; }
/* largeurs et décalages inégaux : une composition éditoriale, pas une grille de tableau de bord */
@media (min-width: 721px) {
  .hero__stage .t-domain { width: 82%; }
  .hero__stage .t-evidence { width: 92%; margin-left: 8%; }
  .hero__stage .t-legal { width: 86%; margin-left: 3%; }
  .hero__stage .t-finding { width: 66%; margin-left: auto; margin-right: 5%; }
}
/* écrans intermédiaires : plus de place pour les cartes, mêmes décalages en plus doux */
@media (min-width: 1101px) and (max-width: 1240px) {
  .hero__grid:has(> .hero__stage) { grid-template-columns: minmax(0, 0.74fr) minmax(0, 1.26fr); }
  .hero__stage .t-domain { width: 88%; }
  .hero__stage .t-evidence { width: 94%; margin-left: 6%; }
  .hero__stage .t-legal { width: 90%; margin-left: 2%; }
  .hero__stage .t-finding { width: 72%; margin-right: 4%; }
}
.hero .t-question .t-question__q { padding-bottom: 4px; }
.hero .t-legal .t-legal__cite { font-size: 16px; }
.hero__caption { margin-top: 44px; padding-top: 16px; border-top: 1px solid var(--border); font-size: 12.5px; line-height: 1.55; color: var(--ink-faint); max-width: 31em; }
.hero__caption strong { font-weight: 600; color: var(--ink-soft); }
.t-domain__label { font-size: 13.5px; line-height: 1.4; font-weight: 600; margin-bottom: 12px; }
.t-domain .frag__head .mono { color: var(--p-accent); font-weight: 600; }
.t-domain__counts { display: grid; gap: 4px; margin-top: 12px; }
.t-domain__counts li { display: flex; align-items: center; gap: 8px; font-size: 12.5px; color: var(--ink-soft); }
.t-domain__counts li::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--c); }
.t-domain__foot { margin-top: 10px; padding-top: 8px; border-top: 1px solid var(--border); font-family: var(--mono); font-size: 11px; color: var(--ink-faint); }

/* --------------------------------------------- En-têtes de section en deux colonnes */
.split-head { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr); gap: 24px clamp(40px, 6vw, 96px); align-items: end; }
.split-head .h2 { margin-top: 22px; max-width: 13em; }
.split-head__aside { display: grid; gap: 18px; padding-bottom: 8px; max-width: 34em; }
.states-inline { display: flex; flex-wrap: wrap; gap: 8px 20px; }
.states-inline .state { font-size: 13.5px; }

/* ------------------------------------------------------------ 2. Le problème */
.chain { position: relative; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 44px; margin-top: 64px; align-items: start; }
.chain__col { position: relative; }
.chain__label { display: flex; align-items: baseline; gap: 10px; margin-bottom: 14px; font-size: 12px; font-weight: 650; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink); }
.chain__label .mono { font-size: 12px; letter-spacing: 0; color: var(--cobalt); font-weight: 600; }
.chain__col + .chain__col::before {
  content: ""; position: absolute; left: -36px; top: 118px; width: 26px; height: 1.5px; background: var(--cobalt); opacity: 0.55;
}
.chain__col + .chain__col::after {
  content: ""; position: absolute; left: -16px; top: 114px; width: 8px; height: 8px;
  border-top: 1.5px solid var(--cobalt); border-right: 1.5px solid var(--cobalt); transform: rotate(45deg); opacity: 0.8;
}
.chain--short { margin-top: 52px; }
.chain__role { margin-top: 10px; font-size: 12.5px; line-height: 1.45; color: var(--ink-faint); }
.chain__role .mono { font-size: 11px; }
.chain__more { margin-top: 28px; }

/* ------------------------------------------------------ 3. Le produit (cobalt) */
/* le dossier entier d'un coup d'œil, puis les niveaux de lecture du livrable */
.reading { display: grid; grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); gap: 40px clamp(40px, 5vw, 80px); align-items: center; }
.home-product .reading { margin-top: 64px; }
.home-product .figures { margin-top: 0; }
.figures { display: grid; gap: 0; margin-top: 40px; }
.figures li { display: grid; grid-template-columns: 3rem minmax(0, 1fr); gap: 14px; align-items: baseline; padding: 14px 0; }
.figures b { font-size: 2.1rem; line-height: 1; font-weight: 560; letter-spacing: -0.04em; font-variant-numeric: tabular-nums; }
.figures span { font-size: 15px; line-height: 1.45; color: #E1E7FD; }
.figures .src { display: block; margin-top: 16px; font-size: 12.5px; color: #E1E7FD; }
.nowrap { white-space: nowrap; }
.reading__stage { display: grid; grid-template-columns: minmax(0, 1.45fr) minmax(0, 1fr); gap: 20px; align-items: start; }
/* les deux encadrés du produit ont la même hauteur : la matrice répartit ses lignes */
.home-product .reading__stage { align-items: stretch; }
.home-product .t-matrix { display: flex; flex-direction: column; }
.home-product .t-matrix table { flex: 1 1 auto; }
.t-lowest { padding-bottom: 6px; }
.t-domains__total { padding: 12px 18px 16px; border-bottom: 1px solid var(--border); }
.t-domains__total .legend { margin-bottom: 10px; }
.t-domains__total .legend b { color: var(--ink); font-weight: 650; margin-right: 2px; }
.t-lowest__title { padding: 14px 18px 2px; font-size: 13.5px; font-weight: 650; letter-spacing: -0.005em; }
.t-lowest ol { padding: 4px 18px 14px; }
.t-lowest li { padding: 10px 0 2px; }
.t-lowest li .row { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; }
.t-lowest li .label { margin: 2px 0 8px; font-size: 13px; line-height: 1.35; color: var(--ink); }
.counts { display: inline-flex; gap: 10px; font-family: var(--mono); font-size: 11px; color: var(--ink-faint); }
.counts i { font-style: normal; display: inline-flex; align-items: center; gap: 4px; }
.counts i::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--c); }
.t-matrix table { width: 100%; border-collapse: separate; border-spacing: 2px; padding: 6px 12px 12px; }
.t-matrix th { font-size: 10px; font-weight: 500; color: var(--ink-faint); text-align: center; padding: 0 0 4px; }
.t-matrix th:first-child { text-align: left; }
.t-matrix td { height: 17px; font-size: 10.5px; text-align: center; font-variant-numeric: tabular-nums; color: var(--ink); line-height: 17px; }
.t-matrix td:first-child { text-align: left; }
.t-matrix td.c-d { background: var(--p-positive-tint); }
.t-matrix td.c-p { background: var(--p-partial-tint); }
.t-matrix td.c-n { background: var(--p-negative-tint); }

/* fond « papier » (page Produit) */
.section--paper { background: #F3F4F1; }

/* niveaux de lecture : onglets posés sur les onglets réels du livrable */
.carto-figure { position: relative; margin-top: 72px; }
.carto-figure__title { max-width: 1120px; margin: 0 auto 4px; font-size: 12px; letter-spacing: 0.14em; text-transform: uppercase; font-weight: 650; color: #E1E7FD; }
.carto-stage { position: relative; max-width: 1120px; margin-inline: auto; padding-top: 88px; container-type: inline-size; }
.carto-tabs { position: absolute; inset: 0 0 auto 0; height: 88px; z-index: 4; }
.carto-tab { position: absolute; left: var(--x); bottom: 18px; translate: -50% 0; display: grid; justify-items: center; gap: 4px; white-space: nowrap; border-radius: 12px; }
.carto-tab span {
  display: inline-flex; align-items: center; min-height: 32px; padding: 4px 14px; border-radius: 999px;
  background: var(--white); color: var(--ink); font-size: 13.5px; font-weight: 600;
  box-shadow: inset 0 0 0 1px var(--border-strong), 0 2px 6px -3px rgba(17, 19, 24, 0.12);
  transition: scale 180ms var(--ease), background-color 180ms var(--ease), color 180ms var(--ease), box-shadow 180ms var(--ease);
}
.carto-tab small { font-size: 11.5px; font-weight: 500; color: var(--ink-faint); transition: color 180ms var(--ease); }
/* ligne de rappel et point : de la lecture à l'onglet réel du livrable */
.carto-tab::after { content: ""; position: absolute; left: 50%; top: calc(100% + 4px); width: 1px; height: calc(7px + 6.8cqw); background: linear-gradient(var(--cobalt), rgba(49, 87, 229, 0.7)); opacity: 0.6; transition: opacity 180ms var(--ease); }
.carto-tab::before { content: ""; position: absolute; left: calc(50% - 3.5px); top: calc(100% + 11px + 6.8cqw); width: 7px; height: 7px; border-radius: 50%; background: var(--white); box-shadow: inset 0 0 0 1.5px var(--cobalt); opacity: 0.6; transition: scale 180ms var(--ease), opacity 180ms var(--ease), background-color 180ms var(--ease); }
.carto-tab[aria-selected="true"] span { background: var(--cobalt); color: var(--white); box-shadow: 0 8px 18px -10px rgba(49, 87, 229, 0.75); }
.carto-tab[aria-selected="true"] small { color: var(--cobalt); font-weight: 600; }
.carto-tab[aria-selected="true"]::after { opacity: 1; }
.carto-tab[aria-selected="true"]::before { background: var(--cobalt); box-shadow: 0 0 0 3px rgba(49, 87, 229, 0.18); opacity: 1; }
.carto-tab:focus-visible { outline: none; }
.carto-tab:focus-visible span { outline: 2px solid var(--cobalt); outline-offset: 3px; }
.carto-frame { position: relative; max-width: 1120px; margin-inline: auto; border-radius: var(--r-lg); overflow: hidden; border: 1px solid var(--border); box-shadow: var(--shadow-frame); background: #F7F8FA; }
.carto-frame::after { content: ""; position: absolute; z-index: 3; inset: auto 0 0 0; height: 120px; background: linear-gradient(rgba(247, 248, 250, 0), #F7F8FA 88%); pointer-events: none; }
.carto-frame__viewport { position: relative; display: grid; max-height: min(980px, 88vw); overflow: hidden; }
/* fondu enchaîné : la nouvelle vue passe au-dessus, l'ancienne reste visible 200 ms dessous */
.carto-view { grid-area: 1 / 1; opacity: 0; visibility: hidden; transition: opacity 0s linear 220ms, visibility 0s linear 220ms; }
.carto-view.is-active { z-index: 1; opacity: 1; visibility: visible; transition: opacity 200ms var(--ease), visibility 0s; }
.carto-view:focus-visible { outline: 2px solid var(--cobalt); outline-offset: -3px; border-radius: var(--r-lg); }
.carto-view img { width: 100%; height: auto; }
.carto-hot { position: absolute; z-index: 2; inset: 0 0 auto 0; pointer-events: none; }
/* sous les traits (en-tête et barre d'onglets du livrable) : capture légèrement atténuée */
@media (min-width: 1101px) {
  .carto-hot::before { content: ""; position: absolute; inset: 0 0 auto 0; height: var(--band, 0); background: rgba(255, 255, 255, 0.42); }
}
.carto-hot span { position: absolute; border-radius: 6px; pointer-events: auto; cursor: pointer; transition: background-color 160ms var(--ease), box-shadow 160ms var(--ease); }
.carto-hot span:hover, .carto-hot span.is-hot { background: rgba(49, 87, 229, 0.08); box-shadow: inset 0 0 0 1px rgba(49, 87, 229, 0.3); }
.carto-caption { max-width: 1120px; margin: 18px auto 0; display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px 24px; font-size: 12.5px; color: var(--ink-faint); }
/* sur le bleu de la section produit : onglets clairs, vue plus courte */
.home-product .carto-tab span { background: rgba(255, 255, 255, 0.12); color: var(--white); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.38); }
.home-product .carto-tab small { color: #C9D3FB; }
.home-product .carto-tab[aria-selected="true"] span { background: var(--white); color: var(--cobalt); box-shadow: 0 10px 22px -12px rgba(0, 0, 0, 0.45); }
.home-product .carto-tab[aria-selected="true"] small { color: var(--white); }
/* trait de rappel : blanc sur le bleu, puis bleu sur l'en-tête blanc de la capture (14 px sous le départ du trait) ;
   les points restent ceux de la version claire, posés sur l'en-tête blanc */
.home-product .carto-tab::after { width: 1.5px; background: linear-gradient(var(--white) 0 14px, var(--cobalt) 14px 100%); }
.home-product .carto-tab:focus-visible span { outline-color: var(--white); }
.home-product .carto-frame { border-color: rgba(255, 255, 255, 0.3); box-shadow: 0 30px 70px -30px rgba(10, 20, 70, 0.6); }
/* vue recadrée au-dessus des repères chiffrés du livrable (comme le héros de Produit) */
.home-product .carto-frame__viewport { aspect-ratio: 1200 / 520; max-height: none; }
.home-product .carto-caption { color: #C9D3FB; }

/* ------------------------------------------------------------ 4. La méthode */
.home-method { padding-block: clamp(72px, 8vw, 128px); }
.home-frise { position: relative; display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); margin-top: 56px; }
.home-frise::before { content: ""; position: absolute; left: 5px; right: 0; top: 5px; height: 1.5px; background: linear-gradient(90deg, var(--cobalt), var(--cobalt-line)); transform-origin: left center; }
.js .home-frise::before { transform: scaleX(0); transition: transform 1200ms var(--ease) 100ms; }
.js .home-frise.is-in::before { transform: none; }
.home-frise li { position: relative; }
.home-frise a { position: relative; display: grid; gap: 8px; padding: 30px 16px 6px 0; font-size: clamp(1.15rem, 0.9rem + 0.7vw, 1.5rem); line-height: 1.2; font-weight: 600; letter-spacing: -0.022em; color: var(--ink); border-radius: 8px; transition: color 180ms var(--ease); }
.home-frise a::before { content: ""; position: absolute; left: 0; top: 0; width: 12px; height: 12px; border-radius: 50%; background: var(--white); box-shadow: inset 0 0 0 1.5px var(--cobalt); transition: background-color 180ms var(--ease), box-shadow 180ms var(--ease); }
.home-frise .mono { font-size: 12px; letter-spacing: 0; font-weight: 600; color: var(--cobalt); }
.home-frise a:hover, .home-frise a:focus-visible { color: var(--cobalt); }
.home-frise a:hover::before, .home-frise a:focus-visible::before { background: var(--cobalt); box-shadow: 0 0 0 4px var(--cobalt-soft); }
.home-frise a:focus-visible { outline: none; }

/* ------------------------------------------------------- 8. Mise à l'épreuve */
.proof-tabs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin-top: 56px; }
.proof-tab {
  display: grid; gap: 6px; text-align: left; padding: 18px 20px; min-height: 96px;
  border-radius: var(--r-md); background: var(--white); box-shadow: inset 0 0 0 1px var(--border);
  transition: box-shadow var(--t-micro) var(--ease), background-color var(--t-micro) var(--ease), transform var(--t-micro) var(--ease);
}
.proof-tab .mono { color: var(--ink-faint); }
.proof-tab strong { font-size: 17px; line-height: 1.3; font-weight: 600; letter-spacing: -0.015em; }
.proof-tab:hover { box-shadow: inset 0 0 0 1px var(--border-strong), var(--shadow-frag); }
.proof-tab[aria-selected="true"] { background: var(--white); box-shadow: inset 0 0 0 1.5px var(--cobalt), 0 8px 24px -14px rgba(49, 87, 229, 0.45); }
.proof-tab[aria-selected="true"] .mono { color: var(--cobalt); }
.proof-panel { margin-top: 16px; }
.proof-panel[hidden] { display: none; }
.proof-panel.is-entering { animation: panel-in 200ms var(--ease) both; }
@keyframes panel-in { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }
.proof-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 0.92fr); gap: 0; background: var(--white); border: 1px solid var(--border); border-radius: var(--r-lg); box-shadow: var(--shadow-frag); overflow: hidden; }
.proof-col { padding: 22px 22px 24px; }
.proof-col + .proof-col { border-left: 1px solid var(--border); }
.proof-col--seek { background: #FAFBFF; }
.proof-col h3 { display: flex; align-items: center; gap: 8px; font-size: 11px; letter-spacing: 0.13em; text-transform: uppercase; font-weight: 700; color: var(--ink); }
.proof-col h3::before { content: ""; width: 8px; height: 8px; border-radius: 2px; background: var(--c, var(--ink)); }
.proof-col--ok { --c: var(--p-positive); }
.proof-col--open { --c: var(--p-partial); }
.proof-col--seek { --c: var(--cobalt); }
.proof-item { padding: 16px 0; border-bottom: 1px solid var(--border); }
.proof-item:last-child { border-bottom: 0; padding-bottom: 0; }
.proof-item .row { display: flex; flex-wrap: wrap; gap: 4px 10px; align-items: center; }
.proof-item .row .mono { color: var(--ink-faint); }
.proof-item .title { margin-top: 6px; font-size: 14.5px; line-height: 1.35; font-weight: 600; letter-spacing: -0.01em; }
.proof-item .quote { margin-top: 8px; font-size: 13.5px; }
.proof-item p.note { margin-top: 6px; font-size: 13px; line-height: 1.5; color: var(--ink-soft); }
.tag--mono { font-family: var(--mono); font-size: 10.5px; min-height: 20px; padding: 1px 6px; margin-left: 2px; }
.proof-foot { margin-top: 14px; font-size: 12.5px; color: var(--ink-faint); }

/* pastilles de statut (page Produit) */
.status-pill { display: inline-flex; align-items: center; min-height: 26px; padding: 4px 10px; border-radius: 999px; font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; font-weight: 700; white-space: nowrap; }
.status-pill--live { background: var(--cobalt); color: var(--white); }
.status-pill--building { background: var(--cobalt-soft); color: var(--cobalt-strong); box-shadow: inset 0 0 0 1px var(--cobalt-line); }
.status-pill--direction { color: var(--ink-soft); box-shadow: inset 0 0 0 1px var(--border-strong); }

/* ----------------------------------------------------------- 10. Conversion */
.cta-grid { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr); gap: clamp(40px, 6vw, 96px); align-items: start; }
.section--night .h2 { color: var(--white); }
/* le prix se pose directement sur le fond sombre, sans encadré */
.price { padding-bottom: 6px; }
/* le bloc tarif se cale contre le bord droit du conteneur (texte aligné à gauche) */
.cta-grid .price { justify-self: end; }
/* sans prix : comment commencer (le prix vit sur la page Tarifs) */
.cta-next { justify-self: end; max-width: 30em; padding-bottom: 6px; }
.cta-next__label { font-size: 12px; letter-spacing: 0.14em; text-transform: uppercase; font-weight: 650; color: #B9BFC8; }
.cta-next__text { margin-top: 12px; font-size: clamp(1.0625rem, 1rem + 0.3vw, 1.25rem); line-height: 1.5; color: #E6E9EE; text-wrap: pretty; }
.price__label { font-size: 12px; letter-spacing: 0.14em; text-transform: uppercase; font-weight: 650; color: #B9BFC8; }
.price__amount { margin-top: 10px; font-size: clamp(2.6rem, 1.8rem + 2vw, 3.5rem); line-height: 1; font-weight: 560; letter-spacing: -0.045em; font-variant-numeric: tabular-nums; }
.price__amount small { font-size: 0.42em; letter-spacing: 0; font-weight: 600; color: #B9BFC8; margin-left: 6px; }
.price__note { margin-top: 10px; font-size: 13px; color: #B9BFC8; }
.price__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 22px; margin-top: 26px; }
.legal-line { margin-top: 64px; padding-top: 22px; border-top: 1px solid rgba(255, 255, 255, 0.12); font-size: 13px; line-height: 1.6; color: #9AA1AB; max-width: 820px; }

/* --------------------------------------------------------------- Pied */
.site-footer { background: var(--night); color: #B9BFC8; padding: clamp(48px, 5vw, 72px) 0 36px; }
/* après un appel final sombre, le pied de page prolonge la section : pas d'espace en plus */
main:has(> .section--night:last-child) + .site-footer { padding-top: 0; }
.site-footer .container { display: grid; gap: 28px; }
.footer-top { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 24px 48px; padding-top: 8px; }
.footer-brand { display: grid; gap: 10px; color: var(--white); }
.footer-brand svg { height: 24px; width: auto; }
.footer-brand p { font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase; font-weight: 650; color: #B9BFC8; }
.footer-nav { display: flex; flex-wrap: wrap; gap: 4px 8px; }
.footer-nav a { display: inline-flex; align-items: center; min-height: 40px; padding: 0 10px; border-radius: 8px; font-size: 14px; color: #D5D9DF; }
.footer-nav a:hover { color: var(--white); background: rgba(255, 255, 255, 0.06); }
/* lien secondaire (À propos) : hors navigation principale, plus discret */
.footer-nav .footer-nav__quiet { color: #9AA1AB; }
.footer-meta { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px 32px; padding-top: 20px; border-top: 1px solid rgba(255, 255, 255, 0.1); font-size: 12.5px; line-height: 1.55; color: #9AA1AB; }
.footer-meta p { max-width: 62em; }

/* --------------------------------------------------------------- Survol */
/* site.js pose .lift sur les seuls encadrés vitrines et éléments cliquables, et calcule --lift
   pour qu'ils grandissent d'une dizaine de pixels. Souris ou pavé tactile seulement ; aucun
   agrandissement en mouvement réduit. Ailleurs, le survol n'agrandit que ce qui affiche une
   information (segments, cases, points avec leur valeur). */
@media (hover: hover) and (pointer: fine) {
  .lift {
    transition: scale 180ms var(--ease), box-shadow 180ms var(--ease), border-color 180ms var(--ease),
      background-color 180ms var(--ease), color 180ms var(--ease), opacity 180ms var(--ease), z-index 0s linear 180ms;
  }
  .lift:hover { scale: var(--lift, 1.02); z-index: 6; transition-delay: 0s; }
  .frag.lift:hover { border-color: var(--border-strong); box-shadow: var(--shadow-frag-lift); }

  /* visualisations : le segment ou la case survolés s'agrandissent, le reste s'efface */
  .segbar i { transition: scale 160ms var(--ease), opacity 160ms var(--ease); }
  .segbar:hover i { opacity: 0.35; }
  .segbar:hover i:hover { opacity: 1; scale: 1 1.9; }
  .t-matrix td { position: relative; border-radius: 2px; transition: scale 160ms var(--ease), background-color 160ms var(--ease), color 160ms var(--ease), box-shadow 160ms var(--ease); }
  .t-matrix td:not(:first-child):hover { z-index: 2; scale: 1.4; font-weight: 700; box-shadow: 0 0 0 1.5px var(--white), 0 6px 14px -6px rgba(17, 19, 24, 0.45); }
  .t-matrix td.c-d:hover { background: var(--p-positive); color: var(--white); }
  .t-matrix td.c-p:hover { background: var(--p-partial); color: var(--ink); }
  .t-matrix td.c-n:hover { background: var(--p-negative); color: var(--white); }
  .t-matrix tr:hover td:first-child { color: var(--cobalt); }
  .t-matrix:has(td.c-d:hover) th.h-d, .t-matrix:has(td.c-p:hover) th.h-p, .t-matrix:has(td.c-n:hover) th.h-n { color: var(--ink); font-weight: 650; }

  /* cartographie : la lecture et l'onglet réel s'éclairent ensemble */
  .carto-tab:hover span, .carto-tab.is-hot span { scale: 1.06; }
  .carto-tab:not([aria-selected="true"]):hover span, .carto-tab.is-hot:not([aria-selected="true"]) span { color: var(--cobalt); box-shadow: inset 0 0 0 1px var(--cobalt-line), 0 6px 14px -8px rgba(49, 87, 229, 0.45); }
  .carto-tab:hover::after, .carto-tab.is-hot::after { opacity: 1; }
  .carto-tab:hover::before, .carto-tab.is-hot::before { opacity: 1; scale: 1.4; }
}

/* infobulle des visualisations (valeurs réelles, déjà lisibles autrement) */
.tip {
  position: fixed; z-index: 60; left: 0; top: 0; width: max-content; max-width: 360px; padding: 7px 10px; border-radius: 8px;
  background: var(--ink); color: var(--white); font-size: 12px; line-height: 1.45; font-weight: 500; white-space: pre-line; text-align: center;
  box-shadow: 0 10px 24px -10px rgba(17, 19, 24, 0.55);
  translate: -50% calc(-100% - 12px); opacity: 0; pointer-events: none; transition: opacity 120ms var(--ease);
}
.tip::after { content: ""; position: absolute; top: 100%; left: calc(50% + var(--tip-dx, 0px) - 6px); border: 6px solid transparent; border-top-color: var(--ink); }
.tip.is-on { opacity: 1; }

/* ------------------------------------------------------------- Mouvement */
.js [data-reveal] .rv { opacity: 0; transform: translateY(12px); transition: opacity 520ms var(--ease), transform 520ms var(--ease); transition-delay: calc(var(--i, 0) * 140ms); }
.js [data-reveal].is-in .rv { opacity: 1; transform: none; }
.js [data-reveal="bars"] .segbar i { transform-origin: left center; transform: scaleX(0); transition: transform 600ms var(--ease) calc(var(--i, 0) * 18ms), scale 160ms var(--ease), opacity 160ms var(--ease); }
.js [data-reveal="bars"].is-in .segbar i { transform: none; }
.js [data-reveal="highlight"] mark { background-size: 0% 100%; transition: background-size 640ms var(--ease) 180ms; }
.js [data-reveal="highlight"].is-in mark { background-size: 100% 100%; }

@media (prefers-reduced-motion: reduce) {
  html:focus-within { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: 1ms !important; animation-iteration-count: 1 !important; transition-duration: 1ms !important; transition-delay: 0ms !important; scale: none !important; }
  .js [data-reveal] .rv, .js [data-reveal="bars"] .segbar i, .js [data-reveal="highlight"] mark { opacity: 1; transform: none; background-size: 100% 100%; }
  [data-drift] { transform: none !important; will-change: auto; }
}

/* ------------------------------------------------------------ Responsive */
@media (max-width: 1240px) {
  .chain { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 40px 56px; }
  .chain__col:nth-child(3)::before, .chain__col:nth-child(3)::after { display: none; }
  .chain__col + .chain__col::before { left: -44px; width: 32px; }
  .chain__col + .chain__col::after { left: -18px; }
}

@media (max-width: 1100px) {
  .site-nav a { padding: 0 9px; font-size: 14.5px; }
  .site-header .container { gap: 24px; }
  .hero__grid { grid-template-columns: minmax(0, 1fr); }
  .hero__copy { max-width: 640px; }
  .hero .display { max-width: 10em; }
  .hero__stage { max-width: 760px; width: 100%; justify-self: center; margin-top: 16px; }
  .reading { grid-template-columns: minmax(0, 1fr); }
  .reading__stage { max-width: 760px; }
  .cta-grid { grid-template-columns: minmax(0, 1fr); align-items: start; }
  .cta-grid .price { justify-self: start; }
  .cta-next { justify-self: start; }
}

@media (max-width: 1180px) { /* cartographie : onglets en grille, sans lignes de rappel (les onglets réels se resserrent) */
  .carto-stage { padding-top: 0; }
  .carto-tabs { position: static; height: auto; display: flex; flex-wrap: wrap; justify-content: center; gap: 10px 18px; margin-bottom: 18px; }
  .carto-tab { position: static; translate: none; }
  .carto-tab::before, .carto-tab::after { display: none; }
}

@media (max-width: 900px) {
  .home-frise { grid-template-columns: repeat(3, minmax(0, 1fr)); row-gap: 28px; }
  .home-frise::before { display: none; }
}

@media (max-width: 900px) {
  :root { --header-h: 64px; }
  .site-nav, .header-cta { display: none; }
  .menu-toggle {
    display: inline-flex; align-items: center; justify-content: center; gap: 10px; margin-left: auto;
    min-height: 44px; min-width: 44px; padding: 0 10px; border-radius: 10px; font-size: 14px; font-weight: 600;
  }
  .menu-toggle .bars { position: relative; width: 18px; height: 12px; }
  .menu-toggle .bars::before, .menu-toggle .bars::after { content: ""; position: absolute; left: 0; right: 0; height: 1.5px; background: currentColor; border-radius: 2px; transition: transform var(--t-micro) var(--ease), top var(--t-micro) var(--ease); }
  .menu-toggle .bars::before { top: 2px; }
  .menu-toggle .bars::after { top: 9px; }
  .menu-toggle[aria-expanded="true"] .bars::before { top: 5.5px; transform: rotate(45deg); }
  .menu-toggle[aria-expanded="true"] .bars::after { top: 5.5px; transform: rotate(-45deg); }
  .mobile-menu {
    position: fixed; inset: var(--header-h) 0 auto 0; z-index: 49; display: block;
    background: var(--white); border-bottom: 1px solid var(--border); box-shadow: 0 24px 40px -24px rgba(17, 19, 24, 0.25);
    padding: 8px var(--gutter) 24px;
  }
  .mobile-menu[hidden] { display: none; }
  .mobile-menu nav { display: grid; }
  .mobile-menu nav a { display: flex; align-items: center; min-height: 52px; font-size: 18px; font-weight: 550; border-bottom: 1px solid var(--border); }
  .mobile-menu .btn { margin-top: 20px; width: 100%; }
  .split-head { grid-template-columns: minmax(0, 1fr); gap: 20px; }
  .split-head__aside { padding-bottom: 0; }
  .proof-grid { grid-template-columns: minmax(0, 1fr); }
  .proof-col + .proof-col { border-left: 0; border-top: 1px solid var(--border); }
}

@media (max-width: 720px) {
  .hero { padding-top: calc(var(--header-h) + 36px); }
  .hero__stage { grid-template-columns: minmax(0, 1fr); gap: 14px; margin-top: 36px; }
  .hero__col { display: contents; }
  .hero .t-question { order: 1; }
  .hero .t-evidence { order: 2; margin-right: 22px; }
  .hero .t-finding { order: 3; margin-left: 22px; }
  .hero .t-domain { order: 4; margin-right: 22px; }
  .hero .t-legal { display: none; }
  .hero__caption { margin-top: 32px; }
  .chain { grid-template-columns: minmax(0, 1fr); gap: 56px; margin-top: 48px; }
  .chain__col + .chain__col::before, .chain__col:nth-child(3)::before { display: block; left: 32px; top: -44px; width: 1px; height: 32px; }
  .chain__col + .chain__col::after, .chain__col:nth-child(3)::after { display: block; left: 29px; top: -18px; transform: rotate(135deg); }
  .reading__stage { grid-template-columns: minmax(0, 1fr); }
  .carto-figure { margin-top: 48px; }
  .carto-tabs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .carto-tab { justify-items: stretch; gap: 3px; text-align: left; }
  .carto-tab span { justify-content: center; }
  .carto-tab small { text-align: center; }
  .carto-frame__viewport { max-height: 520px; }
  .home-frise { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .proof-tabs { grid-template-columns: minmax(0, 1fr); margin-top: 36px; }
  .proof-tab { min-height: 0; padding: 14px 16px; }
  .legal-line { margin-top: 44px; }
}

@media (max-width: 420px) {
  .display { letter-spacing: -0.04em; }
  .hero__actions .btn { width: 100%; }
  .figures li { grid-template-columns: 2.8rem minmax(0, 1fr); }
  .figures b { font-size: 1.9rem; }
}

/* Identifiants techniques : consultables volontairement (bouton « Afficher les identifiants »). */
.tech-id { display: none !important; }
html.show-tech .tech-id { display: revert !important; }
.tech-toggle { display: inline-flex; align-items: center; gap: 6px; min-height: 32px; padding: 4px 12px; border-radius: 999px; box-shadow: inset 0 0 0 1px var(--border-strong); font-size: 13px; font-weight: 600; color: var(--ink-soft); background: transparent; }
.tech-toggle::before { content: ""; width: 7px; height: 7px; border-radius: 50%; box-shadow: inset 0 0 0 1.5px currentColor; }
.tech-toggle[aria-pressed="true"]::before { background: currentColor; }
.tech-toggle:hover { color: var(--ink); box-shadow: inset 0 0 0 1px var(--ink-soft); }
.section--night .tech-toggle, .section--cobalt .tech-toggle { color: #D5D9DF; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.35); }
/* cinq niveaux de lecture : un onglet sur deux monte d'un cran, pour que les libellés ne se
   chevauchent pas au-dessus des onglets réels, rapprochés dans la capture */
@media (min-width: 1101px) {
  .carto-stage { padding-top: 128px; }
  .carto-tabs { height: 128px; }
  .carto-tab:nth-child(even) { bottom: 58px; }
  .carto-tab:nth-child(even)::after { height: calc(47px + 6.8cqw); }
  .carto-tab:nth-child(even)::before { top: calc(100% + 51px + 6.8cqw); }
}