enskel-opening[data-astro-cid-lglfz45c] {
  display: block;
}
/* Le fil rouge, posé sur toute la page : une piste discrète, le tracé rouge qui avance au
   défilement, le signal en tête et les points où le fil rejoint un cadre. */
.page-flow-root {
  position: relative;
  isolation: isolate;
}
enskel-section-flow {
  position: absolute;
  inset: 0;
  z-index: 4;
  pointer-events: none;
  overflow: clip;
}
.section-flow {
  display: block;
  width: 100%;
  height: 100%;
  opacity: 0;
}
enskel-section-flow[data-ready] .section-flow {
  opacity: 1;
}
.section-flow path {
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
  vector-effect: non-scaling-stroke;
}
.section-flow-track {
  stroke: var(--color-fill);
  stroke-width: 1;
  opacity: 0.4;
}
.section-flow-trace {
  stroke: var(--color-accent);
  stroke-width: 1.2;
  opacity: 0.72;
}
.section-flow-origin,
.section-flow-signal,
.section-flow-port {
  fill: var(--color-accent);
}
.section-flow-signal {
  stroke: var(--color-canvas);
  stroke-width: 1.5;
}
.section-flow-port {
  opacity: 0;
  transition: opacity var(--motion-feedback) var(--motion-ease-out);
}
.section-flow-port[data-active] {
  opacity: 1;
}
@media (prefers-reduced-motion: reduce) {
  .section-flow-signal {
    display: none;
  }
}
/* La vidéo incrustée dans le hero : l'écran dans un cadre sombre, posé sur une trame de points
   qui s'efface vers les bords, la légende centrée dessous. */
