/* Statsmaker — le bloc de périmètre et le verrou (design §D.1 à §D.5).
 *
 * ── Pourquoi un fichier à part, et pourquoi il est le seul de `css/v2/` à
 *    porter des valeurs littérales ────────────────────────────────────────
 *
 * Ce composant est le plus transverse du produit : il accompagne TOUT agrégat
 * partiel, donc il apparaît sur presque tous les écrans. Or les écrans qui en
 * ont besoin AUJOURD'HUI — accueil, fiche d'arbitre, fiche d'entraîneur, détail
 * de match — sont encore des écrans v1, et `base.html` (v1) ne charge ni
 * `ds-tokens.css` ni `sm-tokens.css`. Les y ajouter n'est pas une option :
 * `ds-tokens.css` restyle `body`, `h1`→`h6`, `a`, `img` et pose
 * `box-sizing:border-box` sur `*`. Il repeindrait le front v1 en entier.
 *
 * Trois issues étaient possibles. Recopier les règles côté v1 : deux
 * définitions d'un même composant, donc deux doctrines de gating au premier
 * correctif — refusé. N'afficher le bloc que sur les écrans v2 : c'est violer
 * V-09, puisque les correctifs de fuite portent justement sur des écrans v1, et
 * une donnée qui disparaît sans explication se lit comme une régression.
 * Retenue : **une seule définition, rendue autonome** par le second argument de
 * `var()`. Sous v2 les jetons existent et gagnent ; sous v1 le repli littéral
 * s'applique. Le fichier reste la source unique, et il tient debout seul.
 *
 * ⚠️ Les littéraux ci-dessous sont les valeurs du THÈME CLAIR de
 * `sm-theme.css`, recopiées une fois, et elles ne servent QUE de repli v1 (le
 * front v1 n'a pas de thème sombre). Toute évolution de palette se fait dans
 * `sm-theme.css` : le repli est un filet, pas une palette concurrente.
 *
 * ── Les trois vocabulaires, et pourquoi ils ne se mélangent pas (§D.0.3) ──
 *   périmètre  → VERT  (`--sm-scope-*`)  : une information de comptage
 *   verrou     → BLEU  (`--sm-lock-*`)   : ce qui est effectivement masqué
 *   badge      → NEUTRE                  : un fait statistique, PAS un verrou
 * Jamais de rouge : le rouge reste aux erreurs et aux cartons.
 */

/* ══ 1. La ligne de périmètre (§D.1) ══════════════════════════════════════
 * Ce n'est pas un encart, c'est une LIGNE, posée sous le titre du bloc qu'elle
 * qualifie. Le liseré latéral de 3px est le motif universel de la NOTE : il se
 * voit sans arrêter la lecture, contrairement à un cadre sur quatre côtés qui
 * se lit comme une alerte — et une alerte répétée sur onze écrans finit ignorée.
 */
