/**
 * PlayAwale — Page « Jouer en solo »
 * -----------------------------------------------------------------------------
 * Mise en page autour du plateau : choix du niveau, tableaux de score,
 * commandes de partie et écran de fin.
 *
 * Le plateau lui-même n'est pas concerné : sa géométrie vit dans
 * components/board.css, son aspect dans themes/board/<thème>.css.
 *
 * @package   PlayAwale
 * @version   2.0
 * @author    Nicolas Lion — Développeur web — https://nlion.fr
 * @copyright 2026 Nicolas Lion
 */

/* =============================================================================
   MISE EN PAGE
   ============================================================================= */

.solo-page {
  /* Les mesures des panneaux et de la barre d’outils ne sont plus ici : elles
     appartiennent à components/game-panel.css et components/game-tools.css,
     qui les déclarent sur « game-page ». La page porte les deux classes.

     Ne restent ici que la mise en page propre au solo, et les réserves du
     plateau — qui, elles, se calculent À PARTIR de ces mesures.  */
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-lg);
}




/* =============================================================================
   AIRE DE JEU
   ============================================================================= */

.game {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-md);
  width: 100%;
}


/* =============================================================================
   LA BULLE DU DIDACTICIEL
   -----------------------------------------------------------------------------
   Le Semeur Novice parle pendant la partie : un conseil avant que le joueur ne
   choisisse, un bilan après qu'il a joué. Sa bulle sort de son portrait, en
   haut à gauche de l'écran.

   ELLE NE DOIT JAMAIS RECOUVRIR LE SCORE
   Le score de l'ordinateur est posé en bas à droite du portrait, et déborde
   même un peu vers la droite : c'est exactement là que passait la bulle
   lorsqu'elle était centrée sur le portrait. Elle est donc remontée vers la
   tête du personnage, et décalée au-delà de ce débordement — deux mesures
   plutôt qu'une, pour qu'un texte long ne vienne pas non plus mordre sur les
   chiffres.

   ELLE NE DOIT JAMAIS GÊNER LE PLATEAU
   Le plateau est centré ; la bulle vit dans la colonne de gauche, dont la
   largeur est bornée pour qu'elle ne l'atteigne jamais. Sur un écran étroit,
   où cette colonne n'existe plus, elle passe SOUS le portrait et s'étale sur la
   largeur disponible — au-dessus du plateau, qui commence plus bas.

   Elle n'intercepte pas le clic : on doit pouvoir jouer sans avoir à la
   chasser.
   ============================================================================= */

.coach-bubble {
  position: absolute;

  /* À droite du portrait, dont la mesure gouverne tout le panneau, et haut
     placée : la pointe vise alors la tête du personnage, et la bulle laisse
     libre le bas du portrait, où s'inscrit le score.

     Le décalage horizontal vaut 1,2 fois le portrait : le score déborde de
     0,45 em pour une taille de 0,4 fois le portrait, soit un peu moins de
     0,2 fois sa largeur. La bulle passe donc au-delà, quelle que soit la
     taille de l'écran. */
  /* Un cran plus bas que la tête : la pointe vise le haut du portrait sans
     partir de son sommet, et la bulle respire mieux sous le bord de l'écran. */
  top: 12%;
  left: calc(var(--ai-panel-size) * 1.2 + 10px);

  /* Assez large pour deux lignes de texte, assez étroite pour ne pas
     approcher le plateau. */
  width: max-content;
  max-width: min(38vw, 320px);

  font-size: clamp(0.72rem, 1.45vw, 0.85rem);
  line-height: 1.45;

  /* La page centre son contenu ; une phrase de deux lignes se lit mieux
     alignée à gauche. */
  text-align: left;

  /* Le joueur clique sur le plateau, pas sur la bulle. */
  pointer-events: none;
}

/* La pointe est ancrée à gauche : l'agrandissement d'apparition part donc de
   ce côté, et la bulle semble sortir de la bouche du personnage. */
.coach-bubble {
  --speech-origin: left center;
}

/* Pointe proportionnelle au texte.

   Le composant la donne en pixels fixes — 14 sur 24 —, ce qui convient tant
   que la bulle garde la même taille. Le texte du didacticiel ayant été réduit,
   la pointe, elle, ne l'avait pas suivi : elle paraissait épaisse et courte,
   posée sur une bulle devenue plus fine.

   En em, elle garde exactement la proportion qu'elle avait : 0,95 em de long
   pour 1,63 em de haut, les mesures relevées avant la réduction. */
