/* =========================================================
   THOMATHS — FORMULAIRE INLINE + BOUTONS DE BASE
   =========================================================
   PORTÉE RÉELLE : `.inline-form` n'a plus qu'UN consommateur,
   _sheet_form.html (la modale « + Nouvelle feuille » de Cours & TD).
   Tout ce qui servait aux anciens formulaires d'exercice a été retiré
   (cf. commit de nettoyage) — ne pas rajouter ici de style qui ne
   concerne pas ce formulaire ou les boutons génériques.

   RESTE À FAIRE : les couleurs de ce fichier sont encore en dur
   (#3b82f6, #2a2a2a, #1e1e1e, #555…), c'est la dernière poche grise
   dans une interface bleu-ardoise. À passer sur les tokens — fait
   séparément parce que c'est un changement visible, pas du nettoyage.
   ========================================================= */

/* =========================================================
   1. FORMULAIRE INLINE — STRUCTURE & LAYOUT
   ========================================================= */

.inline-form {
    border: 1px solid var(--accent);
    background: var(--surface);
    border-radius: var(--radius);
    padding: 16px 20px;
    display: grid;
    grid-template-columns: 160px 1fr;
    column-gap: 16px;
    row-gap: 14px;
    position: relative;
    box-shadow: var(--shadow-lg);
}

/* =========================================================
   2. FORMULAIRE — CROIX DE FERMETURE
   ========================================================= */

/* C'est un <button> (il l'était en <span>, donc inatteignable au clavier) :
   min-width/padding/background/border sont remis à zéro, sinon il hérite du
   gabarit `button` ci-dessous — 120px de large et un fond de bouton. */
.form-close {
    position: absolute;
    top: 8px;
    right: 10px;

    min-width: 0;
    padding: 0;
    background: none;
    border: none;

    font-size: 1.1rem;
    font-weight: bold;
    line-height: 1;

    color: #c55;
    cursor: pointer;
    opacity: 0.6;

    z-index: 10;
    user-select: none;
}

.form-close:hover {
    opacity: 1;
    color: #e44;
}

/* =========================================================
   3. FORMULAIRE — LABELS & CHAMPS
   ========================================================= */

.inline-form > label {
    font-weight: 500;
    align-self: center;
    white-space: nowrap;
}

/* Colonne de droite de la grille label/champ. La liste ne contient que
   ce que _sheet_form.html utilise réellement : elle citait aussi
   .year-track-row, .track-row, .btn-group, .tag-input, .stars et
   .preview-block, tous supprimés depuis (classes sans aucun usage). */
.inline-form > input,
.inline-form > textarea {
    grid-column: 2;
}

.inline-form input,
.inline-form textarea {
    width: 100%;
    padding: 6px;background: var(--inset);color: var(--text);border: 1px solid var(--border);border-radius: var(--radius-sm);
}

.inline-form textarea {
    font-family: monospace;
    resize: none;
    overflow: hidden;
}

.inline-form details summary {
    margin-left: 0;
}

/* =========================================================
   4. FORMULAIRE — ACTIONS
   ========================================================= */

.form-actions {
    grid-column: 1 / -1;
    display: flex;
    justify-content: center;
    gap: 16px;
}

/* =========================================================
   5. BOUTONS GÉNÉRIQUES
   ========================================================= */

/* Gabarit commun à TOUS les <button> du site (padding, taille de texte,
   rayon). Le min-width de 120px est un piège connu : il élargit à tort
   tout bouton qui ne porte qu'une icône, d'où les `min-width: 0` que
   doivent écrire .btn-icon-sm, .button-outline, .sh-icon-btn… Le retirer
   toucherait tous les boutons du site — chantier à part, pas du
   nettoyage. */
button {
    min-width: 120px;
    padding: 8px 16px;

    font-size: 0.95rem;
    font-weight: 500;

    border-radius: 6px;
    cursor: pointer;
    border: 1px solid transparent;

    transition: background-color 0.15s, border-color 0.15s;
}

/* Les COULEURS de .button et .button-secondary vivent dans theme.css
   (tokens). Elles étaient aussi définies ici en dur (#3982b8 / #1e1e1e),
   mais theme.css est chargé après et gagnait déjà : ces définitions
   n'avaient aucun effet, elles ont été supprimées. Ne pas les réintroduire
   ici — un seul endroit par bouton. */

/* `disabled` posé en JS pendant une action longue (ex. génération IA) doit se
   voir. Les variantes ont leur propre règle :disabled dans theme.css ; celle-ci
   ne couvre que les <button> sans classe de variante. */
button:disabled {
    opacity: 0.5;
    cursor: default;
    pointer-events: none;
}

/* .btn-danger a été renommée .button-danger et vit dans theme.css avec les
   trois autres variantes. Ne pas la redéfinir ici. */

/* =========================================================
   6. ÉTOILES (DIFFICULTÉ)
   ========================================================= */

/* La couleur vient de theme.css (--star / --star-off) ; il ne reste ici
   que la taille et le curseur. `.star.hover` a été supprimée : le JS pose
   la classe `hovered` (exercise_meta.js), jamais `hover` — la règle ne
   pouvait pas s'appliquer. */
.star {
    font-size: 1.2rem;color: var(--star-off);transition: color 0.1s;
    cursor: pointer;
}

.star.active {
    color: var(--star);
}

/* =========================================================
   7. SPÉCIALISATIONS / OVERRIDES
   ========================================================= */

/* Zone volontairement réservée aux cas particuliers */