/* Tout est coupé. Sauf l'armée. — COMAC
   Direction « Loud and flat » : aplats rouge / vert / noir sur fond blanc,
   Bebas Neue pour les titres, EB Garamond pour le texte. */

@font-face {
  font-family: "Bebas Neue";
  src: url("/assets/fonts/bebas-neue-latin-400.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "EB Garamond";
  src: url("/assets/fonts/eb-garamond-latin-wght.woff2") format("woff2");
  font-weight: 400 800;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "EB Garamond";
  src: url("/assets/fonts/eb-garamond-latin-wght-italic.woff2") format("woff2");
  font-weight: 400 800;
  font-style: italic;
  font-display: swap;
}

:root {
  /* Couleurs du logo */
  --paper: #ffffff;
  --ink: #191919;
  --red: #ff213f;        /* aplats et grands textes (noir sur rouge : 4,64) */
  --green: #179079;      /* graphismes et grands textes */
  /* Teintes pour le petit texte (contraste AA) */
  --red-ink: #d4002a;    /* sur blanc : 5,48 */
  --green-deep: #0e7a66; /* fond vert sous du texte blanc : 5,26 */
  --green-shade: #0a5e4f;

  --display: "Bebas Neue", "Arial Narrow", Impact, sans-serif;
  --text: "EB Garamond", Garamond, "Times New Roman", serif;

  /* Échelle : petit, texte, chapeau, sous-titre, titre, affiche, géant */
  --step-small: clamp(0.875rem, 0.85rem + 0.1vw, 0.9375rem);
  --step-body: clamp(1.1875rem, 1.12rem + 0.3vw, 1.3125rem);
  --step-lead: clamp(1.375rem, 1.2rem + 0.75vw, 1.75rem);
  --step-sub: clamp(1.75rem, 1.2rem + 1.5vw, 2.25rem);
  --step-head: clamp(2.75rem, 1.4rem + 5.4vw, 6rem);
  --step-poster: clamp(3rem, 1rem + 8vw, 8.5rem);
  --step-display: clamp(6.5rem, min(25vw, 36svh), 30rem);
  --step-hero: clamp(4rem, min(19vw, 34svh), 22rem);

  --m: clamp(16px, 2.4vw, 32px);   /* marges extérieures */
  --gap: 8px;
  --section-pad: clamp(72px, 9vw, 160px);
}

/* ---------- Base ---------- */
*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 16px; }
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--text);
  font-size: var(--step-body);
  line-height: 1.45;
  font-kerning: normal;
  text-rendering: optimizeLegibility;
}
img { display: block; max-width: 100%; height: auto; }
h1, h2, h3, p, ul, dl, figure { margin: 0; }
ul { padding: 0; list-style: none; }
p { text-wrap: pretty; }
h1, h2, h3 { text-wrap: balance; }
sub { font-size: 0.7em; line-height: 0; }
a { color: inherit; text-decoration-thickness: 0.07em; text-underline-offset: 0.16em; }
a:hover { text-decoration-thickness: 0.14em; }
:focus-visible { outline: 3px solid currentColor; outline-offset: 3px; }
strong { font-weight: 650; }
cite { font-style: italic; }

.wrap { padding-inline: var(--m); }
.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;
}
.skip {
  position: absolute; left: var(--m); top: -100px; z-index: 10;
  background: var(--ink); color: var(--paper); padding: 12px 18px;
}
.skip:focus { top: 12px; }

.lead { font-size: var(--step-lead); line-height: 1.3; }
.source { font-size: var(--step-small); line-height: 1.45; }
figcaption { font-size: var(--step-small); line-height: 1.4; margin-top: 10px; }

