/* Police Inter (300 à 700, fichier variable), servie par eBrigade et non plus
 * par Google Fonts : la page de connexion n'appelle plus de serveur
 * tiers pour s'afficher (pentest ZAP du 11/11/2026). Fichiers woff2 de Google
 * Fonts (licence OFL), jeux latin et latin-ext, dans webfonts/Inter/. */
/* Inter 300 à 700, latin-ext */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 300 700;
  font-display: swap;
  src: url('../webfonts/Inter/Inter-variable-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* Inter 300 à 700, latin */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 300 700;
  font-display: swap;
  src: url('../webfonts/Inter/Inter-variable-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* =============================================
   RESET & BASE
   ============================================= */

html, body {
  height: 100%;
  margin: 0;
  padding: 0;
}

* {
  font-family: 'Inter', 'Roboto', sans-serif !important;
  font-weight: 400 !important;
  box-sizing: border-box;
}

BODY {
  background-color: #F1F5F9;
  overflow: hidden;
  /* `clip` bloque aussi le débordement créé par un élément transformé : sur
     Safari mobile, `hidden` seul peut encore laisser la page se décaler
     horizontalement pendant l'animation d'entrée de la card. */
  overflow-x: clip;
}

/* =============================================
   LAYOUT PRINCIPAL
   ============================================= */

.login.login-1 {
  display: flex !important;
  flex-direction: row;
  height: 100vh;
  overflow: hidden;
}

/* Panneau gauche – visuel de marque.

   Les trois couches décoratives ci-dessous (dégradé de fond, halos bleus,
   grille de points) habillent le hero PAR DÉFAUT. Quand le client a téléversé
   son propre visuel, elles se posaient PAR-DESSUS et son image ressortait
   voilée de bleu/gris : rgba(37,99,235,.3) + rgba(99,102,241,.2) + un semis de
   blanc à 7 %. Ce n'était donc plus l'image envoyée.

   On ne décore donc plus que le hero par défaut. Deux formes de markup portent
   un visuel client, les deux sont exclues —
     - login.php          → .eb-login-custom-media-panel (image/vidéo sur un enfant)
     - email_verification → [style*='background-image'] (image en style inline) */
.login.login-1 > div:first-child {
  position: relative;
  overflow: hidden;
}

.login.login-1 > div:first-child:not(.eb-login-custom-media-panel):not([style*='background-image']) {
  background: linear-gradient(145deg, #0F172A 0%, #1E3A5F 50%, #1D4ED8 100%) !important;
}

.login.login-1 > div:first-child:not(.eb-login-custom-media-panel):not([style*='background-image'])::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse at 20% 50%, rgba(37, 99, 235, 0.3) 0%, transparent 60%),
    radial-gradient(ellipse at 80% 20%, rgba(99, 102, 241, 0.2) 0%, transparent 50%);
  pointer-events: none;
}

/* Grille de points décoratifs */
.login.login-1 > div:first-child:not(.eb-login-custom-media-panel):not([style*='background-image'])::after {
  content: '';
  position: absolute;
  inset: 0;
  background-image: radial-gradient(circle, rgba(255,255,255,0.07) 1px, transparent 1px);
  background-size: 28px 28px;
  pointer-events: none;
}

/* Panneau droit – fond subtil teinté qui détache la card */
.login.login-1 > div:last-child,
.justify-content-center.small-margin-top.d-flex.col-xs-12.col-md-12.col-lg-4,
.justify-content-center.small-margin-top.d-flex.col-12.col-lg-4 {
  background: linear-gradient(180deg, #F8FAFC 0%, #EEF2F8 100%) !important;
  box-shadow: -8px 0 40px rgba(15, 23, 42, 0.06);
  display: flex;
  flex-direction: column;
  justify-content: center;
  overflow-y: auto;
  padding: 2rem 1.5rem;
}

/* Card flottante autour du formulaire */
#loginBackdropRight {
  width: 100%;
  max-width: 420px;
  margin: 0 auto;
  padding: 2.5rem 2.25rem;
  display: flex;
  flex-direction: column;
  justify-content: center;
  position: relative;
  background: #FFFFFF;
  border-radius: 20px;
  box-shadow:
    0 1px 2px rgba(15, 23, 42, 0.04),
    0 10px 30px rgba(15, 23, 42, 0.08),
    0 30px 60px -20px rgba(79, 70, 229, 0.10);
  border: 1px solid rgba(226, 232, 240, 0.7);
}

/* =============================================
   LOGO SUR PANNEAU DROIT
   ============================================= */

div[style*='height:150px'] {
  height: auto !important;
  padding: 1.5rem 0 0.5rem;
}

div[style*='height:150px'] img {
  max-height: 56px !important;
}

/* =============================================
   FORMULAIRE – TITRES
   ============================================= */

.login-form .pb-5.pt-lg-0,
.login-form .pb-5 {
  /* Le pb-5 de Bootstrap (3rem) s'ajoutait à la marge : 76 px de vide entre
     « Connectez-vous à votre espace » et le premier champ. */
  padding-bottom: 0.5rem !important;
  margin-bottom: 1.75rem !important;
}

.login-form h3,
.login-form h3.font-weight-bolder {
  font-size: 1.6rem !important;
  font-weight: 700 !important;
  color: #0F172A !important;
  line-height: 1.3;
  margin-bottom: 0;
}

.font-weight-bolder {
  font-weight: 700 !important;
}

/* =============================================
   GROUPES DE CHAMPS
   ============================================= */

.form-group {
  width: 100% !important;
  margin-bottom: 1.1rem;
  position: relative;
}

.form-group label {
  display: block;
  font-size: 0.8125rem !important;
  font-weight: 600 !important;
  color: #334155 !important;
  margin-bottom: 0.4rem;
  letter-spacing: 0.01em;
}

/* =============================================
   CHAMPS DE SAISIE
   ============================================= */

input[type="text"],
input[type="password"],
input[type="email"] {
  width: 100%;
  height: 54px !important;
  padding: 0.9rem 1.1rem !important;
  font-size: 1rem !important;
  color: #1E293B !important;
  background: #F8FAFC !important;
  border: 1.5px solid #E2E8F0 !important;
  border-radius: 10px !important;
  outline: none;
  transition: border-color 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
  box-shadow: none !important;
  line-height: 1.5;
}

input[type="text"]:focus,
input[type="password"]:focus,
input[type="email"]:focus {
  background: #FFFFFF !important;
  border-color: #6366F1 !important;
  box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.18) !important;
}

input[type="text"].form-control,
input[type="password"].form-control {
  border-radius: 10px !important;
}

/* Erreur de champ */
input[type="text"][style*="bkg-color60"],
input[type="password"][style*="bkg-color60"] {
  border-color: #EF4444 !important;
  background: #FEF2F2 !important;
}

/* =============================================
   ICÔNE ŒIL – MOT DE PASSE
   ============================================= */

/* #11901 — Masque l'icône œil native d'Edge/IE (::-ms-reveal) et son bouton
   d'effacement (::-ms-clear) qui se superposent à #togglePassword sur la
   page de connexion (rendu doublé constaté sur la capture client). */
input[type="password"]::-ms-reveal,
input[type="password"]::-ms-clear {
  display: none !important;
}

#togglePassword {
  position: absolute;
  right: 14px;
  top: 50%;
  transform: translateY(-50%);
  margin: 0 !important;
  float: none !important;
  cursor: pointer;
  color: #64748B;
  font-size: 1rem;
  transition: color 0.2s;
  z-index: 2;
}

