/* ==========================================================
   FICHIER CSS ORGANISÉ – ChampiFung
   Structure revue et corrigée
========================================================== */
/*
1. Imports & Variables Globales ..................... ligne 7
2. Corps général de la page ......................... ligne 27
3. Titres & Typographie .............................. ligne 49
4. Barre de navigation personnalisée ................ ligne 72
5. Section de présentation (Hero) ................... ligne 106
6. Modales des fiches champignons ................... ligne 123
7. Boutons champignons stylisés ..................... ligne 155
8. Contenu principal (textes, fiches) ............... ligne 176
9. Bloc d’avertissement standard .................... ligne 193
10. Pop-up de sécurité au chargement ................. ligne 203
11. Sections encadrées (fiches, jumbotron) ........... ligne 221
12. Pied de page stylisé (`footer`) .................. ligne 238
13. Logo dans la navbar .............................. ligne 245
14. Responsive : adaptabilité mobile ................. ligne 251
15. Camembert interactif (SVG & modale) .............. ligne 263
16. Barre de recherche & navigation locale ........... ligne 295
17. Inventaire des sources ........................... ligne 311
18. Spécifique : page toxique (`.page-toxique`) ...... ligne 343
19. Citations & images manuscrites ................... ligne 361
20. Pied de page alternatif (`.footer`) .............. ligne 374
21. Style générique pour blockquotes, titres, conteneurs ... ligne 380
22. Style vidéo responsive ........................... ligne 396
23. Accessibilité : contraste élevé .................. ligne 420
24. QCM : réponses correctes / incorrectes ........... ligne 438
25. Accessibilité : barre fixe en haut ............... ligne 452
26. Page spécifique : Alimentation ................... ligne 460
27. Page spécifique : Remèdes ........................ ligne 490
28. Tableaux médicinaux stylisés ..................... ligne 510
29. Contenus latins, italiques et citations .......... ligne 540
========================================================== */
/* ================================
   IMPORTS & VARIABLES GLOBALES
================================ */
@import url('https://fonts.googleapis.com/css2?family=Uncial+Antiqua&family=Open+Sans:wght@400;600&display=swap');

:root {
    --mushroom-green: #3a5f0b;
    --mushroom-beige: #f5f0e1;
    --mushroom-brown: #5c4328;
    --deep-forest: #2c3e3a;
    --light-forest: #6a994e; 
    --accent-leaf: #a7c957;
    --text-dark: #2e2e2e;
    --text-light: #e0dccf;
    --gold-shadow: rgba(255, 230, 150, 0.5);
    --hero-overlay: rgba(0, 0, 0, 0.13);
}

/* ================================
   CORPS GÉNÉRAL DE LA PAGE
================================ */
body {
    padding-top: 100px; /* Adapter à la hauteur de ta navbar */
    font-family: 'Open Sans', sans-serif;
    color: var(--text-dark);
    background: url('../images/arriere_champ.png') center center / cover no-repeat fixed, url('https://www.transparenttextures.com/patterns/paper-fibers.png'), var(--mushroom-beige);
    margin: 0;
    line-height: 1.7;
    animation: fadeIn 1.5s ease-in-out;
}


/* ================================
   TITRES & TYPOGRAPHIE
================================ */
html, body, h1, h2, h3, h4, h5, h6 {
    font-family: "Comic Sans MS", cursive, sans-serif;
}

h1, h2, h3, h4, h5, h6 {
    font-family: 'Uncial Antiqua', serif;
}

h1 {
    font-size: 3rem;
    color: var(--mushroom-brown);
    text-shadow: 2px 2px 5px var(--gold-shadow);
    margin-top: 1rem;
}

h2 {
    font-size: 2rem;
    color: var(--deep-forest);
    margin-top: 2rem;
    border-bottom: 2px solid var(--accent-leaf);
    display: inline-block;
    padding-bottom: 0.5rem;
}

