/* WowRadar — pages vitrine (accueil, découvrir, tarif, légal, contact). Chargé après wowradar.css. */

.wr .hl { color: var(--brand); }
.wr .small { font-size: .88rem; }
.wr .h-sm { font-size: clamp(1.15rem, 2.4vw, 1.45rem); margin: 0; }

/* ── En-têtes de section ── */
.sec-head { max-width: 780px; margin-bottom: clamp(28px, 4vw, 52px); }
.sec-head h2 { margin-bottom: .35em; }
.sec-head .lead { margin-top: .6em; }
.sec-head.row { max-width: none; display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 12px 24px; }
.sec-head.row h2 { margin: 0; }
.link-more { display: inline-flex; align-items: center; gap: .45em; color: var(--brand) !important; font-weight: 700; text-decoration: none; }
.link-more .wr-icon { transition: transform .2s; }
.link-more:hover .wr-icon { transform: translateX(4px); }

/* ── Apparitions (home.js n'ajoute .pre qu'aux éléments hors écran) ── */
.reveal.pre { opacity: 0; transform: translateY(26px); }
.reveal.pre.in { opacity: 1; transform: none; transition: opacity .7s ease var(--d, 0ms), transform .8s cubic-bezier(.2, .7, .2, 1) var(--d, 0ms); }

/* ═════════════ Accueil : héros ═════════════ */
.home-hero { position: relative; overflow: hidden; padding: clamp(36px, 6vw, 80px) 0 clamp(56px, 8vw, 110px); isolation: isolate; }
.hero-glow { position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background:
    radial-gradient(60% 55% at 78% 42%, color-mix(in srgb, var(--brand) 16%, transparent), transparent 70%),
    radial-gradient(40% 40% at 10% 0%, color-mix(in srgb, var(--brand-hot) 8%, transparent), transparent 70%); }
.hero-grid { display: grid; gap: clamp(36px, 6vw, 56px); align-items: center; }
.hero-title { font-size: clamp(2.3rem, 6.6vw, 5rem); margin-bottom: .35em; text-wrap: balance; }
.hero-lead { margin-bottom: 30px; font-size: clamp(1.06rem, 1.9vw, 1.28rem); }
.hero-ctas { display: flex; flex-wrap: wrap; gap: 12px; margin-bottom: 26px; }
.hero-facts { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px 22px; color: var(--muted); font-weight: 600; font-size: .95rem; }
.hero-facts li { display: inline-flex; align-items: center; gap: .45em; }
.hero-facts .wr-icon { color: var(--brand); }
@media (max-width: 420px) {
  .hero-ctas .btn-wr { width: 100%; }
}
@media (min-width: 980px) {
  .hero-grid { grid-template-columns: minmax(0, 1.02fr) minmax(0, 1fr); }
}

/* ═════════════ Accueil : héros « à écouter » ═════════════
   Au repos : atmosphère WowRadar (orange, braises et couronne du gabarit Immersive, home.js).
   En lecture : couleurs de l'album (--hp / --hs, interpolées grâce à @property ; braises et couronne suivent dans home.js). */
