/* Fichier produit par « app:styles:bundle ». Ne pas modifier à la main. */

/* ==== ./tokens.css ==== */
/**
 * Design tokens — Altisio
 *
 * Toutes les valeurs sont extraites du Design Language validé
 * (docs/pages/Altisio-Design-Language.dc.html, chapitres 04 à 07 et 11)
 * et vérifiées contre les onze pages de référence.
 *
 * Règle : aucun token pour une valeur employée une seule fois.
 */

:root {
    /* ---------------------------------------------------------------
     * Couleurs — chapitre 04
     * Chaque couleur porte une fonction et une seule.
     * ------------------------------------------------------------- */

    --color-paper: #f4f1ea; /* fond unique du site, 90 % de la surface */
    --color-ink: #16242c; /* texte qui compte — 14,1:1 sur papier */
    --color-blue: #023750; /* engagement — 11,2:1 sur papier */
    --color-red: #ff1d25; /* décision — 3,4:1, signalétique uniquement */

    --color-text: #33434c; /* corps de texte 14–17 px — 9,1:1 */
    --color-label: #4a5a63; /* numéros, libellés, légendes — 6,3:1 */
    --color-muted: #838b91; /* retrait, ≥ 24 px uniquement — 3,07:1 */
    --color-paper-shade: #eae5da; /* image en attente, uniquement */

    --color-label-on-blue: #a9bac3; /* équivalent du gris libellé sur bleu */
    --color-text-on-blue: #c6d2d8; /* texte courant sur bleu */

    /* ---------------------------------------------------------------
     * Filets et surfaces — nommés par fonction, pas par valeur.
     * Dérivés de l'encre (22,36,44) et du papier (244,241,234).
     * ------------------------------------------------------------- */

    --rule: rgb(22 36 44 / 0.22); /* séparateur standard */
    --rule-light: rgb(22 36 44 / 0.14); /* séparateur interne de fiche */
    --border: rgb(22 36 44 / 0.32); /* encadré, bloc de schéma */
    --rail-line: rgb(22 36 44 / 0.2); /* filet vertical du rail */

    --tint-fill: rgb(2 55 80 / 0.05); /* bloc rempli — un seul par schéma */
    --tint-hover: rgb(2 55 80 / 0.03); /* survol de ligne, fond d'encadré */

    /* Hiérarchie de schéma : l'épaisseur ne varie jamais, l'opacité s'en charge */
    --line-1: rgb(22 36 44 / 0.18);
    --line-2: rgb(22 36 44 / 0.26);
    --line-3: rgb(22 36 44 / 0.34);
    --line-4: rgb(22 36 44 / 0.42);

    --rule-on-blue: rgb(244 241 234 / 0.24);
    --rail-line-on-blue: rgb(244 241 234 / 0.28);
    --action-line-on-blue: rgb(244 241 234 / 0.45);
    --marker-line-on-blue: rgb(244 241 234 / 0.6);

    --action-line: rgb(22 36 44 / 0.45); /* filet sous un lien d'action */
    --marker-line: rgb(22 36 44 / 0.5); /* contour d'un marqueur filaire */
    --trame-line: rgb(22 36 44 / 0.42); /* filets des bandes de trame */

    /* ---------------------------------------------------------------
     * Typographie — chapitre 05
     * Deux familles, une seule graisse par famille. Le gras n'existe pas.
     * ------------------------------------------------------------- */

    --font-serif: "Newsreader", Georgia, serif;
    --font-sans: "Helvetica Neue", Helvetica, Arial, sans-serif;

    /* Trois échelles de Titre 01 — hiérarchie officialisée */
    --text-title-1-home: clamp(31px, 4.9vw, 72px);
    --text-title-1-page: clamp(34px, 4.2vw, 60px);
    --text-title-1-legal: clamp(28px, 3vw, 40px);

    --text-title-2: clamp(26px, 2.7vw, 38px);
    --text-statement: clamp(21px, 1.9vw, 26px);
    --text-statement-wide: clamp(22px, 2.1vw, 29px);
    --text-title-3: 23px;
    --text-title-3-name: 25px;
    --text-intro: 17px;
    --text-body: 15px;
    --text-body-dense: 14px;
    --text-caption: 13px;
    --text-label: 10.5px;

    /* Interlignage — aucune valeur intermédiaire */
    --leading-title-1-home: 1.05;
    --leading-title-1-page: 1.07;
    --leading-title-1-legal: 1.12;
    --leading-title-2: 1.14;
    --leading-title-3: 1.26;
    --leading-statement: 1.4;
    --leading-text: 1.66;
    --leading-dense: 1.62;
    --leading-tight: 1.5;

    /* Approche — négative sur les titres, nulle sur les textes */
    --tracking-title-1-home: -0.028em;
    --tracking-title-1-page: -0.026em;
    --tracking-title-2: -0.022em;
    --tracking-statement: -0.016em;
    --tracking-title-3: -0.014em;

    /*
     * 0,16 em désigne un repère à lire ; 0,18 em désigne une action à faire.
     * La distinction est structurante, pas esthétique : ne jamais les échanger.
     */
    --tracking-label: 0.16em;
    --tracking-action: 0.18em;

    /* Largeurs de lecture — au-delà, la ligne cesse d'être lue */
    --measure-title: 16em;
    --measure-intro: 31em;
    --measure-body: 34em;
    --measure-dense: 26em;

    /* ---------------------------------------------------------------
     * Grille et rail — chapitre 06
     * 64 + 40 + 160 = 264. La colonne de gauche reste vide.
     * ------------------------------------------------------------- */

    --page-margin: 64px;
    --rail: 264px;
    --rail-number-col: 40px; /* de 64 à 104 px */
    --rail-label-col: 160px; /* de 104 à 264 px, gouttière comprise */
    --rail-label-text: 136px; /* largeur utile du libellé */
    --rail-line-x: 96px; /* abscisse du filet vertical */

    --columns: 12;
    --gutter: 24px;
    --hairline: 1px;
    --spec-label: 150px; /* colonne de libellé d'une liste de spécification */

    /* ---------------------------------------------------------------
     * Rythme vertical — unité de base 8 px.
     * La page respire par paliers : le haut et le bas d'une section
     * diffèrent volontairement, pour qu'elles ne se confondent pas au scroll.
     * ------------------------------------------------------------- */

    --space-1: 8px;
    --space-2: 16px;
    --space-3: 24px;
    --space-4: 32px;
    --space-5: 40px;
    --space-6: 48px;
    --space-7: 56px;
    --space-8: 64px;
    --space-9: 72px;

    --section-pt: 72px; /* section courante */
    --section-pt-opening: 96px; /* section d'ouverture, porte le h1 */
    --section-pt-ample: 112px; /* aplat bleu et sections amples */
    --section-pb: 128px;
    --section-pb-page: 144px;
    --section-pb-final: 200px; /* dernière section de la page */
    --section-label-lift: 8px; /* le repère de rail remonte de 8 px sur papier */
    --title-gap: 72px; /* titre → contenu */

    --bar: 88px; /* hauteur de l'en-tête et du pied */
    --band: 30px; /* hauteur d'une bande de trame */

    /* ---------------------------------------------------------------
     * Marqueurs — le signe se répète, sa rareté fait sa fonction.
     * ------------------------------------------------------------- */

    --marker: 7px; /* carré de schéma */
    --marker-page: 9px; /* carré du rail et des jalons */

    /* ---------------------------------------------------------------
     * Mouvement — chapitre 11
     * Quatre animations, aucune autre. Aucun rebond.
     * ------------------------------------------------------------- */

    --ease: cubic-bezier(0.16, 0.7, 0.2, 1);
    --ease-long: cubic-bezier(0.22, 0.6, 0.2, 1);

    --duration-draw: 1000ms;
    --duration-draw-short: 620ms;
    --duration-settle: 900ms;
    --duration-reveal: 900ms;
    --duration-rail: 1400ms; /* plafond absolu du système */
    --duration-hover: 120ms;

    --stagger: 44ms; /* entre deux éléments d'une même série */
    --settle-shift: 12px; /* jamais plus, et jamais latéralement */

    /* ---------------------------------------------------------------
     * Empilement — deux niveaux suffisent.
     * Le rail n'en a pas : il se peint sous les sections, ce qui lui
     * permet de passer derrière l'aplat bleu qui redessine le sien.
     * ------------------------------------------------------------- */

    --z-header: 20;
    --z-menu: 19;
    --z-skip-link: 30;
}

/* ===================================================================
 * Points de rupture — deux, et deux seulement.
 *
 * 1100 px : le rail se replie. Le numéro et le libellé de chapitre
 *           quittent la marge et se posent au-dessus du contenu.
 * 760 px  : tout s'empile. Les grilles passent à une colonne, la
 *           navigation devient un menu.
 *
 * Ces deux valeurs viennent des maquettes responsive validées. Elles ne
 * peuvent pas être écrites en tokens — une requête de média ne lit pas les
 * propriétés personnalisées — mais elles ne s'écrivent nulle part ailleurs.
 *
 * Trois valeurs, en revanche, sont bien des tokens : la marge de page et la
 * hauteur des bandes changent de palier, et tout ce qui en dépend suit.
 * ================================================================= */

@media (max-width: 1099.98px) {
    :root {
        --page-margin: 40px;
    }
}

@media (max-width: 759.98px) {
    :root {
        --page-margin: 24px;
        --bar: 65px;
    }
}

/* ==== ./base/reset.css ==== */
/**
 * Reset — le strict nécessaire.
 *
 * On ne neutralise que ce qui gênerait la grille et le rythme vertical.
 * Tout le reste est traité par typography.css et layout.css.
 */

*,
*::before,
*::after {
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
}

@media (prefers-reduced-motion: reduce) {
    html {
        scroll-behavior: auto;
    }
}

body {
    margin: 0;
}

/* Le rythme vertical est décidé par la mise en page, jamais hérité du navigateur. */
h1,
h2,
h3,
h4,
p,
figure,
blockquote,
dl,
dd {
    margin: 0;
}

ul,
ol {
    margin: 0;
    padding: 0;
    list-style: none;
}

/* Aucun gras dans le système : l'emphase se fait par la taille, la famille ou la couleur. */
h1,
h2,
h3,
h4,
th,
strong,
b {
    font-weight: 400;
}

img,
svg {
    display: block;
    max-width: 100%;
    height: auto;
}

a {
    color: inherit;
    text-decoration: none;
}

button,
input,
textarea,
select {
    font: inherit;
    color: inherit;
    letter-spacing: inherit;
    background: none;
    border: 0;
    border-radius: 0;
}

button {
    padding: 0;
    cursor: pointer;
}

table {
    border-collapse: collapse;
    border-spacing: 0;
}

th {
    text-align: left;
}

/* ==== ./base/typography.css ==== */
/**
 * Typographie — chapitre 05 du Design Language.
 *
 * Le serif pense, le sans-serif indique.
 * Newsreader porte ce qui relève de la pensée ; Helvetica ce qui relève
 * de la mécanique. Regular uniquement, dans les deux familles.
 *
 * L'échelle est FERMÉE : dix rôles, pas un de plus. Une taille écrite
 * en dur dans un template est un signal d'alarme, pas une habitude.
 */

/* Newsreader 400, auto-hébergée. Sous-ensemble latin : couvre le français
   (accents, Œ/œ, guillemets, apostrophe typographique, espaces insécables). */
