:root { --accent:#1e40af; --accent-dark:#1a368f; --ink:#1c1e21; --bg:#fcfcfa; --muted:#565b63; }
        * { box-sizing:border-box; }
        html { scroll-behavior:smooth; }
        body { font:17px/1.7 system-ui,-apple-system,"Segoe UI",sans-serif; color:var(--ink); background:var(--bg); margin:0;
               /* Sticky footer : le contenu occupe au moins l'écran, le footer reste en bas */
               min-height:100vh; display:flex; flex-direction:column; }
        .wrap { flex:1; width:100%; max-width:1100px; margin:0 auto; padding:1.5rem 2rem; }
        /* Header sticky : la nav reste toujours accessible, mobile inclus */
        header { position:sticky; top:0; z-index:10; background:var(--bg);
                 border-bottom:2px solid var(--accent); margin-bottom:2rem; }
        header h1 a { color:var(--ink); text-decoration:none; }
        header h1 a span { color:var(--accent); }
        .logo { vertical-align:-4px; margin-right:.4rem; border-radius:6px; }
        nav a { color:var(--muted); text-decoration:none; margin-right:1rem; font-size:.95rem; }
        nav a:hover { color:var(--accent); }
        /* Lisibilité : 65-75 caractères par ligne dans la colonne principale */
        main { max-width:70ch; }
        /* Accroche de la page d'accueil */
        .hero-intro { font-size:1.05rem; line-height:1.8; margin:0 0 2rem; padding:1.2rem 1.5rem;
                      border-left:3px solid var(--accent); background:#f4f6fb; border-radius:0 8px 8px 0; }
        article h2 { margin-top:2rem; }
        .meta { color:var(--muted); font-size:.9rem; }
        .tag { display:inline-block; background:#eee; border-radius:6px; padding:0 .5rem; font-size:.8rem; }
        a.tag { color:inherit; text-decoration:none; }
        a.tag:hover { background:var(--accent); color:#fff; }
        .tag.cat { background:#e8edf8; color:#1a368f; }
        a.tag.cat:hover { background:var(--accent); }
        pre { background:#f0f2f4; padding:1rem; border-radius:8px; overflow-x:auto; font-size:.9em; }
        code { background:#f0f2f4; padding:.1rem .3rem; border-radius:4px; }
        pre code { padding:0; }
        blockquote { border-left:3px solid var(--accent); margin:1.2rem 0; padding:.2rem 0 .2rem 1rem; color:var(--muted); }
        table { border-collapse:collapse; margin:1.2rem 0; width:100%; }
        th, td { border:1px solid #ddd; padding:.4rem .6rem; text-align:left; }
        th { background:#f0f2f4; }
        footer { border-top:1px solid #ddd; margin-top:3rem; padding:1rem 0; color:var(--muted); font-size:.85rem; }
        .cards { display:grid; grid-template-columns:repeat(2, 1fr); gap:1rem; }
        .cards a.card { display:flex; gap:1rem; align-items:flex-start; color:inherit; text-decoration:none;
                        border:1px solid #e2e2e2; border-radius:10px; padding:1rem; background:#fff; }
        .cards a.card:hover { border-color:var(--accent); }
        .cards h2 { margin:.2rem 0 .3rem; font-size:1.05rem; }
        .card img.cover { order:2; width:120px; height:90px; object-fit:cover; border-radius:8px; flex:none; }
        .card .card-body { flex:1; min-width:0; }
        article img { max-width:100%; height:auto; border-radius:8px; display:block; margin:1.2rem auto; }
        /* Réservation d'espace -> pas de saut de texte au chargement (CLS) */
        .hero { width:100%; aspect-ratio:16/9; object-fit:cover; }
        .layout { display:grid; grid-template-columns:1fr 280px; gap:2.5rem; align-items:start; }
        .sidebar { border-left:1px solid #e6e6e6; padding-left:1.5rem; font-size:.92rem; }
        .sidebar h3 { font-size:.85rem; text-transform:uppercase; letter-spacing:.05em; color:var(--muted); margin:1.4rem 0 .5rem; }
        .sidebar ul { list-style:none; padding:0; margin:0; }
        .sidebar li { margin:.3rem 0; }
        .sidebar a { color:inherit; text-decoration:none; }
        .sidebar a:hover { color:var(--accent); }
        .sidebar .tag { margin:0 .25rem .25rem 0; }
        .filter-chip { display:inline-block; background:var(--accent); color:#fff; border-radius:6px; padding:.15rem .7rem; font-size:.85rem; text-decoration:none; }
        .filter-chip:hover { background:var(--accent-dark); }
        .crumbs { font-size:.85rem; color:var(--muted); margin-bottom:1.2rem; }
        .crumbs a { color:inherit; text-decoration:none; }
        .crumbs a:hover { color:var(--accent); }
        .crumbs .sep { margin:0 .35rem; opacity:.5; }
        .crumbs span:last-child { color:var(--ink); }
        /* Accessibilité clavier : focus visible */
        a:focus-visible, a.tag:focus-visible, .card:focus-visible { outline:2px solid var(--accent); outline-offset:2px; border-radius:4px; }
        /* Burger mobile de la sidebar : <details> natif, replié sur mobile, déroulé sur desktop */
        .sb-menu summary { cursor:pointer; font-size:.85rem; text-transform:uppercase; letter-spacing:.05em;
                           color:var(--accent); font-weight:600; padding:.4rem 0; }
        .sb-menu summary::marker { content:"▸ "; color:var(--accent); }
        .sb-menu[open] summary::marker { content:"▾ "; }
        @media (min-width:801px) { .sb-menu summary { display:none; } }
        /* Pagination */
        .pagination { display:flex; gap:1rem; align-items:center; justify-content:space-between; margin:2rem 0; font-size:.9rem; }
        .pagination a { text-decoration:none; color:var(--accent); font-weight:600; }
        .pagination a:hover { text-decoration:underline; }
        .pagination .disabled { color:#bbb; }
        @media (max-width:800px) {
            .layout { grid-template-columns:1fr; }
            .sidebar { border-left:none; padding-left:0; border-top:1px solid #ddd; padding-top:1rem; }
            .cards { grid-template-columns:1fr; }
            .wrap { padding:1.5rem; }
        }