/* L'Avant-garde — ton de la page : la salle de briefing de Zavala. L'or de l'Avant-garde, des dossiers classés, et une
   couleur par extension : le rouge de la Guerre rouge, l'ambre de Mercure, la glace de Mars, le violet du Récif, le
   cramoisi de la Lune, le cyan d'Europe, le vert du marais de Savathûn, le rose de Néomuna, le blanc du Voyageur.
   Ambiance par section (data-mood sur <body> : avant, rouge, osiris, tutelaire, renegats, bastion, audela, sorciere,
   eclipse, forme ; js/components/moods.js).
   Cartes de présentation, index des extensions, filtre collant, dossiers (.op), générateur, petits mécanismes. */

.avant-garde {
  --vanguard: #f2c46d;
  --vanguard-hi: #fff0cc;
  --page-accent: var(--vanguard);
  --page-accent-hi: var(--vanguard-hi);
}
.avant-garde[data-mood="rouge"] { --page-accent: #ff6a4d; --page-accent-hi: #ffd5c8; }
.avant-garde[data-mood="osiris"] { --page-accent: #ffc864; --page-accent-hi: #fff0c8; }
.avant-garde[data-mood="tutelaire"] { --page-accent: #9fd4ff; --page-accent-hi: #e4f3ff; }
.avant-garde[data-mood="renegats"] { --page-accent: #b49bff; --page-accent-hi: #ebe3ff; }
.avant-garde[data-mood="bastion"] { --page-accent: #ff5a73; --page-accent-hi: #ffd6dd; }
.avant-garde[data-mood="audela"] { --page-accent: #7fe0ff; --page-accent-hi: #dcf7ff; }
.avant-garde[data-mood="sorciere"] { --page-accent: #a6e38c; --page-accent-hi: #e6fbdc; }
.avant-garde[data-mood="eclipse"] { --page-accent: #ff86de; --page-accent-hi: #ffe0f6; }
.avant-garde[data-mood="forme"] { --page-accent: #f4ead2; --page-accent-hi: #ffffff; }
.avant-garde .kicker, .avant-garde .tag, .avant-garde .op-name, .avant-garde .op-facts b { transition: color .6s; }
.avant-garde .kicker, .avant-garde .tag { color: var(--page-accent); }
.avant-garde .footer-crest, .avant-garde .brand svg { color: var(--vanguard); }
/* une trame de papier millimétré, très discrète : la table de briefing */
.avant-garde main {
  background-image:
    linear-gradient(rgba(242, 196, 109, .025) 1px, transparent 1px),
    linear-gradient(90deg, rgba(242, 196, 109, .025) 1px, transparent 1px),
    radial-gradient(ellipse 60% 14% at 12% 3%, rgba(242, 196, 109, .05), transparent 70%);
  background-size: 48px 48px, 48px 48px, 100% 100%;
}
@media (min-width: 1021px) and (max-width: 1300px) { .avant-garde .brand span { display: none; } }

/* ---------- Héros ---------- */
.avant-garde .hero-status { display: grid; grid-template-columns: auto auto auto; column-gap: 18px; row-gap: 0; }
.avant-garde .hero-status .status-label { grid-row: 1; }
.avant-garde .hero-status .status-value { grid-row: 2; font-variant-numeric: tabular-nums; }
.avant-garde .hero-content .actions { flex-wrap: wrap; }
.avant-garde .d-btn svg { width: 16px; height: 16px; flex: none; }
.avant-garde .hero-title { font-size: clamp(2.6rem, 7vw, 6.4rem); }
.avant-garde .hero-title span:last-child { margin-top: .06em; padding-top: .14em; line-height: 1.25; font-size: .3em; font-weight: 900; letter-spacing: .24em;
  background: linear-gradient(90deg, var(--vanguard), #fff7e0 40%, #ff6a4d 75%, #7fe0ff); -webkit-background-clip: text; background-clip: text; color: transparent; }
@supports not (background-clip: text) { .avant-garde .hero-title span:last-child { color: var(--vanguard); } }

/* ---------- Cartes de présentation ---------- */
.brief-cards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; margin: 0; padding: 0; list-style: none; }
.brief-cards--one { grid-template-columns: minmax(0, 1fr); }
.brief-card { display: grid; grid-template-columns: 56px minmax(0, 1fr); gap: 14px; padding: 16px; border: 1px solid var(--line); border-left: 2px solid var(--page-accent); background: var(--panel-solid); transition: border-color .6s; }
.brief-card img { width: 56px; height: 56px; border: 1px solid rgba(255, 255, 255, .2); background: #000; object-fit: cover; }
.brief-card h3 { margin: 2px 0 6px; font-size: 1rem; font-weight: 800; text-transform: uppercase; color: var(--pearl); }
.brief-card p:not(.tag) { margin: 0; font-size: .86rem; line-height: 1.6; color: var(--muted); }

/* ---------- Index des extensions ---------- */
.era-index ol { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 8px; margin: 0; padding: 0; list-style: none; counter-reset: era; }
.era-index a { display: flex; flex-direction: column; gap: 2px; height: 100%; padding: 12px 14px; border: 1px solid var(--line); background: rgba(12, 19, 40, .6);
  font-size: .9rem; font-weight: 700; color: var(--pearl); text-decoration: none; transition: border-color .25s, background .25s; }
.era-index a span { font-size: .64rem; font-weight: 700; letter-spacing: .2em; color: var(--page-accent); }
.era-index a:hover { border-color: var(--page-accent); background: rgba(12, 19, 40, .9); }
.dossiers-sec { padding-bottom: 28px; }

/* ---------- Filtre collant ---------- */
.ops-wrap { position: relative; }
.ops-filter { position: sticky; top: 62px; z-index: 20; padding: 0 var(--gutter); }
.ops-filter-inner { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; max-width: 1280px; margin: 0 auto; padding: 10px 14px;
  border: 1px solid var(--line); background: rgba(6, 10, 22, .9); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); }
.chips { display: flex; gap: 6px; }
.chip { padding: 7px 12px; border: 1px solid var(--line-strong); background: transparent; color: var(--muted); font: inherit; font-size: .66rem; font-weight: 700;
  letter-spacing: .16em; text-transform: uppercase; cursor: pointer; transition: background .2s, color .2s, border-color .2s; }
.chip:hover { color: var(--pearl); border-color: var(--pearl); }
.chip.is-on { background: var(--page-accent); border-color: var(--page-accent); color: var(--night); }
.ops-select { display: flex; align-items: center; gap: 8px; font-size: .66rem; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--faint); }
.ops-select select { padding: 6px 8px; border: 1px solid var(--line-strong); background: var(--panel-solid); color: var(--pearl); font: inherit; font-size: .8rem; letter-spacing: 0; text-transform: none; }
.ops-count { margin: 0 0 0 auto; font-size: .72rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); font-variant-numeric: tabular-nums; }
.ops-launch { padding: 8px 14px; font-size: .64rem; }
.ops-era[hidden] { display: none; }
.ops-era { padding-top: clamp(64px, 8vw, 110px); padding-bottom: 20px; }
.era-head { max-width: 860px; }

/* ---------- Dossiers ---------- */
.op { position: relative; display: grid; grid-template-columns: minmax(0, 1.08fr) minmax(0, 1fr); gap: clamp(22px, 3vw, 44px); align-items: start;
  margin: 0 0 clamp(54px, 7vw, 92px); scroll-margin-top: 130px; }
.op[hidden] { display: none; }
.op--flip .op-media { order: 2; }
.op::before { content: ''; position: absolute; inset: -16px; z-index: -1; border: 1px solid transparent; pointer-events: none; transition: border-color .4s, box-shadow .4s; }
.op.is-launched::before { border-color: var(--page-accent); box-shadow: 0 0 40px -10px var(--page-accent); animation: op-ping 2.4s ease-out; }
@keyframes op-ping { 0%, 30% { border-color: var(--page-accent-hi); } 100% { border-color: transparent; box-shadow: none; } }
.op-media { position: sticky; top: 140px; display: grid; gap: 8px; }
.op-media figure { position: relative; margin: 0; overflow: hidden; background: var(--deep); }
.op-media a { display: block; }
.op-media img { display: block; width: 100%; aspect-ratio: 16 / 9; object-fit: cover; transition: transform .8s var(--ease), filter 1.6s ease; }
.op-media a:hover img { transform: scale(1.03); }
.op-main { border: 1px solid var(--line); }
.op-main figcaption, .op-thumb figcaption { position: absolute; left: 0; right: 0; bottom: 0; padding: 26px 12px 8px; pointer-events: none;
  background: linear-gradient(0deg, rgba(6, 10, 22, .92), rgba(6, 10, 22, 0)); font-size: .62rem; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: #fff; }
.op-thumbs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.op-thumbs--1 { grid-template-columns: minmax(0, 1fr); }
.op-thumbs--1 img { aspect-ratio: 21 / 9; }
.op-thumbs--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.op-thumb figcaption { padding: 18px 8px 6px; font-size: .54rem; letter-spacing: .12em; }
.op-thumb { border: 1px solid var(--line); }

.op-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin: 0 0 10px; }
.op-status { padding: 3px 9px; font-size: .6rem; font-weight: 800; letter-spacing: .18em; text-transform: uppercase; border: 1px solid; }
.op-status--jouable { color: #9be7b5; border-color: rgba(155, 231, 181, .5); }
.op-status--coffre { color: #c3c9db; border-color: rgba(195, 201, 219, .4); background: repeating-linear-gradient(135deg, rgba(255, 255, 255, .06) 0 6px, transparent 6px 12px); }
.op-era { font-size: .64rem; font-weight: 700; letter-spacing: .2em; text-transform: uppercase; color: var(--faint); }
.op-name { margin: 0; font-size: clamp(1.7rem, 3vw, 2.5rem); font-weight: 900; line-height: 1.05; text-transform: uppercase; letter-spacing: .02em; color: var(--pearl); }
.op-en { margin: 4px 0 18px; font-family: var(--font-lore); font-size: 1.15rem; font-style: italic; color: var(--page-accent); transition: color .6s; }
.op-facts { display: grid; gap: 6px; margin: 0 0 18px; padding: 12px 14px; list-style: none; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.op-facts li { display: grid; grid-template-columns: 78px minmax(0, 1fr); gap: 10px; font-size: .86rem; line-height: 1.45; color: var(--ink); }
.op-facts b { font-size: .6rem; font-weight: 800; letter-spacing: .18em; text-transform: uppercase; color: var(--page-accent); padding-top: .25em; }
.op-facts a { color: var(--pearl); text-decoration-color: var(--page-accent); text-underline-offset: 3px; }
.op-brief p { margin: 0 0 12px; font-size: .98rem; line-height: 1.72; color: #cfd6e8; }
.op-quote { position: relative; margin: 18px 0; padding: 4px 0 4px 18px; border-left: 2px solid var(--page-accent); }
.op-quote p { margin: 0; font-family: var(--font-lore); font-size: 1.28rem; font-style: italic; line-height: 1.4; color: var(--pearl); }
.op-quote cite { display: block; margin-top: 6px; font-size: .64rem; font-style: normal; font-weight: 700; letter-spacing: .18em; text-transform: uppercase; color: var(--faint); }

.op-eggs { margin: 16px 0 0; border: 1px solid var(--line); background: rgba(12, 19, 40, .7); }
.op-eggs summary { display: flex; align-items: center; gap: 10px; padding: 12px 14px; cursor: pointer; list-style: none; font-size: .72rem; font-weight: 800;
  letter-spacing: .16em; text-transform: uppercase; color: var(--pearl); }
.op-eggs summary::-webkit-details-marker { display: none; }
.op-eggs summary svg { width: 18px; height: 18px; color: var(--page-accent); }
.op-eggs summary::after { content: '+'; margin-left: auto; font-size: 1.1rem; font-weight: 400; color: var(--muted); }
.op-eggs[open] summary::after { content: '−'; }
.op-eggs summary:hover { background: rgba(255, 255, 255, .03); }
.op-count { display: inline-grid; place-items: center; min-width: 22px; height: 22px; padding: 0 6px; border: 1px solid var(--line-strong); font-size: .64rem; color: var(--muted); }
.op-eggs.is-read .op-count { border-color: var(--page-accent); color: var(--page-accent); }
.op-eggs.is-read summary svg { opacity: .55; }
.op-eggs ul { display: grid; gap: 10px; margin: 0; padding: 4px 16px 16px 16px; list-style: none; }
.op-eggs li { position: relative; padding-left: 16px; font-size: .9rem; line-height: 1.65; color: var(--muted); }
.op-eggs li::before { content: ''; position: absolute; left: 0; top: .62em; width: 6px; height: 6px; background: var(--page-accent); transform: rotate(45deg); }
.op-eggs li b { color: var(--pearl); }
.op-eggs code { padding: 1px 5px; border: 1px solid var(--line); background: rgba(0, 0, 0, .35); font-size: .82em; color: var(--page-accent-hi); }
.op-loot { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; margin: 14px 0 0; font-size: .86rem; line-height: 1.55; color: var(--muted); }
.op-loot svg { width: 9px; height: 9px; color: var(--exotic); align-self: center; }
.op-loot b { font-size: .62rem; font-weight: 800; letter-spacing: .18em; text-transform: uppercase; color: var(--exotic); }
.op-link { margin: 12px 0 0; }
.op-link a { font-size: .74rem; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: var(--page-accent); text-decoration: none; }
.op-link a:hover { text-decoration: underline; }

/* ---------- Petits mécanismes des tiroirs ---------- */
.op-extra-row { position: relative; display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; margin: 0 16px 16px; padding-top: 14px; border-top: 1px dashed var(--line); }
.op-extra { padding: 9px 14px; font-size: .64rem; }
.op-extra.is-falling svg { animation: fall .6s ease-in; }
@keyframes fall { 0% { transform: translateY(-6px) rotate(0); } 100% { transform: translateY(6px) rotate(200deg); } }
.op-say { flex-basis: 100%; margin: 0; font-family: var(--font-lore); font-size: 1.1rem; font-style: italic; color: var(--pearl); }
.op-say.pop { animation: say-in .5s var(--ease); }
@keyframes say-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
.vigie-ball { width: 22px; height: 22px; border-radius: 50%; background: radial-gradient(circle at 35% 35%, #e6d0ff, #8a4dff 55%, #2a1150); box-shadow: 0 0 14px #8a4dff; }
.vigie-ball.kick { animation: kick 1s cubic-bezier(.2, .8, .3, 1); }
.vigie-ball.kick2 { animation: kick2 1s cubic-bezier(.2, .8, .3, 1); }
@keyframes kick { 0% { transform: translate(0, 0) rotate(0); } 45% { transform: translate(120px, -34px) rotate(300deg); } 100% { transform: translate(0, 0) rotate(720deg); } }
@keyframes kick2 { 0% { transform: translate(0, 0) rotate(0); } 50% { transform: translate(180px, -10px) rotate(-260deg); } 100% { transform: translate(0, 0) rotate(-720deg); } }
body.is-shaken main { animation: shake .6s linear; }
@keyframes shake { 0%, 100% { transform: none; } 15% { transform: translate(-6px, 3px); } 30% { transform: translate(5px, -4px); } 45% { transform: translate(-4px, -2px); } 60% { transform: translate(3px, 3px); } 80% { transform: translate(-2px, 1px); } }

/* ---------- Générateur ---------- */
.gen { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(260px, 1fr); gap: 24px; align-items: stretch; }
.gen-screen { position: relative; display: flex; flex-direction: column; justify-content: center; min-height: 280px; padding: clamp(24px, 4vw, 48px); overflow: hidden;
  border: 1px solid var(--line-strong); background: radial-gradient(ellipse at 50% 40%, rgba(242, 196, 109, .12), transparent 70%), #070c19; }
.gen-screen::after { content: ''; position: absolute; inset: 0; pointer-events: none; background: repeating-linear-gradient(0deg, rgba(255, 255, 255, .03) 0 1px, transparent 1px 3px); }
.gen-label { margin: 0 0 16px; font-size: .64rem; font-weight: 700; letter-spacing: .24em; text-transform: uppercase; color: var(--faint); }
.gen-name { margin: 0; font-size: clamp(1.8rem, 4.6vw, 3.6rem); font-weight: 900; line-height: 1.05; letter-spacing: .02em; text-transform: uppercase; color: var(--pearl); overflow-wrap: anywhere; }
.gen-name.is-real { color: var(--vanguard); text-shadow: 0 0 24px rgba(242, 196, 109, .45); }
.gen-name.flip { animation: flip .45s var(--ease); }
@keyframes flip { 0% { opacity: 0; transform: translateY(14px); filter: blur(4px); } 100% { opacity: 1; transform: none; filter: none; } }
.gen-line { margin: 16px 0 0; max-width: 60ch; font-family: var(--font-lore); font-size: 1.15rem; font-style: italic; line-height: 1.5; color: var(--muted); }
.gen-line a { color: var(--vanguard); font-family: var(--font-ui); font-size: .72rem; font-style: normal; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; }
.gen-side { display: flex; flex-direction: column; gap: 14px; padding: 18px; border: 1px solid var(--line); background: var(--panel-solid); }
.gen-go { justify-content: center; }
.gen-found { display: grid; gap: 6px; margin: 0; padding: 0; list-style: none; }
.gen-found li { display: flex; justify-content: space-between; gap: 10px; padding: 7px 10px; border: 1px solid var(--line); font-size: .8rem; color: var(--faint); }
.gen-found li b { font-weight: 700; letter-spacing: .04em; }
.gen-found li.is-found { border-color: rgba(242, 196, 109, .45); color: var(--pearl); }
.gen-found li.is-found b { color: var(--vanguard); }
.gen-found a { font-size: .7rem; color: var(--muted); text-align: right; }

/* ---------- Petits écrans ---------- */
@media (max-width: 1020px) {
  .op, .op--flip { grid-template-columns: minmax(0, 1fr); }
  .op--flip .op-media { order: 0; }
  .op-media { position: relative; top: 0; }
  .gen { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 700px) {
  .brief-cards { grid-template-columns: minmax(0, 1fr); }
  .ops-filter { top: 56px; padding: 0 10px; }
  .ops-filter-inner { gap: 8px; padding: 8px; }
  .ops-count { margin-left: 0; }
  .ops-launch { display: none; }
  .op-thumbs--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .op-thumbs--3 figure:last-child { grid-column: span 2; }
  .op-facts li { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .era-index ol { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (prefers-reduced-motion: reduce) {
  .vigie-ball.kick, .vigie-ball.kick2, body.is-shaken main, .op.is-launched::before, .gen-name.flip, .op-say.pop { animation: none; }
}
.op-anchor { position: absolute; top: 0; scroll-margin-top: 130px; }