/* ==========================================================================
   Au-delà du k-pital
   Direction artistique digitale — v2

   Principe : la charte dit que le trait d'union devient un rythme, « une
   conversation qui avance et une courbe qui se construit ». Ce rythme est le
   fil conducteur de tout le site : il est le fond vivant, la transition entre
   les sections, la signature des survols.

   Contrainte de la charte respectée à la lettre : aucun dégradé, aucune
   couleur hors palette. La profondeur vient de la superposition de plans, du
   grain, de l'échelle typographique et du mouvement — jamais d'un fondu de
   couleurs.

   Sommaire
     01  Jetons
     02  Réinitialisation
     03  Système de mouvement
     04  Typographie
     05  Mise en page
     06  Grain et plans
     07  Barre de navigation
     08  Boutons
     09  Rythme (motif de barres)
     10  Hero
     11  Bandeau défilant
     12  Épisodes
     13  Panneaux, valeurs, citation
     14  Duo, prose, formulaire
     15  Pied de page
     16  Curseur
     17  Marque (provisoire)
     18  Utilitaires
   ========================================================================== */

/* ==========================================================================
   01  Jetons
   ========================================================================== */

:root {
  /* Palette — charte p. 13, valeurs exactes */
  --blanc:  #FFFFFF;
  --bleu:   #00259E;
  --encre:  #171716;
  --signal: #F37021;
  --ciel:   #C9D3F2;
  --brume:  #EEF1F6;

  --bleu-80: #3351B1;
  --bleu-60: #667CC5;
  --bleu-40: #99A8D8;
  --bleu-20: #CCD3EC;
  --bleu-10: #E6E9F5;

  --encre-80: #454545;
  --encre-60: #747473;
  --encre-40: #A2A2A2;
  --encre-20: #D1D1D0;
  --encre-10: #E8E8E8;

  --signal-80: #F58D4D;
  --signal-20: #FDE2D3;
  --signal-10: #FEF1E9;

  /* Un bleu plus profond, uniquement comme ombre portée du bleu de marque.
     Ce n'est pas une couleur de surface : jamais d'aplat, jamais de texte. */
  --bleu-nuit: #001A70;

  /* Rôles */
  --fond:       var(--blanc);
  --texte:      var(--encre);
  --texte-doux: var(--encre-80);
  --trait:      var(--encre-10);

  /* Typographie */
  --serif: "DM Serif Display", "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, serif;
  --sans:  "Inter Tight", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;

  /* Échelle — la charte fixe les valeurs hautes (p. 17), le clamp gère le bas */
  --t-geant:    clamp(3.25rem, 1.1rem + 9vw, 8.5rem);
  --t-affiche:  clamp(2.75rem, 1.6rem + 5.1vw, 4.75rem);
  --t-titre1:   clamp(2rem,    1.4rem + 2.7vw,  3rem);
  --t-titre2:   clamp(1.5rem,  1.2rem + 1.3vw,  2rem);
  --t-titre3:   clamp(1.2rem,  1.08rem + 0.5vw, 1.375rem);
  --t-corps:    1.0625rem;
  --t-petit:    0.9375rem;
  --t-surtitre: 0.8125rem;

  /* Rythme spatial */
  --gouttiere: clamp(1.25rem, 0.5rem + 2.4vw, 3rem);
  --largeur:   78rem;
  --largeur-texte: 38rem;
  --rayon:     16px;
  --rayon-sm:  10px;
  --section-y: clamp(4.5rem, 2.5rem + 8vw, 9.5rem);

  /* Mouvement */
  --ease-sortie: cubic-bezier(0.22, 1, 0.36, 1);      /* decélération franche */
  --ease-doux:   cubic-bezier(0.4, 0, 0.2, 1);
  --ease-ample:  cubic-bezier(0.65, 0, 0.35, 1);
  --duree-court: 200ms;
  --duree-moyen: 420ms;
  --duree-long:  900ms;

  /* Ombres — diffuses, toujours teintées de bleu, jamais de noir pur */
  --ombre-basse:  0 2px 10px -4px rgba(0, 26, 112, 0.16);
  --ombre-moyen:  0 18px 44px -26px rgba(0, 26, 112, 0.45);
  --ombre-haute:  0 40px 80px -40px rgba(0, 26, 112, 0.55);
}

/* ==========================================================================
   02  Réinitialisation
   ========================================================================== */

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

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: 96px;
}

body {
  margin: 0;
  background: var(--fond);
  color: var(--texte);
  font-family: var(--sans);
  font-size: var(--t-corps);
  line-height: 1.53;
  font-weight: 400;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  font-feature-settings: "kern" 1, "liga" 1, "calt" 1;
}

img, svg, video, canvas { display: block; max-width: 100%; }
img, svg, video { height: auto; }

h1, h2, h3, h4, p, figure, blockquote, ul, ol { margin: 0; }
ul, ol { padding: 0; list-style: none; }
a { color: inherit; }
button { font: inherit; color: inherit; }

:focus-visible {
  outline: 3px solid var(--signal);
  outline-offset: 4px;
  border-radius: 3px;
}
.sur-bleu :focus-visible { outline-color: var(--blanc); }

::selection { background: var(--bleu); color: var(--blanc); }
.sur-bleu ::selection { background: var(--signal); color: var(--encre); }

/* ==========================================================================
   03  Système de mouvement
   Une seule mécanique : [data-reveal] bascule en .est-vu quand l'élément
   entre dans le champ. Tout est en transform et opacity — jamais de
   propriété qui déclenche un recalcul de mise en page.
   ========================================================================== */

/* Masqué uniquement si JavaScript a pris la main. Si le script échoue ou
   tarde, la classe .secours rétablit tout (voir le script d'amorçage). */
.js:not(.secours) [data-reveal] {
  opacity: 0;
  transform: translate3d(0, 26px, 0);
  transition:
    opacity var(--duree-long) var(--ease-sortie),
    transform var(--duree-long) var(--ease-sortie);
  transition-delay: var(--retard, 0ms);
  will-change: transform, opacity;
}
.js:not(.secours) [data-reveal].est-vu {
  opacity: 1;
  transform: translate3d(0, 0, 0);
}
.js:not(.secours) [data-reveal="cote"]    { transform: translate3d(-28px, 0, 0); }
.js:not(.secours) [data-reveal="echelle"] { transform: translate3d(0, 34px, 0) scale(0.97); }
.js:not(.secours) [data-reveal="echelle"].est-vu { transform: translate3d(0, 0, 0) scale(1); }
.js:not(.secours) [data-reveal="fondu"]   { transform: none; }

