* {    /* Sélectionne tous les éléments de la page */
    margin: 0;    /* Supprime toutes les marges externes */
    padding: 0;   /* Supprime toutes les marges internes */
    box-sizing: border-box;    /* Inclut les bordures et le padding dans la largeur totale */
}

body {    /* Style du corps de la page */
    font-family: 'Arial', sans-serif;    /* Utilise la police Arial, ou une police sans-serif si Arial n'est pas disponible */
    color: white;    /* Définit la couleur du texte en blanc */
    overflow: hidden;    /* Cache tout contenu qui dépasse de la fenêtre */
    background: #000;    /* Définit l'arrière-plan en noir */
}

.background-video {    /* Style du conteneur de la vidéo de fond */
    position: fixed;    /* Fixe la position par rapport à la fenêtre */
    top: 0;    /* Colle en haut */
    left: 0;    /* Colle à gauche */
    width: 100%;    /* Occupe toute la largeur */
    height: 100%;    /* Occupe toute la hauteur */
    z-index: -1;    /* Place la vidéo derrière tous les autres éléments */
}

.background-video video {    /* Style de la vidéo elle-même */
    width: 100%;    /* Occupe toute la largeur du conteneur */
    height: 100%;    /* Occupe toute la hauteur du conteneur */
    object-fit: cover;    /* Redimensionne la vidéo pour couvrir tout l'espace */
}

header {    /* Style de l'en-tête */
    padding: 2rem;    /* Ajoute une marge interne de 2rem */
    display: flex;    /* Utilise le modèle flexbox */
    justify-content: flex-end;    /* Aligne le contenu à droite */
    position: relative;    /* Position relative pour le positionnement des enfants */
}

.header-right {    /* Style du conteneur droit de l'en-tête */
    display: flex;    /* Utilise le modèle flexbox */
    flex-direction: column;    /* Empile les éléments verticalement */
    align-items: flex-end;    /* Aligne les éléments à droite */
    gap: 1rem;    /* Espace de 1rem entre les éléments */
}

.slogan {    /* Style du slogan */
    text-align: right;    /* Aligne le texte à droite */
    font-size: 1.3rem;    /* Taille de police à 1.3rem */
    max-width: 600px;    /* Largeur maximale de 600px */
    line-height: 1.5;    /* Hauteur de ligne à 1.5 fois la taille du texte */
    margin-bottom: 2rem;    /* Marge inférieure de 2rem */
    color: #000;    /* Couleur du texte en noir */
    font-weight: 700;    /* Épaisseur de police en gras */
    letter-spacing: 0.7px;    /* Espacement entre les lettres de 0.7px */
    text-shadow:     /* Ombre du texte pour un effet de relief */
        -1px -1px 0 rgba(255, 255, 255, 0.7),    /* Ombre en haut à gauche */
        1px -1px 0 rgba(255, 255, 255, 0.7),     /* Ombre en haut à droite */
        -1px 1px 0 rgba(255, 255, 255, 0.7),     /* Ombre en bas à gauche */
        1px 1px 0 rgba(255, 255, 255, 0.7);      /* Ombre en bas à droite */
}

@keyframes goldShine {    /* Animation pour l'effet de brillance dorée */
    0%, 100% {    /* État initial et final de l'animation */
        filter: drop-shadow(0 0 8px rgba(255, 215, 0, 0.8));    /* Ombre portée dorée légère */
    }
    50% {    /* État à mi-parcours de l'animation */
        filter: drop-shadow(0 0 15px rgba(255, 215, 0, 0.9));    /* Ombre portée dorée plus intense */
    }
}

.supervised {    /* Style du texte "supervisé par un humain" */
    font-size: 0.8em;    /* Taille de police à 80% du parent */
    color: #000;    /* Couleur du texte en noir */
    font-weight: 600;    /* Épaisseur de police semi-gras */
    text-shadow:     /* Ombre du texte pour un effet de relief */
        -0.5px -0.5px 0 rgba(255, 255, 255, 0.7),    /* Ombre en haut à gauche plus fine */
        0.5px -0.5px 0 rgba(255, 255, 255, 0.7),     /* Ombre en haut à droite plus fine */
        -0.5px 0.5px 0 rgba(255, 255, 255, 0.7),     /* Ombre en bas à gauche plus fine */
        0.5px 0.5px 0 rgba(255, 255, 255, 0.7);      /* Ombre en bas à droite plus fine */
}

.nav-buttons {    /* Style du conteneur des boutons de navigation */
    display: flex;    /* Utilise le modèle flexbox */
    flex-direction: column;    /* Empile les éléments verticalement */
    gap: 1rem;    /* Espace de 1rem entre les boutons */
    align-items: flex-end;    /* Aligne les boutons à droite */
}

