/* ========================================== */
/* SECTION POURQUOI CHOISIR GPSTC */
/* ========================================== */

/* Section Pourquoi choisir GPSTC CONSULTING en fond blanc */
#pourquoi {
    background: #fff; /* Fond blanc pour contraste */
    border-radius: 18px; /* Coins arrondis */
    box-shadow: 0 2px 16px rgba(0,0,0,0.07); /* Ombre légère pour profondeur */
    padding: 40px 30px 30px 30px; /* Espacement intérieur */
    margin: 40px auto 40px auto; /* Centrage avec marges verticales */
}

/* Titre h2 et listes avec thème vert clair */
#pourquoi h2 {
    color: #ffffff; /* Texte blanc pour contraste */
    margin-bottom: 18px; /* Espacement sous le titre */
}

/* Liste à puces stylisée */
#pourquoi ul {
    list-style: disc inside; /* Puces disques intégrées */
    color: #faf3f3; /* Couleur presque blanche */
    font-size: 1.13em; /* Taille légèrement agrandie */
    margin-left: 0; /* Pas de marge gauche */
    padding-left: 0; /* Pas de padding gauche */
}

/* Éléments de liste avec espacement */
#pourquoi li {
    margin-bottom: 10px; /* Espace entre les items */
}
/* ========================================== */
/* ARRIÈRE-PLANS DES SERVICES */
/* ========================================== */

/* Arrière-plan image pour la première ligne de services */
.services-row-bg1 {
    background: url('../image/bg-services1.jpg') center/cover no-repeat; /* Image de fond centrée et couvrant */
    border-radius: 18px 18px 0 0; /* Coins arrondis en haut uniquement */
    min-height: 260px; /* Hauteur minimale */
    position: relative; /* Positionnement relatif pour enfants absolus */
}

/* Arrière-plan image pour la deuxième ligne de services */
.services-row-bg2 {
    background: url('../image/bg-services2.jpg') center/cover no-repeat; /* Image de fond centrée couvrant */
    border-radius: 0 0 18px 18px; /* Coins arrondis en bas uniquement */
    min-height: 260px; /* Hauteur minimale */
    position: relative; /* Positionnement relatif pour enfants absolus */
}

/* Services dans les conteneurs d'arrière-plan */
.services-row-bg1 .service, .services-row-bg2 .service {
    background: rgba(255,255,255,0.92); /* Blanc avec légère transparence */
    border-radius: 16px; /* Coins arrondis */
    box-shadow: 0 2px 12px rgba(0,0,0,0.07); /* Ombre subtile */
}

/* ========================================== */
/* DISPOSITION DES SERVICES EN GRILLE */
/* ========================================== */

/* Disposition des services en 2 lignes de 3 colonnes */
.services-row {
    display: flex; /* Flexbox pour alignment */
    flex-wrap: nowrap; /* Pas de retour à la ligne */
    justify-content: center; /* Centrage horizontal */
    gap: 2em; /* Espacement entre les éléments */
    margin-bottom: 2em; /* Espace sous la ligne */
}

/* Responsive: une colonne sur mobile */
@media (max-width: 900px) {
    .services-row {
        flex-direction: column; /* Empile verticalement */
        gap: 1.5em; /* Réduit l'espacement */
        margin-bottom: 0; /* Pas de marge sous */
    }
}
/* ========================================== */
/* CONTENEUR DES SERVICES */
/* ========================================== */

/* Fond blanc derrière les blocs de services */
.services-list-bg {
    background: #ebf7eb; /* Vert très clair */
    border-radius: 24px; /* Coins bien arrondis */
    box-shadow: 0 8px 32px rgba(124, 120, 120, 0.08); /* Ombre douce */
    padding: 2.5em 1.5em; /* Espacement intérieur */
    margin-bottom: 2em; /* Marge inférieure */
}

/* ========================================== */
/* BARRE VERTE DÉCORATIVE */
/* ========================================== */

