/* Hero Section */ /* Titre de section : zone “hero” en haut de la page */
.hero { /* Sélecteur CSS de la section hero */
    padding: 120px 0 80px; /* Espacement interne (haut, droite/gauche, bas) */
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.781) 0%, rgba(255, 255, 255, 0.562) 100%), url('../Images/fond/fond\ 1.jpg'); /* Dégradé blanc + image de fond */
} /* Fin du bloc .hero */

.hero-container { /* Conteneur interne du hero */
    display: grid; /* Active une grille CSS */
    grid-template-columns: 1fr 1fr; /* 2 colonnes de largeur égale */
    gap: 60px; /* Espace entre les colonnes */
    position: relative; /* Référence pour éléments positionnés dedans */
} /* Fin du bloc .hero-container */

/* Contenu sur la GAUCHE */ /* Commentaire : partie texte à gauche */
.hero-content { /* Bloc de contenu texte */
    text-align: left; /* Aligne le texte à gauche */
} /* Fin du bloc .hero-content */

.hero-badge { /* Badge (étiquette) au-dessus du titre */
    display: inline-block; /* Garde le badge à la taille du contenu */
    background: #2c5530; /* Couleur de fond verte */
    color: white; /* Couleur du texte */
    padding: 8px 20px; /* Marges internes */
    border-radius: 20px; /* Arrondi pour effet “pill” */
    margin-bottom: 25px; /* Espace sous le badge */
    font-size: 0.9em; /* Taille du texte */
    font-weight: 600; /* Texte semi-gras */
    letter-spacing: 0.5px; /* Espacement entre lettres */
} /* Fin du bloc .hero-badge */

.hero h1 { /* Titre principal dans le hero */
    font-size: 2.8em; /* Taille du titre */
    color: #2c5530; /* Couleur verte */
    margin-bottom: 25px; /* Espace sous le titre */
    font-weight: 700; /* Gras */
    line-height: 1.2; /* Hauteur de ligne du titre */
} /* Fin du bloc .hero h1 */

.hero p { /* Paragraphe dans le hero */
    font-size: 1.2em; /* Taille du texte */
    color: black; /* Couleur du texte */
    margin-bottom: 35px; /* Espace sous le paragraphe */
    line-height: 1.6; /* Hauteur de ligne pour lisibilité */
} /* Fin du bloc .hero p */

/* Cartes sur la DROITE */ /* Commentaire : zone images/cartes à droite */
.hero-images { /* Conteneur des images du hero */
    position: relative; /* Permet de positionner les cartes en absolu */
    width: 100%; /* Prend toute la largeur dispo */
    max-width: 800px; /* Limite la largeur max */
    height: 400px; /* Hauteur fixe du bloc images */
} /* Fin du bloc .hero-images */

.image { /* Conteneur interne des images */
    position: relative; /* Référence pour les enfants */
    width: 100%; /* Largeur complète */
    height: 100%; /* Hauteur complète */
    gap: 140px; /* Espace visuel prévu entre éléments */
} /* Fin du bloc .image */

.image-item { /* Carte image individuelle */
    position: absolute; /* Position libre dans le conteneur */
    border-radius: 16px; /* Coins arrondis */
    overflow: hidden; /* Coupe ce qui dépasse */
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.15); /* Ombre pour profondeur */
} /* Fin du bloc .image-item */

.image-item img { /* Image à l’intérieur de la carte */
    width: 100%; /* Remplit la largeur */
    height: 100%; /* Remplit la hauteur */
    object-fit: cover; /* Recadre sans déformer */
    display: block; /* Enlève les espaces inline */
} /* Fin du bloc .image-item img */

/* Positionnement des images */ /* Commentaire : placement des 3 cartes */
.image-item-1 { /* Première carte image */
    width: 280px; /* Largeur */
    height: 200px; /* Hauteur */
    top: 0; /* Placée en haut */
    right: 0; /* Placée à droite */
    z-index: 3; /* Passe au-dessus des autres */
} /* Fin du bloc .image-item-1 */

.image-item-2 { /* Deuxième carte image */
    width: 250px; /* Largeur */
    height: 180px; /* Hauteur */
    top: 120px; /* Décalage vers le bas */
    left: 0; /* Placée à gauche */
    z-index: 2; /* Niveau intermédiaire */
} /* Fin du bloc .image-item-2 */

.image-item-3 { /* Troisième carte image */
    width: 220px; /* Largeur */
    height: 160px; /* Hauteur */
    top: 220px; /* Décalage vers le bas */
    right: 40px; /* Décalage depuis la droite */
    z-index: 1; /* Derrière les autres */
} /* Fin du bloc .image-item-3 */

/* BOUTONS */ /* Commentaire : styles des boutons */
.btn-primary { /* Bouton principal */
    background-color: #2c5530; /* Fond vert principal */
    color: white; /* Texte blanc */
    align-items: center; /* Aligne le contenu au centre (si flex) */
    
} /* Fin du bloc .btn-primary */

