/* BUILD — L'atelier. Thème plein jour : typographie élastique, aplats francs, anneau de projets.
   Base lisible sans JavaScript ; les enrichissements vivent sous .is-motion et .has-webgl (posées par build.js).
   Échelle typographique commune (--fs-*, --ls-caps, --measure) : shared/transformer.css. Tout texte est en rem :
   la taille de police choisie dans le navigateur est respectée. Plancher : 14 px pour les étiquettes, 16 px pour
   toute phrase ; la chasse fixe est réservée aux données courtes (heure, dates, compteurs, numéros, étiquettes). */

:root {
  --paper: #f3f6f6;
  --ink: #12313c;
  --white: #fdfefe;
  --blue: #2658ed;
  --mint: #18a999;
  --coral: #ff6746;
  --muted: #4a5f68; /* 6,18:1 sur le papier (#5b7079 n'en faisait que 4,78) */
  --line: rgba(18, 49, 60, 0.18);
  --line-soft: rgba(18, 49, 60, 0.07);

  /* Transformeuse RUN ⇄ BUILD */
  --tf-fg: #12313c;
  --tf-muted: #4a5f68;
  --tf-line: rgba(18, 49, 60, 0.18);
  --tf-knob: #ff6746;
  --tf-knob-ink: #fdfefe;

  /* Composants partagés (shared/composants.css) */
  --cmp-bg: var(--white);
  --cmp-fg: var(--ink);
  --cmp-muted: var(--muted);
  --cmp-line: var(--line);
  --cmp-surface: rgba(253, 254, 254, 0.7);
  --cmp-accent: var(--ink);
  --cmp-accent-ink: var(--white);
  --cmp-alert: #d9482a; /* corail foncé : le corail clair n'a que 2,65:1 sur le papier */
  --cmp-ok: #0e7c70; /* menthe foncé : la menthe claire n'a que 2,69:1 */
  --cmp-ghost: rgba(18, 49, 60, 0.16);
  --cmp-focus: var(--ink);
  --cmp-radius: 18px;
  --cmp-shadow: 0 34px 60px -38px rgba(18, 49, 60, 0.6);
  --cmp-font: var(--f-sans);
  --cmp-display: var(--f-display);

  --header: 72px;
  --gutter: 32px;
  --gap: 20px;
  --f-display: "Anybody", "Arial Narrow", "Helvetica Neue", Arial, sans-serif;
  --f-sans: "Geist", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --f-mono: "Geist Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --focus: var(--ink);
}

@media (max-width: 820px) {
  :root {
    --gutter: 20px;
    --gap: 14px;
  }
}

/* ---------- Base ---------- */

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  background: var(--paper);
  color: var(--ink);
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

body {
  margin: 0;
  min-width: 320px;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--f-sans);
  font-size: var(--fs-body);
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

img {
  display: block;
  max-width: 100%;
  height: auto;
}

a {
  color: inherit;
}

p,
h1,
h2,
h3,
h4,
dl,
dd,
ul,
ol,
figure {
  margin: 0;
}

ul,
ol {
  padding: 0;
  list-style: none;
}

button {
  font: inherit;
  color: inherit;
}

:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 3px;
  border-radius: 4px;
}

main:focus,
[tabindex="-1"]:focus {
  outline: none;
}

[hidden] {
  display: none !important;
}

::selection {
  background: var(--ink);
  color: var(--white);
}

.sr-only {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0 0 0 0) !important;
  clip-path: inset(50%) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

.skip-link {
  position: fixed;
  top: 12px;
  left: 12px;
  z-index: 100;
  padding: 12px 18px;
  border-radius: 999px;
  background: var(--ink);
  color: var(--white);
  font-weight: 600;
  text-decoration: none;
  transform: translateY(-160%);
  transition: transform 0.25s var(--ease-out);
}

.skip-link:focus-visible {
  transform: none;
  outline-color: var(--coral);
}

.wrap {
  width: 100%;
  max-width: 120rem;
  margin-inline: auto;
  padding-inline: var(--gutter);
}

section,
.site-footer {
  position: relative;
  overflow-x: clip;
}

section[id],
main {
  scroll-margin-top: 0;
}

/* Focus clavier : l'en-tête fixe (72 px) ne doit jamais couvrir le contrôle qui prend le focus (WCAG 2.4.11). Sans marge, le
   navigateur juge visible un contrôle placé sous l'en-tête et ne défile pas, surtout en Maj+Tab depuis le bas de la page.
   Les sections gardent leur marge nulle (ci-dessus) : elles se posent au ras de l'en-tête, leur rembourrage compte déjà sa
   hauteur. */
main a,
main button,
main video,
.site-footer a {
  scroll-margin-top: calc(var(--header) + 16px);
}

/* Là où la pastille « Écrire » s'affiche (sous 67,5 em, de la sortie de l'accueil jusqu'au contact), elle couvre le bas de
   l'écran : 16 px de marge basse, 48 px de haut, 8 px d'air. Les commandes de l'anneau épinglé la dégagent déjà de 78 px
   (voir .atelier__stage plus bas). */
@media (max-width: 67.5em) {
  main > :not(.hero, .contact) :is(a, button, video) {
    scroll-margin-bottom: calc(72px + env(safe-area-inset-bottom, 0px));
  }
}

/* ---------- Typographie ---------- */

.display {
  font-family: var(--f-display);
  font-weight: 800;
  font-stretch: 100%;
  font-variation-settings: "wdth" 100, "wght" 800;
  text-transform: uppercase;
  letter-spacing: -0.035em;
  line-height: 0.8;
  font-kerning: normal;
}

/* L'interlettrage en em se calcule sur chaque élément (sinon les lettres héritent de la valeur du titre en px). */
.display * {
  letter-spacing: -0.035em;
}

/* Étiquettes de données : chasse fixe en capitales, 14 px au moins. */
.label {
  font-family: var(--f-mono);
  font-size: var(--fs-label);
  font-weight: 500;
  line-height: 1.4;
  letter-spacing: var(--ls-caps);
  text-transform: uppercase;
}

.label--muted {
  color: var(--muted);
}

/* Surtitre qui est une phrase (39 caractères) : Geist en bas de casse, la chasse fixe reste aux données courtes. */
.label--text {
  font-family: var(--f-sans);
  font-size: var(--fs-note);
  letter-spacing: 0;
  text-transform: none;
}

.mono {
  font-family: var(--f-mono);
  font-size: var(--fs-label);
  letter-spacing: 0.01em;
}

.lead {
  font-size: clamp(1.3125rem, 0.3rem + 1.8vw, 2rem);
  font-weight: 500;
  line-height: 1.22;
  letter-spacing: -0.02em;
  max-width: 30ch;
  text-wrap: balance;
}

/* Titres qui remplissent la largeur : taille = largeur du conteneur / chasse du mot (en em).
   build.js remesure --em après chargement de la police et découpage en lettres. */
.fit-box {
  container-type: inline-size;
}

.fit {
  display: inline-block;
  white-space: nowrap;
  font-size: calc((100vw - 2 * var(--gutter)) / var(--em));
  font-size: calc(100cqw / var(--em));
}

/* Masque de l'entrée par le bas uniquement : au-dessus, les accents des capitales restent visibles (MÉTHODE). */
.section-title {
  padding-top: 0.06em;
  clip-path: inset(-40% -10vw 0 -10vw);
}

.section-top {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 8px 24px;
  margin-bottom: clamp(16px, 2vw, 1.75rem);
}

.section-top .label {
  display: block;
}

/* Lettres découpées : jamais de coupure dans un mot. */
.w {
  white-space: nowrap;
}

/* Mot composé à ne pas couper sur son trait d'union (« week-/end », « e-/commerce »). */
.nb {
  white-space: nowrap;
}

.inline-link {
  font-weight: 600;
  text-decoration: underline;
  text-decoration-thickness: 1.5px;
  text-underline-offset: 3px;
  white-space: nowrap;
}