/* Barre verte décorative sous le titre Nos Services */
.barre-verte {
    width: 120px; /* Largeur fixe */
    height: 6px; /* Hauteur pour effet de barre */
    background: linear-gradient(90deg, #c9d4ce 60%, #06582f 100%); /* Dégradé du gris au vert */
    border-radius: 4px; /* Coins légèrement arrondis */
    margin: 0 auto 2em auto; /* Centrage avec marge inférieure */
}

/* ========================================== */
/* TITRE DES SERVICES */
/* ========================================== */

/* Titre Nos Services centré et police élégante */
.services-title {
    text-align: center; /* Centrage horizontal */
    font-family: 'Montserrat', Arial, sans-serif; /* Police sans-serif moderne */
    font-weight: 400; /* Poids normal */
    font-size: 2.3em; /* Taille de police augmentée */
    letter-spacing: 1px; /* Espacement des lettres */
    color: #232423; /* Titre en noir */
    margin-bottom: 0.3em; /* Marge inférieure */
}

/* ========================================== */
/* ANIMATIONS PRINCIPALES */
/* ========================================== */

/* Animation d'apparition générale pour toutes les sections */
section, .hero, header, footer {
    opacity: 0; /* Invisible au départ */
    animation: fadeIn 1.2s cubic-bezier(.4,2,.3,1) forwards; /* Animation de fondu avec easing personnalisé */
}

/* Délais d'animation échelonnés pour chaque section */
section:nth-of-type(1) { animation-delay: 0.2s; }
section:nth-of-type(2) { animation-delay: 0.4s; }
section:nth-of-type(3) { animation-delay: 0.6s; }
section:nth-of-type(4) { animation-delay: 0.8s; }
section:nth-of-type(5) { animation-delay: 1s; }
.hero { animation-delay: 0.1s; } /* Le héro apparaît tôt */
header { 
    animation-delay: 0s; /* L'header apparaît en premier */
    position: relative; /* Positionnement pour z-index */
    z-index: 100; /* Au-dessus du contenu */
}
footer { animation-delay: 1.2s; } /* Le footer apparaît en dernier */

/* Keyframe pour l'animation de fondu */
@keyframes fadeIn {
    to {
        opacity: 1; /* Devient visible */
    }
}

/* ========================================== */
/* STYLES GLOBAUX DES SECTIONS */
/* ========================================== */

/* Styles généraux pour centrer le contenu dans services.html et autres pages */
section {
    background-color: #f0f8f0; /* Fond vert très clair */
    padding: 1.2em 1em; /* Espacement intérieur */
    margin: 1em auto; /* Centrage avec marges */
    border-radius: 12px; /* Coins arrondis */
}

/* Titre h1 dans les sections */
section h1 {
    text-align: center; /* Centrage */
    margin-bottom: 0.8em; /* Espace sous le titre */
    color: #000; /* Noir */
    font-size: 1.8em; /* Taille augmentée */
}

/* Titre h2 dans les sections */
section h2 {
    text-align: center; /* Centrage */
    margin: 1.2em 0 0.6em 0; /* Marges symétriques */
    font-size: 1.5em; /* Taille de titre */
    color: #1b3d1b; /* Vert foncé */
}

/* Paragraphes dans les sections */
section p {
    text-align: center; /* Centrage */
    margin: 0 auto 0.8em auto; /* Centrage avec marges */
    line-height: 1.6; /* Hauteur de ligne augmentée pour lisibilité */
}

/* Images dans les sections */
section img {
    display: block; /* Bloc pour centrage */
    margin: 1em auto; /* Centrage avec marges */
    max-width: 100%; /* Largeur complète */
    height: auto; /* Hauteur automatique pour proportions */
    border-radius: 10px; /* Coins arrondis */
    box-shadow: 0 4px 12px rgba(0,0,0,0.1); /* Ombre pour profondeur */
}

/* Vidéos dans les sections */
section video {
    display: block; /* Bloc pour centrage */
    margin: 1em auto; /* Centrage avec marges */
    max-width: 100%; /* Largeur maximale */
    height: auto; /* Hauteur automatique */
    border-radius: 10px; /* Coins arrondis */
    box-shadow: 0 4px 12px rgba(0,0,0,0.1); /* Ombre pour profondeur */
}

/* Centrage spécifique des vidéos */
section video[src*="video/"] {
    width: 60%; /* Largeur spécifique */
    max-width: 400px; /* Maximum fixe */
}

/* ========================================== */
/* RESPONSIVE POUR SECTIONS */
/* ========================================== */

@media (max-width: 768px) {
    /* Titre h1 sur mobile */
    section h1 {
        font-size: 1.8em; /* Taille réduite */
        margin-bottom: 1em; /* Marge augmentée */
    }

    /* Titre h2 sur mobile */
    section h2 {
        font-size: 1.3em; /* Taille réduite */
        margin: 1.5em 0 0.8em 0; /* Marges augmentées */
    }

    /* Paragraphes sur mobile */
    section p {
        font-size: 1em; /* Taille réduite */
        padding: 0 1em; /* Padding horizontal ajouté */
    }

    /* Vidéos sur mobile */
    section video[src*="video/"] {
        width: 95%; /* Presque pleine largeur */
        max-width: none; /* Pas de maximum */
    }
}

/* ========================================== */
/* IMPORTS DE POLICES */
/* ========================================== */

/* Import de la police Montserrat depuis Google Fonts */
@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@700&display=swap');

/* ========================================== */
/* ANIMATIONS DES SERVICES */
/* ========================================== */

/* Animation d'apparition pour les services */
.service {
    opacity: 0; /* Invisible au départ */
    transition: opacity 0.8s cubic-bezier(.4,2,.3,1); /* Transition douce avec easing personnalisé */
}

/* Service visible après animation */
.service.service-visible {
    opacity: 1; /* Devient visible */
}

/* Effet de fondu pour le carousel d'images */
.service-img {
    opacity: 1; /* Visible */
    transition: opacity 1s; /* Transition douce */
}
/* ========================================== */
/* SECTION POURQUOI AVEC GRADIENT */
/* ========================================== */

/* Fond vert clair pour la section Pourquoi choisir GPSTC CONSULTING */
#pourquoi {
    background: linear-gradient(135deg, #1b3d1b 0%, #86a186 100%); /* Dégradé de vert */
    border-radius: 18px; /* Coins arrondis */
    padding-top: 2.5em; /* Padding supérieur */
    padding-bottom: 2.5em; /* Padding inférieur */
    margin-bottom: 2em; /* Marge inférieure */
}

/* ========================================== */
/* IMAGES DE SECTION */
/* ========================================== */

/* Style général pour les images de section */
.section-img {
    display: block; /* Bloc pour centrage */
    max-width: 100%; /* Largeur maximale */
    height: 520px; /* Hauteur fixe */
    object-fit: cover; /* Remplissage proportionnel */
    margin: 0 auto 2em auto; /* Centrage avec marge inférieure */
    border-radius: 20px; /* Coins bien arrondis */
    box-shadow: 0 6px 24px rgba(0,0,0,0.13); /* Ombre pour profondeur */
}

/* ========================================== */
/* IMAGES DES SERVICES */
/* ========================================== */

/* Style pour les images de services */
.service-img {
    display: block; /* Bloc pour centrage */
    width: 100%; /* Largeur complète */
    height: 470px; /* Hauteur fixe */
    object-fit: cover; /* Rempl issage proportionnel */
    margin: 0 auto 1em auto; /* Centrage avec marge inférieure */
    border-radius: 18px; /* Coins arrondis */
    box-shadow: 0 4px 18px rgba(236, 233, 5, 0.13); /* Ombre jaune subtile */
    transition: transform 0.5s cubic-bezier(.4,2,.3,1), box-shadow 0.5s; /* Transitions fluides */
    cursor: pointer; /* Curseur cliquable */
}

/* Image zoomée au hover */
.service-img.zoomed {
    transform: scale(1.08) rotate(-1deg); /* Zoom et rotation légère */
    box-shadow: 0 8px 32px rgba(202, 223, 211, 0.18), 0 0 0 4px #146d41; /* Ombre double */
    z-index: 2; /* Au-dessus des autres éléments */
}

/* Image cliquée */
.service-img.clicked {
    box-shadow: 0 10px 30px rgba(20, 109, 65, 0.24); /* Ombre plus importante */
    border: 3px solid rgba(6, 88, 47, 0.35); /* Bordure verte */
}

/* ========================================== */
/* RESPONSIVE POUR IMAGES */
/* ========================================== */

@media (max-width: 800px) {
    /* Image de section sur mobile */
    .section-img {
        height: 240px; /* Hauteur réduite */
    }
    
    /* Image de service sur mobile */
    .service-img {
        max-width: 260px; /* Largeur réduite */
        height: 160px; /* Hauteur réduite */
    }
}
/* ========================================== */
/* STYLES GLOBAUX DU BODY */
/* ========================================== */

body {
    font-family: 'Montserrat', Arial, sans-serif; /* Police Montserrat pour cohérence */
    margin: 0; /* Pas de marge */
    padding: 0; /* Pas de padding */
    background: #97dd97; /* Fond vert clair */
    color: #030303; /* Couleur de texte très foncée (presque noire) */
    font-size: 1.1em; /* Taille de police globale augmentée pour lisibilité */
    padding-top: 60px; /* Espace pour la navigation fixe */
}

/* ========================================== */
/* NAVIGATION */
/* ========================================== */

/* Barre de navigation fixe */
nav {
    background: #1b3d1b; /* Vert très foncé */
    padding: 0.7em 0; /* Padding vertical */
    min-height: 44px; /* Hauteur minimale pour accessibilité */
    display: flex; /* Flexbox pour alignment */
    align-items: center; /* Centrage vertical */
    justify-content: center; /* Centrage horizontal */
    position: fixed; /* Fixe au top */
    top: 0; /* Au haut de la page */
    left: 0; /* Depuis la gauche */
    right: 0; /* Jusqu'à la droite */
    width: 100%; /* Largeur complète */
    z-index: 1000; /* Au-dessus du contenu */
    box-shadow: 0 2px 8px rgba(0,0,0,0.1); /* Ombre subtile */
}

/* Liste de navigation */
nav ul {
    list-style: none; /* Pas de puces */
    display: flex; /* Flexbox pour horizontal */
    justify-content: center; /* Centrage horizontal */
    align-items: center; /* Centrage vertical */
    margin: 0; /* Pas de marge */
    padding: 0; /* Pas de padding */
    width: 100%; /* Largeur complète */
}

/* Éléments de navigation */
nav ul li {
    margin: 0 1em; /* Marge horizontale pour espacement */
}

/* Liens de navigation */
nav ul li a {
    color: #fff; /* Blanc */
    text-decoration: none; /* Pas de soulignement */
    font-family: 'Montserrat', Arial, sans-serif; /* Police cohérente */
    font-weight: 700; /* Gras */
    font-size: 1.05em; /* Légèrement plus grand */
    letter-spacing: 1px; /* Espacement des lettres */
    text-transform: uppercase; /* Majuscules */
    text-shadow: none; /* Pas d'ombre de texte */
    transition: color 0.2s, text-shadow 0.2s; /* Transitions fluides */
    text-align: center; /* Centrage */
    display: flex; /* Flexbox pour centrage interne */
    align-items: center; /* Centrage vertical */
    justify-content: center; /* Centrage horizontal */
    height: 100%; /* Hauteur complète */
}

/* Hover sur les liens de navigation */
nav ul li a:hover {
    color: #f7b731; /* Change en couleur dorée/orange */
}
/* ========================================== */
/* SECTION HÉRO */
/* ========================================== */

/* Bannière principale avec image de fond */
.hero {
    background: url('../image/ppppppppp.jpg') center/cover no-repeat; /* Image de fond */
    color: #fff; /* Texte blanc */
    text-align: center; /* Centrage */
    padding: 10%; /* Padding généreux */
    min-height: 380px; /* Hauteur minimale */
    position: relative; /* Positionnement relatif */
    border-radius: 0 0 32px 32px; /* Coins arrondis en bas uniquement */
    box-shadow: 0 8px 32px rgba(0,0,0,0.18); /* Ombre pour profondeur */
}

/* Titre h1 du héro */
.hero h1 {
    font-size: 2.2em; /* Taille de titre augmentée */
    margin-bottom: 0.5em; /* Marge inférieure */
    letter-spacing: 2%; /* Espacement des lettres */
    font-family: 'Montserrat', Arial, sans-serif; /* Police cohérente */
    font-weight: 700; /* Gras */
    color: #000; /* Noir pour contraste */
}

/* Paragraphe du héro */
.hero p {
    font-size: 2em; /* Taille augmentée */
    margin-bottom: 1.5em; /* Marge inférieure */
    font-family: 'Montserrat', Arial, sans-serif; /* Police cohérente */
    font-weight: 400; /* Poids normal */
}

/* ========================================== */
/* BOUTONS */
/* ========================================== */

/* Style des boutons */
.btn {
    background: #11100e; /* Fond très foncé */
    color: #222; /* Couleur de texte sombre */
    padding: 0.8em 2em; /* Padding interne */
    border: none; /* Pas de bordure */
    border-radius: 4px; /* Coins légèrement arrondis */
    font-size: 1em; /* Taille standard */
    cursor: pointer; /* Curseur pointeur */
    text-decoration: none; /* Pas de soulignement */
    transition: background 0.2s; /* Transition douce */
}

/* Hover sur les boutons */
.btn:hover {
    background: #222; /* Fond légèrement plus clair */
    color: #2d792d; /* Couleur verte */
}
/* ========================================== */
/* SECTIONS ET SERVICES */
/* ========================================== */

/* Style général des sections - spacing et centrage */
section {
    padding: 3.5em 1.5em; /* Padding généreux */
    margin: 3em auto; /* Centrage avec espacement vertical */
}

/* ========================================== */
/* LISTE DES SERVICES */
/* ========================================== */

/* Conteneur flexbox pour les services */
.services-list {
    display: flex; /* Flexbox pour disposition */
    flex-wrap: wrap; /* Retour à la ligne si nécessaire */
    gap: 2em; /* Espacement entre services */
    justify-content: center; /* Centrage horizontal */
}

/* ========================================== */
/* CARTES DE SERVICE */
/* ========================================== */

/* Style individuel de chaque service */
.service {
    background: #fff; /* Fond blanc */
    padding: 3.2em 2.3em 2.8em 2.3em; /* Padding interne */
    border-radius: 18px; /* Coins arrondis */
    box-shadow: 0 6px 24px rgba(14,160,75,0.10), 0 2px 8px rgba(0,0,0,0.07); /* Ombre double pour profondeur */
    flex: 1 1 420px; /* Flexibilité avec min-width */
    min-width: 340px; /* Largeur minimale */
    max-width: 700px; /* Largeur maximale */
    text-align: center; /* Centrage du texte */
    margin: 1.5em auto; /* Marges */
    transition: box-shadow 0.3s, transform 0.3s; /* Transitions fluides */
}

/* Hover sur les services */
.service:hover {
    box-shadow: 0 12px 36px rgba(14,160,75,0.18), 0 4px 16px rgba(253, 244, 244, 0.13); /* Ombre augmentée */
    transform: scale(1.03); /* Agrandissement léger */
}

/* ========================================== */
/* GALERIE D'IMAGES */
/* ========================================== */

/* Conteneur flexbox pour galerie */
.gallery {
    display: flex; /* Flexbox */
    gap: 1em; /* Espacement petit */
    flex-wrap: wrap; /* Retour à la ligne */
    justify-content: center; /* Centrage */
}

/* Images de galerie */
.gallery img {
    width: 300px; /* Largeur fixe */
    height: 200px; /* Hauteur fixe */
    object-fit: cover; /* Remplissage proportionnel */
    border-radius: 8px; /* Coins arrondis */
    box-shadow: 0 2px 8px rgba(0,0,0,0.07); /* Ombre subtile */
}
/* ========================================== */
/* FORMULAIRES */
/* ========================================== */

/* Conteneur flexbox pour formulaire */
form {
    display: flex; /* Flexbox pour disposition verticale */
    flex-direction: column; /* Direction verticale */
    gap: 1em; /* Espacement entre inputs */
    max-width: 400px; /* Largeur maximale */
    margin: auto; /* Centrage */
}

/* Inputs et textarea */
form input, form textarea {
    padding: 0.8em; /* Padding interne */
    border: 1px solid #ccc; /* Bordure grise subtile */
    border-radius: 4px; /* Coins arrondis */
    font-size: 1em; /* Taille standard */
}

/* Bouton de formulaire */
form button {
    background: #f7b731; /* Fond orange/doré */
    color: #222; /* Texte sombre */
    border: none; /* Pas de bordure */
    padding: 1em; /* Padding généreux */
    border-radius: 4px; /* Coins arrondis */
    font-size: 1em; /* Taille standard */
    cursor: pointer; /* Curseur pointeur */
    transition: background 0.2s; /* Transition douce */
}

/* Hover sur bouton de formulaire */
form button:hover {
    background: #222; /* Fond sombre */
    color: #f7b731; /* Texte doré */
}

/* ========================================== */
/* PIED DE PAGE */
/* ========================================== */

/* Footer avec fond vert foncé */
footer {
    background: #1b3d1b; /* Vert très foncé */
    color: #fff; /* Texte blanc */
    text-align: center; /* Centrage */
    padding: 1em 0; /* Padding vertical */
    margin-top: 2em; /* Marge supérieure */
}

/* ========================================== */
/* RESPONSIVE POUR MOBILE */
/* ========================================== */

@media (max-width: 800px) {
    /* Services et galerie en colonne unique */
    .services-list, .gallery {
        flex-direction: column; /* Empile verticalement */
        align-items: center; /* Centre les éléments */
    }
    
    /* Héro rétrécit sur mobile */
    .hero {
        padding: 3em 1em 2em 1em; /* Padding réduit */
    }
}

/* ========================================== */
/* CARROUSEL D'ACCUEIL */
/* ========================================== */

/* Conteneur du carrousel d'accueil */
.carousel-accueil {
    background: #fff; /* Fond blanc */
    border-radius: 24px; /* Coins bien arrondis */
    box-shadow: 0 8px 32px rgba(0,0,0,0.08); /* Ombre douce */
    margin: 2em auto 2em auto; /* Marges symétriques */
    max-width: 1100px; /* Limite de largeur */
    padding: 2.5em 1.3em 3em 1.3em; /* Padding interne */
    text-align: center; /* Centrage */
}

/* Titre du carrousel */
.carousel-title {
    font-size: 2em; /* Taille augmentée */
    color: #b3d1b3; /* Vert clair */
    margin-bottom: 0.2em; /* Marge inférieure petite */
    font-family: 'Montserrat', Arial, sans-serif; /* Police cohérente */
    font-weight: 700; /* Gras */
}

/* Sous-titre du carrousel */
.carousel-subtitle {
    font-size: 1.1em; /* Taille standard */
    color: #232423; /* Noir léger */
    margin-bottom: 1.5em; /* Marge inférieure */
}

/* ========================================== */
/* CONTENEUR ET TRACK DU CARROUSEL */
/* ========================================== */

/* Conteneur overflow pour carrousel */
.carousel-container {
    overflow: hidden; /* Masque le débordement */
    width: 100%; /* Largeur complète */
    max-width: 900px; /* Maximum fixe */
    margin: 0 auto; /* Centrage */
    position: relative; /* Positionnement relatif */
    border-radius: 18px; /* Coins arrondis */
    background: #dae6de; /* Fond vert clair */
    box-shadow: 0 4px 18px rgba(8, 145, 65, 0.76); /* Ombre verte */
}

/* Track qui contient les slides */
.carousel-track {
    display: flex; /* Flexbox pour slides côte à côte */
    transition: transform 0.7s cubic-bezier(.4,2,.3,1); /* Transition fluide */
    will-change: transform; /* Optimisation de performance */
}

/* Slide individuelle du carrousel */
.carousel-slide {
    min-width: 100%; /* Prend toute la largeur du conteneur */
    box-sizing: border-box; /* Inclut padding/border dans la largeur */
    position: relative; /* Positionnement relatif */
    padding: 0.8em 0 3em 0; /* Padding vertical */
}

/* Image du slide */
.carousel-slide img {
    width: 100%; /* Largeur complète */
    max-width: 900px; /* Maximum fixe */
    height: 480px; /* Hauteur fixe */
    object-fit: cover; /* Remplissage proportionnel */
    border-radius: 16px; /* Coins arrondis */
    box-shadow: 0 2px 12px rgba(8, 145, 65, 0.76); /* Ombre verte pour images carrousel */
    margin: 0 auto; /* Centrage */
    display: block; /* Bloc pour centrage */
}

/* ========================================== */
/* LÉGENDE DU CARROUSEL */
/* ========================================== */

/* Légende du slide */
.carousel-caption {
    margin-top: 1em; /* Marge supérieure */
    font-size: 1.1em; /* Taille légèrement augmentée */
    color: #232423; /* Noir léger */
    font-weight: 600; /* Semi-gras */
}

/* Sous-texte de la légende */
.carousel-caption span {
    display: block; /* Bloc pour nouvelle ligne */
    font-size: 0.95em; /* Taille plus petite */
    color: #1b3d1b; /* Vert foncé */
    font-weight: 400; /* Poids normal */
}

/* ========================================== */
/* RESPONSIVE POUR CARROUSEL */
/* ========================================== */

@media (max-width: 700px) {
    /* Image réduite sur mobile */
    .carousel-slide img {
        height: 160px; /* Hauteur comprimée */
        max-width: 98vw; /* Presque pleine largeur */
    }
    
    /* Padding réduit */
    .carousel-accueil {
        padding: 1em 0.2em 1.5em 0.2em; /* Padding minimal */
    }
}
/* ========================================== */
/* SECTION CONTACT */
/* ========================================== */

/* Section contact avec fond vert foncé */
.eldad1 {
    background: #074105; /* Vert très foncé */
    color: #fffafa; /* Blanc cassé */
    text-align: center; /* Centrage */
    padding: 10%; /* Padding généreux */
    margin-top: 10%; /* Marge supérieure */
}

/* ========================================== */
/* RÉINITIALISATION GLOBALE */
/* ========================================== */

/* Reset des styles par défaut du navigateur */
* {
    margin: 0; /* Pas de marge par défaut */
    padding: 0; /* Pas de padding par défaut */
    box-sizing: border-box; /* Inclut padding/border dans la largeur/hauteur */
    font-family: Arial, sans-serif; /* Police par défaut */
}

/* ========================================== */
/* STYLES GLOBAUX SUPPLÉMENTAIRES */
/* ========================================== */

/* Reset global du body */
body {
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; /* Police système */
    background: #f5f7fa; /* Fond très clair */
    color: #0c0c0c; /* Texte très foncé */
    line-height: 1.6; /* Hauteur de ligne pour lisibilité */
}

/* ========================================== */
/* CLASSE CONTACTENT (Contact) */
/* ========================================== */

/* Conteneur contact responsif */
.contactent {
    max-width: 1100px; /* Limite de largeur */
    margin: 60px auto; /* Centrage avec marges */
    padding: 50px; /* Padding interne */
    background: #126939; /* Vert foncé */
    border-radius: 12px; /* Coins arrondis */
    box-shadow: 0 10px 30px rgba(8, 145, 65, 0.76); /* Ombre verte */
    opacity: 0; /* Invisible au départ */
    transition: all 0.8s ease; /* Transition pour animation */
}

/* Animation visible pour section contact */
section.visible {
    opacity: 1; /* Devient visible */
}

/* ========================================== */
/* TITRES H2 ET H3 */
/* ========================================== */

/* Titre h2 */
h2 {
    font-size: 32px; /* Taille grande */
    margin-bottom: 25px; /* Marge inférieure */
    color: #06532d; /* Vert foncé */
    position: relative; /* Positionnement pour pseudo-éléments */
}

/* Barre décora tive sous les titres h2 (commentée) */
/*h2::after {
    content: "";
    width: 60px;
    height: 4px;
    background: #0e3a0a;
    position: absolute;
    bottom: -8px;
    left: 0;
    border-radius: 2px;
}*/

/* ========================================== */
/* PARAGRAPHES */
/* ========================================== */

/* Paragraphe général */
p {
    margin-bottom: 18px; /* Marge inférieure */
    font-size: 18px; /* Taille de police augmentée */
}

/* ========================================== */
/* SOUS-TITRE */
/* ========================================== */

/* Sous-titre de section */
.apropos-soustitre {
    font-weight: 600; /* Semi-gras */
    color: #0e3a0a; /* Vert foncé */
    margin-bottom: 20px; /* Marge inférieure */
}

/* ========================================== */
/* LISTES */
/* ========================================== */

/* Liste à puces */
ul {
    margin-top: 15px; /* Marge supérieure */
    padding-left: 20px; /* Padding gauche pour les puces */
}

/* Éléments de liste */
ul li {
    margin-bottom: 10px; /* Espace entre items */
    position: relative; /* Positionnement pour puces personnalisées */
    padding-left: 20px; /* Espace pour la puce personnalisée */
}

/* Puces stylisées avec crochet ✔ */
ul li::before {
    content: "✔"; /* Crochet Unicode */
    position: absolute; /* Positionnement absolu */
    left: 0; /* À gauche */
    color: #0e3a0a; /* Couleur verte */
    font-weight: bold; /* Gras */
}

/* ========================================== */
/* EFFETS HOVER POUR SECTIONS */
/* ========================================== */

/* Effet de levage au hover sur les sections */
section:hover {
    transform: translateY(-5px); /* Monte légèrement */
    box-shadow: 0 15px 40px rgba(8, 145, 65, 0.76); /* Ombre augmentée */
}

/* ========================================== */
/* RESPONSIVE POUR SECTIONS */
/* ========================================== */

@media (max-width: 768px) {
    /* Section rétrécie sur mobile */
    section {
        padding: 25px; /* Padding réduit */
        margin: 30px 15px; /* Marges réduites */
    }

    /* Titre h2 réduit */
    h2 {
        font-size: 22px; /* Taille réduite */
    }
}
 
/* ========================================== */
/* ICÔNES SOCIALES */
/* ========================================== */

/* Conteneur des icônes sociales */
.social-icons a {
    display: inline-block; /* Block inline pour spacing */
    margin: 15px; /* Marge autour */
    font-size: 30px; /* Taille des icônes */
    color: white; /* Couleur du texte blanc */
    width: 60px; /* Largeur fixe */
    height: 60px; /* Hauteur fixe */
    line-height: 60px; /* Centrage vertical */
    border-radius: 50%; /* Cercle parfait */
    text-align: center; /* Centrage du texte */
    transition: 0.3s; /* Transition pour hover */
}

/* WhatsApp - vert */
.whatsapp { 
    background: #25D366; /* Couleur offic elle WhatsApp */
}

/* Facebook - bleu */
.facebook { 
    background: #1877F2; /* Couleur officielle Facebook */
}

/* TikTok - noir */
.tiktok { 
    background: #000000; /* Noir */
}

/* Email - rouge */
.email { 
    background: #EA4335; /* Couleur officie lle Gmail */
}

/* Hover sur les icônes sociales */
.social-icons a:hover {
    transform: scale(1.2); /* Agrandissement */
    opacity: 0.8; /* Légère transparence */
}

/* ========================================== */
/* SECTION PARTENAIRES */
/* ========================================== */

/* Conteneur de la section partenaires */
.partners {
    position: relative; /* Positionnement relatif */
    height: 60vh; /* Hauteur relative à la fenêtre */
    overflow: hidden; /* Masque le débordement */
    padding: 20px; /* Padding */
}

/* Slide individuelle */
.slide {
    position: absolute; /* Positionnement absolu pour superposition */
    width: 100%; /* Largeur complète */
    height: 100%; /* Hauteur complète */
    background-size: cover; /* Couvre le conteneur */
    background-position: center; /* Centre l'image */
    opacity: 0; /* Invisible au départ */
    transition: opacity 1s ease-in-out; /* Transition douce */
    display: flex; /* Flexbox */
    align-items: center; /* Centrage vertical */
    justify-content: center; /* Centrage horizontal */
}

/* Image dans la slide */
.slide img {
    width: 90%; /* Largeur de 90% */
    height: auto; /* Hauteur automatique */
    max-width: 700px; /* Maximum fixe */
    object-fit: cover; /* Remplissage proportionnel */
}

/* Titre h1 directement dans la slide */
.slide > h1 {
    position: absolute; /* Positionnement absolu */
    top: 20px; /* 20px du haut */
    left: 50%; /* Centré horizontalement */
    transform: translateX(-50%); /* Centrage précis */
    color: #000; /* Noir */
    text-align: center; /* Centrage du texte */
    text-shadow: 0 2px 8px rgba(0,0,0,0.3); /* Ombre de texte */
    margin: 0; /* Pas de marge */
    z-index: 10; /* Au-dessus du contenu */
    font-size: 1.5em; /* Taille augmentée */
}

/* Slide active visible */
.slide.active {
    opacity: 1; /* Visible */
}

/* ========================================== */
/* OVERLAY DANS LA SLIDE */
/* ========================================== */

/* Overlay couvrant la slide */
.overlay {
    position: absolute; /* Positionnement absolu */
    width: 100%; /* Largeur complète */
    height: 100%; /* Hauteur complète */
    background: transparent; /* Transparent */
    display: flex; /* Flexbox */
    align-items: flex-end; /* Align en bas */
    justify-content: center; /* Centrage horizontal */
}

/* Titre h1 dans overlay */
.overlay h1 {
    color: #000; /* Noir */
    text-align: center; /* Centrage */
    text-shadow: 0 2px 8px rgba(0,0,0,0.5); /* Ombre texte */
    margin: 0 0 30px 0; /* Marges */
    font-size: 1.3em; /* Taille */
    padding: 0 20px; /* Padding horizontal */
}

/* Titre h2 dans overlay - visible et lisible */
.overlay h2 {
    color: #000; /* Noir */
    text-align: center; /* Centrage */
    text-shadow: 0 2px 8px rgba(0,0,0,0.5); /* Ombre texte */
    margin: 0 0 30px 0; /* Marges */
    font-size: 1.2em; /* Taille */
    padding: 15px 20px; /* Padding */
    background: rgba(255, 255, 255, 0.85); /* Blanc semi-transparent */
    border-radius: 8px; /* Coins arrondis */
    font-weight: 700; /* Gras */
}

/* ========================================== */
/* CONTENU ET ANIMATION */
/* ========================================== */

/* Conteneur de contenu positionné */
.content {
    position: absolute; /* Positionnement absolu */
    top: 50%; /* Au milieu verticalement */
    left: 10%; /* À 10% de la gauche */
    transform: translateY(-50%); /* Ajuste verticalement */
    color: white; /* Texte blanc */
    max-width: 500px; /* Largeur maximum */
    animation: fadeInUp 1s ease; /* Animation */
}

/* Titre h1 du contenu */
.content h1 {
    font-size: 1.8em; /* Taille augmentée */
    margin-bottom: 10px; /* Marge inférieure */
    color: #000; /* Noir */
}

/* Paragraphe du contenu */
.content p {
    font-size: 18px; /* Taille standard */
}

/* ========================================== */
/* BOUTONS DE NAVIGATION CARROUSEL */
/* ========================================== */

/* Conteneur des boutons */
.buttons {
    position: absolute; /* Positionnement absolu */
    width: 100%; /* Largeur complète */
    top: 50%; /* Au milieu verticalement */
    display: flex; /* Flexbox */
    justify-content: space-between; /* Écarte les boutons */
    padding: 0 20px; /* Padding horizontal */
}

/* Bouton de carrousel */
.buttons button {
    background: #06582f; /* Vert foncé */
    border: none; /* Pas de bordure */
    padding: 15px 20px; /* Padding */
    cursor: pointer; /* Curseur pointeur */
    color: white; /* Texte blanc */
    font-size: 20px; /* Taille grande */
    transition: 0.3s ease-in-out; /* Transition fluide */
    border-radius: 50%; /* Cercle parfait */
    width: 50px; /* Largeur fixe */
    height: 50px; /* Hauteur fixe */
    display: flex; /* Flexbox */
    align-items: center; /* Centrage vertical */
    justify-content: center; /* Centrage horizontal */
    font-weight: bold; /* Gras */
    box-shadow: 0 4px 12px rgba(6, 88, 47, 0.4); /* Ombre */
}

/* Hover sur boutons */
.buttons button:hover {
    background: #1b9c5a; /* Vert plus clair */
    transform: scale(1.1); /* Agrandissement */
    box-shadow: 0 6px 16px rgba(6, 88, 47, 0.6); /* Ombre augmentée */
}

/* ========================================== */
/* ANIMATION FADE IN UP */
/* ========================================== */

@keyframes fadeInUp {
    from {
        opacity: 0; /* Invisible */
    }
    to {
        opacity: 1; /* Visible */
    }
}

/* ========================================== */
/* SECTION NOTRE GROUPE */
/* ========================================== */

/* Conteneur du groupe */
.group {
    padding: 100px 30px; /* Padding large */
    text-align: center; /* Centrage */
    background: #f5f5f5; /* Fond gris clair */
}

/* Titre de la section groupe */
.group h2 {
    font-size: 32px; /* Taille grande */
    margin-bottom: 30px; /* Marge inférieure */
}

/* Image du groupe */
.group-main img {
    width: 80%; /* Largeur 80% */
    max-width: 800px; /* Maximum fixe */
    border-radius: 10px; /* Coins arrondis */
    margin-bottom: 40px; /* Marge inférieure */
}

/* ========================================== */
/* MEMBRES DU GROUPE */
/* ========================================== */

/* Grille des membres */
.members {
    display: grid; /* Grille CSS */
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); /* Colonnes responsives */
    gap: 20px; /* Espacement */
}

