/* Où porter plainte — CSIRT-BFC
   Mise en page : panneau de recherche à gauche, carte à droite ; en colonne étroite : recherche, conseils, carte, liste.
   Parti pris : sobre, administratif, filets plutôt que cartes, angles presque droits.

   Tous les styles sont rattachés au bloc .carte-plainte pour que la carte puisse être posée telle quelle dans une
   page WordPress (code court [csirt_carte_plainte]) sans toucher au reste du site. La disposition suit la largeur
   du bloc (requêtes de conteneur), pas celle de l'écran.
     body.page-carte          page autonome /gendarmerie-police/ (bandeau, pleine fenêtre, thème sombre)
     .carte-plainte.integree  dans une page du site : hauteur fixe, bouton « Plein écran »
     .carte-plainte.compacte  dans une colonne : recherche + carte seulement
     .carte-plainte.plein-ecran  bloc intégré passé en plein écran : tout l'outil, sur toute la fenêtre */
.carte-plainte, body.page-carte {
  --fond: #ffffff;
  --fond-2: #f4f5f7;       /* zones secondaires */
  --texte: #1b1f24;
  --discret: #5d6570;
  --trait: #dcdfe4;
  --trait-fort: #1b1f24;
  --accent: #0b4f8a;       /* liens, bouton principal */
  --sur-accent: #ffffff;
  --gend: #1d4f7c;
  --pol: #a3231a;
  --ouvert: #17703c;
  --ferme: #8c4a0c;
  --police: "Public Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --r: 3px;
}
.carte-plainte {
  container-type: inline-size;
  font: 15px/1.5 var(--police); color: var(--texte); background: var(--fond); text-align: left;
}
/* Thème sombre : page autonome seulement (le site garde son thème clair). */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) body.page-carte, :root:not([data-theme="light"]) .page-carte .carte-plainte {
    --fond: #15181d; --fond-2: #1d2128; --texte: #e8eaed; --discret: #a0a8b3; --trait: #2e343d; --trait-fort: #e8eaed;
    --accent: #8cbcf0; --sur-accent: #15181d; --gend: #8db8e3; --pol: #f0928a; --ouvert: #79d39d; --ferme: #f0b46e; color-scheme: dark;
  }
}
:root[data-theme="dark"] body.page-carte, :root[data-theme="dark"] .page-carte .carte-plainte {
  --fond: #15181d; --fond-2: #1d2128; --texte: #e8eaed; --discret: #a0a8b3; --trait: #2e343d; --trait-fort: #e8eaed;
  --accent: #8cbcf0; --sur-accent: #15181d; --gend: #8db8e3; --pol: #f0928a; --ouvert: #79d39d; --ferme: #f0b46e; color-scheme: dark;
}

.carte-plainte, .carte-plainte *, .carte-plainte *::before, .carte-plainte *::after { box-sizing: border-box; }
.carte-plainte a { color: var(--accent); text-underline-offset: 2px; }
.carte-plainte button, .carte-plainte input, .carte-plainte select { font: inherit; color: inherit; letter-spacing: normal; text-transform: none; box-shadow: none; }
.carte-plainte :focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.carte-plainte h2 { font-family: var(--police); letter-spacing: normal; text-transform: none; }
.carte-plainte .sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.carte-plainte [hidden] { display: none !important; }

/* Page autonome : bandeau puis outil sur toute la hauteur de la fenêtre */
html:has(body.page-carte), body.page-carte { height: 100%; }
body.page-carte {
  margin: 0; font: 15px/1.5 var(--police); color: var(--texte); background: var(--fond);
  display: grid; grid-template-rows: auto 1fr;
}
body.page-carte.integre { grid-template-rows: 1fr; }
.page-carte .carte-plainte-page { min-height: 0; display: grid; }
.page-carte .carte-plainte { min-height: 0; }
.page-carte .carte-plainte .appli { height: 100%; }
.bandeau {
  background: var(--fond); border-bottom: 2px solid var(--trait-fort);
  padding: 12px max(16px, env(safe-area-inset-right, 0px)) 10px max(16px, env(safe-area-inset-left, 0px));
  display: flex; align-items: baseline; gap: 16px;
}
.bandeau h1 { font-size: 1.25rem; line-height: 1.2; margin: 0; font-weight: 700; }
.bandeau p { margin: 2px 0 0; color: var(--discret); font-size: .875rem; }
.bandeau .marque { margin-left: auto; font-weight: 600; font-size: .875rem; white-space: nowrap; color: var(--accent); }
@media (max-width: 820px) {
  html:has(body.page-carte), body.page-carte { height: auto; }
  body.page-carte { display: block; }
  .bandeau h1 { font-size: 1.125rem; }
  .bandeau p { font-size: .8rem; }
}

