/* Statsmaker — feuille de l'écran 1 : ACCUEIL (front v2).
 *
 * Chargée par `{% block css %}` de `templates/v2/accueil.html`, APRÈS les six
 * feuilles de base. Ne contient QUE ce qui est propre à cet écran :
 *
 *   - `.sm-grid`, `.sm-grid2`, `.sm-carte`, `.sm-sec*`, `.sm-rubrique`,
 *     `.sm-vide`, `.sm-pastille`, `.sm-mt*`, `.sm-liste` vivent dans
 *     `sm-shell.css` (arbitrage A-13) : neuf écrans les consommeront ;
 *   - `.sm-score`, `.sm-score--locked`, `.sm-scope-*` vivent dans
 *     `sm-scope.css` depuis le lot périmètre.
 *
 * 🛑 UN PIÈGE, ET C'EST LE N° 1 DE CET ÉCRAN — VALABLE POUR LES NEUF SUIVANTS.
 *
 * **Sur `--sm-board-*`, on n'emploie JAMAIS un jeton de rampe.**
 * `--color-accent-100` vaut `#eef3ff` en clair (très visible sur le bleu nuit)
 * et `#0b1836` en sombre — soit **1,1:1 sur le panneau**, c'est-à-dire
 * invisible. Le panneau est HORS MODE (il est bleu nuit dans les deux thèmes) ;
 * ce qu'on pose dessus doit l'être aussi : `--sm-on-board` et des blancs
 * translucides, rien d'autre. Le panneau de l'écran Match reprendra la règle.
 *
 * 🛑 ZÉRO STYLE EN LIGNE, ZÉRO `?v=` À LA MAIN, ZÉRO JAVASCRIPT D'ÉCRAN.
 */

/* ══════════════════════════════════════════════════════════════════════════
   0. Titre et chapeau
   ══════════════════════════════════════════════════════════════════════════ */

.sm-ac-titre {
  margin: 0 0 var(--sp-2);
  font-family: var(--font-heading); font-size: var(--fs-page); line-height: 1.1;
}
.sm-ac-chapeau {
  margin: 0 0 var(--sp-8);
  font-size: var(--fs-body); color: var(--color-neutral-700); text-wrap: pretty;
}
/* Le chapeau est MASQUÉ sous 720 px : il ne dit rien que le contenu ne montre,
   et il coûterait 40 px sur le seul écran où le direct doit gagner la première
   vue. Même règle que sur Explore. */
@media (max-width: 720px) { .sm-ac-chapeau { display: none; } }

/* Les quatre sections sous la ligne de flottaison ne sont pas mises en page
   tant qu'elles ne sont pas affichées. `contain-intrinsic-size` est
   OBLIGATOIRE : sans lui, la barre de défilement saute pendant la descente. */
.sm-ac-diff { content-visibility: auto; contain-intrinsic-size: auto 480px; }

/* ══════════════════════════════════════════════════════════════════════════
   1. Le panneau vedette — TROIS ÉTATS, UNE SEULE HAUTEUR
   ══════════════════════════════════════════════════════════════════════════

   `--sm-panneau-h` est un jeton parce que les trois états le partagent :
   direct lisible (264 px), direct verrouillé (≈ 286 px), prochain rendez-vous
   (264 px). Tolérance ±22 px, contre ≈ 300 px si chaque état se dimensionnait
   seul — une page qui saute de 300 px selon l'heure est un défaut, pas un état.
   `justify-content: space-between` fait porter l'écart au blanc, pas au texte. */

.sm-live {
  min-height: var(--sm-panneau-h);
  display: flex; flex-direction: column; justify-content: space-between;
  border-radius: var(--r-card);
  background: var(--sm-board-a); color: var(--sm-on-board);
  padding: var(--sp-8) var(--sp-7);
  box-shadow: var(--shadow-lg); overflow: hidden;
}
.sm-live-rub { color: var(--sm-on-board); opacity: .8; }
.sm-live-meta {
  display: flex; align-items: center; gap: var(--sp-5); flex-wrap: wrap;
  margin: 0 0 var(--sp-8); font-size: var(--fs-cap);
}
.sm-badge-live {
  display: inline-flex; align-items: center; gap: var(--sp-2);
  padding: 3px 10px; border-radius: var(--r-pill);
  background: var(--sm-live); color: var(--sm-live-on);
  font-size: var(--fs-cap); font-weight: 700; letter-spacing: .05em;
  text-transform: uppercase;
}
/* Le point bat, mais l'information ne dépend PAS du battement : le mot
   « En direct » est écrit (1.4.1). `@keyframes sm-pulse` est du CSS pur, et le
   bloc `prefers-reduced-motion` de `sm-tokens.css` le neutralise sans qu'une
   règle de plus soit écrite ici. */
