/* ============================================================
   LE BILAN — la page qui donne des chiffres contre soi.

   PARTI PRIS VISUEL : la sobriété d'un rapport, pas l'euphorie
   d'une page de vente. Aucun chiffre n'est agrandi pour
   impressionner, aucune couleur de victoire ne domine. Le seul
   accent ambre est posé sur le taux réel — pas sur le repère
   auquel on le compare, sinon on choisirait le camp du lecteur
   à sa place.

   Le rouge des ratés est aussi visible que le vert des réussites,
   et de la même taille. C'est ce qui rend le vert crédible.
   ============================================================ */

.bl-mot {
  padding: var(--s6) 0;
  color: var(--ink-soft);
  font-size: var(--t-base);
  line-height: 1.6;
  max-width: 60ch;
}

/* ---- les trois chiffres du haut ---- */

.bl-chiffres {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
  gap: var(--s4);
  margin: var(--s5) 0 var(--s7);
}

.bl-c {
  display: flex;
  flex-direction: column;
  gap: var(--s2);
  padding: var(--s5);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
}

/* le chiffre du milieu est le sujet de la page : il prend l'ambre et le
   fond légèrement détaché, rien de plus */
.bl-c-fort {
  border-color: var(--a);
  background: var(--surface-alt);
}

.bl-v {
  font-family: var(--mono);
  font-variant-numeric: tabular-nums;
  font-size: var(--t-xl);
  font-weight: 600;
  letter-spacing: -0.03em;
  line-height: 1;
  color: var(--ink);
}

.bl-c-fort .bl-v { color: var(--a); }

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

.bl-k strong { color: var(--ink); }

/* ---- les blocs ---- */

.bl-bloc { margin-bottom: var(--s7); }

.bl-bloc h2,
.bl-methode h2,
.bl-limites h2 {
  font-family: var(--display);
  font-size: var(--t-lg);
  font-weight: 700;
  font-stretch: var(--w-serre);
  letter-spacing: -0.015em;
  margin-bottom: var(--s3);
  max-width: 40ch;
}

.bl-intro {
  color: var(--ink-soft);
  font-size: var(--t-sm);
  line-height: 1.6;
  max-width: 66ch;
  margin-bottom: var(--s4);
}

/* ---- les tableaux ----
   Ils reprennent le squelette des tableaux de la page Équipes, que la
   page charge déjà : mêmes colonnes numériques alignées, même filet. */

.bl-t { width: 100%; border-collapse: collapse; font-size: var(--t-sm); }

.bl-t th,
.bl-t td {
  padding: var(--s3) var(--s2);
  border-bottom: 1px solid var(--line-soft);
  text-align: left;
}

.bl-t th {
  font-size: var(--t-xs);
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--ink-faint);
  border-bottom-color: var(--line);
}

.bl-t .r { text-align: right; }
.bl-t .num { font-family: var(--mono); font-variant-numeric: tabular-nums; }
.bl-t .douce { color: var(--ink-faint); }
.bl-t .pts { color: var(--ink); font-weight: 650; }

/* L'écart entre ce qui est promis et ce qui arrive. Trois états, et le
   vocabulaire compte : « trop sûr de lui » plutôt que « faux », parce
   qu'un modèle mal calibré n'est pas un modèle qui se trompe — il a
   raison moins souvent qu'il ne le dit. */
.bl-trop-sur { color: var(--warn); font-weight: 650; }
.bl-trop-prudent { color: var(--ink-soft); }
.bl-juste { color: var(--ink-faint); }

/* Encart, et non filet latéral : le trait de trois pixels le long du
   bord gauche est le tic le plus reconnaissable des interfaces faites
   à la chaîne. Un fond ambre très bas distingue tout aussi bien. */
.bl-lecture {
  margin-top: var(--s4);
  border: 1px solid var(--a-soft);
  border-radius: var(--r-sm);
  background: var(--a-soft);
  padding: var(--s3) var(--s4);
  color: var(--ink-soft);
  font-size: var(--t-sm);
  line-height: 1.6;
  max-width: 68ch;
}

.bl-lecture strong { color: var(--ink); }

/* ---- le carnet ---- */

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

.bl-carte {
  display: flex;
  flex-direction: column;
  gap: var(--s1);
  padding: var(--s3) var(--s4);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  font-size: var(--t-sm);
}

/* Le seul endroit du site où le vert et le rouge servent à autre chose
   qu'à un état de formulaire. Ils sont posés sur le CONTOUR, pas sur le
   fond : une carte entièrement rouge se lirait comme une erreur du site,
   alors qu'il s'agit d'une prévision manquée — ce qui est normal, et ce
   qu'on assume.

   Le contour entier, et non plus l'arête gauche seule épaissie à trois
   pixels : ce filet-là est devenu la signature des interfaces produites
   à la chaîne. Un pixel tout autour dit la même chose sans le tic.

   --win et --loss existent déjà dans le socle : ce sont les couleurs de la
   victoire et de la défaite utilisées partout ailleurs sur le site, et
   elles ont chacune leur version pour le thème clair. Rien à inventer. */
.bl-carte.ok { border-color: var(--win); }
.bl-carte.rate { border-color: var(--loss); }

.bl-affiche { color: var(--ink); }
.bl-affiche .num { color: var(--ink-soft); }

.bl-dit { color: var(--ink-soft); font-size: var(--t-xs); }
.bl-dit strong { color: var(--ink); font-weight: 600; }
.bl-dit .num { color: var(--ink-faint); }

.bl-quand { color: var(--ink-faint); font-size: var(--t-xs); }

/* ---- la méthode et les limites ---- */

.bl-methode,
.bl-limites {
  border-top: 1px solid var(--line);
  padding-top: var(--s6);
  margin-top: var(--s6);
}

.bl-methode p,
.bl-limites p {
  color: var(--ink-soft);
  font-size: var(--t-sm);
  line-height: 1.65;
  max-width: 68ch;
  margin-bottom: var(--s4);
}

.bl-methode p:last-child,
.bl-limites p:last-child { margin-bottom: 0; }

.bl-methode strong,
.bl-limites strong { color: var(--ink); }

/* Le signe pour cent, collé au nombre. Il reprend la police du texte
   courant : dans la police à chasse fixe, il occupe la largeur d'un
   chiffre et creuse un trou entre lui et son nombre. C'est déjà la
   solution retenue dans le héros de la page d'accueil. */
.bl-u {
  font-family: var(--body);
  font-size: 0.82em;
  margin-left: 0.12em;
}