/* ============================================================
   LE JARL · Site officiel
   DA v2 "Polar" : reprise directe de la couverture de
   « Ça va mal finir ». Jaune acide sur noir d'encre, typo
   condensée érodée, codes du dossier d'enquête.
   Jaune relevé au pixel sur la couverture : #F0E400
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Anton&family=Inter:wght@300;400;500;600;700;800&family=Courier+Prime:ital,wght@0,400;0,700;1,400&display=swap');

/* -----------------------------------------------
   1. TOKENS
   ----------------------------------------------- */
:root {
  /* Noirs d'impression */
  --encre:        #08090A;
  --encre-2:      #0E0F11;
  --carton:       #15171A;
  --carton-2:     #1D2024;

  /* Le jaune de la couverture */
  --jaune:        #F0E400;
  --jaune-vif:    #FFF63D;
  --jaune-mat:    #C9BE00;
  --jaune-sourd:  #6E6800;

  /* Papier */
  --os:           #EFEDE6;
  --os-70:        rgba(239, 237, 230, 0.70);
  --os-45:        rgba(239, 237, 230, 0.45);
  --os-25:        rgba(239, 237, 230, 0.25);
  --os-12:        rgba(239, 237, 230, 0.12);
  --os-06:        rgba(239, 237, 230, 0.06);

  /* Tampon */
  --rouge:        #C1121F;
  --rouge-clair:  #E23D3D;

  /* Tons du dossier */
  --ton-hostile:   #C1121F;
  --ton-neutre:    #6B7075;
  --ton-favorable: #F0E400;

  /* Typo */
  --titre:        'Anton', 'Impact', sans-serif;
  --corps:        'Inter', 'Helvetica Neue', Arial, sans-serif;
  --machine:      'Courier Prime', 'Courier New', monospace;

  /* Rythme */
  --pad-y:        130px;
  --pad-y-mob:    68px;
  --max:          1240px;
  --max-etroit:   820px;

  --ease:         cubic-bezier(0.22, 1, 0.36, 1);
  --ease-court:   cubic-bezier(0.4, 0, 0.2, 1);
}

/* -----------------------------------------------
   2. BASE
   ----------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--encre);
  color: var(--os);
  font-family: var(--corps);
  font-size: 17px;
  line-height: 1.65;
  font-weight: 300;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}

img, svg, video { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-decoration: none; }
::selection { background: var(--jaune); color: var(--encre); }

/* Grain d'impression, plus marqué que sur une DA classique */
body::after {
  content: '';
  position: fixed; inset: 0;
  pointer-events: none; z-index: 999;
  opacity: 0.055;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='4'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* -----------------------------------------------
   3. TRAITEMENTS POLAR
   ----------------------------------------------- */

/* Érosion des gros titres, comme la typo grattée de la couverture.
   Stries horizontales : baseFrequency très basse en X, haute en Y.
   Réglage mesuré sur canvas : 81 % opaque, 8 % en dégradé, 11 % troué.
   Au-delà, le titre vire au gris sale et devient illisible. */
.erode {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='400' height='400'%3E%3Cfilter id='e'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.014 0.55' numOctaves='3' seed='7'/%3E%3CfeColorMatrix type='matrix' values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 20 0 0 0 -6.9'/%3E%3C/filter%3E%3Crect width='400' height='400' filter='url(%23e)'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='400' height='400'%3E%3Cfilter id='e'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.014 0.55' numOctaves='3' seed='7'/%3E%3CfeColorMatrix type='matrix' values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 20 0 0 0 -6.9'/%3E%3C/filter%3E%3Crect width='400' height='400' filter='url(%23e)'/%3E%3C/svg%3E");
  -webkit-mask-size: 420px 420px;
  mask-size: 420px 420px;
}

/* Surligneur jaune, le geste du dossier annoté.
   Fond peint sur le span lui-même : pas de pseudo en z-index négatif,
   qui passerait derrière le fond de section sur les navigateurs
   qui ne créent pas de contexte d'empilement ici. */
.surligne {
  color: var(--encre);
  font-weight: 500;
  padding: 0.06em 0.3em;
  background-image: linear-gradient(100deg,
    transparent 0.4%, var(--jaune) 1.6%,
    var(--jaune) 98.4%, transparent 99.6%);
  background-repeat: no-repeat;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}

/* Plaque : le bloc noir posé sur la photo, comme sur la couverture */
.plaque {
  position: relative;
  background: var(--encre);
  padding: 34px 44px 40px;
  box-shadow: 0 30px 70px rgba(0,0,0,0.85);
}
.plaque::before {
  content: '';
  position: absolute; inset: 0;
  opacity: 0.5;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='p'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.03 0.7' numOctaves='4'/%3E%3C/filter%3E%3Crect width='300' height='300' filter='url(%23p)' opacity='0.5'/%3E%3C/svg%3E");
  mix-blend-mode: overlay;
  pointer-events: none;
}

/* Tampon d'archive */
.tampon {
  display: inline-block;
  font-family: var(--machine);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--rouge-clair);
  border: 2px solid var(--rouge-clair);
  padding: 7px 14px;
  transform: rotate(-4deg);
  opacity: 0.85;
}
.tampon--jaune { color: var(--jaune); border-color: var(--jaune); }

