/* ==========================================================================
   Ironframe — site officiel
   --------------------------------------------------------------------------
   Une seule idée graphique : le cadre. Des filets d'un pixel, des angles
   marqués par de petites équerres, rien d'arrondi, rien de flou. Le vert acide
   n'intervient que là où l'on veut que l'œil aille.

   Sommaire
     1.  Base
     2.  Mise en page
     3.  Typographie
     4.  Le motif de cadre
     5.  Boutons
     6.  En-tête et navigation
     7.  Bannière
     8.  Démonstration déclaration / administration
     9.  Bande « structure et contenu »
     10. Arguments
     11. Extrait du manifeste
     12. Témoignage
     13. Appel final
     14. Pied de page
     15. Page Manifeste
     16. Documentation
     17. Page Contact
     18. Page introuvable
     19. Apparitions au défilement
     20. Mouvement réduit
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Base
   Le reset du moteur est un reset Meyer : il ne pose ni box-sizing, ni
   interlignage lisible. On complète ici, sans le modifier.
   -------------------------------------------------------------------------- */

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

html {
    -webkit-text-size-adjust: 100%;
    scroll-behavior: smooth;
    /* Le header collant ne doit pas recouvrir la cible d'une ancre. */
    scroll-padding-top: 6rem;
}

body {
    background: var(--iron-bg);
    color: var(--iron-ink);
    font-family: var(--iron-font-sans);
    font-size: var(--iron-t-md);
    line-height: var(--iron-lh-base);
    font-feature-settings: 'kern' 1, 'liga' 1;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    overflow-x: hidden;
    transition: background-color var(--iron-mid) var(--iron-ease),
                color var(--iron-mid) var(--iron-ease);
}

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

strong,
b {
    font-weight: 600;
    color: var(--iron-ink);
}

em,
i {
    font-style: italic;
}

a {
    color: inherit;
}

button {
    font: inherit;
    color: inherit;
    background: none;
    cursor: pointer;
}

::selection {
    background: var(--iron-accent);
    color: var(--iron-on-accent);
}

/* Un anneau de focus visible, dans la couleur d'accent, sur les deux thèmes.
   Il n'apparaît qu'au clavier : `:focus-visible`, jamais `:focus`. */
:focus-visible {
    outline: 2px solid var(--iron-accent);
    outline-offset: 3px;
    border-radius: var(--iron-r-sm);
}

/* Lien d'évitement : présent pour le clavier, invisible autrement. */
.skip-link {
    position: absolute;
    top: var(--iron-s-3);
    left: var(--iron-s-3);
    z-index: 200;
    padding: var(--iron-s-2) var(--iron-s-4);
    background: var(--iron-accent);
    color: var(--iron-on-accent);
    font-family: var(--iron-font-mono);
    font-size: var(--iron-t-sm);
    border-radius: var(--iron-r-sm);
    transform: translateY(-200%);
    transition: transform var(--iron-mid) var(--iron-snap);
}

.skip-link:focus-visible {
    transform: translateY(0);
}

/* --------------------------------------------------------------------------
   2. Mise en page
   -------------------------------------------------------------------------- */

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

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

/* Le filet qui sépare deux sections : c'est lui qui fait « plan technique ».
   Il s'arrête aux gouttières, il ne traverse jamais l'écran entier. */
.section--ruled::before {
    content: '';
    position: absolute;
    inset-inline: var(--iron-gutter);
    top: 0;
    height: var(--iron-hairline);
    background: var(--iron-line);
}

.section--tint {
    background: var(--iron-bg-alt);
}

.section__head {
    max-width: 46rem;
    margin-bottom: var(--iron-s-8);
}

/* Le rythme interne d'un chapeau de section est toujours le même : surtitre,
   titre, texte. Une règle ici évite d'écrire trois marges au cas par cas dans
   les gabarits. */
.section__head > * + * {
    margin-top: var(--iron-s-4);
}

.prose {
    max-width: var(--iron-prose);
}

/* --------------------------------------------------------------------------
   3. Typographie
   Fira Code partout où le texte est court et sert de repère. Fira Sans dès
   qu'il faut lire plus de deux lignes d'affilée.
   -------------------------------------------------------------------------- */

.eyebrow {
    display: inline-flex;
    align-items: center;
    gap: var(--iron-s-2);
    font-family: var(--iron-font-mono);
    font-size: var(--iron-t-xs);
    font-weight: 500;
    letter-spacing: var(--iron-ls-caps);
    text-transform: uppercase;
    color: var(--iron-ink-faint);
}

/* Le petit carré vert du surtitre : un pixel de couleur suffit à signaler
   qu'une section commence. */
.eyebrow::before {
    content: '';
    width: 7px;
    height: 7px;
    background: var(--iron-accent);
    flex: none;
}

.h1,
.h2,
.h3 {
    font-family: var(--iron-font-mono);
    font-weight: 600;
    line-height: var(--iron-lh-tight);
    letter-spacing: var(--iron-ls-head);
    color: var(--iron-ink);
    text-wrap: balance;
}

.h1 {
    font-size: var(--iron-t-hero);
    letter-spacing: var(--iron-ls-hero);
}

.h2 {
    font-size: var(--iron-t-3xl);
}

.h3 {
    font-size: var(--iron-t-xl);
    line-height: var(--iron-lh-snug);
}

.lead {
    font-size: var(--iron-t-lg);
    line-height: var(--iron-lh-loose);
    color: var(--iron-ink-soft);
    text-wrap: pretty;
}

.body {
    color: var(--iron-ink-soft);
    text-wrap: pretty;
}

.mono {
    font-family: var(--iron-font-mono);
}

/* Un lien de texte : le trait vert se dessine de la gauche vers la droite. */
.link {
    position: relative;
    color: var(--iron-ink);
    font-weight: 500;
    text-decoration: none;
}

.link::after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    bottom: -2px;
    height: 2px;
    background: var(--iron-accent);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform var(--iron-mid) var(--iron-snap);
}

.link:hover::after,
.link:focus-visible::after {
    transform: scaleX(1);
}

/* --------------------------------------------------------------------------
   4. Le motif de cadre
   Quatre équerres qui se posent dans les angles au survol. C'est la seule
   décoration du site, elle est réutilisée partout.
   -------------------------------------------------------------------------- */

.frame {
    position: relative;
    border: var(--iron-hairline) solid var(--iron-line);
    background: var(--iron-surface);
    transition: border-color var(--iron-mid) var(--iron-ease),
                transform var(--iron-mid) var(--iron-snap),
                box-shadow var(--iron-mid) var(--iron-ease);
}

.frame::before,
.frame::after {
    content: '';
    position: absolute;
    width: 9px;
    height: 9px;
    border: 2px solid var(--iron-accent);
    opacity: 0;
    transition: opacity var(--iron-fast) var(--iron-ease),
                translate var(--iron-mid) var(--iron-snap);
    pointer-events: none;
}

.frame::before {
    top: -1px;
    left: -1px;
    border-right: 0;
    border-bottom: 0;
    translate: 4px 4px;
}

.frame::after {
    bottom: -1px;
    right: -1px;
    border-left: 0;
    border-top: 0;
    translate: -4px -4px;
}

.frame:hover::before,
.frame:hover::after,
.frame:focus-within::before,
.frame:focus-within::after {
    opacity: 1;
    translate: 0 0;
}

.frame:hover {
    border-color: var(--iron-line-strong);
}

/* --------------------------------------------------------------------------
   5. Boutons
   -------------------------------------------------------------------------- */

.btn {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--iron-s-2);
    padding: 0.9rem 1.5rem;
    font-family: var(--iron-font-mono);
    font-size: var(--iron-t-sm);
    font-weight: 500;
    letter-spacing: 0.02em;
    border: var(--iron-hairline) solid transparent;
    border-radius: var(--iron-r-sm);
    text-decoration: none;
    white-space: nowrap;
    overflow: hidden;
    isolation: isolate;
    transition: transform var(--iron-fast) var(--iron-ease),
                background-color var(--iron-mid) var(--iron-ease),
                border-color var(--iron-mid) var(--iron-ease),
                color var(--iron-mid) var(--iron-ease),
                box-shadow var(--iron-mid) var(--iron-ease);
}

