/* © 2026 IDLES — Tous droits réservés. */
:root {
  --primary: #b0713f;
  --primary-dark: #8f5527;
  --bg: #f7f3ee;
  --card: #ffffff;
  --text: #2b2118;
  --muted: #8a7a6a;
  --ok: #2e7d32;
  --wait: #b26a00;
}

* { margin: 0; padding: 0; box-sizing: border-box; }

html, body {
  height: 100%;
  background: var(--bg);
  color: var(--text);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  -webkit-font-smoothing: antialiased;
}

#app { min-height: 100%; display: flex; flex-direction: column; }

.loading { margin: auto; color: var(--muted); }

/* ---------- En-tête ---------- */
.topbar {
  display: flex; align-items: center; gap: 12px;
  padding: calc(env(safe-area-inset-top, 0px) + 14px) 16px 14px;
  background: var(--primary); color: #fff;
  position: sticky; top: 0; z-index: 10;
}
.topbar .back {
  background: none; border: none; color: #fff; font-size: 22px;
  line-height: 1; padding: 4px 8px; cursor: pointer;
}
.topbar h1 { font-size: 17px; font-weight: 600; flex: 1; }

/* ---------- Accueil / listes ---------- */
.hero {
  padding: 48px 24px 32px; text-align: center;
  background: linear-gradient(160deg, var(--primary), var(--primary-dark));
  color: #fff;
}
.hero .logo { display: flex; justify-content: center; opacity: .95; }
.hero h1 { font-size: 26px; margin-top: 10px; font-weight: 700; }
.hero h1.hero-logo img { display: block; margin: 0 auto; max-height: 48px; max-width: 72%; }
.hero.thin h1.hero-logo img { max-height: 40px; }
.hero p { opacity: .85; margin-top: 6px; font-size: 14px; }

.list { padding: 16px; display: flex; flex-direction: column; gap: 12px; }

