/**
 * Page de connexion Moodle — fond plein écran (option B)
 * Thème : Adaptable
 *
 * Déploiement :
 * 1. Copier pix/login/connexion-bg.png vers moodle/theme/adaptable/pix/login/connexion-bg.png
 * 2. Copier ce fichier vers moodle/theme/adaptable/style/login_custom.css
 * 3. Copier login_custom.js vers moodle/theme/adaptable/style/login_custom.js
 * 4. Coller TOUT ce fichier dans Adaptable → CSS et JS personnalisés → CSS personnalisé
 *    (ne pas le mettre dans « Quand la balise BODY est ouverte »)
 *    Voir aussi snippet-head.html pour charger le fichier via <link> dans le HEAD.
 * 4. Purger les caches Moodle
 */

:root {
    /* Chemin depuis la racine du site (sans nom de domaine — survit au changement d'URL)
     * Moodle à la racine : /theme/adaptable/pix/login/connexion-bg.png
     * Moodle en sous-dossier : /moodle_V4.5.4/theme/adaptable/pix/login/connexion-bg.png
     */
    --mq-login-bg-url: url('/theme/adaptable/pix/login/connexion-bg.png');
    --mq-login-overlay: rgba(18, 22, 28, 0.42);
    --mq-login-panel-bg: rgba(255, 255, 255, 0.567);
    --mq-login-panel-border: rgba(255, 255, 255, 0.55);
    --mq-login-accent: #003d73;
    --mq-login-accent-hover: #002a52;
    --mq-login-accent-border: #002855;

    /* ── AJUSTEMENT POSITION DU BLOC LOGIN (modifier ici) ──
     * --mq-login-offset-left : distance depuis le bord gauche
     * --mq-login-offset-top  : distance depuis le haut
     * Unités possibles : rem, px, %, vw, vh
     * Exemples :
     *   left: 2rem   → plus à gauche  |  left: 8rem  → plus à droite
     *   top:  8rem   → plus haut      |  top:  14rem → plus bas
     */
    --mq-login-offset-left: 1.5rem;
    --mq-login-offset-top: 9rem;
}

@keyframes mq-login-kenburns {
    0% {
        transform: scale(1);
    }

    100% {
        transform: scale(1.06);
    }
}

@keyframes mq-login-fadein {
    0% {
        opacity: 0;
        transform: translateY(18px);
    }

    100% {
        opacity: 1;
        transform: translateY(0);
    }
}

body#page-login-index,
body.pagelayout-login#page-login-index {
    position: relative;
    height: 100vh;
    min-height: 100vh;
    max-height: 100vh;
    background: #1a1510 !important;
    overflow: hidden;
}

body#page-login-index #page-wrapper,
body#page-login-index #page,
body#page-login-index #page-content,
body#page-login-index #region-main-box,
body#page-login-index #region-main {
    background: transparent !important;
    box-shadow: none !important;
    border: none !important;
}

body#page-login-index::before {
    content: "";
    position: fixed;
    inset: -4%;
    z-index: 0;
    pointer-events: none;
    background-image: var(--mq-login-bg-url);
    background-size: cover;
    background-position: left center;
    background-repeat: no-repeat;
    transform-origin: center center;
    animation: mq-login-kenburns 28s ease-in-out infinite alternate;
    will-change: transform;
}

body#page-login-index::after {
    content: "";
    position: fixed;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    background:
        linear-gradient(105deg, rgba(0, 0, 0, 0.52) 0%, rgba(0, 0, 0, 0.18) 42%, rgba(0, 0, 0, 0.28) 100%),
        var(--mq-login-overlay);
}

body#page-login-index #page-wrapper {
    position: relative;
    z-index: 2;
    height: 100vh;
    max-height: 100vh;
    overflow: hidden;
}

body#page-login-index #page {
    padding: 0 !important;
    margin: 0 !important;
    max-width: none !important;
}