.nav-item {
    display: flex;
    align-items: center;
    gap: 1rem;
    position: relative;
}

.logo-description {
    position: absolute;
    right: 120px;
    color: black;
    font-weight: 500;
    opacity: 0;
    transition: opacity 0.3s ease;
    padding: 0.5rem 1rem;
    white-space: nowrap;
    text-shadow:
        -1px -1px 0 rgba(255, 255, 255, 0.7),
        1px -1px 0 rgba(255, 255, 255, 0.7),
        -1px 1px 0 rgba(255, 255, 255, 0.7),
        1px 1px 0 rgba(255, 255, 255, 0.7);
}

.nav-button {    /* Style des boutons de navigation */
    width: 100px;    /* Largeur fixe de 100px */
    height: 100px;    /* Hauteur fixe de 100px */
    cursor: pointer;    /* Change le curseur en pointeur au survol */
    transition: transform 0.3s ease;    /* Animation douce pour la transformation */
    position: relative;
}

.nav-button:hover {    /* Style des boutons au survol */
    transform: scale(1.1);    /* Agrandit le bouton de 10% au survol */
}

.nav-button.framed {
    border: 2px solid;
    border-image: linear-gradient(
        45deg,
        #ffd700 0%,
        #4a90e2 25%,
        #ffd700 50%,
        #4a90e2 75%,
        #ffd700 100%
    ) 1;
    border-radius: 2px;
    animation: frameBorderShine 4s linear infinite;
}

.nav-item:hover .logo-description {
    opacity: 1;
}

.quotes-frame {    /* Style du cadre des citations */
    position: absolute;    /* Position absolue par rapport au parent */
    top: 100px;    /* Distance de 100px du haut */
    left: 2rem;    /* Distance de 2rem de la gauche */
    width: 400px;    /* Largeur fixe de 400px */
    height: 150px;    /* Hauteur fixe de 150px */
    padding: 1.5rem;    /* Marge interne de 1.5rem */
    background: transparent;    /* Fond transparent */
    border: 2px solid;    /* Bordure solide de 2px */
    border-image: linear-gradient(    /* Dégradé pour la bordure */
        45deg,
        #ffd700 0%,    /* Or */
        #4a90e2 25%,   /* Bleu */
        #ffd700 50%,   /* Or */
        #4a90e2 75%,   /* Bleu */
        #ffd700 100%   /* Or */
    ) 1;
    border-radius: 2px;    /* Coins légèrement arrondis */
    overflow: hidden;    /* Cache le contenu qui dépasse */
    animation: frameBorderShine 4s linear infinite;    /* Animation du dégradé de la bordure */
}

@keyframes frameBorderShine {    /* Animation pour la bordure brillante du cadre des citations */
    0% {    /* État initial de l'animation */
        border-image: linear-gradient(    /* Dégradé orienté à 45 degrés */
            45deg,
            #ffd700 0%,    /* Commence par de l'or */
            #4a90e2 25%,   /* Passe au bleu */
            #ffd700 50%,   /* Revient à l'or */
            #4a90e2 75%,   /* Repasse au bleu */
            #ffd700 100%   /* Termine par de l'or */
        ) 1;
    }
    50% {    /* État à mi-parcours de l'animation */
        border-image: linear-gradient(    /* Dégradé orienté à 225 degrés */
            225deg,    /* Change l'orientation du dégradé */
            #ffd700 0%,
            #4a90e2 25%,
            #ffd700 50%,
            #4a90e2 75%,
            #ffd700 100%
        ) 1;
    }
    100% {    /* État final de l'animation */
        border-image: linear-gradient(    /* Dégradé orienté à 405 degrés */
            405deg,    /* Fait un tour complet plus 45 degrés */
            #ffd700 0%,
            #4a90e2 25%,
            #ffd700 50%,
            #4a90e2 75%,
            #ffd700 100%
        ) 1;
    }
}

.quotes-container {    /* Style du conteneur des citations */
    height: 100%;    /* Occupe toute la hauteur */
    display: flex;    /* Utilise le modèle flexbox */
    align-items: center;    /* Centre verticalement */
    justify-content: center;    /* Centre horizontalement */
    text-align: center;    /* Centre le texte */
    font-size: 1.1rem;    /* Taille de police à 1.1rem */
    line-height: 1.4;    /* Hauteur de ligne à 1.4 fois la taille du texte */
    transition: opacity 0.5s ease;    /* Animation douce pour l'opacité */
    color: black;    /* Couleur du texte en noir */
    font-weight: 500;    /* Épaisseur de police moyenne */
}

