/*
    Styles COMMUNS à tous les thèmes du site (console #BE3881, site standard #1A465F...).
    Chargé sur tout le site dans App.razor : il ne contient que des composants (champs, bouton œil...),
    sans effet sur une page qui n'utilise pas leurs classes.

    La couleur d'accent de ces composants vient de la variable --theme-primaire, définie par le thème de la page
    (console.css ou site.css). Sans thème, c'est le gris foncé de Bootstrap qui est utilisé.
*/

/* =====================================================================================
   Champs de formulaire
   ===================================================================================== */

/* Champs de saisie un peu plus hauts que la normale : plus confortables au doigt sur mobile */
.champ .form-control {
    padding: 0.75rem;
}

/* Message d'erreur sous un champ (« L'identifiant est obligatoire. »...) */
.champ .validation-message {
    font-size: 0.85rem;
    margin-top: 0.25rem;
}

/* Champ de saisie d'un code de vérification : chiffres espacés, plus lisibles */
.code-sms {
    letter-spacing: 0.5em;
    font-variant-numeric: tabular-nums; /* chiffres de même largeur */
}

/* =====================================================================================
   Champ mot de passe avec bouton « œil » (composant BoutonOeil + wwwroot/script/Paramétrage/console.js)
   Le conteneur .champ-mdp sert de repère : le bouton est positionné par-dessus le champ, à droite.
   ===================================================================================== */

.champ-mdp {
    position: relative;
}

/* Réserve la place du bouton à droite, pour que le texte saisi ne passe pas dessous */
.champ-mdp .form-control {
    padding-right: 3rem;
}

/* Microsoft Edge ajoute son propre œil dans les champs mot de passe : on le masque pour ne pas en avoir deux */
.champ-mdp input::-ms-reveal,
.champ-mdp input::-ms-clear {
    display: none;
}

/* Le bouton lui-même : transparent, sur toute la hauteur du champ, collé à droite */
.bouton-oeil {
    position: absolute;
    top: 0;
    right: 0;
    height: 100%;
    width: 3rem;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    border: 0;
    background: transparent;
    color: var(--bs-secondary-color); /* gris discret de Bootstrap */
    cursor: pointer;
}

/* Au survol : couleur du thème de la page (repli : gris foncé Bootstrap) */
.bouton-oeil:hover {
    color: var(--theme-primaire, var(--bs-emphasis-color));
}

/* Une seule icône visible à la fois : l'œil par défaut, l'œil barré quand le mot de passe est affiché
   (la classe « visible » est ajoutée / retirée par console.js) */
.bouton-oeil .icone-masquer,
.bouton-oeil.visible .icone-afficher {
    display: none;
}

.bouton-oeil.visible .icone-masquer {
    display: inline;
}

/* Surcharge le style originel boostrap pour l'adapter au style standard du site */
.btn-link-white {
    /* État normal */
    --bs-btn-color: #fff;
    --bs-btn-bg: transparent;
    --bs-btn-border-color: transparent;
    /* Survol de la souris */
    --bs-btn-hover-color: #d8d8d8;
    --bs-btn-hover-bg: transparent;
    --bs-btn-hover-border-color: transparent;
    /* Pendant le clic */
    --bs-btn-active-color: #d8d8d8;
    --bs-btn-active-bg: transparent;
    --bs-btn-active-border-color: transparent;
    /* Bouton désactivé (Bootstrap ajoute lui-même la transparence) */
    --bs-btn-disabled-color: #373737;
    --bs-btn-disabled-bg: transparent;
    --bs-btn-disabled-border-color: transparent;
}

    /*
    Pas d'anneau de focus après un clic : app.css (modèle Blazor) en dessine un en bleu sur tous les boutons
    (.btn:focus → box-shadow), qui restait visible autour du lien après avoir cliqué dessus.
*/
    .btn-link-white:focus,
    .btn-link-white:active:focus {
        box-shadow: none;
    }

    /* ... mais on le garde pour la navigation au CLAVIER (touche Tab), sous forme d'un halo blanc discret :
   sans lui, on ne verrait plus où l'on se trouve dans la page (accessibilité) */
    .btn-link-white:focus-visible {
        box-shadow: 0 0 0 0.2rem rgba(255, 255, 255, 0.6);
    }