/* style.css */
/* Importation des polices Playfair Display et Georgia depuis Google Fonts */
@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:wght@700;800;900&family=Georgia&display=swap');

/* Ajustement global du box-sizing pour faciliter le layout */
*, *::before, *::after {
    box-sizing: border-box; /* IMPORTANT: Inclut padding et border dans la largeur/hauteur de l'élément */
} /* <-- FERMEZ BIEN CETTE RÈGLE ICI ! */

/* --- */

/* Styles généraux du site (si vous en avez) */
/* Par exemple: body, a, p, etc. */


/* Styles spécifiques pour le titre H1 sur les GRANDS ÉCRANS */
.batch-plan-page-content h1 {
    font-size: 2.8em;
    color: #2c3e50;
    margin-bottom: 20px;
    margin-top: 40px;    /* Marge supérieure sur PC */
    margin-left: 100px;  /* Marge gauche sur PC */
    text-align: left;    /* Alignement sur PC */
}

/* --- */

/* Responsive adjustments */
@media (max-width: 768px) { /* Cette règle s'applique aux écrans de 768px de large ou moins */
    .page-content {
        /* ... vos styles existants pour .page-content sur mobile ... */
        /* Assurez-vous que cette partie est correcte et complète pour le mobile */
        padding: 40px 15px; /* Exemple de padding mobile pour page-content */
    }

    .batch-plan-page-content h1 {
        margin-left: 0;      /* Annule la marge gauche sur téléphone */
        margin-top: 0;       /* Annule la marge supérieure sur téléphone (ou mettez la valeur souhaitée) */
        text-align: center;  /* Centre le texte sur téléphone, si désiré */
        font-size: 2.2em;    /* Si vous voulez aussi une taille de police différente sur mobile */
    }
    /* ... mettez ici les autres règles spécifiques au mobile comme pour .solution-category-item, etc. */
}

/* ... le reste de votre CSS ... */

/* Styles généraux */
:root {
    --navbar-height: 80px; /* MODIFIÉ : Hauteur de la navbar augmentée à 80px */
}

html {
    scroll-behavior: smooth; /* Active le défilement fluide par default */
    overscroll-behavior-y: none; /* Empêche le rebond vertical de la page (effet d'élastique) */
    height: 100%; /* NOUVEAU: S'assure que html prend toute la hauteur de la fenêtre */
}


body {
    font-family: 'Georgia', serif; /* Police 'Georgia' pour le corps de texte, avec 'serif' comme fallback */
    margin: 0; /* Supprime la marge par default du navigateur */
    padding: var(--navbar-height) 0 0 0; /* Ajoute un padding au-dessus du body pour compenser la navbar fixe */
    color: #6A615C; /* Brun-gris chaud pour la lisibilité */
    background-color: #FFFDF5; /* Fond crème légèrement doré */
    line-height: 1.6; /* Améliore la lisibilité des paragraphes */
    overflow-x: hidden; /* Empêche le défilement horizontal indésirable */
    min-height: 100%; /* NOUVEAU: S'assure que body prend au moins 100% de la hauteur de html */
}

/* --- Barre de Navigation --- */
.navbar {
    background-color: #2c3e50; /* Couleur de fond sombre pour la barre de navigation */
    padding: 15px 20px; /* Espacement interne */
    color: white;
    position: fixed; /* CHANGÉ: Rends la barre de navigation FIXE en haut de l'écran */
    top: 0; /* Colle-la en haut de la fenêtre */
    width: 100%;
    z-index: 1000; /* Assure que la barre est au-dessus des autres éléments lors du défilement */
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1); /* Petite ombre pour le relief */
    height: var(--navbar-height); /* Utilise la variable CSS */
    display: flex; /* Pour centrer le contenu verticalement si besoin */
    align-items: center; /* Centre les éléments enfants verticalment */
}

