/* ===========================================================================
   WESTPORTS — Grilles et mise en page (LOT 06)
   Grilles éditoriales, espaces généreux, rythme vertical constant.
   =========================================================================== */

.wp-container {
    width: 100%;
    max-width: var(--wp-container);
    margin-inline: auto;
    padding-inline: var(--wp-gutter);
}

.wp-container--wide { max-width: var(--wp-container-wide); }
.wp-container--text { max-width: calc(var(--wp-container-text) + 2 * var(--wp-gutter)); }

.wp-section {
    padding-block: var(--wp-section-y);
    position: relative;
}

.wp-section--tight { padding-block: var(--wp-section-y-tight); }
.wp-section--top-0 { padding-top: 0; }
.wp-section--bottom-0 { padding-bottom: 0; }
.wp-section--alt { background-color: var(--wp-bg-alt); }

/* En-tête de section : surtitre, titre, chapô, action alignée à droite. */
.wp-section-head {
    display: grid;
    gap: var(--wp-space-4);
    margin-bottom: var(--wp-space-8);
    max-width: 72ch;
}

.wp-section-head--split {
    max-width: none;
    grid-template-columns: minmax(0, 1fr);
    align-items: end;
}

@media (min-width: 900px) {
    .wp-section-head--split {
        grid-template-columns: minmax(0, 1fr) auto;
        gap: var(--wp-space-6);
    }

    .wp-section-head--split > :last-child {
        justify-self: end;
    }
}

/* Grille éditoriale 12 colonnes. */
.wp-grid {
    display: grid;
    gap: var(--wp-grid-gap);
    grid-template-columns: repeat(12, minmax(0, 1fr));
}

.wp-cards {
    display: grid;
    gap: var(--wp-grid-gap);
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr));
}

.wp-cards--2 { grid-template-columns: repeat(auto-fill, minmax(min(100%, 420px), 1fr)); }
.wp-cards--4 { grid-template-columns: repeat(auto-fill, minmax(min(100%, 240px), 1fr)); }

/* Deux colonnes texte / visuel. */
.wp-split {
    display: grid;
    gap: clamp(var(--wp-space-6), 4vw, var(--wp-space-9));
    align-items: center;
}

@media (min-width: 900px) {
    .wp-split {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .wp-split--reverse > :first-child { order: 2; }
    .wp-split--60-40 { grid-template-columns: 1.4fr 1fr; }
    .wp-split--40-60 { grid-template-columns: 1fr 1.4fr; }
    .wp-split--top { align-items: start; }
}

.wp-stack {
    display: grid;
    gap: var(--wp-space-4);
    align-content: start;
}

.wp-stack--lg { gap: var(--wp-space-6); }
.wp-stack--sm { gap: var(--wp-space-2); }

.wp-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--wp-space-3);
}

.wp-row--between { justify-content: space-between; }
.wp-row--end { justify-content: flex-end; }
.wp-row--center { justify-content: center; }

/* Ratios d'image maîtrisés : aucun saut de mise en page au chargement. */
.wp-ratio {
    position: relative;
    overflow: hidden;
    background-color: var(--wp-surface-sunken);
    border-radius: var(--wp-radius-md);
}

.wp-ratio > img,
.wp-ratio > video,
.wp-ratio > picture > img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.wp-ratio--16x9  { aspect-ratio: 16 / 9; }
.wp-ratio--4x3   { aspect-ratio: 4 / 3; }
.wp-ratio--3x2   { aspect-ratio: 3 / 2; }
.wp-ratio--1x1   { aspect-ratio: 1 / 1; }
.wp-ratio--4x5   { aspect-ratio: 4 / 5; }
.wp-ratio--21x9  { aspect-ratio: 21 / 9; }

/* Filet de séparation discret. */
.wp-rule {
    height: 1px;
    background: var(--wp-border);
    border: 0;
    margin: 0;
}

.wp-rule--accent {
    height: 2px;
    width: 56px;
    background: var(--wp-accent);
}

/* Utilitaires d'espacement ponctuels. */
.wp-mt-4 { margin-top: var(--wp-space-4); }
.wp-mt-6 { margin-top: var(--wp-space-6); }
.wp-mt-8 { margin-top: var(--wp-space-8); }
.wp-mb-4 { margin-bottom: var(--wp-space-4); }
.wp-mb-6 { margin-bottom: var(--wp-space-6); }

/* Le contenu principal laisse la place à la barre d'action mobile. */
main {
    display: block;
}

@media (max-width: 767px) {
    body.has-mobile-bar main {
        padding-bottom: var(--wp-mobilebar-height);
    }
}