/* ===========================================================
   Organic-money — blanc et noir, terminal, quatre pages courtes
   Zéro couleur (sauf la photo). Zéro arrondi. Zéro gras : l'emphase
   se fait par inversion et par la couleur du texte, jamais par la graisse.
   Échelle calibrée sur gquthier.com (copy 14px, labels mono 11-13px).
   =========================================================== */

:root{
  --ground:  #ffffff;
  --lift:    #f6f6f6;
  --invert:  #000000;

  --ink:     #000000;          /* 21:1  */
  --ink-2:   oklch(0.35 0 0);  /* 11.4:1 */
  --ink-3:   oklch(0.44 0 0);  /*  7.9:1 — remonté : le 200 est fin, le gris doit tenir */
  --ink-4:   oklch(0.58 0 0);  /*  4.6:1 — plancher, méta seulement */

  --rule:    oklch(0.82 0 0);
  --rule-2:  oklch(0.95 0 0);

  --measure: 62ch;
  --gutter:  clamp(1.25rem, 5vw, 2.5rem);
  --col:     min(100% - var(--gutter) * 2, 46rem);

  --b1: clamp(.45rem, 1vw, .7rem);
  --b2: clamp(.9rem, 2vw, 1.35rem);
  --b3: clamp(1.6rem, 3vw, 2.25rem);
  --b4: clamp(2.75rem, 6vw, 4.25rem);

  --out: cubic-bezier(.16,1,.3,1);
  --z-bar: 100;
}

*{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%;font-size:85%}  /* ponytail: la molette d'échelle globale du site */
body{
  background:var(--ground);
  color:var(--ink-2);
  font-family:Inter,ui-sans-serif,system-ui,-apple-system,sans-serif;
  font-size:clamp(.84rem,.8rem + .16vw,.92rem);
  font-weight:200;
  line-height:1.7;
  letter-spacing:.005em;
  -webkit-font-smoothing:antialiased;
  font-variant-ligatures:none;
  display:flex;flex-direction:column;min-height:100vh;
}
/* grain, très bas */
body::after{
  content:"";position:fixed;inset:0;pointer-events:none;z-index:1;opacity:.03;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='4'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E");
}

.shell{width:var(--col);margin-inline:auto}
h1,h2,h3{font-weight:300;color:var(--ink);letter-spacing:-.04em;line-height:1.08;text-wrap:balance}
p{text-wrap:pretty}
strong{color:var(--ink);font-weight:400}
a{color:inherit}
::selection{background:var(--invert);color:var(--ground)}
:focus-visible{outline:2px solid var(--ink);outline-offset:3px}

/* ------------------------- onglets ------------------------- */
.bar{
  position:sticky;top:0;z-index:var(--z-bar);
  background:color-mix(in oklch,var(--ground) 88%,transparent);
  backdrop-filter:blur(12px);
  border-bottom:1px solid var(--rule-2);
}
.bar-in{
  width:var(--col);margin-inline:auto;
  display:flex;align-items:center;gap:var(--b2);
  height:3rem;font-size:.72rem;
}
/* deux onglets, et ça doit se voir : bordure carrée, l'actif est inversé */
.tabs{display:flex;gap:.35rem}
.tabs a{
  display:block;padding:.4rem .85rem;
  border:1px solid var(--rule-2);color:var(--ink-4);
  text-decoration:none;white-space:nowrap;
  transition:color .2s var(--out),border-color .2s var(--out);
}
.tabs a:hover{color:var(--ink);border-color:var(--rule)}
.tabs a[aria-current="page"]{background:var(--invert);color:var(--ground);border-color:var(--invert)}
@media(max-width:34rem){
  .bar-in{font-size:.68rem}
  .tabs a{padding:.35rem .7rem}
}

/* ------------------------- page ------------------------- */
main{flex:1;padding-block:var(--b4) var(--b4);position:relative;z-index:2}
.title{font-size:clamp(1.85rem,6vw,2.6rem);margin-bottom:var(--b2)}

