/* RugbyPop - Feuille commune des pages servies par le serveur
   ════════════════════════════════════════════════════════════════════════
   Pages : /comment-ca-marche.html, /legal/** (FR et EN), /actu/<slug> (actu.php).
   Audit du 13/10/2026, G14 : ces pages avaient la police du système et une
   palette recopiée qui avait dérivé. Elles reprennent ici les jetons de l'appli.

   COPIE FIDÈLE de app/src/ds/tokens/colors.css et typography.css (bloc :root,
   mêmes noms de variables, mêmes valeurs). Si l'un de ces fichiers change,
   reporter la valeur ici : ces pages ne passent pas par Vite.

   Polices : sous-ensemble latin des paquets @fontsource 5.3.0, copiés dans
   /static/fonts/ avec un numéro de version dans le nom (fichiers immutables
   1 an, voir .htaccess). Nouvelle version d'une police = nouveau nom (-v2).
   Graisses réellement utilisées : Archivo 700 et 800, Hanken Grotesk 400, 600, 700.

   Cette feuille n'a pas d'empreinte : elle est appelée avec ?v=N et servie
   en no-cache par .htaccess. Augmenter N à chaque modification.
   ════════════════════════════════════════════════════════════════════════ */

/* ── Polices (latin : français, anglais, œ, guillemets, espaces fines) ── */
@font-face {
  font-family: 'Archivo';
  font-style: normal;
  font-display: swap;
  font-weight: 700;
  src: url(/static/fonts/archivo-latin-700-v1.woff2) format('woff2');
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face {
  font-family: 'Archivo';
  font-style: normal;
  font-display: swap;
  font-weight: 800;
  src: url(/static/fonts/archivo-latin-800-v1.woff2) format('woff2');
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face {
  font-family: 'Hanken Grotesk';
  font-style: normal;
  font-display: swap;
  font-weight: 400;
  src: url(/static/fonts/hanken-grotesk-latin-400-v1.woff2) format('woff2');
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face {
  font-family: 'Hanken Grotesk';
  font-style: normal;
  font-display: swap;
  font-weight: 600;
  src: url(/static/fonts/hanken-grotesk-latin-600-v1.woff2) format('woff2');
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face {
  font-family: 'Hanken Grotesk';
  font-style: normal;
  font-display: swap;
  font-weight: 700;
  src: url(/static/fonts/hanken-grotesk-latin-700-v1.woff2) format('woff2');
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}

/* ── Jetons de couleur (copie de colors.css, :root) ── */
:root {
  --bg-base:        #090D18;
  --bg-sunken:      #05070F;
  --surface-1:      #111726;
  --surface-2:      #18203360;
  --surface-card:   #131A2B;
  --surface-raised: #1B2336;
  --surface-hover:  #232C44;
  --surface-sunkenfield: #0C1120;

  --border-subtle:  #1E2640;
  --border-default: #2A3352;
  --border-strong:  #3A456B;
  --border-control: #606C96;

  --text-primary:   #F2F5FF;
  --text-secondary: #9AA6C8;
  --text-tertiary:  #8A95B5;
  --text-inverse:   #0A0E1A;

  --lime-50:   #F3FFD6;
  --lime-100:  #E6FFAd;
  --lime-200:  #DBFF84;
  --lime-300:  #D2FF63;
  --lime-400:  #C8FF4D;
  --lime-500:  #BCF52E;
  --lime-600:  #9FD800;
  --lime-700:  #7BA800;
  --lime-900:  #2E3D08;
  --lime-tint: #C8FF4D14;

  --gold-300:  #FFD480;
  --gold-400:  #FFC44D;
  --gold-500:  #F5A623;
  --gold-600:  #D98A0E;
  --gold-tint: #FFC44D14;

  --charlito-200: #D2BBFF;
  --charlito-300: #BD9BFF;
  --charlito-400: #A56BFF;
  --charlito-500: #8B47F5;
  --charlito-600: #7C3AED;
  --charlito-700: #5B23B8;
  --charlito-tint:#A56BFF1A;

  --win-400:    #34D77B;
  --win-600:    #16A34A;
  --win-tint:   #34D77B1A;
  --loss-400:   #FF5468;
  --loss-600:   #E11D48;
  --loss-tint:  #FF54681A;
  --draw-400:   #F5A623;
  --draw-tint:  #F5A6231A;
  --live-500:   #FF3B47;
  --live-tint:  #FF3B471F;
  --bonus-400:  #BCF52E;
  --celebrate:  #FFC44D;
  --info-400:   #38BDF8;

  --color-bg:            var(--bg-base);
  --color-surface:       var(--surface-card);
  --color-surface-raised:var(--surface-raised);
  --color-primary:       var(--lime-500);
  --color-primary-hover: var(--lime-400);
  --color-primary-press: var(--lime-600);
  --color-on-primary:    var(--text-inverse);
  --color-accent:        var(--gold-400);
  --color-charlito:      var(--charlito-400);
  --color-focus:         var(--lime-400);
  --color-border:        var(--border-default);

  --grad-lime:     linear-gradient(135deg, var(--lime-400) 0%, var(--lime-600) 100%);
  --grad-gold:     linear-gradient(135deg, var(--gold-400) 0%, var(--gold-600) 100%);
  --grad-charlito: linear-gradient(135deg, var(--charlito-400) 0%, var(--charlito-600) 100%);
  --grad-surface:  linear-gradient(180deg, #161E31 0%, #10172700 100%);
  --grad-scrim:    linear-gradient(180deg, #05070F00 0%, #05070FCC 78%, #05070F 100%);
}

/* ── Jetons typographiques (copie de typography.css, :root) ── */
:root {
  --font-display: 'Archivo', system-ui, sans-serif;
  --font-body:    'Hanken Grotesk', system-ui, sans-serif;
  --font-data:    'Archivo', system-ui, sans-serif;

  --fw-regular:  400;
  --fw-medium:   500;
  --fw-semibold: 600;
  --fw-bold:     700;
  --fw-extra:    800;
  --fw-black:    900;

  --fs-display:   56px; --lh-display:   0.96; --ls-display:  -0.02em;
  --fs-h1:        34px; --lh-h1:        1.05; --ls-h1:       -0.015em;
  --fs-h2:        26px; --lh-h2:        1.1;  --ls-h2:       -0.01em;
  --fs-h3:        20px; --lh-h3:        1.18; --ls-h3:       -0.005em;
  --fs-h4:        17px; --lh-h4:        1.25; --ls-h4:        0;
  --fs-body-lg:   17px; --lh-body-lg:   1.5;
  --fs-body:      15px; --lh-body:      1.5;
  --fs-small:     13px; --lh-small:     1.45;
  --fs-caption:   11px; --lh-caption:   1.3;  --ls-caption:   0.06em;
  --fs-data-xl:   40px;
  --fs-data-lg:   22px;
  --fs-data:      15px;
}

/* ── Base commune ── */
:root { color-scheme: dark; }
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--bg-base);
  color: var(--text-primary);
  font-family: var(--font-body);
  font-weight: var(--fw-regular);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}
/* Titres : Archivo, toujours en texte primaire, jamais en vert (le lime est
   réservé aux actions : liens d'appel et boutons). */
h1, h2, h3, h4 { font-family: var(--font-display); font-weight: var(--fw-bold); color: var(--text-primary); }
h1 { font-weight: var(--fw-extra); }
strong, b { font-weight: var(--fw-bold); }
::selection { background: var(--lime-500); color: var(--text-inverse); }
:focus-visible { outline: 3px solid var(--color-focus); outline-offset: 2px; border-radius: 4px; }

/* En-tête à logo (pages légales, page d'explication, article) */
.site-logo { display: inline-flex; align-items: center; }
.site-logo img { display: block; height: 28px; width: auto; }