/* ============================================================
   ACCUEIL — la page qui doit convaincre.

   Thèse : le doute est assumé. La géométrie du terrain (ligne
   médiane, rond central) n'apparaît qu'en filets d'un pixel,
   jamais en pelouse verte.
   ============================================================ */

/* ================= le héros ================= */

/* LE PREMIER ÉCRAN SE MESURE EN PIXELS, PAS EN GOÛT.

   Les sections du site respirent à --s8, soit 88 pixels en haut et en
   bas sur un écran ordinaire. C'est la bonne valeur pour une section de
   texte qu'on atteint en défilant. Elle est fausse ici, et la mesure le
   dit : avec elle, le bouton « Créer mon compte » commençait à 710
   pixels du haut sur un écran de portable de 720 — c'est-à-dire hors de
   vue. Une page dont le seul but est de faire créer un compte ne peut
   pas cacher le bouton qui le crée.

   On resserre donc le haut, et le haut seulement : le bas garde son air,
   puisque c'est lui qui sépare le premier écran de la suite. */
.hero {
  position: relative;
  overflow: hidden;
  padding-top: clamp(1.75rem, 4vw, 3rem);
  padding-bottom: var(--s7);
}

/* la ligne médiane : les deux camps, séparés */
.hero .pitch { position: absolute; inset: 0; pointer-events: none; }

.hero .pitch::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 0;
  bottom: 0;
  width: 1px;
  background: var(--line);
}

.hero .circle {
  position: absolute;
  left: 50%;
  top: 8.5rem;
  width: min(30rem, 76vw);
  aspect-ratio: 1;
  transform: translateX(-50%);
  border: 1px solid var(--line);
  border-radius: 50%;
}

@media (max-width: 44rem) {
  .hero .pitch::before, .hero .circle { display: none; }
}

.hero-in { position: relative; max-width: var(--page); margin: 0 auto; }

.hero-head {
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--s4);
}
.hero-head .lede { max-width: 42ch; }

/* le verdict, posé dans le rond central */
.demo {
  margin-top: clamp(1.75rem, 4.5vw, 2.75rem);
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: clamp(0.75rem, 3vw, 2rem);
}

.side { display: flex; flex-direction: column; gap: var(--s1); }
.side.home { text-align: right; align-items: flex-end; }
.side.away { text-align: left; align-items: flex-start; }

/* nom de club : composé resserré, comme partout ailleurs sur le site */
.side .club {
  font-family: var(--display);
  font-stretch: var(--w-serre);
  font-weight: 650;
  font-size: var(--t-xl);
  line-height: 1.05;
  letter-spacing: -0.025em;
}
.side .meta { font-size: var(--t-sm); color: var(--ink-soft); }

/* ---- l'écusson, au-dessus du nom ----

   Dans la démonstration du haut de page, le blason est posé au-dessus du
   nom et non à côté : les deux colonnes sont étroites et déjà alignées
   sur les bords extérieurs, un écusson en ligne les ferait déborder vers
   le centre, là où se trouve le pourcentage.

   La hauteur est réservée même sans image, pour que le nom du club ne
   remonte pas d'un cran au moment où le blason arrive. */
.side-blason {
  display: block;
  height: clamp(2rem, 5vw, 2.75rem);
  margin-bottom: var(--s1);
}

.side-blason .ecusson-hero {
  width: clamp(2rem, 5vw, 2.75rem);
  height: clamp(2rem, 5vw, 2.75rem);
  object-fit: contain;
  vertical-align: top;
}
.side.home .club { color: var(--a); }
.side.away .club { color: var(--b); }

.verdict { text-align: center; display: flex; flex-direction: column; align-items: center; gap: var(--s1); }

.verdict .pct {
  font-family: var(--mono);
  font-variant-numeric: tabular-nums;
  line-height: 0.88;
  letter-spacing: -0.055em;
  color: var(--a);
}
.verdict .pct span { font-size: 0.42em; }
.verdict.away .pct { color: var(--b); }
.verdict.draw .pct { color: var(--n); }

.verdict .issue { font-size: var(--t-md); color: var(--ink-soft); max-width: 12rem; line-height: 1.25; }

.demo-note { margin-top: var(--s5); text-align: center; font-size: var(--t-md); color: var(--ink-faint); }

.barline {
  margin: var(--s4) auto 0;
  max-width: 42rem;
  display: flex;
  height: 0.7rem;
  border-radius: var(--r-pill);
  overflow: hidden;
  background: var(--surface-alt);
}
.barline > i { display: block; }
.barline .sa { background: var(--a); }
.barline .sn { background: var(--n); }
.barline .sb { background: var(--b); }

