/* Charte « Plein écran verre », version 1, validée en jeu le 2026-10-21.
   FICHIER GÉNÉRÉ, ne pas modifier : la source est docs/design/charte.json (+ outils/verre-composants.css),
   lancer python docs/design/outils/generer-charte.py. Thème actif : defaut. Voir docs/design/CHARTE.md. */

@import url('https://fonts.googleapis.com/css2?family=Roboto+Condensed:wght@400;700&family=Noto+Sans+Mono:wght@400&display=swap');

:root {
  /* Une unité de la charte : echelle × pixelsParUnite. Changer --v-echelle agrandit ou réduit tout, comme en jeu. */
  --v-echelle: 0.8;
  --v-u: calc(var(--v-echelle) * 1.5px);
  /* L'espace des sites : ce qui sépare les choses, et leur intérieur */
  --v-u-entre: calc(var(--v-u) * 1.6);
  --v-u-dedans: calc(var(--v-u) * 1.3);
  --v-interligne: 1.45;

  /* Thème « defaut », avec les couleurs des sites (web.aere) */
  --v-voile: #3C5A67;
  --v-voile-calque: rgba(60, 90, 103, 0.74);
  --v-fond-noir: transparent;
  --v-verre: rgba(255, 255, 255, 0.09);
  --v-verre-lisere: rgba(255, 255, 255, 0.17);
  --v-verre-choisi: rgba(255, 255, 255, 0.2);
  --v-verre-sur-jeu: rgba(18, 20, 26, 0.66);
  --v-case: rgba(255, 255, 255, 0.1);
  --v-separateur: rgba(255, 255, 255, 0.12);
  --v-secondaire: rgba(255, 255, 255, 0.15);
  --v-modale: rgba(255, 255, 255, 0.11);
  --v-puits: rgba(0, 0, 0, 0.26);

  /* Texte */
  --v-texte-fort: #F4F2EE;
  --v-texte: rgba(244, 242, 238, 0.94);
  --v-texte-attenue: rgba(244, 242, 238, 0.84);
  --v-texte-faible: rgba(244, 242, 238, 0.76);
  --v-texte-sur-clair: #121316;

  /* Tons : seulement quand la couleur a un sens */
  --v-succes: #8FD694;
  --v-alerte: #FFB3B4;
  --v-info: #A6D0FF;
  --v-important: #F5C46B;

  /* Boutons */
  --v-bouton-principal-fond: #F4F2EE;
  --v-bouton-principal-texte: #121316;
  --v-bouton-secondaire-fond: rgba(255, 255, 255, 0.15);
  --v-bouton-secondaire-texte: #F4F2EE;
  --v-bouton-danger-fond: #F2777A;
  --v-bouton-danger-texte: #121316;
  --v-bouton-danger-discret-fond: rgba(242, 119, 122, 0.16);
  --v-bouton-danger-discret-texte: #FFB3B4;
  --v-bouton-danger-discret-lisere: rgba(242, 119, 122, 0.5);
  --v-bouton-discret-texte: rgba(244, 242, 238, 0.94);

  /* Polices : trois styles */
  --v-police-appui: 'Roboto Condensed', 'Arial Narrow', sans-serif;
  --v-poids-appui: 700;
  --v-police-texte: 'Roboto Condensed', 'Arial Narrow', sans-serif;
  --v-poids-texte: 400;
  --v-police-etiquette: 'Noto Sans Mono', ui-monospace, monospace;
  --v-poids-etiquette: 400;

  /* Tailles du texte (à 100 %, réduites par l'échelle) */
  --v-t-chiffre: calc(72 * var(--v-u));
  --v-t-minuteur: calc(28 * var(--v-u));
  --v-t-titre: calc(16 * var(--v-u));
  --v-t-onglet: calc(14 * var(--v-u));
  --v-t-bouton: calc(14 * var(--v-u));
  --v-t-nom: calc(15 * var(--v-u));
  --v-t-montant: calc(16 * var(--v-u));
  --v-t-texte: calc(13 * var(--v-u));
  --v-t-petit: calc(12 * var(--v-u));
  --v-t-etiquette: calc(11 * var(--v-u));

  /* Mesures */
  --v-marge: calc(64 * var(--v-u-entre));
  --v-ecart: calc(16 * var(--v-u-entre));
  --v-rayon-carte: calc(18 * var(--v-u));
  --v-rayon-case: calc(14 * var(--v-u));
  --v-rayon-onglets: calc(18 * var(--v-u));
  --v-hauteur-entete: calc(36 * var(--v-u));
  --v-hauteur-bouton: calc(38 * var(--v-u));
  --v-hauteur-petit-bouton: calc(30 * var(--v-u));
  --v-hauteur-puce: calc(24 * var(--v-u));
  --v-hauteur-puce-menu: calc(30 * var(--v-u));
  --v-hauteur-segments: calc(32 * var(--v-u));
  --v-hauteur-petits-segments: calc(26 * var(--v-u));
  --v-hauteur-champ: calc(34 * var(--v-u));
  --v-hauteur-pas: calc(30 * var(--v-u));
  --v-interrupteur-largeur: calc(40 * var(--v-u));
  --v-interrupteur-hauteur: calc(22 * var(--v-u));
  --v-hauteur-ligne: calc(52 * var(--v-u));
  --v-rayon-ligne: calc(12 * var(--v-u));
  --v-rayon-champ: calc(12 * var(--v-u));
  --v-taille-case: calc(76 * var(--v-u));
  --v-taille-case-sac: calc(58 * var(--v-u));
  --v-avatar: calc(34 * var(--v-u));
  --v-logo-entete: calc(26 * var(--v-u));
  --v-logo-puce: calc(18 * var(--v-u));
  --v-logo-notification: calc(40 * var(--v-u));
  --v-lisere: calc(1 * var(--v-u));

  /* Notifications et annonces */
  --v-notif-largeur: calc(322 * var(--v-u));
  --v-notif-rayon: calc(16 * var(--v-u));
  --v-hauteur-evenement: calc(36 * var(--v-u));

  /* Logos des plugins : la couleur de chaque tuile */
  --v-logo-orluadmin: #E5484D;
  --v-logo-orlubank: #3E7BFA;
  --v-logo-orluvending: #E93D82;
  --v-logo-orlutrade: #12A594;
  --v-logo-orlufarm: #46A758;
  --v-logo-orlurecycleur: #F76B15;
  --v-logo-orluraffinerie: #8E4EC6;
  --v-logo-orluquarry: #A07553;
  --v-logo-orluelec: #E5A000;
  --v-logo-orlucodex: #5B5BD6;
  --v-logo-orlumap: #0090FF;
  --v-logo-orluwhitelist: #64748B;
  --v-logo-orluvip: #C99100;
  --v-logo-orluhud: #475569;
  --v-logo-orluradial: #0EA5E9;
  --v-logo-orluedit: #7C3AED;
  --v-logo-orlubuilding: #B45309;
  --v-logo-orlucooking: #EA580C;
  --v-logo-orlucookevent: #65A30D;
  --v-logo-orluaffiches: #DB2777;
  --v-logo-orlulogs: #334155;
  --v-logo-orluradio: #0891B2;
  --v-logo-orlusite: #2563EB;
  --v-logo-orlustats: #16A34A;
  --v-logo-orluchat: #6E7FF3;
  --v-logo-orlufurnace: #B3361F;
  --v-logo-orluvie: #C8505A;
  --v-logo-extrafishing: #2A7F9E;
  --v-logo-orlucore: #4B5563;

  /* La marque : la chope */
  --v-marque-contour: #191413;
  --v-marque-creme: #FCF3F1;
  --v-marque-biere-bas: #F96603;
  --v-marque-biere-milieu: #FAA902;
  --v-marque-biere-haut: #FAC207;
  --v-marque-fond-plein: #12141A;

  /* Web */
  --v-flou: 24px;
  --v-fondu: 140ms;
  --v-largeur-max: 2200px;
  --v-goutiere-telephone: 16px;
  --v-fond-image: url('fistgames-fond.jpg');
  color-scheme: dark;
}

