/*
 * Charte de la plateforme. Pour changer l'allure : modifier les variables du bloc :root.
 * Les couleurs des points sur la carte sont reprises ici (--point-veille, --point-feu, --point-incident)
 * et lues par js/carte.js : ne changer qu'ici.
 */
:root {
  --papier: #fcfcfb;          /* fond général */
  --papier-2: #f3f2ef;        /* fonds secondaires */
  --encre: #141413;           /* texte principal */
  --encre-2: #52514e;         /* texte secondaire */
  --encre-3: #85847f;         /* texte discret */
  --filet: #e2e0db;           /* traits de séparation */
  --accent: #141413;          /* boutons actifs */

  --point-veille: #2a78d6;    /* signaux de veille (bleu) */
  --point-feu: #eb6834;       /* feux satellites (orange) */
  --point-incident: #141413;  /* incidents vérifiés (encre) */

  --police: 'IBM Plex Sans', 'IBM Plex Sans Arabic', system-ui, sans-serif;
  --police-arabe: 'IBM Plex Sans Arabic', 'IBM Plex Sans', system-ui, sans-serif;
  --police-mono: 'IBM Plex Mono', ui-monospace, monospace;

  --largeur-panneau: 420px;
  --hauteur-entete: 52px;
  color-scheme: light;
}

* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; }
body {
  background: var(--papier);
  color: var(--encre);
  font: 14px/1.45 var(--police);
  -webkit-font-smoothing: antialiased;
}
button, input, select { font: inherit; color: inherit; }
button { cursor: pointer; }
:focus-visible { outline: 2px solid var(--point-veille); outline-offset: 2px; }
[hidden] { display: none !important; }
[dir="rtl"], :lang(ar) { font-family: var(--police-arabe); }

/* ───────── En-tête ───────── */
.entete {
  height: var(--hauteur-entete);
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 0 16px;
  border-bottom: 1px solid var(--filet);
  background: var(--papier);
}
.marque { display: flex; align-items: baseline; gap: 10px; min-width: 0; }
.marque-signe {
  width: 14px; height: 14px; align-self: center; flex: none;
  border: 2.5px solid var(--encre); border-radius: 50%;
  box-shadow: inset 0 0 0 2.5px var(--papier), inset 0 0 0 7px var(--point-feu);
}
.marque-nom { font-weight: 600; font-size: 15px; letter-spacing: -0.01em; white-space: nowrap; }
.marque-sous { font: 11px var(--police-mono); color: var(--encre-3); text-transform: uppercase; letter-spacing: .06em; white-space: nowrap; }
.entete-droite { display: flex; align-items: center; gap: 16px; }
.liens-entete { display: flex; gap: 14px; font-size: 13px; }
.liens-entete a { color: var(--encre-2); text-decoration: none; }
.liens-entete a:hover { color: var(--encre); text-decoration: underline; text-underline-offset: 3px; }
details.repli > summary { cursor: pointer; list-style: none; display: flex; justify-content: space-between; }
details.repli > summary::-webkit-details-marker { display: none; }
details.repli > summary::after { content: '−'; font-family: var(--police-mono); color: var(--encre-3); }
details.repli:not([open]) > summary::after { content: '+'; }
details.repli:not([open]) > summary { margin-bottom: 0; }
.maj { font: 11px var(--police-mono); color: var(--encre-3); white-space: nowrap; }
.langues { display: flex; border: 1px solid var(--filet); border-radius: 4px; overflow: hidden; }
.langues button { border: 0; background: none; padding: 3px 9px; font: 500 11px var(--police-mono); color: var(--encre-3); }
.langues button[aria-pressed="true"] { background: var(--encre); color: var(--papier); }

/* ───────── Disposition ───────── */
.espace {
  height: calc(100% - var(--hauteur-entete));
  display: grid; grid-template-columns: var(--largeur-panneau) 1fr;
}
.panneau {
  display: flex; flex-direction: column; min-height: 0;
  border-right: 1px solid var(--filet);
  background: var(--papier);
}
.zone-carte { position: relative; min-width: 0; }
.carte { position: absolute; inset: 0; }

