/* SR Diamond — habillage des pages publiques (connexion, mot de passe oublié,
   réinitialisation). Fichier ajouté par SR Diamond, absent de l'éditeur.
   Chargé en dernier dans resources/views/layouts/auth.blade.php. */

:root {
    --sr-noir: #141414;
    --sr-gris-lien: #4a4a4a;
    --sr-gris-discret: #8a8a8a;
}

/* ---- Mise en page générale ----
   Le gabarit de l'éditeur centre verticalement un contenu plus haut que l'écran
   (le haut de la page se retrouve coupé) et masque le débordement (le bas du
   formulaire peut disparaître sur un écran court). On repart du haut et on
   laisse la page défiler normalement. */
.authImage {
    display: block !important;
    min-height: 100vh;
}

.authImage > ul {
    /* liste vide laissée par l'éditeur, qui ajoutait 16 px de marge */
    display: none !important;
}

.login-section,
.forget-password-section,
.reset-password-section {
    overflow: visible !important;
    /* l'éditeur remonte le bloc de 105 px pour passer sous son gros bouton de
       langue ; notre sélecteur est flottant, ce décalage n'a plus lieu d'être */
    margin-top: 0 !important;
}

/* ---- Grille : annuler les marges négatives de Bootstrap ---- */
.sr-rangee {
    margin-left: 0 !important;
    margin-right: 0 !important;
    width: 100%;
}

/* ---- Colonne de gauche : image de marque (52 %) ---- */
@media (min-width: 768px) {
    .sr-visuel {
        flex: 0 0 52%;
        max-width: 52%;
    }

    .sr-formulaire {
        flex: 0 0 48%;
        max-width: 48%;
    }
}

.sr-visuel-image {
    background-color: var(--sr-noir);
    height: 100vh;
    overflow: hidden;
    width: 100%;
}

/* Le panneau reste plein écran même quand le formulaire dépasse et que la page défile */
@media (min-width: 768px) {
    .sr-visuel-image {
        position: sticky;
        top: 0;
    }
}

.sr-visuel-image img {
    display: block;
    height: 100%;
    width: 100%;
    object-fit: cover;
    object-position: center;
}

/* Sur mobile : bandeau réduit au-dessus du formulaire */
@media (max-width: 767.98px) {
    .sr-visuel-image {
        height: 32vh;
        max-height: 260px;
    }

    .sr-visuel-image img {
        object-position: center 18%;
    }

    /* le formulaire commence sous l'image, sans grand vide
       (l'éditeur ajoutait 160 px de remplissage en haut) */
    .sr-formulaire {
        justify-content: flex-start !important;
        padding-top: 0.5rem !important;
    }

    .login-form,
    .forget-password-form,
    .reset-password-form {
        padding-top: 1rem !important;
    }
}

/* ---- Décor de l'éditeur (vagues violettes) ---- */
.top-vector,
.bottom-vector {
    display: none !important;
}

/* ---- Bouton principal : noir au lieu du violet ---- */
.login-btn,
.reset-link,
.btn-primary.reset-link {
    background-color: var(--sr-noir) !important;
    border-color: var(--sr-noir) !important;
    color: #fff !important;
}

.login-btn:hover,
.login-btn:focus,
.reset-link:hover,
.reset-link:focus {
    background-color: #000 !important;
    border-color: #000 !important;
    color: #fff !important;
}

/* ---- Liens « Mot de passe oublié ? » et autres : gris foncé au lieu du bleu ---- */
.login-section .link-info,
.forget-password-section .link-info,
.reset-password-section .link-info {
    color: var(--sr-gris-lien) !important;
}

.login-section .link-info:hover,
.forget-password-section .link-info:hover,
.reset-password-section .link-info:hover {
    color: var(--sr-noir) !important;
    text-decoration: underline !important;
}

/* ---- Sélecteur de langue : petit texte gris en haut à droite ---- */
.sr-langue {
    position: absolute;
    top: 0.75rem;
    right: 1.25rem;
    z-index: 20;
}

.sr-langue .dropdown-toggle {
    background: none !important;
    border: none !important;
    box-shadow: none !important;
    color: var(--sr-gris-discret) !important;
    font-size: 0.8rem !important;
    margin: 0 !important;
    padding: 0.25rem 0.5rem !important;
}

.sr-langue .dropdown-toggle:hover,
.sr-langue .dropdown-toggle:focus {
    color: var(--sr-noir) !important;
}

.sr-langue .dropdown-menu {
    font-size: 0.85rem;
    min-width: 160px !important;
}

/* Sur mobile, le sélecteur se pose au-dessus de l'image sombre */
@media (max-width: 767.98px) {
    .sr-langue .dropdown-toggle {
        color: rgba(255, 255, 255, 0.75) !important;
    }
}

/* ---- Pied de page ---- */
.sr-pied {
    color: var(--sr-gris-discret);
    font-size: 0.8rem;
}