/* ============================================================
   ANALYSE — habillage propre à la page de l'outil.
   Les couleurs et les polices viennent de socle.css.

   ------------------------------------------------------------
   CE QUI A CHANGÉ, ET POURQUOI.

   La page empilait dix cartes rigoureusement identiques : même
   gris, même titre, même taille. Rien ne disait ce qu'on
   regardait, rien ne disait où commencer. Ce n'était pas une
   question de couleurs — c'était l'absence de hiérarchie.

   La référence assumée est la page « avant-match » d'un quotidien
   sportif : un verdict en tête, puis des encadrés, chacun avec son
   surtitre, son filet, ses chiffres alignés, et son crédit de
   source en bas. socle.css revendiquait déjà la « une » de
   L'Équipe pour ses polices ; cette page en applique enfin la mise
   en page.

   LE SURTITRE COLORÉ EST UNE INFORMATION.
   Chaque bloc porte un mot au-dessus de son titre, et la couleur
   de ce mot dit la nature de ce qu'on va lire :

     bleu  MESURE      relevée dans les données officielles
     ambre PROJECTION  calculée ici, à partir des mesures
     gris  LECTURE / CONTRÔLE / HISTORIQUE / MÉTHODE

   C'est le seul ornement de la page, et il est utile : la promesse
   du site — dire d'où vient chaque chiffre — devient lisible avant
   même la première phrase.

   LA NOTE DE PROVENANCE EST LA SIGNATURE.
   Sous chaque bloc qui montre un nombre, une note au filet à
   gauche dit d'où il sort. Toujours au même endroit, toujours de
   la même forme. Les sites de pronostics cachent cette
   information ; ici, elle est le motif décoratif.
   ============================================================ */

/* Dans l'outil, les titres de bloc sont des repères, pas des annonces :
   ils descendent d'un cran par rapport aux pages de discours. */
.app h2 { font-size: var(--t-xl); line-height: 1.1; }

/* les listes secondaires parlent moins fort que le verdict */
.boards h2 { font-size: var(--t-lg); }

/* ================= étape 1 : la recherche ================= */

/* SÉLECTEUR DOUBLÉ, COMME .block PLUS BAS : « .app section { padding: 0 } »
   (socle.css) vaut 0,1,1 et bat une classe seule à 0,1,0. Sans le doublon,
   ces deux cartes perdaient tout leur vide intérieur en silence — le texte
   collait au cadre. Voir l'explication complète au-dessus de .block. */
.picker,
.app .picker {
  padding: clamp(1.4rem, 3.2vw, 2.2rem) clamp(1.25rem, 3.2vw, 2.1rem);
}

.picker-head { display: flex; flex-direction: column; gap: var(--s1); margin-bottom: var(--s4); }

.vs {
  font-family: var(--body);
  font-size: var(--t-sm);
  font-weight: 600;
  text-transform: uppercase;
  color: var(--ink-faint);
  padding-top: var(--s6);
  letter-spacing: 0.09em;
}

.slots { display: grid; grid-template-columns: 1fr auto 1fr; align-items: start; gap: var(--s3); }

@media (max-width: 34rem) {
  .slots { grid-template-columns: 1fr; }
  .vs { padding-top: 0; text-align: center; }
}

.slot { display: flex; flex-direction: column; gap: var(--s1); position: relative; }

.slot > .label { color: var(--ink-soft); }
.slot.side-a > .label { color: var(--a); }
.slot.side-b > .label { color: var(--b); }

.slot input {
  width: 100%;
  font-family: inherit;
  font-size: var(--t-base);
  color: var(--ink);
  background: var(--ground);
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  padding: var(--s3);
}

.slot input::placeholder { color: var(--ink-faint); }
.slot.side-a input:focus { border-color: var(--a); }
.slot.side-b input:focus { border-color: var(--b); }

.drop {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  z-index: 20;
  margin-top: var(--s1);
  max-height: 15rem;
  overflow-y: auto;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  box-shadow: var(--shadow);
  list-style: none;
  padding: var(--s1);
}

.drop li {
  min-height: 44px;
  padding: var(--s2);
  border-radius: var(--r-sm);
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--s2);
  font-size: var(--t-md);
}

.drop li:hover, .drop li[aria-selected="true"] { background: var(--surface-alt); }

.drop .lg { font-size: var(--t-sm); color: var(--ink-faint); white-space: nowrap; }
.drop .empty { color: var(--ink-faint); cursor: default; }
.drop .empty:hover { background: none; }

/* ================= étape 2 : le face-à-face ================= */

/* Même bagarre de spécificité que .picker juste au-dessus : sans le
   doublon, cette carte — la plus regardée de la page — perdait tout son
   vide intérieur, et les deux équipes, leurs chiffres et la liste des
   absents venaient toucher le cadre. */
.duel,
.app .duel {
  padding: clamp(1.4rem, 3.2vw, 2.2rem) clamp(1.25rem, 3.2vw, 2.1rem);
}

/* LA COLONNE DU MILIEU EST BORNÉE, ET C'EST NÉCESSAIRE.

   Avec « auto », la piste centrale prend la largeur de son texte le plus
   long. La phrase des deux clubs qui ne se rencontrent pas la faisait
   passer à plus de quatre cents pixels, et les deux camps — le sujet du
   bloc — se retrouvaient écrasés de part et d'autre. La ligne médiane a
   une largeur à elle, qui ne dépend pas de ce qu'on écrit dessus. */
.duel-grid {
  display: grid;
  grid-template-columns: 1fr clamp(7.5rem, 15vw, 11.5rem) 1fr;
  gap: var(--s3) var(--s5);
  align-items: stretch;
}

@media (max-width: 38rem) { .duel-grid { grid-template-columns: 1fr; } }

/* pas de carte dans la carte : l'appartenance passe par un filet de couleur */
.team {
  padding: var(--s4) var(--s3) var(--s2);
  display: flex;
  flex-direction: column;
  gap: var(--s3);
  /* Pas d'angles arrondis sur ce bloc : le filet de couleur fait toute la
     largeur de la colonne, et un coin arrondi sous un trait de trois
     pixels laisse deux petites entailles à chaque bout. Le filet coupe
     droit, comme la rampe de projecteurs qu'il représente. */
  border-top: 3px solid var(--line);

  /* LE PROJECTEUR.

     La direction visuelle du site s'appelle « Nocturne » : un match du
     soir sous les projecteurs. Chaque camp reçoit donc sa lumière, depuis
     SON côté — une nappe très basse de sa propre couleur, qui part du
     haut de sa colonne et s'éteint avant le milieu.

     C'est le seul ornement de ce bloc, et il fait un vrai travail : sans
     lui, les deux colonnes ne se distinguaient que par trois pixels de
     filet, et le bloc se lisait comme deux listes empilées plutôt que
     comme une confrontation. */
  background-repeat: no-repeat;
  background-size: 100% 62%;
}

.team.a {
  border-top-color: var(--a);
  background-image: radial-gradient(120% 100% at 0% 0%,
    color-mix(in srgb, var(--a) 13%, transparent) 0%, transparent 68%);
}

.team.b {
  border-top-color: var(--b);
  background-image: radial-gradient(120% 100% at 100% 0%,
    color-mix(in srgb, var(--b) 13%, transparent) 0%, transparent 68%);
}

/* LES DEUX CAMPS SE FONT FACE — MAIS SEULEMENT CÔTE À CÔTE.

   Le bloc s'appelle « Le face-à-face » et les deux colonnes étaient
   alignées à gauche toutes les deux : on lisait deux fiches empilées,
   avec un grand vide au milieu de la seconde. L'équipe qui se déplace
   est donc mise en miroir, et les deux se regardent par-dessus la ligne
   médiane, comme sur une feuille de match.

   En dessous de 38rem les colonnes s'empilent : le face-à-face n'existe
   plus dans l'espace, le miroir n'aurait plus de sens et rendrait la
   lecture pénible. Tout repart à gauche. */