@font-face {
    font-family: "Newsreader";
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url("../fonts/newsreader-latin-400-pFcStor.woff2") format("woff2");
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6,
        U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122,
        U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

body {
    font-family: var(--font-sans);
    font-size: var(--text-body);
    line-height: var(--leading-text);
    color: var(--color-ink);

    /* Pour que les colonnes de chiffres s'alignent, sur tout le site. */
    font-variant-numeric: tabular-nums;
    -webkit-font-smoothing: antialiased;
}

/* ===================================================================
 * Les dix rôles
 * =================================================================== */

/* 01 — Titre 01. Un seul par page, en haut. Termine par un point rouge. */
.t-title-1 {
    font-family: var(--font-serif);
    font-size: var(--text-title-1-page);
    line-height: var(--leading-title-1-page);
    letter-spacing: var(--tracking-title-1-page);
    text-wrap: pretty;
}

/* Trois échelles officialisées : la homepage frappe plus fort,
   les mentions légales restent neutres. */
.t-title-1--home {
    font-size: var(--text-title-1-home);
    line-height: var(--leading-title-1-home);
    letter-spacing: var(--tracking-title-1-home);
}

.t-title-1--legal {
    font-size: var(--text-title-1-legal);
    line-height: var(--leading-title-1-legal);
    letter-spacing: var(--tracking-title-2);
}

/*
 * Titre de fermeture. Le Design Language le définit dans le composant CTA
 * et non dans l'échelle : clamp(30–52 px) sur 17 em maximum.
 * Il ferme la page sur la phrase qui l'a ouverte.
 */
.t-title-cta {
    font-family: var(--font-serif);
    font-size: clamp(30px, 3.6vw, 52px);
    line-height: var(--leading-title-2);
    letter-spacing: var(--tracking-title-1-page);
    max-width: 17em;
}

/* 02 — Titre 02. Un par section. Douze mots maximum, seize em de large. */
.t-title-2 {
    font-family: var(--font-serif);
    font-size: var(--text-title-2);
    line-height: var(--leading-title-2);
    letter-spacing: var(--tracking-title-2);
    max-width: var(--measure-title);
}

/* 03 — Énoncé. Une conviction isolée. Jamais deux par section. */
.t-statement {
    font-family: var(--font-serif);
    font-size: var(--text-statement);
    line-height: var(--leading-statement);
    color: var(--color-blue);
}

.t-statement--wide {
    font-size: var(--text-statement-wide);
    letter-spacing: var(--tracking-statement);
}

/* 04 — Titre 03. Item de liste structurée, principe, nom de client. */
.t-title-3 {
    font-family: var(--font-serif);
    font-size: var(--text-title-3);
    line-height: var(--leading-title-3);
    letter-spacing: var(--tracking-title-3);
}

.t-title-3--name {
    font-size: var(--text-title-3-name);
    letter-spacing: var(--tracking-statement);
}

/* 05 — Intro. Une seule fois par page, sous le titre 01. */
.t-intro {
    font-size: var(--text-intro);
    line-height: var(--leading-text);
    color: var(--color-text);
    max-width: var(--measure-intro);
    text-wrap: pretty;
}

/* 06 — Corps. Paragraphes de démonstration. */
.t-body {
    font-size: var(--text-body);
    line-height: var(--leading-text);
    color: var(--color-text);
    max-width: var(--measure-body);
}

/* 07 — Corps dense. Listes, fiches, tableaux, colonnes multiples. */
.t-body-dense {
    font-size: var(--text-body-dense);
    line-height: var(--leading-dense);
    color: var(--color-text);
}

/* 08 — Légende. Sous un schéma ou un spécimen, jamais ailleurs.
   Elle nomme ce qu'on voit ; elle ne l'explique pas. */
.t-caption {
    font-size: var(--text-caption);
    line-height: var(--leading-tight);
    color: var(--color-label);
}

/*
 * Un repère tient sur une ligne : son interlignage est naturel.
 *
 * Les références ne donnent d'interlignage qu'aux libellés qui se replient
 * — celui du rail, sur deux lignes, et celui d'une fiche de spécification.
 * Partout ailleurs — numéros, mentions, liens, actions — un interlignage
 * imposé enfoncerait le glyphe de deux pixels sous la ligne qu'il repère.
 */

/* 09 — Libellé. Un repère à lire : 0,16 em. */
.t-label {
    font-size: var(--text-label);
    line-height: normal;
    letter-spacing: var(--tracking-label);
    text-transform: uppercase;
    color: var(--color-label);
}

/* 10 — Action. Une action à faire : 0,18 em. */
.t-action {
    font-size: var(--text-label);
    line-height: normal;
    letter-spacing: var(--tracking-action);
    text-transform: uppercase;
}

/* ===================================================================
 * Modificateurs de couleur — sémantiques, jamais décoratifs
 * =================================================================== */

/* Second membre d'un titre, option écartée, mise en retrait volontaire.
   Signifie « écarté », pas « moins important ». Jamais sous 19 px. */
.t-muted {
    color: var(--color-muted);
}

/* Le point final rouge d'un titre. Une affirmation qu'on n'ose pas
   terminer n'en est pas une. Ponctuation, pas marqueur sémantique. */
.t-period {
    color: var(--color-red);
}

/*
 * Le membre d'un énoncé qui porte la bascule — « Le chaos ne l'est pas. »
 * Réservé aux énoncés : à 3,4:1 le rouge ne tient le niveau AA qu'à partir
 * de 24 px. Jamais sur du texte courant, jamais sur un titre.
 */
.t-decision {
    color: var(--color-red);
}

/* ===================================================================
 * Contexte sur aplat bleu
 *
 * La section bleue emporte ces règles : aucune page n'a à se souvenir
 * d'ajouter une classe pour que ses textes restent lisibles.
 * .on-blue reste disponible pour un bloc bleu hors section.
 * =================================================================== */

.on-blue,
.section--blue {
    color: var(--color-paper);
}

.on-blue .t-label,
.on-blue .t-caption,
.section--blue .t-label,
.section--blue .t-caption {
    color: var(--color-label-on-blue);
}

.on-blue .t-body,
.on-blue .t-body-dense,
.on-blue .t-intro,
.section--blue .t-body,
.section--blue .t-body-dense,
.section--blue .t-intro {
    color: var(--color-text-on-blue);
}

.on-blue .t-statement,
.section--blue .t-statement {
    color: var(--color-paper);
}

/* L'italique est réservé aux citations littérales, jamais à l'emphase. */
em,
i {
    font-style: italic;
}

/* ==== ./base/layout.css ==== */
/**
 * Layout — chapitres 06 et 07 du Design Language.
 *
 * Toute section se compose de deux zones : une marge de repérage de 264 px
 * à gauche, qui ne contient qu'un numéro et un libellé, et une zone de
 * contenu sur douze colonnes. Cette asymétrie est la signature structurelle
 * du site. Elle ne se centre jamais.
 *
 * Le rail est construit en CSS Grid et non en positionnement absolu :
 *   64 (marge) + 40 (numéro) + 160 (libellé) = 264 px exactement.
 * Le rendu desktop est identique au pixel près, et la dégradation
 * responsive devient possible sans réécrire le balisage.
 */

body {
    background: var(--color-paper);
}

/* ===================================================================
 * Enveloppe de page
 * =================================================================== */

/*
 * Le filet vertical du rail et son carré rouge traversent tout le corps
 * de la page. Le filet remonte de 30 px dans la bande de trame haute ;
 * il s'arrête 132 px avant le bas, où le carré rouge le termine.
 */
.page-body {
    position: relative;

    /*
     * Les filets d'un schéma dépassent du cadre de contenu — c'est voulu, le
     * schéma appartient à la page. Le débord vers la droite ne doit pas pour
     * autant créer une barre de défilement : « clip » le coupe sans rien
     * couper verticalement, où le rail remonte dans la bande de trame.
     */
    overflow-x: clip;
}

.page-body::before {
    content: "";
    position: absolute;
    left: var(--rail-line-x);
    top: calc(-1 * var(--band));
    bottom: 132px;
    width: var(--hairline);
    background: var(--rail-line);
    transform-origin: top;
    animation: draw-y var(--duration-rail) 200ms var(--ease-long) both;
}

/* Le carré rouge : centré sur le filet, il en marque la fin.
   96 + 0,5 − 4,5 = 92 px. */
.page-body::after {
    content: "";
    position: absolute;
    left: calc(
        var(--rail-line-x) + var(--hairline) / 2 - var(--marker-page) / 2
    );
    bottom: 124px;
    width: var(--marker-page);
    height: var(--marker-page);
    background: var(--color-red);
}

/* Le rail n'est pas animé sur les pages qui ne le sont pas (mentions légales). */
.page-body--static::before {
    animation: none;
}

/* ===================================================================
 * Section
 * =================================================================== */

.section {
    position: relative;
    display: grid;
    grid-template-columns:
        [number] var(--rail-number-col)
        [label] var(--rail-label-col)
        [content] minmax(0, 1fr);
    padding: var(--section-pt) var(--page-margin) var(--section-pb-page);
    border-top: var(--hairline) solid var(--rule);
}

/* Le repère de rail remonte de 8 px pour s'aligner sur la première ligne
   du contenu. Annulé sur les sections d'ouverture et sur aplat bleu. */
.section__number,
.section__label {
    margin-top: calc(-1 * var(--section-label-lift));

    /* Le repère occupe sa propre hauteur, pas celle de la section :
       il reste en haut du rail quelle que soit la longueur du contenu. */
    align-self: start;
}

.section__number {
    grid-column: number;

    /* Un numéro n'est pas un libellé : pas de capitales forcées. */
    text-transform: none;
}

/* Le libellé de chapitre tient sur deux lignes : il reprend l'interlignage. */
.section__label {
    grid-column: label;
    width: var(--rail-label-text);
    line-height: var(--leading-tight);
}

.section__content {
    grid-column: content;
    min-width: 0;
}

/* Section d'ouverture — porte le h1. */
.section--opening {
    padding-top: var(--section-pt-opening);
    border-top: 0;
}

.section--opening .section__number,
.section--opening .section__label {
    margin-top: 0;
}

/* Section ample — respiration supérieure sans changer de nature. */
.section--ample {
    padding-top: var(--section-pt-ample);
}

/* Section fermée — bas resserré. */
.section--close {
    padding-bottom: var(--section-pb);
}

/* Dernière section de la page. */
.section--final {
    padding-bottom: var(--section-pb-final);
}

/* Sans filet supérieur — lorsqu'une section suit un aplat bleu. */
.section--flush {
    border-top: 0;
}

/* Section sur aplat bleu — un seul grand aplat éditorial par page.
   C'est le filet qui sépare, pas la couleur : donc pas de bordure ici. */
.section--blue {
    padding-top: var(--section-pt-ample);
    padding-bottom: var(--section-pb);
    background: var(--color-blue);
    color: var(--color-paper);
    border-top: 0;
}

/* La couleur des repères sur bleu est portée par typography.css. */
.section--blue .section__number,
.section--blue .section__label {
    margin-top: 0;
}

/* Le filet du rail se poursuit en clair à travers l'aplat. */
.section--blue::before {
    content: "";
    position: absolute;
    left: var(--rail-line-x);
    top: 0;
    bottom: 0;
    width: var(--hairline);
    background: var(--rail-line-on-blue);
}

/* ===================================================================
 * Pages documentaires
 *
 * Le carnet, une entrée de carnet et la doctrine n'ouvrent pas sur une
 * thèse et ne ferment pas sur une action : elles ouvrent sur un cartouche
 * et ferment sur une référence. Leurs deux respirations extrêmes sont donc
 * plus courtes que celles des pages qui appellent à décider — 112 et 160 px
 * au lieu de 144 et 200. Le reste du rythme est identique.
 * =================================================================== */

.page-body--document .section--opening {
    padding-bottom: 112px;
}

.page-body--document .section--final {
    padding-bottom: 160px;
}

/* ===================================================================
 * Grille de contenu — douze colonnes, gouttière de 24 px
 * =================================================================== */

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

/*
 * Placements nommés par intention.
 * Ces cinq paires sont celles réellement employées par les pages validées :
 * les nommer évite un système de classes utilitaires, et rend lisible
 * l'intention de mise en page plutôt que ses coordonnées.
 */

/* Titre + intro + actions, schéma ou repères à droite.
   Homepage, Approche, Histoires, Histoire, Expertises, Maison,
   Contact, Carnet, Carnet-Entrée, Doctrine — section d'ouverture. */
.editorial {
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    gap: var(--gutter);
    align-items: start;
}

.editorial > :nth-child(1) {
    grid-column: 1 / span 7;
}

.editorial > :nth-child(2) {
    grid-column: 9 / span 4;
}

/* Titre + schéma à gauche, démonstration à droite.
   Homepage 02, Approche 02, Expertises 02, Maison 02, Histoire 03,
   Doctrine 02, Carnet-Entrée 05. */
.split-demo {
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    gap: var(--gutter);
}

.split-demo > :nth-child(1) {
    grid-column: 1 / span 5;
}

.split-demo > :nth-child(2) {
    grid-column: 8 / span 5;
}

/* Schéma à gauche, fiche de spécification à droite.
   Approche 04 à 07, Histoires 02, Histoire 02, Carnet-Entrée 02 et 04,
   Contact 04. */
.split-sheet {
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    gap: var(--gutter);
    align-items: start;
}

.split-sheet > :nth-child(1) {
    grid-column: 1 / span 5;
}

.split-sheet > :nth-child(2) {
    grid-column: 7 / span 6;
}

/* Texte + portrait. Homepage 06, Maison 05. */
.split-portrait {
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    gap: var(--gutter);
    align-items: end;
}

.split-portrait > :nth-child(1) {
    grid-column: 1 / span 6;
}

.split-portrait > :nth-child(2) {
    grid-column: 9 / span 4;
}

/* Liste + note latérale. Approche 03, Doctrine 05. */
.split-note {
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    gap: var(--gutter);
    align-items: start;
}

.split-note > :nth-child(1) {
    grid-column: 1 / span 6;
}

.split-note > :nth-child(2) {
    grid-column: 8 / span 5;
}

/*
 * Listes — composant 10 du Design Language.
 *
 * Exposer une série d'éléments de même nature sans hiérarchie artificielle.
 * Aucune puce, aucun cadre, aucune carte. L'écart de 72 px sépare les
 * colonnes davantage que la gouttière : ce sont des objets, pas des cellules.
 */
.list-3 {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    column-gap: var(--space-9);
    row-gap: var(--space-8);
}

.list-4 {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    column-gap: var(--space-9);
    row-gap: var(--space-7);
}

/* ===================================================================
 * Barres et bandes — l'en-tête, le pied et les bandes de trame
 * partagent la géométrie du rail.
 * =================================================================== */

.bar {
    display: grid;
    grid-template-columns: var(--rail) minmax(0, 1fr);
    align-items: center;
    height: var(--bar);
}

/* ===================================================================
 * Repli — 1100 px : le rail quitte la marge
 *
 * Le système de chapitres ne disparaît pas, il change de place : le numéro
 * et le libellé se posent au-dessus du contenu, dans l'ordre où on les lit.
 * Le filet vertical, lui, n'a plus de marge à occuper — il se retire.
 *
 * Les paliers de respiration se referment : sous cette largeur, toutes les
 * sections partagent le même rythme, et seul l'aplat bleu s'en écarte.
 * =================================================================== */

@media (max-width: 1099.98px) {
    .page-body::before,
    .page-body::after,
    .section--blue::before {
        display: none;
    }

    .section,
    .section--opening,
    .section--ample,
    .section--close,
    .section--final,
    .page-body--document .section--opening,
    .page-body--document .section--final {
        grid-template-columns: minmax(0, 1fr);
        padding: 72px var(--page-margin) 112px;
    }

    .section--blue {
        padding: 88px var(--page-margin) 104px;
    }

    /*
     * Les trois zones se suivent dans l'ordre du document. Leur placement
     * nommé doit être annulé explicitement : une ligne de grille qui n'existe
     * plus ne disparaît pas, elle crée une colonne implicite.
     */
    .section__number,
    .section__label,
    .section__content {
        grid-column: auto;
        margin-top: 0;
    }

    .section__number {
        margin-bottom: 6px;
    }

    .section__label {
        width: auto;
        margin-bottom: 36px;
    }
}

/* ===================================================================
 * Repli — 760 px : tout s'empile
 *
 * Les cinq placements nommés perdent leur découpe en colonnes. L'ordre du
 * document devient l'ordre de lecture : c'est pour cela qu'il a été écrit
 * dans cet ordre.
 * =================================================================== */

@media (max-width: 759.98px) {
    .section,
    .section--opening,
    .section--ample,
    .section--close,
    .section--final,
    .page-body--document .section--opening,
    .page-body--document .section--final {
        padding: 56px var(--page-margin) 88px;
    }

    .section--blue {
        padding: 64px var(--page-margin) 88px;
    }

    .grid-12,
    .editorial,
    .split-demo,
    .split-sheet,
    .split-portrait,
    .split-note {
        grid-template-columns: minmax(0, 1fr);
        gap: 44px;
    }

    /*
     * `:nth-child(n)` désigne tous les enfants avec la même spécificité que
     * les placements nommés qu'il annule : sans cela, `grid-column: 1 / span 7`
     * l'emporterait et la colonne resterait en place.
     */
    .grid-12 > :nth-child(n),
    .editorial > :nth-child(n),
    .split-demo > :nth-child(n),
    .split-sheet > :nth-child(n),
    .split-portrait > :nth-child(n),
    .split-note > :nth-child(n) {
        grid-column: auto;
    }

    /* Une série d'objets reste une série : elle s'aligne, elle ne se tasse pas. */
    .list-3,
    .list-4 {
        grid-template-columns: minmax(0, 1fr);
        row-gap: 44px;
    }
}

/* Entre les deux paliers, les colonnes d'une série se resserrent sans
   perdre leur nombre. */
@media (min-width: 760px) and (max-width: 1099.98px) {
    .list-3,
    .list-4 {
        column-gap: var(--space-5);
    }
}

/* ===================================================================
 * Liens et focus
 * =================================================================== */

/*
 * Au survol, le texte reste en encre et le rouge se porte sur le filet.
 * Le rouge désigne, il ne dégrade pas la lisibilité : à 3,4:1 il ne peut
 * pas porter du texte courant.
 */
a:hover {
    text-decoration: underline;
    text-decoration-color: var(--color-red);
    text-decoration-thickness: var(--hairline);
    text-underline-offset: 4px;
}

:focus-visible {
    outline: var(--hairline) solid var(--color-ink);
    outline-offset: 4px;
}

.section--blue :focus-visible {
    outline-color: var(--color-paper);
}

/* Le lien d'évitement n'apparaît qu'au clavier. */
.skip-link {
    position: absolute;
    left: -9999px;
    z-index: var(--z-skip-link);
}

.skip-link:focus-visible {
    left: var(--page-margin);
    top: var(--space-2);
    padding: var(--space-2) var(--space-3);
    background: var(--color-paper);
    outline-offset: 0;
}

/* ==== ./base/motion.css ==== */
/**
 * Mouvement — chapitre 11 du Design Language.
 *
 * Une animation raconte une construction, jamais une arrivée.
 * Quatre animations existent, et il n'en existera pas d'autres :
 * un trait se trace depuis son origine, un bloc se pose, un texte apparaît.
 *
 * Interdits : boucle, parallaxe, rejeu au scroll, mouvement latéral,
 * transformation d'échelle sur un bloc de contenu, animation d'un élément
 * non cliquable au survol, toute durée supérieure à 1,4 seconde.
 */

/* Un trait se trace depuis son point d'ancrage réel :
   gauche pour une horizontale, haut pour une verticale. */
@keyframes draw-x {
    from {
        transform: scaleX(0);
    }

    to {
        transform: scaleX(1);
    }
}

@keyframes draw-y {
    from {
        transform: scaleY(0);
    }

    to {
        transform: scaleY(1);
    }
}

/* Un bloc se pose : 12 px vers le haut, jamais plus, jamais latéralement. */
@keyframes settle {
    from {
        opacity: 0;
        transform: translateY(var(--settle-shift));
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Un texte apparaît. */
@keyframes reveal {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

/*
 * Le survol change une couleur ou un fond, jamais une forme.
 * Aucune transition au-delà de 120 ms.
 */
a,
button {
    transition: color var(--duration-hover) linear,
        background-color var(--duration-hover) linear,
        border-color var(--duration-hover) linear,
        text-decoration-color var(--duration-hover) linear;
}

/*
 * Toutes les animations sont coupées par une règle unique.
 * La page reste complète et lisible : aucune information n'est portée
 * par le mouvement.
 */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;

        /* Rien n'attend plus le défilement : ce qui devait se construire est
           déjà construit. Sinon un schéma en attente resterait invisible. */
        animation-play-state: running !important;
    }
}

/* ==== ./components/threshold.css ==== */
/**
 * Bande de trame — chapitre 07.
 *
 * Elle apparaît deux fois par page, jamais plus. Elle ne sert jamais de fond,
 * jamais de séparateur entre deux paragraphes, jamais de texture derrière du
 * texte. Les bandes de seuil sont statiques : seule la trame démonstrative
 * s'anime, et elle n'appartient pas à l'enveloppe.
 */

.threshold {
    position: relative;
    height: var(--band);
    overflow: hidden;

    /* Les filets héritent leur couleur : une seule valeur à maintenir. */
    color: var(--trame-line);
}

.threshold__line {
    position: absolute;

    /* 1 px sans exception, quelle que soit la densité d'écran. */
    width: var(--hairline);
    background: currentColor;
}

/* En haut de page, la trame descend du désordre. */
.threshold--scattered .threshold__line {
    top: 0;
}

/*
 * En bas, elle remonte vers l'ordre, et referme la page d'un filet.
 * Comme pour l'en-tête, le filet s'ajoute aux 30 px de la bande.
 */
.threshold--ordered {
    height: calc(var(--band) + var(--hairline));
    border-bottom: var(--hairline) solid var(--rule);
}

.threshold--ordered .threshold__line {
    bottom: 0;
}

/* ==== ./components/navigation.css ==== */
/**
 * Navigation — composant 01.
 *
 * Bande de 88 px, logo dans la colonne de 264 px, liens alignés à droite.
 * Collante en haut de page, fond opaque. Aucun arrondi, aucune ombre,
 * aucun fond translucide, aucun bouton coloré.
 */

.site-header {
    position: sticky;
    top: 0;
    z-index: var(--z-header);
    background: var(--color-paper);
    border-bottom: var(--hairline) solid var(--rule);

    /*
     * La bande mesure 88 px, et le filet de séparation s'ajoute en dessous :
     * la référence les compte séparément. Sans ce pixel, tout le document
     * remonte d'une unité et le logo perd son centrage à 26,5 px.
     */
    height: calc(var(--bar) + var(--hairline));
}

/*
 * La marque prend la place qu'elle demande — logo, filet, mention — et les
 * liens gardent la marge droite. La colonne de rail ne la contient plus.
 */
.site-header {
    grid-template-columns: auto minmax(0, 1fr);
}

.site-header__brand {
    display: flex;
    align-items: center;
    gap: 18px;
    padding-left: var(--page-margin);
}

/* Le logo confirme, il n'annonce pas : une fois par page, 35 px de haut. */
.site-header__logo {
    height: 35px;
    width: auto;
}

/*
 * Le filet sépare le signe du mot. Il fait 48 px de haut — plus que le logo,
 * moins que la bande — et 1 px de large : la maquette l'écrit à 1,5 px, ce
 * qu'aucun écran ne rend net (cf. EG-14).
 */
.site-header__rule {
    width: var(--hairline);
    height: 48px;
    margin: 0 9px;
    background: var(--rule);
}

.site-header__tagline {
    color: var(--color-label);
    white-space: nowrap;
}

.site-nav {
    display: flex;
    justify-content: flex-end;
    gap: 40px;
    padding-right: var(--page-margin);
}

.site-nav__link {
    color: var(--color-label);

    /*
     * Cible de 44 px minimum, obtenue par le rempli vertical : la hauteur
     * de la bande reste de 88 px.
     */
    display: flex;
    align-items: center;
    min-height: 44px;
}

/*
 * Au survol, le texte remonte du gris libellé vers l'encre — un gain de
 * contraste — et le rouge se porte sur le filet. Le rouge désigne ; il ne
 * peut pas porter du texte courant.
 */
.site-nav__link:hover {
    color: var(--color-ink);
}

/*
 * La page courante est en encre. La couleur ne porte pas seule cette
 * information : aria-current l'énonce aux technologies d'assistance.
 */
.site-nav__link.is-current {
    color: var(--color-ink);
}

/* ===================================================================
 * Repli
 * =================================================================== */

/* Sous 1100 px, les liens se resserrent : la bande garde sa hauteur et son
   alignement. Ce sont eux qui gardent leur largeur, et la marque qui cède —
   sinon les liens passeraient sous la mention. */
@media (max-width: 1099.98px) {
    .site-header {
        grid-template-columns: minmax(0, 1fr) auto;
    }

    .site-nav {
        gap: 26px;
    }
}

/*
 * Palier propre à l'en-tête — 1000 px.
 *
 * La marque avec sa mention s'arrête à 397 px ; les cinq liens et leur marge
 * droite demandent 508 px. Les deux blocs se touchent donc vers 930 px, et se
 * chevauchent en dessous. À 1000 px il leur reste 95 px : c'est la dernière
 * largeur où ils se lisent encore comme deux blocs distincts.
 *
 * La maison ne cesse pas d'être une maison d'ingénierie pour autant : le pied
 * de page porte la même mention, à toutes les largeurs.
 */
@media (max-width: 999.98px) {
    .site-header__rule,
    .site-header__tagline {
        display: none;
    }
}

/* ===================================================================
 * Le menu — sous 760 px uniquement
 * =================================================================== */

.site-menu {
    display: none;
}

@media (max-width: 759.98px) {
    .site-header {
        grid-template-columns: minmax(0, 1fr);
    }

    .site-header__logo {
        height: 29px;
    }

    /* La navigation en ligne ne tient plus : elle cède la place au menu. */
    .site-nav {
        display: none;
    }

    .site-menu {
        display: block;
        position: absolute;
        top: 22px;
        right: var(--page-margin);
    }
}

/*
 * Le mot du menu remplace le triangle de divulgation : le système n'a pas
 * de pictogramme, et l'état s'écrit.
 */
.site-menu__toggle {
    position: relative;
    list-style: none;
    padding: 6px 0;
    color: var(--color-ink);
    cursor: pointer;
}

.site-menu__toggle::-webkit-details-marker {
    display: none;
}

/* La cible atteint 44 px sans déplacer le mot ni grandir la bande. */
.site-menu__toggle::after {
    content: "";
    position: absolute;
    inset: 50% -12px auto;
    height: 44px;
    transform: translateY(-50%);
}

.site-menu__word--open,
.site-menu[open] .site-menu__word--closed {
    display: none;
}

.site-menu[open] .site-menu__word--open {
    display: inline;
}

/*
 * Le panneau couvre la page sous la bande, sur un fond papier plein :
 * on ne lit pas deux choses à la fois.
 */
.site-menu__panel {
    position: fixed;
    left: 0;
    right: 0;
    top: calc(var(--bar) + var(--hairline));
    bottom: 0;
    z-index: var(--z-menu);
    background: var(--color-paper);
    padding: 36px var(--page-margin) var(--space-5);
    overflow-y: auto;
}

.site-menu__pages {
    border-top: var(--hairline) solid var(--rule);
}

/* Une page par ligne, numérotée comme les chapitres d'une page. */
.site-menu__link {
    display: grid;
    grid-template-columns: 38px minmax(0, 1fr);
    gap: 14px;
    align-items: baseline;
    padding: 20px 0 22px;
    border-bottom: var(--hairline) solid var(--rule);
}

.site-menu__title {
    font-family: var(--font-serif);
    font-size: 27px;
    line-height: 1.2;
    letter-spacing: -0.018em;
}

.site-menu__link[aria-current="page"] .site-menu__number {
    color: var(--color-ink);
}

.site-menu__aside {
    display: flex;
    flex-wrap: wrap;
    gap: 14px var(--space-3);
    margin-top: var(--space-5);
    color: var(--color-label);
}

/* ==== ./components/footer.css ==== */
/**
 * Footer — composant 08.
 *
 * Bande de 88 px, précédée de la trame ordonnée. Nom de la marque à gauche,
 * liens à droite. Aucun plan du site, aucun formulaire, aucun CTA.
 */

/*
 * La mention est plus longue que la colonne de rail : on lui laisse la place
 * qu'elle demande. Les liens restent alignés sur la marge droite, donc rien
 * ne bouge à l'écran — et l'en-tête garde sa colonne de 264 px.
 */
.site-footer {
    grid-template-columns: auto minmax(0, 1fr);
}

.site-footer__brand {
    padding-left: var(--page-margin);
    color: var(--color-label);
    white-space: nowrap;
}

.site-footer__nav {
    display: flex;
    justify-content: flex-end;
    gap: 40px;
    padding-right: var(--page-margin);
}

.site-footer__link {
    color: var(--color-label);

    /* Même cible de 44 px que la navigation principale. */
    display: flex;
    align-items: center;
    min-height: 44px;
}

.site-footer__link:hover {
    color: var(--color-ink);
}

.site-footer__link.is-current {
    color: var(--color-ink);
}

/* ===================================================================
 * Repli
 * =================================================================== */

@media (max-width: 1099.98px) {
    .site-footer__nav {
        gap: 26px;
    }
}

/*
 * Sous 760 px, la mention et les liens s'empilent. La bande cesse d'avoir
 * une hauteur fixe : quatre liens sur deux lignes ne tiennent pas dans 65 px.
 */
@media (max-width: 759.98px) {
    .site-footer {
        grid-template-columns: minmax(0, 1fr);
        height: auto;
        align-items: start;
        row-gap: var(--space-3);
        padding: var(--space-4) 0;
    }

    .site-footer__nav {
        justify-content: flex-start;
        flex-wrap: wrap;
        gap: 12px 20px;
        padding: 0 var(--page-margin);
    }
}

/* ==== ./components/section-title.css ==== */
/**
 * Titre de section et son complément.
 *
 * Les deux sont alignés sur la même ligne de base : le complément n'est pas
 * posé à côté du titre, il en partage la mesure.
 */

.section-title {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--space-4);

    /* Valeur commune aux chapitres 04 et 05 de la Homepage. */
    margin-bottom: var(--space-7);
}

/*
 * Le titre n'est pas bridé ici : c'est le complément placé à sa droite qui
 * fixe sa mesure. Lui imposer 16 em le replierait sur deux lignes là où la
 * référence n'en tient qu'une.
 */
.section-title .t-title-2 {
    max-width: none;
}

.section-title__aside {
    white-space: nowrap;
}

/* Sous 760 px, le complément passe sous le titre plutôt qu'à côté. */
@media (max-width: 759.98px) {
    .section-title {
        flex-direction: column;
        align-items: flex-start;
        gap: 22px;
    }

    .section-title__aside {
        white-space: normal;
    }
}

/* ==== ./components/primary-action.css ==== */
/**
 * Action primaire — composant 04.
 *
 * Aplat bleu, texte papier. Au survol, la forme ne change pas : seul le
 * curseur change. Jamais d'angle arrondi, jamais d'ombre, jamais d'icône.
 */

.primary-action {
    display: inline-block;
    padding: 18px 28px;
    background: var(--color-blue);
    color: var(--color-paper);
}

/*
 * Dans le premier écran, l'action se resserre pour tenir sa ligne avec le
 * lien secondaire : 46 px au lieu de 48. La cible reste au-dessus du seuil.
 */
.primary-action--hero {
    padding: 17px 26px;
}

/*
 * Le survol du primaire ne déplace rien et ne souligne rien : l'aplat est
 * déjà le signal. Annule la règle générale des liens.
 */
.primary-action:hover {
    text-decoration: none;
}

/* ==== ./components/action-link.css ==== */
/**
 * Lien d'action — composants 04 et 12.
 *
 * Signaler ce qui est cliquable sans bruit visuel : des capitales et un
 * filet, rien d'autre. Le rouge n'apparaît qu'au survol, sur le filet.
 */

.action-link {
    position: relative;
    display: inline-block;
    padding-bottom: 4px;
    border-bottom: var(--hairline) solid var(--action-line);
    color: var(--color-ink);
}

/*
 * La zone cliquable atteint 44 px sans déplacer le filet ni la ligne de base :
 * elle est étendue par un calque centré sur le lien.
 */
.action-link::after {
    content: "";
    position: absolute;
    inset: 50% 0 auto 0;
    height: 44px;
    transform: translateY(-50%);
}

/*
 * Le texte reste en encre : à 3,4:1 le rouge ne peut pas porter un libellé.
 * Le filet, lui, est un signal graphique.
 */
.action-link:hover {
    text-decoration: none;
    border-bottom-color: var(--color-red);
}

/* Sur aplat bleu, le composant suit son contexte — sans variante déclarée. */
.section--blue .action-link {
    color: var(--color-paper);
    border-bottom-color: var(--action-line-on-blue);
}

.section--blue .action-link:hover {
    border-bottom-color: var(--color-red);
}

/* ==== ./components/record.css ==== */
/**
 * Registre d'histoires — composant 05.
 *
 * Une ligne de tableau sur douze colonnes : qui, quoi, effet.
 * Aucune vignette, aucun logo client, aucun pourcentage sans source.
 */

.record-list {
    /* Le survol déborde de 16 px à gauche, le texte reste aligné sur la grille. */
    margin-left: -16px;
    border-top: var(--hairline) solid var(--rule);
}

.record-row {
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    gap: var(--gutter);
    align-items: baseline;
    padding: var(--space-4) 0 36px 16px;
    border-bottom: var(--hairline) solid var(--rule);
}

.record-row__name {
    grid-column: 1 / span 2;

    /* Un nom de client tient sur une ligne : interlignage naturel. */
    line-height: normal;
}

.record-row__situation {
    grid-column: 3 / span 5;
}

.record-row__outcome {
    grid-column: 9 / span 4;

    /* L'effet est le fait qui compte : il se lit en encre. */
    color: var(--color-ink);
}

/*
 * Le survol n'existe que si la ligne mène quelque part. Aucune transformation,
 * aucun déplacement : seulement le fond.
 */
a.record-row:hover {
    background: var(--tint-hover);
    text-decoration: none;
}

/*
 * Sous 760 px, une ligne de registre cesse d'être une ligne : elle devient un
 * bloc, où l'année, la décision et l'arbitrage se lisent l'un sous l'autre.
 */
@media (max-width: 759.98px) {
    .record-row {
        grid-template-columns: minmax(0, 1fr);
        gap: 10px;
        padding-left: 0;
    }

    .record-row > :nth-child(n) {
        grid-column: auto;
    }
}

/* Le débord de survol n'a plus de marge où déborder. */
@media (max-width: 759.98px) {
    .record-list {
        margin-left: 0;
    }
}

/* ==== ./components/statement.css ==== */
/**
 * Énoncé.
 *
 * Les tailles et l'interlignage sont portés par le rôle typographique
 * (.t-statement). Ce fichier ne définit que la forme « conviction »,
 * réellement présente au chapitre 06 de la Homepage.
 */

.t-statement--conviction {
    font-size: var(--text-statement-wide);
    letter-spacing: var(--tracking-statement);

    /* En encre : cette phrase n'est pas une affirmation de la maison sur
       elle-même, c'est ce qui doit rester après la fermeture de l'onglet. */
    color: var(--color-ink);
    max-width: 19em;
}

/* ==== ./components/statement-list.css ==== */
/**
 * Liste de principes — composant 06.
 *
 * Trois colonnes : la référence, le nom, l'énoncé. Le filet suit le fond.
 */

.statement-list {
    border-top: var(--hairline) solid var(--rule);
}

.statement-row {
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    gap: var(--gutter);
    align-items: baseline;
    padding: var(--space-3) 0 28px;
    border-bottom: var(--hairline) solid var(--rule);
}

.statement-row__reference {
    grid-column: 1 / span 2;
}

.statement-row__title {
    grid-column: 3 / span 4;

    /* Le nom d'un principe tient sur une ligne : interlignage naturel,
       comme dans la référence. L'interlignage de 1,26 du rôle Titre 03 est
       réservé aux titres qui peuvent se replier. */
    line-height: normal;
}

.statement-row__description {
    grid-column: 8 / span 5;
}

/* Sur aplat bleu, les filets s'éclaircissent ; les couleurs de texte sont
   déjà portées par la section (cf. typography.css). */
.section--blue .statement-list,
.section--blue .statement-row {
    border-color: var(--rule-on-blue);
}

/* Sous 760 px, la référence, le nom et l'énoncé s'empilent. */
@media (max-width: 759.98px) {
    .statement-row {
        grid-template-columns: minmax(0, 1fr);
        gap: 10px;
        padding-left: 0;
    }

    .statement-row > :nth-child(n) {
        grid-column: auto;
    }
}

/* ==== ./components/portrait-frame.css ==== */
/**
 * Portrait — composant 09.
 *
 * Ratio 4/5, aligné sur les colonnes de la grille. Aucun filtre, aucun
 * recadrage animé, aucun arrondi.
 */

.portrait-frame {
    position: relative;
    aspect-ratio: 4 / 5;

    /* Papier ombré : emplacement d'image en attente, et rien d'autre. */
    background: var(--color-paper-shade);
}

/* La photographie remplit le cadre sans le déformer ni l'arrondir. */
.portrait-frame__image {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.portrait-frame__caption {
    position: absolute;
    left: 0;
    bottom: 0;
    padding: 22px 24px;
    color: var(--color-label);
}

/*
 * Posée sur une photographie, la légende ne peut plus compter sur le fond du
 * cadre : elle passe en papier sur un aplat d'encre. Un dégradé serait plus
 * discret, mais le Design Language les interdit — et l'aplat appartient déjà
 * au vocabulaire du site.
 */
.portrait-frame__caption--over {
    right: 0;
    color: var(--color-paper);
    background: rgb(22 36 44 / 0.72);
}

/* ==== ./components/marker.css ==== */
/**
 * Le marqueur — motif du Design Language, pas composant.
 *
 * Un carré de 7 px posé devant une ligne : filaire pour ce qui est retenu,
 * rouge pour ce qui est écarté. Le sens n'est jamais porté par la seule
 * couleur — la colonne ou la phrase qui précède le nomme toujours.
 */

.marker-list {
    border-top: var(--hairline) solid var(--rule);
}

.marker-item {
    display: grid;
    grid-template-columns: 11px minmax(0, 1fr);
    gap: var(--space-2);
    align-items: baseline;
    padding: var(--space-2) 0 18px;
    border-bottom: var(--hairline) solid var(--rule);
}

.marker {
    width: var(--marker);
    height: var(--marker);
    border: var(--hairline) solid var(--marker-line);
}

.marker--excluded {
    background: var(--color-red);
    border-color: var(--color-red);
}

.marker-item__text {
    font-size: var(--text-body-dense);
    line-height: var(--leading-dense);
    color: var(--color-text);
}

/* Sur aplat bleu, les filets et le contour s'éclaircissent. */
.section--blue .marker-list,
.section--blue .marker-item {
    border-color: var(--rule-on-blue);
}

.section--blue .marker {
    border-color: var(--marker-line-on-blue);
}

.section--blue .marker-item__text {
    color: var(--color-paper);
}

/* ==== ./components/spec-list.css ==== */
/**
 * Fiche de spécification — le motif documentaire du site.
 *
 * Un libellé de 150 px, puis ce qu'il établit. Les filets séparent les
 * lignes ; rien ne les encadre.
 */

.spec-list {
    border-top: var(--hairline) solid var(--rule);
}

.spec-row {
    display: grid;
    grid-template-columns: var(--spec-label) minmax(0, 1fr);
    gap: var(--gutter);
    padding: 20px 0 22px;
    border-bottom: var(--hairline) solid var(--rule);
}

/* Un libellé de fiche se replie souvent sur deux lignes. */
.spec-row__label {
    line-height: var(--leading-tight);
}

/*
 * Cartouche — le libellé au-dessus de sa valeur.
 *
 * En marge d'une ouverture, la colonne fait quatre unités : deux colonnes de
 * texte n'y tiennent pas. Le pas se resserre en conséquence, et la valeur
 * passe en encre — un cartouche énonce des faits, il ne commente pas.
 */
.spec-list--stacked .spec-row {
    grid-template-columns: minmax(0, 1fr);
    gap: 6px;
    padding: 13px 0 14px;
}

/* ET-01 — empilé, le libellé tient sur une ligne et garde son interlignage
   naturel ; c'est en face d'une valeur qu'il se replie. */
.spec-list--stacked .spec-row__label {
    line-height: normal;
}

.spec-list--stacked .spec-row__value {
    line-height: var(--leading-tight);
    color: var(--color-ink);
}

/* Sous 760 px, le libellé passe au-dessus de sa valeur : toutes les fiches
   prennent la forme empilée. */
@media (max-width: 759.98px) {
    .spec-row {
        grid-template-columns: minmax(0, 1fr);
        gap: 6px;
    }
}

/* ==== ./components/decision-record.css ==== */
/**
 * Fiche de décision — composant 14.
 *
 * Un bloc encadré à 1 px sur fond très légèrement bleuté. Ses lignes sont
 * des SpecRow : le motif libellé / contenu est le même que partout ailleurs,
 * seul son rempli change parce qu'il vit dans un cadre.
 */

.decision-record {
    border: var(--hairline) solid var(--border);
    background: var(--tint-hover);
}

.decision-record__header {
    display: grid;
    grid-template-columns: var(--spec-label) minmax(0, 1fr);
    gap: var(--gutter);
    align-items: baseline;
    padding: 26px 32px 24px;
    border-bottom: var(--hairline) solid var(--rule);
}

.decision-record__heading {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--space-4);
}

.decision-record__title {
    line-height: normal;
}

.decision-record__status {
    white-space: nowrap;
}

/* Les lignes vivent dans un cadre : elles s'écartent de ses bords. */
.decision-record__body .spec-row {
    padding: 22px 32px;
}

.decision-record__body .spec-row:last-child {
    border-bottom: 0;
}

.decision-record__body .spec-row__value {
    max-width: 46em;
}

/* La décision elle-même se lit d'un coup d'œil : le seul énoncé du bloc. */
.decision-record__decision {
    font-family: var(--font-serif);
    font-size: var(--text-title-3);
    line-height: 1.35;
    letter-spacing: var(--tracking-title-3);
    color: var(--color-ink);
    display: block;
    max-width: 24em;
}

/*
 * La ligne qui porte le tableau se reconnaît à son contenu : le tableau pose
 * déjà son propre bas, la ligne n'a pas à le doubler.
 */
.decision-record__body .spec-row:has(.decision-options) {
    padding-bottom: 8px;
}

.decision-record__body .spec-row:has(.decision-options) .spec-row__value {
    max-width: none;
}

/* ===================================================================
 * Le tableau des options
 * =================================================================== */

.decision-options {
    display: block;
    width: 100%;
    margin-top: -4px;
    border-top: var(--hairline) solid var(--line-1);
}

.decision-options tbody {
    display: block;
}

.decision-options__row {
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    gap: var(--gutter);
    align-items: baseline;
    padding: 16px 0;
    border-bottom: var(--hairline) solid var(--line-1);
}

/* Les navigateurs remplissent les cellules d'un pixel : rien du tableau ne
   doit se voir, seule sa sémantique compte. */
.decision-options__row > * {
    padding: 0;
}

.decision-options__key {
    grid-column: 1 / span 1;
}

.decision-options__title {
    grid-column: 2 / span 4;
    color: var(--color-ink);
}

.decision-options__cost {
    grid-column: 6 / span 2;
    color: var(--color-label);
}

.decision-options__closes {
    grid-column: 8 / span 5;
}

/* ===================================================================
 * Repli
 * =================================================================== */

@media (max-width: 759.98px) {
    .decision-record__heading {
        flex-direction: column;
        align-items: flex-start;
        gap: 22px;
    }

    .decision-options__row {
        grid-template-columns: minmax(0, 1fr);
        gap: 10px;
    }

    .decision-options__row > :nth-child(n) {
        grid-column: auto;
    }
}

/* ==== ./components/diagrams.css ==== */
/**
 * Schémas de la Homepage — chapitre 10 du Design Language.
 *
 * Tracés à 1 px, en horizontales et verticales seulement. Sans flèche, sans
 * icône, sans courbe, sans perspective. L'épaisseur ne varie jamais pour
 * créer une hiérarchie : l'opacité s'en charge.
 *
 * Un seul carré rouge par schéma, posé sur une intersection réelle. Les
 * marqueurs sont centrés exactement sur le filet qu'ils désignent, ce qui
 * les décale d'un demi-pixel par rapport aux maquettes — au bénéfice de la
 * netteté, comme pour le carré du rail.
 */

/* ===================================================================
 * Type A — plan. Chapitre 01 : la structure et le point qui la décide.
 * =================================================================== */

.decision-plan {
    position: relative;
    height: 400px;
    margin-top: 10px;
}

.decision-plan > * {
    position: absolute;
}

/* Les axes débordent vers la gauche : le schéma appartient à la page. */
.decision-plan__axis {
    height: var(--hairline);
    background: var(--line-2);
    transform-origin: left;
    animation: draw-x var(--duration-draw) var(--ease) both;
}

.decision-plan__axis--upper {
    left: -96px;
    top: 80px;
    width: calc(100% + 128px);
    animation-delay: 900ms;
}

.decision-plan__axis--lower {
    left: -36px;
    top: 300px;
    width: calc(100% + 196px);
    animation-delay: 1700ms;
}

.decision-plan__spine {
    width: var(--hairline);
    background: var(--line-2);
    transform-origin: top;
    animation: draw-y var(--duration-draw) var(--ease) both;
}

.decision-plan__spine--outer {
    left: 77.77%;
    top: -58px;
    height: 406px;
    animation-delay: 1100ms;
}

.decision-plan__spine--inner {
    left: 44.44%;
    top: 44px;
    height: 214px;
    animation-delay: 1350ms;
}

.decision-plan__block {
    border: var(--hairline) solid var(--border);
    animation: settle var(--duration-settle) var(--ease) both;
}

/* Un seul bloc rempli par schéma : celui dont on parle. */
.decision-plan__block--filled {
    left: 0;
    top: 80px;
    width: 44.44%;
    height: 132px;
    background: var(--tint-fill);
    animation-delay: 1250ms;
}

.decision-plan__block--second {
    left: 44.44%;
    top: 80px;
    width: 33.33%;
    height: 132px;
    animation-delay: 1450ms;
}

.decision-plan__block--base {
    left: 0;
    top: 212px;
    width: 77.77%;
    height: 88px;
    animation-delay: 1900ms;
}

/* Posé sur l'intersection de l'axe bas et du bord du bloc de base. */
.decision-plan__marker {
    left: -3px;
    top: 297px;
    width: var(--marker);
    height: var(--marker);
    background: var(--color-red);
    animation: settle 800ms 2400ms both;
}

/*
 * Le mot posé dans le schéma prend le rôle Titre 03 — le plus proche de
 * l'échelle — et le gris libellé. La maquette l'écrit à 19 px sur un gris
 * hors palette : ni la taille ni la couleur n'appartenaient au système.
 */
.decision-plan__label {
    left: 18px;
    top: 314px;
    color: var(--color-label);
    animation: reveal var(--duration-reveal) 2550ms both;
}

/* ===================================================================
 * Type B — série. Chapitre 02 : une évolution, et son point de bascule.
 * =================================================================== */

.complexity-series {
    position: relative;
    height: 132px;
    color: var(--line-4);

    /* Ce pixel garde le dernier filet, posé à 100 %, dans la zone visible. */
    padding-right: var(--hairline);
}

.complexity-series > * {
    position: absolute;
}

/*
 * La série ne se construit qu'une fois entrée dans le champ.
 *
 * La négation est nécessaire : chaque filet déclare son animation en
 * raccourci, et un raccourci remet `animation-play-state` à `running`.
 * Sans une spécificité supérieure, la pause serait écrasée par les règles
 * qui suivent — et le schéma se dessinerait au chargement, hors du champ.
 */
.complexity-series:not([data-revealed]) > * {
    animation-play-state: paused;
}

/*
 * Sans script, personne ne pose l'attribut : le schéma se montre construit
 * plutôt que de rester invisible. Le contenu ne dépend pas du JavaScript.
 */
.no-js .complexity-series:not([data-revealed]) > * {
    animation-play-state: running;
}

.complexity-series__baseline {
    left: -32px;
    right: -16px;
    bottom: 0;
    height: var(--hairline);
    background: var(--line-2);
    transform-origin: left;
    animation: draw-x 900ms var(--ease) both;
}

.complexity-series__rise {
    bottom: 0;
    width: var(--hairline);
    background: currentcolor;
    transform-origin: bottom;
    animation: draw-y var(--duration-draw-short) var(--ease) both;
}

/* Le prolongement sous la ligne : la complexité déborde de sa mesure. */
.complexity-series__fall {
    top: 100%;
    width: var(--hairline);
    background: currentcolor;
    transform-origin: top;
    animation: draw-y var(--duration-draw-short) var(--ease) both;
}

.complexity-series__marker {
    bottom: -3px;
    width: var(--marker);
    height: var(--marker);
    margin-left: calc(var(--marker) / -2);
    background: var(--color-red);
    animation: settle 700ms 1500ms both;
}

/* ===================================================================
 * Repli — Type A
 *
 * Le schéma d'ouverture est le seul dont les maquettes redessinent la
 * géométrie : il se resserre au lieu de se réduire, pour que ses proportions
 * restent lisibles sur une colonne unique. Le débord des axes est coupé,
 * ce qui supprime au passage le défilement horizontal (EG-07).
 * =================================================================== */

@media (max-width: 1099.98px) {
    .decision-plan {
        overflow: hidden;
    }
}

@media (max-width: 759.98px) {
    .decision-plan {
        height: 260px;
        margin-top: 0;
    }

    .decision-plan__axis--lower {
        top: 190px;
    }

    .decision-plan__spine--outer {
        top: -38px;
        height: 266px;
    }

    .decision-plan__spine--inner {
        top: 28px;
        height: 140px;
    }

    .decision-plan__block--filled,
    .decision-plan__block--second {
        top: 52px;
        height: 86px;
    }

    .decision-plan__block--base {
        top: 138px;
        height: 52px;
    }

    .decision-plan__marker {
        left: 0;
        top: 187px;
    }

    .decision-plan__label {
        left: 16px;
        top: 204px;
        font-size: 17px;
    }
}

/* ==== ./components/diagrams-approche.css ==== */
/**
 * Schémas de la page Approche.
 *
 * Mêmes règles que les autres : 1 px, horizontales et verticales seulement,
 * un seul bloc rempli, un seul carré rouge posé sur une intersection réelle.
 * Les marqueurs sont centrés sur des positions entières.
 *
 * Fichier distinct de diagrams.css, qui porte les schémas de la Homepage :
 * chacun n'appartient qu'à sa page.
 */

/* ===================================================================
 * 01 — Le chemin d'une décision : un problème, des options, un point.
 * =================================================================== */

.decision-path {
    position: relative;
    height: 250px;
    margin-top: 14px;
}

.decision-path > * {
    position: absolute;
}

.decision-path__axis {
    height: var(--hairline);
    background: var(--line-2);
    transform-origin: left;
    animation: draw-x var(--duration-draw) var(--ease) both;
}

.decision-path__axis--upper {
    left: -96px;
    top: 60px;
    width: calc(100% + 128px);
    animation-delay: 900ms;
}

.decision-path__axis--lower {
    left: 0;
    top: 210px;
    width: calc(100% + 64px);
    animation-delay: 1500ms;
}

.decision-path__spine {
    left: 0;
    top: 60px;
    width: var(--hairline);
    height: 150px;
    background: var(--line-2);
    transform-origin: top;
    animation: draw-y var(--duration-draw) 1200ms var(--ease) both;
}

/* Sur l'intersection de l'axe bas et de la verticale. */
.decision-path__marker {
    left: -3px;
    top: 207px;
    width: var(--marker);
    height: var(--marker);
    background: var(--color-red);
    animation: settle 800ms 2100ms both;
}

.decision-path__step {
    left: 18px;
    animation: reveal var(--duration-reveal) both;
}

.decision-path__step--problem {
    top: 24px;
    animation-delay: 1800ms;
}

.decision-path__step--options {
    top: 130px;
    animation-delay: 1950ms;
}

.decision-path__word {
    left: 18px;
    top: 224px;
    color: var(--color-label);
    animation: reveal var(--duration-reveal) 2250ms both;
}

/* ===================================================================
 * 02 — Le prix d'une décision selon son moment.
 * =================================================================== */

.cost-curve {
    position: relative;
    height: 150px;
    color: var(--line-4);
}

.cost-curve > * {
    position: absolute;
}

/* Même motif que la série du chapitre 02 : la négation porte la pause,
   parce qu'un raccourci `animation` la remettrait à `running`. */
.cost-curve:not([data-revealed]) > * {
    animation-play-state: paused;
}

.no-js .cost-curve:not([data-revealed]) > * {
    animation-play-state: running;
}

.cost-curve__baseline {
    left: -32px;
    right: -16px;
    bottom: 0;
    height: var(--hairline);
    background: var(--line-2);
    transform-origin: left;
    animation: draw-x 900ms var(--ease) both;
}

.cost-curve__bar {
    bottom: 0;
    width: var(--hairline);
    background: currentcolor;
    transform-origin: bottom;
    animation: draw-y var(--duration-draw-short) var(--ease) both;
}

.cost-curve__marker {
    bottom: -3px;
    width: var(--marker);
    height: var(--marker);
    margin-left: calc(var(--marker) / -2);
    background: var(--color-red);
    animation: settle 700ms 900ms both;
}

.cost-curve__start,
.cost-curve__end {
    bottom: -30px;
    animation: none;
}

.cost-curve__start {
    left: 0;
}

.cost-curve__end {
    right: 0;
}

/* Une borne qui nomme une date se pose sous le point de bascule, en encre. */
.cost-curve__end--dated {
    right: auto;
    color: var(--color-ink);
}

/* ===================================================================
 * 04 — Les mêmes flux, avant et après une lecture partagée.
 * =================================================================== */

.observed-restituted {
    position: relative;
    height: 300px;
}

.observed-restituted > * {
    position: absolute;
}

.observed-restituted__title {
    top: 0;
}

.observed-restituted__title--left {
    left: 0;
}

.observed-restituted__title--right {
    left: 56%;
}

/* Le cadre nomme un périmètre, il ne le remplit pas. */
.observed-restituted__frame {
    top: 32px;
    width: 44%;
    height: 236px;
    border: var(--hairline) solid var(--line-1);
}

.observed-restituted__frame--left {
    left: 0;
}

.observed-restituted__frame--right {
    left: 56%;
}

.observed-restituted__scattered,
.observed-restituted__ordered {
    height: 36px;
    border: var(--hairline) solid var(--border);
}

.observed-restituted__scattered--a {
    left: 6%;
    top: 60px;
    width: 18%;
}

.observed-restituted__scattered--b {
    left: 24%;
    top: 120px;
    width: 15%;
}

.observed-restituted__scattered--c {
    left: 8%;
    top: 190px;
    width: 20%;
}

/* Les liens existent déjà : personne ne les a dessinés. */
.observed-restituted__link {
    background: var(--line-3);
}

.observed-restituted__link--a {
    left: 15%;
    top: 96px;
    width: var(--hairline);
    height: 94px;
}

.observed-restituted__link--b {
    left: 8%;
    top: 138px;
    width: 31%;
    height: var(--hairline);
}

.observed-restituted__link--c {
    left: 31%;
    top: 60px;
    width: var(--hairline);
    height: 78px;
}

.observed-restituted__spine {
    left: 70%;
    top: 60px;
    width: var(--hairline);
    height: 150px;
    background: var(--line-3);
}

.observed-restituted__ordered {
    left: 62%;
    width: 32%;
}

.observed-restituted__ordered--filled {
    top: 60px;
    background: var(--tint-fill);
}

.observed-restituted__ordered--second {
    top: 116px;
}

.observed-restituted__ordered--third {
    top: 172px;
}

/* Au pied de l'axe qui ordonne la lecture. */
.observed-restituted__marker {
    left: calc(70% - 3px);
    top: 207px;
    width: var(--marker);
    height: var(--marker);
    background: var(--color-red);
}

.observed-restituted__legend {
    left: 0;
    top: 314px;
}

/* ===================================================================
 * 05 — Un arbitrage : ce que chaque option ferme.
 * =================================================================== */

.three-options {
    position: relative;
    height: 300px;
}

.three-options > * {
    position: absolute;
}

.three-options__title {
    left: 0;
    top: 0;
}

.three-options__stem {
    left: 0;
    top: 150px;
    width: 26%;
    height: var(--hairline);
    background: var(--line-3);
}

/* Le point de partage : filaire, il n'est pas encore une décision. */
.three-options__node {
    left: 22%;
    top: 146px;
    width: var(--marker-page);
    height: var(--marker-page);
    background: var(--color-paper);
    border: var(--hairline) solid var(--marker-line);
}

.three-options__spine {
    left: 26%;
    top: 62px;
    width: var(--hairline);
    height: 180px;
    background: var(--line-3);
}

.three-options__branch {
    left: 26%;
    height: var(--hairline);
}

/* Les branches écartées restent visibles, en filet plus clair. */
.three-options__branch--upper {
    top: 62px;
    width: 52%;
    background: var(--line-1);
}

.three-options__branch--main {
    top: 150px;
    width: 62%;
    background: var(--line-4);
}

.three-options__branch--lower {
    top: 242px;
    width: 52%;
    background: var(--line-1);
}

.three-options__end {
    width: var(--marker);
    height: var(--marker);
}

.three-options__end--upper {
    left: 78%;
    top: 59px;
    border: var(--hairline) solid var(--line-3);
}

.three-options__end--main {
    left: 88%;
    top: 147px;
    background: var(--color-red);
}

.three-options__end--lower {
    left: 78%;
    top: 239px;
    border: var(--hairline) solid var(--line-3);
}

.three-options__label {
    left: calc(26% + 18px);
    max-width: calc(80% - 30px);
}

.three-options__label--upper {
    bottom: 244px;
    color: var(--color-muted);
}

.three-options__label--main {
    bottom: 156px;
    color: var(--color-ink);
}

.three-options__label--lower {
    bottom: 64px;
    color: var(--color-muted);
}

.three-options__legend {
    left: 0;
    top: 314px;
}

/* ===================================================================
 * 06 — Les paliers : livrés, puis préparés.
 * =================================================================== */

.delivery-tiers {
    position: relative;
    height: 300px;
}

.delivery-tiers > * {
    position: absolute;
}

.delivery-tiers__title {
    left: 0;
    top: 0;
}

.delivery-tiers__baseline {
    left: 0;
    right: 0;
    bottom: 34px;
    height: var(--hairline);
    background: var(--line-2);
}

.delivery-tiers__tier {
    bottom: 34px;
    width: 24%;
    border: var(--hairline) solid var(--border);
}

/* Livrés : remplis. Préparés : dessinés, de plus en plus clairs. */
.delivery-tiers__tier--first {
    left: 0;
    height: 58px;
    background: var(--tint-fill);
}

.delivery-tiers__tier--second {
    left: 25%;
    height: 112px;
    background: var(--tint-fill);
}

.delivery-tiers__tier--third {
    left: 50%;
    height: 166px;
    border-color: var(--rule);
}

.delivery-tiers__tier--fourth {
    left: 75%;
    height: 220px;
    border-color: var(--rule-light);
}

/* Au sommet du dernier palier livré : le point où l'on s'arrête. */
.delivery-tiers__marker {
    left: calc(49% - 3px);
    bottom: 143px;
    width: var(--marker);
    height: var(--marker);
    background: var(--color-red);
}

.delivery-tiers__delivered,
.delivery-tiers__prepared {
    bottom: 8px;
    white-space: nowrap;
}

.delivery-tiers__delivered {
    left: 0;
    color: var(--color-ink);
}

.delivery-tiers__prepared {
    left: 50%;
    color: var(--color-muted);
}

.delivery-tiers__legend {
    left: 0;
    top: 314px;
}

/* ===================================================================
 * 07 — Notre présence, mois après mois.
 * =================================================================== */

.dependency-decay {
    position: relative;
    height: 300px;
}

.dependency-decay > * {
    position: absolute;
}

.dependency-decay__caption {
    left: 0;
    top: 0;
}

.dependency-decay__baseline {
    left: 0;
    right: 0;
    bottom: 34px;
    height: var(--hairline);
    background: var(--line-2);
}

.dependency-decay__bar {
    bottom: 34px;
    width: var(--hairline);
    background: var(--line-4);
}

/* Le jour où notre présence n'ajoute plus rien. */
.dependency-decay__marker {
    right: 0;
    bottom: 31px;
    width: var(--marker);
    height: var(--marker);
    background: var(--color-red);
}

.dependency-decay__start,
.dependency-decay__end {
    bottom: 8px;
    white-space: nowrap;
    color: var(--color-ink);
}

.dependency-decay__start {
    left: 0;
}

.dependency-decay__end {
    right: 0;
}

.dependency-decay__legend {
    left: 0;
    top: 314px;
}

/* ==== ./components/diagrams-histoires.css ==== */
/**
 * Schémas de la page Histoires.
 */

/* ===================================================================
 * 02 — Ce que contient une histoire : deux options écartées, une retenue.
 * =================================================================== */

.story-anatomy {
    position: relative;
    height: 300px;
}

.story-anatomy > * {
    position: absolute;
}

.story-anatomy__title {
    left: 0;
    top: 0;
}

.story-anatomy__stem {
    left: 0;
    top: 74px;
    width: 20%;
    height: var(--hairline);
    background: var(--line-3);
}

.story-anatomy__spine {
    left: 20%;
    top: 74px;
    width: var(--hairline);
    height: 150px;
    background: var(--line-3);
}

.story-anatomy__branch {
    left: 20%;
    height: var(--hairline);
}

/* Les options écartées restent lisibles, en filet plus clair. */
.story-anatomy__branch--upper {
    top: 74px;
    width: 56%;
    background: var(--line-1);
}

.story-anatomy__branch--main {
    top: 149px;
    width: 70%;
    background: var(--line-4);
}

.story-anatomy__branch--lower {
    top: 224px;
    width: 56%;
    background: var(--line-1);
}

.story-anatomy__end {
    width: var(--marker);
    height: var(--marker);
}

.story-anatomy__end--upper {
    left: 76%;
    top: 71px;
    border: var(--hairline) solid var(--line-3);
}

.story-anatomy__end--main {
    left: 90%;
    top: 146px;
    background: var(--color-red);
}

.story-anatomy__end--lower {
    left: 76%;
    top: 221px;
    border: var(--hairline) solid var(--line-3);
}

.story-anatomy__label {
    left: calc(20% + 18px);
    max-width: calc(80% - 30px);
}

.story-anatomy__label--upper {
    bottom: 232px;
    color: var(--color-muted);
}

.story-anatomy__label--main {
    bottom: 157px;
    color: var(--color-ink);
}

.story-anatomy__label--lower {
    bottom: 82px;
    color: var(--color-muted);
}

.story-anatomy__legend {
    left: 0;
    top: 314px;
}

/* ==== ./components/diagrams-histoire.css ==== */
/**
 * Schémas d'une histoire.
 */

/* ===================================================================
 * 01 — Ce que la décision a isolé.
 * =================================================================== */

.extracted-boundary {
    position: relative;
    height: 200px;
    margin-top: 52px;
}

.extracted-boundary > * {
    position: absolute;
}

.extracted-boundary__axis {
    height: var(--hairline);
    background: var(--line-2);
    transform-origin: left;
    animation: draw-x var(--duration-draw) var(--ease) both;
}

.extracted-boundary__axis--upper {
    left: -96px;
    top: 40px;
    width: calc(100% + 128px);
    animation-delay: 900ms;
}

.extracted-boundary__axis--lower {
    left: 0;
    top: 160px;
    width: calc(100% + 64px);
    animation-delay: 1600ms;
}

.extracted-boundary__spine {
    left: 0;
    top: 40px;
    width: var(--hairline);
    height: 120px;
    background: var(--line-2);
    transform-origin: top;
    animation: draw-y var(--duration-draw) 1200ms var(--ease) both;
}

/* Le bloc dont l'histoire parle : le seul rempli. */
.extracted-boundary__block {
    left: 0;
    top: 40px;
    width: 56%;
    height: 56px;
    background: var(--tint-fill);
    border: var(--hairline) solid var(--border);
    animation: settle var(--duration-settle) 1400ms var(--ease) both;
}

.extracted-boundary__marker {
    left: -3px;
    top: 157px;
    width: var(--marker);
    height: var(--marker);
    background: var(--color-red);
    animation: settle 800ms 2100ms both;
}

.extracted-boundary__word {
    left: 18px;
    top: 174px;
    color: var(--color-label);
    animation: reveal var(--duration-reveal) 2250ms both;
}

/* ===================================================================
 * 04 — Ce que chaque option fermait.
 * =================================================================== */

/*
 * La hauteur, les ordonnées et l'écartement viennent du gabarit : ils
 * dépendent du nombre d'options réellement étudiées. Tout le reste est ici.
 */
.closed-options {
    position: relative;
}

.closed-options > * {
    position: absolute;
}

.closed-options__title {
    left: 0;
    top: 0;
}

/* Le tronc rejoint la branche retenue, et elle seule. */
.closed-options__stem {
    left: 0;
    width: 20%;
    height: var(--hairline);
    background: var(--line-3);
}

.closed-options__spine {
    left: 20%;
    width: var(--hairline);
    background: var(--line-3);
}

/* Une branche écartée est plus courte et plus claire : elle s'arrête avant. */
.closed-options__branch {
    left: 20%;
    width: 56%;
    height: var(--hairline);
    background: var(--line-1);
}

.closed-options__branch--retained {
    width: 70%;
    background: var(--line-4);
}

.closed-options__end {
    left: 76%;
    width: var(--marker);
    height: var(--marker);
    border: var(--hairline) solid var(--line-3);
}

/* Le carré rouge marque la décision, une fois par schéma. */
.closed-options__end--retained {
    left: 90%;
    border: 0;
    background: var(--color-red);
}

.closed-options__label {
    left: calc(20% + 18px);
    max-width: calc(80% - 30px);
    color: var(--color-muted);
}

.closed-options__label--retained {
    color: var(--color-ink);
}

/* ==== ./components/diagrams-carnet.css ==== */
/**
 * Schémas du carnet.
 */

/* ===================================================================
 * Le rythme d'écriture du fonds — type B.
 * =================================================================== */

.writing-rhythm {
    position: relative;
    height: 250px;
    margin-top: 10px;
    animation: reveal var(--duration-reveal) 700ms both;
}

.writing-rhythm > * {
    position: absolute;
}

.writing-rhythm__title {
    left: 0;
    top: 0;
    animation: none;
}

.writing-rhythm__spine {
    left: 0;
    top: 44px;
    width: var(--hairline);
    height: 166px;
    background: var(--line-2);
}

/* Quatre entrées, quatre longueurs : aucun calendrier. */
.writing-rhythm__entry {
    left: 0;
    height: var(--hairline);
    background: var(--line-3);
}

.writing-rhythm__entry--one {
    top: 60px;
    width: 38%;
}

.writing-rhythm__entry--two {
    top: 104px;
    width: 56%;
}

.writing-rhythm__entry--three {
    top: 170px;
    width: 47%;
}

.writing-rhythm__entry--four {
    top: 206px;
    width: 72%;
    background: var(--line-4);
}

.writing-rhythm__mark {
    width: var(--marker);
    height: var(--marker);
    border: var(--hairline) solid var(--line-3);
}

.writing-rhythm__mark--one {
    left: 38%;
    top: 57px;
}

.writing-rhythm__mark--two {
    left: 56%;
    top: 101px;
}

.writing-rhythm__mark--three {
    left: 47%;
    top: 167px;
}

/* La dernière entrée : celle qu'on lit d'abord. */
.writing-rhythm__mark--four {
    left: 72%;
    top: 203px;
    background: var(--color-red);
    border-color: var(--color-red);
}

.writing-rhythm__number {
    color: var(--color-muted);
}

.writing-rhythm__number--one {
    left: calc(38% + 18px);
    top: 50px;
}

.writing-rhythm__number--two {
    left: calc(56% + 18px);
    top: 94px;
}

.writing-rhythm__number--three {
    left: calc(47% + 18px);
    top: 160px;
}

.writing-rhythm__number--four {
    left: calc(72% + 18px);
    top: 196px;
    color: var(--color-ink);
}

.writing-rhythm__legend {
    left: 0;
    top: 228px;
}

/* ===================================================================
 * Ce qu'une note conserve — type C.
 * =================================================================== */

.kept-erased {
    position: relative;
    height: 280px;
}

.kept-erased > * {
    position: absolute;
}

.kept-erased__title {
    left: 0;
    top: 0;
}

.kept-erased__stem {
    left: 0;
    top: 134px;
    width: 20%;
    height: var(--hairline);
    background: var(--line-3);
}

.kept-erased__spine {
    left: 20%;
    top: 72px;
    width: var(--hairline);
    height: 124px;
    background: var(--line-3);
}

.kept-erased__branch {
    left: 20%;
    height: var(--hairline);
}

/* Les branches effacées le sont presque : c'est le propos du schéma. */
.kept-erased__branch--upper {
    top: 72px;
    width: 56%;
    background: var(--rule-light);
}

.kept-erased__branch--main {
    top: 134px;
    width: 70%;
    background: var(--line-4);
}

.kept-erased__branch--lower {
    top: 196px;
    width: 56%;
    background: var(--rule-light);
}

.kept-erased__end {
    width: var(--marker);
    height: var(--marker);
}

.kept-erased__end--upper {
    left: 76%;
    top: 69px;
    border: var(--hairline) solid var(--line-1);
}

.kept-erased__end--main {
    left: 90%;
    top: 131px;
    background: var(--color-red);
}

.kept-erased__end--lower {
    left: 76%;
    top: 193px;
    border: var(--hairline) solid var(--line-1);
}

.kept-erased__label {
    left: calc(20% + 18px);
    max-width: calc(80% - 30px);
}

.kept-erased__label--upper {
    bottom: 216px;
    color: var(--color-muted);
}

.kept-erased__label--main {
    bottom: 154px;
    color: var(--color-ink);
}

.kept-erased__label--lower {
    bottom: 92px;
    color: var(--color-muted);
}

.kept-erased__legend {
    left: 0;
    top: 250px;
}

/* ==== ./pages/home.css ==== */
/**
 * Homepage — compositions propres à cette page.
 *
 * Ce fichier ne contient que des espacements et des placements : tout ce qui
 * se répète ailleurs appartient aux composants ou aux couches de base.
 */

/* ===================================================================
 * 01 — Ouverture
 *
 * Le premier écran se pose au chargement, dans l'ordre de lecture :
 * le titre, le texte, puis les actions. Le schéma se construit ensuite,
 * avec ses propres délais.
 * =================================================================== */

.home-hero__title {
    margin-bottom: var(--space-7);
    animation: settle 950ms 150ms var(--ease) both;
}

.home-hero__intro {
    margin-bottom: var(--space-7);
    animation: settle 950ms 300ms var(--ease) both;
}

.home-hero__actions {
    display: flex;
    align-items: center;
    gap: var(--space-4);
    animation: settle 950ms 440ms both;
}

/* ===================================================================
 * 02 — Le point de bascule
 * =================================================================== */

.home-tipping__title {
    /* Le titre porte seul la colonne : le schéma le suit à distance. */
    margin-bottom: var(--title-gap);
    max-width: none;
}

.home-tipping__text {
    margin-bottom: var(--space-5);
}

/* ===================================================================
 * 03 — Quand intervenir
 * =================================================================== */

.home-moments__title {
    margin-bottom: var(--title-gap);
    max-width: 14em;
}

.home-moment__number {
    margin-bottom: 18px;
}

.home-moment__title {
    margin-bottom: 14px;
}

.home-moment__text {
    max-width: var(--measure-dense);
}

/* ===================================================================
 * 06 — Notre conviction
 * =================================================================== */

/*
 * Seule section ample dont le repère s'aligne sur le contenu plutôt que de
 * remonter de 8 px. Le cas ne se présente qu'ici et au chapitre 10 de la
 * page Approche : trop rare pour justifier un modificateur de section.
 */
.home-conviction .section__number,
.home-conviction .section__label {
    margin-top: 0;
}

/* Les composants ne propagent pas de classe : on les situe par leur contexte. */
.home-conviction .t-statement {
    margin-bottom: 26px;
}

.home-conviction__text {
    max-width: 30em;

    /* La référence aère ce paragraphe à 1,68 — la borne haute autorisée par
       le Design Language pour un texte, contre 1,66 pour le rôle Corps. */
    line-height: 1.68;
}

/* ===================================================================
 * 07 — Prochaine étape
 * =================================================================== */

.home-cta__title {
    margin-bottom: 52px;
}

/* ===================================================================
 * Repli
 * =================================================================== */

/*
 * Sous 760 px, les respirations du premier écran se resserrent et l'intro
 * descend d'un point : la page doit tenir dans un pouce, pas dans un écran.
 */
@media (max-width: 759.98px) {
    .home-hero__title {
        margin-bottom: 36px;
    }

    .home-hero__intro {
        font-size: 16px;
        margin-bottom: 36px;
    }

    /*
     * Sur cette page, tous les titres de chapitre prennent la même respiration
     * de 44 px — y compris les deux qui partagent leur ligne avec un lien, et
     * qui n'en avaient aucune tant qu'ils étaient sur une ligne.
     */
    .home-tipping__title,
    .home-moments__title,
    .home-proofs .section-title .t-title-2,
    .home-doctrine .section-title .t-title-2 {
        margin-bottom: 44px;
    }

    .home-hero__actions {
        flex-wrap: wrap;
        align-items: flex-start;
        gap: 18px;
    }

    /* Le titre de clôture descend d'un cran de plus que les autres. */
    .home-cta__title {
        font-size: clamp(27px, 3.6vw, 52px);
    }
}

/* ==== ./pages/approche.css ==== */
/**
 * Page Approche — compositions propres à cette page.
 *
 * Espacements et placements uniquement. Ce qui se répète ailleurs appartient
 * aux composants ou aux couches de base.
 */

/* ===================================================================
 * 01 — Ouverture
 * =================================================================== */

.approche-opening__title {
    margin-bottom: var(--space-6);
    animation: settle 950ms 150ms var(--ease) both;
}

.approche-opening__intro {
    margin-bottom: var(--space-3);
    animation: settle 950ms 300ms var(--ease) both;
}

/* ===================================================================
 * 02 — Le coût du moment
 * =================================================================== */

.approche-cost__title {
    margin-bottom: var(--title-gap);
    max-width: none;
}

.approche-cost__text {
    margin-bottom: var(--space-3);
}

.approche-cost__text--last {
    margin-bottom: var(--space-5);
}

/* ===================================================================
 * 03 — La méthode en une vue
 * =================================================================== */

.approche-method__title {
    margin-bottom: var(--title-gap);
    max-width: 15em;
}

.approche-method__text {
    margin-bottom: var(--space-3);
}

/*
 * La chronologie des quatre étapes. Le filet vertical mesure la suite ;
 * les jalons sont filaires tant qu'ils décrivent une étape, et rouge pour
 * la transmission, qui est ce qui reste.
 */
.method-steps {
    position: relative;
    padding-left: 40px;
}

.method-steps::before {
    content: "";
    position: absolute;
    left: 4px;
    top: 8px;
    bottom: 56px;
    width: var(--hairline);
    background: var(--line-2);
}

.method-step {
    position: relative;
    padding-bottom: 44px;
}

.method-step::before {
    content: "";
    position: absolute;
    left: -40px;
    top: 6px;
    width: var(--marker-page);
    height: var(--marker-page);
    background: var(--color-paper);
    border: var(--hairline) solid var(--marker-line);
}

.method-step__heading {
    display: flex;
    align-items: baseline;
    gap: var(--space-2);
    margin-bottom: var(--space-1);
}

.method-step__name {
    line-height: normal;
}

.method-step__question {
    max-width: 28em;
}

.method-steps__outcome {
    position: relative;
    padding-top: 4px;
}

.method-steps__outcome::before {
    content: "";
    position: absolute;
    left: -40px;
    top: 2px;
    width: var(--marker-page);
    height: var(--marker-page);
    background: var(--color-red);
}

/* ===================================================================
 * 04 à 07 — Les quatre étapes
 * =================================================================== */

.approche-step__title {
    margin-bottom: var(--space-8);
}

/*
 * L'énoncé qui referme une étape. La référence le pose à 21 px, sous la
 * borne basse du rôle : c'est une décision de composition propre à cette
 * page, pas une variante du composant.
 */
.approche-step__closing {
    margin-top: var(--space-7);
    padding-top: var(--space-3);
    border-top: var(--hairline) solid var(--rule);
}

.approche-step__closing .t-statement {
    font-size: 21px;
    letter-spacing: var(--tracking-title-3);
    max-width: 32em;
}

/* ===================================================================
 * 08 — Anatomie d'une décision
 * =================================================================== */

/*
 * Ici la référence borne le titre à 15 em, contrairement aux titres de
 * section de la Homepage : il se replie donc sur deux lignes.
 */
.approche-record .t-title-2,
.approche-refusals .t-title-2 {
    max-width: 15em;
}

/*
 * Et elle donne 1,3 d'interlignage au nom d'un refus, là où la Homepage
 * laisse l'interlignage naturel aux noms de principes.
 */
.approche-refusals .statement-row__title {
    line-height: 1.3;
}

.approche-record__mention {
    color: var(--color-label);
}

/*
 * L'intro remonte sous le titre : la mention de droite a déjà ouvert
 * l'espace, le paragraphe n'a pas à le rouvrir.
 */
.approche-record__intro {
    margin-top: -24px;
    margin-bottom: var(--space-5);
}

.approche-record__note {
    margin-top: var(--space-4);
    max-width: 38em;
    color: var(--color-label);
}

/* ===================================================================
 * 10 — La fin de mission
 * =================================================================== */

/* Comme au chapitre 06 de la Homepage, le repère s'aligne sur le contenu. */
.approche-outcome .section__number,
.approche-outcome .section__label {
    margin-top: 0;
}

.approche-outcome__title {
    margin-bottom: var(--title-gap);
    max-width: 15em;
}

.approche-marker__number {
    margin-bottom: 18px;
}

/* Le marqueur porte un titre plus court que ceux d'une liste de trois. */
.approche-marker__title {
    font-family: var(--font-serif);
    font-size: 21px;
    line-height: 1.3;
    letter-spacing: var(--tracking-title-3);
    margin-bottom: 14px;
}

.approche-outcome__aside {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--space-4);
    margin-top: var(--title-gap);
    padding-top: 20px;
    border-top: var(--hairline) solid var(--rule);
}

