/* ============================================================
   Le pari des copains — feuille de style

   Direction : « feuille de match nocturne ». Le fond n'est pas un noir
   neutre mais un vert de pelouse sous les projecteurs, et l'accent est
   l'ambre des éclairages de stade. Les écussons portent la couleur : le
   reste de l'interface reste sobre pour ne pas leur faire concurrence.

   Conception téléphone d'abord. Les paliers élargissent, ils ne
   redessinent pas.
   ============================================================ */

:root {
  /* Couleurs — six valeurs, pas une de plus */
  --pelouse-nuit: #0c1714;
  --touche: #13211d;
  --touche-haute: #182a25;
  --ligne: #27423b;
  --craie: #e8efe6;
  --craie-douce: #93a79e;
  --projecteur: #f0b429;
  --cuir: #b4603a;
  --alerte: #d9694c;
  /*
   * Vert de réussite, ajouté pour les verdicts de pronostic. L'ambre du projecteur
   * ne pouvait pas jouer ce rôle : il sert déjà à marquer « ce que TU as choisi »,
   * et un pronostic choisi n'est pas un pronostic gagnant. Il fallait donc une
   * troisième valeur pour opposer réussite et échec sans écraser cette marque.
   *
   * Assez désaturé pour ne pas jurer sur la pelouse nocturne, assez clair pour
   * rester lisible sur le fond sombre du pied de carte.
   */
  --reussite: #5eb98a;

  /* Espacement : échelle de 8 px */
  --e1: 4px;
  --e2: 8px;
  --e3: 12px;
  --e4: 16px;
  --e5: 24px;
  --e6: 32px;
  --e7: 48px;

  --rayon: 14px;
  --rayon-petit: 9px;

  /* Cible tactile minimale : 44 px, pouce compris */
  --cible: 44px;

  --titre: "Big Shoulders Display", "Haettenschweiler", "Arial Narrow", sans-serif;
  --texte: "Hanken Grotesk", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --donnee: "Space Mono", ui-monospace, SFMono-Regular, Menlo, monospace;

  --barre-haut: 56px;
  --barre-bas: 62px;
}

* {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  padding: 0;
}

body {
  background: var(--pelouse-nuit);
  color: var(--craie);
  font-family: var(--texte);
  font-size: 16px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  /* Lignes de craie du terrain, très atténuées : le motif vient du sujet. */
  background-image: linear-gradient(
    90deg,
    transparent 0 calc(50% - 0.5px),
    rgba(39, 66, 59, 0.35) calc(50% - 0.5px) calc(50% + 0.5px),
    transparent calc(50% + 0.5px)
  );
  background-repeat: no-repeat;
  background-size: 100% 100%;
}

h1,
h2,
h3 {
  font-family: var(--titre);
  font-weight: 800;
  letter-spacing: 0.01em;
  line-height: 0.95;
  margin: 0;
  text-transform: none;
}

button {
  font-family: inherit;
  font-size: inherit;
  color: inherit;
}

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

:focus-visible {
  outline: 2px solid var(--projecteur);
  outline-offset: 2px;
  border-radius: 4px;
}

[hidden] {
  display: none !important;
}

.est-cache {
  display: none !important;
}

/* ————————————————————————————— Écran d'accueil */

.accueil {
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: var(--e6);
  padding: var(--e5) var(--e4) calc(var(--e5) + env(safe-area-inset-bottom));
  max-width: 460px;
  margin: 0 auto;
}

.accueil__eyebrow {
  font-family: var(--donnee);
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--projecteur);
}

.accueil__titre {
  font-size: clamp(52px, 17vw, 76px);
  margin: var(--e2) 0 var(--e3);
}

.accueil__sous {
  color: var(--craie-douce);
  margin: 0;
  font-size: 14px;
}

/* ————————————————————————————— Cartes et formulaires */

.carte {
  background: var(--touche);
  border: 1px solid var(--ligne);
  border-radius: var(--rayon);
  padding: var(--e4);
}

.carte--formulaire {
  padding: var(--e5) var(--e4);
}

.onglets {
  display: flex;
  gap: var(--e1);
  background: var(--pelouse-nuit);
  border: 1px solid var(--ligne);
  border-radius: var(--rayon-petit);
  padding: var(--e1);
  margin-bottom: var(--e5);
}

.onglets__item {
  flex: 1;
  min-height: var(--cible);
  border: 0;
  border-radius: 6px;
  background: transparent;
  color: var(--craie-douce);
  font-weight: 600;
  font-size: 14px;
  cursor: pointer;
}

.onglets__item.est-actif {
  background: var(--touche-haute);
  color: var(--craie);
}

.form {
  display: flex;
  flex-direction: column;
  gap: var(--e4);
}

.champ {
  display: flex;
  flex-direction: column;
  gap: var(--e2);
  border: 0;
  margin: 0;
  padding: 0;
}

.champ__label {
  font-size: 13px;
  font-weight: 600;
  color: var(--craie-douce);
}

.champ__aide {
  font-size: 12px;
  color: var(--craie-douce);
}

.champ input,
.champ select,
.champ textarea {
  min-height: var(--cible);
  background: var(--pelouse-nuit);
  border: 1px solid var(--ligne);
  border-radius: var(--rayon-petit);
  color: var(--craie);
  padding: 0 var(--e3);
  font-family: inherit;
  font-size: 16px; /* 16 px évite le zoom automatique sur iPhone */
}

.champ textarea {
  padding: var(--e3);
  min-height: 88px;
  line-height: 1.45;
}

.champ input:focus,
.champ select:focus,
.champ textarea:focus {
  border-color: var(--projecteur);
  outline: none;
}

.avatars {
  display: flex;
  flex-wrap: wrap;
  gap: var(--e2);
}

.avatars button {
  width: var(--cible);
  height: var(--cible);
  font-size: 22px;
  border: 1px solid var(--ligne);
  border-radius: var(--rayon-petit);
  background: var(--pelouse-nuit);
  cursor: pointer;
}

.avatars button.est-actif {
  border-color: var(--projecteur);
  background: var(--touche-haute);
}

.bouton {
  min-height: var(--cible);
  border-radius: var(--rayon-petit);
  border: 1px solid var(--ligne);
  background: var(--touche-haute);
  color: var(--craie);
  font-weight: 600;
  cursor: pointer;
  padding: 0 var(--e4);
}

.bouton--primaire {
  background: var(--projecteur);
  border-color: var(--projecteur);
  color: #17130a;
  font-weight: 700;
}

.bouton--primaire:hover {
  filter: brightness(1.07);
}

.bouton--discret {
  background: transparent;
  color: var(--craie-douce);
}

.bouton--danger {
  background: transparent;
  border-color: var(--alerte);
  color: var(--alerte);
}

.bouton:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

.message {
  margin: var(--e4) 0 0;
  font-size: 14px;
  color: var(--alerte);
  min-height: 1.2em;
}

.message--ok {
  color: var(--projecteur);
}

/* ————————————————————————————— Barres */

.barre {
  position: sticky;
  top: 0;
  z-index: 10;
  height: var(--barre-haut);
  padding: 0 var(--e4);
  padding-top: env(safe-area-inset-top);
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: rgba(12, 23, 20, 0.92);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--ligne);
}

.barre__gauche {
  display: flex;
  flex-direction: column;
  line-height: 1.15;
  min-width: 0;
}

.barre__ligue {
  font-family: var(--titre);
  font-size: 21px;
  font-weight: 700;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.barre__saison {
  font-family: var(--donnee);
  font-size: 10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--craie-douce);
}

.barre__moi {
  display: flex;
  align-items: center;
  gap: var(--e2);
  min-height: 38px;
  padding: 0 var(--e3);
  border: 1px solid var(--ligne);
  border-radius: 999px;
  background: var(--touche);
  cursor: pointer;
  font-size: 13px;
  font-weight: 600;
  white-space: nowrap;
}

.onglets-bas {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 10;
  display: flex;
  background: rgba(12, 23, 20, 0.96);
  backdrop-filter: blur(10px);
  border-top: 1px solid var(--ligne);
  padding-bottom: env(safe-area-inset-bottom);
}

.onglets-bas__item {
  flex: 1;
  min-height: var(--barre-bas);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  border: 0;
  background: transparent;
  color: var(--craie-douce);
  font-size: 10.5px;
  font-weight: 600;
  cursor: pointer;
  /* Un liseré haut signale l'onglet courant sans déplacer le texte. */
  border-top: 2px solid transparent;
}

.onglets-bas__item.est-actif {
  color: var(--craie);
  border-top-color: var(--projecteur);
}

.onglets-bas__icone {
  font-size: 19px;
  line-height: 1;
}

.vue {
  padding: var(--e4) var(--e4) calc(var(--barre-bas) + var(--e6));
  max-width: 620px;
  margin: 0 auto;
}

/* ————————————————————————————— Sélecteur de compétition */

.competitions {
  display: flex;
  gap: var(--e2);
  overflow-x: auto;
  padding-bottom: var(--e2);
  margin-bottom: var(--e4);
  scrollbar-width: none;
}

.competitions::-webkit-scrollbar {
  display: none;
}

