/* ============================================================================
   BNTIC FasoData — feuille de style (vague 3 : identité « Indigo & Latérite »)

   CE QUI CHANGE, ET POURQUOI
   FasoData n'existait qu'en sombre : fond #0b1220, sans alternative ni respect
   de la préférence système. C'est un joli parti pris de « tableau de bord data »
   et c'est le pire cas de lisibilité pour l'usage réel — un téléphone d'entrée
   de gamme, en extérieur, en plein soleil de Ouagadougou.

   Plus structurel : depuis la refonte de CyberAlert, deux services de la même
   maison ne partageaient plus aucun code visuel. Un lecteur qui passait de l'un
   à l'autre changeait d'univers. La palette est désormais commune.

   - Indigo Faso   : la marque, les liens, le calme. Jamais une alerte.
   - Latérite      : la terre rouge. Réservée à ce qui baisse ou alerte.
   - Ocre mil      : l'attention, la nuance.
   - Vert néré     : ce qui progresse.
   - Calicot/Encre : les deux fonds, clair et sombre, tous deux CONÇUS.

   MÉCANIQUE DES THÈMES
   FasoData s'appuie sur Bootstrap 5.3, qui gère nativement les modes de couleur
   via l'attribut `data-bs-theme`. Plutôt que de lutter contre Bootstrap à coups
   de `!important` — ce que faisait l'ancienne feuille — on REDÉFINIT ses
   variables `--bs-*` à partir de nos jetons. Tous les composants Bootstrap
   (cartes, tableaux, formulaires, alertes) suivent alors sans une ligne de
   surcharge.

   Le mode clair est le défaut ; le sombre s'applique si le système le demande
   ou si le lecteur le choisit (bouton dans le pied de page).
   ========================================================================== */

/* ---------------------------------------------------------------- JETONS */
:root,
[data-bs-theme="light"] {
  --fd-paper:      #F3F1EA;   /* calicot */
  --fd-paper-2:    #FBFAF6;
  --fd-surface:    #FFFFFF;
  --fd-ink:        #181D2A;
  --fd-ink-2:      #4A5164;
  --fd-ink-3:      #656C7C;   /* 4,66:1 sur le calicot — lisible en petit corps */
  --fd-line:       #DCD8CD;
  --fd-line-2:     #E9E6DE;

  --fd-indigo:     #1B2A5B;
  --fd-indigo-ink: #FFFFFF;
  --fd-indigo-soft:#E3E7F2;
  --fd-indigo-line:#B9C3DE;

  --fd-laterite:   #A6402A;
  --fd-laterite-soft:#F7E6E1;
  --fd-ochre:      #8A5D0D;
  --fd-ochre-soft: #F8EED8;
  /* Ocre posé SUR l'aplat indigo de la barre de navigation. L'ocre courant
     (#8A5D0D) n'y tient pas : 2,39:1 en clair, 1,03:1 en sombre — le mot
     « FasoData » y devenait presque invisible. Ce jeton s'inverse avec le
     thème, comme la barre elle-même. Mesuré : 7,19:1 en clair. */
  --fd-ochre-on-indigo: #E4B45E;
  --fd-green:      #2A6B4F;
  --fd-green-soft: #E0EFE7;

  /* Encre posée SUR un aplat sémantique : en sombre, les aplats s'éclaircissent
     et l'encre doit devenir foncée, sinon le bandeau devient illisible. */
  --fd-on-accent:  #FFFFFF;

  --fd-radius: 10px;
  --fd-shadow: 0 1px 2px rgba(24,29,42,.05), 0 10px 26px -18px rgba(24,29,42,.35);

  --fd-display: "Bricolage Grotesque", "Helvetica Neue", Arial, sans-serif;
  --fd-body: "Newsreader", Georgia, "Times New Roman", serif;
  --fd-mono: "IBM Plex Mono", ui-monospace, Menlo, Consolas, monospace;

  /* Alias de compatibilité, conservés pour tout code tiers qui lirait encore
     ces noms. fasodata.js, lui, lit désormais les jetons canoniques
     (--fd-surface, --fd-ink, --fd-ink-2, --fd-ink-3) pour habiller les
     graphiques : il écrivait auparavant le thème sombre en dur, ce qui posait
     un rectangle #0b1220 au milieu d'une page claire. */
  --fd-bg: var(--fd-paper);
  --fd-card: var(--fd-surface);
  --fd-accent: var(--fd-ochre);
  --fd-accent2: var(--fd-indigo);
  --fd-text: var(--fd-ink);
  --fd-muted: var(--fd-ink-2);
  --fd-border: var(--fd-line);
}

