/* Styles généraux pour le corps de la page */
body {
    margin: 0;
    font-family: 'Playfair Display', serif; /* Utilise la police Playfair Display pour un aspect élégant */
    background-image: url('white.jpg'); /* Image de fond pour la page */
    background-size: cover; /* Assure que l'image couvre toute la page */
    background-position: center; /* Centre l'image */
    background-attachment: fixed; /* Garde l'image fixe lorsque l'on fait défiler la page */
    color: #fff; /* Couleur du texte par défaut */
    text-align: center; /* Centre le texte */
}

/* Styles pour la barre de navigation */
.navbar {
    background-color: rgba(0, 0, 0, 0.7);
    color: #fff;
    padding: 10px 0; /* Réduit le padding pour les petits écrans */
    position: fixed;
    width: 100%;
    top: 0;
    left: 0;
    z-index: 1000;
}

.container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 10px; /* Réduit le padding pour les petits écrans */
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap; /* Permet à la barre de navigation de se réorganiser */
}

.logo {
    color: #fff;
    font-size: 20px; /* Réduit la taille de la police pour les petits écrans */
    text-decoration: none;
}

.logo img {
    width: 70px; /* Ajustez la taille selon vos besoins */
    height: auto; /* Conserve les proportions de l'image */
}

.nav-links {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap; /* Permet aux éléments de se réorganiser */
}

.nav-links li {
    margin-left: 10px; /* Réduit l'espace entre les éléments de la navigation */
}

.nav-links a {
    color: #fff;
    text-decoration: none;
    font-size: 12px; /* Réduit la taille de la police pour les petits écrans */
    transition: color 0.3s ease;
}

.nav-links a:hover {
    color: #ddd;
}

/* Styles pour la section principale (hero) */
.hero {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    height: calc(100vh - 50px); /* Ajuste la hauteur en fonction de la taille de la barre de navigation */
    padding: 20px;
    text-align: center;

}

.title {
    font-size: 28px; /* Réduit la taille de la police pour les petits écrans */
    font-weight: bold;
    margin: 0;
    color: #fff;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.7);
    padding: 10px; /* Réduit le padding pour les petits écrans */
    background: rgba(0, 0, 0, 0.5);
    border-radius: 8px; /* Réduit les coins arrondis pour les petits écrans */
}

.phone-number {
    font-size: 20px; /* Réduit la taille de la police pour les petits écrans */
    margin: 10px 0;
    font-weight: bold;
    color: #fff;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.7);
    padding: 10px; /* Réduit le padding pour les petits écrans */
    background: rgba(0, 0, 0, 0.5);
    border-radius: 8px; /* Réduit les coins arrondis pour les petits écrans */
}

.subtitle {
    font-size: 16px; /* Réduit la taille de la police pour les petits écrans */
    margin: 0;
    font-style: italic;
    color: #fff;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.7);
    padding: 10px; /* Réduit le padding pour les petits écrans */
    background: rgba(0, 0, 0, 0.5);
    border-radius: 8px; /* Réduit les coins arrondis pour les petits écrans */
}

/* Styles pour la section noire en bas de la page */
.section1 {
    background-color: #000;
    color: #fff;
    padding: 20px 10px; /* Réduit le padding pour les petits écrans */
    text-align: center;
    width: 100%;
}

.section1-text {
    font-size: 18px; /* Réduit la taille de la police pour les petits écrans */
    margin: 0;
}

/* Styles pour le conteneur de texte dans la section hero */
.text-container {
    margin: 0 20px; /* Réduit les marges pour les petits écrans */
    padding: 10px; /* Réduit le padding pour les petits écrans */
    box-sizing: border-box;
    background: rgba(0, 0, 0, 0.5);
    border-radius: 8px; /* Réduit les coins arrondis pour les petits écrans */
}

