:root {
  --cream: #fdf8f3;
  --cream-dark: #f3e9dd;
  --blush: #eccdc4;
  --blush-dark: #dba99d;
  --gold: #b8935f;
  --gold-light: #d8bd8e;
  --green: #6b7a5e;
  --ink: #3a332e;
  --ink-light: #7a7069;
  --white: #ffffff;
  --danger: #c0645a;
  --radius: 16px;
  --shadow: 0 4px 16px rgba(58, 51, 46, 0.08);
  --shadow-lg: 0 8px 30px rgba(58, 51, 46, 0.14);
  font-size: 16px;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  height: 100%;
  background: var(--cream);
  color: var(--ink);
  font-family: "Quicksand", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  -webkit-tap-highlight-color: transparent;
  overscroll-behavior-y: none;
}

h1, h2, h3, .serif {
  font-family: "Autour One", Georgia, "Iowan Old Style", "Palatino Linotype", cursive, serif;
  font-weight: 600;
  color: var(--ink);
  margin: 0 0 8px;
}

button { font-family: inherit; }

#app-root {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  max-width: 560px;
  margin: 0 auto;
  background: var(--cream);
  position: relative;
}

/* ---------- Top bar ---------- */
.topbar {
  position: sticky;
  top: 0;
  z-index: 20;
  background: rgba(253, 248, 243, 0.92);
  backdrop-filter: blur(8px);
  padding: 14px 18px 10px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid var(--cream-dark);
}
.topbar .brand {
  font-family: "Autour One", Georgia, cursive, serif;
  font-size: 1.05rem;
  color: var(--gold);
  letter-spacing: 0.02em;
}
.topbar .guest-chip {
  font-size: 0.78rem;
  background: var(--blush);
  color: var(--ink);
  padding: 5px 12px;
  border-radius: 999px;
  border: none;
}

/* ---------- Screen container ---------- */
.screen {
  flex: 1;
  padding: 16px 18px 100px;
  animation: fadein 0.25s ease;
}
@keyframes fadein {
  from { opacity: 0; transform: translateY(6px); }
  to { opacity: 1; transform: translateY(0); }
}

/* ---------- Sub-tabs (chips) ---------- */
.subtabs {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  padding: 4px 0 16px;
  scrollbar-width: none;
}
.subtabs::-webkit-scrollbar { display: none; }
.subtab {
  flex: none;
  padding: 8px 16px;
  border-radius: 999px;
  border: 1px solid var(--cream-dark);
  background: var(--white);
  color: var(--ink-light);
  font-size: 0.85rem;
  font-weight: 600;
  cursor: pointer;
}
.subtab.active {
  background: var(--gold);
  border-color: var(--gold);
  color: var(--white);
}

/* ---------- Cards ---------- */
.card {
  background: var(--white);
  border-radius: var(--radius);
  padding: 16px 18px;
  box-shadow: var(--shadow);
  margin-bottom: 14px;
}
.card h3 { font-size: 1rem; margin-bottom: 4px; }
.card p { margin: 0; color: var(--ink-light); font-size: 0.92rem; line-height: 1.5; }
.card-icon { font-size: 1.6rem; margin-bottom: 6px; display: block; }