.readout {
  margin: 0.7rem auto 0;
  max-width: 42rem;
  display: flex;
  justify-content: space-between;
  font-size: var(--t-sm);
  color: var(--ink-soft);
  gap: var(--s4);
}
.readout b { font-family: var(--mono); font-weight: 600; }

/* Deux boutons côte à côte, qui passent l'un sous l'autre quand l'écran
   est trop étroit — sur un téléphone, deux pilules serrées se cliquent de
   travers.

   « center » et non l'alignement par défaut : sans lui, le bouton
   secondaire s'étirerait à la hauteur du grand et les deux se
   ressembleraient. On veut exactement le contraire — un bouton qu'on
   voit, et une sortie de secours pour ceux qui ont déjà un compte. */
.hero-cta {
  margin-top: var(--s6);
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--s3) var(--s4);
}

/* LES STYLES DES « PORTES » ONT ÉTÉ RETIRÉS D'ICI en même temps que le
   bandeau lui-même dans index.html : six pastilles vers des pages qui
   demandent un compte, posées juste sous le bouton qui propose d'en
   créer un. Le raisonnement complet est écrit à l'endroit qu'elles
   occupaient dans la page. */

/* La ligne qui suit les deux boutons. Volontairement discrète : c'est une
   objection qu'on retire, pas un argument qu'on crie. À la taille d'un
   argument, elle donnerait l'impression qu'on insiste — donc qu'il y a un
   piège quelque part.

   Un seul mot y est mis en avant, « gratuit » : c'est la première chose
   que cherche l'œil en arrivant sous un bouton d'inscription, et la lire
   d'un coup évite d'avoir à lire la phrase entière pour se rassurer. */
.hero-fine {
  margin-top: var(--s4);
  text-align: center;
  font-size: var(--t-md);
  color: var(--ink-faint);
  max-width: 44ch;
  margin-left: auto;
  margin-right: auto;
  line-height: 1.55;
}

.hero-fine strong { color: var(--ink-soft); font-weight: 650; }

/* ---- la relance sous les deux colonnes ----

   Alignée à gauche comme la colonne de texte qu'elle prolonge, et non
   centrée : centrer un bouton au milieu d'une page alignée à gauche le
   ferait flotter entre les deux colonnes, sans qu'on sache laquelle il
   conclut. */
.relance {
  margin-top: var(--s6);
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--s3) var(--s4);
}

.relance-fine { font-size: var(--t-md); color: var(--ink-faint); }

/* Le dernier paragraphe de la colonne « Avec votre compte ». Il était
   réglé en style directement dans la page ; il vit ici, comme le reste. */
.paid-fin { margin-top: var(--s3); font-size: var(--t-md); }

/* ================= animation ================= */

/* Le seul moment animé au chargement : le verdict qui se pose. */
.anim { animation: settle 0.5s cubic-bezier(0.16, 1, 0.3, 1) both; }
@keyframes settle {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: none; }
}

.wipe { animation: wipe 0.6s cubic-bezier(0.16, 1, 0.3, 1) both; }
@keyframes wipe {
  from { clip-path: inset(0 100% 0 0); }
  to   { clip-path: inset(0 0 0 0); }
}

/* Au défilement, seul le TEXTE bouge : les titres montent depuis
   sous une ligne invisible, les paragraphes arrivent en fondu. */

.mask { display: block; overflow: hidden; padding-bottom: 0.08em; }

.mask > span {
  display: block;
  transform: translateY(110%);
  transition: transform 0.85s cubic-bezier(0.16, 1, 0.3, 1);
}

[data-scene].in .mask > span { transform: none; }

.up {
  opacity: 0;
  transform: translateY(14px);
  transition: opacity 0.7s cubic-bezier(0.16, 1, 0.3, 1),
              transform 0.7s cubic-bezier(0.16, 1, 0.3, 1);
}

[data-scene].in .up { opacity: 1; transform: none; }

[data-scene].in .up[data-d="1"] { transition-delay: 0.14s; }
[data-scene].in .up[data-d="2"] { transition-delay: 0.24s; }
[data-scene].in .up[data-d="3"] { transition-delay: 0.34s; }
[data-scene].in .up[data-d="4"] { transition-delay: 0.44s; }

@media (prefers-reduced-motion: reduce) {
  .anim, .wipe { animation: none !important; }
  .mask > span, .up {
    transform: none !important;
    opacity: 1 !important;
    transition: none !important;
  }
}

/* ================= deux camps ================= */