.competitions__item {
  display: flex;
  align-items: center;
  gap: var(--e2);
  min-height: var(--cible);
  padding: 0 var(--e3);
  border: 1px solid var(--ligne);
  border-radius: 999px;
  background: var(--touche);
  color: var(--craie-douce);
  font-size: 13px;
  font-weight: 600;
  white-space: nowrap;
  cursor: pointer;
}

.competitions__item.est-actif {
  border-color: var(--projecteur);
  color: var(--craie);
  background: var(--touche-haute);
}

.competitions__item img {
  width: 20px;
  height: 20px;
  object-fit: contain;
}

/* ————————————————————————————— En-tête de journée + dad joke */

.journee-tete {
  margin-bottom: var(--e4);
}

.eyebrow {
  font-family: var(--donnee);
  font-size: 10.5px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--projecteur);
  margin-bottom: var(--e1);
}

.journee-tete h2 {
  font-size: 34px;
}

.journee-tete__meta {
  font-size: 13px;
  color: var(--craie-douce);
  margin-top: var(--e2);
}

.blague {
  display: flex;
  gap: var(--e3);
  align-items: flex-start;
  margin: var(--e4) 0;
  padding: var(--e3) var(--e4);
  background: var(--touche);
  border-left: 3px solid var(--projecteur);
  border-radius: 0 var(--rayon-petit) var(--rayon-petit) 0;
}

.blague__icone {
  font-size: 18px;
  line-height: 1.3;
}

.blague__texte {
  margin: 0;
  font-size: 14px;
  line-height: 1.5;
  font-style: italic;
  color: var(--craie);
}

.blague__origine {
  display: block;
  font-style: normal;
  font-family: var(--donnee);
  font-size: 10px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--craie-douce);
  margin-top: var(--e2);
}

/* ————————————————————————————— Navigation entre journées */

.pagination {
  display: flex;
  align-items: center;
  gap: var(--e2);
  margin-bottom: var(--e4);
}

.pagination select {
  flex: 1;
  min-height: var(--cible);
  background: var(--touche);
  color: var(--craie);
  border: 1px solid var(--ligne);
  border-radius: var(--rayon-petit);
  padding: 0 var(--e3);
  font-family: inherit;
  font-size: 15px;
}

.pagination button {
  width: var(--cible);
  min-height: var(--cible);
  border: 1px solid var(--ligne);
  border-radius: var(--rayon-petit);
  background: var(--touche);
  cursor: pointer;
  font-size: 18px;
}

/* ————————————————————————————— LA carte de match (élément signature) */

.match {
  background: var(--touche);
  border: 1px solid var(--ligne);
  border-radius: var(--rayon);
  margin-bottom: var(--e3);
  overflow: hidden;
  /* La couleur du club teinte le liseré gauche : l'identité vient du contenu. */
  border-left: 3px solid var(--accent-club, var(--ligne));
}

.match--verrouille {
  opacity: 0.78;
}

.match--valide {
  border-left-color: var(--projecteur);
}

.match__tete {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--e2);
  padding: var(--e2) var(--e3);
  border-bottom: 1px solid var(--ligne);
  font-size: 12px;
  color: var(--craie-douce);
}

.match__quand {
  font-weight: 600;
}

.match__compte {
  font-family: var(--donnee);
  font-size: 11px;
  letter-spacing: 0.04em;
  padding: 2px var(--e2);
  border-radius: 999px;
  border: 1px solid var(--ligne);
  white-space: nowrap;
}

.match__compte--urgent {
  color: var(--projecteur);
  border-color: var(--projecteur);
}

.match__compte--ferme {
  color: var(--craie-douce);
}

/* Une ligne par équipe : écusson, nom, et le rail de bonus */
.equipe {
  display: grid;
  grid-template-columns: 34px 1fr auto;
  align-items: center;
  gap: var(--e3);
  padding: var(--e3);
}

.equipe + .equipe {
  border-top: 1px solid rgba(39, 66, 59, 0.55);
}

.equipe__ecusson {
  width: 34px;
  height: 34px;
  object-fit: contain;
}

/* Repli quand aucun écusson n'est disponible : monogramme, jamais d'image cassée */
.equipe__monogramme {
  width: 34px;
  height: 34px;
  border-radius: 8px;
  display: grid;
  place-items: center;
  font-family: var(--titre);
  font-size: 15px;
  font-weight: 700;
  background: var(--touche-haute);
  border: 1px solid var(--ligne);
  color: var(--craie-douce);
}

