/*
  Système de design — Cadastre des Données de l'État
  Couleurs : alignées sur les jetons de marque officiels du site du MTNIT
  (telecom.gouv.ci) — --orange:#EF7D00, --vert:#0F7705, --vert-drapeau:#3FA535,
  --vert-fonce:#023A05, lus directement dans le :root de leur feuille de style —
  plutôt que sur une interprétation libre du drapeau.
  Typographie : pile système du site officiel (aucune police web custom côté
  gouvernement) — -apple-system, system-ui, Segoe UI, Roboto, Helvetica Neue,
  Arial… Roboto reste vendorisée localement (aucun CDN) et sert de repli dans
  la même position que sur le site officiel.
  Composants : coins généreusement arrondis, élévation par ombre douce plutôt
  que bordures dures, boutons capsule — vocabulaire visuel commun à Material
  Design (Google) et Human Interface Guidelines (Apple).
*/

:root {
  /* Couleurs officielles MTNIT (telecom.gouv.ci) */
  --ci-orange: #ef7d00;
  --ci-orange-600: #cb6a00;
  --ci-orange-700: #a75800;
  --ci-orange-tint: #fdf1e2;
  --ci-green: #0f7705;
  --ci-green-600: #0d6504;
  --ci-green-tint: #e7f1e6;
  --ci-green-drapeau: #3fa535;
  --ci-green-fonce: #023a05;

  /* Neutres — gris Material légèrement teinté vert, à la Google Workspace */
  --paper: #f6f8f7;
  --surface: #ffffff;
  --surface-2: #eef1f0;
  --ink: #1b201d;
  --ink-soft: #5b6560;
  --ink-faint: #8b948f;
  --line: #e2e6e3;

  --accent: var(--ci-orange);
  --accent-strong: var(--ci-orange-600);
  --accent-tint: var(--ci-orange-tint);
  --success: var(--ci-green);
  --success-strong: var(--ci-green-600);
  --success-tint: var(--ci-green-tint);
  --danger: #b3261e;
  --danger-tint: #fce8e6;

  /* Rayons — généreux, à la Material 3 / capsule Apple */
  --radius-sm: 10px;
  --radius-md: 16px;
  --radius-lg: 28px;
  --radius-pill: 999px;

  /* Élévation — ombre douce plutôt que bordure dure */
  --elev-1: 0 1px 2px rgba(20, 30, 25, 0.06), 0 1px 3px rgba(20, 30, 25, 0.08);
  --elev-2: 0 2px 6px rgba(20, 30, 25, 0.08), 0 6px 16px rgba(20, 30, 25, 0.08);
  --elev-hover: 0 4px 10px rgba(20, 30, 25, 0.10), 0 10px 24px rgba(20, 30, 25, 0.10);

  --bs-primary: var(--ci-orange);
  --bs-primary-rgb: 239, 125, 0;
  --bs-success: var(--ci-green);
  --bs-success-rgb: 15, 119, 5;
  --bs-link-color: var(--ci-orange-600);
  --bs-link-color-rgb: 203, 106, 0;
  --bs-link-hover-color: var(--ci-orange-700);
  --bs-body-bg: var(--paper);
  --bs-body-color: var(--ink);
  --bs-border-radius: var(--radius-sm);
  --bs-border-radius-lg: var(--radius-md);
  --bs-font-sans-serif: -apple-system, "system-ui", "Segoe UI", "Roboto", "Helvetica Neue", Arial, "Noto Sans", "Liberation Sans", sans-serif;
}

body {
  font-family: var(--bs-font-sans-serif);
  -webkit-font-smoothing: antialiased;
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}
body > main { flex: 1 0 auto; }

h1, h2, h3, h4, h5, h6 {
  font-weight: 500;
  letter-spacing: -0.01em;
}

/* ---------- Barre de navigation — app bar claire, à la Material ----------
   .container plafonne à 1320px (≥1400px de viewport) — bien trop juste pour
   les liens + sous-menu + cloche + compte + bouton que porte cette nav une
   fois connecté : ils se retrouvaient chacun compressés au point de casser
   leur propre libellé sur deux lignes. Un plafond propre à la nav, plus
   large, leur redonne la place de tenir sur une seule ligne — observation
   plateforme du 2026-09-07 (capture « header »).

   Le nombre de liens de premier niveau a grossi depuis (File d'examen,
   Pilotage national, Administration) : même à 1600px, un compte admin_ucp
   au nom/rôle longs peut ne plus tenir sur une seule ligne — observation du
   2026-09-22 (capture « header » débordant hors fenêtre). Plutôt que de
   pousser encore ce plafond (jamais suffisant pour toutes les tailles
   d'écran réelles), navbar-expand-xl retarde le passage en ligne continue
   jusqu'à un viewport large, et flex-wrap ci-dessous fait passer le reste
   sur une deuxième ligne au lieu de déborder — jamais de contenu hors
   fenêtre, quelle que soit la largeur. */
.navbar-cadastre .container {
  max-width: 1600px;
}

