/* ==========================================================================
   StatsMaps — feuille de style unique
   Organisation :
     1. Couleurs (thème clair et thème sombre)
     2. Base
     3. Barre de navigation
     4. Page d'accueil
     5. Pages de carte
     6. Téléphones et petits écrans
   ========================================================================== */

/* --- 1. Couleurs ---------------------------------------------------------
   Toutes les couleurs du site sont définies ici, une seule fois.
   Changer une valeur ici change le site entier.                           */

:root {
  --fond: #ffffff;
  --fond-doux: #f5f7fa;
  --fond-carte: #e9edf1;          /* la mer */
  --panneau: #ffffff;
  --panneau-flou: rgba(255, 255, 255, 0.94);
  --texte: #16191d;
  --texte-doux: #5b636d;
  --texte-tres-doux: #8b939d;
  --bordure: #e2e6eb;
  --bordure-forte: #cbd2da;
  --accent: #1d4ed8;
  --accent-doux: #eff4ff;
  --pays-sans-donnee: #c8ced5;
  --contour-pays: #aab5c0;
  --ombre: 0 1px 3px rgba(16, 24, 40, 0.08), 0 6px 20px rgba(16, 24, 40, 0.08);
  --rayon: 12px;
}

/* Thème sombre : soit choisi par le bouton, soit réglé sur le téléphone. */
[data-theme="dark"] {
  --fond: #0e1116;
  --fond-doux: #161b22;
  --fond-carte: #0b0f14;
  --panneau: #161b22;
  --panneau-flou: rgba(22, 27, 34, 0.94);
  --texte: #e6edf3;
  --texte-doux: #9aa5b1;
  --texte-tres-doux: #6e7681;
  --bordure: #262c36;
  --bordure-forte: #363d47;
  --accent: #58a6ff;
  --accent-doux: #12253f;
  --pays-sans-donnee: #2b323b;
  --contour-pays: #0e1116;
  --ombre: 0 1px 3px rgba(0, 0, 0, 0.5), 0 8px 24px rgba(0, 0, 0, 0.4);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --fond: #0e1116;
    --fond-doux: #161b22;
    --fond-carte: #0b0f14;
    --panneau: #161b22;
    --panneau-flou: rgba(22, 27, 34, 0.94);
    --texte: #e6edf3;
    --texte-doux: #9aa5b1;
    --texte-tres-doux: #6e7681;
    --bordure: #262c36;
    --bordure-forte: #363d47;
    --accent: #58a6ff;
    --accent-doux: #12253f;
    --pays-sans-donnee: #2b323b;
    --contour-pays: #0e1116;
    --ombre: 0 1px 3px rgba(0, 0, 0, 0.5), 0 8px 24px rgba(0, 0, 0, 0.4);
  }
}

/* --- 2. Base ------------------------------------------------------------ */

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  height: 100%;
}

body {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Inter, Roboto,
               "Helvetica Neue", Arial, sans-serif;
  font-size: 15px;
  line-height: 1.55;
  color: var(--texte);
  background: var(--fond);
  -webkit-font-smoothing: antialiased;
}

/* Évite le clignotement blanc au chargement en thème sombre. */
html { background: var(--fond); }

a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; }

h1, h2, h3 { line-height: 1.25; margin: 0 0 0.5em; letter-spacing: -0.015em; }

/* Nombres alignés en colonne (indispensable pour un classement). */
.nombre { font-variant-numeric: tabular-nums; }

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

/* --- 3. Barre de navigation --------------------------------------------- */

.barre {
  display: flex;
  align-items: center;
  gap: 8px;
  height: 56px;
  padding: 0 16px;
  background: var(--panneau);
  border-bottom: 1px solid var(--bordure);
  position: relative;
  z-index: 20;
}

.barre__logo {
  font-weight: 700;
  font-size: 17px;
  letter-spacing: -0.02em;
  color: var(--texte);
  white-space: nowrap;
}
.barre__logo:hover { text-decoration: none; }
.barre__logo span { color: var(--accent); }

/* Sur une carte, le nom de la rubrique où l'on se trouve, juste après le logo.
   Il sert deux fois : il dit « tu es dans l'Économie », et il ramène à la page
   de la rubrique — d'où l'on atteint les autres. Le menu, lui, ne montre que
   les cartes de CETTE rubrique. */
