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

.fond-bureau-doyen {
  background-image: url("../images/fonds/fond_bureau_doyen.webp");
  background-size: cover;
  background-position: center;
  background-attachment: fixed;
  margin: 0;
  color: white;
}

/* ======================
   TITRE MIROIR IMAGINARIUM
====================== */
.mirror-title {
  text-align: center;
  margin-top: 1.5rem;
  padding: 0 1rem;

  font-family: 'Cinzel', 'Georgia', serif;
  font-size: clamp(1.3rem, 3vw, 2.2rem);
  letter-spacing: 2px;

  color: #e8dcc0;

  position: relative;
  text-transform: uppercase;
}

/* effet gravure dorée */
.mirror-title {
  text-shadow:
    0 1px 0 #000,
    0 2px 4px rgba(0,0,0,0.6),
    0 0 8px rgba(255, 215, 150, 0.3);
}

/* ======================
   LIGNE MIROIR
====================== */
.mirror-title::before,
.mirror-title::after {
  content: "";
  position: absolute;
  top: 50%;
  width: 20%;
  height: 1px;
  background: linear-gradient(
    to right,
    transparent,
    rgba(255, 220, 150, 0.6),
    transparent
  );
}

.mirror-title::before {
  left: 0;
}

.mirror-title::after {
  right: 0;
}

/* ======================
   EFFET MIROIR SUBTIL
====================== */
.mirror-title span {
  display: inline-block;
  position: relative;
}

.mirror-title span::after {
  content: attr(data-text);
  position: absolute;
  left: 0;
  top: 100%;
  transform: scaleY(-1);
  opacity: 0.15;
  filter: blur(2px);
  color: #d4c4a0;
}

/* ======================
   DESKTOP MIRROR
====================== */
.bureau {
  display: flex;
  width: clamp(300px, 85vw, 1200px); /* ⬅️ plus large */
  margin: 1rem auto;
  aspect-ratio: 16 / 9;
}

.side {
  flex: 1;
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.image {
  width: 100%;
  height: 60%;
  overflow: hidden;
}

.image img {
  width: 200%;
  height: 100%;
  object-fit: contain;
  transition: transform 0.5s ease;
}

/* effet miroir desktop */
.left .image img { transform: translateX(0); }
.right .image img { transform: translateX(-50%); }

/* ======================
   RESPONSIVE GLOBAL
====================== */

/* TABLETTE + MOBILE */
@media (max-width: 900px) {

  html, body {
    overflow: hidden; /* on garde ton choix */
  }

  .bureau {
    width: 95%;
    margin: 1rem auto;
    aspect-ratio: 16 / 9; /* on garde le miroir */
  }

  .image {
    height: 100%;
  }

  .image img {
    height: 100%;
    object-fit: contain;
  }
}

/* ======================
   PETITS ÉCRANS PORTRAIT
====================== */
@media (max-width: 600px) and (orientation: portrait) {

  .mirror-title {
    font-size: 1.1rem;
    margin-top: 1rem;
  }

  .bureau {
    width: 95%;
    aspect-ratio: 3 / 4; /* un peu plus vertical */
  }

  .image {
    height: 100%;
  }
}


/* ======================
   PETITS ÉCRANS PAYSAGE
====================== */
@media (max-height: 500px) and (orientation: landscape) {

  .mirror-title {
    font-size: 1rem;
    margin-top: 0.5rem;
  }

  .bureau {
    width: 90%;
    height: 70vh; /* force la hauteur visible */
    aspect-ratio: auto;
  }

  .image {
    height: 100%;
  }
}