.navbar-cadastre > .container,
.navbar-cadastre .navbar-collapse,
.navbar-cadastre .navbar-nav {
  flex-wrap: wrap;
  row-gap: .35rem;
}

.navbar-cadastre {
  background: var(--surface);
  box-shadow: var(--elev-1);
  padding-top: .7rem;
  padding-bottom: .7rem;
}

.navbar-cadastre .navbar-brand {
  display: flex;
  align-items: center;
  gap: .6rem;
  font-weight: 500;
  font-size: 1.05rem;
  color: var(--ink) !important;
}

.brand-logo {
  height: 40px;
  width: auto;
  flex: none;
}

/* Le logo complet (armoiries + texte) est assez fin : à la hauteur générique
   de .brand-logo (40px) le texte devient illisible — chaque contexte
   (nav claire, pied de page sombre) reçoit donc sa propre taille, plus
   grande, plutôt que de partager cette valeur trop compacte. */
.navbar-cadastre .brand-logo {
  height: 52px;
}

.navbar-cadastre .navbar-brand small {
  display: block;
  font-size: .64rem;
  letter-spacing: .07em;
  text-transform: uppercase;
  color: var(--ink-faint);
  font-weight: 400;
}

.navbar-cadastre .navbar-nav { gap: .15rem; }

.navbar-cadastre .nav-link {
  color: var(--ink-soft) !important;
  font-size: .9rem;
  font-weight: 500;
  padding: .45rem .8rem !important;
  border-radius: var(--radius-pill);
  white-space: nowrap;
}

.navbar-cadastre .nav-compte { white-space: nowrap; }

.navbar-cadastre .nav-link:hover {
  color: var(--ink) !important;
  background: var(--surface-2);
}

.navbar-cadastre .nav-link.active {
  color: var(--ci-orange-600) !important;
  background: var(--accent-tint);
}

.navbar-cadastre .dropdown-menu {
  border: none;
  border-radius: var(--radius-sm);
  box-shadow: var(--elev-2);
  padding: .4rem;
  margin-top: .4rem;
}

.navbar-cadastre .dropdown-item {
  border-radius: var(--radius-sm);
  padding: .5rem .8rem;
  font-size: .88rem;
  color: var(--ink-soft);
}

.navbar-cadastre .dropdown-item:hover,
.navbar-cadastre .dropdown-item:focus {
  background: var(--accent-tint);
  color: var(--ci-orange-600);
}

.navbar-cadastre .dropdown-toggle::after { vertical-align: .1em; }

/* ---------- Pastille « Mon panier » — actifs en attente pour un admin ---------- */
#mon-panier details summary { cursor: pointer; list-style: none; }
#mon-panier details summary::-webkit-details-marker { display: none; }
#mon-panier details[open] summary { margin-bottom: .4rem; }

.badge-panier {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  margin-left: .35rem;
  border-radius: var(--radius-pill);
  background: var(--danger);
  color: #fff;
  font-size: .68rem;
  font-weight: 700;
  vertical-align: middle;
}

.nav-compte {
  font-size: .82rem;
  color: var(--ink-soft);
  padding-right: .5rem;
  border-right: 1px solid var(--line);
  margin-right: .25rem;
}

.nav-compte-role {
  display: block;
  font-size: .68rem;
  color: var(--ink-faint);
}

/* ---------- Boutons — capsule, sans bordure dure ---------- */
.btn {
  border-radius: var(--radius-pill);
  font-weight: 500;
  padding-left: 1.25rem;
  padding-right: 1.25rem;
  transition: box-shadow .15s ease;
}

.btn-primary {
  --bs-btn-bg: var(--ci-orange);
  --bs-btn-border-color: var(--ci-orange);
  --bs-btn-hover-bg: var(--ci-orange-600);
  --bs-btn-hover-border-color: var(--ci-orange-600);
  --bs-btn-active-bg: var(--ci-orange-700);
  --bs-btn-active-border-color: var(--ci-orange-700);
  box-shadow: var(--elev-1);
}

.btn-primary:hover { box-shadow: var(--elev-hover); }

.btn-outline-light {
  border-radius: var(--radius-pill);
}

/* ---------- Cartes — élévation douce, coins généreux ----------
   Bootstrap fait hériter --bs-card-bg de --bs-body-bg par défaut : sans ce
   blanc-pur explicite, une carte se fond dans le fond de page (--paper),
   les deux étant le même gris très clair — plus d'ombre ni de bordure pour
   les distinguer visuellement. */
.card {
  --bs-card-bg: var(--surface);
  background-color: var(--surface);
  border: none;
  border-radius: var(--radius-md);
  box-shadow: var(--elev-1);
}

.card.card-hover {
  transition: box-shadow .18s ease;
}

.card.card-hover:hover {
  box-shadow: var(--elev-hover);
}

