/* ============================================================
   PHONOMAKER — UNIVERS VINYLE
   Feuille de style dédiée aux 3 pages : Le Vinyle, Le Packaging,
   Specs & Templates. Chargée uniquement sur ces templates.

   Structure de la page :
     .pm-vinyl               ← wrapper + tokens + fond crème
       .pm-chrome            ← header partagé (fixe, sombre)
       .pm-subnav            ← sous-nav « univers vinyle » (collante)
       .pm-vu > main         ← contenu de la page (grain sur les sections)
       footer                ← footer partagé
   Palette : crème #F0E7D2 / noir chaud #1A1815 / orange #CF3417
             bleu #1B4082 / cyan #6BB0C5
   ============================================================ */

/* ---------- POLICES (locales) ---------- */
@font-face {
  font-family: "Impact";
  src: url("./fonts/Impact.ttf") format("truetype");
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Highest Praise";
  src: url("./fonts/HighestPraise-Regular.woff2") format("woff2"),
       url("./fonts/HighestPraise-Regular.ttf") format("truetype");
  font-weight: 400; font-style: normal; font-display: swap;
}

/* ---------- TOKENS ---------- */
.pm-vinyl {
  --pm-ink:        #1A1815;
  --pm-paper:      #F0E7D2;
  --pm-paper-2:    #E5DAC2;
  --pm-paper-3:    #D8CBAE;
  --pm-white:      #F0E7D2;
  --pm-orange:     #CF3417;
  --pm-blue:       #1B4082;
  --pm-cyan:       #6BB0C5;
  --pm-ink-60:     #6B6E6D;
  --pm-ink-40:     #9A9C9B;
  --pm-ink-20:     #C9CACA;
  --pm-font-display: "Impact", "Anton", Impact, "Arial Narrow Bold", sans-serif;
  --pm-font-body:    "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
  --pm-font-script:  "Highest Praise", "Caveat", "Bradley Hand", cursive;
  --pm-font-mono:    ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;

  --pm-h: 60px;   /* hauteur du header */

  background: var(--pm-paper);
  color: var(--pm-ink);
  font-family: var(--pm-font-body);
  font-weight: 300;
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;   /* coupe le débordement sans casser position:sticky */
}
.pm-vinyl *, .pm-vinyl *::before, .pm-vinyl *::after { box-sizing: border-box; }
.pm-vinyl a { color: inherit; }
.pm-vinyl ::selection { background: var(--pm-orange); color: var(--pm-paper); }

/* accordéons <details>/<summary> */
.pm-vinyl summary::-webkit-details-marker { display: none; }
.pm-vinyl summary { list-style: none; cursor: pointer; }
.pm-vinyl details[open] .pm-plus { transform: rotate(45deg); }

/* ancres : compense header + sous-nav collante */
.pm-vinyl [id] { scroll-margin-top: 130px; }

/* vinyle qui tourne */
@keyframes pm-spin { from { transform: rotate(0); } to { transform: rotate(360deg); } }
.pm-vinyl .pm-spin-el { animation: pm-spin 9s linear infinite; transform-origin: 50% 50%; }
@media (prefers-reduced-motion: reduce) { .pm-vinyl .pm-spin-el { animation: none; } }

/* ============================================================
   GRAIN feTurbulence — calque de fond sur chaque section
   ============================================================ */
.pm-vu main > section { position: relative; isolation: isolate; }
.pm-vu main > section::before {
  content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background-size: 180px 180px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='matrix' values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.22 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
/* sections sombres (texte crème) : grain clair */
.pm-vu main > section[style*="color:#F0E7D2"]::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='matrix' values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 0.16 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
.pm-vu main > section > * { position: relative; z-index: 1; }
.pm-vu .gr-light-layer {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='matrix' values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 0.16 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size: 180px 180px;
}

/* ============================================================
   HEADER PARTAGÉ (.pm-chrome) — fixe, sombre, cohérent partout
   ============================================================ */
.pm-vinyl .pm-chrome { position: fixed; top: 0; left: 0; right: 0; z-index: 100; }
.pm-vinyl .pm-nav {
  display: flex; align-items: center; justify-content: space-between;
  gap: 24px; padding: 0 clamp(20px, 3vw, 48px); height: var(--pm-h);
  background: rgba(20,22,21,.92);
  -webkit-backdrop-filter: blur(14px) saturate(140%);
  backdrop-filter: blur(14px) saturate(140%);
  border-bottom: 1px solid rgba(240,231,210,.08);
  transition: background-color .4s ease, border-color .4s ease;
}
.pm-vinyl .pm-chrome.is-scrolled .pm-nav { background: rgba(12,14,13,.97); }
.pm-vinyl .pm-nav-brand { display: flex; align-items: center; gap: 10px; text-decoration: none; flex: none; }
.pm-vinyl .pm-nav-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--pm-orange); animation: pmPulse 2s ease-in-out infinite; flex: none; }
.pm-vinyl .pm-nav-brand img { height: 26px; width: auto; display: block; user-select: none; }
@keyframes pmPulse { 0%,100% { opacity: 1; transform: scale(1); } 50% { opacity: .5; transform: scale(.8); } }

