/**
 * Thème CKEditor — Guide utilisateur (surcharge après ck_editor.css)
 * Aligné sur main/pages/home.html : dégradé menthe, titres type hero, Jost.
 */

/* --- Zone d’édition : fond proche du bandeau hero (gradient léger) --- */
.ck-editor__editable {
    background: linear-gradient(135deg, #fafefc 0%, #f3fff9 45%, #fffffa 100%) !important;
    border-radius: 0.5rem !important;
    border: 1px solid rgba(192, 255, 222, 0.6) !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.8) !important;
    color: rgb(29, 25, 103) !important; /* dark-blue */
    font-family: "Jost", sans-serif !important;
    line-height: 1.625 !important;
}

/* --- Titres : proche du h1 home (font-medium, tracking-wide, dark-purple) --- */
.ck-content h2,
.ck-content h3,
.ck-content h4 {
    font-family: "Jost", sans-serif !important;
    font-weight: 500 !important;
    letter-spacing: 0.025em !important;
    color: rgb(53, 49, 83) !important; /* dark-purple */
}

.ck-content h2 {
    font-size: clamp(1.5rem, 2.5vw, 2rem) !important;
    line-height: 1.2 !important;
    margin-top: 1.5rem !important;
    margin-bottom: 0.75rem !important;
}

.ck-content h3 {
    font-size: clamp(1.25rem, 2vw, 1.5rem) !important;
    line-height: 1.3 !important;
    margin-top: 1.25rem !important;
    margin-bottom: 0.625rem !important;
}

.ck-content h4 {
    font-size: clamp(1.1rem, 1.5vw, 1.25rem) !important;
    line-height: 1.35 !important;
    margin-top: 1rem !important;
    margin-bottom: 0.5rem !important;
}

.ck-content h2:first-child,
.ck-content h3:first-child,
.ck-content h4:first-child {
    margin-top: 0 !important;
}

/* --- Corps : paragraphes type home (texte large, lisible) --- */
.ck-content p {
    font-size: 1rem !important;
    line-height: 1.625 !important;
    color: rgb(29, 25, 103) !important;
    font-family: "Jost", sans-serif !important;
    margin-bottom: 1rem !important;
}

@media (min-width: 640px) {
    .ck-content p {
        font-size: 1.0625rem !important;
    }
}

@media (min-width: 1024px) {
    .ck-content p {
        font-size: 1.125rem !important;
        line-height: 1.7 !important;
    }
}

/* --- Listes --- */
.ck-content ul,
.ck-content ol {
    color: rgb(29, 25, 103) !important;
    font-family: "Jost", sans-serif !important;
    line-height: 1.625 !important;
}

/* --- Liens : vert plateforme, cohérent boutons primary --- */
.ck-content a {
    color: rgb(1, 184, 82) !important; /* primary-green-600 */
    font-weight: 500 !important;
    text-decoration-thickness: 1px !important;
}

.ck-content a:hover {
    color: rgb(5, 144, 68) !important; /* primary-green-700 */
}

/* --- Citations : rappel du gradient hero --- */
.ck-content blockquote {
    border-left-color: rgb(192, 255, 222) !important;
    background: linear-gradient(90deg, rgba(236, 253, 244, 0.9) 0%, rgba(255, 255, 250, 0.95) 100%) !important;
    border-radius: 0.5rem !important;
    color: rgb(53, 49, 83) !important;
}

/* --- Barre d’outils sticky CKEditor : sous la navbar du site (z-50), comme le blog --- */
.ck.ck-sticky-panel__content.ck-sticky-panel__content_sticky {
    z-index: 40 !important;
}

/* --- Barre d’outils : ton neutre + touches vert menthe --- */
.ck.ck-toolbar {
    background: linear-gradient(180deg, #f6faf8 0%, #f0f4f2 100%) !important;
    border-color: rgba(192, 255, 222, 0.5) !important;
    border-radius: 0.5rem 0.5rem 0 0 !important;
}

.ck.ck-toolbar .ck-toolbar__separator {
    background: rgba(192, 255, 222, 0.6) !important;
}

.ck-button:not(.ck-disabled):hover {
    background-color: rgba(236, 253, 244, 0.95) !important;
    color: rgb(5, 144, 68) !important;
}

.ck-button.ck-on {
    background-color: rgba(215, 255, 232, 0.95) !important;
    color: rgb(5, 144, 68) !important;
}

/* --- Tableaux : en-têtes cohérents avec le bandeau vert doux --- */
.ck-content th {
    background: linear-gradient(180deg, #e8fff2 0%, #d7ffe8 100%) !important;
    color: rgb(10, 93, 49) !important;
}

.ck-content tbody tr:hover {
    background-color: rgba(236, 253, 244, 0.65) !important;
}

/* --- Images : cartes type sections site --- */
.ck-content img {
    border-radius: 0.75rem !important;
    box-shadow:
        0 10px 15px -3px rgba(53, 49, 83, 0.08),
        0 4px 6px -2px rgba(29, 25, 103, 0.05) !important;
}

/* --- Bloc contenu éditable (conteneur ck-content) --- */
.ck-content {
    font-family: "Jost", sans-serif !important;
    color: rgb(29, 25, 103) !important;
}

/* --- Page publique aide : accordéons + sommaire --- */
.guide-public-page details.guide-accordion .guide-accordion-panel {
    display: grid;
    grid-template-rows: 0fr;
    transition: grid-template-rows 0.38s cubic-bezier(0.4, 0, 0.2, 1);
}

.guide-public-page details.guide-accordion[open] .guide-accordion-panel {
    grid-template-rows: 1fr;
}

.guide-public-page details.guide-accordion .guide-accordion-inner {
    min-height: 0;
    overflow: hidden;
}

.guide-public-page .guide-accordion-chevron {
    transition: transform 0.38s cubic-bezier(0.4, 0, 0.2, 1);
}

.guide-public-page details.guide-accordion[open] .guide-accordion-chevron {
    transform: rotate(180deg);
}

.guide-public-page details.guide-accordion summary:focus-visible {
    outline: 2px solid rgb(5, 144, 68);
    outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
    .guide-public-page details.guide-accordion .guide-accordion-panel {
        transition: none;
    }

    .guide-public-page .guide-accordion-chevron {
        transition: none;
    }
}