@media (min-width: 38.0625rem) {
  .team.b { text-align: right; }
  .team.b .team-top,
  .team.b .form,
  .team.b .absents { align-items: flex-end; }
  .team.b .cp2 { align-self: flex-end; }
  .team.b h3 { flex-direction: row-reverse; }

  /* LES PASTILLES NE S'INVERSENT PAS, ELLES SE DÉPLACENT.

     Les cinq derniers résultats se lisent du plus ancien au plus récent,
     de gauche à droite. Inverser leur ordre pour faire joli dirait le
     contraire de la vérité. On pousse donc le groupe entier vers le bord
     extérieur, et c'est le libellé qui change de côté pour rester du
     côté de la ligne médiane, comme en face. */
  .team.b .form { justify-content: flex-end; }
  .team.b .form-cap { order: -1; margin-left: 0; margin-right: var(--s1); }
  .team.b .absents ul { align-items: flex-end; }
  .team.b .absents li { padding-left: 0; padding-right: var(--s3); }
  .team.b .absents li::before { left: auto; right: 1px; }
}

.team-top { display: flex; flex-direction: column; gap: var(--s1); }

/* nom de club : composé resserré, comme partout ailleurs sur le site */
/* LE NOM DU CLUB EST CE QU'ON VIENT LIRE. Il monte d'un cran et se
   resserre : c'est le seul endroit du bloc où la police de titre a le
   droit de parler fort, tout le reste autour reste discipliné. */
.team h3 {
  font-family: var(--display);
  font-stretch: var(--w-serre);
  font-weight: 700;
  font-size: clamp(1.5rem, 3.4vw, 1.95rem);
  line-height: 1.02;
  letter-spacing: -0.035em;
  text-wrap: balance;
}

.team .sub { font-size: var(--t-sm); color: var(--ink-soft); line-height: 1.5; }

/* la position et le nombre de matchs sont des chiffres de match, pas du
   texte courant : même traitement mono et tabulaire que partout ailleurs
   sur le site où un nombre compte vraiment. */
.team .sub .chiffre {
  font-family: var(--mono);
  font-variant-numeric: tabular-nums;
  font-weight: 600;
  color: var(--ink);
  letter-spacing: -0.01em;
}
.team .venue {
  font-family: var(--mono);
  font-size: var(--t-xs);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.14em;
}
.team.a .venue { color: var(--a); }
.team.b .venue { color: var(--b); }

.form { display: flex; gap: var(--s1); align-items: center; }

.form-dot {
  width: 1.4rem;
  height: 1.4rem;
  border-radius: 0.5rem;
  display: grid;
  place-items: center;
  font-family: var(--mono);
  font-size: var(--t-xs);
  font-weight: 600;
  color: var(--on-fill);
}
.form-dot.V { background: var(--win); }
.form-dot.N { background: var(--draw); }
.form-dot.D { background: var(--loss); }

.form-cap { font-size: var(--t-sm); color: var(--ink-soft); margin-left: var(--s1); }

/* Pas de pastilles à annoncer : le libellé devient la phrase entière, et
   se met au gris des choses qu'on ne sait pas encore. */
.form-vide .form-cap {
  margin-left: 0;
  color: var(--ink-faint);
  line-height: 1.5;
  text-wrap: pretty;
}

/* ---- L'APPARITION DU FACE-À-FACE ----

   UN SEUL MOUVEMENT, DÉCLENCHÉ UNE SEULE FOIS : au moment où un camp est
   choisi, il entre depuis SON côté — le receveur par la gauche, le
   visiteur par la droite — puis ses cinq derniers résultats s'allument
   dans l'ordre chronologique.

   Les pastilles ne clignotent pas pour faire joli : elles s'allument de
   la plus ancienne à la plus récente, ce qui est exactement l'ordre dans
   lequel ces matchs ont été joués. C'est le mouvement qui porte
   l'information, pas l'inverse. Sans cette raison, il ne serait pas là.

   Le tout dure moins d'une demi-seconde et ne se rejoue pas tant que le
   camp ne change pas (voir poseCamp dans rencontre.js). */
.team-top,
.team .form,
.team .absents {
  animation: campEntre 0.42s cubic-bezier(0.22, 1, 0.36, 1) both;
}

.team.a .team-top { --de: -14px; }
.team.b .team-top { --de: 14px; }
.team.a .form, .team.a .absents { --de: -10px; }
.team.b .form, .team.b .absents { --de: 10px; }

.team .form { animation-delay: 0.06s; }
.team .absents { animation-delay: 0.12s; }

@keyframes campEntre {
  from { opacity: 0; transform: translateX(var(--de, 0)); }
  to   { opacity: 1; transform: none; }
}

.form-dot {
  animation: pastilleAllume 0.34s cubic-bezier(0.22, 1, 0.36, 1) both;
  animation-delay: calc(var(--i, 0) * 55ms + 140ms);
}

@keyframes pastilleAllume {
  from { opacity: 0; transform: scale(0.72); }
  to   { opacity: 1; transform: none; }
}

.absents { font-size: var(--t-sm); color: var(--ink-soft); display: flex; flex-direction: column; gap: var(--s2); }
.absents .hd { font-size: var(--t-sm); font-weight: 600; color: var(--ink-faint); }

/* la puce du navigateur touche le bord et ne dit rien de plus qu'un point
   fait mieux : un petit disque discret, aligné sur la première ligne du
   texte plutôt que sur toute sa hauteur. */
.absents ul { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: var(--s1); }
.absents li { position: relative; padding-left: var(--s3); line-height: 1.5; }
.absents li::before {
  content: "";
  position: absolute;
  left: 1px;
  top: 0.62em;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: var(--ink-faint);
}

/* le nom du joueur porte l'information ; le motif de son absence est le
   détail qui vient ensuite — les deux ne doivent pas peser pareil. */
.absents .nom { color: var(--ink-soft); font-weight: 600; }
.absents .motif { color: var(--ink-faint); }

/* ---- LA LIGNE MÉDIANE ----

   C'est la signature de ce bloc. Le milieu du terrain : un trait qui
   sépare les deux camps sur toute la hauteur, et le coup d'envoi posé
   dessus, à l'endroit exact où les deux équipes se rencontrent.

   Ce que le trait remplace : un tiret cadratin et la mention « Journée à
   venir », écrite en dur dans la page et que rien ne mettait jamais à
   jour. Un ornement muet au centre d'un bloc qui s'appelle « Le
   face-à-face ». */
.midcol {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--s1);
  padding: var(--s5) var(--s3);
  min-width: 7.5rem;
  text-align: center;
}

.midcol::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 0;
  bottom: 0;
  width: 1px;
  background: linear-gradient(to bottom,
    transparent, var(--line) 12%, var(--line) 88%, transparent);
  transform: translateX(-50%) scaleY(0);
  transform-origin: top;
  animation: mediane 0.5s cubic-bezier(0.22, 1, 0.36, 1) 0.1s forwards;
}

@keyframes mediane { to { transform: translateX(-50%) scaleY(1); } }

/* Le coup d'envoi se pose SUR le trait : le fond de la carte l'interrompt,
   comme le rond central interrompt la ligne médiane. */
.midcol > * { position: relative; z-index: 1; background: var(--surface); }

.rdv-hd {
  font-family: var(--mono);
  font-size: var(--t-xs);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--ink-faint);
  padding: 0 var(--s2) var(--s1);
}

.rdv-jour {
  font-size: var(--t-sm);
  color: var(--ink-soft);
  line-height: 1.35;
  padding: 0 var(--s2);
}

/* L'HEURE EST LE SEUL VRAI CHIFFRE DE CETTE COLONNE, ET ELLE PORTE LA
   COULEUR DE LA PAGE. C'est le moment où le match commence : le reste
   du bloc décrit, celui-ci donne rendez-vous. */