.sm-badge-live::before {
  content: ''; width: 7px; height: 7px; border-radius: var(--r-round);
  background: currentColor; animation: sm-pulse 1.1s infinite;
}

.sm-live-plateau {
  display: grid; grid-template-columns: 1fr auto 1fr; gap: var(--sp-6);
  align-items: center; text-align: center;
}
/* `min-width: 0` : le nom passe sur deux lignes, jamais l'ellipse — c'est la
   vedette de l'écran. */
.sm-live-eq {
  display: flex; flex-direction: column; align-items: center; gap: var(--sp-4);
  min-width: 0; font-size: var(--fs-body); font-weight: 600; text-wrap: pretty;
}
/* 🔴 56 px, ET NON LES 24 DU SOCLE. C'est la vedette de l'écran : un écusson de
 * 24 px n'y est pas discret, il est illisible — et un sigle de trois lettres à
 * 12 px sous un nom d'équipe à 15 est une redite minuscule. La maquette met 66 ;
 * on descend à 56 parce que la colonne `1fr` ne fait que ~110 px à 390 px de
 * large, et qu'un écusson qui touche le score n'est pas plus lisible.
 *
 * ⚠️ On pose `--sm-pastille-taille` et NON `width`/`height` : c'est cette
 * variable que lit la règle d'écusson de `sm-shell.css`. La changer autrement
 * donnerait une boîte de 56 px avec un logo de 24 dedans. Le fond neutre est
 * retiré : sur le panneau bleu nuit, `--color-neutral-200` est un rectangle
 * clair. Blanc translucide (piège n° 1 en tête de fichier). */
.sm-live-eq .sm-pastille {
  --sm-pastille-taille: 56px;
  background: rgba(255, 255, 255, .14);
  color: var(--sm-on-board);
  font-size: var(--fs-h4);
}
@media (max-width: 560px) {
  .sm-live-eq .sm-pastille { --sm-pastille-taille: 44px; font-size: var(--fs-body); }
}
.sm-live-centre { display: grid; place-items: center; gap: var(--sp-2); }
.sm-live-score {
  font-family: var(--font-heading); font-size: var(--fs-score); line-height: 1;
  letter-spacing: .02em;
}
.sm-live-score i { font-style: normal; opacity: .4; margin: 0 var(--sp-3); }
.sm-live-date { font-family: var(--font-heading); font-size: var(--fs-h4); }
.sm-live-min { font-size: var(--fs-cap); opacity: .7; }

/* ── Le verrou PLEIN FORMAT, et pourquoi il a le droit de l'être ─────────
 *
 * Il occupe EXACTEMENT la boîte du score (96 × 64 ≈ `--fs-score` + le « : »)
 * et rien d'autre : équipes, compétition, journée, minute restent lisibles. La
 * ligne reste, la valeur part.
 *
 * Il a le droit d'être gros **parce qu'il est UNIQUE sur la page**. §D.5
 * interdit le verrou bavard parce qu'il y est répété ; ici il est seul, au
 * point exact où le désir naît. Les cartes de la liste gardent leur pastille
 * discrète — c'est écrit aussi dans le gabarit, à l'endroit où l'on serait
 * tenté de « harmoniser ».
 *
 * ⚠️ Blancs translucides, PAS `--sm-lock-bg` (qui vaut `--color-accent-100`,
 * donc 1,1:1 sur le panneau en sombre). Bord blanc à 40 % = 3,74:1 (1.4.11),
 * cadenas `--sm-on-board` = 12,53:1 sur le fond du verrou. */
