/* ============================================================
   La carte des langues — feuille propre à `langues.html`
   et `en/languages.html`.

   ⚠️ Elle ne redéfinit AUCUN jeton de `style.css` : le vert de
   marque, l'encre, le fond pâle et le gris viennent de là. Les
   seules couleurs neuves sont les quatre pas de la carte (des
   teintes du vert de marque, même 118°) et les deux couples
   ambre / brique des chantiers, mesurés au-dessus de 4,5:1 sur
   leur propre fond.
   ============================================================ */

:root {
  /* Les quatre pas de la carte = le vert de marque dilué dans le
     blanc (100 %, 60 %, 30 %), puis un gris-vert neutre pour
     « aucune langue cochée ». La teinte ne bouge pas : 118°. */
  --pas3: #237220;
  --pas2: #7baa79;
  --pas1: #bdd5bc;
  --pas0: #e9ebe7;
  --trait: #8a9789;          /* la frontière entre deux pays */

  /* Le coût d'un chantier. Deux couples mesurés :
     #8a5a12 sur #f6eedd = 5,13:1 · #8c2f2a sur #f7e6e4 = 6,79:1 */
  --ambre: #8a5a12;   --ambre-fond: #f6eedd;
  --brique: #8c2f2a;  --brique-fond: #f7e6e4;
  --neutre-fond: #eceeeb;
  --filet: #d9e0d8;
}

/* La carte a besoin de plus que les 720 px des pages de texte. */
.page-contenu.langues { width: min(1000px, calc(100% - 28px)); }

.langues .chapo {
  font-size: clamp(16px, 2.2vw, 18px);
  color: var(--encre);
  max-width: 62ch;
  margin: 0 0 22px;
}
.langues .chapo { line-height: 1.5; }
.langues .chapo strong { color: var(--vert); }

/* ── Le grand chiffre ─────────────────────────────────────── */
.langues .stat {
  /* `center` et non `baseline` (Elliott, 2026-08-31 : « mal aligné sur la
     hauteur »). En baseline, le grand chiffre se calait sur la PREMIÈRE ligne
     du texte : tant que la phrase tenait sur une ligne ça passait, mais dès
     qu'elle en prenait trois — ce qui arrive dès qu'on coche une langue de
     plus — le chiffre paraissait collé en haut.
     ⚠️ Sans effet quand ça se replie sur téléphone : chaque élément est alors
     seul sur sa ligne. */
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px 18px;
  margin: 0 0 28px; padding-top: 20px; border-top: 1px solid var(--filet);
}
.langues .stat b {
  color: var(--vert); font-size: clamp(34px, 7vw, 52px); font-weight: 700;
  letter-spacing: -0.03em; line-height: 1; font-variant-numeric: tabular-nums;
}
.langues .stat span { color: var(--encre); font-size: 15px; max-width: 48ch; line-height: 1.55; }
.langues .stat strong { color: var(--vert); }

/* ── Le bloc carte ────────────────────────────────────────── */
.langues .bloc-carte {
  border: 1px solid var(--filet); border-radius: 18px; overflow: hidden;
  background: var(--blanc); margin: 0 0 16px;
}

/* Le sélecteur de langues */
.langues .choix { padding: 16px 16px 15px; border-bottom: 1px solid var(--filet); }
.langues .choix > p {
  font-size: 14px; color: var(--encre); max-width: 74ch; margin: 0 0 12px; line-height: 1.55;
}
/* Une seule liste de langues depuis le 2026-08-30 : les cinq rangs de chantier
   disaient ce qu'il faudrait CONSTRUIRE, une information de projet. */
/* ⚠️ TROIS RANGEES, ET L'ALPHABET DESCEND EN COLONNES (Elliott, 2026-08-30).
   `grid-auto-flow: column` remplit la colonne 1 de haut en bas avant de passer
   a la colonne 2 : en glissant vers la droite on continue l'alphabet. En `row`,
   il faudrait revenir a gauche a chaque rangee -- « il faut pas devoir revenir
   au tout debut quand on change de ligne ».
   Trois rangees et pas plus : c'est ce qui laisse la carte a portee de regard
   au lieu d'une pleine hauteur d'ecran de puces. */
