/* =============================================================
   BCET — Feuille de styles globale
   /public/assets/css/bcet.css
   ============================================================= */

/* ── Design Tokens ── */
:root {

  /* Typographie */
  --font:        'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-mono:   'Fira Code', 'Consolas', monospace;

  /* Layout */
  --nav-h:       68px;
  --alert-h:     48px;
  --page-offset: calc(var(--nav-h) + var(--alert-h));
  --max-w:       1400px;

  /* Espacements — échelle compacte (base 4px) */
  --sp-1: 4px;  --sp-2: 8px;  --sp-3: 12px; --sp-4: 16px;
  --sp-5: 20px; --sp-6: 24px; --sp-8: 32px;
  --gutter:    32px;          /* marge latérale des pages */
  --section-y: 28px;          /* marge verticale des sections */
  --hero-y:    24px;          /* marge verticale des bandeaux de titre */
  --hero-min:  200px;         /* hauteur minimale des bandeaux avec image */
  --stack:     20px;          /* écart entre deux blocs d'une section */
  --gap:       16px;          /* écart des grilles */
  --gap-lg:    20px;          /* écart des grilles principales (colonnes) */
  --card-p:    18px;          /* marge intérieure des cartes */

  /* Radiants */
  --r-sm:  6px;
  --r-md:  10px;
  --r-lg:  14px;
  --r-xl:  20px;

  /* Ombres */
  --sh-sm: 0 1px 3px rgba(0,0,0,.07);
  --sh-md: 0 4px 16px rgba(0,0,0,.09);
  --sh-lg: 0 8px 32px rgba(0,0,0,.13);

  /* Transitions */
  --tr-fast:   .13s ease;
  --tr-normal: .22s ease;
  --tr-slow:   .4s ease;
}

/* ── Reset & Base ── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; font-size: 16px; }
body {
  font-family: var(--font);
  background: var(--gray-50);
  color: var(--gray-900);
  overflow-x: hidden;
  line-height: 1.5;
}
a  { text-decoration: none; color: inherit; }
ul { list-style: none; }
button { font-family: var(--font); cursor: pointer; }
img, svg { display: block; max-width: 100%; }

/* ── Skip link (accessibilité) ── */
.skip-link {
  position: absolute;
  top: -100%;
  left: 16px;
  background: var(--orange);
  color: white;
  padding: 8px 16px;
  border-radius: 0 0 var(--r-sm) var(--r-sm);
  font-weight: 700;
  z-index: 9999;
}
.skip-link:focus { top: 0; }

/* ── Page main offset ── */
.page-main { margin-top: var(--page-offset); }

/* ── Paragraphes : alignement uniforme et texte justifié sur tout le site ── */
.page-main p { text-align: justify; hyphens: auto; -webkit-hyphens: auto; }
.page-main p.no-justify,
.page-main [style*="text-align:center"] p,
.page-main [style*="text-align: center"] p { text-align: inherit; }

/* ── Nom de la plateforme ── */
.platform-name {
  background: linear-gradient(90deg, var(--navy-dk), var(--navy));
  color: var(--white);
  padding: 22px 28px;
  display: flex; align-items: center; justify-content: center; gap: 18px;
  text-align: center;
}
.platform-name img { width: 54px; height: 54px; border-radius: 50%; background: var(--white); object-fit: contain; flex-shrink: 0; }
.platform-name h1 {
  font-size: clamp(18px, 2.6vw, 30px); font-weight: 800; letter-spacing: .6px; line-height: 1.25;
  text-transform: uppercase;
}
.platform-name h1 span { color: var(--orange); }

/* ── Flash message ── */
.flash-success {
  display: flex;
  align-items: center;
  gap: 8px;
  background: var(--green-lt);
  border: 1px solid var(--green);
  border-radius: var(--r-md);
  color: var(--green-900);
  font-size: 13.5px;
  font-weight: 600;
  padding: 12px 20px;
  margin: 8px 32px;
}

/* ── Scroll to top ── */
.scroll-top {
  position: fixed;
  bottom: 28px;
  right: 28px;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--orange);
  color: white;
  border: none;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 16px rgba(249, 115, 22, .4);
  opacity: 0;
  pointer-events: none;
  transform: translateY(12px);
  transition: opacity .25s ease, transform .25s ease;
  z-index: 999;
}
.scroll-top.is-visible {
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0);
}

/* Bouton flottant de déconnexion (à gauche : le retour en haut occupe la droite). */
.logout-fab {
  position: fixed;
  bottom: 28px;
  left: 28px;
  z-index: 999;
  margin: 0;
}
.logout-fab-btn {
  display: flex;
  align-items: center;
  gap: 8px;
  height: 44px;
  padding: 0 18px 0 14px;
  border: none;
  border-radius: 22px;
  background: var(--navy);
  color: var(--white);
  font: 600 13px/1 var(--font);
  cursor: pointer;
  box-shadow: 0 4px 16px rgba(30, 58, 95, .35);
  transition: background var(--tr-fast), transform var(--tr-fast);
}
.logout-fab-btn:hover { background: var(--red); transform: translateY(-2px); }
.logout-fab-btn:focus-visible { outline: 3px solid var(--orange); outline-offset: 2px; }
@media (max-width: 640px) {
  .logout-fab { bottom: 16px; left: 16px; }
  .logout-fab-btn { width: 44px; padding: 0; justify-content: center; }
  .logout-fab-label { display: none; }
}

/* ── NAVBAR ── */
.navbar {
  position: fixed; top: 0; left: 0; right: 0;
  z-index: 1000;
  background: var(--white);
  height: var(--nav-h);
  border-bottom: 1px solid var(--gray-200);
  box-shadow: var(--sh-sm);
  display: flex; align-items: center;
  padding: 0 28px; gap: 0;
  transition: box-shadow var(--tr-fast);
}
.navbar.scrolled { box-shadow: 0 2px 18px rgba(0,0,0,.1); }

.nb-brand { display: flex; align-items: center; gap: 10px; margin-right: 24px; flex-shrink: 0; }
.nb-logo  { width: 44px; height: 44px; border-radius: 50%; border: 2px solid var(--gray-200); display: flex; align-items: center; justify-content: center; background: var(--white); }
.nb-text .name { font-size: 15px; font-weight: 700; color: var(--navy); letter-spacing: .3px; }
.nb-text .sub  { font-size: 9px; color: var(--gray-500); max-width: 160px; line-height: 1.3; }
.nb-badge      { display: inline-block; background: var(--blue-900); color: white; font-size: 6px; font-weight: 800; padding: 2px 5px; border-radius: 2px; margin-top: 2px; }
.nb-div        { width: 1px; height: 30px; background: var(--gray-300); margin-right: 16px; flex-shrink: 0; }