.coach-bubble.speech--left::before {
  margin-top: -0.815em;
  border-width: 0.815em 0.95em 0.815em 0;
}

.coach-bubble.speech--left::after {
  margin-top: -0.68em;
  border-width: 0.68em 0.815em 0.68em 0;
  left: -0.75em;
}

/* Le nombre cité — graines, numéro de trou — est ce que l'œil doit accrocher. */
.coach-bubble b {
  font-family: var(--font-display);
  font-weight: 400;
  color: var(--color-brand-dark);
}


/* -----------------------------------------------------------------------------
   Écran étroit : la bulle passe sous le portrait.
   -------------------------------------------------------------------------- */
@media (max-width: 46rem) {

  .coach-bubble {
    top: calc(var(--ai-panel-size) + 12px);
    left: 0;

    /* Toute la largeur disponible, moins les marges du panneau. */
    width: calc(100vw - 40px);
    max-width: none;
  }

  /* La pointe repasse en haut, vers le portrait qui est maintenant au-dessus.
     Le composant ne propose pas cette direction : elle ne sert qu'ici. */
  .coach-bubble.speech--left::before {
    top: -14px;
    left: calc(var(--ai-panel-size) / 2 - 12px);
    margin: 0;
    border-width: 0 12px 14px 12px;
    border-color: transparent transparent var(--color-brand-dark) transparent;
  }

  .coach-bubble.speech--left::after {
    top: -11px;
    left: calc(var(--ai-panel-size) / 2 - 10px);
    margin: 0;
    border-width: 0 10px 12px 10px;
    border-color: transparent transparent var(--color-surface) transparent;
  }

  .coach-bubble {
    --speech-origin: top left;
  }
}


/* -----------------------------------------------------------------------------
   Téléphone couché : la bulle passe en bandeau au-dessus du plateau.
   -----------------------------------------------------------------------------
   Posée à droite du portrait, elle avancerait de 320 px vers le centre — droit
   sur le plateau. Le seul espace libre d'un écran couché est la bande du haut,
   entre le portrait et le bord droit : c'est là qu'elle va, et le plateau lui
   réserve la hauteur qu'il faut.

   ELLE N'A PLUS DE POINTE
   Une pointe n'a de sens que si elle vise quelqu'un. Sur un grand écran, la
   bulle est posée juste à droite du portrait et sa pointe désigne la tête du
   personnage ; en écran étroit, elle passe sous lui et le vise par le dessus.
   Couchée, elle traverse tout le haut de l'écran : plus aucun alignement n'est
   possible avec la bouche du personnage, et une pointe qui ne désigne que du
   vide se remarque plus qu'elle n'explique.

   La boîte reste donc franche, pareille de ses quatre côtés — comme son bord
   droit l'a toujours été.
   -------------------------------------------------------------------------- */
@media (orientation: landscape) and (max-height: 34rem) {

  .coach-bubble {
    position: fixed;

    /* En bandeau au-dessus du plateau, du portrait de l'adversaire au bord
       droit : le seul espace libre d'un écran couché. */
    top: 8px;
    bottom: auto;
    left: var(--panel-reach);
    right: 12px;

    width: auto;
    max-width: none;

    --speech-origin: top center;
  }

  .coach-bubble.speech--left::before,
  .coach-bubble.speech--left::after {
    display: none;
  }
}


/* -----------------------------------------------------------------------------
   Le bouton d'activation
   -----------------------------------------------------------------------------
   Éteint, il s'estompe sans disparaître : le joueur doit pouvoir le retrouver.
   -------------------------------------------------------------------------- */

#btnTutorial[aria-pressed='false'] {
  opacity: 0.45;
}

#btnTutorial[aria-pressed='true'] {
  /* Allumé, l'ampoule prend la couleur des graines. */
  color: #b8860b;
}

/* =============================================================================
   ÉCRAN DE FIN DE PARTIE
   Bâti sur le composant fenêtre modale ; seul le score, propre à cet écran,
   est décrit ici. Un seul écran sert aux trois issues — victoire, défaite et
   égalité. La version 1 affichait l'écran de victoire sur une partie nulle.
   ============================================================================= */

/* Score final, plus grand que tout le reste du panneau : c'est l'information
   que le joueur cherche en premier. */