.navbar .container {
    display: flex; /* Utilise Flexbox pour aligner les éléments */
    justify-content: space-between; /* Espace le logo et les liens */
    align-items: center; /* Centre verticalement */
    max-width: 1400px; /* Largeur maximale pour le contenu */
    margin: 0 ; /* Centre le contenu de la barre de navigation */
padding-left: 20px; /* Ajoutez cette ligne et ajustez la valeur en pixels */
    width: 100%; /* S'assure que le container prend la largeur disponible */
}

.navbar .logo {
    color: white;
    text-decoration: none;
    font-size: 1.6em; /* Taille de la police du titre du site (inchangée) */
    font-weight: 700; /* Plus gras pour le logo */
    letter-spacing: 0.5px; /* Ajustement de l'espacement */
    font-family: 'Playfair Display', serif; /* Playfair Display pour le logo */
}

/* Applique text-decoration: none !important; à TOUS les états des liens dans la nav-links */
/* ET suppression des propriétés de soulignement avancées pour une suppression ultra-forcée */
.navbar .nav-links a,
.navbar .nav-links a:link,
.navbar .nav-links a:visited,
.navbar .nav-links a:hover,
.navbar .nav-links a:active,
.navbar .nav-links a:focus {
    color: white;
    text-decoration: none !important; /* Suppression FORCÉE du soulignement pour tous les états */
    text-underline-offset: 0 !important; /* Force l'offset du soulignement à zéro */
    text-decoration-thickness: 0 !important; /* Force l'épaisseur du soulignement à zéro */
    font-weight: 600; /* Liens en gras */
    font-size: 1em;
    padding: 5px 0;
    transition: color 0.3s ease; /* Transition douce pour le survol */
    font-family: 'Georgia', serif; /* Georgia pour les liens de navigation */
}

.navbar .nav-links {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex; /* Par default, les éléments sont alignés horizontalement (flex-direction: row) */
}

.navbar .nav-links li {
    margin-left: 30px; /* Espacement entre les liens */
}

.navbar .nav-links a:hover {
    color: #4CAF50; /* Changement de couleur au survol */
}

/* --- Fin Barre de Navigation --- */

/* Section Hero (Introduction) */
.hero-section {
    background-image: url('../images/acceuil-fond.jpg'); /* Chemin de l'image de fond mis à jour */
    background-size: cover; /* L'image couvre toute la section */
    background-position: center; /* Centre l'image */
    color: white; /* Texte blanc pour contraster avec le fond sombre */
    text-align: center; /* Centre le texte horizontalement */
    padding-top: 100px; /* Retour à un padding simple, le body gère le décalage de la navbar */
    padding-bottom: 100px;
    margin-top: 0; /* Plus besoin de marge négative, ni de marge du tout liée à la navbar */
    min-height: 500px; /* Hauteur minimale de la section */
    display: flex; /* Active Flexbox pour centrer le contenu */
    align-items: center; /* Centre verticalement */
    justify-content: center; /* Centre horizontalement */
    position: relative; /* Nécessaire pour le pseudo-élément */
    z-index: 1; /* S'assure que le contenu est au-dessus du survol */
}

/* Survol sombre sur l'image de fond pour améliorer la lisibilité du texte */
.hero-section::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(0, 0, 0, 0.4); /* Fond noir semi-transparent */
    z-index: -1; /* Place le survol derrière le contenu */
}

.hero-content {
    max-width: 800px; /* Limite la largeur du contenu pour une meilleure lisibilité */
    margin: 0 auto; /* Centre le bloc de contenu */
}

.hero-section h1 {
    font-size: 3.5em; /* Grande taille de police pour le titre */
    font-weight: 800; /* Extra gras pour un impact maximal */
    margin-bottom: 20px; /* Espace en dessous du titre */
    line-height: 1.2; /* Hauteur de ligne pour une meilleure lisibilité */
    font-family: 'Playfair Display', serif; /* Playfair Display pour le titre H1 du Hero */
}