.equipe__nom {
  font-family: var(--titre);
  font-size: 21px;
  font-weight: 700;
  line-height: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.equipe__score {
  font-family: var(--donnee);
  font-size: 21px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

.equipe__score--gagnant {
  color: var(--projecteur);
}

/* —————————————————————————————
   Les pastilles de bonus, sur la ligne de l'équipe

   Elles affichent le SEUIL de la compétition (« +3 », « 4 », « ≤5 », « ≤7 »)
   plutôt qu'une abréviation : on lit directement sur quoi on parie. Une icône
   porte la nature du bonus, le chiffre porte la condition.
   ————————————————————————————— */

.bonus {
  display: flex;
  gap: var(--e1);
}

.bonus__pastille {
  min-width: 46px;
  height: var(--cible);
  padding: 0 var(--e1);
  display: grid;
  place-items: center;
  gap: 0;
  border: 1.5px solid var(--ligne);
  border-radius: var(--rayon-petit);
  background: var(--pelouse-nuit);
  color: var(--craie-douce);
  cursor: pointer;
  line-height: 1;
  transition: background 0.14s ease, color 0.14s ease, border-color 0.14s ease;
}

.bonus__pastille:hover:not(:disabled) {
  color: var(--craie);
  border-color: var(--craie-douce);
}

.bonus__icone {
  width: 17px;
  height: 17px;
  display: block;
}

.bonus__seuil {
  font-family: var(--donnee);
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: -0.02em;
}

/* Coché : la pastille se remplit. L'état ne se devine pas, il se voit. */
.bonus__pastille--off.est-actif {
  background: var(--cuir);
  border-color: var(--cuir);
  color: var(--craie);
}

.bonus__pastille--def.est-actif {
  background: var(--projecteur);
  border-color: var(--projecteur);
  color: #17130a;
}

/* Impossible dans cette configuration : on l'efface sans la faire disparaître,
   pour que la carte ne se réorganise pas sous le doigt. */
.bonus__pastille:disabled {
  cursor: default;
  opacity: 0.28;
}

/* ————————————————————————————— Légende des bonus, une fois par journée */

.legende {
  display: grid;
  gap: var(--e1);
  padding: var(--e3) var(--e4);
  margin-bottom: var(--e4);
  border: 1px solid var(--ligne);
  border-radius: var(--rayon);
  background: var(--touche);
  font-size: 12.5px;
  color: var(--craie-douce);
}

.legende__item {
  display: flex;
  align-items: center;
  gap: var(--e2);
}

.legende__item .bonus__icone {
  color: var(--cuir);
  flex: 0 0 auto;
}

.legende__item:nth-child(2) .bonus__icone {
  color: var(--projecteur);
}

.legende__item b {
  font-family: var(--donnee);
  font-size: 11px;
  color: var(--craie);
  min-width: 22px;
}

.legende__note {
  padding-top: var(--e1);
  border-top: 1px solid var(--ligne);
  font-size: 11.5px;
  font-style: italic;
}


.match__pari {
  padding: var(--e3);
  border-top: 1px solid var(--ligne);
  display: flex;
  flex-direction: column;
  gap: var(--e3);
}

.rangee {
  display: flex;
  flex-direction: column;
  gap: var(--e2);
}

.rangee__label {
  font-family: var(--donnee);
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--craie-douce);
}

.segments {
  display: flex;
  gap: var(--e1);
}

.segments button {
  flex: 1;
  min-height: var(--cible);
  border: 1px solid var(--ligne);
  border-radius: var(--rayon-petit);
  background: var(--pelouse-nuit);
  color: var(--craie-douce);
  font-weight: 600;
  font-size: 13px;
  cursor: pointer;
  padding: 0 var(--e1);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.segments button.est-actif {
  background: var(--projecteur);
  border-color: var(--projecteur);
  color: #17130a;
  font-weight: 700;
}

.segments--ecart button {
  font-family: var(--donnee);
  font-size: 12px;
}

.match__pied {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--e2);
  padding: var(--e2) var(--e3);
  border-top: 1px solid var(--ligne);
  background: var(--pelouse-nuit);
  font-size: 12px;
  color: var(--craie-douce);
}

.match__points {
  font-family: var(--donnee);
  font-weight: 700;
  color: var(--projecteur);
}

/*
   Le score ANNONCÉ, rappelé sur un match commencé.

   La ligne d'équipe porte alors le score réel à la place des pastilles de bonus :
   sans ce rappel, plus rien ne dirait ce qu'on avait pronostiqué, et le vert ou le
   rouge de la carte ne s'expliquerait pas. Il prend toute la largeur pour ne pas se
   confondre avec le total, qui est le nombre qui compte.
*/
.match__annonce {
  /* Toute la largeur, sous le verdict : il ne concurrence pas le total. */
  grid-column: 1 / -1;
  font-family: var(--donnee);
  font-size: 11px;
  color: var(--craie-douce);
}

.match__regle {
  font-size: 11px;
  color: var(--craie-douce);
  padding: var(--e2) var(--e3);
  border-top: 1px dashed var(--ligne);
  line-height: 1.4;
}

/* ————————————————————————————— Classement */

.classement {
  display: flex;
  flex-direction: column;
  gap: var(--e2);
}

.rang {
  display: grid;
  grid-template-columns: 42px 34px 1fr auto;
  align-items: center;
  gap: var(--e3);
  padding: var(--e3);
  background: var(--touche);
  border: 1px solid var(--ligne);
  border-radius: var(--rayon);
}

.rang--podium {
  border-color: rgba(240, 180, 41, 0.4);
}

.rang--moi {
  background: var(--touche-haute);
  border-color: var(--projecteur);
}

.rang__place {
  font-family: var(--titre);
  font-size: 30px;
  font-weight: 800;
  line-height: 1;
  color: var(--craie-douce);
  text-align: center;
}

.rang--podium .rang__place {
  color: var(--projecteur);
}

.rang__avatar {
  font-size: 24px;
  text-align: center;
}

.rang__nom {
  font-weight: 600;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}

.rang__detail {
  display: block;
  font-family: var(--donnee);
  font-size: 10.5px;
  color: var(--craie-douce);
  margin-top: 2px;
}

.rang__points {
  font-family: var(--donnee);
  font-size: 20px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  text-align: right;
}

/* ————————————————————————————— Divers */

.vide {
  text-align: center;
  padding: var(--e7) var(--e4);
  color: var(--craie-douce);
}

.vide h3 {
  font-size: 26px;
  color: var(--craie);
  margin-bottom: var(--e2);
}

.chargement {
  text-align: center;
  padding: var(--e7);
  color: var(--craie-douce);
  font-family: var(--donnee);
  font-size: 13px;
}

.section {
  margin-bottom: var(--e6);
}

.section > h2 {
  font-size: 27px;
  margin-bottom: var(--e3);
}

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

.paire {
  display: flex;
  justify-content: space-between;
  gap: var(--e3);
  padding: var(--e2) 0;
  border-bottom: 1px solid rgba(39, 66, 59, 0.5);
  font-size: 14px;
}

.paire span:last-child {
  font-family: var(--donnee);
  color: var(--craie-douce);
  text-align: right;
}

.code-invitation {
  font-family: var(--donnee);
  font-size: 19px;
  letter-spacing: 0.12em;
  color: var(--projecteur);
  background: var(--pelouse-nuit);
  border: 1px dashed var(--projecteur);
  border-radius: var(--rayon-petit);
  padding: var(--e3);
  text-align: center;
  margin: var(--e3) 0;
  user-select: all;
}

.etiquette {
  display: inline-block;
  font-family: var(--donnee);
  font-size: 10px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 2px var(--e2);
  border-radius: 999px;
  border: 1px solid var(--ligne);
  color: var(--craie-douce);
}

.etiquette--alerte {
  border-color: var(--alerte);
  color: var(--alerte);
}

.etiquette--ok {
  border-color: var(--projecteur);
  color: var(--projecteur);
}

.toast {
  position: fixed;
  left: 50%;
  bottom: calc(var(--barre-bas) + var(--e4) + env(safe-area-inset-bottom));
  transform: translate(-50%, 20px);
  background: var(--craie);
  color: var(--pelouse-nuit);
  font-weight: 600;
  font-size: 14px;
  padding: var(--e3) var(--e4);
  border-radius: 999px;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.18s ease, transform 0.18s ease;
  z-index: 50;
  max-width: calc(100vw - 2 * var(--e4));
  text-align: center;
}

.toast.est-visible {
  opacity: 1;
  transform: translate(-50%, 0);
}

.toast--erreur {
  background: var(--alerte);
  color: #fff;
}

/* Tableaux d'administration : ils doivent défiler seuls, jamais la page */
.defilant {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.saisie-score {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--e2);
}

.saisie-score label {
  display: flex;
  flex-direction: column;
  gap: var(--e1);
  font-size: 12px;
  color: var(--craie-douce);
  /*
    Sans `min-width: 0`, un enfant de grille ne descend pas sous la largeur
    intrinsèque de son contenu — et un `input[type=number]` en réclame beaucoup.
    Les deux colonnes débordaient donc de la carte sur un téléphone.
  */
  min-width: 0;
}

.saisie-score input {
  width: 100%;
  min-width: 0;
  min-height: var(--cible);
  background: var(--pelouse-nuit);
  border: 1px solid var(--ligne);
  border-radius: var(--rayon-petit);
  color: var(--craie);
  padding: 0 var(--e3);
  font-family: var(--donnee);
  font-size: 16px;
}

/* ————————————————————————————— Tablette : deux colonnes */

@media (min-width: 760px) {
  .vue {
    max-width: 900px;
    padding-left: var(--e5);
    padding-right: var(--e5);
  }

  .vue--deux-colonnes {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 300px;
    gap: var(--e5);
    align-items: start;
  }

  .colonne-cote {
    position: sticky;
    top: calc(var(--barre-haut) + var(--e4));
  }

  .equipe {
    grid-template-columns: 42px 1fr auto;
  }

  .equipe__ecusson,
  .equipe__monogramme {
    width: 42px;
    height: 42px;
  }

  .equipe__nom {
    font-size: 24px;
  }
}

/* —————————————————————————————
   PC : plus de barre latérale, un bouton flottant

   La barre de gauche mangeait 216 px en permanence pour cinq entrées qu'on
   visite rarement. Sur PC, on la remplace par un bouton flottant qui ouvre le
   menu à la demande, et tout l'écran revient aux matchs. Sur téléphone et
   tablette, les onglets du bas restent : le pouce les atteint sans effort, et
   c'est le geste attendu là-bas.
   ————————————————————————————— */

.flottant {
  position: fixed;
  right: calc(var(--e4) + env(safe-area-inset-right));
  bottom: calc(var(--barre-bas) + var(--e4) + env(safe-area-inset-bottom));
  z-index: 40;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  border: 1px solid var(--ligne);
  background: var(--projecteur);
  color: var(--pelouse-nuit);
  display: none;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.45);
  transition: transform 0.16s ease, background 0.16s ease;
}

.flottant:hover {
  transform: translateY(-2px);
}

.flottant__barres {
  display: flex;
  flex-direction: column;
  gap: 4px;
  width: 22px;
}

.flottant__barres i {
  display: block;
  height: 2.5px;
  border-radius: 2px;
  background: var(--pelouse-nuit);
  transition: transform 0.16s ease, opacity 0.16s ease;
}

/* Ouvert, les trois barres deviennent une croix : l'état est lisible sans texte. */
.flottant.est-ouvert .flottant__barres i:nth-child(1) {
  transform: translateY(6.5px) rotate(45deg);
}

.flottant.est-ouvert .flottant__barres i:nth-child(2) {
  opacity: 0;
}

.flottant.est-ouvert .flottant__barres i:nth-child(3) {
  transform: translateY(-6.5px) rotate(-45deg);
}

.menu-voile {
  position: fixed;
  inset: 0;
  z-index: 38;
  background: rgba(8, 15, 13, 0.55);
  backdrop-filter: blur(2px);
}

.menu-flottant {
  position: fixed;
  right: calc(var(--e4) + env(safe-area-inset-right));
  bottom: calc(var(--barre-bas) + var(--e4) + 56px + var(--e3) + env(safe-area-inset-bottom));
  z-index: 39;
  width: 250px;
  padding: var(--e3);
  border: 1px solid var(--ligne);
  border-radius: var(--rayon);
  background: var(--touche-haute);
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.5);
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.menu-flottant__tete {
  display: flex;
  align-items: center;
  gap: var(--e3);
  padding: var(--e2) var(--e2) var(--e3);
  margin-bottom: var(--e2);
  border-bottom: 1px solid var(--ligne);
}

.menu-flottant__avatar {
  display: flex;
  flex: 0 0 auto;
}

.menu-flottant__qui {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.menu-flottant__qui strong {
  font-size: 15px;
}

.menu-flottant__qui small {
  font-size: 11px;
  color: var(--craie-douce);
}

.menu-flottant__item {
  display: flex;
  align-items: center;
  gap: var(--e3);
  min-height: var(--cible);
  padding: 0 var(--e3);
  border: 0;
  border-radius: var(--rayon-petit);
  background: transparent;
  color: var(--craie-douce);
  font-size: 14.5px;
  font-weight: 600;
  cursor: pointer;
  text-align: left;
}

.menu-flottant__item:hover {
  background: var(--touche);
  color: var(--craie);
}

.menu-flottant__item.est-actif {
  background: var(--touche);
  color: var(--craie);
  box-shadow: inset 2px 0 0 var(--projecteur);
}

.menu-flottant__item--sortie {
  margin-top: var(--e2);
  border-top: 1px solid var(--ligne);
  padding-top: var(--e2);
  color: var(--alerte);
}

@media (min-width: 1080px) {
  /* Le bouton flottant prend le relais : les onglets du bas disparaissent. */
  .onglets-bas {
    display: none;
  }

  .flottant {
    display: flex;
    bottom: calc(var(--e5) + env(safe-area-inset-bottom));
  }

  .menu-flottant {
    bottom: calc(var(--e5) + 56px + var(--e3) + env(safe-area-inset-bottom));
  }

  .vue {
    max-width: 1080px;
    padding-bottom: var(--e7);
  }

  .toast {
    bottom: var(--e5);
  }
}

@media (prefers-reduced-motion: reduce) {
  * {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}

/* =============================================================
   Avatars dessinés, logos de compétition, saisie des paris
   ============================================================= */

.avatar {
  display: block;
  border-radius: 50%;
  flex: 0 0 auto;
}

.avatar-emoji {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
}

.barre__avatar {
  display: flex;
  margin-right: 2px;
}

/* ————————————————————————————— Constructeur d'avatar */

.constructeur {
  display: grid;
  gap: var(--e4);
  margin-top: var(--e2);
}

.constructeur__apercu {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--e3);
  padding: var(--e4);
  background: var(--pelouse-nuit);
  border: 1px solid var(--ligne);
  border-radius: var(--rayon);
}

.constructeur__grand .avatar {
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.4);
}

