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

/* ============================================================
   ÉCRAN — colonne flex, hauteur viewport, pas de scroll
============================================================ */
.screen {
  position: relative;
  width: 100%;
  height: 100vh;                  /* fallback iOS < 15.4 (sans dvh/svh) */
  height: 100svh;                 /* viewport stable : barre d'adresse exclue */
  height: var(--real-vh, 100svh); /* JS : visualViewport.height → exclut aussi la barre d'outils basse Safari */
  background: #ffffff;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  padding-bottom: 56px;           /* réserve l'espace sous la bas-zone fixée */
}

/* ============================================================
   TITRE
============================================================ */
.titre-zone {
  flex: 0 0 auto;
  padding: clamp(6px, 1.2dvh, 12px) clamp(12px, 4%, 24px) clamp(2px, 0.4dvh, 4px);
  text-align: center;
  animation: fadeIn 0.5s ease 0.05s both;
}

.page-title {
  font-size: clamp(1rem, 4vw, 2rem);
  font-weight: 700;
  color: #1a56d0;
  margin-top: clamp(4px, 1.2dvh, 16px);   /* était 5% de la largeur → maintenant basé sur la hauteur */
}

/* ============================================================
   TOP : texte (gauche, flex:1) + coffre déco (droite)
============================================================ */
.top-zone {
  flex: 0 0 auto;
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: clamp(10px, 3vw, 22px);
  padding: clamp(6px, 1.5dvh, 16px) clamp(12px, 4%, 24px);
  margin-top: clamp(4px, 2dvh, 16px);   /* marge plafonnée : ne peut plus gonfler à l'infini */
  animation: fadeIn 0.5s ease 0.1s both;
}

.top-text {
  flex: 1;
  font-size: clamp(0.82rem, 3vw, 1.5rem);   /* +25 % vs version précédente */
  font-weight: 550;
  color: #222;
  line-height: 1.55;
}

.coffre-deco-img {
  flex-shrink: 0;
  height: clamp(80px, 22dvh, 160px);   /* réduit : filet de sécurité si media-query rate */
  width: auto;
  object-fit: contain;
}

/* ============================================================
   GRILLE BINAIRE — table + bouton indice côte à côte
============================================================ */
.grid-outer {
  flex: 0 0 auto;
  display: flex;
  flex-direction: row;
  align-items: stretch;
  gap: clamp(4px, 1.5vw, 8px);
  padding: clamp(3px, 0.6dvh, 8px) clamp(12px, 4%, 24px);
  margin-top: clamp(4px, 1.5dvh, 12px);  /* marge plafonnée */
  animation: fadeIn 0.5s ease 0.15s both;
}

.grid-table {
  flex: 1;
  display: flex;
  flex-direction: column;
  border: 1.5px solid #555;
}

.grid-row {
  display: grid;
  grid-template-columns: repeat(8, 1fr);
}

.grid-cell {
  border: 1px solid #888;
  text-align: center;
  padding: clamp(5px, 1.1dvh, 10px) 1px;
  font-size: clamp(9px, 2.5vw, 16px);   /* max relevé : 13→16 px */
  font-weight: 700;
  line-height: 1;
}

