/*
 * Site Lokolé (lokole.mobilemoney.co) — le CSS PROPRE au site, chargé APRÈS site.css et site-header.css (copies à l'octet
 * de www, jamais modifiées ici). Tout part des jetons de site.css (--bg, --bg2, --bg3, --ink, --ink2, --ink3, --border,
 * --card-bg, --card-border, --shadow-card, --max, --r-card, --r-md, --r-sm, --r-xs, --r-pill) et du thème [data-theme] sur
 * <html> : clair et sombre. La grammaire visuelle est celle de Culture (bandeau centré, logo rond, titre en dégradé,
 * sections aérées, cartes), avec l'identité du tambour : le BOIS (ambre) et l'ONDE (cyan).
 * ☠️ RTL : aucune propriété physique (left/right) — tout est logique (inline-start/end, inset-inline) ; l'arabe se lit par
 * [dir="rtl"] posé sur <html>. ☠️ Rayons : les jetons de l'échelle seulement (garde arrondisEchelleUniqueSites).
 * ☠️ Couleurs de la carte : une rampe SÉQUENTIELLE d'une seule teinte (bleu), claire → foncée en thème clair, foncée →
 * claire en thème sombre ; les états sans valeur sont gris ET hachurés (jamais la couleur seule).
 */

:root {
  --lk-bois: #B45309;
  --lk-onde: #0E7490;
  --lk-degrade: linear-gradient(90deg, #F59E0B, #0891B2);
  --lk-q1: #86b6ef; --lk-q2: #5598e7; --lk-q3: #2a78d6; --lk-q4: #1c5cab; --lk-q5: #104281;
  --lk-q-encre-claire: #0D0D0E; --lk-q-encre-foncee: #FFFFFF;
  --lk-gris: var(--bg3);
  --lk-hachure: repeating-linear-gradient(45deg, transparent 0 6px, rgba(0,0,0,.07) 6px 8px);
}
[data-theme="dark"] {
  --lk-bois: #FBBF24;
  --lk-onde: #22D3EE;
  --lk-degrade: linear-gradient(90deg, #FDE68A, #22D3EE);
  --lk-q1: #184f95; --lk-q2: #256abf; --lk-q3: #3987e5; --lk-q4: #6da7ec; --lk-q5: #9ec5f4;
  --lk-hachure: repeating-linear-gradient(45deg, transparent 0 6px, rgba(255,255,255,.08) 6px 8px);
}

/* La marque du site dans la barre commune (le nom du tambour), en dégradé bois → onde. */
header.nav[data-mm-site="lokole"] .brand-name { background-image: linear-gradient(90deg, #FBBF24, #22D3EE); }
html[data-theme="light"] header.nav[data-mm-site="lokole"] .brand-name { background-image: linear-gradient(90deg, #B45309, #0E7490); }
[dir="rtl"] .lang-drop-menu { inset-inline-start: 0; inset-inline-end: auto; }

.lk-main { display: block; text-align: start; min-width: 0; width: 100%; box-sizing: border-box; }
/* ☠️ MESURÉ à 390 px (30/09) : `body` est un conteneur flex dans site.css — sans `min-width: 0`, `main` prenait la largeur
   de son tableau (463 px) et la page défilait de côté. Le tableau défile désormais DANS sa boîte.
   ☠️ Et `main` est lui-même flex (colonne) dans le chrome commun : ses sections ont besoin du même `min-width: 0`
   (mesuré : le podium du direct portait l'accueil à 536 px). */
.lk-main > * { min-width: 0; }

/* ── Bandeau (la grammaire de Culture) ── */
.lk-hero { position: relative; overflow: hidden; background: var(--bg); }
.lk-hero-inner {
  position: relative; z-index: 1; max-width: var(--max); margin: 0 auto; padding: 84px 20px 64px;
  display: flex; flex-direction: column; align-items: center; text-align: center;
}
.lk-hero-logo { width: 96px; height: 96px; margin-bottom: 20px; border-radius: 50%; box-shadow: 0 16px 48px rgba(8,145,178,.35); }
.lk-surtitre { margin-bottom: 4px; }
.lk-hero-titre {
  font-family: 'Gotu', 'Inter', sans-serif;
  font-size: clamp(2.8rem, 7vw, 4.6rem); font-weight: 800; line-height: 1.05; letter-spacing: -.02em;
  margin: 6px 0 14px;
  background: var(--lk-degrade); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent;
}
@supports not ((-webkit-background-clip: text) or (background-clip: text)) {
  .lk-hero-titre { color: var(--ink); background: none; -webkit-text-fill-color: currentColor; }
}
.lk-hero-lead { max-width: 560px; margin: 0 auto 28px; font-size: 1.12rem; }
.lk-hero-actions { justify-content: center; margin-bottom: 0; }

/* ── Sections ── */
.lk-section { width: 100%; max-width: var(--max); margin: 0 auto; padding: 56px 20px; }
/* ☠️ `width: 100%` : dans la colonne flex de `main`, une marge `auto` annule l'étirement et la section prenait sa largeur
   de contenu (mesuré : 536 px à 390 px d'écran). */
.lk-section h2 {
  font-size: clamp(1.5rem, 3vw, 2.1rem); font-weight: 800; letter-spacing: -.02em; line-height: 1.2; color: var(--ink);
  margin-bottom: 8px; display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
}
.lk-section-sous { color: var(--ink2); margin-bottom: 24px; }
.lk-section-tete { margin-bottom: 8px; }
.lk-plus { margin-top: 20px; }
.lk-vide { color: var(--ink2); padding: 18px 20px; background: var(--bg2); border: 1px dashed var(--border); border-radius: var(--r-md); }

/* Le point qui bat : « en direct ». Immobile si le visiteur demande moins de mouvement. */
.lk-pulse { display: inline-block; width: 10px; height: 10px; border-radius: 50%; background: #10B981; box-shadow: 0 0 0 0 rgba(16,185,129,.6); animation: lk-pulse 2s infinite; flex: none; }
@keyframes lk-pulse { 0% { box-shadow: 0 0 0 0 rgba(16,185,129,.55); } 70% { box-shadow: 0 0 0 10px rgba(16,185,129,0); } 100% { box-shadow: 0 0 0 0 rgba(16,185,129,0); } }

/* ── Podium du direct ── */
.lk-direct { background: var(--bg2); max-width: none; }
.lk-direct > * { max-width: var(--max); margin-inline: auto; }
.lk-podiums { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 16px; }
.lk-podium {
  background: var(--card-bg); border: 1px solid var(--card-border); border-radius: var(--r-card);
  padding: 22px 20px; box-shadow: var(--shadow-card); position: relative; overflow: hidden;
}
html:not([data-theme="dark"]) .lk-podium { background: var(--bg); }
.lk-podium::before { content: ""; position: absolute; inset-block-start: 0; inset-inline: 0; height: 4px; background: var(--lk-degrade); }
.lk-podium-dernier::before { background: var(--bg3); }
.lk-podium-etiquette { font-size: .74rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--ink3); margin-bottom: 8px; }
.lk-podium-nom { font-size: 1.35rem; font-weight: 800; color: var(--ink); margin-bottom: 6px; overflow-wrap: anywhere; }
.lk-podium-chiffre { font-size: 2.4rem; font-weight: 900; font-variant-numeric: tabular-nums; color: var(--ink); }
.lk-podium-unite { color: var(--ink2); font-size: .9rem; }
.lk-podium-n { color: var(--ink3); font-size: .85rem; margin-top: 4px; }

/* ── Le Tambour : quatre carreaux, un nom et une image ── */
.lk-tambours-liste { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
@media (max-width: 900px) { .lk-tambours-liste { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 420px) { .lk-tambours-liste { grid-template-columns: 1fr; } }
.lk-tambour {
  display: flex; flex-direction: column; gap: 6px; padding: 20px 18px;
  background: var(--card-bg); border: 1px solid var(--card-border); border-radius: var(--r-card);
}
.lk-tambour-nom { font-family: 'Gotu', 'Inter', sans-serif; font-size: 1.3rem; font-weight: 800; color: var(--lk-bois); }
.lk-tambour-image { color: var(--ink2); font-size: .92rem; line-height: 1.5; }

.lk-carte-methode {
  display: flex; flex-direction: column; align-items: flex-start; gap: 10px; padding: 28px 24px;
  background: var(--card-bg); border: 1px solid var(--card-border); border-radius: var(--r-card);
}
.lk-carte-methode p { color: var(--ink2); }

/* ── Classements : tête, bascule liste/carte ── */
.lk-main-charts, .lk-main-methode { max-width: var(--max); margin: 0 auto; padding: 32px 16px 64px; }
.lk-charts-tete { margin-bottom: 18px; }
.lk-charts-titre { font-size: clamp(1.7rem, 4vw, 2.4rem); font-weight: 800; letter-spacing: -.02em; line-height: 1.15; color: var(--ink); margin-bottom: 8px; }
.lk-charts-chapo { color: var(--ink2); max-width: 720px; margin-bottom: 14px; }
.lk-bientot-debit { color: var(--ink3); }
.lk-modes { display: inline-flex; gap: 4px; padding: 4px; background: var(--bg2); border: 1px solid var(--border); border-radius: var(--r-pill); }
.lk-mode {
  display: inline-flex; align-items: center; gap: 8px; padding: 8px 16px; border-radius: var(--r-pill);
  color: var(--ink2); font-weight: 700; font-size: .92rem; text-decoration: none;
}
.lk-mode:hover { color: var(--ink); }
.lk-mode--actif { color: #fff; background: linear-gradient(135deg, #0891B2, #2563EB); }
.lk-mode:focus-visible { outline: 2px solid var(--lk-onde); outline-offset: 2px; }
.lk-filtres { margin-bottom: 18px; }

.lk-resultats-titre { font-size: 1.2rem; font-weight: 800; color: var(--ink); margin-bottom: 6px; }
.lk-meta { margin-bottom: 14px; }
.lk-meta-ligne { color: var(--ink2); font-size: .92rem; display: flex; flex-wrap: wrap; gap: 4px 8px; align-items: center; }
.lk-maj { display: inline-flex; align-items: center; gap: 6px; }
.lk-meta-note { color: var(--ink3); font-size: .84rem; margin-top: 4px; }
.lk-alerte { margin-top: 8px; padding: 8px 12px; border-radius: var(--r-sm); background: rgba(245,158,11,.12); color: var(--ink); font-size: .88rem; }

/* ── Liste ── */
.lk-table-boite { overflow-x: auto; border: 1px solid var(--card-border); border-radius: var(--r-card); background: var(--card-bg); }
.lk-table { width: 100%; border-collapse: collapse; font-size: .95rem; }
.lk-table th, .lk-table td { padding: 12px 14px; text-align: start; border-bottom: 1px solid var(--border); vertical-align: middle; }
.lk-table thead th { font-size: .72rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--ink3); white-space: nowrap; }
.lk-table tbody tr:last-child th, .lk-table tbody tr:last-child td { border-bottom: none; }
.lk-rang { width: 3.2em; font-weight: 900; font-variant-numeric: tabular-nums; color: var(--lk-bois); }
.lk-op { font-weight: 700; color: var(--ink); }
.lk-op-pays { display: block; font-weight: 500; font-size: .82rem; color: var(--ink3); }
.lk-badge { display: inline-block; margin-inline-start: 8px; padding: 2px 8px; border-radius: var(--r-pill); font-size: .7rem; font-weight: 800; letter-spacing: .04em; vertical-align: middle; }
.lk-badge-tete { background: rgba(16,185,129,.16); color: #047857; }
[data-theme="dark"] .lk-badge-tete { color: #6EE7B7; }
.lk-badge-dernier { background: rgba(245,158,11,.16); color: #92400E; }
[data-theme="dark"] .lk-badge-dernier { color: #FCD34D; }
.lk-val { min-width: 150px; }
.lk-valeur { display: block; font-weight: 800; font-variant-numeric: tabular-nums; color: var(--ink); }
.lk-barre { display: block; height: 6px; margin-top: 6px; border-radius: var(--r-pill); background: var(--bg3); overflow: hidden; }
.lk-barre > span { display: block; height: 100%; border-radius: var(--r-pill); background: linear-gradient(90deg, #0891B2, #2563EB); }
.lk-pas-assez { display: block; font-weight: 700; color: var(--ink2); }
.lk-pas-assez-detail { display: block; font-size: .8rem; color: var(--ink3); }
.lk-ligne--sous-seuil .lk-op { color: var(--ink2); }
.lk-n, .lk-sante { font-variant-numeric: tabular-nums; color: var(--ink2); white-space: nowrap; }
.lk-tendance { white-space: nowrap; font-size: .88rem; color: var(--ink2); }
.lk-tendance[data-tendance="hausse"] { color: #047857; }
.lk-tendance[data-tendance="baisse"] { color: #B45309; }
[data-theme="dark"] .lk-tendance[data-tendance="hausse"] { color: #6EE7B7; }
[data-theme="dark"] .lk-tendance[data-tendance="baisse"] { color: #FCD34D; }
@media (max-width: 640px) {
  .lk-table th, .lk-table td { padding: 10px 8px; }
  .lk-tend, .lk-table thead th:last-child { display: none; }
}

.lk-empreinte { margin-top: 14px; font-size: .82rem; color: var(--ink3); overflow-wrap: anywhere; }
.lk-empreinte code, .lk-table-empreintes code { font-size: .78rem; color: var(--ink2); word-break: break-all; }

/* ── Carte : tuiles schématiques ── */
.lk-carte { display: flex; flex-direction: column; gap: 12px; }
.lk-remonter { align-self: flex-start; font-weight: 700; color: var(--lk-onde); text-decoration: none; }
.lk-remonter:hover { text-decoration: underline; }
.lk-carte-groupe { font-size: .76rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--ink3); margin-top: 6px; }
.lk-tuiles { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(132px, 1fr)); gap: 8px; }
.lk-tuile {
  display: flex; flex-direction: column; justify-content: space-between; gap: 6px; min-height: 96px; padding: 12px;
  border-radius: var(--r-md); text-decoration: none; border: 1px solid var(--card-border);
  background: var(--lk-gris); color: var(--ink2); transition: transform .15s ease, box-shadow .15s ease;
}
.lk-tuile:hover, .lk-tuile:focus-visible { transform: translateY(-2px); box-shadow: var(--shadow-card); outline: none; }
.lk-tuile:focus-visible { outline: 2px solid var(--lk-onde); outline-offset: 2px; }
.lk-tuile-nom { font-weight: 800; font-size: .92rem; line-height: 1.25; overflow-wrap: anywhere; }
.lk-tuile-val { font-weight: 800; font-size: 1.05rem; font-variant-numeric: tabular-nums; }
.lk-tuile-n { font-size: .74rem; opacity: .85; }
.lk-tuile[data-etat="pas-assez"], .lk-tuile[data-etat="aucune"], .lk-tuile[data-etat="bientot"] { background-image: var(--lk-hachure); }
.lk-tuile[data-etat="aucune"] .lk-tuile-val, .lk-tuile[data-etat="bientot"] .lk-tuile-val, .lk-tuile[data-etat="pas-assez"] .lk-tuile-val { font-size: .8rem; font-weight: 600; }
.lk-q1 { background-color: var(--lk-q1); color: var(--lk-q-encre-claire); }
.lk-q2 { background-color: var(--lk-q2); color: var(--lk-q-encre-claire); }
.lk-q3 { background-color: var(--lk-q3); color: var(--lk-q-encre-foncee); }
.lk-q4 { background-color: var(--lk-q4); color: var(--lk-q-encre-foncee); }
.lk-q5 { background-color: var(--lk-q5); color: var(--lk-q-encre-foncee); }
[data-theme="dark"] .lk-q1, [data-theme="dark"] .lk-q2 { color: var(--lk-q-encre-foncee); }
[data-theme="dark"] .lk-q3, [data-theme="dark"] .lk-q4, [data-theme="dark"] .lk-q5 { color: var(--lk-q-encre-claire); }
.lk-legende { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; font-size: .8rem; color: var(--ink2); margin-top: 6px; }
.lk-legende-titre { font-weight: 700; color: var(--ink); }
.lk-legende-rampe { display: inline-flex; align-items: center; gap: 3px; }
.lk-legende-rampe > span { margin-inline: 4px; }
.lk-legende i { display: inline-block; width: 18px; height: 12px; border-radius: var(--r-xs); }
.lk-legende-rampe i.lk-q1 { background: var(--lk-q1); } .lk-legende-rampe i.lk-q2 { background: var(--lk-q2); }
.lk-legende-rampe i.lk-q3 { background: var(--lk-q3); } .lk-legende-rampe i.lk-q4 { background: var(--lk-q4); }
.lk-legende-rampe i.lk-q5 { background: var(--lk-q5); }
.lk-legende-etat { display: inline-flex; align-items: center; gap: 6px; }
.lk-legende-etat i { background-color: var(--lk-gris); background-image: var(--lk-hachure); border: 1px solid var(--border); }
.lk-note { color: var(--ink3); font-size: .82rem; }
.lk-bientot { padding: 18px 20px; border-radius: var(--r-md); background-color: var(--lk-gris); background-image: var(--lk-hachure); color: var(--ink2); }
.lk-bientot strong { display: block; color: var(--ink); margin-bottom: 4px; }

/* ── Méthode ── */
.lk-methode { display: flex; flex-direction: column; gap: 22px; max-width: 820px; }
.lk-m-section h2 { font-size: 1.2rem; font-weight: 800; color: var(--ink); margin-bottom: 6px; }
.lk-m-section p { color: var(--ink2); line-height: 1.7; }
.lk-formule { padding: 12px 14px; border-radius: var(--r-md); background: var(--bg2); border: 1px solid var(--border); color: var(--ink) !important; font-weight: 600; margin-bottom: 8px; }
.lk-sous-titre-vue { font-weight: 700; color: var(--ink) !important; margin-top: 8px; }
.lk-table-empreintes { font-size: .85rem; }

/* ── Messages ── */
.lk-message { max-width: 720px; margin: 0 auto; padding: 80px 20px; text-align: center; }
.lk-message h1 { font-size: 1.8rem; font-weight: 800; color: var(--ink); margin-bottom: 10px; }
.lk-message p { color: var(--ink2); margin-bottom: 18px; }

@media (prefers-reduced-motion: reduce) {
  .lk-pulse { animation: none; }
  .lk-tuile { transition: none; }
  .lk-tuile:hover, .lk-tuile:focus-visible { transform: none; }
}