/* ============================================================================
   BNTIC FasoConnect, feuille de style.

   CE QUI CHANGE, ET POURQUOI

   1. LE THÈME. FasoConnect n'existait qu'en sombre (#0b1220), sans alternative
      ni respect de la préférence système. C'est le pire cas de lisibilité pour
      l'usage réel : un téléphone d'entrée de gamme, dehors, en plein soleil.
      Or c'est précisément dans ces conditions qu'on consulte un service qui
      répond à « est-ce que le réseau est coupé ». Le clair devient le défaut.

   2. L'IDENTITÉ. CyberAlert et FasoData partagent depuis leurs refontes la
      palette « Indigo et Latérite ». FasoConnect gardait un cyan Bootstrap par
      défaut sans rapport. Un lecteur qui passe de l'un à l'autre changeait de
      maison. La palette est désormais commune.

   3. LES ICÔNES. La page chargeait bootstrap-icons.css depuis un CDN : 96 Ko
      décodés, plus une police WOFF2, pour SEPT icônes réellement utilisées.
      Elles sont ici dessinées en masque CSS, intégrées au fichier, et héritent
      de la couleur du texte. Aucune requête, aucune police.

   4. LES COULEURS D'ÉTAT sont des jetons, plus des valeurs écrites dans le
      gabarit. Le gabarit contenait `style="color:#ef4444"` en dur.

   Toutes les paires texte/fond sont mesurées à 4,5:1 au minimum (WCAG AA),
   dans les deux thèmes.
   ========================================================================== */

/* ---------------------------------------------------------------- JETONS */
:root,
[data-bs-theme="light"] {
  --fc-paper:      #F3F1EA;   /* calicot */
  --fc-paper-2:    #FBFAF6;
  --fc-surface:    #FFFFFF;
  --fc-ink:        #181D2A;
  --fc-ink-2:      #4A5164;
  --fc-ink-3:      #656C7C;
  --fc-line:       #DCD8CD;

  --fc-indigo:     #1B2A5B;
  --fc-indigo-ink: #FFFFFF;
  --fc-indigo-soft:#E3E7F2;

  /* États. Le vert n'est jamais employé pour « inconnu » : une absence de
     signal n'est pas une bonne nouvelle, c'est une absence. */
  --fc-ok:         #2A6B4F;   /* vert néré */
  --fc-ok-soft:    #E0EFE7;
  --fc-warn:       #8A5D0D;   /* ocre mil */
  --fc-warn-soft:  #F8EED8;
  --fc-bad:        #A6402A;   /* latérite */
  --fc-bad-soft:   #F7E6E1;
  --fc-unk:        #656C7C;
  --fc-unk-soft:   #ECEAE3;
  /* Encre de la pastille « données insuffisantes ». Le gris courant tombait à
     4,37:1 sur son propre aplat : lisible pour qui a de bons yeux et un bon
     écran, ce qui n'est pas l'hypothèse de travail ici. Mesuré : 5,56:1. */
  --fc-unk-ink:    #565C6B;

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

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

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

  --fc-indigo:     #A9BEF0;
  --fc-indigo-ink: #0E1220;
  --fc-indigo-soft:#1D2540;

  --fc-ok:         #84C8A5;
  --fc-ok-soft:    #172C23;
  --fc-warn:       #E4B45E;
  --fc-warn-soft:  #2E2616;
  --fc-bad:        #EE9077;
  --fc-bad-soft:   #33201B;
  --fc-unk:        #848B9B;
  --fc-unk-soft:   #242A36;
  --fc-unk-ink:    #A0A8B8;   /* 6,02:1 sur l'aplat sombre */

  --fc-shadow: 0 1px 2px rgba(0,0,0,.45), 0 12px 30px -20px rgba(0,0,0,.9);
}

/* ---------------------------------------------- pont vers Bootstrap 5.3
   On redéfinit les variables de Bootstrap à partir de nos jetons : tous ses
   composants suivent, sans une seule règle `!important`. */