/* Sur téléphone, moins d'espace : la largeur manque */
@media (max-width: 720px) {
  :root {
    --v-u-entre: calc(var(--v-u) * 1.25);
    --v-u-dedans: calc(var(--v-u) * 1.1);
  }
}

/* Un thème forcé sur une page : <html data-theme="nuit-violette">. */
:root[data-theme="defaut"] {
  --v-voile: #090A0C;
  --v-voile-calque: rgba(9, 10, 12, 0.62);
  --v-fond-noir: transparent;
  --v-verre: rgba(255, 255, 255, 0.07);
  --v-verre-lisere: rgba(255, 255, 255, 0.12);
  --v-verre-choisi: rgba(255, 255, 255, 0.16);
  --v-verre-sur-jeu: rgba(18, 20, 26, 0.66);
  --v-case: rgba(255, 255, 255, 0.08);
  --v-separateur: rgba(255, 255, 255, 0.07);
  --v-secondaire: rgba(255, 255, 255, 0.12);
  --v-modale: rgba(255, 255, 255, 0.09);
  --v-puits: rgba(0, 0, 0, 0.4);
}

:root[data-theme="nuit-violette"] {
  --v-voile: #0E0918;
  --v-voile-calque: rgba(14, 9, 24, 0.66);
  --v-fond-noir: transparent;
  --v-verre: rgba(196, 170, 255, 0.08);
  --v-verre-lisere: rgba(196, 170, 255, 0.16);
  --v-verre-choisi: rgba(196, 170, 255, 0.2);
  --v-verre-sur-jeu: rgba(22, 14, 34, 0.7);
  --v-case: rgba(196, 170, 255, 0.09);
  --v-separateur: rgba(196, 170, 255, 0.08);
  --v-secondaire: rgba(196, 170, 255, 0.14);
  --v-modale: rgba(196, 170, 255, 0.09);
  --v-puits: rgba(0, 0, 0, 0.4);
}