.sm-live-verrou {
  display: grid; place-items: center;
  width: 96px; height: 64px; border-radius: var(--r-card-in);
  background: rgba(255, 255, 255, .14);
  border: 1.5px solid rgba(255, 255, 255, .40);
  color: var(--sm-on-board); text-decoration: none;
}
.sm-live-verrou:hover { background: rgba(255, 255, 255, .22); }
.sm-live-verrou:focus-visible {
  outline: 2px solid var(--sm-on-board); outline-offset: 3px;
}
.sm-live-motif {
  margin: var(--sp-6) 0 var(--sp-2);
  font-family: var(--font-heading); font-size: var(--fs-h4);
}
/* Borné à 46 caractères : « Confédération Africaine de Football » tient sur
   deux lignes en français comme en anglais, sans ellipse. */
.sm-live-motif-txt {
  margin: 0; font-size: var(--fs-cap); opacity: .85; line-height: 1.45;
  text-wrap: pretty; max-width: 46ch;
}

.sm-live-bas {
  display: flex; align-items: center; gap: var(--sp-5); flex-wrap: wrap;
  margin-top: var(--sp-9); font-size: var(--fs-cap);
}
.sm-live-cta {
  background: var(--sm-on-board); color: var(--sm-board-a);
  border-radius: var(--r-pill); padding: 0 var(--sp-9);
  min-height: var(--sm-tap-min);
  display: inline-flex; align-items: center; gap: var(--sp-3);
  font-family: var(--font-heading); font-size: var(--fs-body);
  text-decoration: none;
}
.sm-live-cta:focus-visible {
  outline: 2px solid var(--sm-on-board); outline-offset: 3px;
}
.sm-live-second {
  display: inline-flex; align-items: center; min-height: var(--sm-tap-min);
  color: var(--sm-on-board); opacity: .9; font-weight: 600;
}
@media (max-width: 560px) {
  .sm-live { padding: var(--sp-7) var(--sp-6); }
  .sm-live-plateau { gap: var(--sp-4); }
  .sm-live-cta { width: 100%; justify-content: center; }
}

/* ══════════════════════════════════════════════════════════════════════════
   2. Salutation et puces de suivi
   ══════════════════════════════════════════════════════════════════════════
   NEUTRES, jamais vertes ni bleues : le vert dit le périmètre, le bleu dit le
   verrou. Un troisième vocabulaire coloré rendrait les deux premiers
   illisibles. */

.sm-salut { margin-top: var(--sp-8); }
.sm-salut-h { margin: 0; font-family: var(--font-heading); font-size: var(--fs-h2-sec); }
.sm-salut-vide { margin: var(--sp-3) 0 0; font-size: var(--fs-body-sm); color: var(--color-neutral-700); }
.sm-chips {
  display: flex; gap: var(--sp-3); flex-wrap: wrap;
  margin: var(--sp-4) 0 0; padding: 0; list-style: none;
}
.sm-chip {
  display: inline-flex; align-items: center; gap: var(--sp-2);
  min-height: var(--sm-tap-min); padding: 0 var(--sp-6);
  border-radius: var(--r-pill);
  background: var(--color-neutral-200); color: var(--color-neutral-800);
  font-size: var(--fs-ui); font-weight: 600; text-decoration: none;
  white-space: nowrap; max-width: 100%; overflow: hidden; text-overflow: ellipsis;
}
.sm-chip:hover { background: var(--color-neutral-300); }
.sm-chip-sig { font-family: var(--font-heading); color: var(--color-neutral-700); }

/* ══════════════════════════════════════════════════════════════════════════
   3. Les sept destinations
   ══════════════════════════════════════════════════════════════════════════
   `auto-fill minmax(158px, 1fr)` → deux colonnes à 390 px, sept sur une rangée
   à 1120 px. Aucune largeur fixe : rien à faire déborder. */

.sm-dest {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(158px, 1fr));
  gap: var(--sp-5);
}
.sm-dest-t {
  display: flex; flex-direction: column; gap: var(--sp-3);
  background: var(--color-surface); border-radius: var(--r-card);
  box-shadow: var(--shadow-sm); padding: var(--sp-7);
  text-decoration: none; color: inherit;
}
.sm-dest-t:hover { box-shadow: var(--shadow-md); }
/* ⚠️ L'icône est peinte en `--color-bg`, PAS en `#fff` (arbitrage A-12). En
   thème sombre, `--color-accent` devient `#6c96ff` : une icône blanche y tombe
   à 2,82:1. `--color-bg` est exactement la solution déjà retenue par
   `.btn-primary`. */
