/* ============================================================
   PAGES — footer, accueil, gabarits génériques, 404
   ============================================================ */

/* ---------- Footer (signature + écoute/réseaux DESSOUS + bas de page) ---------- */
.site-footer { position: relative; overflow: hidden;
  padding-block: clamp(64px, 11vh, 132px) clamp(28px, 5vh, 52px); }
.site-footer::before { content: ""; position: absolute; top: 0; left: var(--edge); right: var(--edge);
  height: 1px; background: currentColor; opacity: .15; }
.site-footer__grid { display: grid; grid-template-columns: 1fr;
  gap: clamp(32px, 5vh, 60px) var(--s-8); align-items: start; }
/* Mobile : signature → écoute/réseaux → menu → légal (liens juste sous le logo) */
.site-footer__brand { order: 1; }
.site-footer__links { order: 2; }
.site-footer__nav   { order: 3; }
.site-footer__legal { order: 4; }

/* Signature géante ; survol = inversion (plaque négative) */
.site-footer__brand-link { display: inline-block; padding: clamp(8px, 1.5vw, 16px) clamp(10px, 2vw, 22px);
  margin: calc(-1 * clamp(8px, 1.5vw, 16px)) calc(-1 * clamp(10px, 2vw, 22px));
  background: transparent; transition: background var(--dur) var(--ease); }
.site-footer__brand-link svg { display: block; width: clamp(200px, 44vw, 460px); height: auto; max-width: 100%; }
.site-footer__brand-link svg path { fill: var(--fg); transition: fill var(--dur) var(--ease); }
.site-footer__brand-link:hover { background: var(--fg); }
.site-footer__brand-link:hover svg path { fill: var(--bg); } /* inversion : encre sur plaque claire */

/* Navigation = liste éditoriale en serif */
.site-footer__menu { display: flex; flex-direction: column; gap: var(--s-3); }
.site-footer__menu a { font-family: var(--font-display); font-size: clamp(1.15rem, 2.2vw, 1.5rem);
  line-height: 1.15; opacity: .72; transition: opacity var(--dur-fast) var(--ease), transform var(--dur-fast) var(--ease); }
.site-footer__menu a:hover { opacity: 1; transform: translateX(6px); }

/* Écoute + réseaux — directement sous le logo, logos plus gros, noms collés */
.site-footer__links .nav-links { width: auto; margin: 0; gap: clamp(24px, 4vh, 40px) clamp(36px, 6vw, 90px); }
.site-footer__links .nav-links__group .label { margin-bottom: var(--s-4); }
.site-footer__links .nav-links__item svg { width: 28px; height: 28px; }

/* Bas de page : mentions + copyright, filet au-dessus (barre pleine largeur) */
.site-footer__legal { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: var(--s-3) var(--s-5); padding-top: var(--s-5); border-top: 1px solid var(--line); }
.site-footer__legal-menu { display: flex; flex-wrap: wrap; gap: var(--s-3) var(--s-5); }
.site-footer__legal-menu a { font-size: var(--fs-small); letter-spacing: .1em; text-transform: uppercase; opacity: .58; }
.site-footer__legal-menu a:hover { opacity: 1; }
.site-footer__copy { font-size: var(--fs-small); letter-spacing: .08em; opacity: .5; }

@media (min-width: 900px) {
  .site-footer__grid { grid-template-columns: 1.5fr 1fr;
    grid-template-areas: "brand nav" "links links" "legal legal"; row-gap: clamp(28px, 4vh, 56px); }
  .site-footer__brand { grid-area: brand; }
  .site-footer__nav { grid-area: nav; justify-self: end; }
  .site-footer__nav .site-footer__menu { align-items: flex-end; text-align: right; }
  .site-footer__links { grid-area: links; justify-self: start; margin-top: clamp(8px, 2vh, 24px); }
  .site-footer__legal { grid-area: legal; margin-top: clamp(12px, 3vh, 32px); }
}

/* ---------- Accueil ---------- */
.home-intro .serif-italic { max-width: 26ch; }
.home-album__title svg { width: clamp(220px, 30vw, 380px); height: auto; margin: var(--s-3) 0 var(--s-5); }
.home-album__title svg path { fill: var(--fg); }
.home-album__tracks { display: grid; gap: var(--s-3); margin-bottom: var(--s-6); }
.home-album__tracks li { display: grid; grid-template-columns: 2.4em 1fr; align-items: baseline;
  font-family: var(--font-display); font-size: clamp(1.2rem, 2.4vw, 1.6rem); }
.home-album__num { color: var(--sky); }

/* ---------- Gabarit de page générique ---------- */
.page-hero { padding-block: clamp(120px, 22vh, 240px) clamp(32px, 6vh, 80px); padding-inline: var(--edge); }
.page-hero__eyebrow { color: var(--ink-80); margin-bottom: var(--s-3); }
.page-hero h1 { font-size: var(--fs-display); }
.page-body { padding-inline: var(--edge); padding-bottom: clamp(64px, 12vh, 160px); }
.page-body .container--narrow > * + * { margin-top: var(--s-4); }
.page-body h2 { margin-top: var(--s-7); }

