/* =========================================================
   KELISEGROUP — AUTH.CSS
   Pages : login / inscription / reset_request / reset_password
   Style unifié, navbar blanche, accent rouge + bleu
   ========================================================= */

/* =========================
   Variables globales
========================= */
:root{
  --kg-red:#d91515;
  --kg-red-dark:#b80f0f;
  --kg-red-soft:rgba(217,21,21,.08);

  --kg-blue:#0b2c5f;
  --kg-blue-2:#143c7b;
  --kg-blue-3:#1d4f99;
  --kg-blue-soft:rgba(11,44,95,.08);

  --kg-bg:#eef3fb;
  --kg-card:#ffffff;
  --kg-soft:#f8fbff;
  --kg-line:#dbe4f0;
  --kg-line-2:#e5e7eb;
  --kg-text:#0f172a;
  --kg-muted:#64748b;

  --kg-shadow:0 18px 40px rgba(15,23,42,.10);
  --kg-shadow-strong:0 22px 50px rgba(11,44,95,.16);
  --kg-shadow-soft:0 8px 20px rgba(15,23,42,.05);

  --kg-radius:22px;
  --kg-radius-sm:16px;
  --kg-max:1120px;
}

/* =========================
   Reset minimal
========================= */
*{box-sizing:border-box}

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

body{
  font-family:"Inter",system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
  color:var(--kg-text);
  background:
    radial-gradient(circle at top left, rgba(20,60,123,.08), transparent 28%),
    radial-gradient(circle at top right, rgba(217,21,21,.06), transparent 22%),
    var(--kg-bg);
}

a{
  text-decoration:none;
  color:inherit;
}

img{
  max-width:100%;
  display:block;
}

button,
input,
select,
textarea{
  font:inherit;
}

/* =========================
   Gestion langues
========================= */
body[data-lang="en"] .lang-fr{display:none}
body[data-lang="fr"] .lang-en{display:none}

/* =========================
   Topbar blanche
========================= */
.topbar{
  position:sticky;
  top:0;
  z-index:50;
  background:#ffffff !important;
  color:var(--kg-blue) !important;
  box-shadow:0 4px 18px rgba(15,23,42,.06) !important;
  border-bottom:1px solid var(--kg-line-2) !important;
}

.topbar .inner{
  max-width:1400px;
  margin:0 auto;
  padding:12px 22px;
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:18px;
}

.brand{
  display:flex;
  align-items:center;
  gap:12px;
  font-weight:900;
}

.brand .dot{
  width:42px;
  height:42px;
  border-radius:14px;
  background:linear-gradient(135deg, var(--kg-red), var(--kg-blue));
  display:grid;
  place-items:center;
  color:#fff;
  font-size:18px;
  box-shadow:0 10px 22px rgba(20,60,123,.18);
}

.brand small{
  display:block;
  font-size:11px;
  color:var(--kg-muted);
  opacity:1;
}

.nav{
  display:flex;
  gap:6px;
  align-items:center;
}

.nav a{
  padding:8px 12px;
  font-size:12px;
  font-weight:800;
  border-radius:10px;
  color:var(--kg-blue) !important;
  transition:.2s ease;
}

.nav a:hover{
  background:#f1f5f9 !important;
  color:var(--kg-blue-2) !important;
}

.nav .pill{
  background:#fff !important;
  color:var(--kg-blue) !important;
  border:1px solid var(--kg-blue) !important;
}

.nav .pill:hover{
  background:var(--kg-blue) !important;
  color:#fff !important;
}

.lang-switch{
  display:flex;
  gap:6px;
}

.lang-switch button{
  background:#fff !important;
  color:var(--kg-blue) !important;
  border:1px solid var(--kg-blue) !important;
  padding:6px 10px;
  border-radius:999px;
  font-size:11px;
  font-weight:800;
  cursor:pointer;
  transition:.2s ease;
}

.lang-switch button:hover{
  background:#f8fbff !important;
}

.lang-switch button.active{
  background:var(--kg-blue) !important;
  color:#fff !important;
}

.menu-toggle{
  display:none;
  background:transparent;
  border:0;
  color:var(--kg-blue) !important;
  font-size:20px;
  padding:6px;
  border-radius:10px;
  cursor:pointer;
}

.menu-toggle:hover{
  background:#f1f5f9 !important;
}

.mobile-nav{
  display:none;
  background:#ffffff !important;
  border-top:1px solid var(--kg-line-2) !important;
  padding:12px 18px;
}

