/* ── Modulo Blocks — Bloc Section ── */
.modulo-section {
    --maxw: 1200px; --py: 24px; --pym: 16px; --gap: 16px;
    --bg: transparent; --bgimg: none; --bgpos: center center; --bgattach: scroll;
    --overlay: transparent; --overlayop: 0;
    --radius: 0px; --bw: 0px; --bc: var(--mb-c-line); --overflow: visible;
    --minh: 0px; --vjust: flex-start; --shadow: none;
    position: relative; box-sizing: border-box;
    display: flex; flex-direction: column;
    min-height: var(--minh);
    overflow: var(--overflow);
    background: var(--bg);
    border-radius: var(--radius);
    border: var(--bw) solid var(--bc);
    box-shadow: var(--shadow);
}

/* bg et overlay en position absolue — z-index négatif pour ne jamais
   déborder sur les blocs suivants quand la section est vide */
.modulo-section__bg {
    position: absolute; inset: 0; z-index: 0;
    background-image: var(--bgimg);
    background-position: var(--bgpos);
    background-size: cover;
    background-repeat: no-repeat;
    background-attachment: var(--bgattach);
    border-radius: inherit; pointer-events: none;
}
@supports (-webkit-overflow-scrolling: touch) {
    .modulo-section__bg { background-attachment: scroll; }
}
/* Calques d'images : entre le fond et le voile (ou au-dessus du voile : .is-above-overlay).
   Positionnés par leur propre point d'ancrage : 0 % = bord collé, 50 % = centré, 100 % = bord opposé.
   « clip » : jamais de défilement horizontal, même si une image dépasse. */
.modulo-section__layers {
    position: absolute; inset: 0; z-index: 1;
    overflow: hidden; overflow: clip;
    border-radius: inherit; pointer-events: none;
}
.modulo-section__layers.is-above-overlay { z-index: 2; }
.modulo-section__layer {
    position: absolute;
    left: var(--lx, 50%); top: var(--ly, 50%);
    width: var(--lw, 40%); height: auto; max-width: none;
    opacity: var(--lo, 1);
    transform: translate(calc(var(--lx, 50%) * -1), calc(var(--ly, 50%) * -1)) rotate(var(--lr, 0deg));
    transform-origin: center;
    margin: 0; padding: 0; border: 0; border-radius: 0;
}
@media (max-width: 600px) {
    .modulo-section__layer { width: var(--lwm, var(--lw, 40%)); }
    .modulo-section__layer.is-desktop-only { display: none; }
}
@media (min-width: 601px) {
    .modulo-section__layer.is-mobile-only { display: none; }
}
.modulo-section__overlay {
    position: absolute; inset: 0; z-index: 1;
    background: var(--overlay); opacity: var(--overlayop);
    border-radius: inherit; pointer-events: none;
}

/* Le contenu est au-dessus du fond et de l'overlay */
.modulo-section__inner {
    position: relative; z-index: 2;
    display: flex; flex-direction: column; flex: 1;
    gap: var(--gap); padding: var(--py) 0; box-sizing: border-box;
    justify-content: var(--vjust);
    align-items: var(--hjust, stretch);
    /* Largeur optionnelle du contenu interne. Les marges auto ne s'appliquent
       QUE si une largeur interne est définie (--inner-margin=auto), sinon le
       contenu se rétrécirait à la largeur de son texte et le positionnement
       horizontal ne fonctionnerait plus. */
    max-width: var(--inner-maxw, none);
    margin-left: var(--inner-margin, 0);
    margin-right: var(--inner-margin, 0);
    padding-left: 16px; padding-right: 16px;
}

/* ── Largeur de la SECTION (image de fond comprise) — bornée dans les 3 modes,
   à des largeurs différentes. !important pour primer sur la mise en page
   WordPress (.is-layout-constrained > * ...). ── */

/* Contenue : largeur de contenu du site (réglée dans Styles → Mise en page) */
.modulo-section.is-contained {
    max-width: var(--wp--style--global--content-size, 1200px) !important;
    margin-left: auto !important;
    margin-right: auto !important;
}
/* Boîte limitée : largeur px choisie */
.modulo-section.is-custom {
    max-width: var(--maxw) !important;
    margin-left: auto !important;
    margin-right: auto !important;
}
/* Pleine largeur écran : bord à bord */
.modulo-section.is-full {
    width: 100vw !important;
    max-width: 100vw !important;
    margin-left: calc(50% - 50vw) !important;
    margin-right: calc(50% - 50vw) !important;
}

