/* Plateforme d'actualité multi-sites — design tokens
 * Polices : <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Schibsted+Grotesk:ital,wght@0,400..900;1,400..900&display=swap">
 * Les variables --accent* sont réécrites par site (voir [data-site] ci-dessous ou injection PHP dans le <head>). */

:root {
  /* Neutres */
  --paper: #FFFFFF;
  --ink: #111111;
  --ink-2: #5C5F66;
  --ink-3: #8C8F95;
  --line: #E6E6E6;
  --fill: #F3F3F2;
  --input-border: #CFCFCF;
  --danger: #B42318;
  --danger-bg: #FEF3F2;
  --success: #1F7A45;
  --success-bg: #EAF5EE;

  /* Accent (site bleu par défaut) */
  --accent: #1747E0;
  --accent-hover: #1239B8;
  --accent-tint: rgba(23, 71, 224, 0.07);

  /* Typographie — sans serif uniquement */
  --font-d: 'Schibsted Grotesk', 'Noto Sans', system-ui, sans-serif;
  --font-t: 'Schibsted Grotesk', 'Noto Sans', system-ui, sans-serif;
  --fw-d: 700;

  --t-page: clamp(42px, 4vw + 12px, 80px);        /* lh 0.98, ls -0.02em */
  --t-article: clamp(38px, 3.4vw + 12px, 70px);   /* lh 1, ls -0.02em */
  --t-feature: clamp(34px, 2.6vw + 14px, 54px);   /* lh 1.02, ls -0.015em */
  --t-section: clamp(32px, 1.8vw + 18px, 44px);   /* lh 1.02, ls -0.01em */
  --t-cat-head: clamp(28px, 1.2vw + 18px, 38px);  /* lh 1.04 */
  --t-h2-article: 32px;                           /* lh 1.08 */
  --t-quote: clamp(27px, 1.4vw + 16px, 36px);     /* lh 1.18, italique */
  --t-card: 25px;                                 /* lh 1.12 */
  --t-card-row: clamp(20px, 1vw + 13px, 27px);    /* lh 1.12 */
  --t-lede: clamp(18px, 0.5vw + 15px, 22px);      /* lh 1.5 */
  --t-body: 19px;                                 /* lh 1.7 */
  --t-excerpt: 16px;                              /* lh 1.5 */
  --t-nav: 16.5px;                                /* 500 */
  --t-meta: 14px;                                 /* italique */
  --t-label: 12px;                                /* 600, capitales, 0.11em */

  /* Formes et effets */
  --radius-pill: 9999px;
  --shadow-menu: 0 18px 40px rgba(17, 17, 17, 0.08);
  --header-bg: rgba(255, 255, 255, 0.97);
  --ease: 150ms ease;

  /* Mise en page */
  --container: 1280px;
  --gutter-x: clamp(16px, 3vw, 32px);
  --layout-gap: 48px;
  --sidebar: 300px;
  --grid-min: 250px;
  --grid-gap-y: 48px;
  --grid-gap-x: 32px;
  --bp-compact: 980px;   /* menu mobile en dessous */
  --bp-ad-mobile: 700px; /* 970×250 → 320×100 en dessous */
}

[data-site="vert"] {
  --accent: #0B7A4E;
  --accent-hover: #08603D;
  --accent-tint: rgba(11, 122, 78, 0.08);
}

[data-site="rouge"] {
  --accent: #D6202C;
  --accent-hover: #B01823;
  --accent-tint: rgba(214, 32, 44, 0.07);
}

html { background: var(--paper); color: var(--ink); font-family: var(--font-t); }
a { color: var(--accent); }
a:hover { color: var(--accent-hover); }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }