/* PuckFactor — feuille du site. Palette « glace et ardoise ».
   Jetons sur :root ; thème sombre par prefers-color-scheme. Chaque var()
   utilisé doit être déclaré : une variable inexistante ne lève aucune
   erreur et prend la couleur du parent (la sonde le vérifie).
   Les paires texte/fond de Vue::PAIRES tiennent 4,5:1 dans les deux
   thèmes ; les paires de Vue::PAIRES_UI (surface de bouton, filet)
   tiennent 3:1. Un dégradé n'est admis qu'entre deux jetons dont les
   DEUX extrémités sont vérifiées contre la couleur du texte posé dessus.
   Aucun style en ligne : la politique de sécurité les refuse.
   Aucune police ni image d'un tiers : tout vient de ce serveur. */

:root {
  --fond: #f2f6fa;
  --surface: #ffffff;
  --texte: #0d141d;
  --texte-doux: #44586c;
  --accent: #0b6ea8;
  --action: #cc3428;
  --sur-action: #ffffff;
  --ligne: #c6d3e0;
  --glace: #0b0f16;
  --ardoise: #17222f;
  --sur-glace: #ffffff;
  --sur-glace-doux: #c3d4e3;
  --trait: #4cb2e2;
  --oui: #14663a;
  --non: #a3261e;
  --fond-succes: #e2f1e8;
  --fond-erreur: #fbe6e4;
  --fond-avert: #fdf1d8;
  --zebre: #eaf1f8;
  /* Voiles : couleurs translucides, jamais du texte ni une surface de bouton. */
  --voile-glace: rgba(76, 178, 226, .16);
  --voile-bord: rgba(255, 255, 255, .16);
  --voile-fond: rgba(255, 255, 255, .06);
  --rayon: 10px;
  --largeur: 1080px;
}

@media (prefers-color-scheme: dark) {
  :root {
    --fond: #070a0f;
    --surface: #101822;
    --texte: #e9f1f9;
    --texte-doux: #a3b6c8;
    --accent: #4cb2e2;
    --action: #e8574a;
    --sur-action: #150301;
    --ligne: #27374a;
    --glace: #101b2b;
    --ardoise: #1f3143;
    --sur-glace: #eaf2fa;
    --sur-glace-doux: #bcd0e2;
    --trait: #4cb2e2;
    --oui: #7fd69a;
    --non: #ff9d94;
    --fond-succes: #0f2e1c;
    --fond-erreur: #3a1512;
    --fond-avert: #33280e;
    --zebre: #16202c;
    --voile-glace: rgba(76, 178, 226, .14);
    --voile-bord: rgba(255, 255, 255, .12);
    --voile-fond: rgba(255, 255, 255, .05);
  }
}

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--fond);
  color: var(--texte);
  font: 16px/1.55 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}

a { color: var(--accent); }

code { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: .92em; overflow-wrap: anywhere; }

.pf-cadre {
  max-width: var(--largeur);
  margin: 0 auto;
  padding: 0 16px;
}

/* ---------- en-tête et menu ---------- */

.pf-entete {
  background: var(--glace);
  color: var(--sur-glace);
  border-bottom: 3px solid var(--action);
}

/* La marge verticale est EXPLICITE : min-height + centrage ne donnent de l'air
   que si la ligne tient sur un rang. Dès que le menu passe à la ligne — ce qui
   arrive dès 1280 px avec le menu privé — le contenu dépasse 60px et le logo
   se colle au bord du haut. En border-box, ces 10px ne changent rien au cas
   qui tient sur un rang : 60px de haut, logo de 34px, il reste 40px dedans. */
.pf-entete-ligne {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  min-height: 60px;
  padding: 10px 0;
  gap: 8px 16px;
}

.pf-marque {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: var(--sur-glace);
  font-weight: 700;
  font-size: 1.2rem;
  /* La marque s'écrit PuckFactor, avec ses deux majuscules et rien de plus :
     une capitale forcée par la feuille change le NOM, pas sa présentation. */
  letter-spacing: .01em;
  text-decoration: none;
}

