/* antimeta — feuille du canal site. DIRECTION T · TREILLIS
   Charte : resources/shared/identites/identite-antimeta.yaml v2 (2026-10-07)
   Arbitrage Ced du 2026-10-07 : direction T retenue.

   Le sérif porte la VOIX, le mono porte l'APPAREIL — le temps, la cote, la
   grille. C'est la bifurcation qui remplace le principe « corps en sans » de v1.

   LOI DES FILETS, transversale : une épaisseur ≥ 1,5 px signifie « donnée ».
   Rien d'autre dans la page n'est épais. Exemption unique et déclarée :
   :focus-visible{outline:2px} — un outline n'est pas un filet, c'est une
   affordance d'accessibilité, écrite ici pour que personne ne la « corrige ».

   Les liens ne sont pas colorés : `signal` signifie « la capture nommée », et
   donner cette couleur à la navigation serait un contresens sur ce site-là. */

/* ---------- polices : auto-hébergées, aucun CDN ---------- */
@font-face{font-family:"Newsreader";font-style:normal;font-weight:200 800;
  font-display:swap;src:url(fonts/newsreader-latin-standard-normal.woff2) format("woff2-variations")}
@font-face{font-family:"Newsreader";font-style:italic;font-weight:200 800;
  font-display:swap;src:url(fonts/newsreader-latin-standard-italic.woff2) format("woff2-variations")}
@font-face{font-family:"Martian Mono";font-style:normal;font-weight:100 800;
  font-stretch:75% 112.5%;font-display:swap;
  src:url(fonts/martian-mono-latin-standard-normal.woff2) format("woff2-variations")}

:root{
  --fond:#0F1318;        /* fond général */
  --panneau:#161B21;     /* 1,08:1 du fond → bordure porteuse 1 px obligatoire */
  --encre:#ECEBE4;       /* 15,60:1 sur fond · 14,49:1 sur panneau */
  --muted:#9BA3AC;       /*  7,30:1 / 6,78:1 — plancher : hauteur d'x ≥ 6,7 px */
  --signal:#E8714A;      /*  6,12:1 / 5,68:1 — ACCENT UNIQUE, données seulement */
  --half:#848C96;        /*  5,48:1 — section courante de l'index */

  /* trois rôles de filet, et un seul sens par épaisseur */
  --filet-fort:#6B737C;  /*  3,88:1 / 3,60:1 — STRUCTURE, 1 px, délimite une zone */
  --filet-fig:#707880;   /*  4,16:1 / 3,86:1 — PORTEUR dans la figure.
                              #5C646E donnait 2,89:1 sur panneau, et les arêtes
                              pointillées portent de l'information. Corrigé. */
  --filet:#262D34;       /*  1,34:1 — FOND, jamais une délimitation de zone */
  --off:#1B2129;         /*  sommet non atteint */

  --serif:"Newsreader",Georgia,"Times New Roman",serif;
  --mono:"Martian Mono",ui-monospace,Menlo,monospace;

  --mesure:66ch;
  --large:1180px;
  --marge-l:260px;
  --wm-track:.090em;     /* échelon 15-24 px : l'en-tête est à 17,6 px */
  color-scheme:dark;
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--fond);color:var(--encre);
     font:400 18px/1.62 var(--serif);font-optical-sizing:auto;
     text-rendering:optimizeLegibility}
img,svg{max-width:100%}

.wrap{max-width:var(--large);margin:0 auto;padding:0 28px}
.mesure{max-width:var(--mesure)}
.sr{position:absolute!important;width:1px;height:1px;overflow:hidden;
    clip:rect(0 0 0 0);white-space:nowrap}
.saut{position:absolute;left:-9999px;background:var(--panneau);color:var(--encre);
      padding:10px 14px;border:1px solid var(--filet-fort);z-index:10}
.saut:focus{left:16px;top:12px}
:focus-visible{outline:2px solid var(--signal);outline-offset:2px}  /* exemption déclarée */
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}

/* le mono porte l'appareil. Plancher : hauteur d'x ≥ 6,7 px, soit 0,62 rem —
   et non « 13 px », qui dépendait de la police (Martian Mono x = 0,600 em). */
.mono{font-family:var(--mono);font-size:.72rem;letter-spacing:.04em;
      font-variant-numeric:tabular-nums}

/* ---------- wordmark : correction optique mesurée ---------- */
.wm{font-family:var(--mono);font-weight:450;font-size:.98rem;
    font-feature-settings:"calt" 0;font-variant-ligatures:none;
    letter-spacing:var(--wm-track);white-space:nowrap;
    text-decoration:none;color:var(--encre)}
.wm i{font-style:normal}
.wm i:nth-child(1),.wm i:nth-child(3){letter-spacing:calc(var(--wm-track) - .052em)}
.wm i:nth-child(n+4){letter-spacing:calc(var(--wm-track) + .026em)}
.wm i:nth-child(8){letter-spacing:0}