.card {
  display: flex; align-items: center; gap: 14px;
  background: var(--card); border-radius: 14px; padding: 14px;
  border: none; text-align: left; width: 100%; cursor: pointer;
  box-shadow: 0 1px 4px rgba(43, 33, 24, .08);
  font: inherit; color: inherit;
}
.card:active { transform: scale(.99); }
.card .num {
  min-width: 44px; height: 44px; border-radius: 50%;
  background: var(--bg); color: var(--primary-dark);
  display: flex; align-items: center; justify-content: center;
  font-weight: 700; font-size: 18px;
}
.card.sync-poi .num { background: var(--primary); color: #fff; }

/* Vignette du point d'écoute dans la liste. Le numéro est posé DESSUS :
   il correspond aux étiquettes en salle, il ne doit jamais disparaître. */
.card .thumb {
  position: relative; width: 60px; height: 60px; flex: none;
  border-radius: 14px; overflow: hidden; background: var(--bg);
}
.card .thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.card .thumb .tnum {
  position: absolute; left: 4px; bottom: 4px;
  min-width: 21px; height: 21px; padding: 0 6px; border-radius: 999px;
  background: rgba(0, 0, 0, .6); color: #fff;
  font-size: 12px; font-weight: 700; line-height: 1;
  display: flex; align-items: center; justify-content: center;
}
/* Sans photo : même emprise, pour que la liste reste alignée */
.card.poi-card .num { min-width: 60px; width: 60px; height: 60px; border-radius: 14px; }
.card .meta { flex: 1; }
.card .meta .t { font-weight: 600; font-size: 16px; }
.card .meta .s { color: var(--muted); font-size: 13px; margin-top: 2px; }
.card .chev { color: var(--muted); font-size: 20px; }
/* ---------- Cartel et « en savoir plus » ---------- */
.cartel { margin: 14px 0 0; display: flex; flex-direction: column; gap: 6px; }
.cartel > div { display: flex; gap: 10px; align-items: baseline; }
.cartel dt {
  flex: 0 0 88px; font-size: 11px; font-weight: 700; text-transform: uppercase;
  letter-spacing: .04em; color: var(--muted);
}
.cartel dd { margin: 0; font-size: 14px; line-height: 1.4; }

.more-toggle {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  width: 100%; margin-top: 16px; padding: 12px 14px;
  background: var(--card); border: 1px solid #eee5da; border-radius: 12px;
  font: inherit; font-weight: 600; font-size: 15px; color: var(--primary-dark);
  cursor: pointer; text-align: left;
}
.more-toggle svg { flex: none; transition: transform .25s ease; }
.more-toggle.open svg { transform: rotate(180deg); }
.more-body {
  margin-top: 10px; padding: 2px 2px 4px;
  font-size: 14.5px; line-height: 1.6; white-space: pre-line;  /* retours du CMS conservés */
}

/* ---------- Visionneuse 360 (plein écran) ---------- */
/* Conteneur de la photo : sert d'ancrage à la pastille « Vue à 360° » */
.visual-wrap { position: relative; }
.pano-open {
  position: absolute; right: 12px; bottom: 12px; z-index: 2;
  display: inline-flex; align-items: center; gap: 7px;
  padding: 9px 15px; border-radius: 999px; border: none;
  background: rgba(0, 0, 0, .52); color: #fff; backdrop-filter: blur(6px);
  font: inherit; font-size: 13.5px; font-weight: 600; cursor: pointer;
  box-shadow: 0 2px 10px rgba(0, 0, 0, .3);
}
.pano-open svg { flex: none; }
/* Variante sans photo : bouton pleine largeur dans le corps de la fiche */
.more-toggle.pano-block span { display: inline-flex; align-items: center; gap: 8px; }

.pano-full {
  position: fixed; inset: 0; z-index: 60; background: #000;
  animation: menu-fade .2s ease;
}
.pano-full .pano-stage {
  position: absolute; inset: 0;
  touch-action: none;                 /* le doigt pilote la vue, pas le défilement */
  cursor: grab;
}
.pano-full .pano-stage:active { cursor: grabbing; }
.pano-quit {
  position: absolute; z-index: 2;
  top: calc(env(safe-area-inset-top, 0px) + 12px); left: 12px;
}
.pano-full .pano-tools { top: calc(env(safe-area-inset-top, 0px) + 12px); right: 12px; }
.pano-full .pano-hint { bottom: calc(env(safe-area-inset-bottom, 0px) + 22px); }
.pano-canvas { display: block; width: 100%; height: 100%; }
.pano-fallback { width: 100%; height: 100%; object-fit: cover; }
.pano-tools {
  position: absolute; top: 10px; right: 10px; z-index: 2;
  display: flex; flex-direction: column; gap: 8px;
}
.pano-btn {
  width: 38px; height: 38px; border-radius: 50%; border: none;
  background: rgba(0, 0, 0, .42); color: #fff; backdrop-filter: blur(6px);
  font-size: 20px; line-height: 1; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
}
.pano-btn.on { background: var(--primary); }
.pano-hint {
  position: absolute; left: 50%; bottom: 14px; transform: translateX(-50%);
  z-index: 2; padding: 7px 14px; border-radius: 999px;
  background: rgba(0, 0, 0, .5); color: #fff; font-size: 12.5px; white-space: nowrap;
  transition: opacity .5s; backdrop-filter: blur(6px);
}
.pano-hint.gone { opacity: 0; pointer-events: none; }
.pano-note {
  position: absolute; inset: auto 0 0 0; padding: 8px;
  background: rgba(0, 0, 0, .55); color: #fff; font-size: 12px; text-align: center;
}

/* ---------- Scanner de QR codes ---------- */
.scan { padding: 16px; display: flex; flex-direction: column; align-items: center; gap: 14px; }
.scan-stage {
  position: relative; width: 100%; aspect-ratio: 3 / 4; max-height: 58vh;
  background: #17120e; border-radius: 18px; overflow: hidden;
  display: flex; align-items: center; justify-content: center;
}
.scan-stage video { width: 100%; height: 100%; object-fit: cover; display: block; opacity: 0; transition: opacity .3s; }
.scan-stage.live video { opacity: 1; }
/* Viseur : quatre coins, plus lisible qu'un cadre plein */
.scan-frame { position: absolute; inset: 18% 12%; pointer-events: none; }
.scan-frame span { position: absolute; width: 30px; height: 30px; border: 3px solid #fff; opacity: .9; }
.scan-frame span:nth-child(1) { top: 0; left: 0; border-right: 0; border-bottom: 0; border-radius: 8px 0 0 0; }
.scan-frame span:nth-child(2) { top: 0; right: 0; border-left: 0; border-bottom: 0; border-radius: 0 8px 0 0; }
.scan-frame span:nth-child(3) { bottom: 0; left: 0; border-right: 0; border-top: 0; border-radius: 0 0 0 8px; }
.scan-frame span:nth-child(4) { bottom: 0; right: 0; border-left: 0; border-top: 0; border-radius: 0 0 8px 0; }
.scan-msg { text-align: center; color: var(--muted); font-size: 14px; min-height: 40px; padding: 0 8px; }
.scan-msg.ok { color: var(--primary-dark); font-weight: 700; font-size: 16px; }
.scan-msg.ko { color: #a8412f; }
.btn-primary.scan-start { display: inline-flex; align-items: center; gap: 8px; width: auto; }

/* ---------- Infos pratiques ---------- */
.info-card { align-items: flex-start; text-decoration: none; color: inherit; }
.info-card .if-icon {
  min-width: 42px; height: 42px; border-radius: 12px;
  background: var(--bg); color: var(--primary-dark);
  display: flex; align-items: center; justify-content: center;
}
.info-card .meta .t { font-weight: 600; font-size: 16px; }
.info-card .if-text {
  color: var(--muted); font-size: 14px; margin-top: 3px;
  line-height: 1.45; white-space: pre-line;      /* les retours à la ligne du CMS comptent */
}
.info-card .chev { align-self: center; }

/* Carte de parcours illustrée (écran de choix des visites) */
.tour-card {
  position: relative; display: block; width: 100%; padding: 0;
  aspect-ratio: 5 / 4; min-height: 190px;
  border: none; border-radius: 18px; overflow: hidden; cursor: pointer;
  background-color: #d9cec1; background-size: cover; background-position: center;
  box-shadow: 0 2px 10px rgba(43, 33, 24, .14);
  font: inherit; color: #fff; text-align: left;
}
.tour-card:active { transform: scale(.99); }
.tour-card .tc-text {
  position: absolute; inset: auto 0 0 0; padding: 18px 20px 20px;
  background: linear-gradient(to top, rgba(0, 0, 0, .74), rgba(0, 0, 0, .34) 52%, transparent);
}
.tour-card .tc-title {
  font-size: 26px; font-weight: 700; line-height: 1.15;
  text-shadow: 0 1px 8px rgba(0, 0, 0, .45);
}
.tour-card .tc-sub {
  font-size: 14px; margin-top: 5px; opacity: .95;
  text-shadow: 0 1px 6px rgba(0, 0, 0, .45);
}
/* Pictogrammes d'accessibilité du parcours */
.tc-acc { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.acc-chip {
  display: inline-flex; align-items: center; gap: 4px;
  font-size: 11px; font-weight: 600; padding: 3px 8px; border-radius: 999px;
  background: rgba(255, 255, 255, .92); color: var(--primary-dark);
  text-shadow: none;
}
.card .tc-acc .acc-chip { background: #eadfce; }

.badge {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: 11px; font-weight: 600;
  padding: 2px 8px; border-radius: 999px;
  background: #eadfce; color: var(--primary-dark); margin-top: 4px;
}
.badge svg { flex: none; }

.version {
  margin-top: auto; padding: 16px; text-align: center;
  color: #c3b6a6; font-size: 11px;
}

/* ---------- Accueil : bandeau fin + image plein cadre ---------- */
.hero.small { padding: 28px 24px 22px; }
.hero.thin {
  padding: calc(env(safe-area-inset-top, 0px) + 16px) 20px 14px;
}
.hero.thin h1 { font-size: 21px; margin-top: 0; line-height: 1.25; }
.hero.thin p { font-size: 13px; margin-top: 4px; }
.home-cover {
  flex: 1; position: relative; background: #1d1712 center / cover no-repeat;
  display: flex; flex-direction: column; justify-content: flex-end;
  min-height: 0;
}
.home-cover .cover-bottom {
  padding: 26px 24px calc(env(safe-area-inset-bottom, 0px) + 10px);
  background: linear-gradient(transparent, rgba(0, 0, 0, .45));
}
.btn-primary {
  width: 100%; padding: 15px; border: none; border-radius: 999px;
  background: var(--primary); color: #fff; font: inherit;
  font-size: 16px; font-weight: 600; cursor: pointer;
  box-shadow: 0 4px 18px rgba(0, 0, 0, .30);
}
.btn-primary:active { transform: scale(.99); }
.btn-primary { display: flex; align-items: center; justify-content: center; gap: 6px; }
.btn-primary.loading { opacity: .92; cursor: default; font-variant-numeric: tabular-nums; }
.cta-ring {
  width: 18px; height: 18px; border-radius: 50%; flex: none;
  border: 2.5px solid rgba(255, 255, 255, .35); border-top-color: #fff;
  animation: spin 1s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }
.version.light { color: rgba(255, 255, 255, .8); padding: 12px 0 0; margin-top: 0; }

/* ---------- Écran de code d'accès ---------- */
.access {
  flex: 1; display: flex; flex-direction: column; align-items: center;
  justify-content: center; text-align: center; padding: 24px 30px; gap: 10px;
  max-width: 380px; width: 100%; margin: 0 auto;
}
.access-icon { color: var(--primary); opacity: .9; }
.access h2 { font-size: 20px; }
.access p { color: var(--muted); font-size: 14px; margin-bottom: 8px; }
.access input {
  width: 100%; padding: 14px; border: 2px solid #e2d8ca; border-radius: 12px;
  font: inherit; font-size: 24px; font-weight: 700; text-align: center;
  letter-spacing: 5px; text-transform: uppercase; background: var(--card);
  color: var(--text); outline: none;
}
.access input:focus { border-color: var(--primary); }
.access .btn-primary { margin-top: 4px; }
.access-err { color: #b3261e; font-size: 13.5px; font-weight: 600; min-height: 18px; }

/* ---------- Choix de langue ---------- */
.lang-list .card .t { text-align: center; width: 100%; font-size: 17px; }
/* ---------- Menu (infos pratiques + langue) ---------- */
.menu-overlay {
  position: fixed; inset: 0; z-index: 50;
  background: rgba(20, 15, 10, .45); backdrop-filter: blur(2px);
  display: flex; justify-content: flex-end;
  animation: menu-fade .18s ease;
}
@keyframes menu-fade { from { opacity: 0; } }
.menu-panel {
  width: min(320px, 86vw); background: var(--bg);
  display: flex; flex-direction: column;
  padding-bottom: env(safe-area-inset-bottom, 0px);
  box-shadow: -8px 0 30px rgba(0, 0, 0, .25);
  animation: menu-slide .22s cubic-bezier(.2, .7, .3, 1);
}
@keyframes menu-slide { from { transform: translateX(100%); } }
.menu-head {
  display: flex; align-items: center; gap: 12px;
  padding: calc(env(safe-area-inset-top, 0px) + 16px) 14px 16px 18px;
  background: var(--primary); color: #fff; font-weight: 700; font-size: 16px;
}
.menu-head span { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.menu-close {
  width: 38px; height: 38px; border-radius: 50%; border: none; flex: none;
  background: rgba(255, 255, 255, .18); color: #fff; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
}
.menu-item {
  display: flex; align-items: center; gap: 14px; width: 100%;
  padding: 17px 18px; border: none; border-bottom: 1px solid #eee5da;
  background: var(--card); font: inherit; color: inherit; text-align: left; cursor: pointer;
}
.menu-item:active { background: #f2ebe2; }
.menu-item .mi-ico { color: var(--primary-dark); display: flex; flex: none; }
.menu-item .mi-label { flex: 1; font-size: 15.5px; font-weight: 600; }
.menu-item .mi-value { color: var(--muted); font-size: 13.5px; }
.menu-item .chev { color: var(--muted); font-size: 20px; }
.menu-foot { margin-top: auto; padding: 16px; text-align: center; color: #c3b6a6; font-size: 11px; }

/* ---------- Bandeau téléchargement ---------- */
.dl-banner {
  padding: 8px 16px; font-size: 13px; text-align: center;
  background: #eadfce; color: var(--primary-dark);
  display: flex; align-items: center; justify-content: center; gap: 6px;
}
.dl-banner svg { flex: none; }
.dl-banner.ok { background: #e8f5e9; color: var(--ok); }
.dl-banner.err { background: #fdecea; color: #b3261e; }
.dl-banner button {
  margin-left: 8px; border: 1px solid currentColor; background: none;
  color: inherit; border-radius: 8px; padding: 2px 10px; font-size: 12px; cursor: pointer;
}

/* ---------- Calage fin ---------- */
.calib {
  margin-top: 14px; padding: 12px 14px; border-radius: 12px;
  background: #edf1f7; color: #2e4265; font-size: 13px;
}
.calib .calib-row b { font-variant-numeric: tabular-nums; }
.calib .calib-btns { display: flex; gap: 8px; margin-top: 10px; }
.calib .calib-btns button {
  flex: 1; padding: 8px 0; border-radius: 8px; border: 1px solid #b6c4dc;
  background: #fff; color: inherit; font-size: 14px; font-weight: 600; cursor: pointer;
}
.calib .calib-help { margin-top: 8px; font-size: 11px; color: #6a7d9c; }

/* ---------- Barre de modes en bas (Liste / Clavier / Plan) ---------- */
.bottom-nav {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 18;
  display: flex; background: var(--card);
  border-top: 1px solid #eee5da;
  padding: 7px 0 calc(env(safe-area-inset-bottom, 0px) + 7px);
  box-shadow: 0 -2px 14px rgba(43, 33, 24, .07);
}
.bn-item {
  flex: 1; display: flex; flex-direction: column; align-items: center; gap: 3px;
  background: none; border: none; color: var(--muted); cursor: pointer;
  font: inherit; font-size: 11.5px; font-weight: 600; padding: 3px 0;
}
.bn-item.on { color: var(--primary); }
.tour-body { flex: 1; display: flex; flex-direction: column; min-height: 0; }
#app.has-nav .tour-body { padding-bottom: calc(env(safe-area-inset-bottom, 0px) + 74px); }
#app.has-nav .map-zoom { bottom: calc(env(safe-area-inset-bottom, 0px) + 92px); }

/* ---------- Mode clavier ---------- */
.keypad {
  flex: 1; display: flex; flex-direction: column; justify-content: center;
  padding: 18px 26px calc(env(safe-area-inset-bottom, 0px) + 22px);
  max-width: 420px; width: 100%; margin: 0 auto;
}
.kp-display {
  text-align: center; padding: 14px 10px 16px; border-radius: 14px;
  background: var(--card); box-shadow: 0 1px 4px rgba(43, 33, 24, .08);
  margin-bottom: 18px;
}
.kp-num {
  font-size: 44px; font-weight: 700; line-height: 1.15; min-height: 51px;
  color: var(--primary-dark); font-variant-numeric: tabular-nums;
}
.kp-hint { color: var(--muted); font-size: 14px; min-height: 18px; }
.kp-hint.ok { color: var(--ok); font-weight: 600; }
.kp-hint.ko { color: var(--wait); }
.kp-display.shake { animation: shake .35s; }
@keyframes shake { 25% { transform: translateX(-7px); } 50% { transform: translateX(6px); } 75% { transform: translateX(-4px); } }
.kp-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.kp-key {
  aspect-ratio: 1.35; border: none; border-radius: 14px; background: var(--card);
  font: inherit; font-size: 26px; font-weight: 600; color: var(--text);
  box-shadow: 0 1px 4px rgba(43, 33, 24, .10); cursor: pointer;
  display: flex; align-items: center; justify-content: center;
}
.kp-key:active { transform: scale(.96); }
.kp-del { color: var(--muted); }
.kp-play { background: var(--primary); color: #fff; }
.kp-play.ready { animation: pulse 1.4s infinite; }

/* ---------- Mode plan ---------- */
.floor-tabs { display: flex; gap: 6px; padding: 10px 16px 0; }
.ftab {
  padding: 8px 16px; border: 1px solid #e2d8ca; border-radius: 999px;
  background: var(--card); color: var(--muted); font: inherit; font-size: 13px;
  font-weight: 600; cursor: pointer;
}
.ftab.on { background: var(--primary-dark); border-color: var(--primary-dark); color: #fff; }
.map-scroll {
  flex: 1; overflow: auto; margin-top: 10px; position: relative;
  background: #eae4da; -webkit-overflow-scrolling: touch; min-height: 0;
}
.map-inner { position: relative; min-width: 100%; transition: width .15s ease-out; }
.map-inner img { width: 100%; display: block; user-select: none; -webkit-user-select: none; }
.map-marker {
  position: absolute; transform: translate(-50%, -50%);
  min-width: 32px; height: 32px; padding: 0 6px; border-radius: 999px;
  background: var(--primary); color: #fff; font: inherit; font-size: 15px; font-weight: 700;
  border: 2px solid #fff; box-shadow: 0 2px 8px rgba(0, 0, 0, .35); cursor: pointer;
}
.map-marker.sync { background: var(--primary-dark); }
.map-room-marker {
  position: absolute; transform: translate(-50%, -50%);
  padding: 7px 12px; border-radius: 999px; border: 2px solid #fff;
  background: #fff; color: var(--primary-dark); font: inherit; font-size: 13px; font-weight: 700;
  box-shadow: 0 2px 8px rgba(0, 0, 0, .30); cursor: pointer;
  display: flex; align-items: center; gap: 7px; white-space: nowrap;
}
.map-room-marker span {
  background: var(--primary); color: #fff; border-radius: 999px;
  min-width: 21px; height: 21px; display: flex; align-items: center; justify-content: center;
  font-size: 12px;
}
.map-zoom {
  position: fixed; right: 14px; bottom: calc(env(safe-area-inset-bottom, 0px) + 18px);
  display: flex; flex-direction: column; gap: 8px; z-index: 15;
}
.map-zoom button {
  width: 44px; height: 44px; border-radius: 50%; border: none;
  background: var(--card); color: var(--text); font-size: 24px; font-weight: 600;
  box-shadow: 0 2px 10px rgba(0, 0, 0, .25); cursor: pointer;
}
.room-sheet {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 20;
  background: var(--bg); border-radius: 18px 18px 0 0;
  box-shadow: 0 -6px 30px rgba(0, 0, 0, .25);
  padding: 14px 16px calc(env(safe-area-inset-bottom, 0px) + 16px);
  max-height: 55vh; overflow-y: auto;
}
.room-sheet .card { margin-bottom: 8px; }
.rs-head {
  display: flex; align-items: center; justify-content: space-between;
  font-size: 16px; margin-bottom: 12px; padding: 0 2px;
}
.rs-close {
  border: none; background: #eee5da; color: var(--muted); width: 30px; height: 30px;
  border-radius: 50%; font-size: 15px; cursor: pointer;
}

/* ---------- Page POI ---------- */
.poi { flex: 1; display: flex; flex-direction: column; }
.poi .visual {
  position: relative; background: #1d1712;
  aspect-ratio: 4 / 3; overflow: hidden;
}
/* Deux calques superposés qui se croisent en fondu (voir setImage) */
.poi .visual img {
  position: absolute; inset: 0;
  width: 100%; height: 100%; object-fit: cover; display: block;
  opacity: 0; transition: opacity .7s ease;
}
.poi .visual img.on { opacity: 1; }
/* POI vidéo : la vidéo garde SON cadrage. En langue des signes, rogner
   couperait les mains ou le visage — donc « contain », jamais « cover ». */
.poi .visual.video { aspect-ratio: auto; background: #000; }
.poi .visual.video video {
  display: block; width: 100%; height: auto;
  max-height: 62vh; object-fit: contain; background: #000;
}

/* Carrousel manuel : le visiteur fait défiler */
.poi .visual.carousel {
  display: flex; overflow-x: auto; scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch; scrollbar-width: none;
}
.poi .visual.carousel::-webkit-scrollbar { display: none; }
.poi .visual.carousel img {
  position: relative; inset: auto; opacity: 1;
  flex: none; width: 100%; scroll-snap-align: center; transition: none;
}
.dots {
  display: flex; gap: 7px; justify-content: center;
  padding: 10px 0 0; background: var(--bg);
}
.dots span {
  width: 7px; height: 7px; border-radius: 50%; background: #d4c8b8;
  transition: background .2s, transform .2s;
}
.dots span.on { background: var(--primary); transform: scale(1.25); }
.poi .body { padding: 20px 20px 12px; flex: 1; }
.poi h2 { font-size: 21px; }
.poi .sub { color: var(--muted); font-size: 14px; margin-top: 4px; }

.sync-status {
  margin-top: 14px; padding: 12px 14px; border-radius: 12px;
  font-size: 14px; font-weight: 600; display: flex; gap: 10px; align-items: center;
}
.sync-status.waiting { background: #fff3e0; color: var(--wait); }
.sync-status.playing { background: #e8f5e9; color: var(--ok); }
.sync-status .dot {
  width: 10px; height: 10px; border-radius: 50%; background: currentColor;
  animation: pulse 1.5s infinite;
}
@keyframes pulse { 50% { opacity: .3; } }

/* ---------- Lecteur ---------- */
.player {
  padding: 16px 20px calc(env(safe-area-inset-bottom, 0px) + 20px);
  background: var(--card); border-top: 1px solid #eee5da;
  /* Collée en bas : un texte « en savoir plus » long ne doit jamais
     emporter les commandes de lecture hors de l'écran. */
  position: sticky; bottom: 0; z-index: 3;
}
/* Sélecteur de piste : commentaire / en savoir plus */
.tracks {
  display: flex; gap: 8px; margin-bottom: 12px;
  background: var(--bg); border-radius: 999px; padding: 4px;
}
.track {
  flex: 1; padding: 8px 10px; border: none; border-radius: 999px;
  background: none; color: var(--muted); font: inherit; font-size: 13.5px; font-weight: 600;
  cursor: pointer; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.track.on { background: var(--primary); color: #fff; }

.player .times {
  display: flex; justify-content: space-between;
  font-size: 12px; color: var(--muted); font-variant-numeric: tabular-nums;
}
/* Barre de navigation dans le son : la zone tactile fait 28 px de haut pour
   être attrapable au doigt, la barre visible n'en fait que 6. */
.seek {
  position: relative; height: 28px; margin: 2px 0 8px;
  display: flex; align-items: center; cursor: pointer;
  touch-action: none;               /* le glissement pilote la barre, pas le défilement */
}
.progress { height: 6px; border-radius: 3px; background: #eee5da; width: 100%; overflow: hidden; }
.progress .fill { height: 100%; background: var(--primary); width: 0%; }
.seek .knob {
  position: absolute; top: 50%; left: 0;
  width: 16px; height: 16px; margin: -8px 0 0 -8px; border-radius: 50%;
  background: var(--primary); border: 2px solid var(--card);
  box-shadow: 0 1px 3px rgba(0, 0, 0, .28); pointer-events: none;
  transition: transform .12s ease;
}
.seek.scrub .knob { transform: scale(1.35); }
.seek.locked { cursor: default; opacity: .9; touch-action: auto; }
.controls { display: flex; justify-content: center; align-items: center; gap: 22px; }
.btn-skip {
  width: 52px; height: 52px; border-radius: 50%;
  background: none; border: none; color: var(--text);
  display: flex; align-items: center; justify-content: center; cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.btn-skip:active { background: #eee5da; }
.btn-play {
  width: 64px; height: 64px; border-radius: 50%;
  background: var(--primary); color: #fff; border: none;
  font-size: 24px; cursor: pointer; display: flex; align-items: center; justify-content: center;
}
.btn-play:disabled { opacity: .45; }
.player .hint { text-align: center; color: var(--muted); font-size: 12px; margin-top: 10px; }

/* ---------- écran de marque au lancement ----------
   Le logo entre en fondu et DÉRIVE lentement en échelle pendant toute sa
   vie (respiration continue, façon ouverture de documentaire), puis tout
   l'écran s'efface longuement. Suppression sur transitionend, jamais en
   plein vol — Safari coupait la sortie. */
/* Trois actes : le logo entre lentement et dérive ; il se DISSOUT sur fond
   nu (.bye — le voile reste opaque, les langues restent invisibles) ; un
   souffle de silence, puis le voile se lève (.out). Jamais de langues qui
   transparaissent à travers le logo. */
.splash {
  position: fixed; inset: 0; z-index: 100;
  display: flex; align-items: center; justify-content: center;
  background: var(--bg, #fff);
  opacity: 1; transition: opacity .7s ease;
  will-change: opacity;
}
.splash img {
  max-width: 62%; max-height: 40%;
  opacity: 0; transform: scale(.94);
  transition: opacity 1.1s ease, transform 4.4s cubic-bezier(.22, .61, .36, 1);
  will-change: opacity, transform;
}
.splash.in img { opacity: 1; transform: scale(1.04); }
.splash.bye img { opacity: 0; transition: opacity .85s ease, transform 4.4s cubic-bezier(.22, .61, .36, 1); }
.splash.out { opacity: 0; }

/* pastille d'état GPS — visible sur les pages de parcours seulement */
.gps-chip {
  position: fixed; left: 50%; transform: translateX(-50%);
  bottom: calc(68px + env(safe-area-inset-bottom));
  z-index: 40; max-width: 92%;
  background: rgba(20, 23, 28, .82); color: #fff;
  font-size: 12px; padding: 6px 12px; border-radius: 999px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.gps-chip.ko { background: rgba(179, 38, 30, .92); }