.pf-marque-signe { width: 34px; height: 34px; flex: 0 0 auto; }

.pf-nav {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 14px;
}

.pf-nav a,
.pf-lien-bouton {
  color: var(--sur-glace);
  text-decoration: none;
  padding: 6px 2px;
  font: inherit;
}

.pf-nav a[aria-current="page"] {
  text-decoration: underline;
  text-decoration-color: var(--trait);
  text-underline-offset: 6px;
  text-decoration-thickness: 2px;
}

.pf-nav-form { margin: 0; }

/* LE FILET QUI SÉPARE LES TROIS GROUPES DU MENU : ce qui se passe aujourd'hui,
   ce qu'on consulte, et le reste. Purement décoratif — il ne porte aucun texte
   et le HTML le masque aux lecteurs d'écran. Sur écran large c'est un trait
   vertical ; dans le menu replié du téléphone, où les items s'empilent, c'est
   une ligne en travers. */
.pf-nav-filet {
  width: 1px;
  height: 18px;
  background: var(--voile-bord);
}

.pf-lien-bouton {
  background: none;
  border: 0;
  cursor: pointer;
}

.pf-lien-bouton:hover,
.pf-nav a:hover { text-decoration: underline; }

.pf-langue {
  border: 1px solid var(--voile-bord);
  background: var(--voile-fond);
  border-radius: var(--rayon);
  padding: 4px 12px;
}

.pf-nav a.pf-langue { padding: 4px 12px; }

.pf-menu-case {
  position: absolute;
  opacity: 0;
  width: 1px;
  height: 1px;
}

.pf-menu-bouton { display: none; }

@media (max-width: 760px) {
  .pf-menu-bouton {
    display: inline-block;
    color: var(--sur-glace);
    border: 1px solid var(--voile-bord);
    background: var(--voile-fond);
    border-radius: var(--rayon);
    padding: 4px 12px;
    cursor: pointer;
  }

  .pf-menu-case:focus-visible + .pf-menu-bouton { outline: 2px solid var(--trait); outline-offset: 2px; }

  .pf-nav {
    display: none;
    flex-basis: 100%;
    flex-direction: column;
    align-items: flex-start;
    padding: 4px 0 12px;
  }

  .pf-menu-case:checked ~ .pf-nav { display: flex; }

  /* Replié, le menu s'empile : un trait vertical de 1 px n'y séparerait rien.
     Le filet se couche donc en travers de la colonne. */
  .pf-nav-filet {
    width: 100%;
    height: 1px;
    margin: 6px 0;
  }
}

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

.pf-heros,
.pf-bloc {
  background: var(--surface);
  border: 1px solid var(--ligne);
  border-radius: var(--rayon);
  margin: 24px 0;
  padding: 24px;
}

.pf-heros h1 {
  margin: 0 0 12px;
  font-size: clamp(1.5rem, 4vw, 2.2rem);
  line-height: 1.2;
}

.pf-bloc h2 { margin: 0 0 12px; font-size: 1.3rem; }

.pf-bloc h3 { margin: 20px 0 8px; font-size: 1.05rem; }

.pf-chapo { font-size: 1.1rem; margin: 0 0 12px; }

.pf-ligne, .pf-note, .pf-doux { color: var(--texte-doux); }

.pf-ligne, .pf-note { margin: 8px 0; }

.pf-note { font-size: .92rem; }

.pf-actions { display: flex; flex-wrap: wrap; gap: 8px; margin: 16px 0 0; }

.pf-grille3 {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 16px;
}

.pf-carte {
  background: var(--surface);
  border: 1px solid var(--ligne);
  border-radius: var(--rayon);
  padding: 16px 20px;
  margin: 0 0 12px;
  min-width: 0;
}

.pf-carte h2 { margin: 0 0 8px; font-size: 1.1rem; }

.pf-chiffres {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 32px;
}

.pf-chiffres p { margin: 0; }

