/* Sur la page Cartographie, la navigation constitue le seul bandeau au-dessus de la carte : vert institutionnel permanent, marque jaune et liens blancs. Cette classe dédiée évite de modifier l'en-tête des autres pages publiques. */ .entete-public--carte { background:var(--color-ocean-900,#146c53); } .entete-public--carte .entete-public__barre { border-bottom-color:rgb(255 255 255 / .16); } .entete-public--carte .entete-public__marque strong { color:var(--color-sun-500,#facc15); } @media (min-width:80rem) { .entete-public--carte [data-nav] > a { color:#fff; } } /* Ni isolation:isolate ni z-index ici : l'un ou l'autre créerait un contexte d'empilement qui piégerait tout le contenu de .carte-scene — y compris les overlays position:fixed (masque, recherche, détails) — sous le header sticky global (z-50, core/base.html) dès qu'ils se chevauchent (le panneau détails ancré à droite en plein hauteur d'écran, sur tablette/écran large, chevauche justement le header). Sans contexte d'empilement propre à la section, leurs z-index (2900/3000, ci-dessous) se comparent directement au header dans la pile racine et l'emportent, comme attendu pour de vrais overlays. Pas d'overflow:hidden non plus : un ancêtre avec overflow autre que visible casse position:sticky sur le panneau détails (ci-dessous) — .carte-map-wrap a son propre overflow:hidden qui suffit à contenir la carte/le masque, la section elle-même n'a rien d'autre à couper. */ .carte-scene { position:relative; width:100%; background:#dce5e7; } .carte-map-wrap { position:relative; z-index:0; width:100%; height:62vh; min-height:420px; max-height:560px; overflow:hidden; background:#dce5e7; } .carte-map-wrap .leaflet-container { position:relative; z-index:0; } #carte { width:100%; height:100%; background:#dce5e7; } #carte .leaflet-tile-pane { filter:saturate(.78) contrast(.96) brightness(1.03); } #carte .leaflet-control-attribution { max-width:82%; background:rgb(255 255 255 / .88); font-size:9px; line-height:1.25; white-space:normal; } /* Noir plus opaque (.82 au lieu de .68) et fond totalement désaturé/assombri sous le flou (saturate(0) brightness(.55), au lieu de saturate(.4)) : à .68 d'opacité, les tuiles bleutées de la carte transparaissaient encore assez pour lire « bleu » plutôt que « sombre ». */ /* cursor:pointer : signale que cliquer sur le voile quitte le mode SpotLight (voir l'écouteur 'click' sur ce calque dans mettreAJourSpotlight, carte.js). */ .carte-masque-spotlight { fill:rgb(0 0 0 / .82); fill-opacity:1; fill-rule:evenodd; stroke:none; cursor:pointer; backdrop-filter:blur(4px) saturate(0) brightness(.55); -webkit-backdrop-filter:blur(4px) saturate(0) brightness(.55); } .carte-statut { position:absolute; inset:0; z-index:900; display:grid; place-items:center; padding:2rem; background:#e8eef4; color:#475569; text-align:center; } .carte-statut[hidden] { display:none; } /* En haut à gauche : le panneau filtres+légende occupe désormais le bas de la même colonne (cf. .carte-panneaux-gauche plus bas), et la droite reste condamnée par le panneau détails figé (tablette/écran large) — ce bouton n'a donc que ce coin de libre. Décalé sous le contrôle de zoom natif de Leaflet (.leaflet-control-zoom, deux boutons empilés en haut à gauche par défaut, non stylé ici) plutôt qu'à la même hauteur — sans ce décalage les deux se superposent, le contrôle de zoom pouvant atteindre ~61px de haut en mode tactile (boutons 30px) contre ~53px en pointeur (26px), plus 10px de marge Leaflet avant lui. */ /* Fond jaune (#facc15, la teinte « sun » utilisée comme accent du site — voir .carte-details/border-top plus bas, même valeur) plutôt que blanc ; texte foncé pour rester lisible dessus (le vert #146c53 d'origine manquait de contraste sur ce fond clair). */ .carte-plein-ecran { position:absolute; z-index:800; top:4.9rem; left:.65rem; min-height:2.5rem; border:1px solid #ca8a04; border-radius:.375rem; background:#facc15; padding:.4rem .75rem; color:#132a30; font-size:.75rem; font-weight:800; cursor:pointer; } .carte-menu { position:relative; } .carte-menu-bouton { display:inline-flex; min-height:2.75rem; align-items:center; gap:.45rem; border:1px solid var(--color-border,#d5dde4); border-radius:.375rem; background:#fff; padding:.55rem .9rem; color:#146c53; font-size:.85rem; font-weight:700; cursor:pointer; } .carte-menu-bouton:hover { border-color:#146c53; } .carte-menu-chevron { width:1rem; height:1rem; transition:transform .15s ease; } .carte-menu-bouton[aria-expanded="true"] .carte-menu-chevron { transform:rotate(180deg); } /* Le panneau filtres est ancré en bas de la carte (au-dessus de la légende) : le menu s'ouvre donc vers le haut (bottom, pas top) pour rester au-dessus du bloc légende plutôt que de le recouvrir en s'étalant vers le bas. */ .carte-menu-liste { position:absolute; z-index:1200; bottom:calc(100% + .4rem); left:0; display:grid; gap:.15rem; min-width:15.5rem; border-radius:.5rem; background:#fff; padding:.6rem; box-shadow:0 16px 40px rgb(15 23 42 / .18); } .carte-menu-liste[hidden] { display:none; } .carte-menu-option { display:flex; align-items:center; gap:.6rem; border-radius:.35rem; padding:.5rem .55rem; color:#233933; font-size:.85rem; font-weight:600; cursor:pointer; } .carte-menu-option:hover { background:#e8eef4; } .carte-menu-option input { width:1.05rem; height:1.05rem; accent-color:#146c53; } /* Panneaux flottants à gauche de la carte (filtres au-dessus de la légende), fond transparent, ancrés en bas, ne bougent pas au pan/zoom. `left` aligné sur celui de .carte-plein-ecran (même colonne, partant du même bord gauche) à chaque point de rupture — voir aussi les overrides tablette/mobile ci-dessous. */ .carte-panneaux-gauche { position:absolute; z-index:15; left:.65rem; bottom:1rem; display:flex; flex-direction:column; gap:.75rem; max-width:14rem; } /* Fond gris translucide (teinte neutre reprise de #5b6b74, déjà utilisé pour le texte secondaire ailleurs dans cette feuille) plutôt que blanc, vert ou doré. */ .carte-panneau-carte { border-radius:.5rem; background:rgb(91 107 116 / .45); backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px); padding:.9rem 1rem; } .carte-panneau-titre { margin:0 0 .55rem; color:#146c53; font-size:.68rem; font-weight:800; letter-spacing:.08em; text-transform:uppercase; } .carte-filtres-fixe { display:grid; gap:.5rem; } .carte-filtres-fixe .carte-menu-bouton { width:100%; justify-content:space-between; } .carte-legende-fixe ul { display:grid; gap:.15rem; margin:0; padding:0; list-style:none; } .carte-legende-fixe li { display:flex; } /* Chaque ligne de légende EST la case de filtre correspondante (checkbox + symbole + libellé cliquables ensemble) — la légende n'est plus un simple rappel visuel mais le même contrôle que les menus « Filtres » ci-dessus (accent-color/tailles alignés sur .carte-menu-option). La limite nationale n'y figure plus (case verrouillée retirée pour gagner de la place) ; le contour reste dessiné sur la carte (groupeNational, voir carte.js), simplement non filtrable/non listé ici. */ .carte-legende-item { display:flex; align-items:center; gap:.55rem; border-radius:.35rem; padding:.3rem .35rem; color:#233933; font-size:.76rem; font-weight:650; cursor:pointer; } .carte-legende-item:hover { background:rgb(255 255 255 / .55); } .carte-legende-item input[type="checkbox"] { width:1.05rem; height:1.05rem; flex:0 0 auto; accent-color:#146c53; } /* Symboles partagés entre la légende (carte-legende-fixe) et les tuiles de statistiques (carte-stats, voir carteStat() dans carte.js) : mêmes classes de forme réutilisées aux deux endroits, pour qu'une statistique porte visuellement le même repère que sa ligne de légende (ex. le triangle des zones vulnérables), pas une simple pastille de couleur. */ .carte-symbole { display:inline-block; flex:0 0 auto; } .carte-symbole.espece { width:.7rem; height:.7rem; border:2px solid #fff; border-radius:50%; background:#3f7046; box-shadow:0 0 0 1px #3f7046; } /* Techniques d'adaptation : étoile (marron), pour ne pas se confondre avec la ligne marron des limites régionales malgré la couleur partagée. clip-path ignore la bordure : icône pleine, sans contour, comme la zone-vulnérable/triangle ci-dessous. */ .carte-symbole.technique { width:.85rem; height:.85rem; background:#a52a2a; clip-path:polygon(50% 0%,61% 35%,98% 35%,68% 57%,79% 91%,50% 70%,21% 91%,32% 57%,2% 35%,39% 35%); } /* Limites régionale/préfectorale : même symbole « ligne », deux couleurs distinctes (marron/jaune) reprenant celles des calques de contour dessinés sur la carte (voir carte.js : groupeRegions/groupePrefectures). */ .carte-symbole.limite { width:1.15rem; height:0; border-top:3px solid; border-radius:2px; } .carte-symbole.limite.regional { border-color:#8a4b1f; } .carte-symbole.limite.prefectoral { border-color:#ca8a04; } .carte-symbole.zone-vulnerable { width:.9rem; height:.8rem; background:rgb(217 119 6 / .55); clip-path:polygon(50% 0%,0% 100%,100% 100%); } .carte-symbole.zone-reussite { width:.8rem; height:.8rem; border:1px solid #15803d; background:rgb(22 163 74 / .4); } .carte-modal-fond { position:fixed; inset:0; z-index:2900; background:rgb(15 23 42 / .48); backdrop-filter:blur(5px); -webkit-backdrop-filter:blur(5px); } .carte-modal-fond[hidden] { display:none; } .carte-details { position:fixed; z-index:3000; top:50%; left:50%; width:min(calc(100vw - 2rem),46rem); max-height:min(78vh,46rem); overflow-x:hidden; overflow-y:auto; transform:translate(-50%,-50%); border-top:4px solid #facc15; border-radius:.5rem; background:#fff; padding:1.25rem; box-shadow:0 24px 70px rgb(15 23 42 / .3); scrollbar-gutter:stable; } .carte-details[hidden] { display:none; } .carte-modal-entete { position:sticky; top:-1.25rem; z-index:2; display:flex; align-items:center; justify-content:space-between; gap:1rem; margin:-1.25rem -1.25rem 1.25rem; border-bottom:1px solid #e5e9ec; background:#fff; padding:1.15rem 1.25rem; } .carte-modal-entete p { letter-spacing:.1em; } .carte-modal-entete h2 { letter-spacing:-.01em; } /* Recherche : menu déroulant en tête du panneau détails, avant le titre « Vue d'ensemble »/ l'entête (carte-modal-entete ci-dessous) — jamais effacé quand le contenu change (stats ↔ fiche), donc toujours accessible, qu'un élément soit sélectionné ou non. Réutilise le mécanisme générique data-menu/data-menu-bouton/data-menu-liste (ouverture/fermeture, fermeture au clic extérieur ou Échap) déjà utilisé par les filtres de la carte, mais avec un contenu déroulé en flux normal (pas position:absolute) puisqu'il vit dans un panneau étroit, pas flottant au-dessus de la carte. margin-bottom:1.25rem == l'opposé exact du margin-top négatif de carte-modal-entete (ci-dessous) : leur collision se neutralise à zéro, l'entête reste flush juste en dessous sans jamais chevaucher ce bloc, qu'il soit ouvert ou fermé. */ .carte-details-recherche-menu { margin:0 0 1.25rem; padding-bottom:1rem; border-bottom:1px solid #eef1f3; } .carte-details-recherche-bouton { width:100%; justify-content:space-between; } .carte-details-recherche { margin-top:.6rem; border-radius:.5rem; background:#f4f6f7; padding:.9rem 1rem 1rem; } .carte-details-recherche[hidden] { display:none; } .carte-resultats { display:grid; gap:.25rem; max-height:14rem; overflow-y:auto; margin:0; padding:0; } .carte-resultats[hidden] { display:none; } .carte-resultats button,.carte-resultats a { display:block; width:100%; border:0; border-radius:.4rem; background:#fff; padding:.65rem .75rem; color:#233933; text-align:left; text-decoration:none; cursor:pointer; } .carte-resultats button:hover,.carte-resultats a:hover,.carte-resultats button:focus,.carte-resultats a:focus { background:#eef2f5; } .carte-details-close { display:grid; place-items:center; width:2.1rem; height:2.1rem; border:1px solid #dde3e7; border-radius:50%; background:#fff; color:#5b6b74; transition:border-color .15s ease,color .15s ease; cursor:pointer; } .carte-details-close:hover { border-color:#146c53; color:#146c53; } .carte-details-close[hidden] { display:none; } .carte-details-content { color:#233933; } .carte-details-content h3 { margin-top:1.15rem; color:#132a30; font-size:1.2rem; font-weight:800; line-height:1.3; letter-spacing:-.01em; } .carte-details-content p { margin-top:.55rem; color:#40545b; font-size:.9rem; line-height:1.65; } .carte-details-content .carte-details-extrait { margin-top:1.15rem; color:#334b50; font-size:.9rem; line-height:1.7; text-align:left; } .carte-details-content .carte-details-extrait > :first-child, .carte-details-content .carte-details-module > div > :first-child { margin-top:0; } .carte-details-content .carte-details-extrait > :last-child, .carte-details-content .carte-details-module > div > :last-child { margin-bottom:0; } /* extrait (ci-dessus) et les sections .carte-details-module (texte_html, voir carte.js afficherDetails()) sont tous deux du HTML CKEditor5 sanitizé injecté via `.innerHTML` : sans cette redéclaration, leurs