.hero-video {
  position: relative;
  width: min(100%, 1040px);
  margin: clamp(52px, 6vw, 88px) auto 0;
}
.hero-video::before {
  content: '';
  position: absolute;
  z-index: -1;
  inset: -10% -7% 0;
  background: radial-gradient(
      circle at 1px 1px,
      rgb(0 0 0 / 0.16) 1px,
      transparent 1.5px
    )
    0 0 / 14px 14px;
  mask-image: radial-gradient(closest-side, #000 45%, transparent);
  pointer-events: none;
}
.video-screen {
  position: relative;
  overflow: hidden;
  aspect-ratio: 16 / 9;
  padding: clamp(6px, 0.8vw, 10px);
  border-radius: calc(var(--radius-panel) + 4px);
  background: var(--surface-dark-background);
  box-shadow: var(--surface-dark-shadow);
}
.video-media {
  display: block;
  width: 100%;
  height: 100%;
  border-radius: var(--radius-panel);
  background: #000;
  object-fit: cover;
}

/* Le bouton couvre tout l'écran ; au centre libre de la couverture
   (ops/generate-video-poster.mjs), une capsule claire et dépolie porte le disque rouge, le
   libellé et la durée. Au survol, elle se soulève et un anneau fin s'échappe du disque. */
.video-play {
  position: absolute;
  inset: clamp(6px, 0.8vw, 10px);
  display: grid;
  place-items: center;
  border: 0;
  border-radius: var(--radius-panel);
  background: transparent;
  cursor: pointer;
  transition: background-color var(--motion-hover) var(--motion-ease-transition);
}
.video-play[hidden] {
  display: none;
}
.video-play-capsule {
  --disc: clamp(40px, 3.6vw, 56px);
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: clamp(12px, 1.1vw, 16px);
  padding: clamp(5px, 0.5vw, 8px) clamp(18px, 1.7vw, 26px)
    clamp(5px, 0.5vw, 8px) clamp(5px, 0.5vw, 8px);
  border: 1px solid rgb(9 11 14 / 0.08);
  border-radius: 999px;
  background: rgb(255 255 255 / 0.74);
  -webkit-backdrop-filter: blur(16px) saturate(170%);
  backdrop-filter: blur(16px) saturate(170%);
  box-shadow:
    inset 0 1px 0 rgb(255 255 255 / 0.9),
    0 1px 2px rgb(9 11 14 / 0.06),
    0 10px 24px -6px rgb(9 11 14 / 0.14),
    0 28px 56px -20px rgb(9 11 14 / 0.22);
  color: var(--color-graphite);
  transition:
    transform var(--motion-hover) var(--motion-ease-out),
    box-shadow var(--motion-hover) var(--motion-ease-out),
    background-color var(--motion-hover) var(--motion-ease-transition);
}
.video-play-disc {
  position: relative;
  display: grid;
  place-items: center;
  width: var(--disc);
  aspect-ratio: 1;
  border-radius: 50%;
  background:
    radial-gradient(
      120% 90% at 50% 0%,
      rgb(255 255 255 / 0.28),
      transparent 55%
    ),
    var(--color-accent);
  box-shadow:
    inset 0 1px 0 rgb(255 255 255 / 0.32),
    inset 0 -1px 0 rgb(0 0 0 / 0.12),
    0 6px 16px -6px var(--color-accent-shadow);
  color: #fff;
  transition: transform var(--motion-hover) var(--motion-ease-out);
}
/* L'anneau : il s'échappe trois fois à l'arrivée, puis seulement au survol. */
.video-play-disc::after {
  content: '';
  position: absolute;
  inset: -1px;
  border: 1.5px solid var(--color-accent);
  border-radius: inherit;
  opacity: 0;
  animation: video-play-ring 2.4s ease-out 1.4s 3;
}
.video-play-disc svg {
  width: 42%;
  height: auto;
  /* Le centre optique d'un triangle est à droite de son centre géométrique. */
  margin-left: 6%;
  fill: currentColor;
}
.video-play-text {
  font-size: clamp(15px, 1.1vw, 17px);
  font-weight: 560;
  letter-spacing: -0.3px;
  white-space: nowrap;
}
.video-play-duration {
  padding-left: clamp(12px, 1.1vw, 16px);
  border-left: 1px solid rgb(9 11 14 / 0.12);
  color: var(--color-muted);
  font: 400 12px/1 var(--font-mono);
  letter-spacing: 0.08em;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
/* L'anneau tient pendant la moitié de sa course, puis s'efface, sans quitter l'écart entre
   le disque et le libellé. */
@keyframes video-play-ring {
  0% {
    opacity: 0.7;
    transform: scale(1);
  }
  50% {
    opacity: 0.35;
  }
  100% {
    opacity: 0;
    transform: scale(1.3);
  }
}
@media (hover: hover) {
  .video-play:hover {
    background-color: rgb(9 11 14 / 0.025);
  }
  .video-play:hover .video-play-capsule {
    transform: translateY(-2px);
    background-color: rgb(255 255 255 / 0.88);
    box-shadow:
      inset 0 1px 0 rgb(255 255 255 / 0.95),
      0 1px 2px rgb(9 11 14 / 0.06),
      0 14px 30px -6px rgb(9 11 14 / 0.18),
      0 36px 70px -22px rgb(9 11 14 / 0.28);
  }
  .video-play:hover .video-play-disc {
    transform: scale(1.06);
  }
  .video-play:hover .video-play-disc::after {
    animation: video-play-ring 1.6s ease-out infinite;
  }
}
.video-play:active .video-play-capsule {
  transform: scale(var(--motion-press-scale));
}
.video-play:focus-visible {
  outline: none;
}
.video-play:focus-visible .video-play-capsule {
  outline: 2px solid var(--color-accent);
  outline-offset: 4px;
}
.video-media:focus-visible {
  outline: 3px solid var(--color-accent);
  outline-offset: 3px;
}

.video-caption {
  display: grid;
  justify-items: center;
  gap: 8px;
  max-width: 62ch;
  margin: 22px auto 0;
  text-align: center;
}
.video-caption-lead {
  color: var(--color-muted);
  font-size: 15px;
  line-height: 1.45;
  letter-spacing: -0.15px;
  text-wrap: balance;
}
.video-caption-note {
  color: var(--color-muted);
  font: 400 11px/1.5 var(--font-mono);
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

@media (width < 640px) {
  /* Sur un petit écran, une capsule resserrée entre le titre et le sommaire de la
     couverture : le disque et la durée ; le libellé reste dans le nom du bouton. */
  .video-play-capsule {
    --disc: 32px;
    gap: 10px;
    padding: 4px 14px 4px 4px;
  }
  .video-play-text {
    display: none;
  }
  .video-play-duration {
    padding-left: 0;
    border-left: 0;
    font-size: 11px;
  }
}
@media (prefers-reduced-motion: reduce) {
  .video-play-capsule,
  .video-play-disc {
    transition: none;
  }
  .video-play-disc::after,
  .video-play:hover .video-play-disc::after {
    animation: none;
  }
}
/* La transcription de la démo, repliée sous la légende : un sommaire discret dans la voix
   des notes mono, puis, dépliée, une colonne de lecture alignée à gauche, l'horodatage en
   marge. Le contenu se révèle en fondu ; la hauteur, elle, n'est jamais animée. */
.video-transcript {
  justify-self: stretch;
  margin-top: 6px;
  text-align: left;
}
.video-transcript-summary {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  color: var(--color-graphite);
  font: 500 11px/1.4 var(--font-mono);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  cursor: pointer;
  list-style: none;
}
.video-transcript-summary::-webkit-details-marker {
  display: none;
}
/* Le repère qui pivote : un chevron dessiné au trait, rouge comme le fil. */
.video-transcript-summary::after {
  content: '';
  width: 6px;
  height: 6px;
  border-right: 1.5px solid var(--color-accent);
  border-bottom: 1.5px solid var(--color-accent);
  translate: 0 -2px;
  rotate: 45deg;
  transition: rotate var(--motion-hover, 240ms) ease;
}
.video-transcript[open] > .video-transcript-summary::after {
  translate: 0 2px;
  rotate: 225deg;
}
.video-transcript-summary:focus-visible {
  outline: 3px solid var(--color-accent);
  outline-offset: 4px;
  border-radius: 4px;
}
@media (hover: hover) {
  .video-transcript-summary:hover {
    color: var(--color-accent);
  }
}

.video-transcript-list {
  display: grid;
  gap: 18px;
  margin: 10px 0 0;
  padding: 22px 0 0;
  border-top: 1px solid var(--color-line);
  list-style: none;
}
.video-transcript[open] .video-transcript-list {
  animation: video-transcript-in var(--motion-feedback, 400ms) ease both;
}
.video-transcript-entry {
  display: grid;
  grid-template-columns: 3.5em minmax(0, 1fr);
  column-gap: 14px;
  row-gap: 6px;
}
.video-transcript-time {
  grid-row: span 2;
  padding-top: 2px;
  color: var(--color-accent);
  font: 500 12px/1.5 var(--font-mono);
  font-variant-numeric: tabular-nums;
}
.video-transcript-screen,
.video-transcript-speech {
  grid-column: 2;
  margin: 0;
  font-size: 14px;
  line-height: 1.55;
  text-wrap: pretty;
}
.video-transcript-screen {
  color: var(--color-muted);
}
.video-transcript-speech {
  color: var(--color-graphite);
}
.video-transcript-kind {
  display: block;
  margin-bottom: 2px;
  color: var(--color-muted);
  font: 400 11px/1.5 var(--font-mono);
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

@keyframes video-transcript-in {
  from {
    opacity: 0;
    translate: 0 -6px;
  }
}
@media (prefers-reduced-motion: reduce) {
  .video-transcript-summary::after {
    transition: none;
  }
  .video-transcript[open] .video-transcript-list {
    animation: none;
  }
}
/* Le hero de l'accueil : une scène centrée. Le titre en deux temps dans un viseur, l'étiquette
   d'un pic de prévision posée en biais, l'invitation, puis la vidéo incrustée (video.css).
   Décor : la carte d'Europe en trame de points, la grille, deux règles aux heures du service. */
.hero {
  /* Palette neutre limitée au hero ; les autres sections gardent leurs tokens. */
  --color-ink: var(--color-graphite);
  --color-muted: #616161;
  --hero-frame: color-mix(in srgb, var(--color-graphite) 62%, transparent);
  --hero-tick: color-mix(in srgb, var(--color-graphite) 26%, transparent);
  --hero-title-size: clamp(40px, 0.75rem + 5.6vw, 96px);
  --hero-ruler-inset: max(var(--page-gutter), calc(50% - 700px));
  position: relative;
  isolation: isolate;
  padding: clamp(36px, 4.6vw, 68px) var(--page-gutter) clamp(56px, 6.5vw, 104px);
  overflow: clip;
}

/* Décor */
.hero-backdrop {
  position: absolute;
  z-index: -1;
  inset: 0;
  pointer-events: none;
}
/* La carte devient une trame de points : dense derrière le titre, effacée vers les bords. */
.hero-map {
  position: absolute;
  top: -6%;
  left: 50%;
  width: min(1560px, 150%);
  aspect-ratio: 2200 / 1600;
  translate: -50% 0;
  color: var(--color-graphite);
  opacity: 0.2;
  mask-image:
    radial-gradient(circle, #000 0.9px, transparent 1.3px),
    radial-gradient(ellipse 46% 40% at 50% 34%, #000 30%, transparent 100%);
  mask-size:
    6px 6px,
    100% 100%;
  mask-repeat: repeat, no-repeat;
  mask-composite: intersect;
}
.hero-map svg {
  display: block;
  width: 100%;
  height: 100%;
}
.hero-grid {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  color: var(--color-muted);
  opacity: 0.16;
  mask-image:
    linear-gradient(to right, #000, transparent 30%, transparent 70%, #000),
    linear-gradient(#000 60%, transparent);
  mask-composite: intersect;
}

/* Les règles : une graduation par demi-heure, une étiquette toutes les trois heures. */
.hero-ruler {
  position: absolute;
  top: clamp(36px, 4.6vw, 68px);
  height: min(880px, 74%);
  display: none;
  flex-direction: column;
  justify-content: space-between;
  pointer-events: none;
}
.hero-ruler::before {
  content: '';
  position: absolute;
  inset-block: 0;
  width: 7px;
  background: linear-gradient(var(--hero-tick) 1px, transparent 1px) 0 0 / 100%
    calc(100% / 30);
}
.hero-ruler--start {
  left: var(--hero-ruler-inset);
  align-items: flex-end;
}
.hero-ruler--start::before {
  right: 0;
}
.hero-ruler--end {
  right: var(--hero-ruler-inset);
  align-items: flex-start;
}
.hero-ruler--end::before {
  left: 0;
}
.hero-ruler-mark {
  display: flex;
  align-items: center;
  gap: 10px;
  height: 0;
  color: var(--color-muted);
  font: 400 11px/1 var(--font-mono);
  letter-spacing: 0.08em;
}
.hero-ruler--start .hero-ruler-mark::after,
.hero-ruler--end .hero-ruler-mark::before {
  content: '';
  width: 16px;
  height: 1.5px;
  background: var(--color-graphite);
}
.hero-ruler-peak {
  position: absolute;
  top: var(--peak);
  width: 26px;
  height: 2px;
  translate: 0 -50%;
  background: var(--color-accent);
}
.hero-ruler-peak::after {
  content: '';
  position: absolute;
  top: 50%;
  width: 6px;
  height: 6px;
  translate: 0 -50%;
  background: var(--color-accent);
}
.hero-ruler--start .hero-ruler-peak {
  right: 0;
}
.hero-ruler--start .hero-ruler-peak::after {
  right: calc(100% + 6px);
}
.hero-ruler--end .hero-ruler-peak {
  left: 0;
}
.hero-ruler--end .hero-ruler-peak::after {
  left: calc(100% + 6px);
}

/* Le texte */
.hero-copy {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  max-width: 1180px;
  margin-inline: auto;
  text-align: center;
}
.hero-eyebrow {
  color: var(--color-muted);
  font: 400 13px/20px var(--font-mono);
  letter-spacing: 1.6px;
  text-transform: uppercase;
}
/* Le viseur : quatre coins autour du titre, l'étiquette posée sur son bord haut. En Archivo
   Expanded, les deux lignes du titre se touchent presque : entre elles, l'étiquette masquerait
   « seul système ». */
.hero-title {
  position: relative;
  min-width: 0;
  max-width: 100%;
  /* Assez d'air de part et d'autre du bord haut pour l'étiquette qui s'y pose. */
  margin-top: clamp(34px, 3.2vw, 46px);
  padding: clamp(28px, 2.6vw, 38px) clamp(20px, 3vw, 52px) clamp(14px, 1.5vw, 22px);
}
.hero h1 {
  font-size: var(--hero-title-size);
  font-weight: 740;
  line-height: 1.02;
  letter-spacing: -0.05em;
  text-wrap: balance;
}
.hero h1 > span {
  display: block;
}
.hero-title-period {
  color: var(--color-accent);
}
.hero-corner {
  position: absolute;
  width: clamp(12px, 1.2vw, 18px);
  aspect-ratio: 1;
  border: 0 solid var(--hero-frame);
}
.hero-corner--top-start {
  top: 0;
  left: 0;
  border-width: 1.5px 0 0 1.5px;
}
.hero-corner--top-end {
  top: 0;
  right: 0;
  border-width: 1.5px 1.5px 0 0;
}
.hero-corner--bottom-start {
  bottom: 0;
  left: 0;
  border-width: 0 0 1.5px 1.5px;
}
.hero-corner--bottom-end {
  right: 0;
  bottom: 0;
  border-width: 0 1.5px 1.5px 0;
}
.hero-ticket {
  position: absolute;
  top: 0;
  left: 50%;
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 7px 12px 7px 10px;
  border-radius: 6px;
  background: var(--color-accent);
  color: #fff;
  box-shadow:
    0 12px 26px var(--color-accent-shadow),
    inset 0 1px 0 rgb(255 255 255 / 0.24);
  font: 500 clamp(10px, 0.85vw, 13px) / 1.2 var(--font-mono);
  letter-spacing: 0.07em;
  text-transform: uppercase;
  white-space: nowrap;
  translate: -50% -50%;
  rotate: -4deg;
  transition: rotate var(--motion-hover) var(--motion-ease-out);
}
.hero-ticket-time {
  padding-right: 9px;
  border-right: 1px dashed rgb(255 255 255 / 0.55);
}
@media (hover: hover) {
  .hero-title:hover .hero-ticket {
    rotate: -1.5deg;
  }
}
.hero-description {
  max-width: 34em;
  margin-top: clamp(16px, 1.8vw, 24px);
  color: color-mix(in srgb, var(--color-ink) 78%, transparent);
  font-size: clamp(17px, 0.85rem + 0.45vw, 21px);
  line-height: 1.42;
  letter-spacing: -0.3px;
  text-wrap: balance;
}

/* Les deux invitations : la démo en rouge, la prévision en clair, de même hauteur. */
.hero-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px;
  margin-top: clamp(24px, 2.6vw, 34px);
}
.hero-demo,
.hero-secondary {
  min-height: 56px;
  padding: 13px 26px;
  font-size: 17px;
}
.hero-demo {
  box-shadow:
    0 12px 28px var(--color-accent-shadow),
    inset 0 1px 3px rgb(100% 100% 100% / 18%);
}
.hero-secondary {
  display: inline-flex;
  align-items: center;
  gap: 11px;
  border: 1px solid var(--color-line);
  border-radius: 10px;
  background: var(--color-surface);
  color: var(--color-ink);
  box-shadow:
    0 1px 2px rgb(0 0 0 / 0.04),
    0 10px 26px rgb(0 0 0 / 0.06);
  font-weight: 500;
  line-height: 1.4;
  letter-spacing: -0.55px;
  text-decoration: none;
  transition:
    border-color var(--motion-hover) var(--motion-ease-transition),
    box-shadow var(--motion-hover) var(--motion-ease-transition),
    transform var(--motion-press) var(--motion-ease-out);
}
.hero-secondary svg {
  flex: none;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
}
.hero-secondary .hero-secondary-peak {
  stroke: var(--color-accent);
}
@media (hover: hover) {
  .hero-secondary:hover {
    border-color: color-mix(in srgb, var(--color-graphite) 34%, transparent);
    box-shadow:
      0 1px 2px rgb(0 0 0 / 0.05),
      0 14px 32px rgb(0 0 0 / 0.09);
  }
}
.hero-secondary:active {
  transform: scale(var(--motion-press-scale));
}
.hero-secondary:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 3px;
}

/* Ceux qui animent la démo : deux pastilles qui se chevauchent, puis la promesse. */
.hero-proof {
  display: flex;
  align-items: center;
  gap: 12px;
  max-width: 30em;
  margin-top: 24px;
  color: var(--color-muted);
  font-size: 15px;
  line-height: 1.35;
  letter-spacing: -0.2px;
  text-align: left;
}
.hero-proof-faces {
  display: flex;
  flex: none;
}
.hero-proof-faces img {
  width: 38px;
  height: 38px;
  border: 2px solid var(--color-surface);
  border-radius: 50%;
  object-fit: cover;
  object-position: 50% 24%;
  box-shadow: 0 1px 4px rgb(0 0 0 / 0.14);
}
.hero-proof-faces picture + picture img {
  margin-left: -11px;
}

/* Les règles ne prennent place qu'à côté de la vidéo, sur un écran large. */
@media (width >= 1200px) {
  .hero-ruler {
    display: flex;
  }
}
@media (width < 640px) {
  .hero-title {
    margin-top: 30px;
    padding: 26px 14px 14px;
  }
  .hero-ticket {
    gap: 7px;
    padding: 5px 9px 5px 8px;
  }
  .hero-ticket-time {
    padding-right: 7px;
  }
  .hero-actions {
    flex-direction: column;
    align-self: stretch;
  }
  .hero-demo,
  .hero-secondary {
    justify-content: center;
    min-height: 52px;
  }
  .hero-proof {
    font-size: 14px;
  }
  .hero-map {
    top: 0;
    width: 260%;
  }
}

/* Le script synchrone prépare texte et décor avant leur entrée commune.
   Sans JavaScript ou en mouvement réduit, le HTML reste immédiatement lisible. */
@media (prefers-reduced-motion: no-preference) {
  :root[data-intro-pending]
    [data-hero]
    :is(
      .hero-backdrop,
      [data-opening-ruler],
      [data-opening-corner],
      [data-opening-eyebrow],
      [data-opening-title],
      [data-opening-ticket],
      [data-opening-description],
      [data-opening-actions],
      [data-opening-proof],
      [data-opening-video]
    ) {
    opacity: 0;
  }
}
@media (prefers-reduced-motion: reduce) {
  .hero-ticket {
    transition: none;
  }
}
/* Grammaire commune des sept temps de l’accueil (src/components/home/). Chaque section
   garde sa feuille ; ici, seulement ce qu'elles partagent : rythme, surfaces, tickets
   d'exemple et légendes. */
.home-section {
  padding-top: clamp(96px, 10vw, 160px);
}
.home-section--last {
  padding-bottom: clamp(96px, 10vw, 160px);
}
.home-head-row {
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr);
  align-items: end;
  gap: 32px clamp(32px, 6vw, 96px);
}
.home-head-row .page-section-lead {
  max-width: 34ch;
  margin-top: 0;
}
@media (width < 1024px) {
  .home-head-row {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* Surfaces : carte blanche posée, panneau sombre en relief. */
.home-card {
  background: var(--color-surface);
  border: 1px solid var(--color-line);
  border-radius: var(--radius-panel);
  box-shadow: var(--shadow-panel);
}
.home-dark {
  --home-dark-text: rgb(255 255 255 / 0.92);
  --home-dark-muted: rgb(255 255 255 / 0.62);
  --home-dark-line: rgb(255 255 255 / 0.14);
  /* Seule exception à la palette : le rouge éclairci des courbes sur fond noir. */
  --home-dark-accent: color-mix(in oklab, var(--color-accent), white 32%);
  background: var(--surface-dark-background);
  box-shadow: var(--surface-dark-shadow);
  border-radius: var(--radius-panel);
  color: var(--home-dark-text);
}

/* Repère mono des maquettes (« PRÉVISION · BASTILLE »). */
.home-eyebrow {
  font: 400 12px/1.5 var(--font-mono);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-muted);
}
.home-dark .home-eyebrow {
  color: var(--home-dark-muted);
}

/* Ligne d'exemple, telle qu'un écran Enskel l'afficherait. */
.home-ticket {
  display: flex;
  align-items: baseline;
  gap: 10px;
  font-size: 14px;
  line-height: 1.4;
  letter-spacing: -0.2px;
  color: var(--color-graphite);
}
.home-ticket::before {
  content: '';
  width: 7px;
  height: 7px;
  flex: 0 0 auto;
  border-radius: 1.5px;
  background: var(--color-accent);
  translate: 0 -1px;
}
.home-dark .home-ticket {
  color: var(--home-dark-text);
}

/* Toute vue du produit porte sa mention « données d'exemple ». */
.home-sample {
  font: 400 11px/1.5 var(--font-mono);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-muted);
}
.home-dark .home-sample {
  color: var(--home-dark-muted);
}
.home-caption {
  display: grid;
  gap: 2px;
  margin-top: 18px;
  font: 400 11px/1.5 var(--font-mono);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-muted);
}

/* Lien de fin de section, aligné sur la composition. */
.home-more {
  margin-top: clamp(28px, 3vw, 44px);
  font-size: clamp(17px, 1.3vw, 19px);
  letter-spacing: -0.3px;
}
.home-more .text-link {
  gap: 12px;
  text-decoration-color: color-mix(
    in srgb,
    var(--color-graphite) 30%,
    transparent
  );
}

/* Lien d'une carte entière : le titre porte le lien, la carte s'étend dessous. */
.home-stretch {
  position: relative;
}
.home-stretch a::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
}
.home-stretch a:focus-visible {
  outline: none;
}
.home-stretch:has(a:focus-visible) {
  outline: 3px solid var(--color-accent);
  outline-offset: 4px;
}
/* 01 · La journée. Sur grand écran, la règle des heures est proportionnelle : chaque carte
   reçoit son repère à l'abscisse exacte de son heure (unités de conteneur), et les cartes
   descendent vers le rush. En dessous de 1024 px, la frise devient verticale. */
.day-frise {
  --gap: 20px;
  --ruler: 40px;
  --hang: 36px;
  position: relative;
  container-type: inline-size;
  margin-top: clamp(56px, 6vw, 88px);
}
.day-ruler {
  position: relative;
  height: var(--ruler);
}
.day-hour {
  position: absolute;
  left: calc(var(--at) * 100%);
  bottom: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 7px;
  translate: -50% 0;
  font: 400 11px/1 var(--font-mono);
  letter-spacing: 0.04em;
  color: var(--color-muted);
}
.day-hour::after {
  content: '';
  width: 1px;
  height: 5px;
  background: var(--color-connection);
}
.day-hour--label::after {
  height: 9px;
  background: color-mix(in srgb, var(--color-graphite) 45%, transparent);
}
.day-axis {
  position: absolute;
  left: 0;
  right: 0;
  top: calc(var(--ruler) - 1px);
  height: 1px;
  background: var(--color-connection);
}
.day-moments {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  align-items: start;
  gap: var(--gap);
  margin-top: var(--hang);
}
.day-moment {
  --drop: 0px;
  /* Abscisse de l'heure, rapportée au bord gauche de la carte. */
  --x: calc(var(--at) * 100cqw - var(--index) * ((100cqw + var(--gap)) / 5));
  position: relative;
  margin-top: var(--drop);
  padding: 22px 22px 20px;
  background: var(--color-surface);
  border: 1px solid var(--color-line);
  border-radius: var(--radius-panel);
  box-shadow: var(--shadow-panel);
}
.day-moment:nth-child(2),
.day-moment:nth-child(4) {
  --drop: 44px;
}
.day-moment:nth-child(3) {
  --drop: 88px;
}
.day-node {
  position: absolute;
  left: var(--x);
  bottom: 100%;
  width: 1px;
  height: calc(var(--hang) + var(--drop) + 1px);
  background: var(--color-accent);
}
.day-node::before {
  content: '';
  position: absolute;
  top: -4px;
  left: -4px;
  width: 9px;
  height: 9px;
  border-radius: 2px;
  background: var(--color-accent);
  box-shadow: 0 0 0 3px var(--color-canvas);
}
.day-time {
  font-size: clamp(26px, 2.3vw, 32px);
  line-height: 1;
  font-weight: 760;
  letter-spacing: -0.055em;
  font-variant-numeric: tabular-nums;
}
.day-moment h3 {
  margin-top: 14px;
  font-size: clamp(17px, 1.35vw, 20px);
  line-height: 1.25;
  font-weight: 650;
  letter-spacing: -0.035em;
}
.day-text {
  margin-top: 8px;
  font-size: 15px;
  line-height: 1.45;
  letter-spacing: -0.2px;
  color: var(--color-muted);
}
.day-ticket {
  margin-top: 18px;
  padding-top: 14px;
  border-top: 1px solid var(--color-line);
}
.day-moment--peak {
  border-color: transparent;
  background: var(--surface-dark-background);
  box-shadow: var(--surface-dark-shadow);
}
.day-moment--peak .day-time {
  color: var(--home-dark-accent);
}
.day-moment--peak .day-text {
  color: var(--home-dark-muted);
}
.day-moment--peak .day-ticket {
  border-top-color: var(--home-dark-line);
}
.day-sample {
  margin-top: 20px;
  line-height: 16px;
}

@media (1024px <= width < 1280px) {
  .day-moment {
    padding: 18px 16px 16px;
  }
  .day-text,
  .home-ticket.day-ticket {
    font-size: 14px;
  }
}

/* Frise verticale : un repère par carte, la ligne court jusqu'à la dernière. */
@media (width < 1024px) {
  .day-frise {
    --rail: 11px;
    --indent: 40px;
  }
  .day-ruler {
    display: none;
  }
  .day-axis {
    left: var(--rail);
    right: auto;
    top: 32px;
    bottom: 36px;
    width: 1px;
    height: auto;
  }
  .day-moments {
    grid-template-columns: minmax(0, 1fr);
    gap: 16px;
    margin-top: 0;
    padding-left: var(--indent);
  }
  .day-moment,
  .day-moment:nth-child(n) {
    --drop: 0px;
  }
  .day-node {
    left: calc(var(--rail) - var(--indent) - 1px);
    top: 32px;
    bottom: auto;
    width: calc(var(--indent) - var(--rail));
    height: 1px;
  }
  .day-node::before {
    top: -4px;
    left: -4px;
  }
  .day-moment h3 {
    margin-top: 10px;
  }
}
@media (640px <= width < 1024px) {
  .day-moment {
    display: grid;
    grid-template-columns: 112px minmax(0, 1fr);
    column-gap: 24px;
    padding: 24px 26px;
  }
  .day-time {
    grid-row: span 3;
  }
  .day-moment h3 {
    margin-top: 0;
  }
}
/* 02 · Voir venir. À gauche, la carte du signal ; à droite, l'écran de la prévision. Un raccord
   rouge les relie. La bascule change l'écran sans script (:has) : avec la pluie, la zone météo
   et la nouvelle courbe se dévoilent de gauche à droite, l'ancienne reste en pointillé, le
   total glisse de 190 à 178 et un signal parcourt le raccord. Seuls transform, opacity et
   clip-path sont animés. */
enskel-rain {
  display: block;
}
.rain-composition {
  --rain-gap: clamp(32px, 4.4vw, 80px);
  --rain-pad: clamp(18px, 1.9vw, 26px);
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  grid-template-rows: auto auto 1fr;
  grid-template-areas:
    'head board'
    'card board'
    'link board';
  column-gap: var(--rain-gap);
  align-items: start;
}
.rain-head {
  grid-area: head;
}
.rain-head .page-section-lead {
  max-width: 30ch;
}
.rain-stage {
  grid-area: board;
  min-width: 0;
}
.rain-more {
  grid-area: link;
  align-self: end;
  margin-top: 40px;
}

/* La carte du signal, posée au-dessus de l'écran pour que son raccord le rejoigne. */
.rain-signal-card {
  grid-area: card;
  position: relative;
  z-index: 1;
  margin-top: clamp(36px, 3.4vw, 52px);
  padding: 22px 24px 24px;
}
.rain-signal-card h3 {
  margin-top: 10px;
  font-size: clamp(20px, 1.6vw, 24px);
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -0.045em;
}
.rain-store {
  margin-top: 4px;
  font-size: 16px;
  line-height: 1.5;
  letter-spacing: -0.03em;
  color: var(--color-muted);
}
.rain-signal {
  position: relative;
  display: grid;
  gap: 6px;
  margin-top: 18px;
  padding: 14px 16px 15px 18px;
  overflow: hidden;
  border: 1px solid var(--color-line);
  border-radius: var(--radius-control);
  background: var(--color-canvas);
}
/* Sa marque rouge s'allume quand la pluie est prise en compte. */
.rain-signal::before {
  content: '';
  position: absolute;
  inset: 0 auto 0 0;
  width: 3px;
  background: var(--color-accent);
  transform: scaleY(0);
  transform-origin: 50% 0;
  transition: transform var(--motion-group) var(--motion-ease-out);
}
.rain-signal-label {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font: 400 11px/1.5 var(--font-mono);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-graphite);
}
.rain-signal-label::before {
  content: '';
  width: 7px;
  height: 7px;
  border-radius: 1.5px;
  background: var(--color-accent);
}
.rain-signal-text {
  font-size: 15px;
  line-height: 1.45;
  letter-spacing: -0.02em;
  color: var(--color-graphite);
}

/* Le raccord : de la carte jusqu'au bord de la courbe, à travers la gouttière. */
.rain-connector {
  position: absolute;
  top: 50%;
  left: 100%;
  width: calc(var(--rain-gap) + var(--rain-pad) + 1px);
  height: 1px;
  background: var(--color-accent);
}
.rain-connector::before,
.rain-connector::after {
  content: '';
  position: absolute;
  top: -4px;
  width: 9px;
  height: 9px;
  border-radius: 2px;
  background: var(--color-accent);
}
.rain-connector::before {
  left: -5px;
}
.rain-connector::after {
  right: -5px;
}
.rain-connector-pulse {
  position: absolute;
  inset: 0;
  opacity: 0;
}
.rain-connector-pulse::before {
  content: '';
  position: absolute;
  top: -3px;
  left: 0;
  width: 7px;
  height: 7px;
  border-radius: 1.5px;
  background: var(--color-accent);
  box-shadow: 0 0 0 4px var(--color-accent-soft);
}
@keyframes rain-pulse {
  0% {
    opacity: 0;
    transform: translateX(0);
  }
  12%,
  82% {
    opacity: 1;
  }
  100% {
    opacity: 0;
    transform: translateX(100%);
  }
}

/* L'écran : bascule, courbe, total. */
.rain-board {
  padding: var(--rain-pad);
}
.rain-toggle {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px 24px;
  min-width: 0;
  margin: 0;
  padding: 0 0 18px 4px;
  border: 0;
}
/* Flottante, la légende devient un élément de la rangée, à gauche de la bascule. */
.rain-toggle legend {
  float: left;
  padding: 0;
}
.rain-switch {
  position: relative;
  display: inline-grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  padding: 3px;
  border: 1px solid var(--color-line);
  border-radius: var(--radius-control);
  background: var(--color-canvas);
}
/* Le curseur sombre glisse sous le choix ; le texte change de couleur sans transition. */
.rain-switch-thumb {
  position: absolute;
  inset: 3px auto 3px 3px;
  width: calc(50% - 3px);
  border-radius: calc(var(--radius-control) - 2px);
  background: var(--color-graphite);
  transition: transform var(--motion-feedback) var(--motion-ease-transition);
}
.rain-switch label {
  position: relative;
  display: flex;
}
.rain-switch input {
  position: absolute;
  inset: 0;
  margin: 0;
  opacity: 0;
  cursor: pointer;
}
.rain-switch label span {
  position: relative;
  display: flex;
  flex: 1;
  align-items: center;
  justify-content: center;
  min-height: 42px;
  padding: 8px 18px;
  border-radius: calc(var(--radius-control) - 2px);
  font-size: 14px;
  font-weight: 550;
  line-height: 1.3;
  letter-spacing: -0.02em;
  white-space: nowrap;
  pointer-events: none;
}
.rain-switch input:checked + span {
  color: var(--color-surface);
}
.rain-switch label:hover input:not(:checked) + span {
  text-decoration: underline;
  text-decoration-color: var(--color-connection);
  text-underline-offset: 4px;
}
.rain-switch input:focus-visible + span {
  outline: 3px solid var(--color-accent);
  outline-offset: 3px;
}
@media (forced-colors: active) {
  .rain-switch-thumb {
    display: none;
  }
  .rain-switch input:checked + span {
    background: Highlight;
    color: HighlightText;
  }
}

/* La courbe sombre. Le tracé SVG s'étire ; les repères restent en HTML. */
.rain-chart {
  --plot: clamp(210px, 20vw, 290px);
  padding: 22px 26px 50px 58px;
  border-radius: var(--radius-control);
}
.rain-chart-label {
  margin: 0 0 36px -32px;
}
.rain-plot {
  position: relative;
  height: var(--plot);
}
.rain-layer {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
}
.rain-layer path {
  fill: none;
  vector-effect: non-scaling-stroke;
}
.rain-grid path {
  stroke: var(--home-dark-line);
  stroke-width: 1;
}
.rain-y span {
  position: absolute;
  top: var(--level);
  right: calc(100% + 14px);
  translate: 0 -50%;
  font: 400 11px/1 var(--font-mono);
  color: var(--home-dark-muted);
  font-variant-numeric: tabular-nums;
}
.rain-layer .rain-band {
  fill: var(--home-dark-accent);
  opacity: 0.2;
}
.rain-layer .rain-line {
  stroke: var(--home-dark-accent);
  stroke-width: 2.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.rain-layer .rain-ghost {
  stroke: var(--home-dark-muted);
  stroke-width: 1.5;
  stroke-dasharray: 4 5;
  opacity: 0;
}
.rain-layer .rain-lost {
  fill: var(--home-dark-text);
  opacity: 0.16;
}
.rain-layer--dry path {
  transition: opacity var(--motion-feedback) var(--motion-ease-out);
}
.rain-layer--wet {
  clip-path: inset(-16px 100% -16px -16px);
  transition: clip-path var(--motion-entrance) var(--motion-ease-transition);
}
.rain-zone {
  position: absolute;
  inset: -22px 0 0 var(--from);
  border-left: 1px dashed var(--home-dark-muted);
  background: repeating-linear-gradient(
    120deg,
    transparent 0 9px,
    color-mix(in srgb, var(--home-dark-line) 55%, transparent) 9px 10px
  );
  clip-path: inset(0 100% 0 0);
  transition: clip-path var(--motion-entrance) var(--motion-ease-transition);
}
.rain-zone-label {
  position: absolute;
  top: 0;
  left: 10px;
  font: 400 var(--text-micro)/1.5 var(--font-mono);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--home-dark-muted);
}
.rain-peak {
  position: absolute;
  top: var(--y);
  left: var(--x);
  width: 9px;
  height: 9px;
  translate: -50% -50%;
  border-radius: 50%;
  background: var(--home-dark-text);
  box-shadow: 0 0 0 4px rgb(255 255 255 / 0.12);
  transition:
    opacity var(--motion-feedback) var(--motion-ease-out),
    transform var(--motion-group) var(--motion-ease-out);
}
.rain-peak span {
  position: absolute;
  bottom: calc(100% + 10px);
  left: 50%;
  translate: -50% 0;
  font-size: 15px;
  font-weight: 700;
  letter-spacing: -0.03em;
  color: var(--home-dark-accent);
  font-variant-numeric: tabular-nums;
}
.rain-peak--rain {
  opacity: 0;
  transform: translateY(calc(var(--drop) * var(--plot) * -1));
}
.rain-slots li {
  position: absolute;
  top: calc(100% + 16px);
  left: var(--x);
  translate: -50% 0;
  font: 400 11px/1 var(--font-mono);
  color: var(--home-dark-muted);
  font-variant-numeric: tabular-nums;
}
.rain-slots [data-weather='rain'] {
  display: none;
}

/* Le total : la valeur sortante monte et s'efface, l'entrante arrive par-dessous. */
.rain-total {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 20px;
  padding: 22px 4px 0;
}
.rain-number {
  display: grid;
  overflow: hidden;
  font-size: clamp(56px, 5.2vw, 84px);
  font-weight: 780;
  line-height: 1;
  letter-spacing: -0.06em;
  font-variant-numeric: tabular-nums;
}
.rain-value {
  grid-area: 1 / 1;
  padding: 0 0.04em 0.06em 0;
  transition:
    opacity var(--motion-feedback) var(--motion-ease-out),
    transform var(--motion-group) var(--motion-ease-out),
    visibility 0s linear 0s;
}
.rain-value[data-weather='rain'] {
  visibility: hidden;
  opacity: 0;
  transform: translateY(70%);
  transition-delay: 0s, 0s, var(--motion-group);
}
.rain-total-copy {
  display: grid;
  gap: 4px;
}
.rain-total-label {
  font-size: clamp(17px, 1.4vw, 20px);
  font-weight: 600;
  line-height: 1.3;
  letter-spacing: -0.035em;
}

/* Avec la pluie. */
.rain-composition:has([value='rain']:checked) .rain-signal::before {
  transform: none;
}
.rain-composition:has([value='rain']:checked) .rain-connector-pulse {
  animation: rain-pulse var(--motion-path) var(--motion-ease-transition) both;
}
.rain-composition:has([value='rain']:checked) .rain-switch-thumb {
  transform: translateX(100%);
}
.rain-composition:has([value='rain']:checked) .rain-zone {
  clip-path: inset(0 0 0 0);
}
.rain-composition:has([value='rain']:checked) .rain-layer--wet {
  clip-path: inset(-16px -16px -16px -16px);
}
.rain-composition:has([value='rain']:checked) .rain-layer--dry .rain-band,
.rain-composition:has([value='rain']:checked) .rain-layer--dry .rain-line {
  opacity: 0;
}
.rain-composition:has([value='rain']:checked) .rain-layer--dry .rain-ghost {
  opacity: 1;
}
.rain-composition:has([value='rain']:checked) .rain-peak--dry {
  opacity: 0;
  transform: translateY(calc(var(--drop) * var(--plot)));
}
.rain-composition:has([value='rain']:checked) .rain-peak--rain {
  opacity: 1;
  transform: none;
}
.rain-composition:has([value='rain']:checked) .rain-slots [data-weather='dry'] {
  display: none;
}
.rain-composition:has([value='rain']:checked)
  .rain-slots
  [data-weather='rain'] {
  display: inline;
}
.rain-composition:has([value='rain']:checked) .rain-value[data-weather='dry'] {
  visibility: hidden;
  opacity: 0;
  transform: translateY(-70%);
  transition-delay: 0s, 0s, var(--motion-group);
}
.rain-composition:has([value='rain']:checked) .rain-value[data-weather='rain'] {
  visibility: visible;
  opacity: 1;
  transform: none;
  transition-delay: 0s;
}
@media (prefers-reduced-motion: reduce) {
  .rain-composition:has([value='rain']:checked) .rain-connector-pulse {
    animation: none;
  }
}

/* Une colonne : la carte, puis l'écran ; le raccord descend de l'une à l'autre. */
@media (width < 1100px) {
  .rain-composition {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: none;
    grid-template-areas: 'head' 'card' 'board' 'link';
  }
  .rain-head .page-section-lead {
    max-width: 40ch;
  }
  .rain-signal-card {
    max-width: 560px;
    margin-bottom: 40px;
  }
  .rain-connector {
    top: 100%;
    left: 40px;
    width: 1px;
    height: 41px;
  }
  .rain-connector::before,
  .rain-connector::after {
    left: -4px;
    right: auto;
  }
  .rain-connector::before {
    top: -5px;
  }
  .rain-connector::after {
    top: auto;
    bottom: -5px;
  }
  .rain-connector-pulse::before {
    top: 0;
    left: -3px;
  }
  @keyframes rain-pulse {
    0% {
      opacity: 0;
      transform: translateY(0);
    }
    12%,
    82% {
      opacity: 1;
    }
    100% {
      opacity: 0;
      transform: translateY(100%);
    }
  }
  .rain-more {
    margin-top: 32px;
  }
}
@media (width < 640px) {
  .rain-signal-card {
    padding: 18px 18px 20px;
  }
  .rain-toggle {
    padding-left: 0;
  }
  .rain-switch {
    width: 100%;
  }
  .rain-switch label span {
    padding-inline: 10px;
  }
  .rain-chart {
    --plot: 190px;
    padding: 18px 16px 44px 44px;
  }
  .rain-chart-label {
    margin-left: -28px;
  }
  .rain-y span {
    right: calc(100% + 10px);
  }
  .rain-slots li {
    font-size: var(--text-micro);
  }
  .rain-total {
    padding-inline: 0;
  }
}
/* 03 · Le constat. À gauche, les outils empilés : deux chiffres en rouge, sur cartes blanches.
   À droite, un peu plus bas, le panneau sombre de la prévision. Sous 1024 px, tout s'empile.
   Chaque chiffre garde, juste dessous, son périmètre et sa source. */
.findings-layout {
  display: grid;
  grid-template-columns: minmax(0, 6fr) minmax(0, 5fr);
  align-items: start;
  gap: clamp(20px, 2.4vw, 32px);
  margin-top: clamp(56px, 6vw, 88px);
}
.findings-tools {
  display: grid;
  gap: clamp(14px, 1.6vw, 20px);
}
.findings-heading {
  font-size: clamp(19px, 1.5vw, 22px);
  font-weight: 680;
  line-height: 1.2;
  letter-spacing: -0.035em;
}
.findings-card {
  padding: clamp(22px, 2.2vw, 30px);
}
.findings-value {
  font-size: clamp(52px, 5.4vw, 78px);
  font-weight: 760;
  line-height: 1;
  letter-spacing: -0.065em;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.findings-card .findings-value {
  color: var(--color-accent);
}
.findings-text {
  max-width: 40ch;
  margin-top: 12px;
  font-size: clamp(16px, 1.25vw, 18px);
  line-height: 1.4;
  letter-spacing: -0.025em;
  color: var(--color-graphite);
}
.findings-scope {
  max-width: 52ch;
  margin-top: 18px;
  font-size: 13px;
  line-height: 1.5;
  letter-spacing: -0.01em;
  color: var(--color-muted);
}
.findings-source {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px 12px;
  margin-top: 10px;
  font-size: 14px;
  line-height: 1.45;
  letter-spacing: -0.015em;
}
.findings-source-label,
.findings-host {
  font: 400 var(--text-micro) / 1.5 var(--font-mono);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-muted);
}
.findings-host {
  text-transform: none;
  letter-spacing: 0.02em;
}

/* Le panneau de la prévision : trois chiffres, une mise en garde, la source. */
.findings-forecast {
  container-type: inline-size;
  margin-top: clamp(0px, 7vw, 112px);
  padding: clamp(24px, 2.6vw, 36px);
}
.findings-forecast .findings-heading {
  font-size: clamp(24px, 2.2vw, 32px);
  font-weight: 740;
  line-height: 1.1;
  letter-spacing: -0.05em;
}
.findings-list {
  margin-top: clamp(18px, 2vw, 26px);
}
.findings-list li {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  align-items: end;
  gap: 6px 20px;
  padding-block: 18px;
  border-top: 1px solid var(--home-dark-line);
}
.findings-list .findings-value {
  font-size: clamp(40px, 4vw, 56px);
  color: var(--home-dark-accent);
}
.findings-prefix {
  display: block;
  margin-bottom: 6px;
  font: 400 var(--text-micro) / 1.5 var(--font-mono);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--home-dark-muted);
}
.findings-list .findings-text {
  margin-top: 0;
  padding-bottom: 4px;
  font-size: 16px;
  color: var(--home-dark-text);
}
@container (width < 400px) {
  .findings-list li {
    grid-template-columns: minmax(0, 1fr);
  }
}
/* La mise en garde : un filet rouge, comme une note en marge. */
.findings-note {
  position: relative;
  padding: 18px 0 0 16px;
  border-top: 1px solid var(--home-dark-line);
  font-size: 16px;
  line-height: 1.45;
  letter-spacing: -0.025em;
  color: var(--home-dark-text);
}
.findings-note::before {
  content: '';
  position: absolute;
  inset: 20px auto 2px 0;
  width: 2px;
  background: var(--home-dark-accent);
}
.findings-forecast .findings-scope,
.findings-forecast .findings-source-label,
.findings-forecast .findings-host {
  color: var(--home-dark-muted);
}
.findings-forecast .text-link {
  color: var(--home-dark-text);
}

@media (width < 1024px) {
  .findings-layout {
    grid-template-columns: minmax(0, 1fr);
  }
  .findings-forecast {
    margin-top: 0;
  }
}
/* 04 · Tout préparer. Le panneau sombre de la prévision alimente un tronc rouge ; chaque
   branche, coudée aux extrémités, arrive sur un module par un repère carré. En dessous de
   1100 px, le tronc descend du panneau et longe la liste. */
.prep-diagram {
  --prep-gap: clamp(48px, 5vw, 88px);
  --prep-branch: clamp(40px, 3.4vw, 56px);
  --prep-row-gap: 12px;
  --prep-elbow: 12px;
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  align-items: center;
  column-gap: var(--prep-gap);
  margin-top: clamp(56px, 6vw, 88px);
}

/* Le moteur : la prévision de la semaine à Bastille. */
.prep-engine {
  position: relative;
  padding: 28px 30px 26px;
}
.prep-index {
  font: 400 12px/1.5 var(--font-mono);
  letter-spacing: 0.1em;
  color: var(--color-muted);
}
.prep-engine .prep-index {
  color: var(--home-dark-muted);
}
.prep-engine h3 {
  margin-top: 10px;
  font-size: clamp(32px, 2.9vw, 42px);
  font-weight: 780;
  line-height: 1.05;
  letter-spacing: -0.055em;
}
.prep-engine-text {
  margin-top: 10px;
  max-width: 28ch;
  font-size: 16px;
  line-height: 1.45;
  letter-spacing: -0.025em;
  color: var(--home-dark-muted);
}
.prep-week {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  align-items: end;
  gap: clamp(6px, 0.7vw, 10px);
  height: clamp(120px, 11vw, 156px);
  margin-top: 40px;
}
.prep-day {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  align-items: center;
  gap: 9px;
  height: 100%;
}
.prep-day::before {
  content: '';
  order: 1;
  width: 100%;
  height: calc(var(--value) * (100% - 20px));
  border-radius: 3px 3px 1px 1px;
  background: color-mix(in srgb, var(--home-dark-text) 22%, transparent);
}
.prep-day--peak::before {
  background: var(--home-dark-accent);
}
.prep-day-value {
  order: 0;
  margin-bottom: -2px;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: -0.03em;
  color: var(--home-dark-accent);
  font-variant-numeric: tabular-nums;
}
.prep-day-label {
  order: 2;
  font: 400 11px/1 var(--font-mono);
  color: var(--home-dark-muted);
}
.prep-engine .home-ticket {
  margin-top: 26px;
  padding-top: 16px;
  border-top: 1px solid var(--home-dark-line);
}
.prep-sample {
  margin-top: 10px;
}
.prep-arrow {
  display: flex;
  transition: transform var(--motion-hover) var(--motion-ease-out);
}
.prep-engine .prep-arrow {
  position: absolute;
  top: 28px;
  right: 26px;
  color: var(--home-dark-text);
}
.prep-engine:hover .prep-arrow,
.prep-row:hover .prep-arrow {
  transform: translateX(var(--motion-arrow));
}

/* Le tronc part du panneau, à mi-hauteur, vers les branches. */
.prep-trunk {
  position: absolute;
  top: 50%;
  left: 100%;
  width: var(--prep-gap);
  height: 1px;
  background: var(--color-accent);
}
.prep-trunk::before {
  content: '';
  position: absolute;
  top: -4px;
  left: -5px;
  width: 9px;
  height: 9px;
  border-radius: 2px;
  background: var(--color-accent);
}

/* Les branches : un segment de tronc et un rameau par module, coudés aux extrémités. */
.prep-list {
  display: grid;
  gap: var(--prep-row-gap);
}
.prep-item {
  position: relative;
  padding-left: var(--prep-branch);
}
.prep-branch {
  position: absolute;
  top: calc(var(--prep-row-gap) / -2);
  bottom: calc(var(--prep-row-gap) / -2);
  left: 0;
  width: var(--prep-branch);
}
.prep-branch::before,
.prep-branch::after {
  content: '';
  position: absolute;
  border: 0 solid var(--color-accent);
}
.prep-branch::before {
  top: 0;
  bottom: 0;
  left: 0;
  border-left-width: 1px;
}
.prep-branch::after {
  top: 50%;
  right: 0;
  left: 0;
  border-top-width: 1px;
}
.prep-item:first-child .prep-branch::before,
.prep-item:last-child .prep-branch::before {
  display: none;
}
.prep-item:first-child .prep-branch::after {
  bottom: 0;
  border-left-width: 1px;
  border-top-left-radius: var(--prep-elbow);
}
.prep-item:last-child .prep-branch::after {
  top: 0;
  bottom: calc(50% - 1px);
  border-top-width: 0;
  border-bottom-width: 1px;
  border-left-width: 1px;
  border-bottom-left-radius: var(--prep-elbow);
}

/* Un module : repère, nom et rôle, ligne d'exemple, flèche. */
.prep-row {
  display: grid;
  grid-template-columns: 26px minmax(0, 1fr) minmax(0, 0.9fr) 20px;
  grid-template-areas:
    'index name ticket arrow'
    'index text ticket arrow';
  align-items: center;
  gap: 2px 18px;
  padding: 16px 20px 16px 20px;
}
.prep-row::before {
  content: '';
  position: absolute;
  top: 50%;
  left: -5px;
  width: 9px;
  height: 9px;
  translate: 0 -50%;
  border-radius: 2px;
  background: var(--color-accent);
}
.prep-row .prep-index {
  grid-area: index;
  align-self: start;
  padding-top: 3px;
}
.prep-row h3 {
  grid-area: name;
  font-size: clamp(17px, 1.35vw, 19px);
  font-weight: 650;
  line-height: 1.25;
  letter-spacing: -0.035em;
}
.prep-text {
  grid-area: text;
  font-size: 14.5px;
  line-height: 1.4;
  letter-spacing: -0.02em;
  color: var(--color-muted);
}
.prep-ticket {
  grid-area: ticket;
  font-size: 13.5px;
}
.prep-row .prep-arrow {
  grid-area: arrow;
  color: var(--color-graphite);
}
.prep-row:hover h3 a,
.prep-engine:hover h3 a {
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 4px;
}
.prep-row:hover .prep-arrow {
  color: var(--color-accent);
}
.prep-more {
  display: flex;
  justify-content: flex-end;
}

@media (1100px <= width < 1280px) {
  .prep-row {
    grid-template-columns: 24px minmax(0, 1fr) 20px;
    grid-template-areas:
      'index name arrow'
      'index text arrow'
      'index ticket arrow';
  }
  .prep-ticket {
    margin-top: 8px;
  }
}

/* Une colonne : le tronc descend du panneau et longe la liste. */
@media (width < 1100px) {
  .prep-diagram {
    --prep-rail: 28px;
    --prep-drop: 40px;
    grid-template-columns: minmax(0, 1fr);
    row-gap: var(--prep-drop);
  }
  .prep-trunk {
    top: 100%;
    left: var(--prep-rail);
    width: 1px;
    height: var(--prep-drop);
  }
  .prep-trunk::before {
    top: -5px;
    left: -4px;
  }
  .prep-item {
    padding-left: calc(var(--prep-rail) + var(--prep-branch));
  }
  .prep-branch {
    left: var(--prep-rail);
  }
  .prep-item:first-child .prep-branch::before {
    display: block;
  }
  .prep-item:first-child .prep-branch::after {
    bottom: auto;
    border-left-width: 0;
    border-radius: 0;
  }
  .prep-more {
    justify-content: flex-start;
  }
}
@media (width < 640px) {
  .prep-diagram {
    --prep-rail: 20px;
    --prep-branch: 22px;
  }
  .prep-engine {
    padding: 24px 22px 22px;
  }
  .prep-engine .prep-arrow {
    top: 24px;
    right: 20px;
  }
  .prep-row {
    grid-template-columns: minmax(0, 1fr) 20px;
    grid-template-areas:
      'index arrow'
      'name arrow'
      'text arrow'
      'ticket arrow';
    padding: 14px 16px 16px 18px;
  }
  .prep-row .prep-index {
    padding-top: 0;
  }
  .prep-ticket {
    margin-top: 10px;
  }
}
/* Fin de la section « Tout préparer » : le lien vers les six modules, puis, en dessous et plus
   discret, celui des tarifs. Les deux restent alignés sur le bord de la composition. */
.prep-section .prep-more {
  flex-direction: column;
  align-items: flex-end;
  gap: 6px;
}
/* Sur deux lignes, la flèche suit le dernier mot au lieu de rester seule à droite. */
.prep-section .prep-pricing {
  display: block;
  color: var(--color-muted);
  font-size: 15px;
  line-height: 1.6;
  letter-spacing: -0.15px;
}
.prep-section .prep-pricing .link-arrow {
  display: inline;
  width: 18px;
  height: 18px;
  margin-left: 10px;
  vertical-align: -4px;
}
@media (hover: hover) {
  .prep-section .prep-pricing:hover {
    color: var(--color-graphite);
  }
}

@media (width < 1100px) {
  .prep-section .prep-more {
    align-items: flex-start;
  }
}
/* 05 · Du siège au terrain. Trois tablettes de site, puis le tableau sombre du siège ; une
   ligne rouge descend de chaque site vers le siège. Une seule échelle pour les barres et
   les courbes : Confluence, plus petit, se lit plus petit. */
.sites-figure {
  --sites-drop: clamp(40px, 4vw, 56px);
  margin-top: clamp(56px, 6vw, 88px);
}
.sites-list {
  position: relative;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(16px, 2vw, 28px);
}

/* Une tablette de site : son nom, son total du midi, ses six demi-heures. */
.sites-card {
  position: relative;
  padding: 20px 22px 20px;
}
.sites-total {
  display: grid;
  gap: 4px;
  margin-top: 12px;
}
.sites-number {
  font-size: clamp(38px, 3.3vw, 50px);
  font-weight: 780;
  line-height: 1;
  letter-spacing: -0.055em;
  font-variant-numeric: tabular-nums;
}
.sites-unit {
  font-size: 14px;
  line-height: 1.35;
  letter-spacing: -0.02em;
  color: var(--color-muted);
}
.sites-bars {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  align-items: end;
  gap: 6px;
  height: 64px;
  margin-top: 20px;
  padding-bottom: 1px;
  border-bottom: 1px solid var(--color-line);
}
.sites-bar {
  height: calc(var(--value) * 100%);
  border-radius: 3px 3px 1px 1px;
  background: var(--color-fill);
}
.sites-bar--peak {
  background: var(--color-accent);
}
.sites-card-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 6px 12px;
  min-height: 25px;
}
.sites-badge {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 4px 9px 4px 8px;
  border-radius: var(--radius-control);
  background: var(--color-accent-soft);
  font: 400 var(--text-micro)/1.4 var(--font-mono);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-accent);
}
.sites-badge::before {
  content: '';
  width: 6px;
  height: 6px;
  border-radius: 1.5px;
  background: currentColor;
}

