/* ==========================================================================
   Quill — thème Terra (surcharge du thème "snow")
   Palette médiévale / parchemin alignée sur /css/global.css.
   Chargé globalement via share/head.php.
   ========================================================================== */

/* --- Conteneur principal ------------------------------------------------- */
.ql-toolbar.ql-snow,
.ql-container.ql-snow {
    border-color: var(--color-neutral-dark, #b45f06);
}

.ql-toolbar.ql-snow {
    background: var(--color-neutral-light, #fff2cc);
    border-top-left-radius: 6px;
    border-top-right-radius: 6px;
    padding: 6px 8px;
}

.ql-container.ql-snow {
    background: var(--backgroundColor, #fffbf5);
    border-bottom-left-radius: 6px;
    border-bottom-right-radius: 6px;
    /* Police d'ÉDITION : sans-serif système, lisible. Volontairement différente du
       rendu final (parchment-body, etc.) qui applique sa propre typographie via
       les CSS de page. Objectif : confort de saisie, sans simuler le rendu final. */
    font-family: system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    font-size: 15px;
    color: #3E2723;
}

.ql-editor {
    min-height: 160px;
    padding: 12px 15px;
    line-height: 1.55;
}

/* Bootstrap applique p { margin-bottom: 1rem } globalement, ce qui s'ajoute à
   la hauteur des <p><br></p> dans Quill et produit des gouttières démesurées
   (un saut de ligne ≈ 55px au lieu de 23). On revient au défaut Quill : pas
   de marge, l'espacement vient uniquement des paragraphes vides explicites. */
.ql-editor p {
    margin: 0;
    padding: 0;
}
/* Mais on conserve un peu d'air entre titres et paragraphes, sinon les
   sous-titres collent au texte qui suit. */
.ql-editor h1,
.ql-editor h2,
.ql-editor h3,
.ql-editor h4,
.ql-editor h5,
.ql-editor h6 {
    margin-bottom: 0.4em;
}

.ql-editor.ql-blank::before {
    color: #a88a6a;
    font-style: italic;
}

/* --- Boutons de la toolbar ---------------------------------------------- */
.ql-snow.ql-toolbar button,
.ql-snow .ql-toolbar button {
    border-radius: 4px;
    transition: background-color 0.15s ease, color 0.15s ease;
}

.ql-snow.ql-toolbar button:hover,
.ql-snow.ql-toolbar button:focus,
.ql-snow.ql-toolbar .ql-picker-label:hover,
.ql-snow.ql-toolbar .ql-picker-item:hover {
    background-color: var(--color-neutral-medium, #ffd68e);
}

/* Icônes (SVG) : stroke + fill --- hover / actif */
.ql-snow.ql-toolbar button:hover .ql-stroke,
.ql-snow.ql-toolbar button:focus .ql-stroke,
.ql-snow.ql-toolbar button.ql-active .ql-stroke,
.ql-snow.ql-toolbar .ql-picker-label:hover .ql-stroke,
.ql-snow.ql-toolbar .ql-picker-label.ql-active .ql-stroke,
.ql-snow.ql-toolbar .ql-picker-item:hover .ql-stroke,
.ql-snow.ql-toolbar .ql-picker-item.ql-selected .ql-stroke {
    stroke: #8b4a05;
}

.ql-snow.ql-toolbar button:hover .ql-fill,
.ql-snow.ql-toolbar button:focus .ql-fill,
.ql-snow.ql-toolbar button.ql-active .ql-fill,
.ql-snow.ql-toolbar .ql-picker-label:hover .ql-fill,
.ql-snow.ql-toolbar .ql-picker-label.ql-active .ql-fill,
.ql-snow.ql-toolbar .ql-picker-item:hover .ql-fill,
.ql-snow.ql-toolbar .ql-picker-item.ql-selected .ql-fill {
    fill: #8b4a05;
}

.ql-snow.ql-toolbar button:hover .ql-picker-label,
.ql-snow.ql-toolbar button.ql-active .ql-picker-label {
    color: #8b4a05;
}

/* Actif : fond un peu plus marqué */
.ql-snow.ql-toolbar button.ql-active,
.ql-snow.ql-toolbar .ql-picker-label.ql-active,
.ql-snow.ql-toolbar .ql-picker-item.ql-selected {
    background-color: var(--color-neutral-medium, #ffd68e);
}

/* État par défaut des icônes : bronze */
.ql-snow .ql-stroke { stroke: var(--color-neutral-dark, #b45f06); }
.ql-snow .ql-fill,
.ql-snow .ql-stroke.ql-fill { fill: var(--color-neutral-dark, #b45f06); }
.ql-snow .ql-picker { color: var(--color-neutral-dark, #b45f06); }

/* --- Dropdowns (header, font, size, align, color) ----------------------- */
.ql-snow .ql-picker-options {
    background: var(--color-neutral-light, #fff2cc);
    border: 1px solid var(--color-neutral-dark, #b45f06);
    border-radius: 4px;
    box-shadow: 0 2px 6px rgba(122, 63, 4, 0.15);
    padding: 4px;
}

.ql-snow .ql-picker.ql-expanded .ql-picker-label {
    border-color: var(--color-neutral-dark, #b45f06);
    color: #8b4a05;
}

.ql-snow .ql-picker-item {
    color: #3E2723;
    padding: 3px 6px;
    border-radius: 3px;
}

/* --- Tooltip d'édition de lien ------------------------------------------ */
.ql-snow .ql-tooltip {
    background: var(--color-neutral-light, #fff2cc);
    border: 1px solid var(--color-neutral-dark, #b45f06);
    border-radius: 4px;
    box-shadow: 0 2px 6px rgba(122, 63, 4, 0.2);
    color: #3E2723;
    padding: 6px 10px;
}

.ql-snow .ql-tooltip input[type=text] {
    border: 1px solid var(--color-neutral-dark, #b45f06);
    border-radius: 3px;
    padding: 3px 6px;
    background: #fffbf5;
    color: #3E2723;
}

.ql-snow .ql-tooltip a.ql-action,
.ql-snow .ql-tooltip a.ql-remove {
    color: var(--color-neutral-dark, #b45f06);
    font-weight: 600;
}

.ql-snow .ql-tooltip a.ql-action::after,
.ql-snow .ql-tooltip a.ql-remove::before {
    border-color: var(--color-neutral-dark, #b45f06);
}

/* --- Contenu édité : blockquote / code / headers ------------------------ */
.ql-editor h1, .ql-editor h2, .ql-editor h3 {
    /* Hérite de la police d'édition (sans-serif système) ; la hiérarchie
       est portée par la taille/poids natifs du navigateur, pas par la fonte.
       Le rendu final restylise titre + couleur via les CSS de page. */
    font-family: inherit;
    color: var(--color-neutral-dark, #b45f06);
    margin-top: 0.6em;
    margin-bottom: 0.3em;
}

.ql-editor blockquote {
    border-left: 4px solid var(--color-neutral-dark, #b45f06);
    background: rgba(255, 214, 142, 0.25);
    padding: 6px 12px;
    margin: 10px 0;
    color: #5b3a1a;
    font-style: italic;
}

.ql-editor pre.ql-syntax,
.ql-editor code {
    background: #f5e6c8;
    color: #3E2723;
    border: 1px solid #d9b87a;
    border-radius: 3px;
    padding: 2px 5px;
    font-family: 'Courier New', monospace;
    font-size: 13px;
}

.ql-editor pre.ql-syntax {
    padding: 8px 12px;
}

.ql-editor a {
    color: var(--color-neutral-dark, #b45f06);
    text-decoration: underline;
}

.ql-editor a:hover {
    color: #8b4a05;
}

/* --- Mode lecture seule ------------------------------------------------- */
.ql-container.ql-disabled .ql-editor {
    background: #f8ecd4;
    color: #6b4a2a;
}