[data-bs-theme="dark"] {
  --fd-paper:      #12151D;   /* encre */
  --fd-paper-2:    #171B25;
  --fd-surface:    #1B202B;
  --fd-ink:        #ECEAE3;
  --fd-ink-2:      #B2B8C6;
  --fd-ink-3:      #848B9B;
  --fd-line:       #2C323F;
  --fd-line-2:     #242A36;

  --fd-indigo:     #A9BEF0;
  --fd-indigo-ink: #0E1220;
  --fd-indigo-soft:#1D2540;
  --fd-indigo-line:#33406A;

  --fd-laterite:   #EE9077;
  --fd-laterite-soft:#33201B;
  --fd-ochre:      #E4B45E;
  --fd-ochre-soft: #2E2616;
  --fd-ochre-on-indigo: #5A3D08;   /* 5,37:1 sur la barre claire du mode sombre */
  --fd-green:      #84C8A5;
  --fd-green-soft: #172C23;

  --fd-on-accent:  #14100A;
  --fd-shadow: 0 1px 2px rgba(0,0,0,.45), 0 12px 30px -20px rgba(0,0,0,.9);
}

/* ------------------------------------------------- pont vers Bootstrap 5.3
   Une seule passe : tous les composants Bootstrap héritent de nos jetons. */
:root, [data-bs-theme="light"], [data-bs-theme="dark"] {
  --bs-body-bg: var(--fd-paper);
  --bs-body-color: var(--fd-ink);
  --bs-body-font-family: var(--fd-body);
  --bs-emphasis-color: var(--fd-ink);
  --bs-secondary-color: var(--fd-ink-2);
  --bs-tertiary-color: var(--fd-ink-3);
  --bs-border-color: var(--fd-line);
  --bs-border-color-translucent: var(--fd-line);
  --bs-link-color: var(--fd-indigo);
  --bs-link-hover-color: var(--fd-indigo);
  --bs-link-color-rgb: 27, 42, 91;
  --bs-code-color: var(--fd-laterite);
  --bs-heading-color: var(--fd-ink);
  --bs-secondary-bg: var(--fd-paper-2);
  --bs-tertiary-bg: var(--fd-paper-2);
  --bs-emphasis-color-rgb: 24, 29, 42;
  --bs-border-radius: var(--fd-radius);
}
[data-bs-theme="dark"] {
  --bs-link-color-rgb: 169, 190, 240;
  --bs-emphasis-color-rgb: 236, 234, 227;
}

* { box-sizing: border-box; }

body {
  background: var(--fd-paper);
  color: var(--fd-ink);
  font-family: var(--fd-body);
  font-size: 17px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}
h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6 {
  font-family: var(--fd-display);
  font-weight: 600;
  letter-spacing: -.015em;
  color: var(--fd-ink);
  text-wrap: balance;
}
a { color: var(--fd-indigo); text-underline-offset: 3px; }
code, .fd-mono, pre { font-family: var(--fd-mono); }
.text-secondary { color: var(--fd-ink-2) !important; }
:focus-visible { outline: 2px solid var(--fd-indigo); outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) { * { animation: none !important; transition: none !important; } }

/* Lien d'évitement */
.fd-skip { position: absolute; left: -9999px; }
.fd-skip:focus { left: 12px; top: 12px; z-index: 999; background: var(--fd-indigo);
                 color: var(--fd-indigo-ink); padding: 8px 14px; border-radius: var(--fd-radius); }

/* ------------------------------------------------------- barre et pied */
.fd-navbar {
  background: var(--fd-indigo);
  border-bottom: 1px solid var(--fd-indigo);
}
.fd-navbar .navbar-brand,
.fd-navbar .nav-link { color: var(--fd-indigo-ink); font-family: var(--fd-display); }
/* Un libellé de menu ne se coupe jamais : « Chiffre de la semaine » se
   répartissait sur trois lignes et déformait la barre. En mode replié
   (< lg) la liste est verticale, la contrainte n'y coûte rien. */
.fd-navbar .nav-link { font-size: .95rem; opacity: .85; white-space: nowrap; }
.fd-navbar .nav-link:hover,
.fd-navbar .nav-link[aria-current="page"] { opacity: 1; color: var(--fd-indigo-ink); }
.fd-navbar .navbar-toggler { border-color: rgba(255,255,255,.3); }
[data-bs-theme="dark"] .fd-navbar .navbar-toggler { border-color: rgba(0,0,0,.3); }
.fd-accent { color: var(--fd-ochre); }
/* Dans la barre, l'ocre suit le jeton conçu pour l'aplat indigo. */
.fd-navbar .fd-accent { color: var(--fd-ochre-on-indigo); }

