/* ============================================================
   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 — fond blanc, flex colonne
============================================================ */
.screen {
  position: relative;
  width: 100%;
  height: 100dvh;
  background: #ffffff;
  display: flex;
  flex-direction: column;
  overflow-y: auto;
}

/* ============================================================
   IMAGE HAUT — fond paysage + chèvre superposée
   position:relative → contexte de positionnement pour .chevre-img
   width:100% + height:auto → proportions naturelles, 0 recadrage
============================================================ */
.fond-zone {
  flex: 0 0 auto;
  position: relative;   /* contexte pour .chevre-img */
}

.fond-img {
  width: 100%;
  height: auto;         /* proportions naturelles, 0 recadrage */
  display: block;
  animation: fadeIn 0.5s ease 0.1s both;
}

/* Chèvre superposée — droite, pied sur le bas du fond */
.chevre-img {
  position: absolute;
  bottom: 5%;
  right: 5%;
  height: clamp(80px, 42vw, 380px);  /* proportionnel à la largeur (= image 100vw) */
  width: auto;
  pointer-events: none;
  animation: fadeIn 0.6s ease 0.2s both;
}

/* ============================================================
   TEXTE — titre accroche + corps
   flex:1 → absorbe l'espace restant sous la photo
============================================================ */
.texte-zone {
  flex: 1;
  padding: clamp(8px, 2dvh, 18px) clamp(14px, 5%, 30px) clamp(4px, 1dvh, 10px);
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: clamp(6px, 1.4dvh, 14px);
  animation: fadeIn 0.5s ease 0.2s both;
}

/* "Nous voici au départ…" — bleu-vert gras */
.titre-accroche {
  font-size: clamp(0.82rem, 3.5vw, 1.8rem);
  font-weight: 700;
  color: #1a7a7a;
  text-align: center;
  line-height: 1.4;
}

/* Corps de texte */
.body-text {
  font-size: clamp(0.68rem, 2.5vw, 1.3rem);
  color: #1a1a2a;
  text-align: center;
  line-height: 1.65;
}

/* ============================================================
   BAS DE PAGE — lézard centré, coffre+points droite
   Grid 3 colonnes : 1fr | lézard (auto) | coffre+points (1fr)
============================================================ */
.bas-zone {
  flex: 0 0 auto;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: end;
  padding: clamp(6px, 1.5%, 14px) clamp(12px, 4%, 28px) clamp(8px, 2%, 18px);
  animation: fadeIn 0.5s ease 0.3s both;
}

/* --- IMG_Lezard — colonne centrale, légèrement surélevé --- */
.lezard-img {
  grid-column: 2;
  margin-bottom: clamp(10px, 2.5dvh, 28px);  /* "un peu plus haut" */
  height: clamp(65px, 15dvh, 130px);
  width: auto;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  user-select: none;
  border-radius: clamp(4px, 1vw, 8px);
  filter: drop-shadow(1px 2px 5px rgba(0,0,0,0.35));
}
.lezard-img:active { transform: scale(0.93); }

/* --- Score : coffre + rectangle rouge — colonne droite --- */
.score-zone {
  grid-column: 3;
  justify-self: end;   /* collé à droite dans la colonne */
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: clamp(5px, 1.5vw, 12px);
}

.coffre-img {
  height: clamp(36px, 7dvh, 64px);
  width: auto;
  display: block;
}

/* Rectangle rouge — affiche gnPointsGagnes */
.points-box {
  background: #cc0000;
  color: #ffffff;
  font-weight: 700;
  font-size: clamp(0.88rem, 3vw, 1.2rem);
  min-width: clamp(38px, 10vw, 68px);
  padding: clamp(4px, 0.8dvh, 8px) clamp(6px, 1.5vw, 12px);
  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;
}

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

/* ============================================================
   RESPONSIVE — SMARTPHONE (≤ 500px)  ex. Samsung S21 , S24 , Iphone 12, 16 pro
============================================================ */
@media (max-width: 500px) {
  .titre-accroche  { font-size: clamp(0.78rem, 3.6vw, 1.2rem); }
  .body-text       { font-size: clamp(0.64rem, 3vw, 1rem); }
  .lezard-img      { height: clamp(60px, 14vh, 110px); 
                     margin-bottom: clamp(10px, 5dvh, 56px);  /* "un peu plus haut" */
                    }
}

/* ============================================================
   RESPONSIVE — TABLETTE COURTE (≥ 600px, ≤ 1100px haut)
   ex. iPad 6ème génération
============================================================ */
@media (min-width: 600px) and (max-height: 1100px) {
  .titre-accroche  { font-size: clamp(0.82rem, 3.5vw, 1.8rem); }
  .body-text       { font-size: clamp(0.68rem, 2.6vw, 1.3rem); }
  .lezard-img      { height: clamp(80px, 15dvh, 130px); }
}

/* ============================================================
   RESPONSIVE — TABLETTE HAUTE (≥ 600px, ≥ 1100px haut)
   ex. Samsung Tab A8
============================================================ */
@media (min-width: 600px) and (min-height: 1100px) {
  .titre-accroche  { font-size: clamp(0.82rem, 3.5vw, 1.8rem); }
  .body-text       { font-size: clamp(0.68rem, 2.6vw, 1.3rem); }
  .lezard-img      { height: clamp(100px, 14dvh, 150px); }
  .coffre-img      { height: clamp(44px, 7dvh, 78px); }
  .points-box      { font-size: clamp(1rem, 3vw, 1.35rem); }
}

/* ============================================================
   RESPONSIVE — PORTRAIT ÉTROIT (≤ 360px)
============================================================ */
@media (max-width: 360px) {
  .titre-accroche  { font-size: 1.2rem; }
  .body-text       { font-size: 1rem; }
  .lezard-img      { height: 65px; }
}

/* ============================================================
   RESPONSIVE — PAYSAGE MOBILE (hauteur ≤ 450px)
============================================================ */
@media (max-height: 450px) and (orientation: landscape) {
  /* En paysage, contraindre la hauteur du fond pour laisser
     de la place au texte et au bas de page */
  .fond-img        { width: auto; height: 44dvh; max-width: 100%; }
  .chevre-img      { height: clamp(55px, 34dvh, 160px); }
  .texte-zone      { padding: 4px 14px; gap: 4px; }
  .titre-accroche  { font-size: 0.65rem; }
  .body-text       { font-size: 0.56rem; line-height: 1.3; }
  .bas-zone        { padding: 4px 14px 6px; }
  .lezard-img      { height: 55px; }
  .coffre-img      { height: 30px; }
  .points-box      { font-size: 0.72rem; padding: 2px 6px; }
}