:root, [data-bs-theme="light"], [data-bs-theme="dark"] {
  --bs-body-bg: var(--fc-paper);
  --bs-body-color: var(--fc-ink);
  --bs-body-font-family: var(--fc-body);
  --bs-emphasis-color: var(--fc-ink);
  --bs-secondary-color: var(--fc-ink-2);
  --bs-tertiary-color: var(--fc-ink-3);
  --bs-border-color: var(--fc-line);
  --bs-border-color-translucent: var(--fc-line);
  --bs-link-color: var(--fc-indigo);
  --bs-link-hover-color: var(--fc-indigo);
  --bs-link-color-rgb: 27, 42, 91;
  --bs-heading-color: var(--fc-ink);
  --bs-secondary-bg: var(--fc-paper-2);
  --bs-tertiary-bg: var(--fc-paper-2);
  --bs-border-radius: var(--fc-radius);
}
[data-bs-theme="dark"] { --bs-link-color-rgb: 169, 190, 240; }

* { box-sizing: border-box; }

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

.fc-skip { position: absolute; left: -9999px; }
.fc-skip:focus { left: 12px; top: 12px; z-index: 999; background: var(--fc-indigo);
                 color: var(--fc-indigo-ink); padding: 8px 14px; border-radius: var(--fc-radius); }

/* ------------------------------------------------------------ icônes
   Masque CSS intégré : l'icône prend la couleur du texte qui l'entoure, et
   ne coûte ni requête ni police. Sept icônes, environ deux kilo-octets, à
   comparer aux 96 Ko de bootstrap-icons.css qui étaient chargés pour elles. */