@media (hover: hover){#togglePassword:hover{
  color: #2563EB;
}}

/* #9687 — Icône fingerprint inline dans le champ password (login biométrique) */
#pwd_biometric_icon {
  position: absolute;
  right: 44px;
  top: 50%;
  transform: translateY(-50%);
  margin: 0 !important;
  float: none !important;
  cursor: pointer;
  color: #2563EB;
  font-size: 1.15rem;
  transition: color 0.2s, transform 0.15s;
  z-index: 2;
}

@media (hover: hover){#pwd_biometric_icon:hover{
  color: #1d4ed8;
  transform: translateY(-50%) scale(1.1);
}}

#pwd_biometric_icon.loading {
  pointer-events: none;
  opacity: 0.6;
}

/* Ajoute du padding-right sur l'input pour ne pas recouvrir les icônes quand les deux sont visibles */
#sam2 input#pwd {
  padding-right: 70px;
}

/* Repositionne l'icône correctement dans son conteneur */
.form-group .fv-plugins-icon-container {
  position: relative;
}

/* Conteneur mot de passe avec icône œil */
#sam2 .form-group,
#sam2 {
  position: relative;
}

#sam2 > div[style*='position:relative'] {
  position: relative;
}

/* =============================================
   LIEN "MOT DE PASSE OUBLIÉ"
   ============================================= */

.form-group a,
#kt_login_forgot {
  font-size: 0.8125rem !important;
  font-weight: 500 !important;
  color: #2563EB !important;
  text-decoration: none !important;
  transition: color 0.2s;
}

@media (hover: hover){#kt_login_forgot:hover{
  color: #1D4ED8 !important;
  text-decoration: underline !important;
}}

/* =============================================
   LOGIN PAGE LAYOUT & DEFAULT HERO
   Styles moved out of login.php to keep markup/PHP clean.
   ============================================= */

body#kt_body {
  background:
    radial-gradient(circle at 14% 18%, rgba(56, 189, 248, 0.14), transparent 30%),
    radial-gradient(circle at 84% 16%, rgba(59, 130, 246, 0.10), transparent 24%),
    linear-gradient(135deg, #dcecff 0%, #f7faff 48%, #eef3ff 100%) !important;
}

.login.login-1.bg-white {
  background: transparent !important;
}

.login.login-1 {
  position: relative;
  overflow: hidden;
}

.login.login-1::before,
.login.login-1::after {
  content: "";
  position: fixed;
  border-radius: 999px;
  pointer-events: none;
  filter: blur(48px);
  opacity: 0.3;
  z-index: 0;
}

.login.login-1::before {
  width: 16rem;
  height: 16rem;
  top: -4rem;
  right: -4rem;
  background: rgba(14, 165, 233, 0.18);
}

.login.login-1::after {
  width: 14rem;
  height: 14rem;
  left: -3rem;
  bottom: -4rem;
  background: rgba(99, 102, 241, 0.12);
}

/* #9687 — utilise 100dvh (dynamic viewport height) pour éviter le bug iOS Safari
   où la URL bar masque le bas du contenu. Fallback 100vh pour navigateurs anciens. */
.h-100p {
  height: 100vh !important;
  height: 100dvh !important;
}

.col-lg-4.flex-column {
  height: 100vh;
  height: 100dvh;
}

.row {
  margin-right: 0 !important;
  margin-left: 0 !important;
}

.small-margin-top {
  margin-top: 0 !important;
}

#kt_login {
  position: relative;
  z-index: 1;
}

.eb-login-custom-media-panel {
  position: relative;
  overflow: hidden;
  min-height: 100vh;
  min-height: 100dvh;
  background: #06131f;
}

.eb-login-hero-panel {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  min-height: 100vh;
  min-height: 100dvh;
  background:
    radial-gradient(circle at 18% 18%, rgba(56, 189, 248, 0.18), transparent 26%),
    radial-gradient(circle at 78% 18%, rgba(99, 102, 241, 0.14), transparent 24%),
    linear-gradient(150deg, #04101d 0%, #0a1728 42%, #0d213a 68%, #07111e 100%);
}

.eb-login-hero-panel::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(255,255,255,0.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.05) 1px, transparent 1px);
  background-size: 5rem 5rem;
  opacity: 0.1;
  mask-image: linear-gradient(180deg, rgba(255,255,255,0.2), transparent 72%);
  pointer-events: none;
}

.eb-login-hero-panel::after {
  content: "";
  position: absolute;
  inset: 1rem;
  border-radius: 2.2rem;
  border: 1px solid rgba(255,255,255,0.08);
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,0.02),
    0 24px 80px rgba(2, 8, 23, 0.16);
  pointer-events: none;
}

.eb-login-hero-overlay {
  position: absolute;
  inset: 0;
  z-index: 2;
  padding: 1.8rem;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  color: #f8fafc;
}

.eb-login-hero-overlay--minimal {
  align-items: center;
  justify-content: center;
  padding: 2rem;
}

.eb-login-hero-overlay--minimal::before,
.eb-login-hero-overlay--minimal::after {
  content: "";
  position: absolute;
  border-radius: 999px;
  filter: blur(24px);
  pointer-events: none;
  opacity: 0.5;
}

.eb-login-hero-overlay--minimal::before {
  width: 18rem;
  height: 18rem;
  top: 8%;
  left: -4%;
  background: radial-gradient(circle, rgba(56,189,248,0.18) 0%, rgba(56,189,248,0.02) 62%, transparent 74%);
  animation: ebAuroraFloat 18s ease-in-out infinite;
}

.eb-login-hero-overlay--minimal::after {
  width: 16rem;
  height: 16rem;
  right: -2%;
  bottom: 6%;
  background: radial-gradient(circle, rgba(99,102,241,0.14) 0%, rgba(99,102,241,0.02) 60%, transparent 74%);
  animation: ebAuroraFloat 20s ease-in-out infinite reverse;
}

.eb-login-hero-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  animation: ebHeroReveal 700ms ease-out both;
}

.eb-login-hero-kicker {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  padding: 0.6rem 0.9rem;
  border-radius: 999px;
  background: rgba(255,255,255,0.08);
  border: 1px solid rgba(255,255,255,0.14);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  font-weight: 700;
}

