/* ═══════════════════ TOKENS ═══════════════════ */
:root{
  color-scheme: light dark;
  --f-display:"Palatino Linotype",Palatino,"Book Antiqua","URW Palladio L",Georgia,"Times New Roman",serif;
  --f-body:"Avenir Next",Avenir,"Segoe UI","Helvetica Neue",Helvetica,Arial,sans-serif;
  --f-util:ui-monospace,SFMono-Regular,"SF Mono",Menlo,Consolas,"Liberation Mono",monospace;

  /* LE GRIMOIRE — thème clair, papier vieilli */
  --ground:#EDE5D3; --ground-2:#E3D8BF;
  --surface:#F8F3E7; --surface-2:#FCFAF2;
  --line:rgba(122,92,36,.24); --line-strong:rgba(122,92,36,.48);
  --text:#1A150D; --dim:#6B6150;
  --gilt:#8A6318; --gilt-hi:#AD801F;
  --ember:#AE3A0B; --ember-hi:#CB4A0D;
  --astral:#2C5677; --astral-hi:#3A6C93;
  --shadow:0 18px 44px rgba(74,55,20,.13);
  --emblem-fx:drop-shadow(0 14px 28px rgba(74,55,20,.30));
  --halo:radial-gradient(circle at 50% 46%, rgba(174,58,11,.14), transparent 62%);
  --ember-ink:#AE3A0B;
  --vignette:linear-gradient(180deg, rgba(227,216,191,.9), transparent 30%);
  /* decors des deux mondes : voile clair, le texte est sombre */
  --card-scrim:rgba(248,243,231,.88); --card-scrim-0:rgba(248,243,231,0);
  --decor-p:.15; --decor-p-h:.28; --decor-a:.13; --decor-a-h:.24;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --ground:#0A0E16; --ground-2:#060910;
    --surface:#111826; --surface-2:#161F30;
    --line:rgba(200,154,60,.20); --line-strong:rgba(200,154,60,.46);
    --text:#E9E2D2; --dim:#9A9483;
    --gilt:#C89A3C; --gilt-hi:#EFCB7A;
    --ember:#E2571C; --ember-hi:#FF9048;
    --astral:#7FA8CC; --astral-hi:#A9CAE6;
    --shadow:0 26px 64px rgba(0,0,0,.58);
    --emblem-fx:drop-shadow(0 0 46px rgba(226,120,28,.30)) drop-shadow(0 18px 40px rgba(0,0,0,.6));
    --halo:radial-gradient(circle at 50% 46%, rgba(226,110,28,.20), transparent 62%);
    --ember-ink:#FF9048;
    --vignette:linear-gradient(180deg, rgba(6,9,16,.9), transparent 30%);
    --card-scrim:rgba(9,14,24,.72); --card-scrim-0:rgba(9,14,24,0);
    --decor-p:.26; --decor-p-h:.5; --decor-a:.24; --decor-a-h:.38;
  }
}
:root[data-theme="dark"]{
  --ground:#0A0E16; --ground-2:#060910;
  --surface:#111826; --surface-2:#161F30;
  --line:rgba(200,154,60,.20); --line-strong:rgba(200,154,60,.46);
  --text:#E9E2D2; --dim:#9A9483;
  --gilt:#C89A3C; --gilt-hi:#EFCB7A;
  --ember:#E2571C; --ember-hi:#FF9048;
  --astral:#7FA8CC; --astral-hi:#A9CAE6;
  --shadow:0 26px 64px rgba(0,0,0,.58);
  --emblem-fx:drop-shadow(0 0 46px rgba(226,120,28,.30)) drop-shadow(0 18px 40px rgba(0,0,0,.6));
  --halo:radial-gradient(circle at 50% 46%, rgba(226,110,28,.20), transparent 62%);
  --ember-ink:#FF9048;
  --vignette:linear-gradient(180deg, rgba(6,9,16,.9), transparent 30%);
  --card-scrim:rgba(9,14,24,.72); --card-scrim-0:rgba(9,14,24,0);
  --decor-p:.26; --decor-p-h:.5; --decor-a:.24; --decor-a-h:.38;
}

/* ═══════════════════ BASE ═══════════════════ */
*{box-sizing:border-box}
body{
  margin:0; background:var(--ground); color:var(--text);
  font-family:var(--f-body); font-size:16px; line-height:1.65;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%; display:block}
button{font:inherit; color:inherit; background:none; border:0; cursor:pointer}
a{color:inherit}
:focus-visible{outline:2px solid var(--gilt-hi); outline-offset:3px; border-radius:2px}

.wrap{width:min(1180px,92vw); margin-inline:auto}

h1,h2,h3,h4{font-family:var(--f-display); font-weight:700; text-wrap:balance; margin:0; line-height:1.14}
p{margin:0}

.eyebrow{
  font-family:var(--f-util); font-size:.6875rem; letter-spacing:.2em;
  text-transform:uppercase; color:var(--gilt); margin:0;
}
.lead{color:var(--dim); font-size:1.0625rem; max-width:62ch}
.num{font-family:var(--f-util); font-variant-numeric:tabular-nums}

/* ═══════════════════ RAIL / NAV ═══════════════════ */
.rail{
  position:sticky; top:0; z-index:60;
  background:color-mix(in srgb, var(--ground) 88%, transparent);
  backdrop-filter:blur(14px) saturate(1.2);
  border-bottom:1px solid var(--line);
}
.rail-inner{
  width:min(1180px,92vw); margin-inline:auto;
  display:flex; align-items:center; gap:1.25rem; height:68px;
}
.mark{display:flex; align-items:center; gap:.6rem; text-decoration:none; flex:none}
.mark-emblem{width:36px; height:auto; filter:var(--emblem-fx)}
.mark-text{
  font-family:var(--f-display); font-weight:700; font-size:.8125rem;
  letter-spacing:.16em; text-transform:uppercase;
  background:linear-gradient(180deg,var(--gilt-hi),var(--gilt));
  -webkit-background-clip:text; background-clip:text; color:transparent;
  white-space:nowrap;
}
.nav{
  display:flex; gap:.15rem; margin-left:auto; overflow-x:auto;
  scrollbar-width:none; -ms-overflow-style:none;
}
.nav::-webkit-scrollbar{display:none}
.nav-item{
  font-family:var(--f-util); font-size:.6875rem; letter-spacing:.15em;
  text-transform:uppercase; color:var(--dim);
  padding:.55rem .7rem; border-radius:3px; white-space:nowrap;
  position:relative; transition:color .2s;
}
.nav-item:hover{color:var(--text)}
.nav-item.is-active{color:var(--gilt-hi)}
.nav-item.is-active::after{
  content:""; position:absolute; left:.7rem; right:.7rem; bottom:.15rem; height:1px;
  background:linear-gradient(90deg,transparent,var(--gilt),transparent);
}
.tools{display:flex; gap:.35rem; flex:none; margin-left:.5rem}
.tool{
  width:36px; height:36px; display:grid; place-items:center; border-radius:50%;
  border:1px solid var(--line); color:var(--dim); position:relative;
  transition:border-color .2s,color .2s;
}
.tool:hover{border-color:var(--line-strong); color:var(--gilt-hi)}
.tool svg{width:16px; height:16px}
.cart-count{
  position:absolute; top:-3px; right:-3px; min-width:17px; height:17px; padding:0 4px;
  border-radius:9px; background:var(--ember); color:#fff;
  font-family:var(--f-util); font-size:.5625rem; line-height:17px; text-align:center;
  opacity:0; transform:scale(.5); transition:.25s;
}
.cart-count.on{opacity:1; transform:scale(1)}
@media (max-width:880px){
  .rail-inner{height:60px; gap:.75rem}
  .mark-text{display:none}
  .nav{margin-left:0}
}

