/* off.streams — site-archive · DA documentaire, version animée (sobre)
   Beige #F2EFE8 · Noir #0A0A0A · Bleu accent #1E3A8A (accents only)
   Playfair Display (titres/chiffres) + Inter (corps/sources) */
:root{
  --beige:#F2EFE8; --noir:#0A0A0A; --bleu:#1E3A8A;
  --ink:#0A0A0A; --soft:rgba(10,10,10,.62); --dim:rgba(10,10,10,.42); --line:rgba(10,10,10,.12);
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{
  font-family:"Inter",system-ui,sans-serif;color:var(--ink);
  background-color:var(--beige);
  background-image:
    linear-gradient(rgba(10,10,10,.05) 1px,transparent 1px),
    linear-gradient(90deg,rgba(10,10,10,.05) 1px,transparent 1px),
    linear-gradient(rgba(10,10,10,.09) 1px,transparent 1px),
    linear-gradient(90deg,rgba(10,10,10,.09) 1px,transparent 1px);
  background-size:40px 40px,40px 40px,200px 200px,200px 200px;
  min-height:100vh;padding:0 24px 80px;position:relative;overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
  animation:gridDrift 60s linear infinite;
}
/* la grille dérive très lentement */
@keyframes gridDrift{from{background-position:0 0,0 0,0 0,0 0}to{background-position:40px 80px,80px 40px,200px 200px,200px 200px}}

/* halo bleu qui respire en arrière-plan (subliminal) */
body::before{
  content:"";position:fixed;inset:-30vmax;z-index:0;pointer-events:none;
  background:radial-gradient(38vmax 38vmax at 30% 20%, rgba(30,58,138,.10), transparent 60%),
             radial-gradient(34vmax 34vmax at 75% 85%, rgba(30,58,138,.07), transparent 60%);
  animation:halo 26s ease-in-out infinite alternate;
}
@keyframes halo{
  0%{transform:translate3d(0,0,0) scale(1)}
  100%{transform:translate3d(4vmax,-3vmax,0) scale(1.12)}
}
body>*{position:relative;z-index:1}

/* crochets de coin */
.bracket{position:fixed;width:42px;height:42px;z-index:3;pointer-events:none;opacity:0;animation:fadeIn 1.2s .2s forwards}
.bracket.tl{top:26px;left:26px;border-top:1px solid var(--ink);border-left:1px solid var(--ink)}
.bracket.tr{top:26px;right:26px;border-top:1px solid var(--ink);border-right:1px solid var(--ink)}
@keyframes fadeIn{to{opacity:1}}

/* logo */
.wordmark{font-family:"Arial Narrow",Inter,sans-serif;font-weight:800;letter-spacing:.02em;
  font-size:30px;color:var(--ink);display:inline-flex;align-items:center;text-transform:uppercase}
.wordmark .dot{width:9px;height:9px;background:var(--bleu);display:inline-block;margin:0 5px;transform:translateY(1px);
  animation:pulse 3.4s ease-in-out infinite}
@keyframes pulse{0%,100%{transform:translateY(1px) scale(1);opacity:1}50%{transform:translateY(1px) scale(1.35);opacity:.7}}
.wordmark.small{font-size:18px}

/* hero — entrée en fondu/montée échelonnée */
.hero{max-width:1080px;margin:0 auto;padding:120px 0 36px;text-align:center}
.hero .wordmark,.hero .tagline,.hero .sub{opacity:0;transform:translateY(16px);animation:rise .9s cubic-bezier(.2,.7,.2,1) forwards}
.hero .wordmark{animation-delay:.05s}
.hero .tagline{animation-delay:.22s}
.hero .sub{animation-delay:.40s}
@keyframes rise{to{opacity:1;transform:none}}
.hero .tagline{font-family:"Playfair Display",Georgia,serif;font-weight:700;font-size:clamp(22px,3.4vw,34px);
  line-height:1.3;margin:22px auto 0;max-width:760px;color:var(--ink)}
.hero .sub{font-size:14px;color:var(--soft);margin-top:14px}
/* trait bleu qui se dessine sous le logo */
.hero .wordmark{position:relative}
.hero .wordmark::after{content:"";position:absolute;left:50%;bottom:-14px;height:2px;width:0;background:var(--bleu);
  transform:translateX(-50%);animation:draw 1s .7s cubic-bezier(.2,.7,.2,1) forwards}
@keyframes draw{to{width:64px}}

/* filtres */
.filters{max-width:1080px;margin:8px auto 30px;display:flex;flex-wrap:wrap;gap:8px;justify-content:center;
  opacity:0;animation:rise .9s .5s forwards}
.filters button{border:1px solid var(--line);background:#fff;color:var(--soft);
  font-family:inherit;font-size:12.5px;font-weight:600;letter-spacing:.02em;
  padding:8px 14px;border-radius:999px;cursor:pointer;transition:.18s ease}
.filters button:hover{border-color:var(--bleu);color:var(--bleu);transform:translateY(-1px)}
.filters button.on{background:var(--noir);color:var(--beige);border-color:var(--noir)}

/* archive */
.archive{max-width:1080px;margin:0 auto;display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:18px}
.empty{text-align:center;color:var(--dim);margin:40px auto;font-size:14px}

/* fiche */
.fiche{position:relative;border:1px solid var(--line);border-radius:16px;padding:26px 24px 22px;
  background:#fbfaf6;overflow:hidden;display:flex;flex-direction:column;gap:14px;
  transition:transform .28s cubic-bezier(.2,.7,.2,1),box-shadow .28s,border-color .28s;
  /* état initial avant révélation au scroll */
  opacity:0;transform:translateY(26px)}
.fiche.in{opacity:1;transform:none}
.fiche::before{content:"";position:absolute;left:0;top:50%;height:0;width:3px;background:var(--bleu);
  transform:translateY(-50%);transition:height .5s cubic-bezier(.2,.7,.2,1) .1s}
.fiche.in::before{height:calc(100% - 48px)}
.fiche:hover{transform:translateY(-5px);box-shadow:0 22px 50px -28px rgba(10,10,10,.45);border-color:rgba(30,58,138,.35)}
.fiche:hover::before{height:calc(100% - 28px)}
.fiche .theme{font-size:10px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--bleu)}
.fiche .chiffre{font-family:"Playfair Display",Georgia,serif;font-weight:900;font-size:54px;line-height:1;color:var(--bleu)}
.fiche .fait{font-family:"Playfair Display",Georgia,serif;font-weight:700;font-size:21px;line-height:1.35;color:var(--ink)}
.fiche .ctx{font-size:14px;line-height:1.55;color:var(--soft)}
.fiche .src{margin-top:auto;font-size:11.5px;color:var(--dim);border-top:1px solid var(--line);padding-top:12px}
.fiche .src b{font-weight:600;color:var(--soft)}

