/* Oriflamme - site public. Système visuel : docs/design/systeme-visuel.html. Fontes OFL locales. */
@font-face{font-family:"Metamorphous";src:url(/site/assets/fonts/metamorphous-latin-400-normal.woff2?v=3af20c9620) format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:"Cinzel";src:url(/site/assets/fonts/cinzel-latin-600-normal.woff2?v=f013ac32c1) format("woff2");font-weight:600;font-display:swap}
@font-face{font-family:"Cinzel";src:url(/site/assets/fonts/cinzel-latin-800-normal.woff2?v=eacb8e500a) format("woff2");font-weight:800;font-display:swap}
@font-face{font-family:"Alegreya";src:url(/site/assets/fonts/alegreya-latin-400-normal.woff2?v=b6cf5bee7e) format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:"Alegreya";src:url(/site/assets/fonts/alegreya-latin-400-italic.woff2?v=0a668ce5fd) format("woff2");font-weight:400;font-style:italic;font-display:swap}
@font-face{font-family:"Alegreya";src:url(/site/assets/fonts/alegreya-latin-600-normal.woff2?v=dbe738f755) format("woff2");font-weight:600;font-display:swap}
@font-face{font-family:"Alegreya Sans";src:url(/site/assets/fonts/alegreya-sans-latin-400-normal.woff2?v=123cd4a1e1) format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:"Alegreya Sans";src:url(/site/assets/fonts/alegreya-sans-latin-500-normal.woff2?v=005c64e2da) format("woff2");font-weight:500;font-display:swap}
@font-face{font-family:"Alegreya Sans";src:url(/site/assets/fonts/alegreya-sans-latin-700-normal.woff2?v=403b09118b) format("woff2");font-weight:700;font-display:swap}

