.card-two-cols {

    .wp-block-columns {
        gap : 0;
    }

    .wp-block-column:nth-child(1) {
        padding-right : var(--wp--preset--spacing--50);
    }
    .wp-block-column:nth-child(2) {
        padding-left : var(--wp--preset--spacing--50);
        border-left-style : dotted;
        border-left-width : 2px;
        border-left-color : #707070;
    }


    @media (max-width: 1200px) {
        .wp-block-columns {
            flex-direction: column !important;
        }

        .wp-block-column:nth-child(1) {
        padding-right : 0;
        padding-bottom : var(--wp--preset--spacing--30);
        }
        .wp-block-column:nth-child(2) {
        padding-left : 0;
        padding-top : var(--wp--preset--spacing--30);
        border-left-style : none;
        border-left-width : 0;
        border-left-color : transparent;

        border-top-style : dotted;
        border-top-width : 2px;
        border-top-color : #707070;
        }
    }
}

/* Groupe "Trouve ta voie" (patterns/bloc-test-trouve-ta-voie.php) : sur mobile,
   le slider de suggestions du bloc recherche métier (Swiper < 640px) part
   aligné à gauche mais va jusqu'au bord droit du groupe — il annule le
   padding-right du groupe (réglage @mobile du bloc : 20px). */
@media (max-width: 639px) {
    .wp-block-group:has(> .bloc-test-recherche-metier) .bloc-test-recherche-metier__suggestions-slider {
        width: calc(100% + 20px);
        margin-right: -20px;
    }
}

/* Chiffres clés de l'accueil (groupe .chiffres-cles, cartes du pattern
   carte-stylisee) : en desktop, cartes de 260×310px décalées en hauteur
   (réglages des blocs, posés en inline, d'où les !important). Sous 1200px,
   les trois chiffres restent visibles d'un coup d'œil, en cartes réduites :
   sur une ligne, puis en pile compacte sous 640px. */
@media (width <= 1200px) {
    .wp-block-group.chiffres-cles {
        flex-wrap: nowrap;
        align-items: stretch;
        gap: var(--wp--preset--spacing--10);
    }

    .chiffres-cles > .wp-block-group {
        flex: 1 1 0;
        min-width: 0 !important;
        min-height: 0 !important;
        margin-top: 0 !important;
        padding: var(--wp--preset--spacing--30) var(--wp--preset--spacing--10) !important;
    }

    .chiffres-cles > .wp-block-group > .wp-block-image img {
        width: 44px !important;
        height: 44px !important;
    }
}

/* Pile compacte : picto à gauche, chiffre puis libellé à droite, alignés à
   gauche. L'écart entre les cartes laisse la place à leur ombre portée
   (12px sous chaque carte). flex: none : en colonne, la base 0 du palier
   au-dessus écrasait les cartes (min-height retiré). */
@media (width <= 640px) {
    .wp-block-group.chiffres-cles {
        flex-direction: column;
        gap: var(--wp--preset--spacing--30);
    }

    .chiffres-cles > .wp-block-group {
        flex: none;
        display: grid;
        grid-template-columns: 44px minmax(0, 1fr);
        align-items: center;
        column-gap: var(--wp--preset--spacing--30);
        padding: var(--wp--preset--spacing--10) var(--wp--preset--spacing--30) !important;
    }

    .chiffres-cles > .wp-block-group > * {
        margin: 0 !important;
    }

    .chiffres-cles > .wp-block-group > .wp-block-image {
        grid-row: 1 / span 2;
    }

    /* « Plus de » et le chiffre sur une même ligne */
    .chiffres-cles > .wp-block-group > .wp-block-group {
        flex-flow: row wrap;
        align-items: baseline;
        justify-content: flex-start;
        column-gap: 0.3em;
    }

    /* p : l'emporte sur :root .has-text-align-center (core) */
    .chiffres-cles p.has-text-align-center {
        text-align: left;
    }
}

/* Variation « Section FAQ » (is-style-section-faq, cf. BlockEditorAutoload::registerBlocksStyles
   et patterns/section-faq.php) : bande blanche pleine largeur qui détache la FAQ
   du fond gris de la page, questions en cartes grises. Au survol et à l’ouverture,
   fin contour bleu translucide et question en bleu. */
.wp-block-group.is-style-section-faq {
    background-color: var(--wp--preset--color--white);
}

.is-style-section-faq .wp-block-accordion-item {
    background-color: var(--wp--preset--color--grey);
    box-shadow: inset 0 0 0 2px transparent;
    transition: box-shadow 0.2s ease;
}

.is-style-section-faq .wp-block-accordion-item:hover {
    box-shadow: inset 0 0 0 2px var(--wp--preset--color--primary);
}

.is-style-section-faq .wp-block-accordion-item.is-open {
    box-shadow: inset 0 0 0 2px var(--wp--preset--color--primary);
}

.is-style-section-faq .wp-block-accordion-heading {
    transition: color 0.2s ease;
}

.is-style-section-faq .wp-block-accordion-item:hover > .wp-block-accordion-heading,
.is-style-section-faq .wp-block-accordion-item.is-open > .wp-block-accordion-heading {
    color: var(--wp--preset--color--primary);
}

/* Section FAQ en fin de page : la bande blanche rejoint le pied de page
   (annule le padding bas du <main> des modèles, ex. templates/page.html). */
.wp-block-group:has(> .wp-block-post-content > .is-style-section-faq:last-child) {
    padding-bottom: 0 !important;
}