.rdv-heure {
  font-family: var(--mono);
  font-variant-numeric: tabular-nums;
  font-size: 1.35rem;
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: -0.03em;
  color: var(--a);
  background: var(--a-soft);
  border-radius: var(--r-pill);
  padding: 0.28em 0.7em;
  margin-top: var(--s1);
}

.rdv-note,
.rdv-vide {
  font-size: var(--t-sm);
  line-height: 1.5;
  color: var(--ink-faint);
  padding: var(--s2) var(--s2) 0;
  text-wrap: pretty;
}

.rdv-vide { padding-block: var(--s3); }

/* Empilées, les colonnes n'ont plus de « milieu » : la ligne médiane
   devient le trait horizontal qui sépare les deux camps. */
@media (max-width: 38rem) {
  .midcol { padding: var(--s4) 0; min-width: 0; }
  .midcol::before {
    left: 0; right: 0; top: 50%; bottom: auto;
    width: auto; height: 1px;
    background: linear-gradient(to right,
      transparent, var(--line) 12%, var(--line) 88%, transparent);
    transform: translateY(-50%) scaleX(0);
    transform-origin: left;
    animation-name: medianeH;
  }
  @keyframes medianeH { to { transform: translateY(-50%) scaleX(1); } }
}

/* ---- aperçu des confrontations ---- */

.h2h-line {
  margin-top: var(--s4);
  border-top: 1px solid var(--line-soft);
  padding-top: var(--s3);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s2) var(--s4);
  font-size: var(--t-sm);
  color: var(--ink-soft);
}

.h2h-line .hd { font-size: var(--t-sm); font-weight: 600; color: var(--ink-faint); }

.tally { display: flex; gap: var(--s1); align-items: center; font-family: var(--mono); font-size: var(--t-sm); }
.tally b { padding: var(--s1) var(--s2); border-radius: var(--r-sm); font-weight: 600; }
.tally .wa { background: var(--a-soft); color: var(--a); }
.tally .wn { background: var(--n-soft); color: var(--ink-soft); }
.tally .wb { background: var(--b-soft); color: var(--b); }

/* ---- l'action ---- */

.action { margin-top: var(--s4); display: flex; flex-direction: column; align-items: center; gap: var(--s2); }
.btn-note { font-size: var(--t-sm); color: var(--ink-faint); text-align: center; }

/* ---- l'aide sous les deux champs de recherche ----

   Elle explique où est passé le bouton d'analyse tant qu'aucune équipe n'est
   choisie. Discrète mais pas invisible : c'est la première question que se
   pose quelqu'un qui arrive sur cette page, et une réponse qu'il faut
   chercher n'est pas une réponse. */
.picker-aide {
  margin-top: var(--s4);
  padding-top: var(--s3);
  border-top: 1px solid var(--line-soft);
  font-size: var(--t-sm);
  color: var(--ink-soft);
  line-height: 1.55;
  max-width: 64ch;
}

.picker-aide b { color: var(--ink); font-weight: 650; }

/* ---- les listes de matchs quand elles sont vides ---- */
.mvide {
  padding: var(--s5) var(--s4);
  font-size: var(--t-sm);
  color: var(--ink-faint);
  line-height: 1.5;
  text-align: center;
}

/* ================= calendrier et direct ================= */

.boards { display: grid; gap: var(--s4); }
@media (min-width: 48rem) { .boards { grid-template-columns: 1fr 1fr; align-items: start; } }

.boards .block { padding: 1.1rem clamp(0.9rem, 2.5vw, 1.2rem); gap: var(--s3); }

/* Les lignes de match elles-mêmes vivent dans matchs.css : la fiche club
   s'en sert aussi, et une ligne de match doit avoir la même allure partout. */

/* ================= chargement ================= */

.loading,
.app .loading {
  padding: var(--s6) var(--s5);
  display: flex; flex-direction: column; align-items: center; gap: var(--s4);
}

.spinner {
  width: 2.2rem;
  height: 2.2rem;
  border: 2px solid var(--line);
  border-top-color: var(--a);
  border-radius: 50%;
  animation: spin 0.85s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

.load-msg { font-size: var(--t-md); color: var(--ink-soft); text-align: center; }

/* ============================================================
   RÉSULTATS — LE SYSTÈME COMMUN À TOUS LES BLOCS
   ============================================================ */

.results {
  display: flex;
  flex-direction: column;
  gap: var(--s5);

  /* ---- LE GABARIT DE LIGNE, ÉCRIT UNE FOIS ----

     Trois blocs de la page montrent la même chose : un libellé, une
     barre, une valeur. Les données importantes, les seuils de buts et
     l'indice de fiabilité. Chacun avait sa propre grille, donc ses
     propres largeurs de colonnes, donc trois bords droits différents à
     trois centimètres d'écart. C'est ce désalignement qu'on voyait
     avant de voir quoi que ce soit d'autre.

     Une seule paire de valeurs, et les trois se superposent.

     LA BARRE PREND LE VIDE. C'est la règle. Le libellé a la largeur
     qu'il lui faut, la valeur aussi, et tout ce qui reste va à la
     barre — qui est justement le seul élément dont la longueur porte
     un sens. Avant, la barre était figée et c'est le vide qui
     s'étirait. */
  --col-lib: minmax(9rem, 17rem);
  --col-val: 3.6rem;

  /* --mesure a déménagé dans socle.css, au :root. Il servait déjà à
     match.css, sur des pages qui n'ont pas de .results : défini ici, il
     n'y valait rien et les notes s'étalaient sur toute la largeur. */
}

/* .block et .block-head ont déménagé dans socle.css : ce sont des
   composants partagés par six pages, pas une pièce propre à l'outil
   d'analyse. Les y laisser ici les cachait aux cinq autres — voir le
   commentaire à leur nouvel emplacement, juste après .card. */

/* ---- l'essai avec des matchs fictifs ----

   Un lien discret, posé à côté du titre « Aujourd'hui » — visible sans
   attirer l'œil plus que le titre lui-même, puisqu'il ne sert qu'une
   fois de temps en temps, pour essayer le bloc un jour sans match. */
.block-head-ligne {
  flex-direction: row;
  align-items: baseline;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--s2) var(--s4);
}

.essai-lien {
  font-family: var(--body);
  font-size: var(--t-sm);
  color: var(--ink-soft);
  text-decoration: underline;
  text-underline-offset: 0.15em;
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  white-space: nowrap;
}
.essai-lien:hover { color: var(--ink); }

/* ---- le surtitre et son filet ----

   Le filet part du mot et court jusqu'au bord droit du bloc. Il prend la
   couleur du mot (« currentColor ») : c'est ce qui rend le code de couleur
   visible de loin, avant même qu'on ait lu quoi que ce soit. */

.bloc-tete {
  display: flex;
  flex-direction: column;
  gap: var(--s3);
  padding-bottom: var(--s4);
  border-bottom: 1px solid var(--line);
}

.kick {
  display: flex;
  align-items: center;
  gap: var(--s3);
  font-family: var(--mono);
  font-size: 0.68rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color: var(--ink-faint);
}

.kick::after {
  content: "";
  flex: 1;
  height: 1px;
  background: currentColor;
  opacity: 0.3;
}

.kick.mes { color: var(--b); }
.kick.proj { color: var(--a); }

/* Les grands titres de bloc : composé serré, gros, très rapproché. C'est le
   seul endroit de la page où la typographie force le regard. */
.app .bloc-tete h2 {
  font-family: var(--display);
  font-stretch: var(--w-serre);
  font-weight: 700;
  font-size: clamp(1.5rem, 3.4vw, 2.05rem);
  line-height: 1.02;
  letter-spacing: -0.032em;
}

