/* --- START OF FILE hydro.css --- */

/* ===========================
   RESET GLOBAL
=========================== */
*, *::before, *::after {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
    -webkit-text-size-adjust: 100%; /* Empêche le redimensionnement du texte sur iOS en orientation paysage */
}

/* ===========================
   VARIABLES GLOBALES
=========================== */
:root {
    /* Couleurs */
    --primary: #4CAF50; /* Vert principal, plus vif pour les accents et CTA */
    --primary-dark: #45a049; /* Vert foncé, pour les dégradés et hover */
    --primary-light: #e8f5e9; /* Vert très clair pour fonds subtils (e.g., tips-box) */
    --background: #f5f7fa; /* Fond général de la page */
    --background-alt: #ffffff; /* Fond pour les blocs de contenu (cartes, sections) */
    --text-color: #2c3e50; /* Couleur de texte principale foncée (inspirée des H3 inline) */
    --text-color-light: #666; /* Couleur de texte secondaire plus claire */
    --border-color: #e0e0e0; /* Couleur de bordure générale */

    /* Espacements et Tailles */
    --spacing-xs: 5px;
    --spacing-sm: 10px;
    --spacing-md: 15px;
    --spacing-lg: 20px;
    --spacing-xl: 30px;
    --spacing-xxl: 40px;

    /* Rayons et Ombres */
    --border-radius-sm: 6px; /* Pour les boutons, petites cartes */
    --border-radius-md: 8px; /* Pour les sections, images */
    --border-radius-lg: 12px; /* Pour les CTA box */
    --shadow-sm: 0 2px 4px rgba(0,0,0,0.06); /* Ombre légère */
    --shadow-md: 0 4px 12px rgba(0,0,0,0.1); /* Ombre standard */
    --shadow-lg: 0 6px 20px rgba(76, 175, 80, 0.3); /* Ombre accentuée (CTA) */
    --shadow-strong: 0 6px 15px rgba(0,0,0,0.15); /* Ombre plus forte pour le hover */

    /* Typographie */
    --font-family-body: 'Lato', Arial, sans-serif;
    --font-family-heading: 'Merriweather', serif; /* Si utilisées, sinon Arial */
    --font-size-base: 16px;
}

/* ===========================
   GLOBAL STYLES (BODY & TYPO)
=========================== */
body {
    font-family: var(--font-family-body);
    font-size: var(--font-size-base);
    line-height: 1.7;
    background: var(--background);
    color: var(--text-color);
    padding-top: 0; /* Le padding-top est géré par le margin-top du .site-container */
}

h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-family-heading); /* Utiliser une police avec empattement pour les titres si Merriweather est chargée */
    color: var(--text-color);
    line-height: 1.3;
    margin-bottom: var(--spacing-md);
}

h1 { font-size: 2.3rem; margin-bottom: var(--spacing-lg); color: var(--primary); }
h2 { font-size: 1.8rem; margin-bottom: var(--spacing-lg); color: var(--primary); }
h3 { font-size: 1.5rem; margin-bottom: var(--spacing-md); color: var(--text-color); }
h4 { font-size: 1.2rem; margin-bottom: var(--spacing-sm); }
p { margin-bottom: var(--spacing-md); color: var(--text-color-light); }

a {
    color: var(--primary);
    text-decoration: none;
    transition: color 0.3s ease, text-decoration 0.3s ease;
}
a:hover {
    color: var(--primary-dark);
    text-decoration: underline; /* Garde le soulignement par défaut pour les liens généraux */
}

img {
    max-width: 100%;
    height: auto;
    display: block;
}

/* ===========================
   UTILITIES
=========================== */
.container {
    width: 90%;
    max-width: 1200px;
    margin: auto;
    padding-left: var(--spacing-md); /* Pour éviter le contact avec le bord sur mobile */
    padding-right: var(--spacing-md);
}