.barre__categorie {
  padding: 4px 10px;
  border-radius: 999px;
  background: var(--fond-doux);
  border: 1px solid var(--bordure);
  color: var(--texte-doux);
  font-size: 12.5px;
  font-weight: 600;
  white-space: nowrap;
}
.barre__categorie:hover {
  color: var(--texte);
  border-color: var(--accent);
  text-decoration: none;
}

.barre__nav {
  display: flex;
  gap: 2px;
  margin-left: 18px;
  overflow-x: auto;
  scrollbar-width: none;
}
.barre__nav::-webkit-scrollbar { display: none; }

.barre__lien {
  padding: 6px 12px;
  border-radius: 8px;
  color: var(--texte-doux);
  font-size: 14px;
  font-weight: 500;
  white-space: nowrap;
}
.barre__lien:hover {
  background: var(--fond-doux);
  color: var(--texte);
  text-decoration: none;
}
.barre__lien[aria-current="page"] {
  background: var(--accent-doux);
  color: var(--accent);
  font-weight: 600;
}

/* Chaque lien existe en version longue et courte : sur un petit écran,
   « PIB par habitant » devient « PIB/hab. » pour que tout tienne. */
.barre__lien .court { display: none; }

.barre__droite {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 6px;
}

.bouton-icone {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 34px;
  height: 34px;
  padding: 0 9px;
  border: 1px solid var(--bordure);
  border-radius: 8px;
  background: var(--fond);
  color: var(--texte-doux);
  font-size: 13px;
  font-weight: 600;
  font-family: inherit;
  cursor: pointer;
}
.bouton-icone:hover {
  background: var(--fond-doux);
  color: var(--texte);
  border-color: var(--bordure-forte);
  text-decoration: none;
}

/* Menu des langues : un bouton drapeau qui déroule les trois langues.
   C'est une balise <details> : le navigateur l'ouvre et la ferme tout seul,
   même sans JavaScript. barre.js n'ajoute que la fermeture au clic extérieur. */
.langues { position: relative; }

/* Un <summary> affiche par défaut un petit triangle : on l'enlève. */
.langues > summary { list-style: none; font-size: 15px; line-height: 1; }
.langues > summary::-webkit-details-marker { display: none; }
.langues > summary::marker { content: ""; }
.langues[open] > summary {
  border-color: var(--bordure-forte);
  background: var(--fond-doux);
}

.langues__menu {
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  min-width: 172px;
  padding: 5px;
  background: var(--panneau-flou);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid var(--bordure);
  border-radius: 10px;
  box-shadow: var(--ombre);
  z-index: 40;
}

.langues__menu a {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 7px 10px;
  border-radius: 7px;
  color: var(--texte);
  font-size: 13.5px;
  font-weight: 500;
  white-space: nowrap;
}
.langues__menu a:hover { background: var(--fond-doux); text-decoration: none; }
/* À treize langues, le menu dépasse la hauteur d'un téléphone : il défile.
   La hauteur est donnée en « vh » — un pourcentage de l'écran — pour qu'il
   reste utilisable aussi bien sur un grand écran que sur un petit. */
.langues__menu {
  max-height: min(62vh, 420px);
  overflow-y: auto;
  overscroll-behavior: contain;
}
.langues__menu a[aria-current="true"] {
  background: var(--accent-doux);
  color: var(--accent);
  font-weight: 600;
}
.langues__menu .drapeau { font-size: 15px; line-height: 1; }

/* --- 4. Page d'accueil --------------------------------------------------- */

.accueil {
  max-width: 1000px;
  margin: 0 auto;
  padding: 56px 20px 80px;
}

.accueil__titre {
  font-size: clamp(30px, 5.5vw, 46px);
  font-weight: 800;
  margin-bottom: 14px;
}

.accueil__intro {
  font-size: 17px;
  color: var(--texte-doux);
  max-width: 62ch;
  margin-bottom: 42px;
}

.vignettes {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 18px;
}

.vignette {
  display: block;
  padding: 22px;
  background: var(--panneau);
  border: 1px solid var(--bordure);
  border-radius: var(--rayon);
  color: var(--texte);
  transition: transform 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease;
}
.vignette:hover {
  transform: translateY(-3px);
  box-shadow: var(--ombre);
  border-color: var(--accent);
  text-decoration: none;
}