/* ---------- Boutons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  font-family: var(--display); font-size: var(--step-lead); line-height: 1;
  letter-spacing: 0.02em; text-decoration: none;
  padding: 18px 28px 15px; border: 0; border-radius: 0; cursor: pointer;
  transition: transform 160ms ease-out, background-color 160ms ease-out, color 160ms ease-out;
}
.btn:active { transform: translateY(2px); }
.btn--ink { background: var(--ink); color: var(--paper); }
.btn--ink:hover { background: var(--red-ink); }
.btn--paper { background: var(--paper); color: var(--ink); }
.btn--paper:hover { background: var(--ink); color: var(--paper); }
.btn--small { padding: 13px 20px 11px; }

/* ---------- En-tête ---------- */
.top {
  display: flex; align-items: center; gap: 24px;
  padding: 18px var(--m);
}
.top__logo { flex: none; }
.top__logo img { width: clamp(108px, 11vw, 160px); }
.top__nav { margin-left: auto; }
.top__list { display: flex; flex-wrap: wrap; gap: 6px 22px; }
.top__list a { text-decoration: none; font-size: var(--step-body); }
.top__list a:hover { text-decoration: underline; }
.top__menu {
  display: none;
  font: inherit; font-size: var(--step-body); background: none; border: 0; color: var(--ink);
  padding: 8px 0; cursor: pointer; text-decoration: underline; text-underline-offset: 0.16em;
}

/* ---------- Hero ---------- */
.hero {
  display: grid;
  grid-template-rows: 1fr auto;
  min-height: calc(100svh - 96px);
  padding: 0 var(--m) 28px;
}
.hero__title {
  align-self: center;
  font-family: var(--display); font-weight: 400;
  font-size: var(--step-hero);
  line-height: 0.86; letter-spacing: -0.01em;
  text-transform: uppercase;
  padding-block: 2svh 4svh;
}
/* Le masque de l'animation (overflow: hidden) laisse de la place aux accents des capitales (É). */
.hero__line { display: block; overflow: hidden; padding-top: 0.16em; margin-top: -0.12em; }
.hero__line > span { display: inline-block; }
.hero__line--right { text-align: right; }
.hero__foot {
  display: flex; align-items: flex-end; justify-content: space-between; gap: 32px;
}
.hero__lead { font-size: var(--step-lead); line-height: 1.3; max-width: 44ch; }

/* ---------- 1. Défense ---------- */
.defense { padding-top: var(--section-pad); }
.tiles {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  grid-template-rows: auto auto;
  column-gap: var(--gap);
  padding-inline: var(--m);
}
.tiles__heading {
  grid-column: 7 / 13; grid-row: 1;
  align-self: end;
  font-family: var(--display); font-weight: 400; font-size: var(--step-head);
  line-height: 0.9; text-transform: uppercase;
  padding: 0 0 clamp(16px, 2vw, 28px) 4px;
  min-height: 14vh; display: flex; align-items: flex-end;
}
.tile {
  display: flex; flex-direction: column; justify-content: space-between; gap: 24px;
  padding: clamp(20px, 2vw, 28px);
}
.tile__fig {
  font-family: var(--display); font-size: var(--step-head); line-height: 0.9;
  font-variant-numeric: lining-nums;
}
.tile__cap { max-width: 30ch; }
.tile--red { grid-column: 1 / 7; grid-row: 1 / 3; background: var(--red); color: var(--ink); min-height: min(70vh, 640px); }
.tile--ink { grid-column: 7 / 10; grid-row: 2; background: var(--ink); color: var(--paper); min-height: min(44vh, 400px); }
.tile--green { grid-column: 10 / 13; grid-row: 2; background: var(--green-deep); color: var(--paper); min-height: min(34vh, 310px); margin-top: 12vh; }