/* ------------------------- spinner (braille Codex) -------------------------
   Cellule braille : 2 colonnes x 3 rangs. Le bloc fait exactement la hauteur
   du « n » de Rayan (x-height d'Inter = .553em) et s'assoit sur la ligne de
   base : inline-block + overflow:hidden => la baseline du bloc est son bord
   bas (CSS 2.1 10.8.1). Haut et bas alignés sur le « n », rien ne dépasse.
   Les points s'allument dans l'ordre du périmètre, donc ça tourne. */
.spin{
  /* --d = diametre du point ; la gouttiere se deduit pour que 3 rangs fassent
     exactement .553em : changer --d ne casse jamais l'alignement. */
  --d:.10em;
  --g:calc((.553em - 3 * var(--d)) / 2);
  display:inline-block;vertical-align:baseline;overflow:hidden;
  margin-left:.42em;line-height:0;
  width:calc(2 * var(--d) + var(--g));height:.553em;
}
.spin i{
  display:inline-block;vertical-align:top;width:var(--d);height:var(--d);margin-bottom:var(--g);
  border-radius:50%;background:var(--ink);opacity:.14;
}
.spin i:nth-child(2n){margin-left:var(--g)}
@media (prefers-reduced-motion: no-preference){
  .spin i{animation:spin-dot 1s linear infinite}
  /* ordre horaire : haut-gauche, haut-droite, colonne droite en descendant,
     colonne gauche en remontant */
  .spin i:nth-child(1){animation-delay:0s}
  .spin i:nth-child(2){animation-delay:.1667s}
  .spin i:nth-child(4){animation-delay:.3333s}
  .spin i:nth-child(6){animation-delay:.5s}
  .spin i:nth-child(5){animation-delay:.6667s}
  .spin i:nth-child(3){animation-delay:.8333s}
}
@keyframes spin-dot{
  0%{opacity:1}
  45%{opacity:.14}
  100%{opacity:.14}
}
.claim{
  color:var(--ink);font-weight:300;font-size:clamp(.9rem,2.4vw,1.02rem);
  letter-spacing:-.02em;line-height:1.4;max-width:30ch;margin-bottom:var(--b3);
}
.lead{max-width:var(--measure);color:var(--ink-2);margin-bottom:var(--b3)}
.meta{color:var(--ink-4);font-size:.7rem;letter-spacing:.05em;margin-bottom:var(--b3)}
/* les logos : la seule navigation sortante de la home */
.liens{display:flex;gap:1.1rem;align-items:center;margin-bottom:var(--b3)}
.liens a{display:block;color:var(--ink-4);transition:color .2s var(--out)}
.liens a:hover{color:var(--ink)}
.liens svg{display:block;width:17px;height:17px}

/* ------------------------- accordéons ------------------------- */
.fold{border-top:1px solid var(--rule-2)}
.fold:last-of-type{border-bottom:1px solid var(--rule-2)}
.fold summary{
  list-style:none;cursor:pointer;padding-block:var(--b2);
  display:flex;align-items:baseline;gap:.75rem;
  color:var(--ink);font-weight:300;font-size:.75rem;letter-spacing:.05em;
  transition:opacity .2s var(--out);
}
.fold summary::-webkit-details-marker{display:none}
.fold summary::before{content:"[+]";color:var(--ink-4);flex:none;font-weight:300;letter-spacing:0}
.fold[open] summary::before{content:"[-]";color:var(--ink)}
/* les dates de la bio : mêmes plis, libellé un cran plus gros */
.bio .fold summary{font-size:.82rem;letter-spacing:.04em;padding-block:calc(var(--b2) * .8)}
.bio .fold .body{padding-bottom:var(--b2)}
.bio .fold .body p:last-child{margin-bottom:0}
.fold summary:hover{opacity:.72}
.fold .body{padding-bottom:var(--b3);max-width:var(--measure)}
.fold .body p{color:var(--ink-2);margin-bottom:var(--b2)}
.fold .body p:last-child{margin-bottom:0}

/* définitions dans un accordéon */
.defs{margin-block:var(--b2)}
.defs div{padding-block:var(--b2);border-top:1px solid var(--rule-2)}
.defs dt{color:var(--ink);font-weight:300;letter-spacing:.03em;margin-bottom:.3rem}
.defs dd{color:var(--ink-3)}
/* la liste des projets sur la home : une entrée cliquable, pas une carte */
.label{margin-top:var(--b4);margin-bottom:.4rem;text-transform:lowercase}
.projets div:last-child{border-bottom:1px solid var(--rule-2)}
.projets .logo{display:block;width:22px;height:auto;margin-bottom:.6rem;opacity:.9}
.projets dt a{text-decoration:none}
.projets dt a:hover{opacity:.7}