.camps { display: grid; gap: 0; margin-top: var(--s6); border-top: 1px solid var(--line); }

@media (min-width: 46rem) {
  .camps { grid-template-columns: 1fr 1fr; }
  .camps > div + div { border-left: 1px solid var(--line); }
}

.camps > div {
  padding: 1.6rem clamp(0rem, 3vw, 2rem) 0;
  display: flex;
  flex-direction: column;
  gap: var(--s2);
}

@media (max-width: 46rem) {
  .camps > div + div { border-top: 1px solid var(--line); padding-top: var(--s5); }
}

.camps p { color: var(--ink-soft); }

.camps .who { font-size: var(--t-sm); font-weight: 600; color: var(--ink-faint); }
.camps .them .who { color: var(--warn); }
.camps .us .who { color: var(--a); }

.limit .who { font-size: var(--t-sm); font-weight: 600; }
.limit .free .who { color: var(--ink-faint); }
.limit .paid .who { color: var(--a); }

.limit ul { margin: 0; padding-left: var(--s4); color: var(--ink-soft); font-size: var(--t-md); }
.limit li { margin-bottom: var(--s1); }
.limit li:last-child { margin-bottom: 0; }

/* ================= le récit du calcul =================
   Les numéros sont légitimes ici : c'est une vraie séquence,
   chaque étape consomme le résultat de la précédente. */

.scenes { list-style: none; margin: var(--s7) 0 0; padding: 0; display: flex; flex-direction: column; }

.scene {
  display: grid;
  grid-template-columns: 3.2rem 1fr;
  gap: var(--s5);
  align-items: start;
  padding: var(--s6) 0;
  border-top: 1px solid var(--line);
}

.scene-n {
  font-family: var(--mono);
  font-variant-numeric: tabular-nums;
  font-size: var(--t-lg);
  color: var(--a);
  padding-top: var(--s1);
}

.scene-txt { display: flex; flex-direction: column; gap: var(--s2); max-width: 56ch; }
.scene-txt p { color: var(--ink-soft); }

/* la sortie de l'étape : un résultat, pas une phrase */
.scene-txt .out {
  font-family: var(--mono);
  font-size: var(--t-md);
  color: var(--ink);
  border-left: 2px solid var(--a);
  padding-left: var(--s3);
  margin-top: var(--s1);
}

@media (max-width: 34rem) {
  .scene { grid-template-columns: 1fr; gap: var(--s2); }
}

/* ================= le carnet (signature) ================= */

.carnet {
  background: var(--surface);
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}

.record {
  margin-top: var(--s6);
  display: flex;
  gap: var(--s1);
  align-items: flex-end;
  overflow-x: auto;
  padding-bottom: var(--s2);
}

.tick {
  flex: 1 0 2.6rem;
  min-width: 2.6rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--s1);
}

/* colonnes du carnet : sommet arrondi, base droite — elles reposent sur une
   ligne de sol commune, un bas arrondi les ferait flotter */
.tick .col {
  width: 100%;
  border-radius: var(--r-md) var(--r-md) 0 0;
  background: var(--a-soft);
  position: relative;
}
.tick.miss .col { background: var(--warn-soft); }

.tick .col i {
  position: absolute;
  inset: auto 0 0 0;
  display: block;
  background: var(--a);
  border-radius: var(--r-md) var(--r-md) 0 0;
}
.tick.miss .col i { background: var(--warn); }

.tick .lbl { font-family: var(--mono); font-size: var(--t-xs); color: var(--ink-faint); }
.tick.miss .lbl { color: var(--warn); }

/* la mention qui dit que ces barres sont un exemple : discrète, mais pas cachée */
.record-note {
  margin-top: var(--s3);
  font-size: var(--t-sm);
  color: var(--ink-faint);
  max-width: 60ch;
  line-height: 1.55;
  border-left: 2px solid var(--warn);
  padding-left: var(--s3);
}

.scores { display: grid; gap: var(--s5) var(--s6); margin-top: var(--s6); }
@media (min-width: 40rem) { .scores { grid-template-columns: repeat(3, 1fr); } }

.score .v {
  font-family: var(--mono);
  font-variant-numeric: tabular-nums;
  font-size: clamp(2rem, 5vw, 2.8rem);
  line-height: 1;
  letter-spacing: -0.03em;
}
/* Le signe pour cent du grand chiffre : plus petit, collé, et dans la
   police du texte. En chasse fixe il vaut la largeur d un chiffre, et
   « 47,5 % » se lisait avec un trou au milieu. */
.score .v span { font-size: 0.5em; font-family: var(--body); margin-left: 0.1em; }

