/* Carte publique : écran 1, repris de ecran-01-carte-publique.html.
   Toutes les valeurs viennent de jetons.css et de jetons-complements.css. */
*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%}
body{min-width:var(--largeur-min-page);background:var(--couleur-fond);color:var(--couleur-texte);font-family:var(--police-ui);font-size:var(--taille-14);line-height:var(--interligne-normal);overflow:hidden;-webkit-font-smoothing:antialiased}
a{color:var(--couleur-accent)}a:hover{color:var(--couleur-accent-survol)}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
button:focus-visible,input:focus-visible,a:focus-visible,[tabindex]:focus-visible{outline:var(--bordure-focus) solid var(--couleur-focus);outline-offset:2px}
.visuellement-cache{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.evitement{position:absolute;z-index:100;left:var(--espace-4);top:var(--espace-2);padding:var(--espace-2) var(--espace-4);background:var(--couleur-surface);border-radius:var(--rayon-s);box-shadow:var(--ombre-2);transform:translateY(-200%)}
.evitement:focus{transform:none}

.ecran{position:fixed;inset:0;overflow:hidden;background:var(--couleur-fond)}

/* ---------- En-tête (bureau et tablette) ---------- */
.entete{position:absolute;z-index:50;inset:0 0 auto 0;height:var(--hauteur-entete);display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);align-items:center;gap:var(--espace-4);padding:0 var(--espace-6);background:var(--couleur-surface);border-bottom:var(--bordure-fine) solid var(--couleur-bordure)}
.marque{display:flex;align-items:center;gap:var(--espace-3);min-width:0;color:inherit;text-decoration:none}
.marque img{height:var(--hauteur-logo-entete);width:auto;display:block}
.marque .titre{font-family:var(--police-titre);font-size:var(--taille-18);font-weight:var(--graisse-demi);letter-spacing:-.005em;white-space:nowrap;line-height:var(--interligne-serre)}
.actions{display:flex;justify-content:flex-end;align-items:center;gap:var(--espace-3);min-width:0}
.lien-discret{font-size:var(--taille-13);color:var(--couleur-texte-2);padding:0 var(--espace-2);height:var(--hauteur-lien);display:inline-flex;align-items:center;border-radius:var(--rayon-s);white-space:nowrap}
.lien-discret:hover{color:var(--couleur-texte);background:var(--couleur-surface-2)}

/* Onglets de découpage */
.onglets{display:inline-flex;background:var(--couleur-surface-2);border-radius:var(--rayon-plein);padding:var(--onglets-marge-interne);gap:var(--onglets-ecart)}
.onglet{height:var(--hauteur-onglet);min-width:var(--largeur-min-onglet);padding:0 var(--espace-5);border-radius:var(--rayon-plein);font-size:var(--taille-14);font-weight:var(--graisse-moyen);color:var(--couleur-texte-2);transition:background var(--duree-normale) var(--courbe),color var(--duree-normale) var(--courbe)}
.onglet:hover{color:var(--couleur-texte)}
.onglet[aria-selected="true"]{background:var(--couleur-surface);color:var(--couleur-texte);box-shadow:var(--ombre-1);font-weight:var(--graisse-demi)}

/* Champ Trouver mes élus */
.recherche{position:relative;display:flex;align-items:center;height:var(--hauteur-recherche);width:var(--largeur-recherche);max-width:100%;background:var(--couleur-surface-2);border:var(--bordure-fine) solid transparent;border-radius:var(--rayon-plein);padding:0 var(--espace-3) 0 var(--espace-4);gap:var(--espace-2);transition:border-color var(--duree-normale),background var(--duree-normale)}
.recherche:hover{border-color:var(--couleur-bordure-forte)}
.recherche:focus-within{background:var(--couleur-surface);border-color:var(--couleur-accent);box-shadow:0 0 0 var(--bordure-focus) var(--couleur-accent-doux)}
.recherche svg{flex:none;width:var(--taille-icone);height:var(--taille-icone);color:var(--couleur-texte-3)}
.recherche input{flex:1;min-width:0;background:none;border:0;font:inherit;font-size:var(--taille-14);color:var(--couleur-texte);outline:none}
.recherche input::placeholder{color:var(--couleur-texte-3)}
.recherche input::-webkit-search-cancel-button{display:none}
.recherche kbd{font:inherit;font-size:var(--taille-11);color:var(--couleur-texte-3);border:var(--bordure-fine) solid var(--couleur-bordure);border-radius:var(--rayon-xs);padding:var(--kbd-marge);background:var(--couleur-surface)}