/* ───────── Onglets ───────── */
.onglets { display: flex; gap: 20px; padding: 0 16px; border-bottom: 1px solid var(--filet); flex: none; }
.onglets button {
  border: 0; background: none; padding: 12px 0 10px;
  font-weight: 500; color: var(--encre-3);
  border-bottom: 2px solid transparent; margin-bottom: -1px;
}
.onglets button[aria-selected="true"] { color: var(--encre); border-bottom-color: var(--encre); }
.vue { flex: 1; overflow-y: auto; min-height: 0; }

/* ───────── Filtres ───────── */
.filtres { padding: 14px 16px 10px; display: grid; grid-template-columns: minmax(0, 1fr); gap: 10px; border-bottom: 1px solid var(--filet); }
.champ {
  width: 100%; height: 34px; padding: 0 10px;
  border: 1px solid var(--filet); border-radius: 4px; background: #fff;
}
.champ::placeholder { color: var(--encre-3); }
.champ-select { width: auto; flex: 1; min-width: 0; }
.filtres-ligne { display: flex; flex-wrap: wrap; gap: 8px 12px; align-items: center; }
.case { display: flex; gap: 6px; align-items: center; font-size: 13px; color: var(--encre-2); white-space: nowrap; }
.segment { display: inline-flex; border: 1px solid var(--filet); border-radius: 4px; overflow: hidden; justify-self: start; }
.segment button { border: 0; background: none; padding: 5px 12px; font: 500 12px var(--police-mono); color: var(--encre-2); }
.segment button + button { border-left: 1px solid var(--filet); }
.segment button[aria-pressed="true"] { background: var(--encre); color: var(--papier); }
.puces { display: flex; flex-wrap: wrap; gap: 6px; }
.puce {
  border: 1px solid var(--filet); background: #fff; border-radius: 999px;
  padding: 3px 10px; font-size: 12px; color: var(--encre-2);
}
.puce[aria-pressed="true"] { border-color: var(--encre); background: var(--encre); color: var(--papier); }
.puce .n { font-family: var(--police-mono); font-size: 11px; opacity: .65; margin-left: 4px; }

/* ───────── Listes ───────── */
.compteur { padding: 8px 16px; font: 11px var(--police-mono); color: var(--encre-3); text-transform: uppercase; letter-spacing: .05em; border-bottom: 1px solid var(--filet); }
.liste { padding-bottom: 24px; }
.art { padding: 12px 16px; border-bottom: 1px solid var(--filet); }
.art:hover, .art.actif { background: var(--papier-2); }
.art-meta { display: flex; gap: 6px; align-items: center; font-size: 12px; color: var(--encre-3); flex-wrap: wrap; }
.art-meta time { font-family: var(--police-mono); font-size: 11px; }
.badge { font: 500 10px var(--police-mono); border: 1px solid var(--filet); border-radius: 3px; padding: 0 4px; color: var(--encre-2); text-transform: uppercase; }
.art-titre { display: block; margin: 4px 0 8px; color: var(--encre); text-decoration: none; font-weight: 500; font-size: 14px; line-height: 1.4; }
.art-titre:hover { text-decoration: underline; text-underline-offset: 3px; }
.art-titre:lang(ar) { font-size: 15px; }
.art-pied { display: flex; flex-wrap: wrap; gap: 6px 10px; align-items: center; font-size: 12px; }
.etiquette { color: var(--encre-2); }
.art-dates { margin-top: 6px; font: 11px var(--police-mono); color: var(--encre-3); }
.lien-lieu, .mini {
  border: 0; background: none; padding: 0; font-size: 12px; color: var(--encre-2);
  text-decoration: underline; text-decoration-color: var(--filet); text-underline-offset: 3px;
}
.lien-lieu::before { content: ''; display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: var(--point-veille); margin-right: 5px; vertical-align: 1px; }
.lien-lieu:hover, .mini:hover { color: var(--encre); text-decoration-color: currentColor; }
.mini { margin-left: auto; color: var(--encre-3); }
.vide { padding: 24px 16px; color: var(--encre-2); line-height: 1.55; }

