/* ════════════════════════════════════════════════════════════════
   BOTI LAND — REGISTRE DES CRÉATIONS
   Référence vivante : fiche de bibliothèque + registre à trous.
   3 contraintes respectées :
   1. titres de section rotatés 90° (.side / .section-label)
   2. révélation progressive au scroll (.reveal / .on)
   3. aucune grille classique : fiches décalées & inclinées (data-tilt)
   ════════════════════════════════════════════════════════════════ */

:root{
  --papier:#F0EAD9;
  --hors:#E4DCC6;
  --encre:#191713;
  --encre-doux:#5A5347;
  --gris-archive:#8A8273;
  --rouge:#C63B1E;
  --rouge-vif:#A32B12;
  --soufre:#E3B93C;
  --sarcelle:#6FD1B4;
  --vert-nuit:#3F7A4D;
  --filet:rgba(25,23,19,.22);
  --ease:cubic-bezier(.22,1,.36,1);
  --display:"Bricolage Grotesque",Impact,sans-serif;
  --text:"Space Grotesk",Futura,sans-serif;
  --mono:"IBM Plex Mono","Courier New",monospace;
  --gothic:"Pirata One",serif;
}

*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}

body{
  background:var(--hors);
  background-image:radial-gradient(rgba(25,23,19,.055) 1px,transparent 1.4px);
  background-size:26px 26px;
  color:var(--encre);
  font-family:var(--text);
  font-size:16px;
  line-height:1.6;
  transition:background-color .6s ease;
}

::selection{background:var(--rouge);color:var(--papier)}

/* ── typographie utilitaire ─────────────────────────────────────── */
.mono-xs{font-family:var(--mono);font-size:11px;letter-spacing:.14em}
.title-xl{font-family:var(--display);font-weight:800;font-size:clamp(62px,12vw,148px);line-height:.94;letter-spacing:-.03em;margin:14px 0 10px}
.title-l{font-family:var(--display);font-weight:800;font-size:clamp(30px,4.6vw,52px);line-height:1.04;letter-spacing:-.02em;margin:8px 0 14px}
.title-m{font-family:var(--display);font-weight:800;font-size:clamp(24px,3.4vw,34px);line-height:1.05;letter-spacing:-.01em}

/* ── liens encre (aucun bouton) ─────────────────────────────────── */
a{color:inherit}
.ink-link{
  color:var(--encre);
  text-decoration:underline;
  text-decoration-thickness:1.5px;
  text-underline-offset:4px;
  text-decoration-color:rgba(25,23,19,.45);
  cursor:pointer;
}
.ink-link:hover{color:var(--rouge);text-decoration-style:double;text-decoration-color:var(--rouge)}
.ink-big{display:inline-block;margin-top:20px;font-size:18px;letter-spacing:.05em}

/* ── nav latérale : réglette verticale ──────────────────────────── */
.toc{
  position:fixed;top:0;right:0;height:100vh;width:58px;z-index:40;
  background:var(--hors);
  border-left:1.5px solid var(--encre);
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:26px;
}
.toc a{
  writing-mode:vertical-rl;
  font-family:var(--mono);font-size:11px;letter-spacing:.22em;
  color:var(--encre-doux);text-decoration:none;
  border-right:2px solid transparent;padding:2px 1px;
}
.toc a:hover{color:var(--rouge);border-right-color:var(--rouge)}
.toc a.cur{color:var(--encre);border-right-color:var(--encre)}

main{margin-right:58px}
.sec{padding:clamp(14px,3vh,30px) 4%}

/* ── cartes = fiches d'archive ──────────────────────────────────── */
.card{
  position:relative;
  width:min(880px,100%);
  margin:0 auto;
  background:var(--papier);
  border:1.5px solid var(--encre);
  box-shadow:6px 6px 0 rgba(25,23,19,.14);
  padding:clamp(26px,5vw,56px);
  transform:rotate(var(--tilt,0deg));
  transition:background-color .6s ease;
}
/* contrainte 3 : décalages volontaires, jamais de grille */
.card[data-tilt="-0.5"]{--tilt:-.5deg}
.sec-1 .card{margin-left:5%}
.sec-2 .card{width:min(760px,100%);margin-left:12%}
.sec-3 .card{margin-right:6%}
.sec-3 .help{margin-left:12%;margin-top:26px}
.sec-4 .card{margin-left:2%}
.sec-5 .card{margin-left:4%}