/* Disposition */
.carte-plainte .appli { display: grid; grid-template-columns: minmax(320px, 390px) 1fr; min-height: 0; }
.carte-plainte .panneau { overflow-y: auto; border-right: 1px solid var(--trait); padding: 16px; display: flex; flex-direction: column; gap: 20px; min-width: 0; }
.carte-plainte #carte { min-height: 0; height: 100%; background: #e5e3df; }

@container (max-width: 820px) {
  .carte-plainte .appli { display: flex; flex-direction: column; gap: 16px; padding-block: 16px;
    padding-left: max(16px, env(safe-area-inset-left, 0px)); padding-right: max(16px, env(safe-area-inset-right, 0px)); }
  .page-carte .carte-plainte .appli { height: auto; }
  .carte-plainte .panneau { display: contents; }
  .carte-plainte .recherche { order: 1; }
  .carte-plainte .avant { order: 2; }
  .carte-plainte #carte { order: 3; height: 52vh; height: 52svh; border: 1px solid var(--trait); }
  .carte-plainte .liste-bloc { order: 4; }
  .carte-plainte .pied { order: 5; }
  .carte-plainte .champ input, .carte-plainte .ligne select { font-size: 16px; } /* pas de zoom automatique sur iOS */
}

/* Bloc « sans vous déplacer » */
.carte-plainte .avant { border-top: 1px solid var(--trait); border-bottom: 1px solid var(--trait); margin: 0; }
.carte-plainte .avant summary { cursor: pointer; padding: 10px 0; font-weight: 700; list-style: none; display: flex; gap: 12px; align-items: baseline; }
.carte-plainte .avant summary::-webkit-details-marker { display: none; }
.carte-plainte .avant summary::after { content: "Afficher"; margin-left: auto; font-weight: 600; font-size: .8rem; color: var(--accent); white-space: nowrap; }
.carte-plainte .avant[open] summary::after { content: "Masquer"; }
.carte-plainte .avant summary small { display: block; font-weight: 400; color: var(--discret); font-size: .875em; }
.carte-plainte .avant .contenu { padding: 0 0 14px; display: flex; flex-direction: column; gap: 10px; }
.carte-plainte .avant h2 { font-size: .8rem; font-weight: 700; color: var(--discret); margin: 6px 0 0; line-height: 1.4; }
.carte-plainte .avant ul { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 8px; }
.carte-plainte .avant li { margin: 0; }
.carte-plainte .avant li a { font-weight: 600; }
.carte-plainte .avant li span { display: block; color: var(--discret); font-size: .875rem; }
.carte-plainte .avant ol { margin: 0; padding-left: 20px; display: flex; flex-direction: column; gap: 3px; font-size: .9rem; }
.carte-plainte .urgence { margin: 0; font-size: .9rem; }
.carte-plainte .urgence b { font-variant-numeric: tabular-nums; }

/* Recherche */
.carte-plainte .recherche { display: flex; flex-direction: column; gap: 10px; margin: 0; }
.carte-plainte .recherche label[for="q"] { font-weight: 700; margin: 0; }
.carte-plainte .champ { display: flex; }
.carte-plainte .champ input { flex: 1; min-width: 0; margin: 0; padding: 9px 10px; border: 1px solid var(--discret); border-right: 0; border-radius: var(--r) 0 0 var(--r); background: var(--fond); height: auto; line-height: 1.5; }
.carte-plainte .btn { border: 1px solid var(--accent); border-radius: var(--r); padding: 9px 14px; margin: 0; font-weight: 600; line-height: 1.5; cursor: pointer; background: var(--accent); color: var(--sur-accent); white-space: nowrap; }
.carte-plainte .champ .btn { border-radius: 0 var(--r) var(--r) 0; }
.carte-plainte .btn.second { background: var(--fond); color: var(--accent); }
.carte-plainte .btn:hover, .carte-plainte .btn:focus { text-decoration: underline; background: var(--accent); color: var(--sur-accent); }
.carte-plainte .btn.second:hover, .carte-plainte .btn.second:focus { background: var(--fond-2); color: var(--accent); }
.carte-plainte .ligne { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.carte-plainte .ligne select { padding: 8px 8px; margin: 0; border: 1px solid var(--discret); border-radius: var(--r); background-color: var(--fond); flex: 1 1 11rem; min-width: 0; height: auto; }

.carte-plainte .filtres { display: flex; gap: 6px 18px; flex-wrap: wrap; border: 0; margin: 0; padding: 0; font-size: .9rem; min-width: 0; }
.carte-plainte .filtres label { display: inline-flex; align-items: center; gap: 6px; cursor: pointer; margin: 0; font-weight: 400; }
.carte-plainte .filtres input { width: 16px; height: 16px; margin: 0; accent-color: var(--accent); }
.carte-plainte .filtres .n { color: var(--discret); font-variant-numeric: tabular-nums; }

.carte-plainte .etat { font-size: .875rem; color: var(--discret); min-height: 1.3em; margin: 0; }
.carte-plainte .etat.erreur { color: var(--pol); }

/* Liste */
.carte-plainte .liste-titre { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; padding-bottom: 6px; border-bottom: 2px solid var(--trait-fort); }
.carte-plainte .liste-titre h2 { font-size: 1rem; line-height: 1.4; margin: 0; color: var(--texte); }
.carte-plainte .liste-titre span { font-size: .8rem; color: var(--discret); font-variant-numeric: tabular-nums; }
.carte-plainte #liste { list-style: none; margin: 0; padding: 0; }
.carte-plainte #liste li { border-bottom: 1px solid var(--trait); margin: 0; }
.carte-plainte #liste button { width: 100%; text-align: left; background: none; border: 0; border-radius: 0; padding: 10px 4px; margin: 0; cursor: pointer; color: var(--texte); font-weight: 400; line-height: 1.5;
  display: grid; grid-template-columns: 26px 1fr auto; gap: 1px 10px; align-items: start; }
