/* ============================================================
   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;                  /* dvh : dynamique, s'ajuste avec la barre Safari */
  height: var(--real-vh, 100dvh);  /* JS-driven : hauteur visible réelle (iPhone 16 Pro) */
  overflow: hidden;
}

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

/* ============================================================
   BULLE DE DIALOGUE — haut gauche
   Triangle CSS en bas, pointant vers Prune
============================================================ */
.bubble-zone {
  position: absolute;
  top: 8%;
  left: 3%;
  width: clamp(200px, 52vw, 350px);
  z-index: 3;
  animation: fadeIn 0.5s ease 0.2s both;
}

.speech-bubble {
  position: relative;
  background: rgba(255, 255, 255, 0.92);
  border-radius: clamp(8px, 2vw, 14px);
  padding: clamp(10px, 2dvh, 20px) clamp(12px, 2.5vw, 22px);
}

.speech-bubble p {
  font-size: clamp(0.72rem, 2.8vw, 1rem);
  line-height: 1.55;
  font-weight: 600;
  color: #0a2a6e;
  text-align: center;
}

/* "poste numéro 2" en rouge */
.speech-bubble .accent {
  color: #cc2200;
}

/* Triangle pointant vers le bas (vers Prune, bas-droite) */
.speech-bubble::after {
  content: '';
  position: absolute;
  bottom: -15px;
  right: 18%;
  border-left:  13px solid transparent;
  border-right: 13px solid transparent;
  border-top:   15px solid rgba(255, 255, 255, 0.92);
}

/* ============================================================
   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); }

/* ============================================================
   PRUNE (IMG_Cloe) — centre droite, bas de l'écran
============================================================ */
.cloe-img {
  position: absolute;
  height: clamp(200px, 55dvh, 580px);
  width: auto;
  bottom: 2%;
  right: 35%;
  z-index: 2;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  user-select: none;
  animation: fadeIn 0.6s ease 0.3s both;
}
.cloe-img:active { transform: scale(0.97); }

/* ============================================================
   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) {
  .bubble-zone       { top: 5%; left: 2%; width: clamp(175px, 72vw, 300px); }
  .speech-bubble p   { font-size: clamp(0.68rem, 3.2vw, 0.9rem); }
  .cloe-img          { height: clamp(240px, 55vh, 510px); right: 7%; }
}

/* ============================================================
   RESPONSIVE — TABLETTE COURTE (≥ 600px, ≤ 1100px haut)
   ex. iPad 6ème génération
============================================================ */
@media (min-width: 600px) and (max-height: 1100px) {
  .bubble-zone  { top: 7%; width: clamp(220px, 46vw, 360px); }
  .cloe-img     { height: clamp(300px, 56dvh, 620px); }
}

/* ============================================================
   RESPONSIVE — TABLETTE HAUTE (≥ 600px, ≥ 1100px haut)
   ex. Samsung Tab A8
============================================================ */
@media (min-width: 600px) and (min-height: 1100px) {
  .bubble-zone  { top: 7%; width: clamp(240px, 48vw, 400px); }
  .cloe-img     { height: clamp(400px, 56dvh, 760px); }
}

/* ============================================================
   RESPONSIVE — PORTRAIT ÉTROIT (≤ 360px)  ex. Samsung S21, iPhone SE
============================================================ */
@media (max-width: 360px) {
  .speech-bubble p { font-size: 0.62rem; }
  .cloe-img        { height: clamp(350px, 62dvh, 540px); }  /* S21 ~730px visible : 62dvh ≈ 453px */
}

/* ============================================================
   RESPONSIVE — PAYSAGE MOBILE (hauteur ≤ 450px)
============================================================ */
@media (max-height: 450px) and (orientation: landscape) {
  .bubble-zone      { top: 2%; left: 2%; width: 44vw; }
  .speech-bubble p  { font-size: 0.55rem; line-height: 1.3; }
  .cloe-img         { height: 130px; right: 5%; }
  .btn-suivant img  { height: 24px; }
}