/* Boukha Bokobsa — jetons et base. Direction « Le clair-obscur de la figue » (conseil des IA, 20/10/2026). */
:root {
  --nuit: #12100E;        /* fond principal (~70 % de la surface) */
  --nuit-2: #1B1815;      /* fond secondaire, cartes sur nuit */
  --chaux: #F4EFE6;       /* texte sur nuit ; fond de la section Légende */
  --figue: #5B1E3A;       /* texte sur chaux, fonds ponctuels */
  --laiton: #C9A24A;      /* étoile, filets, chiffres. Jamais en texte sur chaux */
  --terracotta: #B8462C;  /* boutons principaux (écho au fer forgé rouge) */
  --terracotta-fonce: #9E3A23;
  --mer: #3FB5AE;         /* accent rare : filtre actif, focus */
  --pierre: #8C857B;      /* texte secondaire sur nuit */
  --ligne: rgba(244, 239, 230, .14);
  --courbe: cubic-bezier(.22, 1, .36, 1);
  --marge: clamp(20px, 5vw, 72px);
  --largeur: 1320px;
}

*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; padding: 0; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body { font: 400 1.0625rem/1.65 'Figtree', system-ui, sans-serif; color: var(--chaux); background: var(--nuit); -webkit-font-smoothing: antialiased; overflow-x: hidden; }
body::after { content: ''; position: fixed; inset: 0; z-index: 100; pointer-events: none; background: url('/images/grain.webp'); opacity: .04; mix-blend-mode: overlay; }
img, svg { display: block; max-width: 100%; }
a { color: inherit; }
button, input, textarea, select { font: inherit; color: inherit; }
button { cursor: pointer; }
:focus-visible { outline: 2px solid var(--mer); outline-offset: 4px; }
[hidden] { display: none !important; }
::selection { background: var(--figue); color: var(--chaux); }

h1, h2, h3 { font-family: 'Fraunces', Georgia, serif; font-weight: 300; font-variation-settings: 'opsz' 144, 'SOFT' 50; color: var(--chaux); }
h1 { font-size: clamp(2.9rem, 7.4vw, 7rem); line-height: .97; letter-spacing: -.02em; }
h2 { font-size: clamp(2.2rem, 4.8vw, 4.4rem); line-height: 1.02; letter-spacing: -.015em; }
h3 { font-size: clamp(1.45rem, 2.3vw, 1.95rem); line-height: 1.15; font-weight: 400; }
h1 em, h2 em, h3 em, .citation em { font-style: italic; font-weight: 300; color: var(--laiton); }
p { max-width: 62ch; }

.surtitre { display: inline-flex; align-items: center; gap: 10px; font: 600 .75rem/1 'Figtree', sans-serif; text-transform: uppercase; letter-spacing: .24em; color: var(--laiton); }
.chapo { font: italic 300 clamp(1.2rem, 2vw, 1.6rem)/1.45 'Fraunces', serif; color: var(--chaux); }
.legende-photo { font: 500 .8125rem/1.4 'Figtree', sans-serif; letter-spacing: .02em; color: var(--pierre); }
.visuellement-cache { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.evitement { position: absolute; left: 12px; top: -60px; z-index: 200; padding: 10px 16px; background: var(--chaux); color: var(--nuit); }
.evitement:focus { top: 12px; }

/* Apparition au défilement (activée par commun.js ; neutralisée si l'utilisateur réduit les animations). */
.js .apparait { opacity: 0; transform: translateY(24px); transition: opacity .7s var(--courbe), transform .7s var(--courbe); transition-delay: var(--delai, 0ms); }
.js .apparait.visible { opacity: 1; transform: none; }
.js .revele img { clip-path: inset(100% 0 0 0); transform: scale(1.06); transition: clip-path .9s var(--courbe), transform 1.2s var(--courbe); }
.js .revele.visible img { clip-path: inset(0); transform: none; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .js .apparait, .js .revele img { opacity: 1; transform: none; clip-path: none; transition: none; }
}