/* Hallmark · macrostructure: Narrative Workflow (inchangée, HTML figé) · tone: utilitarian · theme: charte claire de l'application
 * paper #f0f4f9 · accent #0b57d0 · display Poppins 600 · body Roboto · nav: N9 · footer: Ft4 */
/* Hallmark · pre-emit critique: P4 H4 E4 S4 R5 V3 */

*, *::before, *::after { box-sizing: border-box; }
html, body { overflow-x: clip; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--color-paper);
  color: var(--color-ink);
  font: 400 var(--text-base) / 1.6 var(--font-body);
}
img { display: block; max-width: 100%; height: auto; }

h1, h2, h3, h4 {
  margin: 0;
  color: var(--color-brand);
  font-family: var(--font-brand);
  font-weight: 600;
  font-style: normal;
  overflow-wrap: anywhere;
  min-width: 0;
}
h1 { font-size: var(--text-display); line-height: 1.1; letter-spacing: -0.02em; }
h2 { font-size: var(--text-2xl); line-height: 1.2; letter-spacing: -0.01em; }
h3 { font-size: var(--text-lg); font-weight: 500; line-height: 1.3; }
h4 { font: 500 var(--text-base) / 1.4 var(--font-body); }
p { margin: 0; max-width: var(--measure); }
p + p { margin-top: var(--space-sm); }
ul, ol { margin: 0; padding: 0; list-style: none; }
dl, dd { margin: 0; }
strong, b, dt, th { font-weight: 500; }
small { font-size: var(--text-sm); }
address { font-style: normal; }
code { font-family: var(--font-mono); font-size: 0.9em; }

a { color: var(--color-accent); text-underline-offset: 0.18em; text-decoration-thickness: var(--rule-thin); transition: color var(--dur-fast) var(--ease-out), background-color var(--dur-fast) var(--ease-out); }
a:hover { color: var(--color-accent-hover); text-decoration-thickness: 2px; }
a:active { color: var(--color-brand); }
:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 2px; border-radius: var(--radius-sm); }
.nowrap { white-space: nowrap; }

.btn {
  display: inline-block;
  padding: var(--space-xs) var(--space-md);
  border-radius: var(--radius-pill);
  background: var(--color-accent);
  color: var(--color-on-accent);
  font-weight: 500;
  line-height: 1.3;
  text-decoration: none;
  white-space: nowrap;
  transition: background-color var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out);
}
.btn:hover { background: var(--color-accent-hover); color: var(--color-on-accent); box-shadow: var(--shadow-raised); }
.btn:active { background: var(--color-brand); color: var(--color-on-accent); box-shadow: none; }
.btn:focus-visible, .nav a:focus-visible, .path a:focus-visible { border-radius: var(--radius-pill); }
.btn[aria-disabled="true"] { background: var(--color-rule); color: var(--color-muted); pointer-events: none; }

.wrap { width: min(100% - 2 * var(--page-gutter), var(--page-max)); margin-inline: auto; }

/* Barre du haut : le mot-symbole seul, une action en pastille. */
.nav { display: flex; justify-content: space-between; align-items: center; gap: var(--space-sm); padding-block: var(--space-sm); }
.wordmark { color: var(--color-brand); font: 600 var(--text-xl) / 1 var(--font-brand); letter-spacing: -0.01em; text-decoration: none; }
.wordmark:hover { color: var(--color-brand); }
.nav a:not(.wordmark) { padding: var(--space-2xs) var(--space-sm); border-radius: var(--radius-pill); background: var(--color-accent-soft); color: var(--color-brand); font-size: var(--text-sm); font-weight: 500; text-decoration: none; }
.nav a:not(.wordmark):hover { background: var(--color-accent-soft-hover); }

.hero { padding-block: var(--space-xl) var(--space-2xl); }
.hero h1 { max-width: 16ch; }
.lede { margin-top: var(--space-md); color: var(--color-muted); font-size: var(--text-lg); line-height: 1.5; max-width: 54ch; }
.lede-note { margin-top: var(--space-sm); }
.hero__actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-sm) var(--space-md); margin-top: var(--space-lg); }
.hero__actions a:not(.btn) { font-weight: 500; }
.hero--page { padding-bottom: var(--space-lg); }

/* Le parcours : cinq pastilles numérotées, comme la navigation de l'application. */
.path { display: flex; flex-wrap: wrap; gap: var(--space-2xs); margin-top: var(--space-xl); counter-reset: path; }
.path li { counter-increment: path; }
.path a { display: block; padding: var(--space-2xs) var(--space-sm); border-radius: var(--radius-pill); background: var(--color-surface); color: var(--color-brand); font-size: var(--text-sm); font-weight: 500; text-decoration: none; white-space: nowrap; }
.path a::before { content: counter(path) "\00a0\00a0"; color: var(--color-accent); }
.path a:hover { background: var(--color-accent-soft); }

