:root {
  --notalix-navy: #0b2b66;
  --notalix-blue: #1769c2;
  --notalix-coral: #ff6758;
  --notalix-gold: #ffb52e;
  --notalix-green: #2da867;
  --notalix-ink: #23364a;
  --notalix-muted: #66758a;
  --notalix-bg: #eef5f8;
  --notalix-line: #d7e3ec;
  --notalix-surface: #ffffff;
  --notalix-shadow: 0 12px 32px rgba(11, 43, 102, .10);
}

* { box-sizing: border-box; }

html { min-height: 100%; background: var(--notalix-bg); }

body {
  min-height: 100%;
  margin: 0 !important;
  padding: 18px 12px 44px !important;
  background:
    radial-gradient(circle at 12% 0, rgba(255,181,46,.14), transparent 25rem),
    radial-gradient(circle at 90% 8%, rgba(23,105,194,.10), transparent 28rem),
    var(--notalix-bg) !important;
  color: var(--notalix-ink) !important;
  font-family: "Segoe UI", Roboto, Arial, sans-serif !important;
}

.notalix-bar {
  width: min(1040px, 100%);
  min-height: 68px;
  margin: 0 auto 18px;
  padding: 10px 12px;
  display: grid;
  grid-template-columns: minmax(150px,1fr) auto minmax(150px,1fr);
  align-items: center;
  gap: 12px;
  border: 1px solid var(--notalix-line);
  border-radius: 18px;
  background: rgba(255,255,255,.94);
  box-shadow: 0 7px 22px rgba(11,43,102,.08);
}

.notalix-home,
.notalix-site {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  width: max-content;
  padding: 9px 12px;
  border: 1px solid #c7d9e8;
  border-radius: 11px;
  background: #f7fbfe;
  color: var(--notalix-navy);
  font-size: 14px;
  font-weight: 750;
  line-height: 1.2;
  text-decoration: none;
}

