/* ===========================================================================
   CONNEXION ET RÉCUPÉRATION DE MOT DE PASSE — /login, /t/{code}, /login/{code}
   Passation « Connexion et récupération de mot de passe » (design_handoff_connexion),
   maquette « Connexion EasyERP v2.dc.html ».

   POURQUOI CETTE FEUILLE EXISTE
     Les .cx-* vivaient en queue de wwwroot/app.css, entre le shell et la structure
     AdminLTE — un fichier que TOUS les écrans chargent, pour des classes qu'UN SEUL
     emploie. La règle du dépôt est celle des .ecran-*.css : un écran, une feuille,
     un <link> dans App.razor. Le déplacement ne change pas une valeur ; l'alignement
     de charte ci-dessous, si.

   CE QUE L'ALIGNEMENT CHANGE (passation § 1 — « uniquement des valeurs ») :
     arrondis 6/8/10/12px → 0 partout ; champs #f6f8fb sur #E6EAEF en 46px → blancs
     sur filet fort en 42px ; boutons 48px → 42px ; les quatre familles sémantiques
     de la charte (information, négatif, critique, neutre) remplacent les quatre
     teintes maison ; pastilles pleines et rondes → carrés bordés ; l'interactif
     dans la page passe de l'orange au bleu SAP.

   ET CE QU'IL NE CHANGE PAS : ni la mise en page, ni l'enchaînement des quatre
   états (connexion, demande, confirmation, succès), ni la logique.

   DEUX ÉCARTS ASSUMÉS À LA MAQUETTE, TOUS DEUX AU PROFIT DE LA CHARTE :
     1. Le panneau d'identité est MARINE --et-blue, non l'ardoise #354A5F de la
        maquette. L'argument de la passation — « l'identité applicative, au même
        titre que la barre du haut » — désigne ici le marine : c'est la teinte de
        la barre du haut, de l'écran de démarrage et des écrans d'authentification,
        et easytech-theme.css la nomme comme telle. Reprendre l'ardoise aurait
        appliqué le raisonnement de la maquette en contredisant sa conclusion.
     2. Aucune couleur n'est écrite en dur : les valeurs de la passation sont
        toutes des jetons --et-* existants, aux mêmes teintes. Elles suivront donc
        la prochaine bascule de charte au lieu de rester figées ici.
   =========================================================================== */

.cx-login {
    display: flex;
    min-height: 100vh;
    background: var(--et-surface);
    color: var(--et-ink);
    font-family: var(--et-font);
    -webkit-font-smoothing: antialiased;
}

/* --- Panneau d'identité (gauche) --------------------------------------- */
.cx-brand {
    position: relative;
    width: 46%;
    max-width: 620px;
    background: var(--et-blue);
    background-image: radial-gradient(1200px 620px at 18% -12%, rgba(255,255,255,.09), transparent 60%);
    overflow: hidden;
}
.cx-brand-motif { position: absolute; inset: 0; overflow: hidden; pointer-events: none; }
.cx-brand-motif svg { position: absolute; right: -180px; bottom: -200px; opacity: .13; }
.cx-brand-inner { position: relative; z-index: 1; display: flex; flex-direction: column; height: 100%; padding: 48px 52px; }
.cx-logo { align-self: flex-start; }
.cx-logo img { height: 96px; width: auto; display: block; }
.cx-brand-mid { margin-top: auto; }
.cx-h1 { margin: 0; font-size: 38px; line-height: 1.12; font-weight: 700; color: var(--et-sur-marine); letter-spacing: -0.025em; max-width: 16ch; }
.cx-tagline { margin: 16px 0 0; font-size: 16px; line-height: 1.5; color: var(--et-sur-marine-doux); max-width: 34ch; font-style: italic; }

/* Bandeau compact : sous 860px la colonne d'identité ne tient plus, elle devient
   une bande en tête du formulaire. Le basculement est ICI, en media query, et non
   dans un écouteur de redimensionnement côté composant (réserve n° 2 de la
   passation) — le CSS sait déjà faire, et l'état ne survit pas au serveur. */