.sm-dest-ic {
  width: 36px; height: 36px; border-radius: var(--r-icon);
  display: grid; place-items: center;
  background: var(--color-accent); color: var(--color-bg);
}
.sm-dest-ic--matchs       { background: var(--color-accent-2-700); }  /* 6,62 / 9,08 */
.sm-dest-ic--competitions { background: var(--color-accent); }        /* 6,17 / 6,89 */
.sm-dest-ic--talents      { background: var(--color-accent-700); }    /* 8,59 / 6,89 */
.sm-dest-ic--communaute   { background: var(--color-accent-2-600); }  /* 4,55 / 6,34 */
.sm-dest-ic--scouting     { background: var(--color-accent-2-700); }  /* 6,62 / 9,08 */
/* 🛑 `--sm-draw-text` et NON `#c99a2e` (arbitrage A-2) : 2,58 → 4,96 en clair,
   10,55 en sombre. En sombre, `--sm-draw-text` VAUT `--sm-draw` : l'aspect y
   est inchangé au pixel. */
.sm-dest-ic--discipline   { background: var(--sm-draw-text); }        /* 4,96 / 10,55 */
.sm-dest-ic--glossaire    { background: var(--color-neutral-700); }   /* 7,51 / 10,44 */
.sm-dest-lab { font-family: var(--font-heading); font-size: 15.5px; }
.sm-dest-desc {
  font-size: var(--fs-cap); color: var(--color-neutral-700);
  line-height: 1.4; text-wrap: pretty;
}
/* Sous 380 px, `minmax(158px, 1fr)` ne tient plus à deux colonnes une fois les
   40 px de marge du `<main>` retirés : la grille passerait à une colonne et les
   sept tuiles occuperaient 700 px. On rétrécit la piste plutôt que la colonne —
   deux tuiles restent lisibles à 145 px, la description passant sur trois
   lignes. */
@media (max-width: 380px) {
  .sm-dest { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-4); }
  .sm-dest-t { padding: var(--sp-6); }
}

/* ══════════════════════════════════════════════════════════════════════════
   3b. L'ORDRE DE LA GRILLE SUR TÉLÉPHONE
   ══════════════════════════════════════════════════════════════════════════

   🛑 DÉCISION CLIENT : les MEILLEURS BUTEURS remontent AVANT les actualités.
   Empilées dans l'ordre du DOM, les deux colonnes donnaient huit cartes de
   match, puis trois actualités, puis seulement le classement — vers 2 000 px,
   c'est-à-dire jamais lu, alors que c'est le contenu le plus consulté d'un
   produit de statistiques.

   Le mécanisme : les deux enveloppes de colonne passent en `display: contents`,
   leurs sections deviennent donc les enfants directs du conteneur, et `order`
   les range. C'est le seul dispositif qui ne duplique aucun balisage et qui
   survive aux QUATRE sections optionnelles (prochains matchs, agenda,
   compétitions, Passez Pro) — une grille à rangées explicites deviendrait
   fausse dès qu'une seule manque.

   ⚠️ `gap: 0` : l'espacement vertical vient déjà de `.sm-sec { margin-top }`.
   Laisser le `gap: var(--sp-9)` de `.sm-grid` l'aurait doublé sur téléphone,
   là précisément où la place manque.

   ⚠️ Le point de bascule est 900 px — la MÊME valeur que le repli de `.sm-grid`
   dans `sm-theme.css`. Deux seuils différents produiraient une bande de largeurs
   où les sections seraient ordonnées sans être empilées. */