p.navbar-custom {
    text-align: center;
    color: red;
}
/*
====================================
        Barre de navigation personnalisée
====================================
*/

.navbar-custome {
    background: url('https://www.transparenttextures.com/patterns/leather.png'), var(--deep-forest);
    border-bottom: 5px double var(--mushroom-green);
    box-shadow: 0 3px 8px rgba(0, 0, 0, 0.3);
    padding: 0;
    font-family: 'Uncial Antiqua', serif;
}

    .navbar-custome .navbar-brand {
        color: var(--accent-leaf);
        font-size: 28px;
        padding: 16px 24px;
        text-shadow: 1px 1px 1px #000;
    }

        .navbar-custome .navbar-brand:hover {
            color: #fff;
        }

    /* Centrage des liens de navigation */
    .navbar-custome .nav {
        display: flex;
        justify-content: center;
        width: 100%;
    }

        .navbar-custome .nav > li > a {
            color: var(--text-light) !important;
            font-family: 'Uncial Antiqua', serif;
            font-size: 20px;
            padding: 16px 24px;
            text-transform: capitalize;
            text-shadow: 1px 1px 1px #000;
            border-left: 1px solid rgba(255,255,255,0.05);
            border-right: 1px solid rgba(0,0,0,0.1);
            transition: background 0.3s ease, color 0.3s ease;
        }

            .navbar-custome .nav > li > a:hover,
            .navbar-custome .nav > li.active > a {
                background-color: rgba(100, 150, 100, 0.2);
                color: #fff !important;
                border-bottom: 3px solid var(--accent-leaf);
            }
/*
====================================
        Section de présentation (Hero)
====================================
*/

.hero {
    padding: 140px 0;
    background: var(--hero-overlay);
    background-image: linear-gradient(var(--hero-overlay), var(--hero-overlay)), url('../images/hero_forest.jpg');
    background-size: cover;
    background-position: center;
    color: white;
    text-align: center;
    position: relative;
}

    .hero h1 {
        font-size: 3.5rem;
        text-shadow: 3px 3px 6px rgba(0, 0, 0, 0.7);
    }

    .hero p {
        font-size: 1.5rem;
        margin-top: 1rem;
        color: var(--text-light);
        max-width: 800px;
        margin-left: auto;
        margin-right: auto;
    }
/*
====================================
        Modales des fiches champignons
====================================
*/

.modal-content {
    background-color: var(--mushroom-beige);
    color: var(--text-dark);
    border: 3px double var(--mushroom-brown);
    border-radius: 15px;
    font-family: 'Open Sans', sans-serif;
    box-shadow: 0 0 20px rgba(0, 0, 0, 0.4);
}

.modal-header {
    background-color: var(--mushroom-green);
    color: var(--text-light);
    border-bottom: 2px solid var(--accent-leaf);
    font-family: 'Uncial Antiqua', serif;
    padding: 1rem 1.5rem;
}

.modal-title {
    font-size: 1.5rem;
    color: var(--text-light);
    text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.3);
}

.modal-body {
    padding: 1.5rem 2rem;
    font-size: 1rem;
    line-height: 1.6;
    text-align: left;
}

    .modal-body img {
        border: 2px solid var(--mushroom-brown);
        border-radius: 8px;
        margin-bottom: 1rem;
        box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
    }

.modal-footer {
    background-color: var(--mushroom-beige);
    border-top: none;
    padding: 1rem 1.5rem;
    text-align: right;
}

.modal .close {
    color: var(--text-light);
    opacity: 1;
    font-size: 28px;
    text-shadow: none;
}

    .modal .close:hover {
        color: darkred;
    }
/*
====================================
        Boutons champignons stylisés
====================================
*/

