:root {
  --noir: #0e0e10;
  --jaune: #ffd400;
  --rouge: #e63027;
  --creme: #f4efe4;
  --gris: #6b6862;
  --titre: Anton, Impact, "Arial Narrow", sans-serif;
  --ressort: cubic-bezier(.2, 1.4, .4, 1);
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--noir);
  color: var(--noir);
  font: 17px/1.5 Inter, system-ui, -apple-system, "Segoe UI", sans-serif;
  -webkit-text-size-adjust: 100%;
  overflow-x: hidden;
}

a { color: inherit; }

.col { max-width: 560px; margin: 0 auto; padding: 0 20px; }

h1, h2 {
  font-family: var(--titre);
  font-weight: 400;
  text-transform: uppercase;
  line-height: .95;
  margin: 0;
}
h2 { font-size: clamp(2.6rem, 13vw, 4rem); }

.kicker {
  font-weight: 800; font-size: .78rem; text-transform: uppercase;
  letter-spacing: .1em; margin: 0 0 .8rem;
}

small { font-size: .75rem; opacity: .7; }
small a { text-underline-offset: 2px; }

/* Barre de lecture */
.progression { position: fixed; inset: 0 0 auto; height: 4px; z-index: 10; }
.progression span {
  display: block; height: 100%; background: var(--jaune);
  transform-origin: left; transform: scaleX(0);
}

/* Écran d'accueil */
.hero {
  min-height: 100svh;
  background: var(--noir);
  color: var(--creme);
  display: flex; flex-direction: column; justify-content: center;
  padding: 72px 0 80px;
  position: relative; overflow: hidden;
}
/* Halo rouge qui dérive lentement derrière le titre. */
.hero::before {
  content: ""; position: absolute; inset: -30%;
  background: radial-gradient(35% 30% at 75% 20%, rgba(230, 48, 39, .5), transparent 70%);
  animation: halo 10s ease-in-out infinite;
  pointer-events: none;
}
.hero > * { position: relative; }
@keyframes halo {
  0%, 100% { transform: translate(0, 0) scale(1); }
  50% { transform: translate(-12%, 10%) scale(1.25); }
}

.pastille {
  display: inline-block; background: var(--jaune); color: var(--noir);
  font-weight: 800; font-size: .85rem; padding: 6px 12px; border-radius: 6px;
  margin: 0 0 1.2rem;
  animation: pop .5s .1s var(--ressort) both, balance 3s 1.2s ease-in-out infinite;
}
@keyframes pop { from { opacity: 0; transform: scale(.4) rotate(-12deg); } to { opacity: 1; transform: rotate(-2deg); } }
@keyframes balance { 0%, 100% { transform: rotate(-2deg); } 50% { transform: rotate(2deg) scale(1.04); } }

.hero h1 { font-size: clamp(4.2rem, 24vw, 7.5rem); color: var(--creme); }
.hero h1 .mot {
  display: inline-block;
  animation: mot .7s var(--ressort) both;
  animation-delay: calc(var(--i) * 110ms + 250ms);
}
@keyframes mot { from { opacity: 0; transform: translateY(70%) rotate(6deg); } to { opacity: 1; transform: none; } }

.accroche {
  font-size: 1.2rem; margin: 1.2rem 0 0; max-width: 22em; color: #d8d3c8;
  animation: monte .7s 1.1s ease both;
}
@keyframes monte { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: none; } }

.go {
  align-self: center; margin-top: 48px;
  background: var(--jaune); color: var(--noir); text-decoration: none;
  font-weight: 800; font-size: 1.1rem; padding: 16px 28px; border-radius: 999px;
  animation: monte .6s 1.4s ease both, rebond 1.8s 2s ease-in-out infinite, aura 1.8s 2s infinite;
}
@keyframes rebond { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(8px); } }
@keyframes aura {
  0% { box-shadow: 0 0 0 0 rgba(255, 212, 0, .55); }
  70%, 100% { box-shadow: 0 0 0 18px rgba(255, 212, 0, 0); }
}

/* Bandeau posé à cheval sur la limite noir / crème. Il fait 72px de haut et penche de 2°,
   ce qui suffit à couvrir la limite sur toute la largeur jusqu'à ~2000px d'écran.
   La jonction est une vraie boîte transparente de 160px qui chevauche les deux sections :
   avec une hauteur nulle, Safari sur iPhone figeait l'animation du bandeau. */
