@import url('https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100..900;1,100..900&display=swap');
/* Reset */


body, ul {

    box-sizing: border-box;
}
body {
    line-height: 1.6;
    background-image: url('../images/tache.svg'); /* Image de la tâche */
    background-position: -100px -150px; /* Décale l'image à gauche et vers le haut */
    background-repeat: no-repeat; /* Pas de répétition */
    width: 100%;    
    margin: 0;
    padding: 0;
    overflow-x: hidden; /* Évite le débordement horizontal */
}
/* Par défaut, le sous-menu est caché */
.nav .dropdown-menu {
    display: none;
    position: absolute; /* Assure que le menu ne perturbe pas les autres éléments */
    background-color: #ffffff; /* Couleur de fond du sous-menu */
    padding: 10px 0;
    border-radius: 5px;
    z-index: 1000;
}

/* Affiche le sous-menu au survol de l'élément parent */
.nav .dropdown:hover .dropdown-menu {
    display: block;
}

/* Style des liens du sous-menu */
.nav .dropdown-menu .dropdown-item {
    color: #000;
    padding: 10px 20px;
    text-decoration: none;
    transition: background-color 0.3s ease;
}

.nav .dropdown-menu .dropdown-item:hover {
    background-color: #454545; /* Couleur au survol */
    color: white;
}

/* Assure que le sous-menu ne perturbe pas le flow */
.nav .dropdown {
    position: relative;
}

/* Header */
.header {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 10px 0;
    position: relative;
    z-index: 1000;
    background-color: transparent; /* Transparent par défaut */
    transition: all 0.3s ease-in-out;

}
.collapsed {
    visibility:  collapse;
}
/* Sticky menu */
.sticky {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 60px; /* Limite la hauteur à 40px */
    background-color: white; /* Fond blanc lors du scroll */
    box-shadow: 0px 2px 5px rgba(0, 0, 0, 0.1); /* Légère ombre */
    z-index: 1000;
    display: flex; /* Assure l'alignement des éléments */
    align-items: center; /* Centre verticalement */
    justify-content: center; /* Centre horizontalement */
    transition: all 0.3s ease-in-out;
    padding: 0 20px; /* Ajoutez un peu d'espace latéral */
}

/* Logo */
.sticky .logo {
    max-height: 30px; /* Taille réduite pour le logo */
    margin-right: 15px; /* Petit espacement à droite du logo */
    transition: max-height 0.3s ease-in-out, opacity 0.3s ease-in-out;
    opacity: 0; /* Logo disparaît lors du scroll */
    visibility: hidden;
}
/* Logo */
.logo-container {
    margin-bottom: 20px;
}
.logo {
    max-width: 300px;
    transition: opacity 0.3s ease-in-out, max-width 0.3s ease-in-out;
    margin-top: 20px;
}

/* Navbar */


.navbar li {
    margin: 0 10px; /* Espacement réduit entre les items */    
}

.navbar a {
    text-decoration: none;
    color: #000;
    font-size: 16px; /* Taille réduite pour s'adapter à la barre */
    transition: color 0.3s ease;
    font-family: "Montserrat", Arial, sans-serif;
    font-optical-sizing: auto;
    font-style: normal;
}

.navbar a:hover {
    color: #d4a373; /* Couleur d'accentuation */
}

/* Menu burger - Bouton */
.burger-menu {
    display: none; /* Caché sur desktop */
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 40px;
    height: 40px;
    background: none;
    border: none;
    cursor: pointer;
    z-index: 1100; /* Priorité sur le contenu */
    background-color: white;
    border-radius: 10px;
}

.burger-menu .line {
    width: 25px;
    height: 3px;
    background-color: #000; /* Couleur des lignes */
    margin: 4px 0;
    transition: all 0.3s ease;
}

/* Animation lors de l'ouverture */
.burger-menu.open .line:nth-child(1) {
    transform: translateY(7px) rotate(45deg);
}

.burger-menu.open .line:nth-child(2) {
    opacity: 0;
}

.burger-menu.open .line:nth-child(3) {
    transform: translateY(-7px) rotate(-45deg);
}

/* Menu déroulant */
.navbar {
    display: flex;
    flex-direction: column;
    position: absolute;
    top: 0;
    right: -100%; /* Caché hors de la vue */
    width: 100%;
    height: 40vh;
    transition: transform 0.3s ease-in-out;
    z-index: 1000;
    padding: 20px;
}

.navbar.open {
    right: 0; /* Menu ouvert */
    transform: translateX(0);
    background-color: white;
}

.navbar ul {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column; /* Menu en colonne */  
    justify-content: center; /* Centre le texte horizontalement */
    align-items: center; /* Centre le texte verticalement */
   
    gap: 20px;
}