.mobile-nav a{
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding:12px 10px;
  border-radius:12px;
  font-size:14px;
  font-weight:800;
  color:var(--kg-blue) !important;
}

.mobile-nav a:hover{
  background:#f1f5f9 !important;
}

.mobile-nav.open{
  display:block;
}

/* =========================
   Hero commun
========================= */
.hero{
  position:relative;
  padding:86px 24px 110px;
  color:#fff;
  background:
    linear-gradient(100deg, rgba(11,44,95,.90), rgba(20,60,123,.72), rgba(217,21,21,.28)),
    url("/static/img/hero-kelise.png") center / cover no-repeat;
}

.hero .max{
  max-width:var(--kg-max);
  margin:0 auto;
}

.hero h1{
  margin:0 0 12px;
  font-size:clamp(2rem, 5vw, 3.4rem);
  line-height:1.05;
  font-weight:1000;
  letter-spacing:-.02em;
}

.hero p{
  margin:0;
  max-width:620px;
  font-size:15px;
  line-height:1.7;
  color:rgba(255,255,255,.92);
}

/* Helpers si tu veux des heros différents selon la page */
.hero.hero-logistique{
  background:
    linear-gradient(100deg, rgba(11,44,95,.90), rgba(20,60,123,.72), rgba(217,21,21,.28)),
    url("/static/img/service-logistique.jpg") center / cover no-repeat;
}

.hero.hero-aerien{
  background:
    linear-gradient(100deg, rgba(11,44,95,.90), rgba(20,60,123,.72), rgba(217,21,21,.28)),
    url("/static/img/service-aerien.jpg") center / cover no-repeat;
}

.hero.hero-maritime{
  background:
    linear-gradient(100deg, rgba(11,44,95,.90), rgba(20,60,123,.72), rgba(217,21,21,.28)),
    url("/static/img/service-maritime.jpg") center / cover no-repeat;
}

/* =========================
   Section commune
========================= */
.section{
  position:relative;
  margin-top:-58px;
  padding:0 20px 40px;
}

.section .max{
  max-width:var(--kg-max);
  margin:0 auto;
}

/* =========================
   Cartes
========================= */
.card{
  background:rgba(255,255,255,.96);
  border:1px solid rgba(219,228,240,.9);
  border-radius:28px;
  padding:30px;
  box-shadow:var(--kg-shadow-strong);
  backdrop-filter:blur(10px);
  position:relative;
}

.card::before{
  content:"";
  display:block;
  width:72px;
  height:5px;
  border-radius:999px;
  background:linear-gradient(90deg, var(--kg-red), var(--kg-blue));
  margin-bottom:18px;
}

.card h2,
.card h3{
  margin:0 0 12px;
  color:var(--kg-blue);
  font-weight:1000;
}

.card p{
  color:var(--kg-muted);
}

/* =========================
   Grilles formulaires
========================= */
.form-grid{
  display:grid;
  gap:16px;
  grid-template-columns:repeat(2,minmax(0,1fr));
}

.field{
  display:flex;
  flex-direction:column;
  gap:8px;
  font-size:12px;
  font-weight:800;
  color:var(--kg-muted);
}

.field input,
.field select,
.field textarea{
  width:100%;
  min-height:52px;
  border:1px solid var(--kg-line);
  border-radius:16px;
  padding:14px 16px;
  font-size:14px;
  color:var(--kg-text);
  background:#fff;
  outline:none;
  transition:.2s ease;
  box-shadow:0 1px 2px rgba(15,23,42,.03);
}

.field textarea{
  min-height:120px;
  resize:vertical;
}

.field input::placeholder,
.field textarea::placeholder{
  color:#94a3b8;
}

.field input:focus,
.field select:focus,
.field textarea:focus{
  border-color:rgba(20,60,123,.45);
  box-shadow:0 0 0 4px rgba(20,60,123,.08);
}

/* =========================
   Boutons
========================= */
.btn{
  border:0;
  border-radius:16px;
  min-height:50px;
  padding:12px 18px;
  font-size:14px;
  font-weight:900;
  cursor:pointer;
  transition:.2s ease;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  text-decoration:none;
}

/* Bouton principal */
.orange{
  color:#fff;
  background:linear-gradient(135deg, var(--kg-blue), var(--kg-blue-2));
  box-shadow:0 14px 30px rgba(20,60,123,.22);
}