.i {
  display: inline-block; width: 1em; height: 1em;
  vertical-align: -.125em; background: currentColor;
  -webkit-mask-position: center; mask-position: center;
  -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
  -webkit-mask-size: contain; mask-size: contain;
}
.i-signal   { -webkit-mask-image: var(--m-signal);   mask-image: var(--m-signal); }
.i-info     { -webkit-mask-image: var(--m-info);     mask-image: var(--m-info); }
.i-ok       { -webkit-mask-image: var(--m-ok);       mask-image: var(--m-ok); }
.i-warn     { -webkit-mask-image: var(--m-warn);     mask-image: var(--m-warn); }
.i-refresh  { -webkit-mask-image: var(--m-refresh);  mask-image: var(--m-refresh); }
.i-question { -webkit-mask-image: var(--m-question); mask-image: var(--m-question); }
.i-place    { -webkit-mask-image: var(--m-place);    mask-image: var(--m-place); }
:root {
  --m-signal: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M8 6a2 2 0 1 0 0 4 2 2 0 0 0 0-4z'/%3E%3Cpath d='M4.5 3.5a.75.75 0 0 1 0 1.06 4.86 4.86 0 0 0 0 6.88.75.75 0 1 1-1.06 1.06 6.36 6.36 0 0 1 0-9 .75.75 0 0 1 1.06 0zm7 0a.75.75 0 0 1 1.06 0 6.36 6.36 0 0 1 0 9 .75.75 0 1 1-1.06-1.06 4.86 4.86 0 0 0 0-6.88.75.75 0 0 1 0-1.06zM2 1.4a.75.75 0 0 1 0 1.06 7.86 7.86 0 0 0 0 11.08.75.75 0 1 1-1.06 1.06 9.36 9.36 0 0 1 0-13.2.75.75 0 0 1 1.06 0zm12 0a.75.75 0 0 1 1.06 0 9.36 9.36 0 0 1 0 13.2.75.75 0 1 1-1.06-1.06 7.86 7.86 0 0 0 0-11.08.75.75 0 0 1 0-1.06z'/%3E%3C/svg%3E");
  --m-info: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M8 15A7 7 0 1 1 8 1a7 7 0 0 1 0 14zm0 1A8 8 0 1 0 8 0a8 8 0 0 0 0 16z'/%3E%3Cpath d='M8.93 6.588l-2.29.287-.082.38.45.083c.294.07.352.176.288.469l-.738 3.468c-.194.897.105 1.319.808 1.319.545 0 1.178-.252 1.465-.598l.088-.416c-.2.176-.492.246-.686.246-.275 0-.375-.193-.304-.533L8.93 6.588zM9 4.5a1 1 0 1 1-2 0 1 1 0 0 1 2 0z'/%3E%3C/svg%3E");
  --m-ok: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M16 8A8 8 0 1 1 0 8a8 8 0 0 1 16 0zm-3.97-3.03a.75.75 0 0 0-1.08.022L7.477 9.417 5.384 7.323a.75.75 0 0 0-1.06 1.06L6.97 11.03a.75.75 0 0 0 1.079-.02l3.992-4.99a.75.75 0 0 0-.01-1.05z'/%3E%3C/svg%3E");
  --m-warn: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M8.982 1.566a1.13 1.13 0 0 0-1.96 0L.165 13.233c-.457.778.091 1.767.98 1.767h13.713c.889 0 1.438-.99.98-1.767L8.982 1.566zM8 5c.535 0 .954.462.9.995l-.35 3.507a.552.552 0 0 1-1.1 0L7.1 5.995A.905.905 0 0 1 8 5zm.002 6a1 1 0 1 1 0 2 1 1 0 0 1 0-2z'/%3E%3C/svg%3E");
  --m-refresh: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M11.534 7h3.932a.25.25 0 0 1 .192.41l-1.966 2.36a.25.25 0 0 1-.384 0l-1.966-2.36a.25.25 0 0 1 .192-.41zm-11 2h3.932a.25.25 0 0 0 .192-.41L2.692 6.23a.25.25 0 0 0-.384 0L.342 8.59A.25.25 0 0 0 .534 9z'/%3E%3Cpath d='M8 3c-1.552 0-2.94.707-3.857 1.818a.5.5 0 1 1-.771-.636A6 6 0 0 1 13.917 7H12.9A5 5 0 0 0 8 3zM3.1 9a5 5 0 0 0 8.757 2.182.5.5 0 1 1 .771.636A6 6 0 0 1 2.083 9H3.1z'/%3E%3C/svg%3E");
  --m-question: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M8 15A7 7 0 1 1 8 1a7 7 0 0 1 0 14zm0 1A8 8 0 1 0 8 0a8 8 0 0 0 0 16z'/%3E%3Cpath d='M5.255 5.786a.237.237 0 0 0 .241.247h.825c.138 0 .248-.113.266-.25.09-.656.54-1.134 1.342-1.134.686 0 1.314.343 1.314 1.168 0 .635-.374.927-.965 1.371-.673.489-1.206 1.06-1.168 1.987l.003.217a.25.25 0 0 0 .25.246h.811a.25.25 0 0 0 .25-.25v-.105c0-.718.273-.927 1.01-1.486.609-.463 1.244-.977 1.244-2.056 0-1.511-1.276-2.241-2.673-2.241-1.267 0-2.655.59-2.75 2.286zm1.557 5.763c0 .533.425.927 1.01.927.609 0 1.028-.394 1.028-.927 0-.552-.42-.94-1.029-.94-.584 0-1.009.388-1.009.94z'/%3E%3C/svg%3E");
  --m-place: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M12.166 8.94c-.524 1.062-1.234 2.12-1.96 3.07A32 32 0 0 1 8 14.58a32 32 0 0 1-2.206-2.57c-.726-.95-1.436-2.008-1.96-3.07C3.304 7.867 3 6.862 3 6a5 5 0 0 1 10 0c0 .862-.305 1.867-.834 2.94M8 16s6-5.686 6-10A6 6 0 0 0 2 6c0 4.314 6 10 6 10'/%3E%3Cpath d='M8 8a2 2 0 1 1 0-4 2 2 0 0 1 0 4m0 1a3 3 0 1 0 0-6 3 3 0 0 0 0 6'/%3E%3C/svg%3E");
}

/* -------------------------------------------------------- barre et pied */
.fc-header { background: var(--fc-indigo); border-bottom: 1px solid var(--fc-indigo); }
.fc-brand,
.fc-header a { color: var(--fc-indigo-ink); text-decoration: none; font-family: var(--fc-display); }
.fc-brand { font-size: 1.05rem; }
.fc-header .fc-lien { opacity: .88; font-size: .95rem; }
.fc-header .fc-lien:hover { opacity: 1; }
.fc-footer { border-top: 1px solid var(--fc-line); background: var(--fc-paper-2); margin-top: 1.5rem; }