/* le chapô : une phrase, pour dire ce que le bloc va montrer */
.bloc-chapo {
  font-size: var(--t-md);
  color: var(--ink-soft);
  line-height: 1.65;
  max-width: var(--mesure);
  margin-top: calc(var(--s3) * -1);
  text-wrap: pretty;
}

/* ---- la note de provenance : la signature de la page ----

   PLUS DE FILET À GAUCHE. Elle en portait un, de deux pixels. Comme
   elle apparaît sous CHAQUE bloc du site, cela faisait une dizaine de
   rails gris empilés sur une page — et un rail par note, c'est
   précisément ce qui donne à une page son air chargé.

   Elle se distingue déjà par trois choses : elle est plus petite, plus
   pâle, et séparée du contenu par l'espace du bloc. Un quatrième signal
   n'ajoutait rien qu'un trait. */
.provenance {
  padding: 0;
  font-size: var(--t-sm);
  line-height: 1.7;
  color: var(--ink-faint);
  max-width: var(--mesure);
  text-wrap: pretty;
}

.provenance b { color: var(--ink-soft); font-weight: 650; }

/* ---- la légende du code de couleur ----
   Sans elle, deux couleurs de surtitre ne seraient qu'une décoration. */
.legende {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--s2) var(--s5);
  font-size: var(--t-sm);
  color: var(--ink-faint);
  line-height: 1.5;
}

.legende .leg { display: flex; align-items: baseline; gap: var(--s2); max-width: 34ch; }
.legende .kick { flex: none; }
.legende .kick::after { display: none; }

/* ---- pourquoi le bloc de tête N'A PAS de halo ----

   Il en a porté un pendant une version. La règle du site, écrite dans
   compte.css, dit que le projecteur ne touche un objet que lorsque c'est le
   seul objet de la page — c'est vrai de la carte de connexion, ça ne l'est
   pas ici, où neuf blocs se suivent. Et le verdict n'en a pas besoin : son
   pourcentage géant fait déjà tout le travail. Un ornement qui répète ce
   qu'un autre élément dit mieux ne se corrige pas, il se retire. */

/* --- les pourcentages ---
   La hiérarchie suit le résultat : l'issue la plus probable écrase les deux
   autres. Un match serré donne trois chiffres proches, un match déséquilibré
   donne un chiffre géant. La forme de la page dit déjà le verdict. */

/* LES TROIS LIBELLÉS SUR UNE SEULE LIGNE.

   Les trois colonnes étaient trois boîtes empilées, alignées par le bas.
   Comme le libellé du favori est composé plus gros que les deux autres,
   les trois lignes « Victoire Everton », « Match nul », « Victoire Crystal
   Palace » ne tombaient pas à la même hauteur. Trois textes presque
   alignés se lisent moins bien que trois textes franchement décalés :
   l'œil corrige tout seul un vrai décalage, et bute sur un faux.

   Les pourcentages occupent maintenant la première rangée de la grille,
   les libellés la seconde. Chacun s'aligne avec ses pareils. Le favori
   garde son chiffre géant — c'est la forme de la page qui dit le verdict,
   et ça, ça marchait. */

.odds {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-template-rows: auto auto;
  gap: var(--s2);
  text-align: center;
}

.odd { display: contents; }
.odds .pct { grid-row: 1; align-self: end; min-width: 0; }
.odds .who { grid-row: 2; align-self: start; min-width: 0; }

.odd .pct {
  font-family: var(--mono);
  font-size: clamp(1.45rem, 5.5vw, 2.05rem);
  line-height: 0.92;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.03em;
}
.odd .pct span { font-size: 0.44em; }

.odd.lead .pct { font-size: clamp(3.4rem, 15vw, 6rem); letter-spacing: -0.055em; }

.odd.a .pct { color: var(--a); }
.odd.n .pct { color: var(--n); }
.odd.b .pct { color: var(--b); }

.odd .who { font-size: var(--t-sm); color: var(--ink-soft); line-height: 1.25; overflow-wrap: anywhere; }

.odd.lead .who {
  font-family: var(--display);
  font-stretch: var(--w-serre);
  font-weight: 650;
  font-size: var(--t-lg);
  line-height: 1.15;
  letter-spacing: -0.02em;
  color: var(--ink);
}

/* un seul moment animé sur toute la page : la barre du verdict qui se dessine.
   Les extrémités sont arrondies : c'est le contenant qui porte le rayon, les
   trois segments restent droits pour se toucher franchement. */
.bar {
  display: flex;
  height: 1.35rem;
  border-radius: var(--r-pill);
  overflow: hidden;
  background: var(--surface-alt);
  animation: wipe 0.62s cubic-bezier(0.16, 1, 0.3, 1) 0.1s both;
}
@keyframes wipe {
  from { clip-path: inset(0 100% 0 0); }
  to   { clip-path: inset(0 0 0 0); }
}
.bar > i { display: block; }
.bar .sa { background: var(--a); }
.bar .sn { background: var(--n); }
.bar .sb { background: var(--b); }

/* --- statistiques secondaires ---
   Chacune reçoit son filet à gauche : quatre chiffres alignés sans séparation
   se lisent comme une phrase, et ce n'en est pas une. */

.stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(9.5rem, 1fr));
  gap: var(--s4) var(--s5);
  border-top: 1px solid var(--line-soft);
  padding-top: var(--s5);
}

.stat {
  display: flex;
  flex-direction: column;
  gap: var(--s1);
  border-left: 2px solid var(--line);
  padding-left: var(--s3);
}

.stat .v {
  font-family: var(--mono);
  font-size: 1.65rem;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.03em;
  line-height: 1;
}
.stat .k { font-size: var(--t-sm); color: var(--ink-soft); line-height: 1.35; }

/* ============================================================
   BLOC « DONNÉES IMPORTANTES » — LE DUEL DES CHIFFRES

   Une ligne = deux valeurs aux deux bords, le libellé au milieu. Rien
   d'autre. C'est la mise en page que tous les tableaux de statistiques
   de football utilisent, et ce n'est pas un hasard : chaque équipe
   possède une colonne, du haut jusqu'en bas, et l'œil descend le long
   d'un camp sans jamais se demander quel nombre appartient à qui.

   POURQUOI LA BARRE A DISPARU. Chaque ligne portait une barre à deux
   teintes montrant la part de chacun dans le total. Sur douze lignes,
   cela faisait douze barres — et le vrai contenu, les nombres, passait
   après elles. Pire, la barre mentait par endroits : sur des cartons
   rouges ou des hors-jeu, « la part dans le total des deux » ne veut
   rien dire, et un 1–0 s'affichait en barre pleine comme une écrasante
   domination. Les nombres, eux, ne mentent jamais.

   CE QUI REMPLACE LA BARRE : LA PASTILLE. Sur chaque ligne, la valeur
   la plus haute prend un fond teinté de la couleur de son camp. C'est
   le seul ornement du bloc, il ne se déclenche jamais sur une égalité,
   et il porte une information vraie — qui mène cette ligne — au lieu
   de figurer une proportion qui n'existe pas toujours.

   LES CHIFFRES SONT EN CHASSE FIXE, alignés au millième près d'une
   ligne à l'autre. C'est ce qui permet de lire une colonne comme une
   colonne. Sans cela, « 708 » et « 7 » ne commencent pas au même
   endroit et la colonne se met à onduler.
   ============================================================ */

/* LE TABLEAU EST BORNÉ, ET C'EST LA CONDITION DE TOUT LE RESTE.

   Les deux valeurs vont aux deux bords. Laissé libre sur un écran de
   1280 px, ce bloc mettait 800 px de vide entre « 51% » et « 49% » :
   l'œil ne peut plus les rapprocher, et c'est le seul geste que ce
   tableau demande. La colonne du milieu ne porte aucune information de
   longueur — contrairement à la barre d'avant — donc rien ne justifie
   qu'elle absorbe la largeur de l'écran. */
