/* =========================================================
   MODULE ACCORDS — UI
   Fichier : jeux/accords/accords-ui.css
   ========================================================= */


/* CONTENEUR PRINCIPAL */

.accords-app {
  margin: 25px 0;
}


/* EN-TÊTE MODULE */
.accords-option-card .accords-timed-line {
  display: flex;
  align-items: center;
  gap: 10px;
}

.accords-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  flex-wrap: wrap;
  background: #f5f8fc;
  border: 1px solid #d8e4f2;
  border-radius: 8px;
  padding: 14px 18px;

  margin-bottom: 18px;
}
.accords-header h2 {
  margin: 0;
}
.accords-header h3 {
  margin: 0;
  line-height: 1.2;
}

.accords-header p {
  margin: 0;
}


/* SWITCH NOTATION */

.accords-notation-form {
  display: flex;
  gap: 8px;
  align-items: center;       /* aligne parfaitement avec le titre */
  margin: 0;
}

.accords-notation-form button {
  border: 1px solid #2f6fb5;
  background: white;
  color: #2f6fb5;

  padding: 8px 12px;
  border-radius: 5px;

  font-weight: bold;
  cursor: pointer;
}
.accords-notation {
  display: flex;
  gap: 10px;
}

.accords-notation button {
  padding: 6px 12px;
}
.accords-notation-form button.is-active {
  background: #2f6fb5;
  color: white;
}


/* SELECTEUR MODE */

.accords-toolbar {
  margin: 18px 0;
}

.accords-toolbar label {
  display: block;
  font-weight: bold;
  margin-bottom: 6px;
}

.accords-toolbar select {
  width: 100%;
  max-width: 520px;
  padding: 9px;
  border: 1px solid #ccc;
}


/* CARTE PRINCIPALE */

.accords-card {
  border: 1px solid #ddd;
  background: white;
  padding: 18px;
  border-radius: 8px;
}


/* TITRE EXERCICE */

.accords-kicker {
  font-size: 13px;
  text-transform: uppercase;
  color: #666;
  margin-bottom: 6px;
}

.accords-question h4 {
  margin: 0 0 10px 0;
  font-size: 24px;
}


/* ZONE DE TRAVAIL */

.accords-work-area {
  margin: 20px 0;
}


/* BOUTONS NOTES */

.accords-note {
  display: inline-flex;
  align-items: center;
  justify-content: center;

  min-width: 54px;
  min-height: 40px;

  margin: 6px;

  border: 1px solid #bbb;
  background: #f7f7f7;

  padding: 8px 13px;

  border-radius: 20px;

  cursor: pointer;
  font-weight: bold;
}

.accords-note:hover {
  background: #eef4fb;
  border-color: #2f6fb5;
}

.accords-note.is-selected {
  background: #fff2b8;
  border-color: #d5a800;
}

.accords-note:disabled {
  opacity: 0.75;
  cursor: default;
}


/* ZONES 1 / 3 / 5 / 7 */

.accords-zones {
  display: grid;
  grid-template-columns: repeat(4, minmax(95px, 1fr));
  gap: 12px;
}

.accords-zone {
  border: 2px dashed #bbb;
  min-height: 60px;

  padding: 10px;

  border-radius: 8px;

  background: #fafafa;
  text-align: center;

  transition: background 0.2s ease, border-color 0.2s ease;
  cursor: pointer;
}

.accords-zone.is-active {
  background: #fff8d8;
  border-color: #d5a800;
}

.accords-zone strong {
  display: block;
  margin-bottom: 5px;
  font-weight: bold;
}

.accords-zone span {
  display: block;
  font-weight: bold;
}


/* NOTES DU MODE CLASSIFY */

.accords-classify-notes {
  margin-top: 18px;

  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
}

.accords-classify-notes .accords-note {
  margin: 0;
}


/* MODE REORDER */

.accords-reorder-box {
  margin: 12px 0 16px 0;
  padding: 12px;
  background: #f7f7f7;
  border: 1px solid #ddd;
  border-radius: 8px;
  min-height: 44px;
}

.accords-note-placed {
  display: inline-flex;
  align-items: center;
  justify-content: center;

  min-width: 50px;
  margin: 5px;
  padding: 8px 12px;

  background: #fff2b8;
  border: 1px solid #d5a800;
  border-radius: 20px;

  font-weight: bold;
}


/* BOUTONS ACTION */

.accords-actions {
  margin-top: 15px;
}

.accords-actions button {
  border: 1px solid #2f6fb5;
  background: #2f6fb5;
  color: white;

  padding: 8px 14px;

  border-radius: 5px;

  font-weight: bold;
  cursor: pointer;

  margin-right: 8px;
}

.accords-actions button:hover {
  background: #255a94;
}


/* FEEDBACK */

.accords-feedback {
  margin-top: 15px;
  padding: 12px;
  border-radius: 6px;
  display: none;
}

.accords-feedback.is-ok {
  display: block;
  background: #e9f8e9;
  border: 1px solid #9ed49e;
}

.accords-feedback.is-ko {
  display: block;
  background: #fff0f0;
  border: 1px solid #e2a0a0;
}


/* RESPONSIVE */

@media screen and (max-width: 700px) {

  .accords-header {
    display: block;
  }

  .accords-notation-form {
    margin-top: 14px;
  }

  .accords-zones {
    grid-template-columns: repeat(2, 1fr);
  }

  .accords-note {
    min-width: 50px;
    min-height: 38px;
    padding: 8px 12px;
  }

}

@media screen and (max-width: 420px) {

  .accords-zones {
    grid-template-columns: 1fr;
  }

}