/* Hub Jeudirole Musique — styles de la page d'accueil et de la page 404.
   Aucune dépendance externe : les polices sont dans assets/fonts/. */

/* ---------- Polices (sous-ensemble latin, OFL — voir assets/fonts/LICENCES.md) ---------- */
@font-face { font-family: "Cinzel"; font-style: normal; font-weight: 400; font-display: swap; src: url("assets/fonts/cinzel-400.woff2") format("woff2"); }
@font-face { font-family: "IM Fell English"; font-style: italic; font-weight: 400; font-display: swap; src: url("assets/fonts/im-fell-english-italic-400.woff2") format("woff2"); }
@font-face { font-family: "Space Grotesk"; font-style: normal; font-weight: 300 700; font-display: swap; src: url("assets/fonts/space-grotesk.woff2") format("woff2"); }
@font-face { font-family: "Space Mono"; font-style: normal; font-weight: 400; font-display: swap; src: url("assets/fonts/space-mono-400.woff2") format("woff2"); }
@font-face { font-family: "Barlow Condensed"; font-style: italic; font-weight: 900; font-display: swap; src: url("assets/fonts/barlow-condensed-italic-900.woff2") format("woff2"); }
@font-face { font-family: "Orbitron"; font-style: normal; font-weight: 700; font-display: swap; src: url("assets/fonts/orbitron-700.woff2") format("woff2"); }
@font-face { font-family: "Bricolage Grotesque"; font-style: normal; font-weight: 700; font-display: swap; src: url("assets/fonts/bricolage-grotesque-700.woff2") format("woff2"); }

/* ---------- Jetons de design ---------- */
:root {
  --bg: #0a0a0c;
  --bg-glow: #19191e;
  --surface: #0e0e11;
  --surface-soft: #0b0b0d;
  --line: #292524;
  --line-strong: #44403c;
  --line-card: rgba(180, 160, 120, 0.14);
  --line-card-hover: rgba(180, 160, 120, 0.45);
  --line-dashed: rgba(180, 160, 120, 0.22);

  --text: #d1d1c1;
  --text-soft: #d6d3d1;
  --text-strong: #f5f5f4;
  --text-heading: #e7e5e4;
  --text-gold: #fef3c7;
  --text-hover: #fde68a;
  --muted: #a8a29e;     /* 7,5:1 sur --bg */
  --faint: #8f8a80;     /* 5,6:1 sur --surface-soft */

  --hub-accent: #d97706;    /* accent du hub */

  --font-body: "Space Grotesk", system-ui, sans-serif;
  --font-title: "Cinzel", serif;
  --font-quote: "IM Fell English", serif;
  --font-mono: "Space Mono", ui-monospace, monospace;

  --gutter: 24px;
  --max: 1400px;
  --radius: 2px;
  --ease: cubic-bezier(0.4, 0, 0.2, 1);
}

/* ---------- Base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body {
  margin: 0;
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  background: var(--bg) radial-gradient(ellipse at 50% 0%, var(--bg-glow) 0%, var(--bg) 62%) no-repeat;
  color: var(--text);
  font-family: var(--font-body);
  line-height: 1.5;
}
h1, h2, h3, p { margin: 0; }
ul { margin: 0; padding: 0; list-style: none; }
a { color: inherit; text-decoration: none; }
svg { flex-shrink: 0; }

:focus-visible { outline: 2px solid var(--hub-accent); outline-offset: 3px; }

.sr-only {
  position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.skip-link {
  position: absolute; left: 12px; top: -80px; z-index: 10;
  background: var(--surface); border: 1px solid var(--hub-accent); color: var(--text-gold);
  padding: 12px 18px; font-size: 14px;
}
.skip-link:focus { top: 12px; }

.mono-label {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}

/* ---------- En-tête ---------- */
.site-header { border-bottom: 1px solid var(--line); background: rgba(0, 0, 0, 0.4); }
.nav {
  max-width: var(--max); margin: 0 auto; padding: 14px var(--gutter);
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 32px;
}
.brand { display: flex; align-items: center; gap: 12px; min-height: 44px; }
.brand__name { font-family: var(--font-title); font-size: 20px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--text-gold); }
.brand__rule { width: 1px; height: 18px; background: #57534e; }
.brand__tag { font-family: var(--font-title); font-size: 13px; letter-spacing: 0.32em; text-transform: uppercase; color: var(--hub-accent); }
.nav__links {
  display: flex; flex-wrap: wrap; align-items: center; gap: 4px 36px;
  font-family: var(--font-title); font-size: 12px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--muted);
}
.nav__links a { display: flex; align-items: center; gap: 8px; min-height: 44px; padding: 12px 0; }
.nav__links a:hover, .site-footer a:hover, .back-link:hover { color: var(--text-hover); }