.approche-outcome__note {
    color: var(--color-label);
}

.approche-outcome__entry {
    color: var(--color-ink);
}

/* ===================================================================
 * 11 — Prochaine étape
 * =================================================================== */

.approche-cta__title {
    margin-bottom: 52px;
}

/* ===================================================================
 * Repli
 * =================================================================== */

/*
 * Rien à replier ici. Les deux rangées de cette page — l'en-tête d'une étape
 * de méthode et le renvoi au carnet — gardent leur ligne sous 760 px : leurs
 * deux membres sont courts, et la maquette ne les sépare pas. Une rangée ne
 * se met pas en colonne parce qu'elle est sur mobile, mais parce qu'elle ne
 * tient plus.
 */

/* ==== ./pages/histoires.css ==== */
/**
 * Page Histoires — compositions propres à cette page.
 */

/* ===================================================================
 * 01 — Ouverture
 * =================================================================== */

.histoires-opening__title {
    margin-bottom: var(--space-6);
    animation: settle 950ms 150ms var(--ease) both;
}

.histoires-opening__intro {
    margin-bottom: var(--space-3);
    animation: settle 950ms 300ms var(--ease) both;
}

.histoires-opening__note {
    max-width: 30em;
    line-height: 1.68;
    animation: settle 950ms 420ms var(--ease) both;
}

