/* ============================================================================
   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");
}


:root {
  --m-download: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M8 1v9m0 0 3.5-3.5M8 10 4.5 6.5M2 12v2h12v-2' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  --m-compare: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M1 12l4-5 3 3 3-6 4 4' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M1 15h14' stroke='%23000' stroke-width='1.2'/%3E%3C/svg%3E");
  --m-quote: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M2 9.5C2 6 4 4 6.5 3.5l.4 1.2C5.4 5.3 4.6 6.3 4.5 7.5H7V13H2zm7 0C9 6 11 4 13.5 3.5l.4 1.2c-1.5.6-2.3 1.6-2.4 2.8H14V13H9z'/%3E%3C/svg%3E");
}
.i-download { -webkit-mask-image: var(--m-download); mask-image: var(--m-download); }
.i-compare  { -webkit-mask-image: var(--m-compare);  mask-image: var(--m-compare); }
.i-quote    { -webkit-mask-image: var(--m-quote);    mask-image: var(--m-quote); }

/* ==========================================================================
   COUCHE VISUELLE — « observatoire » (octobre 2026)
   --------------------------------------------------------------------------
   Une page de service public d'information : de l'air, une hiérarchie nette,
   des chiffres en Plex Mono, des titres en Bricolage, le texte courant en
   Newsreader. L'indigo porte la maison, l'ocre signale ce qui est actif ;
   les trois couleurs d'état restent réservées à l'état, et à lui seul.
   ========================================================================== */
:root, [data-bs-theme="light"] {
  --fc-accent: #B7791F;
  --fc-accent-soft: #F6EAD3;
  --fc-radius: 14px;
  --fc-radius-sm: 8px;
  --fc-shadow: 0 1px 0 rgba(24,29,42,.04), 0 18px 40px -28px rgba(24,29,42,.45);
  --fc-shadow-hover: 0 1px 0 rgba(24,29,42,.05), 0 22px 44px -24px rgba(24,29,42,.5);
}
[data-bs-theme="dark"] {
  --fc-accent: #E4B45E;
  --fc-accent-soft: #2E2616;
  --fc-shadow-hover: 0 1px 2px rgba(0,0,0,.5), 0 22px 44px -24px rgba(0,0,0,.9);
}

body.fc-body { font-size: 17.5px; line-height: 1.62; }
body.fc-body p { text-wrap: pretty; }
.fc-main { padding-top: 1.6rem; padding-bottom: 3rem; }

