/* ============================================================
   SERENIA — feuille de style partagée
   Palette « givre + forge » : bleu diamant (présent) ↔ or (héritage)
   ============================================================ */

:root{
  --bg:        #0A1018;
  --bg-2:      #0E1726;
  --panel:     #131F30;
  --panel-2:   #1A2942;
  --line:      #243349;
  --line-soft: #1B2940;

  --frost:     #EAF2FA;
  --frost-dim: #A6B8CE;
  --muted:     #647890;

  --diamond:      #5BD6E8;
  --diamond-deep: #2A93AE;
  --gold:         #F2B83E;
  --gold-deep:    #C98A12;

  --danger: #E5533D;
  --good:   #6FCF6B;

  --maxw: 1160px;
  --gut: clamp(20px, 5vw, 56px);

  --f-display: "Chakra Petch", system-ui, sans-serif;
  --f-body: "Inter", system-ui, sans-serif;

  --bevel:
    inset 2px 2px 0 rgba(255,255,255,.06),
    inset -2px -2px 0 rgba(0,0,0,.45),
    4px 4px 0 rgba(0,0,0,.40);
  --bevel-press:
    inset 2px 2px 0 rgba(255,255,255,.04),
    inset -2px -2px 0 rgba(0,0,0,.5),
    2px 2px 0 rgba(0,0,0,.40);
}

*,*::before,*::after{ box-sizing:border-box; }

html{ scroll-behavior:smooth; }
@media (prefers-reduced-motion: reduce){ html{ scroll-behavior:auto; } }

body{
  margin:0;
  background:var(--bg);
  color:var(--frost);
  font-family:var(--f-body);
  font-size:17px;
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  overflow-x:hidden;
}

