/* /public/assets/pages/chroniques/css/gestion-images.css
 * Styles de figures d'articles avec contrôle fin par image.
 * S'applique à TOUTES les images d'article (watermark ou non),
 * via les classes générées par render_article_image().
 */

/* =========================
 * A) VARIABLES PAR DÉFAUT
 * ========================= */

/* Largeur visuelle "par défaut" des médias dans l'article */
:where(.article-body, .article) {
    --media-max: clamp(26rem, 48vw, 40rem);
}

/* =========================
 * B) FIGURE GÉNÉRIQUE
 * ========================= */

:where(.article-body, .article) figure.article-figure {
    position: relative;
    margin-block: clamp(1rem, 2.5vw, 2rem);
    margin-inline: auto;
    text-align: center;
    max-inline-size: var(--figure-explicit-width, var(--media-max));
    inline-size: min(100%, var(--figure-explicit-width, var(--media-max)));
}

/* On neutralise le style générique .article-body figure img de chronique-classique.css */
:where(.article-body, .article) figure.article-figure img {
    max-width: 100%;
    margin: 0;
}

/* =========================
 * C) SYSTÈME DE LARGEUR
 * ========================= */
/*
 * PRIORITÉ :
 * 1. Largeur explicite (.w-320, .w-480, etc.) => --figure-explicit-width
 * 2. Variante relative (.is-wide, .is-xxl) => modifient --media-max
 * 3. Fallback : --media-max défini sur le conteneur (.article-body / .article)
 */

/* Largeur explicite (valeurs typiques) */
:where(.article-body, .article) .w-320 { --figure-explicit-width: 320px; }
:where(.article-body, .article) .w-480 { --figure-explicit-width: 480px; }
:where(.article-body, .article) .w-640 { --figure-explicit-width: 640px; }
:where(.article-body, .article) .w-800 { --figure-explicit-width: 800px; }
:where(.article-body, .article) .w-960 { --figure-explicit-width: 960px; }
:where(.article-body, .article) .w-1280 { --figure-explicit-width: 1280px; }

/* Variantes relatives (largeur du "canal" média) */
:where(.article-body, .article) .is-wide { --media-max: clamp(36rem, 72vw, 72rem); }
:where(.article-body, .article) .is-xxl  { --media-max: clamp(42rem, 82vw, 88rem); }

/* Plein écran volontaire (figure--bleed) */
:where(.article-body, .article) figure.article-figure.figure--bleed {
    max-inline-size: none !important;
    inline-size: 100vw !important;
    margin-inline: calc(50% - 50vw) !important;
}

/* Petits écrans : on autorise un peu plus de largeur */
@media (max-width: 480px) {
    :where(.article-body, .article) {
        --media-max: 92vw;
    }
}

/* =========================
 * D) BOÎTE & IMAGE
 * ========================= */

:where(.article-body, .article) figure.article-figure > .media-box {
    position: relative;
    width: 100%;
    overflow: hidden;
    border-radius: 14px;
    box-shadow: 0 8px 26px rgba(0, 0, 0, 0.08);
    border: 1px solid rgba(0, 0, 0, 0.06);
    background: linear-gradient(180deg, #fafafa, #f4f4f4);
}

:where(.article-body, .article) figure.article-figure > .media-box > img {
    display: block;
    width: 100% !important;
    height: auto !important;
    object-fit: cover;
    object-position: 50% 50%;
    border-radius: inherit;

    user-select: none;
    -moz-user-select: none;
    -webkit-user-drag: none;
    user-drag: none;
    pointer-events: auto;
}

/* Légende */
:where(.article-body, .article) figure.article-figure > figcaption {
    font-size: 0.8rem;
    color: var(--color-text-subtle, #666);
    margin-top: 0.4rem;
}

/* =========================
 * E) RATIOS & CADRAGE
 * ========================= */
/* 1) Ratio 4/3 (paysage) */

:where(.article-body, .article) figure.article-figure.ratio-4-3 > .media-box {
    aspect-ratio: 4 / 3;
}

:where(.article-body, .article) figure.article-figure.ratio-4-3 > .media-box > img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    object-position: 50% 50% !important;
}

/* Fallback sans aspect-ratio */
@supports not (aspect-ratio: 4 / 3) {
    :where(.article-body, .article) figure.article-figure.ratio-4-3 > .media-box {
        position: relative;
    }
    :where(.article-body, .article) figure.article-figure.ratio-4-3 > .media-box::before {
        content: "";
        display: block;
        padding-top: 75%;
    }
    :where(.article-body, .article) figure.article-figure.ratio-4-3 > .media-box > img {
        position: absolute;
        inset: 0;
    }
}

/* Ajustements de cadrage pour 4/3 */
:where(.article-body, .article) figure.article-figure.ratio-4-3.pos-top > .media-box > img    { object-position: 50% 20% !important; }
:where(.article-body, .article) figure.article-figure.ratio-4-3.pos-bottom > .media-box > img { object-position: 50% 80% !important; }
:where(.article-body, .article) figure.article-figure.ratio-4-3.pos-left > .media-box > img   { object-position: 20% 50% !important; }
:where(.article-body, .article) figure.article-figure.ratio-4-3.pos-right > .media-box > img  { object-position: 80% 50% !important; }

/* 2) Ratio 3/4 (portrait) */

:where(.article-body, .article) figure.article-figure.ratio-3-4 > .media-box {
    aspect-ratio: 3 / 4;
}

:where(.article-body, .article) figure.article-figure.ratio-3-4 > .media-box > img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    object-position: 50% 50% !important;
}

