@import url("tokens.css");

@font-face {
  font-family: "Inter";
  src: url("fonts/Inter-VariableFont_opsz,wght.ttf") format("truetype");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Space Grotesk";
  src: url("fonts/SpaceGrotesk-VariableFont_wght.ttf") format("truetype");
  font-weight: 300 700;
  font-style: normal;
  font-display: swap;
}

:root { color-scheme: light; }
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  color: var(--color-text);
  background: var(--color-bg);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: var(--lh-body);
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; }
a { color: inherit; }
button, input { font: inherit; }
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* Accessibilite P3.5 : focus clavier visible sur tous les elements interactifs.
   Le contour epouse nativement le border-radius de chaque element ; le cyan
   reste visible sur fond brume (main) comme sur fond graphite (footer). */
a:focus-visible,
.btn:focus-visible,
button:focus-visible,
summary:focus-visible,
input:focus-visible,
nav.toc a:focus-visible,
footer a:focus-visible {
  outline: 2px solid var(--color-cyan);
  outline-offset: 2px;
}

/* Hero V3: graphite and cyan signal, with a flat dark field. */
.hero {
  position: relative;
  overflow: hidden;
  color: var(--color-surface);
  background: var(--color-graphite);
  /* B3 : hero raccourci pour que le sommaire soit visible au premier écran desktop. */
  padding: 32px 24px 52px;
}
.hero::before {
  content: "";
  position: absolute;
  inset: 20px;
  border: 1px solid rgba(243,245,247,.18);
  pointer-events: none;
}
.hero > * { position: relative; z-index: 1; }
.hero-inner { max-width: 1180px; margin: 0 auto; }
.hero-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  /* B1 : trait sous le logo rapproché ; kicker aligné sur la ligne du logo. */
  padding: 0 26px 18px;
  border-bottom: 1px solid rgba(243,245,247,.24);
}
.hero-top .hero-kicker { margin: 0; }
.brand-logo { width: clamp(170px, 20vw, 240px); height: auto; display: block; }
.hero-kicker, .kicker {
  margin: 0 0 16px;
  color: var(--color-accent-text);
  font-family: var(--font-title);
  font-size: .75rem;
  font-weight: 600;
  letter-spacing: .16em;
  text-transform: uppercase;
}
.hero .hero-kicker { color: var(--color-cyan); }
.hero-kicker-link { text-decoration: none; }
.hero-kicker-link:hover, .hero-kicker-link:focus-visible { text-decoration: underline; }
.hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 0;
  align-items: center;
  /* B2 : bloc titre remonté juste sous le trait du logo. */
  padding: 40px 26px 34px;
}
.hero-copy { max-width: 980px; }
.hero h1, h1, h2, h3, .title {
  font-family: var(--font-title);
  letter-spacing: -.035em;
  line-height: 1.08;
}
.hero h1 {
  max-width: 960px;
  margin: 0;
  font-size: clamp(3rem, 6.2vw, 5.9rem);
  font-weight: 600;
  text-wrap: balance;
}
.hero p.sub {
  max-width: 740px;
  margin: 28px 0 0;
  color: #DDE3E8;
  font-size: clamp(1.05rem, 1.75vw, 1.35rem);
  line-height: 1.5;
}
.hero .meta {
  max-width: 740px;
  margin: 26px 0 0;
  color: #AEB9C4;
  font-size: .84rem;
  letter-spacing: .02em;
}
.hero-aside {
  align-self: end;
  max-width: 280px;
  padding-left: 28px;
  border-left: 1px solid rgba(243,245,247,.3);
  color: #AEB9C4;
}
.hero-aside[hidden] { display: none; }
.hero-index {
  display: block;
  color: var(--color-cyan);
  font-family: var(--font-title);
  font-size: clamp(4rem, 9vw, 8rem);
  font-weight: 600;
  letter-spacing: -.08em;
  line-height: .8;
}
.hero-aside p {
  margin: 28px 0 0;
  color: var(--color-surface);
  font-family: var(--font-title);
  font-size: 1.05rem;
  line-height: 1.35;
}
.cyan-rule {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-top: 34px;
  color: #DDE3E8;
  font-size: .82rem;
  letter-spacing: .03em;
}
.cyan-rule span { display: block; width: 62px; height: 4px; background: var(--color-cyan); }

