@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,400;0,500;0,600;0,700;1,400;1,500;1,600&family=Source+Sans+3:ital,wght@0,400;0,500;0,600;0,700;1,400&display=swap');
/* ============================================================
   THEME « La Gazette des Clés » — presse-editorial
   Éditorial façon magazine : papier blanc cassé, encre noire,
   un seul rouge vif. Grand serif de presse, filets fins,
   arrondis faibles (2–6 px). Thème 100 % clair : la surface
   de marque est un papier kraft clair, encre noire dessus.
   ============================================================ */

:root {
  /* Surfaces : papier journal */
  --bg: #f4f1ea;           /* fond de page : blanc cassé, papier journal */
  --card: #fbfaf6;         /* cartes : papier couché, à peine plus clair */
  --surface: #e9e5dc;      /* puces et segments doux (nav, onglets) */
  --surface-2: #f5e0da;    /* badge « Propriétaires » : rose de tampon */
  --surface-warm: #e6e0d2; /* badge « Locataires » : papier kraft */

  /* Lignes : filets fins */
  --line: #d8d3c8;
  --input-line: #c9c3b6;
  --line-2: #b8b1a3;
  --line-3: #8e877b;

  /* Texte sur fond clair */
  --ink: #121212;          /* encre : titres et texte fort */
  --text: #3b3833;         /* corps de texte */
  --text-strong: #24221f;
  --muted: #69645b;        /* sur-titres, libellés */
  --warm-ink: #463d2e;     /* texte sur --surface-warm */
  --nav-inactive: #3b3833;

  /* Surface de marque (claire) : papier kraft clair, supplément du week-end */
  --brand-dark: #ddd3bf;

  /* Accents : un seul rouge, en trois intensités */
  --accent: #f4392b;          /* rouge presse vif : boutons pleins, chiffres, mot en évidence */
  --accent-2: #b3211a;        /* rouge encre profond : liens, survol, puces ✳ */
  --accent-on-brand: #9e1b14; /* rouge sang de bœuf : mots en accent posés sur le kraft */

  /* Éléments posés sur --brand-dark (kraft) : encre noire et gris d'encre */
  --on-dark-strong: #121212;
  --on-dark: #121212;
  --on-dark-text: #3b3833;
  --on-dark-muted: #57524a;
  --on-dark-bg: #24221f;
  --on-dark-soft: #2f2c28;
  --on-dark-faint: #5e584e;
  --on-dark-line: #a89e8a;
  --on-dark-card: #f7f4ec;

  --header-bg: rgba(244,241,234,.92);
  --on-dark-border: rgba(18,18,18,.28);

  /* Typographie : serif de presse + sans de lecture */
  --serif: 'Playfair Display', 'Times New Roman', Georgia, serif;
  --sans: 'Source Sans 3', 'Helvetica Neue', Arial, system-ui, sans-serif;

  /* Formes : arrondis faibles, esprit maquette */
  --r-pill: 3px;
  --r-xl: 6px;
  --r-lg: 4px;
  --r-md: 3px;
  --r-sm: 2px;
}

body { margin:0; background:var(--bg); font-family:var(--sans); color:var(--text-strong); }
a:hover { color: var(--accent-2); }