/* Révélation d'un titre ligne par ligne : chaque ligne glisse depuis
   son propre masque. Le découpage est fait en JS. */
.ligne-masque {
  display: block;
  overflow: hidden;
  padding-bottom: 0.06em;   /* laisse respirer les jambages */
  margin-bottom: -0.06em;
}
.ligne-masque > span {
  display: block;
  transform: translate3d(0, 105%, 0);
  transition: transform 1050ms var(--ease-sortie);
  transition-delay: var(--retard, 0ms);
  will-change: transform;
}
.est-vu .ligne-masque > span,
.ligne-masque.est-vu > span { transform: translate3d(0, 0, 0); }

/* Soulignement qui se construit au survol : le trait d'union qui s'étire */
.lien-trait {
  position: relative;
  text-decoration: none;
  background-image: linear-gradient(currentColor, currentColor);
  background-repeat: no-repeat;
  background-position: 0 100%;
  background-size: 0% 1.5px;
  transition: background-size var(--duree-moyen) var(--ease-sortie);
  padding-bottom: 2px;
}
.lien-trait:hover,
.lien-trait:focus-visible { background-size: 100% 1.5px; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    transition-delay: 0ms !important;
  }
  [data-reveal] { opacity: 1; transform: none; }
  .ligne-masque > span { transform: none; }
}

/* ==========================================================================
   04  Typographie
   ========================================================================== */

.geant, .affiche, .titre-1 {
  font-family: var(--serif);
  font-weight: 400;
  letter-spacing: -0.022em;
  text-wrap: balance;
}

.geant   { font-size: var(--t-geant);   line-height: 0.93; letter-spacing: -0.035em; }
.affiche { font-size: var(--t-affiche); line-height: 1.0; }
.titre-1 { font-size: var(--t-titre1);  line-height: 1.04; }

.titre-2 {
  font-family: var(--sans);
  font-size: var(--t-titre2);
  font-weight: 600;
  line-height: 1.125;
  letter-spacing: -0.02em;
  text-wrap: balance;
}

.titre-3 {
  font-family: var(--sans);
  font-size: var(--t-titre3);
  font-weight: 500;
  line-height: 1.27;
  letter-spacing: -0.012em;
  text-wrap: balance;
}

/* « L'italique bleu sert un seul mot par titre, jamais plus. » */
.mot-cle { font-style: italic; color: var(--bleu); }
.sur-bleu .mot-cle { color: var(--ciel); }

/* Pas de flex ici : en conteneur flex, le texte devient un élément anonyme
   qui se réduit à son mot le plus long et casse en colonne sur mobile.
   Le trait d'union est donc un simple élément en ligne. */
.surtitre {
  display: block;
  font-family: var(--sans);
  font-size: var(--t-surtitre);
  font-weight: 600;
  line-height: 1.3;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--bleu);
  margin: 0;
}
.sur-bleu .surtitre { color: var(--ciel); }

/* Le trait d'union orange, marqueur de section */
.surtitre::before {
  content: "";
  display: inline-block;
  width: 22px;
  height: 7px;
  margin-right: 0.75rem;
  vertical-align: 0.12em;
  background: var(--signal);
  border-radius: 1px;
  transform-origin: left center;
  transform: scaleX(0);
  transition: transform 700ms var(--ease-sortie) 120ms;
}
.est-vu .surtitre::before,
.surtitre.est-vu::before,
[data-reveal].est-vu .surtitre::before { transform: scaleX(1); }
.surtitre--nu::before { display: none; }

@media (prefers-reduced-motion: reduce) {
  .surtitre::before { transform: scaleX(1); }
}

.chapo {
  font-size: clamp(1.0625rem, 0.97rem + 0.42vw, 1.25rem);
  line-height: 1.6;
  color: var(--texte-doux);
}
.sur-bleu .chapo { color: var(--ciel); }
.hero .chapo { color: color-mix(in srgb, var(--blanc) 88%, var(--ciel)); }

.petit { font-size: var(--t-petit); line-height: 1.5; }

.prose > * + * { margin-top: 1.15em; }
.prose a { color: var(--bleu); text-decoration-thickness: 1px; text-underline-offset: 3px; }
.prose a:hover { text-decoration-thickness: 2px; }
.prose h2 { margin-top: 2.2em; }
.prose h3 { margin-top: 1.9em; }
.prose ul { margin-top: 1.15em; }
.prose li { position: relative; padding-left: 1.5rem; }
.prose li + li { margin-top: 0.55rem; }
.prose li::before {
  content: "";
  position: absolute;
  left: 0; top: 0.63em;
  width: 13px; height: 3px;
  background: var(--signal);
  border-radius: 1px;
}
.prose strong { font-weight: 600; }

/* ==========================================================================
   05  Mise en page
   ========================================================================== */

.contenu {
  width: 100%;
  max-width: var(--largeur);
  margin-inline: auto;
  padding-inline: var(--gouttiere);
}
.contenu--large { max-width: 92rem; }
.contenu--etroit { max-width: 54rem; }

.section { position: relative; padding-block: var(--section-y); }
.section--brume { background: var(--brume); }
.section--bleu  { background: var(--bleu); color: var(--blanc); }
.sur-bleu { color: var(--blanc); }

/* Grille éditoriale asymétrique : libellé à gauche, matière à droite */
.deux-colonnes {
  display: grid;
  grid-template-columns: minmax(0, 19rem) minmax(0, 1fr);
  gap: clamp(2rem, 1rem + 4vw, 5.5rem);
  align-items: start;
}
@media (max-width: 900px) { .deux-colonnes { grid-template-columns: 1fr; gap: 2rem; } }

.entete-page {
  position: relative;
  padding-block: clamp(7rem, 4.5rem + 7vw, 10rem) clamp(2.5rem, 1.5rem + 3vw, 4rem);
}
.entete-page .chapo { margin-top: 1.5rem; max-width: var(--largeur-texte); }

