/* Global Styles */
body {
    font-family: 'Comfortaa', sans-serif;
    color: #155e2e;
    background-color: #ffffff;
    margin: 0;
    padding: 0;
}

hr {
    border: 1px solid #59b346; /* Changez le code hexadécimal pour la couleur désirée */
}

/* Style de l'animation d'intro */
.intro-animation {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: #155e2e;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 10000;
    opacity: 1; /* Visible au départ */
    transition: opacity 1s ease-in-out; /* Transition pour l'effet de fondu */
}

.intro-content {
    color: white;
    text-align: center;
    font-family: 'Courrier New', sans-serif;
    padding: 0 10%; 
}

.intro-quote {
    font-family: 'Courier New', Courier, monospace; 
    font-size: 3em;
    color: white;
    text-align: center;
    white-space: normal; 
    opacity: 0; 
    animation: fadeInText 2s ease-in-out forwards; 
}

/* Animation pour faire apparaître progressivement la citation */
@keyframes fadeInText {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

/* Animation pour faire disparaître l'intro */
.fade-out {
    opacity: 0; /* Utilisation de l'opacité pour faire le fondu */
    transition: opacity 2s ease-in-out; /* Durée de l'animation de fondu */
}

/* Animation pour faire disparaître l'élément */
@keyframes fadeOut {
    from {
        opacity: 1;
    }
    to {
        opacity: 0;
    }
}

/* Masquer le contenu principal au début */
.hidden {
    display: none;
}

/* Fondu et balayage lors de l'apparition du site */
@keyframes fadeInPage {
    from {
        opacity: 0;
        transform: translateY(100%);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

#main-content {
    animation: fadeInPage 1s ease-in-out forwards;
}


/* Masquer le contenu principal au début */
.hidden {
    display: none;
}

/* Fondu et balayage lors de l'apparition du site */
@keyframes fadeInPage {
    from {
        opacity: 0;
        transform: translateY(100%);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

#main-content {
    animation: fadeInPage 2s ease-in-out forwards;
}



/* Header */
header {
    background-color: #155e2e;
    padding: 10px 0;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
    position: relative;
    top: 0;
    z-index: 1000;
}

/* Cacher le menu hamburger sur les grands écrans */
#navbarContent {
    display: none;
}

.navbar-toggler {
    display: block;
    background: none;
    border: none;
    color: white;
    font-size: 1.5em;
}

#phone-number {
    cursor: pointer; /* Change le curseur en main pour indiquer que c'est cliquable */
}


header .logo {
    height: auto;
    width: 80px; /* Ajustez la largeur selon vos besoins */
}

/* Styles de navigation */
header nav {
    flex: 1; /* Permet de prendre toute la largeur disponible */
    display: flex;
    justify-content: center; /* Centre les liens de navigation */
}

header nav a {
    font-weight: bold;
    font-size: 1.2em;
    text-decoration: none;
    color: #ffffff; /* Couleur des liens du header */
    transition: color 0.3s, transform 0.3s;
    margin: 0 50px !important; /* Espacement horizontal entre les liens */
    padding: 5px 10px;
}

/* Styles de survol */
header nav a:hover {
    color: #59b346 !important; /* Couleur au survol */
    transform: scale(1.1); /* Légère augmentation de taille au survol */
    text-decoration: underline; /* Soulignement au survol */
    text-underline-offset: 6px; /* Espace entre le texte et le soulignement */
}

/* Styles pour les informations de contact */
.contact-info {
    color: #ffffff; /* Couleur du texte */
    font-size: 1em; /* Taille du texte */
}

.contact-info i {
    margin-right: 10px; /* Espace entre l'icône et le numéro */
    white-space: nowrap; /* Empêche le passage à la ligne */
}



/* Section Présentation */
#presentation {
    background-color: #ffffff; /* Fond blanc pour contraster avec la section précédente */
    color: #155e2e; /* Couleur de texte en vert foncé */
    padding: 60px 0; /* Espacement vertical */
    border-top: 5px solid #59b346; /* Bordure verte en haut pour délimiter la section */
}

#presentation h1 {
    font-family: 'Comfortaa', sans-serif; /* Police personnalisée */
    font-size: 3em; /* Taille de police plus grande */
    margin-bottom: 20px; /* Espacement en dessous du titre */
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.1); /* Ombre légère pour le texte */
}