/* La ligne de chaque site, de sa tablette jusqu'au bord du siège. */
.sites-link {
  position: absolute;
  top: 100%;
  left: 50%;
  width: 1px;
  height: var(--sites-drop);
  background: var(--color-accent);
}
.sites-link::before,
.sites-link::after {
  content: '';
  position: absolute;
  left: -4px;
  width: 9px;
  height: 9px;
  border-radius: 2px;
  background: var(--color-accent);
}
.sites-link::before {
  top: -5px;
}
.sites-link::after {
  bottom: -5px;
}

/* Le siège : les trois prévisions superposées, leur légende, le relevé en retard. */
.sites-hq {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(190px, 0.3fr);
  grid-template-areas:
    'chart legend'
    'signal signal';
  align-items: center;
  gap: 40px clamp(32px, 4vw, 64px);
  margin-top: var(--sites-drop);
  padding: 40px clamp(24px, 2.6vw, 40px) 28px clamp(56px, 4.6vw, 72px);
}
.sites-chart {
  grid-area: chart;
  padding-bottom: 26px;
}
.sites-plot {
  position: relative;
  height: clamp(170px, 15vw, 220px);
}
.sites-plot svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
}
.sites-plot path {
  fill: none;
  vector-effect: non-scaling-stroke;
}
.sites-grid {
  stroke: var(--home-dark-line);
  stroke-width: 1;
}
.sites-curve {
  stroke-width: 2.25;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.sites-curve--bastille,
.sites-key--bastille {
  --site-color: var(--home-dark-accent);
}
.sites-curve--batignolles,
.sites-key--batignolles {
  --site-color: color-mix(in srgb, var(--home-dark-text) 82%, transparent);
}
.sites-curve--confluence,
.sites-key--confluence {
  --site-color: color-mix(in srgb, var(--home-dark-text) 48%, transparent);
}
.sites-curve {
  stroke: var(--site-color);
}
.sites-y,
.sites-x {
  position: absolute;
  font: 400 11px/1 var(--font-mono);
  color: var(--home-dark-muted);
  font-variant-numeric: tabular-nums;
}
.sites-y {
  top: var(--level);
  right: calc(100% + 14px);
  translate: 0 -50%;
}
.sites-x {
  top: calc(100% + 14px);
  left: var(--x);
  translate: -50% 0;
}
.sites-legend {
  grid-area: legend;
  display: grid;
  gap: 14px;
}
.sites-key {
  display: grid;
  grid-template-columns: 20px minmax(0, 1fr) auto;
  align-items: baseline;
  gap: 12px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--home-dark-line);
}
.sites-key::before {
  content: '';
  height: 2px;
  border-radius: 1px;
  background: var(--site-color);
  translate: 0 -4px;
}
.sites-key-name {
  font-size: 15px;
  letter-spacing: -0.02em;
}
.sites-key-total {
  font-size: 20px;
  font-weight: 700;
  letter-spacing: -0.04em;
  font-variant-numeric: tabular-nums;
}
.sites-signal {
  grid-area: signal;
  position: relative;
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 6px 18px;
  margin-left: calc(-1 * clamp(32px, 2.6vw, 40px));
  padding: 14px 18px 14px 20px;
  overflow: hidden;
  border: 1px solid var(--home-dark-line);
  border-radius: var(--radius-control);
  background: color-mix(in srgb, var(--home-dark-text) 4%, transparent);
}
.sites-signal::before {
  content: '';
  position: absolute;
  inset: 0 auto 0 0;
  width: 3px;
  background: var(--color-accent);
}
.sites-signal-label {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font: 400 11px/1.5 var(--font-mono);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--home-dark-text);
}
.sites-signal-label::before {
  content: '';
  width: 7px;
  height: 7px;
  border-radius: 1.5px;
  background: var(--color-accent);
}
.sites-signal-text {
  font-size: 15px;
  line-height: 1.45;
  letter-spacing: -0.02em;
}
.sites-caption {
  margin-top: 20px;
}

