/*
 * Rôle    : Thème CKEditor 5 dédié aux articles d'aide (app user_guide) — surcharge cosmétique appliquée par-dessus ck_editor.css, alignée sur le design hero de main/pages/home.html (dégradé menthe, typographie Jost, palette dark-blue/dark-purple/primary-green). Stylise à la fois la zone d'édition admin et le rendu côté lecteur via .ck-content, et embarque les comportements visuels des accordéons/sommaire de la page guide publique.
 * Scope   : .ck-editor__editable, .ck-content (h2/h3/h4, p, ul/ol, a, blockquote, th, img), .ck.ck-toolbar et variantes (.ck-sticky-panel, .ck-button), .guide-public-page details.guide-accordion (panel, inner, chevron, summary:focus-visible) + media queries (>=640px, >=1024px, prefers-reduced-motion).
 * Charge  : user_guide/templates/user_guide/guide_public.html (ligne 48), user_guide/templates/user_guide/admin/article_form.html (ligne 10).
 * Dépend  : django-ckeditor-5 (classes .ck-* du CKEditor 5) ; police "Jost" (chargée en amont par le layout principal) ; balisage HTML produit par le widget CKEditor5Field côté admin et restitué via le filtre de rendu côté public.
 */

/* === Zone d'édition (admin article_form) ============================== */
/* Fond rappelant le bandeau hero du site (gradient menthe très léger),
   coins arrondis et bordure verte douce ; texte en dark-blue/Jost.    */
.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 du contenu rendu (h2/h3/h4) =============================== */
/* Cohérents avec le h1 de la home : Jost 500, tracking-wide, dark-purple.
   Tailles fluides via clamp() et premier titre sans margin-top.        */
.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 de texte (paragraphes) ===================================== */
/* Paragraphes lisibles façon home — taille adaptative aux breakpoints
   sm (>=640px) et lg (>=1024px) pour confort de lecture des guides.    */
.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 (ul / ol) ================================================= */
/* Aligne la couleur, la police et l'interligne sur les paragraphes.    */
.ck-content ul,
.ck-content ol {
    color: rgb(29, 25, 103) !important;
    font-family: "Jost", sans-serif !important;
    line-height: 1.625 !important;
}

/* === Liens éditoriaux ================================================= */
/* Vert primary-green-600 par défaut, primary-green-700 au hover —
   cohérent avec les boutons primaires du site.                        */
.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 */
}

/* === Blockquotes ====================================================== */
/* Bordure menthe + dégradé horizontal qui rappelle le 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;
}

/* === Toolbar CKEditor — sticky =======================================
   Abaisse le z-index de la toolbar collante pour qu'elle reste sous la
   navbar du site (z-50), même comportement que dans l'admin du blog. */
.ck.ck-sticky-panel__content.ck-sticky-panel__content_sticky {
    z-index: 40 !important;
}

/* === Toolbar CKEditor — apparence ====================================
   Fond neutre dégradé, bordure menthe, séparateurs verts ; états des
   boutons (hover / actif) repris en vert primary-green.              */
.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 <th> en dégradé vert doux + survol de ligne pour confort.   */
.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 du contenu ================================================ */
/* Coins arrondis et ombre douce — uniformise le rendu visuel avec les
   cartes du site (sections marketing).                                */
.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;
}

/* === Conteneur global .ck-content ===================================== */
/* Fallback typographie/couleur appliqué au wrapper, utile aussi côté
   public où la zone d'édition n'existe pas mais .ck-content si.       */
.ck-content {
    font-family: "Jost", sans-serif !important;
    color: rgb(29, 25, 103) !important;
}

/* === Page publique du guide — accordéons + sommaire =================
   Animation d'ouverture/fermeture des <details.guide-accordion> via
   grid-template-rows (0fr -> 1fr) — alternative fluide au max-height
   compatible avec contenu de hauteur dynamique. Le chevron pivote de
   180deg à l'ouverture. Focus visible accessible (outline vert). Le
   bloc final neutralise toutes les transitions si l'utilisateur a
   activé prefers-reduced-motion.                                     */
.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;
    }
}