/* Ajustements pour les paragraphes à l'intérieur du conteneur */
.text-container .title,
.text-container .phone-number,
.text-container .subtitle {
   
    margin: 0 0 15px; /* Réduit la marge inférieure pour les petits écrans */
    padding: 10px; /* Réduit le padding pour les petits écrans */
    color: #fff;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.7);
    background: rgba(0, 0, 0, 0.5);
    border-radius: 8px; /* Réduit les coins arrondis pour les petits écrans */
}

/* Styles spécifiques pour le titre */
.text-container .title {
    font-size: 28px; /* Réduit la taille de la police pour les petits écrans */
    font-weight: bold;
}

/* Styles spécifiques pour le numéro de téléphone */
.text-container .phone-number {
    font-size: 22px; /* Réduit la taille de la police pour les petits écrans */
    font-weight: bold;
}

/* Styles spécifiques pour le sous-titre */
.text-container .subtitle {
    font-size: 18px; /* Réduit la taille de la police pour les petits écrans */
    font-style: italic;
}

/* Styles pour le menu déroulant */
.nav-links .dropdown {
    position: relative;
}

.nav-links .dropdown .dropdown-content {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    background-color: transparent;
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2);
    z-index: 1;
    width: 150px; /* Réduit la largeur pour les petits écrans */
}

.nav-links .dropdown:hover .dropdown-content {
    display: block;
}

.nav-links .dropdown-content li {
    list-style: none;
}

.nav-links .dropdown-content li a {
    display: block;
    padding: 8px 10px; /* Réduit le padding pour les petits écrans */
    text-decoration: none;
    color: #333;
    text-align: center;
}

.nav-links .dropdown-content li a:hover {
    background-color: rgba(0, 0, 0, 0.1);
}

/* Media Query pour les écrans de moins de 768px */
@media (max-width: 768px) {
    .navbar {
        padding: 10px 5px; /* Réduit le padding pour les écrans plus petits */
    }

    .container {
        padding: 0 10px; /* Ajuste le padding pour les petits écrans */
        flex-direction: column; /* Aligne les éléments en colonne */
    }

    .nav-links {
        flex-direction: column; /* Empile les éléments de navigation en colonne */
        padding: 0;
        margin-top: 10px; /* Ajoute un espace entre la barre de navigation et les éléments */
    }

    .nav-links li {
        margin-left: 0;
        margin-bottom: 10px; /* Ajoute un espace entre les éléments de navigation */
    }

    .hero {
        height: calc(300vh - 50px); /* Ajuste la hauteur pour les petits écrans */
        margin-bottom: -200px;
    }

    .title {
        font-size: 24px; /* Réduit la taille de la police pour les petits écrans */
    }

    .phone-number {
        font-size: 18px; /* Réduit la taille de la police pour les petits écrans */
    }

    .subtitle {
        font-size: 14px; /* Réduit la taille de la police pour les petits écrans */
    }
}

/* Media Query pour les écrans de moins de 480px */
@media (max-width: 480px) {
    .logo {
        font-size: 18px; /* Réduit encore plus la taille de la police pour les très petits écrans */
    }

    .title {
        font-size: 20px; /* Réduit encore plus la taille de la police pour les très petits écrans */
    }

    .phone-number {
        font-size: 16px; /* Réduit encore plus la taille de la police pour les très petits écrans */
    }

    .subtitle {
        font-size: 12px; /* Réduit encore plus la taille de la police pour les très petits écrans */
    }
}


/* Assurez-vous que vous avez déjà un fichier styles.css et qu'il est correctement lié */

.footer-image-container {
    text-align: center; /* Centre le contenu à l'intérieur du conteneur */
    margin-bottom: 10px; /* Espace entre l'image et le texte du footer */
}

.footer-image {
    max-width: 20%; /* Ajuste la taille de l'image à la largeur du conteneur */
    height: auto; /* Conserve les proportions de l'image */
    display: inline-block; /* Évite les espaces sous l'image */
}