@media (width < 1024px) {
  .sites-hq {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas: 'chart' 'legend' 'signal';
    gap: 28px;
  }
  .sites-legend {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 16px;
    margin-left: calc(-1 * clamp(32px, 2.6vw, 40px));
  }
  .sites-key {
    grid-template-columns: 16px minmax(0, 1fr);
    gap: 4px 10px;
  }
  .sites-key-total {
    grid-column: 2;
  }
}

/* Une colonne : les tablettes s'empilent le long d'un rail qui descend jusqu'au siège. Chaque
   tablette tient en deux rangs, le nom puis le total à côté de ses six demi-heures : les trois
   sites se lisent d'un coup d'œil, sans pousser le siège sous l'écran. */
@media (width < 640px) {
  .sites-list {
    --rail: 10px;
    --indent: 30px;
    /* Hauteur du rang du nom : le rail et ses raccords s'y alignent. */
    --sites-head: 24px;
    --sites-port: calc(12px + var(--sites-head) / 2);
    grid-template-columns: minmax(0, 1fr);
    gap: 10px;
    padding-left: var(--indent);
  }
  .sites-list::before {
    content: '';
    position: absolute;
    top: var(--sites-port);
    bottom: calc(-1 * var(--sites-drop));
    left: var(--rail);
    width: 1px;
    background: var(--color-accent);
  }
  .sites-card {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 96px;
    grid-template-areas:
      'head head'
      'total bars';
    align-items: end;
    column-gap: 16px;
    padding: 12px 14px 14px;
  }
  .sites-card-head {
    grid-area: head;
    min-height: var(--sites-head);
  }
  .sites-total {
    grid-area: total;
    gap: 2px;
    margin-top: 8px;
  }
  .sites-number {
    font-size: 32px;
  }
  .sites-unit {
    font-size: 13px;
  }
  .sites-bars {
    grid-area: bars;
    gap: 4px;
    height: 40px;
    margin-top: 0;
  }
  .sites-link {
    top: var(--sites-port);
    left: calc(var(--rail) - var(--indent));
    width: calc(var(--indent) - var(--rail));
    height: 1px;
  }
  .sites-link::before {
    top: -4px;
    left: -5px;
  }
  .sites-link::after {
    display: none;
  }
  .sites-hq {
    padding: 30px 18px 22px 46px;
  }
  .sites-signal,
  .sites-legend {
    margin-left: -28px;
  }
  .sites-legend {
    grid-template-columns: minmax(0, 1fr);
    gap: 10px;
  }
  .sites-key {
    grid-template-columns: 16px minmax(0, 1fr) auto;
    padding-bottom: 10px;
  }
  .sites-key-total {
    grid-column: auto;
  }
}
/* 06 · Les métiers. Une composition asymétrique : le rush de 12:30, panneau sombre, tient
   toute la hauteur ; le soir et la fournée s'empilent à sa droite. L'heure, en très grand,
   donne le rythme de chaque carte. */
