/* ============================================================
   LIRE DEBORD — LES GESTES (mission `gestes`, oct. 2026).

   Chargée sur toutes les pages APRÈS les feuilles de page (`tete()`,
   index.html, 404.html) : ce sont des surcharges, et une surcharge placée
   avant la règle qu'elle corrige perd (piège payé sur la passe de forme).
   Elle n'ajoute que des TRANSITIONS et des états de survol à des sélecteurs
   qui existent déjà ; elle ne touche à aucun jeton de couleur (les modes
   jour / nuit / fac-similé les redéfinissent ailleurs, elle les lit).

   Le geste dit la DA, il ne la décore pas : un lien se souligne comme une
   flèche se trace, une carte se décolle du papier comme les fragments du
   héros, une flèche avance. Durées courtes (120–300 ms), la courbe de la
   maison. RIEN ne bouge sous `prefers-reduced-motion` (html.no-motion,
   posé par le script de tête avant le premier rendu) : l'état fini, tout
   de suite.
   Mise en cache : toute modification se bumpe dans le `?v=` de `tete()`
   (tools/gen-site.mjs), d'index.html et de 404.html.
   ============================================================ */

/* l'ombre d'un fragment décollé : la nuit, une ombre d'encre claire serait
   une lueur — elle reste sombre. Ce n'est pas un jeton de couleur : c'est une
   valeur propre à ce fichier, lue d'après le contrat html[data-mode]. */
:root{--ld-ombre:rgba(20,19,15,.26);--ld-ombre-p:rgba(20,19,15,.10)}
html[data-mode="nuit"]{--ld-ombre:rgba(0,0,0,.55);--ld-ombre-p:rgba(0,0,0,.30)}

/* ---------- 1. LES TRANSITIONS ENTRE PAGES ----------
   View Transitions de navigation entre documents : la barre du haut et la
   barre latérale ne bougent pas (elles ont un nom, donc leur propre groupe,
   identique d'une page à l'autre) ; le reste se fond et monte de six pixels.
   Sous mouvement réduit, la règle n'existe pas : navigation ordinaire. */
@media (prefers-reduced-motion: no-preference){
  @view-transition{navigation:auto}
  .tb{view-transition-name:ld-tb}
  .sb{view-transition-name:ld-sb}
  ::view-transition-old(root){animation:ld-vt-sort .16s cubic-bezier(.4,0,1,1) both}
  ::view-transition-new(root){animation:ld-vt-entre .3s cubic-bezier(.16,1,.3,1) both}
  ::view-transition-group(ld-tb),::view-transition-group(ld-sb){animation-duration:.2s}
}
@keyframes ld-vt-sort{to{opacity:0}}
@keyframes ld-vt-entre{from{opacity:0;transform:translateY(6px)}}

/* ---------- 2. LA BASCULE DE MODE : une révélation circulaire ----------
   mouvement.js pose html.vt-mode le temps d'une transition de MÊME document
   et anime le clip-path de la nouvelle image depuis le bouton cliqué. Pendant
   ce temps la page entière est une seule image : la barre du haut et la barre
   latérale perdent leur nom, sinon elles changeraient de couleur d'un bloc
   pendant que le reste se dévoile en cercle. */
html.vt-mode .tb,html.vt-mode .sb{view-transition-name:none}
html.vt-mode::view-transition-old(root),html.vt-mode::view-transition-new(root){animation:none;mix-blend-mode:normal}
html.vt-mode::view-transition-old(root){z-index:1}
html.vt-mode::view-transition-new(root){z-index:2}

