/* ============================================================
   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;

  /* 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);
}

.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;
}

/* —————————————————————————————
   La barre d'écart : quatre crans, pas un continuum

   Seules les quatre fourchettes du barème rapportent des points ; un écart au
   point près n'aurait apporté qu'une précision trompeuse. Chaque cran est aussi
   un bouton, pour viser directement sans faire glisser la poignée.
   ————————————————————————————— */

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

/*
   L'intitulé et la description sur DEUX lignes : « 6 à 12 points — une possession
   d'écart » ne tient pas à côté de « Écart de points » sur un téléphone, et
   débordait de la carte.
*/
.ecart__tete {
  display: grid;
  gap: 2px;
}

.ecart__actuel {
  font-size: 12.5px;
  color: var(--projecteur);
  font-weight: 600;
}

.curseur {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  /* Le rail ne fait que 6 px, mais la zone saisissable doit faire 44 px :
     on attrape un curseur au pouce, pas au pixel. */
  height: var(--cible);
  background: transparent;
  cursor: pointer;
  margin: 0;
}

.curseur::-webkit-slider-runnable-track {
  height: 6px;
  border-radius: 999px;
  background: var(--ligne);
}

.curseur::-moz-range-track {
  height: 6px;
  border-radius: 999px;
  background: var(--ligne);
}

.curseur::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 26px;
  height: 26px;
  margin-top: -10px;
  border-radius: 50%;
  background: var(--projecteur);
  border: 2px solid var(--pelouse-nuit);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.4);
}

.curseur::-moz-range-thumb {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: var(--projecteur);
  border: 2px solid var(--pelouse-nuit);
}

.curseur:disabled {
  opacity: 0.45;
  cursor: default;
}

.ecart__crans {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--e1);
}

.ecart__cran {
  /* Cible tactile : 44 px comme partout ailleurs. */
  min-height: var(--cible);
  padding: 0 2px;
  border: 1px solid transparent;
  border-radius: var(--rayon-petit);
  background: transparent;
  color: var(--craie-douce);
  font-family: var(--donnee);
  font-size: 10.5px;
  cursor: pointer;
  white-space: nowrap;
}

.ecart__cran:hover:not(:disabled) {
  color: var(--craie);
}

.ecart__cran.est-actif {
  border-color: var(--projecteur);
  color: var(--projecteur);
  background: rgba(240, 180, 41, 0.1);
}

.ecart__cran:disabled {
  cursor: default;
  opacity: 0.5;
}

/* —————————————————————————————
   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;
}

.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;
}