/*
 * Section Séparateur — Figma node 2644:67565.
 *
 * Cadrage de la maquette : bloc de 1490 (colonne de contenu) sur 158 de haut. Filet gauche
 * de 0 à 680, fleuron de 80 x 110 centré à 745, filet droit de 810 à 1490. Le filet passe
 * par le milieu vertical du fleuron.
 *
 * Le SVG exporté par Figma aplatit les filets ET le fleuron dans une seule image de 1490 de
 * large. Étirée à la largeur réelle, elle déformerait le fleuron : on ne garde donc de
 * l'export que le fleuron (assets/img/ornement.svg, recadré sur sa boîte englobante exacte),
 * et les filets sont tracés en CSS pour pouvoir s'étirer sans lui.
 */

.section-divider {
    /* Un seul élément porte tout : le fleuron en image de fond, les filets en
       pseudo-éléments, et le `gap` du flex réserve la place du fleuron entre eux. */
    display: flex;
    align-items: center;
    /*
     * 80 de fleuron plus 24 de part et d'autre. La maquette laisse 25 : l'écart d'un pixel
     * est préféré à une valeur brute, les sections ne consommant que des tokens.
     */
    gap: calc(80px + 2 * var(--space-list));
    width: min(var(--container-content-width), 100% - 2 * var(--container-gutter));
    height: 110px;
    /* 24 au-dessus et en dessous : 110 + 48 = les 158 du cadre de la maquette. */
    margin: var(--space-list) auto;
    border: 0;
    background-image: url("../../../assets/img/ornement.svg");
    background-repeat: no-repeat;
    background-position: center;
    background-size: 80px 110px;
}

/* Les deux filets. Ils se partagent la largeur restante, donc s'étirent avec la page. */
.section-divider::before,
.section-divider::after {
    content: "";
    flex: 1;
    height: 1px;
    background-color: var(--color-secondary-400);
}

@media (max-width: 1200px) {
    .section-divider {
        --container-gutter: var(--space-bloc);
    }
}

@media (max-width: 768px) {
    .section-divider {
        --container-gutter: var(--space-m);
        /* Le fleuron réduit d'un tiers pour ne pas manger toute la largeur, les filets
           gardant assez de place pour rester lisibles. */
        gap: calc(54px + 2 * var(--space-s));
        height: 74px;
        background-size: 54px 74px;
    }
}