/* =========================================================
   6PA — FEUILLE DE STYLE
   Mobile d'abord. Couleurs et typographies en variables.
   Thème : attribut data-theme sur <html> ("white" ou "cream"),
   réglé dans js/data.js (SITE.theme).
   ========================================================= */
:root {
  --bg: #FFFFFF;          /* fond de page */
  --tile: #F5F5F5;        /* fond des photos produits */
  --soft: #F8F8F8;        /* pied de page, zones douces */
  --ink: #0D0C0B;         /* noir profond */
  --on-dark: #FFFFFF;     /* texte sur sections noires */
  --line: rgba(13, 12, 11, .14);
  --line-light: rgba(255, 255, 255, .22);
  --muted: #6E6E6E;
  --bordeaux: #6B1222;
  --red: #C8102E;

  --serif: "Cormorant Garamond", "Times New Roman", serif;   /* slogans uniquement */
  --sans: "Archivo", system-ui, -apple-system, "Segoe UI", Helvetica, Arial, sans-serif;

  --pad: 20px;
  --section: 64px;
  --header-h: 60px;
  --ease: cubic-bezier(.2, .7, .2, 1);
}
html[data-theme="cream"] {
  --bg: #F3EDE3; --tile: #FFFFFF; --soft: #EAE2D5; --on-dark: #F3EDE3; --muted: #6F675D;
}
@media (min-width: 768px) { :root { --pad: 40px; --section: 96px; --header-h: 72px; } .filters { gap: 32px; } }
@media (min-width: 1200px) { :root { --pad: 64px; --section: 112px; } }

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; background: var(--bg); color: var(--ink);
  font: 400 15px/1.55 var(--sans); -webkit-font-smoothing: antialiased;
}
body.locked { overflow: hidden; }
img { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; border-radius: 0; }
figure { margin: 0; }
svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: square; stroke-linejoin: miter; }
[hidden] { display: none !important; }
:focus-visible { outline: 2px solid var(--red); outline-offset: 3px; }

/* ---------- Typographie ---------- */
.eyebrow { font: 500 11px/1 var(--sans); letter-spacing: .2em; text-transform: uppercase; color: var(--muted); margin: 0 0 16px; }
.eyebrow.light { color: rgba(255, 255, 255, .78); }

/* Slogans : seul usage du serif italique */
.slogan {
  font: italic 500 clamp(48px, 13vw, 104px)/.92 var(--serif);
  letter-spacing: -.005em; text-transform: uppercase; margin: 0 0 28px; color: var(--on-dark);
}
.slogan.dark { color: var(--ink); }
.slogan.small { font-size: 28px; line-height: 1; text-transform: none; margin: 0; }

/* Titres : sans-serif capitales */
.heading {
  font: 700 clamp(22px, 5.6vw, 32px)/1.1 var(--sans); font-stretch: 112%;
  letter-spacing: .01em; text-transform: uppercase; margin: 0;
}
.heading.xl { font-size: clamp(28px, 7.4vw, 48px); }
.heading.center { text-align: center; }
.heading.light { color: var(--on-dark); }
.ulink { font: 500 12px/1 var(--sans); letter-spacing: .1em; text-transform: uppercase; border-bottom: 1px solid currentColor; padding-bottom: 4px; white-space: nowrap; }
.ulink:hover { color: var(--bordeaux); }
.link { text-align: left; }

/* ---------- Boutons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 12px; min-height: 52px; padding: 8px 28px;
  font: 600 12px/1.35 var(--sans); font-stretch: 106%; letter-spacing: .16em; text-transform: uppercase; text-align: center;
  transition: background .25s var(--ease), color .25s var(--ease), border-color .25s var(--ease);
}
.arr { width: 18px; height: 18px; flex: none; transition: transform .25s var(--ease); }
.btn:hover .arr { transform: translateX(4px); }
.btn-light { background: #fff; color: var(--ink); }
.btn-light:hover { background: var(--ink); color: #fff; }
.btn-dark { background: var(--ink); color: #fff; }
.btn-dark:hover { background: var(--bordeaux); }
.btn-outline-light { border: 1px solid var(--line-light); color: var(--on-dark); }
.btn-outline-light:hover { border-color: var(--on-dark); }
.btn-outline { border: 1px solid var(--line); }
.btn-outline:hover { border-color: var(--ink); }
.btn-block { width: 100%; }

/* ---------- En-tête : logo, deux pages (Music / Clothing), actions ---------- */
.header {
  position: sticky; top: 0; z-index: 50; height: calc(var(--header-h) + env(safe-area-inset-top));
  padding: env(safe-area-inset-top) calc(var(--pad) - 10px) 0 var(--pad);
  display: flex; align-items: center;
  background: var(--bg); border-bottom: 1px solid var(--line);
}
.brand { display: flex; align-items: center; flex: none; }
.brand-logo img { height: 26px; width: auto; }
.brand-name { font: 700 14px/1 var(--sans); font-stretch: 112%; letter-spacing: .2em; }
.tabs { display: flex; align-self: stretch; gap: 16px; margin: 0 auto 0 16px; }
.tabs a {
  display: flex; align-items: center; font: 500 12px/1 var(--sans); font-stretch: 108%; letter-spacing: .12em; text-transform: uppercase;
  color: var(--muted); border-bottom: 2px solid transparent; margin-bottom: -1px; padding-top: 2px; transition: color .2s var(--ease);
}
.tabs a:hover { color: var(--ink); }
.tabs a.active { color: var(--ink); font-weight: 700; border-bottom-color: var(--ink); }
.header-actions { display: flex; align-items: center; flex: none; }
.icon-btn { position: relative; width: 44px; height: 44px; display: grid; place-items: center; }
.badge {
  position: absolute; top: 5px; right: 3px; min-width: 16px; height: 16px; padding: 0 4px; border-radius: 8px;
  background: var(--red); color: #fff; font: 600 10px/16px var(--sans); text-align: center;
}
@media (max-width: 479px) { .header-actions [data-open="search"] { display: none; } }
@media (max-width: 359px) { .tabs { gap: 12px; margin-left: 12px; } .tabs a { letter-spacing: .08em; } }
@media (min-width: 768px) {
  .brand-logo img { height: 32px; }
  .tabs { gap: 32px; margin-left: 40px; }
  .tabs a { font-size: 13px; }
}