/* ---------- Contenu ---------- */
.main {
  flex: 1 0 auto; width: 100%; max-width: var(--max); margin: 0 auto;
  padding: 72px var(--gutter) 96px;
  display: flex; flex-direction: column; gap: 72px;
}

.hero { max-width: 760px; margin: 0 auto; text-align: center; display: flex; flex-direction: column; align-items: center; gap: 22px; }
.hero__eyebrow { color: var(--hub-accent); letter-spacing: 0.24em; }
.hero__title {
  font-family: var(--font-title); font-weight: 400; font-size: clamp(36px, 5vw, 64px); line-height: 1.1;
  color: var(--text-strong); text-shadow: 0 0 10px rgba(180, 160, 120, 0.5);
  text-wrap: balance;
}
.hero__quote { font-family: var(--font-quote); font-style: italic; font-size: 21px; line-height: 1.55; color: var(--muted); }
.hero__rule { width: 96px; height: 1px; background: var(--hub-accent); opacity: 0.55; margin-top: 10px; }

.listen { display: flex; flex-direction: column; gap: 32px; scroll-margin-top: 16px; }
.listen__head { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 24px; }
.listen__title { font-family: var(--font-title); font-weight: 400; font-size: 26px; color: var(--text-heading); }
.listen__line { flex: 1 1 80px; height: 1px; background: var(--line); }
.listen__count { color: var(--muted); }

/* ---------- Grille de cartes ---------- */
.cards { display: grid; grid-template-columns: 1fr; gap: 28px; }
@media (min-width: 600px) { .cards { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1180px) { .cards { grid-template-columns: repeat(4, 1fr); } }

/* Identité d'une carte : classe .card--<site> + propriétés personnalisées.
   --accent : couleur du sous-titre et du bouton ; --tag : pastille d'univers ;
   --title-* : lettrage du nom. */
.card {
  --accent: var(--hub-accent);
  --tag: #fb7185;
  --tag-border: rgba(244, 63, 94, 0.6);
  --title-font: var(--font-body);
  --title-weight: 700;
  --title-style: normal;
  --title-size: 36px;
  --title-size-small: 32px;
  --title-lh: 1;
  --title-ls: normal;
  --title-case: none;
  --title-color: var(--text-strong);

  position: relative;
  display: flex; flex-direction: column;
  background: var(--surface);
  border: 1px solid var(--line-card);
  border-radius: var(--radius);
  overflow: hidden;
  transition: transform 0.5s var(--ease), border-color 0.5s, box-shadow 0.5s;
}
.card:not(.is-soon):hover,
.card:not(.is-soon):has(.card__link:focus-visible) {
  transform: translateY(-8px);
  border-color: var(--line-card-hover);
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.6);
}