.hero-section p {
    font-size: 1.3em; /* Taille de police pour le paragraphe */
    font-weight: 400; /* Poids normal pour la douceur */
    margin-bottom: 40px; /* Espace en dessous du paragraphe */
    font-family: 'Georgia', serif; /* Georgia pour les paragraphes */
}

/* Style du bouton */
.btn-primary {
    display: inline-block; /* Pour pouvoir appliquer padding, margin, etc. */
    background-color: #4CAF50; /* Couleur de fond verte */
    color: white; /* Texte blanc */
    padding: 15px 30px;
    text-decoration: none;
    border-radius: 8px; /* Bords légèrement plus arrondis */
    transition: background-color 0.3s ease, transform 0.2s ease, box-shadow 0.3s ease; /* Ajout box-shadow pour la transition */
    font-weight: 700; /* Texte en gras fort */
    font-size: 1.1em;
    letter-spacing: 0.5px;
    font-family: 'Playfair Display', serif; /* Playfair Display pour les boutons primaires */
}

.btn-primary:hover {
    background-color: #45a049;
    transform: translateY(-5px); /* EFFET PLUS PRONONCÉ */
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.3); /* OMBRE PLUS VISIBLE */
}

/* Section Problèmes et Solutions */
.problem-solution-section {
    padding: 80px 20px;
    text-align: center;
    background-color: #FAF5E8; /* Nouveau: Beige rosé pour les sections secondaires */
}

.problem-solution-section h2 {
    font-size: 2.8em; /* Plus grand pour les titres de section */
    color: #2c3e50;
    font-weight: 800; /* Extra gras */
    margin-bottom: 20px;
    font-family: 'Playfair Display', serif; /* Playfair Display pour les titres H2 des sections */
}

.problem-solution-section .section-intro {
    font-size: 1.2em; /* Plus grand */
    color: #6A615C; /* Nouveau: Brun-gris chaud pour l'intro de section */
    max-width: 900px;
    margin: 0 auto 50px auto;
    font-weight: 400; /* Poids normal pour la douceur */
    font-family: 'Georgia', serif; /* Georgia pour les intros de section */
}

.solution-grid {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 30px;
    max-width: 1200px;
    margin: 0 auto;
}

.solution-item {
    background-color: #FFFDF5; /* Nouveau: Crème légèrement doré pour les éléments de solution */
    border-radius: 10px;
    padding: 30px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.08);
    text-align: left;
    width: 100%;
    max-width: 350px;
    transition: transform 0.3s ease, box-shadow 0.3s ease, background-color 0.3s ease; /* Ajout transition pour l'animation */
}

.solution-item:hover {
    transform: translateY(-8px); /* EFFET PLUS PRONONCÉ */
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.2); /* OMBRE PLUS VISIBLE */
    /* background-color: #4CAF50; */ /* Ancienne ligne commentée/supprimée */
}

.solution-item .solution-icon-img { /* Styles pour les images d'icônes dans solution-item */
    width: 100px; /* Taille fixe pour la largeur */
    height: 100px; /* Taille fixe pour la hauteur */
    margin-bottom: 15px;
    border-radius: 50%; /* Rendre l'image ronde */
    background-color: #F8E7E4; /* Nouveau: Rose poudré délicat pour l'icône de solution */
    padding: 10px;
    display: block; /* Pour centrer l'image */
    margin-left: auto;
    margin-right: auto;
}

.solution-item h3 {
    font-size: 1.6em; /* Plus grand */
    color: #4CAF50; /* Vert principal conservé pour les titres des items */
    font-weight: 700; /* Fort */
    margin-bottom: 15px;
    text-align: center; /* Centre le titre */
    font-family: 'Playfair Display', serif; /* Playfair Display pour les titres H3 */
}

.solution-item p {
    font-size: 1em; /* Taille normale */
    line-height: 1.7;
    color: #6A615C; /* Nouveau: Brun-gris chaud pour les paragraphes */
    text-align: center; /* Centre le paragraphe */
    font-weight: 400; /* Normal pour la douceur */
    font-family: 'Georgia', serif; /* Georgia pour les paragraphes */
}