/* ===================================================================
 * 02 — Comment les lire
 * =================================================================== */

.histoires-reading__title {
    margin-bottom: var(--space-5);
}

.histoires-reading__text {
    margin-bottom: var(--space-7);
    line-height: 1.68;
}

/* ===================================================================
 * 03 — Le registre
 * =================================================================== */

.histoires-register .t-title-2 {
    max-width: 15em;
}

.histoires-register__order {
    color: var(--color-label);
}

/*
 * Le registre — un vrai tableau, dont rien du tableau ne se voit : la grille
 * de douze colonnes reste la seule mise en forme perceptible.
 */
.story-register {
    display: block;

    /* Le survol déborde de 16 px à gauche, le texte reste sur la grille. */
    margin-left: -16px;
    border-top: var(--hairline) solid var(--rule);
}

.story-register thead,
.story-register tbody {
    display: block;
}

.story-register__head,
.story-register__row {
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    gap: var(--gutter);
    border-bottom: var(--hairline) solid var(--rule);
}

.story-register__head > *,
.story-register__row > * {
    padding: 0;
}

.story-register__head {
    padding: 14px 0 16px 16px;
}

.story-register__row {
    align-items: baseline;
    padding: var(--space-4) 0 36px 16px;
}

.story-register__year {
    grid-column: 1 / span 1;
    color: var(--color-label);
}

