/* echeance.ma — thème « Encre & filigrane » (v76)
   L'univers du chèque : encre bancaire, papier sécurisé, filigrane guilloché, laiton du tampon. */
@font-face{font-family:"Schibsted Grotesk";src:url(/assets/schibsted-76.woff2) format("woff2");font-weight:400 900;font-display:swap}
:root{
  --encre:#13223f;--encre-2:#0c1730;--encre-3:#1e3360;
  --papier:#f3f5f9;--carte:#fff;--trait:#e1e6ee;--trait-2:#cfd7e4;
  --filigrane:#2f4a7a;--laiton:#c9a55a;--laiton-2:#e3c98f;
  --texte:#1b2438;--doux:#5f6b80;
  --titre:"Schibsted Grotesk","Manrope Variable",sans-serif;
  --canvas:var(--papier);--line:var(--trait);
}
html body{background:var(--papier)}
.amount,.right.amount,.zz-total strong,.week-amount{font-variant-numeric:tabular-nums}

/* ---------- Connexion ---------- */
.login-page{background:var(--carte)}
.login-story{position:relative;overflow:hidden;color:#e9eef8;background:var(--encre) radial-gradient(120% 90% at 100% 0%,#1d3260 0%,var(--encre) 55%,var(--encre-2) 100%)}
.login-story:before{content:"";position:absolute;width:980px;height:980px;right:-330px;top:50%;transform:translateY(-50%);background:url(/assets/rosace-76.svg) center/contain no-repeat;pointer-events:none}
.login-story>*{position:relative}
.login-story .brand{color:#fff}
.login-story .brand .brand-period{color:var(--laiton)}
.login-story .brand-mark i{background:#fff!important}
.login-story .eyebrow{display:none}
.login-story h1{font-family:var(--titre);font-weight:700;color:#fff;letter-spacing:-.035em;font-size:64px;line-height:1.02;max-width:9.5em}
.login-story>div>p{color:#b8c3d8;font-size:17px;line-height:1.6;max-width:27em}
.login-story>small{color:#8392ad}
/* l'encart devient un chèque */
.login-preview{position:relative;max-width:440px;margin-top:48px;padding:22px 26px 46px;border:0;border-radius:6px;color:var(--texte);
  background:#f7f8fb url(/assets/onde-76.svg) 0 0/100% 100% no-repeat;box-shadow:0 30px 60px -20px rgba(4,10,25,.55),0 0 0 1px rgba(255,255,255,.06);transform:rotate(-1.6deg)}
.login-preview:after{content:"⑈ 1800852 ⑈  007 ⑆ 450  ⑈ échéance.ma";position:absolute;left:26px;right:26px;bottom:14px;font:500 12px/1 ui-monospace,Menlo,monospace;letter-spacing:.18em;color:#4a5a78;border-top:1px dashed #b7c1d3;padding-top:10px}
.login-preview>span{font-family:var(--titre);font-size:16px;color:var(--encre)}
.login-preview>div{border-top-color:#dde3ee}
.login-preview>div>span{color:#6c7a93}
.login-preview strong{color:var(--encre)}
.login-form h2{font-family:var(--titre);letter-spacing:-.03em;font-size:38px;line-height:1.08;color:var(--encre)}
.login-form .login-symbol{background:var(--encre);color:var(--laiton-2)}
.login-form .field input{border-radius:10px;border-color:var(--trait-2);background:#fbfcfe}
.login-form .field input:focus{border-color:var(--encre);box-shadow:0 0 0 4px rgba(19,34,63,.10);outline:0}
.login-form .btn.primary{background:var(--encre);border-radius:10px;min-height:52px}
.login-form .btn.primary:hover{background:var(--encre-3)}

/* ---------- Barre latérale ---------- */
.sidebar{background:var(--encre) linear-gradient(180deg,var(--encre) 0%,var(--encre-2) 100%);border-right:0;color:#c3cce0}
.sidebar .brand{color:#fff}
.sidebar .brand .brand-period{color:var(--laiton)}
.sidebar .brand-mark i{background:#fff!important}
.sidebar .workspace-label,.sidebar .nav-heading{text-transform:none;letter-spacing:0;color:#7f8dab;font-size:13px;font-weight:600}
.sidebar .nav-separator{border-color:rgba(255,255,255,.08);background:rgba(255,255,255,.08)}
.sidebar nav button{color:#b9c3d8;position:relative;border-radius:8px}
.sidebar nav button svg{opacity:.85}
.sidebar nav button:hover{color:#fff;background:rgba(255,255,255,.06)}
.sidebar nav button.active{color:#fff;background:rgba(255,255,255,.09);font-weight:700}
.sidebar nav button.active:before{content:"";position:absolute;left:-10px;top:10px;bottom:10px;width:3px;border-radius:0 3px 3px 0;background:var(--laiton)}
.sidebar .nav-badge{background:var(--laiton);color:var(--encre-2)}
.sidebar .sidebar-note{display:none}
.sidebar .profile{background:rgba(255,255,255,.05);border-color:rgba(255,255,255,.08);color:#fff}
.sidebar .profile small{color:#8f9cb8}
.sidebar .profile .avatar{background:var(--laiton);color:var(--encre-2)}
.sidebar::-webkit-scrollbar{width:8px}.sidebar::-webkit-scrollbar-thumb{background:rgba(255,255,255,.14);border-radius:8px}

/* ---------- En-tête & titres ---------- */
.topbar{background:rgba(255,255,255,.92);backdrop-filter:saturate(1.4) blur(8px);border-bottom:1px solid var(--trait)}
.page-heading .eyebrow{display:none}
.page-heading h1{font-family:var(--titre);font-weight:700;letter-spacing:-.03em;font-size:36px;color:var(--encre)}
.page-heading p{color:var(--doux)}
.breadcrumb{color:var(--doux)}

/* ---------- Panneaux & tableaux ---------- */
.panel,.company-scope{border:1px solid var(--trait)!important;border-radius:14px;box-shadow:0 1px 2px rgba(19,34,63,.04)}
.panel-heading h2,.panel h2{font-family:var(--titre);letter-spacing:-.02em;color:var(--encre)}
table thead th{background:#f6f8fb;color:#6a7690;font-weight:600;text-transform:none;letter-spacing:0}
table tbody tr{transition:background-color .12s}
table tbody tr:hover{background:#f7f9fd}
.btn.primary{background:var(--encre);border-color:var(--encre)}
.btn.primary:hover{background:var(--encre-3)}
.scope-options label.selected{border-color:var(--encre);background:#eef2f9}
.scope-options label.selected input{accent-color:var(--encre)}
:focus-visible{outline:2px solid var(--laiton);outline-offset:2px}
@media (max-width:900px){.login-story h1{font-size:44px}.login-preview{transform:none}}
@media (prefers-reduced-motion:reduce){table tbody tr{transition:none}}