/* ═══════════════════ VIEWS ═══════════════════ */
.view{display:none}
.view.is-on{display:block; animation:rise .5s ease both}
@keyframes rise{from{opacity:0; transform:translateY(10px)} to{opacity:1; transform:none}}

.section{padding:clamp(3.5rem,7vw,6rem) 0}
.section-head{display:flex; flex-direction:column; gap:.7rem; margin-bottom:2.5rem; max-width:60ch}
.section-head h2{font-size:clamp(1.6rem,3.2vw,2.25rem)}

/* filet ornemental */
.rule{display:flex; align-items:center; gap:1rem; opacity:.85}
.rule i{flex:1; height:1px; background:linear-gradient(90deg,transparent,var(--line-strong),transparent)}
.rule svg{width:15px; height:15px; color:var(--gilt); flex:none}

/* ═══════════════════ HERO ═══════════════════ */
.hero{position:relative; overflow:hidden; border-bottom:1px solid var(--line)}
.hero::before{content:""; position:absolute; inset:0; background:var(--halo); pointer-events:none}
#embers{position:absolute; inset:0; width:100%; height:100%; pointer-events:none; opacity:.85}
.hero-inner{
  position:relative; width:min(1180px,92vw); margin-inline:auto;
  display:grid; grid-template-columns:1.28fr .72fr; gap:clamp(2rem,5vw,4rem);
  align-items:center; padding:clamp(3rem,7vw,5.5rem) 0 clamp(2.5rem,5vw,4rem);
}
.hero h1{
  font-size:clamp(2.3rem,5.2vw,3.9rem); margin:1.1rem 0 1.3rem;
  letter-spacing:-.01em; color:var(--ember-ink);
}
.hero-copy > .lead{font-size:1.09rem}
/* la mention du rythme de parution tient sur une seule ligne des que la colonne le permet */
.hero-copy > .lead + .lead{margin-top:1rem; max-width:none}
@media (min-width:1220px){
  .hero-copy > .lead + .lead{white-space:nowrap; font-size:1rem}
}
.hero-cta{display:flex; flex-wrap:wrap; gap:.8rem; margin-top:2rem}
.hero-emblem{justify-self:center; width:min(100%,400px); filter:var(--emblem-fx); animation:float 9s ease-in-out infinite}
@keyframes float{0%,100%{transform:translateY(0)} 50%{transform:translateY(-12px)}}
@media (max-width:900px){
  .hero-inner{grid-template-columns:1fr; padding-top:2.5rem}
  .hero-emblem{grid-row:1; width:min(74%,300px); margin-bottom:.5rem}
}
@media (prefers-reduced-motion:reduce){
  .hero-emblem{animation:none}
  .view.is-on{animation:none}
}

/* ═══════════════════ BOUTONS ═══════════════════ */
.btn{
  display:inline-flex; align-items:center; gap:.5rem;
  font-family:var(--f-util); font-size:.6875rem; letter-spacing:.16em; text-transform:uppercase;
  padding:.85rem 1.5rem; border-radius:2px; border:1px solid transparent;
  text-decoration:none; transition:transform .18s, box-shadow .18s, background .18s, border-color .18s;
}
.btn:hover{transform:translateY(-2px)}
.btn-fire{
  background:linear-gradient(135deg,var(--ember),var(--ember-hi)); color:#fff;
  box-shadow:0 8px 24px color-mix(in srgb, var(--ember) 40%, transparent);
}
.btn-fire:hover{box-shadow:0 14px 34px color-mix(in srgb, var(--ember) 52%, transparent)}
.btn-gilt{border-color:var(--line-strong); color:var(--gilt-hi)}
.btn-gilt:hover{border-color:var(--gilt); background:color-mix(in srgb, var(--gilt) 10%, transparent)}
.btn-sm{padding:.6rem 1rem; font-size:.625rem}

/* ═══════════════════ BANDEAU CHAPITRE ═══════════════════ */
.chapter{
  border-top:1px solid var(--line); border-bottom:1px solid var(--line);
  background:linear-gradient(180deg, color-mix(in srgb,var(--surface) 70%, transparent), transparent);
}
.chapter-in{
  width:min(1180px,92vw); margin-inline:auto; padding:2.2rem 0;
  display:grid; grid-template-columns:auto 1fr auto; gap:2rem; align-items:center;
}
.pulse{
  display:inline-flex; align-items:center; gap:.5rem;
  font-family:var(--f-util); font-size:.625rem; letter-spacing:.18em; text-transform:uppercase; color:var(--ember-ink);
}
.pulse::before{
  content:""; width:7px; height:7px; border-radius:50%; background:var(--ember);
  box-shadow:0 0 0 0 color-mix(in srgb,var(--ember) 60%, transparent); animation:ping 2.2s infinite;
}
@keyframes ping{70%{box-shadow:0 0 0 9px transparent} 100%{box-shadow:0 0 0 0 transparent}}
@media (prefers-reduced-motion:reduce){.pulse::before{animation:none}}
.chapter h3{font-size:1.35rem; margin:.5rem 0 .45rem}
.chapter p{color:var(--dim); font-size:.9375rem; max-width:58ch}
.chapter-meta{
  font-family:var(--f-util); font-size:.6875rem; color:var(--dim);
  letter-spacing:.05em; margin-top:.7rem;
}
.countdown{text-align:right; flex:none}
.countdown .k{font-family:var(--f-util); font-size:.5625rem; letter-spacing:.18em; text-transform:uppercase; color:var(--dim)}
.countdown .v{font-family:var(--f-display); font-size:1.7rem; color:var(--gilt-hi); font-variant-numeric:tabular-nums; letter-spacing:.02em}
@media (max-width:860px){
  .chapter-in{grid-template-columns:1fr; gap:1.2rem}
  .countdown{text-align:left}
}