.game-over__score {
  font-family: var(--font-display);
  font-size: clamp(2rem, 8vw, 3rem);
  line-height: 1;
  color: var(--color-text);

  /* Chiffres de largeur fixe : les deux scores restent alignés. */
  font-variant-numeric: tabular-nums;

  margin-bottom: var(--space-sm);
}


/* =============================================================================
   LA PLACE QUE LA BULLE DU DIDACTICIEL RÉCLAME EN PLUS
   -----------------------------------------------------------------------------
   Les réserves communes — un panneau de chaque côté, ou l'un au-dessus et
   l'autre au-dessous — vivent avec les panneaux, dans
   components/game-panel.css : la partie à deux les emploie telles quelles.

   Celle-ci n'appartient qu'au solo, parce que la bulle du didacticiel
   n'appartient qu'à lui. En écran couché elle passe en bandeau au-dessus du
   plateau, et il faut lui laisser de quoi tenir trois lignes — 84 px avec ses
   marges.

   POURQUOI LE DOUBLE
   Le plateau est centré verticalement : la réserve se partage à parts égales
   au-dessus et au-dessous de lui. En réserver 84 n'en dégagerait que 42
   au-dessus, et la bulle mordrait sur le plateau dès que la fenêtre serait
   basse sans être étroite.
   ============================================================================= */

@media (orientation: landscape) {

  .solo-page .board-container {
    --board-reserve-y: 168px;
  }
}


/* =============================================================================
   L'ESPACE DU JOUEUR, PENDANT UNE PARTIE
   -----------------------------------------------------------------------------
   Il accompagne le choix du niveau, et se retire dès que la partie commence :
   le coin haut de l'écran appartient alors au jeu — portrait de l'adversaire,
   bulle du didacticiel —, et la place du plateau est calculée sans lui. Sa
   réserve retombe à zéro avec lui, pour que la page ne descende pas.

   solo.js n'a rien à en savoir : le choix du niveau est caché pendant la partie,
   et c'est cela que la règle regarde.
   ============================================================================= */

body:has(#levelPicker[hidden]) > .player-space {
  display: none;
}

body:has(#levelPicker[hidden]) {
  --player-space-reserve: 0px;
}


/* =============================================================================
   LE PODIUM DES PAYS
   -----------------------------------------------------------------------------
   En haut de l'écran du choix du niveau : les quatre premiers pays sur leurs
   marches, et deux boutons dessous — le classement complet, et les parties à
   revoir.

   LE PODIUM ENTIER OUVRE LE CLASSEMENT
   Il était lui-même le bouton. Un lien ne se loge pas dans un bouton : le podium
   est redevenu une liste, et c'est le bouton « Voir le classement » qui étend sa
   surface de clic sur tout le bloc, par un pseudo-élément calé sur
   « .solo-showcase ». Le lien des parties passe au-dessus.

   POSÉ SUR LE DÉCOR, SANS CARTE
   Le podium est un objet sur la table, comme le plateau de l'accueil : des
   marches en relief, une ombre au sol qui les assoit, des drapeaux qui s'y
   tiennent. Une carte autour en faisait un encart de plus ; sans elle, il
   appartient à l'écran.

   LES DRAPEAUX SONT RONDS
   Comme les portraits des adversaires : un rond se pose sur une marche, un
   rectangle y ferait une affiche. La collection circle-flags est dessinée pour
   cela. Un liseré crème les détache du décor.

   L'ORDRE DU PODIUM EST CELUI DE LA FEUILLE, PAS DE LA PAGE
   La page écrit les places dans l'ordre — 1, 2, 3, 4 —, qui est celui qu'on
   entend ; « order » les dispose en podium, le premier au milieu, le quatrième
   au bout, sur la marche la plus basse.

   L'AMBRE NE DÉSIGNE QUE LE PREMIER
   Sa marche seule porte la couleur de ce qu'on regarde d'abord, et une couronne
   au-dessus de son drapeau ; les autres gardent le sable.
   ============================================================================= */

/* Le podium et ses deux boutons, dans un même bloc : c'est lui que recouvre la
   surface de clic du bouton du classement — d'où « position: relative ». */
.solo-showcase {
  position: relative;

  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-xs);

  margin: 0 auto var(--space-lg);
  padding: var(--space-2xs) var(--space-md) var(--space-xs);

  color: var(--color-text);
}

.country-podium {
  display: flex;
  justify-content: center;
}

.country-podium__steps {
  position: relative;

  /* Une vraie liste ordonnée : ni puces, ni marges du navigateur. */
  margin: 0;
  list-style: none;

  display: flex;
  align-items: flex-end;
  gap: 6px;

  padding: 0 var(--space-xs);
}