/* Ligne de machine à écrire, pour toutes les métadonnées */
.machine {
  font-family: var(--machine);
  font-size: 12px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--os-45);
}

/* -----------------------------------------------
   4. UTILITAIRES
   ----------------------------------------------- */
.wrap { width: 100%; max-width: var(--max); margin: 0 auto; padding: 0 32px; }
.wrap--etroit { max-width: var(--max-etroit); }

.section { padding: var(--pad-y) 0; position: relative; }
.section--carton { background: var(--carton); }
.section--raye {
  background:
    repeating-linear-gradient(-45deg, transparent 0 22px, rgba(240,228,0,0.018) 22px 44px),
    var(--encre-2);
}

.surtitre {
  font-family: var(--machine);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--jaune);
  margin: 0 0 18px;
  display: flex;
  align-items: center;
  gap: 14px;
}
.surtitre::before {
  content: '';
  width: 26px; height: 3px;
  background: var(--jaune);
  flex: none;
}

.titre {
  font-family: var(--titre);
  font-weight: 400;
  font-size: clamp(40px, 6.4vw, 82px);
  /* Anton est une condensée d'affiche : au-dessus de 0.92 elle perd son
     bloc et ressemble à du texte courant agrandi. Ne pas remonter. */
  line-height: 0.88;
  letter-spacing: -0.005em;
  text-transform: uppercase;
  margin: 0 0 28px;
}
.titre--jaune { color: var(--jaune); }

.lead { font-size: 19.5px; color: var(--os-70); max-width: 62ch; margin: 0 0 32px; }

.cite {
  font-family: var(--machine);
  font-size: clamp(17px, 2vw, 21px);
  line-height: 1.7;
  color: var(--os);
  border-left: 3px solid var(--jaune);
  padding: 4px 0 4px 22px;
  margin: 28px 0 0;
}

/* Boutons */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 16px 30px;
  font-family: var(--corps);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  border: 1.5px solid var(--jaune);
  background: transparent;
  color: var(--jaune);
  cursor: pointer;
  transition: all 0.3s var(--ease);
}
.btn:hover {
  background: var(--jaune);
  color: var(--encre);
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(240, 228, 0, 0.25);
}
.btn--plein {
  background: var(--jaune);
  color: var(--encre);
}
.btn--plein:hover {
  background: var(--jaune-vif);
  border-color: var(--jaune-vif);
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(240, 228, 0, 0.35);
}
.btn--fantome {
  border-color: var(--os-25);
  color: var(--os);
}
.btn--fantome:hover {
  border-color: var(--os);
  background: var(--os);
  color: var(--encre);
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(239, 237, 230, 0.18);
}
.btn--petit {
  padding: 11px 20px;
  font-size: 11px;
  border-width: 1px;
}

.reveal { opacity: 0; transform: translateY(26px); transition: opacity 0.85s var(--ease), transform 0.85s var(--ease); }
.reveal.vu { opacity: 1; transform: none; }

/* Cartes Histoire : glissement latéral */
.acte.reveal { transform: translateY(40px) scale(0.97); }
.acte:nth-child(odd).reveal { transform: translateX(-60px) translateY(30px) scale(0.97); }
.acte:nth-child(even).reveal { transform: translateX(60px) translateY(30px) scale(0.97); }
.acte.reveal.vu { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .reveal { opacity: 1; transform: none; transition: none; }
  * { animation-duration: 0.001ms !important; transition-duration: 0.001ms !important; }
}

/* -----------------------------------------------
   5. NAVIGATION
   ----------------------------------------------- */