.saut-contenu {
  position: absolute;
  left: -9999px; top: 0;
  z-index: 200;
  padding: 0.85rem 1.4rem;
  background: var(--bleu);
  color: var(--blanc);
  font-weight: 600;
  border-radius: 0 0 var(--rayon-sm) 0;
}
.saut-contenu:focus { left: 0; }

/* ==========================================================================
   06  Grain et plans
   Un grain très fin posé sur les aplats bleus : il casse la planéité du
   remplissage et donne la matière d'un papier imprimé. Généré en SVG, donc
   sans image à télécharger.
   ========================================================================== */

.grain::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0.4;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)' opacity='0.42'/%3E%3C/svg%3E");
}

/* Liseré lumineux en haut des aplats bleus : la lumière rasante de la charte */
.lueur-haute::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 1px;
  background: color-mix(in srgb, var(--ciel) 42%, transparent);
  pointer-events: none;
}

/* ==========================================================================
   07  Barre de navigation
   ========================================================================== */

.barre {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 60;
  transition: transform 520ms var(--ease-sortie), background 320ms var(--ease-doux),
              border-color 320ms var(--ease-doux), backdrop-filter 320ms var(--ease-doux);
  border-bottom: 1px solid transparent;
}

/* Au repos, posée sur le hero bleu : transparente, texte clair */
.barre__interieur {
  display: flex;
  align-items: center;
  gap: 1.5rem;
  min-height: 80px;
}

.barre--clair { color: var(--blanc); }
.barre--clair .barre__lien { color: color-mix(in srgb, var(--ciel) 92%, transparent); }
.barre--clair .barre__lien:hover { color: var(--blanc); background: color-mix(in srgb, var(--blanc) 12%, transparent); }
.barre--clair .barre__bascule { border-color: color-mix(in srgb, var(--ciel) 50%, transparent); }
.barre--clair .barre__bascule span,
.barre--clair .barre__bascule span::before,
.barre--clair .barre__bascule span::after { background: var(--blanc); }

/* Dès qu'on quitte le hero : verre dépoli sur fond blanc */
.barre--pose {
  background: color-mix(in srgb, var(--blanc) 82%, transparent);
  -webkit-backdrop-filter: saturate(170%) blur(16px);
  backdrop-filter: saturate(170%) blur(16px);
  border-bottom-color: var(--trait);
}
.barre--cache { transform: translate3d(0, -102%, 0); }

.barre__logo {
  display: flex;
  align-items: center;
  flex: 0 0 auto;
  margin-right: auto;
  text-decoration: none;
}

.barre__nav { display: flex; align-items: center; gap: 0.2rem; }

.barre__lien {
  position: relative;
  display: inline-block;
  padding: 0.55rem 0.9rem;
  border-radius: 999px;
  font-size: var(--t-petit);
  font-weight: 500;
  text-decoration: none;
  color: var(--texte-doux);
  transition: color var(--duree-court) var(--ease-doux),
              background var(--duree-court) var(--ease-doux);
}
.barre__lien:hover { color: var(--bleu); background: var(--bleu-10); }

.barre__lien[aria-current="page"] { font-weight: 600; }
.barre__lien[aria-current="page"]::after {
  content: "";
  position: absolute;
  left: 50%; bottom: 0.2rem;
  width: 14px; height: 3px;
  margin-left: -7px;
  border-radius: 1px;
  background: var(--signal);
}

.barre__bascule {
  display: none;
  align-items: center;
  justify-content: center;
  width: 46px; height: 46px;
  padding: 0;
  background: transparent;
  border: 1px solid var(--encre-20);
  border-radius: 50%;
  cursor: pointer;
  transition: border-color var(--duree-court) var(--ease-doux);
}
.barre__bascule span { display: block; position: relative; width: 17px; height: 1.5px; background: var(--encre); transition: background 150ms linear; }
.barre__bascule span::before,
.barre__bascule span::after {
  content: "";
  position: absolute; left: 0;
  width: 17px; height: 1.5px;
  background: var(--encre);
  transition: transform 340ms var(--ease-sortie), background 150ms linear;
}
.barre__bascule span::before { top: -5.5px; }
.barre__bascule span::after  { top: 5.5px; }
.barre__bascule[aria-expanded="true"] span { background: transparent !important; }
.barre__bascule[aria-expanded="true"] span::before { transform: translateY(5.5px) rotate(45deg); }
.barre__bascule[aria-expanded="true"] span::after  { transform: translateY(-5.5px) rotate(-45deg); }

@media (max-width: 900px) {
  .barre__bascule { display: flex; }
  .barre__nav {
    position: fixed;
    inset: 72px 0 auto 0;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: 1rem var(--gouttiere) 2rem;
    background: var(--blanc);
    border-bottom: 1px solid var(--trait);
    box-shadow: var(--ombre-moyen);
    clip-path: inset(0 0 100% 0);
    transition: clip-path 520ms var(--ease-sortie);
    pointer-events: none;
  }
  .barre__nav.est-ouvert { clip-path: inset(0 0 0 0); pointer-events: auto; }
  .barre__lien {
    padding: 0.95rem 0;
    font-family: var(--serif);
    font-size: 1.75rem;
    font-weight: 400;
    color: var(--encre);
    border-radius: 0;
    opacity: 0;
    transform: translateY(14px);
    transition: opacity 420ms var(--ease-sortie), transform 420ms var(--ease-sortie);
  }
  .barre__nav.est-ouvert .barre__lien { opacity: 1; transform: none; }
  .barre__nav.est-ouvert .barre__lien:nth-child(1) { transition-delay: 90ms; }
  .barre__nav.est-ouvert .barre__lien:nth-child(2) { transition-delay: 150ms; }
  .barre__nav.est-ouvert .barre__lien:nth-child(3) { transition-delay: 210ms; }
  .barre__lien:hover { background: transparent; }
  .barre__lien[aria-current="page"]::after { left: 0; margin-left: 0; bottom: 0.6rem; }
  .barre__nav .bouton {
    margin-top: 1.25rem;
    justify-content: center;
    opacity: 0;
    transform: translateY(14px);
    transition: opacity 420ms var(--ease-sortie) 270ms, transform 420ms var(--ease-sortie) 270ms;
  }
  .barre__nav.est-ouvert .bouton { opacity: 1; transform: none; }
  .barre--clair .barre__nav .barre__lien { color: var(--encre); }
}