/* Page frame and navigation. */
main { max-width: 1180px; margin: -56px auto 0; padding: 0 24px calc(var(--space-6) / 2); position: relative; z-index: 2; }
section { margin-bottom: var(--section-gap); scroll-margin-top: 92px; }
main > section:last-of-type { margin-bottom: 0; }
main > section:last-of-type > :last-child { margin-bottom: 0; }
nav.toc {
  position: sticky;
  top: 14px;
  z-index: 20;
  display: flex;
  align-items: center;
  justify-content: space-evenly;
  gap: 4px;
  overflow-x: auto;
  margin-bottom: var(--space-6);
  padding: 8px 10px;
  border: 1px solid var(--color-line);
  border-radius: var(--radius-l);
  background: rgba(255,255,255,.94);
  box-shadow: var(--shadow);
  scrollbar-width: none;
}
nav.toc::-webkit-scrollbar { display: none; }
nav.toc a {
  flex: none;
  padding: 8px 14px;
  border-radius: var(--radius-s);
  color: var(--color-text-2);
  font-size: .82rem;
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
}
nav.toc a:hover { color: var(--color-accent-text); background: var(--color-surface-2); }
nav.toc a.active { color: var(--color-on-accent); background: var(--color-accent); }

h2 {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 14px;
  margin: 0 0 10px;
  font-size: clamp(1.45rem, 2.6vw, 2.25rem);
  font-weight: 600;
}
h2 .num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  border-radius: var(--radius-s);
  color: var(--color-on-accent);
  background: var(--color-accent);
  font-family: var(--font-title);
  font-size: 1rem;
  font-weight: 600;
  letter-spacing: 0;
}
.section-intro { max-width: 980px; margin: 0 0 24px 56px; color: var(--color-text-2); text-wrap: pretty; }
.page-training .section-intro { max-width: 900px; }

/* Cards and grids. */
.card {
  min-width: 0;
  padding: 22px;
  border: 1px solid var(--color-line);
  border-top: 3px solid var(--color-accent);
  border-radius: var(--radius-s);
  background: var(--color-surface);
  box-shadow: var(--shadow);
}
.card h3 { margin: 0 0 8px; font-size: 1.14rem; font-weight: 600; text-wrap: balance; }
.card p { margin: 0; color: var(--color-text-2); font-size: .95rem; text-wrap: pretty; }
.card p + p { margin-top: 9px; }
.grid { display: grid; gap: var(--gap-grid); }
/* Colonnes explicites (jamais auto-fit) : pas de rangée orpheline sur desktop.
   Palier 2 colonnes <= 1024px, 1 colonne <= 640px (point de rupture mobile). */
.grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grid-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 1024px) {
  .grid-3, .grid-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 900px) {
  section { margin-bottom: var(--space-6); }
}
@media (max-width: 640px) {
  .grid-2, .grid-3, .grid-4 { grid-template-columns: 1fr; }
}
.icon-chip { display: none; }

/* Tables, tags and callouts. */
.table-wrap {
  overflow-x: auto;
  border: 1px solid var(--color-line);
  border-radius: var(--radius-s);
  background: var(--color-surface);
  box-shadow: var(--shadow);
}
table { width: 100%; min-width: 640px; border-collapse: collapse; font-size: .94rem; }
th, td { padding: 14px 18px; border-bottom: 1px solid var(--color-line); text-align: left; vertical-align: top; }
th {
  color: var(--color-text-2);
  background: var(--color-surface-2);
  font-size: .76rem;
  letter-spacing: .08em;
  text-transform: uppercase;
}
tr:last-child td { border-bottom: 0; }
td:first-child { font-weight: 600; white-space: nowrap; }
.tag { display: inline-block; padding: 2px 9px; border-radius: 999px; font-size: .76rem; font-weight: 600; }
/* Textes de tags assombris pour atteindre AA >= 4.5:1 sur leur fond pastel
   (ratios avant -> apres : ok 3.08 -> 4.83, warn 2.83 -> 5.28, bad 4.11 -> 5.51).
   Tokens de marque (--color-success/warning/danger) inchanges pour les autres usages. */
