/* ============================================================
   Articles Alsbom × Ispira — feuille partagée
   Sous-ensemble des tokens du design system de la landing.
   ============================================================ */
:root{
  --blue-050:#eef4ff; --blue-100:#dbe7ff; --blue-200:#b8ceff; --blue-300:#8fb8ff;
  --blue-500:#2378ff; --blue-600:#1a60e0; --blue-700:#1547b4; --blue-900:#0a1680;
  --amber-100:#fff0d9; --amber-300:#ffd079; --amber-500:#ffb238; --amber-800:#9a5e00;
  --green-100:#dcefdf; --green-300:#74c375; --green-500:#00804c; --green-600:#006b3f;
  --paper-000:#ffffff; --paper-050:#f8f7f5; --paper-100:#f5f1e9; --paper-200:#ece6da;
  --paper-300:#ddd5c5;
  --ink-900:#0d1320; --ink-700:#2b3343; --ink-600:#434c5c; --ink-500:#5d6675;
  --ink-400:#8990a0; --ink-300:#b6bcc8;
  --font-sans:"Nunito Sans",system-ui,-apple-system,sans-serif;
  --line-inverse:rgba(255,255,255,.16);
  --shadow-sm:0 1px 3px rgba(34,31,24,.08),0 1px 2px rgba(34,31,24,.05);
  --shadow-md:0 4px 12px rgba(34,31,24,.08),0 2px 4px rgba(34,31,24,.05);
  --ease:cubic-bezier(.2,0,.1,1);
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{font-family:var(--font-sans);color:var(--ink-700);background:var(--paper-100);
  font-size:17px;line-height:1.65;-webkit-font-smoothing:antialiased}
img{max-width:100%;display:block}

/* ---- barre du haut (reprise simplifiée) ---- */
.statusbar{position:sticky;top:0;z-index:100;background:var(--blue-900);
  border-bottom:1px solid var(--line-inverse)}
.statusbar .inner{max-width:1100px;margin:0 auto;padding:0 clamp(20px,4vw,40px);
  height:60px;display:flex;align-items:center;gap:20px}
.brand{display:inline-flex;align-items:center;gap:12px;font-size:18px;font-weight:800;
  letter-spacing:-.015em;color:var(--paper-000);text-decoration:none;white-space:nowrap}
.brand span{color:var(--amber-500);margin:0 2px}
.brand-mark{width:32px;height:32px;flex:0 0 32px;display:block}
.crumb{font-size:12px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;
  color:var(--blue-300);border-left:1px solid var(--line-inverse);padding-left:20px}
.navcta{margin-left:auto;font-size:14px;font-weight:700;background:var(--blue-600);
  color:#fff;padding:10px 18px;border-radius:999px;text-decoration:none;white-space:nowrap;
  transition:background .12s var(--ease)}
.navcta:hover{background:var(--blue-500)}
@media(max-width:700px){.crumb{display:none}}

/* ---- en-tête d'article ---- */
.arthead{background:var(--blue-900);color:var(--paper-050);
  padding:clamp(48px,7vw,88px) 0 clamp(40px,6vw,72px);position:relative;overflow:hidden}
.arthead::before{content:"";position:absolute;inset:0;
  background:radial-gradient(700px 380px at 85% 0%,rgba(35,120,255,.28),transparent 62%)}
.arthead .wrap{position:relative;z-index:1}
.wrap{max-width:820px;margin:0 auto;padding:0 clamp(20px,4vw,40px)}
.eyebrow{font-size:12px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;
  color:var(--amber-500);margin-bottom:16px;display:block}
.arthead h1{font-size:clamp(30px,4.6vw,46px);font-weight:900;line-height:1.08;
  letter-spacing:-.03em;color:var(--paper-000);max-width:22ch}
.artmeta{margin-top:20px;font-size:13px;font-weight:600;letter-spacing:.04em;
  color:var(--blue-200);display:flex;gap:10px;flex-wrap:wrap}
.artmeta .sep{color:var(--blue-700)}

/* ---- corps ---- */
article.body{background:var(--paper-000)}
article.body .wrap{padding-top:clamp(40px,5vw,64px);padding-bottom:clamp(48px,6vw,80px)}
.figure{margin:0 0 40px;border:1px solid var(--paper-200);border-radius:16px;
  overflow:hidden;box-shadow:var(--shadow-sm)}
.figure img{width:100%;height:auto}
.lead-in{font-size:19px;line-height:1.6;color:var(--ink-600);margin-bottom:32px}
article.body h2{font-size:clamp(23px,2.6vw,29px);font-weight:900;letter-spacing:-.02em;
  color:var(--ink-900);margin:48px 0 16px;line-height:1.15}
article.body h3{font-size:19px;font-weight:700;color:var(--ink-900);margin:32px 0 10px}
article.body p{margin-bottom:18px}
article.body ul,article.body ol{margin:0 0 18px 22px}
article.body li{margin-bottom:8px}
article.body a{color:var(--blue-700)}
.hl{background:linear-gradient(transparent 76%,var(--amber-500) 76%,var(--amber-500) 96%,transparent 96%);padding:0 3px}

/* liste numérotée « causes » (article 2) */
.causes{list-style:none;margin:32px 0;counter-reset:cause}
.causes>li{counter-increment:cause;position:relative;margin:0 0 20px;
  padding:24px 24px 24px 76px;background:var(--paper-050);
  border:1px solid var(--paper-200);border-radius:12px}
.causes>li::before{content:counter(cause);position:absolute;left:22px;top:22px;
  width:38px;height:38px;border-radius:999px;background:var(--blue-900);color:var(--amber-500);
  font-weight:900;font-size:18px;display:flex;align-items:center;justify-content:center}
.causes h3{margin:0 0 8px}
.causes p{margin:0;font-size:15.5px;color:var(--ink-600)}

/* encadré clé */
.callout{margin:32px 0;padding:24px 28px;background:var(--amber-100);
  border-left:3px solid var(--amber-500);border-radius:0 12px 12px 0}
.callout b{color:var(--ink-900)}
.callout p:last-child{margin:0}

/* FAQ */
.faq{margin-top:48px;border-top:1px solid var(--paper-200)}
.faq h2{margin-top:40px}
.faq details{border-bottom:1px solid var(--paper-200)}
.faq summary{cursor:pointer;list-style:none;padding:20px 40px 20px 0;font-weight:700;
  font-size:17px;color:var(--ink-900);position:relative}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";position:absolute;right:6px;top:14px;font-size:24px;
  color:var(--blue-700);transition:transform .2s var(--ease)}
