/* Structure : conteneur, sections et champs de couleur, en-tête de section, grilles. */

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

/* Colonne de lecture (article, pages légales) : centrée, bande de titre comprise. */
.container--reading {
    max-width: calc(var(--reading) + 2 * var(--gutter));
}

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

/* Champs de couleur. Le fond de page est le brun presque noir ; .section--raised le relève d'un cran,
   .section--cream passe en crème et remappe les rôles en encre. Les composants ne lisent que les rôles. */
.section--night,
.section--raised,
.site-header,
.site-footer {
    /* Redéclarés : un champ sombre peut être posé dans une section crème (planche « la machine »). */
    --text-primary: var(--color-bone);
    --text-secondary: var(--color-dust);
    --text-link: var(--color-champagne);
    --text-link-hover: var(--color-bone);
    --focus-ring: var(--color-champagne);
    --btn-bg: var(--color-champagne);
    --btn-bg-hover: var(--color-champagne-hover);
    --btn-text: var(--color-night);
    --btn-line: var(--color-line-night-strong);
    --field-line: var(--color-line-night-strong);
    --rule: var(--color-line-night);
    background-color: var(--color-night);
    color: var(--text-primary);
}

.section--raised {
    background-color: var(--color-night-raised);
}

/* Champs sombres moins plats (utilisateur, 26/09/2026) : une lumière chaude tombe du haut, et une trame
   de points très fine s'efface vers le bas. Décor seul, sous le contenu ; le texte reste sur l'aplat. */
.section--night,
.section--raised,
.page-hero {
    position: relative;
    isolation: isolate;
    background-image: radial-gradient(120% 60% at 50% 0%, color-mix(in srgb, var(--color-champagne) 8%, transparent), transparent 75%);
}

.section--night::before,
.section--raised::before,
.page-hero::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: -1;
    background-image: radial-gradient(circle, color-mix(in srgb, var(--color-champagne) 18%, transparent) 1px, transparent 1.6px);
    background-size: 24px 24px;
    mask-image: linear-gradient(to bottom, #000, transparent 60%);
    pointer-events: none;
}

/* Deux sections crème à la suite forment un seul champ : pas de double espacement. */
.section--cream + .section--cream {
    padding-top: 0;
}

.section--cream {
    --text-primary: var(--color-ink);
    --text-secondary: var(--color-ink-muted);
    --text-link: var(--color-bronze-text);
    --text-link-hover: var(--color-ink);
    --focus-ring: var(--color-bronze);
    --btn-bg: var(--color-night);
    --btn-bg-hover: var(--color-night-high);
    --btn-text: var(--color-champagne);
    --btn-line: var(--color-line-cream);
    --field-line: var(--color-line-cream);
    --rule: var(--color-line-cream);
    background-color: var(--color-cream);
    color: var(--text-primary);
}

/* Crème plus soutenu, pour détacher une section claire d'une autre (FAQ après la couverture). Le bronze
   des liens y passe sous AA : lien couleur du texte, le soulignement le signale. */
.section--sand {
    --text-link: var(--color-ink);
    background-color: var(--color-cream-deep);
}

.section--cream.section--sand + .section--cream,
.section--cream + .section--cream.section--sand {
    padding-top: var(--section-space);
}

/* En-tête de section : le titre puis son texte, sur toute la largeur du conteneur. */
.section__head {
    display: grid;
    gap: var(--space-4);
    margin-bottom: var(--space-8);
}

.section__head h2 {
    text-wrap: pretty;
}

/* Sur mobile, un titre suivi d'un dessin, de photos ou de planches se centre ; suivi de texte, il
   reste aligné à gauche avec lui. */
@media (max-width: 47.99rem) {
    .section__head--center {
        text-align: center;
    }
}

.section__head p {
    color: var(--text-secondary);
    font-size: var(--text-md);
}

/* Primitives de mise en page, à préférer à une règle de composant quand le motif se répète. */
.stack > * + * {
    margin-top: var(--space-4);
}

/* Flux : même rythme vertical, réglable par --flow-space sur le conteneur. */
.flow > * + * {
    margin-top: var(--flow-space, var(--space-5));
}

/* Grappe : éléments en ligne qui passent à la ligne (boutons, liens, pastilles). */
.cluster {
    display: flex;
    flex-wrap: wrap;
    gap: var(--cluster-space, var(--space-3));
    align-items: center;
}

.grid {
    display: grid;
    gap: var(--space-5);
}

.split {
    display: grid;
    gap: var(--space-7);
    align-items: center;
}

@media (min-width: 48rem) {
    .grid--2 {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .split {
        grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
    }

    .split--start {
        align-items: start;
    }
}

/* Deux colonnes seulement en grand écran : un titre long dans une demi-colonne de tablette se
   couperait au milieu d'un mot (« l'emplacemen / t », 768 px). */
@media (min-width: 48rem) and (max-width: 63.99rem) {
    .split--late {
        grid-template-columns: minmax(0, 1fr);
    }
}

/* Image et texte côte à côte, l'image à fond perdu sur sa moitié et pleine hauteur ; --reverse passe
   l'image à droite. Sous 56rem : l'image en bandeau, puis le texte. --fade fond la photo dans le
   champ côté texte (masque posé sur le conteneur : une photo retournée ne retourne pas le fondu) ;
   --object centre un objet dessiné. */
.media-split {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
}

.media-split__media {
    position: relative;
    height: clamp(20rem, 70vw, 28rem);
    overflow: hidden;
}

.media-split__media > img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.media-split__media--fade {
    mask-image: linear-gradient(to bottom, #000 60%, transparent);
}

.media-split__media--object {
    display: grid;
    place-items: center;
    height: auto;
    padding-block: var(--space-9) 0;
}

.media-split__body {
    align-self: center;
    width: 100%;
    max-width: calc(var(--measure) + 2 * var(--gutter));
    padding: var(--space-8) var(--gutter) var(--section-space);
}

@media (min-width: 56rem) {
    .media-split {
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
        min-height: 48rem;
    }

    .media-split--tall {
        min-height: 60rem;
    }

    .media-split__media {
        height: auto;
    }

    .media-split__media > img {
        position: absolute;
        inset: 0;
    }

    .media-split__media--fade {
        mask-image: linear-gradient(to right, #000 55%, transparent);
    }

    .media-split--reverse .media-split__media {
        order: 2;
    }

    .media-split--reverse .media-split__media--fade {
        mask-image: linear-gradient(to left, #000 55%, transparent);
    }

    .media-split__media--object {
        padding-block: var(--section-space);
    }

    .media-split__body {
        padding: var(--section-space) clamp(2rem, 6vw, 6rem);
    }

    /* Colonne de texte sans mesure de lecture : pour du contenu en listes, qui laisserait sinon un
       grand vide sur un écran large (« 30 minutes par jour », utilisateur 25/09/2026). */
    .media-split__body--wide {
        max-width: none;
    }
}

/* Dans une colonne étroite (split), le titre de section n'ajoute pas sa marge à l'écart de la grille. */
.split > .section__head {
    margin-bottom: 0;
}