.nav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 100;
  display: flex; align-items: center; justify-content: space-between;
  padding: 24px 44px;
  border-bottom: 1px solid transparent;
  transition: background 0.3s var(--ease), padding 0.3s var(--ease), border-color 0.3s;
}
.nav.colle {
  background: rgba(8, 9, 10, 0.88);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  padding: 16px 44px;
  border-bottom-color: rgba(240, 228, 0, 0.3);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.25);
}
.nav__logo {
  font-family: var(--titre);
  font-size: 24px;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  transition: transform 0.25s var(--ease);
}
.nav__logo:hover {
  transform: scale(1.02);
}
.nav__logo span { color: var(--jaune); }
.nav__liens { display: flex; align-items: center; gap: 36px; }
.nav__liens a {
  font-family: var(--machine);
  font-size: 11.5px; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--os-70);
  transition: color 0.25s var(--ease);
  position: relative;
}
.nav__liens a:hover { color: var(--jaune); }
.nav__liens a::after {
  content: ''; position: absolute; left: 50%; bottom: -4px;
  width: 0; height: 1.5px; background: var(--jaune);
  transition: width 0.25s var(--ease), left 0.25s var(--ease);
}
.nav__liens a:hover::after { width: 100%; left: 0; }
.nav__burger { display: none; background: none; border: 0; cursor: pointer; padding: 8px; }
.nav__burger span { display: block; width: 24px; height: 2px; background: var(--jaune); margin: 5px 0; transition: transform 0.3s, opacity 0.3s; }
.nav.ouvert .nav__burger span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav.ouvert .nav__burger span:nth-child(2) { opacity: 0; }
.nav.ouvert .nav__burger span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* -----------------------------------------------
   6. HERO (SPLIT : TEXTE GAUCHE / IMAGE DROITE)
   ----------------------------------------------- */
.hero {
  position: relative;
  height: 100svh;
  max-height: 100svh;
  display: grid;
  grid-template-columns: 1fr 1fr;
  overflow: hidden;
  background: var(--encre);
}

/* Colonne texte (gauche) */
.hero__col--txt {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 120px 60px 60px 80px;
  position: relative;
  z-index: 2;
}

/* Colonne image (droite) */
.hero__col--img {
  position: relative;
  overflow: hidden;
}
.hero__col--img img {
  width: 100%; height: 100%; object-fit: cover;
  object-position: center 25%;
  filter: contrast(1.1) brightness(0.88);
  animation: heroZoom 28s ease-in-out infinite;
}
.hero__col--img::after {
  content: '';
  position: absolute; inset: 0;
  background:
    linear-gradient(to right, var(--encre) 0%, transparent 25%),
    linear-gradient(to bottom, rgba(8,9,10,0.85) 0%, transparent 20%);
  pointer-events: none;
}

@keyframes heroZoom {
  0% { transform: scale(1); }
  50% { transform: scale(1.05); }
  100% { transform: scale(1); }
}

.hero__plaque {
  display: inline-block;
  transform: rotate(-1.4deg);
  margin-left: -14px;
  max-width: 100%;
}
.hero__nom {
  font-family: var(--titre);
  font-weight: 400;
  font-size: clamp(62px, 10vw, 160px);
  line-height: 0.82;
  letter-spacing: -0.015em;
  text-transform: uppercase;
  color: var(--jaune);
  margin: 0;
}
.hero__baseline {
  font-family: var(--machine);
  font-size: clamp(11px, 1.2vw, 15px);
  font-weight: 700;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--os-70);
  margin: 18px 0 0;
}
.hero__actions { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 40px; }

.hero__tampon { position: absolute; top: 100px; right: 30px; z-index: 3; }

.hero__reseaux--inline {
  display: flex; gap: 24px; margin-top: 36px;
}
.hero__reseaux--inline a {
  font-family: var(--machine);
  font-size: 11px; font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--os-25); transition: color 0.25s;
}
.hero__reseaux--inline a:hover { color: var(--jaune); }

/* -----------------------------------------------
   7. BANDEAU CHIFFRES
   ----------------------------------------------- */
.chiffres { background: var(--jaune); color: var(--encre); }
.chiffres__grille { display: grid; grid-template-columns: repeat(5, 1fr); }
.chiffre {
  padding: 40px 20px;
  text-align: center;
  border-right: 2px solid rgba(8,9,10,0.18);
}
.chiffre:last-child { border-right: 0; }
.chiffre__val {
  font-family: var(--titre);
  font-size: clamp(32px, 3.8vw, 52px);
  line-height: 1;
  color: var(--encre);
  display: block; margin-bottom: 8px;
}
.chiffre__lib {
  font-family: var(--machine);
  font-size: 11px; font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase;
  color: rgba(8,9,10,0.68);
}

/* -----------------------------------------------
   8. HISTOIRE (PARCOURS MAP ZIGZAG & CHECKPOINTS)
   ----------------------------------------------- */
.section--histoire {
  position: relative;
  overflow: hidden;
}
.map-container {
  position: relative;
  padding: 40px 0;
  margin-top: 60px;
}

/* Ligne vectorielle en Zigzag (S-Curve) */
.map-path-svg {
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 100%;
  pointer-events: none;
  z-index: 0;
}
.path-glow {
  fill: none;
  stroke: rgba(240, 228, 0, 0.15);
  stroke-width: 7px;
  opacity: 0.8;
}
.path-dash {
  fill: none;
  stroke: var(--jaune);
  stroke-width: 2.5px;
  stroke-dasharray: 12, 12;
  opacity: 0.85;
  animation: dashFlow 70s linear infinite;
}

