body {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--brand-dark);
    font-family: 'DM Sans', sans-serif;
    overflow: hidden;
}

/* ── Fond animé ── */
body::before {
    content: '';
    position: fixed;
    inset: -50%;
    background: radial-gradient(ellipse at 20% 50%, #1b3a5c55 0%, transparent 60%),
    radial-gradient(ellipse at 80% 20%, #e8a02022 0%, transparent 50%);
    animation: bgPulse 8s ease-in-out infinite alternate;
    pointer-events: none;
}
@keyframes bgPulse {
    from { transform: scale(1);   }
    to   { transform: scale(1.1); }
}

/* ── Carte principale ── */
.login-card {
    display: flex;
    width: 900px;
    max-width: 96vw;
    min-height: 520px;
    border-radius: 20px;
    overflow: hidden;
    box-shadow: var(--shadow);
    position: relative;
    z-index: 1;
    animation: cardIn .7s cubic-bezier(.22,1,.36,1) both;
}
@keyframes cardIn {
    from { opacity: 0; transform: translateY(32px) scale(.97); }
    to   { opacity: 1; transform: none; }
}

/* ══════════════════════════════════
   PARTIE GAUCHE — Branding
══════════════════════════════════ */
.card-brand {
    flex: 0 0 50%;
    background: linear-gradient(155deg, var(--brand-mid) 0%, var(--brand-dark) 100%);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 3rem 2rem;
    position: relative;
    overflow: hidden;
}

/* Motif décoratif */
.card-brand::before {
    content: '';
    position: absolute;
    width: 340px; height: 340px;
    border: 1px solid rgba(232,160,32,.15);
    border-radius: 50%;
    top: -80px; left: -80px;
}
.card-brand::after {
    content: '';
    position: absolute;
    width: 220px; height: 220px;
    border: 1px solid rgba(232,160,32,.1);
    border-radius: 50%;
    bottom: -60px; right: -60px;
}

.brand-logo-wrap {
    width: 110px; height: 110px;
    background: rgba(255,255,255,.06);
    border: 2px solid rgba(232,160,32,.4);
    border-radius: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 1.5rem;
    position: relative;
    z-index: 1;
    animation: logoFloat 4s ease-in-out infinite alternate;
}
@keyframes logoFloat {
    from { transform: translateY(0);   }
    to   { transform: translateY(-8px);}
}

.brand-logo-wrap i {
    font-size: 2.8rem;
    color: var(--brand-accent);
}

.brand-name {
    font-family: 'Playfair Display', serif;
    font-size: 1.75rem;
    color: #fff;
    letter-spacing: .02em;
    text-align: center;
    position: relative; z-index: 1;
}

.brand-tagline {
    font-size: .82rem;
    color: rgba(255,255,255,.45);
    letter-spacing: .12em;
    text-transform: uppercase;
    margin-top: .5rem;
    position: relative; z-index: 1;
}

.brand-divider {
    width: 40px; height: 2px;
    background: var(--brand-accent);
    margin: 1.2rem auto 0;
    border-radius: 2px;
    position: relative; z-index: 1;
}

/* ══════════════════════════════════
   PARTIE DROITE — Formulaire
══════════════════════════════════ */
.card-form {
    flex: 1;
    background: var(--brand-light);
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 3.5rem 3rem;
}

.form-title {
    font-family: 'Playfair Display', serif;
    font-size: 1.9rem;
    color: var(--brand-dark);
    margin-bottom: .35rem;
}

.form-subtitle {
    font-size: .85rem;
    color: #7a7060;
    margin-bottom: 2.2rem;
}

/* ── Input Groups ── */
.input-group {
    margin-bottom: 1.4rem;
}

.input-group-text {
    background: #fff;
    border: 1.5px solid var(--input-border);
    border-right: none;
    color: var(--brand-mid);
    font-size: 1rem;
    padding: 0 1rem;
    transition: border-color .25s;
}

.form-control {
    height: 50px;
    border: 1.5px solid var(--input-border);
    border-left: none;
    background: #fff;
    font-family: 'DM Sans', sans-serif;
    font-size: .93rem;
    color: var(--brand-dark);
    transition: border-color .25s, box-shadow .25s;
}

/* Champ mot de passe : border-right supprimé pour laisser place au bouton œil */
#passwordField {
    border-right: none;
}

.form-control:focus {
    outline: none;
    box-shadow: none;
    border-color: var(--brand-accent);
}

/* Quand le champ qui précède reçoit le focus, mettre à jour le préfixe aussi */
.input-group:focus-within .input-group-text {
    border-color: var(--brand-accent);
    color: var(--brand-accent);
}
.input-group:focus-within .form-control,
.input-group:focus-within .btn-eye {
    border-color: var(--brand-accent);
}

/* ── Bouton œil ── */
.btn-eye {
    background: #fff;
    border: 1.5px solid var(--input-border);
    border-left: none;
    color: #7a7060;
    padding: 0 1rem;
    cursor: pointer;
    transition: color .2s, border-color .25s;
    border-radius: 0 .25rem .25rem 0;
    display: flex;
    align-items: center;
}
.btn-eye:hover  { color: var(--brand-accent); }
.btn-eye:focus  { outline: none; box-shadow: none; }

/* ── Options ── */
.form-options {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 2rem;
    font-size: .83rem;
}

.form-check-label { color: #5a5248; }
.form-check-input:checked { background-color: var(--brand-accent); border-color: var(--brand-accent); }

.forgot-link {
    color: var(--brand-mid);
    text-decoration: none;
    font-weight: 500;
    transition: color .2s;
}
.forgot-link:hover { color: var(--brand-accent); }

/* ── Bouton Connexion ── */
.btn-login {
    width: 100%;
    height: 50px;
    background: var(--brand-dark);
    color: #fff;
    border: none;
    border-radius: .35rem;
    font-family: 'DM Sans', sans-serif;
    font-size: .95rem;
    font-weight: 500;
    letter-spacing: .05em;
    position: relative;
    overflow: hidden;
    transition: transform .15s, box-shadow .2s;
    cursor: pointer;
}

.btn-login::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, transparent 0%, rgba(232,160,32,.25) 50%, transparent 100%);
    transform: translateX(-100%);
    transition: transform .5s;
}
.btn-login:hover { transform: translateY(-1px); box-shadow: 0 8px 24px rgba(13,27,42,.25); }
.btn-login:hover::after { transform: translateX(100%); }
.btn-login:active { transform: translateY(0); }