/* Carte d'un membre */
.member {
    background: white; /* Fond blanc */
    padding: 15px; /* Padding */
    border-radius: 10px; /* Coins arrondis */
    transition: transform 0.3s; /* Transition */
}

/* Image du membre */
.member img {
    width: 100%; /* Largeur complète */
    border-radius: 10px; /* Coins arrondis */
}

/* Titre du membre */
.member h4 {
    margin-top: 10px; /* Marge supérieure */
}

/* Hover sur membre */
.member:hover {
    transform: translateY(-10px); /* Monte au hover */
}

/* ========================================== */
/* CONTENEUR FLEXBOX */
/* ========================================== */

/* Conteneur flexbox */
.container {
    display: flex; /* Flexbox */
    align-items: center; /* Centrage vertical */
    gap: 30px; /* Espacement entre éléments */
}

/* ============================================ */
/* ANIMATIONS PROFESSIONNELLES AVANCÉES */
/* ============================================ */

/* ========================================== */
/* BARRE DE PROGRESSION SCROLL */
/* ========================================== */

/* Barre qui suit le scroll */
.scroll-progress-bar {
    position: fixed; /* Fixe en haut */
    top: 0; /* Au haut */
    left: 0; /* À la gauche */
    height: 4px; /* Hauteur fine */
    background: linear-gradient(90deg, #06582f 0%, #c9d4ce 100%); /* Dégradé vert */
    width: 0%; /* Commence à 0% et grandit */
    z-index: 999; /* Au-dessus du contenu */
    transition: width 0.3s ease-out; /* Transition fluide */
    box-shadow: 0 0 10px rgba(6, 88, 47, 0.5); /* Ombre */
}

/* ========================================== */
/* ANIMATIONS DE BASE */
/* ========================================== */

/* Animation Fade In Up */
@keyframes fadeInUp {
    from {
        opacity: 0; /* Invisible */
    }
    to {
        opacity: 1; /* Visible */
    }
}

/* Animation Slide In Left */
@keyframes slideInLeft {
    from {
        opacity: 0; /* Invisible */
        transform: translateX(-50px); /* Décalé de 50px à gauche */
    }
    to {
        opacity: 1; /* Visible */
        transform: translateX(0); /* Position normale */
    }
}

/* Animation Slide In Right */
@keyframes slideInRight {
    from {
        opacity: 0; /* Invisible */
        transform: translateX(50px); /* Décalé de 50px à droite */
    }
    to {
        opacity: 1; /* Visible */
        transform: translateX(0); /* Position normale */
    }
}

/* Animation Scale In */
@keyframes scaleIn {
    from {
        opacity: 0; /* Invisible */
        transform: scale(0.9); /* Petit */
    }
    to {
        opacity: 1; /* Visible */
        transform: scale(1); /* Taille normale */
    }
}

/* ============================================ */
/* SECTION LIKEMLEMBA - ACCÈS AU FONCIER */
/* ============================================ */

/* ========================================== */
/* TITRE ET LISTES */
/* ========================================== */

/* Titre principal h2 de la section LIKEMLEMBA */
.likemlemba-title {
    color: #1b3d1b; /* Vert foncé */
    margin-top: 2em; /* Marge supérieure */
}

/* Liste des difficultés rencontrées - style avec fond semi-transparent */
.challenges-list {
    text-align: left; /* Alignement gauche */
    display: inline-block; /* Block inline */
    background: rgba(255,255,255,0.7); /* Blanc semi-transparent */
    padding: 2em; /* Padding */
    border-radius: 10px; /* Coins arrondis */
    box-shadow: 0 4px 12px rgba(0,0,0,0.1); /* Ombre */
    margin: 1em auto; /* Marges */
    font-size: 1.2em; /* Augmenter la taille */
}

/* Éléments de la liste des défis */
.challenges-list li {
    margin-bottom: 20px; /* Espace entre items augmenté */
    line-height: 1.8; /* Hauteur de ligne augmentée */
    font-size: 1.1em; /* Augmenter la taille du texte */
    font-weight: 500; /* Rendre le texte un peu plus gras */
}

/* ========================================== */
/* BOÎTES GRAPHIQUES */
/* ========================================== */

/* Conteneur blanc pour les graphiques explicatifs */
.likemlemba-graphic-box {
    background: white; /* Fond blanc */
    padding: 2em; /* Padding */
    border-radius: 10px; /* Coins arrondis */
    margin: 1.5em 0; /* Marges verticales */
    box-shadow: 0 4px 12px rgba(0,0,0,0.1); /* Ombre */
}

/* Titre des graphiques/exemples (h3) */
.likemlemba-graphic-title {
    text-align: center; /* Centrage */
    color: #1b3d1b; /* Vert foncé */
    margin-bottom: 1.5em; /* Marge inférieure */
}

/* ========================================== */
/* OPTIONS DE PAIEMENT */
/* ========================================== */

/* Conteneur flexbox pour les 4 options de paiement */
.payment-options-container {
    display: flex; /* Flexbox */
    justify-content: space-around; /* Écarte les éléments */
    flex-wrap: wrap; /* Wraps sur mobile */
    gap: 1.5em; /* Espacement */
    margin: 2em 0; /* Marges verticales */
}

/* Carte individuelle pour chaque option de paiement */
.payment-card {
    color: white; /* Texte blanc */
    padding: 1.5em; /* Padding */
    border-radius: 8px; /* Coins arrondis */
    text-align: center; /* Centrage */
    flex: 1; /* Flexibilité */
    min-width: 200px; /* Largeur minimale */
}

/* Carte pour paiement comptant (vert foncé) */
.payment-card-cash {
    background: linear-gradient(135deg, #06582f 0%, #0d7f47 100%); /* Dégradé vert */
}

/* Carte pour 3 mois (vert moyen) */
.payment-card-3months {
    background: linear-gradient(135deg, #1b9c5a 0%, #2eb87b 100%); /* Dégradé vert moyen */
}

/* Carte pour 5 mois (vert clair) */
.payment-card-5months {
    background: linear-gradient(135deg, #2eb87b 0%, #4cd996 100%); /* Dégradé vert clair */
}

/* Carte pour 7 mois (vert très clair) */
.payment-card-7months {
    background: linear-gradient(135deg, #4cd996 0%, #68dfa8 100%); /* Dégradé vert très clair */
}

/* Titre de chaque carte de paiement (h4) */
.payment-card h4 {
    margin-top: 0; /* Pas de marge supérieure */
    font-size: 1.1em; /* Taille augmentée */
}

/* Montant ou nombre de versements (gros texte) */
.payment-card-amount {
    font-size: 1.2em; /* Taille augmentée */
    font-weight: bold; /* Gras */
    margin: 0.5em 0; /* Marges */
}

/* Description détaillée de chaque option */
.payment-card-details {
    font-size: 0.95em; /* Taille légèrement réduite */
    line-height: 1.5; /* Hauteur de ligne */
}

/* Petit texte explicatif */
.payment-card-description {
    font-size: 0.9em; /* Taille réduite */
    opacity: 0.9; /* Légèrement transparent */
    margin-top: 0.5em; /* Marge supérieure */
}

/* ========================================== */
/* COMPARAISON DE PRIX */
/* ========================================== */

/* Grille 2 colonnes pour les exemples de prix */
.price-comparison-grid {
    display: grid; /* Grille CSS */
    grid-template-columns: 1fr 1fr; /* Deux colonnes égales */
    gap: 1em; /* Espacement augmenté de 20% */
    margin: 1.2em 0; /* Marges verticales augmentées */
}

/* Colonne de comparaison de prix - paiement comptant */
.price-column {
    background: #f0f8f0; /* Fond vert très clair */
    padding: 1em; /* Padding augmenté de 20% */
    border-radius: 8px; /* Coins arrondis */
    border-left: 4px solid; /* Bordure gauche colorée */
    font-size: 1em; /* Taille de police augmentée de 20% */
}

/* Colonne comptant (vert foncé) */
.price-column-cash {
    border-left-color: #06582f; /* Couleur bordure vert foncé */
}

/* Colonne échelonnée (vert moyen) */
.price-column-installment {
    border-left-color: #1b9c5a; /* Couleur bordure vert moyen */
}

/* Titre colonne h4 */
.price-column h4 {
    color: inherit; /* Hérite la couleur */
    margin-top: 0; /* Pas de marge supérieure */
    margin-bottom: 0.6em; /* Marge augmentée */
    font-size: 1.1em; /* Taille augmentée de 20% */
}

/* Valeur principale du prix */
.price-value {
    font-weight: bold; /* Gras */
    font-size: 1.15em; /* Taille augmentée */
}

/* Valeur principale du prix */
.price-value {
    font-weight: bold; /* Gras */
    font-size: 1.2em; /* Taille augmentée */
}

/* Valeur en couleur de colonne */
.price-value-primary {
    color: #06582f; /* Vert foncé */
}

.price-value-secondary {
    color: #1b9c5a; /* Vert moyen */
}

/* Économie en couleur verte */
.savings-amount {
    color: green; /* Vert */
    font-weight: bold; /* Gras */
}

/* Petit texte dans les colonnes de prix */
.price-column-note {
    font-size: 0.9em; /* Taille réduite */
    opacity: 0.8; /* Transparent */
}

/* Paragraphes dans les colonnes de prix */
.price-column p {
    margin: 0.4em 0; /* Marges augmentées de 20% */
    font-size: 1.02em; /* Taille augmentée de 20% */
}

/* ========================================== */
/* BOÎTE AVANTAGES */
/* ========================================== */

/* Conteneur "Avantages du système" - gradient vert foncé */
.advantages-box {
    background: linear-gradient(135deg, #06582f 0%, #1b3d1b 100%); /* Dégradé vert */
    color: white; /* Texte blanc */
    padding: 2em; /* Padding */
    border-radius: 10px; /* Coins arrondis */
    margin: 1.5em 0; /* Marges verticales */
}

/* Titre des avantages h3 */
.advantages-box h3 {
    text-align: center; /* Centrage */
    margin-top: 0; /* Pas de marge supérieure */
}

/* Grille 2 colonnes pour les avantages */
.advantages-grid {
    display: grid; /* Grille CSS */
    grid-template-columns: 1fr 1fr; /* Deux colonnes */
    gap: 1.5em; /* Espacement */
    margin: 1.5em 0; /* Marges verticales */
}

/* Carte d'avantage individuelle */
.advantage-card {
    background: rgba(255,255,255,0.1); /* Fond blanc transparent */
    padding: 1em; /* Padding */
    border-radius: 8px; /* Coins arrondis */
}

/* Texte dans les cartes d'avantage */
.advantage-card p {
    margin: 0; /* Pas de marge */
    text-align: left; /* Alignement gauche */
    font-size: 0.95em; /* Taille légèrement réduite */
}

/* ========================================== */
/* TAGLINE ET RESPONSIVE */
/* ========================================== */

/* Texte de conclusion - tagline LIKEMLEMBA */
.likemlemba-tagline {
    text-align: center; /* Centrage */
    font-size: 1.1em; /* Taille augmentée */
    margin-top: 2em; /* Marge supérieure */
    color: #1b3d1b; /* Vert foncé */
    font-weight: bold; /* Gras */
}

/* Responsive pour les grid (2 colonnes → 1 colonne sur mobile) */
@media (max-width: 768px) {
    /* Prix à une colonne */
    .price-comparison-grid {
        grid-template-columns: 1fr; /* Une colonne */
    }

    /* Avantages à une colonne */
    .advantages-grid {
        grid-template-columns: 1fr; /* Une colonne */
    }

    /* Cartes de paiement en colonne */
    .payment-options-container {
        flex-direction: column; /* Empile verticalement */
    }

    /* Carte de paiement pleine largeur */
    .payment-card {
        min-width: 100%; /* Prend toute la largeur */
    }
}

/* ========================================== */
/* STYLES TEXTE UTILITAIRE */
/* ========================================== */

/* Paragraphe de prix de base centré */
.price-header {
    text-align: center; /* Centrage */
    font-size: 1.1em; /* Taille augmentée */
}

/* Espacement pour les éléments strong */
strong {
    display: block; /* Block pour créer du saut de ligne */
    margin-top: 2em; /* Marge supérieure pour l'écart */
    margin-bottom: 0.8em; /* Marge inférieure */
    font-weight: 700; /* Gras */
}

/* ========================================== */
/* CENTRAGE GLOBAL DE TOUS LES TEXTES */
/* ========================================== */

/* Centrer tous les titres */
h1, h2, h3, h4, h5, h6 {
    text-align: center; /* Centrage horizontal */
    margin-left: auto; /* Centrage avec marges */
    margin-right: auto; /* Centrage avec marges */
}

/* Centrer tous les paragraphes */
p {
    text-align: center; /* Centrage horizontal */
    margin-left: auto; /* Centrage avec marges */
    margin-right: auto; /* Centrage avec marges */
}

/* Centrer toutes les listes */
ul, ol {
    text-align: center; /* Centrage horizontal */
    display: inline-block; /* Permet le centrage des listes */
    margin-left: auto; /* Centrage avec marges */
    margin-right: auto; /* Centrage avec marges */
}

/* Centrer les éléments de liste */
li {
    text-align: center; /* Centrage du texte à l'intérieur */
    margin-left: auto; /* Centrage */
    margin-right: auto; /* Centrage */
}

/* Centrer le contenu des sections */
section {
    text-align: center; /* Centrage du texte */
}

/* Centrer les conteneurs de contact */
.contact-infos {
    text-align: center; /* Centrage */
    margin: 0 auto; /* Centrage horizontal */
    display: flex; /* Flexbox pour alignment */
    justify-content: center; /* Centrage horizontal */
    flex-wrap: wrap; /* Wrapping sur mobile */
    gap: 2em; /* Espacement entre éléments */
}

/* Centrer les informations de contact */
.contact-infos p {
    text-align: center; /* Centrage */
    margin: 0; /* Pas de marge */
    flex: 1; /* Flexibilité */
    min-width: 200px; /* Largeur minimale */
}

/* Centrer les icônes sociales */
.social-icons {
    text-align: center; /* Centrage */
    display: flex; /* Flexbox */
    justify-content: center; /* Centrage horizontal */
    flex-wrap: wrap; /* Wrapping */
    margin: 1em auto; /* Marges centrées */
}

/* Centrer le contenu des sections mission */
.mission-services {
    text-align: center; /* Centrage */
    list-style: none; /* Pas de puces */
    padding: 0; /* Pas de padding */
    font-size: 1.2em; /* Augmenter la taille */
    display: grid; /* Grille CSS */
    grid-template-columns: repeat(3, 1fr); /* 3 colonnes */
    gap: 2em; /* Espacement entre éléments */
    max-width: 1200px; /* Largeur maximum */
    margin: 2em auto; /* Centrage */
}

/* Centrer les éléments de mission */
.mission-services li {
    text-align: center; /* Centrage */
    margin: 0; /* Pas de marge */
    max-width: 100%; /* Largeur complète */
    padding: 1em; /* Padding */
    font-size: 1.05em; /* Augmenter la taille du texte */
    line-height: 1.8; /* Augmenter l'hauteur de ligne pour lisibilité */
    background: rgba(255, 255, 255, 0.5); /* Fond semi-transparent */
    border-radius: 10px; /* Coins arrondis */
}

/* Titre h3 des avantages avec alignement center et margin */
.advantages-box h3 {
    text-align: center; /* Centrage */
    margin-top: 0; /* Pas de marge supérieure */
}

/* Titres h4 dans les colonnes de prix - couleurs spécifiques */
.price-column-cash h4 {
    color: #06582f; /* Vert foncé */
}

.price-column-installment h4 {
    color: #1b9c5a; /* Vert moyen */
}

/* Texte en gras pour les montants */
.bold-text {
    font-weight: bold; /* Gras */
}

/* ========================================== */
/* ANIMATIONS AVANCÉES */
/* ========================================== */

/* Animation pulse - pulsation */
@keyframes pulse {
    0%, 100% { 
        opacity: 1; /* Visible */
    }
    50% { 
        opacity: 0.7; /* Semi-transparent */
    }
}

/* Animation float - flottement */
@keyframes float {
    0%, 100% { 
        transform: translateY(0px); /* Position normale */
    }
    50% { 
        transform: translateY(-10px); /* Monte de 10px */
    }
}

/* Animation glow - lueur */
@keyframes glow {
    0%, 100% {
        box-shadow: 0 0 5px rgba(6, 88, 47, 0.3); /* Ombre faible */
    }
    50% {
        box-shadow: 0 0 20px rgba(6, 88, 47, 0.6); /* Ombre forte */
    }
}

/* ========================================== */
/* ÉLÉMENTS STAGGERED */
/* ========================================== */

/* Éléments animés avec délai échelonné */
.staggered-item {
    animation: fadeInUp 0.6s ease-out forwards; /* Animation avec délai ajusté en JS */
}

/* Élément animé général */
.animate-in {
    animation: fadeInUp 0.8s ease-out; /* Animation fade in up */
}

/* ========================================== */
/* AMÉLIORATIONS DES HOVER SUR IMAGES/VIDÉOS */
/* ========================================== */

/* Amélioration des hovering sur images et vidéos */
section img, section video {
    transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1), 
                filter 0.4s ease-out,
                box-shadow 0.4s ease-out; /* Transitions multiples fluides */
    will-change: transform; /* Optimisation performance */
}

/* Hover sur images et vidéos */
section img:hover, section video:hover {
    transform: scale(1.08); /* Zoom léger */
    filter: brightness(1.15) drop-shadow(0 8px 20px rgba(6, 88, 47, 0.4)); /* Luminosité et ombre */
}

/* ========================================== */
/* ANIMATION DES SERVICES */
/* ========================================== */

/* Animation des services */
.service {
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1); /* Transition fluide */
    position: relative; /* Positionnement relatif */
}

/* Pseudo-élément pour effet gradient au hover */
.service::before {
    content: ''; /* Contenu vide */
    position: absolute; /* Positionnement absolu */
    top: 0; /* Haut */
    left: 0; /* Gauche */
    right: 0; /* Droite */
    bottom: 0; /* Bas */
    background: linear-gradient(135deg, #06582f 0%, transparent 100%); /* Dégradé vert */
    opacity: 0; /* Invisible au départ */
    transition: opacity 0.4s ease-out; /* Transition */
    border-radius: 16px; /* Coins arrondis */
    z-index: -1; /* Derrière le service */
}

/* Pseudo-élément visible au hover */
.service:hover::before {
    opacity: 0.1; /* Visible avec transparence */
}

/* Hover sur service */
.service:hover {
    transform: scale(1.05); /* Zoom léger */
    box-shadow: 0 15px 40px rgba(6, 88, 47, 0.2); /* Ombre augmentée */
}

/* ========================================== */
/* TITRES ET PARAGRAPHES ANIMÉS */
/* ========================================== */

/* Titres avec animation */
h1, h2, h3 {
    animation: fadeInUp 0.8s ease-out; /* Animation d'apparition */
}

/* Paragraphes avec animation subtile */
p {
    animation: fadeInUp 0.8s ease-out; /* Animation d'apparition */
}

/* ========================================== */
/* EFFETS DE BRILLANCE SUR ÉLÉMENTS CLIQUABLES */
/* ========================================== */

/* Effet de brillance sur hover pour les éléments cliquables */
a, button, .btn {
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); /* Transition fluide */
    position: relative; /* Positionnement relatif */
}

/* Hover sur liens, boutons et .btn */
button:hover, .btn:hover, a:hover {
    text-shadow: 0 0 10px rgba(6, 88, 47, 0.3); /* Ombre texte */
}

/* ========================================== */
/* RESPONSIVE POUR ANIMATIONS */
/* ========================================== */

@media (max-width: 768px) {
    /* Barre scroll réduite */
    .scroll-progress-bar {
        height: 3px; /* Hauteur réduite */
    }
    
    /* Images et vidéos au hover sur mobile */
    section img:hover, section video:hover {
        transform: scale(1.05) translateY(-5px); /* Zoom et mouvement réduits */
    }
    
    /* Services au hover sur mobile */
    .service:hover {
        transform: scale(1.02) translateY(-5px); /* Zoom et mouvement réduits */
    }
}

/* Mode dark-aware (optionnel) - respecte les préférences utilisateur */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important; /* Animation minimale */
        animation-iteration-count: 1 !important; /* Une seule itération */
        transition-duration: 0.01ms !important; /* Transition minimale */
    }
}

/* ========================================== */
/* GALERIE D'IMAGES */
/* ========================================== */

/* Galerie d'images - 2 photos et plus */
.images-gallery {
    display: flex; /* Flexbox pour images côte à côte */
    justify-content: center; /* Centrage horizontal */
    gap: 1.5em; /* Espacement entre images */
    flex-wrap: wrap; /* Retour à la ligne sur mobile */
    margin: 2em 0; /* Marges verticales */
}

/* Images de galerie - taille légèrement petite */
.gallery-image {
    width: 100px; /* Largeur fixe */
    height: 150px; /* Hauteur fixe */
    object-fit: cover; /* Remplissage proportionnel */
    border-radius: 12px; /* Coins arrondis */
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.15); /* Ombre subtile */
    transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1), 
                box-shadow 0.4s ease-out,
                filter 0.4s ease-out; /* Transitions multiples fluides */
}