@keyframes dashFlow {
  from { stroke-dashoffset: 0; }
  to { stroke-dashoffset: -1000; }
}

/* Les actes comme cartes autonomes alternées gauche/droite */
.acte {
  display: grid;
  grid-template-columns: 1fr 1.2fr;
  gap: 0;
  align-items: stretch;
  margin-bottom: 160px;
  position: relative;
  z-index: 2;
  max-width: 72%;
  background: var(--carton);
  border: 2px solid var(--os-12);
  box-shadow: 0 20px 50px rgba(0,0,0,0.6);
  transition: border-color 0.35s, transform 0.35s var(--ease);
}
.acte:hover {
  border-color: var(--jaune);
  transform: translateY(-4px);
}
.acte:last-child { margin-bottom: 40px; }

/* Impair (1, 3) = carte calée à gauche */
.acte:nth-child(odd) {
  margin-left: 0;
  margin-right: auto;
}
/* Pair (2, 4) = carte calée à droite */
.acte:nth-child(even) {
  margin-left: auto;
  margin-right: 0;
  grid-template-columns: 1.2fr 1fr;
}
.acte:nth-child(even) .acte__media { order: 2; }

/* Image intégrée dans la carte */
.acte__media {
  position: relative;
  overflow: hidden;
}
.acte__media img {
  width: 100%; height: 100%; object-fit: cover;
  filter: grayscale(0.15) contrast(1.1) brightness(0.9);
  transition: filter 0.35s, transform 0.35s;
}
.acte:hover .acte__media img {
  filter: grayscale(0) brightness(1);
  transform: scale(1.03);
}

/* Texte intégré dans la carte */
.acte__txt {
  padding: 32px 30px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.acte__num {
  font-family: var(--machine);
  font-size: 11px; font-weight: 700; letter-spacing: 0.3em;
  color: var(--jaune); margin-bottom: 10px;
}
.acte__titre {
  font-family: var(--titre);
  font-size: clamp(24px, 2.8vw, 38px);
  line-height: 1.02; text-transform: uppercase;
  margin: 0 0 16px;
}
.acte p { color: var(--os-70); margin: 0 0 12px; font-size: 15px; line-height: 1.5; }
.acte__lieu {
  font-family: var(--machine);
  font-size: 11px; letter-spacing: 0.22em; text-transform: uppercase;
  color: var(--os-45); margin-top: 18px;
  padding-top: 12px; border-top: 1px solid var(--os-12);
}

/* -----------------------------------------------
   9. LIVRE
   ----------------------------------------------- */
.livre {
  background: var(--encre);
  border-top: 2px solid var(--jaune);
  border-bottom: 2px solid var(--jaune);
  position: relative;
  overflow: hidden;
}
.livre::before {
  content: 'ÇA VA MAL FINIR';
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%) rotate(-90deg);
  font-family: var(--titre);
  font-size: 20vw;
  color: var(--jaune);
  opacity: 0.028;
  white-space: nowrap;
  pointer-events: none;
}
.livre__grille { display: grid; grid-template-columns: 0.8fr 1.2fr; gap: 80px; align-items: center; position: relative; }
.livre__couv { position: relative; perspective: 1200px; }
.livre__couv img {
  width: 100%;
  border-radius: 2px;
  box-shadow: 
    0 15px 35px rgba(0,0,0,0.65), 
    0 5px 15px rgba(240,228,0,0.06);
  transition: transform 0.6s var(--ease), box-shadow 0.6s var(--ease);
  transform-style: preserve-3d;
}
.livre__couv:hover img { 
  transform: rotateY(-10deg) rotateX(4deg) translateY(-6px); 
  box-shadow: 
    -18px 25px 40px rgba(0,0,0,0.7), 
    0 0 20px rgba(240,228,0,0.15);
}
.livre__pastille {
  position: absolute; top: -16px; left: -16px; z-index: 2;
  background: var(--jaune); color: var(--encre);
  font-family: var(--machine);
  font-size: 11px; font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase;
  padding: 9px 15px;
  transform: rotate(-3deg);
}
.livre__titre {
  font-family: var(--titre);
  font-size: clamp(48px, 6.4vw, 96px);
  line-height: 1.02;
  text-transform: uppercase;
  color: var(--jaune);
  margin: 0 0 14px;
}
.livre__soustitre {
  font-family: var(--machine);
  font-size: clamp(14px, 1.5vw, 17px);
  letter-spacing: 0.06em;
  color: var(--os-70);
  margin: 0 0 26px;
  text-transform: uppercase;
}
.livre__meta {
  display: flex; flex-wrap: wrap; gap: 10px 26px;
  font-family: var(--machine);
  font-size: 12px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--os-45);
  padding: 18px 0; margin: 26px 0;
  border-top: 1px solid var(--os-12);
  border-bottom: 1px solid var(--os-12);
}
.livre__achat { display: flex; flex-wrap: wrap; gap: 12px 20px; align-items: center; }
.livre__achat .lien-sec {
  font-family: var(--machine);
  font-size: 12px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--os-45);
  border-bottom: 2px solid transparent; padding-bottom: 2px;
  transition: color 0.25s, border-color 0.25s;
}
.livre__achat .lien-sec:hover { color: var(--jaune); border-bottom-color: var(--jaune); }