.inline-link:hover {
  text-decoration-color: var(--coral);
}

/* Pastilles (« Mission actuelle », « 1re place »…) : 14 px, casse d'origine pour garder « 1re » en bas de casse. */
.tag {
  display: inline-block;
  padding: 3px 9px 2px;
  border-radius: 999px;
  color: var(--ink);
  font-family: var(--f-mono);
  font-size: var(--fs-label);
  font-weight: 600;
  line-height: 1.35;
  letter-spacing: 0.01em;
  text-transform: none;
  vertical-align: 1px;
}

.tag--mint {
  background: var(--mint);
}

.tag--coral {
  background: var(--coral);
}

/* ---------- Boutons ---------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 48px;
  padding: 0 22px;
  border: 1.5px solid transparent;
  border-radius: 999px;
  font-family: var(--f-sans);
  font-size: 1rem;
  font-weight: 600;
  line-height: 1;
  letter-spacing: -0.01em;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  transition: background-color 0.25s ease, color 0.25s ease, border-color 0.25s ease;
}

.btn__icon {
  font-family: var(--f-mono);
  font-weight: 500;
}

.btn--ink {
  background: var(--ink);
  color: var(--white);
}

.btn--ink:hover {
  background: var(--blue);
}

.btn--line {
  border-color: var(--ink);
  color: var(--ink);
}

.btn--line:hover {
  background: var(--ink);
  color: var(--white);
}

.btn--white {
  background: var(--white);
  color: var(--blue);
}

.btn--white:hover {
  background: var(--ink);
  color: var(--white);
}

.btn--line-white {
  border-color: var(--white);
  color: var(--white);
}

.btn--line-white:hover {
  background: var(--white);
  color: var(--blue);
}

/* ---------- En-tête ---------- */

/* Trois colonnes : la marque, la navigation, les commandes (pause, interrupteur). Les deux colonnes latérales sont égales
   (1fr) : la navigation reste au centre de l'écran, mais elle pousse les commandes au lieu de passer dessous. Elle ne les
   recouvre donc plus jamais, quelle que soit la taille de police choisie dans le navigateur ou la largeur du libellé du
   bouton pause (l'ancienne navigation, centrée en position absolue, chevauchait le bouton à 125 % et 150 %). */
.site-header {
  position: fixed;
  inset: 0 0 auto;
  z-index: 50;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  column-gap: 16px;
  height: var(--header);
  padding-inline: 32px;
  background: rgba(243, 246, 246, 0.97);
  -webkit-backdrop-filter: blur(14px) saturate(1.3);
  backdrop-filter: blur(14px) saturate(1.3);
  border-bottom: 1px solid transparent;
  transition: border-color 0.3s ease;
}

.site-header.is-scrolled {
  border-bottom-color: var(--line);
}

.brand {
  display: inline-flex;
  justify-self: start;
  align-items: center;
  gap: 12px;
  min-height: 44px;
  color: var(--ink);
  font-family: var(--f-sans);
  font-size: 1rem;
  font-weight: 600;
  letter-spacing: -0.01em;
  text-decoration: none;
  white-space: nowrap;
}

.brand img {
  width: 34px;
  height: 34px;
}

.site-nav {
  display: flex;
  gap: 2px;
}

/* Bouton pause des animations et interrupteur RUN ⇄ BUILD : toujours dans la dernière colonne, alignés à droite. */
.site-header__tools {
  grid-column: -2 / -1;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 16px;
}

.site-nav a {
  position: relative;
  padding: 10px 12px;
  border-radius: 999px;
  color: var(--muted);
  font-family: var(--f-mono);
  font-size: var(--fs-label);
  font-weight: 500;
  letter-spacing: var(--ls-caps);
  text-transform: uppercase;
  text-decoration: none;
  transition: color 0.25s ease, background-color 0.25s ease;
}

.site-nav a:hover,
.site-nav a.is-active {
  color: var(--ink);
}

.site-nav a.is-active::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 2px;
  width: 6px;
  height: 6px;
  margin-top: -3px;
  border-radius: 50%;
  background: var(--coral);
}

.tf-switch {
  flex-shrink: 0;
  background: rgba(253, 254, 254, 0.7);
}

/* Seuils en em : ils suivent la taille de police choisie dans le navigateur (1 080 px à 16 px, 1 350 px à 20 px,
   1 620 px à 24 px). La navigation, dont le texte grossit avec la police, se masque donc plus tôt quand elle ne tient plus. */
@media (max-width: 67.5em) {
  .site-header {
    grid-template-columns: auto 1fr;
  }

  .site-nav {
    display: none;
  }
}

@media (max-width: 820px) {
  .site-header {
    padding-inline: 20px;
  }
}

/* Sous 450 px (28,1 em : le seuil suit la police), le nom ne tient plus à côté du bouton pause et de l'interrupteur :
   le symbole JF reste, le nom reste lu. */
@media (max-width: 28.12em) {
  .site-header {
    column-gap: 12px;
  }

  .site-header__tools {
    gap: 12px;
  }

  .brand span {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }
}

/* La pastille « Écrire » apparaît partout où la navigation de l'en-tête est masquée (sous 67,5 em, comme build.js). */
@media (min-width: 900px) and (max-width: 67.5em) {
  .float-contact:not([hidden]) {
    display: inline-flex !important;
  }
}

/* ---------- 1. Accueil ---------- */

.hero {
  /* Hauteur du bandeau des repères (deux lignes) et de son écart avec le titre : réservée dans le calcul du titre. */
  --band-gap: clamp(0.75rem, 2.4svh, 1.5rem);
  --band-h: calc(var(--fs-position) * 1.35 + var(--fs-body-s) * 1.4 + 0.25rem + var(--band-gap));
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  min-height: 100vh;
  min-height: 100svh;
  max-width: 120rem;
  margin-inline: auto;
  padding: calc(var(--header) + 14px) var(--gutter) 18px;
}

/* Grille suisse discrète : 12 colonnes. */
.hero::before {
  content: "";
  position: absolute;
  inset: 0 var(--gutter);
  z-index: -1;
  background-image: linear-gradient(to right, var(--line-soft) 1px, transparent 1px);
  background-size: calc(100% / 12) 100%;
  border-right: 1px solid var(--line-soft);
  pointer-events: none;
}

/* Repères : le positionnement en vrai texte, collé au titre, puis le statut ; l'heure de Lille à droite. */
.hero__meta {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 0.5rem 2rem;
  margin-bottom: var(--band-gap);
}

.hero__facts {
  display: grid;
  grid-template-rows: auto auto;
  grid-auto-columns: max-content;
  grid-auto-flow: column;
  align-items: baseline;
  gap: 0.25rem clamp(1.5rem, 3vw, 3rem);
  font-size: var(--fs-body-s);
  font-weight: 500;
  line-height: 1.4;
}

.hero__facts li {
  position: relative;
  padding-left: 1.05rem;
}

.hero__facts li::before {
  content: "";
  position: absolute;
  top: calc(0.7em - 3px);
  left: 0;
  width: 6px;
  height: 6px;
  background: var(--ink);
}

/* Le positionnement « Senior SRE · Tech Lead transverse » : la ligne que l'on retient en cinq secondes. */
.hero__facts li:first-child {
  font-size: var(--fs-position);
  font-weight: 600;
  line-height: 1.35;
  letter-spacing: -0.01em;
}

.hero__facts li:nth-child(2)::before {
  background: var(--blue);
}

/* « À l'écoute de nouvelles missions » : la seule pastille ronde, fixe. */
.hero__facts li:nth-child(3)::before {
  border-radius: 50%;
  background: var(--mint);
  box-shadow: 0 0 0 2px rgba(24, 169, 153, 0.25);
}

.hero__facts li:nth-child(4)::before {
  background: var(--coral);
}