/* subtle block grid in the page background */
body::before{
  content:"";
  position:fixed; inset:0;
  background-image:
    linear-gradient(rgba(91,214,232,.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(91,214,232,.035) 1px, transparent 1px);
  background-size:46px 46px;
  mask-image:radial-gradient(120% 90% at 50% 0%, #000 0%, transparent 72%);
  pointer-events:none; z-index:0;
}

img{ max-width:100%; display:block; }
a{ color:inherit; }

.wrap{ width:100%; max-width:var(--maxw); margin-inline:auto; padding-inline:var(--gut); }

/* ---------- Type ---------- */
h1,h2,h3{ font-family:var(--f-display); font-weight:700; line-height:1.05; margin:0; }
.eyebrow{
  font-family:var(--f-display); font-weight:600;
  font-size:.78rem; letter-spacing:.34em; text-transform:uppercase;
  color:var(--diamond);
  display:inline-flex; align-items:center; gap:.7em;
}
.eyebrow::before{
  content:""; width:26px; height:2px; background:linear-gradient(90deg,var(--gold),var(--diamond));
}
.section-title{ font-size:clamp(1.9rem, 4vw, 3rem); letter-spacing:-.01em; }
.lead{ color:var(--frost-dim); font-size:1.12rem; max-width:62ch; }

.duo{ background:linear-gradient(100deg,var(--gold) 0%, var(--gold) 22%, var(--diamond) 78%, var(--diamond) 100%);
  -webkit-background-clip:text; background-clip:text; color:transparent; }

/* ---------- Brand mark (crossed swords + wordmark) ---------- */
.brand{ display:inline-flex; align-items:center; gap:.66rem; text-decoration:none; color:var(--frost); }
.brand img{ width:30px; height:30px; image-rendering:pixelated; }
.brand b{
  font-family:var(--f-display); font-weight:700; font-size:1.18rem;
  letter-spacing:.30em; padding-left:.30em;
}

/* ---------- Top bar ---------- */
.topbar{
  position:fixed; top:0; left:0; right:0; z-index:50;
  display:flex; align-items:center; justify-content:space-between; gap:1rem;
  padding:14px var(--gut);
  background:transparent;
  transition:background .3s ease, border-color .3s ease, backdrop-filter .3s ease;
  border-bottom:1px solid transparent;
}
.topbar.solid{
  background:rgba(8,13,21,.82);
  backdrop-filter:blur(12px);
  border-bottom:1px solid var(--line);
}
.navlinks{ display:flex; align-items:center; gap:clamp(8px,2vw,26px); }
.navlinks a{
  font-family:var(--f-display); font-weight:500; font-size:.86rem;
  letter-spacing:.12em; text-transform:uppercase; text-decoration:none;
  color:var(--frost-dim); padding:6px 2px; position:relative; white-space:nowrap;
  transition:color .2s ease;
}
.navlinks a:hover{ color:var(--frost); }
.navlinks a.active{ color:var(--frost); }
.navlinks a.active::after{
  content:""; position:absolute; left:0; right:0; bottom:-2px; height:2px;
  background:linear-gradient(90deg,var(--gold),var(--diamond));
}
.nav-right{ display:flex; align-items:center; gap:14px; }

.burger{ display:none; background:none; border:0; color:var(--frost); cursor:pointer; padding:6px; }

/* ---------- Buttons (voxel) ---------- */
.btn{
  --c1:var(--diamond); --c2:var(--diamond-deep);
  display:inline-flex; align-items:center; justify-content:center; gap:.55em;
  font-family:var(--f-display); font-weight:600; font-size:.9rem;
  letter-spacing:.06em; text-transform:uppercase; text-decoration:none;
  color:#06121a; cursor:pointer;
  padding:.72em 1.25em; border:0; border-radius:0;
  background:linear-gradient(180deg,var(--c1),var(--c2));
  box-shadow:var(--bevel);
  transition:transform .08s ease, box-shadow .08s ease, filter .15s ease;
}
.btn:hover{ filter:brightness(1.08); }
.btn:active{ transform:translate(2px,2px); box-shadow:var(--bevel-press); }
.btn.gold{ --c1:var(--gold); --c2:var(--gold-deep); }
.btn.ghost{
  --c1:transparent; --c2:transparent; color:var(--frost);
  background:var(--panel);
  box-shadow:var(--bevel);
}
.btn.ghost:hover{ background:var(--panel-2); filter:none; }
.btn.danger{ --c1:var(--danger); --c2:#a8331f; color:#fff; }
.btn.sm{ padding:.5em .85em; font-size:.78rem; }
.btn:focus-visible, a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible{
  outline:3px solid var(--diamond); outline-offset:2px;
}

/* ---------- Voxel panel ---------- */
.voxel{
  background:var(--panel);
  border:2px solid var(--line);
  box-shadow:var(--bevel);
  border-radius:0;
}

/* ---------- Footer ---------- */
.foot{
  border-top:1px solid var(--line);
  margin-top:96px; padding:42px 0 60px; position:relative; z-index:1;
  color:var(--muted);
}
.foot .wrap{ display:flex; flex-wrap:wrap; gap:18px 40px; align-items:center; justify-content:space-between; }
.foot-links{ display:flex; flex-wrap:wrap; gap:18px; }
.foot-links a{ color:var(--frost-dim); text-decoration:none; font-family:var(--f-display); font-size:.82rem; letter-spacing:.1em; text-transform:uppercase; }
.foot-links a:hover{ color:var(--diamond); }
.foot small{ font-size:.8rem; }

/* ============================================================
   HOME — hero
   ============================================================ */
.hero{
  position:relative; min-height:100svh; display:grid; place-items:center;
  text-align:center; overflow:hidden; z-index:1;
}
.hero-bg{
  position:absolute; inset:0; z-index:-2;
  background-size:cover; background-position:center 38%;
  transform:scale(1.04);
}
.hero-bg::after{ /* duotone toward blue + darken */
  content:""; position:absolute; inset:0;
  background:
    radial-gradient(120% 80% at 50% 28%, rgba(10,16,24,.15), rgba(8,12,20,.9) 78%),
    linear-gradient(180deg, rgba(8,14,24,.55), rgba(10,16,24,.4) 40%, var(--bg) 99%),
    linear-gradient(0deg, rgba(20,80,110,.18), rgba(20,80,110,.18));
  mix-blend-mode:normal;
}
#snow{ position:absolute; inset:0; z-index:-1; pointer-events:none; }

.hero-inner{ padding:120px var(--gut) 80px; position:relative; }
.hero-mark{ width:64px; height:64px; image-rendering:pixelated; margin:0 auto 26px; filter:drop-shadow(0 6px 16px rgba(0,0,0,.6)); }
.hero h1{
  font-size:clamp(3.6rem, 16vw, 12rem);
  letter-spacing:.06em; line-height:.92;
  text-shadow:0 8px 40px rgba(0,0,0,.55);
}
.hero .dates{
  margin-top:.4rem; font-family:var(--f-display); font-weight:600;
  font-size:clamp(1.1rem, 3.4vw, 1.9rem); letter-spacing:.5em; padding-left:.5em;
}
.hero .tag{ margin:26px auto 0; max-width:54ch; color:var(--frost-dim); font-size:1.06rem; }
.hero-cta{ margin-top:34px; display:flex; gap:14px; justify-content:center; flex-wrap:wrap; }
.scrollcue{
  position:absolute; bottom:26px; left:50%; transform:translateX(-50%);
  color:var(--frost-dim); font-family:var(--f-display); font-size:.72rem;
  letter-spacing:.3em; text-transform:uppercase; display:flex; flex-direction:column; align-items:center; gap:8px;
}
.scrollcue span{ width:1px; height:34px; background:linear-gradient(var(--diamond),transparent); animation:cue 1.8s ease-in-out infinite; }
@keyframes cue{ 0%,100%{opacity:.2; transform:scaleY(.6);} 50%{opacity:1; transform:scaleY(1);} }
@media (prefers-reduced-motion: reduce){ .scrollcue span{ animation:none; } }

/* ---------- Home: nav cards ---------- */
.home-section{ position:relative; z-index:1; padding:88px 0; }
.section-head{ display:flex; flex-direction:column; gap:14px; margin-bottom:40px; }
.cards3{ display:grid; gap:22px; grid-template-columns:repeat(3,1fr); }
.navcard{
  position:relative; display:flex; flex-direction:column; min-height:300px;
  padding:26px; text-decoration:none; color:var(--frost); overflow:hidden;
  transition:transform .14s ease, box-shadow .14s ease;
}
.navcard:hover{ transform:translate(-2px,-2px); box-shadow:inset 2px 2px 0 rgba(255,255,255,.07), inset -2px -2px 0 rgba(0,0,0,.45), 8px 8px 0 rgba(0,0,0,.4); }
.navcard .nc-bg{ position:absolute; inset:0; z-index:0; background-size:cover; background-position:center; opacity:.16; transition:opacity .2s ease; }
.navcard:hover .nc-bg{ opacity:.26; }
.navcard .nc-num{ font-family:var(--f-display); font-weight:700; font-size:.8rem; letter-spacing:.3em; color:var(--gold); position:relative; z-index:1; }
.navcard h3{ font-size:1.7rem; margin-top:auto; position:relative; z-index:1; }
.navcard p{ color:var(--frost-dim); margin:.4rem 0 0; position:relative; z-index:1; font-size:.96rem; }
.navcard .nc-go{ margin-top:18px; font-family:var(--f-display); font-size:.8rem; letter-spacing:.16em; text-transform:uppercase; color:var(--diamond); position:relative; z-index:1; display:inline-flex; gap:.5em; }
.navcard:hover .nc-go{ gap:.9em; }

/* ---------- Home: stats / band ---------- */
.band{ position:relative; z-index:1; margin-top:30px; overflow:hidden; border-block:1px solid var(--line); }
.band-bg{ position:absolute; inset:0; background-size:cover; background-position:center; opacity:.22; }
.band-bg::after{ content:""; position:absolute; inset:0; background:linear-gradient(90deg,var(--bg) 2%, rgba(10,16,24,.5) 40%, rgba(10,16,24,.5) 60%, var(--bg) 98%); }
.band .wrap{ position:relative; padding:64px var(--gut); }
.stats{ display:grid; grid-template-columns:repeat(4,1fr); gap:20px; text-align:center; }
.stat b{ display:block; font-family:var(--f-display); font-weight:700; font-size:clamp(1.8rem,5vw,2.8rem); }
.stat span{ color:var(--frost-dim); font-size:.84rem; letter-spacing:.08em; }

/* ============================================================
   HISTOIRE — prose
   ============================================================ */
.page-hero{ position:relative; padding:160px 0 60px; overflow:hidden; z-index:1; }
.page-hero .ph-bg{ position:absolute; inset:0; z-index:-1; background-size:cover; background-position:center; opacity:.28; }
.page-hero .ph-bg::after{ content:""; position:absolute; inset:0; background:linear-gradient(180deg, rgba(10,16,24,.6), var(--bg) 92%); }
.page-hero h1{ font-size:clamp(2.4rem,7vw,4.4rem); letter-spacing:-.01em; }
.page-hero .sub{ color:var(--frost-dim); margin-top:14px; max-width:60ch; }

.prose{ max-width:74ch; margin:54px auto 0; position:relative; z-index:1; }
.prose p{ margin:0 0 1.5em; color:#D7E2EF; }
.prose p:first-of-type::first-letter{
  font-family:var(--f-display); font-weight:700; float:left;
  font-size:3.8em; line-height:.78; padding:.04em .12em 0 0; color:var(--diamond);
}
.prose strong{ color:var(--frost); font-weight:600; }
.prose .name{ color:var(--diamond); font-weight:600; white-space:nowrap; }
.prose .beat{
  text-align:center; font-family:var(--f-display); font-weight:600;
  font-size:1.3rem; color:var(--frost); letter-spacing:.01em;
  margin:2.4em auto; max-width:40ch; line-height:1.3;
}
.prose .beat::before, .prose .beat::after{ content:"◇"; color:var(--gold); opacity:.6; padding:0 .6em; font-size:.7em; vertical-align:middle; }

/* ============================================================
   PROJETS — frise chronologique
   ============================================================ */
.frise{ position:relative; max-width:880px; margin:60px auto 0; padding-left:14px; z-index:1; }
.frise::before{
  content:""; position:absolute; left:22px; top:6px; bottom:6px; width:3px;
  background:linear-gradient(var(--gold), var(--diamond));
}
.fnode{ position:relative; padding:0 0 38px 60px; }
.fnode::before{
  content:""; position:absolute; left:14px; top:6px; width:19px; height:19px;
  background:var(--diamond); border:3px solid var(--bg);
  box-shadow:0 0 0 2px var(--diamond);
  transform:rotate(45deg);
}
.fnode.is-gold::before{ background:var(--gold); box-shadow:0 0 0 2px var(--gold); }
.fnode.is-soon::before{ background:var(--panel); box-shadow:0 0 0 2px var(--muted); }
.fdate{ font-family:var(--f-display); font-weight:600; font-size:.8rem; letter-spacing:.18em; text-transform:uppercase; color:var(--gold); }
.fnode.is-soon .fdate{ color:var(--muted); }
.fcard{ margin-top:10px; padding:20px 22px; display:flex; align-items:center; justify-content:space-between; gap:18px; flex-wrap:wrap; }
.fcard h3{ font-size:1.25rem; }
.fcard .ftag{ display:block; color:var(--frost-dim); font-size:.9rem; margin-top:3px; }
.fnode.is-soon .fcard{ opacity:.72; }

/* ============================================================
   GALERIE hub
   ============================================================ */
.gal-hub{ position:relative; z-index:1; padding-top:150px; }
.gcards{ display:grid; grid-template-columns:repeat(2,1fr); gap:24px; margin-top:44px; }
.gcard{
  position:relative; min-height:340px; display:flex; flex-direction:column; justify-content:flex-end;
  padding:30px; text-decoration:none; color:var(--frost); overflow:hidden;
  transition:transform .15s ease, box-shadow .15s ease;
}
.gcard:hover{ transform:translate(-2px,-2px); box-shadow:inset 2px 2px 0 rgba(255,255,255,.07), inset -2px -2px 0 rgba(0,0,0,.45), 8px 8px 0 rgba(0,0,0,.4); }
.gcard .g-bg{ position:absolute; inset:0; background-size:cover; background-position:center; opacity:.3; transition:opacity .2s, transform .4s; }
.gcard:hover .g-bg{ opacity:.45; transform:scale(1.05); }
.gcard .g-bg::after{ content:""; position:absolute; inset:0; background:linear-gradient(180deg, rgba(10,16,24,.2), rgba(10,16,24,.92)); }
.gcard .eyebrow{ position:relative; z-index:1; }
.gcard h3{ position:relative; z-index:1; font-size:2rem; margin-top:10px; }
.gcard p{ position:relative; z-index:1; color:var(--frost-dim); margin:.4rem 0 0; }

/* ============================================================
   GALERIE — vidéos & screenshots (commun)
   ============================================================ */
.gal-page{ position:relative; z-index:1; padding-top:140px; }
.catbar{ display:flex; flex-wrap:wrap; gap:10px; margin:34px 0 8px; }
.cat-pill{
  font-family:var(--f-display); font-weight:500; font-size:.82rem; letter-spacing:.08em;
  text-transform:uppercase; color:var(--frost-dim); cursor:pointer;
  padding:.5em 1em; background:var(--panel); border:2px solid var(--line);
  box-shadow:var(--bevel);
}
.cat-pill[aria-selected="true"]{ color:#06121a; background:linear-gradient(180deg,var(--diamond),var(--diamond-deep)); }

.cat-block{ margin-top:46px; }
.cat-head{ display:flex; align-items:baseline; gap:14px; margin-bottom:20px; border-bottom:1px solid var(--line); padding-bottom:12px; }
.cat-head h2{ font-size:1.5rem; }
.cat-head .count{ color:var(--muted); font-family:var(--f-display); font-size:.85rem; letter-spacing:.1em; }

.grid-v{ display:grid; gap:22px; grid-template-columns:repeat(auto-fill,minmax(300px,1fr)); }
.grid-s{ display:grid; gap:16px; grid-template-columns:repeat(auto-fill,minmax(260px,1fr)); }

/* video card */
.vcard{ overflow:hidden; display:flex; flex-direction:column; }
.vthumb{ position:relative; aspect-ratio:16/9; background:#000 center/cover no-repeat; cursor:pointer; }
.vthumb .play{
  position:absolute; inset:0; margin:auto; width:62px; height:62px; display:grid; place-items:center;
  background:linear-gradient(180deg,var(--diamond),var(--diamond-deep)); box-shadow:var(--bevel);
  transition:transform .12s ease;
}
.vthumb:hover .play{ transform:scale(1.06); }
.vthumb .play svg{ width:24px; height:24px; fill:#06121a; margin-left:3px; }
.vthumb iframe{ position:absolute; inset:0; width:100%; height:100%; border:0; }
.vmeta{ padding:14px 16px; display:flex; align-items:flex-start; justify-content:space-between; gap:10px; }
.vmeta a.vtitle{ font-family:var(--f-display); font-weight:600; font-size:1rem; text-decoration:none; color:var(--frost); line-height:1.3; }
.vmeta a.vtitle:hover{ color:var(--diamond); }

/* screenshot card */
.scard{ position:relative; overflow:hidden; cursor:zoom-in; }
.scard img{ width:100%; aspect-ratio:16/10; object-fit:cover; transition:transform .35s ease; }
.scard:hover img{ transform:scale(1.05); }
.scard .scap{ position:absolute; left:0; right:0; bottom:0; padding:24px 14px 12px; font-size:.86rem;
  background:linear-gradient(transparent, rgba(8,12,20,.9)); color:var(--frost); }
.scard .sdel, .vdel{ position:absolute; top:8px; right:8px; z-index:3; }

/* empty state */
.empty{ text-align:center; color:var(--muted); padding:40px 0; border:2px dashed var(--line); }

/* lightbox */
.lightbox{ position:fixed; inset:0; z-index:90; background:rgba(5,9,16,.92); display:none; place-items:center; padding:24px; }
.lightbox.open{ display:grid; }
.lightbox img{ max-width:92vw; max-height:88vh; box-shadow:0 20px 60px rgba(0,0,0,.6); }
.lightbox .lbx-close{ position:absolute; top:18px; right:22px; background:none; border:0; color:#fff; font-size:2rem; cursor:pointer; }

/* ============================================================
   ADMIN (forms / toolbar)
   ============================================================ */
.admin-only{ display:none; }
body.is-admin .admin-only{ display:revert; }

.admin-bar{
  position:relative; z-index:1; margin-top:30px; padding:14px 18px;
  display:flex; align-items:center; gap:12px; flex-wrap:wrap;
  background:rgba(242,184,62,.08); border:2px solid var(--gold); box-shadow:var(--bevel);
}
.admin-bar .tag{ font-family:var(--f-display); font-size:.8rem; letter-spacing:.14em; text-transform:uppercase; color:var(--gold); }

.addform{ display:grid; gap:12px; margin:14px 0 0; }
.addform .row{ display:grid; gap:12px; grid-template-columns:repeat(auto-fit,minmax(180px,1fr)); }
.field label{ display:block; font-family:var(--f-display); font-size:.74rem; letter-spacing:.14em; text-transform:uppercase; color:var(--frost-dim); margin-bottom:6px; }
.input, select.input, textarea.input{
  width:100%; padding:.7em .8em; background:var(--bg-2); color:var(--frost);
  border:2px solid var(--line); border-radius:0; font-family:var(--f-body); font-size:.95rem;
  box-shadow:var(--bevel-press);
}
textarea.input{ resize:vertical; min-height:60px; }

/* ============================================================
   MODAL (login)
   ============================================================ */
.modal{ position:fixed; inset:0; z-index:100; background:rgba(5,9,16,.8); display:none; place-items:center; padding:24px; backdrop-filter:blur(4px); }
.modal.open{ display:grid; }
.modal-card{ width:min(420px,100%); padding:30px; position:relative; }
.modal-card h3{ font-size:1.4rem; }
.modal-card .eyebrow{ margin-bottom:10px; }
.modal-card .mclose{ position:absolute; top:12px; right:14px; background:none; border:0; color:var(--frost-dim); font-size:1.5rem; cursor:pointer; }
.modal-card form{ margin-top:18px; display:grid; gap:14px; }
.modal-msg{ min-height:1.2em; font-size:.86rem; color:var(--danger); }
.modal-msg.ok{ color:var(--good); }

/* ============================================================
   Responsive
   ============================================================ */
@media (max-width:880px){
  .cards3{ grid-template-columns:1fr; }
  .stats{ grid-template-columns:repeat(2,1fr); gap:30px 20px; }
  .gcards{ grid-template-columns:1fr; }
  .navlinks{
    position:fixed; inset:64px 0 auto 0; flex-direction:column; align-items:stretch;
    gap:0; background:rgba(8,13,21,.97); border-bottom:1px solid var(--line);
    padding:8px var(--gut) 18px; transform:translateY(-130%); transition:transform .3s ease;
  }
  .navlinks.show{ transform:translateY(0); }
  .navlinks a{ padding:12px 2px; border-bottom:1px solid var(--line-soft); }
  .navlinks a.active::after{ display:none; }
  .burger{ display:block; }
  .foot .wrap{ flex-direction:column; align-items:flex-start; }
}
@media (max-width:520px){
  body{ font-size:16px; }
  .hero .dates{ letter-spacing:.32em; }
}