.dc {
  display: flex;
  flex-direction: column;
  max-width: 42rem;
  margin-inline: auto;
  width: 100%;
}

/* LA LIGNE DE TÊTE — sans elle, le bloc est illisible.

   Deux nombres posés aux deux bords sans rien entre eux ne disent pas
   à qui ils appartiennent. La barre le disait par sa couleur ; elle
   n'est plus là, donc les noms doivent être écrits une fois, en haut,
   au-dessus de leur colonne. C'est le seul ajout de cette refonte, et
   il remplace quelque chose plutôt qu'il ne s'empile dessus. */
/* Le même retrait latéral que les pastilles des lignes : sans lui, le nom
   du club et le chiffre qu'il coiffe ne tombent pas sur la même verticale,
   et la colonne se met à boiter d'un pixel sur toute la hauteur. */
.dc-tete {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: center;
  gap: var(--s3);
  padding: 0 var(--s2) var(--s3);
  border-bottom: 1px solid var(--line-soft);
  margin-bottom: var(--s2);
}

.dc-club {
  display: flex;
  align-items: center;
  gap: var(--s2);
  min-width: 0;
  font-size: var(--t-xs);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.09em;
}
.dc-club.b { flex-direction: row-reverse; }

.dc-club.a { color: var(--a); }
.dc-club.b { color: var(--b); }

/* Un nom de club long se coupe plutôt que de pousser l'autre camp
   hors de sa moitié : les deux colonnes restent d'égale largeur. */
.dc-club > span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.dc-row {
  display: grid;
  grid-template-columns: minmax(4.4rem, auto) 1fr minmax(4.4rem, auto);
  align-items: center;
  gap: var(--s2) var(--s3);
  padding: var(--s3) var(--s2);
  border-radius: var(--r-md);
}

/* CHAQUE VALEUR EST UNE PASTILLE, MENEUR OU PAS.

   Première version : seul le meneur portait un fond, l'autre restait du
   texte nu posé au bord du bloc. Deux défauts qui se voyaient tout de
   suite. Les chiffres touchaient la bordure de la carte — rien ne les
   séparait du vide. Et les deux colonnes ne s'alignaient pas : une
   pastille a des flancs, un texte nu n'en a pas, donc « 51% » et « 49% »
   ne commençaient pas au même endroit d'une ligne à l'autre.

   Maintenant les deux côtés ont exactement la même boîte. La colonne est
   droite, rien ne colle au bord, et la différence entre les deux se joue
   sur la COULEUR au lieu de se jouer sur la forme. */
.dc-v {
  font-family: var(--mono);
  font-size: 1.15rem;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.02em;
  line-height: 1;
  padding: 0.4em 0.66em;
  /* Sans plancher, « 1 » donne une pastille de 35 px à côté d'un « 51% »
     de 56 px, et la colonne se met à bégayer d'une ligne à l'autre. Le
     plancher tient la colonne droite ; « auto » laisse quand même passer
     un « 708 » sans le comprimer. */
  min-width: 3.2rem;
  border-radius: var(--r-pill);
  text-align: center;
  background: var(--surface-alt);
  color: var(--ink-soft);
  transition: background 0.18s ease, color 0.18s ease;
}

.dc-v.a { justify-self: start; }
.dc-v.b { justify-self: end; }

/* LE MENEUR PREND LA COULEUR PLEINE DE SON CAMP.

   Un aplat vif, pas une teinte diluée : c'est ce qui fait qu'on lit le
   tableau d'un coup d'œil au lieu de le déchiffrer ligne par ligne. Et
   comme les deux camps alternent d'une ligne à l'autre, l'ambre et le
   bleu se répondent — ce n'est jamais un mur d'une seule couleur.

   --on-accent est le seul texte à poser sur un aplat de marque : sombre
   sur l'ambre vif de nuit, blanc sur le bronze de jour. Un seul jeton,
   les deux thèmes lisibles, aucune règle en double. */
.dc-v.gagne { font-weight: 700; color: var(--on-accent); }
.dc-v.gagne.a { background: var(--a); }
.dc-v.gagne.b { background: var(--b); }

.dc-t {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 2px;
  font-size: var(--t-md);
  line-height: 1.3;
}

.dc-t em {
  font-style: normal;
  font-size: var(--t-xs);
  color: var(--ink-faint);
}

/* « calculé » : la seule ligne des cinq que le modèle produit lui-même.
   Le reste est relevé. La distinction vaut mieux qu'une note en bas. */
.dc-calc {
  font-family: var(--mono);
  font-size: 0.62rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.13em;
  color: var(--a);
  background: var(--a-soft);
  padding: 2px var(--s2);
  border-radius: var(--r-pill);
  margin-top: 2px;
}

/* LA LIGNE SANS MESURE.

   Elle affichait un tiret de chaque côté et une phrase d'excuse
   centrée dessous. Trois lignes vides de suite — et c'est le cas
   normal avant la première journée — donnaient une page qui avait
   l'air cassée plutôt qu'une page qui a l'air honnête.

   Elle prend maintenant toute la largeur et dit en clair ce qui
   manque. Plus de tirets : un tiret ne veut rien dire, une phrase
   oui. */
.dc-row.dc-vide { grid-template-columns: 1fr; }

.dc-manque {
  grid-column: 1 / -1;
  font-size: var(--t-sm);
  color: var(--ink-faint);
  line-height: 1.5;
  text-align: center;
}

@media (max-width: 44rem) {
  .dc-row {
    gap: var(--s2) var(--s2);
    padding: var(--s3) 0;
  }
  .dc-v { font-size: 1.05rem; }
  .dc-t { font-size: var(--t-sm); }
}

/* ============================================================
   DEUX COLONNES — forces clés et buteurs probables

   Le même gabarit sert aux deux blocs : une colonne par équipe,
   coiffée du filet de sa couleur. Deux composants différents pour
   la même idée auraient donné deux mises en page cousines mais pas
   identiques, ce qui se remarque tout de suite.
   ============================================================ */

.deux-cols { display: grid; gap: var(--s5); }

@media (min-width: 44rem) {
  .deux-cols { grid-template-columns: 1fr 1fr; gap: var(--s6); }
}

.deux-cols .col {
  display: flex;
  flex-direction: column;
  gap: var(--s3);
  border-top: 3px solid var(--line);
  padding-top: var(--s3);
  min-width: 0;
}

.deux-cols .col.a { border-top-color: var(--a); }
.deux-cols .col.b { border-top-color: var(--b); }

.col-nom {
  font-family: var(--display);
  font-stretch: var(--w-serre);
  font-weight: 650;
  font-size: var(--t-lg);
  line-height: 1.1;
  letter-spacing: -0.02em;
}

/* ---- les forces clés ---- */

.fc-liste {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--s3);
}

.fc-item {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: baseline;
  gap: var(--s1) var(--s3);
  padding: var(--s4);
  border-radius: var(--r-md);
  background: var(--surface-alt);
}

.fc-tag {
  grid-column: 1 / -1;
  justify-self: start;
  font-family: var(--mono);
  font-size: 0.62rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  padding: 2px var(--s2);
  border-radius: var(--r-pill);
}

.fc-item.force .fc-tag { background: var(--a); color: var(--on-accent); }
.fc-item.fragilite .fc-tag { background: var(--warn-soft); color: var(--warn); }
.fc-item.vide .fc-tag { background: var(--n-soft); color: var(--ink-soft); }

.fc-chiffre {
  grid-column: 1;
  font-family: var(--mono);
  font-size: 1.75rem;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.04em;
  line-height: 1;
}

.fc-unite {
  grid-column: 2;
  font-size: var(--t-xs);
  color: var(--ink-faint);
  line-height: 1.3;
}

