/* RUN — « Nuit de production » : des systèmes fiables. Sombre, précis, cinématographique.
   Échelle typographique commune (jetons --fs-*, shared/transformer.css) : rien sous 14 px, aucune phrase sous 16 px,
   la chasse fixe réservée aux données courtes (heure, dates, compteurs, numéros d'étape, étiquettes). */
:root {
  color-scheme: dark;
  --night: #05111a;
  --night-2: #0a1a24;
  --night-3: #0f2531;
  --fg: #e6eff2;
  --soft: #c6d6db; /* texte secondaire : chapôs, listes, valeurs */
  --muted: #93aab3;
  --line: rgb(214 232 238 / 12%);
  --line-2: rgb(214 232 238 / 24%);
  --signal: #5b86ff; /* le fil, la production */
  --mint: #2fd3bf; /* l'état sain */
  --coral: #ff6746; /* l'alerte, l'action */
  --sans: "Geist", "Avenir Next", system-ui, sans-serif;
  --mono: "Geist Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  --pad: clamp(20px, 3.4vw, 3rem);
  --bar: 72px;
  /* Halo couleur nuit : les textes posés sur le signal restent nets au passage des particules. */
  --halo: 0 0 14px rgb(5 17 26 / 95%), 0 0 3px rgb(5 17 26 / 90%);
  --tf-fg: #e6eff2;
  --tf-muted: #93aab3;
  --tf-line: rgb(214 232 238 / 24%);
  --tf-knob: #2fd3bf;
  --tf-knob-ink: #05111a;
  /* Composants partagés (shared/composants.css) */
  --cmp-bg: var(--night-2);
  --cmp-proof-size: clamp(13.5rem, 9rem + 9vw, 19rem);
  --cmp-proof-count-size: clamp(4rem, 2rem + 6vw, 8.75rem);
  --cmp-fg: var(--fg);
  --cmp-muted: var(--muted);
  --cmp-line: var(--line-2);
  --cmp-surface: rgb(5 17 26 / 55%);
  --cmp-accent: var(--coral);
  --cmp-accent-ink: var(--night);
  --cmp-alert: var(--coral);
  --cmp-ok: var(--mint);
  --cmp-ghost: rgb(214 232 238 / 22%);
  --cmp-focus: var(--mint);
  --cmp-radius: 14px;
  --cmp-shadow: 0 30px 70px -35px rgb(0 0 0 / 80%);
  --cmp-font: var(--sans);
  --cmp-display: var(--sans);
  /* La grille 100 → 10 remplace le grand chiffre d'affiche : elle garde une taille de point d'orgue. */
}

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

html {
  background: var(--night);
}