/* ---------- en-tête : un filet de structure, aucun aplat, aucune marque ----
   LA MARQUE N'ENTRE JAMAIS ICI. goorg verrouille toujours figure + mot ; ne pas
   le faire est le différenciateur le moins coûteux et le plus visible. L'en-tête
   de T est identifié par son filet, qui reste à 1 px parce que 2 px est réservé
   à la donnée. */
.tete{border-bottom:1px solid var(--filet-fort)}
.tete .wrap{display:flex;align-items:baseline;gap:10px 30px;flex-wrap:wrap;
            padding:20px 28px 16px}
.bl{margin:0;color:var(--muted);font-size:.95rem}
nav.nav{margin-left:auto;display:flex;gap:22px;flex-wrap:wrap}
nav.nav a{font-family:var(--mono);font-size:.72rem;letter-spacing:.06em;
          text-decoration:none;color:var(--encre);padding-bottom:3px;
          border-bottom:1px solid transparent}
nav.nav a:hover,nav.nav a:focus-visible,nav.nav a[aria-current=page]{
  border-bottom-color:var(--encre)}

/* ---------- texte ---------- */
main{padding:52px 0 72px}
h1{font:500 clamp(2rem,4.4vw,3rem)/1.14 var(--serif);letter-spacing:-.015em;
   margin:0 0 .34em;text-wrap:balance;max-width:28ch}
h2{font:500 1.45rem/1.25 var(--serif);letter-spacing:-.01em;
   margin:2.2em 0 .5em;padding:0;border:0;
   max-width:var(--mesure)}   /* PORTEUR : sans lui les frontières de quart de la
                                 piste se déplacent entre le titre et le texte */
h3{font:500 1.1rem/1.3 var(--serif);margin:1.8em 0 .4em}
p,li{max-width:var(--mesure)}
p{margin:0 0 1.05em}
ul,ol{padding-left:1.3em}
li{margin-bottom:.45em}
strong{font-weight:600}
blockquote{margin:1.5em 0;padding:2px 0 2px 18px;border-left:1px solid var(--filet-fort);
           font-style:italic;max-width:var(--mesure)}
hr{border:0;border-top:1px solid var(--filet);margin:40px 0}
.lede{font-size:1.2rem;line-height:1.5;max-width:52ch;margin:0 0 34px}
.chapeau{font-size:1.12rem;color:var(--muted);max-width:var(--mesure);margin:0 0 36px}

/* ---------- GESTE 1 · la piste de marqueurs ----------
   Le filet du h2 devient quatre cellules sur la mesure exacte, ordre fixe
   A·L·I·B. Les marqueurs dont la section traite sont à 2 px en encre (donnée),
   les autres à 1 px en filet de structure. Jointives : ça se lit comme un filet
   d'épaisseur variable, pas comme quatre tirets.
   Sans donnée déclarée : quatre cellules à 1 px = exactement un filet ordinaire. */
.piste{display:grid;grid-template-columns:repeat(4,1fr);align-items:center;
       max-width:var(--mesure);height:2px;margin:0 0 .62em}
.piste i{display:block;height:1px;background:var(--filet-fort)}
.piste i.on{height:2px;background:var(--encre)}

/* ---------- GESTE 2 · la marge est une cote, pas une colonne ----------
   Elle porte exactement trois choses : la cote, la barre, l'index des sections.
   Les dates en sortent — elles vont dans la bande de pas, au corps. La marge est
   collante, donc elle porte ce qui doit être vrai EN PERMANENCE : la position
   l'est, une date de 2013 ne l'est pas. */
.duo{display:grid;grid-template-columns:var(--marge-l) minmax(0,1fr);gap:48px;
     align-items:start}
.marge{position:sticky;top:24px;max-height:calc(100vh - 48px);overflow-y:auto;
       overscroll-behavior:contain;scrollbar-width:thin}
@media (max-width:900px){
  .duo{grid-template-columns:1fr;gap:28px}
  .marge{position:static;max-height:none;overflow:visible}
}
.cote{font:400 1.6rem/1 var(--mono);letter-spacing:.06em;
      font-variant-numeric:tabular-nums;margin:0 0 14px}
.marge h3{font:400 .72rem/1 var(--mono);letter-spacing:.08em;text-transform:uppercase;
          color:var(--muted);margin:26px 0 10px;padding-bottom:8px;
          border-bottom:1px solid var(--filet-fort)}
.index{list-style:none;margin:0;padding:0}
.index a{display:flex;flex-direction:column;gap:5px;padding:6px 0;min-height:22px;
         text-decoration:none;color:var(--muted)}
.index .n{font:400 .68rem/1 var(--mono);letter-spacing:.05em}
.index .piste{margin:0;max-width:none}
.index .t{display:none;font-size:.82rem;color:var(--encre)}
.index a[aria-current=true] .t{display:block}
.index a[aria-current=true] .piste i{background:var(--half)}
.index a[aria-current=true] .piste i.on{background:var(--encre)}

/* ---------- GESTE 3 · le jeton de destination ----------
   Trois espèces de lien, aucune couleur, aucune icône. Le survol passe par
   l'offset, jamais par l'épaisseur — collision avec la loi des filets. */
a{color:var(--encre);text-decoration:underline;text-decoration-thickness:1px;
  text-underline-offset:.22em;text-decoration-color:currentColor}
