/* ==========================================================================
   Layout — MOBILE D'ABORD (composition de la maquette mobile)
   Unités : cqw = 1 % de la largeur de la scène (max 560 px).
   La version desktop (scène 3:2 calée sur la maquette 1536×1024)
   est dans responsive.css.
   ========================================================================== */

.backdrop { display: none; }

.stage {
  position: relative;
  width: 100%;
  max-width: 560px;
  margin: 0 auto;
  min-height: 100vh;
  min-height: 100svh;
  container-type: inline-size;
  overflow: hidden;
  overflow: clip;          /* « clip » garde le bouton collant (sticky) fonctionnel */
  isolation: isolate;
}

/* ---- Décor ---------------------------------------------------------------- */
.scene-bg {
  position: absolute; inset: 0; z-index: -2; overflow: hidden;
  background: linear-gradient(#0a1546 0 40%, #1b1d3b 75%, #241f33);
}
.scene-bg picture { position: absolute; inset: 0; }
.scene-bg img {
  position: absolute; inset: 0; width: 100%; height: 100%; max-width: none;
  object-fit: cover; object-position: 68% top;   /* cadré sur la Citadelle */
}

.snow { position: absolute; inset: 0; z-index: 30; pointer-events: none; width: 100%; height: 100%; }

/* ---- En-tête --------------------------------------------------------------- */
.topbar { position: absolute; inset: 0 0 auto 0; height: 0; z-index: 40; }

.brand {
  position: absolute; left: 50%; top: 1.4cqw; width: 34cqw;
  transform: translateX(-50%);
  filter: drop-shadow(0 1.2cqw 1.6cqw rgba(0,0,0,.45));
}
.brand img { width: 100%; }

.mainnav { display: none; }

/* ---- Accueil --------------------------------------------------------------- */
.home {
  position: relative;
  display: flex; flex-direction: column; align-items: stretch;
  padding-top: 29cqw;
  padding-bottom: 4cqw;
}

/* Calendrier : 88 % de large, décalé à droite pour laisser Ruman à gauche */
.calendar {
  --cal-w: 85cqw;
  position: relative;
  width: var(--cal-w);
  margin-left: 12.5cqw;
}

.mascot {
  position: absolute;
  z-index: 2;              /* entre le chalet (auto) et les portes (3) */
  width: 30cqw;
  left: -15cqw;
  bottom: -1cqw;
  pointer-events: none;
}

.lantern { position: absolute; z-index: 4; width: 7.5cqw; bottom: -1.5cqw; pointer-events: none; }
.lantern--left { display: none; }
.lantern--right { right: -5.5cqw; }

/* Panneau de progression */
.panel { position: relative; z-index: 5; width: 94cqw; margin: 2.5cqw auto 0; }

/* Bouton principal : collé en bas de l'écran sur mobile */
.cta-wrap {
  position: sticky; z-index: 45;
  bottom: max(2.5cqw, env(safe-area-inset-bottom));
  margin: 4cqw auto 0;
  width: 86cqw;
}