.carte-plainte #liste button:hover { background: var(--fond-2); }
.carte-plainte #liste button:hover .nom { text-decoration: underline; }
.carte-plainte #liste .nom { font-weight: 600; grid-column: 2; min-width: 0; overflow-wrap: anywhere; }
.carte-plainte #liste .adr { grid-column: 2; font-size: .85rem; color: var(--discret); overflow-wrap: anywhere; }
.carte-plainte #liste .meta { grid-column: 2 / 4; display: flex; gap: 12px; align-items: baseline; flex-wrap: wrap; font-size: .8rem; }
.carte-plainte #liste .dist { grid-column: 3; grid-row: 1; font-size: .85rem; font-variant-numeric: tabular-nums; color: var(--discret); white-space: nowrap; }
.carte-plainte #liste .pastille { grid-row: 1 / 3; margin-top: 3px; }
.carte-plainte .vide { color: var(--discret); font-size: .9rem; padding: 10px 0; border-bottom: 0 !important; }

/* Statut : texte coloré, pas de badge */
.carte-plainte .badge { font-weight: 600; font-size: .8rem; }
.carte-plainte .badge.ouvert { color: var(--ouvert); }
.carte-plainte .badge.ferme { color: var(--ferme); }
.carte-plainte .badge.inconnu { color: var(--discret); font-weight: 400; }
.carte-plainte .type { font-size: .8rem; font-weight: 600; }
.carte-plainte .type.g { color: var(--gend); } .carte-plainte .type.p { color: var(--pol); }

.carte-plainte .pied { font-size: .8rem; color: var(--discret); border-top: 1px solid var(--trait); padding-top: 12px; margin-top: auto; }
.carte-plainte .pied p { margin: 0 0 4px; }