.constructeur__petits {
  display: flex;
  align-items: center;
  gap: var(--e2);
}

.constructeur__note {
  font-family: var(--donnee);
  font-size: 9.5px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--craie-douce);
}

.constructeur__traits {
  display: grid;
  gap: var(--e3);
}

.constructeur__rangee {
  display: grid;
  gap: var(--e1);
}

.constructeur__label {
  font-family: var(--donnee);
  font-size: 9.5px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--craie-douce);
}

.constructeur__choix {
  display: flex;
  flex-wrap: wrap;
  gap: var(--e1);
}

.pastille {
  min-height: var(--cible);
  padding: 0 var(--e3);
  border: 1px solid var(--ligne);
  border-radius: 999px;
  background: var(--touche);
  color: var(--craie-douce);
  font-size: 12.5px;
  font-weight: 600;
  cursor: pointer;
}

.pastille:hover {
  color: var(--craie);
}

.pastille.est-actif {
  background: var(--craie);
  border-color: var(--craie);
  color: var(--pelouse-nuit);
}

/* Pastille de couleur : c'est la couleur elle-même qui informe, pas un mot. */
.pastille--couleur {
  width: var(--cible);
  min-height: var(--cible);
  padding: 0;
  background: var(--teinte);
  border: 2px solid var(--ligne);
}

.pastille--couleur.est-actif {
  background: var(--teinte);
  border-color: var(--craie);
  box-shadow: 0 0 0 2px var(--pelouse-nuit), 0 0 0 4px var(--projecteur);
}

/* ————————————————————————————— Sélecteur de compétition, avec logo */

.competitions__item {
  display: flex;
  align-items: center;
  gap: var(--e2);
  flex: 0 0 auto;
}

.competition-logo {
  /* Les logos sont fournis en SVG à fond transparent, clairs sur fond sombre. */
  display: block;
  object-fit: contain;
  flex: 0 0 auto;
}

.competitions__nom {
  white-space: nowrap;
}

.competitions__pct {
  font-family: var(--donnee);
  font-size: 10.5px;
  color: var(--craie-douce);
  padding-left: var(--e1);
  border-left: 1px solid var(--ligne);
}

.competitions__item.est-actif .competitions__pct {
  color: var(--pelouse-nuit);
  border-left-color: rgba(12, 23, 20, 0.3);
}

/* ————————————————————————————— Jauge de remplissage */

.jauge {
  flex: 0 0 auto;
}

.jauge__texte {
  font-family: var(--donnee);
  font-size: 11px;
  font-weight: 700;
  fill: var(--craie-douce);
}

.jauge--complete .jauge__texte {
  fill: var(--projecteur);
}

.journee-tete__marque {
  display: flex;
  align-items: center;
  gap: var(--e3);
}

.journee-tete__marque > div {
  flex: 1;
  min-width: 0;
}

/* ————————————————————————————— La ligne d'équipe : le geste principal */

/*
  Toute la ligne désigne le vainqueur. C'est le plus gros bouton de la carte,
  et il doit se voir comme tel : bordure ambre et coche quand il est choisi.
*/
.equipe--cible {
  display: grid;
  grid-template-columns: 38px 1fr auto auto;
  align-items: center;
  gap: var(--e3);
  width: 100%;
  min-height: 58px;
  padding: var(--e2) var(--e3);
  margin: 0;
  border: 1.5px solid transparent;
  border-radius: var(--rayon-petit);
  background: transparent;
  color: inherit;
  text-align: left;
  cursor: pointer;
  transition: background 0.14s ease, border-color 0.14s ease;
}

.equipe--cible:hover:not(:disabled) {
  background: var(--touche-haute);
}

.equipe--cible[aria-disabled="true"] {
  cursor: default;
  opacity: 0.75;
}

.equipe--cible.est-choisie {
  border-color: var(--projecteur);
  background: rgba(240, 180, 41, 0.09);
}

.equipe__coche {
  font-size: 15px;
  font-weight: 700;
  color: var(--projecteur);
  opacity: 0;
  transition: opacity 0.14s ease;
}

.equipe--cible.est-choisie .equipe__coche {
  opacity: 1;
}

/* « Match nul » : même famille que les lignes d'équipe, en plus discret. */
.bouton-nul {
  display: block;
  width: 100%;
  /* La règle du projet : 44 px minimum, pouce compris. */
  min-height: var(--cible);
  margin: var(--e1) 0;
  border: 1px dashed var(--ligne);
  border-radius: var(--rayon-petit);
  background: transparent;
  color: var(--craie-douce);
  font-size: 12.5px;
  font-weight: 600;
  cursor: pointer;
}

.bouton-nul:hover:not(:disabled) {
  color: var(--craie);
  border-color: var(--craie-douce);
}

.bouton-nul.est-choisie {
  border-style: solid;
  border-color: var(--projecteur);
  background: rgba(240, 180, 41, 0.12);
  color: var(--craie);
}

.bouton-nul:disabled {
  cursor: default;
  opacity: 0.5;
}

/* —————————————————————————————
   Le score annoncé : deux compteurs

   On pronostiquait avant une FOURCHETTE d'écart sur une barre à quatre crans. Mais
   personne ne pense « 13 à 21 » : on pense « Toulouse 27-20 ». Chaque nombre est
   donc un vrai champ, tapable au clavier numérique, flanqué de deux boutons − et +
   pour le pouce — le rôle que tenaient les crans de la barre.
   ————————————————————————————— */

.rangee--score {
  display: grid;
  gap: var(--e2);
}

/*
   L'invitation à annoncer un score : toujours visible, elle dit ce qu'elle ouvre.

   Ce n'est pas un panneau qui cache un moyen de parier — le piège du mode « épuré »,
   documenté dans CLAUDE.md — mais un SUPPLÉMENT replié : le pari, c'est le vainqueur
   et les bonus, et le score est là pour qui veut viser plus précis. Il s'ouvre d'un
   geste, et il est déjà ouvert dès qu'un score a été annoncé.
*/
.score-saisie__invite {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--e2);
  /* Cible tactile de 44 px, comme partout. */
  min-height: var(--cible);
  cursor: pointer;
  list-style: none;
  font-size: 13px;
  color: var(--craie-douce);
}

.score-saisie__invite::-webkit-details-marker {
  display: none;
}

.score-saisie__invite-texte {
  display: flex;
  align-items: center;
  gap: var(--e2);
  font-weight: 600;
}

/* Un chevron qui pivote : l'état ouvert/fermé doit se voir. */
.score-saisie__invite-texte::before {
  content: "＋";
  font-family: var(--donnee);
  color: var(--projecteur);
  transition: transform 0.15s ease;
}

.rangee--score[open] .score-saisie__invite-texte::before {
  content: "−";
}

.rangee--score[open] .score-saisie__invite {
  color: var(--craie);
}

/* « facultatif » : annoncer un score n'est pas une obligation, et rien n'est
   pré-rempli — un nombre posé d'office serait un pronostic qu'on n'a pas fait. */
.score-saisie__facultatif {
  font-family: var(--donnee);
  font-size: 10.5px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--projecteur);
}

.score-saisie__ligne {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--e2);
}

.score-saisie__qui {
  display: flex;
  align-items: center;
  gap: var(--e2);
  min-width: 0;
}