/* ---------- 3. LES MICRO-GESTES ---------- */
html:not(.no-motion){
  /* un lien de prose : le soulignement du repos est pâle ; au survol un trait
     rouge se TIRE de gauche à droite, comme une flèche du Naked City. Le
     soulignement reste au repos : un lien se reconnaît sans la couleur. */
  & .prose a:not([class]),& .sec-lede a:not([class]){
    text-decoration-color:rgba(var(--fleche-rgb),.45);
    background:linear-gradient(var(--fleche),var(--fleche)) 0 100%/0 2px no-repeat;
    transition:background-size .3s var(--ease),text-decoration-color .2s,color .2s}
  & .prose a:not([class]):hover,& .sec-lede a:not([class]):hover{background-size:100% 2px;text-decoration-color:transparent}

  /* la flèche d'un bouton ou d'une sortie avance au survol, celle du retour recule */
  & .btn .fl,& .revenir svg,& .nf-liens svg{transition:translate .22s var(--ease)}
  & .btn:hover .fl,& .nf-liens a:hover svg{translate:4px 0}
  & .revenir a:hover svg{translate:-3px 0}
  & .so a:hover .so-f{transform:translateX(4px)}

  /* le bouton s'enfonce d'un pixel (translate, qui se compose avec le
     transform du survol au lieu de le remplacer) */
  & .btn,& .rc-f,& .ls-b,& .pl-b,& .rv-vers,& .ld-haut,& .gd-som a{transition-property:transform,translate,background,border-color,color,box-shadow;transition-duration:.2s;transition-timing-function:var(--ease)}
  & .btn:active,& .rc-f:active,& .ls-b:active,& .pl-b:active,& .rv-vers:active,& .ld-haut:active,& .gd-som a:active{translate:0 1px;transition-duration:.06s}

  /* UNE CARTE SE DÉCOLLE DU PAPIER — le geste du héros de l'accueil : l'ombre
     se creuse, un ou deux pixels de levée. Les cartes qui avaient déjà un
     transform au survol (.rv-c, .rv-e, .so) le gardent : on n'ajoute que
     l'ombre. Les autres reçoivent `translate`. */
  & .rv-c.ok,& .rv-e a,& .so a,& .sds-chap,& .gd-nums a,& .nf-liens a,& .rv-r a,& .cp-tuile,& .mg-ct,& .th-c.ok,& .gl-c a{
    transition:border-color .22s,background .22s,transform .25s var(--ease),translate .25s var(--ease),box-shadow .25s var(--ease)}
  & .rv-c.ok:hover,& .rv-e a:hover,& .so a:hover,& .nf-liens a:hover{box-shadow:0 1px 0 var(--ld-ombre-p),0 10px 22px -12px var(--ld-ombre)}
  & .sds-chap:hover,& .gd-nums a:hover,& .rv-r a:hover,& .cp-tuile:hover,& .mg-ct:hover{translate:0 -1px;box-shadow:0 1px 0 var(--ld-ombre-p),0 10px 22px -12px var(--ld-ombre)}
  & .th-c.ok:hover,& .gl-c a:hover{translate:0 -1px;box-shadow:0 4px 8px -4px var(--ld-ombre)}

  /* les chevrons qui ne tournaient pas en douceur */
  & .nt-quiz summary::after{transition:transform .25s var(--ease),top .25s var(--ease)}

  /* LE MARQUEUR DE LA PAGE COURANTE dans la barre latérale : il se pose en se
     traçant de haut en bas à l'arrivée ; au survol d'une autre entrée, un
     trait gris en amorce l'endroit. */
  & .sb-i::before{content:"";position:absolute;left:6px;top:8px;bottom:8px;width:3px;border-radius:2px;background:var(--border-strong);transform:scaleY(0);transform-origin:50% 0;transition:transform .22s var(--ease),background .2s}
  /* (le trait gris d'amorce au survol a cédé la place à la flèche de la 2e
     passe, § 6 : deux signes pour le même survol en faisaient un de trop) */
  & .sb-i[aria-current]::before{background:var(--fleche);transform:none;animation:ld-marque .42s var(--ease) .08s both}
}
@keyframes ld-marque{from{transform:scaleY(0)}}

/* LES DETAILS S'OUVRENT EN DOUCEUR là où le navigateur sait animer jusqu'à
   `auto` (::details-content + interpolate-size) ; ailleurs, instantanés. La
   liste est nommée : les cartes de l'accueil (.plq) et le sommaire de la
   marge d'un numéro (.rv-somm-d, ouvert ou fermé selon la largeur) ne sont
   pas concernés. */