/* Effet hover sur les images de galerie */
.gallery-image:hover {
    transform: scale(1.08) translateY(-5px); /* Zoom et mouvement */
    box-shadow: 0 12px 30px rgba(6, 88, 47, 0.25); /* Ombre augmentée */
    filter: brightness(1.1); /* Luminosité augmentée */
}

/* ========================================== */
/* RESPONSIVE POUR GALERIE */
/* ========================================== */

@media (max-width: 768px) {
    /* Galerie empilée verticalement sur mobile */
    .images-gallery {
        flex-direction: column; /* Empile verticalement */
        align-items: center; /* Centre les images */
        gap: 1.2em; /* Espacement réduit */
    }
    
    /* Images agrandies sur mobile */
    .gallery-image {
        width: 180px; /* Largeur augmentée */
        height: 135px; /* Hauteur augmentée */
    }
}

/* ========================================== */
/* ========================================== */
/* RESPONSIVE COMPLET POUR TOUS LES APPAREILS */
/* ========================================== */
/* ========================================== */

/* ========================================== */
/* MOBILE PORTRAIT - 320px à 480px */
/* ========================================== */
/* Téléphones Android et iPhone petits écrans */

@media (max-width: 480px) {
    /* Réinitialisation globale */
    * {
        box-sizing: border-box;
    }

    /* Body - fond et padding */
    body {
        font-size: 14px; /* Taille de police réduite */
        padding-top: 50px; /* Espace pour nav fixe */
        background: #97dd97;
        margin: 0;
        padding: 0;
    }

    /* Navigation - layout compact */
    nav {
        min-height: 50px;
        padding: 0.5em 0;
    }

    nav ul {
        flex-direction: column; /* Empile verticalement si nécessaire */
        flex-wrap: wrap;
    }

    nav ul li {
        margin: 0 0.5em; /* Espacement réduit */
        display: inline-block;
    }

    nav ul li a {
        font-size: 0.8em; /* Police réduite */
        padding: 0.3em 0.5em;
        letter-spacing: 0.5px;
    }

    /* Hero - compact */
    .hero {
        padding: 2em 1em;
        min-height: 250px;
        border-radius: 0;
    }

    .hero h1 {
        font-size: 1.8em;
        margin-bottom: 0.3em;
    }

    .hero p {
        font-size: 1.1em;
        margin-bottom: 1em;
    }

    /* Sections - pleine largeur */
    section {
        padding: 1.5em 0.8em;
        margin: 1em 0;
        border-radius: 8px;
        background-color: #f0f8f0;
    }

    section h1 {
        font-size: 1.5em;
        margin-bottom: 0.5em;
    }

    section h2 {
        font-size: 1.3em;
        margin: 1em 0 0.5em 0;
    }

    section h3 {
        font-size: 1.1em;
    }

    section p {
        font-size: 0.95em;
        line-height: 1.5;
        margin: 0 auto 0.5em auto;
    }

    section ul li {
        font-size: 0.9em;
        margin-bottom: 0.5em;
    }

    /* Images - pleine largeur */
    section img {
        width: 100%;
        margin: 0.8em 0;
        border-radius: 8px;
    }

    .section-img {
        height: 200px;
        margin: 0 0 1.5em 0;
        border-radius: 12px;
    }

    .service-img {
        width: 100%;
        height: 200px;
        margin: 0 0 0.8em 0;
        border-radius: 10px;
    }

    /* Carrousel - compact */
    .carousel-accueil {
        padding: 1em 0.5em 1.5em 0.5em;
        margin: 1em 0;
        border-radius: 12px;
    }

    .carousel-title {
        font-size: 1.4em;
        margin-bottom: 0;
    }

    .carousel-subtitle {
        font-size: 0.9em;
        margin-bottom: 1em;
    }

    .carousel-container {
        max-width: 100%;
        border-radius: 10px;
    }

    .carousel-slide img {
        height: 200px;
        max-width: 100%;
        border-radius: 10px;
    }

    .carousel-caption {
        font-size: 0.9em;
        margin-top: 0.5em;
    }

    .carousel-caption span {
        font-size: 0.8em;
    }

    /* Services - grille 1 colonne */
    .services-list {
        flex-direction: column;
        gap: 1em;
    }

    .service {
        padding: 1.5em 1em;
        flex: 1 1 100%;
        min-width: 100%;
        max-width: 100%;
        margin: 0.5em 0;
    }

    /* Groupe - grille 2 colonnes */
    .members {
        grid-template-columns: repeat(2, 1fr);
        gap: 1em;
    }

    .member {
        padding: 0.8em;
        border-radius: 8px;
    }

    .member img {
        border-radius: 8px;
    }

    .member h4 {
        font-size: 0.8em;
        margin-top: 0.5em;
    }

    /* Partenaires - réduction */
    .partners {
        height: 40vh;
        padding: 1em;
    }

    .slide img {
        width: 100%;
        max-width: 100%;
    }

    .slide > h1 {
        font-size: 1.2em;
        top: 10px;
    }

    .overlay h2 {
        font-size: 0.95em;
        padding: 10px 15px;
        margin-bottom: 15px;
    }

    .buttons button {
        width: 40px;
        height: 40px;
        font-size: 16px;
        padding: 10px;
    }

    /* Contact - compression */
    .eldad {
        padding: 1.5em 1em;
    }

    .eldad h2 {
        font-size: 1.2em;
    }

    .contact-infos {
        padding: 1em;
    }

    .contact-infos p {
        font-size: 0.9em;
    }

    /* Icônes sociales */
    .social-icons a {
        width: 50px;
        height: 50px;
        line-height: 50px;
        font-size: 24px;
        margin: 10px;
    }

    /* Boutons */
    .btn {
        padding: 0.6em 1.5em;
        font-size: 0.9em;
    }

    /* Footer */
    footer {
        padding: 1em 0.5em;
        font-size: 0.9em;
    }

    /* Paiements et grilles */
    .payment-options-container {
        flex-direction: column;
        gap: 1em;
        margin: 1.5em 0;
    }

    .payment-card {
        padding: 1em;
        min-width: 100%;
    }

    .payment-card h4 {
        font-size: 1em;
    }

    .price-comparison-grid {
        grid-template-columns: 1fr;
        gap: 1em;
        margin: 1.5em 0;
    }

    .advantages-grid {
        grid-template-columns: 1fr;
        gap: 1em;
    }

    .advantage-card {
        padding: 0.8em;
    }

    .advantage-card p {
        font-size: 0.85em;
    }

    /* Header animation */
    header {
        z-index: 100;
    }

    /* Scroll progress bar */
    .scroll-progress-bar {
        height: 2px;
    }

    /* Formulaire */
    form {
        max-width: 100%;
        gap: 0.8em;
    }

    form input, form textarea {
        padding: 0.6em;
        font-size: 0.9em;
    }

    form button {
        padding: 0.8em;
        font-size: 0.9em;
    }
}