#presentation blockquote {
    font-size: 1.5em; /* Taille de police pour la citation */
    font-style: italic; /* Italique pour la citation */
    margin: 30px 0; /* Espacement autour de la citation */
    padding: 20px; /* Espacement intérieur */
    border-left: 4px solid #59b346; /* Bordure verte à gauche */
    background-color: #f9f9f9; /* Fond légèrement gris pour la citation */
    border-radius: 5px; /* Coins arrondis */
}


/* Section Présentation du Client */
#client-presentation {
    background-color: #ffffff;
    padding: 60px 0;
}

#client-presentation .client-photo {
    width: 100%; /* Pour garantir que l'image s'ajuste bien sur les petits écrans */
    max-width: 350px; /* Limite la taille maximale sur les grands écrans */
    height: auto;
    border-radius: 100%;
}

#client-presentation h2 {
    font-size: 2rem;
}

#client-presentation p {
    font-size: 1.2rem;
    word-wrap: break-word; /* Empêche le débordement des mots longs */
    text-align: justify;
}

#client-presentation h2:hover {
    color: #59b346; /* Choisissez la couleur que vous voulez pour le hover */
}

#client-presentation .container {
    display: flex;
    align-items: center;
    justify-content: space-between; /* Assure l'espacement entre les deux blocs */
    flex-wrap: nowrap; /* Empêche le retour à la ligne du texte */
}


.client-photo-container {
    flex: 0 0 40%;
    display: flex;
    justify-content: center;
}

.client-photo {
    width: 250px;
    height: 250px;
    border-radius: 50%;
    object-fit: cover;
    border: 6px solid #155e2e;
    transition: transform 0.3s; /* Transition pour l'effet de survol */
}

.client-photo:hover {
    transform: scale(1.05); /* Légère augmentation de taille */
}

.client-text {
    flex: 0 0 60%;
    text-align: left;
}

.client-text h2 {
    font-family: 'Comfortaa', sans-serif;
    font-size: 2em;
    color: #6793a6;
    animation: fadeIn 1s; /* Animation de fondu */
    transition: color 0.3s, transform 0.3s; /* Ajout de la transition */
}

.client-text h2:hover {
    color: #59b346; /* Changement de couleur au survol */
    transform: scale(1.05); /* Zoom au survol */
}

.client-text p {
    font-family: 'Farmgarden', sans-serif;
    font-size: 1.2em;
    color: #777;
    margin-top: 10px;
    line-height: 1.6;
    text-align: justify;
}

/* Styles du bouton */
.btn {
    padding: 10px 20px; /* Ajoutez un peu de padding */
    font-size: 1.2em; /* Taille du texte */
    text-decoration: none; /* Pas de soulignement */
    border-radius: 5px; /* Coins arrondis */
    transition: background-color 0.3s, transform 0.3s; /* Animation de transition */
    margin-bottom: 20px;
}

#portfolio .btn {
    margin-bottom: 20px; /* Ajout du margin-bottom */
}


.btn:hover {
    background-color: #59b346; /* Couleur de fond au survol */
    transform: scale(1.05); /* Zoom au survol */
}

.right {
    float: right;
}


/* Section Services */
#services {
    padding: 60px 0;
}

#services h2 {
    font-family: 'Comfortaa', sans-serif;
    font-size: 2.5em;
    margin-bottom: 30px;
    color: #155e2e;
    animation: fadeIn 1s; /* Animation de fondu */
    transition: color 0.3s, transform 0.3s; /* Ajout de la transition */
}

#services h2:hover {
    color: #59b346; /* Changement de couleur au survol */
    transform: scale(1.05); /* Zoom au survol */
}

#services .col-md-4 {
    margin-bottom: 30px;
}

.service-card {
    background-color: #f9f9f9;
    border: 1px solid #ddd;
    border-radius: 10px;
    padding: 20px;
    text-align: center;
    transition: transform 0.3s, box-shadow 0.3s; /* Transition pour l'effet de survol */
}

