/* ======================================= */
/* PAGE D'ACCEUIL  */
/* ======================================= */
details {
    /* 1. Décalage (1/4 de l'écran à gauche) et largeur (la moitié de l'écran) */
    width: 50%;
    margin-left: 25%;
    margin-right: 25%;
    display: block; /* Nécessaire pour les marges */
    
    /* Le reste de vos styles existants */
    max-width: 800px; /* Ajout d'une largeur maximale si nécessaire */
}

summary {
    background: #FAF0E6;
    color: #1E8449; /* Utilisation de la couleur verte de vos titres */
    padding: 10px;
    cursor: pointer;
    list-style: none;
}
summary: webkit-details-marker { display:none; }

/* Styles de la liste à l'intérieur du menu */
details ul {
    margin: 100;
    padding: 100;
    background: #f1f1f1;
    border: 1px solid #ccc;
    /* Pour annuler le text-align: center du body et bien aligner le texte du menu */
    text-align: left; 
}
details li a {
    display: block;
    padding: 10px;
    text-decoration: none;
    color: #333;
}

details li a:hover {
    background: #FAF0E6;
}


/* ======================================= */
/* 9. STYLE DE L'EN-TÊTE ET DU LOGO        */
/* ======================================= */

/* Conteneur principal de l'en-tête pour aligner les éléments sur une ligne */
.entete-logo {
    display: flex; /* Active le mode Flexbox pour aligner les éléments sur une ligne */
    align-items: center; /* Centre les éléments verticalement (le logo et le texte s'alignent au milieu) */
    justify-content: center; /* Centre l'ensemble du groupe (logo + texte) horizontalement */
    padding: 20px 0 10px 0;
}

/* Redimensionnement précis de l'image du logo */
.logo-principal {
    width: 400px; /* J'ai réduit la taille pour un affichage sur une ligne */
    height: auto; 
    /* Retire display: block; et margin: auto; qui ne sont plus nécessaires avec Flexbox */
}

/* Style du nom de la société */
.entete-logo h1 {
    font-size: 1.8em; 
    margin-top: 0; 
    margin-left: 15px; /* Ajoute un espace entre le logo et le texte */
    color: #0A6C5A;
}



/* ======================================= */
/* PAGE POUR LE TRAVAIL DE SOL AVEC MOTOCULTEUR  */
/* ======================================= */



/* ======================================= */
/* 1. STYLES GÉNÉRAUX DE LA PAGE (BODY)     */
/* ======================================= */
body {
    /* Fond de page : Couleur Crème/Beige Clair */
    background-color: #FAF0E6; 
    
    /* Couleur du texte principal (Gris foncé) */
    color: #333; 
    
    /* Police et centrage du texte global (pour titres et paragraphes) */
    text-align: center;
    font-family: sans-serif;
    line-height: 1.6; 
}

/* Conteneur principal pour mieux gérer les marges et la largeur du contenu */
.conteneur-principal {
    max-width: 1000px; /* Limiter la largeur de la page à 1000px */
    margin: 0 auto; /* Centrer ce bloc sur l'écran */
    padding: 0 20px; 
}


/* ======================================= */
/* 2. STYLES DES TITRES (ACCENT VERT)      */
/* ======================================= */

/* Couleur d'accentuation (Vert vif) pour tous les titres */
h1, h2, h3 {
    color: #1E8449; 
    text-transform: uppercase; 
    letter-spacing: 1px;
}

/* Différencier le titre principal */
h1 {
    font-size: 2.5em; 
    margin-bottom: 30px;
    padding-top: 50px; /* Espace en haut de page */
}

/* Espacement entre les sections */
h2 {
    margin-top: 50px;
    margin-bottom: 15px;
}

/* ======================================= */
/* 3. STYLES DES IMAGES (.image-travail)   */
/* ======================================= */
.image-travail {
    /* Dimensions : plus large (800px) et hauteur personnalisée (500px) */
    width: 800px;  
    height: 500px; 
    
    /* Empêche la déformation en faisant "couvrir" l'image */
    object-fit: cover; 
    
    /* Centrage de l'image */
    display: block; 
    margin: 20px auto; 
    
    /* Bordure */
    border: 2px solid grey;
}

/* ======================================= */
/* 4. STYLES DE LISTE PERSONNALISÉE (.liste-rouge) */
/* ======================================= */

/* 1. On cible la liste avec la classe "liste-rouge" (le bloc UL) */
.liste-rouge {
    list-style-type: none; 
    max-width: 600px; 
    margin: 0 auto; 
    text-align: left; 
    padding-left: 15px; 
}

/* 2. On cible chaque élément de la liste (LI) */
.liste-rouge li {
    position: relative; 
    margin-bottom: 10px; 
}

/* 3. On crée la puce (point VERT) devant chaque élément grâce à ::before */
.liste-rouge li::before {
    content: ""; 
    display: inline-block;
    width: 8px; 
    height: 8px; 
    background-color: #1E8449; /* Couleur des points : Vert */
    border-radius: 50%; 
    position: absolute;
    left: -12px; 
    top: 7px;  
}

/* ======================================= */
/* 5. STYLE DE LA NOTE D'ALERTE (.note-alerte) */
/* ======================================= */
.note-alerte {
    /* Centrage et taille */
    max-width: 700px; 
    margin: 40px auto; /* Plus d'espace pour la faire ressortir */
    padding: 15px; 
    
    /* Styles visuels (Encadré) */
    border: 2px solid #CC0000; 
    background-color: #FFF0F0; 
    border-radius: 5px; 
    color: #333; 
    font-weight: bold; 
    text-align: center; 
}

/* Utilisation de la police pour le corps de la page */
body {
    /* ... autres styles ... */
    font-family: 'Roboto', sans-serif; 
}

/* ======================================= */
/* 2. STYLES DES TITRES (ACCENT VERT)      */
/* ======================================= */

h1, h2, h3 {
    color: #0A6C5A; 
    
    font-family: 'Montserrat', sans-serif; 
    
    /* MODIFICATION ICI : On passe au gras */
    font-weight: 700; /* Poids gras (bold) */
    /* Vous pouvez essayer 800 si 700 n'est pas assez impactant */
    
    text-transform: uppercase; 
    letter-spacing: 2px;
}



/* ======================================= */
/* 6. STYLE DE LA BANNIÈRE VIDÉO           */
/* ======================================= */

/* Conteneur principal pour définir la hauteur visible (la "fenêtre" de la vidéo) */
.banniere-video-conteneur {
    width: 100%;
    height: 350px; /* HAUTEUR désirée pour l'effet panoramique (à ajuster) */
    overflow: hidden; /* Cache tout ce qui dépasse de cette boîte */
    position: relative;
    margin-bottom: 30px; /* Espace après la bannière */
}

/* La balise vidéo elle-même */
.banniere-video {
    width: 100%;
    height: 100%;
    
    /* ESSENTIEL : Assure que la vidéo remplit le conteneur sans se déformer, en rognant si nécessaire */
    object-fit: cover; 
    
    /* Pour que la vidéo couvre toute la largeur de l'écran (viewport) */
    position: absolute;
    top: 0;
    left: 0;
}


/* ======================================= */
/* CSS POUR PAGE BOIS DE CHAUFFAGE                  */
/* ======================================= */

table {
    width: 80%; /* Prend 80% de la largeur de la page (ajustez si besoin) */
    margin: 30px auto; /* Centre le tableau et ajoute de l'espace */
    border-collapse: collapse; /* Supprime l'espace entre les bordures des cellules */
}

th, td {
    border: 1px solid #C8E6C9; /* Bordure discrète (Vert Sauge Clair) */
    padding: 10px;
    text-align: left; /* Alignez le texte à gauche pour la lecture */
}

th {
    background-color: #E8F5E9; /* Fond légèrement plus foncé pour l'en-tête */
    color: #1E8449; /* Texte en vert vif pour l'en-tête */
    font-weight: 700;
}

/* ======================================= */
/* test menu deroulant                  */
/* ======================================= */


summary {
    /* ANCIEN : background: #333; */
    /* NOUVEAU : Utiliser le Vert Profond pour le fond, ou un Gris/Vert très foncé */
    background: #0A6C5A; /* Votre Vert Profond */
    
    color: white; /* Le texte doit être blanc ou très clair sur le fond foncé */
    padding: 15px 20px; /* Augmenter le padding pour un aspect plus large et aéré */
    cursor: pointer;
    list-style: none;
    
    /* Ajouter un coin arrondi et une légère ombre pour le faire ressortir */
    border-radius: 8px; /* Coins légèrement arrondis */
    box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.1); /* Ombre légère */
    font-weight: bold; /* Mettre le texte du titre en gras */
    text-transform: uppercase;
    letter-spacing: 1px;
}

/* Le pseudo-sélecteur reste le même pour masquer la puce */
summary::-webkit-details-marker { display:none; }

details ul {
    /* ANCIEN : margin: 0; padding: 0; */
    margin-top: 5px; /* Décolle légèrement la liste du titre */
    padding: 10px 0; /* Un peu de padding vertical à l'intérieur de la liste */
    
    background: #F8F8F8; /* Gris très très clair pour le fond de la liste */
    
    border: 1px solid #C8E6C9; /* Bordure discrète Vert Sauge Clair */
    border-radius: 0 0 8px 8px; /* Arrondir uniquement les coins du bas */
    
    list-style: none;
    text-align: left; 
}

/* Style de chaque lien dans la liste */
li a {
    display: block;
    padding: 10px 25px; /* Padding latéral augmenté pour aérer l'intérieur */
    text-decoration: none;
    color: #333;
    /* Assurez-vous que les puces personnalisées ne s'appliquent pas ici si vous en avez créé */
}

/* Effet au survol du lien (hover) */
li a:hover {
    /* ANCIEN : background: #ddd; */
    background: #E8F5E9; /* Utiliser le vert très pâle pour l'effet de survol */
    color: #0A6C5A; /* Mettre le texte en Vert Profond au survol */
}




/* ======================================= */
/* 10. STYLE DU FOOTER (PIED DE PAGE)      */
/* ======================================= */

footer {
    background-color: #333; /* Fond Gris Foncé/Noir pour un bon contraste */
    color: #F5F5F5; /* Texte Gris Clair */
    padding: 30px 0;
    margin-top: 50px; /* Espace pour décoller le footer du contenu principal */
    width: 100%;
}

.footer-conteneur {
    display: flex; /* Active l'alignement en colonnes */
    justify-content: space-around; /* Distribue l'espace entre les colonnes */
    max-width: 1100px; /* Alignement avec le contenu principal */
    margin: 0 auto;
    padding: 0 20px;
    flex-wrap: wrap; /* Assure que les colonnes passent à la ligne sur mobile */
}

.footer-colonne {
    flex: 1; /* Chaque colonne prend une part égale de l'espace */
    min-width: 250px; /* Largeur minimale pour les mobiles */
    margin-bottom: 20px;
}

.footer-colonne h3 {
    color: #0A6C5A; /* Titres de colonne en Vert Profond */
    font-size: 1.2em;
    margin-bottom: 15px;
    text-transform: uppercase;
}

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

.footer-colonne ul li {
    margin-bottom: 8px;
    font-size: 0.9em;
}

/* Style des liens */
.footer-colonne a {
    color: #F5F5F5; /* Liens en Gris Clair */
    text-decoration: none;
    transition: color 0.3s;
}

.footer-colonne a:hover {
    color: #C8E6C9; /* Vert Sauge Clair au survol */
}

.copyright {
    font-size: 0.8em;
    opacity: 0.6;
    margin-top: 20px;
}



/* ======================================= */
/* 11. STYLE DE LA PAGE CONTACT            */
/* ======================================= */

.entete-contact {
    text-align: center;
    max-width: 800px;
    margin: 40px auto;
}

.contact-flex-conteneur {
    display: flex;
    justify-content: space-between;
    max-width: 900px;
    margin: 0 auto 50px auto;
    gap: 40px; /* Espace entre les deux colonnes */
    flex-wrap: wrap; /* Pour que les blocs passent à la ligne sur mobile */
}

