@charset "UTF-8";

/**
 * 03-layout.css
 * ------------------------------------------------------------------
 * Conteneur principal, sections, grilles utilitaires et fonds.
 * S'appuie sur CSS Grid (CSS Grid Layout L1).
 * ------------------------------------------------------------------
 */

/* ------ Conteneur ------ */
.container {
    max-width: var(--container);
    margin: 0 auto;
    padding: 0 var(--pad);
}

/* ------ Sections ------ */
.section {
    padding: clamp(64px, 9vw, 140px) 0;
}

.section-tight {
    padding: clamp(48px, 6vw, 80px) 0;
}

/* ------ Grilles utilitaires ------ */
.grid-2 {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 32px;
}

.grid-3 {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
}

.grid-4 {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
}

/* ------ Diviseur horizontal ------ */
.divider {
    height: 1px;
    background: var(--line);
    border: none;
    margin: 0;
}

/* ------ Fonds de section ------ */
.bg-warm {
    background: var(--bg-warm);
}

.bg-alt {
    background: var(--bg-alt);
}

.bg-marine {
    background: var(--marine);
    color: var(--bg);
}

.bg-marine .h-display,
.bg-marine .lede {
    color: var(--bg);
}

.bg-marine .lede {
    opacity: 0.85;
}