.story-register__decision {
    grid-column: 2 / span 5;
    line-height: 1.24;
}

.story-register__client {
    grid-column: 7 / span 2;
    color: var(--color-ink);
}

.story-register__tradeoff {
    grid-column: 9 / span 4;
}

/* L'en-tête nomme les colonnes : il garde le rôle Libellé, pas celui du titre. */
.story-register__head .story-register__decision,
.story-register__head .story-register__client,
.story-register__head .story-register__tradeoff {
    font-family: var(--font-sans);
    font-size: var(--text-label);
    line-height: normal;
    letter-spacing: var(--tracking-label);
    text-transform: uppercase;
    color: var(--color-label);
}

/*
 * La cible couvre toute la cellule qui nomme la décision, sans déborder sur
 * les autres ni déplacer la ligne de base : le calque n'occupe pas le flux.
 */
.story-register__row .story-register__decision {
    position: relative;
}

.story-register__decision a::after {
    content: "";
    position: absolute;
    inset: 0;
}

.story-register__decision a:hover {
    text-decoration: none;
}

/* La ligne entière répond au survol de son lien, sans être cliquable. */
.story-register__row:has(a:hover) {
    background: var(--tint-hover);
}

/* ===================================================================
 * 04 — Ce que nous ne publions pas
 * =================================================================== */

