@import url('https://fonts.googleapis.com/css2?family=Fredoka:wght@400;600;700&display=swap');

        :root {
            --bg-color: #f7f9fc;
            --main-color: #ffde4d; 
            --accent-color: #ff6b6b; 
            --success-color: #6bcb87; 
            --card-bg: #ffffff;
            --dark-color: #1a1a1a;
            --border-style: 3px solid #1a1a1a;
            --box-shadow: 5px 5px 0px #1a1a1a;
            --box-shadow-hover: 2px 2px 0px #1a1a1a;
        }
html {
    scroll-behavior: smooth; /* Rend la remontée fluide et agréable */
}

/* --- Réinitialisation pour CKEditor (Rendu identique à l'éditeur) --- */

/* 1. On retire le centrage global et on remet l'alignement à gauche pour le texte */
.ck-content {
    text-align: left !important;
}

/* 2. On neutralise le style néo-brutaliste UNIQUEMENT sur les images de l'éditeur */
.ck-content img {
    border: none !important;
    box-shadow: none !important;
    border-radius: 0 !important;
    display: inline-block !important; /* Indispensable pour que le float fonctionne */
    max-width: 100%;
    height: auto;
}

/* 3. On force le respect des attributs d'alignement (ex: style="float:right;") générés par CKEditor */
.ck-content img[style*="float: right"] {
    float: right !important;
    margin-left: 20px !important;
    margin-bottom: 15px !important;
    margin-right: 0 !important;
}

.ck-content img[style*="float: left"] {
    float: left !important;
    margin-right: 20px !important;
    margin-bottom: 15px !important;
    margin-left: 0 !important;
}

/* 4. Gestion des listes à puces pour éviter qu'elles perdent leur style ou se centrent */
.ck-content ul, .ck-content ol {
    text-align: left !important;
    padding-left: 30px !important;
    margin-bottom: 15px !important;
}