.btn:active {
    transform: translateY(1px);
}

/* Le halo qui suit le curseur. Les deux variables sont écrites par le JS ;
   sans JS elles valent 50%, le halo reste centré et discret. */
.btn::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: -1;
    background: radial-gradient(
        14rem circle at var(--iron-mx, 50%) var(--iron-my, 50%),
        rgba(255, 255, 255, 0.55),
        transparent 60%
    );
    opacity: 0;
    transition: opacity var(--iron-mid) var(--iron-ease);
}

.btn:hover::before {
    opacity: 1;
}

.btn--primary {
    background: var(--iron-accent);
    color: var(--iron-on-accent);
    font-weight: 600;
}

.btn--primary:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 24px -12px rgba(160, 200, 0, 0.9);
}

.btn--primary:active {
    transform: translateY(0);
}

.btn--ghost {
    background: transparent;
    color: var(--iron-ink);
    border-color: var(--iron-line-strong);
}

.btn--ghost:hover {
    border-color: var(--iron-ink);
    transform: translateY(-2px);
}

.btn--ghost::before {
    background: radial-gradient(
        14rem circle at var(--iron-mx, 50%) var(--iron-my, 50%),
        var(--iron-accent-wash),
        transparent 60%
    );
}

.btn--sm {
    padding: 0.55rem 1rem;
    font-size: var(--iron-t-xs);
}

/* --------------------------------------------------------------------------
   6. En-tête et navigation
   -------------------------------------------------------------------------- */

.site-header {
    position: sticky;
    top: 0;
    z-index: 100;
    background: color-mix(in srgb, var(--iron-bg) 82%, transparent);
    -webkit-backdrop-filter: saturate(180%) blur(12px);
    backdrop-filter: saturate(180%) blur(12px);
    border-bottom: var(--iron-hairline) solid transparent;
    transition: border-color var(--iron-mid) var(--iron-ease),
                background-color var(--iron-mid) var(--iron-ease);
}

/* La classe est posée par le JS dès que la page a défilé. Le filet n'apparaît
   qu'à ce moment : en haut de page, l'en-tête doit se fondre dans la bannière. */
.site-header.is-scrolled {
    border-bottom-color: var(--iron-line);
    background: color-mix(in srgb, var(--iron-bg) 94%, transparent);
}

.site-header__inner {
    display: flex;
    align-items: center;
    gap: var(--iron-s-5);
    min-height: 4.5rem;
}

.site-header__brand {
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
    font-family: var(--iron-font-mono);
    font-size: 1.0625rem;
    font-weight: 600;
    letter-spacing: -0.02em;
    color: var(--iron-ink);
    text-decoration: none;
    margin-right: auto;
}

.site-header__logo {
    max-height: 2rem;
    width: auto;
}

/* Le glyphe de marque : un cadre vide, que le survol remplit.

   Il diffère volontairement de la favicon, qui est pleine. Une favicon n'a pas
   de survol : elle doit être complète du premier coup d'œil. Ici, le cadre vide
   est une invitation — et il laisse au bouton d'action le monopole du vert dans
   la barre, qui n'a de la place que pour un seul point d'accroche. */
.brand-mark {
    width: 20px;
    height: 20px;
    flex: none;
    border: 2px solid var(--iron-ink);
    position: relative;
    transition: border-color var(--iron-mid) var(--iron-ease);
}

.brand-mark::after {
    content: '';
    position: absolute;
    inset: 3px;
    background: var(--iron-accent);
    scale: 0;
    transition: scale var(--iron-slow) var(--iron-snap);
}

.site-header__brand:hover .brand-mark::after {
    scale: 1;
}

.site-nav__list {
    display: flex;
    align-items: center;
    gap: var(--iron-s-5);
}

.site-nav__link {
    position: relative;
    font-family: var(--iron-font-mono);
    font-size: var(--iron-t-sm);
    color: var(--iron-ink-soft);
    text-decoration: none;
    padding-block: 0.4rem;
    transition: color var(--iron-fast) var(--iron-ease);
}

.site-nav__link::after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 2px;
    background: var(--iron-accent);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform var(--iron-mid) var(--iron-snap);
}

.site-nav__link:hover,
.site-nav__link[aria-current='page'] {
    color: var(--iron-ink);
}

.site-nav__link:hover::after,
.site-nav__link:focus-visible::after,
.site-nav__link[aria-current='page']::after {
    transform: scaleX(1);
}

.site-header__actions {
    display: flex;
    align-items: center;
    gap: var(--iron-s-3);
}

/* Le sélecteur de thème : deux glyphes empilés, l'un chasse l'autre. */
.theme-toggle {
    position: relative;
    width: 2.25rem;
    height: 2.25rem;
    flex: none;
    display: grid;
    place-items: center;
    border: var(--iron-hairline) solid var(--iron-line);
    border-radius: var(--iron-r-sm);
    color: var(--iron-ink-soft);
    overflow: hidden;
    transition: border-color var(--iron-mid) var(--iron-ease),
                color var(--iron-mid) var(--iron-ease);
}

.theme-toggle:hover {
    border-color: var(--iron-line-strong);
    color: var(--iron-ink);
}

.theme-toggle__icon {
    grid-area: 1 / 1;
    width: 16px;
    height: 16px;
    transition: opacity var(--iron-mid) var(--iron-ease),
                rotate var(--iron-slow) var(--iron-snap),
                scale var(--iron-mid) var(--iron-snap);
}

.theme-toggle__icon--sun {
    opacity: 0;
    rotate: -70deg;
    scale: 0.5;
}

:root[data-theme='dark'] .theme-toggle__icon--sun {
    opacity: 1;
    rotate: 0deg;
    scale: 1;
}

:root[data-theme='dark'] .theme-toggle__icon--moon {
    opacity: 0;
    rotate: 70deg;
    scale: 0.5;
}

@media (prefers-color-scheme: dark) {
    :root:not([data-theme='light']) .theme-toggle__icon--sun {
        opacity: 1;
        rotate: 0deg;
        scale: 1;
    }

    :root:not([data-theme='light']) .theme-toggle__icon--moon {
        opacity: 0;
        rotate: 70deg;
        scale: 0.5;
    }
}

/* Le bouton d'ouverture du menu n'existe qu'en petit écran. */
.nav-toggle {
    display: none;
    width: 2.25rem;
    height: 2.25rem;
    border: var(--iron-hairline) solid var(--iron-line);
    border-radius: var(--iron-r-sm);
    place-items: center;
}

/* --------------------------------------------------------------------------
   7. Bannière
   -------------------------------------------------------------------------- */

.hero {
    position: relative;
    padding-block: clamp(3.5rem, 2rem + 6vw, 7rem) var(--iron-section);
    overflow: hidden;
}

/* La trame de fond : un quadrillage d'un pixel, effacé sur les bords par un
   masque radial. Il se dessine à l'arrivée sur la page. */
