/* =============================================
   GreenLife Maroc - CSS Simplifié (Niveau Débutant)
   ============================================= */

/* 1. Reset de base (enlève les marges par défaut des navigateurs) */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box; /* Permet d'inclure les bordures et padding dans la largeur */
}

/* 2. Style global du corps de la page */
body {
    font-family: Arial, Helvetica, sans-serif;
    color: #333333;
    line-height: 1.6;
    background-color: #f9f9f9;
}

/* Les liens n'ont pas de soulignement par défaut */
a {
    text-decoration: none;
    color: #228b22; /* Vert */
}

a:hover {
    color: #145214; /* Vert foncé au survol */
}

/* Titres */
h1, h2, h3 {
    color: #0b3d0b; /* Vert très foncé */
    margin-bottom:  १५px;
}

h2 {
    text-align: center;
    margin-bottom: 30px;
}

/* Les images s'adaptent à leur conteneur */
img {
    max-width: 100%;
    height: auto;
}

/* Conteneur principal pour centrer le contenu (largeur max) */
.container {
    width: 90%;
    max-width: 1100px;
    margin: 0 auto; /* Centrage automatique */
}

/* Section (espacement en haut et en bas) */
.section {
    padding: 50px 0;
}

/* Boutons globaux */
.btn {
    display: inline-block;
    padding: 12px 24px;
    background-color: #228b22; /* Vert */
    color: white;
    border: none;
    border-radius: 5px; /* Bords légèrement arrondis */
    font-weight: bold;
    text-align: center;
}

.btn:hover {
    background-color: #145214;
    color: white;
}

.btn-secondary {
    background-color: white;
    color: #228b22;
    border: 2px solid #228b22;
}

.btn-secondary:hover {
    background-color: #228b22;
    color: white;
}

/* =============================================
   HEADER (En-tête de page)
   ============================================= */
header {
    background-color: white;
    padding: 20px 0;
    border-bottom: 1px solid #dddddd;
    position: sticky; /* Reste en haut lors du défilement */
    top: 0;
    z-index: 100; /* Assure que le header passe au-dessus du reste */
}

