:root{
      --bg:#0b1220;--fg:#eaf0f7;--muted:#afbac9;--card:#121b2d;--soft:#0e1728;
      --brand:#1ea972;--accent:#3e8fff;--gold:#d0b26b;--shadow:0 10px 30px rgba(0,0,0,.25);
      --radius:18px;--radius-lg:28px;--w:1080px;
    }
    html,body{background:var(--bg);color:var(--fg);margin:0;padding:0;font:16px/1.65 Inter,system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,"Helvetica Neue",Arial,sans-serif}
    img{max-width:100%;height:auto;border-radius:14px}
    a{color:var(--accent);text-decoration:none} a:hover{text-decoration:underline}
    .container{max-width:var(--w);margin:0 auto;padding:24px}
    .breadcrumbs{font-size:.9rem;color:var(--muted);margin:8px 0 0}

    /* HERO (une seule image) */
    .hero{position:relative;border-radius:var(--radius-lg);overflow:hidden;isolation:isolate;background:linear-gradient(180deg,rgba(2,8,23,.6),rgba(2,8,23,.85))}
    .hero-media{position:absolute;inset:0;z-index:-1;opacity:.60}
    .hero-media picture,.hero-media img{width:100%;height:100%;object-fit:cover}
    .hero-inner{display:grid;grid-template-columns:1fr;gap:24px;align-items:center;padding:48px;min-height:56vh}
    .hero h1{font-size:clamp(28px,3.8vw,46px);line-height:1.1;margin:0 0 12px}
    .hero p.lead{font-size:clamp(16px,1.6vw,18px);color:#dfe7f2;margin:0 0 18px}
    .meta{display:flex;gap:14px;flex-wrap:wrap;color:var(--muted);font-size:.95rem}
    .chip{display:inline-flex;gap:8px;align-items:center;background:rgba(255,255,255,.06);padding:8px 12px;border:1px solid rgba(255,255,255,.08);border-radius:999px}
    .cta-wrap{display:flex;gap:12px;flex-wrap:wrap;margin-top:18px}
    .btn{display:inline-flex;align-items:center;gap:10px;padding:12px 16px;border-radius:12px;border:1px solid rgba(255,255,255,.12);background:linear-gradient(180deg,rgba(255,255,255,.06),rgba(255,255,255,.03));color:#fff;font-weight:700;box-shadow:var(--shadow)}
    .btn.whatsapp{background:linear-gradient(180deg,rgba(30,169,114,.25),rgba(30,169,114,.1));border-color:rgba(30,169,114,.35)}

    /* Layout contenu */
    .grid{display:grid;grid-template-columns:1.8fr .9fr;gap:28px;margin-top:28px}
    @media(max-width:980px){.grid{grid-template-columns:1fr}}

    article{background:var(--card);border-radius:var(--radius);padding:26px 24px;box-shadow:var(--shadow)}
    article h2{font-size:1.6rem;margin-top:28px} article h3{font-size:1.25rem;margin-top:20px}
    article p{margin:10px 0} .prose ul,.prose ol{padding-left:18px}
    .callout{background:var(--soft);border:1px solid rgba(255,255,255,.08);padding:16px;border-radius:14px}
    .quote{border-left:3px solid var(--gold);padding-left:14px;color:#e6e0cf}
    table{width:100%;border-collapse:collapse;border-radius:12px;overflow:hidden;margin:12px 0}
    th,td{padding:12px 10px;border-bottom:1px solid rgba(255,255,255,.08)} th{background:rgba(255,255,255,.04);text-align:left}
    tr:hover td{background:rgba(255,255,255,.03)}
    aside{position:sticky;top:18px;height:max-content}
    .card{background:var(--card);border-radius:var(--radius);box-shadow:var(--shadow);padding:18px}
    .toc a{display:block;padding:8px 8px;border-radius:10px;color:#dbe5f4}
    .toc a:hover{background:rgba(255,255,255,.06)}
    figcaption{font-size:.9rem;color:var(--muted);margin-top:8px}
    .cta{display:flex;flex-wrap:wrap;align-items:center;gap:16px;background:linear-gradient(160deg, rgba(30,169,114,.18), rgba(62,143,255,.12));border:1px solid rgba(255,255,255,.1);padding:18px 20px;border-radius:16px;margin:24px 0}
    footer{color:var(--muted);font-size:.9rem;margin:28px 0 8px;text-align:center}