.trades-grid {
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  gap: clamp(16px, 1.8vw, 24px);
  margin-top: clamp(56px, 6vw, 88px);
}
.trades-card {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding: clamp(24px, 2.4vw, 34px);
}
.trades-card--rush {
  grid-row: span 2;
}
.trades-time {
  font-size: clamp(60px, 6.4vw, 100px);
  font-weight: 780;
  line-height: 0.9;
  letter-spacing: -0.065em;
  font-variant-numeric: tabular-nums;
}
.trades-card--rush .trades-time {
  color: var(--home-dark-accent);
}
.trades-card h3 {
  margin-top: 20px;
  font-size: clamp(22px, 2vw, 28px);
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -0.045em;
}
.trades-text {
  max-width: 34ch;
  margin-top: 8px;
  font-size: 16px;
  line-height: 1.45;
  letter-spacing: -0.025em;
  color: var(--color-muted);
}
.trades-card--rush .trades-text {
  color: var(--home-dark-muted);
}
.trades-arrow {
  position: absolute;
  top: clamp(24px, 2.4vw, 34px);
  right: clamp(22px, 2.2vw, 30px);
  display: flex;
  transition: transform var(--motion-hover) var(--motion-ease-out);
}
.trades-card:hover .trades-arrow {
  transform: translateX(var(--motion-arrow));
}
.trades-card:hover h3 a {
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 5px;
}