.clock {
  flex: none;
  padding-top: 0.2em;
  font-family: var(--f-mono);
  font-size: var(--fs-label);
  font-weight: 500;
  font-variant-numeric: tabular-nums;
  letter-spacing: var(--ls-caps);
  line-height: 1.4;
  text-transform: uppercase;
  white-space: nowrap;
}

.clock__time {
  display: inline-block;
  min-width: 5ch;
}

/* Chaque ligne du titre remplit la largeur (chasse en em mesurée), dans la limite de la hauteur d'écran
   (repères déduits). Un plancher évite un titre nul sur les écrans très bas (téléphone à l'horizontale). */
.hero__stack {
  --em-1: 1.901;
  --em-2: 3.5;
  --em-3: 7.113;
  --lh: 0.8;
  --pad: 0.04;
  --avail: calc(100svh - var(--header) - 32px - var(--band-h));
  --sum: calc((var(--lh) + var(--pad)) * (2 / var(--em-2) + 1 / var(--em-3)));
  --fs2: min(calc(100cqw / var(--em-2)), max(calc(var(--avail) / (var(--sum) * var(--em-2))), 3.5rem));
  --fs3: min(calc(100cqw / var(--em-3)), max(calc(var(--avail) / (var(--sum) * var(--em-3))), 1.75rem));
  position: relative;
  container-type: inline-size;
}

.hero__title {
  display: flex;
  flex-direction: column;
  line-height: var(--lh);
}

.hero__row {
  display: block;
  overflow-y: clip;
  padding-top: calc(var(--pad) * 1em);
  white-space: nowrap;
}

.hero__word {
  display: inline-block;
  white-space: nowrap;
}

.hero__row--1,
.hero__row--2 {
  font-size: calc((100vw - 2 * var(--gutter)) / var(--em-2));
  font-size: var(--fs2);
}

/* La troisième ligne porte le verbe, en bleu ; sa zone de découpe s'élève pour l'accent de « ALLÈGENT ». */
.hero__row--3 {
  margin-top: -0.18em;
  padding-top: calc((var(--pad) + 0.18) * 1em);
  color: var(--blue);
  font-size: calc((100vw - 2 * var(--gutter)) / var(--em-3));
  font-size: var(--fs3);
}

/* À droite de « DES » : la promesse et sa preuve en haut, les boutons sur la ligne de pied des lettres. */
.hero__aside {
  position: absolute;
  top: 0;
  right: 0;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: flex-start;
  gap: 0.75rem;
  width: calc(100% - var(--fs2) * var(--em-1) - clamp(32px, 3.4vw, 4rem));
  height: calc(var(--fs2) * (var(--lh) + var(--pad)));
  padding: calc(var(--fs2) * 0.1) 0 calc(var(--fs2) * 0.02);
}

.hero__pitch {
  display: grid;
  gap: 0.6rem;
}

.hero__promise {
  max-width: 22em;
  font-size: clamp(1.25rem, 1.75vw, 1.75rem);
  line-height: 1.15;
  letter-spacing: -0.025em;
  text-wrap: balance;
}

.hero__promise strong {
  font-weight: 650;
}

.hero__proof {
  max-width: 48em;
  font-size: var(--fs-body-s);
  line-height: 1.45;
  text-wrap: balance;
}

.hero__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
}

/* Lien texte, cible de 44 px de haut ; l'écart sépare la flèche (un conteneur flex avale l'espace du texte).
   Sans marge à gauche : s'il passe sous les boutons, il reste aligné sur eux. */
.hero__pdf {
  display: inline-flex;
  align-items: center;
  gap: 0.3em;
  min-height: 44px;
  font-size: 1rem;
}

/* Fenêtre basse (portable 1 366 × 650, 1 280 × 720, 1 296 × 768) : la promesse se resserre, sur une ligne si la
   largeur le permet, pour que les boutons restent au-dessus de « OUTILS » même quand le lien PDF passe sous eux
   (colonne de droite de moins de 42 rem). Au-delà de 52,5 em de haut, le titre est assez grand pour tout loger. */
@media (min-width: 80em) and (max-height: 52.5em) {
  .hero__pitch {
    gap: 0.4rem;
  }

  .hero__promise {
    max-width: none;
    font-size: clamp(1.25rem, 1.5vw, 1.5rem);
  }
}

/* En dessous de 1 280 px (79,99em, suit la taille de police choisie), la zone à droite de « DES » devient trop
   étroite : tout s'empile, repères, titre, promesse, preuve et boutons. */
@media (max-width: 79.99em) {
  .hero__stack {
    /* Sous le titre : promesse et preuve (une ligne chacune quand la largeur le permet), boutons. */
    --below: 10.5rem;
    --avail: calc(100svh - var(--header) - 32px - var(--band-h) - var(--below));
  }

  .hero__aside {
    position: static;
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    justify-items: start;
    gap: 1.25rem;
    width: auto;
    height: auto;
    margin-top: clamp(18px, 3svh, 1.75rem);
    padding: 0;
  }

  .hero__promise {
    max-width: 30em;
    font-size: clamp(1.25rem, 0.9rem + 1.2vw, 1.625rem);
  }

  .hero__proof {
    max-width: 48em;
  }
}

/* Repères en une colonne quand deux colonnes ne tiennent plus côte à côte. */
@media (max-width: 64em) {
  .hero__meta {
    flex-wrap: wrap;
  }
}

@media (max-width: 820px) {
  /* Sur téléphone, l'accueil prend la hauteur de son contenu : repères, titre, promesse, boutons. */
  .hero {
    min-height: 0;
    padding-bottom: 36px;
  }

  .hero::before {
    background-size: calc(100% / 4) 100%;
  }

  .hero__meta {
    flex-direction: column;
    gap: 0.75rem;
    margin-bottom: 1.75rem;
  }

  .hero__facts {
    grid-template-rows: none;
    grid-auto-flow: row;
    grid-template-columns: minmax(0, 1fr);
    gap: 0.3rem;
  }

  .hero__facts li {
    text-wrap: pretty;
  }

  .hero__stack {
    --avail: 100vh;
  }

  .hero__aside {
    margin-top: 1.5rem;
  }

  .hero__actions {
    width: 100%;
  }

  .hero__actions .btn {
    flex: 1 1 auto;
  }
}

/* Masquage avant l'entrée : uniquement si le JS tourne et que le mouvement est autorisé,
   avec une révélation de secours si les scripts ne se chargent pas. */
@media (prefers-reduced-motion: no-preference) {
  .js .hero__title,
  .js .hero [data-intro] {
    visibility: hidden;
    animation: build-safety 0s linear 3s forwards;
  }

  .js.is-motion .hero__title,
  .js.is-motion .hero [data-intro],
  .js.is-static .hero__title,
  .js.is-static .hero [data-intro] {
    animation: none;
  }

  .js.is-static .hero__title,
  .js.is-static .hero [data-intro] {
    visibility: visible;
  }
}

@keyframes build-safety {
  to {
    visibility: visible;
  }
}

/* Police du navigateur agrandie (150 % et plus) sur petit écran : les boutons et les liens longs passent à la ligne
   au lieu de sortir de l'écran. Sans effet aux tailles habituelles, où chacun tient sur une ligne. */
@media (max-width: 820px) {
  .btn {
    white-space: normal;
    text-align: center;
    padding-block: 0.7rem;
  }

  .inline-link {
    white-space: normal;
  }

  .contact__action {
    grid-template-columns: minmax(0, 1fr);
  }

  .contact__mail,
  .contact__links a {
    overflow-wrap: anywhere;
  }

  .atelier__actions {
    flex-wrap: wrap;
    row-gap: 10px;
  }
}

/* ---------- 2. Manifeste : la citation de Jérémy ---------- */

.manifesto {
  padding-block: clamp(72px, 8vw, 8rem) clamp(40px, 4vw, 4rem);
}

.manifesto__grid {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: 24px var(--gap);
}

.manifesto__side {
  grid-column: 1 / span 2;
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding-top: 0.9em;
}