.score .k { font-size: var(--t-md); color: var(--ink-soft); margin-top: var(--s1); }

/* ================= couverture ================= */

/* ================= le ruban de couverture =================

   Un tableau d'affichage de stade : le nom du championnat, ses clubs, le
   championnat suivant. Il remplace neuf pastilles grises qui disaient la
   même chose sans la faire sentir.

   LE FONDU DES BORDS. Le ruban est plus large que la page. Coupé net, il
   donnerait l'impression d'un débordement mal réglé ; effacé aux deux
   bouts, il donne celle d'un mouvement qui vient de loin et continue.
   ================= */

.cv-bande {
  margin-top: var(--s5);
  overflow: hidden;
  /* -webkit- en second : Safari ne connaît toujours pas la propriété nue. */
  mask-image: linear-gradient(to right, transparent, #000 6rem,
                              #000 calc(100% - 6rem), transparent);
  -webkit-mask-image: linear-gradient(to right, transparent, #000 6rem,
                                      #000 calc(100% - 6rem), transparent);
}

.cv-piste {
  display: flex;
  align-items: center;
  gap: var(--s4);
  width: max-content;
  animation: cv-defile 90s linear infinite;
}

/* Le ruban s'arrête quand on le regarde. Un mouvement qu'on ne peut pas
   arrêter empêche de lire ce qui passe, et transforme une information en
   décor. */
.cv-bande:hover .cv-piste,
.cv-bande:focus-within .cv-piste { animation-play-state: paused; }

@keyframes cv-defile {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

/* le nom du championnat, qui ouvre chacun de ses clubs */
.cv-lg {
  flex: none;
  font-family: var(--display);
  font-weight: 700;
  font-stretch: var(--w-serre);
  font-size: var(--t-sm);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-faint);
  padding-left: var(--s4);
  border-left: 1px solid var(--line);
  margin-left: var(--s2);
}

/* ---- les écussons, dans l'ombre ----
   La direction du site est nocturne : un stade éclairé aux projecteurs.
   Les blasons sont donc éteints, et le curseur en allume un à la fois. */
.cv-club {
  flex: none;
  display: inline-flex;
  opacity: 0.4;
  filter: grayscale(1);
  transition: opacity 0.25s ease, filter 0.25s ease;
}

.cv-club .ecusson-m { width: 2rem; height: 2rem; }

/* Le projecteur : dès qu'on entre dans le ruban, tout s'éteint un peu
   plus, et seul l'écusson survolé s'allume. */
.cv-bande:hover .cv-club { opacity: 0.18; }
.cv-bande .cv-club:hover { opacity: 1; filter: none; }

/* Sans animation demandée, le ruban devient une grille qui tient sur
   place : le contenu reste accessible, il ne bouge simplement plus. Le
   second passage disparaît, sinon chaque club s'afficherait deux fois. */
@media (prefers-reduced-motion: reduce) {
  .cv-bande { mask-image: none; -webkit-mask-image: none; }

  .cv-piste {
    animation: none;
    width: auto;
    flex-wrap: wrap;
    gap: var(--s3);
    max-height: 9rem;
    overflow: hidden;
  }

  .cv-club { opacity: 0.75; filter: none; }
  .cv-bande:hover .cv-club { opacity: 0.75; }
}

/* ================= garanties ================= */

/* une grille de filets, pas des cartes : ce sont des engagements,
   pas des arguments de vente */
.trust { margin-top: var(--s6); display: grid; gap: 0; border-top: 1px solid var(--line); }

@media (min-width: 34rem) { .trust { grid-template-columns: 1fr 1fr; } }
@media (min-width: 58rem) { .trust { grid-template-columns: repeat(4, 1fr); } }

.trust > div {
  padding: 1.4rem clamp(0rem, 2.5vw, 1.6rem);
  border-bottom: 1px solid var(--line);
  display: flex;
  flex-direction: column;
  gap: var(--s2);
}

@media (min-width: 34rem) {
  .trust > div:nth-child(odd) { padding-left: 0; }
}

@media (min-width: 58rem) {
  .trust > div { border-left: 1px solid var(--line); padding-left: var(--s5); }
  .trust > div:nth-child(odd) { padding-left: var(--s5); }
  .trust > div:first-child { border-left: none; padding-left: 0; }
}

.trust h3 { font-size: var(--t-base); }
.trust p { font-size: var(--t-md); color: var(--ink-soft); }

/* ================= essai ================= */

.try { margin-top: var(--s7); display: flex; flex-direction: column; align-items: flex-start; gap: var(--s4); }
.try .fine { font-size: var(--t-md); color: var(--ink-faint); }

/* ================= questions ================= */

.qa { margin-top: var(--s6); display: flex; flex-direction: column; }

.qa details { border-bottom: 1px solid var(--line); }
.qa details:first-child { border-top: 1px solid var(--line); }

.qa summary {
  cursor: pointer;
  padding: var(--s4) var(--s1);
  font-weight: 600;
  font-size: var(--t-base);
  list-style: none;
  display: flex;
  justify-content: space-between;
  gap: var(--s4);
  align-items: baseline;
}
.qa summary::-webkit-details-marker { display: none; }
.qa summary::after { content: "+"; font-family: var(--mono); color: var(--a); }
.qa details[open] summary::after { content: "−"; }

.qa .ans { padding: 0 var(--s1) var(--s4); color: var(--ink-soft); font-size: var(--t-md); max-width: 62ch; }

/* une réponse peut demander plusieurs paragraphes : on les espace au lieu de
   les coller, sinon l'argument devient un bloc qu'on saute */
.qa .ans p + p { margin-top: var(--s3); }
.qa .ans strong { color: var(--ink); font-weight: 650; }

/* ============================================================
   LES MATCHS À ANALYSER — la porte d'entrée de la page d'accueil.

   POURQUOI DES CARTES, ET PAS UNE LISTE DE LIGNES.
   Une ligne « PSG vs Nantes · 21h00 » se lit, mais ne se clique pas :
   rien n'indique qu'il y a quelque chose derrière. La carte, elle, est
   une surface — on voit qu'on peut appuyer dessus, et c'est le seul
   geste qu'on attend du visiteur sur cette page.

   C'est aussi la MÊME carte que le calendrier des coupes : deux équipes
   l'une sous l'autre, écusson à gauche. Un match a une seule forme sur
   tout le site, quelle que soit la page où on le croise.
   ============================================================ */

#prochains {
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* la section est pleine largeur pour son trait de séparation ; son
   contenu, lui, s'aligne sur la colonne de texte du reste de la page */
#prochains > * {
  width: 100%;
  max-width: var(--page);
}

.pm-tete h2 {
  font-family: var(--display);
  font-size: var(--t-xl);
  font-weight: 700;
  font-stretch: var(--w-serre);
  letter-spacing: -0.02em;
}

.pm-lede {
  color: var(--ink-soft);
  font-size: var(--t-base);
  line-height: 1.6;
  max-width: 56ch;
  margin-top: var(--s3);
}

/* ---- la journée ---- */

.pm-jour {
  font-size: var(--t-xs);
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-faint);
  padding: var(--s6) 0 var(--s3);
}

