/* shared/i18n.css — selecteur de langue en en-tete (chantier i18n, 24/09/2026).
   Proprietes logiques (inset-inline-*, text-align:start) : basculent seules
   quand html[dir="rtl"] est pose pour l'arabe. */

.ep-langue { position: relative; display: inline-block; margin-inline-start: .5rem; }

.ep-langue-btn {
  background: rgba(255, 255, 255, .08);
  border: 1px solid rgba(255, 255, 255, .18);
  color: inherit;
  border-radius: 999px;
  cursor: pointer;
  padding: .3rem .62rem;
  font: inherit;
  line-height: 1.2;
  display: inline-flex;
  align-items: center;
  gap: .35rem;
}
.ep-langue-btn:hover,
.ep-langue-btn:focus-visible {
  background: rgba(255, 255, 255, .17);
  outline: 2px solid rgba(255, 255, 255, .35);
  outline-offset: 1px;
}
.ep-langue-btn .ep-drapeau { font-size: 1.15rem; line-height: 1; }
/* Cible tactile : 44 x 44 px minimum (WCAG 2.5.5, recommandations Apple et
   Google). Le bouton mesurait 38 x 29 px en telephone (25/09/2026). */
.ep-langue-btn { min-height: 44px; min-width: 44px; justify-content: center; }
/* Drapeau sans emoji (corse, tete de Maure) : image aux proportions d'un drapeau. */
.ep-drapeau-img { display: block; width: 1.3em; height: auto; border-radius: 2px; }
.ep-langue-btn .ep-drapeau-img { width: 1.45rem; }
#ep-langue-menu .ep-drapeau-img { width: 1.45rem; }
/* Noms de langue dans leur ecriture (العربية, 中文...) : micro-polices de
   quelques Ko, telechargees seulement quand le menu s'ouvre. */
#ep-langue-menu button span:last-child { font-family: "Exo 2", 'EP Langues', system-ui, sans-serif; }
.ep-langue-btn .ep-code { font-size: .72rem; letter-spacing: .07em; opacity: .85; }

#ep-langue-menu {
  position: absolute;
  inset-inline-end: 0;
  inset-block-start: calc(100% + .4rem);
  min-width: 11.5rem;
  max-height: calc(100vh - 6rem);   /* jusqu'a 24 langues : jamais plus haut que l'ecran */
  overflow-y: auto;
  z-index: 3000;
  padding: .3rem;
  margin: 0;
  list-style: none;
  border-radius: .7rem;
  background: #14161f;
  border: 1px solid rgba(255, 255, 255, .16);
  box-shadow: 0 10px 30px rgba(0, 0, 0, .5);
}
/* Deux colonnes (Rudolf, 25/09/2026) : 18 langues actives et plus a venir,
   une seule colonne obligeait a faire defiler sur telephone. Remplissage par
   lignes (fr | co, fr-ca | en...) pour garder l'ordre de I18N_LANGUES. */
#ep-langue-menu:not([hidden]) {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: .2rem;
  min-width: 21rem;
}
#ep-langue-menu button span:last-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#ep-langue-menu[hidden] { display: none; }
#ep-langue-menu li { margin: 0; }
#ep-langue-menu button {
  width: 100%;
  display: flex;
  align-items: center;
  gap: .55rem;
  background: none;
  border: 0;
  color: #e9ecf5;
  cursor: pointer;
  padding: .46rem .6rem;
  border-radius: .45rem;
  font: inherit;
  text-align: start;
}
#ep-langue-menu button:hover,
#ep-langue-menu button:focus-visible {
  background: rgba(255, 255, 255, .13);
}
#ep-langue-menu button[aria-current="true"] { font-weight: 700; }
#ep-langue-menu .ep-drapeau { font-size: 1.15rem; line-height: 1; }

