/* --- Styles de base et Reset --- */
body {
    font-family: Arial, sans-serif; /* Police par défaut pour la lisibilité */
    margin: 0;
    padding: 0;
    display: flex; /* Utilisation de flex pour centrer tout le contenu */
    flex-direction: column;
    align-items: center;
    justify-content: flex-start; /* Commence en haut de l'écran */
    min-height: 100vh; /* S'assure que le corps prend toute la hauteur de la fenêtre */
    background-color: #ffffff; /* Fond blanc */
    color: #333;
}

/* Bande supérieure marron foncé */
.header-band {
    width: 100%;
    height: 40px; /* Ajustez la hauteur si nécessaire */
    background-color: #401B15; /* Marron foncé proche de celui du visuel */
}

/* Conteneur principal */
.coming-soon-container {
    width: 90%; /* Limite la largeur pour les grands écrans */
    max-width: 1000px;
    margin-top: 50px; /* Espace sous la bande marron */
    text-align: center;
}

/* --- Galerie d'images circulaires --- */
.image-gallery {
    display: flex;
    justify-content: space-around; /* Espace les images */
    gap: 15px; /* Espace entre les images */
    margin-bottom: 30px;
    padding: 0 5%; /* Légère marge pour éviter le contact avec les bords sur mobile */
}

.circle-image {
    width: 20%; /* Chaque image prend 1/4 de l'espace disponible */
    max-width: 180px; /* Limite la taille des cercles sur très grand écran */
    height: auto;
    aspect-ratio: 1 / 1; /* Force l'image à être carrée */
    object-fit: cover; /* Assure que l'image couvre le cercle sans déformation */
    border-radius: 50%; /* Rendre l'image circulaire */
}

/* --- Logo et Titre --- */
.logo-section {
    margin: 40px 0; /* Espace au-dessus et en dessous du logo */
}

.main-logo {
    width : 500px;
    max-width: 65%; /* Rend le logo responsive */
    height: auto;
    /* Si le logo a été combiné en une seule image comme dans le visuel */
}

/* --- Séparateur --- */
.separator {
    width: 440px; /* Largeur du séparateur */
    max-width: 70%; 
    height: 5px;
    background-color: #7C171F; /* Couleur du marron foncé */
    margin: 30px auto; /* Centrer le séparateur */
}

/* --- Message en construction --- */
.message-section p {
    font-size: 1em;
    font-weight: 600;
    color: #000000;
    margin-bottom: 80px;
}

/* --- Media Query pour la réactivité (Mobile) --- */
@media (max-width: 768px) {
    
    .header-band {
        height: 40px;
    }
    
    /* Pour la galerie d'images sur petits écrans */
    .image-gallery {
        flex-wrap: wrap; /* Permet aux images de passer à la ligne */
        justify-content: center; /* Centre les images */
    }

    .circle-image {
        width: 40%; /* Deux images par ligne sur mobile */
        margin-bottom: 20px;
        max-width: 150px;
    }
    
    .main-logo {
        max-width: 90%; /* Le logo prend plus de place sur mobile */
    }
    
    .separator {
        width: 80%;
    }
    
    .message-section p {
        font-size: 1em;
    }
}