/* sudoku-blog.css — commun aux 12 pages du blog (index FR/EN + 10 articles FR/EN)
 * Cree le 2026-09-06 par extraction du CSS inline — point 21.
 * A CHARGER APRES sudoku-core.css : plusieurs regles surchargent le core a specificite egale
 * (body, header, .site-sub, .sidebar-footer a, .legal-footer, :root). */

body { font-family: "DM Mono", monospace; padding: 40px 20px 60px; align-items: flex-start; }
header { margin-bottom: 36px; padding: 0 56px; text-align: center; width: 100%; align-self: stretch; }
.site-title { font-family: "Playfair Display", serif; font-size: clamp(2rem, 5vw, 3rem); font-weight: 900; letter-spacing: -1px; background: linear-gradient(135deg, var(--accent) 0%, #f0a500 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; line-height: 1; }
.site-sub { color: var(--muted); font-size: 0.8rem; letter-spacing: 4px; text-transform: uppercase; margin-top: 8px; }
.breadcrumb { font-size: 0.7rem; color: var(--muted); letter-spacing: 2px; margin-top: 10px; }
.breadcrumb a { color: var(--accent-text); text-decoration: none; }
.breadcrumb a:hover { text-decoration: underline; }
.page-layout { display: flex; gap: 32px; width: 100%; max-width: 1100px; align-items: flex-start; position: relative; z-index: 1; }
.sidebar { width: var(--sidebar-w); flex-shrink: 0; position: sticky; top: 20px; }
.sidebar-title { font-size: 0.6rem; letter-spacing: 3px; text-transform: uppercase; color: var(--muted); padding: 0 0 10px 4px; border-bottom: 1px solid var(--border); margin-bottom: 8px; }
.sidebar nav { display: flex; flex-direction: column; gap: 2px; }
.sidebar-sep { height: 1px; background: var(--border); margin: 12px 0; }
.sidebar-footer { margin-top: 16px; padding: 12px; background: var(--surface); border: 1px solid var(--border); border-radius: 4px; font-size: 0.7rem; color: var(--muted); line-height: 1.6; }
.sidebar-footer a { color: var(--accent-text); text-decoration: none; }
.content-area { flex: 1; min-width: 0; }
.content-body strong { color: var(--text); font-weight: 500; }
.legal-footer { margin: 40px auto 0; padding-top: 14px; border-top: 1px solid var(--border); display: flex; justify-content: center; gap: 14px; flex-wrap: wrap; max-width: 640px; opacity: 0.55; width: 100%; }
.legal-footer a, .legal-footer button { font-family: "DM Mono", monospace; font-size: 0.62rem; color: var(--muted); text-decoration: none; background: none; border: none; cursor: pointer; transition: opacity 0.2s; display: inline-block; padding: 7px 6px; margin: -7px -6px; }
.legal-footer a:hover, .legal-footer button:hover { opacity: 1; text-decoration: underline; }
/* Cible tactile (WCAG 2.5.5, audit 12/09), écrans tactiles seuls. */
@media (pointer: coarse) { .legal-footer a, .legal-footer button { padding: 14px 8px; margin: -14px -8px; } }
:root { --sidebar-w: 220px; }

@media (max-width: 700px) {
  body { padding: 20px 12px 60px; }
  header { padding-left: 52px; }
  .page-layout { flex-direction: column; gap: 0; }
  .sidebar { position: relative; top: 0; width: 100%; margin-bottom: 20px; }
  .content-area { width: 100%; }
  :root { --sidebar-w: 100%; }
}