/* bord perforé (die-cut) */
.card::before{
  content:"";
  position:absolute;top:-7px;left:0;right:0;height:14px;
  background-image:radial-gradient(circle,var(--hors) 4.5px,transparent 5.5px);
  background-size:24px 14px;background-position:2px 50%;background-repeat:repeat-x;
}

/* ── contrainte 1 : titres de section rotatés 90° ───────────────── */
.side{
  position:absolute;right:12px;top:50%;
  transform:translateY(-50%);
  writing-mode:vertical-rl;
  font-family:var(--mono);font-size:10px;letter-spacing:.4em;
  color:var(--gris-archive);
}
.side-rouge{color:var(--rouge)}
.section-label{
  position:absolute;left:-13px;top:34px;
  writing-mode:vertical-rl;
  background:var(--encre);color:var(--papier);
  padding:12px 5px;letter-spacing:.26em;
}

.headrow{
  display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap;
  border-bottom:1.5px solid var(--encre);
  padding-bottom:12px;margin-bottom:26px;
}
.head-tools{display:flex;align-items:center;gap:10px}
.lang{display:inline-flex;gap:4px;align-items:center}
.lang-link{
  font-family:var(--mono);font-size:11px;letter-spacing:.14em;
  padding:2px 7px;border:1.5px solid transparent;text-decoration:none;color:var(--encre-doux);
}
.lang-link:hover{color:var(--rouge)}
.lang-link.cur{border-color:var(--encre);color:var(--encre)}