.btn-primary:hover { /* Style au survol du bouton principal */
    background-color: #1e5c32; /* Vert plus foncé */
    transform: translateY(-2px); /* Effet “remonte” */
    box-shadow: 0 5px 15px rgba(44, 85, 48, 0.3); /* Ombre au survol */
} /* Fin du bloc hover */

.btn-secondary { /* Bouton secondaire */
    background-color: #4a7c59; /* Fond vert secondaire */
    color: white; /* Texte blanc */
} /* Fin du bloc .btn-secondary */

.btn-secondary:hover { /* Style au survol du bouton secondaire */
    background-color: #3a6c49; /* Vert plus foncé */
    transform: translateY(-2px); /* Effet “remonte” */
    box-shadow: 0 5px 15px rgba(74, 124, 89, 0.3); /* Ombre au survol */
} /* Fin du bloc hover */

/* Stats Section */ /* Commentaire : section statistiques */
.stats { /* Bloc principal stats */
    background-color: #f8f9fa; /* Fond gris clair */
    padding: 50px 0; /* Espacement haut/bas */
    text-align: center; /* Centre le contenu texte */
} /* Fin du bloc .stats */

.stats h2 { /* Titre de la section stats */
    color: #2c5530; /* Couleur verte */
    margin-bottom: 10px; /* Espace sous le titre */
} /* Fin du bloc .stats h2 */

.stats > p { /* Paragraphe direct sous .stats */
    color: black; /* Texte noir */
    margin-bottom: 40px; /* Espace sous le texte */
} /* Fin du bloc .stats > p */

.stats-grid { /* Grille des cartes de stats */
    display: grid; /* Active la grille */
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); /* Colonnes responsives */
    gap: 30px; /* Espace entre cartes */
    margin-top: 40px; /* Espace au-dessus de la grille */
} /* Fin du bloc .stats-grid */

.stat-card { /* Carte statistique */
    background: white; /* Fond blanc */
    padding: 30px 20px; /* Espacement interne */
    border-radius: 8px; /* Coins arrondis */
    box-shadow: 0 2px 10px rgba(0,0,0,0.1); /* Ombre légère */
    transition: all 0.3s ease; /* Animation fluide */
    cursor: pointer; /* Curseur cliquable */
} /* Fin du bloc .stat-card */

.stat-number { /* Nombre affiché dans la stat */
    font-size: 2.5em; /* Grande taille */
    font-weight: bold; /* Gras */
    color: #2c5530; /* Vert */
    display: block; /* Force le retour à la ligne */
} /* Fin du bloc .stat-number */

.stat-label { /* Libellé sous le nombre */
    color: black; /* Texte noir */
    font-size: 0.9em; /* Taille plus petite */
    margin-top: 10px; /* Espace au-dessus */
} /* Fin du bloc .stat-label */

/* Process Section */ /* Commentaire : section étapes/process */
.process { /* Conteneur process */
    padding: 80px 0; /* Espacement vertical */
    background-color: #f8f9fa; /* Fond gris clair */
} /* Fin du bloc .process */

.process-header { /* En-tête du process (titre + texte) */
    text-align: center; /* Centre le texte */
    margin-bottom: 60px; /* Espace sous l’en-tête */
} /* Fin du bloc .process-header */

.process-header h2 { /* Titre du process */
    font-size: 2.5rem; /* Taille du titre */
    font-weight: 700; /* Gras */
    color: #2c5530; /* Couleur verte */
    margin-bottom: 1rem; /* Espace sous le titre */
} /* Fin du bloc titre */

.process-header p { /* Paragraphe de présentation */
    font-size: 1.2rem; /* Taille du texte */
    color: black; /* Couleur du texte */
    max-width: 600px; /* Limite la largeur */
    margin: 0 auto; /* Centre horizontalement */
} /* Fin du bloc paragraphe */

.process-content { /* Contenu principal (texte + image) */
    display: grid; /* Mise en page en grille */
    grid-template-columns: 1fr 1fr; /* Deux colonnes égales */
    gap: 80px; /* Espace entre colonnes */
    align-items: center; /* Aligne verticalement au centre */
} /* Fin du bloc .process-content */

.process-text { /* Colonne texte des étapes */
    display: flex; /* Utilise flexbox */
    flex-direction: column; /* Empile verticalement */
    gap: 40px; /* Espace entre les étapes */
} /* Fin du bloc .process-text */

.process-step { /* Carte d’une étape */
    display: flex; /* Met numéro + texte côte à côte */
    align-items: flex-start; /* Aligne en haut */
    gap: 25px; /* Espace entre numéro et texte */
    padding: 30px; /* Espacement interne */
    background: white; /* Fond blanc */
    border-radius: 16px; /* Coins arrondis */
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08); /* Ombre */
} /* Fin du bloc .process-step */