.hero__grid {
    position: absolute;
    inset: -1px;
    z-index: 0;
    pointer-events: none;
    background-image:
        linear-gradient(to right, var(--iron-line) 1px, transparent 1px),
        linear-gradient(to bottom, var(--iron-line) 1px, transparent 1px);
    background-size: 72px 72px;
    -webkit-mask-image: radial-gradient(120% 85% at 50% 0%, #000 20%, transparent 72%);
    mask-image: radial-gradient(120% 85% at 50% 0%, #000 20%, transparent 72%);
    opacity: 0;
    scale: 1.06;
    animation: iron-grid-in 1400ms var(--iron-ease) 120ms forwards;
}

@keyframes iron-grid-in {
    to {
        opacity: 0.75;
        scale: 1;
    }
}

/* La bannière occupe toute la largeur, ferrée à gauche. Le drapeau à gauche
   donne l'axe vertical net qui fait tout l'esprit du thème : le texte, les
   boutons et les chiffres tombent tous sur la même verticale que le logo.

   `max-width` surclasse volontairement celui de `.wrap` — le titre est en
   chasse fixe, il a besoin d'une mesure plus courte pour ne pas se lire comme
   une ligne de terminal. */
.hero__inner {
    position: relative;
    z-index: 1;
    max-width: 56rem;
}

.hero__title {
    margin-top: var(--iron-s-5);
}

/* Le mot mis en avant dans le titre : un aplat vert derrière le texte, pas du
   texte vert. C'est la seule façon d'utiliser cette couleur en restant lisible
   sur fond clair. */
.hero__mark {
    position: relative;
    display: inline-block;
    padding-inline: 0.16em;
    color: var(--iron-on-accent);
}

.hero__mark::before {
    content: '';
    position: absolute;
    inset: 0.1em 0 0.06em;
    background: var(--iron-accent);
    z-index: -1;
    transform-origin: left;
    animation: iron-mark-in 620ms var(--iron-snap) 420ms both;
}

@keyframes iron-mark-in {
    from { transform: scaleX(0); }
    to   { transform: scaleX(1); }
}

.hero__text {
    margin-top: var(--iron-s-5);
    max-width: 40rem;
}

.hero__actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--iron-s-3);
    margin-top: var(--iron-s-6);
}

.hero__note {
    margin-top: var(--iron-s-4);
    font-family: var(--iron-font-mono);
    font-size: var(--iron-t-xs);
    color: var(--iron-ink-faint);
}

/* La rangée de faits : trois chiffres qui disent le produit plus vite qu'un
   paragraphe. */
.facts {
    display: flex;
    flex-wrap: wrap;
    gap: var(--iron-s-6) var(--iron-s-8);
    margin-top: var(--iron-s-7);
    padding-top: var(--iron-s-5);
    border-top: var(--iron-hairline) solid var(--iron-line);
}

.facts__value {
    display: block;
    font-family: var(--iron-font-mono);
    font-size: var(--iron-t-xl);
    font-weight: 600;
    letter-spacing: var(--iron-ls-head);
    color: var(--iron-ink);
}

.facts__label {
    display: block;
    margin-top: 0.15rem;
    font-family: var(--iron-font-mono);
    font-size: var(--iron-t-2xs);
    letter-spacing: var(--iron-ls-caps);
    text-transform: uppercase;
    color: var(--iron-ink-faint);
}

/* --------------------------------------------------------------------------
   8. Démonstration déclaration / administration
   Le visuel de la bannière montre le produit en une image : à gauche ce que le
   développeur écrit, à droite ce que le client voit. Survoler une ligne d'un
   côté éclaire son équivalent de l'autre.
   -------------------------------------------------------------------------- */

/* Deux colonnes de même hauteur, jamais empilées au-dessus de 60rem : c'est la
   comparaison d'un coup d'œil qui fait la démonstration. */
.demo {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--iron-s-5);
    align-items: stretch;
}

.demo__col {
    display: flex;
    flex-direction: column;

    /* Sans quoi le <pre> qui déborde élargit la colonne au lieu de défiler. */
    min-width: 0;
}

.demo__col-label {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: var(--iron-s-2);
    margin-bottom: var(--iron-s-3);
    padding-bottom: var(--iron-s-2);
    border-bottom: var(--iron-hairline) solid var(--iron-line);
}

.demo__col-who {
    display: inline-flex;
    align-items: center;
    gap: var(--iron-s-2);
    font-family: var(--iron-font-mono);
    font-size: var(--iron-t-sm);
    font-weight: 600;
    letter-spacing: var(--iron-ls-head);
    color: var(--iron-ink);
}

.demo__col-who::before {
    content: '';
    width: 7px;
    height: 7px;
    flex: none;
    background: var(--iron-accent);
}

.demo__col-what {
    font-family: var(--iron-font-mono);
    font-size: var(--iron-t-2xs);
    letter-spacing: var(--iron-ls-caps);
    text-transform: uppercase;
    color: var(--iron-ink-faint);
}

.demo__pane {
    flex: 1;
    display: flex;
    flex-direction: column;
    border: var(--iron-hairline) solid var(--iron-line);
    border-radius: var(--iron-r-md);
    background: var(--iron-surface);
    box-shadow: var(--iron-shadow);
    overflow: hidden;
}

/* Le formulaire est bien plus court que le code : on le centre verticalement
   plutôt que de le laisser flotter en haut d'un panneau à moitié vide. */
.demo__hint {
    margin-top: var(--iron-s-4);
    text-align: center;
    font-family: var(--iron-font-mono);
    font-size: var(--iron-t-xs);
    color: var(--iron-ink-faint);
}

/* L'indication ne concerne que le survol : au doigt, elle est un mensonge. */
@media (hover: none) {
    .demo__hint {
        display: none;
    }
}