/* Barre de progression de lecture */
.reading-progress {
    position: fixed;
    top: 0;
    left: 0;
    height: 4px;
    background: linear-gradient(90deg, #2196F3, #1976D2); /* Changé en dégradé bleu avec !important */
    width: 0%;
    transition: width 0.2s ease;
    z-index: 10000;
    box-shadow: 0 2px 4px rgba(var(--primary-dark), 0.3);
}

/* === Header Hydroponie Moderne === */
/* Supprime tout éventuel espace en haut */
html, body {
    margin: 0;
    padding: 0;
}

/* === Header Hydroponie Moderne === */
.site-header {
    background: linear-gradient(135deg, #2e8f57 0%, #1f6a40 100%);
    height: 120px; /* hauteur demandée - Sera écrasée dans la media query pour mobile */
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    overflow: visible; /* Sera écrasée dans la media query pour mobile */
    margin: 0;
    padding: 0;
    z-index: 9999;
    box-shadow: 0 4px 20px rgba(0,0,0,0.18);
}

/* Motif SVG hydroponie */
.site-header::before {
    content: '';
    position: absolute;
    inset: 0;
    background:
        url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='60' height='60' viewBox='0 0 60 60'><circle cx='15' cy='15' r='3' fill='rgba(255,255,255,0.08)'/><circle cx='45' cy='25' r='2' fill='rgba(255,255,255,0.08)'/><circle cx='30' cy='45' r='3' fill='rgba(255,255,255,0.08)'/><circle cx='10' cy='35' r='2' fill='rgba(255,255,255,0.06)'/><circle cx='50' cy='10' r='2' fill='rgba(255,255,255,0.05)'/></svg>")
        repeat;
    background-size: 80px 80px;
    opacity: 0.55;
    pointer-events: none;
}

/* Contenu interne centré verticalement dans les 120px */
.header-content {
    max-width: 1200px; /* Utilisation de la valeur maximale du container */
    height: 100%; /* Sera écrasée dans la media query pour mobile */
    margin: 0 auto;
    padding: 0 var(--spacing-md); /* Utilisation de la variable correcte */
    display: flex;
    align-items: center;
    justify-content: space-between;
    position: relative;
    z-index: 2;
}

/* Logo container pour alignement de l'icône et du titre */
.logo-container .logo-link {
    display: flex;
    align-items: center;
    text-decoration: none; /* Supprime le soulignement par défaut du lien */
}

/* Style de l'icône SVG */
.logo-container .logo-icon {
    width: 35px; /* Taille de l'icône */
    height: 35px;
    margin-right: var(--spacing-sm); /* Espace entre l'icône et le texte */
    fill: white; /* Couleur de l'icône */
    filter: drop-shadow(0 2px 3px rgba(0,0,0,0.35)); /* Ombre subtile pour l'icône */
}

/* Titre avec dégradé */
.logo-container .site-title {
    font-family: var(--font-family-heading); /* Utilise la police des titres */
    font-size: 2.2rem;
    font-weight: 700;
    /* Styles pour le dégradé */
    background-image: linear-gradient(45deg, #a8e063, #56ab2f); /* Dégradé vert clair à vert foncé */
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent; /* Fallback pour les navigateurs non compatibles */
    display: inline-block; /* Essentiel pour que background-clip fonctionne */
    text-shadow: none; /* Supprime l'ombre de texte pour ne pas interférer avec le dégradé */
    transition: transform 0.25s ease;
}

.logo-container .site-title:hover {
    transform: translateY(-2px);
    /* Pas d'ombre de texte sur le hover pour le dégradé */
}

/* Navigation principale - Liens en forme de bouton */
.main-navigation ul {
    list-style: none;
    display: flex;
    gap: var(--spacing-md); /* Espacement entre les boutons */
}

.main-navigation a {
    color: white; /* Couleur du texte des boutons */
    background-color: rgba(255, 255, 255, 0.15); /* Fond légèrement transparent */
    font-weight: bold;
    padding: var(--spacing-sm) var(--spacing-md); /* Padding des boutons */
    display: block;
    border-radius: var(--border-radius-sm); /* Coins arrondis */
    transition: all 0.3s ease; /* Transition douce pour toutes les propriétés */
    text-decoration: none; /* Pas de soulignement */
    box-shadow: 0 2px 6px rgba(0,0,0,0.2); /* Ombre subtile */
    border: 1px solid rgba(255, 255, 255, 0.2); /* Bordure légère */
}

.main-navigation a:hover {
    background-color: rgba(255, 255, 255, 0.3); /* Plus opaque au survol */
    transform: translateY(-3px); /* Effet de "lift" */
    box-shadow: 0 4px 10px rgba(0,0,0,0.35); /* Ombre plus prononcée au survol */
    border-color: rgba(255, 255, 255, 0.4); /* Bordure plus visible */
}

.mobile-menu-toggle {
    display: none; /* Masqué par défaut sur desktop */
    font-size: 1.8rem;
    background: none;
    border: none;
    color: #ffffff; /* Couleur du toggle en blanc pour le header */
    cursor: pointer;
    padding: 0 var(--spacing-sm);
    transition: color 0.3s ease;
}

.mobile-menu-toggle:hover {
    color: var(--primary-light); /* Changement de couleur au survol */
}



/* ===========================
   MAIN LAYOUT & CONTENT
=========================== */
.site-container {
    max-width: 980px;
    margin: var(--spacing-xxl) auto 0 auto; /* Augmente la marge supérieure pour le header, centre, et pas de marge inférieure automatique */
    display: block; /* Supprime le layout de grille pour une seule colonne centrée */
    padding: 0 var(--spacing-md);
    margin-top: 140px; /* Espace pour le header fixe (120px) + un espacement supplémentaire - Sera écrasée dans la media query pour mobile */
}

.main-content {
    width: 100%; /* S'assure qu'il prend toute la largeur disponible dans le conteneur */
}

/* Fil d'Ariane */
.breadcrumb {
    font-size: 0.95em; /* Légèrement plus grand */
    color: var(--text-color-light);
    margin-bottom: var(--spacing-lg);
    padding: var(--spacing-sm) var(--spacing-md); /* Ajout d'un padding */
    background-color: var(--background-alt); /* Fond clair pour le faire ressortir */
    border-radius: var(--border-radius-sm); /* Bords légèrement arrondis */
    box-shadow: var(--shadow-sm); /* Petite ombre pour la profondeur */
    display: flex; /* Utilisation de flexbox pour l'alignement et les séparateurs */
    flex-wrap: wrap; /* Pour gérer le débordement sur petits écrans */
    align-items: center;
    gap: var(--spacing-xs); /* Espace entre les éléments et les séparateurs */
}

.breadcrumb a {
    color: var(--text-color); /* Couleur plus foncée pour les liens actifs */
    text-decoration: none; /* Pas de soulignement par défaut */
    font-weight: 500; /* Un peu plus gras */
    padding: var(--spacing-xs) var(--spacing-sm); /* Padding pour une zone cliquable plus grande */
    border-radius: var(--border-radius-sm); /* Bords arrondis pour chaque lien */
    transition: background-color 0.3s ease, color 0.3s ease;
}

.breadcrumb a:hover {
    color: var(--primary-dark); /* Vert foncé au survol */
    background-color: var(--primary-light); /* Fond très clair au survol */
    text-decoration: none; /* Toujours pas de soulignement */
}

/* Style pour le séparateur */
.breadcrumb span.separator {
    color: var(--border-color); /* Couleur du séparateur */
    font-weight: normal;
    padding: 0 var(--spacing-xs); /* Réduit le padding pour le séparateur */
}

/* Style pour l'élément courant (le dernier) */
.breadcrumb span:last-child {
    color: var(--text-color-light); /* Le dernier élément est plus discret */
    font-weight: normal;
}

/* Meta informations article */
.article-meta {
    display: flex;
    flex-wrap: wrap;
    gap: var(--spacing-lg);
    padding: var(--spacing-md) 0;
    border-bottom: 2px solid var(--border-color);
    margin-bottom: var(--spacing-xxl);
    font-size: 0.9em;
    color: var(--text-color-light);
}
.article-meta span {
    display: flex;
    align-items: center;
    gap: var(--spacing-xs);
}
.article-meta a {
    color: var(--text-color-light);
}
.article-meta a:hover {
    color: var(--primary);
}

/* Images principales/réactives */
.responsive-image {
    position: relative;
    width: 100%;
    height: auto;
    margin-bottom: var(--spacing-xl);
    border-radius: var(--border-radius-md);
    overflow: hidden; /* Assure que les coins arrondis sont appliqués à l'image */
    box-shadow: var(--shadow-md);
    transition: transform .3s ease;
}
.responsive-image:hover {
    transform: scale(1.01);
}
.responsive-image img {
    width: 100%;
    height: auto;
    display: block;
    object-fit: cover; /* S'assure que l'image couvre l'espace sans distorsion */
}
figcaption {
    font-size: 0.85em;
    color: var(--text-color-light);
    text-align: center;
    padding: var(--spacing-sm) 0;
    margin-top: var(--spacing-sm);
}
.main-species-image {
    /* Styles spécifiques à l'image principale si nécessaire, hérite de responsive-image */
}

/* Bloc publicitaire (placeholder) */
.pub-block {
    margin: var(--spacing-xxl) 0;
    padding: var(--spacing-xxl);
    background: var(--background-alt);
    border: 1px dashed var(--border-color);
    text-align: center;
    color: var(--text-color-light);
    font-style: italic;
    border-radius: var(--border-radius-md);
}

/* Sommaire de la page (.page-toc) - Réintroduit et stylisé */
/* Sommaire de la page (.page-toc) - Réintroduit et stylisé */
.page-toc {
    background: var(--background-alt);
    padding: var(--spacing-lg);
    border-radius: var(--border-radius-md);
    box-shadow: var(--shadow-sm);
    border-left: 4px solid var(--primary);
    margin-bottom: var(--spacing-xl); /* Ajout d'une marge pour séparer du contenu suivant */
    
    /* Lignes pour désactiver tout comportement sticky/fixe */
    position: static !important; /* Assure que l'élément n'est ni sticky ni fixed */
    top: auto !important;       /* Annule toute valeur 'top' associée à un positionnement */
}

.page-toc strong { /* Utilisé pour le titre "Sur cette page" */
    display: block;
    margin-bottom: var(--spacing-md);
    font-size: 1.1em;
    color: var(--text-color);
}

.page-toc ul {
    list-style: none;
    padding: 0;
}

.page-toc ul li {
    margin: var(--spacing-sm) 0;
}

.page-toc a {
    color: var(--text-color-light);
    text-decoration: none; /* Supprime le soulignement par défaut */
    font-weight: 500;
    display: block; /* Rend la zone cliquable plus grande */
    padding: var(--spacing-xs) 0;
    position: relative; /* Indispensable pour positionner le pseudo-élément */
    overflow: hidden; /* S'assure que la ligne ne déborde pas pendant la transition */
    transition: color 0.3s ease; /* Transition douce pour la couleur du texte */
}

.page-toc a::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 0; /* La ligne est invisible au départ */
    height: 2px; /* Épaisseur de la ligne */
    background-color: var(--primary); /* Couleur initiale de la ligne */
    transition: width 0.3s ease-out, background-color 0.3s ease; /* Animation pour la largeur et la couleur */
}

.page-toc a:hover {
    color: var(--primary); /* Couleur du texte au survol */
}

.page-toc a:hover::after {
    width: 100%; /* La ligne s'étend sur toute la largeur au survol */
    background-color: var(--primary-dark); /* La ligne change de couleur au survol */
}


/* Sections de contenu */
.intro-area,
.content-section {
    background: var(--background-alt);
    padding: var(--spacing-xl);
    margin-bottom: var(--spacing-xl);
    border-radius: var(--border-radius-md);
    box-shadow: var(--shadow-sm);
}


.content-section:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-strong);
}