:root{
  --leather:#120d0a;--leather-2:#1d1510;--leather-3:#26190f;
  --parchment:#e7d3a8;--parchment-2:#cdb27e;--parchment-3:#b8976a;
  --ink:#2a1a0c;--ink-2:#4a3418;
  --gold:#e2b24a;--gold-hi:#fff0b8;--gold-lo:#7a5417;--gold-shadow:#3b2608;
  --bone:#efe4cc;--bone-dim:#ad9d80;
  --ember:#c43f1c;--ember-hi:#e8603a;--moss:#64923a;
  --f-display:"Metamorphous","Cinzel",Georgia,serif;--f-caps:"Cinzel",Georgia,serif;--f-body:"Alegreya",Georgia,serif;--f-ui:"Alegreya Sans","Gill Sans",Arial,sans-serif;
  --wrap:1180px;
  color-scheme:dark;
}
*{box-sizing:border-box}
html{scrollbar-color:#7a5417 #120d0a;scrollbar-width:thin;scroll-behavior:smooth}
body{margin:0;background:var(--leather) url(/site/assets/tex-leather.jpg?v=9b5f3a540e) center top/1024px auto repeat;color:var(--bone);font-family:var(--f-body);font-size:18px;line-height:1.55}
img{max-width:100%;display:block}
a{color:var(--gold)}
h1,h2,h3{margin:0;font-weight:400}
h2{font-family:var(--f-display);font-size:clamp(1.9rem,3.6vw,3rem);letter-spacing:.02em;line-height:1.1;margin:.1em 0 .6em;color:#f2a640;background:linear-gradient(180deg,#ffd98a 0%,#f2a640 45%,#c9641d 100%);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;filter:drop-shadow(0 2px 0 #3b1a06) drop-shadow(0 0 18px #f2a64033)}
h3{font-family:var(--f-caps);font-weight:600;font-size:1.05rem;letter-spacing:.14em;text-transform:uppercase;color:var(--gold);margin-bottom:.6em}
p{margin:0 0 1em}
.skip{position:absolute;left:-999px;top:0;background:var(--ember);color:#fff;padding:8px 12px}
.skip:focus{left:8px;z-index:100}
.muted{color:var(--bone-dim)}
.small{font-size:.9rem}
.overline{font-family:var(--f-display);font-size:1.15rem;letter-spacing:.02em;text-transform:none;color:#f2a640;margin:0 0 .1em;text-shadow:0 1px 0 #3b1a06}
.wrap{max-width:var(--wrap);margin:0 auto;padding:0 24px}
.wrap.two{display:grid;grid-template-columns:1.1fr .9fr;gap:56px;align-items:start}
.wrap.center{text-align:center}
.intro{font-size:1.15rem;max-width:62ch}
.center .intro{margin:0 auto 1.4em}

/* Braises (canvas plein écran, derrière tout) */
#embers{position:fixed;inset:0;width:100%;height:100%;pointer-events:none;z-index:0;opacity:.7}
header,main,section,footer{position:relative;z-index:1}

/* Barre haute */
.top{position:sticky;top:0;z-index:20;display:flex;align-items:center;gap:28px;padding:10px 28px;background:linear-gradient(180deg,#0a0604f2,#0a0604cc);border-bottom:1px solid #6b4e2a66;backdrop-filter:blur(6px)}
.brand{display:flex;align-items:center;gap:12px;color:var(--gold-hi);text-decoration:none;font-family:var(--f-display);font-size:1.25rem;letter-spacing:.06em}
.menu{display:flex;gap:22px;margin-left:auto}
.menu a{color:var(--bone);text-decoration:none;font-family:var(--f-ui);font-size:.95rem;letter-spacing:.06em;text-transform:uppercase;padding:6px 0;border-bottom:1px solid transparent;transition:color .15s,border-color .15s}
.menu a:hover{color:var(--gold-hi);border-color:var(--gold)}
.top-tools{display:flex;align-items:center;gap:12px}
.lang{background:none;border:1px solid #6b4e2a;color:var(--gold);font-family:var(--f-caps);font-size:.8rem;letter-spacing:.12em;padding:6px 10px;border-radius:2px;cursor:pointer}
.lang:hover{border-color:var(--gold)}
.burger{display:none;margin-left:auto;width:40px;height:40px;background:none;border:1px solid #6b4e2a;border-radius:2px;position:relative;cursor:pointer}
.burger span,.burger span::before,.burger span::after{content:"";position:absolute;left:9px;right:9px;height:2px;background:var(--gold);top:19px}
.burger span::before{top:-7px}.burger span::after{top:7px}

/* Boutons */
.btn{position:relative;display:inline-flex;align-items:center;justify-content:center;gap:8px;font-family:var(--f-caps);font-weight:700;font-size:.92rem;letter-spacing:.16em;text-transform:uppercase;color:var(--bone);text-decoration:none;padding:10px 34px;min-height:52px;border:1px solid #6a4a22;border-radius:2px;
  background:url(/site/assets/grain.png?v=0101358cdf),radial-gradient(120% 90% at 50% 0%,#3a2a1c 0%,#221710 45%,#160e09 100%);background-blend-mode:soft-light,normal;
  text-shadow:0 1px 1px #000c;box-shadow:inset 0 1px 0 #ffe6b03a,inset 0 -1px 0 #000a,inset 0 0 0 1px #0007,0 1px 2px #000b,0 8px 18px -10px #000;transition:transform .08s,filter .15s,box-shadow .15s;cursor:pointer}
.btn:hover{filter:brightness(1.18);box-shadow:inset 0 1px 0 #ffe6b04a,inset 0 -1px 0 #000a,inset 0 0 0 1px #0007,0 0 0 1px #c9a46a33,0 0 16px #e2b24a2e,0 1px 2px #000b}
.btn:active{transform:translateY(1px)}
.btn.small{padding:4px 18px;min-height:40px;font-size:.78rem}
.btn.ember{color:#fff0d6;border-color:#b07a3a;background:url(/site/assets/grain.png?v=0101358cdf),linear-gradient(180deg,#b23a1e 0%,#8f2412 40%,#5f130a 100%);background-blend-mode:soft-light,normal;text-shadow:0 1px 0 #3a0a04,0 0 10px #ff9c5a44;box-shadow:inset 0 1px 0 #ffd4a05a,inset 0 -1px 0 #0009,inset 0 0 0 1px #4a0d0680,0 1px 2px #000c,0 8px 18px -10px #c43f1c99}
.btn.ember:hover{filter:brightness(1.12);box-shadow:inset 0 1px 0 #ffd4a06a,inset 0 -1px 0 #0009,inset 0 0 0 1px #4a0d0680,0 0 0 1px #e2b24a55,0 0 18px #c43f1c66,0 1px 2px #000c}
.cta{display:flex;flex-wrap:wrap;gap:14px;align-items:center;margin:1.4em 0}
.cta.center{justify-content:center}

/* Héros */
.hero{position:relative;min-height:min(92vh,900px);display:grid;align-items:center;overflow:hidden;border-bottom:2px solid var(--gold-lo)}
.hero-art{position:absolute;inset:0;background:url(/site/assets/hero.jpg?v=3374f4cc61) center 35%/cover no-repeat;transform:scale(1.04);animation:drift 28s ease-in-out infinite alternate}
.hero-art.video{animation:none;transform:none}
@keyframes drift{from{transform:scale(1.04) translateY(0)}to{transform:scale(1.1) translateY(-18px)}}
.hero-art video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center 35%;filter:brightness(.68) saturate(1.08) contrast(1.08)}
.hero-art.video::before{background:linear-gradient(90deg,#120d0af4 0,#120d0ad6 30%,#120d0a8a 52%,#120d0a40 72%,#120d0a24 100%),linear-gradient(180deg,#120d0a80 0,#120d0a22 22%,transparent 55%,var(--leather) 100%)}
.hero-haze{position:absolute;inset:0;pointer-events:none;background:radial-gradient(60% 50% at 70% 60%,#ff8a3a22,transparent 70%),radial-gradient(40% 35% at 25% 75%,#ffb06018,transparent 70%);mix-blend-mode:screen;animation:haze 14s ease-in-out infinite alternate;opacity:.9}
@keyframes haze{from{transform:translate3d(-2%,1%,0) scale(1.02);opacity:.55}to{transform:translate3d(2%,-1%,0) scale(1.08);opacity:1}}
.hero-art::before{content:"";position:absolute;inset:0;background:linear-gradient(90deg,#120d0af0 0,#120d0ab8 32%,#120d0a40 58%,#120d0a10 100%),linear-gradient(180deg,#120d0a66 0,transparent 25%,transparent 60%,var(--leather) 100%)}
.hero-inner{position:relative;max-width:var(--wrap);width:100%;margin:0 auto;padding:110px 24px 90px}
.hero-inner .reveal.in{transition-duration:.9s}
.hero h1.reveal{transform:translateY(10px) scale(1.03);filter:blur(10px)}
.hero h1.reveal.in{transform:none;filter:blur(0);transition:opacity 1.1s ease,transform 1.1s cubic-bezier(.2,.8,.2,1),filter 1.1s ease}
/* Logotype horizontal (flamme feu + Oriflamme forgé) à la place de l'oriflamme plate et du titre texte (Jeremy, 17 oct.). */
.hero-logo{display:block;width:min(640px,86vw);height:auto;margin:.15em 0 .25em -6px;filter:drop-shadow(0 3px 0 #2a1004) drop-shadow(0 6px 24px #000c) drop-shadow(0 0 40px #ff9a4a33)}
.hero h1{margin:0;line-height:0}
.hero-sub{font-family:var(--f-caps);font-weight:600;font-size:clamp(.95rem,1.6vw,1.25rem);letter-spacing:.28em;text-transform:uppercase;color:var(--gold);text-shadow:0 1px 2px #000;margin:.6em 0 1.2em}
.lead{font-size:1.2rem;max-width:58ch;text-shadow:0 1px 2px #000}
.countdown{display:inline-flex;flex-direction:column;align-items:center;gap:6px;padding:14px 20px 12px;border:1px solid #e2b24a44;border-radius:2px;background:linear-gradient(180deg,#0b0604d8,#07030280);backdrop-filter:blur(2px);margin-top:8px;position:relative}
.countdown::before{content:"";position:absolute;left:-1px;top:-1px;width:14px;height:14px;border-left:1px solid var(--gold);border-top:1px solid var(--gold);opacity:.8}
.countdown-label{font-family:var(--f-caps);font-size:.72rem;letter-spacing:.22em;text-transform:uppercase;color:var(--bone-dim)}
.countdown-slots{display:flex;align-items:flex-start;gap:0}
.countdown .slot{display:flex;flex-direction:column;align-items:center;min-width:64px;padding:0 10px;position:relative}
.countdown .slot+.slot::before{content:"";position:absolute;left:0;top:8px;bottom:14px;width:1px;background:linear-gradient(180deg,transparent,#e2b24a66,transparent)}
.countdown .digits{display:flex;font-family:var(--f-display);font-size:2.3rem;line-height:1;letter-spacing:.02em;color:var(--gold-hi);text-shadow:0 2px 0 var(--gold-shadow),0 0 18px #e2b24a44;overflow:hidden;padding:2px 0}
.countdown .digits span{display:inline-block;width:.64em;text-align:center}
.countdown .digits span.flip{animation:flip-in .32s cubic-bezier(.2,.9,.3,1) both}
@keyframes flip-in{0%{transform:translateY(60%);opacity:0;filter:blur(3px)}60%{transform:translateY(-6%);opacity:1;filter:none}100%{transform:none}}
.countdown .unit{font-family:var(--f-caps);font-size:.62rem;letter-spacing:.2em;text-transform:uppercase;color:var(--bone-dim);margin-top:4px}
.countdown-fuse{height:2px;background:#2a1a0c;position:relative;margin-top:4px;overflow:visible}
.countdown-fuse span{display:block;height:100%;width:0;background:linear-gradient(90deg,#7a5417,#e2b24a,#ff9a4a);transition:width 1s linear;position:relative}
.countdown-fuse span::after{content:"";position:absolute;right:-3px;top:-3px;width:8px;height:8px;border-radius:50%;background:#ffb060;box-shadow:0 0 10px 3px #ff8a3a99,0 0 22px 6px #c43f1c55;animation:ember 1.6s ease-in-out infinite alternate}
@keyframes ember{from{opacity:.75;transform:scale(.9)}to{opacity:1;transform:scale(1.15)}}
.countdown.soon .digits{color:#ffd9a8;text-shadow:0 2px 0 var(--gold-shadow),0 0 22px #ff9a4a77}
.countdown.soon .countdown-label{color:var(--gold)}
.countdown-open{font-family:var(--f-display);font-size:1.5rem;color:var(--gold-hi);letter-spacing:.06em}
@media (max-width:560px){.countdown .slot{min-width:54px;padding:0 6px}.countdown .digits{font-size:1.8rem}}
@media (max-width:760px){.hero-art::before,.hero-art.video::before{background:linear-gradient(180deg,#120d0a99 0,#120d0a70 28%,#120d0ab0 55%,var(--leather) 100%),linear-gradient(90deg,#120d0a80,#120d0a30)}}
.hero-season{margin-top:14px;color:var(--bone-dim);font-family:var(--f-ui);font-size:.95rem}
.scroll-hint{position:absolute;left:50%;bottom:22px;width:22px;height:34px;border:1px solid #e2b24a88;border-radius:12px;transform:translateX(-50%)}
.scroll-hint::after{content:"";position:absolute;left:50%;top:6px;width:3px;height:7px;margin-left:-1.5px;border-radius:2px;background:var(--gold);animation:wheel 1.8s ease-in-out infinite}
@keyframes wheel{0%{transform:translateY(0);opacity:1}70%{transform:translateY(12px);opacity:0}100%{opacity:0}}

/* Sections */
.band{padding:104px 0;position:relative}
/* Séparateur entre deux bandes : crâne de kodo et défenses (généré, détouré), posé à cheval sur la jointure. */
.band::before{content:"";position:absolute;left:50%;top:0;transform:translate(-50%,-50%);width:min(460px,72vw);aspect-ratio:1115/233;background:url(/site/assets/divider-bone.webp?v=03b23d761c) center/contain no-repeat;pointer-events:none;z-index:2;filter:drop-shadow(0 10px 14px #000c)}
.band:not(.ornament):not(.edge-iron):not(.edge-gold)::before{content:none}
/* Variantes d'ornement : liane à masques trolls (section Bannières) à la place du crâne. */
/* Séparateurs (11 oct., arbitrage de Jeremy) : deux « à caractère » posés sur la jointure (crâne de kodo par défaut,
   filet de bronze à défenses en .bronze) et deux « discrets » pleine largeur fournis par Jeremy (bande de fer rivetée
   .edge-iron, liseré d'or .edge-gold, qui soulignent le bord haut d'une section ; .edge-gold.both souligne aussi le bas). */
.band.edge-iron::before,.band.edge-gold::before,.edge-line{content:"";position:absolute;left:0;right:0;top:0;width:auto;aspect-ratio:auto;height:16px;transform:translateY(-50%);background:url(/site/assets/edge-iron.png?v=a7ffdf7cff) center top/auto 16px repeat-x;pointer-events:none;z-index:2;filter:drop-shadow(0 4px 6px #000c)}
.band.edge-gold::before,.edge-line.gold{height:6px;background:url(/site/assets/edge-gold.png?v=2641355e48) center top/auto 6px repeat-x;filter:drop-shadow(0 0 6px #e2b24a66)}
.edge-line{display:block}
.edge-line.bottom{top:auto;bottom:0;transform:translateY(50%)}
/* Les bandes sans ornement gardent un simple filet d'or en haut. */
.band:not(.ornament):not(.first):not(.quote):not(.join):not(.edge-iron):not(.edge-gold){border-top:1px solid #7a541744}
/* Textures de fond, toutes sous un voile pour garder le texte lisible : cuir (défaut), terre de Durotar, planches orques. */
.band.leather{background:linear-gradient(180deg,#120d0a 0,#120d0a00 90px,#120d0a00 calc(100% - 90px),#120d0a 100%)}
.band.earth{background:linear-gradient(180deg,#120d0a 0,#120d0aa8 120px,#120d0aa8 calc(100% - 120px),#120d0a 100%),url(/site/assets/tex-earth.jpg) center/768px auto repeat;box-shadow:inset 0 1px 0 #7a541744,inset 0 -1px 0 #7a541744}
/* Parchemin sombre : la texture papier du site officiel (tools/keyart/web), assombrie - fond des sections Bannières et Actualités. */
.band.paper{background:linear-gradient(180deg,#120d0a 0,#120d0a66 110px,#120d0a66 calc(100% - 110px),#120d0a 100%),url(/site/assets/paper-dark.jpg?v=aefc52066d) center/1200px auto repeat;box-shadow:inset 0 1px 0 #7a541744,inset 0 -1px 0 #7a541744}
.band.hide{background:linear-gradient(180deg,#120d0a 0,#120d0aa6 120px,#120d0aa6 calc(100% - 120px),#120d0a 100%),url(/site/assets/tex-hide.jpg?v=c4556c0999) center/768px auto repeat;box-shadow:inset 0 1px 0 #7a541744,inset 0 -1px 0 #7a541744}
/* Objet en relief posé sur la bande « Ça arrive » (bureau seulement). */
.prop{position:absolute;pointer-events:none;filter:drop-shadow(0 18px 24px #000d)}
.prop-totem{right:max(12px,calc(50% - 720px));bottom:20px;width:min(300px,22vw);height:auto;z-index:1;display:none}
@media (min-width:1000px){.prop-totem{display:block}}
.band.alt{background:linear-gradient(180deg,#0f0a07cc,#120d0acc)}
/* Bande « credo » : la foule devant la banque en plein cadre, fixe au défilement (parallaxe douce), une seule phrase énorme. */
/* overflow:hidden : la parallaxe (top:-22 %, height:144 %) débordait sur les cartes de la section précédente (Jeremy, 17 oct.). */
.band.quote{padding:150px 0;overflow:hidden;border:0;background:#120d0a}
.band.quote .parallax{overflow:hidden}
.band.quote .parallax{position:absolute;left:0;right:0;top:-22%;height:144%;background:url(/site/assets/card-rally.jpg?v=b0d2d99aec) center 45%/cover no-repeat;filter:brightness(.7) saturate(1.05)}
/* Parallaxe (25 oct.) : le JS la recalculait à chaque image avec un temps de retard, d'où l'effet de rebond au défilement.
   Elle est maintenant liée au défilement par le navigateur lui-même ; sans prise en charge, l'image reste fixe. */
@supports (animation-timeline: view()){
  .band.quote .parallax{animation:credo-drift linear both;animation-timeline:view();will-change:transform}
  @keyframes credo-drift{from{transform:translate3d(0,-11%,0)}to{transform:translate3d(0,11%,0)}}
}
@media (prefers-reduced-motion:reduce){.band.quote .parallax{animation:none}}
.band.quote::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,#120d0ad0,#120d0a66 40%,#120d0a66 60%,#120d0ad0),linear-gradient(180deg,#120d0a 0,#120d0a00 22%,#120d0a00 78%,#120d0a 100%);pointer-events:none}
.band.quote .wrap{position:relative;z-index:1}
.quote-line{font-family:var(--f-display);font-size:clamp(3rem,8vw,6.5rem);line-height:1;margin:0 0 .25em;background:linear-gradient(180deg,#fff2c8 0%,#f2a640 50%,#c9641d 100%);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;filter:drop-shadow(0 3px 0 #2a1004) drop-shadow(0 8px 30px #000d)}
.quote-sub{font-family:var(--f-caps);font-weight:600;font-size:clamp(.95rem,1.7vw,1.3rem);letter-spacing:.22em;text-transform:uppercase;color:var(--bone);text-shadow:0 1px 2px #000,0 0 18px #000a;margin:0}
.more{margin-top:1.4em}
.cards{display:grid;gap:22px;margin-top:1.6em}
.cards.three{grid-template-columns:repeat(3,1fr)}
.cards.two{grid-template-columns:repeat(2,1fr)}
.card{position:relative;background:url(/site/assets/grain.png?v=0101358cdf),linear-gradient(180deg,#1b120cf2,#120b07f4);background-blend-mode:soft-light,normal;border:1px solid #7a541766;box-shadow:inset 0 1px 0 #ffe6b018,inset 0 0 0 1px #0008,0 18px 40px -22px #000,0 2px 6px #0008;padding:30px 30px 26px;transition:transform .5s cubic-bezier(.2,.8,.2,1),box-shadow .5s}
.card:hover{transform:translateY(-4px);box-shadow:inset 0 1px 0 #ffe6b022,inset 0 0 0 1px #0008,0 26px 50px -24px #000,0 0 0 1px #c9a46a33,0 0 24px #e2b24a1f}
.card::before{content:none}
.card.ember-edge h3{color:var(--ember-hi)}
.card h3,.panel h3{font-family:var(--f-display);font-size:1.45rem;letter-spacing:.01em;text-transform:none;color:#f2a640;text-shadow:0 1px 0 #3b1a06,0 0 14px #f2a64033}
/* Cartes avec image en tête (site officiel : photo en haut, texte dessous) ; l'image fond dans la carte par un masque. */
.card.media{padding-top:0;overflow:hidden}
.card.media .head{display:block;width:calc(100% + 60px);max-width:none;height:auto;margin:0 -30px 18px;aspect-ratio:16/9;object-fit:cover;filter:saturate(1.02);-webkit-mask-image:linear-gradient(180deg,#000 62%,transparent 100%);mask-image:linear-gradient(180deg,#000 62%,transparent 100%);transition:transform .9s cubic-bezier(.2,.8,.2,1)}
.card.media:hover .head{transform:scale(1.04)}
/* Bandeau « Rejoindre » : la porte d'Orgrimmar (capture) sous un voile, texte centré par-dessus. */
.band.join{background:linear-gradient(180deg,#120d0a 0,#120d0a99 18%,#120d0a80 55%,#120d0a 100%),url(/site/assets/band-join.jpg?v=f513ada957) center 60%/cover no-repeat;padding:150px 0 130px}
.band.join .countdown{margin:10px auto 26px;padding:18px 34px 16px;border-color:#e2b24a66;background:linear-gradient(180deg,#0b0604e6,#07030299);box-shadow:0 20px 50px -20px #000,0 0 0 1px #0008}
.band.join .countdown .digits{font-size:3.4rem}
.band.join .countdown .slot{min-width:92px;padding:0 14px}
.band.join .countdown .unit{font-size:.7rem}
.band.join .countdown-label{font-size:.82rem}
.band.join .countdown-fuse{width:100%;margin-top:8px}
@media (max-width:560px){.band.join .countdown .digits{font-size:2.2rem}.band.join .countdown .slot{min-width:64px;padding:0 8px}}
.band.join::before{content:"";height:6px;background:url(/site/assets/edge-gold.png?v=2641355e48) center top/auto 6px repeat-x;transform:translateY(-50%);width:100%;left:0;aspect-ratio:auto;filter:drop-shadow(0 0 6px #e2b24a66)}
.band.join .wrap{position:relative}
.card.tall{padding-bottom:26px}
.ex{color:var(--bone-dim);font-style:italic;font-size:.95rem;margin:0}
.notice{margin-top:28px;padding:18px 22px;border-left:3px solid var(--ember);background:#1a100acc;font-size:1rem}
.notice p{margin:0}
.list{list-style:none;padding:0;margin:1.2em 0}
.list li{padding:10px 0 10px 26px;position:relative;border-top:1px solid #6b4e2a33}
.list li::before{content:"";position:absolute;left:4px;top:19px;width:8px;height:8px;transform:rotate(45deg);background:var(--gold);box-shadow:0 0 8px #e2b24a66}
.list.compact li{padding:7px 0 7px 26px}
.list.compact li::before{top:15px}
.panel{position:relative;background:url(/site/assets/grain.png?v=0101358cdf),linear-gradient(180deg,#1b120cf2,#120b07f4);background-blend-mode:soft-light,normal;border:1px solid #6b4e2a66;box-shadow:inset 0 1px 0 #ffe6b012,0 10px 30px -18px #000;padding:30px 32px}
.panel.corner::after{content:"";position:absolute;left:8px;bottom:8px;width:84px;height:84px;background:url(/site/assets/corner-bl.png?v=86ae21906d) left bottom/contain no-repeat;pointer-events:none;opacity:.9}
/* Panneau « totem » : équerre de bois à crâne et plumes (générée, détourée) accrochée au coin supérieur gauche, un seul ornement par panneau. */
.panel.totem{border-color:#7a541766;box-shadow:inset 0 1px 0 #ffe6b018,inset 0 0 0 1px #0008,0 18px 40px -22px #000,0 2px 6px #0008}
.panel.totem::before{content:"";position:absolute;left:-22px;top:-26px;width:150px;height:138px;background:url(/site/assets/corner-totem.webp?v=db911e5aa1) left top/contain no-repeat;pointer-events:none;filter:drop-shadow(0 6px 8px #000c);z-index:2}
.panel.totem>:nth-child(-n+2):not(p:not(.overline)){margin-left:44px}
.standings{list-style:none;margin:0;padding:0;counter-reset:rank}
.standings li{display:grid;grid-template-columns:34px 1fr auto;align-items:center;gap:12px;padding:10px 0;border-top:1px solid #6b4e2a33;font-family:var(--f-ui)}
.standings li:first-child{border-top:0}
.standings li.row::before{counter-increment:rank;content:counter(rank);font-family:var(--f-caps);font-weight:800;color:var(--gold);text-align:center}
.standings li.row:nth-child(1)::before{color:var(--gold-hi);text-shadow:0 0 10px #e2b24a88}
.standings .pts{font-family:var(--f-caps);font-weight:600;color:var(--gold-hi)}
.standings .mem{color:var(--bone-dim);font-size:.85rem;margin-left:8px}



/* Actualités */
.news{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.news article{position:relative;background:url(/site/assets/grain.png?v=0101358cdf),linear-gradient(180deg,#1b120cf2,#120b07f4);background-blend-mode:soft-light,normal;border:1px solid #6b4e2a66;box-shadow:inset 0 1px 0 #ffe6b012,0 10px 30px -18px #000;display:flex;flex-direction:column}
.news img{aspect-ratio:16/9;object-fit:cover;width:calc(100% + 24px);margin:-14px -12px 0}
.news .body{padding:18px 20px 16px}
.news .kind{font-family:var(--f-caps);font-size:.7rem;letter-spacing:.2em;text-transform:uppercase;color:var(--gold);margin:0 0 .4em}
.news h3{text-transform:none;letter-spacing:0;font-family:var(--f-body);font-weight:600;font-size:1.15rem;color:var(--gold-hi)}
.news p{font-size:.98rem;margin:0}
.news time{display:block;margin-top:10px;color:var(--bone-dim);font-size:.85rem;font-family:var(--f-ui)}

/* Companion */
.shot{border:1px solid #6b4e2a66;box-shadow:0 20px 50px -20px #000;background:#000}.shot img{display:block;width:100%;height:auto}


/* Communauté (11 oct.) : carte d'encre bronze qui défile lentement derrière, carte Discord, réseaux, liens. */
.band.community{padding:64px 0 34px;overflow:hidden;background:#0b0806}
.band.community::before{content:"";position:absolute;left:0;right:0;top:0;height:16px;background:url(/site/assets/edge-iron.png?v=a7ffdf7cff) center top/auto 16px repeat-x;z-index:2;transform:none;width:auto;aspect-ratio:auto;filter:drop-shadow(0 4px 6px #000c)}
/* Carte zoomée (2 000 px de large), dérive lente, voile sombre : on la devine, on ne la lit pas (epsilonwow). */
.band.community .map{position:absolute;inset:0;background:url(/site/assets/map-footer.jpg?v=60d3f65aa6) 0 40%/2000px auto repeat-x;opacity:.75;filter:saturate(.8);animation:map-scroll 180s linear infinite}
.band.community .map::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,#0b0806 0,#0b080666 25%,#0b080666 75%,#0b0806 100%)}
@keyframes map-scroll{from{background-position:0 40%}to{background-position:-2000px 40%}}
.band.community .wrap{position:relative;z-index:1}
.band.community h2{margin-bottom:.7em;font-size:clamp(1.6rem,3vw,2.3rem)}
.discord-card{display:inline-flex;align-items:stretch;text-decoration:none;color:var(--bone);background:url(/site/assets/grain.png?v=0101358cdf),linear-gradient(180deg,#1b120cf2,#120b07f4);background-blend-mode:soft-light,normal;border:1px solid #7a541799;box-shadow:inset 0 1px 0 #ffe6b018,0 18px 40px -22px #000,0 2px 6px #0008;border-radius:2px;overflow:hidden;transition:transform .3s,box-shadow .3s}
.discord-card:hover{transform:translateY(-2px);box-shadow:inset 0 1px 0 #ffe6b022,0 24px 50px -24px #000,0 0 0 1px #c9a46a33,0 0 24px #e2b24a1f}
.discord-card img{width:48px;height:48px;margin:12px 0 12px 16px;filter:drop-shadow(0 2px 4px #000c)}
.dc-text{display:flex;flex-direction:column;justify-content:center;text-align:left;padding:0 26px 0 14px;min-width:170px}
.dc-text b{font-family:var(--f-display);font-size:1.25rem;letter-spacing:.04em;color:var(--gold-hi)}
.dc-text small{font-family:var(--f-ui);font-size:.85rem;color:var(--bone-dim);margin-top:2px}
.dc-text small em{font-style:normal;color:#8fbf5a}
.dc-btn{display:flex;align-items:center;gap:10px;padding:0 22px;font-family:var(--f-caps);font-weight:700;font-size:.9rem;letter-spacing:.16em;text-transform:uppercase;color:#fff0d6;background:url(/site/assets/grain.png?v=0101358cdf),linear-gradient(180deg,#b23a1e 0%,#8f2412 40%,#5f130a 100%);background-blend-mode:soft-light,normal;border-left:1px solid #4a0d06;text-shadow:0 1px 0 #3a0a04}
.dc-btn i{font-style:normal;font-size:1.3rem;line-height:1;opacity:.8}
.social{display:flex;justify-content:center;gap:24px;margin:16px 0 18px}
.social a{color:var(--bone-dim);transition:color .2s,transform .2s}
.social a:hover{color:var(--gold-hi);transform:translateY(-2px)}
.community-links{display:flex;justify-content:center;align-items:center;gap:16px;font-family:var(--f-caps);font-weight:600;font-size:.85rem;letter-spacing:.14em;text-transform:uppercase;margin:0}
.community-links a{color:var(--bone);text-decoration:none}
.community-links a:hover{color:var(--gold-hi)}
.community-links span{color:#7a5417}
.credits{margin:26px 0 8px;font-family:var(--f-ui);font-size:.82rem;color:#a08a5c;line-height:1.5}
.legal{margin:0;font-family:var(--f-ui);font-size:.72rem;color:#6f6250;max-width:70ch;margin-inline:auto}
@media (max-width:560px){.discord-card{flex-direction:column;align-items:center;width:100%}.discord-card img{margin:16px 0 0}.dc-text{text-align:center;padding:10px 16px 14px}.dc-btn{justify-content:center;padding:14px;border-left:0;border-top:1px solid #4a0d06}.community-links{flex-wrap:wrap;gap:10px}}


/* Pied de page des sous-pages (la page d'accueil porte ses crédits dans le bloc communauté). */
.foot{padding:26px 0 30px;border-top:1px solid #6b4e2a55;background:#070402;font-family:var(--f-ui);font-size:.82rem;color:var(--bone-dim)}
.foot .wrap{display:grid;justify-items:center;text-align:center;gap:8px}
.foot p{margin:0}
.foot-links a{color:var(--gold)}

/* Apparitions au défilement */
.reveal{opacity:0;transform:translateY(16px);transition:opacity .7s ease,transform .7s ease}
.reveal.in{opacity:1;transform:none}
.reveal:nth-child(2){transition-delay:.08s}.reveal:nth-child(3){transition-delay:.16s}.reveal:nth-child(4){transition-delay:.24s}.reveal:nth-child(5){transition-delay:.32s}.reveal:nth-child(6){transition-delay:.4s}.reveal:nth-child(7){transition-delay:.48s}

@media (max-width:980px){
  .wrap.two{grid-template-columns:1fr;gap:36px}
  .cards.three{grid-template-columns:1fr}
  .cards.two{grid-template-columns:1fr}
  .news{grid-template-columns:1fr}
  .menu{display:none;position:absolute;left:0;right:0;top:100%;flex-direction:column;gap:0;background:#0a0604f4;border-bottom:1px solid #6b4e2a}
  .menu a{padding:14px 28px;border-bottom:1px solid #6b4e2a33}
  .top.open .menu{display:flex}
  .burger{display:block}
  .top-tools .btn{display:none}
  .band{padding:64px 0}
  .shot{transform:none}
}

/* Page des bannières */
.subpage .band.first{padding-top:60px}
.banner-card{display:block;color:inherit;text-decoration:none;border-left:3px solid var(--bcolor,#c43f1c);transition:transform .15s,box-shadow .15s}
.banner-card:hover{transform:translateY(-2px);box-shadow:inset 0 1px 0 #ffe6b012,0 0 0 1px #c9a46a33,0 14px 30px -16px #000}
.banner-card-head{display:flex;gap:16px;align-items:center}
.banner-card-head img{width:72px;height:72px;object-fit:cover;border:1px solid #6b4e2a66}
.banner-card-head img.flag{width:72px;height:96px;aspect-ratio:3/4}
#bEmblem{width:120px;height:160px;object-fit:cover;border:1px solid #6b4e2a66}
.banner-card h3{margin:0 0 4px}
.banner-head{display:flex;gap:24px;align-items:center;margin-bottom:24px}
.banner-head img{width:128px;height:128px;object-fit:cover;border:1px solid #6b4e2a66}
.banner-head h2{margin:0}
.lore{white-space:pre-wrap}
.charter{display:grid;grid-template-columns:max-content 1fr;gap:6px 16px;margin:0}
.charter dt{color:var(--gold);font-family:var(--f-ui);font-size:.9rem}
.charter dd{margin:0}
.roster,.chronicle{list-style:none;margin:0 0 20px;padding:0}
.roster li,.chronicle li{padding:7px 0;border-top:1px solid #6b4e2a33;font-size:.98rem}
.roster li:first-child,.chronicle li:first-child{border-top:0}
.chronicle time{color:var(--bone-dim);font-family:var(--f-ui);font-size:.85rem;margin-right:8px}
.small{font-size:.88rem}
@media (max-width:980px){.banner-head{flex-direction:column;align-items:flex-start}}
[hidden]{display:none!important}

/* Préchargeur (11 oct.) : la porte d'Orgrimmar fermée (deux vantaux raster, tools/keyart/site-loader.py), lente poussée
   de caméra, lueur de torche qui vacille, oriflamme accrochée à la couture qui se consume de bas en haut au rythme du
   chargement (--p), flammes et braises sur canvas ; à 100 % la couture s'embrase et les vantaux pivotent vers le visiteur,
   révélant le héros déjà en place dessous. Retiré par app.js (« loader »). */
#loader{position:fixed;inset:0;z-index:200;overflow:hidden;background:#0b0705;--p:0;transition:background .3s}
#loader.opening{background:transparent}
.gate-scene{position:absolute;inset:0;perspective:1400px;transform:scale(1);animation:gate-push 6s ease-out forwards}
@keyframes gate-push{from{transform:scale(1)}to{transform:scale(1.045)}}
.leaf{position:absolute;top:0;bottom:0;width:50.4%;overflow:hidden;background:#2a1a10 linear-gradient(90deg,#1c110b,#33211400 12%,#33211400 88%,#1c110b);transform-style:preserve-3d;backface-visibility:hidden;box-shadow:0 0 80px #000}
.leaf img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.leaf.left{left:0;transform-origin:left center}.leaf.left img{object-position:right center}
.leaf.right{right:0;transform-origin:right center}.leaf.right img{object-position:left center}
.leaf::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,#000a 0,#0000 20%,#0000 70%,#000c 100%);pointer-events:none}
.leaf.left::after{background:linear-gradient(90deg,#0000 calc(100% - 160px),#000c 100%),linear-gradient(180deg,#000a 0,#0000 20%,#0000 70%,#000c 100%)}
.leaf.right::after{background:linear-gradient(270deg,#0000 calc(100% - 160px),#000c 100%),linear-gradient(180deg,#000a 0,#0000 20%,#0000 70%,#000c 100%)}
/* Couture : un fil de lumière chaude entre les vantaux, qui s'élargit à l'ouverture. */
.seam{position:absolute;left:50%;top:0;bottom:0;width:3px;transform:translateX(-50%);background:linear-gradient(180deg,#ffb86a00,#ffb86acc 30%,#ffd9a0 50%,#ffb86acc 70%,#ffb86a00);opacity:.18;filter:blur(1px);box-shadow:0 0 18px #ff9a4a66;transition:opacity .5s}
.torchlight{position:absolute;inset:0;pointer-events:none;mix-blend-mode:screen;background:radial-gradient(55% 70% at 22% 100%,#ff9a3a3a,transparent 70%),radial-gradient(40% 50% at 80% 10%,#4a6a9a22,transparent 70%);animation:torch 2.4s ease-in-out infinite alternate}
@keyframes torch{from{opacity:.75;transform:scale(1)}50%{opacity:1}to{opacity:.85;transform:scale(1.04)}}
/* Oriflamme : pendue à la couture, balancement lent depuis la traverse ; le bas se consume (clip-path lié à --p). */
.pennant{position:absolute;left:50%;top:3vh;width:min(300px,24vw);transform:translateX(-50%);transform-origin:50% 8px;animation:sway 3.6s ease-in-out infinite alternate;filter:drop-shadow(0 14px 18px #000d)}
/* Le tissu se consume de bas en haut : masque à bord mou (24 px de braise) lié à --p ; la lueur suit la ligne. */
/* Oriflamme v2 (24 oct.) : la flamme peinte sur l'étoffe s'allume de bas en haut au rythme du chargement (--p) ; la
   couche allumée (pennant-flame.webp) est posée sur la flamme éteinte, positions données par tools/keyart/site-loader-v2.py. */
.pennant img{display:block;width:100%;height:auto}
/* Halo sur le conteneur, masque sur l'image : un halo posé sur l'élément masqué serait coupé net au bord de l'image. */
.pennant .lit{position:absolute;left:37.06%;top:35.09%;width:24.9%;filter:drop-shadow(0 0 4px #ffb05a) drop-shadow(0 0 14px #e0641ecc)}
.pennant .lit img{-webkit-mask-image:linear-gradient(to top,#000 calc(var(--p) * 100%),transparent calc(var(--p) * 100% + 10px));mask-image:linear-gradient(to top,#000 calc(var(--p) * 100%),transparent calc(var(--p) * 100% + 10px))}
@keyframes sway{from{transform:translateX(-50%) rotate(-1.6deg)}to{transform:translateX(-50%) rotate(1.4deg)}}
#loaderFire{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
/* Texte : titre, barre de fer à braise, état et pourcentage. */
.loader-ui{position:absolute;left:50%;bottom:8vh;z-index:3;transform:translateX(-50%);width:min(520px,86vw);display:flex;flex-direction:column;align-items:center;gap:14px;text-align:center}
/* Bas de la porte assombri sous la ligne d'étape et la barre (lisibles sur le fer et les pointes). */
#loader::after{content:"";position:absolute;left:0;right:0;bottom:0;height:32vh;background:linear-gradient(180deg,#0000,#0b0705cc 70%,#0b0705);pointer-events:none;transition:opacity .4s}
#loader.opening::after{opacity:0}
.loader-bar{width:100%;height:8px;background:#0a0604;border:1px solid #6b4e2a;box-shadow:inset 0 2px 4px #000,0 1px 0 #ffe6b012;position:relative;overflow:hidden}
.loader-bar span{display:block;height:100%;width:0;background:linear-gradient(90deg,#7a3a12,#e2b24a 60%,#ffd27a);box-shadow:0 0 14px #ff9a4a99;transition:width .25s linear;position:relative}
.loader-bar span::after{content:"";position:absolute;right:-5px;top:-4px;width:14px;height:16px;border-radius:50%;background:#ffd9a8;filter:blur(3px);animation:ember 1.1s ease-in-out infinite alternate}
.loader-status{margin:0;font-family:var(--f-caps);font-weight:600;font-size:.82rem;letter-spacing:.2em;text-transform:uppercase;color:var(--bone);text-shadow:0 1px 2px #000,0 0 12px #000,0 0 26px #000;min-height:1.3em;transition:opacity .25s}
.loader-status.swap{opacity:0}
/* Ouverture (17 oct., référence : écran titre de Warcraft 3 Reforged, D:\Videos Youtube\portes warcraft 3.mp4) : les
   vantaux ne pivotent pas, ils COULISSENT vers les côtés, d'un coup (≈ 0,9 s, départ lent puis franc), en laissant
   une poussière retomber de la traverse ; la couture s'embrase juste avant, le texte s'efface, l'oriflamme s'envole. */
/* La couture s'embrase un instant puis s'éteint pendant que les vantaux partent : pas de trait au milieu du héros. */
#loader.opening .seam{opacity:0;width:6px;transition:opacity .35s ease-in .3s,width .3s}
#loader.opening #loaderFire{opacity:0;transition:opacity .5s .4s}
#loader.opening .leaf{transition:transform .95s cubic-bezier(.75,0,.25,1) .16s}
#loader.opening .leaf.left{transform:translateX(-104%)}
#loader.opening .leaf.right{transform:translateX(104%)}
#loader.opening .gate-scene{animation:none;transform:scale(1.045)}
#loader.opening .gate-scene{animation:gate-thud .5s ease-out}
/* Ouverture lourde, avec le son (porte.ogg, 24 oct.) : 0,05 s le loquet saute, jusqu'à 0,85 s les vantaux forcent sans
   s'ouvrir, puis ils glissent de plus en plus vite, s'arrêtent net à 3,5 s sur le coup sourd (léger rebond) ; la scène
   tremble à l'arrêt. Les instants viennent de l'analyse du fichier (attaques à 0,05, 0,85, 1,7, 2,4 et 3,5 s). */
#loader.opening.heavy .leaf{transition:none;animation-duration:3.9s;animation-timing-function:linear;animation-fill-mode:forwards}
#loader.opening.heavy .leaf.left{animation-name:leaf-left}
#loader.opening.heavy .leaf.right{animation-name:leaf-right}
#loader.opening.heavy .gate-scene{animation:gate-thud .5s ease-out 3.5s both}
@keyframes leaf-left{0%{transform:translateX(0)}1.3%{transform:translateX(-.8%)}4%{transform:translateX(-.3%)}21.8%{transform:translateX(-1.6%);animation-timing-function:cubic-bezier(.45,0,.9,.6)}89.7%{transform:translateX(-106%);animation-timing-function:ease-out}95%{transform:translateX(-103%)}100%{transform:translateX(-104%)}}
@keyframes leaf-right{0%{transform:translateX(0)}1.3%{transform:translateX(.8%)}4%{transform:translateX(.3%)}21.8%{transform:translateX(1.6%);animation-timing-function:cubic-bezier(.45,0,.9,.6)}89.7%{transform:translateX(106%);animation-timing-function:ease-out}95%{transform:translateX(103%)}100%{transform:translateX(104%)}}
@keyframes gate-thud{0%{transform:scale(1.045) translateY(0)}30%{transform:scale(1.045) translateY(4px)}100%{transform:scale(1.045) translateY(0)}}
/* Porte déjà ouverte dans cette session (navigation interne) : pas de rejeu, la page apparaît directement. */
html.gate-seen #loader{display:none}
#loader.opening .loader-ui{opacity:0;transform:translate(-50%,20px);transition:opacity .4s,transform .5s}
#loader.opening .pennant{animation:none;transform:translate(-50%,-120%) rotate(0);opacity:0;transition:transform .8s ease-in .1s,opacity .6s .2s}
#loader.opening .torchlight{opacity:0;transition:opacity .8s}
#loader.done{opacity:0;visibility:hidden;pointer-events:none;transition:opacity .4s,visibility .4s}
html.loading{overflow:hidden}
html.loading .hero-inner .reveal{transition:none}
@media (max-width:760px){.pennant{width:min(180px,44vw)}.loader-ui{bottom:7vh}.loader-status{font-size:.74rem;letter-spacing:.16em}.leaf.left::after,.leaf.right::after{background:linear-gradient(180deg,#000a 0,#0000 20%,#0000 70%,#000c 100%)}}
/* Bannières en formation (16 oct.) : jauge de quorum sur les cartes, appel à lever ou rejoindre. */
.forming-card{border-left-style:dashed}
.quorum{height:6px;margin:14px 0 10px;background:#0b0704;border:1px solid #7a541755;border-radius:3px;overflow:hidden}
.quorum i{display:block;height:100%;background:linear-gradient(90deg,var(--gold-lo),var(--gold),var(--gold-hi));box-shadow:0 0 10px #e2b24a66;transition:width .6s cubic-bezier(.2,.8,.2,1)}
#forming .actions{margin:28px 0 0;text-align:center}
.roster .btn{margin-top:10px}

/* Son (17 oct.) : bouton haut-parleur dans le préchargeur et l'en-tête. Éteint par défaut (les navigateurs n'autorisent
   le son qu'après un geste) ; allumé, il bat doucement pour qu'on sache où l'éteindre. Porte : bruit de vantaux qui
   coulissent (bois qui craque + pierre qui roule, Epidemic Sound), joué sur la couture qui s'embrase. */
.sound{display:inline-flex;align-items:center;gap:8px;padding:6px 12px;min-height:34px;border:1px solid #6a4a22;border-radius:2px;background:#0a0604cc;color:var(--bone-dim);font-family:var(--f-caps);font-weight:600;font-size:.72rem;letter-spacing:.16em;text-transform:uppercase;cursor:pointer;position:relative}
.sound .wave{opacity:.35;transition:opacity .3s}
.sound[aria-pressed="true"]{color:var(--gold);border-color:#a07a30}
.sound[aria-pressed="true"] .wave{opacity:1}
.sound[aria-pressed="true"]::before{content:"";position:absolute;inset:-4px;border:1px solid #e2b24a88;border-radius:4px;animation:sound-beat 1.6s ease-out infinite;pointer-events:none}
@keyframes sound-beat{0%{opacity:.9;transform:scale(1)}100%{opacity:0;transform:scale(1.18)}}
.top .sound{padding:6px 9px;margin-right:4px}
.loader-ui .sound{margin-top:6px}
#loader.opening .sound{opacity:0;transition:opacity .3s}

/* Porte (24 oct.) : à 100 %, deux choix. Le clic est le geste qui autorise le son ; « Ouvrir la porte » lance le bruit
   des vantaux et la musique, « Entrer en silence » ouvre sans rien. */
.gate-choice{display:flex;flex-direction:column;align-items:center;gap:10px;margin-top:8px;opacity:0;transform:translateY(8px);transition:opacity .35s ease-out,transform .35s ease-out}
.gate-choice.in{opacity:1;transform:none}
.gate-choice .btn{min-width:260px}
.gate-choice .btn:focus-visible,.gate-quiet:focus-visible{outline:2px solid var(--gold-hi);outline-offset:3px}
.gate-quiet{background:none;border:0;color:var(--bone-dim);font-family:var(--f-caps);font-weight:600;font-size:.74rem;letter-spacing:.18em;text-transform:uppercase;cursor:pointer;padding:8px 12px;text-shadow:0 1px 2px #000}
.gate-quiet:hover{color:var(--bone)}
.gate-hint{margin:0;font-family:var(--f-ui);font-size:.82rem;color:var(--bone-dim);text-shadow:0 1px 2px #000}
#loader.opening .gate-choice{opacity:0;transition:opacity .25s}
/* Haut-parleur d'or de l'en-tête : musique coupée → halo d'or qui bat doucement (il demande à être cliqué) ;
   allumée → or plein, sans pulsation. Sans animation si l'utilisateur les a coupées : halo fixe. */
.top .sound{color:var(--gold);border-color:#a07a30}
.top .sound.calling::before{content:"";position:absolute;inset:-4px;border:1px solid #e2b24a99;border-radius:4px;box-shadow:0 0 12px #e2b24a55;animation:sound-call 2.2s ease-out infinite;pointer-events:none}
.top .sound[aria-pressed="true"]{background:linear-gradient(180deg,#3a2608,#1c1205);box-shadow:inset 0 0 0 1px #e2b24a55,0 0 10px #e2b24a33}
.top .sound[aria-pressed="true"]::before{content:none}
@keyframes sound-call{0%{opacity:.95;transform:scale(1)}70%{opacity:0;transform:scale(1.22)}100%{opacity:0;transform:scale(1.22)}}
@media (prefers-reduced-motion:reduce){.top .sound.calling::before{animation:none;opacity:.8}.gate-choice{transition:none}}

/* Écusson de Bannière : l'emblème s'il existe, sinon un fanion à la couleur de la Bannière et son initiale. */
.crest{--size:32px;flex:none;display:inline-grid;place-items:center;width:var(--size);height:calc(var(--size) * 1.15);font-family:var(--f-display);font-size:calc(var(--size) * .5);line-height:1;color:#fff4dc;text-shadow:0 1px 1px #0009;background:linear-gradient(180deg,#ffffff30,#0000 40%,#0000004d),var(--bcolor);clip-path:polygon(0 0,100% 0,100% 78%,50% 100%,0 78%);padding-bottom:calc(var(--size) * .12);box-sizing:border-box;filter:drop-shadow(0 1px 0 #000)}
.crest.has-img{background:none;clip-path:none;height:var(--size);padding:0}
.crest.has-img img{width:100%;height:100%;object-fit:contain}
/* Aperçu des Bannières (section #bannieres). */
.banner-preview .crest-list{list-style:none;margin:14px 0 6px;padding:0;display:grid;grid-template-columns:1fr 1fr;gap:10px 18px}
.crest-item{display:flex;align-items:center;gap:12px;padding:8px 10px;border:1px solid #6b4e2a40;border-left:3px solid var(--bcolor);background:#0b07046e;color:var(--bone);text-decoration:none;transition:border-color .15s,background .15s}
a.crest-item:hover{background:#1b120ca8;border-color:#e2b24a66}
.crest-item b{display:block;font-family:var(--f-ui);font-weight:700;font-size:1rem;line-height:1.2}
.crest-item small{display:block;color:var(--bone-dim);font-family:var(--f-ui);font-size:.82rem;line-height:1.25;overflow:hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
.crest-list .forming .crest-item{border-left-style:dashed;opacity:.85}
.crest-list .forming .crest{filter:grayscale(.35) drop-shadow(0 1px 0 #000)}
@media (max-width:560px){.banner-preview .crest-list{grid-template-columns:1fr}}

/* Classement (24 oct., façon tableau de classement de jeu) : tables sombres, colonnes nettes, rangs à chiffres
   tabulaires, podium or / argent / bronze, liseré à la couleur de la Bannière. */
.band.board-band{background:linear-gradient(180deg,#120d0a 0,#0c0806 120px,#0c0806 calc(100% - 120px),#120d0a 100%)}
.board-head{display:flex;align-items:flex-end;justify-content:space-between;gap:24px;margin-bottom:26px;flex-wrap:wrap}
.board-head h2{margin-bottom:0}
.board-season{margin:0 0 .6em;font-family:var(--f-caps);font-weight:600;font-size:.78rem;letter-spacing:.18em;text-transform:uppercase;color:var(--gold);padding:8px 14px;border:1px solid #7a541766;background:#0b0704b0}
.board-grid{display:grid;grid-template-columns:1.45fr 1fr;gap:28px;align-items:start}
.board{background:linear-gradient(180deg,#15100cf2,#0b0806f5);border:1px solid #7a541766;box-shadow:inset 0 1px 0 #ffe6b014,0 18px 40px -24px #000;overflow-x:auto}
.board:focus-visible{outline:2px solid var(--gold);outline-offset:2px}
.board-title{margin:0;padding:14px 18px;font-family:var(--f-caps);font-weight:800;font-size:.86rem;letter-spacing:.22em;color:var(--gold-hi);border-bottom:1px solid #7a541766;background:linear-gradient(90deg,#2a1c0d,#15100c)}
.board-table{width:100%;border-collapse:collapse;font-family:var(--f-ui);font-size:.98rem;font-variant-numeric:tabular-nums}
.board-table thead th{padding:9px 12px;font-family:var(--f-caps);font-weight:600;font-size:.66rem;letter-spacing:.16em;text-transform:uppercase;color:var(--bone-dim);text-align:left;border-bottom:1px solid #7a541744;white-space:nowrap}
.board-table td,.board-table tbody th{padding:9px 12px;border-bottom:1px solid #ffffff0d;text-align:left;font-weight:400;white-space:nowrap}
.board-table tbody tr:nth-child(even){background:#ffffff05}
.board-table tbody tr:hover{background:#e2b24a0f}
.board-table .num{text-align:right}
.board-table .rk{width:44px;text-align:center;font-family:var(--f-ui);font-weight:700;font-size:1.05rem;color:var(--bone-dim)}
.board-table .pts{color:var(--gold-hi);font-weight:700}
.board-table .who{display:flex;align-items:center;gap:10px;min-width:0}
.board-table .who a,.board-table .who>span:last-child{color:var(--bone);text-decoration:none;font-weight:700;overflow:hidden;text-overflow:ellipsis}
.board-table .who a:hover{color:var(--gold-hi)}
.banners-table tbody tr{box-shadow:inset 3px 0 0 var(--bcolor)}
.board-table .week{color:#9fd17a}.board-table .week.neg{color:#e8603a}
.board-table .deaths{color:var(--bone-dim)}.board-table .deaths.has{color:#e8603a}
.board-table .chief{color:var(--bone-dim)}
.board-table .ban{display:inline-flex;align-items:center;gap:8px;color:var(--bone-dim)}
.board-table .cname{flex:none;font-weight:700;text-shadow:0 1px 1px #000}
.wow-ico{width:22px;height:22px;border:1px solid #000;border-radius:3px;box-shadow:0 0 0 1px #7a541766}
.board-table tr.top1 .rk{color:#ffd65a;text-shadow:0 0 10px #ffd65a66}
.board-table tr.top2 .rk{color:#d6dbe3}
.board-table tr.top3 .rk{color:#d08a4e}
.board-table tr.top1{background:linear-gradient(90deg,#e2b24a1c,#0000 70%)}
.board-table tr.empty td{padding:22px 18px;text-align:center;white-space:normal}
@media (max-width:980px){.board-grid{grid-template-columns:1fr}}
@media (max-width:640px){.board-table .opt{display:none}.board-table td,.board-table tbody th{padding:9px 8px}.board-table .rk{width:30px}}

/* Compagnon (24 oct.) : le launcher en grand, puis l'argument de la traduction à côté du rendu en jeu. */
.comp-head{max-width:760px;margin-bottom:28px}
.comp-shot{margin:0 0 56px}
.comp-shot img,.comp-ingame img{display:block;width:100%;height:auto}
.wrap-two{display:grid;grid-template-columns:1fr 1fr;gap:48px;align-items:end;margin-bottom:28px}
.babel-title{font-family:var(--f-display);font-size:1.6rem;letter-spacing:.01em;text-transform:none;color:#f2a640;text-shadow:0 1px 0 #3b1a06,0 0 14px #f2a64033;margin:.1em 0 .5em;line-height:1.2}
.comp-ingame{margin:0}
.comp-ingame figcaption{padding:10px 14px;background:#0b0704;border-top:1px solid #6b4e2a55}
@media (max-width:980px){.wrap-two{grid-template-columns:1fr;gap:20px}}
@media (max-width:640px){.board-table{font-size:.92rem}.board-table td,.board-table tbody th,.board-table thead th{padding:9px 6px}.banners-table .who a,.banners-table .who>span:last-child{max-width:40vw}.board-table .crest{--size:26px}}
/* Téléphone : la marque et les boutons de l'en-tête (haut-parleur, langue, menu) tiennent sur une ligne. */
@media (max-width:430px){.top{gap:10px;padding:10px 16px}.brand{gap:8px}.brand img{width:32px;height:32px}.brand span{font-size:1.02rem;letter-spacing:.04em}.top .sound{padding:6px 7px;margin-right:0}}

/* ===== Accueil v3 (24 oct., maquette validée par Jeremy : docs/design/site-v3/). Tout est préfixé body.home pour ne
   pas toucher la page des Bannières, qui partage cette feuille. Ornements générés (tools/keyart/site-v3.py) dans
   assets/v3 ; règle de Jeremy : jamais de séparateur posé sur un bord déchiré, chaque ornement repose sur un liseré d'or. */
/* En-tête : barre noire dès le haut de la page (Jeremy, 25 oct. : transparente sur le héros, « ça rend mal »). */
body.home .top{position:fixed;left:0;right:0;background:#0a0604ee;border-bottom:1px solid #6b4e2a66;backdrop-filter:blur(6px)}
/* Héros centré */
/* Plein écran (25 oct., Jeremy : on voyait le haut du bandeau du compte à rebours sous la vidéo) : le héros (sous
   l'en-tête fixe) remplit la fenêtre, liseré du bandeau compris (+4 px) ; le bandeau n'apparaît qu'au défilement. */
body.home .hero{min-height:max(calc(100svh + 4px),560px);border-bottom:0}
body.home .hero-art::before{background:radial-gradient(70% 65% at 50% 48%,#120d0a00,#120d0a66 65%,#120d0ac4),linear-gradient(180deg,#120d0a80 0,transparent 25%,transparent 60%,#120d0aa0 100%)}
body.home .hero-art.video::before{background:radial-gradient(70% 65% at 50% 48%,#120d0a33,#120d0a88 65%,#120d0ad0),linear-gradient(180deg,#120d0a80 0,transparent 25%,transparent 60%,#120d0aa0 100%)}
body.home .hero-inner{text-align:center;padding:130px 24px 100px}
body.home .hero-logo{margin:.15em auto .25em}
body.home .hero .lead{margin:0 auto}
body.home .hero .cta{justify-content:center}

/* Bandeau du compte à rebours : peau lacée générée, deux liserés d'or ; jamais de bord déchiré dessus */
.countband{position:relative;z-index:4;padding:34px 0 32px;background:#2a0f08 url(/site/assets/v3/bandeau-compte.jpg?v=db1ca3c650) center/100% 100% no-repeat;box-shadow:0 18px 30px -18px #000,0 -18px 30px -18px #000}
.countband::before,.countband::after{content:"";position:absolute;left:0;right:0;height:6px;background:url(/site/assets/edge-gold.png?v=2641355e48) center/auto 6px repeat-x;filter:drop-shadow(0 0 6px #e2b24a66)}
.countband::before{top:-3px}.countband::after{bottom:-3px}
.countband .wrap{display:flex;align-items:center;justify-content:center;gap:clamp(24px,6vw,80px)}
.cb-l{display:flex;align-items:center;gap:16px}
.cb-l b{white-space:nowrap}
@media (max-width:760px){.cb-l b{white-space:normal}}
.cb-l img{width:48px;height:48px;flex:none;filter:drop-shadow(0 0 12px #ff9a4a55)}
.cb-l b{display:block;font-family:var(--f-display);font-weight:400;font-size:1.35rem;line-height:1.2;color:#f2a640;text-shadow:0 1px 0 #3b1a06}
.cb-l span{display:block;font-family:var(--f-ui);font-size:.98rem;color:#f1e4c6;text-shadow:0 1px 2px #000}
.cb-l .season-line:empty{display:none}
.countband .countdown{margin:0;border:0;background:none;padding:0;backdrop-filter:none}
.countband .countdown::before{content:none}
.countband .countdown .digits{font-size:2.6rem}
.countband .countdown-label,.countband .countdown .unit{color:#e7d3a8}
.countband .countdown-fuse{width:100%}

/* Sections v3 */
body.home .v3{position:relative;padding:110px 0}
body.home .v3 .center{text-align:center}
body.home .v3 .center .intro{margin:0 auto}
.v3-sep{display:block;width:min(420px,80%);height:auto;margin:2px auto 22px}
/* Parchemin : cuir tanné généré, assombri pour que titres feu et texte os se lisent (8:1 et 13:1 mesurés) */
body.home .parch{z-index:2;background:#281a11 url(/site/assets/v3/parchemin-brun.jpg?v=193cfa4cff) left top/640px}
/* Bords v6 (25 oct.) : même déchirure, entailles profondes terminées en pointe (tools/keyart/bord-dechire.py), 87 px. */
body.home .parch::before,body.home .parch::after{content:"";position:absolute;left:0;right:0;height:87px;background:url(/site/assets/v3/bord-dechire-haut.webp?v=831d550dee) left top/1280px 87px repeat-x;z-index:3;pointer-events:none}
body.home .parch::before{top:-86px}
body.home .parch::after{bottom:-86px;background-image:url(/site/assets/v3/bord-dechire-bas.webp?v=6a8e62b5e3)}
body.home .parch.flat-top::before,body.home .parch.flat-bottom::after{content:none}
body.home .parch .intro,body.home .parch p{color:#f1e4c6}
body.home .parch .muted{color:#dcc9a4}
/* Image encadrée : fer sombre, liseré bronze, coins générés (équerre, lanière, défense) */
.framed{position:relative;margin:0;border:3px solid #2c2a2b;outline:1px solid #b0864a66;outline-offset:-4px;box-shadow:0 0 0 1px #000,0 22px 46px -22px #000;background:#000}
.framed>img{display:block;width:100%;height:100%;object-fit:cover}
.framed .c{position:absolute;width:58px;height:58px;background:url(/site/assets/v3/cadre-coin.webp?v=222154f28d) left top/contain no-repeat;z-index:3;pointer-events:none;filter:drop-shadow(0 2px 3px #000c)}
.c.tl{left:-12px;top:-12px}.c.tr{right:-12px;top:-12px;transform:scaleX(-1)}.c.bl{left:-12px;bottom:-12px;transform:scaleY(-1)}.c.br{right:-12px;bottom:-12px;transform:scale(-1)}
.card-t{font-family:var(--f-display);font-size:1.45rem;letter-spacing:.01em;text-transform:none;color:#f2a640;text-shadow:0 1px 0 #3b1a06,0 0 14px #f2a64033;margin:0 0 .4em}

/* Oriflamme : cartes exactement à cheval sur le credo (moitié parchemin, moitié Vallée) ; marge = moitié de leur
   hauteur, carte = (largeur utile - 2 gouttières) / 3, hauteur = largeur × 1,25. */
body.home #oriflamme{padding-bottom:40px;z-index:auto}
.triptych{display:grid;grid-template-columns:repeat(3,1fr);gap:28px;margin-top:56px;position:relative;z-index:5;margin-bottom:calc((min(100vw - 48px,1132px) - 56px) / 3 * -.625)}
.tri .framed{aspect-ratio:4/5;box-shadow:0 0 0 1px #000,0 30px 60px -18px #000,0 10px 24px #000a}
.tri .cap{position:absolute;left:1px;right:1px;bottom:1px;z-index:2;padding:70px 24px 22px;background:linear-gradient(180deg,#120d0a00,#120d0ad9 45%,#120d0af2)}
.tri p{margin:0;font-size:.98rem;color:#efe4cce6}
body.home .band.quote{padding-top:calc((min(100vw - 48px,1132px) - 56px) / 3 * .625 + 110px)}

/* Mise en page en deux colonnes */
.duo{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);gap:clamp(40px,5vw,72px);align-items:center}
.duo.rev{grid-template-columns:minmax(0,1.15fr) minmax(0,1fr)}
.duo.align-top{align-items:start}
body.home .banner-preview{margin-top:30px}
body.home .banner-preview .crest-list{grid-template-columns:1fr}
/* Emblème du chef (emblemUrl) recadré dans un médaillon : fond de cuir, cerclage de fer, liseré à la couleur de la Bannière */
.crest.emblem{display:block;flex:none;width:var(--size);height:var(--size);border-radius:50%;padding:calc(var(--size) * .13);background:radial-gradient(circle at 50% 40%,#3a2a1c,#120d0a 75%);box-shadow:inset 0 0 0 2px #2c2a2b,inset 0 0 0 3px var(--bcolor),0 0 0 1px #000,0 3px 6px #000a;clip-path:none;filter:none}
.crest.emblem img{display:block;width:100%;height:100%;max-width:none;object-fit:contain;filter:drop-shadow(0 1px 1px #000)}
.board-table .crest.emblem{padding:calc(var(--size) * .1)}

/* Semaines : onglets soulignés, image encadrée et texte */
.tabs{display:flex;justify-content:center;flex-wrap:wrap;gap:6px 40px;margin:30px 0 46px;border-bottom:1px solid #f3e6c833}
.tab{background:none;border:0;border-bottom:3px solid transparent;margin-bottom:-2px;padding:12px 4px;font-family:var(--f-caps);font-weight:600;font-size:.9rem;letter-spacing:.12em;text-transform:uppercase;color:#dcc9a4cc;cursor:pointer}
.tab:hover{color:var(--bone)}
.tab.on{color:var(--gold-hi);border-color:var(--gold)}
.tab:focus-visible{outline:2px solid var(--gold);outline-offset:2px}
.week-art{aspect-ratio:3/2}
.week-art img{transition:opacity .35s ease}
.week-title{font-size:2rem}
.dots{display:flex;gap:8px;margin-top:20px}.dots i{width:26px;height:3px;background:#f3e6c844}.dots i.on{background:var(--gold)}

/* Jointures : liseré d'or + ornement (crâne de kodo, médaillon à la flamme) */
.v3-gold{position:absolute;left:0;right:0;top:0;height:6px;transform:translateY(-50%);background:url(/site/assets/edge-gold.png?v=2641355e48) center/auto 6px repeat-x;filter:drop-shadow(0 0 6px #e2b24a66);z-index:5;pointer-events:none}
.v3-skull{position:absolute;left:50%;top:0;transform:translate(-50%,-50%);width:min(440px,72vw);height:auto;z-index:6;pointer-events:none;filter:drop-shadow(0 10px 14px #000c)}
body.home .band.join::before{content:none}
.hide-bg{background:linear-gradient(180deg,#120d0a 0,#120d0aa6 140px,#120d0aa6 calc(100% - 140px),#120d0a 100%),url(/site/assets/tex-hide.jpg?v=c4556c0999) center/768px repeat}
.v3-join{position:absolute;left:0;right:0;top:0;height:6px;transform:translateY(-50%);background:url(/site/assets/edge-gold.png?v=2641355e48) center/auto 6px repeat-x;filter:drop-shadow(0 0 6px #e2b24a55);z-index:6}
/* Le centre du disque (33 % de la hauteur de l'image) tombe sur le liseré, dans l'axe des défenses. */
.v3-join img{position:absolute;left:50%;top:50%;width:min(320px,70vw);height:auto;transform:translate(-50%,-33.2%);filter:drop-shadow(0 10px 14px #000c)}
body.home #rp{padding-top:150px}
.rp-art{aspect-ratio:4/3.4}
body.home #rp .notice h3{margin-bottom:.3em;font-size:1.3rem}
body.home #rp .notice p+p{margin-top:.6em}

/* Actualités : la première à la une, les suivantes en vignettes (référence : WoW Forever) */
.news-head{display:flex;align-items:center;gap:14px;margin-bottom:26px}
.news-head img{width:40px;height:40px}
.news-head h2{margin:0}
body.home .news{display:block}
body.home .news .lead-news{display:grid;flex-direction:initial}
body.home .news .thumb{display:block}
.lead-news{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);background:url(/site/assets/grain.png?v=0101358cdf),linear-gradient(180deg,#1b120cf2,#120b07f4);background-blend-mode:soft-light,normal;border:1px solid #7a541766;box-shadow:0 30px 60px -30px #000;color:inherit;text-decoration:none}
.lead-news .txt{padding:36px 34px;display:flex;flex-direction:column;justify-content:center}
.lead-news h3{font-family:var(--f-display);font-size:1.8rem;letter-spacing:.01em;text-transform:none;color:#f2a640;margin:0 0 .4em}
body.home .lead-news p{color:var(--bone-dim)}
.lead-news .img{min-height:340px;background:#140d08 center/cover no-repeat}
.news-tile{background:url(/site/assets/marque-flamme.svg?v=abf547a9a0) center/44px no-repeat,radial-gradient(circle at 50% 50%,#3a1a0c,#140d08 70%)!important}
.kind{font-family:var(--f-caps);font-size:.7rem;letter-spacing:.2em;text-transform:uppercase;color:var(--gold);margin:0 0 .4em}
.thumbs{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-top:14px}
.thumb{display:block;background:url(/site/assets/grain.png?v=0101358cdf),linear-gradient(180deg,#1b120cf2,#120b07f4);background-blend-mode:soft-light,normal;border:1px solid #7a541766;color:var(--bone);text-decoration:none}
.thumb .i{aspect-ratio:16/9;background:#140d08 center/cover no-repeat}
.thumb .t{padding:12px 14px 16px;font-family:var(--f-body);font-weight:600;font-size:1rem;line-height:1.3;color:var(--gold-hi)}
.thumb time,.lead-news time{display:block;margin-top:8px;font-family:var(--f-ui);font-size:.82rem;font-weight:400;color:var(--bone-dim)}
a.thumb:hover,a.lead-news:hover{border-color:#e2b24a66}

/* Compagnon */
body.home #companion{background:radial-gradient(60% 45% at 50% 30%,#3a1a0c66,#120d0a00 70%)}
body.home #companion .framed.big{max-width:1080px;margin:50px auto 0;box-shadow:0 40px 90px -30px #000,0 0 120px -40px #c43f1c66}
.feats3{display:grid;grid-template-columns:repeat(3,1fr);gap:36px;max-width:1080px;margin:46px auto 0}
.feats3 h3{font-size:1.3rem;margin-bottom:4px}
.feats3 p{color:var(--bone-dim);font-size:1rem;margin:0}
/* Traduction en direct (25 oct.) : texte sur deux colonnes, capture en jeu en pleine largeur dessous, cadrée serré pour
   que les messages et le sous-titre se lisent (Jeremy : « on voit rien »). */
.babel{margin-top:110px;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:14px clamp(40px,5vw,72px);align-items:start}
.babel .ingame-fig{grid-column:1/-1;margin-top:26px}
.babel .framed{aspect-ratio:2560/1060}
.ingame-fig{margin:0}
.ingame-fig figcaption{margin-top:12px}

/* Communauté : carte plus sombre, carte Discord à bouton */
body.home .band.community .map{opacity:.45}
body.home .band.community .map::after{background:linear-gradient(180deg,#0b0806 0,#0b0806b8 30%,#0b0806b8 70%,#0b0806 100%)}
.v3-dcard{display:inline-flex;align-items:center;gap:18px;padding:14px 14px 14px 20px;border:1px solid #e2b24a55;background:#0b0806d0;margin:6px 0 14px;text-decoration:none;color:var(--bone);box-shadow:0 18px 40px -22px #000;transition:border-color .2s,transform .2s}
.v3-dcard:hover{border-color:#e2b24a99;transform:translateY(-2px)}
.v3-dcard img{width:46px;height:46px;filter:drop-shadow(0 0 10px #ff9a4a44)}
.v3-dcard .t{text-align:left;min-width:170px}
.v3-dcard .t b{font-family:var(--f-display);font-weight:400;font-size:1.35rem;display:block;line-height:1.1;color:var(--gold-hi)}
.v3-dcard .t small{font-family:var(--f-ui);color:var(--bone-dim);font-size:.88rem}

@media (max-width:980px){
  body.home .hero{min-height:max(calc(100svh + 4px),640px)}
  body.home .hero-art::before{background:linear-gradient(180deg,#120d0a99 0,#120d0a70 30%,#120d0ab0 65%,#120d0ae6 100%)}
  .countband .wrap{flex-direction:column;gap:14px}
  body.home .v3{padding:72px 0}
  .triptych{grid-template-columns:1fr;gap:20px;margin-bottom:calc((100vw - 48px) * -.5)}
  .tri .framed{aspect-ratio:1/1}
  .tri .cap{padding:40px 18px 16px}
  body.home .band.quote{padding-top:calc((100vw - 48px) * .5 + 70px)}
  .duo,.duo.rev,.babel{grid-template-columns:1fr;gap:32px}
  .duo .framed{order:-1}
  .tabs{justify-content:flex-start;flex-wrap:nowrap;overflow-x:auto;gap:22px;margin:22px -24px 30px;padding:0 24px}
  .tab{white-space:nowrap;font-size:.8rem}
  .lead-news{grid-template-columns:1fr}
  .lead-news .img{min-height:220px;order:-1}
  .lead-news .txt{padding:24px 20px}
  .thumbs{grid-template-columns:1fr 1fr}
  .feats3{grid-template-columns:1fr;gap:22px}
  body.home #rp{padding-top:130px}
}
@media (max-width:560px){.v3-dcard{width:100%;flex-wrap:wrap;justify-content:center;padding:16px}.v3-dcard .t{min-width:0}.v3-dcard .btn{width:100%}}
@media (prefers-reduced-motion:reduce){.week-art img{transition:none}}
.countband:not(.open) .season-line{display:none}
body.home .banner-preview .crest.emblem{width:60px;height:60px;padding:5px}
body.home section[id]{scroll-margin-top:72px}

/* Actualités (25 oct.) : page liste et page d'une actualité (news.html), mêmes cartes que l'accueil. */
.news-page .news-h1{font-family:var(--f-display);font-weight:400;font-size:clamp(2rem,4.4vw,3.1rem);line-height:1.12;color:#f2a640;text-shadow:0 2px 0 #3b1a06,0 0 24px #f2a64033;margin:.1em 0 .6em}
.news-grid{display:block}
.news-grid .lead-news{display:grid;color:var(--bone);text-decoration:none}
.news-grid .lead-news p{color:var(--bone-dim)}
.news-grid .thumbs{grid-template-columns:repeat(3,1fr)}
.news-article{max-width:820px;margin:0 auto}
.news-back{display:inline-block;margin-bottom:22px;font-family:var(--f-caps);font-size:.78rem;letter-spacing:.18em;text-transform:uppercase;color:var(--gold);text-decoration:none}
.news-back::before{content:"‹";margin-right:8px;font-size:1.2em}
.news-back:hover{color:var(--gold-hi)}
.news-hero{aspect-ratio:16/9;margin:0 0 26px}
.news-meta{display:flex;flex-wrap:wrap;gap:14px;align-items:baseline;margin:0}
.news-meta .kind{margin:0}
.news-meta time{font-family:var(--f-ui);font-size:.9rem;color:var(--bone-dim)}
.news-article .news-h1{margin:.2em 0 .5em}
.news-body{font-size:1.1rem;line-height:1.7;color:#efe4cc}
.news-body h2{font-family:var(--f-caps);font-weight:600;font-size:.95rem;letter-spacing:.16em;text-transform:uppercase;color:var(--gold);margin:1.8em 0 .5em;padding-bottom:6px;border-bottom:1px solid #6b4e2a66}
.news-body ul{list-style:none;padding:0;margin:0 0 1em}
.news-body li{position:relative;padding-left:22px;margin:.45em 0}
.news-body li::before{content:"";position:absolute;left:4px;top:.72em;width:7px;height:7px;background:var(--gold);transform:rotate(45deg)}
.news-more{margin-top:64px;padding-top:26px;border-top:1px solid #6b4e2a55}
.news-more h2{font-family:var(--f-display);font-weight:400;font-size:1.5rem;color:#f2a640;margin:0 0 .4em}
.news-more .thumbs{grid-template-columns:repeat(2,1fr)}
@media (max-width:760px){.news-grid .thumbs,.news-more .thumbs{grid-template-columns:1fr}}
/* Accueil : lien vers toutes les actualités sous les vignettes. */
.news-all{margin-top:22px;text-align:right}
.lead-news h3,.news-page .news-h1,.babel-title,.card-t{text-wrap:balance}

/* ---- Fiche publique d'une bannière (25 oct. au soir, maquette validée) */
/* Fiche publique d'une bannière, façon page de race des anciens MMO : héros illustré, fiche en tuiles, histoire sur
   parchemin avec lettrine, coutumes en serments numérotés, fondateurs et chronique, appel final. */
#detail{padding:0}
#detail .wrap.two{align-items:start}
/* Héros plein écran (25 oct., Jeremy : « que ça prenne tout l'écran et qu'au scroll on voie le reste ») ; fond : l'image
   fixe (hero.jpg), recouverte par l'étendard vivant (canvas WebGL .bx-live) dès qu'il est prêt. */
.bx-hero{position:relative;min-height:calc(100svh - var(--top-h,61px));display:flex;align-items:flex-end;background-color:#0b0705;background-image:var(--hero);background-position:right center;isolation:isolate;background-size:cover;background-repeat:no-repeat;overflow:hidden}
.bx-hero::before{content:"";position:absolute;inset:0;background:linear-gradient(90deg,#0b0705f2 0%,#0b0705d9 30%,#0b070566 58%,#0b070500 78%),linear-gradient(0deg,#120d0a 0%,#120d0a00 28%)}
.bx-hero .wrap{position:relative;width:100%;padding-top:120px;padding-bottom:120px}
.bx-back{display:inline-block;margin-bottom:28px;font-family:var(--f-ui);font-size:.95rem;color:var(--gold);text-decoration:none;opacity:.85}
.bx-back:hover{opacity:1;text-decoration:underline}
.bx-kicker{display:flex;flex-wrap:wrap;align-items:center;gap:10px;margin:0 0 10px;font-family:var(--f-caps);font-weight:600;font-size:.82rem;letter-spacing:.22em;text-transform:uppercase;color:var(--gold)}
.bx-tag{padding:3px 10px;border:1px solid #e2b24a66;border-radius:2px;background:#0b0705aa;letter-spacing:.14em}
.bx-tag.forming{color:#f2c779;border-color:#f2c77966}
.bx-hero h1{max-width:13ch;margin:0;font-family:var(--f-display);font-size:clamp(2.6rem,6.2vw,5.4rem);line-height:1;letter-spacing:.01em;background:linear-gradient(180deg,#fff2c8 0%,#f2a640 52%,#c9641d 100%);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;filter:drop-shadow(0 3px 0 #2a1004) drop-shadow(0 10px 30px #000d);text-wrap:balance}
.bx-hero .hero-sub{margin:.7em 0 0}
.bx-summary{max-width:58ch;margin:22px 0 0;font-size:1.18rem;line-height:1.6;color:var(--bone);text-shadow:0 1px 2px #000}
.bx-cta{display:flex;flex-wrap:wrap;gap:14px;margin-top:30px}
.btn.ghost{background:#0b0705aa}
/* bande d'état */
.bx-status{position:relative;background:linear-gradient(180deg,#120d0a,#160f0b);border-top:1px solid #7a541755;border-bottom:1px solid #7a541755}
.bx-status::before{content:"";position:absolute;left:0;right:0;top:0;height:6px;transform:translateY(-50%);background:url(/site/assets/edge-gold.png?v=2641355e48) center top/auto 6px repeat-x;filter:drop-shadow(0 0 6px #e2b24a66)}
.bx-status .wrap{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:0;padding-top:26px;padding-bottom:26px}
.bx-stat{padding:4px 22px;border-left:1px solid #7a541744}
.bx-stat:first-child{border-left:0;padding-left:0}
.bx-stat .v{display:block;font-family:var(--f-display);font-size:1.7rem;line-height:1.1;color:var(--gold-hi);text-shadow:0 2px 0 var(--gold-shadow)}
.bx-stat .k{display:block;margin-top:4px;font-family:var(--f-caps);font-size:.72rem;letter-spacing:.18em;text-transform:uppercase;color:var(--bone-dim)}
.bx-gauge{margin-top:10px;height:6px;border-radius:999px;background:#ffffff12;overflow:hidden}
.bx-gauge i{display:block;height:100%;background:linear-gradient(90deg,#7fb04e,#b9e08e)}
/* fiche */
.bx-sheet{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px;margin-top:1.4em}
.bx-tile{padding:22px 24px 20px}
.bx-tile .k{margin:0 0 8px;font-family:var(--f-caps);font-weight:600;font-size:.74rem;letter-spacing:.2em;text-transform:uppercase;color:var(--bone-dim)}
.bx-tile .v{margin:0;font-family:var(--f-display);font-size:1.45rem;line-height:1.15;color:#f2a640;text-shadow:0 1px 0 #3b1a06}
.bx-tile p.d{margin:8px 0 0;font-size:.98rem;line-height:1.5;color:var(--bone)}
.bx-peoples{list-style:none;margin:6px 0 0;padding:0;display:grid;gap:10px}
.bx-peoples li{display:grid;grid-template-columns:1fr auto;gap:4px 10px;align-items:baseline;font-size:1.05rem;color:var(--bone)}
.bx-peoples b{font-family:var(--f-display);font-weight:400;font-size:1.25rem;color:#f2a640}
.bx-peoples span{font-family:var(--f-ui);font-size:.9rem;color:var(--bone-dim)}
.bx-peoples i{grid-column:1/-1;display:block;height:5px;border-radius:999px;background:#ffffff10;overflow:hidden}
.bx-peoples i::after{content:"";display:block;height:100%;width:var(--w);background:linear-gradient(90deg,var(--gold-lo),var(--gold))}
.bx-tile.wide{grid-column:span 2}
/* histoire */
.bx-lore{columns:2 34ch;column-gap:56px;margin-top:1.2em;font-size:1.12rem;line-height:1.75;color:#2a1a0c}
.band.parch{background:url(/site/assets/paper-tile.jpg?v=ce564e8782) center/900px auto repeat;box-shadow:inset 0 0 120px #3b2608aa,inset 0 1px 0 #7a5417,inset 0 -1px 0 #7a5417}
/* Histoire sur le papier du journal de quêtes (25 oct.), bords déchirés comme l'accueil, sans ornement dessus
   (tools/keyart/parchemin-quete.py). Le bas se fond vers le ton du bord pour une jointure invisible. */
#histoire.band.parch{position:relative;z-index:2;margin:87px 0;padding:70px 0 80px;border:0;box-shadow:none;background:linear-gradient(0deg,rgb(217 185 115) 0,rgb(217 185 115/0) 90px),#d9b779 url(/site/assets/v3/quete-fond.jpg?v=20f9339300) center top/cover no-repeat}
#histoire.band.parch::before,#histoire.band.parch::after{content:"";position:absolute;left:0;right:0;width:auto;height:87px;transform:none;aspect-ratio:auto;filter:none;border:0;background:url(/site/assets/v3/quete-haut.webp?v=37a008c830) center top/100% 87px no-repeat;z-index:3;pointer-events:none}
#histoire.band.parch::before{top:-86px}
#histoire.band.parch::after{bottom:-86px;background-image:url(/site/assets/v3/quete-bas.webp?v=b5f3b42563)}
#histoire .overline{color:#7a2a0a;font-weight:700}
#histoire h2{background:none;-webkit-text-fill-color:#3a1c06;color:#3a1c06;text-shadow:0 1px 0 #f3dca880}
#histoire .bx-lore{color:#2e1a08;text-shadow:0 1px 0 #f3dca866}
#histoire .bx-lore p:first-child::first-letter{color:#7a1e08;text-shadow:1px 1px 0 #f3dca8,2px 3px 0 #5a300c44}
#histoire .wrap::after{content:"";display:block;width:220px;height:14px;margin:26px auto 0;background:radial-gradient(circle,#7a1e08 0 4px,transparent 5px) center/14px 14px no-repeat,linear-gradient(90deg,transparent,#5a300c88 30%,#5a300c88 45%,transparent 46% 54%,#5a300c88 55%,#5a300c88 70%,transparent) center/100% 1px no-repeat}
.band.parch h2{background:linear-gradient(180deg,#7a3a12 0%,#4a1c06 100%);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;filter:none}
.band.parch .overline{color:#8a3a12;text-shadow:none}
.bx-lore p{margin:0 0 1em;break-inside:avoid-column}
.bx-lore p:first-child::first-letter{float:left;margin:.08em .1em 0 0;font-family:var(--f-display);font-size:3.6em;line-height:.8;color:#8a2a0e}
/* serments */
.bx-oaths{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:22px;margin-top:1.6em;list-style:none;padding:0}
.bx-oath{padding:28px 26px 24px}
.bx-oath .num{display:block;font-family:var(--f-display);font-size:2.6rem;line-height:1;background:linear-gradient(180deg,#ffd98a,#c9641d);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;filter:drop-shadow(0 2px 0 #3b1a06)}
.bx-oath h3{margin:12px 0 10px;font-size:1.3rem}
.bx-oath p{margin:0;font-size:1rem;line-height:1.55;color:var(--bone)}
.bx-oath .ig{margin-top:14px;padding-top:12px;border-top:1px solid #7a541755;font-family:var(--f-ui);font-size:.92rem;color:var(--bone-dim)}
.bx-oath .ig b{color:var(--gold);font-weight:600}
/* fondateurs + chronique */
.bx-people{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:14px}
.bx-people li{display:flex;align-items:center;gap:10px;padding:8px 16px 8px 8px;border:1px solid #7a541766;border-radius:999px;background:#0b070588;font-size:1.05rem;color:var(--bone)}
.bx-people .av{width:34px;height:34px;border-radius:50%;display:grid;place-items:center;background:#2a1d12;border:1px solid var(--gold-lo);font-family:var(--f-caps);font-weight:700;color:var(--gold)}
.bx-people small{display:block;font-family:var(--f-ui);font-size:.8rem;color:var(--bone-dim)}
.bx-empty{margin:0;font-style:italic;color:var(--bone-dim)}
.band.join h2{margin-bottom:.3em}
@media (max-width:900px){.bx-status .wrap{grid-template-columns:1fr 1fr;row-gap:18px}.bx-stat:nth-child(3){border-left:0;padding-left:0}.bx-sheet,.bx-oaths{grid-template-columns:1fr}.bx-tile.wide{grid-column:auto}.bx-hero{min-height:0;background-position:70% center}.bx-hero::before{background:linear-gradient(0deg,#0b0705 0%,#0b0705e6 45%,#0b070566 100%)}.bx-hero .wrap{padding-top:220px}.bx-lore{columns:1}}

.bx-tile.full{grid-column:1/-1}
@media (max-width:900px){.bx-tile.full{grid-column:auto}}

.bx-status .wrap.five{grid-template-columns:repeat(5,minmax(0,1fr))}
.bx-side{display:grid;gap:22px}
.bx-lore.light{columns:1;max-width:70ch;color:var(--bone)}
.bx-lore.light p:first-child::first-letter{all:unset}
#detail .chronicle .bx-empty{list-style:none;font-style:italic;color:var(--bone-dim)}
.bx-people li.bx-empty{border:0;background:none;padding:0}
@media (max-width:900px){.bx-status .wrap.five{grid-template-columns:1fr 1fr}}
.bx-tile.span2{grid-column:span 2}
@media (max-width:900px){.bx-tile.span2{grid-column:auto}}

/* Fiche d'une bannière, v2 (25 oct., maquette validée par Jeremy). --c : couleur de la bannière, ajustée par la page
   (assez claire sur le fond noir, assez sombre pour le texte clair du bouton) ; tous les boutons d'action la prennent. */
#detail{--c:#c43f1c}
.btn.clan{color:#fff6dc;border-color:color-mix(in srgb,var(--c) 40%,#b07a3a);background:url(/site/assets/grain.png?v=0101358cdf),linear-gradient(180deg,color-mix(in srgb,var(--c) 85%,#fff 5%) 0%,color-mix(in srgb,var(--c) 70%,#000) 45%,color-mix(in srgb,var(--c) 40%,#000) 100%);background-blend-mode:soft-light,normal;text-shadow:0 1px 0 #000a;box-shadow:inset 0 1px 0 #ffffff40,inset 0 -1px 0 #0009,inset 0 0 0 1px #0006,0 1px 2px #000c,0 8px 18px -10px var(--c)}
.btn.clan:hover{filter:brightness(1.12)}
/* Invitation à défiler */
.bx-cue{position:absolute;left:50%;bottom:26px;transform:translateX(-50%);z-index:3;display:flex;flex-direction:column;align-items:center;gap:6px;font-family:var(--f-caps);font-size:.66rem;font-weight:800;letter-spacing:.24em;text-transform:uppercase;color:#e2b24acc;text-decoration:none;white-space:nowrap}
.bx-cue svg{width:22px;height:22px;fill:none;stroke:#e2b24a;stroke-width:1.6;animation:bx-cue 2.2s ease-in-out infinite}
.bx-cue:hover{color:var(--gold-hi)}
@keyframes bx-cue{0%,100%{transform:translateY(0);opacity:.6}50%{transform:translateY(6px);opacity:1}}
@media (prefers-reduced-motion:reduce){.bx-cue svg{animation:none}}
/* Lecteur du thème musical : coin bas droit du héros ; sous les boutons en dessous de 1080 px */
.bx-theme{position:absolute;right:24px;bottom:120px;z-index:3;display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:4px 14px;width:372px;padding:12px 14px 12px 12px;background:#0b0705d9;border:1px solid #e2b24a38;border-radius:2px;box-shadow:0 18px 40px #000a;backdrop-filter:blur(6px);font-family:var(--f-ui);color:var(--bone)}
.bx-theme .tp{grid-row:1/4;position:relative;width:46px;height:46px;border-radius:50%;border:0;padding:0;display:grid;place-items:center;cursor:pointer;background:url(/site/assets/grain.png?v=0101358cdf),radial-gradient(circle at 50% 30%,color-mix(in srgb,var(--c) 90%,#fff 8%) 0%,color-mix(in srgb,var(--c) 70%,#000) 50%,color-mix(in srgb,var(--c) 35%,#000) 100%);background-blend-mode:soft-light,normal;box-shadow:inset 0 1px 0 #ffffff40,inset 0 -2px 3px #0008,inset 0 0 0 1px #0006,0 0 0 1px color-mix(in srgb,var(--c) 40%,#7a5417),0 0 0 3px #0b0705,0 6px 14px #000a}
.bx-theme .tp svg{width:18px;height:18px;fill:#fff6dc;filter:drop-shadow(0 1px 0 #000a)}
.bx-theme .tp:focus-visible,.bx-theme .tv:focus-visible{outline:2px solid var(--gold);outline-offset:3px}
.bx-theme.idle .tp::after{content:"";position:absolute;inset:-7px;border-radius:50%;border:1px solid color-mix(in srgb,var(--c) 55%,#7a5417);animation:bx-call 2.4s ease-out infinite}
@keyframes bx-call{0%{transform:scale(.9);opacity:.9}100%{transform:scale(1.35);opacity:0}}
@media (prefers-reduced-motion:reduce){.bx-theme.idle .tp::after{animation:none;opacity:.6}}
.bx-theme .tk{display:flex;align-items:center;gap:8px;white-space:nowrap;font-family:var(--f-caps);font-size:.66rem;font-weight:800;letter-spacing:.2em;text-transform:uppercase;color:var(--gold)}
.bx-theme .tt{grid-column:2;font-family:var(--f-body);font-size:1rem;line-height:1.2;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.bx-theme .tc{grid-column:2;font-size:.8rem;color:var(--bone-dim);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.bx-theme .tv{grid-column:3;grid-row:1/4;width:34px;height:34px;border:0;padding:0;background:none;color:var(--bone-dim);cursor:pointer}
.bx-theme .tv:hover{color:var(--gold-hi)}
.bx-theme .tv svg{width:20px;height:20px;fill:currentColor}
.bx-theme .tbar{grid-column:1/4;display:none;align-items:center;gap:10px;margin-top:6px;font-size:.75rem;color:var(--bone-dim);font-variant-numeric:tabular-nums}
.bx-theme.playing .tbar,.bx-theme.paused .tbar{display:flex}
.bx-theme .tbar i{flex:1;height:3px;border-radius:2px;background:#efe4cc22;position:relative;cursor:pointer}
.bx-theme .tbar i::before{content:"";position:absolute;inset:-8px 0}
.bx-theme .tbar b{position:absolute;left:0;top:0;bottom:0;width:var(--p,0%);border-radius:2px;background:linear-gradient(90deg,#c9641d,var(--gold))}
.bx-theme .tbar b::after{content:"";position:absolute;right:-4px;top:-3px;width:9px;height:9px;border-radius:50%;background:var(--gold-hi)}
.bx-theme .eq{display:none;gap:2px;align-items:flex-end;height:10px}
.bx-theme .eq u{width:2px;height:4px;background:var(--gold);animation:bx-eq 1s ease-in-out infinite}
.bx-theme .eq u:nth-child(2){animation-delay:-.3s}.bx-theme .eq u:nth-child(3){animation-delay:-.6s}.bx-theme .eq u:nth-child(4){animation-delay:-.15s}
@keyframes bx-eq{0%,100%{height:3px}50%{height:10px}}
.bx-theme.playing .eq{display:inline-flex}
@media (max-width:1080px){.bx-theme{position:relative;right:auto;bottom:auto;margin:22px 0 0;width:100%;max-width:420px}}
/* Appel final aux couleurs de la bannière : son étendard animé en miroir du héros, médaillon de l'emblème sur le liseré */
.band.join.bx-call{position:relative;min-height:640px;display:flex;align-items:center;padding:120px 0 110px;background:#0b0705;overflow:visible}
.band.join.bx-call::before{content:none}
.bx-call .art{position:absolute;inset:0;background-image:var(--hero);background-position:right 30%;background-size:cover;background-repeat:no-repeat;transform:scaleX(-1);z-index:0}
.bx-call .art::after{content:"";position:absolute;inset:0;background:linear-gradient(270deg,#0b070500 0%,#0b070533 35%,#0b0705dd 58%,#0b0705f5 75%),linear-gradient(0deg,#0b0705 0%,#0b070500 25%),linear-gradient(180deg,#120d0a 0%,#120d0a00 22%),radial-gradient(ellipse 40% 60% at 25% 60%,color-mix(in srgb,var(--c) 35%,transparent),transparent 70%)}
.bx-call .edge{position:absolute;left:0;right:0;top:0;height:6px;transform:translateY(-50%);background:url(/site/assets/edge-gold.png?v=2641355e48) center/auto 6px repeat-x;filter:drop-shadow(0 0 6px #e2b24a66);z-index:3}
.bx-call .medal{position:absolute;left:50%;top:0;transform:translate(-50%,-50%);z-index:4;width:128px;height:128px;filter:drop-shadow(0 0 6px #e2b24a55) drop-shadow(0 10px 16px #000d)}
/* Cadre = le cordon d'or du liseré enroulé (tools/keyart/cadre-medaillon.py, 25 oct.) ; l'emblème de la bannière dessous */
.bx-call .medal::before{content:"";position:absolute;inset:19px;border-radius:50%;background:url(/site/assets/grain.png?v=0101358cdf),#0b0705;background-blend-mode:soft-light,normal;box-shadow:inset 0 3px 8px #000c,inset 0 0 0 1px #0008}
/* L'emblème un peu en retrait du cadre (Jeremy, 25 oct. : « il mange sur les bords »), bord adouci dans la face */
.bx-call .medal i{position:absolute;inset:25px;z-index:1;border-radius:50%;background:var(--emblem,none) center/100% no-repeat;box-shadow:0 0 6px 2px #0b0705}
.bx-call .medal::after{z-index:2}
.bx-call .medal::after{content:"";position:absolute;inset:0;background:url(/site/assets/v3/cadre-medaillon.png?v=b816e48ced) center/100% no-repeat}
.bx-call .medal.empty{display:none}
.bx-call .wrap{position:relative;z-index:2;display:grid;grid-template-columns:4fr 7fr;text-align:left}
.bx-call .wrap>div{grid-column:2}
.bx-call .overline{color:color-mix(in srgb,var(--c) 45%,#efe4cc)}
.bx-call h2{font-size:clamp(2.2rem,4vw,3.4rem);margin:0 0 .15em;text-wrap:balance}
.bx-call .motto{margin:0 0 1.3em;font-family:var(--f-caps);font-weight:700;letter-spacing:.3em;text-transform:uppercase;font-size:.9rem;color:var(--gold)}
.bx-call .pills{display:flex;flex-wrap:wrap;gap:10px;margin:0 0 1.3em;padding:0;list-style:none}
.bx-call .pills li{padding:5px 14px;border:1px solid color-mix(in srgb,var(--c) 55%,#e2b24a);background:color-mix(in srgb,var(--c) 20%,#0b0705cc);font-family:var(--f-ui);font-size:.92rem;color:var(--bone)}
.bx-call .intro{margin:0 0 1.6em;max-width:44ch}
.bx-call .actions{display:flex;gap:14px;flex-wrap:wrap}
@media (max-width:900px){.bx-call .wrap{grid-template-columns:1fr}.bx-call .wrap>div{grid-column:1}.bx-call .art{background-position:right 20%}.bx-call .art::after{background:linear-gradient(0deg,#0b0705 0%,#0b0705ee 50%,#0b070566 100%),linear-gradient(180deg,#120d0a 0%,#120d0a00 22%)}.band.join.bx-call{padding-top:280px}}
@media (max-width:900px){.bx-hero{min-height:calc(100svh - var(--top-h,61px))}}
/* Téléphone : l'étendard en haut, le texte dessous ; devise moins espacée pour ne pas laisser un guillemet seul */
@media (max-width:700px){.bx-hero{background-size:auto 500px;background-position:97% 0}.bx-hero::before{background:linear-gradient(180deg,#0b070500 0,#0b070522 240px,#0b0705 495px)}.bx-hero .wrap{padding-top:330px}}
@media (max-width:600px){.bx-call .motto,.bx-hero .hero-sub{letter-spacing:.14em;font-size:.82rem}}
/* En-tête entre 981 et 1240 px : le menu se resserre au lieu de passer sous le logo (25 oct.) */
.brand{flex-shrink:0;white-space:nowrap}
.top-tools .btn{white-space:nowrap}
@media (min-width:981px) and (max-width:1240px){.top{gap:16px;padding:10px 20px}.menu{gap:14px}.menu a{font-size:.84rem;letter-spacing:.03em}.top-tools .btn{padding:10px 18px}}
#bStatusBand,#bCustomsBand{scroll-margin-top:var(--top-h,61px)}
#histoire{scroll-margin-top:calc(var(--top-h,61px) + 40px)}

/* Étendard vivant (WebGL) : par-dessus l'image fixe, sous le voile et le texte ; apparaît en fondu quand il est prêt. */
.bx-live{position:absolute;inset:0;width:100%;height:100%;z-index:0;opacity:0;transition:opacity .8s ease;pointer-events:none}
.bx-live.on{opacity:1}
.bx-hero::before{z-index:1}
.bx-hero .wrap{z-index:2}
/* Invitation à défiler sur l'accueil (25 oct.), la même que sur la fiche des bannières */
body.home .hero .bx-cue{z-index:5}
.bx-cue{text-shadow:0 1px 2px #000,0 0 14px #000c}
.bx-cue svg{filter:drop-shadow(0 1px 2px #000)}
#ouverture{scroll-margin-top:var(--top-h,61px)}
/* Lecteur : chargement (anneau qui tourne) et échec (anneau braise) */
.bx-theme.loading .tp::after{content:"";position:absolute;inset:-6px;border-radius:50%;border:2px solid transparent;border-top-color:var(--gold);border-right-color:#e2b24a66;animation:bx-spin .9s linear infinite}
@keyframes bx-spin{to{transform:rotate(360deg)}}
.bx-theme.loading .eq{display:none}
.bx-theme.failed .tp{box-shadow:inset 0 1px 0 #ffffff40,0 0 0 2px #c43f1c,0 0 0 4px #0b0705}