.score-saisie__nom {
  font-size: 14px;
  color: var(--craie-douce);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.score-saisie__compteur {
  display: flex;
  align-items: center;
  gap: var(--e1);
  flex: 0 0 auto;
}

/* Cible tactile de 44 px comme partout : on appuie au pouce, pas au pixel. */
.score-saisie__pas {
  width: var(--cible);
  min-height: var(--cible);
  border: 1px solid var(--ligne);
  border-radius: var(--rayon-petit);
  background: transparent;
  color: var(--craie);
  font-size: 20px;
  line-height: 1;
  cursor: pointer;
}

.score-saisie__pas:hover {
  border-color: var(--projecteur);
  color: var(--projecteur);
}

.score-saisie__pas:disabled {
  cursor: default;
  opacity: 0.5;
}

.score-saisie__valeur {
  width: 3.4em;
  min-height: var(--cible);
  padding: 0;
  border: 1px solid var(--ligne);
  border-radius: var(--rayon-petit);
  background: rgba(255, 255, 255, 0.03);
  color: var(--craie);
  font-family: var(--donnee);
  font-size: 20px;
  font-weight: 700;
  text-align: center;
  /* Les flèches natives du champ nombre sont minuscules et doublent nos boutons. */
  -moz-appearance: textfield;
  appearance: textfield;
}

.score-saisie__valeur::-webkit-outer-spin-button,
.score-saisie__valeur::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

.score-saisie__valeur:focus {
  outline: none;
  border-color: var(--projecteur);
}

/*
   Ce que le score VEUT DIRE. Le vainqueur n'est plus une case qu'on coche : il
   découle des deux nombres, il faut donc l'énoncer — sans quoi rien ne dirait ce
   qu'on vient de parier.
*/
.score-saisie__sens {
  margin: 0;
  font-size: 12.5px;
  color: var(--projecteur);
  font-weight: 600;
}

/* —————————————————————————————
   Mode compact : une DENSITÉ, jamais une amputation

   Le mode « compact » resserre les marges et masque la légende des bonus. Il ne
   replie AUCUNE commande de pari : un réglage d'affichage qui fait disparaître un
   moyen de parier est un piège, pas une préférence.
   ————————————————————————————— */

.matchs--compact .match {
  padding: var(--e2) var(--e3);
  margin-bottom: var(--e2);
}

.matchs--compact .equipe--cible {
  min-height: 50px;
  padding: var(--e1) var(--e2);
}

.matchs--compact .match__tete {
  padding-bottom: var(--e1);
}

.matchs--compact .bouton-nul {
  margin: 0;
}

.matchs--compact .conseil,
.matchs--compact .match__pied {
  padding-top: var(--e1);
}

/* Le résumé d'un bloc dépliable (le conseil de l'expert) */
.conseil__resume {
  cursor: pointer;
  list-style: none;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--craie-douce);
  min-height: var(--cible);
  display: flex;
  align-items: center;
  gap: var(--e2);
}

.conseil__resume::-webkit-details-marker {
  display: none;
}

/* ————————————————————————————— L'expert */

.expert {
  padding: var(--e4);
  margin-bottom: var(--e4);
  border: 1px solid var(--ligne);
  border-left: 3px solid var(--cuir);
  border-radius: var(--rayon);
  background: var(--touche);
}

.expert__tete {
  display: flex;
  align-items: center;
  gap: var(--e3);
}

.expert__ballon {
  font-size: 22px;
  line-height: 1;
}

.expert__qui {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.expert__qui strong {
  font-family: var(--titre);
  font-size: 21px;
  font-weight: 700;
}

.expert__qui small {
  font-size: 11.5px;
  color: var(--craie-douce);
}

.expert__bio {
  margin: var(--e3) 0 0;
  font-size: 13.5px;
  font-style: italic;
  color: var(--craie-douce);
}

.expert__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--e2);
  margin-top: var(--e3);
}

/* Le conseil sur une carte de match, replié par défaut. */
.conseil {
  margin-top: var(--e2);
  border-top: 1px solid var(--ligne);
  padding-top: var(--e2);
}

.conseil__puce {
  font-size: 14px;
}

.conseil__quoi {
  color: var(--craie);
}

.conseil__confiance {
  margin-left: auto;
  font-size: 9px;
  letter-spacing: 0.16em;
  color: var(--cuir);
}

.conseil__texte {
  margin: var(--e2) 0;
  font-size: 13.5px;
  font-style: italic;
  color: var(--craie-douce);
}

.conseil__lignes {
  margin: 0 0 var(--e2);
  padding-left: var(--e4);
  font-size: 12px;
  color: var(--craie-douce);
}

.conseil__lignes li {
  margin-bottom: 2px;
}

/* ————————————————————————————— Groupes de classement */

.groupes {
  display: flex;
  gap: var(--e2);
  overflow-x: auto;
  padding-bottom: var(--e2);
  margin-bottom: var(--e4);
  scrollbar-width: none;
}

.groupes::-webkit-scrollbar {
  display: none;
}

.groupes__item {
  flex: 0 0 auto;
  min-height: var(--cible);
  padding: 0 var(--e3);
  border: 1px solid var(--ligne);
  border-radius: 999px;
  background: var(--touche);
  color: var(--craie-douce);
  font-size: 13.5px;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
}

.groupes__item small {
  font-family: var(--donnee);
  font-size: 10px;
  opacity: 0.7;
  margin-left: 2px;
}

.groupes__item.est-actif {
  background: var(--teinte, var(--projecteur));
  border-color: var(--teinte, var(--projecteur));
  color: var(--pelouse-nuit);
}

.groupes__item--rejoindre {
  border-style: dashed;
}

.rang__avatar {
  display: flex;
  align-items: center;
}

/* ————————————————————————————— Paris de saison */

.carte--saison {
  margin-bottom: var(--e3);
}

.carte--saison__tete {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--e2);
  margin-bottom: var(--e1);
}

.carte--saison__etat {
  margin: var(--e3) 0 0;
  font-family: var(--donnee);
  font-size: 11px;
  color: var(--craie-douce);
}

/* Les six qualifiés : une grille de pastilles à cocher, pas une liste déroulante. */
.grille-equipes {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(132px, 1fr));
  gap: var(--e2);
  margin-top: var(--e3);
}

.puce-equipe {
  display: flex;
  align-items: center;
  gap: var(--e2);
  min-height: var(--cible);
  padding: 0 var(--e2);
  border: 1.5px solid var(--ligne);
  border-radius: var(--rayon-petit);
  background: var(--touche);
  color: var(--craie-douce);
  font-size: 12.5px;
  font-weight: 600;
  cursor: pointer;
  text-align: left;
}

.puce-equipe span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.puce-equipe.est-choisie {
  border-color: var(--projecteur);
  background: rgba(240, 180, 41, 0.1);
  color: var(--craie);
}

.puce-equipe:disabled {
  cursor: default;
  opacity: 0.6;
}

.grille-equipes__compte {
  grid-column: 1 / -1;
  margin: 0;
  font-family: var(--donnee);
  font-size: 11px;
  color: var(--craie-douce);
}

/* ————————————————————————————— Administration */

.membres {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: var(--e1);
  margin-top: var(--e2);
}

.membres__item {
  display: flex;
  align-items: center;
  gap: var(--e2);
  min-height: 36px;
  font-size: 13px;
  cursor: pointer;
}

.membres__item input {
  width: 18px;
  height: 18px;
  accent-color: var(--projecteur);
}

.ligne-compte {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--e2);
  min-height: var(--cible);
  border-bottom: 1px solid var(--ligne);
  font-size: 14px;
}

.ligne-compte:last-child {
  border-bottom: 0;
}

/* —————————————————————————————
   Fiche de compte, en administration

   Le PSEUDO en gros, l'IDENTIFIANT en dessous et en chiffres de machine : ce sont
   deux choses, et les confondre a déjà fait croire à un copain qu'il devait donner
   sa clé de connexion aux autres.
   ————————————————————————————— */

.fiche-compte {
  padding: var(--e2) 0;
  border-bottom: 1px solid var(--ligne);
}

.fiche-compte:last-child {
  border-bottom: 0;
}

.fiche-compte__tete {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--e2);
}

/* Les deux identités, l'une sous l'autre et chacune étiquetée. */
.fiche-compte__qui {
  display: grid;
  gap: var(--e1);
  font-size: 15px;
  min-width: 0;
}

.fiche-compte__paire {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--e2);
}

/* L'étiquette est en petites capitales, assez discrète pour ne pas concurrencer
   la valeur, assez présente pour qu'on sache lequel des deux on lit. */
.fiche-compte__etiquette {
  flex: 0 0 72px;
  font-family: var(--donnee);
  font-size: 9.5px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--craie-douce);
}

.fiche-compte__pseudo {
  font-size: 16px;
}

.fiche-compte__identifiant {
  font-family: var(--donnee);
  font-size: 12.5px;
  padding: 1px var(--e2);
  border-radius: var(--rayon-petit);
  background: var(--touche);
  color: var(--craie);
  user-select: all;
}

/* —————————————————————————————
   Le mot de passe temporaire

   Il ne s'affiche qu'UNE fois — il n'est stocké que haché — donc il est écrit en
   gros, en police de données, et copiable d'un bouton. Le recopier à la main,
   c'est une faute de frappe puis une seconde réinitialisation.
   ————————————————————————————— */

.mdp-temporaire__quoi,
.mdp-temporaire__consigne,
.mdp-temporaire__ligne {
  display: block;
}

.mdp-temporaire__ligne {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--e2);
  margin: var(--e2) 0;
}

.mdp-temporaire__valeur {
  font-family: var(--donnee);
  font-size: 20px;
  font-weight: 700;
  letter-spacing: 0.04em;
  padding: var(--e1) var(--e2);
  border-radius: var(--rayon-petit);
  background: var(--touche-haute);
  color: var(--projecteur);
  user-select: all;
}

.mdp-temporaire__consigne {
  font-size: 12px;
  color: var(--craie-douce);
}