.eb-login-hero-kicker::before {
  content: "";
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 50%;
  background: linear-gradient(135deg, #34d399 0%, #38bdf8 100%);
  box-shadow: 0 0 0 0.28rem rgba(56, 189, 248, 0.10);
}

.eb-login-hero-logo {
  max-height: 3rem;
  width: auto;
  filter: drop-shadow(0 18px 32px rgba(2, 6, 23, 0.30));
}

.eb-login-hero-copy {
  max-width: 42rem;
  animation: ebHeroReveal 950ms ease-out both;
  animation-delay: 90ms;
}

.eb-login-hero-line {
  width: 4.5rem;
  height: 0.3rem;
  margin-bottom: 1.2rem;
  border-radius: 999px;
  background: linear-gradient(90deg, #38bdf8 0%, #34d399 45%, #a78bfa 100%);
  background-size: 200% 100%;
  animation: ebGradientShift 6s linear infinite;
}

.eb-login-hero-copy h2 {
  margin: 0 0 1rem;
  color: #fff;
  font-size: clamp(2.4rem, 4vw, 4.8rem);
  line-height: 0.94;
  letter-spacing: -0.05em;
  font-weight: 800;
  max-width: 11ch;
}

.eb-login-hero-copy p {
  margin: 0;
  max-width: 34rem;
  color: rgba(226, 232, 240, 0.88);
  font-size: 1rem;
  line-height: 1.7;
}

.eb-login-motion-stage {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 18rem;
  margin: 1rem 0 1.4rem;
  animation: ebHeroReveal 1100ms ease-out both;
  animation-delay: 140ms;
}

.eb-login-motion-stage--solo {
  width: 100%;
  min-height: min(38rem, 74vh);
  margin: 0;
}

.eb-login-motion-stage--solo::before {
  content: "";
  position: absolute;
  inset: 14% 18%;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(56,189,248,0.18) 0%, rgba(56,189,248,0.04) 48%, transparent 72%);
  filter: blur(14px);
  opacity: 0.75;
}

.eb-login-motion-stage--solo::after {
  content: "";
  position: absolute;
  width: min(24rem, 72%);
  height: 3.2rem;
  bottom: 11%;
  border-radius: 999px;
  background: radial-gradient(ellipse at center, rgba(56,189,248,0.18) 0%, rgba(56,189,248,0.04) 46%, transparent 74%);
  filter: blur(10px);
  opacity: 0.58;
}

.eb-login-motion-core {
  position: relative;
  width: min(22rem, 72%);
  aspect-ratio: 1;
  border-radius: 50%;
  display: grid;
  place-items: center;
  transform: translateZ(0);
}

.eb-login-motion-core::before {
  content: "";
  position: absolute;
  inset: 10%;
  border-radius: 50%;
  background:
    radial-gradient(circle at 30% 30%, rgba(255,255,255,0.24), rgba(255,255,255,0.02) 32%),
    linear-gradient(145deg, rgba(56,189,248,0.20), rgba(99,102,241,0.10));
  box-shadow:
    0 0 0 1px rgba(255,255,255,0.08),
    0 0 48px rgba(56,189,248,0.20),
    inset 0 0 24px rgba(255,255,255,0.04);
  animation: ebPulseCore 6s ease-in-out infinite;
}

.eb-login-motion-core::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 1px solid rgba(255,255,255,0.1);
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,0.03),
    0 0 72px rgba(14,165,233,0.08);
}

.eb-login-motion-ring,
.eb-login-motion-ring::before,
.eb-login-motion-ring::after {
  position: absolute;
  inset: 0;
  border-radius: 50%;
}

.eb-login-motion-ring {
  border: 1px solid rgba(255,255,255,0.11);
  animation: ebRotateSlow 24s linear infinite;
}

.eb-login-motion-ring::before,
.eb-login-motion-ring::after {
  content: "";
}

.eb-login-motion-ring::before {
  inset: -8%;
  border: 1px solid rgba(255,255,255,0.05);
}

.eb-login-motion-ring::after {
  inset: 16%;
  border: 1px solid rgba(255,255,255,0.07);
  opacity: 0.8;
}

.eb-login-motion-beam,
.eb-login-motion-beam::before,
.eb-login-motion-beam::after {
  display: none;
}

.eb-login-motion-center {
  position: relative;
  z-index: 2;
  width: 42%;
  aspect-ratio: 1;
  border-radius: 50%;
  display: grid;
  place-items: center;
  text-align: center;
  background:
    radial-gradient(circle at 30% 30%, rgba(255,255,255,0.18), rgba(255,255,255,0.04) 36%),
    linear-gradient(145deg, rgba(255,255,255,0.10), rgba(255,255,255,0.03));
  border: 1px solid rgba(255,255,255,0.14);
  box-shadow:
    0 20px 56px rgba(2, 8, 23, 0.22),
    inset 0 1px 0 rgba(255,255,255,0.10);
}

.eb-login-motion-center--logo {
  width: 46%;
}

.eb-login-motion-logo {
  width: 72%;
  max-width: 8.5rem;
  height: auto;
  filter:
    drop-shadow(0 12px 24px rgba(2, 6, 23, 0.24))
    drop-shadow(0 0 18px rgba(255,255,255,0.08));
  animation: ebLogoDrift 5.6s ease-in-out infinite;
}

.eb-login-motion-center strong {
  display: block;
  color: #fff;
  font-size: clamp(1.4rem, 2vw, 2rem);
  font-weight: 800;
  letter-spacing: -0.03em;
}

.eb-login-motion-center span {
  display: block;
  margin-top: 0.35rem;
  color: rgba(226,232,240,0.82);
  font-size: 0.76rem;
  text-transform: uppercase;
  letter-spacing: 0.18em;
}

.eb-login-motion-node {
  position: absolute;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.55rem 0.8rem;
  border-radius: 999px;
  background: rgba(255,255,255,0.1);
  border: 1px solid rgba(255,255,255,0.14);
  -webkit-backdrop-filter: blur(16px);
  backdrop-filter: blur(16px);
  color: #f8fafc;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  box-shadow: 0 16px 40px rgba(2, 8, 23, 0.14);
}

.eb-login-motion-node--dot {
  width: 0.95rem;
  height: 0.95rem;
  padding: 0;
  border-radius: 999px;
  background: linear-gradient(135deg, rgba(255,255,255,0.95) 0%, rgba(56,189,248,0.95) 100%);
  border: none;
  box-shadow:
    0 0 0 0.42rem rgba(56, 189, 248, 0.10),
    0 12px 34px rgba(2, 8, 23, 0.18),
    0 0 24px rgba(56,189,248,0.34);
}

.eb-login-motion-node--dot::before {
  display: none;
}

.eb-login-motion-node::before {
  content: "";
  width: 0.48rem;
  height: 0.48rem;
  border-radius: 50%;
  background: linear-gradient(135deg, #34d399 0%, #38bdf8 100%);
  box-shadow: 0 0 0 0.28rem rgba(56, 189, 248, 0.12);
}

.eb-login-motion-node--1 {
  top: 10%;
  left: 4%;
  animation: ebFloatNode 6s ease-in-out infinite;
}

.eb-login-motion-node--2 {
  top: 18%;
  right: 2%;
  animation: ebFloatNode 7.5s ease-in-out infinite reverse;
}

.eb-login-motion-node--3 {
  bottom: 14%;
  left: 11%;
  animation: ebFloatNode 6.8s ease-in-out infinite;
}

.eb-login-motion-node--4 {
  bottom: 8%;
  right: 8%;
  animation: ebFloatNode 8.5s ease-in-out infinite reverse;
}

.eb-login-motion-node,
.eb-login-motion-ticker {
  display: none;
}

.eb-login-motion-ticker {
  position: absolute;
  left: 50%;
  bottom: -0.15rem;
  transform: translateX(-50%);
  display: flex;
  gap: 0.65rem;
  padding: 0.55rem 0.8rem;
  border-radius: 999px;
  background: rgba(7, 16, 28, 0.42);
  border: 1px solid rgba(255,255,255,0.12);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  box-shadow: 0 18px 40px rgba(2, 8, 23, 0.18);
}

.eb-login-motion-ticker span {
  color: rgba(226,232,240,0.82);
  font-size: 0.68rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  white-space: nowrap;
}

.eb-login-motion-ticker span::before {
  content: '•';
  margin-right: 0.65rem;
  color: #34d399;
}

.eb-login-hero-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1rem;
  max-width: 48rem;
  animation: ebHeroReveal 1200ms ease-out both;
  animation-delay: 220ms;
}

