/* ============================================================
   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: #fff;
}

/* ============================================================
   É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;
  background: #ffffff;
}

/* ============================================================
   TITRE + SALUT ÉQUIPE — haut centre
   Remarque : % simples pour top/padding, clamp() pour la fonte
============================================================ */
.titre-zone {
  position: absolute;
  top: 3%;
  left: 0;
  right: 0;
  text-align: center;
  padding: 0 13%;          /* laisse la place à BTN_Suivant à droite */
  z-index: 4;
  animation: fadeIn 0.4s ease 0.1s both;
}

.page-title {
  font-size: clamp(0.88rem, 4vw, 1.5rem);
  font-weight: 800;
  color: #222222;
  line-height: 1.2;
}

.salut-equipe {
  font-size: clamp(0.78rem, 3.5vw, 1.2rem);
  color: #555555;
  font-style: italic;
  margin-top: 15px;
  min-height: 1.2em;
}

/* ============================================================
   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.35));
}
.btn-suivant:active img { transform: scale(0.90); }

/* ============================================================
   BULLES DE DIALOGUE — positionnées en %
============================================================ */
.bubble-zone {
  position: absolute;
  z-index: 4;
  animation: fadeIn 0.5s ease 0.2s both;
}

/* ---- Bulle verte (Marc) — 20% à gauche du centre ---- */
.bubble-marc-zone {
  top: 16%;
  left: calc(50% - 20%);   /* = 30% depuis la gauche */
  width: clamp(180px, 60vw, 320px);
}

/* ---- Bulle mauve (Prune) — 47% à gauche du centre ---- */
.bubble-prune-zone {
  top: 36%;
  left: calc(50% - 47%);   /* = 3% depuis la gauche */
  width: clamp(145px, 48vw, 265px);
}

/* ---- Style commun ---- */
.speech-bubble {
  position: relative;
  border-radius: clamp(8px, 2vw, 14px);
  padding: clamp(8px, 1.8dvh, 16px) clamp(10px, 2.5vw, 18px);
}

.speech-bubble p {
  font-size: clamp(0.68rem, 3vw, 0.92rem);
  line-height: 1.45;
  font-weight: 600;
}