/* ---------- Coordonnées des mariés (Infos pratiques) ---------- */
.contact-maries-people {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.contact-maries-person {
  background: var(--cream-dark);
  border-radius: 12px;
  padding: 10px 14px;
}
.contact-maries-name {
  font-family: "Autour One", Georgia, cursive, serif;
  color: var(--gold);
  font-weight: 600;
  font-size: 0.95rem;
  margin-bottom: 4px;
}
.contact-maries-person p { color: var(--ink); }
.contact-maries-person a,
.contact-maries-adresse a {
  color: var(--green);
  font-weight: 600;
  text-decoration: none;
}
.contact-maries-adresse {
  margin-top: 12px !important;
  padding-top: 10px;
  border-top: 1px solid var(--cream-dark);
}
.contact-maries-adresse .maps-link {
  display: inline-block;
  margin-top: 6px;
  font-size: 0.85rem;
}

/* ---------- Prestataire "surprise" (flouté jusqu'à une date) ---------- */
.prestataire-surprise { position: relative; overflow: hidden; }
.prestataire-surprise-blur {
  filter: blur(7px);
  user-select: none;
  pointer-events: none;
}
.prestataire-surprise-overlay {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: 4px;
  padding: 10px 16px;
  background: rgba(253, 248, 243, 0.72);
}
.prestataire-surprise-overlay .card-icon { margin-bottom: 2px; }
.prestataire-surprise-overlay p {
  color: var(--ink);
  font-weight: 600;
  font-size: 0.88rem;
  margin: 0;
}

/* ---------- Hébergement : catégories + encart "dormir sur place" ---------- */
.hebergement-cat { margin-bottom: 8px; }
.hebergement-cat-title {
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--gold);
  text-transform: uppercase;
  letter-spacing: 0.03em;
  margin: 18px 0 10px;
}
.hebergement-cat:first-child .hebergement-cat-title { margin-top: 0; }
.hebergement-dodo {
  background: var(--cream-dark);
  border: 1px dashed var(--gold);
  text-align: center;
}
.hebergement-dodo .card-icon { font-size: 1.8rem; }

/* ---------- Galerie / défis verrouillés avant une date ---------- */
.gallery-locked {
  text-align: center;
  background: var(--cream-dark);
  border-radius: var(--radius);
  padding: 22px 18px;
  color: var(--ink-light);
}
.gallery-locked .lock-icon { font-size: 2rem; display: block; margin-bottom: 8px; }
.gallery-locked strong { color: var(--ink); }
.defi-card.defi-locked { opacity: 0.55; }
.defi-card.defi-locked .defi-points { color: var(--ink-light); }

/* ---------- Hero (Accueil) ---------- */
.hero {
  text-align: center;
  padding: 28px 10px 10px;
}
.hero .emoji { font-size: 2.6rem; }
.hero h1 { font-size: 1.8rem; margin: 10px 0 4px; }
.hero .date { color: var(--gold); font-weight: 600; font-size: 1rem; }

.countdown {
  display: flex;
  justify-content: center;
  gap: 10px;
  margin: 22px 0 8px;
}
.countdown .unit {
  background: var(--white);
  border-radius: 14px;
  padding: 12px 10px;
  min-width: 62px;
  box-shadow: var(--shadow);
  text-align: center;
}
.countdown .unit .num {
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--gold);
  font-family: "Autour One", Georgia, cursive, serif;
}
.countdown .unit .label {
  font-size: 0.65rem;
  color: var(--ink-light);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.quicklinks {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin-top: 20px;
}
.quicklink {
  background: var(--white);
  border-radius: var(--radius);
  padding: 16px 12px;
  text-align: center;
  box-shadow: var(--shadow);
  border: none;
  cursor: pointer;
  color: var(--ink);
}
.quicklink .qicon { font-size: 1.5rem; display: block; margin-bottom: 6px; }
.quicklink .qlabel { font-size: 0.82rem; font-weight: 600; }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  background: var(--gold);
  color: var(--white);
  border: none;
  padding: 12px 18px;
  border-radius: 999px;
  font-weight: 600;
  font-size: 0.92rem;
  cursor: pointer;
  width: 100%;
}
.btn:active { transform: scale(0.98); }
.btn.secondary {
  background: var(--white);
  color: var(--gold);
  border: 1.5px solid var(--gold);
}
.btn.ghost {
  background: transparent;
  color: var(--ink-light);
  border: 1px solid var(--cream-dark);
}
.btn.small { padding: 8px 14px; font-size: 0.8rem; width: auto; }
.btn:disabled { opacity: 0.5; cursor: not-allowed; }

