/* Styles globaux pour la page Menu */

/*
  Règle pour masquer le bouton de fermeture qui apparaît en mode
  immersif sur mobile. Comme son sélecteur exact n'est pas connu,
  cette règle cible plusieurs possibilités communes (une classe comme .close,
  .close-button, ou un élément <button> directement dans l'overlay).
  L'utilisation de `!important` garantit que ce style a la priorité.
*/
#popup-loader-overlay > .close,
#popup-loader-overlay > .close-button,
#popup-loader-overlay > .popup-close,
#popup-loader-overlay > button {
    display: none !important;
    visibility: hidden !important; /* Sécurité supplémentaire pour le masquage */
}

body {
font-family: 'Trebuchet MS', 'Lucida Grande', 'Lucida Sans Unicode', 'Lucida Sans', 'Tahoma', 'sans-serif';
color: #333;
margin: 0;
padding: 1rem;
background-size: cover;
background-position: center center;
background-repeat: no-repeat;
background-attachment: fixed;
transition: background-position 0s;
height: auto;
}

h1 {
font-family: 'Trebuchet MS', 'Lucida Grande', 'Lucida Sans Unicode', 'Lucida Sans', 'Tahoma', 'sans-serif';
color: white;
font-size: 2.8rem;
font-weight: bold;
text-align: center;
margin: 0.5em 0 1em 0;
text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.7);
}

/* Règles ajoutées pour les colonnes fixes */

.boutons-colonne {
  width: 15%; /* ou une valeur adaptée à ton design */
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px !important; /* espacement entre les boutons */
}

.menu-bouton img {
  max-width: 100%;
  height: auto;
  display: block;
}
.images-colonne-gauche,
.images-colonne-droite {
  position: absolute;
  top: 200px; /* ajuste selon la hauteur du conteneur des boutons */
  width: 160px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px !important;
	padding: 1.5rem;
}

.images-colonne-gauche {
  left: 0;
}

.images-colonne-droite {
  right: 0;
}

.images-colonne-gauche img,
.images-colonne-droite img {
  max-width: 100%;
  height: auto;
  display: block;
}
/* --- Colonne de navigation fixe --- */
.navigation-colonne-fixe {
position: fixed;
left: 1rem;
top: 2rem;
z-index: 999; /* Moins élevé que le pop-up */
width: 160px;
background-color: rgba(255, 255, 255, 0.85);
backdrop-filter: blur(5px);
-webkit-backdrop-filter: blur(5px);
border: 1px solid rgba(0,0,0,0.1);
border-radius: 25px;
padding: 0.75rem;
display: flex;
flex-direction: column;
align-items: center;
gap: 0.5rem;
box-shadow: 0 4px 12px rgba(0,0,0,0.15);
}
.nav-text-buttons {
display: flex;
flex-direction: column;
gap: 0.5rem;
width: 100%;
}
.navigation-colonne-fixe a.nav-bouton,
.navigation-colonne-fixe button.nav-bouton {
font-family: 'Trebuchet MS', 'Lucida Grande', 'Lucida Sans Unicode', 'Lucida Sans', 'Tahoma', 'sans-serif';
font-size: 1rem;
font-weight: bold;
color: #5f2f00 !important;
background-color: #d5a456;
border: 1px solid #5f2f00;
border-radius: 20px;
padding: 0.75rem 1rem;
cursor: pointer;
text-decoration: none !important;
text-align: center;
transition: all 0.3s ease;
width: 100%;
box-sizing: border-box;
display: block;
line-height: 1.2;
}
.navigation-colonne-fixe a.nav-bouton:hover,
.navigation-colonne-fixe button.nav-bouton:hover {
background-color: #5f2f00;
color: #d5a456 !important;
transform: translateY(-2px);
box-shadow: 0 4px 8px rgba(0,0,0,0.15);
}
/* Conteneur principal pour la mise en page en 3 colonnes */
.page-container {
display: flex;
justify-content: space-between;
align-items: flex-start;
gap: 2rem;
max-width: 1400px;
margin: 0 auto;
margin-top: 5rem; /* Espace pour la colonne de navigation fixe */
}
/* Colonnes de boutons latérales */
.boutons-colonne {
width: 200px;
flex-shrink: 0;
display: flex;
flex-direction: column;
align-items: center;
gap: 1rem;
}
/* Contenu principal (menu central) */
.contenu-principal {
flex-grow: 1;
}
/* Styles pour les boutons d'images */
.menu-bouton {
background-color: transparent;
border: none;
cursor: pointer;
padding: 0;
transition: transform 0.3s ease;
width: 100%;
}
.menu-bouton img {
width: 100%;
height: auto;
display: block;
transition: transform 0.3s ease, filter 0.3s ease;
border-radius: 8px;
box-shadow: 0 2px 5px rgba(0,0,0,0.15);
}
.menu-bouton:hover img {
transform: scale(1.08);
filter: brightness(0.9) contrast(1.1);
}
/* --- Styles pour le menu interactif (style "boutons circulaires") --- */
.contenu-menu {
display: flex;
justify-content: center;
align-items: center;
}
.menu-circulaire {
display: flex;
flex-direction: column;
gap: 1.5rem;
width: 100%;
max-width: 450px;
align-items: center;
}
.item-menu {
position: relative; /* CORRECTION: Ajouté pour servir de contexte de positionnement */
background-color: rgba(213, 164, 86, 0.85);
border: 2px solid transparent;
border-radius: 50px;
padding: 1rem 1.5rem;
cursor: pointer;
text-align: center;
font-weight: bold;
color: #5f2f00;
transition: all 0.3s ease;
line-height: 1.3;
width: 100%;
max-width: 400px;
box-sizing: border-box;
box-shadow: 0 4px 6px rgba(0,0,0,0.1);
}
.item-menu:hover {
transform: translateY(-3px);
box-shadow: 0 6px 12px rgba(0,0,0,0.15);
border-color: #5f2f00;
}
.item-menu > a.lien {
color: inherit;
font-weight: inherit;
text-decoration: none;
display: block;
}
.item-menu.active {
background-color: #5f2f00;
color: #d5a456;
box-shadow: 0 2px 4px rgba(0,0,0,0.2);
transform: translateY(0);
z-index: 11; /* S'assure que le menu actif est au-dessus des autres items */
}