.contact-coordonnees, .contact-formulaire {
    flex: 1; /* Les deux colonnes prennent une largeur égale */
    min-width: 300px; /* Assure que cela ne devient pas trop étroit */
}

/* Style des coordonnées */
.contact-coordonnees {
    background-color: #E8F5E9; /* Vert très pâle */
    padding: 30px;
    border-radius: 8px;
    border-left: 5px solid #0A6C5A; /* Barre latérale en Vert Profond */
}

.contact-coordonnees ul {
    list-style: none;
    padding: 0;
}

.contact-coordonnees li {
    margin-bottom: 10px;
}

/* Style du Formulaire */
.contact-formulaire form {
    display: flex;
    flex-direction: column;
}

.contact-formulaire label {
    margin-top: 15px;
    margin-bottom: 5px;
    font-weight: bold;
    color: #333;
}

.contact-formulaire input[type="text"],
.contact-formulaire input[type="tel"],
.contact-formulaire input[type="email"],
.contact-formulaire select,
.contact-formulaire textarea {
    padding: 10px;
    border: 1px solid #ccc;
    border-radius: 4px;
    font-size: 1em;
}

/* Style du bouton d'envoi */
.contact-formulaire button[type="submit"] {
    margin-top: 30px;
    padding: 12px;
    background-color: #0A6C5A; /* Bouton en Vert Profond */
    color: white;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    font-size: 1.1em;
    transition: background-color 0.3s;
}

.contact-formulaire button[type="submit"]:hover {
    background-color: #1E8449; /* Vert un peu plus clair au survol */
}


/* Amélioration du style des champs de saisie * COMMANDE POUR LES FORMULAIRES*/
/* ======================================= */
/* 11. AMÉLIORATION VISUELLE DU FORMULAIRE */
/* ======================================= */

/* Test général pour s'assurer que les styles sont appliqués au conteneur */
.contact-formulaire {
    
    padding: 20px;
    border-radius: 8px;
}

/* Style des champs de saisie */
.contact-formulaire input[type="text"],
.contact-formulaire input[type="tel"],
.contact-formulaire input[type="email"],
.contact-formulaire select,
.contact-formulaire textarea {
    padding: 12px; 
    border: 1px solid #ccc;
    border-radius: 6px; 
    font-size: 1em;
    width: 100%; 
    box-sizing: border-box; 
    transition: border-color 0.3s, box-shadow 0.3s;
}

/* Style du bouton d'envoi */
.contact-formulaire button[type="submit"] {
    margin-top: 30px;
    padding: 14px 25px;
    background-color: #0A6C5A;
    color: white;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    font-size: 1.15em;
    font-weight: bold;
    transition: background-color 0.3s, transform 0.1s;
    letter-spacing: 0.5px;
}
.rgpd-note {
    font-size: 0.8em;
    color: #666;
    margin-top: 15px;
}

/* ======================================= */
/* 12. STYLE DES PAGES SERVICES (DÉBROUSSAILLAGE) */
/* ======================================= */

.entete-service {
    text-align: center;
    margin: 40px auto;
}

.arguments-clefs h3, .types-travaux h3, .cta-debroussaillage h3 {
    color: #0A6C5A; /* Vert Profond */
    text-align: center;
    margin-top: 40px;
    margin-bottom: 25px;
}

/* Style Flexbox pour aligner les cartes d'arguments */
.carte-conteneur-flex {
    display: flex;
    justify-content: space-around;
    gap: 20px;
    flex-wrap: wrap;
    margin-bottom: 50px;
}

.carte-service {
    flex: 1; /* Distribue l'espace également */
    min-width: 250px;
    max-width: 300px; /* Limiter la largeur pour les grands écrans */
    padding: 20px;
    background-color: #F9F9F9; /* Fond très clair */
    border: 1px solid #E0E0E0;
    border-radius: 8px;
    box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.05);
    text-align: center;
}

.carte-service h4 {
    color: #333;
    margin-top: 0;
    border-bottom: 2px solid #0A6C5A; /* Ligne verte pour séparer le titre */
    padding-bottom: 10px;
    margin-bottom: 15px;
}