/* Le rush de Châtelet, par quart d'heure. */
.trades-rush {
  display: flex;
  flex: 1;
  flex-direction: column;
  align-self: stretch;
  padding-top: 48px;
}
/* Le graphique prend toute la hauteur laissée par les deux cartes voisines. */
.trades-rush-bars {
  display: grid;
  flex: 1;
  grid-template-columns: repeat(10, minmax(0, 1fr));
  align-items: end;
  gap: clamp(5px, 0.6vw, 9px);
  min-height: clamp(130px, 13vw, 190px);
  margin: 18px 0 30px;
  border-bottom: 1px solid var(--home-dark-line);
}
.trades-rush-bar {
  position: relative;
  height: calc(var(--value) * 100%);
  border-radius: 3px 3px 1px 1px;
  background: color-mix(in srgb, var(--home-dark-text) 22%, transparent);
}
.trades-rush-bar--peak {
  background: var(--home-dark-accent);
}
.trades-rush-label {
  position: absolute;
  top: calc(100% + 11px);
  left: 0;
  font: 400 11px/1 var(--font-mono);
  color: var(--home-dark-muted);
  white-space: nowrap;
}

/* Ce que le restaurant lit avant le soir : la météo et l'événement du samedi. */
.trades-signals {
  display: grid;
  gap: 10px;
  align-self: stretch;
  margin-top: auto;
  padding-top: 28px;
}
.trades-signal {
  display: grid;
  gap: 3px;
  padding: 12px 14px 13px;
  border: 1px solid var(--color-line);
  border-radius: var(--radius-control);
  background: var(--color-canvas);
}
.trades-signal-label {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font: 400 11px/1.5 var(--font-mono);
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.trades-signal-label::before {
  content: '';
  width: 6px;
  height: 6px;
  border-radius: 1.5px;
  background: var(--color-accent);
}
.trades-signal-line {
  font-size: 14.5px;
  line-height: 1.4;
  letter-spacing: -0.02em;
}
.trades-ticket {
  align-self: stretch;
  margin-top: auto;
  padding-top: 28px;
}
.trades-sample {
  margin-top: 18px;
}

@media (width < 1024px) {
  .trades-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .trades-card--rush {
    grid-row: auto;
    grid-column: 1 / -1;
  }
}
@media (width < 640px) {
  .trades-grid {
    grid-template-columns: minmax(0, 1fr);
  }
  .trades-card {
    padding: 24px 22px;
  }
  .trades-arrow {
    top: 24px;
    right: 20px;
  }
  .trades-rush {
    padding-top: 36px;
  }
}
/* 07 · À vérifier vous-même. Trois pièces dans leur matière : la tablette domine, la feuille de méthode
   la chevauche, les deux fondateurs en tirages. Sur téléphone, chaque visuel précède sa
   légende, l'index accroché au titre. Dès 720 px, une grille de douze colonnes : les visuels
   à gauche, les légendes dans la marge de droite. Dès 1 024 px, la tablette sur sept
   colonnes, la feuille posée sur son bord, puis les portraits sur une seconde bande.
   Les chevauchements passent par les marges, jamais par des transformations : le fil rouge
   mesure les places réelles. */
.proof-section {
  /* Ce que la feuille recouvre de la tablette. */
  --proof-overlap: 48px;
}

/* L'en-tête rejoint celui des sections 02 à 06 : le titre à gauche, le sous-titre à droite,
   avec un interlettrage desserré. */
.home-head-row .proof-subtitle {
  margin-top: 0;
  letter-spacing: -0.01em;
}

.proof-pieces {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  row-gap: clamp(56px, 15vw, 72px);
  margin-top: clamp(48px, 6vw, 88px);
}
.proof-piece {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  align-content: start;
}
.proof-visual {
  grid-row: 1;
}

/* La légende : un filet et sa marque rouge, l'index mono accroché au titre, puis la ligne
   et le lien dans la colonne du titre. */
.proof-caption {
  grid-row: 2;
  position: relative;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-content: start;
  column-gap: 14px;
  margin-top: 24px;
  padding-top: 14px;
  border-top: 1px solid var(--color-line);
}
.proof-caption::before {
  content: '';
  position: absolute;
  top: -1px;
  left: 0;
  width: 28px;
  height: 2px;
  background: var(--color-accent);
}
.proof-index {
  grid-row: 1;
  grid-column: 1;
  align-self: baseline;
  font: 400 12px/1.5 var(--font-mono);
  letter-spacing: 0.1em;
  color: var(--color-muted);
}
.proof-piece h3 {
  grid-row: 1;
  grid-column: 2;
  align-self: baseline;
  font-size: clamp(22px, 2vw, 28px);
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -0.045em;
}
.proof-line {
  grid-column: 2;
  max-width: 36ch;
  margin-top: 8px;
  font-size: 16px;
  line-height: 1.45;
  letter-spacing: -0.025em;
  color: var(--color-muted);
}
.proof-more {
  grid-column: 2;
  margin-top: 14px;
  font-size: 16px;
  letter-spacing: -0.02em;
}
.proof-more .text-link {
  gap: 10px;
  text-decoration-color: color-mix(
    in srgb,
    var(--color-graphite) 30%,
    transparent
  );
}

/* La tablette du passe, posée à l'horizontale : le cadre sombre, sa caméra, l'écran. */
.proof-tablet {
  position: relative;
  padding: clamp(9px, 0.9vw, 13px) clamp(9px, 0.9vw, 13px)
    clamp(9px, 0.9vw, 13px) clamp(20px, 1.9vw, 27px);
  border-radius: clamp(18px, 1.8vw, 26px);
  background: var(--surface-dark-background);
  box-shadow: var(--surface-dark-shadow);
}
.proof-tablet::before {
  content: '';
  position: absolute;
  top: 50%;
  left: clamp(8px, 0.75vw, 11px);
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: color-mix(in srgb, var(--color-surface) 18%, transparent);
  translate: 0 -50%;
}
.proof-screen {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-areas:
    'title meta'
    'bars bars'
    'caption caption';
  align-items: baseline;
  column-gap: 16px;
  padding: clamp(16px, 1.7vw, 24px) clamp(16px, 1.8vw, 26px)
    clamp(16px, 1.6vw, 22px);
  border-radius: clamp(10px, 1vw, 14px);
  background: var(--color-surface);
  color: var(--color-graphite);
}
.proof-screen-title {
  grid-area: title;
  font-size: clamp(16px, 1.35vw, 19px);
  font-weight: 700;
  letter-spacing: -0.035em;
}
.proof-screen-meta {
  grid-area: meta;
  font: 400 11px/1.5 var(--font-mono);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-muted);
}