.faq details[open] summary::after{transform:rotate(45deg)}
.faq .a{padding:0 40px 20px 0;color:var(--ink-500);font-size:16px}

/* CTA final */
.cta{margin-top:56px;background:var(--blue-900);color:var(--blue-100);
  border-radius:16px;padding:clamp(28px,4vw,44px);display:flex;align-items:center;
  gap:24px;flex-wrap:wrap}
.cta .t{flex:1;min-width:260px}
.cta b{display:block;font-size:22px;font-weight:900;letter-spacing:-.02em;
  color:var(--paper-000);margin-bottom:6px}
.cta p{margin:0;font-size:15px}
.btn{display:inline-flex;align-items:center;gap:8px;font-weight:700;font-size:17px;
  padding:14px 26px;border-radius:999px;text-decoration:none;background:var(--blue-500);
  color:#fff;transition:background .12s var(--ease)}
.btn:hover{background:var(--blue-600)}

/* suite d'articles */
.next{background:var(--paper-100);padding:clamp(40px,5vw,64px) 0}
.next .wrap{max-width:1100px}
.next h2{font-size:13px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;
  color:var(--ink-500);margin-bottom:20px}
.next-grid{display:grid;grid-template-columns:1fr 1fr;gap:20px}
@media(max-width:720px){.next-grid{grid-template-columns:1fr}}
.next a{display:block;background:var(--paper-000);border:1px solid var(--paper-200);
  border-radius:12px;padding:22px 26px;text-decoration:none;color:var(--ink-900);
  font-weight:700;font-size:16.5px;line-height:1.35;box-shadow:var(--shadow-sm);
  transition:box-shadow .2s var(--ease),transform .2s var(--ease)}
.next a:hover{box-shadow:var(--shadow-md);transform:translateY(-2px)}
.next a small{display:block;margin-top:6px;font-size:12px;font-weight:700;
  letter-spacing:.12em;text-transform:uppercase;color:var(--blue-700)}

footer{background:var(--blue-900);color:var(--blue-200);padding:32px 0;font-size:14px}
footer .wrap{max-width:1100px;display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap}
footer a{color:var(--blue-200)}
@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}html{scroll-behavior:auto}}