.demo__pane--code {
    background: var(--iron-code-bg);
    border-color: color-mix(in srgb, var(--iron-code-bg) 70%, #fff);
}

.demo__bar {
    display: flex;
    align-items: center;
    gap: var(--iron-s-2);
    padding: 0.55rem 0.85rem;
    font-family: var(--iron-font-mono);
    font-size: var(--iron-t-2xs);
    letter-spacing: 0.04em;
    border-bottom: var(--iron-hairline) solid var(--iron-line);
}

.demo__pane--code .demo__bar {
    color: rgba(228, 229, 223, 0.55);
    border-bottom-color: rgba(228, 229, 223, 0.12);
}

.demo__file {
    margin-right: auto;
}

.demo__copy {
    font-family: var(--iron-font-mono);
    font-size: var(--iron-t-2xs);
    letter-spacing: 0.04em;
    color: inherit;
    padding: 0.2rem 0.45rem;
    border: var(--iron-hairline) solid currentColor;
    border-radius: var(--iron-r-sm);
    opacity: 0.6;
    transition: opacity var(--iron-fast) var(--iron-ease),
                color var(--iron-fast) var(--iron-ease),
                border-color var(--iron-fast) var(--iron-ease);
}

.demo__copy:hover {
    opacity: 1;
}

.demo__copy.is-done {
    opacity: 1;
    color: var(--iron-accent);
    border-color: var(--iron-accent);
}

.demo__code {
    flex: 1;
    margin: 0;
    padding: var(--iron-s-4) 0;
    font-family: var(--iron-font-mono);
    font-size: var(--iron-t-sm);
    line-height: 1.75;
    color: var(--iron-code-ink);
    overflow-x: auto;
    tab-size: 4;
}

.demo__line {
    display: block;
    padding-inline: var(--iron-s-4);
    border-left: 2px solid transparent;
    transition: background-color var(--iron-fast) var(--iron-ease),
                border-color var(--iron-fast) var(--iron-ease);
}

/* L'état d'appairage, posé par le JS des deux côtés à la fois. */
.demo__line.is-linked {
    background: rgba(213, 255, 0, 0.1);
    border-left-color: var(--iron-accent);
}

.demo__line[data-demo-key] {
    cursor: default;
}

/* Coloration syntaxique minimale : trois teintes, pas douze. */
.tok-key { color: #D5FF00; }
.tok-str { color: #9FD5A0; }
.tok-dim { color: rgba(228, 229, 223, 0.42); }

.demo__admin {
    flex: 1;
    padding: var(--iron-s-5);
    display: grid;
    align-content: center;
    gap: var(--iron-s-4);
}

.demo__field {
    display: grid;
    gap: 0.3rem;
    padding: 0.5rem;
    margin: -0.5rem;
    border-radius: var(--iron-r-sm);
    transition: background-color var(--iron-fast) var(--iron-ease);
}

.demo__field.is-linked {
    background: var(--iron-accent-wash);
}

.demo__label {
    font-family: var(--iron-font-mono);
    font-size: var(--iron-t-2xs);
    letter-spacing: 0.04em;
    color: var(--iron-ink-soft);
}

.demo__label .req {
    color: var(--iron-accent-deep);
}

.demo__input {
    height: 2.1rem;
    display: flex;
    align-items: center;
    padding-inline: 0.6rem;
    font-size: var(--iron-t-sm);
    color: var(--iron-ink-faint);
    background: var(--iron-bg);
    border: var(--iron-hairline) solid var(--iron-line);
    border-radius: var(--iron-r-sm);
}

.demo__input--tall {
    height: 3.6rem;
    align-items: flex-start;
    padding-top: 0.5rem;
    line-height: 1.4;
}

.demo__caret {
    display: inline-block;
    width: 1px;
    height: 1em;
    margin-left: 1px;
    background: var(--iron-ink);
    animation: iron-caret 1.1s steps(1) infinite;
}

@keyframes iron-caret {
    50% { opacity: 0; }
}

/* --------------------------------------------------------------------------
   9. Bande « structure et contenu »
   -------------------------------------------------------------------------- */

.split__title {
    max-width: 34rem;
}

.split__grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    margin-top: var(--iron-s-8);
    border: var(--iron-hairline) solid var(--iron-line);
    border-radius: var(--iron-r-md);
    overflow: hidden;
    background: var(--iron-surface);
}

.split__col {
    padding: clamp(1.75rem, 1rem + 2vw, 2.75rem);
    position: relative;
}

.split__col + .split__col {
    border-left: var(--iron-hairline) solid var(--iron-line);
}

/* Une barre verte se déploie en haut de la colonne survolée. */
.split__col::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: var(--iron-accent);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform var(--iron-slow) var(--iron-snap);
}

.split__col:hover::before {
    transform: scaleX(1);
}

.split__role {
    font-family: var(--iron-font-mono);
    font-size: var(--iron-t-2xs);
    letter-spacing: var(--iron-ls-caps);
    text-transform: uppercase;
    color: var(--iron-ink-faint);
}

.split__what {
    margin-top: var(--iron-s-2);
    font-family: var(--iron-font-mono);
    font-size: var(--iron-t-2xl);
    font-weight: 600;
    letter-spacing: var(--iron-ls-head);
    line-height: var(--iron-lh-snug);
}

.split__text {
    margin-top: var(--iron-s-3);
    color: var(--iron-ink-soft);
    font-size: var(--iron-t-base);
}

.split__list {
    margin-top: var(--iron-s-5);
    display: grid;
    gap: var(--iron-s-2);
}

.split__item {
    display: flex;
    align-items: baseline;
    gap: var(--iron-s-3);
    font-family: var(--iron-font-mono);
    font-size: var(--iron-t-sm);
    color: var(--iron-ink-soft);
    padding-block: 0.3rem;
    border-top: var(--iron-hairline) solid var(--iron-line);
}

.split__item::before {
    content: '';
    flex: none;
    width: 5px;
    height: 5px;
    background: var(--iron-line-strong);
    transition: background-color var(--iron-mid) var(--iron-ease);
}

.split__col:hover .split__item::before {
    background: var(--iron-accent);
}

/* --------------------------------------------------------------------------
   10. Arguments
   -------------------------------------------------------------------------- */

.args__grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr));
    gap: var(--iron-s-4);
}

.arg {
    padding: var(--iron-s-6) var(--iron-s-5) var(--iron-s-5);
    border-radius: var(--iron-r-md);
}

.arg:hover {
    transform: translateY(-3px);
    box-shadow: var(--iron-shadow-lift);
}

.arg__index {
    font-family: var(--iron-font-mono);
    font-size: var(--iron-t-2xs);
    letter-spacing: var(--iron-ls-caps);
    color: var(--iron-ink-faint);
    transition: color var(--iron-mid) var(--iron-ease);
}

.arg:hover .arg__index {
    color: var(--iron-accent-deep);
}

.arg__title {
    margin-top: var(--iron-s-3);
    font-family: var(--iron-font-mono);
    font-size: var(--iron-t-lg);
    font-weight: 600;
    letter-spacing: var(--iron-ls-head);
}

.arg__text {
    margin-top: var(--iron-s-2);
    font-size: var(--iron-t-base);
    color: var(--iron-ink-soft);
}

/* --------------------------------------------------------------------------
   11. Extrait du manifeste
   -------------------------------------------------------------------------- */

.manifest__grid {
    display: grid;
    grid-template-columns: minmax(0, 0.85fr) minmax(0, 1fr);
    gap: clamp(2rem, 1rem + 4vw, 5rem);
    align-items: start;
}

.manifest__quote {
    font-family: var(--iron-font-mono);
    font-size: var(--iron-t-2xl);
    font-weight: 500;
    line-height: 1.35;
    letter-spacing: var(--iron-ls-head);
    text-wrap: balance;
    padding-left: var(--iron-s-5);
    border-left: 3px solid var(--iron-accent);
}

.manifest__list {
    display: grid;
}

/* Chaque principe est une ligne d'un tableau : filet au-dessus, décalage vers
   la droite au survol. Sobre, et ça bouge quand même. */
.manifest__item {
    padding-block: var(--iron-s-4);
    border-top: var(--iron-hairline) solid var(--iron-line);
    transition: padding-left var(--iron-mid) var(--iron-snap);
}

.manifest__item:last-child {
    border-bottom: var(--iron-hairline) solid var(--iron-line);
}

.manifest__item:hover {
    padding-left: var(--iron-s-3);
}

.manifest__item-title {
    font-family: var(--iron-font-mono);
    font-size: var(--iron-t-base);
    font-weight: 600;
    letter-spacing: var(--iron-ls-head);
}

.manifest__item-text {
    margin-top: var(--iron-s-1);
    font-size: var(--iron-t-base);
    color: var(--iron-ink-soft);
}

/* La contrepartie assumée : la nommer est ce qui distingue le manifeste d'une
   plaquette. Elle mérite donc son propre traitement. */
.manifest__cost {
    display: block;
    margin-top: var(--iron-s-2);
    font-family: var(--iron-font-mono);
    font-size: var(--iron-t-xs);
    color: var(--iron-ink-faint);
}

.manifest__cost::before {
    content: '— ';
}

.manifest__eyebrow {
    margin-bottom: var(--iron-s-5);
}

.manifest__more {
    margin-top: var(--iron-s-6);
}

/* --------------------------------------------------------------------------
   12. Témoignage
   -------------------------------------------------------------------------- */

.quote {
    max-width: 52rem;
    margin-inline: auto;
    text-align: center;
}

.quote__mark {
    font-family: var(--iron-font-mono);
    font-size: 3rem;
    line-height: 1;
    color: var(--iron-accent);
    user-select: none;
}

.quote__text {
    margin-top: var(--iron-s-4);
    font-size: clamp(1.15rem, 0.95rem + 1vw, 1.6rem);
    line-height: 1.55;
    color: var(--iron-ink);
    text-wrap: pretty;
}

.quote__author {
    display: inline-flex;
    align-items: center;
    gap: var(--iron-s-3);
    margin-top: var(--iron-s-6);
    padding-top: var(--iron-s-4);
    border-top: var(--iron-hairline) solid var(--iron-line);
}

.quote__avatar {
    width: 2.5rem;
    height: 2.5rem;
    border-radius: 50%;
    object-fit: cover;
}

.quote__name {
    font-family: var(--iron-font-mono);
    font-size: var(--iron-t-sm);
    font-weight: 600;
    text-align: left;
}

.quote__role {
    display: block;
    font-weight: 400;
    color: var(--iron-ink-faint);
}

/* --------------------------------------------------------------------------
   13. Appel final
   -------------------------------------------------------------------------- */

.cta {
    position: relative;
    text-align: center;
    padding: clamp(3rem, 2rem + 4vw, 5.5rem) var(--iron-gutter);
    border: var(--iron-hairline) solid var(--iron-line);
    border-radius: var(--iron-r-lg);
    background: var(--iron-surface);
    overflow: hidden;
}

