/* ═══════════════════════════════════════════════════════════════ BLOG INDEX · Liste des articles ─────────────────────────────────────────────────────────────── Style papier ivoire cohérent avec la landing. Aucun mode sombre : data-theme="light" forcé sur . ═══════════════════════════════════════════════════════════════ */ .blog-page { max-width: 1100px; margin: 0 auto; padding: 56px 24px 80px; } /* ─── Header ──────────────────────────────────────────────────── */ .blog-head { margin-bottom: 48px; padding-bottom: 32px; border-bottom: 1px solid rgba(15,20,36,0.08); } .blog-head h1 { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin: 0 0 16px 0; font-family: var(--font-heading, 'Montserrat', sans-serif); font-weight: 600; font-size: clamp(28px, 3.2vw, 38px); line-height: 1.15; letter-spacing: 0.004em; color: #1a2238; } .blog-sigil { width: 28px; height: 28px; color: #c9a36a; flex-shrink: 0; } .blog-title-main { font-weight: 600; } .blog-title-sep { font-weight: 300; color: #b3b9c4; margin: 0 4px; } .blog-title-em { font-style: italic; font-weight: 400; font-size: 0.88em; color: #1a2238; } .blog-head-desc { max-width: 720px; margin: 0; font-family: 'Inter', sans-serif; font-size: 16px; line-height: 1.65; color: #2d3a52; } /* ─── Grille articles ─────────────────────────────────────────── */ .blog-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(330px, 1fr)); gap: 24px; margin-bottom: 64px; } .blog-card { display: flex; flex-direction: column; gap: 14px; padding: 28px 26px 24px; background: #ffffff; border: 1px solid rgba(15,20,36,0.10); border-radius: 10px; text-decoration: none; color: inherit; transition: border-color 0.18s ease, transform 0.18s ease, box-shadow 0.18s ease; } .blog-card:hover, .blog-card:focus-visible { border-color: rgba(201,163,106,0.45); transform: translateY(-2px); box-shadow: 0 12px 28px rgba(15,20,36,0.08); outline: none; } .blog-card:focus-visible { box-shadow: 0 0 0 3px rgba(201,163,106,0.30), 0 12px 28px rgba(15,20,36,0.08); } .blog-card-date { font-family: 'JetBrains Mono', monospace; font-size: 12px; font-weight: 500; letter-spacing: 0.04em; text-transform: uppercase; color: #6b7484; } .blog-card-title { margin: 0; font-family: var(--font-heading, 'Montserrat', sans-serif); font-weight: 600; font-size: 18px; line-height: 1.32; color: #1a2238; letter-spacing: 0.002em; } .blog-card-excerpt { margin: 0; font-family: 'Inter', sans-serif; font-size: 14.5px; line-height: 1.6; color: #5a6478; flex-grow: 1; } .blog-card-cta { display: inline-flex; align-items: center; gap: 6px; margin-top: 4px; font-family: 'Inter', sans-serif; font-size: 13.5px; font-weight: 600; color: #8d6f3a; letter-spacing: 0.01em; transition: gap 0.18s ease; } .blog-card:hover .blog-card-cta, .blog-card:focus-visible .blog-card-cta { gap: 10px; color: #8d6f3a; } .blog-card-arrow { transition: transform 0.18s ease; } .blog-card:hover .blog-card-arrow { transform: translateX(2px); } /* ─── Footer de la page blog ──────────────────────────────────── */ .blog-foot { padding-top: 32px; border-top: 1px solid rgba(15,20,36,0.06); text-align: center; } .blog-foot-line { margin: 0; font-family: 'Inter', sans-serif; font-size: 14px; line-height: 1.6; color: #6b7484; font-style: italic; } /* ─── Skip link ───────────────────────────────────────────────── */ .skip-link { position: absolute; left: -9999px; top: auto; width: 1px; height: 1px; overflow: hidden; } .skip-link:focus { position: fixed; top: 12px; left: 12px; width: auto; height: auto; padding: 10px 16px; background: #1a2238; color: #ffffff; border-radius: 6px; font-family: 'Inter', sans-serif; font-size: 14px; font-weight: 500; z-index: 9999; text-decoration: none; } /* ─── Responsive ──────────────────────────────────────────────── */ @media (max-width: 640px) { .blog-page { padding: 40px 20px 64px; } .blog-head { margin-bottom: 36px; padding-bottom: 24px; } .blog-head h1 { font-size: 26px; gap: 10px; } .blog-sigil { width: 24px; height: 24px; } .blog-grid { grid-template-columns: 1fr; gap: 18px; } .blog-card { padding: 24px 22px 22px; } .blog-card-title { font-size: 17px; } }