.vignette__pastille {
  width: 40px;
  height: 40px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  margin-bottom: 14px;
  background: var(--accent-doux);
}

.vignette__titre { font-size: 17px; font-weight: 700; margin-bottom: 5px; }
.vignette__texte { font-size: 14px; color: var(--texte-doux); margin: 0; }

/* Sur l'accueil, la vignette d'une catégorie annonce ce qu'elle contient :
   « PIB · PIB par habitant · Croissance · Inflation ». On sait où l'on va
   avant de cliquer. */
/* Une rubrique annoncée mais pas encore ouverte. Ce n'est pas un lien : elle
   est en retrait, sans ombre ni relief au survol, pour qu'on voie tout de
   suite qu'il n'y a rien à cliquer. */
.vignette.est-bientot {
  background: none;
  border-style: dashed;
  cursor: default;
}
.vignette.est-bientot .vignette__pastille { opacity: 0.55; background: var(--fond-doux); }
.vignette.est-bientot .vignette__titre,
.vignette.est-bientot .vignette__texte { color: var(--texte-tres-doux); }

.vignette__bientot {
  display: inline-block;
  margin-top: 12px;
  padding: 3px 9px;
  border-radius: 999px;
  background: var(--fond-doux);
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--texte-tres-doux);
}

.vignette__liste {
  margin-top: 12px;
  padding-top: 11px;
  border-top: 1px solid var(--bordure);
  font-size: 12.5px;
  font-weight: 600;
  color: var(--accent);
}

.pied {
  border-top: 1px solid var(--bordure);
  padding: 22px 20px;
  text-align: center;
  font-size: 13px;
  color: var(--texte-tres-doux);
}

/* --- 5. Pages de carte --------------------------------------------------- */

