/* =====================================================================
   E.C.F SÈRKA RECORDS — feuille de style
   Direction : auto-école mafieuse. Bitume, marquage au sol, panneaux,
   autoradio années 90. Chaque artiste a sa propre charte (thème).
   ===================================================================== */

:root {
  /* FRANCISTAN — identité de l'État (palette officielle du drapeau) */
  --srk-navy: #1B2A5A;
  --srk-red: #8E1B1B;
  --srk-gold: #D4A84B;
  --srk-cream: #F3EBD9;
  --srk-ink: #1A1A1A;
  --asphalte: #1e1f22;
  --bitume: #2b2d31;
  --bitume-2: #35383d;
  --marquage: #f1efe6;
  --gris: #a3a39b;
  --jaune: #f2c230;
  --rouge: #c8102e;
  --bleu-panneau: #1d4f9c;
  --lcd: #ff8a1f;
  --lcd-bg: #1b1006;

  --now: var(--jaune);          /* accent du morceau en cours */

  --f-display: "Barlow Condensed", "Arial Narrow", sans-serif;
  --f-body: "Barlow", system-ui, sans-serif;
  --f-lcd: "Share Tech Mono", ui-monospace, monospace;

  --gutter: clamp(16px, 4vw, 48px);
  --bar-h: 92px;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--asphalte);
  color: var(--marquage);
  font-family: var(--f-body);
  font-size: 17px;
  line-height: 1.55;
  padding-bottom: calc(var(--bar-h) + 24px);
  overflow-x: hidden;
}
/* grain d'enrobé sur tout le site */
body::before {
  content: "";
  position: fixed; inset: 0;
  pointer-events: none; z-index: 0;
  opacity: .22;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='180' height='180'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .55 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
}
main, header { position: relative; z-index: 1; }

a { color: inherit; }
img { display: block; max-width: 100%; }
button { font: inherit; color: inherit; cursor: pointer; }
:focus-visible { outline: 3px solid var(--jaune); outline-offset: 3px; }

.skip { position: absolute; left: -999px; top: 8px; background: var(--jaune); color: #000; padding: 8px 12px; z-index: 50; }
.skip:focus { left: 8px; }

/* ---------- marquage au sol (séparateur) ---------- */
.road {
  height: 10px; margin: 0;
  background: repeating-linear-gradient(90deg, var(--marquage) 0 64px, transparent 64px 112px);
  opacity: .85;
}
.road.yellow { background: repeating-linear-gradient(90deg, var(--jaune) 0 40px, transparent 40px 70px); }

/* ---------- barre du haut ---------- */
.topbar {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 14px var(--gutter);
  background: rgba(30,31,34,.92);
  backdrop-filter: blur(6px);
  position: sticky; top: 0; z-index: 20;
  border-bottom: 2px solid var(--bitume-2);
}
.brand { display: flex; align-items: center; gap: 10px; text-decoration: none; }
.brand-sign {
  width: 40px; height: 40px; border-radius: 50%;
  background: var(--marquage); color: var(--rouge);
  border: 6px solid var(--rouge);
  display: grid; place-items: center;
  font: 900 20px/1 var(--f-display);
}
.brand-txt { font: 800 24px/1 var(--f-display); letter-spacing: .02em; text-transform: uppercase; }
.brand-txt b { color: var(--jaune); font-weight: 800; }
.nav { display: flex; gap: 4px; flex-wrap: wrap; }
.nav a {
  text-decoration: none; padding: 8px 12px;
  font: 700 18px/1 var(--f-display); text-transform: uppercase; letter-spacing: .03em;
  color: var(--gris); border-radius: 3px;
}
.nav a:hover, .nav a[aria-current="page"] { color: var(--marquage); background: var(--bitume); }
.nav a.nav-radio { color: var(--lcd); }

/* ---------- conteneurs ---------- */
.wrap { padding: 0 var(--gutter); max-width: 1320px; margin: 0 auto; }
.section { padding-top: 64px; padding-bottom: 64px; }
.h-display {
  font-family: var(--f-display); font-weight: 900; text-transform: uppercase;
  line-height: .88; letter-spacing: -.01em; margin: 0;
}
.h2 { font: 800 clamp(34px, 5vw, 60px)/.95 var(--f-display); text-transform: uppercase; margin: 0 0 8px; }
.lead { font-size: 19px; color: #d8d6cc; max-width: 62ch; margin: 0; }
.muted { color: var(--gris); }

/* ---------- boutons ---------- */
.btn {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 14px 22px; border: 0; border-radius: 3px;
  font: 800 20px/1 var(--f-display); text-transform: uppercase; letter-spacing: .03em;
  text-decoration: none; background: var(--jaune); color: #141414;
}
.btn:hover { filter: brightness(1.08); }
.btn.ghost { background: transparent; color: var(--marquage); box-shadow: inset 0 0 0 2px var(--marquage); }
.btn.radio { background: var(--lcd); }

/* =====================================================================
   ACCUEIL
   ===================================================================== */
.hero { position: relative; min-height: min(86vh, 820px); display: grid; align-items: end; overflow: hidden; }
.hero-wall {
  position: absolute; inset: -10% -5%;
  display: grid; gap: 10px; align-content: center;
  transform: rotate(-6deg);
  opacity: .55;
}
.hero-row { display: flex; gap: 10px; width: max-content; animation: drift 90s linear infinite; }
.hero-row:nth-child(2) { animation-direction: reverse; animation-duration: 110s; }
.hero-row img { width: 200px; height: 200px; object-fit: cover; border-radius: 2px; filter: saturate(1.1) contrast(1.05); }
@keyframes drift { from { transform: translateX(0); } to { transform: translateX(-50%); } }
.hero::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(30,31,34,.35) 0%, rgba(30,31,34,.55) 45%, var(--asphalte) 96%);
}
/* fond vidéo de l'accueil : boucle muette, assombrie à gauche pour le texte */
.hero-video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 70% 50%; }
.hero:has(.hero-video)::after {
  background:
    linear-gradient(90deg, rgba(20,21,24,.88) 0%, rgba(20,21,24,.55) 45%, rgba(20,21,24,.10) 100%),
    linear-gradient(180deg, rgba(30,31,34,0) 55%, var(--asphalte) 100%);
}
/* bandeau de pochettes qui défile sous l'accueil */
.cover-band { overflow: hidden; padding: 16px 0; background: #141518; border-top: 4px solid var(--marquage); border-bottom: 4px solid var(--marquage); }
.cover-band .hero-row img { width: 150px; height: 150px; }
.hero-inner { position: relative; z-index: 2; padding: 0 var(--gutter) 56px; max-width: 1320px; margin: 0 auto; width: 100%; }
.hero-kicker {
  display: inline-flex; align-items: center; gap: 10px; margin-bottom: 18px;
  background: var(--bleu-panneau); color: #fff; padding: 6px 12px 6px 6px; border-radius: 4px;
  border: 2px solid #fff; font: 700 17px/1 var(--f-display); letter-spacing: .04em;
}
.hero-kicker i { font-style: normal; background: #fff; color: var(--bleu-panneau); padding: 4px 7px; border-radius: 2px; }
.hero h1 { font-size: clamp(64px, 13vw, 210px); }
.hero h1 .l2 { display: block; color: transparent; -webkit-text-stroke: 2px var(--marquage); }
.hero-motto { font: 600 clamp(18px, 2.2vw, 24px)/1.35 var(--f-body); margin: 22px 0 28px; max-width: 46ch; color: #e9e7dd; }
.hero-cta { display: flex; gap: 12px; flex-wrap: wrap; }

.onair { display: grid; grid-template-columns: 1fr auto; gap: 24px; align-items: end; }
.chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 18px; }
.chip {
  border: 2px solid var(--bitume-2); background: var(--bitume); color: var(--marquage);
  padding: 9px 14px; border-radius: 99px; font: 700 16px/1 var(--f-display); letter-spacing: .03em;
}
.chip b { color: var(--lcd); font-family: var(--f-lcd); font-weight: 400; margin-left: 6px; }
.chip:hover { border-color: var(--lcd); }

.feature { display: grid; grid-template-columns: minmax(260px, 440px) 1fr; gap: clamp(24px, 5vw, 64px); align-items: start; }
.feature-cover { position: relative; }
.feature-cover img { width: 100%; aspect-ratio: 1; object-fit: cover; box-shadow: 18px 18px 0 var(--rouge); }

/* =====================================================================
   PISTES
   ===================================================================== */
.tracks { list-style: none; margin: 18px 0 0; padding: 0; border-top: 1px solid var(--bitume-2); }
.track {
  display: grid; grid-template-columns: 34px 46px 1fr auto auto; gap: 14px; align-items: center;
  padding: 8px 6px; border-bottom: 1px solid var(--bitume-2);
}
.track:hover { background: var(--bitume); }
.track.playing { background: var(--bitume); box-shadow: inset 4px 0 0 var(--now); }
.track .n { font-family: var(--f-lcd); color: var(--gris); text-align: right; }
.track img { width: 46px; height: 46px; object-fit: cover; border-radius: 2px; }
.track .t { min-width: 0; }
.track .t strong { display: block; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.track .t a { color: var(--gris); text-decoration: none; font-size: 15px; }
.track .t a:hover { color: var(--marquage); text-decoration: underline; }
.tag { font: 700 13px/1 var(--f-display); letter-spacing: .04em; color: var(--gris); border: 1px solid var(--bitume-2); padding: 5px 8px; border-radius: 99px; white-space: nowrap; }
.play {
  width: 40px; height: 40px; border-radius: 50%; border: 0;
  background: var(--marquage); color: #111; font-size: 14px;
}
.play:hover { background: var(--now); }
.play[disabled] { background: var(--bitume-2); color: var(--gris); cursor: not-allowed; }

/* =====================================================================
   ARTISTES (chaque tuile prend la charte de l'artiste)
   ===================================================================== */
.grid-artists { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 14px; margin-top: 28px; }
.a-tile {
  position: relative; display: grid; grid-template-rows: auto 1fr; text-decoration: none;
  background: var(--t-bg); color: var(--t-fg); border-radius: 4px; overflow: hidden;
  min-height: 330px; isolation: isolate;
}
.a-tile img { width: 100%; aspect-ratio: 1; object-fit: cover; }
.a-tile .a-name { font-family: var(--t-font); font-size: 26px; line-height: 1.05; margin: 0; padding: 14px 14px 4px; }
.a-tile .a-genre { padding: 0 14px 16px; font-size: 14px; opacity: .8; }
.a-tile::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 6px; background: var(--t-accent); }
.a-tile:hover img { filter: brightness(1.1); }

/* textures de charte */
.tex-grain::before, .tex-check::before, .tex-halftone::before, .tex-scan::before,
.tex-stripes::before, .tex-glitter::before, .tex-crayon::before {
  content: ""; position: absolute; inset: 0; pointer-events: none; z-index: -1;
}
.tex-check::before { background: conic-gradient(rgba(0,0,0,.08) 25%, transparent 0 50%, rgba(0,0,0,.08) 0 75%, transparent 0) 0 0/28px 28px; }
.tex-halftone::before { background: radial-gradient(rgba(255,255,255,.08) 1.2px, transparent 1.6px) 0 0/9px 9px; }
.tex-scan::before { background: repeating-linear-gradient(0deg, rgba(255,255,255,.04) 0 1px, transparent 1px 4px); }
.tex-stripes::before { background: repeating-linear-gradient(135deg, rgba(255,255,255,.05) 0 14px, transparent 14px 28px); }
.tex-glitter::before { background: radial-gradient(rgba(255,255,255,.18) 1px, transparent 1.4px) 0 0/23px 17px, radial-gradient(rgba(255,255,255,.1) 1px, transparent 1.4px) 7px 9px/31px 29px; }
.tex-crayon::before { background: repeating-linear-gradient(-8deg, rgba(0,0,0,.04) 0 2px, transparent 2px 9px); }
.tex-grain::before { opacity: .35; background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='140' height='140'><filter id='g'><feTurbulence type='fractalNoise' baseFrequency='1.1' numOctaves='2'/><feColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .5 0'/></filter><rect width='100%' height='100%' filter='url(%23g)'/></svg>"); }

/* page artiste */
.artist-page { position: relative; isolation: isolate; background: var(--t-bg); color: var(--t-fg); }
.artist-hero { display: grid; grid-template-columns: minmax(240px, 420px) 1fr; gap: clamp(24px, 5vw, 64px); align-items: end; padding: 56px 0 40px; }
.artist-hero img { width: 100%; aspect-ratio: 1; object-fit: cover; box-shadow: 14px 14px 0 var(--t-accent); }
.artist-hero h1 { font-family: var(--t-font); font-size: clamp(46px, 8vw, 120px); line-height: .95; margin: 0 0 10px; overflow-wrap: anywhere; }
.artist-who { font-weight: 600; opacity: .85; margin: 0 0 18px; }
.artist-quote { font-family: var(--t-font); font-size: clamp(22px, 3vw, 34px); color: var(--t-accent); margin: 22px 0 0; }
.artist-page .tracks, .artist-page .track { border-color: color-mix(in srgb, var(--t-fg) 18%, transparent); }
.artist-page .track:hover, .artist-page .track.playing { background: color-mix(in srgb, var(--t-fg) 8%, transparent); }
.artist-page .track .t a, .artist-page .tag, .artist-page .n { color: color-mix(in srgb, var(--t-fg) 70%, transparent); }
.artist-page .play { background: var(--t-accent); color: var(--t-bg); }
.artist-page .btn { background: var(--t-accent); color: var(--t-bg); }
.artist-page .btn.ghost { background: transparent; color: var(--t-fg); box-shadow: inset 0 0 0 2px var(--t-fg); }
.artist-page a { color: inherit; }

/* =====================================================================
   DISCOGRAPHIE
   ===================================================================== */
.grid-albums { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 32px 22px; margin-top: 28px; }
.album-card { text-decoration: none; display: block; }
.sleeve { position: relative; aspect-ratio: 1; }
.sleeve img { position: relative; z-index: 2; width: 100%; height: 100%; object-fit: cover; }
.sleeve::after {
  content: ""; position: absolute; z-index: 1; top: 4%; bottom: 4%; right: -2%; width: 92%;
  border-radius: 50%;
  background: radial-gradient(circle, #d8d6cc 0 6%, #111 6.5% 8%, #1c1c1c 8.5% 31%, #0d0d0d 31.5% 100%);
  transition: transform .35s ease;
}
.album-card:hover .sleeve::after { transform: translateX(22%); }
.album-card h3 { font: 800 28px/1 var(--f-display); text-transform: uppercase; margin: 16px 0 4px; }
.album-card p { margin: 0; color: var(--gris); }

.back-btn {
  display: inline-flex; align-items: center; gap: 8px; margin-top: 24px; padding: 8px 16px 8px 12px;
  border: 2px solid currentColor; border-radius: 99px; background: transparent; color: inherit; cursor: pointer;
  font: 800 16px/1 var(--f-display); text-transform: uppercase; letter-spacing: .05em; opacity: .8;
  transition: opacity .15s, background .15s, transform .15s;
}
.back-btn:hover, .back-btn:focus-visible { opacity: 1; background: rgba(255,255,255,.08); transform: translateX(-3px); }
.back-btn span { font-size: 20px; }
.album-hero { display: grid; grid-template-columns: minmax(240px, 420px) 1fr; gap: clamp(24px, 5vw, 64px); align-items: end; padding: 48px 0 8px; }
.album-hero img { width: 100%; aspect-ratio: 1; object-fit: cover; box-shadow: 14px 14px 0 var(--jaune); }
.album-hero h1 { font-size: clamp(46px, 8vw, 110px); }
/* album avec vidéo d'ambiance (Bifle Machine : Sandrine danse) */
.album-hero.has-video { grid-template-columns: minmax(240px, 380px) minmax(0, 1fr) minmax(190px, 270px); }
.album-hero.has-video h1 { font-size: clamp(46px, 6vw, 96px); }
.album-video { margin: 0; align-self: end; }
.av-frame { position: relative; border-radius: 10px; padding: 4px; background: linear-gradient(160deg, #ff2e93, #f2c230, #2ee6ff, #8a5cff); box-shadow: 0 0 46px rgba(255, 70, 190, .35); }
.av-frame video { display: block; width: 100%; aspect-ratio: 9 / 16; object-fit: cover; border-radius: 7px; background: #000; }
.av-sound { position: absolute; right: 12px; bottom: 12px; padding: 6px 10px; font-size: 14px; background: rgba(17,17,17,.75); }
.av-sound.on { background: var(--jaune); color: #141414; }
.album-video figcaption { margin-top: 10px; font-size: 14px; line-height: 1.4; color: var(--gris); }
.album-video figcaption b { display: block; color: var(--marquage); font: 800 20px/1.1 var(--f-display); text-transform: uppercase; letter-spacing: .03em; }
@media (max-width: 1100px) { .album-hero.has-video { grid-template-columns: minmax(0, 1fr); } .album-video { max-width: 300px; } }
.album-actions { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 22px; }

/* =====================================================================
   UNIVERS
   ===================================================================== */
.lieux { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 18px; margin-top: 28px; }
.lieu { display: grid; grid-template-columns: 64px 1fr; gap: 16px; align-items: start; }
.lieu .sign {
  width: 64px; height: 64px; display: grid; place-items: center;
  background: var(--bleu-panneau); color: #fff; border: 3px solid #fff; border-radius: 6px;
  font: 900 24px/1 var(--f-display);
}
.lieu h3 { font: 800 26px/1 var(--f-display); text-transform: uppercase; margin: 2px 0 0; }
.lieu .sub { color: var(--jaune); font-weight: 600; margin: 2px 0 6px; }
.lieu p { margin: 0; color: #d8d6cc; }

.crew { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 14px; margin-top: 28px; }
.crew-card {
  position: relative; isolation: isolate; text-decoration: none; display: block;
  background: var(--t-bg, var(--bitume)); color: var(--t-fg, var(--marquage));
  padding: 22px; border-radius: 4px; border-left: 6px solid var(--t-accent, var(--jaune));
}
.crew-card h3 { font-family: var(--t-font, var(--f-display)); font-size: 30px; line-height: 1; margin: 0 0 4px; }
.crew-card .who { font-weight: 600; opacity: .8; margin: 0 0 12px; }
.crew-card blockquote { margin: 0 0 12px; font-family: var(--t-font, var(--f-display)); font-size: 22px; color: var(--t-accent, var(--jaune)); }
.crew-card p { margin: 0; }

.vilains { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 14px; margin-top: 28px; }
.vilain { background: var(--marquage); color: #151515; padding: 20px; border-radius: 4px; position: relative; }
.vilain::before {
  content: ""; position: absolute; top: 16px; right: 16px; width: 34px; height: 30px;
  background: var(--rouge); clip-path: polygon(50% 0, 100% 100%, 0 100%);
}
.vilain h3 { font: 900 30px/1 var(--f-display); text-transform: uppercase; margin: 0 0 4px; padding-right: 44px; }
.vilain .who { font-weight: 600; color: var(--rouge); margin: 0 0 8px; }
.vilain p { margin: 0; }

/* =====================================================================
   SÈRKA FM — la façade d'autoradio
   ===================================================================== */
.fm { padding-top: 40px; padding-bottom: 64px; }
.fm.wrap { max-width: 1720px; }
.faceplate {
  background: linear-gradient(180deg, #2f3136, #1d1e21);
  border-radius: 14px; padding: clamp(16px, 3vw, 28px);
  box-shadow: inset 0 2px 0 rgba(255,255,255,.08), inset 0 -3px 0 rgba(0,0,0,.5), 0 30px 60px rgba(0,0,0,.45);
  border: 1px solid #44474d;
}
.fp-head { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-bottom: 16px; }
.fp-brand { font: 900 30px/1 var(--f-display); text-transform: uppercase; letter-spacing: .06em; }
.fp-brand span { color: var(--lcd); }
.fp-model { font-family: var(--f-lcd); color: var(--gris); font-size: 14px; }
.fp-main { display: grid; grid-template-columns: 1.3fr 1fr; gap: 18px; }
.lcd-big {
  background: var(--lcd-bg); color: var(--lcd); border-radius: 6px; padding: 18px 20px;
  font-family: var(--f-lcd); text-shadow: 0 0 8px rgba(255,138,31,.55);
  box-shadow: inset 0 0 0 2px #000, inset 0 0 24px rgba(0,0,0,.8);
  display: grid; gap: 8px; min-height: 230px; align-content: start;
}
.lcd-freq { font-size: clamp(54px, 8vw, 96px); line-height: .9; letter-spacing: .02em; }
.lcd-freq small { font-size: .35em; margin-left: 6px; }
.lcd-station { font-size: 22px; text-transform: uppercase; }
.lcd-now { font-size: 18px; text-transform: uppercase; white-space: nowrap; overflow: hidden; }
.lcd-dj { font-size: 16px; opacity: .85; min-height: 2.6em; }
.lcd-big canvas { width: 100%; height: 60px; display: block; }
.fp-stage { display: grid; grid-template-columns: minmax(300px, min(68vh, 780px)) minmax(0, 1fr); gap: clamp(18px, 2.5vw, 36px); align-items: start; }
.fp-panel, .fp-deckcol { min-width: 0; }
.fp-panel { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; align-content: start; }
.fp-label { display: block; font-family: var(--f-lcd); color: var(--gris); font-size: 14px; text-transform: uppercase; letter-spacing: .06em; margin: 0 0 6px; }
.fp-now { background: #15161a; border-radius: 8px; padding: 16px 18px; border-left: 4px solid var(--now); }
.fp-now strong { display: block; font: 900 clamp(28px, 3vw, 44px)/1 var(--f-display); text-transform: uppercase; margin-bottom: 6px; }
.fp-meta, .fp-meta a { color: var(--gris); }
.fp-meta a:hover { color: var(--marquage); }
.deck-bar { display: flex; justify-content: space-between; align-items: center; gap: 10px; flex-wrap: wrap; margin-top: 16px; }
.deck-switch { display: inline-flex; gap: 6px; }

/* historique en pochettes */
.fp-hist { margin-top: 4px; }
.hist-covers { display: grid; grid-template-columns: repeat(auto-fill, minmax(118px, 1fr)); gap: 14px; }
.hist-item { display: grid; gap: 4px; text-decoration: none; color: var(--marquage); min-width: 0; }
.hist-item img { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: 3px; box-shadow: 0 10px 22px rgba(0,0,0,.45); transition: transform .2s; }
.hist-item:hover img { transform: translateY(-4px) rotate(-1.5deg); }
.hist-item span { font: 800 17px/1.1 var(--f-display); text-transform: uppercase; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hist-item small { color: var(--gris); font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* =====================================================================
   PLATINE — pochette géante ou vinyle qui tourne
   ===================================================================== */
.deck { position: relative; width: 100%; }
.deck-empty { aspect-ratio: 1; display: grid; place-items: center; border-radius: 10px; background: repeating-radial-gradient(circle at 50% 50%, #141416 0 2px, #1b1c1f 2px 4px); }
.deck-ph { text-align: center; font: 900 clamp(48px, 6vw, 90px)/.9 var(--f-display); text-transform: uppercase; color: var(--bitume-2); }
.deck-ph b { color: var(--lcd); opacity: .5; }
.deck-ph small { display: block; font: 400 .35em var(--f-lcd); margin-top: 10px; }

/* mode pochette : la pochette en grand, le disque sort de la pochette quand ça joue */
.deck-cover { aspect-ratio: 100 / 84; }
.deck-cover .sleeve-img { position: relative; z-index: 2; width: 84%; height: 100%; object-fit: cover; border-radius: 3px; box-shadow: 0 30px 60px rgba(0,0,0,.6), 0 0 0 1px rgba(255,255,255,.06); }
.deck-cover .peek {
  position: absolute; z-index: 1; left: 3%; top: 3.6%; width: 78%; aspect-ratio: 1; border-radius: 50%;
  background:
    radial-gradient(circle, var(--now) 0 13%, #0b0b0c 13.5% 15%, transparent 15.5%),
    repeating-radial-gradient(circle, #0e0e10 0 1px, #19191c 1.5px 3px);
  box-shadow: 0 12px 30px rgba(0,0,0,.6);
  transition: transform .9s cubic-bezier(.2,.8,.2,1);
}
body.is-playing .deck-cover .peek { transform: translateX(24%); }

/* mode vinyle : platine, disque qui tourne à 33 tours, pochette en rond central */
.deck-vinyl {
  aspect-ratio: 1; border-radius: 12px;
  background: linear-gradient(145deg, #2e3035, #141518);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.08), 0 24px 50px rgba(0,0,0,.5);
}
.platter { position: absolute; left: 4%; top: 4%; width: 86%; aspect-ratio: 1; border-radius: 50%; background: #08080a; box-shadow: 0 14px 34px rgba(0,0,0,.75), 0 0 0 2px #3a3c41; }
.disc {
  position: absolute; inset: 1.5%; border-radius: 50%;
  background:
    radial-gradient(circle, transparent 0 33%, rgba(255,255,255,.06) 33.4% 33.9%, transparent 34.3% 96%, rgba(255,255,255,.07) 96.5%, transparent 97.5%),
    repeating-radial-gradient(circle, #0c0c0e 0 1px, #17171a 1.4px 2.4px, #0c0c0e 3px);
  animation: spin 1.8s linear infinite; animation-play-state: paused;
}
body.is-playing .disc { animation-play-state: running; }
.disc .label { position: absolute; left: 31%; top: 31%; width: 38%; height: 38%; border-radius: 50%; object-fit: cover; box-shadow: 0 0 0 3px #0b0b0c, 0 0 0 5px rgba(255,255,255,.05); }
.spindle { position: absolute; left: 50%; top: 50%; width: 3.2%; height: 3.2%; transform: translate(-50%, -50%); border-radius: 50%; background: radial-gradient(circle at 35% 35%, #f2f2f2, #7a7c80 70%); box-shadow: 0 0 0 2px #0b0b0c; }
.glare {
  position: absolute; inset: 1.5%; border-radius: 50%; pointer-events: none; mix-blend-mode: screen;
  background: conic-gradient(from 25deg, transparent 0 6%, rgba(255,255,255,.13) 11%, transparent 17% 50%, rgba(255,255,255,.09) 61%, transparent 67%);
  -webkit-mask: radial-gradient(circle, transparent 0 35%, #000 36%); mask: radial-gradient(circle, transparent 0 35%, #000 36%);
}
.tonearm {
  position: absolute; right: 3%; top: 4%; width: 14%; height: 72%; z-index: 3; pointer-events: none;
  transform-origin: 50% 7%; transform: rotate(-4deg);
  transition: transform 1.2s cubic-bezier(.3,.7,.2,1);
}
body.is-playing .tonearm { transform: rotate(20deg); }
.arm { position: absolute; left: calc(50% - 3px); top: 7%; width: 6px; height: 80%; border-radius: 3px; background: linear-gradient(90deg, #8d8f94, #ececec 45%, #7d7f84); box-shadow: 4px 6px 10px rgba(0,0,0,.5); }
.arm-head { position: absolute; left: 50%; top: 84%; width: 30%; height: 11%; transform: translateX(-50%); border-radius: 3px; background: linear-gradient(180deg, #d6d6d6, #8a8c91); box-shadow: 3px 6px 10px rgba(0,0,0,.55); }
.arm-base { position: absolute; left: 50%; top: 7%; width: 72%; aspect-ratio: 1; transform: translate(-50%, -50%); border-radius: 50%; background: radial-gradient(circle at 35% 30%, #e2e2e2, #6b6d72 60%, #26272b); box-shadow: 0 6px 14px rgba(0,0,0,.6); }
@keyframes spin { to { transform: rotate(360deg); } }

/* =====================================================================
   LECTEUR PLEIN ÉCRAN
   ===================================================================== */
.ar-cover { border: 0; padding: 0; background: none; cursor: zoom-in; border-radius: 3px; }
.ar-cover img[src=""], .ar-cover img:not([src]) { visibility: hidden; }
.ar-cover:hover img, .ar-cover:focus-visible img { outline: 2px solid var(--lcd); outline-offset: 2px; }
.np { position: fixed; inset: 0 0 var(--bar-h) 0; z-index: 50; display: grid; place-items: center; background: #0d0d0f; overflow: hidden auto; }
.np[hidden] { display: none; }
.np-bg { position: absolute; inset: -10%; background: center / cover no-repeat; filter: blur(70px) saturate(1.5) brightness(.42); transform: scale(1.15); transition: background-image .6s; }
.np-inner {
  position: relative; z-index: 1; width: 100%; padding: 40px var(--gutter);
  display: grid; grid-template-columns: minmax(260px, min(70vh, 680px)) minmax(260px, 480px); justify-content: center; align-items: center; gap: clamp(28px, 5vw, 80px);
}
.np-kicker { font-family: var(--f-lcd); color: var(--lcd); margin: 0; letter-spacing: .04em; text-shadow: 0 0 8px rgba(255,138,31,.5); }
.np-info h2 { font: 900 clamp(40px, 5.5vw, 84px)/.92 var(--f-display); text-transform: uppercase; margin: 10px 0 14px; text-shadow: 0 4px 30px rgba(0,0,0,.5); }
.np-artist, .np-album { margin: 0 0 4px; font-size: 20px; }
.np-info a { color: var(--marquage); }
.np-album a { color: #d8d6cc; }
.np-ctl { display: flex; gap: 12px; align-items: center; margin: 26px 0 18px; }
.np-ctl .knob { font-size: 22px; padding: 14px 20px; }
.np-ctl .knob.big { font-size: 28px; padding: 18px 30px; color: var(--lcd); }
.np-close { position: absolute; top: 18px; right: 18px; z-index: 2; font-size: 20px; }
body.np-open { overflow: hidden; }
.fp-side { display: grid; gap: 14px; align-content: start; }
.fp-actions { display: flex; gap: 10px; flex-wrap: wrap; }
.knob {
  border: 0; border-radius: 6px; padding: 12px 16px;
  background: linear-gradient(180deg, #45484f, #2a2c31); color: var(--marquage);
  font: 800 17px/1 var(--f-display); text-transform: uppercase; letter-spacing: .04em;
  box-shadow: 0 3px 0 #111, inset 0 1px 0 rgba(255,255,255,.15);
}
.knob:active { transform: translateY(2px); box-shadow: 0 1px 0 #111; }
.knob.on { color: var(--lcd); box-shadow: 0 3px 0 #111, inset 0 0 0 2px var(--lcd); }
.voice-pick { display: grid; grid-template-columns: minmax(0, 1fr); gap: 6px; }
.voice-pick label { font-family: var(--f-lcd); color: var(--gris); font-size: 14px; text-transform: uppercase; letter-spacing: .06em; }
.voice-row { display: flex; gap: 10px; }
.voice-row select {
  flex: 1; min-width: 0; padding: 10px 12px; border-radius: 6px;
  background: var(--lcd-bg); color: var(--lcd); border: 1px solid #44474d;
  font-family: var(--f-lcd); font-size: 15px; text-shadow: 0 0 6px rgba(255,138,31,.45);
  box-shadow: inset 0 0 12px rgba(0,0,0,.8);
}
.voice-row select:focus { outline: 2px solid var(--lcd); outline-offset: 1px; }
.voice-row select option { background: #15161a; color: var(--marquage); text-shadow: none; }
.presets { display: grid; grid-template-columns: repeat(auto-fill, minmax(138px, 1fr)); gap: 10px; margin-top: 18px; }
.preset {
  border: 0; border-radius: 6px; padding: 12px; text-align: left;
  background: linear-gradient(180deg, #3b3e44, #26282c); color: var(--marquage);
  box-shadow: 0 4px 0 #0f0f10, inset 0 1px 0 rgba(255,255,255,.12);
  display: grid; gap: 4px;
}
.preset .num { font-family: var(--f-lcd); color: var(--gris); font-size: 13px; }
.preset .lbl { font: 800 19px/1.05 var(--f-display); text-transform: uppercase; }
.preset .fq { font-family: var(--f-lcd); color: var(--lcd); }
.preset[aria-pressed="true"] { box-shadow: 0 2px 0 #0f0f10, inset 0 0 0 2px var(--lcd); transform: translateY(2px); }
.history { list-style: none; padding: 0; margin: 0; font-size: 15px; color: var(--gris); }
.history li { padding: 4px 0; border-bottom: 1px dashed #3a3c41; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* =====================================================================
   CLIPS
   ===================================================================== */
.clips { display: grid; grid-template-columns: repeat(auto-fill, minmax(380px, 1fr)); gap: 22px; margin-top: 28px; }
.clip video { width: 100%; aspect-ratio: 16/9; background: #000; border-radius: 4px; }
.clip h3 { font: 800 26px/1 var(--f-display); text-transform: uppercase; margin: 12px 0 2px; }
.empty {
  margin-top: 28px; padding: 28px; border: 2px dashed var(--bitume-2); border-radius: 6px; max-width: 70ch;
}
.empty code { font-family: var(--f-lcd); background: var(--bitume); padding: 2px 6px; border-radius: 3px; }

/* =====================================================================
   AUTORADIO (lecteur persistant)
   ===================================================================== */
.autoradio {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 30;
  height: var(--bar-h);
  display: grid; grid-template-columns: 72px 1fr auto 150px; gap: 14px; align-items: center;
  padding: 10px var(--gutter);
  background: linear-gradient(180deg, #34363c, #1b1c1f);
  border-top: 3px solid var(--now);
  box-shadow: 0 -10px 30px rgba(0,0,0,.4);
}
.ar-cover img { width: 72px; height: 72px; object-fit: cover; border-radius: 3px; background: #111; }
.ar-lcd {
  min-width: 0; background: var(--lcd-bg); color: var(--lcd);
  border-radius: 4px; padding: 6px 10px 4px; font-family: var(--f-lcd);
  box-shadow: inset 0 0 0 2px #000, inset 0 0 14px rgba(0,0,0,.7);
  text-shadow: 0 0 6px rgba(255,138,31,.5);
}
.lcd-top { display: flex; justify-content: space-between; font-size: 13px; opacity: .9; }
.lcd-scroll { overflow: hidden; white-space: nowrap; font-size: 18px; text-transform: uppercase; }
.lcd-scroll span { display: inline-block; padding-left: 100%; animation: marquee 16s linear infinite; }
@keyframes marquee { from { transform: translateX(0); } to { transform: translateX(-100%); } }
.seek, .vol { width: 100%; accent-color: var(--lcd); height: 14px; margin: 2px 0 0; }
.ar-ctrl { display: flex; gap: 8px; }
#pl-full { font-size: 18px; }
#pl-full.on { color: var(--lcd); box-shadow: inset 0 0 0 2px var(--lcd); }
.btn-ar {
  width: 46px; height: 46px; border-radius: 50%; border: 0;
  background: linear-gradient(180deg, #4a4d54, #2b2d32); color: var(--marquage); font-size: 16px;
  box-shadow: 0 3px 0 #0e0e0f;
}
.btn-ar:active { transform: translateY(2px); box-shadow: 0 1px 0 #0e0e0f; }
.btn-play { width: 56px; height: 56px; background: var(--now); color: #111; font-size: 20px; }
.ar-side { display: grid; gap: 6px; }

.eq { display: flex; gap: 3px; align-items: end; height: 22px; }
.eq span { flex: 1; background: var(--lcd); height: 15%; border-radius: 1px; opacity: .8; }
body.is-playing .eq span { animation: eq 0.9s ease-in-out infinite alternate; }
.eq span:nth-child(2) { animation-delay: -.3s !important; }
.eq span:nth-child(3) { animation-delay: -.6s !important; }
.eq span:nth-child(4) { animation-delay: -.15s !important; }
.eq span:nth-child(5) { animation-delay: -.45s !important; }
@keyframes eq { 0% { height: 15%; } 50% { height: 95%; } 100% { height: 40%; } }

.toast {
  position: fixed; left: 50%; bottom: calc(var(--bar-h) + 14px); transform: translateX(-50%) translateY(20px);
  background: var(--marquage); color: #111; padding: 10px 16px; border-radius: 4px; font-weight: 600;
  opacity: 0; pointer-events: none; transition: .25s; z-index: 40; max-width: 90vw;
}
.toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }

/* =====================================================================
   PASTICHES, NOUVEAUTÉ, LABELS, GALERIE
   ===================================================================== */
.facon { font-style: italic; color: var(--gris); font-size: .92em; }
.lbl-chip {
  display: inline-block; margin-top: 10px; padding: 5px 9px; border-radius: 3px; text-decoration: none;
  font: 700 12px/1 var(--f-lcd); text-transform: uppercase; letter-spacing: .08em;
  background: #111; color: var(--gris); border: 1px solid var(--bitume-2);
}
.lbl-chip.vnr { color: #ff5a68; border-color: #c8102e; }
.lbl-chip.kebab { color: #ffb000; border-color: #ffb000; }
.album-label { margin: 14px 0 0; color: var(--gris); font-weight: 600; display: flex; align-items: center; gap: 10px; }
.album-label .lbl-chip { margin: 0; font-size: 14px; }
.lead a { color: inherit; }

/* nouveauté sur l'accueil */
.nouveaute {
  display: grid; grid-template-columns: 150px 1fr auto; gap: 24px; align-items: center; text-decoration: none; color: var(--marquage);
  padding: 18px; border-radius: 10px; border: 2px solid #ffb000;
  background: linear-gradient(110deg, rgba(255,176,0,.16), rgba(200,16,46,.10) 60%, transparent);
  transition: transform .2s;
}
.nouveaute:hover { transform: translateY(-3px); }
.nouveaute img { width: 150px; height: 150px; object-fit: cover; border-radius: 3px; box-shadow: 8px 8px 0 #ffb000; }
.nv-txt { display: grid; gap: 6px; }
.nv-kicker { font: 700 14px/1 var(--f-lcd); color: #ffb000; text-transform: uppercase; letter-spacing: .08em; }
.nv-txt strong { font: 900 clamp(32px, 4vw, 54px)/.95 var(--f-display); text-transform: uppercase; }
.nv-txt span:last-child { color: #d8d6cc; }

/* labels */
.label-block { padding: 56px 0 64px; }
.label-vnr { --lb-accent: #ff3347; background: linear-gradient(180deg, #0c0c0d, #1a080b); }
.label-kebab { --lb-accent: #ffb000; background: radial-gradient(ellipse at 15% 0%, rgba(255,176,0,.22), transparent 55%), linear-gradient(180deg, #24120a, #170b05); }
.label-head { display: grid; grid-template-columns: 230px 1fr; gap: clamp(20px, 4vw, 52px); align-items: center; margin-bottom: 36px; }
.label-badge {
  width: 230px; aspect-ratio: 1; border-radius: 50%; display: grid; place-content: center; text-align: center;
  border: 6px solid var(--lb-accent); box-shadow: inset 0 0 0 10px rgba(0,0,0,.35), 0 22px 44px rgba(0,0,0,.55);
}
.label-badge span { display: block; }
.label-badge small { display: block; margin-top: 8px; font: 700 14px/1 var(--f-lcd); letter-spacing: .16em; text-transform: uppercase; }
.label-vnr .label-badge { background: repeating-linear-gradient(45deg, #101011 0 12px, #19191b 12px 24px); color: #f1efe6; }
.label-vnr .label-badge span { font: 400 78px/.9 "Stardos Stencil", var(--f-display); letter-spacing: .04em; }
.label-vnr .label-badge small { color: var(--lb-accent); }
.label-kebab .label-badge { background: radial-gradient(circle at 50% 38%, #ffd36b, #f08a00 62%, #8a3b00); color: #2a1405; transform: rotate(-7deg); }
.label-kebab .label-badge span { font: 400 50px/.9 "Bungee", var(--f-display); }
.label-kicker { font-family: var(--f-lcd); color: var(--lb-accent); text-transform: uppercase; letter-spacing: .08em; margin: 0; }
.label-name { font: 900 clamp(44px, 7vw, 100px)/.92 var(--f-display); text-transform: uppercase; margin: 6px 0 10px; }
.label-motto { font-size: 22px; font-weight: 700; color: var(--lb-accent); margin: 0 0 14px; }
.label-stats { margin: 16px 0 0; color: var(--gris); }
.label-stats b { color: var(--lb-accent); font: 400 22px var(--f-lcd); }
.label-stats a { color: var(--marquage); }
.label-mini { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 18px; margin-top: 24px; }
.label-mini-item { display: flex; gap: 18px; align-items: center; padding: 16px; border-radius: 10px; text-decoration: none; color: var(--marquage); border: 1px solid #3a3c41; }
.label-mini-item strong { display: block; font: 900 30px/1 var(--f-display); text-transform: uppercase; }
.label-mini-item small { color: var(--lb-accent); font-weight: 600; }
.label-badge.sm { width: 92px; border-width: 4px; flex: none; box-shadow: inset 0 0 0 5px rgba(0,0,0,.35); }
.label-vnr .label-badge.sm span { font-size: 30px; }
.label-kebab .label-badge.sm span { font-size: 19px; }

/* galerie */
.gal-chips { margin: 22px 0 26px; }
.chip.on { border-color: var(--lcd); color: var(--lcd); }
.gal-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 14px; }
.gal-item { position: relative; padding: 0; border: 0; background: #111; cursor: zoom-in; aspect-ratio: 1; overflow: hidden; border-radius: 3px; box-shadow: 0 10px 24px rgba(0,0,0,.45); }
.gal-item img { width: 100%; height: 100%; object-fit: cover; transition: transform .35s; }
.gal-item:hover img, .gal-item:focus-visible img { transform: scale(1.06); }
.gal-item:focus-visible { outline: 3px solid var(--lcd); outline-offset: 2px; }
.gal-cap {
  position: absolute; left: 0; right: 0; bottom: 0; padding: 28px 10px 9px; text-align: left; display: grid; gap: 2px;
  background: linear-gradient(transparent, rgba(0,0,0,.88)); color: var(--marquage);
  opacity: 0; transform: translateY(6px); transition: .2s;
}
.gal-item:hover .gal-cap, .gal-item:focus-visible .gal-cap { opacity: 1; transform: none; }
.gal-cap strong { font: 800 17px/1.05 var(--f-display); text-transform: uppercase; }
.gal-cap small { color: #cfcdc4; font-size: 13px; }
.lb {
  position: fixed; inset: 0 0 var(--bar-h) 0; z-index: 55; background: rgba(8,8,10,.95);
  display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 14px; padding: 24px var(--gutter);
}
.lb[hidden] { display: none !important; }
.lb-fig { margin: 0; display: grid; justify-items: center; gap: 14px; min-width: 0; }
.lb-fig img { max-width: 100%; max-height: calc(100vh - var(--bar-h) - 200px); object-fit: contain; border-radius: 3px; box-shadow: 0 30px 70px rgba(0,0,0,.7); }
.lb-fig figcaption { text-align: center; display: grid; gap: 6px; max-width: 900px; margin: 0 auto; }
.lb-fig figcaption strong { font: 900 clamp(26px, 3vw, 40px)/1 var(--f-display); text-transform: uppercase; }
.lb-fig figcaption a { color: var(--marquage); }
.lb-actions { display: flex; gap: 10px; justify-content: center; align-items: center; flex-wrap: wrap; margin-top: 6px; }
.lb-nav { font-size: 34px; padding: 12px 18px; }
.lb-close { position: absolute; top: 16px; right: 16px; }

@media (max-width: 760px) {
  .nouveaute { grid-template-columns: 96px 1fr; }
  .nouveaute img { width: 96px; height: 96px; }
  .nouveaute .btn { grid-column: 1 / -1; justify-self: start; }
  .label-head { grid-template-columns: 1fr; }
  .label-badge { width: 170px; }
  .lb { grid-template-columns: minmax(0, 1fr); }
  .lb-nav { position: absolute; bottom: 14px; }
  .lb-prev { left: 14px; } .lb-next { right: 14px; }
}

/* =====================================================================
   FOND DE PAGE (image large, sujets sur les bords, centre assombri)
   ===================================================================== */
.backdrop {
  position: fixed; inset: 0; z-index: 0; pointer-events: none; opacity: 0;
  background: center / cover no-repeat; transition: opacity .6s;
}
body[data-page="discographie"] .backdrop {
  opacity: 1;
  background-image:
    linear-gradient(90deg, rgba(30,31,34,.15) 0%, rgba(30,31,34,.82) 22%, rgba(30,31,34,.93) 50%, rgba(30,31,34,.82) 78%, rgba(30,31,34,.15) 100%),
    url("../media/fond-discographie.jpg");
}

/* =====================================================================
   DISCOGRAPHIE — LA ROUTE DU LABEL
   ===================================================================== */
.disco-head { padding-bottom: 24px; }
.disco-head .chips { margin-top: 22px; }
.route-wrap { position: relative; max-width: 1560px; margin: 0 auto; padding: 0 var(--gutter) 40px; }
.route { position: relative; display: grid; gap: clamp(40px, 6vw, 90px); padding: 40px 0; }
/* la chaussée */
.route::before {
  content: ""; position: absolute; top: 0; bottom: 0; left: 50%; width: 120px; transform: translateX(-50%);
  background: #26272b; border-left: 4px solid rgba(241,239,230,.75); border-right: 4px solid rgba(241,239,230,.75);
  box-shadow: 0 0 40px rgba(0,0,0,.6);
}
/* la ligne centrale discontinue */
.route::after {
  content: ""; position: absolute; top: 0; bottom: 0; left: 50%; width: 6px; transform: translateX(-50%);
  background: repeating-linear-gradient(to bottom, var(--marquage) 0 46px, transparent 46px 92px);
}
.route-cap {
  position: relative; z-index: 2; width: max-content; margin: 0 auto; padding: 10px 22px;
  background: var(--bleu-panneau); color: #fff; border: 3px solid #fff; border-radius: 8px;
  font: 900 22px/1 var(--f-display); text-transform: uppercase; letter-spacing: .08em; box-shadow: 0 10px 24px rgba(0,0,0,.5);
}
.route-cap.end { background: #1f8a4c; }

.stop { position: relative; z-index: 1; display: grid; grid-template-columns: minmax(0, 1fr) 120px minmax(0, 1fr); grid-template-areas: "cover road info"; gap: clamp(20px, 3vw, 44px); align-items: center; }
.stop.flip { grid-template-areas: "info road cover"; }
.stop-cover { grid-area: cover; justify-self: end; width: min(100%, 440px); text-decoration: none; }
.stop.flip .stop-cover { justify-self: start; }
.stop-cover .sleeve img { box-shadow: 0 26px 50px rgba(0,0,0,.6); border-radius: 2px; }
.stop-cover:hover .sleeve::after { transform: translateX(22%); }
.stop.flip .stop-cover:hover .sleeve::after { transform: translateX(-22%); }
.stop.flip .sleeve::after { right: auto; left: -2%; }
.stop-road { grid-area: road; display: grid; place-items: center; }
.stop-info { grid-area: info; max-width: 600px; min-width: 0; }
.stop.flip .stop-info { justify-self: end; text-align: right; }
.stop.flip .stop-info .album-actions { justify-content: flex-end; }
.stop.flip .stop-info .tracks { text-align: left; }
.stop-kicker { margin: 0; font: 700 14px/1 var(--f-lcd); color: var(--lcd); text-transform: uppercase; letter-spacing: .1em; }
.stop-title { margin: 8px 0 8px; font: 900 clamp(30px, 3.8vw, 72px)/.92 var(--f-display); text-transform: uppercase; overflow-wrap: break-word; }
.stop-title a { color: var(--marquage); text-decoration: none; }
.stop-title a:hover { color: var(--jaune); }
.stop-meta { margin: 0 0 10px; color: var(--gris); font-weight: 600; }
.stop-meta .lbl-chip { margin: 0 0 0 8px; vertical-align: middle; }
.stop-desc { margin: 0 0 14px; color: #d8d6cc; }
.stop-info .tracks { margin: 0 0 16px; }

/* borne kilométrique */
.borne {
  position: relative; width: 66px; height: 84px; display: grid; place-items: end center; padding-bottom: 10px;
  background: #f1efe6; color: #111; border-radius: 33px 33px 6px 6px; overflow: hidden;
  box-shadow: 0 10px 22px rgba(0,0,0,.55);
}
.borne::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 36%; background: var(--rouge); }
.borne small { position: absolute; top: 8px; left: 0; right: 0; text-align: center; color: #fff; font: 700 12px/1 var(--f-lcd); letter-spacing: .1em; }
.borne b { font: 900 34px/1 var(--f-display); }
.borne.travaux { background: repeating-linear-gradient(-45deg, #ff8a1f 0 12px, #f1efe6 12px 24px); place-items: center; padding: 0; }
.borne.travaux::before, .borne.secours::before { display: none; }
.borne.travaux span { font-size: 34px; filter: drop-shadow(0 2px 2px rgba(0,0,0,.4)); }
.borne.secours { background: #1f8a4c; color: #fff; place-items: center; padding: 0; }
.borne.secours span { font: 900 40px/1 var(--f-display); }

/* chantier FranciscoLand */
.stop.travaux .sleeve::before {
  content: "EN TRAVAUX"; position: absolute; z-index: 3; left: -4%; right: -4%; top: 44%;
  padding: 8px 0; text-align: center; background: #ff8a1f; color: #111; transform: rotate(-6deg);
  font: 900 clamp(22px, 2.6vw, 34px)/1 var(--f-display); letter-spacing: .12em;
  border-top: 6px solid #111; border-bottom: 6px solid #111; box-shadow: 0 10px 20px rgba(0,0,0,.5);
}
.stop.secours .stop-kicker { color: #3ccf7a; }

@media (max-width: 900px) {
  .route::before { left: 28px; width: 56px; border-width: 3px; }
  .route::after { left: 28px; width: 4px; }
  .route-cap { margin-left: 0; }
  .stop, .stop.flip { grid-template-columns: 56px minmax(0, 1fr); grid-template-areas: "road cover" "road info"; gap: 14px 18px; align-items: start; }
  .stop-cover, .stop.flip .stop-cover { justify-self: start; width: min(100%, 320px); }
  .stop-info, .stop.flip .stop-info { justify-self: stretch; text-align: left; }
  .stop.flip .stop-info .album-actions { justify-content: flex-start; }
  .stop.flip .sleeve::after { left: auto; right: -2%; }
  .stop-road { align-self: start; padding-top: 10px; }
  .borne { width: 48px; height: 62px; border-radius: 24px 24px 5px 5px; padding-bottom: 6px; }
  .borne small { top: 5px; font-size: 10px; }
  .borne b { font-size: 24px; }
}

/* =====================================================================
   ACCUEIL — titre « Sèrka Records » (chrome + néon) et bulle d'annonce
   ===================================================================== */
.hero-host { display: flex; align-items: flex-end; gap: 6px; margin-bottom: 6px; }
.host-img { width: 170px; height: auto; flex: none; filter: drop-shadow(0 12px 18px rgba(0,0,0,.65)); -webkit-mask-image: linear-gradient(#000 78%, transparent); mask-image: linear-gradient(#000 78%, transparent); transform-origin: 50% 100%; animation: host-in .7s cubic-bezier(.2,1.4,.4,1) .3s both; }
@keyframes host-in { from { opacity: 0; transform: translateX(-30px) rotate(-8deg) scale(.85); } to { opacity: 1; transform: none; } }
.host-fallback {
  display: grid; place-items: center; border-radius: 50%;
  background: var(--marquage); color: var(--rouge); border: 9px solid var(--rouge);
  font: 900 42px/1 var(--f-display); width: 78px; height: 78px;
}
.host-bubble {
  position: relative; margin: 0 0 96px 0; padding: 10px 16px 9px;
  background: #fff; color: #111; border: 3px solid #111; border-radius: 16px; box-shadow: 5px 5px 0 #111;
  font: 800 20px/1.1 var(--f-display); text-transform: uppercase; letter-spacing: .03em;
  transform: rotate(-2.5deg); transform-origin: left bottom;
  animation: bubble-pop .55s cubic-bezier(.2,1.6,.4,1) .7s both;
}
.host-bubble::before, .host-bubble::after { content: ""; position: absolute; bottom: 8px; border-style: solid; border-color: transparent; }
.host-bubble::before { left: -19px; border-width: 9px 18px 9px 0; border-right-color: #111; }
.host-bubble::after { left: -13px; border-width: 6px 13px 6px 0; border-right-color: #fff; bottom: 11px; }
.host-bubble i { font-style: normal; background: var(--bleu-panneau); color: #fff; padding: 2px 7px; border-radius: 3px; margin-right: 6px; }
@keyframes bubble-pop { from { opacity: 0; transform: rotate(-2.5deg) scale(.4); } to { opacity: 1; transform: rotate(-2.5deg) scale(1); } }

.hero-title { margin: 0; font-family: var(--f-display); font-weight: 900; text-transform: uppercase; line-height: .8; }
.hero-title > span { display: block; width: max-content; }
/* SÈRKA : lettres crème, reflet chrome qui passe, ligne de marquage qui défile dessous */
.ht-serka {
  position: relative; font-size: clamp(92px, 15vw, 260px); letter-spacing: .005em; color: transparent;
  background: linear-gradient(105deg, #efeadc 0%, #efeadc 42%, #fff6d8 47%, #ffffff 50%, #fff6d8 53%, #efeadc 58%, #efeadc 100%);
  background-size: 260% 100%; background-position: 100% 0;
  -webkit-background-clip: text; background-clip: text;
  filter: drop-shadow(0 10px 28px rgba(0,0,0,.65));
  animation: title-rise .9s cubic-bezier(.2,.8,.2,1) both, chrome-sweep 7s ease-in-out 1.4s infinite;
}
.ht-serka::after {
  content: ""; display: block; height: .04em; margin: .06em 0 .08em; opacity: .9;
  background: repeating-linear-gradient(90deg, var(--jaune) 0 .42em, transparent .42em .7em);
  background-size: .7em 100%;
  animation: road-dash 1.1s linear infinite;
}
/* RECORDS : enseigne néon orange, avec ses petites coupures */
.ht-records {
  font-size: clamp(54px, 8.7vw, 152px); letter-spacing: .06em; color: transparent;
  -webkit-text-stroke: 2px #ffe3c4;
  filter: drop-shadow(0 0 3px #ffb36b) drop-shadow(0 0 10px #ff8a1f) drop-shadow(0 0 26px #ff6a00) drop-shadow(0 0 54px rgba(255,90,0,.55));
  animation: title-rise .9s cubic-bezier(.2,.8,.2,1) .15s both, neon-flicker 6.5s linear 1.2s infinite;
}
@keyframes title-rise { from { opacity: 0; transform: translateY(40px); } to { opacity: 1; transform: none; } }
@keyframes chrome-sweep { 0%, 55% { background-position: 100% 0; } 85%, 100% { background-position: 0% 0; } }
@keyframes road-dash { to { background-position: -.7em 0; } }
@keyframes neon-flicker {
  0%, 17%, 19.5%, 21%, 62%, 64%, 100% { opacity: 1; }
  18%, 20.5%, 63% { opacity: .35; }
}
@media (max-width: 640px) {
  .host-img { width: 104px; }
  .host-fallback { width: 56px; height: 56px; border-width: 7px; font-size: 30px; }
  .host-bubble { font-size: 15px; margin-bottom: 56px; }
  .ht-records { -webkit-text-stroke-width: 1.5px; }
}
@media (prefers-reduced-motion: reduce) {
  .ht-serka, .ht-records, .ht-serka::after, .host-bubble, .host-img { animation: none !important; }
}
/* Grand écran : l'annonceur passe sur le côté gauche du titre, bulle au-dessus de lui */
@media (min-width: 1100px) {
  .hero-inner { display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: clamp(28px, 3vw, 56px); }
  .hero-inner > * { grid-column: 2; }
  .hero-inner > .hero-host { grid-column: 1; grid-row: 1 / span 3; align-self: center; flex-direction: column-reverse; align-items: center; gap: 14px; margin: 0; }
  .host-img { width: clamp(230px, 19vw, 380px); }
  .host-bubble { font-size: clamp(20px, 1.3vw, 24px); }
  .host-bubble { margin: 0; text-align: center; transform-origin: 50% 100%; }
  .host-bubble::before { left: 50%; bottom: -19px; margin-left: -10px; border-width: 18px 10px 0 10px; border-color: #111 transparent transparent transparent; }
  .host-bubble::after { left: 50%; bottom: -12px; margin-left: -7px; border-width: 13px 7px 0 7px; border-color: #fff transparent transparent transparent; }
}


/* =====================================================================
   LOGO (en-tête) — d'après « C — Disque S »
   ===================================================================== */
.brand { color: #f2f0ea; gap: 12px; }
.brand-mark { width: 36px; height: 36px; flex: none; transition: transform .3s; }
body.is-playing .brand-mark { animation: spin 2.4s linear infinite; }   /* le disque tourne quand la musique joue */
.brand:hover .brand-mark { transform: rotate(-25deg); }
.brand-name { font: 700 24px/1 "Sora", var(--f-body); letter-spacing: .06em; text-transform: uppercase; }
.brand-sub { font: 400 12px/1 "Sora", var(--f-body); letter-spacing: .4em; text-transform: uppercase; margin-top: 3px; opacity: .85; }
@media (max-width: 640px) { .brand-mark { width: 30px; height: 30px; } .brand-name { font-size: 20px; } .brand-sub { font-size: 10px; } }
@media (prefers-reduced-motion: reduce) { body.is-playing .brand-mark { animation: none; } }

/* =====================================================================
   ARTISTES — cartes portrait 4:5 et fiche avec visuel dédié
   ===================================================================== */
.artists-block { padding-top: 48px; padding-bottom: 48px; }
.grid-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 16px; margin-top: 24px; }
.grid-cards.big { grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 20px; }
.artist-card {
  position: relative; isolation: isolate; display: block; aspect-ratio: 4 / 5; overflow: hidden; border-radius: 6px;
  background: var(--t-bg); color: var(--t-fg); text-decoration: none;
  box-shadow: 0 16px 34px rgba(0,0,0,.45);
  transition: transform .25s, box-shadow .25s;
}
.artist-card::before { z-index: 2; }   /* texture de la charte par-dessus la photo */
.artist-card img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform .6s cubic-bezier(.2,.8,.2,1), filter .3s; }
.artist-card::after {
  content: ""; position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(180deg, transparent 38%, color-mix(in srgb, var(--t-bg) 70%, transparent) 64%, var(--t-bg) 96%);
}
.ac-body { position: absolute; left: 0; right: 0; bottom: 0; z-index: 3; padding: 16px 16px 18px; display: grid; gap: 4px; border-bottom: 6px solid var(--t-accent); }
.ac-who { font: 700 12px/1.2 var(--f-lcd); letter-spacing: .06em; text-transform: uppercase; color: var(--t-accent); }
.ac-name { font-family: var(--t-font); font-size: clamp(26px, 2.4vw, 36px); line-height: 1; overflow-wrap: anywhere; }
.grid-cards:not(.big) .ac-name { font-size: 24px; }
.ac-genre { font-size: 13px; opacity: .8; }
.ac-quote { max-height: 0; overflow: hidden; opacity: 0; font-family: var(--t-font); color: var(--t-accent); font-size: 17px; line-height: 1.2; transition: max-height .35s, opacity .35s, margin .35s; }
.artist-card:hover, .artist-card:focus-visible { transform: translateY(-6px) rotate(-.6deg); box-shadow: 0 24px 46px rgba(0,0,0,.6); }
.artist-card:hover img, .artist-card:focus-visible img { transform: scale(1.06); filter: brightness(1.08); }
.artist-card:hover .ac-quote, .artist-card:focus-visible .ac-quote { max-height: 4em; opacity: 1; margin-top: 6px; }
.artist-card:focus-visible { outline: 3px solid var(--t-accent); outline-offset: 3px; }

/* fiche artiste */
.artist-page { overflow: hidden; }
.artist-bg {
  position: absolute; inset: -40px 0 auto 0; height: 760px; z-index: -1;
  background: center 20% / cover no-repeat; filter: blur(38px) saturate(1.2); opacity: .5;
  -webkit-mask-image: linear-gradient(180deg, #000 30%, transparent); mask-image: linear-gradient(180deg, #000 30%, transparent);
}
.artist-page .artist-hero { grid-template-columns: minmax(0, 1fr) minmax(260px, 480px); grid-template-areas: "text portrait"; align-items: center; padding: 34px 0 48px; }
.artist-text { grid-area: text; }
.artist-portrait { grid-area: portrait; justify-self: end; width: 100%; }
.artist-portrait img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; border-radius: 4px; box-shadow: 16px 16px 0 var(--t-accent), 0 30px 60px rgba(0,0,0,.55); transform: rotate(1.5deg); }
.artist-page:not(.has-photo) .artist-portrait img { aspect-ratio: 1; }
.artist-genre { font: 700 15px/1.3 var(--f-lcd); text-transform: uppercase; letter-spacing: .06em; color: var(--t-accent); margin: 0 0 10px; }
.artist-stats { margin: 0 0 16px; opacity: .85; }
.artist-stats b { font: 400 20px var(--f-lcd); color: var(--t-accent); }
@media (max-width: 900px) {
  .artist-page .artist-hero { grid-template-columns: 1fr; grid-template-areas: "portrait" "text"; }
  .artist-portrait { justify-self: start; max-width: 380px; }
}

/* fiche signalétique (dossier de police) */
.artist-pres { font-size: 18px; line-height: 1.6; max-width: 62ch; }
.dossier {
  position: relative; margin: 0 0 44px; padding: 22px 26px 24px; border-radius: 6px;
  background: color-mix(in srgb, var(--t-bg) 78%, #000); border: 2px dashed color-mix(in srgb, var(--t-fg) 30%, transparent);
  box-shadow: 0 18px 40px rgba(0,0,0,.35);
}
.dossier::after {
  content: "CONFIDENTIEL"; position: absolute; top: -18px; right: 24px; transform: rotate(-6deg);
  padding: 5px 12px; border: 3px solid #d0202f; color: #d0202f; border-radius: 4px;
  background: color-mix(in srgb, var(--t-bg) 78%, #000); box-shadow: 0 6px 14px rgba(0,0,0,.35);
  font: 900 18px/1 var(--f-display); letter-spacing: .14em;
}
.dossier-head { margin: 0 0 16px; font: 700 13px/1 var(--f-lcd); letter-spacing: .12em; text-transform: uppercase; color: var(--t-accent); }
.dossier dl { margin: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 16px 28px; }
.dossier dt { font: 800 14px/1.2 var(--f-display); text-transform: uppercase; letter-spacing: .06em; opacity: .7; margin-bottom: 4px; }
.dossier dd { margin: 0; font-family: var(--t-font); font-size: 20px; line-height: 1.25; }
@media (max-width: 640px) { .dossier::after { font-size: 13px; top: -14px; right: 12px; } .dossier dd { font-size: 18px; } }

/* Francis XL : nom en lettrage big beat, « XL » en badge */
.xl-word {
  display: inline-block; transform: skewX(-10deg); color: #f2f4f6;
  text-shadow: .04em .04em 0 var(--t-accent), .08em .08em 0 rgba(0,0,0,.55);
}
.xl-badge {
  display: inline-block; margin-left: .22em; padding: .04em .24em .08em; border-radius: .14em;
  background: var(--t-accent); color: #101317; transform: skewX(-12deg);
  letter-spacing: .02em; box-shadow: .06em .06em 0 rgba(0,0,0,.45); vertical-align: .06em; font-size: .82em;
}
.artist-text h1:has(.xl-badge) { white-space: nowrap; font-size: clamp(42px, 6.4vw, 104px); }
.artist-card .ac-name:has(.xl-badge) { white-space: nowrap; }

/* Mr Robert & Flat Francis : nom principal + sous-ligne du duo */
.artist-text h1:has(.duo-sub) { font-size: clamp(40px, 5.6vw, 92px); }
.duo-sub { display: block; margin-top: .25em; font-size: .4em; color: var(--t-accent); letter-spacing: .04em; }
.artist-card .duo-sub { font-size: .62em; margin-top: .3em; }

/* Groupes : membres sous les casques + renvoi « Aussi dans » */
.members { margin: 0 0 48px; }
.members .h2 { font-size: clamp(26px, 3vw, 40px); margin: 0 0 18px; }
.members-row { display: flex; flex-wrap: wrap; gap: 28px; }
.member { width: min(230px, calc(50% - 14px)); color: inherit; text-decoration: none; }
.member img { display: block; width: 100%; aspect-ratio: 9 / 19; object-fit: cover; object-position: top; border-radius: 4px; box-shadow: 8px 8px 0 var(--t-accent); transition: transform .2s; }
.member:hover img { transform: translateY(-4px) rotate(-1deg); }
.member b { display: block; margin-top: 14px; font-family: var(--t-font); font-size: 22px; font-weight: 400; }
.member span { font-size: 14px; opacity: .75; }
.artist-also { margin: -4px 0 14px; font-size: 15px; opacity: .85; }
.artist-also a { color: var(--t-accent); font-weight: 700; filter: brightness(1.35); }

/* =====================================================================
   ESPACE MEMBRES : compte, favoris, playlists, boutique, back office
   ===================================================================== */
.nav { margin-left: auto; }
.account { display: flex; align-items: center; gap: 8px; flex: none; }
.acc-btn, .acc-me {
  position: relative; display: inline-flex; align-items: center; gap: 8px; height: 38px; padding: 0 12px;
  border-radius: 99px; background: var(--bitume); color: var(--marquage); text-decoration: none;
  font: 700 16px/1 var(--f-display); text-transform: uppercase; letter-spacing: .03em;
}
.acc-btn:hover, .acc-me:hover { background: var(--bitume-2); }
.acc-btn b { position: absolute; top: -6px; right: -6px; min-width: 20px; height: 20px; padding: 0 5px; border-radius: 99px; background: var(--rouge); color: #fff; font: 700 12px/20px var(--f-body); text-align: center; }
.acc-admin { color: var(--jaune); }
.acc-me { padding-left: 4px; }
.acc-av { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: var(--jaune); color: #141414; font: 800 14px/1 var(--f-display); }

/* actions sur chaque morceau */
.acts { display: flex; align-items: center; gap: 6px; }
.ico {
  width: 34px; height: 34px; border-radius: 50%; border: 1px solid var(--bitume-2); background: transparent;
  color: var(--gris); font-size: 17px; line-height: 1; display: inline-grid; place-items: center; cursor: pointer; padding: 0;
}
.ico:hover:not([disabled]) { color: var(--marquage); border-color: var(--gris); }
.ico[disabled] { opacity: .3; cursor: default; }
.ico.fav.on { color: #ff4d6d; border-color: #ff4d6d55; }
.ico.buy { font-size: 15px; }
.ico.buy.on { border-color: var(--jaune); background: rgba(242,194,48,.14); }
.ico.buy.wait { opacity: .7; }
.h3-sub { margin: 30px 0 4px; font: 800 26px/1 var(--f-display); text-transform: uppercase; }
.h3-sub small { font: 400 18px/1 var(--f-lcd); color: var(--gris); margin-left: 6px; }
.alb-sub { margin: 8px 0 2px; font: 700 12px/1 var(--f-display); text-transform: uppercase; letter-spacing: .06em; color: var(--gris); }
.ico.danger:hover, .btn.danger:hover { color: #ff6b6b; box-shadow: inset 0 0 0 2px #ff6b6b; }
.play.locked { background: var(--bitume-2); color: var(--gris); font-size: 15px; }
.play.locked:hover { background: var(--bitume-2); color: var(--marquage); }
.track.is-locked .t strong, .track.is-locked img { opacity: .55; }
.cens-badge {
  display: inline-block; margin-left: 6px; padding: 2px 6px; vertical-align: 2px; border-radius: 2px;
  background: #111; color: #fff; border: 1px solid var(--rouge); font: 700 11px/1 var(--f-lcd); font-style: normal; text-transform: uppercase; letter-spacing: .08em;
}
.armed { color: #fff !important; background: var(--rouge) !important; border-color: var(--rouge) !important; }
.btn.sm { padding: 9px 14px; font-size: 16px; }
.small { font-size: 14px; }
.nowrap { white-space: nowrap; }

/* boutique sur la fiche album */
.shop { margin-top: 18px; display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.shop-note { flex-basis: 100%; margin: 0; font-size: 14px; }
.shop-state { display: inline-flex; align-items: center; gap: 6px; padding: 9px 14px; border-radius: 3px; background: var(--bitume); font: 700 17px/1 var(--f-display); text-transform: uppercase; letter-spacing: .03em; }
.shop-state.ok { color: #7ee08a; }
.shop-state.wait { color: var(--jaune); }
.shop-add .price, .cart-line .price { font-family: var(--f-lcd); font-weight: 400; }
.shop-add .price { margin-left: 6px; padding-left: 10px; border-left: 2px solid rgba(0,0,0,.25); }

/* écran d'accès en attente */
.gate { min-height: 70vh; display: grid; place-items: center; }
.gate-card { max-width: 760px; padding: 48px; border: 3px dashed var(--bitume-2); border-radius: 6px; background: var(--bitume); }
.gate-card .h-display { font-size: clamp(44px, 7vw, 88px); margin: 8px 0 18px; }
.gate-kicker { margin: 0; font: 700 14px/1 var(--f-lcd); letter-spacing: .1em; text-transform: uppercase; color: var(--lcd); }
.gate-id { margin: 22px 0 0; color: var(--gris); }
.gate-sign { margin: 18px 0 0; font: 800 24px/1 var(--f-display); text-transform: uppercase; color: var(--jaune); }

/* mon espace */
.me-head { display: flex; align-items: center; gap: 24px; margin-bottom: 18px; }
.me-head .h-display { font-size: clamp(46px, 7vw, 96px); margin: 4px 0 10px; }
.me-av { flex: none; display: grid; place-items: center; width: 110px; height: 110px; border-radius: 50%; background: var(--jaune); color: #141414; font: 900 46px/1 var(--f-display); box-shadow: 8px 8px 0 var(--bitume-2); }
.me-badges { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; }
.badge { display: inline-block; padding: 6px 10px; border-radius: 3px; background: var(--bitume); font: 700 14px/1 var(--f-display); text-transform: uppercase; letter-spacing: .05em; color: var(--marquage); text-decoration: none; }
.badge.cens { background: #111; border: 1px solid var(--rouge); }
.badge.admin { background: var(--jaune); color: #141414; }
.me-block { margin-top: 54px; }
.me-title { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.me-title .h2 { margin: 0 12px 0 0; }
.me-title .h2 small { font: 400 22px/1 var(--f-lcd); color: var(--gris); margin-left: 6px; }
.inline-form { display: flex; flex-wrap: wrap; gap: 8px; margin: 16px 0; }
.inline-form input, .inline-form select, .adm-filter, .tbl input:not([type]), .tbl select {
  padding: 10px 12px; border-radius: 3px; border: 1px solid var(--bitume-2); background: #17181b; color: var(--marquage); font: 500 16px/1.2 var(--f-body);
}
.inline-form input { flex: 1 1 220px; min-width: 0; }
.inline-form input:focus, .adm-filter:focus, .tbl input:focus, .tbl select:focus { outline: 2px solid var(--jaune); outline-offset: 1px; }
.pl-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 16px; }
.pl-card { display: grid; gap: 4px; text-decoration: none; color: var(--marquage); }
.pl-card strong { font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pl-cover { display: grid; place-items: center; aspect-ratio: 1; border-radius: 4px; overflow: hidden; background: var(--bitume); font-size: 54px; color: var(--gris); margin-bottom: 6px; box-shadow: 6px 6px 0 var(--bitume-2); }
.pl-cover img { width: 100%; height: 100%; object-fit: cover; }
.pl-card:hover .pl-cover { box-shadow: 6px 6px 0 var(--jaune); }
.pl-head { margin: 10px 0 8px; }
.pl-head .h-display { font-size: clamp(46px, 8vw, 104px); margin-bottom: 14px; }

/* panier */
.cart-list { list-style: none; margin: 28px 0 0; padding: 0; border-top: 1px solid var(--bitume-2); }
.cart-line { display: grid; grid-template-columns: 72px 1fr auto auto; gap: 16px; align-items: center; padding: 12px 0; border-bottom: 1px solid var(--bitume-2); }
.cart-line img { width: 72px; height: 72px; object-fit: cover; border-radius: 3px; }
.cart-line a { color: var(--marquage); text-decoration: none; }
.cart-line span { display: grid; }
.cart-total { margin-top: 24px; max-width: 460px; margin-left: auto; padding: 22px; background: var(--bitume); border-radius: 4px; }
.cart-total p { display: flex; justify-content: space-between; gap: 12px; margin: 0 0 10px; }
.cart-total p.muted { display: block; }
.cart-total .big { font: 800 28px/1 var(--f-display); text-transform: uppercase; border-top: 2px dashed var(--bitume-2); padding-top: 14px; }
.cart-total .btn { width: 100%; justify-content: center; margin-top: 6px; }

/* fenêtre « ajouter à une playlist » */
.modal { position: fixed; inset: 0; z-index: 60; display: grid; place-items: center; padding: 16px; background: rgba(10,10,12,.72); backdrop-filter: blur(3px); }
.modal[hidden] { display: none; }
.modal-card { position: relative; width: min(480px, 100%); max-height: 86vh; overflow: auto; padding: 26px; border-radius: 6px; background: var(--asphalte); border: 2px solid var(--bitume-2); box-shadow: 0 30px 80px rgba(0,0,0,.6); }
.modal-x { position: absolute; top: 12px; right: 12px; }
.pick-list { display: grid; gap: 6px; }
.pick { display: flex; justify-content: space-between; gap: 12px; padding: 12px 14px; border-radius: 3px; border: 1px solid var(--bitume-2); background: var(--bitume); color: var(--marquage); font: 600 16px/1.2 var(--f-body); text-align: left; cursor: pointer; }
.pick:hover { border-color: var(--jaune); }

/* tableaux (commandes, back office) */
.tbl-wrap { overflow-x: auto; margin-top: 16px; border: 1px solid var(--bitume-2); border-radius: 4px; }
.tbl { width: 100%; border-collapse: collapse; font-size: 15px; }
.tbl th { text-align: left; padding: 10px 12px; background: var(--bitume); font: 700 13px/1 var(--f-display); text-transform: uppercase; letter-spacing: .06em; color: var(--gris); white-space: nowrap; }
.tbl td { padding: 9px 12px; border-top: 1px solid var(--bitume-2); vertical-align: middle; }
.tbl td.c, .tbl th.c { text-align: center; }
.tbl input[type="checkbox"] { width: 18px; height: 18px; accent-color: var(--jaune); }
.tbl tr.is-cens td { background: rgba(200,16,46,.08); }
.ostat { display: inline-block; padding: 4px 8px; border-radius: 3px; font: 700 12px/1 var(--f-display); text-transform: uppercase; letter-spacing: .05em; background: var(--bitume-2); }
.ostat.pending { background: var(--jaune); color: #141414; }
.ostat.approved { background: #2f6b3a; color: #fff; }
.ostat.refused { background: var(--rouge); color: #fff; }

/* back office */
.adm-tabs { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 22px 0 24px; border-bottom: 2px solid var(--bitume-2); padding-bottom: 10px; }
.adm-tabs a { position: relative; padding: 9px 14px; border-radius: 3px; text-decoration: none; color: var(--gris); font: 700 18px/1 var(--f-display); text-transform: uppercase; letter-spacing: .03em; }
.adm-tabs a.on, .adm-tabs a:hover { background: var(--bitume); color: var(--marquage); }
.adm-tabs a b { margin-left: 6px; padding: 2px 7px; border-radius: 99px; background: var(--rouge); color: #fff; font: 700 12px/1.4 var(--f-body); }
.adm-sync { margin-left: auto; }
.adm-add input[name="login"] { flex: 1 1 260px; }
.adm-add input[name="name"] { flex: 1 1 200px; }
.adm-users td { white-space: nowrap; }
.adm-users td:first-child input { width: 180px; display: block; margin-bottom: 4px; }
.adm-users tr.u-pending td { background: rgba(242,194,48,.08); }
.adm-users tr.u-disabled td { opacity: .55; }
.alb-pick summary { cursor: pointer; color: var(--marquage); }
.alb-pick > div { display: grid; gap: 4px; margin-top: 8px; padding: 10px; background: #17181b; border-radius: 3px; max-height: 260px; overflow: auto; }
.alb-pick label { display: flex; align-items: center; gap: 8px; font-size: 14px; }
.adm-filter { width: min(420px, 100%); margin: 6px 0 4px; }
.order-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 14px; }
.order-card { padding: 18px; border-radius: 4px; background: var(--bitume); border-left: 4px solid var(--jaune); }
.order-card h3 { margin: 4px 0 6px; font: 800 26px/1 var(--f-display); text-transform: uppercase; }
.order-card p { margin: 0 0 10px; }
.top-list { margin: 10px 0 0; padding-left: 26px; }
.top-list li { padding: 4px 0; }
.top-list b { font-family: var(--f-lcd); color: var(--lcd); margin-left: 8px; }

@media (max-width: 1100px) {
  .topbar { flex-wrap: wrap; }
}
@media (max-width: 640px) {
  .account { position: absolute; top: 12px; right: var(--gutter); }
  .acc-name { display: none; }
  .acts { gap: 4px; }
  .acts .ico { width: 30px; height: 30px; font-size: 15px; }
  .acts [data-plmove] { display: none; }
  .me-head { flex-direction: column; align-items: flex-start; }
  .me-av { width: 76px; height: 76px; font-size: 32px; }
  .gate-card { padding: 28px 22px; }
  .cart-line { grid-template-columns: 56px 1fr auto; }
  .cart-line img { width: 56px; height: 56px; }
  .cart-line .price { display: none; }
}

/* =====================================================================
   ACCUEIL : « À la une », dernière sortie, bandeau de nouveautés
   ===================================================================== */
.kicker { margin: 0 0 8px; font: 700 14px/1 var(--f-lcd); letter-spacing: .1em; text-transform: uppercase; color: var(--lcd); }
.home-head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 16px 32px; margin-bottom: 26px; }
.since-badge { margin: 0; padding: 10px 16px; border-radius: 99px; background: var(--jaune); color: #141414; font: 800 17px/1 var(--f-display); text-transform: uppercase; letter-spacing: .03em; }
.feed { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 380px), 1fr)); gap: 14px; }
.feed-item {
  display: grid; grid-template-columns: 96px minmax(0, 1fr); gap: 16px; align-items: start;
  padding: 14px; border-radius: 4px; background: var(--bitume); color: var(--marquage); text-decoration: none;
  border-left: 4px solid var(--bitume-2); transition: background .15s, transform .15s;
}
a.feed-item:hover { background: var(--bitume-2); transform: translateY(-2px); }
.feed-item.fresh { border-left-color: var(--jaune); }
.fi-media { display: block; width: 96px; height: 96px; border-radius: 3px; overflow: hidden; background: #17181b; }
.fi-media img { width: 100%; height: 100%; object-fit: cover; }
.fi-icon { display: grid; place-items: center; width: 100%; height: 100%; font-size: 40px; }
.fi-body { display: grid; gap: 4px; min-width: 0; }
.fi-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; font-size: 13px; color: var(--gris); }
.fi-kind { font: 700 12px/1 var(--f-display); text-transform: uppercase; letter-spacing: .06em; color: var(--marquage); }
.fi-kind.k-album { color: var(--jaune); }
.fi-kind.k-artist { color: #ff9ec4; }
.fi-kind.k-track { color: #7ee08a; }
.fi-kind.k-post, .fi-kind.k-info { color: var(--lcd); }
.fi-new { font-style: normal; padding: 2px 6px; border-radius: 2px; background: var(--rouge); color: #fff; font: 700 11px/1.3 var(--f-body); text-transform: uppercase; }
.feed-item strong { font: 800 22px/1.05 var(--f-display); text-transform: uppercase; letter-spacing: .01em; }
.fi-text { font-size: 15px; color: #d8d6cc; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.fi-author { font-size: 14px; color: var(--gris); font-style: italic; }
.feature .shop { margin-top: 14px; }

/* bandeau « Nouveau sur Sèrka » (veille toutes les 90 s) */
.newsbar {
  position: fixed; left: 50%; top: 84px; z-index: 40; transform: translateX(-50%);
  display: flex; align-items: center; gap: 12px; width: min(760px, calc(100% - 24px));
  padding: 10px 12px 10px 16px; border-radius: 6px; background: #111; color: var(--marquage);
  border: 2px solid var(--jaune); box-shadow: 0 20px 50px rgba(0,0,0,.55); animation: nb-in .4s cubic-bezier(.2,1.4,.4,1);
}
.newsbar[hidden] { display: none; }
.nb-txt { flex: 1; min-width: 0; }
.nb-dot { font-size: 22px; }
@keyframes nb-in { from { opacity: 0; transform: translate(-50%, -16px); } to { opacity: 1; transform: translate(-50%, 0); } }

/* back office : annonces */
.news-form { display: grid; gap: 8px; max-width: 760px; margin: 16px 0 8px; }
.news-form input, .news-form textarea { padding: 10px 12px; border-radius: 3px; border: 1px solid var(--bitume-2); background: #17181b; color: var(--marquage); font: 500 16px/1.4 var(--f-body); resize: vertical; }
.news-form input:focus, .news-form textarea:focus { outline: 2px solid var(--jaune); outline-offset: 1px; }

@media (max-width: 640px) {
  .feed-item { grid-template-columns: 64px minmax(0, 1fr); gap: 12px; }
  .fi-media { width: 64px; height: 64px; }
  .feed-item strong { font-size: 19px; }
  .newsbar { top: auto; bottom: calc(var(--bar-h) + 10px); flex-wrap: wrap; }
}

/* =====================================================================
   ALBUM AVEC VIDÉO : habillage de page + vidéo géante (Bifle Machine)
   ===================================================================== */
body[data-skin="rainbow"] .backdrop {
  opacity: 1;
  background:
    linear-gradient(90deg, rgba(20,21,24,.80) 0%, rgba(20,21,24,.90) 48%, rgba(20,21,24,.50) 100%),
    repeating-linear-gradient(180deg, #8a2be2 0, #3d5afe 9vh, #19c3ff 16vh, #2ee66e 23vh, #ffe500 30vh, #ff8a00 37vh, #ff1f5a 44vh, #d02bff 51vh, #8a2be2 58vh);
  background-size: 100% 100%, 100% 116vh;
  animation: skin-scroll 22s linear infinite;
}
@keyframes skin-scroll { from { background-position: 0 0, 0 0; } to { background-position: 0 0, 0 116vh; } }
body[data-skin="rainbow"] .topbar { border-bottom-color: #ff2e93; box-shadow: 0 2px 0 #f2c230, 0 4px 0 #2ee6ff; }
.album-skinned { max-width: 1640px; }
.album-split { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: clamp(24px, 3.5vw, 64px); align-items: start; }
.album-hero.compact { grid-template-columns: minmax(170px, 250px) minmax(0, 1fr); gap: clamp(20px, 3vw, 40px); margin-top: 10px; }
.album-hero.compact h1 { font-size: clamp(44px, 5.4vw, 92px); }
.as-video { position: sticky; top: 84px; width: min(44vw, calc((100vh - 84px - var(--bar-h) - 64px) * 9 / 16)); margin-top: 10px; }
.as-video .av-frame { padding: 5px; border-radius: 14px; transition: box-shadow .4s; }
.as-video .av-frame video { border-radius: 10px; }
.av-frame.live { box-shadow: 0 0 0 3px #fff, 0 0 70px rgba(255, 46, 147, .75); animation: frame-pulse 1s ease-in-out infinite alternate; }
@keyframes frame-pulse { to { box-shadow: 0 0 0 3px #fff, 0 0 110px rgba(46, 230, 255, .8); } }
.av-cta {
  position: absolute; left: 50%; bottom: 18px; transform: translateX(-50%); white-space: nowrap;
  padding: 12px 20px; border: 2px solid #fff; border-radius: 99px; background: rgba(17,17,17,.72); color: #fff; cursor: pointer;
  font: 800 19px/1 var(--f-display); text-transform: uppercase; letter-spacing: .04em; backdrop-filter: blur(4px);
  transition: background .2s, color .2s;
}
.av-cta:hover { background: var(--jaune); color: #141414; border-color: var(--jaune); }
.av-cta-live { display: none; }
.av-frame.live .av-cta { background: #ff2e93; border-color: #ff2e93; }
.av-frame.live .av-cta-idle { display: none; }
.av-frame.live .av-cta-live { display: inline; }
.av-cap { margin: 14px 4px 0; font-size: 14px; line-height: 1.4; color: #d8d6cc; }
.av-cap b { display: block; color: var(--marquage); font: 800 22px/1.1 var(--f-display); text-transform: uppercase; letter-spacing: .03em; }
@media (max-width: 1000px) {
  .album-split { grid-template-columns: minmax(0, 1fr); }
  .as-video { position: static; order: -1; width: min(100%, 360px, calc(64vh * 9 / 16)); margin: 10px auto 0; }
  body[data-skin="rainbow"] .backdrop { background-image: linear-gradient(rgba(20,21,24,.86), rgba(20,21,24,.86)), repeating-linear-gradient(180deg, #8a2be2 0, #3d5afe 9vh, #19c3ff 16vh, #2ee66e 23vh, #ffe500 30vh, #ff8a00 37vh, #ff1f5a 44vh, #d02bff 51vh, #8a2be2 58vh); }
}
@media (max-width: 640px) { .album-hero.compact { grid-template-columns: minmax(0, 1fr); } }
@media (prefers-reduced-motion: reduce) { body[data-skin="rainbow"] .backdrop, .av-frame.live { animation: none; } }

/* =====================================================================
   RESPONSIVE
   ===================================================================== */
@media (max-width: 1100px) {
  .fp-stage { grid-template-columns: minmax(0, 1fr); }
  .fp-deckcol { max-width: 620px; width: 100%; margin: 0 auto; }
}
@media (max-width: 900px) {
  .np-inner { grid-template-columns: minmax(0, 520px); justify-items: center; text-align: center; }
  .np-inner .deck { width: min(78vw, 60vh); margin: 0 auto; }
  .np-ctl, .np-info .deck-switch { justify-content: center; }
  .feature, .artist-hero, .album-hero, .fp-main { grid-template-columns: 1fr; }
  .onair { grid-template-columns: 1fr; }
  .feature-cover, .artist-hero img, .album-hero img { max-width: 360px; }
}
@media (max-width: 640px) {
  :root { --bar-h: 132px; }
  body { font-size: 16px; }
  .topbar { flex-direction: column; align-items: flex-start; }
  .nav a { font-size: 16px; padding: 6px 8px; }
  .autoradio { grid-template-columns: 56px 1fr; grid-template-rows: auto auto; height: auto; }
  .ar-cover img { width: 56px; height: 56px; }
  .ar-ctrl { grid-column: 1 / -1; justify-content: center; }
  .ar-side { display: none; }
  .track { grid-template-columns: 26px 40px 1fr auto; }
  .track .tag { display: none; }
  .hero-row img { width: 130px; height: 130px; }
  .clips { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) {
  .hero-video { display: none; }
  .hero:has(.hero-video) { background: url("../media/accueil.jpg") 70% 50% / cover no-repeat; }
  .hero-row, .lcd-scroll span, body.is-playing .eq span, .disc { animation: none !important; }
  .tonearm, .deck-cover .peek { transition: none; }
  html { scroll-behavior: auto; }
}

/* =====================================================================
   PROFILS : visiteur (Public), connexion, fiche membre, grille du BO
   ===================================================================== */
.acc-login {
  display: inline-flex; align-items: center; height: 38px; padding: 0 16px; border-radius: 99px;
  background: var(--jaune); color: #141414; text-decoration: none;
  font: 800 16px/1 var(--f-display); text-transform: uppercase; letter-spacing: .03em; white-space: nowrap;
}
.acc-login:hover { background: var(--marquage); }
.acc-me.wait .acc-av { background: var(--bitume-2); font-size: 15px; }
/* extrait 30 s : bouton lecture « allégé » */
.play.ext { position: relative; background: transparent; color: var(--marquage); box-shadow: inset 0 0 0 2px var(--gris); font-size: 12px; line-height: 1; }
.play.ext small { position: absolute; left: 50%; bottom: -15px; transform: translateX(-50%); font: 700 10px/1 var(--f-lcd); color: var(--gris); white-space: nowrap; }
.play.ext:hover { background: var(--now); color: #111; box-shadow: none; }
.artist-page .play.ext { background: transparent; color: var(--t-fg); box-shadow: inset 0 0 0 2px var(--t-accent); }
.artist-page .play.ext small { color: var(--t-fg); opacity: .7; }
.gate-cta { display: flex; flex-wrap: wrap; gap: 10px; margin: 24px 0 0; }
.gate-card a.btn { text-decoration: none; }
button.badge { border: 0; cursor: pointer; }
button.badge:hover { background: var(--bitume-2); }
/* ma fiche */
.fiche-form { display: grid; grid-template-columns: 1fr 1fr; gap: 12px 16px; max-width: 640px; margin: 8px 0 10px; }
.fiche-form label { display: flex; flex-direction: column; gap: 6px; font: 700 13px/1 var(--f-display); text-transform: uppercase; letter-spacing: .06em; color: var(--gris); }
.fiche-form label.wide { grid-column: 1 / -1; }
.fiche-form input {
  height: 42px; padding: 0 12px; border-radius: 4px; border: 1px solid var(--bitume-2); background: var(--bitume);
  color: var(--marquage); font: 400 16px/1 var(--f-body); text-transform: none; letter-spacing: 0;
}
.fiche-form input:focus { outline: 2px solid var(--jaune); outline-offset: 1px; }
.fiche-form .btn { justify-self: start; }
.me-block.fiche.todo { padding: 22px; border: 2px dashed var(--jaune); border-radius: 6px; }
/* BO : demandes d'accès et grille des profils */
.order-card.req { border-left-color: var(--lcd); }
.order-card.req a { color: inherit; }
.prof-grid { max-width: 980px; }
.prof-grid th small, .prof-grid td small { display: block; margin-top: 5px; font: 400 12px/1.35 var(--f-body); text-transform: none; letter-spacing: 0; white-space: normal; }
.prof-grid tbody th { background: transparent; color: var(--marquage); font: 600 15px/1.3 var(--f-body); text-transform: none; letter-spacing: 0; white-space: normal; max-width: 380px; }
.prof-grid tr.grp td { padding: 18px 12px 8px; border-top: 0; font: 800 18px/1 var(--f-display); text-transform: uppercase; letter-spacing: .04em; color: var(--jaune); }
.prof-grid select:disabled, .prof-grid input:disabled { opacity: .45; }
@media (max-width: 640px) {
  .fiche-form { grid-template-columns: 1fr; }
  .acc-login { height: 34px; padding: 0 12px; font-size: 14px; }
}

/* BO : galerie (niveau d'accès par pochette) */
.adm-gal { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 14px; margin-top: 10px; }
.adm-gal-item { margin: 0; border-radius: 4px; overflow: hidden; background: var(--bitume); border-top: 4px solid var(--bitume-2); }
.adm-gal-item.lv-membre { border-top-color: var(--lcd); }
.adm-gal-item.lv-vip { border-top-color: var(--rouge); }
.adm-gal-item img { display: block; width: 100%; aspect-ratio: 1; object-fit: cover; }
.adm-gal-item figcaption { padding: 8px 10px 10px; }
.adm-gal-item strong { display: block; font: 600 14px/1.25 var(--f-body); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.adm-gal-item small { display: block; margin: 2px 0 8px; font-size: 12px; color: var(--gris); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lv-switch { display: flex; border: 1px solid var(--bitume-2); border-radius: 99px; overflow: hidden; }
.lv-switch button { flex: 1; padding: 6px 2px; border: 0; background: transparent; color: var(--gris); font: 700 11px/1 var(--f-display); text-transform: uppercase; letter-spacing: .04em; cursor: pointer; }
.lv-switch button + button { border-left: 1px solid var(--bitume-2); }
.lv-switch button:hover { color: var(--marquage); }
.lv-switch button.on[data-imglv="public"] { background: var(--marquage); color: #141414; }
.lv-switch button.on[data-imglv="membre"] { background: var(--lcd); color: #141414; }
.lv-switch button.on[data-imglv="vip"] { background: var(--rouge); color: #fff; }
@media (max-width: 640px) { .adm-gal { grid-template-columns: repeat(2, 1fr); gap: 10px; } }

/* BO : morceaux par album */
.adm-albums { display: grid; gap: 10px; margin-top: 16px; }
.adm-al { border-radius: 4px; background: var(--bitume); }
.adm-al > summary { display: flex; align-items: center; gap: 14px; padding: 10px 14px; cursor: pointer; list-style: none; }
.adm-al > summary::-webkit-details-marker { display: none; }
.adm-al > summary::after { content: "▾"; margin-left: auto; color: var(--gris); transition: transform .15s; }
.adm-al[open] > summary::after { transform: rotate(180deg); }
.adm-al > summary img { width: 52px; height: 52px; border-radius: 3px; object-fit: cover; flex: none; }
.adm-al > summary strong { display: block; font: 800 22px/1.05 var(--f-display); text-transform: uppercase; }
.adm-al > summary small { display: block; margin-top: 4px; color: var(--gris); font-size: 13px; }
.adm-al .tbl-wrap { margin: 0 10px 12px; }
.adm-tracks th.c { line-height: 1.2; white-space: normal; min-width: 92px; }
.tf-all { display: flex; align-items: center; justify-content: center; gap: 4px; margin-top: 6px; font: 400 11px/1 var(--f-body); text-transform: none; letter-spacing: 0; color: var(--gris); cursor: pointer; }
.adm-tracks td strong { font-weight: 600; }
.adm-tracks tr.no-file td { opacity: .5; }
.warn-box { padding: 12px 16px; border-left: 4px solid var(--lcd); background: rgba(255,138,31,.08); border-radius: 3px; }

/* =====================================================================
   FRANCIS 2027 : site officiel de campagne (habillage « République »)
   ===================================================================== */
.nav-2027 { color: #fff !important; background: linear-gradient(90deg, #124483 0 34%, #fff 34% 66%, #da1f26 66%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
.nav a.nav-2027[aria-current="page"], .nav a.nav-2027:hover { -webkit-text-fill-color: #fff; background: #124483; }
body[data-skin="campagne"] .backdrop { opacity: 1; background: #f4f4f1; }
body[data-skin="campagne"] .topbar { border-bottom: 4px solid #da1f26; box-shadow: 0 4px 0 #fff, 0 8px 0 #124483; }
.cp { background: #f4f4f1; margin-bottom: -24px; --bleu: #124483; --rouge: #da1f26; --encre: #16213a; --papier: #f4f4f1; --or: #c9a227; color: var(--encre); font-family: "Sora", var(--f-body); }
.cp a { color: var(--bleu); }
.cp .muted { color: #5b6270; }
.cp-kicker { margin: 0 0 8px; font: 700 13px/1 var(--f-lcd); letter-spacing: .14em; text-transform: uppercase; color: var(--rouge); }
.cp-h2 { margin: 0 0 22px; font: 800 clamp(30px, 4vw, 48px)/1 var(--f-display); text-transform: uppercase; letter-spacing: .01em; color: var(--encre); }
.cp-sec { padding: 64px 0; }
/* bandeau dépêches */
.cp-band { display: flex; align-items: center; gap: 14px; padding: 9px var(--gutter); background: var(--encre); color: #fff; font: 600 15px/1.3 "Sora", sans-serif; overflow: hidden; }
.cp-live { flex: none; padding: 4px 9px; border-radius: 2px; background: var(--rouge); font: 800 12px/1 var(--f-display); letter-spacing: .12em; text-transform: uppercase; animation: cp-blink 1.4s steps(2) infinite; }
@keyframes cp-blink { to { opacity: .55; } }
#cp-ticker { opacity: 0; transform: translateY(6px); }
#cp-ticker.in { opacity: 1; transform: none; transition: opacity .4s, transform .4s; }
/* hero */
.cp-hero { background: linear-gradient(180deg, #fff 0%, var(--papier) 100%); border-bottom: 1px solid #dcdcd6; position: relative; overflow: hidden; }
.cp-hero::before { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, var(--bleu) 0 33.3%, #fff 33.3% 66.6%, var(--rouge) 66.6%); opacity: .08; }
.cp-hero-in { position: relative; display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(300px, .9fr); gap: clamp(24px, 4vw, 64px); align-items: center; padding-top: 48px; padding-bottom: 48px; }
.cp-title { margin: 6px 0 10px; display: flex; flex-wrap: wrap; gap: 0 .22em; font: 900 clamp(64px, 10vw, 150px)/.88 var(--f-display); text-transform: uppercase; letter-spacing: -.01em; }
.cp-title span:first-child { color: var(--bleu); }
.cp-title span:last-child { color: var(--rouge); }
.cp-slogan { margin: 0 0 28px; font: 600 clamp(20px, 2.4vw, 30px)/1.25 "Sora", sans-serif; color: var(--encre); }
.cp-count-l { margin: 0 0 8px; font: 700 12px/1 var(--f-lcd); letter-spacing: .14em; text-transform: uppercase; color: #5b6270; }
.cp-count { display: flex; gap: 10px; margin-bottom: 26px; }
.cp-count span { display: grid; place-items: center; min-width: 74px; padding: 10px 8px 8px; border-radius: 4px; background: var(--encre); color: #fff; }
.cp-count b { font: 800 34px/1 var(--f-display); }
.cp-count small { font: 600 11px/1 var(--f-lcd); letter-spacing: .1em; text-transform: uppercase; opacity: .7; margin-top: 4px; }
.cp-cta { display: flex; flex-wrap: wrap; gap: 10px; }
.cp-btn { background: var(--rouge); color: #fff; box-shadow: none; }
.cp-btn:hover { background: #b5151c; color: #fff; }
.cp-btn-g { color: var(--bleu); box-shadow: inset 0 0 0 2px var(--bleu); }
.cp-btn-g:hover { background: var(--bleu); color: #fff; }
.cp-militants { margin: 14px 0 0; font-size: 15px; color: #5b6270; }
.cp-militants b { font: 800 22px/1 var(--f-display); color: var(--encre); }
.cp-portrait { position: relative; border: 0; padding: 0; background: transparent; cursor: pointer; justify-self: end; max-width: 460px; width: 100%; }
.cp-portrait img { display: block; width: 100%; border: 8px solid #fff; box-shadow: 0 30px 60px rgba(22,33,58,.28); transform: rotate(1.5deg); transition: transform .3s; }
.cp-portrait:hover img { transform: rotate(0) scale(1.02); }
.cp-stamp { position: absolute; left: -18px; bottom: 28px; padding: 10px 16px; border: 4px solid var(--rouge); border-radius: 6px; color: var(--rouge); background: rgba(255,255,255,.85); font: 900 22px/1 var(--f-display); text-transform: uppercase; letter-spacing: .06em; transform: rotate(-8deg); text-align: center; }
/* programme */
.cp-prog { display: grid; gap: 8px; max-width: 900px; }
.cp-item { border-left: 5px solid var(--bleu); background: #fff; box-shadow: 0 1px 0 #dcdcd6; }
.cp-item summary { display: flex; align-items: center; gap: 16px; padding: 16px 20px; cursor: pointer; list-style: none; font: 700 20px/1.2 "Sora", sans-serif; }
.cp-item summary::-webkit-details-marker { display: none; }
.cp-item summary b { font: 900 30px/1 var(--f-display); color: var(--rouge); min-width: 44px; }
.cp-item[open] { border-left-color: var(--rouge); }
.cp-item p { margin: 0; padding: 0 20px 18px 80px; font-size: 16px; line-height: 1.55; color: #3b4252; }
/* gouvernement */
.cp-gov { background: var(--encre); color: #fff; }
.cp-gov .cp-h2 { color: #fff; }
.cp-top { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; margin-bottom: 18px; }
.cp-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 18px; }
.cp-min { position: relative; display: block; padding: 0; border: 0; border-radius: 6px; overflow: hidden; background: #0f1830; color: #fff; text-align: left; cursor: pointer; box-shadow: 0 10px 30px rgba(0,0,0,.35); }
.cp-min img { display: block; width: 100%; aspect-ratio: 3 / 2; object-fit: cover; filter: saturate(.85); transition: transform .5s, filter .5s; }
.cp-min.president img, .cp-min.pm img { aspect-ratio: 4 / 3; object-position: center 12%; }
.cp-min:hover img { transform: scale(1.06); filter: saturate(1.1); }
.cp-min-body { display: block; padding: 12px 14px 14px; border-top: 4px solid var(--rouge); }
.cp-min-body small { display: block; font: 700 11px/1.2 var(--f-lcd); letter-spacing: .1em; text-transform: uppercase; color: #9fb2d6; }
.cp-min-body strong { display: block; margin: 4px 0 6px; font: 800 24px/1 var(--f-display); text-transform: uppercase; }
.cp-min-body em { display: block; font: 400 14px/1.4 "Sora", sans-serif; color: #c9d2e6; max-height: 0; overflow: hidden; opacity: 0; transition: max-height .4s, opacity .4s; }
.cp-min:hover .cp-min-body em, .cp-min:focus-visible .cp-min-body em, .cp-min.president .cp-min-body em, .cp-min.pm .cp-min-body em { max-height: 80px; opacity: 1; }
.cp-min.president .cp-min-body { border-top-color: var(--or); }
/* photo de famille */
.cp-fam { background: #fff; }
.cp-fam img { display: block; width: min(100%, 1400px); margin: 0 auto; height: auto; }
.cp-fam-btn { display: block; width: 100%; padding: 0; border: 0; background: transparent; cursor: zoom-in; }
.cp-min { cursor: zoom-in; }
.lb-quote { font-weight: 600; color: var(--jaune); }
.cp-fam p { margin: 0 auto; padding: 16px var(--gutter) 24px; font-size: 14px; line-height: 1.5; color: #3b4252; }
/* sondage + clip */
.cp-two { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 48px; }
.cp-poll { display: grid; grid-template-columns: 130px 1fr 60px; align-items: center; gap: 12px; margin: 10px 0; font-weight: 600; }
.cp-bar { height: 26px; background: #e3e3dd; border-radius: 3px; overflow: hidden; }
.cp-bar i { display: block; height: 100%; width: 0; transition: width 1.6s cubic-bezier(.2,.8,.2,1); }
.cp-poll b { text-align: right; font: 800 22px/1 var(--f-display); }
.cp-clip { display: grid; grid-template-columns: 140px 1fr; gap: 16px; align-items: start; }
.cp-clip > img { width: 140px; border-radius: 4px; box-shadow: 0 10px 30px rgba(22,33,58,.25); }
.cp .tracks { --t-bg: #fff; background: transparent; }
.cp .track { background: #fff; border-color: #dcdcd6; color: var(--encre); }
.cp .track .t a, .cp .track .tag { color: #5b6270; }
.cp .track .n { color: #5b6270; }
.cp .play { background: var(--bleu); color: #fff; }
.cp .play.ext { background: transparent; color: var(--bleu); box-shadow: inset 0 0 0 2px var(--bleu); }
.cp .ico { border-color: #cfd3d9; color: #5b6270; }
.cp-foot { padding: 40px var(--gutter) 48px; text-align: center; color: #5b6270; font-size: 14px; border-top: 1px solid #dcdcd6; }
.cp-bisou { margin: 10px 0 0; font: 900 34px/1 var(--f-display); text-transform: uppercase; color: var(--rouge); }
/* fiche ministre (modale) */
.cp-modal img { display: block; width: calc(100% + 52px); margin: -26px -26px 18px; aspect-ratio: 3 / 2; object-fit: cover; border-radius: 6px 6px 0 0; }
.cp-modal .cp-kicker { color: var(--lcd); }
.cp-quote { font: 600 20px/1.3 var(--f-body); color: var(--jaune); margin: 0 0 14px; }
body[data-skin="campagne"] .modal-card { width: min(640px, 100%); }
@media (max-width: 900px) {
  .cp-hero-in { grid-template-columns: 1fr; }
  .cp-portrait { justify-self: center; max-width: 360px; }
  .cp-top { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
  .cp-sec { padding: 44px 0; }
  .cp-count span { min-width: 0; flex: 1; }
  .cp-count b { font-size: 26px; }
  .cp-item p { padding-left: 20px; }
  .cp-clip { grid-template-columns: 1fr; }
  .cp-clip > img { width: 120px; }
  .cp-poll { grid-template-columns: 100px 1fr 54px; }
  .cp-stamp { left: 0; font-size: 16px; }
}
.cp .lb { color: var(--marquage); font-family: var(--f-body); } .cp .lb a { color: var(--marquage); } .cp .lb .muted { color: var(--gris); }
/* visionneuse ouverte : la barre de menu passe dessous (le bouton Fermer est en haut à droite) */
body.np-open .topbar { z-index: 0; }

/* Francis 2027 : l'interview SRK TV */
.cp-itw { background: #fff; padding: 64px 0; border-top: 1px solid #dcdcd6; }
.cp-itw-head { display: grid; grid-template-columns: 180px 1fr; gap: 28px; align-items: center; margin-bottom: 26px; }
.cp-itw-logo { width: 180px; border-radius: 6px; box-shadow: 0 8px 24px rgba(0,0,0,.18); }
.cp-itw-sous { margin: 0; color: #3b4252; font-size: 16px; line-height: 1.5; }
.cp-itw-photo { display: block; width: 100%; padding: 0; border: 0; background: transparent; cursor: zoom-in; border-radius: 8px; overflow: hidden; box-shadow: 0 24px 60px rgba(22,33,58,.25); margin-bottom: 36px; }
.cp-itw-photo img { display: block; width: 100%; height: auto; }
.cp-itw-body { display: grid; gap: 14px; max-width: 980px; margin: 0 auto; }
.cp-line { display: flex; gap: 12px; align-items: flex-end; }
.cp-line.francis { flex-direction: row-reverse; }
.cp-av { flex: none; width: 54px; height: 54px; padding: 0; border: 3px solid #fff; border-radius: 50%; overflow: hidden; background: #ddd; cursor: zoom-in; box-shadow: 0 4px 12px rgba(0,0,0,.2); }
.cp-av img { width: 100%; height: 100%; object-fit: cover; object-position: center 20%; }
.cp-bubble { max-width: 78%; padding: 12px 16px; border-radius: 16px; font-size: 16px; line-height: 1.5; }
.cp-bubble b { display: block; margin-bottom: 3px; font: 700 11px/1 var(--f-lcd); letter-spacing: .1em; text-transform: uppercase; opacity: .7; }
.cp-line.praud .cp-bubble { background: #eef0f4; color: var(--encre); border-bottom-left-radius: 4px; }
.cp-line.francis .cp-bubble { background: var(--bleu); color: #fff; border-bottom-right-radius: 4px; }
.cp-itw-foot { text-align: center; margin: 26px 0 0; }
@media (max-width: 640px) {
  .cp-itw { padding: 44px 0; }
  .cp-itw-head { grid-template-columns: 1fr; gap: 14px; }
  .cp-itw-logo { width: 140px; }
  .cp-bubble { max-width: 86%; font-size: 15px; }
  .cp-av { width: 40px; height: 40px; }
}

/* Francisco (photomontages) */
.chip.chip-fr.on, .chip.chip-fr:hover { background: #ff2e93; color: #fff; }
.adm-gal-item.lv-cache { border-top-color: #555; }
.adm-gal-item.lv-cache img { opacity: .55; filter: grayscale(.6); }
.lv-switch button.on[data-imglv="cache"] { background: #555; color: #fff; }

/* Francis 2027 : soirée électorale (vidéo) */
.cp-video { background: var(--encre); color: #fff; padding: 56px 0; }
.cp-video .cp-h2 { color: #fff; }
.cp-video-in { display: grid; grid-template-columns: minmax(260px, .8fr) minmax(0, 1.4fr); gap: clamp(24px, 4vw, 56px); align-items: center; }
.cp-video-txt p:last-child { color: #c9d2e6; line-height: 1.55; margin: 0; }
.cp-video-frame { border-radius: 8px; overflow: hidden; box-shadow: 0 30px 70px rgba(0,0,0,.5); border: 4px solid #fff; background: #000; }
.cp-video-frame video { display: block; width: 100%; aspect-ratio: 16 / 9; }
@media (max-width: 900px) { .cp-video-in { grid-template-columns: 1fr; } .cp-video { padding: 40px 0; } }

/* Galerie : l'album de famille (polaroids) */
.famille-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 24px; flex-wrap: wrap; margin-bottom: 26px; }
.famille-head .lead { max-width: 720px; }
.famille-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 28px 22px; padding: 10px 6px 20px; }
.polaroid { position: relative; padding: 10px 10px 16px; border: 0; background: #f6f3ea; color: #222; cursor: zoom-in; transform: rotate(var(--tilt, 0deg)); box-shadow: 0 14px 30px rgba(0,0,0,.5); transition: transform .3s, box-shadow .3s; text-align: center; }
.polaroid::after { content: ""; position: absolute; left: 50%; top: -9px; width: 64px; height: 18px; transform: translateX(-50%) rotate(-3deg); background: rgba(242,194,48,.75); box-shadow: 0 1px 2px rgba(0,0,0,.25); }
.polaroid:hover, .polaroid:focus-visible { transform: rotate(0) scale(1.05); z-index: 2; box-shadow: 0 24px 50px rgba(0,0,0,.6); }
.polaroid:focus-visible { outline: 3px solid var(--lcd); outline-offset: 2px; }
.polaroid-ph { display: block; aspect-ratio: 1; overflow: hidden; background: #ddd; }
.polaroid-ph img { width: 100%; height: 100%; object-fit: cover; display: block; }
.polaroid-cap { display: block; margin-top: 12px; font: 400 22px/1.1 "Gochi Hand", "Permanent Marker", cursive; color: #2a2a2a; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
@media (max-width: 640px) { .famille-grid { grid-template-columns: repeat(2, 1fr); gap: 22px 14px; } .polaroid { padding: 7px 7px 12px; } .polaroid-cap { font-size: 18px; } }

/* Galerie : collections Halloween (sombre) et Cinéma (affiches) */
.col-dark .famille-head .kicker { color: #ff7a1a; }
.gal-item.spooky { aspect-ratio: 3 / 4; box-shadow: 0 0 0 1px #2a1200, 0 14px 30px rgba(0,0,0,.6); filter: saturate(.8); }
.gal-item.spooky:hover { filter: saturate(1.15); box-shadow: 0 0 0 2px #ff7a1a, 0 18px 40px rgba(255,122,26,.25); }
.poster-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 18px; }
.poster { position: relative; padding: 0; border: 0; background: #000; cursor: zoom-in; aspect-ratio: 2 / 3; overflow: hidden; border-radius: 3px; box-shadow: 0 16px 34px rgba(0,0,0,.55); transition: transform .3s; }
.poster img { width: 100%; height: 100%; object-fit: cover; display: block; }
.poster:hover, .poster:focus-visible { transform: translateY(-6px) scale(1.03); }
.poster-cap { position: absolute; left: 0; right: 0; bottom: 0; padding: 36px 10px 10px; background: linear-gradient(180deg, transparent, rgba(0,0,0,.85)); color: #fff; font: 800 15px/1.1 var(--f-display); text-transform: uppercase; letter-spacing: .04em; text-align: left; }
@media (max-width: 640px) { .poster-grid { grid-template-columns: repeat(2, 1fr); gap: 12px; } }

/* Vidéos : sections films / pubs / clips */
.vid-sec { margin-top: 34px; }
.vid-sec + .vid-sec { padding-top: 30px; border-top: 1px solid var(--bitume-2); }

.cp-video-in + .cp-video-in { margin-top: 48px; padding-top: 48px; border-top: 1px solid rgba(255,255,255,.12); }
.cp-video-in.flip .cp-video-txt { order: 2; }
@media (max-width: 900px) { .cp-video-in.flip .cp-video-txt { order: 0; } }

/* BO : dépôt d'image */
.adm-upload { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin: 14px 0 18px; padding: 14px 16px; border-radius: 4px; background: var(--bitume); border: 1px dashed var(--gris); }
.adm-upload strong { font: 800 16px/1 var(--f-display); text-transform: uppercase; letter-spacing: .04em; margin-right: 4px; }
.adm-upload input[type="file"] { color: var(--gris); font-size: 14px; max-width: 260px; }
.adm-upload input[name="title"], .adm-upload select { height: 36px; padding: 0 10px; border-radius: 4px; border: 1px solid var(--bitume-2); background: var(--asphalte); color: var(--marquage); font: 400 15px/1 var(--f-body); }
.adm-upload input[name="title"] { flex: 1 1 200px; min-width: 0; }
.adm-upload .muted { flex-basis: 100%; }

/* ---- propositions des membres (galerie) + validation au BO ---- */
.propose { padding-top: 0; }
.propose-box { border: 2px solid var(--line); border-radius: 18px; padding: 22px 24px; background: rgba(255,255,255,.03); }
.propose-box .adm-upload { margin-top: 16px; }
.wait-badge { font-style: normal; font-weight: 700; color: #111; background: #ffc83d; padding: 1px 7px; border-radius: 999px; font-size: 11px; }
.chip-warn { border-color: #ffc83d; }
.chip-warn.on { background: #ffc83d; color: #111; }
.adm-warn { border-left: 4px solid #ffc83d; padding: 8px 12px; background: rgba(255,200,61,.08); border-radius: 8px; }
.lv-switch .del { margin-left: 6px; color: #ff6b6b; border-color: #ff6b6b55; }
.lv-switch .del:hover { background: #ff6b6b; color: #fff; }

/* ---- vidéo d'album réservée aux membres : cadre verrouillé ---- */
.av-locked { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; width: 100%; aspect-ratio: 9 / 16; border-radius: 10px; background: radial-gradient(ellipse at 50% 30%, #2a1030, #090909 70%); color: #fff; text-align: center; padding: 24px; }
.av-locked .av-lock { font-size: 44px; }
.av-locked strong { font-size: 18px; line-height: 1.2; }
.av-locked span { color: #c8c8c8; font-size: 14px; }
.av-locked a { color: #ffc83d; }

/* =====================================================================
   SERKADEX — cartes Serkamon
   ===================================================================== */
.sk-hero .lead { max-width: 760px; }
.sk-actions { display: flex; gap: 12px; flex-wrap: wrap; margin: 22px 0 18px; }
.sk-chips .chip { --t: #c9c9c9; }
.sk-dot { display: inline-block; width: 10px; height: 10px; border-radius: 50%; background: var(--t); margin-right: 7px; vertical-align: middle; box-shadow: 0 0 8px var(--t); }
.sk-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 26px 22px; perspective: 1200px; }
.sk-card {
  --mx: 50%; --my: 50%; --rx: 0deg; --ry: 0deg; --t: #c9c9c9;
  position: relative; display: block; width: 100%; aspect-ratio: 63 / 88; padding: 0; border: 0; border-radius: 12px; overflow: hidden;
  background: #111; color: var(--marquage); cursor: pointer; text-align: left;
  transform: rotateX(var(--rx)) rotateY(var(--ry)); transition: transform .12s ease-out, box-shadow .25s;
  box-shadow: 0 14px 30px rgba(0,0,0,.55), 0 0 0 2px rgba(255,255,255,.06);
}
.sk-card:hover { box-shadow: 0 24px 50px rgba(0,0,0,.7), 0 0 28px color-mix(in srgb, var(--t) 55%, transparent); z-index: 2; }
.sk-card img:not(.sk-badge) { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.sk-holo {
  position: absolute; inset: 0; z-index: 2; pointer-events: none; mix-blend-mode: color-dodge; opacity: 0; transition: opacity .25s;
  background:
    radial-gradient(circle at var(--mx) var(--my), rgba(255,255,255,.55), transparent 42%),
    linear-gradient(115deg, transparent 20%, rgba(255,0,150,.35) 35%, rgba(0,255,220,.35) 45%, rgba(255,220,0,.35) 55%, transparent 70%);
  background-size: 100% 100%, 300% 300%;
  background-position: 0 0, calc(var(--mx) * 1) calc(var(--my) * 1);
}
.sk-card:hover .sk-holo { opacity: .9; }
.sk-name {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 3; padding: 26px 12px 10px; font: 800 17px/1.1 var(--f-display); text-transform: uppercase; letter-spacing: .02em;
  background: linear-gradient(to top, rgba(0,0,0,.85), transparent); display: flex; justify-content: space-between; align-items: baseline; gap: 8px;
}
.sk-name b { font: 700 11px/1 var(--f-lcd); color: var(--t); letter-spacing: .08em; white-space: nowrap; }
.sk-card.back { cursor: default; background: radial-gradient(ellipse at 50% 35%, #2a2d4a, #0d0e16 70%); box-shadow: inset 0 0 0 6px #1c1f33, 0 14px 30px rgba(0,0,0,.55); }
.sk-card.back::before { content: ""; position: absolute; inset: 14px; border-radius: 8px; border: 2px dashed rgba(255,255,255,.12); }
.sk-back { position: absolute; inset: 0; display: grid; place-content: center; text-align: center; gap: 6px; color: rgba(255,255,255,.55); }
.sk-back b { font: 900 96px/1 var(--f-display); color: rgba(255,255,255,.18); }
.sk-back small { font-family: var(--f-lcd); font-size: 11px; letter-spacing: .1em; text-transform: uppercase; }
.sk-card.back .sk-name { opacity: .55; }

/* fiche dans la visionneuse */
.lb-fig figcaption .sk-meta { display: flex; gap: 10px; justify-content: center; align-items: center; flex-wrap: wrap; }
.sk-rank, .sk-type { font: 700 11px/1 var(--f-lcd); letter-spacing: .1em; padding: 4px 9px; border-radius: 999px; background: #333; color: #fff; }
.sk-type { background: var(--t); color: #111; }
.sk-rank.r-ex { background: var(--jaune); color: #111; }
.sk-rank.r-niveau2 { background: var(--bleu-panneau); }
.sk-rank.r-lgendaire { background: var(--rouge); }
.sk-atks { display: grid; gap: 8px; text-align: left; margin: 8px auto 0; max-width: 640px; }
.sk-atk { display: grid; grid-template-columns: 1fr auto; gap: 2px 12px; padding: 8px 12px; border-radius: 8px; background: rgba(255,255,255,.06); }
.sk-atk b { font: 800 18px/1.1 var(--f-display); text-transform: uppercase; }
.sk-atk i { font: 900 22px/1 var(--f-display); font-style: normal; color: var(--jaune); }
.sk-atk small { grid-column: 1 / -1; color: var(--gris); font-size: 13px; line-height: 1.4; }
.lb-fig:has(.sk-atks) img { max-height: calc(100vh - var(--bar-h) - 330px); }

/* règles, teaser galerie */
.sk-rules { display: grid; gap: 10px; max-width: 760px; }
.sk-rules p { margin: 0; padding: 10px 14px; border-left: 4px solid var(--jaune); background: rgba(255,255,255,.04); }
.sk-fan { display: flex; justify-content: center; margin-top: 18px; height: 230px; }
.sk-fan img { width: 150px; aspect-ratio: 63 / 88; object-fit: cover; border-radius: 9px; box-shadow: 0 14px 30px rgba(0,0,0,.6); transform: rotate(calc((var(--i) - 2) * 9deg)) translateY(calc(abs(var(--i) - 2) * 12px)); margin: 0 -22px; transform-origin: 50% 120%; transition: transform .2s; }
.sk-fan img:hover { transform: rotate(0) translateY(-14px) scale(1.06); z-index: 2; }

/* booster */
.sk-booster { position: fixed; inset: 0; z-index: 60; background: rgba(8,8,10,.92); display: grid; place-items: center; padding: 24px; }
.sk-booster[hidden] { display: none; }
.sk-booster-in { position: relative; text-align: center; max-width: 960px; width: 100%; }
.sk-booster-cards { display: flex; gap: 22px; justify-content: center; flex-wrap: wrap; perspective: 1400px; margin: 18px 0; }
.sk-flip { --t: #c9c9c9; display: block; width: min(260px, 28vw); height: calc(min(260px, 28vw) * 88 / 63); background: none; border: 0; padding: 0; cursor: pointer; perspective: 1200px; animation: sk-deal .5s var(--d) both; outline-offset: 4px; }
.sk-booster .lb-close { position: fixed; top: 16px; right: 16px; z-index: 5; }
.sk-booster-in { padding-top: 40px; }
@keyframes sk-deal { from { opacity: 0; transform: translateY(60px) rotate(-6deg); } to { opacity: 1; transform: none; } }
.sk-flip-in { position: relative; width: 100%; height: 100%; transform-style: preserve-3d; transition: transform .7s cubic-bezier(.2,.7,.2,1); }
.sk-flip.flipped .sk-flip-in { transform: rotateY(180deg); }
.sk-face { position: absolute; inset: 0; backface-visibility: hidden; border-radius: 12px; overflow: hidden; box-shadow: 0 18px 40px rgba(0,0,0,.6); }
.sk-face-back { background: radial-gradient(ellipse at 50% 35%, #2a2d4a, #0d0e16 70%); display: grid; place-items: center; box-shadow: inset 0 0 0 6px #1c1f33, 0 18px 40px rgba(0,0,0,.6); }
.sk-face-back b { font: 900 110px/1 var(--f-display); color: rgba(255,255,255,.18); }
.sk-face-front { transform: rotateY(180deg); background: #111; box-shadow: 0 18px 40px rgba(0,0,0,.6), 0 0 30px var(--t); }
.sk-face-front img { width: 100%; height: 100%; object-fit: cover; display: block; }
.sk-face-front small { position: absolute; left: 0; right: 0; bottom: 0; padding: 20px 10px 8px; background: linear-gradient(to top, rgba(0,0,0,.85), transparent); font: 700 13px/1 var(--f-display); text-transform: uppercase; }
@media (max-width: 640px) { .sk-grid { grid-template-columns: repeat(2, 1fr); gap: 16px 12px; } .sk-fan { height: 190px; } .sk-fan img { width: 110px; margin: 0 -16px; } }
@media (prefers-reduced-motion: reduce) { .sk-card { transform: none !important; } .sk-flip { animation: none; } }
/* fiche Serkamon longue : la visionneuse défile, l'image reste raisonnable */
.lb:has(.sk-atks) { overflow-y: auto; display: block; padding: 24px calc(var(--gutter) + 70px); }
.lb:has(.sk-atks) .lb-nav { position: fixed; top: 50%; transform: translateY(-50%); }
.lb:has(.sk-atks) .lb-prev { left: var(--gutter); }
.lb:has(.sk-atks) .lb-next { right: var(--gutter); }
.lb:has(.sk-atks) .lb-fig { padding-top: 30px; }
.lb-fig:has(.sk-atks) img { max-height: min(62vh, 640px); }

/* =====================================================================
   LE FRANCISTAN — portail, sous-navigation, skins des univers
   ===================================================================== */
.brand-sub { letter-spacing: .18em; }
.nav a.nav-tv { color: #ff8a00; }
.nav a.nav-tv[aria-current="page"], .nav a.nav-tv:hover { background: linear-gradient(90deg, #ffd21f, #ff8a00 50%, #f2222f); color: #111; }
.subnav {
  display: flex; align-items: center; gap: 2px; flex-wrap: wrap; padding: 8px var(--gutter);
  background: var(--bitume); border-bottom: 1px solid var(--bitume-2); position: sticky; top: calc(var(--bar-h) - 24px); z-index: 15;
}
.subnav-brand { font: 800 13px/1 var(--f-display); letter-spacing: .2em; text-transform: uppercase; color: var(--jaune); margin-right: 12px; padding: 6px 0; }
.subnav a { text-decoration: none; padding: 6px 10px; font: 700 15px/1 var(--f-display); text-transform: uppercase; letter-spacing: .04em; color: var(--gris); border-radius: 3px; }
.subnav a:hover, .subnav a[aria-current="page"] { color: var(--asphalte); background: var(--marquage); }
.subnav a.nav-radio { color: var(--lcd); }
.subnav a.nav-radio[aria-current="page"] { background: var(--lcd); color: #111; }
@media (max-width: 900px) { .subnav { position: static; } }

/* ---- hub ---- */
.hub-hero { position: relative; height: clamp(360px, 48vw, 900px); display: block; overflow: hidden; background: #0d0d10; }
.hub-hero .hero-video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center center; opacity: 1; }
.hub-hero::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 90px; background: linear-gradient(to top, rgba(28,29,33,.9), rgba(28,29,33,0)); pointer-events: none; }
.hub-hero-in { position: relative; z-index: 1; grid-column: 2; text-align: left; padding: 60px var(--gutter) 60px 40px; max-width: 860px; }
@media (max-width: 900px) { .hub-hero { grid-template-columns: 1fr; } .hub-hero::after { background: rgba(13,13,16,.6); } .hub-hero-in { grid-column: 1; text-align: center; padding: 60px var(--gutter); } .hub-motto { margin-left: auto; margin-right: auto; } }
.hub-kicker { font: 700 13px/1 var(--f-lcd); letter-spacing: .3em; text-transform: uppercase; color: var(--jaune); margin: 0 0 14px; }
.hub-title { margin: 0; font: 900 clamp(52px, 6.2vw, 108px)/.9 var(--f-display); white-space: nowrap; text-transform: uppercase; letter-spacing: -.02em; color: var(--marquage); text-shadow: 0 10px 40px rgba(0,0,0,.6); }
.hub-title span { display: block; font-size: .28em; letter-spacing: .5em; color: var(--jaune); margin-bottom: 8px; }
.hub-motto { font-size: clamp(17px, 2vw, 22px); color: #d6d6cf; max-width: 620px; margin: 18px 0 26px; }
.hub-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; margin-top: 18px; }
@media (max-width: 1100px) { .hub-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .hub-grid { grid-template-columns: 1fr; } }
.hub-tile { position: relative; display: block; aspect-ratio: 4 / 5; min-height: 300px; border-radius: 16px; overflow: hidden; text-decoration: none; color: #fff; background: var(--bitume); box-shadow: 0 16px 40px rgba(0,0,0,.45); animation: hub-in .5s calc(var(--i) * 70ms) both; }
@keyframes hub-in { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }
.hub-tile img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; filter: saturate(.8); transition: transform .5s, filter .4s; }
.hub-tile:hover img { transform: scale(1.06); filter: saturate(1.1); }
.hub-tile-in { position: absolute; inset: 0; display: flex; flex-direction: column; justify-content: flex-end; gap: 4px; padding: 22px; background: linear-gradient(to top, rgba(0,0,0,.9) 30%, rgba(0,0,0,.1)); }
.hub-tile-in small { font: 700 12px/1 var(--f-lcd); letter-spacing: .2em; text-transform: uppercase; color: var(--jaune); }
.hub-tile-in strong { font: 900 clamp(26px, 2.4vw, 36px)/1 var(--f-display); text-transform: uppercase; }
.hub-tile-in span { color: #ddd; font-size: 14px; line-height: 1.4; }
.hub-tile-in b { margin-top: 8px; align-self: flex-start; padding: 5px 10px; border-radius: 999px; background: rgba(255,255,255,.14); font: 600 12px/1 var(--f-body); }
.hub-tile.t-tv .hub-tile-in small { color: #ff8a00; }
.hub-tile.t-tv img { object-position: center 30%; }
.hub-tile.t-campagne .hub-tile-in small { color: #ff6b6b; }
.hub-tile.t-festivals .hub-tile-in small { color: #ffe500; }
.hub-tile.t-pedia .hub-tile-in small { color: #e7d7a8; }
.hub-tile.t-store .hub-tile-in small { color: #7ee787; }
@media (max-width: 700px) { .hub-tile { min-height: 220px; aspect-ratio: 16 / 10; } }
.hub-foot { margin-top: 40px; background: #05254b; color: #c9d3e3; border-top: 4px solid #d4b45a; }
.hub-foot-in { display: grid; justify-items: center; gap: 22px; padding: 44px var(--gutter) 60px; text-align: center; }
.hub-foot-nav { display: flex; flex-wrap: wrap; justify-content: center; gap: 4px 22px; }
.hub-foot-nav a { color: #fff; text-decoration: none; font: 700 14px/1 var(--f-display); letter-spacing: .14em; text-transform: uppercase; padding: 6px 0; border-bottom: 2px solid transparent; }
.hub-foot-nav a:hover { border-bottom-color: #d4b45a; }
.hub-foot-legal { margin: 0; max-width: 760px; font-size: 12px; line-height: 1.6; color: #8fa0bb; }

/* ---- skin SRK TV ---- */
body[data-skin="tv"] .backdrop { opacity: 1; background: #06060a; }
body[data-skin="tv"] .topbar { border-bottom: 0; box-shadow: 0 4px 0 #ffd21f, 0 8px 0 #ff8a00, 0 12px 0 #4a1a8c; }
body[data-skin="tv"] #app { background: repeating-linear-gradient(0deg, rgba(255,255,255,.025) 0 1px, transparent 1px 3px); }
.tv-hero { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(280px, .8fr); gap: 30px; padding: 40px var(--gutter); max-width: 1320px; margin: 0 auto; align-items: center; }
.tv-screen { position: relative; border-radius: 18px; padding: 10px; background: #15151c; box-shadow: 0 0 0 3px #2a2a35, 0 0 60px rgba(255,138,0,.25), 0 30px 60px rgba(0,0,0,.6); }
.tv-screen video { display: block; width: 100%; aspect-ratio: 16 / 9; background: #000; border-radius: 10px; }
.tv-live { position: absolute; top: 22px; left: 24px; font: 700 12px/1 var(--f-lcd); letter-spacing: .2em; color: #fff; background: #f2222f; padding: 5px 9px; border-radius: 4px; animation: tv-blink 1.4s steps(2) infinite; }
@keyframes tv-blink { to { opacity: .35; } }
.tv-logo { position: absolute; top: 20px; right: 24px; width: 110px; height: auto; border-radius: 4px; box-shadow: 0 4px 14px rgba(0,0,0,.5); opacity: .95; }
.tv-ticker { position: absolute; left: 10px; right: 10px; bottom: 10px; overflow: hidden; background: #4a1a8c; color: #fff; font: 700 13px/1 var(--f-lcd); padding: 7px 0; border-radius: 0 0 10px 10px; white-space: nowrap; }
.tv-ticker span { display: inline-block; padding-left: 100%; animation: tv-scroll 40s linear infinite; }
.tv-ticker:hover span { animation-play-state: paused; }
@keyframes tv-scroll { to { transform: translateX(-100%); } }
.tv-title { margin: 0 0 10px; }
.tv-title img { width: min(100%, 360px); height: auto; display: block; border-radius: 8px; box-shadow: 0 16px 40px rgba(0,0,0,.5); }
.tv-h2 { color: #fff; }
.tv-now { display: grid; gap: 4px; padding: 14px 16px; border-left: 4px solid #ff8a00; background: rgba(255,255,255,.05); border-radius: 0 10px 10px 0; margin: 18px 0; }
.tv-now small { font: 700 11px/1 var(--f-lcd); letter-spacing: .2em; color: #ff8a00; text-transform: uppercase; }
.tv-now strong { font: 800 22px/1.1 var(--f-display); text-transform: uppercase; }
.tv-now span { color: var(--gris); font-size: 14px; }
.tv-host { display: flex; align-items: center; gap: 12px; }
.tv-host img { width: 56px; height: 56px; border-radius: 50%; object-fit: cover; border: 2px solid #ff8a00; }
.tv-host strong { display: block; font: 800 18px/1 var(--f-display); text-transform: uppercase; }
.tv-host small { color: var(--gris); }
.tv-grid { list-style: none; margin: 18px 0 0; padding: 0; display: grid; gap: 6px; }
.tv-grid li { display: grid; grid-template-columns: 70px 1fr auto; gap: 14px; align-items: center; padding: 12px 16px; border-radius: 10px; background: rgba(255,255,255,.04); }
.tv-grid li.on { background: rgba(255,138,0,.14); box-shadow: inset 0 0 0 1px #ff8a00; }
.tv-grid b { font: 700 18px/1 var(--f-lcd); color: #ff8a00; }
.tv-grid strong { display: block; font: 800 20px/1.1 var(--f-display); text-transform: uppercase; }
.tv-grid span { color: var(--gris); font-size: 14px; }
.tv-grid i { font: 700 11px/1 var(--f-lcd); letter-spacing: .2em; color: #fff; background: #4a1a8c; padding: 5px 8px; border-radius: 4px; font-style: normal; }
.tv-itw { display: grid; grid-template-columns: minmax(200px, 320px) 1fr; gap: 26px; align-items: center; }
.tv-itw img { width: 100%; border-radius: 12px; }
@media (max-width: 900px) { .tv-hero, .tv-itw { grid-template-columns: 1fr; } .tv-grid li { grid-template-columns: 56px 1fr; } .tv-grid i { grid-column: 2; justify-self: start; } }

/* ---- skin Francipédia ---- */
body[data-skin="pedia"] .backdrop { opacity: 1; background: #fbf7ee; }
body[data-skin="pedia"] #app { color: #1f1b16; }
body[data-skin="pedia"] .kicker { color: #8a2b1c; }
body[data-skin="pedia"] .lead, body[data-skin="pedia"] .back-btn, body[data-skin="pedia"] .muted { color: #4a4238; }
body[data-skin="pedia"] .chip { color: #1f1b16; border-color: #cfc3ad; background: #fff; }
body[data-skin="pedia"] .chip.on { background: #1f1b16; color: #fbf7ee; }
.pedia { font-family: "Cormorant Garamond", Georgia, serif; }
.pedia-h1 { margin: 0; font: 700 clamp(44px, 7vw, 92px)/1 "Playfair Display", Georgia, serif; color: #1f1b16; border-bottom: 3px double #1f1b16; padding-bottom: 10px; }
.pedia .lead { font-size: 20px; }
.pedia .lead a { color: #8a2b1c; }
.pedia-search { width: 100%; margin: 20px 0 14px; padding: 14px 18px; font: 500 20px/1 "Cormorant Garamond", Georgia, serif; border: 2px solid #1f1b16; border-radius: 4px; background: #fff; color: #1f1b16; }
.pedia-list { columns: 3 280px; column-gap: 24px; margin-top: 18px; }
.pedia-item { display: block; break-inside: avoid; text-decoration: none; color: #1f1b16; padding: 10px 0 12px; border-bottom: 1px solid #d9cdb6; }
.pedia-item small { display: block; font: 700 10px/1 var(--f-lcd); letter-spacing: .2em; text-transform: uppercase; color: #8a2b1c; margin-bottom: 4px; }
.pedia-item strong { display: block; font: 700 22px/1.1 "Playfair Display", Georgia, serif; }
.pedia-item:hover strong { color: #8a2b1c; text-decoration: underline; }
.pedia-item span { display: block; font-size: 15px; color: #4a4238; margin-top: 3px; }
.pedia-art { max-width: 820px; }
.pedia-sub { font-size: 22px; font-style: italic; color: #4a4238; margin: 10px 0 0; }
.pedia-body { font-size: 20px; line-height: 1.6; margin-top: 18px; }
.pedia-body p { margin: 0 0 16px; }
.pedia-fig { float: right; width: min(300px, 42%); margin: 6px 0 14px 24px; padding: 8px; background: #fff; border: 1px solid #d9cdb6; }
.pedia-fig img { width: 100%; display: block; }
.pedia-fig.wide { float: none; width: min(100%, 560px); margin: 0 auto 20px; }
.pedia-fig.wide figcaption { text-align: center; }
.pedia-fig figcaption { font-size: 13px; color: #4a4238; margin-top: 6px; font-style: italic; }
.pedia-art h2 { font: 700 26px/1 "Playfair Display", Georgia, serif; border-bottom: 1px solid #1f1b16; padding-bottom: 6px; margin: 26px 0 12px; clear: both; }
.pedia-foot { font-size: 14px; color: #6b6052; font-style: italic; border-top: 1px dashed #cfc3ad; padding-top: 12px; margin-top: 30px; clear: both; }
.pedia-art .btn.ghost { color: #1f1b16; box-shadow: inset 0 0 0 2px #1f1b16; font-family: var(--f-display); }

/* ---- skin Store ---- */
/* ---- SÈRKA STORE — Boutique d'État du Francistan (palette drapeau) ---- */
body[data-skin="store"] .backdrop { opacity: 1; background: #0b1a33; background-image: radial-gradient(ellipse at 50% -10%, rgba(212,169,58,.18), transparent 55%), repeating-linear-gradient(135deg, rgba(255,255,255,.015) 0 2px, transparent 2px 6px); }
body[data-skin="store"] #app { color: #f1e9d6; font-family: "Inter", "Sora", var(--f-body); }
.store { position: relative; }
.store::after { content: ""; position: absolute; right: -20px; top: 40px; width: 520px; height: 440px; background: url("../media/francistan/blason.png") center / contain no-repeat; opacity: .05; pointer-events: none; }
.st-kicker { display: flex; align-items: center; gap: 14px; margin: 0; font: 13px/1 "Special Elite", monospace; letter-spacing: .25em; text-transform: uppercase; color: #d4a93a; }
.st-kicker::before, .st-kicker::after { content: ""; height: 1px; flex: 0 0 60px; background: #d4a93a; }
.st-h1 { margin: 14px 0 10px; font: 400 clamp(56px, 8vw, 96px)/.9 "Bebas Neue", var(--f-display); letter-spacing: .02em; color: #fff; }
.st-h1 small { display: block; font-size: clamp(18px, 2.4vw, 28px); color: #d4a93a; letter-spacing: .2em; margin-top: 6px; }
.st-decree { max-width: 720px; margin: 18px 0 32px; padding-left: 16px; border-left: 3px solid #b3202b; font: 15px/1.6 "Special Elite", monospace; color: #f1e9d6; }
.st-decree b { color: #f0d27a; }
.st-rayons { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 32px; position: relative; z-index: 1; }
.st-rayons button { background: transparent; color: #f1e9d6; border: 1px solid rgba(212,169,58,.45); font: 18px/1 "Bebas Neue", var(--f-display); letter-spacing: .12em; padding: 8px 16px; cursor: pointer; }
.st-rayons button span { color: #d4a93a; margin-left: 6px; }
.st-rayons button.on, .st-rayons button:hover { background: #b3202b; border-color: #b3202b; color: #fff; }
.st-rayons button.on span { color: #f0d27a; }
.st-layout { display: grid; grid-template-columns: 1fr 300px; gap: 32px; align-items: start; position: relative; z-index: 1; }
.st-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 22px; }
.st-item { position: relative; background: #102648; border: 1px solid rgba(212,169,58,.35); box-shadow: inset 0 0 0 4px #102648, inset 0 0 0 5px rgba(212,169,58,.35); padding: 5px; transition: transform .15s; }
.st-item:hover { transform: translateY(-3px); }
.st-ref { position: absolute; top: 14px; left: 14px; z-index: 2; font: 11px/1 "Special Elite", monospace; letter-spacing: .15em; color: #f0d27a; text-shadow: 0 1px 3px rgba(0,0,0,.8); }
.st-img { position: relative; height: 230px; display: grid; place-items: center; overflow: hidden; background: radial-gradient(ellipse at 50% 35%, #c4323d 0%, #b3202b 45%, #8f1621 100%); border-bottom: 3px solid #d4a93a; }
.st-img img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; filter: saturate(.92) contrast(1.04); }
.st-img span { font-size: 84px; filter: drop-shadow(0 18px 18px rgba(0,0,0,.55)); }
.st-promo { position: absolute; bottom: 10px; left: 10px; font: 700 12px/1 "Inter", var(--f-body); background: #d4a93a; color: #0b1a33; padding: 5px 8px; font-style: normal; letter-spacing: .05em; }
.fr-badge { top: 10px; right: 10px; }
.st-stamp { position: absolute; right: 12px; top: 196px; z-index: 2; transform: rotate(-12deg); font: 11px/1 "Special Elite", monospace; letter-spacing: .15em; text-transform: uppercase; color: #f0d27a; border: 2px solid #f0d27a; padding: 4px 8px; background: rgba(11,26,51,.45); opacity: .95; }
.st-stamp.red { color: #ff6b74; border-color: #ff6b74; }
.st-body { display: grid; gap: 4px; padding: 16px 16px 18px; }
.st-cat { font: 11px/1 "Special Elite", monospace; letter-spacing: .25em; text-transform: uppercase; color: #d4a93a; }
.st-item strong { font: 400 28px/1 "Bebas Neue", var(--f-display); letter-spacing: .03em; color: #fff; margin: 4px 0 4px; }
.st-item p { margin: 0; color: #9fb0cc; font-size: 13px; line-height: 1.5; min-height: 58px; }
.st-more { justify-self: start; background: none; border: 0; padding: 0; color: #f0d27a; font: 12px/1 "Special Elite", monospace; letter-spacing: .08em; cursor: pointer; text-decoration: underline; text-underline-offset: 3px; }
.st-more:hover { color: #fff; }
.st-price { display: flex; gap: 10px; align-items: baseline; margin-top: 10px; }
.st-price b { font: 400 34px/1 "Bebas Neue", var(--f-display); color: #f0d27a; }
.st-price s { color: #9fb0cc; font-size: 13px; }
.st-price em { font: 12px/1 "Special Elite", monospace; color: #f1e9d6; opacity: .8; }
.st-stock { font: 12px/1.4 "Special Elite", monospace; color: #f1e9d6; opacity: .85; margin-top: 4px; }
.st-stock::before { content: "▪ "; color: #ff6b74; }
.st-btn { display: block; width: 100%; margin-top: 12px; background: #d4a93a; color: #0b1a33; border: 0; font: 20px/1 "Bebas Neue", var(--f-display); letter-spacing: .14em; padding: 11px; cursor: pointer; }
.st-btn:hover { background: #f0d27a; }
.st-btn.red { background: #b3202b; color: #fff; }
.st-btn.red:hover { background: #8f1621; }
.st-btn:disabled { opacity: .45; cursor: not-allowed; }
.st-qty { display: flex; align-items: center; gap: 10px; margin-top: 12px; }
.st-qty b { font: 400 22px/1 "Bebas Neue", var(--f-display); min-width: 20px; text-align: center; color: #f0d27a; }
body[data-skin="store"] .btn.ghost { color: #f1e9d6; box-shadow: inset 0 0 0 2px #d4a93a; }
.st-order { position: sticky; top: calc(var(--bar-h) + 12px); background: #f1e9d6; color: #1a1a1a; padding: 22px 20px 26px; font-family: "Special Elite", monospace; background-image: repeating-linear-gradient(0deg, transparent 0 27px, rgba(0,0,0,.06) 27px 28px); box-shadow: 0 14px 30px rgba(0,0,0,.5); }
.st-order::before { content: ""; position: absolute; inset: 8px; border: 1px dashed rgba(0,0,0,.35); pointer-events: none; }
.st-order h2 { margin: 0 0 2px; font: 400 30px/1 "Bebas Neue", var(--f-display); letter-spacing: .08em; }
.st-order-ref { font-size: 11px; letter-spacing: .2em; color: #555; margin-bottom: 14px; }
.st-order ul { list-style: none; padding: 0; margin: 0 0 12px; font-size: 13px; }
.st-order li { display: flex; justify-content: space-between; gap: 10px; padding: 4px 0; border-bottom: 1px solid rgba(0,0,0,.12); }
.st-order li.empty { font-size: 13px; color: #666; font-style: italic; border: 0; }
.st-order-total { display: flex; justify-content: space-between; font: 800 15px/1.3 "Inter", var(--f-body); margin: 10px 0 14px; }
.st-order .st-btn { margin-top: 0; }
.st-order-note { font-size: 10px; color: #666; margin-top: 10px; line-height: 1.5; padding-right: 96px; min-height: 80px; }
.st-seal { position: absolute; right: 16px; bottom: 16px; width: 92px; height: 92px; border: 3px double #b3202b; border-radius: 50%; display: grid; place-items: center; text-align: center; font-size: 9px; letter-spacing: .12em; text-transform: uppercase; color: #b3202b; transform: rotate(14deg); opacity: .85; line-height: 1.3; pointer-events: none; }
.st-legal { margin-top: 48px; font: 12px/1.6 "Special Elite", monospace; color: #9fb0cc; max-width: 820px; }
.st-recap { list-style: none; margin: 10px 0; padding: 0; display: grid; gap: 6px; }
.st-recap li { display: flex; justify-content: space-between; gap: 12px; padding: 6px 0; border-bottom: 1px dashed var(--bitume-2); }
.st-recap li.tot { border: 0; font-size: 18px; font-weight: 700; }
.st-steps { display: grid; gap: 6px; margin: 14px 0; }
.st-steps p { margin: 0; }
.st-steps .ko { color: #ff6b6b; font-size: 18px; }
@media (max-width: 900px) { .st-layout { grid-template-columns: 1fr; } .st-order { position: static; } .store::after { display: none; } }
@media (max-width: 700px) { .st-head { grid-template-columns: 1fr; } .st-cart { position: static; } }

body[data-skin="tv"] .kicker { color: #ff8a00; }
/* Sandrine change de danse : fondu entre deux vidéos */
.av-frame video { transition: opacity .18s, filter .18s; }
.av-frame video.switching { opacity: 0; filter: blur(6px); }
/* icônes de type Serkadex (media/serkadex/type-*.png) */
.sk-chip-ico { width: 20px; height: 20px; vertical-align: middle; margin-right: 6px; }
.sk-chip-ico + .sk-dot { display: none; }
.sk-badge { position: absolute; top: 8px; right: 8px; z-index: 3; width: 34px; height: 34px; filter: drop-shadow(0 3px 6px rgba(0,0,0,.6)); }
.sk-card.back .sk-badge { opacity: .35; }
.sk-type .sk-ico { width: 16px; height: 16px; vertical-align: -3px; margin-right: 5px; }

/* ---- Serkadex : onglets Créatures / Dresseurs ---- */
.sk-tabs { display: flex; gap: 6px; margin: 4px 0 12px; }
.sk-tabs button { font: 800 18px/1 var(--f-display); text-transform: uppercase; letter-spacing: .04em; padding: 10px 18px; border-radius: 999px; border: 2px solid var(--bitume-2); background: transparent; color: var(--gris); cursor: pointer; }
.sk-tabs button b { color: var(--lcd); font: 400 13px var(--f-lcd); margin-left: 8px; }
.sk-tabs button.on { background: var(--marquage); color: var(--asphalte); border-color: var(--marquage); }
.sk-tabs button.on b { color: var(--rouge); }

/* ---- habillage : hub vidéo, TV plateau + vignettes, festivals, pédia ---- */
.tv-hero { position: relative; }
.tv-bg { position: absolute; inset: 0; background: center / cover no-repeat; opacity: .28; z-index: -1; mask-image: linear-gradient(to bottom, #000 60%, transparent); }
.tv-grid.with-img li { grid-template-columns: 70px 120px 1fr auto; }
.tv-grid.with-img li img, .tv-aff { width: 120px; aspect-ratio: 16 / 9; object-fit: cover; border-radius: 6px; }
.tv-aff { display: block; background: #1b1b24 url("../media/srktv.png") center / 60% no-repeat; overflow: hidden; }
.tv-aff img { display: block; width: 100%; height: 100%; }
@media (max-width: 900px) { .tv-grid.with-img li { grid-template-columns: 56px 1fr; } .tv-grid.with-img li img { grid-column: 2; width: 100%; max-width: 260px; } .tv-grid.with-img li div { grid-column: 2; } }
.pedia-banner { height: 260px; background: center / cover no-repeat; mask-image: linear-gradient(to bottom, #000 55%, transparent); }
.pedia-banner + .pedia { margin-top: -80px; position: relative; }
.st-img img + span { display: none; }
/* ---- Serkadex : hero, logo, dos de carte ---- */
.sk-top { position: relative; background: #07060f url("../media/serkadex/hero.jpg") center / cover no-repeat; }
.sk-top::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to right, rgba(7,6,15,.92) 0%, rgba(7,6,15,.75) 45%, rgba(7,6,15,.25) 100%), linear-gradient(to top, var(--asphalte) 0%, transparent 25%); pointer-events: none; }
.sk-top .sk-hero { position: relative; z-index: 1; padding-top: 70px; padding-bottom: 40px; }
.sk-logo { margin: 0 0 10px; display: grid; gap: 6px; }
.sk-logo img { width: min(100%, 620px); height: auto; display: block; filter: drop-shadow(0 14px 30px rgba(0,0,0,.6)); }
.sk-logo small { font: 700 13px/1 var(--f-lcd); letter-spacing: .4em; text-transform: uppercase; color: var(--jaune); padding-left: 6px; }
.sk-card.back { background: #0d0e16; }
.sk-card .sk-dos { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: .95; }
.sk-card.back::before { display: none; }
.sk-card.back .sk-back { background: radial-gradient(ellipse at center, rgba(0,0,0,.55), transparent 70%); }
.sk-card.back .sk-back b { color: rgba(255,255,255,.75); text-shadow: 0 4px 18px rgba(0,0,0,.9); }
.sk-card.back .sk-back small { color: #fff; text-shadow: 0 2px 8px #000; }
.sk-face-back { overflow: hidden; }
.sk-face-back img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.sk-face-back b { position: relative; color: rgba(255,255,255,.6); text-shadow: 0 4px 18px rgba(0,0,0,.9); }
.sk-face-back img + b { display: none; }

/* ---- maintenance ---- */
body[data-skin="maint"] .backdrop { opacity: 1; background: #0e1a2b; }
.maint { position: relative; min-height: calc(100vh - var(--bar-h) - 92px); display: grid; align-items: end; }
.maint img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center 30%; }
.maint-in { position: relative; padding: 40px var(--gutter) 60px; background: linear-gradient(to top, rgba(10,16,28,.96) 40%, transparent); color: #fff; }
.maint-in .h-display { font-size: clamp(48px, 9vw, 120px); color: #fff; }
.maint-in .lead { max-width: 720px; color: #e6e6e6; }
.maint-in .kicker { color: var(--jaune); }
.maint-bar { background: var(--jaune); color: #111; font-weight: 700; padding: 8px var(--gutter); text-align: center; }
.maint-bar a { color: #111; }
.adm-maint { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; padding: 10px 14px; border-radius: 10px; background: rgba(255,255,255,.05); margin: 0 0 14px; }
.adm-maint.on { background: rgba(242,194,48,.14); box-shadow: inset 0 0 0 1px var(--jaune); }
/* pochette de booster */
.sk-pack { position: relative; border: 0; background: none; padding: 0; cursor: pointer; display: grid; justify-items: center; gap: 10px; animation: sk-pack-in .5s both; }
@keyframes sk-pack-in { from { opacity: 0; transform: translateY(40px) scale(.9); } to { opacity: 1; transform: none; } }
.sk-pack img { width: min(300px, 60vw); height: auto; border-radius: 10px; box-shadow: 0 30px 60px rgba(0,0,0,.7), 0 0 40px rgba(180,90,255,.35); animation: sk-pack-wobble 1.6s ease-in-out infinite; }
@keyframes sk-pack-wobble { 0%, 100% { transform: rotate(-2deg); } 50% { transform: rotate(2deg) translateY(-4px); } }
.sk-pack span { font: 700 12px/1 var(--f-lcd); letter-spacing: .2em; text-transform: uppercase; color: var(--jaune); }
.sk-pack.torn img { animation: sk-pack-tear .45s forwards; }
@keyframes sk-pack-tear { 0% { transform: scale(1); filter: brightness(1); } 40% { transform: scale(1.08) rotate(-3deg); filter: brightness(1.8); } 100% { transform: scale(1.4) rotate(6deg); opacity: 0; filter: brightness(3) blur(6px); } }
.sk-pack.torn span { opacity: 0; }
.hub-groupe em { color: #d4b45a; }
/* pied de page : la maison mère SÈRKA */
.hub-groupe { display: block; }
.hub-groupe img { display: block; width: min(100%, 640px); height: auto; margin: 0 auto; transition: transform .3s, filter .3s; }
.hub-groupe:hover img { transform: scale(1.02); filter: brightness(1.08); }

/* ---- Store : fiche produit ---- */
body[data-skin="store"] .modal-card { width: min(720px, 100%); background: #f1e9d6; color: #1a1a1a; border-color: #d4a93a; }
body[data-skin="store"] .modal-x { color: #1a1a1a; }
body[data-skin="store"] .modal-card .btn.ghost { color: #1a1a1a; box-shadow: inset 0 0 0 2px #1a1a1a; }
.st-fiche { display: grid; gap: 10px; }
.st-fiche .st-cat { color: #b3202b; }
.st-fiche .st-price b { color: #0b1a33; }
.st-fiche .st-price s { color: #666; }
.st-fiche .st-stock { color: #1a1a1a; }
.st-fiche .st-btn { width: auto; padding: 11px 22px; }
.st-fiche .btn.ghost { color: #1a1a1a !important; box-shadow: inset 0 0 0 2px #1a1a1a !important; }
.st-fiche .st-qty b { color: #0b1a33; }
.st-fiche-img { aspect-ratio: 4/3; border: 3px solid #d4a93a; background: var(--bg); overflow: hidden; }
.st-fiche-img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.st-fiche h2 { margin: 0; font: 400 clamp(30px, 4vw, 40px)/1 "Bebas Neue", var(--f-display); letter-spacing: .03em; }
.st-fiche h3 { margin: 10px 0 0; font: 13px/1.2 "Special Elite", monospace; letter-spacing: .15em; text-transform: uppercase; color: #b3202b; }
.st-fiche p { margin: 0; color: #333; font-size: 14px; line-height: 1.55; }
.st-fiche-lead { font-weight: 700; color: #1a1a1a !important; font-size: 15px !important; }
.st-fiche ul { margin: 0; padding-left: 20px; color: #333; font-size: 14px; line-height: 1.55; }
.st-fiche li { margin: 3px 0; }
.st-fiche-act { margin-top: 8px; }
.st-fiche-foot { margin-top: 10px !important; padding-top: 10px; border-top: 1px dashed rgba(0,0,0,.35); color: #888 !important; font-size: 12px !important; text-align: center; }

/* ============================================================
   FRANCISTAN — identité de l'État
   ============================================================ */
/* Header : blason à la place du pictogramme */
.brand-mark.fr-blason { width: auto; height: 48px; filter: drop-shadow(0 2px 4px rgba(0,0,0,.45)); }
.brand:hover .brand-mark.fr-blason { transform: none; }
@media (max-width: 720px) { .brand-mark.fr-blason { height: 40px; } }

/* Footer d'État : bandeau drapeau */
.fr-foot { margin-top: 40px; color: var(--srk-cream); background: linear-gradient(115deg, var(--srk-navy) 0 48%, var(--srk-gold) 48% calc(48% + 2px), var(--srk-red) calc(48% + 2px) 100%); border-top: 2px solid var(--srk-gold); border-bottom: 2px solid var(--srk-gold); }
.fr-foot-in { display: grid; justify-items: center; gap: 12px; padding: 22px var(--gutter) 26px; text-align: center; }
.fr-foot-arms { display: block; height: 72px; width: auto; filter: drop-shadow(0 3px 6px rgba(0,0,0,.5)); }
.fr-foot-nav { display: flex; flex-wrap: wrap; justify-content: center; gap: 2px 18px; }
.fr-foot-nav a { color: var(--srk-cream); text-decoration: none; font: 700 12px/1 var(--f-display); letter-spacing: .14em; text-transform: uppercase; padding: 4px 0; border-bottom: 1px solid transparent; opacity: .9; }
.fr-foot-nav a:hover { border-bottom-color: var(--srk-gold); opacity: 1; }
.fr-foot-legal { margin: 0; font: 500 12px/1.5 var(--f-body); letter-spacing: .08em; text-transform: uppercase; color: var(--srk-gold); }
body[data-skin="store"] .fr-foot, body[data-skin="pedia"] .fr-foot { margin-top: 0; }

/* Francipédia : infobox façon encyclopédie */
.fr-infobox { float: right; width: min(280px, 42%); margin: 8px 0 18px 26px; padding: 10px; background: var(--srk-cream); border: 1px solid var(--srk-gold); box-shadow: 0 1px 0 #fff inset; font-family: var(--f-body); }
.fr-infobox img { display: block; width: 100%; height: auto; }
.fr-infobox-flag { border: 1px solid var(--srk-gold); }
.fr-infobox-arms { width: 60% !important; margin: 12px auto 6px; }
.fr-infobox dl { display: grid; grid-template-columns: auto 1fr; gap: 6px 10px; margin: 10px 0 0; font-size: 13px; line-height: 1.35; border-top: 1px solid var(--srk-gold); padding-top: 10px; }
.fr-infobox dt { font-weight: 700; color: var(--srk-red); }
.fr-infobox dd { margin: 0; color: var(--srk-ink); }
.pedia-fig.wide.after { clear: both; padding-top: 4px; }
@media (max-width: 640px) { .fr-infobox { float: none; width: 100%; margin: 12px 0 18px; } }

/* SRK TV : filigrane + source officielle */
.fr-watermark { position: relative; isolation: isolate; }
.fr-watermark::before { content: ""; position: absolute; inset: 0; z-index: -1; background: url("../media/francistan/blason.png") center / min(520px, 70%) no-repeat; opacity: .06; pointer-events: none; }
.fr-source { display: flex; align-items: center; gap: 10px; margin: 14px 0 0; padding: 8px 10px; background: rgba(243,235,217,.08); border: 1px solid rgba(212,168,75,.45); border-radius: 6px; }
.fr-source img { width: 60px; height: 40px; object-fit: cover; border: 1px solid var(--srk-gold); flex: none; }
.fr-source span { display: grid; font-size: 12px; line-height: 1.3; opacity: .9; }
.fr-source b { font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--srk-gold); }

/* Sèrka Store : badge « Produit du Francistan » (une seule image, en CSS) */
.fr-badge { position: absolute; top: 10px; right: 10px; width: 44px; height: 44px; border-radius: 50%; background: var(--srk-cream) url("../media/francistan/blason.png") center / 78% no-repeat; border: 2px solid var(--srk-gold); box-shadow: 0 2px 6px rgba(0,0,0,.3); font-style: normal; }

/* ============================================================
   SRK TV — chaîne dynamique (rédaction, météo, grille, shopping, annonces, emplois)
   ============================================================ */
.tv-ticker em.flash { font-style: normal; background: #f2222f; color: #fff; padding: 2px 6px; border-radius: 3px; margin-right: 4px; }
.tv-ticker i { color: #ff8a00; font-style: normal; margin: 0 10px; }
/* À la une */
.tv-une-grid { display: grid; grid-template-columns: 1.4fr 1fr; grid-auto-rows: minmax(0, auto); gap: 18px; }
.tv-news { position: relative; display: grid; border-radius: 14px; overflow: hidden; background: rgba(255,255,255,.04); box-shadow: inset 0 0 0 1px rgba(255,255,255,.08); }
.tv-news.big { grid-row: span 2; }
.tv-news-img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; display: block; border-bottom: 3px solid #ff8a00; }
.tv-news.big .tv-news-img { aspect-ratio: 16 / 8; }
.tv-news-body { padding: 16px 18px 18px; display: grid; gap: 8px; align-content: start; }
.tv-news-body small { font: 700 11px/1 var(--f-lcd); letter-spacing: .2em; text-transform: uppercase; color: #ff8a00; }
.tv-news-body h3 { margin: 0; font: 800 clamp(20px, 2.2vw, 28px)/1.1 var(--f-display); text-transform: uppercase; color: #fff; }
.tv-news.big .tv-news-body h3 { font-size: clamp(26px, 3vw, 40px); }
.tv-news-body p { margin: 0; color: #d9d9e0; font-size: 15px; line-height: 1.5; }
.tv-news-corps { color: var(--gris); font-size: 14px; line-height: 1.6; }
.tv-sign { display: flex; align-items: center; gap: 8px; margin: 4px 0 0 !important; font-size: 13px !important; color: var(--gris) !important; }
.tv-sign img { width: 28px; height: 28px; border-radius: 50%; object-fit: cover; border: 2px solid #ff8a00; }
/* Météo */
.tv-special { margin: 0 0 14px; padding: 10px 14px; background: #f2222f; color: #fff; font: 700 14px/1.4 var(--f-lcd); letter-spacing: .06em; border-radius: 8px; animation: tv-blink 2s steps(2) infinite; }
.tv-meteo-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 12px; }
.tv-ville { display: grid; gap: 6px; justify-items: center; text-align: center; padding: 16px 12px 14px; border-radius: 14px; background: linear-gradient(180deg, #2a1050, #16102a); box-shadow: inset 0 0 0 1px rgba(255,255,255,.08); }
.tv-ville strong { font: 800 18px/1 var(--f-display); text-transform: uppercase; color: #fff; }
.tv-ville .tv-ico { font-size: 44px; line-height: 1; filter: drop-shadow(0 6px 10px rgba(0,0,0,.5)); }
.tv-ville b { font: 700 34px/1 var(--f-lcd); color: #ff8a00; }
.tv-ville p { margin: 0; color: var(--gris); font-size: 12px; line-height: 1.4; min-height: 50px; }
.tv-ville small { font: 700 10px/1 var(--f-lcd); letter-spacing: .2em; text-transform: uppercase; color: #c9a0ff; margin-top: 4px; }
.tv-lapins { font-style: normal; font-size: 14px; letter-spacing: 1px; }
.tv-lapins span { color: #4a4a55; letter-spacing: 6px; }
/* Grille */
.tv-prog-banner { display: block; width: 100%; max-height: 220px; object-fit: cover; border-radius: 14px; margin-top: 14px; border-bottom: 3px solid #ff8a00; }
.tv-qui { display: block; margin-top: 2px; font-size: 12px; color: #c9a0ff; }
/* Rédaction */
.tv-redac-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 14px; }
.tv-pres { display: grid; justify-items: center; text-align: center; gap: 4px; padding: 16px 12px; border-radius: 14px; background: rgba(255,255,255,.04); box-shadow: inset 0 0 0 1px rgba(255,255,255,.08); }
.tv-pres img { width: 110px; height: 110px; border-radius: 50%; object-fit: cover; border: 3px solid #ff8a00; margin-bottom: 6px; box-shadow: 0 10px 24px rgba(0,0,0,.5); }
.tv-pres strong { font: 800 18px/1.05 var(--f-display); text-transform: uppercase; color: #fff; }
.tv-pres small { color: var(--gris); font-size: 12px; line-height: 1.35; }
.tv-pres q { margin-top: 6px; color: #ffb45a; font-style: italic; font-size: 13px; line-height: 1.35; quotes: "« " " »"; }
/* Shopping */
.tv-shop-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.tv-shop-item { position: relative; display: grid; grid-template-columns: 120px 1fr; gap: 14px; align-items: center; padding: 12px; border-radius: 14px; text-decoration: none; color: #fff; background: linear-gradient(135deg, #5a1a8c, #c4321f 70%, #ff8a00); box-shadow: 0 14px 30px rgba(0,0,0,.4); transition: transform .15s; }
.tv-shop-item:hover { transform: translateY(-3px); }
.tv-shop-item img { width: 120px; height: 120px; object-fit: cover; border-radius: 10px; border: 3px solid #fff; }
.tv-shop-item div { display: grid; gap: 2px; }
.tv-shop-item strong { font: 800 18px/1.05 var(--f-display); text-transform: uppercase; }
.tv-shop-item b { font: 700 30px/1 var(--f-lcd); color: #ffe27a; }
.tv-shop-item small { font-size: 12px; opacity: .85; }
.tv-shop-item em { margin-top: 6px; font: 700 11px/1 var(--f-lcd); letter-spacing: .1em; text-transform: uppercase; font-style: normal; color: #fff; background: rgba(0,0,0,.35); padding: 6px 8px; border-radius: 4px; justify-self: start; animation: tv-blink 1.6s steps(2) infinite; }
.tv-shop-badge { position: absolute; top: -8px; right: 12px; background: #ffe27a; color: #3a1070; font: 700 11px/1 var(--f-lcd); letter-spacing: .15em; padding: 5px 8px; border-radius: 4px; transform: rotate(3deg); }
/* Annonces */
.tv-ann-list { display: grid; gap: 8px; }
.tv-ann-item { border-radius: 10px; background: rgba(255,255,255,.04); box-shadow: inset 0 0 0 1px rgba(255,255,255,.08); border-left: 4px solid #4a1a8c; }
.tv-ann-item summary { display: grid; gap: 2px; padding: 12px 16px; cursor: pointer; list-style: none; }
.tv-ann-item summary::-webkit-details-marker { display: none; }
.tv-ann-item summary small { font: 700 11px/1 var(--f-lcd); letter-spacing: .2em; text-transform: uppercase; color: #c9a0ff; }
.tv-ann-item summary strong { font: 800 20px/1.1 var(--f-display); text-transform: uppercase; color: #fff; }
.tv-ann-item summary span { color: var(--gris); font-size: 14px; }
.tv-ann-corps { padding: 0 16px 12px; color: #d9d9e0; font-size: 14px; line-height: 1.6; font-family: "Special Elite", monospace; }
.tv-ann-item .tv-sign { padding: 0 16px 12px; }
/* Emplois */
.tv-jobs-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 14px; }
.tv-job { display: grid; gap: 8px; align-content: start; padding: 16px 18px; border-radius: 14px; background: rgba(255,255,255,.04); box-shadow: inset 0 0 0 1px rgba(255,255,255,.08); border-top: 3px solid #ff8a00; }
.tv-job small { font: 700 11px/1 var(--f-lcd); letter-spacing: .2em; text-transform: uppercase; color: #ff8a00; }
.tv-job h3 { margin: 0; font: 800 20px/1.1 var(--f-display); text-transform: uppercase; color: #fff; }
.tv-job p { margin: 0; color: #d9d9e0; font-size: 14px; line-height: 1.5; }
.tv-job-corps { color: var(--gris); font-size: 13px; line-height: 1.6; }
.tv-job .btn { justify-self: start; margin-top: 4px; }
@media (max-width: 900px) {
  .tv-une-grid { grid-template-columns: 1fr; } .tv-news.big { grid-row: auto; }
  .tv-meteo-grid { grid-template-columns: repeat(2, 1fr); }
  .tv-shop-grid { grid-template-columns: 1fr; }
}
/* BO · SRK TV */
.tv-form .chk { display: inline-flex; align-items: center; gap: 6px; font-size: 14px; color: var(--gris); white-space: nowrap; }
.tv-form input[type="datetime-local"], .tv-form input[type="time"] { color-scheme: dark; }
.tv-imgfield { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin: 6px 0; }
.tv-imgfield img { width: 96px; height: 54px; object-fit: cover; border-radius: 4px; }
.tv-imgfield small { flex-basis: 100%; }
.tv-thumb { width: 64px; height: 36px; object-fit: cover; border-radius: 3px; vertical-align: middle; margin-right: 8px; }
.tv-thumb.round { width: 36px; border-radius: 50%; }
.tv-tbl tr.is-off td { opacity: .5; }
.tv-tbl input[type="checkbox"] { width: 18px; height: 18px; accent-color: var(--jaune); }

/* ---- Serkadex : collection, crédits, classeur, booster v2 ---- */
.sk-panel { margin: 18px 0 14px; padding: 16px 18px; border-radius: 14px; background: rgba(0,0,0,.45); box-shadow: inset 0 0 0 1px rgba(255,255,255,.1); backdrop-filter: blur(4px); max-width: 760px; }
.sk-panel .sk-actions { margin: 12px 0 0; align-items: center; }
.sk-progress { position: relative; height: 26px; border-radius: 999px; background: rgba(255,255,255,.08); overflow: hidden; box-shadow: inset 0 0 0 1px rgba(255,255,255,.12); }
.sk-progress i { position: absolute; inset: 0 auto 0 0; background: linear-gradient(90deg, #ff8a1f, #f2c230 60%, #fff3b0); box-shadow: 0 0 18px rgba(242,194,48,.7); transition: width .8s cubic-bezier(.2,.7,.2,1); }
.sk-progress span { position: relative; display: block; text-align: center; font: 700 12px/26px var(--f-lcd); letter-spacing: .12em; text-transform: uppercase; color: #fff; text-shadow: 0 1px 2px rgba(0,0,0,.8); }
.sk-open-btn small { font: 700 11px/1 var(--f-lcd); letter-spacing: .1em; opacity: .85; margin-left: 4px; }
.sk-credits { display: inline-flex; gap: 6px; align-items: center; }
.sk-credit { width: 16px; height: 22px; border-radius: 3px; background: rgba(255,255,255,.1); box-shadow: inset 0 0 0 1px rgba(255,255,255,.2); transform: skewX(-8deg); }
.sk-credit.on { background: linear-gradient(180deg, #ffe27a, #f2a81f); box-shadow: 0 0 10px rgba(242,194,48,.8); }
.sk-credit.on:only-child { width: auto; padding: 0 8px; font: 900 16px/22px var(--f-display); color: #111; }
.sk-board { position: relative; background: #0b0a14 url("../media/serkadex/hero.jpg") center / cover fixed no-repeat; }
.sk-board::before { content: ""; position: absolute; inset: 0; background: radial-gradient(ellipse at 50% 0%, rgba(90,40,160,.35), transparent 60%), linear-gradient(180deg, var(--asphalte) 0%, rgba(11,10,20,.9) 120px, rgba(11,10,20,.92) 100%); pointer-events: none; }
.sk-board > .section { position: relative; z-index: 1; }
.sk-board-head { display: flex; justify-content: space-between; align-items: baseline; gap: 14px; flex-wrap: wrap; margin-bottom: 14px; }
.sk-board .sk-grid { padding: 22px; border-radius: 18px; background: rgba(0,0,0,.35); box-shadow: inset 0 0 0 1px rgba(255,255,255,.07), 0 30px 60px rgba(0,0,0,.5); }
.sk-card.back { background: #0d0e16; }
.sk-card.back .sk-dos { filter: brightness(.55) saturate(.6); transition: filter .3s; }
.sk-card.back:hover .sk-dos { filter: brightness(.8) saturate(.9); }
.sk-card.back .sk-back b { color: rgba(255,255,255,.35); text-shadow: 0 0 24px rgba(255,255,255,.4); }
/* booster v2 */
.sk-booster { background: radial-gradient(ellipse at 50% 40%, rgba(60,20,110,.9), rgba(8,8,10,.97) 70%); }
.sk-booster.burst::before { content: ""; position: absolute; inset: 0; background: radial-gradient(circle at 50% 45%, rgba(255,255,255,.95), rgba(255,220,120,.6) 20%, transparent 55%); animation: sk-burst .7s ease-out forwards; pointer-events: none; }
@keyframes sk-burst { from { opacity: 1; transform: scale(.2); } to { opacity: 0; transform: scale(2.2); } }
.sk-pack-glow { position: absolute; inset: -40px; border-radius: 50%; background: radial-gradient(circle, rgba(180,90,255,.45), transparent 60%); animation: sk-glow 1.6s ease-in-out infinite; pointer-events: none; }
@keyframes sk-glow { 0%, 100% { opacity: .5; transform: scale(.9); } 50% { opacity: 1; transform: scale(1.1); } }
.sk-pack img { position: relative; }
.sk-flip.rare .sk-face-front { box-shadow: 0 18px 40px rgba(0,0,0,.6), 0 0 40px var(--t), 0 0 90px color-mix(in srgb, var(--t) 60%, transparent); }
.sk-flip.legend .sk-face-front { box-shadow: 0 18px 40px rgba(0,0,0,.6), 0 0 50px #ffd400, 0 0 120px rgba(255,80,80,.8); }
.sk-rays { position: absolute; inset: -60%; z-index: 0; opacity: 0; background: conic-gradient(from 0deg, transparent 0 20deg, rgba(255,255,255,.18) 20deg 25deg, transparent 25deg 50deg, rgba(255,255,255,.18) 50deg 55deg, transparent 55deg 80deg, rgba(255,255,255,.18) 80deg 85deg, transparent 85deg 110deg, rgba(255,255,255,.18) 110deg 115deg, transparent 115deg 140deg, rgba(255,255,255,.18) 140deg 145deg, transparent 145deg 170deg, rgba(255,255,255,.18) 170deg 175deg, transparent 175deg 200deg, rgba(255,255,255,.18) 200deg 205deg, transparent 205deg 230deg, rgba(255,255,255,.18) 230deg 235deg, transparent 235deg 260deg, rgba(255,255,255,.18) 260deg 265deg, transparent 265deg 290deg, rgba(255,255,255,.18) 290deg 295deg, transparent 295deg 320deg, rgba(255,255,255,.18) 320deg 325deg, transparent 325deg 350deg, rgba(255,255,255,.18) 350deg 355deg, transparent 355deg 360deg); pointer-events: none; }
.sk-flip.rare.flipped .sk-rays, .sk-flip.legend.flipped .sk-rays { opacity: 1; animation: sk-spin 8s linear infinite; }
@keyframes sk-spin { to { transform: rotate(360deg); } }
.sk-face-front img { position: relative; z-index: 1; }
.sk-tag { position: absolute; top: 12px; left: -34px; z-index: 3; transform: rotate(-35deg); padding: 5px 40px; font: 700 11px/1 var(--f-lcd); letter-spacing: .2em; color: #111; background: #f2c230; box-shadow: 0 4px 10px rgba(0,0,0,.5); font-style: normal; opacity: 0; transition: opacity .3s .5s; }
.sk-tag.dup { background: #8a8a95; color: #fff; }
.sk-flip.flipped .sk-tag { opacity: 1; }
.sk-face-front small { z-index: 2; }
.sk-sum { margin: 10px 0 0; font: 800 clamp(20px, 3vw, 30px)/1.1 var(--f-display); text-transform: uppercase; color: #fff; animation: sk-deal .4s both; }
.sk-sum.legend { color: #ffd400; text-shadow: 0 0 30px rgba(255,212,0,.8); }
.sk-sum-act { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; margin: 12px 0 0; }
.sk-booster.legend-flash { animation: sk-legend 1.8s ease-out; }
@keyframes sk-legend { 0%, 20%, 40% { background-color: rgba(255,230,120,.5); } 10%, 30%, 100% { background-color: transparent; } }
@media (max-width: 640px) { .sk-board .sk-grid { padding: 12px; } .sk-flip { width: 42vw; height: calc(42vw * 88 / 63); } }

/* ---- Serkadex : rareté, top 5, carte du jour, décret ---- */
.sk-rar { font: 700 11px/1 var(--f-lcd); letter-spacing: .1em; padding: 4px 9px; border-radius: 999px; text-transform: uppercase; }
.sk-rar.r-commune { background: #3a3a44; color: #ddd; }
.sk-rar.r-rare { background: #2a5ea8; color: #fff; }
.sk-rar.r-collector { background: linear-gradient(90deg, #c45cff, #3aa0ff); color: #fff; }
.sk-rank.r-collector, .sk-rank.r-ultracollector { background: linear-gradient(90deg, #c45cff, #3aa0ff); color: #fff; }
.sk-rank.r-chromatique { background: linear-gradient(90deg, #ff8ad8, #c45cff, #3aa0ff); color: #111; }
.sk-rank.r-rare { background: #2a5ea8; }
.sk-rar.r-legend { background: linear-gradient(90deg, #ffd400, #ff6b2c); color: #111; }
.sk-top5 { margin: 0 0 14px; padding: 14px 18px; border-radius: 14px; background: rgba(0,0,0,.45); box-shadow: inset 0 0 0 1px rgba(255,255,255,.1); max-width: 760px; }
.sk-top5 ol { list-style: none; margin: 8px 0 0; padding: 0; display: grid; gap: 6px; }
.sk-top5 li { position: relative; display: grid; grid-template-columns: 28px 1fr auto; gap: 10px; align-items: center; padding: 6px 10px; border-radius: 8px; background: rgba(255,255,255,.05); overflow: hidden; }
.sk-top5 li span { font-size: 16px; }
.sk-top5 li strong { font: 800 16px/1 var(--f-display); text-transform: uppercase; }
.sk-top5 li b { font: 700 12px/1 var(--f-lcd); color: var(--jaune); }
.sk-top5 li i { position: absolute; left: 0; bottom: 0; height: 3px; background: linear-gradient(90deg, #ff8a1f, #f2c230); }
.sk-day { padding-top: 10px; }
.sk-day-in { display: grid; grid-template-columns: 220px 1fr; gap: 26px; align-items: center; padding: 22px; border-radius: 18px; background: linear-gradient(135deg, rgba(90,40,160,.35), rgba(0,0,0,.4)); box-shadow: inset 0 0 0 1px rgba(255,255,255,.1); }
.sk-day-card .sk-card { width: 220px; }
.sk-day-txt .h2 { margin: 6px 0 8px; }
.sk-day-txt .sk-meta { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin: 0 0 8px; }
.sk-day-txt p { margin: 0 0 8px; }
.sk-day-flavor { color: #ffb45a; font-style: italic; }
.sk-decret { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; max-width: 820px; font-family: "Special Elite", monospace; }
.sk-decret li { padding: 10px 14px; border-left: 4px solid var(--jaune); background: rgba(255,255,255,.04); line-height: 1.5; }
.sk-decret b { color: var(--jaune); }
.st-recap li.st-ok { color: #7ee787; }
.st-tag-ok, .st-tag-ko { font: 700 10px/1 var(--f-lcd); letter-spacing: .15em; padding: 3px 6px; border-radius: 3px; font-style: normal; margin-left: 6px; }
.st-tag-ok { background: #0a7a3a; color: #fff; }
.st-tag-ko { background: #8a8a95; color: #fff; }
.st-steps .ok { color: #7ee787; font-size: 18px; }
@media (max-width: 640px) { .sk-day-in { grid-template-columns: 1fr; justify-items: center; text-align: center; } .sk-day-txt .sk-meta { justify-content: center; } }

/* ---- SRK TV lot 2 : interviews, horoscope, ABP ---- */
.tv-ticker em.abp { font-style: normal; background: #ff8a00; color: #111; padding: 2px 6px; border-radius: 3px; margin-right: 4px; font-size: 11px; }
.tv-itws-grid { display: grid; grid-template-columns: 1.5fr 1fr; gap: 18px; align-items: start; }
.tv-itw-card { padding: 20px 22px; border-radius: 14px; background: rgba(255,255,255,.04); box-shadow: inset 0 0 0 1px rgba(255,255,255,.08); border-top: 3px solid #4a1a8c; }
.tv-itw-card.big { border-top-color: #ff8a00; }
.tv-itw-card h3 { margin: 6px 0 8px; font: 800 clamp(22px, 2.4vw, 30px)/1.1 var(--f-display); text-transform: uppercase; color: #fff; }
.tv-itw-guest { margin: 0 0 10px; color: var(--gris); font-size: 14px; }
.tv-itw-guest b { color: #ffb45a; }
.tv-itw-body { font-family: "Special Elite", monospace; font-size: 14px; line-height: 1.65; color: #e6e6ee; white-space: normal; }
.tv-itw-card.small .tv-itw-body { font-size: 13px; }
.tv-horo-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 10px; }
.tv-signe { padding: 12px 14px; border-radius: 10px; background: linear-gradient(180deg, rgba(74,26,140,.35), rgba(255,255,255,.03)); box-shadow: inset 0 0 0 1px rgba(255,255,255,.08); }
.tv-signe strong { display: block; font: 800 15px/1 var(--f-display); text-transform: uppercase; letter-spacing: .06em; color: #c9a0ff; margin-bottom: 6px; }
.tv-signe p { margin: 0; font-size: 13px; line-height: 1.45; color: #d9d9e0; }
.tv-itw-fields select, .tv-itw-fields input { flex: 1 1 160px; }
@media (max-width: 900px) { .tv-itws-grid { grid-template-columns: 1fr; } }

/* ---- visionneuse : reflet holo + inclinaison sur les cartes Serkamon en grand ---- */
.lb-pic { --mx: 50%; --my: 50%; --rx: 0deg; --ry: 0deg; --t: #c9c9c9; position: relative; display: inline-block; max-width: 100%; border-radius: 12px; transform: perspective(1400px) rotateX(var(--rx)) rotateY(var(--ry)); transition: transform .12s ease-out, box-shadow .25s; }
.lb-pic img { display: block; }
.lb-pic .sk-holo { display: none; border-radius: 12px; }
.lb-pic.holo .sk-holo { display: block; }
.lb-pic.holo img { border-radius: 12px; }
.lb-pic.holo:hover { box-shadow: 0 30px 70px rgba(0,0,0,.7), 0 0 40px color-mix(in srgb, var(--t) 55%, transparent); }
.lb-pic.holo:hover .sk-holo { opacity: .9; }
@media (prefers-reduced-motion: reduce) { .lb-pic { transform: none !important; } }

/* ---- Mon espace · Serkadex : collection, doublons, guilde, échanges ---- */
.sk-me .me-title { align-items: center; }
.sk-me .sk-progress { margin: 8px 0 18px; }
.sk-progress.small { height: 8px; margin: 6px 0 0; }
.sk-progress.small i { box-shadow: none; }
.sk-me-grid { display: grid; grid-template-columns: 1.2fr 1fr; gap: 24px; align-items: start; }
.sk-minis { display: grid; grid-template-columns: repeat(auto-fill, minmax(92px, 1fr)); gap: 10px; }
.sk-mini { --t: #c9c9c9; position: relative; display: grid; gap: 4px; padding: 0; border: 0; background: none; color: var(--marquage); cursor: pointer; text-align: center; }
.sk-mini img, .sk-mini > span { display: block; width: 100%; aspect-ratio: 63 / 88; object-fit: cover; border-radius: 6px; box-shadow: 0 8px 18px rgba(0,0,0,.5), 0 0 0 1px rgba(255,255,255,.08); }
.sk-mini > span { display: grid; place-items: center; background: #1b1b24; font: 900 36px/1 var(--f-display); color: rgba(255,255,255,.3); }
.sk-mini b { position: absolute; top: 6px; right: 6px; padding: 3px 7px; border-radius: 999px; background: var(--jaune); color: #111; font: 700 11px/1 var(--f-lcd); }
.sk-mini small { font-size: 11px; line-height: 1.2; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sk-mini:hover img { transform: translateY(-3px); box-shadow: 0 14px 28px rgba(0,0,0,.6), 0 0 18px color-mix(in srgb, var(--t) 50%, transparent); }
.sk-guild { padding: 16px 18px; border-radius: 14px; background: rgba(255,255,255,.04); box-shadow: inset 0 0 0 1px rgba(255,255,255,.08); }
.sk-guild-head { display: flex; justify-content: space-between; gap: 16px; align-items: flex-start; flex-wrap: wrap; }
.sk-guild h3 { margin: 4px 0; font: 900 clamp(24px, 3vw, 34px)/1 var(--f-display); text-transform: uppercase; }
.sk-guild-devise { margin: 0; color: #ffb45a; font-style: italic; }
.sk-guild-stat { min-width: 170px; }
.sk-guild-stat b { font: 900 30px/1 var(--f-display); color: var(--jaune); }
.sk-guild-stat small { color: var(--gris); margin-left: 4px; }
.sk-guild-membres, .sk-guild-list, .sk-guild-top { list-style: none; margin: 12px 0 0; padding: 0; display: grid; gap: 6px; }
.sk-guild-membres li, .sk-guild-list li, .sk-guild-top li { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 7px 10px; border-radius: 8px; background: rgba(255,255,255,.05); }
.sk-guild-membres b, .sk-guild-top b { font: 700 12px/1 var(--f-lcd); color: var(--jaune); }
.sk-guild-list li div { display: grid; gap: 2px; min-width: 0; }
.sk-guild-list strong { font: 800 16px/1 var(--f-display); text-transform: uppercase; }
.sk-guild-list small { color: var(--gris); font-size: 12px; }
.sk-guild-top { grid-template-columns: 1fr; }
.sk-guild-top li { display: grid; grid-template-columns: 28px 1fr auto; }
.sk-guild-top strong { font: 800 15px/1 var(--f-display); text-transform: uppercase; }
.sk-guild .inline-form { margin: 12px 0 0; }
.sk-trades { margin-top: 24px; padding: 16px 18px; border-radius: 14px; background: rgba(255,255,255,.04); box-shadow: inset 0 0 0 1px rgba(255,255,255,.08); }
.sk-trades h4 { margin: 14px 0 6px; font: 800 15px/1 var(--f-display); text-transform: uppercase; letter-spacing: .04em; color: var(--gris); }
.sk-pill { margin-left: 8px; padding: 3px 8px; border-radius: 999px; background: var(--rouge); color: #fff; font: 700 11px/1 var(--f-body); }
.sk-trade-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.sk-trade-list li { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; padding: 8px 12px; border-radius: 8px; background: rgba(255,255,255,.05); font-size: 14px; }
.sk-trade-list i { font-style: normal; color: var(--jaune); }
.sk-trade-act { display: inline-flex; gap: 6px; }
.sk-trade-form { display: grid; grid-template-columns: 1fr 1fr 1fr auto; gap: 10px; align-items: end; }
.sk-trade-form label { display: grid; gap: 4px; font-size: 12px; color: var(--gris); }
.sk-trade-form select { width: 100%; }
.sk-trade-hist { margin-top: 14px; }
.sk-trade-hist summary { cursor: pointer; color: var(--gris); font-size: 13px; }
@media (max-width: 900px) { .sk-me-grid, .sk-trade-form { grid-template-columns: 1fr; } }

/* =====================================================================
   AMBASSADE DU FRANCISTAN — hero, guichets, dossier, CNI, décret, JO
   ===================================================================== */
.nav a.nav-amb { color: var(--srk-gold); }
.amb-hero { position: relative; min-height: clamp(460px, 37vw, 860px); display: flex; align-items: stretch; background: var(--srk-navy) url("../media/francistan/ambassade-entree.jpg") center 72% / cover no-repeat; color: var(--srk-cream); border-bottom: 4px solid var(--srk-gold); overflow: hidden; }
.amb-hero-video { position: absolute; inset: 0; z-index: 0; width: 100%; height: 100%; object-fit: cover; object-position: center 72%; }
@media (prefers-reduced-motion: reduce) { .amb-hero-video { display: none; } }
.amb-hero::before { content: ""; position: absolute; inset: 0; z-index: 1; background: linear-gradient(90deg, rgba(10,14,30,.55) 0, rgba(10,14,30,.25) 28%, rgba(10,14,30,0) 45%); pointer-events: none; }
.amb-hero-in { position: relative; z-index: 2; width: 100%; max-width: none; margin: 0; display: flex; align-items: flex-start; padding: 26px 40px; }
.amb-panel { width: min(470px, 100%); display: grid; gap: 12px; padding: 20px 22px 22px; background: rgba(13,20,48,.84); border: 1px solid rgba(212,168,75,.55); border-left: 5px solid var(--srk-gold); backdrop-filter: blur(4px); box-shadow: 0 12px 30px rgba(0,0,0,.4); }
.amb-panel-head { display: flex; align-items: center; gap: 14px; }
.amb-arms { width: 96px; height: auto; filter: drop-shadow(0 4px 8px rgba(0,0,0,.5)); }
.amb-hero .kicker { color: var(--srk-gold); margin: 0 0 6px; font-size: 12px; line-height: 1.3; }
.amb-hero .h-display { color: var(--srk-cream); margin: 0; font-size: clamp(36px, 3vw, 56px); line-height: .95; }
.amb-devise { margin: 0; font: italic 700 19px/1.2 Georgia, serif; color: var(--srk-gold); }
.amb-sub { margin: 0; color: rgba(243,235,217,.8); font-size: 13px; line-height: 1.4; }
.amb-counts { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.amb-count { display: flex; flex-direction: column; align-items: center; padding: 10px 8px; background: rgba(27,42,90,.75); border: 1px solid rgba(212,168,75,.5); }
.amb-count b { font: 700 34px/1 var(--f-display); color: var(--srk-gold); }
.amb-count small { font: 700 10px/1.2 var(--f-display); letter-spacing: .08em; text-transform: uppercase; text-align: center; color: rgba(243,235,217,.85); margin-top: 4px; }
.amb-cta-btn { justify-self: stretch; text-align: center; margin-top: 4px; }
.amb-hero .btn.ghost { color: var(--srk-cream); box-shadow: inset 0 0 0 2px var(--srk-gold); }
@media (max-width: 860px) { .amb-hero { min-height: 0; } .amb-panel { width: 100%; } }

.amb-block { margin-top: 44px; }
.amb-pub .amb-block:first-child { margin-top: 0; }
.amb-couloir { position: relative; margin: 0; background: #000; border-bottom: 4px solid var(--srk-gold); }
.amb-couloir img { display: block; width: 100%; height: clamp(240px, 30vw, 600px); object-fit: cover; object-position: center 42%; }
.amb-couloir figcaption { position: absolute; left: 40px; bottom: 22px; display: grid; gap: 4px; max-width: 560px; padding: 12px 16px; background: rgba(13,20,48,.84); border-left: 5px solid var(--srk-gold); backdrop-filter: blur(4px); }
.amb-couloir figcaption b { font: 700 18px/1 var(--f-display); letter-spacing: .06em; text-transform: uppercase; color: var(--srk-cream); }
.amb-couloir figcaption span { font: 700 11px/1.4 var(--f-display); letter-spacing: .08em; text-transform: uppercase; color: var(--srk-gold); }
@media (max-width: 760px) { .amb-couloir figcaption { left: 16px; right: 16px; bottom: 12px; } }
.guichets { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 14px; margin-top: 14px; }
.guichet { position: relative; padding: 18px 18px 20px; background: var(--srk-cream); color: var(--srk-ink); border: 1px solid var(--srk-gold); border-top: 6px solid var(--srk-navy); box-shadow: 0 2px 0 #fff inset; }
.guichet.soon { opacity: .72; border-top-color: var(--srk-red); }
.guichet-ic { font-size: 30px; line-height: 1; }
.guichet strong { display: block; margin: 10px 0 6px; font: 700 22px/1 var(--f-display); text-transform: uppercase; letter-spacing: .04em; color: var(--srk-navy); }
.guichet p { margin: 0; font-size: 14px; line-height: 1.45; color: #3b352a; }
.guichet .fr-badge { position: static; width: auto; height: auto; border-radius: 3px; background: var(--srk-red); color: var(--srk-cream); padding: 3px 8px; margin-top: 10px; display: inline-block; font: 700 11px/1 var(--f-display); letter-spacing: .08em; text-transform: uppercase; box-shadow: none; }
.amb-cta { display: flex; flex-wrap: wrap; align-items: center; gap: 14px; margin: 18px 0 0; }
.constit { margin: 12px 0 0; padding-left: 22px; max-width: 760px; line-height: 1.5; }
.constit li { margin: 4px 0; }
.amb-jo { list-style: none; margin: 12px 0 0; padding: 0; display: grid; gap: 8px; max-width: 860px; }
.amb-jo li { display: grid; grid-template-columns: 110px 1fr; gap: 12px; padding: 10px 14px; background: var(--srk-cream); color: var(--srk-ink); border-left: 4px solid var(--srk-red); font-size: 14px; line-height: 1.4; }
.amb-jo small { font: 700 12px/1.4 var(--f-display); letter-spacing: .06em; text-transform: uppercase; color: var(--srk-navy); }

/* dossier : volet + formulaire officiel (CERFA du Francistan) */
.amb-dossier .me-title .h2, .recepisse .me-title .h2, .amb-papiers .me-title .h2 { font-size: 34px; }
.amb-volet { border: 1px solid var(--srk-gold); background: #15161a; }
.amb-volet > summary { position: relative; list-style: none; cursor: pointer; overflow: hidden; min-height: 190px; display: flex; align-items: flex-end; }
.amb-volet > summary::-webkit-details-marker { display: none; }
.volet-bg { position: absolute; inset: 0; background: center 40% / cover no-repeat; filter: saturate(.85); }
.volet-bg::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(10,14,30,.96) 0, rgba(10,14,30,.88) 45%, rgba(10,14,30,.35) 100%); }
.volet-in { position: relative; display: grid; gap: 6px; padding: 26px 28px 22px; max-width: 640px; }
.volet-in b { font: 700 32px/1 var(--f-display); text-transform: uppercase; letter-spacing: .03em; color: var(--srk-cream); }
.volet-in small { font-size: 14px; line-height: 1.45; color: rgba(243,235,217,.82); }
.volet-open { margin-top: 6px; justify-self: start; padding: 8px 14px; background: var(--jaune); color: #111; font: 700 13px/1 var(--f-display); text-transform: uppercase; letter-spacing: .08em; border-radius: 3px; }
.amb-volet[open] .volet-open { display: none; }
.volet-badge { position: static; width: auto; height: auto; border-radius: 3px; background: var(--srk-navy); color: var(--srk-gold); padding: 5px 10px; justify-self: start; font: 700 11px/1 var(--f-display); letter-spacing: .1em; text-transform: uppercase; box-shadow: none; border: 1px solid var(--srk-gold); }
.urgent { justify-self: start; padding: 6px 12px; background: var(--srk-red); color: #fff; font: 700 13px/1 var(--f-display); letter-spacing: .1em; text-transform: uppercase; border-radius: 3px; transform: rotate(-2deg); box-shadow: 0 0 0 3px rgba(142,27,27,.35); animation: urgent-blink 1.6s ease-in-out infinite; }
@keyframes urgent-blink { 0%, 100% { box-shadow: 0 0 0 3px rgba(142,27,27,.35); } 50% { box-shadow: 0 0 0 8px rgba(142,27,27,0); } }
.cerfa { background: var(--srk-cream); color: var(--srk-ink); padding: 0 0 22px; border-top: 4px solid var(--srk-gold); font-family: var(--f-body); }
.cerfa-head { display: flex; align-items: center; gap: 18px; padding: 20px 28px 16px; border-bottom: 2px solid var(--srk-navy); }
.cerfa-head img { width: 72px; height: auto; }
.cerfa-head .kicker { color: var(--srk-navy); margin-bottom: 4px; }
.cerfa-head h2 { margin: 0; font: 700 34px/1 var(--f-display); text-transform: uppercase; letter-spacing: .03em; color: var(--srk-navy); }
.cerfa-head h2 small { display: block; margin-top: 4px; font: 700 14px/1 var(--f-display); letter-spacing: .08em; color: var(--srk-red); }
.cerfa-num { margin-left: auto; padding: 8px 12px; border: 2px solid var(--srk-red); color: var(--srk-red); font: 700 16px/1 var(--f-display); letter-spacing: .08em; transform: rotate(3deg); }
.amb-tabs { display: grid; grid-template-columns: 1fr 1fr; gap: 0; border-bottom: 1px solid #d8ccb0; }
.amb-tab { display: grid; grid-template-columns: auto 1fr; grid-template-rows: auto auto; column-gap: 12px; align-items: center; text-align: left; padding: 14px 24px; background: #e6dcc4; border: 0; border-bottom: 4px solid transparent; cursor: pointer; color: #5b5240; font-family: var(--f-body); }
.amb-tab span { grid-row: 1 / 3; font-size: 26px; }
.amb-tab b { font: 700 18px/1 var(--f-display); text-transform: uppercase; letter-spacing: .05em; }
.amb-tab small { font-size: 12px; }
.amb-tab.on { background: var(--srk-cream); color: var(--srk-navy); border-bottom-color: var(--srk-red); }
.cerfa-sec { padding: 20px 28px 8px; }
.cerfa-sec + .cerfa-sec { border-top: 1px dashed #cdbf9e; }
.cerfa-sec h3 { display: flex; align-items: center; gap: 12px; margin: 0 0 14px; font: 700 20px/1 var(--f-display); text-transform: uppercase; letter-spacing: .05em; color: var(--srk-navy); }
.cerfa-sec h3 small { font: 400 12px/1.3 var(--f-body); text-transform: none; letter-spacing: 0; color: #6b5f45; }
.cerfa-n { display: inline-grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; background: var(--srk-navy); color: var(--srk-gold); font: 700 17px/1 var(--f-display); }
.cerfa-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px 22px; }
.cerfa-grid > label, .photo-alt label { display: flex; flex-direction: column; gap: 5px; font: 700 11px/1.3 var(--f-display); text-transform: uppercase; letter-spacing: .08em; color: #5b5240; }
.cerfa-grid > label small, .cerfa-grid > label.wide small { font: 400 11px/1.2 var(--f-body); text-transform: none; letter-spacing: 0; color: #8a7d60; }
.cerfa-grid > label.wide, .cerfa-grid > .amb-yn { grid-column: 1 / -1; }
.cerfa input:not([type="radio"]):not([type="checkbox"]):not([type="file"]), .cerfa select { height: 42px; padding: 0 12px; border-radius: 3px; border: 1px solid #b9ac8c; border-bottom-width: 2px; background: #fffdf7; color: var(--srk-ink); font: 400 16px/1 var(--f-body); text-transform: none; letter-spacing: 0; }
.cerfa input:focus, .cerfa select:focus { outline: 2px solid var(--srk-navy); outline-offset: 1px; }
.cerfa .amb-nom { display: flex; gap: 8px; }
.cerfa .amb-nom input { flex: 1; }
.cerfa .btn.ghost { color: var(--srk-navy); box-shadow: inset 0 0 0 2px var(--srk-navy); }
.cerfa .amb-yn { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 14px; background: #ece3cc; border-radius: 3px; font: 700 13px/1 var(--f-display); text-transform: uppercase; letter-spacing: .06em; color: var(--srk-navy); }
.cerfa .amb-yn > span:last-child { display: flex; gap: 14px; }
.cerfa .amb-yn label { display: inline-flex; align-items: center; gap: 6px; font: 400 15px/1 var(--f-body); text-transform: none; letter-spacing: 0; color: var(--srk-ink); }
.photo-zone { display: grid; grid-template-columns: minmax(280px, 1.2fr) 1fr; gap: 22px; align-items: start; }
.photo-drop { display: grid; grid-template-columns: 110px 1fr; gap: 16px; align-items: center; padding: 14px; border: 2px dashed #b9ac8c; border-radius: 4px; background: #fffdf7; cursor: pointer; }
.photo-drop:hover, .photo-drop.has { border-color: var(--srk-navy); border-style: solid; }
.photo-drop input { position: absolute; width: 1px; height: 1px; opacity: 0; }
.photo-frame { display: block; width: 110px; aspect-ratio: 5 / 7; background: #cfc6b0; border: 2px solid var(--srk-navy); overflow: hidden; }
.photo-frame img { width: 100%; height: 100%; object-fit: cover; display: block; }
.photo-txt b { display: block; font: 700 17px/1.1 var(--f-display); text-transform: uppercase; letter-spacing: .04em; color: var(--srk-navy); }
.photo-txt small { display: block; margin-top: 6px; font-size: 12px; line-height: 1.4; color: #6b5f45; }
.photo-alt { display: grid; gap: 8px; }
.photo-alt .muted { color: #6b5f45 !important; margin: 0; }
.cerfa .quiz { border: 0; background: transparent; padding: 0; }
.quiz-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.cerfa .quiz-q { margin: 0; padding: 12px 14px; background: #fffdf7; border: 1px solid #d8ccb0; border-left: 4px solid var(--srk-navy); border-radius: 3px; }
.cerfa .quiz-q legend { display: flex; align-items: center; gap: 8px; float: left; width: 100%; margin: 0 0 8px; font: 700 14px/1.3 var(--f-body); color: var(--srk-ink); }
.cerfa .quiz-q legend span { flex: 0 0 22px; height: 22px; display: inline-grid; place-items: center; border-radius: 50%; background: var(--srk-red); color: #fff; font: 700 12px/1 var(--f-display); }
.cerfa .quiz-q label { display: flex; align-items: center; gap: 8px; margin: 0; padding: 4px 6px; border-radius: 3px; font-size: 14px; cursor: pointer; }
.cerfa .quiz-q label:hover { background: #ece3cc; }
.quiz-foot { display: flex; flex-wrap: wrap; align-items: center; gap: 14px; margin: 14px 0 0; }
.quiz-foot .muted { color: #6b5f45 !important; }
.cerfa .quiz.accel { padding: 14px; background: #ece3cc; border-radius: 3px; }
.cerfa-serment { display: flex; gap: 12px; align-items: flex-start; padding: 16px 18px; background: #fffdf7; border: 1px solid var(--srk-gold); border-left: 6px solid var(--srk-red); font: 400 15px/1.5 Georgia, serif; color: var(--srk-ink); cursor: pointer; }
.cerfa-serment input { margin-top: 4px; width: 18px; height: 18px; }
.cerfa-foot { display: flex; flex-wrap: wrap; align-items: center; gap: 14px; padding: 18px 28px 0; border-top: 2px solid var(--srk-navy); margin-top: 16px; }
.cerfa-foot .muted { color: #6b5f45 !important; }
@media (max-width: 760px) { .cerfa-grid, .photo-zone, .quiz-grid, .amb-tabs { grid-template-columns: 1fr; } .cerfa-head { flex-wrap: wrap; } .cerfa-num { margin-left: 0; } }

/* récépissé */
.amb-steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; list-style: none; margin: 0 0 18px; padding: 0; max-width: 860px; }
.amb-steps li { display: flex; align-items: center; gap: 10px; padding: 10px 12px; background: rgba(255,255,255,.04); border: 1px solid var(--bitume-2); border-radius: 4px; opacity: .55; }
.amb-steps li b { flex: 0 0 30px; height: 30px; display: inline-grid; place-items: center; border-radius: 50%; background: var(--bitume-2); font: 700 15px/1 var(--f-display); }
.amb-steps li span { display: flex; flex-direction: column; font: 700 13px/1.2 var(--f-display); text-transform: uppercase; letter-spacing: .05em; }
.amb-steps li small { font: 400 11px/1.3 var(--f-body); text-transform: none; letter-spacing: 0; color: var(--gris); }
.amb-steps li.done { opacity: 1; } .amb-steps li.done b { background: #2ec27e; color: #111; }
.amb-steps li.cur { opacity: 1; border-color: var(--jaune); } .amb-steps li.cur b { background: var(--jaune); color: #111; }
.recepisse-act { margin: 12px 0 0; }
.recepisse-doc { display: grid; grid-template-columns: 120px 1fr; gap: 20px; max-width: 860px; padding: 22px 26px; background: var(--srk-cream); color: var(--srk-ink); border: 1px solid var(--srk-gold); box-shadow: 4px 4px 0 var(--srk-navy); font-family: Georgia, serif; line-height: 1.5; }
.recepisse-doc .kicker { color: var(--srk-navy); }
.recepisse-photo { width: 120px; aspect-ratio: 5 / 7; object-fit: cover; border: 2px solid var(--srk-navy); background: #cfc6b0; }
@media (max-width: 760px) { .amb-steps { grid-template-columns: 1fr 1fr; } .recepisse-doc { grid-template-columns: 1fr; } }
.recepisse-doc p { margin: 6px 0; }
.recepisse-sign { margin-top: 16px !important; font: italic 700 22px/1 Georgia, serif; color: var(--srk-red); transform: rotate(-3deg); display: inline-block; border: 3px solid var(--srk-red); padding: 6px 12px; }

/* mes papiers : la carte */
.amb-papiers { display: grid; grid-template-columns: minmax(0, 560px) minmax(260px, 1fr); gap: 22px 30px; align-items: start; }
.amb-papiers .me-title { grid-column: 1 / -1; }
.amb-papiers .fr-badge, .recepisse .me-title .fr-badge { position: static; width: auto; height: auto; border-radius: 3px; background: var(--srk-navy); color: var(--srk-cream); padding: 6px 10px; font: 700 12px/1 var(--f-display); letter-spacing: .08em; text-transform: uppercase; box-shadow: none; }
.amb-papiers-side .inline-form { flex-direction: column; align-items: stretch; gap: 10px; }
.amb-papiers-side .inline-form label { display: flex; flex-direction: column; gap: 6px; font: 700 12px/1 var(--f-display); text-transform: uppercase; letter-spacing: .06em; color: var(--gris); }
.amb-papiers-side .inline-form input, .amb-papiers-side .inline-form select { flex: 0 0 auto; width: 100%; box-sizing: border-box; height: 40px; padding: 0 10px; border-radius: 4px; border: 1px solid var(--bitume-2); background: var(--bitume); color: var(--marquage); font: 400 15px/1 var(--f-body); text-transform: none; letter-spacing: 0; }
.amb-papiers-side .btn { align-self: flex-start; margin-top: 4px; }
.photo-mini { position: relative; }
.photo-mini input { position: absolute; width: 1px; height: 1px; opacity: 0; }
.photo-mini .btn { display: inline-block; cursor: pointer; }
@media (max-width: 900px) { .amb-papiers { grid-template-columns: 1fr; } }
.cni-wrap { max-width: 600px; }
.cni { position: relative; aspect-ratio: 1.585; width: 100%; perspective: 1400px; }
.cni-face { position: absolute; inset: 0; overflow: hidden; border-radius: 4.5% / 7%; color: var(--srk-cream); background: var(--srk-navy) center / 100% 100% no-repeat;
  box-shadow: 0 14px 30px rgba(0,0,0,.5); backface-visibility: hidden; transition: transform .6s; transform-style: preserve-3d; text-shadow: 0 1px 4px rgba(0,0,0,.6); container-type: inline-size; }
.cni-face.recto { background-image: url("../media/francistan/cni-recto.jpg"); }
.cni-face.verso { background-image: url("../media/francistan/cni-verso.jpg"); transform: rotateY(180deg); }
.cni.show-verso .cni-face.recto { transform: rotateY(-180deg); }
.cni.show-verso .cni-face.verso { transform: rotateY(0); }
.cni-face > * { position: absolute; }
.cni-title { left: 29.5%; top: 5%; right: 8%; }
.cni-title b { display: block; white-space: nowrap; font: 700 4.6cqw/1 "Bebas Neue", Impact, "Arial Narrow", var(--f-display); letter-spacing: .05em; }
.cni-title small { display: block; margin-top: .5cqw; white-space: nowrap; font: 700 2.6cqw/1.1 "Bebas Neue", Impact, "Arial Narrow", var(--f-display); letter-spacing: .1em; color: var(--srk-gold); }
.cni-photo { left: 3.9%; top: 33%; width: 23%; height: 47.5%; overflow: hidden; }
.cni-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.cni-face.recto .cni-fields { left: 30%; top: 30%; right: 8%; display: flex; flex-direction: column; gap: 1.2cqw; }
.cni-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 1.5cqw; }
.cni-2.sig { grid-template-columns: 1fr 2.4fr; }
.cni-row { min-width: 0; }
.cni-row small { display: block; font: 600 1.7cqw/1 var(--f-body); letter-spacing: .08em; text-transform: uppercase; color: var(--srk-gold); }
.cni-row b { display: block; font: 700 2.8cqw/1.15 "Bebas Neue", Impact, "Arial Narrow", var(--f-display); letter-spacing: .04em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cni-num { left: 3.9%; bottom: 5%; font: 700 4cqw/1 "Bebas Neue", var(--f-display); letter-spacing: .1em; }
.cni-stamp { left: 54%; bottom: 7%; transform: translateX(-50%) rotate(-9deg); font: 700 4.4cqw/1 "Bebas Neue", var(--f-display); letter-spacing: .12em; border: .45cqw solid var(--srk-cream); padding: .6cqw 1.6cqw; opacity: .9; }
.cni-sign { right: 9%; bottom: 5%; font: italic 700 6.2cqw/1 Georgia, serif; }
.cni.honneur .cni-title small, .cni.honneur .cni-row small { color: #f6dc8a; }
.cni-face.verso .cni-fields { left: 4.5%; top: 8%; right: 5%; display: flex; flex-direction: column; gap: 1.4cqw; }
.cni-mrz { left: 4.2%; right: 15%; top: 76%; font: 700 2.95cqw/1.5 "Courier New", monospace; letter-spacing: .08em; color: #111; text-shadow: none; }
.cni-mrz span { display: block; white-space: nowrap; overflow: hidden; }
.cni-seal { right: 2.5%; bottom: 9%; width: 11%; text-align: center; transform: rotate(-14deg); font: 700 2.4cqw/1 "Bebas Neue", var(--f-display); letter-spacing: .08em; color: var(--srk-red); border: .3cqw solid var(--srk-red); padding: .6cqw .3cqw; text-shadow: none; opacity: .85; }
.cni-act { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }

/* décret (modal) */
.decret { text-align: center; padding: 10px 6px; color: var(--srk-ink); background: var(--srk-cream); border: 1px solid var(--srk-gold); box-shadow: 6px 6px 0 var(--srk-navy); font-family: Georgia, serif; line-height: 1.5; }
.decret img { width: 80px; height: auto; }
.decret .kicker { color: var(--srk-navy); margin-top: 6px; }
.decret h2 { font: 700 30px/1 "Bebas Neue", var(--f-display); letter-spacing: .06em; color: var(--srk-red); margin: 6px 0 12px; }
.decret-txt { font-weight: 700; }
.decret-foot { margin-top: 14px; }
.decret-foot span { display: inline-block; margin-top: 4px; }
.decret-bisou { font: italic 700 26px/1 Georgia, serif; }
.modal-card .decret .muted { color: #6b5f45; }

/* BO : dossiers Ambassade */
.etat-cards { grid-template-columns: repeat(auto-fill, minmax(480px, 1fr)) !important; }
.etat-card { display: grid; grid-template-columns: 96px 1fr; gap: 16px; }
.etat-photo { width: 96px; aspect-ratio: 5 / 7; object-fit: cover; border: 2px solid var(--srk-gold); background: #cfc6b0; }
.etat-card .ok { color: #2ec27e; } .etat-card .ko { color: #ff8a1f; }
.etat-dec { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.etat-dec .btn.danger { color: #ff6b6b; box-shadow: inset 0 0 0 2px #ff6b6b; }
/* BO : colonne État */
.etat-pick summary { white-space: nowrap; }
.etat-edit { display: grid; gap: 8px; min-width: 240px; }
.etat-edit label { display: flex; flex-direction: column; gap: 4px; font: 700 11px/1 var(--f-display); text-transform: uppercase; letter-spacing: .06em; color: var(--gris); }
.etat-edit input, .etat-edit select { height: 34px; padding: 0 8px; border-radius: 4px; border: 1px solid var(--bitume-2); background: var(--bitume); color: var(--marquage); font: 400 14px/1 var(--f-body); text-transform: none; letter-spacing: 0; }

/* Ambassade : le mur de la salle d'attente en fond de page (visible sur les côtés), le contenu sur un panneau sombre */
body[data-skin="amb"] .backdrop { opacity: 1; background: #1a1710 url("../media/francistan/ambassade-couloir.jpg") center 30% / cover no-repeat fixed; }
body[data-skin="amb"] .backdrop::after { content: ""; position: absolute; inset: 0; background: rgba(12,12,16,.45); }
body[data-skin="amb"] #app .section { position: relative; background: rgba(28,29,33,.94); box-sizing: border-box; padding-left: 48px; padding-right: 48px; border-left: 1px solid rgba(212,168,75,.35); border-right: 1px solid rgba(212,168,75,.35); }
body[data-skin="amb"] #app .section + .section { margin-top: 0; }
body[data-skin="amb"] #app > .amb-hero, body[data-skin="amb"] #app > .fr-foot { position: relative; }
@media (max-width: 1100px) { body[data-skin="amb"] #app .section { padding-left: var(--gutter); padding-right: var(--gutter); border: 0; } }

/* =====================================================================
   CONSTITUTION — parchemin du Journal Officiel (valeurs de la maquette : Cinzel / Cormorant, #16244a / #8e1a1f / #a8842c)
   ===================================================================== */
.ct-wrap { max-width: 1080px; }
.ct-page { position: relative; box-sizing: border-box; padding: 54px clamp(28px, 8.8vw, 88px) 90px; background: #f2e8d2; box-shadow: inset 0 0 140px rgba(110,80,30,.28), 0 20px 50px rgba(0,0,0,.25); font-family: "Cormorant Garamond", Georgia, serif; color: #1b2340; overflow: hidden; }
.ct-frame { position: absolute; top: 40px; left: 36px; right: 36px; bottom: 36px; border: 2px solid #a8842c; outline: 1px solid #a8842c; outline-offset: 6px; pointer-events: none; }
.ct-flag { position: absolute; left: 0; right: 0; top: 0; height: 16px; background: linear-gradient(135deg, #16244a 0%, #16244a 49.4%, #b8902f 49.4%, #b8902f 50.6%, #9e1b22 50.6%, #9e1b22 100%); }
.ct-head { position: relative; display: flex; flex-direction: column; align-items: center; gap: 10px; text-align: center; margin: 10px 0 26px; }
.ct-kicker { margin: 0; font: 700 13px/1 "Cinzel", serif; letter-spacing: .32em; color: #8e1a1f; text-transform: uppercase; }
.ct-arms { width: 176px; height: auto; display: block; }
.ct-h1 { margin: 0; font: 900 clamp(38px, 6.4vw, 64px)/1 "Cinzel", serif; letter-spacing: .12em; color: #16244a; text-transform: uppercase; }
.ct-sub { margin: 0; font: 500 clamp(14px, 2vw, 20px)/1.2 "Cinzel", serif; letter-spacing: .18em; color: #16244a; text-transform: uppercase; }
.ct-procl { margin: 4px 0 0; font-size: 18px; font-style: italic; }
.ct-devise { margin: 0; font-size: 21px; font-style: italic; font-weight: 600; color: #8e1a1f; }
.ct-titre { position: relative; display: flex; flex-direction: column; gap: 9px; margin-top: 22px; }
.ct-h2 { display: flex; align-items: center; gap: 16px; width: 100%; margin: 4px 0 6px; font: 700 15px/1.3 "Cinzel", serif; letter-spacing: .22em; color: #16244a; text-transform: uppercase; text-align: center; }
.ct-h2 > span:nth-child(2) { flex: 0 1 auto; }
.ct-rule { flex-grow: 1; height: 1px; background: #a8842c; }
.ct-pre { margin: 0; font-size: 18px; line-height: 1.5; font-style: italic; text-align: justify; }
.ct-art { margin: 0; }
.ct-art-n { display: block; font: 700 13px/1 "Cinzel", serif; letter-spacing: .08em; color: #8e1a1f; text-transform: uppercase; margin-bottom: 4px; }
.ct-art p { margin: 0; font-size: 17px; line-height: 1.5; text-align: justify; }
.ct-suite { margin: 30px 0 0; font-size: 15px; font-style: italic; text-align: center; color: #5c1013; }
.ct-foot { position: absolute; left: 0; right: 0; bottom: 58px; display: flex; justify-content: center; font: 400 13px/1 "Cinzel", serif; letter-spacing: .3em; color: #8e1a1f; text-transform: uppercase; }
body[data-skin="pedia"] .ct-wrap .btn { color: #1f1b16; }
@media (max-width: 640px) { .ct-frame { top: 24px; left: 14px; right: 14px; bottom: 14px; outline-offset: 3px; } .ct-page { padding-bottom: 70px; } .ct-foot { bottom: 34px; letter-spacing: .18em; } .ct-h2 { letter-spacing: .12em; font-size: 13px; } }
.fr-foot-legal a { color: var(--srk-gold); text-decoration: none; }
.fr-foot-legal a:hover { text-decoration: underline; }
.amb-panel .amb-cta-btn + .amb-cta-btn { margin-top: -4px; }
/* Constitution : signatures et tampons */
.ct-fait { margin: 34px 0 10px; text-align: center; font-size: 18px; font-style: italic; }
.ct-sign { position: relative; display: grid; grid-template-columns: 1fr auto 1fr; align-items: start; gap: 24px; margin: 0 0 30px; }
.ct-sign-arms { width: 96px; height: auto; margin-top: 18px; }
.ct-signer { position: relative; display: flex; flex-direction: column; align-items: center; gap: 2px; text-align: center; padding-top: 6px; }
.ct-signer small { font: 700 12px/1.3 "Cinzel", serif; letter-spacing: .22em; color: #16244a; text-transform: uppercase; }
.ct-script { font: 400 clamp(40px, 5vw, 58px)/1.1 "Pinyon Script", "Brush Script MT", cursive; color: #16244a; }
.ct-signer em { font-size: 16px; font-style: italic; color: #1b2340; }
.ct-stamp { position: absolute; padding: 6px 14px; border: 3px solid #b2302a; color: #b2302a; font: 700 15px/1 "Cinzel", serif; letter-spacing: .22em; text-transform: uppercase; opacity: .78; mix-blend-mode: multiply; pointer-events: none; }
.ct-stamp-dsi { right: -6px; top: 36px; transform: rotate(-10deg); }
.ct-stamp-pres { left: -6px; top: 42px; transform: rotate(7deg); border-radius: 50%; padding: 10px 14px; font-size: 12px; letter-spacing: .14em; }
@media (max-width: 640px) { .ct-sign { grid-template-columns: 1fr; } .ct-sign-arms { margin: 0 auto; } }
.ct-photo { position: relative; margin: 8px 0 22px; padding: 10px; background: #fff; border: 1px solid #a8842c; box-shadow: 0 8px 20px rgba(60,40,10,.25); transform: rotate(-.6deg); }
.ct-photo img { display: block; width: 100%; height: auto; filter: sepia(.18) contrast(1.02); }
.ct-photo figcaption { margin: 10px 4px 2px; font-size: 15px; font-style: italic; text-align: center; color: #5c1013; }

/* =====================================================================
   ACCUEIL — dépêches ABP, intro, mot du Président, territoire
   ===================================================================== */
.hub-abp { display: flex; align-items: center; gap: 16px; min-height: 58px; padding: 8px var(--gutter); background: linear-gradient(90deg, #0d1430, var(--srk-navy) 40%, #23367a); color: var(--srk-cream); border-bottom: 3px solid var(--srk-gold); font: 600 clamp(15px, 1.3vw, 19px)/1.3 var(--f-body); box-shadow: 0 6px 18px rgba(0,0,0,.35); }
.hub-live { flex: 0 0 auto; display: inline-flex; align-items: center; gap: 8px; padding: 6px 12px 6px 9px; background: var(--srk-red); color: #fff; border-radius: 999px; font: 700 13px/1 var(--f-display); letter-spacing: .14em; text-transform: uppercase; }
.hub-live i { width: 11px; height: 11px; border-radius: 50%; background: #fff; box-shadow: 0 0 0 0 rgba(255,255,255,.7); animation: live-blink 1.3s ease-in-out infinite; }
@keyframes live-blink { 0%, 100% { opacity: 1; box-shadow: 0 0 0 0 rgba(255,255,255,.7); } 50% { opacity: .35; box-shadow: 0 0 0 7px rgba(255,255,255,0); } }
.hub-abp-tag { flex: 0 0 auto; font: 700 12px/1 var(--f-display); letter-spacing: .14em; text-transform: uppercase; color: var(--srk-gold); border-right: 1px solid rgba(212,168,75,.5); padding-right: 16px; }
.hub-abp-txt { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; opacity: 0; transform: translateY(6px); }
.hub-abp-txt.in { opacity: 1; transform: none; transition: opacity .5s, transform .5s; }
.hub-abp-more { flex: 0 0 auto; color: var(--srk-gold); text-decoration: none; font: 700 12px/1 var(--f-display); letter-spacing: .1em; text-transform: uppercase; }
@media (max-width: 760px) { .hub-abp { flex-wrap: wrap; gap: 8px 12px; font-size: 14px; } .hub-abp-tag { display: none; } .hub-abp-txt { white-space: normal; flex-basis: 100%; order: 3; } }
.hub-intro { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(300px, 1fr); gap: 32px; align-items: stretch; padding-top: 44px; padding-bottom: 24px; }
.hub-intro-lead { margin: 0 0 16px; font: 500 clamp(18px, 1.6vw, 23px)/1.5 var(--f-body); max-width: 760px; }
.hub-intro-lead b { color: var(--jaune); }
.hub-intro-links { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; }
.hub-mot { display: grid; grid-template-columns: 110px 1fr; gap: 16px; align-items: center; padding: 18px 20px; background: var(--srk-cream); color: var(--srk-ink); border: 1px solid var(--srk-gold); border-left: 6px solid var(--srk-red); box-shadow: 6px 6px 0 var(--srk-navy); }
.hub-mot img { width: 110px; aspect-ratio: 4 / 5; object-fit: cover; object-position: top; border: 2px solid var(--srk-navy); }
.hub-mot .kicker { color: var(--srk-red); margin-bottom: 6px; }
.hub-mot blockquote { margin: 0 0 8px; font: italic 600 clamp(17px, 1.4vw, 21px)/1.35 Georgia, serif; }
.hub-mot-sign { margin: 0; font-size: 12px; color: #6b5f45; }
.hub-mot-sign em { font: italic 700 15px/1 Georgia, serif; color: var(--srk-ink); }
@media (max-width: 900px) { .hub-intro { grid-template-columns: 1fr; } .hub-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .hub-grid { grid-template-columns: 1fr; } .hub-mot { grid-template-columns: 1fr; } .hub-mot img { width: 90px; } }
.hub-terr-in { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(300px, 1fr); gap: 28px; align-items: start; margin-top: 18px; }
.hub-map { position: relative; display: block; border: 1px solid var(--srk-gold); background: #000; }
.hub-map img { display: block; width: 100%; height: auto; }
.hub-map span { position: absolute; left: 0; right: 0; bottom: 0; padding: 8px 12px; background: rgba(13,20,48,.85); color: var(--srk-gold); font: 700 11px/1.3 var(--f-display); letter-spacing: .08em; text-transform: uppercase; }
.hub-depts { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.hub-depts li { display: grid; grid-template-columns: 44px 1fr; gap: 10px; align-items: center; padding: 6px 10px; background: rgba(255,255,255,.04); border: 1px solid var(--bitume-2); border-radius: 4px; }
.hub-depts li.core { border-color: var(--srk-gold); background: rgba(212,168,75,.1); }
.hub-depts b { font: 700 20px/1 var(--f-display); color: var(--jaune); text-align: center; }
.hub-depts strong { display: block; font: 700 13px/1.2 var(--f-display); text-transform: uppercase; letter-spacing: .05em; }
.hub-depts small { display: block; font-size: 12px; line-height: 1.35; color: var(--gris); }
@media (max-width: 900px) { .hub-terr-in { grid-template-columns: 1fr; } }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* Accueil : les statues de Francis et de Vénèr en fond de page (visibles sur les côtés), le contenu sur un panneau sombre */
body[data-skin="hub"] .backdrop { opacity: 1; background: #07070a url("../media/hub/fond-statues.jpg") center top / cover no-repeat fixed; }
body[data-skin="hub"] .backdrop::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(7,7,10,0), rgba(7,7,10,.25) 70%, rgba(7,7,10,.55)); }
body[data-skin="hub"] #app .section { position: relative; background: rgba(24,25,30,.9); box-sizing: border-box; padding-left: 48px; padding-right: 48px; border-left: 1px solid rgba(212,168,75,.3); border-right: 1px solid rgba(212,168,75,.3); }
body[data-skin="hub"] #app .road { position: relative; }
@media (max-width: 1100px) { body[data-skin="hub"] #app .section { padding-left: var(--gutter); padding-right: var(--gutter); border: 0; } }

/* Sèrka Records : l'usine de vinyles en fond (label, univers, artistes, labels, Sèrka FM) */
body[data-page="serka"] .backdrop, body[data-page="univers"] .backdrop, body[data-page="artistes"] .backdrop, body[data-page="artiste"] .backdrop, body[data-page="labels"] .backdrop, body[data-page="radio"] .backdrop, body[data-page="playlist"] .backdrop {
  opacity: 1; background: #0b0a0c url("../media/hub/fond-serka.jpg") center top / cover no-repeat fixed; }
body[data-page="serka"] .backdrop::after, body[data-page="univers"] .backdrop::after, body[data-page="artistes"] .backdrop::after, body[data-page="artiste"] .backdrop::after, body[data-page="labels"] .backdrop::after, body[data-page="radio"] .backdrop::after, body[data-page="playlist"] .backdrop::after {
  content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(14,12,14,.2) 0%, rgba(14,12,14,.86) 20%, rgba(14,12,14,.92) 50%, rgba(14,12,14,.86) 80%, rgba(14,12,14,.2) 100%); }

/* SRK TV : le plateau du JT en fond (visible sur les côtés), le centre assombri */
body[data-skin="tv"] .backdrop { opacity: 1; background: #06060a url("../media/tv/fond-plateau.jpg") center top / cover no-repeat fixed; }
body[data-skin="tv"] .backdrop::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(6,6,10,.1) 0%, rgba(6,6,10,.8) 22%, rgba(6,6,10,.86) 50%, rgba(6,6,10,.8) 78%, rgba(6,6,10,.1) 100%); }

/* icônes du menu */
.nav a { display: inline-flex; align-items: center; gap: 7px; }
.nav-ic { width: 28px; height: 28px; object-fit: contain; filter: drop-shadow(0 1px 2px rgba(0,0,0,.6)); transition: transform .2s; }
.nav a:hover .nav-ic, .nav a[aria-current="page"] .nav-ic { transform: scale(1.18); }
@media (max-width: 1100px) { .nav-ic { width: 22px; height: 22px; } }

/* =====================================================================
   ARCADE — salle de jeux : fond néon, bornes avec l'écran du jeu incrusté
   ===================================================================== */
body[data-skin="arcade"] .backdrop { opacity: 1; background: #050406 url("../media/arcade/fond.jpg") center top / cover no-repeat fixed; }
body[data-skin="arcade"] .backdrop::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(5,4,6,.1) 0%, rgba(5,4,6,.7) 24%, rgba(5,4,6,.78) 50%, rgba(5,4,6,.7) 76%, rgba(5,4,6,.1) 100%); }
.arcade .h-display { font-size: clamp(56px, 8vw, 110px); margin: 4px 0 10px; color: #ff3cac; text-shadow: 0 0 18px rgba(255,60,172,.7), 0 0 40px rgba(0,200,255,.35); }
.ar-row { display: flex; flex-wrap: wrap; justify-content: center; align-items: flex-start; gap: 40px 14px; margin: 30px 0 24px; }
.ar-slot { display: flex; flex-direction: column; align-items: center; gap: 14px; width: 236px; text-decoration: none; color: inherit; }
.ar-slot.off { opacity: .85; }
.ar-borne { position: relative; display: block; height: 470px; width: auto; aspect-ratio: 481 / 1050; filter: drop-shadow(0 24px 30px rgba(0,0,0,.7)); transition: transform .3s; animation: hub-in .5s calc(var(--i) * 120ms) both; }
.ar-slot:hover .ar-borne { transform: translateY(-8px) scale(1.02); }
.ar-cab { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; }
.ar-marquee { position: absolute; left: 7%; right: 7%; top: 4.2%; height: 9%; display: grid; place-items: center; font: 900 clamp(16px, 5.2cqw, 28px)/1 var(--f-display); letter-spacing: .06em; text-transform: uppercase; color: #ff3cac; text-shadow: 0 0 10px rgba(255,60,172,.8); }
.ar-borne { container-type: inline-size; }
.ar-borne.b-or .ar-screen { left: 17%; top: 19.2%; width: 66.5%; height: 24.2%; }
.ar-borne.b-rouge .ar-screen { left: 18.5%; top: 22.4%; width: 63%; height: 20.3%; }
.ar-borne.b-street-lapins { aspect-ratio: 664 / 1426; }
.ar-borne.b-street-lapins .ar-screen { left: 21.1%; top: 23.9%; width: 58.3%; height: 21.5%; border-radius: 5% / 7%; }
.ar-borne.b-bonk-imprimante { aspect-ratio: 720 / 1460; }
.ar-borne.b-bonk-imprimante .ar-screen { left: 23.1%; top: 24.0%; width: 55%; height: 22.4%; border-radius: 5% / 7%; }
.ar-borne.b-pac-francis { aspect-ratio: 773 / 1462; }
.ar-borne.b-pac-francis .ar-screen { left: 22.4%; top: 22.8%; width: 56.3%; height: 26.1%; border-radius: 6% / 8%; }
.ar-borne.b-bonk-bros { aspect-ratio: 867 / 1498; }
.ar-borne.b-bonk-bros .ar-screen { left: 23.9%; top: 26.7%; width: 53.4%; height: 21.9%; border-radius: 5% / 7%; }
.ar-borne.b-bonk-pingouin { aspect-ratio: 687 / 1438; }
.ar-borne.b-bonk-pingouin .ar-screen { left: 22.3%; top: 23.6%; width: 54.7%; height: 20.9%; border-radius: 5% / 7%; }
.ar-screen { position: absolute; overflow: hidden; border-radius: 3% / 6%; background: #000; box-shadow: inset 0 0 18px rgba(0,0,0,.9), 0 0 24px rgba(0,220,255,.25); }
.ar-screen img { width: 100%; height: 100%; object-fit: cover; display: block; filter: saturate(1.1) contrast(1.05); }
.ar-scan { position: absolute; inset: 0; background: repeating-linear-gradient(0deg, rgba(0,0,0,.22) 0 1px, transparent 1px 3px); pointer-events: none; }
.ar-press { position: absolute; left: 0; right: 0; bottom: 6%; text-align: center; font: 700 clamp(9px, 2.6cqw, 13px)/1 var(--f-display); letter-spacing: .18em; text-transform: uppercase; color: #ffd400; text-shadow: 0 0 6px #000, 0 0 10px rgba(255,212,0,.8); animation: live-blink 1.1s steps(2) infinite; }
.ar-press.soon { color: #ff3cac; animation: none; }
.ar-info { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 4px; max-width: 300px; }
.ar-info strong { font: 900 24px/1 var(--f-display); text-transform: uppercase; letter-spacing: .04em; color: #fff; }
.ar-info small { font: 700 11px/1.3 var(--f-lcd); letter-spacing: .14em; text-transform: uppercase; color: #00d8ff; }
.ar-info span { font-size: 13px; line-height: 1.45; color: var(--gris); }
@media (max-width: 700px) { .ar-borne { height: 460px; } }
.nav-emo { display: inline-grid; place-items: center; font-size: 20px; line-height: 1; }
.nav a.nav-arcade span:last-child { color: #ff3cac; }

/* Serkadex : collections */
.sk-tabs.sk-sets { flex-wrap: wrap; gap: 8px; }
.sk-sets button { position: relative; display: inline-flex; align-items: center; gap: 8px; overflow: hidden; font-size: 15px; padding: 10px 16px 12px; border-color: color-mix(in srgb, var(--set, var(--bitume-2)) 60%, transparent); }
.sk-sets button b { margin-left: 2px; }
.sk-sets button.on { background: var(--set, var(--marquage)); border-color: var(--set, var(--marquage)); color: #111; }
.sk-sets button.on b { color: #111; }
.sk-sets button.done { box-shadow: 0 0 0 2px var(--set), 0 0 16px color-mix(in srgb, var(--set) 60%, transparent); }
.sk-set-ico { font-size: 17px; line-height: 1; }
.sk-set-bar { position: absolute; left: 0; bottom: 0; height: 3px; background: var(--set, var(--jaune)); }
.sk-sets button.on .sk-set-bar { background: rgba(0,0,0,.45); }
.sk-set-lead { margin: 6px 0 0; font-size: 15px; max-width: 820px; }
.sk-setnum { display: block; margin-top: 3px; font: 700 10px/1 var(--f-lcd); letter-spacing: .1em; color: var(--set, var(--gris)); text-align: center; }
.sk-card .sk-setnum { position: relative; z-index: 2; }
.sk-setline { display: block; margin: 2px 0 6px; font: 700 12px/1.3 var(--f-lcd); letter-spacing: .08em; text-transform: uppercase; color: var(--set, var(--jaune)); }
.arcade.wrap { max-width: 1400px; }

/* =====================================================================
   SERKADEX — CLASSEURS DE COLLECTION (un livre ouvert sur une table, thème par collection)
   Fond optionnel par collection : media/serkadex/table-<id>.jpg (sinon matière en CSS)
   ===================================================================== */
.sk-board-binder .section { max-width: 1500px; }
.bd-table {
  --cover: #1d3f8f; --cover2: #122a63; --page: #f6f1e4; --page2: #e9e1cc; --ink: #1d2340; --accent: var(--set); --pocket: rgba(255,255,255,.55); --ring: #c9ccd3;
  --font-h: "Bebas Neue", Impact, sans-serif;
  position: relative; padding: 26px clamp(10px, 2.4vw, 34px) 30px; border-radius: 20px;
  background: radial-gradient(ellipse at 50% 0%, rgba(255,220,170,.12), transparent 60%),
    repeating-linear-gradient(92deg, rgba(0,0,0,.18) 0 2px, transparent 2px 9px, rgba(255,255,255,.03) 9px 11px, transparent 11px 23px),
    repeating-linear-gradient(90deg, #3a2615 0 180px, #33210f 180px 360px), #2b1d12;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.06), inset 0 0 120px rgba(0,0,0,.65), 0 30px 70px rgba(0,0,0,.6);
}
/* bandeau de couverture (la tranche du classeur, posée au-dessus) */
.bd-cover-band { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin: 0 auto 18px; max-width: 1240px; padding: 12px 20px; border-radius: 12px 12px 4px 4px;
  background: linear-gradient(180deg, var(--cover), var(--cover2)); color: #fff; box-shadow: 0 10px 24px rgba(0,0,0,.5), inset 0 2px 0 rgba(255,255,255,.18); }
.bd-ico { font-size: 28px; }
.bd-title { font: 400 clamp(24px, 2.6vw, 38px)/1 var(--font-h); letter-spacing: .05em; text-transform: uppercase; }
.bd-stamp { margin-left: auto; padding: 5px 10px; border: 2px solid currentColor; border-radius: 4px; font: 700 11px/1 var(--f-display); letter-spacing: .14em; text-transform: uppercase; opacity: .85; transform: rotate(-2deg); }
.bd-count { font: 400 26px/1 var(--font-h); letter-spacing: .06em; padding: 4px 12px; border-radius: 999px; background: rgba(0,0,0,.3); }
/* le livre ouvert */
.bd-book { position: relative; display: grid; grid-template-columns: 1fr 46px 1fr; max-width: 1240px; margin: 0 auto; perspective: 1800px;
  filter: drop-shadow(0 26px 30px rgba(0,0,0,.55)); transition: opacity .18s, transform .18s; }
.bd-book.turning { opacity: .25; transform: rotateY(6deg) scale(.985); }
.bd-page { position: relative; padding: 18px 18px 14px; color: var(--ink);
  background: linear-gradient(90deg, rgba(0,0,0,.06), transparent 8%, transparent 92%, rgba(0,0,0,.08)), linear-gradient(180deg, var(--page), var(--page2)); border: 1px solid rgba(0,0,0,.25); }
.bd-book > .bd-page:first-child { border-radius: 14px 0 0 14px; box-shadow: inset -18px 0 24px -14px rgba(0,0,0,.45); }
.bd-book > .bd-page:last-child { border-radius: 0 14px 14px 0; box-shadow: inset 18px 0 24px -14px rgba(0,0,0,.45); }
.bd-page-head, .bd-page-foot { display: flex; justify-content: space-between; align-items: center; font: 400 15px/1 var(--font-h); letter-spacing: .14em; text-transform: uppercase; opacity: .75; }
.bd-page-head { margin-bottom: 12px; padding-bottom: 8px; border-bottom: 2px solid color-mix(in srgb, var(--accent) 70%, transparent); }
.bd-page-foot { margin-top: 12px; }
.bd-done { color: var(--accent); opacity: 1; letter-spacing: .1em; }
.bd-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
/* reliure : anneaux */
.bd-spine { position: relative; display: flex; flex-direction: column; justify-content: space-around; align-items: center; padding: 30px 0;
  background: linear-gradient(90deg, var(--cover2), var(--cover) 30%, var(--cover2) 50%, var(--cover) 70%, var(--cover2)); }
.bd-spine i { width: 40px; height: 22px; border-radius: 999px; border: 5px solid var(--ring); background: transparent; box-shadow: 0 3px 4px rgba(0,0,0,.5), inset 0 1px 1px rgba(255,255,255,.6); }
/* les pochettes */
.bd-pocket { position: relative; display: block; aspect-ratio: 63 / 88; border-radius: 6px; overflow: hidden; padding: 0; border: 0; cursor: default;
  background: linear-gradient(160deg, rgba(0,0,0,.06), rgba(0,0,0,.14)); box-shadow: inset 0 0 0 2px rgba(0,0,0,.18), inset 0 6px 10px rgba(0,0,0,.18); }
.bd-sheen { position: absolute; inset: 0; z-index: 3; pointer-events: none; border-radius: inherit;
  background: linear-gradient(125deg, rgba(255,255,255,.45) 0%, rgba(255,255,255,.08) 22%, transparent 40%, transparent 70%, rgba(255,255,255,.18) 100%);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.5); }
.bd-pocket::after { content: ""; position: absolute; left: 6%; right: 6%; top: 0; height: 7%; z-index: 4; border-radius: 0 0 50% 50% / 0 0 100% 100%; background: rgba(255,255,255,.35); box-shadow: 0 1px 2px rgba(0,0,0,.2); }
.bd-n { position: absolute; z-index: 5; right: 5px; bottom: 4px; font: 400 14px/1 var(--font-h); letter-spacing: .06em; font-style: normal; color: var(--ink); opacity: .55; }
.bd-ghost { position: absolute; inset: 9% 9%; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; border: 2px dashed color-mix(in srgb, var(--ink) 35%, transparent); border-radius: 6px; color: var(--ink); opacity: .45; }
.bd-ghost b { font: 400 clamp(26px, 3vw, 46px)/1 var(--font-h); }
.bd-ghost small { font: 700 10px/1.2 var(--f-display); letter-spacing: .12em; text-transform: uppercase; text-align: center; }
.bd-card { cursor: pointer; transform: perspective(700px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)); transition: transform .15s, box-shadow .2s; box-shadow: 0 2px 4px rgba(0,0,0,.35); }
.bd-card img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; border-radius: inherit; }
.bd-card:hover { z-index: 6; transform: perspective(700px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)) scale(1.06); box-shadow: 0 14px 26px rgba(0,0,0,.5), 0 0 0 2px var(--accent); }
.bd-card:hover .sk-holo { opacity: .85; }
.bd-card .bd-n { color: #fff; opacity: .9; text-shadow: 0 1px 2px #000; }
.bd-free { opacity: .5; }
.bd-blank { display: grid; place-items: center; }
.bd-blank-txt { font: 400 26px/1.1 var(--font-h); letter-spacing: .1em; text-transform: uppercase; text-align: center; opacity: .3; }
.bd-blank-txt small { font-size: 15px; }
/* navigation : onglets de pages */
.bd-nav { display: flex; align-items: center; justify-content: center; gap: 14px; flex-wrap: wrap; margin-top: 20px; }
.bd-turn, .bd-tab { font: 400 17px/1 var(--font-h); letter-spacing: .1em; text-transform: uppercase; border: 0; cursor: pointer; color: #fff; background: linear-gradient(180deg, var(--cover), var(--cover2)); padding: 10px 16px; border-radius: 8px; box-shadow: 0 4px 0 rgba(0,0,0,.4); }
.bd-turn:disabled { opacity: .35; cursor: default; }
.bd-tabs { display: flex; gap: 6px; }
.bd-tab { background: var(--page); color: var(--ink); border-radius: 8px 8px 2px 2px; padding: 9px 12px; }
.bd-tab.on { background: var(--accent); color: #111; transform: translateY(-3px); }
@media (max-width: 900px) {
  .bd-book { grid-template-columns: 1fr; }
  .bd-spine { flex-direction: row; padding: 0 30px; height: 34px; }
  .bd-book > .bd-page:first-child { border-radius: 14px 14px 0 0; }
  .bd-book > .bd-page:last-child { border-radius: 0 0 14px 14px; }
  .bd-stamp { margin-left: 0; }
}

/* ---------- 1. Génération 1 : le classeur brillant des années 2000 ---------- */
.bd-gen1 { --cover: #2353c6; --cover2: #15327d; --page: #fbf7ea; --page2: #f1e8c9; --ink: #1c2756; --ring: #e3e6ec; }
.bd-gen1 .bd-cover-band { background: radial-gradient(circle at 85% 50%, rgba(242,194,48,.55), transparent 40%), linear-gradient(180deg, #2c63e0, #15327d); border-bottom: 5px solid #f2c230; }
.bd-gen1 .bd-page { background-image: radial-gradient(circle at 1px 1px, rgba(35,83,198,.12) 1px, transparent 0), linear-gradient(180deg, var(--page), var(--page2)); background-size: 14px 14px, auto; }
.bd-gen1 .bd-page-head { border-bottom-color: #f2c230; }

/* ---------- 2. Le Personnel : le dossier suspendu, kraft et trombones ---------- */
.bd-personnel { --cover: #b68a4f; --cover2: #8a6534; --page: #efe2c4; --page2: #e3d2ab; --ink: #3a2a14; --ring: #9aa1ab; --font-h: "Courier New", monospace; }
.bd-personnel .bd-cover-band { background: repeating-linear-gradient(90deg, rgba(0,0,0,.035) 0 2px, transparent 2px 5px), linear-gradient(180deg, #c99c5d, #8a6534); color: #2b1d0b; }
.bd-personnel .bd-title { font-family: "Courier New", monospace; font-weight: 700; letter-spacing: .02em; }
.bd-personnel .bd-stamp { color: #9b1c1c; border-width: 3px; opacity: .8; transform: rotate(-4deg); }
.bd-personnel .bd-page { background-image: repeating-linear-gradient(0deg, transparent 0 27px, rgba(58,84,140,.2) 27px 28px), linear-gradient(180deg, var(--page), var(--page2)); }
.bd-personnel .bd-pocket::after { left: 38%; right: 38%; top: -3px; height: 14%; border-radius: 6px; background: linear-gradient(90deg, #aab0b8, #e9ecef, #aab0b8); box-shadow: 0 2px 2px rgba(0,0,0,.35); }

/* ---------- 3. L'Empire national : registre de cuir bordeaux, filets d'or ---------- */
.bd-national { --cover: #6d1218; --cover2: #3e070b; --page: #f4ecdb; --page2: #e6d8bb; --ink: #3b0f12; --ring: #d4a84b; --font-h: "Cinzel", Georgia, serif; }
.bd-national .bd-cover-band { background: linear-gradient(180deg, #7d1820, #3e070b); border: 2px solid #d4a84b; outline: 1px solid #d4a84b; outline-offset: -7px; color: #f3e3b6; }
.bd-national .bd-title { font-weight: 700; letter-spacing: .1em; font-size: clamp(20px, 2vw, 30px); }
.bd-national .bd-page { background-image: repeating-radial-gradient(circle at 50% 50%, rgba(110,18,24,.05) 0 2px, transparent 2px 9px), linear-gradient(180deg, var(--page), var(--page2)); }
.bd-national .bd-page-head { border-bottom: 1px solid #d4a84b; box-shadow: 0 3px 0 -1px #d4a84b; }
.bd-national .bd-pocket { box-shadow: inset 0 0 0 1px #d4a84b, inset 0 0 0 4px rgba(244,236,219,.8), inset 0 0 0 5px #d4a84b, inset 0 8px 12px rgba(0,0,0,.18); }

/* ---------- 4. Fury Road : plaque d'acier rouillé, rivets et rayures de danger ---------- */
.bd-fury { --cover: #4a3a2e; --cover2: #23180f; --page: #6b5240; --page2: #3e2c1f; --ink: #ffd9a8; --ring: #8b8f95; }
.bd-fury .bd-cover-band { background: repeating-linear-gradient(135deg, #f36f30 0 18px, #1a1a1a 18px 36px); padding: 4px; }
.bd-fury .bd-cover-band > * { background: #1a120b; color: #ffb36b; padding: 8px 12px; border-radius: 4px; }
.bd-fury .bd-cover-band .bd-stamp { border-color: #ffb36b; transform: none; }
.bd-fury .bd-page { color: var(--ink); border-color: #000;
  background: radial-gradient(circle at 14px 14px, #9a8f86 3px, #3a2d24 4px, transparent 5px), radial-gradient(circle at calc(100% - 14px) 14px, #9a8f86 3px, #3a2d24 4px, transparent 5px),
    radial-gradient(circle at 14px calc(100% - 14px), #9a8f86 3px, #3a2d24 4px, transparent 5px), radial-gradient(circle at calc(100% - 14px) calc(100% - 14px), #9a8f86 3px, #3a2d24 4px, transparent 5px),
    radial-gradient(ellipse at 30% 20%, rgba(243,111,48,.35), transparent 50%), radial-gradient(ellipse at 70% 80%, rgba(120,50,20,.6), transparent 55%),
    linear-gradient(180deg, var(--page), var(--page2)); }
.bd-fury .bd-page-head { border-bottom-color: #f36f30; }
.bd-fury .bd-spine { background: repeating-linear-gradient(180deg, #f36f30 0 16px, #1a1a1a 16px 32px); }
.bd-fury .bd-pocket { background: rgba(0,0,0,.35); box-shadow: inset 0 0 0 2px #1a120b, inset 0 0 0 4px rgba(243,111,48,.45), inset 0 8px 14px rgba(0,0,0,.6); }
.bd-fury .bd-ghost { border-color: rgba(255,179,107,.45); }
.bd-fury .bd-sheen { background: linear-gradient(125deg, rgba(255,200,150,.18), transparent 35%); box-shadow: none; }

/* ---------- 5. Sèrka Stars : écrin de velours violet, cadres d'or ---------- */
.bd-stars { --cover: #3b1361; --cover2: #1d0634; --page: #2a0c47; --page2: #14031f; --ink: #f3d98a; --ring: #d4a84b; --font-h: "Cinzel", Georgia, serif; }
.bd-stars .bd-cover-band { background: radial-gradient(circle at 20% 50%, rgba(212,168,75,.35), transparent 40%), linear-gradient(180deg, #4b1a7a, #1d0634); color: #f3d98a; border: 2px solid #d4a84b; }
.bd-stars .bd-title { font-weight: 700; letter-spacing: .1em; font-size: clamp(20px, 2vw, 30px); }
.bd-stars .bd-page { color: var(--ink); border-color: #d4a84b;
  background: radial-gradient(1px 1px at 20% 30%, #fff, transparent), radial-gradient(1px 1px at 70% 60%, #fff, transparent), radial-gradient(1.5px 1.5px at 40% 85%, #f3d98a, transparent), radial-gradient(1px 1px at 85% 15%, #fff, transparent),
    repeating-linear-gradient(45deg, rgba(255,255,255,.02) 0 2px, transparent 2px 5px), linear-gradient(180deg, var(--page), var(--page2)); }
.bd-stars .bd-page-head { border-bottom-color: #d4a84b; }
.bd-stars .bd-pocket { background: radial-gradient(ellipse at 50% 40%, rgba(196,92,255,.25), rgba(0,0,0,.4)); box-shadow: inset 0 0 0 2px #d4a84b, inset 0 0 18px rgba(212,168,75,.25); }
.bd-stars .bd-ghost { border-color: rgba(243,217,138,.5); }
.bd-stars .bd-card { box-shadow: 0 0 0 2px #d4a84b, 0 0 18px rgba(212,168,75,.45); }

/* ---------- 6. Dresseurs : tapis de jeu en feutrine, bordure bois, zones de jeu ---------- */
.bd-dresseurs { --cover: #5b3a1f; --cover2: #33200f; --page: #1f6b3f; --page2: #13492a; --ink: #e8f6ea; --ring: #c9a26b; }
.bd-dresseurs .bd-cover-band { background: repeating-linear-gradient(90deg, rgba(255,255,255,.05) 0 3px, transparent 3px 11px), linear-gradient(180deg, #7a4e28, #33200f); }
.bd-dresseurs .bd-page { color: var(--ink); border: 8px solid #5b3a1f;
  background: radial-gradient(ellipse at 50% 40%, rgba(255,255,255,.08), transparent 60%), repeating-linear-gradient(45deg, rgba(0,0,0,.05) 0 1px, transparent 1px 3px), linear-gradient(180deg, var(--page), var(--page2)); }
.bd-dresseurs .bd-page-head { border-bottom: 2px dashed rgba(232,246,234,.5); }
.bd-dresseurs .bd-pocket { background: transparent; box-shadow: inset 0 0 0 2px rgba(232,246,234,.45); }
.bd-dresseurs .bd-pocket::after { display: none; }
.bd-dresseurs .bd-sheen { display: none; }
.bd-dresseurs .bd-ghost { border-color: rgba(232,246,234,.5); color: var(--ink); }

/* ---------- l'étagère : six classeurs fermés debout ---------- */
.bd-shelf { position: relative; padding: 34px clamp(12px, 3vw, 40px) 22px; border-radius: 20px;
  background: radial-gradient(ellipse at 50% 0%, rgba(255,220,170,.14), transparent 65%), repeating-linear-gradient(92deg, rgba(0,0,0,.18) 0 2px, transparent 2px 9px, rgba(255,255,255,.03) 9px 11px, transparent 11px 23px), linear-gradient(180deg, #3a2615, #2b1d12);
  box-shadow: inset 0 0 120px rgba(0,0,0,.6), 0 30px 70px rgba(0,0,0,.6); }
.bd-shelf-row { display: flex; flex-wrap: wrap; justify-content: center; align-items: flex-end; gap: 26px 22px; }
.bd-shelf-plank { height: 22px; margin: -6px -10px 0; border-radius: 4px; background: linear-gradient(180deg, #8a5a2e, #5b3a1f 60%, #3a2412); box-shadow: 0 10px 18px rgba(0,0,0,.6); }
.bd-shelf-help { margin: 18px 0 0; text-align: center; color: #e9d9bf; font-size: 14px; }
.bd-link { background: none; border: 0; padding: 0; color: var(--jaune); text-decoration: underline; cursor: pointer; font: inherit; }
.bd-cover { --cover: #333; --cover2: #111; position: relative; display: grid; grid-template-columns: 26px 1fr; width: 200px; aspect-ratio: 3 / 4.1; padding: 0; border: 0; cursor: pointer; color: #fff; text-align: center;
  border-radius: 6px 12px 12px 6px; background: linear-gradient(180deg, var(--cover), var(--cover2)); box-shadow: 0 18px 26px rgba(0,0,0,.6), inset 0 2px 0 rgba(255,255,255,.18), inset -6px 0 10px rgba(0,0,0,.35);
  transform: translateY(0) rotate(var(--tilt, 0deg)); transition: transform .25s, box-shadow .25s; }
.bd-cover:nth-child(2n) { --tilt: -1.2deg; } .bd-cover:nth-child(3n) { --tilt: 1deg; }
.bd-cover:hover { transform: translateY(-14px) rotate(0deg); box-shadow: 0 30px 34px rgba(0,0,0,.65), 0 0 0 3px var(--set); }
.bd-cover.done { box-shadow: 0 18px 26px rgba(0,0,0,.6), 0 0 0 3px var(--set), 0 0 26px var(--set); }
.bdc-spine { display: flex; flex-direction: column; justify-content: space-around; align-items: center; border-radius: 6px 0 0 6px; background: linear-gradient(90deg, rgba(0,0,0,.45), rgba(0,0,0,.1)); }
.bdc-spine i { width: 14px; height: 9px; border-radius: 999px; border: 3px solid var(--ring, #c9ccd3); }
.bdc-face { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 14px 12px 12px; min-width: 0; }
.bdc-ico { font-size: 26px; line-height: 1; }
.bdc-title { font: 400 21px/1 var(--font-h, "Bebas Neue"), Impact, sans-serif; letter-spacing: .05em; text-transform: uppercase; min-height: 42px; display: grid; place-items: center; }
.bdc-window { position: relative; width: 62%; aspect-ratio: 63 / 88; border-radius: 5px; overflow: hidden; background: rgba(0,0,0,.35); box-shadow: inset 0 0 0 2px rgba(255,255,255,.35), 0 3px 8px rgba(0,0,0,.5); }
.bdc-window img { width: 100%; height: 100%; object-fit: cover; display: block; }
.bdc-q { position: absolute; inset: 0; display: grid; place-items: center; font: 400 44px/1 var(--font-h, "Bebas Neue"), Impact, sans-serif; opacity: .45; }
.bdc-stamp { font: 700 8.5px/1.25 var(--f-display); letter-spacing: .1em; text-transform: uppercase; opacity: .75; min-height: 22px; }
.bdc-prog { width: 100%; height: 6px; border-radius: 999px; background: rgba(0,0,0,.4); overflow: hidden; margin-top: auto; }
.bdc-prog i { display: block; height: 100%; background: var(--set); }
.bdc-count { font: 400 17px/1 var(--font-h, "Bebas Neue"), Impact, sans-serif; letter-spacing: .08em; }
/* couvertures fermées : matières par collection (les variables viennent des thèmes de classeur) */
.bd-cover.bd-gen1 { background: radial-gradient(circle at 80% 15%, rgba(242,194,48,.5), transparent 35%), linear-gradient(180deg, #2c63e0, #15327d); border-bottom: 5px solid #f2c230; }
.bd-cover.bd-personnel { background: repeating-linear-gradient(90deg, rgba(0,0,0,.035) 0 2px, transparent 2px 5px), linear-gradient(180deg, #c99c5d, #8a6534); color: #2b1d0b; }
.bd-cover.bd-personnel .bdc-stamp { color: #9b1c1c; border: 2px solid currentColor; padding: 3px; transform: rotate(-4deg); opacity: .9; }
.bd-cover.bd-national { background: linear-gradient(180deg, #7d1820, #3e070b); color: #f3e3b6; box-shadow: 0 18px 26px rgba(0,0,0,.6), inset 0 0 0 2px #d4a84b, inset 0 0 0 6px #5a0d13, inset 0 0 0 7px #d4a84b; }
.bd-cover.bd-fury { background: radial-gradient(circle at 12px 12px, #9a8f86 3px, transparent 4px), radial-gradient(circle at calc(100% - 12px) 12px, #9a8f86 3px, transparent 4px), radial-gradient(ellipse at 40% 30%, rgba(243,111,48,.45), transparent 55%), linear-gradient(180deg, #5a4334, #23180f); color: #ffb36b; }
.bd-cover.bd-fury .bdc-spine { background: repeating-linear-gradient(180deg, #f36f30 0 12px, #1a1a1a 12px 24px); }
.bd-cover.bd-stars { background: radial-gradient(1px 1px at 30% 20%, #fff, transparent), radial-gradient(1px 1px at 70% 70%, #fff, transparent), radial-gradient(circle at 50% 30%, rgba(196,92,255,.4), transparent 55%), linear-gradient(180deg, #4b1a7a, #1d0634); color: #f3d98a; box-shadow: 0 18px 26px rgba(0,0,0,.6), inset 0 0 0 2px #d4a84b; }
.bd-cover.bd-dresseurs { background: radial-gradient(ellipse at 50% 40%, rgba(255,255,255,.1), transparent 60%), linear-gradient(180deg, #1f6b3f, #13492a); box-shadow: 0 18px 26px rgba(0,0,0,.6), inset 0 0 0 6px #5b3a1f; }
/* index des classeurs au-dessus du classeur ouvert */
.bd-index { display: flex; flex-wrap: wrap; gap: 6px; justify-content: center; margin: -6px auto 16px; max-width: 1240px; }
.bd-back, .bd-idx { font: 400 15px/1 "Bebas Neue", Impact, sans-serif; letter-spacing: .08em; text-transform: uppercase; padding: 8px 12px; border: 0; border-radius: 8px 8px 2px 2px; cursor: pointer; color: #fff;
  background: linear-gradient(180deg, var(--cover), var(--cover2)); opacity: .7; }
.bd-idx.on { opacity: 1; transform: translateY(-3px); box-shadow: 0 0 0 2px var(--set); }
.bd-back { background: #1b1b1f; opacity: 1; margin-right: 8px; }
@media (max-width: 560px) { .bd-cover { width: 150px; } .bdc-title { font-size: 16px; min-height: 34px; } }

/* Serkadex : la cave du collectionneur en fond de page (étagères à gauche, bureau et lapin à droite), centre sombre */
body[data-page="serkadex"] .backdrop { opacity: 1; background: #06050a url("../media/serkadex/fond.jpg") center top / cover no-repeat fixed; }
body[data-page="serkadex"] .backdrop::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(6,5,10,.05) 0%, rgba(6,5,10,.55) 18%, rgba(6,5,10,.82) 32%, rgba(6,5,10,.82) 68%, rgba(6,5,10,.55) 82%, rgba(6,5,10,.05) 100%); }
body[data-page="serkadex"] .sk-top, body[data-page="serkadex"] .sk-board { background: transparent; }
body[data-page="serkadex"] .sk-top::after { background: linear-gradient(to top, rgba(6,5,10,.6) 0%, transparent 30%); }
body[data-page="serkadex"] .sk-board::before { background: none; }
body[data-page="serkadex"] .sk-day-in { background: linear-gradient(135deg, rgba(60,25,110,.6), rgba(6,5,10,.75)); backdrop-filter: blur(3px); }
body[data-page="serkadex"] .sk-panel, body[data-page="serkadex"] .sk-top5 { background: rgba(6,5,10,.7); backdrop-filter: blur(3px); }
body[data-page="serkadex"] .road { position: relative; }

/* =====================================================================
   SERKADEX — matières réelles des classeurs (media/serkadex/bd/*.jpg)
   ===================================================================== */
/* table et étagère */
.bd-table { background: linear-gradient(180deg, rgba(0,0,0,.25), rgba(0,0,0,.45)), url("../media/serkadex/bd/table.jpg") center / 900px repeat; }
.bd-shelf { background: radial-gradient(ellipse at 50% 10%, rgba(255,210,150,.12), transparent 60%), linear-gradient(180deg, #1a120b, #0e0905); }
.bd-shelf-plank { height: 40px; margin: -8px -14px 0; border-radius: 3px; background: url("../media/serkadex/bd/etagere.jpg") center 30% / cover; box-shadow: 0 14px 22px rgba(0,0,0,.7); }
/* couvertures fermées : l'image porte la matière, le site garde anneaux, titre, fenêtre et progression */
.bd-cover { background-size: cover !important; background-position: center !important; box-shadow: 0 18px 26px rgba(0,0,0,.65), inset -6px 0 10px rgba(0,0,0,.3); text-shadow: 0 1px 3px rgba(0,0,0,.75); }
.bd-cover:hover { box-shadow: 0 30px 34px rgba(0,0,0,.7), 0 0 0 3px var(--set); }
.bd-cover.done { box-shadow: 0 18px 26px rgba(0,0,0,.6), 0 0 0 3px var(--set), 0 0 26px var(--set); }
.bdc-spine { background: transparent; }
.bd-cover.bd-gen1 { background-image: url("../media/serkadex/bd/couv-gen1.jpg"); border-bottom: 0; }
.bd-cover.bd-personnel { background-image: url("../media/serkadex/bd/couv-personnel.jpg"); text-shadow: 0 1px 0 rgba(255,240,210,.5); }
.bd-cover.bd-personnel .bdc-spine i { display: none; }
.bd-cover.bd-national { background-image: url("../media/serkadex/bd/couv-national.jpg"); }
.bd-cover.bd-fury { background-image: url("../media/serkadex/bd/couv-fury.jpg"); color: #ffcf96; }
.bd-cover.bd-fury .bdc-spine { background: transparent; }
.bd-cover.bd-fury .bdc-face { background: linear-gradient(180deg, rgba(20,12,6,.45), rgba(20,12,6,.15) 40%, rgba(20,12,6,.45)); }
.bd-cover.bd-stars { background-image: url("../media/serkadex/bd/couv-stars.jpg"); }
.bd-cover.bd-dresseurs { background-image: url("../media/serkadex/bd/couv-dresseurs.jpg"); }
.bd-cover .bdc-face { padding: 22px 16px 18px; }
/* tranche de couverture au-dessus du classeur ouvert : même matière */
.bd-gen1 .bd-cover-band { background: url("../media/serkadex/bd/couv-gen1.jpg") center 40% / cover; border-bottom: 5px solid #f2c230; }
.bd-personnel .bd-cover-band { background: url("../media/serkadex/bd/couv-personnel.jpg") center 40% / cover; }
.bd-national .bd-cover-band { background: url("../media/serkadex/bd/couv-national.jpg") center 40% / cover; }
.bd-stars .bd-cover-band { background: url("../media/serkadex/bd/couv-stars.jpg") center 40% / cover; }
.bd-dresseurs .bd-cover-band { background: url("../media/serkadex/bd/couv-dresseurs.jpg") center 40% / cover; }
.bd-cover-band { text-shadow: 0 1px 3px rgba(0,0,0,.6); }
.bd-personnel .bd-cover-band { text-shadow: none; }
/* pages intérieures */
.bd-gen1 .bd-page { background: linear-gradient(90deg, rgba(0,0,0,.18), transparent 7%, transparent 93%, rgba(0,0,0,.22)), url("../media/serkadex/bd/page-gen1.jpg") center / cover; }
.bd-personnel .bd-page { background: linear-gradient(90deg, rgba(0,0,0,.18), transparent 7%, transparent 93%, rgba(0,0,0,.22)), url("../media/serkadex/bd/page-personnel.jpg") center top / cover; }
.bd-national .bd-page { background: linear-gradient(90deg, rgba(0,0,0,.18), transparent 7%, transparent 93%, rgba(0,0,0,.22)), url("../media/serkadex/bd/page-national.jpg") center / cover; }
.bd-fury .bd-page { background: linear-gradient(90deg, rgba(0,0,0,.18), transparent 7%, transparent 93%, rgba(0,0,0,.22)), url("../media/serkadex/bd/page-fury.jpg") center / cover; }
.bd-stars .bd-page { background: linear-gradient(90deg, rgba(0,0,0,.18), transparent 7%, transparent 93%, rgba(0,0,0,.22)), url("../media/serkadex/bd/page-stars.jpg") center / cover; }
.bd-dresseurs .bd-page { background: linear-gradient(90deg, rgba(0,0,0,.18), transparent 7%, transparent 93%, rgba(0,0,0,.22)), url("../media/serkadex/bd/page-dresseurs.jpg") center / cover; }
.bd-fury .bd-page, .bd-stars .bd-page, .bd-dresseurs .bd-page { text-shadow: 0 1px 2px rgba(0,0,0,.6); }

/* =====================================================================
   SERKADEX — collections complètes : sceau, tableau d'honneur, médailles, célébration
   ===================================================================== */
.bdc-seal { position: absolute; right: -10px; top: 38%; z-index: 3; padding: 8px 12px; border: 3px solid #f2c230; border-radius: 6px; background: rgba(120,20,20,.92);
  color: #ffe9a8; font: 400 20px/1 "Bebas Neue", Impact, sans-serif; letter-spacing: .14em; text-transform: uppercase; transform: rotate(-14deg);
  box-shadow: 0 6px 14px rgba(0,0,0,.55), inset 0 0 0 2px rgba(255,233,168,.35); text-shadow: none; pointer-events: none; }
.bd-band-seal { padding: 6px 12px; border: 2px solid #f2c230; border-radius: 4px; background: rgba(120,20,20,.9); color: #ffe9a8; font: 400 15px/1 "Bebas Neue", Impact, sans-serif; letter-spacing: .12em; text-transform: uppercase; transform: rotate(-3deg); text-shadow: none; }
.sk-honor ol li { grid-template-columns: 28px 120px 1fr auto; border-left: 3px solid var(--set); }
.sk-honor .sk-hon-ico { font-size: 17px; }
.sk-honor li span small { color: var(--gris); margin-left: 6px; font-size: 12px; }
.sk-medals { margin: 14px 0 6px; }
.sk-medal-row { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 8px; }
.sk-medal { display: flex; flex-direction: column; align-items: center; gap: 3px; width: 104px; padding: 12px 6px 9px; border-radius: 50% 50% 10px 10px / 38% 38% 10px 10px;
  background: rgba(255,255,255,.04); border: 2px dashed rgba(255,255,255,.18); opacity: .55; filter: grayscale(.9); text-align: center; }
.sk-medal b { font-size: 28px; line-height: 1; }
.sk-medal small { font: 700 11px/1.15 var(--f-display); text-transform: uppercase; letter-spacing: .05em; }
.sk-medal i { font: 400 10px/1 var(--f-lcd); font-style: normal; color: var(--gris); }
.sk-medal.on { opacity: 1; filter: none; border: 2px solid var(--set); background: radial-gradient(circle at 50% 30%, color-mix(in srgb, var(--set) 45%, transparent), rgba(0,0,0,.35)); box-shadow: 0 0 18px color-mix(in srgb, var(--set) 55%, transparent); }
.sk-medal.on i { color: #f2c230; }
/* modal de célébration */
.sk-win { position: relative; overflow: hidden; text-align: center; padding: 6px 4px 2px; }
.sk-win h2 { margin: 6px 0 4px; font: 400 clamp(38px, 6vw, 60px)/1 "Bebas Neue", Impact, sans-serif; letter-spacing: .06em; color: color-mix(in srgb, var(--set) 45%, #ffe9a8); text-shadow: 0 0 20px color-mix(in srgb, var(--set) 60%, transparent); }
.sk-win-name { font: 700 16px/1.3 var(--f-display); text-transform: uppercase; letter-spacing: .06em; }
.sk-win-sign { font: italic 700 18px/1 Georgia, serif; color: #f2c230; }
.sk-win-cover { position: relative; margin: 6px auto 12px; width: 170px; cursor: default; transform: rotate(-3deg); animation: sk-win-pop .7s cubic-bezier(.2,1.5,.4,1) both; }
.sk-win-cover:hover { transform: rotate(-3deg); }
@keyframes sk-win-pop { from { transform: scale(.3) rotate(-30deg); opacity: 0; } to { transform: scale(1) rotate(-3deg); opacity: 1; } }
.sk-win-conf { position: absolute; inset: 0; pointer-events: none; }
.sk-win-conf i { position: absolute; top: -12px; left: var(--x); width: 8px; height: 14px; background: var(--c); border-radius: 2px; animation: sk-conf 2.6s var(--d) ease-in both; }
@keyframes sk-conf { 0% { transform: translateY(0) rotate(0); opacity: 1; } 100% { transform: translateY(520px) rotate(540deg); opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .sk-win-conf { display: none; } .sk-win-cover { animation: none; } }

/* =====================================================================
   SÈRKA MUSIC GROUP — le siège : vidéo de la tour, nom incrusté, disques certifiés, organigramme.
   Fond de page : le hall des disques d'or (centre déjà noir dans l'image).
   ===================================================================== */
body[data-page="serka"] .backdrop, body[data-page="labels"] .backdrop { background: #050404 url("../media/smg/hall.jpg") center top / cover no-repeat fixed; }
body[data-page="serka"] .backdrop::after, body[data-page="labels"] .backdrop::after { background: linear-gradient(90deg, rgba(5,4,4,0) 0%, rgba(5,4,4,.55) 24%, rgba(5,4,4,.8) 50%, rgba(5,4,4,.55) 76%, rgba(5,4,4,0) 100%); }
.smg-hero { position: relative; overflow: hidden; height: min(56.25vw, calc(100vh - 150px)); min-height: 440px; width: 100%; background: #050404; display: grid; align-items: center; }
.smg-video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 0%; }
.smg-hero::after { content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: linear-gradient(90deg, rgba(5,4,4,.82) 0%, rgba(5,4,4,.5) 24%, rgba(5,4,4,0) 40%), linear-gradient(180deg, rgba(5,4,4,0) 80%, rgba(5,4,4,.75) 100%); }
.smg-hero-in { position: relative; z-index: 2; width: min(40%, 600px); box-sizing: border-box; padding: 0 0 6% clamp(20px, 4vw, 64px); }
.smg-kick { margin: 0 0 10px; font: 600 clamp(11px, 1vw, 13px)/1.5 var(--f-display); letter-spacing: .28em; text-transform: uppercase; color: #e9d29a; text-shadow: 0 2px 6px #000; }
.smg-title { margin: 0; font-family: "Cinzel", Georgia, serif; font-weight: 700; line-height: .95; text-transform: uppercase; }
.smg-title span, .smg-title b { display: block; width: max-content; background: linear-gradient(180deg, #fff3c4 0%, #f2cf6d 38%, #b8832a 62%, #f5d98a 100%); -webkit-background-clip: text; background-clip: text; color: transparent; filter: drop-shadow(0 3px 2px rgba(0,0,0,.85)) drop-shadow(0 0 22px rgba(240,190,80,.3)); }
.smg-title span { font-size: clamp(50px, 7.4vw, 124px); letter-spacing: .04em; }
.smg-title b { font-size: clamp(17px, 2.25vw, 38px); letter-spacing: .3em; margin-top: 8px; font-weight: 600; }
.smg-motto { margin: 16px 0 22px; max-width: 34ch; font: italic 500 clamp(16px, 1.45vw, 21px)/1.35 "Cormorant Garamond", Georgia, serif; color: #efe6cf; text-shadow: 0 2px 6px #000; }
.smg-cta .btn.ghost { border-color: rgba(233,210,154,.7); color: #f3e3b3; background: rgba(5,4,4,.45); }
@media (max-width: 900px) {
  .smg-hero { display: block; height: auto; min-height: 0; }
  .smg-video { position: relative; display: block; aspect-ratio: 16 / 9; height: auto; }
  .smg-hero::after { display: none; }
  .smg-hero-in { width: auto; padding: 22px var(--gutter) 30px; text-align: center; background: linear-gradient(180deg, #050404, #0b0806); }
  .smg-title span, .smg-title b { margin: 0 auto; }
  .smg-title b { letter-spacing: .2em; }
  .smg-motto { margin-left: auto; margin-right: auto; }
  .smg-cta { justify-content: center; }
}

/* les disques certifiés, façon cadres du hall */
.smg-discs { position: relative; background: linear-gradient(180deg, #0b0806, #15100a); border-top: 1px solid rgba(212,168,75,.55); border-bottom: 1px solid rgba(212,168,75,.55); padding: 26px var(--gutter); }
.smg-discs-in { max-width: 1320px; margin: 0 auto; display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 16px; }
.smg-plaque { margin: 0; display: grid; justify-items: center; text-align: center; gap: 4px; padding: 16px 10px 12px; background: #0a0807; border: 6px solid #17120c; outline: 1px solid rgba(212,168,75,.55); box-shadow: inset 0 0 0 1px rgba(255,255,255,.04), 0 10px 22px rgba(0,0,0,.5); }
.smg-disc { position: relative; width: 74px; height: 74px; border-radius: 50%; margin-bottom: 4px;
  background: conic-gradient(from 30deg, rgba(255,255,255,.35), rgba(255,255,255,0) 18%, rgba(255,255,255,.25) 50%, rgba(255,255,255,0) 68%, rgba(255,255,255,.35)),
    repeating-radial-gradient(circle, #c99a3b 0 1px, #e8c15e 1px 3px), #d9ad4c;
  box-shadow: 0 0 0 2px #6b4d17, 0 4px 14px rgba(0,0,0,.6); }
.smg-disc i { position: absolute; inset: 31%; border-radius: 50%; background: radial-gradient(circle, #0a0807 0 12%, #1b2a5a 13% 100%); box-shadow: 0 0 0 2px #e8c15e; }
.smg-plaque.rouge .smg-disc { background: conic-gradient(from 30deg, rgba(255,255,255,.3), rgba(255,255,255,0) 18%, rgba(255,255,255,.2) 50%, rgba(255,255,255,0) 68%, rgba(255,255,255,.3)), repeating-radial-gradient(circle, #6e1212 0 1px, #a3221f 1px 3px); box-shadow: 0 0 0 2px #3d0a0a, 0 4px 14px rgba(0,0,0,.6); }
.smg-plaque.rouge .smg-disc i { background: radial-gradient(circle, #0a0807 0 12%, #d4a84b 13% 100%); box-shadow: 0 0 0 2px #3d0a0a; }
.smg-plaque > b { font: 700 clamp(26px, 2.6vw, 36px)/1 "Cinzel", Georgia, serif; color: #f2cf6d; }
.smg-plaque figcaption strong { display: block; font: 700 13px/1.2 var(--f-display); text-transform: uppercase; letter-spacing: .06em; color: #efe6cf; }
.smg-plaque figcaption small { display: block; margin-top: 3px; font-size: 11px; color: #a89670; }
@media (max-width: 1000px) { .smg-discs-in { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 520px) { .smg-discs-in { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* le groupe : organigramme sous le bureau vide du PDG */
.smg-groupe-head { display: grid; grid-template-columns: 150px 1fr; gap: 28px; align-items: center; }
.smg-groupe-head img { width: 150px; height: 150px; filter: drop-shadow(0 6px 18px rgba(240,190,80,.25)); }
.smg-orga { margin-top: 30px; display: grid; justify-items: center; gap: 26px; }
.smg-pdg { position: relative; text-align: center; max-width: 520px; padding: 18px 26px; background: linear-gradient(180deg, #1a130a, #0c0907); border: 1px solid rgba(212,168,75,.7); }
.smg-pdg::after { content: ""; position: absolute; left: 50%; top: 100%; width: 1px; height: 26px; background: rgba(212,168,75,.7); }
.smg-pdg small, .smg-fil small { display: block; font: 600 11px/1.2 var(--f-display); letter-spacing: .22em; text-transform: uppercase; color: #c9a65a; }
.smg-pdg b { display: block; margin: 6px 0; font: 700 22px/1.15 "Cinzel", Georgia, serif; color: #f2cf6d; }
.smg-pdg span { font-size: 14px; color: #d8cfb8; }
.smg-fils { width: 100%; display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 12px; padding-top: 18px; border-top: 1px solid rgba(212,168,75,.45); }
.smg-fil { display: block; padding: 14px 16px; background: rgba(10,8,7,.85); border: 1px solid rgba(212,168,75,.3); color: inherit; text-decoration: none; transition: border-color .2s, transform .2s; }
a.smg-fil:hover { border-color: #f2cf6d; transform: translateY(-2px); }
.smg-fil b { display: block; margin: 5px 0 4px; font: 700 17px/1.15 var(--f-display); text-transform: uppercase; color: #efe6cf; }
.smg-fil span { font-size: 13px; line-height: 1.4; color: #a99d84; }
@media (max-width: 700px) { .smg-groupe-head { grid-template-columns: 1fr; justify-items: center; text-align: center; } .smg-groupe-head img { width: 110px; height: 110px; } }
.subnav-brand img { width: 22px; height: 22px; vertical-align: -5px; margin-right: 7px; }
@media (prefers-reduced-motion: reduce) { .smg-video { visibility: hidden; } .smg-hero { background: #050404 url("../media/smg/hero.jpg") 50% 0% / cover no-repeat; } }

/* Arcade : le flipper (plus large qu'une borne) ; l'« écran » est l'afficheur de score du fronton */
.ar-slot:has(.b-flipper-francis) { width: 300px; }
.ar-borne.b-flipper-francis { aspect-ratio: 716 / 1100; height: 460px; }
.ar-borne.b-flipper-francis .ar-screen { left: 35.9%; top: 32.1%; width: 28%; height: 3.8%; border-radius: 2px; background: #1a0602; box-shadow: inset 0 0 6px #000, 0 0 12px rgba(255,90,20,.35); }
.ar-borne.b-flipper-francis .ar-screen img, .ar-borne.b-flipper-francis .ar-scan { display: none; }
.ar-borne.b-flipper-francis .ar-press { inset: 0; bottom: auto; display: grid; place-items: center; height: 100%; font-family: var(--f-lcd); font-size: clamp(8px, 3cqw, 12px); letter-spacing: .14em; color: #ff7a1a; text-shadow: 0 0 6px rgba(255,110,20,.9); }
@media (max-width: 700px) { .ar-slot:has(.b-flipper-francis) { width: 280px; } .ar-borne.b-flipper-francis { height: 430px; } }

/* ---------- Serkadex · 7. Les Stagiaires : chemise cartonnée jaune, élastiques, pages quadrillées.
   Textures couv-stagiaires.jpg / page-stagiaires.jpg. ---------- */
.bd-stagiaires { --cover: #f2b705; --cover2: #c98d00; --page: #fbfaf4; --page2: #f1eee0; --ink: #2a2f45; --ring: #3a6ad6; --font-h: "Bebas Neue", Impact, sans-serif; }
.bd-cover.bd-stagiaires { background-image: url("../media/serkadex/bd/couv-stagiaires.jpg"); color: #1f2236; text-shadow: 0 1px 0 rgba(255,236,160,.6); }
.bd-cover.bd-stagiaires .bdc-spine i { display: none; }
.bd-stagiaires .bd-cover-band { background: url("../media/serkadex/bd/couv-stagiaires.jpg") center 55% / cover, repeating-linear-gradient(90deg, rgba(0,0,0,.03) 0 2px, transparent 2px 6px), linear-gradient(180deg, #ffc61a, #c98d00); color: #1f2236; text-shadow: none; }
.bd-stagiaires .bd-title { font-family: "Bebas Neue", Impact, sans-serif; letter-spacing: .08em; font-size: clamp(24px, 2.4vw, 36px); }
.bd-stagiaires .bd-stamp { color: #1f4fbf; border-color: #1f4fbf; transform: rotate(-3deg); }
.bd-stagiaires .bd-page { background: linear-gradient(90deg, rgba(0,0,0,.14), transparent 7%, transparent 93%, rgba(0,0,0,.18)), url("../media/serkadex/bd/page-stagiaires.jpg") center / cover, var(--page); color: var(--ink); }
.bd-stagiaires .bd-page-head { border-bottom-color: #f2b705; }
.bd-stagiaires .bd-pocket { box-shadow: inset 0 0 0 2px rgba(58,106,214,.35), inset 0 8px 12px rgba(0,0,0,.12); }
.bd-stagiaires .bd-pocket::after { left: 36%; right: 36%; top: -6px; height: 12px; border-radius: 3px 3px 0 0; background: linear-gradient(180deg, #2f62d6, #1d3f96); box-shadow: 0 2px 2px rgba(0,0,0,.3); }

/* =====================================================================
   FESTIVALS v2 — page d'accueil (2 cartes), Le SerkaStocK (4 jours, running order), Festival du film.
   Habillage pleine fenêtre : media/festivals/<id>/habillage.jpg sur les côtés, centre assombri.
   Si une image manque, il reste le fond uni : la page tient.
   ===================================================================== */
body[data-skin="fest"] .backdrop { opacity: 1; background: radial-gradient(ellipse at 50% 0%, #2a1a4a 0%, #0b0814 60%) fixed; }
body[data-fest="serkastock"] .backdrop { background: #0b0814 url("../media/festivals/serkastock/habillage.jpg") center top / cover no-repeat fixed; }
body[data-fest="film"] .backdrop { background: #070b1c url("../media/festivals/film/habillage.jpg") center top / cover no-repeat fixed; }
body[data-fest] .backdrop::after { content: ""; position: absolute; inset: 0; }
body[data-fest="serkastock"] .backdrop::after, body[data-fest="film"] .backdrop::after { background: linear-gradient(90deg, rgba(8,6,16,.05) 0%, rgba(8,6,16,.78) 21%, rgba(8,6,16,.9) 50%, rgba(8,6,16,.78) 79%, rgba(8,6,16,.05) 100%); }
body[data-skin="fest"] #app { color: #f3eee6; }
body[data-skin="fest"] .h2, body[data-skin="fest"] .lead { color: #f3eee6; }
body[data-skin="fest"] .kicker { color: #f5a623; }
body[data-skin="fest"] .back-btn { color: #f3eee6; }
.fv-back { padding-bottom: 0; }

/* ---- page Festivals : deux grandes cartes ---- */
.fv-land-title { font-family: "Shrikhand", var(--f-display); font-weight: 400; font-size: clamp(52px, 9vw, 116px); line-height: .95; text-transform: none; color: #fff; text-shadow: 0 4px 0 #ff3d7f, 0 8px 24px rgba(0,0,0,.6); }
.fv-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 26px; margin-top: 30px; }
.fv-card { position: relative; display: grid; grid-template-rows: 300px auto; overflow: hidden; border-radius: 14px; text-decoration: none; color: #fff; background: #120d1f; box-shadow: 0 20px 40px rgba(0,0,0,.55); transition: transform .25s, box-shadow .25s; }
.fv-card:hover { transform: translateY(-6px); box-shadow: 0 30px 50px rgba(0,0,0,.65), 0 0 0 3px var(--fv-acc, #f5a623); }
.fv-card.c-serkastock { --fv-acc: #ff6a3d; background: linear-gradient(180deg, #1c1033, #0f0a1d); }
.fv-card.c-film { --fv-acc: #d4a84b; background: linear-gradient(180deg, #2a0b10, #0b1230); }
.fv-card-img { background: #241a38 center / cover no-repeat; transition: transform .6s; }
.fv-card:hover .fv-card-img { transform: scale(1.05); }
.fv-card-body { display: grid; gap: 8px; padding: 22px 24px 24px; border-top: 3px solid var(--fv-acc); }
.fv-card-body strong { font: 400 clamp(28px, 3vw, 40px)/1 "Shrikhand", var(--f-display); color: var(--fv-acc); }
.fv-card.c-film .fv-card-body strong { font: 700 clamp(24px, 2.4vw, 32px)/1.1 "Cinzel", Georgia, serif; }
.fv-card-body em { font: italic 500 17px/1.4 "Cormorant Garamond", Georgia, serif; color: #efe6d6; font-size: 19px; }
.fv-card-body small { font: 700 12px/1.4 var(--f-lcd); letter-spacing: .12em; text-transform: uppercase; color: #b8aed0; }
.fv-card-body b { font: 800 14px/1 var(--f-display); text-transform: uppercase; letter-spacing: .1em; color: var(--fv-acc); }

/* ---- hero commun : vidéo (ou image), titre, infos ---- */
.fv-hero { position: relative; overflow: hidden; display: grid; align-items: end; min-height: min(72vh, 620px); background: #120d1f center / cover no-repeat; }
.fv-video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.fv-hero::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(8,6,16,0) 35%, rgba(8,6,16,.55) 70%, rgba(8,6,16,.92) 100%); pointer-events: none; }
.fv-hero-in { position: relative; z-index: 2; padding-top: 40px; padding-bottom: 34px; }
.fv-title { margin: 0; font: 400 clamp(46px, 8vw, 104px)/.95 "Shrikhand", var(--f-display); color: #fff; text-shadow: 0 4px 0 #ff3d7f, 0 10px 30px rgba(0,0,0,.7); }
.fv-sub { margin: 10px 0 0; font: italic 600 clamp(19px, 2.2vw, 28px)/1.2 "Cormorant Garamond", Georgia, serif; color: #ffd9a0; text-shadow: 0 2px 6px #000; }
.fv-infos { display: flex; flex-wrap: wrap; gap: 8px; margin: 16px 0 0; padding: 0; list-style: none; }
.fv-infos li { padding: 7px 12px; border-radius: 999px; background: rgba(8,6,16,.6); border: 1px solid rgba(255,255,255,.25); font: 700 12px/1 var(--f-lcd); letter-spacing: .12em; text-transform: uppercase; color: #fff; backdrop-filter: blur(4px); }
body[data-fest="film"] .fv-title { font: 700 clamp(34px, 5.4vw, 72px)/1.05 "Cinzel", Georgia, serif; color: #f5d98a; text-shadow: 0 3px 0 #8e1b1b, 0 10px 30px rgba(0,0,0,.75); }
body[data-fest="film"] .fv-infos li { border-color: rgba(212,168,75,.6); }
@media (prefers-reduced-motion: reduce) { .fv-video { display: none; } }

.fv-intro { max-width: 860px; }
.fv-intro p { font: 500 clamp(17px, 1.5vw, 20px)/1.6 var(--f-body); color: #ece5d8; margin: 0 0 14px; }
.fv-intro p:first-child::first-letter { float: left; font: 400 64px/.8 "Shrikhand", var(--f-display); color: #ff6a3d; margin: 6px 10px 0 0; }
body[data-fest="film"] .fv-intro p:first-child::first-letter { font: 700 64px/.8 "Cinzel", Georgia, serif; color: #d4a84b; }

/* ---- onglets J1 à J4 ---- */
.fv-tabs { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; margin: 22px 0 0; }
.fv-tab { display: grid; gap: 3px; padding: 12px 10px; border: 0; border-radius: 10px 10px 0 0; cursor: pointer; text-align: left; color: #fff; background: rgba(255,255,255,.08); opacity: .7; transition: opacity .2s, transform .2s; }
.fv-tab b { font: 700 12px/1 var(--f-lcd); letter-spacing: .2em; }
.fv-tab span { font: 400 clamp(15px, 1.6vw, 22px)/1.05 var(--fv-font, var(--f-display)); text-transform: uppercase; }
.fv-tab:hover { opacity: 1; }
.fv-tab.on { opacity: 1; transform: translateY(-3px); }
.fv-tab.t-hellfrancis { background: linear-gradient(180deg, #2a0606, #0b0b0c); --fv-font: "Metal Mania"; }
.fv-tab.t-franciscoland { background: linear-gradient(180deg, #5a1a8f, #24093f); --fv-font: "Audiowide"; }
.fv-tab.t-serkachella { background: linear-gradient(180deg, #ff9a7a, #1fb5ac); --fv-font: "Pacifico"; color: #1b2a2a; }
.fv-tab.t-cercastock69 { background: linear-gradient(180deg, #ff7a1a, #6b4a1c); --fv-font: "Shrikhand"; }
.fv-tab.on { box-shadow: 0 -3px 0 var(--acc, #fff) inset; }

/* ---- un jour : sa palette ---- */
.fv-day { --fv-row: 13px; padding: 22px; border-radius: 0 0 14px 14px; background: var(--bg); color: var(--ink); box-shadow: 0 20px 40px rgba(0,0,0,.45); }
.fv-day[hidden] { display: none; }
.d-hellfrancis { --bg: linear-gradient(180deg, #120404, #0b0b0c 40%); --ink: #e9e2dc; --acc: #c1121f; --acc2: #9a8478; --cell: rgba(40,10,10,.92); --line: rgba(193,18,31,.28); --font: "Metal Mania"; }
.d-franciscoland { --bg: radial-gradient(ellipse at 50% 0%, #4b1580, #170630 60%); --ink: #f6eaff; --acc: #ff2bd6; --acc2: #19e3ff; --cell: rgba(40,10,70,.9); --line: rgba(25,227,255,.22); --font: "Audiowide"; }
.d-serkachella { --bg: linear-gradient(180deg, #f6e7cf, #efd9b6); --ink: #3b2a1e; --acc: #ff6f59; --acc2: #1fb5ac; --cell: rgba(255,250,240,.95); --line: rgba(255,111,89,.3); --font: "Pacifico"; }
.d-cercastock69 { --bg: linear-gradient(180deg, #ecd9b1, #d9bd85); --ink: #3a2412; --acc: #e0611a; --acc2: #4f7a28; --cell: rgba(250,238,210,.95); --line: rgba(122,74,26,.3); --font: "Shrikhand"; }
.fv-day-head { display: grid; gap: 4px; margin-bottom: 18px; }
.fv-day-num { margin: 0; font: 700 12px/1 var(--f-lcd); letter-spacing: .3em; text-transform: uppercase; color: var(--acc2); }
.fv-day-head h3 { margin: 0; font: 400 clamp(38px, 6vw, 72px)/1 var(--font); color: var(--acc); text-shadow: 0 3px 0 rgba(0,0,0,.25); }
.d-franciscoland .fv-day-head h3 { text-shadow: 0 0 18px rgba(255,43,214,.7); }
.fv-day-clin { margin: 0; font: italic 600 18px/1.3 "Cormorant Garamond", Georgia, serif; color: var(--ink); opacity: .85; }
.fv-day-head dl { display: flex; flex-wrap: wrap; gap: 8px 26px; margin: 10px 0 0; }
.fv-day-head dt { font: 700 11px/1 var(--f-lcd); letter-spacing: .18em; text-transform: uppercase; color: var(--acc2); margin-bottom: 4px; }
.fv-day-head dd { margin: 0; font: 700 15px/1.35 var(--f-display); text-transform: uppercase; letter-spacing: .03em; }
.fv-day a { color: inherit; text-decoration: none; border-bottom: 2px solid var(--acc); }
.fv-day a:hover { color: var(--acc); }

/* ---- la grille : colonnes = scènes, rangées = 10 min ---- */
.fv-grid { position: relative; display: grid; grid-template-columns: 58px repeat(var(--cols), minmax(0, 1fr)); column-gap: 8px; }
.fv-corner { grid-row: 1; grid-column: 1; }
.fv-stage-h { grid-row: 1; padding: 10px 12px; margin-bottom: 6px; border-radius: 8px; background: var(--acc); color: #fff; font: 800 15px/1.1 var(--f-display); text-transform: uppercase; letter-spacing: .06em; text-align: center; }
.d-serkachella .fv-stage-h, .d-cercastock69 .fv-stage-h { color: #fff8ec; }
.fv-hour { grid-column: 1 / -1; position: relative; height: 0; border-top: 1px dashed var(--line); z-index: 0; }
.fv-hour span { position: absolute; left: 0; top: -8px; padding-right: 6px; background: transparent; font: 700 12px/1 var(--f-lcd); color: var(--acc2); }
.fv-set { position: relative; z-index: 1; display: flex; flex-direction: column; gap: 3px; margin: 2px 0; padding: 6px 10px; overflow: hidden; border-radius: 8px; background: var(--cell); border-left: 4px solid var(--acc2); box-shadow: 0 4px 10px rgba(0,0,0,.25); }
.fv-set small { font: 700 11px/1 var(--f-lcd); letter-spacing: .06em; color: var(--acc2); }
.fv-set strong { font: 800 16px/1.15 var(--f-display); text-transform: uppercase; letter-spacing: .02em; }
.fv-set em { font: italic 500 14px/1.25 "Cormorant Garamond", Georgia, serif; opacity: .9; }
.fv-set.short { flex-direction: row; flex-wrap: wrap; align-items: baseline; gap: 2px 8px; padding: 3px 8px; }
.fv-set.short em { display: none; }
.fv-set.head { border-left: 0; background: linear-gradient(135deg, var(--acc), color-mix(in srgb, var(--acc) 55%, #000)); color: #fff; box-shadow: 0 0 0 2px var(--acc), 0 0 26px color-mix(in srgb, var(--acc) 60%, transparent); }
.fv-set.head strong { font-size: 21px; }
.fv-set.head small { color: #fff; opacity: .85; }
.fv-set.head a { border-bottom-color: #fff; }
.fv-set.aube { background: linear-gradient(180deg, #2b1d4a, #ff8a3d 70%, #ffd27a); color: #fff; border-left-color: #ffd27a; }
.fv-set.aube small { color: #fff; }
.fv-set.closed { background: repeating-linear-gradient(135deg, transparent 0 10px, var(--line) 10px 20px); box-shadow: none; border-left-color: transparent; opacity: .8; }
.fv-set-top { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; }
.fv-role { align-self: flex-start; padding: 2px 7px; border-radius: 999px; background: var(--acc2); color: #fff; font: 700 10px/1.4 var(--f-lcd); font-style: normal; letter-spacing: .12em; text-transform: uppercase; }
.fv-set.head .fv-role { background: #fff; color: var(--acc); }
.fv-role.r-headliner::before { content: "★ "; }
.fv-list { display: none; }

/* ---- le site : une carte par scène ---- */
.fv-stages { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 14px; margin-top: 18px; }
.fv-stage-card { padding: 16px 18px; border-radius: 12px; background: var(--cell, rgba(255,255,255,.06)); color: var(--ink, #fff); border-top: 4px solid var(--acc, #f5a623); box-shadow: 0 10px 22px rgba(0,0,0,.35); }
.fv-stage-card.d-hellfrancis, .fv-stage-card.d-franciscoland, .fv-stage-card.d-serkachella, .fv-stage-card.d-cercastock69 { background: var(--bg); }
.fv-stage-card small { font: 700 11px/1 var(--f-lcd); letter-spacing: .16em; text-transform: uppercase; color: var(--acc2, #f5a623); }
.fv-stage-card strong { display: block; margin: 8px 0 6px; font: 400 24px/1.05 var(--font, var(--f-display)); color: var(--acc); }
.fv-stage-card p { margin: 0; font-size: 14px; line-height: 1.45; }

/* ---- encarts « à venir » ---- */
.fv-soon-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 14px; margin-top: 16px; }
.fv-soon-card { position: relative; padding: 20px 20px 18px; border-radius: 12px; border: 1px dashed rgba(255,255,255,.35); background: rgba(255,255,255,.05); }
.fv-soon-card span { font-size: 28px; }
.fv-soon-card strong { display: block; margin: 8px 0 4px; font: 800 19px/1.1 var(--f-display); text-transform: uppercase; letter-spacing: .04em; color: #ffd9a0; }
.fv-soon-card p { margin: 0; color: #d8d0c4; font-size: 15px; }
.fv-soon-card.wide { max-width: 640px; }
.fv-soon-card::after { content: "Bientôt"; position: absolute; right: 14px; top: 14px; padding: 3px 8px; border-radius: 4px; background: #ff3d7f; color: #fff; font: 700 10px/1.4 var(--f-lcd); letter-spacing: .15em; text-transform: uppercase; transform: rotate(4deg); }
body[data-fest="film"] .fv-soon-card { border-color: rgba(212,168,75,.55); background: linear-gradient(180deg, rgba(142,27,27,.18), rgba(7,11,28,.5)); }
body[data-fest="film"] .fv-soon-card strong { font-family: "Cinzel", Georgia, serif; color: #f5d98a; }
body[data-fest="film"] .fv-soon-card::after { background: #3c6e2f; }
body[data-fest="film"] .fv-soon h2 { font-family: "Cinzel", Georgia, serif; color: #f5d98a; }

/* ---- mention légale R.V.N ---- */
.fv-legal p { margin: 0; max-width: 760px; font-size: 12px; line-height: 1.5; color: #8f86a3; }
.fv-rvn { display: inline-grid; place-items: center; margin-right: 8px; padding: 2px 6px; border: 1px solid #8f86a3; border-radius: 3px; font: 700 10px/1.2 var(--f-lcd); letter-spacing: .25em; color: #b8aed0; vertical-align: 1px; }

/* ---- mobile : la grille devient une liste par scène ---- */
@media (max-width: 767px) {
  .fv-grid { display: none; }
  .fv-list { display: grid; gap: 16px; }
  .fv-list-stage h4 { margin: 0 0 8px; padding: 8px 12px; border-radius: 8px; background: var(--acc); color: #fff; font: 800 15px/1.1 var(--f-display); text-transform: uppercase; letter-spacing: .06em; }
  .fv-list-stage ol { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
  .fv-list-stage li { display: grid; gap: 3px; padding: 9px 12px; border-radius: 8px; background: var(--cell); border-left: 4px solid var(--acc2); }
  .fv-list-stage li.head { border-left-color: var(--acc); box-shadow: 0 0 0 2px var(--acc); }
  .fv-list-stage b { font: 700 12px/1 var(--f-lcd); color: var(--acc2); }
  .fv-list-stage span { font: 800 16px/1.2 var(--f-display); text-transform: uppercase; }
  .fv-list-stage em { font: italic 500 14px/1.3 "Cormorant Garamond", Georgia, serif; }
  .fv-tabs { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .fv-tab { border-radius: 10px; }
  .fv-day { padding: 16px; border-radius: 14px; margin-top: 8px; }
  .fv-hero { min-height: 62vh; }
}

/* SerkaStocK : affiches et merch officiel */
.fv-poster-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 22px; margin-top: 16px; max-width: 900px; }
.fv-poster { display: grid; gap: 10px; color: inherit; text-decoration: none; }
.fv-poster img { width: 100%; border-radius: 6px; box-shadow: 0 18px 36px rgba(0,0,0,.6); transition: transform .25s; }
.fv-poster:hover img { transform: translateY(-4px) rotate(-.6deg); }
.fv-poster strong { display: block; font: 800 19px/1.1 var(--f-display); text-transform: uppercase; color: #ffd9a0; }
.fv-poster small { color: #d8d0c4; font-size: 14px; }
.fv-merch-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 16px; margin: 16px 0 20px; }
.fv-merch-item { display: grid; gap: 6px; padding: 10px 10px 14px; border-radius: 12px; background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.12); color: inherit; text-decoration: none; transition: border-color .2s, transform .2s; }
.fv-merch-item:hover { border-color: #ff6a3d; transform: translateY(-3px); }
.fv-merch-item img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 8px; }
.fv-merch-item strong { font: 800 17px/1.1 var(--f-display); text-transform: uppercase; color: #ffd9a0; }
.fv-merch-item small { font-size: 14px; color: #d8d0c4; }

/* ---------- Serkadex · 8. Sèrka FC : album de foot (pelouse rayée, lignes blanches), pages façon album à vignettes.
   Dessin CSS en attendant les textures couv-foot.jpg / page-foot.jpg. ---------- */
.bd-foot { --cover: #2f8f4e; --cover2: #1d5e31; --page: #f7f7f2; --page2: #e9ece2; --ink: #123a20; --ring: #e8e8e8; --font-h: "Bebas Neue", Impact, sans-serif; }
.bd-cover.bd-foot { background:
    linear-gradient(90deg, transparent calc(50% - 1px), rgba(255,255,255,.75) calc(50% - 1px) calc(50% + 1px), transparent calc(50% + 1px)),
    radial-gradient(circle at 50% 50%, transparent 21%, rgba(255,255,255,.75) 21.4% 22.4%, transparent 22.8%),
    repeating-linear-gradient(0deg, #2f8f4e 0 34px, #287f44 34px 68px) !important; color: #fff; text-shadow: 0 2px 4px rgba(0,0,0,.6); }
.bd-cover.bd-foot .bdc-spine i { display: none; }
.bd-foot .bd-cover-band { background: repeating-linear-gradient(90deg, #2f8f4e 0 30px, #287f44 30px 60px); color: #fff; border-bottom: 4px solid #fff; }
.bd-foot .bd-title { font-family: "Bebas Neue", Impact, sans-serif; letter-spacing: .08em; font-size: clamp(24px, 2.4vw, 36px); }
.bd-foot .bd-stamp { color: #fff; border-color: #fff; }
.bd-foot .bd-page { background: linear-gradient(90deg, rgba(0,0,0,.12), transparent 7%, transparent 93%, rgba(0,0,0,.16)), radial-gradient(circle at 1px 1px, rgba(47,143,78,.12) 1px, transparent 0) 0 0 / 12px 12px, linear-gradient(180deg, var(--page), var(--page2)); color: var(--ink); }
.bd-foot .bd-page-head { border-bottom: 4px solid #2f8f4e; }
.bd-foot .bd-pocket { box-shadow: inset 0 0 0 2px rgba(47,143,78,.45), inset 0 8px 12px rgba(0,0,0,.1); }

/* ---------- Serkadex · 9. SerkaStocK 2027 : pochette de festival néon (rose, cyan, violet), pages nuit étoilée.
   Dessin CSS en attendant les textures couv-sk27.jpg / page-sk27.jpg. ---------- */
.bd-sk27 { --cover: #3a0d5c; --cover2: #14051f; --page: #1a0b2b; --page2: #0c0614; --ink: #ffe6f6; --ring: #19e3ff; --font-h: "Shrikhand", var(--f-display); }
.bd-cover.bd-sk27 { background:
    radial-gradient(ellipse at 30% 20%, rgba(255,61,127,.55), transparent 50%),
    radial-gradient(ellipse at 75% 75%, rgba(25,227,255,.45), transparent 50%),
    repeating-linear-gradient(125deg, rgba(255,255,255,.04) 0 6px, transparent 6px 14px),
    linear-gradient(160deg, #4b1580, #170630) !important; color: #fff; text-shadow: 0 0 12px rgba(255,61,127,.9), 0 2px 3px #000; }
.bd-sk27 .bd-cover-band { background: linear-gradient(90deg, #ff3d7f, #8a2be2 50%, #19e3ff); color: #fff; }
.bd-sk27 .bd-title { font-family: "Shrikhand", var(--f-display); font-weight: 400; font-size: clamp(22px, 2.2vw, 34px); }
.bd-sk27 .bd-stamp { color: #19e3ff; border-color: #19e3ff; }
.bd-sk27 .bd-page { background: linear-gradient(90deg, rgba(0,0,0,.25), transparent 7%, transparent 93%, rgba(0,0,0,.3)), radial-gradient(1px 1px at 20% 30%, #fff, transparent), radial-gradient(1px 1px at 70% 60%, #fff, transparent), radial-gradient(1.5px 1.5px at 40% 85%, #ff3d7f, transparent), radial-gradient(ellipse at 50% 0%, rgba(255,61,127,.18), transparent 60%), linear-gradient(180deg, var(--page), var(--page2)); color: var(--ink); text-shadow: 0 1px 2px rgba(0,0,0,.6); }
.bd-sk27 .bd-page-head { border-bottom-color: #ff3d7f; }
.bd-sk27 .bd-pocket { background: rgba(0,0,0,.3); box-shadow: inset 0 0 0 2px rgba(25,227,255,.55), inset 0 0 18px rgba(255,61,127,.25); }
.bd-sk27 .bd-ghost { border-color: rgba(255,230,246,.45); }

/* SerkaStocK : affiche de la prog sur la page Festivals, billetterie */
.fv-land-aff { display: grid; grid-template-columns: minmax(220px, 300px) 1fr; gap: 30px; align-items: center; margin-top: 34px; padding: 24px; border-radius: 14px; background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.12); }
.fv-land-aff .fv-poster img { box-shadow: 0 22px 40px rgba(0,0,0,.7); }
@media (max-width: 700px) { .fv-land-aff { grid-template-columns: 1fr; justify-items: center; text-align: center; } }
.fv-vendus { margin: 0; text-align: center; padding: 12px 20px; border-radius: 12px; background: rgba(255,61,127,.14); border: 1px solid rgba(255,61,127,.5); }
.fv-vendus b { display: block; font: 400 44px/1 "Shrikhand", var(--f-display); color: #ff3d7f; }
.fv-vendus span { font: 700 11px/1 var(--f-lcd); letter-spacing: .18em; text-transform: uppercase; color: #ffd9a0; }
.fv-passes { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 14px; margin-top: 18px; }
.fv-pass { position: relative; display: grid; gap: 6px; justify-items: start; padding: 18px 16px 16px; border-radius: 12px; background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.14); transition: border-color .2s, transform .2s; }
.fv-pass:hover { border-color: #ff3d7f; transform: translateY(-3px); }
.fv-pass-ico { font-size: 30px; }
.fv-pass strong { font: 800 18px/1.1 var(--f-display); text-transform: uppercase; letter-spacing: .04em; color: #ffd9a0; }
.fv-pass b { font: 400 34px/1 "Shrikhand", var(--f-display); color: #fff; }
.fv-pass small { font-size: 13px; line-height: 1.4; color: #d8d0c4; min-height: 54px; }
.fv-pass.p-vip { border-color: rgba(212,168,75,.7); background: linear-gradient(180deg, rgba(212,168,75,.14), rgba(255,255,255,.04)); }
.fv-pass.p-parrain { border-color: rgba(255,61,127,.7); background: linear-gradient(180deg, rgba(255,61,127,.16), rgba(255,255,255,.04)); }
.fv-pass.got { border-color: #2ec27e; box-shadow: 0 0 0 2px rgba(46,194,126,.4); }
.fv-pass.locked { opacity: .6; }
.fv-pass-tag { padding: 6px 10px; border-radius: 999px; background: #2ec27e; color: #06120c; font: 700 11px/1 var(--f-lcd); letter-spacing: .14em; text-transform: uppercase; }
.fv-pass-tag.off { background: rgba(255,255,255,.18); color: #f3eee6; }
.fv-nom { display: grid; gap: 6px; max-width: 520px; margin: 18px 0 0; font: 700 13px/1 var(--f-lcd); letter-spacing: .12em; text-transform: uppercase; color: #ffd9a0; }
.fv-nom input { padding: 10px 12px; border-radius: 8px; border: 1px solid rgba(255,255,255,.25); background: rgba(0,0,0,.35); color: #fff; font: 500 16px var(--f-body); }
.fv-nom small { font: 400 12px/1.4 var(--f-body); text-transform: none; letter-spacing: 0; color: #b8aed0; }
.fv-mybillets { margin-top: 26px; padding: 20px; border-radius: 12px; background: rgba(46,194,126,.08); border: 1px solid rgba(46,194,126,.4); }
.fv-mybillets h3 { margin: 0 0 12px; font: 800 20px/1 var(--f-display); text-transform: uppercase; color: #2ec27e; }
.fv-billet-list { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 12px; }
.fv-billet { display: grid; gap: 4px; justify-items: start; padding: 14px 16px; border-radius: 10px; background: rgba(0,0,0,.35); border-left: 4px solid #ff3d7f; }
.fv-billet-num { font: 700 13px/1 'Share Tech Mono', monospace; letter-spacing: .1em; color: #19e3ff; }
.fv-billet strong { font: 800 17px/1.1 var(--f-display); text-transform: uppercase; color: #fff; }
.fv-billet small { color: #d8d0c4; font-size: 13px; }
.fv-billet .btn { margin-top: 6px; }
.adm-bil-head { margin-bottom: 14px; }
.tbl tr.off td { opacity: .5; text-decoration: line-through; }

.fv-aff-big { display: grid; grid-template-columns: minmax(260px, 420px) 1fr; gap: 34px; align-items: center; }
.fv-aff-big .fv-poster img { box-shadow: 0 26px 50px rgba(0,0,0,.75); }
@media (max-width: 760px) { .fv-aff-big { grid-template-columns: 1fr; justify-items: center; text-align: center; } }

/* ---------- Billetterie du SerkaStocK : page dédiée ---------- */
.bl-head { display: grid; grid-template-columns: 1fr auto; gap: 30px; align-items: end; }
.bl-title { font: 400 clamp(52px, 9vw, 120px)/.95 "Shrikhand", var(--f-display); text-transform: none; color: #fff; text-shadow: 0 4px 0 #ff3d7f, 0 10px 30px rgba(0,0,0,.7); }
.bl-stats { display: flex; gap: 12px; }
.bl-stats p { margin: 0; min-width: 120px; text-align: center; padding: 12px 18px; border-radius: 12px; background: rgba(255,61,127,.14); border: 1px solid rgba(255,61,127,.5); }
.bl-stats b { display: block; font: 400 40px/1 "Shrikhand", var(--f-display); color: #ff3d7f; }
.bl-stats span { font: 700 11px/1.3 var(--f-lcd); letter-spacing: .16em; text-transform: uppercase; color: #ffd9a0; }
.bl-rules { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 14px; padding-top: 0; }
.bl-rule { position: relative; padding: 18px 18px 16px 64px; border-radius: 12px; background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.12); }
.bl-rule span { position: absolute; left: 16px; top: 16px; width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; background: #ff3d7f; color: #fff; font: 400 20px/1 "Shrikhand", var(--f-display); }
.bl-rule strong { display: block; font: 800 18px/1.1 var(--f-display); text-transform: uppercase; color: #ffd9a0; margin-bottom: 6px; }
.bl-rule p { margin: 0; font-size: 14px; line-height: 1.45; color: #d8d0c4; }
.bl-rule a { color: #19e3ff; }
.bl-nom { padding-top: 0; }
.bl-nom label { display: grid; gap: 6px; max-width: 520px; font: 700 13px/1 var(--f-lcd); letter-spacing: .12em; text-transform: uppercase; color: #ffd9a0; }
.bl-nom input { padding: 10px 12px; border-radius: 8px; border: 1px solid rgba(255,255,255,.25); background: rgba(0,0,0,.35); color: #fff; font: 500 16px var(--f-body); }
.bl-nom small { font: 400 12px/1.4 var(--f-body); text-transform: none; letter-spacing: 0; color: #b8aed0; }
.bl-cit { margin: 12px 0 0; padding: 8px 12px; border-radius: 8px; display: inline-block; background: rgba(46,194,126,.14); border: 1px solid rgba(46,194,126,.5); color: #d9ffe9; font-size: 14px; }
.bl-cit.off { background: rgba(255,255,255,.06); border-color: rgba(255,255,255,.2); color: #d8d0c4; }
.bl-cit a { color: #19e3ff; }
.bl-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 18px; }
.bl-pass { display: grid; grid-template-rows: auto 1fr; overflow: hidden; border-radius: 14px; background: #120d1f; border: 1px solid rgba(255,255,255,.14); box-shadow: 0 16px 34px rgba(0,0,0,.55); transition: transform .2s, border-color .2s; }
.bl-pass:hover { transform: translateY(-4px); border-color: #ff3d7f; }
.bl-pass.p-vip { border-color: rgba(212,168,75,.6); } .bl-pass.p-parrain { border-color: rgba(255,200,80,.7); background: linear-gradient(180deg, #2a1a08, #120d1f 45%); }
.bl-pass.got { border-color: #2ec27e; } .bl-pass.wait { border-color: #19e3ff; } .bl-pass.locked { opacity: .65; }
.bl-img { display: block; background: #0a0612; }
.bl-img img { display: block; width: 100%; aspect-ratio: 5 / 6; object-fit: cover; transition: transform .5s; }
.bl-pass:hover .bl-img img { transform: scale(1.04); }
.bl-body { display: grid; gap: 8px; padding: 16px 18px 18px; align-content: start; }
.bl-body h2 { margin: 0; font: 800 20px/1.15 var(--f-display); text-transform: uppercase; letter-spacing: .04em; color: #ffd9a0; }
.bl-prix { margin: 0; display: grid; }
.bl-prix b { font: 400 40px/1 "Shrikhand", var(--f-display); color: #fff; }
.bl-prix span { font-size: 12px; color: #b8aed0; }
.bl-desc { margin: 0; font: italic 500 15px/1.4 "Cormorant Garamond", Georgia, serif; font-size: 16px; color: #ece5d8; }
.bl-bonus { margin: 0; padding: 0 0 0 18px; font-size: 13px; line-height: 1.5; color: #d8d0c4; }
.bl-bonus li::marker { color: #ff3d7f; }
.bl-action { display: grid; gap: 8px; justify-items: start; margin-top: 6px; }
.bl-tag { padding: 6px 10px; border-radius: 999px; font: 700 11px/1 var(--f-lcd); letter-spacing: .14em; text-transform: uppercase; background: rgba(255,255,255,.18); color: #f3eee6; }
.bl-tag.ok { background: #2ec27e; color: #06120c; } .bl-tag.wait { background: #19e3ff; color: #06121a; } .bl-tag.off { background: rgba(255,255,255,.14); }
.bl-delai { margin: 0; display: grid; gap: 2px; }
.bl-delai b { font: 800 15px/1.2 var(--f-display); text-transform: uppercase; color: #19e3ff; }
.bl-delai small { font-size: 12px; line-height: 1.4; color: #b8aed0; }
.fv-bil-teaser { display: grid; grid-template-columns: 1fr auto; gap: 26px; align-items: center; padding: 22px 26px; border-radius: 14px; background: rgba(255,61,127,.08); border: 1px solid rgba(255,61,127,.45); }
@media (max-width: 760px) { .bl-head, .fv-bil-teaser { grid-template-columns: 1fr; } .bl-stats { flex-wrap: wrap; } }

/* Programme : logos des groupes découpés dans l'affiche. Fond noir fondu par « screen » sur les jours sombres, encadré sur les jours clairs. */
.fv-logo { display: block; max-width: 100%; max-height: 54px; width: auto; object-fit: contain; }
.fv-logo-a { display: block; line-height: 0; }
.fv-set .fv-logo { margin: 2px 0; }
.fv-set.head .fv-logo { max-height: 74px; }
.fv-set.short .fv-logo { max-height: 26px; }
.fv-nolo { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.d-hellfrancis .fv-logo, .d-franciscoland .fv-logo { mix-blend-mode: screen; }
.d-serkachella .fv-logo, .d-cercastock69 .fv-logo { border-radius: 6px; background: #1a1410; padding: 3px 6px; box-shadow: 0 2px 6px rgba(0,0,0,.25); }
.fv-set.head .fv-logo { mix-blend-mode: normal; background: rgba(0,0,0,.55); border-radius: 6px; padding: 4px 8px; }
.fv-list-stage .fv-logo { max-height: 40px; margin: 4px 0; }

/* ---------- SRK TV : rubriques (onglets #/tv/<onglet>) ---------- */
.tv-nav { display: flex; flex-wrap: wrap; gap: 8px; margin: 18px auto 6px; position: sticky; top: calc(var(--bar-h) - 24px); z-index: 5; padding: 10px 0; background: linear-gradient(180deg, rgba(8,8,12,.97), rgba(8,8,12,.85)); backdrop-filter: blur(6px); }
.tv-tab { display: inline-flex; align-items: center; gap: 8px; padding: 10px 16px; border-radius: 999px; border: 1px solid rgba(255,255,255,.14); color: #e6e6ee; font: 700 13px/1 var(--f-display); letter-spacing: .08em; text-transform: uppercase; text-decoration: none; background: rgba(255,255,255,.04); transition: border-color .15s, background .15s; }
.tv-tab span { font-size: 15px; }
.tv-tab b { font: 400 12px/1 var(--f-lcd); color: #ff8a00; }
.tv-tab:hover { border-color: #ff8a00; }
.tv-tab.on { background: #f2222f; border-color: #f2222f; color: #fff; }
.tv-tab.on b { color: #fff; }
/* dépêches (Le Direct) */
.tv-dep-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.tv-dep-list li { display: grid; grid-template-columns: auto 1fr auto; gap: 14px; align-items: center; padding: 12px 16px; border-radius: 10px; background: rgba(255,255,255,.04); box-shadow: inset 0 0 0 1px rgba(255,255,255,.08); border-left: 4px solid #f2222f; }
.tv-dep-list em.flash { font-style: normal; background: #f2222f; color: #fff; padding: 3px 7px; border-radius: 3px; font: 800 11px/1 var(--f-lcd); letter-spacing: .15em; }
.tv-dep-list strong { display: block; font: 800 17px/1.15 var(--f-display); text-transform: uppercase; color: #fff; }
.tv-dep-list span { display: block; color: var(--gris); font-size: 14px; margin-top: 3px; }
.tv-dep-list small { font: 700 11px/1 var(--f-lcd); letter-spacing: .15em; text-transform: uppercase; color: #ff8a00; white-space: nowrap; }
/* le journal (liste dépliable) */
.tv-journal-list { display: grid; gap: 10px; }
.tv-jitem { border-radius: 12px; background: rgba(255,255,255,.04); box-shadow: inset 0 0 0 1px rgba(255,255,255,.08); border-left: 4px solid #ff8a00; overflow: hidden; }
.tv-jitem.is-flash { border-left-color: #f2222f; }
.tv-jitem summary { display: grid; grid-template-columns: 120px 1fr; gap: 16px; align-items: center; padding: 12px 16px 12px 12px; cursor: pointer; list-style: none; }
.tv-jitem summary::-webkit-details-marker { display: none; }
.tv-jimg { width: 120px; aspect-ratio: 16 / 10; object-fit: cover; border-radius: 8px; display: block; background: #16161c; }
.tv-jflash { display: grid; place-items: center; font-size: 34px; }
.tv-jitem summary small { display: block; font: 700 11px/1 var(--f-lcd); letter-spacing: .2em; text-transform: uppercase; color: #ff8a00; margin-bottom: 4px; }
.tv-jitem summary strong { display: block; font: 800 clamp(17px, 1.6vw, 21px)/1.15 var(--f-display); text-transform: uppercase; color: #fff; }
.tv-jitem summary span { display: block; color: var(--gris); font-size: 14px; margin-top: 4px; }
.tv-jitem[open] summary { background: rgba(255,255,255,.03); }
.tv-jcorps { padding: 4px 18px 18px; color: #d9d9e0; font-size: 15px; line-height: 1.65; max-width: 80ch; }
@media (max-width: 640px) {
  .tv-jitem summary { grid-template-columns: 84px 1fr; gap: 12px; }
  .tv-jimg { width: 84px; }
  .tv-dep-list li { grid-template-columns: auto 1fr; }
  .tv-dep-list small { grid-column: 2; }
  .tv-tab { padding: 9px 12px; font-size: 12px; }
}

/* ---------- Ambassade : mes billets, ma place dans la file ---------- */
.me-bil .me-title { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.me-file { display: grid; gap: 14px; }
.me-file-item { display: grid; grid-template-columns: 180px 1fr; gap: 18px; padding: 16px; border-radius: 14px; background: linear-gradient(135deg, rgba(138,43,226,.18), rgba(0,0,0,.35)); box-shadow: inset 0 0 0 1px rgba(255,255,255,.1); border-left: 4px solid #19e3ff; }
.me-file-item img { width: 180px; aspect-ratio: 2 / 3; object-fit: cover; border-radius: 10px; transform: rotate(-2deg); box-shadow: 0 10px 24px rgba(0,0,0,.45); }
.me-file-kicker { margin: 0 0 4px; font: 700 11px/1 var(--f-lcd); letter-spacing: .18em; text-transform: uppercase; color: #19e3ff; }
.me-file-body h4 { margin: 0 0 6px; font: 800 24px/1.1 var(--f-display); text-transform: uppercase; color: #fff; }
.me-file-nom { margin: 0 0 12px; color: #d8d0c4; display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.me-file-stats { display: flex; gap: 22px; flex-wrap: wrap; margin: 0 0 10px; }
.me-file-stats p { margin: 0; display: grid; } .me-file-stats b { font: 800 26px/1 var(--f-display); color: #ff3d7f; } .me-file-stats span { font: 700 10px/1.4 var(--f-lcd); letter-spacing: .16em; text-transform: uppercase; color: #b8aed0; }
.me-file-mot { margin: 0 0 12px; font-style: italic; color: #e6e0f0; }
.me-file-actions { margin: 0; display: flex; gap: 8px; flex-wrap: wrap; }
.me-file-hist { margin-top: 16px; color: var(--gris); } .me-file-hist summary { cursor: pointer; font-weight: 700; } .me-file-hist ul { margin: 8px 0 0; padding-left: 18px; }
@media (max-width: 640px) { .me-file-item { grid-template-columns: 1fr; } .me-file-item img { width: 140px; } }

/* ---------- Le SerkaStocK v3 : barre d'action, cartes jours, têtes d'affiche, scènes, merch, SRK TV ---------- */
.sk-bar { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 22px; }
.sk-cta { background: #ff3d7f; border-color: #ff3d7f; color: #fff; box-shadow: 0 10px 30px rgba(255,61,127,.35); }
.sk-cta:hover { background: #ff5c93; }
.sk-nums { display: flex; flex-wrap: wrap; gap: 26px; margin: 22px 0 0; padding: 0; list-style: none; }
.sk-nums li { display: grid; } .sk-nums b { font: 400 clamp(30px, 4vw, 48px)/1 "Shrikhand", var(--f-display); color: #fff; text-shadow: 0 3px 0 rgba(0,0,0,.4); }
.sk-nums span { font: 700 11px/1.4 var(--f-lcd); letter-spacing: .2em; text-transform: uppercase; color: #ffd9a0; }
/* cartes jours */
.sk-daycards { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; margin-top: 18px; }
.sk-daycard { display: grid; gap: 8px; align-content: start; padding: 18px; border: 0; border-radius: 16px; background: var(--bg); color: var(--ink); text-align: left; cursor: pointer; box-shadow: 0 16px 36px rgba(0,0,0,.45), inset 0 0 0 1px rgba(255,255,255,.08); transition: transform .18s, box-shadow .18s; font: inherit; }
.sk-daycard:hover { transform: translateY(-4px); box-shadow: 0 24px 46px rgba(0,0,0,.55), inset 0 0 0 2px var(--acc); }
.sk-day-top { display: flex; justify-content: space-between; align-items: center; } .sk-day-top small { font: 700 11px/1 var(--f-lcd); letter-spacing: .3em; text-transform: uppercase; color: var(--acc2); } .sk-day-top i { font-style: normal; font-size: 24px; }
.sk-daycard strong { font: 400 clamp(26px, 2.6vw, 38px)/1 var(--font, var(--f-display)); color: var(--acc); text-shadow: 0 2px 0 rgba(0,0,0,.25); }
.sk-daycard em { font: italic 600 15px/1.3 "Cormorant Garamond", Georgia, serif; opacity: .85; }
.sk-day-genres { font: 700 12px/1.4 var(--f-display); text-transform: uppercase; letter-spacing: .04em; opacity: .9; }
.sk-day-hl { display: grid; gap: 4px; justify-items: start; margin-top: 6px; padding: 10px; border-radius: 10px; background: rgba(0,0,0,.22); }
.sk-day-hl .fv-logo { max-height: 54px; max-width: 100%; width: auto; object-fit: contain; }
.sk-day-hl small { font: 700 10px/1.3 var(--f-lcd); letter-spacing: .16em; text-transform: uppercase; color: var(--acc2); }
.sk-day-hl b.fv-nolo { display: none; } .sk-day-hl b:not(.fv-nolo) { font: 800 16px/1.1 var(--f-display); text-transform: uppercase; color: var(--acc); }
.sk-day-foot { font-size: 13px; opacity: .9; margin-top: 4px; } .sk-day-foot u { text-decoration-color: var(--acc); }
.d-serkachella.sk-daycard, .d-cercastock69.sk-daycard { box-shadow: 0 16px 36px rgba(0,0,0,.35); }
/* têtes d'affiche */
.sk-heads-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 14px; margin-top: 18px; }
.sk-head { display: grid; grid-template-columns: 110px 1fr; gap: 14px; align-items: center; padding: 14px; border-radius: 14px; background: var(--bg); color: var(--ink); box-shadow: inset 0 0 0 1px rgba(255,255,255,.08); border-left: 5px solid var(--acc); }
.sk-head-logo { display: grid; place-items: center; min-height: 90px; padding: 6px; border-radius: 10px; background: rgba(0,0,0,.25); }
.sk-head-logo .fv-logo { max-width: 100%; max-height: 86px; object-fit: contain; } .sk-head-logo b.fv-nolo { display: none; } .sk-head-logo b:not(.fv-nolo) { font: 800 15px/1.1 var(--f-display); text-transform: uppercase; text-align: center; color: var(--acc); }
.sk-head small { font: 700 10px/1.3 var(--f-lcd); letter-spacing: .18em; text-transform: uppercase; color: var(--acc2); }
.sk-head strong { display: block; font: 400 24px/1.05 var(--font, var(--f-display)); color: var(--acc); } .sk-head strong a { color: inherit; text-decoration: none; }
.sk-head span { display: block; font-size: 13px; opacity: .9; } .sk-head em { display: block; font-size: 12px; opacity: .75; margin-top: 4px; }
/* scènes en bandeau */
.sk-stages { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(250px, 1fr); gap: 14px; margin-top: 18px; overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: 10px; scrollbar-color: #ff3d7f transparent; }
.sk-stages .fv-stage-card { scroll-snap-align: start; position: relative; }
.sk-stage-n { position: absolute; top: 12px; right: 14px; font: 700 10px/1 var(--f-lcd); letter-spacing: .14em; text-transform: uppercase; color: var(--acc2); }
/* merch : vitrine */
.sk-merch .home-head { align-items: end; }
.sk-merch-strip { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin-top: 16px; }
.sk-merch-tile { position: relative; display: block; border-radius: 12px; overflow: hidden; aspect-ratio: 4 / 3; box-shadow: 0 12px 28px rgba(0,0,0,.45); }
.sk-merch-tile img { width: 100%; height: 100%; object-fit: cover; transition: transform .3s; } .sk-merch-tile:hover img { transform: scale(1.05); }
.sk-merch-tile span { position: absolute; left: 0; right: 0; bottom: 0; padding: 22px 12px 10px; background: linear-gradient(180deg, transparent, rgba(0,0,0,.85)); font: 800 15px/1 var(--f-display); text-transform: uppercase; color: #ffd9a0; }
/* SRK TV sur la page fest */
.sk-tv-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 12px; margin-top: 16px; }
.sk-tv-item { display: grid; grid-template-columns: 110px 1fr; gap: 12px; align-items: center; padding: 10px; border-radius: 12px; background: rgba(255,255,255,.05); box-shadow: inset 0 0 0 1px rgba(255,255,255,.1); border-left: 4px solid #ff8a00; color: inherit; text-decoration: none; }
.sk-tv-item:hover { background: rgba(255,255,255,.09); }
.sk-tv-item img { width: 110px; aspect-ratio: 16 / 10; object-fit: cover; border-radius: 8px; }
.sk-tv-item small { display: block; font: 700 10px/1.3 var(--f-lcd); letter-spacing: .18em; text-transform: uppercase; color: #ff8a00; margin-bottom: 4px; }
.sk-tv-item em.flash { font-style: normal; background: #f2222f; color: #fff; padding: 2px 5px; border-radius: 3px; }
.sk-tv-item strong { display: block; font: 800 15px/1.15 var(--f-display); text-transform: uppercase; color: #fff; } .sk-tv-item span { display: block; font-size: 13px; color: var(--gris); margin-top: 3px; }
/* page annexe : boutique du fest */
.sk-mhead { display: grid; grid-template-columns: 1fr auto; gap: 20px; align-items: end; }
.sk-pass-strip { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 10px; margin-top: 16px; }
.sk-pass { display: grid; gap: 4px; color: inherit; text-decoration: none; text-align: center; }
.sk-pass img { width: 100%; aspect-ratio: 2 / 3; object-fit: cover; border-radius: 10px; box-shadow: 0 12px 26px rgba(0,0,0,.5); transition: transform .2s; } .sk-pass:hover img { transform: translateY(-5px) rotate(-1.5deg); }
.sk-pass span { font: 800 12px/1.2 var(--f-display); text-transform: uppercase; color: #fff; } .sk-pass b { font: 700 13px/1 var(--f-lcd); color: #ff3d7f; }
.sk-mgrid { display: grid; gap: 18px; }
.sk-mitem { display: grid; grid-template-columns: minmax(220px, 380px) 1fr; gap: 22px; align-items: center; padding: 16px; border-radius: 16px; background: rgba(255,255,255,.04); box-shadow: inset 0 0 0 1px rgba(255,255,255,.1); }
.sk-mitem:nth-child(even) { grid-template-columns: 1fr minmax(220px, 380px); } .sk-mitem:nth-child(even) .sk-mimg { order: 2; }
.sk-mimg img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 12px; box-shadow: 0 16px 34px rgba(0,0,0,.5); }
.sk-mitem h3 { margin: 0 0 8px; font: 800 clamp(22px, 2.4vw, 32px)/1.05 var(--f-display); text-transform: uppercase; color: #ffd9a0; }
.sk-mitem p { margin: 0 0 10px; color: #e6e0f0; } .sk-mprix b { font: 400 30px/1 "Shrikhand", var(--f-display); color: #ff3d7f; margin-right: 10px; } .sk-mprix small { color: var(--gris); }
@media (max-width: 900px) { .sk-daycards { grid-template-columns: repeat(2, minmax(0, 1fr)); } .sk-merch-strip { grid-template-columns: repeat(2, minmax(0, 1fr)); } .sk-pass-strip { grid-template-columns: repeat(4, minmax(0, 1fr)); } .sk-mitem, .sk-mitem:nth-child(even) { grid-template-columns: 1fr; } .sk-mitem:nth-child(even) .sk-mimg { order: 0; } .sk-mhead { grid-template-columns: 1fr; } }
@media (max-width: 560px) { .sk-daycards { grid-template-columns: 1fr; } .sk-pass-strip { grid-template-columns: repeat(2, minmax(0, 1fr)); } .sk-head { grid-template-columns: 90px 1fr; } }
.sk-actions .sk-mode { margin-right: 10px; }

/* ---------- Plan comm SerkaStocK : bandeau site, tuile Portail, promo Serkadex, argument Ambassade ---------- */
.promo-bar { position: relative; display: flex; align-items: center; gap: 14px; flex-wrap: wrap; padding: 10px calc(var(--gutter) + 34px) 10px var(--gutter); background: linear-gradient(90deg, #2a0a4a, #5a1a8f 40%, #ff3d7f); color: #fff; box-shadow: inset 0 -1px 0 rgba(255,255,255,.2); }
.promo-main { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; color: inherit; text-decoration: none; flex: 1 1 320px; }
.promo-tag { padding: 4px 9px; border-radius: 4px; background: #fff; color: #5a1a8f; font: 800 11px/1 var(--f-lcd); letter-spacing: .18em; text-transform: uppercase; }
.promo-main strong { font: 800 16px/1 var(--f-display); text-transform: uppercase; letter-spacing: .04em; }
.promo-txt { font-size: 13px; color: #ffe6f2; }
.promo-links { display: flex; gap: 8px; flex-wrap: wrap; }
.promo-links .btn.sm { background: #fff; color: #5a1a8f; border-color: #fff; } .promo-links .btn.ghost.sm { background: transparent; color: #fff; border-color: rgba(255,255,255,.6); }
.promo-close { position: absolute; top: 50%; right: var(--gutter); transform: translateY(-50%); width: 28px; height: 28px; border: 0; border-radius: 50%; background: rgba(0,0,0,.3); color: #fff; font-size: 18px; line-height: 1; cursor: pointer; }
.promo-close:hover { background: rgba(0,0,0,.55); }
.hub-tile.promo { box-shadow: 0 0 0 2px #ff3d7f, 0 16px 40px rgba(255,61,127,.35); }
.hub-tile.promo .hub-tile-in small { color: #ff8ab8; }
.hub-promo { position: absolute; top: 14px; left: -34px; z-index: 2; transform: rotate(-35deg); padding: 6px 44px; background: #ff3d7f; color: #fff; font: 800 11px/1 var(--f-lcd); letter-spacing: .18em; text-transform: uppercase; font-style: normal; box-shadow: 0 4px 12px rgba(0,0,0,.4); }
.sk-promo { display: grid; grid-template-columns: auto 1fr; gap: 4px 14px; align-items: center; margin: 12px 0 2px; padding: 12px 16px; border-radius: 12px; background: linear-gradient(90deg, rgba(90,26,143,.55), rgba(255,61,127,.35)); box-shadow: inset 0 0 0 1px rgba(255,255,255,.18); color: #fff; text-decoration: none; }
.sk-promo span { grid-row: span 2; font-size: 30px; } .sk-promo b { font: 800 15px/1.1 var(--f-display); text-transform: uppercase; letter-spacing: .04em; } .sk-promo em { font-style: normal; font-size: 13px; color: #ffe6f2; }
.amb-fest { display: grid; grid-template-columns: auto 1fr; gap: 2px 14px; align-items: center; margin-top: 18px; padding: 12px 16px; border-radius: 12px; background: rgba(90,26,143,.45); box-shadow: inset 0 0 0 1px rgba(255,255,255,.2); color: #fff; text-decoration: none; max-width: 720px; }
.amb-fest span { grid-row: span 2; font-size: 28px; } .amb-fest b { font: 800 15px/1.2 var(--f-display); text-transform: uppercase; } .amb-fest em { font-style: normal; font-size: 13px; color: #efe6ff; }
.amb-fest:hover { background: rgba(90,26,143,.7); }
@media (max-width: 640px) { .promo-bar { padding-right: calc(var(--gutter) + 34px); } .promo-main strong { font-size: 14px; } }

/* ---------- Menu : groupes déroulants ---------- */
.nav-group { position: relative; display: inline-flex; align-items: center; }
.nav-group .nav-top { padding-right: 10px; }
.nav-caret { font-style: normal; font-size: 12px; opacity: .7; margin-left: 2px; transition: transform .2s; }
.nav-group.on > .nav-top { color: var(--marquage); background: var(--bitume); }
.nav-toggle { position: absolute; inset: 0; border: 0; background: transparent; cursor: pointer; opacity: 0; display: none; }
.nav-menu { position: absolute; top: calc(100% + 6px); left: 0; z-index: 30; min-width: 230px; display: none; flex-direction: column; padding: 8px; border-radius: 12px; background: rgba(24,25,29,.98); box-shadow: 0 18px 40px rgba(0,0,0,.6), inset 0 0 0 1px rgba(255,255,255,.1); backdrop-filter: blur(8px); }
.nav-menu::before { content: ""; position: absolute; top: -6px; left: 0; right: 0; height: 8px; }
.nav-group:hover .nav-menu, .nav-group:focus-within .nav-menu, .nav-group.open .nav-menu { display: flex; }
.nav-group:hover .nav-caret, .nav-group.open .nav-caret { transform: rotate(180deg); }
.nav .nav-menu a { display: flex; align-items: center; gap: 10px; padding: 9px 12px; font-size: 15px; letter-spacing: .04em; border-radius: 8px; color: #e6e6ee; }
.nav .nav-menu a b { width: 24px; text-align: center; font-size: 17px; }
.nav .nav-menu a:hover, .nav .nav-menu a[aria-current="page"] { background: var(--bitume); color: var(--marquage); }
.nav .nav-menu a.nav-2027 { color: #fff; -webkit-text-fill-color: #fff; background: none; }
.nav .nav-menu a.nav-2027:hover { background: #124483; }
@media (hover: none), (max-width: 900px) {
  .nav-toggle { display: block; left: auto; width: 34px; }
  .nav-group:hover .nav-menu { display: none; } .nav-group.open .nav-menu { display: flex; }
}
@media (max-width: 900px) { .nav-menu { position: static; min-width: 0; width: 100%; box-shadow: none; background: rgba(0,0,0,.25); } .nav-group { flex-wrap: wrap; width: 100%; } }

/* ---------- Office du Tourisme ---------- */
body[data-skin="tour"] .backdrop { opacity: 1; background: #1a1710 url("../media/hub/hero.jpg") center 40% / cover no-repeat fixed; }
body[data-skin="tour"] .backdrop::after { content: ""; position: absolute; inset: 0; background: rgba(12,12,16,.55); }
body[data-skin="tour"] #app .section { position: relative; background: rgba(28,29,33,.92); box-sizing: border-box; padding-left: 48px; padding-right: 48px; border-left: 1px solid rgba(212,168,75,.3); border-right: 1px solid rgba(212,168,75,.3); }
body[data-skin="tour"] #app .section + .section { margin-top: 0; }
.tr-hero { position: relative; min-height: clamp(380px, 34vw, 640px); display: flex; align-items: flex-end; background: var(--srk-navy, #1b2a5a) url("../media/hub/hero.jpg") center 55% / cover no-repeat; color: #fff; border-bottom: 4px solid var(--srk-gold, #d4a84b); }
.tr-hero::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(8,8,12,0) 30%, rgba(8,8,12,.85) 100%); }
.tr-hero-in { position: relative; z-index: 2; padding-top: 40px; padding-bottom: 36px; max-width: 1320px; }
.tr-title { font-size: clamp(44px, 7vw, 96px); margin: 4px 0 8px; }
.tr-hero .lead { max-width: 760px; }
.tr-cta { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 18px; }
.tr-lieux { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 14px; margin-top: 18px; }
.tr-lieu { display: grid; grid-template-columns: 64px 1fr; gap: 14px; padding: 16px; border-radius: 14px; background: rgba(255,255,255,.04); box-shadow: inset 0 0 0 1px rgba(255,255,255,.1); border-left: 4px solid var(--srk-gold, #d4a84b); animation: hub-in .5s calc(var(--i) * 60ms) both; }
.tr-sign { display: grid; place-items: center; width: 64px; height: 64px; border-radius: 12px; background: var(--srk-gold, #d4a84b); color: #1b1408; font: 800 22px/1 var(--f-display); }
.tr-lieu small { font: 700 11px/1 var(--f-lcd); letter-spacing: .18em; text-transform: uppercase; color: var(--srk-gold, #d4a84b); }
.tr-lieu h3 { margin: 4px 0 6px; font: 800 22px/1.1 var(--f-display); text-transform: uppercase; color: #fff; }
.tr-lieu p { margin: 0 0 8px; color: #ddd; font-size: 14px; line-height: 1.5; }
.tr-stars { font-size: 14px; color: #ffd21f; letter-spacing: .1em; }
.tr-circuits { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 16px; margin-top: 18px; }
.tr-circuit { padding: 18px; border-radius: 14px; background: linear-gradient(180deg, rgba(212,168,75,.14), rgba(0,0,0,.25)); box-shadow: inset 0 0 0 1px rgba(212,168,75,.35); animation: hub-in .5s calc(var(--i) * 80ms) both; }
.tr-circuit-head { display: flex; gap: 12px; align-items: center; margin-bottom: 10px; } .tr-circuit-head span { font-size: 34px; }
.tr-circuit-head small { font: 700 11px/1 var(--f-lcd); letter-spacing: .16em; text-transform: uppercase; color: var(--srk-gold, #d4a84b); }
.tr-circuit h3 { margin: 4px 0 0; font: 800 22px/1.1 var(--f-display); text-transform: uppercase; color: #fff; }
.tr-circuit ol { margin: 0; padding-left: 22px; color: #e6e0d0; font-size: 14px; line-height: 1.55; } .tr-circuit ol li { margin-bottom: 6px; } .tr-circuit ol li::marker { color: var(--srk-gold, #d4a84b); font-weight: 800; }
.tr-circuit-note { margin: 12px 0 0; font-style: italic; color: var(--gris); font-size: 13px; }
.tr-infos { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 12px; margin-top: 18px; }
.tr-info { padding: 14px 16px; border-radius: 12px; background: rgba(255,255,255,.04); box-shadow: inset 0 0 0 1px rgba(255,255,255,.1); }
.tr-info span { font-size: 26px; display: block; margin-bottom: 6px; } .tr-info strong { display: block; font: 800 16px/1.1 var(--f-display); text-transform: uppercase; color: var(--srk-gold, #d4a84b); margin-bottom: 6px; } .tr-info p { margin: 0; color: #ddd; font-size: 14px; line-height: 1.5; }
.tr-meteo { display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: 10px; margin-top: 10px; }
.tr-meteo div { display: grid; gap: 2px; justify-items: center; padding: 12px; border-radius: 12px; background: rgba(0,0,0,.3); } .tr-meteo strong { font: 800 13px/1 var(--f-display); text-transform: uppercase; color: #fff; } .tr-meteo span { font-size: 28px; } .tr-meteo b { font: 400 22px/1 var(--f-lcd); color: #ffd21f; } .tr-meteo small { font-size: 12px; }
.tr-hebs { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 12px; margin-top: 18px; }
.tr-heb { padding: 14px 16px; border-radius: 12px; background: rgba(255,255,255,.04); box-shadow: inset 0 0 0 1px rgba(255,255,255,.1); }
.tr-heb-head { display: flex; justify-content: space-between; gap: 10px; align-items: baseline; } .tr-heb h3 { margin: 0 0 6px; font: 800 18px/1.1 var(--f-display); text-transform: uppercase; color: #fff; }
.tr-heb p { margin: 0 0 8px; color: #ddd; font-size: 14px; line-height: 1.5; } .tr-heb small { font: 700 11px/1 var(--f-lcd); letter-spacing: .14em; text-transform: uppercase; } .tr-heb small.ok { color: #2ec27e; } .tr-heb small.off { color: #ff6a6a; }
.tr-aviss { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 12px; margin-top: 18px; }
.tr-avis { margin: 0; padding: 16px 18px; border-radius: 12px; background: rgba(0,0,0,.3); border-left: 4px solid #ffd21f; } .tr-avis p { margin: 0 0 10px; font-style: italic; color: #f0ece4; line-height: 1.5; } .tr-avis footer { font-size: 13px; color: var(--gris); }
@media (max-width: 640px) { body[data-skin="tour"] #app .section { padding-left: var(--gutter); padding-right: var(--gutter); } }
.nav .nav-menu a { white-space: nowrap; }
@media (max-width: 1500px) and (min-width: 901px) { .nav a { font-size: 16px; padding: 8px 9px; } .nav-ic { width: 24px; height: 24px; } }

/* ---------- Compte = Ambassade (bouton en haut à droite) ---------- */
.acc-me { gap: 9px; padding-right: 12px; }
.acc-lab { display: grid; line-height: 1.05; }
.acc-lab b { font: 800 14px/1 var(--f-display); text-transform: uppercase; letter-spacing: .06em; color: var(--srk-gold, #d4a84b); }
.acc-lab small { font-size: 11px; color: var(--gris); max-width: 150px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.acc-me.guest .acc-av { background: var(--bitume-2); font-size: 15px; }
@media (max-width: 640px) { .acc-lab small { display: none; } }

/* ---------- Espace membre : onglets ---------- */
.me-tabs { display: flex; flex-wrap: wrap; gap: 8px; margin: 6px 0 26px; padding: 10px 0; border-top: 1px solid rgba(212,168,75,.35); border-bottom: 1px solid rgba(212,168,75,.35); position: sticky; top: calc(var(--bar-h) - 24px); z-index: 5; background: rgba(28,29,33,.96); backdrop-filter: blur(6px); }
.me-tab { display: inline-flex; align-items: center; gap: 8px; padding: 10px 16px; border-radius: 999px; border: 1px solid rgba(255,255,255,.14); color: #e6e6ee; font: 700 13px/1 var(--f-display); letter-spacing: .08em; text-transform: uppercase; text-decoration: none; background: rgba(255,255,255,.04); }
.me-tab span { font-size: 16px; } .me-tab b { font: 700 11px/1 var(--f-lcd); color: var(--srk-gold, #d4a84b); }
.me-tab:hover { border-color: var(--srk-gold, #d4a84b); }
.me-tab.on { background: var(--srk-gold, #d4a84b); border-color: var(--srk-gold, #d4a84b); color: #1b1408; } .me-tab.on b { color: #1b1408; }
.me-block:first-of-type { margin-top: 0; }

/* ---------- Ma collection v2 ---------- */
.skc { margin-top: 0; }
.skc-hero { display: grid; grid-template-columns: 170px 1fr; gap: 26px; align-items: center; padding: 22px; border-radius: 18px; background: radial-gradient(ellipse at 0% 50%, rgba(242,194,48,.18), transparent 60%), rgba(255,255,255,.04); box-shadow: inset 0 0 0 1px rgba(255,255,255,.1); }
.skc-ring { --p: 0; position: relative; width: 170px; height: 170px; border-radius: 50%; display: grid; place-items: center; background: conic-gradient(#f2c230 calc(var(--p) * 1%), rgba(255,255,255,.08) 0); box-shadow: 0 0 40px rgba(242,194,48,.25); }
.skc-ring::before { content: ""; position: absolute; inset: 14px; border-radius: 50%; background: #1c1d21; }
.skc-ring b, .skc-ring span { position: relative; } .skc-ring b { font: 900 44px/1 var(--f-display); color: #fff; } .skc-ring b small { font-size: 20px; color: #f2c230; } .skc-ring span { font: 700 11px/1 var(--f-lcd); letter-spacing: .16em; color: var(--gris); margin-top: 4px; }
.skc-hero-txt .h2 { margin: 4px 0 10px; }
.skc-stats { display: flex; flex-wrap: wrap; gap: 8px 22px; margin: 0 0 14px; color: var(--gris); font-size: 14px; } .skc-stats b { font: 900 22px/1 var(--f-display); color: #fff; margin-right: 4px; } .skc-stats .hot b { color: #ff3d7f; }
.skc-actions { display: flex; gap: 10px; flex-wrap: wrap; margin: 0; }
.skc-binders { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 10px; margin: 18px 0 8px; }
.skc-binder { display: grid; grid-template-columns: 42px 1fr; gap: 10px; align-items: center; padding: 10px 12px; border: 0; border-radius: 12px; background: linear-gradient(135deg, color-mix(in srgb, var(--set) 28%, #1c1d21), rgba(255,255,255,.03)); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--set) 45%, transparent); color: #fff; text-align: left; cursor: pointer; font: inherit; transition: transform .15s; }
.skc-binder:hover { transform: translateY(-3px); } .skc-binder.done { box-shadow: inset 0 0 0 2px var(--set), 0 0 18px color-mix(in srgb, var(--set) 40%, transparent); }
.skc-binder-ico { display: grid; place-items: center; width: 42px; height: 42px; border-radius: 10px; background: rgba(0,0,0,.3); font-size: 22px; }
.skc-binder-txt { display: grid; gap: 3px; min-width: 0; } .skc-binder-txt strong { font: 800 14px/1.1 var(--f-display); text-transform: uppercase; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .skc-binder-txt small { font: 700 10px/1 var(--f-lcd); letter-spacing: .12em; color: #ddd; }
.skc-binder-bar { display: block; height: 5px; border-radius: 99px; background: rgba(255,255,255,.12); overflow: hidden; } .skc-binder-bar u { display: block; height: 100%; background: var(--set, #f2c230); }
.skc-block { margin-top: 26px; padding: 18px; border-radius: 16px; background: rgba(255,255,255,.04); box-shadow: inset 0 0 0 1px rgba(255,255,255,.1); }
.skc-block .me-title { margin-bottom: 12px; align-items: baseline; flex-wrap: wrap; gap: 6px 16px; } .skc-block .h3-sub { margin: 0; }
.skc-empty { margin: 0; color: var(--gris); font-style: italic; }
.skc-doubles { display: grid; grid-template-columns: repeat(auto-fill, minmax(118px, 1fr)); gap: 14px; }
.skc-double { position: relative; display: grid; gap: 6px; padding: 0; border: 0; background: none; color: #fff; cursor: pointer; text-align: center; font: inherit; }
.sk-thumb { --t: #c9c9c9; position: relative; display: block; width: 100%; aspect-ratio: 63 / 88; border-radius: 8px; overflow: hidden; background: #1b1b24; box-shadow: 0 10px 22px rgba(0,0,0,.55), inset 0 0 0 1px rgba(255,255,255,.12); transition: transform .2s, box-shadow .2s; }
.sk-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; } .sk-thumb img.sk-thumb-back { opacity: .7; }
.sk-thumb i { position: absolute; inset: 0; display: grid; place-items: center; font: 900 40px/1 var(--f-display); font-style: normal; color: rgba(255,255,255,.55); text-shadow: 0 2px 8px #000; }
.sk-thumb.gift { background: linear-gradient(135deg, #5a1a8f, #ff3d7f); } .sk-thumb.gift i { font-size: 34px; }
.sk-thumb.sm { width: 56px; flex: none; border-radius: 6px; }
.skc-double:hover .sk-thumb { transform: translateY(-5px) rotate(-1.5deg); box-shadow: 0 18px 34px rgba(0,0,0,.65), 0 0 22px color-mix(in srgb, var(--t) 55%, transparent); }
.skc-double > b { position: absolute; top: -8px; right: -6px; z-index: 2; padding: 5px 9px; border-radius: 999px; background: #f2c230; color: #111; font: 800 13px/1 var(--f-lcd); box-shadow: 0 4px 10px rgba(0,0,0,.5); }
.skc-double small { font-size: 12px; line-height: 1.2; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.skc-two { display: grid; grid-template-columns: 1.3fr 1fr; gap: 16px; margin-top: 26px; align-items: start; }
.skc-two .skc-block { margin-top: 0; }
.skc-guild { padding: 18px; border-radius: 16px; background: rgba(255,255,255,.04); box-shadow: inset 0 0 0 1px rgba(255,255,255,.1); }
.skc-guild.on { background: linear-gradient(135deg, rgba(242,194,48,.14), rgba(255,255,255,.03)); box-shadow: inset 0 0 0 1px rgba(242,194,48,.4); }
.skc-guild h3 { margin: 4px 0 6px; font: 900 clamp(22px, 2.6vw, 32px)/1 var(--f-display); text-transform: uppercase; color: #fff; }
.skc-devise { margin: 0 0 8px; color: #ffb45a; font-style: italic; }
.skc-guild-head { display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; align-items: flex-start; }
.skc-guild-union { min-width: 180px; display: grid; gap: 4px; } .skc-guild-union b { font: 900 34px/1 var(--f-display); color: #f2c230; } .skc-guild-union small { color: var(--gris); }
.skc-av { display: inline-grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; background: #f2c230; color: #141414; font: 800 12px/1 var(--f-display); box-shadow: 0 0 0 2px #1c1d21; }
.skc-av.more { background: var(--bitume-2); color: #fff; font-size: 11px; }
.skc-avs { display: flex; } .skc-avs .skc-av + .skc-av { margin-left: -8px; }
.skc-membres { list-style: none; margin: 14px 0 0; padding: 0; display: grid; gap: 8px; }
.skc-membres li { display: grid; grid-template-columns: 32px 1fr 110px 36px; gap: 10px; align-items: center; } .skc-membres li span { font-weight: 600; } .skc-membres li b { font: 700 12px/1 var(--f-lcd); color: #f2c230; text-align: right; }
.skc-guild-foot { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; margin: 12px 0 0; }
.skc-guild-list { list-style: none; margin: 14px 0 0; padding: 0; display: grid; gap: 8px; }
.skc-guild-list li { display: grid; grid-template-columns: auto 1fr auto; gap: 12px; align-items: center; padding: 10px 12px; border-radius: 10px; background: rgba(0,0,0,.25); }
.skc-guild-list strong { display: block; font: 800 16px/1 var(--f-display); text-transform: uppercase; } .skc-guild-list small { color: var(--gris); font-size: 12px; }
.skc-top { list-style: none; margin: 10px 0 0; padding: 0; display: grid; gap: 8px; }
.skc-top li { display: grid; grid-template-columns: 28px 1fr 90px 36px; gap: 10px; align-items: center; } .skc-top strong { font: 800 15px/1 var(--f-display); text-transform: uppercase; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .skc-top b { font: 700 12px/1 var(--f-lcd); color: #f2c230; text-align: right; }
.skc-trades h4 { margin: 16px 0 8px; font: 800 13px/1 var(--f-display); text-transform: uppercase; letter-spacing: .08em; color: var(--gris); }
.skc-trade-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.skc-trade { display: grid; grid-template-columns: auto 1fr auto; gap: 14px; align-items: center; padding: 10px 12px; border-radius: 12px; background: rgba(0,0,0,.25); box-shadow: inset 0 0 0 1px rgba(255,255,255,.08); }
.skc-trade.accepted { border-left: 4px solid #2ec27e; } .skc-trade.refused, .skc-trade.cancelled { border-left: 4px solid rgba(255,255,255,.2); opacity: .75; }
.skc-trade-cards { display: flex; align-items: center; gap: 8px; }
.skc-arrow { font-size: 22px; color: #f2c230; } .skc-arrow.big { font-size: 34px; }
.skc-trade-txt { font-size: 14px; line-height: 1.4; } .skc-trade-txt i { font-style: normal; color: #f2c230; } .skc-trade-txt small { display: block; font: 700 10px/1.4 var(--f-lcd); letter-spacing: .14em; text-transform: uppercase; color: var(--gris); }
.skc-trade-form { display: grid; gap: 14px; }
.skc-trade-pick { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.skc-trade-pick label { display: grid; gap: 4px; font: 700 12px/1.3 var(--f-display); text-transform: uppercase; letter-spacing: .06em; color: #ddd; } .skc-trade-pick label small { font: 400 11px/1.2 var(--f-body); text-transform: none; letter-spacing: 0; color: var(--gris); } .skc-trade-pick select { width: 100%; }
.skc-trade-preview { display: grid; grid-template-columns: 110px auto 110px 1fr; gap: 14px; align-items: center; padding: 12px; border-radius: 12px; background: rgba(0,0,0,.25); }
.skc-trade-preview .btn { justify-self: end; }
@media (max-width: 900px) { .skc-two { grid-template-columns: 1fr; } .skc-trade-pick { grid-template-columns: 1fr; } .skc-hero { grid-template-columns: 1fr; justify-items: center; text-align: center; } .skc-stats, .skc-actions { justify-content: center; } .skc-trade-preview { grid-template-columns: 90px auto 90px; } .skc-trade-preview .btn { grid-column: 1 / -1; justify-self: stretch; } .skc-trade { grid-template-columns: 1fr; } }
.amb-hero.compact { min-height: clamp(300px, 24vw, 440px); }
.amb-hero.compact .amb-fest { display: none; }

/* ---------- Serkadex : dernières prises, NOUVEAU, doublons, manquantes, vitrine ---------- */
.skc-recent { margin-top: 18px; }
.skc-recent-rail { display: grid; grid-auto-flow: column; grid-auto-columns: 112px; gap: 12px; overflow-x: auto; padding: 6px 2px 10px; scroll-snap-type: x proximity; }
.skc-recent-card { position: relative; display: grid; gap: 4px; padding: 0; border: 0; background: none; color: #fff; cursor: pointer; text-align: center; font: inherit; scroll-snap-align: start; }
.skc-recent-card small { font-size: 12px; line-height: 1.2; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .skc-recent-card em { font: 400 10px/1 var(--f-lcd); font-style: normal; color: var(--gris); letter-spacing: .08em; }
.skc-recent-card:hover .sk-thumb { transform: translateY(-4px); }
.skc-newtag, .bd-new { position: absolute; top: 10px; left: -30px; z-index: 3; transform: rotate(-35deg); padding: 4px 34px; background: #ff3d7f; color: #fff; font: 800 9px/1 var(--f-lcd); letter-spacing: .18em; text-transform: uppercase; font-style: normal; box-shadow: 0 3px 8px rgba(0,0,0,.5); pointer-events: none; }
.skc-recent-card.is-new .sk-thumb, .bd-pocket.is-new { box-shadow: 0 0 0 2px #ff3d7f, 0 0 20px rgba(255,61,127,.45); }
.bd-qty { position: absolute; right: 6px; bottom: 6px; z-index: 3; padding: 3px 7px; border-radius: 999px; background: #f2c230; color: #111; font: 800 11px/1 var(--f-lcd); font-style: normal; box-shadow: 0 3px 8px rgba(0,0,0,.5); }
.sk-ownline { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin: 6px 0; font-size: 13px; color: var(--gris); } .sk-ownline i { font-style: italic; }
.bd-missing { margin-top: 18px; padding: 14px 16px; border-radius: 12px; background: rgba(0,0,0,.28); }
.bd-missing-rail { display: grid; grid-auto-flow: column; grid-auto-columns: 74px; gap: 10px; overflow-x: auto; padding: 6px 2px 8px; }
.bd-miss { position: relative; display: grid; gap: 3px; text-align: center; color: var(--gris); font-size: 10px; }
.bd-miss img { width: 100%; aspect-ratio: 63 / 88; object-fit: cover; border-radius: 5px; opacity: .55; filter: grayscale(.4); }
.bd-miss b { position: absolute; top: 4px; left: 4px; padding: 2px 5px; border-radius: 4px; background: rgba(0,0,0,.6); color: #fff; font: 700 10px/1 var(--f-lcd); }
.bd-miss small { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bd-miss.more { display: grid; place-items: center; aspect-ratio: 63 / 88; border-radius: 5px; background: rgba(255,255,255,.06); } .bd-miss.more b { position: static; background: none; font-size: 16px; }
.bd-missing .muted { margin: 8px 0 0; }
.sk-panel-grid { display: grid; grid-template-columns: 150px 1fr; gap: 22px; align-items: center; }
.sk-panel-ring { width: 150px; height: 150px; } .sk-panel-ring b { font-size: 40px; }
@media (max-width: 700px) { .sk-panel-grid { grid-template-columns: 1fr; justify-items: center; } }

/* ---------- Espace membre v3 : en-tête compact, onglets explicites ---------- */
.me-head.compact { gap: 14px; margin-bottom: 10px; }
.me-head.compact .me-av { width: 54px; height: 54px; font-size: 20px; }
.me-name { margin: 0 0 6px; font: 900 clamp(22px, 2.6vw, 32px)/1 var(--f-display); text-transform: uppercase; color: #fff; }
.me-name small { font: 400 12px/1 var(--f-lcd); letter-spacing: .1em; text-transform: none; color: var(--gris); margin-left: 8px; }
.me-head.compact .me-badges { margin: 0; }
.me-tabs { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 10px; margin: 14px 0 26px; padding: 12px 0; border-top: 1px solid rgba(212,168,75,.35); border-bottom: 1px solid rgba(212,168,75,.35); position: static; background: none; backdrop-filter: none; }
.me-tab { display: grid; grid-template-columns: 46px 1fr; gap: 12px; align-items: center; padding: 12px 14px; border-radius: 14px; border: 1px solid rgba(255,255,255,.12); background: rgba(255,255,255,.04); color: #e6e6ee; text-decoration: none; text-transform: none; letter-spacing: 0; font: inherit; transition: transform .15s, border-color .15s, background .15s; }
.me-tab:hover { transform: translateY(-2px); border-color: var(--srk-gold, #d4a84b); background: rgba(255,255,255,.07); }
.me-tab.on { background: linear-gradient(135deg, rgba(212,168,75,.35), rgba(212,168,75,.12)); border-color: var(--srk-gold, #d4a84b); color: #fff; box-shadow: 0 10px 26px rgba(0,0,0,.35); }
.me-tab-ic { display: grid; place-items: center; width: 46px; height: 46px; border-radius: 12px; background: rgba(0,0,0,.35); overflow: hidden; }
.me-tab-ic img { width: 34px; height: 34px; object-fit: contain; filter: drop-shadow(0 2px 3px rgba(0,0,0,.6)); }
.me-tab-ic .me-tab-logo { width: 44px; height: auto; }
.me-tab-emo { font-size: 24px; }
.me-tab-txt { display: grid; gap: 2px; min-width: 0; }
.me-tab-txt strong { font: 800 15px/1.1 var(--f-display); text-transform: uppercase; letter-spacing: .04em; }
.me-tab-txt small { font-size: 11.5px; line-height: 1.3; color: var(--gris); }
.me-tab.on .me-tab-txt small { color: #f3ebd9; }
.me-tab-txt b { justify-self: start; margin-top: 3px; padding: 3px 8px; border-radius: 999px; background: rgba(0,0,0,.35); font: 700 10px/1 var(--f-lcd); letter-spacing: .12em; text-transform: uppercase; color: var(--srk-gold, #d4a84b); }
.me-tab.on .me-tab-txt b { background: #1b1408; color: #f2c230; }
.me-tab.is-logo.on .me-tab-ic { background: #fff; }

/* ---------- Rebonds (bas de page) ---------- */
.rb { margin-top: 34px; }
.rb-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 10px; margin-top: 16px; }
.rb-tile { display: grid; grid-template-columns: 40px 1fr; gap: 12px; align-items: center; padding: 10px 12px; border-radius: 12px; background: rgba(255,255,255,.04); box-shadow: inset 0 0 0 1px rgba(255,255,255,.1); color: #e6e6ee; text-decoration: none; transition: transform .15s, box-shadow .15s; }
.rb-tile:hover { transform: translateY(-2px); box-shadow: inset 0 0 0 1px var(--jaune, #f2c230); }
.rb-ic { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 10px; background: rgba(0,0,0,.35); font-size: 22px; }
.rb-ic img { width: 30px; height: 30px; object-fit: contain; filter: drop-shadow(0 2px 3px rgba(0,0,0,.6)); }
.rb-txt { display: grid; gap: 2px; min-width: 0; } .rb-txt strong { font: 800 14px/1.1 var(--f-display); text-transform: uppercase; letter-spacing: .04em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .rb-txt small { font-size: 11.5px; color: var(--gris); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
body[data-skin="amb"] .rb, body[data-skin="tour"] .rb { background: rgba(28,29,33,.94); }

/* ---------- Accueil v2 : la une ---------- */
.hub-hero-v2 { height: clamp(420px, 46vw, 760px); display: grid; align-items: end; }
.hub-hero-v2::before { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(10,10,14,.82) 0%, rgba(10,10,14,.55) 45%, rgba(10,10,14,.15) 100%), linear-gradient(to top, rgba(28,29,33,.95), transparent 45%); z-index: 1; }
.hub-hero-v2::after { display: none; }
.hub-hero-over { position: relative; z-index: 2; padding: 40px var(--gutter) 44px; max-width: 1320px; width: 100%; box-sizing: border-box; display: grid; gap: 10px; justify-items: start; }
.hub-hero-over .kicker { color: var(--jaune); }
.hub-h1 { margin: 0; font: 900 clamp(54px, 8vw, 128px)/.95 var(--f-display); text-transform: uppercase; color: #fff; letter-spacing: -.01em; text-shadow: 0 6px 30px rgba(0,0,0,.6); }
.hub-hero-lead { margin: 4px 0 6px; max-width: 680px; font: 500 clamp(15px, 1.3vw, 19px)/1.45 var(--f-body); color: #eee; text-shadow: 0 2px 8px rgba(0,0,0,.6); }
.hub-hero-lead b { color: var(--jaune); }
.hub-hero-cta { display: flex; flex-wrap: wrap; gap: 10px; margin: 0; }
.hub-mot-over { position: absolute; right: var(--gutter); bottom: 44px; z-index: 2; max-width: 420px; }
@media (max-width: 1100px) { .hub-mot-over { position: static; margin: 0 var(--gutter) 24px; max-width: none; } .hub-hero-v2 { height: auto; min-height: 420px; } }
/* en ce moment */
.hub-nowrow { padding-top: 22px; padding-bottom: 6px; }
.hub-nows { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 12px; }
.hub-now { display: grid; grid-template-columns: 56px 1fr; gap: 12px; align-items: center; padding: 12px 14px; border-radius: 14px; border: 0; background: rgba(255,255,255,.05); box-shadow: inset 0 0 0 1px rgba(255,255,255,.12); color: #fff; text-decoration: none; text-align: left; cursor: pointer; font: inherit; transition: transform .15s, box-shadow .15s; }
.hub-now:hover { transform: translateY(-3px); box-shadow: inset 0 0 0 1px var(--jaune), 0 14px 30px rgba(0,0,0,.4); }
.hub-now-ic { display: grid; place-items: center; width: 56px; height: 56px; border-radius: 12px; background: rgba(0,0,0,.4); font-size: 26px; overflow: hidden; }
.hub-now-ic img { width: 40px; height: 40px; object-fit: contain; filter: drop-shadow(0 2px 3px rgba(0,0,0,.6)); }
.hub-now-card { width: 56px; height: 78px; border-radius: 6px; } .hub-now-card img { width: 100%; height: 100%; object-fit: cover; }
.hub-now-txt { display: grid; gap: 3px; min-width: 0; }
.hub-now-txt small { font: 700 10px/1.3 var(--f-lcd); letter-spacing: .14em; text-transform: uppercase; color: var(--jaune); }
.hub-now-txt strong { font: 800 15px/1.15 var(--f-display); text-transform: uppercase; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.hub-now-txt em { font-style: normal; font-size: 12px; color: var(--gris); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hub-now.n-tv .hub-now-txt small { color: #ff8a00; } .hub-now.n-fest .hub-now-txt small { color: #ff3d7f; } .hub-now.n-sk .hub-now-txt small { color: #f2c230; } .hub-now.n-fm .hub-now-txt small { color: var(--lcd, #7fffb0); }
/* à la une */
.hub-une-grid { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 16px; align-items: start; }
.hub-big { position: relative; display: block; min-height: 420px; border-radius: 16px; overflow: hidden; background: var(--bitume); color: #fff; text-decoration: none; box-shadow: 0 16px 40px rgba(0,0,0,.45); }
.hub-big img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform .5s; } .hub-big:hover img { transform: scale(1.04); }
.hub-big-txt { position: absolute; inset: 0; display: flex; flex-direction: column; justify-content: flex-end; gap: 6px; padding: 24px; background: linear-gradient(to top, rgba(0,0,0,.92) 25%, rgba(0,0,0,.1) 70%); }
.hub-big-txt small { font: 700 11px/1 var(--f-lcd); letter-spacing: .2em; text-transform: uppercase; color: var(--jaune); } .hub-big-txt small i { font-style: normal; color: #ff3d7f; }
.hub-big-txt strong { font: 900 clamp(24px, 2.6vw, 38px)/1.05 var(--f-display); text-transform: uppercase; }
.hub-big-txt span { color: #ddd; font-size: 14px; line-height: 1.45; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.hub-feed { grid-template-columns: 1fr; gap: 10px; }
.hub-feed .feed-item strong { font-size: 17px; } .hub-feed .fi-text { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.hub-more { margin: 16px 0 0; }
/* artiste du jour + dernière sortie */
.hub-duo { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.hub-art { position: relative; display: block; min-height: 340px; border-radius: 16px; overflow: hidden; color: #fff; text-decoration: none; box-shadow: 0 16px 40px rgba(0,0,0,.45); }
.hub-art img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: top; transition: transform .5s; } .hub-art:hover img { transform: scale(1.04); }
.hub-art-txt { position: absolute; inset: 0; display: flex; flex-direction: column; justify-content: flex-end; gap: 4px; padding: 22px; background: linear-gradient(to top, rgba(0,0,0,.9) 20%, transparent 65%); }
.hub-art-txt small { font: 700 11px/1 var(--f-lcd); letter-spacing: .2em; text-transform: uppercase; color: var(--acc, #f2c230); }
.hub-art-txt strong { font: 900 clamp(26px, 2.8vw, 40px)/1 var(--f-display); text-transform: uppercase; } .hub-art-txt em { font-style: normal; color: #ddd; font-size: 14px; } .hub-art-txt q { font: italic 500 14px/1.4 Georgia, serif; color: #eee; margin-top: 6px; }
.hub-last { display: grid; grid-template-columns: minmax(160px, 240px) 1fr; gap: 18px; align-items: center; padding: 18px; border-radius: 16px; background: rgba(255,255,255,.04); box-shadow: inset 0 0 0 1px rgba(255,255,255,.1); }
.hub-last img { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: 10px; box-shadow: 0 14px 30px rgba(0,0,0,.5); }
.hub-last-txt { display: grid; gap: 6px; } .hub-last-txt small { font: 700 11px/1 var(--f-lcd); letter-spacing: .2em; text-transform: uppercase; color: var(--jaune); }
.hub-last-txt strong { font: 900 clamp(22px, 2.2vw, 30px)/1.05 var(--f-display); text-transform: uppercase; color: #fff; } .hub-last-txt em { font-style: normal; color: var(--gris); font-size: 13px; } .hub-last-txt p { margin: 0; color: #ddd; font-size: 14px; line-height: 1.45; }
.hub-last-act { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 6px !important; }
@media (max-width: 900px) { .hub-une-grid, .hub-duo { grid-template-columns: 1fr; } .hub-big { min-height: 300px; } .hub-last { grid-template-columns: 120px 1fr; } }
@media (min-width: 1101px) { .hub-hero-over { padding-right: 470px; } }
/* BO comptes : le bouton Enregistrer aussi dans la première colonne (la table déborde à droite sur les écrans courants), et la colonne d'action collée à droite */
.adm-save-left { display: block; margin-top: 6px; }
.adm-users td:last-child, .adm-users th:last-child { position: sticky; right: 0; background: var(--bitume); box-shadow: -8px 0 12px rgba(0,0,0,.35); }

/* ---------- Serkadex · Le Seigneur des Bifles : cuir vert, dorures elfiques, parchemin ---------- */
.bd-sdb { --cover: #1f5a3a; --cover2: #0f2e1d; --page: #efe6cf; --page2: #e2d4b2; --ink: #2a2214; --ring: #d4a84b; --font-h: "Cormorant Garamond", Georgia, serif; }
.bd-cover.bd-sdb { background: radial-gradient(ellipse at 50% 20%, rgba(212,168,75,.25), transparent 55%), repeating-linear-gradient(135deg, rgba(0,0,0,.06) 0 2px, transparent 2px 7px), linear-gradient(180deg, var(--cover), var(--cover2)); }
.bd-sdb .bd-cover-band { background: linear-gradient(90deg, #d4a84b, #f3dc9a 50%, #d4a84b); color: #1f1708; }
.bd-sdb .bd-title { font-family: "Cormorant Garamond", Georgia, serif; font-weight: 700; letter-spacing: .04em; }
.bd-sdb .bd-stamp { color: #d4a84b; border-color: #d4a84b; }
.bd-sdb .bd-page { background: radial-gradient(ellipse at 50% 0%, rgba(212,168,75,.18), transparent 60%), linear-gradient(180deg, var(--page), var(--page2)); color: var(--ink); }
.bd-sdb .bd-page-head { border-bottom-color: #d4a84b; }
.bd-sdb .bd-pocket { box-shadow: inset 0 0 0 2px rgba(212,168,75,.6), inset 0 0 14px rgba(31,90,58,.25); }
.bd-sdb .bd-ghost { border-color: rgba(42,34,20,.35); color: #5a4a2a; }
/* ---------- Serkadex · Sèrka Cosplay rétro : jaquette VHS, bandes bleu/rouge, étiquette location ---------- */
.bd-cosplay { --cover: #1b1b22; --cover2: #0b0b10; --page: #f3efe4; --page2: #e7e0cf; --ink: #1b1b22; --ring: #ff4d2e; --font-h: "Audiowide", Impact, sans-serif; }
.bd-cover.bd-cosplay { background: linear-gradient(180deg, transparent 0 62%, #2f6bff 62% 66%, #ff4d2e 66% 70%, #ffd21f 70% 72%, transparent 72%), repeating-linear-gradient(0deg, rgba(255,255,255,.03) 0 2px, transparent 2px 4px), linear-gradient(180deg, var(--cover), var(--cover2)); }
.bd-cosplay .bd-cover-band { background: linear-gradient(90deg, #2f6bff, #ff4d2e); color: #fff; }
.bd-cosplay .bd-title { font-family: "Audiowide", Impact, sans-serif; font-weight: 400; letter-spacing: .06em; text-transform: uppercase; }
.bd-cosplay .bd-stamp { color: #ffd21f; border-color: #ffd21f; }
.bd-cosplay .bd-page { background: repeating-linear-gradient(0deg, rgba(0,0,0,.025) 0 1px, transparent 1px 3px), linear-gradient(180deg, var(--page), var(--page2)); color: var(--ink); }
.bd-cosplay .bd-page-head { border-bottom-color: #ff4d2e; }
.bd-cosplay .bd-pocket { box-shadow: inset 0 0 0 2px rgba(47,107,255,.5), inset 0 0 12px rgba(255,77,46,.2); }