/* ==== Les composants communs de la charte verre (version web) ====
   Collés tels quels sous les variables par generer-charte.py. Ici, AUCUNE valeur de la charte : seulement des
   var(--v-…) et des mesures en unités (calc(n * var(--v-u))). Le générateur refuse toute couleur écrite à la main.
   Dans les @media, le générateur remplace le mot TELEPHONE (précédé d'une arobase) par « web.telephone » de charte.json. */

/* ---- La page : le jeu flouté, le voile, le fond noir (CHARTE.md § 2, règle 1) ---- */
.v-page {
  margin: 0;
  min-height: 100vh;
  min-height: 100dvh;
  background: var(--v-voile);
  color: var(--v-texte);
  font: var(--v-poids-texte) var(--v-t-texte)/var(--v-interligne) var(--v-police-texte);
  -webkit-font-smoothing: antialiased;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}
.v-page::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  background:
    linear-gradient(var(--v-fond-noir), var(--v-fond-noir)),
    linear-gradient(var(--v-voile-calque), var(--v-voile-calque)),
    var(--v-fond-image) center / cover no-repeat,
    var(--v-voile);
}
.v-page *, .v-page *::before, .v-page *::after { box-sizing: border-box; }
.v-page :focus-visible { outline: calc(2 * var(--v-u)) solid var(--v-texte-fort); outline-offset: calc(2 * var(--v-u)); }
.v-page ::selection { background: var(--v-verre-choisi); color: var(--v-texte-fort); }

/* ---- Texte : trois styles, des rôles ---- */
.v-chiffre { margin: 0; font: var(--v-poids-appui) var(--v-t-chiffre)/1 var(--v-police-appui); color: var(--v-texte-fort); font-variant-numeric: tabular-nums; }
.v-minuteur { font: var(--v-poids-appui) var(--v-t-minuteur)/1 var(--v-police-appui); color: var(--v-texte-fort); font-variant-numeric: tabular-nums; }
.v-titre { margin: 0; font: var(--v-poids-appui) var(--v-t-titre)/1.2 var(--v-police-appui); color: var(--v-texte-fort); text-wrap: balance; }
.v-nom { font: var(--v-poids-appui) var(--v-t-nom)/1.25 var(--v-police-appui); color: var(--v-texte-fort); }
.v-montant { font: var(--v-poids-appui) var(--v-t-montant)/1.2 var(--v-police-appui); color: var(--v-texte-fort); font-variant-numeric: tabular-nums; }
.v-texte { font: var(--v-poids-texte) var(--v-t-texte)/var(--v-interligne) var(--v-police-texte); color: var(--v-texte); }
.v-petit { font: var(--v-poids-texte) var(--v-t-petit)/var(--v-interligne) var(--v-police-texte); color: var(--v-texte-attenue); }
.v-etiquette {
  margin: 0;
  font: var(--v-poids-etiquette) var(--v-t-etiquette)/1.3 var(--v-police-etiquette);
  text-transform: uppercase;
  color: var(--v-texte-faible);
}
.v-fort { color: var(--v-texte-fort); }
.v-attenue { color: var(--v-texte-attenue); }
.v-faible { color: var(--v-texte-faible); }
.v-ton-succes { color: var(--v-succes); }
.v-ton-alerte { color: var(--v-alerte); }
.v-ton-info { color: var(--v-info); }
.v-ton-important { color: var(--v-important); }