.content-section h2 {
    font-size: 1.7rem;
    margin-bottom: var(--spacing-md);
    color: var(--primary);
}

.content-section p {
    margin-bottom: var(--spacing-md);
    color: var(--text-color-light);
}



/* Listes */
.modern-list,
.steps-list {
    padding-left: var(--spacing-lg);
    margin: var(--spacing-md) 0;
    list-style: disc; /* Style de liste par défaut */
}

.modern-list li,
.steps-list li {
    margin: var(--spacing-xs) 0;
    color: var(--text-color-light);
}

/* Boîte à astuces */
.tips-box {
    margin: var(--spacing-xl) 0;
    padding: var(--spacing-md) var(--spacing-lg);
    background: var(--primary-light); /* Utilise la variable pour le vert clair */
    border-left: 4px solid var(--primary);
    border-radius: var(--border-radius-md);
    box-shadow: var(--shadow-sm);
    color: var(--text-color); /* Texte plus foncé pour un meilleur contraste */
}

.tips-box strong {
    color: var(--primary-dark);
}

/* ===========================
   FAQ SECTION (ACCORDION)
=========================== */
.faq-section {
    margin: var(--spacing-xxl) 0;
    background: var(--background); /* Fond léger pour la section FAQ */
    padding: var(--spacing-xl);
    border-radius: var(--border-radius-md);
    box-shadow: var(--shadow-sm);
}

.faq-section h2 {
    text-align: center;
    margin-bottom: var(--spacing-xxl);
    color: var(--primary);
}

.faq-item {
    background: var(--background-alt);
    margin-bottom: var(--spacing-md);
    border-radius: var(--border-radius-sm);
    overflow: hidden;
    border: 1px solid var(--border-color);
    box-shadow: var(--shadow-sm);
}

.faq-question {
    padding: var(--spacing-lg);
    cursor: pointer;
    font-weight: bold;
    display: flex;
    justify-content: space-between;
    align-items: center;
    transition: background 0.3s ease;
    color: var(--text-color);
}

.faq-question:hover {
    background: #f0f0f0; /* Un gris très clair au survol */
}

.faq-question::after {
    content: '+';
    font-size: 1.5rem;
    line-height: 1; /* Assure un alignement correct */
    transition: transform 0.3s ease;
    color: var(--primary);
}

.faq-question.active::after {
    transform: rotate(45deg);
}

.faq-answer {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease-out; /* Plus doux lors de la fermeture */
    padding: 0 var(--spacing-lg);
    color: var(--text-color-light);
}

.faq-answer p {
    padding: var(--spacing-lg) 0;
    margin: 0;
}

/* ===========================
   RELATED ARTICLES
=========================== */
.related-articles {
    background: var(--background);
    padding: var(--spacing-xl);
    margin: var(--spacing-xxl) 0;
    border-radius: var(--border-radius-md);
    border-left: 4px solid var(--primary);
    box-shadow: var(--shadow-sm);
}

.related-articles h3 {
    margin-top: 0;
    color: var(--text-color);
    font-size: 1.5em;
    margin-bottom: var(--spacing-xl);
}

.related-articles ul {
    list-style: none;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: var(--spacing-md);
}

.related-articles li a {
    display: block;
    padding: var(--spacing-md);
    background: var(--background-alt);
    border-radius: var(--border-radius-sm);
    text-decoration: none;
    color: var(--text-color);
    transition: all 0.3s ease;
    border: 1px solid var(--border-color);
    box-shadow: var(--shadow-sm);
}

.related-articles li a:hover {
    transform: translateY(-3px);
    box-shadow: var(--shadow-md);
    border-color: var(--primary);
}

.related-articles li a strong {
    display: block;
    margin-bottom: var(--spacing-xs);
    color: var(--primary-dark);
}
.related-articles li a p {
    font-size: 0.9em;
    margin: 0;
    color: var(--text-color-light);
}

/* ===========================
   CALL-TO-ACTION (CTA)
=========================== */
.cta-box {
    background: linear-gradient(135deg, var(--primary) 0%, var(--primary-dark) 100%);
    color: white;
    padding: var(--spacing-xxl);
    margin: var(--spacing-xxl) 0;
    border-radius: var(--border-radius-lg);
    text-align: center;
    box-shadow: var(--shadow-lg);
}