body {
  margin: 0;
  background: var(--night);
  color: var(--fg);
  font-family: var(--sans);
  font-size: var(--fs-body);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

::selection {
  background: var(--coral);
  color: var(--night);
}

a {
  color: inherit;
}

a:focus-visible,
summary:focus-visible {
  outline: 2px solid var(--mint);
  outline-offset: 4px;
}

/* Cibles des ancres et d'« Aller au contenu » : elles reçoivent le focus (lecteurs d'écran, Tab suivant)
   sans contour, ce ne sont pas des commandes. */
[tabindex="-1"]:focus {
  outline: none;
}

h1,
h2,
h3,
p {
  margin: 0;
}

h1,
h2,
h3 {
  text-wrap: balance;
}

p,
dd,
li {
  text-wrap: pretty;
}

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

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

.skip {
  position: fixed;
  top: 12px;
  left: 12px;
  z-index: 100;
  padding: 10px 16px;
  border-radius: 6px;
  background: var(--fg);
  color: var(--night);
  font-size: 1rem;
  font-weight: 600;
  transform: translateY(-200%);
}

.skip:focus {
  transform: none;
}

/* Titres découpés : masqués le temps du découpage, jamais plus de 2,5 s si le script échoue (1 s dans l'accueil :
   sur une connexion lente, le premier écran se lit sans attendre les modules ; run.js saute alors l'animation
   d'entrée pour ne pas faire clignoter ce qui est déjà affiché). */
.js [data-split] {
  visibility: hidden;
  animation: split-fallback 0s var(--split-fallback, 2.5s) forwards;
}

.js [data-split].is-split {
  visibility: visible;
  animation: none;
}

/* Promesse et fiche de l'accueil : masquées avant le script quand elles vont apparaître en fondu (plus de
   clignotement « visible, masqué, visible »), avec la même sécurité. Sans JavaScript ou en mouvement
   réduit, rien n'est masqué. */
@media (prefers-reduced-motion: no-preference) {
  .js [data-reveal] {
    visibility: hidden;
    animation: split-fallback 0s var(--split-fallback, 2.5s) forwards;
  }

  .js [data-reveal].is-revealed {
    visibility: visible;
    animation: none;
  }
}

@keyframes split-fallback {
  to {
    visibility: visible;
  }
}

.eyebrow {
  margin-bottom: 22px;
  color: var(--muted);
  font-family: var(--mono);
  font-size: var(--fs-label);
  font-weight: 500;
  letter-spacing: var(--ls-caps);
  text-transform: uppercase;
}

.dot {
  display: inline-block;
  width: 8px;
  height: 8px;
  flex: none;
  border-radius: 50%;
  background: var(--mint);
}

/* Deux pastilles respirent : l'heure de Lille en direct (corail) et « À l'écoute de nouvelles missions » (menthe). */
.dot--live {
  margin-right: 10px;
  vertical-align: 0.08em;
  background: var(--coral);
  animation: pulse-coral 2.4s ease-out infinite;
}

.status__head .dot {
  animation: pulse-mint 2.8s ease-out infinite;
}

@keyframes pulse-coral {
  0% {
    box-shadow: 0 0 0 0 rgb(255 103 70 / 55%);
  }

  70%,
  100% {
    box-shadow: 0 0 0 8px rgb(255 103 70 / 0%);
  }
}

@keyframes pulse-mint {
  0% {
    box-shadow: 0 0 0 0 rgb(47 211 191 / 50%);
  }

  70%,
  100% {
    box-shadow: 0 0 0 8px rgb(47 211 191 / 0%);
  }
}

/* Grain de film, fixe au-dessus de la page (très léger, il ne gêne pas la lecture). */
.grain {
  position: fixed;
  inset: -50%;
  z-index: 40;
  width: 200%;
  height: 200%;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.55'/%3E%3C/svg%3E");
  opacity: 0.07;
  pointer-events: none;
  animation: grain 1.2s steps(6) infinite;
}

@keyframes grain {
  0% {
    transform: translate(0, 0);
  }

  33% {
    transform: translate(-3%, 2%);
  }

  66% {
    transform: translate(2%, -3%);
  }

  100% {
    transform: translate(0, 0);
  }
}

/* Couche fixe : le signal WebGL */
.signal {
  position: fixed;
  inset: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

/* En-tête : même géométrie que le thème BUILD. Marque | navigation | pause | interrupteur. */
.bar {
  position: fixed;
  top: 0;
  right: 0;
  left: 0;
  z-index: 50;
  display: grid;
  grid-template-columns: auto 1fr auto auto;
  align-items: center;
  gap: 24px;
  height: var(--bar);
  padding: 0 32px;
  background: linear-gradient(rgb(5 17 26 / 88%), rgb(5 17 26 / 0%));
  transition: background 300ms ease, backdrop-filter 300ms ease;
}

/* Le bouton pause et l'interrupteur gardent leurs colonnes, que la navigation soit masquée ou que le bouton
   le soit (mouvement réduit). */
.bar .motion-toggle {
  grid-row: 1;
  grid-column: -3;
}

.bar .tf-switch {
  grid-row: 1;
  grid-column: -2;
}

/* Sans JavaScript, la classe is-scrolled n'est jamais posée : l'en-tête garde son fond flou, le texte ne passe plus sous la navigation. */
.bar.is-scrolled,
html:not(.js) .bar {
  background: rgb(5 17 26 / 78%);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  font-size: 1rem;
  font-weight: 600;
  letter-spacing: -0.01em;
  text-decoration: none;
  white-space: nowrap;
}

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

.bar__nav {
  display: flex;
  justify-content: center;
  gap: clamp(18px, 3vw, 2.75rem);
  font-family: var(--mono);
  font-size: var(--fs-label);
  font-weight: 500;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.bar__nav a {
  color: var(--muted);
  text-decoration: none;
  transition: color 200ms ease;
}

.bar__nav a:hover {
  color: var(--fg);
}

main {
  position: relative;
  z-index: 1;
}

/* Accueil : l'heure, l'espace du signal, le positionnement collé au titre, puis la promesse et la fiche. */
.hero {
  position: relative;
  display: grid;
  min-height: 100svh;
  --hero-top: calc(var(--bar) + 28px);
  --band-min: 14px;
  --split-fallback: 1s;
  grid-template-rows: auto minmax(var(--band-min), 1fr) auto auto auto auto;
  padding: var(--hero-top) var(--pad) 36px;
}

.hero__top {
  display: flex;
  justify-content: space-between;
  gap: 24px;
  color: var(--soft);
  font-weight: 500;
  text-shadow: var(--halo);
}

/* L'heure n'est montrée qu'une fois lue par le script (classe is-timed) : jamais de « --:-- » à l'écran, ni pendant le
   chargement, ni sans JavaScript. D'ici là, la ligne ne montre que « Lille » : sa boîte est coupée à la largeur du mot
   (chasse fixe : 5 caractères et leur interlettrage de 0,02 em), le reste (« · --:-- ») reste dans le HTML sans
   s'afficher. Rien n'est masqué par visibility ou opacity : le contenu reste présent sans JavaScript. */
.hero__top p:not(.is-timed) {
  width: calc(5ch + 0.1em + 18px);
  overflow: hidden;
  white-space: nowrap;
}

/* Sur ordinateur, l'espace libre au-dessus du titre (le signal y passe en grand) ; sur mobile, une bande à lui. */
.hero__band {
  min-height: 0;
}

.hero__role {
  color: var(--fg);
  font-size: var(--fs-position);
  font-weight: 500;
  letter-spacing: -0.005em;
  line-height: 1.3;
  text-shadow: var(--halo);
}

.hero__mode {
  margin: 2px 0 clamp(14px, 1.6vw, 1.375rem);
  color: var(--soft);
  font-size: var(--fs-body-s);
  line-height: 1.45;
  text-shadow: var(--halo);
}

.hero__title {
  margin: 0 0 clamp(20px, 3vw, 2.5rem) -0.04em;
  font-size: clamp(38px, 12.4vw, 13.25rem);
  font-weight: 620;
  letter-spacing: -0.062em;
  line-height: 0.84;
  text-transform: uppercase;
}

.hero__bottom {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 28px 40px;
}

/* La promesse garde sa mesure ; la rangée des boutons peut s'élargir pour y loger le lien PDF. */
.hero__pitch {
  flex: 1 1 520px;
  max-width: 43.75rem;
}

.hero__lead {
  max-width: 35rem;
  color: var(--soft);
  font-size: var(--fs-lead);
  line-height: 1.5;
}

.hero__lead strong {
  display: block;
  margin-bottom: 10px;
  color: var(--fg);
  font-size: clamp(1.3125rem, 1.9vw, 1.75rem);
  font-weight: 600;
  letter-spacing: -0.025em;
  line-height: 1.2;
}

.hero__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  margin-top: 24px;
}

/* Lien texte discret, pas un troisième bouton. */
.hero__pdf {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  padding: 0 4px;
  color: var(--soft);
  font-size: var(--fs-body-s);
  text-decoration: underline;
  text-decoration-color: var(--line-2);
  text-underline-offset: 5px;
  transition: color 200ms ease, text-decoration-color 200ms ease;
}

.hero__pdf:hover {
  color: var(--fg);
  text-decoration-color: var(--fg);
}

.status {
  flex: 0 1 26.5rem;
  min-width: min(100%, 390px);
  max-width: 35rem;
  margin: 0;
  padding: 16px 18px;
  border: 1px solid var(--line-2);
  border-radius: 10px;
  background: rgb(10 26 36 / 62%);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  font-family: var(--mono);
  font-size: var(--fs-label);
}

.status > div {
  display: grid;
  grid-template-columns: 6.5rem 1fr;
  gap: 12px;
  align-items: baseline;
  padding: 7px 0;
}

.status > div + div {
  border-top: 1px solid var(--line);
}

.status > .status__head {
  grid-template-columns: auto 1fr;
  align-items: center;
  padding-bottom: 10px;
}

.status dt {
  color: var(--muted);
  font-weight: 500;
}

.status .status__head dt {
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--mint);
}

/* Valeurs de la fiche : des preuves, lues en Geist. */
.status dd {
  margin: 0;
  color: var(--fg);
  font-family: var(--sans);
  font-size: var(--fs-body-s);
  line-height: 1.45;
}

.status .status__head dd {
  font-weight: 500;
  text-align: right;
}

.hero__cue {
  position: absolute;
  top: var(--hero-top);
  right: var(--pad);
  color: var(--soft);
  font-weight: 500;
  text-shadow: var(--halo);
}

.hero__cue span {
  display: inline-block;
  margin-left: 6px;
  animation: cue 1.8s ease-in-out infinite;
}

@keyframes cue {
  50% {
    transform: translateY(4px);
  }
}

/* Méthode : scène épinglée, le texte à gauche, le signal à droite */
.method {
  position: relative;
}

.method__pin {
  position: relative;
  display: grid;
  min-height: 100svh;
  grid-template-columns: minmax(0, 0.46fr) minmax(0, 0.54fr);
  grid-template-rows: auto 1fr auto;
  column-gap: 40px;
  padding: calc(var(--bar) + 40px) var(--pad) 48px;
}

.method__head {
  grid-column: 1;
}

.method__head h2 {
  max-width: 38.75rem;
  font-size: clamp(38px, 4.6vw, 4.875rem);
  font-weight: 620;
  letter-spacing: -0.055em;
  line-height: 0.96;
  text-transform: uppercase;
}

.steps {
  position: relative;
  grid-column: 1;
  align-self: end;
  min-height: 320px;
  margin: 40px 0 0;
  padding: 0;
  list-style: none;
}

.step {
  max-width: 31.25rem;
}

.step + .step {
  margin-top: 40px;
}

/* Étapes superposées : seule l'opacité change, les cinq restent lues par les lecteurs d'écran et la recherche.
   Elles sont centrées à mi-hauteur de la scène, à gauche, face au signal (et non plus calées en bas). */
.js .method.is-pinned .steps {
  align-self: stretch;
}

.js .method.is-pinned .step {
  position: absolute;
  top: 50%;
  left: 0;
  margin: 0;
  translate: 0 -50%;
  pointer-events: none;
}

.js .method.is-pinned .step.is-active {
  pointer-events: auto;
}

/* Sans épinglage sur grand écran (mouvement réduit, sans JavaScript) : les cinq étapes en grille, sur toute la largeur. */
.method:not(.is-pinned) .method__pin {
  grid-template-columns: minmax(0, 1fr);
  min-height: 0;
}

.method:not(.is-pinned) .steps {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 21.25rem), 1fr));
  gap: 40px clamp(28px, 3vw, 3.5rem);
  align-self: start;
  min-height: 0;
}

