/* ============================================================
   EXPÉRIENCE PARANORMAL — Thème commun « Archives »
   Palette : noir chaud · os · ambre chandelle. Grain argentique.
   Type : Fraunces (titres) · Hanken Grotesk (texte) · IBM Plex Mono (étiquettes)
   Feuille partagée par toutes les pages intérieures.
   ============================================================ */

:root{
  --ink:        #0b0a09;
  --ink-2:      #100e0c;
  --ink-3:      #16130f;
  --ink-4:      #1e1812;
  --bone:       #ece4d4;
  --bone-dim:   #a89e8b;
  --ash:        #756b5a;
  --ember:      #d18a4e;
  --ember-2:    #e6a868;
  --ember-deep: #8a4d27;
  --line:       rgba(236,228,212,.12);
  --line-2:     rgba(236,228,212,.22);
  --glass:      rgba(16,14,12,.72);
  --danger:     #cf5b4f;
  --ok:         #79b58f;

  --r-enqueteur:#c46a55;
  --r-cheffe:#cf5b4f;
  --r-respadmin:#9b7bc0;
  --r-admin:#79b58f;
  --r-respmodo:#6d97c4;
  --r-modo:#c9b766;

  --maxw: 1280px;
  --gutter: clamp(20px, 5vw, 64px);
}