/* chapitres : un titre court, du texte dessous, pas d'accordéon (structure gquthier/BizOS) */
.chap{
  margin-top:var(--b4);margin-bottom:var(--b2);
  font-size:.78rem;letter-spacing:.05em;line-height:1.3;color:var(--ink);
}

/* citation : inversion, pas de couleur */
blockquote{
  background:var(--invert);color:var(--ground);
  padding:var(--b3);margin-block:var(--b3);
  font-weight:300;letter-spacing:-.03em;line-height:1.35;
  font-size:clamp(.92rem,2.6vw,1.1rem);
}
blockquote span{display:block;opacity:.55}

/* encadré plein, jamais de barre latérale */
.frame{
  border:1px solid var(--rule);padding:var(--b2) var(--b3);margin-top:var(--b3);
  max-width:var(--measure);color:var(--ink-2);background:var(--lift);
}

/* ------------------------- fondateur ------------------------- */
.still{margin-block:var(--b3);max-width:16rem}
/* la peinture est la seule couleur du site : elle prend toute la colonne */
.oeuvre{max-width:none}
.still img{display:block;width:100%;height:auto;border:1px solid var(--rule);}
.still figcaption{margin-top:.85rem;color:var(--ink-3);font-weight:300;font-size:.72rem;max-width:44ch;line-height:1.5}
.bio{color:var(--ink-2)}
.bio p{max-width:72ch;margin-bottom:.85rem}
.bio a{color:var(--ink);text-decoration:none;border-bottom:1px solid var(--rule)}
.bio a:hover{border-color:var(--ink)}
.an{color:var(--ink-4);letter-spacing:.05em;margin-right:.6rem}

/* la planche : les deux clips à gauche, le DM à droite, une seule bande */
.planche{margin-block:var(--b2) var(--b3);display:grid;grid-template-columns:17rem 1fr;
  gap:.5rem;align-items:start}
.planche .duo{display:grid;grid-template-columns:1fr 1fr;gap:.5rem}
.planche img{display:block;width:100%;height:auto;border:1px solid var(--rule)}
.planche .large{align-self:start}
.planche figcaption{grid-column:1/-1}
@media(max-width:40rem){.planche{grid-template-columns:1fr}}
.planche figcaption{margin-top:.35rem;color:var(--ink-3);font-size:.72rem}

/* ------------------------- l'écart ------------------------- */
.gap svg{display:block;width:100%;height:clamp(7rem,16vw,10.5rem);overflow:visible}
.bar-flat{fill:oklch(0.81 0 0)}
.bar-hit{fill:var(--ink)}
.median{stroke:var(--ink-3);stroke-width:1;stroke-dasharray:3 4;vector-effect:non-scaling-stroke}
.gap .tag{display:block;margin-top:.6rem;color:var(--ink-4);font-size:.68rem}
.gap .tag i{display:inline-block;width:1.5rem;height:0;vertical-align:middle;
  border-top:1px dashed currentColor;margin-right:.5rem}
.gap figcaption{margin-top:var(--b2);color:var(--ink-3);max-width:52ch;font-size:.76rem}

/* ------------------------- effets mesurés (d de Cohen) ------------------------- */
.effets{margin-block:var(--b3);max-width:var(--measure)}
.effets .row{display:grid;gap:.45rem;padding-block:.8rem;border-top:1px solid var(--rule-2)}
.effets .row:last-of-type{border-bottom:1px solid var(--rule-2)}
.effets .k{color:var(--ink-2);font-size:.76rem;line-height:1.4}
.effets .v{color:var(--ink);font-size:.76rem;font-variant-numeric:tabular-nums}
.effets .b{position:relative;height:12px}
/* le zéro : tout se lit par rapport à lui */
.effets .b::before{content:"";position:absolute;left:50%;top:-8px;bottom:-8px;width:1px;background:var(--ink-4)}
.effets i{position:absolute;top:0;height:12px;display:block}
.effets .neg{right:50%;width:calc(var(--v) * 1.25%);background:oklch(0.81 0 0)}
.effets .pos{left:50%;width:calc(var(--v) * 1.25%);background:var(--ink)}
@media(min-width:34rem){
  .effets .row{grid-template-columns:minmax(0,15rem) 1fr 3.5rem;align-items:center;gap:var(--b2)}
  .effets .v{text-align:right}
}
.effets figcaption{margin-top:var(--b2);color:var(--ink-3);font-size:.72rem;max-width:54ch;line-height:1.55}
.effets figcaption span{display:block;margin-top:.35rem;color:var(--ink-4);font-size:.68rem}