.ck-content li {
    list-style-position: outside !important;
    margin-bottom: 5px !important;
}

        
        
        .container { max-width: 900px; margin: 10px auto; width: 100%; }
        
       .h { background: var(--main-color); border: var(--border-style); padding: 25px; margin-bottom: 30px; box-shadow: var(--box-shadow); text-align: center; }
        .h h1 { margin: 0; font-size: 28px; text-transform: uppercase; letter-spacing: 0.5px; }
        .h p { margin: 8px 0 0 0; font-weight: 600; font-size: 16px; opacity: 0.9; }

        /* Recherche Néo-brutaliste */
        .search-container { margin-bottom: 30px; }
        .search-input { width: 100%; padding: 15px; font-size: 16px; border: var(--border-style); box-shadow: var(--box-shadow); outline: none; background: #fff; font-weight: 600; }
        .search-input:focus { background: #fffdf0; }

        .btn-back { display: inline-block; margin-bottom: 20px; padding: 10px 20px; background: #e0e0e0; border: var(--border-style); box-shadow: var(--box-shadow); text-decoration: none; color: var(--dark-color); font-weight: 700; transition: all 0.05s ease; }
        .btn-back:hover, .nav-arrow:hover { transform: translate(2px, 2px); box-shadow: var(--box-shadow-hover); }

        /* Grille */
        .guides-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 25px; margin-bottom: 40px; }
        
        .guide-card { background: var(--card-bg); border: var(--border-style); padding: 20px; box-shadow: var(--box-shadow); display: flex; flex-direction: column; justify-content: space-between; transition: all 0.05s ease; text-decoration: none; color: var(--dark-color); }
        .guide-card:hover { transform: translate(2px, 2px); box-shadow: var(--box-shadow-hover); background-color: #fffdf0; }
        
        .guide-badge-area { margin-bottom: 15px; display: flex; align-items: center; gap: 8px; }
        .icon-tag { font-size: 13px; font-weight: 700; padding: 4px 10px; border: 2px solid var(--dark-color); background: #fff; text-transform: uppercase; }
        
        .guide-card h2 { font-size: 20px; margin: 0 0 15px 0; font-weight: 700; line-height: 1.3; }
        .btn-read { align-self: flex-start; padding: 8px 16px; background: var(--main-color); border: 2px solid var(--dark-color); font-weight: 700; font-size: 14px; text-transform: uppercase; box-shadow: 3px 3px 0px var(--dark-color); }

        /* Article */
        .article-card { background: white; border: var(--border-style); padding: 35px; box-shadow: var(--box-shadow); margin-bottom: 25px; box-sizing: border-box; overflow: hidden; }
        .article-header { border-bottom: 3px dashed var(--dark-color); padding-bottom: 20px; margin-bottom: 25px; }
        .article-header h1 { font-size: 32px; margin: 10px 0 0 0; font-weight: 700; }

        /* Flèches */
        .navigation-arrows { display: flex; justify-content: space-between; align-items: center; margin-bottom: 40px; gap: 15px; }
        .nav-arrow { display: inline-flex; align-items: center; gap: 8px; padding: 12px 24px; font-size: 15px; font-weight: 700; color: var(--dark-color); text-decoration: none; background: #fff; border: var(--border-style); box-shadow: var(--box-shadow); transition: all 0.05s ease; }
        .nav-arrow.next { background: var(--main-color); margin-left: auto; }
        .nav-arrow.disabled { opacity: 0.4; cursor: not-allowed; box-shadow: none; transform: none; pointer-events: none; }

        /* ==========================================================================
           CONTENU CKEDITOR ET TABLEAUX (Ciblage corrigé sur .ck-content)
           ========================================================================== */
        .ck-content table {
            width: 100% !important;
            max-width: 100% !important;
            border-collapse: collapse !important;
            margin: 20px 0 !important;
            table-layout: fixed !important;
        }

        .ck-content td, .ck-content th {
            padding: 15px !important;
            border: 1px solid #ced4da !important; 
            vertical-align: middle !important;
            word-wrap: break-word !important;
            overflow-wrap: break-word !important;
        }

        /* Images à l'intérieur du texte */
        .ck-content img {
            max-width: 100% !important;
            height: auto !important;
            border: 2px solid #1a1a1a;
            box-shadow: 4px 4px 0px #1a1a1a;
            margin: 10px 0;
            border-radius: 8px;
            box-sizing: border-box;
            display: block;
            float: none !important;
        }

        /* Blocs personnalisés stylisés */
        .marker-pink, .marker-blue, .marker-green { 
            padding: 25px 25px 25px 75px !important; 
            border-radius: 20px !important; 
            display: block !important; 
            margin: 25px 0 !important; 
            position: relative !important;
            color: #1a1a1a !important;
            border: 2px solid #1a1a1a !important;
            box-sizing: border-box;
        }

        .marker-pink { background-color: #fce4ec !important; }
        .marker-blue { background-color: #e8f4f8 !important; }
        .marker-green { background-color: #e8f5e9 !important; }

        .marker-pink::before, .marker-blue::before, .marker-green::before {
            position: absolute; 
            left: 22px; 
            top: 50%; 
            transform: translateY(-50%); 
        }
        .marker-pink::before { content: "⛔"; font-size: 30px; }
        .marker-blue::before { content: "ⓘ"; font-size: 35px; font-weight: bold; }
        .marker-green::before { content: "🥦"; font-size: 30px; }

        /* ==========================================================================
           LOGIQUE MOBILE DU CONTENU (Écrans < 768px)
           ========================================================================== */
        @media (max-width: 768px) {
            body { padding: 10px; }
            
            .article-card {
                padding: 15px !important;
                border-width: 2px !important;
                box-shadow: 3px 3px 0px #1a1a1a !important;
            }

            .article-header h1 { font-size: 22px; }

            /* On casse la rigidité du tableau HTML */
            .ck-content table, 
            .ck-content tbody {
                display: block !important;
                width: 100% !important;
            }

            /* Chaque ligne devient un bloc complet empilé */
            .ck-content tr {
                display: flex !important;
                flex-direction: column !important;
                width: 100% !important;
                margin-bottom: 20px !important;
                border: 2px solid #1a1a1a !important;
                border-radius: 12px !important;
                background: #ffffff !important;
                overflow: hidden;
                box-shadow: 3px 3px 0px #1a1a1a;
            }

            .ck-content td {
                display: block !important;
                width: 100% !important;
                max-width: 100% !important;
                box-sizing: border-box !important;
                padding: 12px !important;
                border: none !important;
            }

            /* Redimensionnement des images sur smartphone */
            .ck-content td img {
                width: 100% !important;
                max-width: 280px !important;
                margin: 0 auto 10px auto !important;
            }

            /* Blocs de couleurs responsifs */
            .marker-pink, .marker-blue, .marker-green { 
                padding: 55px 15px 15px 15px !important; 
                margin: 15px 0 !important;
                border-radius: 15px !important;
            }

            .marker-pink::before, .marker-blue::before, .marker-green::before {
                left: 50%;
                top: 30px;
                transform: translate(-50%, -50%);
            }
        }