/* =========================================================
   JAYDEN — Site officiel
   Ambiance : rock · soul · poésie urbaine
   Palette : noir profond & or, dans l'esprit de la maquette
   ========================================================= */

/* ---------- Design tokens ---------- */
:root {
  --bg:        #0b0908;
  --bg-2:      #100c09;
  --bg-3:      #16110c;
  --panel:     rgba(20, 15, 11, 0.72);

  --gold:      #d9ac52;
  --gold-lite: #f4dfa4;
  --gold-deep: #b8862b;
  --gold-soft: rgba(217, 172, 82, 0.22);

  --text:      #ece4d6;
  --muted:     #9c8f7c;
  --line:      rgba(217, 172, 82, 0.22);

  --serif:  "Cormorant Garamond", "Times New Roman", serif;
  --sans:   "Jost", "Helvetica Neue", Arial, sans-serif;
  --script: "Sacramento", cursive;

  --maxw: 1320px;
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
}

/* ---------- Reset ---------- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  font-family: var(--sans);
  background: var(--bg);
  color: var(--text);
  visibility: visible; /* révélé une fois la feuille de style appliquée (anti-FOUC) */
  line-height: 1.6;
  overflow-x: hidden;
  font-weight: 300;
  -webkit-font-smoothing: antialiased;
  padding-bottom: 76px; /* place pour le lecteur fixe en bas */
}
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
ul { list-style: none; }
button { font-family: inherit; cursor: pointer; border: none; background: none; color: inherit; }

/* ---------- Helpers ---------- */
.wrap { width: 100%; max-width: var(--maxw); margin: 0 auto; padding: 0 clamp(20px, 5vw, 64px); }
.section-label {
  font-weight: 400; letter-spacing: 0.4em; text-transform: uppercase;
  font-size: 0.72rem; color: var(--gold);
}
.section-title {
  font-family: var(--serif); font-weight: 500;
  font-size: clamp(2.1rem, 5vw, 3.6rem);
  line-height: 1.05; letter-spacing: 0.02em; margin-top: 0.4rem; text-wrap: balance;
}

/* Reveal on scroll */
.reveal { opacity: 0; transform: translateY(34px); transition: opacity 1s var(--ease), transform 1s var(--ease); }
.reveal.in { opacity: 1; transform: none; }

/* =========================================================
   NAV
   ========================================================= */
.nav {
  position: fixed; inset: 0 0 auto 0; z-index: 100;
  display: flex; align-items: center; justify-content: space-between;
  padding: 22px clamp(20px, 5vw, 64px);
  transition: padding 0.5s var(--ease), border-color 0.5s var(--ease);
  border-bottom: 1px solid transparent;
}
/* Le fond de la barre (dégradé, puis effet givré au défilement) est porté par
   ::before — JAMAIS par .nav. Sinon backdrop-filter ferait de .nav le bloc
   conteneur de ses enfants position:fixed (réseaux, langue), qui se retrouvaient
   alors masqués dans le menu quand la page était défilée (bug iOS Safari). */
.nav::before {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: linear-gradient(180deg, rgba(9, 7, 5, 0.62) 0%, rgba(9, 7, 5, 0) 100%);
  transition: background 0.5s var(--ease), backdrop-filter 0.5s var(--ease);
}
.nav.scrolled {
  padding-top: 14px; padding-bottom: 14px;
  border-bottom: 1px solid var(--line);
}
.nav.scrolled::before {
  background: rgba(9, 7, 5, 0.82);
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
}
.nav__logo img { height: 34px; width: auto; transition: height 0.5s var(--ease); }
.nav.scrolled .nav__logo img { height: 28px; }
/* Le logo de la barre est masqué en haut de page et apparaît en fondu
   en même temps que la barre, dès le premier défilement (classe .scrolled). */
.nav .nav__logo {
  opacity: 0; visibility: hidden; transform: translateY(-4px);
  transition: opacity 0.5s var(--ease), transform 0.5s var(--ease), visibility 0.5s;
}
.nav.scrolled .nav__logo { opacity: 1; visibility: visible; transform: none; }

.nav__links { display: flex; align-items: center; gap: clamp(20px, 2.6vw, 40px); }
.nav__links a {
  font-weight: 400; letter-spacing: 0.24em; text-transform: uppercase; font-size: 0.78rem;
  color: var(--text); opacity: 0.86; position: relative; padding: 4px 0;
  transition: opacity 0.3s, color 0.3s;
}
.nav__links a::after {
  content: ""; position: absolute; left: 0; bottom: -2px; width: 0; height: 1px;
  background: var(--gold); transition: width 0.35s var(--ease);
}
.nav__links a:hover, .nav__links a.active { color: var(--gold-lite); opacity: 1; }
.nav__links a:hover::after, .nav__links a.active::after { width: 100%; }

.nav__end { display: flex; align-items: center; gap: clamp(14px, 2vw, 26px); }
.lang { display: flex; align-items: center; gap: 5px; }
.lang__opt { font-family: var(--sans); font-weight: 500; font-size: 0.74rem; letter-spacing: 0.1em; color: var(--muted); padding: 4px 2px; transition: color 0.3s; }
.lang__opt.is-on { color: var(--gold-lite); }
.lang__opt:hover { color: var(--gold); }
.lang__sep { color: var(--line); font-size: 0.72rem; user-select: none; }

