/**
 * STYLES POUR LES IMAGES DANS LES ARTICLES DE BLOG
 * 3 formats proposés: pleine largeur, moyenne, petite flottante
 */

/* === FORMAT PAR DÉFAUT === */
.ql-editor img {
    max-width: 100%;
    height: auto;
    border-radius: 8px;
    margin: 1.5rem 0;
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}

/* === FORMAT 1: PLEINE LARGEUR (100%) === */
.ql-editor img.img-full,
.blog-content img.img-full,
.ql-editor img[data-img-format="full"],
.blog-content img[data-img-format="full"] {
    width: 100%;
    max-width: 100%;
    display: block;
    margin: 2rem 0;
}

/* === FORMAT 2: GRANDE (80%) === */
.ql-editor img.img-large,
.blog-content img.img-large,
.ql-editor img[data-img-format="large"],
.blog-content img[data-img-format="large"] {
    width: 80%;
    max-width: 100%;
    display: block;
    margin: 1.75rem auto;
}

/* === FORMAT 3: MOYENNE (60%) === */
.ql-editor img.img-medium,
.blog-content img.img-medium,
.ql-editor img[data-img-format="medium"],
.blog-content img[data-img-format="medium"] {
    width: 60%;
    max-width: 100%;
    display: block;
    margin: 1.5rem auto;
}

/* === FORMAT 4: PETITE (40%) === */
.ql-editor img.img-small,
.blog-content img.img-small,
.ql-editor img[data-img-format="small"],
.blog-content img[data-img-format="small"] {
    width: 40%;
    max-width: 100%;
    display: block;
    margin: 1.25rem auto;
}

/* === FORMAT 5: FLOTTANTE À DROITE (35%) === */
.ql-editor img.img-float,
.blog-content img.img-float,
.ql-editor img[data-img-format="float"],
.blog-content img[data-img-format="float"] {
    width: 35%;
    max-width: 350px;
    float: right;
    margin: 0.5rem 0 1rem 1.5rem;
}

/* === FORMAT 6: FLOTTANTE À GAUCHE (35%) === */
.ql-editor img.img-float-left,
.blog-content img.img-float-left,
.ql-editor img[data-img-format="float-left"],
.blog-content img[data-img-format="float-left"] {
    width: 35%;
    max-width: 350px;
    float: left;
    margin: 0.5rem 1.5rem 1rem 0;
}

/* === LÉGENDE D'IMAGE === */
.image-caption {
    text-align: center;
    font-size: 0.875rem;
    color: #64748b;
    font-style: italic;
    margin-top: 0.5rem;
}

/* === CLEARFIX POUR LES IMAGES FLOTTANTES === */
.ql-editor::after,
.blog-content::after {
    content: "";
    display: table;
    clear: both;
}

/* === RESPONSIVE === */
@media (max-width: 768px) {
    /* Toutes les images centrées passent à 100% */
    .ql-editor img.img-large,
    .blog-content img.img-large,
    .ql-editor img[data-img-format="large"],
    .blog-content img[data-img-format="large"],
    .ql-editor img.img-medium,
    .blog-content img.img-medium,
    .ql-editor img[data-img-format="medium"],
    .blog-content img[data-img-format="medium"],
    .ql-editor img.img-small,
    .blog-content img.img-small,
    .ql-editor img[data-img-format="small"],
    .blog-content img[data-img-format="small"] {
        width: 100%;
    }

    /* Toutes les images flottantes deviennent pleine largeur */
    .ql-editor img.img-float,
    .blog-content img.img-float,
    .ql-editor img.img-float-left,
    .blog-content img.img-float-left,
    .ql-editor img[data-img-format="float"],
    .blog-content img[data-img-format="float"],
    .ql-editor img[data-img-format="float-left"],
    .blog-content img[data-img-format="float-left"] {
        width: 100%;
        max-width: 100%;
        float: none;
        margin: 1.5rem 0;
    }
}

/* === TOOLBAR CUSTOM POUR QUILL === */
.ql-snow .ql-picker.ql-image-size {
    width: 100px;
}

.ql-snow .ql-picker.ql-image-size .ql-picker-label::before {
    content: 'Taille';
}

.ql-snow .ql-picker.ql-image-size .ql-picker-item[data-value="full"]::before {
    content: 'Pleine largeur';
}

.ql-snow .ql-picker.ql-image-size .ql-picker-item[data-value="medium"]::before {
    content: 'Moyenne';
}

.ql-snow .ql-picker.ql-image-size .ql-picker-item[data-value="float"]::before {
    content: 'Flottante droite';
}

.ql-snow .ql-picker.ql-image-size .ql-picker-item[data-value="float-left"]::before {
    content: 'Flottante gauche';
}