/* =========================
   FOND DESKTOP
========================= */
.fond-campus {
  background: url("../images/fonds/fond_campus.webp") center / cover no-repeat;
  background-attachment: fixed;
  color: #fff;
}

/* =========================
   FOND PORTRAIT
   👉 Change ici ton image mobile
========================= */
@media (orientation: portrait) {
  .fond-campus {
    background: url("../images/fonds/fond_campus_mobile.webp") center / cover no-repeat;
  }
}

/* =========================
   ZONE PRINCIPALE
   👉 Centre tout le bloc d’icônes
========================= */
.campus-zone {
  min-height: calc(0vh - 140px);
  display: flex;
  align-items: center;
  justify-content: center;
}

/* =========================
   COLONNE D’ICÔNES
   👉 Toujours vertical
   👉 Ajuste "gap" pour espacer
========================= */
.icons-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0rem; /* 🔧 espace entre les panneaux */
}

/* =========================
   BASE DES ICÔNES
========================= */
.icon-choice {
  cursor: pointer;
  transition: transform 0.3s ease;
}

/* =========================
   IMAGE DES ICÔNES
   👉 Taille principale ici
========================= */
.icon-choice img {
  width: 260px; /* 🔥 taille des panneaux (augmente/diminue ici) */
  height: auto;

  filter: brightness(0.75);
  transition: all 0.3s ease;
}

/* =========================
   CHAOS VISUEL (inclinaisons)
   👉 Tu peux modifier les angles (deg)
   👉 et les décalages (translate)
========================= */

/* ÉCURIES (haut) */
.icon-choice:nth-child(1) img {
  transform: rotate(-6deg) translateX(-10px);
}

/* PUITS (milieu) */
.icon-choice:nth-child(2) img {
  transform: rotate(4deg) translateX(8px);
}

/* SOUTERRAINS (bas) */
.icon-choice:nth-child(3) img {
  transform: rotate(-3deg) translateX(-5px);
}

/* =========================
   HOVER (interaction)
   👉 remet droit + zoom léger
========================= */
.icon-choice:hover img {
  transform: rotate(0deg) scale(1.1);
  filter: brightness(1);
}

/* =========================
   CLICK (feedback)
========================= */
.icon-choice:active img {
  transform: scale(0.95);
}

/* =========================
   RESPONSIVE TABLET
   👉 réduit taille icônes
========================= */
@media (max-width: 900px) {
  .icon-choice img {
    width: 150px;
  }
}

/* =========================
   RESPONSIVE MOBILE
========================= */
@media (max-width: 600px) {
  .icon-choice img {
    width: 200px;
  }

  .icons-container {
    gap: 1rem;
  }
}