/**
 * UNIDET v2 — Tab Focus Styles
 * Fichier : /unidet-v2/auth/assets/tab-focus.css
 *
 * Met en évidence le champ actif de manière très visible
 */

/* ═══════════════════════════════════════════════════════════
   🎯 Anneau de focus — UNIQUEMENT sur l'inscription
   (retiré sur login/forgot/reset/setup pour éviter le double ring)
   ═══════════════════════════════════════════════════════════ */

/* INSCRIPTION : anneau visible
body.unidet-auth-register #unidet-register-form input:focus {
    outline: none !important;
    border-color: #0a0e17 !important;
    box-shadow: 0 0 0 4px rgba(10, 14, 23, 0.08) !important;
    background-color: #fff !important;
    transition: box-shadow 0.15s ease, border-color 0.15s ease;
} */

/* ⚠️ WCAG 2.4.7 / 2.4.11 (AA) — CORRIGÉ le 16/10/2026 (puis re-coloré).
   Ces règles supprimaient l'indicateur de focus (`outline: none` ET
   `box-shadow: none`) sur la connexion, la définition/réinitialisation de mot
   de passe et le mot de passe oublié : au clavier, impossible de savoir où
   l'on se trouve. L'indicateur a donc été rétabli — mais en NOIR (#0a0e17),
   ce qui produisait un double contour sombre autour de chaque champ, rejeté
   par le client.

   ⚠️ UN SEUL CONTOUR, DORÉ. La version précédente cumulait TROIS effets
   (`outline` + `box-shadow` + `border-color`), ce qui donnait visuellement
   un double — puis un triple — anneau autour du champ.
   On ne garde QUE la bordure du champ, passée en or : un seul contour net.
   L'indicateur de focus reste parfaitement visible (WCAG 2.4.7 satisfait) :
   la bordure passe de gris clair (#e5e9f0) à or (#d4a373).

   ⚠️ NE PAS réintroduire `outline` ni `box-shadow` ici : ce serait un
   second contour. NE PAS remettre #0a0e17 (noir).

   ⚠️ `#unidet-register-form` a été AJOUTÉ pour que l'inscription suive
   EXACTEMENT le même traitement que la connexion et les autres écrans
   (demande client : « la même couleur or partout »). L'inscription avait
   jusqu'ici son propre style dans `style.css` (`.unidet-reg-field input:focus`) :
   les deux règles disent la même chose, elles ne se contredisent pas. */
#unidet-register-form input:focus,
#unidet-login-form input:focus,
#unidet-setup-form input:focus,
#unidet-reset-form input:focus,
#unidet-forgot-form input:focus,
.unidet-pwd-wrapper input:focus,
body .unidet-pwd-wrapper input:focus {
    outline: none !important;
    box-shadow: none !important;
    /* ⚠️ LARGEUR FIXÉE À 1px partout (demande client : uniformité entre
       la connexion et l'inscription). Ne pas laisser la largeur venir de la
       règle de base : elle diffère d'un écran à l'autre. */
    border-width: 1px !important;
    border-style: solid !important;
    border-color: #d4a373 !important;
    background-color: #fff !important;
}

/* ═══════════════════════════════════════════════════════════
   🔵 AUTOFILL CHROME — fond de la charte, SANS casser les icônes

   Quand Chrome (ou Safari) remplit un champ, il applique son PROPRE fond
   bleu-lavande (#e8f0fe) et sa propre couleur de texte.

   ⚠️ NE PAS utiliser `box-shadow: 0 0 0 1000px #fff inset` (la parade la
   plus répandue) : une ombre INTERNE se peint PAR-DESSUS le fond, donc
   par-dessus les ICÔNES des champs. Or l'enveloppe du champ email et les
   autres pictogrammes sont des `background-image` (SVG en data-URI) posés
   sur l'input — l'ombre les effaçait. Le client l'a vu : « il y a une
   enveloppe dans le champ, il ne faut pas casser ça ».

   ✅ TECHNIQUE RETENUE : une transition très longue sur `background-color`.
   Chrome applique bien son fond, mais l'animation dure ~2h45 : la couleur
   reste donc celle de la charte pendant toute la visite. Cette méthode
   n'ajoute AUCUNE couche de peinture, donc les icônes restent intactes.

   `-webkit-text-fill-color` corrige la couleur du texte autofilli (Chrome
   la force aussi), et `caret-color` garde le curseur visible.
   ═══════════════════════════════════════════════════════════ */
