/* ============================================================
   FORMULAIRES
   ============================================================ */

.input-group {
  margin: 24px 0;
}

.tiny-label {
  display: block;

  margin-bottom: 8px;

  color: var(--dim);

  font-size: 10px;
  font-weight: 700;

  letter-spacing: .1em;
}

.phone-input {
  width: 100%;

  padding: 16px;

  background: var(--surface-card);

  border: 1px solid var(--line);
  border-radius: 10px;

  color: #ffffff;

  font-size: 16px;
  font-family: var(--mono);

  outline: none;
}

.phone-input:focus {
  border-color: var(--line-focus);
}


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

.btn {
  width: 100%;

  border-radius: 10px;

  padding: 16px;

  font-size: 14px;
  font-weight: 600;

  cursor: pointer;

  transition:
    transform .15s ease,
    opacity .2s ease,
    background .2s ease;
}

.btn.primary {
  border: none;

  background: linear-gradient(
    135deg,
    var(--brand) 0%,
    #9e330e 100%
  );

  color: #ffffff;

  box-shadow: 0 4px 20px var(--brand-glow);
}

.btn.primary:active {
  transform: scale(.98);
}

.btn:disabled {
  opacity: .25;

  background: var(--surface-card);

  border: 1px solid var(--line);

  color: var(--dim);

  box-shadow: none;

  cursor: not-allowed;
}

.back-btn {
  display: inline-flex;
  align-items: center;

  margin-bottom: 24px;
  padding: 0;

  background: transparent;
  border: none;

  color: var(--dim);

  font-size: 12px;
  font-weight: 500;

  cursor: pointer;
}


/* ============================================================
   TABLEAU DE BORD
   ============================================================ */

.hero {
  margin-bottom: 24px;
  padding: 24px;

  background: linear-gradient(
    135deg,
    #111 0%,
    #0b0b0b 60%,
    #101010 100%
  );

  border: 1px solid var(--line);
  border-radius: 12px;
}

.modules-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.module-card {
  padding: 20px;

  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 10px;
}

.module-card.eval {
  border-left: 3px solid var(--brand);
  background: #11141d;
}

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

  margin-bottom: 8px;
}

.module-badge {
  padding: 4px 8px;

  border: 1px solid var(--line);
  border-radius: 6px;

  color: var(--muted);

  font-size: 9px;
}

.eva-module-badge {
  border: 1px solid var(--brand);
}


/* ============================================================
   CHRONOMÈTRE
   ============================================================ */

.timer-box {
  display: flex;
  align-items: center;
  gap: 6px;

  padding: 6px 12px;

  background: rgba(185, 64, 21, .06);

  border: 1px solid rgba(185, 64, 21, .2);
  border-radius: 8px;

  color: var(--brand);

  font-family: var(--mono);
  font-size: 13px;
  font-weight: 700;
}


/* ============================================================
   NAVIGATION DES QUESTIONS
   ============================================================ */

.quiz-nav-bar {
  display: flex;
  gap: 8px;

  overflow-x: auto;

  padding: 4px 0 16px;
  margin-bottom: 16px;

  -webkit-overflow-scrolling: touch;
}

.nav-pill {
  min-width: 36px;
  height: 36px;

  flex-shrink: 0;

  display: flex;
  align-items: center;
  justify-content: center;

  background: var(--surface-card);

  border: 1px solid var(--line);
  border-radius: 8px;

  color: var(--muted);

  font-family: var(--mono);
  font-size: 12px;
  font-weight: 600;

  cursor: pointer;
}

.nav-pill.active {
  background: var(--brand);
  border-color: var(--brand);

  color: #ffffff;

  box-shadow: 0 0 12px var(--brand-glow);
}

.nav-pill.filled {
  border-color: var(--dim);
  color: #ffffff;
}


/* ============================================================
   BADGE CONCOURS
   ============================================================ */

.concours-tag {
  display: inline-block;

  margin-bottom: 16px;
  padding: 6px 10px;

  background: rgba(255, 255, 255, .03);

  border: 1px solid var(--line);
  border-radius: 6px;

  color: var(--muted);

  font-size: 10px;
  font-weight: 600;

  letter-spacing: .05em;
}


/* ============================================================
   ZONE DE RÉPONSE
   ============================================================ */

.input-response-wrapper {
  display: flex;
  justify-content: center;

  width: 100%;
  max-width: 140px;

  margin: 16px auto;

  background: var(--surface-card);

  border: 1px solid var(--line);
  border-radius: 12px;

  overflow: hidden;
}

.input-response-wrapper.horizontal {
  max-width: 220px;
}

.dice-input-container {
  position: relative;

  width: 100%;
  height: 52px;

  display: flex;
  align-items: center;
  justify-content: center;
}

.contest-input {
  position: relative;
  z-index: 5;

  width: 100%;
  height: 100%;

  padding: 0;

  background: transparent;
  border: none;

  color: #ffffff;

  text-align: center;

  font-family: var(--mono);
  font-size: 20px;
  font-weight: 600;

  outline: none;
}

.contest-input.hidden-text {
  color: transparent !important;
  caret-color: #ffffff;
}

.contest-input:focus {
  background: rgba(255, 255, 255, .02);
}

.dice-overlay {
  position: absolute;
  inset: 0;
  z-index: 2;

  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;

  pointer-events: none;
}


/* ============================================================
   CONTRAINTES DE L'ÉPREUVE
   ============================================================ */

.constraints-card {
  margin: 28px 0;
  padding: 24px 20px;

  background: var(--surface-card);

  border: 1px solid var(--line);
  border-radius: 14px;
}

.constraints-card h3 {
  margin: 0 0 20px;

  color: #ffffff;

  font-size: 11px;
  font-weight: 700;

  letter-spacing: .1em;
  text-transform: uppercase;
}

.constraint-item {
  display: flex;
  align-items: flex-start;

  gap: 16px;

  margin-bottom: 20px;

  color: var(--muted);

  font-size: 14px;
  line-height: 1.5;
}

.constraint-item:last-child {
  margin-bottom: 0;
}

.constraint-item strong,
.constraint-item .c-label {
  color: #ffffff;
  font-weight: 600;
}

.constraint-item .c-desc {
  color: var(--muted);

  font-size: 13px;
}


/* ============================================================
   BLOC CONSEIL
   ============================================================ */

.advice-box {
  margin-top: 24px;
  padding: 16px;

  background: rgba(185, 64, 21, .03);

  border: 1px solid rgba(185, 64, 21, .15);
  border-radius: 12px;
}

.advice-title {
  margin-bottom: 6px;

  color: var(--brand);

  font-size: 10px;
  font-weight: 700;

  letter-spacing: .05em;
  /*text-transform: uppercase;*/
}

.advice-text {
  color: var(--muted);

  font-size: 13px;
  line-height: 1.4;
}


/* Note : les variantes horizontale/verticale de .input-response-wrapper et
   .dice-input-container, ainsi que .real-dice/.dice-pip, sont définies une
   seule fois plus haut dans ce fichier (section "ZONE DE RÉPONSE") et dans
   Figures/dice.css. Les doublons qui vivaient ici (avec un `var(--line2)`
   jamais déclaré nulle part, qui invalidait la bordure des cases inconnues)
   ont été supprimés pour éviter que les deux définitions ne se marchent
   dessus selon l'ordre de chargement des fichiers CSS.