.orange:hover{
  transform:translateY(-1px);
  background:linear-gradient(135deg, var(--kg-blue-2), var(--kg-blue-3));
  box-shadow:0 18px 34px rgba(20,60,123,.26);
}

/* Bouton secondaire */
.blue{
  background:#ffffff;
  color:var(--kg-blue);
  border:1px solid var(--kg-blue);
  box-shadow:var(--kg-shadow-soft);
}

.blue:hover{
  background:var(--kg-blue);
  color:#ffffff;
}

/* Variante rouge si besoin */
.btn-danger{
  color:#fff;
  background:linear-gradient(135deg, var(--kg-red), var(--kg-red-dark));
  box-shadow:0 14px 28px rgba(217,21,21,.20);
}

.btn-danger:hover{
  transform:translateY(-1px);
}

/* =========================
   Auth container ancien format
========================= */
.auth-container{
  max-width:520px;
  margin:60px auto;
  padding:28px;
  background:rgba(255,255,255,.96);
  border:1px solid rgba(219,228,240,.9);
  border-radius:24px;
  box-shadow:var(--kg-shadow);
  backdrop-filter:blur(10px);
}

.auth-container h2{
  margin:0 0 20px;
  text-align:center;
  color:var(--kg-blue);
  font-weight:1000;
}

.auth-container input,
.auth-container select,
.auth-container textarea{
  width:100%;
  padding:14px 16px;
  font-size:15px;
  border-radius:14px;
  border:1px solid var(--kg-line);
  background:#fff;
  color:var(--kg-text);
  outline:none;
  transition:.2s ease;
}

.auth-container input:focus,
.auth-container select:focus,
.auth-container textarea:focus{
  border-color:rgba(20,60,123,.45);
  box-shadow:0 0 0 4px rgba(20,60,123,.08);
}

.auth-container button{
  width:100%;
  padding:14px;
  font-size:15px;
  border-radius:14px;
  border:none;
  cursor:pointer;
}

/* =========================
   Liens utiles dans les cartes
========================= */
.card a,
.auth-container a{
  color:var(--kg-blue);
  font-weight:900;
}

.card a:hover,
.auth-container a:hover{
  color:var(--kg-red);
}

/* =========================
   Petites alertes / badges
========================= */
.badge,
.auth-badge{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:8px 14px;
  border-radius:999px;
  font-size:12px;
  font-weight:900;
  color:var(--kg-red);
  background:var(--kg-red-soft);
  border:1px solid rgba(217,21,21,.14);
}

.note,
.help-text,
.muted{
  color:var(--kg-muted);
  font-size:13px;
  line-height:1.55;
}

/* =========================
   Footer
========================= */
.footer{
  background:linear-gradient(180deg, var(--kg-blue), var(--kg-blue-2));
  color:#dbeafe;
  padding:30px 20px;
  font-size:12px;
}

.footer .inner{
  max-width:var(--kg-max);
  margin:0 auto;
  display:grid;
  gap:16px;
  grid-template-columns:repeat(3,minmax(0,1fr));
}

.footer h4{
  margin:0 0 8px;
  font-size:12px;
  text-transform:uppercase;
  letter-spacing:.4px;
  color:#fff;
}

.footer a:hover{
  color:#fff;
}

/* =========================
   Utilitaires
========================= */
.max{
  max-width:var(--kg-max);
  margin:0 auto;
}

.text-center{text-align:center}
.mt-0{margin-top:0}
.mb-0{margin-bottom:0}
.w-100{width:100%}

/* =========================
   Responsive
========================= */
@media(max-width:980px){
  .hero{
    padding:72px 22px 90px;
  }

  .form-grid{
    grid-template-columns:1fr;
  }
}
@media(max-width:640px){
  .nav{display:none}
  .menu-toggle{display:block}
}

  .topbar .inner{
    padding:10px 16px;
  }

  .hero{
    padding:68px 18px 82px;
  }
}

@media(max-width:560px){
  .section{
    margin-top:-36px;
    padding:0 14px 28px;
  }

  .card{
    padding:22px 16px;
    border-radius:22px;
  }

  .auth-container{
    margin:28px 14px;
    padding:22px 16px;
    border-radius:22px;
  }

  .footer .inner{
    grid-template-columns:1fr;
  }

  .hero h1{
    font-size:30px;
  }

  .hero p{
    font-size:14px;
  }
}