.button-mushroom {
    background: linear-gradient(145deg, var(--mushroom-brown), var(--mushroom-green));
    border: 2px solid #3a2e1e;
    color: #fff;
    padding: 14px 28px;
    font-size: 20px;
    font-weight: bold;
    border-radius: 40px;
    transition: background 0.4s ease, transform 0.2s ease;
    box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2), 3px 3px 12px rgba(0, 0, 0, 0.4);
    text-shadow: 1px 1px 2px #000;
    font-family: 'Uncial Antiqua', serif;
    margin-top: 20px;
    display: inline-block;
}

    .button-mushroom:hover {
        background: linear-gradient(145deg, var(--mushroom-green), var(--mushroom-brown));
        transform: scale(1.08);
        cursor: pointer;
    }
/*
====================================
        Contenu principal (textes, fiches)
====================================
*/

#intentions, #rappel-champignons {
    font-family: 'Open Sans', sans-serif;
    line-height: 1.8;
    background-color: rgba(255, 255, 255, 0.95); /* Légère transparence blanche */
    border-radius: 12px;
    padding: 2rem;
    margin-bottom: 2rem;
    box-shadow: 0 4px 12px rgba(0,0,0,0.2);
}

    #rappel-champignons img {
        border: 2px solid #795548;
        border-radius: 12px;
        box-shadow: 0 0 15px rgba(0,0,0,0.25); /* Image mise en valeur */
    }
/*
====================================
        Bloc d'avertissement standard
====================================
*/

.alert-warning {
    background-color: #fff8e1;
    border-color: #ffecb3;
    color: #7f6510;
    font-family: 'Open Sans', sans-serif;
    font-size: 1rem;
    padding: 1.5rem;
    border-radius: 10px;
    box-shadow: 0 0 10px rgba(0,0,0,0.1);
}
/*
====================================
        Pop-up de sécurité au chargement
====================================
*/

.popup-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(30, 20, 10, 0.85); /* Fond semi-transparent sombre */
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 9999;
    animation: fadeIn 0.6s ease-out;
}

.popup-content {
    background: var(--mushroom-beige);
    padding: 2rem;
    border-radius: 15px;
    box-shadow: 0 0 20px rgba(0,0,0,0.5);
    max-width: 600px;
    text-align: center;
    font-family: 'Open Sans', sans-serif;
    color: var(--text-dark);
}

    .popup-content h2 {
        color: var(--mushroom-brown);
        margin-bottom: 1rem;
        font-family: 'Uncial Antiqua', serif;
    }
/*
====================================
        Sections encadrées (fiches, jumbotron)
====================================
*/

main, .jumbotron {
    max-width: 960px;
    margin: 2rem auto;
    background-color: rgba(255, 255, 255, 0.85);
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.15);
    border-radius: 12px;
    padding: 2rem;
}

.panel {
    background-color: rgba(255, 255, 255, 0.95);
    border-radius: 12px;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    padding: 1.5rem;
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}

    .panel:hover {
        transform: scale(1.03);
        box-shadow: 0 8px 20px rgba(0, 0, 0, 0.25); /* Animation au survol */
    }
/*
====================================
        Pied de page stylisé
====================================
*/

footer {
    background-color: var(--deep-forest);
    color: var(--text-light);
    text-align: center;
    padding: 1.5rem;
    margin-top: 3rem;
    font-size: 14px;
}
/*
====================================
        Logo (dans navbar)
====================================
*/

.logo {
    height: 80px;
    width: auto;
    margin-right: 10px;
}
/*
====================================
        Responsive : adaptabilité mobile
====================================
*/

@media (max-width: 768px) {
    .hero h1 {
        font-size: 2.2rem;
    }

    .hero p {
        font-size: 1rem;
    }

    .navbar-brand {
        font-size: 22px;
    }

    .navbar-nav .nav-link {
        font-size: 16px;
        padding: 14px 16px;
    }

    .logo {
        height: 60px;
    }
}
/*
====================================
        Camembert style Renaissance Champifung
====================================
*/