/* Le bouton de recherche est un `.btn-accent`, dont le fond EST l'indigo — donc
   le fond de la barre. Il y disparaissait purement et simplement, dans les deux
   thèmes. Dans la barre, on l'inverse : encre de barre en fond, indigo en
   texte. Contraste mesuré 13,74:1 (clair) et 10,04:1 (sombre). */
.fd-navbar .btn-accent {
  background: var(--fd-indigo-ink);
  border-color: var(--fd-indigo-ink);
  color: var(--fd-indigo);
}
.fd-navbar .btn-accent:hover { background: var(--fd-indigo-ink); color: var(--fd-indigo); opacity: .88; }

/* Le champ garde le fond des pages : il se détache de l'aplat de la barre dans
   les deux thèmes, sans jeton supplémentaire. */
.fd-navbar .form-control {
  background: var(--fd-surface);
  color: var(--fd-ink);
  border-color: var(--fd-line);
}
.fd-navbar .form-control::placeholder { color: var(--fd-ink-3); opacity: 1; }
/* Un champ de recherche plus étroit que son propre libellé n'est pas un champ.
   On lui garantit une largeur utile ; sous le point de repli, il occupe toute
   la largeur du menu déroulant. */
.fd-navbar .form-control { min-width: 13rem; }
@media (max-width: 1199.98px) { .fd-navbar form[role="search"] { width: 100%; margin-top: .5rem; }
                                .fd-navbar .form-control { min-width: 0; flex: 1 1 auto; } }
/* Huit entrées : on resserre légèrement pour gagner la place du champ. */
@media (min-width: 1200px) { .fd-navbar .nav-link { padding-left: .55rem; padding-right: .55rem; } }

.btn-accent {
  background: var(--fd-indigo); border: 1px solid var(--fd-indigo);
  color: var(--fd-indigo-ink); font-family: var(--fd-display); font-weight: 600;
}
.btn-accent:hover { background: var(--fd-indigo); color: var(--fd-indigo-ink); opacity: .9; }
.btn-outline-info, .btn-outline-light {
  color: var(--fd-ink); border-color: var(--fd-line); font-family: var(--fd-display);
  font-weight: 600;
}
.btn-outline-info:hover, .btn-outline-light:hover {
  background: var(--fd-indigo-soft); color: var(--fd-indigo); border-color: var(--fd-indigo-line);
}
.btn-info { background: var(--fd-indigo); border-color: var(--fd-indigo); color: var(--fd-indigo-ink); }

.fd-footer {
  background: var(--fd-paper-2); border-top: 1px solid var(--fd-line);
  color: var(--fd-ink-2);
}
.fd-footer .link-light { color: var(--fd-indigo) !important; }

/* ------------------------------------------------------ cartes et blocs */
.fd-card {
  background: var(--fd-surface); border: 1px solid var(--fd-line);
  border-radius: var(--fd-radius); color: var(--fd-ink); box-shadow: var(--fd-shadow);
}
.fd-card:hover { border-color: var(--fd-indigo-line); }
.fd-hero {
  background: var(--fd-paper-2); border: 1px solid var(--fd-line);
  border-top: 3px solid var(--fd-indigo);
  border-radius: var(--fd-radius); padding: 2.6rem 2rem;
}
.fd-hero h1 { font-weight: 800; letter-spacing: -.025em; }
.fd-topic-pill {
  display: inline-block; padding: .45rem 1rem; border: 1px solid var(--fd-line);
  border-radius: 999px; margin: .2rem; color: var(--fd-ink); text-decoration: none;
  background: var(--fd-surface); font-family: var(--fd-mono); font-size: .85rem;
}
.fd-topic-pill:hover { border-color: var(--fd-indigo); color: var(--fd-indigo); }
.fd-stat .n {
  font-family: var(--fd-display); font-size: 2rem; font-weight: 800;
  color: var(--fd-ink); font-variant-numeric: tabular-nums;
}
.fd-provenance {
  font-size: .88rem; border-left: 3px solid var(--fd-indigo);
  padding: .7rem 1rem; background: var(--fd-indigo-soft); color: var(--fd-ink-2);
  border-radius: 0 var(--fd-radius) var(--fd-radius) 0;
}
.fd-chip {
  display: inline-flex; align-items: center; gap: 8px; padding: 5px 6px 5px 12px;
  border-radius: 999px; background: var(--fd-indigo-soft);
  border: 1px solid var(--fd-indigo-line); font-size: .82rem; color: var(--fd-ink);
}
.fd-chip button {
  border: 0; background: var(--fd-line); color: var(--fd-ink); width: 20px;
  height: 20px; line-height: 18px; border-radius: 50%; cursor: pointer; font-size: 15px;
}
.fd-chip button:hover { background: var(--fd-laterite); color: #fff; }
.fd-chart-wrap { position: relative; min-height: 320px; }
.fd-mini-chart { position: relative; height: 150px; }
.fd-skeleton {
  background: linear-gradient(90deg, var(--fd-line-2), var(--fd-line), var(--fd-line-2));
  background-size: 200% 100%; animation: fd-shine 1.2s infinite;
  border-radius: var(--fd-radius); height: 300px;
}
@keyframes fd-shine { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } }

table.fd-table { color: var(--fd-ink); }
table.fd-table th {
  color: var(--fd-ink-3); font-family: var(--fd-mono); font-size: .7rem;
  letter-spacing: .08em; text-transform: uppercase; font-weight: 600;
}
.fd-badge-src {
  background: var(--fd-indigo-soft); color: var(--fd-indigo);
  border: 1px solid var(--fd-indigo-line); font-family: var(--fd-mono);
  font-weight: 500; font-size: .7rem;
}
.fd-flag {
  width: 22px; height: 16px; border-radius: 2px; object-fit: cover;
  vertical-align: -3px; margin-right: .4rem; box-shadow: 0 0 0 1px var(--fd-line);
}

/* ------------------------------------------------- carte d'Afrique */
.fd-map-wrap {
  background: var(--fd-paper-2); border: 1px solid var(--fd-line);
  border-radius: var(--fd-radius); padding: .5rem;
}
.fd-africa-map { width: 100%; height: auto; display: block; }
.fd-africa-map .af-country {
  fill: var(--fd-indigo-soft); stroke: var(--fd-paper); stroke-width: .6;
  transition: fill .15s ease; cursor: pointer;
}
.fd-africa-map .af-country:hover { fill: var(--fd-indigo-line); }
.fd-africa-map .af-country.is-active { fill: var(--fd-indigo); stroke: var(--fd-surface); stroke-width: 1; }
.fd-africa-map .af-country.is-missing { fill: var(--fd-line-2); cursor: default; opacity: .6; }
/* Pays sélectionné portant son drapeau.
   Le contour passe à l'encre SOMBRE, et ce n'est pas un choix esthétique :
   constaté à l'écran le 12/09/2026, le Nigeria — vert, blanc, vert — paraissait
   coupé en deux, sa bande blanche centrale se confondant avec la page et son
   contour étant blanc lui aussi. Même effet attendu sur l'Égypte, la Sierra
   Leone, Madagascar ou le Soudan. Un drapeau ne peut être découpé par une
   frontière que si cette frontière reste visible quelle que soit la couleur
   qu'elle borde.
   La transition sur `fill` est retirée : elle ne s'applique pas à un motif et
   provoquait un clignotement au changement de pays. */
.fd-africa-map .af-country.has-flag {
  stroke: var(--fd-ink); stroke-width: 1.1;
  paint-order: stroke fill; transition: none;
}


/* ==========================================================================
   ICÔNES — sprite maison en remplacement de Bootstrap Icons (vague 2)

   Bootstrap Icons coûtait 84 Ko de CSS + 127 Ko de police WOFF2 pour VINGT
   pictogrammes, soit environ dix kilo-octets par icône. Ces vingt icônes sont
   redessinées ici en SVG intégré : ~6 Ko, même origine, aucun appel CDN.

   Le balisage ne change pas : `<i class="bi bi-search"></i>` fonctionne encore.
   On utilise `mask-image` plutôt que `background-image` pour que l'icône hérite
   de `currentColor`, comme le faisait la police.
   ========================================================================== */
.bi {
  display: inline-block; width: 1em; height: 1em; vertical-align: -.125em;
  background-color: currentColor;
  -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
  -webkit-mask-position: center;  mask-position: center;
  -webkit-mask-size: contain;     mask-size: contain;
  -webkit-mask-image: var(--fd-i); mask-image: var(--fd-i);
}
.bi:not([class*="bi-"]) { background-color: transparent; }