/* Formulaire à gauche — position via --mq-login-offset-left / --mq-login-offset-top */
body#page-login-index #page-content,
body#page-login-index #region-main-box {
    display: flex !important;
    justify-content: flex-start !important;
    align-items: flex-start !important;
    height: 100vh;
    max-height: 100vh;
    overflow: hidden;
    padding: var(--mq-login-offset-top) 1.5rem 0 var(--mq-login-offset-left) !important;
    box-sizing: border-box;
}

/* Rectangles 1 et 2 : conteneurs parents transparents, sans cadre */
body#page-login-index #region-main,
body#page-login-index #region-main .card,
body#page-login-index #region-main .card-body,
body#page-login-index #region-main>div,
body#page-login-index .login-container,
body#page-login-index .login-container>div,
body#page-login-index .row.justify-content-md-center {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    padding: 0 !important;
    margin: 0 !important;
    max-width: none !important;
}

body#page-login-index .row.justify-content-md-center {
    justify-content: flex-start !important;
    width: 100% !important;
}

/* Wrapper autour du form : visible mais sans cadre */
body#page-login-index .loginform {
    display: block !important;
    visibility: visible !important;
    height: auto !important;
    overflow: visible !important;
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    padding: 0 !important;
    margin: 0 !important;
}

/* Rectangle 3 : fond blanc à 90 % d'opacité (texte et boutons restent nets) */
body#page-login-index form#login,
body#page-login-index form#login.login-form,
body#page-login-index .loginform>form,
body#page-login-index .login-container>form {
    display: block !important;
    visibility: visible !important;
    position: relative !important;
    isolation: isolate;
    background: transparent !important;
    background-color: transparent !important;
    background-image: none !important;
    border: 1px solid var(--mq-login-panel-border) !important;
    border-radius: 16px !important;
    box-shadow: 0 18px 48px rgba(0, 0, 0, 0.28) !important;
    padding: 1.75rem 2rem !important;
    animation: mq-login-fadein 0.85s ease-out both;
    max-width: 430px;
    width: calc(100vw - 2rem);
    margin: 0 !important;
    opacity: 1 !important;
}

body#page-login-index form#login::before,
body#page-login-index form#login.login-form::before,
body#page-login-index .loginform>form::before,
body#page-login-index .login-container>form::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    border-radius: 16px;
    background-color: rgba(255, 255, 255, 0.5) !important;
    pointer-events: none;
}

/* Masquer langue, cookies, trait vertical sous le formulaire */
/* Structure Moodle : .loginform > .d-flex > .divider.border-left + button.btn-secondary */
body#page-login-index .loginform>.d-flex,
body#page-login-index .loginform .d-flex .divider,
body#page-login-index .loginform .d-flex .border-left,
body#page-login-index .loginform button.btn-secondary,
body#page-login-index .login-container .loginform button.btn-secondary,
body#page-login-index .login-wrapper button.btn-secondary[type="button"],
body#page-login-index .login-languagemenu,
body#page-login-index .login-divider,
body#page-login-index .langmenu,
body#page-login-index .login-container .login-languagemenu,
body#page-login-index .login-container .login-divider,
body#page-login-index .login-container>a,
body#page-login-index .login-container>p,
body#page-login-index form#login+.d-flex,
body#page-login-index #cookiesnotice,
body#page-login-index .cookiesnotice,
body#page-login-index .eupopup,
body#page-login-index #eucookienotice,
body#page-login-index [data-region="cookie-policy-notice"],
body#page-login-index .cc-window,
body#page-login-index .cc-revoke,
body#page-login-index .tool_dataprivacy-cookies,
body#page-login-index button[data-action="acceptcookies"],
body#page-login-index .footer-content-popover,
body#page-login-index #page-footer,
body#page-login-index footer,
body#page-login-index a[href*="cookie"],
body#page-login-index a[href*="dataprivacy"],
body#page-login-index a[href*="policies"] {
    display: none !important;
}

body#page-login-index #logocontainer {
    animation: mq-login-fadein 0.7s ease-out both;
    margin-bottom: 1.25rem !important;
}

body#page-login-index #logocontainer img,
body#page-login-index .login-logo img {
    filter: drop-shadow(0 4px 12px rgba(0, 0, 0, 0.25));
}

