/* =========================================================================
   DOSSIER FRAUDE — système de design "dossier d'enquête"
   Palette : encre nocturne + papier kraft + tampon rouge + laiton + sarcelle
   ========================================================================= */

:root{
  /* Couleurs */
  --ink:        #12151b;   /* fond principal, bleu-encre quasi noir */
  --ink-2:      #1b1f27;   /* panneaux sur fond sombre */
  --ink-3:      #262b35;   /* bordures / séparateurs sur fond sombre */
  --paper:      #f2ecd9;   /* fiche papier / kraft clair */
  --paper-dim:  #e7ddc0;   /* papier ombré */
  --paper-line: #d8cca4;   /* filet sur papier */
  --stamp:      #b3311c;   /* rouge tampon — alerte, accent primaire */
  --stamp-dim:  #7e2416;
  --brass:      #c99a3e;   /* laiton — accent secondaire */
  --teal:       #3f7268;   /* sarcelle — accent tertiaire, "pièce à conviction" */
  --ink-text:   #eae4d2;   /* texte clair sur fond sombre */
  --ink-text-dim: #a9a496; /* texte secondaire sur fond sombre */
  --paper-text: #201c12;  /* texte sombre sur papier */
  --paper-text-dim: #5b5646;

  /* Typo */
  --font-display: "Fraunces", "Iowan Old Style", Georgia, serif;
  --font-body: "Source Serif 4", Georgia, "Times New Roman", serif;
  --font-mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace;

  /* Échelle */
  --step-0: clamp(1rem, 0.95rem + 0.2vw, 1.05rem);
  --step-1: clamp(1.2rem, 1.1rem + 0.4vw, 1.4rem);
  --step-2: clamp(1.5rem, 1.3rem + 0.8vw, 1.9rem);
  --step-3: clamp(2rem, 1.6rem + 1.6vw, 2.8rem);
  --step-4: clamp(2.6rem, 2rem + 2.6vw, 4.2rem);

  --radius: 3px;
  --container: 1180px;
  --ease: cubic-bezier(.22,.61,.36,1);
}

/* ---------- Reset minimal ---------- */
*, *::before, *::after{ box-sizing: border-box; }
html{ -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior: auto; }
  *, *::before, *::after{ animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; }
}
body{
  margin:0;
  background: var(--ink);
  color: var(--ink-text);
  font-family: var(--font-body);
  font-size: var(--step-0);
  line-height: 1.6;
  text-rendering: optimizeLegibility;
}
img,svg{ max-width:100%; display:block; }
a{ color: inherit; }
h1,h2,h3,h4{
  font-family: var(--font-display);
  font-weight: 600;
  line-height: 1.12;
  margin: 0 0 .5em;
  letter-spacing: -0.01em;
}
p{ margin:0 0 1.1em; }
ul,ol{ margin:0 0 1.1em; padding-left: 1.3em; }
li{ margin-bottom:.35em; }
.container{ width:100%; max-width: var(--container); margin-inline:auto; padding-inline: 1.5rem; }

/* Filigrane de trame de fond façon liège/toile sur les zones sombres */
.grain-bg{
  background-image:
    radial-gradient(rgba(242,236,217,0.035) 1px, transparent 1px);
  background-size: 5px 5px;
}

/* ---------- Accessibilité ---------- */
.skip-link{
  position:absolute; left:-999px; top:auto;
  background: var(--stamp); color:#fff; padding: .8rem 1.2rem;
  font-family: var(--font-mono); text-transform:uppercase; letter-spacing:.08em; font-size:.8rem;
  z-index: 300;
}
.skip-link:focus{ left: 1rem; top: 1rem; }
:focus-visible{ outline: 2px solid var(--brass); outline-offset: 3px; }

/* ---------- En-tête / navigation "onglets de classeur" ---------- */
.site-header{
  position: sticky; top:0; z-index: 100;
  background: var(--ink); border-bottom: 1px solid var(--ink-3);
}
.site-header__bar{
  display:flex; align-items:center; justify-content:space-between;
  padding: .9rem 1.5rem; max-width: var(--container); margin-inline:auto;
  gap: 1rem;
}
.brand{
  display:flex; align-items:baseline; gap:.55rem;
  text-decoration:none; font-family: var(--font-mono); white-space:nowrap;
}
.brand__mark{
  color: var(--ink); background: var(--stamp);
  font-weight:700; padding: .12rem .4rem; border-radius:2px;
  letter-spacing:.04em; font-size:.85rem;
}
.brand__word{ font-family: var(--font-display); font-weight:600; font-size:1.2rem; color: var(--ink-text); }
.brand__tag{ display:none; }

