/* ============================================================
   BANQUE D'ESCOMPTE — style.css
   Design system "IRIS" — refonte visuelle complète (étape 1)
   ============================================================ */

:root{
  /* IRIS — tokens */
  --void:#080A12;
  --void-deep:#040509;
  --paper:#F6F7FB;
  --paper-deep:#ECEEF6;
  --slate:#4A4F63;
  --slate-soft:#868CA1;
  --line:#1B1E2C;             /* rules on void */
  --line-light:#E2E4EF;       /* rules on paper */

  --iris:#4A46F5;             /* primary accent — electric indigo */
  --iris-deep:#332FD0;
  --iris-soft:rgba(74,70,245,0.12);
  --iris-glow:rgba(74,70,245,0.38);
  --iris-on-void:#9C98FF;     /* accent, readable on dark */
  --gold:#C7A24A;             /* secondary accent — premium highlight */

  --bg:var(--paper);
  --bg-deep:var(--paper-deep);
  --text:#0B0D16;
  --text-soft:var(--slate-soft);
  --surface-inv:var(--void);
  --text-inv:var(--paper);
  --text-inv-soft:rgba(246,247,251,0.62);
  --accent:var(--iris);

  --radius:14px;
  --radius-sm:8px;
  --radius-pill:999px;
  --display:'Space Grotesk', 'Manrope', system-ui, sans-serif;
  --sans:'Inter', system-ui, -apple-system, sans-serif;

  /* ── Système partagé public / espace client (Étape 2) ── */
  --shadow-sm:0 1px 3px rgba(11,13,22,.07), 0 1px 2px rgba(11,13,22,.05);
  --shadow-md:0 10px 26px rgba(11,13,22,.10);
  --shadow-lg:0 24px 52px rgba(11,13,22,.16);
  --space-1:4px; --space-2:8px; --space-3:12px; --space-4:16px;
  --space-5:24px; --space-6:32px; --space-7:48px;

  --ok:#157A55;   --ok-soft:rgba(21,122,85,.12);
  --warn:#9A6700; --warn-soft:rgba(154,103,0,.13);
  --bad:#C4382C;  --bad-soft:rgba(196,56,44,.11);
  --info:#3B37D6; --info-soft:rgba(74,70,245,.11);
  --gold-soft:rgba(199,162,74,.16);
  --gold-deep:#A9822F;

  color-scheme: light;
}