.eb-login-hero-card {
  position: relative;
  overflow: hidden;
  padding: 1rem 1.05rem;
  border-radius: 1.35rem;
  background: rgba(255,255,255,0.09);
  border: 1px solid rgba(255,255,255,0.13);
  -webkit-backdrop-filter: blur(16px);
  backdrop-filter: blur(16px);
  box-shadow: 0 18px 45px rgba(2, 8, 23, 0.18);
  transition: transform 220ms ease, border-color 220ms ease, background 220ms ease;
}

.eb-login-hero-card::after {
  content: '';
  position: absolute;
  inset: -40% auto auto -20%;
  width: 50%;
  height: 180%;
  background: linear-gradient(90deg, transparent 0%, rgba(255,255,255,0.20) 50%, transparent 100%);
  transform: rotate(18deg);
  animation: ebShine 8s ease-in-out infinite;
}

@media (hover: hover){.eb-login-hero-card:hover{
  transform: translateY(-4px);
  border-color: rgba(255,255,255,0.24);
  background: rgba(255,255,255,0.13);
}}

.eb-login-hero-card strong {
  display: block;
  margin-bottom: 0.35rem;
  color: #fff;
  font-size: 1.2rem;
  font-weight: 800;
}

.eb-login-hero-card span {
  display: block;
  color: rgba(226,232,240,0.82);
  font-size: 0.82rem;
  line-height: 1.5;
}

.form-control:focus {
  box-shadow: 0 0 0 2px rgba(13, 110, 253, 0.2) !important;
  border-color: #0d6efd !important;
}

.form-control.is-invalid,
.form-control.eb-login-error {
  border-color: #ef4444 !important;
  box-shadow: 0 0 0 2px rgba(239, 68, 68, 0.15) !important;
}

.eb-login-aside-wrapper.eb-has-video {
  position: relative;
  overflow: hidden;
  min-height: 100vh;
  min-height: 100dvh;
}

.eb-login-aside-wrapper.eb-has-video .eb-login-video-frame {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0 !important;
  padding: 0 !important;
}

div#background-video,
iframe#background-video {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  border: 0 !important;
  pointer-events: none;
  object-fit: cover;
}

@media (max-width: 991px) {
  body#kt_body .login.login-1 > .row > .col-lg-4 {
    padding: 1.5rem 1.25rem !important;
  }

  body#kt_body .login.login-1 > .row > .col-lg-4.flex-column {
    min-height: 100vh;
    min-height: 100dvh;
    height: auto !important;
  }

  .eb-login-aside-splash {
    padding-bottom: 75%;
  }

  .eb-login-aside-wrapper.eb-has-video {
    height: 40%;
    margin-bottom: 10px;
  }

  .eb-login-video-frame {
    height: 100%;
  }

  .eb-login-footer-container {
    position: relative;
  }

  .eb-login-hero-panel,
  .eb-login-custom-media-panel,
  .eb-login-aside-wrapper.eb-has-video {
    min-height: 18rem;
  }

  .eb-login-hero-overlay {
    padding: 1.1rem;
  }

  .eb-login-hero-top {
    flex-direction: column;
    align-items: flex-start;
  }

  .eb-login-hero-logo {
    max-height: 2.2rem;
  }

  .eb-login-hero-copy h2 {
    font-size: 2rem;
    max-width: 11ch;
  }

  .eb-login-hero-copy p {
    font-size: 0.92rem;
    max-width: 100%;
  }

  .eb-login-motion-stage {
    min-height: 11rem;
    margin: 0.9rem 0 1.1rem;
  }

  .eb-login-motion-stage--solo {
    min-height: 15rem;
  }

  .eb-login-motion-center {
    width: 48%;
  }

  .eb-login-motion-center--logo {
    width: 54%;
  }

  .eb-login-hero-grid {
    grid-template-columns: 1fr;
  }
}

.eb-login-badge {
  background: rgba(255,255,255,0.10);
  border: 1px solid rgba(255,255,255,0.15);
  color: rgba(255,255,255,0.82);
  font-size: 0.75rem;
  padding: 0.5rem 1rem;
  border-radius: 999px;
  white-space: nowrap;
  z-index: 2;
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  display: flex;
  align-items: center;
  gap: 0.4rem;
}

.eb-login-badge i {
  color: #34D399;
}

.login.login-1 > div:first-child:not(.eb-login-custom-media-panel):not([style*='background-image']) {
  border-right: 1px solid rgba(255,255,255,0.06);
}

@keyframes ebHeroReveal {
  from { opacity: 0; transform: translate3d(0, 18px, 0); }
  to { opacity: 1; transform: translate3d(0, 0, 0); }
}

@keyframes ebGradientShift {
  0% { background-position: 0% 50%; }
  100% { background-position: 200% 50%; }
}

@keyframes ebPulseCore {
  0%, 100% { transform: scale(1); opacity: 0.92; }
  50% { transform: scale(1.025); opacity: 1; }
}

@keyframes ebAuroraFloat {
  0%, 100% { transform: translate3d(0, 0, 0) scale(1); }
  50% { transform: translate3d(0, -10px, 0) scale(1.04); }
}

@keyframes ebRotateSlow {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

@keyframes ebFloatNode {
  0%, 100% { transform: translate3d(0, 0, 0); }
  50% { transform: translate3d(0, -10px, 0); }
}

@keyframes ebLogoDrift {
  0%, 100% { transform: translate3d(0, 0, 0) scale(1); }
  50% { transform: translate3d(0, -4px, 0) scale(1.02); }
}

@keyframes ebShine {
  0%, 100% { transform: translateX(-140%) rotate(18deg); opacity: 0; }
  14% { opacity: 0.55; }
  28% { transform: translateX(280%) rotate(18deg); opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .eb-login-hero-overlay *,
  .eb-login-hero-overlay::before,
  .eb-login-hero-overlay::after,
  .eb-login-hero-panel::before,
  .eb-login-motion-core::before,
  .eb-login-motion-ring {
    animation: none !important;
    transition: none !important;
  }
}

@media (max-width: 370px) and (min-width: 350px) {
  #sam1,
  #sam2 {
    width: 95% !important;
  }

  .pb-lg-0.flex {
    width: 95% !important;
    min-width: unset !important;
  }
}

#mfa-form .mfa-code-container {
  display: flex;
}

#mfa-form .mfa-code-container input {
  width: 50px;
  height: 50px;
  text-align: center;
  font-size: 16px;
  color: #000;
  border: 1px solid #ccc;
  border-radius: 5px;
  margin-right: 10px;
}

#mfa-form .form-group {
  display: flex;
  align-items: center;
  gap: 10px;
}

#countdown {
  position: relative;
  width: 40px;
  height: 40px;
}

#countdown svg {
  position: absolute;
  width: 100%;
  height: 100%;
}

#countdown circle {
  fill: none;
  stroke: #007bff;
  stroke-width: 3;
  stroke-dasharray: 113;
  stroke-dashoffset: 0;
  transform: rotate(-90deg);
  transform-origin: center;
  transition: stroke-dashoffset 1s linear;
}

#countdown-text {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 16px;
  font-weight: bold;
}

.base-timer {
  position: relative;
  width: 60px;
  height: 60px;
}

.base-timer__svg {
  transform: scaleX(-1);
}

.base-timer__circle {
  fill: none;
  stroke: none;
}

.base-timer__path-elapsed {
  stroke-width: 7px;
  stroke: grey;
}

.base-timer__path-remaining {
  stroke-width: 7px;
  stroke-linecap: round;
  transform: rotate(90deg);
  transform-origin: center;
  transition: 1s linear all;
  fill-rule: nonzero;
  stroke: currentColor;
}

.base-timer__path-remaining.green {
  color: #0d6efd;
}