/* ========================================== */
/* MOBILE LANDSCAPE & PETITES TABLETTES - 481px à 768px */
/* ========================================== */
/* Téléphones en mode paysage et petites tablettes */

@media (min-width: 481px) and (max-width: 768px) {
    /* Body */
    body {
        font-size: 15px;
        padding-top: 55px;
    }

    /* Navigation */
    nav {
        min-height: 50px;
    }

    nav ul li {
        margin: 0 0.8em;
    }

    nav ul li a {
        font-size: 0.85em;
    }

    /* Hero */
    .hero {
        padding: 3em 1.5em;
        min-height: 300px;
    }

    .hero h1 {
        font-size: 2em;
    }

    .hero p {
        font-size: 1.3em;
    }

    /* Sections */
    section {
        padding: 2em 1.5em;
        margin: 1.5em 0;
    }

    section h1 {
        font-size: 1.6em;
    }

    section h2 {
        font-size: 1.4em;
    }

    section p {
        font-size: 1em;
    }

    /* Images */
    section img {
        margin: 1em 0;
    }

    .section-img {
        height: 280px;
    }

    .service-img {
        height: 250px;
    }

    /* Carrousel */
    .carousel-slide img {
        height: 250px;
    }

    .carousel-title {
        font-size: 1.6em;
    }

    /* Services - 2 colonnes */
    .services-list {
        grid-template-columns: repeat(2, 1fr);
        gap: 1.5em;
    }

    .service {
        padding: 1.8em;
    }

    /* Groupe - 2 colonnes */
    .members {
        grid-template-columns: repeat(2, 1fr);
        gap: 1.2em;
    }

    /* Partenaires */
    .partners {
        height: 50vh;
    }

    /* Icônes sociales */
    .social-icons a {
        width: 55px;
        height: 55px;
        line-height: 55px;
        font-size: 26px;
        margin: 12px;
    }

    /* Paiements */
    .payment-options-container {
        gap: 1.2em;
    }

    .payment-card {
        flex: 1;
        min-width: 45%;
    }

    .price-comparison-grid {
        grid-template-columns: 1fr 1fr;
        gap: 1.5em;
    }

    .advantages-grid {
        grid-template-columns: 1fr 1fr;
        gap: 1.2em;
    }
}

