.paragraphs {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;

    @media (max-width: 991px) {
        justify-content: space-between;
    }

    .col-1 {
        width: calc(100% / 12 * 1);
    }

    .col-2 {
        width: calc(100% / 12 * 2);
    }

    .col-3 {
        width: calc(100% / 12 * 3);
    }

    .col-4 {
        width: calc(100% / 12 * 4);
    }

    .col-5 {
        width: calc(100% / 12 * 5);
    }

    .col-6 {
        width: calc(100% / 12 * 6);
    }

    .col-7 {
        width: calc(100% / 12 * 7);
    }

    .col-8 {
        width: calc(100% / 12 * 8);
    }

    .col-9 {
        width: calc(100% / 12 * 9);
    }

    .col-10 {
        width: calc(100% / 12 * 10);
    }

    .col-11 {
        width: calc(100% / 12 * 11);
    }

    .col-12 {
        width: 100%;
    }

    .col-auto {
        width: auto;

        @media (min-width: 992px) {
            flex: 1;
        }
    }

    /* Responsive */
    [class*="col-"] {
        @media (min-width: 572px) {
            margin: 0 -20px;
            padding: 0 20px;
        }

        @media (min-width: 573px) and (max-width: 991px) {
            width: 50% !important;
        }

        @media (max-width: 572px) {
            width: 100% !important;
        }
    }

    .section__btn {

        a,
        .bouton {
            margin: auto;
        }
    }
}
/* =============================================================================
   Habillage SMB des sections de paragraphes

   Le bloc ci-dessus est prévu pour des colonnes : ses règles génériques
   [class*="col-"] traitent un col-12 comme les autres, avec deux effets de
   bord sur un bloc pleine largeur — des marges négatives qui le décalent de
   20px vers la gauche, et un passage forcé à 50% sur tablette.
   ============================================================================= */

.paragraphs {
    gap: var(--space-md);

    .para.col-12 {
        margin: 0;
        padding: 0;
        width: 100% !important;
    }

    /* Rythme interne : le contenu vient d'un wysiwyg, on ne maîtrise que
       l'enchaînement des balises. */
    .para {

        >*:first-child {
            margin-top: 0;
        }

        >*:last-child {
            margin-bottom: 0;
        }

        h2,
        h3,
        h4 {
            margin-bottom: var(--space-sm);
        }

        /* Un titre qui suit du contenu ouvre une nouvelle sous-partie */
        *+h3,
        *+h4 {
            margin-top: var(--space-xl);
        }

        p {
            color: var(--color-text-muted);
            line-height: var(--lh-relaxed);
        }

        ul:not([class]),
        ol:not([class]) {
            color: var(--color-text-muted);
            line-height: var(--lh-relaxed);
        }

        ul:not([class]) li,
        ol:not([class]) li {
            margin-bottom: var(--space-2xs);
        }

        /* Intitulé d'un point suivi de son détail sur la ligne suivante */
        li>strong {
            color: var(--color-text);
        }

        /* Citation détachée : reset.css lui donne son filet et sa graisse,
           il lui manque son air. */
        blockquote {
            margin: var(--space-xl) 0;
        }
    }
}

/* Sur fond sombre — couleur pleine, ou image sous un voile sombre — le texte
   gris du wysiwyg redevient lisible. Une image sous un voile clair (blanc,
   crème) n'entre pas ici : le texte y garde sa couleur normale. */
section[data-color="#001020"],
section[data-color="#008865"],
section.builder:has(.key_nbs__background):not([data-color]) {

    .paragraphs .para {

        p,
        li,
        ul:not([class]),
        ol:not([class]),
        li>strong {
            color: var(--color-text-invert);
        }

        ul:not([class]) li::before {
            background: var(--color-text-invert);
        }
    }
}