.method:not(.is-pinned) .step + .step {
  margin-top: 0;
}

.method:not(.is-pinned) .progress {
  display: none;
}

.step__num {
  display: block;
  margin-bottom: 12px;
  color: var(--coral);
  font-weight: 500;
}

/* La dernière étape prend la couleur de l'état sain, comme le signal. */
.step:last-child .step__num {
  color: var(--mint);
}

.step h3 {
  margin-bottom: 10px;
  font-size: clamp(26px, 2.6vw, 2.375rem);
  font-weight: 600;
  letter-spacing: -0.03em;
  line-height: 1.05;
}

.step p {
  color: var(--soft);
  font-size: var(--fs-body);
}

/* Preuves en texte courant (plus lisible que la chasse fixe), étiquette « En mission » en mono. */
.step .step__proof {
  margin-top: 18px;
  padding-top: 14px;
  border-top: 1px solid var(--line);
  color: #adc2ca;
  font-size: var(--fs-body-s);
  line-height: 1.55;
}

.step__proof span {
  display: block;
  margin-bottom: 6px;
  color: var(--mint);
  font-family: var(--mono);
  font-size: var(--fs-label);
  font-weight: 500;
  letter-spacing: var(--ls-caps);
  text-transform: uppercase;
}

.progress {
  grid-column: 1;
  height: 2px;
  margin-top: 36px;
  background: var(--line);
}

.progress__bar {
  display: block;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, var(--signal), var(--mint));
  transform: scaleX(0);
  transform-origin: left;
}

/* Écrans peu hauts (portables) : la scène épinglée doit tenir entière dans la fenêtre, sans texte sous 16 px. */
@media (min-width: 821px) and (max-height: 820px) {
  .method__pin {
    padding-top: calc(var(--bar) + 16px);
    padding-bottom: 24px;
  }

  .method__head h2 {
    font-size: clamp(32px, 3.8vw, 3.75rem);
  }

  .steps {
    min-height: 260px;
    margin-top: 20px;
  }

  .step h3 {
    font-size: clamp(24px, 2.2vw, 2rem);
  }

  .step .step__proof {
    margin-top: 12px;
    padding-top: 10px;
  }

  .progress {
    margin-top: 20px;
  }
}

/* Le résultat : le bruit de l'incident (corail) devenu un état sain (menthe), en grille de cent points. */
.result {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: end;
  gap: 22px clamp(28px, 4vw, 4rem);
  margin: 0 var(--pad);
  padding: clamp(40px, 4.5vw, 4.5rem) 0 clamp(48px, 5vw, 5rem);
  border-top: 1px solid var(--line);
}

.result__label {
  grid-column: 1 / -1;
  color: var(--muted);
  font-weight: 500;
  letter-spacing: var(--ls-caps);
  text-transform: uppercase;
}

.result__text {
  max-width: 26em;
  padding-bottom: 0.4em;
  color: var(--soft);
  font-size: var(--fs-lead);
  line-height: 1.5;
}

/* Scène épinglée : la preuve reste dans la colonne du texte ; à droite, la boucle menthe du signal lui passe le relais. */
.method.is-pinned .result {
  grid-template-columns: minmax(0, 0.46fr) minmax(0, 0.54fr);
  column-gap: 40px;
}

.method.is-pinned .result > * {
  grid-column: 1;
}

/* EventFlow : le globe des événements */
.product {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  align-items: center;
  gap: clamp(32px, 5vw, 5rem);
  padding: clamp(64px, 6vw, 6rem) var(--pad);
  border-top: 1px solid var(--line);
  background: radial-gradient(ellipse at 25% 45%, rgb(38 88 237 / 16%), transparent 60%);
}