/* L'ombre au sol : une ellipse floue sous les marches, celle qui assoit le
   plateau de l'accueil. Dessinée sous elles plutôt qu'en filtre, elle ne se
   recalcule jamais. */
.country-podium__steps::after {
  content: '';
  position: absolute;
  left: 50%;
  bottom: -12px;
  z-index: -1;

  width: 112%;
  height: 24px;
  transform: translateX(-50%);

  background-image: radial-gradient(
    ellipse at center,
    rgba(60, 39, 35, 0.3) 0%,
    rgba(60, 39, 35, 0) 70%
  );
}

.country-podium__step {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;

  width: 5.6rem;
}

.country-podium__step--1 { order: 2; }
.country-podium__step--2 { order: 1; }
.country-podium__step--3 { order: 3; }
.country-podium__step--4 { order: 4; }

.country-podium__crown {
  width: 26px;
  height: 26px;
  margin-bottom: -4px;

  color: var(--color-brand-amber-deep);
  filter: drop-shadow(0 1px 1px rgba(60, 39, 35, 0.35));
}

.country-podium__flag {
  width: 40px;
  height: 40px;

  border-radius: var(--radius-full);
  box-shadow:
    0 0 0 3px var(--color-surface),
    0 4px 8px rgba(60, 39, 35, 0.35);

  transition: transform var(--duration-base) ease;
}

.country-podium__step--1 .country-podium__flag {
  width: 54px;
  height: 54px;
}

/* Au survol, les drapeaux se soulèvent : le podium dit qu'il s'ouvre. C'est le
   bouton du classement qui est survolé — sa surface couvre tout le bloc —, pas
   le lien des parties, qui ne soulève rien. */
.solo-showcase:has(.showcase-pill--stretch:hover) .country-podium__flag,
.solo-showcase:has(.showcase-pill--stretch:focus-visible) .country-podium__flag {
  transform: translateY(-3px);
}

/* Le nom, en une ligne : un nom long se coupe plutôt que de pousser les marches. */
.country-podium__name {
  max-width: 100%;
  overflow: hidden;

  font-family: var(--font-body);
  font-size: var(--font-size-sm);
  font-weight: 600;
  line-height: var(--line-height-tight);
  white-space: nowrap;
  text-overflow: ellipsis;
  color: var(--color-text);
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.6);
}

/* La marche : un bloc de sable en relief, le rang gravé sur sa face. */
.country-podium__block {
  display: grid;
  place-items: center;
  width: 100%;

  font-family: var(--font-display);
  font-size: 1.5rem;
  line-height: 1;
  color: var(--color-text);
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.55);

  background-color: var(--color-surface);
  background-image: var(--gradient-surface-raised);
  border-radius: var(--radius-sm) var(--radius-sm) 4px 4px;
  box-shadow: var(--shadow-raised);
}

.country-podium__step--1 .country-podium__block {
  height: 4.2rem;
  font-size: 1.9rem;

  background-color: var(--color-brand-amber);
  background-image: var(--gradient-amber-raised);
  box-shadow: var(--shadow-raised-amber);
}

.country-podium__step--2 .country-podium__block { height: 3.2rem; }
.country-podium__step--3 .country-podium__block { height: 2.5rem; }
.country-podium__step--4 .country-podium__block { height: 1.9rem; font-size: 1.2rem; }

/* « Voir le classement » et « Revoir des parties » : la pastille de la légende
   du plateau de l'accueil, deux fois, côte à côte — l'une sous l'autre si la
   largeur manque. */
.solo-showcase__actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-xs);

  margin-top: var(--space-xs);
}

.showcase-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.3em;

  padding: 0.3em 0.9em;

  font-family: var(--font-body);
  font-size: var(--font-size-sm);
  line-height: var(--line-height-base);
  color: var(--color-text);
  text-decoration: none;

  background-color: rgba(240, 225, 209, 0.6);
  border: none;
  border-radius: var(--radius-full);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.6);
  cursor: pointer;

  transition: background-color var(--duration-base) ease;
}

.showcase-pill:hover,
.showcase-pill:focus-visible {
  background-color: var(--color-brand-amber-light);
}

.showcase-pill:focus-visible {
  outline: 3px solid var(--color-focus-ring);
  outline-offset: 2px;
}

/* La surface de clic du bouton du classement : tout le bloc. Son contour de
   focus se dessine autour du podium entier, qui est ce qu'il ouvre. */