/* ── Pied de formulaire ── */
.form-footer {
    text-align: center;
    margin-top: 1.6rem;
    font-size: .8rem;
    color: #9a8f80;
}

      /* ── Reset ciblé pour ne pas casser le reste du projet ── */
  :root {
      --brand-dark:   #0d1b2a;
      --brand-mid:    #1b3a5c;
      --brand-accent: #e8a020;
      --brand-light:  #f5f0e8;
      --input-border: #c8bfa8;
      --shadow:       0 20px 60px rgba(13,27,42,.22);
  }

 /* ── Page entière ── */
 html, body {
     height: 100%;
     margin: 0;
     padding: 0;
 }
 body {
     min-height: 100vh;
     display: flex;
     align-items: center;
     justify-content: center;
     font-family: 'DM Sans', sans-serif;
 }

 /* ── Fond animé (par-dessus le background image du body) ── */
 body::before {
     content: '';
     position: fixed;
     inset: 0;
     background: rgba(13,27,42,.55);
     pointer-events: none;
     z-index: 0;
 }

 /* ══════════════════════════════════
    CARTE PRINCIPALE
 ══════════════════════════════════ */
 .login-card {
     display: flex;
     width: 860px;
     max-width: 96vw;
     min-height: 500px;
     border-radius: 18px;
     overflow: hidden;
     box-shadow: var(--shadow);
     position: relative;
     z-index: 1;
     animation: cardIn .65s cubic-bezier(.22,1,.36,1) both;
 }
 @keyframes cardIn {
     from { opacity: 0; transform: translateY(28px) scale(.97); }
     to   { opacity: 1; transform: none; }
 }

 /* ── Le <form> doit se comporter comme un flex-item ── */
 .login-card > form {
     flex: 1;            /* prend tout l'espace restant après la colonne gauche */
     display: flex;
     flex-direction: column;
     margin: 0;
     padding: 0;
     min-width: 0;
 }

 /* ══════════════════════════════════
    PARTIE GAUCHE — Branding
 ══════════════════════════════════ */
 .card-brand {
     flex: 0 0 40%;
     background: linear-gradient(155deg, var(--brand-mid) 0%, var(--brand-dark) 100%);
     display: flex;
     flex-direction: column;
     align-items: center;
     justify-content: center;
     padding: 3rem 2rem;
     position: relative;
     overflow: hidden;
 }
 .card-brand::before {
     content: '';
     position: absolute;
     width: 320px; height: 320px;
     border: 1px solid rgba(232,160,32,.15);
     border-radius: 50%;
     top: -80px; left: -80px;
 }
 .card-brand::after {
     content: '';
     position: absolute;
     width: 200px; height: 200px;
     border: 1px solid rgba(232,160,32,.1);
     border-radius: 50%;
     bottom: -50px; right: -50px;
 }

 .brand-logo-wrap {
     width: 200px; height: 200px;
     background: rgba(255,255,255,.06);
     border: 2px solid transparent /*rgba(232,160,32,.4)*/;
     border-radius: 24px;
     display: flex;
     align-items: center;
     justify-content: center;
     margin-bottom: 1.4rem;
     position: relative;
     z-index: 1;
     animation: logoFloat 4s ease-in-out infinite alternate;
 }
 @keyframes logoFloat {
     from { transform: translateY(0);    }
     to   { transform: translateY(-7px); }
 }
 .brand-logo-wrap i { font-size: 2.5rem; color: var(--brand-accent); }
 .brand-logo-wrap img { width: 175px; height: 175px; object-fit: contain; }

 .brand-name {
     font-family: 'Playfair Display', serif;
     font-size: 1.6rem;
     color: #fff;
     letter-spacing: .02em;
     text-align: center;
     margin: 0;
     position: relative; z-index: 1;
 }