/* « En ce moment » prend l'ambre : c'est la seule ligne de la section qui
   parle du présent, tout le reste est une annonce. */
.pm-jour-live { color: var(--a); }

.pm-grille {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr));
  gap: var(--s3);
}

/* ---- une affiche ---- */

.pm-carte {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  padding: var(--s4);
  text-decoration: none;
  color: inherit;
  transition: border-color 0.15s ease, transform 0.15s ease;
}

/* Le seul mouvement de la section, et il ne se déclenche qu'au survol :
   il dit « ceci s'ouvre », ce qu'aucun mot ne dirait aussi vite. */
.pm-carte:hover {
  border-color: var(--a);
  transform: translateY(-2px);
}

@media (prefers-reduced-motion: reduce) {
  .pm-carte { transition: border-color 0.15s ease; }
  .pm-carte:hover { transform: none; }
}

.pm-carte.vivant { border-color: var(--a); }

.pm-eq {
  display: flex;
  align-items: center;
  gap: var(--s2);
  font-size: var(--t-md);
  color: var(--ink);
  min-width: 0;
}

/* « Borussia Mönchengladbach » ne tient dans aucune carte : il se coupe
   proprement plutôt que d'élargir la colonne pour lui tout seul. */
.pm-nom {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.pm-b { flex: none; font-weight: 650; }

.pm-pied {
  display: flex;
  align-items: baseline;
  gap: var(--s2);
  font-size: var(--t-xs);
  color: var(--ink-faint);
  padding-top: var(--s2);
}

.pm-h { color: var(--ink-soft); }

/* la minute d'un match en cours : le seul chiffre qui bouge tout seul */
.pm-live { color: var(--a); font-weight: 700; }

.pm-plus {
  display: flex;
  justify-content: center;
  padding-top: var(--s5);
}

.pm-note {
  font-size: var(--t-xs);
  color: var(--ink-faint);
  line-height: 1.5;
  max-width: 62ch;
  padding-top: var(--s5);
}