.sound-button {    /* Style du bouton son */
    position: fixed;    /* Position fixe par rapport à la fenêtre */
    bottom: 20px;    /* Distance de 20px du bas */
    left: 20px;    /* Distance de 20px de la gauche */
    background: rgba(0, 0, 0, 0.7);    /* Fond noir semi-transparent */
    border: 2px solid rgba(0, 0, 0, 0.8);    /* Bordure noire semi-transparente */
    border-radius: 50%;    /* Forme circulaire */
    width: 40px;    /* Largeur fixe de 40px */
    height: 40px;    /* Hauteur fixe de 40px */
    color: black;    /* Couleur du texte en noir */
    cursor: pointer;    /* Change le curseur en pointeur au survol */
    display: flex;    /* Utilise le modèle flexbox */
    align-items: center;    /* Centre verticalement */
    justify-content: center;    /* Centre horizontalement */
    transition: all 0.3s ease;    /* Animation douce pour tous les changements */
    z-index: 100;    /* Place au-dessus des autres éléments */
}

.sound-button:hover {    /* Style du bouton son au survol */
    background: rgba(0, 0, 0, 0.9);    /* Fond noir plus opaque */
    border-color: rgba(0, 0, 0, 1);    /* Bordure noire complètement opaque */
}

.sound-button.muted .sound-icon {    /* Style de l'icône son quand le son est coupé */
    opacity: 0.7;    /* Réduit l'opacité à 70% */
}

/* Styles du copyright */
/* Styles du pied de page */
#footer-info {
    position: fixed;
    bottom: 10px;
    right: 20px;
    text-align: right;
    z-index: 1000;
}

#legal-links {
    margin-bottom: 5px; /* Espace entre le lien et le copyright */
}

#legal-links a {
    color: black;
    font-size: 0.9rem;
    text-decoration: none; /* Pas de soulignement par défaut */
    font-weight: 500;
}

#legal-links a:hover {
    text-decoration: underline; /* Soulignement au survol */
}

#copyright-text {    /* Style du texte de copyright */
    color: black;    /* Couleur du texte en noir */
    font-size: 0.8rem;    /* Taille de police à 0.8rem */
    font-weight: 400;    /* Épaisseur de police normale */
    white-space: nowrap;    /* Empêche le retour à la ligne */
}
/* --- Floating Contact Buttons --- */
.floating-contact {
    position: fixed;
    bottom: 20px; /* Positioned above the sound button (20px + 40px + 10px) */
    left: 70px;  /* Adjust margin from left */
    z-index: 1000; /* Ensure it's above other elements */
}

.whatsapp-button {
    position: relative; /* Needed for tooltip positioning */
    display: flex;
    align-items: center;
    background-color: #25D366; /* Standard WhatsApp green */
    color: white;
    padding: 8px 15px;
    border-radius: 25px; /* Rounded corners */
    text-decoration: none;
    font-weight: bold;
    font-size: 0.9rem;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
    transition: transform 0.2s ease, box-shadow 0.2s ease; /* Smooth transition for hover */
}

.whatsapp-button svg {
    margin-right: 8px; /* Space between icon and text */
}

.whatsapp-button:hover {
    transform: scale(1.05); /* Slightly enlarge on hover */
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3); /* Enhance shadow on hover */
}

/* Tooltip for WhatsApp button */
.whatsapp-button .tooltip {
    visibility: hidden;
    opacity: 0;
    width: 300px;
    background-color: #333;
    color: #fff;
    text-align: left;
    border-radius: 6px;
    padding: 10px 12px;
    position: absolute;
    z-index: 1;
    bottom: 125%;
    left: 50%;
    transform: translateX(20px); /* Déplacement horizontal de 20px */
    white-space: pre-wrap;
    font-size: 0.85rem;
    font-weight: normal;
    box-shadow: 0 2px 8px rgba(0,0,0,0.5);
    pointer-events: none;
    transition: opacity 0.3s ease;
}

/* Show tooltip on hover */
.whatsapp-button:hover .tooltip {
    visibility: visible;
    opacity: 1;
}

/* --- Responsive Adjustments --- */
@media (max-width: 480px) {
    .floating-contact {
        bottom: 65px; /* Adjusted for smaller screens */
        left: 15px;
    }

    .whatsapp-button {
        position: relative; /* Ensure positioning context */
        padding: 6px 12px;
        font-size: 0.8rem;
    }

    .whatsapp-button svg {
        width: 20px;
        height: 20px;
    }

    .whatsapp-button .tooltip {
        width: 250px; /* Adjust tooltip width for smaller screens */
        margin-left: -125px;
        font-size: 0.8rem;
        bottom: 130%; /* Adjust position slightly if needed */
    }
}