.nb-links { display: flex; align-items: center; gap: 1px; flex: 1; }
.nb-login { margin-left: auto; }
/* La recherche prend l'espace libre et pousse le bouton TDBS à droite */
/* Recherche : un bouton rond qui ouvre la fenêtre plein écran, et pousse le bouton TDBS à droite. */
.nb-recherche { margin-left: auto; margin-right: 10px; flex-shrink: 0; }
.nb-recherche ~ .nb-login { margin-left: 0; flex-shrink: 0; }
.nb-recherche-btn {
  width: 38px; height: 38px; flex-shrink: 0; border-radius: 50%; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  border: 1.5px solid var(--orange); background: var(--white); color: var(--orange);
  transition: background var(--tr-fast), color var(--tr-fast), box-shadow var(--tr-fast);
}
.nb-recherche-btn:hover { background: var(--orange); color: var(--white); box-shadow: 0 3px 10px rgba(249,115,22,.3); }
.nb-recherche-btn:focus-visible { outline: 2px solid var(--orange); outline-offset: 2px; }
.nb-recherche-btn svg { width: 16px; height: 16px; }
.nb-recherche-mobile { display: none; }
.nb-link.nb-login-btn,
.nb-link.nb-login-btn:hover,
.nb-link.nb-login-btn.active { color: var(--white); background: var(--orange); font-weight: 600; justify-content: center; border-radius: 24px; padding: 7px 18px; }
.nb-link.nb-login-btn:hover { opacity: .9; }
/* Tableau de Bord Stratégique : bouton principal de la barre, bien visible. */
.nb-link.nb-tdbs { gap: 8px; padding: 6px 16px 6px 12px; box-shadow: 0 3px 12px rgba(249,115,22,.35); }
.nb-link.nb-tdbs svg { width: 18px; height: 18px; opacity: 1; }
.nb-tdbs-text { display: flex; flex-direction: column; line-height: 1.15; }
.nb-tdbs-text small { font-size: 9.5px; font-weight: 500; opacity: .85; letter-spacing: .3px; }
.nb-link.nb-login-btn.active::after { display: none; }
.nb-link  {
  display: flex; align-items: center; gap: 5px;
  padding: 6px 11px; font-size: 13px; font-weight: 500;
  color: var(--gray-700); border-radius: var(--r-sm);
  transition: all var(--tr-fast); white-space: nowrap; position: relative;
}
.nb-link svg { width: 14px; height: 14px; opacity: .65; flex-shrink: 0; }
.nb-link:hover  { color: var(--navy); background: var(--gray-100); }
.nb-link.active { color: var(--navy); background: rgba(22,163,74,.07); }
.nb-link.active::after {
  content: ''; position: absolute; bottom: -1px; left: 50%; transform: translateX(-50%);
  width: 22px; height: 2.5px; background: var(--green); border-radius: 2px 2px 0 0;
}
.nb-link.active svg { opacity: 1; }

/* Langue : bascule FR | EN, qui pilote le widget Google Translate (bcet.js). */
.nb-langue-item { margin-left: 8px; flex-shrink: 0; }
.nb-langue {
  display: inline-flex; align-items: center; gap: 2px; padding: 2px;
  border: 1px solid var(--gray-200); border-radius: 20px; background: var(--gray-50);
}
.nb-langue-btn {
  border: 0; background: none; cursor: pointer;
  font: inherit; font-size: 11px; font-weight: 700; letter-spacing: .5px; line-height: 1;
  color: var(--gray-500); padding: 6px 10px; border-radius: 16px;
  transition: color var(--tr-fast), background var(--tr-fast);
}
/* Couleur de la marque, comme le bouton du Tableau de Bord et celui de la recherche. */
.nb-langue-btn:hover { color: var(--orange-600); }
.nb-langue-btn[aria-pressed="true"] { background: var(--orange); color: var(--white); cursor: default; box-shadow: 0 2px 8px rgba(249,115,22,.3); }
.nb-langue-btn:focus-visible { outline: 2px solid var(--orange); outline-offset: 2px; }
.nb-mobile-menu .nb-langue { align-self: flex-start; margin: 4px 0 8px 11px; }

/* Le widget de Google reste invisible : sa barre du haut, ses infobulles et
   le surlignage du texte traduit sont masqués. Ces classes sont celles de
   Google et peuvent changer : à revoir si la barre réapparaît. */
#google_translate_element,
.skiptranslate > iframe,
.goog-te-banner-frame,
.goog-te-balloon-frame,
#goog-gt-tt,
.VIpgJd-ZVi9od-ORHb-OEVmcd,
.VIpgJd-ZVi9od-aZ2wEe-wOHMyf,
.VIpgJd-yAWNEb-L7lbkb { display: none !important; }
body { top: 0 !important; }
.goog-text-highlight,
.VIpgJd-yAWNEb-VIpgJd-fmcmS-sn54Q { background: none !important; box-shadow: none !important; }

