@charset "UTF-8";
/* CSS Document */

body{
    margin:0;
    font-family:Arial, sans-serif;
    background:#eaf5eb;
    color:#1a2d1a;
}
header{
    text-align:center;
    padding:40px 20px;
    background:#3b6a40;
    color:#fff;
}
header h1{
    font-size:2.5em;
    margin:0;
    text-transform:uppercase;
    letter-spacing:1.5px;
}
.coords{
    margin-top:10px;
    font-size:1.1em;
    opacity:0.9;
}
.coords a{
    color:#d0f0c0;
    text-decoration:none;
    font-weight:bold;
}
.elagage-style{
    position:relative;
    width:100%;
    height:380px;
    background:url('grosrouvre_elagage.jpg') center/cover no-repeat;
}
.elagage-style-text{
    position:absolute;
    bottom:20px;
    left:30px;
    background:rgba(0,0,0,0.55);
    padding:15px 25px;
    border-radius:6px;
    color:#fff;
    font-size:1.6em;
    font-weight:bold;
    max-width:80%;
}
.contenu{
    padding:40px 20px;
    max-width:1000px;
    margin:auto;
    line-height:1.7em;
    font-size:1.15em;
}
footer{
    background:#2a2a2a;
    color:#eee;
    text-align:center;
    padding:30px 20px;
    margin-top:40px;
}
footer p{
    margin:6px 0;
    font-size:0.95em;
}
    /* Style du conteneur de la liste */
.contenu ul {
    display: flex;
    flex-wrap: wrap; /* Permet de passer à la ligne sur mobile */
    gap: 20px;       /* Espacement entre les éléments */
    padding: 0;
    margin: 25px 0;
    list-style: none; /* Supprime les puces par défaut */
}

/* Style de chaque élément de liste (carte) */
.contenu li {
    flex: 1 1 calc(45% - 20px); /* Prend environ 50% de largeur moins le gap */
    min-width: 280px;           /* Sécurité pour le mobile */
    background: #f9fbf9;        /* Fond très légèrement vert/gris */
    border-left: 4px solid #2d5a27; /* Bordure verte "Nature" à gauche */
    padding: 20px;
    border-radius: 8px;
    box-shadow: 0 4px 6px rgba(0,0,0,0.05);
    transition: all 0.3s ease;
    display: flex;
    align-items: flex-start;
}

/* Petit icône avant le texte (optionnel) */
.contenu li::before {
    content: "🍃"; /* Ou un Checkmark ✓ */
    margin-right: 15px;
    font-size: 1.2rem;
}

/* Effet au survol */
.contenu li:hover {
    transform: translateY(-5px);
    background: #ffffff;
    box-shadow: 0 8px 15px rgba(0,0,0,0.1);
    border-left-color: #4CAF50; /* Vert plus vif au survol */
}

/* Style du texte gras à l'intérieur pour plus de contraste */
.contenu li strong {
    color: #2d5a27;
    display: contents;
    margin-bottom: 5px;
}
/* --- PARTIE RESPONSIVE --- */

/* Tablettes et petits écrans (moins de 768px) */
@media screen and (max-width: 768px) {
    header h1 {
        font-size: 1.8em; /* Réduction du titre principal */
    }

    .elagage-style {
        height: 250px; /* Bannière moins haute pour laisser place au contenu */
    }

    .elagage-style-text {
        font-size: 1.2em;
        left: 15px;
        right: 15px;
        max-width: 100%;
        text-align: center;
    }

    .contenu {
        padding: 20px 15px;
        font-size: 1.05em; /* Texte légèrement plus petit pour mobile */
    }

    .contenu li {
        flex: 1 1 100%; /* Les cartes prennent toute la largeur */
    }
}

/* Mobiles très étroits (moins de 480px) */
@media screen and (max-width: 480px) {
    header {
        padding: 25px 10px;
    }

    header h1 {
        font-size: 1.5em;
    }

    .coords {
        font-size: 0.95em;
    }

    .elagage-style {
        height: 200px;
    }

    .elagage-style-text {
        bottom: 10px;
        padding: 10px;
    }
    
    .contenu h2 {
        font-size: 1.4em; /* Titres de sections mieux proportionnés */
    }
}