/* Évite la barre de défilement horizontale provoquée par le 100vw (pleine largeur).
   'clip' ne crée pas de conteneur de défilement → n'affecte pas position:sticky. */
.wp-site-blocks { overflow-x: clip; }
@media (max-width: 600px) {
    .modulo-section__inner { padding-top: var(--pym); padding-bottom: var(--pym); }
}

/* ── Hauteur selon le format de l'image (« Suivre les proportions de l'image ») ──
   La section prend les proportions de l'image de fond (--ratio = largeur / hauteur) :
   l'image « cover » remplit alors exactement la section, sans être recadrée.
   min-height: auto → si le contenu est plus haut, la section s'agrandit (l'image est
   alors recadrée, comme avant). */
.modulo-section.is-ratio { aspect-ratio: var(--ratio); min-height: auto; }

/* ── Réglages mobiles (≤ 600 px, bascule réglable dans Modulo → Tailles d'écran) ──
   Les variables --*-m ne sont écrites que si le réglage est utilisé ; sinon la valeur
   ordinateur s'applique. Le navigateur ne télécharge que l'image de fond affichée. */
@media (max-width: 600px) {
    .modulo-section { min-height: var(--minh-m, var(--minh)); }
    .modulo-section.is-ratio { aspect-ratio: var(--ratio-m, var(--ratio)); min-height: auto; }
    .modulo-section__bg {
        background-image: var(--bgimg-m, var(--bgimg));
        background-position: var(--bgpos-m, var(--bgpos));
    }

    /* Contenu sous / au-dessus de l'image : l'image devient un bandeau à ses propres
       proportions (image entière), le contenu passe à côté sur un fond uni. */
    .modulo-section.is-m-below,
    .modulo-section.is-m-above { aspect-ratio: auto; min-height: var(--minh-m, 0px); }
    .modulo-section.is-m-below > .modulo-section__bg,
    .modulo-section.is-m-above > .modulo-section__bg {
        position: relative; inset: auto; z-index: 0;
        flex: none; width: 100%;
        aspect-ratio: var(--ratio-m, var(--ratio, 16 / 9));
        background-position: var(--bgpos-m, center center);
        background-attachment: scroll;
    }
    .modulo-section.is-m-below > .modulo-section__bg { order: -1; border-bottom-left-radius: 0; border-bottom-right-radius: 0; }
    .modulo-section.is-m-above > .modulo-section__bg { order: 3; border-top-left-radius: 0; border-top-right-radius: 0; }
    .modulo-section.is-m-below > .modulo-section__overlay,
    .modulo-section.is-m-above > .modulo-section__overlay { display: none; }
    /* Calques : limités à la zone de l'image. */
    .modulo-section.is-m-below > .modulo-section__layers,
    .modulo-section.is-m-above > .modulo-section__layers {
        height: auto; aspect-ratio: var(--ratio-m, var(--ratio, 16 / 9));
    }
    .modulo-section.is-m-below > .modulo-section__layers { inset: 0 0 auto 0; }
    .modulo-section.is-m-above > .modulo-section__layers { inset: auto 0 0 0; }
    .modulo-section.is-m-below > .modulo-section__inner,
    .modulo-section.is-m-above > .modulo-section__inner {
        order: 1;
        background: var(--mtbg, transparent);
    }
}

/* ── Couleurs, bordure ───────────────────────────────────────────────────── */
.modulo-section { border-style: var(--bs, solid); }
.modulo-section.has-stx { color: var(--stx); }
.modulo-section.has-shd :is(h1, h2, h3, h4, h5, h6) { color: var(--shd); }
.modulo-section.has-slk a:not(.wp-element-button):not(.wp-block-button__link):not(.mt-btn) { color: var(--slk); }

/* ── Blocs de mise en page : toujours toute la largeur disponible ─────────────
   La position (gauche, centre, droite) ne déplace que les éléments courts (titres, textes,
   boutons). Sans cette règle, des colonnes au contenu court se tassaient au milieu. */
