/* ==========================================================================
   GRILLE — 4 colonnes (mobile), 8 (≥ 768 px), 12 (≥ 1024 px).
   Les ruptures (débordements, chevauchements) se font dans le CSS des
   composants, en partant de ces mêmes colonnes : les alignements restent cachés
   mais réels.
   ========================================================================== */

.grille {
    display: grid;
    grid-template-columns: repeat(var(--colonnes), minmax(0, 1fr));
    column-gap: var(--gouttiere);
    width: 100%;
    max-width: var(--largeur-max);
    margin-inline: auto;
    padding-inline: var(--marge);
}

.grille > * {
    grid-column: 1 / -1;
}

/* Pleine largeur, du bord de l'écran au bord de l'écran, dans une grille. */
.grille > .plein-cadre {
    grid-column: 1 / -1;
    margin-inline: calc(var(--marge) * -1);
}

/* Conteneur simple (sans grille) aligné sur les marges. */
.cadre {
    width: 100%;
    max-width: var(--largeur-max);
    margin-inline: auto;
    padding-inline: var(--marge);
}

/* --- Repère de grille (dev, touche G) ------------------------------------ */
.repere-grille {
    position: fixed;
    inset: 0;
    z-index: calc(var(--z-curseur) - 2);
    pointer-events: none;
    display: none;
}

.voir-grille .repere-grille {
    display: grid;
}

.repere-grille span {
    height: 100%;
    background: rgb(201 29 38 / 0.1);
    border-inline: 1px solid rgb(201 29 38 / 0.35);
}