/**
 * ADAPTWISE — Styles communs aux sections modulaires
 * ============================================================
 * Wrapper .section, variantes background/padding, container.
 * Styles spécifiques à chaque layout : css/sections/{layout}.css
 *
 * Référence : LOT 1 du devis 2025-MAPA-3003 (2026-04-20)
 */

/* ============================================================
   Wrapper de section
   ============================================================ */
.section {
    position: relative;
    width: 100%;
}

.section__container {
    max-width: var(--container-max-width);
    margin-inline: auto;
    padding-inline: var(--space-container-inline);
}

/* ============================================================
   Backgrounds (3 variantes validées LOT 1)
   ============================================================ */
.section--bg-white {
    background-color: var(--bg-white);
    color: var(--text-on-white);
}

.section--bg-blue {
    background-color: var(--bg-blue);
    color: var(--text-on-blue);
}

.section--bg-blue :where(h1, h2, h3, h4, h5, h6) {
    color: inherit;
}

.section--bg-blue :where(a:not(.btn)) {
    color: var(--color-accent);
}

.section--bg-gray {
    background-color: var(--bg-gray);
    color: var(--text-on-gray);
}

/* ============================================================
   Paddings verticaux
   ============================================================ */
.section--padding-normal {
    padding-block: var(--space-section);
}

.section--padding-compact {
    padding-block: var(--space-section-compact);
}

.section--padding-large {
    padding-block: var(--space-section-large);
}

@media (max-width: 768px) {
    .section--padding-normal {
        padding-block: var(--space-5);
    }
    .section--padding-compact {
        padding-block: var(--space-4);
    }
    .section--padding-large {
        padding-block: var(--space-6);
    }
}

/* ============================================================
   Rétro-compatibilité : classes historiques risques/accompagnements
   ============================================================ */
.section-background-white {
    background-color: var(--bg-white);
    color: var(--text-on-white);
}

.section-background-blue {
    background-color: var(--bg-blue);
    color: var(--text-on-blue);
}

.section-background-gray {
    background-color: var(--bg-gray);
    color: var(--text-on-gray);
}

/* Mobile : tous les CTA des sections en pleine largeur (retour client
   2026-07-20 — le hero est traité dans sections/hero.css avec en plus un
   padding vertical réduit). */
@media (max-width: 575px) {
    .section-accompagnements-auto__card-cta,
    .section-contact-card__branch-cta,
    .section-dual-choice__card-cta,
    .section-key-figures__cta,
    .section-map__cta,
    .section-numbered-cards__card-cta,
    .section-partners__card-cta,
    .section-rich-editorial__cta,
    .section-risques-auto__card-cta,
    .section-text-accordion__cta,
    .section-text-cards__card-cta,
    .section-text-image__cta,
    .section-text-steps__cta {
        display: flex;
        width: 100%;
        justify-content: center;
        text-align: center;
    }
}