#choix {
  display: grid;
  grid-auto-flow: column;
  grid-template-rows: repeat(3, auto);
  gap: 6px;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  -webkit-overflow-scrolling: touch;
  scroll-behavior: smooth;
  padding-bottom: 2px;
}
#choix .puce { white-space: nowrap; }

.langues .rail { position: relative; }

/* La fleche flotte au bord droit, sur un degrade qui dit que ca continue. */
.langues .vers-droite {
  position: absolute;
  top: 0; right: -2px; bottom: 0;
  width: 40px;
  border: 0;
  cursor: pointer;
  font-size: 26px;
  line-height: 1;
  color: var(--vert);
  padding: 0 0 2px 14px;
  background: linear-gradient(to right, rgba(255,255,255,0), var(--blanc) 42%);
}
.langues .vers-droite[hidden] { display: none; }

.langues button.puce {
  --c: var(--gris); --cf: var(--neutre-fond);
  font: inherit; font-size: 13px; line-height: 1.2; text-align: left;
  display: inline-flex; align-items: center; gap: 7px;
  padding: 6px 11px 6px 9px; border-radius: 999px; cursor: pointer;
  background: var(--blanc); color: var(--encre); border: 1px solid var(--filet);
  transition: background 0.15s, border-color 0.15s, color 0.15s;
}
.langues button.puce[data-g="0"],
.langues button.puce[data-g="1"] { --c: var(--vert);   --cf: var(--fond); }
.langues button.puce[data-g="2"] { --c: var(--ambre);  --cf: var(--ambre-fond); }
.langues button.puce[data-g="3"] { --c: var(--brique); --cf: var(--brique-fond); }
.langues button.puce:hover { border-color: var(--trait); }
.langues button.puce .rond {
  width: 9px; height: 9px; border-radius: 50%; border: 1.5px solid var(--c); flex: none;
}
.langues button.puce[aria-pressed="true"] {
  background: var(--cf); border-color: transparent; color: var(--c); font-weight: 600;
}
.langues button.puce[aria-pressed="true"] .rond { background: var(--c); }
.langues button.puce .val {
  font-size: 11.5px; color: var(--gris); font-variant-numeric: tabular-nums; white-space: nowrap;
}
.langues button.puce[aria-pressed="true"] .val { color: var(--c); }
.langues button.puce:focus-visible { outline: 2px solid var(--vert); outline-offset: 2px; }

/* Le bandeau de résumé */
.langues .resume {
  display: flex; flex-wrap: wrap; align-items: center; gap: 7px 16px;
  margin-top: 13px; padding: 11px 13px; border-radius: 12px;
  background: var(--fond); font-size: 13px; color: var(--encre);
}
.langues .resume .etiq {
  font-size: 10.5px; font-weight: 700; letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--vert); margin-right: 5px;
}
.langues .resume b { font-weight: 600; }
.langues .resume .delta {
  font-variant-numeric: tabular-nums; font-weight: 700; color: var(--vert);
}
.langues .resume .delta.moins { color: var(--brique); }
.langues .resume .pousse { flex: 1 1 40px; }
.langues button.remise {
  font: inherit; font-size: 12.5px; padding: 5px 11px; border-radius: 8px; margin-left: auto;
  background: var(--blanc); border: 1px solid var(--trait); color: var(--encre); cursor: pointer;
}
.langues button.remise[disabled] { opacity: 0.4; cursor: default; }
.langues button.remise:focus-visible { outline: 2px solid var(--vert); outline-offset: 2px; }