/* ---------- Carte ---------- */
.carte{z-index:1;position:absolute;inset:var(--hauteur-entete) 0 0 0;background:var(--carte-eau)}
.carte .fond{position:absolute;inset:0}
.carte .maplibregl-canvas{outline:none}
.carte .maplibregl-canvas:focus-visible{outline:var(--bordure-focus) solid var(--couleur-focus);outline-offset:-3px}
.carte .maplibregl-ctrl-attrib{display:none}

/* Infobulle */
.infobulle{position:absolute;z-index:60;left:0;top:0;pointer-events:none;background:var(--couleur-surface-elevee);color:var(--couleur-texte);border:var(--bordure-fine) solid var(--couleur-bordure);border-radius:var(--rayon-m);box-shadow:var(--ombre-2);padding:var(--espace-3) var(--espace-4);min-width:var(--largeur-min-infobulle);max-width:var(--largeur-max-infobulle);opacity:0;transform:translateY(var(--espace-1));transition:opacity var(--duree-rapide),transform var(--duree-rapide)}
.infobulle.visible{opacity:1;transform:none}
.infobulle .t{font-size:var(--taille-11);color:var(--couleur-texte-3);text-transform:uppercase;letter-spacing:.06em;margin-bottom:var(--espace-1);line-height:var(--interligne-serre)}
.infobulle .n{font-weight:var(--graisse-demi);font-size:var(--taille-15);line-height:var(--interligne-serre)}
.infobulle .e{margin-top:var(--espace-2);display:flex;align-items:center;gap:var(--espace-2);font-size:var(--taille-13)}
.infobulle .p{width:var(--taille-pastille-infobulle);height:var(--taille-pastille-infobulle);border-radius:var(--rayon-pastille-petite);flex:none}

/* Panneaux de verre */
.verre{background:var(--verre-fond);backdrop-filter:blur(var(--verre-flou));-webkit-backdrop-filter:blur(var(--verre-flou));border:var(--bordure-fine) solid var(--verre-bordure);box-shadow:var(--ombre-2)}

/* Légende */
.legende{position:absolute;left:var(--espace-6);bottom:var(--espace-6);z-index:40;border-radius:var(--rayon-l);padding:var(--espace-4) var(--espace-5);min-width:var(--largeur-min-legende)}
.legende h2{font-size:var(--taille-12);font-weight:var(--graisse-demi);letter-spacing:.06em;text-transform:uppercase;color:var(--couleur-texte-2);margin-bottom:var(--espace-3);display:flex;justify-content:space-between;align-items:center;gap:var(--espace-3)}
.legende .version{font-weight:var(--graisse-moyen);letter-spacing:0;text-transform:none;font-size:var(--taille-12);color:var(--couleur-accent);background:var(--couleur-accent-doux);border-radius:var(--rayon-plein);padding:var(--marge-etiquette) var(--espace-2)}
.legende ul{list-style:none;display:grid;gap:var(--espace-2)}
.legende li{display:flex;align-items:center;gap:var(--espace-3);font-size:var(--taille-13);color:var(--couleur-texte)}
.legende .n{margin-left:auto;color:var(--couleur-texte-3);font-variant-numeric:tabular-nums;font-size:var(--taille-12)}
.legende .sep{height:var(--bordure-fine);background:var(--couleur-bordure);margin:var(--espace-1) 0}
.pastille{width:var(--taille-pastille);height:var(--taille-pastille);border-radius:var(--rayon-pastille);flex:none;border:var(--bordure-fine) solid var(--pastille-bordure)}
.pastille.hachure{background:repeating-linear-gradient(135deg,var(--carte-hachure) 0 var(--hachure-trait),var(--couleur-surface) var(--hachure-trait) var(--hachure-pas))}
.squelette{display:block;height:var(--taille-14);border-radius:var(--rayon-xs);background:linear-gradient(90deg,var(--squelette-a),var(--squelette-b),var(--squelette-a));background-size:200% 100%;animation:miroiter var(--duree-squelette) linear infinite}
@keyframes miroiter{from{background-position:200% 0}to{background-position:-200% 0}}

/* Contrôles de zoom */
.zoom{position:absolute;right:var(--espace-6);bottom:var(--espace-6);z-index:40;display:flex;flex-direction:column;border-radius:var(--rayon-m);overflow:hidden}
.zoom button{width:var(--cible-tactile);height:var(--cible-tactile);display:grid;place-items:center;color:var(--couleur-texte);border-bottom:var(--bordure-fine) solid var(--couleur-bordure)}
.zoom button:last-child{border-bottom:0}
.zoom button:hover{background:var(--couleur-surface-2)}
.zoom button:active{background:var(--couleur-accent-doux)}
.zoom button:focus-visible{outline-offset:-3px}
.zoom svg{width:var(--taille-icone-controle);height:var(--taille-icone-controle)}
.mention{position:absolute;right:calc(var(--espace-6) + var(--cible-tactile) + var(--espace-3));bottom:var(--espace-6);font-size:var(--taille-11);color:var(--couleur-texte-3);z-index:40;line-height:var(--interligne-normal)}
.mention a{color:inherit}