/* Styles pour les liens dans la section des services */
.service-card h3 a {
    color: #59b346; /* Couleur par défaut */
    text-decoration: none; /* Pas de soulignement */
    transition: color 0.3s, transform 0.3s; /* Transition pour l'effet de survol */
}

.service-card h3 a:hover {
    color: #155e2e; /* Changement de couleur au survol */
    transform: scale(1.1); /* Légère augmentation de taille au survol */
}


.service-card:hover {
    transform: translateY(-5px); /* Légère élévation lors du survol */
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2);
}

#services h3 {
    font-family: 'Farmgarden', sans-serif;
    font-size: 1.8em;
    margin-top: 15px;
    color: #59b346;
    transition: color 0.3s, transform 0.3s; /* Ajout de la transition */
}

#services h3:hover {
    color: #155e2e; /* Changement de couleur au survol */
    transform: scale(1.05); /* Zoom au survol */
}

#services p {
    font-size: 1em;
    color: #777;
}

#services i {
    color: #59b346;
    transition: color 0.3s;
}

#services i:hover {
    color: #155e2e;
}

/* Section Portfolio */
#portfolio {
    background-color: #f9f9f9;
    padding: 60px 0;
}

#portfolio h2 {
    font-family: 'Comfortaa', sans-serif;
    color: #155e2e;
    margin-bottom: 20px;
    animation: fadeIn 1s; /* Animation de fondu */
    transition: color 0.3s, transform 0.3s; /* Ajout de la transition */
}

#portfolio h2:hover {
    color: #59b346; /* Changement de couleur au survol */
    transform: scale(1.05); /* Zoom au survol */
}

.carousel-inner img {
    height: auto; /* Ajuste la hauteur automatiquement */
    max-height: 400px; /* Limite la hauteur pour ne pas dépasser une certaine taille */
    width: 100%; /* Assure que l'image prend toute la largeur du conteneur */
    object-fit: contain; /* L'image sera contenue dans le conteneur sans être coupée */
    object-position: center; /* Centre l'image */
}

/* Section FAQ */
#faq {
    padding: 60px 0;
}

#faq h2 {
    font-family: 'Comfortaa', sans-serif;
    font-size: 2.5em;
    margin-bottom: 30px;
    color: #155e2e;
    animation: fadeIn 1s; /* Animation de fondu */
    transition: color 0.3s, transform 0.3s; /* Ajout de la transition */
}

#faq h2:hover {
    color: #59b346; /* Changement de couleur au survol */
    transform: scale(1.05); /* Zoom au survol */
}

.card-header button {
    font-size: 1.2em;
    font-family: 'Farmgarden', sans-serif;
    color: #59b346;
    text-decoration: none;
    transition: color 0.3s, transform 0.3s; /* Transition pour l'effet de survol */
}

.card-header button:hover {
    color: #ffffff;
    transform: scale(1.1); /* Légère augmentation de taille */
}

.card-header {
    cursor: pointer; /* Indiquer que le header est cliquable */
}

.faq-item {
    padding: 15px; /* Ajoutez du padding pour améliorer l'expérience de clic */
    transition: background-color 0.3s;
}

.faq-item:hover {
    background-color: #f0f0f0; /* Changez le fond au survol */
}

/* Section Carte */
#carte {
    padding: 60px 0;
    background-color: #f9f9f9; /* Couleur de fond pour la section carte */
}

#carte h2 {
    font-family: 'Comfortaa', sans-serif;
    font-size: 2.5em;
    margin-bottom: 30px;
    color: #155e2e;
}

#map {
    height: 400px; /* Hauteur de la carte */
    width: 100%;
    background-color: #ddd; /* Couleur de fond par défaut */
    border-radius: 5px; /* Ajoute un léger arrondi aux coins */
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1); /* Ombre pour donner un peu de profondeur */
    border: 1px solid #155e2e; /* Optionnel : bordure pour la carte */
}


/* Section Contact */
#carte-contact h2 {
    font-family: 'Comfortaa', sans-serif;
    font-size: 2.5em;
    margin-bottom: 30px;
    color: #155e2e;
    transition: color 0.3s, transform 0.3s; /* Ajout de la transition */
    padding-bottom: 20px;
}

#carte-contact h2:hover {
    color: #59b346; /* Changement de couleur au survol */
    transform: scale(1.05); /* Zoom au survol */
}