.pf-chiffres strong { display: block; font-size: 1.7rem; }

.pf-liste-simple { padding-left: 20px; }

.pf-citation {
  border-left: 3px solid var(--ligne);
  margin: 8px 0;
  padding: 2px 0 2px 12px;
  overflow-wrap: anywhere;
}

.pf-score {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 12px;
}

.pf-score a { color: var(--texte); text-decoration: none; }

/* Le duel : la valeur devant, quand l'écart dépasse le hasard. Jamais la
   couleur SEULE — la page écrit aussi « écart net » en mots, pour qu'un
   lecteur qui ne distingue pas les couleurs lise la même chose. */
.pf-fort {
  font-weight: 700;
  color: var(--accent);
}

/* Le lien de bienvenue : un champ qu'on peut sélectionner d'un geste, et qui
   reste lisible sur un téléphone. Lecture seule, jamais modifiable. */
.pf-etiquette-champ {
  display: block;
  font-size: .9rem;
  color: var(--texte-doux);
  margin: 0 0 6px;
}

.pf-champ-lien {
  width: 100%;
  max-width: 44rem;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 1rem;
  background: var(--surface);
  color: var(--texte);
  border: 1px dashed var(--ligne);
  border-radius: var(--rayon);
  padding: 10px 12px;
}

.pf-secret code {
  display: inline-block;
  font-size: 1.4rem;
  letter-spacing: .06em;
  background: var(--surface);
  border: 1px dashed var(--ligne);
  border-radius: var(--rayon);
  padding: 8px 16px;
}

/* ---------- bannière d'accueil : la patinoire vue de la ligne bleue ----------
   Dégradé entre --glace et --ardoise seulement : le texte posé dessus
   (--sur-glace, --sur-glace-doux) est vérifié contre les DEUX. */

.pf-banniere {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  /* La patinoire en filigrane, copie LOCALE : la bannière est sombre dans les
     deux thèmes, donc un seul dessin suffit. Le dégradé reste dessous, et le
     contraste du texte reste vérifié contre --glace ET --ardoise. */
  background: url("patinoire.svg") center / cover no-repeat,
    linear-gradient(158deg, var(--glace) 0%, var(--ardoise) 58%, var(--glace) 100%);
  color: var(--sur-glace);
  border: 1px solid var(--voile-bord);
  border-radius: var(--rayon);
  margin: 24px 0;
  padding: 36px 28px 28px;
}

/* Reflet de glace et trace de patin : deux dégradés, aucune image. */
.pf-banniere::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: -40% -10% auto auto;
  width: 70%;
  height: 160%;
  background: radial-gradient(closest-side, var(--voile-glace), transparent 100%);
}

.pf-banniere::after {
  content: "";
  position: absolute;
  z-index: -1;
  inset: auto 0 0 0;
  height: 3px;
  background: linear-gradient(90deg, var(--trait) 0%, var(--voile-glace) 45%, transparent 100%);
}

.pf-banniere h1 {
  margin: 0 0 14px;
  font-size: clamp(1.6rem, 4.6vw, 2.5rem);
  line-height: 1.15;
  letter-spacing: -.01em;
}

.pf-banniere .pf-chapo { color: var(--sur-glace); max-width: 56ch; }

.pf-banniere .pf-ligne,
.pf-banniere .pf-note { color: var(--sur-glace-doux); max-width: 60ch; }

.pf-surtitre {
  display: inline-block;
  margin: 0 0 14px;
  padding: 3px 10px;
  border: 1px solid var(--voile-bord);
  border-radius: var(--rayon);
  background: var(--voile-fond);
  color: var(--sur-glace-doux);
  font-size: .82rem;
  letter-spacing: .12em;
  text-transform: uppercase;
}

/* Ruban de chiffres au bas de la bannière. */
.pf-ruban {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 4px 20px;
  margin: 24px 0 0;
  padding: 18px 0 0;
  border-top: 1px solid var(--voile-bord);
}

.pf-ruban div { min-width: 0; }