.camembert-svg-wrapper {
    max-width: 400px;
    margin: 0 auto;
    filter: drop-shadow(2px 4px 6px rgba(0, 0, 0, 0.2));
}

.camembert-svg {
    width: 100%;
    height: auto;
    display: block;
}

    .camembert-svg text {
        font-family: 'Open Sans', sans-serif;
        font-weight: bold;
        fill: #2e2e2e;
    }

.modal-camembert {
    display: none;
    position: fixed;
    z-index: 9999;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.6);
}

.modal-content-camembert {
    background-color: #f5f0e1;
    margin: 10% auto;
    padding: 2rem;
    border-radius: 15px;
    width: 90%;
    max-width: 500px;
    box-shadow: 0 0 30px rgba(0, 0, 0, 0.4);
    font-family: 'Open Sans', sans-serif;
    border: 3px double #5c4328;
    color: #2e2e2e;
    text-align: left;
}

    .modal-content-camembert h3 {
        font-family: 'Uncial Antiqua', serif;
        color: #5c4328;
        font-size: 22px;
        margin-bottom: 10px;
    }

    .modal-content-camembert .close {
        float: right;
        font-size: 24px;
        font-weight: bold;
        color: #5c4328;
        cursor: pointer;
    }

        .modal-content-camembert .close:hover {
            color: darkred;
        }
/*
====================================
        Barre de recherche
====================================
*/

#searchInput {
    border-radius: 40px;
    border: 2px solid var(--accent-leaf);
    padding: 10px 20px;
    font-size: 1rem;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.05);
    transition: border-color 0.3s;
    max-width: 600px;
}

    #searchInput:focus {
        border-color: var(--mushroom-green);
        outline: none;
    }

/*
====================================
        Boutons de navigation locale
====================================
*/

nav a.btn-outline-success {
    font-family: 'Uncial Antiqua', serif;
    border-color: var(--mushroom-green);
    color: var(--mushroom-green);
}

    nav a.btn-outline-success:hover {
        background-color: var(--mushroom-green);
        color: white;
    }
/*
====================================
   Inventaire des sources – ChampiFung
====================================
*/

.source-block {
    background-color: rgba(255, 255, 255, 0.93);
    padding: 2rem;
    border-radius: 16px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
    margin-top: 2rem;
    margin-bottom: 2rem;
}

    .source-block h2 {
        font-size: 2rem;
        font-family: 'Uncial Antiqua', serif;
        color: var(--deep-forest);
        border-bottom: 2px solid var(--accent-leaf);
        display: inline-block;
        padding-bottom: 0.4rem;
        margin-bottom: 1.2rem;
    }

.source-list {
    list-style: none;
    padding-left: 0;
    line-height: 1.7;
}

    .source-list li::before {
        content: "🍄 ";
        color: var(--mushroom-green);
        margin-right: 0.5rem;
    }

    .source-list li {
        margin-bottom: 0.4rem;
        font-size: 1rem;
    }
/*
====================================
        Page toxique
====================================
*/

/* Corps de page */
body {
    background-color: #fefcf5;
    font-family: 'Open Sans', sans-serif;
    color: #2e2e2e;
}

/* TITRES */
h1, h3 {
    font-family: 'Montserrat', sans-serif;
    color: #473c2c;
}

/* MENU LOCAL (nav-pills) */
.nav-pills > li > a {
    border-radius: 8px;
    color: #3b2e1d;
}

.nav-pills > li.active > a,
.nav-pills > li.active > a:focus,
.nav-pills > li.active > a:hover {
    background-color: #337ab7;
    color: white;
}
/*
====================================
        Citations & contenu visuel
====================================
*/

/* ENCADRÉ DE CITATION */
.citation-ancienne {
    background-color: #f9f3e9;
    border-left: 5px solid #a94442;
    padding: 15px;
    margin: 30px 0;
    font-style: italic;
}