/* Style de la section d'appel à l'action (CTA) */
.cta-debroussaillage {
    text-align: center;
    background-color: #E8F5E9; /* Vert très pâle */
    padding: 40px;
    border-radius: 8px;
    margin-bottom: 40px;
}

/* Style du bouton CTA (pour le lien "Demander un Devis Débroussaillage Gratuit") */
.bouton-principal {
    display: inline-block;
    padding: 12px 25px;
    background-color: #0A6C5A; /* Vert Profond */
    color: white;
    text-decoration: none;
    border-radius: 6px;
    font-weight: bold;
    margin-top: 20px;
    transition: background-color 0.3s;
}

.bouton-principal:hover {
    background-color: #1E8449;
}

/* Style pour les listes de travaux */
.types-travaux ul {
    list-style: none; /* Retirer les puces par défaut */
    padding: 0;
    max-width: 600px;
    margin: 0 auto 50px auto; /* Centrer la liste */
}

.types-travaux li {
    background: url('images/check-mark.png') no-repeat left 50%; /* Si vous avez une image de coche */
    background-color: #f3f3f3;
    padding: 10px 10px 10px 30px; /* Espace pour la coche */
    margin-bottom: 10px;
    border-radius: 4px;
    text-align: left;
    border-left: 5px solid #0A6C5A; /* Ligne verte à gauche */
}

/* ======================================= */
/* 13. STYLE SECTEUR D'ACTIVITÉ */
/* ======================================= */

.zone-carte {
    text-align: center;
    margin-bottom: 40px;
}

.note-rayon {
    font-size: 1.1em;
    font-weight: bold;
    color: #0A6C5A;
    margin-top: 15px;
}

/* Flexbox pour les colonnes de villes */
.liste-communes-flex {
    display: flex;
    justify-content: center; /* Centrer les colonnes au milieu de la page */
    gap: 30px;
    flex-wrap: wrap; /* Assurer le retour à la ligne sur mobile */
    max-width: 900px;
    margin: 30px auto;
}

.colonne-villes {
    list-style: none;
    padding: 0;
    min-width: 200px; /* Largeur minimale pour la lisibilité */
}

.colonne-villes li {
    background-color: #f7f7f7;
    padding: 8px 15px;
    margin-bottom: 5px;
    border-radius: 4px;
    text-align: left;
    border-left: 3px solid #ccc; /* Petite touche de style */
}

/* Réutiliser .cta-debroussaillage et .bouton-principal déjà créés */
/* AJOUTEZ CECI dans la section 13. STYLE SECTEUR D'ACTIVITÉ de votre style.css */

.carte-conteneur {
    max-width: 800px; /* Limiter la largeur maximale de la carte */
    margin: 20px auto; /* Centrer la carte */
    box-shadow: 0 0 10px rgba(0,0,0,0.1); /* Ajouter une petite ombre pour l'encadrer */
    border-radius: 8px;
    overflow: hidden; /* Assure que la bordure arrondie s'applique bien */
}

.carte-conteneur iframe {
    display: block; /* Supprimer les marges/espaces indésirables */
    
    
    
    /* ======================================= */
/* 14. ADAPTATION MOBILE (RESPONSIVE)      */
/* ======================================= */

}@media screen and (max-width: 768px) {
    
    /* 1. On empile les éléments au lieu de les mettre côte à côte */
    .carte-conteneur-flex, .footer-conteneur, .liste-communes-flex {
        flex-direction: column;
        align-items: center;
    }

    /* 2. On ajuste la taille du texte et du logo */
    .entete-logo h1 {
        font-size: 1.5rem;
        text-align: center;
    }

    .logo-principal {
        max-width: 150px; /* Réduit le logo sur téléphone */
    }

    /* 3. On donne toute la largeur aux cartes */
    .carte-service {
        max-width: 90%;
        margin-bottom: 20px;
    }

    /* 4. Le menu : on met les liens les uns sous les autres */
    nav ul {
        flex-direction: column;
        padding: 0;
    }

    nav ul li {
        margin: 10px 0;
    }

    /* 5. On s'assure que les images ne dépassent pas */
    img {
        max-width: 100%;
        height: auto;
    }
}