.egd-wrap{
  max-width:980px;
  margin:0 auto 30px auto;
}

.egd-app{
  background:#fff;
}

.egd-topbar{
  display:flex;
  flex-direction:column;
  gap:14px;
  margin-bottom:18px;
}

/* =========================
   BARRE DE STATUTS
   ========================= */

.egd-toolbar-status{
  display:flex;
  justify-content:flex-end;
  align-items:center;
  gap:12px;
  flex-wrap:wrap;
}

.egd-status-item{
  min-height:44px;
  padding:0 16px;
  border:1px solid #ececec;
  border-radius:10px;
  background:#fafafa;
  box-sizing:border-box;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:6px;
  white-space:nowrap;
}

.egd-status-label{
  display:inline-block;
  margin:0;
  padding:0;
  font-size:16px;
  font-weight:700;
  color:#555;
  line-height:1.1;
  white-space:nowrap;
}

.egd-status-value{
  display:inline-block;
  margin:0;
  padding:0;
  font-size:18px;
  font-weight:700;
  color:#111;
  line-height:1.1;
  white-space:nowrap;
}

#egdVisitorBox{
  min-width:260px;
}

/* =========================
   BOUTONS / OPTIONS
   ========================= */

.egd-btn-primary{
  background:#111;
  color:#fff;
  height:44px;
  padding:0 20px;
  border-radius:12px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  box-sizing:border-box;
}
.egd-btn-primary.egd-btn{
  padding:0 20px;
}
.egd-toolbar-settings{
  display:flex;
  justify-content:space-between;
  align-items:flex-end;
  gap:14px;
  flex-wrap:wrap;
}

.egd-field{
  display:flex;
  flex-direction:column;
  gap:6px;
  min-width:220px;
  flex:1 1 220px;
}

.egd-label{
  font-size:13px;
  font-weight:700;
  color:#008cd6;
}

.egd-select{
  width:100%;
  height:44px;
  padding:0 12px;
  border:1px solid #d9d9d9;
  border-radius:10px;
  background:#fff;
  font-size:15px;
  color:#222;
}

.egd-btn{
  appearance:none;
  border:none;
  border-radius:12px;
  padding:10px 18px;
  font-size:15px;
  font-weight:700;
  cursor:pointer;
  transition:opacity .2s ease, transform .15s ease;
}

.egd-btn:active{
  transform:translateY(1px);
}

.egd-btn-primary:hover{
  opacity:.95;
}

.egd-btn-answer{
  background:#f7f7f7;
  color:#222;
  border:1px solid #dfdfdf;
  min-width:70px;
  text-align:center;
}

.egd-btn-answer:hover{
  background:#eeeeee;
}

.egd-btn-answer.is-correct{
  background:#edf8f0;
  color:#166836;
  border-color:#a9d4b5;
}

.egd-answer-area{
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  gap:10px;
}

.egd-btn-answer.is-wrong{
  background:#fff1f1;
  color:#9e1f1f;
  border-color:#e5b5b5;
}

.egd-btn-answer.is-solution{
  background:#fff8e8;
  color:#7b5b12;
  border-color:#e8d49a;
}

.egd-btn-locked{
  background:#faf6e8;
  color:#6a5a21;
  border:1px solid #e6d79c;
  cursor:not-allowed;
}

.egd-access-note{
  padding:12px 14px;
  font-size:14px;
  line-height:1.55;
  color:#5a4c1f;
  background:#fff8dc;
  border:1px solid #f0e0a0;
  border-radius:12px;
  margin-top: 12px;	
}

.egd-access-note a{
  color:#8a1f11;
  font-weight:700;
  text-decoration:underline;
}

.egd-card{
  border:1px solid #e9e9e9;
  border-radius:18px;
  padding:22px 20px;
  background:#fff;
  box-shadow:0 1px 4px rgba(0,0,0,.04);
}

.egd-question-intro{
  font-size:22px;
  font-weight:700;
  color:#111;
  text-align:center;
  margin-bottom:8px;
}

.egd-question-text{
  font-size:18px;
  line-height:1.4;
  color:#333;
  font-weight:600;
  text-align:center;
  margin-bottom:8px;
}

.egd-question-text .egd-emph{
  text-decoration:underline;
}

.egd-question-hint{
  font-size:14px;
  color:#777;
  margin-bottom:18px;
  text-align:center;
}

.egd-question-visual{
  margin-bottom:18px;
}

.egd-image-question{
  text-align:center;
  margin:12px 0 20px 0;
}

.egd-scale-image{
  max-width:820px;
  width:100%;
  height:auto;
  display:block;
  margin:0 auto;
  user-select:none;
  -webkit-user-drag:none;
}