/* ========================================== */
/* TABLETTE - 769px à 1024px */
/* ========================================== */
/* Tablettes standard (iPad, etc) */

@media (min-width: 769px) and (max-width: 1024px) {
    /* Body */
    body {
        font-size: 16px;
        padding-top: 60px;
    }

    /* Navigation */
    nav ul li {
        margin: 0 1.2em;
    }

    nav ul li a {
        font-size: 0.9em;
    }

    /* Hero */
    .hero {
        padding: 5em 2em;
        min-height: 350px;
    }

    .hero h1 {
        font-size: 2.3em;
    }

    .hero p {
        font-size: 1.4em;
    }

    /* Sections */
    section {
        padding: 2.5em 2em;
        margin: 2em 0;
    }

    section h1 {
        font-size: 1.8em;
    }

    section h2 {
        font-size: 1.6em;
    }

    section p {
        font-size: 1.05em;
    }

    /* Images */
    .section-img {
        height: 350px;
    }

    .service-img {
        height: 300px;
    }

    /* Carrousel */
    .carousel-accueil {
        padding: 2em 1.5em 2.5em 1.5em;
    }

    .carousel-slide img {
        height: 300px;
    }

    .carousel-title {
        font-size: 1.8em;
    }

    /* Services - 2-3 colonnes */
    .services-list {
        grid-template-columns: repeat(2, 1fr);
        gap: 2em;
    }

    .service {
        padding: 2em 1.5em;
    }

    /* Groupe - 3 colonnes */
    .members {
        grid-template-columns: repeat(3, 1fr);
        gap: 1.5em;
    }

    /* Partenaires */
    .partners {
        height: 60vh;
        padding: 2em;
    }

    /* Icônes sociales */
    .social-icons a {
        width: 60px;
        height: 60px;
        line-height: 60px;
        font-size: 28px;
        margin: 15px;
    }

    /* Paiements */
    .payment-card {
        flex: 1;
        min-width: 22%;
    }

    .advantages-grid {
        grid-template-columns: 1fr 1fr;
        gap: 2em;
    }
}