.pf-ruban strong {
  display: block;
  font-size: 1.6rem;
  line-height: 1.1;
  font-variant-numeric: tabular-nums;
  color: var(--sur-glace);
}

.pf-ruban span {
  display: block;
  font-size: .88rem;
  color: var(--sur-glace-doux);
}

/* ---------- piliers et aperçu ---------- */

.pf-pilier {
  background: var(--surface);
  border: 1px solid var(--ligne);
  border-top: 3px solid var(--trait);
  border-radius: var(--rayon);
  padding: 18px 20px;
  min-width: 0;
}

.pf-pilier h2 { margin: 0 0 8px; font-size: 1.08rem; }

.pf-pilier p { margin: 0; color: var(--texte-doux); }

.pf-apercu {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: 12px;
  margin: 16px 0 0;
  padding: 0;
  list-style: none;
}

.pf-apercu li {
  border: 1px solid var(--ligne);
  border-left: 3px solid var(--accent);
  border-radius: var(--rayon);
  padding: 12px 14px;
  background: var(--zebre);
  min-width: 0;
}

.pf-apercu strong { display: block; }

.pf-apercu span { color: var(--texte-doux); font-size: .92rem; }

/* ---------- images : copies locales, jamais un appel à un tiers ---------- */

.pf-logo {
  width: 22px;
  height: 22px;
  vertical-align: -4px;
  margin-right: 6px;
}

.pf-equipe { white-space: nowrap; }

.pf-mug {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--zebre);
  vertical-align: middle;
  /* La photo est maintenant collée au nom dans la même cellule : il lui faut
     sa gouttière, sinon les deux se touchent. */
  margin-right: 6px;
}

.pf-mug-grand {
  width: 96px;
  height: 96px;
  border-radius: 50%;
  background: var(--zebre);
  flex: 0 0 auto;
}

.pf-fiche {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: 20px;
}

.pf-fiche > div { min-width: 0; flex: 1 1 260px; }

.pf-score .pf-logo { width: 40px; height: 40px; vertical-align: -8px; }

/* ---------- en direct ---------- */

/* Un match en cours porte un filet rouge : la seule chose qui bouge sur la
   page, et elle ne dit rien d'autre que « ça joue en ce moment ». */
.pf-vivant { border-left: 3px solid var(--action); }

.pf-direct-etat {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px 10px;
  margin: 0 0 10px;
  color: var(--texte-doux);
}

.pf-direct-etat strong { color: var(--texte); }

/* ---------- messages ---------- */

.pf-succes,
.pf-erreur,
.pf-avertissement {
  color: var(--texte);
  border-radius: var(--rayon);
  padding: 12px 16px;
  margin: 16px 0;
  border: 1px solid var(--ligne);
}

.pf-succes { background: var(--fond-succes); }

.pf-erreur { background: var(--fond-erreur); }

.pf-avertissement { background: var(--fond-avert); }

.pf-oui { color: var(--oui); font-weight: 600; }

.pf-non { color: var(--non); font-weight: 600; }

/* ---------- tableaux : défilement horizontal DANS le bloc, jamais la page ---------- */

.pf-defile {
  max-width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  margin: 8px 0;
}

.pf-table {
  border-collapse: collapse;
  width: 100%;
  font-size: .94rem;
}

.pf-table th,
.pf-table td {
  text-align: left;
  padding: 6px 10px;
  border-bottom: 1px solid var(--ligne);
  vertical-align: top;
}

.pf-table th { white-space: nowrap; font-weight: 600; }

/* UNE IDENTITÉ QUI NE S'EN VA PAS.
   Mesuré au navigateur, à 390 px de large : le tableau des équipes cache
   652 px — PLUS QUE LA LARGEUR DE L'ÉCRAN. En le faisant glisser, le nom de
   l'équipe sortait par la gauche et les quinze colonnes de chiffres devenaient
   anonymes : « 82 65 14 3 133 », sans savoir de qui. La première colonne reste
   donc en place pendant le défilement.
   Elle porte SON PROPRE FOND, sinon le reste du tableau défile par-dessous et
   deux textes se superposent. Et son filet de séparation est une OMBRE, pas une
   bordure : une bordure de cellule collante ne se peint pas de façon fiable
   avec « border-collapse: collapse ». */