.notalix-site { justify-self: end; }
.notalix-home:hover,.notalix-site:hover { background: #e9f3fb; border-color: #9ec3df; }

.notalix-brand { display: flex; align-items: center; gap: 9px; justify-self: center; white-space: nowrap; }
.notalix-note { color: var(--notalix-coral); font-size: 30px; line-height: 1; }
.notalix-word { color: var(--notalix-navy); font-size: 22px; font-weight: 850; letter-spacing: .035em; }
.notalix-by { color: var(--notalix-blue); font-size: 13px; font-style: italic; font-weight: 750; }
.notalix-module { padding-left: 11px; border-left: 1px solid var(--notalix-line); color: var(--notalix-muted); font-size: 16px; font-weight: 750; }

body > main,
body > .container {
  width: min(940px, 100%) !important;
  max-width: 940px !important;
  margin: 0 auto !important;
}

body > h1 {
  width: min(940px,100%);
  margin: 8px auto 16px !important;
  text-align: center;
}

h1,h2,h3,h4 { color: var(--notalix-ink); }
h1 { color: var(--notalix-navy) !important; letter-spacing: -.025em; }
h1::before {
  content: "♪ " !important;
  color: var(--notalix-coral) !important;
  font-family: "Segoe UI Symbol", sans-serif !important;
  font-style: normal !important;
}
p { line-height: 1.55; }

.section,
.container {
  border: 1px solid var(--notalix-line) !important;
  border-radius: 20px !important;
  background: var(--notalix-surface) !important;
  box-shadow: var(--notalix-shadow) !important;
}

button,
.button {
  min-height: 44px;
  border: 0 !important;
  border-radius: 11px !important;
  background: var(--notalix-blue);
  color: #fff;
  font-family: inherit !important;
  font-weight: 750 !important;
  box-shadow: 0 4px 10px rgba(11,43,102,.12);
}

button:hover,.button:hover { filter: brightness(.96); transform: translateY(-1px); }
button:focus-visible,.button:focus-visible,a:focus-visible { outline: 3px solid rgba(255,181,46,.65); outline-offset: 2px; }
button.red,.red,#start-game { background: var(--notalix-coral) !important; }
button.secondary,.secondary,.small { background: #eef4f8 !important; color: var(--notalix-navy) !important; border: 1px solid #cbdce8 !important; }

.mode-card,.interval-card,.niveau-card,.defi-card,.tile,.card,.tutorial-card,.result-card,.home-block,.choice-group,.custom-choice {
  border-radius: 15px !important;
  border-color: var(--notalix-line) !important;
  box-shadow: 0 5px 15px rgba(11,43,102,.06) !important;
}

.mode-card.selected,.interval-card.selected,.tile.selected,
.tabs button.selected,.tuto-nav button.selected {
  border-color: var(--notalix-blue) !important;
  background: var(--notalix-blue) !important;
  color: #fff !important;
}
.mode-card.selected h2,.mode-card.selected h3,.mode-card.selected p,.mode-card.selected small,
.interval-card.selected h2,.interval-card.selected h3,.interval-card.selected p {
  color: #fff !important;
}

.progress span,#progress-bar { background: var(--notalix-coral) !important; }
.ok { color: #187749 !important; }
.ko { color: #bc3e34 !important; }

@media (max-width: 720px) {
  body { padding: 9px 7px 30px !important; }
  .notalix-bar { grid-template-columns: 1fr auto; border-radius: 14px; }
  .notalix-brand { grid-column: 1 / -1; grid-row: 1; }
  .notalix-home { grid-column: 1; grid-row: 2; }
  .notalix-site { grid-column: 2; grid-row: 2; }
  .notalix-module { display: none; }
  .section,.container { border-radius: 16px !important; }
}

@media (max-width: 430px) {
  .notalix-home,.notalix-site { padding: 8px 9px; font-size: 12px; }
  .notalix-word { font-size: 20px; }
}

@media (max-width: 560px) {
  .notalix-bar { min-height: 0; margin-bottom: 9px; padding: 8px; gap: 7px; }
  .notalix-brand { min-width: 0; white-space: normal; }
  .notalix-note { font-size: 24px; }
  .notalix-word { font-size: clamp(16px, 5vw, 20px); line-height: 1.05; }
  .notalix-by { font-size: 11px; }
  .notalix-home,.notalix-site { max-width: 46vw; min-height: 42px; line-height: 1.15; }
}

@media (orientation: landscape) and (max-height: 720px) {
  body { padding-top: 6px !important; padding-bottom: 16px !important; }
  .notalix-bar { min-height: 52px; margin-bottom: 7px; padding-block: 6px; }
  .notalix-note { font-size: 24px; }
  .notalix-word { font-size: 18px; }
  .notalix-home,.notalix-site { min-height: 38px; padding-block: 6px; }
}

/* V2 — mise en page réellement adaptée aux écrans d’ordinateur */
@media (min-width: 1100px) {
  body {
    padding: 18px 24px 48px !important;
  }

  .notalix-bar {
    width: min(1480px, calc(100vw - 64px));
    min-height: 72px;
    padding: 11px 16px;
  }

  body > main,
  body > .container,
  body > h1 {
    width: min(1280px, calc(100vw - 96px)) !important;
    max-width: 1280px !important;
  }

  body > h1,
  body > main > h1 {
    margin-top: 12px !important;
    margin-bottom: 18px !important;
  }

  .section,
  .container {
    padding: 26px 30px !important;
  }

  /* Lecture de notes : cinq niveaux sur une ligne et grands choix lisibles */
  .notalix-module-lecture-notes .section {
    width: 100% !important;
    max-width: 1180px !important;
  }

  .notalix-module-lecture-notes #niveaux {
    grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
    gap: 14px !important;
  }

  .notalix-module-lecture-notes #niveaux .niveau-card,
  .notalix-module-lecture-notes #defi-cles .defi-card {
    width: 100% !important;
    max-width: none !important;
    min-height: 94px;
    margin: 0 !important;
    display: flex;
    flex-direction: column;
    justify-content: center;
  }

  .notalix-module-lecture-notes #niveaux .niveau-card:last-child {
    grid-column: auto !important;
    justify-self: stretch !important;
  }

  .notalix-module-lecture-notes #defi-cles {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  }

  .notalix-module-lecture-notes .families-row,
  .notalix-module-lecture-notes .subfamilies-row,
  .notalix-module-lecture-notes .instruments-row,
  .notalix-module-lecture-notes .levels-row {
    max-width: none !important;
  }

  /* Intervalles : véritable plateau large */
  .notalix-module-intervalles > .container {
    max-width: 1240px !important;
  }

  .notalix-module-intervalles .mode-selection {
    gap: 20px;
  }

  .notalix-module-intervalles .mode-card {
    width: 50% !important;
    min-height: 160px;
    display: flex;
    flex-direction: column;
    justify-content: center;
  }

  .notalix-module-intervalles .interval-grid {
    grid-template-columns: repeat(6, minmax(0, 1fr)) !important;
  }

  .notalix-module-intervalles #game-container {
    padding: 28px 34px !important;
  }

  .notalix-module-intervalles #interval-options button {
    min-width: 180px;
  }

  /* Tonalités : quatre familles en grille 2 × 2 */
  .notalix-module-tonalites .home-groups {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-items: stretch;
    max-width: none !important;
    gap: 18px !important;
  }

  .notalix-module-tonalites .home-block {
    min-height: 150px;
    display: flex;
    flex-direction: column;
    justify-content: center;
  }

  .notalix-module-tonalites .home-block .mode-grid,
  .notalix-module-tonalites .mode-grid {
    width: 100%;
    max-width: none !important;
  }

  .notalix-module-tonalites .tutorial-card,
  .notalix-module-tonalites .card,
  .notalix-module-tonalites .result-card {
    width: min(1040px, 100%);
    max-width: 1040px !important;
  }

  .notalix-module-tonalites .answers {
    width: min(820px, 100%);
    max-width: 820px !important;
  }

  /* Accords : plus d’air sans étirer inutilement les éléments musicaux */
  .notalix-module-accords > main {
    max-width: 1200px !important;
  }

  .notalix-module-accords .section {
    padding-left: 30px !important;
    padding-right: 30px !important;
  }

  .notalix-module-accords main:has(#game.show) {
    max-width: 1080px !important;
  }

  .notalix-module-accords #game .hud,
  .notalix-module-accords #game .answers,
  .notalix-module-accords #game .feedback,
  .notalix-module-accords #game .visual-answer {
    max-width: 820px !important;
  }
}