/* -----------------------------------------------
   10. TABLEAU DE CHASSE (le dossier)
   ----------------------------------------------- */
.chasse { background: var(--encre-2); }
.chasse__entete { display: flex; justify-content: space-between; align-items: flex-end; gap: 40px; margin-bottom: 12px; flex-wrap: wrap; }
.chasse__compteur {
  font-family: var(--titre);
  font-size: clamp(28px, 3.2vw, 44px);
  line-height: 1; white-space: nowrap;
  color: var(--jaune);
}
.chasse__compteur small {
  display: block;
  font-family: var(--machine);
  font-size: 11px; font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--os-45); margin-top: 12px;
}

/* Filtres en classeur */
.filtres {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: flex-end;
  margin: 32px 0 40px;
  border-bottom: 2px solid var(--os-12);
}
.filtre {
  font-family: var(--machine);
  font-size: 11px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase;
  padding: 10px 20px;
  background: var(--encre);
  border: 1px solid var(--os-12);
  border-bottom: none;
  color: var(--os-45);
  cursor: pointer;
  border-radius: 6px 6px 0 0;
  transition: all 0.25s var(--ease);
  position: relative;
  top: 2px;
}
.filtre:hover {
  color: var(--os);
  background: var(--carton);
  border-color: var(--os-25);
}
.filtre.actif {
  background: var(--jaune);
  border-color: var(--jaune);
  color: var(--encre);
  font-weight: 700;
}
.filtres__sep {
  width: 1px;
  height: 24px;
  background: var(--os-12);
  margin: 0 12px 10px;
}

/* Fiches */
.prises { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.prise {
  position: relative;
  background-color: var(--encre-2);
  background-image: 
    linear-gradient(rgba(239, 237, 230, 0.012) 1px, transparent 1px),
    linear-gradient(90deg, rgba(239, 237, 230, 0.012) 1px, transparent 1px);
  background-size: 18px 18px;
  border: 1px solid var(--os-12);
  border-radius: 4px;
  padding: 30px 28px 26px;
  display: flex; flex-direction: column;
  min-height: 270px;
  transition: all 0.35s var(--ease);
}
.prise::after {
  content: 'DOSSIER ARCHIVE';
  position: absolute;
  bottom: 22px;
  right: 28px;
  font-family: var(--machine);
  font-size: 7.5px;
  font-weight: 700;
  letter-spacing: 0.2em;
  color: var(--os-06);
  pointer-events: none;
}
.prise:hover {
  background-color: var(--carton);
  border-color: var(--ton, var(--jaune));
  transform: translateY(-5px);
  box-shadow: 
    0 16px 38px rgba(0, 0, 0, 0.65),
    0 0 15px rgba(var(--shadow-color, 240, 228, 0), 0.12);
}
.prise[data-ton="hostile"]   { 
  --ton: var(--ton-hostile); 
  --shadow-color: 193, 18, 31;
}
.prise[data-ton="neutre"]    { 
  --ton: var(--ton-neutre); 
  --shadow-color: 107, 112, 117;
}
.prise[data-ton="favorable"] { 
  --ton: var(--ton-favorable); 
  --shadow-color: 240, 228, 0;
}

.prise__ref {
  font-family: var(--machine);
  font-size: 10.5px; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--os-25);
  display: flex; justify-content: space-between; gap: 12px;
  padding-bottom: 14px; margin-bottom: 18px;
  border-bottom: 1px dashed var(--os-12);
}
.prise__ref b {
  color: var(--ton, var(--jaune));
  font-weight: 700;
  border: 1px solid var(--os-12);
  padding: 1px 5px;
  border-radius: 2px;
  background: rgba(239, 237, 230, 0.04);
}
.prise__media {
  font-family: var(--titre);
  font-size: 22px; letter-spacing: 0.02em; text-transform: uppercase;
  color: var(--os); line-height: 1.05;
  margin-bottom: 14px;
  transition: color 0.3s;
}
.prise:hover .prise__media {
  color: var(--ton, var(--jaune));
}
.prise__titre {
  font-size: 15.5px; font-weight: 400; line-height: 1.5;
  color: var(--os-70); margin: 0 0 auto;
  padding-left: 14px;
  border-left: 2px solid var(--ton, var(--ton-neutre));
  transition: color 0.3s;
}
.prise:hover .prise__titre { color: var(--os); }
.prise__bas {
  display: flex; justify-content: space-between; align-items: center; gap: 12px;
  margin-top: 22px; padding-top: 16px;
  border-top: 1px solid var(--os-12);
}
.prise__tag {
  font-family: var(--machine);
  font-size: 9.5px; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--ton, var(--ton-neutre));
  border: 1px solid var(--ton, var(--ton-neutre));
  background: rgba(var(--shadow-color), 0.08);
  padding: 4px 10px;
  border-radius: 2px;
}
.prise__sign { font-family: var(--machine); font-size: 11px; color: var(--os-25); }
.prise__fleche { font-size: 16px; color: var(--os-25); transition: color 0.25s, transform 0.25s; }
a.prise:hover .prise__fleche { color: var(--ton, var(--jaune)); transform: translate(4px, -4px); }
.prise--muette { cursor: default; }