/* Message d'état (chargement impossible, hors ligne) */
.alerte{position:absolute;z-index:45;left:50%;top:calc(var(--hauteur-entete) + var(--espace-4));transform:translateX(-50%);display:flex;align-items:center;gap:var(--espace-3);border-radius:var(--rayon-m);padding:var(--espace-3) var(--espace-4);font-size:var(--taille-13);max-width:calc(100% - var(--espace-8))}
.alerte[hidden]{display:none}
.alerte button{color:var(--couleur-accent);font-weight:var(--graisse-demi);min-height:var(--cible-tactile);padding:0 var(--espace-2)}

/* Éléments propres au mobile, masqués par défaut */
.entete-m,.pouce{display:none}

/* ---------- Tablette (640 à 1023) ---------- */
@media (max-width:1023px){
  .marque .titre{display:none}
  .onglet{min-width:0}
  .recherche kbd{display:none}
  .actions .recherche{width:auto;flex:1}
  .mention{max-width:calc(100% - var(--largeur-min-legende) - var(--espace-6) * 3 - var(--cible-tactile) - var(--espace-3))}
}

/* ---------- Mobile (< 640) ---------- */
@media (max-width:639px){
  .entete,.legende{display:none}
  .carte{inset:0}
  .entete-m{display:flex;position:absolute;inset:0 0 auto 0;z-index:50;padding:calc(env(safe-area-inset-top) + var(--espace-3)) var(--espace-4) var(--espace-3);flex-direction:column;gap:var(--espace-3);background:linear-gradient(var(--couleur-fond) 60%,transparent);pointer-events:none}
  .entete-m>*{pointer-events:auto}
  .entete-m .marque .titre{display:block;font-size:var(--taille-16)}
  .entete-m .marque img{height:var(--hauteur-logo-entete-mobile)}
  .entete-m .onglets{width:100%;display:flex;box-shadow:var(--ombre-1)}
  .entete-m .onglet{flex:1;min-width:0;height:var(--cible-tactile);padding:0}
  .pouce{display:flex;position:absolute;left:0;right:0;bottom:0;z-index:50;padding:0 var(--espace-4) calc(env(safe-area-inset-bottom) + var(--espace-8));flex-direction:column;gap:var(--espace-3);pointer-events:none}
  .pouce>*{pointer-events:auto}
  .legende-m{display:flex;gap:var(--espace-2);overflow-x:auto;scrollbar-width:none;padding:var(--marge-etiquette) 0}
  .legende-m::-webkit-scrollbar{display:none}
  .puce{flex:none;display:inline-flex;align-items:center;gap:var(--ecart-puce);height:var(--hauteur-puce);padding:0 var(--espace-3);border-radius:var(--rayon-plein);font-size:var(--taille-12);font-weight:var(--graisse-moyen);color:var(--couleur-texte);background:var(--verre-fond);border:var(--bordure-fine) solid var(--verre-bordure);backdrop-filter:blur(var(--flou-puce));-webkit-backdrop-filter:blur(var(--flou-puce))}
  .puce .pastille{width:var(--taille-pastille-puce);height:var(--taille-pastille-puce);border-radius:var(--rayon-pastille-petite)}
  .pouce .recherche{width:100%;height:var(--cible-tactile);background:var(--couleur-surface);box-shadow:var(--ombre-2);border-color:var(--couleur-bordure)}
  .zoom{right:var(--espace-4);bottom:calc(env(safe-area-inset-bottom) + var(--mobile-bas-zoom))}
  .mention-longue{display:none}
  .mention{left:var(--espace-4);right:auto;bottom:calc(env(safe-area-inset-bottom) + var(--espace-1));max-width:calc(100% - var(--espace-8))}
  .alerte{top:auto;bottom:calc(env(safe-area-inset-bottom) + var(--mobile-bas-zoom) + var(--espace-4))}
}

/* Logo en mode sombre (comme dans la maquette) */
[data-theme="sombre"] .marque img{filter:brightness(0) invert(1) opacity(.92)}
@media (prefers-color-scheme:dark){:root:not([data-theme]) .marque img{filter:brightness(0) invert(1) opacity(.92)}}

@media (prefers-reduced-motion:reduce){*{transition-duration:0s !important;animation:none !important}}