/* ============================================================
   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 — pleine page
   object-position: center bottom garde la rambarde visible
============================================================ */
.bg-image {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center bottom;
  z-index: 0;
}

/* ============================================================
   BULLES DE DIALOGUE
   .speech-area : conteneur flex-colonne (bulle + flèche)
   La flèche (z-index 1) s'enfonce derrière la bulle (z-index 2)
============================================================ */
.speech-area {
  position: absolute;
  z-index: 4;
  display: flex;
  flex-direction: column;
  animation: fadeIn 0.5s ease 0.15s both;
  pointer-events: none;   /* le fond reste cliquable pour fullscreen */
}

/* ---- Bulle Prune : haut gauche ---- */
.speech-prune {
  top: 2%;
  left: 1%;
  width: clamp(130px, 45vw, 265px);
  align-items: center;
  margin-left: 15px;
}

/* ---- Bulle Marc : au-dessus de Marc ---- */
.speech-marc {
  top: 7%;
  left: 50%;                 /* aligné sur la position de Marc (left: 23%) */
  width: clamp(130px, 46vw, 272px);
  align-items: center;       /* flèche centrée → pointe vers Marc */
}

/* ---- Style commun des bulles ---- */
.speech-bubble {
  position: relative;
  z-index: 2;
  border-radius: clamp(8px, 2vw, 16px);
  padding: clamp(8px, 1.8dvh, 18px) clamp(10px, 2.2vw, 20px);
  width: 100%;
  text-align: center;
}

.speech-bubble p {
  font-size: clamp(0.72rem, 2.9vw, 1.35rem);
  line-height: 1.45;
  font-weight: 600;
}

/* ---- Couleurs Prune (mauve) ---- */
.bubble-mauve {
  background: rgba(222, 168, 248, 0.9);
}
.bubble-mauve p {
  color: #2a0a44;
}

/* ---- Couleurs Marc (vert) ---- */
.bubble-verte {
  background: rgba(100, 185, 45, 0.92);
}
.bubble-verte p {
  color: #ffffff;
}
.bubble-verte strong {
  font-weight: 800;
  color: #ffffff;
}

/* ---- Flèches verticales (queues de bulle) ---- */
.arrow-vertical {
  position: relative;
  z-index: 1;                /* derrière la bulle */
  display: block;
  height: clamp(32px, 7dvh, 80px);
  width: auto;
  margin-top: -10px;         /* s'enfonce sous la bulle */
}

/* ============================================================
   PERSONNAGES — proportionnels au viewport, alignés sur rambarde
   ─────────────────────────────────────────────────────────────
   • height en dvh : grandissent proportionnellement avec l'écran
   • bottom: 14%   : pieds alignés sur la rambarde en bois
     → ajuster si l'image l'exige
   • Prune z-index 2 (arrière), Marc z-index 3 (avant)
============================================================ */
.char-img {
  position: absolute;
  width: auto;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  user-select: none;
  animation: fadeIn 0.6s ease 0.3s both;
    /*margin-left: 3dvh;*/
}
.char-img:active {
  transform: scale(0.97);
}

/* Prune (arrière-plan) — rapprochée de Marc */
.prune-img {
  height: clamp(200px, 56dvh, 570px);
  bottom: 8%;
  left: 20%;
  z-index: 2;
}

/* Marc (avant-plan, légèrement plus grand) */
.marc-img {
  height: clamp(215px, 61dvh, 620px);
  bottom: 8%;
  left: 35%;
  z-index: 3;
}

/* ============================================================
   BOUTON SUIVANT — flèche bas droite
============================================================ */
.btn-suivant {
  position: absolute;
  bottom: clamp(10px, 2.5dvh, 36px);
  right: clamp(10px, 2.5vw, 34px);
  z-index: 5;
  background: transparent;
  border: none;
  cursor: pointer;
  padding: 4px;
  -webkit-tap-highlight-color: transparent;
  line-height: 0;
}
.btn-suivant img {
  height: clamp(32px, 6.5dvh, 78px);
  width: auto;
  display: block;
  filter: drop-shadow(1px 1px 3px rgba(0,0,0,0.45));
}
.btn-suivant:active img {
  transform: scale(0.90);
}

/* ============================================================
   OVERLAY DE TRANSITION (fondu noir entrée / sortie)
============================================================ */
.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 — PORTRAIT ÉTROIT (≤ 360px)
   Samsung S21 (360×800), iPhone SE 1ère gen (320×568)…
============================================================ */
@media (max-width: 360px) {
  .speech-bubble p  { font-size: 0.65rem; }
  .arrow-vertical   { height: 26px; }
  .prune-img        { height: clamp(160px, 50dvh, 460px); left: 6%; }
  .marc-img         { height: clamp(174px, 54dvh, 500px); }
}

/* ============================================================
   RESPONSIVE — SMARTPHONES (375–430px, ≥ 700px hauteur)
   iPhone 12 Pro (390×844), iPhone 16 Pro (402×874),
   Samsung S24 Ultra (412×915)
============================================================ */
@media (min-width: 375px) and (max-width: 430px) and (min-height: 700px) {
  .prune-img { height: clamp(280px, 64dvh, 560px); left: -5%; }
  .marc-img  { height: clamp(304px, 69dvh, 608px); }
}

/* ============================================================
   RESPONSIVE — TABLETTE (≥ 600px)
   iPad 6ème génération (768×1024)
============================================================ */
@media (min-width: 600px) {
  .prune-img { height: clamp(200px, 44dvh, 500px); }
  .marc-img  { height: clamp(220px, 48dvh, 545px); }
}

/* ============================================================
   RESPONSIVE — GRANDES TABLETTES (≥ 800px, ≥ 1000px hauteur)
   iPad Pro 11" (834×1194), iPad Pro 12.9" (1024×1366),
   Galaxy Tab A8 (800×1280), Galaxy Tab S24 (800×1340)
============================================================ */
@media (min-width: 800px) and (min-height: 1000px) {
  .prune-img { height: clamp(280px, 46dvh, 580px); }
  .marc-img  { height: clamp(305px, 50dvh, 630px); }
}

/* ============================================================
   RESPONSIVE — PAYSAGE MOBILE (hauteur ≤ 450px)
============================================================ */
@media (max-height: 450px) and (orientation: landscape) {
  .speech-prune     { top: 1%; width: 38vw; }
  .speech-marc      { top: 2%; width: 38vw; }
  .speech-bubble p  { font-size: 0.58rem; }
  .arrow-vertical   { height: 22px; }
  .prune-img        { height: 130px; bottom: 10%; }
  .marc-img         { height: 145px; bottom: 10%; }
  .btn-suivant img  { height: 28px; }
}