@property --hp { syntax: "<color>"; inherits: true; initial-value: #f7a61e; }
@property --hs { syntax: "<color>"; inherits: true; initial-value: #6b3a12; }
.lx { --lvl: 0; transition: --hp 1.4s ease, --hs 1.4s ease; background: #050506;
  min-height: calc(100svh - 68px); display: flex; flex-direction: column; justify-content: center;
  padding: clamp(28px, 5vw, 64px) 0 clamp(22px, 3vw, 36px); }
.lx-gl { position: absolute; inset: 0; z-index: -2; pointer-events: none;
  background:
    radial-gradient(50% 58% at 72% 44%, color-mix(in srgb, var(--hs) 60%, transparent), transparent 75%),
    radial-gradient(30% 36% at 72% 44%, color-mix(in srgb, var(--hp) 22%, transparent), transparent 72%); }
.lx-ember { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; transition: opacity 1s ease; }
.lx-ember.on { opacity: 1; }
.lx-veil { position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background:
    linear-gradient(90deg, rgba(5, 5, 6, .95) 0%, rgba(5, 5, 6, .78) 36%, rgba(5, 5, 6, 0) 60%),
    linear-gradient(rgba(5, 5, 6, 0) 72%, var(--bg) 100%); }
.wr .lx .hl { color: var(--hp); text-shadow: 0 0 calc(12px + var(--lvl) * 60px) color-mix(in srgb, var(--hp) 55%, transparent); }
.lx .eyebrow { color: var(--hp); }

.lx-grid { display: grid; gap: clamp(30px, 5vw, 48px); align-items: center; }
@media (min-width: 980px) { .lx-grid { grid-template-columns: minmax(0, .95fr) minmax(0, 1fr); } }
.lx-stage { display: flex; flex-direction: column; align-items: center; gap: 22px; }

/* Pochette + vinyle */
.lx-disc { --kick: 0; position: relative; width: min(430px, 70vw, 50svh); aspect-ratio: 1; margin-right: 18%; }
.lx-vinyl { position: absolute; inset: 3%; z-index: 0; border-radius: 50%; transform: translateX(32%);
  transition: transform 1.1s cubic-bezier(.2, .75, .15, 1);
  background: repeating-radial-gradient(circle at 50% 50%, #0c0c0e 0 1.6px, #19191d 1.6px 2.6px);
  box-shadow: 0 30px 60px -22px #000, inset 0 0 0 1px rgba(255, 255, 255, .07), inset 0 0 0 9px #0c0c0e; }
.lx-vinyl::before { content: ""; position: absolute; inset: 0; border-radius: 50%;
  background: conic-gradient(from 20deg, transparent 0 8%, rgba(255, 255, 255, .13) 13%, transparent 19% 58%, rgba(255, 255, 255, .09) 63%, transparent 69%); }
.lx-label { position: absolute; inset: 33%; border-radius: 50%; background: #222 center / cover no-repeat;
  box-shadow: 0 0 0 2px #0c0c0e, 0 0 0 3px color-mix(in srgb, var(--hp) 45%, transparent);
  transition: opacity .35s; }
.lx-label::after { content: ""; position: absolute; left: 50%; top: 50%; width: 7%; height: 7%; transform: translate(-50%, -50%); border-radius: 50%; background: #050506; }
.lx.is-playing .lx-vinyl { transform: translateX(44%); }

.wr .lx-cover { position: relative; z-index: 1; display: block; width: 100%; height: 100%; padding: 0; border: 0; border-radius: 8px; overflow: hidden; cursor: pointer; background: #111;
  transform: scale(calc(1 + var(--kick) * .03));
  box-shadow: 0 44px 80px -30px #000, 0 0 0 1px rgba(255, 255, 255, .08),
    0 0 calc(40px + var(--kick) * 90px) calc(var(--kick) * 10px) color-mix(in srgb, var(--hp) calc(18% + var(--kick) * 45%), transparent); }
.lx-cover img { width: 100%; height: 100%; object-fit: cover; transition: opacity .38s ease, transform .5s ease, filter .38s ease; }
.lx-disc.swap .lx-cover img { opacity: 0; transform: scale(1.07); filter: blur(10px); }
.lx-disc.swap .lx-label { opacity: 0; }

.lx-btn { position: absolute; left: 50%; top: 50%; width: 88px; height: 88px; margin: -44px 0 0 -44px; border-radius: 50%;
  display: grid; place-items: center; color: #fff; background: rgba(0, 0, 0, .38);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, .55);
  transition: opacity .35s, transform .35s cubic-bezier(.2, .7, .2, 1); }
.lx-btn > span { display: grid; place-items: center; }
.lx-btn .wr-icon { width: 34px; height: 34px; }
.lx-btn .i-play .wr-icon { transform: translateX(-1px); } /* l’icône porte déjà son décalage : triangle centré à l’œil (entre centre de boîte et centre de gravité) */
.lx-btn .i-pause { display: none; }
.lx-btn::after { content: ""; position: absolute; inset: -1px; border-radius: 50%; border: 1.5px solid #fff; opacity: 0; animation: lx-ping 2.4s cubic-bezier(.2, .7, .2, 1) infinite; }
@keyframes lx-ping { 0% { transform: scale(1); opacity: .7; } 70%, 100% { transform: scale(1.7); opacity: 0; } }
.lx-cover:hover .lx-btn { transform: scale(1.06); }
.lx.is-playing .lx-btn { opacity: 0; }
.lx.is-playing .lx-btn::after { animation: none; }
.lx.is-playing .lx-btn .i-play { display: none; }
.lx.is-playing .lx-btn .i-pause { display: grid; }
.lx.is-playing .lx-cover:hover .lx-btn, .lx-cover:focus-visible .lx-btn { opacity: 1; }
.wr .lx-cover:focus-visible { outline: 2px solid var(--hp); outline-offset: 4px; }

/* En écoute */
.lx-now { text-align: center; margin-right: 18%; max-width: min(430px, 70vw); text-shadow: 0 1px 14px #000, 0 0 3px #000; }
.wr .lx-now p { margin: 0; }
.lx-hint { font-size: .9rem; color: var(--muted); margin-bottom: 6px !important; transition: opacity .5s; }
.lx.is-playing .lx-hint { opacity: 0; }
.lx-meta { display: flex; flex-wrap: wrap; justify-content: center; align-items: baseline; gap: 4px 10px; }
.lx-meta .k { font: 700 .72rem/1 var(--font-body); letter-spacing: .16em; text-transform: uppercase; color: var(--hp); }
.lx-meta strong { font: 700 1.15rem/1.2 var(--font-display); }
.lx-meta .a { color: rgba(255, 255, 255, .72); font-weight: 600; }
.wr .lx-open { display: inline-flex; align-items: center; gap: 6px; margin-top: 8px; font-weight: 700; font-size: .92rem; text-decoration: none; color: var(--text); opacity: .85; }
.lx-open .wr-icon { width: 16px; height: 16px; transition: transform .2s; }
.wr .lx-open:hover { opacity: 1; }
.lx-open:hover .wr-icon { transform: translateX(3px); }

/* Albums */
.lx-dock { display: flex; gap: 10px; margin-top: clamp(26px, 4vw, 44px); overflow-x: auto; scrollbar-width: none; padding: 2px; }
.lx-dock::-webkit-scrollbar { display: none; }
.wr .lx-tab { position: relative; overflow: hidden; flex: 1 0 210px; max-width: 290px; display: grid; grid-template-columns: 44px minmax(0, 1fr); gap: 11px; align-items: center;
  padding: 8px 12px 10px 8px; border-radius: 12px; text-align: left; font: inherit; color: var(--text); cursor: pointer;
  border: 1px solid var(--line); background: rgba(255, 255, 255, .035); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  transition: border-color .4s, background-color .4s; }
.lx-tab img { width: 44px; height: 44px; border-radius: 6px; object-fit: cover; }
.lx-tab .tx { display: flex; flex-direction: column; min-width: 0; line-height: 1.25; }
.lx-tab .t { font-weight: 700; font-size: .9rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lx-tab .a { font-size: .8rem; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lx-tab .bar { position: absolute; left: 0; right: 0; bottom: 0; height: 2px; background: rgba(255, 255, 255, .06); }
.lx-tab .bar i { display: block; height: 100%; width: calc(var(--p, 0) * 100%); background: var(--c); }
.wr .lx-tab:hover { border-color: var(--line-strong); }
.wr .lx-tab.is-on { border-color: color-mix(in srgb, var(--c) 55%, transparent); background: color-mix(in srgb, var(--c) 12%, rgba(255, 255, 255, .02)); }
.wr .lx-tab:focus-visible { outline: 2px solid var(--c); outline-offset: 2px; }
.wr .lx-note { margin: 12px 0 0; font-size: .82rem; color: var(--faint); }

@media (max-width: 979px) {
  /* Téléphone : la pochette s'intercale entre le titre et le texte, visible dès l'ouverture */
  .lx { min-height: 0; }
  .lx-grid { gap: 0; }
  .lx-copy { display: contents; }
  .lx-copy .eyebrow { order: 1; }
  .lx-copy .hero-title { order: 2; margin-bottom: 0; }
  .lx-stage { order: 3; margin: 26px 0 30px; }
  .lx-copy .hero-lead { order: 4; }
  .lx-copy .hero-ctas { order: 5; }
  .lx-copy .hero-facts { order: 6; }
  .lx-veil { background: linear-gradient(rgba(5, 5, 6, .8) 0%, rgba(5, 5, 6, 0) 20%, rgba(5, 5, 6, 0) 70%, var(--bg) 100%); }
  .lx-copy .hero-lead, .lx-copy .hero-facts { text-shadow: 0 1px 14px #000, 0 0 3px #000; }
  .lx-gl { background: radial-gradient(80% 30% at 40% 38%, color-mix(in srgb, var(--hs) 60%, transparent), transparent 75%); }
  .lx-disc { width: min(320px, 60vw); margin-right: 22%; }
  .lx-now { margin-right: 0; max-width: none; }
  .lx-btn { width: 72px; height: 72px; margin: -36px 0 0 -36px; }
  .lx-btn .wr-icon { width: 28px; height: 28px; }
}
@media (prefers-reduced-motion: reduce) {
  .lx-btn::after { animation: none !important; }
  .lx-vinyl, .lx-cover img { transition: none; }
}

/* ═════════════ Accueil : sections ═════════════ */
.steps { list-style: none; margin: 0; padding: 0; display: grid; gap: 16px; counter-reset: s; }
@media (min-width: 820px) { .steps { grid-template-columns: repeat(3, 1fr); gap: 22px; } }
.step { position: relative; background: linear-gradient(180deg, var(--bg-2), color-mix(in srgb, var(--bg-2) 60%, var(--bg))); border: 1px solid var(--line); border-radius: var(--radius-lg); padding: clamp(24px, 3vw, 34px); overflow: hidden; }
.step-n { position: absolute; right: 18px; top: 10px; font: 800 clamp(3.4rem, 7vw, 4.6rem)/1 var(--font-display); color: color-mix(in srgb, var(--brand) 16%, transparent); letter-spacing: -.04em; /* chiffre plein : le contour (text-stroke) montrait les tracés internes de la police variable */ pointer-events: none; }
.step-ill { width: 54px; height: 54px; border-radius: 16px; display: grid; place-items: center; background: color-mix(in srgb, var(--brand) 14%, transparent); color: var(--brand); margin-bottom: 26px; }
.step-ill .wr-icon { width: 26px; height: 26px; }
.step h3 { font-size: 1.3rem; }
.step p { color: var(--muted); margin: 0; }
.url-demo { margin: clamp(28px, 4vw, 44px) auto 0; width: fit-content; max-width: 100%; display: flex; align-items: center; gap: 12px;
  padding: 14px 22px 14px 16px; border-radius: 999px; background: var(--surface); border: 1px solid var(--line-strong);
  font: 600 clamp(.9rem, 2.2vw, 1.2rem)/1.3 var(--font-body); color: var(--muted); }
.url-lock { flex: none; width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; background: color-mix(in srgb, var(--brand) 16%, transparent); color: var(--brand); }
.url-lock .wr-icon { width: 17px; height: 17px; }
.url-text { overflow-wrap: anywhere; min-width: 0; }
.url-text b { color: var(--text); font-weight: 800; }
.url-text b.hl { color: var(--brand); }

/* ═════════════ Accueil : trois modèles (vidéos des vrais sites, ordinateur + téléphone) ═════════════ */
.md-tabs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin-bottom: clamp(26px, 4vw, 44px); }
.wr .md-tab { position: relative; overflow: hidden; display: flex; flex-direction: column; align-items: flex-start; gap: 3px; min-width: 0;
  padding: 16px 18px 18px; border-radius: var(--radius); border: 1px solid var(--line); background: var(--bg-2);
  font: inherit; color: var(--text); text-align: left; cursor: pointer; transition: border-color .3s, background-color .3s; }
.md-tab .n { font: 700 clamp(1.1rem, 2vw, 1.35rem)/1.1 var(--font-display); }
.md-tab .ex { font-size: .85rem; color: var(--muted); max-width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.md-tab .bar { position: absolute; left: 0; right: 0; bottom: 0; height: 3px; background: transparent; }
.md-tab .bar i { display: block; height: 100%; width: calc(var(--p, 0) * 100%); background: var(--c); }
.wr .md-tab:hover { border-color: var(--line-strong); }
.wr .md-tab.is-on { border-color: color-mix(in srgb, var(--c) 60%, transparent); background: color-mix(in srgb, var(--c) 10%, var(--bg-2)); }
.md-tab.is-on .n { color: var(--c); }
.wr .md-tab:focus-visible { outline: 2px solid var(--c); outline-offset: 2px; }

.md-panel { display: grid; gap: clamp(34px, 5vw, 64px); align-items: center; }
.md-panel[hidden] { display: none; }
.md-panel.is-on .md-stage { animation: md-in .7s cubic-bezier(.2, .7, .2, 1); }
.md-panel.is-on .md-copy { animation: md-in .7s .08s cubic-bezier(.2, .7, .2, 1) backwards; }
@keyframes md-in { from { opacity: 0; transform: translateY(18px); } }
@media (min-width: 980px) { .md-panel { grid-template-columns: minmax(0, 1.45fr) minmax(0, 1fr); } }

/* Scène : fenêtre de navigateur + téléphone posé devant */
.md-stage { position: relative; isolation: isolate; padding: 0 9% 9% 0; }
.md-stage::before { content: ""; position: absolute; inset: 6% 4% 0 8%; z-index: -1; border-radius: 50%; filter: blur(60px); opacity: .5;
  background: radial-gradient(closest-side, var(--c), color-mix(in srgb, var(--c2) 70%, transparent), transparent); }
.md-browser { border-radius: 14px; overflow: hidden; background: #0d0d10; border: 1px solid var(--line-strong);
  box-shadow: 0 40px 80px -36px #000, 0 0 0 1px rgba(0, 0, 0, .6); }
.md-bar { display: flex; align-items: center; gap: 7px; height: 34px; padding: 0 14px; background: #17171b; border-bottom: 1px solid var(--line); }
.md-bar i { width: 10px; height: 10px; border-radius: 50%; background: #34343a; flex: none; }
.md-url { flex: 1; min-width: 0; margin-left: 10px; max-width: 360px; padding: 4px 12px; border-radius: 99px; background: #0d0d10;
  font-size: .74rem; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.md-browser .md-screen { aspect-ratio: 16 / 10; }
.md-phone { position: absolute; right: 0; bottom: 0; width: 27%; border-radius: clamp(18px, 2.6vw, 30px); overflow: hidden;
  border: clamp(4px, .5vw, 6px) solid #1b1b20; background: #000;
  box-shadow: 0 30px 60px -20px #000, 0 0 0 1px rgba(255, 255, 255, .12); }
.md-phone .md-screen { aspect-ratio: 390 / 844; }
.md-screen { position: relative; background: #0b0b0d; }
.md-screen video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.md-fallback { position: absolute; inset: 0; display: grid; place-items: center; background: #111 center / cover no-repeat; overflow: hidden; }
.md-fallback::before { content: ""; position: absolute; inset: -20px; background: inherit; filter: blur(24px) brightness(.45); }
.md-fallback img { position: relative; width: 46%; aspect-ratio: 1; object-fit: cover; border-radius: 6px; box-shadow: 0 20px 40px -14px #000; }

/* Texte */
.wr .md-copy p { margin: 0; }
.md-kind { font: 700 .74rem/1 var(--font-body); letter-spacing: .16em; text-transform: uppercase; color: var(--c); margin-bottom: 12px !important; }
.md-copy h3 { font-size: clamp(1.5rem, 3vw, 2.1rem); line-height: 1.12; margin: 0 0 14px; text-wrap: balance; }
.md-copy > p:not(.md-kind) { color: var(--muted); font-size: 1.04rem; }
.md-feats { list-style: none; margin: 22px 0 24px; padding: 0; display: grid; gap: 10px; }
.md-feats li { display: flex; gap: 10px; align-items: flex-start; font-weight: 600; font-size: .96rem; }
.md-feats .wr-icon { flex: none; width: 18px; height: 18px; margin-top: 3px; color: var(--c); }
.wr .md-open { display: inline-flex; align-items: center; gap: 8px; font-weight: 700; text-decoration: none; color: var(--c); }
.md-open .wr-icon { width: 18px; height: 18px; transition: transform .2s; }
.md-open:hover .wr-icon { transform: translateX(4px); }
.wr .md-common { margin: clamp(30px, 4vw, 48px) 0 0; padding-top: 22px; border-top: 1px solid var(--line); color: var(--muted); font-size: .95rem; }
.md-common span { color: var(--text); font-weight: 700; margin-right: 6px; }

@media (max-width: 640px) {
  .md-tabs { gap: 6px; }
  .wr .md-tab { padding: 12px 12px 14px; }
  .md-tab .ex { display: none; }
  .md-bar { height: 26px; padding: 0 10px; gap: 5px; }
  .md-bar i { width: 7px; height: 7px; }
  .md-url { font-size: .66rem; padding: 2px 8px; margin-left: 4px; }
  .md-phone { width: 30%; }
}
@media (prefers-reduced-motion: reduce) {
  .md-panel.is-on .md-stage, .md-panel.is-on .md-copy { animation: none; }
}

/* Grilles de pochettes */
.cover-grid.few { grid-template-columns: repeat(auto-fill, minmax(min(100%, 250px), 330px)); }
@media (max-width: 560px) {
  .home-covers, .disc-latest, .disc-featured, .cover-grid.few { grid-template-columns: 1fr 1fr; gap: 14px; }
}
.cover-card .art-play { position: absolute; right: 12px; bottom: 12px; width: 46px; height: 46px; border-radius: 50%; display: grid; place-items: center;
  background: var(--brand); color: var(--brand-ink); box-shadow: 0 10px 24px -8px rgba(0, 0, 0, .8); opacity: 0; transform: translateY(8px) scale(.9); transition: .3s cubic-bezier(.2, .7, .2, 1); }
.cover-card .art-play .wr-icon { width: 20px; height: 20px; margin-left: 2px; }
.cover-card:hover .art-play, .cover-card:focus-visible .art-play { opacity: 1; transform: none; }
.cover-card:focus-visible { outline: none; }
.cover-card:focus-visible .art { outline: 2px solid var(--brand); outline-offset: 3px; }
.cover-card .t { overflow-wrap: anywhere; }
@media (hover: none) { .cover-card .art-play { opacity: 1; transform: none; width: 38px; height: 38px; right: 10px; bottom: 10px; } .cover-card .art-play .wr-icon { width: 16px; height: 16px; } }

/* Artistes */
.artist-row { display: flex; flex-wrap: wrap; gap: 26px 18px; }
.artist-chip { width: 128px; display: flex; flex-direction: column; align-items: center; text-align: center; text-decoration: none; color: var(--text); }
.artist-chip .ph { width: 104px; height: 104px; border-radius: 50%; overflow: hidden; display: grid; place-items: center; background: var(--surface); color: var(--faint);
  box-shadow: 0 0 0 1px var(--line-strong); transition: box-shadow .25s, transform .3s; margin-bottom: 12px; }
.artist-chip .ph img { width: 100%; height: 100%; object-fit: cover; }
/* Logo (image très large) : disque neutre, jamais la pochette derrière (logo rouge sur pochette rouge = invisible) */
.artist-chip .ph.logo { background: radial-gradient(circle at 50% 45%, #34343b 0%, #1c1c21 62%, #141417 100%); }
.artist-chip .ph.logo img { object-fit: contain; padding: 13%; filter: drop-shadow(0 0 1px rgba(255, 255, 255, .45)) drop-shadow(0 2px 6px rgba(0, 0, 0, .6)); }
.artist-chip:hover .ph, .artist-chip:focus-visible .ph { box-shadow: 0 0 0 2px var(--brand), 0 0 30px -6px color-mix(in srgb, var(--brand) 60%, transparent); transform: translateY(-3px); }
.artist-chip:focus-visible { outline: none; }
.artist-chip .nm { font-weight: 800; line-height: 1.25; overflow-wrap: anywhere; }
.artist-chip .ct { color: var(--muted); font-size: .84rem; }
@media (max-width: 420px) { .artist-chip { width: calc(50% - 9px); } }

/* Fonctionnalités */
.features { display: grid; gap: 14px; }
@media (min-width: 600px) { .features { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 980px) { .features { grid-template-columns: repeat(3, 1fr); gap: 20px; } }
.feat { background: var(--bg-2); border: 1px solid var(--line); border-radius: var(--radius-lg); padding: 26px; transition: border-color .25s, transform .3s; }
.feat:hover { border-color: color-mix(in srgb, var(--brand) 35%, transparent); }
.feat h3 { margin: 18px 0 8px; font-size: 1.08rem; }
.feat p { color: var(--muted); margin: 0; font-size: .96rem; }
.feat-ic { width: 48px; height: 48px; border-radius: 14px; display: grid; place-items: center; background: color-mix(in srgb, var(--brand) 14%, transparent); color: var(--brand); }
.feat-ic .wr-icon { width: 22px; height: 22px; }
@media (max-width: 599px) {
  .feat { display: grid; grid-template-columns: 44px minmax(0, 1fr); gap: 2px 16px; padding: 20px; align-items: start; }
  .feat .feat-ic { grid-row: span 2; width: 44px; height: 44px; }
  .feat h3 { margin: 2px 0 4px; }
  .feat p { font-size: .93rem; }
}
.feat-viz { display: flex; align-items: center; justify-content: center; gap: 3px; }
.feat-viz i { width: 4px; height: 20px; border-radius: 2px; background: currentColor; animation: wr-eq .9s ease-in-out infinite alternate; }
.feat-viz i:nth-child(2) { animation-delay: -.3s; height: 14px; }
.feat-viz i:nth-child(3) { animation-delay: -.6s; }
.feat-viz i:nth-child(4) { animation-delay: -.15s; height: 12px; }
.feat-viz i:nth-child(5) { animation-delay: -.45s; height: 17px; }

/* Tarif (accueil + page tarif) */
.price-split { display: grid; gap: 36px; align-items: center; }
@media (min-width: 900px) { .price-split { grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); gap: 64px; } }
.price-split h2 { text-wrap: balance; }
.price-card, .plan-main { position: relative; border-radius: 26px; padding: clamp(26px, 4vw, 38px); overflow: hidden;
  background: radial-gradient(120% 70% at 50% 0%, color-mix(in srgb, var(--brand) 22%, transparent), transparent 60%), var(--bg-2);
  border: 1px solid color-mix(in srgb, var(--brand) 32%, transparent); box-shadow: 0 40px 80px -40px color-mix(in srgb, var(--brand) 45%, transparent); }
.wr .pc-label { font: 700 .76rem/1 var(--font-body); letter-spacing: .16em; text-transform: uppercase; color: var(--brand); margin-bottom: 14px; }
.wr .pc-price { font: 800 clamp(3.6rem, 10vw, 5.2rem)/1 var(--font-display); letter-spacing: -.05em; margin: 0 0 8px; }
.wr .pc-sub { color: var(--muted); font-weight: 600; margin-bottom: 24px; }
.pc-list { list-style: none; margin: 0 0 28px; padding: 0; display: grid; gap: 11px; }
.pc-list li { display: flex; gap: 10px; align-items: flex-start; font-weight: 600; }
.pc-list .wr-icon { color: var(--brand); margin-top: 3px; }
.wr .pc-note { color: var(--faint); font-size: .86rem; text-align: center; margin: 14px 0 0; }

/* Appel final */
.home-final { padding: 0 0 clamp(64px, 10vw, 120px); }
.final-card { position: relative; overflow: hidden; text-align: center; border-radius: 30px; padding: clamp(48px, 8vw, 96px) clamp(20px, 5vw, 64px);
  background: radial-gradient(90% 90% at 50% 120%, color-mix(in srgb, var(--brand) 38%, transparent), transparent 65%), var(--bg-2); border: 1px solid var(--line); isolation: isolate; }
.final-card h2 { max-width: 16em; margin: 0 auto .45em; text-wrap: balance; font-size: clamp(1.7rem, 4.6vw, 3.1rem); }
.final-card .lead { margin: 0 auto 30px; }
.final-radar { position: absolute; left: 50%; bottom: -40%; width: 110%; aspect-ratio: 1; transform: translateX(-50%); z-index: -1; pointer-events: none; }
.final-radar span { position: absolute; inset: 0; border-radius: 50%; border: 1px solid color-mix(in srgb, var(--brand) 22%, transparent); }
.final-radar span:nth-child(2) { inset: 16%; }
.final-radar span:nth-child(3) { inset: 32%; }

/* ═════════════ Pages intérieures ═════════════ */
.page-hero { padding: clamp(48px, 8vw, 96px) 0 clamp(24px, 4vw, 40px); position: relative; overflow: hidden; isolation: isolate; }
.page-hero::before { content: ""; position: absolute; z-index: -1; inset: 0; pointer-events: none;
  background: radial-gradient(45% 80% at 82% 0%, color-mix(in srgb, var(--brand) 13%, transparent), transparent); }
.page-hero h1 { font-size: clamp(2.1rem, 6vw, 4.2rem); text-wrap: balance; }
.page-hero.center { text-align: center; }
.page-hero.center .lead { margin-left: auto; margin-right: auto; }
.page-hero.center .eyebrow { justify-content: center; }
.page-hero.center::before { background: radial-gradient(50% 80% at 50% 0%, color-mix(in srgb, var(--brand) 13%, transparent), transparent); }

/* Découvrir */
.disc-block + .disc-block { padding-top: 0; }
.disc-block { padding-bottom: clamp(40px, 6vw, 64px); }
.disc-empty { text-align: center; padding: 56px 20px; border: 1.5px dashed var(--line-strong); border-radius: var(--radius-lg); color: var(--muted); }
.pager { display: flex; align-items: center; justify-content: center; gap: 16px; margin-top: 40px; }
.pager-info { color: var(--muted); font-weight: 600; font-size: .92rem; }
.strip-cta { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 18px 28px; padding: clamp(24px, 4vw, 36px);
  border-radius: var(--radius-lg); background: radial-gradient(80% 140% at 100% 0%, color-mix(in srgb, var(--brand) 16%, transparent), transparent 60%), var(--bg-2); border: 1px solid var(--line); margin-bottom: clamp(40px, 7vw, 80px); }
.strip-cta p { margin: 6px 0 0; }

/* Page tarif */
.plan { display: grid; gap: 18px; max-width: 1040px; margin: 0 auto; }
@media (min-width: 900px) { .plan { grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); align-items: stretch; } }
.plan-main { display: flex; flex-direction: column; }
.plan-main .btn-wr { margin-top: 4px; }
.plan-badges { list-style: none; margin: 24px 0 0; padding: 0; display: grid; gap: 10px; color: var(--muted); font-weight: 600; font-size: .95rem; }
.plan-badges li { display: flex; gap: 9px; align-items: center; }
.plan-badges .wr-icon { color: var(--ok); }
.plan-incl { background: var(--bg-2); border: 1px solid var(--line); border-radius: 26px; padding: clamp(24px, 4vw, 36px); }
.wr .plan-incl-title { font: 700 .76rem/1 var(--font-body); letter-spacing: .16em; text-transform: uppercase; color: var(--muted); margin-bottom: 20px; }
.plan-incl ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 16px 22px; }
@media (min-width: 600px) { .plan-incl ul { grid-template-columns: 1fr 1fr; } }
.plan-incl li { display: flex; gap: 12px; align-items: flex-start; }
.plan-incl .ic { flex: none; width: 38px; height: 38px; border-radius: 11px; display: grid; place-items: center; background: color-mix(in srgb, var(--brand) 13%, transparent); color: var(--brand); }
.plan-incl .ic .wr-icon { width: 18px; height: 18px; }
.plan-incl b { display: block; font-weight: 800; line-height: 1.3; }
.plan-incl small { display: block; color: var(--muted); font-size: .86rem; line-height: 1.45; margin-top: 2px; }

.faq-wrap { max-width: 860px; }
.faq { border-top: 1px solid var(--line); }
.faq details { border-bottom: 1px solid var(--line); }
.faq summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 22px 0; font-weight: 800; font-size: clamp(1rem, 2vw, 1.12rem); }
.faq summary::-webkit-details-marker { display: none; }
.faq summary:focus-visible { outline: 2px solid var(--brand); outline-offset: 4px; border-radius: 6px; }
.faq-ic { flex: none; width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; background: var(--surface); color: var(--brand); transition: transform .25s; }
.faq details[open] .faq-ic { transform: rotate(45deg); }
.faq details p { color: var(--muted); margin: -6px 0 22px; max-width: 46em; }
.faq-more { margin-top: 26px; }
.faq-more a { color: var(--brand); font-weight: 700; }

/* Pages légales */
.legal-hero { padding-bottom: 12px; }
.legal-hero h1 { font-size: clamp(2rem, 5vw, 3.4rem); }
.legal-body { padding: 12px 0 clamp(64px, 9vw, 110px); }
.legal-body .prose { max-width: 780px; }
.prose ul { padding-left: 1.2em; }
.prose li { margin-bottom: .45em; }
.prose h2 { font-size: 1.2rem; margin-top: 2.2em; }
.legal-summary { background: var(--bg-2); border: 1px solid var(--line); border-left: 3px solid var(--brand); border-radius: 12px; padding: 18px 20px; }
.legal-summary p { margin: 0; }
.prose mark.ph { background: color-mix(in srgb, var(--brand) 18%, transparent); color: #ffd48a; padding: 1px 6px; border-radius: 5px; font-weight: 600; }
.legal-card { list-style: none; padding: 0 !important; margin: 0 0 1em; border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; }
.legal-card li { margin: 0; padding: 12px 16px; border-bottom: 1px solid var(--line); display: grid; gap: 2px; }
.legal-card li:last-child { border-bottom: 0; }
.legal-card li > span:first-child { font: 700 .72rem/1.4 var(--font-body); letter-spacing: .12em; text-transform: uppercase; color: var(--faint); }
@media (min-width: 640px) { .legal-card li { grid-template-columns: 170px 1fr; gap: 16px; align-items: baseline; } }

/* Contact */
.contact-grid { display: grid; gap: 28px; padding-bottom: clamp(56px, 8vw, 100px); }
@media (min-width: 900px) { .contact-grid { grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: 48px; align-items: start; } }
.contact-form { background: var(--bg-2); border: 1px solid var(--line); border-radius: var(--radius-lg); padding: clamp(20px, 4vw, 36px); }
.contact-form .row2 { display: grid; gap: 18px; }
@media (min-width: 640px) { .contact-form .row2 { grid-template-columns: 1fr 1fr; } }
.contact-form .hint { margin: 0; }
.contact-form .hint a { color: var(--brand); }
.contact-form .hp { position: absolute !important; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
.wr select.wr-input { appearance: none; -webkit-appearance: none; padding-right: 44px; cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23a3a09a' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 14px center; background-size: 18px; }
.wr-input[aria-invalid="true"] { border-color: var(--danger); }
.field-err { color: #ffb4b4; font-size: .86rem; font-weight: 600; margin: 6px 0 0 !important; }
.contact-aside { display: grid; gap: 16px; }
.aside-card { border: 1px solid var(--line); border-radius: var(--radius-lg); padding: 24px; }
.wr .aside-card .h-sm { margin-bottom: 14px; }
.aside-card ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; }
.aside-card li a { color: var(--brand); font-weight: 700; text-decoration: none; display: block; }
.aside-card li span { color: var(--muted); font-size: .9rem; }
.aside-card p { margin: 0; font-size: .95rem; }


/* Rythme vertical de l'accueil */
.page-home .section { padding: clamp(56px, 8vw, 104px) 0; }
.page-home .home-hero + .section { padding-top: clamp(24px, 4vw, 48px); }
.page-home .section + .section, .page-home .section-tight + .section { padding-top: 0; }
.page-home .home-artists { padding: 0 0 clamp(56px, 8vw, 104px); }

/* Cartes vedettes (≤ 3 releases) */
.spot-grid { display: grid; gap: 18px; }
@media (min-width: 820px) { .spot-grid { grid-template-columns: repeat(auto-fit, minmax(340px, 1fr)); gap: 22px; } }
.spot { position: relative; isolation: isolate; overflow: hidden; display: grid; grid-template-columns: minmax(0, 44%) minmax(0, 1fr); gap: clamp(16px, 3vw, 28px); align-items: center;
  padding: clamp(14px, 2vw, 20px); border-radius: var(--radius-lg); text-decoration: none; color: var(--text); border: 1px solid var(--line); background: var(--bg-2);
  transition: border-color .3s, transform .4s cubic-bezier(.2, .7, .2, 1); }
.spot:hover { border-color: color-mix(in srgb, var(--c) 55%, transparent); transform: translateY(-3px); }
.spot:focus-visible { outline: 2px solid var(--brand); outline-offset: 3px; }
.spot-bg { position: absolute; inset: -20%; z-index: -1; background: center / cover no-repeat; filter: blur(40px) saturate(1.5) brightness(.35); opacity: .9; }
.spot-cover { width: 100%; height: auto; aspect-ratio: 1; object-fit: cover; border-radius: 12px; box-shadow: 0 24px 40px -20px rgba(0, 0, 0, .95); transition: transform .5s cubic-bezier(.2, .7, .2, 1); }
.spot:hover .spot-cover { transform: scale(1.03) rotate(-1deg); }
.spot-meta { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.spot-meta .k { font: 700 .68rem/1 var(--font-body); letter-spacing: .16em; text-transform: uppercase; color: color-mix(in srgb, var(--c) 70%, #fff); }
.spot-meta .t { font: 700 clamp(1.15rem, 2.6vw, 1.7rem)/1.1 var(--font-display); letter-spacing: -.02em; overflow-wrap: anywhere; }
.spot-meta .a { color: rgba(255, 255, 255, .72); font-weight: 600; }
.spot-meta .go { display: inline-flex; align-items: center; gap: .45em; margin-top: 12px; font-weight: 700; font-size: .9rem; color: var(--text); }
.spot-meta .go .wr-icon { color: var(--brand); transition: transform .2s; }
.spot:hover .spot-meta .go .wr-icon { transform: translateX(4px); }
@media (max-width: 400px) { .spot-meta .go { font-size: .82rem; margin-top: 6px; } }

/* Artistes : titre et visages côte à côte sur grand écran */
@media (min-width: 900px) {
  .artists-split { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 48px; align-items: center; }
  .artists-split .sec-head { margin: 0; }
  .artists-split .artist-row { justify-content: flex-end; }
}

@media (prefers-reduced-motion: reduce) {
  .feat-viz i { animation: none !important; }
  .reveal.pre { opacity: 1; transform: none; }
}

/* « Un seul paiement » : mis en avant dans les cartes de prix */
.pc-life { display: inline-flex; align-items: center; gap: 8px; margin: 4px 0 14px; padding: 6px 12px; border-radius: 999px; font-weight: 700; font-size: .9rem;
  color: var(--ok); background: color-mix(in srgb, var(--ok) 12%, transparent); border: 1px solid color-mix(in srgb, var(--ok) 30%, transparent); }
.pc-life .wr-icon { width: 16px; height: 16px; }