/* General utilities */
.display-none,
.display-hide {
    display: none;
}

 .brand-tagline {
     font-size: .8rem;
     color: rgba(255,255,255,.45);
     letter-spacing: .12em;
     text-transform: uppercase;
     margin-top: .45rem;
     margin-bottom: .45rem;
     position: relative; z-index: 1;
 }
 .brand-divider {
     width: 38px; height: 2px;
     background: var(--brand-accent);
     margin: 0rem auto 0;
     border-radius: 2px;
     position: relative; z-index: 1;
 }

 /* ══════════════════════════════════
    PARTIE DROITE — Formulaire
 ══════════════════════════════════ */
 .card-form {
     flex: 1;                    /* remplit toute la hauteur du <form> */
     background: var(--brand-light);
     display: flex;
     flex-direction: column;
     justify-content: center;
     padding: 3rem 2.8rem;
     box-sizing: border-box;
 }

 .form-title {
     font-family: 'Playfair Display', serif;
     font-size: 1.75rem;
     color: var(--brand-dark);
     margin: 0 0 .3rem 0;
 }
 .form-subtitle {
     font-size: .83rem;
     color: #7a7060;
     margin-bottom: 1.8rem;
 }

 /* ── Alertes ── */
 .card-form .alert { font-size: .85rem; margin-bottom: 1rem; }

 /* ── Input Groups ── */
 .card-form .input-group {
     margin-bottom: 1.2rem;
     flex-wrap: nowrap;          /* empêche le retour à la ligne sur mobile */
 }

 .card-form .input-group-text {
     background: #fff;
     border: 1.5px solid var(--input-border);
     border-right: none;
     color: var(--brand-mid);
     font-size: .95rem;
     padding: 0 .9rem;
     transition: border-color .25s, color .25s;
     border-radius: .3rem 0 0 .3rem;
 }

 .card-form .form-control {
     height: 48px;
     border: 1.5px solid var(--input-border);
     border-left: none;
     background: #fff;
     font-family: 'DM Sans', sans-serif;
     font-size: .9rem;
     color: var(--brand-dark);
     border-radius: 0;
     transition: border-color .25s, box-shadow .25s;
     flex: 1 1 auto;
     min-width: 0;
 }

 /* Champ mot de passe : bord droit supprimé (le bouton œil le ferme) */
 #passwordField { border-right: none; }

 .card-form .form-control:focus {
     outline: none;
     box-shadow: none;
     border-color: var(--brand-accent);
 }
 .card-form .input-group:focus-within .input-group-text {
     border-color: var(--brand-accent);
     color: var(--brand-accent);
 }
 .card-form .input-group:focus-within .form-control,
 .card-form .input-group:focus-within .btn-eye {
     border-color: var(--brand-accent);
 }

 /* ── Bouton œil ── */
 .btn-eye {
     background: #fff;
     border: 1.5px solid var(--input-border);
     border-left: none;
     color: #7a7060;
     padding: 0 .9rem;
     height: 48px;
     cursor: pointer;
     transition: color .2s, border-color .25s;
     border-radius: 0 .3rem .3rem 0;
     display: flex;
     align-items: center;
     flex-shrink: 0;
 }
 .btn-eye:hover  { color: var(--brand-accent); }
 .btn-eye:focus  { outline: none; box-shadow: none; }

 /* ── Options ── */
 .form-options {
     display: flex;
     align-items: center;
     justify-content: space-between;
     margin-bottom: 1.8rem;
     font-size: .82rem;
 }
 .form-check-label { color: #5a5248; margin-bottom: 0; }
 .forgot-link {
     color: var(--brand-mid);
     text-decoration: none;
     font-weight: 500;
     transition: color .2s;
 }
 .forgot-link:hover { color: var(--brand-accent); text-decoration: none; }

 /* ── Bouton Connexion ── */
 .btn-login {
     width: 100%;
     height: 48px;
     background: var(--brand-dark);
     color: #fff;
     border: none;
     border-radius: .35rem;
     font-family: 'DM Sans', sans-serif;
     font-size: .92rem;
     font-weight: 500;
     letter-spacing: .05em;
     position: relative;
     overflow: hidden;
     transition: transform .15s, box-shadow .2s;
     cursor: pointer;
 }
 .btn-login::after {
     content: '';
     position: absolute;
     inset: 0;
     background: linear-gradient(90deg, transparent 0%, rgba(232,160,32,.25) 50%, transparent 100%);
     transform: translateX(-100%);
     transition: transform .5s;
 }
 .btn-login:hover { transform: translateY(-1px); box-shadow: 0 8px 24px rgba(13,27,42,.25); }
 .btn-login:hover::after { transform: translateX(100%); }
 .btn-login:active { transform: translateY(0); }

 /* ── Pied ── */
 .form-footer {
     text-align: center;
     margin-top: 1.4rem;
     margin-bottom: 0;
     font-size: .78rem;
     color: #9a8f80;
 }

 /* ── Logo plateforme (partie droite) ── */
 .form-platform-logo {
     display: flex;
     justify-content: center;
     margin-bottom: 1.6rem;
 }
 .form-platform-logo img {
     max-height: 72px;
     max-width: 200px;
     object-fit: contain;
     filter: drop-shadow(0 4px 10px rgba(13,27,42,.12));
     animation: logoFadeIn .6s ease both;
 }
 /* Fallback si pas d'image : initiales dans un cercle */
 .form-platform-logo .logo-fallback {
     width: 72px; height: 72px;
     background: linear-gradient(135deg, var(--brand-mid), var(--brand-dark));
     border-radius: 18px;
     display: flex;
     align-items: center;
     justify-content: center;
     font-family: 'Playfair Display', serif;
     font-size: 1.6rem;
     color: var(--brand-accent);
     letter-spacing: .04em;
     box-shadow: 0 6px 20px rgba(13,27,42,.18);
 }
 @keyframes logoFadeIn {
     from { opacity: 0; transform: translateY(-10px); }
     to   { opacity: 1; transform: none; }
 }

 /* ── Responsive ── */
 @media (max-width: 640px) {
     .card-brand { display: none; }
     .card-form  { padding: 2.2rem 1.4rem; }
 }