/* ===== STYLE GLOBAL ===== */
/* Réinitialisation des marges et remplissage pour html et body */
html, body 
{
  /* Supprime les marges par défaut */
  margin: 0;
  /* Supprime le remplissage par défaut */
  padding: 0;
  /* Prend 100% de la largeur de la fenêtre */
  width: 100%;
  /* Prend 100% de la hauteur de la fenêtre */
  height: 100%;
  /* Désactive le scroll vertical et horizontal */
  overflow: hidden; /* empêche le scroll */
}

/* Styles du body */
body 
{
  /* Police Exo 2 pour tout le texte du corps */
  font-family: 'Exo 2', sans-serif;
  /* Couleur de texte beige clair */
  color: #f5e6c4;
  /* Image de fond du Hall Dimitrescu (desktop) centrée et sans répétition */
  background: url('../img/hall_dimitrescu_desktop.jpg') no-repeat center center;
  /* L'image de fond s'étire pour couvrir tout l'écran sans laisser de blanc */
  background-size: cover; /* Remplit tout l'écran sans bandeau blanc */
}

/* ===== SCÈNE INTERACTIVE DESKTOP ===== */
/* Conteneur principal pour les zones interactives */
.hall 
{
  /* Positionnement relatif pour servir de référence aux éléments enfants */
  position: relative;
  /* Prend 100% de la largeur du parent */
  width: 100%;
  /* Prend 100% de la hauteur du parent */
  height: 100%;
}

/* ===== TITRES ET TEXTES ===== */
/* Style du titre principal h1 */
h1 
{
  /* Positionnement absolu pour le placer librement */
  position: absolute;
  /* Distance du haut : 5% de la hauteur de l'écran */
  top: 5%;
  /* Distance de la gauche : 30px */
  left: 30px;
  /* Police Anton pour un style gras et impactant */
  font-family: 'Anton', sans-serif;
  /* Convertit le texte en majuscules */
  text-transform: uppercase;
  /* Taille de police grande : 2.5 fois la taille de base */
  font-size: 2.5rem;
  /* Aligne le texte à gauche */
  text-align: left;
  /* Couleur beige clair */
  color: #f5e6c4;
  /* Ombre douce et lumineuse autour du texte */
  text-shadow: 0 0 15px rgba(255, 230, 180, 0.4);
}

/* Style du sous-titre h3 */
h3 
{
  /* Positionnement absolu */
  position: absolute;
  /* Distance du haut : 13% de la hauteur */
  top: 13%;
  /* Distance de la gauche : 30px */
  left: 30px;
  /* Taille de police moyenne : 1.2rem */
  font-size: 1.2rem;
  /* Couleur beige semi-transparent */
  color: rgba(240, 230, 200, 0.8);
}

/* Style du paragraphe descriptif */
p 
{
  /* Marge gauche de 30px */
  margin-left: 30px;
  /* Marge supérieure de 160px pour descendre le texte */
  margin-top: 160px;
}

/* ===== ZONES INTERACTIVES ===== */
/* Style commun pour toutes les zones (lustre, escalier, porte) */
.zone 
{
  /* Positionnement absolu pour placer les zones sur l'image */
  position: absolute;
  /* Indice de superposition : 10 (pour être au-dessus de l'image) */
  z-index: 10;
  /* Curseur souris en pointeur (main) au survol */
  cursor: pointer;
  /* Coins arrondis à 50% pour créer des cercles */
  border-radius: 50%;
  /* Transition douce de 0.3s pour les effets ombre et transformation */
  transition: box-shadow 0.3s ease, transform 0.3s ease;
}

/* Style des zones au survol */
.zone:hover 
{
  /* Ombre lumineuse orange/jaune au survol (40px de flou, 15px d'étalement) */
  box-shadow: 0 0 40px 15px rgba(255, 220, 150, 0.4);
  /* Agrandit la zone de 5% au survol pour un effet de zoom */
  transform: scale(1.05);
}

/* ===== POSITIONS DES ZONES SPÉCIFIQUES ===== */
/* Zone du lustre (haut center) */
.lustre 
{ 
  /* Position vers le haut (au-dessus de la zone visible, -12%) */
  top: -12%; 
  /* Position horizontale : 51.5% pour centrer */
  left: 51.5%; 
  /* Largeur circulaire : 250px */
  width: 250px; 
  /* Hauteur circulaire : 250px */
  height: 250px; 
}

/* Zone de l'escalier (bas gauche) */
.escalier 
{ 
  /* Position depuis le bas : 25% */
  bottom: 25%; 
  /* Position depuis la gauche : 15% */
  left: 15%; 
  /* Largeur circulaire : 250px */
  width: 250px; 
  /* Hauteur circulaire : 250px */
  height: 250px; 
}

/* Zone de la porte (bas droite) */
.porte 
{ 
  /* Position depuis le bas : 20% */
  bottom: 20%; 
  /* Position depuis la gauche : 58% (droite de l'écran) */
  left: 58%; 
  /* Largeur circulaire : 250px */
  width: 250px; 
  /* Hauteur circulaire : 250px */
  height: 250px; 
}