/* Fallback sans aspect-ratio */
@supports not (aspect-ratio: 3 / 4) {
    :where(.article-body, .article) figure.article-figure.ratio-3-4 > .media-box {
        position: relative;
    }
    :where(.article-body, .article) figure.article-figure.ratio-3-4 > .media-box::before {
        content: "";
        display: block;
        padding-top: 133.333%;
    }
    :where(.article-body, .article) figure.article-figure.ratio-3-4 > .media-box > img {
        position: absolute;
        inset: 0;
    }
}

/* Ajustements de cadrage pour 3/4 */
:where(.article-body, .article) figure.article-figure.ratio-3-4.pos-top > .media-box > img    { object-position: 50% 20% !important; }
:where(.article-body, .article) figure.article-figure.ratio-3-4.pos-bottom > .media-box > img { object-position: 50% 80% !important; }
:where(.article-body, .article) figure.article-figure.ratio-3-4.pos-left > .media-box > img   { object-position: 20% 50% !important; }
:where(.article-body, .article) figure.article-figure.ratio-3-4.pos-right > .media-box > img  { object-position: 80% 50% !important; }

/* =========================
 * F) GRILLES & HERO
 * ========================= */

.wm-two-up,
.media-two-up {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr)); /* Par défaut : 2 colonnes */
    gap: 1rem;
    align-items: start;
}

/* ✅ AJOUT RESPONSIVE : Empilement sur mobile */
@media (max-width: 768px) {
    .wm-two-up,
    .media-two-up {
        grid-template-columns: 1fr !important; /* Force 1 seule colonne */
    }
}

/* Image de couverture (hero) : anti drag/sélection */
header.hero img.bg,
.chronique-hero-img {
    user-select: none;
    -webkit-user-drag: none;
    user-drag: none;
}

/* =========================
 * G) FIX V2 : ENROBAGE & FLOTTANTS (Ajout)
 * ========================= */

/* 1. Libérer la largeur max quand un style float est appliqué via PHP */
:where(.article-body, .article) figure.article-figure[style*="float"] {
    max-inline-size: none;
    margin-inline: 0;
}

/* 2. CLEARFIX : Tout ce qui N'EST PAS un paragraphe doit passer à la ligne */
/* Cela empêche les titres, pubs, citations de remonter sous l'image flottante */
.article-body h2,
.article-body h3,
.article-body h4,
.article-body .share-block,
.article-body .pub-responsive-wrapper,
.article-body .info-box,
.article-body .encadre,
.article-body figure.article-figure {
    clear: both;
    display: block;
    width: 100%;
}

/* 3. MOBILE : On annule le float pour que l'image prenne toute la largeur sur petits écrans */
@media (max-width: 640px) {
    :where(.article-body, .article) figure.article-figure[style*="float"] {
        float: none !important;
        width: 100% !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
        margin-bottom: 20px !important;
    }
}