html, body {
  margin: 0;
  padding: 0;
  overflow: hidden; /* coupe scroll horizontal + vertical */
  width: 100%;
  height: 100%;
}

body.fond-salles-classe {
  position: relative;
  min-height: 100vh;
  background-image: url("../images/fonds/fond_salles_classe.webp");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  color: #fff;
  overflow: hidden;
}

@media (max-width: 900px){
  body.fond-salles-classe{
    background-image: url("../images/fonds/fond_salles_mobile.webp");
  }
}

/* -------------------------------
   SALLE D'EXPÉRIENCE
--------------------------------- */
/* Desktop / tablette large */
body.fond-salles-classe .tableau-zone {
  position: absolute;
  top: 9%;
  left: 30%;
  width: 37%;
  height: auto;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  text-align: left;
  font-size: clamp(0.8rem, 1vw + 0.6rem, 1.1rem);
  line-height: 0.5; /* compact */
  color: #f4f4f4;
}

body.fond-salles-classe .tableau-zone .card {
  margin: 0.0rem 0; 
}

/* Écrans ≤ 900px — tablettes / petits desktops */
@media (max-width: 900px) {
  body.fond-salles-classe .tableau-zone {
    position: relative;
    top: auto;
    left: auto;
    width: 50%;
    max-height: 70vh;
    margin: 0.3rem auto;
    overflow-y: auto; /* scroll si contenu trop grand */
    font-size: clamp(0.85rem, 2vw + 0.5rem, 1.1rem);
    line-height: 0.5;
    text-align: left;
  }

  body.fond-salles-classe .tableau-zone .card {
    margin: 0.0rem 0;
  }
}

/* Écrans ≤ 600px — mobiles */
@media (max-width: 900px) {
  body.fond-salles-classe .tableau-zone {
    width: 85%;
    max-height: 65vh;
    font-size: clamp(0.7rem, 3vw + 0.3rem, 0.95rem);
    line-height: 0.5;
    text-align: center;
    overflow-y: auto;
  }

  body.fond-salles-classe .tableau-zone .card {
    margin: 0.0rem 0;
  }

  .content_salles_classe {
    padding-bottom: 120px; /* pour laisser la place du footer */
  }
}

/* ================================
   LIENS STYLE CRAIE (TABLEAU)
================================ */
body.fond-salles-classe .tableau-zone a{
  color: #f5f5f5;
  text-decoration: none;

  font-family: "Chalkboard", "Comic Sans MS", cursive;
  font-weight: 500;

  letter-spacing: 0.4px;
  line-height: 0.5;

  position: relative;
  display: inline-block;

  /* effet craie */
  text-shadow:
    0 0 1px rgba(255,255,255,0.9),
    1px 1px 0 rgba(255,255,255,0.15),
    -1px -1px 0 rgba(255,255,255,0.1);

  /* léger effet poudre */
  opacity: 0.95;
  filter: blur(0.15px);

  transition: all 0.2s ease;
}


/* ================================
   HOVER (effet craie vivante)
================================ */
body.fond-salles-classe .tableau-zone a:hover{
  color: #ffffff;

  text-shadow:
    0 0 2px rgba(255,255,255,1),
    0 0 6px rgba(255,255,255,0.6);

  transform: translateX(3px);
}


/* ================================
   TRAIT DE CRAIE ANIMÉ
================================ */
body.fond-salles-classe .tableau-zone a::after{
  content: "";
  position: absolute;
  left: 0;
  bottom: -3px;

  width: 0%;
  height: 2px;

  background: rgba(255,255,255,0.7);

  /* effet irrégulier */
  box-shadow:
    0 0 2px rgba(255,255,255,0.6),
    1px 0 0 rgba(255,255,255,0.4),
    -1px 0 0 rgba(255,255,255,0.3);

  transition: width 0.3s ease;
}


/* animation du trait */
body.fond-salles-classe .tableau-zone a:hover::after{
  width: 100%;
}