.showcase-pill--stretch::after {
  content: '';
  position: absolute;
  inset: 0;

  border-radius: var(--radius-md);
}

.showcase-pill--stretch:focus-visible {
  outline: none;
}

.showcase-pill--stretch:focus-visible::after {
  outline: 3px solid var(--color-focus-ring);
  outline-offset: 4px;
}

/* Le lien des parties passe au-dessus de cette surface : sans cela, un clic sur
   lui ouvrirait le classement. */
.showcase-pill:not(.showcase-pill--stretch) {
  position: relative;
  z-index: 1;
}

.showcase-pill__icon {
  flex: none;
  width: 1em;
  height: 1em;
}

.showcase-pill__chevron {
  width: 0.9em;
  height: 0.9em;

  transition: transform var(--duration-base) ease;
}

.showcase-pill:hover .showcase-pill__chevron,
.showcase-pill:focus-visible .showcase-pill__chevron {
  transform: translateX(3px);
}

/* -----------------------------------------------------------------------------
   La pastille du caractère des IA
   -----------------------------------------------------------------------------
   Entre la mascotte et la liste des niveaux, calée sur le bord droit de la
   liste.

   À CÔTÉ DU LION QUAND IL Y A LA PLACE
   Sur un grand écran, la mascotte et sa bulle tiennent dans 620 px au centre
   d'une liste qui en fait jusqu'à 1 120 : la pastille remonte à hauteur du bas
   du lion, dans la marge de droite. Elle ne prend alors aucune hauteur — son
   rang est haut de zéro — et sa largeur est bornée à cette marge : un nom long
   passe à la ligne plutôt que de passer sous le lion.

   EN DESSOUS SINON
   Plus étroit, la mascotte occupe déjà le bord droit : la pastille prend sa
   propre ligne, sous le lion, toujours à droite.
   -------------------------------------------------------------------------- */

.solo-intro__more {
  display: flex;
  justify-content: flex-end;

  /* La mascotte garde une marge sous elle : la pastille s'y loge en partie. */
  margin: calc(-1 * var(--space-sm)) 0 var(--space-md);
}

.solo-intro__more .showcase-pill {
  position: relative;
  z-index: 1;
}

@media (min-width: 75rem) {

  .solo-intro__more {
    /* Sans « flex-start », le rang haut de zéro écraserait la pastille à sa
       hauteur. */
    align-items: flex-start;
    height: 0;
    margin: 0;
  }

  .solo-intro__more .showcase-pill {
    /* La marge laissée à droite de la mascotte, moins un écart. */
    max-width: calc((100% - 620px) / 2 - var(--space-md));

    /* Remontée de sa hauteur et de la marge sous la mascotte : son bas se pose
       sur le bas du lion. */
    transform: translateY(calc(-100% - var(--space-lg)));
  }
}

/* Téléphone couché : la mascotte n'y garde qu'une petite marge. */
@media (orientation: landscape) and (max-height: 34rem) {

  .solo-intro__more {
    margin: calc(-1 * var(--space-2xs)) 0 var(--space-sm);
  }
}

/* Téléphone : des marches plus étroites et plus basses, pour que les quatre
   tiennent et que la liste des adversaires ne descende pas trop. */
@media (max-width: 34rem) {

  .solo-showcase {
    margin-bottom: var(--space-md);
  }

  .country-podium__step {
    width: 4.5rem;
  }

  .country-podium__flag {
    width: 34px;
    height: 34px;
  }

  .country-podium__step--1 .country-podium__flag {
    width: 46px;
    height: 46px;
  }

  .country-podium__step--1 .country-podium__block { height: 3.4rem; font-size: 1.6rem; }
  .country-podium__step--2 .country-podium__block { height: 2.6rem; }
  .country-podium__step--3 .country-podium__block { height: 2rem; }
  .country-podium__step--4 .country-podium__block { height: 1.5rem; }
}

@media (prefers-reduced-motion: reduce) {

  .country-podium__flag,
  .showcase-pill,
  .showcase-pill__chevron {
    transition: none;
  }

  .solo-showcase:has(.showcase-pill--stretch:hover) .country-podium__flag,
  .solo-showcase:has(.showcase-pill--stretch:focus-visible) .country-podium__flag,
  .showcase-pill:hover .showcase-pill__chevron,
  .showcase-pill:focus-visible .showcase-pill__chevron {
    transform: none;
  }
}