.fc-card {
  background: var(--fc-surface); border: 1px solid var(--fc-line);
  border-radius: var(--fc-radius); box-shadow: var(--fc-shadow);
}
.fc-note {
  background: var(--fc-indigo-soft); border: 1px solid var(--fc-line);
  border-radius: var(--fc-radius); padding: 10px 14px; color: var(--fc-ink-2);
}

.btn-fc {
  background: var(--fc-indigo); border: 1px solid var(--fc-indigo);
  color: var(--fc-indigo-ink); font-family: var(--fc-display); font-weight: 600;
}
.btn-fc:hover { background: var(--fc-indigo); color: var(--fc-indigo-ink); opacity: .9; }
.btn-fc-ligne {
  color: var(--fc-ink); border: 1px solid var(--fc-line);
  font-family: var(--fc-display); font-weight: 600; background: var(--fc-surface);
}
.btn-fc-ligne:hover { background: var(--fc-indigo-soft); color: var(--fc-indigo); }

/* ------------------------------------------------------------- l'état
   La réponse à « est-ce que ça marche » doit être lisible en une seconde,
   à bout de bras, dehors. Elle occupe donc la place et la couleur. */
.fc-etat { border-left: 6px solid var(--fc-unk); }
.fc-etat__ligne { display: flex; align-items: flex-start; gap: 16px; }
.fc-etat__icone { font-size: 2.1rem; line-height: 1; flex: 0 0 auto; color: var(--fc-unk); }
.fc-etat__libelle {
  font-family: var(--fc-display); font-weight: 700;
  font-size: 1.55rem; line-height: 1.2; color: var(--fc-ink);
}
.fc-etat__pays { font-size: .95rem; color: var(--fc-ink-2); margin-bottom: 2px; }
.fc-etat__phrase { color: var(--fc-ink-2); margin: 6px 0 0; }
.fc-etat__tech {
  font-family: var(--fc-mono); font-size: .8rem; color: var(--fc-ink-3);
  margin-top: 8px;
}
.fc-etat--ok   { border-left-color: var(--fc-ok); }
.fc-etat--ok   .fc-etat__icone { color: var(--fc-ok); }
.fc-etat--warn { border-left-color: var(--fc-warn); }
.fc-etat--warn .fc-etat__icone { color: var(--fc-warn); }
.fc-etat--bad  { border-left-color: var(--fc-bad); }
.fc-etat--bad  .fc-etat__icone { color: var(--fc-bad); }
.fc-etat--unk  { border-left-color: var(--fc-unk); }
.fc-etat--unk  .fc-etat__icone { color: var(--fc-unk); }

.fc-pastille {
  display: inline-block; padding: 2px 10px; border-radius: 999px;
  font-family: var(--fc-mono); font-size: .74rem; letter-spacing: .02em;
}
.fc-pastille--ok   { background: var(--fc-ok-soft);   color: var(--fc-ok); }
.fc-pastille--warn { background: var(--fc-warn-soft); color: var(--fc-warn); }
.fc-pastille--bad  { background: var(--fc-bad-soft);  color: var(--fc-bad); }
.fc-pastille--unk  { background: var(--fc-unk-soft);  color: var(--fc-unk-ink); }

/* ----------------------------------------------------------- signaux */
.fc-signal {
  background: var(--fc-paper-2); border: 1px solid var(--fc-line);
  border-radius: var(--fc-radius); padding: 14px; height: 100%;
}
.fc-signal__titre { font-family: var(--fc-display); font-weight: 600; font-size: 1rem; }
.fc-signal__unite { font-family: var(--fc-mono); font-size: .78rem; color: var(--fc-ink-3); }
.fc-chart { position: relative; height: 180px; margin-top: 10px; }

/* L'en-tête « Signaux de connectivité » et l'horodatage se chevauchaient :
   le titre n'avait pas de largeur propre et l'horodatage venait par-dessus. */