/* ---------- Forms ---------- */
.field { margin-bottom: 14px; }
.field label {
  display: block;
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--ink-light);
  margin-bottom: 6px;
}
.field input[type="text"],
.field input[type="tel"],
.field input[type="number"],
.field textarea,
.field select {
  width: 100%;
  padding: 12px 14px;
  border-radius: 12px;
  border: 1.5px solid var(--cream-dark);
  background: var(--white);
  font-size: 0.95rem;
  font-family: inherit;
  color: var(--ink);
}
.field textarea { resize: vertical; min-height: 80px; }
.radio-group { display: flex; gap: 10px; }
.radio-group label {
  flex: 1;
  text-align: center;
  padding: 10px;
  border-radius: 12px;
  border: 1.5px solid var(--cream-dark);
  cursor: pointer;
  font-weight: 600;
  font-size: 0.85rem;
  color: var(--ink-light);
}
.radio-group input { display: none; }
.radio-group input:checked + span { color: var(--white); }
.radio-group label:has(input:checked) {
  background: var(--green);
  border-color: var(--green);
  color: var(--white);
}

/* ---------- Timeline (Programme) ---------- */
.timeline { position: relative; padding-left: 26px; }
.timeline::before {
  content: "";
  position: absolute;
  left: 9px; top: 6px; bottom: 6px;
  width: 2px;
  background: var(--cream-dark);
}
.tl-item { position: relative; margin-bottom: 18px; }
.tl-dot {
  position: absolute;
  left: -26px; top: 2px;
  width: 20px; height: 20px;
  border-radius: 50%;
  background: var(--gold);
  color: var(--white);
  display: flex; align-items: center; justify-content: center;
  font-size: 0.7rem;
}
.tl-time { font-size: 0.75rem; color: var(--gold); font-weight: 700; letter-spacing: 0.03em; }
.tl-item .card { margin-top: 4px; }
.tl-item .maps-link { display: inline-block; margin-top: 8px; font-size: 0.8rem; color: var(--green); font-weight: 600; text-decoration: none; }

/* ---------- Gallery ---------- */
.gallery-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}
.gallery-grid img, .gallery-grid video {
  width: 100%;
  aspect-ratio: 1;
  object-fit: cover;
  border-radius: 12px;
  box-shadow: var(--shadow);
}
.gallery-caption { font-size: 0.72rem; color: var(--ink-light); margin-top: 3px; }
.empty-state {
  text-align: center;
  padding: 40px 16px;
  color: var(--ink-light);
}
.empty-state .eicon { font-size: 2.2rem; display: block; margin-bottom: 10px; }

/* ---------- Défis ---------- */
.defi-card { display: flex; align-items: center; gap: 12px; }
.defi-card .defi-icon { font-size: 1.8rem; flex: none; }
.defi-card .defi-body { flex: 1; }
.defi-points {
  background: var(--cream-dark);
  color: var(--gold);
  font-weight: 700;
  font-size: 0.78rem;
  padding: 3px 10px;
  border-radius: 999px;
  flex: none;
}
.defi-done { opacity: 0.55; }
.defi-done .defi-points { background: var(--green); color: var(--white); }

/* ---------- Jeux ---------- */
.game-card { text-align: center; padding: 24px 16px; }
.game-card .gicon { font-size: 2.4rem; }
.quiz-option {
  display: block;
  width: 100%;
  text-align: left;
  padding: 12px 16px;
  margin-bottom: 8px;
  border-radius: 12px;
  border: 1.5px solid var(--cream-dark);
  background: var(--white);
  font-size: 0.92rem;
  cursor: pointer;
}
.quiz-option.correct { background: var(--green); border-color: var(--green); color: var(--white); }
.quiz-option.wrong { background: var(--danger); border-color: var(--danger); color: var(--white); }
.quiz-progress { font-size: 0.8rem; color: var(--ink-light); margin-bottom: 10px; }

/* ---------- Sutom ---------- */
/* --cell-size/--cell-gap/--cell-font sont calculées en JS (js/screens/
   sutom.js, computeCellMetrics) selon la longueur du mot du jour et la
   largeur d'écran disponible, pour que les mots longs (la liste de mots
   peut aller jusqu'à 14 lettres) ne débordent jamais de l'écran sur
   mobile. Les valeurs ci-dessous ne sont que le repli si le JS n'a pas
   encore tourné. */