/* Ligne 1 : puissances de 2 */
.row-header .grid-cell { background: #fff; color: #e87700; }

/* Ligne 2 : bleu (→ chiffres 1-2 = 14) */
.row-blue .grid-cell { background: #6dcfed; color: #222; }

/* Ligne 3 : vert (→ chiffres 3-4 = 50) */
.row-green .grid-cell { background: #7ddc7d; color: #222; }

/* Bouton indice (IMG_SansNom2) */
.info-btn {
  flex-shrink: 0;
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  align-self: center;
  -webkit-tap-highlight-color: transparent;
}
.info-btn-img {
  height: clamp(34px, 7dvh, 54px);
  width: auto;
  display: block;
  border-radius: 4px;
}
.info-btn:active .info-btn-img { transform: scale(0.92); }

/* ============================================================
   ZONE SAISIE 4 CHIFFRES
============================================================ */
.input-zone {
  flex: 0 0 auto;
  display: flex;
  flex-direction: row;
  justify-content: center;
  gap: clamp(10px, 4vw, 24px);
  padding: clamp(4px, 0.8dvh, 10px) clamp(12px, 4%, 24px);
  animation: fadeIn 0.5s ease 0.2s both;
}

.digit-col {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(3px, 0.7dvh, 6px);
}

/* Boutons flèche (image) */
.arrow-btn {
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  line-height: 0;
  -webkit-tap-highlight-color: transparent;
  user-select: none;
}
.arrow-img {
  height: clamp(22px, 5.5dvh, 36px);
  width: auto;
  display: block;
}
.arrow-btn:active .arrow-img { transform: scale(0.88); }

/* Cases chiffres */
.digit-box {
  width: clamp(44px, 12vw, 70px);
  height: clamp(44px, 12vw, 70px);
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: clamp(6px, 2vw, 10px);
  font-size: clamp(1.2rem, 5.5vw, 2rem);
  font-weight: 700;
  color: #2a2a2a;
  box-shadow: 0 2px 5px rgba(0,0,0,0.22);
  user-select: none;
}

.digit-blue  { background: #6dcfed; }
.digit-green { background: #7ddc7d; }

/* ============================================================
   INSTRUCTION
============================================================ */
.instruction-text {
  flex: 0 0 auto;
  font-size: clamp(0.62rem, 3vw, 1.2rem);
  color: #555;
  text-align: center;
  padding: clamp(2px, 0.5dvh, 5px) clamp(12px, 4%, 24px);
  margin-bottom: clamp(4px, 1.2dvh, 16px);   /* était 5% de la largeur → maintenant basé sur la hauteur */
  animation: fadeIn 0.5s ease 0.25s both;
}

/* ============================================================
   LÉZARD — bouton de validation (IMG_Lezvert)
============================================================ */
.lezard-zone {
  flex: 0 0 auto;          /* taille naturelle — l'espace libre est géré par margin: auto */
  display: flex;
  justify-content: center;
  align-items: center;
  padding: clamp(4px, 1dvh, 10px) 0;
  animation: fadeIn 0.5s ease 0.3s both;
}

.lezard-img {
  height: clamp(44px, 9dvh, 75px);     /* réduit : filet de sécurité si media-query rate */
  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); }

/* ============================================================
   BAS DE PAGE : bouton retour (gauche) + score (droite)
   Fixé en bas du viewport — toujours visible quelle que soit
   la hauteur calculée pour .screen (contournement bug iOS svh).
============================================================ */
.bas-zone {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 5;
  background: #fff;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  padding: clamp(4px, 0.9dvh, 10px) clamp(12px, 4%, 24px)
           calc(clamp(6px, 1.3dvh, 12px) + env(safe-area-inset-bottom, 0px));
  animation: fadeIn 0.5s ease 0.35s both;
}

/* Bouton retour (image flèche_retour) */
.retour-btn {
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  line-height: 0;
  -webkit-tap-highlight-color: transparent;
  user-select: none;
}
.retour-fleche-img {
  height: clamp(34px, 8vw, 50px);
  width: auto;
  display: block;
}
.retour-btn:active .retour-fleche-img { transform: scale(0.93); }

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

/* ============================================================
   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
============================================================ */
.panel-bravo {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: clamp(10px, 3vw, 18px);
  padding: clamp(14px, 4vw, 22px) clamp(14px, 4vw, 22px);
}

.panel-bravo-img {
  height: clamp(50px, 13vw, 80px);
  width: auto;
  flex-shrink: 0;
}

.panel-bravo-body { flex: 1; }

.panel-bravo-title {
  font-size: clamp(1.2rem, 5.5vw, 1.9rem);
  font-weight: 900;
  color: #22aa55;
  line-height: 1.1;
}

.panel-bravo-pts {
  font-size: clamp(0.75rem, 3vw, 1rem);
  color: #444;
  margin-top: clamp(4px, 1vw, 8px);
}

/* Flèche → bleue (IMG_Fermer_barvo1) */
.panel-bravo-arrow {
  display: flex;
  align-items: center;
  justify-content: center;
  width: clamp(36px, 9vw, 52px);
  height: clamp(36px, 9vw, 52px);
  background: #3388cc;
  color: #fff;
  border: none;
  border-radius: 50%;
  font-size: clamp(18px, 5vw, 26px);
  cursor: pointer;
  flex-shrink: 0;
  -webkit-tap-highlight-color: transparent;
}
.panel-bravo-arrow:active { transform: scale(0.92); }

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

.panel-erreur-top {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: clamp(10px, 3vw, 16px);
}

.panel-erreur-img {
  height: clamp(44px, 11vw, 68px);
  width: auto;
  flex-shrink: 0;
}

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

.panel-title {
  font-size: clamp(0.88rem, 3.5vw, 1.15rem);
  font-weight: 700;
  color: #222;
  margin-bottom: clamp(3px, 0.8vw, 6px);
}

.panel-text {
  font-size: clamp(0.78rem, 3vw, 1rem);
  color: #333;
  line-height: 1.45;
}

.panel-erreur-footer {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
}

.panel-sous-texte {
  font-size: clamp(0.72rem, 2.8vw, 0.92rem);
  color: #555;
}

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

/* ============================================================
   PANEL INDICE (IMG_SansNom2)
============================================================ */
.panel-info {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(12px, 3vw, 20px);
  padding: clamp(18px, 5vw, 28px) clamp(16px, 4.5vw, 26px);
}

.panel-info-text {
  font-size: clamp(0.80rem, 3vw, 1rem);
  color: #333;
  text-align: center;
  line-height: 1.55;
}

.panel-ok-btn {
  background: #3388cc;
  color: #fff;
  border: none;
  border-radius: 8px;
  padding: clamp(7px, 2vw, 11px) clamp(22px, 6vw, 36px);
  font-size: clamp(0.85rem, 3vw, 1rem);
  font-weight: 600;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.panel-ok-btn:active { transform: scale(0.93); }

/* ============================================================
   TOAST — essai raté (pas le dernier)
============================================================ */
.toast-msg {
  position: fixed;
  left: 50%;
  top: 38%;
  transform: translateX(-50%) translateY(-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;
  transition: opacity 0.3s ease;
  pointer-events: none;
}
.toast-msg.toast-visible { opacity: 1; }

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

/* ============================================================
   RESPONSIVE — PORTRAIT ÉTROIT (≤ 360px)
============================================================ */
@media (max-width: 360px) {
  .page-title    { font-size: 0.88rem; }
  .top-text      { font-size: 0.64rem; }
  .coffre-deco-img { height: 80px; }
  .grid-cell     { font-size: 7px; padding: 3px 1px; }
  .digit-box     { width: 38px; height: 38px; font-size: 1rem; }
  .arrow-img     { height: 19px; }
  .instruction-text { font-size: 0.55rem; }
  .lezard-img    { height: 44px; }
  .retour-fleche-img { height: 26px; }
  .score-coffre-img { height: 24px; }
  .points-box    { font-size: 0.70rem; min-width: 28px; }
}

/* ============================================================
   RESPONSIVE — iPhone portrait (375–430 px de large)
   Couvre iPhone SE / 12 / 13 / 14 / 15 / 16 / 16 Pro / 16 Pro Max…
   La condition min/max-height est SUPPRIMÉE : sur iOS 18, Safari
   peut rapporter la hauteur du viewport visuel (~682 px) pour les
   media queries, ce qui était < 700 px et empêchait la règle de
   s'appliquer sur iPhone 16 Pro → la base CSS prenait le relais
   avec des éléments surdimensionnés (coffre jusqu'à 200 px) qui
   recouvraient le lézard.
============================================================ */
@media (min-width: 375px) and (max-width: 430px) {
  .coffre-deco-img { height: clamp(80px, 16dvh, 120px); }
  .top-zone        { padding: clamp(4px, 1dvh, 12px) clamp(12px, 4%, 24px); }
  .lezard-img      { height: clamp(44px, 8dvh, 62px); }
  .digit-box       { width:  clamp(42px, 11vw, 60px);
                     height: clamp(42px, 11vw, 60px); }
  .arrow-img       { height: clamp(20px, 4.2dvh, 32px); }
  .grid-cell       { padding: clamp(3px, 0.9dvh, 8px) 1px; }
}

/* ============================================================
   RESPONSIVE — TABLETTE (≥ 600px)
   On restaure margin-top: auto pour que le contenu reste
   distribué uniformément sur les grands écrans.
============================================================ */
@media (min-width: 600px) {
  .top-zone      { margin-top: auto; }  /* rétablit la répartition équilibrée */
  .grid-outer    { margin-top: auto; }
  .top-text      { font-size: clamp(0.95rem, 2.5vw, 1.45rem); }
  .coffre-deco-img { height: clamp(130px, 30dvh, 220px); }
  .grid-cell     { font-size: clamp(12px, 2.2vw, 18px); padding: clamp(5px, 1dvh, 10px) 2px; }
  .digit-box     { width: clamp(58px, 10vw, 88px); height: clamp(58px, 10vw, 88px); }
  .arrow-img     { height: clamp(28px, 5dvh, 44px); }
  .score-coffre-img { height: clamp(34px, 6dvh, 54px); }
  .points-box    { font-size: clamp(0.9rem, 2.2vw, 1.15rem); }
}

/* ============================================================
   RESPONSIVE — TABLETTE PORTRAIT CONTRAINTE (≥ 600px, ≤ 1099px h)
   Cible iPad 6e génération
============================================================ */
@media (min-width: 600px) and (max-height: 1099px) {
  .screen        { padding-bottom: 66px; }
  .titre-zone    { padding: clamp(4px, 0.8dvh, 8px) clamp(12px, 4%, 24px) clamp(2px, 0.3dvh, 3px); }
  .top-zone      { padding: clamp(4px, 0.8dvh, 10px) clamp(12px, 4%, 24px); }
  .coffre-deco-img { height: clamp(110px, 24dvh, 175px); } /* capé pour iPad */
  .grid-outer    { padding: clamp(2px, 0.4dvh, 5px) clamp(12px, 4%, 24px); }
  .input-zone    { padding: clamp(3px, 0.6dvh, 7px) clamp(12px, 4%, 24px); }
  .lezard-zone   { padding: clamp(2px, 0.4dvh, 4px) 0; }
  .bas-zone      { padding: clamp(3px, 0.6dvh, 7px) clamp(12px, 4%, 24px)
                            calc(clamp(4px, 0.8dvh, 8px) + env(safe-area-inset-bottom, 0px)); }
  .digit-box     { width: clamp(50px, 9vw, 76px); height: clamp(50px, 9vw, 76px); }
}

/* ============================================================
   RESPONSIVE — PAYSAGE MOBILE (hauteur ≤ 450px)
============================================================ */
@media (max-height: 450px) and (orientation: landscape) {
  .screen        { padding-bottom: 32px; }
  .titre-zone    { padding: 2px 10px 1px; }
  .page-title    { font-size: 0.72rem; }
  .top-zone      { padding: 2px 10px; }
  .top-text      { font-size: 0.55rem; }
  .coffre-deco-img { height: 50px; }
  .grid-outer    { padding: 2px 10px; }
  .grid-cell     { font-size: 7px; padding: 2px 1px; }
  .input-zone    { padding: 2px 10px; gap: 8px; }
  .digit-box     { width: 34px; height: 34px; font-size: 0.9rem; }
  .arrow-img     { height: 16px; }
  .instruction-text { padding: 1px 10px; font-size: 0.55rem; }
  .lezard-zone   { padding: 1px 0; }
  .lezard-img    { height: 38px; }
  .bas-zone      { padding: 2px 10px 4px; }
  .retour-fleche-img { height: 22px; }
  .score-coffre-img { height: 22px; }
  .points-box    { font-size: 0.62rem; min-width: 26px; padding: 2px 4px; }
}