/* ---------- Accordéons — même défaut Bootstrap que les cartes ----------
   --bs-accordion-bg hérite lui aussi de --bs-body-bg : sans ce blanc-pur
   explicite, chaque bloc de l'accordéon (Identification, Responsabilités,
   Interopérabilité et flux…) se fond dans le fond gris de page, exactement
   comme .card ci-dessus — observation plateforme du 2026-09-07 : le correctif
   n'avait été posé qu'au cas par cas (box-shadow inline) sans jamais toucher
   au fond, d'où des blocs encore invisibles sur certaines interfaces. */
.accordion-item {
  --bs-accordion-bg: var(--surface);
  --bs-accordion-active-bg: var(--accent-tint);
}

/* Accents de couleur pleine — pour rompre le blanc sans multiplier les effets */
.card-accent-orange { border-top: 3px solid var(--ci-orange); }
.card-accent-green { border-top: 3px solid var(--ci-green); }
.card-accent-ink { border-top: 3px solid var(--ink); }

/* ---------- Aplats de couleur pleine — drapeau de Côte d'Ivoire ----------
   Plutôt qu'un simple filet de 3px en haut de carte blanche, ces variantes
   remplissent toute la carte d'une des couleurs nationales (orange, vert,
   encre — la troisième teinte de marque déjà utilisée par le bandeau héros
   et le pied de page en lieu du blanc, qui se fondrait dans le fond de
   page). Le texte et les tuiles d'icône imbriquées basculent en clair pour
   rester lisibles sur fond de couleur. */