/* ---- Cartes de verre : une carte = un groupe d'informations ---- */
.v-carte {
  background: var(--v-verre);
  border: var(--v-lisere) solid var(--v-verre-lisere);
  border-radius: var(--v-rayon-carte);
  padding: var(--v-ecart);
  min-width: 0;
}
.v-carte--choisie { background: var(--v-verre-choisi); }
.v-carte--puits { background: var(--v-puits); border-color: transparent; }
.v-carte--modale { background: var(--v-modale); -webkit-backdrop-filter: blur(var(--v-flou)); backdrop-filter: blur(var(--v-flou)); }
.v-carte--sur-jeu { background: var(--v-verre-sur-jeu); }
.v-carte--cliquable { display: block; color: inherit; text-decoration: none; cursor: pointer; transition: background var(--v-fondu); }
.v-carte--cliquable:hover { background: var(--v-verre-choisi); }

/* ---- Boutons : des pastilles. Principal crème, secondaire en verre, discret en texte seul ;
   deux rouges : danger-discret OUVRE la confirmation, danger CONFIRME ---- */
.v-bouton {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: calc(8 * var(--v-u-entre));
  height: var(--v-hauteur-bouton);
  padding: 0 calc(18 * var(--v-u-dedans));
  border: 0;
  border-radius: 999px;
  background: var(--v-bouton-secondaire-fond);
  color: var(--v-bouton-secondaire-texte);
  font: var(--v-poids-appui) var(--v-t-bouton)/1 var(--v-police-appui);
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  transition: background var(--v-fondu), color var(--v-fondu), opacity var(--v-fondu);
}
.v-bouton:hover { background: var(--v-verre-choisi); }
.v-bouton--principal { background: var(--v-bouton-principal-fond); color: var(--v-bouton-principal-texte); }
.v-bouton--principal:hover { background: color-mix(in srgb, var(--v-bouton-principal-fond) 86%, var(--v-voile)); }
.v-bouton--discret { background: transparent; color: var(--v-bouton-discret-texte); }
.v-bouton--discret:hover { background: var(--v-case); color: var(--v-texte-fort); }
.v-bouton--danger { background: var(--v-bouton-danger-fond); color: var(--v-bouton-danger-texte); }
.v-bouton--danger:hover { background: color-mix(in srgb, var(--v-bouton-danger-fond) 86%, var(--v-voile)); }
.v-bouton--danger-discret {
  background: var(--v-bouton-danger-discret-fond);
  color: var(--v-bouton-danger-discret-texte);
  box-shadow: inset 0 0 0 var(--v-lisere) var(--v-bouton-danger-discret-lisere);
}
.v-bouton--danger-discret:hover { background: color-mix(in srgb, var(--v-bouton-danger-discret-fond) 60%, var(--v-bouton-danger-discret-lisere)); }
.v-bouton--petit { height: var(--v-hauteur-petit-bouton); padding: 0 calc(14 * var(--v-u-dedans)); font-size: var(--v-t-texte); }
.v-bouton--rond { width: var(--v-hauteur-bouton); padding: 0; }
.v-bouton--petit.v-bouton--rond { width: var(--v-hauteur-petit-bouton); }
.v-bouton:disabled, .v-bouton[aria-disabled="true"] { opacity: .4; cursor: not-allowed; }

