/* Charte graphique WebSIG Education Cameroun (voir docs/charte_graphique.md) — refonte papier / encre / sarcelle du 08/10/2026
   Chargee par Lizmap pour tout le depot (allowUserDefinedThemes=on). */
/* Police Source Sans 3 : declaree (@font-face, fichiers du projet) dans lizmap-theme/theme.css, charge sur toutes les pages */

:root {
  /* Refonte du 08/10/2026 (meme famille que l'accueil, sans bleu) : l'ancien « marine » devient l'encre, la
     sarcelle est le seul accent. Les noms de variables sont gardes pour ne pas toucher chaque regle. */
  --marine: #183D35;
  --marine-90: #254F45;
  --encre: #183D35;
  --encre-doux: #4B6058;
  --papier: #EDEDE2;
  --carte: #F7F5EE;
  --sarcelle: #397568;
  --ligne: rgba(24, 61, 53, .14);
}

body, #dock, #switcher, .tab-content, #headermenu, #title, h1, h2, h3, h4, .btn, input, select, table {
  font-family: 'Source Sans 3', 'Segoe UI', Arial, sans-serif !important;
}
body { color: var(--encre); }

/* Bandeau */
#header, #title { background: var(--marine) !important; }
#title h1 { font-weight: 600; letter-spacing: .01em; }
#title h2 { color: rgba(255, 255, 255, .8) !important; }

/* Coin du drapeau : lizmap-theme/theme.css (theme global, commun a l'accueil et aux cartes) */

/* Lien « Guide » du bandeau */
#lien-apropos { color: #fff !important; font-weight: 600; letter-spacing: .03em; text-transform: uppercase; font-size: 12px; }
/* Fenetre « Guide et sources » : styles communs a l'accueil et aux cartes dans lizmap-theme/theme.css (media/js/default/guide.js) */

/* Menu lateral (icones) */
#mapmenu { background: var(--encre) !important; }
#mapmenu li a { color: rgba(255, 255, 255, .75) !important; }
#mapmenu li.active a, #mapmenu li a:hover { background: var(--marine) !important; color: #fff !important; }

/* Panneau (couches, filtre, localisation...) */
#dock, #mini-dock, #right-dock, #bottom-dock { background: var(--carte) !important; }
#dock h3, #mini-dock h3, #right-dock h3, #bottom-dock h3,
.dock-content h3, #switcher h3 { color: #fff !important; background: var(--marine); padding: 6px 10px; margin: 0 0 6px; font-size: 14px; font-weight: 600; }
#switcher, #switcher td, #switcher label { color: var(--encre); }
#switcher tr.liz-group > td { font-weight: 600; color: var(--marine); }
#switcher tr { border-bottom: 1px solid var(--ligne); }