.product__globe {
  position: relative;
  align-self: stretch;
}

.globe {
  display: block;
  width: 100%;
  aspect-ratio: 1;
  max-width: 45rem;
}

/* Légende : une note en Geist ; la liste des pays reste en données courtes (chasse fixe). */
.globe__caption {
  margin-top: 8px;
  color: var(--muted);
  font-family: var(--sans);
  font-size: var(--fs-note);
  letter-spacing: 0;
}

.globe__legend {
  display: grid;
  gap: 6px;
  width: min(100%, 280px);
  margin: 18px 0 0;
  padding: 0;
  font-weight: 500;
  list-style: none;
}

.globe__legend li {
  display: flex;
  justify-content: space-between;
  padding-bottom: 6px;
  border-bottom: 1px solid var(--line);
  color: var(--muted);
}

.globe__legend li span:last-child {
  color: var(--fg);
}

.product__body .eyebrow {
  display: flex;
  align-items: center;
  gap: 12px;
}

.product__logo {
  display: block;
  flex: none;
  width: 28px;
  height: 28px;
  border-radius: 7px;
}

.product__body h2 {
  font-size: clamp(56px, 7.6vw, 8rem);
  font-weight: 620;
  letter-spacing: -0.06em;
  line-height: 0.86;
  text-transform: uppercase;
}

.product__lead {
  max-width: 35rem;
  margin-top: 24px;
  color: var(--soft);
  font-size: var(--fs-lead);
}

.metrics {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 20px;
  margin: 40px 0 0;
}

.metrics > div {
  display: flex;
  flex-direction: column-reverse;
  justify-content: flex-end;
  gap: 8px;
  padding-top: 14px;
  border-top: 1px solid var(--mint);
}

.metrics dd {
  margin: 0;
  font-size: clamp(34px, 3.8vw, 3.625rem);
  font-weight: 600;
  letter-spacing: -0.04em;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}

.metrics dt {
  color: var(--muted);
  font-size: var(--fs-note);
  line-height: 1.4;
}

/* Puces neutres : un simple tiret, plus de pastille « état sain ». */
.checks {
  display: grid;
  gap: 14px;
  max-width: var(--measure);
  margin: 36px 0 0;
  padding: 0;
  list-style: none;
}

.checks li {
  position: relative;
  padding-left: 22px;
  color: var(--soft);
  font-size: var(--fs-body);
}

.checks li::before {
  position: absolute;
  top: 0.8em;
  left: 2px;
  width: 10px;
  height: 1px;
  background: var(--muted);
  content: "";
}

.checks p {
  margin: 0;
}

.checks strong {
  display: block;
  color: var(--fg);
  font-weight: 600;
}

/* Masques de lignes SplitText : la zone de découpe inclut les accents des capitales. */
.line-mask {
  padding-top: 0.16em;
  margin-top: -0.16em;
  padding-bottom: 0.05em;
  margin-bottom: -0.05em;
}

/* La source datée des chiffres est une phrase : Geist, bas de casse. */
.source {
  max-width: var(--measure);
  margin-top: 26px;
  color: var(--muted);
  font-family: var(--sans);
  font-size: var(--fs-note);
  letter-spacing: 0;
}

.links {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 26px;
}

.pill {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: 44px;
  padding: 10px 18px;
  border: 1px solid var(--line-2);
  border-radius: 999px;
  font-size: 1rem;
  font-weight: 500;
  text-decoration: none;
  transition: border-color 200ms ease, background 200ms ease;
}

.pill:hover {
  border-color: var(--fg);
  background: rgb(230 239 242 / 6%);
}

.pill--coral {
  border-color: var(--coral);
  background: var(--coral);
  color: var(--night);
  font-weight: 600;
}

.pill--coral:hover {
  border-color: #ff8466;
  background: #ff8466;
}

/* Parcours : une phrase par mission, puis les faits */
.section-head {
  padding: 0 var(--pad);
}

.section-head h2 {
  font-size: clamp(38px, 7vw, 7.5rem);
  font-weight: 620;
  letter-spacing: -0.058em;
  line-height: 0.96;
  text-transform: uppercase;
}

.journal {
  padding: clamp(64px, 6vw, 6rem) 0;
  border-top: 1px solid var(--line);
}

.log {
  margin: clamp(32px, 4vw, 3.5rem) var(--pad) 0;
  padding: 0;
  border-top: 1px solid var(--line-2);
  list-style: none;
}

.log__entry {
  position: relative;
  display: grid;
  grid-template-columns: 14.375rem minmax(0, 1fr);
  gap: 24px;
  padding: 22px 0;
  border-bottom: 1px solid var(--line);
}

.log__entry::before {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 1px;
  background: linear-gradient(90deg, var(--mint), transparent);
  content: "";
  opacity: 0;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 700ms cubic-bezier(0.22, 1, 0.36, 1), opacity 300ms ease;
}

.log__entry:hover::before {
  opacity: 1;
  transform: none;
}

/* Dates : données courtes en chasse fixe, lisibles (15 px, gris clair) ; les distinctions restent en corail. */
.log__time {
  padding-top: 10px;
  color: var(--soft);
  font-size: 0.9375rem;
  font-weight: 500;
}

.log__entry--event .log__time {
  color: var(--coral);
}

.log__body h3 {
  font-size: clamp(28px, 3.4vw, 3.375rem);
  font-weight: 600;
  letter-spacing: -0.045em;
  line-height: 1;
  text-transform: uppercase;
}

.log__entry--event h3 {
  font-size: clamp(20px, 2vw, 1.75rem);
  letter-spacing: -0.02em;
}

/* Le poste occupé est un intitulé, comme .mission__role côté BUILD. Un <span> dans les summary (un <p> n'y est pas
   permis) : display: block lui rend sa ligne. */
.log__meta {
  display: block;
  margin-top: 10px;
  font-family: var(--sans);
  letter-spacing: 0;
  text-wrap: pretty;
}

.log__entry--mission .log__meta {
  color: var(--fg);
  font-size: var(--fs-role);
  font-weight: 500;
  line-height: 1.35;
}

/* La distinction (« Podium », « 1re place ») est la preuve elle-même. */
.log__entry--event .log__meta {
  margin-top: 6px;
  color: var(--soft);
  font-size: var(--fs-body-s);
  line-height: 1.5;
}