body.page-carte {
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.zone-carte {
  flex: 1;
  position: relative;
  min-height: 0;
  background: var(--fond-carte);
}

#carte { position: absolute; inset: 0; }

/* Panneau de classement, du côté où commence la lecture : à gauche partout,
   à droite en arabe. C'est le rôle de « inset-inline-start », qui veut dire
   « du côté où le texte commence » plutôt que « à gauche ». */
.panneau {
  position: absolute;
  top: 14px;
  inset-inline-start: 14px;
  /* Assez large pour la ligne la plus longue du site :
     « 192 419,942 $ int./hab. » à côté d'un nom de pays. Les chiffres sont
     écrits au plus précis, ils prennent donc plus de place qu'avant. */
  width: 344px;
  max-height: calc(100% - 28px);
  display: flex;
  flex-direction: column;
  background: var(--panneau-flou);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid var(--bordure);
  border-radius: var(--rayon);
  box-shadow: var(--ombre);
  overflow: hidden;
  z-index: 10;
}

.panneau__entete { padding: 14px 15px 11px; border-bottom: 1px solid var(--bordure); }
.panneau__titre { font-size: 15px; font-weight: 700; margin: 0 0 2px; }
.panneau__soustitre { font-size: 12px; color: var(--texte-tres-doux); }

.panneau__recherche {
  width: 100%;
  margin-top: 11px;
  padding: 7px 11px;
  border: 1px solid var(--bordure);
  border-radius: 8px;
  background: var(--fond);
  color: var(--texte);
  font-size: 13px;
  font-family: inherit;
}
.panneau__recherche::placeholder { color: var(--texte-tres-doux); }

/* --- Les deux unités d'une même carte -------------------------------------

   « Dollars US » / « Parité de pouvoir d'achat ». Ce sont de vrais liens vers
   de vraies pages, mais ils ont l'allure d'un interrupteur à deux positions :
   c'est bien la MÊME carte que l'on regarde, dans une autre unité.        */
.variantes {
  display: flex;
  gap: 4px;
  margin-top: 9px;
  padding: 3px;
  background: var(--fond-doux);
  border-radius: 9px;
}
.variante {
  flex: 1;
  padding: 5px 8px;
  border-radius: 7px;
  color: var(--texte-doux);
  font-size: 11.5px;
  font-weight: 600;
  line-height: 1.3;
  text-align: center;
}
.variante:hover { color: var(--texte); text-decoration: none; }
.variante.est-active {
  background: var(--panneau);
  color: var(--texte);
  box-shadow: var(--ombre);
}

/* --- Le pays de référence -------------------------------------------------

   Cliquer sur un pays repeint la carte en écarts avec lui. Cette ligne dit
   lequel, et la croix ramène aux valeurs. Elle est ICI, dans le panneau, et
   non sous la légende : c'est de ce côté que sont toutes les commandes.  */
.panneau__reference {
  display: flex;
  align-items: center;
  gap: 7px;
  margin-top: 9px;
  padding: 6px 9px;
  border-radius: 8px;
  background: var(--accent-doux);
  font-size: 11.5px;
  font-weight: 600;
  color: var(--accent);
}
.panneau__reference .drapeau { font-size: 13px; line-height: 1; }
.panneau__reference-nom {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.panneau__reference-mot { font-weight: 400; opacity: 0.8; white-space: nowrap; }
/* Quand le pays de référence n'a pas de chiffre pour l'année affichée. */
.panneau__reference-note {
  flex: 1 0 100%;
  font-weight: 400;
  color: var(--texte-tres-doux);
}
.panneau__sortir {
  margin-inline-start: auto;
  padding: 0 2px;
  border: none;
  background: none;
  color: var(--accent);
  font: inherit;
  font-size: 13px;
  line-height: 1;
  cursor: pointer;
  opacity: 0.7;
}
.panneau__sortir:hover { opacity: 1; }

/* --- La fiche de l'onglet « Pic » -----------------------------------------

   Le pic du pays choisi, l'année où il l'a atteint, et le chemin qui reste à
   parcourir pour le retrouver. C'est en toutes lettres ce que la couleur de
   la carte ne fait que suggérer.                                          */
.fiche-pic {
  padding: 12px 15px 13px;
  border-bottom: 1px solid var(--bordure);
  background: var(--fond-doux);
}
.fiche__nom {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: 13.5px;
  font-weight: 700;
}
.fiche__cle {
  margin-top: 3px;
  font-size: 12px;
  font-weight: 600;
  color: var(--accent);
}
.fiche__invite {
  margin: 0;
  font-size: 12px;
  line-height: 1.4;
  color: var(--texte-tres-doux);
}
.fiche__lignes { margin-top: 9px; display: grid; gap: 4px; }
.fiche__ligne {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  font-size: 12px;
  color: var(--texte-doux);
}
.fiche__ligne b { color: var(--texte); font-variant-numeric: tabular-nums; }

.classement { list-style: none; margin: 0; padding: 0; overflow-y: auto; }

.classement li {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 7px 15px 7px 11px;
  border-bottom: 1px solid var(--bordure);
  /* Le liseré coloré à gauche remplace l'ancienne pastille carrée : il donne
     la couleur du pays sur la carte sans prendre la place du drapeau.
     La couleur elle-même est posée ligne par ligne par carte.js. */
  border-left: 4px solid var(--couleur-pays, transparent);
  font-size: 13px;
  cursor: pointer;
}
.classement li:last-child { border-bottom: none; }
.classement li:hover { background: var(--fond-doux); }
.classement li.est-actif { background: var(--accent-doux); }

/* Le pays de référence de la comparaison : un liseré bleu à droite, en face
   du liseré de couleur de gauche. Il reste visible même quand un autre pays
   est sélectionné, ce qui arrive dès qu'on explore la carte en comparant. */
.classement li.est-reference {
  border-inline-end: 3px solid var(--accent);
}
.classement li.est-reference .nom { font-weight: 600; }

/* Le pays sur lequel on vient de cliquer sur la carte. Plus marqué que le
   simple survol, pour qu'on le retrouve d'un coup d'œil dans la liste. */
.classement li.est-choisi {
  background: var(--accent-doux);
  box-shadow: inset 0 0 0 1.5px var(--accent);
}
.classement li.est-choisi .nom { font-weight: 600; color: var(--texte); }

.classement .rang {
  width: 24px;
  flex-shrink: 0;
  color: var(--texte-tres-doux);
  font-size: 12px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}
/* Le drapeau du pays. Attention : Windows ne sait pas dessiner les drapeaux
   emoji et affiche à la place les deux lettres du pays (« FR »). C'est moins
   joli mais reste lisible, et il n'y a pas d'autre solution sans images. */
.classement .drapeau {
  flex: 0 0 20px;
  font-size: 14px;
  line-height: 1;
  text-align: center;
  overflow: hidden;
}
/* Les pays sans chiffre pour l'année affichée sont regroupés à la fin de la
   liste, sous une ligne de séparation qui porte la phrase complète. */
.classement .separation {
  display: block;
  padding: 12px 15px 7px 11px;
  border-bottom: 1px solid var(--bordure);
  border-left: 4px solid transparent;
  background: var(--fond-doux);
  font-size: 11.5px;
  font-weight: 600;
  line-height: 1.35;
  color: var(--texte-tres-doux);
  cursor: default;
}
.classement .separation:hover { background: var(--fond-doux); }

.classement li.sans-chiffre .nom,
.classement li.sans-chiffre .valeur { color: var(--texte-tres-doux); }

/* Les quatre territoires (Hong Kong, Macao, Puerto Rico, Aruba) portent deux
   drapeaux : celui de l'État dont ils dépendent, puis le leur. Ils n'ont pas
   de numéro de rang — ce ne sont pas des pays — et c'est justement la place
   libérée qui accueille le second drapeau. Les noms restent alignés avec
   ceux des autres lignes : 24 px de rang + 8 px d'écart + 20 px de drapeau. */
.classement li.territoire .rang { display: none; }
.classement li.territoire .drapeau { flex: 0 0 52px; text-align: right; }

.classement .nom {
  flex: 1;
  min-width: 3.5em;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
/* Les nombres sont écrits au plus précis (« 192 419,942 $ int./hab. ») : la
   colonne prend toute la place dont elle a besoin, et c'est le NOM du pays qui
   cède si l'on manque de largeur. Un nom tronqué se devine ; un chiffre
   tronqué ne veut plus rien dire. */
.classement .valeur {
  color: var(--texte-doux);
  font-variant-numeric: tabular-nums;
  font-size: 12px;
  white-space: nowrap;
  flex: 0 0 auto;
}
.classement .vide { padding: 16px 15px; color: var(--texte-tres-doux); cursor: default; }
.classement .vide:hover { background: none; }

/* --- Les onglets du panneau -----------------------------------------------

   Le panneau de gauche porte trois vues, qui se partagent la même place sous
   une rangée d'onglets : le classement, le comparateur de deux pays, et les
   records. Les onglets sont fabriqués par assets/js/carte.js, le contenu du
   comparateur par assets/js/comparateur.js.                                */

/* Certains navigateurs perdent le [hidden] sur un élément à qui le CSS donne
   un display. On le réaffirme : c'est lui qui cache la vue inactive. */
[hidden] { display: none !important; }

.onglets {
  display: flex;
  gap: 4px;
  margin: 9px 0 0;
  padding: 3px;
  background: var(--fond-doux);
  border-radius: 9px;
}
.onglet {
  flex: 1;
  padding: 5px 8px;
  border: none;
  border-radius: 7px;
  background: none;
  color: var(--texte-doux);
  font: inherit;
  font-size: 12.5px;
  font-weight: 600;
  cursor: pointer;
}
.onglet:hover { color: var(--texte); }
.onglet[aria-selected="true"] {
  background: var(--panneau);
  color: var(--texte);
  box-shadow: var(--ombre);
}

.comparateur {
  flex: 1;
  overflow-y: auto;
  padding: 13px 15px 16px;
}

/* Les deux pays comparés. Chaque fente est un bouton : on la rend active,
   puis on désigne un pays sur la carte ou dans la liste déroulante. */
.cmp__fentes {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.cmp__fente {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  padding: 8px 10px;
  border: 1px solid var(--bordure);
  border-radius: 9px;
  background: var(--panneau);
  color: var(--texte);
  font: inherit;
  font-size: 13px;
  text-align: start;
  cursor: pointer;
}
.cmp__fente:hover { border-color: var(--bordure-forte); }
/* La fente qui recevra le prochain pays choisi. */
.cmp__fente.est-active {
  border-color: var(--accent);
  box-shadow: inset 0 0 0 1px var(--accent);
}
.cmp__fente .drapeau { font-size: 15px; line-height: 1; }
.cmp__nom {
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.cmp__nom--vide { color: var(--texte-tres-doux); }
/* Le petit mot « référence » sur le pays qui sert de base au calcul. */
.cmp__base {
  padding: 2px 6px;
  border-radius: 20px;
  background: var(--accent-doux);
  color: var(--accent);
  font-size: 10px;
  font-weight: 700;
  white-space: nowrap;
}
.cmp__valeur {
  color: var(--texte-doux);
  font-size: 12px;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

/* Le chiffre qui répond à la question posée. */
.cmp__resultat { text-align: center; margin: 16px 0 4px; }
.cmp__ecart { font-size: 30px; font-weight: 700; line-height: 1.1; }
.cmp__legende {
  margin-top: 2px;
  font-size: 11.5px;
  color: var(--texte-tres-doux);
}

.cmp__invite {
  margin: 14px 0 0;
  font-size: 12.5px;
  line-height: 1.45;
  color: var(--texte-tres-doux);
}

/* Le graphique de l'écart, année par année. */
.cmp__graphe-boite { margin-top: 12px; cursor: ew-resize; touch-action: none; }
.cmp__graphe {
  display: block;
  width: 100%;
  height: 104px;
  overflow: visible;
}
.cmp__bornes {
  display: flex;
  justify-content: space-between;
  margin-top: 3px;
  font-size: 10.5px;
  color: var(--texte-tres-doux);
  font-variant-numeric: tabular-nums;
}

/* Les années remarquables, sous le graphique. */
.cmp__reperes {
  margin-top: 12px;
  border-top: 1px solid var(--bordure);
}
.cmp__repere {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  padding: 7px 0;
  border-bottom: 1px solid var(--bordure);
  font-size: 12px;
}
.cmp__repere:last-child { border-bottom: none; }
.cmp__repere-nom { color: var(--texte-doux); }
.cmp__repere-valeur { font-weight: 600; white-space: nowrap; }
/* L'année, en petit à côté de la valeur. */
.cmp__repere-valeur i {
  margin-inline-start: 7px;
  color: var(--texte-tres-doux);
  font-style: normal;
  font-weight: 400;
}

.cmp__choix { display: block; margin-top: 16px; }
.cmp__choix-titre {
  display: block;
  margin-bottom: 5px;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--texte-tres-doux);
}
.cmp__select {
  width: 100%;
  padding: 7px 9px;
  border: 1px solid var(--bordure);
  border-radius: 8px;
  background: var(--fond-doux);
  color: var(--texte);
  font: inherit;
  font-size: 13px;
}

/* Légende, en bas à droite */
.legende {
  position: absolute;
  inset-inline-end: 14px;
  bottom: 14px;
  padding: 12px 14px;
  background: var(--panneau-flou);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid var(--bordure);
  border-radius: var(--rayon);
  box-shadow: var(--ombre);
  z-index: 10;
  max-width: 260px;
}
.legende__titre {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--texte-tres-doux);
  margin-bottom: 9px;
}
/* L'unité, en toutes lettres et telle que l'écrit le FMI. Elle n'est PAS en
   majuscules : c'est une phrase, parfois longue, et non une étiquette. */
.legende__unite {
  margin: -6px 0 9px;
  font-size: 10.5px;
  line-height: 1.35;
  color: var(--texte-tres-doux);
}
.legende__barre { display: flex; border-radius: 4px; overflow: hidden; height: 12px; }
.legende__case { flex: 1; }
.legende__valeurs {
  display: flex;
  justify-content: space-between;
  margin-top: 5px;
  font-size: 10.5px;
  color: var(--texte-doux);
  font-variant-numeric: tabular-nums;
}
.legende__nd {
  display: flex;
  align-items: center;
  gap: 7px;
  margin-top: 10px;
  font-size: 11.5px;
  color: var(--texte-tres-doux);
}
.legende__nd i {
  width: 12px; height: 12px;
  border-radius: 3px;
  background: var(--pays-sans-donnee);
  display: inline-block;
}

/* Curseur d'années, en bas au centre */
.annees {
  position: absolute;
  left: 50%;
  bottom: 14px;
  transform: translateX(-50%);
  width: min(460px, calc(100% - 360px));
  padding: 11px 18px 13px;
  background: var(--panneau-flou);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid var(--bordure);
  border-radius: var(--rayon);
  box-shadow: var(--ombre);
  z-index: 10;
}
.annees__haut {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin-bottom: 7px;
}
.annees__valeur { font-size: 20px; font-weight: 700; font-variant-numeric: tabular-nums; }
.annees__etiquette { font-size: 11.5px; color: var(--texte-tres-doux); }
.annees__projection { color: #d97706; font-weight: 600; }
[data-theme="dark"] .annees__projection { color: #f0b429; }

.annees input[type="range"] {
  width: 100%;
  margin: 0;
  accent-color: var(--accent);
  cursor: pointer;
}
.annees__bornes {
  display: flex;
  justify-content: space-between;
  font-size: 10.5px;
  color: var(--texte-tres-doux);
  margin-top: 2px;
  font-variant-numeric: tabular-nums;
}

/* Ligne "Source : FMI…", collée en bas du panneau de classement */
.panneau__pied {
  flex-shrink: 0;
  padding: 9px 15px;
  border-top: 1px solid var(--bordure);
  background: var(--panneau-flou);
  font-size: 11px;
  line-height: 1.45;
  color: var(--texte-tres-doux);
}
.panneau__pied a { color: var(--texte-doux); }

/* Infobulle MapLibre */
.maplibregl-popup-content {
  font-family: inherit;
  font-size: 13px;
  padding: 11px 14px;
  border-radius: 10px;
  background: var(--panneau);
  color: var(--texte);
  box-shadow: var(--ombre);
  border: 1px solid var(--bordure);
}
.maplibregl-popup-tip { display: none; }
.maplibregl-popup-close-button { color: var(--texte-tres-doux); font-size: 17px; }
.popup__nom { font-weight: 700; font-size: 14px; margin-bottom: 3px; }
/* Le drapeau devant le nom du pays, comme dans le classement. */
.popup__nom .drapeau { margin-right: 7px; }
.popup__valeur { font-size: 17px; font-weight: 700; font-variant-numeric: tabular-nums; }
.popup__detail { font-size: 11.5px; color: var(--texte-tres-doux); margin-top: 2px; }

/* L'écart avec le pays de référence, en bas de la bulle. */
.popup__ecart {
  display: flex;
  align-items: center;
  gap: 5px;
  margin-top: 7px;
  padding-top: 6px;
  border-top: 1px solid var(--bordure);
  font-size: 12px;
  color: var(--texte-doux);
}
.popup__ecart b { color: var(--texte); font-variant-numeric: tabular-nums; }
.popup__ecart .drapeau { font-size: 13px; line-height: 1; }
.popup__ecart.est-reference { color: var(--accent); font-weight: 600; }

.maplibregl-ctrl-group {
  background: var(--panneau) !important;
  border: 1px solid var(--bordure) !important;
  box-shadow: var(--ombre) !important;
}
.maplibregl-ctrl-group button + button { border-top: 1px solid var(--bordure) !important; }
[data-theme="dark"] .maplibregl-ctrl-group button .maplibregl-ctrl-icon { filter: invert(0.85); }

/* Écran de chargement */
.chargement {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--fond);
  color: var(--texte-doux);
  font-size: 14px;
  z-index: 30;
  transition: opacity 0.3s ease;
}
.chargement[hidden] { display: none; }
.chargement.est-fini { opacity: 0; pointer-events: none; }

/* --- 6. Téléphones et petits écrans -------------------------------------- */

/* Bouton qui ouvre/ferme le classement sur mobile (caché sur ordinateur) */
.bouton-panneau { display: none; }

@media (max-width: 860px) {
  .barre { padding: 0 12px; height: 52px; }
  .barre__lien { padding: 5px 9px; font-size: 13px; }
  .barre__categorie { padding: 3px 8px; font-size: 11.5px; }

  /* Avec cinq cartes, le menu ne tient plus sur un téléphone : il défile
     horizontalement. Sans repère visuel, on ne devine pas qu'il continue.
     Ce dégradé fait disparaître le dernier onglet en fondu sur le bord droit,
     ce qui se lit tout de suite comme « ça continue par là ». */
  .barre__nav {
    margin-left: 10px;
    -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 20px), transparent);
    mask-image: linear-gradient(to right, #000 calc(100% - 20px), transparent);
  }

  .bouton-panneau {
    display: inline-flex;
    position: absolute;
    top: 12px;
    inset-inline-start: 12px;
    z-index: 12;
    background: var(--panneau);
    box-shadow: var(--ombre);
  }

  .panneau {
    top: auto;
    bottom: 0;
    left: 0;
    right: 0;
    width: auto;
    /* Le tiroir monte plus haut qu'avant : son en-tête porte maintenant le
       choix de l'unité, trois onglets et parfois la fiche d'un record. À 58 %
       il ne serait plus resté que deux lignes de classement en dessous. */
    max-height: 75%;
    border-radius: var(--rayon) var(--rayon) 0 0;
    border-left: none;
    border-right: none;
    border-bottom: none;
    transform: translateY(101%);
    transition: transform 0.25s ease;
  }
  .panneau.est-ouvert { transform: translateY(0); }

  .annees {
    width: calc(100% - 24px);
    bottom: 12px;
    left: 12px;
    right: 12px;
    transform: none;
  }

  /* Sur téléphone, la légende monte en haut à droite : c'est le seul endroit
     vraiment libre, et elle ne peut donc plus chevaucher le curseur. */
  .legende {
    top: 12px;
    bottom: auto;
    inset-inline-end: 12px;
    max-width: 178px;
    padding: 9px 11px;
  }
  /* Tout l'en-tête du panneau se resserre : sur un écran de téléphone, chaque
     pixel repris en haut est une ligne de classement gagnée en bas. */
  .panneau__entete { padding: 11px 13px 9px; }
  .variantes, .onglets { margin-top: 7px; }
  .variante, .onglet { padding: 4px 6px; }
  .panneau__recherche { margin-top: 8px; padding: 6px 10px; }
  .fiche-pic { padding: 10px 13px 11px; }

  .legende__titre { font-size: 10px; margin-bottom: 6px; }
  .legende__unite { font-size: 9.5px; margin: -4px 0 7px; }
  .legende__valeurs { font-size: 9.5px; }
  .legende__nd { font-size: 10.5px; margin-top: 8px; }

  /* Sur téléphone, on zoome en pinçant avec deux doigts : les boutons +/-
     sont inutiles et se retrouveraient cachés derrière la légende. */
  .maplibregl-ctrl-top-right { display: none; }
}

/* En dessous de 560 px, on bascule sur les libellés courts. */
@media (max-width: 560px) {
  .barre__lien .long { display: none; }
  .barre__lien .court { display: inline; }
}

@media (max-width: 420px) {
  .barre__logo { font-size: 15px; }
  .barre__lien { padding: 5px 7px; font-size: 12px; }
  .barre__nav { margin-left: 6px; }
  /* Avec cinq cartes, le menu déborde : il défile déjà horizontalement
     (overflow-x: auto plus haut). On lui laisse juste un peu d'air à droite
     pour qu'on devine qu'il continue. */
  .barre__nav { padding-right: 4px; }
  .langues__menu { min-width: 158px; }
}

/* --- 7. Les langues qui s'écrivent de droite à gauche ---------------------

   L'arabe retourne toute la page : <html dir="rtl"> suffit, parce que les
   marges et les positions sont écrites plus haut en « logique »
   (inset-inline-start, border-inline-end, margin-inline-start…), c'est-à-dire
   du côté où la lecture COMMENCE et non « à gauche ».

   Trois exceptions, volontaires : une échelle de valeurs et un axe du temps
   se lisent dans le même sens dans toutes les langues. Les retourner ferait
   dire à la légende l'inverse de ce que montre la carte, et placerait 1980 à
   droite d'un graphique qui commence à gauche. On les force donc en LTR. */

[dir="rtl"] .legende__barre,
[dir="rtl"] .legende__valeurs,
[dir="rtl"] .annees__bornes,
[dir="rtl"] .annees input[type="range"],
[dir="rtl"] .cmp__graphe-boite,
[dir="rtl"] .cmp__bornes {
  direction: ltr;
}

/* Le champ de recherche et les nombres du classement gardent leur alignement
   naturel, mais la ponctuation arabe doit rester du bon côté. */
[dir="rtl"] .classement .valeur,
[dir="rtl"] .cmp__valeur { direction: ltr; }

/* Respecte le réglage « réduire les animations » du système. */
@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; animation: none !important; }
}