/* ============================================================
   RESET & BASE
============================================================ */
*, *::before, *::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html, body {
  width: 100%;
  height: 100%;
  overflow: hidden;
  font-family: 'Helvetica Neue', Arial, sans-serif;
  background: #000;
}

/* ============================================================
   ÉCRAN PRINCIPAL — plein écran, position de référence
============================================================ */
.screen {
  position: relative;
  width: 100%;
  height: 100dvh;
  overflow: hidden;
}

/* ============================================================
   IMAGE DE FOND — plein écran
============================================================ */
.bg-image {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center center;
  z-index: 0;
}

/* ============================================================
   BTN_SUIVANT — flèche haut droite
============================================================ */
.btn-suivant {
  position: absolute;
  top: 2%;
  right: 3%;
  z-index: 5;
  background: transparent;
  border: none;
  cursor: pointer;
  padding: 4px;
  -webkit-tap-highlight-color: transparent;
  line-height: 0;
  animation: fadeIn 0.4s ease 0.1s both;
}
.btn-suivant img {
  height: clamp(28px, 5.5dvh, 58px);
  width: auto;
  display: block;
  filter: drop-shadow(1px 1px 3px rgba(0,0,0,0.5));
}
.btn-suivant:active img { transform: scale(0.90); }

/* ============================================================
   BLOC BAS — conteneur flex-colonne
   Vignette + texte récit empilés, séparés de 10 px exactement
   pointer-events: none → les clics passent au fond (fullscreen)
   sauf sur la vignette qui reste cliquable
============================================================ */
.bottom-stack {
  position: absolute;
  bottom: 3%;
  left: 3%;
  right: 3%;
  z-index: 3;
  display: flex;
  flex-direction: column;
  gap: 20px;
  pointer-events: none;   /* fond reste cliquable pour fullscreen */
}

/* Ligne vignette — alignée à droite dans le conteneur */
.vignette-row {
  display: flex;
  justify-content: flex-end;
  padding-right: 1%;
}

/* ============================================================
   IMG_SigneMontagne — vignette
============================================================ */
.signe-montagne {
  height: clamp(70px, 14dvh, 140px);
  width: auto;
  pointer-events: auto;   /* doit rester cliquable */
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  user-select: none;
  border-radius: clamp(4px, 1vw, 8px);
  filter: drop-shadow(1px 2px 5px rgba(0,0,0,0.55));
  animation: fadeIn 0.5s ease 0.25s both;
}
.signe-montagne:active { transform: scale(0.93); }

/* ============================================================
   LIB_Recit — texte récit, fond blanc semi-transparent
   Opacité 70 WinDev → background rgba semi-transparent
============================================================ */
.recit-zone {
  background: rgba(255, 255, 255, 0.75);
  border-radius: clamp(8px, 2vw, 16px);
  padding: clamp(10px, 2dvh, 20px) clamp(14px, 3vw, 26px);
  animation: fadeIn 0.5s ease 0.2s both;
}

.recit-zone p {
  font-size: clamp(0.72rem, 3vw, 1.5rem);
  line-height: 1.55;
  font-weight: 500;
  color: #1a1a1a;
  text-align: center;
}

/* "MyRules MyWater" en rouge */
.recit-zone .accent {
  color: #cc2200;
  font-weight: 700;
}

/* ============================================================
   OVERLAY DE TRANSITION
============================================================ */
.transition-overlay {
  position: fixed;
  inset: 0;
  background: #000;
  z-index: 100;
  opacity: 1;
  pointer-events: all;
  transition: opacity 0.4s ease;
}

/* ============================================================
   ANIMATIONS
============================================================ */
@keyframes fadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}

/* ============================================================
   RESPONSIVE — SMARTPHONE (≤ 500px)  ex. Samsung S21
============================================================ */
@media (max-width: 500px) {
  .signe-montagne { height: clamp(65px, 13vh, 120px); }
  .recit-zone p   { font-size: clamp(0.68rem, 3vw, 0.92rem); }
}

/* ============================================================
   RESPONSIVE — TABLETTE COURTE (≥ 600px, ≤ 1100px haut)
   ex. iPad 6ème génération
============================================================ */
@media (min-width: 600px) and (max-height: 1100px) {
  .signe-montagne { height: clamp(90px, 13dvh, 150px); }
}

/* ============================================================
   RESPONSIVE — TABLETTE HAUTE (≥ 600px, ≥ 1100px haut)
   ex. Samsung Tab A8
============================================================ */
@media (min-width: 600px) and (min-height: 1100px) {
  .signe-montagne { height: clamp(110px, 12dvh, 170px); }
  .recit-zone p   { font-size: clamp(0.82rem, 2.5vw, 1.5rem); }
}

/* ============================================================
   RESPONSIVE — PORTRAIT ÉTROIT (≤ 360px)
============================================================ */
@media (max-width: 360px) {
  .recit-zone p   { font-size: 1rem; }
  .signe-montagne { height: 62px; }
}

/* ============================================================
   RESPONSIVE — PAYSAGE MOBILE (hauteur ≤ 450px)
============================================================ */
@media (max-height: 450px) and (orientation: landscape) {
  .bottom-stack    { bottom: 2%; gap: 6px; }
  .recit-zone      { padding: 6px 14px; }
  .recit-zone p    { font-size: 0.55rem; line-height: 1.3; }
  .signe-montagne  { height: 70px; }
  .btn-suivant img { height: 24px; }
}