.card-fill-orange,
.card-fill-green,
.card-fill-ink {
  border: none;
  color: #fff;
}
.card-fill-orange { background: linear-gradient(155deg, var(--ci-orange), var(--ci-orange-600)); }
.card-fill-green { background: linear-gradient(155deg, var(--ci-green), var(--ci-green-600)); }
.card-fill-ink { background: linear-gradient(155deg, #262d28, var(--ink)); color: #dfeee8; }

.card-fill-orange h1, .card-fill-orange h2, .card-fill-orange h3, .card-fill-orange h4, .card-fill-orange h5, .card-fill-orange h6, .card-fill-orange strong,
.card-fill-green h1, .card-fill-green h2, .card-fill-green h3, .card-fill-green h4, .card-fill-green h5, .card-fill-green h6, .card-fill-green strong,
.card-fill-ink h1, .card-fill-ink h2, .card-fill-ink h3, .card-fill-ink h4, .card-fill-ink h5, .card-fill-ink h6, .card-fill-ink strong {
  color: #fff;
}
.card-fill-orange p, .card-fill-orange .text-body-secondary,
.card-fill-green p, .card-fill-green .text-body-secondary {
  color: rgba(255, 255, 255, .86) !important;
}
.card-fill-ink p, .card-fill-ink .text-body-secondary { color: #b9cec6 !important; }

.card-fill-orange .hero-icon-tile,
.card-fill-green .hero-icon-tile,
.card-fill-ink .hero-icon-tile {
  background: rgba(255, 255, 255, .18);
  color: #fff;
}

.section-teinte {
  background: var(--surface-2);
  border-radius: var(--radius-lg);
  padding: 2.25rem;
}

/* ---------- Bandeau coloré — remplace un hero blanc par un vrai aplat de couleur ---------- */
.hero-bande {
  background: var(--ink);
  border-top: 3px solid var(--ci-orange);
  color: #dfeee8;
  border-radius: var(--radius-lg);
  padding: 3rem 2.5rem;
  position: relative;
  overflow: hidden;
}
.hero-bande::after {
  content: "";
  position: absolute;
  top: -60px;
  right: -60px;
  width: 220px;
  height: 220px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255,130,0,.25), transparent 70%);
}
.hero-bande h1 { color: #fff; }
.hero-bande .lead { color: #b9cec6; }
.hero-bande .eyebrow { color: var(--ci-orange); }

/* ---------- Logo du Ministère — bandeau d'accueil ----------
   logo-mtnit-blanc.webp porte son propre texte en blanc (variante dédiée,
   à la différence de celui de la nav et du pied de page) — lisible
   directement sur le fond encre du bandeau héros, sans encart blanc. */
.hero-logo-ministere {
  height: 100%;
  min-height: 200px;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 1rem;
}
.hero-logo-ministere img {
  max-width: 1000px;
  width: 130%;
  height: auto;
}

/* ---------- Puces de statut — Material chips plutôt que simples pastilles ---------- */
.chip {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  padding: .3rem .75rem;
  border-radius: var(--radius-pill);
  font-size: .78rem;
  font-weight: 500;
}

.chip-ok { background: var(--success-tint); color: var(--success-strong); }
.chip-erreur { background: var(--danger-tint); color: var(--danger); }
/* Échelles à 3-4 niveaux (criticité, qualité, maîtrise) — chip-ok/chip-erreur
   couvrent les deux extrémités, ces deux-là couvrent les paliers intermédiaires
   plutôt que de les retomber à tort sur l'un des deux bouts de l'échelle. */
.chip-corail { background: #fdece4; color: #b8461e; }
.chip-or { background: #fdf3d9; color: #8a6100; }

.chip .dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: currentColor;
}

/* ---------- Multi-insertion dynamique (« + ») ---------- */
.multi-insertion-chips {
  display: flex;
  flex-wrap: wrap;
  gap: .4rem;
  margin-bottom: .4rem;
}
.multi-insertion-chips:empty { margin-bottom: 0; }
.multi-insertion-chip {
  background: var(--surface-2);
  color: var(--ink-soft);
}
.multi-insertion-retirer {
  border: none;
  background: none;
  padding: 0;
  margin-left: .15rem;
  line-height: 1;
  font-size: 1rem;
  color: inherit;
  cursor: pointer;
}
.multi-insertion-retirer:hover { color: var(--danger); }

/* ---------- Complétude & champs obligatoires (formulaires de déclaration) ---------- */
.requis { color: var(--danger); margin-left: 2px; }

.barre-completude-formulaire {
  height: 8px;
  border-radius: 999px;
  background: var(--surface-2);
  overflow: hidden;
}
.barre-completude-formulaire span {
  display: block;
  height: 100%;
  background: var(--ci-orange);
  border-radius: 999px;
  transition: width .2s ease;
  width: 0%;
}

.badge-completude-section {
  font-size: .74rem;
  font-weight: 600;
  color: var(--ink-faint);
  font-family: ui-monospace, monospace;
  margin-left: auto;
  margin-right: .75rem;
}


/* ---------- Tableau de bord — onglets ---------- */
.nav-tabs-dashboard {
  border-bottom: 1px solid var(--line);
  gap: .25rem;
  flex-wrap: wrap;
}
.nav-tabs-dashboard .nav-link {
  border: none;
  border-bottom: 2px solid transparent;
  color: var(--ink-soft);
  font-size: .86rem;
  font-weight: 500;
  padding: .6rem .9rem;
  border-radius: 0;
}
.nav-tabs-dashboard .nav-link:hover { color: var(--ink); }
.nav-tabs-dashboard .nav-link.active {
  color: var(--ci-orange-600);
  border-bottom-color: var(--ci-orange);
  background: none;
}

.liste-alertes { list-style: none; margin: 0; padding: 0; }
.liste-alertes li {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .75rem;
  padding: .6rem 0;
  border-top: 1px solid var(--line);
  font-size: .88rem;
}
.liste-alertes li:first-child { border-top: none; }
.liste-alertes .compte {
  font-family: ui-monospace, monospace;
  font-weight: 700;
  min-width: 2.5rem;
  text-align: right;
}

.statut-collecte {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  padding: .25rem .65rem;
  border-radius: var(--radius-pill);
  font-size: .76rem;
  font-weight: 600;
}
.statut-non_demarree { background: var(--surface-2); color: var(--ink-faint); }
.statut-en_cours { background: var(--accent-tint); color: var(--ci-orange-700); }
.statut-soumise { background: #e8f1fb; color: #184f95; }
.statut-validee { background: var(--success-tint); color: var(--success-strong); }

/* Workflow d'un actif de données (brouillon → soumis → contrôlé → validé →
   publié) — mêmes noms de statut que ci-dessus quand le sens coïncide
   (soumis/validé), complétés pour les trois états propres à ce workflow. */
.statut-brouillon,
.statut-rejete_point_focal,
.statut-correction_admin,
.statut-rejete_admin,
.statut-archive { background: var(--surface-2); color: var(--ink-faint); }
.statut-soumis,
.statut-soumis_interne,
.statut-revue_point_focal,
.statut-valide_point_focal,
.statut-transmis_admin { background: #e8f1fb; color: #184f95; }
.statut-controle,
.statut-examen_admin { background: #efe9fb; color: #5b3fa0; }
.statut-valide { background: var(--success-tint); color: var(--success-strong); }
.statut-publie { background: var(--ci-green); color: #fff; }

.barre-completude {
  height: 6px;
  border-radius: 999px;
  background: var(--surface-2);
  overflow: hidden;
  width: 72px;
}
.barre-completude span {
  display: block;
  height: 100%;
  background: var(--ci-green-600, #0f7705);
  border-radius: 999px;
}


/* ---------- Éléments d'appui ---------- */
.eyebrow {
  font-size: .74rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--ci-orange-600);
  font-weight: 500;
}

.hero-icon-tile {
  width: 44px;
  height: 44px;
  border-radius: var(--radius-sm);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 600;
  font-size: 1.1rem;
  flex: none;
}

.tile-orange { background: var(--accent-tint); color: var(--ci-orange-700); }
.tile-green { background: var(--success-tint); color: var(--ci-green-600); }
.tile-ink { background: var(--surface-2); color: var(--ink-soft); }
.tile-blue { background: #e8f1fb; color: #184f95; }
.tile-aqua { background: #e3f7ef; color: #0b6b4e; }

.form-control {
  border-radius: var(--radius-sm);
  border-color: var(--line);
  padding: .6rem .85rem;
}

.form-control:focus {
  border-color: var(--ci-orange);
  box-shadow: 0 0 0 .2rem var(--accent-tint);
}

/* ---------- Select avec recherche — voir select-recherche.js ----------
   Le <select> natif reste dans le DOM (masqué, toujours soumis) ; le champ
   texte visible et la liste filtrée ci-dessous sont une simple couche
   d'affichage par-dessus — nécessaire dès qu'une liste dépasse la trentaine
   d'options (ex. les entités de l'État), observation plateforme du
   2026-09-07. */
.select-recherche { position: relative; }
.select-recherche-natif {
  position: absolute;
  inset: 0;
  opacity: 0;
  pointer-events: none;
}
.select-recherche-champ {
  border-radius: var(--radius-sm);
  border: 1px solid var(--line);
  padding: .6rem .85rem;
  width: 100%;
  background: #fff;
}
.select-recherche-champ:focus {
  outline: none;
  border-color: var(--ci-orange);
  box-shadow: 0 0 0 .2rem var(--accent-tint);
}
.select-recherche-liste {
  position: absolute;
  z-index: 20;
  top: calc(100% + .3rem);
  left: 0;
  right: 0;
  max-height: 260px;
  overflow-y: auto;
  background: var(--surface);
  border-radius: var(--radius-sm);
  box-shadow: var(--elev-2);
  padding: .35rem;
}
.select-recherche-item {
  display: block;
  width: 100%;
  text-align: left;
  border: none;
  background: none;
  padding: .5rem .7rem;
  border-radius: var(--radius-sm);
  font-size: .88rem;
  color: var(--ink-soft);
}
.select-recherche-item:hover,
.select-recherche-item.active {
  background: var(--accent-tint);
  color: var(--ci-orange-600);
}
.select-recherche-vide {
  padding: .5rem .7rem;
  font-size: .85rem;
  color: var(--ink-faint);
}

a { color: var(--bs-link-color); }
a:hover { color: var(--bs-link-hover-color); }

/* ---------- Tableau de bord — barres de répartition & KPI ----------
   Aplat de couleur pleine (fond = teinte sémantique du KPI, classes
   .kpi-vert / .kpi-rouge ci-dessous) plutôt qu'un simple filet supérieur sur
   carte blanche — cohérent avec les cartes .card-fill-* de la page
   d'accueil. */
.kpi-tile {
  padding: 1.1rem 1.2rem;
  border: none;
  color: #fff;
}
.kpi-tile .n {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 1.7rem;
  font-weight: 700;
  color: #fff;
  line-height: 1.1;
}
.kpi-tile .l { font-size: .78rem; color: rgba(255, 255, 255, .86); margin-top: .3rem; font-weight: 500; }

/* Tuiles de statistiques secondaires — icône + accent coloré (--accent,
   fourni en inline style par tuile) pour se démarquer sans reprendre le
   traitement « bloc plein » des KPI phares (.kpi-tile), plus adapté aux
   quelques chiffres d'en-tête qu'à des grilles de 4 à 6 tuiles. */
.stat-tile { border-left: 3px solid var(--accent, var(--line)); }
.stat-tile .card-body { display: flex; align-items: flex-start; gap: .65rem; }
.stat-tile-icone {
  flex: none;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--accent, var(--ink-soft));
  background: color-mix(in srgb, var(--accent, var(--ink-soft)) 14%, transparent);
}
.stat-tile-icone svg { width: 16px; height: 16px; }

.btn-icone { display: inline-flex; align-items: center; justify-content: center; gap: .4rem; }
.btn-icone svg { width: 14px; height: 14px; flex: none; }

.barre-repartition { display: flex; align-items: center; gap: .6rem; margin-bottom: .55rem; }
.barre-repartition .libelle { width: 120px; font-size: .8rem; color: var(--ink-soft); flex: none; }
.barre-repartition .piste { flex: 1; height: 8px; background: var(--surface-2); border-radius: var(--radius-pill); overflow: hidden; }
.barre-repartition .remplissage { height: 100%; background: var(--ci-orange); border-radius: var(--radius-pill); }
.barre-repartition .valeur { width: 28px; text-align: right; font-family: ui-monospace, monospace; font-size: .78rem; color: var(--ink-soft); flex: none; }

.panneau-metrique { display: flex; justify-content: space-between; padding: .45rem 0; border-top: 1px solid var(--line); font-size: .88rem; }
.panneau-metrique:first-child { border-top: none; }
.panneau-metrique .valeur { font-family: ui-monospace, monospace; font-weight: 600; color: var(--ink); }

#carte-infrastructures { height: 420px; border-radius: var(--radius-md); overflow: hidden; }

.zone-graphique { position: relative; height: 200px; }
.zone-graphique.haute { height: 240px; }
.zone-graphique-reseau { position: relative; height: 440px; }
.zone-graphique-reseau svg { width: 100%; height: 100%; }

.legende-releve { list-style: none; margin: .9rem 0 0; padding: 0; }
.legende-releve li { display: flex; align-items: center; gap: .5rem; padding: .3rem 0; font-size: .82rem; color: var(--ink-soft); }
.legende-releve .puce { width: 9px; height: 9px; border-radius: 50%; flex: none; }
.legende-releve .compte { margin-left: auto; font-family: ui-monospace, monospace; font-weight: 600; color: var(--ink); }

.callout {
  border-left: 3px solid var(--ci-orange);
  background: var(--accent-tint);
  padding: .9rem 1.1rem;
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
}
.callout .tag {
  font-family: ui-monospace, monospace;
  font-size: .7rem;
  text-transform: uppercase;
  letter-spacing: .07em;
  color: var(--ci-orange-600);
  font-weight: 700;
  display: block;
  margin-bottom: .35rem;
}
.callout p { color: var(--ink); }

/* ---------- Footer ---------- */
.footer-cadastre {
  background: var(--ink);
  color: #cfe6de;
  border-top: 3px solid var(--ci-orange);
  margin-top: 3rem;
}
.footer-cadastre a { color: #cfe6de; text-decoration: none; }
.footer-cadastre a:hover { color: var(--ci-orange); text-decoration: underline; }
.footer-cadastre .footer-brand {
  font-family: Georgia, "Iowan Old Style", serif;
  color: #fff;
  font-size: 1.05rem;
  display: flex;
  align-items: center;
  gap: .6rem;
}
.footer-cadastre .footer-brand .brand-logo {
  /* logo-mtnit-blanc.webp porte son propre texte en blanc — lisible
     directement sur le fond sombre du footer, sans encart clair derrière
     (à la différence de la variante à texte sombre utilisée en nav). */
  height: 64px;
  padding: .3rem .5rem;
}
.footer-cadastre .footer-brand small {
  display: block;
  font-family: ui-monospace, monospace;
  font-size: .62rem;
  letter-spacing: .07em;
  text-transform: uppercase;
  color: #9fc5b9;
  font-weight: 400;
}
.footer-cadastre h6 {
  color: #fff;
  font-size: .74rem;
  text-transform: uppercase;
  letter-spacing: .06em;
  font-weight: 700;
  margin-bottom: .8rem;
}
.footer-cadastre .footer-liens { list-style: none; margin: 0; padding: 0; }
.footer-cadastre .footer-liens li { margin-bottom: .5rem; font-size: .86rem; }
.footer-cadastre .footer-bas {
  border-top: 1px solid rgba(255, 255, 255, .12);
  margin-top: 1.6rem;
  padding-top: 1.1rem;
  font-size: .78rem;
  color: #8ba69e;
}
.footer-cadastre .footer-site-officiel {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  background: rgba(255, 130, 0, .14);
  border: 1px solid rgba(255, 130, 0, .35);
  color: #ffb066;
  padding: .4rem .85rem;
  border-radius: var(--radius-pill);
  font-size: .82rem;
  font-weight: 500;
}
.footer-cadastre .footer-site-officiel:hover { background: var(--ci-orange); color: #fff; border-color: var(--ci-orange); }

/* ---------- Tableaux de listes — discipline de largeur ----------
   Sans ça, une cellule longue (nom d'entité, identifiant) force un retour
   à la ligne qui désaligne l'en-tête du corps du tableau : c'est ce qui
   donnait l'impression de colonnes « superposées ». Règle, volontairement
   simple plutôt qu'un table-layout:fixed fragile à ajuster au pixel près :
   chaque cellule reste sur une seule ligne (mise en page automatique, la
   colonne prend la largeur de son contenu) ; seules les 1-2 colonnes à
   contenu potentiellement long (nom, entité) sont explicitement tronquées
   avec ellipse — la valeur complète reste accessible via l'attribut title.
   Si malgré tout le tableau dépasse la largeur disponible, .table-responsive
   fait défiler horizontalement plutôt que de comprimer les colonnes. */
.table-liste th,
.table-liste td {
  white-space: nowrap;
  vertical-align: middle;
}
.table-liste td.col-principale,
.table-liste td.col-entite {
  max-width: 260px;
  overflow: hidden;
  text-overflow: ellipsis;
}
.table-liste code.code-tronque {
  display: block;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: .72rem;
}
.table-liste td.col-actions .btn { margin-right: .3rem; }
.table-liste td.col-actions .btn:last-child { margin-right: 0; }

/* ---------- Bandeau de consentement aux cookies ---------- */
.bandeau-cookies {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 1080;
  background: var(--ink);
  color: #dfeee8;
  border-top: 3px solid var(--ci-orange);
  box-shadow: 0 -6px 24px rgba(0, 0, 0, .18);
}
.bandeau-cookies a { color: #ffb066; }

/* =========================================================================
   Phase 3 — ergonomie (observations du 2026-10-01, UX-01 à UX-15)
   ========================================================================= */

:root {
  /* Filet de délimitation plus marqué que --line : les sections se
     distinguaient mal du fond (« tout est gris »). */
  --line-strong: #c9d1cc;
  --etat-ok: #0f7705;
  --etat-attention: #b07400;
  --etat-alerte: #b3261e;
}

/* UX-01 — chaque section (carte, bloc d'accordéon) est délimitée par un
   filet visible, en plus de l'ombre, sur toutes les pages. */
.card,
.accordion-item {
  border: 1px solid var(--line-strong) !important;
}
.card > .card-body > h2:first-child,
.card > .card-body > .d-flex:first-child > h2 {
  color: var(--ink);
  font-weight: 600;
}
.accordion-button {
  font-weight: 600;
  color: var(--ink);
}

/* UX-02 — champs et actions plus contrastés : bordure foncée, libellés
   lisibles, fond blanc franc, focus net. */
.form-control,
.form-select,
.select-recherche-champ {
  border: 1px solid #aab4ae;
  background-color: #fff;
  color: var(--ink);
}
.form-label { color: var(--ink); }
.form-text { color: var(--ink-soft); }
.form-select:focus {
  border-color: var(--ci-orange);
  box-shadow: 0 0 0 .2rem var(--accent-tint);
}
.btn-outline-secondary {
  --bs-btn-color: var(--ink);
  --bs-btn-border-color: #8e9993;
  --bs-btn-hover-bg: var(--surface-2);
  --bs-btn-hover-color: var(--ink);
  --bs-btn-hover-border-color: var(--ink-soft);
}
.btn-outline-primary {
  --bs-btn-color: var(--ci-orange-700);
  --bs-btn-border-color: var(--ci-orange);
  --bs-btn-hover-bg: var(--ci-orange);
  --bs-btn-hover-border-color: var(--ci-orange);
  --bs-btn-hover-color: #fff;
}
.icone-inline { display: inline-flex; width: 1em; height: 1em; vertical-align: -0.14em; }
.icone-inline svg { width: 100%; height: 100%; }
.navbar-cadastre .nav-link .icone-inline { margin-right: .35rem; opacity: .8; }

/* UX-10 / UX-13 — un seul composant « indicateur » sur tous les onglets :
   carte blanche, libellé, chiffre foncé, objectif éventuel, lien de détail.
   La couleur ne sert plus qu'à l'état par rapport à un seuil (classes
   etat-ok / etat-attention / etat-alerte) ; les accents décoratifs posés
   tuile par tuile sont neutralisés. */
.stat-tile { --accent: var(--line-strong) !important; }
.stat-tile.etat-ok { --accent: var(--etat-ok) !important; }
.stat-tile.etat-attention { --accent: var(--etat-attention) !important; }
.stat-tile.etat-alerte { --accent: var(--etat-alerte) !important; }
.stat-tile .stat-tile-icone { color: var(--ink-soft); background: var(--surface-2); }
.stat-tile.etat-ok .stat-tile-icone,
.stat-tile.etat-attention .stat-tile-icone,
.stat-tile.etat-alerte .stat-tile-icone {
  color: var(--accent);
  background: color-mix(in srgb, var(--accent) 12%, transparent);
}
.stat-tile .h4,
.stat-tile .h5 { color: var(--ink); font-weight: 600; }
.stat-tile .text-body-secondary.small.mb-1 { color: var(--ink-soft) !important; font-weight: 500; }
.indicateur-objectif { font-size: .76rem; color: var(--ink-soft); margin-top: .2rem; }
.stat-tile.etat-ok .indicateur-etat { color: var(--etat-ok); }
.stat-tile.etat-attention .indicateur-etat { color: var(--etat-attention); }
.stat-tile.etat-alerte .indicateur-etat { color: var(--etat-alerte); }
.indicateur-etat { font-size: .76rem; font-weight: 600; }
.indicateur-lien { font-size: .76rem; display: inline-block; margin-top: .25rem; }
.info-bulle {
  display: inline-flex; align-items: center; justify-content: center;
  width: 1.05rem; height: 1.05rem; border-radius: 50%;
  border: 1px solid var(--ink-faint); color: var(--ink-soft);
  font-size: .68rem; font-weight: 700; cursor: help; margin-left: .25rem;
}

/* UX-09 — onglets du tableau de bord sur une seule ligne, défilement
   horizontal sur petit écran plutôt qu'un passage à la ligne. */
.nav-tabs-dashboard {
  flex-wrap: nowrap;
  overflow-x: auto;
  scrollbar-width: thin;
}
.nav-tabs-dashboard .nav-link { white-space: nowrap; }

/* UX-15 — répartitions de moins de 5 catégories : liste chiffrée avec
   barre, plutôt qu'un graphique en anneau. */
.repartition-liste { list-style: none; margin: 0; padding: 0; }
.repartition-liste li { display: grid; grid-template-columns: minmax(110px, 40%) 1fr auto; align-items: center; gap: .6rem; padding: .35rem 0; font-size: .85rem; }
.repartition-liste .piste { display: block; height: 10px; background: var(--surface-2); border-radius: var(--radius-pill); overflow: hidden; }
.repartition-liste .remplissage { display: block; height: 100%; border-radius: var(--radius-pill); }
.repartition-liste .compte { font-weight: 600; color: var(--ink); min-width: 4.5rem; text-align: right; }

/* UX-06 / UX-07 — identité de l'utilisateur et menu de compte. */
.nav-compte-bouton {
  display: flex; align-items: center; gap: .55rem;
  border: 1px solid var(--line-strong); border-radius: var(--radius-pill);
  padding: .3rem .75rem .3rem .35rem; background: var(--surface);
  color: var(--ink); text-align: left; font-size: .82rem; line-height: 1.2;
}
.nav-compte-bouton:hover { background: var(--surface-2); }
.nav-compte-initiales {
  width: 30px; height: 30px; border-radius: 50%;
  background: var(--accent-tint); color: var(--ci-orange-700);
  display: flex; align-items: center; justify-content: center;
  font-weight: 700; font-size: .78rem; flex: none;
}
.nav-compte-bouton small { display: block; color: var(--ink-soft); font-size: .7rem; max-width: 22ch; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fil-ariane { font-size: .82rem; margin-bottom: .75rem; }
.fil-ariane .breadcrumb { margin: 0; --bs-breadcrumb-divider: "›"; }
.fil-ariane a { color: var(--ink-soft); }

/* UX-08 — l'icône du menu devient une croix quand le menu est ouvert. */
.navbar-cadastre .navbar-toggler[aria-expanded="true"] .navbar-toggler-icon {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba(27,32,29,0.85)' stroke-linecap='round' stroke-width='2.4' d='M8 8l14 14M22 8L8 22'/%3e%3c/svg%3e");
}

/* UX-03 — cartes de présentation lisibles : texte foncé sur fond clair. */
.carte-presentation { background: var(--surface); color: var(--ink); }
.carte-presentation h3 { color: var(--ink); font-weight: 600; }
.carte-presentation p { color: var(--ink-soft); }
.carte-presentation .hero-icon-tile { font-size: 1rem; }
.bandeau-connexion { background: var(--accent-tint); color: var(--ink); border-color: #f3c58c !important; }

/* Bouton « + » des listes (actifs, applications, infrastructures) : ouvre
   directement le formulaire de création, sans détour par Mon espace. */
.btn-ajout-rapide {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.5rem;
  height: 2.5rem;
  padding: 0;
  border-radius: 50%;
}
.btn-ajout-rapide svg { width: 20px; height: 20px; }

/* Dictionnaire des champs ouvert depuis un formulaire : bouton de retour
   toujours visible pendant le défilement. */
.retour-formulaire {
  position: sticky;
  top: .75rem;
  z-index: 10;
  margin-bottom: 1rem;
}

/* Champ piège anti-robot (apps.web.antirobot) : hors écran plutôt que
   display:none, que certains robots savent ignorer. */
.champ-piege {
  position: absolute;
  left: -10000px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* Anciens attributs style="…" des gabarits — scan ZAP du 2026-10-20 : la
   Content-Security-Policy n'autorise plus 'unsafe-inline' pour les styles.
   !important conserve la priorité qu'avait l'attribut style sur les règles
   de Bootstrap (accordéons, alertes…). */
.hero-erreur { padding: 4rem 2rem !important; }
.arrondi-sm { border-radius: var(--radius-sm) !important; }
.arrondi-md { border-radius: var(--radius-md) !important; }
.mw-32ch { max-width: 32ch !important; }
.mw-46ch { max-width: 46ch !important; }
.mw-60ch { max-width: 60ch !important; }
.mw-360 { max-width: 360px !important; }
.mw-460 { max-width: 460px !important; }
.mw-720 { max-width: 720px !important; }
.min-w-220 { min-width: 220px !important; }
.min-w-320 { min-width: 320px !important; }
.w-220 { width: 220px !important; }
.w-16pct { width: 16% !important; }
.w-22pct { width: 22% !important; }
.w-27pct { width: 27% !important; }
.w-30pct { width: 30% !important; }
.texte-entete-tableau { font-size: .72rem !important; }
.texte-pied { color: #9fb5ae !important; }
.texte-pre-line { white-space: pre-line !important; }
.cellule-detail { white-space: normal !important; max-width: 320px !important; }
.chip-neutre { background: var(--surface-2) !important; color: var(--ink-soft) !important; }
.chip-neutre-pale { background: var(--surface-2) !important; color: var(--ink-faint) !important; }
.chip-compact { padding: .15rem .5rem !important; }
.chip-compact-xs { padding: .1rem .5rem !important; }
.panneau-gris {
  background: var(--surface-2) !important;
  border-radius: var(--radius-sm) !important;
  min-width: 280px !important;
}
.qr-code { max-width: 220px !important; border-radius: var(--radius-md) !important; }
.accordeon-carte {
  border: none !important;
  margin-bottom: 10px !important;
  border-radius: var(--radius-md) !important;
  overflow: hidden !important;
  box-shadow: var(--elev-1) !important;
}
.carte-localisation {
  height: 280px !important;
  border-radius: var(--radius-md) !important;
  overflow: hidden !important;
}
.kpi-vert { background: linear-gradient(155deg, #2f8f5b, #1f6b42) !important; }
.kpi-rouge { background: linear-gradient(155deg, #d03b3b, #a92c2c) !important; }
.ligne-signalee { background: var(--accent-tint) !important; }