/* Organisation en flexbox pour séparer le logo et le menu */
.header-container {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.logo span {
    color: #daa520; /* Doré */
    font-weight: bold;
    font-size: 24px;
}

.logo {
    font-size: 24px;
    font-weight: bold;
    color: #228b22;
}

/* Navigation principale */
nav ul {
    list-style-type: none; /* Enlève les puces */
}

nav li {
    display: inline-block; /* Affiche les éléments horizontalement */
    margin-left: 20px;
}

nav a {
    color: #333333;
    font-weight: bold;
}

nav a:hover, nav a.active {
    color: #228b22;
}

/* Menu Burger pour mobile (caché sur les grands écrans) */
.menu-toggle {
    display: none; /* Caché par défaut */
}

.hamburger {
    display: none; /* Caché par défaut */
    font-size: 30px;
    cursor: pointer;
    background: none;
    border: none;
}

/* =============================================
   SECTION HERO (Image d'accueil)
   ============================================= */
.hero {
    background-image: url('https://images.unsplash.com/photo-1509391366360-2e959784a276?w=1200&q=80');
    background-size: cover; /* L'image remplit toute la section */
    background-position: center; /* L'image est centrée */
    height: 80vh; /* 80% de la hauteur de l'écran */
    display: flex; /* Pour centrer le texte au milieu */
    align-items: center;
    justify-content: center;
    text-align: center;
    color: white;
    position: relative;
}

/* Superposition sombre pour mieux lire le texte sur l'image */
.hero-overlay {
    background-color: rgba(0, 0, 0, 0.6); /* Noir transparent */
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

.hero-content {
    position: relative;
    z-index: 10; /* Au-dessus de la ligne noire (.hero-overlay) */
    max-width: 800px;
    padding: 20px;
}

.hero h1 {
    color: white;
    font-size: 48px;
    margin-bottom: 20px;
}

.hero h1 .highlight {
    color: #daa520; /* Doré */
}

.hero p {
    font-size: 20px;
    margin-bottom: 30px;
}

/* Statistiques d'accueil */
.hero-stats {
    display: flex;
    justify-content: center;
    gap: 40px; /* Espace entre chaque statistique */
    margin-top: 40px;
}

.hero-stats .number {
    font-size: 36px;
    font-weight: bold;
    color: #daa520;
}

/* =============================================
   SECTION SERVICES (Page d'accueil et page Services)
   ============================================= */
.services-grid {
    display: flex;
    flex-wrap: wrap; /* Revient à la ligne si la taille de l'écran est petite */
    gap: 20px;
    justify-content: space-between;
}

.service-card {
    background-color: white;
    width: 30%; /* 3 boîtes par ligne */
    padding: 30px;
    border: 1px solid #eeeeee;
    border-radius: 8px;
    text-align: center;
}

.service-icon {
    font-size: 40px;
    margin-bottom: 15px;
}

/* =============================================
   SECTION TÉMOIGNAGES
   ============================================= */
.testimonials {
    background-color: white;
}

.testimonials-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    justify-content: space-between;
}

.testimonial-card {
    background-color: #f9f9f9;
    width: 30%;
    padding: 20px;
    border-radius: 8px;
    border: 1px solid #eeeeee;
}

.testimonial-card .stars {
    color: #daa520; /* Étoiles dorées */
    margin-bottom: 10px;
}

.testimonial-author {
    display: flex;
    align-items: center;
    margin-top: 15px;
}

.testimonial-avatar {
    width: 50px;
    height: 50px;
    border-radius: 50%; /* Image ronde */
    margin-right: 15px;
}

.testimonial-author .name {
    font-weight: bold;
}

/* =============================================
   APPEL A L'ACTION (Section CTA)
   ============================================= */
.cta-section {
    background-color: #228b22;
    color: white;
    text-align: center;
    padding: 60px 20px;
}

.cta-section h2 {
    color: white;
}

.cta-section .btn-accent {
    background-color: #daa520;
    color: black;
    margin-top: 20px;
}

/* =============================================
   FOOTER (Pied de page)
   ============================================= */
footer {
    background-color: #1a2e1a; /* Vert très foncé */
    color: white;
    padding: 50px 0 20px 0;
}

.footer-grid {
    display: flex;
    flex-wrap: wrap; /* Revient à la ligne sur petits écrans */
    justify-content: space-between;
}

/* Les colonnes du pied de page */
.footer-column {
    width: 22%;
}

.footer-column h4 {
    color: white;
    margin-bottom: 15px;
}

.footer-column p {
    color: #cccccc;
    margin-bottom: 15px;
}

.footer-links {
    list-style-type: none;
}

.footer-links li {
    margin-bottom: 10px;
}

.footer-links a {
    color: #cccccc;
}

.footer-links a:hover {
    color: white;
}

/* Formulaire newsletter basique */
.newsletter-form input {
    width: 100%;
    padding: 10px;
    margin-bottom: 10px;
    border: none;
    border-radius: 4px;
}

.newsletter-form button {
    width: 100%;
    padding: 10px;
    background-color: #228b22;
    color: white;
    border: none;
    border-radius: 4px;
    cursor: pointer;
}

.footer-bottom {
    text-align: center;
    margin-top: 40px;
    padding-top: 20px;
    border-top: 1px solid #333333;
    color: #999999;
}

.footer-bottom a {
    color: #cccccc;
}

/* =============================================
   Design Mobile (Écrans plus petits)
   ============================================= */
/* Les règles qui suivent s'appliquent seulement aux écrans sous 768px */

@media (max-width: 768px) {
    /* Le hamburger devient visible pour le téléphone */
    .hamburger {
        display: block;
    }

    /* Le menu se cache par défaut */
    nav ul {
        display: none;
        background-color: white;
        width: 100%;
        position: absolute;
        top: 60px; /* SOUS le header */
        left: 0;
        padding: 20px 0;
        text-align: center;
        border-bottom: 1px solid #ddd;
    }

    nav li {
        display: block; /* Alignement vertical des liens du menu */
        margin: 10px 0; /* Espace vertical */
    }

    /* Hack CSS : si la checkbox (invisible) est cochée, afficher le sous-menu */
    .menu-toggle:checked ~ nav ul {
        display: block;
    }

    /* Les boîtes (services, témoignages, colonnes) prennent presque toute la largeur */
    .service-card, .testimonial-card {
        width: 100%;
        margin-bottom: 20px;
    }

    .footer-column {
        width: 100%; /* Colonne pleine largeur sur téléphone */
        margin-bottom: 30px;
    }

    /* Le texte de l'accueil rétrécit */
    .hero h1 {
        font-size: 32px;
    }
    
    .hero-stats {
        flex-direction: column; /* Statistiques les unes sous les autres */
        gap: 20px;
    }
}