.log__meta a {
  color: var(--fg);
  text-underline-offset: 4px;
}

.log__gist {
  display: block;
  max-width: 47.5rem;
  margin-top: 14px;
  color: var(--fg);
  font-size: clamp(1.0625rem, 1.5vw, 1.3125rem);
  letter-spacing: -0.01em;
  line-height: 1.4;
}

.log__link {
  color: var(--mint);
  text-underline-offset: 4px;
}

.log__body summary {
  position: relative;
  padding-right: 48px;
  list-style: none;
  cursor: pointer;
}

.log__body summary::-webkit-details-marker {
  display: none;
}

.log__body summary::after {
  position: absolute;
  top: 6px;
  right: 0;
  display: grid;
  width: 34px;
  height: 34px;
  place-items: center;
  border: 1px solid var(--line-2);
  border-radius: 50%;
  color: var(--muted);
  content: "+";
  transition: transform 300ms ease;
}

.log__body[open] summary::after {
  transform: rotate(45deg);
}

.log__body ul {
  display: grid;
  gap: 10px;
  max-width: var(--measure);
  margin: 22px 0 0;
  padding: 0;
  list-style: none;
}

.log__body li {
  position: relative;
  padding-left: 20px;
  color: var(--soft);
  font-size: var(--fs-body);
}

.log__body li::before {
  position: absolute;
  top: 0.72em;
  left: 0;
  width: 8px;
  height: 1px;
  background: var(--mint);
  content: "";
}

/* Phrase de renvoi vers le PDF : Geist, bas de casse. */
.journal__more {
  max-width: var(--measure);
  margin: 28px var(--pad) 0;
  color: var(--muted);
  font-family: var(--sans);
  font-size: var(--fs-note);
  letter-spacing: 0;
}

.journal__more a {
  color: var(--fg);
  text-underline-offset: 4px;
}

/* L'IA : le copilote en preuve principale, avec sa vidéo */
.ai {
  padding: clamp(64px, 6vw, 6rem) 0;
  border-top: 1px solid var(--line);
}

.ai__lead {
  max-width: 35rem;
  margin-top: 26px;
  color: var(--soft);
  font-size: var(--fs-lead);
  /* Deux phrases : la coupe tombe entre elles, plus de « L'IA » seul en bout de ligne. */
  text-wrap: balance;
}

.ai__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(0, 0.75fr);
  gap: clamp(28px, 4vw, 4rem);
  margin: clamp(32px, 4vw, 3.5rem) var(--pad) 0;
}

.feature {
  min-width: 0;
  padding: clamp(24px, 3vw, 2.5rem);
  border: 1px solid var(--line-2);
  border-radius: 14px;
  background: linear-gradient(160deg, rgb(91 134 255 / 10%), rgb(10 26 36 / 60%) 55%);
}

.feature__where {
  color: var(--muted);
  font-weight: 500;
  letter-spacing: var(--ls-caps);
  text-transform: uppercase;
}

.feature h3 {
  margin-top: 18px;
  font-size: clamp(30px, 3.4vw, 3.25rem);
  font-weight: 600;
  letter-spacing: -0.045em;
  line-height: 1;
  text-transform: uppercase;
}

.feature__text {
  max-width: 38.75rem;
  margin-top: 18px;
  color: var(--soft);
  font-size: var(--fs-body);
}

.feature__status {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  max-width: 38.75rem;
  margin-top: 26px;
  color: var(--soft);
  font-size: var(--fs-body-s);
}

.feature__status .dot {
  margin-top: 8px;
}

.feature .video-card {
  margin-top: clamp(28px, 3vw, 2.5rem);
}

.ai__more {
  display: grid;
  align-content: start;
  margin: 0;
  padding: 0;
  list-style: none;
}

.ai__more li {
  padding: 22px 0;
  border-top: 1px solid var(--line);
}

.ai__more li:last-child {
  border-bottom: 1px solid var(--line);
}

.ai__more h3 {
  margin-bottom: 8px;
  color: var(--muted);
  font-family: var(--mono);
  font-size: var(--fs-label);
  font-weight: 500;
  letter-spacing: var(--ls-caps);
  text-transform: uppercase;
}

.ai__more p {
  color: #d3e0e4;
  font-size: var(--fs-body);
}

.ai__more a {
  color: var(--fg);
  text-decoration-color: var(--line-2);
  text-underline-offset: 4px;
  transition: text-decoration-color 200ms ease;
}

.ai__more a:hover {
  text-decoration-color: var(--mint);
}

/* Atelier : ce que je construis à côté des missions, avec l'état réel de chaque projet. */
.atelier {
  padding: clamp(64px, 6vw, 6rem) 0;
  border-top: 1px solid var(--line);
}

.atelier__lead {
  max-width: 38rem;
  margin-top: 26px;
  color: var(--soft);
  font-size: var(--fs-lead);
  text-wrap: balance;
}

.atelier__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(20px, 2.4vw, 2rem);
  margin: clamp(32px, 4vw, 3.5rem) var(--pad) 0;
  padding: 0;
  list-style: none;
}

@media (min-width: 1400px) {
  .atelier__grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

.tool {
  display: flex;
  flex-direction: column;
  min-width: 0;
  overflow: hidden;
  border: 1px solid var(--line-2);
  border-radius: 14px;
  background: linear-gradient(160deg, rgb(91 134 255 / 8%), rgb(10 26 36 / 60%) 55%);
  transition: border-color 250ms ease;
}

.tool:hover,
.tool:focus-within {
  border-color: rgb(47 211 191 / 45%);
}

/* Le photobooth et la surveillance prennent toute la largeur : image ou schéma à gauche, texte à droite. */
.tool--large,
.tool--watch {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
}

.tool__shot {
  margin: 0;
  overflow: hidden;
  aspect-ratio: 1440 / 1000;
  border-bottom: 1px solid var(--line);
  background: var(--night-2);
}

/* Fiche large : la hauteur suit le texte, l'image est recadrée (sinon, sur grand écran, l'image impose un vide sous le texte). */
.tool--large .tool__shot {
  position: relative;
  min-height: 24rem;
  aspect-ratio: auto;
  border-right: 1px solid var(--line);
  border-bottom: 0;
}

.tool--large .tool__shot img {
  position: absolute;
  inset: 0;
}

.tool__shot img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top left;
}

