/* =========================================================================
   Configuration de classe — Imagilire Mini              (Lot 6, tâche 1)
   -------------------------------------------------------------------------
   Le bloc « Configuration de classe » de la modale des profils : deux
   commandes et, surtout, le compte rendu de l'import.

   Ce compte rendu est la raison d'être de cette feuille. L'import se
   contentait jusqu'ici d'une `alert()` qui disait « appliquée ✅ » même
   lorsqu'elle n'avait rien appliqué. Trois tons suffisent à répondre à la
   seule question que se pose un enseignant devant une tablette de classe :
   qu'est-ce qui est posé, et qu'est-ce qui ne l'est pas.

     · **retenu**  — vert sobre : le réglage est écrit ;
     · **ajusté**  — ambre : écrit, mais pas exactement comme demandé, et la
       ligne dit pourquoi ;
     · **refusé**  — rouge : rien n'a été écrit pour cette clé.

   La couleur ne porte jamais seule l'information — chaque ligne s'explique
   en toutes lettres. Un enseignant daltonien lit le même compte rendu, et
   c'est aussi ce que demande le Lot 7.
   ========================================================================= */

.preset-classe {
    border-top: 2px solid #e0e0e0;
    padding-top: 16px;
}

.preset-classe-title {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 0 0 8px;
    font-size: 17px;
    color: #333;
}

.preset-classe-title i {
    color: #667eea;
}

/* « Rien ne transite par le réseau » est écrit dans le bloc et pas seulement
   dans la documentation : c'est la question que se pose un adulte au moment
   d'échanger un fichier entre les postes d'une école, et le moment où il faut
   y répondre. Même règle que le bloc d'export des statistiques. */
.preset-classe-note {
    margin: 0 0 14px;
    font-size: 13px;
    line-height: 1.45;
    color: #666;
}

.preset-classe-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    padding: 12px 18px;
    border: 2px solid #667eea;
    border-radius: 10px;
    background: white;
    color: #4c51bf;
    font-family: inherit;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.2s ease, color 0.2s ease;
}

.preset-classe-btn:hover,
.preset-classe-btn:focus-visible {
    background: #667eea;
    color: white;
}

.preset-classe-label {
    display: block;
    margin: 16px 0 6px;
    font-size: 14px;
    font-weight: 600;
    color: #333;
}

/* Le champ de fichier reste **visible**, et n'est pas déguisé en bouton par
   un `<label for>` : un label n'est pas atteignable au clavier, et le
   remplacement cosmétique aurait coûté l'accès à la seule commande d'import. */
.preset-classe input[type="file"] {
    width: 100%;
    font-size: 13px;
}

/* Le retour après un import ou un export : combien de réglages, et sinon
   pourquoi aucun. `role="status"` le fait annoncer aux lecteurs d'écran —
   sans cette phrase, rien ne distingue « appliqué » de « bouton sans effet ». */
.preset-classe-status {
    margin: 14px 0 0;
    font-size: 13px;
    font-weight: 600;
    line-height: 1.45;
}

.preset-classe-status[data-ton="succes"]  { color: #2f855a; }
.preset-classe-status[data-ton="partiel"] { color: #b7791f; }
.preset-classe-status[data-ton="erreur"]  { color: #c53030; }

.preset-classe-report {
    margin: 10px 0 0;
    padding: 0;
    list-style: none;
    max-height: 220px;
    overflow-y: auto;
}

.preset-classe-ligne {
    padding: 6px 10px;
    margin-bottom: 4px;
    border-left: 4px solid #cbd5e0;
    border-radius: 0 6px 6px 0;
    background: #f7fafc;
    font-size: 12.5px;
    line-height: 1.4;
    color: #4a5568;
    /* Un nom de clé refusé (`imagilire-syll-underline`) ne se coupe sur aucune
       espace : sans cela, la liste part en défilement latéral en 375 px. */
    overflow-wrap: anywhere;
}

.preset-classe-ligne--retenu { border-left-color: #48bb78; }
.preset-classe-ligne--ajuste { border-left-color: #ecc94b; background: #fffaf0; }
.preset-classe-ligne--refus  { border-left-color: #f56565; background: #fff5f5; }
.preset-classe-ligne--info   { border-left-color: #667eea; background: #f7f7ff; }

@media (max-width: 600px) {
    .preset-classe-report {
        max-height: 40vh;
    }
}