/* ============================================================
   École Ibn Badis — base.css
   Tokens de design, reset et composants partagés
   (chargé par le site public ET le dashboard)
   ============================================================ */
:root{
  --green-900:#063a26; --green-800:#083b28; --green-700:#0c5c3d;
  --green-600:#0e6b46; --green-500:#158a5c;
  --red:#c1272d; --red-700:#9e1f24;
  --cream:#f7f1e3; --cream-2:#efe6d2; --paper:#fffdf8;
  --gold:#c1a256; --gold-soft:#e7d6a8;
  --ink:#1c2a22; --ink-soft:#42544a; --line:#e3dcc8;
  --shadow:0 18px 40px -22px rgba(6,58,38,.45);
  --shadow-sm:0 6px 18px -12px rgba(6,58,38,.4);
  --radius:18px; --maxw:1200px;
  --bg:var(--cream); --card:var(--paper); --text:var(--ink);
  --muted:var(--ink-soft); --border:var(--line);
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --bg:#0a1712; --card:#0f2318; --cream:#0a1712; --cream-2:#12291d; --paper:#0f2318;
    --text:#eef3ec; --ink:#eef3ec; --ink-soft:#a9c0b1; --muted:#a9c0b1;
    --line:#1f3a2b; --border:#1f3a2b; --green-700:#1c8a5c; --gold:#d8bd77;
    --shadow:0 18px 40px -22px rgba(0,0,0,.7); --shadow-sm:0 8px 20px -14px rgba(0,0,0,.7);
  }
}
:root[data-theme="dark"]{
  --bg:#0a1712; --card:#0f2318; --cream:#0a1712; --cream-2:#12291d; --paper:#0f2318;
  --text:#eef3ec; --ink:#eef3ec; --ink-soft:#a9c0b1; --muted:#a9c0b1;
  --line:#1f3a2b; --border:#1f3a2b; --green-700:#1c8a5c; --gold:#d8bd77;
  --shadow:0 18px 40px -22px rgba(0,0,0,.7); --shadow-sm:0 8px 20px -14px rgba(0,0,0,.7);
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0; background:var(--bg); color:var(--text);
  font-family:"Figtree",system-ui,-apple-system,"Segoe UI",sans-serif;
  font-size:17px; line-height:1.6; -webkit-font-smoothing:antialiased; overflow-x:hidden;
}
h1,h2,h3,h4{font-family:"Fraunces",Georgia,serif;font-weight:600;line-height:1.08;letter-spacing:-.01em;color:var(--text);margin:0}
.ar{font-family:"Amiri",serif;direction:rtl}
a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}
button{font-family:inherit;cursor:pointer}

.wrap{max-width:var(--maxw);margin:0 auto;padding:0 clamp(18px,4vw,40px)}
.eyebrow{display:inline-flex;align-items:center;gap:.55rem;color:var(--red);font-weight:700;font-size:.82rem;letter-spacing:.08em;text-transform:uppercase}
.eyebrow::before{content:"";width:26px;height:2px;background:var(--red);display:inline-block}
.overflow-scroll{overflow-x:auto}

/* Boutons */
.btn{border:none;border-radius:99px;padding:.72rem 1.3rem;font-weight:700;font-size:.95rem;
  transition:transform .12s ease,box-shadow .2s,background .2s;display:inline-flex;align-items:center;gap:.5rem}
.btn:active{transform:translateY(1px)}
.btn-primary{background:var(--green-700);color:#fff;box-shadow:var(--shadow-sm)}
.btn-primary:hover{background:var(--green-600)}
.btn-red{background:var(--red);color:#fff}
.btn-red:hover{background:var(--red-700)}
.btn-ghost{background:transparent;color:var(--green-700);border:1.5px solid var(--border)}
.btn-ghost:hover{border-color:var(--green-700)}

/* Bande drapeau (couleurs décoratives) */
.flag-strip{height:6px;background:linear-gradient(90deg,var(--green-700) 0 50%,var(--red) 50% 100%)}

/* Toast */
.toast{position:fixed;bottom:1.4rem;left:50%;transform:translateX(-50%) translateY(140%);
  background:var(--green-800);color:#fff;padding:.9rem 1.3rem;border-radius:99px;font-weight:600;
  box-shadow:0 16px 40px -12px rgba(0,0,0,.5);z-index:200;
  transition:transform .4s cubic-bezier(.2,.9,.3,1);display:flex;gap:.6rem;align-items:center}
.toast.show{transform:translateX(-50%) translateY(0)}

/* Encart démo */
.demo-note{background:color-mix(in srgb,var(--gold) 18%,transparent);border:1px dashed var(--gold);
  border-radius:12px;padding:.7rem 1rem;font-size:.86rem;color:var(--text);margin-bottom:1.3rem;
  display:flex;gap:.6rem;align-items:center}

@media (prefers-reduced-motion:reduce){*{transition:none!important;scroll-behavior:auto}}