/* ====================================================================
   MyPianoPop — Brand Signatures
   Composants visuels distinctifs, réutilisables, 100 % tokens (zéro hex en dur).
   Importer après colors_and_type.css.
   Vu dans : preview/brand-signatures.html
   ==================================================================== */

/* --- 1. Ondes sonores bleues (décor hero / sections audio) -------------
   <div class="mpp-wave" aria-hidden="true"><i></i>…×7</div>            */
.mpp-wave{display:inline-flex;align-items:center;gap:var(--space-1);height:40px}
.mpp-wave i{width:5px;border-radius:var(--radius-pill);background:var(--brand-accent,var(--mpp-blue));height:30%}
.mpp-wave i:nth-child(1){height:35%} .mpp-wave i:nth-child(2){height:70%}
.mpp-wave i:nth-child(3){height:100%} .mpp-wave i:nth-child(4){height:55%}
.mpp-wave i:nth-child(5){height:85%}  .mpp-wave i:nth-child(6){height:45%}
.mpp-wave i:nth-child(7){height:65%}
.mpp-wave.is-animated i{animation:mpp-wave-pulse 1.1s var(--ease-out) infinite alternate}
.mpp-wave.is-animated i:nth-child(2){animation-delay:.12s}
.mpp-wave.is-animated i:nth-child(3){animation-delay:.24s}
.mpp-wave.is-animated i:nth-child(4){animation-delay:.36s}
.mpp-wave.is-animated i:nth-child(5){animation-delay:.18s}
.mpp-wave.is-animated i:nth-child(6){animation-delay:.30s}
.mpp-wave.is-animated i:nth-child(7){animation-delay:.42s}
@keyframes mpp-wave-pulse{from{transform:scaleY(.5)}to{transform:scaleY(1)}}
@media (prefers-reduced-motion:reduce){.mpp-wave.is-animated i{animation:none}}

/* --- 2. Notes de musique flottantes (décor) ----------------------------
   <span class="mpp-note">♪</span> — positionner en absolute autour du hero */
.mpp-note{color:var(--brand-accent,var(--mpp-blue));font-size:28px;line-height:1;opacity:.9;display:inline-block}
.mpp-note.is-soft{color:var(--mpp-blue-soft)}
.mpp-note.is-float{animation:mpp-float 4s var(--ease-out) infinite alternate}
@keyframes mpp-float{from{transform:translateY(0) rotate(-4deg)}to{transform:translateY(-10px) rotate(4deg)}}
@media (prefers-reduced-motion:reduce){.mpp-note.is-float{animation:none}}

/* --- 3. Cercles numérotés de parcours (Roadmap) ------------------------
   <span class="mpp-step">1</span>                                       */
.mpp-step{width:44px;height:44px;border-radius:var(--radius-pill);background:var(--brand-accent,var(--mpp-blue));
  color:var(--fg-invert);font-family:var(--font-display);font-weight:800;font-size:20px;
  display:inline-grid;place-items:center;flex:none;box-shadow:var(--shadow-blue)}
.mpp-step.is-done{background:var(--mpp-green-action-dk);box-shadow:none}
.mpp-step.is-todo{background:var(--mpp-surface-3);color:var(--fg-3);box-shadow:none}

/* --- 4. Grosses guillemets de témoignage -------------------------------
   <figure class="mpp-quote"><blockquote>…</blockquote></figure>         */
.mpp-quote{position:relative;overflow:hidden}
.mpp-quote::before{content:"\00BB";position:absolute;right:-8px;bottom:-30px;
  font-family:Georgia,'Times New Roman',serif;font-size:140px;line-height:1;font-weight:700;
  color:var(--brand-accent,var(--mpp-blue));opacity:.10;pointer-events:none}
.mpp-quote blockquote{margin:0;position:relative;z-index:1}

/* --- 5. Pastilles de niveau --------------------------------------------
   <span class="mpp-level lv-1|lv-2|lv-3">Débutant</span>                */
.mpp-level{display:inline-flex;align-items:center;gap:var(--space-2);
  font-family:var(--font-body);font-weight:700;font-size:var(--fs-small);
  padding:var(--space-1) var(--space-3);border-radius:var(--radius-pill);line-height:1.4}
.mpp-level::before{content:"";width:9px;height:9px;border-radius:var(--radius-pill);background:currentColor}
.mpp-level.lv-1{background:var(--sem-success-bg);color:var(--sem-success-fg)}
.mpp-level.lv-2{background:var(--mpp-blue-mist);color:var(--mpp-blue-deep)}
.mpp-level.lv-3{background:var(--mpp-gold-soft);color:var(--mpp-gold)} /* gold sur gold-soft : décor — doubler d'un texte si porteur d'info */

/* --- 6. Chips de filtre (SongWall) -------------------------------------
   <button class="mpp-chip">Pop</button> · état actif = aria-pressed     */
.mpp-chip{font-family:var(--font-body);font-weight:600;font-size:var(--fs-small);
  padding:var(--space-2) var(--space-4);border-radius:var(--radius-pill);
  background:var(--mpp-surface);color:var(--fg-2);border:1.5px solid var(--border);
  cursor:pointer;transition:background var(--dur) var(--ease-out),border-color var(--dur) var(--ease-out)}
.mpp-chip:hover{background:var(--mpp-blue-mist);border-color:var(--mpp-blue-soft)}
.mpp-chip[aria-pressed="true"]{background:var(--brand-accent,var(--mpp-blue));color:var(--fg-invert);border-color:transparent}
.mpp-chip:focus-visible{outline:var(--focus-ring-width) solid var(--focus-ring);outline-offset:var(--focus-ring-offset)}