/* core/buttons.css

   Boutons et liens d'action : principal, secondaire, tertiaire.

   Chargé par index.html, dans l'ordre de css/README.md. Ne pas changer cet
   ordre sans relire la section « Ordre de chargement ». */

/* ---------- buttons ---------- */

.btn {
  border: 1px solid var(--border);
  border-radius: var(--r);
  /* Hauteur visée : environ 36 px, la taille courante d'un bouton d'interface.
     Les commandes ne doivent pas peser plus lourd que le contenu. */
  padding: 8px 14px;
  font-size: var(--fs-3);
  line-height: 1.35;
  font-weight: 500;
  font-family: var(--sans);
  cursor: pointer;
  background: var(--surface);
  color: var(--text);
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.btn:hover { border-color: var(--primary); }

.btn-primary {
  background: var(--primary);
  color: var(--on-primary);
  border-color: var(--primary);
  font-weight: 500;
}

.btn-primary:hover {
  filter: brightness(1.05);
  background: var(--primary-strong);
  border-color: var(--primary-strong);
}

.btn-ghost { background: none; border-color: transparent; color: var(--muted); }

.btn-ghost:hover { color: var(--text); border-color: transparent; }

.btn-danger { color: var(--red); }

.btn-danger:hover { border-color: var(--red); }

.btn-block { width: 100%; padding: 10px; font-size: var(--fs-3); }

.btn-small { padding: 5px 10px; font-size: var(--fs-2); }

.btn:disabled { opacity: .4; cursor: not-allowed; }

.btn-compact { padding: 6px 12px; font-size: var(--fs-2); }

.btn-quiet {
  background: var(--surface-2);
  border: 1px solid var(--border);
  color: var(--text);
  border-radius: var(--r);
  padding: 6px 12px;
  font: inherit;
  font-size: var(--fs-2);
  line-height: 1.35;
  cursor: pointer;
}

.btn-quiet:hover { border-color: var(--border-strong); }

/* =========================================================
   Correction question par question

   Écran de travail : l'enseignant y enchaîne des dizaines de copies. La
   question porte la page, tout le reste s'efface. Pas de carte, pas de cadre
   autour de chaque section : l'espace vide sépare aussi bien qu'un trait.
   ========================================================= */

.link-back {
  background: none;
  border: none;
  padding: 0;
  font: inherit;
  font-size: var(--fs-2);
  color: var(--muted);
  cursor: pointer;
}

.link-back:hover { color: var(--text); }

.link-quiet {
  background: none;
  border: none;
  padding: 0;
  font: inherit;
  font-size: var(--fs-2);
  color: var(--muted);
  cursor: pointer;
}

.link-quiet:hover:not(:disabled) { color: var(--text); }

.link-quiet:disabled { opacity: .35; cursor: not-allowed; }

.link-more {
  background: none;
  border: none;
  padding: 0;
  font: inherit;
  font-size: var(--fs-2);
  color: var(--primary);
  cursor: pointer;
  white-space: nowrap;
}

.link-more:hover { text-decoration: underline; }

.link-inline { color: var(--primary); }

/* =========================================================
   Hiérarchie des actions
   Principale : fond or, une seule par zone.
   Secondaire : filet, texte plein.
   Tertiaire : texte seul (Retour, Voir le résultat, Annuler).
   ========================================================= */

.btn-secondary {
  background: transparent;
  border-color: var(--border-strong);
  color: var(--text);
}

.btn-secondary:hover { border-color: var(--text); }

.btn-text {
  background: none;
  border: none;
  padding: 8px 4px;
  font: inherit;
  font-size: var(--fs-3);
  font-weight: 500;
  color: var(--text);
  cursor: pointer;
  /* Souligné dès le départ : sur téléphone il n'y a pas de survol, et un texte
     sans soulignement ni cadre ne se distingue pas du texte courant. */
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}

.btn-text:hover { text-decoration-thickness: 2px; }

/* Dans l'en-tête, « Connexion » est lisible comme action à côté de
   « S'inscrire » : pas de soulignement, comme le reste de la navigation. */
.site-actions .btn-text { text-decoration: none; }
.site-actions .btn-text:hover { text-decoration: underline; }

.btn-text:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }

.site-actions .btn,
.action-row .btn,
.ex-item-actions .btn,
.next-task-row .btn,
.rec-actions .btn,
.state-action .btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 40px;
  padding: 8px 16px;
}

.link-back {
  display: inline-flex;
  align-items: center;
  min-height: 40px;
  font-size: var(--fs-3);
}

/* Mode clair : le bleu nuit des liens est presque la couleur du texte. Le
   soulignement porte donc la différence, sans attendre le survol. */
:root[data-theme="light"] .link-more {
  text-decoration: underline;
  text-underline-offset: 3px;
}