/* ------------------------- registre chiffré ------------------------- */
.ledger{margin-block:var(--b3);max-width:var(--measure)}
.ledger div{
  display:grid;grid-template-columns:minmax(6.5rem,auto) 1fr;gap:var(--b2);
  padding-block:var(--b2);border-top:1px solid var(--rule-2);align-items:baseline;
}
.ledger div:last-child{border-bottom:1px solid var(--rule-2)}
.ledger dt{color:var(--ink);font-weight:300;font-size:clamp(1.1rem,2.6vw,1.35rem);
  letter-spacing:-.04em;line-height:1;font-variant-numeric:tabular-nums}
.ledger dd{color:var(--ink-3);font-size:.78rem;line-height:1.65}
.ledger dd span{display:block;color:var(--ink-4);font-size:.68rem;margin-top:.2rem}
@media(max-width:34rem){.ledger div{grid-template-columns:1fr;gap:.3rem}}

/* ------------------------- action ------------------------- */
.act{
  display:inline-flex;align-items:center;gap:.5rem;text-decoration:none;
  padding:.65rem 1rem;font-weight:400;font-size:.72rem;letter-spacing:.04em;
  background:var(--invert);color:var(--ground);border:1px solid var(--invert);
  transition:transform .3s var(--out),background .3s var(--out),color .3s var(--out);
}
.act:hover{transform:translateY(-2px)}
.act-2{background:transparent;color:var(--ink);border-color:var(--rule)}
.act-2:hover{border-color:var(--ink)}
.acts{display:flex;gap:.6rem;flex-wrap:wrap;margin-top:var(--b3)}
.bar .act{padding:.3rem .65rem;font-size:.68rem}

.next{
  margin-top:var(--b4);padding-top:var(--b3);border-top:1px solid var(--rule-2);
  font-size:.72rem;color:var(--ink-4);
}
.next a{color:var(--ink);text-decoration:none;border-bottom:1px solid var(--rule)}
.next a:hover{border-color:var(--ink)}

footer{
  border-top:1px solid var(--rule-2);padding-block:var(--b2);
  font-size:.68rem;color:var(--ink-4);position:relative;z-index:2;
}
.foot-in{display:flex;justify-content:space-between;gap:var(--b2);flex-wrap:wrap}
footer a{color:var(--ink-3);text-decoration:none}
footer a:hover{color:var(--ink)}
/* interrupteur du son : même poids typo que le reste du pied */
.sfx{
  font:inherit;color:var(--ink-4);background:none;border:0;padding:0;cursor:pointer;
  letter-spacing:.04em;transition:color .2s var(--out);
}
.sfx:hover{color:var(--ink)}
.sfx[aria-pressed="false"]{text-decoration:line-through}