/* Boutons et liens */
.btn-primary, .btn.btn-primary { background: var(--marine) !important; border-color: var(--marine) !important; color: #fff !important; text-shadow: none; }
.btn-primary:hover { background: var(--marine-90) !important; }
a { color: var(--sarcelle); }

/* Popups et tables */
.lizmapPopupTable th, .lizmapPopupTable thead th, table.dataTable thead th { background: var(--marine) !important; color: #fff !important; }
.lizmapPopupTitle, .lizmapPopupHeader { color: var(--marine) !important; }

/* Graphiques (panneau Statistiques) ; chaque graphique a sa propre description (cle description du .qgs.cfg) */
#dataviz-content .dataviz_plot_container h3,
#dataviz-content .dataviz_plot_container h3 * { color: #fff !important; opacity: 1 !important; }
.dataviz_plot_container .menu-content > p { font-size: 13px; color: var(--encre-doux); margin: 6px 4px; }

/* Fiche au clic d'un indicateur (infobulle QGIS, voir fiche_html dans scripts/creer_projet.py) */
.fiche { color: var(--encre); padding: 4px 2px 8px; }
.fiche-contexte { font-size: 11px; letter-spacing: .06em; text-transform: uppercase; color: var(--encre-doux); }
.fiche-titre { font-size: 20px; font-weight: 600; color: var(--marine); margin: 2px 0 8px; }
.fiche-chiffre { font-size: 30px; font-weight: 600; color: var(--marine); line-height: 1.1; }
.fiche-chiffre small { font-size: 16px; margin-left: 2px; }
.fiche-libelle { font-size: 13px; color: var(--encre-doux); margin-bottom: 8px; }
.fiche-jauge { height: 8px; background: #DCEAE6; border-radius: 4px; overflow: hidden; margin: 0 0 12px; }
.fiche-jauge span { display: block; height: 100%; background: var(--marine); }
.fiche-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.fiche-table td { padding: 4px 0; border-bottom: 1px solid var(--ligne); }
.fiche-table td:last-child { text-align: right; font-weight: 600; white-space: nowrap; }
.fiche-source { font-size: 11px; color: var(--encre-doux); margin-top: 8px; }
/* Alerte de lecture (effectif faible, taux non calculable), meme seuil que le hachurage de la legende */
.fiche-alerte { font-size: 12px; line-height: 1.4; margin-top: 8px; padding: 6px 8px; border: 1px solid rgba(213, 94, 0, .55); border-radius: 4px; background: rgba(213, 94, 0, .08); color: var(--encre); }
/* Definition de l indicateur et date de reference (traçabilite) */
.fiche-definition { font-size: 12px; line-height: 1.4; color: var(--encre); margin-top: 8px; padding: 6px 8px; background: var(--carte, #F7F5EE); border-radius: 4px; }
/* Liens vers le SIGE sectoriel (statistiques detaillees) en pied de fiche */
.fiche-sige { margin-top: 8px; padding-top: 6px; border-top: 1px solid rgba(24, 61, 53, .12); font-size: 12px; color: var(--encre-doux); }
.fiche-sige ul { margin: 3px 0 0; padding-left: 16px; }
.fiche-sige a { color: #397568; font-weight: 600; }

/* Fond de carte gris : voir media/js/default/fond_gris.js (un filtre CSS griserait aussi les donnees,
   dessinees dans le meme canevas que le fond) */
#map, #newOlMap { background: #C9DFEC; }   /* mer, fond facon DEPP (10/10/2026) */

/* Repere de l'etablissement trouve par la recherche de la page d'accueil (bandeau.js, ?repere=lon,lat) */
/* Epingle marine, pointe sur l'etablissement : forme distincte des cercles chiffres des regroupements */
.repere-recherche {
  position: absolute; z-index: 5; width: 32px; height: 42px; margin: -42px 0 0 -16px; pointer-events: none;
  filter: drop-shadow(0 2px 3px rgba(24, 61, 53, .45)); transform-origin: 50% 100%;
  animation: repere-arrivee .5s cubic-bezier(.16, 1, .3, 1);
}
.repere-recherche svg { display: block; }
@keyframes repere-arrivee {
  0% { transform: translateY(-18px); opacity: 0; }
  100% { transform: none; opacity: 1; }
}
@media (prefers-reduced-motion: reduce) { .repere-recherche { animation: none; } }

/* Légende toujours visible sur la carte (media/js/default/legende.js) : en bas à droite, au-dessus de l'échelle,
   pour ne pas être couverte par le panneau de gauche (fiches, statistiques, couches) */
#legende-carte {
  position: absolute; right: 12px; bottom: 112px; z-index: 1001;   /* au-dessus du conteneur OpenLayers 2 (749) : sinon le clic part a la carte */
  width: 296px; max-height: calc(100% - 200px); display: flex; flex-direction: column;
  background: #fff; color: var(--encre); border: 1px solid var(--ligne); border-radius: 6px;
  box-shadow: 0 2px 10px rgba(24, 61, 53, .16); font-size: 14px; line-height: 1.35;
}
#legende-carte h3 { margin: 0; padding: 0; background: none !important; font-size: 14px; }
.legende-bascule {
  display: flex; width: 100%; align-items: center; justify-content: space-between; gap: 8px;
  padding: 8px 12px; border: 0; background: none; color: var(--marine); font: inherit; font-weight: 600; font-size: 14px;
  cursor: pointer; border-radius: 6px;
}
.legende-bascule svg { transition: transform .2s cubic-bezier(.16, 1, .3, 1); }
.legende-bascule[aria-expanded=false] svg { transform: rotate(-90deg); }
.legende-bascule:focus-visible, .legende-lire:focus-visible { outline: 3px solid #397568; outline-offset: 1px; }
.legende-corps { overflow: auto; padding: 0 12px 10px; border-top: 1px solid var(--ligne); }
.legende-bloc + .legende-bloc { border-top: 1px solid var(--ligne); }
.legende-corps h4 { margin: 12px 0 6px; font-size: 14px; font-weight: 600; color: var(--encre); line-height: 1.3; }
.legende-corps ul { list-style: none; margin: 0 0 8px; padding: 0; }
.legende-corps li { display: flex; align-items: flex-start; gap: 8px; padding: 2px 0; }
.legende-corps li img { flex: none; width: 16px; height: 16px; margin-top: 2px; }
.legende-ministeres { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 12px; }
.legende-corps li svg { flex: none; width: 16px; height: 16px; margin-top: 2px; }
.legende-corps li span { min-width: 0; overflow-wrap: anywhere; }
.legende-groupe {
  flex: none; display: inline-flex; align-items: center; justify-content: center; width: 18px; height: 18px;
  border: 1.5px solid var(--marine); border-radius: 50%; background: #fff; color: var(--marine); font-size: 9px; font-weight: 600;
}
.legende-note { margin: 10px 0; color: var(--encre-doux); }
/* Bandeau du filtre par ministere, en haut au centre de la carte (bandeau.js) */
#filtre-ministere {
  position: absolute; z-index: 1001; top: 12px; left: 50%; transform: translateX(-50%); display: flex; align-items: center; gap: 8px;
  max-width: calc(100% - 120px); padding: 4px 4px 4px 12px; background: #fff; border: 1px solid var(--marine); border-radius: 22px;
  box-shadow: 0 2px 10px rgba(24, 61, 53, .25); color: var(--encre); font-size: 14px; font-weight: 600; white-space: nowrap;
}
#filtre-ministere svg { flex: none; }
#filtre-ministere > span { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
#filtre-ministere button {
  flex: none; min-height: 36px; padding: 0 12px; border: 0; border-radius: 18px; background: var(--carte); color: var(--marine);
  font: inherit; font-weight: 600; cursor: pointer;
}
#filtre-ministere button:hover { background: #EDEDE2; }
#filtre-ministere button:focus-visible { outline: 3px solid #397568; outline-offset: 1px; }
#filtre-ministere.echec { border-color: rgba(213, 94, 0, .55); white-space: normal; font-weight: 400; }
#filtre-ministere.echec button { min-width: 36px; padding: 0; font-size: 20px; }
#filtre-ministere .court { display: none; }
/* Telephone : entre le bouton du menu (a gauche) et les controles de la carte (a droite) */
@media (max-width: 700px) {
  #filtre-ministere { top: 8px; left: 56px; right: 56px; transform: none; max-width: none; justify-content: space-between; font-size: 13px; }
  #filtre-ministere .long { display: none; }
  #filtre-ministere .court { display: inline; }
}

/* Carte filtree sur un ministere depuis l'accueil : rappel et retour a tous les ministeres */
.legende-filtre { margin: 0 0 6px; font-weight: 600; color: var(--encre); }
.legende-tous {
  display: block; margin-top: 4px; padding: 6px 0; border: 0; background: none; color: var(--sarcelle); font: inherit; font-weight: 600;
  text-decoration: underline; text-underline-offset: 3px; cursor: pointer;
}
.legende-tous:hover { color: var(--marine); }
.legende-tous:focus-visible { outline: 3px solid #397568; outline-offset: 1px; }
.legende-lire {
  margin-top: 4px; padding: 0; border: 0; background: none; color: var(--sarcelle); font: inherit; font-weight: 600;
  text-decoration: underline; text-underline-offset: 3px; cursor: pointer;
}
.legende-lire:hover { color: var(--marine); }
/* Telephone : legende au-dessus de la boite de l'echelle ; coordonnees du pointeur masquees (pas de souris) */
@media (max-width: 700px) {
  #legende-carte { right: 8px; bottom: 136px; width: min(296px, calc(100% - 16px)); max-height: 55%; }
  /* Cibles tactiles d'au moins 44 px (legende, bandeau du filtre) */
  .legende-bascule { min-height: 44px; }
  .legende-lire, .legende-tous { display: inline-flex; align-items: center; min-height: 44px; }
  #filtre-ministere { padding-top: 0; padding-bottom: 0; }
  #filtre-ministere button { min-height: 44px; border-radius: 22px; }
  #filtre-ministere.echec button { min-width: 44px; }
  #overview-box lizmap-mouse-position { display: none !important; }
}
@media (prefers-reduced-motion: reduce) { .legende-bascule svg { transition: none; } }
/* Legende repliee : la barre rappelle l'indicateur affiche (legende.js, resume) ; le niveau (« — départements »)
   reste lisible, seule la premiere partie du nom est coupee */
.legende-mot, .legende-bascule svg { flex: none; }
.legende-resume { flex: 1 1 auto; min-width: 0; display: flex; white-space: pre; font-weight: 400; color: var(--encre); }
.legende-resume[hidden], .legende-bascule[aria-expanded=true] .legende-resume { display: none; }
.legende-point { flex: none; padding: 0 6px 0 2px; color: var(--encre-doux); }
.legende-resume-nom { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.legende-resume-fin { flex: none; }
@media (max-width: 700px) {
  /* Repliee sur telephone : presque toute la largeur, pour que le nom de l'indicateur se lise
     (38 px a gauche : la barre d'icones du menu, quand elle est affichee, mesure 30 px) */
  #legende-carte:has(.legende-bascule[aria-expanded=false]) { width: calc(100% - 46px); }
}

/* Fiches sur telephone : feuille basse (moitie de l'ecran au plus) au lieu du panneau plein ecran de Lizmap,
   la carte reste visible au-dessus avec l'endroit touche (bandeau.js, degagerFiche) ; ordinateur inchange.
   Lizmap 3.7 affiche les fiches dans #dock (onglet #popupcontent) ; ferme, #dock recoit display: none. */
@media (max-width: 700px) {
  #docks-wrapper:has(#popupcontent.active) { pointer-events: none; }   /* la carte au-dessus de la feuille reste utilisable */
  #dock:has(#popupcontent.active) {
    pointer-events: auto; position: absolute !important; top: auto !important; bottom: 0 !important; left: 0 !important; right: 0 !important;
    width: auto !important; height: auto !important; max-height: 55vh; max-height: 55dvh; margin: 0 !important; box-sizing: border-box;
    padding: 4px 0 env(safe-area-inset-bottom) !important; overflow: hidden !important;
    border-top: 1px solid var(--ligne); border-radius: 12px 12px 0 0; box-shadow: 0 -6px 20px rgba(24, 61, 53, .22);
  }
  #dock:has(#popupcontent.active) > .tabbable {
    display: flex; flex-direction: column; height: auto !important; min-height: 0;
    max-height: calc(55vh - 4px - env(safe-area-inset-bottom)); max-height: calc(55dvh - 4px - env(safe-area-inset-bottom));
  }
  #dock:has(#popupcontent.active) #dock-tabs { flex: none; padding-right: 52px; }
  #dock:has(#popupcontent.active) #dock-content {
    flex: 1 1 auto; min-height: 0; height: auto !important; overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch;
  }
  /* Fermer : cible de 44 px */
  #dock:has(#popupcontent.active) #dock-close { width: 44px; height: 44px; top: 0 !important; right: 4px; background-position: center; }
  #dock:has(#popupcontent.active) #dock-close:focus-visible { outline: 3px solid #397568; outline-offset: -3px; }
}


/* Chargement de la carte (bandeau.js, chargementCarte) : message calme au centre de la partie visible de la carte,
   jusqu'a la premiere image des couches de donnees ; ne bloque pas la carte (pointer-events: none) */
#chargement-carte, #chargement-fiche {
  position: absolute; z-index: 1002; display: flex; align-items: center; gap: 10px; pointer-events: none;
  background: #fff; color: var(--encre); border: 1px solid var(--ligne); border-radius: 22px;
  box-shadow: 0 2px 10px rgba(24, 61, 53, .16); font-size: 14px; font-weight: 600; line-height: 1.3;
}
#chargement-carte {
  top: 50%; left: 50%; transform: translate(-50%, -50%); max-width: min(360px, calc(100% - 32px));
  padding: 10px 18px 10px 14px; transition: opacity .35s cubic-bezier(.16, 1, .3, 1);
}
#chargement-carte.lent { border-radius: 8px; font-weight: 400; flex-wrap: wrap; }
/* Connexion coupee (11/10/2026) : le message porte un bouton, il redevient cliquable */
#chargement-carte.lent, #erreur-carte { pointer-events: auto; }
#chargement-carte.echec { border-color: #B4472C; }
.chargement-action {
  min-height: 36px; padding: 0 14px; border: 1px solid var(--encre); border-radius: 6px; background: #fff; color: var(--encre);
  font: inherit; font-size: 14px; font-weight: 600; cursor: pointer;
}
.chargement-action:hover { background: #F7F5EE; }
.chargement-action:focus-visible { outline: 3px solid #397568; outline-offset: 2px; }
#chargement-carte .chargement-texte { flex: 1 1 0; min-width: 0; }
#chargement-carte .chargement-action { margin-left: 26px; }
/* Image d'une couche perdue (bandeau.js, majErreurCouche) : bandeau en haut de la carte, sous la recherche */
#erreur-carte {
  position: absolute; z-index: 1003; top: 64px; left: 50%; transform: translateX(-50%); display: flex; align-items: center; gap: 12px;
  max-width: min(520px, calc(100% - 32px)); padding: 8px 8px 8px 14px; background: #fff; color: var(--encre);
  border: 1px solid #B4472C; border-radius: 8px; box-shadow: 0 2px 10px rgba(24, 61, 53, .16); font-size: 14px; line-height: 1.35;
}
#erreur-carte.sous-filtre { top: 112px; }
/* Image en cours apres l'ouverture (indicateur choisi, zoom) : pastille comme pour une fiche */
#chargement-couche { position: absolute; z-index: 1002; top: 64px; left: 50%; transform: translateX(-50%); display: flex; align-items: center; gap: 10px;
  pointer-events: none; padding: 6px 14px 6px 10px; background: #fff; color: var(--encre); border: 1px solid var(--ligne); border-radius: 22px;
  box-shadow: 0 2px 10px rgba(24, 61, 53, .16); font-size: 13px; font-weight: 600; white-space: nowrap; }
#chargement-couche.sous-filtre { top: 112px; }
@media (max-width: 700px) {
  html body .chargement-action { min-height: 44px; }
  html body #recherche-carte .rc-effacer { width: 44px; height: 44px; top: 0; right: 0; padding: 12px; border-radius: 22px; }
  html body #message-carte { white-space: normal; max-width: calc(100% - 32px); text-align: center; }
  #erreur-carte, #chargement-couche { top: 60px; }
  #erreur-carte.sous-filtre, #chargement-couche.sous-filtre { top: 108px; }
}
#chargement-carte.fini { opacity: 0; }
/* Fiche demandee : petite pastille en haut au centre (sous le bandeau du filtre s'il est affiche) */
#chargement-fiche { top: 12px; left: 50%; transform: translateX(-50%); padding: 6px 14px 6px 10px; font-size: 13px; white-space: nowrap; }
#chargement-fiche.sous-filtre { top: 64px; }
.chargement-roue {
  flex: none; width: 16px; height: 16px; border-radius: 50%;
  border: 2px solid #DCEAE6; border-top-color: var(--marine);
  animation: chargement-tour .9s linear infinite;
}
@keyframes chargement-tour { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) {
  /* sans rotation : un point marine fixe suffit, le texte porte l'information */
  .chargement-roue { animation: none; width: 10px; height: 10px; border: 0; background: var(--marine); }
  #chargement-carte { transition: none; }
}
@media (max-width: 700px) {
  #chargement-fiche { top: 60px; }
  #chargement-fiche.sous-filtre { top: 60px; }
}

/* Annonces aux lecteurs d'ecran (bandeau.js, annoncer) */
#annonce-carte, .sr-only {
  position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* Une seule indication de chargement : la boite « Chargement des données » de Lizmap (logo Liz) est remplacee par
   la pastille de bandeau.js (#chargement-carte) ; son voile reste (carte pas encore utilisable) mais transparent */
.ui-dialog.liz-dialog-wait { display: none !important; }
/* Voile apres l'ouverture (boite rouverte pendant une impression, un export) : transparent, la carte reste visible.
   Pendant l'ouverture, le voile papier avec la silhouette du pays est dans lizmap-theme/theme.css. */
html.carte-prete body:has(> .liz-dialog-wait:not([style*=display: none])) > .ui-widget-overlay { opacity: 0 !important; }

/* Message bref « Aucune information à cet endroit » (bandeau.js, messageBref), a la place de « Recherche… » */
#message-carte {
  position: absolute; z-index: 1002; top: 12px; left: 50%; transform: translateX(-50%); pointer-events: none;
  padding: 6px 14px; background: #fff; color: var(--encre); border: 1px solid var(--ligne); border-radius: 22px;
  box-shadow: 0 2px 10px rgba(24, 61, 53, .16); font-size: 13px; font-weight: 600; line-height: 1.3; white-space: nowrap;
  transition: opacity .35s cubic-bezier(.16, 1, .3, 1);
}
#message-carte.sous-filtre { top: 64px; }
#message-carte.fini { opacity: 0; }
@media (max-width: 700px) { #message-carte, #message-carte.sous-filtre { top: 60px; } }
@media (prefers-reduced-motion: reduce) { #message-carte { transition: none; } }

/* Contour du territoire dont la fiche est ouverte (signalement.js) : marine 3 px, liseré blanc de 1 px */
.contour-fiche { position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 4; pointer-events: none; overflow: visible; }
.contour-fiche path { fill: none; stroke-linejoin: round; stroke-linecap: round; }
.contour-fiche .contour-halo { stroke: #fff; stroke-width: 5; }
.contour-fiche .contour-trait { stroke: var(--marine); stroke-width: 3; }

/* Croix de fermeture des fiches (signalement.js) : sur telephone seulement, ailleurs l'icone de Lizmap */
#dock-close .icone-fermer { display: none; pointer-events: none; }

/* Autres fiches du meme toucher, repliees derriere « + 2 autres » (signalement.js) */
.fiches-autres {
  display: block; width: 100%; min-height: 36px; margin: 4px 0 10px; padding: 6px 12px; text-align: left;
  border: 1px solid var(--ligne); border-radius: 6px; background: var(--carte); color: var(--marine);
  font: inherit; font-size: 14px; font-weight: 600; cursor: pointer;
}
.fiches-autres:hover { background: var(--papier); }
.fiches-autres:focus-visible, #popupcontent .feature-toolbar .btn:focus-visible { outline: 3px solid #397568; outline-offset: 1px; }

@media (max-width: 700px) {
  /* Boutons de la carte : +, -, etendue initiale seulement (deplacer et zoom par rectangle sont inutiles au doigt) */
  #navbar button.pan, #navbar button.zoom { display: none !important; }
  /* Barre d'outils des fiches (Selectionner, Filtrer, Zoomer, Centrer) : cibles de 44 px */
  #popupcontent .feature-toolbar { display: flex; flex-wrap: wrap; gap: 4px; }
  #popupcontent .feature-toolbar .btn:not(.hide) { min-width: 44px; min-height: 44px; display: inline-flex; align-items: center; justify-content: center; }
  .fiches-autres { min-height: 44px; }
  /* Fermer la fiche : une croix nette au lieu de la fleche ⇤ de Lizmap */
  #dock:has(#popupcontent.active) #dock-close { background-image: none !important; color: var(--marine); }
  #dock:has(#popupcontent.active) #dock-close .icone-fermer { display: block; margin: auto; }
}


/* =====================================================================================================
   Refonte de la carte du 08/10/2026 (demande d'Abdel : plus jolie, meme famille que l'accueil, sans bleu).
   Papier pour les panneaux, encre pour le texte et la barre d'icones, sarcelle pour l'etat actif et les liens.
   Les regles ci-dessous remplacent l'habillage par defaut de Lizmap 3.7 (Bootstrap 2) sans toucher a son HTML.
   ===================================================================================================== */
:root { --ombre: 0 1px 2px rgba(24, 61, 53, .08), 0 8px 24px -8px rgba(24, 61, 53, .28); --rayon: 8px; --sortie: cubic-bezier(.16, 1, .3, 1); }
#map, #newOlMap { background: #C9DFEC; }   /* mer, fond facon DEPP (10/10/2026) */
::selection { background: rgba(57, 117, 104, .22); }

/* Bandeau : encre, comme l'accueil (lizmap-theme/theme.css) ; sous-titre de page discret */
#header, #title { background: var(--encre) !important; }
#title h2 { color: rgba(239, 235, 226, .62) !important; font-weight: 400; }

/* Barre d'icones de gauche : encre, icone active marquee d'un trait sarcelle et d'un fond plus clair */
#mapmenu { background: var(--encre) !important; box-shadow: 1px 0 0 rgba(0, 0, 0, .25); }
#mapmenu li a { position: relative; color: rgba(239, 235, 226, .72) !important; transition: background-color .15s, opacity .15s; }
#mapmenu li a .icon { opacity: .78; transition: opacity .15s; }
#mapmenu li a:hover { background: rgba(239, 235, 226, .08) !important; }
#mapmenu li a:hover .icon, #mapmenu li.active a .icon { opacity: 1; }
#mapmenu li.active a { background: rgba(239, 235, 226, .12) !important; color: #fff !important; }
#mapmenu li.active a::before { content: ''; position: absolute; left: 0; top: 4px; bottom: 4px; width: 3px; border-radius: 0 2px 2px 0; background: #5FA8A2; }
#mapmenu li a:focus-visible { outline: 2px solid #5FA8A2; outline-offset: -2px; }

/* Panneau lateral (couches, informations, statistiques, filtre) : papier, plus etroit, titres a l'encre */
#dock {
  background: var(--carte) !important; border-right: 1px solid var(--ligne);
  box-shadow: 6px 0 24px -12px rgba(24, 61, 53, .35);
}
@media (min-width: 701px) { #dock { width: 340px !important; } }
#dock-content { background: transparent !important; }
#dock h3, #mini-dock h3, #right-dock h3, #bottom-dock h3, .dock-content h3, #switcher h3 {
  color: var(--encre) !important; background: transparent !important; padding: 14px 16px 8px !important; margin: 0 !important;
  font-size: 13px !important; font-weight: 600 !important; letter-spacing: .08em; text-transform: uppercase; border: 0 !important;
}
#dock h3 .icon { display: none !important; }
#dock h3 .title > span:first-child + * { margin-left: 0; }
#dock .menu-content { padding: 0 8px 12px; }
/* Fermer le panneau */
#dock-close { opacity: .7; transition: opacity .15s; }
#dock-close:hover { opacity: 1; }

/* Arbre des couches : lignes aerees, cases sarcelle, noms lisibles ; couches hors echelle en gris, non en italique */
#switcher-layers-actions { padding: 10px 12px 0; text-align: right; }
#switcher-layers-actions .btn {
  background: transparent !important; border: 1px solid var(--ligne) !important; box-shadow: none !important; border-radius: 6px;
}
#switcher-layers-actions .btn i { filter: invert(.75); }
lizmap-treeview { font-size: 14px; }
/* Retraits : Bootstrap donne 25 px a chaque liste ; ici 22 px a la racine (place du triangle), 20 px par niveau */
lizmap-treeview ul { margin: 0 0 0 20px !important; padding: 0 !important; }
lizmap-treeview > ul { margin-left: 22px !important; }
lizmap-treeview .expandable { left: -22px !important; }
lizmap-treeview li { border: 0 !important; }
lizmap-treeview li > .group, lizmap-treeview li > .layer {
  display: flex; align-items: center; gap: 8px; min-height: 34px; padding: 2px 8px; border-radius: 6px; transition: background-color .15s;
}
lizmap-treeview li > .group:hover, lizmap-treeview li > .layer:hover { background: rgba(24, 61, 53, .05); }
lizmap-treeview li > .group label { font-weight: 600 !important; color: var(--encre) !important; letter-spacing: .01em; }
lizmap-treeview label { color: var(--encre) !important; font-style: normal !important; cursor: pointer; line-height: 1.3; }
lizmap-treeview li.not-visible > div label { color: #5C6A70 !important; font-style: normal !important; }
lizmap-treeview input[type=checkbox], lizmap-treeview input[type=radio] { accent-color: var(--sarcelle); width: 16px; height: 16px; margin: 0; flex: none; }
lizmap-treeview .node { display: flex; align-items: center; gap: 8px; flex: 1 1 auto; min-width: 0; }
lizmap-treeview .node img.legend { flex: none; }
/* Actions (documentation, informations) : au survol seulement, par-dessus la fin de la ligne, sans voler de place au nom */
lizmap-treeview li > .group, lizmap-treeview li > .layer { position: relative; }
lizmap-treeview .layer-actions {
  position: absolute; right: 4px; top: 50%; transform: translateY(-50%); display: flex; gap: 6px; padding: 2px 4px;
  border-radius: 4px; background: var(--carte); opacity: 0; pointer-events: none; transition: opacity .15s;
}
lizmap-treeview li > div:hover > .node > .layer-actions, lizmap-treeview li > div:focus-within > .node > .layer-actions { opacity: .85; pointer-events: auto; }
lizmap-treeview .layer-actions i { background-color: transparent !important; }
/* Couche filtree par la page (totaux « TOUS », ministere) : Lizmap la surligne en orange ; rien a signaler ici */
lizmap-treeview .node.filtered { background: transparent !important; }
lizmap-treeview .layer-actions i { filter: grayscale(1); }
lizmap-treeview .expandable { opacity: .55; }
lizmap-treeview ul.symbols { padding: 2px 0 6px 40px; font-size: 13px; color: var(--encre-doux); }
lizmap-treeview ul.symbols li { min-height: 22px; }
/* Couche choisie dans l'arbre (clic sur le nom) : surlignage sable au lieu du jaune Bootstrap */
lizmap-treeview .selected, #switcher .selected { background: rgba(57, 117, 104, .1) !important; }

/* Fond de carte : bloc papier sous l'arbre */
#switcher-baselayer { border-top: 1px solid var(--ligne); background: transparent !important; }
#switcher-baselayer h3 { background: transparent !important; color: var(--encre) !important; }
#switcher-baselayer select {
  width: calc(100% - 16px); margin: 0 8px 12px; height: 38px; border: 1px solid rgba(24, 61, 53, .25); border-radius: 6px;
  background-color: #fff; color: var(--encre); box-shadow: none;
}

/* Onglets du panneau (masques par Lizmap sur ordinateur, visibles dans certains etats) */
#dock-tabs > li > a { color: var(--encre-doux); border-radius: 6px 6px 0 0; }
#dock-tabs > li.active > a { color: var(--encre); font-weight: 600; }

/* Boutons de la carte (zoom, etendue, deplacer) : pastilles blanches, pictogrammes dessines a l'encre */
#navbar { display: inline-flex !important; flex-direction: column; gap: 0; border-radius: var(--rayon); box-shadow: var(--ombre); overflow: hidden; background: #fff; }
#navbar br, #navbar .slider { display: none !important; }
/* Deplacer et zoom par rectangle : inutiles (la carte se deplace a la souris, la molette zoome) */
#navbar button.btn.pan, #navbar button.btn.zoom { display: none !important; }
#navbar button.btn {
  width: 38px; height: 38px; margin: 0 !important; padding: 0; border: 0 !important; border-radius: 0 !important;
  background: #fff center / 20px 20px no-repeat !important; box-shadow: none !important; transition: background-color .15s;
}
#navbar button.btn + button.btn { border-top: 1px solid var(--ligne) !important; }
#navbar button.btn:hover { background-color: var(--carte) !important; }
#navbar button.btn:focus-visible { outline: 2px solid var(--sarcelle); outline-offset: -2px; }
#navbar button.btn.active { background-color: rgba(57, 117, 104, .12) !important; }
/* pictogrammes (images SVG en ligne) : dans lizmap-theme/theme.css, car getCssFile de Lizmap reecrit les url() de ce fichier */
#zoom-in-max-msg, #zoom-out-max-msg { border-radius: 6px; background: var(--encre) !important; color: #fff !important; border: 0 !important; }

/* Echelle et coordonnees en bas a droite : une seule bande papier discrete */
#overview-box { background: transparent !important; border: 0 !important; box-shadow: none !important; }
#overview-bar {
  background: rgba(246, 242, 234, .92) !important; border: 1px solid var(--ligne) !important; border-radius: var(--rayon);
  box-shadow: var(--ombre); color: var(--encre); font-size: 12px; padding: 4px 8px !important;
}
#overview-bar .ol-scale-text { color: var(--encre); font-weight: 600; text-shadow: none; }
#overview-bar .ol-scale-singlebar { border-color: var(--encre) !important; }
#overview-bar .ol-scale-singlebar-odd { background-color: var(--encre) !important; }
#overview-bar .ol-scale-singlebar-even { background-color: #fff !important; }
#overview-bar input, #overview-bar select, #overview-bar button {
  border: 1px solid var(--ligne) !important; border-radius: 4px !important; background: #fff !important; box-shadow: none !important;
  color: var(--encre); font-size: 12px;
}
#attribution-box, .ol-attribution { background: rgba(246, 242, 234, .85) !important; color: var(--encre-doux) !important; border-radius: 6px 0 0 0; }

