/* ═══════════════════════════════════════════════════════════════
   Pages éditoriales : à propos, blog, charte, contact, 404, légal
═══════════════════════════════════════════════════════════════ */

.static-page { max-width: 1240px; margin: 0 auto; padding: var(--s-7) var(--gutter) var(--s-8); }
.static-page--narrow { max-width: 860px; }

.static-header { padding-bottom: var(--s-6); margin-bottom: var(--s-6); border-bottom: var(--stroke) solid var(--line); }
.static-header h1 { font-size: clamp(2.6rem, 6vw, 5rem); line-height: 0.92; }
.static-lead { font-size: 1.15rem; color: var(--ink-2); max-width: 60ch; margin-top: var(--s-4); }

/* À propos */
.about-blocks { display: grid; grid-template-columns: repeat(3, 1fr); border: var(--stroke) solid var(--line); background: var(--print); margin-bottom: var(--s-7); }
.about-block { padding: var(--s-5); border-right: var(--stroke) solid var(--line); }
.about-block:last-child { border-right: none; }
.about-block .ico { width: 32px; height: 32px; color: var(--red); stroke-width: 1.6; margin-bottom: var(--s-4); }
.about-block h2 { font-size: 1.35rem; margin-bottom: var(--s-3); }
.about-block p { color: var(--ink-2); margin-bottom: var(--s-3); }
.about-values h2 { font-size: 1.8rem; margin-bottom: var(--s-4); }
.values-grid { list-style: none; display: grid; grid-template-columns: 1fr 1fr; border-top: var(--stroke) solid var(--line); }
.value-item { display: flex; gap: var(--s-3); padding: var(--s-4) var(--s-4) var(--s-4) 0; border-bottom: var(--stroke) solid var(--line); font-size: 1.05rem; font-weight: 600; }
.value-num { font-family: var(--font-mono); color: var(--red); flex-shrink: 0; }

/* Blog */
.blog-soon { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: var(--s-4); }
.blog-card { padding: var(--s-5); display: flex; flex-direction: column; gap: var(--s-3); }
.blog-tag { align-self: flex-start; font-family: var(--font-mono); font-size: 0.72rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; padding: 0.2rem 0.55rem; background: var(--ink); color: var(--paper); }
.blog-card h2 { font-size: 1.3rem; }
.blog-card p { color: var(--ink-2); }
.blog-meta { margin-top: auto; font-family: var(--font-mono); font-size: 0.75rem; color: var(--red); text-transform: uppercase; }

/* Charte */
.guidelines-list { list-style: none; counter-reset: rule; border-top: var(--stroke) solid var(--line); }
.guideline-item { display: grid; grid-template-columns: 64px 1fr; gap: var(--s-4); padding: var(--s-5) 0; border-bottom: var(--stroke) solid var(--line); }
.guideline-item .ico { width: 40px; height: 40px; color: var(--red); stroke-width: 1.5; }
.guideline-item h2 { font-size: 1.35rem; margin-bottom: var(--s-2); }
.guideline-item p { color: var(--ink-2); }
.guidelines-foot { margin-top: var(--s-6); padding: var(--s-5); background: var(--ink); color: var(--paper); }
.guidelines-foot p { margin: 0; }

/* Contact */
.contact-cards { display: grid; gap: var(--s-3); }
.contact-card { display: flex; align-items: center; gap: var(--s-4); padding: var(--s-4) var(--s-5); text-decoration: none; color: var(--ink); }
a.contact-card:hover { background: var(--ink); color: var(--paper); }
a.contact-card:hover .contact-label { color: var(--line-soft); }
.contact-card .ico { width: 28px; height: 28px; color: var(--red); }
.contact-label { font-family: var(--font-mono); font-size: 0.72rem; text-transform: uppercase; color: var(--ink-2); }
.contact-value { font-weight: 700; font-size: 1.05rem; overflow-wrap: anywhere; }
.contact-note { margin-top: var(--s-5); padding: var(--s-4) var(--s-5); border: var(--stroke) dashed var(--line); color: var(--ink-2); }

/* 404 */
.notfound { min-height: calc(100vh - var(--nav-h) - 80px); display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: var(--s-7) var(--gutter); }
.notfound-num { font-family: var(--font-display); font-size: clamp(6rem, 20vw, 12rem); line-height: 0.85; color: var(--red); }
.notfound h1 { font-size: clamp(1.8rem, 4vw, 2.8rem); margin: var(--s-4) 0 var(--s-2); }
.notfound p { color: var(--ink-2); margin-bottom: var(--s-5); }

/* Pages légales */
.legal-body { padding: var(--s-6); }
.legal-note { margin-top: var(--s-5); font-size: 0.88rem; color: var(--ink-3); }

@media (max-width: 991px) {
  .about-blocks, .blog-soon { grid-template-columns: 1fr; }
  .about-block { border-right: none; border-bottom: var(--stroke) solid var(--line); }
  .about-block:last-child { border-bottom: none; }
}

@media (max-width: 575px) {
  .static-page { padding: var(--s-5) var(--gutter) var(--s-7); }
  .values-grid { grid-template-columns: 1fr; }
  .guideline-item { grid-template-columns: 44px 1fr; gap: var(--s-3); }
  .guideline-item .ico { width: 32px; height: 32px; }
  .legal-body { padding: var(--s-4); }
}