.tool__body {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: 14px;
  padding: clamp(22px, 2.6vw, 2.25rem);
}

.tool__state {
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--soft);
  font-family: var(--mono);
  font-size: var(--fs-label);
  font-weight: 500;
  letter-spacing: var(--ls-caps);
  text-transform: uppercase;
}

.tool__state .dot {
  background: var(--signal);
}

.tool__state--open .dot {
  background: var(--coral);
}

.tool__state--live .dot {
  background: var(--mint);
  animation: pulse-mint 2.8s ease-out infinite;
}

.tool h3 {
  font-size: clamp(24px, 2.2vw, 2rem);
  font-weight: 600;
  letter-spacing: -0.03em;
  line-height: 1.05;
}

.tool--large h3,
.tool--watch h3 {
  font-size: clamp(30px, 3.2vw, 3rem);
  letter-spacing: -0.045em;
  line-height: 1;
  text-transform: uppercase;
}

.tool__text {
  max-width: var(--measure);
  color: var(--soft);
  font-size: var(--fs-body);
}

.tool__facts {
  display: grid;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.tool__facts li {
  position: relative;
  padding-left: 18px;
  color: #adc2ca;
  font-size: var(--fs-body-s);
  line-height: 1.5;
}

.tool__facts li::before {
  content: "";
  position: absolute;
  top: 0.75em;
  left: 0;
  width: 8px;
  height: 1px;
  background: var(--mint);
}

.tool__stack {
  margin-top: auto;
  padding-top: 6px;
  color: var(--muted);
  font-size: var(--fs-label);
  letter-spacing: 0.02em;
}

.tool__link {
  align-self: flex-start;
  color: var(--fg);
  font-weight: 500;
  text-decoration-color: var(--line-2);
  text-underline-offset: 4px;
  transition: text-decoration-color 200ms ease;
}

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

/* Surveillance : les quatre temps du script sur une ligne ; une impulsion corail la parcourt et finit en menthe.
   Le nom de chaque temps au-dessus du point, son détail en dessous. */
.watch {
  --wp: clamp(24px, 2.6vw, 2.5rem);
  position: relative;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
  min-height: 17rem;
  margin: 0;
  padding: var(--wp);
  border-right: 1px solid var(--line);
  background: radial-gradient(120% 120% at 0% 50%, rgb(47 211 191 / 10%), transparent 60%);
  list-style: none;
}

.watch::before {
  content: "";
  position: absolute;
  top: 50%;
  right: calc(var(--wp) + 12.5% - 6px);
  left: calc(var(--wp) + 12.5% - 6px);
  height: 1px;
  background: linear-gradient(90deg, var(--coral), var(--signal) 45%, var(--mint));
  opacity: 0.7;
}

.watch__step {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-rows: 1fr auto 1fr;
  grid-template-areas: "name" "point" "detail";
  justify-items: center;
  gap: 16px;
  text-align: center;
}

.watch__step::before {
  content: "";
  grid-area: point;
  width: 16px;
  height: 16px;
  border: 2px solid var(--mint);
  border-radius: 50%;
  background: var(--night);
}

.watch__step:first-child::before {
  border-color: var(--coral);
}

.watch__name {
  grid-area: name;
  align-self: end;
  color: var(--fg);
  font-size: var(--fs-body-s);
  font-weight: 600;
  line-height: 1.25;
}

.watch__detail {
  grid-area: detail;
  align-self: start;
  max-width: 11rem;
  color: var(--muted);
  font-family: var(--mono);
  font-size: var(--fs-label);
  line-height: 1.45;
}

.watch__pulse {
  position: absolute;
  top: calc(50% - 4px);
  left: calc(var(--wp) + 12.5% - 4px);
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--coral);
  box-shadow: 0 0 14px var(--coral);
  animation: watch-run 6s ease-in-out infinite;
}

@keyframes watch-run {
  0%,
  8% {
    left: calc(var(--wp) + 12.5% - 4px);
    background: var(--coral);
    box-shadow: 0 0 14px var(--coral);
  }

  60% {
    background: var(--signal);
    box-shadow: 0 0 14px var(--signal);
  }

  88%,
  100% {
    left: calc(100% - var(--wp) - 12.5% - 4px);
    background: var(--mint);
    box-shadow: 0 0 16px var(--mint);
  }
}

/* Et aussi : les autres projets, une ligne chacun. */
.atelier__also {
  margin: clamp(40px, 4vw, 3.5rem) var(--pad) 0;
}

.atelier__also h3 {
  color: var(--muted);
  font-size: var(--fs-label);
  font-weight: 500;
  letter-spacing: var(--ls-caps);
  text-transform: uppercase;
}

.atelier__also ul {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0 clamp(28px, 4vw, 4rem);
  margin: 16px 0 0;
  padding: 0;
  list-style: none;
}

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

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

@media (max-width: 900px) {
  .atelier__grid,
  .atelier__also ul,
  .tool--large,
  .tool--watch {
    grid-template-columns: minmax(0, 1fr);
  }

  .tool--large .tool__shot {
    min-height: 0;
    aspect-ratio: 1440 / 1000;
    border-right: 0;
    border-bottom: 1px solid var(--line);
  }

  .watch {
    border-right: 0;
    border-bottom: 1px solid var(--line);
  }
}

/* Téléphone : les quatre temps en deux rangées, sans ligne ni impulsion. */
@media (max-width: 560px) {
  .watch {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    row-gap: 22px;
    min-height: 0;
  }

  .watch::before,
  .watch__pulse {
    display: none;
  }

  .watch__step {
    grid-template-rows: auto auto auto;
    grid-template-areas: "point" "name" "detail";
    gap: 8px;
  }

  .watch__name {
    align-self: start;
  }
}

/* Mouvement réduit ou pause : l'impulsion se pose sur « Redémarrage », en menthe ; la pastille « En ligne » ne respire plus. */
@media (prefers-reduced-motion: reduce) {
  .watch__pulse {
    left: calc(100% - var(--wp) - 12.5% - 4px);
    background: var(--mint);
    box-shadow: 0 0 16px var(--mint);
    animation: none;
  }

  .tool__state--live .dot {
    animation: none;
  }
}

:root[data-motion="paused"] .watch__pulse {
  left: calc(100% - var(--wp) - 12.5% - 4px);
  background: var(--mint);
  box-shadow: 0 0 16px var(--mint);
  animation: none;
}

