/* =========================================
   REPAS.CSS — version nettoyée & responsive
   ========================================= */

/* --- Offsets mobiles (tu peux les changer sans toucher au CSS) --- */
:root{
  --repas-menu-offset: 0px;      /* décale le MENU vers le bas (+) / haut (-) */
  --repas-kiosque-offset: 0px;   /* décale le KIOSQUE vers le bas/haut        */
  --repas-marche-offset: 0px;    /* décale MARCHE GOURMAND vers le bas/haut   */
}

/* === Scène desktop/tablette === */
.repas-stage{
  position: relative;
  max-width: 1200px;      /* largeur de référence */
  margin: 0 auto 40px;
  min-height: 2200px;     /* assez pour contenir les éléments */
  overflow: visible;
}
.repas-stage-inner{
  position: absolute;
  inset: 0;
  transform-origin: top left;
}

/* Images de base */
.repas-stage img{
  display: block;
  width: 100%;
  height: auto;
  border-radius: 10px;
  border: none;
}

/* ====== POSITIONS DESKTOP (conformes à ton visuel actuel) ====== */

/* Décors visibles par défaut en desktop/tablette */
.decorHD1, .decorHD2, .decorMG1, .decorMG2 { display:block; }

/* Menu */
.menu-image{
  position: absolute;
  top: 60px;
  left: -120px;
  width: 700px;
  z-index: 2;
}

/* Kiosque */
.kiosque{
  position: absolute;
  top: 980px;
  left: 650px;
  width: 700px;
  z-index: 2;
}

/* Marché gourmand */
.marchegourmand{
  position: absolute;
  top: 1700px;
  left: 30px;
  bottom: 50px;
  width: 1100px;
  z-index: 2;
}

/* Décor haut droite 1 */
.decorHD1{
  position: absolute;
  top: 150px;
  left: 1050px;
  width: 110px;
  height: 600px;
  z-index: 1;
}

/* Décor haut droite 2 */
.decorHD2{
  position: absolute;
  top: 120px;
  left: 850px;
  width: 100px;
  height: 700px;
  z-index: 1;
}

/* Décor milieu gauche 1 */
.decorMG1{
  position: absolute;
  top: 950px;
  left: 90px;
  width: 110px;
  height: 600px;
  z-index: 1;
}

/* Décor milieu gauche 2 */
.decorMG2{
  position: absolute;
  top: 930px;
  left: 270px;
  width: 100px;
  height: 700px;
  z-index: 1;
}

/* Affiche les décors dès qu'on n'est plus en smartphone */

@media (min-width: 481px){
  .decorHD1, .decorHD2, .decorMG1, .decorMG2{
    display: block !important;
    visibility: visible;
    opacity: 1;
  }
}


/* ====== TABLETTES (on “scale” le layout sans tout recaler) ====== */

/* 1024–768px */
@media (max-width: 1024px) and (min-width: 768px){
  .repas-stage{ max-width: 1000px; min-height: 2200px; }
  .repas-stage-inner{ transform: scale(0.85); }
}

/* 767–481px */
@media (max-width: 767px) and (min-width: 481px){
  .repas-stage{ max-width: 760px; min-height: 2200px; }
  .repas-stage-inner{ transform: scale(0.72); }
}

/* ====== SMARTPHONE PORTRAIT (≤480px) ======
   - Décors masqués
   - Images empilées en flux normal
   - Offsets réglables via variables CSS ci-dessus
================================================ */
@media (max-width: 480px){

  /* on sort du positionnement absolu */
  .repas-stage{
    position: relative;
    max-width: 100%;
    min-height: unset;
    margin: 0 auto 16px;
  }
  .repas-stage-inner{
    position: static;
    transform: none;
  }

  /* décors supprimés uniquement en mobile */
  .decorHD1, .decorHD2, .decorMG1, .decorMG2{
    display: none !important;
  }

  /* les 3 visuels deviennent des blocs empilés */
  .menu-image,
  .kiosque,
  .marchegourmand{
    position: static;
    width: 95%;
    margin: 0 auto;
  }

  /* espaces + offsets indépendants (que tu ajustes) */
  .menu-image{
    margin-top: calc(10px + var(--repas-menu-offset));
    margin-bottom: 22px;
  }
  .kiosque{
    margin-top: calc(10px + var(--repas-kiosque-offset));
    margin-bottom: 22px;
  }
  .marchegourmand{
    margin-top: calc(10px + var(--repas-marche-offset));
    margin-bottom: 26px; /* espace avant le footer */
  }

  /* petit confort pour le footer */
  .site-footer{ margin-top: 12px !important; }
}