*{ box-sizing:border-box; }
html{ scroll-behavior:smooth; -webkit-text-size-adjust:100%; }
body{
  margin:0;
  background:var(--ink);
  color:var(--bone);
  font-family:'Hanken Grotesk', system-ui, sans-serif;
  font-size:clamp(15px,1.02vw,17px);
  line-height:1.72;
  font-weight:400;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
::selection{ background:var(--ember); color:#1a1109; }
img{ max-width:100%; display:block; }
a{ color:inherit; }

/* ---------- Atmosphère (couches fixes) ---------- */
.atmos{
  position:fixed; inset:0; z-index:0; pointer-events:none;
  background:
    radial-gradient(120% 90% at 18% -10%, rgba(209,138,78,.16), transparent 46%),
    radial-gradient(90% 70% at 88% 8%, rgba(120,80,45,.10), transparent 50%),
    radial-gradient(140% 120% at 50% 120%, rgba(0,0,0,.65), transparent 60%),
    linear-gradient(180deg, #0d0b09 0%, #0b0a09 40%, #080706 100%);
}
.vignette{ position:fixed; inset:0; z-index:1; pointer-events:none; box-shadow: inset 0 0 240px 60px rgba(0,0,0,.8); }
.grain{
  position:fixed; inset:-50%; z-index:2; pointer-events:none;
  opacity:.06; mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size:180px 180px; animation:grain 5s steps(5) infinite;
}
@keyframes grain{
  0%{transform:translate(0,0)} 20%{transform:translate(-4%,2%)}
  40%{transform:translate(3%,-3%)} 60%{transform:translate(-2%,3%)}
  80%{transform:translate(4%,-1%)} 100%{transform:translate(0,0)}
}
.embers{ position:fixed; inset:0; z-index:1; pointer-events:none; overflow:hidden; }
.ember-mote{
  position:absolute; bottom:-10px; width:3px; height:3px; border-radius:50%;
  background:var(--ember-2); box-shadow:0 0 8px 1px rgba(230,168,104,.6);
  opacity:0; animation:rise linear infinite;
}
@keyframes rise{
  0%{ transform:translateY(0) translateX(0); opacity:0 }
  12%{ opacity:.8 } 88%{ opacity:.5 }
  100%{ transform:translateY(-104vh) translateX(40px); opacity:0 }
}

/* ---------- Mise en page ---------- */
.page{ position:relative; z-index:3; padding-top:clamp(90px,12vh,124px); padding-bottom:clamp(60px,9vh,110px); min-height:72vh; }
.wrap{ max-width:var(--maxw); margin:0 auto; padding-inline:var(--gutter); }
.narrow{ max-width:920px; }
.kicker{
  font-family:'IBM Plex Mono', monospace;
  font-size:.72rem; letter-spacing:.26em; text-transform:uppercase;
  color:var(--ember); display:inline-flex; align-items:center; gap:.7em;
}
.kicker::before{ content:""; width:26px; height:1px; background:var(--ember); opacity:.7; display:inline-block; }
.kicker.dim{ color:var(--ash); } .kicker.dim::before{ background:var(--ash); }
.serif{ font-family:'Fraunces', Georgia, serif; }
.lede{ color:var(--bone-dim); font-size:clamp(1.05rem,1.5vw,1.22rem); max-width:64ch; }

h1,h2,h3{ font-family:'Fraunces', Georgia, serif; font-weight:500; line-height:1.04; letter-spacing:-.01em; margin:0; }
h1.page-title{ font-size:clamp(2.4rem,5.4vw,4.2rem); }
h1.page-title em, h2 em{ font-style:italic; color:var(--ember-2); }
h2.section-title{ font-size:clamp(1.9rem,4vw,3rem); }
p{ margin:0 0 1.1em; }

/* En-tête de page intérieure */
.page-head{ padding-bottom:clamp(28px,5vw,52px); margin-bottom:clamp(28px,5vw,52px); border-bottom:1px solid var(--line); }
.page-head .kicker{ margin-bottom:22px; }
.page-head .lede{ margin-top:22px; }

/* En-tête de section : numéro + filet + intitulé */
.sec-head{
  display:grid; grid-template-columns:auto 1fr; gap:clamp(20px,4vw,56px);
  align-items:end; padding-block:1.2rem 2.2rem; border-top:1px solid var(--line);
}
.sec-num{ font-family:'IBM Plex Mono', monospace; font-size:.8rem; letter-spacing:.2em; color:var(--ash); padding-top:.55rem; white-space:nowrap; }
.sec-head .sub{ color:var(--bone-dim); margin:.9rem 0 0; max-width:54ch; }
section.block{ padding-block:clamp(3.5rem,8vh,6.5rem); }

/* ---------- Boutons ---------- */
.btn{
  --bg:var(--ember); --fg:#1b1208;
  display:inline-flex; align-items:center; justify-content:center; gap:.6em;
  font-family:'Hanken Grotesk',sans-serif; font-weight:600; font-size:.98rem;
  letter-spacing:.01em; text-decoration:none; cursor:pointer;
  padding:.85em 1.5em; border-radius:3px; border:1px solid transparent;
  background:var(--bg); color:var(--fg);
  transition:transform .25s cubic-bezier(.2,.7,.2,1), background .25s, color .25s, border-color .25s;
}
.btn .arw{ transition:transform .25s; }
.btn:hover{ transform:translateY(-2px); }
.btn:hover .arw{ transform:translateX(4px); }
.btn.ghost{ background:transparent; color:var(--bone); border-color:var(--line-2); }
.btn.ghost:hover{ border-color:var(--ember); color:var(--ember-2); }
.btn.full{ width:100%; }
.btn-sm{ padding:.6em 1.05em; font-size:.86rem; }
.btn:disabled{ opacity:.5; cursor:not-allowed; transform:none; }

/* ============================================================
   HEADER
   ============================================================ */
.site-header{
  position:fixed; top:0; left:0; width:100%; z-index:60;
  background:linear-gradient(180deg, rgba(8,7,6,.92), rgba(8,7,6,.55) 70%, transparent);
  backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px);
  border-bottom:1px solid transparent;
  transition:background .35s, border-color .35s, padding .35s;
}
.site-header.scrolled{ background:rgba(9,8,7,.9); border-bottom:1px solid var(--line); }
.header-inner{
  max-width:var(--maxw); margin:0 auto; padding:20px var(--gutter);
  display:grid; grid-template-columns:auto 1fr auto; align-items:center; gap:24px;
  transition:padding .35s;
}
.scrolled .header-inner{ padding-block:13px; }
.logo{
  font-family:'Fraunces', serif; font-weight:500; font-style:italic;
  font-size:1.42rem; letter-spacing:-.01em; color:var(--bone);
  text-decoration:none; white-space:nowrap; line-height:1; cursor:pointer;
  display:inline-flex; align-items:baseline; gap:.5ch;
}
.logo b{ font-style:normal; font-weight:600; }
.logo .dot{ width:6px; height:6px; border-radius:50%; background:var(--ember); display:inline-block; box-shadow:0 0 10px var(--ember); transform:translateY(-2px); }

.main-nav{ justify-self:center; }
.main-nav ul{ list-style:none; margin:0; padding:0; display:flex; align-items:center; gap:30px; }
.main-nav a{
  position:relative; text-decoration:none; color:var(--bone-dim);
  font-size:.83rem; font-weight:600; letter-spacing:.04em; padding:6px 0; transition:color .25s;
}
.main-nav a::after{ content:""; position:absolute; left:0; bottom:-2px; width:0; height:1px; background:var(--ember); transition:width .3s cubic-bezier(.2,.7,.2,1); }
.main-nav a:hover{ color:var(--bone); } .main-nav a:hover::after{ width:100%; }
.main-nav a.active{ color:var(--bone); } .main-nav a.active::after{ width:100%; }

.auth-area{ justify-self:end; display:flex; align-items:center; gap:18px; white-space:nowrap; font-size:.84rem; color:var(--bone-dim); }
.auth-area a{ text-decoration:none; color:var(--bone-dim); font-weight:600; transition:color .25s; }
.auth-area a:hover{ color:var(--ember-2); }
.auth-area .user-link{ color:var(--bone); }
.auth-area strong{ color:var(--bone); font-weight:600; }
.btn-register, a.btn-register{ background:var(--ember); color:#1b1208 !important; padding:.55em 1.05em; border-radius:3px; transition:transform .2s, background .2s; }
.btn-register:hover{ transform:translateY(-1px); color:#1b1208 !important; }

.nav-toggle{ display:none; background:none; border:none; cursor:pointer; padding:8px; justify-self:end; }
.nav-toggle span{ display:block; width:24px; height:1.5px; background:var(--bone); border-radius:2px; margin:5px 0; transition:transform .3s, opacity .3s; }

@media (max-width:980px){
  .header-inner{ grid-template-columns:auto auto; }
  .main-nav{
    position:fixed; inset:0 0 auto 0; top:0; padding-top:84px;
    background:rgba(8,7,6,.98); backdrop-filter:blur(14px);
    border-bottom:1px solid var(--line);
    transform:translateY(-100%); transition:transform .4s cubic-bezier(.2,.7,.2,1); justify-self:stretch;
  }
  .main-nav ul{ flex-direction:column; align-items:flex-start; gap:4px; padding:18px var(--gutter) 30px; }
  .main-nav a{ font-size:1.05rem; padding:12px 0; width:100%; }
  .site-header.nav-open .main-nav{ transform:translateY(0); }
  .site-header.nav-open .nav-toggle span:nth-child(1){ transform:translateY(6.5px) rotate(45deg); }
  .site-header.nav-open .nav-toggle span:nth-child(2){ opacity:0; }
  .site-header.nav-open .nav-toggle span:nth-child(3){ transform:translateY(-6.5px) rotate(-45deg); }
  .nav-toggle{ display:block; order:3; }
  .auth-area{ display:none; }
}

/* ============================================================
   COMPOSANTS — panneaux, formulaires, tableaux
   ============================================================ */
.reveal{ opacity:0; transform:translateY(22px); transition:opacity .9s cubic-bezier(.2,.7,.2,1), transform .9s cubic-bezier(.2,.7,.2,1); }
.reveal.in{ opacity:1; transform:none; }
.reveal[data-d="1"]{ transition-delay:.08s } .reveal[data-d="2"]{ transition-delay:.16s }
.reveal[data-d="3"]{ transition-delay:.24s } .reveal[data-d="4"]{ transition-delay:.32s }

/* Panneau générique */
.panel{ background:var(--ink-2); border:1px solid var(--line); border-radius:10px; padding:clamp(22px,3vw,40px); }
.panel + .panel{ margin-top:22px; }
.panel h2, .panel h3{ margin:0 0 14px; }

/* Grille de cartes générique */
.grid-cards{ display:grid; grid-template-columns:repeat(auto-fill,minmax(240px,1fr)); gap:18px; }
.card{
  position:relative; background:var(--ink-2); border:1px solid var(--line); border-radius:8px;
  padding:26px 24px; text-decoration:none; color:inherit; overflow:hidden;
  transition:transform .35s cubic-bezier(.2,.7,.2,1), border-color .35s, background .35s;
}
.card:hover{ transform:translateY(-6px); border-color:var(--line-2); background:var(--ink-3); }
.card .tag{ font-family:'IBM Plex Mono',monospace; font-size:.68rem; letter-spacing:.2em; color:var(--ember); text-transform:uppercase; }
.card h3{ font-size:1.4rem; font-weight:500; margin:14px 0 8px; }
.card p{ color:var(--bone-dim); font-size:.94rem; margin:0 0 20px; }
.card .go{ font-size:.84rem; font-weight:600; color:var(--bone); display:inline-flex; gap:.5em; border-top:1px solid var(--line); padding-top:16px; transition:color .3s, gap .3s; }
.card:hover .go{ color:var(--ember-2); gap:.9em; }

/* Carte d'authentification (login / register) */
.auth-wrap{ display:flex; justify-content:center; }
.auth-card{ width:min(440px,100%); background:var(--ink-2); border:1px solid var(--line); border-radius:12px; padding:clamp(26px,4vw,40px); }
.auth-card .kicker{ margin-bottom:16px; }
.auth-card h1{ font-family:'Fraunces',serif; font-weight:500; font-size:clamp(1.8rem,3.4vw,2.4rem); margin:0 0 6px; }
.auth-card .sub{ color:var(--bone-dim); margin:0 0 26px; font-size:.96rem; }
.auth-foot{ margin-top:22px; padding-top:18px; border-top:1px solid var(--line); font-size:.9rem; color:var(--bone-dim); text-align:center; }
.auth-foot a{ color:var(--ember-2); text-decoration:none; font-weight:600; }
.auth-foot a:hover{ text-decoration:underline; }

/* Formulaires */
.form-grid{ display:grid; gap:14px; }
.field{ display:grid; gap:7px; }
.field > label, .form-label{ font-family:'IBM Plex Mono',monospace; font-size:.7rem; letter-spacing:.14em; text-transform:uppercase; color:var(--ash); }
input[type=text], input[type=email], input[type=password], input[type=number], input[type=search], input[type=url], select, textarea, .input{
  width:100%; padding:.85em 1em; border-radius:6px; border:1px solid var(--line-2);
  background:var(--ink); color:var(--bone); font-family:'Hanken Grotesk',sans-serif; font-size:.96rem; line-height:1.5;
  transition:border-color .25s, box-shadow .25s;
}
textarea{ min-height:130px; resize:vertical; }
input:focus, select:focus, textarea:focus, .input:focus{ outline:none; border-color:var(--ember); box-shadow:0 0 0 3px rgba(209,138,78,.14); }
input::placeholder, textarea::placeholder{ color:var(--ash); }
select{ appearance:none; -webkit-appearance:none; background-image:linear-gradient(45deg,transparent 50%,var(--bone-dim) 50%),linear-gradient(135deg,var(--bone-dim) 50%,transparent 50%); background-position:calc(100% - 20px) 1.15em,calc(100% - 14px) 1.15em; background-size:6px 6px,6px 6px; background-repeat:no-repeat; padding-right:2.6em; }
.field-hint{ font-size:.82rem; color:var(--ash); }
.field-row{ display:flex; gap:14px; flex-wrap:wrap; align-items:center; }

/* Messages (flash) */
.alert{ border-radius:8px; padding:13px 16px; font-size:.92rem; margin:0 0 18px; border:1px solid var(--line-2); background:var(--ink-3); color:var(--bone-dim); }
.alert.error{ border-color:rgba(207,91,79,.5); background:rgba(207,91,79,.1); color:#f0c4bd; }
.alert.ok{ border-color:rgba(121,181,143,.5); background:rgba(121,181,143,.1); color:#c4e6d1; }

/* Tableaux */
.table-wrap{ overflow-x:auto; border:1px solid var(--line); border-radius:10px; background:var(--ink-2); }
table.table{ width:100%; border-collapse:collapse; font-size:.94rem; min-width:480px; }
table.table th, table.table td{ padding:14px 18px; text-align:left; border-bottom:1px solid var(--line); }
table.table thead th{ font-family:'IBM Plex Mono',monospace; font-size:.66rem; letter-spacing:.16em; text-transform:uppercase; color:var(--ember); font-weight:500; }
table.table tbody tr{ transition:background .2s; }
table.table tbody tr:hover{ background:var(--ink-3); }
table.table tbody tr:last-child td{ border-bottom:none; }
table.table td.rank{ font-family:'IBM Plex Mono',monospace; color:var(--ash); width:1%; white-space:nowrap; }

/* État vide */
.empty{ text-align:center; color:var(--ash); padding:clamp(30px,6vw,60px); font-style:italic; }

/* Étiquettes */
.pill{ display:inline-block; padding:3px 10px; border-radius:999px; font-family:'IBM Plex Mono',monospace; font-size:.62rem; letter-spacing:.12em; text-transform:uppercase; border:1px solid var(--line-2); color:var(--bone-dim); }
.pill.ember{ border-color:rgba(209,138,78,.5); color:var(--ember-2); }

/* Contenu long (histoires) */
.prose{ max-width:72ch; }
.prose h2{ font-size:clamp(1.6rem,3vw,2.3rem); margin:2em 0 .5em; }
.prose h3{ font-size:1.3rem; margin:1.6em 0 .4em; color:var(--bone); }
.prose p{ color:var(--bone-dim); }
.prose a{ color:var(--ember-2); }
.prose img{ border-radius:8px; border:1px solid var(--line); margin:1.4em 0; }
.prose blockquote{ margin:1.4em 0; padding-left:20px; border-left:2px solid var(--ember); color:var(--bone); font-family:'Fraunces',serif; font-style:italic; font-size:1.15rem; }

/* ---------- Cartes membres / staff / donateurs ---------- */
.staff-list, .donators{ display:grid; grid-template-columns:repeat(auto-fill,minmax(190px,1fr)); gap:18px; }
.staff-card, .donator-card{
  background:var(--ink-2); border:1px solid var(--line); border-radius:6px; padding:22px 18px; text-align:center;
  transition:transform .35s cubic-bezier(.2,.7,.2,1), border-color .35s, background .35s;
}
.staff-card:hover, .donator-card:hover{ transform:translateY(-5px); border-color:var(--line-2); background:var(--ink-3); }
.staff-card img, .donator-card img{
  width:96px; height:96px; border-radius:50%; object-fit:cover; margin:0 auto 14px; border:1px solid var(--line-2);
  filter:grayscale(.55) sepia(.18) contrast(1.03) brightness(.96); transition:filter .4s;
}
.staff-card:hover img, .donator-card:hover img{ filter:grayscale(0) sepia(0) contrast(1) brightness(1); }
.staff-name, .donator-card h4{ font-family:'Fraunces',serif; font-weight:500; font-size:1.12rem; color:var(--bone); margin:0; }
.staff-role, .donator-card p{ font-family:'IBM Plex Mono',monospace; font-size:.68rem; letter-spacing:.14em; text-transform:uppercase; color:var(--bone-dim); margin:6px 0 0; }

.staff-card{ border-top-width:1px; }
.role-enqueteur{ border-top:2px solid var(--r-enqueteur); } .role-enqueteur .staff-role{ color:var(--r-enqueteur); }
.role-cheffe-admin{ border-top:2px solid var(--r-cheffe); } .role-cheffe-admin .staff-role{ color:var(--r-cheffe); }
.role-resp-admin{ border-top:2px solid var(--r-respadmin); } .role-resp-admin .staff-role{ color:var(--r-respadmin); }
.role-admin{ border-top:2px solid var(--r-admin); } .role-admin .staff-role{ color:var(--r-admin); }
.role-resp-modo{ border-top:2px solid var(--r-respmodo); } .role-resp-modo .staff-role{ color:var(--r-respmodo); }
.role-modo{ border-top:2px solid var(--r-modo); } .role-modo .staff-role{ color:var(--r-modo); }
.card-vip{ border-top:2px solid var(--r-modo); } .card-vip .staff-role{ color:var(--r-modo); }
.card-fan{ border-top:2px solid var(--ember); } .card-fan .staff-role{ color:var(--ember-2); }
.card-donor{ border-top:2px solid var(--r-admin); } .card-donor p{ color:var(--r-admin); }

/* ---------- Adhésion (VIP / VIP+) ---------- */
.tiers{ display:grid; grid-template-columns:1fr 1fr; gap:22px; align-items:stretch; }
.tier{ position:relative; background:var(--ink-2); border:1px solid var(--line); border-radius:8px; padding:clamp(28px,3vw,42px); display:flex; flex-direction:column; }
.tier.plus{ background:linear-gradient(180deg, rgba(30,24,18,.9), rgba(16,14,12,.95)); border-color:rgba(209,138,78,.35); }
.tier .price{ font-family:'Fraunces',serif; font-weight:500; font-size:clamp(2.4rem,4vw,3.2rem); line-height:1; margin:6px 0 2px; color:var(--bone); }
.tier .once{ font-size:.86rem; color:var(--ash); margin:0 0 22px; }
.tier h3{ font-size:1.05rem; font-family:'Hanken Grotesk',sans-serif; font-weight:600; color:var(--bone); margin:0 0 12px; padding-top:18px; border-top:1px solid var(--line); }
.tier ul{ list-style:none; margin:0 0 26px; padding:0; display:grid; gap:9px; }
.tier li{ position:relative; padding-left:22px; color:var(--bone-dim); font-size:.93rem; line-height:1.5; }
.tier li::before{ content:""; position:absolute; left:0; top:.62em; width:10px; height:1px; background:var(--ember); }
.tier li strong{ color:var(--bone); font-weight:600; }
.tier .foot{ margin-top:auto; }
.tier .note{ font-size:.82rem; color:var(--ash); margin:12px 0 0; }
.tier .badge-owned{ display:inline-block; padding:.6em 1.1em; border-radius:3px; font-weight:600; font-size:.9rem; border:1px solid var(--r-admin); color:#bfe6cf; background:rgba(121,181,143,.1); }
@media (max-width:760px){ .tiers{ grid-template-columns:1fr; } }

/* ---------- Soutien / Dons ---------- */
.support{ background:var(--ink-2); border:1px solid var(--line); border-radius:10px; padding:clamp(26px,3.4vw,46px); }
.support .stat-row{ display:flex; flex-wrap:wrap; gap:28px 56px; margin-bottom:26px; }
.support .stat .v{ font-family:'Fraunces',serif; font-size:1.7rem; color:var(--bone); line-height:1; }
.support .stat .v strong{ color:var(--ember-2); font-weight:500; }
.support .stat .k{ font-family:'IBM Plex Mono',monospace; font-size:.66rem; letter-spacing:.16em; text-transform:uppercase; color:var(--ash); margin-top:6px; }
.meter{ height:6px; background:rgba(236,228,212,.08); border-radius:999px; overflow:hidden; }
.meter > i{ display:block; height:100%; width:0; background:linear-gradient(90deg,var(--ember-deep),var(--ember-2)); transition:width .8s cubic-bezier(.2,.7,.2,1); }
.support .pct{ font-family:'IBM Plex Mono',monospace; font-size:.74rem; color:var(--bone-dim); margin-top:10px; }

/* ---------- Footer ---------- */
.site-footer{ position:relative; z-index:3; border-top:1px solid var(--line); margin-top:40px; background:linear-gradient(180deg, transparent, rgba(0,0,0,.5)); }
.footer-cta{ text-align:center; padding-block:clamp(46px,7vw,78px); }
.footer-cta h2{ font-family:'Fraunces',serif; font-weight:500; font-size:clamp(1.6rem,3vw,2.4rem); color:var(--bone); margin:0 0 26px; }
.footer-links{ display:flex; gap:30px; justify-content:center; flex-wrap:wrap; }
.footer-links a{ text-decoration:none; color:var(--bone-dim); font-weight:600; letter-spacing:.04em; transition:color .25s; }
.footer-links a:hover{ color:var(--ember-2); }
.footer-bottom{ display:flex; flex-wrap:wrap; justify-content:center; gap:14px; padding-block:22px; border-top:1px solid var(--line); font-family:'IBM Plex Mono',monospace; font-size:.7rem; letter-spacing:.06em; color:var(--ash); }

/* ---------- Cookie ---------- */
#cookie-consent{
  position:fixed; bottom:18px; left:50%; transform:translateX(-50%); z-index:80;
  width:min(680px,calc(100% - 32px));
  background:rgba(14,12,10,.96); backdrop-filter:blur(12px);
  border:1px solid var(--line-2); border-radius:10px; padding:16px 18px;
  display:flex; align-items:center; gap:16px; flex-wrap:wrap; justify-content:space-between;
  box-shadow:0 20px 60px rgba(0,0,0,.6);
}
#cookie-consent p{ margin:0; font-size:.86rem; color:var(--bone-dim); flex:1 1 280px; }
#cookie-consent a{ color:var(--ember-2); }
#cookie-consent button{ background:var(--ember); color:#1b1208; border:none; padding:.7em 1.3em; border-radius:4px; font-weight:600; cursor:pointer; font-family:'Hanken Grotesk',sans-serif; }

@media (prefers-reduced-motion: reduce){
  *{ animation-duration:.001ms !important; animation-iteration-count:1 !important; }
  .grain, .embers{ display:none; }
  .reveal{ opacity:1 !important; transform:none !important; }
}

/* ---------- Utilitaires additionnels ---------- */
.sr-only{ position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }
.checks{ list-style:none; margin:0; padding:0; display:grid; gap:11px; }
.checks li{ position:relative; padding-left:26px; color:var(--bone-dim); }
.checks li::before{ content:""; position:absolute; left:0; top:.62em; width:12px; height:1px; background:var(--ember); }
.linklist{ display:grid; gap:10px; }
.linklist a{ display:flex; align-items:center; gap:10px; text-decoration:none; color:var(--bone); padding:13px 16px; border-radius:8px; border:1px solid var(--line); background:var(--ink); transition:border-color .25s, background .25s, transform .2s; }
.linklist a::before{ content:"\2193"; color:var(--ember); font-family:'IBM Plex Mono',monospace; }
.linklist a:hover{ border-color:var(--ember); background:var(--ink-3); transform:translateX(3px); }
.subcard{ background:var(--ink); border:1px solid var(--line); border-radius:10px; padding:18px; }
.card-media{ height:184px; background:var(--ink-3); overflow:hidden; }
.card-media img{ width:100%; height:100%; object-fit:cover; filter:grayscale(.3) sepia(.1) contrast(1.02); transition:filter .4s, transform .6s; }
.card:hover .card-media img{ filter:none; transform:scale(1.04); }
.stack-lg{ display:grid; gap:22px; }