.nav__social { display: flex; align-items: center; gap: 16px; }
.nav__social a { color: var(--gold); opacity: 0.82; transition: opacity 0.3s, transform 0.3s; }
.nav__social a:hover { opacity: 1; transform: translateY(-2px); color: var(--gold-lite); }
.nav__social svg { width: 18px; height: 18px; fill: currentColor; display: block; }

.nav__burger { display: none; width: 30px; height: 22px; position: relative; }
.nav__burger span { position: absolute; left: 0; width: 100%; height: 2px; background: var(--text); transition: 0.4s var(--ease); }
.nav__burger span:nth-child(1) { top: 0; }
.nav__burger span:nth-child(2) { top: 10px; }
.nav__burger span:nth-child(3) { top: 20px; }
body.menu-open .nav__burger span:nth-child(1) { top: 10px; transform: rotate(45deg); }
body.menu-open .nav__burger span:nth-child(2) { opacity: 0; }
body.menu-open .nav__burger span:nth-child(3) { top: 10px; transform: rotate(-45deg); }

/* =========================================================
   HERO
   ========================================================= */
.hero { position: relative; min-height: 100svh; display: flex; flex-direction: column; overflow: hidden; }
.hero__bg {
  position: absolute; inset: 0; z-index: 0;
  /* Photo nettement zoomée, calée à droite : occupe ~3/5 de l'écran */
  background: url("../assets/img/hero-dark.jpg?v=2") no-repeat right 28% / auto 210%;
  /* Le bord gauche ET le bas de l'image se fondent dans le noir */
  -webkit-mask-image:
    linear-gradient(90deg, transparent 0%, transparent 34%, rgba(0,0,0,0.5) 50%, #000 70%),
    linear-gradient(180deg, #000 0%, #000 58%, transparent 100%);
  -webkit-mask-composite: source-in;
  mask-image:
    linear-gradient(90deg, transparent 0%, transparent 34%, rgba(0,0,0,0.5) 50%, #000 70%),
    linear-gradient(180deg, #000 0%, #000 58%, transparent 100%);
  mask-composite: intersect;
}
.hero__scrim {
  position: absolute; inset: 0; z-index: 1;
  background:
    linear-gradient(90deg, var(--bg) 0%, rgba(11,9,8,0.74) 26%, rgba(11,9,8,0) 52%),
    linear-gradient(180deg, rgba(11,9,8,0.45) 0%, transparent 20%, transparent 60%, var(--bg) 100%);
}
/* Liens désactivés (plateformes non encore configurées) */
.is-disabled { opacity: 0.32 !important; pointer-events: none; cursor: default; }
.hero__inner {
  position: static; z-index: 2; flex: 1;
  display: flex; align-items: center;
  width: 100%; max-width: var(--maxw); margin: 0 auto; padding: 120px clamp(20px, 5vw, 64px) 0;
}
.hero__content { max-width: 620px; }
.hero__title { margin: 4px 0 12px; line-height: 0; }
/* Le pseudo « JAYDEN » apparaît en fondu au chargement, puis pulse doucement */
.hero__title img {
  width: min(560px, 42vw); max-width: 100%; height: auto; display: block;
  animation: logoFadeIn 1.8s var(--ease) both, logoGlow 4.5s ease-in-out 1.9s infinite;
}
@keyframes logoFadeIn {
  0% { opacity: 0; transform: translateY(16px) scale(0.985); }
  100% { opacity: 1; transform: none; }
}
@keyframes logoGlow {
  0%, 100% { filter: drop-shadow(0 8px 32px rgba(217, 172, 82, 0.16)); }
  50% { filter: drop-shadow(0 10px 52px rgba(217, 172, 82, 0.36)); }
}
/* Séparateur « ··· ——— ··· » (SOS en morse), en blanc, centré sous le pseudo.
   Chaque caractère est révélé À SA PLACE (mise en page figée) — voir main.js. */
.hero__subtitle {
  width: min(560px, 42vw); text-align: center; min-height: 1.1em;
  font-family: var(--serif); font-weight: 700; font-style: normal;
  font-size: clamp(1.9rem, 4.2vw, 3.1rem); letter-spacing: 0.26em;
  color: var(--text); margin-top: 8px;
}
.hero__subtitle .morse-ch { opacity: 0; transition: opacity 0.2s var(--ease); }
.hero__subtitle .morse-ch.on { opacity: 1; }

/* Prochain concert : pastille centrée dans un bandeau, sous le hero */
.live-band { display: flex; justify-content: center; padding: 30px 20px 4px; background: var(--bg); }
.hero__event {
  display: inline-flex; align-items: center; gap: 10px; white-space: nowrap;
  padding: 10px 18px; border-radius: 999px;
  border: 1px solid rgba(217, 172, 82, 0.42);
  background: rgba(217, 172, 82, 0.07);
  color: var(--text); text-decoration: none;
  font-size: 0.82rem; letter-spacing: 0.16em; text-transform: uppercase;
  backdrop-filter: blur(6px);
  transition: border-color 0.3s var(--ease), background 0.3s var(--ease), transform 0.3s var(--ease);
}
.hero__event:hover { border-color: var(--gold); background: rgba(217, 172, 82, 0.14); transform: translateY(-2px); }
.hero__event-dot {
  width: 8px; height: 8px; border-radius: 50%; background: var(--gold);
  box-shadow: 0 0 0 0 rgba(217, 172, 82, 0.55); animation: eventPulse 2.2s ease-out infinite;
}
.hero__event-label { color: var(--gold-lite); }
.hero__event-sep { color: var(--muted); opacity: 0.6; }
.hero__event-detail { font-weight: 500; }
@keyframes eventPulse {
  0% { box-shadow: 0 0 0 0 rgba(217, 172, 82, 0.5); }
  70% { box-shadow: 0 0 0 9px rgba(217, 172, 82, 0); }
  100% { box-shadow: 0 0 0 0 rgba(217, 172, 82, 0); }
}

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 16px;
  text-indent: 0.28em; /* compense l'inter-lettrage de fin pour un vrai centrage */
  padding: 17px 34px; border: 1px solid var(--gold-soft);
  font-weight: 400; letter-spacing: 0.28em; text-transform: uppercase; font-size: 0.78rem;
  color: var(--gold-lite); background: rgba(0,0,0,0.15);
  transition: background 0.4s var(--ease), border-color 0.4s var(--ease), color 0.4s, letter-spacing 0.4s var(--ease);
}
.btn:hover { background: var(--gold); color: #17110a; border-color: var(--gold); letter-spacing: 0.32em; }
.btn svg { width: 10px; height: 10px; fill: currentColor; }
.btn--solid { background: var(--gold); color: #17110a; border-color: var(--gold); }
.btn--solid:hover { background: var(--gold-lite); border-color: var(--gold-lite); }

/* =========================================================
   SECTION base
   ========================================================= */
.section { position: relative; padding: clamp(90px, 12vh, 160px) 0; }
.section--tint { background: linear-gradient(180deg, var(--bg), var(--bg-2)); }
.section__head { text-align: center; margin-bottom: 64px; }

/* ---------- MUSIQUE ---------- */
.single {
  display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
  gap: clamp(32px, 6vw, 80px); align-items: center;
}
.single__cover {
  position: relative; border-radius: 6px; overflow: hidden;
  border: 1px solid var(--line); box-shadow: 0 30px 80px rgba(0,0,0,0.7);
}
.single__cover img { width: 100%; }
.single__body .section-label { display: block; margin-bottom: 10px; }
.single__title { font-family: var(--serif); font-size: clamp(2rem, 4vw, 3.2rem); line-height: 1.05; margin-bottom: 8px; }
.single__meta { color: var(--muted); letter-spacing: 0.06em; margin-bottom: 26px; }

.player__note { font-size: 0.74rem; color: var(--muted); font-style: italic; margin-bottom: 26px; }

.streams { display: flex; flex-wrap: wrap; gap: 12px; }
.stream {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 11px 20px; border: 1px solid var(--line); border-radius: 40px;
  font-size: 0.78rem; letter-spacing: 0.1em; color: var(--text);
  transition: background 0.3s, border-color 0.3s, color 0.3s, transform 0.3s;
}
.stream:hover { background: var(--gold-soft); border-color: var(--gold); color: var(--gold-lite); transform: translateY(-2px); }
.stream svg { width: 16px; height: 16px; fill: currentColor; }
.streams-soon { font-size: 0.72rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--muted); margin: 4px 0 14px; }

.discography { margin-top: 90px; }
.discography h3 { text-align: center; font-family: var(--serif); font-size: 1.6rem; margin-bottom: 8px; }
.discography p { text-align: center; color: var(--muted); margin-bottom: 40px; }
.disc-grid { display: grid; grid-template-columns: repeat(auto-fit, 200px); gap: 28px; justify-content: center; }
.disc-card { text-align: center; }
.disc-card__art {
  aspect-ratio: 1; border-radius: 5px; border: 1px dashed var(--line);
  display: grid; place-items: center; color: var(--muted);
  background: rgba(255,255,255,0.02); font-family: var(--serif); font-size: 2.4rem;
  transition: border-color 0.4s, color 0.4s;
}
.disc-card--soon .disc-card__art:hover { border-color: var(--gold); color: var(--gold); }
.disc-card__title { margin-top: 14px; font-size: 0.86rem; letter-spacing: 0.08em; color: var(--muted); text-transform: uppercase; }

/* ---------- À PROPOS ---------- */
.about { display: grid; grid-template-columns: minmax(0, 460px) 1fr; gap: clamp(32px, 6vw, 80px); align-items: center; }
.about__video {
  position: relative; border-radius: 8px; overflow: hidden;
  border: 1px solid var(--line); box-shadow: 0 30px 80px rgba(0,0,0,0.6);
}
/* Le cadre épouse le format natif de la vidéo (bords collés, aucune bande) */
.about__video video { width: 100%; height: auto; display: block; }
.about__sound {
  position: absolute; right: 12px; bottom: 12px; width: 42px; height: 42px;
  border-radius: 50%; background: rgba(9,7,5,0.68); border: 1px solid var(--line);
  color: var(--gold-lite); display: grid; place-items: center;
  backdrop-filter: blur(8px); transition: background 0.3s var(--ease), transform 0.3s var(--ease);
}
.about__sound:hover { background: var(--gold); color: #17110a; transform: scale(1.07); }
.about__sound svg { width: 20px; height: 20px; fill: currentColor; }
.about__sound.is-on #aboutMuteSlash { display: none; }
.about__body p { color: var(--muted); margin-bottom: 20px; font-size: 1.05rem; text-wrap: pretty; }
.about__body p.lead { font-family: var(--serif); font-style: italic; font-size: 1.5rem; color: var(--text); line-height: 1.4; }

/* ---------- ACTUS ---------- */
.news-list { max-width: 860px; margin: 0 auto; }
.news-item {
  display: grid; grid-template-columns: auto 1fr auto; gap: 28px; align-items: center;
  padding: 26px 4px; border-bottom: 1px solid var(--line);
}
.news-item__date { text-align: center; min-width: 68px; }
.news-item__date .d { font-family: var(--serif); font-size: 2rem; line-height: 1; color: var(--gold-lite); }
.news-item__date .m { font-size: 0.68rem; letter-spacing: 0.24em; text-transform: uppercase; color: var(--muted); }
.news-item__note { color: var(--gold); font-size: 1.5rem; }
.news-item__body h4 { font-family: var(--serif); font-size: 1.3rem; margin-bottom: 3px; }
/* Lien vers le site officiel du festival (Sanremo Rock) */
.news-item__link { color: inherit; transition: color 0.25s var(--ease); }
.news-item__link::after {
  content: "↗"; font-size: 0.72em; margin-left: 6px; color: var(--gold); opacity: 0.75;
  vertical-align: 0.08em;
}
.news-item__link:hover, .news-item__link:focus-visible { color: var(--gold-lite); }
.news-item__body span { color: var(--muted); font-size: 0.88rem; }
/* Entrée festival : texte à gauche, logo officiel (badge) à droite */
.news-item__body--fest { display: flex; align-items: center; justify-content: space-between; gap: 20px; flex-wrap: wrap; }
.news-item__text { min-width: 0; }
.news-fest {
  flex: 0 0 auto; display: inline-flex; align-items: center;
  background: #f4eee2; border: 1px solid rgba(0,0,0,0.08); border-radius: 9px;
  padding: 8px 13px; box-shadow: 0 6px 20px rgba(0,0,0,0.38);
  transition: transform 0.3s var(--ease), box-shadow 0.3s var(--ease);
}
.news-fest:hover, .news-fest:focus-visible { transform: translateY(-2px); box-shadow: 0 10px 28px rgba(0,0,0,0.5); }
.news-fest img { display: block; height: 44px; width: auto; }
.news-item__tag {
  font-size: 0.68rem; letter-spacing: 0.2em; text-transform: uppercase;
  color: var(--gold); border: 1px solid var(--line); padding: 7px 14px; border-radius: 40px; white-space: nowrap;
}

/* ---------- CONTACT (tout centré, en colonne) ---------- */
.contact { display: flex; flex-direction: column; align-items: center; text-align: center; max-width: 620px; margin: 0 auto; gap: 30px; }
.contact__intro { color: var(--muted); max-width: 52ch; text-wrap: pretty; margin: 0; }
.contact__mail { font-family: var(--serif); font-size: 1.5rem; color: var(--gold-lite); letter-spacing: 0.03em; }

.form { display: flex; flex-direction: column; gap: 18px; width: 100%; text-align: center; }
.form label { font-size: 0.72rem; letter-spacing: 0.2em; text-transform: uppercase; color: var(--muted); }
.form .btn { align-self: center; min-width: 200px; }
.form input, .form textarea, .newsletter input {
  width: 100%; background: rgba(255,255,255,0.03); border: 1px solid var(--line);
  color: var(--text); padding: 16px 18px; min-height: 54px; border-radius: 4px;
  font-family: var(--sans); font-size: 1rem; transition: border-color 0.3s;
}
.form input:focus, .form textarea:focus, .newsletter input:focus { outline: none; border-color: var(--gold); }
.newsletter input::placeholder, .form input::placeholder, .form textarea::placeholder { color: var(--muted); }
.form textarea { resize: vertical; min-height: 120px; }
.form-row { display: flex; flex-direction: column; gap: 8px; }

/* Newsletter band */
.newsletter { text-align: center; }
.newsletter h2 { font-family: var(--serif); font-size: clamp(1.8rem, 4vw, 2.8rem); margin-bottom: 12px; }
.newsletter p { color: var(--muted); margin-bottom: 30px; }
.newsletter form { display: flex; gap: 12px; max-width: 520px; margin: 0 auto; }
.newsletter input { flex: 1; }
@media (max-width: 520px) { .newsletter form { flex-direction: column; } }

/* =========================================================
   FOOTER
   ========================================================= */
.footer { border-top: 1px solid var(--line); padding: 60px 0 44px; background: var(--bg-2); }
.footer__inner { display: flex; flex-direction: column; align-items: center; gap: 16px; text-align: center; }
.footer__logo img { height: 38px; opacity: 0.9; }
.footer__tag { font-family: var(--serif); color: var(--gold-lite); font-size: 1.5rem; letter-spacing: 0.28em; line-height: 1; }
.footer__socials { display: flex; gap: 16px; margin: 4px 0 2px; }
/* Bas de page : bloc légal / copyright / crédit, séparé par un filet */
.footer__bottom {
  width: 100%; margin-top: 14px; padding-top: 26px; border-top: 1px solid var(--line);
  display: flex; flex-direction: column; align-items: center; gap: 12px;
}
.footer__copy { font-size: 0.74rem; color: var(--muted); letter-spacing: 0.08em; }
.footer__copy a { color: var(--gold); }
.footer__credit { font-size: 0.68rem; color: var(--muted); letter-spacing: 0.16em; text-transform: uppercase; }
.footer__credit a { color: var(--gold); text-decoration: none; transition: color 0.3s var(--ease); }
.footer__credit a:hover { color: var(--gold-lite); }
.footer__socials a { width: 44px; height: 44px; border: 1px solid var(--line); border-radius: 50%; display: grid; place-items: center; color: var(--text); transition: 0.3s var(--ease); }
.footer__socials a:hover { background: var(--gold); color: #17110a; border-color: var(--gold); transform: translateY(-3px); }
.footer__socials svg { width: 18px; height: 18px; fill: currentColor; }

/* Back to top */
.to-top {
  position: fixed; right: 22px; bottom: 92px; z-index: 96;
  width: 44px; height: 44px; border-radius: 50%; border: 1px solid var(--line);
  background: var(--panel); color: var(--gold); display: grid; place-items: center;
  opacity: 0; pointer-events: none; transition: opacity 0.4s, transform 0.4s var(--ease);
  backdrop-filter: blur(10px);
}
.to-top.show { opacity: 1; pointer-events: auto; }
.to-top:hover { background: var(--gold); color: #17110a; }
.to-top svg { width: 16px; height: 16px; fill: currentColor; }

/* =========================================================
   HERO — citation sur la photo
   ========================================================= */
/* Citation + signature : dans le flux, centrées sous le logo & le morse (colonne de gauche) */
.hero__quote {
  position: relative; z-index: 2;
  width: min(560px, 42vw); margin-top: 30px;
  text-align: center;
  font-family: var(--serif); font-style: italic; font-size: clamp(1.4rem, 2.3vw, 1.9rem); line-height: 1.45;
  color: var(--text); text-shadow: 0 2px 18px rgba(0,0,0,0.7);
}
.hero__quote > span { display: block; }
/* Signature de l'artiste, centrée sous la phrase (taille réduite) */
.hero__sign {
  display: block; height: auto; width: clamp(100px, 7.2vw, 128px);
  margin: 10px auto 0; opacity: 0.9;
  filter: drop-shadow(0 0 6px rgba(255,255,255,0.25));
}
/* Les lettres S · O · S de « Save Our Soul » : blanches au départ (comme la phrase),
   elles passent au jaune l'une après l'autre, au rythme des 3 groupes du morse
   (··· → S, ——— → O, ··· → S). Aucun halo, juste un changement de couleur. */
.hero__quote .sos {
  color: var(--text); font-style: normal; font-weight: 600;
  transition: color 0.6s var(--ease);
}
.hero__quote .sos.lit,
.hero__quote.is-sos-lit .sos { color: #f3ca5a; } /* jaune/or (la seconde règle persiste au changement de langue) */
@media (prefers-reduced-motion: reduce) {
  .hero__quote .sos { transition: none; }
}

/* =========================================================
   SINGLE — pochette (simple cadre, non cliquable)
   ========================================================= */
.single__cover { display: block; width: 100%; margin: 0; }
.single__cover img { display: block; }

/* =========================================================
   LECTEUR FIXE (barre en bas)
   ========================================================= */
.miniplayer {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 95;
  display: flex; align-items: center; gap: 16px;
  height: 76px; padding: 0 clamp(16px, 4vw, 40px);
  background: rgba(9, 7, 5, 0.86); border-top: 1px solid var(--line);
  backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px);
}
.mp__art {
  position: relative; width: 52px; height: 52px; flex: 0 0 auto;
  border-radius: 5px; overflow: hidden; border: 1px solid var(--line);
}
.mp__cover { width: 100%; height: 100%; object-fit: cover; display: block; }
.mp__eq {
  position: absolute; inset: 0; display: flex; align-items: flex-end; justify-content: center;
  gap: 3px; padding-bottom: 8px; opacity: 0; transition: opacity 0.35s var(--ease);
  background: linear-gradient(180deg, transparent 38%, rgba(0,0,0,0.6));
}
.miniplayer.playing .mp__eq { opacity: 1; }
.mp__eq i { width: 3px; height: 4px; border-radius: 2px; background: var(--gold-lite); }
.miniplayer.playing .mp__eq i { animation: mpEq 0.9s ease-in-out infinite; }
.mp__eq i:nth-child(2) { animation-delay: 0.18s; }
.mp__eq i:nth-child(3) { animation-delay: 0.36s; }
.mp__eq i:nth-child(4) { animation-delay: 0.1s; }
@keyframes mpEq { 0%, 100% { height: 4px; } 50% { height: 18px; } }
.mp__meta { display: flex; flex-direction: column; gap: 2px; flex: 0 0 auto; width: 210px; min-width: 0; }
.mp__title { font-family: var(--serif); font-size: 1.02rem; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mp__sub { display: flex; align-items: baseline; gap: 8px; min-width: 0; }
.mp__artist { font-size: 0.68rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--muted); white-space: nowrap; }
/* Temps courant affiché dans le bloc infos (surtout utile sur mobile) */
.mp__now { display: none; font-size: 0.68rem; color: var(--muted); font-variant-numeric: tabular-nums; white-space: nowrap; }
.mp__play {
  flex: 0 0 auto; width: 48px; height: 48px; border-radius: 50%;
  background: var(--gold); color: #17110a; display: grid; place-items: center;
  transition: transform 0.25s var(--ease), background 0.25s;
}
.mp__play:hover { transform: scale(1.06); background: var(--gold-lite); }
.mp__play svg { width: 19px; height: 19px; fill: currentColor; }
.mp__progress { flex: 1; display: flex; align-items: center; gap: 14px; min-width: 0; }
.mp__bar { position: relative; flex: 1; height: 5px; border-radius: 3px; background: rgba(255,255,255,0.14); cursor: pointer; touch-action: none; }
/* Zone tactile élargie (invisible) pour attraper facilement la barre au doigt */
.mp__bar::before { content: ""; position: absolute; left: 0; right: 0; top: -11px; bottom: -11px; }
.mp__bar:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; }
.mp__fill { position: absolute; inset: 0 100% 0 0; background: linear-gradient(90deg, var(--gold-deep), var(--gold-lite)); border-radius: 3px; }
/* Poignée (curseur) au bout de la progression — apparaît à la lecture / au survol / focus */
.mp__fill::after {
  content: ""; position: absolute; right: 0; top: 50%;
  width: 11px; height: 11px; border-radius: 50%; background: var(--gold-lite);
  transform: translate(50%, -50%) scale(0.6); transform-origin: center;
  box-shadow: 0 1px 5px rgba(0,0,0,0.55); opacity: 0;
  transition: opacity 0.2s var(--ease), transform 0.2s var(--ease);
}
.miniplayer.playing .mp__fill::after,
.mp__bar:hover .mp__fill::after,
.mp__bar:focus-visible .mp__fill::after { opacity: 1; transform: translate(50%, -50%) scale(1); }
.mp__time { font-size: 0.72rem; color: var(--muted); font-variant-numeric: tabular-nums; min-width: 34px; text-align: center; }

/* Bouton « réduire » (×) de la barre */
.mp__close {
  flex: 0 0 auto; width: 32px; height: 32px; border-radius: 50%;
  display: grid; place-items: center; color: var(--muted);
  border: 1px solid transparent;
  transition: color 0.25s, background 0.25s, border-color 0.25s;
}
.mp__close:hover { color: var(--gold); background: rgba(217,172,82,0.10); border-color: var(--line); }
.mp__close svg { width: 15px; height: 15px; }

/* Pastille dorée du lecteur réduit — même taille/emplacement que le bouton « retour en haut » */
.mp-fab {
  position: fixed; right: 22px; bottom: 22px; z-index: 96;
  width: 44px; height: 44px; border-radius: 50%;
  display: none; place-items: center;
  background: var(--gold); color: #17110a;
  box-shadow: 0 10px 26px rgba(0,0,0,0.5);
  transition: transform 0.3s var(--ease), background 0.3s;
}
.mp-fab svg { width: 16px; height: 16px; fill: currentColor; margin-left: 2px; }
.mp-fab:hover { transform: scale(1.08); background: var(--gold-lite); }
.mp-fab.playing { animation: mpPulse 1.9s ease-out infinite; }
@keyframes mpPulse {
  0%   { box-shadow: 0 10px 26px rgba(0,0,0,0.5), 0 0 0 0 rgba(217,172,82,0.5); }
  70%  { box-shadow: 0 10px 26px rgba(0,0,0,0.5), 0 0 0 11px rgba(217,172,82,0); }
  100% { box-shadow: 0 10px 26px rgba(0,0,0,0.5), 0 0 0 0 rgba(217,172,82,0); }
}

/* État réduit : la barre disparaît, la pastille apparaît.
   Le bouton « retour en haut » se cale juste au-dessus de la pastille. */
body.player-collapsed .miniplayer { display: none; }
body.player-collapsed .to-top { bottom: 78px; }
body.player-collapsed .mp-fab { display: grid; }

/* =========================================================
   RESPONSIVE
   ========================================================= */
@media (max-width: 1024px) {
  .single, .about, .contact { grid-template-columns: 1fr; }
  .about__video { order: -1; max-width: 420px; margin: 0 auto; width: 100%; }
}

@media (max-width: 760px) {
  /* Menu mobile : overlay plein écran, opaque, contenu centré */
  .nav__links {
    position: fixed; inset: 0; width: 100vw; height: 100svh; z-index: 100;
    flex-direction: column; align-items: center; justify-content: center;
    gap: 32px; padding: 92px 24px 210px;
    background: rgba(8,6,4,0.98); backdrop-filter: blur(22px); -webkit-backdrop-filter: blur(22px);
    transform: translateX(100%); transition: transform 0.5s var(--ease);
  }
  .nav__links a { font-size: 1.5rem; letter-spacing: 0.26em; opacity: 1; }
  .nav__social {
    position: fixed; left: 0; right: 0; bottom: 120px; z-index: 101;
    justify-content: center; gap: 28px;
    opacity: 0; pointer-events: none; transition: opacity 0.45s var(--ease);
  }
  .nav__social svg { width: 22px; height: 22px; }
  /* Sélecteur de langue dans le menu hamburger, centré sous les réseaux */
  .lang {
    position: fixed; left: 0; right: 0; bottom: 66px; z-index: 101;
    justify-content: center; gap: 12px;
    opacity: 0; pointer-events: none; transition: opacity 0.45s var(--ease);
  }
  .lang__opt { font-size: 1.05rem; letter-spacing: 0.14em; padding: 8px 6px; }
  .lang__sep { font-size: 1.05rem; }
  body.menu-open { overflow: hidden; }
  body.menu-open .nav__links { transform: translateX(0); }
  body.menu-open .nav__social { opacity: 1; pointer-events: auto; }
  body.menu-open .lang { opacity: 1; pointer-events: auto; }
  /* Logo + bouton toujours au-dessus de l'overlay */
  .nav__logo { position: relative; z-index: 102; }
  .nav__burger { display: block; z-index: 102; }

  /* Hero mobile CINÉMA : on tombe directement sur la photo plein écran,
     la marque est posée en bas sur un dégradé (le visage reste dégagé). */
  .hero { min-height: 100svh; display: block; position: relative; }
  /* Image ENTIÈRE visible (largeur complète -> le mur « SOS » à droite reste visible) */
  .hero__bg {
    position: absolute; top: 0; left: 0; right: 0; order: 0;
    width: 100%; height: 100svh;
    background: url("../assets/img/hero-dark.jpg?v=2") no-repeat center top / contain;
    -webkit-mask-image: none; mask-image: none;
  }
  .hero__bg::after {
    content: ""; position: absolute; inset: 0;
    background: linear-gradient(180deg, rgba(11,9,8,0.55) 0%, rgba(11,9,8,0) 13%, rgba(11,9,8,0) 46%, rgba(11,9,8,0.82) 66%, var(--bg) 80%);
  }
  .hero__scrim { display: none; }
  .hero__inner {
    position: relative; z-index: 2; order: 1;
    min-height: 100svh; display: flex; align-items: flex-end;
    /* Bloc ancré en bas : padding bas réduit pour descendre l'ensemble
       (le pseudo JAYDEN arrive au niveau de la taille du personnage) */
    padding: 90px 22px calc(76px + 6px);
  }
  /* Contenu du héros centré horizontalement sur mobile */
  .hero__content { max-width: none; width: 100%; text-align: center; }
  .hero__title { margin: 6px 0 10px; }
  .hero__title img { width: min(420px, 74vw); margin-left: auto; margin-right: auto; }
  /* Séparateur (morse) centré sous le logo, un peu plus petit */
  .hero__subtitle { width: 100%; font-size: clamp(1.6rem, 8vw, 2.4rem); letter-spacing: 0.22em; }
  /* Citation de l'artiste : centrée, sur une seule ligne, agrandie */
  .hero__quote {
    position: static; width: 100%; max-width: none; text-align: center; white-space: nowrap;
    padding: 0; margin-top: clamp(56px, 15vw, 96px); font-size: clamp(1rem, 5.1vw, 1.9rem);
  }
  /* Signature centrée sous la phrase sur mobile */
  .hero__sign { margin: 12px auto 0; width: clamp(104px, 28vw, 142px); }
  /* Pastille « prochain concert » : peut passer sur 2 lignes sur très petits écrans */
  .hero__event {
    flex-wrap: wrap; justify-content: center; white-space: normal;
    max-width: 100%; letter-spacing: 0.12em; row-gap: 4px;
  }

  /* Sections plus compactes (moins de zones vides au scroll) */
  .section { padding: 64px 0 72px; }
  .section__head { margin-bottom: 44px; }
  .discography { margin-top: 48px; }
  .disc-grid { grid-template-columns: repeat(2, 1fr); gap: 16px; }

  /* Boutons plateformes en pleine largeur, uniformes */
  .streams { flex-direction: column; align-items: stretch; }
  .stream { justify-content: center; }

  .news-item { grid-template-columns: auto 1fr; }
  .news-item__tag { grid-column: 2; justify-self: start; margin-top: 6px; }
  /* Festival : logo sous le texte sur mobile, un peu plus petit */
  .news-item__body--fest { gap: 12px; }
  .news-fest { padding: 7px 11px; }
  .news-fest img { height: 38px; }

  /* Lecteur fixe compact : docké en bas, barre de progression fine en haut */
  body { padding-bottom: calc(66px + env(safe-area-inset-bottom, 0px)); }
  .miniplayer {
    min-height: 66px; gap: 13px; padding: 0 14px;
    padding-bottom: env(safe-area-inset-bottom, 0px);
  }
  .mp__art { width: 46px; height: 46px; }
  .mp__meta { width: auto; flex: 1; }
  .mp__title { font-size: 0.95rem; }
  .mp__play { width: 46px; height: 46px; }
  /* Les temps inline sont remplacés par un compteur dans le bloc infos */
  .mp__time { display: none; }
  .mp__now { display: inline; }
  .mp__progress { position: absolute; left: 0; right: 0; top: 0; gap: 0; }
  .mp__bar { height: 5px; border-radius: 0; }
  /* Poignée descendue dans la barre pour rester à l'intérieur du lecteur */
  .mp__fill::after { top: 5px; opacity: 1; }
  .to-top { bottom: calc(84px + env(safe-area-inset-bottom, 0px)); }
  .mp__close { width: 30px; height: 30px; }
  /* Réduit : la pastille remplace la barre (même position que « retour en haut »),
     le contenu récupère l'espace, et le bouton « retour en haut » se cale au-dessus. */
  .mp-fab { right: 22px; bottom: calc(22px + env(safe-area-inset-bottom, 0px)); }
  body.player-collapsed { padding-bottom: env(safe-area-inset-bottom, 0px); }
  body.player-collapsed .to-top { bottom: calc(78px + env(safe-area-inset-bottom, 0px)); }
}

@media (prefers-reduced-motion: reduce) {
  * { scroll-behavior: auto !important; }
  .reveal { opacity: 1 !important; transform: none !important; transition: none !important; }
  .hero__title img, .mp__eq i { animation: none !important; }
}

/* =========================================================
   FOOTER — liens légaux
   ========================================================= */
.footer__legal {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: center;
  gap: 10px; margin-top: 20px; font-size: 0.72rem; letter-spacing: 0.08em;
}
.footer__legal a { color: var(--muted); transition: color 0.3s var(--ease); }
.footer__legal a:hover { color: var(--gold-lite); }
.footer__legal span { color: var(--line); }

/* =========================================================
   BANDEAU COOKIES
   ========================================================= */
.cookie-bar {
  position: fixed; left: 50%; bottom: calc(76px + 16px); z-index: 120;
  width: min(700px, calc(100% - 28px));
  transform: translateX(-50%) translateY(16px);
  background: rgba(16, 12, 9, 0.97);
  border: 1px solid var(--line); border-radius: 14px;
  padding: 16px 20px; display: flex; align-items: center; gap: 18px; flex-wrap: wrap;
  box-shadow: 0 22px 60px rgba(0,0,0,0.6);
  backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  opacity: 0; pointer-events: none;
  transition: opacity 0.5s var(--ease), transform 0.5s var(--ease);
}
.cookie-bar.show { opacity: 1; pointer-events: auto; transform: translateX(-50%) translateY(0); }
.cookie-bar p { flex: 1; min-width: 220px; font-size: 0.8rem; line-height: 1.55; color: var(--muted); }
.cookie-bar p a { color: var(--gold-lite); text-decoration: underline; }
.cookie-bar .btn { padding: 12px 26px; font-size: 0.72rem; }
@media (max-width: 600px) {
  .cookie-bar { bottom: calc(76px + 10px); flex-direction: column; align-items: stretch; text-align: center; }
  .cookie-bar .btn { width: 100%; }
}

/* =========================================================
   PAGE LÉGALE (legal.html)
   ========================================================= */
.legal-head {
  position: fixed; inset: 0 0 auto 0; z-index: 100;
  display: flex; align-items: center; justify-content: space-between;
  padding: 18px clamp(20px, 5vw, 64px);
  background: rgba(9, 7, 5, 0.9); border-bottom: 1px solid var(--line);
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
}
.legal-head .nav__logo img { height: 30px; width: auto; }
.legal-head__end { display: flex; align-items: center; gap: 22px; }
.legal-back { font-size: 0.76rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--text); opacity: 0.85; transition: color 0.3s, opacity 0.3s; }
.legal-back:hover { color: var(--gold-lite); opacity: 1; }
.legal-main { max-width: 820px; margin: 0 auto; padding: 140px clamp(20px, 5vw, 40px) 100px; }
.legal-main .section-label { display: block; text-align: center; }
.legal-main h1 { font-family: var(--serif); font-weight: 500; font-size: clamp(2.2rem, 5vw, 3.4rem); text-align: center; margin: 6px 0 8px; }
.legal-updated { text-align: center; color: var(--muted); font-size: 0.78rem; letter-spacing: 0.05em; margin-bottom: 60px; }
.legal-section { margin-bottom: 54px; scroll-margin-top: 100px; }
.legal-section h2 {
  font-family: var(--serif); font-size: 1.7rem; color: var(--gold-lite);
  margin-bottom: 18px; padding-bottom: 12px; border-bottom: 1px solid var(--line);
}
.legal-section h3 { font-size: 0.95rem; letter-spacing: 0.06em; color: var(--text); margin: 24px 0 8px; }
.legal-section p { color: var(--muted); margin-bottom: 14px; line-height: 1.7; }
.legal-section a { color: var(--gold-lite); text-decoration: underline; }
.legal-section ul { list-style: none; margin: 0 0 14px; padding: 0; }
.legal-section li { color: var(--muted); line-height: 1.7; padding-left: 20px; position: relative; margin-bottom: 6px; }
.legal-section li::before { content: "—"; position: absolute; left: 0; color: var(--gold); }
.legal-section strong { color: var(--text); font-weight: 500; }
body.legal { padding-bottom: 0; }