body.menu-ouvert { overflow: hidden; }

/* ==========================================================================
   08  Boutons
   ========================================================================== */

.bouton {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
  padding: 0.95rem 1.6rem;
  border: 1px solid transparent;
  border-radius: 999px;
  font-size: var(--t-petit);
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: 0.005em;
  text-decoration: none;
  cursor: pointer;
  overflow: hidden;
  isolation: isolate;
  transition: color var(--duree-moyen) var(--ease-sortie),
              border-color var(--duree-moyen) var(--ease-sortie),
              box-shadow var(--duree-moyen) var(--ease-sortie);
}

/* Le remplissage monte depuis le bas au survol : le rythme, encore */
.bouton::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  transform: translate3d(0, 101%, 0);
  transition: transform var(--duree-moyen) var(--ease-sortie);
}
.bouton:hover::before,
.bouton:focus-visible::before { transform: translate3d(0, 0, 0); }

.bouton__texte { position: relative; display: inline-block; }
.bouton svg { width: 17px; height: 17px; flex: 0 0 auto; transition: transform var(--duree-moyen) var(--ease-sortie); }
.bouton:hover svg { transform: translateX(3px); }
.bouton--lecture:hover svg { transform: scale(1.12); }

.bouton--principal {
  background: var(--bleu);
  color: var(--blanc);
  box-shadow: var(--ombre-basse);
}
.bouton--principal::before { background: var(--encre); }
.bouton--principal:hover { box-shadow: var(--ombre-moyen); }

.bouton--secondaire {
  background: transparent;
  color: var(--bleu);
  border-color: var(--bleu-20);
}
.bouton--secondaire::before { background: var(--bleu); }
.bouton--secondaire:hover { color: var(--blanc); border-color: var(--bleu); }

.sur-bleu .bouton--principal { background: var(--blanc); color: var(--bleu); }
.sur-bleu .bouton--principal::before { background: var(--ciel); }
.sur-bleu .bouton--principal:hover { color: var(--bleu); }

.sur-bleu .bouton--secondaire {
  color: var(--blanc);
  border-color: color-mix(in srgb, var(--ciel) 48%, transparent);
}
.sur-bleu .bouton--secondaire::before { background: var(--blanc); }
.sur-bleu .bouton--secondaire:hover { color: var(--bleu); border-color: var(--blanc); }

.groupe-boutons { display: flex; flex-wrap: wrap; gap: 0.85rem; align-items: center; }

/* Aimantation : le bouton se décale légèrement vers le curseur (JS) */
.aimante { transition: transform 420ms var(--ease-sortie); }

/* ==========================================================================
   09  Rythme — le motif de barres
   ========================================================================== */

/* Version animée en canvas, posée en fond */
.rythme-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  opacity: 0;
  transition: opacity 1400ms var(--ease-doux);
}
.rythme-canvas.est-prete { opacity: 1; }

/* Version statique en CSS : repli et sections secondaires */
.barres { display: flex; flex-direction: column; gap: 10px; width: 100%; }
.barres span { display: block; height: 13px; border-radius: 2px; background: var(--bleu-20); }
.sur-bleu .barres span { background: color-mix(in srgb, var(--blanc) 20%, transparent); }
.barres span:nth-child(1) { width: 62%; margin-left: 0;   }
.barres span:nth-child(2) { width: 48%; margin-left: 14%; }
.barres span:nth-child(3) { width: 71%; margin-left: 5%;  }
.barres span:nth-child(4) { width: 40%; margin-left: 22%; }
.barres span:nth-child(5) { width: 84%; margin-left: 0;   }
.barres span:nth-child(6) { width: 35%; margin-left: 31%; }
.barres span:nth-child(7) { width: 56%; margin-left: 9%;  }
.barres span.accent { background: var(--signal); }

/* Transition entre deux sections : une rangée de barres qui coud les blocs */
.couture {
  position: relative;
  height: clamp(60px, 7vw, 110px);
  overflow: hidden;
  background: inherit;
}
.couture__barres {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  gap: 8px;
  padding-inline: var(--gouttiere);
}
.couture__barres i {
  display: block;
  min-width: 12px;
  height: 10px;
  border-radius: 2px;
  background: var(--bleu-10);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 700ms var(--ease-sortie);
}
.couture.est-vu .couture__barres i { transform: scaleX(1); }
.couture--bleu .couture__barres i { background: color-mix(in srgb, var(--blanc) 16%, transparent); }

/* Largeurs et retards irréguliers : le motif de la charte est décalé, jamais
   régulier — sinon on lit un pointillé et plus un rythme. */
.couture__barres i:nth-child(6n+1) { flex: 2.6 1 0; }
.couture__barres i:nth-child(6n+2) { flex: 1.2 1 0; }
.couture__barres i:nth-child(6n+3) { flex: 1.9 1 0; }
.couture__barres i:nth-child(6n+4) { flex: 1.0 1 0; }
.couture__barres i:nth-child(6n+5) { flex: 2.9 1 0; }
.couture__barres i:nth-child(6n+6) { flex: 1.5 1 0; }

.couture__barres i:nth-child(4n+1) { transition-delay: 0ms; }
.couture__barres i:nth-child(4n+2) { transition-delay: 70ms; }
.couture__barres i:nth-child(4n+3) { transition-delay: 150ms; }
.couture__barres i:nth-child(4n+4) { transition-delay: 40ms; }

/* L'accent unique de la couture */
.couture__barres i:nth-child(9) { background: var(--signal); }
.couture--bleu .couture__barres i:nth-child(9) { background: var(--signal); }

/* ==========================================================================
   10  Hero
   ========================================================================== */

.hero {
  position: relative;
  display: flex;
  align-items: center;
  min-height: 100svh;
  padding-block: 9rem 6rem;
  background: var(--bleu);
  color: var(--blanc);
  overflow: hidden;
  isolation: isolate;
}