/* Fenêtre de recherche plein écran (partials.recherche-fenetre). */
.rf {
  position: fixed; inset: 0; width: 100%; height: 100%; max-width: none; max-height: none;
  margin: 0; padding: 0; border: 0; background: rgba(15,23,42,.72); backdrop-filter: blur(4px);
}
.rf[open] { display: flex; align-items: flex-start; justify-content: center; overflow-y: auto; }
.rf::backdrop { background: transparent; }
body:has(.rf[open]) { overflow: hidden; }
.rf-boite {
  position: relative; width: min(760px, calc(100% - 32px)); margin: 12vh 0 24px;
  background: var(--white); border-radius: 16px; padding: 32px 32px 24px;
  box-shadow: 0 24px 60px rgba(15,23,42,.35);
}
.rf-fermer {
  position: absolute; top: 14px; right: 14px; width: 36px; height: 36px; border-radius: 50%;
  border: 0; background: var(--gray-100); color: var(--gray-600); cursor: pointer;
  display: flex; align-items: center; justify-content: center;
}
.rf-fermer:hover { background: var(--gray-200); color: var(--navy); }
.rf-fermer:focus-visible { outline: 2px solid var(--orange); outline-offset: 2px; }
.rf-titre { font-size: 20px; font-weight: 800; color: var(--navy); margin: 0 44px 16px 0; }
.rf-champ {
  display: flex; align-items: center; gap: 10px;
  border: 2px solid var(--orange); border-radius: 14px; padding: 6px 6px 6px 16px;
}
.rf-champ:focus-within { box-shadow: 0 0 0 4px rgba(249,115,22,.15); }
.rf-champ > svg { width: 20px; height: 20px; color: var(--orange); flex-shrink: 0; }
.rf-champ input {
  flex: 1; min-width: 0; border: 0; outline: 0; background: transparent;
  font: inherit; font-size: 17px; color: var(--gray-900); padding: 10px 0;
}
.rf-envoyer {
  flex-shrink: 0; border: 0; border-radius: 10px; background: var(--orange); color: var(--white);
  font: inherit; font-size: 14px; font-weight: 700; padding: 11px 20px; cursor: pointer;
  transition: background var(--tr-fast);
}
.rf-envoyer:hover { background: var(--orange-600); }
.rf-envoyer:focus-visible { outline: 2px solid var(--navy); outline-offset: 2px; }
/* Focus : pastilles à choix unique ; la choisie prend l'orange de la marque. */
.rf-focus { border: 0; padding: 0; margin: 20px 0 0; display: flex; flex-wrap: wrap; gap: 8px; }
.rf-focus legend {
  padding: 0; margin-bottom: 10px; font-size: 11px; font-weight: 700;
  letter-spacing: .5px; text-transform: uppercase; color: var(--gray-500);
}
.rf-option { position: relative; }
.rf-option input { position: absolute; inset: 0; opacity: 0; margin: 0; cursor: pointer; }
.rf-option span {
  display: inline-block; padding: 7px 14px; border-radius: 20px; border: 1.5px solid var(--gray-200);
  font-size: 13px; font-weight: 600; color: var(--gray-700); background: var(--white);
  transition: border-color var(--tr-fast), background var(--tr-fast), color var(--tr-fast);
}
.rf-option:hover span { border-color: var(--orange); color: var(--orange-600); }
.rf-option input:checked + span { background: var(--orange); border-color: var(--orange); color: var(--white); }
.rf-option input:focus-visible + span { outline: 2px solid var(--orange); outline-offset: 2px; }
.rf-aide { margin-top: 18px; font-size: 12px; color: var(--gray-500); line-height: 1.6; }
@media (max-width: 640px) {
  .rf-boite { width: 100%; min-height: 100%; margin: 0; border-radius: 0; padding: 60px 16px 20px; }
  .rf-champ { flex-wrap: wrap; padding: 6px 6px 6px 12px; }
  .rf-envoyer { width: 100%; }
}

/* Assistant IA : bouton « IA » à côté de la recherche, panneau latéral droit (partials.assistant-ia). */
.nb-recherche { display: flex; align-items: center; gap: 8px; }
.nb-ia-btn {
  height: 38px; flex-shrink: 0; display: inline-flex; align-items: center; gap: 6px;
  padding: 0 13px 0 10px; border-radius: 19px; border: 1.5px solid var(--navy);
  background: var(--white); color: var(--navy); font: inherit; font-size: 12.5px; font-weight: 800;
  cursor: pointer; transition: background var(--tr-fast), color var(--tr-fast);
}
.nb-ia-btn:hover { background: var(--navy); color: var(--white); }
.nb-ia-btn:focus-visible { outline: 2px solid var(--navy); outline-offset: 2px; }
.nb-ia-btn svg { width: 16px; height: 16px; }
.nb-ia-mobile { display: none; }

.ia {
  position: fixed; inset: 0 0 0 auto; width: min(760px, 100%); height: 100%; height: 100dvh; max-width: none; max-height: none;
  margin: 0; padding: 0; border: 0; background: var(--white); box-shadow: -8px 0 40px rgba(15,23,42,.22);
}
.ia[open] { display: flex; animation: ia-entree .22s ease-out; }
.ia::backdrop { background: rgba(15,23,42,.45); backdrop-filter: blur(2px); }
@keyframes ia-entree { from { transform: translateX(100%); } to { transform: none; } }
body:has(.ia[open]) { overflow: hidden; }
.ia-panneau { display: flex; flex-direction: column; width: 100%; height: 100%; min-height: 0; }

/* En-tête clair : marque, nouvelle conversation, fermeture. */
.ia-entete { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 18px; border-bottom: 1px solid var(--gray-200); }
.ia-marque { display: flex; align-items: center; gap: 11px; min-width: 0; }
.ia-avatar {
  width: 34px; height: 34px; flex-shrink: 0; border-radius: 10px; display: flex; align-items: center; justify-content: center;
  background: linear-gradient(135deg, var(--navy) 0%, var(--blue-800) 100%); color: var(--white);
}
.ia-marque h2 { margin: 0; font-size: 16px; font-weight: 800; color: var(--navy); line-height: 1.2; }
.ia-sous-titre { margin: 2px 0 0; font-size: 11.5px; color: var(--gray-500); }
.ia-entete-actions { display: flex; align-items: center; gap: 6px; flex-shrink: 0; }
.ia-nouvelle {
  display: inline-flex; align-items: center; gap: 6px; height: 34px; padding: 0 12px; border-radius: 9px; cursor: pointer;
  border: 1px solid var(--gray-200); background: var(--white); font: inherit; font-size: 12.5px; font-weight: 600; color: var(--gray-700);
}
.ia-nouvelle:hover { border-color: var(--navy); color: var(--navy); }
.ia-nouvelle[hidden] { display: none; }
.ia-fermer {
  width: 34px; height: 34px; border-radius: 9px; border: 0; cursor: pointer;
  display: flex; align-items: center; justify-content: center; background: transparent; color: var(--gray-500);
}
.ia-fermer:hover { background: var(--gray-100); color: var(--gray-900); }
.ia-nouvelle:focus-visible, .ia-fermer:focus-visible { outline: 2px solid var(--navy); outline-offset: 2px; }
.ia-form { flex: 1; min-height: 0; display: flex; flex-direction: column; }

/* Contexte, replié dans la zone de saisie : puces des processus choisis (ou « Tout le portail »),
   et la liste des processus, dépliée par le bouton « Processus ». */
