/*
 * Classes réutilisables pour éditeur WYSIWYG (CKEditor, etc.)
 * Chaque classe correspond à un style récurrent du site.
 * CSS natif uniquement (pas de @apply) pour compatibilité admin + front.
 */

/* ── Titres ───────────────────────────────────────────── */

.editor-title {
    font-size: var(--editor-font-size-title, 1.5rem);
    font-weight: var(--editor-font-weight-title, 700);
    color: var(--editor-color-text, #000);
    letter-spacing: var(--editor-letter-spacing-title, -0.025em);
}
@media (min-width: 1024px) {
    .editor-title { font-size: var(--editor-font-size-title-lg, 1.875rem); }
}

.editor-subtitle {
    font-size: var(--editor-font-size-subtitle, 1.125rem);
    font-weight: var(--editor-font-weight-subtitle, 700);
    color: var(--editor-color-text, #000);
}
@media (min-width: 1024px) {
    .editor-subtitle { font-size: var(--editor-font-size-subtitle-lg, 1.5rem); }
}

/* ── Paragraphes ──────────────────────────────────────── */

.editor-lead {
    font-size: var(--editor-font-size-lead, 1.25rem);
    color: var(--editor-color-text, #000);
    line-height: var(--editor-line-height-lead, 1.625);
}
@media (min-width: 1024px) {
    .editor-lead { font-size: var(--editor-font-size-lead-lg, 1.5rem); }
}

.editor-body {
    font-size: var(--editor-font-size-body, 1rem);
    color: var(--editor-color-text, #000);
    line-height: var(--editor-line-height-body, 1.625);
}
@media (min-width: 1024px) {
    .editor-body { font-size: var(--editor-font-size-body-lg, 1.25rem); }
}

/* ── Styles inline ────────────────────────────────────── */

.editor-accent {
    font-weight: var(--editor-font-weight-accent, 700);
    color: var(--editor-color-accent, #f0ac4d);
}

.editor-underline {
    font-weight: var(--editor-font-weight-underline, 700);
    text-decoration: underline;
    text-underline-offset: 4px;
}

.editor-emphasis {
    font-style: italic;
    font-weight: var(--editor-font-weight-emphasis, 600);
}

/* ── Styles globaux (génériques) ─────────────────────── */

.editor-bold { font-weight: var(--editor-font-weight-bold, 700); }
.editor-semibold { font-weight: var(--editor-font-weight-semibold, 600); }
.editor-medium { font-weight: var(--editor-font-weight-medium, 500); }
.editor-italic { font-style: italic; }

.editor-text-sm { font-size: var(--editor-font-size-sm, 0.875rem); }
.editor-text-base { font-size: var(--editor-font-size-base, 1rem); }
.editor-text-lg { font-size: var(--editor-font-size-lg, 1.125rem); }
.editor-text-xl { font-size: var(--editor-font-size-xl, 1.25rem); }
.editor-text-2xl { font-size: var(--editor-font-size-2xl, 1.5rem); }

.editor-text-accent { color: var(--editor-color-accent, #f0ac4d); }
.editor-text-accent-secondary { color: var(--editor-color-accent-secondary, #5db85b); }
.editor-text-black { color: var(--editor-color-text, #000); }

/* ── Listes ───────────────────────────────────────────── */

.editor-list {
    list-style-type: disc;
    padding-left: 1.5rem;
    font-size: var(--editor-font-size-body, 1rem);
    line-height: var(--editor-line-height-list, 1.625);
}
.editor-list > * + * { margin-top: 0.75rem; }
.editor-list > li::marker { color: inherit; }
@media (min-width: 1024px) {
    .editor-list { font-size: var(--editor-font-size-body-lg, 1.25rem); }
}

/* ── Paragraphe par défaut : editor-body ──────────────── */
.ck-content p,
.wrapper-content p {
    font-size: var(--editor-font-size-body, 1rem);
    color: var(--editor-color-text, #000);
    line-height: var(--editor-line-height-body, 1.625);
}
@media (min-width: 1024px) {
    .ck-content p,
    .wrapper-content p { font-size: var(--editor-font-size-body-lg, 1.25rem); }
}

/* ── Listes dans le contenu CKEditor (rendu auto) ────── */

.ck-content ul,
.wrapper-content ul {
    list-style-type: disc;
    padding-left: 1.5rem;
    font-size: var(--editor-font-size-body, 1rem);
    line-height: var(--editor-line-height-list, 1.625);
}
.ck-content ul > li + li,
.wrapper-content ul > li + li { margin-top: 0.75rem; }
.ck-content ul > li::marker,
.wrapper-content ul > li::marker { color: inherit; }
@media (min-width: 1024px) {
    .ck-content ul,
    .wrapper-content ul { font-size: var(--editor-font-size-body-lg, 1.25rem); }
}

.ck-content ol,
.wrapper-content ol {
    list-style-type: decimal;
    padding-left: 1.5rem;
    font-size: var(--editor-font-size-body, 1rem);
    line-height: var(--editor-line-height-list, 1.625);
}
.ck-content ol > li + li,
.wrapper-content ol > li + li { margin-top: 0.75rem; }
.ck-content ol > li::marker,
.wrapper-content ol > li::marker { color: inherit; }
@media (min-width: 1024px) {
    .ck-content ol,
    .wrapper-content ol { font-size: var(--editor-font-size-body-lg, 1.25rem); }
}

/* ── Boutons ──────────────────────────────────────────── */

.editor-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background-color: var(--editor-color-btn-bg, #f0ac4d);
    color: var(--editor-color-btn-text, #fff);
    padding: 0 1rem;
    height: 2.5rem;
    border-radius: 9999px;
    transition: background-color 0.15s;
    text-transform: uppercase;
    font-size: var(--editor-font-size-btn, 0.75rem);
    white-space: nowrap;
}
.editor-btn:hover {
    background-color: var(--editor-color-btn-bg-hover, rgba(240, 172, 77, 0.9));
}

/* ── Conteneurs ───────────────────────────────────────── */

.editor-section {
    margin-top: 2rem;
    padding-top: 0.5rem;
}
.editor-section > * + * { margin-top: 1.5rem; }
@media (min-width: 1024px) {
    .editor-section { margin-top: 3rem; }
    .editor-section > * + * { margin-top: 2rem; }
}

/* Indicateur visuel dans l'éditeur CKEditor */
.ck-content .editor-section {
    border-left: 3px solid var(--editor-color-section-border, #f0ac4d);
    padding-left: 1rem;
    margin-left: 0;
    position: relative;
}
.ck-content .editor-section::before {
    content: 'Section';
    position: absolute;
    top: -0.5rem;
    left: 0.5rem;
    font-size: var(--editor-font-size-section-label, 0.625rem);
    font-weight: var(--editor-font-weight-section-label, 600);
    text-transform: uppercase;
    letter-spacing: var(--editor-letter-spacing-section-label, 0.05em);
    color: var(--editor-color-accent, #f0ac4d);
    background: var(--editor-color-section-label-bg, #fff);
    padding: 0 0.25rem;
}

/* Pas d'indicateur visuel côté front (rendu propre) */
.wrapper-content .editor-section {
    border-left: none;
    padding-left: 0;
}
.wrapper-content .editor-section::before {
    display: none;
}

.editor-group > * + * { margin-top: 1rem; }
@media (min-width: 1024px) {
    .editor-group > * + * { margin-top: 1.5rem; }
}

/* ── CKEditor : fond blanc pour rendu fidèle au front ── */
@media (prefers-color-scheme: dark) {
    .ck.ck-editor__main > .ck-editor__editable {
        background: var(--editor-color-bg, #fff) !important;
        color: var(--editor-color-text, #000) !important;
    }

    .ck-style-grid__button__preview.ck-content,
    .ck.ck-style-panel__style-preview .ck-content,
    .ck-list .ck-button .ck-style-grid__button__preview {
        background: var(--editor-color-bg, #fff) !important;
        color: var(--editor-color-text, #000) !important;
    }

    .ck.ck-style-panel .ck-style-grid .ck-style-grid__button:not(.ck-on) .ck-button__label {
        background: var(--editor-color-panel-label-bg, #1f2937) !important;
        color: var(--editor-color-panel-label-text, #e5e7eb) !important;
    }
}