.modulo-section__inner > :where(.wp-block-columns, .wp-block-group, .wp-block-gallery, .wp-block-table, .wp-block-cover, .wp-block-media-text, .wp-block-query, .wp-block-separator, .wp-block-embed, .wp-block-video, .wp-block-quote, .wp-block-pullquote, .wp-block-details, .modulo-section, [class*="wp-block-modulo-"]:not(.wp-block-modulo-svg-button):not(.wp-block-modulo-styled-text):not(.wp-block-modulo-icon-svg):not(.wp-block-modulo-icon-content):not(.wp-block-modulo-share):not(.wp-block-modulo-breadcrumb):not(.wp-block-modulo-post-info)) {
    align-self: stretch;
}
/* En disposition horizontale, ils redeviennent des éléments côte à côte. */
.modulo-section.sdir-row-d > .modulo-section__inner > * { align-self: auto; }

/* ── Réglages par appareil (classes mbr-<réglage>-<d|t|m>, variables --<réglage>-<d|t|m>) ──
   Ordinateur : toutes largeurs ; tablette : ≤ 980 px ; mobile : ≤ 600 px (bascules réglables
   dans Modulo → Tailles d'écran). Un appareil non réglé garde la valeur de l'écran plus grand. */
.modulo-section.mbr-smh-d { min-height: var(--smh-d); }
.modulo-section.mbr-smt-d { margin-top: var(--smt-d) !important; }
.modulo-section.mbr-smb-d { margin-bottom: var(--smb-d) !important; }
.modulo-section.mbr-sml-d { margin-left: var(--sml-d) !important; }
.modulo-section.mbr-smr-d { margin-right: var(--smr-d) !important; }
.modulo-section.mbr-spt-d > .modulo-section__inner { padding-top: var(--spt-d); }
.modulo-section.mbr-spr-d > .modulo-section__inner { padding-right: var(--spr-d); }
.modulo-section.mbr-spb-d > .modulo-section__inner { padding-bottom: var(--spb-d); }
.modulo-section.mbr-spl-d > .modulo-section__inner { padding-left: var(--spl-d); }
.modulo-section.mbr-sgap-d > .modulo-section__inner { gap: var(--sgap-d); }
.modulo-section.mbr-sta-d > .modulo-section__inner { text-align: var(--sta-d); }
.modulo-section.mbr-sjc-d > .modulo-section__inner { justify-content: var(--sjc-d); }
.modulo-section.mbr-sai-d > .modulo-section__inner { align-items: var(--sai-d); }
.modulo-section.mbr-sfx-d > .modulo-section__inner > * { flex: var(--sfx-d); }
.modulo-section.sdir-row-d > .modulo-section__inner { flex-direction: row; flex-wrap: wrap; }
.modulo-section.sdir-col-d > .modulo-section__inner { flex-direction: column; flex-wrap: nowrap; }
.modulo-section.mbr-sbp-d > .modulo-section__bg { background-position: var(--sbp-d); }