/* La carte elle-même */
.langues .porte-carte { padding: 10px 10px 0; }
.langues svg.monde { display: block; width: 100%; height: auto; }
.langues svg.monde path {
  stroke: var(--trait); stroke-width: 0.45; stroke-linejoin: round;
  vector-effect: non-scaling-stroke; cursor: pointer;
  transition: fill 0.45s ease;
}
.langues svg.monde path.pas3 { fill: var(--pas3); }
.langues svg.monde path.pas2 { fill: var(--pas2); }
.langues svg.monde path.pas1 { fill: var(--pas1); }
.langues svg.monde path.pas0 { fill: var(--pas0); }
.langues svg.monde path.vise { stroke: var(--encre); stroke-width: 1.6; }
/* Le pays seulement SURVOLE pendant qu'un autre est epingle : un filet, juste
   pour que la carte reponde. Il ne doit JAMAIS se lire comme une selection --
   c'est exactement la confusion qu'Elliott a signalee le 2026-09-02. */
.langues svg.monde path.survol { stroke: var(--encre); stroke-width: 0.9; }
.langues svg.monde path:focus { outline: none; stroke: var(--encre); stroke-width: 1.6; }
/* ⚠️ L'EPINGLE PASSE APRES `:focus`, ET CE N'EST PAS UN HASARD : les deux
   regles ont exactement la meme specificite (3 classes, 2 elements), donc
   c'est l'ORDRE qui tranche. Placee avant, un pays epingle ET focalise serait
   retombe au trait du focus, et la selection aurait eu l'air relachee. */
.langues svg.monde path.epingle { stroke: var(--encre); stroke-width: 2.2; }

/* ⚠️ LA LEGENDE EST SOUS LES PASTILLES, PAS SOUS LA CARTE, et elle est PETITE
   (Elliott, 2026-08-31 : « la legende n est pas bien placee et prend trop de
   place... comme on fait reference a la selection de pastille, mets la legende
   juste en dessous des pastilles, au-dessus de la carte, et en beaucoup plus
   petit »). Il a raison sur les deux points :
   - elle EXPLIQUE les couleurs que la selection vient de produire, donc sa
     place est contre la selection, pas trois ecrans plus bas ;
   - en quatre cartes de deux lignes chacune, elle prenait ~200 px sur
     telephone -- plus que le detail d un pays, pour une echelle de couleurs.
   Les quatre phrases sont remplacees par un intitule + quatre fourchettes :
   la phrase disait quatre fois « ils ecrivent dans les langues cochees », qui
   se dit une seule fois en tete. */
.langues .legende {
  display: flex; flex-wrap: wrap; align-items: center; gap: 3px 12px;
  padding: 8px 16px 9px; border-bottom: 1px solid var(--filet);
  font-size: 11px; line-height: 1.35; color: var(--gris);
  font-variant-numeric: tabular-nums;
}
/* L'intitule prend TOUTE la ligne pour que les quatre reperes tiennent sur la
   suivante, sans se replier (Elliott, 2026-08-31 : « mets les 4 indicateurs sur
   une seule ligne »). ✅ Mesure a 375 px : les quatre occupent 276 px des
   349 px disponibles -- ils tiennent, l'intitule seul ne tiendrait pas avec. */
.langues .legende .titre { flex: 0 0 100%; font-weight: 600; color: var(--encre); }
.langues .legende span { display: inline-flex; align-items: center; }
.langues .legende i {
  width: 11px; height: 11px; border-radius: 3px; margin-right: 5px;
  flex: none; border: 1px solid rgba(0, 0, 0, .07);
}