.step-number { /* Rond avec le numéro */
    width: 50px; /* Largeur */
    height: 50px; /* Hauteur */
    background: linear-gradient(135deg, #28a745, #20c997); /* Dégradé vert */
    color: white; /* Texte blanc */
    border-radius: 50%; /* Cercle parfait */
    display: flex; /* Centre le numéro */
    align-items: center; /* Centre verticalement */
    justify-content: center; /* Centre horizontalement */
    font-size: 1.3rem; /* Taille du numéro */
    font-weight: 700; /* Gras */
    flex-shrink: 0; /* Empêche de rétrécir */
} /* Fin du bloc .step-number */

.step-content h3 { /* Titre de chaque étape */
    font-size: 1.4rem; /* Taille */
    font-weight: 600; /* Semi-gras */
    color: #2c3e50; /* Couleur bleu/gris */
    margin-bottom: 8px; /* Espace sous le titre */
}

.step-content p { /* Texte descriptif de l’étape */
    color: black; /* Texte noir */
    line-height: 1.6; /* Lisibilité */
    margin: 0; /* Enlève marge par défaut */
}

.process-image { /* Colonne image du process */
    position: relative; /* Référence interne si besoin */
}

.process-image img { /* Image du process */
    height: 500px; /* Hauteur fixe */
    object-fit: cover; /* Recadre sans déformer */
    border-radius: 20px; /* Coins arrondis */
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.15); /* Ombre forte */
}

/* Couleurs différentes pour chaque étape */ /* Commentaire : variations visuelles */
.process-step:nth-child(1),  /* Cible la 1ère étape */
.process-step:nth-child(3) { /* Cible la 3ème étape */
    border-left-color: #28a745; /* Couleur de bordure gauche (si définie ailleurs) */
}

.process-step:nth-child(1) .step-number,  /* Numéro de la 1ère étape */
.process-step:nth-child(3) .step-number { /* Numéro de la 3ème étape */
    background: linear-gradient(135deg, #28a745, #20c997); /* Dégradé vert spécifique */
}

.process-step:nth-child(2),  /* Cible la 2ème étape */
.process-step:nth-child(4) { /* Cible la 4ème étape */
    border-left-color: #2c5530; /* Bordure gauche verte foncée (si définie ailleurs) */
}

.process-step:nth-child(2) .step-number,  /* Numéro de la 2ème étape */
.process-step:nth-child(4) .step-number { /* Numéro de la 4ème étape */
    background: linear-gradient(135deg, #2c5530, #3c6540); /* Dégradé vert foncé */
}

/* Partners Section */
.partners { /* Conteneur partenaires */
    background: #f8f9fa; /* Fond gris clair */
    padding: 80px 0; /* Espacement vertical */
    text-align: center; /* Centre le contenu */
}

.partners h2 { /* Titre partenaires */
    color: #2c5530; /* Couleur verte */
    margin-bottom: 15px; /* Espace sous le titre */
    font-size: 2em; /* Taille du titre */
}

.partners-slider { /* Conteneur “slider” des partenaires */
    display: flex; /* Aligne les cartes en ligne */
    position: relative; /* Référence interne */
    margin: 0 auto 40px; /* Centre + marge basse */
    max-width: 1200px; /* Largeur max */
    gap: 1rem; /* Espace entre cartes */
    padding: 2rem 0; /* Espacement vertical */
}

.partner-item { /* Carte partenaire */
    flex: 0 0 200px; /* Largeur fixe de 200px */
    background: white; /* Fond blanc */
    padding: 2rem 1rem; /* Espacement interne */
    border-radius: 12px; /* Coins arrondis */
    box-shadow: 1px 3px 15px rgba(0,0,0,0.1); /* Ombre */
    border: 2px solid #e8f4ea; /* Bordure vert clair */
    text-align: center; /* Texte centré */
}

.partner-item h4 { /* Nom du partenaire */
    color: #2c5530; /* Vert */
    margin-bottom: 0.5rem; /* Espace sous le titre */
    font-size: 1.1em; /* Taille du texte */
    font-weight: bold; /* Gras */
}

.partner-logo { /* Zone du logo */
    height: 80px; /* Hauteur du conteneur logo */
    display: flex; /* Centre le logo */
    align-items: center; /* Centrage vertical */
    justify-content: center; /* Centrage horizontal */
    margin-bottom: 1rem; /* Espace sous le logo */
}

.partner-logo img { /* Image du logo */
    max-height: 60px; /* Limite la hauteur */
    max-width: 120px; /* Limite la largeur */
    object-fit: contain; /* Garde le logo entier sans couper */
}

/* Video Section */
.video { /* Conteneur vidéo */
    padding: 20px ; /* Espacement interne */
    background-color: #f8f9fa; /* Fond gris clair */
    text-align: center; /* Centre le contenu */
} 

.video-container { /* Conteneur de l’iframe vidéo */
    display: block; /* Comportement en bloc */
    margin-left: auto; /* Centre horizontalement */
    margin-right: auto; /* Centre horizontalement */
    width: 1197px; /* Largeur fixe */
    height: 674px; /* Hauteur fixe */
    border-radius: 12px; /* Coins arrondis */
    margin-bottom: 50px; /* Espace sous la vidéo */
} 

.video-container iframe { /* Iframe YouTube/vidéo */
    width: 1197px; /* Largeur de l’iframe */
    height: 674px; /* Hauteur de l’iframe */
    border-radius: 12px; /* Coins arrondis */
}