/* variante sombre (rythme) — type "chiffre" */
.fiche.dark{background:var(--noir);border-color:rgba(255,255,255,.08)}
.fiche.dark:hover{border-color:rgba(91,134,196,.5)}
.fiche.dark .fait{color:var(--beige)}
.fiche.dark .ctx{color:rgba(242,239,232,.6)}
.fiche.dark .src{color:rgba(242,239,232,.4);border-top-color:rgba(255,255,255,.1)}
.fiche.dark .src b{color:rgba(242,239,232,.6)}
.fiche.dark .theme{color:#5b86c4}

/* footer */
.foot{max-width:1080px;margin:70px auto 0;padding-top:26px;border-top:1px solid var(--line);
  display:flex;flex-direction:column;align-items:center;gap:8px;text-align:center}
.foot p{font-size:12px;color:var(--dim)}

@media(max-width:560px){
  .bracket{display:none}
  .hero{padding:80px 0 28px}
  body{padding:0 16px 60px}
}
/* respect des préférences d'accessibilité */
@media(prefers-reduced-motion:reduce){
  *{animation:none!important;transition:none!important}
  .fiche{opacity:1;transform:none}.fiche::before{height:calc(100% - 48px)}
  .hero .wordmark,.hero .tagline,.hero .sub,.filters{opacity:1;transform:none}
}