.pm-vinyl .pm-nav-links { display: flex; align-items: center; gap: clamp(16px, 1.8vw, 26px); }
.pm-vinyl .pm-nav-link {
  position: relative; font-family: var(--pm-font-body); font-weight: 700; font-size: 12px; line-height: 1;
  text-transform: uppercase; letter-spacing: .1em; color: #EEEFF1; text-decoration: none;
  padding: 6px 0; border-bottom: 2px solid transparent; white-space: nowrap;
  transition: color .18s ease, border-color .18s ease; background: none; border-left: 0; border-right: 0; border-top: 0; cursor: pointer;
}
.pm-vinyl .pm-nav-link:hover { color: #fff; border-bottom-color: var(--pm-orange); }
.pm-vinyl .pm-nav-link.active { color: var(--pm-orange); border-bottom-color: var(--pm-orange); }

/* --- Menu déroulant « Vinyle » --- */
.pm-vinyl .pm-has-sub { position: relative; display: inline-flex; align-items: center; }
.pm-vinyl .pm-sub-toggle { display: inline-flex; align-items: center; gap: 6px; }
.pm-vinyl .pm-caret { width: 8px; height: 8px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(45deg) translateY(-2px); transition: transform .2s ease; flex: none; }
.pm-vinyl .pm-has-sub:hover .pm-caret,
.pm-vinyl .pm-has-sub:focus-within .pm-caret { transform: rotate(225deg) translateY(2px); }
.pm-vinyl .pm-submenu {
  position: absolute; top: calc(100% + 12px); left: -14px; min-width: 236px;
  background: var(--pm-paper); border: 1.5px solid var(--pm-ink);
  box-shadow: 5px 5px 0 0 var(--pm-orange); padding: 6px; margin: 0; list-style: none;
  opacity: 0; visibility: hidden; transform: translateY(-6px);
  transition: opacity .18s ease, transform .18s ease, visibility 0s linear .18s; z-index: 40;
}
.pm-vinyl .pm-has-sub:hover .pm-submenu,
.pm-vinyl .pm-has-sub:focus-within .pm-submenu {
  opacity: 1; visibility: visible; transform: translateY(0);
  transition: opacity .18s ease, transform .18s ease;
}
.pm-vinyl .pm-submenu::before { content: ""; position: absolute; top: -12px; left: 0; right: 0; height: 12px; } /* pont anti-survol */
.pm-vinyl .pm-submenu a {
  display: block; padding: 11px 14px; font-family: var(--pm-font-body); font-weight: 600; font-size: 12px;
  letter-spacing: .06em; text-transform: uppercase; color: var(--pm-ink); text-decoration: none; border-bottom: 1px solid rgba(26,24,21,.08);
}
.pm-vinyl .pm-submenu li:last-child a { border-bottom: 0; }
.pm-vinyl .pm-submenu a:hover, .pm-vinyl .pm-submenu a:focus { background: var(--pm-ink); color: var(--pm-paper); }
.pm-vinyl .pm-submenu a.active { color: var(--pm-orange); }

/* --- CTA du header (néobrutaliste, inchangés) --- */
.pm-vinyl .pm-nav-ctas { display: flex; align-items: center; gap: 10px; flex: none; }
.pm-vinyl .pm-cta {
  display: inline-flex; align-items: center; gap: 8px; padding: 10px 16px 8px;
  font-family: var(--pm-font-display); font-size: 12.5px; letter-spacing: .08em; text-transform: uppercase;
  text-decoration: none; white-space: nowrap; box-shadow: 3px 3px 0 0 var(--pm-orange);
  transition: transform .15s cubic-bezier(.22,.61,.36,1), box-shadow .15s;
}
.pm-vinyl .pm-cta-outline { background: transparent; color: #F0E7D2; border: 1.5px solid rgba(240,231,210,.6); }
.pm-vinyl .pm-cta-fill { background: #F0E7D2; color: #1A1815; border: 1.5px solid #F0E7D2; }
.pm-vinyl .pm-cta:hover { transform: translate(2px,2px); box-shadow: 1px 1px 0 0 var(--pm-orange); }

/* --- burger --- */
.pm-vinyl .pm-burger {
  display: none; align-items: center; justify-content: center; width: 40px; height: 40px;
  padding: 0; margin: 0; background: none; border: 0; cursor: pointer; z-index: 110;
}
.pm-vinyl .pm-burger span, .pm-vinyl .pm-burger span::before, .pm-vinyl .pm-burger span::after {
  width: 24px; height: 2px; background: #EEEFF1; display: block;
}
.pm-vinyl .pm-burger span { position: relative; }
.pm-vinyl .pm-burger span::before, .pm-vinyl .pm-burger span::after { content: ""; position: absolute; left: 0; }
.pm-vinyl .pm-burger span::before { top: -7px; }
.pm-vinyl .pm-burger span::after  { top: 7px; }

/* ============================================================
   SOUS-NAV « univers vinyle » (.pm-subnav) — collante sous le header
   ============================================================ */
.pm-vinyl .pm-subnav {
  position: sticky; top: var(--pm-h); z-index: 90;
  background: #1A1815; color: #F0E7D2; border-bottom: 1px solid rgba(240,231,210,.08);
}
.pm-vinyl .pm-subnav-in {
  max-width: 1240px; margin: 0 auto; display: flex; align-items: center; justify-content: space-between;
  gap: 16px; padding: 0 24px;
}
.pm-vinyl .pm-subnav-scroll { display: flex; overflow-x: auto; scrollbar-width: none; }
.pm-vinyl .pm-subnav-scroll::-webkit-scrollbar { display: none; }
.pm-vinyl .pm-subnav-link {
  text-decoration: none; font: 700 12px/1 var(--pm-font-body); text-transform: uppercase; letter-spacing: .1em;
  padding: 18px 20px; color: #9A9C9B; border-bottom: 3px solid transparent; white-space: nowrap;
  transition: color .18s ease, border-color .18s ease;
}
.pm-vinyl .pm-subnav-link:hover { color: #F0E7D2; }
.pm-vinyl .pm-subnav-link.active { color: #F0E7D2; border-bottom-color: var(--pm-orange); }
.pm-vinyl .pm-subnav-note {
  font-family: var(--pm-font-script); color: var(--pm-cyan); font-size: 22px;
  transform: rotate(-3deg); padding-right: 8px; white-space: nowrap; flex: none;
}

/* wrapper contenu : compense le header fixe */
.pm-vinyl .pm-vu { padding-top: var(--pm-h); }

/* ============================================================
   BOUTONS design-system (transcription du composant <Button>)
   ============================================================ */
.pm-vinyl .pm-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  font-family: var(--pm-font-body); font-weight: 700; font-size: 13px; line-height: 1;
  text-transform: uppercase; letter-spacing: .1em; text-decoration: none;
  padding: 14px 22px; border: 1.5px solid var(--pm-ink); border-radius: 0; cursor: pointer;
  transition: transform .15s ease, box-shadow .15s ease, background .15s ease, color .15s ease;
}
.pm-vinyl .pm-btn--sm { gap: 8px; font-size: 11px; padding: 10px 16px; }
.pm-vinyl .pm-btn__arrow { font-family: var(--pm-font-display); font-size: 18px; line-height: 0; }
.pm-vinyl .pm-btn--sm .pm-btn__arrow { font-size: 16px; }
/* variantes (fond / texte) + ombre dure décalée */
.pm-vinyl .pm-btn--primary   { background: var(--pm-ink); color: var(--pm-paper); box-shadow: 3px 3px 0 0 var(--pm-ink); }
.pm-vinyl .pm-btn--secondary { background: var(--pm-paper); color: var(--pm-ink); box-shadow: 3px 3px 0 0 var(--pm-ink); }
.pm-vinyl .pm-btn--orange    { background: var(--pm-orange); color: var(--pm-paper); box-shadow: 3px 3px 0 0 var(--pm-ink); }
.pm-vinyl .pm-btn--blue      { background: var(--pm-blue); color: var(--pm-paper); box-shadow: 3px 3px 0 0 var(--pm-ink); }
.pm-vinyl .pm-btn--ghost     { background: transparent; color: var(--pm-ink); box-shadow: none; }
.pm-vinyl .pm-btn--sm.pm-btn--primary,
.pm-vinyl .pm-btn--sm.pm-btn--secondary,
.pm-vinyl .pm-btn--sm.pm-btn--orange,
.pm-vinyl .pm-btn--sm.pm-btn--blue { box-shadow: 2px 2px 0 0 var(--pm-ink); }
.pm-vinyl .pm-btn:hover { transform: translate(2px,2px); box-shadow: 1px 1px 0 0 var(--pm-ink); }
.pm-vinyl .pm-btn--ghost:hover { background: var(--pm-ink); color: var(--pm-paper); transform: none; }
/* sur fond sombre : bordures/contrastes en crème */
.pm-vinyl .pm-btn--on-dark { border-color: var(--pm-paper); }
.pm-vinyl .pm-btn--on-dark.pm-btn--primary { background: var(--pm-paper); color: var(--pm-ink); box-shadow: 3px 3px 0 0 var(--pm-orange); }
.pm-vinyl .pm-btn--on-dark.pm-btn--ghost { color: var(--pm-paper); }
.pm-vinyl .pm-btn--on-dark.pm-btn--ghost:hover { background: var(--pm-paper); color: var(--pm-ink); }
.pm-vinyl .pm-btn--on-dark:hover { box-shadow: 1px 1px 0 0 var(--pm-orange); }

/* ============================================================
   ONGLETS COULEURS (section « Plus de 30 couleurs »)
   ============================================================ */
.pm-vinyl .pm-color-tab {
  font: 700 12px/1 var(--pm-font-body); text-transform: uppercase; letter-spacing: .08em;
  padding: 12px 20px; background: transparent; color: var(--pm-ink); border: 0; cursor: pointer;
}
.pm-vinyl .pm-color-tab + .pm-color-tab { border-left: 1.5px solid var(--pm-ink); }
.pm-vinyl .pm-color-tab.is-active { background: var(--pm-ink); color: var(--pm-paper); }
.pm-vinyl .pm-color__chip img { transition: transform .25s ease; }
.pm-vinyl .pm-color:hover .pm-color__chip img { transform: scale(1.06); }

/* ============================================================
   RESPONSIVE (grilles internes du contenu)
   ============================================================ */
@media (max-width: 900px) {
  .pm-vu .pm-hero-grid, .pm-vu .pm-2col, .pm-vu .fab-row { grid-template-columns: 1fr !important; gap: 32px !important; }
  .pm-vu .pm-grid3, .pm-vu .pm-grid4, .pm-vu .pm-specgrid { grid-template-columns: 1fr 1fr !important; }
  .pm-vu .fab-photo { order: -1 !important; }
  .pm-vu .pm-foot-cols { grid-template-columns: 1fr 1fr !important; }
}
@media (max-width: 560px) {
  .pm-vu .pm-grid3, .pm-vu .pm-grid4, .pm-vu .pm-specgrid, .pm-vu .pm-foot-cols { grid-template-columns: 1fr !important; }
}

/* ---------- HEADER responsive : burger < 1024px ---------- */
@media (max-width: 1023px) {
  .pm-vinyl .pm-nav-links, .pm-vinyl .pm-nav-ctas { display: none; }
  .pm-vinyl .pm-burger { display: inline-flex; }
}

/* ---------- BARRE ADMIN WORDPRESS ---------- */
body.admin-bar .pm-vinyl .pm-chrome { top: 32px; }
body.admin-bar .pm-vinyl .pm-subnav { top: calc(var(--pm-h) + 32px); }
@media screen and (max-width: 782px) {
  body.admin-bar .pm-vinyl .pm-chrome { top: 46px; }
  body.admin-bar .pm-vinyl .pm-subnav { top: calc(var(--pm-h) + 46px); }
}

/* ============================================================
   MENU BURGER MOBILE (overlay ajouté au <body>, hors .pm-vinyl)
   ============================================================ */
.pm-burger-overlay {
  --pm-orange: #CF3417; --pm-paper: #F0E7D2; --pm-ink: #1A1815;
  --pm-font-display: "Impact", "Anton", Impact, "Arial Narrow Bold", sans-serif;
  --pm-font-body: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
  position: fixed; inset: 0; z-index: 200; overflow-y: auto;
  display: flex; flex-direction: column; justify-content: center; gap: 2px;
  padding: 88px 32px 40px; background: #0c0f0e;
  opacity: 0; visibility: hidden; transform: translateY(-8px);
  transition: opacity .28s ease, transform .28s ease, visibility 0s linear .28s;
}
body.pm-burger-open .pm-burger-overlay { opacity: 1; visibility: visible; transform: translateY(0); transition: opacity .28s ease, transform .28s ease; }
body.pm-burger-open { overflow: hidden; }
.pm-burger-overlay .pm-burger-link {
  font-family: var(--pm-font-display); font-size: 30px; line-height: 1.15; text-transform: uppercase;
  letter-spacing: .01em; color: #F0E7D2; text-decoration: none; padding: 9px 0;
  border-bottom: 1px solid rgba(240,231,210,.12); display: flex; align-items: center; justify-content: space-between; gap: 12px;
}
.pm-burger-overlay .pm-burger-link.active { color: var(--pm-orange); }
.pm-burger-overlay .pm-burger-sub { display: none; padding: 4px 0 10px 14px; margin: 0; list-style: none; border-bottom: 1px solid rgba(240,231,210,.12); }
.pm-burger-overlay .pm-burger-group.is-open .pm-burger-sub { display: block; }
.pm-burger-overlay .pm-burger-group.is-open > .pm-burger-link .pm-burger-caret { transform: rotate(180deg); }
.pm-burger-overlay .pm-burger-sub a {
  display: block; font-family: var(--pm-font-body); font-weight: 600; font-size: 15px; letter-spacing: .04em;
  text-transform: uppercase; color: rgba(240,231,210,.8); text-decoration: none; padding: 10px 0;
}
.pm-burger-overlay .pm-burger-sub a.active { color: var(--pm-orange); }
.pm-burger-overlay .pm-burger-caret { width: 12px; height: 12px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(45deg); transition: transform .2s ease; flex: none; }
.pm-burger-close {
  position: absolute; top: 22px; left: 24px; width: 44px; height: 44px; display: inline-flex;
  align-items: center; justify-content: center; background: none; border: 0; padding: 0; color: #F0E7D2; cursor: pointer; z-index: 2;
}
.pm-burger-close svg { width: 26px; height: 26px; display: block; }
.pm-burger-cta { margin-top: 26px; display: flex; flex-direction: column; gap: 14px; }
.pm-burger-cta a {
  width: 100%; justify-content: center; text-align: center; display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--pm-font-display); font-size: 15px; letter-spacing: .06em; text-transform: uppercase;
  text-decoration: none; padding: 15px 18px 13px; box-shadow: 3px 3px 0 0 var(--pm-orange);
}
.pm-burger-cta a.pm-cta-outline { background: transparent; color: #F0E7D2; border: 1.5px solid rgba(240,231,210,.6); }
.pm-burger-cta a.pm-cta-fill { background: #F0E7D2; color: #1A1815; border: 1.5px solid #F0E7D2; }
@media (min-width: 1024px) { .pm-burger-overlay { display: none !important; } }

/* ---------- FILET DE SÉCURITÉ DIVI ----------
   Si Divi n'est pas déchargé, il impose h1..h6{color:#333;padding-bottom:10px}.
   On neutralise sous .pm-vinyl (le dequeue côté functions.php reste la voie
   principale — ceci est une ceinture-bretelles haute-spécificité). */
.pm-vinyl h1, .pm-vinyl h2, .pm-vinyl h3,
.pm-vinyl h4, .pm-vinyl h5, .pm-vinyl h6 { color: inherit; padding-bottom: 0; }

/* ============================================================
   HERO — page « Le Vinyle » (clair, palette de disques)
   Layout deux colonnes : texte à gauche, scène disques à droite.
   Le disque (image) tourne / grandit au survol ; le nom+numéro
   sont en légende HTML séparée, donc ils NE tournent pas.
   ============================================================ */
.pm-vinyl .pm-vhero {
  background: linear-gradient(180deg, #F3EBD8 0%, #ECE0C6 100%);
  padding: clamp(40px,6vw,76px) 24px clamp(48px,7vw,84px);
  overflow: hidden;
}
.pm-vinyl .pm-vhero__inner {
  max-width: 1240px; margin: 0 auto;
  display: grid; grid-template-columns: 1.05fr .95fr;
  gap: clamp(28px,5vw,72px); align-items: center;
}
.pm-vinyl .pm-vhero__text { position: relative; z-index: 2; }
.pm-vinyl .pm-vhero__eyebrow {
  display: inline-flex; align-items: center; gap: 10px;
  font: 700 12px/1 var(--pm-font-body); letter-spacing: .18em; text-transform: uppercase;
  color: var(--pm-orange); margin-bottom: 18px;
}
.pm-vinyl .pm-vhero__dot { width: 8px; height: 8px; border-radius: 50%; background: var(--pm-orange); }
.pm-vinyl .pm-vhero__title {
  font-family: var(--pm-font-display); text-transform: uppercase;
  font-size: clamp(56px,9vw,128px); line-height: .84; letter-spacing: -.02em;
  margin: 0 0 6px; color: var(--pm-ink);
}
.pm-vinyl .pm-vhero__outline { -webkit-text-stroke: 2.5px var(--pm-ink); color: transparent; }
.pm-vinyl .pm-vhero__script {
  font-family: var(--pm-font-script); color: var(--pm-orange);
  font-size: clamp(28px,3.4vw,40px); transform: rotate(-3deg); margin: 8px 0 22px;
}
.pm-vinyl .pm-vhero__lead {
  font: 300 18px/1.6 var(--pm-font-body); color: var(--pm-ink);
  max-width: 460px; margin: 0 0 26px;
}
.pm-vinyl .pm-vhero__ctas { display: flex; gap: 14px; flex-wrap: wrap; margin-bottom: 24px; }
.pm-vinyl .pm-vhero__pills { display: flex; gap: 10px; flex-wrap: wrap; list-style: none; padding: 0; margin: 0; }
.pm-vinyl .pm-vhero__pills li {
  font: 700 11px/1 var(--pm-font-body); letter-spacing: .08em; text-transform: uppercase;
  padding: 9px 14px; border: 1.5px solid var(--pm-ink);
}

/* -- scène des disques : rosace (grand disque central + satellites) --
   Remplit toute la hauteur de la colonne droite : plus de vide en bas. */
.pm-vinyl .pm-vhero__stage {
  position: relative; z-index: 1;
  display: flex; align-items: center; justify-content: center;
  min-height: 100%;
}
.pm-vinyl .pm-vhero__stage::before {
  content: ""; position: absolute; inset: 4%; z-index: -1; pointer-events: none;
  background: radial-gradient(52% 52% at 50% 50%, rgba(207,52,23,.16), transparent 72%);
  filter: blur(16px);
}
.pm-vinyl .pm-vhero__tag {
  position: absolute; top: 2%; right: 0; z-index: 6;
  font-family: var(--pm-font-script); color: var(--pm-blue); font-size: 30px;
  transform: rotate(-5deg); pointer-events: none;
}

/* le plateau carré qui porte la rosace */
.pm-vinyl .pm-vfan {
  position: relative; width: 100%;
  max-width: clamp(360px, 40vw, 540px); aspect-ratio: 1 / 1; margin: 0 auto;
}

/* disque = figure ; positionné en absolu dans la rosace */
.pm-vinyl .pm-vdisc {
  --rot: 0deg;
  position: absolute; margin: 0; padding: 0;
  transform-origin: 50% 50%;
  transition: transform .32s cubic-bezier(.22,.61,.36,1);
  cursor: pointer; outline: none; will-change: transform;
}
.pm-vinyl .pm-vdisc__img {
  width: 100%; height: 100%; display: block; border-radius: 50%;
  filter: drop-shadow(3px 6px 11px rgba(20,16,10,.32));
  transform-origin: 50% 50%; transition: filter .25s ease;
}

/* disque central : grand, centré, tourne en continu */
.pm-vinyl .pm-vdisc--main {
  width: 54%; height: 54%; left: 50%; top: 50%;
  transform: translate(-50%, -50%);
  z-index: 20;
}
.pm-vinyl .pm-vdisc--main .pm-vdisc__img { animation: pm-spin 18s linear infinite; }

/* satellites : plus petits, disposés en cercle (left/top inline) */
.pm-vinyl .pm-vdisc--sat {
  width: 38%; height: 38%; z-index: 10;
  transform: translate(-50%, -50%) rotate(var(--rot));
}

/* survol / focus : s'agrandit, se redresse, passe devant et tourne */
.pm-vinyl .pm-vdisc--main:hover, .pm-vinyl .pm-vdisc--main:focus-visible {
  transform: translate(-50%, -50%) scale(1.08); z-index: 60;
}
.pm-vinyl .pm-vdisc--sat:hover, .pm-vinyl .pm-vdisc--sat:focus-visible {
  transform: translate(-50%, -50%) rotate(0deg) scale(1.22); z-index: 60;
}
.pm-vinyl .pm-vdisc:hover .pm-vdisc__img,
.pm-vinyl .pm-vdisc:focus-visible .pm-vdisc__img {
  animation: pm-spin 2.6s linear infinite;
  filter: drop-shadow(6px 12px 18px rgba(20,16,10,.42));
}
.pm-vinyl .pm-vdisc--main:hover .pm-vdisc__img,
.pm-vinyl .pm-vdisc--main:focus-visible .pm-vdisc__img { animation-duration: 5s; }

@media (prefers-reduced-motion: reduce) {
  .pm-vinyl .pm-vdisc__img { animation: none !important; }
}

/* responsive : passage en une colonne */
@media (max-width: 900px) {
  .pm-vinyl .pm-vhero__inner { grid-template-columns: 1fr; gap: 30px; }
  .pm-vinyl .pm-vhero__stage { order: 2; }
  .pm-vinyl .pm-vfan { max-width: clamp(300px, 74vw, 420px); }
}

/* ============================================================
   PARCOURS DE FABRICATION — carrousel (une étape à la fois)
   Remplace la timeline verticale : ~2800px -> ~1 carte.
   ============================================================ */
.pm-vinyl .pm-fab__stepper {
  display: flex; align-items: center; gap: 0; position: relative;
  margin: 8px 0 28px; padding: 4px 0; overflow-x: auto; scrollbar-width: none;
}
.pm-vinyl .pm-fab__stepper::-webkit-scrollbar { display: none; }
/* ligne de progression */
.pm-vinyl .pm-fab__stepper::before {
  content: ""; position: absolute; left: 22px; right: 22px; top: 50%; height: 1.5px;
  background: rgba(26,24,21,.18); z-index: 0;
}
.pm-vinyl .pm-fab__step {
  position: relative; z-index: 1; flex: 1 0 auto; min-width: 44px;
  display: flex; align-items: center; justify-content: center;
  background: none; border: 0; padding: 6px; cursor: pointer;
}
.pm-vinyl .pm-fab__step-num {
  display: flex; align-items: center; justify-content: center;
  width: 44px; height: 44px; border-radius: 50%;
  background: var(--pm-paper); border: 1.5px solid rgba(26,24,21,.28);
  font-family: var(--pm-font-display); font-size: 17px; color: var(--pm-ink-40);
  transition: all .2s ease;
}
.pm-vinyl .pm-fab__step:hover .pm-fab__step-num { border-color: var(--pm-ink); color: var(--pm-ink); }
.pm-vinyl .pm-fab__step.is-active .pm-fab__step-num {
  background: var(--acc, var(--pm-ink)); border-color: var(--acc, var(--pm-ink));
  color: var(--pm-paper); transform: scale(1.12);
}

/* fenêtre : le slide actif est en flux (donne la hauteur), les autres en absolu */
.pm-vinyl .pm-fab__viewport { position: relative; }
.pm-vinyl .pm-fab__slide {
  position: absolute; inset: 0; opacity: 0; visibility: hidden;
  display: grid; grid-template-columns: 1fr 1fr; gap: clamp(28px,4vw,56px); align-items: center;
  transition: opacity .4s ease;
}
.pm-vinyl .pm-fab__slide.is-active { position: relative; opacity: 1; visibility: visible; }
.pm-vinyl .pm-fab__slide:nth-child(even) .pm-fab__media { order: 2; } /* alterne le côté photo */

.pm-vinyl .pm-fab__media { position: relative; }
.pm-vinyl .pm-fab__photo {
  position: relative; aspect-ratio: 4 / 3; border: 1.5px solid var(--pm-ink);
  box-shadow: 8px 8px 0 0 var(--acc, var(--pm-blue));
  background-size: cover; background-position: center;
  filter: grayscale(1) contrast(1.05) brightness(1.04);
}
.pm-vinyl .pm-fab__photo::after {
  content: ""; position: absolute; inset: 0; background: var(--acc, var(--pm-blue));
  mix-blend-mode: multiply; opacity: .85;
}
.pm-vinyl .pm-fab__tag {
  position: absolute; bottom: -13px; right: -11px; z-index: 2;
  background: var(--acc, var(--pm-blue)); color: var(--pm-paper);
  font: 700 10px/1 var(--pm-font-body); letter-spacing: .14em; text-transform: uppercase; padding: 7px 11px;
}
.pm-vinyl .pm-fab__num { font-family: var(--pm-font-display); font-size: clamp(56px,7vw,88px); line-height: .78; color: var(--acc, var(--pm-blue)); }
.pm-vinyl .pm-fab__title { font-family: var(--pm-font-display); font-size: clamp(24px,3.2vw,38px); line-height: .98; text-transform: uppercase; margin: 8px 0 12px; color: var(--pm-ink); }
.pm-vinyl .pm-fab__desc { font: 300 16px/1.65 var(--pm-font-body); max-width: 520px; margin: 0; }
.pm-vinyl .pm-fab__note { font: 400 15px/1.55 var(--pm-font-body); font-style: italic; color: var(--acc, var(--pm-blue)); margin: 14px 0 0; border-left: 3px solid var(--acc, var(--pm-blue)); padding-left: 14px; }
.pm-vinyl .pm-fab__links { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 16px; }
.pm-vinyl .pm-fab__link { font: 700 11px/1 var(--pm-font-body); text-transform: uppercase; letter-spacing: .1em; text-decoration: none; border: 1.5px solid var(--pm-ink); padding: 10px 14px; display: inline-flex; align-items: center; gap: 8px; color: var(--pm-ink); }

/* navigation */
.pm-vinyl .pm-fab__nav { display: flex; align-items: center; justify-content: center; gap: 22px; margin-top: 30px; }
.pm-vinyl .pm-fab__arrow {
  width: 48px; height: 48px; border: 1.5px solid var(--pm-ink); background: var(--pm-paper);
  font-family: var(--pm-font-display); font-size: 20px; color: var(--pm-ink); cursor: pointer;
  box-shadow: 3px 3px 0 0 var(--pm-ink); transition: transform .15s ease, box-shadow .15s ease;
}
.pm-vinyl .pm-fab__arrow:hover { transform: translate(2px,2px); box-shadow: 1px 1px 0 0 var(--pm-ink); }
.pm-vinyl .pm-fab__count { font: 700 13px/1 var(--pm-font-body); letter-spacing: .1em; text-transform: uppercase; min-width: 128px; text-align: center; }
.pm-vinyl .pm-fab__count b { color: var(--pm-orange); }

@media (max-width: 760px) {
  .pm-vinyl .pm-fab__slide { grid-template-columns: 1fr; gap: 26px; }
  .pm-vinyl .pm-fab__slide:nth-child(even) .pm-fab__media { order: 0; }
  .pm-vinyl .pm-fab__media { max-width: 420px; }
}

/* icônes inline (pm_icon) : héritent la couleur du texte, réagissent au survol */
.pm-vinyl .pm-ico { flex: none; display: inline-block; vertical-align: middle; }

/* ============================================================
   MOBILE — corrections page Le Vinyle  (≤ 760px)
   ============================================================ */
@media (max-width: 760px) {

  /* -----------------------------------------------------------
     1. HERO — tag « pressé chez nous » décalé hors de la rosace
        Sur mobile la colonne texte prend toute la largeur et la
        scène des disques passe en dessous (order:2). Le tag
        positionné en absolute flottait sur les disques.
        On le remet dans le flux, centré, sous la rosace.
     ----------------------------------------------------------- */
  .pm-vinyl .pm-vhero__stage { flex-direction: column; gap: 12px; }
  .pm-vinyl .pm-vhero__tag {
    position: static !important;
    transform: none !important;
    order: 2;
    display: inline-block;
    margin: 0 auto;
    text-align: center;
  }
  .pm-vinyl .pm-vfan { order: 1; }

  /* -----------------------------------------------------------
     1bis. HERO — pastille « 71 % » qui empiétait sur la légende
        du polaroïd (« le physique revient fort »).
        La pastille est en position:absolute bottom:8px dans un
        conteneur à padding-bottom:64px : sur mobile elle remontait
        pile sur la figcaption. On agrandit la réserve basse du
        conteneur et on réduit/descend la pastille.
     ----------------------------------------------------------- */
  /* v13.1 — la réserve basse vaut EXACTEMENT la hauteur de la pastille
     (pastille collée en bas : bottom:0), pour qu'il ne reste aucune
     marge morte sous elle. La condition de non-chevauchement avec la
     légende du polaroïd est : bottom + height <= padding-bottom. */
  .pm-vinyl .pm-vhero-collage { padding-bottom: 108px !important; min-height: 0 !important; }
  .pm-vinyl .pm-vhero-badge {
    width: 104px !important;
    height: 104px !important;
    bottom: 0 !important;
    left: -2px !important;
    box-shadow: 4px 5px 0 0 rgba(0,0,0,.35) !important;
  }
  .pm-vinyl .pm-vhero-badge > div:first-child { font-size: 40px !important; }
  .pm-vinyl .pm-vhero-badge > div:last-child  { font-size: 7.5px !important; max-width: 84px !important; margin-top: 3px !important; }
  /* la section se termine juste après la pastille */
  .pm-vinyl .pm-vhero-sec { padding-bottom: 30px !important; }
  /* le polaroïd reste centré, sans marge auto qui le collerait à droite */
  .pm-vinyl .pm-vhero-collage > figure { margin-left: auto !important; margin-right: auto !important; }

  /* -----------------------------------------------------------
     2. FORMATS (tailles) — carrousel horizontal swipeable
        3 cartes → défilement horizontal, 1 carte visible à la fois
        (avec un aperçu du bord de la suivante)
     ----------------------------------------------------------- */
  .pm-vinyl .pm-formats-grid {
    display: flex !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
    scroll-snap-type: x mandatory !important;
    gap: 16px !important;
    padding: 4px 0 16px !important;
    scrollbar-width: none !important;
    /* déborde sur les côtés pour qu'on voit le bord de la carte suivante */
    margin-left: -24px !important;
    margin-right: -24px !important;
    padding-left: 24px !important;
    padding-right: 24px !important;
  }
  .pm-vinyl .pm-formats-grid::-webkit-scrollbar { display: none !important; }
  .pm-vinyl .pm-formats-grid > div {
    flex: 0 0 82% !important;
    width: 82% !important;
    min-width: 0 !important;
    scroll-snap-align: start !important;
  }

  /* -----------------------------------------------------------
     3. COULEURS (opaques / translucides) — carrousel 2 disques visibles
        La grille auto-fill passe en flex horizontal scroll-snap.
        Chaque figure prend ~44% de la largeur → 2 par vue + aperçu du 3e.
     ----------------------------------------------------------- */
  .pm-vinyl .pm-colors-grid {
    display: flex !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
    scroll-snap-type: x mandatory !important;
    gap: 12px !important;
    padding: 4px 0 16px !important;
    scrollbar-width: none !important;
    margin-left: -24px !important;
    margin-right: -24px !important;
    padding-left: 24px !important;
    padding-right: 24px !important;
  }
  .pm-vinyl .pm-colors-grid::-webkit-scrollbar { display: none !important; }
  .pm-vinyl .pm-colors-grid .pm-color {
    flex: 0 0 44% !important;
    width: 44% !important;
    min-width: 0 !important;
    scroll-snap-align: start !important;
  }

  /* -----------------------------------------------------------
     4. EFFETS DE COULEURS — réduire les cards pour voir 2 par écran
        La grille 4 colonnes devient 2 colonnes compactes.
        padding réduit pour économiser de la hauteur.
     ----------------------------------------------------------- */
  .pm-vinyl .pm-effects-grid {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 12px !important;
  }
  .pm-vinyl .pm-effects-grid > div > div:first-child {
    /* image du disque : réduite */
    aspect-ratio: 1 / 1 !important;
  }
  .pm-vinyl .pm-effects-grid > div > div:last-child {
    padding: 12px !important;
  }
  .pm-vinyl .pm-effects-grid h3 {
    font-size: 16px !important;
    margin-bottom: 6px !important;
  }
  .pm-vinyl .pm-effects-grid p {
    font-size: 12px !important;
    line-height: 1.45 !important;
    margin: 0 !important;
  }
  /* sous-titre cyan (alt. Split-lots…) */
  .pm-vinyl .pm-effects-grid div[style*="color:#6BB0C5"] {
    font-size: 10px !important;
    margin-bottom: 6px !important;
  }

  /* -----------------------------------------------------------
     5. PARCOURS DE FABRICATION — layout compact mobile
        - Photo réduite (hauteur fixe au lieu d'aspect-ratio 4/3)
        - Layout passe en colonne mais avec photo + texte ENSEMBLE
          dans un espace réduit pour tenir sur un écran
        - Swipe tactile ajouté via vinyle.js (touchstart/touchend)
        - Navigation flèches masquée → on swipe directement
     ----------------------------------------------------------- */
  .pm-vinyl .pm-fab__slide {
    grid-template-columns: 1fr !important;
    gap: 0 !important;
  }
  /* photo : compacte, hauteur fixe */
  .pm-vinyl .pm-fab__photo {
    aspect-ratio: 16 / 7 !important;  /* format cinéma très large = petit */
    box-shadow: 4px 4px 0 0 var(--acc, var(--pm-blue)) !important;
  }
  .pm-vinyl .pm-fab__tag {
    bottom: -10px !important;
    right: -8px !important;
    font-size: 9px !important;
    padding: 5px 9px !important;
  }
  /* numéro : plus petit */
  .pm-vinyl .pm-fab__num { font-size: 42px !important; line-height: .8 !important; }
  /* titre : plus compact */
  .pm-vinyl .pm-fab__title { font-size: 20px !important; margin: 4px 0 8px !important; }
  /* description : légèrement réduite */
  .pm-vinyl .pm-fab__desc { font-size: 14px !important; line-height: 1.55 !important; }
  .pm-vinyl .pm-fab__note { font-size: 13px !important; }
  /* body : padding réduit sur les liens */
  .pm-vinyl .pm-fab__body { padding-top: 16px !important; }

  /* stepper : plus compact */
  .pm-vinyl .pm-fab__step-num {
    width: 36px !important; height: 36px !important; font-size: 14px !important;
  }
  .pm-vinyl .pm-fab__step { min-width: 36px !important; }

  /* navigation flèches : masquée — on utilise le swipe tactile */
  .pm-vinyl .pm-fab__nav { display: none !important; }

  /* indication swipe sous le stepper */
  .pm-vinyl .pm-fab__swipe-hint {
    font: 400 11px/1 var(--pm-font-mono);
    text-align: center;
    color: var(--pm-ink-60);
    letter-spacing: .06em;
    margin: 0 0 14px;
    text-transform: uppercase;
  }

}
/* fin @media ≤ 760px */

/* -------------------------------------------------------------
   v12 — Cartes de gabarits (page Specs & templates)
   ------------------------------------------------------------- */
.pm-vinyl .pm-tpl-card:hover,
.pm-vinyl .pm-tpl-card:focus-visible {
  transform: translate(-2px, -2px);
  box-shadow: 5px 5px 0 0 #CF3417;
  outline: none;
}