/* ── Bloc theme/section-visual — section avec image sur le côté ─────────────── */

.section-bioetlocal-visuel {
    --content-offset: calc(50% - (var(--wp--style--global--content-size, 645px) / 2));
    background-color: var(--section-bg, transparent);
    color: var(--section-text, inherit);
    padding: 40px 24px;
    position: relative;
    overflow: visible;
}

.section-bioetlocal-visuel h1,
.section-bioetlocal-visuel h2,
.section-bioetlocal-visuel h3,
.section-bioetlocal-visuel h4,
.section-bioetlocal-visuel p,
.section-bioetlocal-visuel li {
    color: var(--section-text, inherit);
}

/* Presets natifs (panneau "Styles") : fournissent une couleur de fond/texte
   par défaut via les mêmes custom properties que les réglages manuels de
   l'inspecteur. Une couleur choisie explicitement dans l'inspecteur (posée en
   style inline sur le bloc) prend toujours le dessus sur ces valeurs de
   preset, quelle que soit la spécificité CSS des sélecteurs ci-dessous. */
.section-bioetlocal-visuel.is-style-vert {
    --section-bg: #009C50;
    --section-text: #ffffff;
}

.section-bioetlocal-visuel.is-style-rose {
    --section-bg: #D2097A;
    --section-text: #ffffff;
}

.section-bioetlocal-visuel.is-style-blanc {
    --section-bg: #ffffff;
    --section-text: #000000;
}

.section-bioetlocal-visuel h1,
.section-bioetlocal-visuel h2,
.section-bioetlocal-visuel h3,
.section-bioetlocal-visuel h4,
.section-bioetlocal-visuel h5,
.section-bioetlocal-visuel h6,
/* Spécificité renforcée : editor-style.css a une règle générique
   `.editor-styles-wrapper h1..h4 { font-family: system-ui }` de même
   spécificité (1 classe + 1 tag) qui gagnerait sinon par ordre de chargement
   pour tout titre sans style inline (donc tout titre ajouté à la main). */
.editor-styles-wrapper .section-bioetlocal-visuel h1,
.editor-styles-wrapper .section-bioetlocal-visuel h2,
.editor-styles-wrapper .section-bioetlocal-visuel h3,
.editor-styles-wrapper .section-bioetlocal-visuel h4,
.editor-styles-wrapper .section-bioetlocal-visuel h5,
.editor-styles-wrapper .section-bioetlocal-visuel h6 {
    font-family: var(--wp--preset--font-family--boogaloo);
}

.section-bioetlocal-visuel h2 {
    text-transform: uppercase;
    font-size: 32px;
}

.section-bioetlocal-visuel h3 {
    font-size: 22px;
}

/* Variante blanche : mêmes tailles/casse/couleurs que la composition
   pré-faite "section fond blanc" (patterns/section-fond-blanc.php), qui
   diffère des variantes rose/vert (pas de majuscules, tailles réduites,
   couleurs de titre dédiées). */
.section-bioetlocal-visuel.is-style-blanc h2 {
    font-size: 24px;
    text-transform: none;
    font-weight: 400;
    color: #009C50;
}

.section-bioetlocal-visuel.is-style-blanc h3 {
    font-size: 20px;
    font-weight: 400;
    color: #000000;
}

.section-bioetlocal-visuel[data-btn-couleur] .wp-block-button .wp-block-button__link {
    background-color: var(--section-btn);
}

/* Tailles de décoration (base) */
.section-bioetlocal-visuel::after {
    content: '';
    position: absolute;
    width: 60px;
    height: 60px;
    background-repeat: no-repeat;
    background-size: contain;
    pointer-events: none;
}

@media (max-width: 767px) {
    .section-bioetlocal-visuel::after { display: none; }
}

@media (min-width: 768px) {
    .section-bioetlocal-visuel::after { width: 90px; height: 90px; }
}

@media (min-width: 1200px) {
    .section-bioetlocal-visuel::after { width: 130px; height: 130px; }
}

/* ── Section avec visuel (images PNG) ─────────────────────────────────────── */

.section-bioetlocal-visuel[data-visual]::after {
    content: '' !important;
    position: absolute !important;
    width: 200px !important;
    height: 200px !important;
    background-size: contain !important;
    background-repeat: no-repeat !important;
    pointer-events: none !important;
    z-index: 10 !important;
    top: auto !important;
}

/* ── Images alignées à GAUCHE ─────────────────────────────────────────── */

.section-bioetlocal-visuel[data-visual="panier"]::after {
    background-image: url('../../assets/images/images_sections/panier.png') !important;
}

.section-bioetlocal-visuel[data-visual="cagette"]::after {
    background-image: url('../../assets/images/images_sections/cagette.png') !important;
}

.section-bioetlocal-visuel[data-visual="mouton"]::after {
    background-image: url('../../assets/images/images_sections/mouton.png') !important;
}

.section-bioetlocal-visuel[data-visual="panier"]::after,
.section-bioetlocal-visuel[data-visual="cagette"]::after,
.section-bioetlocal-visuel[data-visual="mouton"]::after {
    left: calc(var(--content-offset) - 68px) !important;
    right: auto !important;
    bottom: 0 !important;
}

@media (min-width: 768px) {
    .section-bioetlocal-visuel[data-visual="panier"]::after {
        left: calc(var(--content-offset) - 220px) !important;
        bottom: -80px !important;
    }
    .section-bioetlocal-visuel[data-visual="cagette"]::after {
        left: calc(var(--content-offset) - 190px) !important;
        bottom: -20px !important;
    }
    .section-bioetlocal-visuel[data-visual="mouton"]::after {
        left: calc(var(--content-offset) - 225px) !important;
        bottom: -80px !important;
    }
}

/* ── Images alignées à DROITE ──────────────────────────────────────────── */

.section-bioetlocal-visuel[data-visual="agricultrice"]::after {
    background-image: url('../../assets/images/images_sections/agricultrice.png') !important;
}

.section-bioetlocal-visuel[data-visual="chevre"]::after {
    background-image: url('../../assets/images/images_sections/chevre.png') !important;
}

.section-bioetlocal-visuel[data-visual="agricultrice"]::after,
.section-bioetlocal-visuel[data-visual="chevre"]::after {
    right: calc(var(--content-offset) - 68px) !important;
    left: auto !important;
    bottom: 0 !important;
}

@media (min-width: 768px) {
    .section-bioetlocal-visuel[data-visual="agricultrice"]::after {
        right: calc(var(--content-offset) - 210px) !important;
        bottom: -10px !important;
    }
    .section-bioetlocal-visuel[data-visual="chevre"]::after {
        right: calc(var(--content-offset) - 210px) !important;
        bottom: -110px !important;
    }
}