/* Nouvelle Section: Nos Solutions (Page d'accueil) */
.our-solutions-section {
    padding: 80px 20px;
    text-align: center;
    background-color: #FFFDF5; /* Nouveau: Fond crème légèrement doré */
}

.our-solutions-section h2 {
    font-size: 2.8em; /* Taille uniforme avec les autres titres de section */
    color: #2c3e50;
    font-weight: 800; /* Extra gras */
    margin-bottom: 20px;
    font-family: 'Playfair Display', serif; /* Playfair Display pour les titres H2 des sections */
}

.our-solutions-section .section-intro {
    font-size: 1.2em;
    color: #6A615C; /* Nouveau: Brun-gris chaud pour l'intro de section */
    max-width: 900px;
    margin: 0 auto 50px auto;
    font-weight: 400; /* Poids normal pour la douceur */
    font-family: 'Georgia', serif; /* Georgia pour les intros de section */
}

.solutions-overview-grid {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 30px;
    max-width: 1200px;
    margin: 0 auto;
}

.overview-item {
    background-color: #FAF5E8; /* Nouveau: Beige rosé pour les éléments d'aperçu */
    border-radius: 10px;
    padding: 30px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.08);
    text-align: center;
    width: 100%;
    max-width: 280px;
    transition: transform 0.3s ease, box-shadow 0.3s ease; /* Ajout transition pour l'animation */
}

.overview-item:hover {
    /* background-color: #45a049; */ /* <-- Supprimez ou mettez en commentaire cette ligne */
    transform: translateY(-8px);
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.2);
}
}

/* Cette règle est correcte et reste pour les .overview-item */
.our-solutions-section .overview-item:hover h3,
.our-solutions-section .overview-item:hover p {
    color: white; /* Rend le texte blanc au survol pour améliorer la lisibilité */
}

.overview-item h3 {
    font-size: 1.4em; /* Légèrement plus grand */
    color: #4CAF50;
    font-weight: 700; /* Fort */
    margin-bottom: 15px;
    font-family: 'Playfair Display', serif; /* Playfair Display pour les titres H3 */
}

.overview-item p {
    font-size: 0.95em;
    line-height: 1.7;
    margin-bottom: 25px;
    font-weight: 400; /* Normal pour la douceur */
    font-family: 'Georgia', serif; /* Georgia pour les paragraphes */
}

/* Style du bouton secondaire */
.btn-secondary {
    display: inline-block;
    background-color: #607d8b; /* Couleur secondaire conservée */
    color: white;
    padding: 10px 20px;
    text-decoration: none;
    border-radius: 8px; /* Bords légèrement plus arrondis */
    transition: background-color 0.3s ease, transform 0.2s ease, box-shadow 0.3s ease; /* Ajout box-shadow pour la transition */
    font-weight: 700; /* Fort */
    font-size: 0.9em;
    letter-spacing: 0.5px;
    font-family: 'Playfair Display', serif; /* Playfair Display pour les boutons secondaires */
}

.btn-secondary:hover {
    background-color: #45a049;
    transform: translateY(-5px); /* EFFET PLUS PRONONCÉ */
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.3); /* OMBRE PLUS VISIBLE */
}

/* Nouvelle Section : Témoignages */
.testimonials-section {
    padding: 80px 20px;
    text-align: center;
    background-color: #FAF5E8; /* Nouveau: Beige rosé pour les témoignages */
}

.testimonials-section h2 {
    font-size: 2.8em;
    color: #2c3e50;
    font-weight: 800; /* Extra gras */
    margin-bottom: 20px;
    font-family: 'Playfair Display', serif; /* Playfair Display pour les titres H2 des sections */
}

