/* ============================================================
   RCK & KOUBA — MÉMOIRE EN IMAGES · promenade cinématographique
   Scrollytelling plein écran : chaque document est une scène,
   la molette est la caméra. HUD époque/lieu, chapitres, générique.
   ============================================================ */
.mem{background:#0D0B09;color:#EFE7D8;position:relative}
.mem *{box-sizing:border-box}
.mem::before{content:"";position:fixed;inset:0;pointer-events:none;z-index:60;opacity:.45;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 .05 0'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E")}
/* ---------- HUD ---------- */
.mem-progress{position:fixed;top:0;left:0;height:3px;width:0;background:linear-gradient(90deg,var(--club-green),#7BE0A8);
  z-index:90;transition:width .15s linear}
.mem-hud{position:fixed;bottom:1.1rem;inset-inline-start:1.2rem;z-index:70;opacity:0;transform:translateY(14px);
  transition:.5s;pointer-events:none}
.mem-hud.on{opacity:1;transform:none}
.mem-hud .ep{font-family:var(--font-display);font-size:clamp(1.9rem,4.5vw,3rem);font-weight:700;color:#F5EEDF;
  line-height:1;text-shadow:0 3px 20px rgba(0,0,0,.8)}
html[lang="ar"] .mem-hud .ep{font-family:var(--font-ar-display)}
.mem-hud .li{font-size:.74rem;letter-spacing:.2em;text-transform:uppercase;color:#B9AF9C;margin-top:.3rem;
  font-family:var(--font-display);text-shadow:0 2px 12px rgba(0,0,0,.8)}
html[lang="ar"] .mem-hud .li{letter-spacing:0;font-family:var(--font-ar-display);font-size:.85rem}
.mem-count{position:fixed;bottom:1.2rem;inset-inline-end:1.3rem;z-index:70;font-family:var(--font-display);
  font-size:.78rem;letter-spacing:.2em;color:#B9AF9C;opacity:0;transition:.5s;text-shadow:0 2px 10px rgba(0,0,0,.8)}
.mem-count.on{opacity:1}
html[lang="ar"] .mem-count{letter-spacing:.04em;font-family:var(--font-ar-display)}
/* rail des chapitres */
.mem-rail{position:fixed;top:50%;inset-inline-end:.9rem;transform:translateY(-50%);z-index:70;display:flex;
  flex-direction:column;gap:.55rem;opacity:0;transition:.5s}
.mem-rail.on{opacity:1}
.mem-rail a{width:9px;height:9px;border-radius:50%;background:rgba(239,231,216,.28);display:block;transition:.25s;position:relative}
.mem-rail a:hover,.mem-rail a.act{background:var(--club-green);transform:scale(1.5)}
.mem-rail a span{position:absolute;inset-inline-end:18px;top:50%;transform:translateY(-50%);white-space:nowrap;
  background:rgba(13,11,9,.92);color:#EFE7D8;font-size:.68rem;padding:.25em .7em;border-radius:4px;opacity:0;
  pointer-events:none;transition:.2s;font-family:var(--font-display);letter-spacing:.08em;text-transform:uppercase}
html[lang="ar"] .mem-rail a span{letter-spacing:0;font-family:var(--font-ar-display)}
.mem-rail a:hover span{opacity:1}
@media(max-width:700px){.mem-rail{display:none}}
/* ---------- generique d'ouverture ---------- */
.mem-open{height:100vh;position:relative;display:flex;align-items:center;justify-content:center;overflow:hidden;text-align:center}
.mem-open .bg{position:absolute;inset:0;background-size:cover;background-position:center 35%;
  filter:sepia(.5) brightness(.42);transform:scale(1.05);animation:memhz 28s ease-in-out infinite alternate}
@keyframes memhz{to{transform:scale(1.16)}}
.mem-open::after{content:"";position:absolute;inset:0;background:radial-gradient(90% 90% at 50% 45%,transparent 30%,rgba(13,11,9,.9) 100%)}
.mem-open-in{position:relative;z-index:2;padding:1rem}
.mem-open .sur{font-family:var(--font-display);letter-spacing:.55em;font-size:clamp(.7rem,1.6vw,.9rem);color:#B9AF9C;
  text-transform:uppercase;margin:0 0 1rem;opacity:0;animation:memfade 1.2s ease .3s forwards}
html[lang="ar"] .mem-open .sur{letter-spacing:.1em;font-family:var(--font-ar-display)}
.mem-open h1{font-size:clamp(3rem,12vw,7.5rem);color:#F5EEDF;margin:0;line-height:.95;letter-spacing:.04em;
  text-shadow:0 10px 60px rgba(0,0,0,.9);opacity:0;transform:scale(1.12);animation:memtitle 1.4s cubic-bezier(.2,.7,.3,1) .7s forwards}
@keyframes memtitle{to{opacity:1;transform:none}}
.mem-open .sub{color:#CBC1AC;font-size:clamp(.95rem,2vw,1.2rem);margin:1.1rem 0 0;opacity:0;animation:memfade 1.2s ease 1.5s forwards}
.mem-open .years{display:flex;align-items:center;justify-content:center;gap:1rem;margin-top:1.3rem;
  opacity:0;animation:memfade 1.2s ease 1.9s forwards}
.mem-open .years b{font-family:var(--font-display);font-size:clamp(1.2rem,3vw,1.8rem);color:#7BE0A8;letter-spacing:.12em}
.mem-open .years i{flex:0 0 90px;height:1px;background:linear-gradient(90deg,transparent,#7BE0A8,transparent)}
.mem-scroll{position:absolute;bottom:2rem;left:50%;transform:translateX(-50%);z-index:2;color:#B9AF9C;
  font-family:var(--font-display);font-size:.7rem;letter-spacing:.3em;text-transform:uppercase;
  opacity:0;animation:memfade 1s ease 2.4s forwards}
html[lang="ar"] .mem-scroll{letter-spacing:.05em;font-family:var(--font-ar-display)}
.mem-scroll::after{content:"";display:block;width:1px;height:44px;margin:.6rem auto 0;
  background:linear-gradient(180deg,#7BE0A8,transparent);animation:memdrop 1.6s ease infinite}
@keyframes memdrop{0%{transform:scaleY(0);transform-origin:top}55%{transform:scaleY(1)}100%{transform:scaleY(0);transform-origin:bottom}}
@keyframes memfade{to{opacity:1}}
/* ---------- interlude de chapitre ---------- */
.mem-chap{height:135vh;position:relative}
.mem-chap .pin{position:sticky;top:0;height:100vh;display:flex;align-items:center;overflow:hidden;
  background:radial-gradient(80% 70% at 30% 60%,rgba(18,161,80,.1),transparent 60%),#0D0B09}
.mem-chap .in{padding:0 clamp(20px,8vw,110px);max-width:900px}
.mem-chap .no{font-family:var(--font-display);font-size:clamp(4.5rem,15vw,10rem);color:transparent;line-height:1;
  -webkit-text-stroke:1px rgba(239,231,216,.22);font-weight:700;
  opacity:0;transform:translateX(-40px);transition:1s ease .1s}
html[dir="rtl"] .mem-chap .no{transform:translateX(40px)}
.mem-chap .pin.act .no{opacity:1;transform:none}
.mem-chap h2{color:#F5EEDF;font-size:clamp(1.5rem,4.2vw,2.6rem);margin:.2em 0 .4em;
  opacity:0;transform:translateY(26px);transition:.9s ease .3s}
.mem-chap .pin.act h2{opacity:1;transform:none}
.mem-chap h2::after{content:"";display:block;width:0;height:3px;background:var(--club-green);margin-top:.4em;transition:1s ease .8s}
.mem-chap .pin.act h2::after{width:76px}
.mem-chap p{color:#B9AF9C;font-size:clamp(.95rem,1.7vw,1.1rem);line-height:1.85;max-width:44em;
  opacity:0;transform:translateY(22px);transition:.9s ease .55s;font-family:var(--font-serif);font-style:italic}
html[dir="rtl"] .mem-chap p{font-family:var(--font-ar-body);font-style:normal}
.mem-chap .pin.act p{opacity:1;transform:none}
/* ---------- scenes ---------- */
.mem-scene{height:168vh;position:relative}
.mem-scene .pin{position:sticky;top:0;height:100vh;overflow:hidden;background:#0D0B09}
.mem-scene .ph{position:absolute;inset:0;display:flex;align-items:center;justify-content:center}
.mem-scene img{width:100%;height:100%;object-fit:cover;object-position:center 30%;
  filter:sepia(.22) brightness(.9);transform:scale(1.03)}
.mem-scene .pin.act img{animation:var(--kb,memkb0) 15s ease-in-out forwards}
@keyframes memkb0{to{transform:scale(1.16)}}
@keyframes memkb1{from{transform:scale(1.16) translateX(2%)}to{transform:scale(1.05) translateX(-1.5%)}}
@keyframes memkb2{from{transform:scale(1.05) translateX(-2%)}to{transform:scale(1.17) translateX(1.5%)}}
.mem-scene.doc img{object-fit:contain;background:#141210;padding:4vh}
.mem-scene .pin::after{content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(13,11,9,.42) 0%,transparent 30%,transparent 55%,rgba(13,11,9,.88) 100%)}
.mem-card{position:absolute;z-index:3;bottom:clamp(4.2rem,9vh,6rem);inset-inline-start:clamp(16px,5vw,64px);
  max-width:min(560px,88vw);background:rgba(16,13,10,.72);border:1px solid rgba(239,231,216,.14);
  backdrop-filter:blur(10px);border-radius:8px;padding:1.1rem 1.3rem;
  opacity:0;transform:translateY(36px);transition:opacity .8s ease .15s,transform .8s cubic-bezier(.22,.8,.3,1) .15s}
.mem-scene .pin.act .mem-card{opacity:1;transform:none}
.mem-card .k{font-family:var(--font-display);font-size:.62rem;letter-spacing:.26em;color:#7BE0A8;
  text-transform:uppercase;margin:0 0 .35rem}
html[lang="ar"] .mem-card .k{letter-spacing:.02em;font-family:var(--font-ar-display);font-size:.75rem}
.mem-card h3{color:#F5EEDF;font-size:clamp(1.05rem,2.4vw,1.45rem);margin:0 0 .4em;line-height:1.2}
.mem-card p{color:#CBC1AC;font-size:.92rem;line-height:1.65;margin:0 0 .7em;font-family:var(--font-serif)}
html[dir="rtl"] .mem-card p{font-family:var(--font-ar-body)}
.mem-tags{display:flex;flex-wrap:wrap;gap:.4rem}
.mem-tag{font-size:.64rem;letter-spacing:.12em;text-transform:uppercase;font-family:var(--font-display);
  color:#EFE7D8;border:1px solid rgba(239,231,216,.25);border-radius:999px;padding:.22em .8em;background:rgba(13,11,9,.4)}
html[lang="ar"] .mem-tag{letter-spacing:0;font-family:var(--font-ar-display);font-size:.75rem}
.mem-tag.ep{border-color:rgba(18,161,80,.6);color:#7BE0A8}
/* ---------- generique de fin ---------- */
.mem-credits{min-height:100vh;display:flex;align-items:center;justify-content:center;text-align:center;padding:4rem 1.4rem}
.mem-credits .in{max-width:640px}
.mem-credits h2{color:#F5EEDF;font-size:clamp(1.5rem,4vw,2.4rem)}
.mem-credits p{color:#B9AF9C;line-height:1.9;font-size:.95rem}
.mem-credits a{color:#7BE0A8}
.mem-credits .fin{font-family:var(--font-display);letter-spacing:.5em;color:#7BE0A8;font-size:.85rem;
  text-transform:uppercase;margin-top:2.2rem;display:block}
html[lang="ar"] .mem-credits .fin{letter-spacing:.08em;font-family:var(--font-ar-display)}
@media(max-width:700px){
  .mem-card{inset-inline:12px;bottom:3.6rem;max-width:none}
  .mem-scene{height:158vh}
}
@media(prefers-reduced-motion:reduce){
  .mem-open .bg,.mem-scroll::after{animation:none !important}
  .mem-scene .pin.act img{animation:none !important}
  .mem-chap .no,.mem-chap h2,.mem-chap p,.mem-card{opacity:1 !important;transform:none !important;transition:none}
}