.cta::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image:
        linear-gradient(to right, var(--iron-line) 1px, transparent 1px),
        linear-gradient(to bottom, var(--iron-line) 1px, transparent 1px);
    background-size: 48px 48px;
    -webkit-mask-image: radial-gradient(70% 120% at 50% 100%, #000, transparent 70%);
    mask-image: radial-gradient(70% 120% at 50% 100%, #000, transparent 70%);
    opacity: 0.6;
    pointer-events: none;
}

.cta > * {
    position: relative;
}

.cta__text {
    margin-top: var(--iron-s-4);
    margin-inline: auto;
    max-width: 34rem;
}

.cta__actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: var(--iron-s-3);
    margin-top: var(--iron-s-6);
}

.cta__note {
    margin-top: var(--iron-s-4);
    font-family: var(--iron-font-mono);
    font-size: var(--iron-t-xs);
    color: var(--iron-ink-faint);
}

/* --------------------------------------------------------------------------
   14. Pied de page
   -------------------------------------------------------------------------- */

.site-footer {
    border-top: var(--iron-hairline) solid var(--iron-line);
    padding-block: var(--iron-s-8) var(--iron-s-6);
    font-size: var(--iron-t-base);
}

.site-footer__inner {
    display: grid;
    grid-template-columns: minmax(0, 1.4fr) repeat(2, minmax(0, 1fr));
    gap: var(--iron-s-6);
}

.site-footer__pitch {
    max-width: 24rem;
    margin-top: var(--iron-s-3);
    font-size: var(--iron-t-base);
    color: var(--iron-ink-soft);
}

.site-footer__heading {
    font-family: var(--iron-font-mono);
    font-size: var(--iron-t-2xs);
    letter-spacing: var(--iron-ls-caps);
    text-transform: uppercase;
    color: var(--iron-ink-faint);
    margin-bottom: var(--iron-s-3);
}

.site-footer__list {
    display: grid;
    gap: var(--iron-s-2);
}

.site-footer__link {
    font-family: var(--iron-font-mono);
    font-size: var(--iron-t-sm);
    color: var(--iron-ink-soft);
    text-decoration: none;
    transition: color var(--iron-fast) var(--iron-ease),
                translate var(--iron-mid) var(--iron-snap);
    display: inline-block;
}

.site-footer__link:hover {
    color: var(--iron-ink);
    translate: 3px 0;
}

.site-footer__bottom {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--iron-s-4);
    margin-top: var(--iron-s-8);
    padding-top: var(--iron-s-4);
    border-top: var(--iron-hairline) solid var(--iron-line);
    font-family: var(--iron-font-mono);
    font-size: var(--iron-t-xs);
    color: var(--iron-ink-faint);
}

.site-footer__contact p + p {
    margin-top: 0.2rem;
}

/* --------------------------------------------------------------------------
   15. Page Manifeste
   -------------------------------------------------------------------------- */

/* Bannière d'une page intérieure : même trame, moitié moins haute. Un manifeste
   qui commence par un écran vide se referme avant d'être lu. */
.hero--page {
    padding-block: clamp(3rem, 2rem + 4vw, 5rem) clamp(2.5rem, 1.5rem + 3vw, 4rem);
}

/* --- Prose longue ----------------------------------------------------- */

/* Fira Sans, mesure courte, interlignage large : les trois seules choses qui
   décident si 3 000 mots se lisent ou se survolent. */
.prose {
    max-width: var(--iron-prose);
    color: var(--iron-ink-soft);
}

.prose p {
    text-wrap: pretty;
}

.prose p + p {
    margin-top: 1.15em;
}

.prose--lead {
    max-width: 44rem;
    font-size: var(--iron-t-lg);
    line-height: var(--iron-lh-loose);
}

/* --- Axiomes ---------------------------------------------------------- */

/* Une fiche technique, pas une liste à puces. Index à gauche, énoncé au
   centre, glose à droite — trois colonnes qui tombent sur la même grille. */
.axioms {
    border-top: var(--iron-hairline) solid var(--iron-line);
}

.axiom {
    position: relative;
    display: grid;
    grid-template-columns: 3.5rem minmax(0, 24rem) minmax(0, 1fr);
    gap: var(--iron-s-4);
    align-items: baseline;
    padding: var(--iron-s-5) 0;
    border-bottom: var(--iron-hairline) solid var(--iron-line);
    transition: padding-left var(--iron-mid) var(--iron-snap);
}

/* Le filet vert se déploie de haut en bas sur la ligne survolée. */
.axiom::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 2px;
    background: var(--iron-accent);
    transform: scaleY(0);
    transform-origin: top;
    transition: transform var(--iron-mid) var(--iron-snap);
}

.axiom:hover {
    padding-left: var(--iron-s-4);
}

.axiom:hover::before {
    transform: scaleY(1);
}

.axiom__index {
    font-family: var(--iron-font-mono);
    font-size: var(--iron-t-2xs);
    letter-spacing: var(--iron-ls-caps);
    color: var(--iron-ink-faint);
    transition: color var(--iron-mid) var(--iron-ease);
}

.axiom:hover .axiom__index {
    color: var(--iron-accent-deep);
}

.axiom__text {
    font-family: var(--iron-font-mono);
    font-size: var(--iron-t-lg);
    font-weight: 600;
    line-height: var(--iron-lh-snug);
    letter-spacing: var(--iron-ls-head);
    color: var(--iron-ink);
    text-wrap: balance;
}

.axiom__gloss {
    font-size: var(--iron-t-base);
    color: var(--iron-ink-soft);
    text-wrap: pretty;
}

/* --- Principes développés ---------------------------------------------- */

.principles {
    border-top: var(--iron-hairline) solid var(--iron-line);
}

.principle {
    display: grid;
    grid-template-columns: 4.5rem minmax(0, 1fr);
    gap: var(--iron-s-4);
    padding-block: var(--iron-s-7);
    border-bottom: var(--iron-hairline) solid var(--iron-line);
}

/* L'index reste en vue pendant qu'on lit le développement : sur une page
   longue, c'est le seul repère qui dit où l'on en est. */
.principle__aside {
    position: sticky;
    top: 6.5rem;
    align-self: start;
}

.principle__index {
    font-family: var(--iron-font-mono);
    font-size: var(--iron-t-2xs);
    letter-spacing: var(--iron-ls-caps);
    color: var(--iron-ink-faint);
}

.principle__title {
    max-width: 34rem;
}

.principle__text {
    margin-top: var(--iron-s-4);
}

/* La contrepartie est encadrée : c'est la partie que personne ne lit dans une
   plaquette, donc celle qu'il faut rendre impossible à sauter. */
.principle__cost {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: var(--iron-s-2) var(--iron-s-4);
    max-width: var(--iron-prose);
    margin-top: var(--iron-s-5);
    padding: var(--iron-s-3) var(--iron-s-4);
    background: var(--iron-accent-wash);
    border-left: 3px solid var(--iron-accent);
    border-radius: 0 var(--iron-r-sm) var(--iron-r-sm) 0;
}

.principle__cost-label {
    font-family: var(--iron-font-mono);
    font-size: var(--iron-t-2xs);
    letter-spacing: var(--iron-ls-caps);
    text-transform: uppercase;
    color: var(--iron-ink-faint);
    flex: none;
}

.principle__cost-text {
    font-family: var(--iron-font-mono);
    font-size: var(--iron-t-sm);
    color: var(--iron-ink);
}

/* --- Ce que le produit n'est pas ---------------------------------------- */

.refus {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr));
    gap: var(--iron-s-4);
}

.refu {
    padding: var(--iron-s-6) var(--iron-s-5) var(--iron-s-5);
    border-radius: var(--iron-r-md);
}

.refu:hover {
    transform: translateY(-3px);
    box-shadow: var(--iron-shadow-lift);
}

/* Une croix dessinée à la main : deux filets, aucun fichier à charger. */
.refu__cross {
    position: relative;
    display: block;
    width: 14px;
    height: 14px;
}