:root[data-motion="paused"] .tool__state--live .dot {
  animation: none;
}

/* Contact */
.contact {
  padding: clamp(72px, 7vw, 7rem) var(--pad) clamp(64px, 6vw, 6rem);
  border-top: 1px solid var(--line);
}

/* Trois lignes courtes : le signal revient à droite du titre sans le recouvrir. */
.contact h2 {
  max-width: 8.6em;
  font-size: clamp(44px, 6.6vw, 7.25rem);
  font-weight: 620;
  letter-spacing: -0.062em;
  line-height: 0.96;
  text-transform: uppercase;
}

.contact__grid {
  display: grid;
  grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr);
  gap: clamp(40px, 6vw, 6.875rem);
  margin-top: clamp(40px, 4.5vw, 4rem);
}

.contact__cta > p:first-child {
  max-width: 23.75rem;
  color: var(--soft);
  font-size: var(--fs-lead);
}

.cta {
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  gap: 40px;
  min-width: min(100%, 300px);
  min-height: 72px;
  margin-top: 30px;
  padding: 18px 28px;
  border-radius: 999px;
  background: var(--coral);
  color: var(--night);
  font-size: 1.25rem;
  font-weight: 600;
  text-decoration: none;
}

.cta span:last-child {
  font-size: 1.625rem;
  font-weight: 400;
}

/* L'adresse e-mail, LinkedIn et le PDF : en couleur pleine, à la taille du texte courant. */
.contact__links {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 28px;
  color: var(--fg);
  font-size: var(--fs-body);
}

.contact__links a {
  width: fit-content;
  overflow-wrap: anywhere;
  text-decoration: underline;
  text-decoration-color: var(--line-2);
  text-underline-offset: 5px;
  transition: text-decoration-color 200ms ease;
}

.contact__links a:hover {
  text-decoration-color: var(--mint);
}

.contact__offer h3 {
  margin-bottom: 18px;
  color: var(--muted);
  font-weight: 500;
  letter-spacing: var(--ls-caps);
  text-transform: uppercase;
}

