/* ── Bloc theme/section — section réutilisable à couleurs indépendantes ─── */

.section-bioetlocal {
    background-color: var(--section-bg, transparent);
    color: var(--section-text, inherit);
    padding: 40px 24px;
    position: relative;
    overflow: hidden;
}

.section-bioetlocal h1,
.section-bioetlocal h2,
.section-bioetlocal h3,
.section-bioetlocal h4,
.section-bioetlocal p,
.section-bioetlocal 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.is-style-vert {
    --section-bg: #009C50;
    --section-text: #ffffff;
}

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

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

.section-bioetlocal h1,
.section-bioetlocal h2,
.section-bioetlocal h3,
.section-bioetlocal h4,
.section-bioetlocal h5,
.section-bioetlocal 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 h1,
.editor-styles-wrapper .section-bioetlocal h2,
.editor-styles-wrapper .section-bioetlocal h3,
.editor-styles-wrapper .section-bioetlocal h4,
.editor-styles-wrapper .section-bioetlocal h5,
.editor-styles-wrapper .section-bioetlocal h6 {
    font-family: var(--wp--preset--font-family--boogaloo);
}

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

.section-bioetlocal 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.is-style-blanc h2 {
    font-size: 24px;
    text-transform: none;
    font-weight: 400;
    color: #009C50;
}

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

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

/* Décoration ::after, positionnée/illustrée selon la couleur de fond choisie */
.section-bioetlocal::after {
    content: '';
    position: absolute;
    bottom: 2px;
    width: 60px;
    height: 60px;
    background-repeat: no-repeat;
    background-size: contain;
    pointer-events: none;
}

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

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

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

/* Position de la décoration : "accrochée" juste à l'extérieur du bord réel du
   contenu (identique au calcul que WordPress applique au contenu centré via
   `.is-layout-constrained`), avec un plancher égal au padding réel de la
   section (24px). L'écart avec le contenu reste petit et constant à toutes
   les largeurs d'écran, au lieu de grandir avec la largeur de l'écran (cas
   d'un offset fixe). Aucun padding supplémentaire n'est réservé : sur écran
   étroit/moyen, la décoration peut effleurer le contenu. */
.section-bioetlocal[data-bg-couleur="vert"]::after {
    left: max(8px, calc(max(24px, calc(50% - (var(--wp--style--global--content-size, 645px) / 2))) - 68px));
    background-color: #ffffff;
    -webkit-mask-image: url('../../assets/images/icons/perso1.svg');
    mask-image: url('../../assets/images/icons/perso1.svg');
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-size: contain;
    mask-size: contain;
    -webkit-mask-position: bottom left;
    mask-position: bottom left;
    bottom:-12px;
}

.section-bioetlocal[data-bg-couleur="rose"]::after {
    right: max(8px, calc(max(24px, calc(50% - (var(--wp--style--global--content-size, 645px) / 2))) - 68px));
    background-color: #ffffff;
    -webkit-mask-image: url('../../assets/images/icons/perso2.svg');
    mask-image: url('../../assets/images/icons/perso2.svg');
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-size: contain;
    mask-size: contain;
    -webkit-mask-position: bottom right;
    mask-position: bottom right;
    bottom:-12px;
}

@media (min-width: 768px) {
    .section-bioetlocal[data-bg-couleur="vert"]::after {
        left: max(8px, calc(max(24px, calc(50% - (var(--wp--style--global--content-size, 645px) / 2))) - 98px));
    }
    .section-bioetlocal[data-bg-couleur="rose"]::after {
        right: max(8px, calc(max(24px, calc(50% - (var(--wp--style--global--content-size, 645px) / 2))) - 98px));
    }
}

@media (min-width: 1200px) {
    .section-bioetlocal[data-bg-couleur="vert"]::after {
        left: max(8px, calc(max(24px, calc(50% - (var(--wp--style--global--content-size, 645px) / 2))) - 138px));
    }
    .section-bioetlocal[data-bg-couleur="rose"]::after {
        right: max(8px, calc(max(24px, calc(50% - (var(--wp--style--global--content-size, 645px) / 2))) - 138px));
    }
}