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

html, body {
  width: 100%;
  height: 100%;
  overflow: hidden;          /* empêche le scroll parasite du body sur iOS */
  font-family: 'Helvetica Neue', Arial, sans-serif;
  background: #f5e9c4;
}

/* ============================================================
   ÉCRAN — fond beige crème, colonne flex
   (Le fond WinDev d'origine est beige avec caractères géorgiens
    en filigrane — on utilise ici un beige uni)
============================================================ */
.screen {
  position: relative;
  width: 100%;
  height: 100vh;                   /* fallback iOS < 15.4 */
  height: 100svh;                  /* viewport stable */
  height: var(--real-vh, 100svh);  /* JS-driven : hauteur visible réelle (iPhone 16 Pro) */
  background-color: #f5e9c4;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

/* ============================================================
   BARRE HAUT : bouton retour (gauche) + score (droite)
============================================================ */
.top-bar {
  flex: 0 0 auto;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  padding: clamp(4px, 0.8dvh, 10px) clamp(8px, 3%, 18px);
  animation: fadeIn 0.4s ease 0.05s both;
}

/* Bouton retour — image flèche */
.retour-btn {
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  line-height: 0;
  -webkit-tap-highlight-color: transparent;
}
.retour-img {
  height: clamp(36px, 9vw, 56px);
  width: auto;
  display: block;
}
.retour-btn:active .retour-img { transform: scale(0.92); }

/* Score coffre + points */
.score-zone {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: clamp(3px, 1vw, 8px);
}
.coffre-img {
  height: clamp(26px, 6vw, 42px);
  width: auto;
  display: block;
}
.points-box {
  background: #cc0000;
  color: #fff;
  font-weight: 700;
  font-size: clamp(0.80rem, 3vw, 1.1rem);
  min-width: clamp(30px, 9vw, 54px);
  padding: clamp(3px, 0.5dvh, 6px) clamp(5px, 1.5vw, 10px);
  border-radius: 4px;
  text-align: center;
  line-height: 1.2;
}

/* ============================================================
   ZONES TEXTE NARRATIF
============================================================ */
.texte-zone {
  flex: 0 0 auto;
  padding: clamp(5px, 1dvh, 12px) clamp(12px, 5%, 28px);
  text-align: center;
  animation: fadeIn 0.5s ease 0.1s both;
}

.texte-p {
  font-size: clamp(0.70rem, 5vw, 1.5rem);
  color: #1a1a1a;
  line-height: 1.5;
}

/* « Confrérie... » déjà en <strong> dans le HTML */
/* CPVVS en rouge */
.cpvvs {
  color: #cc0000;
}

/* ============================================================
   IMAGE TEXTE GÉORGIEN — zone flexible
   flex:1 → absorbe l'espace vertical restant
============================================================ */
.img-zone {
  flex: 1 1 0;
  min-height: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 clamp(12px, 5%, 28px);
  animation: fadeIn 0.5s ease 0.12s both;
}

.georgien-img {
  height: 100%;
  max-height: clamp(130px, 36dvh, 320px);
  width: auto;
  max-width: 92%;
  object-fit: contain;
  border: 1px solid #bba87a;
  box-shadow: 2px 2px 10px rgba(0,0,0,0.28);
  border-radius: 2px;
}

/* ============================================================
   ZONE CHOIX : boîte radio 2×2 (haut) + lézard en dessous
============================================================ */
.choix-zone {
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: clamp(6px, 1.2dvh, 14px);
  padding: clamp(5px, 1dvh, 12px) clamp(10px, 4%, 22px) clamp(8px, 1.5dvh, 16px);
  animation: fadeIn 0.5s ease 0.18s both;
}

/* Boîte blanche des 4 radios */
.choix-box {
  background: #ffffff;
  border: 1.5px solid #c0b080;
  border-radius: clamp(8px, 2vw, 14px);
  padding: clamp(8px, 1.8dvh, 16px) clamp(10px, 3.5%, 22px);
  box-shadow: 0 1px 6px rgba(0,0,0,0.12);
  flex-shrink: 0;
}

/* Grille 2 × 2 */
.choix-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  row-gap: clamp(6px, 1.5dvh, 14px);
  column-gap: clamp(14px, 4vw, 28px);
}

/* Un choix = cercle + texte */
.choix-label {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: clamp(5px, 1.5vw, 9px);
  cursor: pointer;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
}

/* Input radio caché (remplacé par cercle custom) */
.choix-radio {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
  pointer-events: none;
}