.manifesto__text {
  grid-column: 3 / -1;
  max-width: 26ch;
  font-size: clamp(1.875rem, 0.6rem + 3.9vw, 4.5rem);
  font-weight: 600;
  line-height: 1.06;
  letter-spacing: -0.04em;
  text-wrap: pretty;
}

.manifesto__link {
  text-decoration: underline;
  text-decoration-thickness: 0.09em;
  text-underline-offset: 0.12em;
  text-decoration-skip-ink: none;
  transition: color 0.25s ease;
}

.manifesto__link--mint {
  text-decoration-color: var(--mint);
}

.manifesto__link--coral {
  text-decoration-color: var(--coral);
}

.manifesto__link--blue {
  text-decoration-color: var(--blue);
}

.manifesto__link:hover {
  color: var(--blue);
}

/* Au clavier, un lien atteint avant la révélation s'affiche en entier, contour compris. */
.manifesto__link:focus-visible {
  opacity: 1 !important;
}

.manifesto .mw {
  display: inline !important;
}

/* La phrase se révèle une seule fois à l'entrée (build.js). Son état de départ est posé ici, avant le script,
   pour éviter qu'elle s'affiche, s'éteigne puis revienne ; sécurité à 3 s si les scripts ne se chargent pas. */
@media (prefers-reduced-motion: no-preference) {
  .js .manifesto__text {
    opacity: 0.15;
    animation: build-reveal 0s linear 3s forwards;
  }

  .js.is-motion .manifesto__text {
    animation: none;
  }

  .js.is-static .manifesto__text,
  :root[data-motion="paused"] .manifesto__text {
    opacity: 1;
    animation: none;
  }
}

@keyframes build-reveal {
  to {
    opacity: 1;
  }
}

@media (max-width: 820px) {
  .manifesto__side,
  .manifesto__text {
    grid-column: 1 / -1;
  }

  .manifesto__side {
    flex-direction: row;
    gap: 16px;
    padding-top: 0;
  }
}

/* ---------- 3. L'atelier ---------- */

.atelier {
  padding-block: clamp(56px, 6vw, 6rem);
  background: var(--paper);
}

.atelier__head {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: flex-end;
  gap: 12px 32px;
}

.atelier__h2 {
  margin-top: 12px;
  font-size: clamp(min(3rem, 15vw), 6.4vw, 7rem);
  overflow-y: clip;
  padding-top: 0.08em;
}

/* La consigne de l'anneau est une phrase : Geist en bas de casse. */
.atelier__hint {
  display: none;
  max-width: 30ch;
  font-family: var(--f-sans);
  font-size: var(--fs-note);
  letter-spacing: 0;
  text-align: right;
  text-transform: none;
  text-wrap: balance;
}

/* Avec dix projets, l'anneau s'élargit et le bord d'un panneau peut passer derrière la consigne : un voile papier la garde lisible. */
.has-webgl .atelier__hint {
  display: block;
  padding: 6px 10px;
  border-radius: 10px;
  background: rgba(243, 246, 246, 0.86);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
}

.atelier__ring,
.atelier__now {
  display: none;
}

/* Liste accessible, affichée en grille statique sans WebGL. */
.works {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 18.75rem), 1fr));
  gap: 48px var(--gap);
  margin-top: clamp(40px, 5vw, 4.5rem);
}

.work {
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.work__shot {
  overflow: hidden;
  border-radius: 14px;
  background: #e2eaeb;
  box-shadow: 0 24px 48px -32px rgba(18, 49, 60, 0.55);
}

.work__shot img {
  width: 100%;
  aspect-ratio: 1440 / 1000;
  object-fit: cover;
}

.work__body {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.work__title {
  font-family: var(--f-display);
  font-size: 1.875rem;
  font-weight: 800;
  font-variation-settings: "wdth" 100, "wght" 800;
  line-height: 0.95;
  letter-spacing: -0.03em;
  text-transform: uppercase;
}

.work__desc {
  max-width: 44ch;
  font-size: var(--fs-body);
}

.work__link {
  align-self: flex-start;
  font-weight: 600;
  text-decoration: underline;
  text-decoration-thickness: 1.5px;
  text-underline-offset: 4px;
}

.work__link:hover {
  color: var(--blue);
}

/* Et aussi : les autres projets, une ligne chacun, sous l'anneau. */
.atelier__also {
  padding-block: clamp(48px, 5vw, 5rem) clamp(16px, 2vw, 2rem);
}

.atelier__also ul {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 22rem), 1fr));
  gap: 0 clamp(28px, 3vw, 3rem);
  margin-top: 16px;
}

.atelier__also li {
  padding-block: 18px;
  border-top: 1px solid var(--line);
  color: var(--muted);
  font-size: var(--fs-body-s);
  line-height: 1.5;
}

.atelier__also strong {
  display: block;
  margin-bottom: 4px;
  color: var(--ink);
  font-size: var(--fs-body);
  font-weight: 650;
}

/* Anneau WebGL actif */
.has-webgl .atelier {
  padding: 0;
}

.has-webgl .atelier__stage {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  height: 100vh;
  height: 100svh;
  min-height: 35rem;
  padding-top: calc(var(--header) + 22px);
  padding-bottom: 26px;
  overflow: clip;
}

.has-webgl .atelier__ring {
  display: block;
  position: absolute;
  inset: 0;
  z-index: 0;
  cursor: grab;
  touch-action: pan-y;
}

.has-webgl .atelier__ring.is-dragging {
  cursor: grabbing;
}

.atelier__canvas {
  display: block;
  width: 100%;
  height: 100%;
  opacity: 0;
  transition: opacity 0.9s ease;
}

.atelier__canvas.is-ready {
  opacity: 1;
}

.has-webgl .atelier__head {
  position: relative;
  z-index: 1;
  pointer-events: none;
}

.has-webgl .atelier__now {
  display: block;
  position: relative;
  z-index: 2;
  container-type: inline-size;
  pointer-events: none;
}

.has-webgl .works {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  margin: -1px !important;
  padding: 0 !important;
  overflow: hidden !important;
  clip-path: inset(50%) !important;
  white-space: nowrap !important;
}

.atelier__titles {
  display: grid;
}

.atelier__title {
  grid-area: 1 / 1;
  align-self: end;
  overflow-y: clip;
  padding-top: 0.2em;
  font-size: min(calc(100cqw / var(--em, 8)), 15svh);
  white-space: nowrap;
}

.atelier__title.is-idle {
  visibility: hidden;
}

/* Description à gauche, commandes à droite. Les commandes gardent leur largeur (le compteur « 05 / 06 » et la note restent sur
   une ligne) : c'est la description qui se resserre ; elle ne passe sous les commandes que si elle devient trop étroite. */
.atelier__row {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: flex-end;
  gap: 20px 40px;
  margin-top: 18px;
}

.atelier__info {
  display: grid;
  flex: 1 1 18rem;
  gap: 8px;
  max-width: 56ch;
}

.atelier__desc {
  font-size: var(--fs-body);
  line-height: 1.45;
}

.atelier__actions {
  display: flex;
  flex: none;
  align-items: center;
  gap: 18px;
  margin-left: auto;
  pointer-events: auto;
}

.atelier__note {
  color: var(--muted);
  white-space: nowrap;
}

.atelier__controls {
  display: flex;
  flex: none;
  align-items: center;
  gap: 10px;
}

.atelier__btn {
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  padding: 0;
  border: 1.5px solid var(--ink);
  border-radius: 50%;
  background: rgba(243, 246, 246, 0.8);
  font-family: var(--f-mono);
  font-size: 1.125rem;
  cursor: pointer;
  transition: background-color 0.25s ease, color 0.25s ease;
}

.atelier__btn:hover {
  background: var(--ink);
  color: var(--white);
}