/* Réponses identiques dans les exercices d’écoute */
.answers button,
.notalix-module-intervalles #interval-options button {
  background: #fff !important;
  color: var(--notalix-navy) !important;
  border: 2px solid #a9c9e2 !important;
}

.answers button:hover:not(:disabled),
.notalix-module-intervalles #interval-options button:hover:not(:disabled) {
  background: #eaf4fc !important;
  border-color: var(--notalix-blue) !important;
}

.answers button.good,
.answers button.correct-answer {
  background: var(--notalix-green) !important;
  border-color: var(--notalix-green) !important;
  color: #fff !important;
  opacity: 1 !important;
}

.answers button.wrong {
  background: var(--notalix-coral) !important;
  border-color: var(--notalix-coral) !important;
  color: #fff !important;
  opacity: 1 !important;
}

.answers button:disabled,
.notalix-module-intervalles #interval-options button:disabled {
  opacity: .58;
}

/* Tablette : largeur généreuse, organisation à deux colonnes */
@media (min-width: 721px) and (max-width: 1099px) {
  .notalix-bar,
  body > main,
  body > .container,
  body > h1 {
    width: min(94vw, 980px) !important;
    max-width: 980px !important;
  }

  .notalix-module-lecture-notes .section {
    max-width: 920px !important;
  }

  .notalix-module-tonalites .home-groups {
    max-width: 860px !important;
  }
}

