/* =========================================================================
   Verrou de classe — Imagilire Mini                     (Lot 6, tâche 2)
   -------------------------------------------------------------------------
   Deux endroits, deux besoins :

     · le bloc « Code de la classe » de la modale des profils, où l'enseignant
       pose ou retire le code ;
     · le champ de code de la modale parentale, qui reprend
       `.parental-protection-input` et n'ajuste que ce qui distingue quatre
       chiffres masqués d'un résultat d'addition.

   L'avertissement du formulaire est le seul élément volontairement lourd de
   ce bloc. Poser un code sans porte dérobée est une décision qu'on ne défait
   pas : elle doit se lire avant le clic, pas se découvrir en septembre
   suivant.
   ========================================================================= */

.school-lock {
    margin-top: 18px;
    padding-top: 16px;
    border-top: 1px dashed #cbd5e0;
}

.school-lock-title {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 0 0 8px;
    font-size: 16px;
    color: #333;
}

.school-lock-title i {
    color: #667eea;
}

.school-lock-note {
    margin: 0 0 12px;
    font-size: 13px;
    line-height: 1.45;
    color: #666;
}

.school-lock-label {
    display: block;
    margin: 10px 0 4px;
    font-size: 13px;
    font-weight: 600;
    color: #333;
}

/* `letter-spacing` et `text-align` : quatre puces masquées sans espacement
   se lisent comme une seule tache, et l'on ne voit pas combien on a tapé. */
.school-lock-input {
    width: 140px;
    padding: 10px 12px;
    border: 2px solid #cbd5e0;
    border-radius: 8px;
    font-family: inherit;
    font-size: 18px;
    text-align: center;
    letter-spacing: 0.4em;
    text-indent: 0.4em;
    background: white;
    color: #333;
}

.school-lock-input:focus {
    outline: none;
    border-color: #667eea;
    box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.2);
}

/* Le seul élément appuyé du bloc, et il l'est exprès : ce verrou n'a pas de
   « j'ai oublié le code », parce qu'un tel bouton serait exactement le chemin
   qu'un élève emprunterait. Le prix de cette absence se lit ici. */
.school-lock-warning {
    display: flex;
    gap: 10px;
    margin: 14px 0;
    padding: 10px 12px;
    border-left: 4px solid #ecc94b;
    border-radius: 0 6px 6px 0;
    background: #fffaf0;
    font-size: 12.5px;
    line-height: 1.45;
    color: #744210;
}

.school-lock-warning i {
    flex: 0 0 auto;
    margin-top: 2px;
    color: #b7791f;
}

.school-lock-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    padding: 11px 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;
}

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

/* L'attribut `hidden` ne vaut qu'un `display: none` de feuille par défaut :
   le `inline-flex` ci-dessus le battait, et « Retirer le code » restait
   affiché sur un profil sans code. Repéré en recette à 375 px, où les deux
   boutons se lisaient l'un sous l'autre. La règle est portée par le sélecteur
   plutôt que par un `!important` global. */
.school-lock-btn[hidden] {
    display: none;
}

.school-lock-btn--remove {
    border-color: #f56565;
    color: #c53030;
}

.school-lock-btn--remove:hover,
.school-lock-btn--remove:focus-visible {
    background: #f56565;
    color: white;
}

.school-lock-status {
    margin: 12px 0 0;
    font-size: 13px;
    font-weight: 600;
    line-height: 1.45;
}

.school-lock-status[data-ton="succes"] { color: #2f855a; }
.school-lock-status[data-ton="erreur"] { color: #c53030; }

/* --------- Champ de code dans la modale parentale --------- */

/* Reprend `.parental-protection-input` : seuls l'espacement des puces et la
   largeur changent. Quatre caractères dans un champ prévu pour « 67 » se
   perdraient au milieu. */
.parental-protection-code {
    max-width: 160px;
    letter-spacing: 0.5em;
    text-indent: 0.5em;
}

/* Le bouton « Vérifier » pendant une attente après trois erreurs : inerte, et
   qui se voit inerte. Un bouton qui ne répond pas sans le dire passe pour une
   panne — le décompte, lui, est écrit dans la ligne d'erreur. */
.parental-protection-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.parental-protection-input:disabled {
    background: #edf2f7;
    cursor: not-allowed;
}

@media (max-width: 600px) {
    .school-lock-input {
        width: 100%;
        max-width: 180px;
    }
}