/* ---- Bulle verte (Marc) ---- */
.bubble-verte {
  background: #6cbf3e;
  text-align: justify;
}
.bubble-verte p { color: #ffffff; }

/* Triangle CSS pointant vers le bas (vers Marc) */
.bubble-verte::after {
  content: '';
  position: absolute;
  bottom: -14px;
  right: 22%;
  border-left:  12px solid transparent;
  border-right: 12px solid transparent;
  border-top:   14px solid #6cbf3e;
}

/* ---- Bulle mauve (Prune) ---- */
.bubble-mauve {
  background: #dea8f8;
  text-align: center;
}
.bubble-mauve p { color: #2a0a44; }

/* Triangle CSS pointant vers la droite (vers Prune) */
.bubble-mauve::after {
  content: '';
  position: absolute;
  top: 40%;
  right: -12px;
  transform: translateY(-50%);
  border-top:    11px solid transparent;
  border-bottom: 11px solid transparent;
  border-left:   12px solid #dea8f8;
}

/* ============================================================
   PERSONNAGES — droite, Marc devant Prune
============================================================ */
.char-img {
  position: absolute;
  width: auto;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  user-select: none;
  animation: fadeIn 0.6s ease 0.3s both;
}
.char-img:active { transform: scale(0.97); }

/* Prune (arrière-plan) — 30% à droite du centre */
.prune-img {
  height: clamp(180px, 50dvh, 680px);   /* max relevé pour les grandes tablettes */
  bottom: 10%;
  right: calc(50% - 0%);   /* = 20% depuis la droite */
  z-index: 2;
}

/* Marc (avant-plan) — collé au bord droit (50% à droite du centre) */
.marc-img {
  height: clamp(195px, 54dvh, 740px);   /* max relevé pour les grandes tablettes */
  bottom: 10%;
  right: calc(50% - 25%);   /* = 0% depuis la droite */
  z-index: 3;
}

/* ============================================================
   VIGNETTE — bas gauche
============================================================ */
.vignette-zone {
  position: absolute;
  bottom: 20%;
  left: calc(50% - 40%);   /* = 4% depuis la gauche */
  z-index: 4;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
  animation: fadeIn 0.5s ease 0.4s both;
}

.vignette-img {
  height: clamp(65px, 14dvh, 130px);
  width: auto;
  border-radius: clamp(4px, 1vw, 8px);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  user-select: none;
  filter: drop-shadow(1px 2px 4px rgba(0,0,0,0.30));
}
.vignette-img:active { transform: scale(0.94); }

.vignette-label {
  font-size: clamp(0.65rem, 2.5vw, 0.88rem);
  font-weight: 700;
  color: #cc0000;
}

/* ============================================================
   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 — PORTRAIT ÉTROIT (≤ 360px)
   Samsung S21 (360×800), iPhone SE 1ère gen (320×568)…
============================================================ */
@media (max-width: 360px) {
  .page-title        { font-size: 0.78rem; }
  .prune-img         { height: clamp(160px, 44dvh, 420px); right: 26%; }  /* était 120px fixe */
  .marc-img          { height: clamp(178px, 47dvh, 450px); right: 3%;  }  /* était 140px fixe */
  .bubble-marc-zone  { top: 13%; width: clamp(140px, 50vw, 230px); }
  .bubble-prune-zone { top: 42%; width: clamp(110px, 39vw, 185px); }
  .speech-bubble     { padding: clamp(6px, 1.4dvh, 12px) clamp(8px, 2vw, 14px); }
  .speech-bubble p   { font-size: clamp(0.58rem, 2.4vw, 0.78rem); }
  .vignette-img      { height: clamp(48px, 9dvh, 80px); }
}

/* ============================================================
   RESPONSIVE — SMARTPHONES PORTRAIT (375–430px)
   iPhone SE, 12 Pro, 16 Pro, S24 Ultra…
   Sans condition de hauteur : fix iOS 18 / iPhone 16 Pro
   (hauteur visible ~682px < 700px → ancienne condition jamais déclenchée)
============================================================ */
@media (min-width: 375px) and (max-width: 430px) {
  .prune-img         { height: clamp(190px, 42dvh, 380px); right: 26%; }
  .marc-img          { height: clamp(210px, 45dvh, 410px); right: 3%;  }
  .bubble-marc-zone  { top: 13%; width: clamp(140px, 50vw, 230px); }
  .bubble-prune-zone { top: 42%; width: clamp(110px, 39vw, 185px); }
  .speech-bubble     { padding: clamp(6px, 1.4dvh, 12px) clamp(8px, 2vw, 14px); }
  .speech-bubble p   { font-size: clamp(0.60rem, 2.5vw, 0.80rem); }
  .vignette-img      { height: clamp(50px, 10dvh, 90px); }
}

/* ============================================================
   RESPONSIVE — TABLETTE (≥ 600px)
   iPad 6ème génération (768×1024)
============================================================ */
@media (min-width: 600px) {
  .prune-img         { right: calc(50% - 14%); }   /* = 36% depuis la droite */
  .marc-img          { right: calc(50% - 30%); }   /* = 20% depuis la droite */
  .bubble-marc-zone  { top: 10%; }
  .bubble-prune-zone { top: 32%; }
}

/* ============================================================
   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(480px, 52dvh, 760px); }
  .marc-img          { height: clamp(520px, 56dvh, 820px); }
  .bubble-marc-zone  { top: 20%; }
  .bubble-prune-zone { top: 42%; }
}

/* ============================================================
   RESPONSIVE — PAYSAGE MOBILE (hauteur ≤ 450px)
============================================================ */
@media (max-height: 450px) and (orientation: landscape) {
  .titre-zone        { top: 1%; }
  .page-title        { font-size: 0.75rem; }
  .speech-bubble p   { font-size: 0.55rem; line-height: 1.25; }
  .bubble-marc-zone  { top: 7%; width: 42vw; }
  .bubble-prune-zone { top: 28%; width: 38vw; }
  .prune-img         { height: 125px; }
  .marc-img          { height: 135px; }
  .vignette-img      { height: 52px; }
  .btn-suivant img   { height: 24px; }
}