.sm-scope-line {
  display: flex; align-items: flex-start; gap: 7px; flex-wrap: wrap;
  margin: var(--sp-2, 6px) 0 0; padding-left: var(--sp-3, 10px);
  border-left: 3px solid var(--sm-scope-border, #95d7bb);
  font-size: var(--fs-micro, 11.5px); font-weight: 400; line-height: 1.4;
  color: var(--sm-scope-fg, #052e20); text-align: left; text-wrap: pretty;
}
.sm-scope-line strong { font-weight: 700; }
.sm-scope-line a {
  color: inherit; font-weight: 700; text-underline-offset: 3px;
}
.sm-scope-ic { display: flex; flex: none; margin-top: 1px; }

/* CL-46 — « aucune donnée sur votre périmètre » bascule au vocabulaire du
 * verrou : à ce stade il n'y a plus de comptage à annoncer, il n'y a plus que
 * du masqué. */
.sm-scope-vide {
  color: var(--sm-lock-fg, #0f2c7c);
  border-left-color: var(--sm-lock-border, #b4c8ff);
}

/* ══ 2. Le verrou (§D.3) ══════════════════════════════════════════════════
 * Vocabulaire commun aux variantes 1 et 4 : cadenas, fond bleu pâle, texte
 * bleu foncé, UNE action (§D.0.4 — deux boutons obligent à choisir, donc à
 * hésiter).
 */
.sm-verrou {
  background: var(--sm-lock-bg, #eef3ff);
  color: var(--sm-lock-fg, #0f2c7c);
  border-radius: var(--r-sm, 12px);
  padding: 10px 14px;
}
.sm-verrou-ic { display: inline-flex; flex: none; color: var(--sm-lock-icon, #143caa); }
.sm-verrou-titre {
  font-family: var(--font-heading, inherit);
  font-size: 20px; line-height: 1.25; margin: 10px 0 6px;
}
.sm-verrou-txt { font-size: 14px; line-height: 1.5; margin: 0 0 8px; text-wrap: pretty; }

/* Variante 1 — la page de gate. Bloc centré, largeur de lecture bornée : au
 * delà de ~560px une ligne de 14px devient pénible à suivre. */
.sm-verrou--total {
  max-width: 560px; margin: 24px auto; padding: 24px; text-align: center;
}
.sm-verrou--total .sm-verrou-ic {
  width: 56px; height: 56px; align-items: center; justify-content: center;
  background: var(--sm-lock-bg, #eef3ff);
  border-radius: var(--r-card, 16px);
}
.sm-verrou-formules { list-style: none; margin: 16px 0; padding: 0; text-align: left; }
.sm-verrou-formules li {
  display: flex; justify-content: space-between; gap: 12px;
  padding: 8px 12px; border-radius: var(--r-sm, 12px);
  background: var(--color-bg, #ffffff);
}
.sm-verrou-formule-nom { font-family: var(--font-heading, inherit); font-size: 14px; }
.sm-verrou-formule-prix { font-size: 13px; font-variant-numeric: tabular-nums; }

/* Variante 4 — l'encart de ciblage. Une ligne, un CTA à droite, rien de plus :
 * il n'a rien à vendre, il a quelque chose à expliquer. */
.sm-verrou--ciblage { display: flex; align-items: flex-start; gap: 10px; }
.sm-verrou--ciblage .sm-verrou-ic { margin-top: 3px; }
.sm-verrou-corps { flex: 1 1 auto; min-width: 0; }
.sm-verrou-corps .sm-verrou-txt:last-child { margin-bottom: 0; }
.sm-verrou-cta { flex: none; align-self: center; }
@media (max-width: 560px) {
  .sm-verrou--ciblage { flex-wrap: wrap; }
  .sm-verrou-cta { width: 100%; text-align: center; }
}

/* ══ 3. Variante 3 — la pastille de score verrouillée (§D.5) ══════════════
 * 🛑 MÊME boîte, MÊMES dimensions que `.sm-score` accessible. C'est le point
 * critique et la seule raison pour laquelle `min-width` est ici : une pastille
 * plus étroite ou plus large désaligne la colonne et rend le tableau illisible
 * — le lecteur cesse alors de comparer les lignes, ce qui est tout ce qu'il
 * venait faire.
 */
.sm-score {
  display: inline-grid; place-items: center;
  min-width: 52px; min-height: 28px; padding: 3px 12px;
  border-radius: var(--r-xs, 8px); background: var(--color-bg, #f3f6fb);
  font-family: var(--font-heading, inherit); font-size: 16px;
  font-variant-numeric: tabular-nums;
}
.sm-score--locked {
  grid-auto-flow: column; gap: 4px;
  background: var(--sm-lock-bg, #eef3ff);
  color: var(--sm-lock-icon, #143caa);
  text-decoration: none;
  min-height: var(--sm-tap-min, 44px);   /* c'est un LIEN : cible tactile pleine */
}
.sm-score--locked:hover { background: var(--color-accent-200, #dbe6ff); }
.sm-score--locked:focus-visible {
  outline: 2px solid var(--color-accent, #2f6bff); outline-offset: 2px;
}

/* ══ 4. Le badge « hors classement » (§D.2) ═══════════════════════════════
 * 🛑 NEUTRE, jamais bleu, jamais rouge, jamais un cadenas. L'absence
 * d'éligibilité n'est pas un verrou commercial : c'est un fait statistique.
 * Les confondre serait la faute la plus coûteuse du dispositif — l'utilisateur
 * croirait qu'on lui vend une note.
 */
.sm-badge-off {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 2px 9px; border-radius: var(--r-pill, 999px);
  font-size: var(--fs-micro, 11.5px); font-weight: 700; letter-spacing: .02em;
  background: var(--color-neutral-200, #edf1f7);
  color: var(--color-neutral-700, #48505d);
  border: 1px solid var(--color-divider, rgba(16, 23, 34, .13));
}
/* La note existe, mais elle ne fait pas autorité. */
.sm-note--off { color: var(--color-neutral-700, #48505d); }

/* Sur mobile l'infobulle ne s'ouvre pas (§H-3) : la raison du badge doit
 * apparaître EN CLAIR, pas seulement au survol. Le serveur la rend toujours ;
 * c'est l'affichage qui bascule. */
.sm-badge-off-raison {
  display: none; margin: 4px 0 0;
  font-size: var(--fs-micro, 11.5px); line-height: 1.4;
  color: var(--color-neutral-700, #48505d); text-wrap: pretty;
}
@media (max-width: 760px) {
  .sm-badge-off-raison { display: block; }
}


/* ══ 5. Le SUFFIXE de périmètre — la troisième densité (§D.1, A-3) ════════
 *
 * 🛑 UNE PAGE, UNE SEULE LIGNE DE PÉRIMÈTRE. Une page qui porte deux agrégats
 * partiels — l'accueil en porte deux, les matchs et les buteurs — donnerait
 * deux encarts verts à liseré sur un écran de 390 px : le mur d'avertissements
 * que §D.3 interdit. La LIGNE va au bloc qui porte des artefacts visibles à
 * expliquer (les pastilles de verrou) ; le SUFFIXE va aux autres.
 *
 * Sans icône, sans liseré, sans fond, sans CTA — le « Voir les formules »
 * n'apparaît qu'une fois sur toute la page (§D.0, principe 4). C'est une
 * demi-ligne verte de 12 px, pas un encart : elle qualifie un chiffre, elle ne
 * vend rien.
 *
 * `--sm-scope-fg` sur `--color-surface` : 12,56:1 en clair, 14,81:1 en sombre.
 * La marge négative du haut le colle au titre qu'il qualifie — un suffixe
 * détaché de son bloc redevient un encart. */
.sm-scope-suffixe {
  display: block;
  margin: calc(var(--sp-1) * -1) 0 var(--sp-4);
  font-size: var(--fs-cap, 12px); line-height: 1.45;
  color: var(--sm-scope-fg); text-wrap: pretty;
}
.sm-scope-suffixe strong { font-weight: 700; }