.hero__fond { position: absolute; inset: 0; z-index: 0; }

/* Halo de lumière rasante, en aplats de la palette — pas un dégradé de
   couleurs, un simple voile de blanc à très faible opacité. */
.hero__halo {
  position: absolute;
  z-index: 1;
  width: min(120vw, 1500px);
  aspect-ratio: 1;
  top: -45%; right: -25%;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255,255,255,0.10) 0%, rgba(255,255,255,0) 62%);
  pointer-events: none;
}

.hero__interieur { position: relative; z-index: 3; width: 100%; }

.hero__grille {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 3rem;
}

.hero__texte { max-width: min(100%, 50rem); }
.hero .geant { margin-top: 1.75rem; }
.hero .chapo { margin-top: 2rem; max-width: 34rem; }
.hero .groupe-boutons { margin-top: 2.75rem; }

/* Pied du hero : l'info utile, alignée en bas */
.hero__pied {
  position: absolute;
  z-index: 3;
  left: 0; right: 0; bottom: 0;
  padding-bottom: 2.25rem;
}
.hero__pied-interieur {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 2rem;
  padding-top: 1.5rem;
  border-top: 1px solid color-mix(in srgb, var(--ciel) 28%, transparent);
}
.hero__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem 2.25rem;
  font-size: var(--t-surtitre);
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ciel);
}

/* Invitation à défiler */
.defiler {
  display: inline-flex;
  align-items: center;
  gap: 0.75rem;
  font-size: var(--t-surtitre);
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ciel);
  text-decoration: none;
  flex: 0 0 auto;
}
.defiler__rail {
  position: relative;
  width: 1px; height: 42px;
  background: color-mix(in srgb, var(--ciel) 32%, transparent);
  overflow: hidden;
}
.defiler__rail::after {
  content: "";
  position: absolute;
  inset: 0 auto auto 0;
  width: 1px; height: 14px;
  background: var(--signal);
  animation: descend 2.1s var(--ease-ample) infinite;
}
@keyframes descend {
  0%   { transform: translateY(-16px); }
  55%  { transform: translateY(42px); }
  100% { transform: translateY(42px); }
}

@media (max-width: 900px) {
  /* En flex, le pied redevenu statique se placerait à côté du texte :
     on repasse le hero en flux normal pour qu'il s'empile. */
  .hero { display: block; min-height: auto; padding-block: 7.5rem 3rem; }
  .hero__texte { max-width: none; }
  .hero__pied { position: static; padding-bottom: 0; margin-top: 3.25rem; }
  .hero__pied-interieur { flex-direction: column; align-items: flex-start; gap: 1.25rem; }
  .hero .chapo { margin-top: 1.5rem; }
  .hero .groupe-boutons { margin-top: 2rem; }
  .defiler { display: none; }
}

/* Sur les écrans vraiment étroits, les boutons prennent toute la largeur :
   une cible tactile pleine vaut mieux qu'un libellé sur trois lignes. */
@media (max-width: 420px) {
  .hero .groupe-boutons { display: grid; grid-template-columns: 1fr; }
  .hero .bouton { width: 100%; }
}

/* ==========================================================================
   11  Bandeau défilant
   Le rythme passe à l'horizontale : une phrase qui avance sans fin.
   ========================================================================== */

.bandeau {
  position: relative;
  padding-block: 1.6rem;
  background: var(--encre);
  color: var(--blanc);
  overflow: hidden;
  -webkit-user-select: none;
  user-select: none;
}
.bandeau--bleu { background: var(--bleu); }

.bandeau__piste {
  display: flex;
  width: max-content;
  animation: glisse 42s linear infinite;
}
.bandeau:hover .bandeau__piste { animation-play-state: paused; }

.bandeau__groupe {
  display: flex;
  align-items: center;
  gap: 2.75rem;
  padding-right: 2.75rem;
  flex: 0 0 auto;
}
.bandeau__mot {
  font-family: var(--serif);
  font-size: clamp(1.35rem, 1rem + 1.3vw, 2.1rem);
  line-height: 1;
  white-space: nowrap;
}
.bandeau__sep {
  width: 26px; height: 8px;
  flex: 0 0 auto;
  border-radius: 1px;
  background: var(--signal);
}
@keyframes glisse {
  from { transform: translate3d(0, 0, 0); }
  to   { transform: translate3d(-50%, 0, 0); }
}
@media (prefers-reduced-motion: reduce) {
  .bandeau__piste { animation: none; }
}

/* ==========================================================================
   12  Épisodes
   ========================================================================== */

/* L'épisode à la une : composition asymétrique, visuel débordant */
.une {
  display: grid;
  grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr);
  gap: clamp(2rem, 1rem + 4vw, 4.5rem);
  align-items: center;
}

.une__visuel {
  position: relative;
  aspect-ratio: 1 / 1;
  border-radius: var(--rayon);
  overflow: hidden;
  background: var(--bleu-10);
  box-shadow: var(--ombre-haute);
}
.une__visuel img {
  width: 100%; height: 100%;
  object-fit: cover;
  transform: scale(1.04);
  transition: transform 1200ms var(--ease-sortie);
}
.une:hover .une__visuel img { transform: scale(1); }

/* Pastille de lecture posée à cheval sur le visuel */
.une__lecture {
  position: absolute;
  z-index: 2;
  right: clamp(1rem, 2vw, 1.75rem);
  bottom: clamp(1rem, 2vw, 1.75rem);
  display: grid;
  place-items: center;
  width: clamp(64px, 7vw, 84px);
  aspect-ratio: 1;
  border-radius: 50%;
  background: var(--blanc);
  color: var(--bleu);
  box-shadow: var(--ombre-moyen);
  transition: transform var(--duree-moyen) var(--ease-sortie),
              background var(--duree-moyen) var(--ease-sortie),
              color var(--duree-moyen) var(--ease-sortie);
}
.une__lecture svg { width: 22px; height: 22px; margin-left: 3px; }
.une:hover .une__lecture { transform: scale(1.08); background: var(--signal); color: var(--encre); }

.une .titre-1 { margin-top: 1rem; }
.une .chapo   { margin-top: 1.25rem; max-width: 34rem; }
.une .groupe-boutons { margin-top: 2rem; }