.refu__cross::before,
.refu__cross::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 0;
    width: 100%;
    height: 2px;
    background: var(--iron-ink-faint);
    transition: background-color var(--iron-mid) var(--iron-ease),
                rotate var(--iron-slow) var(--iron-snap);
}

.refu__cross::before {
    rotate: 45deg;
}

.refu__cross::after {
    rotate: -45deg;
}

.refu:hover .refu__cross::before {
    background: var(--iron-accent-deep);
    rotate: 135deg;
}

.refu:hover .refu__cross::after {
    background: var(--iron-accent-deep);
    rotate: 45deg;
}

.refu__title {
    margin-top: var(--iron-s-4);
    font-family: var(--iron-font-mono);
    font-size: var(--iron-t-lg);
    font-weight: 600;
    letter-spacing: var(--iron-ls-head);
}

.refu__text {
    margin-top: var(--iron-s-2);
    font-size: var(--iron-t-base);
    color: var(--iron-ink-soft);
}

/* --------------------------------------------------------------------------
   16. Documentation
   -------------------------------------------------------------------------- */

.doc {
    display: grid;
    grid-template-columns: 16rem minmax(0, 1fr);
    gap: clamp(2rem, 1rem + 4vw, 5rem);
    align-items: start;
    padding-block: var(--iron-s-8) var(--iron-s-9);
}

/* --- Sommaire ---------------------------------------------------------- */

/* Collé sous l'en-tête, il défile seul quand la liste dépasse la fenêtre.
   Sans `overflow-y`, les derniers chapitres deviendraient inatteignables. */
.doc-nav {
    position: sticky;
    top: 5.5rem;
    max-height: calc(100vh - 7rem);
    overflow-y: auto;
    padding-right: var(--iron-s-3);
    border-right: var(--iron-hairline) solid var(--iron-line);
}

.doc-nav__toggle {
    display: none;
    width: 100%;
}

.doc-nav__section {
    display: flex;
    align-items: baseline;
    gap: var(--iron-s-2);
    margin-top: var(--iron-s-5);
    margin-bottom: var(--iron-s-2);
    font-family: var(--iron-font-mono);
    font-size: var(--iron-t-2xs);
    letter-spacing: var(--iron-ls-caps);
    text-transform: uppercase;
    color: var(--iron-ink-faint);
}

/* Le numéro de section : le seul endroit vert du sommaire avec le chapitre
   courant. Il donne au plan son air de table des matières technique. */
.doc-nav__num {
    color: var(--iron-accent-deep);
    font-weight: 600;
}

.doc-nav__section:first-child {
    margin-top: 0;
}

.doc-nav__link {
    position: relative;
    display: block;
    padding: 0.4rem 0 0.4rem var(--iron-s-3);
    font-family: var(--iron-font-mono);
    font-size: var(--iron-t-sm);
    line-height: 1.4;
    color: var(--iron-ink-soft);
    text-decoration: none;
    border-left: 2px solid transparent;
    transition: color var(--iron-fast) var(--iron-ease),
                border-color var(--iron-fast) var(--iron-ease),
                padding-left var(--iron-mid) var(--iron-snap);
}

.doc-nav__link:hover {
    color: var(--iron-ink);
    padding-left: var(--iron-s-4);
    border-left-color: var(--iron-line-strong);
}

.doc-nav__link.is-current {
    color: var(--iron-ink);
    font-weight: 600;
    border-left-color: var(--iron-accent);
}

/* --- Corps du chapitre -------------------------------------------------- */

.doc__body {
    max-width: 46rem;
    min-width: 0;
}

.doc-head {
    padding-bottom: var(--iron-s-5);
    margin-bottom: var(--iron-s-6);
    border-bottom: var(--iron-hairline) solid var(--iron-line);
}

.doc-head__title {
    margin-top: var(--iron-s-3);
    font-family: var(--iron-font-mono);
    font-size: var(--iron-t-3xl);
    font-weight: 600;
    line-height: var(--iron-lh-tight);
    letter-spacing: var(--iron-ls-head);
    text-wrap: balance;
}

.doc-head__lead {
    margin-top: var(--iron-s-4);
    font-size: var(--iron-t-lg);
    line-height: var(--iron-lh-loose);
    color: var(--iron-ink-soft);
    text-wrap: pretty;
}

.doc__body h2 {
    margin-top: var(--iron-s-8);
    padding-top: var(--iron-s-5);
    border-top: var(--iron-hairline) solid var(--iron-line);
    font-family: var(--iron-font-mono);
    font-size: var(--iron-t-xl);
    font-weight: 600;
    line-height: var(--iron-lh-snug);
    letter-spacing: var(--iron-ls-head);
    color: var(--iron-ink);
    scroll-margin-top: 6rem;
}

/* Le chapeau pose déjà un filet : celui du premier titre ferait double emploi,
   deux traits séparés par un blanc. */
.doc-head + h2 {
    margin-top: 0;
    padding-top: 0;
    border-top: 0;
}

.doc-head + .doc-table {
    margin-top: 0;
}

.doc__body h3 {
    margin-top: var(--iron-s-6);
    font-family: var(--iron-font-mono);
    font-size: var(--iron-t-base);
    font-weight: 600;
    letter-spacing: var(--iron-ls-head);
    color: var(--iron-ink);
    scroll-margin-top: 6rem;
}

.doc__body p {
    margin-top: var(--iron-s-4);
    color: var(--iron-ink-soft);
    text-wrap: pretty;
}

.doc__body ul,
.doc__body ol {
    margin-top: var(--iron-s-4);
    display: grid;
    gap: var(--iron-s-2);
}

.doc__body li {
    position: relative;
    padding-left: var(--iron-s-5);
    color: var(--iron-ink-soft);
}

.doc__body li::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0.62em;
    width: 5px;
    height: 5px;
    background: var(--iron-line-strong);
}

.doc__body ol {
    counter-reset: doc-step;
}

.doc__body ol li::before {
    counter-increment: doc-step;
    content: counter(doc-step, decimal-leading-zero);
    top: 0;
    width: auto;
    height: auto;
    background: none;
    font-family: var(--iron-font-mono);
    font-size: var(--iron-t-2xs);
    color: var(--iron-accent-deep);
}

.doc__body a:not(.btn):not(.doc-pager__link) {
    color: var(--iron-ink);
    font-weight: 500;
    text-decoration: underline;
    text-decoration-color: var(--iron-accent-deep);
    text-decoration-thickness: 2px;
    text-underline-offset: 3px;
    transition: background-color var(--iron-fast) var(--iron-ease);
}

.doc__body a:not(.btn):not(.doc-pager__link):hover {
    background: var(--iron-accent-wash);
}

/* Code au fil du texte : encadré, jamais coloré. Le vert est réservé à ce
   sur quoi on veut que l'œil s'arrête, et un nom de fonction dans un
   paragraphe n'en fait pas partie. */
.doc__body :not(pre) > code {
    font-family: var(--iron-font-mono);
    font-size: 0.875em;
    padding: 0.12em 0.35em;
    background: var(--iron-surface-alt);
    border: var(--iron-hairline) solid var(--iron-line);
    border-radius: var(--iron-r-sm);
    color: var(--iron-ink);
    word-break: break-word;
}

/* --- Blocs de code ------------------------------------------------------ */