/* ⚠️ CE BLOC EST LE DERNIER DU CADRE, SOUS LA CARTE, depuis le 2026-08-31
   (Elliott : « c'est trop melant avec la grosse stat plus haut... mets ca juste
   en dessous de la carte, mais au-dessus de la legende » -- la legende est
   remontee sous les pastilles le meme jour, ce bloc ferme donc le cadre). Plus haut, il
   touchait le grand chiffre de la page et les deux se lisaient ensemble --
   « 21,6 % » puis « 7 % » pour la Libye, sans que rien ne dise qu'ils ne
   mesurent pas la meme chose. Sous la carte, il repond au doigt qui vient de
   toucher, et rien d'autre.

   ⚠️ ET IL SE LIT EN TROIS COLONNES SUR UNE SEULE LIGNE, telephone compris
   (« fais en sorte qu'on puisse voir les 3 stats sur une seule ligne en
   3 colonnes, de facon elegante »). D'ou des libelles de deux mots : a 375 px,
   une colonne fait 83,7 px (mesure) et ne pardonne pas une phrase. */
.langues .lecture {
  border-top: 1px solid var(--filet); background: var(--fond);
  padding: 11px 16px 13px; min-height: 0; display: flex; align-items: center;
  font-size: 13px; color: var(--encre); line-height: 1.4;
}
.langues .lecture .creux { color: var(--gris); font-size: 13px; }
.langues .lecture .corps { display: block; width: 100%; }
.langues .lecture .pays {
  font-weight: 700; font-size: 16px; color: var(--vert);
  line-height: 1.25; margin-bottom: 8px;
}
/* « Selection de » : une etiquette, pas un titre -- elle nomme ce qu'on
   regarde sans voler la vedette au pays. */
.langues .lecture .etiquette {
  font-weight: 400; font-size: 11px; color: var(--gris);
  text-transform: uppercase; letter-spacing: .05em; margin-right: 7px;
}
.langues .lecture .faits {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px;
}
.langues .lecture .fait b {
  display: block; font-weight: 700; font-size: 15px; line-height: 1.2;
  color: var(--encre); font-variant-numeric: tabular-nums;
}
.langues .lecture .fait span {
  display: block; font-size: 11px; line-height: 1.3; color: var(--gris);
  margin-top: 3px;
}
@media (max-width: 560px) {
  .langues .lecture { padding: 10px 13px 12px; }
  .langues .lecture .pays { font-size: 15px; margin-bottom: 7px; }
  .langues .lecture .etiquette { font-size: 10px; margin-right: 6px; }
  .langues .lecture .faits { gap: 8px; }
  /* 13 px, pas 14 : ✅ mesure a 375 px, une colonne fait 83,7 px et
     « 1,44 milliard » en occupe 85 a 14 px -- il se cassait en deux lignes et
     decalait son libelle sous ceux des voisines. A 13 px il en occupe 80. */
  .langues .lecture .fait b { font-size: 13px; }
  .langues .lecture .fait span { font-size: 10px; }
}

