/* =========================================
   LAYOUT — conteneurs, sections, grilles. Aucun composant ici.
   ========================================= */

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

.container--narrow {
    max-width: var(--container-narrow);
    margin-inline: auto;
}

.site-main:focus {
    outline: none;
}

/* Lien d'évitement : visible seulement au clavier */
.skip-link {
    position: absolute;
    left: var(--space-sm);
    top: calc(-1 * var(--header-height));
    z-index: 100;
    padding: var(--space-2xs) var(--space-sm);
    background: var(--color-action);
    color: var(--color-on-action);
}

.skip-link:focus {
    top: var(--space-sm);
    color: var(--color-on-action);
}

/* Grilles */
.grid {
    display: grid;
    gap: var(--space-md);
}

.grid--2 { grid-template-columns: repeat(2, 1fr); }
.grid--3 { grid-template-columns: repeat(3, 1fr); }
.grid--4 { grid-template-columns: repeat(4, 1fr); }

@media (max-width: 900px) {
    .grid--3, .grid--4 { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 640px) {
    .grid--2, .grid--3, .grid--4 { grid-template-columns: 1fr; }
}

.button-group {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-sm);
}

.back-link {
    margin-bottom: var(--space-md);
    font-size: var(--text-sm);
}