@media (max-width: 860px) {
  .une { grid-template-columns: 1fr; }
  .une__visuel { max-width: 26rem; }
}

/* Grille de cartes */
.episodes-grille {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 20.5rem), 1fr));
  gap: clamp(1.25rem, 0.5rem + 1.8vw, 2.25rem);
}

.carte {
  position: relative;
  display: flex;
  flex-direction: column;
  background: var(--blanc);
  border: 1px solid var(--trait);
  border-radius: var(--rayon);
  overflow: hidden;
  transition: border-color var(--duree-moyen) var(--ease-sortie),
              transform var(--duree-moyen) var(--ease-sortie),
              box-shadow var(--duree-moyen) var(--ease-sortie);
}
.carte:hover {
  border-color: transparent;
  transform: translateY(-4px);
  box-shadow: var(--ombre-haute);
}
.carte:focus-within {
  border-color: transparent;
  box-shadow: var(--ombre-haute);
}

.carte__visuel {
  position: relative;
  aspect-ratio: 16 / 10;
  background: var(--bleu-10);
  overflow: hidden;
}
.carte__visuel img {
  width: 100%; height: 100%;
  object-fit: cover;
  transform: scale(1.01);
  transition: transform 1000ms var(--ease-sortie);
}
.carte:hover .carte__visuel img { transform: scale(1.06); }

/* Voile bleu qui se retire au survol — le duotone de la charte */
.carte__visuel::after {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--bleu);
  mix-blend-mode: multiply;
  opacity: 0.28;
  transition: opacity var(--duree-moyen) var(--ease-sortie);
  pointer-events: none;
}
.carte:hover .carte__visuel::after { opacity: 0; }

.carte__numero {
  position: absolute;
  z-index: 2;
  top: 1rem; left: 1rem;
  padding: 0.35rem 0.8rem;
  border-radius: 999px;
  background: var(--signal);
  color: var(--encre);            /* 6,1:1 — AA, conforme charte p. 14 */
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.carte__corps {
  display: flex;
  flex-direction: column;
  flex: 1;
  gap: 0.7rem;
  padding: 1.5rem 1.5rem 1.65rem;
}

.carte__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.8125rem;
  letter-spacing: 0.01em;
  color: var(--encre-60);
}
.carte__meta span + span::before { content: "·"; margin-right: 0.5rem; }

.carte__titre {
  font-family: var(--serif);
  font-size: 1.4rem;
  font-weight: 400;
  line-height: 1.16;
  letter-spacing: -0.015em;
}
.carte__titre a { text-decoration: none; transition: color var(--duree-court) var(--ease-doux); }
.carte__titre a::after { content: ""; position: absolute; inset: 0; z-index: 3; }
.carte:hover .carte__titre a { color: var(--bleu); }

.carte__resume {
  font-size: var(--t-petit);
  line-height: 1.55;
  color: var(--texte-doux);
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.carte__pied {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-top: auto;
  padding-top: 1rem;
  font-size: var(--t-petit);
  font-weight: 600;
  color: var(--bleu);
}
.carte__pied i {
  display: block;
  width: 16px; height: 3px;
  border-radius: 1px;
  background: var(--signal);
  transition: width var(--duree-moyen) var(--ease-sortie);
}
.carte:hover .carte__pied i { width: 30px; }

/* ==========================================================================
   13  Panneaux, valeurs, citation
   ========================================================================== */

.panneaux {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 13.5rem), 1fr));
  gap: 1.25rem;
}
@media (min-width: 901px) and (max-width: 1180px) {
  .deux-colonnes .panneaux { grid-template-columns: 1fr; }
}

.panneau {
  position: relative;
  padding: 1.75rem 1.6rem 1.9rem;
  background: var(--brume);
  border-radius: var(--rayon);
  overflow: hidden;
  transition: transform var(--duree-moyen) var(--ease-sortie),
              box-shadow var(--duree-moyen) var(--ease-sortie);
}
.panneau:hover { transform: translateY(-3px); box-shadow: var(--ombre-moyen); }
.section--brume .panneau { background: var(--blanc); }
.sur-bleu .panneau {
  background: color-mix(in srgb, var(--blanc) 9%, transparent);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
}
.panneau .surtitre { margin-bottom: 1rem; }
.panneau p { font-size: var(--t-petit); line-height: 1.6; color: var(--texte-doux); }
.sur-bleu .panneau p { color: var(--ciel); }

.valeurs {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 13rem), 1fr));
  gap: 2rem 1.75rem;
}
.valeur { position: relative; padding-top: 1.25rem; }
.valeur::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 2px;
  background: var(--encre);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 760ms var(--ease-sortie);
  transition-delay: var(--retard, 0ms);
}
.valeur:last-child::before { background: var(--signal); }
.sur-bleu .valeur::before { background: var(--ciel); }
.sur-bleu .valeur:last-child::before { background: var(--signal); }
[data-reveal].est-vu .valeur::before,
.valeur.est-vu::before { transform: scaleX(1); }

.valeur h3 { font-family: var(--serif); font-size: 1.5rem; font-weight: 400; line-height: 1.12; }
.valeur p { margin-top: 0.6rem; font-size: var(--t-petit); line-height: 1.55; color: var(--texte-doux); }
.sur-bleu .valeur p { color: var(--ciel); }

@media (prefers-reduced-motion: reduce) {
  .valeur::before { transform: scaleX(1); }
  .couture__barres i { transform: scaleX(1); }
}

.citation { max-width: 46rem; margin-inline: auto; text-align: center; }
.citation blockquote {
  font-family: var(--serif);
  font-size: clamp(1.6rem, 1rem + 2.4vw, 2.75rem);
  line-height: 1.16;
  letter-spacing: -0.025em;
}
.citation figcaption {
  margin-top: 1.5rem;
  font-size: var(--t-surtitre);
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--bleu);
}
.sur-bleu .citation figcaption { color: var(--ciel); }

/* ==========================================================================
   14  Duo, plateformes, lecteur, formulaire
   ========================================================================== */