/* Six demi-heures, une seule en rouge : le pic de 13:00. */
.proof-bars {
  grid-area: bars;
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  align-items: end;
  gap: clamp(8px, 1.1vw, 18px);
  height: clamp(120px, 18cqi, 228px);
  margin: 36px 0 32px;
  border-bottom: 1px solid var(--color-line);
}
.proof-bar {
  position: relative;
  height: calc(var(--value) * 100%);
  border-radius: 4px 4px 1px 1px;
  background: color-mix(in srgb, var(--color-fill) 72%, var(--color-surface));
}
.proof-bar--peak {
  background: var(--color-accent);
}
.proof-bar-value {
  position: absolute;
  bottom: calc(100% + 8px);
  left: 50%;
  translate: -50% 0;
  font-size: 15px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.03em;
  font-variant-numeric: tabular-nums;
  color: var(--color-accent);
}
.proof-bar-label {
  position: absolute;
  top: calc(100% + 11px);
  left: 50%;
  translate: -50% 0;
  font: 400 11px/1 var(--font-mono);
  color: var(--color-muted);
  white-space: nowrap;
}
.proof-screen-caption {
  grid-area: caption;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  align-items: baseline;
  gap: 3px 16px;
}
.proof-screen-name {
  font-size: 14px;
  font-weight: 600;
  line-height: 1.35;
  letter-spacing: -0.02em;
}
.proof-screen-note {
  grid-column: 1;
  font-size: 13px;
  line-height: 1.4;
  letter-spacing: -0.015em;
  color: var(--color-muted);
}
.proof-screen-caption .home-sample {
  margin-top: 6px;
}