@media (max-width: 560px) {
  .ep-langue-btn .ep-code { display: none; }
  .ep-langue-btn { padding: .28rem .4rem; }
  #ep-langue-menu button { min-height: 44px; }
  /* 24 langues declarees : le menu ne doit jamais depasser l'ecran du telephone. */
  #ep-langue-menu { max-height: calc(100dvh - 5.5rem); overflow-y: auto; overscroll-behavior: contain; }
  #ep-langue-menu {
    position: fixed;
    inset-inline-end: .6rem;
    inset-block-start: 4.4rem;
    min-width: 12rem;
  }
  /* Telephone : les deux colonnes tiennent dans l'ecran, 0,6rem de marge de chaque cote. */
  #ep-langue-menu:not([hidden]) { min-width: 0; width: min(21rem, calc(100vw - 1.2rem)); }
}

/* Arabe : inversion globale du sens de lecture. Le chantier complet de mise en
   page inversee (287 proprietes directionnelles dans les 19 feuilles de style)
   n'est pas fait : l'arabe ne doit pas etre ouvert au public avant. */
html[dir="rtl"] body { direction: rtl; }

/* Polices des ecritures non latines. Servies localement : la politique de
   securite du site (Content-Security-Policy) interdit Google Fonts.
   unicode-range garantit qu'un visiteur francais ne telecharge aucun de ces fichiers.
   Fichiers poses le 25/09/2026 : sous-ensembles Noto Sans (OFL) limites aux caracteres
   reellement traduits, construits par tools/polices/construire-polices.py (a relancer
   apres chaque vague de traduction). Tailles au 25/09 : arabe 66 Ko, devanagari 98 Ko,
   chinois 298 Ko, hebreu 9 Ko, cyrillique 18 Ko, japonais 59 Ko et coreen 15 Ko (kana et
   jamo seuls : a reconstruire des que traductions-ja/ko.json arrivent), latin africain
   66 Ko, Exo 2 latin etendu 17 Ko, Exo 2 vietnamien 9 Ko. Licences a cote des fichiers. */
@font-face {
  font-family: 'EP Arabe'; font-display: swap;
  src: url('/assets/accueil/fonts/NotoSansArabic-subset.woff2') format('woff2');
  unicode-range: U+0600-06FF, U+0750-077F, U+FB50-FDFF, U+FE70-FEFF;
}
@font-face {
  font-family: 'EP Devanagari'; font-display: swap;
  src: url('/assets/accueil/fonts/NotoSansDevanagari-subset.woff2') format('woff2');
  unicode-range: U+0900-097F, U+A8E0-A8FF;
}
@font-face {
  font-family: 'EP Chinois'; font-display: swap;
  src: url('/assets/accueil/fonts/NotoSansSC-subset.woff2') format('woff2');
  unicode-range: U+4E00-9FFF, U+3000-303F, U+FF00-FFEF;
}
@font-face {
  font-family: 'EP Hebreu'; font-display: swap;
  src: url('/assets/accueil/fonts/NotoSansHebrew-subset.woff2') format('woff2');
  unicode-range: U+0590-05FF, U+FB1D-FB4F;
}
@font-face {
  font-family: 'EP Cyrillique'; font-display: swap;
  src: url('/assets/accueil/fonts/NotoSans-cyrillic-subset.woff2') format('woff2');
  unicode-range: U+0400-045F, U+0460-052F, U+2DE0-2DFF, U+A640-A69F;
}
/* Le latin de ces pages (Elite Prime, ERM, chiffres) reste en Exo 2 : chaque police
   EP ne couvre que son ecriture (unicode-range), le reste passe a la suivante.
   (« Exo2 » sans espace etait une faute de nom : la famille est « Exo 2 ».) */