.fiche-compte__actions {
  display: flex;
  gap: var(--e1);
  flex: 0 0 auto;
}

.fiche-compte__meta {
  margin: 2px 0 0;
  font-size: 11.5px;
  color: var(--craie-douce);
}

/* Le champ de confirmation, déplié seulement au premier clic sur « Supprimer » :
   le geste est le seul irréversible de l'écran. */
.fiche-compte__confirme {
  margin-top: var(--e2);
  padding: var(--e2) var(--e3);
  border-left: 3px solid var(--alerte);
  border-radius: var(--rayon-petit);
  background: var(--touche);
  display: grid;
  gap: var(--e2);
}

/* Même pastille de rôle qu'au classement, réutilisée ici. */
.pastille-role {
  padding: 1px var(--e2);
  border: 1px solid var(--ligne);
  border-radius: 999px;
  font-family: var(--donnee);
  font-size: 8.5px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--craie-douce);
}

/* Un champ qu'on LIT sans pouvoir le changer : l'identifiant de connexion. */
.champ-fixe {
  margin: 0;
}

.champ-fixe code {
  font-family: var(--donnee);
  font-size: 14px;
  padding: var(--e1) var(--e2);
  border-radius: var(--rayon-petit);
  background: var(--touche);
  color: var(--craie);
  user-select: all;
}

.segments--mode {
  margin-top: var(--e2);
}

/* Avis : une ligne d'information qui n'est ni une erreur ni un succès. */
.avis {
  margin: var(--e3) 0 0;
  padding: var(--e2) var(--e3);
  border-left: 3px solid var(--craie-douce);
  border-radius: var(--rayon-petit);
  background: var(--touche);
  font-size: 12.5px;
  color: var(--craie-douce);
}

.avis--figee {
  border-left-color: var(--cuir);
}

/* ————————————————————————————— Tablette et PC : deux colonnes pour l'avatar */

@media (min-width: 760px) {
  .constructeur {
    grid-template-columns: 210px minmax(0, 1fr);
    align-items: start;
  }

  .constructeur__apercu {
    position: sticky;
    top: calc(var(--barre-haut) + var(--e3));
  }
}

/* ————————————————————————————— Quitter une vue de réglages */

.journee-tete--fermable {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--e3);
}

/*
  Le profil et l'administration sont des détours : il faut pouvoir en sortir sans
  chercher l'onglet d'où l'on vient. Une croix, à l'endroit où on la cherche.
*/
.fermer {
  flex: 0 0 auto;
  width: var(--cible);
  height: var(--cible);
  display: grid;
  place-items: center;
  border: 1px solid var(--ligne);
  border-radius: 50%;
  background: var(--touche);
  color: var(--craie-douce);
  cursor: pointer;
}

.fermer:hover {
  color: var(--craie);
  border-color: var(--craie-douce);
  background: var(--touche-haute);
}

.fermer svg {
  width: 19px;
  height: 19px;
}

/* ————————————————————————————— Classement : l'axe des championnats */

.competitions--classement {
  margin-bottom: var(--e4);
}

.competitions--classement .competitions__item {
  gap: var(--e2);
}

/* ————————————————————————————— Administration */

.score-admin {
  font-family: var(--donnee);
  font-size: 15px;
  font-weight: 700;
  color: var(--craie-douce);
  padding: 0 var(--e1);
}

/* « facultatif » : le mot compte, puisque plus rien n'est obligatoire ici. */
.facultatif {
  font-family: var(--donnee);
  font-size: 9.5px;
  font-weight: 400;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--craie-douce);
  border: 1px solid var(--ligne);
  border-radius: 999px;
  padding: 2px var(--e2);
  margin-left: var(--e2);
  vertical-align: middle;
}

/* ————————————————————————————— L'en-tête devient un bouton de groupe */

/*
  Le titre affiche le nom du groupe de paris. Il n'est cliquable que lorsqu'on
  appartient à plusieurs groupes : un bouton qui ne fait rien est pire qu'un titre.
*/
.barre__gauche {
  border: 0;
  background: transparent;
  padding: 0;
  text-align: left;
  color: inherit;
  font: inherit;
  cursor: default;
}

.barre__groupe--cliquable {
  cursor: pointer;
}

.barre__groupe--cliquable .barre__ligue::after {
  content: " ⌄";
  font-family: var(--texte);
  font-size: 15px;
  color: var(--craie-douce);
}

.barre__groupe--cliquable:hover .barre__ligue {
  color: var(--projecteur);
}

/* ————————————————————————————— Séparateur de liste de matchs */

/*
  Les matchs à parier passent devant ceux déjà commencés. Comme cet ordre n'est
  plus chronologique, il faut le NOMMER : sans ce titre, on croirait à un bogue.
*/
.separateur {
  display: flex;
  align-items: center;
  gap: var(--e3);
  margin: var(--e4) 0 var(--e2);
  font-family: var(--donnee);
  font-size: 9.5px;
  font-weight: 400;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--craie-douce);
}

.separateur::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--ligne);
}

.separateur:first-child {
  margin-top: 0;
}

/* Ce qui est encore ouvert : c'est là qu'on veut regarder. */
.separateur--ouvert {
  color: var(--projecteur);
}

.separateur--ouvert::after {
  background: linear-gradient(90deg, var(--projecteur), var(--ligne));
  opacity: 0.5;
}

/* ————————————————————————————— Copier une clé (administration)

   Réservé à l'administrateur : c'est lui qui distribue les clés, souvent par
   message. Un membre, lui, se contente de lire la sienne à l'écran — la clé est
   sélectionnable d'un geste, un bouton de plus n'aurait rien apporté.
   ————————————————————————————— */

.champ-copiable {
  display: flex;
  align-items: center;
  gap: var(--e2);
  margin-top: var(--e2);
}

.champ-copiable input,
.champ-copiable .code-invitation {
  flex: 1 1 auto;
  min-width: 0;
  margin: 0;
}

.bouton-copier {
  flex: 0 0 auto;
  min-height: var(--cible);
  padding: 0 var(--e4);
  font-size: 13px;
  white-space: nowrap;
}

/* La liste récapitulative de toutes les clés */

.ligne-cle {
  display: flex;
  align-items: center;
  gap: var(--e3);
  min-height: 56px;
  border-bottom: 1px solid var(--ligne);
}

.ligne-cle:last-child {
  border-bottom: 0;
}

.ligne-cle__quoi {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  min-width: 0;
  font-size: 14px;
  font-weight: 600;
}

.ligne-cle__quoi small {
  font-family: var(--donnee);
  font-size: 9.5px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-weight: 400;
  color: var(--craie-douce);
}

.ligne-cle__valeur {
  font-family: var(--donnee);
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.06em;
  color: var(--projecteur);
  user-select: all;
  white-space: nowrap;
}

/* ————————————————————————————— Appartenance à un groupe

   L'organisateur voit tous les groupes, y compris ceux où il n'est pas classé.
   Comme un pari appartient à une personne et non à un groupe, entrer dans un
   groupe y fait compter les paris déjà posés : rien à resaisir.
   ————————————————————————————— */

.appartenance {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--e3);
  flex-wrap: wrap;
  padding: var(--e2) var(--e4);
  margin-bottom: var(--e3);
  border: 1px solid var(--ligne);
  border-radius: var(--rayon);
  font-size: 12.5px;
  color: var(--craie-douce);
}

.appartenance--dehors {
  border-style: dashed;
  border-color: var(--cuir);
}

/* Un groupe qu'on observe sans en être membre : présent, mais en retrait. */
.groupes__item--observe {
  border-style: dashed;
  opacity: 0.8;
}

.groupes__item--observe.est-actif {
  opacity: 1;
}

/* Pastille de RÔLE, pour que le pseudo reste un pseudo : celui qui organise
   participe comme les autres, son titre n'est pas son identité. */
.rang__role {
  display: inline-block;
  margin-left: var(--e2);
  padding: 1px var(--e2);
  border: 1px solid var(--ligne);
  border-radius: 999px;
  font-family: var(--donnee);
  font-size: 8.5px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--craie-douce);
  vertical-align: 2px;
}

/* ————————————————————————————— Légende du classement

   « issues », « écarts », « paris » ne voulaient rien dire pour qui n'a pas écrit
   le barème. Trois lignes suffisent à lever le doute, et les valeurs en points
   sont lues dans le barème réel : le modifier met la légende à jour.
   ————————————————————————————— */

/*
 * Le bloc `.legende-classement` a été retiré avec la légende qu'il habillait.
 * Elle expliquait trois nombres alignés sur la ligne de classement ; ces nombres
 * sont maintenant dans un tiroir qui les nomme et les chiffre, et n'ont donc plus
 * besoin d'un mode d'emploi. Voir `.tiroir` plus bas.
 */

/* ============================================================
   Lire un match passé — trois situations, trois couleurs

   Le score seul ne dit pas si l'on a bien joué. La carte porte donc son
   verdict : neutre quand on n'avait pas pronostiqué, verte quand le
   pronostic a rapporté, rouge quand il n'a rien donné. La couleur arrive
   avant le texte, et c'est voulu — on parcourt une journée du pouce.
   ============================================================ */