@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --bg:var(--void-deep);
    --bg-deep:#0C0F1B;
    --line-light:rgba(246,247,251,0.10);
    --text:var(--paper);
    --text-soft:rgba(246,247,251,0.58);
    --surface-inv:#020306;
    --text-inv:var(--paper);
    --text-inv-soft:rgba(246,247,251,0.55);
    --accent:var(--iris-on-void);
    --iris-soft:rgba(156,152,255,0.14);
    --shadow-sm:0 1px 3px rgba(0,0,0,.35), 0 1px 2px rgba(0,0,0,.22);
    --shadow-md:0 10px 26px rgba(0,0,0,.40);
    --shadow-lg:0 24px 52px rgba(0,0,0,.50);
    --ok:#5FD3A1;   --ok-soft:rgba(95,211,161,.14);
    --warn:#F0C36A; --warn-soft:rgba(240,195,106,.14);
    --bad:#FF8A80;  --bad-soft:rgba(255,138,128,.14);
    --info:#9C98FF; --info-soft:rgba(156,152,255,.15);
    --gold-soft:rgba(199,162,74,.20);
    --gold-deep:#8A6B27;
    color-scheme: dark;
  }
}
:root[data-theme="dark"]{
  --bg:var(--void-deep);
  --bg-deep:#0C0F1B;
  --line-light:rgba(246,247,251,0.10);
  --text:var(--paper);
  --text-soft:rgba(246,247,251,0.58);
  --surface-inv:#020306;
  --text-inv:var(--paper);
  --text-inv-soft:rgba(246,247,251,0.55);
  --accent:var(--iris-on-void);
  --iris-soft:rgba(156,152,255,0.14);
  --shadow-sm:0 1px 3px rgba(0,0,0,.35), 0 1px 2px rgba(0,0,0,.22);
  --shadow-md:0 10px 26px rgba(0,0,0,.40);
  --shadow-lg:0 24px 52px rgba(0,0,0,.50);
  --ok:#5FD3A1;   --ok-soft:rgba(95,211,161,.14);
  --warn:#F0C36A; --warn-soft:rgba(240,195,106,.14);
  --bad:#FF8A80;  --bad-soft:rgba(255,138,128,.14);
  --info:#9C98FF; --info-soft:rgba(156,152,255,.15);
  --gold-soft:rgba(199,162,74,.20);
  --gold-deep:#8A6B27;
  color-scheme: dark;
}

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0;}
html{scroll-behavior:smooth;}
@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto;}
  *{animation-duration:0.001ms !important;transition-duration:0.001ms !important;scroll-behavior:auto !important;}
}
body{
  font-family:var(--sans);
  background:var(--bg);
  color:var(--text);
  line-height:1.62;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
.wrap{max-width:1220px;margin:0 auto;padding:0 28px;}
img,svg{max-width:100%;display:block;}
a{color:inherit;text-decoration:none;}
:focus-visible{outline:2px solid var(--iris);outline-offset:3px;border-radius:4px;}
button{font:inherit;}

.skip-link{position:absolute;left:-9999px;top:0;background:var(--surface-inv);color:var(--text-inv);padding:12px 20px;z-index:400;border-radius:0 0 8px 0;}
.skip-link:focus{left:0;top:0;}

/* ── Typography scale ── */
h1,h2,h3{font-family:var(--display);font-weight:600;letter-spacing:-0.02em;line-height:1.05;}
h1{font-size:clamp(2.5rem,5.2vw,4.6rem);}
h2{font-size:clamp(1.85rem,3.1vw,2.6rem);}
h3{font-size:1.28rem;}
p{max-width:62ch;}
.eyebrow{
  font-family:var(--sans);
  font-size:12.5px;
  font-weight:700;
  letter-spacing:0.06em;
  text-transform:uppercase;
  color:var(--iris);
  display:inline-flex;
  align-items:center;
  gap:8px;
}
.eyebrow::before{content:'';width:16px;height:2px;background:var(--iris);border-radius:2px;}

/* ── Buttons ── */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:10px;
  padding:14px 28px;font-size:14.5px;font-weight:600;
  border-radius:var(--radius-pill);cursor:pointer;border:1px solid transparent;
  font-family:var(--sans);transition:transform .2s cubic-bezier(.2,.8,.2,1), box-shadow .25s ease, background .2s ease, border-color .2s ease;
  white-space:nowrap;
}
.btn-primary{background:linear-gradient(135deg,var(--iris) 0%,var(--iris-deep) 100%);color:#fff;box-shadow:0 8px 22px rgba(74,70,245,0.28);}
.btn-primary:hover{transform:translateY(-2px);box-shadow:0 14px 30px rgba(74,70,245,0.4);}
.btn-inv{background:var(--paper);color:var(--void);}
.btn-inv:hover{transform:translateY(-2px);box-shadow:0 10px 24px rgba(0,0,0,0.28);}
.btn-ghost{background:none;color:var(--text);border-color:var(--line-light);}
.btn-ghost:hover{border-color:var(--iris);color:var(--iris);}
.btn-ghost-inv{background:none;color:var(--text-inv);border-color:rgba(246,247,251,0.22);}
.btn-ghost-inv:hover{border-color:var(--text-inv);}

/* ── Section shell ── */
.section{padding:112px 0;}
.section-head{max-width:640px;margin-bottom:56px;}
.section-head .eyebrow{display:inline-flex;margin-bottom:16px;}
.section-head h2{margin-top:2px;}
.section-head p.desc{color:var(--text-soft);font-size:15.5px;margin-top:16px;max-width:540px;}
.section-head.center{margin-left:auto;margin-right:auto;text-align:center;}
.section-head.center .eyebrow::before{display:none;}
.section-head.center p.desc{margin-left:auto;margin-right:auto;}
@media (max-width:700px){.section{padding:72px 0;}}

/* ── Scroll reveal (single orchestrated pattern, not per-card) ── */
.reveal{opacity:0;transform:translateY(20px);transition:opacity .7s cubic-bezier(.2,.7,.2,1), transform .7s cubic-bezier(.2,.7,.2,1);}
.reveal.is-visible{opacity:1;transform:translateY(0);}
@media (prefers-reduced-motion: reduce){
  .reveal{opacity:1;transform:none;transition:none;}
}