body {
      font-family: 'Segoe UI', Roboto, sans-serif;
      text-align: center;
      padding: 20px 10px;
      background-color: #f2f4f8;
      color: #333;
    }
    .hidden {
      display: none !important;
    }
    .fade {
      opacity: 0;
      transition: opacity 0.5s ease-in-out;
    }
    .fade.show {
      opacity: 1;
    }
    button {
      padding: 12px 28px;
      margin: 6px;
      font-size: 18px;
      background-color: #4CAF50;
      color: white;
      border: none;
      border-radius: 6px;
      cursor: pointer;
      transition: background-color 0.3s ease;
    }
    button:hover {
      background-color: #45a049;
    }
    .selected {
      background-color: #2196F3 !important;
    }
    .section {
      margin-top: 20px;
      max-width: 700px;
      margin-left: auto;
      margin-right: auto;
      background-color: white;
      border-radius: 12px;
      box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
      padding: 16px;
    }
    .mode-buttons {
      margin-bottom: 10px;
      border-bottom: 2px solid #ccc;
      padding-bottom: 14px;
    }
    .mode-buttons p {
      font-size: 18px;
      margin-bottom: 6px;
    }
    .mode-buttons button.selected {
      background-color: #1565c0;
    }
    .step-container {
      margin-top: 12px;
    }
    .niveau-card, .defi-card {
      border: 2px solid #4CAF50;
      border-radius: 10px;
      padding: 12px;
      margin: 8px auto;
      max-width: 400px;
      background-color: #e8f5e9;
      cursor: pointer;
      transition: transform 0.2s;
    }
    .niveau-card:hover, .defi-card:hover {
      transform: scale(1.02);
    }
    .niveau-card.selected, .defi-card.selected {
      border-color: #f44336;
      background-color: #ffebee;
    }
    #go-button, #go-button-melange, #go-button-defi {
      margin-top: 16px;
      background-color: #f44336;
      font-size: 20px;
      padding: 10px 26px;
      border-radius: 8px;
    }
    h1 {
      font-size: 2.2em;
      margin-bottom: 12px;
      color: #1565c0;
    }
    h1::before {
      content: "🎵 ";
    }
    h2, h3, h4 {
      color: #2c3e50;
      margin: 10px 0 6px;
    }
    
    .red-button { background-color: #f44336; }

.header-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.home-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  font-size: 20px;
  text-decoration: none;
  background: #fff;
  border-radius: 8px;
  box-shadow: 0 1px 4px rgba(0,0,0,.15);
}
.home-btn:hover { box-shadow: 0 2px 6px rgba(0,0,0,.2); }
.home-btn:focus { outline: 2px solid #1565c0; outline-offset: 2px; }

.section-topbar {
  display: flex;
  justify-content: flex-start; /* lien à gauche */
  margin-bottom: 6px;
}

.home-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 10px;
  font-size: 14px;
  text-decoration: none;
  background: #fff;
  border-radius: 8px;
  box-shadow: 0 1px 4px rgba(0,0,0,.15);
}

