/* =============================================================================
   P-DDRCS Gestion · feuille de style

   Meme systeme de composants que les applications IMAKO (GEO-FONCIER Libreville,
   SIM Libreville, DGCBF) : barre laterale navy a icones, barre superieure avec
   recherche centrale, cartes blanches a une seule elevation, indicateurs a
   pastille d'icone et ligne de tendance, pastilles d'etat, tableaux compacts.

   Seule la palette change : elle est reprise des gabarits imprimes du P-DDRCS
   (bleu profond #0A3670, bleu #0D4A8F, or #C6A53F, rouge #D21C2B), et le bandeau
   porte les couleurs de la Republique Democratique du Congo.

   Les maquettes IMAKO s'appuient sur Tailwind et Lucide via CDN ; la politique de
   securite du contenu de cette application les interdit, tout est donc servi
   localement : classes ecrites a la main, icones figees dans un sprite SVG.
   ========================================================================== */

:root {
  color-scheme: light;

  /* --- Palette P-DDRCS (gabarits imprimes) --- */
  --navy: #0A3670;
  --navy-800: #0B2F5E;
  --navy-950: #06264F;
  --brand: #0D4A8F;
  --brand-700: #0A3B73;
  --brand-50: #EEF4FC;
  --brand-100: #D6E5F7;
  --or: #C6A53F;
  --or-600: #A98A2C;
  --or-700: #8A6F1F;
  --or-50: #FBF6E6;
  --or-100: #F2E6BE;
  --sky: #1E9BD7;
  --rdc-bleu: #007FFF;
  --rdc-jaune: #F4C81F;
  --rdc-rouge: #D21C2B;

  /* --- Surfaces et texte (systeme IMAKO) --- */
  --canvas: #F4F6FA;
  --surface: #FFFFFF;
  --surface-douce: #F7F9FB;
  --surface-entete: #F2F5F9;
  --line: #E3E8EF;
  --line-forte: #CBD5E1;
  --ink: #26313E;
  --muted: #586472;
  --faible: #94A3B8;

  /* --- Etats --- */
  --succes: #16A34A;
  --succes-50: #ECFDF3;
  --succes-100: #BBF7D0;
  --alerte: #B45309;
  --alerte-50: #FFFBEB;
  --alerte-100: #FDE68A;
  --danger: #D21C2B;
  --danger-50: #FEF2F2;
  --danger-100: #FECACA;
  --info: #1E9BD7;
  --info-50: #EAF7FD;
  --info-100: #CBEAF8;
  --violet: #7C3AED;
  --violet-50: #F5F3FF;

  --rayon: 0.625rem;
  --rayon-petit: 0.5rem;
  --rayon-large: 0.75rem;
  --ombre-carte: 0 1px 2px 0 rgba(10, 54, 112, 0.06), 0 1px 3px 0 rgba(10, 54, 112, 0.05);
  --ombre-flottante: 0 4px 12px -2px rgba(10, 54, 112, 0.14), 0 2px 6px -2px rgba(10, 54, 112, 0.08);
  --transition: 0.15s ease;
  --largeur-menu: 256px;
  --hauteur-barre: 64px;

  /* --- Alias d'une palette anterieure -------------------------------------
     Vingt-quatre declarations heritees de `pddrcs-gestion` referencent encore
     ces quatre noms, qui n'ont jamais ete definis : chacune echoue en silence
     (une couleur qui ne s'applique pas, une bordure qui disparait). Les
     rattacher a la palette courante les remet en service sans toucher aux
     declarations elles-memes.                                                */
  --bleu: var(--brand);
  --encre: var(--ink);
  --ligne: var(--line);
  --rouge: var(--danger);
}

* { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; }

body {
  font-family: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  background: var(--canvas);
  color: var(--ink);
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  min-height: 100vh;
}

table, .mono, .indicateur-valeur { font-variant-numeric: tabular-nums; }
:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; border-radius: 4px; }
a, button, input, select, textarea { outline: none; }
a { color: var(--brand); }

/* --- Icones ---------------------------------------------------------------
   Les attributs de trace poses sur la racine du sprite ne traversent pas
   `<use>` : sans ces regles, chaque icone se remplit de noir au lieu d'etre
   dessinee au trait. Elles sont donc portees par la classe elle-meme.        */
.ico {
  width: 18px; height: 18px; flex: none;
  display: inline-block; vertical-align: middle;
  fill: none; stroke: currentColor; stroke-width: 2;
  stroke-linecap: round; stroke-linejoin: round;
}
.ico-sm { width: 14px; height: 14px; }
.ico-lg { width: 20px; height: 20px; }

/* --- Bandeau tricolore RDC · trois bandes solides ------------------------- */
.tricolore {
  height: 4px;
  background: linear-gradient(90deg,
    var(--rdc-bleu) 0 33.34%, var(--rdc-jaune) 33.34% 66.67%, var(--rdc-rouge) 66.67% 100%);
}

/* --- Structure ------------------------------------------------------------ */
.application { display: flex; min-height: 100vh; }

.menu {
  width: var(--largeur-menu); flex-shrink: 0;
  background: var(--navy);
  display: flex; flex-direction: column;
  position: fixed; inset: 0 auto 0 0; z-index: 50;
  transition: transform 0.2s ease;
}