/* ── Les listes de la page ────────────────────────────────── */
.langues .liste {
  display: flex; flex-direction: column; gap: 1px;
  background: var(--filet); border: 1px solid var(--filet);
  border-radius: 14px; overflow: hidden; margin: 14px 0 0;
}
.langues .ligne {
  background: var(--blanc); padding: 14px 16px;
  display: grid; gap: 4px;
}
.langues .ligne .gauche { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.langues .ligne .nom { font-weight: 700; font-size: 16.5px; color: var(--encre); }
.langues .ligne .quoi { font-size: 13.5px; color: var(--encre); line-height: 1.5; }
.langues .etiquettes { display: flex; flex-wrap: wrap; gap: 5px; }
.langues .et {
  font-size: 11px; padding: 2.5px 8px; border-radius: 999px;
  background: var(--neutre-fond); color: var(--encre); white-space: nowrap;
}
.langues .et.oui { background: var(--fond); color: var(--vert); font-weight: 600; }
.langues .et.bof { background: var(--ambre-fond); color: var(--ambre); font-weight: 600; }
.langues .et.non { background: var(--brique-fond); color: var(--brique); font-weight: 600; }
.langues .groupe {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px;
  padding: 11px 16px; background: var(--fond);
  font-size: 11.5px; font-weight: 700; letter-spacing: 0.09em;
  text-transform: uppercase; color: var(--vert);
}
.langues .groupe em {
  font-style: normal; color: var(--gris); letter-spacing: 0;
  text-transform: none; font-weight: 400; font-size: 12px;
}
.langues .ligne[data-l] { cursor: pointer; transition: box-shadow 0.15s, background 0.15s; }
.langues .ligne[data-l]:hover { background: var(--fond); }
.langues .ligne[data-l].prise { box-shadow: inset 3px 0 0 var(--vert); }
.langues .ligne[data-l]:focus-visible { outline: 2px solid var(--vert); outline-offset: -2px; }

/* ── Les sources ──────────────────────────────────────────── */
.langues .sources { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 9px; }
.langues .sources li {
  font-size: 13.5px; color: var(--encre); line-height: 1.55;
  padding-left: 26px; position: relative; max-width: 78ch;
}
.langues .sources li::before {
  position: absolute; left: 0; top: 1px; font-size: 10px; font-weight: 700; letter-spacing: 0.04em;
}
.langues .sources li.mesure::before { content: "OK"; color: var(--vert); }
.langues .sources li.estime::before { content: "≈"; color: var(--ambre); font-size: 14px; top: -1px; }
.langues .sources code {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 12px;
  background: var(--neutre-fond); padding: 1px 5px; border-radius: 4px;
}

/* ── Le mot de la fin : d'où vient cette carte ────────────── */
/* La bulle de fin vit desormais dans style.css : elle sert sur toutes les
   pages de contenu, plus seulement ici (Elliott, 2026-08-31). */

/* L'indice de glissement n'existe que sur telephone : sur un ecran large la
   carte tient en entier et il n'y a rien a faire glisser. */
.langues .glisse { display: none; }

/* --- LE TIROIR DES LANGUES (Elliott, 2026-08-30) ------------------------
   « Il faudrait que les choix de pays soient dans une liste déroulante à choix
   multiples, donc on verrait l'impact sur la carte sans devoir scroller à
   chaque fois, et ça prendrait beaucoup moins de place. »

   ⚠️ PAS un `<select multiple>` : sur iOS il ouvre une roue système qui masque
   la carte — l'inverse de ce qu'il demande, qui est de VOIR la carte bouger.
   Un `<details>` garde les vraies puces, tactiles et cochables une par une,
   et se referme sur un résumé quand on a fini.

   Il est `open` dans le HTML : sur grand écran rien ne change, tout est visible
   d'un coup. C'est le JS qui le referme sur téléphone. */
.langues .tiroir > summary {
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 15px;
  color: var(--encre);
  padding: 2px 0 10px;
}
.langues .tiroir > summary .compte {
  font-size: 12.5px; font-weight: 700; color: var(--vert);
  background: var(--fond); border-radius: 999px; padding: 2px 9px;
}
/* « Tout decocher » (Elliott, 2026-08-31). Il vit SOUS le rail, pas dans le
   resume : ✅ sur grand ecran le resume est masque (`tiroir[open] > summary`
   passe a `display:none`), un bouton pose dedans y serait donc invisible.
   ⚠️ `[hidden]` a besoin de sa regle explicite : n'importe quel `display` de
   notre part gagnerait sur lui -- c'est le defaut qui a fait afficher
   « 0 frappes » sur la page d'essai le 2026-08-31. */
/* 🔴 IL DECROCHE DE 42 px DU BORD DROIT (Elliott, 2026-09-02 : « mets le petit
   tout decocher un peu plus a gauche pour pas qu'il soit cache par le flou »).
   ✅ Mesure : le degrade de `.vers-droite` occupe les 38 DERNIERS pixels du
   rail (40 px de large, pose a `right: -2px`), et le bouton finissait pile au
   bord droit — il tombait donc entierement dans cette colonne, et on lisait
   « Tout deco… ». Les deux ne sont separes que de 2 px en hauteur : un zoom, une
   barre de defilement en moins, un arrondi de rendu, et ils se recouvrent.
   38 + 4 de marge : le bouton commence franchement a gauche du degrade. */
.langues .vider-ligne {
  display: flex; justify-content: flex-end;
  /* 🔴 12 px, PAS 2 (Elliott, 2026-09-02 : « quand la page arrive le tout
     decocher est par dessus la barre... mets-le en dessous de la barre »).
     ✅ Mesure, barre de defilement forcee visible : la barre du rail occupe
     619 -> 634 et le bouton commencait a 636. DEUX pixels. Le track gris
     s'etend sur toute la largeur et passe donc juste derriere le libelle : a
     cette distance, le bouton se lit « sur » la barre au lieu d'etre dessous.
     ⚠️ Ca depend du reglage macOS « Afficher les barres de defilement » : en
     mode superpose la barre ne reserve aucune hauteur, en mode permanent elle
     en prend 15. 12 px degagent le bouton dans les deux cas. */
  margin-top: 12px;
  padding-right: 42px;
}
.langues .vider[hidden] { display: none; }
.langues .vider {
  border: 0; background: none; padding: 3px 0; margin: 0; cursor: pointer;
  font: inherit; font-size: 11px; line-height: 1.3; color: var(--gris);
  text-decoration: underline; text-underline-offset: 2px;
}
.langues .vider:hover, .langues .vider:focus-visible { color: var(--encre); }
/* Sur grand écran le tiroir n'est pas un tiroir : on cache sa poignée. */
.langues .tiroir > summary { list-style: none; }
.langues .tiroir > summary::-webkit-details-marker { display: none; }
.langues .tiroir[open] > summary { display: none; }

@media (max-width: 760px) {
  /* Sur téléphone la poignée reste, ouverte comme fermée : c'est elle qui
     permet de refermer pour retrouver la carte. */
  .langues .tiroir[open] > summary { display: flex; }
  .langues .tiroir > summary::after {
    content: "";
    margin-left: auto;
    width: 9px; height: 9px;
    border-right: 2px solid var(--gris);
    border-bottom: 2px solid var(--gris);
    transform: rotate(45deg);
  }
  .langues .tiroir[open] > summary::after { transform: rotate(-135deg); }

  /* Les lignes de liste passent en UNE colonne. En deux, l'étiquette de droite
     (« ILS ÉCRIVENT DANS LA LEUR », sur deux lignes) mangeait la largeur et le
     texte se retrouvait dans une colonne étroite, étirée sur toute la hauteur —
     c'est le défaut qu'Elliott a entouré sur sa capture du 2026-08-30. */
      
  .langues .legende { padding: 7px 13px 8px; gap: 3px 10px; font-size: 10px; }

  /* ⚠️ LA CARTE SE FAIT GLISSER SUR TÉLÉPHONE, elle ne rétrécit plus.
     ✅ Mesuré le 2026-08-30, et c'est Elliott qui l'a signalé : à 375 px de
     large, la carte du monde rendait **273 × 120 px**. Le contenu principal de
     la page était illisible — on ne distinguait aucun pays, et on ne pouvait
     en toucher aucun. Le ratio d'une projection Equal Earth (1000/441) est tel
     qu'aucune marge grattée ne suffit : à pleine largeur d'écran elle ferait
     encore 165 px de haut.
     Elle est donc affichée à 210 % et le doigt la déplace, comme toute carte
     sur téléphone. Le défilement est LOCAL au cadre : la page, elle, ne bouge
     pas latéralement (mesuré : scrollWidth = innerWidth). */
  .langues .porte-carte {
    padding: 0;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    -webkit-overflow-scrolling: touch;
  }
  .langues svg.monde { width: 210%; min-width: 660px; }

  /* L'indice, sinon personne ne devine qu'on peut la déplacer. */
  .langues .glisse {
    display: block;
    font-size: 12px;
    color: var(--gris);
    text-align: center;
    padding: 7px 10px 0;
  }
}
@media (prefers-reduced-motion: reduce) {
  .langues * { transition: none !important; }
}