/* ── Portail apprenant FÉDÉRÉ — Authentification (login/register) ──
   Identité e-learning : bleu marine → bleu (marque), touche orange (accent),
   photo hero avec statistiques flottantes plutôt qu'un simple portrait
   institutionnel — même palette que les bandeaux "fedhero" du reste du
   portail (app/Views/federation/*.php) pour une cohérence de bout en bout. */

:root {
    --fed-navy: #1b2a4a;
    --fed-blue-mid: #2c4a8a;
    --fed-blue: #3f6fd6;
    --fed-accent: #ff9f43;
}

.fed-auth-body { margin: 0; }

.fed-auth-page {
    min-height: 100vh;
    display: flex;
}

/* ── Panneau hero (gauche, grand écran) ─────────────────────────────────── */
.fed-auth-brandpanel {
    flex: 0 0 48%;
    max-width: 680px;
    position: sticky;
    top: 0;
    align-self: flex-start;
    height: 100vh;
    background-image: url('../../assets/etudiant/img/federation-auth-bg.jpg');
    background-size: cover;
    background-position: center;
    flex-direction: column;
    justify-content: space-between;
    padding: 2.25rem 2.5rem 2.75rem;
    color: #fff;
    overflow: hidden;
}
.fed-hero-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(15,23,50,.55) 0%, rgba(15,23,50,.15) 32%, rgba(15,23,50,.2) 60%, rgba(11,17,38,.92) 100%);
    pointer-events: none;
}

.fed-hero-top {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    gap: .75rem;
}
.fed-hero-pill {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    background: rgba(255,255,255,.14);
    border: 1px solid rgba(255,255,255,.22);
    backdrop-filter: blur(6px);
    padding: .4rem .85rem;
    border-radius: 999px;
    font-size: .8rem;
    font-weight: 700;
}
.fed-hero-pill i { color: var(--fed-accent); }

.fed-hero-content { position: relative; z-index: 1; margin-top: auto; }
.fed-hero-content h1 {
    font-size: 1.95rem;
    font-weight: 800;
    line-height: 1.22;
    margin-bottom: .8rem;
    text-shadow: 0 2px 12px rgba(0,0,0,.25);
}
@media (max-height: 720px) {
    .fed-hero-content h1 { font-size: 1.7rem; }
    .fed-hero-stats { margin-top: 1rem; }
}
.fed-hero-content p {
    font-size: .96rem;
    opacity: .92;
    max-width: 420px;
    line-height: 1.55;
    margin-bottom: 0;
}

.fed-hero-stats {
    position: relative;
    z-index: 1;
    display: flex;
    gap: .75rem;
    margin-top: 1.4rem;
}
.fed-hero-stat {
    flex: 1;
    background: rgba(255,255,255,.1);
    border: 1px solid rgba(255,255,255,.18);
    backdrop-filter: blur(6px);
    border-radius: 14px;
    padding: .75rem .6rem;
    text-align: center;
}
.fed-hero-stat .num {
    font-size: 1.3rem;
    font-weight: 800;
    line-height: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .15rem;
}
.fed-hero-stat .num span { color: var(--fed-accent); font-size: 1rem; }
.fed-hero-stat .num i { color: var(--fed-accent); font-size: .95rem; }
.fed-hero-stat .lbl { font-size: .68rem; opacity: .82; margin-top: .2rem; line-height: 1.3; }

/* ── Badges "224" (logo) ──────────────────────────────────────────────── */
.fed-auth-logo-224 {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 12px;
    background: linear-gradient(135deg, var(--fed-navy), var(--fed-blue));
    color: #fff;
    font-weight: 800;
    font-size: .85rem;
    letter-spacing: -.5px;
    flex-shrink: 0;
    box-shadow: 0 .4rem 1rem rgba(0,0,0,.2);
}
.fed-auth-logo-224-sm { width: 46px; height: 46px; border-radius: 14px; font-size: 1.1rem; }

/* Badge "224" réutilisé dans le layout applicatif (sidebar/topbar,
   layouts/federation.php) — se glisse dans les classes de taille déjà
   définies par etu-org-logo/main-header-logo etu-org-logo. */
.fed-logo-224-badge {
    display: flex !important;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, var(--fed-navy), var(--fed-blue)) !important;
    color: #fff;
    font-weight: 800;
    letter-spacing: -.5px;
}

.fed-auth-mobile-brand-label { font-weight: 700; color: var(--fed-navy); }

/* ── Panneau formulaire (droite) ─────────────────────────────────────────── */
.fed-auth-formpanel {
    flex: 1 1 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #fbfcfe;
    padding: 1.75rem 1.5rem;
    max-height: 100vh;
    overflow-y: auto;
}
.fed-auth-formpanel-inner {
    width: 100%;
    max-width: 400px;
    margin: auto 0;
    animation: fed-fade-in .5s ease both;
}
@keyframes fed-fade-in { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }

.fed-form-brand { display: flex; align-items: center; gap: .65rem; margin-bottom: 1.25rem; }
.fed-form-brand .fed-auth-orgname { font-weight: 800; font-size: 1rem; color: var(--fed-navy); line-height: 1.15; }
.fed-form-brand .fed-auth-orgtag { font-size: .72rem; color: #9497a8; margin-top: .1rem; }
.fed-form-brand .fed-auth-logo-224-sm { width: 36px; height: 36px; border-radius: 11px; font-size: .85rem; }

/* Carte — sans cadre/ombre : le formulaire flotte directement sur le fond,
   dans un esprit produit épuré (pas de "boîte" institutionnelle). */
.fed-auth-card { background: transparent; }
.fed-auth-card-body { padding: 0; }

.fed-trust-row {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem 1rem;
    justify-content: center;
    margin-top: 1.5rem;
    padding-top: 1rem;
    border-top: 1px solid #eef0f7;
}
.fed-trust-row span {
    font-size: .72rem;
    font-weight: 600;
    color: #9497a8;
    display: flex;
    align-items: center;
    gap: .35rem;
}
.fed-trust-row i { color: var(--fed-blue-mid); font-size: .78rem; }

.fed-auth-copyright { text-align: center; font-size: .74rem; color: #b3b5c4; margin-top: 1.25rem; }

/* ── En-tête de carte ──────────────────────────────────────────────────── */
.fed-auth-card h4 { color: var(--fed-navy); font-size: 1.4rem; letter-spacing: -.2px; }
.fed-auth-card .alert-danger {
    background: #fef2f2;
    color: #991b1b;
    border: none;
    border-left: 3px solid #dc2626;
    border-radius: 8px;
    font-size: .85rem;
}

/* ── Champs de formulaire — style épuré à soulignement ──────────────────── */
.fed-auth-card .form-label {
    font-weight: 600;
    font-size: .78rem;
    text-transform: uppercase;
    letter-spacing: .4px;
    color: #8890a4;
    margin-bottom: .25rem;
}
.fed-auth-card .form-label .fw-normal { text-transform: none; letter-spacing: 0; }
.fed-auth-card .input-group {
    border-bottom: 1.5px solid #e2e4ee;
    transition: border-color .2s ease;
}
.fed-auth-card .input-group:focus-within {
    border-bottom-color: var(--fed-blue);
    box-shadow: none;
}
.fed-auth-card .input-group-text {
    background: transparent;
    border: none;
    color: #b3b5c4;
    padding-left: 0;
    padding-right: .6rem;
    transition: color .2s ease;
}
.fed-auth-card .input-group:focus-within .input-group-text { color: var(--fed-blue-mid); background: transparent; }
.fed-auth-card .form-control {
    background: transparent;
    border: none;
    box-shadow: none !important;
    padding: .55rem 0;
    font-size: .95rem;
    color: #2c3348;
}
.fed-auth-card .form-control::placeholder { color: #c2c6d4; }
.fed-auth-card .toggle-pw,
.fed-auth-card .input-group .btn.bg-white { background: transparent !important; border: none; color: #b3b5c4; }

.fed-auth-card .btn-primary {
    background: linear-gradient(135deg, var(--fed-navy), var(--fed-blue));
    border: none;
    font-weight: 700;
    padding: .75rem 1rem;
    border-radius: 999px;
    transition: transform .15s ease, box-shadow .15s ease;
    box-shadow: 0 .6rem 1.5rem rgba(44,74,138,.3);
}
.fed-auth-card .btn-primary:hover,
.fed-auth-card .btn-primary:focus {
    transform: translateY(-1px);
    box-shadow: 0 .85rem 1.75rem rgba(44,74,138,.36);
}
.fed-auth-card .btn-primary:disabled { transform: none; opacity: .75; }

.fed-auth-card .btn-outline-primary {
    border-color: var(--fed-blue-mid);
    color: var(--fed-blue-mid);
    font-weight: 600;
    border-radius: 999px;
}
.fed-auth-card .btn-outline-primary:hover {
    background: var(--fed-blue-mid);
    border-color: var(--fed-blue-mid);
    color: #fff;
}

.fed-auth-card a { color: var(--fed-blue-mid); font-weight: 600; }

.fed-btn-google {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .6rem;
    background: #fff;
    border: 1.5px solid #e2e4ee;
    color: #3c4257;
    font-weight: 600;
    border-radius: 999px;
    padding: .65rem 1rem;
    transition: border-color .2s ease, box-shadow .2s ease;
}
.fed-btn-google:hover {
    border-color: #c9cce0;
    box-shadow: 0 .3rem .9rem rgba(20,30,60,.08);
    color: #3c4257;
}

.fed-auth-divider {
    display: flex;
    align-items: center;
    gap: .75rem;
    color: #b3b5c4;
    font-size: .78rem;
    margin: 1.25rem 0 1rem;
}
.fed-auth-divider::before,
.fed-auth-divider::after { content: ''; flex: 1; height: 1px; background: #e9eaf4; }

@media (max-width: 991.98px) {
    .fed-auth-formpanel { min-height: 100vh; padding: 2.5rem 1.25rem; }
}