@font-face {
  font-family: 'EP Japonais'; font-display: swap;
  src: url('/assets/accueil/fonts/NotoSansJP-subset.woff2') format('woff2');
  unicode-range: U+3000-30FF, U+31F0-31FF, U+4E00-9FFF, U+FF00-FFEF;
}
@font-face {
  font-family: 'EP Coreen'; font-display: swap;
  src: url('/assets/accueil/fonts/NotoSansKR-subset.woff2') format('woff2');
  unicode-range: U+1100-11FF, U+3130-318F, U+AC00-D7AF, U+3000-303F, U+FF00-FFEF;
}
/* Latin africain (ewe, kabiye, ntcham, soussou, ghomala', bamoun) : ɖ ɛ ɔ ŋ ƒ ʋ ɣ ɩ ʊ et
   tons combinants. Mesure du 25/09 : Exo 2 en manque 20 meme en version complete, Orbitron 30.
   Pour ces langues TOUT le texte passe en Noto Sans (sinon un mot melangerait deux dessins). */
@font-face {
  font-family: 'EP Afrique'; font-display: swap;
  src: url('/assets/accueil/fonts/NotoSans-afrique-subset.woff2') format('woff2');
  unicode-range: U+0000-036F, U+1E00-1EFF, U+2000-206F, U+20AC, U+A700-A7FF;
}
/* Polonais, roumain (et le ŋ du wolof) : plage latin-ext officielle d'Exo 2, rattachee a la
   MEME famille. Exo2.woff2 (latin seul) manquait 16 lettres polonaises et 9 roumaines. */