.pf-table th:first-child,
.pf-table td:first-child {
  position: sticky;
  left: 0;
  z-index: 1;
  background: var(--surface);
  box-shadow: 1px 0 0 var(--ligne);
}

.pf-table tbody tr:nth-child(even) td:first-child { background: var(--zebre); }

/* ET LA BARRE DE DÉFILEMENT SE VOIT.
   J'avais d'abord posé des voiles en dégradé aux deux bords, censés n'apparaître
   que du côté où il reste à lire. Regardé au navigateur : le tableau les couvre,
   et là où il ne les couvrait pas ils se seraient vus par bandes entre les
   lignes zébrées. Retirés — un effet à moitié vrai ne vaut pas mieux qu'un
   contrôle qui ne peut pas échouer.
   Une barre de défilement, elle, est vraie par construction : elle n'existe que
   s'il y a quelque chose à atteindre. On la rend donc fine et visible au lieu de
   la laisser s'effacer. */
.pf-defile {
  scrollbar-width: thin;
  scrollbar-color: var(--ligne) transparent;
}

/* UN EN-TÊTE QUI NE SE PLIE PAS FIXE LA LARGEUR DE SA COLONNE. Mesuré au
   navigateur, à 1280 px : « Comptes » débordait de 157 px, et « Dernière
   connexion (UTC) » (238 px), « Mot de passe choisi » (187 px) et
   « Connexions » (118 px) en portaient l'essentiel — trois en-têtes plus
   larges que ce qu'ils surmontent. Les plier suffit : aucune colonne retirée,
   aucune donnée raccourcie, aucune seconde effacée d'une date. Le nowrap
   général reste, parce qu'il sert aux tableaux de chiffres. */
.pf-table-pliable th { white-space: normal; }

/* Et 8 px de gouttière au lieu de 10 : à 1024 px il restait 9 px de trop —
   deux pixels par côté sur huit colonnes en rendent 32, ce qui suffit et ne
   se voit pas. Mesuré, pas estimé. */
.pf-table-pliable th,
.pf-table-pliable td { padding-left: 8px; padding-right: 8px; }

.pf-table tbody tr:nth-child(even) { background: var(--zebre); }

.pf-nb { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }

.pf-table th.pf-nb { text-align: right; }

.pf-legende {
  display: grid;
  grid-template-columns: max-content 1fr;
  gap: 4px 12px;
  font-size: .9rem;
  color: var(--texte-doux);
}

.pf-legende dt { font-weight: 600; }

.pf-legende dd { margin: 0; }

/* ---------- formulaires ---------- */

.pf-form {
  display: grid;
  gap: 6px;
  max-width: 520px;
  margin: 16px 0;
}

.pf-form label { font-weight: 600; margin-top: 8px; }

.pf-form input,
.pf-form textarea,
.pf-filtre input,
.pf-filtre select {
  font: inherit;
  color: var(--texte);
  background: var(--surface);
  border: 1px solid var(--ligne);
  border-radius: 6px;
  padding: 8px 10px;
  max-width: 100%;
}

.pf-form input:focus-visible,
.pf-form textarea:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }

.pf-form button { justify-self: start; margin-top: 12px; }

.pf-form-ligne {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 8px;
  max-width: none;
  margin: 8px 0 0;
}

.pf-form-ligne label,
.pf-form-ligne button { margin-top: 0; }

.pf-aide {
  color: var(--texte-doux);
  font-size: .9rem;
  margin: 0;
}