@supports selector(::details-content){
  html:not(.no-motion) :is(.nt-quiz details,.gd-q,.pl-s,.rv-index){interpolate-size:allow-keywords}
  html:not(.no-motion) :is(.nt-quiz details,.gd-q,.pl-s,.rv-index)::details-content{block-size:0;overflow-y:clip;transition:block-size .28s var(--ease),content-visibility .28s allow-discrete}
  html:not(.no-motion) :is(.nt-quiz details,.gd-q,.pl-s,.rv-index)[open]::details-content{block-size:auto}
}
/* l'index de la revue n'avait pas de chevron : il en reçoit un, qui tourne */
.rv-index>summary::after{content:"";display:inline-block;width:7px;height:7px;margin-left:10px;border-right:2px solid currentColor;border-bottom:2px solid currentColor;transform:rotate(45deg) translateY(-3px)}
.rv-index[open]>summary::after{transform:rotate(-135deg) translateY(-1px)}
html:not(.no-motion) .rv-index>summary::after{transition:transform .25s var(--ease)}

/* ---------- 4. LA PALETTE DE COMMANDE (⌘K, Ctrl+K, « / ») ----------
   Un <dialog> modal : le focus y est piégé par le navigateur, Échap le ferme,
   mouvement.js rend le focus à ce qui l'avait ouvert. Papier, encre, rouge,
   Inter. Chaque option fait 44 px de haut. */