/* ========================================== */
/* ORDINATEUR - 1025px à 1920px */
/* ========================================== */
/* Ordinateurs et moniteurs standard */

@media (min-width: 1025px) and (max-width: 1920px) {
    /* Body */
    body {
        font-size: 17px;
    }

    /* Navigation */
    nav ul li {
        margin: 0 1.5em;
    }

    nav ul li a {
        font-size: 1em;
    }

    /* Hero */
    .hero {
        padding: 8em 3em;
        min-height: 450px;
    }

    .hero h1 {
        font-size: 2.5em;
    }

    .hero p {
        font-size: 1.6em;
    }

    /* Sections */
    section {
        padding: 3.5em 2.5em;
        margin: 2.5em 0;
    }

    section h1 {
        font-size: 2em;
    }

    section h2 {
        font-size: 1.8em;
    }

    section p {
        font-size: 1.1em;
        line-height: 1.7;
    }

    /* Images */
    .section-img {
        height: 450px;
    }

    .service-img {
        height: 400px;
    }

    /* Carrousel */
    .carousel-accueil {
        padding: 3em 2em;
    }

    .carousel-slide img {
        height: 400px;
    }

    .carousel-title {
        font-size: 2em;
    }

    /* Services - 3 colonnes */
    .services-list {
        grid-template-columns: repeat(3, 1fr);
        gap: 2.5em;
    }

    .service {
        padding: 2.5em 2em;
    }

    /* Groupe - 4 colonnes */
    .members {
        grid-template-columns: repeat(4, 1fr);
        gap: 2em;
    }

    /* Partenaires */
    .partners {
        height: 70vh;
    }

    /* Paiements */
    .payment-card {
        flex: 1;
        min-width: 20%;
    }

    .advantages-grid {
        grid-template-columns: 1fr 1fr;
        gap: 2.5em;
    }
}