@font-face {
  font-family: "Exo 2"; font-weight: 100 900; font-display: swap;
  src: url('/assets/accueil/fonts/Exo2-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308,
                 U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0,
                 U+2113, U+2C60-2C7F, U+A720-A7FF;
}
html[lang="ja"] body { font-family: 'EP Japonais', "Exo 2", system-ui, sans-serif; }
html[lang="ko"] body { font-family: 'EP Coreen', "Exo 2", system-ui, sans-serif; }
/* Hangul : sans keep-all, Chromium coupe entre deux syllabes (« 시작하 / 기 ») et detache
   les particules. keep-all ne coupe qu'aux espaces, comme le veut l'usage coreen (25/09/2026). */
html[lang="ko"] body { word-break: keep-all; overflow-wrap: break-word; }
/* « 1위 » (ko), « 1位 » (ja) et « 1. » (de, pl, ro) : l'exposant ne vaut que pour « 1er » ; en exposant le point se lisait « 1· ». */
html:is([lang="ko"], [lang="ja"], [lang="de"], [lang="pl"], [lang="ro"]) .rk .nm small sup { vertical-align: baseline; font-size: inherit; }
html[lang="ja"] { --orb: Orbitron, 'EP Japonais', "Segoe UI", Arial, sans-serif; }
html[lang="ko"] { --orb: Orbitron, 'EP Coreen', "Segoe UI", Arial, sans-serif; }
html:is([lang="kbp"], [lang="ee"], [lang="bud"], [lang="sus"], [lang="bbj"], [lang="bax"]) body {
  font-family: 'EP Afrique', system-ui, sans-serif; }
html:is([lang="kbp"], [lang="ee"], [lang="bud"], [lang="sus"], [lang="bbj"], [lang="bax"]) {
  --orb: 'EP Afrique', "Segoe UI", Arial, sans-serif; }
/* Orbitron n'a aucune lettre polonaise ou roumaine accentuee : titres en Exo 2, comme le vietnamien. */
html:is([lang="pl"], [lang="ro"]) { --orb: "Exo 2", "Segoe UI", Arial, sans-serif; }
/* Wolof : seul ŋ manque a Orbitron ; il est pris par Exo 2 (latin-ext) au lieu d'une police systeme. */
html[lang="wo"] { --orb: Orbitron, "Exo 2", "Segoe UI", Arial, sans-serif; }
html[lang="ar"] body { font-family: 'EP Arabe', "Exo 2", system-ui, sans-serif; }
html[lang="hi"] body { font-family: 'EP Devanagari', "Exo 2", system-ui, sans-serif; }
html[lang="zh"] body { font-family: 'EP Chinois', "Exo 2", system-ui, sans-serif; }
html[lang="he"] body { font-family: 'EP Hebreu', "Exo 2", system-ui, sans-serif; }
html[lang="ru"] body { font-family: 'EP Cyrillique', "Exo 2", system-ui, sans-serif; }
/* Titres (variable --orb des pages) : Orbitron n'a que le latin. Sans ceci, les mots
   arabes, chinois, russes... des titres tombaient sur la police du systeme. Orbitron
   garde le latin, la police EP prend le reste, mot par mot (jamais lettre par lettre :
   les deux ecritures ne se melangent pas dans un meme mot). */
html[lang="ar"] { --orb: Orbitron, 'EP Arabe', "Segoe UI", Arial, sans-serif; }
html[lang="hi"] { --orb: Orbitron, 'EP Devanagari', "Segoe UI", Arial, sans-serif; }
html[lang="zh"] { --orb: Orbitron, 'EP Chinois', "Segoe UI", Arial, sans-serif; }
html[lang="he"] { --orb: Orbitron, 'EP Hebreu', "Segoe UI", Arial, sans-serif; }
html[lang="ru"] { --orb: Orbitron, 'EP Cyrillique', "Segoe UI", Arial, sans-serif; }

/* ── VIETNAMIEN (25/09/2026) ─────────────────────────────────────────────────
   Le vietnamien empile les diacritiques (ế, ặ, ữ). Mesure faite sur les fichiers :
   Exo2.woff2 (sous-ensemble latin) manque 101 des 134 lettres vietnamiennes,
   Orbitron.woff2 en manque 102, et Orbitron n'existe PAS en vietnamien, meme en
   version complete. D'ou :
   - le texte courant garde Exo 2 : on lui ajoute sa plage vietnamienne officielle
     (meme police, meme dessin, 9 Ko), rattachee a la MEME famille « Exo 2 » par
     unicode-range. Aucun visiteur non vietnamien ne la telecharge.
   - les titres passent d'Orbitron a Exo 2 gras : sinon « TRẬN ĐẤU » melangerait les
     lettres d'Orbitron et celles d'une police de secours dans un meme mot. Exo 2 est
     deja la police de marque du texte courant : l'identite reste celle du site. */
@font-face {
  font-family: "Exo 2"; font-weight: 100 900; font-display: swap;
  src: url('/assets/accueil/fonts/Exo2-vietnamese.woff2') format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1,
                 U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329,
                 U+1EA0-1EF9, U+20AB;
}
html[lang="vi"] { --orb: "Exo 2", "Segoe UI", Arial, sans-serif; }
html[lang="vi"] body { font-family: "Exo 2", system-ui, sans-serif; }

/* Micro-polices du menu de langues (famille « EP Langues ») : chacune ne contient
   que le nom de SA langue (العربية, עברית, 中文, हिन्दी, Русский), 1 a 10 Ko. */
@font-face { font-family: 'EP Langues'; font-display: swap; src: url('/assets/accueil/fonts/EPLangues-arabe.woff2') format('woff2'); unicode-range: U+0600-06FF, U+FB50-FDFF, U+FE70-FEFF; }
@font-face { font-family: 'EP Langues'; font-display: swap; src: url('/assets/accueil/fonts/EPLangues-hebreu.woff2') format('woff2'); unicode-range: U+0590-05FF; }
@font-face { font-family: 'EP Langues'; font-display: swap; src: url('/assets/accueil/fonts/EPLangues-chinois.woff2') format('woff2'); unicode-range: U+4E2D, U+6587; }
@font-face { font-family: 'EP Langues'; font-display: swap; src: url('/assets/accueil/fonts/EPLangues-japonais.woff2') format('woff2'); unicode-range: U+65E5, U+672C, U+8A9E; }
@font-face { font-family: 'EP Langues'; font-display: swap; src: url('/assets/accueil/fonts/EPLangues-coreen.woff2') format('woff2'); unicode-range: U+AC00-D7AF; }
@font-face { font-family: 'EP Langues'; font-display: swap; src: url('/assets/accueil/fonts/EPLangues-devanagari.woff2') format('woff2'); unicode-range: U+0900-097F; }
@font-face { font-family: 'EP Langues'; font-display: swap; src: url('/assets/accueil/fonts/EPLangues-cyrillique.woff2') format('woff2'); unicode-range: U+0400-045F; }

/* Le wolof s'ecrit en alphabet latin (avec ñ et ŋ) : aucune police
   supplementaire n'est necessaire, Exo 2 suffit. Le corse aussi (à è ì ò ù,
   chj, ghj) : couvert par le sous-ensemble latin d'Exo 2 et d'Orbitron. */

/* ── Langues longues : le russe et l'allemand debordent des boutons ──────────
   Un bouton dimensionne sur « JOUER » (5 lettres) recoit « ИГРАТЬ » (6) et
   « Se connecter » devient « Anmelden » ou « Войти ». Les libelles courts sont
   la ou ca casse : on laisse le bouton grandir plutot que rogner le texte. */
html[lang="ru"] .btn,
html[lang="de"] .btn,
html[lang="es"] .btn,
html[lang="hi"] .btn,
html[lang="ar"] .btn,
html[lang="he"] .btn,
html[lang="wo"] .btn,
html[lang="vi"] .btn,
html[lang="co"] .btn,
html[lang="it"] .btn,
html[lang="pl"] .btn,
html[lang="ro"] .btn,
html[lang="fr-ca"] .btn { white-space: normal; }

/* ── EN-TETE EN TELEPHONE (25/09/2026) ───────────────────────────────────────
   Mesure en 390 x 844 : la rangee logo + selecteur + retour + JOUER ne passait
   jamais a la ligne, la page debordait de 27 px en francais, 37 en russe, 61 en
   allemand, et le bouton or etait coupe (« SPIE... »). Aucune traduction n'est
   raccourcie : on resserre les marges, puis, si cela ne suffit toujours pas
   (langue longue), la navigation passe sous le logo au lieu de sortir de l'ecran.
   Ecrit ici, et non dans chaque page, parce que ce fichier est charge APRES les
   styles de toutes les pages traduites. */
@media (max-width: 560px) {
  .tete .wrap { flex-wrap: wrap; row-gap: 4px; column-gap: 8px; padding-inline: 12px; }
  .tete nav { flex-wrap: wrap; justify-content: flex-end; gap: 6px; min-width: 0; margin-inline-start: auto; }
  .tete .btn { padding-inline: 12px; }
  .tete .btn.or { padding-inline: 14px; letter-spacing: .06em; }
  .tete .ep-langue { margin-inline-start: 0; }
  .tete .ep-langue-btn { padding-inline: .3rem; }
  /* Une ligne orpheline ne doit pas coller au bord : la 2e rangee garde un souffle. */
  .tete .wrap { padding-block: 6px; }
  /* Hub des jeux (jeux/index.php, en-tete .ep-head) : le logo se coupait en deux
     lignes en allemand (« ELITE / PRIME ») et le lien Accueil faisait 28 px de haut. */
  .ep-head { flex-wrap: wrap; row-gap: 6px; column-gap: 10px; }
  .ep-head b { white-space: nowrap; font-size: 17px; }
  .ep-head .tag { min-height: 44px; display: inline-flex; align-items: center; }
  .ep-head .ep-langue { margin-inline-start: 0; }
  /* Mentions legales (.ml-header) : le logo se coupait en deux lignes en allemand. */
  .ml-header .ml-logo { white-space: nowrap; }
}
/* Logo de l'accueil en inline-flex (accueil.css) : l'espace entre « ELITE » et
   « PRIME » tombe en bord d'element flex et disparait (« ELITEPRIME »). Le gap le
   rend ; sans effet sur les logos des autres pages, qui ne sont pas en flex. */
.tete .logo { column-gap: .3em; }

/* Japonais : finition typographique (controle de forme, 25/09/2026). Les selecteurs commencent par html[lang]
   pour l'emporter sur les styles propres a chaque page, declares apres ce fichier. */
html[lang="ja"] body { line-break: strict; }                         /* jamais « ー » ni petit kana en debut de ligne */
html[lang="ja"] :is(h1, h2, h3, h4, .btn, th, dt, .game .meta, .game .elo, .game .sub, .etape h3) {
  word-break: auto-phrase; text-wrap: balance; }
html[lang="ja"] table th { white-space: nowrap; }                    /* sinon l'intitule tombe a 2 caracteres par ligne */
html[lang="ja"] .tete nav .btn { padding: 0 11px; letter-spacing: 0; }  /* en-tete mobile sur une ligne */
html[lang="ja"] .rideau .titre { max-width: none; letter-spacing: .04em; }
html[lang="ja"] q { quotes: "「" "」" "『" "』"; }
html[lang="ja"] :is(q, em, i, .carte-texte q) { font-style: normal; }  /* pas d'italique en japonais : le penche synthetique est laid */
html[lang="ja"] em { font-weight: 700; }
/* Liens de pied de page : jamais coupes en plein libelle (toutes langues, francais compris). */
:is(.ml-pied, .liens) a { white-space: nowrap; display: inline-block; }

/* Panneau « traduction incomplete » (langues de I18N_INCOMPLETES, Rudolf 25/09/2026).
   Bas d'ecran, ne masque jamais l'en-tete ; fermable. */
.ep-trad-incomplete {
  position: fixed; z-index: 2900; inset-inline: .6rem; bottom: .6rem;
  max-width: 44rem; margin-inline: auto;
  padding: .75rem 2.6rem .75rem 1rem; border-radius: .7rem;
  background: #2a2210; color: #f3e6c4; border: 1px solid #c9a54a;
  box-shadow: 0 10px 30px rgba(0, 0, 0, .55);
  font: .88rem/1.45 "Exo 2", system-ui, sans-serif;
}
.ep-trad-incomplete[hidden] { display: none; }
.ep-trad-incomplete p { margin: 0 0 .35rem; }
.ep-trad-incomplete .ep-trad-en { opacity: .75; font-size: .8rem; }
.ep-trad-signaler { color: #ffd66b; font-weight: 700; text-decoration: underline; }
.ep-trad-fermer {
  position: absolute; top: .3rem; inset-inline-end: .3rem; min-width: 44px; min-height: 44px;
  background: none; border: 0; color: inherit; font-size: 1.5rem; line-height: 1; cursor: pointer;
}

/* Familles de langues (Rudolf, 25/09/2026) : la langue de base puis ses variantes
   regionales en petits drapeaux (FR | CA ; EN | IE US CA), sur toute la largeur. */
#ep-langue-menu:not([hidden]) { grid-auto-flow: row dense; }
#ep-langue-menu li.ep-famille { grid-column: 1 / -1; display: flex; align-items: center; gap: .2rem; }
#ep-langue-menu li.ep-famille > button:first-child { flex: 1 1 auto; width: auto; }
#ep-langue-menu li.ep-famille > button.ep-variante {
  flex: 0 0 auto; width: auto; padding-inline: .45rem; gap: .3rem;
  font-size: .78rem; letter-spacing: .04em; opacity: .9;
}

/* Bouton « Aider à traduire » (traducteurs invités seulement, Rudolf 25/09/2026). */
.ep-aider-traduire {
  display: inline-flex; align-items: center; min-height: 44px; padding: 0 .9rem; margin-inline-end: .4rem;
  border-radius: 999px; border: 1px solid #c9a54a; color: #ffd66b; text-decoration: none;
  font: 600 .85rem/1 "Exo 2", system-ui, sans-serif; background: rgba(201, 165, 74, .12); vertical-align: middle;
}
.ep-aider-traduire:hover, .ep-aider-traduire:focus-visible { background: rgba(201, 165, 74, .25); }
@media (max-width: 560px) { .ep-aider-traduire { padding: 0 .6rem; font-size: .78rem; } }