@media (max-width: 980px) {
    .modulo-section.mbr-smh-t { min-height: var(--smh-t); }
    .modulo-section.mbr-smt-t { margin-top: var(--smt-t) !important; }
    .modulo-section.mbr-smb-t { margin-bottom: var(--smb-t) !important; }
    .modulo-section.mbr-sml-t { margin-left: var(--sml-t) !important; }
    .modulo-section.mbr-smr-t { margin-right: var(--smr-t) !important; }
    .modulo-section.mbr-spt-t > .modulo-section__inner { padding-top: var(--spt-t); }
    .modulo-section.mbr-spr-t > .modulo-section__inner { padding-right: var(--spr-t); }
    .modulo-section.mbr-spb-t > .modulo-section__inner { padding-bottom: var(--spb-t); }
    .modulo-section.mbr-spl-t > .modulo-section__inner { padding-left: var(--spl-t); }
    .modulo-section.mbr-sgap-t > .modulo-section__inner { gap: var(--sgap-t); }
    .modulo-section.mbr-sta-t > .modulo-section__inner { text-align: var(--sta-t); }
    .modulo-section.mbr-sjc-t > .modulo-section__inner { justify-content: var(--sjc-t); }
    .modulo-section.mbr-sai-t > .modulo-section__inner { align-items: var(--sai-t); }
    .modulo-section.mbr-sfx-t > .modulo-section__inner > * { flex: var(--sfx-t); }
    .modulo-section.sdir-row-t > .modulo-section__inner { flex-direction: row; flex-wrap: wrap; }
    .modulo-section.sdir-col-t > .modulo-section__inner { flex-direction: column; flex-wrap: nowrap; }
    .modulo-section.sdir-row-t > .modulo-section__inner > * { align-self: auto; }
    .modulo-section.sdir-col-t > .modulo-section__inner > :where(.wp-block-columns, .wp-block-group, .wp-block-gallery, .wp-block-table, .wp-block-cover, .wp-block-media-text, .wp-block-query, .wp-block-separator, .wp-block-embed, .wp-block-video, .wp-block-quote, .wp-block-pullquote, .wp-block-details, .modulo-section, [class*="wp-block-modulo-"]:not(.wp-block-modulo-svg-button):not(.wp-block-modulo-styled-text):not(.wp-block-modulo-icon-svg):not(.wp-block-modulo-icon-content):not(.wp-block-modulo-share):not(.wp-block-modulo-breadcrumb):not(.wp-block-modulo-post-info)) { align-self: stretch; }
    .modulo-section.mbr-sbp-t > .modulo-section__bg { background-position: var(--sbp-t); }
}
@media (max-width: 600px) {
    .modulo-section.mbr-smh-m { min-height: var(--smh-m); }
    .modulo-section.mbr-smt-m { margin-top: var(--smt-m) !important; }
    .modulo-section.mbr-smb-m { margin-bottom: var(--smb-m) !important; }
    .modulo-section.mbr-sml-m { margin-left: var(--sml-m) !important; }
    .modulo-section.mbr-smr-m { margin-right: var(--smr-m) !important; }
    .modulo-section.mbr-spt-m > .modulo-section__inner { padding-top: var(--spt-m); }
    .modulo-section.mbr-spr-m > .modulo-section__inner { padding-right: var(--spr-m); }
    .modulo-section.mbr-spb-m > .modulo-section__inner { padding-bottom: var(--spb-m); }
    .modulo-section.mbr-spl-m > .modulo-section__inner { padding-left: var(--spl-m); }
    .modulo-section.mbr-sgap-m > .modulo-section__inner { gap: var(--sgap-m); }
    .modulo-section.mbr-sta-m > .modulo-section__inner { text-align: var(--sta-m); }
    .modulo-section.mbr-sjc-m > .modulo-section__inner { justify-content: var(--sjc-m); }
    .modulo-section.mbr-sai-m > .modulo-section__inner { align-items: var(--sai-m); }
    .modulo-section.mbr-sfx-m > .modulo-section__inner > * { flex: var(--sfx-m); }
    .modulo-section.sdir-row-m > .modulo-section__inner { flex-direction: row; flex-wrap: wrap; }
    .modulo-section.sdir-col-m > .modulo-section__inner { flex-direction: column; flex-wrap: nowrap; }
    .modulo-section.sdir-row-m > .modulo-section__inner > * { align-self: auto; }
    .modulo-section.sdir-col-m > .modulo-section__inner > :where(.wp-block-columns, .wp-block-group, .wp-block-gallery, .wp-block-table, .wp-block-cover, .wp-block-media-text, .wp-block-query, .wp-block-separator, .wp-block-embed, .wp-block-video, .wp-block-quote, .wp-block-pullquote, .wp-block-details, .modulo-section, [class*="wp-block-modulo-"]:not(.wp-block-modulo-svg-button):not(.wp-block-modulo-styled-text):not(.wp-block-modulo-icon-svg):not(.wp-block-modulo-icon-content):not(.wp-block-modulo-share):not(.wp-block-modulo-breadcrumb):not(.wp-block-modulo-post-info)) { align-self: stretch; }
    .modulo-section.mbr-sbp-m > .modulo-section__bg { background-position: var(--sbp-m); }
    /* Contenu sous / au-dessus de l'image : pas de hauteur minimale héritée de l'ordinateur. */
    .modulo-section.is-m-below:not(.mbr-smh-m), .modulo-section.is-m-above:not(.mbr-smh-m) { min-height: 0; }
}