/* ====================================================================
   STYLES FRONT-END POUR L'ÉDITEUR QUILL
   À appliquer sur le conteneur du texte (ex: div.edito-body-content)
   ==================================================================== */

/* --- 1. ALIGNEMENTS (AlignField) --- */
.edito-body-content .ql-align-center { text-align: center; }
.edito-body-content .ql-align-right { text-align: right; }
.edito-body-content .ql-align-justify { text-align: justify; }

/* --- 2. INDENTATIONS (IndentField) --- */
/* Quill gère l'indentation de 1 à 8 niveaux */
.edito-body-content .ql-indent-1 { padding-left: 3rem; }
.edito-body-content .ql-indent-2 { padding-left: 6rem; }
.edito-body-content .ql-indent-3 { padding-left: 9rem; }
.edito-body-content .ql-indent-4 { padding-left: 12rem; }
.edito-body-content .ql-indent-5 { padding-left: 15rem; }
.edito-body-content .ql-indent-6 { padding-left: 18rem; }
.edito-body-content .ql-indent-7 { padding-left: 21rem; }
.edito-body-content .ql-indent-8 { padding-left: 24rem; }

/* --- 3. TAILLES DE TEXTE (SizeField) --- */
/* Quill utilise ces 3 classes au lieu de pixels fixes pour l'accessibilité */
.edito-body-content .ql-size-small { font-size: 0.85em; }
.edito-body-content .ql-size-large { font-size: 1.5em; line-height: 1.3; }
.edito-body-content .ql-size-huge { font-size: 2.5em; line-height: 1.2; font-weight: bold; }

/* --- 4. LISTES À COCHER (ListField: CHECK) --- */
/* Quill structure les "Task Lists" avec des attributs data-list */
.edito-body-content li[data-list="checked"],
.edito-body-content li[data-list="unchecked"] {
    list-style-type: none;
    position: relative;
}
.edito-body-content li[data-list="checked"]::before,
.edito-body-content li[data-list="unchecked"]::before {
    content: '';
    position: absolute;
    left: -1.5em;
    top: 0.3em;
    width: 1em;
    height: 1em;
    border: 1px solid #1a1a1a;
    border-radius: 2px;
    background-color: transparent;
}
/* Le petit V pour la case cochée */
.edito-body-content li[data-list="checked"]::before {
    background-color: var(--edi-accent, #d9230f);
    border-color: var(--edi-accent, #d9230f);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='white' d='M10.97 4.97a.75.75 0 0 1 1.07 1.05l-3.99 4.99a.75.75 0 0 1-1.08.02L4.324 8.384a.75.75 0 1 1 1.06-1.06l2.094 2.093 3.473-4.425a.267.267 0 0 1 .02-.022z'/%3E%3C/svg%3E");
    background-size: contain;
}

/* --- 5. BLOCKQUOTE (BlockQuoteField) --- */
.edito-body-content blockquote {
    font-family: 'Playfair Display', serif;
    font-style: italic;
    font-size: 1.4rem;
    line-height: 1.6;
    color: var(--edi-accent, #d9230f);
    margin: 2.5rem 0;
    padding-left: 2rem;
    border-left: 4px solid var(--edi-accent, #d9230f);
}

/* --- 6. SÉCURITÉ MÉDIAS ET RESPONSIVE --- */
.edito-body-content img,
.edito-body-content iframe,
.edito-body-content video {
    max-width: 100% !important; /* Empêche tout débordement */
    height: auto !important;     /* Garde les proportions */
    display: block !important;
    margin: 1.5rem auto !important; /* Centre l'image et aère le texte */
    border-radius: 4px;
}

/* Fix pour les iframes (YouTube, etc.) pour garder le ratio 16:9 */
.edito-body-content iframe {
    width: 100%;
    aspect-ratio: 16 / 9;
}