/* Responsive - Affichage mobile */
@media (max-width: 768px) {
.burger-menu {
        display: flex; /* Visible en version mobile */
        position: absolute;
        top: 10px;
        right: 30px;
        position: fixed;
    }
    .navbar {
        position: fixed;
    }

    .header {
        position: relative;

    }
    .navbar.open {
        background-color: white;
        right: 0;
    }
}

/* Desktop - Comportement inchangé */
@media (min-width: 769px) {
    .burger-menu {
        display: none; /* Caché sur desktop */
    }

    .navbar {
        position: static; /* Réinitialisation du positionnement */
        display: flex;
        height: auto;
        box-shadow: none;
    }

    .navbar ul {
        flex-direction: row;
        gap: 10px;
    }
}




/* Footer */
.footer {
    position: relative;
    background-color: #f4c09a; /* Couleur de fond unie */
    padding: 50px 20px;
    color: #000;
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden; /* Cache tout débordement */
}

/* Taches au premier plan */
.footer-tache-left img,
.footer-tache-right img {
    position: absolute; /* Position absolue dans le footer */
    z-index: 1; /* Place les taches au-dessus du fond */
    width: 600px; /* Largeur des taches */
    height: auto; /* Conserve les proportions */
    pointer-events: none; /* Ignore les clics pour ne pas gêner la navigation */
}

/* Position spécifique des taches */
.footer-tache-left img {
    top: -50px;
    left: -280px; /* Décale légèrement à gauche */
    z-index: 1;
}

.footer-tache-right img {
    bottom: -250px;
    right: -250px; /* Décale légèrement à droite */
}

/* Contenu du footer */
.footer-container {
    max-width: 1200px;
    display: flex;
    justify-content:space-around;
    align-items: flex-start;
    flex-wrap: wrap; /* Permet de s'adapter aux petits écrans */
    z-index: +10;
}

/* Styles pour le contenu gauche */
.footer-left {
    flex: 1;
    max-width: 45%;
    font-family: 'Montserrat', sans-serif;
    font-size: 0.9rem;
    line-height: 1.6;
    margin-right: 250px;
}
.footer-left img {
    max-width: 250px;
    margin-bottom: 20px;
}

/* Styles pour le contenu droit */
.footer-right {
    max-width: 45%;
    margin-top: 75px;
}

.footer-right ul {
    list-style: none;
    padding: 0;
}

.footer-right li {
    margin-bottom: 5px;
}

.footer-right a {
    text-decoration: none;
    color: #000;
    transition: color 0.3s ease;
}

.footer-right a:hover {
    color: #b5835a; /* Couleur d'accentuation */
}
.fa-house, .fa-envelope, .fa-phone{
    font-size: 1.5em;
    margin-right: 10px;
    color:rgb(116, 116, 116);
}
.footer_email{
    color: rgb(114, 93, 54);
}
.textfooter {
    position: absolute;
    bottom: 10px; /* Ajustez la marge en bas selon vos besoins */
    left: 10px;   /* Ajustez la marge à gauche selon vos besoins */
    font-size: 0.8em; /* Taille du texte */
    color: #1e1d1d; /* Couleur noir */
    z-index: 2; /* Assure que le texte soit au-dessus des éléments */
}
/* Responsive */
@media (max-width: 1100px) {
    .footer-left{
        margin-right: 100px;
        font-size: 0.8em;
    }
    .footer-right{
        font-size: 0.8em;
        margin-top: 110px;
    }
}
@media (max-width: 768px) {
    .footer-container {
        flex-direction: column;
        text-align: center;
    }

    .footer-left,
    .footer-right {
        max-width: 100%;
        margin: auto;
    }
.footer-left{
    margin-bottom: 30px;
}
    .footer-tache-left img,
    .footer-tache-right img {
        width: 300px;
    }
}

@media (max-width: 480px) {
    .footer-tache-left img,
    .footer-tache-right img {
        width: 200px;
    }
}

/* Bouton retour en haut */
.scroll-to-top {
    position: fixed;
    bottom: 20px;
    right: 20px;
    background-color: #fbccad;
    color: #fff;
    border: none;
    border-radius: 50%;
    width: 30px;
    height: 30px;
    display: none; /* Caché par défaut */
    justify-content: center;
    align-items: center;
    text-align: center;
    cursor: pointer;
    box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.2);
    z-index: 1000;
    transition: background-color 0.3s ease, transform 0.3s ease;
}

.scroll-to-top i {
    font-size: 20px;
}

.scroll-to-top:hover {
    background-color: #d4a373;

}

/* Affichage sur petit écran */
@media (max-width: 768px) {
    .scroll-to-top i {
        font-size: 16px;
    }
}