/* ---------- Visuels ---------- */
.cover { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: var(--pos, 50% 50%); }
@media (min-width: 768px) { .cover { object-position: var(--pos-wide, var(--pos, 50% 50%)); } }
.ph {
  position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px;
  text-align: center; padding: 20px; font: 500 10px/1.5 var(--sans); letter-spacing: .16em; text-transform: uppercase;
}
.ph::before { content: ""; width: 24px; height: 24px; border: 1px solid currentColor; opacity: .5; }
.ph-dark { background: #1b1a19; color: rgba(255, 255, 255, .45); }
.ph-tile { background: var(--tile); color: #A3A3A3; }

/* ---------- Bannière ----------
   Le bloc slogan + bouton reste sous le logo brodé du t-shirt :
   deux lignes sur mobile, une seule ligne à partir de la tablette. */
.hero {
  position: relative; overflow: hidden; background: var(--ink); min-height: 480px;
  height: min(calc(88vh - var(--header-h)), 150vw);
  height: min(calc(88svh - var(--header-h)), 150vw);
}
.hero-media { position: absolute; inset: 0; display: grid; }
.hero-pane { position: relative; overflow: hidden; }
.hero-pane + .hero-pane { display: none; }
.hero-pane:first-child::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(13,12,11,0) 50%, rgba(13,12,11,.74) 100%); pointer-events: none; }
.hero-content { position: absolute; left: var(--pad); right: var(--pad); bottom: 28px; z-index: 2; }
.hero .slogan { font-size: min(12.4vw, 64px); margin-bottom: 20px; color: #fff; }
@media (min-width: 768px) {
  .hero { height: min(66vw, calc(100vh - var(--header-h))); height: min(66vw, calc(100svh - var(--header-h))); min-height: 460px; }
  .hero-media { grid-template-columns: 1fr 1fr; }
  .hero-pane + .hero-pane { display: block; }
  .hero-content { right: auto; bottom: clamp(24px, 5vh, 48px); }
  .hero .slogan { font-size: clamp(28px, min(3.9vw, 6.2vh), 66px); margin-bottom: 16px; white-space: nowrap; }
  .hero .slogan br { display: none; }
}

/* ---------- L'esprit : photo éditoriale + manifeste ----------
   La photo est volontairement présentée en petit format encadré : son fichier fait 1118 px de large,
   au-delà d'environ 420 px affichés elle est étirée et perd en netteté. */
/* « L'esprit 6PA » : même mise en scène que les photos de la signature — la photo en pleine largeur, le texte posé directement
   dessus, en haut à droite. Aucun voile ni ombre : l'arrière-plan y est clair et flou, le texte est donc en noir. Téléphone : photo recadrée en hauteur, texte réduit à l'essentiel (la citation n'y tient pas). */
.spirit[hidden] { display: none; }
.spirit { position: relative; background: var(--ink); color: #fff; isolation: isolate; }
.spirit-media { position: relative; aspect-ratio: 2 / 3; overflow: hidden; background: #000; width: 100%; margin: 0; z-index: -2; }   /* téléphone : la photo (verticale) en entier */
.spirit-body { position: absolute; top: 3%; right: 4%; width: 41%; }
.spirit .eyebrow { margin: 0 0 8px; color: rgba(13, 12, 11, .78); }
.spirit .slogan { color: var(--ink); font-size: clamp(24px, 7vw, 44px); margin: 0 0 14px; }
.spirit-text { display: none; line-height: 1.6; font-weight: 400; margin: 0 0 22px; color: var(--ink); }
.spirit .btn { background: var(--ink); border-color: var(--ink); color: #fff; -webkit-backdrop-filter: none; backdrop-filter: none; }
.spirit .btn:hover { background: #000; }
@media (max-width: 699px) { .spirit .btn { padding: 11px 12px; font-size: 9.5px; letter-spacing: .1em; gap: 6px; white-space: nowrap; } }
@media (min-width: 700px) {
  .spirit-media { aspect-ratio: 8 / 7; }           /* assez haut pour voir le visage ET le logo du t-shirt */
  .spirit-body { top: 17%; right: 4%; width: 33%; }
  .spirit .slogan { font-size: clamp(28px, 4.1vw, 48px); }
  .spirit-text { display: block; font-size: clamp(12.5px, 1.55vw, 16px); }
}
@media (min-width: 1100px) {
  .spirit-body { top: 17%; right: max(var(--pad), 3.5%); width: min(30%, 440px); }
  .spirit .slogan { font-size: clamp(30px, 3.6vw, 60px); }
  .spirit-text { font-size: clamp(14px, 1.25vw, 18px); margin-bottom: 26px; }
}

/* ---------- Scène logo ---------- */
/* ---------- La signature ----------
   Une photo pleine largeur ; le texte est posé sur sa partie gauche (le modèle est à droite), le logo en tête du texte.
   Aucun voile : la photo reste telle quelle, le texte est lisible grâce à son ombre portée. Sur mobile la photo est recadrée sur le modèle et le texte
   se pose en bas. Dessous : les deux gros plans du logo sur textile. */
.sig-hero { position: relative; overflow: hidden; background: var(--ink); color: #fff; display: flex; align-items: flex-end; min-height: 150vw; isolation: isolate; }
.sig-hero-media { position: absolute; inset: 0; margin: 0; z-index: -2; }
.sig-hero-body { padding: 40px var(--pad) 44px; max-width: 640px; }
.sig-hero-logo { display: block; width: clamp(64px, 17vw, 104px); margin-bottom: 22px; }
.sig-hero-logo img { display: block; width: 100%; height: auto; filter: invert(1); }
.sig-hero .eyebrow { margin: 0 0 12px; color: rgba(255, 255, 255, .78); }
.sig-hero .slogan { color: #fff; font-size: clamp(40px, 10.5vw, 64px); margin: 0 0 26px; text-shadow: 0 2px 5px rgba(0, 0, 0, .65), 0 6px 34px rgba(0, 0, 0, .7); }
.sig-hero-logo img { filter: invert(1) drop-shadow(0 2px 6px rgba(0, 0, 0, .6)); }
.sig-hero .eyebrow { color: #fff; text-shadow: 0 1px 4px rgba(0, 0, 0, .9), 0 2px 16px rgba(0, 0, 0, .8); }
@media (min-width: 768px) {
  .sig-hero { min-height: 0; aspect-ratio: 3 / 2; max-height: 92vh; width: 100%; align-items: center; }
  /* le bloc (logo, texte, bouton) est centré dans l'espace entre le bord gauche et l'épaule du modèle, texte aligné à gauche */
  .sig-hero-body { width: 55%; max-width: none; padding: 48px 16px; display: grid; justify-content: center; justify-items: start; }
  .sig-hero .slogan { font-size: clamp(38px, 5vw, 78px); }
}
/* le logo sur textile blanc, seul et centré : le tissu occupe toute la largeur de la page, d'un bord à l'autre */
.signature { display: block; padding: 0; }
.signature-tile { position: relative; overflow: hidden; background: #e9e9e9; aspect-ratio: 1; margin: 0; }
@media (min-width: 600px) { .signature-tile { aspect-ratio: 16 / 9; } }
@media (min-width: 1000px) { .signature-tile { aspect-ratio: 12 / 5; } }
/* seconde photo : ni voile ni ombre portée, la photo reste telle quelle. Téléphone : le modèle au centre, voile et texte en bas. */
.sig-hero-2 .slogan, .sig-hero-2 .eyebrow { text-shadow: none; }
.sig-hero-2 .sig-hero-logo img { filter: invert(1); }
/* téléphone : le texte s'écrit autour de la tête du modèle — logo et « 6PA Clothing » en haut à gauche, « Step up » à gauche
   du visage, « your game. » à droite ; le bouton reste en bas */
@media (max-width: 767px) {
  .sig-hero-2 { min-height: 138vw; }
  .sig-hero-2 .sig-hero-body { position: absolute; inset: 0; max-width: none; padding: 0; }
  .sig-hero-2 .sig-hero-logo { position: absolute; left: 16px; top: 3.5%; width: 58px; margin: 0; }
  .sig-hero-2 .eyebrow { position: absolute; right: 7px; top: 2.6%; margin: 0; font-size: 12px; margin-right: -.2em; }   /* tout près du coin (l'espacement des lettres laisse déjà un blanc à droite) */
  .sig-hero-2 .slogan { margin: 0; font-size: clamp(28px, 8.8vw, 48px); line-height: 1; }
  .sig-hero-2 .slogan br { display: none; }
  .sig-hero-2 .slogan span { position: absolute; top: 19%; width: min-content; }
  .sig-hero-2 .slogan .s1 { right: 69%; text-align: right; }      /* collés de part et d'autre de sa tête */
  .sig-hero-2 .slogan .s2 { left: 72%; text-align: left; }
  .sig-hero-2 .btn { position: absolute; left: 16px; bottom: 20px; padding: 13px 18px; }
}
/* seconde photo : le texte se place dans l'espace libre entre le modèle et le bidon (sur mobile : en bas, comme la première) */
@media (min-width: 768px) {
  .sig-hero-2 { align-items: flex-start; }
  /* sur le mur, dans le cadre que dessinent le dossier du canapé (en bas), le modèle (à gauche) et le bidon (à droite) */
  .sig-hero-2 .sig-hero-body { display: block; width: auto; margin-left: 53.5%; position: static; padding: 4.5% 0 0; max-width: 26%; }
  .sig-hero-2 .eyebrow { margin-bottom: 6px; }
  .sig-hero-2 .btn { position: absolute; left: 53.5%; top: 46%; white-space: nowrap; }   /* le bouton garde sa place, devant le canapé */
  .sig-hero-2 .slogan { font-size: clamp(28px, 3.7vw, 58px); margin-bottom: 0; }
  .sig-hero-2 .sig-hero-logo { width: clamp(52px, 5.8vw, 86px); margin-bottom: 16px; }
}

/* ---------- Sélection & carrousel ---------- */
.section-head { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; padding: 0 var(--pad); margin-bottom: 24px; }
.carousel-track {
  display: flex; gap: 12px; overflow-x: auto; padding: 0 var(--pad);
  scroll-snap-type: x mandatory; scroll-padding-inline: var(--pad); scrollbar-width: none; -webkit-overflow-scrolling: touch;
}
.carousel-track::-webkit-scrollbar { display: none; }
.carousel-track > .card { flex: 0 0 72%; scroll-snap-align: start; }
@media (min-width: 600px) { .carousel-track > .card { flex-basis: 40%; } }
@media (min-width: 1024px) { .carousel-track { gap: 20px; } .carousel-track > .card { flex-basis: calc((100% - 60px) / 4); } }
.carousel-nav { display: flex; align-items: center; justify-content: center; gap: 12px; margin-top: 24px; }
.carousel-progress { position: relative; width: min(42vw, 200px); height: 1px; background: rgba(13, 12, 11, .28); }
.carousel-progress span { position: absolute; top: -1px; left: 0; height: 3px; width: 20%; background: var(--ink); }
.car-btn { width: 40px; height: 40px; display: grid; place-items: center; }
.car-btn svg { width: 16px; height: 16px; stroke-width: 2; }
.carousel.no-scroll .carousel-nav { display: none; }

/* ---------- Cartes produit ---------- */
.product-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 32px 12px; }
@media (min-width: 1024px) { .product-grid { grid-template-columns: repeat(4, 1fr); gap: 56px 20px; } }
.card { position: relative; min-width: 0; }
.card-media { position: relative; display: block; aspect-ratio: 1 / 1; background: var(--tile); overflow: hidden; }
/* Toutes les photos produits ont la même toile : même cadrage = même échelle à l'écran */
.card-media img.product { position: absolute; inset: 3%; width: 94%; height: 94%; object-fit: contain; mix-blend-mode: multiply; transition: transform .6s var(--ease); }
.card:hover .card-media img.product { transform: scale(1.03); }

/* Vêtement qui tourne sur lui-même : support .turn (face + dos) pivoté par le script (« Vêtements qui tournent », js/app.js).
   Le fondu « multiply » est porté par le support : le blanc des photos reste fondu dans la vignette pendant la rotation. */
.turn { position: absolute; inset: 3%; display: block; mix-blend-mode: multiply; will-change: transform; }
.card-media .turn img.product, .pdp-media .turn img.product, .card:hover .card-media .turn img.product {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; mix-blend-mode: normal; transform: none; transition: none;
  pointer-events: none; -webkit-user-drag: none;
}
.turn .back { visibility: hidden; }
/* rendu en volume (js/volume.js) : un canvas posé sur le support, visible seulement pendant la rotation et de dos */
.turn canvas.turn-vol { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; display: none; pointer-events: none; }
.turn.in-vol canvas.turn-vol { display: block; }
.turn.in-vol img.product { visibility: hidden !important; }
.turn.is-back .front { visibility: hidden; }
.turn.is-back .back { visibility: visible; }
.pdp-media .turn { inset: 4%; cursor: grab; touch-action: pan-y; -webkit-user-select: none; user-select: none; }
.pdp-media .turn.dragging { cursor: grabbing; }
.turn-hint {
  position: absolute; left: 0; right: 0; bottom: 12px; margin: 0; display: flex; align-items: center; justify-content: center; gap: 8px;
  font: 500 10px/1 var(--sans); letter-spacing: .14em; text-transform: uppercase; color: #8C8C8C; pointer-events: none;
}
.turn-hint svg { width: 16px; height: 16px; stroke-linecap: round; stroke-linejoin: round; }
.fav-btn { position: absolute; top: 2px; right: 2px; z-index: 2; width: 42px; height: 42px; display: grid; place-items: center; color: var(--ink); }
.fav-btn svg { width: 19px; height: 19px; stroke-linejoin: round; }
.fav-btn.on svg { fill: var(--red); stroke: var(--red); }
.card-info { display: block; text-align: center; padding: 14px 4px 0; }
.card-name { display: block; font: 500 12px/1.35 var(--sans); letter-spacing: .06em; text-transform: uppercase; }
.card-price { display: block; margin-top: 6px; font-size: 13px; color: var(--muted); }

/* ---------- Boutique ---------- */
.page-head { padding: 36px var(--pad) 24px; }
.page-head .eyebrow { margin-bottom: 12px; }
.filters {
  position: sticky; top: calc(var(--header-h) + env(safe-area-inset-top)); z-index: 20; background: var(--bg);
  display: flex; gap: 20px; overflow-x: auto; padding: 0 var(--pad); border-bottom: 1px solid var(--line); scrollbar-width: none;
}
.filters::-webkit-scrollbar { display: none; }
@media (max-width: 767px) {
  .filters { -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 28px), transparent); mask-image: linear-gradient(90deg, #000 calc(100% - 28px), transparent); }
}
@media (max-width: 400px) { .filters { gap: 16px; } .tab { font-size: 11px; } }
.tab {
  flex: none; height: 50px; font: 500 12px/1 var(--sans); letter-spacing: .07em; text-transform: uppercase; white-space: nowrap;
  color: var(--muted); border-bottom: 2px solid transparent; transition: color .2s var(--ease);
}
.tab:hover { color: var(--ink); }
.tab.active { color: var(--ink); border-bottom-color: var(--ink); }
.size-filter { display: flex; flex-wrap: wrap; gap: 6px; padding: 16px var(--pad) 0; }
.chip { min-width: 52px; min-height: 44px; padding: 0 14px; border: 1px solid var(--line); font: 500 13px/1 var(--sans); transition: all .2s var(--ease); }
.chip:hover { border-color: var(--ink); }
.chip.active { background: var(--ink); color: #fff; border-color: var(--ink); }
.result-count { padding: 18px var(--pad) 0; margin: 0 0 18px; font-size: 12px; letter-spacing: .04em; color: var(--muted); }
.shop .product-grid, [data-view="favoris"] .product-grid { padding: 0 var(--pad) var(--section); }
.empty { grid-column: 1 / -1; padding: 40px 0; text-align: center; color: var(--muted); }
/* Favoris : tout sur fond neutre. Les instrumentales gardent le vert de la page son pour leurs textes,
   en version foncée (le vert néon serait illisible sur blanc) ; le rond de lecture reste le même que sur la page. */
.fav-music {
  --n-bg: var(--bg); --n-fade: 255, 255, 255;
  --n-text: #0A6B49; --n-muted: rgba(10, 107, 73, .7);
  --n-line: rgba(10, 107, 73, .18); --n-line-2: rgba(10, 107, 73, .38);
  --green: #0C8F61; --on-green: #FFFFFF; --green-hi: #3FCB9A; --green-dim: #8FD2B8; --green-preview: #49BF92;
  --n-wave: #BCCEC6;
  background: var(--bg); color: var(--n-text); padding: 8px var(--pad) 48px;
}
.fav-music .heading { margin-bottom: 20px; color: var(--n-text); }
.fav-music .vinyl { background: #03130F; border-color: #03130F; }
.fav-music .vinyl:hover, .fav-music .track.current .vinyl { border-color: var(--green); box-shadow: 0 0 0 2px var(--green); }
.fav-clothing { padding-top: 40px; border-top: 1px solid var(--line); }
.fav-clothing:first-of-type, [data-fav-music][hidden] + .fav-clothing { border-top: 0; padding-top: 8px; }
.fav-clothing .heading { padding: 0 var(--pad); margin-bottom: 24px; }
.fav-empty { padding: 24px var(--pad) var(--section); }
.fav-empty-links { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin-top: 24px; }
.fav-empty-links .btn { margin: 0; }
.empty .heading { margin-bottom: 12px; color: var(--ink); }
.empty .btn { margin-top: 24px; }

/* ---------- Fiche produit ---------- */
.pdp { display: grid; }
.pdp-media { position: relative; aspect-ratio: 1 / 1; background: var(--tile); }
.pdp-media img.product { position: absolute; inset: 4%; width: 92%; height: 92%; object-fit: contain; mix-blend-mode: multiply; }
/* galerie : la grande image, et dessous une rangée de vignettes (face, côté, dos...) ; la vignette choisie passe en grand */
.pdp-thumbs { display: flex; gap: 8px; padding: 8px var(--pad) 0; overflow-x: auto; scrollbar-width: none; }
.pdp-thumbs::-webkit-scrollbar { display: none; }
.pdp-thumb { position: relative; flex: none; width: 72px; aspect-ratio: 1; background: var(--tile); border: 1px solid transparent; padding: 0; cursor: pointer; transition: border-color .2s var(--ease); }
.pdp-thumb img { position: absolute; inset: 4%; width: 92%; height: 92%; object-fit: contain; mix-blend-mode: multiply; }
.pdp-thumb:hover { border-color: rgba(13, 12, 11, .3); }
.pdp-thumb.on { border-color: var(--ink); }
@media (min-width: 900px) { .pdp-thumbs { padding: 10px 0 0; gap: 10px; } .pdp-thumb { width: 88px; } }
.pdp-info { padding: 28px var(--pad) 48px; }
.pdp-back { display: inline-flex; align-items: center; gap: 8px; margin: 0 0 18px; padding: 9px 14px 9px 10px; border: 1px solid rgba(13, 12, 11, .12); border-radius: var(--pill); background: rgba(13, 12, 11, .035); font: 600 11px/1 var(--sans); letter-spacing: .12em; text-transform: uppercase; }
.pdp-back svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.pdp-back:hover { background: rgba(13, 12, 11, .08); }
@media (min-width: 900px) {
  .pdp { grid-template-columns: 1.15fr 1fr; gap: 56px; padding: 32px var(--pad) 0; align-items: start; }
  .pdp-gallery { position: sticky; top: calc(var(--header-h) + 24px); }
  .pdp-info { padding: 16px 0 64px; max-width: 480px; }
}
.crumbs { font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); margin: 0 0 20px; }
.crumbs a:hover { color: var(--ink); }
.pdp-name { font: 700 clamp(28px, 7.6vw, 40px)/1.05 var(--sans); font-stretch: 112%; letter-spacing: .005em; text-transform: uppercase; margin: 0 0 8px; }
.pdp-sub { color: var(--muted); margin: 0 0 20px; }
.pdp-price { font-size: 17px; margin: 0 0 30px; }
.label-row { display: flex; justify-content: space-between; font: 500 12px/1 var(--sans); letter-spacing: .1em; text-transform: uppercase; margin-bottom: 12px; }
.sizes { display: grid; grid-template-columns: repeat(6, 1fr); gap: 6px; margin-bottom: 8px; }
.size { min-height: 48px; border: 1px solid var(--line); font: 500 13px/1 var(--sans); transition: all .2s var(--ease); }
.size:hover { border-color: var(--ink); }
.size.active { background: var(--ink); color: #fff; border-color: var(--ink); }
.size[disabled] { opacity: .3; text-decoration: line-through; cursor: not-allowed; }
.size-hint { font-size: 12px; color: var(--red); min-height: 18px; margin: 0 0 14px; }
.pdp-actions { display: grid; grid-template-columns: 1fr 52px; gap: 8px; margin-bottom: 12px; }
.pdp-actions .fav-btn { position: static; width: 52px; height: 52px; border: 1px solid var(--line); }
.pdp-note { font-size: 13px; color: var(--muted); margin: 16px 0 28px; }
.pdp-links { margin-top: 8px; }
.related { padding: 8px 0 var(--section); }
@media (min-width: 900px) { .related { padding-top: 32px; } }
.related .heading { text-align: center; padding: 0 var(--pad); margin-bottom: 28px; }

/* ---------- Accordéons ---------- */
.acc { border-top: 1px solid var(--line); }
.acc:last-child { border-bottom: 1px solid var(--line); }
.acc-btn {
  width: 100%; min-height: 56px; display: flex; align-items: center; justify-content: space-between; gap: 16px; text-align: left;
  font: 500 12px/1.3 var(--sans); letter-spacing: .1em; text-transform: uppercase;
}
.plus { position: relative; flex: none; width: 13px; height: 13px; }
.plus::before, .plus::after { content: ""; position: absolute; background: currentColor; }
.plus::before { left: 0; right: 0; top: 6px; height: 1px; }
.plus::after { top: 0; bottom: 0; left: 6px; width: 1px; transition: transform .25s var(--ease); }
.acc.open .plus::after { transform: scaleY(0); }
.acc-panel { display: none; padding: 0 0 20px; font-size: 14px; color: var(--muted); }
.acc-panel p { margin: 0 0 8px; }
.acc.open .acc-panel { display: block; }

/* ---------- Barre d'achat mobile ---------- */
.buybar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 35; padding: 10px var(--pad) calc(10px + env(safe-area-inset-bottom));
  background: var(--bg); border-top: 1px solid var(--line); animation: inUp .3s var(--ease);
}
body.locked .buybar { display: none; }
@media (min-width: 900px) { .buybar { display: none !important; } }

/* ---------- Music : vert nocturne, formes d'onde, pads carrés ----------
   Palette propre à la partie son (la partie vêtements garde blanc / noir / rouge). */
.music, .player, .sound, .cart-disc {
  --n-bg: #03130F;                 /* fond : vert nuit très profond */
  --n-fade: 3, 19, 15;             /* même teinte, pour fondre les photos dans la page */
  --n-surface: #0A2019;
  --n-surface-2: #103024;
  --n-line: rgba(150, 255, 210, .14);
  --n-line-2: rgba(150, 255, 210, .32);
  --n-text: #ECF8F2;
  --n-muted: rgba(236, 248, 242, .62);
  --green: #3CDFA0;                /* accent : vert néon des photos de scène */
  --green-hi: #A5F8D8;             /* haut des barres jouées (dégradé) */
  --green-dim: #249C6F;            /* partie jouée, au-delà de la souris */
  --green-preview: #2FB788;        /* aperçu : de la tête de lecture jusqu'à la souris */
  --n-wave: #55736A;               /* barres non jouées */
  --on-green: #03130F;
}
.music { background: var(--n-bg); color: var(--n-text); min-height: 70vh; }
.btn-green { background: var(--green); color: var(--on-green); }
.btn-green:hover { background: #fff; }
.btn-outline-green { border: 1px solid var(--n-line-2); color: var(--n-text); }
.btn-outline-green:hover { border-color: var(--green); color: var(--green); }

/* Bannière : photo portrait sur mobile, paysage à partir de la tablette */
.music-hero {
  position: relative; overflow: hidden; background: #000; min-height: 420px;
  height: min(calc(88vh - var(--header-h)), 125vw);
  height: min(calc(88svh - var(--header-h)), 125vw);
}
.music-hero-media { position: absolute; inset: 0; }
.music-hero::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(var(--n-fade), 0) 40%, rgba(var(--n-fade), .86) 86%, var(--n-bg) 100%); pointer-events: none; }
.music-hero-content { position: absolute; left: var(--pad); right: var(--pad); bottom: 32px; z-index: 2; }
.music-hero .heading { font-size: clamp(34px, 10vw, 72px); color: #fff; }
/* Titre : le logo officiel (en blanc) à la place de « 6PA » écrit, suivi de « Music » */
/* Logo + mot : le logo fait deux fois la hauteur des capitales (--cap, mesurée sur la police Archivo), et son carré
   central tombe pile à mi-hauteur des lettres (le milieu du M) — il dépasse donc autant au-dessus qu'en dessous. */
.music-title, .to-clothing-name { --cap: .693em; display: flex; align-items: center; gap: .3em; }
.title-logo, .to-clothing-logo { flex: none; transform: translateY(-.02em); }       /* milieu de la ligne -> milieu exact des capitales */
.title-logo img { display: block; height: calc(2 * var(--cap)); width: auto; filter: invert(1); }
.music-intro { margin: 12px 0 22px; font-size: 12px; letter-spacing: .16em; text-transform: uppercase; color: var(--green); }
@media (min-width: 768px) {
  .music-hero { height: min(56.25vw, calc(100vh - var(--header-h))); height: min(56.25vw, calc(100svh - var(--header-h))); }
  .music-hero-content { bottom: clamp(28px, 6vh, 56px); }
  .music-intro { font-size: 13px; }
}

/* Catalogue : filtres par style, classement, une ligne par morceau */
.catalogue { padding: var(--section) var(--pad); max-width: 1280px; margin: 0 auto; }
.catalogue-head { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; margin-bottom: 24px; }
.catalogue .heading { color: var(--n-text); }
.catalogue-count { font: 500 11px/1 var(--sans); letter-spacing: .14em; text-transform: uppercase; color: var(--n-muted); white-space: nowrap; }
.beat-controls { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 14px 24px; margin-bottom: 20px; }
.beat-styles { display: flex; flex-wrap: wrap; gap: 6px; }
.chip.dark { border-color: var(--n-line-2); color: var(--n-text); min-height: 38px; font-size: 12px; letter-spacing: .08em; text-transform: uppercase; }
.chip.dark:hover { border-color: var(--green); }
.chip.dark.active { background: var(--green); color: var(--on-green); border-color: var(--green); }
.beat-sort { display: flex; align-items: center; gap: 4px; font: 500 11px/1 var(--sans); letter-spacing: .14em; text-transform: uppercase; color: var(--n-muted); }
.beat-sort span { margin-right: 8px; }
.sort-btn { min-height: 38px; padding: 0 10px; color: var(--n-muted); letter-spacing: .14em; text-transform: uppercase; border-bottom: 1px solid transparent; }
.sort-btn:hover { color: var(--n-text); }
.sort-btn.active { color: var(--green); border-bottom-color: var(--green); }

/* Ligne de morceau : lecture (logo 6PA dans le rond), titre, étiquettes, favori + panier, puis la forme d'onde */
.tracklist { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--n-line); }
.track {
  display: grid; grid-template-columns: 52px minmax(0, 1fr) auto; grid-template-areas: "play main buy" "wave wave wave";
  gap: 14px 12px; align-items: center; padding: 18px 0 16px; border-bottom: 1px solid var(--n-line);
}
.track-play { grid-area: play; width: 52px; height: 52px; }

/* Rond de lecture : le rond simple, avec le logo vert au centre (le vert du bouton « Écouter »). Sa forme ne change pas :
   seul le logo tourne, comme un vinyle (pendant la lecture, ou quand la souris glisse sur la forme d'onde,
   voir « Vinyle » dans js/app.js). */
.vinyl {
  position: relative; display: block; flex: none; border-radius: 50%; border: 1px solid var(--n-line-2);
  transition: border-color .2s var(--ease), box-shadow .2s var(--ease), transform .12s var(--ease);
}
.vinyl-face { position: absolute; inset: 0; border-radius: 50%; display: grid; place-items: center; will-change: transform; }
.vinyl-logo { display: block; width: 54%; height: auto; pointer-events: none; }
.vinyl svg { width: 34%; height: 34%; fill: var(--green); stroke: none; }
.vinyl:hover, .track.current .vinyl, .player.is-playing .vinyl { border-color: var(--green); box-shadow: 0 0 0 1px var(--green); }
.vinyl:active { transform: scale(.94); }
.track-main { grid-area: main; min-width: 0; }
.track-title { display: block; font: 700 clamp(16px, 4.6vw, 20px)/1.15 var(--sans); font-stretch: 110%; letter-spacing: .02em; text-transform: uppercase; overflow-wrap: anywhere; }
.track.current .track-title { color: var(--green); }
.track-sub { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 8px; font: 500 10px/1 var(--sans); letter-spacing: .12em; text-transform: uppercase; color: var(--n-muted); }
.track-n { margin-right: 2px; font-variant-numeric: tabular-nums; }
.tag { border: 1px solid var(--n-line-2); padding: 5px 7px; color: var(--n-text); }
.track-actions { grid-area: buy; display: flex; align-items: center; gap: 4px; }
.t-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px; width: 40px; height: 40px;
  border: 1px solid var(--n-line-2); color: var(--n-text); font: 600 10px/1 var(--sans); letter-spacing: .14em; text-transform: uppercase; white-space: nowrap;
  transition: background .2s var(--ease), border-color .2s var(--ease), color .2s var(--ease);
}
.t-btn svg { width: 18px; height: 18px; flex: none; stroke-linejoin: round; }
.t-btn:hover { border-color: var(--green); color: var(--green); }
.t-btn.fav { border-color: transparent; }
.t-btn.fav.on { color: var(--green); }
.t-btn.fav.on svg { fill: currentColor; }
.t-btn.cart span { display: none; }
.t-btn.cart.on { background: var(--green); border-color: var(--green); color: var(--on-green); }
@media (min-width: 600px) { .t-btn.cart { width: auto; padding: 0 14px; } .t-btn.cart span { display: inline; } }
.out { width: 14px; height: 14px; flex: none; }

/* Forme d'onde : dessinée sur canvas (voir drawWave dans js/app.js) ; repères de temps posés sur la ligne de base */
.wave { grid-area: wave; position: relative; height: 64px; }
.wave canvas { display: block; width: 100%; height: 100%; cursor: pointer; touch-action: manipulation; }
.wave-t {
  position: absolute; top: 70%; transform: translateY(calc(-100% - 1px)); padding: 3px 4px; background: rgba(var(--n-fade), .84);
  font: 500 10px/1 var(--sans); font-variant-numeric: tabular-nums; pointer-events: none;
}
.wave-t.cur { left: 0; color: var(--green); }
.wave-t.dur { right: 0; color: var(--n-muted); }
/* Temps sous la souris : suit le pointeur, à droite du trait (à gauche près du bord) */
.wave-t.hov { top: 0; z-index: 1; transform: translateX(6px); background: var(--green); color: var(--on-green); font-weight: 600; }
.wave-t.hov.flip { transform: translateX(calc(-100% - 6px)); }
@media (min-width: 900px) {
  .track { grid-template-columns: 56px 220px minmax(0, 1fr) auto; grid-template-areas: "play main wave buy"; gap: 24px; padding: 18px 0; }
  .track-play { width: 56px; height: 56px; }
  .wave { height: 76px; }
}
.beats-empty { margin: 0; padding: 40px 0; color: var(--n-muted); border-top: 1px solid var(--n-line); border-bottom: 1px solid var(--n-line); }
.beats-empty strong { display: block; font: 600 15px/1.2 var(--sans); font-stretch: 108%; letter-spacing: .04em; text-transform: uppercase; color: var(--n-text); margin-bottom: 8px; }

/* Photos de scène : "wide" = pleine largeur, "tall" = portrait */
.music-gallery { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; padding: 0 var(--pad) var(--section);
  /* diffusion : le vert nuit passe lentement au noir de la photo du dessous, derrière la photo en plan large */
  background: linear-gradient(180deg, rgba(1, 4, 7, 0) calc(var(--diff-start, 60%) + (100% - var(--diff-start, 60%)) * 0), rgba(1, 4, 7, .12) calc(var(--diff-start, 60%) + (100% - var(--diff-start, 60%)) * 0.25), rgba(1, 4, 7, .36) calc(var(--diff-start, 60%) + (100% - var(--diff-start, 60%)) * 0.5), rgba(1, 4, 7, .66) calc(var(--diff-start, 60%) + (100% - var(--diff-start, 60%)) * 0.75), rgba(1, 4, 7, .88) calc(var(--diff-start, 60%) + (100% - var(--diff-start, 60%)) * 1)) var(--n-bg); }
.mg-item { position: relative; overflow: hidden; background: #000; }
.mg-item.wide { grid-column: 1 / -1; aspect-ratio: 3 / 2; }
.mg-item.tall { aspect-ratio: 4 / 5; }
.only-desktop { display: none; }
@media (min-width: 768px) {
  .music-gallery { grid-template-columns: repeat(3, 1fr); gap: 20px; }
  .mg-item.wide { aspect-ratio: 16 / 9; }
  .only-mobile { display: none; }
  .only-desktop { display: block; }
}

/* Demande d'instrumentale : le logo 6PA Music posé sur le haut du faisceau, le texte et le bouton en bas.
   --logo-y = position du bas du logo dans la hauteur du bloc (le haut du faisceau de la photo). */
.music-cta {
  position: relative; overflow: visible; background: #000; text-align: center;
  display: flex; flex-direction: column; align-items: center; justify-content: flex-end;
  min-height: 160vw; padding: 28px var(--pad) 44px;
}
.music-cta-media { position: absolute; inset: 0; overflow: hidden; }
.music-cta::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(180deg, rgba(var(--n-fade), .12) 0, rgba(var(--n-fade), .05) 40px, rgba(var(--n-fade), 0) 90px),
    linear-gradient(180deg, rgb(1, 4, 7) 0, rgba(1, 4, 7, .93) calc(min(380px, var(--fog-y, 300px) * .85) * .15), rgba(1, 4, 7, .72) calc(min(380px, var(--fog-y, 300px) * .85) * .35), rgba(1, 4, 7, .44) calc(min(380px, var(--fog-y, 300px) * .85) * .55), rgba(1, 4, 7, .2) calc(min(380px, var(--fog-y, 300px) * .85) * .75), rgba(1, 4, 7, .05) calc(min(380px, var(--fog-y, 300px) * .85) * .9), rgba(1, 4, 7, 0) min(380px, var(--fog-y, 300px) * .85), rgba(13, 12, 11, 0) 54%, rgba(13, 12, 11, .88) 82%, #0D0C0B 100%);   /* le bas finit dans le noir neutre de la bande Clothing */
}
.music-logo { position: absolute; z-index: 2; left: 50%; top: var(--logo-y, 30%); width: min(46vw, 190px); transform: translate(-50%, -100%); }
.music-logo img { display: block; width: 100%; height: auto; }
.music-logo .ph { position: static; aspect-ratio: 1.3; border: 1px dashed var(--n-line-2); background: transparent; color: var(--n-muted); }
.music-cta-text { position: relative; z-index: 2; }
.music-cta-text .heading { color: #fff; }
.music-cta-text p { color: var(--n-muted); margin: 12px auto 24px; max-width: 40ch; }
.music-cta-text .ig-note { margin: 16px auto 0; font: 500 11px/1.4 var(--sans); letter-spacing: .12em; text-transform: uppercase; }
.music-cta-text .ig-note span { color: var(--n-text); }
@media (min-width: 768px) {
  .music-cta { min-height: clamp(660px, 56.25vw, 92vh); min-height: clamp(660px, 56.25vw, 92svh); padding: 36px var(--pad) 56px; }
  .music-logo { width: 230px; --logo-y: 33%; }
}
@media (min-width: 1024px) { .music-logo { width: 270px; } }

/* Accès à la page Clothing : bandeau de texte aux couleurs de l'autre page (blanc, texte noir).
   Quand on le survole il « s'allume » : il passe au noir et se fond avec la photo du dessus, et un semis de petits logos 6PA
   apparaît, ton sur ton et comme gravés (façon toile monogramme ; tuile générée à partir du logo officiel).
   Sur un écran tactile, sans survol, il s'allume de lui-même en arrivant à l'écran (classe .lit posée par js/app.js). */
.to-clothing {
  position: relative; isolation: isolate; overflow: hidden;
  display: grid; gap: 12px; padding: 48px var(--pad); background: var(--bg); color: var(--ink);
  transition: background .3s var(--ease), color .3s var(--ease);
}
.to-clothing::before {
  content: ""; position: absolute; inset: 0; z-index: -1; opacity: 0; transition: opacity .45s var(--ease);
  /* le semis de logos, et dessous un dégradé qui part de la teinte exacte du bas de la photo : aucune couture entre les deux */
  /* petits logos en relief (caoutchouc mat), puis le tissage du logo brodé en calque transparent, sur le noir de la bande */
  /* de haut en bas des calques : lueur de cinéma en contre-jour depuis le bas (choix B de Thomas), petits logos en relief, tissage,
     fondu depuis le noir verdâtre de la page Music qui recouvre le haut du tissage (raccord sans démarcation), petits logos en relief, tissage, sur le noir de la bande */
  background: linear-gradient(180deg, #0D0C0B 0%, rgba(13, 12, 11, .96) 12%, rgba(13, 12, 11, .84) 24%, rgba(13, 12, 11, .64) 38%, rgba(13, 12, 11, .4) 54%, rgba(13, 12, 11, .18) 72%, rgba(13, 12, 11, .05) 88%, rgba(13, 12, 11, 0) 100%) top / 100% 78% no-repeat,   /* fondu long et adouci (15/11, demande de Thomas : aucune barre visible en haut de la bande) */
              radial-gradient(ellipse 46% 72% at 50% 118%, rgba(255, 246, 232, .24) 0%, rgba(255, 246, 232, .09) 32%, rgba(255, 246, 232, 0) 62%),   /* contre-jour qui monte du bas, cœur plus marqué */
              radial-gradient(ellipse 110% 95% at 50% 60%, rgba(0, 0, 0, 0) 50%, rgba(0, 0, 0, .5) 100%),   /* bords plus sombres : garde du contraste autour de la lueur */
              url("../assets/logo/6pa-motif-relief.png") 0 0 / 64px 48px repeat,
              url("../assets/ui/tissage-noir.png") 0 0 / 121px 21px repeat;
  background-color: var(--ink);
}
.to-clothing .eyebrow { margin: 0; transition: color .3s var(--ease); }
.to-clothing-title {
  display: flex; align-items: center; justify-content: space-between; gap: 20px;
  font: 700 clamp(28px, 8vw, 64px)/1 var(--sans); font-stretch: 116%; letter-spacing: .005em; text-transform: uppercase;
}
.to-clothing-title .arr { width: clamp(26px, 5vw, 46px); height: clamp(26px, 5vw, 46px); }
/* Le logo officiel remplace « 6PA » écrit en toutes lettres ; il s'inverse quand le bandeau passe au noir */
.to-clothing-name { min-width: 0; }
.to-clothing-logo img { display: block; height: calc(2 * var(--cap)); width: auto; transition: filter .3s var(--ease); }
.to-clothing-sub { font-size: 14px; color: var(--muted); transition: color .3s var(--ease); }
/* Le survol ne compte qu'avec une souris : sur iPhone, un toucher laisse un « survol » collé qui garderait le bandeau allumé. */
.to-clothing:is(:focus-visible, .lit) { background: var(--ink); color: #fff; }
.to-clothing:is(:focus-visible, .lit)::before { opacity: 1; }
.to-clothing:is(:focus-visible, .lit) .to-clothing-logo img { filter: invert(1); }
.to-clothing:is(:focus-visible, .lit) :is(.eyebrow, .to-clothing-sub) { color: rgba(255, 255, 255, .7); }
.to-clothing.lit .arr { transform: translateX(8px); }
@media (hover: hover) {
  .to-clothing.hov { background: var(--ink); color: #fff; }
  .to-clothing.hov::before { opacity: 1; }
  .to-clothing.hov .to-clothing-logo img { filter: invert(1); }
  .to-clothing.hov :is(.eyebrow, .to-clothing-sub) { color: rgba(255, 255, 255, .7); }
  .to-clothing.hov .arr { transform: translateX(8px); }
}
@media (min-width: 768px) { .to-clothing { padding: 72px var(--pad); } }

/* ---------- Bouton du son d'ambiance : une petite enceinte ----------
   L'image est détourée (assets/ui/enceinte.webp). La membrane est une seconde image posée par-dessus (enceinte-cone.webp) :
   elle bat avec les basses de la boucle en cours (js/pulse.js). Son coupé : l'enceinte s'éteint et sa pastille passe en « muet ». */
.sound {
  position: fixed; right: var(--pad); bottom: calc(14px + env(safe-area-inset-bottom)); z-index: 34;
  display: block; width: 50px; aspect-ratio: 384 / 465; padding: 0; background: none; border: 0; cursor: pointer;
  -webkit-tap-highlight-color: transparent; transition: transform .25s var(--ease);
}
.sound:focus-visible { outline: 2px solid var(--red); outline-offset: 5px; }
.spk { position: absolute; inset: 0; display: block; }
.spk-body { position: absolute; inset: 0; display: block; width: 100%; height: 100%; filter: drop-shadow(0 6px 7px rgba(0, 0, 0, .28)) drop-shadow(0 1px 2px rgba(0, 0, 0, .3)); transition: filter .35s var(--ease); }
.spk-cone { position: absolute; left: 20.93%; top: 28.21%; width: 56.98%; aspect-ratio: 1; background: url("../assets/ui/enceinte-cone.webp") center / 100% 100% no-repeat; transition: filter .35s var(--ease); will-change: transform; }
/* pendant que ça joue, la membrane et le halo suivent le son image par image : pas de transition qui les ralentirait */
.sound.on .spk-cone { transition: none; }
.spk-mute { position: absolute; left: 71.08%; top: 67.95%; width: 25.58%; aspect-ratio: 1; height: auto; opacity: 0; transition: opacity .25s var(--ease); }
/* son coupé : enceinte éteinte */
.sound.muted .spk-body { filter: grayscale(.92) brightness(.9) drop-shadow(0 6px 7px rgba(0, 0, 0, .28)) drop-shadow(0 1px 2px rgba(0, 0, 0, .3)); }
.sound.muted .spk-cone { filter: grayscale(.92) brightness(.9); }
.sound.muted .spk-mute { opacity: 1; }
/* étiquette au survol / au clavier (au-dessus de l'enceinte : l'onglet du lecteur occupe sa gauche) */
.sound-tip {
  position: absolute; right: 0; bottom: calc(100% + 10px); transform: translateY(6px); white-space: nowrap; padding: 9px 11px;
  background: var(--n-surface); color: var(--n-text); border: 1px solid var(--green);
  font: 600 10px/1 var(--sans); letter-spacing: .14em; text-transform: uppercase; opacity: 0; pointer-events: none; transition: opacity .2s var(--ease), transform .2s var(--ease);
}
.sound:focus-visible .sound-tip { opacity: 1; transform: none; }
@media (hover: hover) and (pointer: fine) {
  .sound:hover { transform: translateY(-3px); }
  .sound:hover .sound-tip { opacity: 1; transform: none; }
}
.sound:active { transform: scale(.95); }
@media (min-width: 768px) { .sound { width: 62px; bottom: calc(18px + env(safe-area-inset-bottom)); } }
body.has-buybar .sound { bottom: calc(86px + env(safe-area-inset-bottom)); }
body.locked .sound { display: none; }
/* Hors de la page Music (boucle de la partie Clothing), l'étiquette prend les couleurs neutres de cette partie */
body:not([data-page="music"]) .sound-tip { background: var(--ink); border-color: var(--ink); color: #fff; }

/* ---------- Lecteur (aux couleurs de la partie son) ----------
   Masqué sur la page Music. Ailleurs : une feuille qui sort du bord GAUCHE de l'écran.
   - .player        : cadre fixe, accroché à gauche, à mi-hauteur (repéré depuis le haut de l'écran) ;
   - .player-sheet  : la feuille qui glisse ; rangée (.closed) elle part à gauche de toute sa largeur ;
   - .player-grab   : la languette verticale, collée à droite de la feuille — seule partie visible quand tout est rangé.
   Le glissé au doigt est géré dans js/app.js (la feuille suit le doigt, puis se cale ouverte ou rangée). */
.player {
  /* Accroché à gauche et repéré depuis le HAUT de l'écran : la barre du navigateur, qui bouge en bas, ne le fait plus sauter. */
  position: fixed; left: 0; top: clamp(150px, 46svh, 460px); z-index: 40;
  width: min(calc(100vw - 50px), 460px); pointer-events: none; color: var(--n-text);
}
.player-sheet { position: relative; pointer-events: auto; transition: transform .46s cubic-bezier(.22, 1, .36, 1); will-change: transform; }
.player.closed .player-sheet { transform: translateX(-100%); }
.player.closed .player-main { box-shadow: none; }                 /* rangée : pas d'ombre qui dépasse du bord gauche */
.player.dragging .player-sheet { transition: none; }
.player-main {
  display: grid; grid-template-columns: 38px minmax(0, 1fr) auto auto auto auto auto; gap: 8px; align-items: center;
  padding: 9px 12px 9px max(12px, env(safe-area-inset-left));
  background: rgba(5, 26, 19, .86); -webkit-backdrop-filter: saturate(170%) blur(22px); backdrop-filter: saturate(170%) blur(22px);
  border: 1px solid rgba(236, 248, 242, .12); border-left: 0; border-radius: 0 22px 22px 0;
  box-shadow: 10px 10px 34px rgba(0, 0, 0, .26); touch-action: pan-y;
}
.player-btn { width: 38px; height: 38px; }
.player-info { min-width: 0; }
.player-title { margin: 0 0 3px; font: 600 12px/1.15 var(--sans); letter-spacing: .06em; text-transform: uppercase; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.player-meta { color: var(--n-muted); font-weight: 500; }
/* barre de position : un trait fin (la partie lue en vert, --p posé par js/app.js) et un petit curseur ; zone de toucher plus haute que le trait */
.player-bar { display: flex; align-items: center; height: 18px; }
.player-bar input { -webkit-appearance: none; appearance: none; display: block; width: 100%; height: 18px; margin: 0; padding: 0; background: none; cursor: pointer; }
.player-bar input::-webkit-slider-runnable-track { height: 3px; border-radius: 3px; background: linear-gradient(90deg, var(--green) var(--p, 0%), rgba(236, 248, 242, .2) var(--p, 0%)); }
.player-bar input::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; width: 11px; height: 11px; margin-top: -4px; border: 0; border-radius: 50%; background: var(--green); box-shadow: 0 0 0 3px rgba(60, 223, 160, .16); }
.player-bar input::-moz-range-track { height: 3px; border-radius: 3px; background: rgba(236, 248, 242, .2); }
.player-bar input::-moz-range-progress { height: 3px; border-radius: 3px; background: var(--green); }
.player-bar input::-moz-range-thumb { width: 11px; height: 11px; border: 0; border-radius: 50%; background: var(--green); box-shadow: 0 0 0 3px rgba(60, 223, 160, .16); }
.player-bar input:focus-visible { outline: 2px solid var(--green); outline-offset: 2px; border-radius: 6px; }
.player-time { font-size: 12px; color: var(--n-muted); font-variant-numeric: tabular-nums; }
.player-ic { width: 34px; height: 34px; display: grid; place-items: center; color: var(--n-text); }
.player-ic svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.player-ic svg .fill { fill: currentColor; stroke-width: 1.2; }
.player-ic:hover { color: var(--green); }
/* lecture / pause, entre « précédent » et « suivant » */
.player-play .ic-pause { display: none; }
.player.is-playing .player-play .ic-play { display: none; }
.player.is-playing .player-play .ic-pause { display: inline; stroke-width: 2.6; }
/* cœur : met le morceau en cours dans les favoris */
.player-fav.on { color: var(--green); }
.player-fav.on svg { fill: currentColor; }
.player-fav:active svg { transform: scale(.86); }
.player-fav svg { transition: transform .15s var(--ease); }
/* poignée */
.player-grab {
  /* languette verticale collée au bord droit de la feuille : seule partie visible quand le lecteur est rangé à gauche */
  position: absolute; left: calc(100% - 1px); top: 50%; transform: translateY(-50%);
  display: grid; place-items: center; min-height: 72px; padding: 14px 11px;
  background: rgba(5, 26, 19, .86); -webkit-backdrop-filter: saturate(170%) blur(22px); backdrop-filter: saturate(170%) blur(22px);
  border: 1px solid rgba(236, 248, 242, .12); border-left: 0; border-radius: 0 16px 16px 0; color: var(--n-text);
  box-shadow: 8px 6px 22px rgba(0, 0, 0, .22);
  cursor: grab; touch-action: none; -webkit-user-select: none; user-select: none; -webkit-tap-highlight-color: transparent;
}
.player.dragging .player-grab { cursor: grabbing; }
.player-grab-bar { display: block; width: 4px; height: 34px; border-radius: 4px; background: rgba(236, 248, 242, .5); transition: background .2s var(--ease), height .2s var(--ease); }
.player-grab:hover .player-grab-bar, .player.dragging .player-grab-bar { background: var(--green); height: 42px; }
.player-grab:focus-visible { outline: 2px solid var(--green); outline-offset: -4px; }
/* fiche produit sur mobile : le lecteur se pose au-dessus de la barre d'achat */
body.locked .player.closed { display: none; }
@media (max-width: 560px) {
  .player-main { grid-template-columns: 38px minmax(0, 1fr) auto auto auto auto; gap: 4px; }
  .player-time, .player-meta { display: none; }
}
@media (max-width: 359px) { .player-main { grid-template-columns: 38px minmax(0, 1fr) auto auto auto; } .player-prev { display: none; } }
@media (prefers-reduced-motion: reduce) { .player-sheet { transition: none; } }

/* ---------- Pied de page ---------- */
.footer { background: var(--soft); padding: 56px var(--pad) calc(40px + env(safe-area-inset-bottom)); }
.footer-tagline { margin: 6px 0 36px; font-size: 13px; color: var(--muted); }
.footer .acc-panel a, .footer .acc-panel .link { display: block; padding: 7px 0; font-size: 14px; color: var(--ink); }
.footer .acc-panel a:hover, .footer .acc-panel .link:hover { color: var(--bordeaux); }
.footer-social { display: flex; flex-wrap: wrap; gap: 24px; margin-top: 32px; }
.footer-social a { font-size: 14px; border-bottom: 1px solid currentColor; }
.footer-legal { margin: 36px 0 28px; font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
.footer-logo img { height: 46px; width: auto; }
@media (min-width: 768px) {
  .footer-cols { display: grid; grid-template-columns: repeat(3, 1fr); gap: 40px; max-width: 760px; }
  .footer .acc, .footer .acc:last-child { border: 0; }
  .footer .acc-btn { min-height: 0; margin-bottom: 14px; pointer-events: none; color: var(--muted); }
  .footer .plus { display: none; }
  .footer .acc-panel { display: block; padding: 0; }
  .footer-logo img { height: 60px; }
}

/* ---------- Tiroirs, recherche, modale ---------- */
.scrim { position: fixed; inset: 0; z-index: 60; background: rgba(13,12,11,.45); animation: fade .25s var(--ease); }
.drawer {
  position: fixed; top: 0; bottom: 0; z-index: 70; width: min(420px, 92vw); background: var(--bg);
  display: flex; flex-direction: column; padding-top: env(safe-area-inset-top);
}
.drawer-left { left: 0; animation: inLeft .35s var(--ease); }
.drawer-right { right: 0; animation: inRight .35s var(--ease); }
.drawer-head { display: flex; align-items: center; justify-content: space-between; height: var(--header-h); padding: 0 10px 0 24px; border-bottom: 1px solid var(--line); flex: none; }
.drawer-title { font: 700 13px/1 var(--sans); font-stretch: 112%; letter-spacing: .2em; text-transform: uppercase; }
.menu-nav { padding: 20px 24px; display: flex; flex-direction: column; }
.menu-nav a { font: 700 22px/1.2 var(--sans); font-stretch: 114%; letter-spacing: .01em; text-transform: uppercase; padding: 12px 0; }
.menu-nav .sub { font: 500 12px/1 var(--sans); font-stretch: 100%; letter-spacing: .12em; text-transform: uppercase; text-align: left; color: var(--muted); padding: 9px 0 9px 2px; }
.menu-nav a:hover, .menu-nav button:hover { color: var(--bordeaux); }
.menu-foot { margin-top: auto; padding: 24px; }

.search-panel { position: fixed; inset: 0 0 auto 0; z-index: 70; background: var(--bg); max-height: 85vh; overflow: auto; padding-top: env(safe-area-inset-top); animation: inTop .3s var(--ease); }
.search-bar { display: flex; align-items: center; gap: 12px; height: var(--header-h); padding: 0 10px 0 var(--pad); border-bottom: 1px solid var(--line); }
.search-bar input { flex: 1; border: 0; background: none; font: 500 16px/1 var(--sans); letter-spacing: .04em; outline: none; min-width: 0; color: var(--ink); }
.search-results { padding: 16px var(--pad) 24px; }
.search-item { display: grid; grid-template-columns: 56px 1fr auto; gap: 14px; align-items: center; padding: 10px 0; border-bottom: 1px solid var(--line); font-size: 13px; letter-spacing: .05em; text-transform: uppercase; }
.thumb { position: relative; display: block; aspect-ratio: 1 / 1; background: var(--tile); overflow: hidden; }
.thumb img { position: absolute; inset: 3%; width: 94%; height: 94%; object-fit: contain; mix-blend-mode: multiply; }
.thumb .ph { padding: 4px; font-size: 0; }
.thumb .ph::before { width: 14px; height: 14px; }
.search-hint { color: var(--muted); font-size: 13px; margin: 0; }

.cart-body { flex: 1; min-height: 0; overflow: auto; padding-bottom: env(safe-area-inset-bottom); }
.cart-split { margin: 0; padding: 14px 24px; background: var(--soft); font-size: 12px; color: var(--muted); }
.cart-sec { padding: 22px 24px 26px; border-bottom: 1px solid var(--line); }
.cart-h { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin: 0 0 6px; font: 700 13px/1 var(--sans); font-stretch: 112%; letter-spacing: .16em; text-transform: uppercase; }
.cart-h span { font: 400 12px/1 var(--sans); font-stretch: 100%; letter-spacing: .02em; text-transform: none; color: var(--muted); }
.cart-sec .total { margin-top: 18px; }
/* Instrumentale dans le panier : le même rond que sur la page (sur son fond vert nuit), cliquable pour réécouter */
.cart-disc { width: 60px; height: 60px; justify-self: center; align-self: start; background: var(--n-bg); }
.price { font-size: 12px; color: var(--muted); }
.cart-item { display: grid; grid-template-columns: 72px 1fr; gap: 16px; padding: 16px 0; border-bottom: 1px solid var(--line); }
.cart-item h4 { margin: 0 0 4px; font: 500 12px/1.35 var(--sans); letter-spacing: .06em; text-transform: uppercase; }
.cart-item .meta { margin: 0 0 10px; font-size: 12px; color: var(--muted); }
.cart-row { display: flex; align-items: center; justify-content: space-between; }
.qty { display: inline-flex; align-items: center; border: 1px solid var(--line); }
.qty button { width: 34px; height: 34px; }
.qty span { min-width: 24px; text-align: center; font-size: 13px; }
.remove { font-size: 11px; color: var(--muted); text-decoration: underline; }
.total { display: flex; justify-content: space-between; font-size: 13px; letter-spacing: .08em; text-transform: uppercase; margin-bottom: 8px; }
.cart-note { font-size: 12px; color: var(--muted); margin: 0 0 16px; }
.cart-empty { padding: 56px 24px; text-align: center; color: var(--muted); }
.cart-empty .heading { color: var(--ink); margin-bottom: 12px; font-size: 20px; }
.cart-empty .stack { margin-top: 24px; }

.modal { position: fixed; inset: 0; z-index: 80; display: grid; place-items: end center; }
@media (min-width: 640px) { .modal { place-items: center; padding: 24px; } }
.modal-card { position: relative; z-index: 1; width: 100%; max-width: 520px; max-height: 92vh; overflow: auto; background: var(--bg); padding: 28px 24px calc(28px + env(safe-area-inset-bottom)); animation: inUp .35s var(--ease); }
.modal-card .heading { margin: 0 0 8px; padding-right: 36px; }
.modal-close { position: absolute; top: 8px; right: 8px; }
.form { display: grid; gap: 14px; margin-top: 20px; }
.field label { display: block; font: 500 11px/1 var(--sans); letter-spacing: .14em; text-transform: uppercase; margin-bottom: 8px; }
.field input, .field textarea {
  width: 100%; border: 1px solid var(--line); background: #fff; padding: 14px; font: 400 16px/1.4 var(--sans); border-radius: 0; color: var(--ink);
}
.field input:focus, .field textarea:focus { outline: none; border-color: var(--ink); }
.order-summary { background: var(--tile); padding: 16px; font: 400 13px/1.6 var(--sans); white-space: pre-wrap; margin: 16px 0; }
.small-print { font-size: 12px; color: var(--muted); margin: 0; }
.order-lead { font-size: 14px; color: var(--muted); margin: 8px 0 0; }
.modal-card .small-print { margin-top: 14px; }
.stack { display: grid; gap: 8px; }

.toast {
  position: fixed; left: 50%; bottom: calc(24px + env(safe-area-inset-bottom)); z-index: 90; transform: translate(-50%, 20px);
  background: var(--ink); color: #fff; border: 1px solid var(--line-light); padding: 14px 20px; font-size: 13px;
  opacity: 0; pointer-events: none; transition: all .3s var(--ease); max-width: calc(100vw - 32px); text-align: center;
}
.toast.show { opacity: 1; transform: translate(-50%, 0); }
body.has-buybar .toast { bottom: calc(96px + env(safe-area-inset-bottom)); }
/* le message ne recouvre jamais la poignée du lecteur ni sa feuille */

.view { animation: fade .4s var(--ease); }
@keyframes fade { from { opacity: 0; } }
@keyframes inLeft { from { transform: translateX(-100%); } }
@keyframes inRight { from { transform: translateX(100%); } }
@keyframes inTop { from { transform: translateY(-100%); } }
@keyframes inUp { from { transform: translateY(40px); opacity: 0; } }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; transition: none !important; } }

/* Bannière avec une seule photo */
.hero-media.single { grid-template-columns: 1fr; }
.hero-media.single .hero-pane { display: block; }

/* =========================================================
   FORMES ARRONDIES ET MATIÈRES TRANSLUCIDES (esprit Apple)
   Plus aucun cadre à angles vifs : coins arrondis partout, et des surfaces « verre »
   (fond translucide + flou de ce qui se trouve derrière) à la place des aplats et des filets durs.
   Tout se règle ici : les rayons ci-dessous, puis une règle par famille d'éléments.
   Pour revenir aux angles droits : mettre tous les rayons à 0.
   ========================================================= */
:root {
  --r-xs: 8px;      /* repères de temps, petites pastilles */
  --r-s: 12px;      /* petits boutons, champs, vignettes du panier */
  --r-m: 16px;      /* boutons */
  --r-l: 22px;      /* vignettes produits, photos encadrées */
  --r-xl: 26px;     /* panneaux, feuilles, fenêtres */
  --pill: 999px;    /* étiquettes et filtres : en gélule */
  --glass: saturate(170%) blur(20px);
}

/* --- boutons --- */
.btn { border-radius: var(--r-m); }
.btn-light { background: rgba(255, 255, 255, .88); -webkit-backdrop-filter: var(--glass); backdrop-filter: var(--glass); }
.btn-outline { background: rgba(13, 12, 11, .035); border-color: rgba(13, 12, 11, .1); }
.btn-outline:hover { background: rgba(13, 12, 11, .07); border-color: rgba(13, 12, 11, .22); }
.btn-outline-light { background: rgba(255, 255, 255, .1); border-color: rgba(255, 255, 255, .22); -webkit-backdrop-filter: var(--glass); backdrop-filter: var(--glass); }
.btn-outline-light:hover { background: rgba(255, 255, 255, .18); border-color: rgba(255, 255, 255, .5); }
.btn-outline-green { background: rgba(236, 248, 242, .06); border-color: rgba(236, 248, 242, .14); }

/* --- filtres, tailles, quantités --- */
.chip { border-radius: var(--pill); background: rgba(13, 12, 11, .035); border-color: rgba(13, 12, 11, .1); }
.size { border-radius: var(--r-s); background: rgba(13, 12, 11, .03); border-color: rgba(13, 12, 11, .1); }
.qty { border-radius: var(--pill); overflow: hidden; background: rgba(13, 12, 11, .035); border-color: rgba(13, 12, 11, .1); }
.field input, .field textarea { border-radius: var(--r-s); }
.pdp-actions .fav-btn { border-radius: var(--r-m); background: rgba(13, 12, 11, .035); border-color: rgba(13, 12, 11, .1); }

/* --- page Music : verre sombre --- */
.chip.dark { background: rgba(236, 248, 242, .06); border-color: rgba(236, 248, 242, .12); }
.chip.dark:not(.active):hover { background: rgba(236, 248, 242, .11); border-color: rgba(60, 223, 160, .55); }
.tag { border: 0; border-radius: var(--pill); padding: 6px 10px; background: rgba(236, 248, 242, .08); }
.t-btn { border-radius: var(--r-s); background: rgba(236, 248, 242, .06); border-color: rgba(236, 248, 242, .12); }
.t-btn:hover { background: rgba(60, 223, 160, .1); }
.t-btn.fav { background: none; }
.t-btn.fav:hover { background: rgba(236, 248, 242, .06); }
/* déjà dans le panier : un voile vert plutôt qu'un pavé plein */
.t-btn.cart.on { background: rgba(60, 223, 160, .16); border-color: rgba(60, 223, 160, .5); color: var(--green); }
.t-btn.cart.on:hover { background: rgba(60, 223, 160, .24); }
.wave-t { border-radius: var(--r-xs); }
.sound-tip { border-radius: var(--r-s); -webkit-backdrop-filter: var(--glass); backdrop-filter: var(--glass); }
/* favoris (fond clair) : mêmes formes, teintes du vert foncé */
.fav-music .tag { background: rgba(12, 143, 97, .1); }
.fav-music .t-btn { background: rgba(12, 143, 97, .06); border-color: rgba(12, 143, 97, .2); }
.fav-music .t-btn.fav { background: none; }
.fav-music .t-btn.cart.on { background: rgba(12, 143, 97, .14); border-color: rgba(12, 143, 97, .45); color: var(--green); }

/* --- vignettes produits et photos : elles gardent leurs angles droits (seuls les boutons, étiquettes et panneaux sont arrondis) --- */
.order-summary, .cart-split { border-radius: var(--r-m); }
.cart-split { margin: 14px 16px 0; }

/* --- barres et panneaux : verre clair (l'en-tête reste plein : il doit rester lisible au-dessus des photos sombres) --- */
.buybar { background: rgba(255, 255, 255, .82); background: color-mix(in srgb, var(--bg) 82%, transparent); -webkit-backdrop-filter: var(--glass); backdrop-filter: var(--glass); border-radius: var(--r-l) var(--r-l) 0 0; border: 1px solid var(--line); border-bottom: 0; }
.scrim { -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
.drawer { background: rgba(255, 255, 255, .9); background: color-mix(in srgb, var(--bg) 90%, transparent); -webkit-backdrop-filter: var(--glass); backdrop-filter: var(--glass); overflow: hidden; }
.drawer-left { border-radius: 0 var(--r-xl) var(--r-xl) 0; }
.drawer-right { border-radius: var(--r-xl) 0 0 var(--r-xl); }
.search-panel { background: rgba(255, 255, 255, .9); background: color-mix(in srgb, var(--bg) 90%, transparent); -webkit-backdrop-filter: var(--glass); backdrop-filter: var(--glass); border-radius: 0 0 var(--r-xl) var(--r-xl); }
.modal-card { border-radius: var(--r-xl) var(--r-xl) 0 0; }
@media (min-width: 640px) { .modal-card { border-radius: var(--r-xl); } }
.toast { border-radius: var(--r-m); background: rgba(13, 12, 11, .82); -webkit-backdrop-filter: var(--glass); backdrop-filter: var(--glass); }


/* ---------- Pages légales (mentions légales, CGV, confidentialité) ---------- */
.legal-nav { display: flex; flex-wrap: wrap; gap: 8px 22px; padding: 0 var(--pad) 18px; border-bottom: 1px solid var(--line); }
.legal-nav a { font: 500 12px/1 var(--sans); letter-spacing: .07em; text-transform: uppercase; color: var(--muted); padding: 10px 0; border-bottom: 2px solid transparent; }
.legal-nav a[aria-current="page"] { color: var(--ink); border-bottom-color: var(--ink); }
.legal-body { max-width: 720px; padding: 8px var(--pad) var(--section); font-size: 15px; line-height: 1.65; }
.legal-body h2 { margin: 36px 0 10px; font: 600 13px/1.3 var(--sans); letter-spacing: .08em; text-transform: uppercase; }
.legal-body p, .legal-body ul { margin: 0 0 14px; }
.legal-body ul { padding-left: 20px; }
.legal-body a { text-decoration: underline; text-underline-offset: 2px; overflow-wrap: anywhere; }
.legal-date { margin-top: 36px !important; font-size: 12px; color: var(--muted); }
.footer-links { display: flex; flex-wrap: wrap; gap: 8px 20px; margin-top: 36px; }
.footer-links a { font-size: 12px; color: var(--muted); text-decoration: underline; text-underline-offset: 2px; }
.footer-links + .footer-legal { margin-top: 18px; }

/* ---------- Menu : même esprit que le bandeau « Clothing » allumé (fond noir, semis de petits logos 6PA ton sur ton) ---------- */
.drawer-left { background: rgba(13, 12, 11, .94); color: #fff; isolation: isolate; }
.drawer-left::before {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: url("../assets/logo/6pa-motif.png") 0 0 / 64px 48px repeat;
}
.drawer-left .drawer-head { border-bottom-color: var(--line-light); }
.drawer-left .icon-btn { color: #fff; }
.drawer-left .menu-nav .sub { color: rgba(255, 255, 255, .62); }
.drawer-left .menu-nav a:hover, .drawer-left .menu-nav button:hover { color: #fff; opacity: .7; }
.drawer-left .menu-foot.slogan, .drawer-left .menu-foot { color: #fff; }

/* ---------- Lecteur déplié : une carte compacte (plus une barre), excentrée vers le bas, sortie par la gauche ----------
   Ligne 1 : le disque + le titre et la barre de position. Ligne 2 : le temps et les commandes, larges et faciles à toucher. */
.player { top: clamp(190px, 58svh, 620px); width: auto; }
.player .player-main {
  width: min(calc(100vw - 52px), 300px);
  grid-template-columns: 52px repeat(4, minmax(0, 1fr));
  grid-template-areas: "disc info info info info" "time prev play next fav";
  gap: 10px 4px; padding: 14px 14px 12px max(14px, env(safe-area-inset-left)); border-radius: 0 24px 24px 0;
}
.player .player-btn.vinyl { grid-area: disc; width: 52px; height: 52px; }
.player .player-info { grid-area: info; align-self: center; }
.player .player-title { white-space: normal; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; font-size: 13px; line-height: 1.2; margin-bottom: 6px; }
.player .player-meta { display: inline; }
.player .player-time { display: block; grid-area: time; text-align: center; align-self: center; }
.player .player-prev { display: grid; grid-area: prev; }
.player .player-play { grid-area: play; }
.player [data-player-step="1"] { grid-area: next; }
.player .player-fav { grid-area: fav; }
.player .player-ic { width: 44px; height: 44px; justify-self: center; }
.player .player-play { background: var(--green); color: var(--on-green, #03130F); border-radius: 50%; }
.player .player-play:hover { color: var(--on-green, #03130F); filter: brightness(1.08); }
.player .player-play svg { width: 18px; height: 18px; }

/* ---------- Lecteur : réglages pour le téléphone (priorité) ----------
   - carte presque pleine largeur (on garde de la place pour la languette) : plus de place pour le titre et les boutons ;
   - boutons de 46 px et barre de position haute de 30 px : faciles à toucher au pouce, même en marchant ;
   - languette plus large et plus haute : on l'attrape sans viser, et sa partie utile dépasse la zone du bord de l'écran
     que l'iPhone réserve au geste « retour ». */
@media (max-width: 560px) {
  .player .player-main { width: min(calc(100vw - 62px), 360px); gap: 8px 2px; padding: 14px 12px 12px max(14px, env(safe-area-inset-left)); }
  .player .player-title { font-size: 14px; }
  .player .player-bar, .player .player-bar input { height: 30px; }
  .player .player-ic { width: 46px; height: 46px; }
  .player .player-ic svg { width: 22px; height: 22px; }
  .player .player-play svg { width: 20px; height: 20px; }
  .player .player-time { font-size: 13px; }
  .player-grab { min-height: 92px; padding: 16px 14px; }
  .player-grab-bar { height: 40px; }
}

/* Lecteur plus bas sur téléphone (demande de Thomas) : le BAS de la carte se cale à 96 px du bas de l'écran,
   juste au-dessus de l'enceinte. Repère en svh (hauteur d'écran avec la barre du navigateur affichée) : il ne bouge pas
   quand la barre se replie, et la carte n'est jamais cachée par elle. */
@media (max-width: 560px) {
  .player { top: calc(100svh - 96px - env(safe-area-inset-bottom)); transform: translateY(-100%); }
}

/* ---------- Bande « Clothing » : allumage progressif ----------
   Téléphone : suit le défilement (--lit de 0 à 1, posé par js/app.js) — noir, logos, texte et flèche montent ensemble, sans à-coup.
   Ordinateur : fondu plus lent au survol. */
.to-clothing { --lit: 0; }
@media (hover: none) {
  /* --ink-t : le texte bascule du noir au blanc plus vite que le fond, au moment où le fond devient sombre (toujours lisible) */
  .to-clothing { --ink-t: clamp(0, (var(--lit) - .6) * 6, 1);
    background: color-mix(in srgb, var(--ink) calc(var(--lit) * 100%), var(--bg));
    color: color-mix(in srgb, #fff calc(var(--ink-t) * 100%), var(--ink));
    transition: none;
  }
  .to-clothing::before { opacity: var(--lit); transition: none; }
  .to-clothing .to-clothing-logo img { filter: invert(var(--ink-t)); transition: none; }
  .to-clothing :is(.eyebrow, .to-clothing-sub) { color: color-mix(in srgb, rgba(255, 255, 255, .7) calc(var(--ink-t) * 100%), var(--muted)); transition: none; }
  .to-clothing .arr { transform: translateX(calc(var(--lit) * 8px)); }
}
@media (hover: hover) {
  /* sortie de la souris : s'éteint vite (.3 s) ; entrée : fondu de .7 s (règles .hov plus bas) */
  .to-clothing { transition: background .3s var(--ease), color .3s var(--ease); }
  .to-clothing::before { transition: opacity .3s var(--ease); }
  .to-clothing .to-clothing-logo img { transition: filter .3s var(--ease); }
  .to-clothing :is(.eyebrow, .to-clothing-sub) { transition: color .3s var(--ease); }
  .to-clothing .arr { transition: transform .3s var(--ease); }
  .to-clothing.hov { transition: background .7s var(--ease), color .7s var(--ease); }
  .to-clothing.hov::before { transition: opacity .8s var(--ease); }
  .to-clothing.hov .to-clothing-logo img { transition: filter .7s var(--ease); }
  .to-clothing.hov :is(.eyebrow, .to-clothing-sub) { transition: color .7s var(--ease); }
  .to-clothing.hov .arr { transition: transform .7s var(--ease); }
}

/* Lueur de cinéma : un léger halo autour du titre, qui monte avec l'allumage de la bande */
.to-clothing-title { text-shadow: 0 0 calc(var(--lit, 1) * 28px) rgba(255, 246, 232, calc(var(--lit, 1) * .22)); }
@media (hover: hover) {
  .to-clothing-title { text-shadow: none; transition: text-shadow .8s var(--ease); }
  .to-clothing:is(:hover, :focus-visible) .to-clothing-title { text-shadow: 0 0 28px rgba(255, 246, 232, .22); }
}

/* Logo 6PA Music centré dans l'espace noir au-dessus du faisceau (le faisceau commence vers 34-37 % de la hauteur du bloc,
   quelle que soit la largeur) : son centre est placé à mi-hauteur de cet espace. Hauteur du logo = 0,784 × sa largeur. */
.music-logo { --logo-y: calc(18.5% + min(46vw, 190px) * .392); }
@media (min-width: 768px) { .music-logo { --logo-y: max(208px, calc(12% + 80px)); } }
@media (min-width: 1024px) { .music-logo { --logo-y: max(238px, calc(12% + 100px)); } }
/* Photo du faisceau plus contrastée et plus lumineuse dans les hautes lumières : les noirs se fondent, le faisceau ressort */
.music-cta-media img { filter: contrast(1.16) brightness(1.02) saturate(.8); }
/* Photo du haut de la page Music (fumée) : même contraste que la photo du faisceau */
.music-hero-media img { filter: contrast(1.22) brightness(1.06) saturate(1.04); }
/* Pied de page : il commence dans le blanc de la page et passe en douceur à son gris très clair (plus de ligne entre les deux blancs) */
.footer { background: linear-gradient(180deg, var(--bg) 0, var(--soft) 140px) var(--soft); }

/* Vague de matière 6PA : au survol de la bande Clothing, le tissage et les petits logos montent sur le noir de la photo du dessus
   et entrent dans la fumée en transparence. Un masque tiré de la photo (assets/ui/vague-masque.png) sépare le noir de la fumée. */
@property --wave { syntax: "<length>"; inherits: true; initial-value: 0px; }
.music-weave {
  position: absolute; inset: 0; z-index: 1; pointer-events: none;
  --wave: 0px; transition: --wave .36s cubic-bezier(.3, .7, .4, 1);          /* la souris s'en va : se retire vite */
  -webkit-mask-image: linear-gradient(180deg, transparent 0, rgba(0, 0, 0, .35) 90px, #000 260px);
          mask-image: linear-gradient(180deg, transparent 0, rgba(0, 0, 0, .35) 90px, #000 260px);
}
.music-weave .w-photo, .music-weave .w-fog { position: absolute; inset: 0; }
.music-weave .w-photo { -webkit-mask: url("../assets/ui/vague-masque.png") var(--mpos, 50% 50%) / cover no-repeat;
                                mask: url("../assets/ui/vague-masque.png") var(--mpos, 50% 50%) / cover no-repeat; }
/* dans la fumée : seulement la matière, sans fond, en transparence, comme prise dans la photo */
.music-weave .w-fog { display: none; opacity: .34; -webkit-mask: url("../assets/ui/vague-masque-fumee.png") var(--mpos, 50% 50%) / cover no-repeat;
                                         mask: url("../assets/ui/vague-masque-fumee.png") var(--mpos, 50% 50%) / cover no-repeat; }
.music-weave .w-fog .w-tex { background-color: transparent; }
/* front de vague : corps plein, puis deux ondes plus claires qui précèdent, comme une vague qui se propage */
.music-weave .w-tex {
  position: absolute; inset: 0;
  /* front de vague doux et large, avec un léger reflet qui court juste devant la matière */
  --front: radial-gradient(circle at var(--wx, 50%) var(--wy, 100%),
      #000 calc(var(--wave) - 380px), rgba(0, 0, 0, .85) calc(var(--wave) - 300px), rgba(0, 0, 0, .55) calc(var(--wave) - 200px),
      rgba(0, 0, 0, .25) calc(var(--wave) - 110px), rgba(0, 0, 0, .07) calc(var(--wave) - 40px), transparent var(--wave));
  background: radial-gradient(circle at var(--wx, 50%) var(--wy, 100%),
                rgba(255, 246, 232, 0) calc(var(--wave) - 260px), rgba(255, 246, 232, .08) calc(var(--wave) - 150px), rgba(255, 246, 232, 0) calc(var(--wave) - 40px)),
              /* lueurs : même contre-jour que la bande Clothing (cœur chaud qui s'éteint à 32 % puis 62 %) */
              radial-gradient(ellipse 40% 62% at 50% calc(var(--fog-y, 40%) * .62), rgba(255, 246, 232, .2) 0%, rgba(255, 246, 232, .075) 32%, rgba(255, 246, 232, 0) 62%),
              radial-gradient(ellipse 46% 44% at 50% 68%, rgba(255, 246, 232, .2) 0%, rgba(255, 246, 232, .085) 32%, rgba(255, 246, 232, 0) 62%),
              url("../assets/logo/6pa-motif-relief.png") left 0 bottom var(--tb, 0px) / 64px 48px repeat,
              url("../assets/ui/tissage-noir.png") left 0 bottom var(--tb, 0px) / 121px 21px repeat;
  background-color: rgba(13, 12, 11, .55);
  -webkit-mask-image: var(--front); mask-image: var(--front);
}
.music-weave:not(.band-weave) .w-tex { --wy: calc(100% + var(--band-h, 0px)); --tb: 0px; }
.band-weave { opacity: 0; transition: --wave .36s cubic-bezier(.3, .7, .4, 1), opacity .1s linear; z-index: -1; -webkit-mask: linear-gradient(180deg, #000 0%, rgba(0, 0, 0, .96) 12%, rgba(0, 0, 0, .84) 24%, rgba(0, 0, 0, .64) 38%, rgba(0, 0, 0, .4) 54%, rgba(0, 0, 0, .18) 72%, rgba(0, 0, 0, .05) 88%, transparent 100%) top / 100% 78% no-repeat;
                                mask: linear-gradient(180deg, #000 0%, rgba(0, 0, 0, .96) 12%, rgba(0, 0, 0, .84) 24%, rgba(0, 0, 0, .64) 38%, rgba(0, 0, 0, .4) 54%, rgba(0, 0, 0, .18) 72%, rgba(0, 0, 0, .05) 88%, transparent 100%) top / 100% 78% no-repeat; }
.band-weave .w-tex { --wy: 100%; background: url("../assets/logo/6pa-motif-relief.png") 0 0 / 64px 48px repeat, url("../assets/ui/tissage-noir.png") 0 0 / 121px 21px repeat; }
@media (hover: hover) {
  body.wave-on .music-weave { --wave: var(--wave-max, 2000px); transition: --wave .9s cubic-bezier(.25, .6, .3, 1); }
  body.wave-on .band-weave { opacity: .48; transition: --wave .9s cubic-bezier(.25, .6, .3, 1), opacity .2s linear; }
}
@media (hover: none) {
  .band-weave { opacity: calc(var(--lit-b, 0) * .48); }
  .music-weave { transition: none; --wave: calc(clamp(0, (var(--lit-b, 0) - .45) / .55, 1) * var(--wave-max, 2000px)); }
}
@media (prefers-reduced-motion: reduce) { .music-weave { transition: none; } }