.cx-bandeau {
    display: none;
    /* .cx-form centre ses enfants : sans align-self le bandeau se réduirait à son
       contenu au lieu de barrer la colonne. */
    align-self: stretch; flex: none;
    align-items: center; gap: 12px;
    margin: -24px -24px 6px; padding: 14px 18px;
    background: var(--et-blue);
    background-image: radial-gradient(600px 300px at 12% -30%, rgba(255,255,255,.10), transparent 60%);
    border-bottom: 3px solid var(--et-form-blue);
}
.cx-bandeau img { height: 40px; width: auto; display: block; }
.cx-bandeau .jeton {
    margin-left: auto; flex: none;
    display: inline-flex; align-items: center; gap: 6px;
    padding: 5px 10px; border: 1px solid var(--et-filet-marine);
    font-size: 12px; color: var(--et-sur-marine);
}

/* --- Colonne de formulaire (droite) ------------------------------------ */
.cx-form {
    position: relative; flex: 1; display: flex; flex-direction: column;
    align-items: center; padding: 24px;
}
/* Drapeaux des six États de la CEMAC, tracés en SVG plutôt que chargés en images. */
.cx-cemac {
    flex: none; padding-top: 18px; display: flex; flex-wrap: nowrap;
    align-items: center; justify-content: center; gap: 10px;
}
.cx-flag svg {
    width: 24px; height: 16px; display: block;
    box-shadow: 0 0 0 1px rgba(50,54,58,.16);
}
.cx-mention {
    flex: none; padding-top: 12px; text-align: center;
    font-family: var(--et-font-mono);
    font-size: 12px; color: var(--et-form-blue-encre); letter-spacing: .02em;
}
/* Sélecteur de langue : carré comme tout le reste — la pilule était le dernier
   arrondi de l'écran hors bouton. */
.cx-lang {
    position: absolute; top: 24px; right: 28px;
    display: inline-flex; align-items: center; gap: 7px;
    padding: 6px 12px; border: 1px solid var(--et-filet-fort);
    font-size: 13px; font-weight: 600; color: var(--et-muted);
}
/* Marges auto plutôt que justify-content:center sur .cx-form : la carte reste
   optiquement centrée même quand le pied (drapeaux + mention) occupe le bas. */
.cx-card { width: 100%; max-width: 420px; margin: auto 0; animation: cxUp .45s ease both; }
.cx-title { margin: 0; font-size: 26px; font-weight: 700; color: var(--et-ink); letter-spacing: -0.025em; }
.cx-sub { margin: 8px 0 0; font-size: 14px; color: var(--et-faint); }

/* --- Blocs de message : les quatre familles sémantiques de la charte ----
   Un message d'erreur dit QUOI FAIRE, pas seulement ce qui a échoué : d'où le
   titre, le détail, et l'action qui les suit. */
.cx-msg { margin-top: 18px; padding: 11px 14px; font-size: 13px; line-height: 1.5; animation: cxUp .2s ease both; }
.cx-msg .titre { font-weight: 600; }
.cx-msg .detail { margin-top: 6px; font-size: 13px; line-height: 1.5; color: var(--et-ink); }
.cx-msg.info     { background: var(--et-info-bg);         border: 1px solid var(--et-info);        color: var(--et-form-blue-d); }
.cx-msg.negatif  { background: var(--et-danger-badge-bg); border: 1px solid var(--et-danger-bord); color: var(--et-danger-ink); }
.cx-msg.critique { background: var(--et-avertissement-bg);border: 1px solid var(--et-avertissement-bord); color: var(--et-avertissement-ink); }
.cx-msg.neutre   { background: var(--et-neutre-bg);       border: 1px solid var(--et-filet-fort);  color: var(--et-table-head-encre); }
.cx-msg-ligne { display: flex; align-items: center; gap: 10px; }
.cx-msg-ligne svg { flex: none; }
/* L'action est un bouton (elle ne navigue pas), habillée en lien. */
.cx-msg-action {
    margin-top: 8px; padding: 0; border: none; background: none; cursor: pointer;
    font-family: inherit; font-size: 13px; font-weight: 600; color: var(--et-form-blue-encre);
}
.cx-msg-action:hover { color: var(--et-form-blue-d); text-decoration: underline; }

/* Verrouillage : le compte à rebours ET la jauge qui se vide. Un texte seul
   laisserait croire l'écran figé. */
.cx-blocage { margin-top: 18px; padding: 14px; background: var(--et-danger-badge-bg); border: 1px solid var(--et-danger-bord); animation: cxUp .2s ease both; }
.cx-blocage .tete { display: flex; align-items: center; gap: 10px; color: var(--et-danger-ink); font-size: 13px; font-weight: 600; }
.cx-blocage .tete svg { flex: none; }
.cx-blocage .detail { margin-top: 6px; font-size: 13px; line-height: 1.5; color: var(--et-ink); }
.cx-blocage .piste { margin-top: 10px; height: 4px; background: var(--et-danger-bord); overflow: hidden; }
.cx-blocage .fill { height: 100%; background: var(--et-danger); transition: width 1s linear; }