.fc-titre {
  grid-column: 1 / -1;
  font-weight: 650;
  font-size: var(--t-md);
  line-height: 1.3;
  margin-top: var(--s1);
}

.fc-detail {
  grid-column: 1 / -1;
  font-size: var(--t-sm);
  color: var(--ink-soft);
  line-height: 1.55;
}

/* ---- les buteurs probables ---- */

.bp-liste {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--s4);
}

.bp-j {
  display: grid;
  grid-template-columns: 3.8rem 1fr;
  gap: var(--s2) var(--s3);
  align-items: baseline;
}

.bp-p {
  font-family: var(--mono);
  font-size: 1.6rem;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.04em;
  line-height: 1;
  color: var(--a);
}
.bp-p i { font-style: normal; font-size: 0.46em; color: var(--ink-faint); }

.bp-txt { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.bp-txt b { font-weight: 650; font-size: var(--t-base); line-height: 1.25; }
.bp-txt span { font-size: var(--t-sm); color: var(--ink-soft); line-height: 1.4; }

.bp-jauge {
  grid-column: 1 / -1;
  height: 0.3rem;
  border-radius: var(--r-pill);
  background: var(--surface-alt);
  overflow: hidden;
}
.bp-jauge > i { display: block; height: 100%; background: var(--a); border-radius: var(--r-pill); }

.deux-cols .col.b .bp-p { color: var(--b); }
.deux-cols .col.b .bp-jauge > i { background: var(--b); }

.bp-rien, .bp-attente {
  font-size: var(--t-sm);
  color: var(--ink-faint);
  line-height: 1.6;
  max-width: 46ch;
}

/* Sortie d'une colonne, la même phrase couvre le bloc entier : elle reprend
   la longueur de lecture du reste de la page, pas celle d'une colonne. */
.bp-seul { max-width: var(--mesure); font-size: var(--t-md); color: var(--ink-soft); }

/* ============================================================
   BLOC « PRÉDICTION SUR LES BUTS »
   ============================================================ */

.pb-haut { display: grid; gap: var(--s5); align-items: start; }

@media (min-width: 40rem) {
  .pb-haut { grid-template-columns: auto 1fr; gap: var(--s6); }
}

.pb-total { display: flex; flex-direction: column; gap: var(--s1); }

.pb-nb {
  font-family: var(--mono);
  font-size: clamp(3rem, 12vw, 4.4rem);
  font-variant-numeric: tabular-nums;
  line-height: 0.88;
  letter-spacing: -0.06em;
  color: var(--a);
}

.pb-lg { font-size: var(--t-sm); color: var(--ink-soft); max-width: 10ch; line-height: 1.35; }

.pb-eti {
  font-family: var(--mono);
  font-size: 0.68rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  color: var(--ink-faint);
}

.pb-liste { display: flex; flex-wrap: wrap; gap: var(--s2); margin-top: var(--s3); }

.pb-score {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  padding: var(--s2) var(--s3);
  border-radius: var(--r-md);
  background: var(--surface-alt);
  min-width: 4.6rem;
}

.pb-score b {
  font-family: var(--mono);
  font-size: var(--t-lg);
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.02em;
}
.pb-score i { font-family: var(--mono); font-style: normal; font-size: var(--t-xs); color: var(--ink-faint); }

.pb-score.lead { background: var(--a-soft); }
.pb-score.lead b { color: var(--a); }

/* ---- l'histogramme du nombre total de buts ---- */

.pb-dist {
  display: flex;
  flex-direction: column;
  gap: var(--s3);
  border-top: 1px solid var(--line-soft);
  padding-top: var(--s5);
}

.pb-cols {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: var(--s2);
  height: 9.5rem;
}

.pb-col {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--s1);
  height: 100%;
  min-width: 0;
}

.pb-pc { font-family: var(--mono); font-size: var(--t-xs); color: var(--ink-faint); }
.pb-pc::after { content: " %"; }

.pb-tige { display: flex; align-items: flex-end; width: 100%; flex: 1; }

/* la barre reçoit la lumière par le haut, comme les boutons du site */
.pb-tige > i {
  display: block;
  width: 100%;
  border-radius: var(--r-sm) var(--r-sm) 0 0;
  background: linear-gradient(to top, var(--a-bas), var(--a-haut));
  animation: monte 0.55s cubic-bezier(0.16, 1, 0.3, 1) both;
  transform-origin: bottom;
}

@keyframes monte { from { transform: scaleY(0); } to { transform: scaleY(1); } }

.pb-k { font-family: var(--mono); font-size: var(--t-sm); color: var(--ink-soft); }

.pb-axe { font-size: var(--t-xs); color: var(--ink-faint); text-align: center; line-height: 1.5; }

/* ---- les seuils ---- */

.pb-seuils {
  display: flex;
  flex-direction: column;
  gap: var(--s3);
  border-top: 1px solid var(--line-soft);
  padding-top: var(--s5);
}

/* même gabarit que les données importantes : voir --col-lib dans .results */
.pb-seuil {
  display: grid;
  grid-template-columns: var(--col-lib) 1fr var(--col-val);
  gap: var(--s4);
  align-items: center;
}

.pb-sk { font-size: var(--t-md); color: var(--ink-soft); }

.pb-sm { height: var(--bar-fin); border-radius: var(--r-pill); background: var(--surface-alt); overflow: hidden; }
.pb-sm > i {
  display: block;
  height: 100%;
  border-radius: var(--r-pill);
  background: var(--a);
  animation: pousseD 0.55s cubic-bezier(0.16, 1, 0.3, 1) both;
  transform-origin: left;
}

@keyframes pousseD { from { transform: scaleX(0); } to { transform: scaleX(1); } }

.pb-sv {
  font-family: var(--mono);
  font-variant-numeric: tabular-nums;
  text-align: right;
  font-size: var(--t-md);
}

/* même repli, même raison que .conf-row */
@media (max-width: 44rem) {
  .pb-seuil { grid-template-columns: 1fr auto; gap: var(--s2) var(--s3); }
  .pb-sk { grid-row: 1; grid-column: 1; }
  .pb-sv { grid-row: 1; grid-column: 2; }
  .pb-sm { grid-row: 2; grid-column: 1 / -1; }
}

/* ============================================================
   BLOC « ANALYSE AVANCÉE » — LE TEXTE ET SON ENCADRÉ

   C'EST LE BLOC QUI ALLAIT LE PLUS MAL, ET POUR DEUX RAISONS
   INDÉPENDANTES QUI SE VOYAIENT ENSEMBLE.

   Un : le texte s'arrêtait à sa longueur de lecture, la carte non.
   Six paragraphes empilés dans la moitié gauche, la moitié droite
   vide sur toute la hauteur du bloc. Un mur de gris et un trou.

   Deux : les six tuiles étaient posées en « auto-fit », c'est-à-dire
   « mettez-en autant que ça rentre ». Il en rentrait cinq. La
   sixième se retrouvait seule sur la ligne du dessous, à un
   cinquième de la largeur. Une orpheline, et rien ne la rattrapait.

   LES DEUX DÉFAUTS SE SOIGNENT L'UN PAR L'AUTRE. Le texte garde sa
   colonne de lecture, et les six chiffres viennent occuper la
   colonne restée vide, en encadré. C'est la mise en page d'un compte
   rendu de match : l'article, et sa boîte de statistiques à côté.
   Elle vient du sujet, pas d'un catalogue.

   L'encadré est UNE surface avec six lignes, et non six petites
   cartes flottantes : six objets arrondis côte à côte font du bruit,
   un tableau se lit.
   ============================================================ */

.av-corps { display: grid; gap: var(--s5); align-items: start; }

@media (min-width: 54rem) {
  .av-corps {
    grid-template-columns: minmax(0, 1fr) 19rem;
    gap: var(--s6);
  }
}

