/* Animations du site de Mote (moteur : src/anim.js ; bibliothèques : src/vendor).
   Chaque famille a ses variantes, choisies par un attribut sur <html> : data-a-<famille>="A" | "B" | "C".
   Rythme : 0,3 à 0,6 s par mouvement, courbes douces (aucun rebond), transform et opacity de préférence. */
:root {
  --sortie: cubic-bezier(.16, 1, .3, 1);   /* arrive vite, se pose doucement */
  --passe: cubic-bezier(.65, 0, .35, 1);   /* part et arrive doucement */
  --gris-clair: #d4d4d4;
}

/* ---------- Défilement : Lenis remplace la molette, la barre native disparaît ---------- */
html { scrollbar-width: none; }
html::-webkit-scrollbar { display: none; }
html.lenis, html.lenis body { height: auto; }
html.lenis { scroll-behavior: auto; }
.lenis.lenis-stopped { overflow: clip; }
.lenis [data-lenis-prevent] { overscroll-behavior: contain; }

/* ---------- Avant le premier rendu : ce qui va apparaître reste caché (anim.js le révèle) ---------- */
html.anim:not(.anim-pret) main, html.anim:not(.anim-pret) .pied { visibility: hidden; }
html.charge .nav, html.charge main, html.charge .pied { visibility: hidden; }
.a-cache { visibility: hidden; }
/* lignes découpées : le masque laisse de la place aux accents et aux jambages */
.a-masque { padding: .14em 0 .12em; margin: -.14em 0 -.12em; }
.a-lettre { display: inline-block; }
.a-mot { display: inline-block; }

/* l'ouverture : le calque des images prend toute la place (pour le voile et la trame) */
.ouverture-images { position: absolute; inset: 0; }