#contact h2:hover {
    color: #59b346; /* Changement de couleur au survol */
    transform: scale(1.05); /* Zoom au survol */
}

#contact h3 {
    font-family: 'Farmgarden', sans-serif;
    font-size: 1.8em;
    color: #59b346;
    transition: color 0.3s, transform 0.3s; /* Ajout de la transition */
}

#contact h3:hover {
    color: #155e2e; /* Changement de couleur au survol */
    transform: scale(1.05); /* Zoom au survol */
}

#map {
    height: 300px;
    width: 100%;
    background-color: #ddd;
}

.center {
    text-align: center;
}

/* Footer */
footer {
    background-color: #155e2e;
    padding: 40px 0;
    color: #ffffff;
}

.footer-logo {
    width: 100px;
    height: auto;
    margin-bottom: 20px;
}

footer p {
    margin: 40px;
    font-size: 0.9em;
}

.footer-link {
    color: #ffffff;
    font-size: 1em;
    text-decoration: none;
    transition: color 0.3s ease;
}

.footer-link:hover {
    color: #59b346;
    text-decoration: underline;
}

/* Alignement entre la deuxième et la troisième colonne */
footer .footer-links {
    display: flex;
    flex-direction: column;
    justify-content: space-between; /* Assure que les éléments soient alignés verticalement */
    height: 100%; /* Prend toute la hauteur disponible pour un meilleur alignement */
}

.footer-link-uppercase {
    text-transform: uppercase; /* Met le texte en majuscule */
}


/* Icônes dans le footer */
footer i {
    margin-right: 8px;
}

.responsive-email {
    word-wrap: break-word; /* Gère les mots longs */
    overflow-wrap: anywhere; /* Casse le texte si nécessaire */
}


/* Animations */
@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Responsiveness */
@media (min-width: 768px) {
    .navbar-toggler {
        display: none; /* Cacher le bouton hamburger sur les grands écrans */
    }

    .navbar-collapse {
        display: flex !important; /* Afficher les liens de navigation */
        justify-content: center; /* Centrer les liens */
    }

    .contact-info {
        display: flex !important; /* Afficher les informations de contact */
        white-space: nowrap; /* Empêche le passage à la ligne */
    }
}

@media (max-width: 767px) {
    .navbar-collapse {
        background-color: #155e2e; /* Change la couleur de fond du menu */
    }

    .navbar-nav .nav-item {
        text-align: center; /* Centrer les liens */
        border-bottom: 1px solid rgba(255, 255, 255, 0.2); /* Ligne de séparation */
    }

    .navbar-nav .nav-item a {
        padding: 10px;
        color: white;
    }

    .navbar-nav .nav-item a:hover {
        background-color: #59b346; /* Couleur de survol */
    }

    #presentation h1 {
        font-size: 2em;
    }

    #client-presentation .client-photo {
        max-width: 250px; /* Réduction de la taille de l'image sur petits écrans */
        margin-bottom: 20px; /* Ajout d'un espace sous l'image */
    }

    #client-presentation h2 {
        font-size: 1.5rem; /* Taille du titre réduite sur petits écrans */
    }

    #client-presentation p {
        font-size: 1rem; /* Réduction de la taille du texte sur petits écrans */
        text-align: justify;
    }
    
    #portfolio .carousel-item img {
        height: 300px;
    }

    footer {
        text-align: center;
    }

    .footer-logo {
        margin: 0 auto;
    }

    .col-md-4 {
        margin-bottom: 20px;
    }

    #card-contact h3 {
        font-size: 1rem;
    }

    #carte-contact .responsive-email {
        font-size: 1.5rem; /* Taille réduite pour les petits écrans */
    }

    .mt-small-screen {
        margin-top: 30px; /* Ajuste la valeur selon ton besoin */
    }
}


@media (max-width: 992px) {
    #client-presentation .container {
        flex-wrap: wrap; /* Pour les écrans plus petits, on autorise le retour à la ligne */
    }

    .client-photo-container,
    .client-text {
        flex: 0 0 100%; /* La photo et le texte prennent chacun 100% de la largeur sur petits écrans */
        text-align: center;
    }

    .client-photo {
        margin-bottom: 20px;
    }
}