.av-tuiles {
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  background: var(--surface-alt);
  overflow: hidden;
}

.av-tete {
  display: block;
  font-family: var(--mono);
  font-size: 0.66rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  color: var(--ink-faint);
  padding: var(--s3) var(--s4);
  border-bottom: 1px solid var(--line);
}

.av-tuile {
  display: grid;
  grid-template-columns: 3.4rem minmax(0, 1fr);
  align-items: baseline;
  gap: 2px var(--s3);
  padding: var(--s3) var(--s4);
  border-bottom: 1px solid var(--line-soft);
}
.av-tuiles .av-tuile:last-child { border-bottom: none; }

.av-v {
  grid-row: 1 / span 2;
  font-family: var(--mono);
  font-size: 1.3rem;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.04em;
  line-height: 1.05;
  color: var(--ink-soft);
}
.av-v i { font-style: normal; font-size: 0.5em; color: var(--ink-faint); }

.av-tuile.a .av-v { color: var(--a); }
.av-tuile.b .av-v { color: var(--b); }

.av-k { font-size: var(--t-sm); font-weight: 650; line-height: 1.3; overflow-wrap: anywhere; }
.av-s { font-size: var(--t-xs); color: var(--ink-faint); line-height: 1.4; }

/* ============================================================
   FIABILITÉ
   ============================================================ */

/* Le score et sa phrase se tenaient aux deux bouts d'un « space-between » :
   sur un écran large, le chiffre était à gauche, sa traduction à quarante
   centimètres à droite, et rien entre les deux. Or la phrase EST la
   légende du chiffre — elle se lit juste après lui, pas à l'autre bout de
   la carte. */
.conf-top {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: var(--s4) var(--s5);
}

.conf-score {
  font-family: var(--mono);
  font-size: clamp(2.4rem, 8vw, 3.2rem);
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.05em;
  line-height: 1;
  color: var(--a);
}
.conf-score span { font-size: 0.42em; color: var(--ink-faint); }

.conf-word {
  font-size: var(--t-md);
  color: var(--ink-soft);
  max-width: 42ch;
  line-height: 1.45;
  border-left: 2px solid var(--line);
  padding-left: var(--s4);
}

@media (max-width: 34rem) {
  .conf-top { grid-template-columns: 1fr; }
  .conf-word { border-left: none; padding-left: 0; }
}

.meter { height: var(--bar-moyen); border-radius: var(--r-pill); background: var(--surface-alt); overflow: hidden; }
.meter > i {
  display: block;
  height: 100%;
  border-radius: var(--r-pill);
  background: linear-gradient(to bottom, var(--a-haut), var(--a-bas));
}

.conf-rows { display: flex; flex-direction: column; gap: var(--s3); }

/* La valeur chiffrée est affichée à côté de la barre. Une barre sans nombre
   ne se vérifie pas — et sur ce site, tout chiffre doit pouvoir se vérifier. */
/* La barre faisait cinq rem, coincée entre un libellé qui prenait tout et
   son chiffre. Elle prend maintenant le vide, comme partout ailleurs sur
   la page : même gabarit que les données importantes et les seuils. */
.conf-row {
  display: grid;
  grid-template-columns: var(--col-lib) 1fr auto;
  gap: var(--s4);
  align-items: center;
}

.conf-row .t { font-size: var(--t-sm); color: var(--ink-soft); line-height: 1.35; }
.conf-row .m { height: var(--bar-fin); border-radius: var(--r-pill); background: var(--surface-alt); overflow: hidden; }
.conf-row .m > i { display: block; height: 100%; background: var(--ink-faint); border-radius: var(--r-pill); }
.conf-row .v {
  font-family: var(--mono);
  font-size: var(--t-sm);
  font-variant-numeric: tabular-nums;
  color: var(--ink-faint);
  text-align: right;
}

/* Sur un écran étroit, la barre passe sous sa ligne. Les places sont
   écrites une par une : dans le HTML, la barre est AU MILIEU du libellé et
   de la valeur, et une grille qui place toute seule aurait renvoyé la
   valeur sur une troisième ligne, sous la barre, loin du libellé qu'elle
   chiffre. C'est ce qui se passait. */
@media (max-width: 44rem) {
  .conf-row { grid-template-columns: 1fr auto; gap: var(--s2) var(--s3); }
  .conf-row .t { grid-row: 1; grid-column: 1; }
  .conf-row .v { grid-row: 1; grid-column: 2; }
  .conf-row .m { grid-row: 2; grid-column: 1 / -1; }
}

/* ============================================================
   CONFRONTATIONS PASSÉES
   ============================================================ */

.h2h-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }

.h2h-row {
  display: grid;
  grid-template-columns: 6.2rem 1fr auto;
  gap: var(--s3);
  align-items: center;
  padding: var(--s3) var(--s2);
  border-bottom: 1px solid var(--line-soft);
}
.h2h-list .h2h-row:last-child { border-bottom: none; }

.h2h-row .dt { font-family: var(--mono); font-size: var(--t-sm); color: var(--ink-faint); white-space: nowrap; }
.h2h-row .mt { display: flex; flex-direction: column; gap: var(--s1); min-width: 0; }
.h2h-row .tm { font-size: var(--t-md); line-height: 1.3; }
.h2h-row .cp { font-size: var(--t-sm); color: var(--ink-faint); }

.h2h-row .sc {
  font-family: var(--mono);
  font-size: var(--t-base);
  font-variant-numeric: tabular-nums;
  padding: var(--s1) var(--s2);
  border-radius: var(--r-sm);
  white-space: nowrap;
}
.sc.wa { background: var(--a-soft); color: var(--a); }
.sc.wn { background: var(--n-soft); color: var(--ink-soft); }
.sc.wb { background: var(--b-soft); color: var(--b); }

@media (max-width: 30rem) {
  .h2h-row { grid-template-columns: 1fr auto; }
  .h2h-row .dt { grid-column: 1 / -1; }
}

/* Le bilan passe en chiffres détachés : quatre nombres au même rang se
   comparent d'un coup d'œil, une phrase ne se compare pas. */
.h2h-recap {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(7rem, 1fr));
  gap: var(--s4);
  font-size: var(--t-sm);
  color: var(--ink-soft);
}

.h2h-recap > span {
  display: flex;
  flex-direction: column;
  gap: var(--s1);
  border-left: 2px solid var(--line);
  padding-left: var(--s3);
  line-height: 1.3;
}

.h2h-recap b {
  font-family: var(--mono);
  font-size: 1.5rem;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.03em;
  line-height: 1;
  color: var(--ink);
  font-weight: 500;
}

.h2h-none { font-size: var(--t-md); color: var(--ink-soft); max-width: var(--mesure); line-height: 1.65; }

/* ============================================================
   LE TEXTE
   ============================================================ */

.summary {
  font-size: var(--t-base);
  line-height: 1.75;
  max-width: var(--mesure);
  display: flex;
  flex-direction: column;
  gap: var(--s4);
}

.summary b { font-weight: 650; color: var(--ink); }

/* La première phrase donne le ton du bloc : un cran plus grande, comme le
   chapeau d'un article. Une seule, sinon ce n'est plus un chapeau. */
.summary p:first-child {
  font-size: var(--t-lg);
  line-height: 1.55;
  color: var(--ink);
}

/* ============================================================
   POURQUOI
   ============================================================ */

.why { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }

.why li {
  display: grid;
  grid-template-columns: 5.6rem 1fr;
  gap: var(--s4);
  align-items: start;
  padding: var(--s4) var(--s2);
  border-bottom: 1px solid var(--line-soft);
}
.why li:last-child { border-bottom: none; }