.cta-box h3 {
    margin-top: 0;
    font-size: 1.8em;
    color: white; /* Titre blanc sur fond coloré */
}
.cta-box p {
    color: rgba(255, 255, 255, 0.9); /* Texte légèrement transparent */
}

.cta-button {
    display: inline-block;
    background: white;
    color: var(--primary);
    padding: var(--spacing-md) var(--spacing-xxl);
    border-radius: var(--border-radius-sm);
    text-decoration: none;
    font-weight: bold;
    margin-top: var(--spacing-lg);
    transition: all 0.3s ease;
    box-shadow: var(--shadow-md);
    border: none; /* S'assurer qu'il n'y a pas de bordure par défaut */
    cursor: pointer;
}

.cta-button:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 15px rgba(0,0,0,0.3);
    color: var(--primary-dark);
}

/* ===========================
   FOOTER
=========================== */
.site-footer {
    background: var(--text-color); /* Fond sombre pour le footer */
    color: white;
    padding: var(--spacing-xxl) var(--spacing-md);
    font-size: 0.9em;
}

.footer-columns {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: var(--spacing-xxl);
    max-width: 1200px;
    margin: 0 auto var(--spacing-xl); /* Centre les colonnes et ajoute une marge en bas */
}

.footer-column p.footer-title { /* Ciblage spécifique des titres de colonne */
    font-weight: bold;
    margin-bottom: var(--spacing-md);
    color: var(--primary); /* Titres de colonne en vert */
}

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

.footer-column ul li {
    margin-bottom: var(--spacing-sm);
}

.footer-column ul li a {
    color: rgba(255, 255, 255, 0.7); /* Couleur des liens, légèrement transparente */
    transition: color 0.3s ease;
}

.footer-column ul li a:hover {
    color: var(--primary); /* Devient vert au survol */
    text-decoration: none; /* Pas de soulignement au survol */
}

.copyright {
    text-align: center;
    margin-top: var(--spacing-lg);
    padding-top: var(--spacing-lg);
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    color: rgba(255, 255, 255, 0.6); /* Texte copyright plus discret */
}

/* ===========================
   RESPONSIVE DESIGN (PARTIE FOOTER)
=========================== */

/* Tablette (largeur max 992px) */
@media (max-width: 992px) {
    .footer-columns {
        grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); /* Moins de colonnes ou plus petites sur tablette */
        gap: var(--spacing-lg); /* Réduit l'espacement */
    }
}

/* Mobile très petit (largeur max 480px) */
@media (max-width: 480px) {
    .footer-columns {
        grid-template-columns: 1fr; /* Une seule colonne pour le footer sur très petit mobile */
        text-align: center; /* Centre le texte */
    }
    .footer-column ul {
        margin-bottom: var(--spacing-lg); /* Marge entre les listes de liens */
    }
}

/* ===========================
   BACK TO TOP BUTTON
=========================== */
.back-to-top {
    position: fixed;
    bottom: var(--spacing-xl);
    right: var(--spacing-xl);
    background-color: var(--primary);
    color: white;
    border: none;
    border-radius: 50%;
    width: var(--spacing-xxl);
    height: var(--spacing-xxl);
    font-size: 1.5rem;
    line-height: var(--spacing-xxl);
    text-align: center;
    cursor: pointer;
    box-shadow: var(--shadow-md);
    transition: all 0.3s ease;
    z-index: 9000;
    display: none; /* Caché par défaut */
}

.back-to-top.visible {
    display: block;
}

.back-to-top:hover {
    background-color: var(--primary-dark);
    transform: translateY(-3px);
    box-shadow: var(--shadow-lg);
}