/* Legende flottante (legende.js) : carte papier aux coins doux */
#legende-carte { background: rgba(255, 255, 255, .97); border-color: rgba(24, 61, 53, .1); border-radius: var(--rayon); box-shadow: var(--ombre); }
.legende-bascule { color: var(--encre); }
.legende-groupe { border-color: var(--encre); color: var(--encre); }

/* Fiches au clic (panneau « Fiches ») : en-tete de la fiche, outils discrets, separateurs fins */
#popupcontent { padding: 0 10px 16px; }
#popupcontent *, #popupcontent *::before, #popupcontent *::after { box-sizing: border-box; }
#popupcontent .lizmapPopupTitle, #popupcontent .lizmapPopupHeader {
  background: transparent !important; color: var(--encre-doux) !important; border: 0 !important;
  font-size: 12px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; padding: 12px 0 2px !important;
}
#popupcontent .lizmapPopupDiv, #popupcontent .lizmapPopupSingleFeature {
  background: #fff; border: 1px solid rgba(24, 61, 53, .08); border-radius: var(--rayon); padding: 10px 12px; margin: 6px 0 10px; max-width: 100%;
  box-shadow: 0 1px 2px rgba(24, 61, 53, .06);
}
#popupcontent .feature-toolbar .btn {
  background: var(--carte) !important; border: 1px solid var(--ligne) !important; border-radius: 6px !important; box-shadow: none !important;
}
#popupcontent .feature-toolbar .btn:hover { background: #fff !important; }
#popupcontent .feature-toolbar .btn i { filter: grayscale(1) brightness(.35); }
.fiche-titre, .fiche-chiffre { color: var(--encre); }
.fiche-jauge { background: #E7E2D6; }
.fiche-jauge span { background: var(--sarcelle); }
.lizmapPopupTable th, .lizmapPopupTable thead th, table.dataTable thead th { background: var(--carte) !important; color: var(--encre) !important; }

/* Panneau « Statistiques » : titres de graphiques en encre sur papier */
#dataviz-content .dataviz_plot_container h3, #dataviz-content .dataviz_plot_container h3 * { color: var(--encre) !important; }
#dataviz-content .dataviz_plot_container { background: #fff; border-radius: var(--rayon); margin: 8px; box-shadow: 0 1px 2px rgba(24, 61, 53, .06); }

/* Bandeau du filtre par ministere et messages : bordure fine, ombre douce */
#filtre-ministere { border-color: rgba(24, 61, 53, .16); box-shadow: var(--ombre); }

/* Infobulles Bootstrap (survol des icones du menu) : encre */
.tooltip-inner { background: var(--encre) !important; color: #fff; font-size: 13px; padding: 5px 10px; border-radius: 6px; }
.tooltip.right .tooltip-arrow { border-right-color: var(--encre) !important; }

/* Barres de defilement des panneaux, couleur du theme */
#dock-content, .legende-corps { scrollbar-width: thin; scrollbar-color: rgba(24, 61, 53, .3) transparent; }

@media (prefers-reduced-motion: reduce) {
  #mapmenu li a, #mapmenu li a .icon, lizmap-treeview li > div, #navbar button.btn { transition: none; }
}

/* Valeurs longues des fiches (codes, origines de position) : retour a la ligne plutot que debordement */
.fiche-table td:last-child { white-space: normal; overflow-wrap: anywhere; }
.fiche-table td:first-child { padding-right: 10px; }

/* Choix de l'indicateur en tete de la legende (legende.js) */
.legende-choix { display: block; margin: 12px 0 4px; }
.legende-choix > span { display: block; margin-bottom: 4px; font-size: 12px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--encre-doux); }
.legende-choix select {
  width: 100%; height: 38px; margin: 0; padding: 0 30px 0 10px; box-sizing: border-box; border: 1px solid rgba(24, 61, 53, .25); border-radius: 6px;
  background-color: #fff; color: var(--encre); font: inherit; font-size: 14px; box-shadow: none; cursor: pointer;
}
.legende-choix select:hover { border-color: rgba(24, 61, 53, .45); }
.legende-choix select:focus-visible { outline: 3px solid var(--sarcelle); outline-offset: 1px; }
@media (max-width: 700px) { .legende-choix select { height: 44px; } }

/* =====================================================================================================
   Diagnostic du 09/10/2026 (lot « Tout ») : barre d'icones allegee, cibles plus grandes, coordonnees retirees
   ===================================================================================================== */
/* Selection et table des donnees : outils d'analyste, inutiles au public (les fiches et les statistiques suffisent) */
#mapmenu li.selectiontool, #mapmenu li.attributeLayers { display: none !important; }
/* Lignes du menu de gauche : 40 px de haut au moins */
#mapmenu li > a { min-height: 40px; display: flex !important; align-items: center; }
/* Zoom avant, arriere et etendue : 44 px (cibles tactiles) */
#navbar button.btn { width: 44px; height: 44px; background-size: 22px 22px !important; }
/* Coordonnees du pointeur : du bruit pour le public, l'echelle seule reste */
#overview-box lizmap-mouse-position, lizmap-mouse-position { display: none !important; }
/* « Comment lire la carte » : cible confortable aussi sur ordinateur */
.legende-lire { display: inline-flex; align-items: center; min-height: 36px; }

/* Recherche sur la carte (media/js/default/recherche.js) : pastille blanche en haut au centre, comme les boutons de la
   carte ; liste des suggestions en carte papier dessous. Telephone : entre le bouton du menu et les boutons de zoom. */
#recherche-carte {
  position: absolute; z-index: 1002; top: 12px; left: 50%; transform: translateX(-50%); width: min(380px, calc(100% - 220px));
  font-size: 15px; color: var(--encre);
}
#recherche-carte input[type=search] {
  display: block; width: 100%; height: 44px; box-sizing: border-box; margin: 0; padding: 0 44px 0 42px;
  border: 1px solid rgba(24, 61, 53, .16); border-radius: 22px; background: #fff; color: var(--encre);
  font: inherit; line-height: 44px; box-shadow: var(--ombre); -webkit-appearance: none; appearance: none;
  transition: border-color .15s, box-shadow .15s;
}
#recherche-carte input[type=search]::-webkit-search-cancel-button { display: none; }
#recherche-carte input[type=search]::placeholder { color: #5C6B71; opacity: 1; }
#recherche-carte input[type=search]:hover { border-color: rgba(24, 61, 53, .4); }
#recherche-carte input[type=search]:focus {
  outline: none; border-color: var(--sarcelle); box-shadow: 0 0 0 3px rgba(57, 117, 104, .28), var(--ombre);
}
#recherche-carte .rc-loupe { position: absolute; left: 14px; top: 12px; width: 20px; height: 20px; color: #4B6058; pointer-events: none; }
#recherche-carte .rc-effacer {
  position: absolute; right: 4px; top: 4px; width: 36px; height: 36px; padding: 8px; border: 0; border-radius: 18px;
  background: none; color: #4B6058; cursor: pointer;
}
#recherche-carte .rc-effacer:hover { background: var(--carte); color: var(--encre); }
#recherche-carte .rc-effacer:focus-visible { outline: 2px solid var(--sarcelle); outline-offset: 0; }
#recherche-carte .rc-effacer[hidden] { display: none; }
#recherche-carte .rc-effacer svg { display: block; width: 20px; height: 20px; }
#recherche-carte-liste {
  position: absolute; top: 52px; left: 0; right: 0; max-height: min(60vh, 440px); overflow-y: auto; margin: 0; padding: 6px 0;
  list-style: none; background: #fff; border: 1px solid rgba(24, 61, 53, .1); border-radius: 12px; box-shadow: var(--ombre);
  overscroll-behavior: contain; animation: rc-entree .18s var(--sortie);
}
#recherche-carte-liste[hidden] { display: none; }
@keyframes rc-entree { from { opacity: 0; transform: translateY(-4px); } }
#recherche-carte-liste [role=option] { display: flex; flex-direction: column; gap: 1px; padding: 8px 16px; cursor: pointer; }
#recherche-carte-liste [role=option]:hover { background: var(--carte); }
#recherche-carte-liste [role=option][aria-selected=true] { background: #EDEDE2; }
#recherche-carte-liste .rc-nom { font-weight: 600; line-height: 1.3; }
#recherche-carte-liste .rc-detail { color: #4B6058; font-size: 13px; line-height: 1.35; }
#recherche-carte-liste .rc-action { color: var(--sarcelle); font-weight: 600; }
#recherche-carte-liste .rc-info { padding: 8px 16px; color: #4B6058; font-size: 14px; line-height: 1.4; }
#recherche-carte-liste .rc-info b { display: block; color: var(--encre); }
#recherche-carte-liste .rc-note { border-top: 1px solid var(--ligne); margin-top: 4px; padding-top: 10px; font-size: 13px; }
/* Le bandeau du filtre par ministere passe sous la recherche */
#filtre-ministere { top: 64px; }
@media (max-width: 700px) {
  #recherche-carte { top: 8px; left: 56px; right: 60px; width: auto; transform: none; font-size: 16px; }
  #recherche-carte-liste { max-height: min(55vh, 380px); }
  #filtre-ministere { top: 60px; }
}
@media (prefers-reduced-motion: reduce) { #recherche-carte-liste { animation: none; } }

/* Outils de la fiche : dans lizmap-theme/theme.css (libelles en content: ... que getCssFile de Lizmap
   retire de ce fichier, avec ses guillemets) */
/* Bouton du menu sur telephone (#menuToggle, rendu accessible par bandeau.js) */
#menuToggle { cursor: pointer; }
#menuToggle:focus-visible { outline: 3px solid #5FA8A2; outline-offset: 2px; border-radius: 4px; }

/* Renvoi vers la legende a la place du groupe « Indicateurs » dans « Couches » (legende.js, arbreSansIndicateurs) */
.renvoi-indicateurs { margin: 10px 12px 14px; padding: 10px 12px; border-radius: 8px; background: #EDEDE2; color: #4B6058; font-size: 14px; line-height: 1.4; }

/* Cartouche de l'echelle : a la taille de la barre (les coordonnees du pointeur sont masquees, le cadre restait large
   et vide ; critique du 09/10/2026) */
#overview-box, #overview-bar { width: auto !important; min-width: 0 !important; }
#overview-bar { display: inline-flex !important; align-items: center; gap: 8px; padding: 2px 8px !important; }
/* Telephone : bouton et liste du menu aux couleurs de la charte (encre et papier) au lieu du gris de Bootstrap */
@media (max-width: 767px) {
  #menuToggle { background: var(--encre) !important; border-radius: 8px; box-shadow: var(--ombre); }
  #menuToggle span { background: #EDEDE2 !important; }
  #mapmenu, #mapmenu .nav, #mapmenu ul { background: var(--encre) !important; }
  #mapmenu li > a, #mapmenu .nav-pills > li > a, #mapmenu .nav-list > li > a {
    background: transparent !important; border-radius: 0 !important; box-shadow: none !important; color: rgba(239, 235, 226, .82) !important;
  }
  #mapmenu li.active > a { background: rgba(239, 235, 226, .12) !important; color: #fff !important; }
  /* Le gris (#444) et le bleu de l'element actif sont portes par les li de Lizmap, pas par les liens : rangées
     pleine largeur separees par un filet, active marquee par le trait sarcelle comme sur ordinateur */
  #mapmenu .nav-list > li, #mapmenu .nav-list > li.active {
    margin: 0 !important; border-radius: 0 !important; background: transparent !important; box-shadow: none !important;
    border-bottom: 1px solid rgba(239, 235, 226, .1);
  }
  #mapmenu .nav-list { margin: 0 !important; padding: 0 !important; }
  #mapmenu .nav-list > li > a { min-height: 52px; padding-left: 20px !important; font-size: 17px; }
  #menuToggle { min-width: 44px; min-height: 44px; }
}

/* Palette Foret et ivoire commune a l'accueil et a la carte (28). */