/* Styles généraux pour le corps de la page */
body {
    margin: 0;
    overflow-x: hidden; /* Empêche le défilement horizontal */
    display: flex; /* Utilise flexbox pour le centrage */
    justify-content: center; /* Centre horizontalement */
    align-items: center; /* Centre verticalement */
    min-height: 100vh; /* S'assure que le corps prend au moins toute la hauteur de la vue */
    background-color: #333; /* Couleur de fond sombre */
    font-family: 'Inter', sans-serif; /* Police par défaut du corps */
    position: relative; /* Nécessaire pour positionner les éléments enfants fixes/absolus */
    overflow-y: hidden; /* Cache le défilement vertical initial */
}

/* Conteneur de l'animation ADMB */
.animation-container {
    position: fixed; /* Reste en place sur la fenêtre */
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: #333; /* Fond de l'animation */
    display: flex;
    flex-direction: column; /* Place les éléments en colonne */
    justify-content: center; /* Centre verticalement les éléments */
    align-items: center; /* Centre horizontalement les éléments */
    z-index: 999; /* Assure qu'il est au-dessus des autres éléments */
    opacity: 1; /* Visible par défaut */
    transition: opacity 1s ease-out; /* Transition pour la disparition */
}

/* Classe ajoutée par JS pour masquer le conteneur d'animation */
.animation-container.hidden {
    opacity: 0;
    pointer-events: none; /* Empêche toute interaction une fois masqué */
}

/* Texte ADMB animé */
.admd-text { /* CORRECTION : Utilisé 'admd-text' pour correspondre au HTML et JS */
    color: white;
    font-family: 'Outfit', sans-serif; /* Utilise la police "Outfit" pour le titre */
    font-size: 7em;
    font-weight: bold;
    text-shadow: 4px 4px 8px rgba(0, 0, 0, 0.5);
    opacity: 0; /* Commence invisible */
    animation: fadeInScale 2s forwards, fadeOutUp 1s 2.5s forwards;
}

/* Trait sous le texte ADMD */
.admd-underline {
    width: 0; /* Commence comme un point */
    height: 6px; /* Épaisseur du trait */
    background-color: white; /* Couleur du trait */
    position: absolute; /* Positionné par rapport au conteneur d'animation */
    bottom: calc(50% - 4.5em); /* Ajustez cette valeur pour le placer sous le texte ADMD */
                                /* 50% du conteneur - (moitié de la taille de font ADMD + marge + moitié de la hauteur du trait) */
                                /* J'ai ajusté à 4.5em qui devrait être un bon point de départ pour une taille de 7em */
    left: 50%; /* Commence au milieu */
    transform: translateX(-50%); /* Ajuste pour centrer le point de départ */
    opacity: 0; /* Commence invisible */
    animation: expandUnderline 2s 0.0s forwards, fadeOutUnderline 1s 2.5s forwards;
}

/* Animations clés pour le texte ADMD et le trait */
@keyframes fadeInScale {
    0% { opacity: 0; transform: scale(0.5); }
    100% { opacity: 1; transform: scale(1); }
}

@keyframes fadeOutUp {
    0% { opacity: 1; transform: translateY(0); }
    100% { opacity: 0; transform: translateY(-50px); }
}

@keyframes expandUnderline {
    0% {
        width: 0;
        opacity: 0;
        transform: translateX(-50%) scaleX(0);
    }
    1% {
        opacity: 1;
    }
    100% {
        width: 300px; /* Largeur finale du trait */
        opacity: 1;
        transform: translateX(-50%) scaleX(1);
    }
}

@keyframes fadeOutUnderline {
    0% { opacity: 1; }
    100% { opacity: 0; }
}

/* Conteneur des choix d'émojis (Boissons / Nourriture) */
.emoji-choices {
    position: fixed; /* Reste au même endroit sur la fenêtre */
    top: 50%; /* Centre verticalement par rapport à la vue */
    left: 50%; /* Centre horizontalement par rapport à la vue */
    transform: translate(-50%, 100px); /* Position de départ : un peu en dessous du centre */
    display: flex;
    gap: 50px; /* Espace entre les émojis */
    z-index: 998; /* Juste en dessous du conteneur d'animation */
    opacity: 0; /* Invisible par défaut */
    transition: opacity 0.8s ease-out, transform 0.8s ease-out; /* Transition pour l'apparition */
    pointer-events: none; /* Empêche les clics avant que le JS ne les rende visibles */
}

/* Classe ajoutée par JS pour rendre les émojis visibles */
.emoji-choices.visible {
    opacity: 1;
    transform: translate(-50%, -50%); /* Position finale : centré */
}

/* Style des liens d'émojis individuels */
.emoji-link {
    text-decoration: none;
    font-size: 5em; /* Taille de base pour les émojis si texte */
    display: flex;
    color: white;
    cursor: pointer;
    transition: transform 0.3s ease-in-out;
    flex-direction: column; /* Empile l'image et le label */
    align-items: center; /* Centre l'image et le label */
    gap: 10px; /* Ajustement : Espace entre l'image et le label */
}