.tag.ok { color: #15794A; background: #E3F6EC; }
.tag.warn { color: #A34A06; background: #FDF0DC; }
.tag.bad { color: #B91C1C; background: #FDE8E8; }
.tag.accent { color: var(--color-accent-text); background: #E6F8FC; }
.callout {
  margin: 20px 0;
  padding: 16px 20px;
  border-left: 3px solid var(--color-accent);
  border-radius: 0 var(--radius-s) var(--radius-s) 0;
  color: var(--color-text);
  background: var(--color-surface-2);
  font-size: .95rem;
}
.callout.warn { border-color: var(--color-warning); background: #FDF6E8; }
.callout.ok { border-color: var(--color-success); background: #EEFAF3; }
.callout > strong { display: block; margin-bottom: 3px; font-family: var(--font-title); }
.callout--statement {
  display: grid;
  grid-template-columns: 130px minmax(0, 1fr);
  align-items: start;
  gap: 24px;
  margin-top: 24px;
  padding: 22px 24px;
}
.callout--statement > strong { margin: 0; font-size: 1.05rem; }
.callout--statement p { max-width: 820px; margin: 0; line-height: 1.65; text-wrap: pretty; }

/* Pricing architecture: audit → deployment → maintenance. */
.pricing { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--gap-grid); }
.plan {
  display: flex;
  min-width: 0;
  flex-direction: column;
  padding: 26px 22px 22px;
  border: 1px solid var(--color-line);
  border-top: 4px solid var(--color-accent);
  border-radius: var(--radius-s);
  background: var(--color-surface);
  box-shadow: var(--shadow);
}
.plan.featured { color: var(--color-surface); border-color: var(--color-graphite); background: var(--color-graphite); }
.plan .ribbon {
  align-self: flex-start;
  margin: -8px 0 14px;
  padding: 4px 9px;
  border-radius: 999px;
  color: var(--color-on-accent);
  background: var(--color-cyan);
  font-size: .7rem;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.plan .p-name { font-family: var(--font-title); font-size: 1.18rem; font-weight: 600; letter-spacing: -.02em; }
.plan .p-sub, .plan .p-note { color: var(--color-text-2); font-size: .86rem; }
.plan.featured .p-sub, .plan.featured .p-note, .plan.featured ul li { color: #DDE3E8; }
.plan .p-price { display: block; margin: 22px 0 4px; }
.plan .p-price .amount { display: block; color: var(--color-text); font-family: var(--font-title); font-size: clamp(1.8rem, 3.5vw, 2.5rem); font-weight: 600; letter-spacing: -.05em; line-height: 1.05; }
.plan.featured .p-price .amount { color: var(--color-surface); }
.plan .p-price .period { display: block; margin-top: 7px; color: var(--color-text-2); font-size: .86rem; font-weight: 600; }
.plan.featured .p-price .period { color: #AEB9C4; }
.plan .p-note { margin-bottom: 12px; }
.plan ul { flex: 1; margin: 8px 0 22px; padding: 0; list-style: none; }
.plan ul li { position: relative; margin-bottom: 10px; padding-left: 18px; color: var(--color-text-2); font-size: .91rem; }
.plan ul li strong { color: var(--color-text); }
.plan.featured ul li strong { color: var(--color-surface); }
.plan .btn, .contact-box .btn {
  display: block;
  padding: 12px 16px;
  border-radius: var(--radius-s);
  font-size: .92rem;
  font-weight: 700;
  text-align: center;
  text-decoration: none;
}
.plan .btn.primary, .contact-box .btn { color: var(--color-on-accent); background: var(--color-cyan); }
.plan .btn.ghost { color: var(--color-text); border: 1px solid var(--color-cyan); background: rgba(34,199,232,.08); }
.plan.featured .btn.ghost { color: var(--color-surface); border-color: rgba(243,245,247,.35); }
.plan .btn:hover, .contact-box .btn:hover { filter: brightness(.96); }
.pricing-note { margin: 18px 0 0; color: var(--color-text-2); font-size: .85rem; text-align: center; }

/* Full-width band for variable costs, under the 3-column plan grid. */
.plan-band {
  grid-column: 1 / -1;
  margin-top: var(--gap-grid);
  padding: 22px;
  border: 1px solid var(--color-line);
  border-left: 3px solid var(--color-accent);
  border-radius: 0 var(--radius-s) var(--radius-s) 0;
  background: var(--color-surface-2);
}
.plan-band .p-name { font-family: var(--font-title); font-size: 1.18rem; font-weight: 600; letter-spacing: -.02em; }
.plan-band .p-sub, .plan-band .p-note { color: var(--color-text-2); font-size: .86rem; }
.plan-band .p-price { display: block; margin: 14px 0 4px; }
.plan-band .p-price .amount { color: var(--color-text); font-family: var(--font-title); font-size: clamp(1.5rem, 3vw, 1.9rem); font-weight: 600; letter-spacing: -.05em; line-height: 1.05; }
.plan-band .p-price .period { display: block; margin-top: 7px; margin-left: 0; color: var(--color-text-2); font-size: .86rem; font-weight: 600; }
.plan-band .p-note { margin-bottom: 12px; }
.plan-band ul { columns: 2; column-gap: 40px; margin: 8px 0 18px; padding: 0; list-style: none; }
.plan-band ul li { position: relative; break-inside: avoid; margin-bottom: 10px; padding-left: 18px; color: var(--color-text-2); font-size: .91rem; }
.plan-band ul li strong { color: var(--color-text); }
.plan-band .btn.ghost {
  display: inline-block;
  padding: 11px 16px;
  border: 1px solid var(--color-cyan);
  background: rgba(34,199,232,.08);
  border-radius: var(--radius-s);
  color: var(--color-text);
  font-size: .92rem;
  font-weight: 700;
  text-align: center;
  text-decoration: none;
}
.plan-band .btn.ghost:hover { filter: brightness(.96); }

/* Trois comparaisons : une ligne complète, jamais de carte orpheline. */
.comparison-cards {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--gap-grid);
  margin-top: var(--space-3);
}

/* E4 — puces standardisées : mêmes dimensions, même couleur, même épaisseur
   sur toutes les listes du site (grilles de prix, garde-fous, pages légales). */
.plan ul li::before,
.plan-band ul li::before,
ul.clean li::before {
  content: "";
  position: absolute;
  top: .7em;
  left: 0;
  width: 9px;
  height: 2px;
  border-radius: 999px;
  background: #22C7E8;
}

/* E3 — montant secondaire : jamais plus gros que le titre de sa carte. */
.p-price .amount.p-price--light {
  font-size: 1.05rem;
  letter-spacing: -.01em;
}

/* Formation : mêmes rythmes et alignements que la page offre. */
.definition-card { margin-bottom: var(--gap-grid); }
.definition-card .definition-text { font-size: 1.02rem; }
.agent-steps { margin-top: var(--gap-grid); }
.card-note { margin-top: 10px !important; }
.glossary-list details { margin-bottom: var(--gap-grid); }
.glossary-list details:last-child { margin-bottom: 0; }
.page-training .closing-title { margin-left: 56px; }

/* H2/I2 — pages légales : titre h1 contenu (les intitulés juridiques sont
   longs), ce qui remonte le bloc titre et rapproche le sommaire du header.
   Structure hero-top/logo/kicker inchangée, palette identique. */
.page-legal .hero h1 {
  font-size: clamp(1.9rem, 3.6vw, 3rem);
}
.page-legal .hero p.sub { max-width: 840px; text-wrap: balance; }
.page-legal nav.toc { flex-wrap: nowrap; overflow-x: auto; }
.page-legal nav.toc a { padding: 8px 6px; font-size: .75rem; }
.page-legal section { scroll-margin-top: 128px; }
.page-legal .section-intro { max-width: 980px; }
.page-legal section > ul.clean { max-width: 780px; margin-left: 56px; }
.page-legal .table-wrap + .section-intro { margin-top: var(--gap-grid); }
@media (min-width: 641px) {
  .page-legal table.data-table { table-layout: fixed; }
  .page-legal table.data-table td:first-child { white-space: normal; }
  .page-legal table.data-table th:nth-child(1),
  .page-legal table.data-table td:nth-child(1) { width: 30%; }
  .page-legal table.data-table th:nth-child(2),
  .page-legal table.data-table td:nth-child(2) { width: 30%; }
  .page-legal table.data-table th:nth-child(3),
  .page-legal table.data-table td:nth-child(3) { width: 40%; }
}

/* FAQ, training steps and interactive quiz. */
details { margin-bottom: 10px; overflow: hidden; border: 1px solid var(--color-line); border-radius: var(--radius-s); background: var(--color-surface); box-shadow: var(--shadow); }
details summary { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 15px 20px; cursor: pointer; font-family: var(--font-title); font-weight: 600; list-style: none; }
details summary::-webkit-details-marker { display: none; }
details summary::after { content: "+"; color: var(--color-accent-text); font-size: 1.3rem; }
details[open] summary::after { content: "−"; }
details .d-body { padding: 0 20px 16px; color: var(--color-text-2); font-size: .93rem; }
.guardrail-faq { margin-top: var(--gap-grid); }
.guardrail-faq details { margin-bottom: var(--gap-grid); }
.guardrail-faq details:last-child { margin-bottom: 0; }
details .d-body code, code.inline { padding: 2px 6px; border-radius: 5px; color: var(--color-accent-text); background: var(--color-surface-2); font-size: .86em; }
.steps { display: grid; gap: var(--space-2); }
.step { display: flex; align-items: flex-start; gap: 16px; }
.step::before { content: counter(step); counter-increment: step; display: flex; flex: none; align-items: center; justify-content: center; width: 34px; height: 34px; border-radius: 50%; color: var(--color-on-accent); background: var(--color-cyan); font-family: var(--font-title); font-weight: 600; }
.steps { counter-reset: step; }
.step h3 { margin: 0 0 3px; font-size: 1.04rem; }
.step p { margin: 0; color: var(--color-text-2); font-size: .93rem; }
.quiz { display: grid; gap: var(--space-3); }
.q { padding: 20px 22px; border: 1px solid var(--color-line); border-top: 3px solid var(--color-accent); border-radius: var(--radius-s); background: var(--color-surface); box-shadow: var(--shadow); }
.q .q-text { margin-bottom: 12px; font-family: var(--font-title); font-weight: 600; }
.q .choices { display: grid; gap: 8px; }
.q label { display: flex; align-items: flex-start; gap: 10px; padding: 10px 14px; border: 1px solid var(--color-line); border-radius: var(--radius-s); cursor: pointer; font-size: .94rem; }
.q label:hover, .q label:focus-within { border-color: var(--color-accent); background: var(--color-surface-2); }
.q label.correct { border-color: var(--color-success); background: #EEFAF3; }
.q label.wrong { border-color: var(--color-danger); background: #FDF0F0; }
.q input { margin-top: 4px; accent-color: var(--color-accent-text); }
.q .explain { display: none; margin-top: 12px; padding: 12px 14px; border-radius: var(--radius-s); color: var(--color-text-2); background: var(--color-surface-2); font-size: .9rem; }
.q .explain.show { display: block; }
.q .explain strong { color: var(--color-accent-text); }
.quiz-actions { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; margin-top: 16px; }
button { padding: 10px 18px; border: 0; border-radius: var(--radius-s); cursor: pointer; font-size: .92rem; font-weight: 700; }
.btn-primary { color: var(--color-on-accent); background: var(--color-cyan); }
.btn-ghost { color: var(--color-text); border: 1px solid var(--color-line); background: transparent; }
.quiz-score { color: var(--color-accent-text); font-family: var(--font-title); font-weight: 600; }

/* CSS-only learning loop: replaces the historical inline SVG. */
.diagram { padding: 24px; border: 1px solid var(--color-line); border-radius: var(--radius-s); background: var(--color-surface); box-shadow: var(--shadow); }
.loop { display: grid; grid-template-columns: 1fr auto 1fr auto 1fr auto 1fr; gap: 10px; align-items: stretch; }
.loop-step { position: relative; padding: 18px 14px; border-top: 4px solid var(--color-accent); background: var(--color-surface-2); }
.loop-step strong { display: block; margin-bottom: 7px; color: var(--color-text); font-family: var(--font-title); font-size: 1.05rem; }
.loop-step span { color: var(--color-text-2); font-size: .84rem; }
.loop-arrow { display: flex; align-items: center; justify-content: center; color: var(--color-accent-text); font-family: var(--font-title); font-size: 1.6rem; }
.loop-return { margin: 18px auto 0; padding-top: 12px; border-top: 1px dashed var(--color-accent); color: var(--color-accent-text); font-size: .85rem; text-align: center; }
.diagram-caption { margin: 14px 0 0; color: var(--color-text-2); font-size: .88rem; text-align: center; }

/* Lists, pipeline and contact. */
ul.clean { margin: 0; padding: 0; list-style: none; }
ul.clean li { position: relative; margin-bottom: 10px; padding-left: 18px; color: var(--color-text-2); font-size: .95rem; }
.pipeline { display: grid; gap: var(--space-2); }
.pipeline .row { display: flex; align-items: center; flex-wrap: wrap; gap: 12px; padding: 14px 16px; border: 1px solid var(--color-line); border-left: 3px solid var(--color-accent); border-radius: var(--radius-s); background: var(--color-surface); box-shadow: var(--shadow); }
.pipeline .row .who { min-width: 140px; color: var(--color-accent-text); font-family: var(--font-title); font-weight: 600; }
.pipeline .row .what { flex: 1; min-width: 220px; color: var(--color-text-2); font-size: .93rem; }
.pipeline .arrow { color: var(--color-accent-text); font-family: var(--font-title); font-size: 1.2rem; text-align: center; }
.contact-box { padding: 44px 32px; border-radius: var(--radius); color: var(--color-surface); background: var(--color-graphite); box-shadow: var(--shadow); text-align: center; }
.contact-box h3 { margin: 0 0 12px; font-size: clamp(1.45rem, 3vw, 2rem); }
.contact-box p { max-width: 680px; margin: 0 auto 24px; color: #DDE3E8; }
.contact-box .steps { display: flex; justify-content: center; flex-wrap: wrap; gap: 10px; margin-bottom: 26px; }
.contact-box .steps span { padding: 7px 13px; border: 1px solid rgba(243,245,247,.25); border-radius: 999px; color: #DDE3E8; font-size: .82rem; }
.contact-box .alt { margin: 16px auto 0; color: #AEB9C4; font-size: .82rem; }
.contact-intro { max-width: 860px; text-wrap: balance; }
footer { margin-top: 17px; padding: 24px; color: #AEB9C4; background: var(--color-graphite); text-align: center; }
footer .logo { display: flow-root; }
footer .logo img { display: block; width: clamp(145px, 14vw, 165px); height: auto; margin: 0 auto 10px; }
footer p { margin: 4px 0 0; font-size: .92rem; }
footer .disclaimer { max-width: 980px; margin: 6px auto 0; color: #AEB9C4; font-size: .76rem; line-height: 1.45; }
footer .legal-links { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 6px 12px; margin-top: 10px; }
footer .legal-links a { color: #DDE3E8; font-size: .82rem; font-weight: 600; text-decoration: none; }
footer .legal-links a:hover, footer .legal-links a:focus-visible { color: var(--color-cyan); text-decoration: underline; }
footer .legal-links .sep { color: #7B8792; }

@media (max-width: 900px) {
  .hero-grid { grid-template-columns: 1fr; padding-top: 36px; }
  .hero-aside { display: none; }
  .pricing { grid-template-columns: 1fr; }
  .comparison-cards { grid-template-columns: 1fr; }
  .loop { grid-template-columns: 1fr; }
  .loop-arrow { min-height: 12px; transform: rotate(90deg); }
}
@media (max-width: 640px) {
  .hero { padding: 12px 14px 36px; }
  .hero::before { inset: 8px; }
  .hero-top { padding: 0 14px 10px; }
  .hero-grid { padding: 22px 14px 10px; }
  .hero h1 { font-size: 2.4rem; }
  .hero p.sub { margin-top: 16px; font-size: 1rem; }
  .cyan-rule { margin-top: 18px; }
  .hero .meta { margin-top: 14px; }
  .callout--statement { grid-template-columns: 1fr; gap: 8px; }
  main { margin-top: -38px; padding: 0 14px 17px; }
  nav.toc { border-radius: var(--radius-s); }
  section { margin-bottom: var(--space-5); }
  h2 { grid-template-columns: 36px minmax(0, 1fr); gap: 10px; font-size: 1.35rem; }
  h2 .num { width: 36px; height: 36px; font-size: .9rem; }
  .section-intro { margin-left: 46px; }
  .page-training .closing-title { margin-left: 46px; }
  .page-legal section > ul.clean { margin-left: 46px; }
  .page-legal nav.toc { flex-wrap: nowrap; overflow-x: auto; }
  .card, .plan, .plan-band { padding: 18px; }
  .plan-band ul { columns: 1; }
  .contact-box { padding: 32px 18px; }
  .contact-box .steps { align-items: stretch; flex-direction: column; }
  .contact-box .steps span { text-align: left; }
  table { min-width: 560px; }
}
@media print {
  nav.toc, .quiz-actions { display: none; }
  body { background: #fff; }
  .hero { padding: 30px; }
  .card, .table-wrap, details, .plan, .diagram { box-shadow: none; }
  footer { break-inside: avoid; }
}

/* ================= P4 — revue mobile (390 px) =================
   1. Bandeau sommaire flottant : visible dès l'arrivée, la page passe dessous.
   2. Tableaux : pleine largeur sans glisse ; chaque ligne devient un bloc
      (label = première cellule en gras, cellules suivantes préfixées par
      l'en-tête de colonne renseigné en data-label par les pages).
   3. « Pour aller plus loin » : 2 colonnes côte à côte sur mobile. */
@media (max-width: 640px) {
  .table-wrap table { display: block; min-width: 0; }
  .table-wrap thead { display: none; }
  .table-wrap tbody { display: block; }
  .table-wrap tbody tr {
    display: grid;
    grid-template-columns: minmax(0, 45%) minmax(0, 1fr);
    column-gap: 14px;
    padding: 14px 14px 14px 16px;
    border-bottom: 1px solid var(--color-line);
  }
  .table-wrap tbody tr:last-child { border-bottom: 0; }
  .table-wrap td { display: block; width: auto; padding: 0; border: 0; white-space: normal; }
  .table-wrap tbody td:first-child { grid-column: 1; grid-row: 1; padding-right: 8px; font-size: .95rem; font-weight: 700; }
  .table-wrap tbody td:not(:first-child) { grid-column: 2; }
  .table-wrap tbody td:not(:first-child):not(:nth-child(2)) { padding-top: 10px; }
  .table-wrap td[data-label] { color: var(--color-text-2); }
  .table-wrap td[data-label]::before {
    display: block;
    margin-bottom: 2px;
    content: attr(data-label);
    color: var(--color-text);
    font-size: .68rem;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
  }

  /* « Pour aller plus loin » : les deux cartes à la suite, sans être écrasées. */
  .page-training h2.closing-title { display: block; }
  .grid-mobile-2 { grid-template-columns: 1fr 1fr; gap: 12px; }
  .grid-mobile-2 .card { padding: 12px 11px; }
  .grid-mobile-2 .card h3 { margin-bottom: 6px; font-size: .98rem; }
  .grid-mobile-2 .card p, .grid-mobile-2 .card li { font-size: .84rem; line-height: 1.42; }
  .grid-mobile-2 ul.clean li { margin-bottom: 7px; padding-left: 14px; }
}

/* Comparatif offre : la colonne Balastia se détache des deux alternatives. */
.compare th:last-child, .compare td:last-child { font-weight: 700; }

/* Les textes de repère restent sur une ligne aux largeurs desktop testées.
   Le retour à la ligne reste actif sur les écrans intermédiaires et mobiles. */
@media (min-width: 1100px) {
  .hero .meta { max-width: none; white-space: nowrap; }
}

@media (max-width: 640px) {
  .table-wrap .tag { max-width: 100%; white-space: normal; }
}

/* Quiz : verdict à l'endroit en cyan, à l'erreur en rouge. */
.q .explain .verdict strong { color: var(--color-accent-text); }
.q .explain .verdict-faux strong { color: var(--color-danger); }