.contact__offer ul {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 22px 36px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.contact__offer li {
  padding-top: 14px;
  border-top: 1px solid var(--line);
  color: var(--soft);
  font-size: var(--fs-body);
}

/* Intitulés sans point final : ils passent sur leur propre ligne. */
.contact__offer li strong {
  display: block;
  margin-bottom: 4px;
  color: var(--fg);
  font-size: var(--fs-role);
  font-weight: 600;
  line-height: 1.35;
}

.terms {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px 36px;
  margin: 34px 0 0;
}

.terms > div {
  padding-top: 12px;
  border-top: 1px solid var(--line);
}

.terms dt {
  color: var(--muted);
  font-family: var(--mono);
  font-size: var(--fs-label);
  font-weight: 500;
  letter-spacing: var(--ls-caps);
  text-transform: uppercase;
}

.terms dd {
  margin: 4px 0 0;
  font-size: var(--fs-body);
}

/* Pied : le nom en très grand */
.foot {
  position: relative;
  z-index: 1;
  overflow: hidden;
  padding: 0 var(--pad) 28px;
  border-top: 1px solid var(--line);
}

/* Le dégradé est découpé dans le texte : la marge haute laisse la place aux accents des capitales. */
.foot__mark {
  margin: 0 0 8px -0.04em;
  padding-top: 0.16em;
  font-size: 11.9vw;
  font-weight: 700;
  letter-spacing: -0.065em;
  line-height: 0.9;
  text-transform: uppercase;
  white-space: nowrap;
  background: linear-gradient(180deg, var(--fg) 35%, rgb(230 239 242 / 8%));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.foot__row {
  display: flex;
  flex-wrap: wrap;
  gap: 12px 30px;
  color: var(--muted);
  font-weight: 500;
}

.foot__row a {
  display: inline-flex;
  align-items: center;
  min-height: 32px;
}

.foot__row a:hover {
  color: var(--fg);
}

/* Tablette et mobile. Seuil en em (1 100 px = 68,75 em avec la police par défaut de 16 px) : quand le texte est
   agrandi dans le navigateur, EventFlow passe en une colonne plus tôt, au lieu de faire déborder les quatre chiffres
   (« Inscriptions AWCS 2026‑2027 » dépassait de la fenêtre à 200 %, 1 280 px de large). */
@media (max-width: 68.75em) {
  /* minmax(0, 1fr) : un titre plus large que l'écran n'élargit plus toute la colonne (débordement à 320 px). */
  .product {
    grid-template-columns: minmax(0, 1fr);
  }

  /* En une colonne, le titre et le texte d'EventFlow passent avant le globe. */
  .product__body {
    order: -1;
  }

  .product__body h2 {
    font-size: clamp(40px, 14vw, 7.5rem);
  }

  .globe {
    max-width: 35rem;
    margin: 0 auto;
  }
}

/* La navigation se masque sous 900 px (et non plus 820) : c'est aussi là qu'apparaît la pastille « Écrire ».
   Plus de colonne étirée : l'interrupteur garde sa largeur, calé à droite.
   Seuils d'en-tête en em (899,98 px = 56,2487 em avec la police par défaut de 16 px) : quand la personne grossit le
   texte dans son navigateur, la navigation et le nom se retirent plus tôt au lieu de déborder. */
@media (max-width: 56.2487em) {
  .bar {
    grid-template-columns: minmax(0, 1fr) auto auto;
    gap: 12px;
    padding: 0 20px;
  }

  /* La marque ne s'étire pas sur la colonne libre : seul le symbole et le nom sont cliquables. */
  .brand {
    justify-self: start;
  }

  .bar__nav {
    display: none;
  }
}

/* Sous 450 px (28,1237 em), le nom ne tient plus à côté du bouton et de l'interrupteur : le symbole JF reste, le nom
   reste lu. */
@media (max-width: 28.1237em) {
  .brand span {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }
}

@media (max-width: 820px) {
  /* Accueil : le signal a sa bande à lui, entre l'heure et le positionnement ; il ne passe jamais sous le texte. */
  .hero {
    --hero-top: calc(var(--bar) + 12px);
    --band-min: clamp(76px, 12svh, 9.375rem);
  }

  .hero__band {
    margin: 6px 0 10px;
  }

  .hero__cue {
    display: none;
  }

  .hero__bottom {
    gap: 24px;
  }

  .hero__actions .pill {
    flex: 1 1 auto;
    justify-content: center;
  }

  .status {
    flex: 1 1 100%;
    max-width: none;
  }

  .method__pin {
    grid-template-columns: minmax(0, 1fr);
    min-height: 0;
    padding-bottom: 20px;
  }

  .steps {
    align-self: start;
    min-height: 0;
  }

  .progress {
    display: none;
  }

  .result {
    grid-template-columns: minmax(0, 1fr);
    margin-top: 30px;
  }

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

  .log__entry {
    grid-template-columns: minmax(0, 1fr);
    gap: 6px;
  }

  .log__time {
    padding-top: 0;
  }

  .ai__grid,
  .contact__grid,
  .contact__offer ul,
  .terms {
    grid-template-columns: minmax(0, 1fr);
  }
}

@media (max-width: 480px) {
  .hero__top {
    flex-direction: column;
    gap: 6px;
  }

  /* À 320 px, le positionnement tient sur une ligne avec un interlettrage à peine plus serré. */
  .hero__role {
    letter-spacing: -0.018em;
  }

  /* Fiche compacte : le libellé au-dessus de la valeur ; « Statut » n'est plus écrit (la pastille et la phrase suffisent),
     il reste lu par les lecteurs d'écran. */
  .status {
    min-width: 0;
    width: 100%;
    padding: 10px 14px;
  }

  .status > div:not(.status__head) {
    grid-template-columns: minmax(0, 1fr);
    gap: 2px;
    padding: 8px 0;
  }

  .status > .status__head {
    grid-template-columns: auto minmax(0, 1fr);
    gap: 10px;
    padding: 6px 0 10px;
  }

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

  .status .status__head dd {
    text-align: left;
  }
}

/* Écrans peu hauts (portables 1366 × 768, 1440 × 900 avec barres, 1133 × 650) : l'accueil tient dans la fenêtre,
   boutons compris, sans rien rapetisser sous l'échelle commune. */
@media (min-width: 821px) and (max-height: 820px) {
  .hero {
    --hero-top: calc(var(--bar) + 14px);
    padding-bottom: 22px;
  }

  .hero__title {
    margin-bottom: clamp(16px, 2.6svh, 1.75rem);
    font-size: min(12.4vw, 21svh);
  }

  .hero__mode {
    margin-bottom: 10px;
  }

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

  .hero__lead strong {
    margin-bottom: 6px;
    font-size: clamp(1.25rem, 1.6vw, 1.5rem);
  }

  .hero__actions {
    margin-top: 16px;
  }

  .hero__pdf {
    min-height: 32px;
  }

  .status {
    padding-top: 10px;
    padding-bottom: 10px;
  }

  .status > div {
    padding: 5px 0;
  }
}

/* Fenêtre très basse (moins de 540 px, soit 33,75 em : téléphone en paysage, petite fenêtre) : la scène de la méthode
   n'est plus épinglée (PINNED_QUERY dans run.js) et le signal se loge dans sa bande, comme sur mobile (mêmes valeurs
   que le bloc « max-width: 51.25rem » ci-dessus). */
@media not all and (min-height: 33.75em) {
  .hero {
    --band-min: clamp(76px, 12svh, 9.375rem);
  }

  .hero__band {
    margin: 6px 0 10px;
  }
}

/* Composants partagés (composants.css) : réglages propres à RUN. */

/* Grille 100 → 10 : le compteur garde la même largeur à trois chiffres (« 100 », chiffres tabulaires pendant le
   décompte : 2,58 ch) et à deux (« 10 »). Sans cela, à 375, 390 et 393 px, « 10 » passait à côté de la grille et la
   phrase suivante remontait de 74 px au milieu du décompte. */
.proof-grid__count {
  min-width: 2.65ch;
}

/* Bouton pause, libellé en toutes lettres à partir de 1600 px : c'est une phrase, elle passe de 14 à 16 px comme les
   notes (composants.css la laisse à 14 px). */
@media (min-width: 1600px) {
  .bar .motion-toggle {
    font-size: var(--fs-note);
  }

  /* Survol et focus : composants.css veut que le libellé reste un simple texte, mais la règle de l'infobulle, plus
     spécifique, lui rendait sa puce claire, ses 14 px et 20 px de largeur en plus. On la neutralise ici. */
  .bar .motion-toggle:is(:hover, :focus-visible):not([data-hint="off"]) .motion-toggle__label {
    padding: 0;
    border-radius: 0;
    background: none;
    color: inherit;
    font-size: var(--fs-note);
    line-height: inherit;
  }
}

/* Pastille « Écrire » au même seuil que la navigation (56,2487 em) : composants.css la cache dès 900 px en pixels. Texte
   agrandi, la navigation se retire plus tôt et la pastille doit prendre le relais (run.js lui donne le même seuil).
   Sans effet avec la police par défaut : 900 px = 56,25 em, l'intervalle est vide. */
@media (min-width: 900px) and (max-width: 56.2487em) {
  .float-contact:not([hidden]) {
    display: inline-flex !important;
  }
}

/* Pastille « Écrire » : elle s'efface tant qu'elle recouvrirait un lien, un bouton ou le lecteur vidéo (garde de
   run.js, classe is-covering) et revient dès que la place est libre. Le toucher passe à travers dès la première image ;
   le fondu est court (0,12 s) et garde la visibilité jusqu'à sa fin. En mouvement réduit (composants.css) et en pause
   (règle suivante), pas de fondu : elle disparaît d'un coup. */
.float-contact.is-visible.is-covering {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.12s ease, transform 0.22s ease, visibility 0s linear 0.12s;
}

:root[data-motion="paused"] .float-contact.is-visible.is-covering {
  transition: none;
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  .status__head .dot,
  .dot--live,
  .grain,
  .hero__cue span {
    animation: none;
  }
}

/* Animations mises en pause (bouton de l'en-tête, ou vidéo en lecture) : les boucles décoratives s'arrêtent. */
:root[data-motion="paused"] .status__head .dot,
:root[data-motion="paused"] .dot--live,
:root[data-motion="paused"] .grain,
:root[data-motion="paused"] .hero__cue span {
  animation: none;
}

/* Sans animation : le signal figé reste dans l'accueil au lieu de couvrir toute la page. */
.is-still .signal {
  position: absolute;
  height: 100svh;
}

.is-still .hero__cue {
  display: none;
}