.atelier__count {
  min-width: 7ch;
  font-family: var(--f-mono);
  font-size: var(--fs-label);
  font-weight: 500;
  letter-spacing: 0.06em;
  text-align: center;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

/* Entre 821 et 1 000 px, la note « Capture d'un aperçu local » (qui remplace le lien quand le projet n'a pas de site)
   passe au-dessus des commandes : la description garde la largeur et la ligne ne grandit pas. */
@media (min-width: 821px) and (max-width: 62.5em) {
  .atelier__actions:has(.atelier__note:not([hidden])) {
    flex-direction: column;
    align-items: flex-end;
    gap: 8px;
  }
}

/* Là où la pastille « Écrire » peut s'afficher (sous 67,5 em, comme l'en-tête), les commandes de l'anneau (épinglé)
   remontent au-dessus d'elle. */
@media (max-width: 67.5em) {
  .has-webgl .atelier__stage {
    padding-bottom: calc(16px + 48px + 14px + env(safe-area-inset-bottom, 0px));
  }
}

@media (max-width: 820px) {
  .atelier__hint {
    text-align: left;
  }

  .has-webgl .atelier__stage {
    padding-top: calc(var(--header) + 14px);
  }

  .atelier__title {
    font-size: min(calc(100cqw / var(--em-word, 6)), 13vw);
    white-space: normal;
    line-height: 0.84;
  }

  .atelier__row {
    flex-direction: column;
    align-items: stretch;
    gap: 14px;
    margin-top: 12px;
  }

  /* En colonne, la base de 18 rem fixerait une hauteur : la description reprend sa hauteur de contenu. */
  .atelier__info {
    flex: none;
  }

  .atelier__desc {
    font-size: var(--fs-body-s);
  }

  .atelier__actions {
    justify-content: space-between;
    margin-left: 0;
  }

  .atelier__actions .btn {
    min-height: 44px;
    padding: 0 16px;
    font-size: 1rem;
  }

  .atelier__btn {
    width: 44px;
    height: 44px;
  }

  .atelier__actions {
    gap: 12px;
  }

  .atelier__controls {
    gap: 6px;
  }

  .atelier__count {
    min-width: 0;
    white-space: nowrap;
  }
}

/* Téléphones à fenêtre basse : la consigne de l'anneau (décorative, masquée aux lecteurs d'écran) cède la place
   au titre et aux commandes, sans passer sur les captures. */
@media (max-width: 820px) and (max-height: 700px) {
  .has-webgl .atelier__hint {
    display: none;
  }
}

/* Très petit téléphone (320 × 568) : la pile de texte recouvre le bas de l'anneau. Le titre du projet tient sur une seule
   ligne (la capture reste visible sur près de deux tiers de sa hauteur au lieu d'un tiers) et un fond papier en dégradé
   garde le titre et la description lisibles sur la capture au premier plan. */
@media (max-width: 820px) and (max-height: 600px) {
  .has-webgl .atelier__now {
    background: linear-gradient(to bottom, rgba(243, 246, 246, 0) 0, var(--paper) 2.25rem);
  }

  .atelier__title {
    white-space: nowrap;
    font-size: min(calc(100cqw / var(--em, 8)), 13vw);
  }
}

/* Sous 400 px, le lien et les deux flèches tiennent sur une ligne si le compteur « 04 / 06 » s'efface
   (320 px : 270 px de commandes pour 280 px de largeur utile). La phrase annoncée « Projet n sur N » reste. */
@media (max-width: 399.98px) {
  .atelier__count {
    display: none;
  }
}

/* ---------- 4. EventFlow (aplat bleu) ---------- */

.eventflow {
  --focus: var(--white);
  padding-block: calc(var(--header) + clamp(24px, 3vw, 3rem)) clamp(48px, 5.5vw, 5.5rem);
  background: var(--blue);
  color: var(--white);
}

.eventflow ::selection {
  background: var(--white);
  color: var(--blue);
}

.eventflow__logo {
  display: inline-block;
  width: 28px;
  height: 28px;
  margin-right: 10px;
  border-radius: 7px;
  background: var(--white);
  vertical-align: middle;
}

.eventflow__intro {
  margin-top: clamp(32px, 4vw, 3.5rem);
}

.eventflow__split {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: 48px var(--gap);
  align-items: center;
  margin-top: clamp(36px, 4vw, 4rem);
}

.eventflow__split .facts {
  grid-column: 1 / span 5;
}

.ef-shot {
  grid-column: 7 / -1;
  display: grid;
  gap: 16px;
  perspective: 1500px;
}

/* Capture inclinée en perspective avec son reflet (comme avant la refonte ; pas d'inclinaison au pointeur). */
.ef-shot__frame {
  position: relative;
  overflow: hidden;
  border-radius: 16px;
  box-shadow: 0 50px 90px -40px rgba(6, 18, 60, 0.7), 0 0 0 1px rgba(255, 255, 255, 0.25);
  transform: rotateY(-12deg) rotateX(5deg);
  transform-style: preserve-3d;
}

.ef-shot__glare {
  position: absolute;
  inset: 0;
  background: linear-gradient(115deg, rgba(255, 255, 255, 0.28) 0%, rgba(255, 255, 255, 0) 42%);
  pointer-events: none;
}

/* La légende de la capture est une phrase : Geist en bas de casse. */
.ef-shot figcaption {
  justify-self: end;
  font-family: var(--f-sans);
  font-size: var(--fs-note);
  letter-spacing: 0;
  text-transform: none;
}

.facts {
  display: grid;
  gap: 28px;
}

.facts__item {
  display: grid;
  gap: 8px;
  padding-top: 16px;
  border-top: 1px solid currentColor;
}

.facts dd {
  max-width: 46ch;
  font-size: var(--fs-body);
  line-height: 1.5;
}

.stats {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0 var(--gap);
  margin-top: clamp(44px, 5vw, 5rem);
}

.stat {
  display: flex;
  flex-direction: column-reverse;
  justify-content: flex-end;
  gap: 14px;
  padding-top: 18px;
  border-top: 1px solid rgba(253, 254, 254, 0.5);
}

/* Libellés des chiffres : Geist en bas de casse (« Commits sur la branche de développement » tenait sur trois lignes). */
.stat dt {
  max-width: 24ch;
  font-family: var(--f-sans);
  font-size: var(--fs-note);
  letter-spacing: 0;
  text-transform: none;
  overflow-wrap: anywhere;
}

.stat__num {
  display: block;
  font-family: var(--f-mono);
  font-size: clamp(3.625rem, 8.6vw, 9.375rem);
  font-weight: 300;
  line-height: 0.9;
  letter-spacing: -0.07em;
  font-variant-numeric: tabular-nums;
}

.proofs {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 32px var(--gap);
  margin-top: clamp(40px, 4.5vw, 4.5rem);
}

.proof {
  display: grid;
  align-content: start;
  gap: 10px;
  padding: 24px;
  border-radius: 18px;
  background: rgba(8, 26, 110, 0.22);
  box-shadow: inset 0 0 0 1px rgba(253, 254, 254, 0.28);
}

.proof h3 {
  font-size: var(--fs-role);
  font-weight: 600;
  letter-spacing: -0.015em;
}

.proof p {
  font-size: var(--fs-body);
}

.eventflow__foot {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: 24px 40px;
  margin-top: clamp(32px, 4vw, 3.75rem);
}

/* Source datée des chiffres : une phrase, en Geist. */
.source {
  max-width: var(--measure);
  font-family: var(--f-sans);
  font-size: var(--fs-note);
  letter-spacing: 0;
  text-transform: none;
}

.eventflow__links {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

@media (max-width: 1000px) {
  .eventflow__split .facts,
  .ef-shot {
    grid-column: 1 / -1;
  }

  .ef-shot__frame {
    transform: rotateY(-8deg) rotateX(4deg);
  }

  .stats {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    row-gap: 36px;
  }

  /* Deux colonnes : avec une police de navigateur agrandie, le plancher en rem des grands chiffres dépasserait la colonne
     (les trois chiffres de « 421 » touchaient ceux de « 238 »). Le plafond en vw ne joue qu'à partir de 150 %. */
  .stat__num {
    font-size: min(clamp(3.625rem, 8.6vw, 9.375rem), 22vw);
  }

  .proofs {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 820px) {
  .ef-shot figcaption {
    justify-self: start;
  }

  .eventflow__links .btn {
    flex: 1 1 auto;
  }
}

/* ---------- 3. Méthode (cartes) et 5. L'IA (copilote N3) ---------- */

.method,
.copilote {
  padding-block: calc(var(--header) + clamp(24px, 3vw, 3rem)) clamp(48px, 5.5vw, 5.5rem);
}

.copilote__intro {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: 40px var(--gap);
  margin-top: clamp(32px, 4vw, 3.5rem);
}

.copilote__intro .lead {
  grid-column: 1 / span 6;
  max-width: 32ch;
}

.copilote__intro .pipeline {
  grid-column: 7 / -1;
}

.pipeline {
  display: grid;
  border-bottom: 1px solid var(--line);
}

.pipeline li {
  display: grid;
  grid-template-columns: 2.75rem minmax(0, 1fr);
  gap: 12px;
  padding-block: 14px;
  border-top: 1px solid var(--line);
}

.pipeline__num {
  padding-top: 3px;
  color: var(--muted);
}

.pipeline p {
  font-size: var(--fs-body);
  line-height: 1.5;
}

.deal {
  margin-top: clamp(40px, 4.5vw, 4.5rem);
}

.deck {
  position: relative;
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: var(--gap);
}

.card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 12px;
  min-height: 30rem;
  padding: 26px 22px 26px;
  border-radius: 22px;
  box-shadow: 0 34px 60px -38px rgba(18, 49, 60, 0.6);
  transform-origin: 50% 90%;
}

.card h3 {
  margin-top: auto;
  font-size: clamp(1.375rem, 1.9vw, 1.75rem);
  font-weight: 600;
  line-height: 1.1;
  letter-spacing: -0.025em;
}

.card__text {
  font-size: var(--fs-body-s);
  line-height: 1.5;
}

.card__proof {
  padding-top: 12px;
  border-top: 1px solid color-mix(in srgb, currentColor 32%, transparent);
  font-size: var(--fs-body-s);
  line-height: 1.45;
}

.card__proof .label {
  display: block;
  margin-bottom: 4px;
}

.card__num {
  position: absolute;
  top: 18px;
  right: 22px;
  font-family: var(--f-display);
  font-size: clamp(5.5rem, 9vw, 9.375rem);
  font-weight: 800;
  font-variation-settings: "wdth" 60, "wght" 800;
  line-height: 0.8;
  letter-spacing: -0.04em;
}

.card--white {
  background: var(--white);
  color: var(--ink);
  box-shadow: 0 34px 60px -38px rgba(18, 49, 60, 0.6), inset 0 0 0 1px var(--line);
}

.card--mint {
  background: var(--mint);
  color: var(--ink);
}

.card--blue {
  --focus: var(--white);
  background: var(--blue);
  color: var(--white);
}

.card--coral {
  background: var(--coral);
  color: var(--ink);
}

.card--ink {
  --focus: var(--white);
  background: var(--ink);
  color: var(--white);
}

/* Le résultat : la grille de cent points (composants partagés) en point d'orgue, la phrase porte l'information. */
.result {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: end;
  gap: 24px clamp(28px, 4vw, 4rem);
  margin-top: clamp(48px, 5vw, 5rem);
  padding-top: 20px;
  border-top: 1px solid var(--line);
  /* Ancre « diminuer le RUN » : le libellé et la grille ne se posent plus sous l'en-tête fixe (les sections, elles, ont
     un padding-top). Lenis et le défilement natif lisent cette marge. */
  scroll-margin-top: calc(var(--header) + 24px);
}

.result > .label {
  grid-column: 1 / -1;
}

/* Grille et compteur côte à côte, au pied commun ; le compteur garde la place de « 100 » pendant le décompte. */
.result .proof-grid {
  --cmp-proof-size: clamp(13.5rem, 9rem + 9vw, 19rem);
  --cmp-proof-count-size: clamp(5.5rem, 2.5rem + 9vw, 12.5rem);
  display: grid;
  grid-template-columns: auto auto;
  align-items: end;
  justify-content: start;
  gap: clamp(1rem, 2.4vw, 2.5rem);
}

.result .proof-grid__count {
  min-width: 2.9ch;
  padding-top: 0.06em;
  font-weight: 800;
  font-variation-settings: "wdth" 100, "wght" 800;
  letter-spacing: -0.035em;
  line-height: 0.8;
}

.result__text {
  max-width: 30ch;
  padding-bottom: 0.3em;
  font-size: clamp(1.125rem, 0.75rem + 1vw, 1.5rem);
  font-weight: 500;
  line-height: 1.35;
  letter-spacing: -0.01em;
}

/* Le principe de Jérémy, en grand, puis sa phrase d'explication. */
.choices {
  display: grid;
  gap: 16px;
  margin-top: clamp(48px, 5vw, 5rem);
  padding-top: 20px;
  border-top: 1px solid var(--line);
}

.choices__text {
  max-width: 64ch;
  font-size: clamp(1.0625rem, 0.8rem + 0.6vw, 1.25rem);
  line-height: 1.5;
}

/* Interligne 0,96 (contrat typographique) : la virgule et l'accent de « L'ÉQUIPE » ne touchent plus la ligne du dessus. */
.choices__big {
  display: block;
  margin-bottom: 14px;
  font-family: var(--f-display);
  font-size: clamp(2.375rem, 5.6vw, 6rem);
  font-weight: 800;
  font-variation-settings: "wdth" 88, "wght" 780;
  line-height: 0.96;
  letter-spacing: -0.035em;
  text-transform: uppercase;
}

/* La vidéo du copilote, après son fonctionnement et avant ses garde-fous. Quand la largeur le permet, sa légende
   se pose à sa droite, au pied de l'image (deux tiers, un tiers) ; sinon elle reste dessous. */
#ia .video-card {
  max-width: 60rem;
  margin-top: clamp(40px, 5vw, 5rem);
}

@media (min-width: 1001px) {
  #ia .video-card {
    max-width: 84rem;
    grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
    align-items: end;
    column-gap: clamp(24px, 3vw, 3rem);
  }

  #ia .video-card figcaption {
    padding-bottom: 0.25rem;
  }
}