.code {
    margin-top: var(--iron-s-5);
    background: var(--iron-code-bg);
    border: var(--iron-hairline) solid color-mix(in srgb, var(--iron-code-bg) 76%, #fff);
    border-radius: var(--iron-r-md);
    overflow: hidden;
}

.code__bar {
    padding: 0.5rem 0.85rem;
    font-family: var(--iron-font-mono);
    font-size: var(--iron-t-2xs);
    letter-spacing: 0.04em;
    color: rgba(228, 229, 223, 0.55);
    border-bottom: var(--iron-hairline) solid rgba(228, 229, 223, 0.12);
}

.code__pre {
    margin: 0;
    padding: var(--iron-s-4);
    overflow-x: auto;
    font-family: var(--iron-font-mono);
    font-size: var(--iron-t-sm);
    line-height: 1.7;
    color: var(--iron-code-ink);
    tab-size: 4;
}

.tok-com { color: rgba(228, 229, 223, 0.38); font-style: italic; }
.tok-var { color: #9BC7E4; }

/* --- Encadrés ----------------------------------------------------------- */

.callout {
    margin-top: var(--iron-s-5);
    padding: var(--iron-s-4) var(--iron-s-5);
    background: var(--iron-surface);
    border: var(--iron-hairline) solid var(--iron-line);
    border-left: 3px solid var(--iron-line-strong);
    border-radius: 0 var(--iron-r-md) var(--iron-r-md) 0;
}

.callout__label {
    margin: 0 0 var(--iron-s-2);
    font-family: var(--iron-font-mono);
    font-size: var(--iron-t-2xs);
    letter-spacing: var(--iron-ls-caps);
    text-transform: uppercase;
    color: var(--iron-ink-faint);
}

.callout__body > :first-child {
    margin-top: 0;
}

.callout--warn {
    border-left-color: var(--iron-warn);
    background: var(--iron-warn-wash);
}

.callout--warn .callout__label {
    color: var(--iron-warn);
}

.callout--sure {
    border-left-color: var(--iron-accent);
    background: var(--iron-accent-wash);
}

.callout--sure .callout__label {
    color: var(--iron-accent-deep);
}

/* --- Tableaux ----------------------------------------------------------- */

/* Le conteneur défile, jamais la page : un tableau à quatre colonnes sur un
   téléphone ne doit pas élargir le document entier. */
.doc-table {
    margin-top: var(--iron-s-5);
    overflow-x: auto;
    border: var(--iron-hairline) solid var(--iron-line);
    border-radius: var(--iron-r-md);
}

.doc-table table {
    width: 100%;
    min-width: 32rem;
    border-collapse: collapse;
}

.doc-table th,
.doc-table td {
    padding: var(--iron-s-3) var(--iron-s-4);
    text-align: left;
    vertical-align: top;
    border-bottom: var(--iron-hairline) solid var(--iron-line);
    font-size: var(--iron-t-base);
    color: var(--iron-ink-soft);
}

.doc-table th {
    font-family: var(--iron-font-mono);
    font-size: var(--iron-t-2xs);
    letter-spacing: var(--iron-ls-caps);
    text-transform: uppercase;
    color: var(--iron-ink-faint);
    background: var(--iron-surface-alt);
    white-space: nowrap;
}

.doc-table tr:last-child td {
    border-bottom: 0;
}

.doc-table code {
    white-space: nowrap;
}

/* --- Précédent / suivant ------------------------------------------------ */

.doc-pager {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--iron-s-4);
    margin-top: var(--iron-s-9);
    padding-top: var(--iron-s-5);
    border-top: var(--iron-hairline) solid var(--iron-line);
}

.doc-pager__link {
    display: grid;
    gap: 0.2rem;
    padding: var(--iron-s-4);
    border: var(--iron-hairline) solid var(--iron-line);
    border-radius: var(--iron-r-md);
    text-decoration: none;
    transition: border-color var(--iron-mid) var(--iron-ease),
                transform var(--iron-mid) var(--iron-snap);
}

.doc-pager__link:hover {
    border-color: var(--iron-line-strong);
}

.doc-pager__link--prev:hover {
    transform: translateX(-3px);
}

.doc-pager__link--next {
    text-align: right;
}

.doc-pager__link--next:hover {
    transform: translateX(3px);
}

.doc-pager__label {
    font-family: var(--iron-font-mono);
    font-size: var(--iron-t-2xs);
    letter-spacing: var(--iron-ls-caps);
    text-transform: uppercase;
    color: var(--iron-ink-faint);
}

.doc-pager__title {
    font-family: var(--iron-font-mono);
    font-size: var(--iron-t-sm);
    font-weight: 600;
    color: var(--iron-ink);
}

/* --------------------------------------------------------------------------
   17. Page Contact

   Le formulaire vient d'une extension : son markup ne nous appartient pas et
   peut changer. Tout ce qui suit vise donc des **éléments** de formulaire à
   l'intérieur d'un conteneur, jamais les classes d'une extension précise. On
   peut passer de l'une à l'autre sans rouvrir ce fichier.
   -------------------------------------------------------------------------- */

.contact {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 20rem;
    gap: clamp(2rem, 1rem + 4vw, 4.5rem);
    align-items: start;
}

.contact__main {
    max-width: 38rem;
}

.contact__text {
    margin-top: var(--iron-s-3);
    color: var(--iron-ink-soft);
}

.contact__rgpd {
    margin-top: var(--iron-s-5);
    padding-top: var(--iron-s-4);
    border-top: var(--iron-hairline) solid var(--iron-line);
    font-size: var(--iron-t-base);
    color: var(--iron-ink-faint);
    text-wrap: pretty;
}

/* --- Le formulaire de l'extension --------------------------------------- */

.contact-form {
    margin-top: var(--iron-s-5);
    display: grid;
    gap: var(--iron-s-4);
}

.contact-form label {
    display: block;
    font-family: var(--iron-font-mono);
    font-size: var(--iron-t-xs);
    letter-spacing: 0.04em;
    color: var(--iron-ink);
}

.contact-form input[type='text'],
.contact-form input[type='email'],
.contact-form input[type='tel'],
.contact-form input[type='url'],
.contact-form input[type='number'],
.contact-form input[type='date'],
.contact-form textarea,
.contact-form select {
    width: 100%;
    margin-top: var(--iron-s-2);
    padding: 0.7rem 0.85rem;
    font-family: var(--iron-font-sans);
    font-size: var(--iron-t-base);
    color: var(--iron-ink);
    background: var(--iron-surface);
    border: var(--iron-hairline) solid var(--iron-line);
    border-radius: var(--iron-r-sm);
    transition: border-color var(--iron-fast) var(--iron-ease),
                box-shadow var(--iron-fast) var(--iron-ease);
}

.contact-form textarea {
    min-height: 9rem;
    resize: vertical;
    line-height: var(--iron-lh-base);
}

.contact-form :is(input, textarea, select):hover {
    border-color: var(--iron-line-strong);
}

/* Le halo vert sur le champ actif : c'est le seul endroit de la page où l'œil
   doit se poser. */
.contact-form :is(input, textarea, select):focus {
    outline: none;
    border-color: var(--iron-accent-deep);
    box-shadow: 0 0 0 3px var(--iron-accent-wash);
}

.contact-form input[type='submit'],
.contact-form button[type='submit'] {
    justify-self: start;
    padding: 0.9rem 1.6rem;
    font-family: var(--iron-font-mono);
    font-size: var(--iron-t-sm);
    font-weight: 600;
    color: var(--iron-on-accent);
    background: var(--iron-accent);
    border: 0;
    border-radius: var(--iron-r-sm);
    cursor: pointer;
    transition: transform var(--iron-fast) var(--iron-ease),
                box-shadow var(--iron-mid) var(--iron-ease);
}

.contact-form input[type='submit']:hover,
.contact-form button[type='submit']:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 24px -12px rgba(160, 200, 0, 0.9);
}

/* Messages de validation et d'envoi. Ces trois classes-là sont propres à
   Contact Form 7 : si elles sont absentes, rien ne casse — c'est la seule
   entorse à la règle du dessus, et elle est sans conséquence. */
.contact-form .wpcf7-not-valid-tip {
    margin-top: var(--iron-s-2);
    font-family: var(--iron-font-mono);
    font-size: var(--iron-t-xs);
    color: var(--iron-warn);
}

.contact-form .wpcf7-response-output {
    margin: 0;
    padding: var(--iron-s-3) var(--iron-s-4);
    font-size: var(--iron-t-base);
    border: var(--iron-hairline) solid var(--iron-line);
    border-left: 3px solid var(--iron-accent);
    border-radius: 0 var(--iron-r-sm) var(--iron-r-sm) 0;
    background: var(--iron-accent-wash);
}