.ia-puces { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; min-width: 0; margin-bottom: 8px; }
.ia-contexte-titre { font-size: 10.5px; font-weight: 700; letter-spacing: .5px; text-transform: uppercase; color: var(--gray-400); }
.ia-puce {
  display: inline-flex; align-items: center; gap: 5px; max-width: 260px; height: 26px; padding: 0 9px; border-radius: 13px;
  border: 1px solid var(--gray-200); background: var(--gray-50); font: inherit; font-size: 12px; color: var(--gray-600);
}
.ia-puce[hidden] { display: none; }
.ia-puce-processus { cursor: pointer; border-color: var(--navy-lt); background: var(--navy-lt); color: var(--navy); }
.ia-puce-processus:hover { border-color: var(--navy); }
.ia-puce-processus:focus-visible { outline: 2px solid var(--navy); outline-offset: 2px; }
.ia-puce-titre { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.ia-puce svg { flex-shrink: 0; }
.ia-ajout {
  display: inline-flex; align-items: center; gap: 4px; height: 30px; padding: 0 10px; border-radius: 8px; cursor: pointer;
  border: 1px solid var(--gray-200); background: var(--white); font: inherit; font-size: 12px; font-weight: 600; color: var(--gray-700);
}
.ia-ajout:hover { border-color: var(--navy); color: var(--navy); }
.ia-ajout[aria-expanded="true"] { border-color: var(--navy); background: var(--navy-lt); color: var(--navy); }
.ia-ajout:focus-visible { outline: 2px solid var(--navy); outline-offset: 2px; }
.ia-liste { margin: 0 0 10px; padding: 0 0 10px; border: 0; border-bottom: 1px solid var(--gray-100); }
.ia-liste[hidden] { display: none; }
.ia-liste legend { float: left; width: 100%; padding: 0; font-size: 10.5px; font-weight: 700; letter-spacing: .5px; text-transform: uppercase; color: var(--gray-400); }
.ia-liste-aide { clear: both; margin: 0; padding: 2px 0 6px; font-size: 12px; color: var(--gray-500); }
.ia-processus {
  clear: both; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 280px), 1fr)); gap: 2px 6px;
  max-height: min(200px, 28vh); overflow-y: auto; overscroll-behavior: contain;
}
.ia-option { display: flex; align-items: flex-start; gap: 10px; padding: 8px 10px; border-radius: 8px; cursor: pointer; font-size: 13px; line-height: 1.4; color: var(--gray-700); }
.ia-option:hover { background: var(--gray-50); }
.ia-option:has(input:checked) { background: var(--navy-lt); }
.ia-option input { margin: 2px 0 0; accent-color: var(--navy); flex-shrink: 0; }
.ia-option strong { color: var(--navy); margin-right: 3px; }