.base-timer__path-remaining.orange {
  color: orange;
}

.base-timer__path-remaining.red {
  color: red;
}

.base-timer__label {
  position: absolute;
  width: 60px;
  height: 60px;
  top: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
}

.d-flex.justify-content-between.pt-3 {
  padding-top: 0 !important;
  margin-bottom: 0.4rem;
}

/* =============================================
   BOUTONS
   ============================================= */

input[type="submit"],
.btn {
  font-weight: 500 !important;
  padding: 0 1.5rem !important;
  border-radius: 10px !important;
  height: 54px !important;
  line-height: 1;
  transition: all 0.22s ease !important;
  box-shadow: none !important;
  font-size: 1rem !important;
  margin: 0 !important;
  cursor: pointer;
  border: none;
}

/* La hauteur fixe ci-dessus n'est centree que dans un <button>, qui aligne son contenu
   verticalement tout seul. Un <a class="btn"> (bouton « Postuler » du module recrutement)
   est un inline-block : sa ligne de texte se colle en haut de la boite. */
a.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

/* Bouton principal */
.btn.btn-primary,
#kt_login_signin_submit {
  background: #2563EB !important;
  color: #FFFFFF !important;
  border: none !important;
  min-width: 160px;
}

@media (hover: hover){.btn.btn-primary:hover,#kt_login_signin_submit:hover{
  background: #1D4ED8 !important;
  transform: translateY(-1px);
  box-shadow: 0 4px 16px rgba(37, 99, 235, 0.35) !important;
}}

.btn.btn-primary:active,
#kt_login_signin_submit:active {
  transform: translateY(0);
  box-shadow: none !important;
}

.btn.btn-primary:disabled,
#kt_login_signin_submit:disabled {
  background: #93C5FD !important;
  transform: none !important;
  box-shadow: none !important;
  cursor: not-allowed;
}

/* Bouton secondaire */
.btn.btn-secondary,
button#kt_login_forgot_cancel {
  background: #F1F5F9 !important;
  color: #475569 !important;
  border: 1.5px solid #E2E8F0 !important;
}

#kt_login_forgot_cancel.eb-forgot-back-link {
  background: transparent !important;
  border: 0 !important;
  color: #2563EB !important;
}

#kt_login_forgot_cancel.eb-forgot-back-link:focus{
  color: #1D4ED8 !important;
  text-decoration: underline !important;
}
@media (hover: hover){#kt_login_forgot_cancel.eb-forgot-back-link:hover{
  color: #1D4ED8 !important;
  text-decoration: underline !important;
}}

@media (hover: hover){.btn.btn-secondary:hover{
  background: #E2E8F0 !important;
  border-color: #CBD5E1 !important;
  color: #1E293B !important;
}}

/* Zone d'actions (boutons empilés) */
.d-flex.flex-column.align-items-center.justify-content-center.gap-3 {
  gap: 0.75rem !important;
  padding-top: 0.5rem;
}

/* Séparateur "ou"
   Cible la classe dédiée `.eb-login-separator`, jamais `.d-block` seul : d'autres
   enfants de la zone d'actions portent `.d-block` (bouton « Postuler » du module
   recrutement) et héritaient sinon du texte gris 13px et des deux traits, tracés
   en travers du bouton. */
.eb-login-separator {
  font-size: 0.8125rem;
  color: #64748B;
  position: relative;
  width: 100%;
  text-align: center;
}

.eb-login-separator::before,
.eb-login-separator::after {
  content: '';
  position: absolute;
  top: 50%;
  width: 42%;
  height: 1px;
  background: #E2E8F0;
}

.eb-login-separator::before {
  left: 0;
}

.eb-login-separator::after {
  right: 0;
}

/* =============================================
   MESSAGES D'ERREUR
   ============================================= */

.fv-plugins-message-container {
  margin-top: 0.3rem;
  position: static !important;
}

.fv-plugins-message-container .fv-help-block {
  color: #EF4444;
  font-size: 0.78rem;
  font-weight: 500 !important;
  display: flex;
  align-items: center;
  gap: 0.25rem;
}

.fv-plugins-message-container .fv-help-block::before {
  content: '⚠';
  font-size: 0.7rem;
}

/* =============================================
   PANNEAU GAUCHE – CONTENU
   ============================================= */

.aside-img {
  background:
    radial-gradient(circle at 20% 20%, rgba(56, 189, 248, 0.24) 0%, transparent 26%),
    radial-gradient(circle at 80% 30%, rgba(129, 140, 248, 0.24) 0%, transparent 24%),
    radial-gradient(circle at 50% 78%, rgba(52, 211, 153, 0.2) 0%, transparent 22%),
    linear-gradient(180deg, rgba(255,255,255,0.06) 0%, rgba(255,255,255,0.01) 100%);
  flex-grow: 1;
  opacity: 0.9;
  border-radius: 2rem 2rem 0 0;
  position: relative;
  overflow: hidden;
}

.aside-img::before,
.aside-img::after {
  content: "";
  position: absolute;
  inset: auto;
  border-radius: 999px;
  pointer-events: none;
}

.aside-img::before {
  width: 18rem;
  height: 18rem;
  left: 12%;
  bottom: -5rem;
  background: radial-gradient(circle, rgba(255,255,255,0.22) 0%, rgba(255,255,255,0.02) 62%, transparent 70%);
  filter: blur(8px);
}

.aside-img::after {
  width: 12rem;
  height: 12rem;
  right: 10%;
  top: 12%;
  border: 1px solid rgba(255,255,255,0.15);
  box-shadow: 0 0 0 2.4rem rgba(255,255,255,0.03);
}

/* Logo sur panneau gauche */
.d-flex.flex-column-auto.flex-column {
  position: relative;
  z-index: 1;
}

.d-flex.flex-column-auto.flex-column .text-center.my-5 {
  margin-top: 2.5rem !important;
  margin-bottom: 1.5rem !important;
}

.d-flex.flex-column-auto.flex-column img {
  max-height: 72px !important;
  filter: brightness(0) invert(1);
}

/* Tagline sur panneau gauche */
h4.font-weight-bolder.text-center {
  color: #FFFFFF !important;
  font-size: 1.35rem !important;
  font-weight: 600 !important;
  line-height: 1.55;
  margin: 0 2rem;
  position: relative;
  z-index: 1;
  opacity: 0.92;
}

/* =============================================
   AFFICHAGE DES PANNEAUX SIGNIN / FORGOT
   ============================================= */

.login.login-1 .login-signin,
.login.login-1 .login-signup,
.login.login-1 .login-forgot {
  overflow-x: hidden;
  display: none;
}

.login.login-1.login-signin-on .login-signup  { display: none; }
.login.login-1.login-signin-on .login-signin  { display: block; }
.login.login-1.login-signin-on .login-forgot  { display: none; }

.login.login-1.login-signup-on .login-signup  { display: block; }
.login.login-1.login-signup-on .login-signin  { display: none; }
.login.login-1.login-signup-on .login-forgot  { display: none; }

.login.login-1.login-forgot-on .login-signup  { display: none; }
.login.login-1.login-forgot-on .login-signin  { display: none; }
.login.login-1.login-forgot-on .login-forgot  { display: block; }

/* =============================================
   PAGE "MOT DE PASSE OUBLIÉ"
   ============================================= */

.login-form.login-forgot .pb-5.pt-lg-0 h3 {
  font-size: 1.4rem !important;
  font-weight: 700 !important;
}

