/* =====================================================================
 | Écrans d'authentification — Identité « SIGRECC »
 | Église du Christianisme Céleste · Saint Siège · Comité Supérieur Mondial
 |
 | Chargé APRÈS les bundles Metronic : les sélecteurs de classe (.inp, .btn…)
 | l'emportent sur les styles d'éléments du thème. Les comportements JS
 | (jauge de mot de passe, Select2, alertes x-messages) restent gérés par
 | Metronic ; ce fichier ne porte que la couche visuelle des écrans d'auth.
 |
 | Accent unique : violet institutionnel #0e60a9.
 ===================================================================== */

/* ---------- Page shell (plein écran, bord à bord) ---------- */
body.auth-body{
  margin:0;
  min-height:100vh;
  font-family:var(--sans);
  color:var(--ink);
  background:
    radial-gradient(1100px 520px at 50% -8%, #f7f9fb 0%, rgba(240,247,254,0) 60%),
    var(--lav-bg) !important;
  -webkit-font-smoothing:antialiased;
}
.auth-stage{width:100%;min-height:100vh}

/* ---------- Split plein écran ---------- */
.auth-card{
  display:grid;grid-template-columns:0.86fr 1.14fr;
  min-height:100vh;background:#fff;
}
.auth-card--single{grid-template-columns:0.86fr 1.14fr}
.auth-card--wide{grid-template-columns:0.72fr 1.28fr}

/* ---------- Brand panel (photo prophète + voile violet + logo arc-en-ciel) ---------- */
.brand{position:relative;color:#fff;display:flex;overflow:hidden;min-height:100vh}
.brand-photo{position:absolute;inset:0;background-position:56% 8%;background-size:cover;background-repeat:no-repeat}
.brand-scrim{position:absolute;inset:0;
  background:linear-gradient(180deg, rgba(14,96,169,.28) 0%, rgba(14,96,169,.50) 46%, rgba(6,28,50,.90) 82%, rgba(6,28,50,.97) 100%);
}
.brand-inner{position:relative;z-index:2;padding:40px 42px;display:flex;flex-direction:column;width:100%}
.brand-top{
  display:inline-block;align-self:flex-start;
  font-size:12px;letter-spacing:.15em;text-transform:uppercase;color:#fff;font-weight:700;
  background:rgba(6,28,50,.46);border:1px solid rgba(255,255,255,.16);border-radius:999px;
  padding:8px 15px;backdrop-filter:blur(2px);-webkit-backdrop-filter:blur(2px);
  text-shadow:0 1px 6px rgba(0,0,0,.55)}
.brand-bottom{margin-top:auto}
.badge{
  width:88px;height:88px;border-radius:50%;background:#fff;
  display:flex;align-items:center;justify-content:center;
  box-shadow:0 10px 28px rgba(0,0,0,.40), 0 0 0 6px rgba(255,255,255,.10);
}
.badge img{width:72px;height:72px;object-fit:contain;display:block}
.brand-name{
  font-family:var(--serif);font-weight:700;font-size:19px;line-height:1.32;
  letter-spacing:.06em;text-transform:uppercase;margin:22px 0 0;color:#fff;
  text-shadow:0 2px 12px rgba(0,0,0,.55);
}
.brand-dept{
  font-size:10.5px;letter-spacing:.20em;text-transform:uppercase;
  color:#dde4ee;margin-top:12px;line-height:1.7;text-shadow:0 1px 8px rgba(0,0,0,.5);
}
.brand-rule{width:46px;height:1px;background:#ffffff55;margin:22px 0}
.brand-quote{
  font-family:var(--serif);font-style:italic;font-size:13.5px;line-height:1.7;color:#a8c4de;
  margin:0;max-width:34ch;text-shadow:0 1px 10px rgba(0,0,0,.55);
}

/* Médaillon des écrans courts (centré) */
.medallion{
  width:96px;height:96px;border-radius:50%;background:#fff;
  display:flex;align-items:center;justify-content:center;margin:0 auto 22px;
  box-shadow:0 6px 22px rgba(14,96,169,.20), 0 0 0 6px rgba(14,96,169,.06);
}
.medallion img{width:76px;height:76px;object-fit:contain;display:block}

/* ====================================================================
   | Form panel — composition en 3 zones ancrées (tête / carte / signature)
   | qui répondent au rythme du panneau de marque : identité en haut,
   | tâche au centre, signature institutionnelle en pied.
   ==================================================================== */
.form-panel{
  padding:34px 44px 30px;min-height:100vh;overflow-y:auto;position:relative;overflow-x:hidden;
  display:flex;flex-direction:column;
  background:
    radial-gradient(720px 520px at 82% 4%, #e0f0fd 0%, rgba(224,240,253,0) 60%),
    radial-gradient(560px 440px at 4% 98%, #e0f0fd 0%, rgba(224,240,253,0) 58%),
    linear-gradient(158deg, #f7f9fb 0%, #f0f7fe 100%);
}
/* Filigrane discret de l'emblème */
.form-panel::before{
  content:"";position:absolute;right:-46px;bottom:34px;width:300px;height:300px;
  background:url('/symbole.png') no-repeat center/contain;opacity:.045;pointer-events:none;z-index:0;
}
/* Liseré violet vertical soulignant la couture avec le panneau de marque */
.form-panel::after{
  content:"";position:absolute;left:0;top:0;bottom:0;width:3px;z-index:2;pointer-events:none;
  background:linear-gradient(180deg,#0a3d69,var(--violet) 55%,#061c32);
}

/* --- Zone 1 : en-tête de marque du panneau droit --- */
.panel-head{
  position:relative;z-index:1;display:flex;align-items:center;gap:12px;
  width:100%;max-width:680px;margin:0 auto;padding-bottom:8px;
}
.panel-head .seal{
  width:38px;height:38px;border-radius:50%;background:#fff;flex:0 0 auto;
  display:flex;align-items:center;justify-content:center;
  box-shadow:0 3px 10px rgba(14,96,169,.16), 0 0 0 1px #e0f0fd;
}
.panel-head .seal img{width:26px;height:26px;object-fit:contain;display:block}
.panel-head .wm{display:flex;flex-direction:column;line-height:1}
.panel-head .wm b{
  font-family:var(--serif);font-weight:700;font-size:14px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--violet);
}
.panel-head .wm small{
  font-size:9.5px;letter-spacing:.22em;text-transform:uppercase;color:var(--violet-soft);
  font-weight:700;margin-top:5px;
}
.panel-head .head-actions{margin-left:auto;display:flex;align-items:center;gap:12px}
.panel-head .head-tag{
  font-size:9px;letter-spacing:.2em;text-transform:uppercase;font-weight:700;
  color:var(--violet-soft);border:1px solid var(--field-border);border-radius:999px;
  padding:5px 11px;background:rgba(255,255,255,.6);white-space:nowrap;
}
.panel-head .head-back{
  display:inline-flex;align-items:center;gap:6px;white-space:nowrap;
  font-size:12px;font-weight:600;letter-spacing:.02em;color:var(--violet);text-decoration:none;
  border:1px solid var(--card-border);border-radius:999px;padding:7px 14px;background:#fff;
  box-shadow:0 1px 3px rgba(14,96,169,.06);transition:background .15s,box-shadow .15s,transform .05s;
}
.panel-head .head-back svg{width:14px;height:14px;flex:0 0 auto}
.panel-head .head-back:hover{background:#f7f9fb;box-shadow:0 3px 10px rgba(14,96,169,.14)}
.panel-head .head-back:active{transform:translateY(1px)}

/* --- Zone 2 : carte blanche qui ancre le formulaire (centrée verticalement) --- */
.form-wrap{
  width:100%;max-width:462px;margin:auto;position:relative;z-index:1;
  background:#fff;border:1px solid #c2cdd9;border-radius:16px;padding:40px 40px 38px;
  box-shadow:0 1px 3px rgba(14,96,169,.05), 0 24px 56px -22px rgba(14,96,169,.30);
}
/* Filet d'accent en tête de carte */
.form-wrap::before{
  content:"";position:absolute;left:26px;right:26px;top:0;height:3px;border-radius:0 0 3px 3px;
  background:linear-gradient(90deg,transparent,var(--violet) 22%,var(--violet) 78%,transparent);
}
/* Fleuron d'angle discret (deux filets en équerre) */
.form-wrap::after{
  content:"";position:absolute;top:14px;right:14px;width:26px;height:26px;opacity:.5;pointer-events:none;
  background:
    linear-gradient(var(--card-border),var(--card-border)) top right/12px 1px no-repeat,
    linear-gradient(var(--card-border),var(--card-border)) top right/1px 12px no-repeat;
}
.form-wrap--wide{max-width:680px}
.form-panel--center{text-align:center}

/* --- Zone 3 : signature institutionnelle en pied (mention SIGRECC lisible) --- */
.panel-sign{
  position:relative;z-index:1;margin:0 auto;padding-top:22px;text-align:center;
  max-width:520px;
}
.panel-sign .orn{display:flex;align-items:center;justify-content:center;gap:12px;margin-bottom:12px}
.panel-sign .orn i{height:1px;width:64px;background:linear-gradient(90deg,transparent,var(--card-border))}
.panel-sign .orn i:last-child{background:linear-gradient(90deg,var(--card-border),transparent)}
.panel-sign .orn b{width:6px;height:6px;transform:rotate(45deg);background:var(--violet-soft);display:block}
.panel-sign .sig-name{
  font-family:var(--serif);font-size:12px;line-height:1.55;color:#3a4f61;letter-spacing:.02em;margin:0;
}
.panel-sign .sig-name strong{color:var(--violet);font-weight:700}
.panel-sign .sig-meta{
  font-size:11px;letter-spacing:.13em;text-transform:uppercase;color:#3a4f61;
  font-weight:700;margin-top:9px;
}

/* Micro-réassurance sous le bouton */
.assure{
  display:flex;align-items:center;justify-content:center;gap:7px;margin-top:18px;
  font-size:11px;letter-spacing:.06em;color:var(--violet-soft);
}
.assure svg{width:12px;height:12px;flex:0 0 auto}

/* Ancienne mention fixe : neutralisée (remplacée par .panel-sign) */
.auth-footer{display:none !important}
.eyebrow{font-size:10.5px;letter-spacing:.28em;text-transform:uppercase;color:var(--eyebrow);font-weight:700;margin:0 0 14px}
.auth-title{font-family:var(--serif);font-size:30px;font-weight:700;color:var(--violet);letter-spacing:.01em;margin:0}
.subtitle{color:var(--muted);font-size:14px;line-height:1.6;margin:10px 0 0}
/* Filet ornementé (deux traits dégradés + losange central) */
.title-accent{border:none;height:9px;margin:20px 0 24px;position:relative;background:none;overflow:visible;opacity:1}
.title-accent::before{content:"";position:absolute;left:0;right:0;top:4px;height:1px;
  background:linear-gradient(90deg,transparent,#dde4ee 12%,#dde4ee 88%,transparent)}
.title-accent::after{content:"";position:absolute;left:50%;top:0;width:9px;height:9px;margin-left:-4.5px;
  transform:rotate(45deg);background:#fff;border:1px solid var(--card-border)}
.form-panel--center .title-accent::before{background:linear-gradient(90deg,transparent,#dde4ee 20%,#dde4ee 80%,transparent)}

.field{margin-bottom:20px;text-align:left}
.field > label{display:block;font-size:11px;letter-spacing:.13em;text-transform:uppercase;color:#6d8599;font-weight:700;margin:0 0 8px}
.control{position:relative}
.control .eye{position:absolute;right:14px;top:50%;transform:translateY(-50%);color:#6d8599;cursor:pointer;font-size:14px;
  padding:4px;border-radius:6px;line-height:0;background:transparent;border:0}
.control .eye:hover{color:var(--violet);background:#e0f0fd}

input.inp,select.inp,textarea.inp{
  width:100%;height:52px;border:1px solid var(--field-border);border-radius:8px;background:#fbfdff;
  padding:0 16px;font-size:15px;font-family:var(--sans);color:var(--ink);outline:none;
  transition:border-color .15s, box-shadow .15s, background .15s;
}
.control.has-eye input.inp{padding-right:46px}
input.inp::placeholder{color:#9aafc0}
input.inp:hover,select.inp:hover{border-color:var(--field-border-hover)}
input.inp:focus,select.inp:focus{border-color:var(--violet);background:#fff;box-shadow:0 0 0 3px rgba(14,96,169,.12)}
input.inp.is-invalid{border-color:#a3241f;box-shadow:0 0 0 3px rgba(163,36,31,.10)}
.field-error{color:#a3241f;font-size:12px;margin-top:6px}

.row-between{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;margin:2px 0 24px}
.check{display:inline-flex;align-items:center;gap:8px;font-size:13px;color:#3a4f61;cursor:pointer;user-select:none;margin:0}
.check input{position:absolute;opacity:0;width:0;height:0}
.check .box{width:16px;height:16px;border:1px solid #a8c4de;border-radius:4px;background:#fff;display:inline-block;position:relative;transition:.12s}
.check input:checked + .box{background:var(--violet);border-color:var(--violet)}
.check input:checked + .box::after{content:"";position:absolute;left:5px;top:2px;width:4px;height:8px;border:solid #fff;border-width:0 2px 2px 0;transform:rotate(45deg)}
.check input:focus-visible + .box{box-shadow:0 0 0 3px rgba(14,96,169,.18)}
.link{color:var(--violet);text-decoration:none;font-size:13px;font-weight:600}
.link:hover{text-decoration:underline}

.btn-auth{
  width:100%;height:50px;border:0;border-radius:6px;cursor:pointer;display:block;
  background:linear-gradient(180deg,#0a3d69,var(--violet));
  color:#fff;font-family:var(--serif);font-weight:700;font-size:14px;letter-spacing:.10em;text-transform:uppercase;
  box-shadow:0 8px 18px -6px rgba(14,96,169,.55);
  transition:transform .05s, box-shadow .15s;text-align:center;line-height:50px;text-decoration:none;
}
.btn-auth:hover{box-shadow:0 10px 22px -6px rgba(14,96,169,.65);color:#fff}
.btn-auth:active{transform:translateY(1px)}
.btn-auth--ghost{
  background:#fff;color:var(--violet);border:1px solid var(--card-border);box-shadow:none;line-height:48px;
}
.btn-auth--ghost:hover{color:var(--violet);background:#f7f9fb}

.foot-note{margin-top:26px;font-size:13px;color:var(--muted);text-align:center}
.foot-note a{color:var(--violet);font-weight:600;text-decoration:none}
.foot-note a:hover{text-decoration:underline}
.switch-line{margin-top:22px;text-align:center;font-size:12.5px}
.switch-line a{color:var(--violet-soft);text-decoration:none;letter-spacing:.02em}
.switch-line a:hover{color:var(--violet);text-decoration:underline}

/* Jauge de robustesse (Metronic data-kt-password-meter) restylée */
.meter{display:flex;gap:6px;margin:10px 0 6px}
.meter > div{flex:1;height:4px;border-radius:3px;background:#dde4ee;transition:background .15s}
.meter > div.active{background:#2f7d4f}
.hint{font-size:11.5px;color:#6d8599;margin-top:4px}

.pill{display:inline-block;background:#E8F5ED;border:1px solid #A8D8B9;color:#1A6B3A;border-radius:20px;
  font-size:10.5px;font-weight:700;letter-spacing:.10em;text-transform:uppercase;padding:5px 12px}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:0 18px}

.footer-brand{max-width:1040px;margin:26px auto 0;padding:16px 24px 0;text-align:center;
  font-size:10.5px;letter-spacing:.10em;text-transform:uppercase;color:#9aafc0;line-height:1.7}

/* ---------- Responsive ---------- */
@media (max-width:860px){
  .auth-card,.auth-card--single,.auth-card--wide{grid-template-columns:1fr;min-height:100vh}
  .brand{min-height:230px}
  .brand-photo{background-position:56% 20%}
  .brand-inner{padding:24px 26px}
  .brand-top{display:none}
  .badge{width:60px;height:60px}
  .badge img{width:48px;height:48px}
  .brand-name{font-size:16px;margin-top:12px}
  .brand-rule{margin:14px 0}
  .brand-quote{display:none}
  .form-panel{min-height:auto;padding:26px 20px 40px}
  .form-panel::before{display:none}
  .form-panel::after{width:100%;height:3px;bottom:auto}
  .form-wrap,.form-wrap--wide{max-width:520px;padding:32px 26px;margin:22px auto}
  .panel-head{max-width:520px;padding-bottom:0}
  .panel-head .head-tag{display:none}
  .panel-sign{max-width:520px}
  .grid2{grid-template-columns:1fr}
}
@media (max-width:420px){
  .auth-title{font-size:25px}
  .form-wrap,.form-wrap--wide{padding:26px 20px;border-radius:14px}
}