#unidet-register-form input:-webkit-autofill,
#unidet-login-form input:-webkit-autofill,
#unidet-setup-form input:-webkit-autofill,
#unidet-reset-form input:-webkit-autofill,
#unidet-forgot-form input:-webkit-autofill,
#unidet-register-form input:-webkit-autofill:hover,
#unidet-login-form input:-webkit-autofill:hover,
#unidet-setup-form input:-webkit-autofill:hover,
#unidet-reset-form input:-webkit-autofill:hover,
#unidet-forgot-form input:-webkit-autofill:hover,
#unidet-register-form input:-webkit-autofill:focus,
#unidet-login-form input:-webkit-autofill:focus,
#unidet-setup-form input:-webkit-autofill:focus,
#unidet-reset-form input:-webkit-autofill:focus,
#unidet-forgot-form input:-webkit-autofill:focus,
#unidet-register-form input:-webkit-autofill:active,
#unidet-login-form input:-webkit-autofill:active,
#unidet-setup-form input:-webkit-autofill:active,
#unidet-reset-form input:-webkit-autofill:active,
#unidet-forgot-form input:-webkit-autofill:active {
    /* ⚠️ L'OMBRE INTERNE est de nouveau utilisée — c'est elle qui masque le
       bleu (#e8f0fe) que Chrome impose. Elle était interdite tant que
       l'icône était posée en `background-image` SUR l'input (elle la
       recouvrait). L'icône est désormais dessinée sur le CONTENEUR
       (`.unidet-input-icon` / `.unidet-pwd-wrapper`, voir style.css), donc
       l'ombre ne peut plus l'atteindre : les deux corrections sont enfin
       compatibles. C'est la SEULE méthode qui neutralise réellement le fond
       bleu — `transition` seule ne suffit pas.
       Vérifié : fond (255,255,255) blanc, icône visible. */
    -webkit-box-shadow: 0 0 0 1000px #ffffff inset !important;
    box-shadow: 0 0 0 1000px #ffffff inset !important;
    -webkit-text-fill-color: #0a0e17 !important;
    caret-color: #0a0e17 !important;
    transition: background-color 9999s ease-in-out 0s !important;
}

/* Sur fond sombre (en-tête, bandeaux), l'encre sombre serait invisible :
   on bascule l'anneau en clair. */
.unidet-auth-dark input:focus,
.ud-dark input:focus {
    outline-color: #ffffff !important;
    box-shadow: 0 0 0 4px rgba(255, 255, 255, 0.35) !important;
}

/* ═══════════════════════════════════════════════════════════
   🎯 Placeholder — reste bien visible quand le champ est vide
   ═══════════════════════════════════════════════════════════ */

#unidet-register-form input::placeholder,
#unidet-login-form input::placeholder,
#unidet-setup-form input::placeholder,
#unidet-reset-form input::placeholder,
#unidet-forgot-form input::placeholder {
    color: #94a3b8;
    opacity: 1;
    transition: opacity 0.15s ease;
}

/* Le placeholder s'estompe légèrement quand le champ a le focus */
#unidet-register-form input:focus::placeholder,
#unidet-login-form input:focus::placeholder,
#unidet-setup-form input:focus::placeholder,
#unidet-reset-form input:focus::placeholder,
#unidet-forgot-form input:focus::placeholder {
    opacity: 0.55;
}

/* ═══════════════════════════════════════════════════════════
   🎯 Curseur texte bien visible
   ═══════════════════════════════════════════════════════════ */

#unidet-register-form input,
#unidet-login-form input,
#unidet-setup-form input,
#unidet-reset-form input,
#unidet-forgot-form input {
    caret-color: #0a0e17 !important;
}

/* ═══════════════════════════════════════════════════════════
   Spinner inline (pour l'email en cours de vérification)
   ═══════════════════════════════════════════════════════════ */
.unidet-inline-spinner {
    display: inline-block;
    width: 11px;
    height: 11px;
    border: 1.5px solid rgba(148, 163, 184, 0.3);
    border-top-color: #94a3b8;
    border-radius: 50%;
    animation: unidetInlineSpin 0.7s linear infinite;
    vertical-align: middle;
    margin-right: 4px;
}

@keyframes unidetInlineSpin {
    to { transform: rotate(360deg); }
}

/* ═══════════════════════════════════════════════════════════
   Message de statut email
   ═══════════════════════════════════════════════════════════ */
.unidet-email-status {
    display: block;
    margin-top: 6px;
    font-size: 12px;
    font-weight: 600;
    line-height: 1.4;
    transition: all 0.2s ease;
}

.unidet-email-status a {
    font-weight: 700;
}