*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
    :root {
      --blue:#1a6fb5; --blue-dark:#1258a0; --blue-pale:#eef5fd; --blue-tint:#dceefb;
      --blue-glow:rgba(26,111,181,.10); --gold:#d4a017; --ink:#111827; --ink-soft:#374151;
      --ink-muted:#6b7280; --ink-faint:#9ca3af; --white:#ffffff; --surface:#f9fafb;
      --border:#e5e7eb; --border-soft:#f0f0f0;
      --radius-sm:10px; --radius:14px; --radius-lg:20px; --radius-xl:28px;
      --shadow-xs:0 1px 3px rgba(0,0,0,.06); --shadow-sm:0 2px 8px rgba(0,0,0,.07);
      --shadow:0 4px 20px rgba(0,0,0,.08); --shadow-lg:0 12px 40px rgba(0,0,0,.10);
      --transition:.2s cubic-bezier(.4,0,.2,1);
    }
    html { scroll-behavior: smooth; }
    body { font-family:'Cairo','Tajawal',sans-serif; background:var(--white); color:var(--ink); direction:ltr; line-height:1.85; -webkit-font-smoothing:antialiased; }

    #progress-bar { position:fixed; top:0; right:0; left:0; height:3px; z-index:300; }
    #progress-fill { height:100%; width:0%; background:linear-gradient(to left,#1a6fb5,#2196f3,#d4a017); transition:width .1s linear; }

    nav { background:rgba(255,255,255,.97); backdrop-filter:blur(20px); border-bottom:1px solid var(--border); padding:0 56px; display:flex; align-items:center; justify-content:space-between; height:64px; position:sticky; top:0; z-index:200; }
    .nav-logo { display:flex; align-items:center; gap:10px; text-decoration:none; }
    .logo-name { font-size:20px; font-weight:900; letter-spacing:-0.5px; }
    .logo-name .logo-sa { color:var(--ink); }
    .logo-name .logo-hl { color:var(--blue); }
    .nav-center { display:flex; align-items:center; gap:2px; }
    .nav-link { text-decoration:none; color:var(--ink-muted); font-weight:600; font-size:14px; padding:6px 14px; border-radius:var(--radius-sm); transition:all var(--transition); }
    .nav-link:hover { color:var(--blue); background:var(--blue-pale); }
    .nav-link.active { color:var(--blue); font-weight:700; background:var(--blue-tint); }
    .nav-actions { display:flex; align-items:center; gap:8px; }
    .btn-ghost { padding:7px 16px; border-radius:var(--radius-sm); border:1px solid var(--border); background:transparent; color:var(--ink-soft); font-family:'Cairo',sans-serif; font-weight:600; font-size:13px; cursor:pointer; transition:all var(--transition); text-decoration:none; display:inline-flex; align-items:center; gap:6px; }
    .btn-ghost:hover { border-color:var(--blue); color:var(--blue); }
    .btn-primary { padding:8px 20px; border-radius:var(--radius-sm); background:var(--blue); color:white; font-family:'Cairo',sans-serif; font-weight:700; font-size:13px; border:none; cursor:pointer; transition:all var(--transition); text-decoration:none; display:inline-flex; align-items:center; gap:6px; }
    .btn-primary:hover { background:var(--blue-dark); transform:translateY(-1px); }

    .hamburger { display:none; background:none; border:none; cursor:pointer; padding:8px; flex-direction:column; gap:5px; border-radius:var(--radius-sm); }
    .hamburger span { display:block; width:22px; height:2px; background:var(--ink); border-radius:2px; transition:all .3s ease; }
    .hamburger.open span:nth-child(1) { transform:translateY(7px) rotate(45deg); }
    .hamburger.open span:nth-child(2) { opacity:0; }
    .hamburger.open span:nth-child(3) { transform:translateY(-7px) rotate(-45deg); }
    .mobile-nav-overlay { display:none; position:fixed; inset:0; z-index:150; background:rgba(0,0,0,.4); }
    .mobile-nav-overlay.open { display:block; }
    .mobile-nav-drawer { position:fixed; top:64px; right:0; left:0; z-index:160; background:var(--white); border-bottom:1px solid var(--border); padding:16px; display:flex; flex-direction:column; gap:4px; transform:translateY(-110%); transition:transform .3s cubic-bezier(.4,0,.2,1); box-shadow:var(--shadow-lg); }
    .mobile-nav-drawer.open { transform:translateY(0); }
    .mobile-nav-drawer .nav-link { display:block; padding:12px 16px; font-size:15px; }
    .mobile-nav-drawer .nav-actions { display:flex; gap:8px; padding:12px 0 4px; border-top:1px solid var(--border); margin-top:8px; }
    .mobile-nav-drawer .btn-ghost,.mobile-nav-drawer .btn-primary { flex:1; justify-content:center; padding:10px; }

    .breadcrumb-bar { background:var(--surface); border-bottom:1px solid var(--border); padding:11px 56px; display:flex; align-items:center; gap:6px; font-size:12.5px; color:var(--ink-muted); flex-wrap:wrap; }
    .breadcrumb-bar a { color:var(--blue); text-decoration:none; font-weight:600; }
    .bc-sep { color:var(--border); font-size:9px; }

    .article-hero { max-width:1200px; margin:36px auto 0; background:var(--white); border:1px solid var(--border); border-radius:var(--radius-xl) var(--radius-xl) 0 0; overflow:hidden; }
    .hero-top-accent { height:3px; background:linear-gradient(to left,var(--blue),#64b5f6,var(--gold)); }
    .hero-inner { display:grid; grid-template-columns:1fr auto; padding:52px 56px 48px; align-items:center; }
    .hero-category { display:inline-flex; align-items:center; gap:7px; background:var(--blue-pale); border:1px solid var(--blue-tint); color:var(--blue); font-size:12px; font-weight:700; padding:4px 12px; border-radius:30px; margin-bottom:18px; }
    .hero-title { font-size:38px; font-weight:900; line-height:1.25; color:var(--ink); margin-bottom:14px; letter-spacing:-0.8px; }
    .hero-title em { color:var(--blue); font-style:normal; }
    .hero-subtitle { font-size:16px; color:var(--ink-muted); font-weight:400; margin-bottom:30px; max-width:520px; line-height:1.7; }
    .hero-meta { display:flex; align-items:center; flex-wrap:wrap; }
    .hero-meta-item { display:flex; align-items:center; gap:5px; font-size:12.5px; color:var(--ink-muted); font-weight:500; padding:5px 14px; border-right:1px solid var(--border); }
    .hero-meta-item:first-child { padding-left:0; }
    .hero-meta-item:last-child { border-right:none; }
    .hero-meta-item i { color:var(--blue); font-size:11px; }
    .hero-visual { display:flex; align-items:center; background:var(--surface); border:1px solid var(--border); border-radius:var(--radius-lg); overflow:hidden; margin-left:20px; }
    .concept-block { display:flex; flex-direction:column; align-items:center; padding:28px 32px; gap:10px; }
    .concept-block.left { background:#eef5fd; }
    .concept-block.right { background:#fdf8ec; }
    .concept-icon { font-size:32px; }
    .concept-block.left .concept-icon { color:var(--blue); }
    .concept-block.right .concept-icon { color:var(--gold); }
    .concept-name { font-size:11px; font-weight:700; color:var(--ink-muted); text-align:center; }
    .vs-divider { display:flex; align-items:center; justify-content:center; width:40px; background:var(--white); border-right:1px solid var(--border); border-left:1px solid var(--border); flex-shrink:0; }
    .vs-pill { width:30px; height:30px; border-radius:50%; background:var(--ink); color:white; font-size:8px; font-weight:800; display:flex; align-items:center; justify-content:center; }

    .page-wrap { max-width:1200px; margin:0 auto 80px; display:grid; grid-template-columns:1fr 320px; border:1px solid var(--border); border-top:none; border-radius:0 0 var(--radius-xl) var(--radius-xl); overflow:hidden; }
    .article-card { background:var(--white); padding:48px 52px; border-right:1px solid var(--border); animation:fadeUp .45s ease both; min-width:0; }
    @keyframes fadeUp { from{opacity:0;transform:translateY(16px)} to{opacity:1;transform:translateY(0)} }

    .cours-section-title { font-size:28px; font-weight:900; color:var(--ink); margin-bottom:8px; letter-spacing:-0.5px; }
    .cours-section-title em { color:var(--blue); font-style:normal; }
    .cours-section-sub  { font-size:15px; color:var(--ink-muted); margin-bottom:36px; line-height:1.7; }
    .cours-body { font-family:'Cairo','Tajawal',sans-serif; font-size:14.5px; color:var(--ink-soft); line-height:1.9; }
    .cours-body p { margin-bottom:14px; text-align:justify; }

    .cours-h1 { display:block; font-size:17px; font-weight:800; padding:8px 18px; border-radius:var(--radius-sm); margin:32px 0 16px; line-height:1.4; }
    .cours-h1.red    { background:#fff3f3; color:#b71c1c; border-left:4px solid #e53935; }
    .cours-h1.green  { background:#e8f5e9; color:#1b5e20; border-left:4px solid #388e3c; }
    .cours-h1.blue   { background:var(--blue-pale); color:var(--blue-dark); border-left:4px solid var(--blue); }
    .cours-h1.olive  { background:#f4f8e8; color:#4e342e; border-left:4px solid #8bc34a; }
    .cours-h1.gold   { background:#fffde7; color:#7c4500; border-left:4px solid var(--gold); }
    .cours-h1.purple { background:#f5f0ff; color:#4a0072; border-left:4px solid #7b1fa2; }
    .cours-h1.teal   { background:#e0f7fa; color:#00695c; border-left:4px solid #00897b; }
    .cours-h1.orange { background:#fff8e1; color:#7c4700; border-left:4px solid #fb8c00; }
    .cours-h1.sub    { font-size:14.5px; margin-top:14px; margin-bottom:10px; }

    .cours-key  { display:block; background:#fffde7; border:1px solid #ffe082; border-radius:var(--radius-sm); padding:12px 18px; margin:14px 0; font-size:13.5px; color:#5d4037; font-weight:600; line-height:1.7; }
    .cours-info { background:var(--blue-pale); border:1px solid var(--blue-tint); border-radius:var(--radius); padding:18px 22px; margin:20px 0; font-size:13.5px; color:var(--ink-soft); line-height:1.75; }
    .cours-info strong { color:var(--blue-dark); }
    .cours-alert{ background:#fff3e0; border:1px solid #ffe0b2; border-radius:var(--radius); padding:14px 20px; margin:16px 0; font-size:13.5px; color:#5d2e00; line-height:1.7; }
    .cours-divider { border:none; border-top:2px solid var(--border); margin:38px 0; }

    .cours-arrow { display:flex; gap:10px; align-items:flex-start; margin:8px 0; }
    .cours-arrow-icon { color:var(--blue); font-size:13px; margin-top:5px; flex-shrink:0; }
    .cours-arrow-icon.red    { color:#c62828; }
    .cours-arrow-icon.green  { color:#2e7d32; }
    .cours-arrow-icon.purple { color:#7b1fa2; }

    .term { display:inline-block; background:var(--blue-pale); color:var(--blue-dark); font-weight:700; font-size:13px; padding:2px 9px; border-radius:20px; border:1px solid var(--blue-tint); }
    .term.red    { background:#fff0f0; color:#b71c1c; border-color:#fcc; }
    .term.green  { background:#f0fdf4; color:#166534; border-color:#bbf7d0; }
    .term.purple { background:#f5f0ff; color:#4a0072; border-color:#e1bee7; }
    .term.gold   { background:#fffde7; color:#7c4500; border-color:#ffe082; }

    .phase-grid { display:grid; grid-template-columns:1fr 1fr 1fr; gap:14px; margin:20px 0; }
    .phase-card { border-radius:var(--radius); padding:18px 16px; border:1px solid var(--border); }
    .phase-card.p1 { background:#fff3f3; border-color:#fecdd3; }
    .phase-card.p2 { background:#e8f5e9; border-color:#c8e6c9; }
    .phase-card.p3 { background:#f5f0ff; border-color:#e1bee7; }
    .phase-title { font-size:13px; font-weight:800; margin-bottom:8px; }
    .phase-card.p1 .phase-title { color:#b71c1c; }
    .phase-card.p2 .phase-title { color:#1b5e20; }
    .phase-card.p3 .phase-title { color:#4a0072; }
    .phase-body  { font-size:12px; color:var(--ink-soft); line-height:1.65; }

    .racine-grid { display:grid; grid-template-columns:1fr 1fr; gap:16px; margin:20px 0; }
    .racine-card { border-radius:var(--radius); padding:20px 18px; border:1px solid var(--border); }
    .racine-card.dorsale  { background:#fff3f3; border-color:#fecdd3; }
    .racine-card.ventrale { background:#e8f5e9; border-color:#c8e6c9; }
    .racine-title { font-size:14px; font-weight:800; margin-bottom:10px; display:flex; align-items:center; gap:8px; }
    .racine-card.dorsale .racine-title  { color:#b71c1c; }
    .racine-card.ventrale .racine-title { color:#1b5e20; }
    .racine-body { font-size:13px; color:var(--ink-soft); line-height:1.7; }

    .synapse-compare { display:grid; grid-template-columns:1fr 1fr; gap:16px; margin:18px 0; }
    .syn-card { border-radius:var(--radius); padding:18px 16px; border:1px solid var(--border); text-align:center; }
    .syn-card.excit { background:#e8f5e9; border-color:#c8e6c9; }
    .syn-card.inhib { background:#fff3f3; border-color:#fecdd3; }
    .syn-card-title { font-size:14px; font-weight:800; margin-bottom:8px; }
    .syn-card.excit .syn-card-title { color:#1b5e20; }
    .syn-card.inhib .syn-card-title { color:#b71c1c; }
    .syn-card-body  { font-size:12.5px; color:var(--ink-soft); line-height:1.65; }

    .cours-img-wrap { text-align:center; margin:22px 0; }
    .cours-img-wrap img { max-width:100%; height:auto; border-radius:var(--radius); border:1px solid var(--border); box-shadow:var(--shadow-sm); display:inline-block; }
    .cours-img-caption { font-size:11.5px; color:var(--ink-faint); margin-top:7px; font-style:italic; }
    .cours-img-row { display:flex; gap:16px; justify-content:center; align-items:flex-start; flex-wrap:wrap; margin:20px 0; }
    .cours-img-row figure { flex:1; min-width:160px; max-width:320px; text-align:center; }
    .cours-img-row figure img { width:100%; border-radius:var(--radius-sm); border:1px solid var(--border); box-shadow:var(--shadow-sm); }
    .cours-img-row figure figcaption { font-size:11px; color:var(--ink-faint); margin-top:5px; font-style:italic; }

    .formula-box { background:#1e293b; color:#e2e8f0; border-radius:var(--radius); padding:18px 24px; margin:16px 0; font-family:monospace; font-size:14px; line-height:1.8; }
    .formula-box .val { color:#7dd3fc; font-weight:700; }
    .formula-box .label { color:#94a3b8; font-size:12px; }

    /* ── BILAN CARDS ── */
    .bilan-section { margin:32px 0 0; }
    .bilan-cards-label { font-size:11px; letter-spacing:1.2px; color:var(--ink-faint); text-transform:uppercase; margin-bottom:6px; display:flex; align-items:center; gap:6px; }
    .bilan-cards-title { font-size:18px; font-weight:900; color:var(--ink); margin-bottom:5px; }
    .bilan-cards-title em { color:var(--blue); font-style:normal; }
    .bilan-cards-desc { font-size:13px; color:var(--ink-muted); margin-bottom:20px; line-height:1.6; }
    .bilan-cards-row { display:grid; grid-template-columns:1fr 18px 1fr 18px 1fr 18px 1fr; align-items:start; gap:5px; }
    .bc-card { border-radius:var(--radius); border:1px solid var(--border); background:var(--white); overflow:hidden; text-decoration:none; display:block; transition:box-shadow var(--transition),transform var(--transition); }
    .bc-card:hover { box-shadow:var(--shadow); transform:translateY(-2px); }
    .bc-icon-zone { width:100%; height:108px; display:flex; align-items:center; justify-content:center; position:relative; }
    .bc-icon-zone.c1 { background:#eef5fd; }
    .bc-icon-zone.c2 { background:#e8f5e9; }
    .bc-icon-zone.c3 { background:#fff8e1; }
    .bc-icon-zone.c4 { background:#f3e8ff; }
    .bc-icon-zone i.bi { font-size:38px; }
    .bc-icon-zone.c1 i.bi { color:var(--blue); }
    .bc-icon-zone.c2 i.bi { color:#2e7d32; }
    .bc-icon-zone.c3 i.bi { color:#f59e0b; }
    .bc-icon-zone.c4 i.bi { color:#7c3aed; }
    .bc-step { position:absolute; top:9px; left:9px; background:rgba(255,255,255,.92); border:1px solid rgba(0,0,0,.07); border-radius:20px; font-size:10px; font-weight:800; padding:2px 8px; color:var(--ink-soft); }
    .bc-body { padding:11px 13px 13px; }
    .bc-title { font-size:12.5px; font-weight:800; color:var(--ink); margin-bottom:4px; line-height:1.4; }
    .bc-desc { font-size:11px; color:var(--ink-muted); line-height:1.55; margin-bottom:9px; }
    .bc-link { display:inline-flex; align-items:center; gap:5px; font-size:11px; font-weight:800; color:#dc2626; text-decoration:none; }
    .bc-link i { font-size:10px; }
    .bc-arrow { display:flex; align-items:center; justify-content:center; padding-top:52px; }
    .bc-arrow i { font-size:12px; color:var(--border); }

    @media(max-width:700px){
      .bilan-cards-row { grid-template-columns:1fr 1fr; }
      .bc-arrow { display:none; }
    }
    @media(max-width:420px){
      .bilan-cards-row { grid-template-columns:1fr; }
    }

    .author-card { display:flex; gap:14px; align-items:center; background:var(--surface); border:1px solid var(--border); border-radius:var(--radius); padding:20px 22px; margin-top:40px; }
    .author-avatar { width:48px; height:48px; border-radius:50%; background:linear-gradient(135deg,var(--blue),var(--blue-dark)); display:flex; align-items:center; justify-content:center; color:white; font-size:18px; font-weight:800; flex-shrink:0; box-shadow:0 4px 12px rgba(26,111,181,.30); }
    .author-name { font-size:14.5px; font-weight:800; color:var(--ink); display:flex; align-items:center; gap:6px; }
    .author-name i { color:var(--blue); font-size:12px; }
    .author-role { font-size:12px; color:var(--ink-muted); margin-top:2px; }
    .footer-section { margin-top:40px; padding-top:28px; border-top:1px solid var(--border); }
    .fs-label { display:flex; align-items:center; gap:6px; font-size:11px; font-weight:700; color:var(--ink-muted); text-transform:uppercase; letter-spacing:1.5px; margin-bottom:12px; }
    .tags { display:flex; flex-wrap:wrap; gap:7px; }
    .tag { background:var(--surface); color:var(--ink-soft); font-size:12.5px; font-weight:600; padding:5px 13px; border-radius:30px; border:1px solid var(--border); cursor:pointer; transition:all var(--transition); display:flex; align-items:center; gap:5px; }
    .tag:hover { background:var(--blue); color:white; border-color:var(--blue); }
    .share-row { display:flex; align-items:center; gap:8px; margin-top:16px; flex-wrap:wrap; }
    .share-btn { display:inline-flex; align-items:center; gap:7px; padding:9px 15px; border-radius:var(--radius-sm); color:white; font-family:'Cairo',sans-serif; font-size:13px; font-weight:700; cursor:pointer; border:none; transition:transform var(--transition),box-shadow var(--transition); }
    .share-btn:hover { transform:translateY(-2px); box-shadow:var(--shadow-sm); }
    .share-btn.fb { background:#1877f2; }
    .share-btn.wa { background:#25d366; }
    .share-btn.tw { background:#14171a; }
    .share-btn.cp { background:var(--ink-soft); }
    .copy-toast { position:fixed; bottom:28px; left:50%; transform:translateX(-50%) translateY(20px); background:var(--ink); color:white; padding:11px 22px; border-radius:30px; font-size:13.5px; font-weight:600; box-shadow:var(--shadow-lg); z-index:999; display:flex; align-items:center; gap:8px; opacity:0; pointer-events:none; transition:all .3s cubic-bezier(.34,1.3,.64,1); }
    .copy-toast.show { opacity:1; transform:translateX(-50%) translateY(0); }
    .copy-toast i { color:#4ade80; }

    .sidebar { background:var(--surface); padding:32px 24px; display:flex; flex-direction:column; gap:20px; animation:fadeUp .45s .08s ease both; }
    .s-card { background:var(--white); border-radius:var(--radius); border:1px solid var(--border); overflow:hidden; box-shadow:var(--shadow-xs); }
    .s-head { padding:14px 18px; border-bottom:1px solid var(--border); display:flex; align-items:center; gap:8px; font-size:13px; font-weight:800; color:var(--ink); background:var(--surface); }
    .s-head-icon { width:28px; height:28px; border-radius:7px; background:var(--blue); display:flex; align-items:center; justify-content:center; color:white; font-size:11px; }
    .s-body { padding:16px 18px; }
    .cta-s { background:var(--ink); border-radius:var(--radius-lg); padding:28px 22px; text-align:center; position:relative; overflow:hidden; }
    .cta-s-accent { position:absolute; top:0; left:0; right:0; height:3px; background:linear-gradient(to left,var(--blue),#64b5f6,var(--gold)); }
    .cta-s-icon { width:58px; height:58px; border-radius:var(--radius); background:rgba(255,255,255,.08); display:flex; align-items:center; justify-content:center; color:#64b5f6; font-size:26px; margin:0 auto 14px; border:1px solid rgba(255,255,255,.1); }
    .cta-s-title { font-size:16px; font-weight:900; color:white; margin-bottom:8px; }
    .cta-s-text { font-size:12.5px; color:rgba(255,255,255,.6); line-height:1.65; margin-bottom:20px; }
    .cta-s-btn { display:flex; align-items:center; justify-content:center; gap:8px; background:var(--blue); color:white; font-family:'Cairo',sans-serif; font-weight:800; font-size:13.5px; padding:12px; border-radius:var(--radius-sm); text-decoration:none; transition:all var(--transition); }
    .cta-s-btn:hover { background:var(--blue-dark); transform:translateY(-1px); }
    .rel-post { display:flex; gap:12px; align-items:flex-start; padding:12px 0; border-bottom:1px solid var(--border-soft); text-decoration:none; transition:opacity var(--transition); }
    .rel-post:last-child { border-bottom:none; padding-bottom:0; }
    .rel-post:first-child { padding-top:0; }
    .rel-post:hover { opacity:.7; }
    .rel-thumb { width:46px; height:46px; border-radius:var(--radius-sm); flex-shrink:0; display:flex; align-items:center; justify-content:center; font-size:18px; border:1px solid var(--border); }
    .rel-thumb.g1 { background:#eef5fd; color:var(--blue); }
    .rel-thumb.g2 { background:#f3fdf5; color:#166534; }
    .rel-thumb.g3 { background:#fdf8ec; color:var(--gold); }
    .rel-thumb.g4 { background:#fff1f0; color:#c0392b; }
    .rel-title { font-size:12.5px; font-weight:700; color:var(--ink); line-height:1.45; margin-bottom:4px; }
    .rel-date  { font-size:11px; color:var(--ink-faint); display:flex; align-items:center; gap:4px; }
    .toc-list { list-style:none; padding:0; }
    .toc-list li { padding:7px 0; border-bottom:1px solid var(--border-soft); font-size:12.5px; }
    .toc-list li:last-child { border-bottom:none; }
    .toc-list a { color:var(--ink-soft); text-decoration:none; font-weight:600; display:flex; align-items:center; gap:7px; transition:color var(--transition); }
    .toc-list a:hover { color:var(--blue); }
    .toc-num { width:20px; height:20px; border-radius:5px; background:var(--blue); color:white; font-size:10px; font-weight:800; display:flex; align-items:center; justify-content:center; flex-shrink:0; }
    .sidebar-banner { display:block; width:100%; height:160px; border-radius:var(--radius-lg); border:1px solid var(--border); background:url('https://www.sahllearn.org/assets/images/20260413_105252.jpg') center center / cover no-repeat; }
    footer { background:var(--ink); color:rgba(255,255,255,.45); text-align:center; padding:28px; font-size:13px; }
    footer strong { color:#64b5f6; }
    footer i { color:rgba(255,255,255,.3); margin:0 4px; }

    @media(max-width:960px){
      nav{padding:0 16px;} .nav-center,.nav-actions{display:none;} .hamburger{display:flex;}
      .breadcrumb-bar{padding:10px 16px;font-size:11.5px;overflow-x:auto;white-space:nowrap;flex-wrap:nowrap;scrollbar-width:none;}
      .article-hero{margin:12px 12px 0;border-radius:var(--radius-lg) var(--radius-lg) 0 0;}
      .hero-inner{grid-template-columns:1fr;padding:28px 20px 24px;} .hero-visual{display:none;}
      .hero-title{font-size:26px;} .hero-subtitle{font-size:14px;margin-bottom:20px;}
      .hero-meta{display:grid;grid-template-columns:1fr 1fr;border:1px solid var(--border);border-radius:var(--radius-sm);overflow:hidden;}
      .hero-meta-item{padding:8px 12px;font-size:11.5px;border-right:none;border-bottom:1px solid var(--border);}
      .hero-meta-item:nth-child(even){border-left:1px solid var(--border);} .hero-meta-item:nth-last-child(-n+2){border-bottom:none;}
      .page-wrap{grid-template-columns:1fr;margin:0 12px 40px;border-radius:0 0 var(--radius-lg) var(--radius-lg);}
      .article-card{padding:24px 18px;border-right:none;border-bottom:1px solid var(--border);order:1;}
      .sidebar{padding:24px 18px;order:2;}
      .phase-grid,.racine-grid,.synapse-compare{grid-template-columns:1fr;}
      .cours-img-row{flex-direction:column;align-items:center;}
    }
    @media(max-width:480px){
      nav{height:56px;} .mobile-nav-drawer{top:56px;}
      .article-hero{margin:10px 10px 0;} .page-wrap{margin:0 10px 32px;}
      .hero-title{font-size:22px;}
      .article-card{padding:20px 14px;} .sidebar{padding:20px 14px;}
      .hero-meta{grid-template-columns:1fr;}
    }
    /* ── IMAGE MOBILE FIX ── */
.cours-img-wrap img,
.cours-img-row figure img {
  max-width: 100% !important;
  width: 100% !important;
  height: auto !important;
}

.cours-img-row {
  gap: 10px;
}

@media(max-width:960px) {
  .cours-img-wrap img {
    max-width: 100% !important;
    width: 100% !important;
  }

  .cours-img-row {
    flex-direction: column;
    align-items: stretch;
  }

  .cours-img-row figure {
    min-width: unset !important;
    max-width: 100% !important;
    width: 100% !important;
  }

  .cours-img-row figure img {
    width: 100% !important;
    max-width: 100% !important;
  }
}