/*
 * Mise en page. Une seule grille de 12 colonnes sert tout le site ; les sections
 * ne redéfinissent jamais leur propre conteneur, elles se posent dessus.
 */

.enveloppe {
    inline-size: min(100% - var(--gouttiere) * 2, var(--largeur-max));
    margin-inline: auto;
}

.enveloppe-large {
    inline-size: min(100% - var(--gouttiere) * 2, 110rem);
    margin-inline: auto;
}

.enveloppe-pleine {
    inline-size: 100%;
    padding-inline: var(--gouttiere);
}

.grille {
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    gap: var(--gouttiere);
}

@media (max-width: 60rem) {
    .grille {
        grid-template-columns: repeat(6, minmax(0, 1fr));
    }
}

/*
 * Section. La marge verticale est portée par --section-y pour que le rythme du
 * site entier se règle depuis un seul jeton.
 */
.section {
    position: relative;
    padding-block: var(--section-y);
    background-color: var(--fond);
    color: var(--texte);
}

.section--serree {
    padding-block: calc(var(--section-y) * 0.6);
}

.section--pleine {
    min-block-size: var(--vh);
    display: grid;
    align-content: center;
}

/*
 * En-tête de section : index mono à gauche, titre à droite. C'est le gabarit
 * répété d'un bout à l'autre du site — il donne au scroll son côté « on avance
 * dans une baie, prise par prise ».
 */
.entete-section {
    display: grid;
    grid-template-columns: subgrid;
    grid-column: 1 / -1;
    align-items: start;
    row-gap: 1.5rem;
}

.entete-section__index {
    grid-column: 1 / 3;
    color: var(--texte-tres-doux);
    padding-block-start: 0.7em;
    /* Un index coupé en deux lignes casse l'alignement de toute la section. */
    text-wrap: nowrap;
}

.entete-section__corps {
    grid-column: 3 / 11;
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
}

@media (max-width: 60rem) {
    .entete-section__index {
        grid-column: 1 / -1;
        padding-block-start: 0;
    }

    .entete-section__corps {
        grid-column: 1 / -1;
    }
}

/* Empilement libre : deux enfants qui se superposent (fond + contenu). */
.pile {
    display: grid;
}

.pile > * {
    grid-area: 1 / 1;
}

/* Bloc épinglé : hauteur d'écran, contenu centré. Utilisé par les timelines. */
.epingle {
    block-size: var(--vh);
    display: grid;
    align-content: center;
    overflow: clip;
}

/*
 * Filet horizontal fin, dessiné et non bordé : il s'anime en largeur au scroll
 * (voir le contrôleur « trait »).
 */
.filet {
    block-size: 1px;
    inline-size: 100%;
    background-color: var(--trait);
    transform-origin: left center;
}

.pile-texte > * + * {
    margin-block-start: var(--pile);
}

/* Décalages de colonnes courants. */
.col-1-6 { grid-column: 1 / 7; }
.col-1-7 { grid-column: 1 / 8; }
.col-3-11 { grid-column: 3 / 11; }
.col-3-13 { grid-column: 3 / 13; }
.col-7-13 { grid-column: 7 / 13; }
.col-plein { grid-column: 1 / -1; }

@media (max-width: 60rem) {
    .col-1-6,
    .col-1-7,
    .col-3-11,
    .col-3-13,
    .col-7-13 {
        grid-column: 1 / -1;
    }
}