/*
 * Pièces et sections libres des pages composées (templates/composition/) :
 * ce que la rédaction ajoute hors des sections dessinées. Les pièces posées
 * dans une section dessinée en reprennent les styles.
 */
.bn-section .bn-flux > * + *,
.bn-flux > .bn-zone > * + * {
    margin-block-start: var(--pile, 1.25rem);
}

.bn-fond-gris {
    background: var(--fond-eleve);
}

.bn-deux-colonnes {
    display: grid;
    gap: clamp(1.5rem, 4vw, 4rem);
}

@media (min-width: 52rem) {
    .bn-deux-colonnes {
        grid-template-columns: 1fr 1fr;
        align-items: start;
    }
}

.bn-colonnes {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
    gap: 1.5rem;
}

.bn-paragraphe {
    max-inline-size: var(--largeur-texte, 44rem);
}

.bn-image img {
    display: block;
    max-inline-size: 100%;
    block-size: auto;
    border-radius: var(--rayon);
}

.bn-image figcaption {
    margin-block-start: 0.5rem;
}

.bn-carte__picto {
    display: inline-flex;
    inline-size: 2.75rem;
    block-size: 2.75rem;
    margin-block-end: 0.75rem;
    color: var(--accent, #3732ff);
}

.bn-chiffre {
    display: grid;
    gap: 0.4rem;
}

.bn-pastille {
    display: inline-block;
    padding: 0.35rem 0.8rem;
    border: 1px solid currentColor;
    border-radius: 999px;
    font-size: 0.9em;
}

.bn-citation blockquote {
    margin: 0;
}

.bn-espace--petit { block-size: 1rem; }
.bn-espace--moyen { block-size: 3rem; }
.bn-espace--grand { block-size: 6rem; }

/* Un texte long posé là où l'on attend un chiffre (la rédaction place ce qu'elle veut) : il passe à la ligne au lieu de déborder. */
.constat__grille > li,
.heros__chiffres > li {
    min-inline-size: 0;
}

.constat__valeur,
.heros__chiffres strong {
    overflow-wrap: anywhere;
}

/* Images posées librement par la rédaction (mode Design) : une couche sur toute la page. */
.images-libres {
    position: absolute;
    inset-block-start: 0;
    inset-inline-start: 0;
    inline-size: 100%;
    block-size: 0;
    z-index: 20;
}

.images-libres img.image-libre {
    display: block;
    max-inline-size: none;
    block-size: auto;
}

.images-libres .image-libre__lien,
.images-libres > img.image-libre {
    position: absolute;
}

.image-libre--ombre-douce { box-shadow: 0 10px 30px -12px rgb(15 8 65 / 0.25); }
.image-libre--ombre-moyenne { box-shadow: 0 20px 50px -18px rgb(15 8 65 / 0.4); }
.image-libre--ombre-forte { box-shadow: 0 34px 80px -24px rgb(15 8 65 / 0.6); }
.image-libre--ombre-halo { box-shadow: 0 0 0 1px var(--cyan), 0 0 34px rgb(46 163 242 / 0.45); }