.defense__body {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: var(--gap);
  row-gap: clamp(40px, 5vw, 72px);
  padding-top: clamp(56px, 7vw, 112px);
  padding-bottom: var(--section-pad);
}
.chart { grid-column: 1 / 13; grid-row: 1; }
.chart__title { font-size: var(--step-body); font-weight: 650; margin-bottom: 20px; }
.chart__plot { position: relative; }
.chart__plot svg { display: block; width: 100%; height: auto; overflow: visible; }
.chart__plot text { font-family: var(--text); fill: var(--ink); }
.chart__plot .chart__year { font-size: 15px; }
.chart__plot .chart__val { font-size: 15px; font-weight: 650; font-variant-numeric: lining-nums; }
.chart__bar { fill: var(--ink); }
.chart__bar--hi { fill: var(--red); }
.chart__tip {
  position: absolute; pointer-events: none; z-index: 2;
  background: var(--ink); color: var(--paper);
  font-size: var(--step-small); line-height: 1.3; padding: 8px 12px;
  transform: translate(-50%, calc(-100% - 10px)); white-space: nowrap;
}
.chart__table { border-collapse: collapse; margin-top: 8px; font-variant-numeric: lining-nums tabular-nums; }
.chart__table th, .chart__table td { text-align: left; padding: 4px 24px 4px 0; font-weight: 400; }
.chart__table thead th { font-weight: 650; }
.js .chart__table { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.chart__cap { margin-top: 20px; display: grid; gap: 8px; max-width: 70ch; }

.defense__context { grid-column: 1 / 7; grid-row: 2; display: grid; gap: 18px; align-content: start; max-width: 44ch; font-size: var(--step-lead); line-height: 1.3; }
.defense__context .source { line-height: 1.45; }
.calc {
  grid-column: 7 / 13; grid-row: 2;
  background: var(--ink); color: var(--paper);
  padding: clamp(24px, 3vw, 44px);
  display: grid; gap: 28px;
}
.calc__ask, .calc__answer { display: grid; gap: 18px; align-content: start; }
.calc__title { font-family: var(--display); font-weight: 400; font-size: var(--step-sub); line-height: 0.95; }
.calc__choices { border: 0; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.calc__choices legend { font-size: var(--step-small); margin-bottom: 8px; padding: 0; }
.calc__choices label {
  position: relative; cursor: pointer;
  background: #333; padding: 10px 14px; font-size: var(--step-body);
  transition: background-color 140ms ease-out;
}
.calc__choices label:hover { background: #444; }
.calc__choices input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.calc__choices label:has(input:checked) { background: var(--red); color: var(--ink); }
.calc__choices label:has(input:focus-visible) { outline: 3px solid var(--paper); outline-offset: 2px; }
.calc__out { font-size: var(--step-lead); line-height: 1.3; }
.calc__out strong { color: var(--red); font-weight: 650; }
.calc__how { font-size: var(--step-small); }

/* ---------- 2. Armes ---------- */
.armes__stage {
  background: var(--red); color: var(--ink);
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: var(--gap); row-gap: clamp(32px, 4vw, 64px);
  padding: var(--section-pad) var(--m);
  overflow: hidden;
}
.armes__stack {
  grid-column: 1 / 8; grid-row: 1;
  font-family: var(--display); font-weight: 400;
  font-size: var(--step-poster); line-height: 0.88;
  text-transform: uppercase; white-space: nowrap;
}
.armes__stack span { display: block; }
.armes__photo { grid-column: 8 / 13; grid-row: 1 / 3; align-self: center; transform: rotate(-3deg); }
.armes__photo img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; object-position: 62% 50%; }
.armes__intro {
  grid-column: 1 / 7; grid-row: 2;
  display: grid; gap: 16px;
  font-size: var(--step-lead); line-height: 1.3; max-width: 44ch;
}

.armes__body {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: var(--gap);
  padding-block: var(--section-pad);
}
.armes__list { grid-column: 1 / 9; display: grid; gap: clamp(28px, 3vw, 40px); align-content: start; }
.armes__list li { display: grid; grid-template-columns: minmax(0, 15rem) minmax(0, 1fr); column-gap: 24px; row-gap: 6px; }
.armes__list h3 {
  grid-row: 1 / 3;
  font-family: var(--display); font-weight: 400; font-size: var(--step-sub); line-height: 0.95;
}
.armes__list p { max-width: 58ch; }
.armes__f16 { grid-column: 9 / 13; align-self: start; position: sticky; top: 32px; }

/* ---------- 3. Études ---------- */
.etudes__field {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  grid-template-rows: auto 1fr;
  column-gap: var(--gap);
  min-height: 92svh;
  padding: var(--section-pad) var(--m);
}
.etudes__claim {
  grid-column: 1 / 8; grid-row: 1;
  font-family: var(--display); font-weight: 400; font-size: var(--step-head);
  line-height: 0.9; text-transform: uppercase; max-width: 9em;
}
.etudes__figure { grid-column: 1 / 8; grid-row: 2; align-self: end; display: grid; gap: 14px; padding-top: 18vh; }
.etudes__num {
  font-family: var(--display); font-size: var(--step-display); line-height: 0.8;
  color: var(--red); letter-spacing: -0.01em; white-space: nowrap;
}
.etudes__cap { max-width: 44ch; font-size: var(--step-lead); line-height: 1.3; }
.etudes__photo {
  grid-column: 9 / 13; grid-row: 1 / 3; align-self: center;
  transform: rotate(3deg);
}
.etudes__photo img { width: 100%; aspect-ratio: 5 / 6; object-fit: cover; }

.minerval { background: var(--green-deep); color: var(--paper); padding-block: var(--section-pad); }
.minerval__grid {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: var(--gap); row-gap: clamp(32px, 4vw, 56px);
}
.minerval__fig {
  grid-column: 1 / 13;
  font-family: var(--display); font-weight: 400; font-size: var(--step-head); line-height: 0.9;
  font-variant-numeric: lining-nums;
}
.minerval__text { grid-column: 1 / 8; display: grid; gap: 16px; max-width: 60ch; }
.minerval__photo { grid-column: 9 / 13; align-self: start; }
.minerval__photo img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }

/* ---------- 4. Climat ---------- */
.climat__photo { position: relative; }
.climat__photo img { width: 100%; height: min(78svh, 56vw); object-fit: cover; object-position: 50% 45%; }
.climat__photo figcaption {
  position: absolute; left: var(--m); bottom: 12px; margin: 0;
  background: var(--ink); color: var(--paper); padding: 6px 10px;
}
.climat__bar { background: var(--ink); color: var(--paper); padding-block: clamp(48px, 6vw, 96px) var(--section-pad); }
.climat__grid {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: var(--gap); row-gap: clamp(32px, 4vw, 56px);
}
.climat__title {
  grid-column: 1 / 13;
  font-family: var(--display); font-weight: 400; font-size: var(--step-head); line-height: 0.9; text-transform: uppercase;
}
.climat__nato { grid-column: 1 / 7; display: grid; gap: 16px; align-content: start; max-width: 58ch; }
.climat__be { grid-column: 8 / 13; display: grid; gap: 16px; align-content: start; }
.climat__be h3 { font-family: var(--display); font-weight: 400; font-size: var(--step-sub); line-height: 0.95; }
.climat__num { font-family: var(--display); font-size: var(--step-head); line-height: 0.9; color: var(--red); }

/* ---------- 5. Sécu ---------- */
.secu { background: var(--red); color: var(--ink); overflow: hidden; padding-top: var(--section-pad); }
.secu__head {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: var(--gap); row-gap: 28px;
  padding-bottom: clamp(48px, 6vw, 96px);
}
.secu__title {
  grid-column: 1 / 7;
  font-family: var(--display); font-weight: 400; font-size: var(--step-head); line-height: 0.9; text-transform: uppercase;
}
.secu__statement { grid-column: 7 / 13; align-self: end; font-size: var(--step-lead); line-height: 1.3; max-width: 34ch; }
.secu__statement strong { font-weight: 700; }
.secu__card {
  width: min(56vw, 820px); margin-inline: auto;
  background: var(--paper); color: var(--ink);
  padding: clamp(28px, 4vw, 56px) clamp(24px, 4vw, 56px) 160px;
  margin-bottom: -96px;
  display: grid; gap: 18px;
}
.secu__cardtitle {
  font-family: var(--display); font-weight: 400; font-size: var(--step-sub); line-height: 0.95;
  text-align: center;
}
.secu__period { text-align: center; font-size: var(--step-small); margin-top: -10px; }
.secu__photo img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; }
.cuts { display: grid; gap: 4px; margin-block: 8px; font-variant-numeric: lining-nums tabular-nums; }
.cuts > div { display: flex; justify-content: space-between; gap: 16px; padding: 10px 0; }
.cuts dt { font-size: var(--step-lead); line-height: 1.2; }
.cuts dd { margin: 0; font-size: var(--step-lead); font-weight: 700; line-height: 1.2; white-space: nowrap; }
.cuts__total { background: var(--ink); color: var(--paper); padding: 14px 16px !important; margin-top: 8px; }
.cuts__total dt { font-weight: 650; }