/* ═══════════════════ CARTES ═══════════════════ */
.card{
  background:var(--surface); border:1px solid var(--line); border-radius:3px;
  padding:1.6rem; transition:border-color .25s, transform .25s, background .25s;
}
.card:hover{border-color:var(--line-strong); transform:translateY(-3px); background:var(--surface-2)}
.card h3{font-size:1.1rem; margin-bottom:.55rem}
.card p{color:var(--dim); font-size:.9375rem}
.kicker{
  font-family:var(--f-util); font-size:.5625rem; letter-spacing:.2em;
  text-transform:uppercase; color:var(--gilt); display:block; margin-bottom:.7rem;
}

/* raccourcis d'actualite vers les rubriques */
.ordres{display:grid; grid-template-columns:repeat(4,1fr); gap:1px; background:var(--line); border:1px solid var(--line)}
.ordre{
  display:block; width:100%; text-align:left; border:0; font:inherit; color:inherit; cursor:pointer;
  background:var(--ground); padding:2.1rem 1.5rem; transition:background .3s; position:relative;
}
.ordre:hover{background:var(--surface)}
.ordre .sig{width:30px; height:30px; color:var(--gilt); margin-bottom:1.2rem; transition:color .3s}
.ordre:hover .sig{color:var(--gilt-hi)}
.ordre h3{font-size:1.05rem; margin:0}
@media (max-width:900px){.ordres{grid-template-columns:repeat(2,1fr)}}
@media (max-width:520px){.ordres{grid-template-columns:1fr}}

/* chroniques */
.chron{display:grid; gap:0; border-top:1px solid var(--line)}
.chron a{
  display:grid; grid-template-columns:130px 1fr auto; gap:1.5rem; align-items:center;
  padding:1.4rem .5rem; border-bottom:1px solid var(--line); text-decoration:none;
  transition:background .2s, padding-left .25s;
}
.chron a:hover{background:var(--surface); padding-left:1.2rem}
.chron .d{font-family:var(--f-util); font-size:.6875rem; color:var(--gilt); letter-spacing:.08em}
.chron h3{font-size:1.05rem}
.chron .t{font-family:var(--f-util); font-size:.625rem; letter-spacing:.14em; text-transform:uppercase; color:var(--dim)}
@media (max-width:760px){
  .chron a{grid-template-columns:1fr; gap:.4rem}
  .chron .t{order:-1}
}