/* ---- Onglets : les pages dans une pastille de verre, la page choisie dans du verre plus clair ---- */
.v-onglets {
  display: inline-flex;
  align-items: center;
  gap: calc(2 * var(--v-u-entre));
  max-width: 100%;
  padding: calc(3 * var(--v-u-dedans));
  background: var(--v-verre);
  border: var(--v-lisere) solid var(--v-verre-lisere);
  border-radius: var(--v-rayon-onglets);
  overflow-x: auto;
  scrollbar-width: none;
}
.v-onglets::-webkit-scrollbar { display: none; }
.v-onglet {
  display: inline-flex;
  align-items: center;
  gap: calc(6 * var(--v-u-entre));
  flex: none;
  height: var(--v-hauteur-puce-menu);
  padding: 0 calc(14 * var(--v-u-dedans));
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: var(--v-texte-attenue);
  font: var(--v-poids-texte) var(--v-t-onglet)/1 var(--v-police-texte);
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  transition: background var(--v-fondu), color var(--v-fondu);
}
.v-onglet:hover { color: var(--v-texte-fort); }
.v-onglet[aria-current="page"], .v-onglet[aria-selected="true"] {
  background: var(--v-verre-choisi);
  color: var(--v-texte-fort);
  font-family: var(--v-police-appui);
  font-weight: var(--v-poids-appui);
}
/* Le compteur rouge d'une page qui attend */
.v-compteur {
  display: inline-grid;
  place-items: center;
  min-width: calc(18 * var(--v-u));
  height: calc(18 * var(--v-u));
  padding: 0 calc(5 * var(--v-u-dedans));
  border-radius: 999px;
  background: var(--v-alerte);
  color: var(--v-texte-sur-clair);
  font: var(--v-poids-appui) var(--v-t-etiquette)/1 var(--v-police-appui);
  font-variant-numeric: tabular-nums;
}

/* ---- Puces : neutres, crème quand elles sont cochées, ou d'un ton ---- */
.v-puce {
  --v-puce-ton: var(--v-texte);
  display: inline-flex;
  align-items: center;
  gap: calc(6 * var(--v-u-entre));
  height: var(--v-hauteur-puce);
  padding: 0 calc(10 * var(--v-u-dedans));
  border: 0;
  border-radius: 999px;
  background: var(--v-secondaire);
  color: var(--v-puce-ton);
  font: var(--v-poids-texte) var(--v-t-petit)/1 var(--v-police-texte);
  white-space: nowrap;
}
button.v-puce { cursor: pointer; transition: background var(--v-fondu); }
button.v-puce:hover { background: var(--v-verre-choisi); }
.v-puce--cochee, .v-puce[aria-pressed="true"] { background: var(--v-bouton-principal-fond); color: var(--v-bouton-principal-texte); }
/* Une puce d'un ton le garde, même cochée (« OK » vert, « Bug » rouge) */
.v-puce.v-puce--succes, .v-puce.v-puce--alerte, .v-puce.v-puce--info, .v-puce.v-puce--important { background: color-mix(in srgb, var(--v-puce-ton) 16%, transparent); color: var(--v-puce-ton); }
.v-puce--succes { --v-puce-ton: var(--v-succes); }
.v-puce--alerte { --v-puce-ton: var(--v-alerte); }
.v-puce--info { --v-puce-ton: var(--v-info); }
.v-puce--important { --v-puce-ton: var(--v-important); }
/* Une couleur de donnée (choisie par un joueur ou un admin) : un point de la couleur, un texte neutre */
.v-puce-couleur { display: inline-block; width: calc(10 * var(--v-u)); height: calc(10 * var(--v-u)); border-radius: 50%; background: var(--v-couleur-donnee); }

/* ---- Disque : la pastille d'un état ---- */
.v-disque { display: inline-block; flex: none; width: calc(8 * var(--v-u)); height: calc(8 * var(--v-u)); border-radius: 50%; background: currentColor; }