/* ------------------------- mouvement ------------------------- */
@media (prefers-reduced-motion: no-preference){
  @keyframes in{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
  main > .shell > *{animation:in .7s var(--out) backwards}
  main > .shell > *:nth-child(2){animation-delay:.05s}
  main > .shell > *:nth-child(3){animation-delay:.1s}
  main > .shell > *:nth-child(4){animation-delay:.15s}
  main > .shell > *:nth-child(n+5){animation-delay:.2s}

  /* dépliage fluide : ::details-content anime la hauteur d'un <details>, natif,
     zéro JS. interpolate-size rend `auto` animable. Firefox ne l'a pas encore :
     là-bas ça s'ouvre d'un coup, comme avant. */
  :root{interpolate-size:allow-keywords}
  .fold::details-content{
    block-size:0;opacity:0;overflow:hidden;
    transition:block-size .42s cubic-bezier(.4,0,.2,1),opacity .3s ease,content-visibility .42s allow-discrete;
  }
  .fold[open]::details-content{block-size:auto;opacity:1}
}

/* =====================================================================
   ORGANIC-MONEY — bloc ajouté le 2026-08-19. À COLLER À LA FIN de style.css.
   Ne pas remonter ce bloc plus haut dans le fichier : plusieurs règles
   gagnent par l'ordre source, pas par la spécificité.

   (a) remplace des règles existantes  — sections 1 et 2
   (b) nouveau et global               — section 0
   (c) nouveau et propre à organic-money.html (body class="om") — sections 3 à 6
   ===================================================================== */

/* --- 0. (b) TOKENS AJOUTÉS -------------------------------------------
   Aucun rendu ne change tant qu'ils ne sont pas lus, et seuls .bar/.tabs
   et les sélecteurs .om les lisent. */
:root{
  --sans:"Inter",-apple-system,BlinkMacSystemFont,"Helvetica Neue",Arial,sans-serif;
  --mono:"Azeret Mono",ui-monospace,"SF Mono",Menlo,monospace;
  --x:0.545;                        /* hauteur d'x mesurée : Inter 0,5459 / Azeret 0,5440 */
  --in:cubic-bezier(.4,0,.9,.35);   /* courbe de FERMETURE : sèche, elle retombe */
  --bar-h:3rem;                     /* doit rester égal à .bar-in{height} (l.71) */
  --veil:2.25rem;                   /* longueur de la dissolution SOUS la barre */
}

/* --- 1. (a) LA BARRE — remplace .bar (l.62-67) ------------------------
   Tue border-bottom (l.66) et la bande opaque (l.64). Le voile passe sur
   ::before pour pouvoir s'éteindre en dégradé au lieu de buter sur une
   arête, et pour ne rien peindre du tout en haut de page. */
.bar{background:none;border-bottom:0;backdrop-filter:none;-webkit-backdrop-filter:none}
.bar::before{
  content:"";position:absolute;inset:0 0 calc(-1 * var(--veil)) 0;pointer-events:none;
  -webkit-backdrop-filter:blur(7px);backdrop-filter:blur(7px);
  /* stops ABSOLUS et pas en % : la zone opaque doit couvrir exactement la
     hauteur de la barre, sinon les filets repassent en clair sous les onglets */
  background:linear-gradient(to bottom,
    var(--ground) 0 var(--bar-h),
    color-mix(in oklch,var(--ground) 55%,transparent) calc(var(--bar-h) + .8rem),
    transparent 100%);
  -webkit-mask-image:linear-gradient(to bottom,#000 0 var(--bar-h),transparent 100%);
          mask-image:linear-gradient(to bottom,#000 0 var(--bar-h),transparent 100%);
}
@supports not (backdrop-filter:blur(1px)){
  .bar::before{background:linear-gradient(to bottom,var(--ground) 0 var(--bar-h),transparent 100%)}
}
.bar-in{position:relative;z-index:1}

/* --- 2. (a) LES ONGLETS — remplace .tabs, .tabs a, :hover, [aria-current]
   (l.74-86). Tue les bordures (l.77) et le pavé blanc inversé (l.82).
   Les encres restent celles du système — --ink-4 (4,6:1) inactif, --ink-2
   au survol, --ink actif. Pas d'opacité fractionnaire sur du texte : à
   opacity .38 le blanc tombe à 3,38:1 et rate le seuil AA. */
.tabs{gap:var(--b2)}
.tabs a{
  position:relative;display:block;padding:.4rem 0;
  border:0;background:none;color:var(--ink-4);
  transition:color 200ms var(--out);
}
.tabs a::after{           /* le trait fait la largeur DU MOT, ce n'est pas un filet */
  content:"";position:absolute;left:0;right:0;bottom:.05rem;height:1px;
  background:currentColor;transform:scaleX(0);transform-origin:0 50%;
  transition:transform 240ms var(--out);
}
.tabs a:hover{color:var(--ink-2)}
.tabs a:hover::after{transform:scaleX(1)}
/* « tu es ici » = le mot s'écarte. Aucun trait, aucun fond, aucune arête.
   Le color: est obligatoire, il annule le color:var(--ground) de la l.82. */
.tabs a[aria-current="page"]{
  background:none;border-color:transparent;color:var(--ink);letter-spacing:.09em;
}
.tabs a[aria-current="page"]::after,
.tabs a[aria-current="page"]:hover::after{transform:scaleX(0)}
@media(max-width:34rem){
  .tabs{gap:1rem}
  .tabs a{padding:.35rem 0}
  .bar{--veil:1.6rem}
}
/* :focus-visible (l.59) n'est pas touché : c'est le seul rectangle qui
   reste sur la page, et il doit rester. */

/* --- 3. (c) LA SECONDE POLICE ----------------------------------------
   Azeret Mono = le débit. Inter = ce sur quoi on appuie. Une seule graisse,
   400 : l'emphase est un changement de POLICE, jamais de graisse — c'est la
   doctrine de l'en-tête (l.3-4), pas son contraire. L'échelle ne bouge pas :
   .chap reste un label de .8rem, il ne devient pas un titre d'article. */
.om .title,.om .claim,.om .chap,.om strong{
  font-family:var(--sans);
  font-weight:400;                 /* les 300 des l.54 et l.92 seraient des mensonges :
                                      un seul fichier Inter 400 est chargé */
  font-size-adjust:var(--x);       /* fait monter Helvetica/Arial pendant le swap */
  font-synthesis-weight:none;      /* interdit tout faux gras */
}
.om .title{letter-spacing:-.035em;line-height:1.10}  /* 1.08 coupe les capitales accentuées :
                                                        les caps d'Inter montent 4,2 % plus haut */
.om .claim{letter-spacing:-.015em;line-height:1.45}
.om .chap{letter-spacing:.06em}                      /* +.01em : Inter est 9,1 % plus étroit */
.om strong{letter-spacing:.005em}

/* la carte, entière et non recadrée : son fond blanc est assumé, c'est la
   seule surface claire de la page. Bornée à 36rem — sous la colonne (46rem)
   pour qu'elle ne pèse pas plus que le titre qui la précède. */
.om .carte{display:block;width:100%;max-width:36rem;height:auto;margin-bottom:var(--b3)}

/* --- 4. (c) LES SIX CHAPITRES PLIANTS --------------------------------
   <details class="chapt">. Les six sont FERMÉS au chargement : la page se lit
   d'abord comme une table des matières, on déplie ce qu'on veut. Zéro CLS,
   texte indexable, lisible sans JS, Ctrl-F fonctionne (Chrome déplie tout seul).
   .fold (fannity.html, l.104-118) n'est visé par aucune règle ci-dessous. */
.om main > .shell{counter-reset:chap}
.om .chapt{position:relative;counter-increment:chap;view-timeline:--ch block}
/* la règle en ::before et pas en border-top : un border ne s'anime pas en transform */
.om .chapt::before{
  content:"";position:absolute;top:0;left:0;right:0;height:1px;
  background:var(--rule-2);transform:scaleX(1);transform-origin:0 50%;
}
.om .chapt:last-of-type::after{
  content:"";position:absolute;bottom:0;left:0;right:0;height:1px;background:var(--rule-2);
}
.om .chapt > summary{
  list-style:none;cursor:pointer;display:flex;align-items:baseline;gap:.85rem;
  padding-block:var(--b2);
}
.om .chapt > summary::-webkit-details-marker{display:none}
.om .chapt > summary::marker{content:""}
/* le numéro reste en Azeret Mono, collé au titre en Inter : c'est là que le
   contraste des deux polices se lit, sur deux mots côte à côte */
.om .chapt > summary::before{
  content:counter(chap,decimal-leading-zero);flex:none;
  font-family:var(--mono);font-weight:300;font-size:.68rem;letter-spacing:.06em;
  font-variant-numeric:tabular-nums;color:var(--ink-4);
}
/* le marqueur : un + qui pivote en ×. `content` ne s'interpole pas, une rotation si.
   C'est pourquoi ce n'est pas le [+]/[-] de .fold (l.113-114), qui sautera toujours. */
.om .chapt > summary::after{
  content:"+";margin-left:auto;flex:none;
  font-family:var(--mono);font-weight:300;font-size:.85rem;color:var(--ink-4);
  transition:transform 240ms var(--out),color 240ms var(--out);
}
.om .chapt[open] > summary::after{transform:rotate(45deg)}
.om .chapt > summary:hover::after{color:var(--ink)}
.om .chapt[open] > summary:hover::after{transform:rotate(45deg);color:var(--ink)}
.om .chapt .chap{
  margin:0;font-size:.8rem;line-height:1.3;color:var(--ink);
  transition:transform 200ms var(--out);
}
.om .chapt > summary:hover .chap{transform:translateX(.5ch)}
/* le pli. ::details-content : Chrome 131 / Firefox 143 / Safari 18.4.
   Non supporté → le sélecteur est invalide, la règle tombe, <details> reprend
   son comportement natif (ouverture instantanée). Aucun contenu perdu.
   Ouvrir et fermer ne sont pas le même geste : 380 ms en sortie, 260 ms sec. */
.om .chapt::details-content{
  display:grid;grid-template-rows:0fr;content-visibility:hidden;
  transition:grid-template-rows 260ms var(--in),content-visibility 260ms allow-discrete;
}
.om .chapt[open]::details-content{
  grid-template-rows:1fr;content-visibility:visible;
  transition-duration:380ms;transition-timing-function:var(--out);
}
/* overflow:clip et PAS hidden — `hidden` créerait un conteneur de défilement
   et view() mesurerait les <strong> contre LUI au lieu du viewport. */
.om .ch-body{min-height:0;overflow:clip;padding-bottom:var(--b3);max-width:var(--measure)}
.om .ch-body > .lead:last-child{margin-bottom:0}
/* la pile se referme sur son propre filet : celui de .next (l.230) ferait doublon */
.om .next{border-top:0;padding-top:0}

/* --- 5. (c) MOUVEMENT AU CHARGEMENT ----------------------------------
   Déclaré DANS @media no-preference, comme le bloc l.245-253 : en reduce ces
   animations n'existent pas, il n'y a rien à annuler et pas de !important. */
@media (prefers-reduced-motion: no-preference){
  @keyframes om-boot{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
  /* un balayage, pas un typewriter : zéro caractère injecté, zéro reflow,
     texte sélectionnable et lu par un lecteur d'écran dès la frame 1.
     Les inset négatifs évitent de raser les jambages et la chasse. */
  @keyframes om-balaye{
    from{clip-path:inset(-.22em 100%  -.30em -.06em)}
    to  {clip-path:inset(-.22em -.20em -.30em -.06em)}
  }
  @keyframes om-lignes{
    from{clip-path:inset(-.10em -.20em 100%  -.06em)}
    to  {clip-path:inset(-.10em -.20em -.30em -.06em)}
  }
  @keyframes om-caret{0%,50%{opacity:0}51%,100%{opacity:1}}

  body.om main > .shell > *{animation:om-boot 620ms var(--out) backwards}
  body.om main > .shell > *:nth-child(2)   {animation-delay: 60ms}
  body.om main > .shell > *:nth-child(3)   {animation-delay:120ms}
  body.om main > .shell > *:nth-child(4)   {animation-delay:180ms}
  body.om main > .shell > *:nth-child(5)   {animation-delay:240ms}
  body.om main > .shell > *:nth-child(6)   {animation-delay:300ms}
  body.om main > .shell > *:nth-child(7)   {animation-delay:360ms}
  body.om main > .shell > *:nth-child(8)   {animation-delay:420ms}
  body.om main > .shell > *:nth-child(9)   {animation-delay:480ms}
  body.om main > .shell > *:nth-child(10)  {animation-delay:540ms}
  body.om main > .shell > *:nth-child(n+11){animation-delay:600ms}
  /* le titre : balayage seul, il ne participe pas à la cascade */
  body.om main > .shell > .title{animation:om-balaye 720ms var(--out) both}
  /* le chapeau : révélation par le haut, ligne après ligne. Un seul paragraphe
     la reçoit — la même chose sur douze ferait une machine à sous.
     nth-of-type et pas nth-child : la carte s'intercale avant lui. */
  body.om main > .shell > .lead:nth-of-type(2){animation-name:om-lignes;animation-duration:820ms}
  /* le curseur, borné à 4 cycles = 4,24 s (WCAG 2.2.2 interdit au-delà de 5 s) */
  .om .claim::after{animation:om-caret 1.06s step-end 4 both}
}
/* le glyphe existe même en reduce : c'est un signe, pas une animation */
.om .claim::after{content:"_";font-family:var(--mono);margin-left:.14ch;color:var(--ink-3)}

/* --- 6. (c) MOUVEMENT AU DÉFILEMENT — zéro JS ------------------------
   scroll-driven-animations : Chrome 115+, Safari 26+. Firefox garde le flag
   layout.css.scroll-driven-animations.enabled DÉSACTIVÉ en stable (152).
   Tout est donc sous @supports, et l'état hors du @supports est l'état FINAL :
   sur Firefox la page est au repos, c'est-à-dire finie. Rien ne manque, rien
   ne casse ; le voile de barre y est simplement peint en permanence. */
@supports (animation-timeline:view()){
 @media (prefers-reduced-motion: no-preference){
  @keyframes om-voile {from{opacity:0}                             to{opacity:1}}
  @keyframes om-trace {from{transform:scaleX(0)}                   to{transform:scaleX(1)}}
  @keyframes om-numero{from{opacity:0;transform:translateX(-.6ch)} to{opacity:1;transform:none}}
  @keyframes om-allume{from{opacity:.6}                            to{opacity:1}}

  /* en haut de page la barre ne peint RIEN : le grain (l.48-51) la traverse */
  .bar::before{
    animation-name:om-voile;animation-duration:auto;animation-timing-function:linear;
    animation-fill-mode:both;animation-timeline:scroll(root block);animation-range:0 4rem;
  }
  /* le filet de 1px est déjà le matériau du système (l.104, 122, 186) :
     le faire se dessiner est le seul reveal qui parle cette langue */
  .om .chapt::before{
    animation-name:om-trace;animation-duration:auto;animation-timing-function:linear;
    animation-fill-mode:both;animation-timeline:--ch;animation-range:cover 0% cover 32%;
  }
  .om .chapt > summary::before{
    animation-name:om-numero;animation-duration:auto;animation-timing-function:linear;
    animation-fill-mode:both;animation-timeline:--ch;animation-range:cover 4% cover 30%;
  }
  /* le <strong> Inter arrive après sa phrase. Plancher .6 = 7,4:1 sur noir,
     donc lisible à tout moment de la rampe. */
  .om .ch-body strong{
    animation-name:om-allume;animation-duration:auto;animation-timing-function:linear;
    animation-fill-mode:both;animation-timeline:view(block);animation-range:cover 10% cover 44%;
  }
 }
}

/* --- 7. RÉDUCTION DE MOUVEMENT ---------------------------------------
   On ne supprime pas l'affordance, on retire le déplacement. Les six
   <details> s'ouvrent et se ferment (natif, instantané), le focus clavier est
   intact, les filets sont pleins, le voile est peint, le curseur est allumé
   fixe. Aucune information n'est portée par une animation seule.
   Corrige au passage les quatre transitions des l.79/99/110/221, qui étaient
   HORS du media query et restaient actives en reduce. */
@media (prefers-reduced-motion: reduce){
  .bar::before,.tabs a,.tabs a::after,.act,.liens a,.fold summary,
  .om *,.om *::before,.om *::after{animation:none !important;transition:none !important}
  .om .chapt::details-content{transition:none}
  .bar::before{opacity:1}
  .tabs a::after{transform:scaleX(0)}
  .om .chapt::before{transform:scaleX(1)}
  .om .chapt > summary::before{opacity:1;transform:none}
  .om .ch-body strong{opacity:1}
  .om .title,.om .lead{clip-path:none}
  .om .claim::after{opacity:1}
  .om .chapt[open] > summary::after{transform:rotate(45deg)}
  .om .chapt::details-content{grid-template-rows:0fr;content-visibility:hidden}
  .om .chapt[open]::details-content{grid-template-rows:1fr;content-visibility:visible}
  .act:hover{transform:none}
}


/* la vignette de l'appel : petite, pas une planche */
.vignette{display:block;width:14rem;max-width:100%;height:auto;border:1px solid var(--rule);margin-top:.5rem}