/* Cartes blanches : étapes, page légale. Carte bleu doux : contact. */
.stage, .legal, .contact { margin-block: var(--space-md); padding: var(--card-pad); border-radius: var(--radius-xl); background: var(--color-surface); box-shadow: var(--shadow-card); }
.stage > h2 { margin-bottom: var(--space-md); }
.stage__n { color: var(--color-accent); }
.stage__text, .stage--side, .measures > div { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--space-md) var(--space-xl); }
.stage--side { align-items: start; }
.stage--side > div h2 { margin-bottom: var(--space-md); }
figure { margin: 0; }
.stage__text + figure { margin-top: var(--space-lg); }
figure img { border: var(--rule-thin) solid var(--color-rule); border-radius: var(--radius-md); }
figcaption, .notes { color: var(--color-muted); font-size: var(--text-sm); }
figcaption { margin-top: var(--space-2xs); }
.notes { margin-top: var(--space-sm); }

.refs { display: flex; flex-wrap: wrap; gap: var(--space-2xs); margin-top: var(--space-sm); }
.refs li { padding: var(--space-3xs) var(--space-xs); border-radius: var(--radius-pill); background: var(--color-accent-soft); color: var(--color-brand); font-size: var(--text-sm); font-weight: 500; overflow-wrap: anywhere; }

/* Bande blanche pleine largeur, tuiles grises à l'intérieur. */
.band { margin-block: var(--space-xl); padding-block: var(--space-2xl); background: var(--color-surface); }
.band__intro, .band__note { margin-top: var(--space-md); }
.section { padding-block: var(--space-xl); }
.section > .wrap > h2 { margin-bottom: var(--space-md); }

.split { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-md); margin-top: var(--space-md); }
.split > div { padding: var(--space-md); border: var(--rule-thin) solid transparent; border-radius: var(--radius-lg); background: var(--color-surface); }
.band .split > div { background: var(--color-paper); }
.split > .split--light { border-color: var(--color-rule); background: none; }
.split ul { margin-top: var(--space-2xs); }
.split li { padding-block: var(--space-xs); }
.split li + li, .steps li + li, .measures > div + div { border-top: var(--rule-thin) solid var(--color-rule); }
#limites li strong { display: block; }

.steps, .measures { padding: var(--space-2xs) var(--space-md); border-radius: var(--radius-lg); background: var(--color-surface); }
.steps { counter-reset: step; margin-bottom: var(--space-md); max-width: 48rem; }
.steps li { counter-increment: step; display: grid; grid-template-columns: 1.75rem minmax(0, 1fr); gap: var(--space-sm); padding-block: var(--space-sm); }
.steps li::before { content: counter(step); width: 1.75rem; height: 1.75rem; border-radius: 50%; background: var(--color-accent-soft); color: var(--color-brand); font-size: var(--text-sm); font-weight: 500; line-height: 1.75rem; text-align: center; }
.measures > div { padding-block: var(--space-sm); }
.measures dt { color: var(--color-brand); }
.measures dd { max-width: var(--measure); }

/* Tableaux : une carte à filet, en-tête gris. */
table { width: 100%; max-width: 52rem; border: var(--rule-thin) solid var(--color-rule); border-radius: var(--radius-lg); border-spacing: 0; background: var(--color-surface); font-variant-numeric: tabular-nums; overflow: hidden; }
th, td { padding: var(--space-xs) var(--space-sm); border-top: var(--rule-thin) solid var(--color-rule); text-align: left; vertical-align: top; }
thead th { border-top: 0; background: var(--color-paper); color: var(--color-muted); font-size: var(--text-sm); line-height: 1.3; }
tbody th { color: var(--color-brand); }
.stage__text table { margin-block: var(--space-md); }
.answers tbody th { width: 38%; }
.corpus, .compare, .data { max-width: none; margin-top: var(--space-md); }
.corpus tbody th { color: var(--color-ink); font-weight: 400; }
.corpus .corpus__group th { padding-top: var(--space-md); color: var(--color-brand); font-weight: 500; }
.corpus__id { margin-left: var(--space-3xs); color: var(--color-muted); font-size: var(--text-xs); letter-spacing: 0.03em; white-space: nowrap; }
.num { text-align: right; white-space: nowrap; }
.compare td:last-child { color: var(--color-brand); font-weight: 500; }

details { max-width: 48rem; border-radius: var(--radius-lg); background: var(--color-surface); }
details + details { margin-top: var(--space-2xs); }
summary { padding: var(--space-sm) var(--space-md); border-radius: var(--radius-lg); color: var(--color-brand); font-weight: 500; cursor: pointer; }
summary::marker { color: var(--color-accent); }
summary:hover { color: var(--color-accent); }
details p { padding: 0 var(--space-md) var(--space-sm); }

.contact { margin-bottom: var(--space-xl); background: var(--color-accent-soft); box-shadow: none; }
.contact h2 { font-size: var(--text-3xl); line-height: 1.15; }
.contact .lede { color: var(--color-brand); }
.contact__lines { display: flex; flex-wrap: wrap; gap: var(--space-2xs) var(--space-lg); margin-top: var(--space-md); font-size: var(--text-lg); font-weight: 500; }
.contact a { color: var(--color-accent-hover); }
.contact a:hover { color: var(--color-brand); }