/* ---- Champ de saisie en creux ---- */
.v-champ {
  width: 100%;
  height: var(--v-hauteur-champ);
  padding: 0 calc(12 * var(--v-u-dedans));
  border: var(--v-lisere) solid transparent;
  border-radius: var(--v-rayon-champ);
  background: var(--v-puits);
  color: var(--v-texte-fort);
  font: var(--v-poids-texte) var(--v-t-texte)/var(--v-interligne) var(--v-police-texte);
  transition: border-color var(--v-fondu);
}
textarea.v-champ { height: auto; min-height: calc(3 * var(--v-hauteur-champ)); padding: calc(10 * var(--v-u-dedans)) calc(12 * var(--v-u-dedans)); resize: vertical; line-height: 1.45; }
.v-champ::placeholder { color: var(--v-texte-faible); }
.v-champ:focus { outline: none; border-color: var(--v-verre-lisere); }
.v-libelle { display: grid; gap: calc(6 * var(--v-u-entre)); }

/* ---- Interrupteur (vert allumé) ---- */
.v-interrupteur {
  position: relative;
  flex: none;
  width: var(--v-interrupteur-largeur);
  height: var(--v-interrupteur-hauteur);
  padding: 0;
  border: 0;
  border-radius: 999px;
  background: var(--v-secondaire);
  cursor: pointer;
  transition: background var(--v-fondu);
}
.v-interrupteur::before {
  content: "";
  position: absolute;
  top: calc(3 * var(--v-u));
  left: calc(3 * var(--v-u));
  width: calc(var(--v-interrupteur-hauteur) - 6 * var(--v-u));
  height: calc(var(--v-interrupteur-hauteur) - 6 * var(--v-u));
  border-radius: 50%;
  background: var(--v-texte-fort);
  transition: transform var(--v-fondu);
}
.v-interrupteur[aria-checked="true"] { background: var(--v-succes); }
.v-interrupteur[aria-checked="true"]::before { transform: translateX(calc(var(--v-interrupteur-largeur) - var(--v-interrupteur-hauteur))); }

/* ---- Choix segmenté : le segment actif en crème ---- */
.v-segments {
  --v-u-dedans: var(--v-u);
  display: inline-flex;
  gap: calc(2 * var(--v-u-entre));
  max-width: 100%;
  padding: calc(3 * var(--v-u-dedans));
  background: var(--v-verre);
  border: var(--v-lisere) solid var(--v-verre-lisere);
  border-radius: 999px;
  overflow-x: auto;
  scrollbar-width: none;
}
.v-segment {
  flex: none;
  height: calc(var(--v-hauteur-segments) - 6 * var(--v-u));
  padding: 0 calc(12 * var(--v-u-dedans));
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: var(--v-texte-attenue);
  font: var(--v-poids-texte) var(--v-t-texte)/1 var(--v-police-texte);
  cursor: pointer;
  transition: background var(--v-fondu), color var(--v-fondu);
}
.v-segment:hover { color: var(--v-texte-fort); }
.v-segment[aria-pressed="true"] { background: var(--v-bouton-principal-fond); color: var(--v-bouton-principal-texte); font-weight: var(--v-poids-appui); }
.v-segments--petits .v-segment { height: calc(var(--v-hauteur-petits-segments) - 6 * var(--v-u)); font-size: var(--v-t-petit); }