.menu-entete {
  display: flex; align-items: center; gap: 0.625rem;
  padding: 0 1rem; height: var(--hauteur-barre); flex-shrink: 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

.menu-sceau {
  width: 40px; height: 40px; flex: none;
  border-radius: var(--rayon-large);
  background: #fff; display: grid; place-items: center; padding: 5px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.18);
}
.menu-sceau img { max-width: 100%; max-height: 100%; object-fit: contain; }
.menu-sceau span { font-size: 12px; font-weight: 900; color: var(--navy); letter-spacing: -0.02em; }

.menu-titre { color: #fff; font-weight: 800; font-size: 14px; letter-spacing: -0.01em; line-height: 1.15; }
.menu-accent { font-size: 11px; font-weight: 600; color: var(--or); line-height: 1.3; }

.menu-navigation { flex: 1; overflow-y: auto; padding: 8px 0 24px; }

.menu-groupe-titre {
  padding: 0.75rem 0.75rem 0.2rem;
  font-size: 11px; font-weight: 700; letter-spacing: 0.08em;
  text-transform: uppercase; color: #7E93B4;
}
.menu-groupe { padding: 0 0.5rem; display: flex; flex-direction: column; gap: 2px; }

.menu-lien {
  display: flex; align-items: center; gap: 0.625rem;
  padding: 0.45rem 0.75rem; border-radius: var(--rayon-petit);
  font-size: 0.875rem; font-weight: 500;
  color: #C7D3E2; text-decoration: none;
  transition: background-color var(--transition), color var(--transition);
}
.menu-lien .ico { color: #8CA1BC; transition: color var(--transition); }
.menu-lien:hover { background: rgba(255, 255, 255, 0.07); color: #fff; }
.menu-lien:hover .ico { color: #fff; }
.menu-lien.actif { background: rgba(255, 255, 255, 0.12); color: #fff; box-shadow: inset 3px 0 0 var(--or); }
.menu-lien.actif .ico { color: #fff; }
.menu-lien .puce {
  margin-left: auto; background: var(--danger); color: #fff;
  font-size: 10px; font-weight: 700; padding: 1px 7px; border-radius: 999px;
}

.menu-pied { border-top: 1px solid rgba(255, 255, 255, 0.1); padding: 0.75rem; flex-shrink: 0; }
.menu-pied-titre {
  font-size: 11px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase;
  color: #7E93B4; margin-bottom: 0.5rem; padding: 0 0.25rem;
}
.menu-partenaire { display: flex; align-items: center; gap: 0.5rem; padding: 0 0.25rem 0.75rem; }
.menu-partenaire-sigle {
  width: 24px; height: 24px; flex: none; border-radius: 6px;
  background: var(--or); color: var(--navy-950);
  display: grid; place-items: center; font-size: 11px; font-weight: 900;
}
.menu-partenaire-nom { font-size: 12px; font-weight: 600; color: #DCE5F0; line-height: 1.3; }
.menu-partenaire-nom span { color: #8CA1BC; font-weight: 500; }

.menu-utilisateur {
  display: flex; align-items: center; gap: 0.625rem;
  padding: 0.75rem 0.25rem 0; border-top: 1px solid rgba(255, 255, 255, 0.1);
}
.menu-utilisateur .avatar { background: var(--brand); }
.menu-utilisateur-nom { color: #fff; font-size: 13.5px; font-weight: 600; line-height: 1.2; }
.menu-utilisateur-role { color: #8CA1BC; font-size: 11px; }
.menu-quitter {
  margin-left: auto; color: #8CA1BC; padding: 6px; border-radius: 6px;
  display: inline-flex; transition: background-color var(--transition), color var(--transition);
}
.menu-quitter:hover { background: rgba(255, 255, 255, 0.1); color: #fff; }

.contenu { flex: 1; margin-left: var(--largeur-menu); min-width: 0; display: flex; flex-direction: column; }

/* --- Barre superieure ----------------------------------------------------- */
.barre {
  position: sticky; top: 0; z-index: 30;
  height: var(--hauteur-barre); flex-shrink: 0;
  display: flex; align-items: center; gap: 0.75rem;
  padding: 0 1.5rem;
  background: var(--surface); border-bottom: 1px solid var(--line);
}

.barre-recherche { flex: 1; display: flex; justify-content: center; padding: 0 1.5rem; }
.barre-recherche label {
  display: flex; align-items: center; gap: 0.5rem;
  width: 100%; max-width: 36rem; height: 40px; padding: 0 0.75rem;
  background: var(--canvas); border: 1px solid var(--line); border-radius: var(--rayon-large);
  transition: border-color var(--transition), box-shadow var(--transition);
}
.barre-recherche label:focus-within {
  border-color: var(--brand); box-shadow: 0 0 0 3px rgba(13, 74, 143, 0.15);
}
.barre-recherche .ico { color: var(--faible); }
.barre-recherche input {
  flex: 1; min-height: 0; border: none; background: transparent; padding: 0;
  font-size: 0.875rem; color: var(--ink);
}
.barre-recherche input:focus { box-shadow: none; border: none; }
.barre-recherche kbd {
  font-family: inherit; font-size: 11px; color: var(--faible);
  border: 1px solid var(--line); border-radius: 4px; padding: 2px 6px; background: #fff;
}

.barre-actions { display: flex; align-items: center; gap: 0.375rem; flex-shrink: 0; }

.barre-bouton {
  position: relative; display: inline-flex; align-items: center; justify-content: center;
  width: 34px; height: 34px; border-radius: var(--rayon-petit);
  background: transparent; border: none; color: var(--muted); cursor: pointer;
  transition: background-color var(--transition), color var(--transition);
}
.barre-bouton:hover { background: var(--surface-entete); color: var(--ink); }
.barre-bouton .compteur-puce {
  position: absolute; top: -2px; right: -2px;
  min-width: 16px; height: 16px; padding: 0 4px;
  background: var(--danger); color: #fff;
  font-size: 10px; font-weight: 700; border-radius: 999px;
  display: grid; place-items: center; box-shadow: 0 0 0 2px var(--surface);
}

.barre-separateur { width: 1px; height: 28px; background: var(--line); margin: 0 0.25rem; }

.jeton-utilisateur { display: flex; align-items: center; gap: 0.5rem; padding-left: 0.25rem; }
.jeton-utilisateur-nom { font-size: 0.875rem; font-weight: 600; color: var(--ink); line-height: 1.2; }
.jeton-utilisateur-role { font-size: 11px; font-weight: 500; color: var(--brand); }

.avatar {
  width: 32px; height: 32px; border-radius: 999px; flex: none;
  display: grid; place-items: center;
  font-size: 12px; font-weight: 700; color: #fff; background: var(--navy);
}

.temoin-geo {
  display: inline-flex; align-items: center; gap: 0.35rem;
  padding: 0.2rem 0.6rem; border-radius: 999px;
  font-size: 11px; font-weight: 600; line-height: 1.4; border: 1px solid transparent;
}
.temoin-geo.actif { background: var(--succes-50); color: var(--succes); border-color: var(--succes-100); }
.temoin-geo.inactif { background: var(--alerte-50); color: var(--alerte); border-color: var(--alerte-100); }
.temoin-geo::before { content: ''; width: 6px; height: 6px; border-radius: 999px; background: currentColor; }

/* --- Page ----------------------------------------------------------------- */
.page { flex: 1; padding: 1.25rem 1.5rem 2rem; display: flex; flex-direction: column; gap: 1.25rem; }

.page-entete { display: flex; flex-wrap: wrap; align-items: center; gap: 0.75rem; }
.page-entete-ico {
  width: 44px; height: 44px; flex: none; border-radius: var(--rayon-large);
  background: var(--brand); color: #fff; display: grid; place-items: center;
}
.page-entete h2 { font-size: 1.125rem; font-weight: 700; letter-spacing: -0.01em; }
.page-entete p { font-size: 0.875rem; color: var(--muted); }
.page-actions { margin-left: auto; display: flex; gap: 0.5rem; flex-wrap: wrap; align-items: center; }

/* --- Cartes --------------------------------------------------------------- */
.carte {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--rayon);
  box-shadow: var(--ombre-carte);
  padding: 1.25rem;
}
.carte + .carte { margin-top: 1rem; }

.carte-titre {
  font-size: 0.875rem; font-weight: 700; margin-bottom: 0.875rem;
  display: flex; align-items: center; gap: 0.5rem;
}
.carte-titre .compteur { margin-left: auto; font-size: 12px; color: var(--muted); font-weight: 500; }
.carte-titre a.compteur, .carte-titre a { font-size: 12px; font-weight: 600; color: var(--brand); text-decoration: none; }
.carte-titre a:hover { color: var(--brand-700); }
.carte-avertissement { border-color: var(--alerte-100); background: var(--alerte-50); }

.grille { display: grid; gap: 1.25rem; }
.grille-2 { grid-template-columns: repeat(auto-fit, minmax(340px, 1fr)); }
.grille-3 { grid-template-columns: repeat(auto-fit, minmax(270px, 1fr)); }
.grille-4 { grid-template-columns: repeat(auto-fit, minmax(215px, 1fr)); gap: 1rem; }
/* Bandeau d'indicateurs : six colonnes sur grand ecran, comme les maquettes */
.grille-6 { grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 1rem; }
@media (min-width: 1400px) { .grille-6 { grid-template-columns: repeat(6, 1fr); } }

/* --- Indicateurs (anatomie IMAKO) ----------------------------------------- */
.indicateur { padding: 1rem; transition: box-shadow var(--transition), transform var(--transition); }
.indicateur:hover { box-shadow: var(--ombre-flottante); }

.indicateur-ico {
  width: 44px; height: 44px; border-radius: 999px;
  display: grid; place-items: center; margin-bottom: 0.75rem;
  background: var(--brand-50); color: var(--brand);
}
.indicateur.or .indicateur-ico { background: var(--or-50); color: var(--or-700); }
.indicateur.vert .indicateur-ico { background: var(--succes-50); color: var(--succes); }
.indicateur.rouge .indicateur-ico { background: var(--danger-50); color: var(--danger); }
.indicateur.info .indicateur-ico { background: var(--info-50); color: var(--info); }
.indicateur.violet .indicateur-ico { background: var(--violet-50); color: var(--violet); }

.indicateur-libelle {
  font-size: 11px; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase;
  color: var(--muted); line-height: 1.25;
}
.indicateur-valeur { font-size: 1.5rem; font-weight: 800; margin-top: 0.25rem; letter-spacing: -0.02em; }
.indicateur-detail { font-size: 11px; color: var(--muted); }
.indicateur-tendance {
  display: flex; align-items: center; gap: 0.25rem;
  font-size: 0.75rem; font-weight: 600; margin-top: 0.5rem; color: var(--succes);
}
.indicateur-tendance.baisse { color: var(--danger); }
.indicateur-tendance .discret { font-weight: 400; color: var(--muted); }

/* --- Tableaux ------------------------------------------------------------- */
.tableau-conteneur { overflow-x: auto; }
table { width: 100%; border-collapse: separate; border-spacing: 0; font-size: 0.875rem; }

thead th {
  position: sticky; top: 0; background: var(--surface-entete);
  text-align: left; font-size: 11px; font-weight: 700;
  letter-spacing: 0.04em; text-transform: uppercase; color: var(--muted);
  padding: 0.65rem 0.9rem; border-bottom: 1px solid var(--line); white-space: nowrap;
}
tbody td { padding: 0.75rem 0.9rem; border-bottom: 1px solid #EEF2F7; color: #334155; vertical-align: middle; }
tbody tr { transition: background-color 0.12s ease; }
tbody tr:hover { background: var(--surface-douce); }
tbody tr:last-child td { border-bottom: none; }

.mono { font-family: 'IBM Plex Mono', ui-monospace, 'SFMono-Regular', Menlo, monospace; font-size: 12.5px; }

/* --- Pastilles ------------------------------------------------------------ */
.etat {
  display: inline-flex; align-items: center; gap: 0.35rem;
  padding: 0.15rem 0.55rem; border-radius: 999px;
  font-size: 11px; font-weight: 600; line-height: 1.4;
  border: 1px solid transparent; white-space: nowrap;
}
.etat::before { content: ''; width: 6px; height: 6px; border-radius: 999px; background: currentColor; }
.etat.vert { background: var(--succes-50); color: var(--succes); border-color: var(--succes-100); }
.etat.orange { background: var(--alerte-50); color: var(--alerte); border-color: var(--alerte-100); }
.etat.rouge { background: var(--danger-50); color: var(--danger); border-color: var(--danger-100); }
.etat.neutre { background: #F1F5F9; color: #475569; border-color: #E2E8F0; }
.etat.bleu { background: var(--brand-50); color: var(--brand); border-color: var(--brand-100); }

.pastille-niveau {
  display: inline-flex; align-items: center;
  padding: 0.15rem 0.5rem; border-radius: 999px;
  font-size: 11px; font-weight: 600;
  background: var(--or-50); color: var(--or-700); border: 1px solid var(--or-100);
}

/* --- Boutons -------------------------------------------------------------- */
.bouton {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem;
  padding: 0.5rem 0.9rem; border-radius: var(--rayon-petit);
  font-size: 0.875rem; font-weight: 600; font-family: inherit;
  cursor: pointer; text-decoration: none; white-space: nowrap;
  background: var(--surface); color: var(--ink); border: 1px solid var(--line);
  transition: background-color var(--transition), border-color var(--transition), color var(--transition);
}
.bouton:hover { background: var(--surface-douce); border-color: var(--line-forte); }
.bouton .ico { width: 16px; height: 16px; }

.bouton-principal { background: var(--navy); color: #fff; border-color: transparent; }
.bouton-principal:hover { background: var(--navy-950); border-color: transparent; }
.bouton-accent { background: var(--brand); color: #fff; border-color: transparent; }
.bouton-accent:hover { background: var(--brand-700); border-color: transparent; }
.bouton-or { background: var(--or); color: #241A00; border-color: transparent; }
.bouton-or:hover { background: var(--or-600); border-color: transparent; }
.bouton-danger { background: var(--danger); color: #fff; border-color: transparent; }
.bouton-danger:hover { background: #A81622; border-color: transparent; }
.bouton-petit { padding: 0.35rem 0.6rem; font-size: 0.8125rem; }
.bouton:disabled { opacity: 0.5; cursor: not-allowed; }

/* --- Formulaires ---------------------------------------------------------- */
.champ { margin-bottom: 0.875rem; }
.champ label { display: block; margin-bottom: 0.35rem; font-size: 0.8125rem; font-weight: 600; color: #334155; }
.champ label .requis { color: var(--danger); }

input[type=text], input[type=password], input[type=email], input[type=date],
input[type=number], input[type=search], input[type=tel], input[type=file],
select, textarea {
  width: 100%; background: var(--surface);
  border: 1px solid var(--line-forte); border-radius: var(--rayon);
  padding: 0.55rem 0.75rem; font-size: 0.875rem; font-family: inherit;
  color: var(--ink); min-height: 42px;
  transition: border-color var(--transition), box-shadow var(--transition);
}
input::placeholder, textarea::placeholder { color: var(--faible); }
input:focus, select:focus, textarea:focus {
  border-color: var(--brand); box-shadow: 0 0 0 3px rgba(13, 74, 143, 0.14);
}
input[type=checkbox] { min-height: 0; width: auto; accent-color: var(--brand); }
textarea { resize: vertical; min-height: 92px; }
.aide { font-size: 0.75rem; color: var(--muted); margin-top: 0.3rem; }

.filtres {
  display: flex; gap: 0.625rem; flex-wrap: wrap; align-items: flex-end;
  padding: 0.875rem;
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--rayon); box-shadow: var(--ombre-carte);
}
.filtres .champ { margin-bottom: 0; min-width: 150px; flex: 1 1 150px; }
.filtres .champ.large { flex: 2 1 260px; }

/* --- Messages ------------------------------------------------------------- */
.messages { display: flex; flex-direction: column; gap: 0.5rem; }
.message {
  padding: 0.7rem 0.9rem; border-radius: var(--rayon-petit);
  border: 1px solid; font-size: 0.8125rem;
  display: flex; align-items: flex-start; gap: 0.625rem;
}
.message.success { background: var(--succes-50); border-color: var(--succes-100); color: #15803D; }
.message.danger { background: var(--danger-50); border-color: var(--danger-100); color: #A81622; }
.message.warning { background: var(--alerte-50); border-color: var(--alerte-100); color: #92400E; }
.message.info { background: var(--info-50); border-color: var(--info-100); color: #0B6E9C; }

/* --- Definitions ---------------------------------------------------------- */
.definitions { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 0.875rem; }
.definition-libelle {
  font-size: 11px; text-transform: uppercase; letter-spacing: 0.04em;
  color: var(--muted); font-weight: 700; margin-bottom: 2px;
}
.definition-valeur { font-size: 0.875rem; font-weight: 500; color: var(--ink); word-break: break-word; }
/* Collision de noms heritee : `.vide` est deja le bloc « etat vide », avec
   `text-align:center` et `padding: 2.5rem 1.25rem`. Employe comme modificateur
   sur une valeur de definition, il lui imposait ce remplissage : une valeur sur
   une seule ligne occupait 102 px au lieu de 22, et desalignait toute la ligne
   de la grille. Le modificateur porte donc un nom qui ne percute rien.        */
.definition-valeur.absente { color: var(--faible); font-style: italic; font-weight: 400; }

/* --- Chronologie ---------------------------------------------------------- */
.chronologie { position: relative; padding-left: 1.5rem; border-left: 2px solid var(--line); margin-left: 0.25rem; }
.chronologie-element { position: relative; padding-bottom: 1.25rem; }
.chronologie-element::before {
  content: ''; position: absolute; left: calc(-1.5rem - 7px); top: 5px;
  width: 12px; height: 12px; border-radius: 999px;
  background: var(--brand); box-shadow: 0 0 0 4px var(--surface);
}
.chronologie-element.critique::before { background: var(--danger); }
.chronologie-date { font-size: 11px; color: var(--muted); }
.chronologie-titre { font-size: 0.875rem; font-weight: 600; margin: 2px 0 3px; }
.chronologie-titre a { color: inherit; text-decoration: none; }
.chronologie-titre a:hover { color: var(--brand); }
.chronologie-detail { font-size: 0.75rem; color: var(--muted); }

/* --- Barres de repartition ------------------------------------------------ */
.barre-repartition { margin-bottom: 0.75rem; }
.barre-repartition-entete { display: flex; justify-content: space-between; font-size: 0.8125rem; margin-bottom: 0.3rem; }
.barre-repartition-piste { height: 7px; background: #F1F5F9; border-radius: 999px; overflow: hidden; }
.barre-repartition-valeur { height: 100%; border-radius: 999px; background: var(--brand); transition: width 0.6s ease; }
.barre-repartition.or .barre-repartition-valeur { background: var(--or); }

/* --- Pagination ----------------------------------------------------------- */
.pagination { display: flex; gap: 0.3rem; justify-content: center; align-items: center; margin-top: 1rem; flex-wrap: wrap; }
.pagination a, .pagination span {
  padding: 0.4rem 0.7rem; border-radius: var(--rayon-petit);
  font-size: 0.8125rem; font-weight: 500;
  border: 1px solid var(--line); background: var(--surface);
  color: var(--muted); text-decoration: none;
  transition: background-color var(--transition), border-color var(--transition);
}
.pagination a:hover { background: var(--surface-douce); border-color: var(--line-forte); color: var(--ink); }
.pagination .actuelle { background: var(--navy); border-color: var(--navy); color: #fff; font-weight: 600; }
.pagination span.discret { border: none; background: none; }

/* --- Etat vide ------------------------------------------------------------ */
.vide { text-align: center; padding: 2.5rem 1.25rem; color: var(--muted); }
.vide .ico { width: 34px; height: 34px; color: var(--line-forte); margin-bottom: 0.5rem; }
.vide-titre { font-size: 0.9375rem; font-weight: 600; color: var(--ink); margin-bottom: 0.25rem; }
.vide-detail { font-size: 0.8125rem; color: var(--muted); }

/* --- Authentification et pages publiques ---------------------------------- */
.page-connexion, .page-verification {
  display: grid; place-items: center; min-height: 100vh; padding: 1.5rem; background: var(--canvas);
}
.boite-connexion {
  width: 100%; max-width: 420px;
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--rayon-large); box-shadow: var(--ombre-flottante);
  padding: 2rem 1.875rem;
}
.boite-connexion .marque { text-align: center; margin-bottom: 1.5rem; }

.sceau-marque {
  width: 60px; height: 60px; margin: 0 auto 0.875rem;
  border-radius: var(--rayon-large); background: #fff;
  border: 1px solid var(--line); box-shadow: var(--ombre-carte);
  display: grid; place-items: center; padding: 7px;
}
.sceau-marque img { max-width: 100%; max-height: 100%; object-fit: contain; }
.sceau-marque span { font-size: 13px; font-weight: 900; color: var(--navy); }

.boite-connexion h1 { font-size: 1.1875rem; font-weight: 700; color: var(--ink); }
.boite-connexion .sous-titre { font-size: 0.8125rem; color: var(--muted); margin-top: 0.25rem; }

.avertissement {
  margin-top: 1.25rem; padding: 0.7rem 0.85rem;
  background: var(--danger-50); border: 1px solid var(--danger-100);
  border-radius: var(--rayon-petit);
  font-size: 0.6875rem; color: #A81622; line-height: 1.5;
}

.boite-verification { width: 100%; max-width: 560px; }
.resultat-verification {
  text-align: center; padding: 1.875rem 1.5rem;
  border-radius: var(--rayon); border: 1px solid;
  background: var(--surface); box-shadow: var(--ombre-carte);
}
.resultat-verification.valide { border-color: var(--succes-100); background: var(--succes-50); }
.resultat-verification.invalide { border-color: var(--danger-100); background: var(--danger-50); }
.resultat-verification.attention { border-color: var(--alerte-100); background: var(--alerte-50); }
.resultat-ico {
  width: 56px; height: 56px; border-radius: 999px; margin: 0 auto 0.75rem;
  display: grid; place-items: center;
}
.resultat-ico .ico { width: 28px; height: 28px; }
.resultat-verification.valide .resultat-ico { background: var(--succes-100); color: var(--succes); }
.resultat-verification.invalide .resultat-ico { background: var(--danger-100); color: var(--danger); }
.resultat-verification.attention .resultat-ico { background: var(--alerte-100); color: var(--alerte); }
.resultat-etat { font-size: 1.1875rem; font-weight: 800; letter-spacing: 0.02em; margin-bottom: 0.4rem; color: var(--ink); }
.resultat-message { font-size: 0.875rem; color: var(--muted); }

/* --- Divers --------------------------------------------------------------- */
.separateur { height: 1px; background: var(--line); margin: 1rem 0; }
.discret { color: var(--muted); font-size: 0.75rem; }
.actions-ligne { display: flex; gap: 0.375rem; flex-wrap: wrap; align-items: center; }
pre { font-family: 'IBM Plex Mono', ui-monospace, 'SFMono-Regular', Menlo, monospace; }

/* --- Scrollbar ------------------------------------------------------------ */
* { scrollbar-width: thin; scrollbar-color: var(--line-forte) transparent; }
*::-webkit-scrollbar { width: 10px; height: 10px; }
*::-webkit-scrollbar-thumb {
  background: var(--line-forte); border-radius: 999px;
  border: 3px solid transparent; background-clip: content-box;
}
*::-webkit-scrollbar-thumb:hover { background: #94A3B8; background-clip: content-box; }

/* --- Responsive ----------------------------------------------------------- */
.bouton-menu { display: none; }

@media (max-width: 1024px) {
  .menu { transform: translateX(-100%); }
  .menu.ouvert { transform: translateX(0); }
  .contenu { margin-left: 0; }
  .bouton-menu { display: inline-flex; }
  .page { padding: 1rem 0.875rem 1.75rem; }
  .barre { padding: 0 0.875rem; }
  .barre-recherche { padding: 0 0.5rem; }
  .barre-recherche kbd { display: none; }
}

@media (max-width: 640px) {
  .grille-2, .grille-3, .grille-4 { grid-template-columns: 1fr; }
  .page-actions { margin-left: 0; width: 100%; }
  .jeton-utilisateur-texte { display: none; }
  .barre-recherche { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
}

@media print {
  .menu, .barre, .page-actions, .filtres, .pagination { display: none; }
  body { background: #fff; }
  .contenu { margin-left: 0; }
  .carte { border: 1px solid #ccc; box-shadow: none; }
}

/* =============================================================================
   Ecran de connexion · panneau institutionnel + formulaire (anatomie IMAKO)
   ========================================================================== */
.connexion-ecran { min-height: calc(100vh - 4px); display: grid; grid-template-columns: 1fr 1fr; }

.connexion-panneau {
  position: relative; overflow: hidden;
  background: var(--navy); color: #fff;
  display: flex; flex-direction: column; justify-content: space-between;
  padding: 2.5rem;
}
.connexion-motif {
  position: absolute; inset: 0; opacity: 0.05;
  background-image: radial-gradient(circle, #fff 1px, transparent 1px);
  background-size: 24px 24px;
}
.connexion-halo { position: absolute; border-radius: 999px; filter: blur(64px); }
.connexion-halo-bas { bottom: -6rem; right: -6rem; width: 24rem; height: 24rem; background: rgba(13, 74, 143, 0.35); }
.connexion-halo-haut { top: -4rem; left: -2.5rem; width: 18rem; height: 18rem; background: rgba(198, 165, 63, 0.14); }

.connexion-marque { position: relative; display: flex; align-items: center; gap: 0.75rem; }
.connexion-marque .menu-sceau { width: 48px; height: 48px; }
.connexion-marque-nom { font-weight: 700; font-size: 0.9375rem; line-height: 1.2; }
.connexion-marque-sous { color: #8CA1BC; font-size: 0.8125rem; }

.connexion-discours { position: relative; max-width: 32rem; }
.connexion-surtitre {
  font-family: 'IBM Plex Mono', monospace; font-size: 0.75rem;
  letter-spacing: 0.18em; text-transform: uppercase; color: var(--or); margin-bottom: 0.75rem;
}
.connexion-discours h2 {
  font-size: 2.25rem; font-weight: 800; line-height: 1.1; margin-bottom: 1.25rem; letter-spacing: -0.02em;
}
.connexion-discours h2 span { color: var(--or); }
.connexion-texte { color: #C7D3E2; line-height: 1.65; margin-bottom: 2rem; font-size: 0.9375rem; }

.connexion-atouts { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.75rem; }
.connexion-atout {
  border-radius: var(--rayon-large);
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.1);
  padding: 0.875rem;
}
.connexion-atout-ico {
  width: 36px; height: 36px; border-radius: var(--rayon-petit);
  display: grid; place-items: center; margin-bottom: 0.5rem;
}
.connexion-atout-ico.bleu { background: rgba(13, 74, 143, 0.35); color: #9CC4EE; }
.connexion-atout-ico.or { background: rgba(198, 165, 63, 0.2); color: #E9D68C; }
.connexion-atout-ico.vert { background: rgba(22, 163, 74, 0.2); color: #86EFAC; }
.connexion-atout-titre { font-size: 0.8125rem; font-weight: 600; line-height: 1.3; }
.connexion-atout-detail { font-size: 0.6875rem; color: #8CA1BC; margin-top: 0.25rem; line-height: 1.4; }

.connexion-pied {
  position: relative; display: flex; align-items: center; justify-content: space-between;
  gap: 1rem; font-size: 0.75rem; color: #8CA1BC; flex-wrap: wrap;
}
.connexion-pied span { display: inline-flex; align-items: center; gap: 0.5rem; }
.connexion-pied .ico { color: var(--or); }

.connexion-formulaire {
  display: flex; align-items: center; justify-content: center;
  padding: 2.5rem 1.5rem; background: var(--canvas);
}
.connexion-boite { width: 100%; max-width: 24rem; }
.connexion-marque-mobile { display: none; align-items: center; gap: 0.75rem; margin-bottom: 2rem; }

.connexion-cadenas {
  width: 48px; height: 48px; border-radius: 999px; margin-bottom: 1.25rem;
  background: var(--brand-50); border: 1px solid var(--brand-100); color: var(--brand);
  display: grid; place-items: center;
}
.connexion-boite h1 { font-size: 1.5rem; font-weight: 700; margin-bottom: 0.35rem; }
.connexion-accroche { color: var(--muted); font-size: 0.875rem; margin-bottom: 1.75rem; }

/* Champ avec icone en prefixe */
.champ-icone { position: relative; display: flex; align-items: center; }
.champ-icone > .ico {
  position: absolute; left: 0.75rem; color: var(--faible); pointer-events: none;
}
.champ-icone input { padding-left: 2.25rem; }
.champ-bascule {
  position: absolute; right: 0.5rem;
  display: inline-flex; align-items: center; justify-content: center;
  width: 30px; height: 30px; border-radius: var(--rayon-petit);
  background: transparent; border: none; color: var(--faible); cursor: pointer;
}
.champ-bascule:hover { background: var(--surface-entete); color: var(--ink); }

@media (max-width: 1024px) {
  .connexion-ecran { grid-template-columns: 1fr; }
  .connexion-panneau { display: none; }
  .connexion-marque-mobile { display: flex; }
}

/* =============================================================================
   Graphiques et listes d'alertes du tableau de bord
   ========================================================================== */
.grille-large { grid-template-columns: 2fr 1fr; }
@media (max-width: 1100px) { .grille-large { grid-template-columns: 1fr; } }

.graphique-anneau { display: flex; flex-direction: column; align-items: center; gap: 0.875rem; }
.graphique-legende {
  display: flex; flex-direction: column; gap: 0.35rem; width: 100%;
  font-size: 0.75rem; color: var(--muted);
}
.graphique-legende span { display: flex; align-items: center; gap: 0.5rem; }
.graphique-legende i { width: 10px; height: 10px; border-radius: 3px; flex: none; }

.liste-alertes { list-style: none; display: flex; flex-direction: column; gap: 0.5rem; }
.alerte-ligne {
  display: flex; align-items: flex-start; gap: 0.625rem;
  padding: 0.5rem; border-radius: var(--rayon-petit);
  transition: background-color var(--transition);
}
.alerte-ligne:hover { background: var(--canvas); }
.alerte-ico {
  width: 30px; height: 30px; border-radius: var(--rayon-petit); flex: none;
  display: grid; place-items: center; border: 1px solid;
}
.alerte-ico.rouge { background: var(--danger-50); color: var(--danger); border-color: var(--danger-100); }
.alerte-ico.or { background: var(--or-50); color: var(--or-700); border-color: var(--or-100); }
.alerte-titre { font-size: 0.8125rem; font-weight: 600; line-height: 1.3; }

.carte-titre .ico { color: var(--muted); }

/* =============================================================================
   Assistant d'import · etapes
   ========================================================================== */
.etapes { display: flex; flex-direction: column; gap: 0.875rem; }
.etape { display: flex; align-items: flex-start; gap: 0.75rem; }
.etape-puce {
  width: 26px; height: 26px; border-radius: 999px; flex: none;
  display: grid; place-items: center;
  font-size: 0.75rem; font-weight: 700;
  background: var(--brand-50); color: var(--brand); border: 1px solid var(--brand-100);
}
.etape-titre { font-size: 0.8125rem; font-weight: 600; }
.etape-detail { font-size: 0.75rem; color: var(--muted); }

/* Les deux emblemes cote a cote sur l'ecran de connexion, a taille egale */
.connexion-emblemes { display: flex; align-items: center; gap: 0.5rem; }
.connexion-emblemes .menu-sceau { width: 48px; height: 48px; }
.connexion-lien-emblemes {
  width: 3px; height: 3px; border-radius: 999px; background: rgba(255, 255, 255, 0.4);
}

/* Mention de propriete, au pied de la barre laterale */
.menu-copyright {
  margin-top: 0.75rem; padding-top: 0.75rem;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  font-size: 10.5px; line-height: 1.45; color: #8CA1BC; text-align: center;
}
.menu-copyright span { color: #6F84A3; }

/* =============================================================================
   Horloge, menu profil et veille d'inactivité
   ========================================================================== */
.horloge { text-align: right; line-height: 1.2; flex-shrink: 0; }
.horloge-heure {
  font-family: 'IBM Plex Mono', ui-monospace, monospace;
  font-size: 0.9375rem; font-weight: 600; color: var(--ink);
  font-variant-numeric: tabular-nums;
}
.horloge-detail { font-size: 11px; color: var(--muted); display: flex; gap: 0.4rem; justify-content: flex-end; }
.horloge-lieu { color: var(--brand); font-weight: 500; }

.profil { position: relative; flex-shrink: 0; }
.profil-bouton {
  display: flex; align-items: center; gap: 0.5rem;
  padding: 0.25rem 0.5rem 0.25rem 0.25rem;
  background: transparent; border: 1px solid transparent; border-radius: 999px;
  cursor: pointer; font-family: inherit; text-align: left;
  transition: background-color var(--transition), border-color var(--transition);
}
.profil-bouton:hover { background: var(--surface-entete); border-color: var(--line); }
.profil-bouton[aria-expanded="true"] { background: var(--surface-entete); border-color: var(--line-forte); }
.profil-bouton .ico { color: var(--muted); }
.profil-bouton .jeton-utilisateur-texte { display: flex; flex-direction: column; }

.profil-menu {
  position: absolute; top: calc(100% + 0.4rem); right: 0; z-index: 60;
  min-width: 13rem; padding: 0.35rem;
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--rayon); box-shadow: var(--ombre-flottante);
}
.profil-lien {
  display: flex; align-items: center; gap: 0.625rem;
  padding: 0.55rem 0.7rem; border-radius: var(--rayon-petit);
  font-size: 0.875rem; font-weight: 500; color: var(--ink); text-decoration: none;
  transition: background-color var(--transition);
}
.profil-lien:hover { background: var(--surface-entete); }
.profil-lien .ico { color: var(--muted); }
.profil-lien.danger { color: var(--danger); }
.profil-lien.danger .ico { color: var(--danger); }

.voile-modale {
  position: fixed; inset: 0; z-index: 100;
  background: rgba(10, 54, 112, 0.55);
  display: grid; place-items: center; padding: 1.5rem;
  backdrop-filter: blur(2px);
}
/* `display: grid` l'emporterait sur l'attribut `hidden` : sans cette regle, le
   voile reste invisible mais continue d'intercepter tous les clics de la page. */
.voile-modale[hidden], .profil-menu[hidden] { display: none; }
.modale {
  width: 100%; max-width: 26rem; text-align: center;
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--rayon-large); box-shadow: var(--ombre-flottante);
  padding: 1.75rem 1.5rem;
}
.modale-ico {
  width: 52px; height: 52px; border-radius: 999px; margin: 0 auto 0.875rem;
  display: grid; place-items: center;
  background: var(--alerte-50); color: var(--alerte); border: 1px solid var(--alerte-100);
}
.modale h2 { font-size: 1.0625rem; font-weight: 700; margin-bottom: 0.4rem; }
.modale p { font-size: 0.875rem; color: var(--muted); }
.compte-a-rebours {
  font-family: 'IBM Plex Mono', ui-monospace, monospace;
  font-size: 2.5rem; font-weight: 800; color: var(--danger);
  margin: 0.875rem 0; font-variant-numeric: tabular-nums;
}
.modale-actions { display: flex; gap: 0.5rem; justify-content: center; flex-wrap: wrap; }

@media (max-width: 1200px) { .horloge { display: none; } }

/* Matrice des autorisations : une case par fonctionnalité, pas seulement par menu */
.grille-actions { display: grid; grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); gap: 0.3rem 0.875rem; }
.action-permission {
  display: flex; align-items: flex-start; gap: 0.4rem;
  font-size: 0.75rem; color: var(--muted); line-height: 1.35;
}
.action-permission input { margin-top: 0.15rem; }

/* Lien d'aide sous le bouton de connexion */
.connexion-aide { margin-top: 14px; text-align: center; }
.connexion-aide a {
  font-size: 12.5px; color: var(--muted); text-decoration: none;
  border-bottom: 1px solid transparent; transition: color .15s, border-color .15s;
}
.connexion-aide a:hover { color: var(--bleu); border-bottom-color: var(--bleu); }

/* ------------------------------------------------------------------ *
 * Formulaires de reglage : bascules, groupes, lignes de champs
 * ------------------------------------------------------------------ */
.bascule {
  display: flex; align-items: flex-start; gap: 10px;
  padding: 9px 0; font-size: 13.5px; color: var(--encre); cursor: pointer;
}
.bascule input[type="checkbox"] { margin-top: 2px; flex: none; }
.bascule input[disabled] + span { color: var(--muted); }
.bascule span { line-height: 1.45; }

.groupe-titre {
  font-size: 11px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
  color: var(--muted); margin: 18px 0 8px;
}
.groupe-titre:first-of-type { margin-top: 4px; }

.ligne-champs { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }

.tableau-compact th, .tableau-compact td { padding-top: 8px; padding-bottom: 8px; }
.tableau-compact td { vertical-align: top; }

.cellule-principale { font-weight: 600; color: var(--encre); }
.cellule-detail { font-size: 11.5px; color: var(--muted); margin-top: 2px; line-height: 1.45; }

.etiquette {
  display: inline-block; padding: 2px 8px; border-radius: 999px;
  background: var(--surface); border: 1px solid var(--ligne);
  font-size: 10.5px; font-weight: 700; letter-spacing: .06em;
  text-transform: uppercase; color: var(--muted);
}

.alerte {
  border: 1px solid var(--ligne); border-radius: .625rem;
  padding: 12px 16px; margin-bottom: 16px; font-size: 13px; line-height: 1.55;
  background: #FFFFFF; color: var(--encre);
}
.alerte-info { background: #EFF6FF; border-color: #BFDBFE; }
.alerte-attention { background: var(--alerte-50); border-color: var(--alerte-100); color: var(--alerte); }

/* ------------------------------------------------------------------ *
 * Carte du territoire (Leaflet local + couche de densite)
 * ------------------------------------------------------------------ */
.carte-territoire {
  height: 520px; width: 100%; border-radius: .625rem;
  border: 1px solid var(--ligne); background: #EAF0F6;
}
.carte-territoire:focus-visible { outline: 2px solid var(--bleu); outline-offset: 2px; }

.carte-etat { font-size: 12.5px; color: var(--muted); margin-bottom: 10px; }
.carte-etat:empty { display: none; }
.carte-etat.attention {
  background: var(--alerte-50); border: 1px solid var(--alerte-100);
  color: var(--alerte); border-radius: .5rem; padding: 8px 12px;
}

.carte-pied {
  display: flex; align-items: center; justify-content: space-between;
  gap: 16px; flex-wrap: wrap; margin-top: 12px;
}
.carte-legende { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.carte-legende-titre {
  font-size: 11px; font-weight: 700; letter-spacing: .1em;
  text-transform: uppercase; color: var(--muted);
}
.carte-echelle {
  display: inline-block; width: 150px; height: 9px; border-radius: 999px;
  border: 1px solid var(--ligne);
  background: linear-gradient(90deg, #0D4A8F 0%, #1E9BD7 40%,
                              #C6A53F 65%, #D21C2B 85%, #8C0C18 100%);
}
.carte-legende-detail { font-size: 12px; color: var(--muted); }

/* Reperes de la carte : pastilles rondes, memes couleurs que le reste */
.repere-carte span {
  display: flex; align-items: center; justify-content: center;
  width: 20px; height: 20px; border-radius: 50%;
  border: 2px solid #FFFFFF; box-shadow: 0 1px 3px rgba(10, 54, 112, .35);
  color: #FFFFFF; font-size: 10px; font-weight: 700;
}

/* Habillage Leaflet aligne sur la charte */
.leaflet-container { font: inherit; background: #EAF0F6; }
.leaflet-control-layers, .leaflet-bar {
  border: 1px solid var(--ligne) !important;
  border-radius: .5rem !important;
  box-shadow: 0 1px 3px rgba(38, 49, 62, .12) !important;
}
.leaflet-control-layers-expanded {
  padding: 10px 12px; font-size: 12.5px; color: var(--encre);
}
.leaflet-control-layers-selector { margin-right: 6px; }
.leaflet-control-attribution {
  font-size: 10.5px; background: rgba(255, 255, 255, .88) !important; color: var(--muted);
}
.leaflet-tooltip {
  border: 1px solid var(--ligne); border-radius: .375rem;
  font-size: 12px; color: var(--encre); box-shadow: 0 1px 3px rgba(38, 49, 62, .12);
}

/* ------------------------------------------------------------------ *
 * Grilles nommees par usage
 * ------------------------------------------------------------------ */
/* Rangee d'indicateurs : meme anatomie que le tableau de bord, mais avec un
   nom qui dit ce que la grille contient plutot que combien de colonnes elle a. */
.grille-indicateurs { grid-template-columns: repeat(auto-fit, minmax(232px, 1fr)); gap: 1rem; }
.grille-formulaire { grid-template-columns: repeat(auto-fit, minmax(224px, 1fr)); gap: 1rem; }
@media (max-width: 720px) {
  .grille-indicateurs, .grille-formulaire { grid-template-columns: 1fr; }
}

/* Ligne de tendance sous la valeur d'un indicateur */
.indicateur-tendance { font-size: 11.5px; color: var(--muted); margin-top: 6px; }
.indicateur-tendance .etat { margin-right: 4px; }

/* ------------------------------------------------------------------ *
 * Colonne d'actions de fin de ligne
 * ------------------------------------------------------------------ */
/* `width:1%` seul ne suffit pas : le moteur repartit la largeur restante et la
   colonne se retrouve trop etroite pour aligner ses boutons, qui s'empilent.
   Une largeur minimale explicite est necessaire. */
.colonne-actions {
  width: 1%; min-width: 132px; white-space: nowrap; text-align: right;
}

.actions-ligne {
  display: inline-flex; align-items: center; gap: 4px;
  flex-wrap: nowrap; white-space: nowrap;
}

.action {
  display: inline-flex; align-items: center; gap: 5px;
  height: 30px; padding: 0 8px; border-radius: .45rem;
  border: 1px solid transparent; background: transparent;
  color: var(--muted); text-decoration: none; cursor: pointer;
  transition: background .14s, color .14s, border-color .14s;
}
.action:hover { background: var(--surface); color: var(--bleu); border-color: var(--ligne); }
.action:focus-visible { outline: 2px solid var(--bleu); outline-offset: 1px; }

/* Le fichier est l'action la plus demandee du registre : elle porte un
   libelle, les autres restent des icones seules. */
.action-fichier {
  background: var(--surface); border-color: var(--ligne); color: var(--bleu);
  font-size: 11.5px; font-weight: 700; letter-spacing: .04em;
}
.action-fichier:hover { background: var(--bleu); border-color: var(--bleu); color: #FFFFFF; }
.action-fichier span { line-height: 1; }

.action-danger:hover { background: #FEF2F2; border-color: #FECACA; color: var(--rouge); }

/* ------------------------------------------------------------------ *
 * Photographie d'identite du dossier
 * ------------------------------------------------------------------ */
.photo-dossier {
  width: 132px; aspect-ratio: 3 / 4; flex: none;
  border-radius: .5rem; overflow: hidden;
  border: 1px solid var(--ligne); background: var(--surface);
  display: flex; align-items: center; justify-content: center;
}
.photo-dossier img { width: 100%; height: 100%; object-fit: cover; display: block; }
.photo-dossier .photo-absente {
  display: flex; flex-direction: column; align-items: center; gap: 6px;
  color: #9AA5B1; font-size: 11px; text-align: center; padding: 8px;
}
.photo-bloc { display: flex; gap: 16px; align-items: flex-start; }
.photo-actions { display: flex; flex-direction: column; gap: 8px; min-width: 0; }

/* ------------------------------------------------------------------ *
 * Preparation d'un imprime : numero attribue et reprises du dossier
 * ------------------------------------------------------------------ */
/* `display:flex` l'emporte sur la valeur `display:none` que le navigateur
   associe a l'attribut `hidden` : sans ce garde-fou, masquer le bloc en
   JavaScript reste sans effet. Meme piege que sur le voile de modale. */
.numero-attribue[hidden], .reprises[hidden], #bloc-numero[hidden],
#bloc-reprise[hidden], #bloc-manquants[hidden] { display: none !important; }

.numero-attribue {
  display: flex; align-items: center; gap: 9px;
  padding: 10px 12px; border-radius: .5rem;
  background: var(--surface); border: 1px solid var(--ligne);
}
.numero-attribue .ico { color: var(--bleu); flex: none; }
.numero-attribue .mono { font-size: 14px; font-weight: 700; color: var(--navy); }
.numero-attribue .etiquette { margin-left: auto; }

.reprises {
  display: grid; gap: 10px 18px;
  grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
}
.reprise { min-width: 0; }
.reprise-libelle {
  font-size: 10.5px; font-weight: 700; letter-spacing: .08em;
  text-transform: uppercase; color: var(--muted);
}
.reprise-valeur {
  font-size: 13.5px; color: var(--encre); font-weight: 600;
  margin-top: 2px; overflow-wrap: anywhere;
}

/* Blocs du formulaire de generation, construits en JavaScript */
#bloc-saisie[hidden], #bloc-complet[hidden], .champ[hidden] { display: none !important; }
#saisie .groupe-titre:first-child { margin-top: 0; }
#bloc-variante[hidden] { display: none !important; }
.champ[data-categorie][hidden] { display: none !important; }

/* Action d'etape suivante dans le registre : elle porte un libelle, parce
   qu'une icone seule ne dit pas ce que la transition va changer. */
.action-etape {
  background: var(--surface); border-color: var(--ligne); color: var(--navy);
  font-size: 11.5px; font-weight: 700; letter-spacing: .03em;
}
.action-etape:hover { background: var(--navy); border-color: var(--navy); color: #FFFFFF; }
.action-etape span { line-height: 1; }

/* ------------------------------------------------------------------ *
 * Lecture du QR sur la page publique de verification
 * ------------------------------------------------------------------ */
#scanner[hidden] { display: none !important; }

.scanner-cadre {
  position: relative; width: 100%; aspect-ratio: 1 / 1;
  max-height: 340px; overflow: hidden;
  border-radius: .625rem; background: #0B1220;
}
.scanner-cadre video {
  width: 100%; height: 100%; object-fit: cover; display: block;
}
/* Viseur : il indique ou presenter le document, sinon on cadre au hasard. */
.scanner-viseur {
  position: absolute; inset: 18%;
  border: 2px solid rgba(255, 255, 255, .9); border-radius: .5rem;
  box-shadow: 0 0 0 100vmax rgba(11, 18, 32, .45);
}
#bloc-photo[hidden], #photo-camera-zone[hidden] { display: none !important; }
#photo-apercu img { width: 100%; height: 100%; object-fit: cover; display: block; }
#photo-camera-zone video { transform: scaleX(-1); }  /* miroir : on se cadre mieux */

/* Pastille de comptage sur un bouton de la barre superieure */
.barre-bouton { position: relative; }
.barre-pastille {
  position: absolute; top: 2px; right: 2px;
  min-width: 17px; height: 17px; padding: 0 4px;
  border-radius: 999px; background: var(--rouge); color: #FFFFFF;
  font-size: 10px; font-weight: 800; line-height: 17px; text-align: center;
}
.formulaire-refus[hidden] { display: none !important; }
#bloc-signataire[hidden] { display: none !important; }

/* Informations manquantes empechant la production d'un document */
.manques {
  display: grid; gap: 14px; margin-top: 12px;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
}
.manque-groupe {
  background: #FFFFFF; border: 1px solid var(--ligne);
  border-radius: .5rem; padding: 12px 14px;
}
.manque-groupe .groupe-titre { margin: 0 0 6px; }
.manque-liste { margin: 0 0 6px; padding-left: 18px; }
.manque-liste li { font-size: 13px; color: var(--encre); font-weight: 600; line-height: 1.7; }
#bloc-manques-dossier[hidden] { display: none !important; }
#bloc-manques-dossier { border-color: var(--alerte-100); background: var(--alerte-50); }

/* Etat des trois emplacements de specimen d'une autorite */
.specimens-etat { display: flex; flex-direction: column; gap: 4px; align-items: flex-start; }
.specimens-etat .etat { text-decoration: none; }

/* Raccourcis de selection dans la matrice des roles */
.module-raccourcis { display: flex; gap: 4px; margin-top: 6px; flex-wrap: wrap; }
.module-raccourcis button {
  border: 1px solid var(--ligne); background: #FFFFFF; color: var(--muted);
  border-radius: .35rem; padding: 2px 7px; font-size: 10.5px; font-weight: 700;
  cursor: pointer; transition: background .14s, color .14s, border-color .14s;
}
.module-raccourcis button:hover { background: var(--navy); border-color: var(--navy); color: #FFFFFF; }

/* =============================================================================
   Fiche d'audience · rail d'identite + colonne sequentielle

   L'imprime papier se lit de I a XIV, dans l'ordre. Une grille `auto-fit` le
   trahit : a 1440 px elle produit trois colonnes et fait lire I, III puis II
   puis IV en zigzag. La fiche impose donc **une seule colonne de lecture**, et
   sort de ce flux ce qui n'est pas du texte de rubrique : l'identite, les
   avis, le visa et le sommaire, poses dans un rail fixe a gauche.
   ========================================================================== */
.fiche {
  display: grid;
  /* `minmax(0, 1fr)` et non `1fr` : sans lui, la valeur implicite `auto` de
     `min-width` laisse le tableau de la delegation elargir sa colonne au-dela
     de la grille, et la page defile horizontalement.                          */
  grid-template-columns: 264px minmax(0, 1fr);
  gap: 1.25rem;
  align-items: start;
}
@media (max-width: 1100px) { .fiche { grid-template-columns: 1fr; } }

.fiche-rail {
  position: sticky; top: calc(var(--hauteur-barre) + 1rem);
  display: flex; flex-direction: column; gap: 0.75rem;
}
@media (max-width: 1100px) { .fiche-rail { position: static; } }

.rail-bloc {
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--rayon); padding: 0.875rem; box-shadow: var(--ombre-carte);
}
.rail-titre {
  font-size: 10.5px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--faible); margin-bottom: 0.5rem;
}
.rail-numero {
  font-family: 'IBM Plex Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 0.875rem; font-weight: 600; color: var(--navy); word-break: break-all;
  line-height: 1.35;
}
.rail-etats { display: flex; flex-wrap: wrap; gap: 0.3rem; margin-top: 0.625rem; }
.rail-ligne {
  display: flex; align-items: center; justify-content: space-between; gap: 0.5rem;
  padding: 0.375rem 0; font-size: 0.8125rem; border-top: 1px solid var(--line);
}
.rail-ligne:first-of-type { border-top: 0; padding-top: 0; }
.rail-cle { color: var(--muted); }
.rail-valeur { font-weight: 600; text-align: right; }
.rail-note { font-size: 11.5px; color: var(--faible); line-height: 1.45; margin-top: 0.5rem; }

/* Sommaire ancre · les rubriques vides restent listees, en retrait :
   sur un imprime officiel, une rubrique non renseignee est une information. */
.sommaire { display: flex; flex-direction: column; gap: 1px; }
.sommaire a {
  display: flex; align-items: baseline; gap: 0.5rem;
  padding: 0.3rem 0.4rem; border-radius: var(--rayon-petit);
  font-size: 0.8125rem; color: var(--ink); text-decoration: none;
  transition: background-color var(--transition), color var(--transition);
}
.sommaire a:hover { background: var(--brand-50); color: var(--brand); }
.sommaire a.estompe { color: var(--faible); }
.sommaire .sommaire-num {
  font-family: 'IBM Plex Mono', ui-monospace, monospace;
  font-size: 10.5px; color: var(--faible); min-width: 2.4em; flex: none;
}

/* --- Colonne de lecture · une rubrique, une section ----------------------- */
.rubrique {
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--rayon); box-shadow: var(--ombre-carte);
  padding: 1.125rem 1.25rem; margin-bottom: 1rem;
  /* Sans cette marge, un lien du sommaire amene la rubrique sous la barre
     superieure fixe : son titre reste cache. */
  scroll-margin-top: calc(var(--hauteur-barre) + 1rem);
}
.rubrique:last-child { margin-bottom: 0; }
.rubrique-entete {
  display: flex; align-items: center; gap: 0.625rem; flex-wrap: wrap;
  margin-bottom: 0.875rem; padding-bottom: 0.625rem; border-bottom: 1px solid var(--line);
}
.rubrique-num {
  flex: none; min-width: 2.75rem; height: 1.5rem; padding: 0 0.5rem;
  border-radius: var(--rayon-petit); background: var(--navy); color: #fff;
  font-family: 'IBM Plex Mono', ui-monospace, monospace;
  font-size: 11px; font-weight: 600; display: grid; place-items: center;
}
.rubrique-entete h3 { font-size: 0.9375rem; font-weight: 700; letter-spacing: -0.01em; }
.rubrique-entete .etiquette { margin-left: auto; }
.rubrique .definitions { grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); }
.rubrique .groupe-titre:first-of-type { margin-top: 0; }
.rubrique-vide { font-size: 0.875rem; color: var(--faible); font-style: italic; }
.texte-rubrique { font-size: 0.875rem; line-height: 1.65; white-space: pre-line; }

/* --- Rubrique XIII · six oui/non, en pastilles plutot qu'en douze lignes --- */
.protocole { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.protocole-item {
  display: inline-flex; align-items: center; gap: 0.4rem;
  padding: 0.35rem 0.625rem; border-radius: 999px;
  border: 1px solid var(--line); background: var(--surface-douce);
  font-size: 0.8125rem; color: var(--muted);
}
.protocole-item.oui {
  border-color: var(--succes-100); background: var(--succes-50);
  color: var(--succes); font-weight: 600;
}
.protocole-item .ico { width: 14px; height: 14px; }

/* --- Rubrique XIV · les deux blocs de signature --------------------------- */
.visa { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 0.875rem; }
.visa-bloc {
  border: 1px solid var(--line); border-radius: var(--rayon-petit);
  padding: 0.75rem 0.875rem; background: var(--surface-douce);
}
.visa-bloc.appose { border-color: var(--succes-100); background: var(--succes-50); }
.visa-role {
  font-size: 10.5px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--muted); margin-bottom: 0.375rem;
}
.visa-nom { font-size: 0.875rem; font-weight: 700; }
.visa-detail { font-size: 0.75rem; color: var(--muted); margin-top: 2px; }

/* =============================================================================
   Calendrier mensuel des audiences
   ========================================================================== */
.calendrier { background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--rayon); box-shadow: var(--ombre-carte); overflow: hidden; }

.calendrier-entete {
  display: grid; grid-template-columns: repeat(7, minmax(0, 1fr));
  background: var(--surface-entete); border-bottom: 1px solid var(--line);
}
.calendrier-entete div {
  padding: 0.5rem 0.625rem; font-size: 11px; font-weight: 700;
  letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted);
}

.calendrier-grille { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); }
.calendrier-jour {
  min-height: 116px; padding: 0.5rem; border-right: 1px solid var(--line);
  border-bottom: 1px solid var(--line); display: flex; flex-direction: column; gap: 0.3rem;
}
.calendrier-jour:nth-child(7n) { border-right: 0; }
.calendrier-jour.hors-mois { background: var(--surface-douce); }
.calendrier-jour.hors-mois .calendrier-numero { color: var(--faible); }
.calendrier-jour.week-end { background: var(--canvas); }
.calendrier-jour.aujourdhui { background: var(--brand-50); box-shadow: inset 0 0 0 2px var(--brand); }

.calendrier-tete { display: flex; align-items: center; gap: 0.375rem; }
.calendrier-numero { font-size: 0.8125rem; font-weight: 700; color: var(--ink); }
.calendrier-jour.aujourdhui .calendrier-numero { color: var(--brand); }
.calendrier-marque {
  margin-left: auto; font-size: 9.5px; font-weight: 700; letter-spacing: 0.05em;
  text-transform: uppercase; color: var(--succes);
}

/* Une audience dans une case · la pastille porte l'etat, le texte porte
   l'heure et le visiteur. Jamais l'objet : il est chiffre, et une case de
   calendrier n'est pas le lieu ou l'exposer. */
.calendrier-audience {
  display: block; padding: 0.25rem 0.4rem; border-radius: var(--rayon-petit);
  background: var(--surface); border: 1px solid var(--line);
  border-left: 3px solid var(--line-forte);
  font-size: 11.5px; line-height: 1.35; color: var(--ink); text-decoration: none;
  transition: border-color var(--transition), box-shadow var(--transition);
}
.calendrier-audience:hover { box-shadow: var(--ombre-flottante); }
.calendrier-audience .heure {
  font-family: 'IBM Plex Mono', ui-monospace, monospace; font-weight: 600; color: var(--muted);
}
.calendrier-audience .qui {
  display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  font-weight: 600;
}
.calendrier-audience.vert { border-left-color: var(--succes); }
.calendrier-audience.bleu { border-left-color: var(--brand); }
.calendrier-audience.orange { border-left-color: var(--alerte); }
.calendrier-audience.rouge { border-left-color: var(--danger); }
.calendrier-audience.neutre { border-left-color: var(--line-forte); }

.calendrier-vide { font-size: 11px; color: var(--faible); }

@media (max-width: 900px) {
  /* Sept colonnes sur un telephone donnent des cases de 45 px : illisibles.
     La grille se replie en liste, une journee par ligne.                     */
  .calendrier-entete { display: none; }
  .calendrier-grille { grid-template-columns: 1fr; }
  .calendrier-jour { min-height: 0; border-right: 0; }
  .calendrier-jour.hors-mois { display: none; }
  .calendrier-tete::after {
    content: attr(data-jour); font-size: 11px; color: var(--muted); margin-left: 0.25rem;
  }
}

/* --- Bandeau de navigation du calendrier --------------------------------- */
.calendrier-barre {
  display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; margin-bottom: 1rem;
}
.calendrier-titre { font-size: 1rem; font-weight: 700; text-transform: capitalize; }
.calendrier-barre .compteurs { margin-left: auto; display: flex; gap: 0.5rem; flex-wrap: wrap; }

/* --- Legende partagee calendrier / statistiques -------------------------- */
.legende { display: flex; flex-wrap: wrap; gap: 0.75rem; margin-top: 0.75rem; }
.legende span { display: inline-flex; align-items: center; gap: 0.4rem; font-size: 11.5px; color: var(--muted); }
.legende i { width: 10px; height: 10px; border-radius: 2px; flex: none; }