.tabs{ display:flex; gap:.15rem; list-style:none; margin:0; padding:0; flex-wrap: wrap; }
.tabs a{
  display:block; text-decoration:none; font-family: var(--font-mono); font-size:.78rem;
  text-transform:uppercase; letter-spacing:.07em; color: var(--ink-text-dim);
  padding:.55rem .75rem; border:1px solid transparent; border-bottom:none;
  border-radius: 4px 4px 0 0; transition: color .15s var(--ease), background .15s var(--ease), border-color .15s var(--ease);
}
.tabs a:hover{ color: var(--ink-text); background: var(--ink-2); }
.tabs a[aria-current="page"]{
  color: var(--paper); background: var(--ink-2);
  border-color: var(--ink-3);
}
.nav-toggle{
  display:none; background:none; border:1px solid var(--ink-3); color: var(--ink-text);
  font-family: var(--font-mono); padding: .45rem .6rem; border-radius:3px; cursor:pointer;
}

@media (max-width: 780px){
  .nav-toggle{ display:inline-flex; align-items:center; gap:.4rem; }
  .tabs{
    position:absolute; inset-inline:0; top:100%; background: var(--ink);
    flex-direction:column; border-bottom:1px solid var(--ink-3);
    max-height:0; overflow:hidden; transition: max-height .25s var(--ease);
  }
  .tabs.is-open{ max-height: 420px; }
  .tabs a{ border-radius:0; padding:.9rem 1.5rem; border-bottom:1px solid var(--ink-3); }
  .site-header{ position: sticky; }
  .site-header__bar{ position:relative; flex-wrap:wrap; }
}

/* ---------- Fil d'ariane ---------- */
.breadcrumb{
  font-family: var(--font-mono); font-size:.75rem; letter-spacing:.05em; text-transform:uppercase;
  color: var(--ink-text-dim); padding: .9rem 0; border-bottom:1px dashed var(--ink-3);
}
.breadcrumb ol{ display:flex; flex-wrap:wrap; gap:.4rem; list-style:none; margin:0; padding:0; }
.breadcrumb li:not(:last-child)::after{ content:"/"; margin-left:.4rem; color: var(--ink-3); }
.breadcrumb a{ text-decoration:none; color: var(--ink-text-dim); }
.breadcrumb a:hover{ color: var(--brass); }
.breadcrumb li:last-child{ color: var(--paper); }

/* =========================================================================
   HOME — panneau d'enquête
   ========================================================================= */
.corkboard{
  position:relative; padding: clamp(3rem,6vw,6rem) 0 clamp(2.5rem,5vw,4rem);
  overflow:hidden;
  background:
    radial-gradient(1100px 480px at 15% -10%, rgba(179,49,28,.16), transparent 60%),
    radial-gradient(900px 500px at 90% 0%, rgba(201,154,62,.10), transparent 55%),
    var(--ink);
}
.corkboard__eyebrow{
  font-family: var(--font-mono); text-transform:uppercase; letter-spacing:.16em;
  font-size:.78rem; color: var(--brass); margin-bottom: 1rem; display:flex; align-items:center; gap:.6rem;
}
.corkboard__eyebrow::before{ content:""; width:26px; height:1px; background: var(--brass); display:inline-block; }
.corkboard h1{
  font-size: var(--step-4); color: var(--paper); max-width: 15ch; margin-bottom:.4rem;
}
.corkboard__lede{
  max-width: 56ch; font-size: var(--step-1); color: var(--ink-text-dim); font-family: var(--font-body);
}
.corkboard__stamp{
  border: 3px solid var(--stamp); color: var(--stamp); font-family: var(--font-mono);
  text-transform:uppercase; letter-spacing:.14em; font-weight:700; font-size:.72rem;
  display:inline-block; padding:.45rem .8rem; transform: rotate(-4deg);
  mix-blend-mode: normal; margin-top:1.4rem; border-radius:2px;
  box-shadow: 0 0 0 1px rgba(179,49,28,.25) inset;
}