.foot { margin-top: var(--space-2xl); padding-block: var(--space-xl) var(--space-lg); background: var(--color-brand); color: var(--color-on-brand-muted); font-size: var(--text-sm); }
.foot a { color: var(--color-on-brand); text-decoration: none; }
.foot a:hover { text-decoration: underline; }
.foot a:focus-visible { outline-color: var(--color-accent-soft); }
.foot__top { display: grid; grid-template-columns: minmax(12rem, 1fr) 3fr; gap: var(--space-xl); }
.foot__brand .wordmark, .foot__brand .wordmark:hover { color: var(--color-on-brand); }
.foot__brand p { margin-top: var(--space-2xs); }
.foot__cols { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-lg); }
.foot__cols h2 { margin: 0 0 var(--space-xs); color: var(--color-on-brand-muted); font-family: var(--font-body); font-size: var(--text-xs); font-weight: 500; letter-spacing: 0.06em; text-transform: uppercase; }
.foot__cols ul { margin: 0; padding: 0; list-style: none; }
.foot__cols li + li { margin-top: var(--space-2xs); }
.foot__legal { max-width: none; margin-top: var(--space-xl); padding-top: var(--space-md); border-top: var(--rule-thin) solid var(--color-brand-rule); font-size: var(--text-xs); }
.foot__legal a { text-decoration: underline; }
@media (max-width: 60rem) { .foot__top { grid-template-columns: 1fr; gap: var(--space-lg); } }
@media (max-width: 40rem) { .foot__cols { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* Pages légales : texte courant dans une carte. */
.legal { margin-bottom: var(--space-xl); }
.legal h1 { font-size: var(--text-3xl); margin-bottom: var(--space-md); }
.legal h2 { font-size: var(--text-xl); margin-top: var(--space-lg); margin-bottom: var(--space-2xs); }
.legal :is(h3, h4) { margin-top: var(--space-md); margin-bottom: var(--space-3xs); }
.legal :is(ul, ol) { margin-block: var(--space-2xs); padding-left: 1.25em; max-width: var(--measure); list-style: revert; }
.legal :is(table, dl, address) { margin-block: var(--space-sm); }
.legal table { max-width: none; }
.legal dd { margin-bottom: var(--space-2xs); max-width: var(--measure); color: var(--color-muted); }
.todo { padding: 0.1em 0.4em; border-radius: var(--radius-sm); background: var(--color-warn-soft); color: var(--color-warn); font-size: var(--text-sm); font-weight: 500; -webkit-box-decoration-break: clone; box-decoration-break: clone; }

@media (max-width: 800px) {
  .stage__text, .stage--side, .split, .measures > div { grid-template-columns: minmax(0, 1fr); }
  .measures > div { gap: var(--space-3xs); }
  .hero { padding-block: var(--space-lg) var(--space-xl); }
  .band { padding-block: var(--space-xl); }
}

/* Sur téléphone, les captures gardent une taille lisible et défilent dans leur cadre. */
@media (max-width: 600px) {
  .shot { overflow-x: auto; border-radius: var(--radius-md); }
  .shot img { width: 44rem; max-width: none; }
  figcaption::after { content: " Faites glisser pour voir toute la capture."; }
  th, td { padding-inline: var(--space-xs); }
  .corpus { font-size: var(--text-sm); }
  .corpus tbody th { overflow-wrap: anywhere; hyphens: auto; }
  .corpus :is(th, td) { padding-inline: var(--space-2xs); }
  .corpus__id { display: block; margin-left: 0; }
  .foot a { white-space: normal; }
  /* Tableaux à cellules étiquetées (data-label) : une fiche par ligne. */
  table:has([data-label]) thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
  table:has([data-label]) tr { display: block; padding: var(--space-xs) var(--space-sm); }
  table:has([data-label]) tr + tr { border-top: var(--rule-thin) solid var(--color-rule); }
  table:has([data-label]) :is(th, td) { display: block; padding: var(--space-3xs) 0; border: 0; }
  td[data-label]::before { content: attr(data-label) " : "; color: var(--color-muted); font-weight: 400; }
}

@media (max-width: 400px) {
  th, td { padding-inline: var(--space-2xs); }
  thead th { font-size: var(--text-xs); hyphens: auto; }
}

@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
}
@media (prefers-reduced-motion: reduce) {
  a, .btn { transition: none; }
}

/* Vidéo de présentation : simple lien vers YouTube, aucune ressource tierce chargée par la page. */
.video__link { position: relative; display: block; max-width: 880px; margin-top: var(--space-md); }
.video__link img { display: block; width: 100%; height: auto; border: var(--rule-thin) solid var(--color-rule); border-radius: var(--radius-md); }
.video__play { position: absolute; left: 50%; bottom: var(--space-md); transform: translateX(-50%); white-space: nowrap; }
.video__link:hover .video__play, .video__link:focus-visible .video__play { background: var(--color-accent-hover); }
@media (max-width: 40rem) { .video__play { position: static; transform: none; display: inline-flex; margin-top: var(--space-sm); } }