/* ---- Listes : des lignes de 52, séparées par un filet ; avatar, nom et date, montant à droite ---- */
.v-liste { display: flex; flex-direction: column; margin: 0; padding: 0; list-style: none; }
.v-ligne {
  display: flex;
  align-items: center;
  gap: calc(12 * var(--v-u-entre));
  min-height: var(--v-hauteur-ligne);
  padding: calc(8 * var(--v-u-dedans)) calc(10 * var(--v-u-dedans));
  border-radius: var(--v-rayon-ligne);
  color: inherit;
  text-decoration: none;
}
.v-ligne + .v-ligne, .v-liste > li + li > .v-ligne { box-shadow: inset 0 var(--v-lisere) 0 var(--v-separateur); }
a.v-ligne, button.v-ligne { width: 100%; border: 0; background: transparent; font: inherit; text-align: left; cursor: pointer; transition: background var(--v-fondu); }
a.v-ligne:hover, button.v-ligne:hover { background: var(--v-case); }
.v-ligne__corps { flex: 1; min-width: 0; display: grid; gap: calc(2 * var(--v-u-entre)); }
.v-ligne__corps > * { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.v-ligne__droite { margin-left: auto; flex: none; text-align: right; }

/* ---- Avatar rond (initiales ou icône) ---- */
.v-avatar {
  display: inline-grid;
  place-items: center;
  flex: none;
  width: var(--v-avatar);
  height: var(--v-avatar);
  border-radius: 50%;
  overflow: hidden;
  background: var(--v-secondaire);
  color: var(--v-texte-fort);
  font: var(--v-poids-appui) var(--v-t-petit)/1 var(--v-police-appui);
}
.v-avatar img { width: 100%; height: 100%; object-fit: cover; }

/* ---- Logo d'un plugin : sa tuile de couleur (l'image du jeu), ou une tuile neutre avec l'initiale ---- */
.v-logo {
  display: inline-grid;
  place-items: center;
  flex: none;
  width: var(--v-logo-entete);
  height: var(--v-logo-entete);
  border-radius: 23%;
  overflow: hidden;
  background: var(--v-secondaire);
  color: var(--v-texte-fort);
  font: var(--v-poids-appui) calc(var(--v-logo-entete) * .5)/1 var(--v-police-appui);
}
.v-logo img { width: 100%; height: 100%; display: block; }
.v-logo--puce { width: var(--v-logo-puce); height: var(--v-logo-puce); }
.v-logo--notification { width: var(--v-logo-notification); height: var(--v-logo-notification); }

/* ---- La chope : telle quelle, sans tuile ni cadre ---- */
.v-marque { display: block; flex: none; width: var(--v-logo-entete); height: var(--v-logo-entete); }

/* ---- Icônes d'interface : au trait de 2, bouts ronds, teintées par le texte ---- */
.v-icone { flex: none; width: 1.25em; height: 1.25em; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

/* ---- Progression : une barre arrondie, ou un anneau (piste à 12 %, arc crème, bouts ronds) ---- */
.v-barre { height: calc(6 * var(--v-u)); border-radius: 999px; background: var(--v-secondaire); overflow: hidden; }
.v-barre > span { display: block; height: 100%; width: var(--v-part, 0%); border-radius: inherit; background: var(--v-texte-fort); }
.v-anneau { display: block; flex: none; }
.v-anneau__piste { fill: none; stroke: var(--v-secondaire); }
.v-anneau__arc { fill: none; stroke: var(--v-texte-fort); stroke-linecap: round; }

/* ---- Notification (sur le jeu) : le logo de qui parle, son nom et l'heure, un titre, une phrase ;
   le ton en petite pastille sur le coin du logo, rien pour une simple info ---- */
.v-notif {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: calc(4 * var(--v-u-entre)) calc(12 * var(--v-u-entre));
  width: min(var(--v-notif-largeur), 100%);
  padding: calc(12 * var(--v-u-dedans));
  border: var(--v-lisere) solid var(--v-verre-lisere);
  border-radius: var(--v-notif-rayon);
  background: var(--v-verre-sur-jeu);
  -webkit-backdrop-filter: blur(var(--v-flou));
  backdrop-filter: blur(var(--v-flou));
}
.v-notif__logo { position: relative; grid-row: span 3; align-self: start; }
.v-notif__ton { position: absolute; right: calc(-4 * var(--v-u)); bottom: calc(-4 * var(--v-u)); width: calc(16 * var(--v-u)); height: calc(16 * var(--v-u)); border-radius: 50%; box-shadow: 0 0 0 calc(2 * var(--v-u)) var(--v-voile); }
.v-notif__ton--succes { background: var(--v-succes); }
.v-notif__ton--alerte { background: var(--v-alerte); }
.v-notif__ton--important { background: var(--v-important); }

/* ---- Confirmation : la scène assombrie, une carte modale, « Annuler » et le bouton rouge plein ---- */
.v-voile-modal {
  position: fixed;
  inset: 0;
  z-index: 50;
  display: grid;
  place-items: center;
  padding: var(--v-goutiere-telephone);
  background: var(--v-voile-calque);
}
.v-voile-modal > .v-carte { width: min(calc(420 * var(--v-u)), 100%); display: grid; gap: var(--v-ecart); }

@media (max-width: 720px) {
  .v-onglets, .v-segments { border-radius: 999px; }
}

@media (prefers-reduced-motion: reduce) {
  .v-page *, .v-page *::before { transition: none !important; }
}