.sub-menu {
  display: none;
  position: absolute;
  top: calc(100% + 5px);
  left: 0;
  width: 100%;
  z-index: 10;
  list-style: none;
  padding: 0 !important;
  margin: 0 !important;
  background-color: #edbc5f;
  border-radius: 10px;
  overflow: auto;
  box-shadow: 0 8px 16px rgba(0,0,0,0.2);
  text-align: center; /* ✅ Centrage du texte */
}

.sub-sub-menu {
  display: none;
  list-style: none;
  padding: 0 !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
  margin-top: 0 !important;
  background-color: #f5e2b8; /* ✅ beige doré clair */
  border-radius: 0;
  overflow: auto;
  box-shadow: none;
  text-align: center; /* ✅ Centrage du texte */
  border-top: 1px solid #eee;
}

.sub-menu > ul {
  padding: 0 !important;
  margin: 0 !important;
  list-style: none;
}

.item-menu.active > .sub-menu {
  display: block;
}

.has-sub-sub.active > .sub-sub-menu {
  display: block;
  margin-top: 0.5rem !important; /* ✅ espace entre le titre et la première boîte */
}

.sub-menu li:not(.has-sub-sub),
.sub-sub-menu li {
  padding: 0 !important;
  text-align: center; /* ✅ Centrage du texte */
  width: 100%;
  box-sizing: border-box;
  margin: 0 !important;
}

.sub-menu li:last-child,
.sub-sub-menu li:last-child {
  border-bottom: none;
}

.sub-menu .lien,
.has-sub-sub {
  color: #64390c;
  text-decoration: none;
  font-weight: bold;
  display: block;
  padding: 0.8rem 1.5rem;
  transition: background-color 0.2s, color 0.2s;
  text-align: center; /* ✅ Centrage du texte */
}

.sub-menu .lien:hover {
  background-color: #f5f2ed;
  color: navy;
}

.has-sub-sub {
  cursor: pointer;
  position: relative;
}

.has-sub-sub:hover {
  background-color: #f5f2ed;
}

.has-sub-sub::after {
  content: '▶';
  position: absolute;
  right: 1rem;
  top: 50%;
  transform: translateY(-50%) rotate(0deg);
  font-size: 0.8em;
  transition: transform 0.3s ease;
  color: #5f2f00;
}

.has-sub-sub.active::after {
  transform: translateY(-50%) rotate(90deg);
}

.has-sub-sub.active {
  background-color: #edbc5f !important;
}

.sub-sub-menu .lien {
  display: block;
  font-weight: bold;
/*  padding: 0.8rem 1.5rem; */
  background-color: #f5e2b8; /* ✅ même fond pour les liens */
  color: #5f2f00; /* ✅ texte brun foncé conservé */
  text-align: center; /* ✅ Centrage du texte */
  width: 100%;
  box-sizing: border-box;
}

.sub-sub-menu .lien:hover {
  background-color: #f5f2ed;
}