.emoji-link:hover {
    transform: scale(1.1); /* Agrandissement au survol */
}

/* Style des images d'émojis */
.emoji-link img {
    width: 100px; /* Largeur de l'image */
    height: 100px; /* Hauteur de l'image */
    display: block;
    transition: transform 0.2s ease-out;
    animation: pulse 1.5s infinite alternate ease-in-out; /* Animation de pulsation */
}

.emoji-link img:hover {
    transform: scale(1.15); /* Agrandissement plus prononcé au survol de l'image */
}

/* Texte sous les émojis (Boissons, Nourriture) */
.emoji-label {
    color: white;
    font-family: 'Inter', sans-serif; /* Utilise Inter ou Outfit si vous préférez un titre */
    font-size: 0.35em; /* Ajustement : Taille de police plus lisible */
    font-weight: 600; /* Plus de gras pour la lisibilité */
    margin: 0;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
}

/* Animation de pulsation continue pour les images d'émojis */
@keyframes pulse {
    0% { transform: scale(1); }
    100% { transform: scale(1.05); } /* Ajustement : Légèrement plus petit pour une pulsation plus subtile */
}

/* Pop-up "PUB" */
.admd-popup {
    position: fixed;
    top: -100px; /* Invisible, au-dessus de l'écran */
    left: 50%;
    transform: translateX(-50%);
    background-color: #ffcc00;
    color: #333;
     
    /* MODIFICATIONS POUR PRENDRE LA LARGEUR DE L'ÉCRAN */
    width: 100%; /* Le pop-up prendra toute la largeur de l'écran */
    padding: 25px 20px; /* Conserve le padding vertical, mais réduit le padding horizontal pour que le texte soit un peu plus proche des bords de l'écran */
    box-sizing: border-box; /* S'assure que le padding est inclus dans la largeur de 100% */

    display: flex;           /* Active Flexbox sur le conteneur */
    flex-direction: column;  /* Arrange les éléments enfants en colonne (le texte, si c'est un <p>) */
    justify-content: center; /* Centre les éléments enfants sur l'axe principal (vertical si flex-direction: column) */
    align-items: center;     /* Centre les éléments enfants sur l'axe secondaire (horizontal si flex-direction: column) */
    text-align: center;      /* Important pour le texte lui-même s'il fait plusieurs lignes et doit être centré */

    padding: 10px 10px; /* Gap entre bord du popup et l'écriture */
    border-radius: 0 0 15px 15px;
    font-family: 'Outfit', sans-serif;
    font-size: 1em; /*Changer police en fonction de la phrase*/
    font-weight: 700;
    text-transform: uppercase;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3);
    z-index: 1000; /* Au-dessus de tout */
    opacity: 0; /* Invisible par défaut */
    transition: all 0.5s ease-out; /* Animation d'apparition */
}

/* Classe ajoutée par JS pour faire apparaître le pop-up */
.admd-popup.show {
    top: 0; /* Descend à la position visible */
    opacity: 1; /* Devient visible */
}

/* Styles pour le pied de page */
.site-footer {
    position: absolute; /* Ou 'fixed' si vous voulez qu'il reste en bas de la fenêtre */
    bottom: 10px; /* À 10px du bas */
    left: 50%;
    transform: translateX(-50%);
    width: 100%; /* S'étend sur toute la largeur */
    text-align: center;
    color: rgba(255, 255, 255, 0.4); /* Couleur très claire, presque transparente */
    font-size: 0.75em; /* Taille de police très petite */
    font-family: 'Inter', sans-serif;
    padding: 5px 0;
    z-index: 50; /* Moins important que les éléments principaux */
}

/* Optionnel : pour les écrans plus petits */
@media (max-width: 768px) {
    .site-footer {
        font-size: 0.65em;
    }
}

/* Contenu par défaut (Bienvenue sur mon site !) */
.content {
    /* Cache le contenu par défaut initialement */
    display: none;
    text-align: center;
    padding: 20px;
    width: 100%;
    box-sizing: border-box;
    /* Important : si le body est en flex, le contenu doit aussi prendre de la place */
    /* ou la gestion du overflow-y doit être dynamique via JS */
    color: #f0f0f0; /* Couleur du texte du contenu */
    font-size: 1.2em; /* Taille du texte du contenu */
    line-height: 1.6;
    max-width: 600px; /* Limite la largeur du texte pour la lisibilité */
    margin-top: 200px; /* Pour qu'il ne se superpose pas aux émojis immédiatement */
    position: absolute; /* Place le contenu en position absolue par rapport au body */
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%); /* Centre le contenu */
}

/* Classe ajoutée par JS pour rendre le contenu visible et permettre le défilement */
.content.visible {
    display: block;
    /* Le défilement du body est géré par JS quand le content.visible est ajouté */
}