/* ---------- 6. Ressources ---------- */
.sources { padding-block: var(--section-pad); }
.sources__title {
  font-family: var(--display); font-weight: 400; font-size: var(--step-head); line-height: 0.9; text-transform: uppercase;
  margin-bottom: clamp(24px, 3vw, 48px);
}
.poster-list a {
  display: flex; align-items: baseline; justify-content: space-between; gap: 24px;
  text-decoration: none;
  transition: color 140ms ease-out;
}
.poster-list a:hover, .poster-list a:focus-visible { color: var(--red-ink); }
.poster-list__item {
  font-family: var(--display); font-size: var(--step-poster); line-height: 0.92;
  text-transform: uppercase; white-space: nowrap;
}
.poster-list__meta { font-size: var(--step-body); text-align: right; font-variant-numeric: lining-nums; }

/* ---------- 7. Rejoins-nous ---------- */
.rejoindre { background: var(--green-deep); color: var(--paper); padding-bottom: var(--section-pad); overflow: hidden; }
.strip { padding-top: 48px; overflow-x: auto; scrollbar-width: none; }
.strip::-webkit-scrollbar { display: none; }
.strip__track { display: flex; gap: var(--gap); width: max-content; }
.strip__track img { height: 150px; width: auto; object-fit: cover; }
.strip__track img:nth-child(3n + 1) { aspect-ratio: 3 / 4; }
.strip__track img:nth-child(3n + 2) { aspect-ratio: 1 / 1; }
.strip__track img:nth-child(3n) { aspect-ratio: 3 / 2; }

