/* WowRadar — style V2 des pages vitrine (Découvrir, Tarif, Contact, pages légales, connexion, erreur).
   Chargé après site.css quand site_v2() est vrai (toujours en local, en ligne via SITE_V2=1).
   Même grammaire que l'accueil V2 : bandeau de marque en tête, bandes pleine largeur alternées claire / sombre,
   étiquettes numérotées « 02 — », titres Roboto 800, coins nets, AUCUN halo (ni lueur, ni dégradé radial, ni ombre colorée). */

.site-v2 {
  --ink: #120e0a;
  --ink-2: #1c1611;
  --cream: #f5f2ec;
  --paper: #fffdf9;
  --deep: #b23c0d;
  --hot: #c2410c;
  --brand-soft: #ffb43d;
  --band: linear-gradient(118deg, #120e0a 0%, #2a160b 34%, #6a2a0c 66%, #c2410c 100%);
  --shadow: 0 1px 0 rgba(18, 14, 10, .06), 0 12px 22px -16px rgba(18, 14, 10, .35);
  --shadow-dark: 0 18px 30px -20px rgba(0, 0, 0, .7);
  /* Socle sombre réchauffé (au lieu du noir bleuté) */
  --bg: #120e0a;
  --bg-2: #1c1611;
  --surface: #241d16;
  --surface-2: #2b231b;
  --line: rgba(255, 255, 255, .08);
  --line-strong: rgba(255, 255, 255, .16);
  --text: #f5f2ec;
  --muted: #b3aba1;
  --faint: #857c72;
  --radius: 4px;
  --radius-lg: 4px;
  background: var(--ink);
}

/* ── En-tête plein, pied de page sombre, boutons rectangulaires sans lueur ── */
.site-v2 .wr-header { background: var(--ink); backdrop-filter: none; -webkit-backdrop-filter: none; border-bottom: 1px solid rgba(255, 255, 255, .07); }
.site-v2 .wr-nav a { border-radius: 3px; }
.site-v2 .btn-wr { border-radius: 4px; }
.site-v2 .btn-wr:hover { box-shadow: none; }
.site-v2 .btn-wr.ghost:hover { box-shadow: inset 0 0 0 1.5px var(--text); }
.site-v2 .wr-input, .site-v2 textarea.wr-input, .site-v2 select.wr-input { border-radius: 4px; }
.site-v2 .wr-input:focus { box-shadow: 0 0 0 2px var(--brand); }
.site-v2 .wr-flash { border-radius: 4px; }
.site-v2 .lang-switch summary, .site-v2 .lang-switch ul, .site-v2 .lang-switch li a { border-radius: 4px; }
.site-v2 .wr-footer { background: var(--ink); border-top: 1px solid rgba(255, 255, 255, .07); padding-top: 56px; color: #a8a29a; }
.site-v2 .wr-footer a { color: #a8a29a; }
.site-v2 .wr-footer a:hover { color: var(--cream); }

/* ═════════ Bandes : tête de marque, puis sombre / claire en alternance ═════════ */
.site-v2 main { counter-reset: v2; }
.site-v2:not(.page-home):not(.page-home-v2) main > section { counter-increment: v2; padding: clamp(72px, 9vw, 120px) 0; }

/* Bande claire : on retourne les jetons, tout le contenu (cartes, champs, liens) suit */
.site-v2.page-pricing main > section:nth-of-type(3),
.site-v2.page-discover main > section:nth-of-type(odd):not(.page-hero),
.site-v2 .legal-body,
.site-v2 .contact-sec,
.site-v2 .v2l {
  --bg: var(--cream);
  --bg-2: var(--paper);
  --surface: #ece7de;
  --surface-2: #e4ded3;
  --line: rgba(18, 14, 10, .1);
  --line-strong: rgba(18, 14, 10, .2);
  --text: var(--ink);
  --muted: #5f574d;
  --faint: #857b70;
  --brand: var(--deep);          /* accents lisibles sur clair (≥ 5:1) */
  --brand-ink: #fff;
  background: var(--cream);
  color: var(--ink);
}
.site-v2.page-pricing main > section:nth-of-type(2),
.site-v2.page-discover main > section:nth-of-type(even) { background: var(--ink); color: var(--cream); }

/* ── Tête de page : bande de marque ── */
.site-v2 .page-hero { background: var(--band); color: #fff; padding: clamp(80px, 10vw, 140px) 0 clamp(64px, 8vw, 110px); text-align: left; }
.site-v2 .page-hero::before { content: none; }
.site-v2 .page-hero.center .lead { margin-left: 0; }
.site-v2 .page-hero .eyebrow, .site-v2 .page-hero.center .eyebrow { justify-content: flex-start; color: #fff; letter-spacing: .16em; margin-bottom: 22px; }
.wr.site-v2 .page-hero h1 { font-size: clamp(2.5rem, 5.6vw, 5rem); line-height: 1.04; letter-spacing: -.02em; max-width: 15em; margin-bottom: .45em; text-wrap: balance; }
.site-v2 .page-hero h1 .l2 { display: block; font-weight: 300; color: var(--brand-soft); letter-spacing: -.025em; }
.site-v2 .page-hero .hl { color: inherit; }
.wr.site-v2 .page-hero .lead { color: rgba(255, 255, 255, .86); max-width: 36em; }
.site-v2 .page-hero .muted { color: rgba(255, 255, 255, .7); }
.wr.site-v2 .legal-hero h1 { font-size: clamp(2.3rem, 5vw, 4.2rem); }

/* Étiquettes numérotées « 01 — Libellé » (compteur de bandes) */
.wr.site-v2 .eyebrow::before, .site-v2 .sec-head:not(:has(.eyebrow))::before {
  content: counter(v2, decimal-leading-zero); width: auto; height: auto; border-radius: 0;
  padding-right: 40px; background: linear-gradient(currentColor, currentColor) left 2.1em center / 28px 2px no-repeat;
  color: var(--hot); font-weight: 800; letter-spacing: .04em;
}
.site-v2 .page-hero .eyebrow::before { color: var(--brand); background-image: linear-gradient(rgba(255, 255, 255, .5), rgba(255, 255, 255, .5)); }
.site-v2 .sec-head:not(:has(.eyebrow))::before { display: block; width: max-content; flex-basis: 100%; margin-bottom: 18px; font: 800 .74rem/1.2 var(--font-body); }
.site-v2 .sec-head.row:not(:has(.eyebrow))::before { margin-bottom: 0; }
.wr.site-v2 .eyebrow { color: var(--text); }
.site-v2 .v2l .eyebrow::before, .site-v2 .legal-body .eyebrow::before { color: var(--hot); }

/* Titres de section */
.wr.site-v2 .sec-head h2, .wr.site-v2 .disc-block .h-sm { font-size: clamp(2.1rem, 4.6vw, 3.8rem); line-height: 1.04; letter-spacing: -.02em; }
.site-v2 .sec-head { margin-bottom: clamp(32px, 4vw, 56px); }

/* ═════════ Tarif ═════════ */
.site-v2 .plan { max-width: none; gap: clamp(18px, 2.4vw, 28px); }
.site-v2 .price-card, .site-v2 .plan-main { border-radius: 4px; border: 0; box-shadow: var(--shadow-dark); background: var(--brand); color: var(--ink); }
.wr.site-v2 .plan-main .pc-label { color: var(--ink); }
.wr.site-v2 .plan-main .pc-sub, .site-v2 .plan-main .plan-badges { color: rgba(18, 14, 10, .78); }
.site-v2 .plan-main .pc-life .wr-icon, .site-v2 .plan-main .plan-badges .wr-icon { color: var(--ink); }
.site-v2 .plan-main .btn-wr { --b-bg: var(--ink); --b-fg: var(--cream); }
.site-v2 .plan-main .btn-wr:hover { background: #2b221a; }
.site-v2 .plan-incl { border-radius: 4px; background: var(--ink-2); border: 1px solid rgba(255, 255, 255, .08); }
.site-v2 .plan-incl .ic { border-radius: 50%; background: transparent; border: 1.5px solid currentColor; color: var(--brand); }

/* FAQ en accordéon sur carte papier */
.site-v2 .faq-wrap { max-width: none; display: grid; grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); gap: 0 clamp(32px, 6vw, 96px); align-items: start; }
.site-v2 .faq-wrap .sec-head { grid-row: 1 / span 2; }
.site-v2 .faq { border-top: 0; background: var(--paper); border-radius: 4px; box-shadow: var(--shadow); border: 1px solid rgba(18, 14, 10, .08); padding: 6px clamp(18px, 2.6vw, 34px); }
.site-v2 .faq details:last-child { border-bottom: 0; }
.site-v2 .faq summary { font-family: var(--font-display); font-weight: 700; padding: 20px 0; }
.site-v2 .faq summary:focus-visible { border-radius: 0; }
.site-v2 .faq-ic { width: 30px; height: 30px; background: transparent; border: 1.5px solid rgba(18, 14, 10, .2); color: var(--deep); }
.site-v2 .faq-ic .wr-icon { width: 15px; height: 15px; }
.site-v2 .faq details[open] .faq-ic { background: var(--hot); border-color: var(--hot); color: #fff; }
.site-v2 .faq-more { grid-column: 2; }

/* ═════════ Découvrir ═════════ */
.site-v2 .disc-block + .disc-block { padding-top: clamp(72px, 9vw, 120px); }
.site-v2 .spot { border-radius: 4px; background: var(--ink-2); border: 1px solid rgba(255, 255, 255, .08); }
.site-v2 .spot:hover { border-color: var(--c); }
.site-v2 .spot-bg { display: none; }                     /* pochette floutée = halo : retirée */
.site-v2 .spot-cover { border-radius: 3px; box-shadow: var(--shadow-dark); }
.site-v2 .spot:hover .spot-cover { transform: translateY(-4px); }
.site-v2 .spot-meta .k { color: var(--brand); }
.site-v2 .cover-card .art { border-radius: 4px; box-shadow: var(--shadow-dark); }
.site-v2 .v2l .cover-card .art, .site-v2 main > section:nth-of-type(odd) .cover-card .art { box-shadow: var(--shadow); }
.site-v2 .cover-card:hover .art img { transform: none; }
.site-v2 .cover-card .art { transition: transform .35s cubic-bezier(.2, .7, .2, 1); }
.site-v2 .cover-card:hover .art { transform: translateY(-6px); }
.site-v2 .cover-card .art-play { box-shadow: none; background: var(--brand-soft); color: var(--ink); }
.site-v2 .cover-card .k { color: var(--hot); }
.site-v2 .cover-card .t { font-family: var(--font-display); font-size: 1.12rem; }
.site-v2 .artist-chip .ph { border-radius: 50%; }
.site-v2 .artist-chip .ph.logo { background: var(--ink-2); }
.site-v2 .artist-chip:hover .ph, .site-v2 .artist-chip:focus-visible .ph { box-shadow: 0 0 0 3px var(--brand); }
.site-v2 .artist-chip .ph.logo img { filter: none; }
.site-v2 .disc-empty { border-radius: 4px; }
/* Appel final : aplat orange net */
.site-v2 .strip-cta { border-radius: 4px; border: 0; margin-bottom: 0; padding: clamp(32px, 5vw, 56px); background: #f7a61e; color: var(--ink); box-shadow: var(--shadow-dark); }
.wr.site-v2 .strip-cta .h-sm { font-size: clamp(1.6rem, 3.2vw, 2.4rem); }
.wr.site-v2 .strip-cta .muted { color: rgba(18, 14, 10, .75); }
.site-v2 .strip-cta .btn-wr { --b-bg: var(--ink); --b-fg: var(--cream); min-height: 54px; }
.site-v2 .strip-cta .btn-wr:hover { background: #2b221a; }
.site-v2 .pager .btn-wr.ghost { --b-fg: var(--text); }

/* ═════════ Contact ═════════ */
.site-v2 .contact-grid { padding-bottom: 0; }
.site-v2 .contact-form { border-radius: 4px; background: var(--paper); box-shadow: var(--shadow); }
.site-v2 .aside-card { border-radius: 4px; background: var(--ink); color: var(--cream); border: 0;
  --text: var(--cream); --muted: #b3aba1; --brand: #f7a61e; }
.site-v2 .aside-card + .aside-card { background: var(--hot); color: #fff; --muted: rgba(255, 255, 255, .85); }

/* ═════════ Pages légales : lecture sur fond crème ═════════ */
.site-v2 .legal-body { padding-top: clamp(56px, 7vw, 96px); }
.site-v2 .prose p, .site-v2 .prose li { color: #3d362f; }
.site-v2 .prose h2 { font-size: clamp(1.3rem, 2.2vw, 1.6rem); padding-top: 1.1em; border-top: 1px solid rgba(18, 14, 10, .1); }
.site-v2 .prose a { color: var(--deep); font-weight: 600; text-underline-offset: 3px; }
.site-v2 .legal-summary { border-radius: 4px; border: 0; border-left: 0; background: var(--ink); padding: 24px 26px; }
.site-v2 .legal-summary p { color: var(--cream); }
.site-v2 .legal-summary a { color: #f7a61e; }
.site-v2 .prose mark.ph { background: #ffe1ad; color: var(--ink); border-radius: 2px; }
.site-v2 .legal-card { border-radius: 4px; background: var(--paper); box-shadow: var(--shadow); }

/* ═════════ Connexion / inscription : bande de marque + carte papier ═════════ */
.site-v2 .auth-wrap { background: var(--band); }
.site-v2 .auth-glow { display: none; }
.site-v2 .auth-card {
  --bg-2: var(--paper); --surface: #f3efe8; --line: rgba(18, 14, 10, .1); --line-strong: rgba(18, 14, 10, .22);
  --text: var(--ink); --muted: #5f574d; --faint: #857b70; --brand: var(--deep); --brand-ink: #fff;
  border-radius: 4px; border: 0; background: var(--paper); color: var(--ink); box-shadow: var(--shadow-dark); max-width: 460px;
}
.site-v2 .auth-card h1 { font-size: clamp(1.8rem, 3vw, 2.2rem); }
.site-v2 .auth-card .eyebrow::before { content: ""; width: 28px; height: 2px; padding: 0; background: var(--hot); }
.site-v2 .auth-card .btn-wr { --b-bg: var(--ink); --b-fg: var(--cream); }
.site-v2 .auth-card .btn-wr:hover { background: #2b221a; }
.site-v2 .gsi-btn { border-radius: 4px; }
.site-v2 .wr-flash.error { background: #fdecea; border-color: #f2b8b2; color: #8f1d12; }
.site-v2 .wr-flash.success { background: #e6f6ee; border-color: #a8dcc0; color: #11603b; }
.site-v2 .auth-card .wr-flash.info, .site-v2 .v2l .wr-flash.info { background: var(--surface); color: var(--ink); }
.site-v2 .contact-sec .wr-flash.error { background: #fdecea; }

/* ═════════ Erreur ═════════ */
.site-v2 .simple-page { background: var(--band); color: #fff; min-height: calc(100vh - 68px); min-height: calc(100svh - 68px); display: flex; align-items: center; }
.site-v2 .simple-page .container-wr { text-align: left !important; }
.site-v2 .simple-page .eyebrow { justify-content: flex-start !important; color: #fff; }
.site-v2 .simple-page .eyebrow::before { content: ""; width: 28px; height: 2px; padding: 0; background: rgba(255, 255, 255, .5); }
.site-v2 .simple-page h1 { font-size: clamp(2.5rem, 5.6vw, 5rem) !important; letter-spacing: -.02em; }
.wr.site-v2 .simple-page .lead { color: rgba(255, 255, 255, .86); margin: 0 0 30px !important; }

/* ═════════ Responsive ═════════ */
@media (max-width: 900px) {
  .site-v2 .page-hero, .site-v2 .auth-wrap, .site-v2 .simple-page { background: linear-gradient(168deg, #120e0a 0%, #2a160b 40%, #6a2a0c 75%, #c2410c 100%); }
  .site-v2 .faq-wrap { grid-template-columns: minmax(0, 1fr); }
  .site-v2 .faq-wrap .sec-head { grid-row: auto; }
  .site-v2 .faq-more { grid-column: 1; }
}
@media (max-width: 600px) {
  .wr.site-v2 .page-hero h1, .site-v2 .simple-page h1 { font-size: clamp(2.2rem, 10.4vw, 2.8rem) !important; }
  .wr.site-v2 .sec-head h2, .wr.site-v2 .disc-block .h-sm { font-size: clamp(2rem, 9vw, 2.5rem); }
  .site-v2 .strip-cta .btn-wr { width: 100%; }
  .site-v2 .auth-wrap { padding-top: 32px; padding-bottom: 32px; }
}
@media (prefers-reduced-motion: reduce) {
  .site-v2 .cover-card:hover .art, .site-v2 .spot:hover .spot-cover { transform: none; }
}

/* Pastille « Sans abonnement » sur l'aplat orange */
.site-v2 .plan-main .pc-life { border-radius: 3px; background: var(--ink); color: var(--cream); border: 0; }
.site-v2 .plan-main .pc-life .wr-icon { color: #f7a61e; }

/* « Autre chose ? Contactez-nous. » : respiration sous l'accordéon */
.wr.site-v2 .faq-more { margin: 28px 0 0; }

/* ═════════ Menu mobile : burger en trois traits, croix animée ═════════ */
.site-v2 .wr-burger, .site-v2 .wr-nav-close { border-radius: 4px; transition: background .2s ease, color .2s ease; }
.wr-bars { position: relative; display: block; width: 26px; height: 18px; }
.wr-bars i { position: absolute; right: 0; height: 2px; border-radius: 1px; background: currentColor;
  transition: width .3s cubic-bezier(.2, .7, .2, 1), transform .3s cubic-bezier(.2, .7, .2, 1), background .2s ease; }
.wr-bars i:nth-child(1) { top: 0; width: 26px; }
.wr-bars i:nth-child(2) { top: 8px; width: 17px; }
.wr-bars i:nth-child(3) { top: 16px; width: 22px; }
/* Survol : les traits s'alignent sur toute la largeur, celui du milieu passe à l'orange */
.site-v2 .wr-burger:hover .wr-bars i, .site-v2 .wr-burger:focus-visible .wr-bars i { width: 26px; }
.site-v2 .wr-burger:hover .wr-bars i:nth-child(2), .site-v2 .wr-burger:focus-visible .wr-bars i:nth-child(2) { background: #f7a61e; transform: translateX(-3px); }
.site-v2 .wr-burger:active .wr-bars { transform: scale(.92); }

.wr-x { position: relative; display: block; width: 24px; height: 24px; transition: transform .35s cubic-bezier(.2, .7, .2, 1); }
.wr-x i { position: absolute; left: 0; top: 11px; width: 24px; height: 2px; border-radius: 1px; background: currentColor;
  transform: scaleX(0); transition: transform .4s cubic-bezier(.2, .7, .2, 1) .12s, background .2s ease; }
.wr-x i:nth-child(1) { transform: rotate(45deg) scaleX(0); }
.wr-x i:nth-child(2) { transform: rotate(-45deg) scaleX(0); transition-delay: .2s; }
/* Ouverture du menu : les deux traits se tracent l'un après l'autre pour former la croix */
.wr-nav.open .wr-x i:nth-child(1) { transform: rotate(45deg) scaleX(1); }
.wr-nav.open .wr-x i:nth-child(2) { transform: rotate(-45deg) scaleX(1); }
/* Survol : quart de tour, croix orange */
.site-v2 .wr-nav-close:hover, .site-v2 .wr-nav-close:focus-visible { background: var(--surface); }
.site-v2 .wr-nav-close:hover .wr-x, .site-v2 .wr-nav-close:focus-visible .wr-x { transform: rotate(90deg); }
.site-v2 .wr-nav-close:hover .wr-x i, .site-v2 .wr-nav-close:focus-visible .wr-x i { background: #f7a61e; transition-delay: 0s; }
@media (prefers-reduced-motion: reduce) {
  .wr-x i, .wr-nav.open .wr-x i { transition: none; }
  .site-v2 .wr-nav-close:hover .wr-x { transform: none; }
}

/* ═════════ Barre de défilement jaune (pouce net, rail encre) ═════════
   Chromium ignore les ::-webkit-scrollbar dès que scrollbar-color/width est posé : propriétés standard réservées aux autres moteurs. */
.site-v2 ::-webkit-scrollbar, html:has(> body.site-v2)::-webkit-scrollbar { width: 12px; height: 12px; }
.site-v2 ::-webkit-scrollbar-track, .site-v2 ::-webkit-scrollbar-corner,
html:has(> body.site-v2)::-webkit-scrollbar-track, html:has(> body.site-v2)::-webkit-scrollbar-corner { background: var(--ink, #120e0a); }
.site-v2 ::-webkit-scrollbar-thumb, html:has(> body.site-v2)::-webkit-scrollbar-thumb { background-color: #f7a61e; border: 3px solid transparent; background-clip: padding-box; border-radius: 3px; }
.site-v2 ::-webkit-scrollbar-thumb:hover, html:has(> body.site-v2)::-webkit-scrollbar-thumb:hover { background-color: #ffbe4d; }
.site-v2 ::-webkit-scrollbar-thumb:active, html:has(> body.site-v2)::-webkit-scrollbar-thumb:active { background-color: #ffd68a; }
@supports not selector(::-webkit-scrollbar) {
  html:has(> body.site-v2) { scrollbar-width: thin; scrollbar-color: #f7a61e #120e0a; }
}