/* ===========================
   EXPERT TIP BOX
=========================== */
.expert-tip-box {
    background: linear-gradient(135deg, #e0f2f7 0%, #c1e4f0 100%); /* Dégradé doux bleu-vert */
    border-left: 6px solid #2196F3; /* Bordure plus épaisse et d'une couleur d'information */
    border-radius: var(--border-radius-md);
    padding: var(--spacing-xl);
    margin: var(--spacing-xxl) 0; /* Espacement important avant et après */
    box-shadow: 0 4px 15px rgba(0, 100, 200, 0.1); /* Ombre légère avec une touche de bleu */
    display: flex;
    align-items: flex-start; /* Aligne l'icône en haut */
    gap: var(--spacing-md);
    font-family: var(--font-family-body);
    color: var(--text-color);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.expert-tip-box:hover {
    transform: translateY(-5px); /* Effet de léger soulèvement au survol */
    box-shadow: 0 8px 20px rgba(0, 100, 200, 0.15); /* Ombre plus prononcée */
}

.expert-tip-box .icon {
    flex-shrink: 0; /* Empêche l'icône de rétrécir */
    width: 45px; /* Taille de l'icône */
    height: 45px;
    fill: #2196F3; /* Couleur de l'icône */
    margin-top: var(--spacing-xs); /* Ajustement pour aligner l'icône */
}

.expert-tip-box .content-wrapper {
    flex-grow: 1; /* Permet au contenu de prendre l'espace restant */
}

.expert-tip-box h3 {
    font-family: var(--font-family-heading);
    color: #1976D2; /* Un bleu plus foncé pour le titre */
    font-size: 1.35rem;
    margin-top: 0; /* Annule la marge supérieure par défaut des h3 */
    margin-bottom: var(--spacing-sm);
    line-height: 1.2;
}

.expert-tip-box p {
    color: var(--text-color); /* Texte légèrement plus clair que le texte principal */
    margin-bottom: 0; /* Annule la marge par défaut des p pour la dernière phrase */
    font-size: 1.05em;
}

.expert-tip-box p:last-of-type {
    margin-top: var(--spacing-sm);
    font-style: italic;
    font-size: 0.95em;
    color: var(--text-color-light);
}

/* RESPONSIVE pour l'expert-tip-box */
@media (max-width: 768px) {
    .expert-tip-box {
        flex-direction: column; /* L'icône et le texte s'empilent */
        align-items: center; /* Centre le contenu en mode colonne */
        text-align: center;
        padding: var(--spacing-lg);
    }
    .expert-tip-box .icon {
        margin-bottom: var(--spacing-sm);
        margin-top: 0; /* Supprime l'ajustement de marge pour l'alignement */
    }
    .expert-tip-box h3 {
        font-size: 1.2rem;
    }
    .expert-tip-box p {
        font-size: 1em;
    }
}

@media (max-width: 480px) {
    .expert-tip-box {
        padding: var(--spacing-md);
    }
    .expert-tip-box .icon {
        width: 40px;
        height: 40px;
    }
    .expert-tip-box h3 {
        font-size: 1.1rem;
    }
}


/* ===========================
   RESPONSIVE DESIGN
=========================== */

/* === Responsive Design === */
@media (max-width: 1024px) {
    .site-container {
        /* Plus besoin de grid-template-columns ici si flex-direction: column est déjà sur site-container */
    }
    
    /* REMOVED .sidebar styles */
    .page-toc {
        position: static;
    }
    .pub-block {
        max-width: 100%; /* Permet au bloc pub de prendre plus de largeur sur les écrans moyens */
        align-self: center; /* Centre le bloc pub sur les écrans moyens */
    }
}


@media (max-width: 768px) {
    :root {
        --space-xs: 0.4rem;
        --space-sm: 0.8rem;
        --space-md: 1.2rem;
        --space-lg: 1.6rem;
        --space-xl: 2.2rem;
        --space-2xl: 3rem;
    }
    
    /* MODIFICATION 1: Permet au header de s'adapter à la hauteur de son contenu et de ne pas le cacher */
    .site-header {
        height: auto;       /* Permet au header de s'étendre avec son contenu */
        overflow: visible;  /* Permet au contenu (comme le menu développé) d'être visible en dehors des limites initiales du header */
    }

    .header-content {
        flex-wrap: wrap;
        justify-content: space-between;
        /* MODIFICATION 2: Aligne les éléments en haut lorsque le contenu s'enroule */
        align-items: flex-start; /* Important pour les conteneurs flex multi-lignes pour aligner les éléments vers le haut */
        height: auto; /* Assure que le header-content grandit aussi avec .site-header */
    }

    .logo-container {
        flex-basis: 80%;
    }
    
    .search-container {
        order: 3;
        width: 100%;
        margin-top: var(--space-md);
        max-width: none;
    }

    .main-navigation {
        display: none;
        order: 2;
        width: 100%;
        /* MODIFICATION 3: Correction des noms de variables CSS */
        background: var(--primary); /* Corrigé de --primary-color à --primary */
        margin-top: var(--space-md);
        border-radius: var(--border-radius-md); /* Corrigé de --radius-md à --border-radius-md */
        padding: var(--space-sm);
    }
    
    .main-navigation.active {
        display: block;
    }
    
    .main-navigation ul {
        flex-direction: column;
        gap: var(--space-xs);
    }

    .main-navigation li a {
        display: block;
        text-align: center;
        padding: var(--space-md);
    }
    
    .mobile-menu-toggle {
        display: block;
        background: none;
        border: none;
        /* MODIFICATION 4: Correction de la couleur pour une meilleure visibilité sur le header vert */
        color: white; /* Changé de var(--footer-text) à white */
        font-size: 2rem;
        cursor: pointer;
    }
    
    .sib-form-area {
        flex-direction: column;
    }
    
    .aquaponics-species-card { /* Renommé */
        width: 95%;
    }
    
    .content-section {
        padding: var(--space-lg);
    }

    .pub-block {
        margin-left: 0; /* Supprime le margin auto pour une meilleure adaptation mobile */
        margin-right: 0;
    }

    /* MODIFICATION 5: Ajuste la marge supérieure du .site-container pour tenir compte du header fixe étendu */
    .site-container {
        /* La hauteur par défaut du header est de 120px. Avec le menu ouvert, il peut être beaucoup plus grand.
           Cette valeur est une estimation large pour laisser suffisamment d'espace.
           Une solution plus robuste impliquerait du JavaScript pour calculer la hauteur réelle du header. */
        margin-top: 280px; /* Augmenté pour laisser plus d'espace au header développé */
    }
}

@media (max-width: 500px) {
    .player-controls {
        row-gap: var(--space-sm);
    }
    
    .progress-container {
        flex-basis: 100%;
        order: 2;
    }
    
    .play-pause-btn {
        order: 1;
    }
    
    .volume-control {
        order: 1;
        margin-left: auto;
    }

    .volume-slider {
        width: 60px;
    }

    /* MODIFICATION 6: Ajustement supplémentaire de la marge supérieure pour les très petits écrans */
    .site-container {
        margin-top: 320px; /* Marge encore plus grande si nécessaire sur les écrans très petits */
    }
}

@media (max-width: 480px) {
    .aquaponics-species-card img { /* Renommé */
        height: 250px;
    }
    
    .newsletter-box-article {
        padding: var(--space-lg);
    }
    
    .footer-columns {
        grid-template-columns: 1fr;
        text-align: center;
    }
}

/* Style spécifique fiche plante */

    .plant-data-grid {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
        gap: 1rem;
        margin-bottom: 2rem;
    }
    .data-box {
        background: #fff;
        border: 1px solid #e2e8f0;
        border-radius: 8px;
        padding: 1rem;
        text-align: center;
        box-shadow: 0 2px 4px rgba(0,0,0,0.05);
        transition: transform 0.2s;
    }
    .data-box:hover {
        transform: translateY(-2px);
        box-shadow: 0 4px 8px rgba(0,0,0,0.1);
    }
    .data-label { 
        font-size: 0.75rem; 
        text-transform: uppercase; 
        font-weight: bold; 
        color: #64748b; 
        margin-bottom: 0.5rem; 
    }
    .data-value { 
        font-size: 1.5rem; 
        font-weight: bold; 
        color: #1e293b; 
    }
    .data-sub { 
        font-size: 0.8rem; 
        color: #94a3b8; 
        margin-top: 0.25rem;
    }
    .val-ph { color: #2563eb; }
    .val-ec { color: #d97706; }
    .val-light { color: #ea580c; }
    .val-temp { color: #10b981; }
    
    /* Tableau comparatif */
    .comparison-table {
        width: 100%;
        border-collapse: collapse;
        margin: 1.5rem 0;
        background: white;
        border-radius: 8px;
        overflow: hidden;
        box-shadow: 0 2px 4px rgba(0,0,0,0.05);
    }
    .comparison-table th {
        background: #1e293b;
        color: white;
        padding: 12px;
        text-align: left;
        font-weight: 600;
    }
    .comparison-table td {
        padding: 12px;
        border-bottom: 1px solid #e2e8f0;
    }
    .comparison-table tr:last-child td {
        border-bottom: none;
    }
    .comparison-table tr:nth-child(even) {
        background: #f8fafc;
    }
    
    /* Checklist */
    .checklist {
        background: #f0fdf4;
        border-left: 4px solid #10b981;
        padding: 1.5rem;
        border-radius: 8px;
        margin: 1.5rem 0;
    }
    .checklist ul {
        list-style: none;
        padding: 0;
        margin: 1rem 0 0 0;
    }
    .checklist li {
        padding: 0.5rem 0 0.5rem 2rem;
        position: relative;
    }
    .checklist li:before {
        content: "✓";
        position: absolute;
        left: 0;
        color: #10b981;
        font-weight: bold;
        font-size: 1.2rem;
    }
    
    /* Cartes variétés */
    .variety-grid {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
        gap: 1.5rem;
        margin: 1.5rem 0;
    }
    .variety-card {
        background: white;
        border: 1px solid #e2e8f0;
        border-radius: 8px;
        padding: 1.5rem;
        box-shadow: 0 2px 4px rgba(0,0,0,0.05);
    }
    .variety-card h4 {
        color: #10b981;
        margin: 0 0 1rem 0;
    }
    .variety-trait {
        display: flex;
        justify-content: space-between;
        padding: 0.5rem 0;
        border-bottom: 1px solid #f1f5f9;
    }
    .variety-trait:last-child {
        border-bottom: none;
    }
    
    /* Warning box */
    .warning-box {
        background: #fef3c7;
        border-left: 4px solid #f59e0b;
        padding: 1.5rem;
        border-radius: 8px;
        margin: 1.5rem 0;
    }
    .warning-box h4 {
        color: #92400e;
        margin: 0 0 0.5rem 0;
    }
    
    /* Success box */
    .success-box {
        background: #d1fae5;
        border-left: 4px solid #10b981;
        padding: 1.5rem;
        border-radius: 8px;
        margin: 1.5rem 0;
    }
    .success-box h4 {
        color: #065f46;
        margin: 0 0 0.5rem 0;
    }
    
    /* Expert Tip Box */
    .expert-tip-box {
        background: #eff6ff;
        border: 1px solid #bfdbfe;
        border-radius: 8px;
        padding: 1.5rem;
        display: flex;
        gap: 1rem;
        margin: 1.5rem 0;
    }
    .expert-tip-box .icon {
        color: #2563eb;
        flex-shrink: 0;
    }
    .expert-tip-box h3 {
        margin: 0 0 0.5rem 0;
        color: #1e40af;
        font-size: 1.1rem;
    }
    .expert-tip-box p {
        margin: 0;
        color: #1e3a8a;
        font-size: 0.95rem;
    }
	
/* --- Section Conseil Expert --- */
.expert-advice-box {
    background: linear-gradient(to right, #fdfbf7, #fff); /* Fond très léger chaud */
    border: 1px solid #e0e0e0;
    border-left: 5px solid #ff9800; /* Bordure orange "Conseil" */
    border-radius: 8px;
    padding: 2rem;
    margin: 3rem 0;
    box-shadow: 0 4px 15px rgba(0,0,0,0.05);
    position: relative;
}

.expert-advice-box h3 {
    color: #e65100;
    margin-top: 0;
    font-family: 'Merriweather', serif;
    font-size: 1.4rem;
    display: flex;
    align-items: center;
    gap: 10px;
}

.expert-content {
    font-family: 'Lato', sans-serif;
    color: #424242;
    font-size: 1.1rem;
    line-height: 1.8;
    margin-bottom: 1.5rem;
    font-style: italic;
}

.expert-signature {
    display: flex;
    align-items: center;
    border-top: 1px solid #eee;
    padding-top: 1rem;
    margin-top: 1rem;
}

.expert-avatar {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    background-color: #eee;
    margin-right: 15px;
    object-fit: cover;
    border: 2px solid #fff;
    box-shadow: 0 2px 5px rgba(0,0,0,0.1);
}

.expert-meta {
    display: flex;
    flex-direction: column;
}

.expert-name {
    font-weight: bold;
    color: #333;
    font-size: 0.95rem;
}

.expert-date {
    font-size: 0.85rem;
    color: #888;
}

/* Responsive pour mobile */
@media (max-width: 600px) {
    .expert-advice-box {
        padding: 1.5rem;
    }
}	


    /* plantes */

    .plant-data-grid {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
        gap: 1rem;
        margin-bottom: 2rem;
    }
    .data-box {
        background: #fff;
        border: 1px solid #e2e8f0;
        border-radius: 8px;
        padding: 1rem;
        text-align: center;
        box-shadow: 0 2px 4px rgba(0,0,0,0.05);
        transition: transform 0.2s;
    }
    .data-box:hover {
        transform: translateY(-2px);
        box-shadow: 0 4px 8px rgba(0,0,0,0.1);
    }
    .data-label { 
        font-size: 0.75rem; 
        text-transform: uppercase; 
        font-weight: bold; 
        color: #64748b; 
        margin-bottom: 0.5rem; 
    }
    .data-value { 
        font-size: 1.5rem; 
        font-weight: bold; 
        color: #1e293b; 
    }
    .data-sub { 
        font-size: 0.8rem; 
        color: #94a3b8; 
        margin-top: 0.25rem;
    }
    .val-ph { color: #2563eb; }
    .val-ec { color: #d97706; }
    .val-light { color: #ea580c; }
    .val-temp { color: #10b981; }
    
    /* Tableau comparatif */
    .comparison-table {
        width: 100%;
        border-collapse: collapse;
        margin: 1.5rem 0;
        background: white;
        border-radius: 8px;
        overflow: hidden;
        box-shadow: 0 2px 4px rgba(0,0,0,0.05);
    }
    .comparison-table th {
        background: #1e293b;
        color: white;
        padding: 12px;
        text-align: left;
        font-weight: 600;
    }
    .comparison-table td {
        padding: 12px;
        border-bottom: 1px solid #e2e8f0;
    }
    .comparison-table tr:last-child td {
        border-bottom: none;
    }
    .comparison-table tr:nth-child(even) {
        background: #f8fafc;
    }
    
    /* Checklist */
    .checklist {
        background: #f0fdf4;
        border-left: 4px solid #10b981;
        padding: 1.5rem;
        border-radius: 8px;
        margin: 1.5rem 0;
    }
    .checklist ul {
        list-style: none;
        padding: 0;
        margin: 1rem 0 0 0;
    }
    .checklist li {
        padding: 0.5rem 0 0.5rem 2rem;
        position: relative;
    }
    .checklist li:before {
        content: "✓";
        position: absolute;
        left: 0;
        color: #10b981;
        font-weight: bold;
        font-size: 1.2rem;
    }
    
    /* Cartes variétés */
    .variety-grid {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
        gap: 1.5rem;
        margin: 1.5rem 0;
    }
    .variety-card {
        background: white;
        border: 1px solid #e2e8f0;
        border-radius: 8px;
        padding: 1.5rem;
        box-shadow: 0 2px 4px rgba(0,0,0,0.05);
    }
    .variety-card h4 {
        color: #10b981;
        margin: 0 0 1rem 0;
    }
    .variety-trait {
        display: flex;
        justify-content: space-between;
        padding: 0.5rem 0;
        border-bottom: 1px solid #f1f5f9;
    }
    .variety-trait:last-child {
        border-bottom: none;
    }
    
    /* Warning box */
    .warning-box {
        background: #fef3c7;
        border-left: 4px solid #f59e0b;
        padding: 1.5rem;
        border-radius: 8px;
        margin: 1.5rem 0;
    }
    .warning-box h4 {
        color: #92400e;
        margin: 0 0 0.5rem 0;
    }
    
    /* Success box */
    .success-box {
        background: #d1fae5;
        border-left: 4px solid #10b981;
        padding: 1.5rem;
        border-radius: 8px;
        margin: 1.5rem 0;
    }
    .success-box h4 {
        color: #065f46;
        margin: 0 0 0.5rem 0;
    }
    
    /* Expert Tip Box */
    .expert-tip-box {
        background: #eff6ff;
        border: 1px solid #bfdbfe;
        border-radius: 8px;
        padding: 1.5rem;
        display: flex;
        gap: 1rem;
        margin: 1.5rem 0;
    }
    .expert-tip-box .icon {
        color: #2563eb;
        flex-shrink: 0;
    }
    .expert-tip-box h3 {
        margin: 0 0 0.5rem 0;
        color: #1e40af;
        font-size: 1.1rem;
    }
    .expert-tip-box p {
        margin: 0;
        color: #1e3a8a;
        font-size: 0.95rem;
    }
.mistakes-grid {
    display: grid;
    gap: 1.2rem;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    margin-top: 1rem;
}

.mistake-card {
    background: #fff5f5;
    border: 1px solid #f2caca;
    padding: 1.2rem 1.4rem;
    border-radius: 12px;
    box-shadow: 0 2px 4px rgba(0,0,0,0.04);
    transition: 0.2s;
}

.mistake-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 4px 10px rgba(0,0,0,0.06);
}

	.footer-branding {
    text-align: center;
    margin-top: 1.5rem;
    font-size: 0.9rem;
    color: #e2e8f0;
}

.footer-slogan {
    margin-top: 0.3rem;
    font-style: italic;
    color: #cbd5e1;
}

.footer-update strong {
    color: #f8fafc;
}
.footer-mini-logo svg {
    width: 36px;
    height: 36px;
    display: block;
    margin: 0 auto;
}
/* ===========================
   AJOUT MENU DÉROULANT
=========================== */

/* Position relative pour le parent afin d'ancrer le sous-menu */
.main-navigation li.has-dropdown {
    position: relative;
    display: inline-block;
}

/* Style du conteneur du sous-menu (caché par défaut) */
.main-navigation .dropdown-menu {
    display: none;
    position: absolute;
    background-color: #ffffff; /* Fond blanc */
    min-width: 240px; /* Largeur suffisante pour les textes longs */
    box-shadow: 0 8px 16px rgba(0,0,0,0.2);
    border-radius: var(--border-radius-sm);
    padding: var(--spacing-xs) 0;
    z-index: 10000;
    top: 100%; /* Juste en dessous du bouton */
    left: 0;
    flex-direction: column; /* Force la liste verticale */
    gap: 0; /* Enlève l'espacement par défaut du header */
    border-top: 4px solid var(--primary); /* Petite barre verte décorative en haut */
}

/* Afficher le menu au survol */
.main-navigation li.has-dropdown:hover .dropdown-menu {
    display: flex; /* Utilise flex pour l'alignement vertical */
}

/* --- SURCHARGE DES LIENS DU SOUS-MENU --- */
/* On doit annuler le style "bouton blanc transparent" défini plus haut dans votre CSS */
.main-navigation .dropdown-menu li a {
    color: var(--text-color); /* Texte gris foncé */
    background-color: transparent; /* Pas de fond gris par défaut */
    border: none; /* Pas de bordure */
    box-shadow: none; /* Pas d'ombre */
    text-align: left; /* Texte aligné à gauche */
    padding: 12px 20px; /* Espace confortable (équivalent py-2) */
    font-weight: normal;
    display: block;
    width: 100%;
    border-radius: 0; /* Pas d'arrondi sur les liens internes */
    border-bottom: 1px solid #f1f1f1; /* Séparateur léger */
}

/* Effet au survol (hover) spécifique au sous-menu */
.main-navigation .dropdown-menu li a:hover {
    background-color: #f9fafb; /* Fond très léger au survol */
    color: var(--primary); /* Le vert (équivalent hover:text-green-600) */
    transform: none; /* On désactive l'effet de "lift" du menu principal qui ne va pas bien ici */
    text-decoration: none;
    padding-left: 25px; /* Petit effet de décalage vers la droite */
}

/* Retirer la bordure du dernier élément */
.main-navigation .dropdown-menu li:last-child a {
    border-bottom: none;
}

/* --- RESPONSIVE MOBILE POUR LE SOUS-MENU --- */
@media (max-width: 768px) {
    /* Sur mobile, on affiche le sous-menu en position relative (pas flottant) */
    .main-navigation .dropdown-menu {
        position: static;
        box-shadow: none;
        border-top: none;
        background-color: rgba(0, 0, 0, 0.05); /* Fond légèrement plus sombre que le header */
        width: 100%;
        display: none; /* Reste caché jusqu'au survol/clic */
    }

    /* Permet d'ouvrir le menu sur mobile au clic/focus */
    .main-navigation li.has-dropdown:hover .dropdown-menu,
    .main-navigation li.has-dropdown:active .dropdown-menu {
        display: flex;
    }
    
    .main-navigation .dropdown-menu li a {
        color: white; /* Texte blanc sur mobile car le header est vert */
        border-bottom: 1px solid rgba(255,255,255,0.1);
        padding-left: 30px; /* Indentation pour montrer que c'est un sous-menu */
    }
    
    .main-navigation .dropdown-menu li a:hover {
        color: var(--primary-dark); /* Vert foncé pour la lisibilité sur mobile */
        background-color: rgba(255,255,255,0.8);
    }
}
/* En-tête de page produit (centré avec texte d'accroche) */
.prod-hero {
    text-align: center;
    max-width: 800px;
    margin: 0 auto var(--spacing-xxl) auto;
    padding: 0 var(--spacing-md);
}

.prod-hero h1 {
    margin-bottom: var(--spacing-md);
}

.prod-hero .lead {
    font-size: 1.25rem; /* Texte un peu plus grand que la base */
    color: var(--text-color-light);
    font-weight: 300;
    line-height: 1.6;
}

/* Section "Choix Rapide" et Grille de Cartes */
.quick-picks {
    margin-bottom: var(--spacing-xxl);
}

.quick-picks h2 {
    text-align: center;
    margin-bottom: var(--spacing-xl);
    position: relative;
    display: inline-block;
    left: 50%;
    transform: translateX(-50%);
}

.cards {
    display: grid;
    /* Grille responsive : s'adapte automatiquement du mobile au desktop */
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: var(--spacing-lg);
    align-items: stretch; /* Force les cartes à avoir la même hauteur */
}

/* Style de la carte produit individuelle */
.card {
    background: var(--background-alt);
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius-md);
    padding: var(--spacing-lg);
    box-shadow: var(--shadow-sm);
    display: flex;
    flex-direction: column; /* Permet d'aligner les boutons en bas */
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    position: relative;
    overflow: hidden;
}

.card:hover {
    transform: translateY(-5px);
    box-shadow: var(--shadow-md);
}

/* Variantes de cartes (Bordures de couleur au sommet) */
.card.best {
    border-top: 5px solid var(--primary); /* Vert pour le meilleur choix */
}
.card.best::before {
    /* Optionnel : petit label texte si souhaité, sinon la couleur suffit */
    content: '★ Top Choix';
    position: absolute;
    top: 0;
    right: 0;
    background: var(--primary);
    color: white;
    font-size: 0.75rem;
    padding: 2px 8px;
    border-bottom-left-radius: 6px;
    font-weight: bold;
}

.card.value {
    border-top: 5px solid #3498db; /* Bleu pour le rapport qualité/prix */
}

.card.premium {
    border-top: 5px solid #9b59b6; /* Violet pour le premium */
}

/* Image produit dans la carte */
.card img {
    width: 100%;
    height: 200px; /* Hauteur fixe pour alignement */
    object-fit: contain; /* L'image ne sera pas déformée */
    margin-bottom: var(--spacing-md);
    background-color: #fff; /* Fond blanc si image PNG transparente */
}

/* Titre produit */
.card h3 {
    font-size: 1.3rem;
    text-align: center;
    margin-bottom: var(--spacing-sm);
    color: var(--text-color);
}

/* Liste des caractéristiques */
.card ul {
    list-style: none;
    padding: 0;
    margin-bottom: var(--spacing-lg);
    flex-grow: 1; /* Pousse les boutons vers le bas pour qu'ils soient alignés */
}

.card ul li {
    font-size: 0.95rem;
    color: var(--text-color-light);
    padding-left: 1.5rem;
    margin-bottom: var(--spacing-xs);
    position: relative;
    line-height: 1.5;
}

.card ul li::before {
    content: '✓'; /* Coche verte */
    color: var(--primary);
    position: absolute;
    left: 0;
    font-weight: bold;
}

/* Boutons dans les cartes (.btn et .btn.alt) */
.card .btn {
    display: block;
    width: 100%;
    text-align: center;
    padding: 10px 15px;
    border-radius: var(--border-radius-sm);
    text-decoration: none;
    font-weight: 600;
    font-size: 0.95rem;
    margin-top: var(--spacing-sm);
    transition: all 0.2s ease;
    cursor: pointer;
}

/* Bouton Secondaire (Voir l'avis) - Fond transparent */
.card .btn:not(.alt) {
    background-color: transparent;
    border: 1px solid var(--border-color);
    color: var(--text-color-light);
}

.card .btn:not(.alt):hover {
    background-color: #f0f0f0;
    color: var(--text-color);
    border-color: #ccc;
    text-decoration: none;
}

/* Bouton Primaire / Action (Voir sur Amazon) - Fond Vert */
.card .btn.alt {
    background-color: var(--primary);
    color: white;
    border: 1px solid var(--primary);
    box-shadow: 0 2px 4px rgba(0,0,0,0.15);
}

.card .btn.alt:hover {
    background-color: var(--primary-dark);
    border-color: var(--primary-dark);
    transform: translateY(-2px);
    box-shadow: 0 4px 8px rgba(0,0,0,0.2);
    color: white;
    text-decoration: none;
}
/* Styles pour les reviews produits */
    .detailed-reviews {
        margin-top: 3rem;
    }
    .product-review-block {
        background: #fff;
        border-radius: 12px;
        padding: 2rem;
        margin-bottom: 3rem;
        box-shadow: 0 4px 20px rgba(0,0,0,0.05);
    }
    .review-header h2 {
        margin-top: 0.5rem;
        color: #2c3e50;
    }
    .badge-choice, .badge-value, .badge-premium {
        text-transform: uppercase;
        font-size: 0.8rem;
        font-weight: bold;
        padding: 4px 12px;
        border-radius: 20px;
        color: white;
    }
    .badge-choice { background: #27ae60; }
    .badge-value { background: #f39c12; }
    .badge-premium { background: #8e44ad; }

    .expert-verdict {
        background: #f0f9f4;
        border-left: 4px solid #27ae60;
        padding: 1rem;
        margin: 1.5rem 0;
        font-style: italic;
    }

    /* Grille Avantages / Inconvénients */
    .pros-cons-grid {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 2rem;
        margin: 2rem 0;
    }
    @media (max-width: 768px) {
        .pros-cons-grid { grid-template-columns: 1fr; gap: 1rem; }
    }
    .pros h4 { color: #27ae60; margin-bottom: 0.5rem; }
    .cons h4 { color: #c0392b; margin-bottom: 0.5rem; }
    .pros ul, .cons ul { padding-left: 1.2rem; }
    .pros li, .cons li { margin-bottom: 0.5rem; font-size: 0.95rem; }

    /* Tableau specs */
    .specs-table {
        width: 100%;
        border-collapse: collapse;
        margin-bottom: 2rem;
        font-size: 0.9rem;
    }
    .specs-table th, .specs-table td {
        padding: 10px;
        border-bottom: 1px solid #eee;
        text-align: left;
    }
    .specs-table th { width: 40%; color: #666; }

    .review-divider {
        border: 0;
        height: 1px;
        background: #e0e0e0;
        margin: 3rem 0;
    }
    
    .btn-primary {
        display: inline-block;
        background: #27ae60;
        color: white;
        padding: 12px 25px;
        text-decoration: none;
        border-radius: 6px;
        font-weight: bold;
        transition: background 0.3s;
        text-align: center;
        width: 100%;
        max-width: 300px;
    }
    .btn-primary:hover { background: #219150; }
    .buy-action { text-align: center; }