.bi-search { --fd-i: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='black' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'><circle cx='6.8' cy='6.8' r='4.3'/><path d='M10 10l4 4'/></svg>"); }
.bi-arrow-right { --fd-i: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='black' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'><path d='M2.5 8h10M9 4.5L12.5 8 9 11.5'/></svg>"); }
.bi-plus-lg { --fd-i: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='black' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'><path d='M8 2.5v11M2.5 8h11'/></svg>"); }
.bi-download { --fd-i: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='black' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'><path d='M8 2v7.5M4.8 6.8L8 10l3.2-3.2M2.5 13.5h11'/></svg>"); }
.bi-bank { --fd-i: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='black' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'><path d='M1.8 6.2L8 2.6l6.2 3.6M3.6 6.8v5.4M6.5 6.8v5.4M9.5 6.8v5.4M12.4 6.8v5.4M1.8 13.6h12.4'/></svg>"); }
.bi-bar-chart { --fd-i: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='black' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'><path d='M2 13.8h12M3.6 13V8.4M8 13V3.6M12.4 13V6.6'/></svg>"); }
.bi-bar-chart-line-fill { --fd-i: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='black'><rect x='2' y='8' width='3' height='6' rx='.6'/><rect x='6.5' y='4' width='3' height='10' rx='.6'/><rect x='11' y='6' width='3' height='8' rx='.6'/></svg>"); }
.bi-bar-chart-steps { --fd-i: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='black' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'><path d='M2 4h4.6M2 8h7.6M2 12h11.6'/></svg>"); }
.bi-box-arrow-up-right { --fd-i: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='black' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'><path d='M6.4 3H3.2v9.8H13V9.6M9.4 2.6H13.6v4.2M13.6 2.6L8.2 8'/></svg>"); }
.bi-calculator { --fd-i: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='black' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'><rect x='3' y='1.8' width='10' height='12.4' rx='1.4'/><path d='M5.2 4.6h5.6M5.4 8h.1M8 8h.1M10.6 8h.1M5.4 11h.1M8 11h.1M10.6 11h.1'/></svg>"); }
.bi-diagram-3 { --fd-i: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='black' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'><rect x='6.2' y='1.4' width='3.6' height='2.6' rx='.6'/><path d='M8 4v2.4M3.4 9V6.4h9.2V9'/><rect x='1.6' y='9.4' width='3.6' height='2.6' rx='.6'/><rect x='6.2' y='9.4' width='3.6' height='2.6' rx='.6'/><rect x='10.8' y='9.4' width='3.6' height='2.6' rx='.6'/></svg>"); }
.bi-globe-africa { --fd-i: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='black' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'><circle cx='8' cy='8' r='6.2'/><path d='M5.4 3.4c1.3 1 1 2.4 2.2 2.8 1.2.4 1.6-.6 2.4 0.8.6.2 1.8-.6 2.4-.9.7-.5 1.8-1.4 2.4-.9.6-1.9.2-2.4-.8-.4-.8-1.6-.9-2-2'/></svg>"); }
.bi-graph-up { --fd-i: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='black' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'><path d='M2 13.4h12M2.8 11.4l3.4-3.6 2.4 1.8 4.4-5'/></svg>"); }
.bi-graph-up-arrow { --fd-i: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='black' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'><path d='M2 13.4h12M2.8 11.4l3.4-3.6 2.4 1.8 4.4-5M10.2 4.4h3v3'/></svg>"); }
.bi-hand-index-thumb { --fd-i: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='black' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'><path d='M6.4 8V3.6a1.2 1.2 0 012.4 0V8'/><path d='M8.8 7.2a1.1 1.1 0 012.2 0v1M11 7.8a1.1 1.1 0 012.2 0v3.4a3.2 3.2 0 01-3.2 3.2H8.6c-1 0-1.7-.5-2.3-1.3L4 10.4c-.5-.7.4-1.7 1.2-1.1l1.2 1'/></svg>"); }
.bi-image { --fd-i: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='black' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'><rect x='1.8' y='2.8' width='12.4' height='10.4' rx='1.4'/><circle cx='5.6' cy='6.4' r='1.1'/><path d='M2.4 12l3.4-3.4 2.4 2.4 2.6-2.8 3.4 3.6'/></svg>"); }
.bi-percent { --fd-i: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='black' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'><path d='M12.4 3.6L3.6 12.4'/><circle cx='4.6' cy='4.6' r='1.9'/><circle cx='11.4' cy='11.4' r='1.9'/></svg>"); }
.bi-pie-chart { --fd-i: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='black' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'><circle cx='8' cy='8' r='6.2'/><path d='M8 1.8V8h6.2'/></svg>"); }
.bi-pie-chart-fill { --fd-i: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='black'><path d='M8.7 1.3v6h6a6.7 6.7 0 00-6-6z'/><path d='M7.3 1.3a6.7 6.7 0 101.4 13.4 6.7 6.7 0 006-6H7.3z'/></svg>"); }
.bi-record-circle { --fd-i: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='black' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'><circle cx='8' cy='8' r='6.2'/><circle cx='8' cy='8' r='2.4' fill='black' stroke='none'/></svg>"); }

/* ==========================================================================
   INSTANTANÉ SERVEUR (vague 1) — la valeur doit être ce que l'œil accroche
   ========================================================================== */
.fd-snap { margin: .4rem 0 .55rem; }
.fd-snap__value {
  font-family: var(--fd-display); font-size: 1.9rem; font-weight: 800;
  line-height: 1.05; color: var(--fd-ink); letter-spacing: -.02em;
  font-variant-numeric: tabular-nums;
}
.fd-snap__unit { font-size: .95rem; font-weight: 500; color: var(--fd-ink-2); margin-left: .3rem; }
.fd-snap__meta { font-size: .82rem; color: var(--fd-ink-2); margin-top: .2rem; }
.fd-snap__chg { font-weight: 600; }
/* Le vert et le rouge ne portent JAMAIS seuls l'information : le signe + ou −
   est toujours présent dans le texte. */
.fd-snap__chg--up { color: var(--fd-green); }
.fd-snap__chg--down { color: var(--fd-laterite); }
.fd-snap__src {
  font-size: .74rem; color: var(--fd-ink-3); margin-top: .4rem;
  border-top: 1px solid var(--fd-line-2); padding-top: .4rem;
}

/* ==========================================================================
   PAGINATION (vague 1)
   ========================================================================== */
.fd-pager { display: flex; gap: .5rem; align-items: center; flex-wrap: wrap; margin-top: 1.5rem; }
.fd-pager a, .fd-pager span {
  border: 1px solid var(--fd-line); border-radius: var(--fd-radius);
  padding: .4rem .9rem; color: var(--fd-ink); text-decoration: none; font-size: .88rem;
}
.fd-pager a:hover { border-color: var(--fd-indigo); color: var(--fd-indigo); }
.fd-pager__info { border: 0 !important; color: var(--fd-ink-3); }

/* ==========================================================================
   VAGUE 3 — LE PORTAIL REDEVIENT UN MÉDIA
   ========================================================================== */

/* --- « Comment lire cet indicateur » --------------------------------------
   Encadré volontairement distinct de la description technique : c'est du
   journalisme, pas de la métadonnée. D'où le liseré ocre plutôt qu'indigo. */
.fd-guide {
  background: var(--fd-ochre-soft); border: 1px solid var(--fd-line);
  border-left: 4px solid var(--fd-ochre);
  border-radius: 0 var(--fd-radius) var(--fd-radius) 0;
  padding: 1rem 1.2rem; margin: 0 0 1.2rem;
}
.fd-guide h2 { color: var(--fd-ochre); margin-bottom: .5rem; }
.fd-guide p { color: var(--fd-ink); max-width: 68ch; }

/* --- « À lire sur BNTIC News » -------------------------------------------- */
.fd-articles { list-style: none; padding: 0; margin: 0; display: grid; gap: 2px; }
.fd-articles li {
  background: var(--fd-paper-2); border-left: 3px solid var(--fd-indigo);
  padding: .8rem 1rem;
}
.fd-articles a {
  font-family: var(--fd-display); font-weight: 600; text-decoration: none;
  display: block;
}
.fd-articles a:hover { text-decoration: underline; }
.fd-articles__extrait {
  display: block; font-size: .9rem; color: var(--fd-ink-2); margin-top: .2rem;
}
.fd-articles time {
  display: block; font-family: var(--fd-mono); font-size: .72rem;
  color: var(--fd-ink-3); margin-top: .3rem;
}

/* --- Code d'intégration --------------------------------------------------- */
.fd-embed-code {
  font-family: var(--fd-mono); font-size: .78rem; background: var(--fd-paper);
  color: var(--fd-ink-2); border-color: var(--fd-line); resize: vertical;
}
.fd-embed-body { font-size: 15px; }
.fd-embed__src { color: var(--fd-ink-3); font-size: .76rem; margin-top: .6rem; }

/* --- Le chiffre de la semaine --------------------------------------------- */
.fd-chiffre { max-width: 720px; }
.fd-chiffre__k {
  font-family: var(--fd-mono); font-size: .72rem; letter-spacing: .12em;
  text-transform: uppercase; color: var(--fd-indigo); background: var(--fd-indigo-soft);
  display: inline-block; padding: 4px 12px; border-radius: 999px; margin-bottom: 1rem;
}
.fd-chiffre__titre {
  font-family: var(--fd-display); font-size: clamp(1.5rem, 4vw, 2.2rem);
  font-weight: 800; letter-spacing: -.025em; margin-bottom: .8rem;
}
.fd-chiffre__valeur {
  font-family: var(--fd-display); font-size: clamp(3rem, 12vw, 5.5rem);
  font-weight: 800; line-height: 1; letter-spacing: -.04em; color: var(--fd-indigo);
  font-variant-numeric: tabular-nums; margin: 0 0 .3rem;
}
.fd-chiffre__unite {
  font-size: .28em; font-weight: 500; color: var(--fd-ink-2); margin-left: .4rem;
  letter-spacing: 0;
}
.fd-chiffre__meta { font-size: 1rem; color: var(--fd-ink-2); margin-bottom: 1.4rem; }
.fd-chiffre__actions { display: flex; gap: .6rem; flex-wrap: wrap; margin-top: 1.6rem; }

/* Accroche sur l'accueil : un bloc, pas une carte parmi d'autres. */
.fd-chiffre-teaser {
  display: grid; grid-template-columns: 1fr auto; gap: .2rem 1.5rem;
  align-items: center; text-decoration: none;
  background: var(--fd-indigo); color: var(--fd-indigo-ink);
  border-radius: var(--fd-radius); padding: 1.4rem 1.6rem; margin-bottom: 2rem;
}
.fd-chiffre-teaser:hover { opacity: .94; color: var(--fd-indigo-ink); }
.fd-chiffre-teaser__k {
  grid-column: 1; font-family: var(--fd-mono); font-size: .7rem;
  letter-spacing: .12em; text-transform: uppercase; opacity: .8;
}
.fd-chiffre-teaser__v {
  grid-column: 1; font-family: var(--fd-display); font-size: 2.4rem;
  font-weight: 800; line-height: 1.05; letter-spacing: -.03em;
  font-variant-numeric: tabular-nums;
}
.fd-chiffre-teaser__v small { font-size: .38em; font-weight: 500; opacity: .8; margin-left: .35rem; }
.fd-chiffre-teaser__n { grid-column: 1; font-size: .92rem; opacity: .88; }
.fd-chiffre-teaser__go {
  grid-column: 2; grid-row: 1 / span 3; font-family: var(--fd-display);
  font-weight: 600; white-space: nowrap; align-self: center;
}
@media (max-width: 560px) {
  .fd-chiffre-teaser { grid-template-columns: 1fr; }
  .fd-chiffre-teaser__go { grid-column: 1; grid-row: auto; margin-top: .6rem; }
}

/* --- Bascule de thème ----------------------------------------------------- */
.fd-theme {
  background: none; border: 1px solid var(--fd-line); color: var(--fd-ink-2);
  border-radius: 999px; padding: .25rem .8rem; font-family: var(--fd-mono);
  font-size: .72rem; cursor: pointer;
}
.fd-theme:hover { border-color: var(--fd-indigo); color: var(--fd-indigo); }

/* --- Accessibilité -------------------------------------------------------- */
.fd-sr {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* ==========================================================================
   LONGUE TRAÎNE — « cet indicateur, dans ce pays »
   --------------------------------------------------------------------------
   Une page qui répond à UNE question. Trois exigences de mise en forme :
   le chiffre doit s'accrocher au premier coup d'œil, le tableau annuel doit
   rester lisible sur un téléphone d'entrée de gamme, et les liens de maillage
   doivent ressembler à ce qu'ils sont — des pages, pas des filtres.
   ========================================================================== */

/* Le bloc du chiffre : même liseré que les encadrés éditoriaux, pour dire
   d'emblée que ce n'est pas une carte de plus dans une grille. */
.fd-vedette { border-left: 4px solid var(--fd-indigo); }
.fd-vedette .fd-snap__value { font-size: 2.6rem; }

/* Le graphique n'est ici qu'un appoint : le contenu est le tableau, servi en
   HTML. On ne lui réserve donc pas les 320 px d'une page de visualisation. */
.fd-chart-wrap--appoint { min-height: 240px; }
@media (max-width: 575.98px) { .fd-chart-wrap--appoint { min-height: 200px; } }

/* Le tableau annuel. `tabular-nums` aligne les chiffres colonne par colonne :
   sans cela, « 1 234 » et « 987 » ne se comparent pas à l'œil. */
table.fd-serie { font-variant-numeric: tabular-nums; }
table.fd-serie caption {
  caption-side: bottom; padding-top: .6rem; text-align: left;
}
table.fd-serie tbody tr:nth-child(odd) { background: var(--fd-paper-2); }
table.fd-serie th[scope="row"] { font-family: var(--fd-mono); color: var(--fd-ink-2); }

/* Foire aux questions : ce sont les questions réellement tapées dans un
   moteur, et les réponses déclarées en JSON-LD. Elles doivent donc être
   LISIBLES dans la page — un balisage sans contenu visible est une faute. */
.fd-faq__item { padding: .85rem 0; border-top: 1px solid var(--fd-line-2); }
.fd-faq__item:first-of-type { border-top: 0; padding-top: 0; }
.fd-faq__item h3 { color: var(--fd-indigo); }
.fd-faq__item p { color: var(--fd-ink-2); max-width: 72ch; margin-bottom: 0; }

/* Maillage interne : des liens vers des PAGES. */
.fd-liens { list-style: none; padding: 0; margin: 0; display: grid; gap: .15rem; }
.fd-liens li { padding: .35rem 0; border-bottom: 1px solid var(--fd-line-2); }
.fd-liens li:last-child { border-bottom: 0; }
.fd-liens a {
  color: var(--fd-ink); text-decoration: none; display: block;
  /* 44 px de hauteur utile : une cible tactile confortable au pouce. */
  min-height: 34px; line-height: 1.35;
}
.fd-liens a:hover { color: var(--fd-indigo); text-decoration: underline; }
@media (min-width: 768px) {
  .fd-liens--colonnes { grid-template-columns: 1fr 1fr; column-gap: 1.4rem; }
}

@media (max-width: 575.98px) {
  .fd-vedette .fd-snap__value { font-size: 2.1rem; }
  table.fd-serie { font-size: .9rem; }
}

@media (prefers-reduced-motion: reduce) {
  .fd-liens a { transition: none; }
}

/* ==========================================================================
   IMPRESSION — une fiche pays imprimée doit rester lisible
   ========================================================================== */
@media print {
  :root {
    --fd-paper: #FFF; --fd-paper-2: #FFF; --fd-surface: #FFF;
    --fd-ink: #000; --fd-ink-2: #333; --fd-ink-3: #555;
    --fd-line: #BBB; --fd-line-2: #DDD; --fd-shadow: none;
  }
  .bntic-appbar, .fd-navbar, .fd-footer, .fd-chiffre__actions,
  .fd-chiffre-teaser, .fd-theme, .fd-skip, .fd-pager { display: none !important; }
  body { background: #FFF; font-size: 12pt; }
  .fd-card, .fd-guide, .fd-articles li,
  .fd-faq__item, table.fd-serie tr { break-inside: avoid; border: 1px solid #BBB; }
  table.fd-serie tbody tr:nth-child(odd) { background: #FFF; }
  a { color: #000; text-decoration: none; }
  .fd-articles a[href^="http"]::after,
  .fd-provenance a[href^="http"]::after { content: " (" attr(href) ")"; font-size: 9pt; }
}

/* ==========================================================================
   CLASSEMENTS AFRICAINS (03/10/2026)
   ========================================================================== */
.fd-rank-kpi__v { font-family: var(--fd-display); font-size: 1.45rem; font-weight: 700;
  color: var(--fd-indigo); line-height: 1.2; margin: .15rem 0; }
.fd-rank-kpi__v small { font-size: .8rem; font-weight: 500; color: var(--fd-ink-3); }
.fd-rank-kpi--focus { border-left: 4px solid var(--fd-ochre); }
.fd-rank-note { background: var(--fd-indigo-soft); border-radius: var(--fd-radius);
  padding: .7rem .9rem; color: var(--fd-ink-2); }
.fd-rank td, .fd-rank th { font-variant-numeric: tabular-nums; }
.fd-rank__focus > td, .fd-rank__focus > th, li.fd-rank__focus { background: var(--fd-ochre-soft); }
.fd-rank__barre { width: 28%; min-width: 80px; }
.fd-rank__barre span { display: block; height: .55rem; border-radius: 4px;
  background: var(--fd-indigo-line); min-width: 2px; }
.fd-rank__focus .fd-rank__barre span { background: var(--fd-ochre); }
.fd-rank-region { list-style: none; padding: 0; }
.fd-rank-region li { display: flex; gap: .5rem; align-items: baseline; padding: .2rem .3rem;
  border-bottom: 1px solid var(--fd-line-2); font-size: .92rem; }
.fd-rank-region li span { min-width: 2.6rem; text-align: right; color: var(--fd-ink-3);
  font-variant-numeric: tabular-nums; }
.fd-rank-region li strong { margin-left: auto; font-variant-numeric: tabular-nums; }
.fd-rank-badge { display: inline-block; margin-top: .35rem; font-size: .78rem; font-weight: 600;
  padding: .12rem .5rem; border-radius: 999px; background: var(--fd-indigo-soft);
  color: var(--fd-indigo); text-decoration: none; }
.fd-rank-badge:hover { background: var(--fd-indigo); color: var(--fd-indigo-ink); }
.fd-rank-ligne { border-top: 1px dashed var(--fd-line); padding-top: .5rem; }
/* Mode sombre : les jetons (--fd-indigo, --fd-ochre-soft…) sont déjà redéfinis. */
/* Le nom du pays est un en-tête de ligne (accessibilité), pas un en-tête de colonne. */
.fd-rank tbody th { font-family: var(--fd-body); font-size: .95rem; text-transform: none;
  letter-spacing: normal; font-weight: 400; }
.fd-rank-liste { list-style: none; padding: 0; columns: 2 18rem; column-gap: 2rem; }
.fd-rank-liste li { break-inside: avoid; padding: .3rem 0; border-bottom: 1px solid var(--fd-line-2); }