/* ==========================================================================
   EGAHO V16 - assets/css/connexion.css
   Ecran de connexion.

   CDC §16.1 : "Aucun systeme de design parallele". Ce fichier ne redefinit
   rien de ce que Phoenix fournit deja. Il porte uniquement :
     - la mise en page en deux colonnes de l'ecran d'authentification
     - le bloc de verification, qui n'existe pas dans le template

   Toutes les couleurs viennent des variables Phoenix. Les valeurs de repli
   ne servent qu'a garantir un rendu correct si une feuille tarde a charger.
   ========================================================================== */

:root {
    --cx-rayon: 1rem;
    --cx-rayon-sm: .625rem;
    --cx-transition: .22s cubic-bezier(.4, 0, .2, 1);
}

/* ==========================================================================
   1. Ossature
   ========================================================================== */

html, body {
    height: 100%;
}

body {
    margin: 0;
    background: var(--phoenix-body-bg, #0e1017);
    color: var(--phoenix-body-color, #cbd0dd);
}

.cx-page {
    display: grid;
    grid-template-columns: 1fr;
    min-height: 100vh;
    min-height: 100dvh;
}

@media (min-width: 992px) {
    .cx-page {
        grid-template-columns: 1.05fr 1fr;
    }
}

/* ==========================================================================
   2. Colonne d'identite
   ========================================================================== */

.cx-aside {
    display: none;
    position: relative;
    overflow: hidden;
    padding: 3.5rem 3.5rem 2.25rem;
    flex-direction: column;
    justify-content: space-between;
    background:
        radial-gradient(120% 90% at 12% 0%, rgba(var(--phoenix-primary-rgb, 56, 116, 255), .32) 0%, transparent 58%),
        linear-gradient(155deg, #10141f 0%, #0b0e16 100%);
    color: #e6eaf4;
}

@media (min-width: 992px) {
    .cx-aside {
        display: flex;
    }
}

/* Trame geometrique : losanges entrecroises, tres basse opacite.
   Motif, pas illustration - il structure le fond sans raconter d'histoire. */
.cx-aside-motif {
    position: absolute;
    inset: -20%;
    opacity: .11;
    pointer-events: none;
    background-image:
        repeating-linear-gradient(45deg, rgba(255, 255, 255, .55) 0 1px, transparent 1px 42px),
        repeating-linear-gradient(-45deg, rgba(255, 255, 255, .55) 0 1px, transparent 1px 42px);
}

.cx-aside-contenu {
    position: relative;
    max-width: 30rem;
}

.cx-eyebrow {
    margin: 0 0 2rem;
    font-size: .75rem;
    font-weight: 700;
    letter-spacing: .18em;
    text-transform: uppercase;
    color: rgba(230, 234, 244, .55);
}

.cx-marque {
    margin: 0;
    font-size: clamp(3.25rem, 6vw, 4.75rem);
    font-weight: 900;
    letter-spacing: -.045em;
    line-height: .92;
    color: #fff;
}

.cx-baseline {
    margin: .75rem 0 2.75rem;
    font-size: 1.0625rem;
    color: rgba(230, 234, 244, .7);
}

.cx-regles {
    margin: 0;
    padding: 0;
    list-style: none;
    border-top: 1px solid rgba(255, 255, 255, .12);
}

.cx-regles li {
    padding: .9rem 0;
    border-bottom: 1px solid rgba(255, 255, 255, .12);
    font-size: .9375rem;
    color: rgba(230, 234, 244, .62);
}

.cx-regles span {
    display: inline-block;
    min-width: 8.5rem;
    font-weight: 700;
    color: #fff;
}

.cx-aside-pied {
    position: relative;
    margin: 0;
    font-size: .8125rem;
    color: rgba(230, 234, 244, .38);
}

/* ==========================================================================
   3. Colonne du formulaire
   ========================================================================== */

.cx-main {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 2rem 1.25rem 1.5rem;
}

.cx-carte {
    width: 100%;
    max-width: 26.5rem;
    padding: 2.25rem 2rem;
    border: 1px solid var(--phoenix-border-color, #31374a);
    border-radius: var(--cx-rayon);
    background: var(--phoenix-emphasis-bg, #141824);
    box-shadow: 0 1.5rem 3.5rem rgba(0, 0, 0, .32);
    animation: cxEntree .45s cubic-bezier(.16, 1, .3, 1) both;
}

.cx-entete {
    margin-bottom: 1.75rem;
}

.cx-titre {
    margin: 0;
    font-size: 1.5rem;
    font-weight: 800;
    letter-spacing: -.02em;
    color: var(--phoenix-emphasis-color, #fff);
}

.cx-sous-titre {
    margin: .375rem 0 0;
    font-size: .875rem;
    color: var(--phoenix-secondary-color, #8a94ad);
}

.cx-champ {
    margin-bottom: 1.125rem;
}

.cx-input-groupe {
    position: relative;
}

.cx-input-icone {
    position: absolute;
    top: 50%;
    left: .9375rem;
    transform: translateY(-50%);
    font-size: .875rem;
    color: var(--phoenix-secondary-color, #8a94ad);
    pointer-events: none;
}

.cx-input.form-control {
    padding-left: 2.5rem;
    height: 2.875rem;
}

.cx-input-mdp.form-control {
    padding-right: 2.75rem;
}

.cx-oeil {
    position: absolute;
    top: 50%;
    right: .375rem;
    transform: translateY(-50%);
    width: 2.125rem;
    height: 2.125rem;
    border: 0;
    border-radius: .5rem;
    background: transparent;
    color: var(--phoenix-secondary-color, #8a94ad);
    cursor: pointer;
    transition: var(--cx-transition);
}

.cx-oeil:hover {
    color: var(--phoenix-emphasis-color, #fff);
    background: var(--phoenix-secondary-bg, #222834);
}

/* ==========================================================================
   4. Bloc de verification
   La seule piece inventee de cet ecran. Elle emprunte son vocabulaire aux
   documents que la plateforme produit deja : un talon perfore, comme sur
   une autorisation de versement.
   ========================================================================== */

.cx-defi {
    margin: 1.5rem 0 1.25rem;
    padding: .875rem .9375rem 1rem;
    border: 1px solid var(--phoenix-border-color, #31374a);
    border-radius: var(--cx-rayon-sm);
    background: var(--phoenix-body-bg, #0e1017);
}

.cx-defi-entete {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    margin-bottom: .75rem;
}

.cx-defi-titre {
    font-size: .6875rem;
    font-weight: 700;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--phoenix-secondary-color, #8a94ad);
}

.cx-defi-chrono {
    font-size: .75rem;
    font-variant-numeric: tabular-nums;
    color: var(--phoenix-secondary-color, #8a94ad);
}

.cx-defi-chrono.cx-urgent {
    color: var(--phoenix-warning, #e5780b);
}

.cx-defi-corps {
    display: flex;
    align-items: center;
    gap: .875rem;
    flex-wrap: wrap;
}

.cx-defi-visuel {
    position: relative;
    flex: 0 0 auto;
    width: 13.75rem;
    height: 4.75rem;
    overflow: hidden;
    border-radius: .5rem;
    background: #eef2f8;
    /* Talon perfore : le liserai de points evoque la souche d'un recu. */
    box-shadow: inset .375rem 0 0 -0.3125rem rgba(31, 42, 68, .25);
}

.cx-defi-img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    user-select: none;
    -webkit-user-drag: none;
}

/* Le theme sombre inverse l'image plutot que de la redemander : redemander
   changerait le code a chaque bascule de theme. */
[data-bs-theme="dark"] .cx-defi-visuel {
    background: #11151f;
}

[data-bs-theme="dark"] .cx-defi-img {
    filter: invert(1) hue-rotate(180deg) saturate(.9);
}

.cx-defi-vide {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.25rem;
    color: rgba(31, 42, 68, .45);
    background: #eef2f8;
}

[data-bs-theme="dark"] .cx-defi-vide {
    color: rgba(230, 234, 244, .4);
    background: #11151f;
}

.cx-defi-refresh {
    position: absolute;
    right: .3125rem;
    bottom: .3125rem;
    width: 1.75rem;
    height: 1.75rem;
    border: 0;
    border-radius: .375rem;
    background: rgba(17, 21, 31, .72);
    color: #fff;
    font-size: .75rem;
    cursor: pointer;
    transition: var(--cx-transition);
}

.cx-defi-refresh:hover {
    background: var(--phoenix-primary, #3874ff);
}

.cx-defi-refresh i {
    transition: transform .5s cubic-bezier(.16, 1, .3, 1);
}

.cx-defi-refresh.cx-tourne i {
    transform: rotate(360deg);
}

.cx-defi-saisie {
    display: flex;
    gap: .5rem;
}

.cx-chiffre {
    width: 2.75rem;
    height: 3.25rem;
    padding: 0;
    border: 1px solid var(--phoenix-border-color, #31374a);
    border-radius: .5rem;
    background: var(--phoenix-emphasis-bg, #141824);
    color: var(--phoenix-emphasis-color, #fff);
    font-size: 1.375rem;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    text-align: center;
    transition: var(--cx-transition);
}

.cx-chiffre:focus {
    outline: 0;
    border-color: var(--phoenix-primary, #3874ff);
    box-shadow: 0 0 0 .1875rem rgba(var(--phoenix-primary-rgb, 56, 116, 255), .22);
}

.cx-chiffre.cx-rempli {
    border-color: rgba(var(--phoenix-primary-rgb, 56, 116, 255), .55);
}

.cx-defi.cx-erreur .cx-chiffre {
    border-color: var(--phoenix-danger, #ed2000);
}

.cx-defi.cx-erreur .cx-defi-saisie {
    animation: cxSecousse .38s cubic-bezier(.36, .07, .19, .97);
}

.cx-defi-aide {
    margin: .75rem 0 0;
    font-size: .75rem;
    line-height: 1.45;
    color: var(--phoenix-secondary-color, #8a94ad);
}

/* Champ-piege : hors ecran plutot que display:none, pour que les automates
   qui ignorent les elements masques le remplissent quand meme. */
.cx-piege {
    position: absolute;
    left: -9999px;
    top: auto;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

/* ==========================================================================
   5. Actions
   ========================================================================== */

.cx-bouton.btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .5rem;
    width: 100%;
    height: 2.875rem;
    font-weight: 700;
    letter-spacing: .01em;
}

.cx-liens {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .625rem;
    margin-top: 1.25rem;
    font-size: .8125rem;
}

.cx-liens a,
.cx-lien-bouton {
    padding: 0;
    border: 0;
    background: none;
    color: var(--phoenix-secondary-color, #8a94ad);
    font-size: .8125rem;
    text-decoration: none;
    cursor: pointer;
}

.cx-liens a:hover,
.cx-lien-bouton:hover {
    color: var(--phoenix-primary, #3874ff);
}

.cx-lien-bouton i {
    margin-right: .25rem;
}

/* Le code-behind pose lui-meme la classe de gravite (alert-subtle-danger,
   -success, -warning). On ne touche donc ni a la couleur, ni a la bordure,
   ni a la marge : uniquement a la disposition interne. */
#divMessage {
    display: flex;
    align-items: flex-start;
    gap: .625rem;
    font-size: .8125rem;
    line-height: 1.45;
}

#iconMessage {
    margin-top: .125rem;
    flex: 0 0 auto;
}

.cx-noscript {
    margin: 1rem 0 0;
    font-size: .75rem;
    color: var(--phoenix-secondary-color, #8a94ad);
}

.cx-pied {
    max-width: 26.5rem;
    margin: 1.5rem 0 0;
    font-size: .75rem;
    text-align: center;
    color: var(--phoenix-secondary-color, #8a94ad);
}

/* ==========================================================================
   6. Voile de soumission
   ========================================================================== */

.cx-voile {
    position: fixed;
    inset: 0;
    z-index: 1080;
    display: none;
    align-items: center;
    justify-content: center;
    background: rgba(8, 10, 16, .62);
    backdrop-filter: blur(3px);
    -webkit-backdrop-filter: blur(3px);
}

.cx-voile.cx-visible {
    display: flex;
}

.cx-voile-anneau {
    width: 2.5rem;
    height: 2.5rem;
    border: .1875rem solid rgba(255, 255, 255, .18);
    border-top-color: var(--phoenix-primary, #3874ff);
    border-radius: 50%;
    animation: cxRotation .8s linear infinite;
}

/* ==========================================================================
   7. Mouvement
   ========================================================================== */

@keyframes cxEntree {
    from { opacity: 0; transform: translateY(1rem); }
    to   { opacity: 1; transform: none; }
}

@keyframes cxSecousse {
    10%, 90% { transform: translateX(-2px); }
    20%, 80% { transform: translateX(4px); }
    30%, 50%, 70% { transform: translateX(-6px); }
    40%, 60% { transform: translateX(6px); }
}

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

@media (prefers-reduced-motion: reduce) {
    .cx-carte,
    .cx-defi.cx-erreur .cx-defi-saisie,
    .cx-defi-refresh i,
    .cx-voile-anneau {
        animation: none !important;
        transition: none !important;
    }
}

/* ==========================================================================
   8. Petits ecrans
   ========================================================================== */

@media (max-width: 400px) {
    .cx-carte {
        padding: 1.75rem 1.25rem;
    }

    .cx-defi-visuel {
        width: 100%;
        height: 4.25rem;
    }

    .cx-defi-saisie {
        width: 100%;
        justify-content: space-between;
    }

    .cx-chiffre {
        width: 22%;
    }
}