.jonction {
  position: relative; z-index: 3; height: 160px; margin: -80px 0;
  overflow: hidden; pointer-events: none;
}
.bandeau {
  position: absolute; top: 50%; left: -10%; width: 120%;
  height: 72px; display: flex; align-items: center; overflow: hidden;
  background: var(--jaune);
  transform: translateY(-50%) rotate(-2deg);
  box-shadow: 0 6px 0 rgba(0, 0, 0, .12);
}
.defile {
  display: flex; flex: none; width: max-content;
  will-change: transform;
}
/* Lancé par app.js une fois le texte et la police en place : sinon Safari (iPhone)
   calcule le déplacement sur un bandeau encore vide et ne bouge plus. */
.defile.lance {
  -webkit-animation: defile 16s linear infinite;
  animation: defile 16s linear infinite;
}
.defile span {
  font-family: var(--titre); text-transform: uppercase; font-size: 1.7rem;
  white-space: nowrap; padding-right: .3em;
}
@keyframes defile { from { transform: translate3d(0, 0, 0); } to { transform: translate3d(-50%, 0, 0); } }
@-webkit-keyframes defile { from { -webkit-transform: translate3d(0, 0, 0); } to { -webkit-transform: translate3d(-50%, 0, 0); } }

/* Procès */
.proces { background: var(--creme); padding: 96px 0 56px; position: relative; overflow: hidden; }
.proces .kicker { color: var(--rouge); }
.tampon {
  font-family: var(--titre); text-transform: uppercase; font-size: 2.6rem;
  color: var(--rouge); border: 5px solid var(--rouge); border-radius: 8px;
  /* Calé à droite et remonté pour mordre sur la dernière ligne du titre. */
  display: block; width: fit-content; padding: 2px 16px; margin: -4.2rem 4px 0 auto;
  position: relative; background: rgba(244, 239, 228, .55);
  transform: rotate(-9deg) scale(3); opacity: 0;
  transition: transform .35s cubic-bezier(.2, 1.6, .4, 1), opacity .2s;
}
.tampon.vu { transform: rotate(-9deg) scale(1); opacity: .92; }
.secousse { animation: secousse .4s ease; }
@keyframes secousse {
  0%, 100% { transform: none; }
  20% { transform: translate(-6px, 3px); }
  40% { transform: translate(5px, -3px); }
  60% { transform: translate(-3px, 2px); }
  80% { transform: translate(2px, -1px); }
}
.intro { font-size: 1.1rem; margin: 1.4rem 0 0; }

.groupe { padding: 40px 0; }
.groupe h3 {
  font-size: .8rem; text-transform: uppercase; letter-spacing: .12em;
  margin: 0 0 1rem; font-weight: 800;
}
.chiffre strong {
  display: block; font-family: var(--titre); font-weight: 400;
  font-size: clamp(3.6rem, 19vw, 5.5rem); line-height: 1;
  font-variant-numeric: tabular-nums;
}
.chiffre span { display: block; font-size: 1.05rem; font-weight: 600; }
.chiffre small { display: block; margin-top: 4px; }

/* La liste arrive de la gauche, le trait du dessus se dessine. */
.groupe-liste .chiffre { padding: 18px 0; position: relative; }
.groupe-liste .chiffre::before {
  content: ""; position: absolute; top: 0; left: 0; right: 0; height: 3px; background: var(--noir);
  transform: scaleX(0); transform-origin: left; transition: transform .8s .1s ease;
}
.groupe-liste .chiffre.vu::before { transform: scaleX(1); }
.groupe-liste .chiffre.reveal { transform: translateX(-50px); }
.groupe-liste .chiffre.reveal.vu { transform: none; }
.groupe-liste .chiffre strong { color: var(--rouge); }

/* La grille surgit case par case. */
.groupe-grille { background: var(--noir); color: var(--creme); }
.groupe-grille h3 { color: var(--jaune); }
.groupe-grille .chiffres { display: grid; grid-template-columns: 1fr 1fr; gap: 24px 16px; }
.groupe-grille .chiffre.reveal { transform: scale(.5); transition-timing-function: var(--ressort); transition-delay: calc(var(--i) * 120ms); }
.groupe-grille .chiffre.reveal.vu { transform: none; }
.groupe-grille .chiffre strong { color: var(--jaune); font-size: clamp(2.8rem, 14vw, 4rem); }
.groupe-grille .chiffre span { font-size: .9rem; font-weight: 400; }