/* IMAGES MANUSCRITES */
img {
    border-radius: 4px;
    border: 1px solid #ccc;
    margin-bottom: 10px;
}

/* PIED DE PAGE ALTERNATIF */
.footer {
    background: darkblue;
    color: white;
    padding: 20px 0;
    text-align: center;
    margin-top: 60px;
}

/* BLOCKQUOTE */
blockquote {
    margin: 0;
    padding: 0;
}
/* ================================
   TITRES ET PRÉSENTATION
================================ */
h1 {
    font-family: 'Uncial Antiqua', serif;
    font-size: 2.5rem;
    color: #5c4328;
    text-align: center;
    margin-bottom: 30px;
    text-shadow: 2px 2px 5px rgba(0,0,0,0.1);
}

.lead {
    font-size: 1.2rem;
    color: #2e2e2e;
}

/* ================================
   CONTENU CENTRAL AVEC MARGES
================================ */
.container {
    max-width: 960px;
    margin: 40px auto;
    background-color: rgba(255, 255, 255, 0.95);
    padding: 2rem;
    border-radius: 10px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

/* ================================
   VIDÉOS ENCADRÉES ET RESPONSIVES
================================ */
.video-container {
    position: relative;
    padding-bottom: 56.25%; /* Ratio 16:9 */
    height: 0;
    overflow: hidden;
    max-width: 800px;
    margin: 40px auto;
    border: 4px solid #a7c957;
    border-radius: 12px;
    box-shadow: 0 0 20px rgba(0,0,0,0.2);
}

    .video-container video {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
    }

/* ================================
   MENU LOCAL DES CATÉGORIES
================================ */
.nav-pills > li > a {
    border-radius: 8px;
    color: #3b2e1d;
}

.nav-pills > li.active > a,
.nav-pills > li.active > a:focus,
.nav-pills > li.active > a:hover {
    background-color: #337ab7;
    color: white;
}


/* Applique un fond noir et un texte blanc à tout le corps de la page en mode contraste élevé */
body.mode-contraste {
    background-color: #000 !important;
    color: #fff !important;
}

    /* En mode contraste élevé, force la couleur blanche pour tous les titres, paragraphes et liens */
    body.mode-contraste h1,
    body.mode-contraste h2,
    body.mode-contraste h3,
    body.mode-contraste h4,
    body.mode-contraste h5,
    body.mode-contraste h6,
    body.mode-contraste p,
    body.mode-contraste a {
        color: #fff !important;
    }

    /* En mode contraste élevé, souligne tous les liens pour une meilleure visibilité */
    body.mode-contraste a {
        text-decoration: underline;
    }

    /* En mode contraste élevé, modifie les boutons pour avoir un fond blanc avec texte noir et bordure blanche */
    body.mode-contraste .btn {
        background-color: #fff !important;
        color: #000 !important;
        border-color: #fff !important;
    }

/* Couleur verte pour bonne réponse */
.correct-answer {
    background-color: #d4edda;
    border: 1px solid #28a745;
    padding: 10px;
    border-radius: 5px;
}

/* Couleur rouge pour mauvaise réponse */
.wrong-answer {
    background-color: #f8d7da;
    border: 1px solid #dc3545;
    padding: 10px;
    border-radius: 5px;
}

/* Style du message indiquant la bonne réponse */
.correct-answer-label, .wrong-answer-label {
    font-weight: bold;
    margin-top: 8px;
    display: block;
}
/* Neutraliser le contraste élevé */
body.mode-contraste {
    filter: none !important;
    background-color: inherit !important;
    color: inherit !important;
}

/* Barre d'accessibilité en haut à droite */
#accessibility-bar {
    position: fixed;
    top: 0;
    right: 0;
    z-index: 1050;
    background-color: rgba(255, 255, 255, 0.95);
    border-bottom-left-radius: 10px;
    padding: 8px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

/* ================================
   STYLE SPÉCIFIQUE – PAGE Alimentation
================================ */

/* Section de contenu principale */
.page-contenu {
    max-width: 950px;
    margin: 40px auto;
    background: rgba(255, 255, 255, 0.95);
    padding: 2rem;
    border-radius: 12px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.1);
}

    /* Titre principal avec icône champignon */
    .page-contenu h1 {
        text-align: center;
        font-family: 'Uncial Antiqua', serif;
        font-size: 2.5rem;
        color: var(--mushroom-brown);
        margin-bottom: 20px;
    }

    /* Paragraphes harmonisés */
    .page-contenu p {
        font-size: 1.1rem;
        line-height: 1.8;
        text-align: justify;
        color: #2e2e2e;
        margin-bottom: 1.5rem;
    }

    /* Sous-titres stylisés avec soulignement */
    .page-contenu h2, .page-contenu h3 {
        font-family: 'Uncial Antiqua', serif;
        color: #3a5f0b;
        border-bottom: 2px solid #a7c957;
        padding-bottom: 5px;
        display: inline-block;
        margin-top: 2rem;
        margin-bottom: 1rem;
    }

