/*
portal.css
Ce fichier contient les styles pour rendre la page d'accueil du portail ("tile-area") responsive.
*/
/* --- STYLE GÉNÉRAL ET TITRE PRINCIPAL --- */
.main-title {
width: 100%;
text-align: center;
font-size: 2em;
color: white;
margin-top: 20px;
margin-bottom: 20px; /* Réduction de l'espace */
}
/* Réinitialisation de la zone des tuiles pour une gestion flexible */
.tile-area {
/* display: flex;
flex-wrap: wrap;
justify-content: center; /* Centre les groupes sur la page */
/* align-items: flex-start;
gap: 20px; /* Espace entre les groupes */
padding: 20px;
box-sizing: border-box;
}
/* Style de base pour les groupes de tuiles */
.tile-group {
/* display: flex;
flex-direction: column; */
position: relative !important;
margin: 15px;
/* flex-shrink: 0; /* Empêche les groupes de se réduire */
}
/* Rétablir le positionnement normal du titre de groupe pour éviter la superposition */
.tile-group > .tile-group-title {
position: static !important;
/* order: -1; /* Place le titre avant les tuiles dans le flux flex */
margin-bottom: 20px;
text-align: left;
transform: none !important;
top: auto !important;
left: auto !important;
width: auto !important;
}
/* Adaptation pour les écrans de taille moyenne (tablettes) */
@media screen and (max-width: 1024px) {
.tile-area {
justify-content: center;
}
}
/* Adaptation pour les petits écrans (smartphones en mode PORTRAIT) */
@media screen and (max-width: 768px) and (orientation: portrait) {
.main-title {
font-size: 1.5em; /* Taille de titre plus adaptée au mobile */
}

.tile-area {
    flex-direction: column;
    align-items: center; /* Centre les colonnes */
    flex-wrap: nowrap;
    padding: 10px;
    overflow-y: auto; /* Permet le défilement vertical si nécessaire */
}

.tile-group {
    width: 100%;
    max-width: 450px; /* Évite que les tuiles soient trop larges */
    margin: 10px 0;
}

/* Masque les contrôles de défilement qui ne sont plus utiles */
.tile-area-controls {
    display: none;
}
}
/* --- STYLES POUR L'AVERTISSEMENT D'ORIENTATION --- */
#orientation-warning {
display: none; /* Caché par défaut */
position: fixed;
top: 0;
left: 0;
width: 100vw;
height: 100vh;
background-color: #F0F0F0;
z-index: 9999;
justify-content: center;
align-items: center;
padding: 2rem;
box-sizing: border-box;
}
#orientation-warning .message {
color: #333;
font-size: 1.4rem;
font-weight: bold;
text-align: center;
padding: 2rem;
border-radius: 20px;
max-width: 600px;
width: 90%;
}
/* 📱 Smartphone en mode portrait : afficher l'avertissement */
@media screen and (max-width: 768px) and (orientation: portrait) {
#orientation-warning {
display: flex !important;
}
/* Masquer le reste du contenu */
.tile-area, .main-title {
display: none !important;
}
}
/* --- ECRAN D'ACCUEIL POUR MODE IMMERSIF --- */
#immersive-entry-overlay {
display: none; /* Caché par défaut */
position: fixed;
top: 0;
left: 0;
width: 100vw;
height: 100vh;
background-color: rgba(0, 0, 0, 0.8);
z-index: 10000;
justify-content: center;
align-items: center;
}
#enter-immersive-btn {
padding: 20px 40px;
font-size: 1.5rem;
color: white;
background-color: #0078D7;
border: 2px solid white;
border-radius: 8px;
cursor: pointer;
}
/* 📱 Smartphone en mode paysage : Défilement 2D et entrée immersive */
@media screen and (max-height: 500px) and (orientation: landscape) and (hover: none) and (pointer: coarse) {
/* Afficher l'écran d'accueil pour le mode immersif UNIQUEMENT si l'utilisateur n'est pas encore entré */
body:not(.portal-active) #immersive-entry-overlay {
display: flex;
}

html, body {
    overflow: auto !important; /* Active le défilement 2D sur le corps de la page */
    -webkit-overflow-scrolling: touch; /* Défilement fluide sur iOS */
}
.tile-area {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    align-items: flex-start !important;
    justify-content: flex-start !important;
    width: max-content !important; /* Permet au conteneur de s'étirer à la largeur de son contenu */
    height: auto !important;
    padding-bottom: 50px; /* Espace en bas pour le défilement */
}
}

/* --- STYLES POUR LA VUE IMMERSIVE --- */
#popup-loader-overlay {
    display: none;
    opacity: 0;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: #FFF;
    z-index: 999999;
    transition: opacity 0.3s ease;
}

#popup-loader-overlay .popup-loader-content {
    width: 100%;
    height: 100%;
    padding: 0;
    margin: 0;
    border: none;
    max-width: none;
}

/* Correction : Verrouille le défilement lorsque la vue immersive est active */
html.immersive-active,
html.immersive-active body {
    overflow: hidden !important;
}