.card--elzy {
  --accent: #f65459;
  --title-font: Arial, Helvetica, sans-serif;
  --title-weight: 900;
  --title-size: 46px;
  --title-size-small: 40px;
  --title-lh: 0.9;
  --title-ls: -3px;
  --title-color: #eee9df;
}
.card--star {
  --accent: #d1ff00;
  --title-font: "Barlow Condensed", "Arial Narrow", Impact, sans-serif;
  --title-style: italic;
  --title-weight: 900;
  --title-size: 54px;
  --title-size-small: 48px;
  --title-lh: 0.78;
  --title-ls: -2px;
  --title-color: #f5f2ed;
}
.card--expanse {
  --accent: #22d3ee;
  --tag: #93c5fd;
  --tag-border: rgba(96, 165, 250, 0.6);
  --title-font: "Orbitron", sans-serif;
  --title-size: 22px;
  --title-size-small: 21px;
  --title-lh: 1.15;
  --title-ls: 0.08em;
  --title-case: uppercase;
  --title-color: #d4e4fa;
}
.card--vermine {
  --accent: #c3cba0;
  --tag: #fbbf24;
  --tag-border: rgba(245, 158, 11, 0.6);
  --title-font: "Bricolage Grotesque", Georgia, serif;
  --title-size: 36px;
  --title-size-small: 34px;
  --title-lh: 1;
  --title-ls: -0.035em;
  --title-color: #e2e3df;
}

.card__media { position: relative; aspect-ratio: 1 / 1; overflow: hidden; }
.card__img {
  display: block; width: 100%; height: 100%; object-fit: cover;
  transition: transform 1s var(--ease);
}
.card:not(.is-soon):hover .card__img,
.card:not(.is-soon):has(.card__link:focus-visible) .card__img { transform: scale(1.06); }
.card__media::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(to top, var(--surface) 0%, rgba(14, 14, 17, 0) 34%);
}
.card__universe {
  position: absolute; top: 16px; left: 16px; z-index: 1;
  background: rgba(10, 10, 12, 0.82); border: 1px solid var(--tag-border);
  padding: 6px 10px; color: var(--tag); letter-spacing: 0.16em;
}

.card__body { flex: 1; display: flex; flex-direction: column; align-items: flex-start; gap: 14px; padding: 6px 28px 30px; }
.card__title {
  display: flex; align-items: flex-end; min-height: var(--title-min, 0);
  font-family: var(--title-font); font-weight: var(--title-weight); font-style: var(--title-style);
  font-size: var(--title-size); line-height: var(--title-lh); letter-spacing: var(--title-ls);
  text-transform: var(--title-case); color: var(--title-color);
}
.card__title-dot { color: var(--accent); }
.card__star { display: inline-block; width: 0.62em; height: 0.62em; margin: 0 0.04em; vertical-align: 0.02em; fill: var(--accent); }
.card__kicker { color: var(--accent); letter-spacing: 0.2em; text-wrap: balance; }
.card__tagline { font-size: 17px; font-weight: 300; line-height: 1.45; color: var(--text-soft); }
.card__meta { font-size: 13px; color: var(--muted); text-wrap: pretty; }
.card__tagline { text-wrap: pretty; }

.card__cta {
  margin-top: auto; align-self: stretch;
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  min-height: 46px; padding: 13px 22px;
  border: 1px solid rgba(255, 255, 255, 0.3);
  border: 1px solid color-mix(in srgb, var(--accent) 52%, transparent);
  font-size: 13px; font-weight: 500; letter-spacing: 0.16em; text-transform: uppercase; color: var(--accent);
  transition: background-color 0.3s;
}
.card:hover .card__cta { background: color-mix(in srgb, var(--accent) 12%, transparent); }

/* En plusieurs colonnes, les titres partagent une hauteur pour aligner sous-titres et boutons. */
@media (min-width: 600px) { .card__title { --title-min: 72px; } }

/* Le lien est le titre ; son ::after couvre toute la carte (carte entièrement cliquable). */
.card__link::after { content: ""; position: absolute; inset: 0; z-index: 2; }
.card__link:focus-visible { outline: none; }
.card__link:focus-visible::after { outline: 2px solid var(--accent); outline-offset: -3px; }