/* ---------- Écran de chargement ---------- */
.chargeur { position: fixed; inset: 0; z-index: 1000; background: var(--papier); color: var(--encre); pointer-events: none; }
.chargeur canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
.chargeur .ch-bas { position: absolute; left: var(--marge); right: var(--marge); bottom: 20px; display: flex; justify-content: space-between; align-items: baseline; }
.chargeur .ch-haut { position: absolute; left: var(--marge); right: var(--marge); top: 14px; display: flex; justify-content: space-between; }
.chargeur .ch-centre { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); }
.ch-rangee { display: flex; gap: 10px; align-items: center; }
.ch-rangee i { position: relative; display: block; width: 10px; height: 10px; background: var(--encre); }
.ch-rangee .ch-img { position: absolute; inset: 0; overflow: hidden; }
.ch-rangee i img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; }
.ch-rangee b { position: absolute; left: 0; right: 0; top: calc(100% + 10px); text-align: center; font-weight: 400; }
.ch-trait { position: absolute; left: 50%; top: 50%; height: 2px; width: 0; margin-top: -1px; background: var(--encre); transform: translateX(-50%); }
/* le mot MOTE du chargement B : une couche à part, au-dessus du blanc, en « différence » (noir sur le blanc, inversé sur l'image) */
.ch-mot { position: fixed; z-index: 1001; display: flex; gap: 0; pointer-events: none; mix-blend-mode: difference; color: #fff; font-family: var(--police); font-weight: 600; letter-spacing: -.04em; line-height: .8; white-space: nowrap; }
.ch-mot > span { display: block; overflow: hidden; padding: .04em 0; }
.ch-mot > span > span { display: block; will-change: transform; }
.ch-bloc { will-change: transform; }

/* ---------- Transition entre les pages (View Transitions entre documents, retour compris) ---------- */
@view-transition { navigation: auto; }
.nav { view-transition-name: menu; }
.defil { view-transition-name: defil; }
::view-transition-group(menu), ::view-transition-group(defil) { animation-duration: .5s; }
::view-transition-old(root) { animation: vt-efface .38s cubic-bezier(.4, 0, .2, 1) both; }
@keyframes vt-efface { to { opacity: 0; transform: scale(.985); } }
/* A. Volet : la page s'efface dans le blanc, puis le blanc monte et découvre la suivante, qui finit de se poser */
html[data-a-transition="A"]::view-transition-new(root), html[data-a-transition="D"]::view-transition-new(root) { animation: vt-volet .7s var(--sortie) .34s both; }
@keyframes vt-volet { from { clip-path: inset(100% 0 0 0); transform: translateY(8vh); } to { clip-path: inset(0); transform: none; } }
/* B. Rideau : une feuille blanche, titrée du nom de la page, reste un instant puis se lève */
html[data-a-transition="B"]::view-transition-new(root) { animation: vt-apparait .01s linear .36s both; }
@keyframes vt-apparait { from { opacity: 0; } to { opacity: 1; } }
.vt-rideau { display: none; }
html[data-a-transition="B"].vt-entree .vt-rideau { display: flex; position: fixed; inset: 0; z-index: 900; background: var(--papier); border-bottom: 1px solid var(--encre); flex-direction: column; justify-content: center; align-items: center; gap: 14px; view-transition-name: rideau; }
.vt-rideau .moyen { overflow: hidden; }
::view-transition-old(rideau) { display: none; }
html[data-a-transition="B"]::view-transition-new(rideau) { animation: vt-rideau 1.15s var(--passe) both; }
@keyframes vt-rideau { 0%, 30% { opacity: 0; transform: none; } 36% { opacity: 1; transform: none; } 58% { transform: none; } 100% { transform: translateY(-100%); } }
::view-transition-group(rideau) { animation: none; }
/* C. Stores : le blanc se retire par bandes, comme une trame de lignes qui s'ouvre */
@property --store { syntax: "<percentage>"; inherits: false; initial-value: 0%; }
html[data-a-transition="C"]::view-transition-new(root) {
  -webkit-mask-image: linear-gradient(to bottom, #000 var(--store), transparent var(--store)); mask-image: linear-gradient(to bottom, #000 var(--store), transparent var(--store));
  -webkit-mask-size: 100% 12.5vh; mask-size: 100% 12.5vh; animation: vt-stores .75s var(--passe) .32s both;
}
@keyframes vt-stores { from { --store: 0%; transform: translateY(2vh); } to { --store: 100%; transform: none; } }

/* D. Ligne : la grammaire de l'écran de chargement (anim.js). Point, ligne, sept colonnes blanches qui couvrent la page ;
   à l'arrivée, elles portent le nom de la page puis se retirent vers le haut. Le retour du navigateur utilise le volet (A). */
html.trans-entree:not(.trans-pose) body::after { content: ""; position: fixed; inset: 0; z-index: 1100; background: var(--papier); }
.tr-ligne { position: fixed; inset: 0; z-index: 1100; pointer-events: auto; cursor: progress; }
.tr-point { position: absolute; left: 50%; top: 50%; width: 6px; height: 6px; margin: -3px 0 0 -3px; background: var(--encre); }
.tr-cols { position: absolute; inset: 0; display: flex; align-items: flex-start; }
.tr-cols b { position: relative; flex: 1; box-sizing: border-box; height: 0; background: var(--papier); border-top: 1px solid var(--encre); border-bottom: 1px solid var(--encre); }
.tr-cols b + b { border-left: 1px solid var(--encre); }
.tr-nom { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); display: flex; flex-direction: column; align-items: center; gap: 14px; z-index: 2; text-align: center; white-space: nowrap; }
.tr-nom > span { display: block; overflow: hidden; padding: .1em 0; }
.tr-nom > span > span { display: block; }

/* ---------- Barre de progression (maison) ---------- */
.defil { position: fixed; z-index: 25; pointer-events: auto; touch-action: none; }
.defil i, .defil b { position: absolute; display: block; }
.defil .defil-n { position: absolute; font-family: var(--mono); font-size: 11px; font-weight: 400; white-space: nowrap; color: var(--encre); background: var(--papier); padding: 1px 4px; opacity: 0; transition: opacity .3s; pointer-events: none; }
.defil:hover .defil-n, .defil.tenu .defil-n, .defil.bouge .defil-n { opacity: 1; }
.defil em { display: none; }
/* A. Filet : un trait court, centré à droite, qui se remplit ; quatre équerres le tiennent (comme le lecteur vidéo)
   et se resserrent quand on défile ou qu'on le survole */
html[data-a-barre="A"] .defil { top: calc(50% - 13.5vh); height: 27vh; right: 8px; width: 16px; cursor: ns-resize; }
html[data-a-barre="A"] .defil i { left: 7.5px; top: 0; bottom: 0; width: 1px; background: var(--gris-clair); }
html[data-a-barre="A"] .defil b { left: 6.5px; top: 0; bottom: 0; width: 3px; background: var(--encre); transform-origin: top; transform: scaleY(var(--p, 0)); }
html[data-a-barre="A"] .defil .defil-n { right: 24px; top: calc(var(--p, 0) * 100%); transform: translateY(-50%); }
html[data-a-barre="A"] .defil em { display: block; position: absolute; width: 6px; height: 6px; border: 0 solid var(--encre); opacity: .35; transition: transform .6s var(--sortie), opacity .5s; }
html[data-a-barre="A"] .defil em:nth-of-type(1) { left: 0; top: -10px; border-width: 1px 0 0 1px; transform: translate(-4px, -4px); }
html[data-a-barre="A"] .defil em:nth-of-type(2) { right: 0; top: -10px; border-width: 1px 1px 0 0; transform: translate(4px, -4px); }
html[data-a-barre="A"] .defil em:nth-of-type(3) { left: 0; bottom: -10px; border-width: 0 0 1px 1px; transform: translate(-4px, 4px); }
html[data-a-barre="A"] .defil em:nth-of-type(4) { right: 0; bottom: -10px; border-width: 0 1px 1px 0; transform: translate(4px, 4px); }
html[data-a-barre="A"] .defil:hover em, html[data-a-barre="A"] .defil.bouge em, html[data-a-barre="A"] .defil.tenu em { transform: none; opacity: 1; }
/* B. Graduation : la règle du lecteur vidéo, debout ; un repère glisse, le numéro de la section le suit */
html[data-a-barre="B"] .defil { top: 56px; bottom: 12px; right: 0; width: 18px; cursor: ns-resize; }
html[data-a-barre="B"] .defil i { right: 5px; top: 0; bottom: 0; width: 7px; background: repeating-linear-gradient(to bottom, #9a9a9a 0 1px, transparent 1px 8px); }
html[data-a-barre="B"] .defil b { right: 3px; top: calc(var(--p, 0) * 100%); width: 11px; height: 2px; margin-top: -1px; background: var(--encre); }
html[data-a-barre="B"] .defil .defil-n { right: 18px; top: calc(var(--p, 0) * 100%); transform: translateY(-50%); opacity: 1; }
/* C. Sous le menu : le filet du bas du menu s'épaissit de gauche à droite */
html[data-a-barre="C"] .defil { top: 43px; left: 0; right: 0; height: 9px; cursor: ew-resize; }
html[data-a-barre="C"] .defil b { left: 0; right: 0; top: 0; height: 3px; background: var(--encre); transform-origin: left; transform: scaleX(var(--p, 0)); }
html[data-a-barre="C"] .defil .defil-n { top: 6px; left: calc(var(--p, 0) * 100%); transform: translateX(-100%); }
@media (hover: none) { .defil { pointer-events: none; } }

/* ---------- Menu qui se cache (data-a-cacher="oui") : chorégraphie dans anim.js ; le filet du bas devient un trait animable ---------- */
html[data-a-cacher="oui"] .nav { border-bottom-color: transparent; }
.nav-filet { position: absolute; left: 0; right: 0; bottom: -1px; height: 1px; background: var(--encre); pointer-events: none; transform-origin: 50% 50%; }

/* ---------- Survol du menu ---------- */
.nav a { text-decoration: none !important; }
.a-roule { display: inline-block; vertical-align: top; overflow: hidden; height: 1.5em; line-height: 1.5em; }
.a-roule > span { display: inline-block; white-space: pre; }
/* A. Brouillage : les lettres se brouillent puis se remettent en place, de gauche à droite (la largeur ne bouge pas) */
.nav .a-glyphe { display: inline-block; text-align: center; }
html[data-a-menu="A"] .nav a .num { transition: color .3s; }
html[data-a-menu="A"] .nav a:hover .num { color: var(--encre); }
/* B. Roulement : chaque lettre monte et laisse sa place à sa copie, l'une après l'autre */
html[data-a-menu="B"] .nav .a-roule > span { text-shadow: 0 1.5em currentColor; transition: transform .5s cubic-bezier(.7, 0, .2, 1); transition-delay: calc(var(--i, 0) * 14ms); }
html[data-a-menu="B"] .nav a:hover .a-roule > span, html[data-a-menu="B"] .nav a:focus-visible .a-roule > span { transform: translateY(-1.5em); }
/* C. Repère : un petit carré noir glisse jusqu'au lien survolé, les autres passent en gris */
.nav-repere { position: absolute; left: 0; top: 50%; width: 5px; height: 5px; margin-top: -2.5px; background: var(--encre); opacity: 0; pointer-events: none; }
html[data-a-menu="C"] .nav a { transition: color .35s, opacity .35s; }
html[data-a-menu="C"] .nav.survol a:not(:hover):not(.nav-logo) { color: #a3a3a3; }

/* ---------- Survol des boutons et des liens : calme, un seul geste par bouton ----------
   anim.js découpe le texte en lettres (.a-mots > span, --i = rang) et enveloppe les flèches (.a-fleche[data-sens]) ;
   --x / --y = point d'entrée du pointeur. Courbe commune : lente au départ et à l'arrivée. */
:root { --glisse: cubic-bezier(.7, 0, .2, 1); }
.a-bouton { position: relative; isolation: isolate; overflow: hidden; --fond: var(--encre); --texte: var(--papier); transition: color .5s var(--glisse), box-shadow .5s var(--glisse); }
.bouton-noir.a-bouton { --fond: var(--papier); --texte: var(--encre); }
.a-bouton::before { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; background: var(--fond); }
/* le fond d'origine ne change plus au survol : c'est la couche ::before qui fait le travail */
.bouton-ligne.a-bouton:hover, .champ-ligne button.a-bouton:hover { background: transparent; color: var(--texte); }
.champ-ligne button.a-bouton { background: var(--papier); }
.bouton-noir.a-bouton:hover { background: var(--encre); color: var(--texte); box-shadow: inset 0 0 0 1px var(--encre); }
.a-bouton:focus-visible { color: var(--texte); }
/* lettres : chaque lettre a sa copie juste en dessous (text-shadow), la fenêtre ne montre qu'une ligne */
.a-mots { display: inline-block; vertical-align: top; overflow: hidden; height: 1.4em; line-height: 1.4em; }
.a-mots > span { display: inline-block; white-space: pre; text-shadow: 0 1.4em currentColor; transition: transform .7s var(--glisse); transition-delay: calc(var(--i, 0) * 11ms); }
/* flèches : elle sort dans sa direction, sa copie revient de l'autre côté */
.a-fleche { display: inline-block; vertical-align: top; overflow: hidden; width: 1em; height: 1.4em; line-height: 1.4em; text-align: center; }
.a-fleche > span { display: block; transition: transform .6s var(--glisse) .06s; }
.a-fleche[data-sens="bas"] > span { text-shadow: 0 -1.4em currentColor; }
.a-fleche[data-sens="haut"] > span { text-shadow: 0 1.4em currentColor; }
.a-fleche[data-sens="droite"] > span { text-shadow: -1em 0 currentColor; }
.a-fleche[data-sens="gauche"] > span { text-shadow: 1em 0 currentColor; }
.a-bouton:hover .a-fleche[data-sens="bas"] > span, .a-bouton:focus-visible .a-fleche[data-sens="bas"] > span { transform: translateY(1.4em); }
.a-bouton:hover .a-fleche[data-sens="haut"] > span, .a-bouton:focus-visible .a-fleche[data-sens="haut"] > span { transform: translateY(-1.4em); }
.a-bouton:hover .a-fleche[data-sens="droite"] > span, .a-bouton:focus-visible .a-fleche[data-sens="droite"] > span { transform: translateX(1em); }
.a-bouton:hover .a-fleche[data-sens="gauche"] > span, .a-bouton:focus-visible .a-fleche[data-sens="gauche"] > span { transform: translateX(-1em); }

/* A. Coulisse : le fond monte depuis le bas et repart par le haut ; les lettres roulent une à une */
html[data-a-boutons="A"] .a-bouton::before { transform: scaleY(0); transform-origin: 50% 0; transition: transform .7s var(--glisse); }
html[data-a-boutons="A"] .a-bouton:hover::before, html[data-a-boutons="A"] .a-bouton:focus-visible::before { transform: scaleY(1); transform-origin: 50% 100%; }
html[data-a-boutons="A"] .a-bouton:hover .a-mots > span, html[data-a-boutons="A"] .a-bouton:focus-visible .a-mots > span { transform: translateY(-1.4em); }

/* B. Encre : le fond s'étend en cercle depuis le point où le pointeur est entré, et se retire vers celui où il sort */
html[data-a-boutons="B"] .a-bouton::before { clip-path: circle(0 at var(--x, 50%) var(--y, 50%)); transition: clip-path .8s var(--sortie); }
html[data-a-boutons="B"] .a-bouton:hover::before, html[data-a-boutons="B"] .a-bouton:focus-visible::before { clip-path: circle(160% at var(--x, 50%) var(--y, 50%)); transition-duration: 1s; }
html[data-a-boutons="B"] .a-bouton { transition-duration: .6s; }

/* C. Trame : le fond arrive en points qui grossissent jusqu'à se toucher (une trame de Mote) ; les lettres roulent lentement */
@property --tp { syntax: "<length>"; inherits: true; initial-value: 0px; }
html[data-a-boutons="C"] .a-bouton::before { background: radial-gradient(circle, var(--fond) var(--tp), transparent calc(var(--tp) + .6px)) 0 0 / 6px 6px; transition: --tp .8s var(--glisse); }
html[data-a-boutons="C"] .a-bouton:hover::before, html[data-a-boutons="C"] .a-bouton:focus-visible::before { --tp: 4.6px; }
html[data-a-boutons="C"] .a-bouton { transition-delay: .12s; }
html[data-a-boutons="C"] .a-bouton:hover .a-mots > span, html[data-a-boutons="C"] .a-bouton:focus-visible .a-mots > span { transform: translateY(-1.4em); transition-duration: .8s; }

/* liens dans le texte : le trait arrive par la gauche et repart par la droite */
.a-souligne { text-decoration: none; background: linear-gradient(currentColor, currentColor) no-repeat; background-size: 0 1px; background-position: 100% 100%; transition: background-size .6s var(--glisse); }
.a-souligne:hover, .a-souligne:focus-visible { background-size: 100% 1px; background-position: 0 100%; }

/* ---------- Traits de coupe : quatre repères d'imprimeur qui cadrent une image pendant qu'elle se pose ---------- */
.a-coupes { position: absolute; z-index: 40; pointer-events: none; }
.a-coupes i { position: absolute; width: 10px; height: 10px; border: 0 solid var(--encre); }
.a-coupes i:nth-child(1) { left: -6px; top: -6px; border-width: 1px 0 0 1px; }
.a-coupes i:nth-child(2) { right: -6px; top: -6px; border-width: 1px 1px 0 0; }
.a-coupes i:nth-child(3) { left: -6px; bottom: -6px; border-width: 0 0 1px 1px; }
.a-coupes i:nth-child(4) { right: -6px; bottom: -6px; border-width: 0 1px 1px 0; }
/* filets des sections : le trait du haut, redessiné par anim.js */
.a-trait { position: absolute; top: -1px; left: 0; right: 0; height: 1px; background: var(--encre); pointer-events: none; z-index: 2; }
/* images liées : un lent rapprochement au survol */
.rangee-lien .image img, .suivant-fond { transition: transform 1.1s var(--sortie), opacity .4s; }
.rangee-lien:hover .image img { transform: scale(1.035); }
.suivant:hover .suivant-fond { transform: scale(1.03); }
.case img, .case .anime-cadre > img { transition: transform .6s var(--sortie) !important; }

/* ---------- Images : B. Trame (le masque de points, piloté par --pt) ---------- */
.a-trame { -webkit-mask-image: radial-gradient(circle, #000 calc(var(--pt, 0) * 1px), transparent calc(var(--pt, 0) * 1px + .8px)); mask-image: radial-gradient(circle, #000 calc(var(--pt, 0) * 1px), transparent calc(var(--pt, 0) * 1px + .8px)); -webkit-mask-size: 11px 11px; mask-size: 11px 11px; -webkit-mask-position: center; mask-position: center; }

/* ---------- Petits détails : les filets des listes se tracent ---------- */
.a-filet { clip-path: inset(0 0 0 0); }
/* vignettes de l'index : un carré noir qui s'ouvre en image */
.a-case { background: var(--encre); }