/* Cercle custom (non sélectionné) */
.choix-cercle {
  flex-shrink: 0;
  width: clamp(17px, 4.5vw, 24px);
  height: clamp(17px, 4.5vw, 24px);
  border-radius: 50%;
  border: 2px solid #aaa;
  background: #f8f8f8;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: border-color 0.15s;
}

/* Point central — invisible par défaut */
.choix-cercle::after {
  content: '';
  display: block;
  width: 52%;
  height: 52%;
  border-radius: 50%;
  background: #1a56d0;
  opacity: 0;
  transition: opacity 0.15s;
}

/* Sélectionné → cercle bleu + point visible */
.choix-radio:checked + .choix-cercle {
  border-color: #1a56d0;
  background: #fff;
}
.choix-radio:checked + .choix-cercle::after {
  opacity: 1;
}

/* Texte du choix — gras */
.choix-texte {
  font-size: clamp(0.80rem, 3vw, 1.5rem);
  font-weight: 700;
  color: #222;
  white-space: nowrap;
}

/* Lézard = bouton de validation */
.lezard-img {
  flex-shrink: 0;
  height: clamp(52px, 14vw, 82px);
  width: auto;
  cursor: pointer;
  border-radius: clamp(4px, 1.5vw, 10px);
  filter: drop-shadow(1px 2px 5px rgba(0,0,0,0.35));
  -webkit-tap-highlight-color: transparent;
  user-select: none;
}
.lezard-img:active { transform: scale(0.93); }

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

/* ============================================================
   PANELS — base commune
============================================================ */
.panel-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.45);
  z-index: 80;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: clamp(16px, 5%, 32px);
  animation: fadeIn 0.25s ease;
}

.panel-box {
  background: #fff;
  border-radius: clamp(8px, 2vw, 16px);
  box-shadow: 0 4px 28px rgba(0,0,0,0.38);
  width: 100%;
  max-width: clamp(280px, 88vw, 460px);
}

/* ============================================================
   PANEL BRAVO (GR_Bravo)
   Disposition : pouce (gauche) | Bravo + pts (centre) | flèche (droite)
============================================================ */
.panel-bravo {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: clamp(8px, 3vw, 18px);
  padding: clamp(16px, 4vw, 26px);
}

/* Pouce en l'air */
.pouce-img {
  height: clamp(50px, 13vw, 78px);
  width: auto;
  flex-shrink: 0;
}

/* Corps : Bravo + points */
.panel-bravo-corps { flex: 1; }

.panel-bravo-titre {
  font-size: clamp(1.4rem, 6vw, 2.2rem);
  font-weight: 900;
  color: #22aa22;
  line-height: 1.1;
}

.panel-bravo-pts {
  font-size: clamp(0.72rem, 2.8vw, 0.98rem);
  color: #444;
  margin-top: clamp(3px, 0.8vw, 7px);
}

/* Flèche suite (IMG_Fermer_barvo1) */
.panel-fleche-btn {
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  line-height: 0;
  flex-shrink: 0;
  -webkit-tap-highlight-color: transparent;
}
.fleche-suite-img {
  height: clamp(38px, 10vw, 58px);
  width: auto;
  display: block;
}
.panel-fleche-btn:active .fleche-suite-img { transform: scale(0.92); }

/* ============================================================
   PANEL ERREUR (GR_Groupe_pas_zout_trouve)
============================================================ */
.panel-erreur {
  display: flex;
  flex-direction: column;
  gap: clamp(8px, 2.5vw, 14px);
  padding: clamp(14px, 4vw, 22px);
}

/* Rangée haut : émoticoné + texte */
.panel-erreur-top {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: clamp(10px, 3vw, 18px);
}

.emoticone-img {
  height: clamp(42px, 12vw, 65px);
  width: auto;
  flex-shrink: 0;
}

.panel-erreur-texte { flex: 1; }

.panel-et-non {
  font-size: clamp(0.95rem, 3.5vw, 1.2rem);
  font-weight: 700;
  color: #333;
  margin-bottom: 3px;
}

.panel-bonne-rep {
  font-size: clamp(0.85rem, 3vw, 1.08rem);
  color: #333;
  line-height: 1.4;
}

/* Rangée bas : texte pas de point + croix rouge */
.panel-erreur-bas {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
}

.panel-pas-point {
  font-size: clamp(0.70rem, 2.5vw, 0.90rem);
  color: #666;
}