a:hover,a:focus-visible{text-underline-offset:.14em}
a.terme{text-decoration-color:var(--filet-fort)}   /* plus discret que le texte */
a.terme:hover,a.terme:focus-visible{text-decoration-color:var(--encre)}
.jeton{font:400 .70rem/1 var(--mono);letter-spacing:.04em;color:var(--muted);
       white-space:nowrap;font-variant-numeric:tabular-nums}

/* ---------- figure : seul endroit où le treillis paraît ---------- */
.fig{margin:34px 0 10px;padding:22px 20px 16px;background:var(--panneau);
     border:1px solid var(--filet-fort)}
.fig figcaption{margin-top:14px;padding-top:12px;border-top:1px solid var(--filet);
                color:var(--muted);font-size:.84rem;max-width:62ch}
.cle{display:grid;grid-template-columns:repeat(auto-fit,minmax(176px,1fr));
     gap:12px 24px;margin:14px 0 0}
.cle>div{display:flex;gap:8px;align-items:baseline;flex-wrap:wrap}
.cle b{color:var(--signal);font-family:var(--mono);font-size:.82rem}
.cle span{font-size:.9rem}
.cle em{color:var(--muted);font-size:.8rem;font-style:normal;flex:1 1 100%}
.cle-sens{color:var(--encre);font-size:.88rem;margin:14px 0 0;max-width:62ch}

/* ---------- la bande de pas : le même objet à l'écran et sur le papier ------ */
table.bande{width:100%;border-collapse:collapse;margin:24px 0 10px;font-size:.92rem}
table.bande caption{text-align:left;color:var(--muted);
                    font:400 .72rem/1.45 var(--mono);letter-spacing:.04em;
                    padding-bottom:9px;max-width:62ch}
table.bande th{text-align:left;font:400 .68rem/1 var(--mono);letter-spacing:.06em;
               text-transform:uppercase;color:var(--muted);padding:0 14px 7px 0;
               border-bottom:1px solid var(--filet-fort)}
table.bande td{padding:10px 14px 10px 0;border-bottom:1px solid var(--filet);
               vertical-align:top}
table.bande td.d,table.bande td.b,table.bande td.m{white-space:nowrap;width:1%;
               font-family:var(--mono);font-size:.8rem}
table.bande td.b{letter-spacing:.1em}

/* ---------- accueil ---------- */
.hero{padding:8px 0 42px;border-bottom:1px solid var(--filet-fort)}
.hero h1{font-size:clamp(2.1rem,5vw,3.2rem);max-width:24ch}
.portes{display:grid;grid-template-columns:repeat(auto-fit,minmax(248px,1fr));
        gap:20px;margin:40px 0 0}
.porte{background:var(--panneau);border:1px solid var(--filet-fort);padding:20px;
       text-decoration:none;color:var(--encre);display:block}
.porte:hover,.porte:focus-visible{border-color:var(--encre)}
.porte h2{border:0;padding:0;margin:0 0 8px;font-size:1.12rem;max-width:none}
.porte p{color:var(--muted);font-size:.94rem;margin:0;max-width:none}
.porte .compte{display:block;font-family:var(--mono);font-size:.7rem;
               letter-spacing:.05em;color:var(--muted);margin-bottom:10px}
.etat{margin-top:26px;padding:14px 16px;background:var(--panneau);
      border:1px solid var(--filet-fort);font-size:.95rem;color:var(--muted);
      max-width:var(--mesure)}

/* ---------- mots, corpus ---------- */
.mot{padding:26px 0;border-top:1px solid var(--filet-fort);scroll-margin-top:24px}
.mot:first-of-type{border-top:0}
.mot h2{border:0;padding:0;margin:0 0 4px;font-size:1.3rem}
.mot .registre{font-family:var(--mono);font-size:.7rem;letter-spacing:.06em;
               color:var(--muted);text-transform:uppercase}
.mot .precision{color:var(--muted)}
.mot .renvois{font-family:var(--mono);font-size:.76rem;color:var(--muted)}
.mot.central h2::after{content:"·";color:var(--signal);margin-left:9px}
.axe{padding:34px 0;border-top:1px solid var(--filet-fort)}
.axe:first-of-type{border-top:0}
.axe h2{border:0;padding:0;margin:0 0 6px}
.ref{padding:16px 0;border-top:1px solid var(--filet)}
.ref .ligne{font-weight:600}
.ref .annee{font-family:var(--mono);font-weight:400;color:var(--muted);
            font-size:.8rem;margin-left:7px}
.ref .usage{margin:6px 0 0}

/* ---------- pied ---------- */
.pied{border-top:1px solid var(--filet-fort);background:var(--panneau);
      padding:34px 0 44px;font-size:.9rem;color:var(--muted);margin-top:62px}
.pied .cols{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:22px}
.pied .clause{margin-top:24px;max-width:var(--mesure);font-size:.85rem}

@media (max-width:720px){
  body{font-size:17px}
  main{padding:34px 0 48px}
  nav.nav{margin-left:0;width:100%}
}