/* Image centrée et élégante */
.img-recipe {
    display: block;
    margin: 20px auto;
    max-width: 100%;
    border: 2px solid #5c4328;
    border-radius: 10px;
    box-shadow: 0 0 12px rgba(0,0,0,0.2);
}

/* Bloc citation visuelle */
.citation {
    font-style: italic;
    background-color: #f4f4e8;
    border-left: 5px solid #a78a61;
    padding: 1rem;
    margin: 2rem 0;
    color: #3d3d3d;
}
/* ========================================
   STYLE SPÉCIFIQUE À LA PAGE REMEDES.HTML
   ======================================== */

/* Section historique sur les remèdes */
.remedes-histoire {
    margin-top: 40px;
    padding: 20px;
    background-color: #f9f6f1; /* ton parcheminé doux */
    border-left: 5px solid #a67c52;
    border-radius: 8px;
    font-family: 'Georgia', serif;
}

    /* Titre de section */
    .remedes-histoire h2 {
        font-family: 'Uncial Antiqua', serif;
        font-size: 28px;
        color: #4a3b2d;
        margin-bottom: 20px;
    }

    /* Paragraphes du contenu */
    .remedes-histoire p {
        text-align: justify;
        line-height: 1.6;
        color: #2e2e2e;
        margin-bottom: 15px;
    }

/* ========================================
   STYLE POUR LE TABLEAU MEDICINAL
   ======================================== */

.table-remedes {
    overflow-x: auto;
    margin-top: 20px;
    margin-bottom: 30px;
}

    /* Apparence générale du tableau */
    .table-remedes table {
        width: 100%;
        border-collapse: collapse;
        background-color: #fffdf8;
        border: 1px solid #d3c8b4;
        box-shadow: 0 0 10px rgba(150, 120, 80, 0.2);
    }

    /* Titre du tableau */
    .table-remedes caption {
        caption-side: top;
        font-weight: bold;
        font-size: 18px;
        padding: 10px;
        color: #5b4025;
    }

    /* En-têtes */
    .table-remedes th {
        background-color: #e6d3b3;
        color: #3e2b1f;
        padding: 12px;
        border: 1px solid #d3c8b4;
        text-align: left;
    }

    /* Cellules du tableau */
    .table-remedes td {
        padding: 10px;
        border: 1px solid #e0d5c5;
    }

    /* Ligne sur deux de couleur différente */
    .table-remedes tbody tr:nth-child(even) {
        background-color: #f5eee4;
    }

/* ========================================
   STYLES OPTIONNELS POUR LATIN ET CITATIONS
   ======================================== */

/* Mots latins ou scientifiques */
em {
    font-style: italic;
    color: #6b4e2e;
}

/* Noms en petit caps : optionnel */
strong {
    color: #3d2e1d;
}