/* Atlas des réformes au Bénin — feuille de style (passe Calcite, 11/10/2026).
 * Calcite Design System (5.1.1, livré avec le SDK ArcGIS 5.1), thème clair surchargé par une charte
 * inspirée des sites du Gouvernement du Bénin : bleu nuit, ocre, vert sarcelle, Montserrat.
 * Aucun élément d'identité officielle (voir DA_CALCITE.md).
 * Les couleurs des cartes sont lues ici par app.js (getComputedStyle) : modifier une variable
 * --s-*, --bleu-*, --pole-*, --etat-* change la carte et sa légende. */

:root {
  /* Charte */
  --marque: #023e79;
  --marque-survol: #153864;
  --marque-presse: #162233;
  --encre: #162233;
  --encre-2: #4a5568;
  --fond: #f5f6f8;
  --blanc: #ffffff;
  --trait: #dfe3ea;
  --fond-barre: #eceff4;
  --ocre: #dc9122;
  --sarcelle: #0e6258;
  --rouge: #bb3720;
  --police: "Montserrat", "Avenir Next", "Segoe UI", system-ui, sans-serif;

  /* Mise en page */
  --largeur-panneau: 420px;
  --hauteur-panneau-mobile: 52vh;

  /* Cartes : bleus séquentiels ancrés sur la marque (indicateurs, comptages) */
  --bleu-1: #e6eef7;
  --bleu-2: #b3cae4;
  --bleu-3: #6f9ccc;
  --bleu-4: #2f6aa8;
  --bleu-5: #023e79;
  --carte-sans-donnee: #cfd3d9;
  --carte-aucun: #f1f2f5;
  --carte-fond-uemoa: #f5f6f8;
  --afrique-fill: #dcdfe4;
  --afrique-trait: #ffffff;
  --contour-benin: #dc9122;
  --contour-limite: #ffffff;
  --cluster: #818f3c;   /* vert olive de beninrevele.bj ; orange sobre possible : #c8632d */
  --cluster-texte: #ffffff;

  /* États des projets */
  --etat-en_cours: #2f6aa8;
  --etat-finalise: #0e6258;
  --etat-etudes: #dc9122;
  --etat-arrete: #bb3720;
  --etat-nr: #9aa3ad;

  /* Secteurs (palette de beninrevele.bj) */
  --s-electricite: #dd9328;
  --s-eau: #4bc4d4;
  --s-decentralisation: #635177;
  --s-sante: #f04e2b;
  --s-sport: #818f3c;
  --s-cadre_de_vie: #0e6258;
  --s-infrastructures: #483b39;
  --s-agriculture: #a38d40;
  --s-education: #023e79;
  --s-tourisme: #c8632d;
  --s-culture: #9f6d5f;
  --s-securite: #bb3720;
  --s-arts: #7a8794;
  --s-hydrocarbures: #b3a394;
  --s-numerique: #3a5fcd;

  /* Pôles de développement agricole : teintes de la charte éclaircies de 30 % */
  --pole-1: #4e78a1;
  --pole-2: #e7b368;
  --pole-3: #56918a;
  --pole-4: #cf7363;
  --pole-5: #9285a0;
  --pole-6: #81d6e1;
  --pole-7: #a7b176;
}

/* Surcharge des jetons Calcite (mode clair) */
html.calcite-mode-light {
  --calcite-color-brand: #023e79;
  --calcite-color-brand-hover: #153864;
  --calcite-color-brand-press: #162233;
  --calcite-color-text-1: #162233;
  --calcite-color-text-2: #4a5568;
  --calcite-color-text-3: #4a5568;
  --calcite-color-text-link: #023e79;
  --calcite-color-foreground-1: #ffffff;
  --calcite-color-foreground-2: #f5f6f8;
  --calcite-color-foreground-3: #eceff4;
  --calcite-color-background: #f5f6f8;
  --calcite-color-border-1: #dfe3ea;
  --calcite-color-border-2: #dfe3ea;
  --calcite-color-border-3: #e8ebf0;
  --calcite-color-status-success: #0e6258;
  --calcite-color-status-danger: #bb3720;
  --calcite-color-status-warning: #dc9122;
  --calcite-color-status-info: #023e79;
  --calcite-font-family: "Montserrat", "Avenir Next", "Segoe UI", system-ui, sans-serif;
  --calcite-sans-family: "Montserrat", "Avenir Next", "Segoe UI", system-ui, sans-serif;
  --calcite-corner-radius: 2px;
  --calcite-corner-radius-sm: 2px;
  --calcite-corner-radius-xs: 2px;
}