.home-link:hover { box-shadow: 0 2px 6px rgba(0,0,0,.2); }
.home-link:focus { outline: 2px solid #1565c0; outline-offset: 2px; }

.hud-row{display:flex;align-items:center;gap:10px}
.time-xxl{font-size:24px;font-weight:800;min-width:76px;text-align:right}
.timebar{flex:1;height:10px;background:#e5e7eb;border-radius:999px;overflow:hidden}
.timebar > span{display:block;height:100%;width:0%;background:#10b981;transition:width .2s linear, background-color .2s}
.timebar > span.warn{background:#f59e0b}
.timebar > span.danger{background:#ef4444}
.lives-hearts{font-size:22px;min-width:92px;text-align:left;line-height:1}
.lives-hearts.pop{animation:pop .35s ease}
@keyframes pop{0%{transform:scale(1)}50%{transform:scale(1.2)}100%{transform:scale(1)}}

#level-steps .step{display:inline-block;width:10px;height:10px;border-radius:50%;background:#d1d5db;margin:0 2px;vertical-align:middle}
#level-steps .step.filled{background:#4CAF50}
#level-steps .step.current{background:#4CAF50;transform:scale(1.22)}

#cle-buttons,
#melange-cles,
#defi-cles,
#niveaux {
  display: grid;
}

/* --- Fix mobile layout: <= 600px --- */
@media (max-width: 600px) {
  /* 1) Boutons CLÉ / MÉLANGE : 2 colonnes confortables */
  #cle-buttons,
  #melange-cles {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 10px !important;
    max-width: 420px !important;
  }

  /* 2) Cartes DÉFI : une seule colonne fluide */
  #defi-cles {
    grid-template-columns: 1fr !important;
  }

  /* 3) Boutons : taille lisible et largeur pleine */
  #cle-buttons button,
  #melange-cles button,
  .mode-buttons button {
    font-size: 16px;      /* évite le zoom iOS */
    padding: 12px 16px;
    width: 100% !important;
  }

  /* 4) "Niveau 5" : supprime les overrides inline qui provoquent le débord */
  #niveaux .niveau-card:last-child {
    grid-column: auto !important;
    justify-self: stretch !important;
    width: 100% !important;
  }

  /* 5) Harmoniser cartes et éviter toute largeur surprise */
  .niveau-card, .defi-card {
    margin: 8px 0 !important;
    max-width: none !important;
  }
}

/* Ceinture et bretelles contre le débord horizontal */
* { box-sizing: border-box; }
html, body { overflow-x: hidden; }

/* Choix des niveaux instrument : lisible, descriptif et cohérent avec NOTALIX */
.levels-row {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  max-width: 980px;
  margin: 0 auto;
}
.instrument-level-card {
  min-height: 116px;
  padding: 16px 18px;
  text-align: left;
  color: #17304e;
  background: #fff;
  border: 2px solid #d7e4f0;
  border-radius: 16px;
  box-shadow: 0 7px 20px rgba(17, 52, 86, .07);
  cursor: pointer;
  transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease;
}
.instrument-level-card:hover {
  transform: translateY(-2px);
  border-color: #78aee3;
  box-shadow: 0 10px 24px rgba(17, 52, 86, .12);
}
.instrument-level-card.selected {
  color: #fff;
  border-color: #1f6fc9;
  background: linear-gradient(135deg, #2578d2, #155daf);
}
.instrument-level-card .level-number {
  display: block;
  margin-bottom: 5px;
  color: #1f6fc9;
  font-size: .78rem;
  font-weight: 900;
  letter-spacing: .06em;
  text-transform: uppercase;
}
.instrument-level-card.selected .level-number { color: #dceeff; }
.instrument-level-card strong { display: block; font-size: 1.08rem; }
.instrument-level-card small {
  display: block;
  margin-top: 7px;
  color: #5d7086;
  font-size: .9rem;
  line-height: 1.35;
}
.instrument-level-card.selected small { color: #eef7ff; }
.instrument-level-card .level-action { display: flex; align-items: center; justify-content: space-between; margin-top: 12px; padding-top: 9px; color: #1769bd; border-top: 1px solid #dce8f2; font-size: 13px; font-weight: 900; }
.instrument-level-card .level-action b { display: grid; place-items: center; width: 25px; height: 25px; color: #fff; background: #2584d5; border-radius: 50%; font-size: 15px; }
.instrument-level-card.selected .level-action { color: #fff; border-top-color: rgba(255,255,255,.3); }
.instrument-level-card.selected .level-action b { color: #1769bd; background: #fff; }
#bloc-niveaux > h4 { width: fit-content; margin: 12px auto 14px; padding: 8px 15px; color: #175f9f; background: #edf7ff; border-radius: 999px; }
#bloc-niveaux.awaiting-level > h4 { animation: levelPrompt 1.25s ease-in-out infinite alternate; }
#bloc-niveaux.awaiting-level .instrument-level-card { border-color: #a9cfea; }
@keyframes levelPrompt { to { color: #fff; background: #2584d5; box-shadow: 0 0 0 5px rgba(37,132,213,.12); } }
.instrument-launcher {
  max-width: 650px;
  margin: 18px auto 0;
  padding: 18px;
  background: #f4f8fc;
  border: 1px solid #cfe0ef;
  border-radius: 16px;
}
.instrument-selection-summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  max-width: 980px;
  margin: 10px auto 14px;
  padding: 10px 14px;
  color: #17304e;
  background: #eef6fc;
  border: 1px solid #cfe0ef;
  border-radius: 12px;
}
.instrument-selection-summary button {
  margin: 0;
  padding: 8px 13px;
  color: #155daf;
  background: #fff;
  border: 1px solid #9fc5e8;
  font-size: 14px;
  font-weight: 800;
}
#etape-instrument.instrument-ready > p,
#etape-instrument.instrument-ready > h4,
#etape-instrument.instrument-ready > .families-row,
#etape-instrument.instrument-ready > #bloc-sousfamilles,
#etape-instrument.instrument-ready > #bloc-instruments {
  display: none !important;
}
#etape-instrument.instrument-ready #titre-niveaux {
  margin-top: 8px !important;
}
#etape-instrument.instrument-ready .instrument-level-card {
  min-height: 92px;
  padding: 12px 15px;
}
#etape-instrument.instrument-ready .instrument-launcher {
  display: grid;
  grid-template-columns: minmax(150px, .7fr) minmax(280px, 1.4fr) minmax(180px, .8fr);
  align-items: center;
  gap: 8px 14px;
  max-width: 980px;
  margin-top: 12px;
  padding: 12px 14px;
}
#etape-instrument.instrument-ready .launcher-title,
#etape-instrument.instrument-ready .launch-instrument-level {
  margin: 0;
}
#etape-instrument.instrument-ready .timbre-explanation {
  grid-column: 1 / -1;
  margin: 0 auto;
}
.launcher-title { margin: 0 0 10px; font-weight: 800; }
.timbre-choice { display: flex; gap: 10px; justify-content: center; }
.timbre-choice button {
  flex: 1;
  max-width: 250px;
  padding: 12px 16px;
  color: #17304e;
  background: #fff;
  border: 2px solid #cbddec;
  border-radius: 12px;
  font: inherit;
  font-weight: 800;
  cursor: pointer;
}
.timbre-choice button.selected {
  color: #fff;
  background: #1f6fc9;
  border-color: #1f6fc9;
}
.timbre-explanation {
  max-width: 580px;
  margin: 10px auto 2px;
  color: #425d75;
  font-size: 14px;
  line-height: 1.45;
}
.launch-instrument-level {
  margin-top: 14px;
  padding: 13px 24px;
  color: #fff;
  background: #ff665e;
  border: 0;
  border-radius: 12px;
  box-shadow: 0 7px 16px rgba(255, 102, 94, .25);
  font: inherit;
  font-weight: 900;
  cursor: pointer;
}
@media (max-width: 700px) {
  .levels-row { grid-template-columns: 1fr; }
  .instrument-level-card { min-height: 0; }
  #etape-instrument.instrument-ready .instrument-launcher {
    display: block;
  }
  #etape-instrument.instrument-ready .launcher-title,
  #etape-instrument.instrument-ready .launch-instrument-level {
    margin-top: 12px;
  }
  .instrument-selection-summary {
    align-items: flex-start;
    flex-direction: column;
  }
}

/* Surface : choix de niveau explicite */
.instrument-level-card { position: relative; }
.instrument-level-card.selected {
  border-color: #0b5fb8 !important;
  outline: 4px solid rgba(31, 111, 201, .2);
  box-shadow: 0 12px 28px rgba(11, 52, 115, .22) !important;
}
.instrument-level-card.selected::after {
  content: "✓ Choisi";
  position: absolute;
  top: 10px;
  right: 12px;
  padding: 4px 8px;
  color: #0b3473;
  background: #fff;
  border-radius: 999px;
  font-size: .75rem;
  font-weight: 900;
}
.launcher-status {
  display: grid;
  gap: 3px;
  text-align: left;
  color: #425d75;
}
.launcher-status span {
  font-size: .75rem;
  font-weight: 900;
  letter-spacing: .06em;
  text-transform: uppercase;
}
.launcher-status strong { color: #0b3473; }
.launch-instrument-level:disabled {
  color: #657789;
  background: #dce4eb;
  box-shadow: none;
  cursor: not-allowed;
}
#etape-instrument.instrument-ready .instrument-launcher {
  grid-template-columns: minmax(180px, 1fr) minmax(135px, .7fr) minmax(280px, 1.4fr) minmax(190px, .8fr);
}
@media (max-width: 900px) {
  #etape-instrument.instrument-ready .instrument-launcher { grid-template-columns: 1fr 1fr; }
  #etape-instrument.instrument-ready .timbre-explanation { grid-column: 1 / -1; }
}
.instrument-intro { margin: 4px auto 12px; color: #53677b; }
.families-row {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
  max-width: 900px;
  margin: 12px auto 18px;
}
.families-row .tile {
  width: auto;
  margin: 0;
  padding: 9px 16px;
  color: #23435f;
  background: #eef4f9;
  border: 1px solid #d4e1eb;
  border-radius: 999px;
  box-shadow: none;
  font-size: 14px;
  font-weight: 800;
  cursor: pointer;
}
.families-row .tile.selected { color: #fff; background: #1f6fc9; border-color: #1f6fc9; }
.instruments-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 9px;
  max-width: 900px;
  margin: 10px auto 0;
}
.instruments-row .tile {
  margin: 0;
  padding: 12px 10px;
  color: #17304e;
  background: #fff;
  border: 1px solid #d8e3ec;
  border-radius: 12px;
  box-shadow: 0 3px 10px rgba(23,48,78,.06);
  font-weight: 800;
  cursor: pointer;
}
.instruments-row .tile:hover { border-color: #78aee3; transform: translateY(-1px); }
.instruments-row .tile.selected { color: #fff; background: #1f6fc9; border-color: #1f6fc9; }
.levels-row { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 10px; max-width: 980px; margin: 10px auto 0; }
.hidden-soft { display: none !important; }

/* Parcours Instruments : familles lisibles, sous-familles utiles, lancement compact */
.families-row {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  max-width: 980px;
}
.families-row .tile {
  min-height: 68px;
  padding: 12px 16px;
  border-radius: 16px;
  font-size: 16px;
  box-shadow: 0 6px 16px rgba(23,48,78,.07);
}
.subfamilies-row {
  display: grid;
  grid-template-columns: repeat(2, minmax(180px, 280px));
  justify-content: center;
  gap: 12px;
  margin: 10px auto 18px;
}
.subfamilies-row .tile {
  margin: 0;
  padding: 13px 18px;
  color: #17304e;
  background: #eef4f9;
  border: 2px solid #d4e1eb;
  border-radius: 14px;
  font-weight: 900;
  cursor: pointer;
}
.subfamilies-row .tile.selected { color: #fff; background: #1f6fc9; border-color: #1f6fc9; }
.instruments-row .tile { display: grid; gap: 4px; align-content: center; }
.instruments-row .tile small { color: #7b5a20; font-size: 11px; font-weight: 800; }
.instruments-row .tile.disabled { cursor: default; opacity: .68; background: #f3f5f7; }
#etape-instrument.instrument-ready .instrument-selection-summary {
  max-width: 720px;
  justify-content: flex-end;
  margin: -4px auto 10px;
  padding: 0;
  background: transparent;
  border: 0;
}
#etape-instrument.instrument-ready .instrument-launcher {
  display: grid;
  grid-template-columns: minmax(360px, 1fr) auto;
  gap: 8px 18px;
  max-width: 850px;
  padding: 8px 0 0;
  background: transparent;
  border: 0;
}
.sound-setting { display: flex; align-items: center; justify-content: center; gap: 14px; }
#etape-instrument.instrument-ready .timbre-explanation {
  grid-column: 1;
  margin: 0;
  text-align: center;
}
#etape-instrument.instrument-ready .launch-instrument-level {
  grid-column: 2;
  grid-row: 1 / span 2;
  min-width: 210px;
  margin: 0;
}
@media (max-width: 760px) {
  .families-row { grid-template-columns: 1fr 1fr; }
  .subfamilies-row { grid-template-columns: 1fr 1fr; }
  #etape-instrument.instrument-ready .instrument-launcher { display: block; }
  #etape-instrument.instrument-ready .launch-instrument-level { width: 100%; margin-top: 12px; }
}

/* 0807g — choix des défis présenté comme une progression claire et engageante. */
#defi-cles.challenge-board.challenge-path-five {
  display: grid !important;
  grid-template-columns: repeat(6, minmax(0, 1fr)) !important;
  gap: 10px !important;
  width: min(100%, 1040px);
  max-width: 1040px;
  margin: 8px auto 0;
}
#defi-cles.challenge-path-five .defi-card {
  position: relative;
  display: grid !important;
  grid-template-columns: 54px minmax(0, 1fr) auto !important;
  grid-template-rows: auto auto auto !important;
  grid-column: span 2;
  align-items: center;
  gap: 2px 11px;
  min-height: 112px;
  padding: 13px !important;
  overflow: hidden;
  border: 1px solid #d7e4ed !important;
  border-top: 4px solid #3d9ddb !important;
  border-radius: 16px !important;
  text-align: left !important;
}
#defi-cles.challenge-path-five .defi-card:nth-child(4),
#defi-cles.challenge-path-five .defi-card:nth-child(5) { grid-column: span 3; }
#defi-cles.challenge-path-five .defi-card::before {
  grid-column: 1;
  grid-row: 1 / 4;
  width: 54px !important;
  height: 54px !important;
  font-size: 25px !important;
}
#defi-cles.challenge-path-five .defi-card > small {
  grid-column: 2;
  grid-row: 1;
  color: #3f78a5;
  font-size: 10px;
  font-style: normal;
  font-weight: 900;
  letter-spacing: .08em;
  text-transform: uppercase;
}
#defi-cles.challenge-path-five .defi-card > strong {
  grid-column: 2;
  grid-row: 2;
  font-size: 16px;
  line-height: 1.15;
}
#defi-cles.challenge-path-five .defi-card > span {
  grid-column: 2 / 4;
  grid-row: 3;
  color: #61778b;
  font-size: 11px;
  line-height: 1.25;
}
#defi-cles.challenge-path-five .defi-card > em {
  grid-column: 3;
  grid-row: 1 / 3;
  color: #2379ba;
  font-size: 11px;
  font-style: normal;
  font-weight: 900;
  white-space: nowrap;
}
#defi-cles.challenge-path-five .defi-card:hover,
#defi-cles.challenge-path-five .defi-card:focus-visible {
  transform: translateY(-3px);
  border-color: #7ebee8 !important;
  box-shadow: 0 12px 24px rgba(39, 111, 164, .16);
}
#defi-cles.challenge-path-five .defi-card:nth-child(2) { border-top-color: #55aa68 !important; }
#defi-cles.challenge-path-five .defi-card:nth-child(3) { border-top-color: #7c68d1 !important; }
#defi-cles.challenge-path-five .defi-card:nth-child(4) { border-top-color: #ee9528 !important; }
#defi-cles.challenge-path-five .defi-card:nth-child(5) { border-top-color: #e7ba28 !important; }

@media (max-width: 760px) {
  #defi-cles.challenge-board.challenge-path-five { grid-template-columns: 1fr 1fr !important; }
  #defi-cles.challenge-path-five .defi-card,
  #defi-cles.challenge-path-five .defi-card:nth-child(4) { grid-column: span 1; }
  #defi-cles.challenge-path-five .defi-card:nth-child(5) { grid-column: 1 / -1; }
}
@media (max-width: 480px) {
  #defi-cles.challenge-board.challenge-path-five { grid-template-columns: 1fr !important; }
  #defi-cles.challenge-path-five .defi-card,
  #defi-cles.challenge-path-five .defi-card:nth-child(4),
  #defi-cles.challenge-path-five .defi-card:nth-child(5) { grid-column: 1; min-height: 94px; }
}
@media (max-width: 480px) {
  .families-row, .subfamilies-row { grid-template-columns: 1fr; }
}