/* État inactif (« Bientôt ») : même carte, ni lien ni survol, teintes grisées comme sur jeudirole.fr. */
.card.is-soon { filter: grayscale(0.6); cursor: default; }
.card.is-soon .card__img { opacity: 0.72; }
.card.is-soon .card__cta { display: none; }
.card:not(.is-soon) .card__badge { display: none; }
.card__badge {
  margin-top: auto; align-self: flex-start;
  border: 1px solid rgba(180, 160, 120, 0.3); padding: 12px 20px; min-height: 44px;
  display: inline-flex; align-items: center;
  font-size: 12px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--faint);
}

/* Emplacement « Prochain signal » */
.next {
  display: flex; flex-wrap: wrap; align-items: center; gap: 14px 28px;
  border: 1px dashed var(--line-dashed); border-radius: var(--radius); background: var(--surface-soft); padding: 22px 28px;
}
.next__wave { stroke: #57534e; stroke-width: 3.5; }
.next__text { display: flex; flex-direction: column; gap: 6px; flex: 1 1 280px; }
.next__title { font-family: var(--font-title); font-weight: 400; font-size: 22px; color: var(--muted); }
.next__desc { font-size: 15px; font-weight: 300; color: var(--muted); }
.next__soon { display: none; color: var(--faint); letter-spacing: 0.16em; }
.next__badge {
  border: 1px solid rgba(180, 160, 120, 0.3); padding: 11px 20px; min-height: 44px; display: inline-flex; align-items: center;
  font-size: 12px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--faint);
}

/* Les autres mondes */
.worlds { display: flex; flex-wrap: wrap; align-items: center; gap: 20px 40px; border-top: 1px solid var(--line); padding-top: 40px; scroll-margin-top: 16px; }
.worlds__intro { display: flex; flex-direction: column; gap: 8px; flex: 1 1 320px; }
.worlds__title { font-family: var(--font-title); font-weight: 400; font-size: 22px; color: var(--text-heading); }
.worlds__note { font-family: var(--font-quote); font-style: italic; font-size: 17px; color: var(--muted); }
.worlds__list { display: flex; flex-wrap: wrap; gap: 12px; flex: 2 1 420px; }
.worlds__item { border: 1px solid var(--line-strong); padding: 10px 16px; font-size: 12px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted); }

/* ---------- Pied de page ---------- */
.site-footer { border-top: 1px solid var(--line); background: rgba(0, 0, 0, 0.6); }
.footer__grid {
  max-width: var(--max); margin: 0 auto; padding: 48px var(--gutter);
  display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 40px 48px;
}
.footer__col { display: flex; flex-direction: column; gap: 14px; }
.footer__title { font-family: var(--font-title); font-weight: 400; font-size: 14px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--text-gold); }
.footer__about { font-family: var(--font-quote); font-style: italic; font-size: 15px; line-height: 1.6; color: var(--muted); }
.footer__links { display: flex; flex-direction: column; font-size: 14px; color: var(--muted); }
.footer__links a, .footer__links .is-soon { display: flex; align-items: center; min-height: 44px; padding: 8px 0; }
.footer__links .is-soon { color: var(--faint); }
.footer__status { display: flex; align-items: center; gap: 10px; font-size: 14px; color: var(--muted); }
.footer__dot { width: 8px; height: 8px; border-radius: 50%; background: var(--hub-accent); flex-shrink: 0; }

/* ---------- Page 404 ---------- */
.lost { margin: auto; max-width: 560px; text-align: center; display: flex; flex-direction: column; align-items: center; gap: 22px; padding: 24px 0; }
.lost__code { color: var(--hub-accent); letter-spacing: 0.24em; }
.lost__text { font-family: var(--font-quote); font-style: italic; font-size: 21px; line-height: 1.55; color: var(--muted); }
.back-link {
  display: inline-flex; align-items: center; gap: 12px; min-height: 46px; padding: 13px 22px;
  border: 1px solid rgba(217, 119, 6, 0.6);
  font-size: 13px; font-weight: 500; letter-spacing: 0.16em; text-transform: uppercase; color: var(--hub-accent);
}

