/* ============================================================================= login-generique.css — page de connexion PRINCIPALE (exemplaire 100% Bootstrap) ----------------------------------------------------------------------------- Présentation/mise en page uniquement. Les COULEURS viennent du thème Bootstrap (classes .bg-primary / .btn-primary / variables --bs-*), AUCUNE couleur de thème abonné en dur. Centrage assuré par les utilitaires BS sur (d-flex align-items-center justify-content-center min-vh-100). ============================================================================= */ .login-page { background-color: var(--bs-secondary-bg, #e9ecef); background-size: cover; background-position: center; background-repeat: no-repeat; background-attachment: fixed; } /* Colonne verticale : message + carte + lien LinkedIn, centrée. Largeur alignée sur la maquette cible (carte plus large/spacieuse que les 420px d'origine). */ .login-stack { width: 100%; max-width: 450px; padding: 1rem; } /* Carte de connexion (Bootstrap .card) — largeur lisible. */ .login-card { width: 100%; border: none; border-radius: .75rem; overflow: hidden; } /* ----------------------------------------------------------------------------- Bandeau de marque (en-tête de la carte). Couleur marine de marque posée ici (CSS dédié de la page), en attendant les tokens Figma. À terme : variable de thème. Ne PAS coder en dur dans la vue. ----------------------------------------------------------------------------- */ .login-card-header { background-color: #0d164b; padding: 1.75rem 1rem 1.5rem; } .login-brand { font-size: 1.9rem; font-weight: 700; line-height: 1.1; letter-spacing: .5px; } /* Deuxième mot de la marque, en accent bleu (cf. « Gest » de la maquette). */ .login-brand-accent { color: #4d7cff; } .login-brand-tagline { margin-top: .35rem; font-size: .9rem; font-weight: 400; color: rgb(255 255 255 / 70%); } /* Corps + pied : marges confortables, sans trait dur (carte épurée). */ .login-card .card-body { padding: 1.5rem 1.5rem .5rem; } .login-card .card-footer { background-color: transparent; border-top: none; padding: 0 1.5rem 1.5rem; } /* Libellés de champ en gras (cf. maquette). L'astérisque requis est coloré. */ .login-card .form-label { font-weight: 600; margin-bottom: .35rem; } /* Astérisque « champ obligatoire » (span.required-star posé par LibelleFor) : le style global n'est pas chargé sur ce layout, on le pose ici. */ .login-card .required-star { color: var(--bs-danger, #dc3545); font-weight: 700; } /* Boîte d'icône à gauche du champ (Bootstrap .input-group-text) : fond léger, pictogramme grisé — rendu « champ avec icône » de la maquette. */ .login-card .input-group-text { background-color: var(--bs-tertiary-bg, #f8f9fa); color: var(--bs-secondary-color, #6c757d); border-right: none; } /* Icônes Lucide des 3 champs (code abonné / identifiant / mot de passe) : 18px comme partout ailleurs dans l'application (le rendu Lucide par défaut est à 24px). `fill:none` : ces icônes sont en TRAIT seul, un fill hérité les transformerait en aplat. */ .login-card .input-group-text svg, .login-card .input-group-text [data-lucide] { width: 18px; height: 18px; flex: 0 0 auto; fill: none; } .login-card .input-group .form-control { border-left: none; } /* Champs un peu plus aérés. */ .login-card .form-control { padding-top: .6rem; padding-bottom: .6rem; } /* Bandeau d'information (message de connexion) et bloc LinkedIn : encart lisible sur n'importe quel fond d'écran. */ .login-message, .login-linkedin { background-color: rgb(255 255 255 / 85%); border: 1px solid rgb(0 0 0 / 10%); border-radius: var(--bs-border-radius, .375rem); } .login-linkedin svg { width: 40px; height: 40px; } /* Modale d'information / « Connexion en cours » (BootstrapModal `.messagePop`). Carte OPAQUE + dimensionnée : garantit un fond blanc (le symptôme « fond transparent » venait de l'absence de fond sur .modal-content dans ce contexte). Le spinner d'attente (Sonic, injecté dans .sonic-wait) est centré. */ .messagePop .modal-content { background-color: var(--bs-modal-bg, #fff); color: var(--bs-body-color, #212529); border: 1px solid var(--bs-border-color, rgba(0, 0, 0, .175)); border-radius: var(--bs-border-radius-lg, .5rem); } .messagePop .modal-dialog { max-width: 420px; } /* Titre « Connexion en cours » centré (le bouton de fermeture est masqué pendant l'attente). */ .messagePop .modal-header { justify-content: center; } .messagePop .modal-title { width: 100%; text-align: center; } /* Spinner d'attente standard `.preloader` (réimplémenté ici car LoginLib.css — `.container .preloader` — n'est pas chargé sur le login générique). Coloré en --bs-primary pour rester visible sur le fond blanc de la modale. */ .messagePop .preloader { position: relative; display: flex; align-items: center; justify-content: center; height: 72px; margin: 0 auto; padding: 35px; } .messagePop .preloader:before, .messagePop .preloader:after { content: ""; position: absolute; border-radius: 50%; border: 4px solid var(--bs-main, #ff6136); animation: animate-preloader 2s cubic-bezier(0, 0.2, 0.8, 1) infinite; } .messagePop .preloader:after { animation-delay: -0.5s; } @keyframes animate-preloader { 0% { width: 10px; height: 10px; top: calc(50% - 5px); left: calc(50% - 5px); opacity: 1; } 100% { width: 72px; height: 72px; top: calc(50% - 36px); left: calc(50% - 36px); opacity: 0; } } /* Icône œil (afficher/masquer le mot de passe). Icône Lucide = STROKE uniquement : `fill:none` (un `fill` la transformait en aplat gris — ovale plein). La couleur vient du trait (stroke = currentColor par défaut Lucide, hérité de `color`). */ .toggle-password svg { width: 18px; height: 18px; fill: none; } .toggle-password.active svg { opacity: .4; } /* --------------------------------------------------------------------------- Résumé des erreurs de saisie du formulaire de connexion → ALERTE danger --------------------------------------------------------------------------- `@Html.ValidationSummary(true)` rend un `