@media (max-width: 900px) {
  .sm-ac-grid { display: flex; flex-direction: column; gap: 0; }
  .sm-ac-grid > div,
  .sm-ac-grid > .sm-aside { display: contents; }
  .sm-ac-o1 { order: 1; }   /* Derniers résultats  */
  .sm-ac-o2 { order: 2; }   /* Prochains matchs    */
  .sm-ac-o3 { order: 3; }   /* Meilleurs buteurs   */
  .sm-ac-o4 { order: 4; }   /* Actualités          */
  .sm-ac-o5 { order: 5; }   /* Agenda              */
  .sm-ac-o6 { order: 6; }   /* Compétitions à la une */
  .sm-ac-o7 { order: 7; }   /* Passez Pro          */
}

/* ══════════════════════════════════════════════════════════════════════════
   4. Le sondage — trois visages, dont DEUX en pilules nues
   ══════════════════════════════════════════════════════════════════════════

   🛑 EN S-a (anonyme) ET S-b (connecté sans droit) : AUCUNE PISTE, AUCUN
   REMPLISSAGE, AUCUNE CLASSE DE POURCENTAGE — le gabarit ne rend PAS ces
   éléments, il ne les met pas à zéro. Une piste à `width: 0` reste une piste :
   au premier correctif, quelqu'un la remplira.

   Le visage S-c (D-2 : authentifié ET (résultats publics OU permission)) a son
   propre bloc, plus bas, et il ne s'applique qu'à un balisage que le contexte
   seul autorise à exister.

   Les options ONT L'AIR DE SE CLIQUER (44 px, bordées, pleine largeur). La
   maquette dessinait des barres de résultat, qui ont l'air de se LIRE : changer
   l'affordance change l'intention. */

.sm-sd { margin-top: var(--sp-10); align-items: start; }
.sm-sd-q {
  margin: 0 0 var(--sp-6);
  font-family: var(--font-heading); font-size: var(--fs-h4); line-height: 1.2;
  /* Jamais d'ellipse : une question tronquée n'est plus une question. */
  text-wrap: pretty;
}
.sm-sd-pied {
  margin: var(--sp-6) 0 0;
  font-size: var(--fs-cap); color: var(--color-neutral-700); text-wrap: pretty;
}
.sm-sd-opts {
  display: flex; flex-direction: column; gap: var(--sp-3);
  margin: 0; padding: 0; list-style: none;
}
.sm-sd-opt {
  display: flex; align-items: center; min-height: var(--sm-tap-min);
  padding: var(--sp-3) var(--sp-7); border-radius: var(--r-pill);
  border: 1px solid var(--sm-border-field);   /* 5,00:1 — c'est un CONTRÔLE */
  font-size: var(--fs-body); font-weight: 600;
  text-decoration: none; color: inherit; text-wrap: pretty;
}
.sm-sd-opt:hover {
  background: var(--color-neutral-100); border-color: var(--sm-border-field-hover);
}

/* ── Visage S-c UNIQUEMENT — le lecteur A LE DROIT aux résultats (D-2) ─────
 *
 * Ces règles ne dessinent quoi que ce soit que si le gabarit a rendu les
 * éléments, c'est-à-dire si la clé `resultats` existait dans le contexte. Une
 * feuille de style ne divulgue rien : le garde-fou est en amont (F-2). */
.sm-sd-res { position: relative; overflow: hidden; }
.sm-sd-piste { position: absolute; inset: 0; background: var(--color-accent-100); }
.sm-sd-part { position: absolute; inset: 0 auto 0 0; background: var(--color-accent-200); }
.sm-sd-lab {
  position: relative; display: flex; justify-content: space-between;
  width: 100%; gap: var(--sp-4);
}
.sm-sd-pct { font-family: var(--font-heading); font-variant-numeric: tabular-nums; }
.sm-sd-moi { font-weight: 700; color: var(--color-accent-800); }   /* 11,30:1 */

/* Les 21 largeurs quantifiées (pas de 5 %, voir `services.discipline.PAS_BARRE`)
 * — JAMAIS un `style="width:…"`, qui interdirait la CSP stricte. Même dispositif
 * qu'à l'écran Discipline, et le pourcentage exact est écrit en clair à côté :
 * la barre illustre, le nombre informe. */