/* Style des liens à l'intérieur des zones */
.zone a 
{
  /* Positionnement absolu pour remplir toute la zone */
  position: absolute;
  /* Décalage zéro pour couvrir toute la zone */
  top: 0;
  /* Décalage zéro pour couvrir toute la zone */
  left: 0;
  /* Largeur 100% de la zone parente */
  width: 100%;
  /* Hauteur 100% de la zone parente */
  height: 100%;
  /* Affiche comme bloc pour que tout l'espace soit cliquable */
  display: block;
  /* Supprime le soulignement des liens */
  text-decoration: none;
}

/* ===== NAVIGATION MOBILE ===== */
/* Navigation mobile masquée sur desktop */
.nav-mobile 
{ 
  /* Masque l'élément sur écrans de bureau */
  display: none; 
}

/* ===== VERSION TABLETTE/MOBILE (PORTRAIT) ===== */
/* Adaptations pour écrans de 1024px maximum en mode portrait */
@media only screen and (max-width: 1024px) and (orientation: portrait) 
{
  /* Adaptation du body pour mobile */
  body 
  {
    /* Image de fond différente pour mobile */
    background: url('../img/hall_mobile.jpg') no-repeat center center;
    /* Couvre tout l'écran */
    background-size: cover;  /* plein écran */
    /* Utilise flexbox pour centrer le contenu */
    display: flex;
    /* Dispose les éléments verticalement (colonne) */
    flex-direction: column;
    /* Centre verticalement */
    justify-content: center;
    /* Centre horizontalement */
    align-items: center;
    /* Hauteur minimale égale à la fenêtre */
    min-height: 100vh;
    /* Désactive le scroll */
    overflow: hidden;
  }

  /* Cache la scène interactive sur mobile */
  .hall 
  { 
    /* Masque le conteneur des zones interactives */
    display: none; 
  }

  /* Adaptation du titre h1 pour mobile */
  h1 
  {
    /* Positionnement statique (normal flow) */
    position: static;
    /* Centre le texte horizontalement */
    text-align: center;
    /* Taille de police réduite pour mobile : 2.4rem */
    font-size: 2.4rem;
    /* Couleur rouge foncé pour contraste sur fond clair */
    color: #4b1818;
    /* Ombre blanche pour lisibilité */
    text-shadow: 0 0 15px rgb(255, 255, 255);
    /* Réinitialise les marges */
    margin: 0;
  }

  /* Adaptation du sous-titre h3 pour mobile */
  h3 
  {
    /* Positionnement statique */
    position: static;
    /* Centre le texte */
    text-align: center;
    /* Taille de police inchangée : 1.2rem */
    font-size: 1.2rem;
    /* Couleur blanche pour contraste */
    color: #ffffff;
    /* Ombre blanche pour lisibilité */
    text-shadow: 0 0 15px rgb(255, 255, 255);
    /* Espaces : 10px haut/bas, 40px bas pour espace avant le menu */
    margin: 10px 0 40px 0; /* espace entre h1 et menu */
  }

  /* Cache le paragraphe descriptif sur mobile */
  p 
  { 
    /* Masque le paragraphe */
    display: none; 
  }

  /* Affiche et style le menu mobile */
  .nav-mobile 
  {
    /* Affiche le menu sur mobile */
    display: block;
    /* Largeur : 90% de l'écran */
    width: 90%;
    /* Largeur maximale : 600px pour éviter une dilatation excessive */
    max-width: 600px;
    /* Police Playfair Display pour élégance */
    font-family: 'Playfair Display', serif;
  }

  /* Style de la liste non-ordonnée du menu mobile */
  .nav-mobile ul 
  {
    /* Supprime les puces de liste */
    list-style: none;
    /* Réinitialise les marges */
    margin: 0;
    /* Réinitialise le remplissage */
    padding: 0;
  }

  /* Style des éléments de liste du menu mobile */
  .nav-mobile ul li 
  {
    /* Espacement entre les boutons : 15px */
    margin-bottom: 15px;
  }

  /* Style des liens du menu mobile */
  .nav-mobile ul li a 
  {
    /* Affiche comme bloc pour que le lien occupe toute la largeur */
    display: block;
    /* Fond rouge foncé (couleur du château) */
    background-color: #4b1818;
    /* Texte blanc */
    color: white;
    /* Centre le texte horizontalement */
    text-align: center;
    /* Remplissage vertical de 25px pour agrandir les boutons */
    padding: 25px 0;
    /* Taille de police grande : 25px */
    font-size: 25px;
    /* Supprime le soulignement des liens */
    text-decoration: none;
    /* Coins arrondis : 8px */
    border-radius: 8px;
    /* Ombre légère pour effet 3D */
    box-shadow: 0 3px 8px rgba(0, 0, 0, 0.25);
    /* Transition douce de 0.3s pour les effets au survol */
    transition: all 0.3s ease;
  }

  /* Style des liens du menu mobile au survol */
  .nav-mobile ul li a:hover 
  {
    /* Fond bleu foncé au survol pour variation visuelle */
    background-color: #2a2d5e;
    /* Agrandit légèrement le lien au survol (3%) */
    transform: scale(1.03);
  }
}