.why .imp {
  font-family: var(--mono);
  font-size: 0.62rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.13em;
  padding: var(--s1) var(--s2);
  border-radius: var(--r-pill);
  text-align: center;
  white-space: nowrap;
}
.why .imp.fort { background: var(--a); color: var(--on-accent); }
.why .imp.moyen { background: var(--n-soft); color: var(--ink-soft); }
.why .imp.faible { background: none; color: var(--ink-faint); box-shadow: inset 0 0 0 1px var(--line); }
.why .imp.contre { background: var(--warn-soft); color: var(--warn); }

.why .txt { font-size: var(--t-md); line-height: 1.65; }
.why .txt b { font-weight: 650; color: var(--ink); }

@media (max-width: 30rem) {
  .why li { grid-template-columns: 1fr; gap: var(--s2); }
  .why .imp { justify-self: start; }
}

/* --- avertissement --- */

/* TROIS NOTES, TROIS COLONNES.

   Ce sont trois avertissements indépendants : d'où vient le chiffre, ce que
   le modèle ignore, ce qui est réel. Empilés dans une colonne de lecture, ils
   laissaient la moitié droite du bloc vide et se lisaient comme un seul pavé
   qu'on saute. Côte à côte, chacun redevient une note qu'on peut lire seule —
   et le bloc n'a plus de bord droit qui flotte.

   C'est le pied de page d'un article de presse : les crédits en colonnes,
   plus petits, sous un filet. */
.disclaimer {
  font-size: var(--t-sm);
  color: var(--ink-faint);
  line-height: 1.65;
  border-top: 1px solid var(--line);
  padding-top: var(--s5);
  display: grid;
  gap: var(--s4) var(--s5);
}

@media (min-width: 48rem) {
  .disclaimer { grid-template-columns: repeat(3, 1fr); }
}
.disclaimer strong { color: var(--ink-soft); font-weight: 650; }

.redo { display: flex; justify-content: center; padding-top: var(--s1); }

/* La ligne qui suit le résultat. Centrée et discrète : c'est une information
   qu'on rend disponible, pas une main tendue vers le portefeuille de quelqu'un
   qui vient à peine de finir sa lecture. */
.suite {
  text-align: center;
  font-size: var(--t-md);
  color: var(--ink-faint);
  max-width: 46ch;
  margin: 0 auto;
  line-height: 1.6;
}

/* ============================================================
   MOUVEMENT

   Une seule famille de mouvement sur toute la page : des barres qui
   se dessinent, toutes avec la même courbe. Et zéro mouvement pour
   qui a demandé à son ordinateur de s'en passer.
   ============================================================ */

/* ============================================================
   LE VOILE SUR LES BLOCS DÉTAILLÉS.

   On montre qu'il y a quelque chose, on dit ce que c'est, et on
   propose d'y accéder. C'est l'inverse d'un refus : un refus renvoie
   vers une grille de prix sans avoir rien montré.

   LE DEGRÉ DE FLOU EST UN CHOIX, PAS UN RÉGLAGE AU HASARD. Trop
   léger, on lit encore les chiffres et le voile est un mensonge poli.
   Trop fort, il ne reste qu'une bouillie grise et on ne devine plus
   qu'il y avait un tableau — donc plus rien à vouloir. À sept pixels,
   la FORME reste lisible — des lignes, des barres, des colonnes — et
   les valeurs, non.

   Le titre du bloc, lui, ne passe jamais derrière le voile : on
   n'a envie que de ce qu'on peut nommer.
   ============================================================ */

.bloc-verrouille {
  position: relative;
  overflow: hidden;
}

.bloc-verrouille > *:not(.bloc-tete):not(.verrou-voile) {
  filter: blur(7px);
  opacity: 0.5;
  user-select: none;
  pointer-events: none;
}

.verrou-voile {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--s3);
  text-align: center;
  padding: var(--s5);

  /* Le dégradé laisse le haut du bloc dégagé : le surtitre et le titre
     s'y trouvent, et ils doivent rester francs. Les arrêts sont en
     rem et non en pourcentage — la hauteur d'un en-tête ne dépend pas
     de la longueur du bloc qu'il coiffe. */
  background: linear-gradient(to bottom,
    transparent 0,
    color-mix(in srgb, var(--surface) 72%, transparent) 3.5rem,
    color-mix(in srgb, var(--surface) 88%, transparent) 7rem);
}

/* Le libellé annonce, il ne proclame pas : c'est le bouton qu'on doit
   regarder, pas la ligne au-dessus. */
.verrou-t {
  font-size: var(--t-sm);
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--ink-soft);
}

/* ---- LE BOUTON DU VOILE ----

   Il n'emprunte plus le bouton plein du site, et c'est voulu. Un aplat
   d'ambre répété sept fois en descendant la page pèse comme une bannière
   de publicité, alors qu'il n'y a qu'UNE décision à prendre et qu'elle se
   prend une seule fois.

   Il garde donc la couleur mais lâche l'aplat : contour ambré, fond à
   peine teinté, texte ambré. Il ne se remplit qu'au survol — le moment où
   il redevient un vrai bouton est celui où on s'apprête à cliquer.

   La hauteur, elle, ne bouge pas : quarante-deux pixels, parce qu'un
   pouce sur un téléphone ne vise pas mieux quand le bouton est élégant. */
.verrou-btn {
  display: inline-flex;
  align-items: center;
  gap: var(--s2);
  min-height: 42px;
  padding: 0.5rem 1.05rem;
  font-family: var(--body);
  font-size: var(--t-md);
  font-weight: 600;
  letter-spacing: -0.005em;
  text-decoration: none;
  color: var(--a);
  background: color-mix(in srgb, var(--a) 11%, transparent);
  border: 1px solid color-mix(in srgb, var(--a) 45%, transparent);
  border-radius: var(--r-pill);
  transition: background 0.18s ease, border-color 0.18s ease,
              color 0.18s ease, transform 0.18s ease;
}

.verrou-btn:hover,
.verrou-btn:focus-visible {
  background: var(--a);
  border-color: var(--a);
  color: var(--on-accent);
  transform: translateY(-1px);
}

.verrou-ic { flex: none; opacity: 0.85; }

@media (prefers-reduced-motion: reduce) {
  .verrou-btn { transition: background 0.18s ease, color 0.18s ease; }
  .verrou-btn:hover, .verrou-btn:focus-visible { transform: none; }
}

/* LA HAUTEUR D'UN BLOC VOILÉ EST BORNÉE, ET C'EST UNE VRAIE DÉCISION.

   Mesuré sans borne : l'analyse avancée occupait 957 pixels de flou. Sept
   blocs dans cet état, c'est plusieurs écrans de bouillie grise à faire
   défiler pour arriver au suivant — la page devient pénible, et une page
   pénible ne vend rien.

   On n'en montre donc qu'un aperçu, comme on entrouvre une porte : assez
   pour voir qu'il y a une pièce derrière, pas assez pour la visiter. Le
   plancher sert au cas inverse — un bloc de deux lignes, où le bouton se
   retrouverait collé au titre. */
.bloc-verrouille {
  min-height: 15rem;
  max-height: 21rem;
}

@media (prefers-reduced-motion: reduce) {
  .spinner { animation: none; border-top-color: var(--line); }
  .bar { animation: none !important; clip-path: none !important; }
  .pb-tige > i, .pb-sm > i { animation: none !important; transform: none !important; }

  /* Le face-à-face arrive d'un coup, entier et lisible : aucune de ses
     apparitions ne porte d'information qui manquerait sans le mouvement.
     La ligne médiane garde sa transformation de centrage, sinon elle se
     décalerait d'un demi-pixel. */
  .team-top, .team .form, .team .absents, .form-dot {
    animation: none !important;
    opacity: 1 !important;
    transform: none !important;
  }
  .midcol::before { animation: none !important; transform: translateX(-50%) !important; }
}

@media (prefers-reduced-motion: reduce) and (max-width: 38rem) {
  .midcol::before { transform: translateY(-50%) !important; }
}