@media (max-width: 620px) {
  /* Le parcours Accords reste lisible au doigt : trois étapes environ sont
     visibles, les suivantes se découvrent par un simple balayage horizontal. */
  .notalix-module-accords .path-steps {
    grid-template-columns: repeat(5, minmax(92px, 1fr)) !important;
    overflow-x: auto;
    overflow-y: hidden;
    padding: 7px 4px 10px !important;
    scroll-snap-type: x proximity;
    scrollbar-width: none;
    -ms-overflow-style: none;
  }

  .notalix-module-accords .path-steps::-webkit-scrollbar { display: none; }

  .notalix-module-accords .path-steps::before {
    left: 46px;
    right: 46px;
    min-width: 368px;
  }

  .notalix-module-accords .path-step {
    scroll-snap-align: start;
  }

  .notalix-module-accords .path-step strong {
    max-width: 88px;
    font-size: .72rem !important;
  }
}


/* Cadences Express — intégration NOTALIX */
@media (min-width: 1100px) {
  .notalix-module-cadences > main { max-width: 1180px !important; }
  .notalix-module-cadences .section { padding: 28px 34px !important; }
  .notalix-module-cadences .direct-choice { grid-template-columns: repeat(4, minmax(0,1fr)); }
  .notalix-module-cadences .answers { grid-template-columns: repeat(2, minmax(0,1fr)); max-width: 850px; margin-left:auto; margin-right:auto; }
}


/* Modules de dictée et de lecture rythmique intégrés à NOTALIX */
.notalix-module-dictee-melodique > main,
.notalix-module-dictee-rythmique > main,
.notalix-module-lecture-rythmique > main {
  width: min(1060px, 100%) !important;
  max-width: 1060px !important;
}

.notalix-module-dictee-melodique .gray,
.notalix-module-dictee-rythmique .gray,
.notalix-module-lecture-rythmique .gray {
  background: #607d8b !important;
}

@media (min-width: 1100px) {
  .notalix-module-dictee-melodique > main { max-width: 1180px !important; }
  .notalix-module-dictee-melodique .grid { grid-template-columns: repeat(3,minmax(0,1fr)); }
  .notalix-module-dictee-melodique .grid .wide { grid-column: 2; }
  .notalix-module-dictee-rythmique .grid,
  .notalix-module-lecture-rythmique .grid { grid-template-columns: repeat(4,minmax(0,1fr)); }
}

/* Lecture de Notes Express : nom principal, Notalix en signature */
.notalix-module-lecture-notes .notalix-module {
  order: 1;
  padding-left: 0;
  border-left: 0;
  color: var(--notalix-navy);
  font-size: 23px;
  font-weight: 850;
  letter-spacing: -.02em;
}
.notalix-module-lecture-notes .notalix-note { order: 0; }
.notalix-module-lecture-notes .notalix-word {
  order: 2;
  margin-left: 5px;
  padding-left: 11px;
  border-left: 1px solid var(--notalix-line);
  color: var(--notalix-muted);
  font-size: 14px;
  letter-spacing: .025em;
}
.notalix-module-lecture-notes .notalix-by {
  order: 3;
  color: var(--notalix-muted);
  font-size: 10px;
}
@media (max-width: 720px) {
  .notalix-module-lecture-notes .notalix-module {
    display: inline;
    font-size: 18px;
  }
  .notalix-module-lecture-notes .notalix-word { font-size: 12px; }
}

/* Priorité finale aux écrans larges mais peu hauts (tablette/Surface en paysage) */
@media (orientation: landscape) and (max-height: 720px) {
  body { padding: 6px max(8px, env(safe-area-inset-right)) 16px max(8px, env(safe-area-inset-left)) !important; }
  .notalix-bar { min-height: 52px; margin-bottom: 7px; padding-block: 6px; }
  .notalix-note { font-size: 24px; }
  .notalix-word { font-size: 18px; }
  .notalix-home,.notalix-site { min-height: 38px; padding-block: 6px; }
}