/*
 * Le liseré gauche portait la couleur du club, puis l'ambre sur un match validé.
 * Le verdict le remplace : sur un match joué, savoir si l'on a marqué compte plus
 * que de reconnaître l'écusson, qui est de toute façon juste à côté.
 */
.match--gagne {
  border-left-color: var(--reussite);
}

.match--perdu {
  border-left-color: var(--alerte);
}

.match--sans-pari {
  border-left-color: var(--ligne);
}

/*
 * `.match--verrouille` pose 0.78 d'opacité sur tout match commencé. Sur une carte
 * qui porte un verdict, ce voile délavait le vert et le rouge jusqu'à les rendre
 * indistincts : on le retire. Il reste sur les cartes sans pronostic, où l'effet
 * de retrait est exactement ce qu'on veut.
 */
.match--gagne,
.match--perdu {
  opacity: 1;
}

/*
   Le verdict : résumé à gauche, total à droite, et le rappel du score annoncé sur
   SA PROPRE ligne.

   Les trois étaient sur une seule rangée : le résumé se faisait tronquer en
   « vainqueur, scor… » et le total chevauchait le rappel du score. Or le résumé est
   précisément ce qu'on vient lire. Deux lignes, et chacune respire.
*/
.match__verdict {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: var(--e1) var(--e2);
  width: 100%;
  min-width: 0;
}

.match__etat {
  display: flex;
  align-items: center;
  gap: var(--e2);
  min-width: 0;
}

.match__etat--absent {
  font-style: italic;
}

.match__etat--gagne {
  color: var(--reussite);
}

.match__etat--perdu {
  color: var(--alerte);
}

/* Le sceau ✓ / ✗ : un rond plein, lisible sans lire le texte. */
.match__sceau {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  font-size: 11px;
  font-weight: 700;
  line-height: 1;
  color: var(--pelouse-nuit);
  background: currentColor;
}

.match__etat--gagne .match__sceau {
  background: var(--reussite);
}

.match__etat--perdu .match__sceau {
  background: var(--alerte);
}

/* Le résumé peut passer à la ligne : le tronquer cachait ce qu'on vient lire. */
.match__resume {
  min-width: 0;
}

/*
 * Le pied contient maintenant deux étages — le verdict, puis le dépliable des
 * pronostics des copains — là où il n'avait qu'une ligne.
 */
.match__pied {
  flex-direction: column;
  align-items: stretch;
}

/* ————————————————————————————— Un choix juste, un choix faux

   `est-choisie` marque l'équipe qu'on a désignée, en ambre. Sur un match
   tranché, cette marque ne suffit plus : elle dit ce qu'on a coché, pas si
   on avait raison. Ces deux règles la recolorent, et ne s'appliquent
   qu'après le coup de sifflet — avant, il n'y a rien à trancher. */

.equipe--cible.est-choisie--juste,
.bouton-nul.est-choisie--juste {
  border-color: var(--reussite);
  background: rgba(94, 185, 138, 0.12);
}

.equipe--cible.est-choisie--faux,
.bouton-nul.est-choisie--faux {
  border-color: var(--alerte);
  background: rgba(217, 105, 76, 0.1);
}

.equipe--cible.est-choisie--juste .equipe__coche {
  color: var(--reussite);
}

.equipe--cible.est-choisie--faux .equipe__coche {
  color: var(--alerte);
}

/* ————————————————————————————— Les pronostics des copains

   Ils passaient par une `alert()` du navigateur, et seulement sur un match
   commencé, non validé, où l'on avait soi-même parié — donc jamais au moment
   où l'on veut les voir. Ils sont maintenant dépliables sur tout match
   commencé. */

.copains {
  border-top: 1px dashed var(--ligne);
  margin-top: var(--e2);
  padding-top: var(--e2);
}

.copains__resume {
  cursor: pointer;
  /* La cible tactile réglementaire : on ouvre ça du pouce. */
  min-height: 32px;
  display: flex;
  align-items: center;
  font-family: var(--donnee);
  font-size: 10.5px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--craie-douce);
  list-style: none;
}

.copains__resume::-webkit-details-marker {
  display: none;
}

.copains__resume::before {
  content: "▸";
  margin-right: var(--e2);
  transition: transform 0.14s ease;
}

.copains[open] > .copains__resume::before {
  transform: rotate(90deg);
}

.copains__resume:hover {
  color: var(--craie);
}

.copains__liste {
  list-style: none;
  margin: var(--e2) 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--e1);
}

.copains__ligne {
  display: grid;
  /* Qui · quoi · ce qui a marché · points. Le nom et le choix ne se compriment
     pas ; c'est le détail qui cède la place sur un écran étroit. */
  grid-template-columns: minmax(60px, auto) minmax(70px, auto) 1fr auto;
  /* Centré, et non aligné sur la ligne de base : la première cellule porte l'avatar
     et fait 44 px de haut, ce qui poussait tout le reste vers le bas. */
  align-items: center;
  gap: var(--e2);
  padding: var(--e1) var(--e2);
  border-radius: var(--rayon-petit);
  border-left: 2px solid transparent;
  background: var(--touche);
  font-size: 11.5px;
}

.copains__ligne--gagne {
  border-left-color: var(--reussite);
}

.copains__ligne--perdu {
  border-left-color: var(--alerte);
}

.copains__ligne--moi {
  background: var(--touche-haute);
}

/* L'avatar précède le nom, et ouvre le portrait du copain. En flex, la coupure du
   texte se règle sur l'enfant : `text-overflow` sur le conteneur ne mordrait sur
   rien, un nœud de texte nu n'étant pas un élément. */
.copains__qui {
  display: flex;
  align-items: center;
  gap: var(--e2);
  min-width: 0;
  /* La cible tactile fait 44 px comme partout : c'est le NOM avec l'avatar qui
     ouvre le portrait, sinon un avatar de 26 px demanderait de viser. */
  min-height: var(--cible);
  font-weight: 600;
  color: var(--craie);
  text-align: left;
}

/* Quand c'est un bouton (le copain a un identifiant), il ne doit rien changer à
   l'allure de la ligne : ni fond, ni bordure, ni police de formulaire. */
button.copains__qui {
  padding: 0;
  border: 0;
  background: transparent;
  font: inherit;
  font-weight: 600;
  cursor: pointer;
}

button.copains__qui:hover .copains__nom,
button.copains__qui:focus-visible .copains__nom {
  color: var(--projecteur);
}

.copains__nom {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.copains__choix {
  font-family: var(--donnee);
  font-size: 10.5px;
  color: var(--craie);
}

.copains__detail {
  color: var(--craie-douce);
  font-size: 10.5px;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}

.copains__points {
  font-family: var(--donnee);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: var(--projecteur);
  text-align: right;
}

.copains__vide,
.copains__attente {
  margin: var(--e2) 0 0;
  font-style: italic;
  color: var(--craie-douce);
  font-size: 11.5px;
}

/* Sous 380 px, la ligne à quatre colonnes se replie sur deux étages plutôt que
   de rogner les noms jusqu'à l'illisible. */
@media (max-width: 380px) {
  .copains__ligne {
    grid-template-columns: 1fr auto;
  }

  .copains__detail {
    grid-column: 1 / -1;
  }
}

/* ============================================================
   Classement : le total, et son détail au clic

   La ligne portait quatre nombres dont trois n'étaient pas des points.
   Elle demandait une légende, ce qui disait le problème. Ne reste que le
   total ; le détail se déplie, chaque poste nommé et chiffré, et la
   somme des postes vaut le total — un classement vérifiable.
   ============================================================ */

.rang-bloc {
  border: 1px solid var(--ligne);
  border-radius: var(--rayon);
  background: var(--touche);
  overflow: hidden;
}

.rang-bloc--podium {
  border-color: rgba(240, 180, 41, 0.4);
}

.rang-bloc--moi {
  background: var(--touche-haute);
  border-color: var(--projecteur);
}

/*
 * Le `summary` reprend la grille de l'ancienne `div.rang`. Bordure et fond
 * remontent sur `.rang-bloc`, qui les porte pour les deux étages à la fois.
 */
.rang {
  background: transparent;
  border: 0;
  border-radius: 0;
  cursor: pointer;
  list-style: none;
}

.rang::-webkit-details-marker {
  display: none;
}

.rang:hover .rang__nom {
  color: #fff;
}

/*
 * Le chevron remplace la coche de dépliage, à droite du total.
 *
 * Pas de `grid-column` : le placement automatique le met dans la cinquième
 * colonne, après les points. Le forcer en quatrième — ce qu'une première version
 * faisait — le superposait au total, la cinquième colonne restant vide.
 */
.rang::after {
  content: "▸";
  font-size: 11px;
  color: var(--craie-douce);
  transition: transform 0.14s ease;
}

.rang-bloc[open] > .rang::after {
  transform: rotate(90deg);
}

/* Quatre colonnes deviennent cinq : place, avatar, nom, points, chevron. */
.rang {
  grid-template-columns: 42px 34px 1fr auto 14px;
}

.tiroir {
  padding: 0 var(--e3) var(--e3);
  border-top: 1px dashed var(--ligne);
  margin-top: 0;
}

.tiroir__postes {
  list-style: none;
  margin: var(--e2) 0 0;
  padding: 0;
}

.tiroir__poste {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--e2);
  padding: var(--e1) 0;
  font-size: 12px;
  color: var(--craie-douce);
}