.contact-form .wpcf7-form.invalid .wpcf7-response-output {
    border-left-color: var(--iron-warn);
    background: var(--iron-warn-wash);
}

/* --- Repli sans extension ------------------------------------------------ */

.contact-fallback {
    margin-top: var(--iron-s-5);
    padding: var(--iron-s-5);
    border-radius: var(--iron-r-md);
    display: grid;
    justify-items: start;
    gap: var(--iron-s-4);
}

.contact-fallback__text {
    color: var(--iron-ink-soft);
}

/* --- Colonne de droite --------------------------------------------------- */

.contact__aside {
    display: grid;
    gap: var(--iron-s-4);
    position: sticky;
    top: 6.5rem;
}

.aside-card {
    padding: var(--iron-s-5);
    border-radius: var(--iron-r-md);
}

.aside-card__title {
    font-family: var(--iron-font-mono);
    font-size: var(--iron-t-2xs);
    letter-spacing: var(--iron-ls-caps);
    text-transform: uppercase;
    color: var(--iron-ink-faint);
}

.aside-card__list {
    margin-top: var(--iron-s-4);
    display: grid;
    gap: var(--iron-s-4);
}

.aside-card__item + .aside-card__item {
    padding-top: var(--iron-s-4);
    border-top: var(--iron-hairline) solid var(--iron-line);
}

.aside-card__question {
    font-size: var(--iron-t-base);
    color: var(--iron-ink-soft);
    margin-bottom: var(--iron-s-2);
    text-wrap: pretty;
}

.aside-card__line {
    margin-top: var(--iron-s-3);
    font-family: var(--iron-font-mono);
    font-size: var(--iron-t-sm);
}

.aside-card__note {
    margin-top: var(--iron-s-2);
    font-size: var(--iron-t-base);
    color: var(--iron-ink-faint);
}

/* --------------------------------------------------------------------------
   18. Page introuvable
   -------------------------------------------------------------------------- */

/* Assez haute pour que le pied de page ne remonte pas coller au bouton sur un
   grand écran, jamais assez pour forcer un défilement. */
.hero--404 {
    display: grid;
    align-items: center;
    min-height: min(70vh, 40rem);
    padding-block: var(--iron-s-9);
}

.notfound {
    position: relative;
    z-index: 1;
    text-align: center;
}

/* Le cadre vide autour du nombre, équerres comprises : c'est l'emplacement où
   la page aurait dû être. Elles sont visibles d'emblée ici, alors qu'ailleurs
   sur le site elles n'apparaissent qu'au survol. */
.notfound__code {
    display: inline-block;
    padding: clamp(1rem, 0.5rem + 2vw, 2rem) clamp(1.5rem, 1rem + 3vw, 3.5rem);
    border-radius: var(--iron-r-md);
    background: transparent;
    font-family: var(--iron-font-mono);
    font-size: clamp(4.5rem, 2rem + 16vw, 11rem);
    font-weight: 700;
    line-height: 1;
    letter-spacing: var(--iron-ls-hero);
    color: var(--iron-ink);
}

.notfound__code::before,
.notfound__code::after {
    opacity: 1;
    translate: 0 0;
    width: 16px;
    height: 16px;
}

.notfound__text {
    max-width: 32rem;
    margin: var(--iron-s-6) auto 0;
    font-family: var(--iron-font-mono);
    font-size: var(--iron-t-base);
    line-height: var(--iron-lh-snug);
    color: var(--iron-ink-soft);
    text-wrap: balance;
}

.notfound__actions {
    margin-top: var(--iron-s-6);
}

/* --------------------------------------------------------------------------
   19. Apparitions au défilement
   L'état de départ n'est appliqué que si le JS a démarré : sans lui, rien
   n'est masqué et la page reste entièrement lisible.
   -------------------------------------------------------------------------- */

.js [data-reveal] {
    opacity: 0;
    translate: 0 14px;
    transition: opacity var(--iron-slow) var(--iron-ease),
                translate var(--iron-slow) var(--iron-snap);
    transition-delay: var(--iron-delay, 0ms);
}

.js [data-reveal].is-in {
    opacity: 1;
    translate: 0 0;
}

/* --------------------------------------------------------------------------
   20. Mouvement réduit
   Tout ce qui bouge s'arrête. Les états finaux, eux, restent : la page doit
   être complète, pas figée à mi-animation.
   -------------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {

    html {
        scroll-behavior: auto;
    }

    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }

    .js [data-reveal] {
        opacity: 1;
        translate: none;
    }

    .hero__grid {
        opacity: 0.75;
        scale: 1;
    }
}

/* --------------------------------------------------------------------------
   Adaptations
   -------------------------------------------------------------------------- */

@media (max-width: 60rem) {

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

    /* Sous cette largeur, deux panneaux côte à côte deviennent illisibles :
       on empile, en acceptant l'aller-retour au défilement. */
    .demo {
        grid-template-columns: minmax(0, 1fr);
    }

    .demo__admin {
        align-content: start;
    }

    /* Le sommaire passe au-dessus du chapitre et se replie derrière un
       bouton : sur cette largeur, une colonne de 16rem mange la moitié de la
       mesure de lecture. */
    .doc {
        grid-template-columns: minmax(0, 1fr);
        gap: var(--iron-s-5);
    }

    .doc-nav {
        position: static;
        max-height: none;
        overflow: visible;
        padding-right: 0;
        border-right: 0;
        padding-bottom: var(--iron-s-5);
        border-bottom: var(--iron-hairline) solid var(--iron-line);
    }

    .doc-nav__toggle {
        display: inline-flex;
    }

    .doc-nav__inner {
        display: none;
        margin-top: var(--iron-s-4);
    }

    .doc-nav__inner.is-open {
        display: block;
    }

    /* La colonne de droite passe sous le formulaire, et cesse d'être collante :
       un bloc collant sous son contenu ne colle à rien. */
    .contact {
        grid-template-columns: minmax(0, 1fr);
    }

    .contact__aside {
        position: static;
    }

    /* La glose passe sous son axiome : trois colonnes ne tiennent plus. */
    .axiom {
        grid-template-columns: 3.5rem minmax(0, 1fr);
    }

    .axiom__gloss {
        grid-column: 2;
    }

    .site-footer__inner {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 46rem) {

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

    .split__col + .split__col {
        border-left: 0;
        border-top: var(--iron-hairline) solid var(--iron-line);
    }

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

    /* La navigation se replie derrière un bouton. Ouverte, elle occupe toute
       la largeur sous l'en-tête. */
    .nav-toggle {
        display: grid;
        order: 3;
    }

    .site-nav {
        display: none;
        order: 4;
        width: 100%;
        padding-bottom: var(--iron-s-4);
    }

    .site-nav.is-open {
        display: block;
    }

    .site-header__inner {
        flex-wrap: wrap;
    }

    .site-nav__list {
        flex-direction: column;
        align-items: stretch;
        gap: 0;
    }

    .site-nav__item {
        border-top: var(--iron-hairline) solid var(--iron-line);
    }

    .site-nav__link {
        display: block;
        padding-block: var(--iron-s-3);
    }

    .facts {
        gap: var(--iron-s-5);
    }

    .btn {
        flex: 1 1 auto;
    }

    /* L'index passe au-dessus du texte : une colonne de 3,5rem mange trop de
       mesure quand il n'en reste que vingt. */
    .axiom,
    .principle {
        grid-template-columns: minmax(0, 1fr);
        gap: var(--iron-s-2);
    }

    .axiom__gloss {
        grid-column: auto;
    }

    .principle__aside {
        position: static;
    }

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

    .contact-form input[type='submit'],
    .contact-form button[type='submit'] {
        justify-self: stretch;
        width: 100%;
    }

    .doc-pager__link--next {
        text-align: left;
    }
}