/* Fil : accueil, puis questions (bulles) et réponses (texte pleine largeur). */
/* Le défilement reste dans le fil : il ne passe pas à la page derrière. */
.ia-fil { flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding: 20px 24px 8px; }
.ia-accueil { display: flex; flex-direction: column; align-items: center; text-align: center; padding: 28px 8px 8px; }
.ia-accueil[hidden] { display: none; }
.ia-accueil-icone {
  width: 52px; height: 52px; border-radius: 16px; display: flex; align-items: center; justify-content: center;
  background: var(--navy-lt); color: var(--navy);
}
.ia-accueil h3 { margin: 14px 0 6px; font-size: 19px; font-weight: 800; color: var(--navy); }
.ia-accueil p { margin: 0 0 18px; max-width: 380px; font-size: 13px; line-height: 1.6; color: var(--gray-500); }
.ia-exemples { display: grid; gap: 8px; width: 100%; }
.ia-exemple {
  padding: 11px 14px; text-align: left; cursor: pointer; border: 1px solid var(--gray-200); border-radius: 12px; background: var(--white);
  font: inherit; font-size: 13px; color: var(--gray-700); transition: border-color var(--tr-fast), background var(--tr-fast);
}
.ia-exemple:hover { border-color: var(--navy); background: var(--gray-50); color: var(--navy); }
.ia-exemple:focus-visible { outline: 2px solid var(--navy); outline-offset: 2px; }
.ia-messages { display: flex; flex-direction: column; gap: 22px; }
.ia-tour { display: flex; flex-direction: column; gap: 14px; }
.ia-question {
  align-self: flex-end; max-width: 85%; padding: 9px 14px; border-radius: 16px 16px 4px 16px; background: var(--gray-100);
  font-size: 14px; line-height: 1.55; color: var(--gray-900); white-space: pre-wrap; overflow-wrap: anywhere;
}
.ia-reponse { display: flex; gap: 11px; align-items: flex-start; }
.ia-reponse .ia-avatar { width: 28px; height: 28px; border-radius: 8px; }
.ia-reponse .ia-avatar svg { width: 15px; height: 15px; }
.ia-reponse-corps { flex: 1; min-width: 0; padding-top: 3px; }
.ia-reponse-texte { font-size: 14px; line-height: 1.7; color: var(--gray-800); white-space: pre-wrap; overflow-wrap: anywhere; }
/* Curseur clignotant pendant l'écriture. */
.ia-ecrit .ia-reponse-texte::after {
  content: ''; display: inline-block; width: 7px; height: 15px; margin-left: 2px; vertical-align: -2px;
  background: var(--navy); border-radius: 1px; animation: ia-curseur 1s steps(2, start) infinite;
}
@keyframes ia-curseur { to { visibility: hidden; } }
.ia-attente { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; color: var(--gray-500); }
.ia-attente::before {
  content: ''; width: 14px; height: 14px; border-radius: 50%; border: 2px solid var(--gray-200); border-top-color: var(--navy);
  animation: ia-rotation .8s linear infinite;
}
@keyframes ia-rotation { to { transform: rotate(360deg); } }
.ia-cite {
  display: inline-block; min-width: 18px; padding: 0 4px; margin: 0 1px; border-radius: 5px; text-align: center; text-decoration: none;
  background: var(--blue-100); color: var(--blue-800); font-size: 11px; font-weight: 700; line-height: 17px; vertical-align: 1px;
}
a.ia-cite:hover { background: var(--blue-800); color: var(--white); }
.ia-note { margin-top: 6px; font-size: 12px; font-style: italic; color: var(--gray-500); }
.ia-erreur {
  display: flex; gap: 8px; align-items: flex-start; margin-top: 4px; padding: 10px 12px; border-radius: 10px;
  background: var(--red-lt); color: var(--red); font-size: 13px; line-height: 1.5;
}
.ia-sources { display: grid; gap: 6px; margin-top: 12px; }
.ia-sources-titre { font-size: 11px; font-weight: 700; letter-spacing: .5px; text-transform: uppercase; color: var(--gray-500); }
.ia-source {
  display: flex; align-items: center; gap: 10px; padding: 8px 10px; border: 1px solid var(--gray-200); border-radius: 10px;
  text-decoration: none; color: var(--gray-800); transition: border-color var(--tr-fast), background var(--tr-fast);
}
.ia-source:hover { border-color: var(--navy); background: var(--gray-50); }
.ia-source .ia-cite { flex-shrink: 0; }
.ia-source-texte { min-width: 0; display: flex; flex-direction: column; }
.ia-source-rubrique { font-size: 10.5px; font-weight: 700; letter-spacing: .4px; text-transform: uppercase; color: var(--gray-500); }
.ia-source-titre { font-size: 13px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ia-reponse-actions { display: flex; align-items: center; gap: 10px; margin-top: 8px; }
.ia-copier {
  display: inline-flex; align-items: center; gap: 5px; padding: 4px 8px; border: 0; border-radius: 7px; cursor: pointer;
  background: transparent; font: inherit; font-size: 12px; color: var(--gray-500);
}
.ia-copier:hover { background: var(--gray-100); color: var(--gray-900); }
.ia-copier:focus-visible { outline: 2px solid var(--navy); outline-offset: 2px; }

/* Saisie : le champ grandit avec le texte ; le bouton envoie, ou arrête la réponse en cours. */
.ia-composeur { padding: 10px 24px 12px; }
.ia-saisie {
  border: 1.5px solid var(--gray-200); border-radius: 16px; background: var(--white); padding: 10px 10px 8px 14px;
  transition: border-color var(--tr-fast), box-shadow var(--tr-fast);
}
.ia-saisie:focus-within { border-color: var(--navy); box-shadow: 0 0 0 3px rgba(30,58,95,.1); }
.ia-saisie textarea {
  display: block; width: 100%; min-height: 24px; max-height: 180px; resize: none; padding: 2px 0; border: 0; outline: none;
  font: inherit; font-size: 14px; line-height: 1.55; color: var(--gray-900); background: transparent;
}
.ia-saisie-bas { display: flex; align-items: center; gap: 10px; margin-top: 6px; }
.ia-raccourci { flex: 1; min-width: 0; font-size: 11px; color: var(--gray-400); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ia-envoyer {
  width: 36px; height: 36px; flex-shrink: 0; margin-left: auto; border: 0; border-radius: 10px; cursor: pointer;
  display: flex; align-items: center; justify-content: center; background: var(--navy); color: var(--white);
}
.ia-envoyer:hover { background: var(--blue-800); }
.ia-envoyer:focus-visible { outline: 2px solid var(--navy); outline-offset: 2px; }
.ia-icone-arreter, .ia-en-cours .ia-icone-envoyer { display: none; }
.ia-en-cours .ia-icone-arreter { display: block; }
.ia-avertissement { margin: 7px 2px 0; font-size: 11px; text-align: center; color: var(--gray-400); }
.ia-connexion { padding: 24px 18px; font-size: 14px; line-height: 1.6; color: var(--gray-700); }
.ia-connecter { display: inline-block; margin-top: 12px; padding: 10px 18px; border-radius: 10px; background: var(--orange); color: var(--white); font-weight: 700; text-decoration: none; }
.ia-connecter:hover { background: var(--orange-600); }
@media (max-width: 560px) {
  .ia-nouvelle span, .ia-sous-titre, .ia-raccourci { display: none; }
  .ia-nouvelle { width: 34px; padding: 0; justify-content: center; }
  .ia-composeur { padding-left: 14px; padding-right: 14px; }
  .ia-fil { padding: 16px 14px 8px; }
}
/* Écran bas : l'accueil se resserre pour laisser voir les exemples. */
@media (max-height: 700px) {
  .ia-accueil { padding-top: 4px; }
  .ia-accueil-icone { display: none; }
  .ia-accueil h3 { margin-top: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .ia[open], .ia-ecrit .ia-reponse-texte::after, .ia-attente::before { animation: none; }
}

/* Hamburger */
.nb-hamburger { display: none; flex-direction: column; gap: 5px; background: none; border: none; padding: 4px; margin-left: auto; }
.nb-hamburger span { display: block; width: 22px; height: 2px; background: var(--navy); border-radius: 2px; transition: all .2s; }
.nb-hamburger[aria-expanded="true"] span:nth-child(1) { transform: rotate(45deg) translate(5px,5px); }
.nb-hamburger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.nb-hamburger[aria-expanded="true"] span:nth-child(3) { transform: rotate(-45deg) translate(5px,-5px); }

.nb-mobile-menu {
  display: none; position: fixed; top: var(--nav-h); left: 0; right: 0;
  background: var(--white); border-bottom: 1px solid var(--gray-200);
  padding: 16px 24px; z-index: 999; box-shadow: var(--sh-md);
  flex-direction: column; gap: 4px;
}
.nb-mobile-menu.open { display: flex; }

/* ── ALERT BAR ── */
.alert-bar {
  position: fixed; top: var(--nav-h); left: 0; right: 0;
  z-index: 990; background: var(--white); height: var(--alert-h);
  border-bottom: 1px solid var(--gray-200);
  display: flex; align-items: center; padding: 0 18px; gap: 10px;
}
.ab-btn {
  display: flex; align-items: center; gap: 6px;
  background: var(--green); color: white; border: none;
  border-radius: 20px; padding: 5px 12px 5px 9px;
  font-size: 11px; font-weight: 700; white-space: nowrap; flex-shrink: 0;
}
.ab-pulse { width: 7px; height: 7px; border-radius: 50%; background: white; position: relative; flex-shrink: 0; }
.ab-pulse::after {
  content: ''; position: absolute; inset: -3px; border-radius: 50%;
  background: rgba(255,255,255,.35); animation: pulse 1.8s ease-in-out infinite;
}
@keyframes pulse {
  0%, 100% { transform: scale(1); opacity: .9; }
  50%       { transform: scale(1.6); opacity: 0; }
}
.ab-badge { padding: 3px 8px; border-radius: 4px; font-size: 9.5px; font-weight: 700; letter-spacing: .5px; flex-shrink: 0; text-transform: uppercase; }
.b-info   { background: var(--navy);   color: white; }
.b-alerte { background: var(--yellow); color: var(--amber-900); }
.b-veille { background: var(--green);  color: white; }
.b-event  { background: var(--purple); color: white; }
.b-urgent { background: var(--red);    color: white; }

.ab-items { flex: 1; min-width: 0; display: flex; }
.ab-item { flex: 1; min-width: 0; display: flex; align-items: center; gap: 10px; }
.ab-item[hidden] { display: none; }
.ab-text { flex: 1; min-width: 0; font-size: 12px; color: var(--gray-700); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ab-nav  { display: flex; gap: 3px; flex-shrink: 0; }
.ab-nav-btn { width: 24px; height: 24px; border: 1px solid var(--gray-300); border-radius: 50%; background: transparent; display: flex; align-items: center; justify-content: center; color: var(--gray-500); }
.ab-nav-btn:hover { background: var(--gray-100); }
.ab-nav-btn svg { width: 12px; height: 12px; }

.ab-close { width: 26px; height: 26px; border: none; background: transparent; color: var(--gray-500); display: flex; align-items: center; justify-content: center; border-radius: 50%; flex-shrink: 0; }
.ab-close:hover { background: var(--gray-100); }
.ab-close svg { width: 15px; height: 15px; }

/* ── FOOTER ── */
.site-footer { background: var(--navy-dk); color: var(--gray-300); padding: 0; }
.ft-topbar   { height: 5px; background: linear-gradient(90deg, var(--orange) 0%, var(--orange) 40%, var(--green) 40%, var(--green) 70%, var(--yellow) 70%, var(--yellow) 100%); }
.ft-inner    { max-width: 1280px; margin: 0 auto; padding: var(--sp-8) var(--gutter) var(--sp-6); display: grid; grid-template-columns: 270px 1fr 1fr 1fr; gap: var(--sp-8); }
.ft-brand-logo { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.1); border-radius: var(--r-md); padding: 9px 13px; width: fit-content; }
.ft-logo-c { width: 34px; height: 34px; border-radius: 50%; background: rgba(255,255,255,.12); display: flex; align-items: center; justify-content: center; }
.ft-logo-t { font-size: 12.5px; font-weight: 700; color: white; }
.ft-org    { font-size: 14.5px; font-weight: 700; color: white; margin-bottom: 8px; }
.ft-desc   { font-size: 12px; line-height: 1.75; color: var(--gray-400); margin-bottom: 18px; }
.ft-socials{ display: flex; gap: 8px; }
.ft-soc    { width: 32px; height: 32px; border-radius: 7px; background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.12); display: flex; align-items: center; justify-content: center; color: var(--gray-400); transition: all var(--tr-fast); }
.ft-soc:hover { background: rgba(255,255,255,.14); color: white; }
.ft-soc svg { width: 15px; height: 15px; }
.ft-col-title { font-size: 10px; font-weight: 700; letter-spacing: 1.2px; text-transform: uppercase; color: var(--orange); margin-bottom: 16px; }
.ft-links   { list-style: none; display: flex; flex-direction: column; gap: 9px; }
.ft-links a { font-size: 12.5px; color: var(--gray-400); display: flex; align-items: center; gap: 5px; transition: color var(--tr-fast); }
.ft-links a::before { content: '›'; color: var(--orange); font-weight: 700; font-size: 13px; }
.ft-links a:hover { color: white; }
.ft-ci      { display: flex; align-items: flex-start; gap: 8px; margin-bottom: 12px; }
.ft-ci-icon { width: 26px; height: 26px; border-radius: 5px; background: rgba(249,115,22,.15); display: flex; align-items: center; justify-content: center; flex-shrink: 0; margin-top: 1px; }
.ft-ci-icon svg { width: 13px; height: 13px; color: var(--orange); }
.ft-ci-text { font-size: 12px; color: var(--gray-400); line-height: 1.55; }
.ft-ci-text strong { display: block; font-size: 10.5px; font-weight: 600; color: var(--gray-300); letter-spacing: .3px; margin-bottom: 1px; text-transform: uppercase; }
.ft-bottom-wrap { border-top: 1px solid rgba(255,255,255,.08); }
.ft-bottom  { max-width: 1280px; margin: 0 auto; padding: 16px 40px; display: flex; align-items: center; justify-content: space-between; }
.ft-bl      { font-size: 11.5px; color: var(--gray-500); }
.ft-bl span { color: var(--gray-400); }
.ft-br      { display: flex; gap: 18px; }
.ft-br a    { font-size: 11.5px; color: var(--gray-500); transition: color var(--tr-fast); }
.ft-br a:hover { color: var(--gray-400); }

/* ── Utility: Buttons ── */
.btn-primary { display: inline-flex; align-items: center; gap: 8px; background: var(--orange); color: white; border: none; border-radius: 24px; padding: 10px 22px; font-size: 13.5px; font-weight: 700; transition: background var(--tr-fast), transform .1s; }
.btn-primary:hover { background: var(--orange-dk); transform: translateY(-1px); }

/* ── Utility: Badges ── */
.pill { display: inline-flex; align-items: center; gap: 6px; padding: 4px 12px; border-radius: 20px; font-size: 11px; font-weight: 700; letter-spacing: .4px; }

/* ── Hero Page banner ── */
.page-hero { position: relative; min-height: var(--hero-min); overflow: hidden; background: var(--navy-dk); display: flex; align-items: flex-end; padding: var(--hero-y) var(--gutter); }
.hero-bg { position: absolute; inset: 0; background-size: cover; background-position: center; opacity: .13; }
.hero-overlay { position: absolute; inset: 0; background: linear-gradient(to right, rgba(19,37,64,.97) 0%, rgba(19,37,64,.6) 60%, transparent 100%); }
.hero-content { position: relative; z-index: 1; }
.breadcrumb { display: flex; align-items: center; gap: 6px; font-size: 12px; color: rgba(255,255,255,.45); margin-bottom: 10px; }
.breadcrumb a { color: rgba(255,255,255,.45); }
.breadcrumb a:hover { color: rgba(255,255,255,.8); }
.breadcrumb svg { width: 12px; height: 12px; }
.hero-pill { display: inline-block; border: 1px solid rgba(255,255,255,.2); border-radius: 20px; padding: 4px 14px; font-size: 10.5px; font-weight: 600; color: rgba(255,255,255,.65); letter-spacing: .8px; text-transform: uppercase; margin-bottom: 12px; }
.page-hero h1 { font-size: 32px; font-weight: 800; color: white; line-height: 1.2; margin-bottom: 8px; }
.page-hero p  { font-size: 13.5px; color: rgba(255,255,255,.6); max-width: 600px; line-height: 1.7; }

/* ── Grilles de mise en page ──
   Moins de colonnes sur tablette puis une seule sur téléphone. minmax(0, 1fr)
   empêche un mot long d'élargir une colonne au-delà de l'écran. */
.grille-2, .grille-3, .grille-4, .grille-aside { display: grid; gap: var(--gap); }
.grille-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grille-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grille-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.grille-aside { grid-template-columns: 280px minmax(0, 1fr); }

/* ── Responsive ── */
@media (max-width: 900px) {
  .grille-3, .grille-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .grille-aside { grid-template-columns: minmax(0, 1fr); }
  /* Le trait qui relie les étapes d'une frise n'a de sens que sur une ligne. */
  .frise-trait { display: none; }
}
@media (max-width: 640px) {
  .grille-2, .grille-3, .grille-4 { grid-template-columns: minmax(0, 1fr); }
  /* Sur une colonne étroite, la justification creuse de grands blancs entre les mots. */
  .page-main p { text-align: left; }
  /* Petits boutons ronds : zone de toucher de 40 px sans changer leur dessin. */
  .ab-nav-btn, .ab-close { position: relative; }
  .ab-nav-btn::after, .ab-close::after { content: ''; position: absolute; inset: -8px; }
}
/* Barre de navigation (avec les boutons IA et recherche) : elle demande environ
   1 280 px. En dessous, on la resserre
   (liens, marges, sous-titre de la marque masqué), puis le menu mobile prend le
   relais plus tôt que le reste de la mise en page : sinon le bouton TDBS déborde.
   Une fois les liens repliés dans le menu, la marque retrouve son sous-titre. */
@media (min-width: 1201px) and (max-width: 1280px) {
  .nb-link { padding: 6px 7px; }
  .nb-brand { margin-right: 14px; }
  .nb-div { margin-right: 10px; }
  .nb-text .sub { display: none; }
}
@media (max-width: 1200px) {
  .nb-links { display: none; }
  .nb-hamburger { display: flex; }
  .nb-recherche-mobile { display: flex; margin-left: auto; margin-right: 12px; }
  .nb-recherche-mobile + .nb-hamburger { margin-left: 0; }
  .nb-ia-mobile { display: inline-flex; margin-left: auto; margin-right: 8px; }
  .nb-ia-mobile + .nb-recherche-mobile { margin-left: 0; }
}
/* Petits téléphones : le bouton IA garde son icône seule, puis la marque perd son
   sous-titre, pour que les boutons IA, recherche et menu tiennent sur une ligne. */
@media (max-width: 480px) {
  .nb-ia-btn { width: 38px; padding: 0; justify-content: center; }
  .nb-ia-btn span { display: none; }
}
@media (max-width: 400px) {
  .nb-text .sub { display: none; }
}
@media (max-width: 900px) { :root { --gutter: 20px; --section-y: 24px; } }
@media (max-width: 640px) { :root { --gutter: 16px; --section-y: 20px; --hero-y: 20px; --card-p: 16px; } }
@media (max-width: 900px) {
  .ft-inner { grid-template-columns: 1fr 1fr; gap: var(--sp-6); }
}
@media (max-width: 640px) {
  .navbar { padding: 0 16px; }
  .alert-bar { padding: 0 12px; gap: 7px; }
  .page-hero h1 { font-size: 24px; }
  .ft-inner { grid-template-columns: 1fr; }
  .ft-bottom { flex-direction: column; gap: 10px; align-items: flex-start; }
}

/* ══ PAGE ACCUEIL ══ */
.stat-ticker{background:var(--white);border-bottom:1px solid var(--gray-200);padding:var(--sp-3) var(--gutter);display:flex;align-items:center;gap:var(--sp-8);overflow-x:auto}
.stat-item{display:flex;align-items:center;gap:12px;flex-shrink:0}
.stat-icon{width:40px;height:40px;border-radius:10px;display:flex;align-items:center;justify-content:center;flex-shrink:0}
.stat-icon svg{width:18px;height:18px}
.stat-icon.orange{background:var(--orange-lt)}
.stat-icon.orange svg{stroke:var(--orange)}
.stat-icon.green{background:var(--green-lt)}
.stat-icon.green svg{stroke:var(--green)}
.stat-icon.navy{background:var(--navy-lt)}
.stat-icon.navy svg{stroke:var(--navy)}
.stat-icon.yellow{background:var(--yellow-lt)}
.stat-icon.yellow svg{stroke:var(--yellow)}
.stat-val{font-size:20px;font-weight:800;color:var(--navy)}
.stat-label{font-size:11.5px;color:var(--gray-500);margin-top:1px}
.stat-delta{font-size:11px;font-weight:600;color:var(--green)}
.stat-delta.dn{color:var(--red)}
.stat-cta{font-size:11px;color:var(--orange);font-weight:600}
.main-grid{display:grid;grid-template-columns:1fr 1fr;gap:var(--gap-lg);max-width:1400px;margin:0 auto;padding:var(--section-y) var(--gutter)}
.section-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:20px}
.section-title{font-size:18px;font-weight:700;color:var(--navy);display:flex;align-items:center;gap:8px}
.section-title svg{width:18px;height:18px;stroke:var(--orange)}
.event-card{background:var(--white);border:1px solid var(--gray-200);border-radius:var(--r-xl);overflow:hidden;box-shadow:var(--sh-sm)}
.event-img-wrap{position:relative}
.bg-orange{background:linear-gradient(135deg,var(--orange),var(--orange-dk))}
.bg-green{background:linear-gradient(135deg,var(--green),var(--green-900))}
.bg-navy{background:linear-gradient(135deg,var(--navy),var(--navy-dk))}
.bg-yellow{background:linear-gradient(135deg,var(--yellow),var(--amber-600))}
.event-badge{position:absolute;top:12px;left:12px;padding:4px 12px;border-radius:20px;font-size:10px;font-weight:700;color:white;letter-spacing:.5px}
.event-body{padding:18px 20px}
.event-date{display:flex;align-items:center;gap:5px;font-size:12px;color:var(--gray-500);margin-bottom:8px}
.event-date svg{width:13px;height:13px;stroke:currentColor}
.event-title{font-size:15px;font-weight:700;color:var(--navy);margin-bottom:8px;line-height:1.4}
.event-excerpt{font-size:13px;color:var(--gray-500);line-height:1.6;margin-bottom:12px}
.event-link{display:inline-flex;align-items:center;gap:5px;color:var(--orange);font-size:13px;font-weight:600}
.event-link svg{width:13px;height:13px;stroke:var(--orange)}
.car-btn,.car-pause{width:28px;height:28px;border:1px solid var(--gray-200);border-radius:50%;background:var(--white);display:flex;align-items:center;justify-content:center;color:var(--gray-700)}
.car-btn svg,.car-pause svg{width:13px;height:13px;stroke:currentColor}
.car-dots{display:flex;gap:6px;margin-top:14px}
.car-dot{width:8px;height:8px;border-radius:50%;background:var(--gray-200);border:none;cursor:pointer}
.car-dot.active{background:var(--orange)}
.all-link{display:inline-flex;align-items:center;gap:5px;color:var(--orange);font-size:13px;font-weight:600;margin-top:14px}
.all-link svg{width:13px;height:13px;stroke:var(--orange)}
.carousel-controls{display:flex;gap:6px}
.hidden{display:none}
.pub-sidebar{}
.pub-title{font-size:16px;font-weight:700;color:var(--navy);display:flex;align-items:center;gap:8px;margin-bottom:14px}
.pub-title svg{width:17px;height:17px;stroke:var(--orange)}
.pub-item{display:flex;align-items:center;gap:10px;padding:12px 14px;background:var(--white);border:1px solid var(--gray-200);border-radius:var(--r-lg);margin-bottom:8px;transition:all .15s}
.pub-item:hover{box-shadow:var(--sh-sm);transform:translateX(3px)}
.pub-accent{width:4px;height:40px;border-radius:2px;flex-shrink:0}
.pub-icon{width:36px;height:36px;border-radius:8px;display:flex;align-items:center;justify-content:center;flex-shrink:0}
.pub-icon svg{width:16px;height:16px;stroke:currentColor}
.bg-orange-lt{background:var(--orange-lt);color:var(--orange)}
.bg-green-lt{background:var(--green-lt);color:var(--green)}
.bg-navy-lt{background:var(--navy-lt);color:var(--navy)}
.bg-yellow-lt{background:var(--yellow-lt);color:var(--yellow)}
.bg-orange{color:var(--orange)}
.bg-green{color:var(--green)}
.bg-navy{color:var(--navy)}
.bg-yellow{color:var(--yellow)}
.pub-name{font-size:13px;font-weight:600;color:var(--navy)}
.pub-count{font-size:11.5px;color:var(--gray-500)}
.pub-arrow{margin-left:auto;color:var(--gray-300)}
.pub-arrow svg{width:15px;height:15px;stroke:currentColor}
.pub-cta-btn{display:flex;align-items:center;justify-content:center;gap:8px;background:var(--orange);color:white;border:none;border-radius:var(--r-md);padding:12px;font-size:13px;font-weight:700;width:100%;margin-top:8px}
.pub-cta-btn svg{width:16px;height:16px;stroke:white}
.indicators-section{padding:var(--section-y) var(--gutter);background:var(--gray-50)}
.ind-grid{display:grid;grid-template-columns:1fr 1fr;gap:var(--gap-lg);max-width:1400px;margin:0 auto}
.ind-card{background:var(--white);border:1px solid var(--gray-200);border-radius:var(--r-xl);padding:var(--card-p);box-shadow:var(--sh-sm)}
.ind-card-head{display:flex;align-items:flex-start;gap:14px;margin-bottom:18px}
.ind-flag{width:44px;height:44px;border-radius:10px;background:var(--orange-lt);display:flex;align-items:center;justify-content:center;font-size:13px;font-weight:800;color:var(--orange);flex-shrink:0}
.ind-flag.ci{background:var(--orange-lt);color:var(--orange)}
.ind-flag.globe{background:var(--navy-lt)}
.ind-flag.globe svg{width:22px;height:22px;stroke:var(--navy)}
.ind-card-title{font-size:15px;font-weight:700;color:var(--navy);margin-bottom:4px}
.ind-card-sub{font-size:12.5px;color:var(--gray-500)}
.ind-kpi-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-bottom:16px}
.ind-kpi{padding:12px;border-radius:var(--r-md);background:var(--gray-50);border:1px solid var(--gray-200)}
.ind-kpi.orange{border-left:3px solid var(--orange)}
.ind-kpi.green{border-left:3px solid var(--green)}
.ind-kpi.navy{border-left:3px solid var(--navy)}
.ind-kpi.yellow{border-left:3px solid var(--yellow)}
.ind-kpi-label{font-size:11px;color:var(--gray-500);margin-bottom:4px}
.ind-kpi-val{font-size:18px;font-weight:800;color:var(--navy)}
.ind-kpi-delta{font-size:11px;font-weight:600;margin-top:2px}
.ind-kpi-delta.up{color:var(--green)}
.ind-kpi-delta.dn{color:var(--red)}
.ind-see-all{display:inline-flex;align-items:center;gap:5px;color:var(--orange);font-size:13px;font-weight:600}
.ind-hr{border:none;border-top:1px solid var(--gray-200);margin:14px 0}
.reg-item{display:flex;align-items:flex-start;gap:10px;padding:10px 0;border-bottom:1px solid var(--gray-100)}
.reg-item:last-child{border-bottom:none}
.reg-badge{display:inline-block;padding:2px 8px;border-radius:10px;font-size:9.5px;font-weight:700;white-space:nowrap;flex-shrink:0;margin-top:2px}
.reg-badge.uemoa{background:var(--green-lt);color:var(--green-900)}
.reg-badge.cedeao{background:var(--navy-lt);color:var(--navy)}
.reg-badge.int{background:var(--orange-lt);color:var(--orange-dk)}
.reg-title{font-size:13px;font-weight:600;color:var(--navy);margin-bottom:2px}
.reg-meta{font-size:11px;color:var(--gray-500);display:flex;align-items:center;gap:4px}
.reg-meta svg{width:11px;height:11px;stroke:currentColor}