.sm-sd-p0 { display: none; }
.sm-sd-p5 { width: 5%; }    .sm-sd-p10 { width: 10%; }
.sm-sd-p15 { width: 15%; }  .sm-sd-p20 { width: 20%; }
.sm-sd-p25 { width: 25%; }  .sm-sd-p30 { width: 30%; }
.sm-sd-p35 { width: 35%; }  .sm-sd-p40 { width: 40%; }
.sm-sd-p45 { width: 45%; }  .sm-sd-p50 { width: 50%; }
.sm-sd-p55 { width: 55%; }  .sm-sd-p60 { width: 60%; }
.sm-sd-p65 { width: 65%; }  .sm-sd-p70 { width: 70%; }
.sm-sd-p75 { width: 75%; }  .sm-sd-p80 { width: 80%; }
.sm-sd-p85 { width: 85%; }  .sm-sd-p90 { width: 90%; }
.sm-sd-p95 { width: 95%; }  .sm-sd-p100 { width: 100%; }

/* ══════════════════════════════════════════════════════════════════════════
   5. Actualités et agenda
   ══════════════════════════════════════════════════════════════════════════ */

.sm-actu {
  display: grid; grid-template-columns: 96px minmax(0, 1fr); gap: var(--sp-6);
  align-items: center; padding: var(--sp-5) var(--sp-7);
  text-decoration: none; color: inherit;
}
.sm-actu + .sm-actu, .sm-liste li + li > .sm-actu {
  border-top: 1px solid var(--color-divider);
}
.sm-actu-vig { width: 96px; height: 70px; border-radius: var(--r-sm); object-fit: cover; }
/* Repli sans image : une tuile teintée. JAMAIS un fichier de remplacement — il
   coûterait une requête réseau pour ne rien dire. */
.sm-actu-mono {
  width: 96px; height: 70px; border-radius: var(--r-sm);
  display: grid; place-items: center;
  background: var(--color-neutral-200); color: var(--color-neutral-700);
  font-family: var(--font-heading); font-size: var(--fs-h3);
}
.sm-actu-corps { min-width: 0; }
.sm-actu-meta {
  display: block; font-size: var(--fs-cap); text-transform: uppercase;
  letter-spacing: .05em; font-weight: 700; color: var(--color-neutral-700);
}
.sm-actu-titre {
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden;
  margin: 6px 0 0; font-family: var(--font-heading); font-size: 16px;
  line-height: 1.15; text-wrap: pretty;
}

.sm-ev {
  display: grid; grid-template-columns: 42px minmax(0, 1fr); gap: var(--sp-5);
  align-items: center; min-height: var(--sm-tap-min);
  padding: var(--sp-4) var(--sp-7); text-decoration: none; color: inherit;
}
.sm-liste li + li > .sm-ev { border-top: 1px solid var(--color-divider); }
.sm-ev-date { display: grid; place-items: center; }
.sm-ev-j { font-family: var(--font-heading); font-size: 19px; line-height: 1; }
.sm-ev-m {
  font-size: var(--fs-cap); text-transform: uppercase;
  color: var(--color-neutral-700);
}
.sm-ev-corps { min-width: 0; }
.sm-ev-t { display: block; font-size: var(--fs-body-sm); font-weight: 600; }
.sm-ev-s { display: block; font-size: var(--fs-cap); color: var(--color-neutral-700); }

/* ══════════════════════════════════════════════════════════════════════════
   6. Buteurs et compétitions
   ══════════════════════════════════════════════════════════════════════════ */

.sm-but {
  display: grid; grid-template-columns: 26px 36px minmax(0, 1fr) auto;
  gap: var(--sp-4); align-items: center; padding: var(--sp-4) var(--sp-7);
  min-height: var(--sm-tap-min); text-decoration: none; color: inherit;
}
.sm-but + .sm-but { border-top: 1px solid var(--color-divider); }
.sm-but:hover { background: var(--color-neutral-100); }
.sm-but-rang {
  font-family: var(--font-heading); font-size: var(--fs-num-md);
  color: var(--color-accent-700); text-align: center;
}
/* 🔴 LA PHOTO SI ELLE EXISTE, LE MONOGRAMME SINON.
 *
 * L'ancienne règle disait « monogramme, pas de photo, parce que la moitié des
 * photos sont absentes ». C'était un constat sur les DONNÉES érigé en règle de
 * forme — et il justifiait de ne jamais servir un champ que le modèle porte.
 * Sur un produit de football, un visage se reconnaît là où « KM » se déchiffre.
 *
 * ⚠️ `cover` et non `contain` : une photo de joueur est un portrait cadré, la
 * rogner au rond est le rendu attendu. C'est l'inverse de l'écusson d'équipe
 * (`contain`), dont la forme varie du cercle à l'écu et qu'un recadrage rendrait
 * méconnaissable. Les deux règles sont opposées **et c'est voulu**.
 *
 * La boîte de 36 px est celle du monogramme : la ligne ne change pas de hauteur
 * selon qu'une photo existe ou non. */