/* ----------------------------------------------------------- en-tête */
.fc-header {
  position: relative; color: #fff;
  background:
    radial-gradient(520px 220px at 92% -40%, rgba(183,121,31,.35), transparent 70%),
    radial-gradient(420px 260px at 0% 140%, rgba(169,190,240,.18), transparent 70%),
    #16224A;
  border-bottom: 3px solid var(--fc-accent);
}
[data-bs-theme="dark"] .fc-header { background: radial-gradient(520px 220px at 92% -40%, rgba(228,180,94,.25), transparent 70%), #0E1430; }
.fc-header__inner { display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  flex-wrap: wrap; padding-top: .7rem; padding-bottom: .7rem; }
.fc-brand { display: inline-flex; align-items: center; gap: .65rem; color: #fff; text-decoration: none;
  font-family: var(--fc-display); font-weight: 700; font-size: 1.18rem; letter-spacing: -.01em; }
.fc-brand:hover { color: #fff; }
.fc-brand__marque { display: inline-grid; place-items: center; width: 36px; height: 36px; border-radius: 50%;
  background: var(--fc-accent); color: #16224A; font-size: 1.05rem; box-shadow: 0 0 0 4px rgba(255,255,255,.08); }
.fc-brand__texte small { display: block; font-family: var(--fc-mono); font-weight: 500; font-size: .62rem;
  letter-spacing: .18em; opacity: .7; line-height: 1; margin-bottom: 2px; }
.fc-nav { display: flex; align-items: center; flex-wrap: wrap; gap: .2rem; }
.fc-nav a { color: rgba(255,255,255,.86); text-decoration: none; font-family: var(--fc-display); font-weight: 500;
  font-size: .95rem; padding: .38rem .8rem; border-radius: 999px; transition: background .15s, color .15s; }
.fc-nav a:hover { background: rgba(255,255,255,.1); color: #fff; }
.fc-nav a[aria-current="page"] { background: #fff; color: #16224A; }
.fc-nav__sep { width: 1px; height: 18px; background: rgba(255,255,255,.25); margin: 0 .35rem; }
.fc-nav .fc-nav__ext { font-size: .86rem; color: rgba(255,255,255,.66); }

/* ------------------------------------------------- en-têtes de page */
.fc-fil { font-family: var(--fc-display); font-size: .84rem; color: var(--fc-ink-3); margin-bottom: 1.1rem; }
.fc-fil a { color: var(--fc-ink-2); text-decoration: none; }
.fc-fil a:hover { color: var(--fc-indigo); text-decoration: underline; }
.fc-kicker { display: inline-flex; align-items: center; gap: .55rem; margin: 0 0 .55rem;
  font-family: var(--fc-mono); font-size: .72rem; font-weight: 500; letter-spacing: .14em;
  text-transform: uppercase; color: var(--fc-accent); }
.fc-kicker::before { content: ""; width: 18px; height: 2px; background: currentColor; }
.fc-titre { font-family: var(--fc-display); font-weight: 700; font-size: clamp(1.85rem, 4.6vw, 2.9rem);
  line-height: 1.06; letter-spacing: -.028em; margin: 0 0 .75rem; max-width: 22ch; }
.fc-chapeau { font-size: 1.12rem; color: var(--fc-ink-2); max-width: 62ch; margin: 0 0 1.4rem; }
.fc-chapeau a { color: var(--fc-ink); }

/* ---------------------------------------------------------- sections */
.fc-section { margin-top: 2.6rem; }
.fc-section__tete { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between;
  gap: .4rem 2rem; padding-bottom: .8rem; margin-bottom: 1.1rem; border-bottom: 1px solid var(--fc-line); }
.fc-section__tete h2 { font-size: clamp(1.35rem, 3vw, 1.7rem); font-weight: 700; margin: 0; letter-spacing: -.02em; }
.fc-section__tete .fc-kicker { margin-bottom: .3rem; }
.fc-section__tete > p { margin: 0; color: var(--fc-ink-2); font-size: .95rem; max-width: 46ch; }
.fc-lien-fort { font-family: var(--fc-display); font-weight: 600; text-decoration: none; color: var(--fc-indigo); }
.fc-lien-fort:hover { text-decoration: underline; }

/* ------------------------------------------------------------ cartes */
.fc-card { background: var(--fc-surface); border: 1px solid var(--fc-line); border-radius: var(--fc-radius);
  box-shadow: var(--fc-shadow); }
.fc-card.p-3 { padding: 1.3rem 1.35rem !important; }
.fc-card > h2.h6, .fc-bloc-titre h2.h6, .fc-card > .h6 { font-family: var(--fc-display); font-size: 1.08rem;
  font-weight: 700; letter-spacing: -.01em; }
.fc-note { background: var(--fc-indigo-soft); border: 1px solid var(--fc-line); border-radius: var(--fc-radius-sm);
  padding: .7rem 1rem; 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; border-radius: 999px; padding: .55rem 1.3rem; }
.btn-fc:hover, .btn-fc:focus { background: #0F1838; border-color: #0F1838; color: #fff; }
[data-bs-theme="dark"] .btn-fc:hover { background: #C6D4F6; color: #0E1220; }
.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); border-radius: 999px; }
.btn-fc-ligne:hover { background: var(--fc-indigo-soft); color: var(--fc-indigo); }
.form-select, .form-control { border-radius: 999px; border-color: var(--fc-line); background-color: var(--fc-surface);
  font-family: var(--fc-display); padding-left: 1rem; min-height: 44px; }
.form-select:focus, .form-control:focus { border-color: var(--fc-indigo); box-shadow: 0 0 0 3px var(--fc-indigo-soft); }
.form-label { font-family: var(--fc-display); font-weight: 600; color: var(--fc-ink-2); }

/* ------------------------------------------------------------- accueil */
.fc-hero { display: grid; gap: 1.6rem; align-items: start; }
@media (min-width: 992px) { .fc-hero { grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: 3rem; padding-top: .8rem; } }
.fc-cherche { display: flex; flex-wrap: wrap; gap: .5rem; padding: .4rem; border: 1px solid var(--fc-line);
  border-radius: 999px; background: var(--fc-surface); box-shadow: var(--fc-shadow); max-width: 560px; }
.fc-cherche .form-select { flex: 1 1 200px; border: 0; box-shadow: none; }
.fc-cherche .fc-cherche__periode { flex: 0 1 150px; border-left: 1px solid var(--fc-line); border-radius: 0; }
.fc-cherche .btn { flex: 0 0 auto; }
@media (max-width: 575px) {
  .fc-cherche { border-radius: var(--fc-radius); }
  .fc-cherche .fc-cherche__periode { border-left: 0; border-top: 1px solid var(--fc-line); flex-basis: 100%; }
  .fc-cherche .btn { width: 100%; }
}

.fc-continent { background: var(--fc-surface); border: 1px solid var(--fc-line); border-radius: var(--fc-radius);
  box-shadow: var(--fc-shadow); padding: 1.2rem 1.25rem 1rem; }
.fc-continent__tete { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: .8rem; }
.fc-continent__tete a { font-family: var(--fc-display); font-weight: 600; font-size: .88rem; text-decoration: none; }
.fc-compteurs { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .5rem; margin: 0 0 1rem; }
.fc-compteur { border-radius: var(--fc-radius-sm); padding: .55rem .6rem .5rem; background: var(--fc-unk-soft); }
.fc-compteur dt { font-family: var(--fc-display); font-weight: 600; font-size: .72rem; color: var(--fc-ink-2); line-height: 1.2; }
.fc-compteur dd { margin: .15rem 0 0; font-family: var(--fc-display); font-weight: 700; font-size: 1.6rem; line-height: 1; }
.fc-compteur--ok   { background: var(--fc-ok-soft); }   .fc-compteur--ok dd   { color: var(--fc-ok); }
.fc-compteur--warn { background: var(--fc-warn-soft); } .fc-compteur--warn dd { color: var(--fc-warn); }
.fc-compteur--bad  { background: var(--fc-bad-soft); }  .fc-compteur--bad dd  { color: var(--fc-bad); }
.fc-compteur--unk dd { color: var(--fc-unk-ink); }
.fc-mosaique { list-style: none; padding: 0; margin: 0; display: grid; gap: 4px;
  grid-template-columns: repeat(9, minmax(0, 1fr)); }
.fc-mosaique li { margin: 0; }
.fc-tuile { display: grid; place-items: center; aspect-ratio: 1.25; border-radius: 5px; text-decoration: none;
  font-family: var(--fc-mono); font-size: .68rem; font-weight: 500; letter-spacing: .04em;
  transition: transform .12s ease, box-shadow .12s ease; }
.fc-tuile:hover { transform: translateY(-2px); box-shadow: 0 6px 14px -8px rgba(0,0,0,.5); z-index: 1; position: relative; }
.fc-tuile--normal   { background: var(--fc-ok-soft);   color: var(--fc-ok); }
.fc-tuile--degraded { background: var(--fc-warn);      color: #fff; }
.fc-tuile--outage   { background: var(--fc-bad);       color: #fff; }
.fc-tuile--unknown, .fc-tuile--absent { background: var(--fc-unk-soft); color: var(--fc-unk-ink); }
[data-bs-theme="dark"] .fc-tuile--degraded, [data-bs-theme="dark"] .fc-tuile--outage { color: #12151D; }
.fc-continent__note { font-size: .88rem; color: var(--fc-ink-2); margin: .8rem 0 0; }
@media (max-width: 400px) { .fc-mosaique { grid-template-columns: repeat(6, minmax(0, 1fr)); } .fc-compteur dd { font-size: 1.3rem; } }

.fc-regions { display: grid; gap: 1.4rem 2rem; }
@media (min-width: 768px) { .fc-regions { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1200px) { .fc-regions { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.fc-region__titre { display: flex; justify-content: space-between; align-items: baseline; gap: .6rem;
  font-size: 1rem; font-weight: 700; margin: 0 0 .5rem; padding-bottom: .4rem; border-bottom: 2px solid var(--fc-ink); }
.fc-region__titre a { color: var(--fc-ink); text-decoration: none; }
.fc-region__titre a:hover { color: var(--fc-indigo); }
.fc-region__titre span { font-family: var(--fc-mono); font-weight: 400; font-size: .74rem; color: var(--fc-ink-3); }
.fc-liste-pays { list-style: none; padding: 0; margin: 0; columns: 2; column-gap: 1.2rem; }
.fc-liste-pays li { break-inside: avoid; border-bottom: 1px dotted var(--fc-line); }
.fc-liste-pays a { display: block; padding: .38rem 0; color: var(--fc-ink); text-decoration: none; font-family: var(--fc-display); font-size: .94rem; }
.fc-liste-pays a:hover { color: var(--fc-indigo); text-decoration: underline; }

.fc-grille-outils { display: grid; gap: .9rem; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); }
.fc-carte-outil { display: flex; flex-direction: column; gap: .35rem; padding: 1.15rem 1.2rem; text-decoration: none;
  color: var(--fc-ink); background: var(--fc-surface); border: 1px solid var(--fc-line); border-radius: var(--fc-radius);
  box-shadow: var(--fc-shadow); transition: transform .15s ease, box-shadow .15s ease, border-color .15s; }
.fc-carte-outil:hover { transform: translateY(-3px); box-shadow: var(--fc-shadow-hover); border-color: var(--fc-indigo); color: var(--fc-ink); }
.fc-carte-outil .i { font-size: 1.35rem; color: var(--fc-accent); margin-bottom: .2rem; }
.fc-carte-outil strong { font-family: var(--fc-display); font-size: 1.05rem; }
.fc-carte-outil span { color: var(--fc-ink-2); font-size: .92rem; line-height: 1.5; }

/* ------------------------------------------------------------- l'état */
.fc-etat { position: relative; overflow: hidden; border-left: 0 !important; padding: 1.35rem 1.45rem !important;
  background: linear-gradient(105deg, var(--fc-unk-soft) 0%, var(--fc-surface) 62%); }
.fc-etat::before { content: ""; position: absolute; inset: 0 auto 0 0; width: 6px; background: var(--fc-unk); }
.fc-etat__ligne { display: flex; align-items: flex-start; gap: 1.1rem; }
.fc-etat__icone { flex: 0 0 auto; display: grid; place-items: center; width: 56px; height: 56px; border-radius: 50%;
  background: var(--fc-unk); color: #fff; font-size: 1.6rem; line-height: 1; }
[data-bs-theme="dark"] .fc-etat__icone { color: #12151D; }
.fc-etat__pays { font-family: var(--fc-mono); font-size: .74rem; letter-spacing: .12em; text-transform: uppercase; color: var(--fc-ink-3); }
.fc-etat__libelle { font-family: var(--fc-display); font-weight: 700; font-size: clamp(1.6rem, 3.6vw, 2.15rem);
  line-height: 1.08; letter-spacing: -.025em; color: var(--fc-unk-ink); margin-top: .1rem; }
.fc-etat__phrase { color: var(--fc-ink); margin: .5rem 0 0; font-size: 1.05rem; max-width: 64ch; }
.fc-etat__tech { font-family: var(--fc-mono); font-size: .76rem; color: var(--fc-ink-3); margin-top: .7rem; }
.fc-etat--ok   { background: linear-gradient(105deg, var(--fc-ok-soft) 0%, var(--fc-surface) 62%); }
.fc-etat--ok::before, .fc-etat--ok .fc-etat__icone { background: var(--fc-ok); }
.fc-etat--ok .fc-etat__libelle { color: var(--fc-ok); }
.fc-etat--warn { background: linear-gradient(105deg, var(--fc-warn-soft) 0%, var(--fc-surface) 62%); }
.fc-etat--warn::before, .fc-etat--warn .fc-etat__icone { background: var(--fc-warn); }
.fc-etat--warn .fc-etat__libelle { color: var(--fc-warn); }
.fc-etat--bad  { background: linear-gradient(105deg, var(--fc-bad-soft) 0%, var(--fc-surface) 62%); }
.fc-etat--bad::before, .fc-etat--bad .fc-etat__icone { background: var(--fc-bad); }
.fc-etat--bad .fc-etat__libelle { color: var(--fc-bad); }
@media (max-width: 575px) { .fc-etat__icone { width: 44px; height: 44px; font-size: 1.25rem; } }

.fc-pastille { display: inline-flex; align-items: center; gap: .4rem; padding: 3px 11px 3px 9px; border-radius: 999px;
  font-family: var(--fc-display); font-weight: 600; font-size: .78rem; white-space: nowrap; border: 0; }
.fc-pastille::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.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); }

/* ------------------------------------------------------------ outils */
.fc-outils { display: flex; flex-wrap: wrap; gap: .5rem; }
.fc-outil { display: inline-flex; align-items: center; gap: .45rem; min-height: 40px; padding: 0 1rem;
  border: 1px solid var(--fc-line); border-radius: 999px; background: var(--fc-surface); color: var(--fc-ink);
  text-decoration: none; font-family: var(--fc-display); font-weight: 600; font-size: .9rem;
  transition: border-color .15s, background .15s; }
.fc-outil:hover { border-color: var(--fc-indigo); background: var(--fc-indigo-soft); color: var(--fc-indigo); }
.fc-outil small { color: var(--fc-ink-3); font-family: var(--fc-mono); font-size: .72rem; }
.fc-outil .i { color: var(--fc-accent); }

/* ----------------------------------------------------------- signaux */
.fc-signal { background: var(--fc-paper-2); border: 1px solid var(--fc-line); border-radius: var(--fc-radius-sm);
  padding: 1rem 1rem .9rem; height: 100%; }
.fc-signal strong { font-family: var(--fc-display); font-weight: 700; }
.fc-chart { position: relative; height: 190px; margin-top: .6rem; }
.fc-chart--grand { height: 340px; }
@media (max-width: 575px) { .fc-chart--grand { height: 260px; } }
.fc-bloc-titre { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between;
  gap: 4px 12px; margin-bottom: .8rem; }
.fc-bloc-titre h2 { margin: 0; }
.fc-maj { font-family: var(--fc-mono); font-size: .74rem; color: var(--fc-ink-3); white-space: nowrap; }
.fc-help { line-height: 1.55; }

/* ------------------------------------------------------------ tableaux */
table.fc-tableau { color: var(--fc-ink); --bs-table-bg: transparent; --bs-table-striped-bg: transparent; }
table.fc-tableau > :not(caption) > * > * { padding: .7rem .6rem; border-bottom-color: var(--fc-line); background: transparent; }
table.fc-tableau th[scope="col"] { color: var(--fc-ink-3); font-family: var(--fc-mono); font-size: .68rem;
  letter-spacing: .1em; text-transform: uppercase; font-weight: 500; border-bottom: 1px solid var(--fc-ink); }
table.fc-tableau tbody tr { transition: background .12s; }
table.fc-tableau tbody tr:hover { background: var(--fc-paper-2); }
table.fc-tableau th[scope="row"] a { color: var(--fc-ink); text-decoration: none; font-family: var(--fc-display);
  font-weight: 600; 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: .7rem; text-align: left; }
.fc-tableau__groupe th { background: transparent !important; font-family: var(--fc-display); font-size: .8rem;
  text-transform: uppercase; letter-spacing: .08em; padding-top: 1.3rem !important; border-bottom: 2px solid var(--fc-ink) !important; }
.fc-tableau__groupe a { color: var(--fc-ink); text-decoration: none; }
.fc-num { font-family: var(--fc-mono); font-variant-numeric: tabular-nums; white-space: nowrap; }
.fc-ecart { display: inline-block; padding: .05rem .5rem; border-radius: 999px; background: var(--fc-unk-soft); color: var(--fc-unk-ink); font-size: .85rem; }
.fc-ecart--bas { background: var(--fc-bad-soft); color: var(--fc-bad); font-weight: 500; }
.fc-ecart--haut { background: var(--fc-warn-soft); color: var(--fc-warn); }

/* --------------------------------------------------- liste des pays */
.fc-pays { list-style: none; padding: 0; margin: 0; display: grid; gap: 6px 10px;
  grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); }
.fc-pays a { display: flex; align-items: center; gap: 8px; padding: .5rem .2rem; border-bottom: 1px dotted var(--fc-line);
  text-decoration: none; color: var(--fc-ink); font-family: var(--fc-display); font-size: .95rem; }
.fc-pays a::after { content: "→"; margin-left: auto; color: var(--fc-ink-3); opacity: 0; transition: opacity .15s, transform .15s; }
.fc-pays a:hover { color: var(--fc-indigo); }
.fc-pays a:hover::after { opacity: 1; transform: translateX(2px); }
.fc-liste-outils { padding-left: 1.1rem; }
.fc-liste-outils li { margin-bottom: .45rem; }

/* ------------------------------------------------------ questions */
.fc-faq__item { padding: 1rem 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-ink); font-family: var(--fc-display); font-weight: 700; font-size: 1.05rem; }
.fc-faq__item p { color: var(--fc-ink-2); max-width: 70ch; margin-bottom: 0; }
details.fc-card summary { cursor: pointer; font-family: var(--fc-display); font-weight: 700; }

/* ------------------------------------------------------- citer, code */
.fc-citer { border: 1px solid var(--fc-line); border-radius: var(--fc-radius-sm); overflow: hidden; }
.fc-citer__tete { display: flex; justify-content: space-between; align-items: center; padding: .35rem .5rem .35rem .85rem;
  background: var(--fc-paper-2); border-top: 1px solid var(--fc-line); font-family: var(--fc-mono);
  font-size: .7rem; letter-spacing: .1em; text-transform: uppercase; color: var(--fc-ink-2); }
.fc-citer__tete:first-child { border-top: 0; }
.fc-citer p, .fc-citer pre { margin: 0; padding: .8rem .9rem; font-size: .9rem; white-space: pre-wrap; overflow-wrap: anywhere;
  color: var(--fc-ink); background: var(--fc-surface); }
.fc-citer pre, .fc-code { font-family: var(--fc-mono); font-size: .78rem; }
.fc-code { white-space: pre-wrap; overflow-wrap: anywhere; background: var(--fc-paper-2); border: 1px solid var(--fc-line);
  border-radius: var(--fc-radius-sm); padding: .65rem .8rem; color: var(--fc-ink); }
.fc-copier { min-height: 30px; padding: 0 .75rem; border: 1px solid var(--fc-line); border-radius: 999px; background: var(--fc-surface);
  color: var(--fc-ink); font-family: var(--fc-display); font-size: .78rem; font-weight: 600; cursor: pointer; }
.fc-copier:hover { border-color: var(--fc-indigo); color: var(--fc-indigo); }

/* ------------------------------------------------------------ méthode */
.fc-sommaire { display: flex; flex-wrap: wrap; gap: .4rem; list-style: none; padding: 0; }
.fc-sommaire a { display: inline-flex; align-items: center; min-height: 34px; padding: 0 .85rem; border: 1px solid var(--fc-line);
  border-radius: 999px; background: var(--fc-surface); color: var(--fc-ink); text-decoration: none; font-family: var(--fc-display); font-size: .86rem; }
.fc-sommaire a:hover { border-color: var(--fc-indigo); color: var(--fc-indigo); }
.fc-prose { max-width: 820px; }
.fc-prose h2 { font-family: var(--fc-display); font-weight: 700; letter-spacing: -.015em; }
.fc-prose dt { font-family: var(--fc-display); margin-top: .7rem; }
.fc-prose dd { margin-bottom: .3rem; color: var(--fc-ink-2); }
.fc-prose code { font-family: var(--fc-mono); font-size: .82em; overflow-wrap: anywhere; background: var(--fc-paper-2);
  padding: .05rem .35rem; border-radius: 4px; }
.fc-sous-titre { display: flex; align-items: baseline; gap: .6rem; font-family: var(--fc-display); font-size: .85rem;
  font-weight: 700; text-transform: uppercase; letter-spacing: .06em; margin: .4rem 0 .5rem; }

/* --------------------------------------------------------------- pied */
.fc-footer { margin-top: 3rem; background: #16224A; color: rgba(255,255,255,.78); border-top: 3px solid var(--fc-accent); font-size: .9rem; }
[data-bs-theme="dark"] .fc-footer { background: #0E1430; }
.fc-footer__grille { display: grid; gap: 1.4rem; padding-top: 2rem; padding-bottom: 2.2rem; }
@media (min-width: 768px) { .fc-footer__grille { grid-template-columns: minmax(0, 1fr) minmax(0, 1.6fr); gap: 3rem; } }
.fc-footer p { margin: 0 0 .8rem; }
.fc-footer a { color: #fff; }
.fc-footer__marque { font-family: var(--fc-display); font-weight: 700; color: #fff; font-size: 1.05rem; }
.fc-footer__marque .i { color: var(--fc-accent); }
.fc-footer__mention { color: rgba(255,255,255,.66); font-size: .84rem; }
.fc-theme { background: transparent; border: 1px solid rgba(255,255,255,.35); color: #fff; border-radius: 999px;
  padding: 4px 14px; font-family: var(--fc-mono); font-size: .74rem; }
.fc-theme:hover { background: rgba(255,255,255,.1); }

@media print {
  .fc-header, .fc-footer, form, .fc-theme, details, .fc-outils, .fc-copier { display: none !important; }
  .fc-card, .fc-continent { box-shadow: none; border-color: #999; }
  .fc-faq__item, table.fc-tableau tr { break-inside: avoid; }
}

/* Téléphone : une seule ligne de navigation, défilante ; compteurs sur deux colonnes. */
@media (max-width: 767px) {
  .fc-nav { flex-wrap: nowrap; overflow-x: auto; width: 100%; margin: 0 -.4rem; scrollbar-width: none; }
  .fc-nav::-webkit-scrollbar { display: none; }
  .fc-nav a { white-space: nowrap; }
}
@media (max-width: 479px) {
  .fc-compteurs { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.fc-continent__tete a { white-space: nowrap; }