*, *::before, *::after { box-sizing: border-box; }
html, body { height: 100%; margin: 0; }
body { background: var(--fond); color: var(--encre); font-family: var(--police); -webkit-font-smoothing: antialiased; overflow: hidden; }
:focus-visible { outline: 2px solid var(--marque); outline-offset: 2px; }
[hidden] { display: none !important; }
a { color: var(--marque); }

.lien-evitement { position: absolute; left: 8px; top: -60px; z-index: 100; padding: 8px 12px; background: var(--marque); color: #fff; }
.lien-evitement:focus { top: 8px; }

/* ---------- Coque Calcite ---------- */
calcite-shell { height: 100%; }
calcite-navigation { --calcite-navigation-background-color: #023e79; --calcite-navigation-border-color: #023e79;
  --calcite-navigation-logo-heading-text-color: #ffffff; --calcite-navigation-logo-text-color: #d7e3f1; --calcite-navigation-accent-color: #dc9122; }
calcite-navigation calcite-button[slot="content-end"] { margin-inline-end: 12px; --calcite-button-text-color: #ffffff; --calcite-button-border-color: #ffffff; --calcite-button-background-color: transparent; }
calcite-shell-panel { --calcite-shell-panel-width: var(--largeur-panneau); --calcite-shell-panel-max-width: 560px; --calcite-shell-panel-background-color: #ffffff; }
calcite-panel { --calcite-panel-space: 0px; --calcite-panel-footer-space: 0px; }
arcgis-map { width: 100%; height: 100%; }
/* Choix du fond : plan, imagerie récente, avant / après (balayage) */
.fonds { display: flex; flex-direction: column; align-items: flex-end; gap: 4px; }
.fonds calcite-segmented-control { background: #fff; box-shadow: 0 1px 3px rgba(0, 0, 0, .25); }
.fonds-legende { margin: 0; padding: 3px 8px; background: rgba(255, 255, 255, .92); font: 500 11px var(--police); color: var(--encre); border-radius: 2px; box-shadow: 0 1px 3px rgba(0, 0, 0, .2); }
.carte-etat { position: absolute; left: 50%; bottom: 20px; transform: translateX(-50%); z-index: 3; margin: 0; padding: 6px 12px; background: var(--marque-presse); color: #fff; font: 500 12px var(--police); border-radius: 2px; }

/* ---------- Texte des chapitres ---------- */
.contenu { padding: 20px 20px 24px; font-size: 14px; line-height: 1.55; color: var(--encre); }
.surtitre { margin: 0 0 6px; font: 600 11.5px var(--police); letter-spacing: .08em; text-transform: uppercase; color: var(--sarcelle); }
.titre-livre { margin: 0 0 10px; font: 700 clamp(22px, 2.4vw, 28px)/1.2 var(--police); color: var(--marque); }
.titre-dates { font-weight: 500; white-space: nowrap; }
.titre-chapitre { margin: 0 0 10px; font: 700 24px/1.2 var(--police); color: var(--marque); }
.titre-livre:focus, .titre-chapitre:focus { outline: none; }
.sous-titre { margin: 22px 0 8px; font: 700 15px/1.3 var(--police); color: var(--encre); }
.auteurs { margin: 0 0 14px; font: 500 14px/1.4 var(--police); color: var(--encre-2); }
.intro { margin: 0 0 16px; }
.note { margin: 12px 0 0; font-size: 12.5px; color: var(--encre-2); }
.definition { margin: 10px 0 0; font-size: 12.5px; color: var(--encre-2); }
.mention { margin: 0 0 16px; }

/* Chiffres clés : sobres, sans carte ni ombre */
.chiffres { list-style: none; margin: 0 0 18px; padding: 12px 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; border-block: 1px solid var(--trait); }
.chiffre-valeur { display: block; font: 700 26px/1.1 var(--police); font-variant-numeric: tabular-nums; color: var(--marque); }
.chiffre-nom { display: block; margin-top: 2px; font-size: 12px; color: var(--encre-2); }

.actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 18px; }

/* ---------- Champs ---------- */
.champ { position: relative; margin: 0 0 14px; }
.champ-nom { display: block; margin-bottom: 6px; font: 600 12px var(--police); color: var(--encre-2); }
.champs-deux { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-bottom: 8px; }
calcite-label.champ { display: block; }
calcite-block.filtres { margin: 0 0 14px; border: 1px solid var(--trait); }
/* Filtre par secteur : grille régulière de deux colonnes */
.puces { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; }
.secteur {
  display: grid; grid-template-columns: 22px minmax(0, 1fr) auto; align-items: center; gap: 8px;
  min-height: 36px; padding: 6px 10px; text-align: left; cursor: pointer;
  font: 500 13px/1.25 var(--calcite-font-family, Montserrat, sans-serif); color: var(--calcite-color-text-1, #162233);
  background: var(--calcite-color-foreground-1, #fff); border: 1px solid var(--calcite-color-border-2, #dfe3ea); border-radius: 2px;
  transition: background var(--duree, 150ms), border-color var(--duree, 150ms);
}
.secteur:hover { border-color: var(--calcite-color-brand, #023e79); }
.secteur:focus-visible { outline: 2px solid var(--calcite-color-brand, #023e79); outline-offset: 1px; }
.secteur[aria-pressed="true"] { background: #e6eef7; border-color: var(--calcite-color-brand, #023e79); box-shadow: inset 3px 0 0 var(--calcite-color-brand, #023e79); }
.secteur-tous { grid-column: 1 / -1; grid-template-columns: minmax(0, 1fr) auto; }
.secteur-icone { width: 22px; height: 22px; display: block; }
.secteur-nom { min-width: 0; overflow-wrap: anywhere; }
.secteur-n { font-variant-numeric: tabular-nums; font-size: 12px; color: var(--calcite-color-text-3, #6b7480); }
@media (max-width: 360px) { .puces { grid-template-columns: minmax(0, 1fr); } }
@media (prefers-reduced-motion: reduce) { .secteur { transition: none; } }
.puce-icone { display: block; width: 18px; height: 18px; flex: none; }
.pastille { display: inline-block; width: 10px; height: 10px; border-radius: 50%; flex: none; border: 1px solid #ffffff; box-shadow: 0 0 0 1px var(--trait); }

/* ---------- Synthèse, barres, fiche ---------- */
.synthese { margin: 14px 0 0; padding: 12px 0 0; border-top: 1px solid var(--trait); }
.synthese-nombre { font: 700 30px/1.1 var(--police); font-variant-numeric: tabular-nums; color: var(--marque); }
.synthese-texte { margin: 2px 0 0; font-size: 13px; }
.synthese-cout { margin: 8px 0 0; padding-top: 8px; border-top: 1px solid var(--trait); font-size: 13px; }
.synthese-cout strong { font: 700 15px var(--police); font-variant-numeric: tabular-nums; }

.barres { margin: 0; }
.barre-ligne { display: grid; grid-template-columns: minmax(90px, 36%) 1fr auto; align-items: center; gap: 8px; padding: 3px 0; font-size: 13px; }
.barre-nom { display: flex; align-items: center; gap: 6px; line-height: 1.2; }
.barre-svg { display: block; width: 100%; height: 14px; }
.barre-fond { fill: var(--fond-barre); }
.barre-rect { fill: var(--bleu-4); }
.barre-rect.est-benin { fill: var(--contour-benin); }
.barre-ligne.est-benin .barre-nom { font-weight: 700; }
.barre-val { font: 600 12.5px var(--sans); font-variant-numeric: tabular-nums; text-align: right; min-width: 3.5em; }
.barre-ligne.sans-donnee .barre-val { color: var(--encre-2); }
.barre-rect[class*=" s-"] { fill: var(--bleu-4); }

.pastille.s-electricite { background: url("icones/electricite.svg?v=33da3f3d7b") center / contain no-repeat; width: 18px; height: 18px; border-radius: 0; }
.pastille.s-eau { background: url("icones/eau.svg?v=33da3f3d7b") center / contain no-repeat; width: 18px; height: 18px; border-radius: 0; }
.pastille.s-decentralisation { background: url("icones/decentralisation.svg?v=33da3f3d7b") center / contain no-repeat; width: 18px; height: 18px; border-radius: 0; }
.pastille.s-sante { background: url("icones/sante.svg?v=33da3f3d7b") center / contain no-repeat; width: 18px; height: 18px; border-radius: 0; }
.pastille.s-sport { background: url("icones/sport.svg?v=33da3f3d7b") center / contain no-repeat; width: 18px; height: 18px; border-radius: 0; }
.pastille.s-cadre_de_vie { background: url("icones/cadre_de_vie.svg?v=33da3f3d7b") center / contain no-repeat; width: 18px; height: 18px; border-radius: 0; }
.pastille.s-infrastructures { background: url("icones/infrastructures.svg?v=33da3f3d7b") center / contain no-repeat; width: 18px; height: 18px; border-radius: 0; }
.pastille.s-agriculture { background: url("icones/agriculture.svg?v=33da3f3d7b") center / contain no-repeat; width: 18px; height: 18px; border-radius: 0; }
.pastille.s-education { background: url("icones/education.svg?v=33da3f3d7b") center / contain no-repeat; width: 18px; height: 18px; border-radius: 0; }
.pastille.s-tourisme { background: url("icones/tourisme.svg?v=33da3f3d7b") center / contain no-repeat; width: 18px; height: 18px; border-radius: 0; }
.pastille.s-culture { background: url("icones/culture.svg?v=33da3f3d7b") center / contain no-repeat; width: 18px; height: 18px; border-radius: 0; }
.pastille.s-securite { background: url("icones/securite.svg?v=33da3f3d7b") center / contain no-repeat; width: 18px; height: 18px; border-radius: 0; }
.pastille.s-arts { background: url("icones/arts.svg?v=33da3f3d7b") center / contain no-repeat; width: 18px; height: 18px; border-radius: 0; }
.pastille.s-hydrocarbures { background: url("icones/hydrocarbures.svg?v=33da3f3d7b") center / contain no-repeat; width: 18px; height: 18px; border-radius: 0; }
.pastille.s-numerique { background: url("icones/numerique.svg?v=33da3f3d7b") center / contain no-repeat; width: 18px; height: 18px; border-radius: 0; }
/* Tracés linéaires : trait coloré selon l'état (légende du chapitre 3) */
.pastille[class*=" trait-"] { width: 22px; height: 0; border: 0; border-radius: 0; box-shadow: none; border-top: 4px solid var(--etat-nr); }
.pastille.trait-en_cours { border-top-color: var(--etat-en_cours); }
.pastille.trait-finalise { border-top-color: var(--etat-finalise); }
.pastille.trait-etudes { border-top-color: var(--etat-etudes); }
.pastille.trait-arrete { border-top-color: var(--etat-arrete); }
.pastille.trait-numerique { border-top: 3px dashed var(--s-numerique); }
.pastille.pole-1 { background: var(--pole-1); }
.pastille.pole-2 { background: var(--pole-2); }
.pastille.pole-3 { background: var(--pole-3); }
.pastille.pole-4 { background: var(--pole-4); }
.pastille.pole-5 { background: var(--pole-5); }
.pastille.pole-6 { background: var(--pole-6); }
.pastille.pole-7 { background: var(--pole-7); }
.pastille.bleu-0 { background: var(--carte-aucun); border-color: var(--trait); }
.pastille.bleu-1 { background: var(--bleu-1); border-color: var(--trait); }
.pastille.bleu-2 { background: var(--bleu-2); }
.pastille.bleu-3 { background: var(--bleu-3); }
.pastille.bleu-4 { background: var(--bleu-4); }
.pastille.bleu-5 { background: var(--bleu-5); }
.pastille.sans-donnee { background: var(--carte-sans-donnee); }
.pastille.contour-benin { background: transparent; border: 2px solid var(--contour-benin); }

.legende { margin: 12px 0 0; }
.legende-titre { margin: 0 0 4px; font: 600 12px var(--police); color: var(--encre-2); }
.legende-liste { list-style: none; margin: 0; padding: 0; }
.legende-ligne { display: flex; align-items: center; gap: 8px; padding: 1px 0; font-size: 12.5px; font-variant-numeric: tabular-nums; }
.legende-ligne .pastille { width: 16px; height: 12px; border-radius: 0; }

.bloc-benin { margin: 14px 0 0; padding: 10px 14px; border-left: 4px solid var(--ocre); background: var(--fond); }
.bloc-benin-titre { margin: 0 0 4px; font: 700 14px var(--police); }
.bloc-benin-valeurs { margin: 0; font: 700 18px/1.3 var(--police); font-variant-numeric: tabular-nums; }
.bloc-benin-ecart { margin: 2px 0 0; font-size: 13px; }
.ecart-hausse { color: var(--sarcelle); font-weight: 600; }
.ecart-baisse { color: var(--rouge); font-weight: 600; }

.fiche { margin: 14px 0 0; }
.fiche-vide { margin: 0; padding: 12px 14px; border: 1px dashed var(--trait); font-size: 13px; color: var(--encre-2); }
.fiche-carte { padding: 12px 14px; border: 1px solid var(--trait); border-top: 3px solid var(--marque); background: var(--blanc); }
.fiche-titre { margin: 0 0 2px; font: 700 18px/1.2 var(--police); color: var(--marque); }
.fiche-sous { margin: 0 0 10px; font: 500 12px var(--police); color: var(--encre-2); }
.fiche-ligne { margin: 0 0 8px; font-size: 13.5px; }
.fiche-ligne strong { font-weight: 700; font-variant-numeric: tabular-nums; }

.liste-sources { margin: 0 0 6px; padding-left: 18px; }
.liste-sources li { margin: 0 0 6px; }

/* ---------- Pied de panneau ---------- */
.pied { padding: 10px 16px 12px; border-top: 1px solid var(--trait); background: var(--blanc); }
.pied-mention { margin: 0 0 8px; font-size: 11px; line-height: 1.4; color: var(--encre-2); }
.pied-nav { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.pied-aide { font-size: 11px; color: var(--encre-2); }

/* ---------- Fenêtres de la carte (contenu des popups) ---------- */
.popup-table { width: 100%; border-collapse: collapse; font-size: 13px; font-family: var(--police); font-variant-numeric: tabular-nums; }
.popup-table th { padding: 3px 8px 3px 0; text-align: left; font-weight: 600; vertical-align: top; white-space: nowrap; }
.popup-table td { padding: 3px 0; vertical-align: top; }

/* ---------- Mouvement réduit ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; animation: none !important; scroll-behavior: auto !important; }
}

/* ---------- Mobile : carte en haut, panneau en bas (layout et slot posés par app.js) ---------- */
@media (max-width: 899px) {
  calcite-shell-panel { --calcite-shell-panel-height: var(--hauteur-panneau-mobile); --calcite-shell-panel-max-height: 80vh; }
  .contenu { padding: 14px 16px 20px; }
  .champs-deux { grid-template-columns: 1fr; }
  calcite-navigation calcite-button[slot="content-end"] { display: none; }
}

/* Mode édition (auteur seulement, ?edition) */
.edition { display: grid; gap: 10px; margin: 12px 0; padding: 12px; border: 2px solid var(--etat-etudes); border-radius: 2px; background: #fffaf0; font: 13px var(--police); }
.edition h3 { margin: 0; font-size: 14px; }
.edition .ed-boutons { display: flex; flex-wrap: wrap; gap: 6px; }
.edition button { font: 600 12px var(--police); padding: 6px 10px; border: 1px solid #b8c2cf; background: #fff; border-radius: 2px; cursor: pointer; }
.edition button.ed-principal { background: var(--etat-en_cours); border-color: var(--etat-en_cours); color: #fff; }
.edition button:focus-visible { outline: 2px solid var(--etat-en_cours); outline-offset: 2px; }
.edition .ed-consigne { margin: 0; padding: 6px 8px; background: #fff3d6; border-left: 3px solid var(--etat-etudes); }
.edition form { display: grid; gap: 6px; }
.edition label { display: grid; gap: 2px; font-weight: 500; }
.edition input, .edition select, .edition textarea { font: 13px var(--police); padding: 5px 6px; border: 1px solid #b8c2cf; border-radius: 2px; background: #fff; }
.edition .ed-etat { margin: 0; color: #5b6670; }
.edition .ed-journal { margin: 0; padding: 0; list-style: none; display: grid; gap: 4px; max-height: 180px; overflow-y: auto; }
.edition .ed-journal li { display: flex; justify-content: space-between; gap: 8px; align-items: baseline; }
.edition .ed-journal button { padding: 2px 6px; font-weight: 500; }