/* 1 — FLAT DESIGN (2012)
   Aplats saturés, aucune ombre, angles francs, bandeaux de couleur par section. */
[data-style="flat"] {
  --bg: #ffffff;
  --bg-2: #eef2f7;
  --surface: #ffffff;
  --text: #17203a;
  --muted: #4a5670;
  --accent: #1d4ed8;
  --accent-ink: #ffffff;
  --accent-2: #f5b301;
  --border: #d8deea;
  --radius: 4px;
  --radius-lg: 6px;
  --shadow: none;
  --shadow-lg: none;
  --font-body: "Inter", system-ui, sans-serif;
  --font-display: "Inter", system-ui, sans-serif;
  --display-weight: 800;
  --display-tracking: -0.03em;
}

/* Bandeau hero plein aplat */
[data-style="flat"] .hero, [data-style="flat"] .section, [data-style="flat"] .cta { width: 100%; max-width: none; padding-inline: max(var(--gutter), calc((100% - var(--container)) / 2)); }
[data-style="flat"] .hero { background: var(--accent); color: #fff; }
[data-style="flat"] .hero .eyebrow { color: #cfe0ff; }
[data-style="flat"] .hero-title .accent-line { color: var(--accent-2); }
[data-style="flat"] .lead { color: #e2ebff; }
[data-style="flat"] .hero .btn-primary { background: var(--accent-2); color: #17203a; }
[data-style="flat"] .hero .btn-ghost { color: #fff; border-color: rgba(255,255,255,.55); }
[data-style="flat"] .hero .btn-ghost:hover { background: rgba(255,255,255,.12); }
[data-style="flat"] .fact { background: #1640b8; border: 0; border-bottom: 4px solid var(--accent-2); color: #fff; }
[data-style="flat"] .fact dt { color: #cfe0ff; }
[data-style="flat"] .hero-note { color: #dbe6ff; border-color: var(--accent-2); }
[data-style="flat"] .hero kbd { background: #fff; color: #17203a; border-color: #fff; }

/* Sections en bandes alternées */
[data-style="flat"] #histoire { background: #fff; }
[data-style="flat"] #programme { background: var(--bg-2); }
[data-style="flat"] #projets { background: #fff; }
[data-style="flat"] #apres { background: #17203a; color: #fff; }
[data-style="flat"] #apres .section-intro, [data-style="flat"] #apres .paths-note { color: #c5cde0; }
[data-style="flat"] #apres .eyebrow { color: var(--accent-2); }
[data-style="flat"] #apres .card { background: #222d4d; border: 0; color: #fff; border-top: 4px solid #4d7dff; }
[data-style="flat"] #apres .card p { color: #c5cde0; }

/* Cartes : bordure basse colorée, pas d'ombre */
[data-style="flat"] .card { border: 0; border-bottom: 4px solid var(--accent); }
[data-style="flat"] #programme .card { background: #fff; }
[data-style="flat"] .project:nth-child(3n+1) { border-color: #1d4ed8; }
[data-style="flat"] .project:nth-child(3n+2) { border-color: #e8467c; }
[data-style="flat"] .project:nth-child(3n+3) { border-color: #f5b301; }
[data-style="flat"] .project:nth-child(3n+2) .project-tag { color: #c72b62; }
[data-style="flat"] .project:nth-child(3n+3) .project-tag { color: #9a6d00; }

/* Timeline : année dans un carré plein */
[data-style="flat"] .tl-item { border-color: var(--border); }
[data-style="flat"] .tl-year { display: inline-grid; place-items: center; width: 4.25rem; height: 2.25rem; background: var(--accent); color: #fff; font-size: .95rem; padding: 0; }
[data-style="flat"] .tl-item.is-key .tl-year { background: var(--accent-2); color: #17203a; }

[data-style="flat"] .cta { background: var(--accent-2); color: #17203a; }
[data-style="flat"] .cta p { color: #5b4a10; }
[data-style="flat"] .cta .btn-primary { background: #17203a; color: #fff; }

[data-style="flat"] .site-head { border-bottom-width: 3px; border-color: var(--accent); }
[data-style="flat"] .site-foot { border-top: 0; background: #17203a; color: #c5cde0; }
[data-style="flat"] .site-foot .live-attr { color: var(--accent-2); }

[data-style="flat"] .lab-inner { border: 0; border-top: 4px solid var(--accent); }
[data-style="flat"] .key { border: 0; background: var(--bg-2); }
[data-style="flat"] .key:hover { transform: none; background: #dfe6f2; }