@import url("https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;600;800&display=swap");

/* ===========================================================================
   Ecran de connexion du campus virtuel Biyn
   ---------------------------------------------------------------------------
   Cette feuille est injectee dans la page servie par WorkAdventure, par les
   directives Apache de _workadventure/apache-adventure-marque.conf. Le markup
   du formulaire appartient au bundle Svelte et ne peut pas etre remplace : on
   ne peut que le rehabiller. Les prises utilisees sont stables d'une version a
   l'autre : la classe .loginScene sur le formulaire, le data-testid du champ,
   la classe .loginSceneFormSubmit sur le bouton.

   L'etage est pose par Apache en attribut data-etage sur <html>, ce qui donne
   a chaque marque son accent.

   Toute retouche de style se fait ICI puis git push : rien a rejouer dans
   Plesk, le lien vers ce fichier ne bouge pas.
   =========================================================================== */

:root {
    /* Biyn Solutions, rez-de-chaussee : l'ocean de la maquette */
    --campus-carte: rgba(18, 38, 46, .55);
    --campus-bord: rgba(230, 233, 230, .10);
    --campus-filet-a: #61DAB4;
    --campus-filet-b: #CDF355;
    --campus-champ: rgba(12, 27, 33, .55);
    --campus-champ-actif: rgba(12, 27, 33, .75);
    --campus-focus: #61DAB4;
    --campus-focus-halo: rgba(97, 218, 180, .18);
    --campus-cta: #CDF355;
    --campus-cta-survol: #D9F77A;
    --campus-cta-texte: #0C1B21;
    --campus-cta-ombre: rgba(205, 243, 85, .35);
    --campus-placeholder: #7E9699;
}

:root[data-etage="learning"] {
    --campus-carte: rgba(38, 24, 76, .58);
    --campus-filet-a: #9464DE;
    --campus-filet-b: #F3C13A;
    --campus-champ: rgba(20, 12, 40, .55);
    --campus-champ-actif: rgba(20, 12, 40, .75);
    --campus-focus: #9464DE;
    --campus-focus-halo: rgba(148, 100, 222, .20);
    --campus-cta: #F3C13A;
    --campus-cta-survol: #FFD264;
    --campus-cta-texte: #201240;
    --campus-cta-ombre: rgba(243, 193, 58, .32);
    --campus-placeholder: #A99BC4;
}

:root[data-etage="hibou"] {
    --campus-carte: rgba(24, 36, 78, .58);
    --campus-filet-a: #FFC933;
    --campus-filet-b: #FEA801;
    --campus-champ: rgba(14, 20, 44, .55);
    --campus-champ-actif: rgba(14, 20, 44, .75);
    --campus-focus: #FFC933;
    --campus-focus-halo: rgba(255, 201, 51, .20);
    --campus-cta: #FFC933;
    --campus-cta-survol: #FFD95E;
    --campus-cta-texte: #141C3A;
    --campus-cta-ombre: rgba(255, 201, 51, .32);
    --campus-placeholder: #93A0C4;
}

form.loginScene {
    font-family: "Plus Jakarta Sans", ui-sans-serif, system-ui, "Segoe UI", sans-serif !important;
}

/* Le logo, pose au-dessus de la carte */
form.loginScene ~ section .main-logo,
section > .main-logo {
    filter: drop-shadow(0 12px 40px rgba(97, 218, 180, .25));
}

/* La carte en verre depoli */
form.loginScene > div:first-of-type {
    width: 100% !important;
    max-width: 440px !important;
    padding: 38px 36px 34px !important;
    border-radius: 28px !important;
    background: var(--campus-carte) !important;
    border: 1px solid var(--campus-bord) !important;
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
    box-shadow: 0 30px 80px rgba(3, 10, 13, .55) !important;
    position: relative;
    overflow: hidden;
}

/* Le filet degrade qui souligne le haut de la carte */
form.loginScene > div:first-of-type::before {
    content: "";
    position: absolute;
    left: 36px;
    right: 36px;
    top: 0;
    height: 2px;
    border-radius: 2px;
    background: linear-gradient(90deg, transparent, var(--campus-filet-a), var(--campus-filet-b), transparent);
}

/* Le titre au-dessus du champ */
form.loginScene span.text-lg {
    font-size: 28px !important;
    line-height: 1.15;
    font-weight: 800;
    letter-spacing: -.025em;
    color: #FBFCFB !important;
    display: block;
    margin-bottom: 4px;
}

/* Le champ, en pilule */
form.loginScene input[data-testid="loginSceneNameInput"] {
    width: 100% !important;
    max-width: 368px !important;
    height: 52px !important;
    padding: 0 18px !important;
    border-radius: 999px !important;
    border: 1px solid rgba(230, 233, 230, .16) !important;
    background: var(--campus-champ) !important;
    color: #FBFCFB !important;
    font-family: inherit !important;
    font-size: 16px !important;
    transition: border-color .2s, box-shadow .2s, background .2s;
}

form.loginScene input[data-testid="loginSceneNameInput"]::placeholder {
    color: var(--campus-placeholder) !important;
    opacity: 1;
}

form.loginScene input[data-testid="loginSceneNameInput"]:focus {
    outline: none !important;
    border-color: var(--campus-focus) !important;
    background: var(--campus-champ-actif) !important;
    box-shadow: 0 0 0 4px var(--campus-focus-halo) !important;
}

/* Le bouton d'appel a l'action */
form.loginScene .loginSceneFormSubmit {
    width: 100% !important;
    max-width: 368px !important;
    height: 54px !important;
    border: 0 !important;
    border-radius: 999px !important;
    background: var(--campus-cta) !important;
    color: var(--campus-cta-texte) !important;
    font-family: inherit !important;
    font-size: 16px !important;
    font-weight: 800 !important;
    letter-spacing: -.01em;
    transition: transform .2s, box-shadow .2s, background .2s;
}

form.loginScene .loginSceneFormSubmit:hover:not(:disabled) {
    background: var(--campus-cta-survol) !important;
    box-shadow: 0 10px 34px var(--campus-cta-ombre) !important;
    transform: translateY(-1px);
}

form.loginScene .loginSceneFormSubmit:focus-visible {
    outline: 3px solid var(--campus-focus) !important;
    outline-offset: 3px;
}

/* Les mentions legales sous la carte */
form.loginScene .terms-and-conditions p {
    font-size: 12px !important;
    font-style: normal !important;
    opacity: .55 !important;
}

@media (prefers-reduced-motion: reduce) {
    form.loginScene input[data-testid="loginSceneNameInput"],
    form.loginScene .loginSceneFormSubmit {
        transition: none;
    }
    form.loginScene .loginSceneFormSubmit:hover:not(:disabled) {
        transform: none;
    }
}

@media (max-width: 480px) {
    form.loginScene > div:first-of-type {
        padding: 30px 22px 26px !important;
        border-radius: 22px !important;
    }
    form.loginScene span.text-lg {
        font-size: 24px !important;
    }
}