/* Marqueurs : la forme et la lettre distinguent les deux services, pas seulement la couleur */
.carte-plainte .pastille { width: 26px; height: 26px; display: grid; place-items: center; color: #fff; font: 700 12px/1 var(--police); border: 1.5px solid #fff; box-shadow: 0 0 0 1px rgb(0 0 0 / .35); }
.carte-plainte .pastille.g { background: #1d4f7c; border-radius: 50%; }
.carte-plainte .pastille.p { background: #a3231a; border-radius: 2px; }
.carte-plainte .pastille.ferme { opacity: .7; }
.carte-plainte .leaflet-div-icon.marqueur { background: none; border: 0; }
.carte-plainte .moi { width: 16px; height: 16px; border-radius: 50%; background: #0b4f8a; border: 3px solid #fff; box-shadow: 0 0 0 1px rgb(0 0 0 / .4); }

/* Grappes (styles minimaux de Leaflet.markercluster, intégrés pour respecter la CSP) */
.carte-plainte .leaflet-cluster-anim .leaflet-marker-icon, .carte-plainte .leaflet-cluster-anim .leaflet-marker-shadow { transition: transform .3s ease-out, opacity .3s ease-in; }
.carte-plainte .grappe { background: none; border: 0; }
.carte-plainte .grappe div { width: 100%; height: 100%; border-radius: 50%; display: grid; place-items: center; color: #1b1f24; font: 700 12px/1 var(--police);
  background: #fff; border: 2px solid #1b1f24; font-variant-numeric: tabular-nums; }

/* Fiches (popups) : toujours sur fond clair, comme la carte */
.carte-plainte .leaflet-popup-content-wrapper { border-radius: var(--r); box-shadow: 0 2px 10px rgb(0 0 0 / .25); }
.carte-plainte .leaflet-popup-content { margin: 12px 14px; font: 14px/1.45 var(--police); color: #1b1f24; }
.carte-plainte .leaflet-popup-content p { margin: 0 0 4px; }
.carte-plainte .fiche h3 { font: 700 1rem/1.25 var(--police); margin: 2px 0 2px; color: #1b1f24; letter-spacing: normal; text-transform: none; }
.carte-plainte .fiche .type.g { color: #1d4f7c; } .carte-plainte .fiche .type.p { color: #a3231a; }
.carte-plainte .fiche .adr { margin: 0 0 6px; color: #5d6570; }
.carte-plainte .fiche .tel { font-size: 1.05rem; font-weight: 700; font-variant-numeric: tabular-nums; margin: 0 0 4px; }
.carte-plainte .fiche .tel a { color: inherit; }
.carte-plainte .fiche .badge.ouvert { color: #17703c; } .carte-plainte .fiche .badge.ferme { color: #8c4a0c; } .carte-plainte .fiche .badge.inconnu { color: #5d6570; }
.carte-plainte .fiche table { border-collapse: collapse; width: 100%; font-size: .8rem; font-variant-numeric: tabular-nums; margin: 6px 0 10px; border: 0; border-top: 1px solid #dcdfe4; }
.carte-plainte .fiche td { padding: 3px 0; vertical-align: top; border: 0; border-bottom: 1px solid #eceef1; background: none; }
.carte-plainte .fiche td:first-child { color: #5d6570; padding-right: 10px; width: 5.5em; }
.carte-plainte .fiche td + td { white-space: nowrap; }
.carte-plainte .fiche tr.auj td { font-weight: 700; color: #1b1f24; }
.carte-plainte .fiche .note { font-size: .8rem; color: #5d6570; margin: 6px 0 10px; }
.carte-plainte .fiche .actions { display: flex; gap: 6px 14px; flex-wrap: wrap; align-items: center; font-size: .875rem; }
.carte-plainte .fiche .actions a { font-weight: 600; color: #0b4f8a; }
.carte-plainte .fiche .actions a.princ { background: #0b4f8a; color: #fff; text-decoration: none; padding: 5px 10px; border-radius: var(--r); }

@media (prefers-reduced-motion: reduce) { .carte-plainte * { transition: none !important; animation: none !important; } }

/* Dans une page du site : bloc encadré de hauteur fixe. */
.carte-plainte.integree { border: 1px solid var(--trait); margin: 0 0 1.5rem; }
.carte-plainte.integree .appli { height: min(85vh, 760px); }
@container (max-width: 820px) {
  .carte-plainte.integree .appli { height: auto; padding-inline: 12px; }
}

/* Version compacte (colonne d'une page du site) : recherche en haut, carte en dessous ; le reste revient en plein écran. */
.carte-plainte.compacte:not(.plein-ecran) { border: 0; background: transparent; }
.carte-plainte.compacte:not(.plein-ecran) .appli { display: flex; flex-direction: column; height: auto; gap: 10px; padding: 0; }
.carte-plainte.compacte:not(.plein-ecran) .panneau { display: contents; }
.carte-plainte.compacte:not(.plein-ecran) :is(.avant, .liste-bloc, .pied) { display: none; }
.carte-plainte.compacte:not(.plein-ecran) .recherche { order: 1; }
.carte-plainte.compacte:not(.plein-ecran) #carte { order: 2; flex: none; height: 30rem; border: 1px solid var(--trait); }

/* Plein écran : API du navigateur (:fullscreen) ou, à défaut, bloc fixé sur toute la fenêtre. */
html.carte-plein-ecran, html.carte-plein-ecran body { overflow: hidden; }
.carte-plainte.plein-ecran { position: fixed; inset: 0; z-index: 100000; margin: 0; border: 0; overflow-y: auto; overscroll-behavior: contain; }
.carte-plainte.plein-ecran .appli { height: 100%; }
.carte-plainte.plein-ecran:fullscreen { background: var(--fond); }
@container (max-width: 820px) {
  .carte-plainte.plein-ecran .appli { height: auto; }
}