/* GUIDE — haute montagne et escalade. La famille d'ENVOL (verre sombre, Inter), l'accent de la corde.
   Pas de flou d'arrière-plan au-dessus du canevas WebGL : il fait relire la toile au compositeur à chaque image
   (2 images/s mesurées ailleurs dans le dépôt). Des fonds opaques à 92 %. */
:root {
  --fond: rgba(11, 15, 21, .92); --fond-2: rgba(18, 24, 32, .96); --ligne: rgba(255, 255, 255, .13); --ligne-forte: rgba(255, 255, 255, .24);
  --texte: #eef3f8; --discret: #a3b0bf; --accent: #ff7a45; --accent-2: #ffb36b; --bleu: #5ab8ef; --vert: #7fca7a; --jaune: #f2d649; --rouge: #ec5a43; --violet: #a77de8;
  --r: 14px; --police: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --haut: env(safe-area-inset-top, 0px); --bas: env(safe-area-inset-bottom, 0px); --g: env(safe-area-inset-left, 0px); --d: env(safe-area-inset-right, 0px);
}
* { box-sizing: border-box; }
[hidden] { display: none !important; }
html, body { margin: 0; height: 100%; overflow: hidden; background: #0a0e13; color: var(--texte); font: 14px/1.45 var(--police); -webkit-tap-highlight-color: transparent; }
#scene { position: fixed; inset: 0; width: 100%; height: 100%; display: block; touch-action: none; outline: none; }
.ico { width: 18px; height: 18px; flex: none; vertical-align: -3px; }
button { font: inherit; color: var(--texte); background: rgba(255, 255, 255, .07); border: 1px solid var(--ligne); border-radius: 10px; padding: 8px 12px; cursor: pointer;
  display: inline-flex; gap: 7px; align-items: center; justify-content: center; line-height: 1.2; touch-action: manipulation; user-select: none; -webkit-user-select: none; }
button:hover { background: rgba(255, 255, 255, .14); }
button:focus-visible, select:focus-visible, input:focus-visible, a:focus-visible { outline: 2px solid var(--accent-2); outline-offset: 2px; }
button.principal { background: var(--accent); color: #200a00; border-color: transparent; font-weight: 700; }
button.principal:hover { filter: brightness(1.08); }
button.danger { border-color: rgba(236, 90, 67, .5); color: #ffc2b6; }
button[aria-pressed="true"], button.actif { background: rgba(255, 122, 69, .2); border-color: var(--accent); color: #fff; }
button:disabled { opacity: .45; cursor: default; }
select, input[type=text], input[type=search], input[type=number], input[type=date], input[type=time], textarea {
  font: inherit; color: var(--texte); background: rgba(0, 0, 0, .35); border: 1px solid var(--ligne); border-radius: 9px; padding: 7px 9px; width: 100%; }
select option { background: #121821; }
input[type=range] { width: 100%; accent-color: var(--accent); }
label { display: flex; flex-direction: column; gap: 5px; color: var(--discret); font-size: 12px; }
label > span { color: var(--texte); }
.discret, small { color: var(--discret); }
.logo { font-weight: 900; letter-spacing: .34em; font-size: 30px; color: #fff; padding-left: .34em; }
.logo::after { content: ""; display: block; height: 3px; width: 46px; margin: 6px auto 0 0; background: linear-gradient(90deg, var(--accent), var(--accent-2)); border-radius: 2px; }

/* ── choix du site ─────────────────────────────────────────────────────────── */
#choix { position: fixed; inset: 0; z-index: 40; overflow: auto; padding: calc(18px + var(--haut)) calc(16px + var(--d)) calc(24px + var(--bas)) calc(16px + var(--g));
  background: radial-gradient(ellipse at 70% 10%, rgba(255, 122, 69, .16), transparent 55%), radial-gradient(ellipse at 20% 90%, rgba(90, 184, 239, .14), transparent 55%), linear-gradient(160deg, #101722, #07090d 70%); }
body:not(.au-choix) #choix { display: none; }
.choix-cadre { max-width: 1120px; margin: 0 auto; }
.choix-tete { display: flex; flex-direction: column; gap: 10px; margin: 8px 0 18px; }
.choix-tete .sous { margin: 0; max-width: 720px; color: #cbd5df; font-size: 15px; }
.recherche { display: flex; gap: 8px; align-items: center; background: var(--fond-2); border: 1px solid var(--ligne); border-radius: 14px; padding: 6px 6px 6px 12px; max-width: 720px; }
.recherche input { border: none; background: transparent; padding: 8px 4px; }
.resultats { display: grid; gap: 6px; max-width: 720px; margin-top: 8px; }
.resultats button { justify-content: flex-start; text-align: left; background: var(--fond-2); }
.resultats button small { margin-left: auto; }
.titre-section { font-size: 12px; text-transform: uppercase; letter-spacing: .14em; color: var(--accent-2); margin: 26px 0 10px; }
.sites { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 12px; }
.carte-site { position: relative; display: flex; flex-direction: column; align-items: stretch; gap: 6px; text-align: left; padding: 14px 14px 13px; border-radius: 14px;
  background: linear-gradient(160deg, rgba(255, 255, 255, .06), rgba(255, 255, 255, .02)); border: 1px solid var(--ligne); min-height: 132px; }
.carte-site:hover { border-color: var(--accent); background: linear-gradient(160deg, rgba(255, 122, 69, .14), rgba(255, 255, 255, .02)); }
.carte-site .genre { display: flex; gap: 6px; align-items: center; color: var(--accent-2); font-size: 11px; text-transform: uppercase; letter-spacing: .12em; }
.carte-site b { font-size: 17px; }
.carte-site small { line-height: 1.35; }
.carte-site .massif { color: var(--discret); font-size: 12px; }
.sources { margin-top: 28px; font-size: 12px; color: #7d8a99; max-width: 900px; }

/* ── chargement ────────────────────────────────────────────────────────────── */
#chargement { position: fixed; inset: 0; z-index: 45; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px; padding: 24px; text-align: center;
  background: radial-gradient(ellipse at 50% 35%, #1b2a3b, #06080b 72%); }
.ch-titre { font-size: 20px; font-weight: 700; }
.jauge { width: min(440px, 88vw); height: 6px; background: rgba(255, 255, 255, .1); border-radius: 3px; overflow: hidden; }
.jauge i { display: block; height: 100%; width: 0; background: linear-gradient(90deg, var(--bleu), var(--accent)); transition: width .3s; }

/* ── barre du haut ─────────────────────────────────────────────────────────── */
#haut { position: fixed; z-index: 12; top: 0; left: 0; right: 0; display: flex; align-items: center; gap: 10px; padding: calc(8px + var(--haut)) calc(10px + var(--d)) 8px calc(10px + var(--g));
  background: linear-gradient(180deg, rgba(6, 9, 13, .86), rgba(6, 9, 13, 0)); pointer-events: none; }
#haut > * { pointer-events: auto; }
.titre-site { display: flex; flex-direction: column; min-width: 0; text-shadow: 0 1px 3px rgba(0, 0, 0, .7); }
.titre-site b { font-size: 16px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.titre-site small { color: #c6d1dc; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.haut-droite { margin-left: auto; display: flex; gap: 8px; align-items: center; }
.choix-echelle { flex-direction: row; align-items: center; gap: 6px; background: var(--fond); border: 1px solid var(--ligne); border-radius: 10px; padding: 0 0 0 9px; color: var(--texte); }
.choix-echelle select { border: none; background: transparent; padding: 8px 8px 8px 2px; width: auto; }
#haut button { background: var(--fond); }

/* ── rail des outils ───────────────────────────────────────────────────────── */
#rail { position: fixed; z-index: 11; left: calc(10px + var(--g)); top: 72px; display: flex; flex-direction: column; gap: 6px; }
#rail button { flex-direction: column; gap: 4px; width: 78px; padding: 9px 4px 8px; font-size: 11px; background: var(--fond); text-align: center; }
#rail button .ico { width: 22px; height: 22px; }
#rail button.actif { background: rgba(255, 122, 69, .26); border-color: var(--accent); }

/* ── panneau de l'outil ────────────────────────────────────────────────────── */
#panneau { position: fixed; z-index: 11; right: calc(10px + var(--d)); top: 66px; bottom: calc(10px + var(--bas)); width: 392px; overflow: auto; overscroll-behavior: contain;
  background: var(--fond); border: 1px solid var(--ligne); border-radius: var(--r); padding: 14px 14px 18px; display: flex; flex-direction: column; gap: 12px; }
#panneau h2 { margin: 0; font-size: 17px; display: flex; gap: 8px; align-items: center; }
#panneau h3 { margin: 6px 0 0; font-size: 12px; text-transform: uppercase; letter-spacing: .12em; color: var(--accent-2); }
#panneau p { margin: 0; }
.rangee { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.deux { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.trois { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.bloc { background: rgba(255, 255, 255, .04); border: 1px solid var(--ligne); border-radius: 11px; padding: 10px; display: flex; flex-direction: column; gap: 8px; }
.chiffres { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.chiffre { background: rgba(0, 0, 0, .25); border-radius: 9px; padding: 7px 8px; display: flex; flex-direction: column; }
.chiffre small { font-size: 11px; }
.chiffre b { font-size: 16px; font-variant-numeric: tabular-nums; }
.liste { display: flex; flex-direction: column; gap: 6px; }
.liste > button { justify-content: flex-start; text-align: left; }
.liste > button small { margin-left: auto; padding-left: 8px; white-space: nowrap; }
label.case { flex-direction: row; align-items: flex-start; gap: 8px; color: var(--texte); font-size: 13px; }
label.case input { width: 16px; height: 16px; margin-top: 2px; accent-color: var(--accent); flex: none; }
.ligne-tr { display: grid; grid-template-columns: 22px 1fr auto; gap: 8px; align-items: start; padding: 8px; border-radius: 10px; background: rgba(255, 255, 255, .035); border: 1px solid transparent; }
.ligne-tr.vue { border-color: var(--accent); }
.ligne-tr .num { width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; font-size: 11px; font-weight: 700; background: #2a3442; }
.ligne-tr select { padding: 4px 6px; font-size: 13px; }
.ligne-tr .mes { font-size: 12px; color: var(--discret); font-variant-numeric: tabular-nums; }
.pastille { display: inline-block; width: 10px; height: 10px; border-radius: 3px; vertical-align: 0; margin-right: 4px; }
.risque { display: flex; gap: 7px; align-items: flex-start; font-size: 12.5px; padding: 6px 8px; border-radius: 8px; background: rgba(255, 255, 255, .04); }
.risque.fort { background: rgba(236, 90, 67, .16); }
.risque.moyen { background: rgba(242, 214, 73, .12); }
.risque .ico { color: var(--jaune); width: 16px; height: 16px; margin-top: 1px; }
.risque.fort .ico { color: var(--rouge); }
.consigne-pas { display: flex; gap: 9px; align-items: flex-start; font-size: 13px; }
.consigne-pas i { font-style: normal; flex: none; width: 22px; height: 22px; border-radius: 50%; background: var(--accent); color: #200a00; font-weight: 800; display: grid; place-items: center; font-size: 12px; }
.consigne-pas.fait i { background: var(--vert); }
.legende-pentes { display: flex; flex-wrap: wrap; gap: 4px 10px; font-size: 11.5px; color: var(--discret); }
.table { width: 100%; border-collapse: collapse; font-size: 12.5px; font-variant-numeric: tabular-nums; }
.table th { text-align: left; font-weight: 600; color: var(--discret); font-size: 11px; padding: 4px 4px; border-bottom: 1px solid var(--ligne); }
.table td { padding: 5px 4px; border-bottom: 1px solid rgba(255, 255, 255, .06); vertical-align: top; }
.table td.n { text-align: right; white-space: nowrap; }
.table tr.groupe td { color: var(--accent-2); font-size: 11px; text-transform: uppercase; letter-spacing: .1em; padding-top: 10px; }
.table input[type=checkbox] { accent-color: var(--accent); width: 16px; height: 16px; }
.pourquoi { display: block; color: var(--discret); font-size: 11px; }
.tirage-ok { color: var(--vert); } .tirage-moyen { color: var(--jaune); } .tirage-fort { color: var(--rouge); }
.hyp { font-size: 12px; }
.hyp summary { cursor: pointer; color: var(--discret); }
.hyp .deux { margin-top: 8px; }

/* bulle de l'assistant */
.fil { display: flex; flex-direction: column; gap: 8px; }
.bulle { padding: 9px 11px; border-radius: 12px; background: rgba(255, 255, 255, .06); font-size: 13.5px; white-space: pre-wrap; }
.bulle.moi { background: rgba(255, 122, 69, .16); align-self: flex-end; max-width: 88%; }
.bulle.erreur { background: rgba(236, 90, 67, .16); }
.bulle .actions-ia { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.bulle .actions-ia button { font-size: 12.5px; padding: 6px 9px; }
.saisie-ia { display: flex; gap: 6px; }
.saisie-ia textarea { resize: none; height: 64px; }
.attente::after { content: "…"; animation: points 1.2s infinite steps(4); display: inline-block; width: 1.2em; overflow: hidden; vertical-align: bottom; }
@keyframes points { from { width: 0; } to { width: 1.2em; } }

/* ── fenêtres ──────────────────────────────────────────────────────────────── */
.fenetre { position: fixed; z-index: 30; left: 50%; top: 50%; transform: translate(-50%, -50%); width: min(440px, calc(100vw - 24px)); max-height: calc(100vh - 40px); overflow: auto;
  background: var(--fond-2); border: 1px solid var(--ligne-forte); border-radius: 16px; padding: 16px; display: flex; flex-direction: column; gap: 12px; box-shadow: 0 20px 60px rgba(0, 0, 0, .55); }
.fenetre.large { width: min(640px, calc(100vw - 24px)); }
.fenetre h3 { margin: 0; font-size: 18px; }
.fenetre .actions { display: flex; gap: 8px; justify-content: flex-end; }
.etapes-aide { margin: 0; padding-left: 0; list-style: none; display: flex; flex-direction: column; gap: 10px; }
/* l'icône à gauche, le texte d'un seul tenant : en grille, le texte qui suit le mot en gras devenait un troisième
   élément, rangé dans la colonne de l'icône (26 px) — un mot par ligne (vu le 06/11) */
.etapes-aide li { position: relative; padding-left: 34px; line-height: 1.45; }
.etapes-aide li .ico { position: absolute; left: 0; top: 0; color: var(--accent); width: 22px; height: 22px; }
.meteo-resume { font-size: 13px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.meteo-resume div { background: rgba(0, 0, 0, .25); border-radius: 8px; padding: 6px 8px; display: flex; flex-direction: column; font-size: 11px; color: var(--discret); }
.meteo-resume b { font-size: 14px; color: var(--texte); }

/* ── consigne, bulle de chute, toast, étiquettes ───────────────────────────── */
#consigne { position: fixed; z-index: 10; left: 50%; top: calc(64px + var(--haut)); transform: translateX(-50%); max-width: min(560px, calc(100vw - 520px)); text-align: center;
  background: var(--fond); border: 1px solid var(--ligne); border-radius: 999px; padding: 8px 16px; font-size: 13.5px; pointer-events: none; }
#hud-chute { position: fixed; z-index: 10; left: calc(100px + var(--g)); bottom: calc(14px + var(--bas)); background: var(--fond); border: 1px solid var(--ligne); border-left: 3px solid var(--rouge);
  border-radius: 12px; padding: 10px 12px; font-size: 13px; min-width: 250px; font-variant-numeric: tabular-nums; }
#hud-chute b { font-size: 15px; }
#toast { position: fixed; z-index: 35; left: 50%; bottom: calc(22px + var(--bas)); transform: translateX(-50%); background: var(--fond-2); border: 1px solid var(--ligne-forte); border-radius: 12px; padding: 10px 16px; max-width: calc(100vw - 32px); }
#etiquettes { position: fixed; inset: 0; z-index: 5; pointer-events: none; overflow: hidden; }
.etq { position: absolute; left: 0; top: 0; transform: translate(-50%, -100%); white-space: nowrap; font-size: 12px; font-weight: 600; color: #fff;
  text-shadow: 0 1px 2px #000, 0 0 6px rgba(0, 0, 0, .8); display: flex; flex-direction: column; align-items: center; gap: 1px; will-change: transform; }
.etq small { font-weight: 500; color: #d7e0ea; font-size: 11px; }
.etq::after { content: ""; width: 1px; height: 10px; background: rgba(255, 255, 255, .7); }
.etq.sommet { color: #fff3c4; }
.etq.escalade { color: #ffd0b8; }
.etq.osm { color: #ffc4e6; }
.etq.jalon { font-size: 12px; background: rgba(10, 14, 20, .8); padding: 2px 7px; border-radius: 7px; text-shadow: none; border: 1px solid var(--ligne); }
.etq.jalon::after { display: none; }
.etq.longueur { background: rgba(214, 69, 69, .92); padding: 1px 6px; border-radius: 6px; text-shadow: none; font-size: 11.5px; }
.etq.longueur::after { display: none; }
.etq.relais { color: #ffe1a6; }
.etq.cache { opacity: 0; }

/* ── téléphone : rail en bas, panneau en tiroir ─────────────────────────────── */
@media (max-width: 820px) {
  #rail { left: 0; right: 0; top: auto; bottom: 0; flex-direction: row; justify-content: space-around; gap: 0; padding: 6px calc(4px + var(--d)) calc(6px + var(--bas)) calc(4px + var(--g));
    background: var(--fond-2); border-top: 1px solid var(--ligne); }
  #rail button { width: auto; flex: 1; border: none; background: transparent; padding: 6px 2px; font-size: 10px; border-radius: 9px; }
  #panneau { left: calc(6px + var(--g)); right: calc(6px + var(--d)); width: auto; top: auto; bottom: calc(66px + var(--bas)); max-height: 46vh; border-radius: 16px; }
  body.panneau-replie #panneau { max-height: 58px; overflow: hidden; }
  #consigne { max-width: calc(100vw - 24px); top: calc(56px + var(--haut)); font-size: 12.5px; }
  #hud-chute { left: 8px; right: 8px; bottom: calc(70px + var(--bas)); }
  .titre-site small { display: none; }
  #haut .rond span, #b-jour span { display: none; }
  .choix-qualite { display: none; }
  #haut { gap: 6px; }
  .titre-site { flex: 1 1 auto; }
  .titre-site b { font-size: 14px; }
  .choix-echelle select { max-width: 34vw; text-overflow: ellipsis; }
  .haut-droite { gap: 6px; flex: none; }
  .choix-echelle { padding-left: 7px; }
  .chiffres { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 820px) and (orientation: landscape) {
  #panneau { left: auto; width: 360px; top: 58px; bottom: calc(66px + var(--bas)); max-height: none; }
}

/* ── topo ──────────────────────────────────────────────────────────────────── */
#topo-impression { display: none; }
.topo { color: #111; background: #fff; font: 12px/1.4 var(--police); }
.topo h1 { font-size: 22px; margin: 0 0 4px; }
.topo h2 { font-size: 14px; margin: 14px 0 6px; border-bottom: 2px solid #111; padding-bottom: 2px; }
.topo .grille-topo { display: grid; grid-template-columns: 300px 1fr; gap: 18px; align-items: start; }
.topo table { border-collapse: collapse; width: 100%; font-variant-numeric: tabular-nums; }
.topo th, .topo td { border-bottom: 1px solid #ccc; padding: 3px 4px; text-align: left; vertical-align: top; }
.topo .sources-topo { font-size: 10px; color: #444; margin-top: 12px; }
.apercu-topo { background: #fff; border-radius: 10px; padding: 12px; color: #111; overflow: auto; max-height: 64vh; }
.apercu-topo .topo .grille-topo { grid-template-columns: 1fr; }
@media print {
  @page { size: A4; margin: 12mm; }
  body { background: #fff !important; overflow: visible !important; height: auto; }
  body > *:not(#topo-impression) { display: none !important; }
  #topo-impression { display: block !important; }
  .topo .grille-topo { grid-template-columns: 290px 1fr; }
  .topo h2 { break-after: avoid; }
  .topo tr { break-inside: avoid; }
}

/* ── prise de vue (sonde __guide.photo) : l'image seule ─────────────────────────────────────── */
body.photo #haut, body.photo #rail, body.photo #panneau, body.photo #consigne, body.photo #hud-chute, body.photo #toast { display: none !important; }
body.photo:not(.photo-etiquettes) #etiquettes { display: none !important; }
body.photo:not(.photo-legende) #legende-m3d { display: none !important; }

/* ── Parcours (sortie accompagnée) ───────────────────────────────────────────────────────────── */
#panneau h3 .etape { display: inline-grid; place-items: center; width: 20px; height: 20px; margin-right: 8px; border-radius: 50%; background: var(--accent); color: #1b0f08; font-size: 11.5px; font-weight: 800; vertical-align: 1px; }
.puces { display: flex; flex-wrap: wrap; gap: 6px; }
.puces button { padding: 6px 10px; font-size: 12.5px; }
.puces button[aria-pressed="true"] { background: rgba(255, 122, 69, .2); border-color: var(--accent); color: #fff; }
label.rythme { display: flex; flex-direction: column; gap: 4px; margin-top: 8px; font-size: 12.5px; color: var(--discret); }
label.rythme b { color: var(--texte); }
label.rythme input { accent-color: var(--accent); }
.arret { border: 1px solid var(--ligne); border-radius: 12px; padding: 8px 10px; margin: 8px 0; background: rgba(255, 255, 255, .03); }
.arret-tete { display: flex; align-items: center; gap: 8px; }
.arret-tete .num { flex: none; width: 26px; height: 26px; padding: 0; border-radius: 50%; display: grid; place-items: center; font-weight: 800; font-size: 12.5px; background: var(--accent); color: #1b0f08; border: none; }
.arret-tete input { flex: 1; min-width: 0; font-weight: 600; }
.arret-tete small { flex: none; color: var(--discret); font-size: 11.5px; text-align: right; }
.arret label.arret-min { display: flex; flex-direction: row; align-items: center; gap: 6px; margin: 6px 0 0; font-size: 12px; color: var(--discret); }
.arret label.arret-min input { width: 64px; }
.arret textarea { width: 100%; margin-top: 6px; min-height: 64px; resize: vertical; font: inherit; font-size: 13px; line-height: 1.45; }
.arret-meteo { display: flex; gap: 6px; align-items: center; margin-top: 5px; font-size: 12px; color: #cfe8ff; }
.arret-meteo .ico { width: 15px; height: 15px; flex: none; }
.arret-outils { margin-top: 6px; gap: 6px; }
.arret-outils button { padding: 4px 9px; font-size: 12px; }
.arret-outils button[aria-pressed="true"] { background: rgba(90, 184, 239, .22); border-color: var(--bleu); }
.recit-propose { margin: 8px 0 4px; padding: 8px 10px; border-left: 3px solid var(--accent-2); background: rgba(255, 179, 107, .08); border-radius: 0 8px 8px 0; font-size: 12.5px; line-height: 1.45; }
.recit-propose b { display: block; margin-bottom: 2px; color: var(--accent-2); }
.table.meteo-parcours td, .table.meteo-parcours th { font-size: 12px; }
.recit-topo { white-space: normal; }

/* ── Météo 3D (METEO3D sur le relief) ────────────────────────────────────────────────────────── */
#b-m3d[aria-pressed="true"] { background: rgba(90, 184, 239, .22); border-color: var(--bleu); color: #dff2ff; }
#legende-m3d { position: fixed; z-index: 10; left: calc(100px + var(--g)); bottom: calc(14px + var(--bas)); width: min(400px, calc(100vw - 520px));
  background: var(--fond); border: 1px solid var(--ligne); border-left: 3px solid var(--bleu); border-radius: var(--r); padding: 10px 12px 9px; font-size: 12.5px; line-height: 1.45; }
#legende-m3d .lm-tete { display: flex; align-items: center; gap: 8px; }
#legende-m3d .lm-tete b { font-size: 13.5px; }
#legende-m3d .lm-tete span { color: var(--discret); flex: 1; }
#legende-m3d .lm-tete .rond { width: 30px; height: 30px; padding: 0; }
#legende-m3d .lm-heure { display: flex; flex-direction: row; align-items: center; gap: 10px; margin: 6px 0 4px; color: var(--discret); }
#legende-m3d .lm-heure input { flex: 1; accent-color: var(--bleu); }
#legende-m3d .lm-ligne { display: flex; gap: 8px; align-items: baseline; margin: 3px 0; }
#legende-m3d .lm-nappe { flex: none; width: 18px; height: 9px; border-radius: 3px; border: 1px solid rgba(255, 255, 255, .55); }
#legende-m3d .lm-nappe.iso { background: rgba(111, 191, 255, .55); }
#legende-m3d .lm-nappe.nuage { background: rgba(214, 222, 230, .55); }
#legende-m3d .lm-vent { flex: none; width: 18px; height: 3px; border-radius: 2px; background: linear-gradient(90deg, #6ee7a8, #ffe066); transform: translateY(-3px); }
#legende-m3d .lm-alerte { color: var(--accent-2); }
#legende-m3d .lm-palette { display: flex; align-items: center; gap: 8px; margin: 6px 0 2px; color: var(--discret); font-size: 11.5px; }
#legende-m3d .lm-palette i { flex: 1; height: 6px; border-radius: 3px; background: linear-gradient(90deg, #8fe3ff 0%, #6ee7a8 19%, #ffe066 44%, #ff9f43 69%, #ff4d6d 100%); }
#legende-m3d .lm-lien { display: inline-block; margin-top: 6px; color: var(--bleu); font-size: 12px; }
@media (max-width: 1100px) { #legende-m3d { width: min(380px, calc(100vw - 130px)); } }
@media (max-width: 820px) {
  #b-m3d span { display: none; }
  #legende-m3d { left: calc(6px + var(--g)); right: calc(6px + var(--d)); width: auto; top: calc(58px + var(--haut)); bottom: auto; max-height: 40vh; overflow: auto; font-size: 12px; }
}

/* ── l'avertissement permanent (toujours à l'écran dans la scène) ──────────────────────────────── */
#avert-permanent { position: fixed; z-index: 13; left: calc(100px + var(--g)); right: calc(414px + var(--d)); bottom: calc(10px + var(--bas)); display: flex; align-items: center; justify-content: center; gap: 8px;
  margin: 0 auto; width: fit-content; max-width: calc(100vw - 530px); padding: 5px 6px 5px 11px; border-radius: 999px; background: rgba(11, 15, 21, .82); border: 1px solid rgba(242, 214, 73, .38);
  font-size: 12px; line-height: 1.3; color: #f5ecc4; box-shadow: 0 6px 18px rgba(0, 0, 0, .35); }
#avert-permanent .ico { width: 16px; height: 16px; color: var(--jaune); flex: none; }
#avert-permanent .court { display: none; }
#avert-permanent button { padding: 3px 10px; font-size: 11.5px; border-radius: 999px; background: rgba(242, 214, 73, .14); border-color: rgba(242, 214, 73, .45); color: #fff3c4; flex: none; }
#hud-chute { bottom: calc(52px + var(--bas)); }
body.photo #avert-permanent { display: none !important; }
.liste-securite { margin: 0; padding-left: 18px; display: flex; flex-direction: column; gap: 8px; font-size: 13.5px; line-height: 1.45; }
.liste-securite b { color: #fff3c4; }

/* ── le modèle de corde, dit dans le panneau Voie ───────────────────────────────────────────────── */
.modele { display: grid; grid-template-columns: 18px 1fr; gap: 8px; align-items: start; font-size: 12.5px; line-height: 1.45; padding: 9px 10px; border-radius: 10px;
  background: rgba(224, 64, 251, .09); border: 1px solid rgba(224, 64, 251, .32); }
.modele > .ico { width: 18px; height: 18px; color: #f0a6ff; margin-top: 1px; }
.modele b { color: #f6d4ff; }
.modele details { margin-top: 6px; }
.modele summary { cursor: pointer; color: #f0a6ff; font-weight: 600; }
.modele details p { margin: 6px 0 0; color: #dfe6ee; }
.pourquoi b { color: var(--accent-2); font-weight: 600; }

/* ── l'accueil : la visite guidée ───────────────────────────────────────────────────────────────── */
.carte-visite { display: flex; gap: 14px; align-items: center; text-align: left; width: 100%; padding: 14px 16px; margin: 14px 0 4px; border-radius: 14px;
  background: linear-gradient(120deg, rgba(255, 122, 69, .22), rgba(224, 64, 251, .12)); border: 1px solid rgba(255, 122, 69, .55); }
.carte-visite:hover { filter: brightness(1.1); }
.carte-visite > .ico { width: 34px; height: 34px; flex: none; color: #fff; background: var(--accent); border-radius: 50%; padding: 8px; }
.carte-visite b { display: block; font-size: 16px; }
.carte-visite small { display: block; color: #e6ecf2; line-height: 1.4; margin-top: 2px; }

/* ── la visite guidée pas à pas ─────────────────────────────────────────────────────────────────── */
#visite { position: fixed; inset: 0; z-index: 40; pointer-events: none; }
.visite-halo { position: fixed; border-radius: 12px; border: 2px solid var(--accent-2); box-shadow: 0 0 0 4px rgba(255, 179, 107, .25), 0 0 0 9999px rgba(4, 7, 11, .38);
  transition: left .25s, top .25s, width .25s, height .25s; pointer-events: none; }
.visite-bulle { position: fixed; pointer-events: auto; width: min(380px, calc(100vw - 24px)); background: var(--fond-2); border: 1px solid var(--ligne-forte); border-radius: 16px;
  padding: 14px 14px 12px; box-shadow: 0 18px 50px rgba(0, 0, 0, .55); display: flex; flex-direction: column; gap: 10px; transition: left .25s, top .25s; }
.visite-tete { display: flex; align-items: center; gap: 8px; }
.visite-tete b { font-size: 16px; flex: 1; }
.visite-tete .rond { width: 30px; height: 30px; padding: 0; display: grid; place-items: center; }
.visite-num { display: inline-grid; place-items: center; min-width: 26px; height: 26px; padding: 0 6px; border-radius: 13px; background: var(--accent); color: #200a00; font-weight: 800; font-size: 12px; }
.visite-texte { font-size: 13.5px; line-height: 1.5; color: #e6ecf2; }
.visite-texte p { margin: 0 0 6px; }
.visite-texte .discret { font-size: 12px; }
.visite-points { display: flex; gap: 5px; justify-content: center; }
.visite-points i { width: 7px; height: 7px; border-radius: 50%; background: rgba(255, 255, 255, .22); }
.visite-points i.fait { background: var(--accent-2); }
.visite-points i.ici { background: var(--accent); transform: scale(1.35); }
.visite-bulle .actions { display: flex; justify-content: space-between; gap: 8px; }

@media (max-width: 1100px) { #avert-permanent { max-width: calc(100vw - 520px); } #avert-permanent .long { display: none; } #avert-permanent .court { display: inline; } }
@media (max-width: 820px) {
  #avert-permanent { left: calc(6px + var(--g)); right: calc(6px + var(--d)); bottom: calc(68px + var(--bas)); max-width: none; width: auto; font-size: 11px; padding: 4px 5px 4px 9px; justify-content: space-between; }
  #panneau { bottom: calc(100px + var(--bas)); }
  #hud-chute { bottom: calc(104px + var(--bas)); z-index: 12; }      /* au-dessus du tiroir, le temps de la chute */
}