/* --- Champs : angles droits, blanc sur filet fort, 42px ---------------- */
.cx-label { display: block; font-size: 13px; font-weight: 600; color: var(--et-form-text); margin: 18px 0 7px; }
.cx-field { position: relative; }
.cx-ico-l { position: absolute; left: 13px; top: 50%; transform: translateY(-50%); color: var(--et-faint); display: grid; }
.cx-input {
    width: 100%; height: 42px; padding: 0 14px 0 40px;
    border: 1px solid var(--et-filet-fort); border-radius: var(--et-r);
    font-size: 14px; font-family: inherit; color: var(--et-form-text); background: var(--et-surface);
    transition: border-color .12s ease;
}
.cx-input::placeholder { color: var(--et-faint); }
/* Bordure bleue seule, sans anneau : l'orange ne se pose plus sur un focus, et la
   charte ne pose pas d'ombre portée sur une surface plate. */
.cx-input:focus { outline: none; border-color: var(--et-form-blue); }
.cx-input:disabled { background: var(--et-surface-2); color: var(--et-inerte); cursor: not-allowed; }
.cx-input-pass { padding-right: 44px; }
/* Code société : chasse fixe, comme partout où l'on affiche une référence (« 001 »).
   PAS de text-transform : ce qui est affiché doit être exactement ce qui sera envoyé.
   La place à droite est réservée au témoin de recherche. */
.cx-input-code { padding-right: 40px; font-family: var(--et-font-mono); letter-spacing: .04em; }
.cx-spin-champ {
    position: absolute; right: 14px; top: 50%; margin-top: -8px;
    width: 16px; height: 16px; border: 2px solid var(--et-rang); border-top-color: var(--et-form-blue);
    border-radius: 50%; animation: cxSpin .7s linear infinite;
}
/* Société venue du lien : la valeur est affichée, non saisie — surface grisée et
   filet, comme une valeur inerte du back-office. */
.cx-fige { display: flex; align-items: center; min-height: 42px; padding: 0 14px 0 40px; border: 1px solid var(--et-filet-fort); background: var(--et-surface-2); }
.cx-fige .cx-fige-txt { display: flex; flex-direction: column; line-height: 1.2; padding: 4px 0; }
.cx-fige .cx-fige-cle { font-size: 12px; color: var(--et-muted); }
.cx-fige .cx-fige-val { font-weight: 600; color: var(--et-ink); }

/* Une seule ligne sous un champ à la fois : aide, confirmation ou refus. */
.cx-hint { margin-top: 7px; font-size: 13px; line-height: 1.35; color: var(--et-faint); }
.cx-hint svg { vertical-align: -2px; margin-right: 4px; }
.cx-hint-ok { color: var(--et-ok); font-weight: 600; }
.cx-hint-ko { color: var(--et-danger-ink); }
.cx-hint a { color: var(--et-form-blue-encre); text-decoration: none; font-weight: 600; }
.cx-hint a:hover { color: var(--et-form-blue-d); text-decoration: underline; }
.cx-code { font-family: var(--et-font-mono); font-weight: 600; color: var(--et-form-text); }
.cx-eye {
    position: absolute; right: 8px; top: 50%; transform: translateY(-50%);
    display: grid; place-items: center; width: 28px; height: 28px; padding: 0;
    border: none; background: none; cursor: pointer; color: var(--et-faint);
}
.cx-eye:hover { color: var(--et-form-blue-encre); }

.cx-row { display: flex; align-items: center; justify-content: space-between; margin: 16px 0 0; }
.cx-check { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; color: var(--et-muted); cursor: pointer; margin: 0; }
.cx-check input { width: auto; height: auto; accent-color: var(--et-form-blue); cursor: pointer; }
.cx-lien { font-size: 13px; font-weight: 600; color: var(--et-form-blue-encre); text-decoration: none; }
.cx-lien:hover { color: var(--et-form-blue-d); text-decoration: underline; }

/* --- Bouton d'engagement : le SEUL orange de l'écran -------------------- */
/* La marge haute est portée par le BOUTON, pas par ce qui le précède : sur l'écran
   de connexion il suit la ligne « se souvenir / mot de passe oublié », mais sur la
   demande et la confirmation il suit directement un champ, et s'y collait. */