/* ---------- Petits écrans (maquette mobile, 390 px) ---------- */
@media (max-width: 599px) {
  :root { --gutter: 20px; }
  body { background-image: radial-gradient(ellipse at 50% 0%, var(--bg-glow) 0%, var(--bg) 30%); }
  .only-wide { display: none; }

  .nav { padding-top: 10px; padding-bottom: 10px; flex-wrap: nowrap; gap: 12px; }
  .brand { gap: 10px; }
  .brand__name { font-size: 16px; letter-spacing: 0.18em; }
  .brand__rule { display: none; }
  .brand__tag { font-size: 11px; letter-spacing: 0.28em; }
  .brand svg { width: 26px; height: 26px; }
  .nav__links { gap: 0; }
  .nav__links a:not(.nav__portal) { display: none; }
  .nav__portal { width: 44px; justify-content: center; padding: 0; border: 1px solid var(--line-strong); color: var(--muted); }
  .nav__portal svg { width: 16px; height: 16px; }
  .nav__portal-label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

  .main { padding-top: 44px; padding-bottom: 56px; gap: 44px; }
  .hero { gap: 16px; }
  .hero__eyebrow { letter-spacing: 0.22em; }
  .hero__title { font-size: 36px; line-height: 1.12; }
  .hero__quote { font-size: 17px; line-height: 1.5; }
  .hero__rule { width: 72px; margin-top: 8px; }

  .listen { gap: 22px; }
  .listen__head { flex-direction: column; align-items: flex-start; gap: 6px; border-bottom: 1px solid var(--line); padding-bottom: 14px; }
  .listen__title { font-size: 24px; }
  .listen__line { display: none; }

  .cards { gap: 22px; }
  .card__universe { top: 14px; left: 14px; }
  .card__body { gap: 12px; padding: 4px 22px 24px; }
  .card__title { font-size: var(--title-size-small); }
  .card__kicker { letter-spacing: 0.16em; }
  .card__tagline { font-size: 16px; }
  .card__extra { display: none; }
  .card__cta { padding: 14px 18px; }
  .br-wide { display: none; }

  .next { flex-wrap: nowrap; gap: 18px; padding: 22px; }
  .next__text { flex: 0 1 auto; gap: 6px; }
  .next__desc, .next__badge { display: none; }
  .next__soon { display: block; }
  .next svg { width: 64px; height: 40px; }
  .next__wave { stroke-width: 4; }

  .worlds { flex-direction: column; align-items: flex-start; gap: 16px; padding-top: 32px; }
  .worlds__intro { flex: none; }
  .worlds__title { font-size: 20px; }
  .worlds__note { font-size: 16px; line-height: 1.5; }
  .worlds__list { flex: none; gap: 10px; }
  .worlds__item { padding: 9px 14px; letter-spacing: 0.12em; }

  .footer__grid { grid-template-columns: 1fr; padding: 36px var(--gutter) 44px; gap: 30px; }
  .footer__col { gap: 10px; }
  .footer__title { font-size: 13px; }
  .footer__col--status .footer__title { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .footer__links { gap: 0; }

  .lost__text { font-size: 17px; }
}

/* ---------- Mouvement réduit ---------- */
@media (prefers-reduced-motion: reduce) {
  .card, .card__img, .card__cta { transition: none; }
  .card:not(.is-soon):hover,
  .card:not(.is-soon):has(.card__link:focus-visible) { transform: none; }
  .card:not(.is-soon):hover .card__img,
  .card:not(.is-soon):has(.card__link:focus-visible) .card__img { transform: none; }
}