.duo {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 18rem), 1fr));
  gap: clamp(2rem, 1rem + 3.5vw, 3.5rem);
}
.hote__portrait {
  position: relative;
  aspect-ratio: 4 / 5;
  max-width: 19rem;
  border-radius: var(--rayon);
  overflow: hidden;
  background: var(--bleu-10);
  margin-bottom: 1.5rem;
  box-shadow: var(--ombre-moyen);
}
.hote__portrait img {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform 1100ms var(--ease-sortie);
}
.hote:hover .hote__portrait img { transform: scale(1.04); }
.hote__portrait::after {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--bleu);
  mix-blend-mode: multiply;
  opacity: 0.3;
  transition: opacity var(--duree-moyen) var(--ease-sortie);
}
.hote:hover .hote__portrait::after { opacity: 0; }

.hote h3 { font-family: var(--serif); font-size: 1.9rem; font-weight: 400; line-height: 1.08; }
.hote .surtitre { margin-top: 0.7rem; }
.hote p { margin-top: 1rem; color: var(--texte-doux); font-size: var(--t-petit); line-height: 1.6; }

.plateformes { display: flex; flex-wrap: wrap; gap: 0.75rem; }

.plateforme {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.78rem 1.3rem;
  border: 1px solid var(--trait);
  border-radius: 999px;
  background: var(--blanc);
  font-size: var(--t-petit);
  font-weight: 500;
  text-decoration: none;
  overflow: hidden;
  isolation: isolate;
  transition: color var(--duree-moyen) var(--ease-sortie),
              border-color var(--duree-moyen) var(--ease-sortie);
}
.plateforme::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: var(--bleu);
  transform: translate3d(0, 101%, 0);
  transition: transform var(--duree-moyen) var(--ease-sortie);
}
.plateforme:hover { color: var(--blanc); border-color: var(--bleu); }
.plateforme:hover::before { transform: translate3d(0, 0, 0); }

.sur-bleu .plateforme {
  background: transparent;
  border-color: color-mix(in srgb, var(--ciel) 42%, transparent);
  color: var(--blanc);
}
.sur-bleu .plateforme::before { background: var(--blanc); }
.sur-bleu .plateforme:hover { color: var(--bleu); border-color: var(--blanc); }

.lecteur {
  position: relative;
  border-radius: var(--rayon);
  overflow: hidden;
  background: var(--brume);
  box-shadow: var(--ombre-moyen);
}
.lecteur iframe { display: block; width: 100%; border: 0; }
.lecteur--vide {
  display: grid;
  place-items: center;
  gap: 1.25rem;
  padding: 3.5rem 1.5rem;
  text-align: center;
  color: var(--encre-60);
  font-size: var(--t-petit);
  background: var(--brume);
  box-shadow: none;
  border: 1px dashed var(--bleu-40);
}
.lecteur--vide .barres { max-width: 280px; opacity: 0.7; }

.champ { display: block; margin-bottom: 1.35rem; }
.champ__label { display: block; margin-bottom: 0.5rem; font-size: var(--t-petit); font-weight: 600; }
.champ__aide { font-weight: 400; color: var(--encre-60); }
.champ input, .champ textarea, .champ select {
  width: 100%;
  padding: 0.85rem 1rem;
  font: inherit;
  font-size: var(--t-corps);
  color: var(--texte);
  background: var(--blanc);
  border: 1px solid var(--encre-20);
  border-radius: var(--rayon-sm);
  transition: border-color var(--duree-court) var(--ease-doux),
              box-shadow var(--duree-court) var(--ease-doux);
}
.champ textarea { min-height: 9.5rem; resize: vertical; }
.champ input:focus, .champ textarea:focus, .champ select:focus {
  outline: none;
  border-color: var(--bleu);
  box-shadow: 0 0 0 4px var(--bleu-10);
}

.fil {
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem;
  font-size: 0.8125rem;
  color: var(--encre-60);
  margin-bottom: 1.75rem;
}
.fil a { color: var(--bleu); text-decoration: none; }
.fil a:hover { text-decoration: underline; text-underline-offset: 3px; }

/* ==========================================================================
   15  Pied de page
   ========================================================================== */

.pied {
  position: relative;
  background: var(--bleu);
  color: var(--blanc);
  padding-block: clamp(4rem, 2.5rem + 5vw, 6.5rem) 2.25rem;
  overflow: hidden;
  isolation: isolate;
}
.pied__fond { position: absolute; inset: 0; z-index: 0; }
.pied > .contenu { position: relative; z-index: 2; }

/* Le nom en très grand, en bas de page : la signature */
.pied__signature {
  margin-bottom: clamp(3rem, 2rem + 4vw, 5rem);
  font-family: var(--serif);
  font-size: clamp(2.5rem, 0.5rem + 8.6vw, 8rem);
  line-height: 0.92;
  letter-spacing: -0.035em;
  color: color-mix(in srgb, var(--ciel) 30%, transparent);
  -webkit-user-select: none;
  user-select: none;
}
.pied__signature em { font-style: italic; }

.pied__grille {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) repeat(2, minmax(0, 0.7fr));
  gap: clamp(2rem, 1rem + 4vw, 4rem);
}
@media (max-width: 820px) { .pied__grille { grid-template-columns: 1fr 1fr; gap: 2.5rem; } }
@media (max-width: 520px) { .pied__grille { grid-template-columns: 1fr; } }

.pied__baseline { margin-top: 1.5rem; max-width: 26rem; color: var(--ciel); font-size: var(--t-petit); line-height: 1.65; }

.pied h2 {
  font-size: var(--t-surtitre);
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: color-mix(in srgb, var(--ciel) 80%, transparent);
  margin-bottom: 1.15rem;
}
.pied ul li + li { margin-top: 0.65rem; }
.pied a { font-size: var(--t-petit); text-decoration: none; color: var(--blanc); }

.pied__bas {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin-top: clamp(3rem, 2rem + 2.5vw, 4rem);
  padding-top: 1.75rem;
  border-top: 1px solid color-mix(in srgb, var(--ciel) 26%, transparent);
  font-size: 0.8125rem;
  color: var(--ciel);
}
.pied__bas a { font-size: 0.8125rem; color: var(--ciel); }

