/* CSS non-critique - chargé de manière non-bloquante */

/* Lists */
ul,
ol {
    margin-top: var(--list-mt);
    margin-bottom: var(--list-mb);
    padding-left: var(--list-indent);
}

/* Cards */
.card {
    padding: var(--card-pad-desktop);
    border-radius: 12px;
    background: #fff;
}

.card>*+* {
    margin-top: var(--card-gap-v);
}

@media (max-width: 640px) {
    .card {
        padding: var(--card-pad-mobile);
    }
}

/* Buttons */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: var(--btn-pad-y) var(--btn-pad-x);
    border-radius: var(--btn-radius);
    cursor: pointer;
    text-decoration: none;
}

.btn-group {
    display: flex;
    gap: var(--btn-group-gap);
    flex-wrap: wrap;
}

@media (max-width: 640px) {
    .btn-group {
        gap: var(--btn-group-gap-mobile);
    }
}

/* Nav spacing */
.nav {
    display: flex;
    gap: var(--nav-gap-desktop);
    align-items: center;
}

@media (max-width: 640px) {
    .nav {
        gap: var(--nav-gap-mobile);
    }
}

/* Separateur visuel - seulement pour la section benefits */
.section--benefits::before {
    content: "";
    display: block;
    width: 60%;
    height: 1px;
    margin: 0 auto var(--space-section-pt-desktop);
    background: linear-gradient(90deg, transparent, var(--color-accent), transparent);
    opacity: 0.3;
}

@media (max-width: 640px) {
    .section--benefits::before {
        margin-bottom: var(--space-section-pt-mobile);
    }
}

/* Optimisation mobile - sections hors écran */
.section-below-fold {
    content-visibility: auto;
    contain-intrinsic-size: 1px 1000px;
}