.ldp{position:fixed;inset:0;margin:0;padding:0;border:0;background:transparent;max-width:none;max-height:none;width:100%;height:100%;color:var(--encre);font-family:var(--f-ui);overflow:hidden}
.ldp:not([open]){display:none}
.ldp::backdrop{background:rgba(20,19,15,.34)}
.ldp-c{position:absolute;left:50%;top:max(12px,11vh);translate:-50% 0;width:min(640px,calc(100vw - 24px));max-height:calc(100dvh - max(24px,11vh) - 12px);display:flex;flex-direction:column;background:var(--blanc);border:1px solid var(--border-strong);border-radius:16px;box-shadow:0 1px 0 var(--ld-ombre-p),0 28px 60px -20px var(--ld-ombre);overflow:hidden}
.ldp-h{display:flex;align-items:center;gap:10px;padding:0 12px 0 16px;border-bottom:1px solid var(--border)}
.ldp-h>svg{width:18px;height:18px;flex:none;fill:none;stroke:var(--fleche);stroke-width:2;stroke-linecap:round}
.ldp-q{flex:1;min-width:0;height:56px;border:0;background:transparent;font:inherit;font-size:1.06rem;color:var(--encre);outline:none}
.ldp-q::placeholder{color:var(--muted);opacity:1}
.ldp-q::-webkit-search-cancel-button{display:none}
.ldp kbd{font-family:var(--f-ui);font-size:.72rem;font-weight:600;color:var(--trait);background:var(--papier);border:1px solid var(--border);border-bottom-width:2px;border-radius:5px;padding:1px 6px;line-height:1.5;white-space:nowrap}
.ldp-x{flex:none;display:inline-flex;align-items:center;gap:6px;min-height:32px;padding:0 4px 0 8px;border:0;border-radius:8px;background:transparent;font:inherit;font-size:.8rem;color:var(--trait);cursor:pointer}
.ldp-x:hover{color:var(--encre)}
.ldp-l{flex:1;min-height:0;overflow-y:auto;overscroll-behavior:contain;padding:6px}
.ldp-g{margin:0;padding:10px 10px 4px;font-size:.72rem;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
.ldp-o{display:grid;grid-template-columns:86px minmax(0,1fr) auto;align-items:center;gap:0 10px;min-height:44px;padding:6px 10px;border-radius:10px;text-decoration:none;color:var(--encre);cursor:pointer;position:relative}
.ldp-k{font-size:.72rem;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--fleche-text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ldp-t{display:block;font-size:.95rem;font-weight:500;line-height:1.3;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ldp-m{display:block;font-size:.78rem;color:var(--muted);line-height:1.3;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ldp-e{width:16px;height:16px;fill:none;stroke:var(--trait);stroke-width:2;stroke-linecap:round;stroke-linejoin:round;opacity:0}
.ldp-o[aria-selected="true"]{background:var(--papier);box-shadow:inset 0 0 0 1px var(--border)}
.ldp-o[aria-selected="true"]::before{content:"";position:absolute;left:3px;top:9px;bottom:9px;width:3px;border-radius:2px;background:var(--fleche)}
.ldp-o[aria-selected="true"] .ldp-e{opacity:1}
.ldp-o.ldp-tout .ldp-t{color:var(--fleche-text)}
.ldp-v{margin:0;padding:22px 14px;text-align:center;font-size:.9rem;color:var(--trait)}
.ldp-p{display:flex;flex-wrap:wrap;gap:6px 16px;align-items:center;padding:9px 16px;border-top:1px solid var(--border);background:var(--papier);font-size:.78rem;color:var(--trait)}
.ldp-p span{display:inline-flex;align-items:center;gap:5px}
@media(max-width:560px){
  .ldp-o{grid-template-columns:minmax(0,1fr) auto}
  .ldp-k{grid-column:1;grid-row:1;font-size:.7rem}
  .ldp-o>span:nth-child(2){grid-column:1}
  .ldp-e{grid-column:2;grid-row:1/span 2}
  .ldp-p{display:none}
}
/* l'entrée : un souffle, pas un rideau */
html:not(.no-motion) .ldp[open] .ldp-c{transition:opacity .18s ease,scale .22s var(--ease),translate .22s var(--ease)}
html:not(.no-motion) .ldp[open]::backdrop{transition:opacity .2s ease}
@starting-style{
  html:not(.no-motion) .ldp[open] .ldp-c{opacity:0;scale:.98;translate:-50% -6px}
  html:not(.no-motion) .ldp[open]::backdrop{opacity:0}
}
html:not(.no-motion) .ldp-o{transition:background .12s}

/* ---------- 5. LE CONFORT DE LECTURE ---------- */
/* le trait de la part lue, en haut des pages longues — celui des numéros
   (.pg-trait, oeuvres/progres.js) n'est pas doublé : mouvement.js ne pose
   celui-ci que si l'autre est absent. Sous la barre du haut, à droite de la
   barre latérale. */
.ld-prog{position:fixed;top:52px;left:var(--sb-w);right:0;height:3px;z-index:45;pointer-events:none}
.ld-prog i{display:block;height:100%;background:var(--fleche);transform:scaleX(0);transform-origin:0 50%;will-change:transform}
html.no-motion .ld-prog,body.ls-plein .ld-prog{display:none}

/* le retour en haut : il paraît après deux écrans, discret */
.ld-haut{position:fixed;right:16px;bottom:16px;z-index:50;width:44px;height:44px;display:inline-flex;align-items:center;justify-content:center;border-radius:50%;border:1px solid var(--border-strong);background:var(--blanc);color:var(--encre);cursor:pointer;box-shadow:0 8px 20px -12px var(--ld-ombre);visibility:hidden;opacity:0;padding:0}
.ld-haut svg{width:16px;height:18px;fill:none;stroke:var(--fleche);stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.ld-haut:hover{border-color:var(--fleche)}
.ld-haut.on{visibility:visible;opacity:1}
html:not(.no-motion) .ld-haut{translate:0 8px;transition:opacity .2s,translate .25s var(--ease),visibility 0s .25s,border-color .2s}
html:not(.no-motion) .ld-haut.on{translate:0 0;transition:opacity .2s,translate .25s var(--ease),visibility 0s 0s,border-color .2s}
html:not(.no-motion) .ld-haut:hover svg{translate:0 -2px}
html:not(.no-motion) .ld-haut svg{transition:translate .2s var(--ease)}
body.ls-plein .ld-haut{display:none}

/* l'ancre « # » d'un titre de section : elle paraît au survol du titre ou au
   focus, et copie l'adresse de la section. 28 px de cible, 16 px de texte. */
main h2[id]{scroll-margin-top:72px}
.ld-ancre{display:inline-flex;flex:none;align-items:center;justify-content:center;width:28px;height:28px;margin-left:.2em;vertical-align:middle;border-radius:6px;font-family:var(--f-ui);font-size:1rem;font-weight:600;letter-spacing:0;text-transform:none;line-height:1;color:var(--fleche-text);text-decoration:none;opacity:0}
h2:hover>.ld-ancre,.ld-ancre:focus-visible{opacity:1}
.ld-ancre:hover{background:rgba(var(--fleche-rgb),.1)}
html:not(.no-motion) .ld-ancre{transition:opacity .15s}

/* ---------- 6. SURVOL ET CLIC (mission `gestes-2`, oct. 2026) ----------
   Chaque geste dit la DA (le plan, la flèche de dérive qui se trace, le
   fragment découpé qui se soulève) ou l'action qu'on vient de faire. Trois
   règles tenues partout : le survol n'existe que là où il y a un survol
   (`hover:hover` — au doigt, rien ne reste accroché) ; rien ne bouge sous
   mouvement réduit (html.no-motion) ; seuls transform et opacity bougent,
   rien ne décale la page. La coche est dans mouvement.js (il lui
   faut l'instant de la copie). Le tracé au clic a été retiré (oct. 2026). */
:root{--ld-fl-m:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 10'%3E%3Cpath d='M1.2 5h10.6M8 1.4L11.8 5 8 8.6' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E")}

/* la coche de « Copier l'adresse » et de l'ancre « # » : le texte s'efface,
   une coche se trace à sa place — même boîte, rien ne bouge autour */
.ld-copie{position:relative}
.ld-copie.ld-copie-on{color:transparent !important}
.ld-coche{position:absolute;left:50%;top:50%;width:16px;height:16px;margin:-8px 0 0 -8px;fill:none;stroke:var(--ld-coche,var(--fleche));stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:100;stroke-dashoffset:100;opacity:0;pointer-events:none}
.ld-copie-on .ld-coche{opacity:1;animation:ld-coche .32s var(--ease) both}
.ld-copie-on.ld-ancre{opacity:1}
@keyframes ld-coche{to{stroke-dashoffset:0}}

/* le surlignage se POSE comme un trait de pinceau, de gauche à droite, à
   l'instant où on le fait (mouvement.js marque la seule marque neuve) : le
   lavis est la même couleur, il arrive simplement en se tirant */
html:not(.no-motion) mark.lc-m.ld-pose{background-color:transparent;background-image:linear-gradient(var(--lavis),var(--lavis));background-repeat:no-repeat;background-position:0 0;animation:ld-pinceau .38s var(--ease) both}
html:not(.no-motion) mark.lc-m.a-note.ld-pose{background-image:linear-gradient(var(--lavis-fort),var(--lavis-fort))}
@keyframes ld-pinceau{from{background-size:0 100%}to{background-size:100% 100%}}

/* l'icône du menu Affichage tourne d'un quart de tour quand le mode change —
   la place étoilée du jour est un rond-point : elle tourne */
html:not(.no-motion) .tb-mb.ld-tourne .ic{animation:ld-tourne .4s var(--ease) both}
@keyframes ld-tourne{from{rotate:-100deg;scale:.75}}

/* le rail des lettres de l'abécédaire : la lettre lue reçoit son trait rouge
   en le TRAÇANT (le rail suit la lecture, le trait suit le rail) */
html:not(.no-motion) .gl-rail a{transition:background .14s,color .14s}
html:not(.no-motion) .gl-rail a.est-la{position:relative;box-shadow:none}
html:not(.no-motion) .gl-rail a.est-la::after{content:"";position:absolute;left:0;right:0;bottom:0;height:2px;background:var(--fleche);transform-origin:0 50%;animation:ld-tire .26s var(--ease) both}
@keyframes ld-tire{from{transform:scaleX(0)}}

/* la date d'un trait de la frise : écrite par mouvement.js dans data-date
   (lue dans le texte du lien, jamais recopiée) ; elle paraît au survol et au
   focus. Ancrée à proportion de sa place sur l'axe — à gauche au début, à
   droite à la fin —, pour ne jamais sortir de la figure. */
.ch-r[data-date]::after{content:attr(data-date);position:absolute;left:0;bottom:calc(100% + 12px);translate:calc(var(--x) * -1) 0;white-space:nowrap;font-family:var(--f-ui);font-size:.74rem;font-weight:600;line-height:1.3;letter-spacing:0;color:var(--encre);background:var(--blanc);border:1px solid var(--border-strong);border-radius:6px;padding:2px 7px;opacity:0;pointer-events:none;z-index:2}
.ch-r[data-date]:focus-visible::after{opacity:1}
/* le prolongement du trait : il grandit vers le haut */
.ch-r::before{content:"";position:absolute;left:0;right:0;bottom:100%;height:8px;background:inherit;transform:scaleY(0);transform-origin:50% 100%}

@media (hover:hover){
  html:not(.no-motion){
    /* LA MARQUE : le point rouge de Lire·Debord devient une flèche de dérive */
    & .brand i{transition:color .16s}
    & .brand i::after{content:"";position:absolute;left:50%;top:50%;width:14px;height:10px;margin:-5px 0 0 -7px;background:var(--fleche);-webkit-mask:var(--ld-fl-m) center/contain no-repeat;mask:var(--ld-fl-m) center/contain no-repeat;transform:scaleX(.2);transform-origin:35% 50%;opacity:0;transition:transform .26s var(--ease),opacity .12s}
    & .brand:hover i{color:transparent}
    & .brand:hover i::after{transform:none;opacity:1}

    /* LA BARRE LATÉRALE : plus de flèche au survol (arbitrage du 24 oct. :
       « plutôt que des flèches, animer les logos ») — ce sont les icônes qui
       bougent, chacune selon ce qu'elle montre (§ 7, en fin de fichier). */

    /* L'ABÉCÉDAIRE : au survol du relief d'un mot, les douze cases montent
       l'une après l'autre, du n° 1 au n° 12 — le mot traverse les onze ans */
    & .gl-c i{transform-origin:50% 100%}
    & .gl-rel:hover .gl-c i{animation:ld-monte .24s var(--ease) both;animation-delay:calc(var(--ld-r,0) * 14ms)}

    /* LA REVUE : un coin de page se soulève sur la carte d'un numéro servi.
       Le triangle du bas est le papier de dessous, celui du haut le verso. */
    & .rv-c.ok::after{content:"";position:absolute;right:-1px;bottom:-1px;width:22px;height:22px;border-bottom-right-radius:12px;pointer-events:none;
      background:linear-gradient(315deg,var(--papier) 0 50%,rgba(var(--ombre-rgb),.16) 50%,rgba(var(--ombre-rgb),.03) 100%),linear-gradient(var(--blanc),var(--blanc));
      scale:0;transform-origin:100% 100%;transition:scale .26s var(--ease)}
    & .rv-c.ok:hover::after{scale:1}

    /* LE PLAN DU SPECTACLE : la case survolée se soulève du plan, au-dessus
       de ses voisines — un fragment qu'on prend entre les doigts. (Son numéro,
       elle le porte déjà ; une bulle le redirait.) */
    & .th-plan .th-c{position:relative}
    & .th-plan .th-c.ok{transition:background .2s,border-color .2s,translate .22s var(--ease),scale .22s var(--ease),box-shadow .22s var(--ease)}
    & .th-plan .th-c.ok:hover{z-index:1;translate:0 -2px;scale:1.16;box-shadow:0 7px 12px -6px var(--ld-ombre)}

    /* LA FRISE : le trait survolé grandit, sa date paraît */
    & .ch-r::before{transition:transform .2s var(--ease)}
    & .ch-r:hover::before{transform:none}
    & .ch-r[data-date]::after{translate:calc(var(--x) * -1) 4px;transition:opacity .15s,translate .2s var(--ease)}
    & .ch-r[data-date]:hover::after{opacity:1;translate:calc(var(--x) * -1) 0}

    /* LES SORTIES : la flèche de « D'ici, on peut aller » se retrace */
    & .so a:hover .so-f path{animation:ld-retrace .36s var(--ease) both}
  }
}
/* sous mouvement réduit, la date paraît quand même au survol : c'est une
   information, pas un mouvement — sans transition */
@media (hover:hover){html.no-motion .ch-r[data-date]:hover::after{opacity:1}}
@property --ld-r{syntax:'<integer>';inherits:true;initial-value:0}
@supports (order:sibling-index()){.gl-c{--ld-r:calc(sibling-index() - 1)}}
@keyframes ld-monte{from{transform:scaleY(0)}}
@keyframes ld-retrace{from{stroke-dasharray:24;stroke-dashoffset:24}to{stroke-dasharray:24;stroke-dashoffset:0}}

/* ---------- 7. LES ICÔNES DE LA BARRE LATÉRALE (24 oct. 2026) ----------
   Arbitrage du propriétaire : « plutôt que de mettre des flèches au survol,
   animer les logos ». Chaque icône fait UN geste, une fois, au survol ou au
   focus clavier, et ce geste dit ce qu'elle montre : l'œil cligne, la page de
   la revue se tourne, les traits de la frise montent l'un après l'autre, le
   rabat de l'enveloppe s'ouvre, le fléau de la balance oscille, la place
   étoilée tourne d'un huitième, le livre penché se redresse, le point du
   rendez-vous se resserre… ≤ 600 ms,
   transform seulement, rien sous mouvement réduit. Les parties sont nommées
   (i-…) dans SB_IC de tools/gen-site.mjs. */
.sb-ic *{transform-box:fill-box;transform-origin:center}
.sb-ic .i-fleau{transform-box:view-box;transform-origin:10px 6px}
.sb-ic .i-penche{transform-origin:0 100%}
.sb-ic .i-rabat{transform-origin:50% 0}
.sb-ic .i-page{transform-origin:0 50%}
.sb-ic .i-signet{transform-origin:50% 0}
.sb-ic .i-frappe{transform-origin:0 50%}
html:not(.no-motion){
  & .sb-i:is(:hover,:focus-visible) .sb-ic{
    & .i-buste{animation:ic-leve .5s var(--ease)}
    & .i-cadre{animation:ic-incline .5s var(--ease)}
    & .i-penche{animation:ic-redresse .55s var(--ease)}
    & .i-oeil{animation:ic-cligne .42s ease-in-out}
    & .i-page{animation:ic-tourne .6s var(--ease)}
    & .i-a{animation:ic-saute .45s var(--ease)}
    & .i-t{animation:ic-monte .42s var(--ease) calc(var(--k) * 70ms) both}
    & .i-frappe{animation:ic-frappe .3s steps(5) calc(var(--k) * 110ms) both}
    & .i-carte{animation:ic-deplie .55s var(--ease)}
    & .i-loupe{animation:ic-cherche .6s ease-in-out}
    & .i-signet{animation:ic-tombe .45s var(--ease)}
    & .i-rayons{animation:ic-tourne8 .6s var(--ease)}
    & .i-rabat{animation:ic-ouvre .55s var(--ease)}
    & .i-tete{animation:ic-acquiesce .5s ease-in-out}
    & .i-point{animation:ic-saute .45s var(--ease)}
    & .i-fleau{animation:ic-balance .6s ease-in-out}
    & .i-but{animation:ic-vise .5s var(--ease)}
  }
}
@keyframes ic-leve{50%{transform:translateY(-1.6px)}}
@keyframes ic-incline{50%{transform:rotate(-5deg)}}
@keyframes ic-redresse{50%{transform:rotate(15deg)}}
@keyframes ic-cligne{45%,55%{transform:scaleY(.12)}}
@keyframes ic-tourne{50%{transform:scaleX(-1)}50.01%{transform:scaleX(-1)}100%{transform:scaleX(1)}}
@keyframes ic-saute{40%{transform:translateY(-2.4px)}70%{transform:translateY(.4px)}}
@keyframes ic-monte{0%{transform:scaleY(.25)}100%{transform:scaleY(1)}}
@keyframes ic-frappe{0%{transform:scaleX(0)}100%{transform:scaleX(1)}}
@keyframes ic-deplie{40%{transform:scaleX(.78)}}
@keyframes ic-cherche{25%{transform:translate(1.2px,-1.2px)}50%{transform:translate(-1.2px,-.4px)}75%{transform:translate(.4px,1.2px)}}
@keyframes ic-tombe{45%{transform:scaleY(1.18)}75%{transform:scaleY(.95)}}
@keyframes ic-tourne8{to{transform:rotate(45deg)}}
@keyframes ic-ouvre{45%{transform:scaleY(-1)}}
@keyframes ic-acquiesce{35%{transform:translateY(1.3px)}70%{transform:translateY(-.6px)}}
@keyframes ic-vise{45%{transform:scale(1.3)}75%{transform:scale(.94)}}
@keyframes ic-balance{25%{transform:rotate(-9deg)}60%{transform:rotate(6deg)}85%{transform:rotate(-2deg)}}