.pf-piege {
  position: absolute;
  left: -10000px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.pf-filtre {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin: 12px 0;
}

.pf-filtre label { font-weight: 600; }

.pf-pagination {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 8px;
  margin: 12px 0;
}

/* ---------- boutons ---------- */

.pf-bouton {
  display: inline-block;
  background: var(--action);
  color: var(--sur-action);
  border: 1px solid var(--action);
  border-radius: var(--rayon);
  padding: 9px 18px;
  font: inherit;
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
}

.pf-bouton-second {
  background: var(--surface);
  color: var(--accent);
  border-color: var(--accent);
  font-weight: 600;
}

/* Sur la bannière sombre : le clair du texte, pas une couleur de moins. */
.pf-bouton-glace {
  background: var(--voile-fond);
  color: var(--sur-glace);
  border-color: var(--voile-bord);
}

.pf-bouton-petit { padding: 4px 10px; font-size: .9rem; font-weight: 400; }

/* ---------- pied ---------- */

.pf-pied {
  color: var(--texte-doux);
  font-size: .9rem;
  padding: 16px 0 32px;
}

.pf-pied p { margin: 4px 0; }

/* L'avis « ni pronostic ni conseil de pari » n'est pas une note de bas de
   page : il porte la même couleur que le texte courant. */
.pf-avis { color: var(--texte); font-weight: 600; }

.pf-pied a { color: var(--texte-doux); }

/* ---------- pictogrammes et bande d'équipes (0.7.0) ---------- */

/* Le pictogramme suit la couleur du texte : une seule version, deux thèmes. */
.pf-pilier-tete {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0 0 8px;
}

.pf-pilier-tete h2 { margin: 0; }

.pf-picto { flex: 0 0 auto; color: var(--accent); }

/* Bande d'équipes : une preuve de couverture, pas une décoration. Elle
   s'enroule d'elle-même et ne déborde jamais — aucune largeur en dur. */
.pf-bande-liste {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 14px;
  margin: 14px 0 0;
  padding: 0;
  list-style: none;
}

.pf-bande-liste li {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 6px 10px;
  border: 1px solid var(--ligne);
  border-radius: var(--rayon);
  background: var(--zebre);
  font-size: .86rem;
  letter-spacing: .04em;
}

/* Étiquette « hors concours » : elle doit se voir sans crier. Fond et texte
   sont une paire vérifiée, comme tout le reste de la feuille. */
.pf-etiquette {
  display: inline-block;
  margin-left: 6px;
  padding: 1px 8px;
  border: 1px solid var(--ligne);
  border-radius: var(--rayon);
  background: var(--fond-avert);
  color: var(--texte);
  font-size: .82rem;
  letter-spacing: .04em;
  text-transform: none;
}

/* ---------- le duel : DEUX PANNEAUX QUI SE FONT FACE ----------
   Une rangée = une grille de trois colonnes, TOUTES identiques : les colonnes
   s'alignent donc d'une rangée à l'autre, et chaque rangée peut porter son
   propre fond. Une grille unique pour toute la section l'interdisait.

   CE QUE LA PREMIÈRE VERSION FAISAIT MAL, vu sur une capture le 2 oct. 2026 :
   - les deux valeurs étaient rejetées aux bords de l'écran, avec un vide au
     milieu — l'oeil devait traverser la page pour comparer deux nombres. Elles
     sont maintenant SERRÉES CONTRE la colonne du milieu : celle de gauche
     alignée à droite, celle de droite alignée à gauche ;
   - les paragraphes étaient centrés sur toute la largeur, ce qui est le pire
     cas pour lire plus d'une ligne : chaque retour à la ligne déplace le début
     du texte. Ils sont alignés à gauche et bornés en largeur ;
   - les valeurs avaient le même poids que les étiquettes. Ce sont elles qu'on
     vient lire : elles sont plus grandes.

   Aucune largeur n'est calculée d'après les données : une barre
   proportionnelle demanderait un style en ligne, que la politique de sécurité
   refuse — et un écart y paraîtrait toujours grand, même sous le hasard. */

.pf-face {
  margin: 10px 0 0;
}

/* La rangée. Le même gabarit de colonnes partout : c'est ce qui aligne tout. */
.pf-face-rang {
  display: grid;
  grid-template-columns: 1fr minmax(8rem, 17rem) 1fr;
  align-items: center;
  gap: 4px 12px;
  padding: 9px 8px;
  border-radius: var(--rayon);
}

/* Une rangée sur deux porte un fond : on suit une ligne des yeux sans se
   perdre, comme la zébrure d'un tableau. */
.pf-zebre { background: var(--zebre); }

/* Les valeurs se rapprochent du centre, chacune du côté de sa colonne. */
.pf-face-rang > *:first-child { text-align: right; }
.pf-face-rang > *:last-child { text-align: left; }

.pf-face-rang > p { margin: 0; }

/* Les deux en-têtes d'équipe, et le « contre » entre les deux. */
.pf-face-tetes { padding: 0 8px 10px; }

.pf-face-tete {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  padding: 12px 10px;
  border-radius: var(--rayon);
  background: var(--glace);
  color: var(--sur-glace);
  text-align: center;
  line-height: 1.3;
}

.pf-face-tete strong { font-size: 1.5rem; letter-spacing: .02em; }

.pf-face-tete .pf-doux { color: var(--sur-glace-doux); font-size: .92rem; }

/* LA TAILLE D'UN LOGO SE RÈGLE ICI, PAS DANS LE HTML. « _logo » reçoit bien
   taille=40, mais « .pf-logo { width: 22px } » plus haut dans cette feuille
   l'écrase : un attribut de largeur ne gagne jamais contre une règle CSS. Les
   logos du face à face sortaient donc en 22 px, minuscules dans des cartes
   faites pour les montrer. Vu sur une capture le 3 oct. 2026.
   « margin-right » de la règle de base est remis à zéro : dans une colonne
   centrée, il décalait le logo vers la gauche. */
.pf-face-tete .pf-logo {
  width: 52px;
  height: 52px;
  margin: 0 0 4px;
  vertical-align: baseline;
}

.pf-face-vs {
  text-align: center;
  color: var(--texte-doux);
  font-size: .82rem;
  letter-spacing: .1em;
  text-transform: uppercase;
}

/* Un titre de section : il traverse la largeur, avec un filet au-dessus. */
.pf-face-titre {
  margin: 22px 8px 6px;
  padding-top: 12px;
  border-top: 1px solid var(--ligne);
  font-size: 1.05rem;
}

/* Une valeur. C'est ce qu'on vient lire : elle domine l'étiquette. */
.pf-face-val {
  font-size: 1.3rem;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  line-height: 1.25;
  overflow-wrap: anywhere;
}

/* Un gardien : son nom, puis ses chiffres en dessous, plus petits. */
.pf-face-nom { display: block; font-size: 1.05rem; font-weight: 600; }

.pf-face-sous { display: block; font-size: .88rem; font-weight: 400; }

/* Ce qu'on mesure, au centre, et sous lui ce que la page en dit. */
.pf-face-quoi {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  text-align: center;
  color: var(--texte-doux);
  font-size: .94rem;
  line-height: 1.3;
}

.pf-face-dit { font-size: .86rem; line-height: 1.35; }

.pf-face-dit .pf-etiquette { margin-left: 0; }

/* La prose de la section : alignée à GAUCHE et bornée en largeur. Centrer un
   paragraphe de plusieurs lignes déplace le début de chaque ligne. */
.pf-face-texte {
  margin: 0 8px 10px;
  max-width: 72ch;
  color: var(--texte-doux);
  font-size: .92rem;
  line-height: 1.5;
}

@media (max-width: 560px) {
  .pf-face-rang { grid-template-columns: 1fr minmax(6rem, 1.6fr) 1fr; gap: 3px 6px; padding: 8px 2px; }
  .pf-face-val { font-size: 1.1rem; }
  .pf-face-quoi { font-size: .85rem; }
  .pf-face-dit { font-size: .8rem; }
  .pf-face-tete { padding: 9px 4px; }
  .pf-face-tete strong { font-size: 1.2rem; }
}