.login-form.login-forgot .text-muted {
  font-size: 0.875rem !important;
  color: #64748B !important;
  line-height: 1.5;
  margin-bottom: 0;
}

.d-flex.flex-wrap.pb-lg-0.gap-1 {
  gap: 0.75rem !important;
  margin-top: 0.5rem;
}

/* =============================================
   MFA – SAISIE DU CODE
   ============================================= */

.mfa-code-container {
  display: flex !important;
  gap: 0.6rem;
  justify-content: center;
  margin-bottom: 1.25rem;
  width: 100%;
  max-width: 100%;
  flex-wrap: nowrap;
  box-sizing: border-box;
}

.mfa-code-container input {
  flex: 1 1 0;
  min-width: 0;
  width: auto !important;
  max-width: 52px;
  height: 58px !important;
  text-align: center !important;
  font-size: 1.3rem !important;
  font-weight: 600 !important;
  color: #1E293B !important;
  background: #F8FAFC !important;
  border: 1.5px solid #E2E8F0 !important;
  border-radius: 12px !important;
  margin: 0 !important;
  padding: 0 !important;
  box-sizing: border-box;
  transition: all 0.2s ease;
  outline: none;
}

.mfa-code-container input:focus {
  background: #FFFFFF !important;
  border-color: #2563EB !important;
  box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.15) !important;
  transform: translateY(-2px);
}

.mfa-code-container input:not(:placeholder-shown):not(:focus) {
  background: #EFF6FF !important;
  border-color: #93C5FD !important;
  color: #1D4ED8 !important;
}

/* Compte à rebours MFA */
#countdown_mfa {
  display: flex;
  align-items: center;
}

#countdown svg circle {
  stroke: #2563EB;
}

/* =============================================
   PIED DE PAGE
   ============================================= */

.footer {
  position: static !important;
  margin-top: 2rem;
  text-align: center;
  width: 100%;
  padding-bottom: 0.5rem;
}

.footer .text-dark-50 {
  font-size: 0.78rem !important;
  color: #94A3B8 !important;
}

.footer a {
  color: #2563EB !important;
  font-weight: 500 !important;
  text-decoration: none !important;
}

@media (hover: hover){.footer a:hover{
  text-decoration: underline !important;
}}

/* =============================================
   ICÔNE FONT AWESOME
   ============================================= */

.fa,
.fas, .fa-solid {
  font-family: "Font Awesome 6 Free" !important;
  font-weight: 900 !important;
}
.far, .fa-regular {
  font-family: "Font Awesome 6 Free" !important;
  font-weight: 400 !important;
}
.fab, .fa-brands {
  font-family: "Font Awesome 6 Brands" !important;
  font-weight: 400 !important;
}

/* =============================================
   LOGIN FORM MAX-WIDTH & CONTENEUR
   ============================================= */

.login-form {
  width: 100%;
  max-width: 380px;
  margin: 0 auto;
}

.login-content {
  padding: 1rem;
}

/* Conteneur du panneau droit */
.d-flex.flex-column-fluid.flex-center.mx-auto {
  width: 100%;
}

/* =============================================
   ANIMATION D'ENTRÉE
   ============================================= */

#loginBackdropRight {
  animation: slideInRight 0.45s cubic-bezier(0.16, 1, 0.3, 1) both;
}

@keyframes slideInRight {
  from {
    opacity: 0;
    transform: translateX(24px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

/* =============================================
   RESPONSIVE MOBILE
   ============================================= */

@media (max-width: 992px) {
  BODY {
    overflow: auto;
  }

  .login.login-1 {
    flex-direction: column;
    height: auto;
    min-height: 100vh;
  }

  /* Cache le panneau gauche sur mobile — sauf s'il porte le visuel du CLIENT.
     La garde ne testait que le style inline `background-image`, forme que
     `login.php` n'a JAMAIS emise : l'image y est posee sur un enfant
     `.eb-login-aside-splash`, le panneau lui-meme n'a aucun attribut `style`.
     Le visuel televerse disparaissait donc entierement sous 992 px depuis la
     refonte du 10/04/2026. `.eb-login-custom-media-panel` rattrape image ET
     video ; `[style*='background-image']` reste pour la page racine
     `email_verification`, qui pose son image en style inline. */
  .login.login-1 > div:first-child:not(.eb-login-custom-media-panel):not([style*='background-image']) {
    display: none !important;
  }

  /* La VIDEO, elle, reste cachee sur mobile. Un lecteur YouTube ne sait pas
     remplir une bande de ~110 px : `object-fit: cover` ne s'applique pas a un
     iframe, le lecteur se contente de mettre son 16:9 en boite et la bande
     ressort presque entierement NOIRE. Une image de fond, elle, se recadre
     toute seule (`background-size: cover`) — d'ou l'exception limitee a elle. */
  .login.login-1 > .eb-login-custom-media-panel.eb-has-video {
    display: none !important;
  }

  /* Le visuel se réduit indépendamment du formulaire sur écran étroit. */
  body#kt_body .login.login-1 > .eb-login-custom-media-panel {
    flex: 1 1 auto;
    height: auto !important;
    min-height: 0 !important;
  }

  /* L'image elle-meme suit la bande, au lieu d'imposer son ratio 4:3 : le
     `padding-bottom: 75%` du bloc voisin se calcule sur la LARGEUR et ne sait
     rien de la place disponible. */
  body#kt_body .login.login-1 > .eb-login-custom-media-panel .eb-login-aside-splash {
    flex: 1 1 auto;
    height: auto !important;
    min-height: 0;
    padding-bottom: 0 !important;
  }

  /* Le panneau du formulaire garde sa hauteur de contenu et ne se laisse pas
     comprimer : c'est lui qui sert de reference au partage. Cible par `~`,
     il n'existe que quand un visuel client le precede. */
  body#kt_body .login.login-1 > .eb-login-custom-media-panel ~ div {
    flex: 0 0 auto;
    height: auto !important;
    min-height: 0 !important;
    max-height: 100% !important;
  }

  .aside-img {
    display: none !important;
  }

  /* Mobile : pas de card flottante, panneau pleine page blanc */
  .login.login-1 > div:last-child,
  .justify-content-center.small-margin-top.d-flex.col-12.col-lg-4,
  .justify-content-center.small-margin-top.d-flex.col-xs-12.col-md-12.col-lg-4 {
    width: 100% !important;
    min-height: 100vh;
    background: #FFFFFF !important;
    box-shadow: none !important;
    padding: 2rem 1.25rem !important;
  }

  #loginBackdropRight {
    padding: 1.5rem 1rem !important;
    max-width: 100% !important;
    background: transparent !important;
    border: none !important;
    border-radius: 0 !important;
    box-shadow: none !important;
  }

  .login-form {
    max-width: 100%;
  }

  h4.font-weight-bolder.text-center {
    display: none;
  }

  .mfa-code-container input {
    max-width: 44px;
    height: 50px !important;
    font-size: 1.1rem !important;
  }
}

@media (max-width: 480px) {
  .mfa-code-container {
    gap: 0.4rem;
  }

  .mfa-code-container input {
    max-width: 40px;
    height: 46px !important;
    font-size: 1rem !important;
    border-radius: 8px !important;
  }

  input[type="text"],
  input[type="password"] {
    height: 50px !important;
  }

  .btn {
    height: 50px !important;
  }
}

@media (max-width: 370px) and (min-width: 350px) {
  #sam1, #sam2 {
    width: 95% !important;
  }
}