.egd-answer-area{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  margin-bottom:18px;
}

.egd-feedback{
  min-height:28px;
  font-size:15px;
  font-weight:700;
  margin-bottom:8px;
}

.egd-feedback.is-correct{
  color:#18743a;
}

.egd-feedback.is-wrong{
  color:#a11f1f;
}

.egd-correction{
  min-height:10px;
  font-size:15px;
  line-height:1.6;
  color:#444;
}

.egd-correction strong{
  color:#111;
}

.egd-scale-row{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  justify-content:center;
}

.egd-scale-note{
  min-width:62px;
  text-align:center;
  padding:10px 12px;
  border:1px solid #ddd;
  border-radius:10px;
  background:#fafafa;
  font-size:18px;
  font-weight:700;
}

.egd-scale-note.is-missing{
  background:#fffdf2;
  border:1px dashed #d6b55b;
}

.egd-scale-note.is-tonic{
  background:#f4f7fb;
}

.egd-scale-note.is-changed{
  background:#f8f4ff;
  border-color:#d6c8f1;
}

.egd-inline-answer{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  align-items:center;
}

.egd-text-answer{
  width:96px;
  height:44px;
  padding:0 10px;
  border:1px solid #d9d9d9;
  border-radius:10px;
  font-size:16px;
  text-align:center;
}

.egd-text-answer:focus{
  outline:none;
  border-color:#999;
}

.egd-identify-wrap{
  display:flex;
  justify-content:center;
  align-items:center;
  gap:12px;
  flex-wrap:wrap;
  margin-top:10px;
}

.egd-tonic-select{
  width:120px;
  min-width:120px;
  max-width:120px;
  height:44px;
  padding:0 12px;
  border:1px solid #d9d9d9;
  border-radius:10px;
  background:#fff;
  font-size:15px;
  color:#222;
}

.egd-radio-group{
  display:flex;
  align-items:center;
  gap:18px;
  flex-wrap:nowrap;
}

.egd-radio-option{
  display:inline-flex;
  align-items:center;
  gap:6px;
  font-size:15px;
  color:#222;
  white-space:nowrap;
}

.egd-submit-btn{
  background:#111;
  color:#fff;
}

.egd-submit-btn[disabled]{
  opacity:.45;
  cursor:default;
}

.egd-next-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:auto;
  min-width:0;
  padding:10px 18px;
  background:#f2f2f2;
  color:#111;
  border:1px solid #d9d9d9;
  border-radius:10px;
  font-size:14px;
  font-weight:700;
}

.egd-wrong-notes-wrap{
  width:100%;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:16px;
}

.egd-wrong-notes-row{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  justify-content:center;
}

.egd-selectable-note{
  min-width:64px;
  text-align:center;
  padding:12px 14px;
  border:1px solid #d9d9d9;
  border-radius:12px;
  background:#fafafa;
  color:#222;
  font-size:18px;
  font-weight:700;
  cursor:pointer;
  user-select:none;
  transition:all .15s ease;
}

.egd-selectable-note:hover{
  background:#f2f2f2;
}

.egd-selectable-note.is-selected{
  background:#111;
  color:#fff;
  border-color:#111;
}

.egd-selectable-note.is-correct-note{
  background:#edf8f0;
  color:#166836;
  border-color:#a9d4b5;
}

.egd-selectable-note.is-wrong-note{
  background:#fff1f1;
  color:#9e1f1f;
  border-color:#e5b5b5;
}

.egd-selectable-note.is-missed-note{
  background:#fff8e8;
  color:#7b5b12;
  border-color:#e8d49a;
}

@media (max-width:760px){
  .egd-toolbar-status{
    justify-content:flex-start;
    gap:10px;
  }

.egd-toolbar-settings{
  flex-direction:column;
  align-items:stretch;
  justify-content:flex-start;
  gap:14px;
}

.egd-field{
  width:100%;
  min-width:0;
  flex:0 0 auto;
}

  .egd-select{
    width:100%;
  }

  .egd-btn-primary{
    width:100%;
  }

  .egd-question-text{
    font-size:22px;
  }

  .egd-scale-note{
    min-width:54px;
    font-size:17px;
  }

  .egd-text-answer{
    width:84px;
  }

  .egd-identify-wrap{
    flex-wrap:wrap;
    align-items:flex-start;
  }

  .egd-tonic-select{
    width:100%;
    max-width:none;
  }

  .egd-radio-group{
    width:100%;
    flex-wrap:wrap;
    gap:12px;
  }

  .egd-selectable-note{
    min-width:56px;
    font-size:17px;
    padding:10px 12px;
  }

  #egdVisitorBox{
    min-width:0;
    width:100%;
  }
}