.testimonials-section .section-intro {
    font-size: 1.2em;
    color: #6A615C; /* Nouveau: Brun-gris chaud pour l'intro de section */
    max-width: 900px;
    margin: 0 auto 50px auto;
    font-weight: 400; /* Poids normal pour la douceur */
    font-family: 'Georgia', serif; /* Georgia pour les intros de section */
}

.testimonials-grid {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 30px;
    max-width: 1200px;
    margin: 0 auto;
}

.testimonial-item {
    background-color: #FFFDF5; /* Nouveau: Crème légèrement doré pour les éléments de témoignage */
    border-radius: 10px;
    padding: 30px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.08);
    text-align: left;
    width: 100%;
    max-width: 350px;
    transition: transform 0.3s ease, box-shadow 0.3s ease; /* Ajout transition pour l'animation */
}

.testimonial-item:hover {
    transform: translateY(-8px); /* EFFET PLUS PRONONCÉ */
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.2); /* OMBRE PLUS VISIBLE */
}

.testimonial-item .quote {
    font-size: 1.1em;
    font-style: italic;
    line-height: 1.7;
    color: #6A615C; /* Nouveau: Brun-gris chaud pour les citations */
    margin-bottom: 15px;
    font-weight: 400; /* Poids normal pour l'italique */
    font-family: 'Georgia', serif; /* Georgia pour les citations */
}

.testimonial-item .author {
    font-size: 0.95em; /* Légèrement plus grand */
    font-weight: 700; /* Fort */
    color: #4CAF50;
    font-family: 'Playfair Display', serif; /* Playfair Display pour les auteurs */
}

/* Styles spécifiques aux pages de contenu (.page-content) */
.page-content {
    padding: 80px 20px;
    max-width: 900px; /* Largeur maximale de la section de contenu */
    margin: 0 auto;
    background-color: #FAF5E8; /* Nouveau: Beige rosé pour les pages de contenu */
    border-radius: 10px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.08);
    margin-top: 50px; /* Ajusté: Le padding du body gère le décalage de la navbar */
    margin-bottom: 50px;
    text-align: center;
}

.page-content h1 { /* Titre principal des pages de contenu */
    font-size: 3em;
    color: #2c3e50;
    font-weight: 800; /* Extra gras */
    margin-bottom: 20px;
    font-family: 'Playfair Display', serif; /* Playfair Display pour les titres H1 des pages de contenu */
}

.page-content .section-intro { /* Intro des pages de contenu */
    font-size: 1.2em;
    line-height: 1.7;
    color: #6A615C; /* Nouveau: Brun-gris chaud pour les intros de pages de contenu */
    text-align: center;
    margin-bottom: 40px;
    font-weight: 400; /* Poids normal pour la douceur */
    font-family: 'Georgia', serif; /* Georgia pour les intros des pages de contenu */
}

.page-content ul li,
.page-content ol li {
    margin-bottom: 10px;
    color: #6A615C; /* Nouveau: Brun-gris chaud pour les listes */
    font-size: 1em;
    line-height: 1.8; /* Légèrement plus d'espacement pour les listes */
    font-weight: 400; /* Normal */
    font-family: 'Georgia', serif; /* Georgia pour les listes */
}

/* Styles spécifiques aux pages de ressources internes */
.resource-detail-section {
    background-color: #FFFDF5; /* Nouveau: Crème légèrement doré pour les sections de détails */
}

/* Styles pour le menu hamburger */
/* Par default, le bouton hamburger est masqué sur les grands écrans */
.menu-toggle {
    display: none;
    cursor: pointer;
    font-size: 1.8em;
    color: white;
}