/* Responsive */
@media (max-width: 768px) {
body {
padding: 0;
}
.page-container {
flex-direction: column;
align-items: center;
gap: 1rem;
padding: 0 1rem;
margin-top: 1rem;
}
.contenu-principal {
width: 100%;
box-sizing: border-box;
order: 1;
}
.boutons-colonne {
order: 2;
flex-direction: row;
flex-wrap: wrap;
justify-content: center;
width: 100%;
margin-top: 1rem;
}
.boutons-colonne .menu-bouton {
width: calc(50% - 1rem);
max-width: 150px;
}
}
/* Snippet à ajouter à la fin de menu.css */
/* --------------------------------------------------------------------------------- */
/* --- STYLES POUR LA POPUP (depuis popup-loader.css) --- */
#popup-loader-overlay {
position: fixed;
top: 0;
left: 0;
width: 100vw;
height: 100vh;
background-color: rgba(0, 0, 0, 0.85);
z-index: 1000;
display: none;
align-items: center;
justify-content: center;
backdrop-filter: blur(5px);
-webkit-backdrop-filter: blur(5px);
opacity: 0;
transition: opacity 0.3s ease;
}
#popup-loader-overlay.is-visible {
display: flex;
opacity: 1;
}
.popup-loader-content {
width: 95vw;
height: 95vh; /* Assurez-vous que cette valeur est la même que dans main.css */
background-color: #fff;
border-radius: 10px;
box-shadow: 0 10px 30px rgba(0,0,0,0.5);
overflow: hidden;
display: flex;
border: 8px solid #c9b79c;
box-sizing: border-box;
position: relative;
z-index: 1001;
}
.popup-loader-content > div,
.popup-loader-content iframe {
width: 100%;
height: 100%;
border: 0;
}
.popup-loader-close {
position: fixed;
top: 1rem;
right: 1.5rem;
width: 48px;
height: 48px;
background: white;
border: 2px solid #333;
border-radius: 50%;
cursor: pointer;
transition: all 0.3s ease;
z-index: 1002;
padding: 0;
display: flex;
align-items: center;
justify-content: center;
box-shadow: 0 2px 5px rgba(0,0,0,0.2);
}
.popup-loader-close svg {
width: 28px;
height: 28px;
fill: #333;
transition: fill 0.3s ease;
}
.popup-loader-close:hover {
transform: scale(1.1) rotate(90deg);
background-color: #d5a456;
border-color: #5f2f00;
}
.popup-loader-close:hover svg {
fill: #5f2f00;
}

/* --- CORRECTIF POUR LE FOND DE LA POPUP --- */
/*
  Ce snippet vise à forcer un fond blanc sur le conteneur de la popup et l'iframe elle-même.
  L'utilisation de `!important` permet de s'assurer que cette règle a la priorité.

  Si le fond noir est toujours visible après l'ajout de ce code,
  cela signifie qu'il est défini dans la page chargée à l'intérieur de l'iframe.
  Dans ce cas, il faudra modifier le CSS de cette page interne pour résoudre le problème.
*/
.popup-loader-content,
.popup-loader-content iframe {
  background-color: #ffffff !important;
}
/* --------------------------------------------------------------------------------- */
#orientation-warning {
  display: none;
}
/* ------------------------------------------------------------ */
/* 📱 Smartphone portrait : afficher le message d'avertissement */
@media screen and (max-width: 768px) and (orientation: portrait) {
  
#orientation-warning {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  z-index: 9999;
  display: flex !important;
  justify-content: center;
  align-items: center;
  padding: 2rem;
  box-sizing: border-box;
}

#orientation-warning .message {
  background-color: rgba(255, 255, 255, 0.85);
  color: #5f2f00;
  font-size: 1.4rem;
  font-weight: bold;
  text-align: center;
  padding: 2rem;
  border-radius: 20px;
  box-shadow: 0 0 20px rgba(0,0,0,0.3);
  max-width: 600px;
  width: 90%;
}

  /* Masquer le reste du contenu */
  #menu-wrapper,
  .contenu-principal,
  .boutons-colonne,
  .images-colonne-gauche,
  .images-colonne-droite,
  .navigation-colonne-fixe {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    pointer-events: none !important;
  }

  html, body {
    overflow: auto;
    height: auto ;

  }
}

@media screen and (max-width: 768px) and (orientation: landscape) {
  #orientation-warning {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background: transparent !important;
    color: transparent !important;
    z-index: -1 !important;
    pointer-events: none !important;
    opacity: 0 !important;
  }

  #orientation-warning .message {
    display: none !important;
  }

  #menu-wrapper {
    position: relative;
    max-width: 100vw;
    max-height: 100vh;
  }

  html, body {
    overflow: auto!important;
    height: auto !important;
  }

  .menu-circulaire {
    width: 100%;
    max-width: 90vw;
  }

  .item-menu {
    width: 90%;
    max-width: none;
  }
}