.rejoindre__grid {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: var(--gap); row-gap: 40px;
  padding-top: 72px;
}
.rejoindre__intro { grid-column: 1 / 6; display: grid; gap: 20px; align-content: start; align-self: start; position: sticky; top: 32px; }
.rejoindre__title {
  /* Interligne plus ouvert : la cédille du « Ç » ne doit pas toucher la ligne suivante. */
  font-family: var(--display); font-weight: 400; font-size: var(--step-head); line-height: 1.02; text-transform: uppercase;
}
.rejoindre__intro p { font-size: var(--step-lead); line-height: 1.3; }

.form, .form__done { grid-column: 6 / 13; }
.form { display: grid; gap: 28px; }
.form__req { font-size: var(--step-small); }
.form__fields { display: grid; grid-template-columns: 1fr 1fr; gap: 20px var(--gap); }
.field { display: grid; gap: 8px; align-content: start; }
.field label, .choices legend { font-size: var(--step-body); font-weight: 600; }
.field input {
  width: 100%; min-height: 60px;
  font: inherit; font-size: var(--step-body);
  color: var(--ink); background: var(--paper);
  border: 0; border-radius: 0; padding: 12px 16px;
}
.field input:focus { outline: 4px solid var(--ink); outline-offset: 0; }
.field input[aria-invalid="true"] { background: #ffe9ec; }
.field__error {
  justify-self: start;
  background: var(--ink); color: var(--paper);
  font-size: var(--step-small); font-weight: 600; padding: 6px 10px;
}

.choices { border: 0; padding: 0; margin: 0; display: grid; gap: var(--gap); }
.choices legend { padding: 0; margin-bottom: 12px; }
.choice, .consent {
  display: grid; grid-template-columns: 28px 1fr; gap: 14px; align-items: start;
  background: var(--green-shade); padding: 16px 18px; cursor: pointer;
  transition: background-color 140ms ease-out;
}
.choice:hover { background: #084c40; }
.choice:has(input:checked) { background: var(--paper); color: var(--ink); }
.choice input, .consent input {
  appearance: none; -webkit-appearance: none; color: inherit;
  width: 26px; height: 26px; margin: 1px 0 0;
  border: 2px solid currentColor; background: transparent;
  display: grid; place-content: center; cursor: pointer;
}
.choice input { border-radius: 50%; }
.choice input::before { content: ""; width: 12px; height: 12px; border-radius: 50%; background: currentColor; transform: scale(0.4); opacity: 0; transition: transform 120ms ease-out, opacity 120ms ease-out; }
.choice input:checked::before { transform: scale(1); opacity: 1; }
.consent input::before {
  content: ""; width: 14px; height: 8px; border: solid currentColor; border-width: 0 0 3px 3px;
  transform: rotate(-45deg) scale(0.4); opacity: 0; margin-top: -4px; transition: transform 120ms ease-out, opacity 120ms ease-out;
}
.consent input:checked::before { transform: rotate(-45deg) scale(1); opacity: 1; }
.consent { cursor: default; line-height: 1.4; }
.consent label { cursor: pointer; }
.consent .field__error, .choices .field__error { grid-column: 1 / -1; }
.choice input:focus-visible, .consent input:focus-visible { outline: 3px solid currentColor; outline-offset: 3px; }

.form__turnstile:empty { display: none; }
.hp { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; } /* taste-skill-ignore : champ anti-robot invisible, pas un filet */
.form__submit { justify-self: start; min-width: 220px; min-height: 64px; }
.form__submit[disabled] { opacity: 0.6; cursor: wait; }
.form__status:empty { display: none; }
.form__status { background: var(--ink); color: var(--paper); padding: 12px 16px; font-weight: 600; }
.form__small, .form__noscript { font-size: var(--step-small); }
.form__done { background: var(--paper); color: var(--ink); padding: clamp(28px, 4vw, 56px); display: grid; gap: 14px; align-content: start; }
.form__done:focus { outline: 4px solid var(--ink); outline-offset: 4px; }
.form__donetitle { font-family: var(--display); font-size: var(--step-head); line-height: 0.9; text-transform: uppercase; }

/* ---------- Pied de page ---------- */
.foot { padding-block: var(--section-pad) 32px; }
.foot__logo { width: min(640px, 72vw); }
.foot__cols {
  display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap); row-gap: 32px;
  margin-top: 56px; font-size: var(--step-small);
}
.foot__cols > div:nth-child(1) { grid-column: 1 / 4; }
.foot__cols > div:nth-child(2) { grid-column: 4 / 7; }
.foot__credits { grid-column: 7 / 13; }
.foot__cols ul { display: grid; gap: 8px; }
.foot__cols p + p { margin-top: 10px; }
.foot__h { font-family: var(--display); font-weight: 400; font-size: var(--step-sub); line-height: 1; margin-bottom: 12px; }
.foot__credits li { font-size: var(--step-small); }
.foot__last {
  display: flex; align-items: center; justify-content: space-between; gap: 20px; flex-wrap: wrap;
  margin-top: 56px; font-size: var(--step-small);
}

/* ---------- Page 404 ---------- */
.introuvable { min-height: 100svh; display: grid; align-content: center; gap: 28px; }
.introuvable__titre { font-family: var(--display); font-weight: 400; font-size: var(--step-poster); line-height: 0.9; text-transform: uppercase; }

/* ---------- Tablette ---------- */
@media (max-width: 1023px) {
  .tiles__heading { grid-column: 1 / 13; grid-row: 1; min-height: 0; padding-left: 0; }
  .tile--red { grid-column: 1 / 13; grid-row: 2; min-height: 48vw; }
  .tile--ink { grid-column: 1 / 7; grid-row: 3; margin-top: var(--gap); min-height: 40vw; }
  .tile--green { grid-column: 7 / 13; grid-row: 3; margin-top: calc(var(--gap) + 32px); min-height: 36vw; }
  .defense__context, .chart, .calc { grid-column: 1 / 13; grid-row: auto; }
  .armes__stack, .armes__photo, .armes__intro, .armes__list { grid-column: 1 / 13; grid-row: auto; }
  .armes__photo { max-width: 640px; }
  .armes__f16 { grid-column: 1 / 13; position: static; max-width: 640px; margin-top: 48px; }
  .climat__grid { row-gap: 64px; }
  .minerval__text { grid-column: 1 / 13; }
  .minerval__photo { grid-column: 1 / 13; max-width: 640px; }
  .climat__nato, .climat__be { grid-column: 1 / 13; }
  .secu__title, .secu__statement { grid-column: 1 / 13; }
  .secu__card { width: min(88vw, 760px); }
  .rejoindre__intro, .form, .form__done { grid-column: 1 / 13; }
  .rejoindre__intro { position: static; }
  .foot__cols > div:nth-child(1) { grid-column: 1 / 7; }
  .foot__cols > div:nth-child(2) { grid-column: 7 / 13; }
  .foot__credits { grid-column: 1 / 13; }
}

/* ---------- Téléphone ---------- */
@media (max-width: 679px) {
  :root { --gap: 6px; }
  .top { flex-wrap: wrap; gap: 12px 16px; }
  .top__cta { display: none; }
  .js .top__menu { display: block; }
  .js .top__list { display: none; }
  .js .top__nav.is-open .top__list { display: grid; gap: 4px; padding-bottom: 8px; }
  .top__nav { margin-left: auto; }
  .top__nav.is-open { flex-basis: 100%; order: 3; }
  .top__nav.is-open .top__menu { margin-left: auto; }
  .top__list a { display: block; padding: 10px 0; }

  .hero { min-height: 74svh; padding-bottom: 20px; }
  .hero__title { font-size: 17.5vw; line-height: 0.9; align-self: start; padding-top: 10svh; }
  .hero__line--right { text-align: left; }
  .hero__foot { flex-direction: column; align-items: stretch; gap: 20px; }
  .hero__lead { font-size: var(--step-body); }
  .hero__cta { width: 100%; }

  .tiles__heading { padding-bottom: 16px; }
  .tile--red { min-height: 64vw; }
  .tile--ink, .tile--green { min-height: 56vw; padding: 16px; }

  .armes__stack { font-size: 15vw; }
  .armes__photo { width: 86%; justify-self: center; }
  .armes__list li { grid-template-columns: 1fr; }
  .armes__list h3 { grid-row: auto; }

  .etudes__field { min-height: 0; row-gap: 32px; }
  .etudes__claim, .etudes__figure, .etudes__photo { grid-column: 1 / 13; grid-row: auto; }
  .etudes__figure { padding-top: 0; }
  .etudes__num { font-size: 40vw; }
  .etudes__photo { width: 80%; justify-self: end; }

  .climat__photo img { height: 70vw; }
  .climat__photo figcaption { position: static; margin: 0; padding: 8px var(--m); }

  .secu__card { width: 92vw; padding-inline: 20px; }
  .cuts > div { flex-direction: column; gap: 2px; }

  .poster-list__item { font-size: var(--step-head); }
  .poster-list a { flex-direction: column; align-items: flex-start; gap: 6px; padding-bottom: 22px; }
  .poster-list__meta { text-align: left; font-size: var(--step-small); }

  .strip { padding-top: 32px; }
  .strip__track img { height: 110px; }
  .form__fields { grid-template-columns: 1fr; }
  .form__submit { width: 100%; }
  .foot__cols > div:nth-child(1), .foot__cols > div:nth-child(2) { grid-column: 1 / 13; }
}

/* ---------- Mouvement ----------
   Signature : le titre du hero monte ligne par ligne au chargement.
   Puis : entrée discrète des éléments de chaque section, barres du graphique qui poussent,
   bandeau de photos qui défile. Tout état masqué n'existe que si main.js tourne (.motion)
   et si l'utilisateur n'a pas demandé moins de mouvement. */
:root { --ease-out: cubic-bezier(0.16, 1, 0.3, 1); }
.chart__bar { transform-box: fill-box; transform-origin: 50% 100%; }
.chart--h .chart__bar { transform-origin: 0 50%; }

@media (prefers-reduced-motion: no-preference) {
  .js .hero__line > span { translate: 0 105%; animation: monte 800ms var(--ease-out) forwards; }
  .js .hero__line + .hero__line > span { animation-delay: 110ms; }
  /* La phrase d'appui n'est pas animée : c'est l'élément LCP, elle doit s'afficher tout de suite. */

  .motion [data-reveal]:not(.is-in) > * { opacity: 0; translate: 0 24px; }
  .motion [data-reveal] > * {
    transition: opacity 620ms var(--ease-out), translate 620ms var(--ease-out);
    transition-delay: calc(var(--d, 0) * 80ms);
  }

  .chart__bar { transition: transform 800ms var(--ease-out); transition-delay: calc(var(--d, 0) * 45ms); }
  .motion .chart__bar--attente { transform: scaleY(0.02); }
  .motion .chart--h .chart__bar--attente { transform: scaleX(0.02); }

  .strip { overflow: hidden; }
  .strip__track { animation: defile 80s linear infinite; }
  .strip:hover .strip__track { animation-play-state: paused; }
}
@keyframes monte { to { translate: 0 0; } }
@keyframes defile { to { transform: translateX(calc(-50% - var(--gap) / 2)); } }

/* ---------- Mouvement réduit ---------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; }
}