.cx-cta {
    width: 100%; height: 42px; margin-top: 22px;
    display: inline-flex; align-items: center; justify-content: center; gap: 10px;
    background: var(--et-action); color: var(--et-sur-aplat); border: none; border-radius: var(--et-r);
    font-size: 14px; font-weight: 600; font-family: inherit; cursor: pointer;
    white-space: nowrap; transition: background .13s ease;
}
.cx-cta:hover { background: var(--et-action-d); }
/* Inerte : fond délavé ET curseur interdit — l'opacité seule laissait essayer. */
.cx-cta:disabled { background: var(--et-action-off); cursor: not-allowed; }

.cx-help { margin-top: 26px; padding-top: 18px; border-top: 1px solid var(--et-hairline); text-align: center; font-size: 13px; color: var(--et-faint); }
.cx-help a { color: var(--et-form-blue-encre); text-decoration: none; font-weight: 600; }
.cx-help a:hover { color: var(--et-form-blue-d); text-decoration: underline; }

/* --- Pastilles d'étape : carrés BORDÉS, non blocs pleins et ronds ------- */
.cx-success { text-align: center; animation: cxPop .3s ease both; }
.cx-pastille { width: 46px; height: 46px; display: grid; place-items: center; margin-bottom: 18px; border: 1px solid var(--et-form-blue); background: var(--et-info-bg); }
.cx-pastille.succes { width: 66px; height: 66px; margin: 0 auto 20px; border-color: var(--et-succes); background: var(--et-succes-bg); }
.cx-spin-big { margin: 22px auto 0; width: 26px; height: 26px; border: 3px solid var(--et-filet-fort); border-top-color: var(--et-form-blue); border-radius: 50%; animation: cxSpin .8s linear infinite; }
.cx-spin { width: 17px; height: 17px; border: 2.5px solid rgba(255,255,255,.45); border-top-color: var(--et-sur-aplat); border-radius: 50%; animation: cxSpin .7s linear infinite; display: inline-block; }

/* --- Jauge de force du mot de passe ------------------------------------
   Quatre LIBELLÉS distincts, deux couleurs : la palette Fiori n'a pas de jaune
   intermédiaire, Faible et Moyen partagent donc l'ambre, Fort et Excellent le
   vert (réserve n° 1 de la passation). */
.cx-jauge { margin-top: 10px; display: flex; gap: 4px; }
.cx-jauge .seg { flex: 1; height: 4px; background: var(--et-rang); }
.cx-jauge .seg.faible    { background: var(--et-avertissement); }
.cx-jauge .seg.fort      { background: var(--et-succes); }
.cx-jauge .seg.tresfaible{ background: var(--et-danger); }
.cx-jauge-libelle { margin-top: 6px; font-size: 12px; }
.cx-jauge-libelle.faible    { color: var(--et-avertissement-ink); }
.cx-jauge-libelle.fort      { color: var(--et-succes-ink); }
.cx-jauge-libelle.tresfaible{ color: var(--et-danger-ink); }
.cx-regles { margin-top: 10px; display: flex; flex-direction: column; gap: 4px; }
.cx-regles .r { display: flex; align-items: center; gap: 7px; font-size: 12px; color: var(--et-faint); }
.cx-regles .r svg { flex: none; }
.cx-regles .r.ok { color: var(--et-succes-ink); }

@keyframes cxUp  { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
@keyframes cxPop { from { opacity: 0; transform: scale(.94); }        to { opacity: 1; transform: none; } }
@keyframes cxSpin { to { transform: rotate(360deg); } }

@media (max-width: 860px) {
    .cx-brand { display: none; }
    .cx-bandeau { display: flex; }
    .cx-form { flex: 1; }
    /* Le sélecteur de langue reprend le flux : en absolu il se posait sur le bandeau. */
    .cx-lang { position: static; align-self: flex-end; margin-bottom: 8px; }
    /* La carte cesse d'être centrée verticalement et se pose sous le bandeau.
       Le centrage optique du grand écran suppose deux vides égaux ; ici le haut est
       déjà occupé par le bandeau et par le sélecteur de langue, et le vide restant
       se coupait en deux — 130 à 170 px de blanc entre un sélecteur orphelin et le
       titre, mesurés de 430 à 820 px de large. Tout le reste passe SOUS la carte,
       ce qui garde les drapeaux et la mention en pied. */
    .cx-card { margin: 0 0 auto; }
}