/* ───────── Blocs (imagerie, couches) ───────── */
.titre-vue { margin: 0 0 6px; font: 500 11px var(--police-mono); text-transform: uppercase; letter-spacing: .06em; color: var(--encre-2); }
#vue-incidents .titre-vue { padding: 14px 16px 0; }
.bloc { padding: 16px; border-bottom: 1px solid var(--filet); }
.bloc-actions { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }
.aide { margin: 0 0 12px; color: var(--encre-2); font-size: 13px; }
.bouton {
  border: 1px solid var(--encre); background: var(--encre); color: var(--papier);
  border-radius: 4px; padding: 7px 12px; font-weight: 500; font-size: 13px;
}
.bouton:disabled { opacity: .4; cursor: default; }
.bouton-discret { background: none; color: var(--encre); }
.lien { color: var(--encre-2); font-size: 13px; text-underline-offset: 3px; }
.img-liste { margin-top: 12px; display: grid; gap: 0; }
.img-liste .note { color: var(--encre-2); font-size: 13px; margin: 0; }
.img-ligne { display: flex; align-items: center; gap: 10px; padding: 8px 0; border-top: 1px solid var(--filet); }
.img-ligne div { flex: 1; min-width: 0; }
.img-ligne b { display: block; font-weight: 500; }
.img-ligne small { color: var(--encre-3); font: 11px var(--police-mono); }