/* Montant détourné */
.montant { background: var(--rouge); color: var(--creme); padding: 40px 0 36px; margin-top: 36px; overflow: hidden; }
.montant .col.reveal { transform: scale(.85); transition-timing-function: var(--ressort); }
.montant .col.reveal.vu { transform: none; }
.montant strong {
  display: block; font-family: var(--titre); font-weight: 400;
  font-size: clamp(8rem, 48vw, 12rem); line-height: 1.05; color: var(--creme);
}
.montant .vu strong { animation: battement 1.6s 1.4s ease-in-out infinite; transform-origin: left center; }
@keyframes battement { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.05); } }
.montant .unite {
  display: block; font-family: var(--titre); text-transform: uppercase;
  font-size: clamp(2rem, 11vw, 3rem); line-height: 1; margin-top: 6px;
}
.montant p { font-size: 1.15rem; font-weight: 600; margin: .8rem 0 0; }
.montant .comparaison {
  display: inline-block; background: var(--jaune); color: var(--noir);
  font-weight: 800; padding: 6px 12px; border-radius: 6px;
  margin: 1rem 0 .8rem;
  animation: balance 2.4s ease-in-out infinite;
}
.montant small { display: block; }

/* Autres condamnés et suite de l'affaire */
.sous-titre {
  font-family: var(--titre); font-weight: 400; text-transform: uppercase;
  font-size: 2rem; line-height: 1; margin: 44px 0 16px;
}
.noms { list-style: none; padding: 0; margin: 0 0 8px; display: flex; flex-wrap: wrap; gap: 8px; }
.noms li {
  background: var(--noir); color: var(--creme); font-weight: 600; font-size: .92rem;
  padding: 7px 12px; border-radius: 999px;
  opacity: 0; transform: scale(.3) rotate(-8deg);
  transition: opacity .35s, transform .5s var(--ressort);
  transition-delay: calc(var(--i) * 70ms);
}
.noms.vu li { opacity: 1; transform: none; }

/* Frise : la ligne se trace, puis chaque étape apparaît. */
.frise { list-style: none; padding: 0; margin: 0; position: relative; }
.frise::before {
  content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 4px; background: var(--rouge);
  transform: scaleY(0); transform-origin: top; transition: transform 1.4s ease;
}
.frise.vu::before { transform: scaleY(1); }
.frise li {
  position: relative; padding: 0 0 24px 26px;
  opacity: 0; transform: translateX(30px);
  transition: opacity .5s, transform .6s ease;
  transition-delay: calc(var(--i) * 350ms + 200ms);
}
.frise.vu li { opacity: 1; transform: none; }
.frise li:last-child { padding-bottom: 0; }
.frise li::before {
  content: ""; position: absolute; left: -8px; top: 4px;
  width: 20px; height: 20px; border-radius: 50%; background: var(--creme); border: 4px solid var(--rouge);
}
.frise time { display: block; font-family: var(--titre); text-transform: uppercase; font-size: 1.5rem; line-height: 1.1; color: var(--rouge); }
.frise p { margin: .3rem 0 0; font-weight: 600; }
.frise small { display: block; margin-top: 4px; }