.trait-signal {
  display: inline-block;
  width: 22px; height: 7px;
  background: var(--signal);
  border-radius: 1px;
  vertical-align: middle;
  margin-right: 0.65rem;
}

/* ==========================================================================
   16  Curseur
   Un point discret qui épouse les éléments interactifs. Souris fine
   uniquement : jamais sur tactile, jamais en mouvement réduit.
   ========================================================================== */

.curseur {
  position: fixed;
  top: 0; left: 0;
  z-index: 300;
  width: 8px; height: 8px;
  margin: -4px 0 0 -4px;
  border-radius: 50%;
  background: var(--bleu);
  pointer-events: none;
  opacity: 0;
  transition: opacity 260ms linear,
              width 320ms var(--ease-sortie),
              height 320ms var(--ease-sortie),
              margin 320ms var(--ease-sortie),
              background 320ms var(--ease-sortie);
  mix-blend-mode: normal;
}
.curseur.est-actif { opacity: 1; }
.curseur.sur-lien {
  width: 46px; height: 46px;
  margin: -23px 0 0 -23px;
  background: color-mix(in srgb, var(--bleu) 16%, transparent);
}
.curseur.sur-clair { background: var(--blanc); }
.curseur.sur-clair.sur-lien { background: color-mix(in srgb, var(--blanc) 26%, transparent); }

@media (hover: none), (pointer: coarse), (prefers-reduced-motion: reduce) {
  .curseur { display: none !important; }
}

/* ==========================================================================
   17  Logo
   ========================================================================== */

.barre__logo {
  position: relative;
  display: block;
  line-height: 0;
}
.barre__logo-img {
  display: block;
  height: 36px;                 /* 252 px de large : bien au-dessus du minimum de 96 px */
  width: auto;
  transition: opacity 320ms var(--ease-doux);
}

/* La version blanche se superpose à la couleur et prend sa place tant que la
   barre repose sur le hero bleu — la charte interdit la version couleur sur
   fond bleu (p. 11). */
.barre__logo-img--blanc {
  position: absolute;
  inset: 0;
  opacity: 0;
}
.barre--clair .barre__logo-img--blanc  { opacity: 1; }
.barre--clair .barre__logo-img--couleur { opacity: 0; }

@media (max-width: 900px) {
  .barre__interieur { min-height: 72px; }
  .barre__logo-img { height: 32px; }
}
@media (max-width: 420px) {
  .barre__logo-img { height: 27px; }   /* 189 px de large */
}

.pied__logo img {
  height: 104px;
  width: auto;
  max-width: 100%;
}

/* ==========================================================================
   18  Utilitaires
   ========================================================================== */

.invisible {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}
.mesure  { max-width: var(--largeur-texte); }
.centre  { margin-inline: auto; text-align: center; }
.pile > * + *   { margin-top: 1.25rem; }
.pile-l > * + * { margin-top: 2.75rem; }
.ht-2 { margin-top: 2rem; }
.ht-3 { margin-top: 3rem; }

@media print {
  .barre, .pied, .lecteur, .bandeau, .curseur, .rythme-canvas, .couture { display: none !important; }
  body { color: #000; }
  [data-reveal] { opacity: 1 !important; transform: none !important; }
  .ligne-masque > span { transform: none !important; }
}

/* Unité de mesure utilisée par la découpe des titres en lignes (site.js) */
.mot { display: inline-block; }

/* Un titre découpé en lignes reste masqué le temps de la découpe, sinon on
   verrait le texte sauter. Sans JavaScript, la règle ne s'applique jamais. */
.js:not(.secours) [data-lignes]:not(.pret) { opacity: 0; }
.secours .ligne-masque > span { transform: none; }
.secours [data-reveal] { opacity: 1; transform: none; }
.grain::after { z-index: 2; }

/* Le contenu passe au-dessus du champ de rythme posé en fond de section */
.section--bleu > .contenu,
.section--bleu > .couture { position: relative; z-index: 3; }
.section--bleu > .rythme-canvas { z-index: 0; }

/* La citation se découpe en lignes comme les titres */
.citation__texte .ligne-masque { padding-bottom: 0.1em; margin-bottom: -0.1em; }


/* ==========================================================================
   19  Transitions entre pages
   Le site est fait de vraies pages HTML. L'API View Transitions enchaîne
   deux chargements sans coupure blanche — une ligne de CSS, et rien à
   télécharger. Là où elle n'existe pas, la navigation reste la navigation
   normale : aucun script ne s'interpose, donc aucun risque de lien mort.
   ========================================================================== */

@view-transition { navigation: auto; }

::view-transition-old(root) {
  animation: sortie-page 260ms var(--ease-doux) both;
}
::view-transition-new(root) {
  animation: entree-page 420ms var(--ease-sortie) both;
}

@keyframes sortie-page {
  to { opacity: 0; transform: translate3d(0, -10px, 0); }
}
@keyframes entree-page {
  from { opacity: 0; transform: translate3d(0, 14px, 0); }
}

@media (prefers-reduced-motion: reduce) {
  ::view-transition-old(root),
  ::view-transition-new(root) { animation: none; }
}

/* L'encre 60 passe AA sur blanc (4,7:1) mais pas sur la brume (4,1:1).
   Dans les zones brume, la méta descend d'un cran dans l'échelle. */
.section--brume .carte__meta,
.panneau .carte__meta { color: var(--encre-80); }

/* Cibles tactiles du pied de page : un lien de liste faisait 20 px de haut,
   sous le minimum de 24 px recommandé (WCAG 2.2, critère 2.5.8). */
.pied ul a,
.pied__bas a {
  display: inline-block;
  padding-block: 4px;
}
.pied ul li + li { margin-top: 0.35rem; }

/* Mention des plateformes pas encore ouvertes. Mieux vaut une phrase vraie
   qu'un bouton qui ne mène nulle part le jour du lancement. */
.note-avenir {
  margin-top: 1rem;
  font-size: var(--t-petit);
  color: var(--encre-60);
}
.sur-bleu .note-avenir { color: color-mix(in srgb, var(--ciel) 85%, transparent); }
.pied .note-avenir { margin-top: 0.85rem; font-size: 0.8125rem; color: color-mix(in srgb, var(--ciel) 75%, transparent); }