/* ============================================================
   ID SONG — identité visuelle UNIDE / Hyperso
   Sombre #1A1A1B · Élevé #202022 · Or #A6894A · Texte #F9F9F9
   Titres : Instrument Sans · Corps : Plus Jakarta Sans
   ============================================================ */
:root {
  --bg-main: #1c1726;      /* nuit violette, plus chaleureuse que le noir */
  --bg-elev: #251e33;
  --bg-elev2: #2e2540;
  --color-text: #F9F9F9;
  --text-muted: #a89fb3;
  --gold: #d9a94e;
  --gold-soft: rgba(217, 169, 78, 0.16);
  --border-light: rgba(255, 255, 255, 0.10);
  --border-gold: rgba(217, 169, 78, 0.4);
  --fun-coral: #ff7a59;
  --fun-pink: #ec4899;
  --fun-violet: #8b5cf6;
  --fun-teal: #2dd4bf;
  --grad-fun: linear-gradient(90deg, #d9a94e, #ff7a59);
  --grad-party: linear-gradient(90deg, #8b5cf6, #ec4899, #ff7a59, #d9a94e);
  --font-serif: 'Instrument Sans', sans-serif;
  --font-sans: 'Plus Jakarta Sans', sans-serif;
  --font-script: 'Alex Brush', cursive;
  --radius: 14px;
  --trans: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  --ok: #7fa650;
  --err: #d9645f;
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body {
  background: var(--bg-main);
  color: var(--color-text);
  font-family: var(--font-sans);
  font-weight: 300;
  line-height: 1.6;
  overflow-x: hidden;
  /* Aucun texte saisi par un visiteur ne doit pouvoir élargir la page : un
     email long, un lien, un mot sans espace débordaient de leur carte — et
     l'écran du téléphone se mettait à défiler de côté, « hors dimension ». */
  overflow-wrap: break-word;
}
img { max-width: 100%; display: block; }
/* L'attribut HTML `hidden` DOIT toujours cacher : sans cette règle, un
   `display` posé par une classe (ex. .btn { display: inline-block }) l'emporte
   sur la feuille de l'UA et l'élément reste visible malgré hidden. */
[hidden] { display: none !important; }
h1, h2, h3, h4 { font-family: var(--font-serif); font-weight: 600; line-height: 1.18; letter-spacing: .3px; }
h1 { font-size: 2.4rem; }
h2 { font-size: 1.7rem; }
a { color: var(--gold); text-decoration: none; }
.muted { color: var(--text-muted); }
.container { max-width: 1140px; margin: 0 auto; padding: 0 40px; }

/* ---------- entête ---------- */
.site-header {
  background: rgba(26, 26, 27, 0.9);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--border-light);
  position: sticky; top: 0; z-index: 50;
}
/* L'en-tête respire plus large que le contenu de la page */
.site-header .container { max-width: 1440px; }
.header-inner { display: flex; align-items: center; gap: 34px; padding: 15px 32px; }
.brand {
  display: flex; align-items: center; gap: 12px; flex: none;
  color: var(--color-text); text-decoration: none;
}
.brand-logo { height: 42px; width: 42px; object-fit: cover; border-radius: 10px; }
/* Typo du lockup officiel (kit logo) : Instrument Sans 600, accent or en 700 */
.brand-name {
  font-family: var(--font-serif); font-size: 1.22rem; line-height: 1;
  font-weight: 600; letter-spacing: .3px; white-space: nowrap;
}
.brand-accent { color: var(--gold); font-weight: 700; }
.main-nav { display: flex; gap: 32px; flex: 1; justify-content: center; align-items: center; flex-wrap: nowrap; min-width: 0; }
.main-nav a {
  color: var(--text-muted); font-weight: 500; font-size: .95rem; white-space: nowrap;
  padding: 6px 1px; position: relative; transition: color .25s ease;
}
.main-nav a::after {
  content: ""; position: absolute; left: 0; bottom: 0; height: 2px; width: 100%;
  background: var(--grad-fun); border-radius: 2px;
  transform: scaleX(0); transform-origin: left; transition: transform .3s cubic-bezier(0.4, 0, 0.2, 1);
}
.main-nav a:hover, .main-nav a.active { color: #fff; }
.main-nav a:hover::after, .main-nav a.active::after { transform: scaleX(1); }
.nav-cta {
  flex: none; background: var(--grad-fun); color: #1A1A1B; font-weight: 700;
  font-size: .74rem; text-transform: uppercase; letter-spacing: 1.1px;
  padding: 11px 20px; border-radius: 30px; white-space: nowrap; transition: var(--trans);
}
.nav-cta:hover { color: #1A1A1B; transform: translateY(-1px); box-shadow: 0 8px 22px rgba(255, 122, 89, .35); }
.group-logo { height: 34px; margin-left: auto; opacity: .95; }

main { min-height: 66vh; }

/* ---------- pied de page ---------- */
.site-footer {
  background: #141415; color: var(--text-muted);
  margin-top: 90px; padding: 46px 0; text-align: center;
  border-top: 1px solid var(--border-light);
}
.footer-brand {
  font-family: var(--font-serif); font-size: 1.1rem; letter-spacing: 3px;
  text-transform: uppercase; color: var(--color-text); margin-bottom: 8px;
}
.site-footer .muted { font-size: .82rem; margin-top: 8px; }

/* ---------- boutons ---------- */
.btn {
  display: inline-block; border: 1px solid var(--gold); cursor: pointer;
  background: transparent; color: var(--gold);
  font-family: var(--font-sans); font-weight: 500; font-size: .82rem;
  text-transform: uppercase; letter-spacing: 2px;
  padding: 14px 34px; border-radius: 4px; transition: var(--trans);
}
.btn:hover { background: var(--gold); color: var(--bg-main); }
.btn:disabled { opacity: .4; cursor: default; }
.btn:disabled:hover { background: transparent; color: var(--gold); }
.btn-secondary { border-color: var(--border-light); color: var(--color-text); }
.btn-secondary:hover { background: var(--color-text); color: var(--bg-main); border-color: var(--color-text); }
.btn-ghost { border-color: var(--border-light); color: var(--text-muted); }
.btn-ghost:hover { background: var(--bg-elev2); color: var(--color-text); border-color: var(--text-muted); }
.btn-danger { border-color: rgba(217,100,95,.5); color: var(--err); }
.btn-danger:hover { background: var(--err); color: #fff; border-color: var(--err); }
.btn-lg { font-size: .92rem; padding: 17px 44px; }

/* ---------- galerie d'exemples ---------- */
.examples-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 26px; }
.example-card {
  background: var(--bg-elev); border: 1px solid var(--border-light); border-radius: var(--radius);
  overflow: hidden; display: flex; flex-direction: column; transition: var(--trans);
}
.example-card:hover { transform: translateY(-4px); border-color: var(--border-gold); box-shadow: 0 18px 44px rgba(0,0,0,.35); }
.example-cover { aspect-ratio: 1/1; background: var(--bg-elev2); }
.example-cover img { width: 100%; height: 100%; object-fit: cover; display: block; }
.example-cover-fallback { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; font-size: 3rem; }
.example-body { padding: 20px 22px; display: flex; flex-direction: column; gap: 10px; }
.example-body h3 { color: #fff; margin: 0; }
.example-note { font-style: italic; color: var(--gold); margin: 0; font-size: .92rem; }
.example-hint { font-size: .78rem; color: var(--text-muted); margin: -4px 0 0; }
.example-brief {
  background: var(--bg-main); border: 1px solid var(--border-light);
  border-radius: 12px; padding: 14px 16px; margin-top: 4px;
}
.example-brief-title { font-size: .82rem; color: var(--gold); font-weight: 600; margin: 0 0 10px; }
.brief-chips { list-style: none; display: flex; flex-wrap: wrap; gap: 8px; padding: 0; margin: 0; }
.brief-chips li {
  background: var(--gold-soft); border: 1px solid var(--border-gold); border-radius: 20px;
  padding: 4px 12px; font-size: .82rem; color: #ecdcbf;
}
.brief-chips li span { color: var(--gold); font-weight: 600; margin-right: 4px; }
.brief-block { font-size: .88rem; color: #d7d1e0; margin: 10px 0 0; line-height: 1.5; }
.brief-block strong { color: #fff; }
.example-cta { margin-top: 4px; text-align: center; }

/* ---------- bandeau promo (arrivée via QR code) ---------- */
.promo-banner {
  background: var(--grad-party); color: #1A1A1B;
  text-align: center; padding: 13px 20px; font-weight: 600; font-size: .95rem;
}
.promo-code-chip {
  background: rgba(0,0,0,.25); color: #fff; padding: 2px 10px;
  border-radius: 14px; font-family: Consolas, monospace; letter-spacing: 2px;
}

/* ---------- héros ---------- */
.hero {
  position: relative; text-align: center; padding: 110px 40px 100px; overflow: hidden;
  background:
    radial-gradient(ellipse at 15% 0%, rgba(139,92,246,.22), transparent 55%),
    radial-gradient(ellipse at 85% 10%, rgba(236,72,153,.16), transparent 55%),
    radial-gradient(ellipse at 50% 100%, rgba(217,169,78,.14), transparent 60%),
    linear-gradient(180deg, #171221 0%, var(--bg-main) 100%);
}
/* Hero avec visuel photographique + voile pour la lisibilité du texte */
.hero-photo {
  padding: 104px 40px 96px;
  background:
    linear-gradient(180deg, rgba(23,18,33,.90) 0%, rgba(28,23,38,.66) 45%, rgba(28,23,38,.92) 100%),
    url('../img/hero.jpg') center / cover no-repeat;
}
.hero h1 { font-size: 3.2rem; color: #fff; margin-bottom: 20px; }
.hero p { font-size: 1.12rem; color: var(--text-muted); max-width: 640px; margin: 0 auto 34px; font-weight: 300; }
.hero .accent, .accent {
  background: var(--grad-fun); -webkit-background-clip: text; background-clip: text; color: transparent;
}

/* Notes de musique flottantes (héros) */
.floating-notes { position: absolute; inset: 0; pointer-events: none; }
.floating-notes span {
  position: absolute; bottom: -40px; font-size: 1.6rem; opacity: 0;
  animation: floatnote 11s linear infinite;
}
.floating-notes span:nth-child(1) { left: 8%;  animation-delay: 0s;  font-size: 1.4rem; }
.floating-notes span:nth-child(2) { left: 22%; animation-delay: 2.5s; font-size: 2rem; }
.floating-notes span:nth-child(3) { left: 48%; animation-delay: 5s;  font-size: 1.3rem; }
.floating-notes span:nth-child(4) { left: 71%; animation-delay: 1.2s; font-size: 1.8rem; }
.floating-notes span:nth-child(5) { left: 88%; animation-delay: 3.8s; font-size: 1.5rem; }
.floating-notes span:nth-child(6) { left: 35%; animation-delay: 7s;  font-size: 1.6rem; }
@keyframes floatnote {
  0%   { transform: translateY(0) rotate(-8deg); opacity: 0; }
  10%  { opacity: .5; }
  80%  { opacity: .35; }
  100% { transform: translateY(-105vh) rotate(14deg); opacity: 0; }
}
.eyebrow {
  font-size: .78rem; letter-spacing: 3px; text-transform: uppercase;
  color: var(--gold); margin-bottom: 16px; font-weight: 600;
}

/* ---------- sections / cartes ---------- */
.section { padding: 70px 0 10px; }
.section > .container > h2,
.section.container > h2 { text-align: center; margin-bottom: 44px; font-size: 2.1rem; }
.cards3, .cards4 { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 24px; }
.cards4 { grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }
.card {
  background: var(--bg-elev); border: 1px solid var(--border-light);
  border-radius: var(--radius); padding: 30px;
}
.card h3 { color: #fff; margin-bottom: 10px; }
.picto {
  width: 62px; height: 62px; border-radius: 50%;
  background: var(--gold-soft); border: 1px solid var(--border-gold); color: var(--gold);
  display: flex; align-items: center; justify-content: center;
  font-size: 1.7rem; margin-bottom: 18px; transition: var(--trans);
}
.card:hover .picto { transform: rotate(-8deg) scale(1.12); }
.picto svg { display: block; }
/* pictos colorés en alternance : plus de peps */
.cards3 .card:nth-child(4n+1) .picto, .cards4 .card:nth-child(4n+1) .picto { background: rgba(217,169,78,.18);  border-color: rgba(217,169,78,.45); }
.cards3 .card:nth-child(4n+2) .picto, .cards4 .card:nth-child(4n+2) .picto { background: rgba(139,92,246,.18);  border-color: rgba(139,92,246,.45); }
.cards3 .card:nth-child(4n+3) .picto, .cards4 .card:nth-child(4n+3) .picto { background: rgba(45,212,191,.15);  border-color: rgba(45,212,191,.4); }
.cards3 .card:nth-child(4n+4) .picto, .cards4 .card:nth-child(4n+4) .picto { background: rgba(236,72,153,.15);  border-color: rgba(236,72,153,.4); }
.cards3 .card, .cards4 .card { transition: var(--trans); }
.cards3 .card:hover, .cards4 .card:hover { transform: translateY(-4px); border-color: var(--border-gold); }
.list-red { list-style: none; }
/* Le récapitulatif de création (#summary) imprime les mots du visiteur : on
   coupe au besoin À L'INTÉRIEUR d'un mot, pour qu'un email ou un mot à
   rallonge ne dicte jamais la largeur de la carte. */
.list-red li { padding-left: 24px; position: relative; margin: 12px 0; overflow-wrap: anywhere; }
.list-red li::before {
  content: ""; position: absolute; left: 0; top: .55em;
  width: 8px; height: 8px; border-radius: 50%; background: var(--gold);
}

/* ---------- formulaires ---------- */
.form-card { max-width: 460px; margin: 60px auto; }
label { display: block; font-weight: 500; margin: 18px 0 7px; font-size: .9rem; color: var(--color-text); }
input[type=text], input[type=email], input[type=password], textarea, select {
  width: 100%; padding: 13px 15px;
  border: 1px solid var(--border-light); border-radius: 8px;
  font: inherit; background: var(--bg-main); color: var(--color-text);
}
input::placeholder, textarea::placeholder { color: #6b6660; }
input:focus, textarea:focus, select:focus { outline: none; border-color: var(--gold); }
textarea { min-height: 100px; resize: vertical; font-family: var(--font-sans); }
.field-mic { position: relative; }
.field-mic textarea, .field-mic input { padding-right: 58px; } /* laisse la place au micro de 44 px */

/* Étape Destinataire : mention « facultatif » et suggestions d'écriture. */
.opt-badge {
  display: inline-block; margin-left: 8px; padding: 2px 10px; border-radius: 12px;
  font-size: .72rem; font-weight: 500; color: var(--gold);
  background: var(--gold-soft); border: 1px solid var(--border-gold);
}
.sugg { margin: 10px 0 4px; }
.sugg-label { display: block; font-size: .8rem; color: #6b6660; margin-bottom: 8px; }
.sugg-chip {
  display: inline-block; margin: 0 6px 8px 0; padding: 7px 13px;
  font: inherit; font-size: .82rem; color: var(--color-text); cursor: pointer;
  background: var(--bg-main); border: 1px solid var(--border-light); border-radius: 18px;
}
.sugg-chip:hover { border-color: var(--gold); color: var(--gold); }
.sugg-chip.sugg-used { opacity: .45; }
/* Au pouce, une puce de 37 px se rate. Ces amorces existent précisément pour
   ÔTER de la friction — les rendre difficiles à toucher annulerait le gain. */
@media (max-width: 560px) {
  .sugg-chip { padding: 11px 14px; margin-bottom: 10px; }
}

/* Champ requis manquant : bordure signal (retirée dès la première saisie ou
   sélection — voir flagField dans app.js). La grille de choix est entourée
   d'un liseré externe, ses cartes n'ayant pas de bordure propre. */
input.field-error, textarea.field-error {
  border-color: #d9645f;
  box-shadow: 0 0 0 3px rgba(217,100,95,.18);
}
.choice-grid.field-error {
  outline: 2px solid rgba(217,100,95,.55);
  outline-offset: 6px;
  border-radius: 10px;
}

.alert { padding: 13px 18px; border-radius: 8px; margin: 18px 0; font-weight: 400; font-size: .92rem; border: 1px solid transparent; }
.alert-info { background: rgba(120,150,190,.12); color: #a9c2e0; border-color: rgba(120,150,190,.3); }
.alert-ok, .alert-success { background: rgba(127,166,80,.12); color: #b6d68a; border-color: rgba(127,166,80,.3); }
.alert-warn { background: var(--gold-soft); color: var(--gold); border-color: var(--border-gold); }
.alert-error { background: rgba(217,100,95,.12); color: #e79b97; border-color: rgba(217,100,95,.3); }

/* ---------- badges ---------- */
.badge { display: inline-block; padding: 4px 13px; border-radius: 20px; font-size: .72rem; font-weight: 600; text-transform: uppercase; letter-spacing: 1px; }
.badge-ok { background: rgba(127,166,80,.16); color: #b6d68a; }
.badge-warn { background: var(--gold-soft); color: var(--gold); }
.badge-info { background: rgba(120,150,190,.16); color: #a9c2e0; }
.badge-error { background: rgba(217,100,95,.16); color: #e79b97; }
.badge-muted { background: rgba(255,255,255,.07); color: var(--text-muted); }

/* ---------- assistant de création ---------- */
.wizard { max-width: 780px; margin: 56px auto; }
.wizard > p.muted { margin-bottom: 8px; }

/* Repères de progression : où j'en suis, combien il reste. Discrets — ils
   rassurent, ils ne doivent pas concurrencer la question posée. */
.wizard-status {
  display: flex; justify-content: space-between; align-items: baseline;
  gap: 12px; margin: 26px 0 6px; font-size: .82rem; color: var(--text-muted);
}
.wizard-status-step { font-weight: 600; letter-spacing: .2px; }
.wizard-status-eta {
  padding: 3px 10px; border-radius: 14px; font-size: .78rem; white-space: nowrap;
  background: rgba(217, 169, 78, .12); border: 1px solid rgba(217, 169, 78, .3);
  color: var(--gold);
}
.wizard-progress { display: flex; gap: 10px; margin: 6px 0 16px; }

/* « Tout est facultatif » : annoncé avant le premier champ, en vert d'accord
   plutôt qu'en gris d'avertissement — c'est une bonne nouvelle, pas une règle. */
.step-optional-note {
  margin: 0 0 16px; padding: 10px 14px; font-size: .88rem; line-height: 1.5;
  background: rgba(74, 189, 130, .10); border: 1px solid rgba(74, 189, 130, .28);
  border-radius: 10px;
}

/* Décharge de l'exigence d'écriture, sous la zone d'histoire. */
.details-help {
  margin: 8px 0 2px; font-size: .85rem; line-height: 1.55; color: var(--text-muted);
}

/* Amorces universelles : légèrement mises en avant par rapport aux amorces
   d'occasion, puisque ce sont elles qu'on propose à tout le monde. */
.sugg-chip--always { border-color: rgba(217, 169, 78, .45); }
.wstep {
  flex: 1; display: flex; flex-direction: column; gap: 7px;
  background: none; border: 0; padding: 0; cursor: default; text-align: center; min-width: 0;
}
.wstep-bar { height: 8px; border-radius: 4px; background: var(--border-light); transition: var(--trans); }
.wstep-label { font-size: .72rem; color: var(--text-muted); letter-spacing: .3px;
  transition: var(--trans); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wstep.done .wstep-bar { background: var(--grad-party); }
.wstep.current .wstep-bar { background: var(--grad-party); box-shadow: 0 0 0 3px rgba(217, 169, 78, .2); }
.wstep.current .wstep-label { color: #fff; font-weight: 600; }
.wstep.reachable { cursor: pointer; }
.wstep.reachable:hover .wstep-bar { filter: brightness(1.15); }
.wstep.reachable:hover .wstep-label { color: var(--gold); }
/* Écran étroit : les libellés (« Destinataire », « Jaquette »…) se tronquaient
   en « Destin… » illisibles — on ne garde que les barres, sauf celui de
   l'étape courante, seul utile à l'orientation. */
@media (max-width: 400px) {
  .wstep-label { display: none; }
  .wstep.current .wstep-label { display: block; }
}

/* Récapitulatif dynamique des choix (visible à toutes les étapes) */
.wizard-recap {
  display: flex; align-items: center; flex-wrap: wrap; gap: 8px 12px;
  background: var(--bg-elev); border: 1px solid var(--border-light);
  border-radius: 12px; padding: 11px 14px; margin-bottom: 30px;
}
.wizard-recap-label { font-size: .78rem; color: var(--text-muted); font-weight: 600; }
.recap-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.recap-chip {
  display: inline-flex; align-items: center; gap: 6px; max-width: 100%;
  background: var(--bg-elev2); border: 1px solid var(--border-gold); color: #eee;
  border-radius: 20px; padding: 5px 12px; font-size: .82rem; cursor: pointer; transition: var(--trans);
}
.recap-chip:hover { border-color: var(--gold); background: rgba(217, 169, 78, .14); }
.recap-chip-ic { font-size: .9rem; line-height: 1; }
.recap-chip-txt { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 220px; }
.wizard-step { display: none; }
.wizard-step.active { display: block; animation: fadein .3s ease; }
@keyframes fadein { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; } }
.wizard-step h2 { color: #fff; margin-bottom: 6px; }

.choice-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(155px, 1fr)); gap: 12px; margin: 16px 0; }
.choice {
  background: var(--bg-elev); border: 1px solid var(--border-light); border-radius: 10px;
  padding: 18px 10px; text-align: center; cursor: pointer;
  font-weight: 400; font-size: .9rem; transition: var(--trans); user-select: none; color: var(--color-text);
}
.choice .emoji { display: block; font-size: 1.7rem; margin-bottom: 8px; }
.choice .ico { display: block; margin: 0 auto 8px; color: var(--gold); line-height: 0; }
.choice .ico svg { display: block; margin: 0 auto; width: 34px; height: 34px; transition: var(--trans); }
.choice:hover .ico { color: var(--fun-coral); }
.choice.selected .ico { color: #ffd9a0; }
.choice.selected .ico svg { transform: scale(1.08); }
/* Choix enrichi : libellé + sous-titre poétique */
.choice-rich { padding: 16px 12px; }
.choice-rich .choice-label { display: block; font-weight: 500; }
.choice-rich .choice-sub { display: block; margin-top: 4px; font-size: .72rem; line-height: 1.3; color: var(--text-muted); }
.choice-rich:hover .choice-sub { color: #cfc6da; }
.choice-rich.selected .choice-sub { color: #e9c98f; }

/* Extrait écoutable d'une carte (styles musicaux, voix) : bouton discret en
   coin de carte, cible tactile 44 px, qui ne déclenche jamais la sélection. */
.choice { position: relative; }
.audio-demo-btn {
  position: absolute; top: 4px; left: 4px;
  width: 44px; height: 44px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  border: 1px solid var(--border-gold); cursor: pointer;
  background: rgba(26,26,27,.72); color: var(--gold);
  font-size: .95rem; line-height: 1; padding: 0; transition: var(--trans);
}
.audio-demo-btn:hover { background: var(--gold); color: var(--bg-main); }
.audio-demo-btn.playing { background: var(--fun-coral); color: #fff; border-color: var(--fun-coral); animation: pulse 1.2s infinite; }

/* Accroche émotionnelle (hero) */
.hero-tagline {
  font-family: var(--font-script); font-size: 1.75rem; line-height: 1.3;
  color: var(--gold); max-width: 600px; margin: 0 auto 20px;
}
/* Accroche du héros : phrase mise en avant, un peu plus grosse */
.hero .hero-intro-lg {
  font-size: clamp(1.2rem, 2.6vw, 1.7rem); line-height: 1.35; font-weight: 600;
  color: #fff; max-width: 760px; margin: 2px auto 34px;
}
/* Héros en deux colonnes : atouts à gauche, exemple écoutable à droite */
.hero-split {
  display: grid; grid-template-columns: 1fr 1fr; gap: 44px; align-items: center;
  max-width: 1000px; margin: 0 auto; text-align: left;
}
.hero-usps { list-style: none; margin: 0; padding: 0; }
.hero-usps li {
  display: flex; align-items: flex-start; gap: 12px;
  color: #e8e2f0; font-size: 1.02rem; font-weight: 300; margin: 0 0 18px;
}
.hero-usps li:last-child { margin-bottom: 0; }
.hero-usps li svg { color: var(--gold); flex: none; margin-top: 2px; }
.hero-usps strong { color: #fff; font-weight: 600; }
/* 4 petites vignettes colorées, une par élément livré */
.hero-usp-ico {
  flex: none; width: 44px; height: 44px; border-radius: 13px;
  display: flex; align-items: center; justify-content: center;
  background: var(--gold-soft); border: 1px solid var(--border-gold);
  box-shadow: 0 6px 16px rgba(0, 0, 0, .28); transition: var(--trans);
}
.hero-usps .hero-usp-ico svg { color: inherit; margin-top: 0; }
.hero-usps li:hover .hero-usp-ico { transform: translateY(-2px) rotate(-4deg); }
.hero-usps li:nth-child(1) .hero-usp-ico { background: rgba(217, 169, 78, .20); border-color: rgba(217, 169, 78, .55); color: #e6c169; }
.hero-usps li:nth-child(2) .hero-usp-ico { background: rgba(139, 92, 246, .22); border-color: rgba(139, 92, 246, .55); color: #b79cff; }
.hero-usps li:nth-child(3) .hero-usp-ico { background: rgba(45, 212, 191, .18); border-color: rgba(45, 212, 191, .55); color: #5fe0cd; }
.hero-usps li:nth-child(4) .hero-usp-ico { background: rgba(236, 72, 153, .20); border-color: rgba(236, 72, 153, .55); color: #f592c2; }
.hero-showcase { display: flex; justify-content: center; }
/* Variante compacte du visuel « exemple » (dans le héros) */
.showcase-visual--sm { min-height: 300px; width: 100%; max-width: 360px; }
.showcase-visual--sm .lyrics-sheet { width: 190px; top: 20px; padding: 13px; }
.showcase-visual--sm .lyrics-sheet .sheet-body p { font-size: .66rem; }
.showcase-visual--sm .album-cover { width: 196px; }
.showcase-visual--sm .cover-play { width: 48px; height: 48px; font-size: 1rem; }
.showcase-visual--sm .cover-caption { padding: 10px 12px 12px; }
@media (max-width: 820px) {
  .hero-split { grid-template-columns: 1fr; gap: 30px; max-width: 460px; text-align: center; }
  .hero-usps li { text-align: left; }
  .showcase-visual--sm { margin: 0 auto; }
}
/* Bouton « Exemples » coloré (dégradé violet → rose), distinct du CTA doré */
.btn-examples {
  background: linear-gradient(135deg, #8b5cf6, #ec4899); color: #fff; border: none;
}
.btn-examples:hover { filter: brightness(1.07); transform: translateY(-2px); }

/* Bloc « confiance » (remplace les faux témoignages) */
/* ---------------------------------------------------------------------------
   « Quatre histoires, quatre chansons » — preuve sociale par le récit.
   Deux colonnes dès qu'il y a la place : quatre cartes en file indienne se
   lisent comme une liste à parcourir, alors qu'on veut qu'elles se comparent.
   --------------------------------------------------------------------------- */
.stories-grid { display: grid; gap: 18px; margin-top: 26px; }
@media (min-width: 760px) { .stories-grid { grid-template-columns: 1fr 1fr; gap: 22px; } }
/* Marge latérale rendue à la main sur mobile : la règle `.section` y remet le
   padding horizontal à 0, ce qui collerait ces cartes BORDÉES aux deux bords
   de l'écran. Le texte centré qui occupait cette place auparavant ne le
   laissait pas voir. Correction volontairement limitée à cette grille — la
   régler sur `.section` déplacerait toutes les sections du site. */
@media (max-width: 780px) { .stories-grid { padding: 0 20px; } }
.story-card {
  display: flex; flex-direction: column; gap: 10px; min-width: 0;
  background: var(--bg-elev); border: 1px solid var(--border-light);
  border-radius: 16px; padding: 20px 22px;
}
.story-occasion {
  margin: 0; font-size: .74rem; letter-spacing: .8px; text-transform: uppercase;
  color: var(--gold);
}
.story-situation { margin: 0; font-size: 1.06rem; color: #fff; line-height: 1.35; }
/* Le témoignage porte la voix du client : on le distingue nettement du reste. */
.story-quote {
  margin: 0; padding-left: 14px; border-left: 2px solid rgba(217,169,78,.45);
  color: var(--text-muted); font-size: .93rem; line-height: 1.65; font-style: italic;
}
.story-quote::before { content: '\00AB\00A0'; }
.story-quote::after { content: '\00A0\00BB'; }
/* Le pied de carte : ce que l'histoire est devenue. */
.story-song {
  display: flex; align-items: center; gap: 12px; margin-top: auto; padding-top: 12px;
  border-top: 1px solid var(--border-light);
}
.story-cover { width: 56px; height: 56px; border-radius: 10px; object-fit: cover; flex: none; }
.story-cover--none {
  display: flex; align-items: center; justify-content: center;
  background: var(--bg-main); color: var(--text-muted);
}
.story-song-meta { display: flex; flex-direction: column; min-width: 0; }
.story-song-meta strong { color: #fff; font-size: .92rem; }
.story-song-meta span { color: var(--text-muted); font-size: .8rem; }
/* Cible tactile confortable : le bouton est le seul élément cliquable ici. */
.story-play { position: static; margin-left: auto; flex: none; width: 44px; height: 44px; }

/* Compteur sous le bouton principal : discret, il rassure sans crier. */
.hero-band-counter {
  margin: 14px 0 0; font-size: .82rem; color: var(--text-muted); line-height: 1.5;
  max-width: 520px;
}

/* Bandeau sous le héros : chiffres clés + extrait gratuit + CTA */
.hero-band {
  background: linear-gradient(180deg, var(--bg-elev2), var(--bg-elev));
  border-top: 1px solid var(--border-gold); border-bottom: 1px solid var(--border-light);
}
.hero-band-inner { text-align: center; padding: 26px 40px 30px; }
.hero-band-counts { font-size: 1.02rem; color: #fff; font-weight: 600; letter-spacing: .3px; margin: 0 0 6px; }
.hero-band-free { color: var(--gold); font-size: .95rem; margin: 0 0 18px; }

/* Étapes « comment ça marche » — 5 cartes + sous-puces */
.how-steps { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 22px; }
.how-steps .card { transition: var(--trans); }
.how-steps .card:hover { transform: translateY(-4px); border-color: var(--border-gold); }
.how-steps .card:nth-child(5n+1) .picto { background: rgba(217,169,78,.18); border-color: rgba(217,169,78,.45); }
.how-steps .card:nth-child(5n+2) .picto { background: rgba(139,92,246,.18); border-color: rgba(139,92,246,.45); }
.how-steps .card:nth-child(5n+3) .picto { background: rgba(45,212,191,.15); border-color: rgba(45,212,191,.4); }
.how-steps .card:nth-child(5n+4) .picto { background: rgba(236,72,153,.15); border-color: rgba(236,72,153,.4); }
.how-steps .card:nth-child(5n+5) .picto { background: rgba(255,122,89,.16); border-color: rgba(255,122,89,.45); }
.step-sub { list-style: none; margin: 6px 0 0; padding: 0; }
.step-sub li { position: relative; padding-left: 18px; margin: 8px 0; color: var(--text-muted); font-size: .95rem; }
.step-sub li::before {
  content: ""; position: absolute; left: 2px; top: .5em;
  width: 7px; height: 7px; border-radius: 50%; background: var(--coral);
}

/* ============================================================
   TUTORIEL « COMMENT ÇA MARCHE » — cartes cliquables + modale
   ============================================================ */
.how-hint { text-align: center; color: var(--text-muted); font-size: .92rem; margin: -6px 0 24px; }
.how-card { cursor: pointer; position: relative; display: flex; flex-direction: column; }
.how-card:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; }
.how-card p, .how-card .step-sub { flex: 1; }
.how-more {
  margin-top: 14px; align-self: flex-start; font-size: .85rem; font-weight: 600; color: var(--gold);
  opacity: .8; transition: var(--trans);
}
.how-card:hover .how-more, .how-card:focus-visible .how-more { opacity: 1; transform: translateX(3px); }
/* Carte 5 : le paquet cadeau animé */
/* Dernière étape : bandeau pleine largeur sous la rangée des 5 premières,
   plutôt qu'une carte isolée qui retombe seule à la ligne. */
.how-steps .how-card--gift { grid-column: 1 / -1; }
.how-card--gift { text-align: center; align-items: center; }
.how-card--gift h3, .how-card--gift p { text-align: center; max-width: 480px; margin-left: auto; margin-right: auto; }
.how-card--gift .how-more { align-self: center; }
/* Le paquet garde sa géométrie d'origine (170px), simplement réduit par
   scale : pas de repositionnement manuel, donc jamais « à moitié ouvert ». */
.how-gift-wrap {
  height: 118px; display: flex; align-items: center; justify-content: center;
  margin-bottom: 8px; transform: scale(.62); transform-origin: center;
  pointer-events: none;
}
.giftbox--sm { flex: none; }

/* Repli overlay pour les navigateurs SANS support natif de <dialog>
   (Safari iOS < 15.4, navigateurs in-app anciens) : showModal() y est absent,
   donc pas de centrage automatique ni de ::backdrop. La classe .dialog-fallback
   (posée par openDialog() dans app.js) transforme la <dialog>, restée dans le
   flux en bas de page, en overlay plein écran centré avec fond assombri. Sans
   ça, l'utilisateur ne voit « rien » en cliquant (modale hors écran, en bas). */
html.dialog-open { overflow: hidden; }
dialog.dialog-fallback {
  position: fixed; inset: 0; z-index: 1000;
  width: 100%; max-width: 100%; height: 100%; max-height: 100%; margin: 0;
  display: flex; align-items: center; justify-content: center;
  padding: 16px; overflow: auto;
  background: rgba(10, 8, 16, .72);
}
dialog.dialog-fallback > * {
  width: min(860px, 94vw); max-height: calc(100vh - 32px); overflow-y: auto;
}
/* Chaque modale garde sa largeur cible dans le repli (comme en natif). */
dialog.login-modal.dialog-fallback > * { width: min(460px, 92vw); }

/* La modale (élément <dialog> natif) */
.howto-modal {
  /* Le reset global (* { margin:0 }) écrase le « margin:auto » que le
     navigateur applique par défaut à dialog:modal pour le centrer — on le
     rétablit explicitement, sinon la boîte se cale en haut à gauche. */
  margin: auto; width: min(860px, 94vw); max-height: 92vh; padding: 0; border: 0;
  color: var(--color-text); background: transparent; overflow: visible;
}
.howto-modal::backdrop { background: rgba(10, 8, 16, .72); backdrop-filter: blur(4px); }
.howto-modal[open] { animation: howtoIn .28s cubic-bezier(.2, .8, .3, 1); }
@keyframes howtoIn { from { opacity: 0; transform: translateY(14px) scale(.98); } to { opacity: 1; } }
.howto-modal-inner {
  position: relative; background: radial-gradient(120% 90% at 50% 0%, #241c33, #17121f 72%);
  border: 1px solid var(--border-gold); border-radius: 20px; padding: 30px 30px 20px;
  box-shadow: 0 40px 90px rgba(0, 0, 0, .6); max-height: 92vh; overflow-y: auto;
}
.howto-close {
  position: absolute; top: 14px; right: 14px; width: 38px; height: 38px; border-radius: 50%; z-index: 3;
  background: rgba(0, 0, 0, .3); border: 1px solid var(--border-light); color: var(--text-muted);
  cursor: pointer; font-size: 1rem; transition: var(--trans);
}
.howto-close:hover { color: #fff; border-color: var(--border-gold); }
.howto-panel { display: none; }
.howto-panel.is-active { display: grid; grid-template-columns: 1fr 1fr; gap: 28px; align-items: center; }
.howto-illus { min-width: 0; }
.howto-kicker {
  font-size: .72rem; letter-spacing: 2px; text-transform: uppercase; color: var(--gold);
  font-weight: 700; margin: 0 0 6px;
}
.howto-title { margin: 0 0 8px; font-size: 1.5rem; color: #fff; }
.howto-lead { font-size: 1.05rem; color: #fff; margin: 0 0 10px; font-weight: 500; }
.howto-text p { color: var(--text-muted); line-height: 1.6; margin: 0 0 10px; }
.howto-text strong { color: #fff; font-weight: 600; }
.howto-tip {
  margin-top: 14px !important; padding: 10px 14px; border-radius: 10px; font-size: .88rem !important;
  background: var(--gold-soft); border: 1px solid var(--border-gold); color: var(--gold) !important;
}
/* Vignettes d'illustration (vrais visuels du site) */
.howto-thumbs { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.howto-thumbs--4 { grid-template-columns: repeat(2, 1fr); }
.howto-thumb { margin: 0; border-radius: 12px; overflow: hidden; position: relative; border: 1px solid var(--border-light); }
.howto-thumb img { display: block; width: 100%; height: auto; aspect-ratio: 1 / 1; object-fit: cover; }
.howto-thumb figcaption {
  position: absolute; left: 0; right: 0; bottom: 0; padding: 4px 8px; font-size: .72rem; color: #fff;
  background: linear-gradient(transparent, rgba(0, 0, 0, .75)); text-align: center;
}
.howto-photo { border-radius: 14px; overflow: hidden; border: 1px solid var(--border-light); margin-bottom: 12px; }
.howto-photo .howto-thumb { border: 0; border-radius: 0; }
.howto-photo .howto-thumb img { aspect-ratio: 4 / 3; }
.howto-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.howto-chip {
  font-size: .82rem; padding: 6px 12px; border-radius: 999px; color: var(--color-text);
  background: rgba(255, 255, 255, .06); border: 1px solid var(--border-light);
}
.howto-chips-label { font-size: .74rem; text-transform: uppercase; letter-spacing: 1px; color: var(--text-muted); margin: 12px 0 6px; }
/* Panneau cadeau : boîte animée + 2 colonnes reçoit/offre */
.howto-gift {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 8px; min-height: 220px; text-align: center;
}
.giftbox--md { width: 190px; height: 190px; }
.howto-gift .giftbox--md { cursor: pointer; border: 0; background: transparent; padding: 0; }
.howto-gift-hint { font-size: .82rem; color: var(--text-muted); margin: 0; animation: giftHint 1.8s ease-in-out infinite; }
/* Aperçu révélé au clic sur le cadeau : ce que reçoit vraiment le destinataire */
.howto-gift-preview {
  width: 100%; text-align: left; opacity: 0; transform: translateY(10px);
  transition: opacity .5s ease, transform .5s ease;
}
.howto-gift-preview.is-in { opacity: 1; transform: none; }
.howto-gift-preview-eyebrow { font-size: .8rem; color: var(--text-muted); margin: 0 0 12px; }
.howto-gift-preview-eyebrow strong { color: #fff; }
.howto-gift-preview-top { display: flex; align-items: center; gap: 14px; }
.howto-gift-preview-cover {
  position: relative; flex: none; width: 84px; height: 84px; border-radius: 14px; overflow: hidden;
  background: linear-gradient(135deg, #8b5cf6, #ec4899, #ff7a59);
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 10px 24px rgba(0, 0, 0, .35);
}
.howto-gift-preview-cover img { width: 100%; height: 100%; object-fit: cover; display: block; }
.howto-gift-preview-cover-fallback { font-size: 1.8rem; }
.howto-gift-preview-play {
  position: absolute; right: 4px; bottom: 4px; width: 26px; height: 26px; border-radius: 50%;
  background: rgba(0, 0, 0, .55); color: #fff; border: 1px solid rgba(255, 255, 255, .4);
  display: flex; align-items: center; justify-content: center; font-size: .68rem; cursor: pointer;
}
.howto-gift-preview-info strong { display: block; color: #fff; font-family: var(--font-serif); font-size: 1.05rem; }
.howto-gift-preview-info span { font-size: .78rem; color: var(--text-muted); }
.howto-gift-preview-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
.howto-gift-chip {
  font-size: .78rem; padding: 6px 12px; border-radius: 999px; color: var(--color-text);
  background: rgba(255, 255, 255, .06); border: 1px solid var(--border-light); cursor: default;
}
.howto-gift-preview-karaoke { margin-top: 12px; font-size: .86rem; color: var(--color-text); }
.howto-gift-preview-karaoke strong { color: #fff; }
.howto-gift-preview-karaoke--link {
  display: block; text-decoration: none; padding: 10px 14px; border-radius: 12px;
  background: var(--gold-soft); border: 1px solid var(--border-gold); transition: var(--trans);
}
.howto-gift-preview-karaoke--link:hover { transform: translateY(-2px); box-shadow: 0 10px 24px rgba(0, 0, 0, .3); }
.howto-gift-preview-karaoke--link span { color: var(--gold); }
.howto-gift-preview-note { margin-top: 10px; font-size: .76rem; color: var(--text-muted); font-style: italic; }
.howto-2col { display: grid; gap: 14px; }
.howto-mini { display: flex; gap: 12px; align-items: flex-start; }
.howto-mini-ic {
  flex: none; width: 40px; height: 40px; border-radius: 11px; display: flex; align-items: center;
  justify-content: center; font-size: 1.2rem; background: var(--gold-soft); border: 1px solid var(--border-gold);
}
.howto-mini strong { display: block; color: #fff; margin-bottom: 2px; }
.howto-mini p { margin: 0 !important; font-size: .9rem; }
/* Navigation de la modale */
.howto-nav { display: flex; align-items: center; justify-content: space-between; gap: 14px; margin-top: 22px; }
.howto-nav .btn { padding: 10px 18px; }
.howto-prev[disabled] { opacity: .35; pointer-events: none; }
.howto-dots { display: flex; gap: 9px; }
.howto-dot {
  width: 10px; height: 10px; border-radius: 50%; padding: 0; cursor: pointer;
  background: rgba(255, 255, 255, .2); border: 0; transition: var(--trans);
}
.howto-dot.is-on { background: var(--gold); transform: scale(1.25); }
@media (max-width: 640px) {
  .howto-modal-inner { padding: 24px 18px 16px; }
  .howto-panel.is-active { grid-template-columns: 1fr; gap: 18px; }
  .howto-illus { order: -1; margin-top: 28px; } /* dégage le bouton ✕ qui flotte au-dessus */
  .howto-gift { min-height: 150px; }
  .giftbox--md { width: 150px; height: 150px; }
  /* Précédent/Suivant empilés en pleine largeur : sinon « 🎵 Créer ma
     chanson » (libellé du dernier panneau) déborde de la modale. */
  .howto-nav { flex-direction: column-reverse; gap: 10px; }
  .howto-nav .btn {
    width: 100%; padding: 12px 14px; font-size: .85rem;
    white-space: normal; text-align: center;
  }
  .howto-dots { width: 100%; justify-content: center; order: 2; }
}

/* ============================================================
   MODALE DE CONNEXION (parcours de création) — compte déjà existant :
   on s'authentifie sans quitter la page en cours de création.
   ============================================================ */
.login-modal {
  /* Même rétablissement du centrage que .howto-modal (voir son commentaire) :
     le reset global (* { margin:0 }) écrase le margin:auto de dialog:modal. */
  margin: auto; width: min(420px, 92vw); padding: 0; border: 0;
  color: var(--color-text); background: transparent; overflow: visible;
}
.login-modal::backdrop { background: rgba(10, 8, 16, .72); backdrop-filter: blur(4px); }
.login-modal[open] { animation: howtoIn .28s cubic-bezier(.2, .8, .3, 1); }
.login-modal-inner {
  position: relative; background: radial-gradient(120% 90% at 50% 0%, #241c33, #17121f 72%);
  border: 1px solid var(--border-gold); border-radius: 20px; padding: 28px;
  box-shadow: 0 40px 90px rgba(0, 0, 0, .6); max-height: 92vh; overflow-y: auto;
}
.login-modal-inner label:first-of-type { margin-top: 4px; }

/* Offre : double bouton Exemples / Créer ma chanson */
.offre-cta-duo { display: flex; flex-wrap: wrap; justify-content: center; align-items: flex-start; gap: 20px 40px; margin-top: 44px; }
.offre-cta-duo .cta-col { text-align: center; max-width: 320px; }
.offre-cta-duo .cta-note { margin-top: 10px; }

/* Bandeau confiance relégué en bas de page */
.trust-strip-bottom { margin-top: 60px; }

/* Descripteur de style sous un exemple */
.example-descr { margin: -2px 0 0; font-size: .8rem; color: var(--gold); letter-spacing: .3px; }

/* Ancienneté d'un avis */
.review-ago { font-size: .72rem; color: #7c748a; margin-top: 2px; }

/* (l'ancien swash doré sous la signature cursive a été retiré : le lockup
   officiel du kit logo n'en comporte pas) */

/* Section émotion */
.emotion-band { display: grid; grid-template-columns: 1fr 1fr; gap: 44px; align-items: center; }
.emotion-photo img { width: 100%; border-radius: 16px; box-shadow: 0 24px 60px rgba(0, 0, 0, .5); display: block; }
.emotion-text .eyebrow { margin-bottom: 4px; }
.emotion-text h2 { font-size: 2rem; color: #fff; margin: 4px 0 14px; text-align: left; }
.emotion-quote { font-family: var(--font-script); font-size: 1.85rem; line-height: 1.25; color: var(--gold); margin: 20px 0 26px; border: 0; padding: 0; }
@media (max-width: 820px) {
  .emotion-band { grid-template-columns: 1fr; gap: 22px; }
  .emotion-text h2 { font-size: 1.7rem; }
}

/* Aperçu de la carte des paroles (PDF) dans l'extrait */
.pdf-teaser { margin-top: 26px; }
.pdf-doc {
  position: relative; background: #f6f1e6; color: #2b2733; border-radius: 8px;
  padding: 16px 18px 12px; max-width: 340px; box-shadow: 0 14px 34px rgba(0, 0, 0, .4); overflow: hidden;
}
.pdf-doc-head { display: flex; gap: 12px; align-items: center; border-bottom: 1px solid rgba(0, 0, 0, .12); padding-bottom: 10px; }
.pdf-doc-head img { width: 46px; height: 46px; border-radius: 5px; object-fit: cover; flex: none; }
.pdf-doc-meta strong { display: block; font-size: .84rem; color: #2b2733; }
.pdf-doc-meta span { font-size: .72rem; color: #7a7385; }
.pdf-doc-body { position: relative; padding: 12px 0 34px; }
.pdf-tag { font-size: .62rem; text-transform: uppercase; letter-spacing: 1.5px; color: #b98a2e; font-weight: 700; margin: 0 0 6px; }
.pdf-line { font-size: .8rem; color: #3a3547; margin: 0 0 4px; }
.pdf-fade { display: flex; flex-direction: column; gap: 7px; margin-top: 8px; filter: blur(2px); opacity: .5; }
.pdf-fade span { height: 7px; border-radius: 4px; background: #b9b1a2; }
.pdf-fade span:nth-child(1) { width: 92%; }
.pdf-fade span:nth-child(2) { width: 74%; }
.pdf-fade span:nth-child(3) { width: 86%; }
.pdf-fade span:nth-child(4) { width: 58%; }
.pdf-doc-body::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 56px; background: linear-gradient(transparent, #f6f1e6); }
.pdf-lock {
  position: absolute; bottom: 10px; left: 50%; transform: translateX(-50%); z-index: 2;
  background: #251e33; color: var(--gold); font-size: .7rem; font-weight: 600;
  padding: 5px 13px; border-radius: 20px; white-space: nowrap;
}
.pdf-teaser-note { font-size: .82rem; margin-top: 12px; max-width: 340px; }

/* Cadeau : page du destinataire + cartes post-achat */
.gift-hero { text-align: center; padding: 46px 0 10px; }
.gift-hero h1 { font-size: 2.2rem; color: #fff; }
.gift-message {
  font-family: var(--font-script); font-size: 1.6rem; line-height: 1.3; color: var(--gold);
  background: var(--gold-soft); border: 1px solid var(--border-gold); border-radius: var(--radius);
  padding: 18px 22px; margin: 0 0 22px;
}
.gift-message footer { font-family: var(--font-sans); font-size: .85rem; color: var(--text-muted); margin-top: 8px; }
.gift-box { border-color: var(--border-gold); margin-top: 22px; }
.gift-box-cover { display: flex; align-items: center; gap: 14px; margin: 4px 0 14px; }
.gift-box-cover img { width: 74px; height: 74px; border-radius: 10px; object-fit: cover; border: 1px solid var(--border-gold); flex: none; }
.gift-box-cover strong { color: #fff; font-size: .95rem; }

/* Choix du style de jaquette (vignettes) : 4 par ligne, 2 sur mobile */
.cover-style-grid { grid-template-columns: repeat(4, 1fr); }
.cover-choice { padding: 10px 10px 12px; }
.cover-thumb {
  width: 100%; height: auto; aspect-ratio: 1 / 1; object-fit: cover; border-radius: 8px;
  margin-bottom: 8px; border: 1px solid var(--border-light); display: block;
}
.cover-choice.selected .cover-thumb { border-color: var(--fun-coral); box-shadow: 0 6px 18px rgba(255, 122, 89, .25); }

/* Cartes illustrées (occasions étape 1, styles/ambiances/voix étape 3) : vignette + titre */
.occasion-grid { grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); }
.mood-grid { grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); }
.occasion-choice, .mood-choice, .style-choice, .voice-choice { padding: 10px 10px 12px; }
.occasion-thumb, .mood-thumb, .style-thumb, .voice-thumb {
  width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 10px;
  margin-bottom: 10px; border: 1px solid var(--border-light); display: block;
}
/* Bouton « Voir plus » des grilles curées (styles / jaquettes) */
.show-more-btn { display: inline-block; margin: 6px 0 0; padding: 9px 18px; font-size: .72rem; }
.occasion-choice.selected .occasion-thumb,
.mood-choice.selected .mood-thumb,
.style-choice.selected .style-thumb,
.voice-choice.selected .voice-thumb { border-color: var(--fun-coral); box-shadow: 0 6px 18px rgba(255, 122, 89, .25); }

/* Admin — grille de gestion des vignettes d'occasion */
.occasion-admin-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 18px; }
.occasion-admin-card { text-align: center; padding: 16px; }
.occasion-admin-thumb {
  width: 100%; aspect-ratio: 4 / 3; border-radius: 10px; overflow: hidden;
  background: var(--bg-elev2); border: 1px solid var(--border-light);
  display: flex; align-items: center; justify-content: center; margin-bottom: 10px;
}
.occasion-admin-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.occasion-admin-thumb .ico { color: var(--gold); }
.occasion-admin-card strong { display: block; color: #fff; }
.occasion-admin-actions { display: flex; flex-direction: column; gap: 8px; margin-top: 12px; }
.occasion-admin-actions form { margin: 0; }
.occasion-upload .btn { width: 100%; cursor: pointer; }
.btn-sm { padding: 7px 12px; font-size: .82rem; width: 100%; }
.account-nudge { border-color: rgba(139, 92, 246, .45); margin-top: 22px; }

/* Capture du prénom dans le hero */
.hero-capture { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; max-width: 580px; margin: 0 auto; }
.hero-capture input {
  flex: 1; min-width: 230px; padding: 16px 22px; border-radius: 30px; text-align: center;
  border: 1px solid var(--border-gold); background: rgba(255, 255, 255, .06); color: #fff; font-size: 1rem;
}
.hero-capture input::placeholder { color: #b9b1c6; }
.hero-capture input:focus { outline: none; border-color: var(--gold); background: rgba(255, 255, 255, .1); }
.hero-capture .btn { flex: none; }
@media (max-width: 560px) {
  .hero-capture { flex-direction: column; }
  .hero-capture .btn { width: 100%; }
}
.choice:hover { border-color: var(--fun-violet); background: var(--bg-elev2); transform: translateY(-2px); }
.choice.selected {
  border-color: var(--fun-coral);
  background: linear-gradient(135deg, rgba(217,169,78,.18), rgba(255,122,89,.14));
  color: #ffd9a0; box-shadow: 0 6px 18px rgba(255,122,89,.15);
}

.wizard-nav { display: flex; justify-content: space-between; align-items: center; margin-top: 30px; gap: 12px; }
/* Retour discret : un simple lien texte, pas un bouton concurrent du CTA */
.wizard-nav [data-prev] {
  background: none; border: 0; color: var(--text-muted); cursor: pointer;
  font-size: .82rem; text-transform: none; letter-spacing: .3px; padding: 10px 6px;
}
.wizard-nav [data-prev]:hover { background: none; color: var(--color-text); text-decoration: underline; }

.mic-btn {
  position: absolute; right: 6px; top: 6px;
  /* 44 px : le minimum d'une cible tactile confortable (22 visites sur 66
     étaient mobiles le 03/08) — à 38 px, le pouce manquait le bouton. */
  width: 44px; height: 44px; border-radius: 50%;
  border: 1px solid var(--border-gold); cursor: pointer; font-size: 1rem;
  background: var(--gold-soft); color: var(--gold); transition: var(--trans);
}
.mic-btn:hover { background: var(--gold); color: var(--bg-main); }
.mic-btn.listening { background: var(--fun-coral); color: #fff; border-color: var(--fun-coral); animation: pulse 1s infinite; }
@keyframes pulse { 50% { transform: scale(1.14); } }
.mic-hint { font-size: .82rem; color: var(--text-muted); margin-top: 6px; }

/* ---------- boutons & blocs « fun » ---------- */
.btn-fun {
  background: var(--grad-fun); color: #1A1A1B; border: 0; font-weight: 700;
}
.btn-fun:hover { background: var(--grad-fun); color: #1A1A1B; transform: translateY(-2px) scale(1.03); box-shadow: 0 10px 30px rgba(255,122,89,.35); }

.big-mic {
  position: static; width: auto; height: auto; border-radius: 30px;
  padding: 13px 26px; font-size: .95rem; margin-top: 12px;
  background: var(--grad-fun); color: #1A1A1B; border: 0; font-weight: 700;
}
.big-mic:hover { color: #1A1A1B; transform: scale(1.04); }
.big-mic.listening { animation: pulse 1.2s infinite; }

.details-hero {
  background: linear-gradient(135deg, rgba(139,92,246,.14), rgba(236,72,153,.10), rgba(217,169,78,.12));
  border: 1px solid rgba(139,92,246,.35); border-radius: var(--radius);
  padding: 20px 22px; margin: 22px 0 6px;
}
.details-hero h3 { margin: 0 0 8px; color: #fff; }
.details-hero p { margin: 0; font-size: .95rem; }

.detail-meter { display: flex; align-items: center; gap: 14px; margin: 10px 0 4px; }
.detail-meter-bar {
  flex: 1; height: 10px; border-radius: 5px; background: var(--border-light); overflow: hidden;
}
.detail-meter-bar span {
  display: block; height: 100%; width: 0; border-radius: 5px;
  background: var(--grad-party); transition: width .4s ease;
}
#detail-meter-label { font-size: .85rem; color: var(--text-muted); white-space: nowrap; }

.guest-email-card { border-color: var(--border-gold); }

/* ---------- panneau code de déblocage ---------- */
.unlock-panel { border: 2px dashed var(--border-gold); text-align: center; }
.unlock-row { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; margin: 18px 0 8px; }
#unlock-code {
  width: 200px; text-align: center; font-family: Consolas, monospace;
  font-size: 1.6rem; letter-spacing: 8px; text-transform: uppercase;
  border: 2px solid var(--border-gold); background: var(--bg-main);
}
#unlock-code:focus { border-color: var(--gold); }
.version-box { margin-top: 18px; padding-top: 14px; border-top: 1px dashed var(--border-light); }
.version-box p { margin-bottom: 8px; color: var(--text-muted); font-size: .92rem; }
.version-cta-row { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin: 4px 0 0; }
.version-count { color: var(--text-muted); font-size: .8rem; white-space: nowrap; }
/* Sélecteur des versions déjà générées — choisir sa préférée avant de payer */
.version-picker { margin-top: 18px; padding-top: 14px; border-top: 1px dashed var(--border-light); }
.version-picker-label { color: var(--text-muted); font-size: .85rem; margin-bottom: 10px; }
.version-picker-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: 12px; }
.version-card {
  display: block; text-align: center; border-radius: 10px; padding: 8px;
  border: 1px solid var(--border-light); background: var(--bg-elev); transition: var(--trans);
  color: var(--color-text); cursor: pointer;
}
a.version-card:hover { border-color: var(--border-gold); transform: translateY(-2px); }
.version-card--current { border-color: var(--gold); background: var(--gold-soft); cursor: default; }
.version-card img { width: 100%; aspect-ratio: 1 / 1; object-fit: cover; border-radius: 6px; display: block; margin-bottom: 6px; }
.version-card-fallback {
  display: flex; align-items: center; justify-content: center; aspect-ratio: 1 / 1; border-radius: 6px;
  background: var(--bg-elev2); font-size: 1.6rem; margin-bottom: 6px;
}
.version-card-label { display: block; font-size: .72rem; color: var(--text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.version-card--current .version-card-label { color: var(--gold); font-weight: 600; }

/* ---------- génération ---------- */
.gen-steps { list-style: none; }
.gen-steps li { display: flex; align-items: center; gap: 14px; padding: 12px 0; font-weight: 400; color: var(--text-muted); }
.gen-steps li .state {
  width: 30px; height: 30px; border-radius: 50%; flex: none;
  background: var(--border-light); display: flex; align-items: center; justify-content: center;
  color: var(--bg-main); font-size: .85rem; font-weight: 600;
}
.gen-steps li.running { color: var(--color-text); }
.gen-steps li.running .state { background: var(--gold); animation: pulse 1.2s infinite; }
.gen-steps li.done { color: var(--color-text); }
.gen-steps li.done .state { background: var(--ok); color: #fff; }
.gen-steps li.failed .state { background: var(--err); color: #fff; }

/* ---------- Animation « patiente » (génération chanson / karaoké) ---------- */
.gen-layout { display: grid; grid-template-columns: 1fr 200px; gap: 26px; align-items: center; }
.fun-wait { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px; text-align: center; padding: 6px 0; }
.fun-wait-scene { position: relative; width: 180px; height: 148px; }
.fw-disc {
  position: absolute; left: 50%; top: 6px; margin-left: -46px; width: 92px; height: 92px; border-radius: 50%;
  background:
    radial-gradient(circle at 50% 50%, var(--gold) 0 15%, #14121a 15% 17%, transparent 17%),
    repeating-radial-gradient(circle at 50% 50%, #0e0d12 0 2px, #201b2b 2px 4.5px);
  box-shadow: 0 10px 24px rgba(0, 0, 0, .5), inset 0 0 0 1px rgba(255, 255, 255, .06);
  animation: fw-spin 2.8s linear infinite;
}
.fw-badge { position: absolute; left: 50%; top: 52px; transform: translate(-50%, -50%); font-size: 1.5rem; z-index: 3; filter: drop-shadow(0 2px 3px rgba(0, 0, 0, .5)); }
@keyframes fw-spin { from { transform: rotate(0); } to { transform: rotate(360deg); } }
.fw-eq { position: absolute; left: 50%; bottom: 0; transform: translateX(-50%); display: flex; align-items: flex-end; gap: 5px; height: 40px; }
.fw-eq span { width: 8px; height: 30%; border-radius: 3px 3px 0 0; background: var(--grad-fun); animation: fw-eq .9s ease-in-out infinite; }
.fw-eq span:nth-child(1) { animation-duration: .8s; }
.fw-eq span:nth-child(2) { animation-duration: 1.1s; animation-delay: .15s; }
.fw-eq span:nth-child(3) { animation-duration: .7s; animation-delay: .05s; }
.fw-eq span:nth-child(4) { animation-duration: 1.2s; animation-delay: .25s; }
.fw-eq span:nth-child(5) { animation-duration: .95s; animation-delay: .1s; }
@keyframes fw-eq { 0%, 100% { height: 22%; } 50% { height: 100%; } }
.fw-note { position: absolute; font-size: 1.05rem; opacity: 0; animation: fw-float 3.4s ease-in infinite; }
.fw-note-1 { left: 8%; animation-delay: 0s; }
.fw-note-2 { right: 8%; animation-delay: 1.1s; }
.fw-note-3 { left: 46%; animation-delay: 2.2s; }
@keyframes fw-float {
  0% { opacity: 0; transform: translateY(6px) rotate(-8deg); }
  20% { opacity: 1; }
  75% { opacity: .7; }
  100% { opacity: 0; transform: translateY(-42px) rotate(10deg); }
}
.fun-wait-quip { color: var(--gold); font-weight: 600; font-size: 1rem; min-height: 1.4em; transition: opacity .25s ease; }
@media (max-width: 640px) {
  .gen-layout { grid-template-columns: 1fr; }
  .gen-layout .fun-wait { order: -1; }
}
@media (prefers-reduced-motion: reduce) {
  .fw-disc, .fw-eq span, .fw-note { animation: none; }
  .fw-note { opacity: .5; }
}
/* Génération terminée : le disque s'arrête, l'attente est finie (voir stopFunWait). */
.fun-wait-done .fw-disc, .fun-wait-done .fw-eq span, .fun-wait-done .fw-note {
  animation-play-state: paused;
}

/* ---------- page chanson ---------- */
.song-layout { display: grid; grid-template-columns: 320px 1fr; gap: 40px; margin: 50px 0; }

/* Page d'écoute (song.php) : 3×2 blocs, MÊME GABARIT — jaquette, lecteur,
   paroles, karaoké, puis (avant achat) régénération/versions et achat, sur
   la même grille. Chaque .quad-card a la même hauteur que son voisin de
   ligne (grid stretch + card en flex column height:100%). */
.song-head { margin-top: 36px; }
.song-quad {
  display: grid; grid-template-columns: 1fr 1fr; gap: 26px;
  margin: 26px 0 8px; align-items: stretch;
}
.quad-cell { display: flex; } /* laisse la carte enfant remplir la cellule étirée */
.quad-cell--wide { grid-column: 1 / -1; }
.quad-card {
  width: 100%; display: flex; flex-direction: column;
  background: var(--bg-elev); border: 1px solid var(--border-light);
  border-radius: var(--radius); padding: 26px;
}
.quad-card h2 { margin: 0 0 16px; font-size: 1.15rem; }
/* Jaquette : titre + libellé au-dessus, la photo remplit le reste de la
   carte (elle "déborde" jusqu'aux bords via des marges négatives). */
.quad-card--cover { overflow: hidden; }
.quad-card--cover h2 { margin-bottom: 4px; }
.quad-cover-title {
  margin: 0 0 18px; color: var(--text-muted); font-family: var(--font-serif);
  font-style: italic; font-size: 1rem;
}
.quad-card--cover .song-cover {
  flex: 1; display: block; width: calc(100% + 52px); margin: 0 -26px -26px;
  min-height: 240px; object-fit: cover; border: 0; box-shadow: none;
  border-radius: 0 0 var(--radius) var(--radius);
}
.quad-cover-fallback {
  flex: 1; display: flex; flex-direction: column; align-items: center;
  justify-content: center; gap: 10px; min-height: 240px;
}
.quad-cover-fallback .picto { margin: 0; }
/* Lecteur : centré verticalement si la ligne est plus haute que son contenu. */
.quad-player .quad-card { justify-content: center; }
.quad-player .vinyl-player { max-width: none; }
/* Paroles : occupe l'espace restant sous le titre, défile si besoin ;
   le bouton de déblocage (ou la fin des paroles) reste calé en bas de
   la carte, pour s'aligner avec le bouton du bloc Karaoké à côté. */
.quad-lyrics .lyrics-box {
  flex: 1; min-height: 0; max-height: 480px; overflow-y: auto;
  -webkit-overflow-scrolling: touch; background: none; border: 0; padding: 0;
  display: flex; flex-direction: column;
}
/* Seul le bouton (pas le dégradé, positionné au-dessus sans occuper sa
   propre place) est poussé en bas — sa hauteur colle alors à celle du
   badge du bloc Karaoké, pour un alignement précis entre les deux. */
.quad-lyrics .lyrics-box .lyric-truncated { margin-top: auto; position: relative; }
.quad-lyrics .lyrics-box .lyric-fade { position: absolute; left: 0; right: 0; bottom: 100%; margin: 0; }
/* Karaoké : même carte que les autres blocs (fond distinct, sans double
   bordure) ; fac-similé du rendu tant que la chanson n'est pas achetée —
   le vrai karaoké est produit après. Le bouton/badge reste calé en bas,
   aligné avec celui du bloc Paroles à côté. */
.quad-karaoke .quad-card {
  background: radial-gradient(120% 90% at 50% 0%, #241c33, #17121f 72%);
}
.karaoke-fax { flex: 1; display: flex; flex-direction: column; text-align: center; margin: 0; }
.kfax-lines { display: flex; flex-direction: column; gap: 12px; margin-bottom: 20px; }
.kfax-line { font-family: var(--font-serif); font-weight: 600; font-size: 1.02rem; color: rgba(255, 255, 255, .3); margin: 0; }
.kfax-line.done { color: rgba(217, 169, 78, .45); }
/* Ligne « en cours » : surlignée en entier (comme un lecteur de paroles),
   plutôt qu'un dégradé coupant un mot en deux — plus lisible. */
.kfax-line.active { font-size: 1.16rem; color: var(--gold); font-weight: 700; }
.karaoke-fax > a.btn, .karaoke-fax-lock { margin-top: auto; }
.karaoke-fax-lock { margin-bottom: 0; }
.karaoke-fax-lock span {
  display: inline-block; background: #251e33; color: var(--gold); font-size: .74rem; font-weight: 600;
  padding: 6px 14px; border-radius: 20px; white-space: nowrap; border: 1px solid var(--border-gold);
}
/* Rangée 3 : un bouton d'achat en haut (ouvre la fenêtre de paiement),
   puis régénérer/versions en pleine largeur en dessous. */
.quad-card--versions { border-color: rgba(139, 92, 246, .35); }
.quad-card--versions .version-box,
.quad-card--versions .version-picker { margin: 0; padding: 0; border-top: 0; }
.quad-card--versions > * + * { margin-top: 18px; }
/* Variante mise en avant : la regénération gratuite est l'incitation n° 1 du
   bloc « Vos versions » — encart doré + bouton « fun », au lieu d'un lien
   fantôme qui se perdait dans la carte. (Après la règle ci-dessus, qui remet
   padding et bordure à zéro sur les .version-box de cette carte.) */
.quad-card--versions .version-box--cta,
.version-box--cta {
  border: 1px dashed var(--border-gold); border-radius: 12px;
  background: rgba(217, 169, 78, .08); padding: 14px 16px;
}
.quad-card--buy {
  background: linear-gradient(160deg, var(--bg-elev2), var(--bg-elev));
  border-color: var(--border-gold);
}
.quad-card--buy h2 { color: #fff; }
/* Bouton d'achat au-dessus des blocs (jaquette/lecteur/paroles/karaoké) :
   propose l'achat tout de suite, sans avoir à descendre la page. */
.song-cta-top { text-align: center; margin: 22px 0 6px; }
/* Code cadeau : champ + bouton de validation AJAX côte à côte, message
   de retour (succès, avertissement) juste en dessous. */
.gift-code-row { display: flex; gap: 8px; }
.gift-code-row input { flex: 1; width: auto; }
.gift-code-row .btn { flex: none; padding: 0 20px; font-size: .74rem; white-space: nowrap; }
.gift-code-msg { font-size: .8rem; margin: 8px 0 12px; }
.gift-code-msg--ok { color: #b6d68a; }
.gift-code-msg--warn { color: #e0b98a; }

/* ============================================================
   BLOC « COMMANDER » (song.php) : cible du bouton « Débloquer ma chanson »
   en bas de la carte « Vos versions » — choix de la ou des versions,
   prix, code promo et moyens de paiement, au même endroit.
   ============================================================ */
#commander { scroll-margin-top: 80px; }
.commander-box {
  margin-top: 18px; padding: 22px 24px; border-radius: 16px;
  border: 1px solid var(--border-gold);
  background: radial-gradient(120% 90% at 50% 0%, #241c33, #17121f 72%);
  max-width: 560px;
}
.commander-box h3 { margin-top: 0; }
/* Halo doré quand on arrive depuis le bouton du haut : guide l'œil. */
.commander-flash { animation: commanderFlash 1.4s ease; }
@keyframes commanderFlash {
  0% { box-shadow: 0 0 0 3px rgba(217, 169, 78, 0); }
  25% { box-shadow: 0 0 0 3px rgba(217, 169, 78, .8); }
  100% { box-shadow: 0 0 0 3px rgba(217, 169, 78, 0); }
}
/* ---------------------------------------------------------------------------
   Les DEUX interprétations à comparer avant l'achat.

   Toujours EMPILÉES, y compris sur grand écran : ce bloc vit dans une cellule
   de la grille « quad », large d'environ 470 px sur bureau. Deux colonnes y
   réduiraient chaque lecteur à ~220 px — un disque vinyle illisible et des
   commandes trop petites pour être visées. L'empilement donne à chaque
   interprétation toute la largeur, et se comporte à l'identique sur mobile.
   --------------------------------------------------------------------------- */
.variant-list { display: grid; gap: 16px; margin-top: 4px; }
.variant-item {
  border: 1px solid var(--border-light); border-radius: 14px;
  padding: 14px; background: rgba(255, 255, 255, .03); min-width: 0;
}
.variant-title {
  margin: 0 0 10px; font-size: .95rem; font-weight: 600;
  display: flex; align-items: center; gap: 8px;
}
/* L'interprétation écartée, après l'achat : présente mais visiblement secondaire. */
.variant-other { opacity: .85; border-top: 1px solid var(--border-light); margin-top: 18px; }

/* Choix de la version que l'on garde, dans le formulaire de paiement. */
/* Consentement de publication au catalogue public : présenté comme un échange

   (remise contre diffusion), pas comme une case administrative de plus. */

.public-consent {

  display: flex; align-items: flex-start; gap: 11px; cursor: pointer;

  margin: 4px 0 14px; padding: 12px 14px; font-size: .86rem; line-height: 1.55;

  background: rgba(217, 169, 78, .07); border: 1px solid rgba(217, 169, 78, .3);

  border-radius: 12px;

}

.public-consent input {

  accent-color: var(--gold); width: 20px; height: 20px; flex: none; margin-top: 1px;

}



/* ---------- page publique d'écoute (/play/…) ---------- */

.play-card { margin-top: 8px; }

.play-head { display: flex; gap: 22px; align-items: center; flex-wrap: wrap; }

.play-cover {

  width: 168px; height: 168px; border-radius: 14px; object-fit: cover; flex: none;

  box-shadow: 0 16px 40px rgba(0, 0, 0, .35);

}

.play-meta { min-width: 0; flex: 1 1 260px; }

.play-meta h1 { margin: 4px 0 6px; font-size: 1.7rem; line-height: 1.2; }

.play-occasion {

  margin: 0; font-size: .74rem; letter-spacing: .8px; text-transform: uppercase;

  color: var(--gold);

}

.play-player { margin-top: 22px; }

/* Maillage interne : les autres chansons du catalogue. */

.play-others { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 16px; }

.play-other {

  display: flex; flex-direction: column; gap: 6px; color: inherit; text-decoration: none;

  background: var(--bg-elev); border: 1px solid var(--border-light);

  border-radius: 12px; padding: 12px; transition: var(--trans);

}

.play-other:hover { border-color: var(--border-gold); transform: translateY(-3px); }

.play-other img, .play-other-fallback {

  width: 100%; aspect-ratio: 1; border-radius: 8px; object-fit: cover;

}

.play-other-fallback {

  display: flex; align-items: center; justify-content: center;

  background: var(--bg-main); font-size: 1.8rem;

}

.play-other-title { font-size: .86rem; font-weight: 600; }

.play-other-occ { font-size: .76rem; color: var(--text-muted); }

@media (max-width: 780px) {

  .play-head { justify-content: center; text-align: center; }

  .play-cover { width: 140px; height: 140px; }

}

.variant-choice {
  border: 1px solid var(--gold); border-radius: 12px;
  padding: 12px 14px; margin: 4px 0 14px; background: rgba(217, 169, 78, .07);
}
.variant-choice legend { padding: 0 6px; font-size: .9rem; font-weight: 600; }
.variant-choice-item {
  display: flex; align-items: center; gap: 10px; cursor: pointer;
  padding: 7px 0; font-size: .92rem;
}
/* Cible tactile confortable au pouce (recommandation WCAG : 44 px). */
.variant-choice-item input {
  accent-color: var(--gold); width: 20px; height: 20px; flex: none; margin: 0;
}
@media (max-width: 560px) { .variant-choice-item { padding: 11px 0; } }

/* Sélection des versions à débloquer : une carte cochable par version. */
.vsel { display: flex; flex-direction: column; gap: 8px; margin: 14px 0 4px; }
.vsel-card {
  display: flex; align-items: center; gap: 12px; cursor: pointer;
  border: 1px solid var(--border-light); border-radius: 12px; padding: 10px 14px;
  background: rgba(255, 255, 255, .03); transition: var(--trans);
}
.vsel-card:hover { border-color: var(--text-muted); }
.vsel-card--on { border-color: var(--gold); background: rgba(217, 169, 78, .10); }
.vsel-card input { accent-color: var(--gold); width: 18px; height: 18px; flex: none; margin: 0; }
.vsel-card img, .vsel-fallback {
  width: 44px; height: 44px; border-radius: 8px; object-fit: cover; flex: none;
}
.vsel-fallback { display: flex; align-items: center; justify-content: center; background: var(--bg-elev); font-size: 1.2rem; }
.vsel-label { font-size: .92rem; display: flex; flex-direction: column; min-width: 0; }
.vsel-label em { font-style: normal; color: var(--text-muted); font-size: .78rem; }
/* Détail du calcul (une ligne par version + code éventuel), au-dessus du total. */
.price-lines { list-style: none; margin: 0 0 10px; padding: 0 0 10px; border-bottom: 1px dashed var(--border-gold); }
.price-lines li { display: flex; justify-content: space-between; gap: 12px; font-size: .85rem; color: var(--text-muted); padding: 2px 0; }
/* Prix bien visible : encart doré autour du montant. */
.commander-box .price-box {
  background: rgba(217, 169, 78, .12); border: 1px solid var(--border-gold);
  border-radius: 12px; padding: 14px 18px; margin: 16px 0;
}
.commander-box .price { font-family: var(--font-serif); font-size: 2.6rem; font-weight: 700; color: var(--gold); margin: 0; line-height: 1.15; }
.commander-box .promo-badge { margin: 4px 0 0; }
/* Déroulé explicite de ce qui se passe après le clic : redirection Stripe,
   retour avec les modules débloqués, puis l'email karaoké. */
.pay-steps {
  margin: 16px 0; padding: 14px 16px; border-radius: 10px;
  background: rgba(255, 255, 255, .04); border: 1px solid var(--border-light);
}
.pay-steps p { margin: 0 0 8px; font-size: .82rem; color: var(--text-muted); line-height: 1.5; }
.pay-steps p:last-child { margin-bottom: 0; }
.pay-steps strong { color: #fff; }
/* Téléphone : bloc à bords serrés, total lisible, boutons pleine largeur.
   (Après les règles ci-dessus, à spécificité égale — l'ordre fait foi.) */
@media (max-width: 560px) {
  .commander-box { padding: 16px 14px; }
  .commander-box .price { font-size: 2rem; }
  .commander-box .pay-buttons button { width: 100%; }
}
/* Après achat : cadeau, confirmation, compte, avis — centrés sous la grille. */
.song-after { max-width: 620px; margin: 34px auto 0; }
.song-after > * + * { margin-top: 24px; }
@media (max-width: 820px) {
  .song-quad { grid-template-columns: 1fr; }
  .quad-card--cover .song-cover, .quad-cover-fallback { min-height: 260px; max-height: 380px; }
}
.song-cover { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: var(--radius); border: 1px solid var(--border-light); box-shadow: 0 30px 70px rgba(0,0,0,.6); }
.lyrics-box {
  background: var(--bg-elev); border: 1px solid var(--border-light); border-radius: var(--radius);
  padding: 28px 30px; font-family: var(--font-sans);
}
.lyric-stanza { margin: 0 0 22px; }
.lyric-stanza:last-child { margin-bottom: 0; }
.lyric-section {
  color: var(--gold); text-transform: uppercase; letter-spacing: 2px;
  font-size: .72rem; font-weight: 700; margin: 0 0 10px;
  padding-bottom: 6px; border-bottom: 1px solid var(--border-gold);
}
.lyric-line { line-height: 1.85; font-weight: 300; font-size: 1.02rem; color: #ece9e3; }
/* Paroles tronquées (extrait gratuit) : dégradé vers le fond + pastille de déblocage */
.lyric-fade { height: 54px; margin-top: -20px; position: relative; z-index: 1; pointer-events: none; }
.lyric-lock { text-align: center; margin-top: -6px !important; position: relative; z-index: 2; }
.lyric-lock span {
  display: inline-block; background: #251e33; color: var(--gold); font-size: .74rem; font-weight: 600;
  padding: 6px 14px; border-radius: 20px; white-space: nowrap; border: 1px solid var(--border-gold);
}
.lyrics-box .lyric-fade { background: linear-gradient(transparent, var(--bg-elev)); }
.book-page-verse .lyric-fade { background: linear-gradient(transparent, #f7f3ea); }
audio { width: 100%; margin: 16px 0; filter: saturate(.6) brightness(1.05); }
.buy-box {
  background: linear-gradient(160deg, var(--bg-elev2), var(--bg-elev));
  border: 1px solid var(--border-gold); border-radius: var(--radius); padding: 28px; margin-top: 22px;
}
.buy-box h2 { color: #fff; }
.buy-box .price { font-family: var(--font-serif); font-size: 2rem; font-weight: 700; color: var(--gold); margin: 6px 0 4px; }
.pay-buttons { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 16px; }
.pay-buttons button[disabled] { opacity: .45; cursor: not-allowed; }

/* Réassurance paiement (sous le prix + près des boutons d'achat) */
.pay-reassure {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  flex-wrap: wrap; margin: 14px 0 0;
  font-size: .8rem; line-height: 1.4; color: var(--text-muted);
}
.pay-reassure-lock { display: inline-flex; color: var(--gold); flex: none; }
.pay-reassure-txt strong { color: var(--color-text); font-weight: 600; }

/* Case obligatoire de renonciation au droit de rétractation (checkout) */
.waiver-consent {
  display: flex; gap: 10px; align-items: flex-start;
  margin-top: 16px; padding: 12px 14px;
  background: var(--gold-soft); border: 1px solid var(--border-gold); border-radius: 10px;
  font-size: .82rem; line-height: 1.45; color: var(--color-text); cursor: pointer;
}
.waiver-consent input { flex: none; width: auto; margin-top: 2px; accent-color: var(--gold); cursor: pointer; }
.waiver-consent a { color: var(--gold); }

/* ---------- tableaux ---------- */
table.songs { width: 100%; border-collapse: collapse; background: var(--bg-elev); border: 1px solid var(--border-light); border-radius: var(--radius); overflow: hidden; }
table.songs th, table.songs td { text-align: left; padding: 14px 16px; border-bottom: 1px solid var(--border-light); font-size: .92rem; }
table.songs th { background: #141415; color: var(--gold); text-transform: uppercase; font-size: .74rem; letter-spacing: 1.5px; font-weight: 600; }
table.songs tr:last-child td { border-bottom: 0; }
table.songs td .btn { padding: 7px 16px; font-size: .72rem; }

/* ---------- héros / landing ---------- */
.hero-logo { height: 110px; width: 110px; object-fit: cover; border-radius: 22px; margin: 0 auto 22px; box-shadow: 0 18px 50px rgba(0,0,0,.55); }
.hero-cta { display: flex; gap: 18px; justify-content: center; flex-wrap: wrap; }
.reassurance { margin-top: 18px; font-size: .85rem; color: #8c8c8c; letter-spacing: .4px; }
.hero-counts {
  margin-top: 24px; font-size: .9rem; font-weight: 500; color: var(--color-text);
  display: inline-flex; flex-wrap: wrap; justify-content: center; gap: 6px 16px;
  padding: 10px 20px; border-radius: 999px;
  background: var(--gold-soft); border: 1px solid var(--border-gold);
}
.pricing-card {
  max-width: 560px; margin: 0 auto 40px; text-align: center;
  background: linear-gradient(160deg, var(--bg-elev2), var(--bg-elev));
  border: 1px solid var(--border-gold); border-radius: var(--radius); padding: 40px 34px;
}
.pricing-card .price { font-family: var(--font-serif); font-size: 2.6rem; font-weight: 700; color: var(--gold); }
.price-old { color: var(--text-muted); text-decoration: line-through; font-size: .55em; margin-right: 10px; font-weight: 400; }
.promo-badge { color: var(--gold); font-weight: 600; margin-top: 4px; }
.pay-form label { margin-top: 6px; }

/* ---------- admin ---------- */
/* Back-office : pleine largeur + colonne de navigation fixe à gauche */
.admin-layout { display: flex; align-items: flex-start; }
.admin-side {
  position: sticky; top: 64px; align-self: flex-start; z-index: 5;
  width: 236px; flex: 0 0 236px; max-height: calc(100vh - 64px); overflow-y: auto;
  background: var(--bg-elev); border-right: 1px solid var(--border-light);
  padding: 18px 12px 24px;
}
.admin-side-brand {
  display: flex; flex-direction: column; gap: 3px; font-weight: 700; color: var(--gold);
  font-size: .9rem; padding: 4px 12px 14px; border-bottom: 1px solid var(--border-light); margin-bottom: 10px;
}
.admin-side-email { font-weight: 400; font-size: .74rem; color: var(--text-muted); word-break: break-all; }
.admin-nav { display: flex; flex-direction: column; gap: 3px; }
.admin-nav-group {
  font-size: .67rem; text-transform: uppercase; letter-spacing: 1.3px;
  color: #7c748a; font-weight: 700; padding: 15px 12px 5px;
}
.admin-nav-group:first-child { padding-top: 2px; }
.admin-nav a {
  display: block; padding: 9px 12px; border-radius: 8px; font-size: .86rem;
  color: var(--text-muted); transition: var(--trans); border: 1px solid transparent;
}
.admin-nav a:hover { background: var(--bg-elev2); color: var(--color-text); }
.admin-nav a.active { background: rgba(217, 169, 78, .16); color: var(--gold); font-weight: 600; border-color: var(--border-gold); }
.admin-side-foot { margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--border-light); display: flex; flex-direction: column; gap: 2px; }
.admin-side-foot a { display: block; padding: 8px 12px; border-radius: 8px; font-size: .82rem; color: var(--text-muted); }
.admin-side-foot a:hover { color: var(--color-text); background: var(--bg-elev2); }
.admin-content { flex: 1 1 auto; min-width: 0; padding: 26px 34px 60px; }
.admin-content > h1:first-child { margin-top: 0; }
.admin-actions { display: flex; gap: 8px; flex-wrap: wrap; }

/* Relances : liste de modèles + éditeur + barre d'envoi */
.relance-grid { display: grid; grid-template-columns: 264px 1fr; gap: 22px; align-items: start; margin-bottom: 28px; }
.relance-tpl-items { display: flex; flex-direction: column; gap: 6px; }
.relance-tpl-item {
  display: flex; flex-direction: column; gap: 2px; padding: 10px 12px; border-radius: 9px;
  border: 1px solid var(--border-light); color: var(--text-muted); transition: var(--trans);
}
.relance-tpl-item:hover { border-color: var(--border-gold); }
.relance-tpl-item.active { border-color: var(--gold); background: rgba(217, 169, 78, .12); }
.relance-tpl-item strong { color: #fff; font-size: .9rem; }
.relance-tpl-item .muted { font-size: .76rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.relance-send-bar { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 12px; margin-top: 10px; }
.relance-send-tools { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.relance-pick { display: flex; align-items: center; gap: 8px; font-size: .85rem; color: var(--text-muted); }
.relance-pick select { width: auto; margin: 0; }
.relance-form { display: inline; margin: 0; }
@media (max-width: 900px) { .relance-grid { grid-template-columns: 1fr; } }
@media (max-width: 900px) {
  .admin-layout { flex-direction: column; }
  .admin-side {
    position: static; width: auto; flex: none; max-height: none;
    border-right: 0; border-bottom: 1px solid var(--border-light); padding: 12px 16px;
  }
  .admin-nav { flex-direction: row; flex-wrap: wrap; gap: 6px; }
  .admin-nav-group { flex-basis: 100%; width: 100%; padding: 8px 4px 0; }
  .admin-nav a { font-size: .8rem; padding: 7px 11px; }
  .admin-side-brand { border-bottom: 0; margin-bottom: 8px; padding-bottom: 6px; }
  .admin-side-foot { flex-direction: row; border-top: 0; padding-top: 6px; margin-top: 8px; }
  .admin-content { padding: 22px 18px 48px; }
}
.admin-actions form { display: inline; }
.admin-actions .btn { padding: 7px 14px; font-size: .7rem; }

/* Actions d'une chanson : 2-3 boutons primaires + menu « ⋯ Plus » classé */
.song-ops { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.song-ops form { display: inline; margin: 0; }
.row-menu { position: relative; display: inline-block; }
.row-menu > summary { list-style: none; }
.row-menu > summary::-webkit-details-marker { display: none; }
.row-menu > summary::marker { content: ''; }
.row-menu[open] > summary { background: var(--bg-elev2); color: var(--color-text); }
.row-menu-pop {
  position: absolute; right: 0; top: calc(100% + 5px); z-index: 30; width: 240px;
  background: var(--bg-elev2); border: 1px solid var(--border-light); border-radius: 12px;
  padding: 8px; box-shadow: 0 18px 44px rgba(0, 0, 0, .55);
}
.row-menu-pop form { display: block; margin: 0; }
.menu-sec {
  font-size: .64rem; text-transform: uppercase; letter-spacing: 1.2px;
  color: #7c748a; font-weight: 700; padding: 10px 10px 4px;
}
.menu-sec:first-child { padding-top: 4px; }
.menu-sec-danger { color: #d98a86; }
.row-menu-pop .menu-item {
  display: flex; width: 100%; align-items: center; gap: 8px; text-align: left;
  padding: 8px 10px; border-radius: 8px; font-size: .82rem; line-height: 1.2;
  color: var(--text-muted); background: none; border: 0; cursor: pointer;
}
.row-menu-pop .menu-item:hover { background: var(--bg-elev); color: #fff; }
.row-menu-pop .menu-item-danger { color: #ff8a8a; }
.row-menu-pop .menu-item-danger:hover { background: rgba(255, 90, 90, .12); color: #ff6b6b; }
.admin-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 26px; align-items: start; }
@media (max-width: 900px) { .admin-cols { grid-template-columns: 1fr; } }
.stat-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 16px; margin: 24px 0 34px; }
.stat-card {
  background: var(--bg-elev); border: 1px solid var(--border-light); border-radius: var(--radius);
  padding: 20px; color: var(--text-muted); font-size: .85rem;
}
.stat-card .stat-num { font-family: var(--font-serif); font-size: 1.7rem; font-weight: 700; color: var(--gold); margin-bottom: 4px; }
.danger-zone { border-color: rgba(217,100,95,.45); background: rgba(217,100,95,.05); }
.stat-alert { border-color: rgba(217,100,95,.5); }
.stat-alert .stat-num { color: var(--err); }
.stat-grid-compact { grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 10px; margin: 4px 0 0; }
.stat-grid-compact .stat-card { padding: 12px 14px; }
.stat-grid-compact .stat-num { font-size: 1.25rem; }

/* Statistiques : sélecteur de période, mini-graphe, barres horizontales */
.period-switch { display: inline-flex; gap: 4px; background: var(--bg-elev); border: 1px solid var(--border-light); border-radius: 10px; padding: 4px; }
.period-switch a { padding: 6px 14px; border-radius: 7px; font-size: .84rem; color: var(--text-muted); }
.period-switch a.active { background: rgba(217, 169, 78, .16); color: var(--gold); font-weight: 600; }
.mini-bars { display: flex; align-items: flex-end; gap: 2px; height: 120px; }
/* height:100% est indispensable : sans hauteur définie sur la colonne, la
   hauteur en % de la barre ne peut pas se résoudre et le graphe reste plat. */
.mini-bar { flex: 1; height: 100%; display: flex; align-items: flex-end; min-width: 0; }
.mini-bar > span { width: 100%; min-height: 2px; background: var(--grad-fun); border-radius: 3px 3px 0 0; transition: height .3s ease; }
.bar-list { display: flex; flex-direction: column; gap: 9px; }
.bar-row { display: grid; grid-template-columns: 1fr 3fr auto; align-items: center; gap: 10px; font-size: .85rem; }
.bar-lbl { color: var(--color-text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bar-track { height: 9px; background: var(--bg-elev2); border-radius: 5px; overflow: hidden; }
.bar-track > span { display: block; height: 100%; background: var(--grad-fun); border-radius: 5px; }
.bar-val { color: var(--gold); font-weight: 600; min-width: 34px; text-align: right; }

/* Période libre : « du … au … » */
/* Navigation jour par jour (vue « une seule journée » des statistiques) */
.day-nav { display: inline-flex; align-items: center; gap: 4px; margin: 14px 0 0; padding: 4px;
           background: var(--bg-elev); border: 1px solid var(--border-light); border-radius: 10px; }
.day-arrow { display: inline-flex; align-items: center; justify-content: center;
             width: 34px; height: 30px; border-radius: 7px; font-size: 1.2rem; line-height: 1;
             color: var(--text-muted); text-decoration: none; }
.day-arrow:hover { background: rgba(217, 169, 78, .16); color: var(--gold); }
.day-arrow-off { opacity: .3; cursor: not-allowed; }
.day-label { padding: 0 12px; font-size: .86rem; color: var(--color-text); white-space: nowrap; }
.day-label strong { color: var(--gold); }

.stats-range { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; margin: 14px 0 4px; }
.stats-range label { display: inline-flex; align-items: center; gap: 6px; font-size: .85rem; color: var(--text-muted); }
.stats-range input[type="date"] {
  padding: 7px 10px; font-size: .85rem; border-radius: 8px; color-scheme: dark;
  background: var(--bg-elev2); border: 1px solid var(--border-light); color: #fff;
}
.stats-range .btn { width: auto; padding: 8px 16px; font-size: .85rem; }

/* Évolution vs période précédente */
.delta { display: inline-block; margin-left: 6px; padding: 1px 7px; border-radius: 999px;
         font-size: .74rem; font-weight: 700; vertical-align: middle; }
.delta-up { background: rgba(74, 179, 122, .16); color: #6fd39b; }
.delta-down { background: rgba(217, 100, 95, .16); color: #ff8a8a; }
.delta-flat, .delta-none { background: var(--bg-elev2); color: var(--text-muted); }
.stat-help { display: block; margin-top: 3px; font-size: .74rem; color: var(--text-muted); opacity: .8; }

/* Mini-graphe : la barre pleine = pages vues, la part foncée = visites */
.mini-bar > span > i { display: block; width: 100%; background: rgba(14, 14, 18, .45);
                       border-radius: 0 0 3px 3px; margin-top: auto; }
.mini-bar > span { display: flex; flex-direction: column; }
.legend-swatch { display: inline-block; width: 9px; height: 9px; border-radius: 2px;
                 margin: 0 4px 0 10px; vertical-align: middle; }
.legend-swatch:first-child { margin-left: 0; }
.legend-views { background: var(--grad-fun); }
.legend-sessions { background: #3a3644; }

/* Parcours d'achat : une ligne par étape, largeur proportionnelle aux visites */
.funnel { display: flex; flex-direction: column; gap: 12px; }
.funnel-step { display: grid; grid-template-columns: 1.6fr 3fr auto auto; align-items: center;
               gap: 12px; font-size: .87rem; }
.funnel-lbl { color: var(--color-text); }
.funnel-track { height: 22px; background: var(--bg-elev2); border-radius: 6px; overflow: hidden; }
.funnel-track > span { display: block; height: 100%; background: var(--grad-fun); border-radius: 6px; }
.funnel-val { color: var(--gold); font-weight: 700; min-width: 52px; text-align: right; }
.funnel-rate { color: var(--text-muted); font-size: .8rem; min-width: 62px; text-align: right; }
.funnel-rate-warn { color: #e0a94e; cursor: help; }

table.admin-edit input { padding: 8px 10px; font-size: .85rem; border-radius: 6px; }
table.admin-edit textarea { width: 100%; padding: 8px 10px; font-size: .84rem; border-radius: 6px; line-height: 1.45; resize: vertical; }
table.admin-edit td { padding: 6px 8px; vertical-align: top; }
/* Colonne « Supprimer » d'un éditeur de catalogue */
.row-del { text-align: center; padding-top: 12px !important; }
.row-del label { display: inline-flex; align-items: center; gap: 4px; cursor: pointer; color: #ff8a8a; font-size: .9rem; white-space: nowrap; }
.row-del input { width: auto !important; margin: 0; accent-color: #ff6b6b; }

/* ---------- sous-texte des CTA (essai gratuit) ---------- */
.cta-note { margin-top: 12px; font-size: .82rem; color: var(--text-muted); letter-spacing: .3px; }
.free-remaining {
  margin: 0 0 16px; padding: 10px 16px; border-radius: 10px; font-size: .9rem; font-weight: 600;
  color: var(--gold); background: var(--gold-soft); border: 1px solid var(--border-gold); text-align: center;
}

/* ---------- puce « dictée vocale » (étape 1) ---------- */
.voice-chip {
  display: inline-flex; align-items: center; gap: 9px; margin-top: 16px;
  padding: 8px 14px 8px 8px; border-radius: 12px; font-size: .8rem;
  font-weight: 500; line-height: 1.35; color: var(--color-text);
  background: var(--gold-soft); border: 1px solid var(--border-gold);
}
.voice-chip .voice-chip-ic {
  flex: none; width: 30px; height: 30px; border-radius: 8px;
  display: flex; align-items: center; justify-content: center;
  color: var(--gold); background: rgba(217, 169, 78, 0.18);
}
.voice-chip strong { color: var(--gold); font-weight: 600; }

/* ---------- bandeau de confiance ---------- */
.trust-strip { background: var(--bg-elev); border-top: 1px solid var(--border-light); border-bottom: 1px solid var(--border-light); }
.trust-inner { display: flex; flex-wrap: wrap; justify-content: center; gap: 14px 40px; padding: 18px 40px; }
.trust-item { display: flex; align-items: center; gap: 8px; font-size: .9rem; color: var(--text-muted); }
.trust-item strong { color: var(--color-text); }
.trust-num { font-family: var(--font-serif); font-weight: 700; color: var(--gold); font-size: 1.05rem; }

/* ---------- étoiles ---------- */
.stars { color: var(--gold); letter-spacing: 2px; font-size: 1rem; }

/* ---------- avis clients ---------- */
.reviews-summary { text-align: center; color: var(--text-muted); margin: -28px 0 30px; font-size: 1rem; }
.reviews-summary .stars { font-size: 1.15rem; vertical-align: middle; margin-right: 8px; }
.reviews-summary strong { color: var(--color-text); }
.reviews-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 22px; }
.review-card {
  background: var(--bg-elev); border: 1px solid var(--border-light); border-radius: var(--radius);
  padding: 24px 24px 20px; display: flex; flex-direction: column; gap: 12px; margin: 0;
  transition: var(--trans);
}
.review-card:hover { transform: translateY(-3px); border-color: var(--border-gold); }
.review-stars { font-size: .95rem; }
.review-card blockquote { margin: 0; font-style: italic; color: #ece9e3; line-height: 1.55; font-size: .95rem; }
.review-card blockquote::before { content: "“"; color: var(--gold); font-size: 1.4rem; margin-right: 2px; }
.review-card figcaption { display: flex; flex-direction: column; gap: 2px; margin-top: auto; }
.review-author { font-weight: 600; color: #fff; font-size: .92rem; }
.review-meta { font-size: .8rem; color: var(--text-muted); }
.footer-disclaimer { margin-top: 10px; font-size: .78rem; font-style: italic; }
.review-card-mini { padding: 16px 18px; }
.review-card-mini blockquote { font-size: .88rem; }
.preview-social { margin-top: 26px; display: flex; flex-direction: column; gap: 14px; }

/* ============================================================
   LECTEUR VINYLE — disque qui tourne, bras qui se pose
   ============================================================ */
.vinyl-player {
  background: linear-gradient(168deg, var(--bg-elev2), #1e1829);
  border: 1px solid var(--border-light); border-radius: 20px;
  padding: 30px 28px 22px; text-align: center; max-width: 400px;
  box-shadow: 0 18px 44px rgba(0, 0, 0, .35);
}
.vinyl-scene { position: relative; width: 216px; height: 216px; margin: 0 auto 22px; }
/* Conteneur de glissement : porte le translateX du mode Livre d'Art, car
   l'animation de rotation possède la propriété transform du disque lui-même. */
.vinyl-disc-slide { position: absolute; inset: 0; transition: transform .8s cubic-bezier(.25, 1, .5, 1); }
.vinyl-disc {
  position: absolute; inset: 0; border-radius: 50%;
  background:
    radial-gradient(circle at 34% 28%, rgba(255, 255, 255, .05), transparent 58%),
    repeating-radial-gradient(circle, #0e0d12 0 2px, #191621 2px 4.5px);
  box-shadow: 0 16px 36px rgba(0, 0, 0, .55), inset 0 0 0 1px rgba(255, 255, 255, .06);
  animation: vinyl-spin 3.4s linear infinite;
  /* figé à l'angle courant tant qu'on ne joue pas (pas de saut visuel) */
  animation-play-state: paused;
}
.vinyl-player.playing .vinyl-disc { animation-play-state: running; }
@keyframes vinyl-spin { to { transform: rotate(360deg); } }
.vinyl-label {
  position: absolute; inset: 29%; border-radius: 50%;
  background: radial-gradient(circle at 42% 38%, #fbf4e2, #f3ead9 70%, #e3d4b8);
  border: 3px solid #c1502e;
  box-shadow: 0 0 0 5px rgba(0, 0, 0, .35);
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
}
.vinyl-label-brand {
  font-family: var(--font-serif); font-size: 10px; line-height: 1.15;
  color: #1b1815; font-weight: 700; text-align: center; letter-spacing: .2px;
}
.vinyl-label-brand em { color: #c1502e; }
.vinyl-compact .vinyl-label-brand { font-size: 7.5px; }
/* Disque-image : le macaron porte la jaquette de l'album et tourne avec le disque */
.vinyl-label--cover {
  background-color: #14121a;
  background-position: center; background-size: cover; background-repeat: no-repeat;
}
.vinyl-label::after { content: ""; width: 11%; height: 11%; border-radius: 50%; background: #14121a; box-shadow: 0 0 0 2px #d8a24a; }
/* reflet fixe (ne tourne pas avec le disque, mais glisse avec lui) */
.vinyl-disc-slide::before {
  content: ""; position: absolute; inset: 0; border-radius: 50%; z-index: 1; pointer-events: none;
  background: radial-gradient(circle at 30% 24%, rgba(255, 255, 255, .07), transparent 46%);
}
/* Bras de lecture : pivot en haut, il se pose sur le disque au play */
.vinyl-arm {
  position: absolute; top: -10px; right: 14px; width: 26px; height: 64%; z-index: 2;
  transform-origin: 50% 13px; transform: rotate(-24deg);
  transition: transform .85s cubic-bezier(.45, 0, .25, 1);
  filter: drop-shadow(0 6px 8px rgba(0, 0, 0, .45));
}
.vinyl-player.out .vinyl-arm { transform: rotate(0deg); }
/* Zoom cinématique sur le macaron au lancement (hors compact / livre) */
.vinyl-scene { transition: transform 2.2s cubic-bezier(.4, 0, .2, 1); }
.vinyl-player.zoom-label .vinyl-scene { transform: scale(1.32); z-index: 3; }
.vinyl-sleeve-layout .vinyl-scene { transform-origin: 70% 50%; }
.vinyl-sleeve-layout.out .vinyl-arm { transition-delay: .55s; }
.vinyl-player.out.returning .vinyl-arm { transition-delay: 0s; }
.vinyl-arm::before { /* pivot doré */
  content: ""; position: absolute; top: 0; left: 50%; transform: translateX(-50%);
  width: 26px; height: 26px; border-radius: 50%;
  background: var(--gold); box-shadow: inset 0 0 0 7px #171219;
}
.vinyl-arm::after { /* tige */
  content: ""; position: absolute; top: 24px; bottom: 24px; left: 50%;
  width: 3px; transform: translateX(-50%); border-radius: 2px;
  background: linear-gradient(#e0b968, #9c7f42);
}
.vinyl-arm-head { /* cellule corail */
  position: absolute; bottom: 0; left: 50%; transform: translateX(-50%);
  width: 13px; height: 26px; border-radius: 4px;
  background: linear-gradient(160deg, #e0603c, #c14a2c);
}
.vinyl-controls { display: flex; align-items: center; justify-content: center; gap: 12px; }
.vinyl-replay {
  width: 42px; height: 42px; border-radius: 50%; cursor: pointer;
  background: transparent; border: 1px solid var(--border-light);
  color: var(--text-muted); font-size: 1.15rem; line-height: 1;
  display: inline-flex; align-items: center; justify-content: center;
  transition: var(--trans); margin-bottom: 16px;
}
.vinyl-replay:hover { color: var(--gold); border-color: var(--border-gold); transform: rotate(-45deg); }
.vinyl-btn {
  width: 64px; height: 64px; border-radius: 50%; border: 0; cursor: pointer;
  background: linear-gradient(150deg, #e0693f, #d4502a); color: #fff;
  display: inline-flex; align-items: center; justify-content: center;
  box-shadow: 0 12px 28px rgba(212, 80, 42, .38); transition: var(--trans);
  margin-bottom: 16px;
}
.vinyl-btn:hover { transform: scale(1.08); box-shadow: 0 14px 32px rgba(212, 80, 42, .5); }
.vinyl-ic-play {
  width: 0; height: 0; border-style: solid; border-width: 11px 0 11px 18px;
  border-color: transparent transparent transparent #fff; margin-left: 5px;
}
.vinyl-ic-pause {
  display: none; width: 18px; height: 20px; box-sizing: border-box;
  border-left: 6px solid #fff; border-right: 6px solid #fff;
}
.vinyl-player.playing .vinyl-ic-play { display: none; }
.vinyl-player.playing .vinyl-ic-pause { display: block; }
.vinyl-title { font-family: var(--font-serif); font-style: italic; font-weight: 600; color: #fff; font-size: 1.08rem; margin: 0 0 7px; }
.vinyl-meta { font-size: .72rem; letter-spacing: 2.4px; text-transform: uppercase; color: var(--text-muted); margin: 0 0 18px; }
.vinyl-progress {
  position: relative; height: 6px; border-radius: 4px;
  background: rgba(255, 255, 255, .13); cursor: pointer;
}
.vinyl-progress span {
  display: block; height: 100%; width: 0; border-radius: 4px;
  background: var(--gold); position: relative; transition: width .25s linear;
}
.vinyl-progress span::after { /* curseur */
  content: ""; position: absolute; right: -6px; top: 50%; transform: translateY(-50%);
  width: 13px; height: 13px; border-radius: 50%;
  background: #dfd9ce; box-shadow: 0 1px 5px rgba(0, 0, 0, .45);
}
.vinyl-times {
  display: flex; justify-content: space-between; margin-top: 9px;
  font-size: .74rem; color: var(--text-muted); font-variant-numeric: tabular-nums;
}
/* Paroles à suivre en mode karaoké (variante compacte : exemples) */
.vinyl-lyrics {
  display: none; margin-top: 16px; padding: 14px 16px; text-align: left;
  max-height: 240px; overflow-y: auto; border-radius: 10px;
  background: rgba(0, 0, 0, .25); border: 1px solid var(--border-light);
}
.vinyl-player.karaoke .vinyl-lyrics { display: block; }
.vinyl-lyrics .lyric-line { font-size: .88rem; line-height: 1.7; }
.vinyl-lyrics .lyric-stanza { margin-bottom: 14px; }

/* ============================================================
   MODE « LIVRE D'ART » — livre ouvert 3D : paroles à gauche,
   pochette gatefold + vinyle qui glisse à droite
   ============================================================ */
@media (min-width: 820px) {
  .vinyl-player.vinyl-book-layout {
    max-width: 780px; padding: 34px 28px 34px 390px;
    background: #111112; border-color: #2b231c; position: relative;
    box-shadow: 0 35px 80px rgba(0, 0, 0, .7); border-radius: 12px;
    perspective: 1200px;
  }
  /* le titre vit sur la page du livre : pas de doublon sous le bouton */
  .vinyl-player.vinyl-book-layout .vinyl-title { display: none; }
  .vinyl-player.vinyl-book-layout .book-spine {
    position: absolute; top: 0; left: 366px; width: 14px; height: 100%; z-index: 8;
    background: linear-gradient(to right, #09090a 20%, #2b231c 50%, #09090a 80%);
    box-shadow: inset 2px 0 5px rgba(0, 0, 0, .8), inset -2px 0 5px rgba(0, 0, 0, .8);
  }
  .vinyl-player.vinyl-book-layout .book-page-left {
    position: absolute; top: 14px; left: 14px; bottom: 14px; width: 352px; z-index: 5;
    background-color: #f7f3ea; border-radius: 8px 0 0 8px;
    box-shadow: inset 5px 0 10px rgba(0, 0, 0, .05), -4px 4px 15px rgba(0, 0, 0, .4);
    border: 1px solid rgba(0, 0, 0, .08); border-right: none;
    display: flex; align-items: center; justify-content: center;
    padding: 24px; color: #332b25;
  }
  .book-page-content {
    display: flex; flex-direction: column; gap: 16px; text-align: center;
    max-height: 100%; overflow-y: auto; width: 100%;
  }
  .book-page-lyrics-title {
    font-family: var(--font-serif); font-size: 1.15rem; font-style: italic; font-weight: 700;
    color: #b98a2e; border-bottom: 1px solid rgba(51, 43, 37, .1); padding-bottom: 8px;
  }
  .book-page-verse { font-family: var(--font-serif); font-size: .8rem; line-height: 1.6; opacity: .9; }
  .book-page-verse .lyric-line { font-size: .8rem; line-height: 1.6; color: #3a3547; font-weight: 400; }
  .book-page-verse .lyric-stanza { margin-bottom: 14px; }
  .book-page-verse .lyric-section {
    font-size: .64rem; text-transform: uppercase; letter-spacing: 1.5px;
    color: #b98a2e; font-weight: 700; margin-bottom: 4px;
  }
  .album-sleeve-gatefold {
    position: absolute; inset: 0; border-radius: 12px; z-index: 6;
    transform-style: preserve-3d; perspective: 1000px; pointer-events: none;
  }
  .gatefold-back {
    position: absolute; inset: 0; border-radius: 12px;
    background-color: var(--bg-elev2); border: 1px solid var(--border-light); z-index: 3;
  }
  .gatefold-front {
    position: absolute; inset: 0; border-radius: 12px; z-index: 7;
    background-color: var(--bg-elev); border: 1px solid var(--border-gold);
    background-size: cover; background-position: center;
    transform-origin: left center;
    transition: transform .9s cubic-bezier(.25, .8, .25, 1);
    box-shadow: 6px 0 15px rgba(0, 0, 0, .3);
    backface-visibility: hidden;
  }
  .vinyl-player.vinyl-book-layout.out .gatefold-front {
    /* Reste sous 90° : au-delà, backface-visibility:hidden efface la jaquette
       (elle montrerait son dos). On garde l'ouverture bien en dessous de ce
       seuil pour que l'image reste visible tout du long, juste de biais. */
    transform: rotateY(-55deg) translateZ(-20px);
    box-shadow: -10px 10px 25px rgba(0, 0, 0, .4);
  }
  /* Séquence : la pochette s'ouvre, PUIS le disque glisse, PUIS le bras se pose.
     À la pause tout revient immédiatement (pas de délai au retour). */
  .vinyl-player.vinyl-book-layout .vinyl-disc-slide { z-index: 4; transition-delay: 0s; }
  .vinyl-player.vinyl-book-layout.out .vinyl-disc-slide {
    transform: translateX(96px); transition-delay: .45s;
  }
  .vinyl-player.vinyl-book-layout .vinyl-arm {
    z-index: 8; transition-delay: 0s;
    transform: rotate(-24deg) translateX(0);
  }
  .vinyl-player.vinyl-book-layout.out .vinyl-arm {
    transform: rotate(0deg) translateX(96px); transition-delay: .8s;
  }
  /* Mode karaoké dans le livre : paroles agrandies + invitation à chanter */
  .vinyl-player.vinyl-book-layout.karaoke .book-page-verse .lyric-line {
    font-size: .94rem; line-height: 1.8;
  }
  .vinyl-player.vinyl-book-layout.karaoke .book-page-left { padding-bottom: 40px; }
  .vinyl-player.vinyl-book-layout.karaoke .book-page-left::after {
    content: "🎤 À vous de chanter !";
    position: absolute; bottom: 12px; left: 50%; transform: translateX(-50%);
    font-size: .68rem; font-weight: 700; letter-spacing: 1.4px;
    text-transform: uppercase; color: #b98a2e; white-space: nowrap;
  }
}
@media (max-width: 819px) {
  .book-spine, .book-page-left, .album-sleeve-gatefold { display: none !important; }
}

/* Variante compacte (cartes de la galerie d'exemples) */
.vinyl-compact { max-width: none; padding: 20px 18px 16px; border-radius: 14px; }
.vinyl-compact .vinyl-scene { width: 150px; height: 150px; margin-bottom: 16px; }
.vinyl-compact .vinyl-arm { width: 20px; right: 8px; top: -7px; transform-origin: 50% 10px; }
.vinyl-compact .vinyl-arm::before { width: 20px; height: 20px; box-shadow: inset 0 0 0 5px #171219; }
.vinyl-compact .vinyl-arm::after { top: 18px; bottom: 19px; }
.vinyl-compact .vinyl-arm-head { width: 10px; height: 20px; }
.vinyl-compact .vinyl-btn { width: 50px; height: 50px; margin-bottom: 12px; }
.vinyl-compact .vinyl-ic-play { border-width: 8px 0 8px 14px; margin-left: 4px; }
.vinyl-compact .vinyl-ic-pause { width: 14px; height: 16px; border-width: 0 4.5px; border-left: 4.5px solid #fff; border-right: 4.5px solid #fff; }

/* ---------- Mode POCHETTE : le disque glisse hors de la jaquette ----------
   La jaquette RESTE visible (pas de rotation) ; le disque, caché derrière,
   glisse vers la droite au play — « comme un vinyle qu'on sort de sa pochette ».
   Fonctionne à toutes les largeurs (contrairement au Livre d'Art). */
.vinyl-sleeve-layout .vinyl-scene { width: 288px; height: 190px; margin: 0 auto 22px; }
.vinyl-sleeve-layout .album-sleeve-gatefold {
  position: absolute; left: 0; top: 0; width: 190px; height: 190px;
  z-index: 6; pointer-events: none; display: block;
}
.vinyl-sleeve-layout .gatefold-back {
  position: absolute; inset: 0; border-radius: 12px;
  background-color: var(--bg-elev2); border: 1px solid var(--border-light);
}
.vinyl-sleeve-layout .gatefold-front {
  position: absolute; inset: 0; border-radius: 12px; z-index: 7;
  background-size: cover; background-position: center;
  border: 1px solid var(--border-gold); box-shadow: 0 12px 30px rgba(0, 0, 0, .5);
}
.vinyl-sleeve-layout .vinyl-disc-slide {
  inset: auto; left: 0; top: 0; width: 190px; height: 190px; z-index: 4;
}
.vinyl-sleeve-layout.out .vinyl-disc-slide { transform: translateX(108px); }
/* Bras de lecture : parqué à droite, il se pose sur le disque sorti au play. */
.vinyl-sleeve-layout .vinyl-arm { right: 14px; top: -8px; z-index: 8; }
/* Écrans étroits : on rétrécit pour que le disque sorti reste dans la carte. */
@media (max-width: 819px) {
  .vinyl-sleeve-layout .vinyl-scene { width: 240px; height: 168px; }
  .vinyl-sleeve-layout .album-sleeve-gatefold,
  .vinyl-sleeve-layout .vinyl-disc-slide { width: 168px; height: 168px; }
  .vinyl-sleeve-layout.out .vinyl-disc-slide { transform: translateX(72px); }
}
@media (max-width: 400px) {
  .vinyl-sleeve-layout .vinyl-scene { width: 182px; height: 130px; }
  .vinyl-sleeve-layout .album-sleeve-gatefold,
  .vinyl-sleeve-layout .vinyl-disc-slide { width: 130px; height: 130px; }
  .vinyl-sleeve-layout.out .vinyl-disc-slide { transform: translateX(52px); }
}

/* ---------- « Ce que vous recevez » : vignettes jaquette + titre ---------- */
.example-tiles {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 26px;
}
.example-tile {
  display: block; background: var(--bg-elev); border: 1px solid var(--border-light);
  border-radius: var(--radius); overflow: hidden; color: inherit; transition: var(--trans);
}
.example-tile:hover { transform: translateY(-5px); border-color: var(--border-gold); box-shadow: 0 22px 48px rgba(0, 0, 0, .45); }
.example-tile-cover { position: relative; aspect-ratio: 1; overflow: hidden; }
.example-tile-cover img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s ease; }
.example-tile:hover .example-tile-cover img { transform: scale(1.05); }
.example-tile-play {
  position: absolute; inset: 0; margin: auto; width: 58px; height: 58px;
  display: flex; align-items: center; justify-content: center; padding-left: 5px;
  border-radius: 50%; background: rgba(0, 0, 0, .5); border: 2px solid rgba(255, 255, 255, .85);
  color: #fff; font-size: 1.15rem; backdrop-filter: blur(3px);
  opacity: 0; transform: scale(.8); transition: var(--trans);
}
.example-tile:hover .example-tile-play { opacity: 1; transform: scale(1); }
.example-tile h3 {
  padding: 16px 18px; margin: 0; font-size: 1rem; font-style: italic;
  color: #fff; text-align: center;
}
.example-tile:hover h3 { color: var(--gold); }
/* Variante compacte : bloc « autres exemples » en bas d'une page d'exemple */
.example-tiles--mini { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 16px; }
.example-tiles--mini .example-tile h3 { padding: 10px 12px; font-size: .88rem; }
.example-tiles--mini .example-tile-play { width: 44px; height: 44px; font-size: .95rem; }

/* ---------- pages d'atterrissage par occasion (SEO) ---------- */
.occasion-content { line-height: 1.7; }
.occasion-content h2 { font-size: 1.3rem; margin: 30px 0 10px; }
.occasion-content h2:first-child { margin-top: 0; }
.occasion-content p { margin: 0 0 14px; color: var(--color-text); }
.occasion-examples { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 22px; }
.occasion-links { display: flex; flex-wrap: wrap; gap: 10px; }
.occasion-link {
  display: inline-flex; align-items: center; gap: 7px;
  min-height: 44px; box-sizing: border-box;
  padding: 8px 14px; border-radius: 999px;
  background: var(--bg-elev); border: 1px solid var(--border-light);
  color: var(--color-text); font-size: .85rem; transition: var(--trans);
}
.occasion-link:hover { border-color: var(--border-gold); color: var(--gold); }
.occasion-link-ico { display: inline-flex; color: var(--gold); }
.footer-occasions { font-size: .8rem; margin-top: 10px; }
.footer-network { font-size: .8rem; margin-top: 10px; }
.footer-network a { color: inherit; text-decoration: underline; }
.footer-network a:hover { color: var(--gold); }
.footer-occasions a { color: inherit; text-decoration: underline; }
.footer-occasions a:hover { color: var(--gold); }

/* Barre d'actions EN HAUT du karaoké : créer sa chanson + partager le lien.
   (Visiteurs du lien : aucun compte requis pour chanter → support de com'.) */
.karaoke-topbar {
  display: flex; flex-wrap: wrap; justify-content: center; gap: 12px;
  margin: 4px 0 22px;
}
.karaoke-share-note { margin: 20px auto 46px; max-width: 560px; line-height: 1.7; }

/* ============================================================
   PAGE KARAOKÉ — paroles affichées simplement, défilement continu
   approximatif (pas de surlignage ligne par ligne : la détection du
   chant dérive toujours un peu, un highlight précis serait donc
   régulièrement faux).
   ============================================================ */
.karaoke-stage {
  position: relative; margin: 30px 0 8px; border-radius: 20px; overflow: hidden;
  background: radial-gradient(120% 90% at 50% 0%, #241c33, #17121f 70%);
  border: 1px solid var(--border-light); box-shadow: 0 30px 70px rgba(0, 0, 0, .55);
  display: flex; flex-direction: column;
}
/* Fond « façon clip » : pochette floutée en arrière-plan quand elle existe
   (sinon le dégradé ci-dessus suffit). Étendu au-delà des bords + flou pour
   éviter toute ligne nette visible sous overflow:hidden. Élément réel (pas
   un pseudo-élément) pour que l'URL se résolve par rapport à la page, pas
   à la feuille de style. */
.karaoke-bg {
  position: absolute; inset: -24px; z-index: 0;
  background-size: cover; background-position: center; background-repeat: no-repeat;
  filter: blur(38px) brightness(.55) saturate(1.25);
}
.karaoke-head, .karaoke-lines, .karaoke-controls { position: relative; z-index: 1; }
.karaoke-head {
  display: flex; align-items: center; gap: 14px; padding: 16px 22px;
  border-bottom: 1px solid var(--border-light); background: rgba(0, 0, 0, .25);
}
.karaoke-cover { width: 52px; height: 52px; border-radius: 10px; object-fit: cover; flex: none; }
.karaoke-title { font-family: var(--font-serif); font-style: italic; font-weight: 600; color: #fff; font-size: 1.05rem; margin: 0; }
.karaoke-meta { font-size: .7rem; letter-spacing: 2px; text-transform: uppercase; color: var(--text-muted); margin: 2px 0 0; }
.karaoke-back {
  margin-left: auto; width: 38px; height: 38px; border-radius: 50%; flex: none;
  display: flex; align-items: center; justify-content: center;
  color: var(--text-muted); border: 1px solid var(--border-light); transition: var(--trans);
}
.karaoke-back:hover { color: #fff; border-color: var(--border-gold); }
.karaoke-lines {
  height: 54vh; height: 54svh; min-height: 320px; overflow-y: auto; text-align: center;
  padding: 25vh 24px; padding: 25svh 24px; scrollbar-width: none;
  overscroll-behavior: contain; /* le défilement interne n'entraîne pas la page */
  -webkit-overflow-scrolling: touch;
}
.karaoke-lines::-webkit-scrollbar { display: none; }
.kline {
  font-family: var(--font-serif); font-weight: 600; font-size: 1.55rem; line-height: 1.45;
  margin: 16px auto; max-width: 640px; color: var(--color-text);
}
.kline-end { font-size: 1.1rem; opacity: .5; }
.karaoke-controls {
  display: flex; align-items: center; gap: 16px; flex-wrap: wrap;
  padding: 18px 24px 20px; border-top: 1px solid var(--border-light);
  background: rgba(0, 0, 0, .3);
}
.karaoke-controls .vinyl-btn, .karaoke-controls .vinyl-replay { margin-bottom: 0; }
.karaoke-controls .vinyl-btn { width: 56px; height: 56px; }
.karaoke-bar { flex: 1; min-width: 200px; }
/* icône lecture/pause du bouton principal pilotée par l'état de la scène */
.karaoke-stage .vinyl-ic-pause { display: none; }
.karaoke-stage.playing .vinyl-ic-play { display: none; }
.karaoke-stage.playing .vinyl-ic-pause { display: block; }
@media (max-width: 600px) {
  .kline { font-size: 1.15rem; margin: 12px auto; }
  .karaoke-lines { height: 46vh; height: 46svh; min-height: 240px; padding: 20vh 16px; padding: 20svh 16px; }
  .karaoke-controls { gap: 10px; padding: 14px 16px 16px; }
}

/* ---------- dépôt d'avis par l'acheteur (page d'écoute) ---------- */
.review-ask { margin-top: 22px; scroll-margin-top: 92px; }
.review-ask-stars { margin: 0 0 8px; }
.review-ask-quote { margin: 0 0 12px; font-style: italic; color: #ece9e3; line-height: 1.55; font-size: .95rem; }
.star-input { display: inline-flex; flex-direction: row-reverse; gap: 2px; margin-bottom: 6px; }
.star-input input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.star-input label {
  cursor: pointer; font-size: 1.9rem; line-height: 1; color: #4a415c;
  transition: color .15s ease, transform .15s ease; margin: 0; padding: 2px;
}
.star-input label:hover { transform: scale(1.15); }
.star-input input:checked ~ label,
.star-input label:hover,
.star-input label:hover ~ label { color: var(--gold); }
.star-input input:focus-visible + label { outline: 2px solid var(--gold); border-radius: 4px; }

/* ---------- garantie ---------- */
.guarantee-box {
  margin-top: 16px; background: rgba(127,166,80,.10);
  border: 1px solid rgba(127,166,80,.3); border-radius: 10px; padding: 12px 16px;
}
.guarantee {
  margin: 0; font-size: .95rem; color: #b6d68a; line-height: 1.5; font-weight: 600;
}
/* Le détail lève l'objection ; il doit se lire, pas seulement se voir. */
.guarantee-detail {
  margin: 6px 0 0; font-size: .85rem; color: var(--text-muted); line-height: 1.6;
}

/* ---------- FAQ ---------- */
.faq-list { max-width: 760px; margin: 0 auto; }
.faq-item {
  background: var(--bg-elev); border: 1px solid var(--border-light);
  border-radius: 12px; margin-bottom: 12px; overflow: hidden;
}
.faq-item summary {
  cursor: pointer; padding: 18px 22px; font-family: var(--font-serif); font-weight: 600;
  font-size: 1.02rem; color: #fff; list-style: none; position: relative; padding-right: 48px;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after {
  content: "+"; position: absolute; right: 22px; top: 50%; transform: translateY(-50%);
  color: var(--gold); font-size: 1.5rem; font-weight: 400; transition: var(--trans);
}
.faq-item[open] summary::after { transform: translateY(-50%) rotate(45deg); }
.faq-item[open] summary { color: var(--gold); }
.faq-answer { padding: 0 22px 20px; color: var(--text-muted); line-height: 1.6; font-size: .95rem; }

@media (max-width: 780px) {
  .container, .header-inner, .site-header { padding-left: 20px; padding-right: 20px; }
  .hero h1 { font-size: 2.1rem; }
  /* Sur mobile, la 2e colonne (titre + extrait à écouter + paroles) doit
     passer AVANT la 1re (jaquette + prix) : sinon le prix et le bouton
     d'achat s'affichent avant même que le visiteur ait pu écouter. */
  .song-layout { grid-template-columns: 1fr; }
  .song-layout > div:first-child { order: 2; }
  .song-layout > div:last-child { order: 1; }
  h1 { font-size: 1.9rem; }
  .trust-inner { gap: 10px 24px; padding: 16px 20px; }
  .reviews-summary { margin-top: -14px; }
}

/* ============================================================
   RESPONSIVE — navigation mobile, tables, ajustements
   ============================================================ */
.nav-toggle, .nav-burger { display: none; }

/* Palier intermédiaire : le menu complet se resserre avant de passer en burger */
@media (max-width: 1240px) {
  .header-inner { gap: 22px; }
  .main-nav { gap: 20px; }
  .main-nav a { font-size: .88rem; }
  .brand-name { font-size: 1.1rem; }
  .nav-cta { padding: 10px 16px; font-size: .7rem; }
}

@media (max-width: 1080px) {
  /* --- menu burger (CSS pur, via case à cocher cachée) --- */
  .header-inner { position: relative; gap: 14px; }
  .brand-name { font-size: 1.12rem; }
  .nav-cta { margin-left: auto; padding: 9px 16px; font-size: .7rem; }
  .nav-burger {
    display: flex; flex-direction: column; justify-content: center; gap: 5px;
    width: 44px; height: 44px; order: 10; flex: none; margin: 0; padding: 12px 10px;
    border: 1px solid var(--border-light); border-radius: 9px; cursor: pointer;
    -webkit-tap-highlight-color: transparent;
  }
  .nav-burger span { display: block; height: 2px; width: 100%; background: var(--color-text); border-radius: 2px; transition: var(--trans); }
  .nav-toggle:checked ~ .nav-burger span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
  .nav-toggle:checked ~ .nav-burger span:nth-child(2) { opacity: 0; }
  .nav-toggle:checked ~ .nav-burger span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
  .main-nav {
    display: none; position: absolute; top: calc(100% + 1px); left: 0; right: 0;
    flex: none; flex-direction: column; gap: 0;
    background: var(--bg-elev); border-top: 1px solid var(--border-light);
    box-shadow: 0 18px 40px rgba(0, 0, 0, .45); padding: 6px 20px 12px;
  }
  .nav-toggle:checked ~ .main-nav { display: flex; }
  .main-nav a {
    padding: 15px 2px; border-bottom: 1px solid var(--border-light);
    font-size: 1rem;
  }
  .main-nav a:last-child { border-bottom: 0; }
  .main-nav a::after { display: none; }

  /* --- tables scrollables plutôt que débordantes --- */
  table.songs { display: block; overflow-x: auto; -webkit-overflow-scrolling: touch; }
}

/* 4.4 — cibles tactiles confortables au doigt (>= 44 px) sur mobile.
   On agrandit la zone cliquable sans modifier notablement le rendu : les liens
   de pied de page et les CTA secondaires (texte) gagnent du padding, les
   boutons reçoivent une hauteur minimale. */
@media (max-width: 640px) {
  .btn { min-height: 44px; box-sizing: border-box; display: inline-flex;
         align-items: center; justify-content: center; }
  .site-footer a { display: inline-block; min-height: 44px; box-sizing: border-box;
    padding: 14px 6px; line-height: 1.15; }
  /* Liens-CTA secondaires isolés (ex. « Voir tous les exemples → ») */
  .song-after > .card p a, .occasion-content ~ .card p a,
  .song-after a[href^="exemple"], .cta-note a { display: inline-block; padding: 8px 2px; }
}

@media (max-width: 600px) {
  .hero { padding: 66px 20px 56px; }
  .hero h1 { font-size: 1.85rem; }
  .hero p { font-size: 1rem; }
  .hero-logo { height: 84px; width: 84px; }
  .hero-cta { gap: 12px; }
  .section { padding: 44px 0 6px; }
  .section > .container > h2 { font-size: 1.6rem; margin-bottom: 28px; }
  .card { padding: 22px; }
  .pricing-card { padding: 28px 20px; }
  .pricing-card .price { font-size: 2rem; }
  .btn-lg { padding: 15px 30px; font-size: .85rem; }
  .btn { padding: 13px 26px; }
  .wizard { margin: 32px auto; }
  .wizard-nav { flex-direction: column-reverse; }
  .wizard-nav .btn { width: 100%; text-align: center; }
  /* Téléphone : DEUX cartes par ligne, TOUJOURS. Laissées à auto-fill, ces
     grilles retombaient à une seule colonne dès 390 px de large — et l'étape
     Occasion sur TOUS les téléphones, sa largeur minimale valant 180 px. La
     vignette prenait alors toute la largeur de l'écran : le configurateur
     paraissait démesuré, et choisir une occasion, un style ou une voix
     demandait un défilement interminable de cartes géantes. */
  .choice-grid, .occasion-grid, .mood-grid, .cover-style-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
  }
  /* Deux fois plus étroites, les cartes portent des libellés qui doivent
     tenir en deux ou trois lignes (« Voix féminine douce et cristalline ») :
     on serre le texte plutôt que d'étirer la carte. */
  .choice .choice-label { font-size: .82rem; line-height: 1.3; }
  .choice-rich .choice-sub { font-size: .68rem; }
  .stat-grid { grid-template-columns: 1fr 1fr; }
  .buy-box, .pricing-card { border-radius: 12px; }
}

@media (max-width: 480px) {
  .brand-name { display: none; }
  .nav-cta { padding: 9px 13px; font-size: .66rem; }
}
/* Écran très étroit (320 px) : le CTA « Créer ma chanson » poussait le bouton
   burger HORS de l'écran — six pixels de trop suffisent à rendre toute la
   page défilable de côté. On resserre le CTA plutôt que de l'escamoter :
   c'est l'entrée du tunnel, elle doit rester visible partout. */
@media (max-width: 360px) {
  .header-inner { gap: 10px; }
  .nav-cta { padding: 9px 11px; font-size: .58rem; letter-spacing: .4px; }
}
@media (max-width: 380px) {
  .stat-grid { grid-template-columns: 1fr; }
  .hero h1 { font-size: 1.65rem; }
}

/* ============================================================
   NAVIGATION PAR SECTIONS + VISUEL PRODUIT
   ============================================================ */
#comment, #offre, #exemples-teaser, #avis, #faq { scroll-margin-top: 92px; }

.section-sub { text-align: center; color: var(--text-muted); max-width: 640px; margin: -28px auto 44px; font-size: 1rem; }

.creation-showcase { display: grid; grid-template-columns: 1.05fr .95fr; gap: 44px; align-items: center; }
.showcase-visual { position: relative; min-height: 380px; }
.lyrics-sheet, .album-cover { position: absolute; }
.lyrics-sheet {
  left: 4%; top: 34px; width: 250px; transform: rotate(-6deg);
  background: #f6f1e6; color: #2b2733; border-radius: 6px; padding: 18px;
  box-shadow: 0 24px 50px rgba(0, 0, 0, .45); border: 1px solid rgba(0, 0, 0, .08);
}
.sheet-head { display: flex; gap: 10px; align-items: center; border-bottom: 1px solid rgba(0, 0, 0, .12); padding-bottom: 10px; margin-bottom: 10px; }
.sheet-thumb { width: 34px; height: 34px; border-radius: 5px; flex: none; color: var(--gold);
  background: linear-gradient(135deg, #251e33, #3a2f52); display: flex; align-items: center; justify-content: center; }
.sheet-meta strong { display: block; font-size: .82rem; color: #2b2733; }
.sheet-meta span { font-size: .72rem; color: #7a7385; }
.sheet-body p { font-size: .74rem; line-height: 1.5; color: #3a3547; margin: 0 0 3px; }
.sheet-tag { font-size: .64rem; text-transform: uppercase; letter-spacing: 1.5px; color: #b98a2e; font-weight: 700; margin-top: 9px; }
.album-cover {
  right: 4%; top: 0; width: 258px; z-index: 2; transform: rotate(4deg);
  background: var(--bg-elev); border-radius: 12px; overflow: hidden;
  box-shadow: 0 30px 60px rgba(0, 0, 0, .55); border: 1px solid var(--border-gold);
}
.cover-photo { position: relative; aspect-ratio: 1 / .82; overflow: hidden; }
.cover-photo .portrait { width: 100%; height: 100%; display: block; }
.cover-photo .portrait-img { width: 100%; height: 100%; object-fit: cover; display: block; }
.cover-badge {
  position: absolute; left: 10px; bottom: 10px; background: rgba(0, 0, 0, .55); color: #fff;
  font-size: .72rem; padding: 4px 10px; border-radius: 20px; backdrop-filter: blur(4px);
}
/* Mini-lecteur : bouton lecture + barre de progression sur la jaquette */
.cover-play {
  position: absolute; inset: 0; margin: auto; width: 62px; height: 62px;
  border: 2px solid rgba(255, 255, 255, .85); border-radius: 50%;
  background: rgba(0, 0, 0, .48); color: #fff; font-size: 1.25rem; line-height: 1;
  display: flex; align-items: center; justify-content: center; padding-left: 5px;
  cursor: pointer; backdrop-filter: blur(3px); transition: var(--trans);
}
.cover-play:hover { transform: scale(1.08); border-color: var(--gold); color: var(--gold); background: rgba(0, 0, 0, .62); }
.cover-play.playing { padding-left: 0; font-size: 1rem; }
.cover-progress {
  position: absolute; left: 0; right: 0; bottom: 0; height: 4px;
  display: block; background: rgba(0, 0, 0, .4);
}
.cover-progress span { display: block; height: 100%; width: 0; background: var(--gold); transition: width .25s linear; }
.cover-caption { padding: 14px 16px 16px; }
.cover-caption strong { display: block; color: #fff; font-family: var(--font-serif); font-size: 1rem; }
.cover-caption span { font-size: .78rem; color: var(--gold); }
.creation-list { margin-bottom: 16px; }
/* Éléments livrés : chaque ligne avec son badge-icône (au lieu du point rouge) */
.deliver-list { list-style: none; padding: 0; }
.deliver-list li { display: flex; align-items: center; gap: 13px; margin: 13px 0; padding: 0; }
.deliver-list li::before { content: none; }
.deliver-txt { line-height: 1.45; }
.deliver-ico {
  flex: none; width: 40px; height: 40px; border-radius: 50%;
  background: var(--gold-soft); border: 1px solid var(--border-gold); color: var(--gold);
  display: flex; align-items: center; justify-content: center; transition: var(--trans);
}
.deliver-ico svg { display: block; }
.deliver-list li:hover .deliver-ico { transform: rotate(-6deg) scale(1.08); }
.offre-price { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; margin: 8px 0 18px; }
.offre-price .price { font-family: var(--font-serif); font-size: 2.4rem; font-weight: 700; color: var(--gold); line-height: 1; }
.offre-price .offre-price-note { color: var(--text-muted); font-size: .9rem; }
.offre-price .promo-badge { color: var(--gold); font-weight: 600; margin: 0; }
.creation-list li strong { color: #fff; }

@media (max-width: 820px) {
  .creation-showcase { grid-template-columns: 1fr; gap: 24px; }
  .showcase-visual { min-height: 420px; max-width: 440px; margin: 0 auto; width: 100%; }
}
@media (max-width: 600px) {
  #comment, #offre, #exemples-teaser, #avis, #faq { scroll-margin-top: 84px; }
  .showcase-visual { min-height: 380px; }
  .lyrics-sheet { width: 210px; }
  .album-cover { width: 210px; }
}

/* ============================================================
   PAGE CADEAU (gift.php) — ouverture animée + mise en page
   ============================================================ */
.gift-page { }

/* Étape 1 : le cadeau à ouvrir */
.gift-open { min-height: 68vh; display: flex; flex-direction: column; align-items: center;
  justify-content: center; text-align: center; padding: 40px 20px; }
.gift-open-title { font-size: 2rem; color: #fff; margin: 6px 0 26px; max-width: 640px; }
.gift-open-hint { color: var(--text-muted); margin-top: 18px; font-size: .95rem;
  animation: giftHint 1.8s ease-in-out infinite; }
@keyframes giftHint { 50% { opacity: .5; } }

.giftbox { position: relative; width: 170px; height: 170px; border: 0; background: transparent;
  padding: 0; cursor: pointer; animation: giftFloat 3s ease-in-out infinite; transition: filter .3s; }
.giftbox:hover { filter: brightness(1.08) drop-shadow(0 0 18px rgba(217,169,78,.35)); }
.giftbox > span { position: absolute; transition: transform .55s cubic-bezier(.4,-0.3,.4,1.4), opacity .5s; }
.giftbox-shadow { bottom: 2px; left: 50%; transform: translateX(-50%); width: 120px; height: 16px;
  background: radial-gradient(ellipse, rgba(0,0,0,.55), transparent 70%); }
.giftbox-body { left: 20px; bottom: 12px; width: 130px; height: 96px; border-radius: 10px;
  background: linear-gradient(135deg, #7b5cf6, #ec4899); box-shadow: inset 0 -8px 16px rgba(0,0,0,.18); }
.giftbox-ribbon { left: 76px; bottom: 12px; width: 18px; height: 96px; background: var(--grad-fun); z-index: 2; }
.giftbox-lid { left: 12px; top: 44px; width: 146px; height: 34px; border-radius: 8px; z-index: 3;
  background: linear-gradient(135deg, #8b6cf6, #f56aa9); box-shadow: 0 6px 14px rgba(0,0,0,.3); }
.giftbox-bow { left: 50%; top: 18px; transform: translateX(-50%); font-size: 2.7rem; line-height: 1; z-index: 4; }
.giftbox-spark { top: -4px; right: 16px; font-size: 1.3rem; opacity: 0; z-index: 5; }
@keyframes giftFloat { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-9px); } }

/* Ouverture : le couvercle s'envole, le nœud saute, la boîte s'efface */
.giftbox.gift-open--opened { animation: none; }
.giftbox.gift-open--opened .giftbox-lid { transform: translateY(-72px) rotate(-14deg); opacity: 0; }
.giftbox.gift-open--opened .giftbox-bow { transform: translate(-50%, -78px) rotate(22deg); opacity: 0; }
.giftbox.gift-open--opened .giftbox-body,
.giftbox.gift-open--opened .giftbox-ribbon { transform: scale(.85) translateY(10px); opacity: 0; transition-delay: .1s; }
.giftbox.gift-open--opened .giftbox-spark { animation: giftSpark .6s ease-out forwards; }
@keyframes giftSpark { 0% { opacity: 0; transform: scale(.4); } 40% { opacity: 1; }
  100% { opacity: 0; transform: scale(1.7) translateY(-16px); } }

/* Étape 2 : contenu révélé */
.gift-reveal { opacity: 0; transform: translateY(16px); }
.gift-reveal.gift-reveal--in { opacity: 1; transform: none; transition: opacity .6s ease, transform .6s ease; }
.gift-headline { text-align: center; margin-top: 10px; }

.gift-top { display: grid; grid-template-columns: 300px 1fr; gap: 36px; align-items: center; margin-top: 18px; }
.gift-cover img { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: 16px; display: block;
  border: 1px solid var(--border-gold); box-shadow: 0 24px 55px rgba(0,0,0,.5); }
.gift-song-title { font-family: var(--font-serif); font-size: 2rem; color: #fff; margin: 0 0 6px; }
.gift-song-meta { color: var(--gold); font-size: .9rem; letter-spacing: .5px; margin: 0 0 14px; }
.gift-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 16px; align-items: center; }
.gift-actions-label { font-size: .82rem; font-weight: 600; color: var(--text-muted); }

/* Karaoké : accès à un OUTIL, pas un téléchargement — carte distincte. */
.gift-karaoke-link {
  display: flex; align-items: center; gap: 14px; margin-top: 14px;
  padding: 13px 16px; border-radius: 14px; text-decoration: none;
  background: linear-gradient(135deg, rgba(217,169,78,.14), rgba(255,122,89,.12));
  border: 1px solid var(--border-gold);
  transition: transform .2s ease, box-shadow .2s ease;
}
.gift-karaoke-link:hover { transform: translateY(-2px); box-shadow: 0 12px 28px rgba(0,0,0,.35); }
.gift-karaoke-ic {
  flex: 0 0 auto; width: 42px; height: 42px; border-radius: 50%;
  display: grid; place-items: center; font-size: 1.2rem;
  background: var(--grad-fun); box-shadow: 0 6px 14px rgba(0,0,0,.3);
}
.gift-karaoke-txt { display: flex; flex-direction: column; line-height: 1.3; }
.gift-karaoke-txt strong { color: #fff; font-size: 1rem; }
.gift-karaoke-txt small { color: var(--text-muted); font-size: .8rem; }
.gift-karaoke-go { margin-left: auto; color: var(--gold); font-size: 1.3rem; font-weight: 700; }

/* Écoute + paroles : deux cartes de MÊME hauteur (grille étirée). */
.gift-listen { display: grid; grid-template-columns: 340px 1fr; gap: 32px; align-items: stretch; margin-top: 44px; }
.gift-player, .gift-lyrics {
  background: var(--bg-elev); border: 1px solid var(--border-light);
  border-radius: 16px; padding: 24px; display: flex; flex-direction: column; min-width: 0;
}
.gift-player { align-items: center; text-align: center; }
.gift-player h2, .gift-lyrics h2 { font-size: 1.25rem; margin: 0 0 16px; }
.gift-player .vinyl-player {
  background: none; border: none; box-shadow: none; padding: 0; margin: auto 0; max-width: none; width: 100%;
}
.gift-lyrics .lyrics-box { flex: 1 1 auto; min-height: 0; max-height: 460px; overflow: auto; -webkit-overflow-scrolling: touch; }
.gift-offer, .gift-cta { margin-top: 44px; }
.gift-cta { text-align: center; }

@media (max-width: 820px) {
  .gift-top, .gift-listen { grid-template-columns: 1fr; gap: 24px; }
  .gift-cover { max-width: 300px; margin: 0 auto; }
  .gift-open-title { font-size: 1.6rem; }
}
@media (prefers-reduced-motion: reduce) {
  .giftbox, .gift-open-hint { animation: none; }
  .gift-reveal { transition: none; }
}

/* ---------- bandeau de consentement (cookies publicitaires) ----------
   Le bandeau est émis juste avant </body> (meta_footer_html). Sans position
   fixe, il s'affiche donc tout en bas de la PAGE : le visiteur ne peut pas
   accepter sans avoir déroulé jusqu'au bout — même piège que la modale plus
   haut dans cette feuille. On l'ancre au bas de la FENÊTRE.
   z-index : au-dessus de l'en-tête collant (50), en dessous de la modale
   (1000), qui doit rester au premier plan quand elle est ouverte. */
.consent-banner {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 90;
  background: rgba(37, 30, 51, .97);
  backdrop-filter: blur(10px);
  border-top: 1px solid var(--border-gold);
  box-shadow: 0 -14px 44px rgba(0, 0, 0, .5);
  /* Volontairement sans animation d'entrée : une apparition qui part de
     translateY(100%) laisse le bandeau hors écran tant qu'elle ne tourne pas
     (onglet en arrière-plan, rendu gelé, moteur qui bride les animations).
     Pour l'élément qui doit justement rester atteignable, le gain visuel ne
     vaut pas ce risque. */
}
.consent-inner {
  max-width: 1140px; margin: 0 auto;
  /* La marge basse suit l'encoche des téléphones (barre de geste iOS). */
  padding: 18px 40px calc(18px + env(safe-area-inset-bottom, 0px));
  display: flex; align-items: center; gap: 28px; flex-wrap: wrap;
}
.consent-text {
  flex: 1 1 380px; min-width: 0; margin: 0;
  font-size: .92rem; line-height: 1.55; color: var(--text-muted);
}
.consent-actions { display: flex; gap: 12px; margin-left: auto; }
.consent-actions .btn { padding: 12px 26px; font-size: .74rem; letter-spacing: 1.6px; white-space: nowrap; }

/* Tant que le bandeau est affiché, il recouvre le bas du pied de page :
   on réserve la hauteur correspondante pour que tout reste atteignable. */
body:has(.consent-banner:not([hidden])) { padding-bottom: 120px; }

@media (max-width: 720px) {
  .consent-inner { padding: 16px 20px calc(16px + env(safe-area-inset-bottom, 0px)); gap: 14px; }
  .consent-text { flex: 1 1 100%; font-size: .86rem; }
  .consent-actions { width: 100%; margin-left: 0; flex-wrap: wrap; }
  /* Deux moitiés exactes (la gouttière fait 12 px) plutôt qu'une base élargie
     par l'espace restant : la largeur ne dépend alors d'aucune répartition.
     Textes longs (« Continuer sans accepter ») : césure autorisée, sans quoi
     le bouton déborderait de l'écran. */
  .consent-actions .btn { flex: 0 0 calc(50% - 6px); padding: 13px 10px; letter-spacing: 1px; white-space: normal; }
  body:has(.consent-banner:not([hidden])) { padding-bottom: 200px; }
}