/* ===== PAGE COMPLÈTE ===== */
body {
    margin: 0;
    background-color: black;
    font-family: 'Trebuchet MS', Arial, sans-serif;
    overflow: hidden; /* Pas de scroll sur la page */
}

/* ===== GRILLE 2 COLONNES ===== */
.scene {
  display: grid; /* Crée une grille */
  grid-template-columns: 1fr 1fr; /* 2 colonnes égales */
  height: 100vh; /* Toute la hauteur de l'écran */
}

/* ===== ZONE IMAGE (gauche) ===== */
.zone-image {
  display: flex; /* Pour centrer l'image */
  justify-content: center; /* Centre horizontalement */
  align-items: center; /* Centre verticalement */
}

.image-cliquable {
    height: 50%; /* L'image fait 50% de la hauteur */
    max-width: 90%; /* Max 90% de largeur */
    object-fit: contain; /* Garde les proportions */
    transition: transform 1s ease; /* Animation de 1 seconde */
    cursor: pointer; /* Curseur main */
}

/* Quand on clique, l'image s'agrandit */
.image-cliquable.zoom {
  transform: scale(1.7); /* Agrandit de 70% */
  z-index: 1000; /* Passe au-dessus du texte */
  cursor: zoom-out; /* Change le curseur */
}

/* ===== ZONE TEXTE (droite) ===== */
.zone-texte {
  display: flex;
  justify-content: center; /* Centre le texte */
  align-items: flex-start; /* Commence en haut */
  padding: 40px; /* Espace autour */
  padding-top: 0px; /* Plus d'espace en haut */
  overflow-y: scroll; /* Barre de scroll si texte long */
}

.texte {
  width: 400px; /* Largeur fixe */
  font-size: 17px;
  line-height: 1.6; /* Espacement des lignes */
  color: white;
}

/* ===== STYLE DES TITRES ET PARAGRAPHES ===== */
.texte h2 {
  margin-top: 15px;
  margin-bottom: 10px;
}

.texte p {
  margin-bottom: 12px;
}

/* ===== FORMULAIRE (en bas à droite) ===== */
.formulaire {
  position: fixed; /* Reste fixé à l'écran */
  bottom: 20px; /* 20px du bas */
  right: 20px; /* 20px de la droite */
  background: rgba(0, 0, 0, 0.9); /* Fond noir transparent */
  padding: 20px;
  border-radius: 10px; /* Coins arrondis */
  color: white;
  width: 300px;
  z-index: 2000; /* Au-dessus de tout */
  display: none;
}

.formulaire h3 {
  margin-top: 0;
}

.formulaire label {
  display: block; /* Chaque label sur sa ligne */
  margin-top: 10px;
  margin-bottom: 5px;
}

.formulaire input,
.formulaire textarea {
  width: 100%; /* Prend toute la largeur */
  padding: 8px;
  border: 1px solid white;
  background: rgba(255, 255, 255, 0.1); /* Fond transparent */
  color: white;
  border-radius: 5px;
  box-sizing: border-box; /* Inclut padding dans la largeur */
}

.formulaire button {
  margin-top: 10px;
  margin-right: 10px;
  padding: 8px 15px;
  background: white;
  color: black;
  border: none;
  border-radius: 5px;
  cursor: pointer;
}

.formulaire button:hover {
  background: #ddd; /* Gris clair au survol */
}

/* ===== MENTIONS LÉGALES ===== */
.mentions-legales {
  position: fixed;
  bottom: 20px;
  left: 20px;
  background: rgba(0, 0, 0, 0.9);
  padding: 20px;
  border-radius: 10px;
  color: white;
  width: 300px;
  max-height: 70vh;
  overflow-y: auto;
  z-index: 2000;
  display: none;
}