/* ====================================================================
   FretMotion — Design System
   Source unique de verite CSS. Tokens, base, pages publiques,
   outils (clair + sombre), landing page, hub produit.
   ==================================================================== */

/* --- Tokens --------------------------------------------------------- */
:root {
  --fm-black: #111;
  --fm-dark: #1a1a1a;
  --fm-text: #111;
  --fm-muted: #5e5e5e;
  --fm-light: #8a8a8a;
  --fm-border: rgba(17,17,17,.08);
  --fm-bg: #F7F4EE;
  --fm-bg-alt: #F0EDE6;
  --fm-surface: #fff;
  --fm-surface-muted: #E8ECF2;
  --fm-surface-dark: #111318;
  --fm-accent: #1DBE9B;
  --fm-accent-hover: #17A085;
  --fm-accent-soft: rgba(29,190,155,.12);
  --fm-radius: 14px;
  --fm-radius-sm: 8px;
  --fm-radius-lg: 20px;
  --fm-shadow-sm: 0 1px 2px rgba(0,0,0,.04);
  --fm-shadow-md: 0 10px 30px rgba(0,0,0,.06);
  --fm-max-w: 1200px;
  --fm-font: 'Inter', system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --fm-mono: "SF Mono", "Fira Code", "Courier New", monospace;
}

/* --- Reset ---------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

/* --- Base ----------------------------------------------------------- */
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
  font-family: var(--fm-font);
  line-height: 1.6;
  max-width: var(--fm-max-w);
  margin: 0 auto;
  padding: 0 1rem;
  color: var(--fm-text);
  background: var(--fm-bg);
  -webkit-font-smoothing: antialiased;
}

/* --- Typography ----------------------------------------------------- */
h1 { font-size: 2rem; font-weight: 700; margin-bottom: .5rem; line-height: 1.2; }
h2 { font-size: 1.5rem; font-weight: 700; margin-bottom: .5rem; line-height: 1.25; }
h3 { font-size: 1.15rem; font-weight: 600; margin-bottom: .4rem; line-height: 1.3; }
p { margin-bottom: .75rem; }
a { color: var(--fm-accent); text-decoration: none; }
a:hover { text-decoration: underline; }
code, kbd { font-family: var(--fm-mono); font-size: .9em; background: var(--fm-bg-alt); padding: .1em .35em; border-radius: var(--fm-radius-sm); }

/* --- Navigation ----------------------------------------------------- */
header { position: sticky; top: 0; background: var(--fm-bg); z-index: 100; backdrop-filter: blur(12px); }

header nav {
  display: flex;
  gap: .75rem;
  align-items: center;
  padding: .75rem 0;
  border-bottom: 1px solid var(--fm-border);
  flex-wrap: wrap;
}

header nav a {
  color: var(--fm-muted);
  text-decoration: none;
  font-size: .9rem;
  white-space: nowrap;
  transition: color .15s;
}
header nav a:hover { color: var(--fm-black); text-decoration: none; }

header nav > a:first-child {
  font-weight: 800;
  font-size: 1.15rem;
  margin-right: auto;
  color: var(--fm-black);
  letter-spacing: -.02em;
}

/* Nav links container (desktop: inline flex, mobile: collapsible) */
.nav-links {
  display: contents;
}

/* Hamburger button — hidden on desktop */
.nav-hamburger {
  display: none;
  background: none;
  border: 1px solid var(--fm-border);
  border-radius: var(--fm-radius-sm);
  padding: .2rem .5rem;
  font-size: 1.3rem;
  color: var(--fm-black);
  cursor: pointer;
  line-height: 1;
}

.nav-signup {
  background: var(--fm-black);
  color: #fff !important;
  padding: .35rem .85rem;
  border-radius: var(--fm-radius-sm);
  font-weight: 600;
  font-size: .85rem;
}
.nav-signup:hover { background: var(--fm-dark); }

.nav-tools { position: relative; }

.nav-badge {
  position: absolute;
  top: -.45rem;
  right: -.55rem;
  background: var(--fm-accent);
  color: #fff;
  font-size: .6rem;
  font-weight: 700;
  min-width: 1.1rem;
  height: 1.1rem;
  line-height: 1.1rem;
  text-align: center;
  border-radius: 99px;
  pointer-events: none;
}

.nav-quick {
  font-size: 1.1rem;
  padding: .15rem .4rem;
  border: 1px solid var(--fm-border);
  border-radius: var(--fm-radius-sm);
  line-height: 1;
}
.nav-quick:hover { border-color: var(--fm-black); }

/* --- Main ----------------------------------------------------------- */
main { padding: 2rem 0; min-height: 60vh; }

/* --- Buttons -------------------------------------------------------- */
button {
  cursor: pointer;
  font-family: inherit;
  font-size: .9rem;
}

.btn-primary {
  display: inline-block;
  background: var(--fm-black);
  color: #fff;
  padding: .5rem 1.2rem;
  border: none;
  border-radius: var(--fm-radius-sm);
  font-weight: 600;
  font-size: 1rem;
  text-decoration: none;
  cursor: pointer;
  transition: background .15s, transform .1s;
}
.btn-primary:hover {
  background: var(--fm-dark);
  text-decoration: none;
  transform: translateY(-1px);
}
.btn-primary:disabled { opacity: .5; cursor: not-allowed; }

.btn-hero {
  display: inline-block;
  background: var(--fm-black);
  color: #fff;
  padding: .75rem 1.5rem;
  border: none;
  border-radius: var(--fm-radius);
  font-weight: 600;
  font-size: 1rem;
  text-decoration: none;
  transition: background .15s, transform .1s;
}
.btn-hero:hover {
  background: var(--fm-dark);
  text-decoration: none;
  transform: translateY(-1px);
}

.btn-secondary, .btn-ft-ghost {
  display: inline-block;
  background: transparent;
  color: var(--fm-black);
  padding: .6rem 1.4rem;
  border: 1.5px solid var(--fm-border);
  border-radius: var(--fm-radius);
  font-weight: 600;
  font-size: .95rem;
  text-decoration: none;
  transition: background .15s, border-color .15s;
}
.btn-secondary:hover, .btn-ft-ghost:hover {
  background: var(--fm-bg-alt);
  border-color: var(--fm-black);
  text-decoration: none;
}