.histoires-silences__title {
    margin-bottom: var(--space-7);
    max-width: 15em;
}

.histoires-silences .statement-row__title {
    line-height: 1.3;
}

/* ===================================================================
 * 05 — Prochaine étape
 * =================================================================== */

.histoires-cta__title {
    margin-bottom: 52px;
}

/* ===================================================================
 * Repli
 * =================================================================== */

/*
 * Sous 760 px, une ligne du registre devient un bloc, et l'en-tête de colonnes
 * s'empile avec elles : il cesse de titrer des colonnes pour devenir la
 * légende de ce qui suit. C'est ce que fait la maquette, et le tableau reste
 * un tableau — seule sa mise en forme change.
 */
@media (max-width: 759.98px) {
    .story-register__head,
    .story-register__row {
        grid-template-columns: minmax(0, 1fr);
        gap: 10px;
        padding-left: 0;
    }

    .story-register__head > :nth-child(n),
    .story-register__row > :nth-child(n) {
        grid-column: auto;
    }
}

/* ==== ./pages/histoire.css ==== */
/**
 * Une histoire — compositions propres au gabarit.
 *
 * Le gabarit est identique d'une histoire à l'autre : c'est ce qui les rend
 * comparables, et ce qui rend impossible de mettre en avant les plus
 * flatteuses.
 */

/* 01 — Ouverture */

.histoire-opening__meta {
    margin-bottom: 28px;
    color: var(--color-label);
    animation: reveal var(--duration-reveal) 100ms both;
}

.histoire-opening__title {
    margin-bottom: var(--space-5);
    animation: settle 950ms 150ms var(--ease) both;
}

.histoire-opening__lead {
    animation: settle 950ms 300ms var(--ease) both;
}