.chasse__pied { margin-top: 40px; display: flex; justify-content: space-between; align-items: center; gap: 24px; flex-wrap: wrap; }
.chasse__note { font-family: var(--machine); font-size: 11.5px; line-height: 1.7; color: var(--os-25); max-width: 60ch; margin: 0; }

/* -----------------------------------------------
   10 bis. LE COMBAT
   ----------------------------------------------- */

/* Le constat : le verbatim qui ouvre la page */
.constat {
  border-left: 6px solid var(--jaune);
  padding: 6px 0 6px 34px;
  margin: 0 0 76px;
  max-width: 52ch;
}
.constat__mot {
  font-family: var(--titre);
  font-size: clamp(20px, 2.4vw, 32px);
  line-height: 1.2;
  text-transform: uppercase;
  color: var(--os);
  margin: 0;
}
.constat__source {
  font-family: var(--machine);
  font-size: 11.5px; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--os-45); margin: 18px 0 0;
}

/* Les combats, en grilles de cartes compactes */
.combats-grille {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 24px;
  margin-bottom: 40px;
}
.combat {
  background: var(--carton);
  border: 2px solid var(--os-12);
  padding: 32px 30px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  transition: border-color 0.35s, transform 0.35s var(--ease);
}
.combat:hover {
  border-color: var(--jaune);
  transform: translateY(-4px);
}
.combat__haut {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 16px;
}
.combat__num {
  font-family: var(--titre);
  font-size: 42px;
  line-height: 0.9;
  color: var(--jaune);
  opacity: 0.95;
}
.combat__titre {
  font-family: var(--titre);
  font-size: clamp(22px, 2.4vw, 30px);
  line-height: 0.95;
  text-transform: uppercase;
  margin: 0;
}

/* Variante page dédiée : même carte, mais dépliée sur toute la largeur,
   avec le grand numéro à gauche et le verbatim sourcé. */
.combats-grille--detail { grid-template-columns: 1fr; gap: 16px; }
.combat--detail {
  display: grid;
  grid-template-columns: 130px 1fr;
  gap: 36px;
  align-items: start;
  padding: 40px 36px;
}
.combat--detail .combat__num {
  font-size: clamp(56px, 6.5vw, 92px);
  line-height: 0.8;
}
.combat--detail .combat__titre { font-size: clamp(24px, 2.8vw, 36px); margin-bottom: 18px; }
.combat--detail .combat__txt { font-size: 16px; max-width: 62ch; }
.combat__verbatim {
  font-family: var(--machine);
  font-size: 15px; line-height: 1.7;
  color: var(--os);
  border-left: 3px solid var(--jaune);
  padding: 2px 0 2px 18px;
  margin: 0 0 22px;
  max-width: 60ch;
}
.combat__verbatim cite {
  display: block;
  font-style: normal;
  font-size: 11.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--os-45);
  margin-top: 10px;
}
.combat__txt { color: var(--os-70); margin: 0 0 24px; font-size: 15px; line-height: 1.55; }
.combat__demande {
  display: inline-flex; align-items: center; gap: 10px;
  font-family: var(--machine);
  font-size: 11px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase;
  background: var(--jaune); color: var(--encre);
  padding: 7px 13px;
}

/* Le contradictoire : ce qu'on lui oppose */
.contre {
  background: var(--carton);
  border: 2px solid var(--os-12);
  border-left: 6px solid var(--rouge);
  padding: 26px 30px;
  margin-bottom: 14px;
}
.contre__qui {
  font-family: var(--machine);
  font-size: 11px; font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--rouge-clair); margin: 0 0 10px;
}
.contre p { margin: 0; color: var(--os-70); font-size: 15.5px; }
.contre p + p { margin-top: 10px; }

/* -----------------------------------------------
   11. MÉDIAS
   ----------------------------------------------- */
