/* Reset absolu pour éliminer tout espace */
 html {
     margin: 0 !important;
     padding: 0 !important;
     overflow-x: hidden;
 }

 :root {
     --navy: #0d2d5e;
     --navy-dark: #081e42;
     --navy-mid: #1a3f7a;
     --gold-deep: #8C7326;
     --gold-mid: #9D8846;
     --gold: #BE881A;
     --gold-light: #BFA863;
     --gold-pale: #d4b97a;
     --gold-bg: rgba(190, 136, 26, 0.10);
     --navy-bg: rgba(13, 45, 94, 0.07);
     --teal: #14b8a6;
     --teal-deep: #0d9488;
 }

 * {
     box-sizing: border-box;
     margin: 0;
     padding: 0;
 }

 html,
 body {
     margin: 0 !important;
     padding: 0 !important;
 }

 body {
     min-height: 100vh;
     display: flex;
     flex-direction: column;
     font-family: 'Segoe UI', system-ui, sans-serif;
     background: #eef1f8;
     margin: 0 !important;
     padding: 0 !important;
 }

 /* ── Bande institutionnelle ── */
 .top-band {
     position: fixed;
     top: 0;
     left: 0;
     right: 0;
     height: 6px;
     background: linear-gradient(90deg,
             var(--navy-dark) 0%,
             var(--navy-mid) 40%,
             var(--gold-deep) 55%,
             var(--gold) 72%,
             var(--gold-light)100%);
     width: 100%;
     margin: 0;
     padding: 0;
     z-index: 9999;
 }

 /* ── Fond page animé ── */
 .page-wrapper {
     flex: 1;
     display: flex;
     align-items: center;
     justify-content: center;
     padding: 2rem 1rem;
     position: relative;
     overflow: hidden;
     background:
         radial-gradient(ellipse at 10% 15%, rgba(13, 45, 94, 0.12) 0%, transparent 50%),
         radial-gradient(ellipse at 90% 85%, rgba(190, 136, 26, 0.12) 0%, transparent 50%),
         #eef1f8;
 }

 .page-wrapper::before {
     content: '';
     position: fixed;
     inset: 0;
     background-image:
         radial-gradient(circle, rgba(13, 45, 94, 0.05) 1px, transparent 1px);
     background-size: 28px 28px;
     z-index: 0;
     pointer-events: none;
 }

 /* Orbes animées */
 .bg-orb {
     position: fixed;
     border-radius: 50%;
     filter: blur(90px);
     pointer-events: none;
     z-index: 0;
 }

 .orb-navy {
     width: 380px;
     height: 380px;
     background: rgba(13, 45, 94, 0.12);
     top: -100px;
     left: -100px;
     animation: orbFloat 16s ease-in-out infinite;
 }

 .orb-gold {
     width: 280px;
     height: 280px;
     background: rgba(190, 136, 26, 0.10);
     bottom: -60px;
     right: -60px;
     animation: orbFloat 12s ease-in-out infinite reverse;
 }

 .orb-teal {
     width: 200px;
     height: 200px;
     background: rgba(20, 184, 166, 0.08);
     top: 50%;
     right: -40px;
     animation: orbFloat 14s ease-in-out infinite 2s;
 }

 @keyframes orbFloat {

     0%,
     100% {
         transform: translate(0, 0) scale(1);
     }

     50% {
         transform: translate(18px, 14px) scale(1.04);
     }
 }

 /* ── Carte ── */
 .login-card {
     width: 100%;
     max-width: 460px;
     background: #fff;
     border-radius: 18px;
     box-shadow:
         0 0 0 1px rgba(13, 45, 94, 0.07),
         0 20px 60px rgba(13, 45, 94, 0.18),
         0 4px 16px rgba(13, 45, 94, 0.08);
     overflow: hidden;
     position: relative;
     z-index: 1;
     animation: cardEnter 0.55s cubic-bezier(0.22, 1, 0.36, 1) both;
     margin-top: -3px;
 }

 @keyframes cardEnter {
     from {
         opacity: 0;
         transform: translateY(22px) scale(0.98);
     }

     to {
         opacity: 1;
         transform: translateY(0) scale(1);
     }
 }

 /* ── Barre de progression ── */
 .progress-bar-top {
     height: 3px;
     width: 0%;
     background: linear-gradient(90deg, var(--gold-deep), var(--gold), var(--gold-light));
     transition: width 0.4s ease;
     position: absolute;
     top: 0;
     left: 0;
     z-index: 10;
 }

 /* ── Header carte ── */
 .card-header-custom {
     background:
         linear-gradient(175deg,
             var(--navy-dark) 0%,
             var(--navy-mid) 65%,
             #1e4d8c 100%);
     padding: 2rem 2rem 1.75rem;
     text-align: center;
     position: relative;
     overflow: hidden;
 }

 .card-header-custom::before {
     content: '';
     position: absolute;
     top: -40px;
     right: -40px;
     width: 140px;
     height: 140px;
     border-radius: 50%;
     border: 24px solid rgba(190, 136, 26, 0.07);
     pointer-events: none;
 }

 .card-header-custom::after {
     content: '';
     position: absolute;
     bottom: -30px;
     left: -30px;
     width: 100px;
     height: 100px;
     border-radius: 50%;
     border: 16px solid rgba(255, 255, 255, 0.04);
     pointer-events: none;
 }

 .gold-separator {
     position: absolute;
     bottom: 0;
     left: 0;
     right: 0;
     height: 4px;
     background: linear-gradient(90deg,
             transparent 0%,
             var(--gold-deep) 8%,
             var(--gold) 35%,
             var(--gold-light) 62%,
             var(--gold-pale) 80%,
             transparent 100%);
 }

 .gabac-logo {
     width: 108px;
     height: 108px;
     display: flex;
     align-items: center;
     justify-content: center;
     margin: 0 auto 0.75rem;
     position: relative;
     z-index: 1;
     animation: logoPulse 4s ease-in-out infinite;
 }

 @keyframes logoPulse {

     0%,
     100% {
         filter: drop-shadow(0 4px 16px rgba(8, 30, 66, 0.45));
     }

     50% {
         filter: drop-shadow(0 6px 22px rgba(8, 30, 66, 0.6));
     }
 }

 .gabac-logo img {
     width: 100%;
     height: 100%;
     object-fit: contain;
     border-radius: 0;
 }

 .card-header-custom h1 {
     color: #fff;
     font-size: 1.45rem;
     font-weight: 800;
     letter-spacing: 4px;
     margin-bottom: 0.2rem;
     text-shadow: 0 2px 10px rgba(0, 0, 0, 0.35);
     position: relative;
     z-index: 1;
 }

 .header-gold-line {
     display: flex;
     align-items: center;
     justify-content: center;
     gap: 0.5rem;
     margin: 0.3rem 0 0.4rem;
     position: relative;
     z-index: 1;
 }

 .header-gold-line span {
     height: 1.5px;
     width: 28px;
     background: linear-gradient(90deg, transparent, var(--gold-light));
 }

 .header-gold-line span:last-child {
     background: linear-gradient(90deg, var(--gold-light), transparent);
 }

 .header-gold-line small {
     color: var(--gold-light);
     font-size: 0.6rem;
     letter-spacing: 2px;
     text-transform: uppercase;
     font-weight: 700;
 }

 .header-slogan {
     color: rgba(191, 168, 99, 0.85);
     font-size: 0.68rem;
     letter-spacing: 0.5px;
     font-weight: 500;
     line-height: 1.6;
     max-width: 320px;
     margin: 0 auto 0.5rem;
     position: relative;
     z-index: 1;
 }

 /* Badge sécurité */
 .security-badge {
     display: inline-flex;
     align-items: center;
     gap: 0.35rem;
     background: rgba(255, 255, 255, 0.07);
     border: 1px solid rgba(190, 136, 26, 0.25);
     border-radius: 20px;
     padding: 0.22rem 0.75rem;
     font-size: 0.6rem;
     font-weight: 600;
     color: rgba(191, 168, 99, 0.8);
     letter-spacing: 0.5px;
     position: relative;
     z-index: 1;
     margin-top: 0.4rem;
 }

 .security-badge .dot-secure {
     width: 5px;
     height: 5px;
     background: #4ade80;
     border-radius: 50%;
     animation: blinkDot 2s ease-in-out infinite;
 }

 @keyframes blinkDot {

     0%,
     100% {
         opacity: 1;
     }

     50% {
         opacity: 0.3;
     }
 }

 /* ── Corps ── */
 .card-body-custom {
     padding: 1.85rem 2rem;
 }

 .section-title {
     font-size: 1rem;
     font-weight: 700;
     color: var(--navy);
     margin-bottom: 0.2rem;
     display: flex;
     align-items: center;
     gap: 0.45rem;
 }

 .section-title i {
     color: var(--gold);
     font-size: 0.85rem;
 }

 .section-line {
     height: 3px;
     width: 38px;
     background: linear-gradient(90deg, var(--gold), var(--gold-light));
     border-radius: 2px;
     margin-bottom: 1.4rem;
 }

 /* ── Champs ── */
 .form-label {
     font-size: 0.79rem;
     font-weight: 600;
     color: #374151;
     margin-bottom: 0.35rem;
 }

 .input-wrap {
     position: relative;
 }

 .form-control-gabac {
     border: 1.5px solid #e2e8f0;
     border-radius: 10px;
     padding: 0.68rem 0.9rem 0.68rem 2.6rem;
     font-size: 0.875rem;
     width: 100%;
     outline: none;
     transition: border-color 0.22s, box-shadow 0.22s, background 0.22s;
     background: #f8fafc;
     color: #1e293b;
 }

 .form-control-gabac::placeholder {
     color: #c4cdd9;
 }

 .form-control-gabac:focus {
     border-color: var(--navy);
     box-shadow: 0 0 0 3px rgba(13, 45, 94, 0.09);
     background: #fff;
 }

 .form-control-gabac.is-invalid {
     border-color: #ef4444;
     background: #fff5f5;
 }

 .form-control-gabac.is-invalid:focus {
     box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.1);
 }

 .input-wrap .icon {
     position: absolute;
     left: 0.85rem;
     top: 50%;
     transform: translateY(-50%);
     color: var(--navy);
     font-size: 0.92rem;
     opacity: 0.5;
     transition: opacity 0.2s;
     pointer-events: none;
 }

 .input-wrap:focus-within .icon {
     opacity: 0.9;
 }

 .input-wrap .toggle-pass {
     position: absolute;
     right: 0.85rem;
     top: 50%;
     transform: translateY(-50%);
     background: none;
     border: none;
     padding: 0.15rem;
     color: #94a3b8;
     font-size: 0.9rem;
     cursor: pointer;
     transition: color 0.2s;
     border-radius: 4px;
     line-height: 1;
 }

 .input-wrap .toggle-pass:hover {
     color: var(--navy);
 }

 .field-error {
     font-size: 0.73rem;
     color: #ef4444;
     margin-top: 0.28rem;
     display: none;
     align-items: center;
     gap: 0.25rem;
 }

 /* ── Force mot de passe ── */
 .strength-bar {
     height: 4px;
     border-radius: 2px;
     background: #e2e8f0;
     margin-top: 0.45rem;
     overflow: hidden;
     display: none;
 }

 .strength-fill {
     height: 100%;
     border-radius: 2px;
     transition: width 0.35s ease, background 0.35s ease;
     width: 0%;
 }

 .strength-txt {
     font-size: 0.69rem;
     margin-top: 0.22rem;
     display: none;
     font-weight: 600;
 }

 /* ── Alerte erreur ── */
 .alert-gabac {
     background: rgba(239, 68, 68, 0.07);
     border: 1px solid rgba(239, 68, 68, 0.22);
     border-radius: 10px;
     padding: 0.72rem 1rem;
     font-size: 0.81rem;
     color: #b91c1c;
     align-items: center;
     gap: 0.5rem;
     display: none;
     animation: fadeSlideIn 0.25s ease;
 }

 .alert-gabac.alert-success-gabac {
     background: rgba(34, 197, 94, 0.07);
     border-color: rgba(34, 197, 94, 0.22);
     color: #166534;
 }

 @keyframes fadeSlideIn {
     from {
         opacity: 0;
         transform: translateY(-5px);
     }

     to {
         opacity: 1;
         transform: translateY(0);
     }
 }

 @keyframes shake {

     0%,
     100% {
         transform: translateX(0);
     }

     20% {
         transform: translateX(-6px);
     }

     40% {
         transform: translateX(6px);
     }

     60% {
         transform: translateX(-4px);
     }

     80% {
         transform: translateX(4px);
     }
 }

 .shake {
     animation: shake 0.38s ease;
 }

 /* ── Bouton connexion ── */
 .btn-login {
     width: 100%;
     padding: 0.82rem;
     background: linear-gradient(135deg,
             var(--navy-dark) 0%,
             var(--navy-mid) 50%,
             #1e4d8c 100%);
     color: #fff;
     border: none;
     border-radius: 10px;
     font-size: 0.9rem;
     font-weight: 700;
     letter-spacing: 0.4px;
     cursor: pointer;
     transition: box-shadow 0.25s, transform 0.2s;
     display: flex;
     align-items: center;
     justify-content: center;
     gap: 0.5rem;
     position: relative;
     overflow: hidden;
 }

 .btn-login::before {
     content: '';
     position: absolute;
     inset: 0;
     background: linear-gradient(135deg,
             var(--gold-deep) 0%,
             var(--gold) 50%,
             var(--gold-light) 100%);
     opacity: 0;
     transition: opacity 0.3s;
 }

 .btn-login::after {
     content: '';
     position: absolute;
     top: 0;
     left: -100%;
     width: 60%;
     height: 100%;
     background: linear-gradient(90deg,
             transparent, rgba(255, 255, 255, 0.12), transparent);
     transform: skewX(-20deg);
     transition: left 0.5s ease;
 }

 .btn-login:hover::before {
     opacity: 1;
 }

 .btn-login:hover::after {
     left: 160%;
 }

 .btn-login:hover:not(:disabled) {
     box-shadow: 0 8px 28px rgba(140, 115, 38, 0.42);
     transform: translateY(-1px);
 }

 .btn-login span,
 .btn-login i,
 .btn-login .spinner-btn {
     position: relative;
     z-index: 1;
 }

 .btn-login:active:not(:disabled) {
     transform: translateY(0);
     box-shadow: none;
 }

 .btn-login:disabled {
     opacity: 0.72;
     cursor: not-allowed;
 }

 .spinner-btn {
     display: none;
     width: 17px;
     height: 17px;
     border: 2px solid rgba(255, 255, 255, 0.35);
     border-top-color: #fff;
     border-radius: 50%;
     animation: spin 0.7s linear infinite;
 }

 @keyframes spin {
     to {
         transform: rotate(360deg);
     }
 }

 /* ── Liens ── */
 .link-navy {
     color: var(--navy);
     font-weight: 600;
     text-decoration: none;
 }

 .link-navy:hover {
     color: var(--gold);
 }

 .link-gold {
     color: var(--gold);
     font-weight: 600;
     text-decoration: none;
 }

 .link-gold:hover {
     color: var(--gold-deep);
     text-decoration: underline;
 }

 /* ── Footer carte ── */
 .card-footer-custom {
     background: linear-gradient(135deg, #f0f4fb, #f7f5ee);
     border-top: 3px solid transparent;
     border-image: linear-gradient(90deg,
             transparent, var(--gold-deep), var(--gold), var(--gold-light), transparent) 1;
     padding: 1.1rem 1.5rem 1.3rem;
     text-align: center;
     font-size: 0.77rem;
     color: #94a3b8;
 }

 /* ── Domaines AT ── */
 .at-domains {
     display: flex;
     justify-content: center;
     gap: 0.75rem;
     margin-top: 0.75rem;
     flex-wrap: wrap;
 }

 .at-domain {
     display: flex;
     flex-direction: column;
     align-items: center;
     gap: 0.25rem;
     transition: transform 0.2s;
 }

 .at-domain:hover {
     transform: translateY(-2px);
 }

 .at-domain-icon {
     width: 36px;
     height: 36px;
     border-radius: 10px;
     display: flex;
     align-items: center;
     justify-content: center;
     font-size: 0.9rem;
     transition: box-shadow 0.2s;
 }

 .at-domain:hover .at-domain-icon {
     box-shadow: 0 3px 10px rgba(0, 0, 0, 0.1);
 }

 .at-domain small {
     font-size: 0.57rem;
     color: #94a3b8;
     font-weight: 600;
     max-width: 55px;
     text-align: center;
     line-height: 1.2;
 }

 /* ── Sélecteur de rôle ── */
 .role-selector {
     display: flex;
     gap: 0.5rem;
     margin-bottom: 1.2rem;
 }

 .role-btn {
     flex: 1;
     padding: 0.55rem 0.5rem;
     border: 1.5px solid #e2e8f0;
     border-radius: 10px;
     background: #f8fafc;
     display: flex;
     flex-direction: column;
     align-items: center;
     gap: 0.25rem;
     cursor: pointer;
     transition: all 0.22s;
     text-align: center;
 }

 .role-btn:hover {
     border-color: var(--gold-light);
     background: var(--gold-bg);
 }

 .role-btn.active {
     border-color: var(--navy);
     background: var(--navy-bg);
     box-shadow: 0 0 0 2px rgba(13, 45, 94, 0.08);
 }

 .role-btn i {
     font-size: 1rem;
     color: #94a3b8;
     transition: color 0.2s;
 }

 .role-btn.active i {
     color: var(--navy);
 }

 .role-btn:hover i {
     color: var(--gold);
 }

 .role-btn span {
     font-size: 0.68rem;
     font-weight: 600;
     color: #64748b;
     transition: color 0.2s;
 }

 .role-btn.active span {
     color: var(--navy);
     font-weight: 700;
 }

 /* ── Footer page ── */
 .page-footer {
     text-align: center;
     padding: 1.25rem;
     font-size: 0.71rem;
     color: #94a3b8;
     position: relative;
     z-index: 1;
 }

 .page-footer a {
     color: #94a3b8;
     text-decoration: none;
 }

 .page-footer a:hover {
     color: var(--gold);
 }