.sutom-grid {
  display: flex;
  flex-direction: column;
  gap: var(--cell-gap, 6px);
  align-items: center;
  margin-bottom: 18px;
  width: 100%;
}
.sutom-row { display: flex; gap: var(--cell-gap, 6px); justify-content: center; }
.sutom-cell {
  width: var(--cell-size, 38px);
  height: var(--cell-size, 38px);
  flex: none;
  border-radius: 8px;
  border: 2px solid var(--cream-dark);
  background: var(--white);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: var(--cell-font, 1.05rem);
  color: var(--ink);
  text-transform: uppercase;
}
.sutom-cell.given { background: var(--cream-dark); border-color: var(--cream-dark); color: var(--ink-light); }
.sutom-cell.filled { border-color: var(--gold-light); }
.sutom-cell.correct { background: var(--green); border-color: var(--green); color: var(--white); }
.sutom-cell.present { background: var(--gold); border-color: var(--gold); color: var(--white); }
.sutom-cell.absent { background: #d8d2ca; border-color: #d8d2ca; color: var(--white); }

.sutom-keyboard { display: flex; flex-direction: column; gap: 6px; }
.sutom-kb-row { display: flex; gap: 4px; justify-content: center; }
.sutom-key {
  flex: 1;
  max-width: 34px;
  height: 42px;
  border-radius: 8px;
  border: none;
  background: var(--cream-dark);
  color: var(--ink);
  font-weight: 700;
  font-size: 0.85rem;
  cursor: pointer;
}
.sutom-key.wide { max-width: 62px; font-size: 0.72rem; }
.sutom-key.correct { background: var(--green); color: var(--white); }
.sutom-key.present { background: var(--gold); color: var(--white); }
.sutom-key.absent { background: #b7b0a6; color: var(--white); }

/* ---------- Flappy ---------- */
.flappy-wrap {
  position: relative;
  width: 100%;
  max-width: 300px;
  margin: 0 auto;
  border-radius: 16px;
  overflow: hidden;
  box-shadow: var(--shadow);
  touch-action: none;
}
.flappy-wrap canvas {
  display: block;
  width: 100%;
  height: auto;
  background: #fdf3ea;
}
.flappy-overlay {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
}
.flappy-overlay .flappy-card {
  pointer-events: auto;
  background: rgba(255, 255, 255, 0.95);
  border-radius: 16px;
  padding: 20px 22px;
  text-align: center;
  box-shadow: var(--shadow-lg);
  max-width: 220px;
}
.flappy-badge {
  background: var(--gold);
  color: var(--white);
  font-weight: 700;
  font-size: 0.78rem;
  padding: 4px 12px;
  border-radius: 999px;
  display: inline-block;
  margin-bottom: 8px;
}
.flappy-score {
  font-family: "Autour One", Georgia, cursive, serif;
  font-size: 2.2rem;
  font-weight: 700;
  color: var(--gold);
}

/* ---------- Snake : croix directionnelle ---------- */
.snake-dpad {
  display: grid;
  grid-template-columns: repeat(3, 56px);
  grid-template-rows: repeat(2, 56px);
  grid-template-areas:
    ".    up    ."
    "left down right";
  gap: 6px;
  justify-content: center;
  margin: 14px auto 0;
  touch-action: none;
  user-select: none;
}
.snake-dbtn {
  border: none;
  border-radius: 14px;
  background: var(--blush);
  color: var(--ink);
  font-size: 1.3rem;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}
.snake-dbtn:active {
  background: var(--gold);
  color: var(--white);
}
.snake-dbtn-up { grid-area: up; }
.snake-dbtn-left { grid-area: left; }
.snake-dbtn-right { grid-area: right; }
.snake-dbtn-down { grid-area: down; }

/* ---------- Doodle : contrôle gauche/droite ---------- */
.doodle-hpad {
  display: flex;
  justify-content: center;
  gap: 28px;
  margin: 14px auto 0;
  touch-action: none;
  user-select: none;
}
.doodle-hpad .snake-dbtn {
  width: 92px;
  height: 78px;
  font-size: 2.1rem;
}

/* ---------- Classement ---------- */
.rank-row {
  display: flex;
  align-items: center;
  gap: 12px;
  background: var(--white);
  border-radius: 14px;
  padding: 12px 16px;
  margin-bottom: 8px;
  box-shadow: var(--shadow);
}
.rank-num {
  font-family: "Autour One", Georgia, cursive, serif;
  font-weight: 700;
  font-size: 1.1rem;
  color: var(--gold);
  width: 26px;
  text-align: center;
  flex: none;
}
.rank-row.top1 .rank-num { color: #d4af37; }
.rank-row.top2 .rank-num { color: #a7a7a7; }
.rank-row.top3 .rank-num { color: #b06a3a; }
.rank-avatar {
  width: 38px; height: 38px; border-radius: 50%;
  background: var(--blush);
  display: flex; align-items: center; justify-content: center;
  font-weight: 700; color: var(--ink);
  flex: none; font-size: 0.85rem;
}
.rank-name { flex: 1; font-weight: 600; font-size: 0.92rem; }
.rank-pts { font-weight: 700; color: var(--gold); font-size: 0.9rem; }

/* ---------- Cagnotte ---------- */
.cagnotte-box {
  text-align: center;
  padding: 32px 20px;
}
.cagnotte-box .cicon { font-size: 2.6rem; margin-bottom: 10px; display: block; }

/* ---------- Bottom nav ---------- */
.bottomnav {
  position: fixed;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 100%;
  max-width: 560px;
  background: rgba(255, 255, 255, 0.96);
  backdrop-filter: blur(10px);
  border-top: 1px solid var(--cream-dark);
  display: flex;
  padding: 6px 4px calc(6px + env(safe-area-inset-bottom));
  z-index: 30;
}
.navbtn {
  flex: 1;
  background: none;
  border: none;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  padding: 6px 2px;
  color: var(--ink-light);
  cursor: pointer;
}
.navbtn .nicon { font-size: 1.3rem; }
.navbtn .nlabel { font-size: 0.62rem; font-weight: 600; }
.navbtn.active { color: var(--gold); }

/* ---------- Toast ---------- */
.toast {
  position: fixed;
  bottom: 86px;
  left: 50%;
  transform: translateX(-50%) translateY(20px);
  background: var(--ink);
  color: var(--white);
  padding: 10px 20px;
  border-radius: 999px;
  font-size: 0.85rem;
  font-weight: 600;
  opacity: 0;
  transition: all 0.25s ease;
  z-index: 50;
  pointer-events: none;
  white-space: nowrap;
  box-shadow: var(--shadow-lg);
}
.toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }

/* ---------- Onboarding modal ---------- */
.modal-overlay {
  position: fixed; inset: 0;
  background: rgba(58, 51, 46, 0.55);
  display: flex; align-items: center; justify-content: center;
  z-index: 100;
  padding: 20px;
}
.modal-box {
  background: var(--white);
  border-radius: 20px;
  padding: 28px 24px;
  max-width: 380px;
  width: 100%;
  text-align: center;
  box-shadow: var(--shadow-lg);
}
.modal-box .memoji { font-size: 2.2rem; margin-bottom: 8px; }

/* ---------- "Ajouter à l'écran d'accueil" : étapes ---------- */
/* Grandes et peu nombreuses exprès : ce message doit rester lisible et
   simple à suivre pour des invités peu à l'aise avec leur téléphone. */
.install-steps { text-align: left; margin: 4px 0 6px; }
.install-step {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  background: var(--cream-dark);
  border-radius: 14px;
  padding: 14px 16px;
  margin-bottom: 10px;
  font-size: 1rem;
  line-height: 1.45;
  color: var(--ink);
}
.install-step-num {
  flex: none;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: var(--gold);
  color: var(--white);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 1.05rem;
  font-family: "Autour One", Georgia, cursive, serif;
}

/* ---------- Guide animé "3 points -> Installer" (Chrome Android) ---------- */
/* Deux "diapositives" en fondu-enchaîné en boucle (pur CSS, pas de JS à
   nettoyer à la fermeture de la modale) : la 1re montre une flèche qui
   rebondit vers le bouton ⋮, la 2e montre le menu déroulé avec l'option
   à choisir mise en avant. */
.install-guide {
  position: relative;
  height: 92px;
  margin: 4px 0 14px;
}
.install-guide-slide {
  position: absolute;
  inset: 0;
  opacity: 0;
  animation: installGuideFade 6s infinite;
}
.install-guide-step2 { animation-delay: -3s; }

@keyframes installGuideFade {
  0%   { opacity: 1; }
  44%  { opacity: 1; }
  50%  { opacity: 0; }
  94%  { opacity: 0; }
  100% { opacity: 1; }
}

.mockup-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  background: var(--cream-dark);
  border: 1px solid var(--gold-light);
  border-radius: 10px;
  padding: 8px 10px;
  font-size: 0.72rem;
  color: var(--ink-light);
}
.mockup-url { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mockup-dots {
  flex: none;
  font-weight: 700;
  color: var(--ink);
  background: var(--white);
  border-radius: 8px;
  padding: 2px 8px;
}
.mockup-arrow {
  position: absolute;
  right: 14px;
  top: 40px;
  font-size: 1.5rem;
  animation: installGuideBounce 1.1s ease-in-out infinite;
}
.mockup-menu {
  background: var(--white);
  border: 1px solid var(--gold-light);
  border-radius: 10px;
  box-shadow: var(--shadow);
  overflow: hidden;
  font-size: 0.78rem;
}
.mockup-menu-item {
  padding: 8px 10px;
  color: var(--ink-light);
  border-bottom: 1px solid var(--cream-dark);
  text-align: left;
  position: relative;
}
.mockup-menu-item:last-child { border-bottom: none; }
.mockup-menu-item-highlight {
  color: var(--ink);
  font-weight: 600;
  background: var(--blush);
  animation: installGuidePulse 1.1s ease-in-out infinite;
}
.mockup-arrow-inline {
  position: absolute;
  right: 8px;
  animation: installGuideNudge 1.1s ease-in-out infinite;
}

@keyframes installGuideBounce {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-6px); }
}
@keyframes installGuideNudge {
  0%, 100% { transform: translateX(0); }
  50% { transform: translateX(4px); }
}
@keyframes installGuidePulse {
  0%, 100% { background: var(--blush); }
  50% { background: var(--blush-dark); }
}

.small-note { font-size: 0.78rem; color: var(--ink-light); margin-top: 10px; text-align: center; }
.section-title { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; }
.section-title h2 { font-size: 1.15rem; }

/* ---------- Diaporama plein écran (espace organisateurs, 18/08/2026) ----------
   Overlay indépendant du système de modal (voir openModal/closeModal dans
   app.js) : plein écran, fond noir, deux <img> superposées en fondu
   enchaîné (même principe que le crossfade CSS du guide d'installation
   Chrome ci-dessus, mais ici piloté en JS car les photos changent en
   temps réel via subscribeMedia — impossible à faire en keyframes pures). */
.diaporama-overlay {
  position: fixed; inset: 0;
  background: #000;
  z-index: 300;
  overflow: hidden;
}
.diaporama-img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: contain;
  opacity: 0;
  transition: opacity 1.1s ease;
}
.diaporama-img.visible { opacity: 1; }
.diaporama-empty {
  position: absolute; inset: 0;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 10px;
  color: rgba(255,255,255,0.85);
  text-align: center;
  padding: 20px;
  font-size: 1.05rem;
}
.diaporama-empty .eicon { font-size: 2.6rem; }
.diaporama-empty .small-note { color: rgba(255,255,255,0.55); }
.diaporama-caption {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  padding: 14px 20px calc(14px + env(safe-area-inset-bottom, 0px));
  background: linear-gradient(to top, rgba(0,0,0,0.6), transparent);
  color: #fff;
  font-size: 0.95rem;
  text-align: center;
  pointer-events: none;
}
.diaporama-close {
  position: absolute;
  top: 14px; right: 14px;
  width: 40px; height: 40px;
  border-radius: 50%;
  border: none;
  background: rgba(0,0,0,0.45);
  color: #fff;
  font-size: 1.2rem;
  line-height: 1;
  cursor: pointer;
  z-index: 2;
}