/* Thème sobre, noble, épuré */
:root {
  --bg: #0b0b0b;      /* fond profond */
  --panel: #101010;   /* panneaux */
  --text: #e8e8e8;    /* texte principal */
  --muted: #9b9b9b;   /* texte secondaire */
  --line: #1a1a1a;    /* bordures fines */
  --accent: #d4af37;  /* doré discret */
}

/* Réglages de base */
* { box-sizing: border-box; }
html, body { height: 100%; }
body { margin: 0; background: var(--bg); color: var(--text); font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif; }
.container { width: min(1140px, 92vw); margin-inline: auto; }

/* En-tête */
.site-header { display: flex; align-items: center; justify-content: space-between; padding: 18px 0; border-bottom: 1px solid var(--line); position: sticky; top: 0; background: rgba(11,11,11,.75); backdrop-filter: saturate(120%) blur(8px); z-index: 10; }
.brand { font-family: "Playfair Display", serif; font-size: 28px; margin: 0; letter-spacing: .3px; }
.topnav a { color: var(--muted); text-decoration: none; margin-left: 16px; }
.topnav a:hover { color: var(--text); }

/* Accroche */
.tagline { margin: 22px 0 18px; color: var(--muted); }
.tagline .accent { color: var(--accent); }

/* Grille 3 colonnes responsive */
.grid3 { display: grid; grid-template-columns: 1fr; gap: 22px; padding: 12px 0 34px; }
@media (min-width: 820px) { .grid3 { grid-template-columns: repeat(3, 1fr); } }

/* Colonnes */
.col { background: linear-gradient(180deg, #111, #0d0d0d); border: 1px solid var(--line); border-radius: 16px; padding: 18px; }
.col h2 { font-family: "Playfair Display", serif; margin: 0 0 4px; font-weight: 600; }
.subtitle { margin: 0 0 12px; color: var(--muted); }

/* Liste de cartes */
.cards { list-style: none; padding: 0; margin: 0; display: grid; gap: 12px; }
.card { display: flex; flex-direction: column; gap: 2px; padding: 14px 16px; border: 1px solid var(--line); border-radius: 14px; background: var(--panel); text-decoration: none; color: inherit; transition: transform .12s ease, border-color .2s ease, box-shadow .2s ease; }
.card:hover { transform: translateY(-1px); border-color: #2a2a2a; box-shadow: 0 10px 28px rgba(0,0,0,.25); }
.card__title { font-weight: 600; }
.card__desc { color: var(--muted); font-size: .95rem; }

/* Pied de page */
.site-footer { border-top: 1px solid var(--line); }
.footer__inner { padding: 18px 0; color: var(--muted); text-align: center; }