/* =========================================================
   ANTOINE GÉRARD — DESIGN SYSTEM TECHNIQUE
   Traduction en code de « Antoine Gérard Design System »
   (charte de marque, édition 2026, 36 pages).

   La charte prévaut sur ce fichier. Chaque token porte en
   commentaire la page de la charte dont il découle.

   Architecture :
     1. Faces typographiques
     2. Palettes brutes (canaux RVB = source de vérité)
     3. Tokens globaux (type, espace, mouvement, formes)
     4. Portées de couleur (.sys-*) — deux mondes, un accent
     5. Utilitaires typographiques
     6. Composants (boutons, liens, cartes, filets, états)
     7. Motifs graphiques
   ========================================================= */

/* =========================================================
   1 · FACES TYPOGRAPHIQUES — quatre familles, quatre métiers
   Charte p. 4 : « Choisir entre elles est une décision
   d'importance et de taille, pas de type de contenu. »
   ========================================================= */

/* IMPACT — l'information la plus importante. Une seule graisse. */
@font-face {
  font-family: 'Nineties Headliner';
  src: url('../fonts/NinetiesHeadliner-Regular.woff2') format('woff2'),
       url('../fonts/NinetiesHeadliner-Regular.woff')  format('woff');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

/* GESTE — expressive, quasi manuscrite. Autour du titrage. */
@font-face {
  font-family: 'Aguafina Script';
  src: url('../fonts/AguafinaScript-Regular.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6,
                 U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2191,
                 U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Aguafina Script';
  src: url('../fonts/AguafinaScript-Regular-latin-ext.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7,
                 U+02DD-02FF, U+1E00-1E9F, U+1EF2-1EFF, U+2020,
                 U+20A0-20AB, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* CŒUR — la face centrale. Emphase par son italique (p. 9). */
@font-face {
  font-family: 'Perfectly Nineties';
  src: url('../fonts/PerfectlyNineties-Regular.otf') format('opentype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Perfectly Nineties';
  src: url('../fonts/PerfectlyNineties-Italic.otf') format('opentype');
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}

/* FONCTIONNEL — Inter Display.
   Obtenu de la variable Inter déjà présente : elle porte un axe
   optique opsz 14→32. Inter Display EST Inter à opsz élevé, donc
   `font-variation-settings: 'opsz' 32` donne la coupe Display sans
   embarquer les 18 fichiers statiques. */
@font-face {
  font-family: 'Inter Variable';
  src: url('../fonts/InterVariable.ttf') format('truetype-variations');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Inter Variable';
  src: url('../fonts/InterVariable-Italic.ttf') format('truetype-variations');
  font-weight: 100 900;
  font-style: italic;
  font-display: swap;
}

:root {
  /* =======================================================
     2 · PALETTES BRUTES
     Canaux RVB = source de vérité. Toute transparence du
     système s'écrit rgb(var(--rgb-x) / alpha) — jamais un
     rgba() en dur, jamais un hexadécimal figé (p. 32).
     ======================================================= */

  /* ---- BORDEAUX — le système signature (p. 17) ---- */
  --rgb-bordeaux-abyss:     18 1 6;      /* #120106 — pied de page préférentiel */
  --rgb-bordeaux-dark:      48 3 14;     /* #30030E */
  --rgb-bordeaux-medium:    81 2 20;     /* #510214 — FOND BORDEAUX PAR DÉFAUT */
  --rgb-bordeaux-rich:      116 5 29;    /* #74051D */
  --rgb-bordeaux-deep-rose: 145 6 40;    /* #910628 */
  --rgb-bordeaux-carmine:   205 11 50;   /* #CD0B32 */
  --rgb-bordeaux-velvet:    255 12 45;   /* #FF0C2D — DORMANT, voir p. 23 */

  --bordeaux-abyss:     rgb(var(--rgb-bordeaux-abyss));
  --bordeaux-dark:      rgb(var(--rgb-bordeaux-dark));
  --bordeaux-medium:    rgb(var(--rgb-bordeaux-medium));
  --bordeaux-rich:      rgb(var(--rgb-bordeaux-rich));
  --bordeaux-deep-rose: rgb(var(--rgb-bordeaux-deep-rose));
  --bordeaux-carmine:   rgb(var(--rgb-bordeaux-carmine));
  --bordeaux-velvet:    rgb(var(--rgb-bordeaux-velvet));

  /* ---- MARRON — les neutres chauds, un continuum (p. 18) ---- */
  --rgb-feve:      21 8 4;        /* #150804 */
  --rgb-ganache:   33 18 12;      /* #21120C */
  --rgb-truffe:    45 28 21;      /* #2D1C15 — FOND MARRON PAR DÉFAUT + encre claire */
  --rgb-expresso:  66 43 33;      /* #422B21 */
  --rgb-cacao:     94 66 51;      /* #5E4233 */
  --rgb-chocolat:  123 91 74;     /* #7B5B4A */
  --rgb-noisette:  156 130 113;   /* #9C8271 */
  --rgb-praline:   193 173 158;   /* #C1AD9E */
  --rgb-stone:     205 192 180;   /* #CDC0B4 */
  --rgb-cream:     228 218 209;   /* #E4DAD1 */
  --rgb-parchment: 242 236 229;   /* #F2ECE5 — référence claire transversale */

  --feve:      rgb(var(--rgb-feve));
  --ganache:   rgb(var(--rgb-ganache));
  --truffe:    rgb(var(--rgb-truffe));
  --expresso:  rgb(var(--rgb-expresso));
  --cacao:     rgb(var(--rgb-cacao));
  --chocolat:  rgb(var(--rgb-chocolat));
  --noisette:  rgb(var(--rgb-noisette));
  --praline:   rgb(var(--rgb-praline));
  --stone:     rgb(var(--rgb-stone));
  --cream:     rgb(var(--rgb-cream));
  --parchment: rgb(var(--rgb-parchment));

  /* ---- BLEUS — l'accent actif (p. 19 et 23) ----
     Seules couleurs qui traversent les deux systèmes.
     Accents, jamais fonds dominants. */
  --rgb-porcelaine:   183 214 242;  /* #B7D6F2 — tonique sur fond sombre */
  --rgb-faience:      144 186 231;  /* #90BAE7 — valeur intermédiaire, joker */
  --rgb-bleu-du-four: 68 116 177;   /* #4474B1 — tonique sur fond clair */

  --porcelaine:   rgb(var(--rgb-porcelaine));
  --faience:      rgb(var(--rgb-faience));
  --bleu-du-four: rgb(var(--rgb-bleu-du-four));

  /* =======================================================
     3 · TOKENS GLOBAUX
     ======================================================= */

  /* ---- Familles (p. 4) ---- */
  --font-impact:     'Nineties Headliner', 'Haettenschweiler', 'Arial Narrow', sans-serif;
  --font-gesture:    'Aguafina Script', 'Snell Roundhand', cursive;
  --font-core:       'Perfectly Nineties', Georgia, 'Times New Roman', serif;
  --font-functional: 'Inter Variable', 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;

  /* ---- Échelles (p. 11) ---- */
  --size-impact-xl: clamp(64px, 12vw, 168px);
  --size-impact-l:  clamp(48px, 8vw,  104px);
  --size-impact-m:  clamp(36px, 5vw,  60px);

  --size-core-xl: clamp(40px, 4.4vw, 64px);
  --size-core-l:  clamp(32px, 3.4vw, 48px);
  --size-core-m:  clamp(24px, 2.4vw, 34px);
  --size-core-s:  21px;
  --size-core-xs: 18px;

  --size-fn-l:  17px;
  --size-fn-m:  15px;
  --size-fn-s:  13px;
  --size-fn-xs: 11px;

  /* ---- Interlignages (p. 8 et 6) ---- */
  --lh-impact:       0.8;    /* ≈ 80 %. Un interligne large est un défaut. */
  --lh-core-display: 0.9;
  --lh-core:         1.10;
  --lh-core-text:    1.38;
  --lh-fn:           1.5;

  /* ---- Interlettrages (p. 11) ---- */
  --track-impact:  0;         /* ouvrable à 0.02em. Négatif INTERDIT sur cette face. */
  --track-core:    -0.03em;   /* systématique sur Perfectly Nineties (p. 8) */
  --track-eyebrow: 0.16em;
  --track-fn:      0;
  --track-gesture: 0;

  /* ---- Réserve d'accent de l'impact (p. 6) ----
     À 80 % d'interlignage, l'encre des É/È/À déborde vers le haut.
     Appliquée en padding-top du bloc : la ligne 1 garde ses accents,
     les lignes suivantes les perdent (É→E), donc n'en ont pas besoin. */
  --impact-reserve: 0.28em;

  /* ---- Mises en page (p. 31) ---- */
  --width-content:   1180px;
  --width-editorial: 720px;
  --measure-body:    66ch;
  --measure-core:    34ch;
  --gutter:          clamp(20px, 4vw, 72px);
  --section-rhythm:  clamp(72px, 10vw, 180px);

  /* ---- Échelle d'espacement (p. 31) ---- */
  --space-1:  4px;
  --space-2:  8px;
  --space-3:  12px;
  --space-4:  16px;
  --space-5:  24px;
  --space-6:  32px;
  --space-7:  48px;
  --space-8:  64px;
  --space-9:  96px;    /* air minimal au-dessus/en-dessous d'une ligne d'impact */
  --space-10: 128px;

  /* ---- Rayons (p. 32) : presque carré ----
     Pas d'arrondi applicatif de 12 à 24 px. */
  --radius-section: 0;
  --radius-field:   2px;
  --radius-control: 4px;
  --radius-pill:    999px;   /* étiquettes UNIQUEMENT */

  /* ---- Mouvement (p. 33) ---- */
  --dur-fast: 120ms;
  --dur-base: 220ms;
  --dur-slow: 520ms;
  --ease-standard: cubic-bezier(0.2, 0, 0, 1);
  --ease-out-soft: cubic-bezier(0.16, 1, 0.3, 1);

  /* ---- Motifs (p. 25) ----
     Référence : ≈ 47,5 px sur un canevas de 1080 px, mis à l'échelle. */
  --pat-band: clamp(28px, 4.4vw, 64px);
  --pat-line: 2px;   /* trait fin des rayures tennis */

  /* ---- Scrims (p. 24) ----
     SEULE exception à l'interdiction des dégradés : un fondu
     technique produisant une ombre ou un raccord sous une image.
     Ne doit jamais se lire comme un effet chromatique. */
  --scrim-bordeaux: linear-gradient(to top,
                      rgb(var(--rgb-bordeaux-abyss) / 0.92) 0%,
                      rgb(var(--rgb-bordeaux-abyss) / 0) 100%);
  --scrim-marron:   linear-gradient(to top,
                      rgb(var(--rgb-feve) / 0.92) 0%,
                      rgb(var(--rgb-feve) / 0) 100%);

  /* ---- Surcouche soulevée (p. 32) ----
     Les ombres sont quasi inexistantes. Noir chaud, jamais gris neutre. */
  --shadow-raised: 0 8px 24px rgb(var(--rgb-bordeaux-abyss) / 0.28);
  --shadow-overlay: 0 24px 64px rgb(var(--rgb-bordeaux-abyss) / 0.42);
}

/* =========================================================
   4 · PORTÉES DE COULEUR — deux mondes, jamais mélangés
   Charte p. 20 : « Une section = un système. »

   Chaque portée définit --surface, --text, --accent, --on-accent
   et --ink-rgb (canaux de l'encre de la portée, pour les alphas).
   Les composants ne lisent QUE ces alias sémantiques : ils sont
   donc automatiquement justes dans n'importe quelle portée.
   ========================================================= */

.sys-bordeaux,
.sys-bordeaux-abyss,
.sys-marron,
.sys-marron-light,
.sys-marron-cream {
  background-color: var(--surface);
  color: var(--text);

  /* Filet 1 px : encre de la portée à 14–18 % d'alpha (p. 32) */
  --rule: rgb(var(--ink-rgb) / 0.16);
  --rule-strong: rgb(var(--ink-rgb) / 0.32);

  /* Teinte de carte : 5–6 % de l'encre de la portée (p. 32) */
  --card-tint: rgb(var(--ink-rgb) / 0.055);

  /* Alias sémantiques (p. 23) : ils résolvent TOUJOURS la même
     valeur. Un composant ne peut pas physiquement convoquer
     l'autre système. */
  --accent-soft:   var(--accent);
  --accent-strong: var(--accent);
}

/* ---- Portées Bordeaux ---- */
.sys-bordeaux {
  --surface: var(--bordeaux-medium);   /* fond Bordeaux de référence (p. 17) */
  --text: var(--parchment);            /* encre sur fond sombre (p. 22) */
  --ink-rgb: var(--rgb-parchment);
  --accent: var(--porcelaine);         /* accent actif (p. 23) */
  --accent-hover: var(--faience);      /* un cran dans sa propre famille (p. 33) */
  --on-accent: var(--truffe);
}

.sys-bordeaux-abyss {
  --surface: var(--bordeaux-abyss);    /* zones les plus profondes, pied de page */
  --text: var(--parchment);
  --ink-rgb: var(--rgb-parchment);
  --accent: var(--porcelaine);
  --accent-hover: var(--faience);
  --on-accent: var(--truffe);
}

/* ---- Portées Marron ---- */
.sys-marron {
  --surface: var(--truffe);            /* fond Marron par défaut (p. 18) */
  --text: var(--parchment);
  --ink-rgb: var(--rgb-parchment);
  --accent: var(--porcelaine);
  --accent-hover: var(--faience);
  --on-accent: var(--truffe);
}

/* La charte nomme ces deux classes (p. 20) sans dire quelle valeur du
   continuum Marron chacune porte en fond. Retenu : le nom correspond à
   la valeur, et l'échelle décroît en clarté.
     -light  = Parchment #F2ECE5 — la plus claire, « la référence claire
               de toute l'identité » (p. 18)
     -cream  = Cream #E4DAD1 — un cran plus chaud, pour une section
               claire qui doit se distinguer d'une autre
   Stone reste dans la palette mais ne sert pas de fond de portée : trop
   sourd pour une grande surface de lecture. */
.sys-marron-light {
  --surface: var(--parchment);
  --text: var(--truffe);               /* encre sur fond clair (p. 22) */
  --ink-rgb: var(--rgb-truffe);
  --accent: var(--bleu-du-four);       /* tonique de référence sur fond clair (p. 19) */
  --accent-hover: var(--faience);
  --on-accent: var(--parchment);
}

.sys-marron-cream {
  --surface: var(--cream);
  --text: var(--truffe);
  --ink-rgb: var(--rgb-truffe);
  --accent: var(--bleu-du-four);
  --accent-hover: var(--faience);
  --on-accent: var(--parchment);
}

/* ---- Réactivation exceptionnelle du Velvet (p. 23) ----
   « sur demande explicite, via .accent-velvet dans une portée
   Bordeaux — cette section ne porte alors AUCUN bleu. »
   Interdit sur Marron. */
.sys-bordeaux > .accent-velvet,
.sys-bordeaux-abyss > .accent-velvet,
.accent-velvet {
  --accent: var(--bordeaux-velvet);
  --accent-hover: var(--bordeaux-carmine);
  --on-accent: var(--parchment);
}
.sys-marron .accent-velvet,
.sys-marron-light .accent-velvet,
.sys-marron-cream .accent-velvet {
  --accent: var(--bleu-du-four);   /* garde-fou : Velvet interdit sur Marron */
}

/* =========================================================
   5 · UTILITAIRES TYPOGRAPHIQUES
   Classes nommées par la charte p. 11.
   ========================================================= */

.t-impact {
  font-family: var(--font-impact);
  font-size: var(--size-impact-l);
  font-weight: 400;                  /* jamais de fausse graisse (p. 6) */
  font-style: normal;
  text-transform: uppercase;         /* toujours en capitales, jamais de bas-de-casse */
  letter-spacing: var(--track-impact);
  line-height: var(--lh-impact);
  padding-top: var(--impact-reserve);
  margin-block: 0;
  /* « Aucun mot orphelin au milieu d'un bloc » et « jamais plus haut que
     large » (p. 14 et 15). Laisser le navigateur équilibrer les lignes
     tient ces deux règles à TOUTES les largeurs, ce qu'un <br> codé en
     dur ne peut pas faire : il produit un orphelin dès que l'écran
     rétrécit. Repli silencieux en coupe normale si non supporté. */
  text-wrap: balance;
}
.t-impact--xl { font-size: var(--size-impact-xl); }
.t-impact--m  { font-size: var(--size-impact-m); }
/* Ouverture légère autorisée, jusqu'à 0.02em. Valeur négative interdite. */
.t-impact--open { letter-spacing: 0.02em; }

.t-gesture {
  font-family: var(--font-gesture);
  font-weight: 400;
  font-style: normal;
  letter-spacing: var(--track-gesture);
  line-height: 1.1;
  margin-block: 0;
}

.t-core-xl, .t-core-l, .t-core-m, .t-core-s, .t-core-xs {
  font-family: var(--font-core);
  font-weight: 400;
  letter-spacing: var(--track-core);   /* −3 % systématique (p. 8) */
  margin-block: 0;
}
.t-core-xl { font-size: var(--size-core-xl); line-height: var(--lh-core-display); }
.t-core-l  { font-size: var(--size-core-l);  line-height: var(--lh-core-display); }
.t-core-m  { font-size: var(--size-core-m);  line-height: var(--lh-core); }
.t-core-s  { font-size: var(--size-core-s);  line-height: var(--lh-core-text); }
.t-core-xs { font-size: var(--size-core-xs); line-height: var(--lh-core-text); }

/* L'italique de Perfectly Nineties EST l'emphase (p. 9). */
.t-core-xl em, .t-core-l em, .t-core-m em,
.t-core-s em, .t-core-xs em {
  font-style: italic;
  font-weight: 400;   /* jamais de gras d'emphase */
}

.t-body, .t-meta, .t-eyebrow {
  font-family: var(--font-functional);
  font-variation-settings: 'opsz' 32;   /* la coupe Display (p. 10) */
  letter-spacing: var(--track-fn);
  margin-block: 0;
}
.t-body {
  font-size: var(--size-fn-m);
  line-height: var(--lh-fn);
  max-width: var(--measure-body);       /* mesure de 66 caractères (p. 10) */
}
.t-body--l { font-size: var(--size-fn-l); }
.t-meta {
  font-size: var(--size-fn-s);
  line-height: 1.45;
}
.t-meta--xs { font-size: var(--size-fn-xs); }

/* Sur-titre / label : le SEUL emploi de la capitale dans le
   texte fonctionnel (p. 10). */
.t-eyebrow {
  font-size: var(--size-fn-s);
  text-transform: uppercase;
  letter-spacing: var(--track-eyebrow);
  line-height: 1.3;
}

/* Chiffres tabulaires là où ils s'alignent (p. 10 et 34). */
.t-tabular { font-variant-numeric: tabular-nums; }

/* =========================================================
   6 · COMPOSANTS
   ========================================================= */

/* ---- Le lockup titre + script (p. 12) ----
   Le script et le titre ne forment qu'UN bloc. Le script passe
   toujours devant le titre ; ses descendantes entrent dans la
   zone du titre, et ce chevauchement est VOULU.

   Les décalages ci-dessous ne sont pas réglés à vue : ils sont
   calculés à partir des métriques réelles des deux polices,
   mesurées au canvas (TextMetrics, en em) :

     Nineties Headliner  asc 1.040  desc 0.380  capitale 0.700
     Aguafina Script     asc 0.970  desc 0.580  encre haute 0.920

   Si une de ces polices change, ou si --lh-impact / --lh-gesture /
   --impact-reserve changent, il suffit de corriger les tokens
   --m-* ci-dessous : la géométrie se recalcule seule.

   NB — l'illustration de la charte p. 12 laisse en réalité un écart
   de 0,63 × la hauteur de capitale, ce qui contredit sa propre règle
   écrite (« espacement ≈ 0 », « la ligne de base se pose quasiment
   sur la ligne de capitale »). La p. 1 tranche : les règles écrites
   prévalent sur toute interprétation. C'est donc la règle qui est
   appliquée ici, pas l'illustration. */

:root {
  /* Métriques des faces, en em. Mesurées, pas estimées. */
  --m-impact-asc:      1.04;
  --m-impact-desc:     0.38;
  --m-impact-cap:      0.70;
  --m-gesture-asc:     0.97;
  --m-gesture-desc:    0.58;
  --m-gesture-inktop:  0.92;   /* hauteur d'encre au-dessus de la ligne de base */

  --lh-gesture: 1.1;
  --impact-reserve-num: 0.28;  /* jumeau sans unité de --impact-reserve */

  /* Taille du script rapportée au titre.
     Seule référence chiffrée de la charte : 66 px pour un titre
     de 144 px (p. 12) → 0.458. */
  --lockup-ratio: 0.46;

  /* Respiration sous le titre quand le script est en dessous,
     en em du titre. Mesuré sur l'illustration de la charte :
     0.155 × la hauteur de capitale ; le texte donne ≈ 0.19. */
  --lockup-below-gap: 0.12;

  /* SCRIPT AU-DESSUS — dégagement de la ligne de base du script
     au-dessus de la ligne de capitale du titre, exprimé en hauteurs
     de capitale.
     Ce ne sont PAS toutes les lettres qui entrent dans le titre :
     seules les descendantes (y, j, g, p, f) plongent dedans. Les
     lettres posées sur la ligne de base gardent une petite distance.
     À 0.10 : les lettres courantes dégagent de 10 % de la hauteur de
     capitale, et les descendantes (0.58 em de script) plongent quand
     même sur ~28 % de cette hauteur. */
  --lockup-above-clearance: 0.10;
}

.lockup { display: flex; flex-direction: column; }

/* « Le script passe toujours devant le titre » (p. 12).
   Il vient APRÈS le titre dans l'ordre de peinture, donc son encre
   recouvre les capitales là où elles se croisent. */
.lockup .t-gesture { position: relative; z-index: 1; }

/* Dans un lockup, le script porte TOUJOURS l'accent de la portée —
   Porcelaine sur fond sombre, Bleu du Four sur fond clair. C'est ce
   qui le rend lisible là où il chevauche le titre : deux encres de
   même valeur ne laisseraient pas voir laquelle passe devant.
   Conforme aux illustrations de la p. 12, où le script est bleu.
   Hors lockup (signature, spécimen), le script reste en --text. */
.lockup .t-gesture { color: var(--accent); }

.lockup .t-gesture,
.lockup .t-impact { margin: 0; }

.lockup--script-above,
.lockup--script-below {
  /* Du haut du bloc script à sa ligne de base (em du script). */
  --script-baseline: calc(
    (var(--lh-gesture) - (var(--m-gesture-asc) + var(--m-gesture-desc))) / 2
    + var(--m-gesture-asc));
  /* Du haut du bloc titre à sa ligne de capitale (em du titre),
     réserve d'accent comprise. */
  --impact-capline: calc(
    var(--impact-reserve-num)
    + (var(--lh-impact) - (var(--m-impact-asc) + var(--m-impact-desc))) / 2
    + var(--m-impact-asc) - var(--m-impact-cap));
}

.lockup--script-above .t-gesture,
.lockup--script-below .t-gesture { font-size: calc(var(--lockup-ratio) * 1em); }

/* SCRIPT AU-DESSUS — la ligne de base du script se pose juste
   au-dessus de la ligne de capitale du titre, à --lockup-above-clearance
   près. Les lettres posées sur la ligne de base gardent donc une petite
   distance ; seules les descendantes (y, j, g, p, f) plongent dans les
   capitales. */
.lockup--script-above .t-impact {
  margin-top: calc(
    (var(--script-baseline) - var(--lh-gesture)) * var(--lockup-ratio) * 1em
    - var(--impact-capline) * 1em
    + var(--lockup-above-clearance) * var(--m-impact-cap) * 1em);
}

/* Exception d'asymétrie (p. 12) : « les accents du titre ne doivent
   jamais remonter à travers le script. Le script n'est glissé dans
   cette réserve que si la ligne 1 ne porte AUCUN accent. »
   À poser sur le lockup dès que la ligne 1 porte un É, È, À, Ù, Ç. */
.lockup--script-above.lockup--accented .t-impact {
  margin-top: calc(
    (var(--script-baseline) - var(--lh-gesture)) * var(--lockup-ratio) * 1em
    - var(--impact-capline) * 1em
    + var(--lockup-above-clearance) * var(--m-impact-cap) * 1em
    + var(--impact-reserve));
}

/* SCRIPT EN DESSOUS — il reste proche, ne chevauche pas le titre,
   et ne prend qu'une petite respiration. */
.lockup--script-below .t-impact {
  margin-bottom: calc(
    var(--lockup-below-gap) * 1em
    - (var(--lh-impact)
       - (var(--lh-impact) - (var(--m-impact-asc) + var(--m-impact-desc))) / 2
       - var(--m-impact-asc)) * 1em
    - (var(--script-baseline) - var(--m-gesture-inktop)) * var(--lockup-ratio) * 1em);
}

/* ---- Le monogramme (p. 30) ----
   a minuscule + g minuscule + point final, sans espace.
   Aucune autre variation n'existe. */
.ag-mark {
  font-family: var(--font-core);
  letter-spacing: -0.03em;
  text-transform: lowercase;
  font-style: normal;
}
.ag-mark--signature {
  font-family: var(--font-gesture);
  letter-spacing: 0;
}

/* ---- Filets (p. 32) ----
   Très utilisés : ils divisent les blocs éditoriaux et dessinent
   les boutons fantômes. La couleur dérive TOUJOURS de la portée. */
.rule { border: 0; border-top: 1px solid var(--rule); margin: 0; }

/* ---- Boutons ---- */
.btn {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-family: var(--font-functional);
  font-variation-settings: 'opsz' 32;
  font-size: var(--size-fn-m);
  line-height: 1;
  padding: 14px 22px;
  border-radius: var(--radius-control);
  text-decoration: none;
  cursor: pointer;
  transition: background-color var(--dur-base) var(--ease-standard),
              border-color var(--dur-base) var(--ease-standard),
              color var(--dur-base) var(--ease-standard),
              opacity var(--dur-fast) var(--ease-standard);
}

/* Bouton fantôme : dessiné par un filet. */
.btn--ghost {
  background: transparent;
  color: var(--text);
  border: 1px solid var(--rule);
}
/* Survol : bordure ET texte passent au --text plein (p. 33). */
.btn--ghost:hover { border-color: var(--text); color: var(--text); }

/* Bouton plein : porte l'accent de la portée. */
.btn--solid {
  background: var(--accent);
  color: var(--on-accent);
  border: 1px solid var(--accent);
}
/* Survol : le fond se décale d'un cran DANS SA PROPRE FAMILLE —
   jamais un assombrissement générique (p. 33). */
.btn--solid:hover {
  background: var(--accent-hover);
  border-color: var(--accent-hover);
}
/* Appui : la couleur s'approfondit, l'opacité descend à ~0,9.
   Pas d'écrasement, pas d'ombre qui saute. */
.btn:active { opacity: 0.9; }

/* Désactivé : 40 % d'opacité, AUCUNE substitution de couleur. */
.btn:disabled,
.btn[aria-disabled='true'] {
  opacity: 0.4;
  pointer-events: none;
}

/* ---- Liens (p. 33) ----
   Survol : couleur vers --text, soulignement qui devient plein. */
.ds-link {
  color: var(--accent);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-decoration-style: solid;
  text-underline-offset: 3px;
  transition: color var(--dur-base) var(--ease-standard);
}
.ds-link:hover {
  color: var(--text);
  text-decoration-thickness: 2px;
}

/* ---- Focus (p. 33) ----
   Contour de 2 px décalé, visible sur CHAQUE élément interactif,
   jamais supprimé. */
.btn:focus-visible,
.ds-link:focus-visible,
.ds-field:focus-visible,
[tabindex]:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

/* ---- Champs de saisie ---- */
.ds-field {
  font-family: var(--font-functional);
  font-variation-settings: 'opsz' 32;
  font-size: var(--size-fn-m);
  padding: 13px 14px;
  border-radius: var(--radius-field);
  border: 1px solid var(--rule);
  background: transparent;
  color: var(--text);
}
.ds-field::placeholder { color: var(--text); opacity: 0.5; }

/* ---- Étiquette : le seul usage de la pilule (p. 32) ---- */
.ds-tag {
  display: inline-block;
  font-family: var(--font-functional);
  font-variation-settings: 'opsz' 32;
  font-size: var(--size-fn-xs);
  text-transform: uppercase;
  letter-spacing: var(--track-eyebrow);
  padding: 5px 12px;
  border-radius: var(--radius-pill);
  border: 1px solid var(--rule);
}

/* ---- Cartes (p. 32) ----
   Conteneurs de sens, pas objets en relief. Teinte de surface à
   5–6 % de l'encre de la portée, filet en incrustation, angles
   droits, AUCUNE ombre portée. */
.ds-card {
  background: var(--card-tint);
  border: 1px solid var(--rule);
  border-radius: var(--radius-section);
  padding: var(--space-6);
  box-shadow: none;
  transition: border-color var(--dur-base) var(--ease-standard);
}
/* Survol : le filet se renforce, l'encre ne change pas. */
.ds-card:hover { border-color: var(--rule-strong); }

/* ---- Structure de page (p. 31) ---- */
.ds-section {
  padding-block: var(--section-rhythm);
  padding-inline: var(--gutter);
}
.ds-container { max-width: var(--width-content); margin-inline: auto; }
.ds-editorial { max-width: var(--width-editorial); }

/* Le centrage est l'alignement par défaut (p. 29).
   Au-delà de ~3 lignes de paragraphe, TOUTE la section passe à
   gauche — titre, corps, légendes. */
.ds-centered { text-align: center; }
.ds-centered .t-body { margin-inline: auto; }
.ds-left { text-align: left; }

/* ---- Cadre d'image + scrim (p. 24 et 31) ---- */
.ds-frame { position: relative; border-radius: var(--radius-section); overflow: hidden; }
.ds-frame img { display: block; width: 100%; height: auto; }
.ds-frame--scrim::after {
  content: '';
  position: absolute;
  inset: 0;
  background: var(--scrim-bordeaux);
  pointer-events: none;
}
.sys-marron .ds-frame--scrim::after,
.sys-marron-light .ds-frame--scrim::after,
.sys-marron-cream .ds-frame--scrim::after { background: var(--scrim-marron); }

/* ---- Entrées éditoriales (p. 33) ----
   Fondus et courtes translations vers le haut de 8 à 16 px,
   en 520 ms. Pas de rebond, pas de ressort, pas de parallaxe. */
.ds-enter {
  opacity: 0;
  transform: translateY(12px);
  transition: opacity var(--dur-slow) var(--ease-out-soft),
              transform var(--dur-slow) var(--ease-out-soft);
}
.ds-enter.is-in { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
  .ds-enter { opacity: 1; transform: none; }
}

/* =========================================================
   7 · MOTIFS GRAPHIQUES (p. 25 à 28)
   Un seul motif par section, en fond PLEIN de section.
   Jamais combinés, jamais réduits à une vignette décorative.
   Les bandes sont des aplats à arrêt franc — pas des dégradés.
   ========================================================= */

.pat { background-repeat: repeat; }

/* Rayures verticales : deux couleurs proches d'une même famille,
   largeur égale, contraste subtil (p. 25). */
.sys-bordeaux.pat-stripes,
.sys-bordeaux-abyss.pat-stripes {
  background-image: repeating-linear-gradient(90deg,
    var(--bordeaux-dark)   0 var(--pat-band),
    var(--bordeaux-medium) var(--pat-band) calc(var(--pat-band) * 2));
}
.sys-marron.pat-stripes {
  background-image: repeating-linear-gradient(90deg,
    var(--truffe)   0 var(--pat-band),
    var(--expresso) var(--pat-band) calc(var(--pat-band) * 2));
}

/* Rayures tennis : large bande de fond + trait très fin qui
   contraste CLAIREMENT (une nuance adjacente ne suffit pas, p. 26). */
.sys-bordeaux.pat-tennis,
.sys-bordeaux-abyss.pat-tennis {
  background-color: var(--bordeaux-dark);
  background-image: repeating-linear-gradient(90deg,
    var(--bordeaux-deep-rose) 0 var(--pat-line),
    transparent var(--pat-line) calc(var(--pat-band) * 2));
}
.sys-marron.pat-tennis {
  background-color: var(--truffe);
  background-image: repeating-linear-gradient(90deg,
    var(--noisette) 0 var(--pat-line),
    transparent var(--pat-line) calc(var(--pat-band) * 2));
}

/* Damier : même logique chromatique que les rayures simples,
   carrés de taille identique couvrant tout le fond (p. 27). */
.sys-bordeaux.pat-check,
.sys-bordeaux-abyss.pat-check {
  background-color: var(--bordeaux-dark);
  background-image: repeating-conic-gradient(
    var(--bordeaux-medium) 0% 25%, var(--bordeaux-dark) 0% 50%);
  background-size: calc(var(--pat-band) * 2) calc(var(--pat-band) * 2);
}
.sys-marron.pat-check {
  background-color: var(--truffe);
  background-image: repeating-conic-gradient(
    var(--expresso) 0% 25%, var(--truffe) 0% 50%);
  background-size: calc(var(--pat-band) * 2) calc(var(--pat-band) * 2);
}

/* =========================================================
   BASE
   ========================================================= */

/* Sans ceci, tout élément qui combine une largeur et du rembourrage
   déborde de son conteneur — un bouton en width:100% dans une carte,
   par exemple. */
*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

body {
  margin: 0;
  font-family: var(--font-functional);
  font-variation-settings: 'opsz' 32;
  font-size: var(--size-fn-m);
  line-height: var(--lh-fn);
  background: var(--bordeaux-medium);
  color: var(--parchment);
}

/* Le point d'exclamation typographique de l'identité : la flèche →
   est le SEUL signe unicode toléré dans une copie de lien (p. 34).
   Aucun emoji, jamais. */

img { max-width: 100%; }