/* =============================================
   MOBILE — CONTENU COMPACT, DÉFILEMENT SI NÉCESSAIRE
   La hauteur disponible varie aussi avec le paysage, le zoom et le clavier.
   Le contenu reste dans le flux pour garder toutes les actions accessibles.
   ============================================= */
@media (max-width: 991px) {
  html,
  body,
  body#kt_body {
    height: auto !important;
    max-height: none !important;
    width: 100% !important;
    max-width: 100% !important;
    overflow: visible !important;
    overflow-x: clip !important;
    overflow-y: auto !important;
    min-height: 100dvh;
    background: #FFFFFF !important;
  }

  /* Neutralise les halos/dégradés décoratifs en mobile */
  .login.login-1::before,
  .login.login-1::after {
    display: none !important;
  }

  #kt_login,
  .login.login-1 {
    width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    min-width: 0 !important;
    max-width: 100% !important;
    overflow: visible !important;
    overflow-x: clip !important;
  }

  /* Le panneau garde sa hauteur naturelle, même sur écran bas. */
  body#kt_body .login.login-1 > .row > .col-lg-4,
  body#kt_body .login.login-1 > .row > .col-lg-4.flex-column,
  .login.login-1 > div:last-child,
  .justify-content-center.small-margin-top.d-flex.col-12.col-lg-4,
  .justify-content-center.small-margin-top.d-flex.col-xs-12.col-md-12.col-lg-4 {
    height: auto !important;
    min-height: 0 !important;
    min-width: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    max-height: none !important;
    background: #FFFFFF !important;
    box-shadow: none !important;
    padding: 1rem 1.1rem !important;
    overflow: visible !important;
  }

  #loginBackdropRight {
    width: 100% !important;
    min-width: 0 !important;
    padding: 0.5rem 0.25rem !important;
    max-width: 100% !important;
    max-height: none !important;
    background: transparent !important;
    border: none !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    overflow: visible !important;
    overflow-x: clip !important;
    /* L'animation desktop part de translateX(24px). Sur les petits écrans ce
       déplacement suffit à agrandir momentanément la zone scrollable et iOS
       conserve parfois ce décalage après la fin de l'animation. */
    animation: none !important;
    transform: none !important;
  }

  /* Tous les descendants flex doivent pouvoir rétrécir. Les boutons fournis
     par les modules Google, SSO ou Recrutement ne doivent jamais imposer leur
     largeur intrinsèque à la page. */
  #loginBackdropRight > .d-flex,
  #loginBackdropRight .login-form,
  #loginBackdropRight form,
  #loginBackdropRight .d-flex.flex-column.align-items-center.justify-content-center.gap-3 {
    width: 100%;
    min-width: 0;
    max-width: 100%;
  }

  #loginBackdropRight .btn,
  #loginBackdropRight button,
  #loginBackdropRight a,
  #loginBackdropRight .g_id_signin,
  #loginBackdropRight .g_id_signin > div,
  #loginBackdropRight .g_id_signin iframe {
    min-width: 0 !important;
    max-width: 100% !important;
  }

  /* Logo au-dessus du message de bienvenue (client sinon eBrigade) */
  .eb-login-mobile-logo {
    margin-bottom: 0.75rem;
  }
  .eb-login-mobile-logo img {
    max-height: 56px;
    max-width: 70%;
    object-fit: contain;
  }

  /* Compresse le bloc titre pour gagner de la hauteur */
  .login-form .pb-5.pt-lg-0,
  .login-form .pb-5 {
    padding-bottom: 0.5rem !important;
    margin-bottom: 0.75rem !important;
  }

  .login-form h3,
  .login-form h3.font-weight-bolder {
    font-size: 1.35rem !important;
  }

  .form-group {
    margin-bottom: 0.65rem !important;
  }

  input[type="text"],
  input[type="password"],
  input[type="email"] {
    height: 48px !important;
  }

  .btn {
    height: 48px !important;
  }
}
@media (max-width: 991px) {
  body#kt_body .login.login-1 { min-height: 100dvh !important; }
  body#kt_body .login.login-1 > .eb-login-custom-media-panel {
    flex: 0 0 auto;
    height: clamp(64px, 16dvh, 136px) !important;
  }
  body#kt_body .login.login-1 > .eb-login-custom-media-panel ~ div {
    max-height: none !important;
  }
}

/* =============================================
   SWEETALERT OVERRIDES
   ============================================= */

.swalResetPassword {
  font-family: 'Inter', 'Poppins', sans-serif !important;
}

/* Pas de gestion du dark mode sur la page de login. La classe .dark est
   retirée de <html> par un script inline dans login.php (avant le rendu),
   donc tous les styles main.css en :root.dark ne s'appliquent pas ici. */

/* ── Fenêtre « Mot de passe oublié » : choix du canal d'envoi ──────────────
   La rangée de boutons portait .swal2-actions, qui est la classe du PIED de
   dialogue : justify-content:flex-end, liseré supérieur, fond et padding, le
   tout en !important. Un bouton seul se retrouvait donc collé à droite, sous
   un trait, au milieu du texte. Elle a sa propre classe.
   Aucune couleur n'est posée ici : le contenu du dialogue hérite déjà des
   siennes, et les figer casserait le thème sombre. */
.eb-reset-choice {
  text-align: center;
}
.eb-reset-choice__lead {
  margin: 0 0 6px;
}
.eb-reset-choice__hint {
  margin: 0 0 4px;
  opacity: .7;
  font-size: 13px;
}
.eb-reset-choice__actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
  margin-top: 18px;
}
.eb-reset-choice__actions .btn-swal {
  min-width: 156px;
  justify-content: center;
}
/* Sur un écran étroit, deux boutons côte à côte passent sous la largeur
   lisible : ils s'empilent plutôt que de se serrer. */
@media (max-width: 420px) {
  .eb-reset-choice__actions {
    flex-direction: column;
  }
  .eb-reset-choice__actions .btn-swal {
    width: 100%;
  }
}

/* Actions nommées au clavier, dans la même zone que les icônes historiques. */
button#togglePassword, button#pwd_biometric_icon {
  width: 44px; height: 44px; padding: 0; border: 0; border-radius: 8px;
  background: transparent; box-shadow: none; display: inline-grid; place-items: center;
}
button#togglePassword { right: 4px; }
button#pwd_biometric_icon { right: 48px; }
button#togglePassword:focus-visible, button#pwd_biometric_icon:focus-visible {
  outline: 2px solid #2563eb; outline-offset: -3px;
}
#sam2 input#pwd { padding-right: 96px; }

/* =============================================
   PASSE UI/UX DU 11/11/2026 — PRÉSENTATION SEULE
   Tout passe par les jetons (css/eb_ui_harmonisation.css, dashboard-modern.css,
   durées de css/eb_motion.css). Aucune règle ne touche à la soumission.
   ============================================= */

/* Sous-titre et « Se souvenir de moi » : styles sortis de login.php. */
.login-form .eb-login-lead {
  margin: var(--eb-space-1) 0 0;
  font-size: var(--eb-fs-md);
  color: var(--eb-text-secondary);
}
#eb_remember_wrapper {
  padding: 0;
}
#eb_remember_wrapper label {
  display: flex;
  align-items: center;
  gap: var(--eb-space-2);
  margin: 0;
  user-select: none;
  color: var(--eb-text-secondary) !important;
  font-weight: 500 !important;
}
#eb_remember_me {
  flex: 0 0 auto;
  width: 18px;
  height: 18px;
  margin: 0;
  accent-color: var(--eb-primary);
}