body#page-login-index .login-container h1,
body#page-login-index .login-container h2,
body#page-login-index .loginform h1,
body#page-login-index .loginform h2 {
    color: #1f2937;
    font-weight: 600;
}

body#page-login-index .btn-primary,
body#page-login-index input[type="submit"].btn-primary,
body#page-login-index #loginbtn,
body#page-login-index .login-container input[type="submit"] {
    background-color: var(--mq-login-accent) !important;
    background-image: none !important;
    border-color: var(--mq-login-accent-border) !important;
    color: #fff !important;
    transition: transform 0.2s ease, box-shadow 0.2s ease, background-color 0.2s ease;
}

body#page-login-index .btn-primary:hover,
body#page-login-index input[type="submit"].btn-primary:hover,
body#page-login-index #loginbtn:hover,
body#page-login-index .login-container input[type="submit"]:hover {
    background-color: var(--mq-login-accent-hover) !important;
    border-color: var(--mq-login-accent-hover) !important;
    transform: translateY(-1px);
    box-shadow: 0 8px 20px rgba(0, 61, 115, 0.4);
}

/* Champ mot de passe : œil en bout de ligne, sans fond gris */
body#page-login-index #login .form-group:has(.mq-password-wrapper),
body#page-login-index #login .fitem:has(.mq-password-wrapper) {
    position: relative;
    width: 100%;
}

body#page-login-index .mq-password-wrapper {
    position: relative;
    display: block;
    width: 100%;
    margin: 0;
}

body#page-login-index .mq-password-wrapper input[type="password"],
body#page-login-index .mq-password-wrapper input[type="text"][name="password"],
body#page-login-index .mq-password-wrapper input#password {
    display: block;
    width: 100% !important;
    padding-right: 2.5rem !important;
    box-sizing: border-box;
}

/* Masquer l'œil natif Moodle (souvent gris, sous le champ) */
body#page-login-index #login input#password~button:not(.mq-password-toggle),
body#page-login-index #login input#password~a,
body#page-login-index #login [data-passwordunmask] button,
body#page-login-index #login [data-passwordunmask] a,
body#page-login-index #login .togglepassword,
body#page-login-index #login .passwordunmask {
    display: none !important;
}

body#page-login-index .mq-password-toggle {
    position: absolute;
    right: 0.35rem;
    top: 50%;
    transform: translateY(-50%);
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    width: 1.75rem;
    height: 1.75rem;
    border: none !important;
    background: none !important;
    background-color: transparent !important;
    box-shadow: none !important;
    color: #51666c;
    cursor: pointer;
    border-radius: 0;
    padding: 0 !important;
    margin: 0 !important;
    line-height: 1;
    z-index: 3;
    min-width: 0;
}

body#page-login-index .mq-password-toggle:hover,
body#page-login-index .mq-password-toggle:focus,
body#page-login-index .mq-password-toggle:active {
    color: var(--mq-login-accent) !important;
    background: none !important;
    background-color: transparent !important;
    box-shadow: none !important;
    outline: none;
}

body#page-login-index .mq-password-toggle--visible {
    color: var(--mq-login-accent) !important;
}

body#page-login-index .mq-password-toggle .fa {
    font-size: 1rem;
    pointer-events: none;
}

@media (max-width: 767px) {

    body#page-login-index #page-content,
    body#page-login-index #region-main-box {
        justify-content: center !important;
        align-items: center !important;
        padding: 1rem !important;
        --mq-login-offset-left: 0;
        --mq-login-offset-top: 0;
    }

    body#page-login-index form#login,
    body#page-login-index .loginform>form,
    body#page-login-index .login-container>form {
        max-width: calc(100vw - 2rem);
    }

    body#page-login-index::before {
        animation: none;
        inset: 0;
        transform: none;
    }

    body#page-login-index::after {
        background: rgba(18, 22, 28, 0.55);
    }
}

@media (prefers-reduced-motion: reduce) {

    body#page-login-index::before,
    body#page-login-index .login-container,
    body#page-login-index .loginform,
    body#page-login-index #logocontainer {
        animation: none !important;
    }
}