/* ==========================================================================
   lieux.css — la carte des lieux : globe, pays, zone d'intérêt
   ========================================================================== */
html, body { height: 100%; overflow: hidden; }
main { position: fixed; inset: 0; }

.espace {
  position: absolute; inset: 0;
  background:
    radial-gradient(1px 1px at 12% 22%, #ffffff55 50%, transparent),
    radial-gradient(1px 1px at 72% 14%, #ffffff44 50%, transparent),
    radial-gradient(1px 1px at 84% 66%, #ffffff33 50%, transparent),
    radial-gradient(1px 1px at 33% 81%, #ffffff40 50%, transparent),
    radial-gradient(1.5px 1.5px at 56% 47%, #ffffff30 50%, transparent),
    radial-gradient(1px 1px at 91% 31%, #ffffff35 50%, transparent),
    radial-gradient(1px 1px at 6% 61%, #ffffff30 50%, transparent),
    radial-gradient(80% 70% at 50% 50%, #0b1320 0%, #05070a 70%);
}
.carte { position: absolute; inset: 0; }
.carte .maplibregl-canvas { outline: none; }
/* Mention des fonds (Kartverket, Esri, EOX) : lisible sur toute imagerie, neige comprise
   (fond opaque à 85 %, texte --txt-2 : 5:1 au pire), jamais noire (MapLibre noircit le
   texte replié par une règle plus précise), jamais sous le panneau (Esri, Kartverket :
   mention ni couverte ni masquée). */
.maplibregl-ctrl-attrib, .maplibregl-ctrl-attrib.maplibregl-compact { background: rgba(6,8,11,.85) !important; color: var(--txt-2); font-size: 10px; }
.maplibregl-ctrl-attrib a { color: var(--txt); }
.maplibregl-ctrl-attrib-button { filter: invert(1); }
body.niveau-zone:has(#panneau:not([hidden]):not(.replie)) .maplibregl-ctrl-bottom-right { max-width: calc(100% - 460px); }

/* --- Fil d'Ariane ------------------------------------------------------- */
.ariane {
  position: absolute; top: calc(var(--nav-h) + 6px); left: clamp(16px, 3vw, 36px); z-index: 10;
  display: flex; flex-wrap: wrap; align-items: center; gap: 6px;
  font-family: var(--font-mono); font-size: .7rem; letter-spacing: .12em; text-transform: uppercase;
}
.ariane a, .ariane span { color: var(--txt-3); text-decoration: none; padding: 4px 0; }
.ariane a:hover { color: var(--accent-hi); }
.ariane span[aria-current] { color: var(--txt); }
/* Le nom de la zone courante : un bouton qui ramène à la vue d'arrivée. */
.ariane button { font: inherit; letter-spacing: inherit; text-transform: inherit; background: none; border: 0; padding: 4px 0; color: var(--txt); cursor: pointer; }
.ariane button:hover { color: var(--accent-hi); }
.panneau__tete h2 button { font: inherit; background: none; border: 0; padding: 0; color: inherit; text-align: left; cursor: pointer; }
.panneau__tete h2 button:hover { color: var(--accent-hi); }
.ariane i { color: var(--txt-3); font-style: normal; opacity: .6; }

/* --- Titre du niveau ---------------------------------------------------- */
.titre-niveau {
  position: absolute; left: clamp(16px, 3vw, 36px); bottom: clamp(24px, 6vh, 56px); z-index: 10;
  max-width: min(32.5rem, calc(100% - 32px)); pointer-events: none;
  transition: opacity .6s var(--ease), transform .6s var(--ease);
}
.titre-niveau h1 { font-size: clamp(2.4rem, 6vw, 4.8rem); letter-spacing: -.02em; text-shadow: 0 2px 30px #000a; }
.titre-aide { color: var(--txt-2); margin: 10px 0 0; font-size: .95rem; text-shadow: 0 1px 12px #000; }
.titre-niveau.cache { opacity: 0; transform: translateY(10px); }
body.niveau-zone .titre-niveau { display: none; }
/* Sous 640 px, la mention des sources de la carte se réduit à un bouton « i » dans le coin bas
   droit (MapLibre) : le titre s'arrête avant (il mordait sur « éclairé. », mesuré le 2026-10-13). */
@media (max-width: 640px) { .titre-niveau { max-width: calc(100% - 64px); } }

/* --- Marqueurs de lieux ------------------------------------------------- */
/* Le repère est le point ; l'étiquette est posée à côté, à droite ou (classe
   repere--gauche) à gauche, sans changer la position géographique du point. */
/* `position: absolute`, comme la classe maplibregl-marker : avec `relative`,
   chaque repère s'empilait sous le précédent dans le flux (9 px par lieu)
   AVANT d'être translaté à sa position — MESURÉ le 2026-10-04 : Verdens Ende
   affiché 72 px trop bas sur la carte de la Norvège. */
.repere {
  position: absolute; display: block; width: 9px; height: 9px;
  background: none; border: 0; padding: 0; cursor: pointer;
  font-family: var(--font-body); color: var(--txt);
}
/* Des points fins (9 px, liseré sombre) : posés exactement sur le lieu, ils
   ne masquent pas leurs voisins (remarque du 2026-10-04). */
.repere .repere__nom { position: absolute; top: 50%; left: calc(100% + 6px); transform: translateY(-50%); }
.repere--gauche .repere__nom { left: auto; right: calc(100% + 6px); }
.repere--inactif { width: 7px; height: 7px; }
.repere__point {
  display: block; width: 9px; height: 9px; border-radius: 50%; flex: none;
  /* Les lieux, comme le contour actif et les traces (lieux.js), sont des signaux de
     la carte : --sun, l'ambre d'origine, bien visible sur la neige ; l'interface
     autour est à l'accent. */
  background: var(--sun); box-shadow: 0 0 0 1.5px #05070acc, 0 0 8px #f5b64299;
  transition: transform .25s var(--ease);
}
.repere__nom {
  font-family: var(--font-display); font-size: .84rem; font-weight: 400; white-space: nowrap;   /* Zodiak Regular, comme les noms de lieux du panneau */
  padding: 2px 8px; border-radius: var(--r-ctl); background: rgba(6,8,11,.74);
  border: 1px solid rgba(255,255,255,.12);
  transition: border-color .2s, color .2s;
}
.repere:hover .repere__point, .repere:focus-visible .repere__point { transform: scale(1.5); }
.repere:hover .repere__nom, .repere:focus-visible .repere__nom { border-color: var(--accent); color: var(--accent-hi); }
.repere:focus-visible { outline: none; }
.repere--inactif { cursor: default; }
.repere--inactif .repere__point { background: var(--txt-3); box-shadow: 0 0 0 1.5px #05070acc; width: 7px; height: 7px; }
.repere--inactif .repere__nom { color: var(--txt-3); font-size: .78rem; }
.repere--inactif:hover .repere__nom { border-color: rgba(255,255,255,.12); color: var(--txt-2); }
.repere--muet .repere__nom, .repere--inactif .repere__nom { opacity: 0; pointer-events: none; transition: opacity .2s; }
.repere--muet:hover .repere__nom, .repere--muet:focus-visible .repere__nom,
.repere--inactif:hover .repere__nom, .repere--inactif:focus-visible .repere__nom { opacity: 1; z-index: 2; }
.repere--sous .repere__point { background: #fff; box-shadow: 0 0 0 1.5px #05070acc, 0 0 8px #fff8; width: 9px; height: 9px; }
.repere--sous.actif .repere__point { background: var(--sun); box-shadow: 0 0 0 1.5px #05070acc, 0 0 12px var(--sun); }
.repere--sous.actif .repere__nom { border-color: var(--accent); color: var(--accent-hi); }

/* --- Commandes 2D / 3D -------------------------------------------------- */
.commandes { position: absolute; right: clamp(12px, 2vw, 24px); top: calc(var(--nav-h) + 10px); z-index: 12; }
.bascule { display: inline-flex; border: 1px solid var(--line-2); border-radius: var(--r-ctl); overflow: hidden; background: rgba(6,8,11,.78); backdrop-filter: blur(8px); }
.bascule button { background: none; border: 0; padding: 7px 14px; cursor: pointer; font-family: var(--font-mono); font-size: .72rem; letter-spacing: .1em; color: var(--txt-2); }
.bascule button[aria-pressed="true"] { background: var(--accent); color: var(--on-accent); }

/* --- Panneau de gauche -------------------------------------------------- */
.panneau {
  position: absolute; z-index: 11;
  top: calc(var(--nav-h) + 40px); left: clamp(10px, 1.6vw, 20px); bottom: 16px;
  width: min(25.625rem, calc(100% - 20px));
  display: flex; flex-direction: column;
  background: rgba(8,11,15,.9); backdrop-filter: blur(14px);
  border: 1px solid var(--line); border-radius: var(--r-lg);
  box-shadow: var(--shadow);
  overflow: hidden;
  transform: translateX(0); transition: transform .5s var(--ease), opacity .5s var(--ease);
}
.panneau[hidden] { display: flex; transform: translateX(-110%); opacity: 0; pointer-events: none; }
.panneau__tete { position: relative; padding: 18px 18px 14px; border-bottom: 1px solid var(--line); }
.panneau__replier {
  position: absolute; top: 10px; right: 10px; width: 30px; height: 30px; border-radius: 50%;
  border: 1px solid var(--line-2); background: none; cursor: pointer; color: var(--txt-2);
}
.panneau__replier::before { content: '‹'; font-size: 1.1rem; line-height: 1; }
.panneau__replier:hover { border-color: var(--accent); color: var(--accent-hi); }
/* Panneau replié : seule sa tête reste, la carte respire. */
.panneau.replie { bottom: auto; }
.panneau.replie .panneau__corps, .panneau.replie .filtre, .panneau.replie .panneau__meta { display: none; }
.panneau.replie .panneau__replier::before { content: '›'; }
.panneau__tete h2 { font-size: 1.5rem; }
.panneau__tete .eyebrow { margin-bottom: 8px; font-size: .64rem; }
.panneau__retour { background: none; border: 0; color: var(--txt-2); cursor: pointer; padding: 0; font-size: .82rem; margin-bottom: 10px; }
.panneau__retour:hover { color: var(--accent-hi); }
.panneau__meta { margin: 8px 0 0; color: var(--txt-3); font-size: .8rem; }
.panneau__corps { overflow-y: auto; padding: 6px 0 18px; scrollbar-width: thin; scrollbar-color: var(--line-2) transparent; }

.filtre { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 12px; }
.filtre button {
  font-size: .74rem; padding: 4px 10px; border-radius: var(--r-ctl); cursor: pointer;
  background: none; border: 1px solid var(--line-2); color: var(--txt-2);
}
.filtre button[aria-pressed="true"] { border-color: var(--accent); color: var(--accent-hi); background: var(--accent-dim); }

/* Arbre de couches, à la manière de QGIS */
.groupe { border-bottom: 1px solid var(--line); }
.groupe > summary {
  list-style: none; cursor: pointer; padding: 12px 18px 10px;
  font-family: var(--font-mono); font-size: .66rem; letter-spacing: .2em; text-transform: uppercase; color: var(--txt-3);
  display: flex; align-items: center; gap: 8px;
}
.groupe > summary .n { margin-left: auto; letter-spacing: .05em; }
.groupe > summary:hover { color: var(--txt-2); }
.groupe > summary::-webkit-details-marker { display: none; }
.groupe > summary::before { content: '▸'; transition: transform .2s; }
.groupe[open] > summary::before { transform: rotate(90deg); }
.couche { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 10px; padding: 6px 18px; }
.couche:hover { background: #ffffff06; }
.couche input { accent-color: var(--accent); width: 15px; height: 15px; margin: 0; cursor: pointer; }
.couche label { cursor: pointer; font-size: .9rem; display: flex; align-items: center; gap: 8px; }
.couche .n { font-family: var(--font-mono); font-size: .7rem; color: var(--txt-3); }
.couche[aria-disabled="true"] { opacity: .45; }
.couche[aria-disabled="true"] input, .couche[aria-disabled="true"] label { cursor: default; }
.pastille { width: 10px; height: 10px; border-radius: 50%; flex: none; border: 2px solid currentColor; }
/* L'icône du type de donnée (icones.js), à la couleur du type. */
.icone-type { display: inline-flex; width: 16px; height: 16px; flex: none; align-items: center; justify-content: center; }
.icone-type svg { width: 100%; height: 100%; }
.fond-titre .icone-type { vertical-align: -3px; margin-right: 6px; color: var(--accent); }
.couche__liste { padding: 2px 18px 10px 43px; }

/* Grille de 5 × 3 vignettes ; au-delà, on fait défiler la grille elle-même
   (une fenêtre dans la fenêtre), sans allonger le panneau. */
.galerie { --cote: calc((min(25.625rem, 100vw - 20px) - 36px - 4 * 4px) / 5);
  display: grid; grid-template-columns: repeat(5, 1fr); gap: 4px; margin: 4px 18px 8px; }
.galerie--defile {
  max-height: calc(3 * var(--cote) + 2 * 4px); overflow-y: auto; overscroll-behavior: contain;
  padding-right: 4px; margin-right: 10px; scrollbar-width: thin; scrollbar-color: var(--accent) transparent;
  border-bottom: 1px solid var(--line-2); border-radius: 4px;
}
.galerie--defile:focus-visible { outline: 1px solid var(--accent); outline-offset: 2px; }
.defile-aide { margin: -2px 18px 10px; font-family: var(--font-mono); font-size: .62rem; color: var(--txt-3); letter-spacing: .04em; }
.galerie button { padding: 0; border: 0; background: var(--surface); border-radius: 4px; overflow: hidden; aspect-ratio: 1; cursor: zoom-in; position: relative; }
.galerie img { width: 100%; height: 100%; object-fit: cover; transition: transform .4s var(--ease); }
.galerie button:hover img { transform: scale(1.06); }
.galerie .badge { position: absolute; left: 4px; bottom: 4px; font-family: var(--font-mono); font-size: .58rem; padding: 1px 5px; border-radius: 3px; background: #000a; color: #fff; }
.vide { color: var(--txt-3); font-size: .85rem; padding: 6px 18px 12px; margin: 0; }

.liste-lieux { list-style: none; margin: 0; padding: 0 0 6px; }
.liste-lieux button {
  width: 100%; text-align: left; background: none; border: 0; cursor: pointer;
  padding: 9px 18px; display: grid; grid-template-columns: 1fr auto; gap: 2px 10px;
}
.liste-lieux button:hover { background: #ffffff08; }
/* Noms de lieux (sous-lieux du panneau, étiquettes de la carte) et titres de projets du
   panneau : Zodiak Regular (400, pas de gras), en blanc (demandes du 2026-10-09). */
.liste-lieux b { font-family: var(--font-display); font-weight: 400; font-size: 1rem; line-height: 1.2; letter-spacing: -.005em; color: #fff; }
.liste-lieux small { color: var(--txt-3); font-size: .76rem; grid-column: 1; }
.liste-lieux .n { grid-row: 1 / 3; grid-column: 2; align-self: center; font-family: var(--font-mono); font-size: .7rem; color: var(--txt-3); }

.projets-zone { list-style: none; margin: 0; padding: 0 18px 10px; display: grid; gap: 6px; }
/* Le titre de chaque projet dans la typographie du titre de sa page (Zodiak, casse normale),
   en Regular et en blanc (voir .liste-lieux b) ; la date reste en chasse fixe. */
.projets-zone a { display: block; text-decoration: none; padding: 8px 10px; border: 1px solid var(--line); border-radius: var(--r-sm);
  font-family: var(--font-display); font-weight: 400; font-size: 1.02rem; line-height: 1.2; letter-spacing: -.01em; color: #fff; }
.projets-zone a:hover { border-color: var(--accent); }
.projets-zone small { display: block; color: var(--accent); font-family: var(--font-mono); font-weight: 400; font-size: .62rem; letter-spacing: .12em; text-transform: uppercase; margin-bottom: 3px; }

/* Bulle de survol d'un média sur la carte */
.maplibregl-popup.bulle .maplibregl-popup-content { padding: 0; background: var(--bg-2); border: 1px solid var(--line-2); border-radius: var(--r-sm); overflow: hidden; box-shadow: var(--shadow); }
.maplibregl-popup.bulle .maplibregl-popup-tip { border-top-color: var(--line-2); border-bottom-color: var(--line-2); }
.bulle img { width: 11.25rem; height: 7.5rem; object-fit: cover; }
.bulle p { margin: 0; padding: 6px 8px; font-size: .74rem; color: var(--txt-2); }

/* --- Visionneuse 360 ---------------------------------------------------- */
.vue360 { position: fixed; inset: 0; z-index: 210; background: #000; }
.vue360[hidden] { display: none; }
.vue360 #pano { position: absolute; inset: 0; }
.vue360__fermer { position: absolute; top: 14px; right: 14px; z-index: 2; width: 42px; height: 42px; border-radius: 50%; border: 1px solid var(--line-2); background: rgba(6,8,11,.7); cursor: pointer; }
.vue360__titre { position: absolute; left: 16px; bottom: 10px; z-index: 2; margin: 0; font-size: .85rem; color: var(--txt-2); text-shadow: 0 1px 6px #000; }
.pnlm-container { background: #000 !important; }

@media (max-width: 760px) {
  .panneau { top: auto; height: 44vh; bottom: 0; left: 0; width: 100%; border-radius: var(--r-lg) var(--r-lg) 0 0; }
  .panneau[hidden] { transform: translateY(110%); }
}

/* --- Lecteur vidéo + trajet -------------------------------------------- */
.lecteur {
  position: absolute; z-index: 13; right: clamp(10px, 1.6vw, 20px); bottom: 34px;
  width: min(38vw, 32.5rem);
  background: rgba(8,11,15,.94); border: 1px solid var(--line-2); border-radius: var(--r);
  overflow: hidden; box-shadow: var(--shadow);
}
.lecteur[hidden] { display: none; }
.lecteur video { width: 100%; max-height: 52vh; background: #000; }
.lecteur.portrait { width: min(24vw, 18.75rem); }
.lecteur__barre { display: flex; align-items: center; gap: 12px; padding: 8px 12px; font-size: .82rem; color: var(--txt-2); }
.lecteur__barre > span:first-child { flex: 1; }
.lecteur__barre .mono { color: var(--txt-3); margin-left: 6px; }
.lecteur__barre label { display: flex; align-items: center; gap: 6px; cursor: pointer; white-space: nowrap; }
.lecteur__barre label[hidden] { display: none; }
.lecteur__barre input { accent-color: var(--accent); }
.lecteur__barre button { background: none; border: 0; cursor: pointer; color: var(--txt-2); font-size: 1rem; }
.drone { filter: drop-shadow(0 0 6px #f5b642aa); }
@media (max-width: 760px) {
  .lecteur, .lecteur.portrait { left: 10px; right: 10px; width: auto; bottom: calc(44vh + 10px); }
  .lecteur video { max-height: 30vh; }
}

/* --- Données : un type = un groupe repliable ----------------------------- */
.type > summary {
  list-style: none; cursor: pointer; display: grid; grid-template-columns: 12px auto 1fr auto; align-items: center; gap: 8px;
  padding: 7px 18px; font-size: .9rem;
}
.type > summary::-webkit-details-marker { display: none; }
.type > summary::before { content: '▸'; font-size: .7rem; color: var(--txt-3); transition: transform .2s; }
.type[open] > summary::before { transform: rotate(90deg); }
.type > summary:hover { background: #ffffff06; }
.type > summary .n { grid-column: 4; font-family: var(--font-mono); font-size: .7rem; color: var(--txt-3); }
.couche--item .aller, .couche--item .film {
  background: none; border: 1px solid var(--line-2); border-radius: var(--r-ctl); cursor: pointer;
  font-family: var(--font-mono); font-size: .6rem; padding: 1px 7px; color: var(--txt-2);
}
.couche--item .aller:hover, .couche--item .film:hover { border-color: var(--accent); color: var(--accent-hi); }
.couche--item:has(.aller) { grid-template-columns: auto 1fr auto auto; }
.couche--item .film { grid-column: 2 / -1; justify-self: start; margin-top: -2px; }
.fond-titre { margin: 8px 18px 2px; font-family: var(--font-mono); font-size: .62rem; letter-spacing: .14em; text-transform: uppercase; color: var(--accent); }
.fond-titre small { color: var(--txt-3); letter-spacing: .04em; text-transform: none; margin-left: 4px; }

/* --- Produits ------------------------------------------------------------ */
.couche--titre { padding-top: 8px; }
.sous-couches { padding: 0 0 6px; }
.couche--item { padding: 4px 18px 4px 38px; }
.couche--item label, .couche--item .lien { font-size: .82rem; color: var(--txt-2); }
.lien { background: none; border: 0; padding: 0; cursor: pointer; text-align: left; text-decoration: underline; text-decoration-color: var(--line-2); text-underline-offset: 3px; }
.lien:hover { color: var(--accent-hi); text-decoration-color: var(--accent); }
.icone3d { font-family: var(--font-mono); font-size: .58rem; padding: 1px 4px; border: 1px solid var(--line-2); border-radius: 3px; color: var(--txt-2); }
.bulle .mono { color: var(--txt); }

/* Lecteur en mode 360 : la sphère remplace la vidéo, avec sa propre barre. */
.lecteur__360, .lecteur__barre360 { display: none; }
.lecteur.mode360 video { display: none; }
.lecteur.mode360 .lecteur__360 { display: block; position: relative; aspect-ratio: 16 / 9; max-height: 52vh; background: #000; overflow: hidden; }
.lecteur.mode360 .lecteur__barre360 { display: flex; }
.lecteur__barre360 input { flex: 1; accent-color: var(--accent); }
.lecteur__barre360 button { min-width: 28px; }
.lecteur__planete { display: grid; place-items: center; }
.lecteur__planete[aria-pressed="true"] { color: var(--accent); border-color: var(--accent); }

/* --- Lecteur agrandi ------------------------------------------------------
   Le bouton « agrandir » occupe toute la fenêtre (et passe en plein écran
   quand le navigateur l'accepte) ; la vidéo garde sa barre et son trajet. */
.lecteur__agrandir { display: grid; place-items: center; }
.lecteur__agrandir[aria-pressed="true"] svg { transform: rotate(180deg); }
.lecteur.lecteur--grand {
  position: fixed; inset: 0; width: auto; z-index: 220; border-radius: 0; border: 0;
  display: flex; flex-direction: column; background: #000;
}
.lecteur.lecteur--grand video { flex: 1; max-height: none; height: 0; min-height: 0; object-fit: contain; }
.lecteur.lecteur--grand.mode360 .lecteur__360 { flex: 1; height: 0; min-height: 0; max-height: none; aspect-ratio: auto; overflow: hidden; }
.lecteur.lecteur--grand .lecteur__barre { background: rgba(8,11,15,.94); }
.lecteur:fullscreen { width: 100%; height: 100%; }
body.lecteur-agrandi .bandeau { visibility: hidden; }

@media (max-width: 760px) {
  .galerie { --cote: calc((100vw - 36px - 4 * 4px) / 5); }
  .titre-niveau { bottom: 16px; }
  .titre-niveau h1 { font-size: 2.2rem; }
  .commandes { top: auto; bottom: calc(44vh + 12px); right: 10px; }
  .panneau.replie { height: auto; }
  /* Le panneau occupe le bas : la mention des fonds se pose au-dessus, à gauche des
     commandes 2D / 3D (le titre du niveau, en bas à gauche, n'est pas montré dans une zone). */
  body.niveau-zone:has(#panneau:not([hidden]):not(.replie)) .maplibregl-ctrl-bottom-right {
    bottom: 44vh; right: auto; left: 0; max-width: calc(100% - 130px);
  }
}

/* --- Modèle 3D en fenêtre ------------------------------------------------ */
.vue3d { position: fixed; inset: 0; z-index: 210; background: #0b0d10; }
.vue3d[hidden] { display: none; }
.vue3d iframe { width: 100%; height: 100%; border: 0; display: block; }
.vue3d button { position: absolute; top: 14px; right: 14px; width: 46px; height: 46px; border-radius: 50%; border: 1px solid var(--line-2); background: rgba(6,8,11,.7); cursor: pointer; font-size: 1.1rem; }