/* ⚠️ Depuis le lot D, cette classe habille la BOÎTE de la vignette
 * (`v2/partials/_portrait_personne.html`) et non plus l'`<img>` :
 * l'arrondi, le centrage du monogramme et le recadrage viennent de
 * `.sm-pastille` et `.sm-pastille--visage` (`sm-shell.css`). Il ne reste
 * ici que la taille et le fond. `--sm-pastille-taille` est ce que lit la
 * règle d'écusson du socle pour donner une largeur DÉFINIE dès qu'il y a
 * une image ; sans elle, la boîte retombe à 24 px. */
/* 🔴 `.sm-but-mono` a disparu : c'était la moitié « pas de photo » d'un même
 * composant, écrite comme une classe distincte. Les deux boîtes devaient rester
 * de la même taille pour que la ligne ne saute pas — deux règles pour un
 * invariant, c'est l'invariant qui finit par céder. */
.sm-but-photo {
  --sm-pastille-taille: 36px;
  width: 36px; height: 36px;
  background: var(--color-neutral-200);
}
.sm-but-corps { min-width: 0; }
.sm-but-nom {
  display: block; font-size: var(--fs-body-sm); font-weight: 600;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.sm-but-meta { display: block; font-size: var(--fs-cap); color: var(--color-neutral-700); }

/* ── LE DRAPEAU : il ILLUSTRE, il ne remplace pas ──────────────────────────
 * Le nom du pays reste écrit à côté. Un drapeau de 16 px est indiscernable
 * entre le Tchad et la Roumanie, et il est muet pour un lecteur d'écran — d'où
 * `alt=""` dans le gabarit et le texte conservé. Le filet à 1 px détache les
 * drapeaux à bande blanche (Nigeria, Sierra Leone) du fond de la carte.
 * Une seule écriture pour les deux emplois (buteurs, compétitions) : le jour où
 * la taille change, elle change aux deux endroits. */
.sm-but-drapeau,
.sm-comp-drapeau {
  width: 16px; height: 12px; object-fit: cover;
  border-radius: 2px; border: 1px solid var(--color-divider);
  vertical-align: -1px; margin-inline-end: var(--sp-2);
}
.sm-but-nb {
  font-family: var(--font-heading); font-size: var(--fs-num-lg);
  color: var(--color-accent-700); text-align: right;
}
.sm-but-nb small {
  display: block; font-family: var(--font-body); font-size: var(--fs-micro);
  font-weight: 400; color: var(--color-neutral-700); text-align: center;
}

/* Carré arrondi = une ORGANISATION (règle de forme §A.5) ; le rond est réservé
   aux équipes. */
.sm-comp {
  display: grid; grid-template-columns: 28px minmax(0, 1fr); gap: var(--sp-5);
  align-items: center; padding: var(--sp-4) var(--sp-7);
  min-height: var(--sm-tap-min); text-decoration: none; color: inherit;
}
.sm-comp + .sm-comp { border-top: 1px solid var(--color-divider); }
.sm-comp:hover { background: var(--color-neutral-100); }
/* ⚠️ Depuis le lot D, cette classe habille la BOÎTE de la vignette
 * (`v2/partials/_pastille_competition.html`) : le fond, le centrage du sigle
 * et le contenu de l'image viennent de `.sm-pastille` (`sm-shell.css`), et la
 * forme carrée arrondie de `.sm-pastille--org`. `.sm-comp-logo--sigle`, qui
 * était la moitié « pas de logo » du même composant, a disparu avec elle.
 * `--sm-pastille-taille` est ce que lit la règle d'écusson du socle. */
.sm-comp-logo {
  --sm-pastille-taille: 28px;
  width: 28px; height: 28px;
  flex: 0 0 auto;
  background: var(--color-neutral-100);
  font-size: 10px; letter-spacing: .02em;
  color: var(--color-neutral-700);
  text-transform: uppercase;
}
.sm-comp-corps { min-width: 0; }
.sm-comp-nom {
  display: block; font-size: var(--fs-body-sm); font-weight: 600;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.sm-comp-meta { display: block; font-size: var(--fs-cap); color: var(--color-neutral-700); }

/* ══════════════════════════════════════════════════════════════════════════
   7. « Passez Pro »
   ══════════════════════════════════════════════════════════════════════════
   Une phrase, une porte. AUCUNE liste de fonctionnalités, aucun nom de formule,
   aucun prix. */

.sm-pro {
  margin-top: var(--sp-10);
  background: var(--color-accent-700); color: var(--color-bg);
  border-radius: var(--r-card); padding: var(--sp-8);
}
.sm-pro-h {
  margin: 0 0 var(--sp-2); color: var(--color-bg);
  font-family: var(--font-heading); font-size: var(--fs-h4);
}
.sm-pro-t { margin: 0 0 var(--sp-6); font-size: var(--fs-ui); opacity: .92; text-wrap: pretty; }
.sm-pro-cta {
  display: flex; justify-content: center; align-items: center;
  min-height: var(--sm-tap-min); width: 100%; border-radius: var(--r-pill);
  background: var(--color-bg); color: var(--color-accent-800);
  font-family: var(--font-heading); font-size: var(--fs-body);
  text-decoration: none;
}

/* ══════════════════════════════════════════════════════════════════════════
   8. « Pensé pour chaque acteur » — anonymes seulement, EN FIN DE PAGE
   ══════════════════════════════════════════════════════════════════════════ */

.sm-acteurs {
  margin-top: var(--sp-10); border-radius: var(--r-card);
  background: var(--sm-board-a); color: var(--sm-on-board);
  padding: var(--sp-10) var(--sp-9);
}
.sm-acteurs-h { margin: 0; font-family: var(--font-heading); font-size: var(--fs-h2-sec); }
.sm-acteurs-t { margin: var(--sp-2) 0 var(--sp-8); font-size: var(--fs-body); opacity: .85; text-wrap: pretty; }
.sm-acteurs-g {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
  gap: var(--sp-5);
}
/* Blancs translucides — voir le piège n° 1 en tête de fichier. */
.sm-acteur {
  display: block; border-radius: var(--r-card-in);
  background: rgba(255, 255, 255, .10); padding: var(--sp-7);
  color: inherit; text-decoration: none;
}
.sm-acteur:hover { background: rgba(255, 255, 255, .16); }
.sm-acteur-h { display: block; font-family: var(--font-heading); font-size: var(--fs-body); }
.sm-acteur-t { display: block; margin-top: var(--sp-2); font-size: var(--fs-cap); opacity: .85; line-height: 1.45; text-wrap: pretty; }

/* ══════════════════════════════════════════════════════════════════════════
   9. Les quatre chiffres
   ══════════════════════════════════════════════════════════════════════════
   AUCUNE animation de compteur. Le `purecounter` du v1 fait grandir un chiffre
   pendant une seconde — mouvement non essentiel (donc à neutraliser sous
   `reduce`), un script de plus, et la valeur est illisible pendant qu'elle
   défile. Pire : il rendait un `<span>` VIDE, donc quatre chiffres invisibles
   sans JavaScript. */

.sm-chiffres {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
  gap: var(--sp-5); margin-top: var(--sp-10);
}
.sm-chiffre {
  background: var(--color-surface); border-radius: var(--r-card);
  box-shadow: var(--shadow-sm); padding: 15px; text-align: center;
}
.sm-chiffre-v {
  display: block; font-family: var(--font-heading); font-size: var(--fs-num-lg);
  color: var(--color-accent-700); line-height: 1.1;   /* 9,31:1 sur carte */
}
.sm-chiffre-l { display: block; margin-top: 2px; font-size: var(--fs-cap); color: var(--color-neutral-700); }