.fc-bloc-titre {
  display: flex; flex-wrap: wrap; align-items: baseline;
  justify-content: space-between; gap: 4px 12px; margin-bottom: 10px;
}
.fc-bloc-titre h2 { margin: 0; }
.fc-maj { font-family: var(--fc-mono); font-size: .78rem; color: var(--fc-ink-3); white-space: nowrap; }

/* --------------------------------------------------- liste des pays */
.fc-pays { list-style: none; padding: 0; margin: 0;
           display: grid; gap: 8px; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); }
.fc-pays a {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  padding: 9px 12px; border: 1px solid var(--fc-line);
  border-radius: var(--fc-radius); background: var(--fc-surface);
  text-decoration: none; color: var(--fc-ink); font-family: var(--fc-display);
  font-size: .95rem;
}
.fc-pays a:hover { background: var(--fc-indigo-soft); border-color: var(--fc-indigo); }

.fc-help { line-height: 1.55; }
details.fc-card summary { cursor: pointer; font-family: var(--fc-display); }
.fc-theme {
  background: none; border: 1px solid var(--fc-line); color: var(--fc-ink-2);
  border-radius: 999px; padding: 3px 12px; font-family: var(--fc-mono); font-size: .76rem;
}

/* ==========================================================================
   PAGE DE RÉGION ET QUESTIONS FRÉQUENTES
   --------------------------------------------------------------------------
   Deux exigences : le tableau régional doit rester lisible sur un téléphone
   d'entrée de gamme — c'est l'appareil de quelqu'un qui cherche si le réseau
   est coupé — et l'état de chaque pays doit se lire sans dépendre de la
   couleur seule, le libellé étant toujours écrit en toutes lettres.
   ========================================================================== */

table.fc-tableau { color: var(--fc-ink); }
table.fc-tableau th[scope="col"] {
  color: var(--fc-ink-3); font-family: var(--fc-mono); font-size: .7rem;
  letter-spacing: .08em; text-transform: uppercase; font-weight: 600;
}
table.fc-tableau tbody tr:nth-child(odd) { background: var(--fc-paper-2); }
table.fc-tableau th[scope="row"] a {
  color: var(--fc-ink); text-decoration: none; font-family: var(--fc-display);
  /* Cible tactile confortable au pouce. */
  display: block; min-height: 32px; line-height: 1.4;
}
table.fc-tableau th[scope="row"] a:hover {
  color: var(--fc-indigo); text-decoration: underline;
}
table.fc-tableau caption { caption-side: bottom; padding-top: .6rem; text-align: left; }

/* La pastille d'état. La couleur ne porte JAMAIS seule l'information : le
   libellé — « Normal », « Coupure probable » — est toujours écrit. */
.fc-pastille {
  display: inline-block; padding: 2px 10px; border-radius: 999px;
  font-family: var(--fc-mono); font-size: .74rem; white-space: nowrap;
  border: 1px solid transparent;
}
.fc-pastille--ok   { background: var(--fc-ok-soft);   color: var(--fc-ok); }
.fc-pastille--warn { background: var(--fc-warn-soft); color: var(--fc-warn); }
.fc-pastille--bad  { background: var(--fc-bad-soft);  color: var(--fc-bad); }
.fc-pastille--unk  { background: var(--fc-unk-soft);  color: var(--fc-unk-ink); }

.fc-faq__item { padding: .85rem 0; border-top: 1px solid var(--fc-line); }
.fc-faq__item:first-of-type { border-top: 0; padding-top: 0; }
.fc-faq__item h3 { color: var(--fc-indigo); }
.fc-faq__item p { color: var(--fc-ink-2); max-width: 72ch; margin-bottom: 0; }

@media (max-width: 575.98px) {
  table.fc-tableau { font-size: .92rem; }
  .fc-pastille { font-size: .7rem; padding: 2px 8px; }
}

@media print {
  .fc-header, .fc-footer, form, .fc-theme, details { display: none !important; }
  .fc-card { box-shadow: none; border-color: #999; }
  .fc-faq__item, table.fc-tableau tr { break-inside: avoid; }
  table.fc-tableau tbody tr:nth-child(odd) { background: #FFF; }
}