/* Champs : un seul bleu (celui du bouton) au focus, bord qui répond au survol.
   Deux règles se disputaient le focus (indigo, puis bleu Bootstrap). */
#kt_login input[type="text"]:focus,
#kt_login input[type="password"]:focus,
#kt_login input[type="email"]:focus {
  border-color: var(--eb-primary) !important;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--eb-primary) 20%, transparent) !important;
}
@media (hover: hover) {
  #kt_login input[type="text"]:hover:not(:focus),
  #kt_login input[type="password"]:hover:not(:focus),
  #kt_login input[type="email"]:hover:not(:focus) {
    border-color: var(--eb-text-muted) !important;
  }
}

/* Identifiants refusés : les deux champs le disent, focus compris, jusqu'à la
   première frappe (js/login-general.js retire eb-login-error). */
#kt_login input.form-control.eb-login-error,
#kt_login input.form-control.eb-login-error:hover,
#kt_login input.form-control.eb-login-error:focus {
  border-color: var(--eb-danger) !important;
  background: var(--eb-danger-light) !important;
}
#kt_login input.form-control.eb-login-error:focus {
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--eb-danger) 20%, transparent) !important;
}

/* Focus au clavier : liens, boutons et case à cocher (les liens portaient un
   outline:none en ligne, on ne voyait pas où était la tabulation). */
#kt_login_forgot:focus-visible,
#kt_login_forgot_cancel:focus-visible,
#kt_login .btn:focus-visible,
#eb_remember_me:focus-visible {
  outline: 2px solid var(--eb-primary) !important;
  outline-offset: 2px;
  border-radius: var(--eb-radius-xs);
}
#kt_login .btn:focus-visible {
  border-radius: var(--eb-radius-md);
}
/* Le volet coupait ce qui dépasse sur les côtés : l'anneau du lien, collé au
   bord droit, était rogné. Sur grand écran le panneau a 36 px de marge. */
@media (min-width: 992px) {
  .login.login-1 .login-signin,
  .login.login-1 .login-forgot {
    overflow-x: visible;
  }
}

/* « Vérification… » : le voile est inséré À CÔTÉ du bouton (#12050 : on ne
   touche jamais au bouton pendant l'envoi). Il se pose désormais SUR lui, à
   ses dimensions, au lieu de pousser la suite du formulaire d'une ligne.
   pointer-events:none : le bouton reste cliquable dessous (relance possible). */
#kt_login_signin_form > .d-flex.flex-column.gap-3 {
  --eb-login-btn-h: 54px;
  row-gap: var(--eb-space-3);
}
.eb-login-checking {
  position: relative;
  z-index: 1;
  align-self: stretch;
  height: var(--eb-login-btn-h);
  /* remonte d'une hauteur de bouton et de l'écart de la pile : exactement dessus */
  margin-top: calc(-1 * (var(--eb-login-btn-h) + var(--eb-space-3)));
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--eb-space-2);
  border-radius: var(--eb-radius-md);
  background: var(--eb-primary-hover);
  color: var(--eb-surface);
  font-size: var(--eb-fs-lg);
  font-weight: 500;
  pointer-events: none;
  animation: ebLoginFondu var(--eb-motion-base) var(--eb-ease-out) both;
}

/* Volet « Mot de passe oublié » : même gabarit que la connexion (bouton pleine
   largeur, plus de ligne vide), et le volet qui arrive après un clic se pose
   en fondu. Au chargement, c'est le panneau entier qui entre (slideInRight). */
.login-form.login-forgot br {
  display: none;
}
#kt_login_forgot_submit {
  width: 100%;
  margin-top: var(--eb-space-2) !important;
}
.login.login-1.eb-login-switched.login-forgot-on .login-forgot,
.login.login-1.eb-login-switched.login-signin-on .login-signin {
  animation: ebLoginVolet var(--eb-motion-slow) var(--eb-ease-out) both;
}

/* Refus : le contenu du panneau fait « non » une fois (4 allers-retours
   amortis, 320 ms), à la place de l'entrée glissée. Porté par l'enveloppe des
   volets, jamais masquée : changer de volet ne le rejoue pas. */
#loginBackdropRight.eb-login-refuse {
  animation: none;
}
#loginBackdropRight.eb-login-refuse > .d-flex {
  animation: ebLoginRefus 320ms var(--eb-ease-std) 120ms both;
}

@keyframes ebLoginFondu {
  from { opacity: 0; }
  to   { opacity: 1; }
}
@keyframes ebLoginVolet {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: none; }
}
@keyframes ebLoginRefus {
  0%, 100% { transform: none; }
  20% { transform: translateX(-7px); }
  45% { transform: translateX(6px); }
  70% { transform: translateX(-3px); }
  88% { transform: translateX(2px); }
}

@media (max-width: 991.98px) {
  /* Le panneau n'entrait pas du tout au téléphone (le glissement latéral y
     élargissait la page) : fondu seul, sans déplacement. */
  body#kt_body #loginBackdropRight:not(.eb-login-refuse) {
    animation: ebLoginFondu var(--eb-motion-slow) var(--eb-ease-out) both !important;
  }

  #kt_login_signin_form > .d-flex.flex-column.gap-3 {
    --eb-login-btn-h: 48px;
  }

  /* Cibles tactiles de 44 px, sans déplacer la mise en page. */
  #kt_login_forgot,
  #kt_login_forgot_cancel {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
  }
  #kt_login_forgot {
    margin-top: -12px;
    margin-bottom: -6px;
  }
  #eb_remember_wrapper label {
    min-height: 44px;
  }
  #eb_remember_wrapper {
    margin-top: calc(-1 * var(--eb-space-2));
    margin-bottom: var(--eb-space-1) !important;
  }
  #eb_remember_me {
    width: 22px;
    height: 22px;
  }
}

/* Téléphone, clavier ouvert : le navigateur amène le champ touché dans la
   partie visible ; cette marge lui fait garder « Se connecter » avec. */
@media (max-width: 991.98px) {
  #kt_login_signin_form #id {
    scroll-margin-bottom: 220px;
  }
  #kt_login_signin_form #pwd {
    scroll-margin-bottom: 130px;
  }
}

/* Téléphone couché, fenêtre basse : le logo et le sous-titre prenaient plus
   de la moitié de la hauteur ; les champs remontent. */
@media (max-width: 991.98px) and (max-height: 520px) {
  .eb-login-mobile-logo {
    margin-bottom: var(--eb-space-1);
  }
  .eb-login-mobile-logo img {
    max-height: 32px;
  }
  .login-form .eb-login-lead {
    display: none;
  }
}

/* Tablette (576 à 991 px) : le formulaire s'étirait sur toute la largeur
   (champs de 700 px, titre collé à gauche). Il reprend la carte du grand
   écran, centrée, à la largeur d'un formulaire. */
@media (min-width: 576px) and (max-width: 991.98px) {
  body#kt_body #loginBackdropRight {
    width: 100% !important;
    max-width: 460px !important;
    margin-inline: auto;
    padding: var(--eb-space-6) !important;
    background: var(--eb-surface) !important;
    border: 1px solid var(--eb-border) !important;
    border-radius: var(--eb-radius-lg) !important;
    box-shadow: var(--eb-shadow-md) !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  #loginBackdropRight,
  body#kt_body #loginBackdropRight:not(.eb-login-refuse),
  #loginBackdropRight.eb-login-refuse > .d-flex,
  .eb-login-checking,
  .login.login-1.eb-login-switched .login-forgot,
  .login.login-1.eb-login-switched .login-signin {
    animation: none !important;
  }
}