/* Styles Responsives Simples (pour petits écrans) */
@media (max-width: 768px) {
    .navbar .container {
        flex-direction: row; /* MODIFIÉ: Garde le logo et le toggle sur la même ligne */
        justify-content: space-between; /* Espace le logo et le toggle */
        align-items: center; /* Centre verticalement */
    }

    .navbar .logo {
        margin-right: 0; /* Réinitialise la marge droite ajoutée précédemment */
    }

    .menu-toggle {
        display: block; /* Affiche le bouton hamburger sur les petits écrans */
    }

    .navbar .nav-links {
        flex-direction: column;
        width: 100%;
        position: absolute; /* POSITIONNEMENT ABSOLU pour le menu déroulant */
        top: var(--navbar-height); /* Commence juste en dessous de la navbar */
        left: 0;
        background-color: #2c3e50; /* Même fond que la navbar pour la cohérence */
        padding: 10px 0; /* Padding vertical */
        box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1); /* Ombre pour la profondeur */
        transform: translateY(-100%); /* HIDE: Cache le menu au-dessus de l'écran */
        transition: transform 0.3s ease-out, opacity 0.3s ease-out; /* Animation fluide */
        pointer-events: none; /* Empêche les clics quand le menu est caché */
        opacity: 0; /* Rend le menu invisible quand il est caché */
        z-index: 999; /* Assure qu'il est sous la navbar mais au-dessus du reste */
    }

    .navbar .nav-links.active {
        transform: translateY(0); /* SHOW: Fait descendre le menu */
        pointer-events: auto; /* Permet les clics */
        opacity: 1; /* Rend le menu visible */
    }

    .navbar .nav-links li {
        margin: 0; /* Supprime les marges horizontales des li */
    }

    .navbar .nav-links a {
        padding: 12px 20px; /* Ajoute un padding plus généreux pour les éléments de menu */
        display: block; /* Rend chaque lien un bloc pour faciliter le clic */
        text-align: left; /* Align les liens à gauche dans le menu déroulant */
        border-bottom: 1px solid rgba(255, 255, 255, 0.1); /* Ligne de séparation subtile */
    }

    .navbar .nav-links li:last-child a {
        border-bottom: none; /* Pas de bordure pour le dernier élément */
    }

    .navbar .nav-links a:hover {
        background-color: #34495e; /* Changement de fond au survol */
    }

    .hero-section {
        padding: 80px 15px; /* Optimisé: supprime la répétition padding-top/bottom */
    }

    .hero-section h1 {
        font-size: 2.5em; /* Taille plus petite sur mobile */
    }

    .hero-section p {
        font-size: 1.1em; /* Taille plus petite sur mobile */
    }

    .problem-solution-section h2,
    .our-solutions-section h2,
    .testimonials-section h2 {
        font-size: 2.2em; /* Titres de section plus petits sur mobile */
    }

    .problem-solution-section .section-intro,
    .our-solutions-section .section-intro,
    .testimonials-section .section-intro {
        font-size: 1.1em; /* Intro de section plus petite sur mobile */
    }

    /* Styles Responsives pour la page Nos Solutions */
    .solution-category-item {
        max-width: none; /* Occupe toute la largeur sur petits écrans */
        padding: 20px;
    }

    /* Styles Responsives pour la page Ressources & Outils */
    .resource-category {
        max-width: none;
        padding: 20px;
        padding-top: 20px; /* Retour au padding normal du composant */
        margin-top: 0; /* Plus de marge négative */
        background-color: #FAF5E8; /* Nouveau: Beige rosé pour les catégories de ressources */
        transition: transform 0.3s ease, box-shadow 0.3s ease; /* Ajout transition pour l'animation */
    }

    .resource-category:hover {
        transform: translateY(-8px); /* EFFET PLUS PRONONCÉ */
        box-shadow: 0 12px 30px rgba(0, 0, 0, 0.2); /* OMBRE PLUS VISIBLE */
    }

    .resource-list li .btn-discover {
        width: auto;
    }

    .resource-list li {
        transition: transform 0.3s ease, box-shadow 0.3s ease; /* Ajout transition pour l'animation */
        background-color: #FFFDF5; /* Nouveau: Crème légèrement doré pour les listes de ressources */
        border-radius: 8px; /* Assure que les corners sont arrondis pour l'ombre */
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05); /* Ombre légère par default */
    }

    .resource-list li:hover {
        transform: translateY(-3px); /* EFFET PLUS PRONONCÉ */
        box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1); /* OMBRE PLUS VISIBLE */
    }

    /* Styles spécifiques pour l'image d'introduction de la page */
    .page-hero-image {
        aspect-ratio: 4 / 3; /* Définit un ratio d'aspect fixe pour toutes les tailles d'écran */
        object-fit: cover; /* Assure que l'image couvre le cadre sans déformation, en recadrant si nécessaire */
    }

    /* Ajustement de la marge supérieure pour les pages de contenu sur mobile */
    .page-content {
        margin-top: 20px; /* Moins de marge sur mobile, sans la navbar */
        padding: 40px 15px; /* Réduit le padding sur mobile */
    }

    .page-content h1 { /* Titre principal des pages de contenu sur mobile */
        font-size: 2.2em;
    }

    .page-content .section-intro { /* Intro des pages de contenu sur mobile */
        font-size: 1em;
    }

    /* Styles spécifiques aux pages de ressources internes */
    .resource-detail-section {
        background-color: #FFFDF5; /* Nouveau: Crème légèrement doré pour les sections de détails */
    }

    .resource-detail-section h2 {
        font-size: 1.8em;
    }

    .resource-detail-section p {
        font-size: 1em;
    }

    .resource-detail-section ul,
    .resource-detail-section ol {
        margin-left: 15px; /* Réduit la marge pour les listes */
    }

    .download-link {
        padding: 12px 25px;
        font-size: 1em;
    }

    .menu-table,
    .budget-table,
    .family-plan-table {
        font-size: 0.85em; /* Réduit un peu la taille de la police des tableaux */
        display: block; /* Permet le défilement horizontal */
        overflow-x: auto; /* Ajoute une barre de défilement si le tableau est trop large */
        white-space: nowrap; /* Empêche les cellules de passer à la ligne */
    }

    .shopping-list {
        columns: 1; /* Une seule colonne sur mobile */
        column-gap: 0;
    }

    .rayon-list .rayon-items,
    .bases-combinatoires-grid,
    .batch-cooking-plans-grid,
    .conservation-tips-grid,
    .recipe-grid,
    .compost-steps-grid {
        grid-template-columns: 1fr; /* Une seule colonne sur mobile pour les grilles */
    }

    .impulsive-checklist li,
    .batch-cooking-checklist li {
        font-size: 1em;
        padding: 12px 15px;
        background-color: #F8E7E4; /* Nouveau: Rose poudré pour les éléments de checklist */
    }

    .impulsive-checklist li i,
    .batch-cooking-checklist li i {
        font-size: 1.2em;
    }

    .conservation-tips-category h3 {
        font-size: 1.5em;
    }

    .conservation-tips-category {
        background-color: #F8E7E4; /* Nouveau: Rose poudré pour les catégories de conservation */
    }

    .recipe-item,
    .tip-item,
    .step-item {
        background-color: #FFFDF5; /* Nouveau: Crème légèrement doré pour les éléments de recette, astuces, étapes */
    }

    .month-category {
        background-color: #F8E7E4; /* Nouveau: Rose poudré pour les mois du guide saison */
    }

    .rayon-list .rayon-category {
        background-color: #FFFDF5; /* Nouveau: Crème légèrement doré pour les catégories de rayon */
    }
}