/* 02 — Le contexte */

.histoire-context__title {
    margin-bottom: var(--space-7);
}

.histoire-context__text {
    margin-bottom: 20px;
}

.histoire-context__text:last-child {
    margin-bottom: 0;
}

/* La fiche du contexte suit un rythme plus court que celle d'une étape. */
.histoire-context .spec-row {
    padding: 16px 0 17px;
}

/* 03 — Le point de bascule */

.histoire-tipping__title {
    margin-bottom: var(--title-gap);
    max-width: none;
}

.histoire-tipping__text {
    margin-bottom: var(--space-3);
}

.histoire-tipping__text--last {
    margin-bottom: var(--space-5);
}

/* 04 — Les options */

.histoire-mention {
    color: var(--color-label);
}

.histoire-options .t-title-2,
.histoire-revision .t-title-2 {
    max-width: 15em;
}

/* Le titre de ces deux sections serre son intro de plus près. */
.histoire-options .section-title,
.histoire-revision .section-title {
    margin-bottom: var(--space-4);
}

.histoire-options__lead,
.histoire-revision__lead {
    margin-bottom: var(--space-5);
    line-height: 1.68;
}

.histoire-options__after {
    margin-top: var(--space-7);
}

.histoire-options__text {
    margin-bottom: 20px;
}

.histoire-options__text:last-child {
    margin-bottom: 0;
}

/* 05 — Le compromis */

.histoire-compromise__title {
    margin-bottom: var(--space-4);
    max-width: 14em;
}

.histoire-compromise__lead {
    max-width: 30em;
}

.histoire-compromise__list {
    border-top: var(--hairline) solid var(--rule-on-blue);
}

.histoire-compromise__item {
    padding: 22px 0 24px;
    border-bottom: var(--hairline) solid var(--rule-on-blue);
}

.histoire-compromise__name {
    font-family: var(--font-serif);
    font-size: 21px;
    line-height: 1.3;
    letter-spacing: var(--tracking-title-3);
    margin-bottom: var(--space-1);
}

/* 06 — Le résultat */

.histoire-results__title {
    margin-bottom: var(--space-5);
}

.histoire-results__lead {
    margin-bottom: var(--space-7);
    line-height: 1.68;
}

/*
 * Les résultats reprennent la liste de principes, mais leur numéro tient sur
 * une colonne et leur énoncé sur cinq : ce qui compte ici est le fait, pas la
 * référence qui le porte.
 */
.histoire-results .statement-row {
    padding: 22px 0 24px;
}

.histoire-results .statement-row__reference {
    grid-column: 1 / span 1;
}

.histoire-results .statement-row__title {
    grid-column: 2 / span 5;
    line-height: 1.3;
}

/* 08 — Prochaine étape */

.histoire-next {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--space-4);
    margin-bottom: 52px;
}

.histoire-next__title {
    margin-bottom: 0;
}

/* ===================================================================
 * Repli
 * =================================================================== */

@media (max-width: 759.98px) {
    .histoire-next {
        flex-direction: column;
        align-items: flex-start;
        gap: 22px;
    }

    /* Cette page repositionne les colonnes d'un énoncé : le repli du
       composant doit être répété ici pour l'emporter sur ce placement. */
    .histoire-results .statement-row > :nth-child(n) {
        grid-column: auto;
    }
}

/* ==== ./pages/expertises.css ==== */
/**
 * Page Expertises — compositions propres à cette page.
 */

/* ===================================================================
 * 01 — Nos terrains
 * =================================================================== */

.expertises-opening__title {
    margin-bottom: var(--space-6);
    animation: settle 950ms 150ms var(--ease) both;
}

.expertises-opening__intro {
    margin-bottom: var(--space-3);
    animation: settle 950ms 300ms var(--ease) both;
}

.expertises-opening__note {
    max-width: 30em;
    line-height: 1.68;
    animation: settle 950ms 420ms var(--ease) both;
}

/*
 * Les disciplines sont posées à côté du titre, pas sous lui : elles nomment
 * ce qui sert les terrains, elles ne les définissent pas.
 */
.expertises-disciplines {
    margin-top: 10px;
    animation: reveal var(--duration-reveal) 700ms both;
}

.expertises-disciplines__title {
    margin-bottom: 20px;
}

.expertises-disciplines__list {
    border-top: var(--hairline) solid var(--rule);
}

.expertises-discipline {
    padding: 11px 0 12px;
    border-bottom: var(--hairline) solid var(--rule);
    line-height: var(--leading-tight);
}

/* ===================================================================
 * 02 — Une même méthode
 * =================================================================== */

.expertises-method__title {
    max-width: none;
}

.expertises-method__text {
    margin-bottom: var(--space-3);
}

.expertises-method__text--last {
    margin-bottom: var(--space-5);
}

/* ===================================================================
 * 03 — Les six situations
 * =================================================================== */

.expertises-situations .t-title-2 {
    max-width: 15em;
}

.expertises-situations__order {
    color: var(--color-label);
    text-align: right;
}

/*
 * Le registre des situations. Aucune page dédiée n'existe : les entrées ne
 * sont ni cliquables ni survolées, et la liste ne déborde donc pas de la
 * colonne comme le fait un registre lié.
 */
.situation-list {
    border-top: var(--hairline) solid var(--rule);
}

.situation {
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    gap: var(--gutter);
    align-items: baseline;
    padding: 30px 0 34px;
    border-bottom: var(--hairline) solid var(--rule);
}

.situation__number {
    grid-column: 1 / span 1;
}

.situation__subject {
    grid-column: 2 / span 5;
}

/* Le titre nomme le contexte vécu ; la discipline ne vient qu'en second. */
.situation__title {
    line-height: 1.24;
    margin-bottom: 10px;
}

.situation__tipping {
    grid-column: 8 / span 5;
}

.expertises-situations__note {
    margin-top: var(--space-3);
    line-height: 1.6;
}

/* ===================================================================
 * 04 — Ce que nous ne faisons pas
 * =================================================================== */

.expertises-limits__title {
    margin-bottom: var(--space-3);
    max-width: 15em;
}

.expertises-limits__lead {
    margin-bottom: var(--space-7);
}

.expertises-limits .statement-row__title {
    line-height: 1.3;
}

/* ===================================================================
 * 05 — Prochaine étape
 * =================================================================== */

.expertises-cta__title {
    margin-bottom: 52px;
}

/* ===================================================================
 * Repli
 * =================================================================== */

@media (max-width: 759.98px) {
    .situation {
        grid-template-columns: minmax(0, 1fr);
        gap: 10px;
        padding-left: 0;
    }

    .situation > :nth-child(n) {
        grid-column: auto;
    }
}

/* ==== ./pages/maison.css ==== */
/**
 * Page La maison — compositions propres à cette page.
 *
 * La page parle de l'institution avant de parler du fondateur : le portrait
 * n'y est pas le sujet, il matérialise la responsabilité.
 */

/* ===================================================================
 * 01 — La maison
 * =================================================================== */

.maison-opening__title {
    margin-bottom: var(--space-6);
    animation: settle 950ms 150ms var(--ease) both;
}

.maison-opening__intro {
    margin-bottom: var(--space-3);
    animation: settle 950ms 300ms var(--ease) both;
}

.maison-opening__note {
    max-width: 30em;
    line-height: 1.68;
    animation: settle 950ms 420ms var(--ease) both;
}

.maison-marks {
    margin-top: 10px;
    animation: reveal var(--duration-reveal) 700ms both;
}

.maison-marks__title {
    margin-bottom: 20px;
}

/*
 * Les repères sont une fiche de spécification resserrée : ils tiennent dans
 * la colonne latérale, à côté du titre, et ne portent qu'un mot chacun.
 */
.maison-marks .spec-row {
    grid-template-columns: 110px minmax(0, 1fr);
    gap: var(--space-2);
    padding: 13px 0 14px;
}

.maison-marks .spec-row__value {
    font-size: var(--text-body-dense);
    line-height: 1.6;
    color: var(--color-ink);
}

/* ===================================================================
 * 02 — Ce qui manquait
 * =================================================================== */

.maison-origin__title {
    max-width: none;
}

.maison-origin__text {
    margin-bottom: var(--space-3);
}

.maison-origin__text--last {
    margin-bottom: var(--space-5);
}

/* ===================================================================
 * 03 — Une maison, pas une agence
 * =================================================================== */

.maison-duties__title {
    margin-bottom: var(--space-5);
}

.maison-duties__lead {
    margin-bottom: var(--space-7);
    line-height: 1.68;
}

/*
 * Un engagement se lit en deux temps : ce qu'il nous impose, puis pourquoi.
 * Le second membre reste à distance, sur la grille de la fiche.
 */
.maison-duties .spec-row {
    padding: 22px 0 24px;
}

.maison-duty {
    display: grid;
    grid-template-columns: repeat(10, minmax(0, 1fr));
    gap: var(--gutter);
    align-items: baseline;
}

.maison-duty__name {
    grid-column: 1 / span 4;
    font-size: 21px;
    line-height: 1.3;
    color: var(--color-ink);
}

.maison-duty__why {
    grid-column: 5 / span 6;
}

/* ===================================================================
 * 04 — Nos conditions d'engagement
 * =================================================================== */

.maison-terms__title {
    margin-bottom: var(--space-3);
    max-width: 15em;
}

.maison-terms__lead {
    margin-bottom: var(--space-7);
}

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

.maison-terms__column:first-child {
    grid-column: 1 / span 5;
}

.maison-terms__column:last-child {
    grid-column: 7 / span 5;
}

.maison-terms__heading {
    margin-bottom: 20px;
}

/* Ce que la maison écarte se lit en retrait, comme une option écartée. */
.maison-terms .marker--excluded ~ .marker-item__text {
    color: var(--color-text-on-blue);
}

/* ===================================================================
 * 05 — Qui en répond
 * =================================================================== */

.maison-signature__title {
    margin-bottom: var(--space-4);
    max-width: 14em;
}

.maison-signature__text {
    margin-bottom: var(--space-3);
    max-width: 30em;
    line-height: 1.68;
}

.maison-signature__text--last {
    margin-bottom: var(--space-4);
}

.maison-signature .t-statement {
    max-width: 20em;
}

/* ===================================================================
 * 06 — Ce qui restera vrai
 * =================================================================== */

.maison-invariants__title {
    margin-bottom: var(--space-5);
}

.maison-invariants__lead {
    margin-bottom: var(--space-7);
    line-height: 1.68;
}

.maison-invariants__list {
    row-gap: var(--space-7);
    margin-bottom: var(--space-7);
}

.maison-invariant__number {
    margin-bottom: 18px;
}

.maison-invariant__title {
    line-height: 1.26;
    margin-bottom: 14px;
}

.maison-invariant__text {
    max-width: var(--measure-dense);
}

.maison-invariants__aside {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--space-4);
    padding-top: 20px;
    border-top: var(--hairline) solid var(--rule);
}

.maison-invariants__note {
    color: var(--color-label);
}

.maison-invariants__public {
    color: var(--color-ink);
}

/* ===================================================================
 * 07 — Prochaine étape
 * =================================================================== */

.maison-cta__title {
    margin-bottom: 52px;
}

/* ===================================================================
 * Repli
 * =================================================================== */

@media (max-width: 759.98px) {
    .maison-duty,
    .maison-terms__columns {
        grid-template-columns: minmax(0, 1fr);
        gap: 44px;
    }

    .maison-duty > :nth-child(n),
    .maison-terms__columns > :nth-child(n) {
        grid-column: auto;
    }

    /* Les repères s'empilent comme toutes les fiches. */
    .maison-marks .spec-row {
        grid-template-columns: minmax(0, 1fr);
        gap: 6px;
    }
}

/* ==== ./pages/carnet.css ==== */
/**
 * Le carnet — le fonds et ses entrées.
 *
 * Un fonds éditorial, pas un blog : ni catégories, ni tags, ni pagination,
 * ni dates survalorisées.
 */

/* ===================================================================
 * Le fonds
 * =================================================================== */

.carnet-opening__title {
    margin-bottom: var(--space-6);
    animation: settle 950ms 150ms var(--ease) both;
}

.carnet-opening__intro {
    margin-bottom: var(--space-3);
    animation: settle 950ms 300ms var(--ease) both;
}

.carnet-opening__note {
    max-width: 30em;
    line-height: 1.68;
    animation: settle 950ms 420ms var(--ease) both;
}

.carnet-fonds__head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--space-4);
    margin-bottom: var(--space-5);
}

.carnet-fonds__order {
    color: var(--color-label);
}

.carnet-fonds__count {
    color: var(--color-label);
    white-space: nowrap;
}

/*
 * Une entrée du fonds : son numéro, son titre, ce qu'elle établit, sa nature.
 * Le survol déborde de 16 px à gauche lorsque l'entrée est écrite.
 */
.entry-list {
    margin-left: -16px;
    border-top: var(--hairline) solid var(--rule);
}

.entry {
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    gap: var(--gutter);
    align-items: baseline;
    padding: 30px 0 34px 16px;
    border-bottom: var(--hairline) solid var(--rule);
}

.entry__number {
    grid-column: 1 / span 2;
}

.entry__title {
    grid-column: 3 / span 5;
    line-height: 1.24;
}

.entry__summary {
    grid-column: 8 / span 2;
}

.entry__nature {
    grid-column: 10 / span 3;
    line-height: 1.6;
}

a.entry:hover {
    background: var(--tint-hover);
    text-decoration: none;
}

/* ===================================================================
 * Ce qui entre ici
 * =================================================================== */

.carnet-contract__title {
    margin-bottom: var(--space-3);
    max-width: 15em;
}

.carnet-contract__lead {
    margin-bottom: var(--space-7);
}

.carnet-contract .statement-row__title {
    line-height: 1.3;
}

/* ===================================================================
 * D'où vient ce carnet
 * =================================================================== */

.carnet-source__aside {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--space-4);
    padding-top: var(--space-3);
    border-top: var(--hairline) solid var(--rule);
}

.carnet-source__text {
    color: var(--color-text);
}

.carnet-source__links {
    display: flex;
    gap: var(--space-4);
    white-space: nowrap;
}

/* ===================================================================
 * Une entrée
 * =================================================================== */

.entree-meta {
    margin-bottom: 28px;
    color: var(--color-label);
    animation: reveal var(--duration-reveal) 100ms both;
}

.entree-title {
    margin-bottom: var(--space-5);
    animation: settle 950ms 150ms var(--ease) both;
}

.entree-lead {
    animation: settle 950ms 300ms var(--ease) both;
}

/*
 * La colonne de démonstration est plus large que la mesure du Corps.
 * La référence y laisse le texte occuper toute la colonne : c'est la colonne
 * qui fixe la longueur de ligne, et elle reste sous les 34 em de lecture.
 */
.entree-text {
    max-width: none;
    margin-bottom: var(--space-3);
}

.entree-text:last-child {
    margin-bottom: 0;
}

.entree-effects__title {
    margin-bottom: var(--space-7);
}

/* Un effet se lit en deux temps : ce qu'il produit, puis pourquoi.
   ET-04 — le titre d'un item de liste descend ici à 21 px. */
.entree-effect__title {
    display: block;
    font-size: 21px;
    line-height: 1.3;
    color: var(--color-ink);
    margin-bottom: var(--space-1);
}

.entree-effect__text {
    display: block;
    max-width: 46em;
}

.entree-effects .spec-row {
    padding: 22px 0 24px;
}

.entree-scope {
    padding-top: 20px;
    border-top: var(--hairline) solid var(--rule);
}

.entree-scope__title {
    margin-bottom: 12px;
}

/* L'entrée liée n'est pas encore écrite : elle est encadrée, pas liée.
   Seule sur sa section, elle n'a pas à ménager la place d'un survol. */
.entry--framed {
    border-top: var(--hairline) solid var(--rule);
    padding: 28px 0 32px;
}

.entry__summary--wide {
    grid-column: 9 / span 4;
}

.entree-related__back {
    margin-top: var(--space-4);
}

/* ===================================================================
 * Repli
 * =================================================================== */