/* La méthode : une feuille posée sur la suivante, six étapes numérotées. */
.proof-paper {
  position: relative;
}
.proof-paper::before {
  content: '';
  position: absolute;
  inset: 10px 0 -10px 10px;
  border: 1px solid var(--color-line);
  border-radius: 6px;
  background: var(--color-surface);
  box-shadow: var(--shadow-panel);
}
.proof-sheet {
  position: relative;
  margin-right: 10px;
  padding: clamp(20px, 2vw, 30px) clamp(18px, 1.9vw, 28px)
    clamp(14px, 1.4vw, 20px);
  border: 1px solid var(--color-line);
  border-radius: 6px;
  background: var(--color-surface);
  box-shadow: var(--shadow-panel);
}
.proof-sheet-title {
  font-size: clamp(17px, 1.4vw, 20px);
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -0.04em;
}
.proof-sheet-title::after {
  content: '';
  display: block;
  width: 28px;
  height: 2px;
  margin-top: 14px;
  background: var(--color-accent);
}
.proof-steps {
  margin-top: 16px;
  counter-reset: proof-step;
}
.proof-steps li {
  display: grid;
  grid-template-columns: 28px minmax(0, 1fr);
  align-items: baseline;
  padding: 10px 0;
  border-top: 1px solid var(--color-line);
  font-size: 15px;
  line-height: 1.35;
  letter-spacing: -0.02em;
  counter-increment: proof-step;
}
.proof-steps li::before {
  content: counter(proof-step, decimal-leading-zero);
  font: 400 11px/1 var(--font-mono);
  color: var(--color-muted);
}

/* Les deux fondateurs, en décalé : deux tirages, pas une grille de vignettes. */
.proof-portraits {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-items: end;
  gap: clamp(12px, 1.2vw, 16px);
  width: min(100%, 34rem);
}
.proof-person:first-child {
  margin-bottom: clamp(28px, 3.4vw, 52px);
}
.proof-portrait {
  display: block;
  overflow: hidden;
  border: 1px solid var(--color-line);
  border-radius: var(--radius-panel);
  box-shadow: var(--shadow-panel);
}
.proof-portrait img {
  display: block;
  width: 100%;
  height: auto;
}
.proof-person-name {
  display: block;
  margin-top: 10px;
  font: 400 11px/1.4 var(--font-mono);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-muted);
}

/* Tablette et bureau : la légende s'empile, index au-dessus du titre ; la feuille se
   soulève de la tablette qu'elle recouvre. */
@media (width >= 720px) {
  .proof-pieces {
    --proof-gap: clamp(16px, 1.9vw, 28px);
    grid-template-columns: repeat(12, minmax(0, 1fr));
    column-gap: var(--proof-gap);
  }
  .proof-caption {
    grid-template-columns: minmax(0, 1fr);
    padding-top: 16px;
  }
  .proof-index,
  .proof-piece h3,
  .proof-line,
  .proof-more {
    grid-row: auto;
    grid-column: 1;
  }
  .proof-piece h3 {
    margin-top: 8px;
  }
  .proof-more {
    margin-top: 18px;
  }
  .proof-paper {
    z-index: 1;
    align-self: start;
  }
  .proof-sheet {
    box-shadow:
      var(--shadow-panel),
      -16px 22px 40px -22px
        color-mix(in srgb, var(--color-graphite) 45%, transparent);
  }
  .proof-screen-caption {
    grid-template-columns: minmax(0, 1fr) auto;
  }
  .proof-screen-caption .home-sample {
    grid-row: 1;
    grid-column: 2;
    margin-top: 0;
  }
}

/* De 720 à 1 023 px : les visuels sur huit colonnes, les légendes dans la marge de droite,
   alignées sur le bas de leur pièce. La feuille remonte sur le bas de la tablette, dont
   l'écran garde une réserve pour ne rien cacher. */
@media (720px <= width < 1024px) {
  .proof-pieces {
    --proof-row: clamp(64px, 9vw, 88px);
    row-gap: var(--proof-row);
  }
  .proof-piece {
    grid-column: 1 / -1;
    grid-template-columns: subgrid;
    align-items: end;
  }
  .proof-visual {
    grid-column: 1 / span 8;
  }
  .proof-caption {
    grid-row: 1;
    grid-column: 9 / -1;
    margin-top: 0;
  }
  .proof-paper {
    grid-column: 2 / span 7;
    margin-top: calc(-1 * (var(--proof-row) + var(--proof-overlap)));
  }
  .proof-screen {
    padding-bottom: calc(var(--proof-overlap) + 8px);
  }
}

/* Dès 1 024 px : la tablette sur sept colonnes, la feuille sur les quatre suivantes,
   avancée de 48 px sur le bord de la tablette et descendue d'un cran. Une sous-grille aligne
   leurs légendes. Une seconde bande inverse les masses : la légende de l'équipe à gauche,
   les portraits à droite, dans la colonne de la feuille. */
@media (width >= 1024px) {
  .proof-pieces {
    row-gap: 0;
  }
  .proof-piece--product,
  .proof-piece--method {
    grid-row: 1 / span 5;
    grid-template-rows: subgrid;
  }
  .proof-piece--product {
    grid-column: 1 / span 7;
  }
  .proof-piece--method {
    grid-column: 8 / span 4;
  }
  .proof-piece--product .proof-caption,
  .proof-piece--method .proof-caption {
    grid-row: 2 / span 4;
    grid-template-rows: subgrid;
    margin-top: clamp(28px, 2.8vw, 40px);
  }
  .proof-tablet {
    align-self: start;
  }
  /* Ce que la feuille recouvre de l'écran reste vide : les barres et leur légende s'arrêtent
     avant, le titre et l'heure gardent toute la largeur. */
  .proof-bars,
  .proof-screen-caption {
    margin-inline-end: calc(var(--proof-overlap) - 16px);
  }
  .proof-paper {
    margin-top: clamp(56px, 9cqi, 120px);
    margin-left: calc(-1 * (var(--proof-gap) + var(--proof-overlap)));
  }
  /* La bande s'ouvre sur une même ligne : le filet de la légende, le haut du premier tirage. */
  .proof-piece--team {
    grid-row: 6;
    grid-column: 1 / -1;
    grid-template-columns: subgrid;
    align-items: start;
    margin-top: clamp(64px, 7cqi, 104px);
  }
  /* Six colonnes tant que cinq laisseraient un portrait sous 200 px. */
  .proof-piece--team .proof-visual {
    grid-column: 7 / -1;
  }
  .proof-piece--team .proof-caption {
    grid-row: 1;
    grid-column: 1 / span 5;
    margin-top: 0;
  }
}
@media (width >= 1200px) {
  .proof-piece--team .proof-visual {
    grid-column: 8 / -1;
  }
}