/* --- Pied de Page (Footer) --- */
.footer {
    background-color: #2c3e50; /* Couleur de fond foncée comme la navbar */
    color: white;
    text-align: center;
    padding: 15px 20px; /* NOUVEAU: Rembourrage réduit pour une hauteur plus petite */
    /* SUPPRIMÉ: margin-top: 50px; */
    max-width: 900px; /* Largeur maximale du pied de page */
    margin-left: auto; /* Centre le pied de page */
    margin-right: auto; /* Centre le pied de page */
}

.footer p {
    margin: 0;
    font-size: 0.85em; /* Taille de police du paragraphe (inchangée) */
    line-height: 1.5;
    font-family: 'Georgia', serif; /* Georgia pour les paragraphes du footer */
    font-weight: 400;
}

.footer .brand-info {
    font-size: 1em; /* Taille de police de l'info de marque (inchangée) */
    font-weight: 700; /* Fort */
    margin-bottom: 10px;
    font-family: 'Playfair Display', serif; /* Playfair Display pour l'info de marque du footer */
}

/* --- Styles du Formulaire de Contact --- */
.contact-form {
    text-align: left; /* Aligne le texte à gauche pour les labels */
    max-width: 600px;
    margin: 0 auto;
    padding: 20px; /* Ajoute un peu de padding au formulaire lui-même */
    border-radius: 8px;
    background-color: #FFFDF5; /* Crème légèrement doré pour le formulaire */
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
}