/* ---------- 404 ---------- */
.error404-main { min-height: 100svh; display: grid; place-items: center; background: var(--night); color: var(--white); text-align: center; padding: var(--edge); }
.error404-main .display { margin-bottom: var(--s-5); }
.error404-main .serif-italic { color: var(--white-80); margin-bottom: var(--s-6); max-width: 28ch; }

/* ============================================================
   MUSIQUE
   ============================================================ */
.album { padding-top: clamp(120px, 20vh, 220px); overflow: hidden; } /* clippe le disque qui dépasse (pas de scroll X mobile) */
.album__grid { display: grid; gap: clamp(32px, 6vw, 80px); align-items: center; grid-template-columns: 1fr; }
@media (min-width: 900px) { .album__grid { grid-template-columns: 1fr 1fr; } }
.album__cover { position: relative; aspect-ratio: 1; }
.album__cover-img, .album__cover-ph { width: 100%; height: 100%; object-fit: cover; }
.album__cover-ph { display: grid; place-items: center; background: linear-gradient(160deg, #243038, #11161a); border: 1px solid var(--white-20); }
.album__cover-ph span, .hero__placeholder span { color: var(--white-60); font-size: var(--fs-small); letter-spacing: var(--tracking-label); text-transform: uppercase; padding: var(--s-4); text-align: center; }
.album__disc { position: absolute; right: -6%; top: 50%; width: 38%; transform: translateY(-50%); z-index: -1; opacity: .9; animation: spin 26s linear infinite; }
.album__disc svg path { fill: var(--fg); }
@media (prefers-reduced-motion: reduce) { .album__disc { animation: none; } }
.album__title svg { width: clamp(240px, 34vw, 460px); height: auto; }
.album__title svg path { fill: var(--fg); }
.album__status { margin: var(--s-4) 0; color: var(--white-80); }
.album__note { color: var(--white-60); max-width: 40ch; margin-top: var(--s-4); }
.platforms { display: flex; flex-direction: column; gap: var(--s-3); margin-top: var(--s-4); align-items: flex-start; }
.platforms__item { font-family: var(--font-display); font-size: var(--fs-h3); }
.album__profiles { margin-top: var(--s-6); }
.album__profiles .label { color: var(--white-60); margin-bottom: var(--s-3); }
.album__profiles-row { display: flex; flex-wrap: wrap; gap: var(--s-4) var(--s-5); }

/* Lien marque (logo + nom) — logos plateformes/réseaux dans la DA. */
.brand-link { display: inline-flex; align-items: center; gap: var(--s-3); color: var(--fg);
  transition: color var(--dur-fast) var(--ease), transform var(--dur-fast) var(--ease); }
.brand-link svg { width: 1.05em; height: 1.05em; fill: currentColor; flex: none; }
.brand-link:hover { transform: translateX(4px); }
.platforms .brand-link { font-family: var(--font-display); font-size: var(--fs-h3); color: var(--white); }
.album__profiles-row .brand-link { font-family: var(--font-ui); font-size: var(--fs-small);
  letter-spacing: .04em; color: var(--white-80); min-height: 44px; }
.album__profiles-row .brand-link:hover { color: var(--white); }

.tracklist__list { margin-top: var(--s-6); }
.tracklist__row { display: grid; grid-template-columns: 3rem 1fr; gap: var(--s-4); align-items: baseline;
  padding: var(--s-3) 0; border-bottom: 1px solid var(--line); transition: padding-left var(--dur) var(--ease); }
.tracklist__row:hover { padding-left: var(--s-5); }
.tracklist__num { font-family: var(--font-display); font-style: italic; font-size: var(--fs-h3); color: var(--ink-80); transition: color var(--dur) var(--ease); }
.tracklist__title { font-family: var(--font-display); font-size: clamp(1.25rem, 2.6vw, 1.7rem); }

/* ============================================================
   SHOP (boutique multi-produits)
   ============================================================ */
.shop { padding-top: clamp(110px, 18vh, 200px); }
.shop__head { margin-bottom: clamp(40px, 8vh, 96px); }
.shop__h1 { margin: var(--s-2) 0 var(--s-3); }
.shop__eyebrow { color: var(--white-60); }
.shop__lead { color: var(--white-80); font-size: var(--fs-h3); max-width: 30ch; }

.shop__products { display: grid; gap: clamp(56px, 12vh, 140px); }
.product { display: grid; gap: clamp(28px, 6vw, 72px); align-items: center; grid-template-columns: 1fr; }
@media (min-width: 900px) {
  .product { grid-template-columns: 1fr 1fr; }
  .product:nth-child(even) .product__media { order: 2; } /* alternance gauche/droite */
}
.product__media { position: relative; }
.product__img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; display: block; }
.product__gallery { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-3); }
.product__video { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; display: block; background: #11161a; }
.product__ph { width: 100%; aspect-ratio: 4 / 5; display: grid; place-items: center;
  background: linear-gradient(160deg, #2a3942, #1a2429 60%, #11161a); border: 1px solid var(--white-20); }
.product__ph span { color: var(--white-60); font-size: var(--fs-small); letter-spacing: var(--tracking-label); text-transform: uppercase; }
.product__sub { color: var(--white-60); }
.product__title { font-size: var(--fs-h1); margin: var(--s-2) 0 var(--s-3); }
.product__price { font-size: var(--fs-h2); display: flex; align-items: baseline; gap: var(--s-3); }
.product__ship { color: var(--white-60); }
.product__intro { color: var(--white-80); max-width: 46ch; margin: var(--s-4) 0 var(--s-5); }
.product__specs { display: flex; flex-wrap: wrap; gap: var(--s-2) var(--s-4); margin-bottom: var(--s-5);
  color: var(--white-80); font-size: var(--fs-small); letter-spacing: .04em; }
.product__specs li { display: inline-flex; align-items: center; }
.product__specs li + li::before { content: "·"; margin-right: var(--s-4); color: var(--white-60); }
.product__fit { color: var(--white-60); max-width: 46ch; margin-bottom: var(--s-5); font-size: var(--fs-small); }
.product__more { margin-bottom: var(--s-5); border-top: 1px solid var(--line); }
.product__more summary { cursor: pointer; padding: var(--s-3) 0; list-style: none;
  font-size: var(--fs-small); letter-spacing: var(--tracking-label); text-transform: uppercase; color: var(--white-80); }
.product__more summary::-webkit-details-marker { display: none; }
.product__more summary::after { content: "+"; float: right; transition: transform var(--dur-fast) var(--ease); }
.product__more[open] summary::after { content: "–"; }
.product__details { display: grid; gap: 6px; color: var(--white-80); margin: var(--s-2) 0 var(--s-4); }
.product__details li { display: grid; grid-template-columns: 1.2em 1fr; }
.product__details li::before { content: "—"; color: var(--sky); }
.product__care { color: var(--white-60); font-size: var(--fs-small); max-width: 46ch; }
.product__cta { margin-top: var(--s-5); }

/* Tracklist vinyle (faces) */
.shop__faces { display: grid; gap: var(--s-6); grid-template-columns: 1fr 1fr; margin: var(--s-6) 0; }
@media (max-width: 560px) { .shop__faces { grid-template-columns: 1fr; gap: var(--s-5); } }
.shop__face .label { color: var(--white-60); margin-bottom: var(--s-3); }
.shop__face ol { list-style: none; color: var(--white-80); display: grid; gap: 6px; }
.shop__face li { display: grid; grid-template-columns: 2.2em 1fr; align-items: baseline; }
.shop__face li::before { counter-increment: trk; content: counter(trk, decimal-leading-zero);
  font-family: var(--font-display); font-style: italic; color: var(--sky); }

/* ============================================================
   CONTACT
   ============================================================ */
.contact { padding-top: clamp(120px, 20vh, 220px); min-height: 100svh; }
.contact__grid { display: grid; gap: clamp(32px, 6vw, 80px); grid-template-columns: 1fr; }
@media (min-width: 900px) { .contact__grid { grid-template-columns: 1fr 1fr; } }
.contact__lead { color: var(--white-80); margin: var(--s-4) 0 var(--s-6); font-size: var(--fs-h3); max-width: 28ch; }
.contact__social { display: flex; gap: var(--s-5); }
.contact__social a { color: var(--white); }
.contact__social svg { width: 22px; height: 22px; fill: currentColor; }

/* ============================================================
   CONCERTS
   ============================================================ */
.concerts__list { display: grid; }
.concert { display: grid; grid-template-columns: auto 1fr auto; gap: var(--s-5); align-items: center;
  padding: var(--s-5) 0; border-top: 1px solid var(--line); }
.concert:last-child { border-bottom: 1px solid var(--line); }
.concert__date { display: grid; grid-template-columns: auto auto auto; gap: var(--s-2); align-items: baseline; }
.concert__day { font-family: var(--font-display); font-size: clamp(2rem, 5vw, 3.5rem); line-height: 1; }
.concert__month, .concert__year { font-size: var(--fs-small); letter-spacing: var(--tracking-label); color: var(--ink-80); }
.concert__place { display: grid; }
.concert__city { font-family: var(--font-display); font-size: var(--fs-h3); }
.concert__venue { font-size: var(--fs-small); color: var(--ink-80); }
.concert__soldout { color: var(--error); }
@media (max-width: 640px) {
  .concert { grid-template-columns: 1fr; gap: var(--s-3); }
  .concert__cta { justify-self: start; }
}

/* ============================================================
   FORMULAIRES (modale & contact)
   ============================================================ */
.modal__intro { color: var(--white-80); margin-bottom: var(--s-5); font-size: var(--fs-small); }
.field-2 { display: grid; gap: 0 var(--s-4); grid-template-columns: 1fr 1fr; }
@media (max-width: 480px) { .field-2 { grid-template-columns: 1fr; } }
.form-status { min-height: 1.2em; font-size: var(--fs-small); }
.form-status.is-error { color: var(--error); }
.field--consent label { font-size: var(--fs-small); line-height: 1.4; opacity: .85; }