/* ── Pagination (vues « pagination::bootstrap-4 ») ── */
.pager { margin-top: var(--stack); }
.pager .pagination { display: flex; gap: 6px; list-style: none; padding: 0; justify-content: center; flex-wrap: wrap; }
.pager .pagination a, .pager .pagination span { display: inline-block; min-width: 34px; padding: 6px 10px; border: 1px solid var(--gray-200); border-radius: 8px; font-size: 13px; text-align: center; color: var(--gray-700); text-decoration: none; background: var(--white); }
.pager .pagination a:hover { border-color: var(--navy); color: var(--navy); }
.pager .pagination .active span { background: var(--navy); border-color: var(--navy); color: white; }
.pager .pagination .disabled span { color: var(--gray-300); }

/* ── Champs de formulaire : aspect unique (identique à l'administration) ── */
.champ { width: 100%; min-width: 0; height: 38px; border: 1.5px solid var(--gray-200); border-radius: 8px; padding: 0 12px; font-size: 13px; line-height: 1.4; color: var(--gray-900); font-family: var(--font); background-color: var(--white); outline: none; transition: border-color var(--tr-fast), box-shadow var(--tr-fast), background-color var(--tr-fast); }
textarea.champ { height: auto; padding: 9px 12px; resize: vertical; }
select.champ { padding-right: 30px; appearance: none; background: var(--white) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' fill='none' stroke='%2394a3b8' stroke-width='1.6'%3E%3Cpath d='M1 1l4 4 4-4'/%3E%3C/svg%3E") no-repeat right 11px center; cursor: pointer; }
.champ:hover { border-color: var(--gray-300); }
.champ:focus { border-color: var(--orange); box-shadow: 0 0 0 3px rgba(249,115,22,.12); }
.champ::placeholder { color: var(--gray-400); }
.champ:disabled { background-color: var(--gray-50); color: var(--gray-400); cursor: not-allowed; }
.champ:not(:placeholder-shown):invalid { border-color: var(--red-400); background-color: var(--red-50); }
input[type=checkbox], input[type=radio] { accent-color: var(--orange); }