.tiroir__quoi {
  min-width: 0;
}

.tiroir__pts {
  font-family: var(--donnee);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: var(--craie);
  flex: 0 0 auto;
}

/* La somme : c'est elle qui rend le total vérifiable, donc elle se détache. */
.tiroir__somme {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--e2);
  margin: var(--e2) 0 0;
  padding-top: var(--e2);
  border-top: 1px solid var(--ligne);
  font-size: 12px;
  color: var(--craie-douce);
}

.tiroir__total {
  font-family: var(--donnee);
  font-size: 15px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: var(--projecteur);
}

.tiroir__note {
  margin: var(--e2) 0 0;
  font-size: 11px;
  font-style: italic;
  line-height: 1.45;
  color: var(--craie-douce);
}

/* —————————————————————————————
   Le portrait d'un copain

   Un classement n'est qu'une liste de noms et de nombres. Chacun s'est pourtant
   dessiné une tête au constructeur d'avatar : on touche l'avatar dans la ligne, il
   s'ouvre en 200 px, avec son expert et son club de cœur. Ce qui n'y figure jamais,
   c'est son identifiant de connexion — un pseudo ne doit rien révéler de la clé.
   ————————————————————————————— */

/* L'avatar d'une ligne devient un bouton. Il vit dans un <summary> qui déplie le
   détail des points : le bouton doit donc se distinguer sans se prendre pour la
   ligne entière. */
.avatar-lien {
  display: block;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: transparent;
  cursor: pointer;
  /* La cible reste celle de l'avatar : ajouter du rembourrage la ferait chevaucher
     le nom, et toucher le nom doit continuer de déplier les points. */
  line-height: 0;
  outline-offset: 2px;
}

.avatar-lien:hover,
.avatar-lien:focus-visible {
  box-shadow: 0 0 0 2px var(--projecteur);
}

.portrait-voile {
  position: fixed;
  inset: 0;
  z-index: 44;
  background: rgba(8, 15, 13, 0.68);
  backdrop-filter: blur(3px);
}

.portrait {
  position: fixed;
  z-index: 45;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: min(420px, calc(100vw - 2 * var(--e4)));
  /* Un avatar de 200 px plus l'expert peuvent dépasser un petit téléphone : le
     panneau défile plutôt que de sortir de l'écran. */
  max-height: min(88vh, 780px);
  overflow-y: auto;
  padding: var(--e4);
  border: 1px solid var(--ligne);
  border-radius: var(--rayon);
  background: var(--touche-haute);
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.6);
}

/* Le fond ne défile plus derrière le panneau ouvert. */
.corps--fige {
  overflow: hidden;
}

.portrait__tete {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--e2);
}

.portrait__nom {
  margin: 0;
  font-family: var(--titre);
  font-size: 30px;
  line-height: 1.05;
  color: var(--craie);
}

.portrait__attente {
  margin: 0;
  color: var(--craie-douce);
  font-size: 14px;
}

/* L'avatar en grand : la raison d'être de cet écran. */
.portrait__avatar {
  display: flex;
  justify-content: center;
  margin: var(--e3) 0;
}

.portrait__roles {
  display: flex;
  flex-wrap: wrap;
  gap: var(--e1);
  justify-content: center;
  margin: 0 0 var(--e3);
}

.portrait__classement {
  margin: 0 0 var(--e3);
  padding: var(--e2) var(--e3);
  border-radius: var(--rayon-petit);
  background: var(--touche);
  text-align: center;
  font-size: 13.5px;
  color: var(--craie-douce);
}

.portrait__classement strong {
  font-family: var(--donnee);
  font-size: 17px;
  color: var(--projecteur);
}

.portrait__faits {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--e1) var(--e3);
  margin: 0;
  font-size: 13.5px;
}

.portrait__faits dt {
  color: var(--craie-douce);
}

.portrait__faits dd {
  margin: 0;
  color: var(--craie);
}

.portrait__expert {
  margin-top: var(--e4);
  padding-top: var(--e3);
  border-top: 1px solid var(--ligne);
}

/* —————————————————————————————
   D'où viennent les points d'un match

   Le même principe que le tiroir du classement, appliqué au match : chaque poste
   nommé et chiffré, et la somme vaut le total. Le résumé en une ligne dit CE QUI a
   marché, pas ce que ça valait — un copain qui revient sur une journée passée veut
   les deux, et surtout ce qu'il aurait fallu annoncer.

   Replié : sept matchs dépliés d'office feraient un mur, et le verdict coloré
   suffit à parcourir une journée du pouce.
   ————————————————————————————— */

.detail-match {
  margin-top: var(--e2);
  border-top: 1px dashed var(--ligne);
}

.detail-match__resume {
  cursor: pointer;
  list-style: none;
  /* Cible tactile de 44 px, comme partout. */
  min-height: var(--cible);
  display: flex;
  align-items: center;
  gap: var(--e2);
  font-size: 12.5px;
  font-weight: 600;
  color: var(--craie-douce);
}

.detail-match__resume::-webkit-details-marker {
  display: none;
}

.detail-match__resume::before {
  content: "＋";
  font-family: var(--donnee);
  color: var(--projecteur);
}

.detail-match[open] .detail-match__resume::before {
  content: "−";
}

.detail-match[open] .detail-match__resume {
  color: var(--craie);
}

.detail-match__postes {
  list-style: none;
  margin: 0 0 var(--e2);
  padding: 0;
  display: grid;
  gap: var(--e1);
}

.detail-match__poste {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--e2);
  padding: var(--e1) 0 var(--e1) var(--e2);
  /* Un liseré coloré par verdict : on voit ce qui a marché avant de lire. */
  border-left: 2px solid var(--ligne);
  font-size: 12.5px;
}

.detail-match__poste--juste {
  border-left-color: var(--reussite);
}

.detail-match__poste--proche {
  border-left-color: var(--projecteur);
}

.detail-match__poste--manque {
  border-left-color: var(--alerte);
}

.detail-match__poste--coeff {
  border-left-color: transparent;
  color: var(--craie-douce);
  font-style: italic;
}

.detail-match__quoi {
  display: grid;
  gap: 1px;
  min-width: 0;
  color: var(--craie);
}

/* Ce qu'il aurait fallu annoncer : on apprend le barème en lisant ses erreurs. */
.detail-match__quoi small {
  font-size: 11px;
  color: var(--craie-douce);
}

.detail-match__pts {
  flex: 0 0 auto;
  font-family: var(--donnee);
  font-weight: 700;
  color: var(--craie);
}

.detail-match__total {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--e2);
  margin: 0;
  padding-top: var(--e2);
  border-top: 1px solid var(--ligne);
  font-size: 12.5px;
  color: var(--craie-douce);
}

.detail-match__total strong {
  font-family: var(--donnee);
  font-size: 16px;
  color: var(--projecteur);
}

/* —————————————————————————————
   Le bilan de la journée

   Destiné à sortir de l'application : on le colle dans une conversation. Le texte
   vit donc dans un textarea en lecture seule — le seul élément qu'un navigateur
   mobile laisse sélectionner d'un geste et copier sans passer par le presse-papiers
   programmatique, indisponible en HTTP.
   ————————————————————————————— */

.bilan__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--e2);
  margin-bottom: var(--e3);
}

.bilan__texte {
  width: 100%;
  padding: var(--e3);
  border: 1px solid var(--ligne);
  border-radius: var(--rayon-petit);
  background: var(--pelouse-nuit);
  color: var(--craie);
  /* Police de données : les chiffres s'alignent, et on voit que c'est du texte
     brut destiné à être recopié tel quel. */
  font-family: var(--donnee);
  font-size: 12.5px;
  line-height: 1.55;
  resize: vertical;
}

.bilan__texte:focus {
  outline: none;
  border-color: var(--projecteur);
}

/* L'image du podium : affichée après génération, pour l'appui long sur téléphone. */
.bilan__canvas {
  display: block;
  width: 100%;
  max-width: 420px;
  height: auto;
  margin: var(--e3) auto 0;
  border-radius: var(--rayon-petit);
  border: 1px solid var(--ligne);
}

/* —————————————————————————————
   « Tu n'es dans aucun groupe »

   Le défaut le plus discret possible : un copain qui a posé des paris sans être
   membre d'un groupe n'apparaît dans AUCUN classement. Ses points existent, ils ne
   sont affichés nulle part — et l'anomalie est invisible par construction, puisqu'elle
   consiste à ne pas figurer sur un écran. C'est arrivé à l'organisateur lui-même,
   avec vingt-neuf pronostics posés.

   D'où une alerte franche, avant les onglets, avec le geste qui la règle à côté.
   ————————————————————————————— */

.appartenance--alerte {
  flex-wrap: wrap;
  margin-bottom: var(--e3);
  padding: var(--e3);
  border: 1px solid var(--alerte);
  border-left-width: 4px;
  border-radius: var(--rayon-petit);
  background: rgba(217, 105, 76, 0.12);
  color: var(--craie);
  font-size: 13.5px;
  line-height: 1.5;
}

.appartenance--alerte strong {
  color: var(--alerte);
}