/* Immerhof — une interface de visite, sobre et lisible sous terre. */
:root {
  color-scheme: dark;
  --sol: #101c19;
  --beton: #172521;
  --beton-haut: #20322b;
  --trait: #33443b;
  --trait-fort: #536153;
  --chaux: #f1eddf;
  --chaux-2: #b8c1ae;
  --chaux-3: #9ba897;
  --minium: #bd7958;
  --minium-vif: #e3a07b;
  --voyant: #b1c795;
  --ui: "Archivo", "Segoe UI", system-ui, -apple-system, sans-serif;
  --plaque: "Barlow Condensed", "Arial Narrow", sans-serif;
  --lecteur-h: 180px;
}
* { box-sizing: border-box; }
[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 24px; }
body { margin: 0; background: var(--sol); color: var(--chaux); font: 16px/1.55 var(--ui); -webkit-font-smoothing: antialiased; background-image: radial-gradient(ellipse at 0 0, #233b2c88, transparent 55%); }
body.lecteur-actif { padding-bottom: calc(var(--lecteur-h) + env(safe-area-inset-bottom, 0px)); }
button, input, a { -webkit-tap-highlight-color: transparent; }
button { font: inherit; cursor: pointer; }
button:focus-visible, input:focus-visible, a:focus-visible { outline: 2px solid var(--minium-vif); outline-offset: 5px; }
button:disabled { cursor: wait; }
svg { width: 24px; height: 24px; }
.app-shell { max-width: 1220px; margin: auto; padding: env(safe-area-inset-top, 0px) 48px 34px; }
.topbar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px; padding: 30px 0; border-bottom: 1px solid var(--trait); }
.identite { display: flex; align-items: center; gap: 13px; text-decoration: none; color: inherit; }
.embleme { width: 44px; height: 44px; border-radius: 50%; padding: 3px; background: #fff; object-fit: contain; }
.brand { margin: 0; font-family: var(--plaque); font-size: 27px; font-weight: 600; line-height: 1; letter-spacing: .16em; }
.subtitle { margin: 6px 0 0; color: var(--chaux-3); font-size: 10px; letter-spacing: .08em; text-transform: uppercase; }
.topbar-actions { display: flex; align-items: center; gap: 10px; margin-left: auto; }
.btn-plein { display: grid; place-items: center; width: 44px; height: 44px; color: var(--chaux-2); background: transparent; border: 1px solid var(--trait); border-radius: 50%; }
.btn-plein svg { width: 18px; height: 18px; fill: currentColor; }
.status-dot { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 10px 15px; border: 1px solid var(--trait); border-radius: 30px; background: #192820; color: var(--chaux-2); font-size: 11px; white-space: nowrap; }
.voyant { width: 6px; height: 6px; border-radius: 50%; background: var(--chaux-3); }
.status-dot[data-etat="pret"] { color: var(--voyant); border-color: #526347; }
.status-dot[data-etat="pret"] .voyant { background: var(--voyant); box-shadow: 0 0 9px #b1c79555; }
.status-dot[data-etat="encours"] .voyant { background: var(--minium-vif); animation: pulse 1.3s infinite; }
.status-dot[data-etat="erreur"] { border-color: var(--minium); color: var(--minium-vif); }
.status-dot[data-etat="erreur"] .voyant { background: var(--minium-vif); }
.visite-layout { display: grid; grid-template-columns: minmax(0, .95fr) minmax(0, 1.05fr); gap: 64px; padding: 48px 0 46px; align-items: start; }
.introduction { position: sticky; top: 32px; }
.intro-carte { position: relative; overflow: hidden; border: 1px solid #49604a; border-radius: 6px; background: linear-gradient(135deg, #2f4532, #203127 75%); padding: 35px 34px 30px; }
.intro-carte::after { content: ""; position: absolute; width: 320px; height: 320px; border: 1px solid #ffffff0a; border-radius: 50%; right: -190px; top: 35px; box-shadow: 0 0 0 34px #ffffff03, 0 0 0 68px #ffffff02; pointer-events: none; }
.eyebrow { margin: 0; color: var(--chaux-2); font-size: 10px; letter-spacing: .16em; text-transform: uppercase; }
.intro-carte .eyebrow { display: flex; align-items: center; gap: 8px; color: #c7d2b4; }
.eyebrow > span { width: 5px; height: 5px; background: var(--minium-vif); border-radius: 50%; }
h1 { position: relative; z-index: 1; font-family: Georgia, "Times New Roman", serif; font-weight: 400; font-size: clamp(42px, 4.8vw, 62px); letter-spacing: -.045em; line-height: 1.12; margin: 32px 0 22px; }
h1 em { color: #c5d0ad; font-weight: 400; }
.intro-texte { color: #bec8b3; font-size: 13px; max-width: 290px; margin: 0; line-height: 1.8; }
.onde { height: 88px; display: flex; justify-content: center; align-items: center; gap: 5px; margin: 17px 0; opacity: .75; }
.onde i { flex: 1; max-width: 3px; height: 10px; background: #a7b893; border-radius: 3px; }
.onde i:nth-child(3n) { height: 28px; }.onde i:nth-child(4n) { height: 48px; }.onde i:nth-child(5n) { height: 64px; }.onde i:nth-child(7n) { height: 36px; }
.onde i:nth-child(-n+3), .onde i:nth-last-child(-n+3) { height: 9px; background: #a7b89355; }
.intro-bas { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 8px; border-top: 1px solid #52634777; padding-top: 17px; color: #c7d0bb; font-size: 10px; letter-spacing: .03em; }
.intro-bas b { color: var(--chaux); font-size: 13px; font-weight: 500; margin-right: 3px; }
.commencer { display: flex; align-items: center; justify-content: space-between; gap: 16px; width: 100%; padding: 15px 18px; margin-top: 23px; border: 0; border-radius: 3px; background: var(--chaux); color: #253326; font-size: 12px; font-weight: 600; transition: background .2s, transform .2s; }
.commencer svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 1.5; }
.commencer:hover { background: #d8e0c4; transform: translateY(-1px); }
.horsligne-carte { display: flex; align-items: flex-start; gap: 14px; margin-top: 18px; padding: 20px 18px; background: #18261f; border: 1px solid var(--trait); border-radius: 5px; }
.horsligne-icone { display: grid; place-items: center; flex: none; width: 34px; height: 34px; background: #2c3c2d; color: #becda8; border-radius: 50%; }
.horsligne-icone svg, .cache-action svg, .conseil svg { fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.horsligne-icone svg { width: 18px; height: 18px; }
.horsligne-corps { flex: 1; min-width: 0; }
.horsligne-corps h2 { margin: 0 0 5px; font-weight: 500; font-size: 12px; }
.horsligne-corps p { margin: 0; color: var(--chaux-3); font-size: 11px; line-height: 1.7; }
.cache-action { flex: none; border: 0; background: transparent; color: var(--chaux-2); width: 44px; height: 44px; margin: -5px -9px 0 0; display: grid; place-items: center; }
.cache-action svg { width: 19px; height: 19px; }
.cache-jauge, .suivi-jauge { height: 3px; background: #354536; overflow: hidden; border-radius: 4px; }
.cache-jauge { margin-top: 13px; }
.cache-jauge span, .suivi-jauge span { display: block; height: 100%; width: 0; background: var(--voyant); transition: width .3s; }
.horsligne-carte[data-etat="erreur"] .cache-jauge span { background: var(--minium-vif); }
.conseil { display: flex; align-items: center; gap: 9px; margin: 16px 2px 0; font-size: 10px; color: var(--chaux-3); }
.conseil svg { flex: none; width: 15px; height: 15px; }
.stations-entete { display: flex; justify-content: space-between; align-items: flex-end; gap: 14px; }
.stations-entete h2 { font: 400 28px/1.2 Georgia, serif; letter-spacing: -.02em; margin: 8px 0 0; }
.suivi { min-width: 110px; }
.stations-entete .suivi p { margin: 0 0 9px; color: var(--chaux-2); font-size: 10px; text-align: right; font-variant-numeric: tabular-nums; }
.parcours-aide { margin: 17px 0 19px; color: var(--chaux-3); font-size: 11px; }
.stations { display: flex; flex-direction: column; border-top: 1px solid var(--trait); }
.station { display: grid; grid-template-columns: 42px minmax(0, 1fr) 36px; width: 100%; align-items: center; gap: 15px; padding: 17px 12px 17px 4px; border: 0; border-bottom: 1px solid var(--trait); background: transparent; color: inherit; text-align: left; transition: background .2s; }
.station:hover { background: #27382b77; }
.station-plaque { display: grid; place-items: center; width: 40px; height: 42px; background: #223329; border: 1px solid #3b4b39; border-radius: 3px; color: #c7d2b3; font: 500 23px/1 var(--plaque); font-variant-numeric: tabular-nums; }
.station-titre { display: block; font-size: 14px; font-weight: 500; line-height: 1.45; }
.station-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; min-height: 17px; margin-top: 3px; color: var(--chaux-3); font-size: 10px; font-variant-numeric: tabular-nums; }
.station-meta .ecoute { color: var(--voyant); }.ecoute::before { content: "✓ "; }
.station-icone { width: 34px; height: 34px; display: grid; place-items: center; border: 1px solid #40503f; border-radius: 50%; color: #c6cfb5; }
.station-icone svg { width: 12px; height: 12px; fill: currentColor; }
.station.est-ecoutee .station-plaque { color: var(--voyant); border-color: #61734c; }
.station[aria-current="true"] { background: #bd795812; border-bottom-color: #bd795855; box-shadow: inset 2px 0 var(--minium-vif); padding-left: 10px; }
.station[aria-current="true"] .station-plaque { background: var(--minium); color: #101c19; border-color: var(--minium); }
.station[aria-current="true"] .station-titre { color: #efb591; }
.station[aria-current="true"] .station-icone { background: var(--minium); color: #101c19; border-color: var(--minium); }
.vu { display: none; gap: 2px; align-items: flex-end; height: 12px; }
.station[data-lecture="1"] .vu { display: inline-flex; }.station[data-lecture="1"] .duree-affichee { display: none; }
.vu i { width: 2px; background: var(--minium-vif); animation: vu .9s ease-in-out infinite; }.vu i:nth-child(1) { height: 5px; }.vu i:nth-child(2) { height: 11px; animation-delay: .18s; }.vu i:nth-child(3) { height: 7px; animation-delay: .36s; }
.ligne-progres { position: fixed; top: 0; left: 0; right: 0; z-index: 30; height: 2px; pointer-events: none; }.ligne-progres span { display: block; width: 0; height: 100%; background: var(--minium-vif); transition: width .3s, opacity .5s; }.ligne-progres.est-terminee span { opacity: 0; }
.lecteur { position: fixed; left: 0; right: 0; bottom: 0; z-index: 20; transform: translateY(115%); visibility: hidden; transition: transform .28s, visibility .28s; border-top: 1px solid #536153; background: #1c2b23f5; padding: 15px 24px calc(14px + env(safe-area-inset-bottom, 0px)); box-shadow: 0 -12px 40px #0005; backdrop-filter: blur(16px); }
.lecteur.est-visible { transform: translateY(0); visibility: visible; }.lecteur-inner { max-width: 700px; margin: auto; display: flex; flex-direction: column; gap: 8px; }
.lecteur-haut { display: flex; justify-content: space-between; align-items: center; gap: 12px; min-width: 0; }.lecteur-haut > div:first-child { min-width: 0; }
.lecteur-label { margin: 0 0 4px; color: var(--chaux-3); font-size: 8px; text-transform: uppercase; letter-spacing: .15em; }
.lecteur-titre { font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }.lecteur-titre b { font: 500 18px var(--plaque); color: var(--minium-vif); margin-right: 12px; }
.lecteur-temps { flex: none; color: var(--chaux-2); font-size: 10px; font-variant-numeric: tabular-nums; }.lecteur-message { font-size: 11px; color: #efb591; margin: 0; }
.scrub { -webkit-appearance: none; appearance: none; width: 100%; height: 24px; margin: -3px 0; background: transparent; cursor: pointer; }
.scrub::-webkit-slider-runnable-track { height: 3px; border-radius: 3px; background: linear-gradient(var(--minium-vif),var(--minium-vif)) 0/var(--avancement,0%) 100% no-repeat,#42503a; }
.scrub::-moz-range-track { height: 3px; border-radius: 3px; background: linear-gradient(var(--minium-vif),var(--minium-vif)) 0/var(--avancement,0%) 100% no-repeat,#42503a; }
.scrub::-webkit-slider-thumb { -webkit-appearance: none; width: 13px; height: 13px; margin-top: -5px; border: 0; border-radius: 50%; background: var(--minium-vif); }.scrub::-moz-range-thumb { width: 13px; height: 13px; border: 0; border-radius: 50%; background: var(--minium-vif); }
.lecteur-commandes { position: relative; display: flex; align-items: center; justify-content: center; gap: 24px; padding: 0 50px; }
.lecteur button { display: inline-grid; place-items: center; color: var(--chaux-2); background: transparent; border: 1px solid transparent; min-width: 44px; height: 44px; padding: 0; border-radius: 50%; font-size: 11px; font-variant-numeric: tabular-nums; }.lecteur button:hover { color: var(--chaux); background: #ffffff08; }
.lecteur .principal { width: 48px; height: 48px; background: var(--chaux); color: #223027; }.lecteur .principal:hover { background: #d8e0c4; }.principal svg { width: 17px; height: 17px; fill: currentColor; }
.lecteur .fermer { position: absolute; right: 0; top: 2px; }.fermer svg { width: 16px; height: 16px; fill: currentColor; }
footer { border-top: 1px solid var(--trait); padding-top: 24px; display: flex; align-items: center; justify-content: space-between; gap: 20px; color: var(--chaux-3); font-size: 10px; }footer strong { display: block; margin-bottom: 5px; font-size: 11px; font-weight: 500; color: var(--chaux-2); }footer span { display: block; }.footer-note { font: italic 15px Georgia, serif; color: #b5c19d; }
@keyframes pulse { 50% { opacity: .4; } }@keyframes vu { 0%,100% { transform: scaleY(.45); }50% { transform: scaleY(1); } }
@media (min-width: 1400px) { .app-shell { max-width: 1320px; }.visite-layout { gap: 88px; } }
@media (max-width: 860px) { .app-shell { padding-inline: 28px; }.visite-layout { gap: 30px; }.intro-carte { padding: 28px 24px; }h1 { font-size: 45px; }.station { gap: 10px; }.station-titre { font-size: 13px; }.horsligne-carte { padding: 16px 13px; gap: 10px; } }
@media (max-width: 640px) {
  .app-shell { max-width: 520px; padding-inline: 22px; padding-bottom: 28px; }.topbar { padding: 22px 0; gap: 10px; }.brand { font-size: 24px; }.subtitle { font-size: 8px; letter-spacing: .04em; }.identite { gap: 9px; }.embleme { width: 35px; height: 35px; }.status-dot { padding: 8px 10px; font-size: 10px; }.topbar-actions { gap: 6px; }.btn-plein { width: 36px; height: 44px; border: 0; }.btn-plein svg { width: 16px; height: 16px; }
  .visite-layout { display: flex; flex-direction: column; gap: 32px; padding: 24px 0 32px; }.introduction { position: static; width: 100%; }.intro-carte { padding: 25px 25px 23px; }.intro-carte .eyebrow { font-size: 8px; }h1 { margin: 22px 0 16px; font-size: 47px; }.intro-texte { font-size: 12px; max-width: 270px; }.onde { position: absolute; top: 51px; right: -50px; width: 135px; height: 120px; opacity: .12; transform: rotate(-10deg); }.intro-bas { margin-top: 22px; font-size: 9px; }.commencer { margin-top: 20px; padding: 15px 16px; }.horsligne-carte { margin-top: 13px; padding: 17px 16px; }.conseil { font-size: 9px; margin-top: 13px; }.parcours-section { width: 100%; }.stations-entete h2 { font-size: 27px; }.parcours-aide { margin: 15px 0 17px; }.station { padding-block: 17px; gap: 14px; }.station-titre { font-size: 14px; }.station-meta { font-size: 10px; }.station-plaque { height: 42px; }.station-icone { width: 32px; height: 32px; }footer { align-items: flex-start; flex-direction: column; gap: 16px; }.footer-note { font-size: 14px; }.lecteur { padding-inline: 22px; }.lecteur-commandes { gap: 20px; }
}
@media (max-width: 370px) { .app-shell { padding-inline: 16px; }.subtitle { max-width: 115px; }.brand { font-size: 21px; }.embleme { width: 30px; height: 30px; }.status-dot { padding-inline: 8px; gap: 5px; }.topbar-actions { gap: 1px; }.intro-carte { padding-inline: 22px; }h1 { font-size: 41px; }.station { gap: 10px; grid-template-columns: 40px minmax(0, 1fr) 32px; }.station-titre { font-size: 13px; }.lecteur-titre { font-size: 12px; } }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; }*,*::before,*::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; } }

/* État de fin : même palette, affiché uniquement après toutes les écoutes. */
.fin-visite { margin-top: 18px; padding: 22px 20px; border: 1px solid #61734c; border-radius: 5px; background: #223329; }
.fin-visite h2 { margin: 10px 0; font: 400 27px/1.2 Georgia, serif; color: var(--chaux); }
.fin-visite > p:last-child { margin: 0; font-size: 12px; line-height: 1.75; color: var(--chaux-2); }

/* Après nettoyage réussi, seul cet écran est accessible dans cette session. */
html.session-terminee, body.session-terminee { overflow: hidden; }
body.session-terminee { padding-bottom: 0; }
body.session-terminee .app-shell,
body.session-terminee .lecteur,
body.session-terminee .ligne-progres { display: none !important; }
.ecran-final {
  position: fixed; inset: 0; z-index: 100;
  display: flex; align-items: center; justify-content: center;
  width: 100%; height: 100%; height: 100dvh;
  overflow: auto; overscroll-behavior: contain;
  padding: max(28px, env(safe-area-inset-top, 0px)) max(24px, env(safe-area-inset-right, 0px)) max(28px, env(safe-area-inset-bottom, 0px)) max(24px, env(safe-area-inset-left, 0px));
  background: radial-gradient(ellipse at 50% 20%, #2f4532 0%, var(--sol) 75%);
  color: var(--chaux); text-align: center;
}
.ecran-final:focus { outline: none; }
.ecran-final-contenu { width: 100%; max-width: 520px; margin: auto; }
.ecran-final .eyebrow { font-size: 10px; line-height: 1.8; }
.ecran-final-signe { display: grid; place-items: center; width: 64px; height: 64px; margin: 32px auto 24px; border: 1px solid #61734c; border-radius: 50%; background: #223329; color: var(--voyant); }
.ecran-final-signe svg { width: 28px; height: 28px; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.ecran-final h1 { margin: 0 0 22px; font-size: clamp(36px, 7vw, 58px); line-height: 1.12; }
.ecran-final-contenu > p:not(.eyebrow) { margin: 0; font-size: 14px; line-height: 1.8; }
.ecran-final-contenu > .ecran-final-detail { margin-top: 22px; color: var(--chaux-2); font-size: 12px; }

/* Préparation discrète : la pastille conserve la commande de reprise. */
#horsligneCarte, #ligneProgres { display: none !important; }
.visite-prete { margin: 1rem 0; color: var(--texte, #f2eee5); font-size: 1.05rem; font-weight: 600; }
.visite-prete::before { content: "✓"; margin-right: .6em; color: #a5c4aa; }

/* Animations des seuls états visuels existants de fin de visite. */
.ecran-final:not([hidden]) { animation: fin-fondu .2s ease-out both; }
.ecran-final[data-etat="attente"] #ecranFinalTitre { animation: fin-entree .24s .04s ease-out both; }
.ecran-final[data-etat="attente"] #ecranFinalMerci { animation: fin-entree .24s .10s ease-out both; }
.ecran-final[data-etat="attente"] #ecranFinalDetail { animation: fin-entree .24s .18s ease-out both; }
.ecran-final[data-etat="attente"] #ecranFinalConsigne { animation: fin-entree .24s .26s ease-out both; }
.attente-signe { display: flex; justify-content: center; gap: 6px; margin-top: 26px; }
.attente-signe i { width: 3px; height: 3px; border-radius: 50%; background: var(--chaux-2); opacity: .45; animation: fin-souffle 2.4s ease-in-out infinite; }
.attente-signe i:nth-child(2) { animation-delay: .2s; }
.attente-signe i:nth-child(3) { animation-delay: .4s; }
.ecran-final[data-etat="confirme"] .ecran-final-contenu:not(.ecran-final-sortant) .attente-signe { display: none; }
.ecran-final-signe { border: 0; background: transparent; }
.ecran-final-signe svg { width: 64px; height: 64px; stroke-width: 1.8; }
.ecran-final-sortant { position: absolute; left: 50%; top: 50%; width: calc(100% - 48px); margin: 0; transform: translate(-50%, -50%); pointer-events: none; animation: fin-sortie .16s ease-in both; }
.validation-animee #ecranFinalTitre,
.validation-animee #ecranFinalMerci { animation: fin-entree .22s .16s ease-out both; }
.validation-animee .ecran-final-contenu:not(.ecran-final-sortant) .ecran-final-signe { animation: fin-validation .14s .74s ease-out both; }
.validation-animee .validation-cercle { stroke-dasharray: 1; animation: fin-trace .36s .16s ease-out both; }
.validation-animee .validation-coche { stroke-dasharray: 1; animation: fin-trace .22s .52s ease-out both; }
.validation-animee #ecranFinalDetail { animation: fin-entree .24s .88s ease-out both; }
@keyframes fin-fondu { from { opacity: 0; } to { opacity: 1; } }
@keyframes fin-entree { from { opacity: 0; transform: translateY(5px); } to { opacity: 1; transform: translateY(0); } }
@keyframes fin-sortie { from { opacity: 1; } to { opacity: 0; } }
@keyframes fin-souffle { 0%, 100% { opacity: .35; } 50% { opacity: .65; } }
@keyframes fin-trace { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }
@keyframes fin-validation { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.035); } }
@media (prefers-reduced-motion: reduce) {
  .ecran-final, .ecran-final * { animation: none !important; transition: none !important; }
  .ecran-final-sortant { display: none; }
  .ecran-final .validation-cercle, .ecran-final .validation-coche { stroke-dashoffset: 0; }
}