.medias__bandeau {
  overflow: hidden;
  padding: 30px 0;
  border-top: 2px solid var(--os-12);
  border-bottom: 2px solid var(--os-12);
  margin-bottom: 52px;
  position: relative;
  width: 100%;
}
.medias__bandeau::before,
.medias__bandeau::after {
  content: '';
  position: absolute;
  top: 0; bottom: 0;
  width: 80px;
  z-index: 2;
  pointer-events: none;
}
.medias__bandeau::before {
  left: 0;
  background: linear-gradient(to right, var(--carton, #15171A), transparent);
}
.medias__bandeau::after {
  right: 0;
  background: linear-gradient(to left, var(--carton, #15171A), transparent);
}
.medias__track {
  display: flex;
  width: max-content;
  animation: scrollMedias 20s linear infinite;
}
.medias__bandeau:hover .medias__track {
  animation-play-state: paused;
}
.medias__slide {
  display: flex;
  align-items: center;
  gap: 60px;
  padding-right: 60px;
}
/* Les rédactions en typo plutôt qu'en logos.
   Les six fichiers fournis avaient des fonds opaques de noirs différents,
   donc six rectangles collés sur la page. Et reprendre un logo de presse
   laisse entendre une caution que ces rédactions n'ont pas donnée.
   Le nom en Anton règle les deux problèmes d'un coup. */
.media-logo {
  font-family: var(--titre);
  font-size: clamp(20px, 2.2vw, 30px);
  text-transform: uppercase;
  letter-spacing: 0.01em;
  color: var(--os-25);
  white-space: nowrap;
  transition: color 0.3s ease;
}
.media-logo:hover { color: var(--jaune); }
@keyframes scrollMedias {
  0% { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}

/* Les captures de plateau sont du paysage. Dans un cadre 4/5 on en jetait
   plus de la moitié. En 16/9 sur 3 colonnes elles rentrent, et la largeur
   d'affichage reste sous la résolution native des sources. */
.verticales { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.verticale {
  position: relative; aspect-ratio: 16/9;
  background: var(--carton);
  border: 2px solid var(--os-12);
  overflow: hidden;
  display: flex; align-items: flex-end;
  transition: border-color 0.35s, transform 0.35s var(--ease);
}
.verticale::after {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(to top, rgba(0,0,0,0.92) 0%, rgba(0,0,0,0.2) 60%, transparent 100%);
  z-index: 1;
  pointer-events: none;
}
.verticale:hover { transform: translateY(-5px); border-color: var(--jaune); }
.verticale--muette { cursor: default; }
.verticale--muette:hover { transform: none; border-color: var(--os-12); }
.verticale--muette:hover img { filter: brightness(0.85); transform: none; }
.verticale img {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center;
  filter: brightness(0.85);
  transition: filter 0.4s, transform 0.4s;
}
.verticale:hover img { filter: brightness(1); transform: scale(1.04); }
.verticale__txt {
  position: relative; z-index: 2; padding: 18px;
  font-family: var(--titre); font-size: 17px; text-transform: uppercase; line-height: 1.1;
  text-shadow: 0 2px 18px rgba(0,0,0,0.95);
}
.verticale__src {
  display: block;
  font-family: var(--machine);
  font-size: 10.5px; font-weight: 700; letter-spacing: 0.16em;
  color: var(--jaune); margin-top: 6px;
}

/* -----------------------------------------------
   12. NEWSLETTER + FOOTER
   ----------------------------------------------- */
.news {
  background:
    repeating-linear-gradient(
      -45deg,
      rgba(255, 255, 255, 0.06),
      rgba(255, 255, 255, 0.06) 16px,
      transparent 16px,
      transparent 32px
    ),
    var(--encre);
  color: var(--os);
  text-align: center;
  position: relative;
  border-top: 3px solid var(--jaune);
  border-bottom: 3px solid var(--jaune);
}
.news .titre { color: var(--jaune); }
.news .lead { color: var(--os-70); margin: 0 auto; }
.news__form { display: flex; gap: 12px; max-width: 520px; margin: 28px auto 0; }
.news__form input {
  flex: 1; background: var(--carton); border: 2px solid var(--os-12); color: var(--os);
  padding: 16px 18px; font-family: var(--corps);
}
.news__form input:focus { outline: none; border-color: var(--jaune); }
.news__form .btn { background: var(--jaune); color: var(--encre); border-color: var(--jaune); }
.news__form .btn:hover { background: #d4cc00; border-color: #d4cc00; box-shadow: 5px 5px 0 rgba(240,228,0,0.25); }

.footer { background: var(--encre); border-top: 2px solid var(--jaune); padding: 60px 0 36px; }
.footer__haut { display: flex; justify-content: space-between; align-items: flex-start; gap: 48px; flex-wrap: wrap; margin-bottom: 44px; }
.footer__marque { font-family: var(--titre); font-size: 46px; text-transform: uppercase; line-height: 0.9; }
.footer__marque span { color: var(--jaune); }
.footer__cols { display: flex; gap: 66px; flex-wrap: wrap; }
.footer__col h4 {
  font-family: var(--machine);
  font-size: 11px; letter-spacing: 0.2em; text-transform: uppercase;
  color: var(--jaune); margin: 0 0 14px; font-weight: 700;
}
.footer__col a { display: block; font-size: 14px; color: var(--os-45); margin-bottom: 9px; transition: color 0.25s; }
.footer__col a:hover { color: var(--jaune); }
.footer__bas {
  display: flex; justify-content: space-between; gap: 20px; flex-wrap: wrap;
  padding-top: 24px; border-top: 1px solid var(--os-12);
  font-family: var(--machine); font-size: 11px; letter-spacing: 0.08em; color: var(--os-25);
}

/* -----------------------------------------------
   13. MARQUEUR MAQUETTE (à retirer en prod)
   ----------------------------------------------- */
.aremplir {
  position: absolute; left: 10px; bottom: 10px; z-index: 5;
  font-family: var(--machine);
  font-size: 9px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase;
  background: var(--rouge); color: var(--os);
  padding: 5px 9px;
}

/* -----------------------------------------------
   14. RESPONSIVE
   ----------------------------------------------- */
@media (max-width: 1080px) {
  .prises { grid-template-columns: repeat(2, 1fr); }
  .verticales { grid-template-columns: repeat(2, 1fr); }
  .livre__grille { gap: 48px; }
}

@media (max-width: 860px) {
  :root { --pad-y: var(--pad-y-mob); }
  .wrap { padding: 0 20px; }

  /* Même gouttière que .wrap : logo et burger alignés sur le contenu */
  .nav { padding: 18px 20px; }
  .nav.colle { padding: 14px 20px; }

  .nav__liens {
    position: fixed; inset: 0;
    background: rgba(8,9,10,0.985);
    backdrop-filter: blur(18px);
    flex-direction: column; justify-content: center; gap: 28px;
    transform: translateX(100%);
    transition: transform 0.42s var(--ease);
  }
  .nav.ouvert .nav__liens { transform: none; }
  .nav__liens a { font-size: 15px; }
  .nav__burger { display: block; position: relative; z-index: 2; }

  .hero { grid-template-columns: 1fr; min-height: auto; }
  .hero__col--txt { padding: 100px 20px 40px; }
  .hero__col--img { height: 60vh; order: -1; }
  .hero__tampon { display: none; }

  .chiffres__grille { grid-template-columns: repeat(2, 1fr); }
  .chiffre { padding: 26px 12px; border-bottom: 2px solid rgba(8,9,10,0.18); }
  .chiffre:nth-child(2n) { border-right: 0; }
  .chiffre:last-child { grid-column: 1 / -1; border-right: 0; border-bottom: 0; }

  .map-path-svg { display: none; }
  .acte {
    grid-template-columns: 1fr;
    max-width: 100%;
    margin-bottom: 40px;
  }
  .acte:nth-child(even) { grid-template-columns: 1fr; }
  .acte:nth-child(even) .acte__media { order: 0; }
  .acte__media img { aspect-ratio: 16/9; }
  /* Le glissement latéral suppose une carte à 72 % de large. En pleine
     largeur, la carte arriverait de hors champ : verticale seulement. */
  .acte:nth-child(odd).reveal,
  .acte:nth-child(even).reveal { transform: translateY(30px) scale(0.97); }

  .livre__grille { grid-template-columns: 1fr; gap: 40px; }
  .livre__couv { max-width: 250px; }
  .livre__couv img { box-shadow: 0 10px 25px rgba(0,0,0,0.6); }
  .livre__couv:hover img { transform: none; box-shadow: 0 10px 25px rgba(0,0,0,0.6); }
  .livre::before { font-size: 60vw; }

  /* Le nowrap du compteur tient sur 446 px : sous un écran de cette
     largeur il débordait, coupait sa propre phrase et élargissait le
     bloc conteneur, ce qui poussait le burger hors de l'écran. */
  .chasse__compteur { white-space: normal; }

  .prises { grid-template-columns: 1fr; }
  .prise { min-height: 0; }

  .combats-grille { grid-template-columns: 1fr; gap: 16px; }
  .combat--detail { grid-template-columns: 1fr; gap: 10px; padding: 28px 22px; }
  .combat--detail .combat__num { font-size: 52px; }

  .verticales { grid-template-columns: 1fr; gap: 12px; }
  .news__form { flex-direction: column; }
  .footer__cols { gap: 36px; }
  .footer__marque { font-size: 36px; }
}