/* -----------------------------------------------------------------------------
   Le classement complet
   -----------------------------------------------------------------------------
   La fenêtre du site, élargie pour un tableau : le rang, le pays, et les deux
   taux de la v1 avec leur jauge, verte pour les victoires et rouge pour le
   risque, comme alors.

   LE TABLEAU DÉFILE DANS SA FENÊTRE
   En hauteur, sous un en-tête qui reste en place. Sur un téléphone, les noms et
   les intitulés passent à la ligne et les jauges se resserrent : les quatre
   colonnes tiennent sans défiler de côté.
   -------------------------------------------------------------------------- */

.country-ranking {
  width: min(96vw, 640px);
}

.country-ranking__scroll {
  max-height: min(58vh, 32rem);
  margin: 0 0 var(--space-md);
  overflow: auto;

  background-color: var(--color-sand-100);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-hollow);
}

.country-table {
  width: 100%;
  border-collapse: collapse;

  font-family: var(--font-body);
  font-size: var(--font-size-sm);
  text-align: left;
  color: var(--color-text);
}

.country-table th,
.country-table td {
  padding: var(--space-xs) var(--space-sm);
  white-space: nowrap;
  vertical-align: middle;
}

.country-table thead th {
  position: sticky;
  top: 0;
  z-index: 1;

  font-weight: 700;
  background-color: var(--color-sand-200);
}

.country-table tbody tr + tr {
  border-top: 1px solid rgba(184, 169, 149, 0.4);
}

.country-table__rank {
  width: 2.5rem;
  text-align: center;
  font-family: var(--font-display);
  font-variant-numeric: tabular-nums;
}

/* Les trois premiers : leur rang dans une pastille, l'ambre pour le premier. */
.country-table tr.is-medal .country-table__rank {
  font-size: var(--font-size-base);
}

.country-table__group--ranked tr:first-child .country-table__rank {
  color: var(--color-brand-dark);
}

.country-table__group--ranked tr:first-child {
  background-color: rgba(255, 201, 102, 0.28);
}

/* L'intertitre des pays pas encore classés : le titre de la fenêtre en plus
   petit, et sa condition en dessous. Il ouvre un second corps de tableau, que
   rien d'autre ne sépare du premier. */
.country-table__heading th {
  padding-top: var(--space-md);

  font-family: var(--font-display);
  font-size: var(--font-size-base);
  font-weight: 400;
  white-space: normal;

  border-top: 2px solid var(--color-sand-300);
}

.country-table__heading-note {
  display: block;

  font-family: var(--font-body);
  font-size: var(--font-size-sm);
  color: var(--color-text-muted);
}

.country-table tbody th {
  font-weight: 600;
}

/* En ligne, devant le nom : la remise à zéro du site pose les images en bloc,
   et le drapeau passait sinon au-dessus du nom. */
.country-table__flag {
  display: inline-block;
  width: 22px;
  height: 22px;
  margin-right: 0.5em;

  vertical-align: middle;
  border-radius: var(--radius-full);
}

.country-table__gauge-col {
  min-width: 7.5rem;
}

.country-table__value {
  display: block;
  font-variant-numeric: tabular-nums;
}

.country-table__gauge {
  display: block;
  height: 5px;
  margin-top: 3px;
  overflow: hidden;

  background-color: var(--color-sand-300);
  border-radius: var(--radius-full);
}

.country-table__fill {
  display: block;
  width: 0;
  height: 100%;

  border-radius: var(--radius-full);
}

.country-table__fill--wins { background-color: var(--color-online); }
.country-table__fill--risk { background-color: var(--color-danger); }

.country-ranking__note {
  margin: 0 0 var(--space-xs);

  font-family: var(--font-body);
  font-size: var(--font-size-sm);
  line-height: var(--line-height-base);
  color: var(--color-text-muted);
}

/* Téléphone : un nom long — « États-Unis d'Amérique » — passe sur deux lignes
   plutôt que de pousser les jauges hors de l'écran ; « Prise de risque » aussi. */
@media (max-width: 34rem) {

  .country-table th,
  .country-table td {
    padding: var(--space-xs) 4px;
  }

  .country-table thead th,
  .country-table tbody th {
    white-space: normal;
  }

  .country-table__rank {
    width: 2rem;
  }

  .country-table__gauge-col {
    min-width: 4.5rem;
  }

  .country-table__flag {
    width: 20px;
    height: 20px;
    margin-right: 0.35em;
  }
}