/* ── DÉTAIL SIGNATURE : le poinçon de visite ────────────────────── */
.punch{position:relative;width:min(300px,72%);height:130px}
.punch .chip{
  position:absolute;left:50%;top:50%;width:46px;height:46px;margin:-23px 0 0 -23px;
  border-radius:50%;
  background:radial-gradient(circle at 42% 36%,#0F0D0A 0 60%,#231E15 100%);
  box-shadow:0 0 0 1.5px rgba(25,23,19,.3),inset 0 1px 0 rgba(240,234,217,.07);
  opacity:0;transform:scale(0);
}
.punch.perced .chip{animation:punchIn .3s cubic-bezier(.2,1.5,.3,1) forwards}
@keyframes punchIn{
  0%{opacity:0;transform:scale(0)}
  62%{opacity:1;transform:scale(1.16)}
  100%{opacity:1;transform:scale(1)}
}
.chip-fall{
  position:absolute;width:42px;height:42px;border-radius:50%;
  background:var(--papier);border:1.5px solid rgba(25,23,19,.4);
  pointer-events:none;
  animation:chipFall .9s cubic-bezier(.3,.7,.6,1) forwards;
}
@keyframes chipFall{
  0%{opacity:1;transform:translate(0,0) rotate(0)}
  100%{opacity:0;transform:translate(26px,110px) rotate(80deg)}
}
.punch-stamp{
  position:absolute;left:50%;top:calc(50% + 36px);
  transform:translateX(-50%) rotate(-4deg);
  border:2px solid var(--rouge);color:var(--rouge);
  padding:4px 10px;font-weight:600;white-space:nowrap;
  opacity:0;
}
.punch.perced .punch-stamp{animation:stampIn .32s .5s cubic-bezier(.2,1.6,.4,1) forwards}
@keyframes stampIn{
  0%{opacity:0;transform:translateX(-50%) rotate(-16deg) scale(1.8)}
  100%{opacity:.94;transform:translateX(-50%) rotate(-4deg) scale(1)}
}
.accroche.tressaille{animation:tressaille .4s .06s ease-out}
@keyframes tressaille{
  0%{transform:rotate(var(--tilt,0deg))}
  30%{transform:rotate(var(--tilt,0deg)) translate(-3px,2px)}
  55%{transform:rotate(var(--tilt,0deg)) translate(2px,-2px)}
  80%{transform:rotate(var(--tilt,0deg)) translate(-1px,1px)}
  100%{transform:rotate(var(--tilt,0deg))}
}

.sig{max-width:46ch;font-size:clamp(15px,1.9vw,18px);line-height:1.65;color:#2A261E}
.motto{margin-top:20px;color:var(--encre-doux)}

.guichet-row{
  display:flex;align-items:center;gap:10px;flex-wrap:wrap;
  margin-top:22px;padding-top:16px;border-top:1px dashed var(--filet);
  color:var(--encre-doux);
}
.dot{width:9px;height:9px;border-radius:50%;background:var(--vert-nuit);box-shadow:0 0 0 3px rgba(63,122,77,.22);animation:pulse 2.6s infinite}
body.nuit .dot{background:#B7803C;box-shadow:0 0 0 3px rgba(183,128,60,.2)}
@keyframes pulse{50%{box-shadow:0 0 0 6px rgba(63,122,77,.12)}}

.stamp{
  position:absolute;border:2.5px solid var(--rouge);color:var(--rouge);
  font-family:var(--mono);font-size:13px;font-weight:600;letter-spacing:.16em;
  padding:6px 12px;mix-blend-mode:multiply;opacity:.94;pointer-events:none;
}
.stamp-ouvert{top:118px;right:38px;transform:rotate(8deg);font-size:15px}
.micro{position:absolute;bottom:12px;right:16px;color:var(--encre-doux);opacity:.85;letter-spacing:.08em}

/* ── contrainte 2 : révélation progressive ──────────────────────── */
.reveal{opacity:0;transform:translateY(16px)}
.reveal.on{opacity:1;transform:none;transition:opacity .7s var(--ease),transform .7s var(--ease)}

/* ── tension : réclamations ─────────────────────────────────────── */
.reclamations{list-style:none;margin:26px 0 0}
.reclamations li{padding:16px 0;border-bottom:1px dashed var(--filet);display:grid;gap:6px}
.rec-q{font-size:clamp(18px,2.6vw,25px);line-height:1.3;font-weight:500}
.rec-a{color:var(--rouge);letter-spacing:.14em}
.sep-line{margin:30px 0 10px;color:var(--gris-archive);white-space:nowrap;overflow:hidden;letter-spacing:2px}
.conclusion{max-width:52ch;margin-bottom:10px}

/* ── révélation : plan de classement ────────────────────────────── */
.intro{max-width:52ch;color:#2A261E}
.ledger-list{list-style:none;margin:24px 0}
.ledger-list li{
  display:grid;grid-template-columns:92px 1fr auto;gap:16px;align-items:baseline;
  padding:16px 4px;border-bottom:1px solid var(--filet);
}
.ll-code{font-family:var(--mono);font-size:12px;letter-spacing:.12em;color:var(--rouge);font-weight:600}
.ll-name{font-size:clamp(20px,3vw,29px);font-weight:500}
.ll-desc{color:var(--encre-doux);text-align:right}
.ledger-list li:hover .ll-name{color:var(--rouge)}
.aside{border-left:3px solid var(--encre);padding:8px 12px;margin:20px 0;color:var(--encre-doux);line-height:1.9}

.help-list{list-style:none;margin:22px 0 0}
.help-list li{padding:16px 0;border-bottom:1px dashed var(--filet);display:grid;grid-template-columns:auto 1fr;gap:4px 16px;align-items:baseline}
.h-code{font-family:var(--mono);font-size:11px;letter-spacing:.12em;color:var(--rouge);font-weight:600;grid-row:span 2}
.h-name{font-size:clamp(18px,2.4vw,23px);font-weight:500}
.h-desc{color:var(--encre-doux)}
.help-list .ink-link{justify-self:start}
.h-stamp{position:static;justify-self:start;margin-top:8px;transform:rotate(-5deg)}

/* ═══ TARIFS — le bordereau des prix ═══ */
.tarif{margin-left:12%;margin-top:26px}
.tarif-list{list-style:none;margin:24px 0;padding:0}
.tarif-list li{
  display:grid;
  grid-template-columns:86px 1fr auto;
  gap:2px 14px;
  align-items:baseline;
  padding:16px 4px 14px;
  border-bottom:1px dashed rgba(25,23,19,.4);
}
.tarif-list li:last-child{border-bottom:none}
.t-code{font-family:var(--mono);font-size:11px;letter-spacing:.12em;color:var(--rouge);font-weight:600}
.t-name{font-size:clamp(18px,2.4vw,23px);font-weight:500}
.t-desc{grid-column:2;color:var(--encre-doux)}
.t-prix{
  grid-row:span 2;
  justify-self:end;
  align-self:center;
  font-size:15px;font-weight:600;letter-spacing:.06em;
  color:var(--encre);
  border:2px solid var(--encre);
  padding:6px 12px;
  border-radius:4px;
  transform:rotate(2deg);
  background:transparent;
}
.tarif-list li:hover .t-name{color:var(--rouge)}
.tarif-list li:hover .t-prix{color:var(--rouge);border-color:var(--rouge)}
.t-xyz .t-prix{transform:rotate(-2deg);font-size:12px}
@media(max-width:640px){
  .tarif{margin-left:0}
  .tarif-list li{grid-template-columns:64px 1fr auto}
  .t-desc{display:none}
  .t-prix{grid-row:auto}
}
.s-prete{border-color:var(--vert-nuit);color:var(--vert-nuit)}

/* ── preuve : le registre ───────────────────────────────────────── */
.shelf-head{display:flex;justify-content:space-between;align-items:baseline;gap:14px;flex-wrap:wrap;margin-top:24px}
.filters{display:flex;gap:16px;flex-wrap:wrap}
.filter-link{color:var(--encre-doux);text-underline-offset:4px}
.filter-link:hover{color:var(--rouge)}
.filter-link.cur{color:var(--rouge);text-decoration:none;border-bottom:2px solid var(--rouge)}
#pieceCount{color:var(--encre-doux)}

.ledger{list-style:none;padding:0;margin:26px 0 0;columns:2;column-gap:28px}
.piece{
  break-inside:avoid;margin:0 0 28px;position:relative;
  border:1.5px solid var(--encre);background:var(--papier);
  box-shadow:4px 4px 0 rgba(25,23,19,.12);
}
.piece:nth-child(3n+1){margin-left:8px}
.piece:nth-child(3n){margin-right:10px;margin-top:-6px}
.piece.off{display:none}
.piece:hover{z-index:3}
.piece-link{
  display:block;color:inherit;text-decoration:none;cursor:crosshair;
  transform:rotate(var(--tilt,0deg));
  transition:transform .3s var(--ease);
}
.piece[data-tilt="0.4"] .piece-link{--tilt:.4deg}
.piece[data-tilt="-0.4"] .piece-link{--tilt:-.4deg}
.piece:hover .piece-link{transform:rotate(0deg) translateY(-5px)}

.cover{display:block;height:var(--h,190px);position:relative;overflow:hidden;border-bottom:1.5px solid var(--encre)}
/* pièce réelle : la photo remplace la couverture dessinée */
.cover.cov-photo{background:repeating-linear-gradient(45deg,rgba(25,23,19,.05) 0 12px,transparent 12px 24px)}
.cover.cov-photo img{width:100%;height:100%;object-fit:cover;display:block}
.pm-cover .cov-photo img{cursor:zoom-in}

/* ── la loupe (lightbox plein écran) ─────────────────────────── */
.bl-zoom{position:fixed;inset:0;z-index:1200;background:rgba(20,18,15,.94);display:flex;flex-direction:column}
.bl-zoom[hidden]{display:none}
.bl-zoom-x{position:absolute;top:10px;right:16px;background:none;border:none;color:#F0EAD9;font-size:32px;line-height:1;cursor:pointer;z-index:2;font-family:"IBM Plex Mono",monospace}
.bl-zoom-x:hover{color:var(--rouge,#C63B1E)}
/* flèches ‹ › : enchaîner les pièces sans fermer */
.bl-zoom-nav{position:absolute;top:50%;transform:translateY(-50%);background:rgba(240,234,217,.08);border:1.5px solid rgba(240,234,217,.4);color:#F0EAD9;font-size:34px;line-height:1;width:52px;height:64px;cursor:pointer;z-index:2;font-family:"IBM Plex Mono",monospace;border-radius:4px}
.bl-zoom-nav:hover{background:rgba(240,234,217,.2);border-color:#F0EAD9}
.bl-zoom-prev{left:14px}
.bl-zoom-next{right:14px}
.bl-zoom-nav[hidden]{display:none}
@media (max-width:640px){.bl-zoom-nav{width:40px;height:52px;font-size:26px;top:auto;bottom:18px;transform:none}}
.bl-zoom-cap{color:rgba(240,234,217,.85);padding:14px 60px 10px 20px}
.bl-zoom-cap .zmode{opacity:.65}
.bl-zoom-scroll{flex:1;overflow:auto;display:flex;align-items:center;justify-content:center;padding:0 20px 24px}
.bl-zoom-img{max-width:94vw;max-height:86vh;width:auto;height:auto;cursor:zoom-in;box-shadow:0 0 0 2px rgba(240,234,217,.28)}
.bl-zoom-img.is-real{max-width:none;max-height:none;cursor:zoom-out}
.piece[data-size="large"]{--h:240px}
.piece[data-size="medium"]{--h:185px}
.piece[data-size="small"]{--h:150px}

.p-body{display:block;padding:14px 16px 18px}
.p-code{display:flex;justify-content:space-between;gap:10px;color:var(--encre-doux);margin-bottom:8px}
.barcode{letter-spacing:-1px;color:var(--encre);font-weight:600}
.p-title{display:block;font-size:clamp(19px,2.4vw,26px);font-weight:500;margin-bottom:6px;line-height:1.15}
.p-meta{color:var(--encre-doux)}

.s-consulte{right:22px;bottom:64px;transform:rotate(-9deg);opacity:0}
.s-consulte.on{animation:stampIn2 .3s cubic-bezier(.2,1.6,.4,1) forwards}
@keyframes stampIn2{
  0%{opacity:0;transform:rotate(-20deg) scale(1.8)}
  100%{opacity:.94;transform:rotate(-9deg) scale(1)}
}

/* couvertures générées en CSS — chaque pièce a son encre */
.cov-inazuma{background:#14120E}
.cov-inazuma::after{content:"";position:absolute;inset:0;background:repeating-linear-gradient(45deg,transparent 0 12px,rgba(240,234,217,.06) 12px 14px)}
.cov-inazuma .bolt{
  position:absolute;left:50%;top:50%;width:74px;height:120px;
  transform:translate(-50%,-52%);
  background:var(--soufre);
  clip-path:polygon(62% 0,18% 56%,46% 56%,34% 100%,84% 42%,54% 42%);
}
.cov-inazuma .bolt::after{content:"";position:absolute;inset:0;background:rgba(198,59,30,.55);clip-path:polygon(62% 0,18% 56%,46% 56%,40% 74%,80% 20%);mix-blend-mode:multiply}

.cov-kyaa{background:#10201D}
.cov-kyaa .ring{position:absolute;right:-34px;top:-46px;width:150px;height:150px;border-radius:50%;border:2px solid var(--sarcelle);opacity:.8}
.cov-kyaa .ring::after{content:"";position:absolute;inset:26px;border-radius:50%;border:1px dashed var(--sarcelle)}
.cov-kyaa .streak{position:absolute;left:8%;bottom:22%;width:64%;height:10px;background:rgba(240,234,217,.22);transform:rotate(-7deg);box-shadow:0 26px 0 rgba(240,234,217,.12),0 52px 0 rgba(240,234,217,.06)}

.cov-xuthx{background:#E8E1CE}
.cov-xuthx .gothic{
  position:absolute;inset:0;display:grid;place-items:center;
  font-family:var(--gothic);font-size:clamp(44px,7vw,68px);letter-spacing:.04em;color:var(--encre);
  text-shadow:3px 3px 0 rgba(198,59,30,.38);
}

.cov-printemps{background:#EFE9DA}
.petal{position:absolute;width:36px;height:36px;background:var(--rouge);border-radius:62% 38% 58% 42%;opacity:.88}
.petal.p1{left:16%;top:22%;transform:rotate(18deg)}
.petal.p2{right:20%;top:38%;transform:rotate(142deg) scale(.66);background:#9C3F2A}
.petal.p3{left:38%;bottom:14%;transform:rotate(-32deg) scale(1.15);background:#C63B1E;border:1.5px solid #14120E}

.cov-foire{background:#E6DCC3}
.cov-foire .poster-type{
  position:absolute;left:16px;top:14px;
  font-family:var(--display);font-weight:800;font-size:clamp(26px,4vw,38px);
  line-height:1.02;letter-spacing:0;color:var(--encre);
}
.cov-foire .rouge-dot{position:absolute;right:20px;bottom:20px;width:54px;height:54px;border-radius:50%;background:var(--rouge)}

.cov-monogramme{background:var(--encre)}
.cov-monogramme .mono-glyph{
  position:absolute;inset:0;display:grid;place-items:center;
  font-family:var(--display);font-weight:800;font-size:clamp(40px,6vw,58px);
  letter-spacing:.08em;color:var(--papier);
}

.cov-nocturne{background:#20242B}
.cov-nocturne .moon{position:absolute;left:20%;top:26%;width:46px;height:46px;border-radius:50%;background:#EDE6D2}
.cov-nocturne .moonline{position:absolute;left:20%;top:calc(26% + 58px);width:150px;height:2px;background:rgba(237,230,210,.5);box-shadow:0 11px 0 rgba(237,230,210,.24),0 22px 0 rgba(237,230,210,.1)}

/* ── sortie : bulletin ──────────────────────────────────────────── */
.f-row{margin-bottom:18px}
.f-label{display:block;margin-bottom:6px;color:var(--encre-doux)}
.f-input{
  width:100%;background:transparent;border:0;border-bottom:1.5px solid var(--encre);
  padding:10px 2px;font:500 16px var(--text);color:var(--encre);border-radius:0;
}
.f-input:focus{outline:none;border-bottom-color:var(--rouge);background:rgba(25,23,19,.035)}
.f-input[readonly]{color:var(--gris-archive);letter-spacing:.2em}
.f-area{border:1.5px solid var(--encre);padding:12px;resize:vertical}
.f-set{border:1px dashed var(--filet);padding:12px 14px;margin-bottom:18px}
.f-set legend{padding:0 8px}
.f-opt{display:inline-flex;gap:6px;align-items:center;margin-right:16px;cursor:pointer}
input[type="radio"],input[type="checkbox"]{accent-color:var(--rouge);width:15px;height:15px}
.f-check{display:flex;gap:9px;align-items:center;margin:4px 0 12px;cursor:pointer}
.form-error{color:var(--rouge);margin:4px 0 10px}
.bulletin-meta{margin-top:18px;color:var(--encre-doux);line-height:2}
.s-recu{bottom:104px;left:30px;transform:rotate(-6deg)}
.s-recu.on{animation:stampIn2 .32s cubic-bezier(.2,1.6,.4,1) forwards}
@keyframes stampIn2{0%{opacity:0;transform:rotate(-18deg) scale(1.8)}100%{opacity:.94;transform:rotate(-6deg) scale(1)}}

.carbon{
  background:var(--encre);color:#8A8273;border-color:var(--encre);
  margin-left:10%;width:min(620px,90%);padding:22px 30px;transform:rotate(1.1deg);
}
.carbon::before{background-image:radial-gradient(circle,#26221D 4.5px,transparent 5.5px)}

/* ── colophon ───────────────────────────────────────────────────── */
.colophon{
  border-top:1.5px solid var(--encre);
  margin:26px 58px 0 0;padding:26px 4% 100px;
  display:grid;gap:6px;color:var(--encre-doux);
}
.lang-inline{display:inline-flex;gap:2px}

/* ── modales ────────────────────────────────────────────────────── */
.modal{position:fixed;inset:0;z-index:60;display:grid;place-items:center;padding:18px;background:rgba(20,18,14,.5)}
.modal[hidden]{display:none}
.modal-card{
  background:var(--papier);border:1.5px solid var(--encre);
  box-shadow:8px 8px 0 rgba(25,23,19,.22);
  max-width:580px;width:100%;max-height:88vh;overflow:auto;
  padding:clamp(22px,4vw,36px);position:relative;transform:rotate(-.4deg);
  animation:modalIn .32s var(--ease);
}
@keyframes modalIn{from{transform:rotate(-2.2deg) translateY(18px);opacity:0}}
.modal-card .title-m{margin:6px 0}
.pm-cover{height:170px;border:1.5px solid var(--encre);margin:16px 0;position:relative;overflow:hidden}
.pm-notes{list-style:none;margin:0 0 16px;display:grid;gap:7px;color:var(--encre-doux)}
.pm-notes li::before{content:"— "}
/* duplicate stamp keyframes removed here — single definition kept below */
.pm-stamp{top:64px;right:28px;opacity:0}
.pm-stamp.on{animation:stampIn2 .3s cubic-bezier(.2,1.6,.4,1) forwards}
.pm-barcode{margin-top:16px;color:var(--encre-doux)}
.tk-hint{margin:14px 0 10px;color:var(--encre-doux)}

/* ── toast ──────────────────────────────────────────────────────── */
.toast{
  position:fixed;left:50%;bottom:26px;z-index:80;
  transform:translateX(-50%) translateY(20px);
  background:var(--encre);color:var(--papier);
  padding:10px 18px;border:1.5px solid var(--papier);
  box-shadow:4px 4px 0 rgba(25,23,19,.3);
  opacity:0;pointer-events:none;transition:.28s var(--ease);max-width:82vw;
}
.toast.on{opacity:1;transform:translateX(-50%) translateY(0)}

/* ── mode nuit (guichet fermé) ──────────────────────────────────── */
body.nuit{--papier:#C7C0B1;--hors:#3A362F;--encre:#161310;--encre-doux:#57503F;--filet:rgba(22,19,16,.3)}
body.nuit,body.nuit .card,body.nuit .toc{transition:background-color .8s ease}
body.nuit .card{box-shadow:8px 8px 0 rgba(0,0,0,.25)}
body.nuit .colophon{color:#8A8273}

/* ── responsive ─────────────────────────────────────────────────── */
@media (max-width:860px){
  .toc{top:auto;bottom:0;left:0;right:0;height:44px;width:auto;flex-direction:row;justify-content:space-around;gap:0;border-left:0;border-top:1.5px solid var(--encre)}
  .toc a{writing-mode:horizontal-tb;letter-spacing:.12em;font-size:10px}
  main{margin-right:0;margin-bottom:44px}
  .colophon{margin-right:0;padding-bottom:80px}
  .sec{padding:10px 4%}
  .sec-1 .card,.sec-2 .card,.sec-3 .card,.sec-3 .help,.sec-4 .card,.sec-5 .card{margin-left:0;margin-right:0}
}
@media (max-width:680px){
  .side{display:none}
  .ledger{columns:1}
  .ll-desc{display:none}
  .ledger-list li{grid-template-columns:78px 1fr}
  .stamp-ouvert{top:auto;bottom:56px;right:18px;font-size:12px}
  .sec-2 .card{width:100%}
  .carbon{width:100%;margin-left:0}
}

/* ── accessibilité mouvement ────────────────────────────────────── */
@media (prefers-reduced-motion:reduce){
  *{animation:none!important;transition:none!important}
  .reveal{opacity:1;transform:none}
  .punch .chip,.punch-stamp{opacity:1;transform:none}
  html{scroll-behavior:auto}
}

/* ── impression : le registre part au papier ────────────────────── */
@media print{
  .toc,.toast,.modal,.dot{display:none!important}
  main{margin:0}
  .card{box-shadow:none;page-break-inside:avoid}
  body{background:#fff}
}