@media (max-width: 759.98px) {
    .carnet-fonds__head,
    .carnet-source__aside {
        flex-direction: column;
        align-items: flex-start;
        gap: 22px;
    }

    .carnet-source__links {
        flex-wrap: wrap;
        align-items: flex-start;
        gap: 18px;
    }

    /* Une entrée du fonds devient un bloc : numéro, titre, ce qu'elle
       établit, sa nature. */
    .entry-list {
        margin-left: 0;
    }

    .entry {
        grid-template-columns: minmax(0, 1fr);
        gap: 10px;
        padding-left: 0;
    }

    .entry > :nth-child(n) {
        grid-column: auto;
    }
}

/* ==== ./pages/doctrine.css ==== */
/**
 * La doctrine — un document de référence.
 *
 * Ni argument, ni appel à l'action : le document s'ouvre sur son cartouche,
 * expose ses dix principes, ce qu'ils interdisent, et comment il se révise.
 */

/* ===================================================================
 * 01 — Document de référence
 * =================================================================== */

.doctrine-opening__title {
    margin-bottom: var(--space-5);
    animation: settle 950ms 150ms var(--ease) both;
}

.doctrine-opening__intro {
    margin-bottom: var(--space-3);
    animation: settle 950ms 300ms var(--ease) both;
}

.doctrine-opening__note {
    max-width: 30em;
    line-height: 1.68;
    animation: settle 950ms 420ms var(--ease) both;
}

/*
 * Le cartouche du document — libellé au-dessus de sa valeur.
 * Le décalage de 10 px pose sa première ligne sur celle de l'intro,
 * et non sur celle du titre.
 */
.doctrine-card {
    margin-top: 10px;
    animation: reveal var(--duration-reveal) 700ms both;
}

.doctrine-card__title {
    margin-bottom: 20px;
}

/* ===================================================================
 * 02 — Pourquoi l'écrire
 * =================================================================== */

.doctrine-why__text {
    margin-bottom: var(--space-3);
}

.doctrine-why__text--last {
    margin-bottom: var(--space-5);
}

/* ===================================================================
 * 03 — Les dix principes
 * =================================================================== */

.doctrine-principles .section-title {
    margin-bottom: var(--space-8);
}

/* La mention du complément repère le document, elle n'appelle aucune action. */
.doctrine-principles__version {
    color: var(--color-label-on-blue);
}

.principle-list {
    border-top: var(--hairline) solid var(--rule-on-blue);
}

/*
 * Un principe : son numéro, son nom, sa référence permanente, puis
 * l'énoncé et son développement côte à côte.
 */
.principle {
    display: grid;
    grid-template-columns: var(--space-8) minmax(0, 1fr);
    gap: var(--gutter);
    padding: var(--space-4) 0 36px;
    border-bottom: var(--hairline) solid var(--rule-on-blue);
}

/* Le numéro s'aligne sur la première ligne du nom, plus haute que lui. */
.principle__number {
    padding-top: 6px;

    /* Un numéro n'est pas un libellé : pas de capitales forcées. */
    text-transform: none;
}

/* ET-09 — la doctrine écrit ses principes sur une troisième échelle de Titre 03. */
.principle__name {
    font-size: clamp(23px, 2.2vw, 29px);
    line-height: 1.2;
    letter-spacing: var(--tracking-statement);
    margin-bottom: 12px;
}

.principle__meta {
    margin-bottom: 20px;
}

.principle__content {
    display: grid;
    grid-template-columns: repeat(10, minmax(0, 1fr));
    gap: var(--gutter);
    align-items: start;
}

/* L'énoncé est le principe lui-même : il se lit en papier plein. */
.principle__statement {
    grid-column: 1 / span 5;
    color: var(--color-paper);
}

.principle__development {
    grid-column: 6 / span 5;
}

/* ===================================================================
 * 04 — Ce qu'ils impliquent
 * =================================================================== */

.doctrine-effects__title {
    margin-bottom: var(--space-5);
}

.doctrine-effects__lead {
    margin-bottom: var(--space-7);
    line-height: 1.68;
}

/*
 * Le libellé nomme une famille d'engagements — « Ce que nous ne vendons pas » —
 * et demande 190 px pour tenir en deux lignes.
 */
.doctrine-effects .spec-row {
    grid-template-columns: 190px minmax(0, 1fr);
    align-items: baseline;
    padding: 22px 0 24px;
}

/* Ce que nous faisons, puis de quels principes cela découle. */
.doctrine-effects .spec-row__value {
    display: grid;
    grid-template-columns: repeat(10, minmax(0, 1fr));
    gap: var(--gutter);
    align-items: baseline;
}

.doctrine-effect__text {
    grid-column: 1 / span 5;
    font-size: var(--text-body);
    color: var(--color-ink);
}

.doctrine-effect__from {
    grid-column: 6 / span 5;
    color: var(--color-label);
}

/* ===================================================================
 * 05 — Comment elle se révise
 * =================================================================== */

.doctrine-revision__title {
    margin-bottom: var(--space-7);
}

/* La gouvernance tient en quatre lignes courtes : le pas est resserré. */
.doctrine-revision .spec-row {
    padding: 18px 0 20px;
}

.doctrine-versions__title {
    margin-bottom: 20px;
}

.doctrine-versions {
    border-top: var(--hairline) solid var(--rule);
}

.doctrine-version {
    display: grid;
    grid-template-columns: 88px minmax(0, 1fr);
    gap: var(--gutter);
    align-items: baseline;
    padding: var(--space-2) 0 17px;
    border-bottom: var(--hairline) solid var(--rule);
}

/* « v1.0 » s'écrit tel quel : ce n'est pas un libellé. */
.doctrine-version__number {
    text-transform: none;
}

.doctrine-version__date {
    font-size: var(--text-body-dense);
    line-height: var(--leading-dense);
    margin-bottom: 4px;
}

.doctrine-version__note {
    line-height: var(--leading-dense);
}

.doctrine-revision__links {
    display: flex;
    gap: var(--space-4);
    margin-top: var(--space-4);
}

/* ===================================================================
 * Repli
 * =================================================================== */

@media (max-width: 759.98px) {
    .doctrine-revision__links {
        flex-wrap: wrap;
        align-items: flex-start;
        gap: 18px;
    }

    /* Un principe : son numéro au-dessus de son nom, puis l'énoncé et son
       développement l'un sous l'autre. */
    .principle {
        grid-template-columns: minmax(0, 1fr);
        gap: 6px;
    }

    /* L'énoncé et son développement restent deux temps distincts : ils
       gardent la respiration d'une composition, pas celle d'une fiche. */
    .principle__content,
    .doctrine-effects .spec-row__value {
        grid-template-columns: minmax(0, 1fr);
        gap: 44px;
    }

    .principle__content > :nth-child(n),
    .doctrine-effects .spec-row__value > :nth-child(n) {
        grid-column: auto;
    }

    .doctrine-effects .spec-row {
        grid-template-columns: minmax(0, 1fr);
    }

    .doctrine-version {
        grid-template-columns: minmax(0, 1fr);
        gap: 6px;
    }
}

/* ==== ./pages/contact.css ==== */
/**
 * Contact — écrire, ou attendre.
 *
 * La page ne vend pas la prise de contact : elle donne de quoi savoir si le
 * sujet relève de la maison, puis elle laisse écrire.
 */

/* ===================================================================
 * 01 — Écrire, ou attendre
 * =================================================================== */

.contact-opening__title {
    margin-bottom: var(--space-6);
    animation: settle 950ms 150ms var(--ease) both;
}

.contact-opening__intro {
    margin-bottom: var(--space-3);
    animation: settle 950ms 300ms var(--ease) both;
}

.contact-opening__note {
    max-width: 30em;
    line-height: 1.68;
    animation: settle 950ms 420ms var(--ease) both;
}

/* Le cartouche s'aligne sur l'intro, pas sur le titre. */
.contact-card {
    margin-top: 10px;
    animation: reveal var(--duration-reveal) 700ms both;
}

.contact-card__title {
    margin-bottom: 20px;
}

/* ===================================================================
 * 02 — Le premier échange
 * =================================================================== */

.contact-conditions__title {
    margin-bottom: var(--space-7);
}

/*
 * Deux colonnes de cinq unités, séparées par une unité vide : ce qui invite
 * à écrire et ce qui invite à le dire ne se lisent pas comme une opposition
 * terme à terme.
 */
.contact-conditions__columns {
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    gap: var(--gutter);
    align-items: start;
}

.contact-conditions__columns > :nth-child(1) {
    grid-column: 1 / span 5;
}

.contact-conditions__columns > :nth-child(2) {
    grid-column: 7 / span 5;
}

.contact-conditions__label {
    margin-bottom: 20px;
}

/* Une phrase entière par ligne : le pas et la taille suivent la lecture. */
.contact-conditions .marker-item {
    padding: 18px 0 20px;
}

.contact-conditions .marker-item__text {
    font-size: var(--text-body);
}

.contact-conditions__columns > :nth-child(1) .marker-item__text {
    color: var(--color-ink);
}

.contact-conditions__note {
    margin-top: var(--space-5);
    max-width: 38em;
    color: var(--color-label);
}

/* ===================================================================
 * 03 — Ce que produit la première heure
 * =================================================================== */

.contact-exchange__title {
    margin-bottom: var(--space-3);
    max-width: 15em;
}

.contact-exchange__lead {
    margin-bottom: var(--space-7);
}

/* ET-06 — ces énoncés se replient : ils prennent l'interlignage explicite. */
.contact-exchange .statement-row__title {
    line-height: 1.3;
}

/* ===================================================================
 * 04 — Écrire
 * =================================================================== */

.contact-founder__name {
    font-family: var(--font-serif);
    font-size: var(--text-statement-wide);
    line-height: 1.3;
    letter-spacing: var(--tracking-statement);
    max-width: 12em;
    margin-bottom: var(--space-1);
}

.contact-founder__role {
    margin-bottom: 36px;
}

/* Les coordonnées : un pas plus large que celui d'un cartouche, et une
   valeur à la taille du corps — on y lit un numéro, pas une métadonnée. */
.contact-write .spec-list--stacked .spec-row {
    gap: var(--space-1);
    padding: var(--space-2) 0 18px;
}

.contact-write .spec-list--stacked .spec-row__value {
    font-size: var(--text-body);
}

/* Un numéro ne se coupe jamais ; une adresse se coupe où il le faut. */
.contact-phone {
    white-space: nowrap;
}

.contact-email {
    overflow-wrap: anywhere;
}

.contact-form__label {
    margin-bottom: 20px;
}

/* ET-03 — l'énoncé se pose à 21 px, avec l'approche du Titre 03. */
.contact-form__statement {
    font-size: 21px;
    letter-spacing: var(--tracking-title-3);
    max-width: 22em;
    margin-bottom: 36px;
}

/* ===================================================================
 * Le formulaire
 * =================================================================== */

.contact-form {
    display: grid;
    gap: 28px;
    max-width: 34em;
}

.field__label {
    display: block;
    margin-bottom: var(--space-1);
}

/*
 * Un champ, c'est une ligne à écrire : un filet dessous, rien autour.
 * Ni cadre, ni fond, ni angle arrondi.
 */
.field__input {
    display: block;
    width: 100%;
    font-size: var(--text-body);

    /* Un champ de saisie n'est pas un paragraphe : il garde l'interlignage
       naturel du contrôle, comme dans la référence. */
    line-height: normal;
    color: var(--color-ink);
    background: transparent;
    border-bottom: var(--hairline) solid var(--border);
    padding: 12px 0;
}

.field__input:focus {
    outline: none;
    border-bottom-color: var(--color-ink);
}

.field__input::placeholder {
    color: var(--color-muted);
}

textarea.field__input {
    resize: vertical;
}

/* Le champ en défaut porte un filet rouge — mais l'erreur est écrite,
   c'est elle qui l'énonce. La couleur ne transporte rien seule. */
.field--invalid .field__input {
    border-bottom-color: var(--color-red);
}

.field__error {
    margin-top: var(--space-1);
    color: var(--color-ink);
}

/* Le piège à robots : hors de l'écran, hors du parcours clavier. */
.field--trap {
    position: absolute;
    left: -9999px;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

.contact-form__submit {
    display: flex;
    align-items: center;
    gap: var(--space-4);
    margin-top: var(--space-1);
}

.contact-form__note {
    color: var(--color-label);
}

/* La confirmation reprend la forme d'un cartouche : un filet, un libellé,
   une phrase. Aucune mise en scène. */
.contact-sent {
    border-top: var(--hairline) solid var(--rule);
    padding-top: 20px;
}

.contact-sent__title {
    margin-bottom: var(--space-1);
}

.contact-sent__text {
    max-width: 30em;
}

/* ===================================================================
 * Repli
 * =================================================================== */

@media (max-width: 759.98px) {
    .contact-conditions__columns {
        grid-template-columns: minmax(0, 1fr);
        gap: 44px;
    }

    .contact-conditions__columns > :nth-child(n) {
        grid-column: auto;
    }

    .contact-form__submit {
        flex-wrap: wrap;
        align-items: flex-start;
        gap: 18px;
    }
}

/* ==== ./pages/mentions-legales.css ==== */
/**
 * Mentions légales — volontairement neutre.
 *
 * Pas de hero, pas d'action, pas de schéma. Le système graphique existant
 * suffit : un rail, des filets, des fiches. La page respire moins que les
 * autres parce qu'elle se consulte, elle ne se lit pas d'un bout à l'autre.
 */

@media (min-width: 1100px) {
    .legal-section {
        padding: var(--space-8) var(--page-margin) 96px;
    }

    .legal-section.section--opening {
        padding-top: var(--section-pt-opening);
    }

    .legal-section.section--final {
        padding-bottom: var(--section-pb-page);
    }
}

.legal-opening__title {
    margin-bottom: 28px;
}

/*
 * Le titre d'une rubrique légale ne pèse pas celui d'un chapitre : il prend
 * l'échelle de l'énoncé large, sans en prendre ni la couleur ni le rôle.
 */
.legal-heading {
    font-family: var(--font-serif);
    font-size: var(--text-statement-wide);
    line-height: 1.2;
    letter-spacing: var(--tracking-statement);
    margin-bottom: 28px;
}

/* Une rubrique qui ouvre sur une fiche laisse un cran de plus : la fiche
   commence par un filet, le texte par une lettre. */
.legal-section:has(.legal-sheet) .legal-heading {
    margin-bottom: 36px;
}

.legal-sheet {
    max-width: 52em;
}

/* Une fiche légale nomme des mentions longues : sa colonne s'élargit. */
.legal-sheet .spec-row {
    grid-template-columns: 230px minmax(0, 1fr);
    align-items: baseline;
    padding: 14px 0 15px;
}

.legal-sheet .spec-row__value {
    font-size: var(--text-body);
    line-height: 1.6;
    color: var(--color-ink);
    overflow-wrap: anywhere;
}

.legal-nowrap {
    white-space: nowrap;
}

/* La fiche d'hébergement porte une réserve : elle n'est pas définitive. */
.legal-note {
    margin-top: 12px;
}

.legal-text {
    max-width: 38em;
    line-height: 1.68;
}

.legal-text--spaced {
    margin-bottom: 20px;
}

/* Le paragraphe d'ouverture se lit sur la mesure du corps, pas sur 38 em. */
.legal-opening__title + .legal-text {
    max-width: var(--measure-body);
}

/* ===================================================================
 * Repli
 * =================================================================== */

/* Une fiche s'empile comme toutes les autres. Le titre de rubrique garde
   sa marge : c'est elle qui sépare deux mentions. */
@media (max-width: 759.98px) {
    .legal-sheet .spec-row {
        grid-template-columns: minmax(0, 1fr);
    }
}

/* ==== ./pages/error.css ==== */
/**
 * Pages d'erreur — 404 et 500.
 *
 * Elles n'existent pas dans les références, parce qu'aucune maquette ne les
 * dessine. Elles ne portent donc rien de nouveau : le rail, un titre, une
 * phrase, deux liens. Aucune mise en scène, aucune action primaire.
 */

.error-title {
    margin-bottom: 28px;
}

.error-text {
    max-width: 34em;
    line-height: 1.68;
}

.error-links {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-4);
    margin-top: var(--space-6);
}