/*
 * #161 — CSS extrait de templates/empty.html.twig
 * Chargé via <link> au même emplacement que l'ancien bloc <style> (cascade préservée).
 */

        /* Barre de chargement animée */
        #loading-bar {
            position: fixed;
            top: 0;
            left: 0;
            height: 4px;
            width: 100%;
            background: linear-gradient(90deg, red, orange, yellow, green, blue, indigo, violet);
            background-size: 400% 100%;
            animation: loading-bar-animation 2s linear infinite;
            z-index: 9999;
            display: none;
        }

        @keyframes loading-bar-animation {
            0% { background-position: 0% 0; }
            100% { background-position: 100% 0; }
        }

        /* Spinner centré avec des points animés */
        #loading-spinner {
            position: fixed;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            display: none;
            z-index: 9999;
        }

        #loading-spinner .dot {
            width: 12px;
            height: 12px;
            margin: 5px;
            background-color: #007bff;
            border-radius: 50%;
            display: inline-block;
            animation: dotAnimation 1s infinite;
        }

        #loading-spinner .dot:nth-child(2) {
            animation-delay: 0.2s;
        }

        #loading-spinner .dot:nth-child(3) {
            animation-delay: 0.4s;
        }

        @keyframes dotAnimation {
            0% { opacity: 0.2; transform: translateY(0); }
            50% { opacity: 1; transform: translateY(-10px); }
            100% { opacity: 0.2; transform: translateY(0); }
        }

        /* Animation de la bordure du menu principal */
        .menu-loading {
            border-bottom: 4px solid;
            border-image: linear-gradient(90deg, red, orange, yellow, green, blue, indigo, violet) 1;
            animation: borderAnimation 2s linear infinite;
        }

        @keyframes borderAnimation {
            0% { border-image-slice: 1; }
            100% { border-image-slice: 100; }
        }
    

    #login-container{
        position:relative;
        max-width:1440px;
        margin:auto;
        background:var(--bg-color, #fff);
        padding:24px;
        border-radius:8px;
        box-shadow: 0px 0px 16px rgba(0,0,0,.2);
    }
    #logo-svg{
        width:254px;
        max-width:100%;
        position:absolute;
        top:48px;
        left:48px;
    }
    #login-footer{
        position:absolute;
        bottom:24px;
        left:24px;
        margin-bottom:0;
    }
    @media (orientation: portrait){
        body{
            padding:0;
        }
        .login-form{
            padding: 1em;
            margin: 0 !important;
            text-align:center;
            width:100%;
        }
        #logo-svg{
            width:254px;
            position:static;
            margin:auto;
            margin-bottom:1em;
        }
        #login-footer{
            position:absolute;
            bottom:24px;
            left:24px;
            margin-bottom:0;
        }
        #playground{
            padding:0;
            margin:0;
        }
        input{
            max-width:100%;
        }
        #login-box{
            padding:0;
            margin:0;
            width:100%;
        }
        #login-container{
            position:relative;
            max-width:1440px;
            margin:auto;
            background:var(--bg-color, #fff);
            padding:12px;
            border-radius:8px;
            box-shadow: 0px 0px 16px rgba(0,0,0,.2);
        }
        body{
            padding:0 !important;
        }
    }


    #login-button, #annul-button{
        border:1px solid #142136;
        background:#142136;
        width:150px;
        font-size:12px;
        margin-bottom:1em;
        font-size:1em;
    }
    #annul-button{
        border:1px solid #dc5c3b;
        background:#dc5c3b;
    }
    #login-button:hover,#annul-button:hover{
        background:var(--bg-color, #fff);
        border: 1px solid #dc5c3b;
        color:#dc5c3b;
    }
    #login-image{
        border-radius: 16px 4px;
        min-height:500px;
        object-fit:cover;
    }
    h2.h5{
        font-size:26px !important;
    }

    /* #161 : mode sombre via prefers-color-scheme */
    body{
        background:var(--surface-2, #e9ecef);
    }
    @media (prefers-color-scheme: dark) {
        body{
            background:#041126 !important;
        }
        #login-container{
            background:#142136;
            color:#fff;
        }
        #login-button, #annul-button{
            border:1px solid #fff;
            background:#fff;
            color:#142136;
        }
        #login-button:hover,#annul-button:hover{
            background:#142136;
            border: 1px solid #fff;
            color:#fff;
        }
        /* #161 — "Annuler" en outlined danger : le blanc plein jurait avec "Envoyer" outlined */
        #annul-button{
            background:transparent;
            border:1px solid #e8826a;
            color:#e8826a;
        }
        #annul-button:hover{
            background:#e8826a;
            border:1px solid #e8826a;
            color:#142136;
        }
        /* #161 — Inputs sombres : fond blanc cassé illisible/incohérent sur carte sombre */
        input, .form-control{
            background-color:#1a2d4a !important;
            color:#fcfcfc !important;
            border-color:#2c3e5e !important;
        }
        input::placeholder, .form-control::placeholder{
            color:#b8c5d6 !important;
            opacity:1;
        }
        input:focus, .form-control:focus{
            background-color:#1a2d4a !important;
            color:#fcfcfc !important;
            border-color:#4a5a76 !important;
            box-shadow:0 0 0 .25rem rgba(252,252,252,.15) !important;
        }
        /* #161 — Footer copyright : gris foncé illisible sur la carte sombre */
        #login-footer, #login-footer a{
            color:#b8c5d6;
        }
        /* #161 — .text-muted Bootstrap (hints de mot de passe) : invisible sur carte sombre */
        .text-muted, .form-text{
            color:#b8c5d6 !important;
        }
    }