/* Bardella : carrousel */
.sorties { background: var(--rouge); color: var(--creme); padding: 64px 0 48px; overflow: hidden; }
.sorties h2 { margin-bottom: 1.6rem; }
.fleche-bouge { display: inline-block; animation: glisse 1.2s ease-in-out infinite; }
@keyframes glisse { 0%, 100% { transform: translateX(0); } 50% { transform: translateX(8px); } }
.carrousel {
  display: flex; gap: 14px; overflow-x: auto; scroll-snap-type: x mandatory;
  padding: 0 20px 8px; scrollbar-width: none;
  scroll-padding: 0 20px;
}
.carrousel::-webkit-scrollbar { display: none; }
@media (min-width: 600px) {
  .carrousel { padding-left: calc((100vw - 560px) / 2 + 20px); scroll-padding-left: calc((100vw - 560px) / 2 + 20px); }
}
.slide {
  flex: 0 0 min(84vw, 420px); scroll-snap-align: start;
  background: var(--creme); color: var(--noir); border-radius: 20px;
  padding: 22px; position: relative; min-height: 380px;
  display: flex; flex-direction: column;
  opacity: 0; transform: translateX(80px) rotate(3deg);
}
/* Les cartes arrivent l'une après l'autre, puis toutes glissent un peu pour montrer qu'on peut balayer. */
.carrousel.vu .slide {
  animation:
    carte .7s var(--ressort) both,
    indice 1.1s 1.6s ease-in-out 2;
  animation-delay: calc(var(--i) * 120ms), 1.6s;
}
@keyframes carte { from { opacity: 0; transform: translateX(80px) rotate(3deg); } to { opacity: 1; transform: none; } }
@keyframes indice { 0%, 100% { opacity: 1; transform: none; } 50% { opacity: 1; transform: translateX(-28px); } }
.slide .num {
  font-family: var(--titre); font-size: 4rem; line-height: 1; color: var(--rouge);
  opacity: .18; position: absolute; right: 18px; top: 12px;
}
.slide time { font-size: .78rem; font-weight: 800; text-transform: uppercase; letter-spacing: .1em; color: var(--rouge); }
.slide h3 { font-family: var(--titre); font-weight: 400; text-transform: uppercase; font-size: 1.9rem; line-height: 1; margin: .5rem 0 .8rem; padding-right: 50px; }
.slide p { margin: 0 0 auto; font-size: 1rem; }
.slide small { margin-top: 14px; }
.points { display: flex; justify-content: center; gap: 8px; margin-top: 18px; }
.points span { width: 8px; height: 8px; border-radius: 99px; background: rgba(255, 255, 255, .45); transition: width .25s, background .25s; }
.points span.actif { width: 26px; background: var(--creme); }

/* Liens */
.liens { background: var(--noir); color: var(--creme); padding: 64px 0 24px; }
.liens h2 { color: var(--jaune); margin-bottom: 1.4rem; }
.cta, .lien {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  text-decoration: none; border-radius: 16px; padding: 18px 18px;
}
.cta span, .lien span { display: flex; flex-direction: column; }
.cta em, .lien em { font-style: normal; font-size: .9rem; opacity: .75; }
.cta svg, .lien svg { width: 26px; height: 26px; flex: none; }
.cta { background: var(--jaune); color: var(--noir); font-size: 1.15rem; margin-bottom: 14px; }
.cta.vu { animation: aura 1.8s .8s infinite; }
.cta strong { font-weight: 800; }
.autres { display: grid; gap: 10px; }
.lien { background: #1d1d21; border: 1px solid #2c2c31; }
.lien.reveal { transform: translateX(40px); transition-delay: calc(var(--i) * 120ms); }
.lien.reveal.vu { transform: none; }
.lien:active, .cta:active { transform: scale(.97); }
.partage {
  width: 100%; margin-top: 22px; padding: 16px; border-radius: 999px;
  background: transparent; color: var(--creme); border: 2px solid var(--creme);
  font: 800 1rem Inter, system-ui, sans-serif; cursor: pointer;
  position: relative; overflow: hidden;
}
/* Reflet qui passe sur le bouton de partage. */
.partage::after {
  content: ""; position: absolute; top: 0; bottom: 0; left: -40%; width: 30%;
  background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .35), transparent);
  animation: reflet 2.8s 1s ease-in-out infinite;
}
@keyframes reflet { 0% { left: -40%; } 60%, 100% { left: 120%; } }

footer { background: var(--noir); color: var(--gris); font-size: .75rem; text-align: center; padding: 24px 20px calc(32px + env(safe-area-inset-bottom)); }
.erreur { color: var(--creme); padding: 40px 20px; }

/* Apparition au scroll */
.reveal { opacity: 0; transform: translateY(28px); transition: opacity .6s ease, transform .7s ease; }
.reveal.vu { opacity: 1; transform: none; }
/* Les grands titres se dévoilent de gauche à droite. */
/* (Le masque n'est posé que pendant l'animation : un titre masqué au repos n'est jamais détecté à l'écran.) */
h2.reveal { transform: none; transition: none; }
h2.reveal.vu { animation: devoile .9s cubic-bezier(.7, 0, .2, 1) both; }
@keyframes devoile { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0 -5% 0 0); } }