/* Mostanad Blog (ANNEX-07 §5.6, §6.6, §7, B.1). Loaded after site.css, in its own layer so it wins over the
   site's components without !important. Pure CSS, logical properties only (French LTR and Arabic RTL share
   every rule), no horizontal scroll from 320 px, tap targets ≥ 44 px, tables scroll in their own box.
   Four themes on <html data-blog-theme>: clair (default), papier, moderne, sombre; each has a dark variant
   (sombre is always dark). Theme options: data-card (flat | raised | outline), data-font (system | serif |
   rounded) and --blog-accent (set by the super admin). Fonts: the self-hosted brand face from site.css (Readex Pro) or
   system fonts: no third-party request. Colours: the Mostanad theme (D-213); "sombre" is the Mostanad dark palette. */
@layer blog {
  /* ---------- Themes ---------- */
  :root {
    --k-accent: var(--blog-accent, var(--color-primary));
    --k-heading-font: inherit;
    --k-heading-weight: 750;
    --k-read: 70ch;
    --k-chip-bg: var(--color-primary-soft);
    --k-chip-fg: var(--color-primary);
    --k-info: #1F5FAD; --k-info-bg: #E8F0FB;
    --k-warning: #8A5A00; --k-warning-bg: #FDF3DC;
    --k-tip: #146C3A; --k-tip-bg: #E5F5EB;
  }
  @media (prefers-color-scheme: light) {
    [data-blog-theme="clair"] { --color-bg: #FFFFFF; --color-surface: #FFFFFF; --color-surface-2: #F4F6F9; }
    [data-blog-theme="papier"] {
      --color-bg: #FBF7EF; --color-surface: #FFFDF8; --color-surface-2: #F4EDE0; --color-border: #E6DCCB;
      --color-text: #2A241D; --color-text-muted: #5B5145; --k-heading-font: Georgia, "Times New Roman", "Noto Naskh Arabic", "Traditional Arabic", serif;
    }
    [data-blog-theme="moderne"] { --color-bg: #F3F6FB; --color-surface: #FFFFFF; --k-heading-weight: 850; }
  }
  @media (prefers-color-scheme: dark) {
    :root { --k-info: #9CC0F0; --k-info-bg: #16263D; --k-warning: #EABC6E; --k-warning-bg: #33290F; --k-tip: #82CB96; --k-tip-bg: #12301F; }
    [data-blog-theme="papier"] { --color-bg: #1C1814; --color-surface: #24201B; --color-surface-2: #2D2822; --color-border: #3A332B; --color-text: #EFE7DA; --color-text-muted: #BFB3A2;
      --k-heading-font: Georgia, "Times New Roman", "Noto Naskh Arabic", "Traditional Arabic", serif; }
    [data-blog-theme="moderne"] { --k-heading-weight: 850; }
  }
  [data-blog-theme="sombre"] {
    color-scheme: dark;
    --color-bg: #0B1A18; --color-surface: #12241F; --color-surface-2: #183029; --color-text: #EAF2EF; --color-text-muted: #A9BDB7;
    --color-border: #23403A; --color-border-input: #6F8C85; --color-primary: #7DBAB0; --color-primary-strong: #ADD5CE; --color-primary-soft: #16322D;
    --color-on-primary: #051F1C; --color-accent: #ECAE4C; --color-accent-soft: #2E2412; --color-on-accent: #16201D; --color-focus: #F0BE66;
    --k-info: #9CC0F0; --k-info-bg: #16263D; --k-warning: #EABC6E; --k-warning-bg: #33290F; --k-tip: #82CB96; --k-tip-bg: #12301F;
    --shadow-soft: 0 1px 2px rgb(0 0 0 / 0.3); --shadow-raised: 0 12px 32px rgb(0 0 0 / 0.45);
  }
  [data-font="serif"] { --k-heading-font: Georgia, "Times New Roman", "Noto Naskh Arabic", "Traditional Arabic", serif; }
  [data-font="rounded"] { --font-ui: ui-rounded, "SF Pro Rounded", "Segoe UI", system-ui, sans-serif; --font-ui-ar: "Segoe UI", Tahoma, system-ui, sans-serif; }
  .blog h1, .blog h2, .blog h3 { font-family: var(--k-heading-font); font-weight: var(--k-heading-weight); }
  .blog { background: var(--color-bg); }

  /* Moderne: coloured category chips per section. */
  [data-blog-theme="moderne"] .k-chip[data-section="papiers"], [data-blog-theme="moderne"] [data-section="papiers"] .k-chip { --k-chip-bg: color-mix(in srgb, var(--cat-blue) 14%, var(--color-surface)); --k-chip-fg: var(--color-text); }
  [data-blog-theme="moderne"] .k-chip[data-section="outils"] { --k-chip-bg: color-mix(in srgb, var(--cat-teal) 16%, var(--color-surface)); --k-chip-fg: var(--color-text); }
  [data-blog-theme="moderne"] .k-chip[data-section="services"] { --k-chip-bg: color-mix(in srgb, var(--cat-violet) 14%, var(--color-surface)); --k-chip-fg: var(--color-text); }
  [data-blog-theme="moderne"] .k-chip[data-section="guides"] { --k-chip-bg: color-mix(in srgb, var(--cat-amber) 18%, var(--color-surface)); --k-chip-fg: var(--color-text); }

  /* ---------- Shell ---------- */
  .blog-top .wrap { gap: var(--space-2); }
  .blog-top .brand { flex: 0 1 auto; min-inline-size: 0; }
  .blog-top .brand > span { display: inline-flex; align-items: baseline; gap: var(--space-2); min-inline-size: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
  /* 320 px phones: brand, language switch and menu fit on one line. */
  @media (width < 420px) { .blog-tag { display: none; } .blog-top .menu > summary { padding-inline: var(--space-2); } .blog-top .wrap { gap: var(--space-1); } }
  .blog-tag { color: var(--k-accent); font-weight: 700; }
  .blog-lang { flex: none; min-inline-size: var(--control-height); }
  @media (width < 600px) { .blog-top .menu { margin-inline-start: 0; } .blog-lang { margin-inline-start: auto; } }
  .menu-panel .search { max-inline-size: none; }
  .blog-main { padding-block-end: var(--space-7); }
  .k-topbar { background: var(--k-accent); color: var(--color-on-primary); font-size: var(--text-sm); font-weight: 600; text-align: center; }
  .k-topbar .wrap { display: flex; align-items: center; justify-content: center; min-block-size: 40px; padding-block: var(--space-2); }
  .k-topbar a { display: inline-flex; align-items: center; min-block-size: 44px; color: inherit; }
  .k-preview-notice { margin: 0; padding: var(--space-2) var(--space-4); background: var(--color-accent); color: var(--color-on-accent); font-weight: 700; text-align: center; }

  /* ---------- Home ---------- */
  .k-hero { padding-block: var(--space-7) var(--space-6); background: linear-gradient(180deg, var(--color-primary-soft), transparent); }
  .k-hero h1 { max-inline-size: 22ch; font-size: var(--text-3xl); }
  .k-lead { max-inline-size: 46rem; margin-block: var(--space-3) var(--space-5); color: var(--color-text-muted); font-size: var(--text-lg); }
  .k-search input { min-block-size: var(--control-height); }
  .k-block { padding-block-start: var(--space-7); }
  .k-block > h2 { margin-block-end: var(--space-4); font-size: var(--text-xl); }
  .k-sections { display: grid; gap: var(--space-4); grid-template-columns: repeat(auto-fit, minmax(min(100%, 230px), 1fr)); padding: 0; list-style: none; }
  .k-section-card { position: relative; padding: var(--space-5); background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-card); border-block-start: 4px solid var(--k-accent); }
  .k-section-card h3 { font-size: var(--text-lg); }
  .k-section-card p { margin-block-start: var(--space-2); color: var(--color-text-muted); }
  .k-strip { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-4); padding: var(--space-6); background: var(--color-primary-soft); border-radius: var(--radius-sheet); }
  .k-strip h2 { font-size: var(--text-xl); }
  .k-strip p { margin-block-start: var(--space-2); color: var(--color-text-muted); }
  @media (width < 480px) { .k-strip .btn { inline-size: 100%; } }

  /* ---------- Cards and lists ---------- */
  .k-grid { display: grid; gap: var(--space-4); grid-template-columns: repeat(auto-fill, minmax(min(100%, 280px), 1fr)); }
  .k-card { position: relative; display: flex; flex-direction: column; gap: var(--space-2); min-inline-size: 0; padding: var(--space-5); background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-card); box-shadow: var(--shadow-soft); }
  [data-card="flat"] .k-card, [data-card="flat"] .k-section-card { background: var(--color-surface-2); border-color: transparent; box-shadow: none; }
  [data-card="outline"] .k-card { box-shadow: none; }
  .k-card:has(a.stretch:hover), .k-card:has(a.stretch:focus-visible) { border-color: var(--k-accent); }
  .k-card-pillar { border-inline-start: 4px solid var(--k-accent); }
  .k-card-title { font-size: var(--text-lg); line-height: 1.35; }
  .k-card-title a { color: var(--color-text); text-decoration: none; }
  .k-card-title a:hover { color: var(--color-primary); text-decoration: underline; }
  a.stretch::after { content: ""; position: absolute; inset: 0; border-radius: inherit; }
  .k-card-text { color: var(--color-text-muted); font-size: var(--text-sm); }
  .k-card-meta { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); }
  .k-card-foot { margin-block-start: auto; color: var(--color-text-muted); font-size: var(--text-xs); }
  .k-chip { display: inline-flex; align-items: center; gap: var(--space-1); padding: 2px var(--space-3); background: var(--k-chip-bg); color: var(--k-chip-fg); border-radius: var(--radius-pill); font-size: var(--text-xs); font-weight: 650; text-decoration: none; }
  .k-badge { display: inline-flex; padding: 2px var(--space-2); background: var(--color-accent-soft); color: var(--color-text); border-radius: var(--radius-pill); font-size: var(--text-xs); font-weight: 700; }
  .k-page-head { padding-block-end: var(--space-4); }
  .k-page-head .k-search { margin-block-start: var(--space-4); }
  .k-intro { max-inline-size: var(--k-read); margin-block-start: var(--space-4); color: var(--color-text-muted); }
  .k-intro > * + * { margin-block-start: var(--space-3); }
  .k-results { margin-block-start: var(--space-3); color: var(--color-text-muted); }
  .k-filters ul { display: flex; flex-wrap: wrap; gap: var(--space-2); padding: 0; margin-block-end: var(--space-5); list-style: none; }
  .k-filters .k-chip { min-block-size: 44px; padding-inline: var(--space-4); font-size: var(--text-sm); }
  .k-count { opacity: 0.75; font-weight: 500; }
  .k-pillar-top { margin-block-end: var(--space-5); }
  .k-pager { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: var(--space-3); margin-block-start: var(--space-6); }
  .k-empty { padding: var(--space-6); background: var(--color-surface); border: 1px dashed var(--color-border); border-radius: var(--radius-card); color: var(--color-text-muted); text-align: center; }
  .k-error .k-search { margin-block-start: var(--space-4); }
  .k-links { display: grid; gap: var(--space-1); grid-template-columns: repeat(auto-fill, minmax(min(100%, 260px), 1fr)); padding: 0; margin-block: var(--space-4); list-style: none; }
  .k-links a { display: flex; align-items: center; min-block-size: 44px; }

  /* ---------- Article ---------- */
  .k-article { padding-block-start: var(--space-5); }
  .k-article-head { max-inline-size: 52rem; }
  .k-article-head h1 { font-size: var(--text-2xl); }
  @media (width >= 960px) { .k-article-head h1 { font-size: clamp(30px, 3.4vw, 42px); } }
  .k-article-meta { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); margin-block-start: var(--space-3); color: var(--color-text-muted); font-size: var(--text-sm); }
  .k-hero-image { margin-block: var(--space-5); max-inline-size: 52rem; aspect-ratio: 3 / 2; overflow: hidden; background: var(--color-surface-2); border: 1px solid var(--color-border); border-radius: var(--radius-card); }
  .k-hero-image img { inline-size: 100%; block-size: 100%; object-fit: contain; }
  .k-article-body { display: grid; gap: var(--space-5); grid-template-columns: minmax(0, 1fr); max-inline-size: 52rem; }
  @media (width >= 1180px) {
    .k-article-body { max-inline-size: none; grid-template-columns: minmax(0, 52rem) minmax(0, 18rem); column-gap: var(--space-7); align-items: start; }
    .k-article-body > * { grid-column: 1; }
    .k-article-body > .k-toc { grid-column: 2; grid-row: 1 / span 6; position: sticky; inset-block-start: calc(var(--header-height) + var(--space-4)); }
  }
  .k-toc { padding: var(--space-4); background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-card); font-size: var(--text-sm); }
  .k-toc h2 { margin-block-end: var(--space-2); font-size: var(--text-md); }
  .k-toc ol { display: grid; gap: var(--space-1); padding-inline-start: var(--space-5); }
  .k-toc a { display: inline-flex; align-items: center; min-block-size: 32px; }

  /* Reading typography: the component library of §5.6, styled by the theme only. */
  .k-post-content { max-inline-size: var(--k-read); font-size: clamp(16px, 1.1vw + 12px, 18px); line-height: 1.75; overflow-wrap: anywhere; }
  :lang(ar) .k-post-content { line-height: 1.95; }
  .k-post-content > * + * { margin-block-start: var(--space-4); }
  .k-post-content h2 { margin-block-start: var(--space-7); font-size: var(--text-xl); scroll-margin-block-start: calc(var(--header-height) + var(--space-4)); }
  .k-post-content h3 { margin-block-start: var(--space-5); font-size: var(--text-lg); }
  .k-post-content ul, .k-post-content ol { padding-inline-start: var(--space-5); }
  .k-post-content li + li { margin-block-start: var(--space-2); }
  .k-post-content a { overflow-wrap: anywhere; }
  .k-post-content a.k-official::after, .k-sources a.k-official::after { content: "↗"; display: inline-block; margin-inline-start: 0.2em; font-size: 0.85em; }
  :dir(rtl) .k-post-content a.k-official::after, :dir(rtl) .k-sources a.k-official::after { scale: -1 1; }
  .k-table-wrap { max-inline-size: 100%; overflow-x: auto; border: 1px solid var(--color-border); border-radius: var(--radius-control); background: var(--color-surface); }
  .k-table-wrap:focus-visible { outline: 3px solid var(--color-accent); }
  .k-table { inline-size: 100%; min-inline-size: 28rem; font-size: var(--text-sm); }
  .k-table caption { padding: var(--space-2) var(--space-3); color: var(--color-text-muted); text-align: start; }
  .k-table th, .k-table td { padding: var(--space-2) var(--space-3); border-block-end: 1px solid var(--color-border); text-align: start; vertical-align: top; }
  .k-table thead th { background: var(--color-surface-2); font-weight: 700; }
  .k-callout { padding: var(--space-4); border-inline-start: 4px solid var(--k-c, var(--k-info)); background: var(--k-cbg, var(--k-info-bg)); border-radius: var(--radius-control); }
  .k-callout > * + * { margin-block-start: var(--space-2); }
  .k-callout.k-warning { --k-c: var(--k-warning); --k-cbg: var(--k-warning-bg); }
  .k-callout.k-tip { --k-c: var(--k-tip); --k-cbg: var(--k-tip-bg); }
  .k-steps, .k-post-content .k-steps { counter-reset: k-step; list-style: none; padding-inline-start: 0; }
  .k-steps > li { position: relative; counter-increment: k-step; padding-inline-start: calc(36px + var(--space-3)); min-block-size: 36px; }
  .k-steps > li::before { content: counter(k-step); position: absolute; inset-inline-start: 0; inset-block-start: 0; display: grid; place-items: center; inline-size: 36px; block-size: 36px; background: var(--k-accent); color: var(--color-on-primary); border-radius: 50%; font-weight: 800; }
  .k-steps > li > h3 { margin-block-start: 4px; }
  .k-steps > li + li { margin-block-start: var(--space-5); }
  .k-faq { display: grid; gap: var(--space-2); }
  .k-faq > h2 { margin-block-end: var(--space-2); }
  .k-faq details { background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-control); }
  .k-faq summary { display: flex; align-items: center; min-block-size: 48px; padding: var(--space-2) var(--space-4); cursor: pointer; font-weight: 650; list-style: none; }
  .k-faq summary::-webkit-details-marker { display: none; }
  .k-faq summary::after { content: "+"; margin-inline-start: auto; padding-inline-start: var(--space-3); color: var(--k-accent); font-size: 1.3em; }
  .k-faq details[open] summary::after { content: "−"; }
  .k-faq details > div { padding: 0 var(--space-4) var(--space-4); }
  .k-preview { margin-inline: 0; }
  .k-preview img { inline-size: 100%; block-size: auto; border: 1px solid var(--color-border); border-radius: var(--radius-control); background: var(--color-surface-2); }
  .k-preview figcaption { margin-block-start: var(--space-2); color: var(--color-text-muted); font-size: var(--text-sm); text-align: center; }
  .k-cta { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-3); padding: var(--space-5); background: var(--color-primary-soft); border: 1px solid color-mix(in srgb, var(--color-primary) 25%, transparent); border-radius: var(--radius-card); }
  .k-cta p { flex: 1 1 16rem; font-weight: 650; }
  @media (width < 480px) { .k-cta .btn { inline-size: 100%; } }
  .k-disclaimer { padding: var(--space-4); border-inline-start: 4px solid var(--color-accent); background: color-mix(in srgb, var(--color-accent) 10%, var(--color-surface)); border-radius: var(--radius-control); color: var(--color-text); font-size: var(--text-sm); }
  .k-promo { display: flex; flex-wrap: wrap; gap: var(--space-4); align-items: center; padding: var(--space-5); background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-card); box-shadow: var(--shadow-soft); }
  .k-promo img { inline-size: 160px; block-size: auto; border-radius: var(--radius-control); }
  .k-promo h2 { font-size: var(--text-lg); margin: 0; }
  .k-promo p { margin-block: var(--space-2) var(--space-3); color: var(--color-text-muted); }
  .k-sources { padding-block-start: var(--space-4); border-block-start: 1px solid var(--color-border); font-size: var(--text-sm); }
  .k-sources h2 { font-size: var(--text-lg); }
  .k-sources ol { display: grid; gap: var(--space-2); padding-inline-start: var(--space-5); margin-block-start: var(--space-3); }
  .k-sources li > * + * { margin-inline-start: 0.35em; }
  .k-sources a { display: inline-flex; align-items: center; min-block-size: 32px; }
  .k-muted { color: var(--color-text-muted); }
  .k-related h2 { margin-block-end: var(--space-3); font-size: var(--text-lg); }
  .k-children ul { display: grid; gap: var(--space-1); padding: 0; list-style: none; }
  .k-children a, .k-back a { display: inline-flex; align-items: center; min-block-size: 44px; }
  .k-share { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); padding-block: var(--space-4); border-block: 1px solid var(--color-border); }
  .k-share-label { font-weight: 700; margin-inline-end: var(--space-2); }
  .k-share .btn { min-block-size: 44px; }

  /* Small screens: no horizontal scroll from 320 px. */
  @media (width < 400px) {
    .k-hero h1 { font-size: 28px; }
    .k-card, .k-section-card, .k-cta, .k-promo, .k-strip { padding: var(--space-4); }
    .k-table { min-inline-size: 22rem; }
  }
}

/* Print: the article only, with the address of each official source. */
@media print {
  .k-topbar, .blog-top, .foot, .k-share, .k-related, .k-promo, .k-toc, .k-preview-notice, .skip, .k-cta .btn, .sticky-cta { display: none !important; }
  .blog { background: #fff; color: #000; }
  .k-article-body { display: block; max-inline-size: none; }
  .k-post-content { max-inline-size: none; font-size: 12pt; }
  .k-faq details > div { display: block; }
  .k-table-wrap { overflow: visible; border: 0; }
  .k-sources a[href^="http"]::after { content: " (" attr(href) ")"; font-size: 9pt; }
  a { color: #000; }
}