.copilote__foot {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: 32px var(--gap);
  margin-top: clamp(32px, 3.5vw, 3.5rem);
}

.copilote__foot > div {
  grid-column: 1 / span 7;
  display: grid;
  gap: 8px;
  padding-top: 16px;
  border-top: 1px solid var(--line);
}

.copilote__foot dd {
  max-width: 48ch;
  font-size: var(--fs-body);
}

@media (max-width: 79.99em) {
  .deck {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (max-width: 1000px) {
  .deck {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .copilote__intro .lead,
  .copilote__intro .pipeline {
    grid-column: 1 / -1;
  }
}

@media (max-width: 820px) {
  .deck {
    grid-template-columns: 1fr;
  }

  .card {
    min-height: 0;
    padding-top: 22px;
  }

  /* Le titre ne passe plus sous le grand chiffre de la carte (« Je regarde ce qui ne marche pas »). */
  .card h3 {
    margin-top: 44px;
    padding-right: 3.25rem;
  }

  .card__num {
    font-size: 6rem;
  }

  .copilote__foot > div {
    grid-column: 1 / -1;
  }

  /* La colonne du résultat ne s'élargit plus sur la grille : rien ne dépasse à 320 px. */
  .result {
    grid-template-columns: minmax(0, 1fr);
  }

  .result .proof-grid {
    grid-template-columns: minmax(0, auto) auto;
  }
}

/* ---------- 6. Parcours ---------- */

.parcours {
  padding-block: calc(var(--header) + clamp(24px, 3vw, 3rem)) clamp(48px, 5.5vw, 5.5rem);
  background: var(--paper);
}

/* Interligne un peu plus ouvert que les autres titres : l'accent de « APRÈS » passe sous la ligne du dessus. */
.parcours__title {
  display: flex;
  flex-direction: column;
  line-height: 0.93;
  font-size: calc((100vw - 2 * var(--gutter)) / var(--em));
  font-size: calc(100cqw / var(--em));
  overflow-y: clip;
  padding-top: 0.06em;
}

.pt-row {
  display: block;
  white-space: nowrap;
}

.pt-row--2 {
  padding-left: 27%;
}

.parcours__story {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: 16px var(--gap);
  margin-top: clamp(32px, 4vw, 3.5rem);
}

.parcours__story p {
  grid-column: span 5;
  max-width: 44ch;
  font-size: clamp(1.0625rem, 0.75rem + 0.6vw, 1.25rem);
  line-height: 1.5;
}

.parcours__story p:first-child {
  grid-column: 1 / span 5;
}

.parcours__story p:last-child {
  grid-column: 7 / span 5;
}

/* La piste : empilement vertical par défaut (mobile, sans JS, mouvement réduit). */
.slot {
  margin-top: clamp(40px, 5vw, 4.5rem);
}

.slot__bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  margin-bottom: 20px;
}

.slot__reel,
.slot__years,
.slot__today,
.mission__bar {
  display: none;
}

.slot__viewport {
  padding-inline: var(--gutter);
  max-width: 120rem;
  margin-inline: auto;
}

.slot__list {
  position: relative;
  display: grid;
  gap: 18px;
  padding-left: 28px;
}

.slot__list::before {
  content: "";
  position: absolute;
  top: 10px;
  bottom: 10px;
  left: 7px;
  width: 2px;
  background: var(--ink);
}

.slot__item {
  position: relative;
}

.slot__item::before {
  content: "";
  position: absolute;
  top: 26px;
  left: -26px;
  width: 12px;
  height: 12px;
  border: 2px solid var(--ink);
  border-radius: 50%;
  background: var(--paper);
}

.slot__item--current::before {
  border-color: var(--coral);
  background: var(--coral);
}

.slot__item--award::before {
  width: 10px;
  height: 10px;
  left: -25px;
  border-radius: 2px;
  transform: rotate(45deg);
  background: var(--mint);
  border-color: var(--mint);
}

.slot__item--venture::before {
  background: var(--blue);
  border-color: var(--blue);
}

.mission,
.award {
  display: grid;
  gap: 8px;
  padding: 22px 22px 24px;
  border-radius: 18px;
  background: var(--white);
  box-shadow: inset 0 0 0 1px var(--line);
}

.mission__name {
  font-family: var(--f-display);
  font-size: clamp(1.875rem, 3vw, 2.875rem);
  font-weight: 800;
  font-variation-settings: "wdth" 100, "wght" 800;
  line-height: 0.9;
  letter-spacing: -0.03em;
  text-transform: uppercase;
}

/* Intitulé de poste : Geist 600, 17 à 19 px, couleur pleine. */
.mission__role {
  font-size: var(--fs-role);
  font-weight: 600;
  letter-spacing: -0.01em;
}

.mission__gist {
  max-width: var(--measure);
  color: var(--blue);
  font-size: var(--fs-body);
  font-weight: 600;
  line-height: 1.4;
  letter-spacing: -0.01em;
}

.mission__list {
  display: grid;
  gap: 10px;
  max-width: var(--measure);
  margin-top: 6px;
  font-size: var(--fs-body-s);
  line-height: 1.5;
}

.mission__list li {
  padding-top: 10px;
  border-top: 1px solid var(--line);
}

.mission__date .tag {
  margin-left: 8px;
}

.mission--venture {
  --focus: var(--white);
  background: var(--blue);
  color: var(--white);
  box-shadow: none;
}

.mission--venture .mission__list li {
  border-top-color: rgba(253, 254, 254, 0.4);
}

/* Distinctions : fond papier opaque, la ligne « Aujourd'hui » et les barres ne traversent plus le texte. */
.award {
  gap: 6px;
  background: var(--paper);
  box-shadow: inset 0 0 0 1.5px var(--ink);
}

.award__top {
  display: flex;
  align-items: center;
  gap: 10px;
}

.award__name {
  font-size: var(--fs-role);
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: -0.015em;
}

.award p:last-child {
  max-width: var(--measure);
  font-size: var(--fs-body-s);
  line-height: 1.45;
}

/* La piste horizontale épinglée (ordinateur, mouvement autorisé). Sous 40 em de haut (640 px à 16 px), la carte de la
   mission en cours ne tient plus : la liste verticale des petits écrans prend le relais (même condition dans build.js,
   « slot »). Le seuil est en em : il monte avec la taille de police choisie dans le navigateur. */
@media (min-width: 821px) and (min-height: 40em) {
  .is-motion .slot {
    --yw: max(30vw, 21.25rem);
    --pad: calc(var(--gutter) + 24px);
    --span: calc(12.45 + var(--extra-years, 0));
    --yfs: min(calc(var(--yw) / 2.41), 17svh);
    --band: calc(var(--yfs) * 0.8 + 18px);
    --card: min(26.875rem, calc(var(--yw) * 1.25));
    --award: min(21.25rem, calc(var(--yw) * 0.86));
    display: flex;
    flex-direction: column;
    height: 100vh;
    height: 100svh;
    margin-top: clamp(40px, 5vw, 4.5rem);
    padding-top: calc(var(--header) + 14px);
    overflow: clip;
  }

  .is-motion .slot__bar {
    margin-bottom: 8px;
  }

  .is-motion .slot__reel {
    display: block;
    height: 1em;
    overflow: hidden;
    font-family: var(--f-display);
    font-size: 2.375rem;
    font-weight: 800;
    font-variation-settings: "wdth" 100, "wght" 800;
    line-height: 1;
    letter-spacing: -0.03em;
  }

  .slot__reel-strip {
    display: flex;
    flex-direction: column;
    will-change: transform;
  }

  .is-motion .slot__viewport {
    position: relative;
    flex: 1;
    width: 100%;
    max-width: none;
    margin: 0;
    padding: 0;
  }

  .is-motion .slot__track {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    width: calc(var(--pad) * 2 + var(--span) * var(--yw));
    will-change: transform;
  }

  .is-motion .slot__years {
    display: block;
    position: absolute;
    right: 0;
    bottom: 10px;
    left: 0;
    height: calc(var(--yfs) * 0.8);
  }

  .is-motion .slot__years span {
    position: absolute;
    bottom: 0;
    left: calc(var(--pad) + var(--i) * var(--yw));
    color: rgba(18, 49, 60, 0.1);
    font-family: var(--f-display);
    font-size: var(--yfs);
    font-weight: 800;
    font-variation-settings: "wdth" 100, "wght" 800;
    line-height: 0.8;
    letter-spacing: -0.035em;
    transition: color 0.4s ease;
  }

  .is-motion .slot__years span.is-now {
    color: var(--ink);
  }

  /* « Aujourd'hui » : position calculée d'après la date du jour (build.js, --at). */
  .is-motion .slot__today {
    display: block;
    position: absolute;
    top: 0;
    bottom: 0;
    left: calc(var(--pad) + var(--at) * var(--yw));
    width: 2px;
    background: var(--coral);
  }

  .is-motion .slot__today span {
    position: absolute;
    top: 0;
    left: 10px;
    font-family: var(--f-mono);
    font-size: var(--fs-label);
    font-weight: 600;
    line-height: 1.3;
    letter-spacing: var(--ls-caps);
    text-transform: uppercase;
    white-space: nowrap;
  }

  .is-motion .slot__list {
    position: absolute;
    inset: 0;
    display: block;
    padding: 0;
  }

  .is-motion .slot__list::before,
  .is-motion .slot__item::before {
    display: none;
  }

  .is-motion .slot__item {
    position: absolute;
    top: 8px;
    bottom: var(--band);
    left: calc(var(--pad) + var(--from) * var(--yw));
  }

  .is-motion .slot__item--mission,
  .is-motion .slot__item--venture {
    width: var(--card);
  }

  /* La carte EventFlow reste après la dernière année, même quand build.js ajoute des colonnes (--extra-years). */
  .is-motion .slot__item--venture {
    left: calc(var(--pad) + (var(--from) + var(--extra-years, 0)) * var(--yw));
  }

  /* Deux rangées de distinctions : la première sous « Aujourd'hui », la seconde posée au-dessus des barres. */
  .is-motion .slot__item--award {
    top: 32px;
    bottom: auto;
    width: var(--award);
  }

  .is-motion .slot__item--award.is-lower {
    top: auto;
    bottom: calc(var(--band) + 40px);
  }

  .is-motion .mission__bar {
    display: block;
    position: absolute;
    bottom: calc(6px + var(--lane) * 14px);
    left: 0;
    width: calc((var(--to) - var(--from)) * var(--yw));
    height: 8px;
    border-radius: 999px;
    background: var(--ink);
  }

  .is-motion .slot__item--current .mission__bar {
    background: linear-gradient(to right, var(--ink) 70%, var(--coral));
  }

  .is-motion .mission {
    max-height: calc(100% - 34px);
    overflow: hidden;
  }
}

/* Portables à fenêtre basse : cartes un peu plus larges et années moins hautes, pour garder le texte à 16-17 px. */
@media (min-width: 821px) and (min-height: 40em) and (max-height: 51.25em) {
  .is-motion .slot {
    --card: min(29.375rem, calc(var(--yw) * 1.3));
    --yfs: min(calc(var(--yw) / 2.41), 12svh);
  }

  .is-motion .mission {
    gap: 6px;
    padding: 18px 18px 20px;
  }

  .is-motion .mission__name {
    font-size: 2.125rem;
  }

  .is-motion .mission__role {
    font-size: var(--fs-body);
  }

  .is-motion .mission__gist {
    font-size: var(--fs-body-s);
  }

  .is-motion .mission__list {
    gap: 8px;
    font-size: var(--fs-note);
  }
}

.parcours__pdf {
  margin-top: clamp(32px, 3.5vw, 3.5rem);
  font-size: var(--fs-body);
}

@media (max-width: 820px) {
  .parcours__story p,
  .parcours__story p:first-child,
  .parcours__story p:last-child {
    grid-column: 1 / -1;
  }
}

/* ---------- 7. Contact (aplat corail, texte encre) ---------- */

.contact {
  --focus: var(--ink);
  padding-block: calc(var(--header) + clamp(24px, 3vw, 3rem)) clamp(48px, 5.5vw, 5.5rem);
  background: var(--coral);
  color: var(--ink);
}

.contact ::selection,
.site-footer ::selection {
  background: var(--ink);
  color: var(--coral);
}

/* La question en titre d'affiche, sur trois rangées calées sur la plus large (build.js mesure --em).
   Interligne 0,96 : le circonflexe de « COÛTE » ne touche pas la ligne du dessus. */
.contact__title {
  display: flex;
  flex-direction: column;
  font-size: calc((100vw - 2 * var(--gutter)) / var(--em));
  font-size: calc(100cqw / var(--em));
  line-height: 0.96;
  overflow-y: clip;
  padding-top: 0.08em;
}

.ct-row {
  display: block;
  white-space: nowrap;
}

.contact__grid {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: 56px var(--gap);
  margin-top: clamp(40px, 5vw, 5rem);
}

.contact__action {
  grid-column: 1 / span 5;
  display: grid;
  align-content: start;
  gap: 40px;
}

.contact__cta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 28px 36px;
}

.cta {
  display: grid;
  place-content: center;
  justify-items: center;
  gap: 6px;
  width: clamp(168px, 15vw, 13.75rem);
  aspect-ratio: 1;
  border-radius: 50%;
  background: var(--ink);
  color: var(--white);
  font-size: clamp(1.125rem, 0.6rem + 0.9vw, 1.375rem);
  font-weight: 600;
  letter-spacing: -0.02em;
  text-decoration: none;
  transition: background-color 0.3s ease;
}

.cta:hover {
  background: var(--blue);
}

.cta__icon {
  font-family: var(--f-mono);
  font-size: 1.2em;
}

.contact__links {
  display: grid;
  gap: 10px;
}

.contact__links a {
  font-weight: 600;
  text-decoration: underline;
  text-decoration-thickness: 1.5px;
  text-underline-offset: 4px;
}

.contact__links a:hover {
  text-decoration-thickness: 3px;
}

/* L'adresse e-mail : une donnée, en chasse fixe, couleur pleine, 17 px. */
.contact__mail {
  font-family: var(--f-mono);
  font-size: var(--fs-body);
}

.contact__offer {
  grid-column: 7 / -1;
  display: grid;
  gap: 18px;
}

.offer {
  display: grid;
}

.offer li {
  padding-block: 16px;
  border-top: 1px solid var(--ink);
  font-size: var(--fs-body);
  line-height: 1.5;
}

/* Intitulés sans point final : chacun sur sa ligne, au-dessus de sa description. */
.offer strong {
  display: block;
  margin-bottom: 2px;
  font-size: clamp(1.1875rem, 0.8rem + 0.8vw, 1.4375rem);
  letter-spacing: -0.02em;
}

.terms {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 20px var(--gap);
  margin-top: 18px;
}

.terms > div {
  display: grid;
  gap: 6px;
  padding-top: 12px;
  border-top: 1.5px solid var(--ink);
}

.terms dd {
  font-weight: 600;
  line-height: 1.35;
}

.site-footer {
  --focus: var(--ink);
  padding: 24px 0 0;
  background: var(--coral);
  color: var(--ink);
}

.site-footer__row {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: 12px 24px;
  padding-top: 20px;
  border-top: 1.5px solid var(--ink);
}

.site-footer__links {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 24px;
}

.site-footer__links a {
  font-weight: 600;
  text-decoration: none;
  border-bottom: 1.5px solid currentColor;
}

.site-footer__links a:hover {
  border-bottom-width: 3px;
}

.wordmark-box {
  margin-top: clamp(40px, 6vw, 6rem);
}

.wordmark {
  overflow-y: clip;
  margin-bottom: -0.02em;
  line-height: 0.8;
}

/* Place pour les accents de « JÉRÉMY » (em calculé sur la taille du mot-symbole). */
.wordmark .fit {
  padding-top: 0.22em;
}

@media (max-width: 1000px) {
  .contact__action,
  .contact__offer {
    grid-column: 1 / -1;
  }
}

@media (max-width: 520px) {
  .terms {
    grid-template-columns: 1fr;
  }
}

/* ---------- Pause des animations (bouton de l'en-tête) ---------- */

/* Les boucles autonomes se figent dans build.js (motion.still()) ; côté feuille, les fondus décoratifs s'arrêtent. */
:root[data-motion="paused"] .atelier__canvas,
:root[data-motion="paused"] .slot__years span {
  transition: none;
}

/* ---------- Mouvement réduit ---------- */

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    scroll-behavior: auto !important;
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
  }
}

/* Fin de la piste : passé 10,8 années, l'étiquette « Aujourd'hui » se range à gauche de sa ligne
   pour ne pas passer sous la dernière carte (build.js, placeToday). */
.is-motion .slot__today.is-late span {
  right: 10px;
  left: auto;
}

/* Arrivée directe sur #atelier en grille statique : l'étiquette ne passe plus sous l'en-tête fixe
   (avec WebGL, .has-webgl .atelier garde son retrait nul). */
.atelier {
  padding-top: calc(var(--header) + 24px);
}

.tf-switch:focus-visible {
  border-radius: 999px;
}

.choices__big {
  line-height: 1.04;
}