/* ============================================================
   🎛️ VARIABLES GLOBALES
============================================================ */
:root {

  --panel-x: 50%;
  --panel-y: 28%;
  --panel-width: 23%;
  --panel-padding: 2rem;

  --choice-max-height: 320px;
}


/* ============================================================
   🌌 BASE
============================================================ */
html, body {
  height: 100%;
}

body {
  margin: 0;
  min-height: 100vh;
  overflow-x: hidden;

  background: url("../images/fonds/fond_chambre_doute.webp") center / cover no-repeat;

  font-family: Georgia, serif;
  color: #f2e6c8;
}


/* ============================================================
   💡 LUMIÈRES
============================================================ */
#light-left,
#light-right {
  position: fixed;
  inset: 0;
  opacity: 0;
  transition: opacity 1.5s ease;
  pointer-events: none;
  z-index: 2;
}

#light-left {
  background: radial-gradient(circle at 25% 50%, rgba(255,210,140,0.9), transparent 60%);
}

#light-right {
  background: radial-gradient(circle at 75% 50%, rgba(170,220,255,0.9), transparent 60%);
}


/* ============================================================
   🏗️ STRUCTURE
============================================================ */
.chambre-wrapper {
  position: relative;
  width: 100%;
  min-height: 100vh;
}


/* ============================================================
   🖼️ CHOIX (DESKTOP)
============================================================ */
.image-choice {
  position: absolute;
  top: 28%;
  transform: translateY(-50%);
  max-height: var(--choice-max-height);
  cursor: pointer;
  z-index: 3;
  user-select: none;
}

.image-choice.left { left: 18%; }
.image-choice.right { right: 18%; }

.image-choice img {
  display: block;

  height: var(--choice-max-height);
  width: auto;
  max-width: 100%;
  object-fit: contain;

  border-radius: 14px;
  filter: brightness(0.6);
  transition: 0.4s ease;
}

.image-choice:hover img {
  filter: brightness(0.85);
  transform: scale(1.02);
}

.image-choice.selected img {
  filter: brightness(1.2);
  transform: scale(1.05);
}


/* ============================================================
   🧠 MACHINE (DESKTOP)
============================================================ */
.chambre-panel {
  position: absolute;
  left: var(--panel-x);
  top: var(--panel-y);
  transform: translate(-50%, -50%);

  width: var(--panel-width);
  padding: var(--panel-padding);

  background: rgba(12,10,7,0.88);
  border-radius: 16px;

  text-align: center;
  z-index: 4;
  pointer-events: none;

  backdrop-filter: blur(4px);
}


/* ============================================================
   TEXTE
============================================================ */
h1 { opacity: 0.5; margin-bottom: 0.4rem; }
.doute-question { font-size: 1.2rem; margin-bottom: 0.6rem; }
.timer { font-size: 0.8rem; opacity: 0.6; }
.validation { margin-top: 0.8rem; font-style: italic; }
.hidden { display: none; }


/* ============================================================
   🧾 OVERLAY
============================================================ */
.overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.85);

  display: flex;
  align-items: center;
  justify-content: center;

  z-index: 999;
}

.overlay.hidden { display: none; }

.overlay-box {
  background: rgba(20, 15, 10, 0.95);
  padding: 2rem 2.5rem;
  border-radius: 18px;
  text-align: center;
}


/* ============================================================
   🔒 LOCK
============================================================ */
.image-choice.locked {
  pointer-events: none;
  opacity: 0.6;
}


/* ============================================================
   📱 TABLET / SMALL MOBILE (BASE MOBILE)
============================================================ */
@media (max-width: 768px) {

  .image-choice img {
    height: 160px;
    max-height: 160px;
  }

  .image-choice.left { left: 12%; }
  .image-choice.right { right: 12%; }

  .chambre-panel {
    width: 25%;
    padding: 0.95rem;
  }

  .doute-question {
    font-size: 1rem;
  }
}


/* ============================================================
   📱 PORTRAIT (NOUVELLE ARCHITECTURE PROPRE)
   ORDER :
   1 → IMAGES
   2 → MACHINE
============================================================ */
@media (max-width: 768px) and (orientation: portrait) {

  /* 🧱 WRAPPER */
  .chambre-wrapper {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding-top: 2rem; /* 👈 ajuste ici la descente globale */
    gap: 0.6rem;
  }

  /* 🖼️ ROW IMAGES */
  .choices-row {
    order: 1;

    display: flex;
    justify-content: center;
    gap: 1rem;

    width: 100%;
    margin: 0;
  }

  /* 🖼️ IMAGES */
  .image-choice {
    position: relative !important;
    top: auto !important;
    transform: none !important;

    width: 45%;
  }

  .image-choice img {
    width: 100%;
    height: auto;
    max-height: 180px;
    display: block;
  }

  /* 🧠 MACHINE */
  .chambre-panel {
    order: 2;

    position: relative !important;
    left: auto !important;
    top: auto !important;
    transform: none !important;

    width: 85%;

    margin: 0;
    padding: 1rem;
  }

  /* 🔧 CLEAN POSITION DESKTOP LEFT/RIGHT */
  .image-choice.left,
  .image-choice.right {
    left: auto !important;
    right: auto !important;
  }
}