/* fiches façon board avec fils reliant vers un point central */
.board{ position:relative; margin-top: clamp(2.5rem,6vw,4.5rem); }
.board__threads{ position:absolute; inset:0; width:100%; height:100%; overflow:visible; pointer-events:none; }
.board__threads path{
  fill:none; stroke: var(--stamp); stroke-width:1.4; opacity:.55;
  stroke-dasharray: 6 6;
}
.board__grid{
  position:relative; display:grid; gap: 1.6rem;
  grid-template-columns: repeat(3, 1fr); z-index:2;
}
@media (max-width: 900px){ .board__grid{ grid-template-columns: 1fr; } }

.card-index{
  background: var(--paper); color: var(--paper-text); border-radius: 2px;
  padding: 1.6rem 1.5rem 1.5rem; position:relative; text-decoration:none; display:block;
  box-shadow: 0 18px 30px -14px rgba(0,0,0,.55), 0 2px 0 rgba(0,0,0,.15);
  transition: transform .2s var(--ease), box-shadow .2s var(--ease);
}
.card-index:nth-child(1){ transform: rotate(-1.4deg); }
.card-index:nth-child(2){ transform: rotate(0.8deg); }
.card-index:nth-child(3){ transform: rotate(-0.6deg); }
.card-index:hover{ transform: translateY(-6px) rotate(0deg); box-shadow: 0 26px 40px -16px rgba(0,0,0,.6); }
.card-index::before{
  content:""; position:absolute; top:-9px; left:50%; transform:translateX(-50%);
  width:14px; height:14px; border-radius:50%;
  background: radial-gradient(circle at 35% 30%, #e8583f, var(--stamp-dim));
  box-shadow: 0 3px 4px rgba(0,0,0,.5);
}
.card-index__tag{
  font-family: var(--font-mono); font-size:.68rem; text-transform:uppercase; letter-spacing:.08em;
  color: var(--teal); border:1px solid var(--teal); display:inline-block; padding:.15rem .45rem; border-radius:2px;
  margin-bottom:.7rem;
}
.card-index h2{ font-size: 1.35rem; margin-bottom:.5rem; }
.card-index p{ color: var(--paper-text-dim); font-size:.92rem; margin-bottom:.9rem; }
.card-index__stat{ font-family: var(--font-mono); font-size:.78rem; color: var(--stamp); font-weight:700; }
.card-index__more{ font-family: var(--font-mono); font-size:.72rem; text-transform:uppercase; letter-spacing:.06em; margin-top:.9rem; display:inline-block; border-bottom:1px solid currentColor; }

/* ---------- Ticker de chiffres ---------- */
.stat-strip{ background: var(--paper); color: var(--paper-text); border-top:1px solid var(--paper-line); border-bottom:1px solid var(--paper-line); }
.stat-strip__grid{ display:grid; grid-template-columns:repeat(4,1fr); }
@media (max-width: 820px){ .stat-strip__grid{ grid-template-columns:repeat(2,1fr); } }
.stat-strip__item{ padding: 1.6rem 1.4rem; border-right:1px dashed var(--paper-line); }
.stat-strip__item:last-child{ border-right:none; }
.stat-strip__num{ font-family: var(--font-mono); font-weight:700; font-size: clamp(1.5rem,3vw,2.1rem); color: var(--stamp); display:block; }
.stat-strip__label{ font-size:.82rem; color: var(--paper-text-dim); }

/* ---------- Spotlight (dossier complémentaire / réflexif) ---------- */
.spotlight{
  display:grid; grid-template-columns: 1.3fr 1fr; gap: 2.4rem; align-items:center;
  background: var(--ink-2); border:1px solid var(--ink-3); border-left: 5px solid var(--brass);
  border-radius: 3px; padding: 2rem 2.2rem;
}
@media (max-width: 860px){ .spotlight{ grid-template-columns: 1fr; } }
.spotlight__eyebrow{ font-family: var(--font-mono); text-transform:uppercase; letter-spacing:.12em; font-size:.72rem; color: var(--brass); display:block; margin-bottom:.6rem; }
.spotlight h2{ font-size: var(--step-2); color: var(--paper); }
.spotlight p{ color: var(--ink-text-dim); }
.spotlight__stats{ display:flex; flex-direction:column; gap:1rem; }
.spotlight__stat{ border-left:2px solid var(--stamp); padding-left:.9rem; }
.spotlight__stat b{ display:block; font-family: var(--font-mono); font-size:1.3rem; color: var(--stamp); }
.spotlight__stat span{ font-size:.8rem; color: var(--ink-text-dim); }

/* ---------- Redacted reveal (bandeau noirci qui se révèle) ---------- */
.redacted{
  position:relative; display:inline-block; cursor:pointer; border-radius:2px;
}
.redacted__bar{
  position:absolute; inset:0; background: var(--ink); transform-origin:left;
  transition: transform .5s var(--ease); border-radius:2px;
}
.redacted.is-revealed .redacted__bar, .redacted:focus .redacted__bar, .redacted:hover .redacted__bar{ transform: scaleX(0); }
.redacted__hint{ font-family: var(--font-mono); font-size:.65rem; opacity:.6; margin-left:.4rem; }

/* =========================================================================
   Sections génériques
   ========================================================================= */
.section{ padding: clamp(3rem,6vw,5rem) 0; }
.section--paper{ background: var(--paper); color: var(--paper-text); }
.section-head{ max-width: 62ch; margin-bottom: 2.4rem; }
.section-head .kicker{
  font-family: var(--font-mono); text-transform:uppercase; letter-spacing:.14em; font-size:.75rem;
  color: var(--brass); display:block; margin-bottom:.6rem;
}
.section--paper .section-head .kicker{ color: var(--stamp); }
.section-head h2{ font-size: var(--step-3); }

.grid-3{ display:grid; grid-template-columns: repeat(3,1fr); gap: 1.4rem; }
.grid-2{ display:grid; grid-template-columns: repeat(2,1fr); gap: 1.4rem; }
@media (max-width: 860px){ .grid-3, .grid-2{ grid-template-columns: 1fr; } }

.evidence{
  border: 1px solid var(--ink-3); background: var(--ink-2); border-radius: 3px; padding: 1.3rem 1.4rem;
  position:relative;
}
.evidence::before{
  content: attr(data-tag); position:absolute; top:-.65rem; left:1rem; background: var(--teal); color:#fff;
  font-family: var(--font-mono); font-size:.62rem; text-transform:uppercase; letter-spacing:.08em;
  padding: .18rem .5rem; border-radius:2px;
}
.evidence h3{ font-size:1.05rem; margin-top:.3rem; }
.section--paper .evidence{ background:#fff; border-color: var(--paper-line); }

/* =========================================================================
   Page dossier — mise en page classeur
   ========================================================================= */
.case-header{
  background: var(--ink); padding: clamp(2.4rem,5vw,4rem) 0 2rem; position:relative; overflow:hidden;
}
.case-header::after{
  content:""; position:absolute; inset:0;
  background: radial-gradient(700px 340px at 85% 0%, rgba(179,49,28,.14), transparent 60%);
  pointer-events:none;
}
.case-meta{ display:flex; flex-wrap:wrap; gap:.6rem; margin-bottom:1.1rem; }
.case-meta span{
  font-family: var(--font-mono); font-size:.68rem; text-transform:uppercase; letter-spacing:.06em;
  border:1px solid var(--ink-3); color: var(--ink-text-dim); padding:.25rem .55rem; border-radius:2px;
}
.case-header h1{ color: var(--paper); font-size: var(--step-3); max-width: 22ch; }
.case-header .dek{ color: var(--ink-text-dim); font-size: var(--step-1); max-width: 62ch; }

.case-layout{
  display:grid; grid-template-columns: 240px 1fr; gap: 3rem; align-items:start;
  padding-block: clamp(2.5rem,5vw,3.5rem);
}
@media (max-width: 980px){ .case-layout{ grid-template-columns: 1fr; } }

.case-toc{
  position: sticky; top: 5.2rem; background: var(--paper); color: var(--paper-text);
  border-radius: 2px; padding: 1.2rem 1.1rem; box-shadow: 0 10px 24px -14px rgba(0,0,0,.5);
}
.case-toc__label{ font-family: var(--font-mono); font-size:.68rem; text-transform:uppercase; letter-spacing:.1em; color: var(--stamp); display:block; margin-bottom:.7rem; }
.case-toc ol{ list-style:none; padding:0; margin:0; counter-reset: toc; }
.case-toc li{ counter-increment: toc; margin-bottom:.55rem; }
.case-toc a{
  text-decoration:none; font-size:.85rem; color: var(--paper-text-dim); display:flex; gap:.5rem;
  line-height:1.3; border-left:2px solid transparent; padding-left:.5rem;
}
.case-toc a::before{ content: counter(toc, decimal-leading-zero); font-family: var(--font-mono); color: var(--teal); font-size:.72rem; }
.case-toc a:hover, .case-toc a.is-active{ color: var(--paper-text); border-left-color: var(--stamp); }
@media (max-width: 980px){ .case-toc{ position:static; } }

.case-body article > section{ margin-bottom: 3.1rem; scroll-margin-top: 5.5rem; }
.case-body h2{
  font-size: var(--step-2); color: var(--paper);
  border-bottom: 1px solid var(--ink-3); padding-bottom:.5rem; margin-bottom:1.1rem;
  display:flex; align-items:baseline; gap:.6rem;
}
.case-body h2 .num{ font-family: var(--font-mono); font-size:.8rem; color: var(--stamp); }
.case-body h3{ font-size:1.2rem; color: var(--paper); margin-top:1.6rem; }
.case-body p, .case-body li{ color: var(--ink-text); }
.case-body strong{ color: var(--paper); }

.tldr{
  background: var(--paper); color: var(--paper-text); border-radius:3px; padding: 1.4rem 1.5rem;
  margin-bottom: 2.6rem; border-left: 5px solid var(--stamp); box-shadow: 0 10px 26px -16px rgba(0,0,0,.5);
}
.tldr__label{ font-family: var(--font-mono); font-size:.7rem; letter-spacing:.1em; text-transform:uppercase; color: var(--stamp); display:block; margin-bottom:.5rem; }
.tldr p:last-child{ margin-bottom:0; }
/* .tldr sits on paper inside .case-body — override the dark-bg text colors set by .case-body p/strong/li */
.case-body .tldr p, .case-body .tldr li{ color: var(--paper-text); }
.case-body .tldr strong{ color: var(--stamp); }

.pull-figure{
  display:flex; gap:1.2rem; align-items:flex-start; background: var(--ink-2); border:1px solid var(--ink-3);
  border-radius:3px; padding:1.1rem 1.3rem; margin: 1.4rem 0;
}
.pull-figure .num{ font-family: var(--font-mono); font-weight:700; color: var(--stamp); font-size: 1.6rem; white-space:nowrap; }
.pull-figure p{ margin:0; font-size:.92rem; color: var(--ink-text-dim); }

blockquote{
  margin: 1.6rem 0; padding: 1rem 1.3rem; border-left: 3px solid var(--brass); background: var(--ink-2);
  font-style: italic; color: var(--ink-text-dim);
}
blockquote cite{ display:block; margin-top:.5rem; font-family: var(--font-mono); font-style:normal; font-size:.75rem; text-transform:uppercase; letter-spacing:.05em; }

table{ width:100%; border-collapse: collapse; margin: 1.2rem 0 1.8rem; font-size:.92rem; }
caption{ text-align:left; font-family: var(--font-mono); font-size:.72rem; text-transform:uppercase; letter-spacing:.06em; color: var(--ink-text-dim); margin-bottom:.5rem; }
th, td{ border-bottom: 1px solid var(--ink-3); padding: .65rem .7rem; text-align:left; vertical-align:top; }
thead th{ font-family: var(--font-mono); font-size:.72rem; text-transform:uppercase; letter-spacing:.05em; color: var(--brass); border-bottom:1px solid var(--brass); }
tbody tr:hover{ background: rgba(242,236,217,.04); }

.timeline{ list-style:none; margin:0; padding:0; border-left: 2px solid var(--ink-3); }
.timeline li{ position:relative; padding: 0 0 1.7rem 1.6rem; }
.timeline li::before{
  content:""; position:absolute; left:-6px; top:.35rem; width:10px; height:10px; border-radius:50%;
  background: var(--stamp); box-shadow:0 0 0 3px var(--ink);
}
.timeline .year{ font-family: var(--font-mono); color: var(--brass); font-size:.78rem; display:block; margin-bottom:.15rem; }
.timeline strong{ color: var(--paper); }

.tag-list{ list-style:none; padding:0; margin:1rem 0; display:flex; flex-wrap:wrap; gap:.5rem; }
.tag-list li{ margin:0; }
.tag-list a{
  text-decoration:none; font-family: var(--font-mono); font-size:.72rem; text-transform:uppercase; letter-spacing:.04em;
  border:1px solid var(--ink-3); padding:.3rem .6rem; border-radius:2px; color: var(--ink-text-dim);
}
.tag-list a:hover{ color: var(--paper); border-color: var(--brass); }

.case-footer{
  border-top: 1px dashed var(--ink-3); margin-top: 3rem; padding-top:2rem;
  display:flex; flex-wrap:wrap; justify-content:space-between; gap:1.4rem;
}
.case-footer a.btn{ text-decoration:none; }

.btn{
  display:inline-flex; align-items:center; gap:.5rem; font-family: var(--font-mono); font-size:.78rem;
  text-transform:uppercase; letter-spacing:.06em; padding:.75rem 1.1rem; border-radius:2px; text-decoration:none;
  border: 1px solid var(--stamp); color: var(--stamp); transition: all .18s var(--ease);
}
.btn:hover{ background: var(--stamp); color: #fff; }
.btn--ghost{ border-color: var(--ink-3); color: var(--ink-text-dim); }
.btn--ghost:hover{ background: var(--ink-2); color: var(--paper); border-color: var(--brass); }

/* ---------- Glossaire ---------- */
.glossary-index{ display:flex; flex-wrap:wrap; gap:.4rem; margin-bottom:2.5rem; }
.glossary-index a{
  font-family: var(--font-mono); text-decoration:none; width:2rem; height:2rem; display:flex; align-items:center;
  justify-content:center; border:1px solid var(--ink-3); border-radius:2px; color: var(--ink-text-dim); font-size:.85rem;
}
.glossary-index a:hover{ border-color: var(--brass); color: var(--paper); }
.glossary-list dt{
  font-family: var(--font-display); font-size:1.3rem; color: var(--paper); margin-top:2.2rem;
  scroll-margin-top: 5.5rem; display:flex; align-items:center; gap:.6rem;
}
.glossary-list dt small{ font-family: var(--font-mono); font-size:.65rem; color: var(--teal); border:1px solid var(--teal); padding:.1rem .4rem; border-radius:2px; }
.glossary-list dd{ margin: .4rem 0 0; color: var(--ink-text-dim); max-width: 68ch; }
.letter-head{
  font-family: var(--font-mono); color: var(--stamp); font-size:1.5rem; border-bottom:1px solid var(--ink-3);
  padding-bottom:.3rem; margin-top:3rem;
}
.letter-head:first-of-type{ margin-top:0; }

/* ---------- Sources / bibliographie ---------- */
.source-list{ list-style:none; margin:0; padding:0; counter-reset: src; }
.source-list li{ counter-increment: src; padding: 1rem 0; border-bottom:1px solid var(--ink-3); display:flex; gap:1rem; }
.source-list li::before{ content: counter(src); font-family: var(--font-mono); color: var(--stamp); flex:0 0 auto; }
.source-list a{ color: var(--paper); text-decoration-color: var(--ink-3); }

/* ---------- Pied de page ---------- */
.site-footer{ background: var(--ink); border-top:1px solid var(--ink-3); padding: 3rem 0 2.2rem; }
.footer-grid{ display:grid; grid-template-columns: 1.4fr 1fr 1fr; gap: 2rem; margin-bottom: 2.4rem; }
@media (max-width: 780px){ .footer-grid{ grid-template-columns: 1fr; } }
.footer-grid h3{ font-family: var(--font-mono); font-size:.72rem; text-transform:uppercase; letter-spacing:.08em; color: var(--brass); margin-bottom:.9rem; }
.footer-grid ul{ list-style:none; padding:0; margin:0; }
.footer-grid a{ text-decoration:none; color: var(--ink-text-dim); font-size:.9rem; display:inline-block; padding:.2rem 0; }
.footer-grid a:hover{ color: var(--paper); }
.footer-bottom{
  border-top:1px solid var(--ink-3); padding-top:1.4rem; display:flex; flex-wrap:wrap; justify-content:space-between;
  gap:.8rem; font-family: var(--font-mono); font-size:.72rem; color: var(--ink-text-dim);
}
.footer-stamp{ color: var(--stamp); border:1px solid var(--stamp); padding:.15rem .5rem; border-radius:2px; transform: rotate(-2deg); display:inline-block; }

/* ---------- Page 404 ---------- */
.notfound{ min-height: 60vh; display:flex; flex-direction:column; align-items:flex-start; justify-content:center; padding: 4rem 0; }

/* ---------- Utilitaires ---------- */
.visually-hidden{ position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }
.small{ font-size:.85rem; color: var(--ink-text-dim); }