/* Parcours Clés et Défis : progression FM explicite par cycles */
.key-cycle-list { display: grid; gap: 12px; max-width: 900px; margin: 18px auto; }
.pedagogy-note { width: fit-content; max-width: 760px; margin: 8px auto 16px; padding: 7px 12px; color: #50657a; background: #f1f6fa; border-radius: 10px; font-size: 14px; font-weight: 700; }
.key-cycle-list section { padding: 14px 18px; border: 1px solid #d8e5ef; border-radius: 16px; background: #f7fbfe; }
.key-cycle-list h4 { margin: 0 0 10px; color: #17304e; }
.key-choice-row { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; }
.key-choice-row button { min-width: 145px; margin: 0; }
#key-stages { max-width: 980px; margin: 22px auto 0; }
#key-stages .levels-row, .challenge-cycles { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.instrument-level-card, .defi-card { display: grid; gap: 7px; align-content: center; min-height: 112px; padding: 15px; text-align: left; color: #17304e; background: #fff; border: 1px solid #d8e3ec; border-radius: 16px; box-shadow: 0 5px 16px rgba(23,48,78,.08); cursor: pointer; }
.instrument-level-card strong, .defi-card strong { display: block; font-size: 18px; }
.instrument-level-card.selected, .defi-card.selected { color: #fff; background: #1f6fc9; border-color: #1f6fc9; }
.defi-card.ultimate { border-color: #e0b94d; background: #fff9e6; }
.defi-card.ultimate.selected { color: #17304e; background: #f2c94c; border-color: #d8a91d; }
.launch-instrument-level { margin-top: 18px; }
@media (max-width: 700px) {
  #key-stages .levels-row, .challenge-cycles { grid-template-columns: 1fr; }
  .key-choice-row button { flex: 1 1 145px; }
}

/* Adaptation générale : ordinateur, tablette et téléphone */
.section {
  width: min(1180px, 100%);
  max-width: 1180px;
  min-width: 0;
}
.section > *, .step-container, .levels-row, .families-row,
.subfamilies-row, .instruments-row, .key-cycle-list { min-width: 0; }
button, .button, .tile, .instrument-level-card, .defi-card {
  max-width: 100%;
  overflow-wrap: anywhere;
  touch-action: manipulation;
}

@media (max-width: 900px) {
  .section { margin-top: 10px; padding: 14px !important; }
  .mode-buttons > div { max-width: 100% !important; }
  .levels-row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  #key-stages .levels-row, .challenge-cycles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .key-cycle-list { margin-block: 12px; }
  .key-cycle-list section { padding: 12px; }
}

@media (max-width: 620px) {
  body { font-size: 15px; }
  .section { padding: 12px 10px !important; border-radius: 14px !important; }
  .mode-buttons { padding-bottom: 10px; }
  .mode-buttons p { margin-top: 0; font-size: 16px; }
  .mode-buttons > div { grid-template-columns: 1fr !important; gap: 6px !important; }
  .mode-buttons button { min-height: 46px; margin: 0; }
  .step-container h3 { font-size: clamp(1.25rem, 6vw, 1.55rem); }
  .instrument-intro, .pedagogy-note { line-height: 1.4; }
  .families-row, .subfamilies-row, .instruments-row,
  .levels-row, #key-stages .levels-row, .challenge-cycles { grid-template-columns: 1fr; }
  .families-row .tile { min-height: 52px; }
  .instrument-level-card, .defi-card { min-height: 0; padding: 13px; }
  .instrument-level-card strong, .defi-card strong { font-size: 16px; }
  .key-choice-row { display: grid; grid-template-columns: 1fr 1fr; }
  .key-choice-row button { min-width: 0; padding: 10px 8px; font-size: 15px; }
  #key-stages { margin-top: 14px; }
  .launch-instrument-level, #go-button, #go-button-defi { width: 100%; margin-inline: 0; }
}

@media (max-width: 380px) {
  .key-choice-row { grid-template-columns: 1fr; }
  .pedagogy-note { font-size: 12px; }
}

/* Écrans peu hauts (Surface et téléphones en paysage) */
@media (orientation: landscape) and (max-height: 720px) {
  .section { margin-top: 6px; padding-block: 10px !important; }
  .mode-buttons { margin-bottom: 4px; padding-bottom: 8px; }
  .mode-buttons p { margin: 0 0 5px; }
  .step-container { margin-top: 6px; }
  .step-container h3, .step-container h4 { margin-block: 5px; }
  .key-cycle-list { gap: 7px; margin-block: 8px; }
  .key-cycle-list section { padding: 8px 12px; }
  .instrument-level-card, .defi-card { min-height: 76px; padding: 10px 12px; }
  #key-stages { margin-top: 10px; }
}

/* Tutoriels communs au module Lecture de notes */
.tutorial-entry {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0 auto 18px;
  color: #50657a;
  font-size: 14px;
  font-weight: 700;
}
.tutorial-entry button {
  margin: 0;
  padding: 9px 14px;
  color: #125da8;
  background: #f4f9fd;
  border: 1px solid #c8deef;
  border-radius: 12px;
  box-shadow: none;
  font-size: 14px;
}
.tutorial-entry button:hover { background: #e8f4fc; transform: none; }
.tutorial-dialog {
  width: min(940px, calc(100vw - 28px));
  max-width: 940px;
  max-height: min(88dvh, 780px);
  padding: 0;
  color: #17304e;
  background: #fff;
  border: 0;
  border-radius: 22px;
  box-shadow: 0 24px 70px rgba(8, 35, 64, .3);
}
.tutorial-dialog::backdrop { background: rgba(9, 31, 54, .58); backdrop-filter: blur(3px); }
.tutorial-shell { max-height: min(88dvh, 780px); padding: 24px; overflow-y: auto; }
.tutorial-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; }
.tutorial-header h2 { margin: 3px 0 0; color: #073b7c; font-size: clamp(1.45rem, 4vw, 2rem); }
.tutorial-kicker { color: #1f6fc9; font-size: 13px; font-weight: 900; letter-spacing: .08em; text-transform: uppercase; }
.tutorial-close {
  flex: 0 0 42px;
  width: 42px;
  height: 42px;
  margin: 0;
  padding: 0;
  color: #38536d;
  background: #edf4f9;
  border-radius: 50%;
  box-shadow: none;
  font-size: 28px;
  line-height: 1;
}
.tutorial-lead { max-width: 760px; margin: 12px 0 20px; color: #50657a; font-size: 17px; line-height: 1.5; }
.tutorial-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.tutorial-card { position: relative; min-width: 0; padding: 16px 16px 16px 58px; background: #f4f9fd; border: 1px solid #d5e6f3; border-radius: 16px; text-align: left; }
.tutorial-grid-parents .tutorial-card { padding-left: 16px; }
.tutorial-card h3 { margin: 0 0 5px; color: #17304e; font-size: 17px; }
.tutorial-card p { margin: 0; color: #50657a; line-height: 1.45; }
.tutorial-number { position: absolute; top: 15px; left: 14px; display: grid; place-items: center; width: 31px; height: 31px; color: #fff; background: #1f6fc9; border-radius: 50%; font-weight: 900; }
.tutorial-note { margin: 14px 0 0; padding: 10px 12px; color: #50657a; background: #fff8df; border-radius: 12px; font-size: 14px; }
.tutorial-primary { display: block; width: min(340px, 100%); margin: 20px auto 0; }
#etape-cle, #etape-instrument, #etape-defi,
#bloc-sousfamilles, #bloc-instruments, #bloc-niveaux, #key-stages { scroll-margin-top: 8px; }
@media (max-width: 650px) {
  .tutorial-entry span { width: 100%; text-align: center; }
  .tutorial-entry button { flex: 1 1 145px; }
  .tutorial-dialog { width: calc(100vw - 16px); max-height: 94dvh; border-radius: 16px; }
  .tutorial-shell { max-height: 94dvh; padding: 16px; }
  .tutorial-grid { grid-template-columns: 1fr; }
  .tutorial-lead { font-size: 15px; }
}
@media (orientation: landscape) and (max-height: 600px) {
  .tutorial-dialog, .tutorial-shell { max-height: 96dvh; }
  .tutorial-shell { padding: 14px 18px; }
  .tutorial-lead { margin-block: 6px 10px; }
  .tutorial-card { padding-block: 11px; }
}

/* Accueil Clé et Défi : parcours plus lisibles et plus compacts */
.path-heading {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  margin: 18px auto 6px;
}
.path-heading h3 { margin: 0; font-size: clamp(1.3rem, 2.5vw, 1.65rem); }
.path-kicker { margin: 0 0 2px; color: #1f6fc9; font-size: 11px; font-weight: 900; letter-spacing: .11em; text-align: left; text-transform: uppercase; }
.path-icon { display: grid; place-items: center; width: 48px; height: 48px; color: #fff; background: linear-gradient(145deg, #2d92e6, #1768bd); border-radius: 15px; box-shadow: 0 7px 17px rgba(24,104,189,.22); font-size: 29px; }
.challenge-heading .path-icon { background: linear-gradient(145deg, #ffb52f, #ef7c17); box-shadow: 0 7px 17px rgba(214,111,12,.22); }
#etape-cle > .instrument-intro, #etape-defi > .instrument-intro { max-width: 850px; margin: 8px auto; color: #536b82; line-height: 1.45; }
#etape-cle > .pedagogy-note, #etape-defi > .pedagogy-note { margin-block: 10px 18px; font-size: 12px; font-weight: 750; }
.key-cycle-list {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
  max-width: 1060px;
  align-items: start;
}
.key-cycle-list section {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 15px;
  min-height: 0;
  padding: 18px;
  overflow: hidden;
  background: linear-gradient(155deg, #fff, #eef8ff);
  border: 1px solid #dbe8f2;
  box-shadow: 0 9px 24px rgba(23,48,78,.075);
}
.key-cycle-list section::before { content: ""; position: absolute; inset: 0 0 auto; height: 5px; background: #2c8dde; }
.key-cycle-list section[data-cycle="2"]::before { background: #5573d8; }
.key-cycle-list section[data-cycle="3"]::before { background: #7b5fc7; }
.key-cycle-list section[data-cycle="2"] { background: linear-gradient(155deg, #fff, #f0f2ff); }
.key-cycle-list section[data-cycle="3"] { background: linear-gradient(155deg, #fff, #f5efff); }
.cycle-copy { display: flex; align-items: center; gap: 11px; text-align: left; }
.cycle-number { display: grid; place-items: center; flex: 0 0 37px; width: 37px; height: 37px; color: #1769bd; background: #eaf5fd; border-radius: 12px; font-size: 18px; font-weight: 900; }
.key-cycle-list section[data-cycle="2"] .cycle-number { color: #485fb5; background: #eef0ff; }
.key-cycle-list section[data-cycle="3"] .cycle-number { color: #694ba9; background: #f2edff; }
.cycle-copy small { color: #718398; font-size: 11px; font-weight: 900; letter-spacing: .08em; text-transform: uppercase; }
.key-cycle-list .cycle-copy h4 { margin: 2px 0 0; font-size: 16px; line-height: 1.2; }
.key-choice-row { display: grid; grid-template-columns: 1fr; gap: 8px; margin-top: 3px; }
.key-choice-row button {
  position: relative;
  width: 100%;
  min-width: 0;
  min-height: 43px;
  margin: 0;
  min-height: 64px;
  padding: 10px 12px 10px 61px;
  color: #185f9f;
  background: rgba(255,255,255,.9);
  border: 1px solid #c9e0f1;
  border-radius: 11px;
  box-shadow: 0 4px 10px rgba(24,82,131,.07);
  font-size: 15px;
  text-align: left;
}
.key-choice-row button::before { content: attr(data-clef-symbol); position: absolute; left: 12px; top: 50%; display: grid; place-items: center; width: 38px; height: 42px; color: #1769bd; background: #e6f3fc; border-radius: 11px; transform: translateY(-50%); font-family: serif; font-size: 29px; line-height: 1; }
.key-cycle-list section[data-cycle="2"] .key-choice-row button::before { color: #4f63ba; background: #edf0ff; }
.key-cycle-list section[data-cycle="3"] .key-choice-row button::before { color: #6d4db0; background: #f2ebff; }
.key-choice-row button:hover::before,.key-choice-row button.selected::before { color: #1769bd; background: #fff; }
.key-choice-row button strong { display: block; font-size: 15px; }
.key-choice-row button small { display: block; margin-top: 3px; color: #617990; font-size: 11px; font-weight: 650; line-height: 1.25; }
.key-choice-row button:hover small, .key-choice-row button.selected small { color: #e8f4ff; }
.key-choice-row button:hover { color: #fff; background: #1f6fc9; transform: translateY(-2px); box-shadow: 0 7px 15px rgba(31,111,201,.2); }
.key-choice-row button.selected { color: #fff; background: #1f6fc9 !important; border-color: #1f6fc9; }
.key-purpose-intro { max-width: 900px!important; padding: 13px 18px; background: linear-gradient(90deg,#eef8ff,#f6f1ff); border: 1px solid #dceafa; border-radius: 15px; }
.key-purpose-intro strong { color: #17304e; }
.key-context { display: flex; align-items: center; gap: 12px; max-width: 850px; margin: 16px auto 8px; padding: 12px 16px; color: #fff; background: linear-gradient(135deg, #1769bd, #23518f); border-radius: 14px; text-align: left; box-shadow: 0 8px 20px rgba(23,81,143,.18); }
.key-context strong { flex: 0 0 auto; }
.key-context span { font-size: 13px; line-height: 1.4; }
.challenge-cycles { max-width: 1060px; gap: 14px; }
.challenge-choice-groups { display: grid; gap: 20px; max-width: 1100px; margin: 18px auto 0; }
.challenge-group { padding: 16px; background: #f7fbfe; border: 1px solid #dce8f1; border-radius: 18px; }
.challenge-group > header { display: flex; align-items: center; gap: 11px; margin: 0 2px 14px; text-align: left; }
.challenge-group > header > span { display: grid; place-items: center; flex: 0 0 36px; width: 36px; height: 36px; color: #fff; background: #2578ca; border-radius: 11px; font-weight: 900; }
.challenge-group > header h4 { margin: 0; font-size: 18px; }
.challenge-group > header p { margin: 2px 0 0; color: #63788d; font-size: 13px; }
.challenge-group.cycle-synthesis { background: #fffaf0; border-color: #eedda9; }
.challenge-group.cycle-synthesis > header > span { color: #59400a; background: #f2c94c; }

/* Défis : deux rubriques simples, sans empilement décoratif */
#defi-cles.challenge-choice-groups { display: block; max-width: 1040px; }
.challenge-group { width: 100%; margin: 0 0 16px; padding: 15px 18px 18px; }
.challenge-group > header { margin-bottom: 11px; }
.challenge-group > header h4 { font-size: 18px; }
.challenge-group .challenge-cycles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; max-width: none; }
.challenge-group .defi-card {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  gap: 5px;
  width: 100%;
  min-height: 88px;
  margin: 0;
  padding: 15px 17px 15px 78px;
  text-align: left;
  overflow: hidden;
  border: 2px solid transparent;
  background: #fff;
  box-shadow: 0 7px 18px rgba(23,48,78,.09);
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.challenge-group .defi-card::before { content: attr(data-defi-symbol); position: absolute; left: 17px; top: 50%; display: grid; place-items: center; width: 44px; height: 44px; color: #fff; background: linear-gradient(145deg,#35a5ef,#176bc2); border-radius: 14px; box-shadow: 0 5px 12px rgba(25,105,190,.23); transform: translateY(-50%); font-size: 23px; font-weight: 900; }
.challenge-group:first-child .defi-card:nth-child(1)::before { content: "𝄞"; }
.challenge-group:first-child .defi-card:nth-child(2)::before { content: "𝄢"; }
.challenge-group:first-child .defi-card:nth-child(3)::before { content: "𝄞+𝄢"; width: 52px; left: 13px; font-size: 15px; background: linear-gradient(145deg,#7968dd,#5147b9); }
.challenge-group.cycle-synthesis .defi-card::before { color: #5c4106; background: linear-gradient(145deg,#ffe478,#f2bd31); box-shadow: 0 5px 12px rgba(186,132,15,.22); }
.challenge-group.cycle-synthesis .defi-card:nth-child(1)::before { content: "1"; }
.challenge-group.cycle-synthesis .defi-card:nth-child(2)::before { content: "2"; }
.challenge-group.cycle-synthesis .defi-card:nth-child(3)::before { content: "★"; }
.clef-challenge-cycles { display: grid; gap: 11px; }
.clef-challenge-cycle { display: grid; grid-template-columns: 82px minmax(0,1fr); align-items: stretch; gap: 10px; padding: 9px; border-radius: 15px; }
.clef-challenge-cycle.cycle-one { background: #eaf6ff; }
.clef-challenge-cycle.cycle-two { background: #eef0ff; }
.clef-challenge-cycle.cycle-three { background: #f4edff; }
.clef-cycle-label { display: grid; place-items: center; padding: 8px; color: #1769bd; background: rgba(255,255,255,.72); border-radius: 11px; font-size: 12px; font-weight: 950; text-align: center; text-transform: uppercase; }
.cycle-two .clef-cycle-label { color: #4c60b7; }.cycle-three .clef-cycle-label { color: #714fb3; }
.clef-challenge-cycle .challenge-cycles { grid-template-columns: repeat(3,minmax(0,1fr)); }
.clef-challenge-cycle.cycle-two .challenge-cycles { grid-template-columns: repeat(2,minmax(0,1fr)); }
.clef-challenge-cycle.cycle-two .defi-card::before { background: linear-gradient(145deg,#7184e8,#4d5abb); }
.clef-challenge-cycle.cycle-three .defi-card::before { background: linear-gradient(145deg,#9a73e4,#6b47b5); }
.challenge-group .defi-card:hover { transform: translateY(-4px) rotate(-.3deg); border-color: #7ab7e7; box-shadow: 0 13px 25px rgba(23,80,135,.16); }
.challenge-group .defi-card:nth-child(even):hover { transform: translateY(-4px) rotate(.3deg); }
.challenge-group.cycle-synthesis .defi-card:hover { border-color: #e9c454; }
.challenge-group .defi-card strong { font-size: 18px; }
.challenge-group .defi-card > span { color: #60768b; font-size: 13px; font-weight: 700; }
.challenge-group .defi-card.selected > span { color: #e6f3ff; }
.challenge-group .defi-card.ultimate.selected > span { color: #614a16; }
.challenge-group .defi-card.selected::before { color: #1764ae; background: #fff; box-shadow: none; }
.challenge-group.cycle-synthesis .defi-card.selected::before { color: #704f08; background: #fff; }
.defi-card {
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 14px;
  min-height: 165px;
  padding: 20px;
  background: linear-gradient(145deg, #fff, #f7fbff);
  border: 1px solid #d9e7f2;
  box-shadow: 0 10px 25px rgba(23,48,78,.085);
}
.defi-card:hover { transform: translateY(-3px); border-color: #8bbce6; box-shadow: 0 14px 30px rgba(23,48,78,.13); }
.challenge-medal { display: grid; place-items: center; width: 44px; height: 44px; color: #fff; background: #287dce; border-radius: 14px; font-size: 20px; font-weight: 900; }
.challenge-copy { display: grid; gap: 3px; min-width: 0; }
.challenge-copy small { color: #287dce; font-size: 10px; font-weight: 900; letter-spacing: .09em; text-transform: uppercase; }
.challenge-copy strong { font-size: 18px; }
.challenge-copy > span { color: #4d647b; font-size: 14px; line-height: 1.3; }
.challenge-copy em { width: fit-content; margin-top: 5px; padding: 4px 8px; color: #526d84; background: #edf4f9; border-radius: 999px; font-size: 11px; font-style: normal; font-weight: 800; }
.challenge-arrow { color: #75a2c9; font-size: 23px; }
.defi-card.ultimate { background: linear-gradient(145deg, #fffdf6, #fff6d8); border-color: #f0d993; }
.defi-card.ultimate .challenge-medal { color: #59400a; background: #f2c94c; }
.defi-card.ultimate .challenge-copy small { color: #9a6810; }
.defi-card.selected { color: #fff; background: linear-gradient(145deg, #287dce, #155da9); }
.defi-card.selected .challenge-copy small, .defi-card.selected .challenge-copy > span, .defi-card.selected .challenge-arrow { color: #e6f3ff; }
.defi-card.selected .challenge-copy em { color: #fff; background: rgba(255,255,255,.16); }
.defi-card.selected .challenge-medal { color: #1764ae; background: #fff; }
.defi-card.ultimate.selected { color: #17304e; background: linear-gradient(145deg, #ffe783, #f2c94c); }
.defi-card.ultimate.selected .challenge-copy small, .defi-card.ultimate.selected .challenge-copy > span, .defi-card.ultimate.selected .challenge-arrow { color: #614a16; }
.defi-card.ultimate.selected .challenge-copy em { color: #614a16; background: rgba(255,255,255,.42); }
@media (max-width: 850px) {
  .key-cycle-list { grid-template-columns: 1fr; max-width: 650px; }
  .key-cycle-list section { min-height: 0; }
  .key-choice-row { grid-template-columns: repeat(auto-fit, minmax(145px, 1fr)); }
  .challenge-cycles { grid-template-columns: 1fr; max-width: 650px; }
  .defi-card { min-height: 110px; }
  .challenge-group .challenge-cycles { grid-template-columns: 1fr; max-width: none; }
  .challenge-group .defi-card { min-height: 72px; }
  .clef-challenge-cycle { grid-template-columns: 1fr; }
  .clef-cycle-label { justify-self: start; padding: 6px 10px; }
  .clef-challenge-cycle .challenge-cycles,.clef-challenge-cycle.cycle-two .challenge-cycles { grid-template-columns: 1fr; }
}
@media (max-width: 520px) {
  .path-heading { justify-content: flex-start; }
  .path-icon { width: 42px; height: 42px; border-radius: 12px; font-size: 25px; }
  .path-heading h3 { text-align: left; }
  #etape-cle > .instrument-intro, #etape-defi > .instrument-intro { text-align: left; }
  .key-cycle-list section { padding: 15px; }
  .key-choice-row { grid-template-columns: 1fr; }
  .key-context { display: block; }
  .key-context strong { display: block; margin-bottom: 5px; }
  .defi-card { grid-template-columns: auto minmax(0, 1fr); padding: 15px; }
  .challenge-group { padding: 11px; }
  .challenge-arrow { display: none; }
}

/* Écran Défi compact : un choix, un clic, on joue. */
#etape-defi .challenge-heading { margin: 8px auto 2px; }
#etape-defi .challenge-promise {
  display: flex; align-items: center; justify-content: center; gap: 9px;
  margin: 4px auto 12px; color: #324b66; font-size: 14px;
}
#etape-defi .challenge-promise span { color: #ff5d67; font-size: 18px; }
#defi-cles.challenge-board {
  display: grid; grid-template-columns: minmax(0, 2.2fr) minmax(250px, .8fr);
  gap: 14px; max-width: 1120px; margin: 0 auto;
}
.challenge-board > section {
  padding: 15px; border: 1px solid #d8e6f1; border-radius: 20px;
  background: linear-gradient(145deg, #f7fbff, #edf7ff);
}
.challenge-board > section > h4 {
  margin: 0 0 11px; color: #173a63; text-align: left; font-size: 17px;
}
.solo-challenges { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 9px; }
.mixed-challenges { background: linear-gradient(145deg, #fffaf0, #fff2cb) !important; border-color: #f0d185 !important; }
.mixed-challenges > div { display: grid; gap: 9px; }
.challenge-board .defi-card {
  position: relative; display: grid; grid-template-columns: 43px 1fr; grid-template-rows: auto auto;
  align-items: center; column-gap: 9px; min-height: 74px; padding: 10px 11px;
  color: #153454; text-align: left; background: #fff; border: 1px solid rgba(74,139,197,.18);
  border-radius: 15px; box-shadow: 0 6px 14px rgba(28,75,116,.08); cursor: pointer;
  transition: transform .16s ease, box-shadow .16s ease, border-color .16s ease;
}
.challenge-board .defi-card::before {
  content: attr(data-defi-symbol) !important; position: static !important; grid-row: 1 / 3;
  display: grid !important; place-items: center; width: 43px !important; height: 43px !important;
  color: #fff !important; background: linear-gradient(145deg,#35a5ef,#176bc2) !important;
  border-radius: 13px !important; box-shadow: 0 5px 11px rgba(25,105,190,.2) !important;
  transform: none !important; font-size: 23px !important; font-weight: 900;
}
.challenge-board .defi-card strong { align-self: end; font-size: 16px; line-height: 1.05; }
.challenge-board .defi-card > span { align-self: start; color: #617890; font-size: 12px; font-weight: 800; }
.challenge-board .defi-card:hover { transform: translateY(-3px); border-color: #56a9e9; box-shadow: 0 10px 19px rgba(28,75,116,.14); }
.challenge-board .mixed-challenges .defi-card::before { color: #6b4a05 !important; background: linear-gradient(145deg,#ffe174,#f4bd2f) !important; }
.challenge-board .defi-card.ultimate { background: linear-gradient(145deg,#fff,#fff4bd); }
#etape-defi #go-button-defi { display: none !important; }

@media (max-width: 850px) {
  #defi-cles.challenge-board { grid-template-columns: 1fr; }
  .solo-challenges { grid-template-columns: repeat(3, minmax(0,1fr)); }
  .mixed-challenges > div { grid-template-columns: repeat(3, minmax(0,1fr)); }
}
@media (max-width: 560px) {
  #etape-defi .challenge-promise { flex-wrap: wrap; }
  .solo-challenges { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .mixed-challenges > div { grid-template-columns: 1fr; }
}

/* Parcours des clés : trois familles nettes et cinq missions progressives. */
#cle-buttons.key-cycle-list {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  align-items: start;
  gap: 12px !important;
  max-width: 1080px;
}
#cle-buttons .key-family-block {
  position: relative;
  display: grid;
  gap: 10px;
  min-height: 238px;
  padding: 13px !important;
  overflow: hidden;
  background: linear-gradient(155deg, #fafdff, #edf7ff);
  border: 1px solid #cfe4f4;
  border-radius: 18px;
}
#cle-buttons .key-family-registers { background: linear-gradient(155deg, #fbfbff, #eff1ff); border-color: #d9ddf7; }
#cle-buttons .key-family-expert { background: linear-gradient(155deg, #fdfbff, #f5efff); border-color: #e4d9f7; }
#cle-buttons .key-family-block > header { display: flex; align-items: center; gap: 9px; text-align: left; }
#cle-buttons .key-family-block > header > span {
  display: grid; place-items: center; flex: 0 0 34px; width: 34px; height: 34px;
  color: #fff; background: #2385d2; border-radius: 11px; font-weight: 950;
}
#cle-buttons .key-family-registers > header > span { background: #5b70d5; }
#cle-buttons .key-family-expert > header > span { background: #845bc8; }
#cle-buttons .key-family-block > header strong { display: block; color: #17304e; font-size: 15px; }
#cle-buttons .key-family-block > header small { display: block; margin-top: 1px; color: #6a7f93; font-size: 10px; font-weight: 800; text-transform: uppercase; letter-spacing: .05em; }
#cle-buttons .key-family-choices { display: grid; gap: 7px; align-content: start; }
#cle-buttons .key-family-expert .key-family-choices { grid-template-columns: repeat(3, minmax(0, 1fr)); }
#cle-buttons .key-family-choices button {
  position: relative; display: grid; grid-template-columns: 42px minmax(0,1fr); grid-template-rows: auto auto;
  align-items: center; column-gap: 9px; width: 100%; min-width: 0; min-height: 72px; margin: 0;
  padding: 9px 10px; color: #173859; text-align: left; background: rgba(255,255,255,.94);
  border: 1px solid rgba(70,128,180,.18); border-radius: 13px; box-shadow: 0 5px 12px rgba(25,73,114,.07);
}
#cle-buttons .key-family-choices button::before {
  content: attr(data-clef-symbol); grid-row: 1 / 3; display: grid; place-items: center;
  width: 42px; height: 48px; color: #1769c2; background: #e8f5ff; border-radius: 11px;
  font-family: serif; font-size: 28px; line-height: 1;
}
#cle-buttons .key-family-registers button::before { color: #5366be; background: #edf0ff; }
#cle-buttons .key-family-expert button::before { color: #724eb6; background: #f2ecff; }
#cle-buttons .key-family-choices button strong { align-self: end; font-size: 14px; line-height: 1.15; }
#cle-buttons .key-family-choices button small { align-self: start; color: #60758a; font-size: 10px; font-weight: 700; line-height: 1.15; }
#cle-buttons .key-family-expert button { display: flex; flex-direction: column; justify-content: center; min-height: 128px; padding: 8px; text-align: center; }
#cle-buttons .key-family-expert button::before { width: 42px; height: 48px; }
#cle-buttons .key-family-choices button:hover,
#cle-buttons .key-family-choices button.selected { color: #fff; background: #1f6fc9; border-color: #1f6fc9; transform: translateY(-2px); }
#cle-buttons .key-family-choices button:hover small,
#cle-buttons .key-family-choices button.selected small { color: #e9f5ff; }
#key-stages { max-width: 1080px; }
#key-stages .levels-row { grid-template-columns: repeat(5, minmax(0, 1fr)) !important; max-width: 1080px; gap: 9px; }
#key-stages .instrument-level-card { min-height: 150px; padding: 12px 10px; }
#key-stages .instrument-level-card strong { font-size: 15px; line-height: 1.18; }
#key-stages .instrument-level-card > span:last-child { color: #5f7489; font-size: 11px; font-weight: 700; line-height: 1.25; }

/* Cinq défis, du premier repère au Défi des Héros. */
#defi-cles.challenge-board.challenge-path-five {
  display: grid !important;
  grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
  gap: 10px; max-width: 1080px; margin: 0 auto;
}
#defi-cles.challenge-path-five .defi-card {
  display: grid; grid-template-columns: 48px 1fr; grid-template-rows: auto auto;
  min-height: 108px; padding: 13px; border-top: 5px solid #2895df;
  background: linear-gradient(155deg,#fff,#edf8ff);
}
#defi-cles.challenge-path-five .defi-card:nth-child(2) { border-top-color: #35a56a; background: linear-gradient(155deg,#fff,#effaf3); }
#defi-cles.challenge-path-five .defi-card:nth-child(3) { border-top-color: #765bd3; background: linear-gradient(155deg,#fff,#f2efff); }
#defi-cles.challenge-path-five .defi-card:nth-child(4) { border-top-color: #f0a229; background: linear-gradient(155deg,#fff,#fff7e8); }
#defi-cles.challenge-path-five .defi-card:nth-child(5) { border-top-color: #e9bf32; background: linear-gradient(155deg,#fffdf5,#fff1b8); }
#defi-cles.challenge-path-five .defi-card::before { grid-row: 1 / 3; position: static !important; width: 48px !important; height: 48px !important; transform: none !important; }
#defi-cles.challenge-path-five .defi-card strong { font-size: 15px; line-height: 1.15; }
#defi-cles.challenge-path-five .defi-card > span { font-size: 11px; line-height: 1.25; }
#defi-cles.challenge-path-five .heroes::before { color: #664800 !important; background: linear-gradient(145deg,#ffe477,#efb923) !important; }

.tutorial-card.tutorial-landmark { background: linear-gradient(145deg,#eaf7ff,#f2efff); border-color: #b9daf2; }

@media (max-width: 950px) {
  #cle-buttons.key-cycle-list { grid-template-columns: 1fr 1fr !important; }
  #cle-buttons .key-family-expert { grid-column: 1 / -1; min-height: 0; }
  #key-stages .levels-row { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; }
  #defi-cles.challenge-board.challenge-path-five { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; }
}
@media (max-width: 620px) {
  #cle-buttons.key-cycle-list { grid-template-columns: 1fr !important; }
  #cle-buttons .key-family-block { min-height: 0; }
  #cle-buttons .key-family-expert { grid-column: auto; }
  #cle-buttons .key-family-expert .key-family-choices { grid-template-columns: repeat(3, minmax(0,1fr)); }
  #cle-buttons .key-family-expert button { min-height: 108px; }
  #key-stages .levels-row { grid-template-columns: 1fr 1fr !important; }
  #key-stages .instrument-level-card { min-height: 112px; }
  #key-stages .instrument-level-card:last-child { grid-column: 1 / -1; }
  #defi-cles.challenge-board.challenge-path-five { grid-template-columns: 1fr 1fr !important; }
  #defi-cles.challenge-path-five .defi-card { min-height: 92px; }
  #defi-cles.challenge-path-five .defi-card:last-child { grid-column: 1 / -1; }
}
@media (max-width: 400px) {
  #cle-buttons .key-family-expert .key-family-choices { grid-template-columns: 1fr; }
  #cle-buttons .key-family-expert button { display: grid; min-height: 72px; text-align: left; }
  #key-stages .levels-row, #defi-cles.challenge-board.challenge-path-five { grid-template-columns: 1fr !important; }
  #key-stages .instrument-level-card:last-child, #defi-cles.challenge-path-five .defi-card:last-child { grid-column: auto; }
}

/* Sélection des clés : un seul panneau, sans programme scolaire affiché. */
#cle-buttons.key-cycle-list {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 11px; max-width: 1040px; margin: 14px auto 4px;
}
#cle-buttons.key-cycle-list > button {
  position: relative; display: grid; grid-template-columns: 52px 1fr;
  grid-template-rows: auto auto; align-items: center; column-gap: 11px;
  min-height: 88px; margin: 0; padding: 12px 14px;
  color: #173859; text-align: left; background: linear-gradient(145deg,#fff,#f2f9ff);
  border: 2px solid #d9e9f5 !important; border-radius: 17px !important;
  box-shadow: 0 7px 16px rgba(21,72,118,.09);
}
#cle-buttons.key-cycle-list > button::before {
  content: attr(data-clef-symbol); grid-row: 1 / 3; display: grid; place-items: center;
  width: 52px; height: 52px; color: #1769c2; background: #e8f5ff;
  border-radius: 15px; font-size: 31px; line-height: 1;
}
#cle-buttons.key-cycle-list > button:nth-child(n+3)::before { color: #6748ae; background: #f0eaff; }
#cle-buttons.key-cycle-list > button strong { align-self: end; font-size: 17px; }
#cle-buttons.key-cycle-list > button small { align-self: start; color: #637990; font-size: 12px; font-weight: 750; }
#cle-buttons.key-cycle-list > button:hover { border-color: #6db4e8 !important; transform: translateY(-3px); }
#cle-buttons.key-cycle-list > button:nth-child(7) { grid-column: 2 / 4; }
.key-purpose-intro { margin-bottom: 5px !important; }
.key-stage-heading { display: flex; align-items: center; justify-content: center; gap: 18px; margin: 12px auto; }
.key-stage-heading h4 { margin: 0; font-size: 20px; }
.key-stage-heading button { min-height: 38px; margin: 0; padding: 7px 12px; color: #1769c2; background: #edf6fc; font-size: 13px; }
#key-stages .levels-row { grid-template-columns: repeat(3,minmax(0,1fr)); max-width: 850px; }
#key-stages .instrument-level-card { min-height: 135px; text-align: center; }
#key-stages .instrument-level-card .level-number {
  display: grid; place-items: center; width: 40px; height: 40px; margin: 0 auto 8px;
  color: #fff; background: linear-gradient(145deg,#35a5ef,#176bc2); border-radius: 13px; font-size: 20px;
}
#key-stages #go-button { display: none !important; }

/* Missions instrumentales : cartes de jeu, lancement en un clic. */
#etape-instrument.instrument-ready #titre-niveaux { margin: 10px auto 12px !important; color: #1769c2; background: transparent; animation: none; }
#etape-instrument.instrument-ready .levels-row { grid-template-columns: repeat(4,minmax(0,1fr)); gap: 12px; }
#etape-instrument.instrument-ready .instrument-level-card {
  min-height: 170px; padding: 15px; border-top: 6px solid #2d92dc !important;
  background: linear-gradient(160deg,#fff,#f1f9ff);
}
#etape-instrument.instrument-ready .instrument-level-card:nth-child(2) { border-top-color: #45ad70 !important; background: linear-gradient(160deg,#fff,#effaf2); }
#etape-instrument.instrument-ready .instrument-level-card:nth-child(3) { border-top-color: #f0a02c !important; background: linear-gradient(160deg,#fff,#fff8e9); }
#etape-instrument.instrument-ready .instrument-level-card:nth-child(4) { border-top-color: #8a62d0 !important; background: linear-gradient(160deg,#fff,#f6f0ff); }
#etape-instrument.instrument-ready .instrument-level-card .level-number {
  display: grid; place-items: center; width: 38px; height: 38px; margin-bottom: 10px;
  color: #fff; background: #287fd0; border-radius: 12px; font-size: 19px;
}
#etape-instrument.instrument-ready .instrument-level-card:nth-child(2) .level-number { background:#3e9f64; }
#etape-instrument.instrument-ready .instrument-level-card:nth-child(3) .level-number { background:#df8a1e; }
#etape-instrument.instrument-ready .instrument-level-card:nth-child(4) .level-number { background:#7650bd; }
#etape-instrument.instrument-ready .instrument-level-card .level-action { margin-top: auto; }
#etape-instrument.instrument-ready .instrument-level-card:hover { transform: translateY(-5px) rotate(-.35deg); box-shadow: 0 14px 25px rgba(23,73,115,.14); }

@media (max-width: 850px) {
  #cle-buttons.key-cycle-list { grid-template-columns: repeat(2,minmax(0,1fr)); }
  #cle-buttons.key-cycle-list > button:nth-child(7) { grid-column: 1 / -1; }
  #etape-instrument.instrument-ready .levels-row { grid-template-columns: repeat(2,minmax(0,1fr)); }
}
@media (max-width: 560px) {
  #cle-buttons.key-cycle-list { grid-template-columns: 1fr 1fr !important; gap: 8px !important; }
  #cle-buttons.key-cycle-list > button { grid-template-columns: 42px 1fr; min-height: 76px; padding: 9px; }
  #cle-buttons.key-cycle-list > button::before { width: 42px; height: 42px; font-size: 25px; }
  #key-stages .levels-row { grid-template-columns: 1fr; }
  #key-stages .instrument-level-card { min-height: 86px; }
  #etape-instrument.instrument-ready .levels-row { grid-template-columns: 1fr 1fr; }
  #etape-instrument.instrument-ready .instrument-level-card { min-height: 145px; }
}

/* Sélection multiple des clés et parcours lisible sur tous les écrans. */
html, body { max-width: 100%; overflow-x: hidden; }
#cle-buttons .key-family-choices button { padding-right: 38px; }
#cle-buttons .key-family-choices button::after {
  content: ""; position: absolute; top: 9px; right: 9px; display: grid; place-items: center;
  width: 22px; height: 22px; color: #fff; background: #fff; border: 2px solid #9abbd5;
  border-radius: 50%; font-size: 14px; font-weight: 950;
}
#cle-buttons .key-family-choices button.selected::after { content: "✓"; background: #31a55d; border-color: #31a55d; }
#key-stages #go-button { display: block !important; width: min(360px,100%); margin: 16px auto 0; }
#key-stages #go-button:disabled { color: #6f8191; background: #dce7ee; box-shadow: none; cursor: not-allowed; }
#key-stages .instrument-level-card.selected { color: #fff; background: linear-gradient(145deg,#238ee0,#1768bc); border-color: #1768bc; }
#key-stages .instrument-level-card.selected > span:last-child { color: #eaf6ff; }
.key-context { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px 14px; max-width: 900px; margin: 13px auto 4px; padding: 10px 14px; background: #eef7fd; border: 1px solid #cfe5f4; border-radius: 13px; }
.key-context strong { color: #154f84; }.key-context span { color: #526d84; }

@media (max-width: 760px) {
  .section { width: calc(100% - 12px); margin-inline: auto; padding: 12px 9px 18px; }
  .tutorial-entry { margin-bottom: 8px; }
  .mode-buttons { margin-bottom: 9px; }
  .mode-buttons > p { margin-block: 6px 9px; font-size: 14px; }
  .mode-buttons > div { gap: 5px !important; }
  .mode-buttons button { min-height: 46px; padding: 8px 4px; font-size: 15px; }
  .step-container { scroll-margin-top: 8px; }
  #cle-buttons.key-cycle-list { grid-template-columns: 1fr !important; gap: 8px !important; margin-top: 8px; }
  #cle-buttons .key-family-block { padding: 10px; }
  #cle-buttons .key-family-choices, #cle-buttons .key-family-expert .key-family-choices { grid-template-columns: 1fr 1fr; }
  #cle-buttons .key-family-expert button { display: grid; min-height: 72px; text-align: left; }
  #key-stages .levels-row { grid-template-columns: 1fr 1fr !important; gap: 7px; }
  #key-stages .instrument-level-card { min-height: 104px; padding: 9px; }
  #key-stages .instrument-level-card:last-child { grid-column: 1 / -1; }
  #defi-cles.challenge-board.challenge-path-five { grid-template-columns: 1fr !important; gap: 7px; }
  #defi-cles.challenge-path-five .defi-card, #defi-cles.challenge-path-five .defi-card:last-child { grid-column: auto; min-height: 78px; }
  #etape-instrument .families-row, #etape-instrument .subfamilies-row, #etape-instrument .instruments-row { scroll-margin-top: 8px; }
  #etape-instrument.instrument-ready .levels-row { grid-template-columns: 1fr 1fr; gap: 7px; }
  #etape-instrument.instrument-ready .instrument-level-card { min-height: 130px; padding: 10px; }
}
@media (max-width: 390px) {
  #cle-buttons .key-family-choices, #cle-buttons .key-family-expert .key-family-choices,
  #key-stages .levels-row, #etape-instrument.instrument-ready .levels-row { grid-template-columns: 1fr !important; }
  #key-stages .instrument-level-card:last-child { grid-column: auto; }
}

/* Couche d'autorité 0806j : dimensions fluides et commandes cohérentes. */
.section, .step-container, .key-family-block, .key-family-choices,
.levels-row, .challenge-board, .families-row, .subfamilies-row, .instruments-row {
  min-width: 0;
  max-width: 100%;
}
.mode-buttons button, .families-row button, .subfamilies-row button,
.instruments-row button, #cle-buttons button, #key-stages button,
#defi-cles button { margin: 0; }
.mode-buttons button { background: #1769c2 !important; }
.mode-buttons button.selected { background: #2799eb !important; }

@media (max-width: 700px) {
  body { padding-inline: 5px !important; }
  .notalix-bar { width: 100%; grid-template-columns: 1fr 1fr; overflow: hidden; }
  .notalix-brand { max-width: 100%; justify-content: center; overflow: hidden; }
  .notalix-home, .notalix-site { width: 100%; max-width: 100%; justify-content: center; white-space: normal; }
  .notalix-note { flex: 0 0 auto; }
  .notalix-word { overflow: hidden; text-overflow: ellipsis; }
  .section { width: 100%; max-width: 100%; padding-inline: 9px; overflow: hidden; }
  .tutorial-entry { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
  .tutorial-entry > span { grid-column: 1 / -1; }
  .tutorial-entry button { width: 100%; min-width: 0; margin: 0; padding-inline: 5px; font-size: 12px; }
  .mode-buttons > div { width: 100%; max-width: 100% !important; }
  #cle-buttons .key-family-choices { width: 100%; }
  #cle-buttons .key-family-choices button { width: 100%; min-width: 0; }
  #etape-cle .instrument-intro, #etape-defi .challenge-promise { max-width: 100%; }
  #etape-instrument .levels-row, #key-stages .levels-row { width: 100%; }
  #defi-cles.challenge-board.challenge-path-five { width: 100%; }
}

@media (max-width: 430px) {
  .notalix-bar { grid-template-columns: 1fr; }
  .notalix-brand { grid-column: 1; }
  .notalix-home { grid-column: 1; grid-row: 2; }
  .notalix-site { display: none; }
  .mode-buttons > div { grid-template-columns: 1fr !important; }
  #cle-buttons .key-family-choices,
  #cle-buttons .key-family-expert .key-family-choices,
  #key-stages .levels-row,
  #etape-instrument.instrument-ready .levels-row { grid-template-columns: 1fr !important; }
}

/* 0806m — parcours visibles sans faire chercher la suite plus bas. */
body:has(#etape-cle.show) .section {
  margin-top: 8px;
  padding-top: 8px;
  padding-bottom: 10px;
}
body:has(#etape-cle.show) .tutorial-entry {
  display: flex;
  margin-bottom: 7px;
}
body:has(#etape-cle.show) .mode-buttons { margin-bottom: 7px; }
body:has(#etape-cle.show) .mode-buttons > p {
  display: block;
  margin: 2px 0 5px;
  font-size: 15px;
}
body:has(#etape-cle.show) .mode-buttons button { min-height: 46px; padding-block: 8px; }
body:has(#etape-cle.show) #etape-cle .path-heading { margin: 2px auto 4px; }
body:has(#etape-cle.show) #etape-cle .path-icon { width: 46px; height: 46px; }
body:has(#etape-cle.show) #etape-cle .key-purpose-intro { margin: 2px auto 5px !important; padding: 6px 12px; }
body:has(#etape-cle.show) #cle-buttons.key-cycle-list { gap: 6px; margin: 5px auto 3px; }
body:has(#etape-cle.show) #cle-buttons .key-family-block { min-height: 0; padding: 6px; }
body:has(#etape-cle.show) #cle-buttons .key-family-block header { margin-bottom: 6px; }
body:has(#etape-cle.show) #cle-buttons .key-family-block header > span { width: 34px; height: 34px; }
body:has(#etape-cle.show) #cle-buttons .key-family-choices { gap: 6px; }
body:has(#etape-cle.show) #cle-buttons .key-family-choices button,
body:has(#etape-cle.show) #cle-buttons .key-family-expert button {
  min-height: 58px;
  padding-block: 5px;
}
body:has(#etape-cle.show) .key-context { margin: 5px auto 2px; padding: 5px 9px; }
body:has(#etape-cle.show) .key-stage-heading { margin: 4px auto; }
body:has(#etape-cle.show) #key-stages .levels-row {
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 7px;
  max-width: 1080px;
}
body:has(#etape-cle.show) #key-stages .instrument-level-card {
  min-height: 76px;
  padding: 6px;
}
body:has(#etape-cle.show) #key-stages .instrument-level-card .level-number {
  width: 32px;
  height: 32px;
  margin-bottom: 4px;
  font-size: 16px;
}
body:has(#etape-cle.show) #key-stages .instrument-level-card strong { font-size: 14px; }
body:has(#etape-cle.show) #key-stages .instrument-level-card > span:last-child { font-size: 11px; }
body:has(#etape-cle.show) #key-stages #go-button { margin-top: 5px; min-height: 38px; padding-block: 5px; }

@media (max-height: 900px) and (min-width: 761px) {
  body:has(#etape-cle.show) .path-heading .path-kicker,
  body:has(#etape-cle.show) .key-family-block header small,
  body:has(#etape-cle.show) #key-stages .instrument-level-card > span:last-child { display: none; }
  body:has(#etape-cle.show) #etape-cle .path-heading { margin: 2px auto; }
  body:has(#etape-cle.show) #cle-buttons .key-family-choices button,
  body:has(#etape-cle.show) #cle-buttons .key-family-expert button { min-height: 52px; }
  body:has(#etape-cle.show) #key-stages .instrument-level-card { min-height: 62px; }
}

@media (max-width: 760px) {
  body:has(#etape-cle.show) .section { margin-top: 5px; }
  body:has(#etape-cle.show) #cle-buttons .key-family-block { padding: 7px; }
  body:has(#etape-cle.show) #cle-buttons .key-family-choices button,
  body:has(#etape-cle.show) #cle-buttons .key-family-expert button { min-height: 62px; }
  body:has(#etape-cle.show) #key-stages .levels-row { grid-template-columns: 1fr 1fr !important; }
  body:has(#etape-cle.show) #key-stages .instrument-level-card { min-height: 78px; }
  body:has(#etape-cle.show) #key-stages .instrument-level-card:last-child { grid-column: 1 / -1; }
}

/* 0807a — accueils Clé et Défi plus légers : une couleur indique l'action,
   les autres éléments restent calmes et lisibles. */
body:has(#etape-cle.show) .mode-buttons button:not(.selected),
body:has(#etape-defi.show) .mode-buttons button:not(.selected) {
  color: #26445f;
  background: #f7f9fb !important;
  border: 1px solid #d6e0e8;
  box-shadow: none;
}
body:has(#etape-cle.show) .mode-buttons #btn-cle.selected {
  background: #586fc4 !important;
}
body:has(#etape-defi.show) .mode-buttons #btn-defi.selected {
  background: #f09427 !important;
}
body:has(#etape-cle.show) #etape-cle .path-icon {
  background: linear-gradient(145deg, #7465bf, #514a9d);
  box-shadow: 0 7px 17px rgba(81,74,157,.18);
}
body:has(#etape-cle.show) #etape-cle .key-purpose-intro {
  background: #faf9fc;
  border-color: #e4e0eb;
}
body:has(#etape-cle.show) #cle-buttons .key-family-block {
  background: #fbfcfd;
  border-color: #dde4e9;
}
body:has(#etape-cle.show) #cle-buttons .key-family-registers {
  background: #fbfbfd;
  border-color: #e1e2ea;
}
body:has(#etape-cle.show) #cle-buttons .key-family-expert {
  background: #fcfbfd;
  border-color: #e7e0ec;
}
body:has(#etape-cle.show) #cle-buttons .key-family-essential > header > span {
  background: #3b8d81;
}
body:has(#etape-cle.show) #cle-buttons .key-family-registers > header > span {
  background: #6c6caf;
}
body:has(#etape-cle.show) #cle-buttons .key-family-expert > header > span {
  background: #9a6b9e;
}
body:has(#etape-cle.show) #cle-buttons .key-family-choices button::before {
  color: #367a72;
  background: #edf7f4;
}
body:has(#etape-cle.show) #cle-buttons .key-family-registers button::before {
  color: #6263a8;
  background: #f0f0f8;
}
body:has(#etape-cle.show) #cle-buttons .key-family-expert button::before {
  color: #8c5e91;
  background: #f7eff7;
}
body:has(#etape-cle.show) #cle-buttons .key-family-choices button:hover,
body:has(#etape-cle.show) #cle-buttons .key-family-choices button.selected {
  color: #fff;
  background: #566ab2 !important;
  border-color: #566ab2;
}
body:has(#etape-defi.show) #etape-defi .challenge-heading .path-icon {
  background: linear-gradient(145deg, #ffb13b, #ec7c21);
}
body:has(#etape-defi.show) #defi-cles.challenge-path-five .defi-card:nth-child(1)::before {
  background: linear-gradient(145deg, #52a99b, #2d7f74) !important;
}
body:has(#etape-defi.show) #defi-cles.challenge-path-five .defi-card:nth-child(2)::before {
  background: linear-gradient(145deg, #69b96f, #3d9148) !important;
}
body:has(#etape-defi.show) #defi-cles.challenge-path-five .defi-card:nth-child(3)::before {
  background: linear-gradient(145deg, #8b78d5, #6452b2) !important;
}
body:has(#etape-defi.show) #defi-cles.challenge-path-five .defi-card:nth-child(4)::before {
  color: #fff !important;
  background: linear-gradient(145deg, #f6a83a, #dd7d20) !important;
}
body:has(#etape-defi.show) #defi-cles.challenge-path-five .defi-card:nth-child(5)::before {
  color: #654800 !important;
  background: linear-gradient(145deg, #ffe37a, #efb92d) !important;
}

@media (max-width: 760px) {
  body:has(#etape-cle.show) .tutorial-entry { margin-bottom: 5px; }
  body:has(#etape-cle.show) .mode-buttons > p { font-size: 13px; }
}

/* 0807b — en-tête de navigation strictement identique dans les trois modes.
   Tout ce qui précède la ligne de séparation conserve sa place au changement. */
.section {
  margin-top: 20px;
  padding-top: 24px;
  padding-bottom: 18px;
}
.tutorial-entry {
  display: flex;
  min-height: 42px;
  margin: 0 auto 14px;
}
.mode-buttons {
  margin: 0 0 12px;
  padding-bottom: 14px;
}
.mode-buttons > p {
  display: block;
  min-height: 25px;
  margin: 0 0 7px;
  font-size: 17px;
  line-height: 25px;
}
.mode-buttons button {
  min-height: 52px;
  padding-block: 9px;
  color: #29445f;
  background: #f7f9fb !important;
  border: 1px solid #d9e1e8;
  box-shadow: none;
}
.mode-buttons button.selected,
body:has(#etape-cle.show) .mode-buttons #btn-cle.selected,
body:has(#etape-defi.show) .mode-buttons #btn-defi.selected {
  color: #fff;
  background: #586fc4 !important;
  border-color: #586fc4;
  box-shadow: 0 6px 14px rgba(62,79,151,.18);
}

@media (max-height: 900px) and (min-width: 761px) {
  .section {
    margin-top: 12px;
    padding-top: 14px;
  }
  .tutorial-entry { margin-bottom: 8px; }
  .mode-buttons { margin-bottom: 8px; padding-bottom: 10px; }
  .mode-buttons button { min-height: 46px; }
}

@media (max-width: 760px) {
  .section { margin-top: 6px; padding-top: 10px; }
  .tutorial-entry { min-height: 0; margin-bottom: 7px; }
  .mode-buttons > p { min-height: 0; font-size: 14px; line-height: 1.3; }
}

/* 0807d — même en-tête de contenu pour Clé, Instruments et Défi. */
#etape-cle > .mode-section-heading,
#etape-instrument > .mode-section-heading,
#etape-defi > .mode-section-heading {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  min-height: 58px;
  margin: 8px auto 2px;
}

.mode-section-heading .path-icon,
body:has(#etape-cle.show) #etape-cle .mode-section-heading .path-icon,
body:has(#etape-defi.show) #etape-defi .mode-section-heading .path-icon {
  width: 48px;
  height: 48px;
  color: #fff;
  background: linear-gradient(145deg, #ffb13b, #ec7c21) !important;
  border-radius: 15px;
  box-shadow: 0 7px 17px rgba(214,111,12,.22);
  font-size: 29px;
}

.mode-section-heading .path-kicker,
body:has(#etape-cle.show) .mode-section-heading .path-kicker {
  display: block !important;
  margin: 0 0 2px;
  color: #1f6fc9;
  font-size: 11px;
  font-weight: 900;
  line-height: 1.2;
  letter-spacing: .11em;
  text-align: left;
  text-transform: uppercase;
}

.mode-section-heading h3,
#etape-instrument .mode-section-heading h3 {
  margin: 0;
  color: #17304e;
  font-size: clamp(1.3rem, 2.5vw, 1.65rem);
  line-height: 1.15;
  text-align: left;
}

#etape-cle > .mode-section-subtitle,
#etape-instrument > .mode-section-subtitle,
#etape-defi > .mode-section-subtitle {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  width: min(100%, 900px);
  min-height: 29px;
  margin: 4px auto 12px !important;
  padding: 0 !important;
  color: #536b82;
  background: transparent !important;
  border: 0 !important;
  border-radius: 0;
  font-size: 14px;
  line-height: 1.35;
  text-align: center;
}

@media (max-height: 900px) and (min-width: 761px) {
  #etape-cle > .mode-section-heading,
  #etape-instrument > .mode-section-heading,
  #etape-defi > .mode-section-heading {
    min-height: 52px;
    margin-top: 3px;
  }
  .mode-section-heading .path-icon,
  body:has(#etape-cle.show) #etape-cle .mode-section-heading .path-icon,
  body:has(#etape-defi.show) #etape-defi .mode-section-heading .path-icon {
    width: 44px;
    height: 44px;
    font-size: 26px;
  }
  #etape-cle > .mode-section-subtitle,
  #etape-instrument > .mode-section-subtitle,
  #etape-defi > .mode-section-subtitle { margin-bottom: 8px !important; }
}

@media (max-width: 520px) {
  #etape-cle > .mode-section-heading,
  #etape-instrument > .mode-section-heading,
  #etape-defi > .mode-section-heading { justify-content: flex-start; }
  #etape-cle > .mode-section-subtitle,
  #etape-instrument > .mode-section-subtitle,
  #etape-defi > .mode-section-subtitle { justify-content: flex-start; text-align: left; }
}
/* 0807e — bandeau supérieur strictement identique dans les trois modes */
body:has(#etape-cle.show) .section,
body:has(#etape-instrument.show) .section,
body:has(#etape-defi.show) .section {
  margin-top: 20px;
  padding-top: 24px;
  padding-bottom: 18px;
}

body:has(#etape-cle.show) .tutorial-entry,
body:has(#etape-instrument.show) .tutorial-entry,
body:has(#etape-defi.show) .tutorial-entry {
  display: flex;
  min-height: 42px;
  margin: 0 auto 14px;
}

body:has(#etape-cle.show) .mode-buttons,
body:has(#etape-instrument.show) .mode-buttons,
body:has(#etape-defi.show) .mode-buttons {
  margin: 0 0 12px;
  padding-bottom: 14px;
}

body:has(#etape-cle.show) .mode-buttons > p,
body:has(#etape-instrument.show) .mode-buttons > p,
body:has(#etape-defi.show) .mode-buttons > p {
  display: block;
  min-height: 25px;
  margin: 0 0 7px;
  font-family: inherit;
  font-size: 17px;
  font-weight: 400;
  line-height: 25px;
  letter-spacing: normal;
}

body:has(#etape-cle.show) .mode-buttons button,
body:has(#etape-instrument.show) .mode-buttons button,
body:has(#etape-defi.show) .mode-buttons button {
  min-height: 52px;
  padding-block: 9px;
}

@media (max-height: 900px) and (min-width: 761px) {
  body:has(#etape-cle.show) .section,
  body:has(#etape-instrument.show) .section,
  body:has(#etape-defi.show) .section {
    margin-top: 12px;
    padding-top: 14px;
    padding-bottom: 18px;
  }

  body:has(#etape-cle.show) .tutorial-entry,
  body:has(#etape-instrument.show) .tutorial-entry,
  body:has(#etape-defi.show) .tutorial-entry {
    margin-bottom: 8px;
  }

  body:has(#etape-cle.show) .mode-buttons,
  body:has(#etape-instrument.show) .mode-buttons,
  body:has(#etape-defi.show) .mode-buttons {
    margin-bottom: 8px;
    padding-bottom: 10px;
  }

  body:has(#etape-cle.show) .mode-buttons button,
  body:has(#etape-instrument.show) .mode-buttons button,
  body:has(#etape-defi.show) .mode-buttons button {
    min-height: 46px;
  }
}

@media (max-width: 760px) {
  body:has(#etape-cle.show) .section,
  body:has(#etape-instrument.show) .section,
  body:has(#etape-defi.show) .section {
    margin-top: 6px;
    padding-top: 10px;
    padding-bottom: 18px;
  }

  body:has(#etape-cle.show) .tutorial-entry,
  body:has(#etape-instrument.show) .tutorial-entry,
  body:has(#etape-defi.show) .tutorial-entry {
    margin-bottom: 7px;
  }

  body:has(#etape-cle.show) .mode-buttons,
  body:has(#etape-instrument.show) .mode-buttons,
  body:has(#etape-defi.show) .mode-buttons {
    margin-bottom: 8px;
    padding-bottom: 9px;
  }

  body:has(#etape-cle.show) .mode-buttons > p,
  body:has(#etape-instrument.show) .mode-buttons > p,
  body:has(#etape-defi.show) .mode-buttons > p {
    min-height: 0;
    margin-bottom: 5px;
    font-size: 14px;
    line-height: 1.3;
  }
}

/* 0807g - couche finale : les cinq défis restent lisibles après toutes les anciennes règles. */
#defi-cles.challenge-board.challenge-path-five {
  display: grid !important;
  grid-template-columns: repeat(6, minmax(0, 1fr)) !important;
  gap: 10px !important;
  width: min(100%, 1120px) !important;
  margin: 12px auto 0 !important;
}
#defi-cles.challenge-path-five .defi-card {
  position: relative;
  display: grid !important;
  grid-column: span 2;
  grid-template-columns: 56px minmax(0, 1fr) auto;
  grid-template-rows: auto auto;
  align-items: center;
  column-gap: 12px;
  min-height: 112px !important;
  padding: 16px !important;
  color: #17304e !important;
  text-align: left !important;
  background: linear-gradient(145deg, #fff, #f5f9fc) !important;
  border: 1px solid #d8e5ee !important;
  border-radius: 18px !important;
  box-shadow: 0 9px 22px rgba(20, 63, 98, .09) !important;
}
#defi-cles.challenge-path-five .defi-card:nth-child(4),
#defi-cles.challenge-path-five .defi-card:nth-child(5) { grid-column: span 3; }
#defi-cles.challenge-path-five .defi-card::before {
  content: attr(data-defi-symbol);
  grid-column: 1;
  grid-row: 1 / 3;
  display: grid;
  place-items: center;
  width: 56px;
  height: 56px;
  color: #fff;
  background: linear-gradient(145deg, #43aa9d, #218b85);
  border-radius: 15px;
  font-size: 29px;
  font-weight: 900;
  box-shadow: 0 7px 16px rgba(35, 139, 133, .2);
}
#defi-cles.challenge-path-five .defi-card:nth-child(2)::before { background: linear-gradient(145deg, #66be72, #399c50); }
#defi-cles.challenge-path-five .defi-card:nth-child(3)::before { background: linear-gradient(145deg, #8a74da, #6852be); }
#defi-cles.challenge-path-five .defi-card:nth-child(4)::before { background: linear-gradient(145deg, #ffad3c, #ed8426); }
#defi-cles.challenge-path-five .defi-card:nth-child(5)::before { color: #715000; background: linear-gradient(145deg, #ffe16f, #ffc936); }
#defi-cles.challenge-path-five .defi-card > small {
  grid-column: 2;
  grid-row: 1;
  color: #56809f;
  font-size: 11px;
  font-weight: 900;
  line-height: 1.1;
  letter-spacing: .08em;
  text-transform: uppercase;
}
#defi-cles.challenge-path-five .defi-card > strong {
  grid-column: 2;
  grid-row: 2;
  color: #17304e;
  font-size: 18px;
  line-height: 1.15;
}
#defi-cles.challenge-path-five .defi-card > span {
  grid-column: 2 / 4;
  grid-row: 3;
  margin-top: 6px;
  color: #5a7287;
  font-size: 13px;
  font-weight: 650;
  line-height: 1.3;
}
#defi-cles.challenge-path-five .defi-card > em {
  grid-column: 3;
  grid-row: 1 / 3;
  align-self: center;
  padding: 7px 9px;
  color: #176bc2;
  background: #eaf5fd;
  border-radius: 10px;
  font-size: 12px;
  font-style: normal;
  font-weight: 900;
}
#defi-cles.challenge-path-five .defi-card:hover,
#defi-cles.challenge-path-five .defi-card:focus-visible {
  transform: translateY(-3px);
  border-color: #8fc6ec !important;
  box-shadow: 0 13px 25px rgba(20, 90, 145, .14) !important;
}
@media (max-width: 900px) {
  #defi-cles.challenge-board.challenge-path-five { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
  #defi-cles.challenge-path-five .defi-card,
  #defi-cles.challenge-path-five .defi-card:nth-child(4) { grid-column: span 1; }
  #defi-cles.challenge-path-five .defi-card:nth-child(5) { grid-column: 1 / -1; }
}
@media (max-width: 560px) {
  #defi-cles.challenge-board.challenge-path-five { grid-template-columns: 1fr !important; }
  #defi-cles.challenge-path-five .defi-card,
  #defi-cles.challenge-path-five .defi-card:nth-child(4),
  #defi-cles.challenge-path-five .defi-card:nth-child(5) {
    grid-column: 1 !important;
    min-height: 92px !important;
    padding: 12px !important;
  }
  #defi-cles.challenge-path-five .defi-card::before { width: 48px; height: 48px; font-size: 25px; }
  #defi-cles.challenge-path-five .defi-card > strong { font-size: 16px; }
}