.couche { display: flex; gap: 10px; align-items: flex-start; padding: 8px 0; cursor: pointer; }
.couche input { margin: 3px 0 0; }
.couche b { display: block; font-weight: 500; }
.couche small { display: block; color: var(--encre-3); font-size: 12px; margin-top: 2px; }
.pastille { display: inline-block; flex: none; width: 10px; height: 10px; border-radius: 50%; margin-top: 4px; }
.pastille-veille { background: var(--point-veille); box-shadow: 0 0 0 1.5px #fff, 0 0 0 2.5px var(--point-veille); width: 8px; height: 8px; margin: 5px 1px 0; }
.pastille-feu { background: var(--point-feu); width: 7px; height: 7px; margin: 5px 1.5px 0; }
.pastille-incident { background: var(--point-incident); box-shadow: 0 0 0 1.5px #fff, 0 0 0 2.5px var(--point-incident); width: 8px; height: 8px; margin: 5px 1px 0; }
.pastille-evt { background: #d03b3b; width: 8px; height: 8px; margin: 5px 1px 0; }
.pastille-migr { background: #1baf7a; width: 9px; height: 9px; margin: 4px 0.5px 0; opacity: .8; }
.sous-titre { margin: 12px 0 4px; font: 500 12px var(--police); }
.ctrl-legende i.trait-contact { height: 3px; border-radius: 0; background: #141413; opacity: 1; vertical-align: 3px; }
.puces-osm { margin: 2px 0 8px 26px; }
.puces-osm .puce { font-size: 12px; padding: 3px 8px; }
.pastille-base { background: #141413; border-radius: 1px; width: 9px; height: 9px; margin: 4px 0.5px 0; }
.pastille-ins { background: rgba(20, 20, 19, .3); border: 1px solid #141413; border-radius: 1px; width: 11px; height: 9px; margin: 4px 0 0; }
.pastille-infl { background: #fff; box-shadow: inset 0 0 0 1.6px #52514e; width: 10px; height: 10px; margin: 4px 0 0; }
.infl-liste { list-style: none; margin: 10px 0 0; padding: 0; display: grid; gap: 8px; font-size: 12px; max-height: 320px; overflow: auto; }
.infl-liste small, .infl small { display: block; color: var(--encre-3); margin-top: 2px; }
.infl-liste a, .infl a { color: var(--encre-2); }
.pastille-mines { border-radius: 1px; background: rgba(208, 59, 59, .25); border: 1px dashed #d03b3b; }
.pastille-armement { background: #fff; box-shadow: inset 0 0 0 2px #141413; width: 9px; height: 9px; margin: 4px 0.5px 0; }
.case-retrait { margin: -2px 0 6px 20px; font-size: 12px; }
.alerte-securite { margin: 4px 0 10px 20px; padding: 8px 10px; border-left: 3px solid #d03b3b; background: rgba(208, 59, 59, .06); font-size: 12px; line-height: 1.5; color: var(--encre); }
.pop-alerte { margin-top: 6px; font-size: 12px; font-weight: 600; color: #b3261e; }
.pastille-gouv { border-radius: 0; border: 1px solid var(--encre-2); background: none; }
.groupe-osm h3 { margin: 12px 0 2px; font: 500 12px var(--police); color: var(--encre); }
.couche-osm { padding: 5px 0; }
.couche-osm input:disabled + .pastille + span { opacity: .5; }
.pastille-osm-point { background: #52514e; width: 7px; height: 7px; margin: 5px 1.5px 0; }
.pastille-osm-ligne { border-radius: 0; height: 2px; width: 12px; margin-top: 9px; background: #3a3935; }
.pastille-osm-surface { border-radius: 1px; background: rgba(82, 81, 78, .25); border: 1px dashed #52514e; }
.etat-sources { list-style: none; margin: 0; padding: 0; font-size: 12px; }
.etat-sources li { display: flex; justify-content: space-between; gap: 10px; padding: 5px 0; border-top: 1px solid var(--filet); }
.etat-sources span:last-child { font-family: var(--police-mono); font-size: 11px; color: var(--encre-3); white-space: nowrap; }
.etat-sources .ko { color: #b3261e; }

/* ───────── Carte : légende et mention d'imagerie ───────── */
/* Vues thématiques, en haut de la carte ; légende en bas à gauche. */
.vues { position: absolute; left: 12px; top: 12px; right: 60px; z-index: 3; pointer-events: none; }
.vues-liste { display: flex; flex-wrap: wrap; gap: 6px; pointer-events: auto; }
.vue-bouton {
  border: 1px solid var(--filet); background: rgba(252, 252, 251, .95); color: var(--encre);
  border-radius: 999px; padding: 5px 12px; font: 500 13px var(--police); cursor: pointer; white-space: nowrap;
}
.vue-bouton:hover { border-color: var(--encre); }
.vue-bouton[aria-pressed="true"] { background: var(--encre); border-color: var(--encre); color: var(--papier); }
.vues-aide { display: inline-block; margin: 6px 0 0; padding: 4px 9px; font-size: 12px; color: var(--encre-2); background: rgba(252, 252, 251, .92); border-radius: 4px; pointer-events: auto; }
.legende {
  position: absolute; left: 12px; bottom: 30px; z-index: 2;
  display: flex; flex-wrap: wrap; gap: 4px 14px; max-width: calc(100% - 190px);
  background: rgba(252, 252, 251, .92); border: 1px solid var(--filet); border-radius: 4px;
  padding: 6px 10px; font-size: 12px; color: var(--encre-2);
}
.legende > span { display: inline-flex; align-items: center; gap: 6px; }
.legende .pastille { margin-top: 0; }
.img-ouvrir { border: 1px solid var(--filet); background: #fff; border-radius: 4px; padding: 3px 8px; font-size: 12px; color: var(--encre); text-decoration: none; white-space: nowrap; }
.img-ouvrir:hover { border-color: var(--encre); }
.bouton[aria-pressed="true"] { background: none; color: var(--encre); }
.note[role="status"] { margin: 10px 0 0; }

/* Statut d'une information : signalé (neutre) ou revendiqué par une partie (encadré). */
.statut { font: 500 10px var(--police-mono); color: var(--encre-2); border: 1px dashed var(--filet); border-radius: 3px; padding: 0 4px; }
.statut-revendique { border-style: solid; border-color: var(--encre-3); color: var(--encre); }

/* Mention obligatoire de l'imagerie Google (logo + copyright de la zone vue). */
.credit-imagerie {
  position: absolute; left: 12px; bottom: 6px; z-index: 3; max-width: calc(100% - 190px);
  display: flex; flex-wrap: wrap; align-items: center; gap: 2px 8px;
  background: rgba(20, 20, 19, .78); color: #eee; border-radius: 3px; padding: 3px 8px;
  font: 11px/1.35 var(--police-mono); pointer-events: none;
}
.credit-imagerie img { height: 13px; flex: none; }
.credit-imagerie .discret { opacity: .7; }

/* Trafic maritime */
.chiffre { display: flex; align-items: baseline; gap: 10px; margin: 6px 0 2px; }
.chiffre b { font: 600 34px/1 var(--police); letter-spacing: -.02em; }
.chiffre span { color: var(--encre-2); font-size: 13px; }
.graphe { width: 100%; height: auto; margin: 8px 0 4px; font: 9px var(--police-mono); fill: var(--encre-3); }
.graphe .grille { stroke: var(--filet); stroke-width: 1; }
.graphe .courbe { fill: none; stroke: var(--encre); stroke-width: 2; stroke-linejoin: round; }
.graphe .cible { fill: transparent; }
.graphe .cible:hover { fill: var(--encre); fill-opacity: .15; }

/* Contrôle territorial */
.curseur { width: 100%; margin: 6px 0 2px; accent-color: var(--encre); }
.ctrl-date { font-size: 13px; margin-bottom: 4px; }
.ctrl-legende { list-style: none; margin: 8px 0 0; padding: 0; display: grid; gap: 4px; font-size: 12px; color: var(--encre-2); }
.ctrl-legende i { display: inline-block; width: 12px; height: 12px; border-radius: 2px; margin-right: 7px; vertical-align: -2px; opacity: .75; }
.ctrl-legende i.hachure { opacity: 1; background: repeating-linear-gradient(135deg, #141413 0 1.5px, transparent 1.5px 5px); border: 1px dashed #141413; }

/* Fiches des acteurs */
.aide-vue { padding: 14px 16px 0; margin: 0; }
.fiche { padding: 14px 16px; border-bottom: 1px solid var(--filet); font-size: 13px; }
.fiche h3 { margin: 0 0 2px; font-size: 15px; display: flex; align-items: center; gap: 8px; }
.fiche h3 i { width: 12px; height: 12px; border-radius: 2px; flex: none; }
.fiche h4 { margin: 12px 0 4px; font: 500 11px var(--police-mono); text-transform: uppercase; letter-spacing: .05em; color: var(--encre-2); }
.fiche ul { margin: 0; padding-left: 18px; display: grid; gap: 4px; }
.fiche a { color: var(--encre-2); }
.fiche-siege { margin: 0; color: var(--encre-3); }
.fiche-veille { padding-left: 0 !important; list-style: none; }
.fiche-veille time { display: block; font: 11px var(--police-mono); color: var(--encre-3); }
.fiche-veille a { color: var(--encre); text-decoration: none; }

/* Ouverture animée */
.intro-legende {
  position: absolute; left: 50%; top: 18%; transform: translateX(-50%); z-index: 4; pointer-events: none;
  font: 600 13px var(--police-mono); letter-spacing: .12em; text-transform: uppercase;
  color: var(--encre); background: rgba(252, 252, 251, .85); padding: 6px 12px; border-radius: 3px;
}
.intro-passer {
  position: absolute; right: 16px; bottom: 64px; z-index: 5;
  border: 1px solid var(--encre); background: var(--papier); color: var(--encre);
  border-radius: 4px; padding: 8px 16px; font: 500 13px var(--police);
}
.intro-passer:hover { background: var(--encre); color: var(--papier); }

/* Popups MapLibre */
.maplibregl-popup-content { font: 13px/1.45 var(--police); padding: 10px 12px; border-radius: 4px; max-width: 320px; }
.pop-titre { font-weight: 600; margin-bottom: 4px; }
.pop-ligne { color: var(--encre-2); font-size: 12px; }
.pop-lies { margin-top: 8px; border-top: 1px solid var(--filet); padding-top: 6px; }
.pop-lies-titre { font: 500 10px var(--police-mono); text-transform: uppercase; letter-spacing: .05em; color: var(--encre-3); }
.pop-liste { margin: 6px 0 0; padding: 0; list-style: none; max-height: 220px; overflow: auto; }
.pop-liste li { padding: 5px 0; border-top: 1px solid var(--filet); }
.pop-liste a { color: var(--encre); text-decoration: none; }
.pop-liste a:hover { text-decoration: underline; }
.pop-liste time { display: block; font: 11px var(--police-mono); color: var(--encre-3); }

.toast {
  position: fixed; left: 50%; bottom: 24px; transform: translateX(-50%); z-index: 20;
  max-width: min(520px, calc(100% - 32px));
  background: var(--encre); color: var(--papier); padding: 10px 14px; border-radius: 4px; font-size: 13px;
}

/* ───────── Mobile ───────── */
@media (max-width: 800px) {
  .credit-imagerie { bottom: 8px; left: 8px; }
  .marque-sous, .maj { display: none; }
  .liens-entete { gap: 10px; font-size: 12px; }
  .espace { display: flex; flex-direction: column-reverse; height: auto; }
  .zone-carte { height: 58vh; flex: none; }
  .panneau { border-right: 0; border-top: 1px solid var(--filet); }
  .vue { overflow: visible; }
  .onglets { position: sticky; top: 0; background: var(--papier); z-index: 5; gap: 16px; }
  .liens-entete a { white-space: nowrap; }
  .vues { left: 8px; top: 8px; right: 52px; }
  .vues-liste { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; }
  .vue-bouton { font-size: 12px; padding: 4px 10px; }
  .vues-aide { display: none; }
  .legende { left: 8px; bottom: 26px; max-width: calc(100% - 60px); flex-wrap: nowrap; overflow-x: auto; font-size: 11px; gap: 10px; padding: 4px 8px; white-space: nowrap; scrollbar-width: none; }
}

/* Pages de texte (méthode, sources) */
.corps-page { height: auto; }
.corps-page .marque { text-decoration: none; color: inherit; }
main.page { max-width: 820px; margin: 0 auto; padding: 32px 20px 64px; line-height: 1.6; }
main.page h1 { font-size: 30px; letter-spacing: -.02em; margin: 0 0 12px; }
main.page h2 { font: 500 12px var(--police-mono); text-transform: uppercase; letter-spacing: .06em; color: var(--encre-2); margin: 32px 0 8px; }
main.page .chapo { font-size: 17px; color: var(--encre); }
main.page dt { font-weight: 600; margin-top: 10px; }
main.page dd { margin: 2px 0 0; color: var(--encre-2); }
main.page li { margin: 4px 0; }
main.page a { color: var(--encre); }
.table-sources { width: 100%; border-collapse: collapse; font-size: 13px; margin-top: 16px; }
.table-sources th, .table-sources td { text-align: left; vertical-align: top; padding: 8px 8px 8px 0; border-top: 1px solid var(--filet); }
.table-sources th { font: 500 11px var(--police-mono); text-transform: uppercase; color: var(--encre-2); }
@media (max-width: 800px) { .table-sources { display: block; overflow-x: auto; } main.page { padding: 20px 16px 48px; } }

/* Moins d'animations si le visiteur l'a demandé (les animations JavaScript s'arrêtent aussi). */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; animation: none !important; scroll-behavior: auto !important; }
}

/* Panneau Veille épuré : filtres secondaires repliés, fiches sur trois lignes. */
.plus-filtres { border-top: 1px solid var(--filet); padding-top: 8px; }
.plus-filtres > summary { cursor: pointer; font-size: 13px; color: var(--encre-2); list-style: none; }
.plus-filtres > summary::before { content: '+ '; font-family: var(--police-mono); }
.plus-filtres[open] > summary::before { content: '− '; }
.plus-filtres[open] > summary { margin-bottom: 8px; }
.art-pied .art-dates { font: 11px var(--police-mono); color: var(--encre-3); margin: 0; }
.art .art-outil { margin-left: auto; opacity: 0; transition: opacity .15s; }
.art:hover .art-outil, .art:focus-within .art-outil { opacity: 1; }
@media (hover: none) { .art .art-outil { display: none; } }
.pastille-hachure { background: repeating-linear-gradient(135deg, #141413 0 1.5px, transparent 1.5px 4px); border: 1px solid #141413; border-radius: 1px; width: 10px; height: 10px; }
.pastille-contact { background: #141413; border-radius: 0; width: 14px; height: 3px; }

/* ───────── Synthèse : note de situation de la vue choisie ───────── */
.synthese { padding: 18px 16px 32px; }
.syn-tete h2 { margin: 0; font-size: 22px; letter-spacing: -.01em; }
.syn-etat { margin: 2px 0 0; font: 12px var(--police-mono); color: var(--encre-3); }
.syn-aide { margin: 8px 0 0; color: var(--encre-2); font-size: 14px; }
.syn-bloc { margin-top: 22px; }
.syn-bloc h3 { margin: 0 0 8px; font: 500 11px var(--police-mono); text-transform: uppercase; letter-spacing: .06em; color: var(--encre-2); }
.syn-bloc h3 + .note + h3 { margin-top: 14px; }
.syn-chiffres { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1px; margin: 0; background: var(--filet); border: 1px solid var(--filet); }
.syn-chiffres > div { background: var(--papier); padding: 10px 12px; }
.syn-chiffres dt { font-size: 24px; font-weight: 600; letter-spacing: -.02em; line-height: 1.1; }
.syn-chiffres dd { margin: 3px 0 0; font-size: 12px; color: var(--encre-2); line-height: 1.35; }
.syn-faits { list-style: none; margin: 0; padding: 0; }
.syn-faits li { display: grid; grid-template-columns: 88px 1fr; gap: 10px; padding: 9px 0; border-top: 1px solid var(--filet); }
.syn-faits time { font: 12px var(--police-mono); color: var(--encre-3); padding-top: 1px; }
.syn-faits small { display: block; margin-top: 3px; font-size: 12px; color: var(--encre-3); }
.syn-faits small a { color: var(--encre-2); }
.syn-lieu { all: unset; cursor: pointer; font-size: 14px; line-height: 1.4; }
.syn-lieu:hover, .syn-lieu:focus-visible { text-decoration: underline; text-underline-offset: 3px; }
.sous-bloc { margin-top: 12px; }
.sous-bloc:first-of-type { margin-top: 4px; }

.syn-tete { position: relative; }
.syn-imprimer { position: absolute; top: 2px; right: 0; }
#impression { display: none; }
@media print {
  @page { size: A4; margin: 14mm; }
  body > *:not(#impression) { display: none !important; }
  body { height: auto; overflow: visible; background: #fff; }
  #impression { display: block; font-size: 11pt; color: #000; }
  .imp-tete { display: flex; justify-content: space-between; align-items: baseline; border-bottom: 1px solid #000; padding-bottom: 4px; margin-bottom: 8px; }
  .imp-tete span { font: 9pt var(--police-mono); }
  .imp-carte { width: 100%; max-height: 110mm; object-fit: cover; border: 1px solid #ccc; }
  .imp-legende.legende { position: static; max-width: none; border: 0; background: none; padding: 4px 0 0; font-size: 9pt; flex-wrap: wrap; overflow: visible; white-space: normal; }
  .imp-texte .synthese, .imp-texte { padding: 0; }
  .imp-texte .syn-faits li { break-inside: avoid; }
  .imp-texte a { color: #000; }
  .imp-pied { margin-top: 10px; border-top: 1px solid #000; padding-top: 4px; font-size: 8.5pt; color: #333; }
}
.ctrl-satellite button { width: auto !important; padding: 0 10px; font: 500 12px var(--police); }
.ctrl-satellite button[aria-pressed="true"] { background: var(--encre); color: var(--papier); }
.pastille-forme { width: 12px; height: 12px; flex: none; }
.syn-histo { width: 100%; height: auto; display: block; }
.syn-histo .barre { fill: #85847f; }
.syn-histo .barre-courante { fill: #d03b3b; }
.syn-histo g:hover .barre { fill: var(--encre); }
.syn-histo .axe { stroke: var(--filet); stroke-width: 1; }
.syn-histo text { font: 10px var(--police-mono); fill: var(--encre-3); }
.syn-histo-total { margin: 2px 0 0; font: 11px var(--police-mono); color: var(--encre-3); }
.echelle-ins { display: inline-block; width: 64px; height: 9px; border: 1px solid var(--filet); background: linear-gradient(90deg, rgba(20,20,19,.08), rgba(20,20,19,.22) 25%, rgba(20,20,19,.45)); }
.echelle-bornes { font: 10px var(--police-mono); color: var(--encre-3); }