/* ========================================== */
/* GRAND ÉCRAN - 1921px et plus */
/* ========================================== */

@media (min-width: 1921px) {
    /* Body */
    body {
        font-size: 18px;
    }

    /* Sections */
    section {
        padding: 4.5em 3em;
        margin-left: auto;
        margin-right: auto;
        max-width: 1400px;
    }

    section h1 {
        font-size: 2.2em;
    }

    section h2 {
        font-size: 2em;
    }

    section p {
        font-size: 1.2em;
        line-height: 1.8;
    }

    /* Hero */
    .hero {
        padding: 10em 4em;
        min-height: 550px;
    }

    .hero h1 {
        font-size: 2.8em;
    }

    .hero p {
        font-size: 1.8em;
    }

    /* Images */
    .section-img {
        height: 550px;
    }

    .service-img {
        height: 480px;
    }

    /* Carrousel */
    .carousel-slide img {
        height: 480px;
    }

    /* Services - 4 colonnes */
    .services-list {
        grid-template-columns: repeat(4, 1fr);
        gap: 3em;
    }

    .service {
        padding: 3em 2.5em;
    }

    /* Groupe - 4 colonnes */
    .members {
        grid-template-columns: repeat(4, 1fr);
        gap: 2.5em;
    }

    /* Partenaires */
    .partners {
        height: 80vh;
    }

    .buttons button {
        width: 60px;
        height: 60px;
        font-size: 24px;
    }
}

/* ========================================== */
/* OPTIMISATIONS SUPPLÉMENTAIRES */
/* ========================================== */

/* Orientation paysage sur mobile */
@media (max-height: 600px) and (orientation: landscape) {
    body {
        padding-top: 45px;
    }

    nav {
        min-height: 45px;
    }

    .hero {
        padding: 2em 1em;
        min-height: 200px;
    }

    section {
        padding: 1.5em 1em;
        margin: 1em 0;
    }

    .carousel-slide img {
        height: 150px;
    }

    .service-img {
        height: 150px;
    }
}

/* Responsive hover - désactiver hover sur tactile */
@media (hover: none) {
    /* Les effets hover ne s'appliquent pas sur tactile */
    .service:hover {
        transform: none;
        box-shadow: 0 6px 24px rgba(14,160,75,0.10);
    }

    section img:hover,
    section video:hover {
        transform: none;
        filter: none;
    }

    .gallery-image:hover {
        transform: none;
    }
}