/* ═══════════════════ DEUX MONDES ═══════════════════ */
.mondes{display:grid; grid-template-columns:1fr 1fr; gap:1.5rem}
.monde{padding:2.4rem; border:1px solid var(--line); border-radius:3px; position:relative; overflow:hidden}
.monde > *{position:relative; z-index:1}
/* decor de chaque monde : le paysage monte et s'eclaire au survol */
.monde::after{
  content:""; position:absolute; left:0; right:0; bottom:0; height:62%;
  background-position:center bottom; background-size:cover; background-repeat:no-repeat;
  -webkit-mask-image:linear-gradient(to top,#000 18%,rgba(0,0,0,.42) 58%,transparent);
          mask-image:linear-gradient(to top,#000 18%,rgba(0,0,0,.42) 58%,transparent);
  transform:translateY(10px) scale(1.05); transform-origin:bottom center;
  transition:opacity .7s ease, transform .9s cubic-bezier(.22,.7,.24,1), filter .7s ease;
  pointer-events:none;
}
/* le voile protege la zone de texte ; sa teinte suit le theme */
.monde.phys::after{
  background-image:linear-gradient(to top,var(--card-scrim),var(--card-scrim-0) 55%),url("../assets/ville.png");
  opacity:var(--decor-p);
}
.monde.phys.districts-card::after{
  background-image:linear-gradient(to top,var(--card-scrim),var(--card-scrim-0) 55%),url("assets/Grilles.png");
}
.monde.astr::after{
  background-image:linear-gradient(to top,var(--card-scrim),var(--card-scrim-0) 55%),url("../assets/iles.jpg");
  opacity:var(--decor-a); filter:saturate(.75);
}
.monde.phys:hover::after{opacity:var(--decor-p-h); transform:translateY(0) scale(1); filter:saturate(1.25) brightness(1.12)}
.monde.astr:hover::after{opacity:var(--decor-a-h); transform:translateY(0) scale(1); filter:saturate(1) brightness(1.06)}
@media (prefers-reduced-motion:reduce){
  .monde::after{transition:none; transform:none}
  .monde.phys:hover::after, .monde.astr:hover::after{transform:none}
}
.monde.phys{background:linear-gradient(160deg, color-mix(in srgb,var(--gilt) 9%, var(--surface)), var(--surface))}
.monde.astr{background:linear-gradient(160deg, color-mix(in srgb,var(--astral) 12%, var(--surface)), var(--surface))}
.monde .sig{width:34px; height:34px; margin-bottom:1.4rem}
.monde.phys .sig{color:var(--gilt)}
.monde.astr .sig{color:var(--astral)}
.monde h3{font-size:1.6rem; margin-bottom:.9rem}
.monde.phys h3{color:var(--gilt-hi)}
.monde.astr h3{color:var(--astral-hi)}
.monde p{color:var(--dim); font-size:.9375rem}
.facts{display:flex; flex-wrap:wrap; gap:1.4rem; margin-top:1.8rem; padding-top:1.4rem; border-top:1px solid var(--line)}
.facts div b{display:block; font-family:var(--f-display); font-size:1.15rem}
.facts div span{font-family:var(--f-util); font-size:.5625rem; letter-spacing:.16em; text-transform:uppercase; color:var(--dim)}
@media (max-width:820px){.mondes{grid-template-columns:1fr}}

/* sélection d'un monde : la carte cliquée reste mise en avant */
.monde[data-go]{cursor:pointer; text-align:left; border-color:var(--line)}
.monde.phys.is-active{border-color:var(--gilt); box-shadow:0 0 0 1px var(--gilt) inset}
.monde.astr.is-active{border-color:var(--astral); box-shadow:0 0 0 1px var(--astral) inset}
.monde-hint{font-family:var(--f-util); font-size:.5625rem; letter-spacing:.14em; text-transform:uppercase; color:var(--dim); margin-top:1.1rem}
.monde.phys.is-active .monde-hint, .monde.astr.is-active .monde-hint{color:inherit}

/* ═══════════════════ RUBRIQUES D'UN MONDE ═══════════════════ */
.world-menu-wrap{padding-top:clamp(2rem,4vw,3.5rem)}
.world-menu{display:grid; grid-template-columns:repeat(2,1fr); gap:1px; border:1px solid var(--line); background:var(--line)}
.world-menu-card{
  min-height:178px; padding:1.6rem; text-align:left; background:var(--ground); color:var(--text);
  display:flex; flex-direction:column; align-items:flex-start; gap:.7rem; transition:background .25s, color .25s;
}
.world-menu-card:hover{background:var(--surface)}
.world-menu-card span{font-family:var(--f-util); font-size:.625rem; letter-spacing:.16em; color:var(--dim)}
.world-menu-card b{font-family:var(--f-display); font-size:1.35rem; line-height:1.2}
.world-menu-card small{font-family:var(--f-util); font-size:.625rem; letter-spacing:.1em; text-transform:uppercase; color:var(--dim)}
.world-menu-card.phys-card.is-active{background:color-mix(in srgb,var(--gilt) 12%,var(--surface)); box-shadow:inset 3px 0 var(--gilt)}
.world-menu-card.astr-card.is-active{background:color-mix(in srgb,var(--astral) 16%,var(--surface)); box-shadow:inset 3px 0 var(--astral)}
.world-detail{display:none}
.world-detail.is-active{display:block; animation:rise .4s ease both}
.world-page.is-detail > .phero,.world-page.is-detail > .world-menu-wrap{display:none}
.world-detail-head{padding-top:clamp(2rem,4vw,3.5rem)}
.world-presentation{grid-template-columns:minmax(0,1fr)}
@media (max-width:620px){.world-menu{grid-template-columns:1fr}.world-menu-card{min-height:142px}}

/* ═══════════════════ FICHES (admin Django) ═══════════════════ */
.fiches-filters{display:flex; flex-wrap:wrap; gap:.55rem; margin-bottom:1.8rem}
.fiche-filter{
  font-family:var(--f-util); font-size:.625rem; letter-spacing:.12em; text-transform:uppercase;
  padding:.5rem 1rem; border-radius:99px; border:1px solid var(--line-strong); color:var(--dim);
  transition:border-color .2s, color .2s, background .2s;
}
.fiche-filter:hover{color:var(--text); border-color:var(--gilt)}
.fiche-filter.is-active{color:var(--gilt-hi); border-color:var(--gilt); background:color-mix(in srgb,var(--gilt) 10%, transparent)}
.fiche-grid{display:grid; grid-template-columns:repeat(auto-fill,minmax(240px,1fr)); gap:1.25rem}
.character-groups{grid-template-columns:repeat(3,minmax(0,1fr));gap:1.5rem}
.character-group{min-height:360px;padding:2.4rem;cursor:pointer;border-radius:3px}
.character-group::after{height:100%;opacity:.38}
.character-group:hover::after,.character-group:focus-visible::after{opacity:.62}
.character-group.ordinary-people::after{background-image:linear-gradient(to top,var(--card-scrim),var(--card-scrim-0) 55%),url("assets/Les hommes ordinaires 02.png")}
.character-group.shadow-people::after{background-image:linear-gradient(to top,var(--card-scrim),var(--card-scrim-0) 55%),url("assets/Les hommes de l'ombre.png")}
.character-group.system-people::after{background-image:linear-gradient(to top,var(--card-scrim),var(--card-scrim-0) 55%),url("assets/Le système.png")}
@media(max-width:900px){.character-groups{grid-template-columns:1fr}.character-group{min-height:300px}}
.fiche-card{text-align:left;min-height:220px;display:flex;flex-direction:column;align-items:flex-start;justify-content:flex-start;transition:border-color .2s,transform .2s,background .2s}
.fiche-card.character-group{min-height:360px}
.character-roster{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:1.25rem}
.character-portrait{padding:0;text-align:left;overflow:hidden;border:1px solid var(--line);border-radius:3px;background:var(--surface);color:var(--text);transition:border-color .2s,transform .2s,background .2s}
.character-portrait span{display:block;padding:1rem 1.1rem;font-family:var(--f-display);font-size:1.05rem}
.character-portrait:hover,.character-portrait:focus-visible,.character-portrait.is-selected{border-color:var(--gilt);background:var(--surface-2);outline:none}
.character-profile{display:grid;grid-template-columns:minmax(180px,260px) 1fr;gap:2rem;align-items:start;margin-top:2rem;padding:2rem;border:1px solid var(--line);background:var(--surface)}
.character-profile h2{grid-column:2;grid-row:1;margin:0;font-size:clamp(2rem,4vw,3.5rem);line-height:1.05}
.character-profile img{grid-column:1;grid-row:1 / span 2;width:100%;max-height:360px;object-fit:cover}
.character-profile p{grid-column:2;grid-row:2;margin:0;color:var(--dim);font-size:1rem;line-height:1.8}
@media(max-width:900px){.character-roster{grid-template-columns:repeat(2,minmax(0,1fr))}.character-profile{grid-template-columns:150px 1fr;gap:1.25rem}}
@media(max-width:520px){.character-roster{grid-template-columns:1fr}.character-profile{grid-template-columns:1fr}.character-profile img,.character-profile h2,.character-profile p{grid-column:1;grid-row:auto}}
.fiche-card:hover,.fiche-card:focus-visible{border-color:var(--gilt);background:color-mix(in srgb,var(--surface) 88%,var(--gilt));transform:translateY(-2px);outline:none}
.fiche-card p{margin-top:1rem}
.fiche-detail{border:1px solid var(--line);background:var(--surface);padding:2rem}
.fiche-detail-copy{max-width:760px;margin-top:2rem}.fiche-detail-copy h2{font-size:clamp(1.8rem,4vw,3rem);margin:.5rem 0 1rem}
.fiche-detail-content{margin:2rem 0;color:var(--text)}.fiche-detail-content p{margin-bottom:1rem}
.personnage-section-head{display:flex;justify-content:space-between;align-items:center;gap:1rem;margin:2.5rem 0 1rem;padding-top:1.5rem;border-top:1px solid var(--line)}
.personnage-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:1rem}
.personnage-card{padding:1.4rem;border:1px solid var(--line);background:var(--ground)}
.personnage-card h3{margin:.45rem 0}.personnage-card p,.personnage-content{color:var(--dim);font-size:.875rem}
.personnage-content{margin-top:1rem;padding-top:1rem;border-top:1px solid var(--line)}
.personnage-card a{display:inline-block;margin-top:1rem;color:var(--gilt-hi);font-family:var(--f-util);font-size:.625rem;letter-spacing:.1em;text-transform:uppercase}
.personnage-empty{color:var(--dim)}
@media(max-width:640px){.personnage-section-head{align-items:flex-start;flex-direction:column}}
.fiche-empty{
  grid-column:1/-1; text-align:center; padding:2.4rem 1.5rem; color:var(--dim); font-size:.9375rem;
  border:1px dashed var(--line-strong); border-radius:3px;
}
.fiche-empty a{color:var(--gilt-hi); text-decoration:underline}

/* chronologie */
.time{position:relative; padding-left:2.4rem}
.time::before{content:""; position:absolute; left:7px; top:.6rem; bottom:.6rem; width:1px; background:linear-gradient(180deg,transparent,var(--line-strong) 12%,var(--line-strong) 88%,transparent)}
.era{position:relative; padding-bottom:2.4rem}
.era:last-child{padding-bottom:0}
.era::before{
  content:""; position:absolute; left:-2.4rem; top:.55rem; width:15px; height:15px;
  border-radius:50%; border:1px solid var(--gilt); background:var(--ground);
}
.era.now::before{background:var(--ember); border-color:var(--ember); box-shadow:0 0 0 4px color-mix(in srgb,var(--ember) 22%, transparent)}
.era .y{font-family:var(--f-util); font-size:.6875rem; letter-spacing:.14em; color:var(--gilt); text-transform:uppercase}
.era h3{font-size:1.2rem; margin:.35rem 0 .5rem}
.era p{color:var(--dim); font-size:.9375rem; max-width:60ch}

/* carte */
.map{border:1px solid var(--line); border-radius:3px; background:var(--surface); padding:1.5rem}
.map svg{width:100%; height:auto}
.map .land{color:var(--gilt)}
.map .seat{color:var(--ember)}
.map .gate{color:var(--astral)}
.map text{font-family:var(--f-util); fill:var(--dim)}
.map text.t-gilt{fill:var(--gilt)}
.map text.t-astral{fill:var(--astral)}
.map-cap{font-family:var(--f-util); font-size:.625rem; letter-spacing:.14em; text-transform:uppercase; color:var(--dim); margin-top:1rem; text-align:center}
.game-map{padding:0; overflow:hidden}
.map-view-tabs{display:flex; gap:1px; padding:1px; background:var(--line); border-bottom:1px solid var(--line)}
.map-view-tab{flex:1; min-height:48px; padding:.7rem 1rem; background:var(--ground); color:var(--dim); border:0; font-family:var(--f-util); font-size:.6875rem; letter-spacing:.12em; text-transform:uppercase; cursor:pointer; transition:background .2s,color .2s}
.map-view-tab:hover,.map-view-tab:focus-visible{background:var(--surface); color:var(--text)}
.map-view-tab.is-active{background:var(--surface); color:var(--gilt-hi); box-shadow:inset 0 -2px var(--gilt)}
.map-board{position:relative; overflow:hidden; background:#e8e5dc}
.map-board > svg:not(.map-interaction-overlay){display:none}
.map-image-view{width:100%; height:auto; object-fit:contain; background:#fff}
.map-image-view[hidden]{display:none}
.map-interaction-overlay{position:absolute;inset:0;z-index:3;width:100%;height:100%;pointer-events:none}
.map-region-hit{display:block;pointer-events:all;fill:transparent;stroke:transparent;stroke-width:0;cursor:pointer}
.map-region-hit:hover,.map-region-hit:focus-visible,.map-region-hit.is-selected{fill:transparent;stroke:transparent;outline:none}
.map-interaction-overlay-victoria .map-region-hit:hover,.map-interaction-overlay-victoria .map-region-hit:focus-visible,.map-interaction-overlay-victoria .map-region-hit.is-selected{fill:rgba(199,162,77,.28);stroke:var(--gilt-hi);stroke-width:5}
.map-region-hit[hidden]{display:none}
.map-board.is-detail .map-points{display:none}
.map-landmass{fill:url(#map-hatch); stroke:#bd913d; stroke-width:2; stroke-linejoin:round}
.map-cassiopeia path:nth-child(2),.map-virgo path:nth-child(1){fill:url(#map-hatch)}
.map-fertile,.map-shores{fill:none; stroke:#bd913d; stroke-width:1.3; opacity:.55}
.map-mountains{fill:none; stroke:#d5af5a; stroke-width:2.5; stroke-linejoin:round}
.map-rivers{stroke:#6d9fc6; stroke-width:2; stroke-linecap:round; opacity:.65}
.map-waterways{stroke:#111a29; stroke-width:8; stroke-linecap:round; stroke-linejoin:round; filter:drop-shadow(0 0 1px #bd913d)}
.map-internal{stroke:#bd913d; stroke-width:1.3; stroke-dasharray:5 6; stroke-linecap:round; opacity:.55}
.map-labels{font-family:var(--f-util); font-size:16px; letter-spacing:.13em; fill:#978d7c; font-weight:700}
.map-regions path{fill:rgba(189,145,61,.001);stroke:transparent;stroke-width:2;cursor:pointer;outline:none;transition:fill .2s,stroke .2s}
.map-regions path:hover,.map-regions path:focus-visible,.map-regions path.is-active{fill:rgba(189,145,61,.12);stroke:#e1bc64}
.map-city-labels{font-size:10px;fill:#d5c7a8;pointer-events:none}
.map-andromeda{fill:#121b29; stroke:#bd913d; stroke-width:2; opacity:.86}
.map-andromeda[data-map-area]{cursor:pointer;outline:none;transition:fill .2s,stroke .2s}
.map-andromeda[data-map-area]:hover,.map-andromeda[data-map-area]:focus-visible,.map-andromeda[data-map-area].is-active{fill:rgba(189,145,61,.1);stroke:#e1bc64}
.map-andromeda-label{font-family:var(--f-util); font-size:15px; letter-spacing:.14em; fill:#978d7c; text-anchor:middle}
.map-points{position:absolute; inset:0; pointer-events:none}
.map-point{position:absolute; display:grid; place-items:center; width:28px; height:28px; transform:translate(-50%,-50%); z-index:2; pointer-events:auto}
.map-point span{width:15px; height:15px; display:block; border-radius:50%; border:2px solid #111a29; background:var(--ember); box-shadow:0 0 0 1px #bd913d,0 5px 12px rgba(0,0,0,.38); transition:transform .2s, box-shadow .2s}
.map-point b{position:absolute; top:25px; left:50%; transform:translateX(-50%); width:max-content; max-width:150px; color:#978d7c; font-family:var(--f-util); font-size:.625rem; letter-spacing:.14em; text-transform:uppercase; text-shadow:none; pointer-events:none}
.map-point:hover span,.map-point:focus-visible span{transform:scale(1.35); box-shadow:0 0 0 5px rgba(255,255,255,.75),0 5px 12px rgba(0,0,0,.38)}
.map-point.state-rumeur span{background:#6d9fc6}
.map-point.state-alerte span{background:var(--ember); animation:map-pulse 1.8s infinite}
.map-point.state-cache{opacity:.55}.map-point.state-cache span{background:#59616c}
@keyframes map-pulse{50%{box-shadow:0 0 0 8px rgba(226,87,28,.22),0 5px 12px rgba(0,0,0,.38)}}
.map-info{min-height:130px; padding:1.3rem 1.5rem; border-top:1px solid var(--line); background:color-mix(in srgb,var(--surface) 86%,var(--ground));}
.map-info h3{font-size:1.15rem; margin:.35rem 0}.map-info p{font-size:.875rem; color:var(--dim); max-width:64ch}
.map-presentation-info{padding:clamp(1.5rem,4vw,3rem)}
.map-presentation-info > h3{font-size:clamp(2rem,4vw,3.5rem);margin:0 0 2rem}
.map-presentation{max-width:900px}
.map-presentation h4{margin:2.2rem 0 .7rem;font-family:var(--f-display);font-size:1.35rem;color:var(--gilt-hi);letter-spacing:.05em}
.map-presentation h4:first-child{margin-top:0}
.map-presentation p,.map-presentation li{max-width:none;font-size:1rem;line-height:1.8}
.map-presentation ol{margin:1rem 0 0;padding-left:1.5rem;color:var(--dim)}
.map-presentation li{padding-left:.4rem;margin:.45rem 0}
.map-region-presentation{max-width:900px}
.map-region-presentation h3{font-size:clamp(2rem,4vw,3.5rem);margin:0 0 2rem}
.map-region-presentation p{max-width:none;font-size:1rem;line-height:1.8}
.map-point-presentation img{display:block;width:min(100%,480px);max-height:420px;object-fit:cover;margin:0 0 1.5rem;border:1px solid var(--line);border-radius:3px;cursor:zoom-in;transition:border-color .2s,transform .2s}
.map-point-presentation img:hover{border-color:var(--gilt-hi);transform:scale(1.01)}
.page-head{max-width:900px;margin:0 auto;padding:clamp(4rem,10vw,8rem) var(--pad) 2rem}
.page-head h1{margin:.35rem 0 1rem;font-size:clamp(2.5rem,6vw,5.5rem);line-height:1.02}
.page-head .lead{max-width:62ch}
.section{max-width:1200px;margin:0 auto;padding:2.5rem var(--pad)}
.section .map-image{display:block;width:min(100%,900px);height:auto;margin-top:1.5rem;border:1px solid var(--line);border-radius:3px}
.image-lightbox{width:min(92vw,1100px);max-width:none;max-height:92vh;padding:3.5rem 1rem 1rem;border:1px solid var(--line-strong);border-radius:4px;background:var(--ground);box-shadow:0 24px 70px rgba(0,0,0,.7)}
.image-lightbox::backdrop{background:rgba(3,7,13,.86);backdrop-filter:blur(4px)}
.image-lightbox img{display:block;max-width:100%;max-height:calc(92vh - 4.5rem);margin:auto;object-fit:contain}
.image-lightbox-close{position:absolute;top:.65rem;right:.8rem;width:2.35rem;height:2.35rem;border:1px solid var(--line-strong);border-radius:50%;background:var(--surface);color:var(--paper);font-size:1.7rem;line-height:1;cursor:pointer}
.image-lightbox-close:hover,.image-lightbox-close:focus-visible{border-color:var(--gilt-hi);color:var(--gilt-hi)}
.map-info .map-area{display:inline-block;margin-top:.65rem;padding:.35rem .55rem;border:1px solid var(--line-strong);font-family:var(--f-util);font-size:.625rem;letter-spacing:.1em;text-transform:uppercase;color:var(--gilt-hi)}
.map-info .map-state{font-family:var(--f-util); font-size:.625rem; color:var(--ember-ink); letter-spacing:.12em; text-transform:uppercase}
.game-map .map-cap{margin:0; padding:1rem 1.5rem; border-top:1px solid var(--line)}
@media (max-width:700px){.map{padding:0}.map-view-tab{min-height:44px;padding:.6rem .35rem;font-size:.5625rem}.map-labels{font-size:10px}.map-point{width:24px;height:24px}.map-point span{width:13px;height:13px}.map-point b{display:none}.map-info{padding:1rem}.game-map .map-cap{padding:.85rem;font-size:.55rem}}

/* ═══════════════════ LICENCES ═══════════════════ */
.works{display:grid; gap:1.25rem}
.work{
  display:grid; grid-template-columns:132px 1fr 190px; gap:2rem; align-items:center;
  background:var(--surface); border:1px solid var(--line); border-radius:3px; padding:1.6rem;
  transition:border-color .25s, transform .25s;
}
.work:hover{border-color:var(--line-strong); transform:translateY(-2px)}
.spine{
  height:180px; border-radius:2px 5px 5px 2px; position:relative; overflow:hidden;
  box-shadow:var(--shadow); display:grid; place-items:center; padding:1rem;
}
.spine::before{content:""; position:absolute; left:0; top:0; bottom:0; width:9px; background:linear-gradient(90deg,rgba(0,0,0,.42),transparent)}
.spine span{
  font-family:var(--f-display); font-size:.75rem; letter-spacing:.12em; text-transform:uppercase;
  text-align:center; color:#F6EBD3; line-height:1.5; text-shadow:0 2px 8px rgba(0,0,0,.6);
}
.sp-1{background:linear-gradient(150deg,#3A1608,#8A2F0B 55%,#C2701C)}
.sp-2{background:linear-gradient(150deg,#101823,#243449 60%,#4A6C8B)}
.sp-3{background:linear-gradient(150deg,#2B2109,#6B5216 58%,#B08A2A)}
.sp-4{background:linear-gradient(150deg,#1B1016,#3E1F2C 58%,#77384C)}
.work h3{font-size:1.35rem; margin-bottom:.4rem}
.work p{color:var(--dim); font-size:.9375rem; margin-bottom:1rem}
.pill{
  display:inline-flex; align-items:center; gap:.4rem; font-family:var(--f-util);
  font-size:.5625rem; letter-spacing:.16em; text-transform:uppercase;
  padding:.3rem .6rem; border-radius:99px; border:1px solid var(--line-strong); color:var(--dim);
}
.pill.live{color:var(--ember-ink); border-color:color-mix(in srgb,var(--ember) 45%, transparent)}
.pill.done{color:var(--gilt-hi); border-color:color-mix(in srgb,var(--gilt) 45%, transparent)}
.pill.soon{color:var(--astral-hi); border-color:color-mix(in srgb,var(--astral) 45%, transparent)}
.prog{margin-top:.4rem}
.prog .bar{height:3px; background:var(--line); border-radius:99px; overflow:hidden}
.prog .bar i{display:block; height:100%; background:linear-gradient(90deg,var(--gilt),var(--gilt-hi)); border-radius:99px}
.prog .lab{font-family:var(--f-util); font-size:.625rem; color:var(--dim); margin-top:.5rem; display:flex; justify-content:space-between}
@media (max-width:860px){
  .work{grid-template-columns:100px 1fr; gap:1.4rem}
  .work > div:last-child{grid-column:1/-1}
  .spine{height:140px}
}

/* ═══════════════════ ÉVÉNEMENTS ═══════════════════ */
.evt-main{
  display:grid; grid-template-columns:1.3fr 1fr; gap:1.5rem; align-items:stretch;
}
.evt-hero{
  padding:2.6rem; border-radius:3px; border:1px solid var(--line-strong);
  background:linear-gradient(150deg, color-mix(in srgb,var(--ember) 14%, var(--surface)), var(--surface) 65%);
  display:flex; flex-direction:column; justify-content:space-between; gap:2rem;
}
.evt-hero h3{font-size:1.75rem; margin:.8rem 0 .7rem}
.evt-date{display:flex; align-items:baseline; gap:.6rem; font-family:var(--f-display)}
.evt-date b{font-size:2.6rem; color:var(--ember-ink); line-height:1; font-variant-numeric:tabular-nums}
.evt-date span{font-family:var(--f-util); font-size:.6875rem; letter-spacing:.16em; text-transform:uppercase; color:var(--dim)}
.agenda{display:grid; border:1px solid var(--line); border-radius:3px; background:var(--surface); overflow:hidden}
.agenda-row{display:grid; grid-template-columns:64px 1fr; gap:1.1rem; padding:1.1rem 1.3rem; border-bottom:1px solid var(--line); align-items:center}
.agenda-row:last-child{border-bottom:0}
.agenda-row .dt{text-align:center; font-family:var(--f-util); border-right:1px solid var(--line); padding-right:1.1rem}
.agenda-row .dt b{display:block; font-family:var(--f-display); font-size:1.3rem; color:var(--gilt-hi); font-variant-numeric:tabular-nums; line-height:1}
.agenda-row .dt span{font-size:.5625rem; letter-spacing:.14em; text-transform:uppercase; color:var(--dim)}
.agenda-row h4{font-family:var(--f-display); font-size:1rem; margin-bottom:.2rem}
.agenda-row p{font-size:.8125rem; color:var(--dim)}
@media (max-width:860px){.evt-main{grid-template-columns:1fr}}

/* sondage */
.poll{background:var(--surface); border:1px solid var(--line); border-radius:3px; padding:2.2rem}
.poll h3{font-size:1.3rem; margin:.6rem 0 .4rem}
.poll > p{color:var(--dim); font-size:.875rem; margin-bottom:1.6rem}
.opt{
  width:100%; text-align:left; position:relative; overflow:hidden;
  border:1px solid var(--line); border-radius:2px; padding:.95rem 1.1rem; margin-bottom:.7rem;
  display:flex; justify-content:space-between; align-items:center; gap:1rem;
  transition:border-color .2s, background .2s;
}
.opt:hover{border-color:var(--line-strong)}
.opt .fill{
  position:absolute; inset:0 auto 0 0; width:0; background:color-mix(in srgb,var(--gilt) 16%, transparent);
  transition:width .9s cubic-bezier(.2,.7,.2,1);
}
.opt .txt,.opt .pct{position:relative; font-size:.9375rem}
.opt .pct{font-family:var(--f-util); font-size:.8125rem; color:var(--gilt-hi); opacity:0; transition:opacity .4s}
.poll.voted .opt .pct{opacity:1}
.poll.voted .opt{cursor:default}
.opt.chosen{border-color:var(--gilt)}
.opt.chosen .fill{background:color-mix(in srgb,var(--ember) 20%, transparent)}
.poll-foot{font-family:var(--f-util); font-size:.625rem; letter-spacing:.12em; color:var(--dim); margin-top:1.2rem; text-transform:uppercase}

/* ═══════════════════ COMMUNAUTÉ ═══════════════════ */
.author{
  display:grid; grid-template-columns:auto 1fr; gap:2rem; align-items:start;
  border:1px solid var(--line); border-left:2px solid var(--gilt); border-radius:3px;
  background:var(--surface); padding:2.4rem;
}
.seal{
  width:64px; height:64px; border-radius:50%; display:grid; place-items:center; flex:none;
  background:linear-gradient(140deg,var(--gilt),color-mix(in srgb,var(--gilt) 55%, #000));
  color:#1A1208; font-family:var(--f-display); font-size:1.4rem; font-weight:700;
  box-shadow:var(--shadow);
}
.author blockquote{margin:1rem 0 0; font-family:var(--f-display); font-size:1.2rem; line-height:1.6; font-style:italic}
.author .sign{font-family:var(--f-util); font-size:.6875rem; letter-spacing:.14em; text-transform:uppercase; color:var(--dim); margin-top:1.2rem}
@media (max-width:640px){.author{grid-template-columns:1fr; padding:1.7rem}}

.salons{display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); gap:1rem}
.salon{display:flex; justify-content:space-between; align-items:center; gap:1rem; padding:1.2rem 1.3rem; border:1px solid var(--line); border-radius:3px; background:var(--surface); transition:border-color .2s}
.salon:hover{border-color:var(--line-strong)}
.salon h4{font-family:var(--f-display); font-size:.9375rem; margin-bottom:.15rem}
.salon .sub{font-size:.75rem; color:var(--dim)}
.salon .n{font-family:var(--f-util); font-size:.9375rem; color:var(--gilt-hi); font-variant-numeric:tabular-nums; flex:none}

.amb{display:grid; grid-template-columns:repeat(auto-fit,minmax(210px,1fr)); gap:1rem}
.amb-card{text-align:center; padding:1.8rem 1.2rem; border:1px solid var(--line); border-radius:3px; background:var(--surface)}
.avatar{
  width:52px; height:52px; border-radius:50%; margin:0 auto .9rem; display:grid; place-items:center;
  font-family:var(--f-display); font-size:1.05rem; color:var(--ground);
  background:linear-gradient(140deg,var(--gilt-hi),var(--gilt));
}
.amb-card h4{font-family:var(--f-display); font-size:1rem}
.amb-card .role{font-family:var(--f-util); font-size:.5625rem; letter-spacing:.16em; text-transform:uppercase; color:var(--gilt); margin:.35rem 0 .6rem}
.amb-card p{font-size:.8125rem; color:var(--dim)}

/* ═══════════════════ BOUTIQUE ═══════════════════ */
.shop{display:grid; grid-template-columns:repeat(auto-fit,minmax(250px,1fr)); gap:1.5rem}
.prod{display:flex; flex-direction:column; background:var(--surface); border:1px solid var(--line); border-radius:3px; overflow:hidden; transition:border-color .25s, transform .25s}
.prod:hover{border-color:var(--line-strong); transform:translateY(-4px)}
.prod-vis{height:200px; position:relative; display:grid; place-items:center; padding:1.5rem}
.prod-vis span{font-family:var(--f-display); font-size:.8125rem; letter-spacing:.14em; text-transform:uppercase; text-align:center; color:#F6EBD3; line-height:1.6; text-shadow:0 2px 10px rgba(0,0,0,.65)}
.prod-vis .badge{
  position:absolute; top:.9rem; left:.9rem; font-family:var(--f-util); font-size:.5625rem;
  letter-spacing:.16em; text-transform:uppercase; padding:.28rem .55rem; border-radius:99px;
  background:rgba(10,12,18,.72); color:#F0D89C; border:1px solid rgba(240,203,122,.35);
  text-shadow:none; line-height:1.4;
}
.prod-body{padding:1.4rem; display:flex; flex-direction:column; gap:.5rem; flex:1}
.prod-body h3{font-size:1.05rem}
.prod-body .fmt{font-family:var(--f-util); font-size:.625rem; letter-spacing:.14em; text-transform:uppercase; color:var(--dim)}
.prod-body p{font-size:.8125rem; color:var(--dim); flex:1}
.prod-foot{display:flex; justify-content:space-between; align-items:center; gap:1rem; margin-top:.6rem}
.price{font-family:var(--f-display); font-size:1.3rem; color:var(--gilt-hi); font-variant-numeric:tabular-nums}
.add{
  font-family:var(--f-util); font-size:.625rem; letter-spacing:.14em; text-transform:uppercase;
  border:1px solid var(--line-strong); border-radius:2px; padding:.55rem .9rem; color:var(--text);
  transition:background .2s,color .2s,border-color .2s;
}
.add:hover{background:var(--ember); border-color:var(--ember); color:#fff}
.add.ok{background:var(--gilt); border-color:var(--gilt); color:#1A1208}
.add[disabled]{opacity:.45; cursor:not-allowed}
.reassure{display:grid; grid-template-columns:repeat(auto-fit,minmax(200px,1fr)); gap:1.5rem; margin-top:3rem; padding-top:2rem; border-top:1px solid var(--line)}
.reassure div h4{font-family:var(--f-display); font-size:.9375rem; margin-bottom:.3rem}
.reassure div p{font-size:.8125rem; color:var(--dim)}

/* ═══════════════════ NEWSLETTER ═══════════════════ */
.registre{
  border:1px solid var(--line-strong); border-radius:3px; padding:clamp(2rem,5vw,3.2rem);
  background:linear-gradient(150deg, color-mix(in srgb,var(--gilt) 10%, var(--surface)), var(--surface) 70%);
  display:grid; grid-template-columns:1fr auto; gap:2.5rem; align-items:center;
}
.registre h3{font-size:1.6rem; margin:.7rem 0 .6rem}
.registre p{color:var(--dim); font-size:.9375rem; max-width:48ch}
.form{display:flex; gap:.6rem; flex-wrap:wrap}
.form input{
  font:inherit; font-size:.9375rem; padding:.75rem .9rem; min-width:250px;
  background:var(--ground); border:1px solid var(--line-strong); border-radius:2px; color:var(--text);
}
.form input::placeholder{color:var(--dim)}
.form-msg{font-family:var(--f-util); font-size:.6875rem; color:var(--gilt-hi); margin-top:.9rem; min-height:1em}
@media (max-width:820px){.registre{grid-template-columns:1fr; gap:1.6rem}}

/* ═══════════════════ PAGE HERO ═══════════════════ */
.phero{padding:clamp(3rem,6vw,4.6rem) 0 clamp(2rem,4vw,3rem); border-bottom:1px solid var(--line); background:var(--vignette)}
.phero h1{font-size:clamp(2rem,4.6vw,3.2rem); margin:.9rem 0 1rem; max-width:20ch}

/* ═══════════════════ FOOTER ═══════════════════ */
.foot{border-top:1px solid var(--line); background:var(--ground-2); padding:3.5rem 0 2rem; margin-top:2rem}
.foot-grid{display:grid; grid-template-columns:2fr 1fr 1fr 1fr; gap:2.5rem}
.foot-brand img{width:54px; filter:var(--emblem-fx); margin-bottom:1rem}
.foot-brand p{font-size:.8125rem; color:var(--dim); max-width:34ch}
.foot h4{font-family:var(--f-util); font-size:.5625rem; letter-spacing:.2em; text-transform:uppercase; color:var(--gilt); margin-bottom:1rem; font-weight:400}
.foot ul{list-style:none; margin:0; padding:0; display:grid; gap:.55rem}
.foot ul button, .foot ul span{font-size:.8125rem; color:var(--dim); text-align:left; transition:color .2s}
.foot ul button:hover{color:var(--gilt-hi)}
.foot-base{
  margin-top:3rem; padding-top:1.5rem; border-top:1px solid var(--line);
  display:flex; justify-content:space-between; gap:1rem; flex-wrap:wrap;
  font-family:var(--f-util); font-size:.625rem; letter-spacing:.1em; color:var(--dim); text-transform:uppercase;
}
@media (max-width:820px){.foot-grid{grid-template-columns:1fr 1fr; gap:2rem}}