.contact-form .form-group {
    margin-bottom: 20px;
}

.contact-form label {
    display: block; /* Chaque label sur sa propre ligne */
    margin-bottom: 8px;
    font-weight: 600; /* Gras pour les labels */
    color: #2c3e50; /* Garde la couleur sombre pour un bon contraste sur les labels */
    font-family: 'Georgia', serif; /* Georgia pour les labels du formulaire */
}

.contact-form input[type="text"],
.contact-form input[type="email"],
.contact-form textarea {
    width: 100%; /* Prend toute la largeur disponible */
    padding: 12px;
    border: 1px solid #ddd;
    border-radius: 5px;
    box-sizing: border-box; /* Inclut padding et border dans la largeur */
    font-size: 1em;
    font-family: 'Georgia', serif; /* Utilise la nouvelle police Georgia */
    font-weight: 400; /* Normal */
    transition: border-color 0.3s ease;
}

.contact-form input[type="text"]:focus,
.contact-form input[type="email"]:focus,
.contact-form textarea:focus {
    border-color: #4CAF50; /* Bordure verte au focus */
    outline: none; /* Supprime l'outline par default du navigateur */
}

.contact-form textarea {
    resize: vertical; /* Permet le redimensionnement vertical uniquement */
    min-height: 120px;
}

.contact-form button[type="submit"] {
    display: inline-block;
    background-color: #4CAF50;
    color: white;
    padding: 15px 30px;
    text-decoration: none;
    border: none; /* Supprime la bordure du bouton */
    border-radius: 8px; /* Bords légèrement plus arrondis */
    transition: background-color 0.3s ease, transform 0.2s ease, box-shadow 0.3s ease; /* Ajout box-shadow pour la transition */
    font-weight: 700; /* Fort */
    font-size: 1.1em;
    cursor: pointer; /* Indique que le bouton est cliquable */
    letter-spacing: 0.5px;
    font-family: 'Playfair Display', serif; /* Playfair Display pour les boutons de soumission */
}

.contact-form button[type="submit"]:hover {
    background-color: #45a049;
    transform: translateY(-5px); /* EFFET PLUS PRONONCÉ */
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.3); /* OMBRE PLUS VISIBLE */
}

/* Styling for Font Awesome icons */
.solution-item h3 i,
.resource-category h2 i, /* Correction de la sélection pour les titres de catégorie de ressources */
.page-content .contact-icon {
    color: #4CAF50; /* Green color for icons */
    margin-right: 10px; /* Space between icon and text */
    font-size: 1.3em; /* Légèrement plus grand */
    vertical-align: middle; /* Align icon vertically with text */
}

/* Specific adjustment for the contact icon */
.page-content .contact-icon {
    font-size: 3.5em; /* Larger icon for the contact page */
    margin-bottom: 20px;
    display: block; /* Ensures it takes its own line */
}
#planification-strategique-onglet,
#courses-intelligentes-onglet,
#batch-cooking-simplifie-onglet,
#astuces-anti-gaspillage-onglet {
    scroll-margin-top: 80px; /* C'est la ligne magique ! Ajustez cette valeur si votre barre de navigation a une hauteur différente. */
}