.btn-danger {
  display: inline-block;
  background: transparent;
  color: #c0392b;
  padding: .6rem 1.4rem;
  border: 1.5px solid #c0392b;
  border-radius: var(--fm-radius);
  font-weight: 600;
  font-size: .95rem;
  text-decoration: none;
  cursor: pointer;
  transition: background .15s, color .15s;
}
.btn-danger:hover { background: #c0392b; color: #fff; text-decoration: none; }

.btn-go {
  background: var(--fm-black);
  color: #fff;
  border: none;
  padding: .5rem 1.2rem;
  border-radius: var(--fm-radius-sm);
  font-weight: 600;
  cursor: pointer;
  transition: background .15s;
}
.btn-go:hover { background: var(--fm-dark); }
.btn-go:disabled { opacity: .5; cursor: not-allowed; }

.btn-sm {
  padding: .3rem .7rem;
  font-size: .8rem;
  border-radius: var(--fm-radius-sm);
}

.btn-edit {
  background: transparent;
  border: 1px solid var(--fm-border);
  padding: .25rem .6rem;
  font-size: .78rem;
  border-radius: var(--fm-radius-sm);
  cursor: pointer;
}
.btn-edit:hover { border-color: var(--fm-black); }

/* --- Form Inputs ---------------------------------------------------- */
input[type="text"],
input[type="number"],
input[type="search"],
select {
  font-family: inherit;
  font-size: .95rem;
  padding: .5rem .75rem;
  border: 1.5px solid rgba(17,17,17,.18);
  border-radius: var(--fm-radius-sm);
  background: var(--fm-surface);
  color: var(--fm-text);
  outline: none;
  transition: border-color .15s;
}
input[type="text"]:focus,
input[type="number"]:focus,
input[type="search"]:focus,
select:focus {
  border-color: var(--fm-accent);
}

.chord-input {
  flex: 1;
  font-family: var(--fm-mono);
  font-size: 1.15rem;
  letter-spacing: .03em;
  padding: .5rem .75rem;
  border: 1.5px solid var(--fm-border);
  border-radius: var(--fm-radius-sm);
}
.chord-input:focus { outline: none; border-color: var(--fm-accent); }

/* --- Badges -------------------------------------------------------- */
.voicing-badge, .style-badge, .key-badge, .genre-badge, .score-badge {
  display: inline-block;
  font-size: .7rem;
  font-weight: 600;
  padding: .15rem .5rem;
  border-radius: 3px;
  text-transform: uppercase;
  letter-spacing: .03em;
}
.badge-open   { background: #d4edda; color: #155724; }
.badge-barre  { background: #fff3cd; color: #856404; }
.badge-movable { background: #d1ecf1; color: #0c5460; }
.badge-shell  { background: #e2d6f3; color: #4a235a; }
.badge-partial { background: #f0f0f0; color: #555; }
.badge-full   { background: #d1ecf1; color: #0c5460; }
.badge-triad  { background: #d4edda; color: #155724; }

/* --- Messages ------------------------------------------------------- */
.message {
  padding: .75rem 1rem;
  margin-bottom: 1rem;
  border-radius: var(--fm-radius-sm);
  font-size: .9rem;
}
.message.success { background: #d4edda; color: #155724; }
.message.error   { background: #f8d7da; color: #721c24; }
.message.warning { background: #fff3cd; color: #856404; }
.message.info    { background: #d1ecf1; color: #0c5460; }

/* --- Error Box ------------------------------------------------------ */
.error-box {
  background: #fff0f0;
  color: #c00;
  padding: .6rem 1rem;
  border-radius: var(--fm-radius-sm);
  font-size: .88rem;
  margin: .5rem 0;
}

/* --- Voicing Grid (common to multiple tools) ----------------------- */
.voicing-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: 1rem;
  margin-top: .75rem;
}

.voicing-card {
  border: 1px solid var(--fm-border);
  border-radius: var(--fm-radius);
  padding: .75rem;
  text-align: center;
  transition: border-color .15s, box-shadow .15s;
  background: var(--fm-surface);
  box-shadow: var(--fm-shadow-sm);
}
.voicing-card:hover {
  border-color: rgba(17,17,17,.15);
  box-shadow: var(--fm-shadow-sm), var(--fm-shadow-md);
}

.voicing-frets {
  font-family: var(--fm-mono);
  font-size: .82rem;
  color: var(--fm-muted);
  margin-top: .3rem;
}

/* --- Controls Row (common tool controls) --------------------------- */
.input-group {
  display: flex;
  gap: .5rem;
  align-items: end;
  flex-wrap: wrap;
  margin-bottom: 1rem;
}
.input-group label {
  font-size: .82rem;
  font-weight: 600;
  color: var(--fm-muted);
  display: block;
  margin-bottom: .2rem;
}

.option-row {
  display: flex;
  gap: 1rem;
  align-items: center;
  flex-wrap: wrap;
  margin-bottom: .75rem;
}
.option-row label { display: flex; align-items: center; gap: .4rem; font-size: .9rem; }
.option-row select { padding: .3rem .5rem; border: 1px solid var(--fm-border); border-radius: var(--fm-radius-sm); }

/* --- Chips ---------------------------------------------------------- */
.chip {
  display: inline-block;
  padding: .3rem .7rem;
  border: 1px solid var(--fm-border);
  border-radius: 20px;
  font-size: .8rem;
  cursor: pointer;
  transition: all .15s;
  background: var(--fm-surface);
  color: var(--fm-muted);
}
.chip:hover { border-color: var(--fm-accent); color: var(--fm-black); }
.chip.active {
  background: var(--fm-accent);
  color: #fff;
  border-color: var(--fm-accent);
}

/* --- Share Button --------------------------------------------------- */
.demo-share-btn {
  background: transparent;
  border: 1.5px solid var(--fm-border);
  padding: .45rem 1rem;
  border-radius: var(--fm-radius);
  font-size: .85rem;
  color: var(--fm-muted);
  cursor: pointer;
  transition: all .15s;
  margin-top: .5rem;
}
.demo-share-btn:hover {
  border-color: var(--fm-black);
  color: var(--fm-black);
}

/* --- Modal ---------------------------------------------------------- */
.modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.5);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
  padding: 1rem;
}
.modal-box {
  background: var(--fm-surface);
  border-radius: var(--fm-radius-lg);
  padding: 2rem;
  max-width: 440px;
  width: 100%;
  position: relative;
  box-shadow: var(--fm-shadow-sm), var(--fm-shadow-md);
}
.modal-close {
  position: absolute;
  top: .75rem;
  right: 1rem;
  background: none;
  border: none;
  font-size: 1.5rem;
  color: var(--fm-light);
  cursor: pointer;
  line-height: 1;
}
.modal-close:hover { color: var(--fm-black); }
.modal-actions {
  display: flex;
  gap: .75rem;
  margin-top: 1.25rem;
  flex-wrap: wrap;
}
.modal-btn-primary {
  background: var(--fm-black);
  color: #fff;
  padding: .55rem 1.2rem;
  border-radius: var(--fm-radius-sm);
  font-weight: 600;
  text-decoration: none;
}
.modal-btn-primary:hover { background: var(--fm-dark); text-decoration: none; }
.modal-btn-secondary {
  color: var(--fm-muted);
  padding: .55rem 1.2rem;
  text-decoration: none;
  font-weight: 500;
}
.modal-btn-secondary:hover { color: var(--fm-black); }

/* --- Subtitle ------------------------------------------------------- */
.subtitle {
  font-size: .9rem;
  color: var(--fm-muted);
  margin-bottom: 1.5rem;
}

/* === Public Pages (shared) ========================================== */

/* Page wrapper */
.page { max-width: 780px; margin: 0 auto; }

/* Kicker label */
.kicker {
  text-transform: uppercase; letter-spacing: .15em;
  font-size: .75rem; color: var(--fm-light); margin-bottom: .5rem;
}

/* Hero */
.page-hero {
  text-align: center; padding: 3rem 0 2.5rem;
  border-bottom: 1px solid var(--fm-border); margin-bottom: 2.5rem;
}
.page-hero h1 {
  font-size: clamp(2rem, 5vw, 2.8rem); line-height: 1.1;
  margin-bottom: 1rem; letter-spacing: -.02em;
}
.page-lead {
  font-size: 1.1rem; color: var(--fm-muted); max-width: 540px;
  margin: 0 auto; line-height: 1.7;
}

/* Section */
.page-section {
  padding: 2rem 0; border-bottom: 1px solid var(--fm-border);
}
.page-section h2 { font-size: 1.5rem; margin-bottom: .5rem; }
.page-intro { color: var(--fm-muted); margin-bottom: 1.5rem; }

/* Card grids */
.card-grid {
  display: grid; gap: 1.25rem;
  grid-template-columns: repeat(2, 1fr);
}
.card-grid--3 { grid-template-columns: repeat(3, 1fr); }
.card {
  padding: 1.25rem; border: 1px solid var(--fm-border); border-radius: var(--fm-radius);
  background: var(--fm-surface); transition: border-color .15s, box-shadow .15s;
  box-shadow: var(--fm-shadow-sm);
}
.card:hover { border-color: rgba(17,17,17,.15); box-shadow: var(--fm-shadow-sm), var(--fm-shadow-md); }
.card-icon { font-size: 1.4rem; margin-bottom: .3rem; text-align: center; }
.card h3 { font-size: 1rem; margin-bottom: .3rem; }
.card p { font-size: .88rem; color: var(--fm-muted); line-height: 1.6; margin: 0; }
.card-hook { font-size: .85rem; color: var(--fm-accent); font-weight: 600; margin-bottom: .4rem; }
.card--accent-left {
  border: none; border-left: 3px solid var(--fm-accent);
  border-radius: 0 var(--fm-radius-sm) var(--fm-radius-sm) 0;
}
.card--dark {
  background: var(--fm-surface-dark); color: #fff;
  border-color: rgba(255,255,255,.1);
}
.card--dark:hover { border-color: rgba(255,255,255,.22); background: #191d26; }
.card--dark h3 { color: #fff; }
.card--dark p:last-child { color: rgba(255,255,255,.7); }
.card--dark .card-hook { color: rgba(255,255,255,.6); font-style: italic; }

/* Feature list (left-bordered items) */
.feature-list { display: flex; flex-direction: column; gap: 1.5rem; }
.feature-item { padding: 1rem 1.25rem; border-left: 3px solid var(--fm-border); }
.feature-item:hover { border-left-color: var(--fm-black); }
.feature-item h3 { font-size: 1rem; margin-bottom: .3rem; }
.feature-item p { font-size: .9rem; color: var(--fm-muted); line-height: 1.65; margin: 0; }

/* Before / After comparison */
.compare-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1.5rem; text-align: left; }
.compare-col {
  padding: 1.25rem; border: 1px solid var(--fm-border); border-radius: var(--fm-radius);
}
.compare-col h3 { font-size: 1rem; margin-bottom: .75rem; }
.compare-col ul { list-style: none; padding: 0; margin: 0; }
.compare-col li {
  padding: .35rem 0 .35rem 1.4rem; position: relative;
  font-size: .9rem; color: var(--fm-muted);
}
.compare-before { background: #faf5f5; border-color: #f0e0e0; }
.compare-before li::before { content: "✕"; position: absolute; left: 0; color: #c44; font-weight: 700; }
.compare-after { background: #f5faf5; border-color: #e0f0e0; }
.compare-after li::before { content: "✓"; position: absolute; left: 0; color: #0a0; font-weight: 700; }
.compare-us { border-color: var(--fm-black); }
.compare-us li::before { content: "✓"; color: #0a0; }

/* Check-list (✓ items) */
.check-list { list-style: none; padding: 0; margin: 0; }
.check-list li {
  padding: .45rem 0 .45rem 1.4rem; position: relative;
  font-size: .92rem; color: var(--fm-dark); border-bottom: 1px solid var(--fm-border);
}
.check-list li::before { content: "✓"; position: absolute; left: 0; color: #0a0; font-weight: 700; }

/* Arrow-list (→ items) */
.arrow-list { list-style: none; padding: 0; margin: 0 0 1.25rem; }
.arrow-list li {
  padding: .5rem 0 .5rem 1.5rem; position: relative;
  color: var(--fm-dark); line-height: 1.5; border-bottom: 1px solid var(--fm-border);
}
.arrow-list li::before { content: "→"; position: absolute; left: 0; color: var(--fm-light); }

/* FAQ accordion */
.faq { padding: 2rem 0; border-bottom: 1px solid var(--fm-border); }
.faq h2 { font-size: 1.4rem; margin-bottom: 1rem; }
.faq-item { border-bottom: 1px solid var(--fm-border); }
.faq-q {
  width: 100%; display: flex; justify-content: space-between; align-items: center;
  padding: .8rem 0; font-size: .92rem; font-weight: 600; color: var(--fm-black);
  background: none; border: none; cursor: pointer; text-align: left;
}
.faq-q:hover { color: var(--fm-muted); }
.faq-arrow { font-size: 1.2rem; transition: transform .2s; color: var(--fm-light); }
.faq-open { transform: rotate(90deg); }
.faq-a p { font-size: .88rem; color: var(--fm-muted); line-height: 1.6; margin: 0; padding-bottom: .75rem; }
.faq-a a { color: var(--fm-black); font-weight: 600; }

/* Pricing card */
.price-card {
  max-width: 400px; margin: 0 auto; padding: 2rem;
  border: 1.5px solid var(--fm-border); border-radius: var(--fm-radius-lg);
  background: var(--fm-surface); box-shadow: var(--fm-shadow-sm), var(--fm-shadow-md);
  text-align: center;
}
.price-badge {
  display: inline-block; font-size: .75rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: .1em; color: #fff;
  background: var(--fm-black); padding: .25rem .8rem; border-radius: 20px; margin-bottom: 1rem;
}
.price-amount { margin-bottom: .75rem; }
.price-currency { font-size: 1.5rem; vertical-align: super; font-weight: 700; }
.price-number { font-size: 4rem; font-weight: 800; letter-spacing: -.03em; line-height: 1; }
.price-period { font-size: 1rem; color: var(--fm-muted); }
.price-desc { font-size: .95rem; color: var(--fm-muted); margin-bottom: 1.5rem; line-height: 1.6; }
.price-includes { list-style: none; padding: 0; margin: 0 0 1.5rem; text-align: left; }
.price-includes li {
  padding: .75rem 0; border-bottom: 1px solid var(--fm-border);
  display: flex; flex-direction: column; gap: .15rem;
}
.price-includes li strong { font-size: .95rem; color: var(--fm-black); }
.price-includes li span { font-size: .85rem; color: var(--fm-muted); line-height: 1.5; }

/* Trust strip */
.trust-strip {
  display: flex; justify-content: center; gap: 2.5rem; flex-wrap: wrap;
  padding: 1.5rem 0; text-align: center; color: var(--fm-muted); font-size: .9rem;
}
.trust-strip strong { color: var(--fm-black); font-size: 1.3rem; display: block; }

/* CTA section */
.page-cta { text-align: center; padding: 3rem 0 2rem; }
.page-cta h2 { font-size: 1.6rem; margin-bottom: .75rem; }
.page-cta p { color: var(--fm-muted); max-width: 480px; margin: 0 auto 1.25rem; line-height: 1.7; }
.page-cta-buttons { display: flex; justify-content: center; gap: .75rem; }
.page-cta .login-hint { font-size: .9rem; color: var(--fm-light); margin-top: .75rem; }
.page-cta .login-hint a { color: var(--fm-dark); }

/* CTA buttons */
.btn-cta {
  display: inline-block; padding: .7rem 1.8rem; background: var(--fm-black); color: #fff;
  text-decoration: none; border-radius: var(--fm-radius-sm); font-size: 1.05rem; font-weight: 600;
  transition: background .15s; border: none; cursor: pointer;
}
.btn-cta:hover { background: var(--fm-dark); text-decoration: none; }
.btn-ghost {
  display: inline-block; padding: .7rem 1.8rem; background: var(--fm-surface); color: var(--fm-black);
  text-decoration: none; border-radius: var(--fm-radius-sm); font-size: 1.05rem; font-weight: 600;
  border: 1px solid var(--fm-border); transition: background .15s;
}
.btn-ghost:hover { background: var(--fm-bg-alt); text-decoration: none; }

/* --- Footer --------------------------------------------------------- */
footer {
  border-top: 1px solid var(--fm-border);
  padding: 1.5rem 0;
  text-align: center;
  color: var(--fm-light);
  font-size: .85rem;
  margin-top: 2rem;
}
footer a { color: var(--fm-light); }
footer a:hover { color: var(--fm-text); }

/* --- Cookie banner -------------------------------------------------- */
[x-cloak] { display: none !important; }

.cookie-banner {
  position: fixed; bottom: 0; left: 0; right: 0;
  display: flex; align-items: center; justify-content: center; gap: 1rem;
  padding: .75rem 1.5rem;
  background: var(--fm-surface-dark); color: #ccc;
  font-size: .85rem; z-index: 200;
}
.cookie-banner a { color: var(--fm-accent); }
.cookie-banner-btn {
  background: var(--fm-accent); color: #fff; border: none;
  padding: .4rem 1rem; border-radius: var(--fm-radius-sm);
  font-size: .85rem; cursor: pointer; white-space: nowrap;
}
.cookie-banner-btn:hover { background: var(--fm-accent-hover); }
@media (max-width: 640px) {
  .cookie-banner { flex-direction: column; text-align: center; gap: .5rem; padding: 1rem; }
}

/* --- Diagram SVG ---------------------------------------------------- */
.diagram-svg { width: 100%; max-width: 130px; height: auto; margin: 0 auto; }
.chord-diagram { margin: .2rem 0; display: flex; justify-content: center; }

/* === Responsive ===================================================== */
@media (max-width: 640px) {
  body { padding: 0 .75rem; }
  h1 { font-size: 1.5rem; }
  h2 { font-size: 1.2rem; }
  main { padding: 1.25rem 0; }

  header nav {
    gap: .4rem;
    font-size: .82rem;
  }

  /* Hamburger menu — mobile */
  .nav-hamburger { display: block; }
  .nav-links {
    display: none;
    flex-direction: column;
    width: 100%;
    gap: .25rem;
    padding-top: .5rem;
  }
  .nav-links.nav-open {
    display: flex;
  }
  .nav-links .nav-link {
    display: block;
    padding: .4rem 0;
  }
  .nav-links a {
    padding: .35rem 0;
  }
  .nav-links .nav-signup {
    margin-top: .25rem;
    text-align: center;
    display: block;
  }

  header nav > a:first-child { font-size: 1.05rem; }

  .input-group { flex-direction: column; align-items: stretch; }
  .voicing-grid { grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: .5rem; }

  .btn-primary, .btn-hero { padding: .55rem 1.1rem; font-size: .9rem; }
  .modal-box { padding: 1.5rem; }

  /* Public pages */
  .page-hero h1 { font-size: 1.8rem; }
  .card-grid { grid-template-columns: 1fr; }
  .card-grid--3 { grid-template-columns: 1fr; }
  .compare-grid { grid-template-columns: 1fr; }
  .trust-strip { gap: 1.5rem; }
  .price-card { padding: 1.5rem 1.25rem; }
  .price-number { font-size: 3rem; }
  .btn-cta { padding: .55rem 1.2rem; font-size: .95rem; }
}

@media (min-width: 641px) and (max-width: 768px) {
  header nav { gap: .5rem; }
  .nav-link { font-size: .82rem; }
}

/* --- Profile page --------------------------------------------------- */
.profile { max-width: 640px; margin: 2rem auto; }
.profile h1 { margin-bottom: 1.5rem; }

.profile-section {
  background: var(--fm-surface);
  border: 1px solid var(--fm-border);
  border-radius: var(--fm-radius);
  padding: 1.25rem 1.5rem;
  margin-bottom: 1rem;
  box-shadow: var(--fm-shadow-sm);
}
.profile-section h2 { font-size: 1.1rem; margin-bottom: .75rem; color: var(--fm-dark); }

.profile-dl { display: grid; grid-template-columns: 140px 1fr; gap: .35rem .75rem; }
.profile-dl dt { color: var(--fm-muted); font-size: .9rem; }
.profile-dl dd { font-size: .9rem; }

.profile-badge {
  display: inline-block;
  font-size: .8rem;
  font-weight: 600;
  padding: .15em .55em;
  border-radius: var(--fm-radius-sm);
  text-transform: capitalize;
}
.profile-badge--active, .profile-badge--paid { background: #e6f4ea; color: #1e7e34; }
.profile-badge--trialing { background: #e8f0fe; color: #1a73e8; }
.profile-badge--canceled, .profile-badge--void { background: #fce8e6; color: #c5221f; }
.profile-badge--past_due { background: #fef7e0; color: #e37400; }

.profile-muted { color: var(--fm-muted); font-size: .9rem; margin-bottom: .75rem; }
.profile-actions { margin-top: .75rem; }

.profile-table { width: 100%; border-collapse: collapse; font-size: .9rem; }
.profile-table th { text-align: left; color: var(--fm-muted); font-weight: 500; padding: .4rem 0; border-bottom: 1px solid var(--fm-border); }
.profile-table td { padding: .5rem 0; border-bottom: 1px solid var(--fm-border); }
.profile-link { font-size: .85rem; margin-right: .5rem; }

/* --- Auth pages (login, signup, logout, password reset) ------------- */
.auth-page { max-width: 420px; margin: 2rem auto; }
.auth-page h1 { margin-bottom: .25rem; }
.auth-page .auth-sub { color: var(--fm-muted); font-size: .9rem; margin-bottom: 1.5rem; }
.auth-page .auth-sub a { font-weight: 600; }

.auth-form label {
  display: block;
  font-size: .85rem;
  font-weight: 600;
  color: var(--fm-muted);
  margin-bottom: .25rem;
}
.auth-form input[type="email"],
.auth-form input[type="text"],
.auth-form input[type="password"] {
  width: 100%;
  font-family: inherit;
  font-size: .95rem;
  padding: .55rem .75rem;
  border: 1.5px solid var(--fm-border);
  border-radius: var(--fm-radius-sm);
  background: var(--fm-bg);
  color: var(--fm-text);
  outline: none;
  transition: border-color .15s;
  margin-bottom: .75rem;
}
.auth-form input:focus { border-color: var(--fm-accent); }

.auth-form .helptext, .auth-form .help-text {
  display: block;
  font-size: .78rem;
  color: var(--fm-light);
  margin-top: -.5rem;
  margin-bottom: .75rem;
}
.auth-form .errorlist {
  list-style: none;
  color: #c00;
  font-size: .82rem;
  margin: -.5rem 0 .75rem;
}
.auth-form .field-group { margin-bottom: .75rem; }

.auth-form button[type="submit"] {
  width: 100%;
  background: var(--fm-black);
  color: #fff;
  padding: .65rem;
  border: none;
  border-radius: var(--fm-radius);
  font-weight: 600;
  font-size: 1rem;
  cursor: pointer;
  transition: background .15s;
  margin-top: .25rem;
}
.auth-form button[type="submit"]:hover { background: var(--fm-dark); }

.auth-links {
  text-align: center;
  margin-top: 1rem;
  font-size: .88rem;
  color: var(--fm-muted);
}

.field-checkbox {
  display: flex;
  align-items: center;
  gap: .4rem;
  margin-bottom: .75rem;
}
.field-checkbox label {
  margin-bottom: 0;
  font-weight: 500;
  color: var(--fm-text);
}
.field-checkbox input[type="checkbox"] {
  width: auto;
  margin: 0;
}

/* ====================================================================
   SURCHARGES OUTILS COMMUNS
   Classes partagees par la majorite des outils produit.
   ==================================================================== */

.controls { margin-bottom: 1rem; }
.results { margin-top: 1.5rem; }
.summary { display: flex; align-items: center; gap: .75rem; margin-bottom: 1.5rem; flex-wrap: wrap; }

/* En-tete resultat + formule intervalle */
.result-header { margin-bottom: 1rem; }
.result-header h2 { display: inline-block; margin-right: .75rem; font-size: 1.5rem; }
.interval-formula { font-family: var(--fm-mono); color: var(--fm-muted); font-size: .9rem; margin-right: .75rem; }
.voicing-count { color: var(--fm-light); font-size: .85rem; }

/* Libelles accords / distance */
.chord-label { font-weight: 700; font-size: 1.1rem; margin-bottom: .3rem; }
.dist-label { font-size: .75rem; color: var(--fm-light); margin-bottom: .3rem; }
.total-dist { font-size: .9rem; color: var(--fm-muted); }

/* Sections et indices */
.section { margin-bottom: 2rem; }
.section h3 { margin-bottom: .75rem; font-size: 1rem; }
.hint { font-weight: normal; color: var(--fm-light); font-size: .85rem; }

/* Affinage badges voicings (arrondi + espacement) */
.voicing-badge { border-radius: 8px; letter-spacing: .04em; margin-bottom: .5rem; }
.voicing-frets { color: var(--fm-light); letter-spacing: .15em; font-size: .8rem; }

/* Etats supplementaires btn-secondary */
.btn-secondary.active { background: var(--fm-border); }
.btn-secondary:disabled { opacity: .5; cursor: default; }

/* Labels empiles quand un <select> est contenu */
.option-row label:has(select) { flex-direction: column; gap: .25rem; font-size: .85rem; color: var(--fm-muted); }

/* Error box (rappel pour outils qui utilisent .error-box) */
.error-box { margin: 1rem 0; padding: .75rem; background: #fff0f0; border: 1px solid #f5c6cb; border-radius: var(--fm-radius-sm); color: #721c24; }

/* ====================================================================
   PAGE D'ACCUEIL (landing page)
   ==================================================================== */

.lp { max-width: 800px; margin: 0 auto; }
.lp-kicker {
  text-transform: uppercase; letter-spacing: .15em;
  font-size: .75rem; color: var(--fm-light); margin-bottom: .5rem;
}

/* Hero */
.lp-hero { text-align: center; padding: 5rem 0 3.5rem; }
.lp-h1 {
  font-size: clamp(2.75rem, 6vw, 4.75rem); line-height: 1.04; letter-spacing: -.03em;
  margin-bottom: 1.25rem;
}
.lp-hero-sub {
  font-size: 1.15rem; color: var(--fm-muted); max-width: 560px;
  margin: 0 auto 1.75rem; line-height: 1.7;
}
.lp-hero-cta { display: flex; flex-direction: column; align-items: center; gap: .5rem; }
.lp-hero .btn-hero { padding: .75rem 2rem; font-size: 1.05rem; }
.lp-price-hint { font-size: .85rem; color: var(--fm-light); }

/* Demo (dark) */
.lp-demo {
  padding: 3rem 1.5rem; margin: 2rem -1.5rem;
  background: var(--fm-surface-dark); border-radius: var(--fm-radius-lg); color: #fff;
}
.lp-demo-header { text-align: center; margin-bottom: 1.5rem; }
.lp-demo-header h2 { font-size: clamp(1.4rem, 3vw, 1.8rem); margin-bottom: .5rem; color: #fff; }
.lp-demo-sub { color: rgba(255,255,255,.55); max-width: 480px; margin: 0 auto; }
.demo-box { max-width: 580px; margin: 0 auto; }
.demo-input-row { display: flex; gap: .5rem; margin-bottom: .75rem; }
.demo-input {
  flex: 1; font-size: 1.15rem; padding: .6rem .85rem;
  border: 1.5px solid rgba(255,255,255,.15); border-radius: var(--fm-radius-sm);
  font-family: 'Courier New', monospace; background: rgba(255,255,255,.06); color: #fff;
}
.demo-input:focus { outline: none; border-color: var(--fm-accent); }
.demo-input::placeholder { color: rgba(255,255,255,.3); }
.demo-btn {
  padding: .6rem 1.4rem; background: #3B82F6; color: #fff; border: none;
  border-radius: var(--fm-radius-sm); font-size: 1rem; cursor: pointer; font-weight: 600;
}
.demo-btn:hover { background: #2563EB; }
.demo-btn:disabled { opacity: .5; cursor: not-allowed; }
.demo-presets { display: flex; flex-wrap: wrap; gap: .4rem; align-items: center; justify-content: center; }
.demo-presets-label { font-size: .8rem; color: rgba(255,255,255,.45); }
.demo-chip {
  padding: .25rem .65rem; font-size: .8rem; background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.12); border-radius: 20px; cursor: pointer;
  color: rgba(255,255,255,.7);
}
.demo-chip:hover { background: rgba(255,255,255,.1); border-color: rgba(255,255,255,.25); }
.demo-error {
  margin: 1rem auto; max-width: 580px; padding: .6rem;
  background: rgba(200,50,50,.15); border: 1px solid rgba(200,50,50,.25);
  border-radius: var(--fm-radius-sm); color: #f8a; text-align: center;
}

/* Modale upgrade */
.modal-overlay { background: rgba(0,0,0,.45); }
.modal-box { padding: 2rem 2.5rem; max-width: 420px; width: 90%; text-align: center; }

/* Resultats demo */
.demo-results { margin-top: 1.5rem; }
.demo-score-strip {
  display: flex; justify-content: center; gap: 2rem;
  padding: 1rem 0; margin-bottom: 1.5rem;
  border-top: 1px solid rgba(255,255,255,.08); border-bottom: 1px solid rgba(255,255,255,.08);
}
.demo-score-item { text-align: center; }
.demo-score-val { font-size: 1.6rem; font-weight: 700; color: #fff; }
.demo-score-lbl { font-size: .75rem; color: rgba(255,255,255,.45); text-transform: uppercase; letter-spacing: .05em; }
.demo-score-highlight .demo-score-val { color: #3B82F6; }
.demo-key-strip {
  text-align: center; padding: 0 0 1rem; color: rgba(255,255,255,.5);
  font-size: .85rem;
}
.demo-key-label { font-weight: 600; color: rgba(255,255,255,.6); }
.demo-key-val { font-weight: 700; color: rgba(255,255,255,.7); }
.demo-key-sep { margin: 0 .4rem; }
.demo-degrees { font-style: italic; letter-spacing: .02em; }
.demo-path {
  display: flex; flex-wrap: wrap; gap: .5rem; padding: .75rem 0 .5rem; justify-content: center;
}
.demo-step {
  text-align: center; min-width: 110px;
  padding: .75rem; border: 1px solid var(--fm-border); border-radius: var(--fm-radius-sm);
  background: var(--fm-surface-muted); position: relative; box-shadow: var(--fm-shadow-sm);
}
.demo-step-chord { font-weight: 700; font-size: 1.1rem; margin-bottom: .4rem; color: var(--fm-black); }
.demo-diagram { display: flex; justify-content: center; }
.lp-demo .diagram-svg { max-width: 140px; }
.demo-step-frets { font-family: 'Courier New', monospace; font-size: .75rem; color: var(--fm-light); letter-spacing: .1em; text-align: center; }
.demo-step-type { font-size: .65rem; color: var(--fm-light); text-transform: uppercase; }

/* +/- position buttons & play row */
.demo-step-controls { display: flex; align-items: center; justify-content: center; gap: .35rem; margin-top: .3rem; }
.demo-pos-btn {
  display: inline-flex; align-items: center; justify-content: center;
  width: 20px; height: 20px;
  background: none; color: var(--fm-light); border: 1.5px solid rgba(17,17,17,.18); border-radius: 50%;
  cursor: pointer; transition: border-color .15s, color .15s, background .15s;
  font-size: 12px; line-height: 1; padding: 0;
}
.demo-pos-btn:hover { background: var(--fm-black); border-color: var(--fm-black); color: #fff; }
.demo-pos-indicator { font-size: .6rem; color: var(--fm-light); letter-spacing: .03em; }

/* Bouton play (demo) */
.demo-play-btn {
  display: inline-flex; align-items: center; justify-content: center;
  width: 22px; height: 22px; margin-top: 5px;
  background: none; color: var(--fm-dark); border: 1.5px solid rgba(17,17,17,.25); border-radius: 50%;
  cursor: pointer; transition: border-color .15s, color .15s, background .15s;
  font-size: 8px; line-height: 1; padding: 0 0 0 1.5px;
}
.demo-play-btn:hover { background: var(--fm-black); border-color: var(--fm-black); color: #fff; }

/* Bouton Play All + BPM */
.demo-play-all-row { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: .75rem; margin-top: .75rem; }
.demo-play-all-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .4rem;
  width: 10rem; padding: .45rem 1rem; background: rgba(255,255,255,.1); color: #fff;
  border: 1px solid rgba(255,255,255,.15); border-radius: var(--fm-radius-sm);
  font-size: .85rem; font-weight: 600; cursor: pointer; transition: all .15s;
}
.demo-play-all-btn:hover { background: var(--fm-accent); border-color: var(--fm-accent); }
.demo-play-all-btn:disabled { opacity: .5; cursor: not-allowed; }
.demo-bpm { display: inline-flex; align-items: center; gap: .3rem; }
.demo-bpm-slider { width: 60px; accent-color: #3B82F6; }
.demo-bpm-val { font-size: .78rem; color: rgba(255,255,255,.5); min-width: 24px; }

/* Tone switcher (demo) */
.demo-tone-switcher { display: inline-flex; align-items: center; gap: .35rem; }
.demo-tone-label { font-size: .75rem; color: rgba(255,255,255,.4); text-transform: uppercase; letter-spacing: .04em; margin-right: .1rem; }
.demo-tone-btn {
  padding: .2rem .65rem; border-radius: 20px; border: 1.5px solid rgba(255,255,255,.15);
  background: transparent; color: rgba(255,255,255,.6); font-size: .78rem; font-weight: 500;
  cursor: pointer; transition: all .15s;
}
.demo-tone-btn:hover { border-color: #3B82F6; color: #3B82F6; }
.demo-tone-btn.active { border-color: #3B82F6; background: #3B82F6; color: #fff; }

.demo-step-dist {
  position: absolute; top: -.6rem; left: 50%; transform: translateX(-50%);
  background: #3B82F6; color: #fff; font-size: .65rem; padding: .1rem .4rem;
  border-radius: 10px; font-weight: 600;
}
.demo-teaser { text-align: center; margin-top: 1.5rem; color: rgba(255,255,255,.5); font-size: .95rem; }
.demo-teaser a { color: #3B82F6; font-weight: 600; }

/* Bande comparaison styles */
.demo-compare-strip {
  margin-top: 1.25rem; padding: .75rem; border: 1px solid rgba(255,255,255,.08);
  border-radius: var(--fm-radius-sm); background: rgba(255,255,255,.03); text-align: center;
}
.demo-compare-label { font-size: .78rem; color: rgba(255,255,255,.4); text-transform: uppercase; letter-spacing: .04em; display: block; margin-bottom: .5rem; }
.demo-compare-items { display: flex; flex-wrap: wrap; justify-content: center; gap: .4rem; }
.demo-compare-btn {
  display: flex; flex-direction: column; align-items: center;
  padding: .35rem .7rem; border: 1.5px solid rgba(255,255,255,.12); border-radius: var(--fm-radius-sm);
  background: rgba(255,255,255,.04); cursor: pointer; transition: all .15s; min-width: 70px;
}
.demo-compare-btn:hover { border-color: var(--fm-accent); }
.demo-compare-btn.active { border-color: var(--fm-accent); background: var(--fm-accent-soft); }
.demo-compare-name { font-size: .72rem; font-weight: 600; color: rgba(255,255,255,.7); }
.demo-compare-dist { font-size: .9rem; font-weight: 700; color: var(--fm-accent); }

/* Pilules style */
.demo-style-row { display: flex; flex-wrap: wrap; gap: .35rem; align-items: center; justify-content: center; margin-top: .5rem; }
.demo-style-pill {
  padding: .25rem .7rem; font-size: .8rem; background: rgba(255,255,255,.06); color: rgba(255,255,255,.6);
  border: 1.5px solid rgba(255,255,255,.12); border-radius: 20px; cursor: pointer;
  transition: all .15s; font-weight: 500;
}
.demo-style-pill:hover { border-color: #3B82F6; color: #3B82F6; }
.demo-style-pill.active { border-color: #3B82F6; background: #3B82F6; color: #fff; }

/* Bande confiance */
.lp-strip {
  display: flex; justify-content: center; gap: 2.5rem; flex-wrap: wrap;
  padding: 1.5rem 0; text-align: center; color: var(--fm-muted); font-size: .9rem;
}
.lp-strip-item strong { color: var(--fm-black); font-size: 1.3rem; display: block; }

/* Probleme / Solution */
.lp-problem {
  display: grid; grid-template-columns: 1fr 1fr; gap: 3rem;
  padding: 4rem 0; border-top: 1px solid var(--fm-border); border-bottom: 1px solid var(--fm-border);
}
.lp-problem h2 { font-size: 1.4rem; margin-bottom: .75rem; line-height: 1.25; }
.lp-problem p { color: var(--fm-muted); line-height: 1.7; margin-bottom: .75rem; font-size: .95rem; }
.lp-problem a { color: var(--fm-black); font-weight: 600; }

/* Moteur */
.lp-engine { padding: 4rem 0; text-align: center; border-bottom: 1px solid var(--fm-border); }
.lp-engine h2 { font-size: 1.6rem; margin-bottom: .5rem; }
.lp-engine-sub { color: var(--fm-muted); max-width: 520px; margin: 0 auto 2rem; }
.lp-engine-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.25rem; text-align: left; }
.lp-engine-card {
  padding: 1.25rem; border: 1px solid var(--fm-border); border-radius: var(--fm-radius);
  background: var(--fm-surface); transition: border-color .15s, box-shadow .15s; box-shadow: var(--fm-shadow-sm);
}
.lp-engine-card:hover { border-color: rgba(17,17,17,.15); box-shadow: var(--fm-shadow-sm), var(--fm-shadow-md); }
.lp-engine-icon { font-size: 1.4rem; margin-bottom: .3rem; text-align: center; }
.lp-engine-card h3 { font-size: .95rem; margin-bottom: .3rem; }
.lp-engine-card p { font-size: .85rem; color: var(--fm-muted); line-height: 1.6; margin: 0; }

/* Produits (grille landing) */
.lp-products { padding: 4rem 0; text-align: center; border-bottom: 1px solid var(--fm-border); }
.lp-products h2 { font-size: 1.6rem; margin-bottom: .5rem; }
.lp-products-sub { color: var(--fm-muted); margin-bottom: 2rem; }
.lp-product-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1rem; text-align: left; }
.lp-prod-card {
  padding: 1.1rem 1.25rem; border: 1px solid rgba(255,255,255,.1); border-radius: var(--fm-radius);
  background: var(--fm-surface-dark); color: #fff; transition: border-color .15s, background .15s;
}
.lp-prod-card:hover { border-color: rgba(255,255,255,.22); background: #191d26; }
.lp-prod-card h3 { font-size: 1rem; margin-bottom: .25rem; color: #fff; }
.lp-prod-q { font-style: italic; color: rgba(255,255,255,.6); font-size: .85rem; margin-bottom: .3rem; }
.lp-prod-card > p:last-child { font-size: .85rem; color: rgba(255,255,255,.7); line-height: 1.5; margin: 0; }

/* Demande fonctionnalite */
.lp-request { padding: 4rem 0; text-align: center; border-bottom: 1px solid var(--fm-border); }
.lp-request h2 { font-size: 1.5rem; margin-bottom: .75rem; }
.lp-request p { color: var(--fm-muted); max-width: 520px; margin: 0 auto 1.25rem; line-height: 1.7; }
.btn-request {
  display: inline-block; padding: .6rem 1.5rem; background: var(--fm-surface);
  color: var(--fm-black); text-decoration: none; border: 1.5px solid var(--fm-border);
  border-radius: var(--fm-radius); font-weight: 600; transition: all .15s;
}
.btn-request:hover { background: var(--fm-black); color: #fff; border-color: var(--fm-black); }

/* Public cible */
.lp-audience { padding: 4rem 0; text-align: center; border-bottom: 1px solid var(--fm-border); }
.lp-audience h2 { font-size: 1.4rem; margin-bottom: 1.5rem; }
.lp-audience-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; text-align: left; }
.lp-audience-card {
  padding: 1rem 1.1rem; border-left: 3px solid var(--fm-accent); background: var(--fm-surface);
  border-radius: 0 var(--fm-radius-sm) var(--fm-radius-sm) 0;
}
.lp-audience-card h3 { font-size: .9rem; margin-bottom: .25rem; }
.lp-audience-card p { font-size: .85rem; color: var(--fm-muted); line-height: 1.55; margin: 0; }

/* Avant / Apres */
.lp-compare { padding: 4rem 0; text-align: center; border-bottom: 1px solid var(--fm-border); }
.lp-compare > h2 { font-size: 1.4rem; margin-bottom: 1.5rem; }
.lp-compare-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 2rem; text-align: left; }
.lp-compare-col { padding: 1.25rem; border-radius: var(--fm-radius); }
.lp-compare-col h3 { font-size: 1rem; margin-bottom: .75rem; }
.lp-compare-col ul { list-style: none; padding: 0; margin: 0; }
.lp-compare-col li { padding: .35rem 0 .35rem 1.4rem; font-size: .9rem; color: var(--fm-muted); position: relative; }
.lp-compare-before { background: #faf5f5; border: 1px solid #f0e0e0; }
.lp-compare-before li::before { content: "✕"; position: absolute; left: 0; color: #c44; font-weight: 700; }
.lp-compare-after { background: #f5faf5; border: 1px solid #e0f0e0; }
.lp-compare-after li::before { content: "✓"; position: absolute; left: 0; color: #0a0; font-weight: 700; }

/* FAQ landing */
.lp-faq { padding: 4rem 0; border-bottom: 1px solid var(--fm-border); }
.lp-faq h2 { font-size: 1.4rem; margin-bottom: 1rem; }
.lp-faq-item { border-bottom: 1px solid var(--fm-border); }
.lp-faq-q {
  width: 100%; display: flex; justify-content: space-between; align-items: center;
  padding: .8rem 0; font-size: .92rem; font-weight: 600; color: var(--fm-black);
  background: none; border: none; cursor: pointer; text-align: left;
}
.lp-faq-q:hover { color: var(--fm-muted); }
.lp-faq-arrow { font-size: 1.2rem; transition: transform .2s; color: var(--fm-light); }
.lp-faq-open { transform: rotate(90deg); }
.lp-faq-a p { font-size: .88rem; color: var(--fm-muted); line-height: 1.6; margin: 0; padding-bottom: .75rem; }
.lp-faq-a a { color: var(--fm-black); font-weight: 600; }

/* SEO */
.lp-seo { padding: 2rem 0; border-bottom: 1px solid var(--fm-border); }
.lp-seo-block { margin-bottom: 1.5rem; }
.lp-seo-block:last-child { margin-bottom: 0; }
.lp-seo-block h3 { font-size: .95rem; margin-bottom: .4rem; color: var(--fm-dark); }
.lp-seo-block p { font-size: .88rem; color: var(--fm-muted); line-height: 1.65; margin: 0; }

/* Tarifs landing */
.lp-pricing { padding: 4rem 0; text-align: center; border-bottom: 1px solid var(--fm-border); }
.lp-pricing h2 { font-size: 1.6rem; margin-bottom: 1.5rem; }
.lp-price-card {
  max-width: 400px; margin: 0 auto; padding: 2rem;
  border: 1.5px solid var(--fm-border); border-radius: var(--fm-radius-lg);
  background: var(--fm-surface); box-shadow: var(--fm-shadow-sm), var(--fm-shadow-md);
}
.lp-price-amount { margin-bottom: 1.5rem; }
.lp-price-currency { font-size: 1.4rem; vertical-align: super; font-weight: 600; }
.lp-price-number { font-size: 3.5rem; font-weight: 800; letter-spacing: -.03em; }
.lp-price-period { font-size: 1rem; color: var(--fm-muted); }
.lp-price-features { list-style: none; padding: 0; margin: 0 0 1.5rem; text-align: left; }
.lp-price-features li {
  padding: .45rem 0 .45rem 1.4rem; position: relative;
  font-size: .92rem; color: var(--fm-dark); border-bottom: 1px solid var(--fm-border);
}
.lp-price-features li::before { content: "✓"; position: absolute; left: 0; color: #0a0; font-weight: 700; }

/* CTA final */
.lp-final { padding: 3.5rem 0 2rem; text-align: center; }
.lp-final h2 { font-size: 1.8rem; margin-bottom: .75rem; }
.lp-final p { color: var(--fm-muted); max-width: 480px; margin: 0 auto 1.5rem; line-height: 1.7; }
.lp-final-cta { display: flex; flex-direction: column; align-items: center; gap: .5rem; }
.lp-final-login { font-size: .9rem; color: var(--fm-light); }
.lp-final-login a { color: var(--fm-dark); }

/* Nav landing */
.nav-link { font-size: .9rem; color: var(--fm-muted); text-decoration: none; }
.nav-link:hover { color: var(--fm-black); }
.nav-signup { font-size: .9rem; padding: .3rem .8rem; background: var(--fm-black); color: #fff !important; border-radius: var(--fm-radius-sm); text-decoration: none; }
.nav-signup:hover { background: var(--fm-dark); }

/* Landing responsive */
@media (max-width: 700px) {
  .lp-hero { padding: 3.5rem 0 2.5rem; }
  .lp-h1 { font-size: clamp(2.2rem, 8vw, 3rem); white-space: nowrap; }
  .lp-hero-sub { font-size: .95rem; line-height: 1.55; margin-bottom: 1.25rem; }
  .lp-hero-cta { gap: .35rem; }
  .lp-price-hint { font-size: .78rem; }
  .lp-problem { grid-template-columns: 1fr; gap: 2rem; }
  .lp-engine-grid { grid-template-columns: 1fr; }
  .lp-product-grid { grid-template-columns: 1fr; }
  .lp-audience-grid { grid-template-columns: 1fr; }
  .lp-compare-grid { grid-template-columns: 1fr; }
  .lp-strip { gap: 1.5rem; }
  .demo-path { gap: .6rem; }
}

/* ====================================================================
   HUB PRODUIT (page /product/)
   ==================================================================== */

.product-grid { display: flex; flex-wrap: wrap; gap: 1rem; margin-top: 1.5rem; }
.product-card {
  flex: 1 1 260px; max-width: 340px; padding: 1.25rem 1.5rem;
  border: 1px solid rgba(255,255,255,.1); border-radius: var(--fm-radius);
  text-decoration: none; color: #fff; transition: border-color .15s, background .15s;
  position: relative; background: var(--fm-surface-dark);
}
.product-card--featured { border-color: rgba(255,255,255,.25); background: #191d26; }
.card-badge {
  position: absolute; top: -.6rem; right: 1rem;
  background: #3B82F6; color: #fff; font-size: .7rem; font-weight: 600;
  padding: .2rem .6rem; border-radius: var(--fm-radius-sm);
  text-transform: uppercase; letter-spacing: .04em;
}
.product-card:hover { border-color: rgba(255,255,255,.22); background: #191d26; }
.product-card h2 { margin: 0 0 .5rem; font-size: 1.15rem; color: #fff; }
.card-question { font-style: italic; color: rgba(255,255,255,.6); margin: 0 0 .5rem; font-size: .9rem; }
.card-desc { margin: 0; font-size: .88rem; color: rgba(255,255,255,.7); line-height: 1.4; }
.product-card-spacer { flex: 1 1 260px; max-width: 340px; padding: 0; border: none; pointer-events: none; }

/* ====================================================================
   CONTENEUR PRODUIT SOMBRE (ex product-cards.css)
   ==================================================================== */

.product-dark {
  background: var(--fm-surface-dark); color: #fff;
  padding: 2.5rem 2rem; margin: -1rem -1.5rem 0;
  border-radius: var(--fm-radius-lg); min-height: calc(100vh - 64px);
}
.product-dark h1 { color: #fff; }

/* Controles sombres */
.product-dark .input-group { display: flex; gap: .5rem; margin-bottom: .75rem; }
.product-dark .chord-input {
  flex: 1; font-size: 1.15rem; padding: .6rem .85rem;
  border: 1.5px solid rgba(255,255,255,.15); border-radius: var(--fm-radius-sm);
  font-family: 'Courier New', monospace; background: rgba(255,255,255,.06); color: #fff;
}
.product-dark .chord-input:focus { outline: none; border-color: var(--fm-accent); }
.product-dark .chord-input::placeholder { color: rgba(255,255,255,.3); }
.product-dark .option-row { display: flex; gap: 1rem; flex-wrap: wrap; align-items: center; }
.product-dark .option-row label { display: flex; align-items: center; gap: .4rem; font-size: .9rem; color: rgba(255,255,255,.7); }
.product-dark .option-row select { padding: .3rem .5rem; border: 1px solid rgba(255,255,255,.15); border-radius: var(--fm-radius-sm); background: #1a1e27; color: #fff; }
.product-dark .option-row select option { background: #1a1e27; color: #fff; }
.product-dark .checkbox-label { cursor: pointer; }
.product-dark .btn-primary { padding: .6rem 1.4rem; background: #3B82F6; color: #fff; border: none; border-radius: var(--fm-radius-sm); font-size: 1rem; cursor: pointer; font-weight: 600; }
.product-dark .btn-primary:hover { background: #2563EB; }
.product-dark .btn-primary:disabled { opacity: .5; cursor: not-allowed; }
.product-dark .btn-secondary { padding: .35rem .7rem; background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.15); border-radius: var(--fm-radius-sm); font-size: .8rem; cursor: pointer; color: #fff; }
.product-dark .btn-secondary:hover { background: rgba(255,255,255,.15); }
.product-dark .btn-secondary:disabled { opacity: .5; cursor: default; }

/* Erreur (fond sombre) */
.product-error {
  margin: 1rem 0; padding: .75rem;
  background: rgba(255,80,80,.12); border: 1px solid rgba(255,80,80,.25);
  border-radius: var(--fm-radius-sm); color: #fbb;
}

/* Chips accent (fond sombre) */
.product-dark .chip { padding: .25rem .65rem; background: rgba(29,190,155,.12); border: 1px solid rgba(29,190,155,.4); border-radius: 20px; font-size: .85rem; cursor: pointer; color: var(--fm-accent); }
.product-dark .chip:hover { background: rgba(29,190,155,.22); }

/* Flux etapes / cartes accords */
.step-flow { display: flex; gap: .5rem; overflow-x: auto; padding: .75rem 0 .5rem; justify-content: center; }
.step-card {
  border: 1px solid var(--fm-border); border-radius: var(--fm-radius-sm);
  padding: .75rem; text-align: center; background: var(--fm-surface-muted);
  min-width: 110px; flex-shrink: 0; box-shadow: var(--fm-shadow-sm); position: relative;
}
.step-card.hardest { border-color: rgba(255,193,7,.5); background: #fffdf5; }
.step-chord { font-weight: 700; font-size: 1.1rem; margin-bottom: .4rem; color: var(--fm-black); }
.step-distance { font-size: .75rem; color: var(--fm-light); margin-top: .3rem; }
.step-dist {
  position: absolute; top: -.6rem; left: 50%; transform: translateX(-50%);
  background: #3B82F6; color: #fff; font-size: .65rem; padding: .1rem .4rem;
  border-radius: 10px; font-weight: 600;
}

/* Diagramme (dark) */
.product-dark .diagram-svg { max-width: 140px; }

/* Bouton play */
.play-btn {
  display: inline-flex; align-items: center; justify-content: center;
  width: 22px; height: 22px; margin-top: 5px;
  background: none; color: var(--fm-dark); border: 1.5px solid rgba(17,17,17,.25); border-radius: 50%;
  cursor: pointer; transition: border-color .15s, color .15s, background .15s;
  font-size: 8px; line-height: 1; padding: 0 0 0 1.5px;
}
.play-btn:hover { background: var(--fm-black); border-color: var(--fm-black); color: #fff; }

/* Utilitaires produit */
.product-dark .subtitle { color: rgba(255,255,255,.55); margin-bottom: 1.5rem; }
.product-dark .controls { margin-bottom: 1rem; }
.product-dark .info-strip { margin-bottom: 1rem; display: flex; flex-wrap: wrap; gap: .4rem; align-items: center; }
.product-dark .info-strip strong { color: rgba(255,255,255,.75); }

/* Bande scores */
.product-dark .score-strip {
  display: flex; justify-content: center; gap: 2rem;
  padding: 1rem 0; margin-bottom: 1.5rem;
  border-top: 1px solid rgba(255,255,255,.08); border-bottom: 1px solid rgba(255,255,255,.08);
}
.product-dark .score-item { text-align: center; }
.product-dark .score-val { font-size: 1.6rem; font-weight: 700; color: #fff; }
.product-dark .score-lbl { font-size: .75rem; color: rgba(255,255,255,.45); text-transform: uppercase; letter-spacing: .05em; }
.product-dark .score-highlight .score-val { color: #3B82F6; }

/* Badge alerte */
.product-dark .alert-badge {
  display: inline-flex; align-items: center; gap: .3rem;
  background: rgba(255,193,7,.15); color: #ffc107;
  padding: .25rem .7rem; border-radius: 20px; font-size: .82rem; font-weight: 600;
}

/* Cartes accords unifiees (fond sombre) ------------------------------ */
.product-dark .voicing-card,
.product-dark .degree-card,
.product-dark .alt-card,
.product-dark .known-card,
.product-dark .drill-card,
.product-dark .sugg-card { background: var(--fm-surface-muted); border-color: rgba(17,17,17,.06); }
.product-dark .match-row { background: rgba(255,255,255,.06); color: rgba(255,255,255,.8); }
.product-dark .match-pct { color: rgba(255,255,255,.45); }

/* Sections englobantes */
.product-dark .degree-section,
.product-dark .style-section { background: rgba(255,255,255,.04); border-color: rgba(255,255,255,.1); }
.product-dark .edit-panel { background: rgba(29,190,155,.08); border-color: rgba(29,190,155,.2); }

/* Titres et texte hors cartes */
.product-dark h2,
.product-dark h3 { color: #fff; }
.product-dark .scale-notes,
.product-dark .fb-notes,
.product-dark .chords-echo { color: rgba(255,255,255,.5); }
.product-dark .hl-progression { background: rgba(29,190,155,.12); color: rgba(255,255,255,.8); }
.product-dark .hl-progression strong { color: #fff; }
.product-dark .key-display { color: #fff; }
.product-dark .other-matches h3 { color: rgba(255,255,255,.5); }

/* Singer Adapter */
.product-dark .summary-item .label { color: rgba(255,255,255,.5); }
.product-dark .summary-item .value { color: #fff; }
.product-dark .capo-options h3,
.product-dark .progression h3 { color: rgba(255,255,255,.5); }
.product-dark .orig-label { color: rgba(255,255,255,.45); }

/* Reharmonizer */
.product-dark .numeral { color: #fff; }
.product-dark .chord-name { color: rgba(255,255,255,.6); }
.product-dark .alternatives h4 { color: rgba(255,255,255,.5); }
.product-dark .alt-kind { background: rgba(255,255,255,.08); color: rgba(255,255,255,.5); }

/* Style Explorer */
.product-dark .best-badge { background: rgba(29,190,155,.15); color: var(--fm-accent); }

/* Progression Generator */
.product-dark .edit-panel h3 { color: #fff; }
.product-dark .sub-label { color: rgba(255,255,255,.5); }
.product-dark .edit-loading { color: rgba(255,255,255,.5); }
.product-dark .chip-kind { color: rgba(255,255,255,.45); }
.product-dark .numeral-label { color: rgba(255,255,255,.45); }

/* Practice Builder */
.product-dark .pb-controls label { color: rgba(255,255,255,.7); }
.product-dark .pb-controls select { background: #1a1e27; color: #fff; border-color: rgba(255,255,255,.15); }
.product-dark .pb-table th { background: rgba(255,255,255,.06); color: rgba(255,255,255,.7); border-color: rgba(255,255,255,.08); }
.product-dark .pb-table td { color: rgba(255,255,255,.8); border-color: rgba(255,255,255,.08); }
.product-dark .hard-row { background: rgba(255,80,80,.08); }
.product-dark .drill-header { color: rgba(255,255,255,.8); }
.product-dark .drill-dist { color: rgba(255,255,255,.45); }
.product-dark .diag-label { color: rgba(255,255,255,.7); }
.product-dark .sugg-dist { color: rgba(255,255,255,.45); }

/* Chord X-Ray (reverse) */
.product-dark .fret-label { color: rgba(255,255,255,.5); }
.product-dark .fret-single { background: rgba(255,255,255,.06); color: #fff; border-color: rgba(255,255,255,.15); }
.product-dark .no-match { color: rgba(255,255,255,.4); }

/* ====================================================================
   OUTIL : Song Workshop
   ==================================================================== */

.sw-tone-row { display: flex; align-items: center; gap: .4rem; margin-bottom: 1rem; }
.sw-tone-label { font-size: .75rem; color: rgba(255,255,255,.4); text-transform: uppercase; letter-spacing: .04em; margin-right: .1rem; }
.sw-tone-btn {
  padding: .2rem .65rem; border-radius: 20px; border: 1.5px solid rgba(255,255,255,.15);
  background: transparent; color: rgba(255,255,255,.6); font-size: .78rem; font-weight: 500;
  cursor: pointer; transition: all .15s;
}
.sw-tone-btn:hover { border-color: #3B82F6; color: #3B82F6; }
.sw-tone-btn.active { border-color: #3B82F6; background: #3B82F6; color: #fff; }

/* ====================================================================
   OUTIL : Fifth Circle
   ==================================================================== */

.fc-controls { margin-bottom: 1.5rem; }

/* Disposition */
.fc-layout { display: flex; gap: 2rem; align-items: flex-start; flex-wrap: wrap; }
.fc-circle-wrap { flex: 0 0 auto; max-width: 420px; width: 100%; }
.fc-svg-container { width: 100%; }
.fc-svg { width: 100%; height: auto; border-radius: var(--fm-radius-lg); }
.fc-scale-notes { text-align: center; margin-top: .5rem; font-family: 'Courier New', monospace; color: rgba(255,255,255,.55); font-size: .85rem; }
.fc-panel { flex: 1 1 260px; min-width: 220px; }

/* Progression */
.fc-progression {
  padding: 1rem; background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.12); border-radius: var(--fm-radius);
}
.fc-progression strong { display: block; margin-bottom: .5rem; color: #fff; }
.fc-prog-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: .5rem; }
.fc-prog-header strong { margin-bottom: 0; }
.btn-icon { background: none; border: none; color: #fff; font-size: 1.3rem; cursor: pointer; padding: .2rem .4rem; border-radius: var(--fm-radius-sm); }
.btn-icon:hover { background: rgba(255,255,255,.1); }
.fc-tone-switcher { display: inline-flex; align-items: center; gap: .3rem; }
.fc-tone-btn {
  padding: .15rem .55rem; border-radius: 20px; border: 1.5px solid rgba(255,255,255,.15);
  background: transparent; color: rgba(255,255,255,.6); font-size: .72rem; font-weight: 500;
  cursor: pointer; transition: all .15s;
}
.fc-tone-btn:hover { border-color: #3B82F6; color: #3B82F6; }
.fc-tone-btn.active { border-color: #3B82F6; background: #3B82F6; color: #fff; }
.fc-prog-flow { justify-content: flex-start; flex-wrap: wrap; padding: .5rem 0; margin-bottom: .75rem; }
.fc-step-actions { display: flex; justify-content: center; gap: .4rem; margin-top: .3rem; }
.fc-remove-btn {
  font-size: 1rem; padding: .05rem .35rem;
  background: rgba(255,80,80,.1); border: 1px solid rgba(255,80,80,.25);
  border-radius: var(--fm-radius-sm); color: #f88; cursor: pointer; line-height: 1;
}
.fc-remove-btn:hover { background: rgba(255,80,80,.25); }
.fc-prog-hint { color: rgba(255,255,255,.4); font-size: .85rem; margin: 0; }
.fc-prog-actions { display: flex; gap: .5rem; flex-wrap: wrap; }

@media (max-width: 700px) {
  .fc-layout { flex-direction: column; align-items: center; }
  .fc-panel { width: 100%; }
}

/* ====================================================================
   OUTIL : Chord X-Ray
   ==================================================================== */

.xray-controls { margin-bottom: 1rem; }

/* Mode inverse */
.reverse-toggle { margin: 1rem 0; }
.reverse-input { margin-top: 1rem; }
.reverse-help { margin-bottom: .5rem; color: var(--fm-muted); font-size: .9rem; }
.fret-inputs { display: flex; gap: .5rem; margin-bottom: .75rem; }
.fret-label { display: flex; flex-direction: column; align-items: center; font-size: .8rem; color: var(--fm-muted); }
.fret-single {
  width: 2.5rem; text-align: center; font-size: 1rem;
  padding: .3rem; border: 1px solid var(--fm-border); border-radius: var(--fm-radius-sm);
  font-family: 'Courier New', monospace;
}
.reverse-results { margin-top: 1rem; }
.match-chips { display: flex; flex-wrap: wrap; gap: .4rem; margin-top: .5rem; }
.no-match { color: var(--fm-light); font-style: italic; }

/* Badges type */
.type-open .voicing-badge { background: #d4edda; color: #155724; }
.type-barre .voicing-badge { background: #fff3cd; color: #856404; }
.type-movable .voicing-badge { background: #d1ecf1; color: #0c5460; }
.type-shell .voicing-badge { background: #e2d6f3; color: #4a235a; }
.type-partial .voicing-badge { background: var(--fm-bg-alt); color: var(--fm-muted); }

/* ====================================================================
   OUTIL : Harmony Lab
   ==================================================================== */

.hl-controls { margin-bottom: 1.5rem; }
.hl-header { margin-bottom: 1rem; }
.hl-header h2 { display: inline-block; margin-right: .75rem; }
.scale-notes { font-family: 'Courier New', monospace; color: var(--fm-muted); font-size: .9rem; }
.hl-progression {
  margin-bottom: 1rem; padding: .5rem .75rem;
  background: var(--fm-accent-soft); border-radius: var(--fm-radius-sm); font-size: .95rem;
}
.degree-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); gap: .75rem; }
.degree-card {
  border: 1.5px solid var(--fm-border); border-radius: var(--fm-radius); padding: .75rem;
  text-align: center; background: var(--fm-surface); cursor: pointer;
  transition: all .15s; box-shadow: var(--fm-shadow-sm);
}
.degree-card:hover { border-color: rgba(17,17,17,.15); }
.degree-card.selected { border-color: var(--fm-accent); background: var(--fm-accent-soft); }
.degree-numeral { font-size: 1.2rem; font-weight: 700; margin-bottom: .2rem; color: var(--fm-dark); }
.degree-chord { font-size: 1rem; font-weight: 600; }
.degree-quality { font-size: .7rem; color: var(--fm-light); text-transform: uppercase; margin-bottom: .3rem; }

/* ====================================================================
   OUTIL : Fretboard Map
   ==================================================================== */

.fb-controls { margin-bottom: 1rem; }
.fb-header { margin-bottom: .75rem; }
.fb-header h2 { display: inline-block; margin-right: .75rem; }
.fb-notes { font-family: 'Courier New', monospace; color: var(--fm-muted); font-size: .9rem; }
.fb-neck { overflow-x: auto; }
.fretboard-svg { width: 100%; min-width: 600px; height: auto; }

/* ====================================================================
   OUTIL : Key Detector
   ==================================================================== */

.chords-echo { margin-bottom: 1rem; color: var(--fm-muted); }
.top-match { margin-bottom: 1.5rem; }
.top-match h2 { display: inline; font-size: 1.8rem; margin-right: .75rem; text-transform: capitalize; }
.other-matches h3 { font-size: 1rem; margin-bottom: .5rem; color: var(--fm-muted); }
.match-list { display: flex; flex-direction: column; gap: .3rem; }
.match-row {
  display: flex; align-items: center; gap: .5rem;
  padding: .4rem .6rem; background: var(--fm-bg-alt);
  border-radius: var(--fm-radius-sm); font-size: .9rem;
}
.match-key { text-transform: capitalize; }
.match-pct { color: var(--fm-light); }
.match-degrees { margin-top: .4rem; color: var(--fm-muted); font-style: italic; font-size: 1rem; }
.match-degrees-sm { color: var(--fm-muted); font-style: italic; font-size: .8rem; margin-left: auto; padding-left: .5rem; }

/* ====================================================================
   OUTIL : Practice Builder
   ==================================================================== */

.pb-controls { display: flex; gap: 1rem; align-items: center; flex-wrap: wrap; margin-bottom: 1.5rem; }
.pb-controls label { display: flex; align-items: center; gap: .4rem; font-size: .9rem; }
.pb-controls select { padding: .35rem .5rem; border: 1px solid var(--fm-border); border-radius: var(--fm-radius-sm); }

.known-chords { margin-bottom: 1.5rem; }
.known-row { display: flex; gap: .75rem; flex-wrap: wrap; }
.known-card { border: 1px solid var(--fm-border); border-radius: var(--fm-radius-sm); padding: .5rem .75rem; text-align: center; min-width: 70px; }
.known-name { font-weight: 600; font-size: .95rem; margin-bottom: .2rem; }
.known-tab { font-family: 'Courier New', monospace; font-size: .8rem; color: var(--fm-muted); }

.pb-table { width: 100%; border-collapse: collapse; margin-bottom: 1.5rem; }
.pb-table th, .pb-table td { text-align: left; padding: .45rem .6rem; border-bottom: 1px solid var(--fm-border); font-size: .9rem; }
.pb-table th { background: var(--fm-bg-alt); }
.hard-row { background: #fff5f5; }
.dist-bar { display: inline-block; height: 6px; background: #e63946; border-radius: 3px; vertical-align: middle; margin-right: .4rem; }

.pb-section { margin-top: 2rem; }

.drill-cards { display: flex; flex-direction: column; gap: 1rem; }
.drill-card { border: 1px solid var(--fm-border); border-radius: var(--fm-radius-sm); padding: 1rem; }
.drill-header { font-weight: 600; margin-bottom: .5rem; display: flex; align-items: center; gap: .5rem; }
.drill-num { display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 22px; border-radius: 50%; background: var(--fm-black); color: #fff; font-size: .75rem; }
.drill-dist { font-size: .75rem; color: var(--fm-light); margin-left: auto; }
.drill-diagrams { display: flex; gap: 2rem; }
.diag-label { text-align: center; font-weight: 600; font-size: .85rem; margin-bottom: .25rem; }

.sugg-cards { display: flex; gap: 1rem; flex-wrap: wrap; }
.sugg-card { border: 1px solid var(--fm-border); border-radius: var(--fm-radius-sm); padding: .75rem; text-align: center; min-width: 100px; }
.sugg-name { font-weight: 600; margin-bottom: .5rem; }
.sugg-dist { font-size: .75rem; color: var(--fm-light); margin-top: .25rem; }

/* ====================================================================
   OUTIL : Singer Adapter
   ==================================================================== */

.summary-item { display: flex; flex-direction: column; }
.summary-item .label { font-size: .8rem; color: var(--fm-light); text-transform: uppercase; letter-spacing: .05em; }
.summary-item .value { font-size: 1.2rem; font-weight: 600; }

.capo-options { margin-bottom: 1.5rem; }
.capo-options h3 { font-size: 1rem; margin-bottom: .5rem; color: var(--fm-muted); }
.capo-chips { display: flex; gap: .4rem; flex-wrap: wrap; }
.progression h3 { font-size: 1rem; margin-bottom: .75rem; color: var(--fm-muted); }
.orig-label { font-size: .75rem; color: var(--fm-light); margin-bottom: .4rem; }

/* ====================================================================
   OUTIL : Reharmonizer
   ==================================================================== */

.key-display { font-size: 1.2rem; font-weight: 600; margin-bottom: 1.5rem; text-transform: capitalize; }
.degree-section {
  margin-bottom: 2rem; padding: 1rem;
  border: 1px solid var(--fm-border); border-radius: var(--fm-radius);
  background: var(--fm-surface); box-shadow: var(--fm-shadow-sm);
}
.degree-header { margin-bottom: .75rem; }
.numeral { font-size: 1.3rem; font-weight: 700; margin-right: .75rem; }
.chord-name { font-size: 1.1rem; color: var(--fm-muted); }
.original-voicing { display: inline-block; text-align: center; margin-bottom: .75rem; }
.alternatives h4 { font-size: .9rem; color: var(--fm-light); margin-bottom: .5rem; }
.alt-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: .75rem; }
.alt-card {
  border: 1px solid var(--fm-border); border-radius: var(--fm-radius-sm);
  padding: .6rem; text-align: center; background: var(--fm-surface);
}
.alt-card:hover { box-shadow: var(--fm-shadow-sm), var(--fm-shadow-md); }
.alt-kind {
  display: inline-block; font-size: .65rem; padding: .1rem .4rem;
  border-radius: 6px; background: var(--fm-bg-alt); color: var(--fm-muted);
  text-transform: uppercase; letter-spacing: .03em; margin-bottom: .3rem;
}
.alt-chord { font-weight: 600; font-size: 1rem; margin-bottom: .3rem; }

/* ====================================================================
   OUTIL : Style Explorer
   ==================================================================== */

.style-sections { display: flex; flex-direction: column; gap: 2rem; }
.style-section {
  border: 1px solid var(--fm-border); border-radius: var(--fm-radius);
  padding: 1.25rem; background: var(--fm-surface); box-shadow: var(--fm-shadow-sm);
}
.style-header { display: flex; align-items: center; gap: 1rem; margin-bottom: 1rem; }
.best-badge { padding: .2rem .6rem; background: #d4edda; color: #155724; border-radius: 12px; font-size: .75rem; font-weight: 600; }

/* ====================================================================
   OUTIL : Progression Generator
   ==================================================================== */

.card-selected { border-color: var(--fm-accent); box-shadow: 0 0 0 2px var(--fm-accent-soft); }
.numeral-label { font-size: .75rem; color: var(--fm-light); margin-bottom: .15rem; text-transform: none; }

/* Panneau edition */
.edit-panel {
  margin-top: 1.5rem; border: 1px solid var(--fm-border); border-radius: var(--fm-radius);
  padding: 1.25rem; background: var(--fm-accent-soft);
}
.edit-panel h3 { margin: 0 0 .75rem; font-size: 1.05rem; }
.edit-actions { display: flex; gap: .5rem; margin-bottom: 1rem; }
.sub-label { font-size: .85rem; color: var(--fm-muted); margin: 0 0 .5rem; }
.sub-chips { display: flex; flex-wrap: wrap; gap: .4rem; }
.chip-kind { font-size: .65rem; color: var(--fm-light); }
.edit-loading { font-size: .85rem; color: var(--fm-light); }

/* ====================================================================
   PAGE LEGALE (cookies, mentions)
   ==================================================================== */

.legal-page { max-width: 700px; margin: 2rem auto; }
.legal-page h1 { margin-bottom: 1rem; }
.legal-page h2 { margin-top: 1.5rem; }
.cookie-table { width: 100%; border-collapse: collapse; margin: 1rem 0; font-size: .9rem; }
.cookie-table th, .cookie-table td { text-align: left; padding: .5rem .75rem; border-bottom: 1px solid var(--fm-border); }
.cookie-table th { font-weight: 600; color: var(--fm-muted); font-size: .8rem; text-transform: uppercase; letter-spacing: .04em; }
.legal-updated { margin-top: 2rem; color: var(--fm-light); font-size: .85rem; }
.legal-note { margin-top: .5rem; font-size: .8rem; color: var(--fm-light); }
.legal-note a { color: var(--fm-light); text-decoration: underline; }
.legal-note a:hover { color: var(--fm-text); }

/* ====================================================================
   MOBILE RESPONSIVE (< 640px)
   ==================================================================== */

@media (max-width: 640px) {
  /* Product dark container — reduce negative margins to match body padding */
  .product-dark {
    margin-left: -.75rem;
    margin-right: -.75rem;
    padding: 1.5rem 1rem;
  }

  /* Landing demo — same negative-margin fix */
  .lp-demo {
    margin-left: -.75rem;
    margin-right: -.75rem;
    padding: 2rem 1rem;
  }

  /* Product dark input row — stack on mobile */
  .product-dark .input-group {
    flex-direction: column;
    align-items: stretch;
  }

  /* Demo input row (landing) — stack on mobile */
  .demo-input-row {
    flex-wrap: wrap;
  }
  .demo-input {
    width: 100%;
  }

  /* Score strips — tighter gap, stay on one line */
  .demo-score-strip,
  .product-dark .score-strip {
    gap: .75rem;
  }
  .demo-score-val,
  .product-dark .score-val {
    font-size: 1.3rem;
  }
  .demo-score-lbl,
  .product-dark .score-lbl {
    font-size: .65rem;
  }

  /* Practice builder drill diagrams — wrap */
  .drill-diagrams {
    flex-wrap: wrap;
    gap: 1rem;
    justify-content: center;
  }

  /* Practice builder table — horizontal scroll */
  .pb-table {
    display: block;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  /* Fifth circle progression header — wrap controls */
  .fc-prog-header {
    flex-wrap: wrap;
    gap: .5rem;
  }

  /* Style header — wrap on narrow screens */
  .style-header {
    flex-wrap: wrap;
  }

  /* BPM slider — wider touch target on mobile */
  .demo-bpm-slider {
    width: 100px;
  }

  /* Cookie table — horizontal scroll if needed */
  .cookie-table {
    display: block;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  /* Demo path — tighter gap on mobile */
  .demo-path {
    gap: .4rem;
  }

  /* Touch target padding — invisible hit area expansion */
  .demo-pos-btn,
  .demo-play-btn {
    position: relative;
  }
  .demo-pos-btn::before,
  .demo-play-btn::before {
    content: '';
    position: absolute;
    inset: -8px;
  }

  /* Option rows — tighter gap on mobile */
  .product-dark .option-row {
    gap: .5rem .75rem;
  }

  /* Fret inputs (chord x-ray reverse) — tighter */
  .fret-inputs {
    gap: .25rem;
  }
  .fret-single {
    width: 2rem;
    padding: .25rem;
    font-size: .9rem;
  }
}