/* Bouton fermer (croix rouge fermer@dpi1x.png) */
.panel-fermer-btn {
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  line-height: 0;
  flex-shrink: 0;
  -webkit-tap-highlight-color: transparent;
}
.fermer-img {
  height: clamp(28px, 7vw, 42px);
  width: auto;
  display: block;
}
.panel-fermer-btn:active .fermer-img { transform: scale(0.88); }

/* ============================================================
   TOAST — 1 mauvaise réponse, encore 1 essai
============================================================ */
.toast-msg {
  position: fixed;
  left: 50%;
  bottom: 22%;
  transform: translateX(-50%);
  background: rgba(20,20,20,0.90);
  color: #fff;
  padding: clamp(10px, 3vw, 16px) clamp(14px, 4vw, 22px);
  border-radius: 10px;
  font-size: clamp(0.72rem, 2.8vw, 0.92rem);
  text-align: center;
  max-width: 82vw;
  z-index: 70;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease;
  display: none;
}
.toast-msg.toast-visible { opacity: 1; }

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

/* ============================================================
   RESPONSIVE — iPhone 12 Pro / 16 Pro (375–430 px, 700–932 px h)
============================================================ */
/* iPhone portrait — sans condition de hauteur (fix iOS 18 / iPhone 16 Pro) */
@media (min-width: 375px) and (max-width: 430px) {
  .texte-p      { font-size: clamp(0.60rem, 2.9vw, 0.82rem); line-height: 1.42; }
  .texte-zone   { padding: clamp(4px, 0.7dvh, 9px) clamp(12px, 4%, 22px); }
  .georgien-img { max-height: clamp(80px, 15dvh, 130px); }
  .choix-box    { padding: clamp(5px, 1.1dvh, 10px) clamp(10px, 3.5%, 22px); }
  .choix-zone   { gap: clamp(4px, 0.8dvh, 9px);
                  padding: clamp(4px, 0.7dvh, 9px) clamp(10px, 4%, 22px) clamp(5px, 1dvh, 10px); }
  .lezard-img   { height: clamp(46px, 10vw, 62px); }
}

/* ============================================================
   RESPONSIVE — PORTRAIT ÉTROIT (≤ 360px)
============================================================ */
@media (max-width: 360px) {
  .retour-img       { height: 30px; }
  .coffre-img       { height: 22px; }
  .texte-p          { font-size: 0.62rem; }
  .georgien-img     { max-height: 20dvh; }
  .choix-texte      { font-size: 0.70rem; }
  .lezard-img       { height: 44px; }
}

/* ============================================================
   RESPONSIVE — TABLETTE (≥ 600px)
============================================================ */
@media (min-width: 600px) {
  .texte-p          { font-size: clamp(1.05rem, 2.8vw, 1.8rem); }
  .georgien-img     { max-height: clamp(150px, 38dvh, 360px); }
  .choix-texte      {font-size: clamp(0.80rem, 3vw, 1.5rem); }
  .lezard-img       { height: clamp(62px, 12vw, 90px); }
  .coffre-img       { height: clamp(30px, 5vw, 44px); }
}

/* ============================================================
   RESPONSIVE — TABLETTE PORTRAIT CONTRAINTE (≥ 600px, ≤ 1099px h)
   Cible iPad 6e génération
============================================================ */
@media (min-width: 600px) and (max-height: 1099px) {
  .texte-zone       { padding: clamp(4px, 0.8dvh, 8px) clamp(12px, 5%, 28px); }
  .choix-zone       { padding: clamp(4px, 0.8dvh, 8px) clamp(10px, 4%, 22px) clamp(6px, 1dvh, 12px); }
  .georgien-img     { max-height: clamp(110px, 22dvh, 240px); }
}

/* ============================================================
   RESPONSIVE — PAYSAGE MOBILE (hauteur ≤ 450px)
============================================================ */
@media (max-height: 450px) and (orientation: landscape) {
  .top-bar          { padding: 2px 10px; }
  .retour-img       { height: 28px; }
  .coffre-img       { height: 20px; }
  .texte-zone       { padding: 2px 10px; }
  .texte-p          { font-size: 0.52rem; line-height: 1.3; }
  .img-zone         { padding: 0 10px; }
  .georgien-img     { max-height: 18dvh; }
  .choix-zone       { padding: 2px 10px 3px; gap: 6px; }
  .choix-box        { padding: 5px 8px; }
  .choix-grid       { row-gap: 4px; column-gap: 10px; }
  .choix-texte      { font-size: 0.58rem; }
  .lezard-img       { height: 36px; }
}