/*
 * Section Cartes — Figma node 2644:68871.
 *
 * Cadrage de la maquette : padding vertical 96, gap 48 entre en-tête, rangée et bouton,
 * en-tête bridé à 884 et centré. Cartes de 480,667 séparées de 24, soit exactement trois dans
 * les 1490 de la largeur de contenu — (1490 - 2 x 24) / 3.
 */

.section-cards {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-xl);
    padding-block: var(--section-space);
}

.section-cards__header {
    display: flex;
    flex-direction: column;
    gap: var(--space-list);
    /* 884px dans la maquette. */
    width: min(884px, 100% - 2 * var(--container-gutter));
    text-align: center;
}

.section-cards__title {
    font-family: var(--font-family-heading);
    font-size: var(--font-size-h2);
    font-weight: 700;
    /* 61px sur 49px */
    line-height: 1.245;
    color: var(--color-primary);
}

.section-cards__intro {
    font-size: var(--font-size-p);
    line-height: var(--line-height-body);
    color: var(--color-primary-950);
}

/* ---- Rangée ---- */

.section-cards__list {
    /*
     * Nombre de cartes par rangée piloté par une seule variable. Le répéteur n'a pas de
     * maximum : plutôt que de dessiner une grille par cas de figure, on donne aux cartes une
     * base calculée et flex-wrap se charge du reste.
     */
    --cards-per-row: 3;

    display: flex;
    flex-wrap: wrap;
    /* Une rangée incomplète se centre, au lieu de laisser un vide à droite. */
    justify-content: center;
    gap: var(--space-list);
    width: min(var(--container-content-width), 100% - 2 * var(--container-gutter));
    margin: 0;
    padding: 0;
    list-style: none;
}

.section-cards__item {
    /*
     * flex-grow à 0 : une carte orpheline garde la largeur des autres et se centre. Avec
     * flex-grow à 1, la quatrième carte d'une série de quatre s'étirerait seule sur toute la
     * ligne — le défaut le plus visible d'une rangée à nombre libre.
     */
    flex: 0 1 calc(
        (100% - (var(--cards-per-row) - 1) * var(--space-list)) / var(--cards-per-row)
    );
    display: flex;
}

.section-cards__card {
    /*
     * La maquette fige le texte à 120 de haut. On ne le reprend pas : un texte plus long
     * serait tronqué. Les cartes d'une même rangée s'égalisent d'elles-mêmes, le comportement
     * par défaut d'une rangée flex étant d'étirer ses éléments.
     */
    display: flex;
    flex-direction: column;
    gap: var(--space-xl);
    width: 100%;
    padding: var(--space-section);
    border: 1px solid var(--color-primary);
    border-radius: var(--radius-xxxs);
    background-color: var(--color-primary-50);
    color: var(--color-primary);
}

.section-cards__icon {
    width: 50px;
    height: 50px;
    flex-shrink: 0;
}

.section-cards__icon-image {
    width: 100%;
    height: 100%;
    /* contain plutôt que cover : un picto se voit en entier, il ne se recadre pas. */
    object-fit: contain;
    object-position: left center;
}

.section-cards__content {
    display: flex;
    flex-direction: column;
    gap: var(--space-l);
}

.section-cards__card-title {
    font-family: var(--font-family-heading);
    font-size: var(--font-size-h6);
    font-weight: 700;
    line-height: 1.3;
}

.section-cards__text {
    font-size: var(--font-size-p);
    line-height: var(--line-height-body);
}

.section-cards__text p {
    margin: 0;
}

.section-cards__text p + p {
    margin-block-start: var(--space-compact);
}

/* ---- Adaptations ---- */

@media (max-width: 1200px) {
    .section-cards {
        --container-gutter: var(--space-bloc);
        gap: var(--space-large);
        padding-block: var(--section-space);
    }

    .section-cards__list {
        --cards-per-row: 2;
    }

    .section-cards__card {
        padding: var(--space-bloc);
        gap: var(--space-bloc);
    }
}

@media (max-width: 768px) {
    .section-cards {
        --container-gutter: var(--space-m);
    }

    .section-cards__list {
        --cards-per-row: 1;
    }

    .section-cards__card {
        padding: var(--space-l);
        gap: var(--space-list);
    }
}