/* =====================================================================
   ARTFX / 24 / VIDEO GAMES : kit de marque partage
   https://signature.artfx.fr/brand/artfx-brand.css
   ---------------------------------------------------------------------
   Usage :
     <link rel="stylesheet" href="https://signature.artfx.fr/brand/artfx-brand.css">
     <html data-theme="light|dark|neutral" data-brand="artfx|24|games">
   - Themes  : light (gris clair), dark (noir), neutral (creme #EFEEDA, defaut au premier chargement)
   - Marques : artfx (orange, defaut), 24 (jaune/noir), games (violet/lime)
   - Logos   : <img class="logo-light" ...> visible sur light/neutral,
               <img class="logo-dark"  ...> visible sur dark
   Source charte : ARTFX 2023 (Wokine). Titres Maison Neue, texte Raleway.
   ===================================================================== */

/* ---------- Polices (auto-hebergees) ---------- */
@font-face{font-family:'Maison Neue';src:url('fonts/MaisonNeue-Medium.woff2') format('woff2');font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:'Maison Neue';src:url('fonts/MaisonNeue-MediumItalic.woff2') format('woff2');font-weight:500;font-style:italic;font-display:swap}
@font-face{font-family:'Maison Neue';src:url('fonts/MaisonNeue-BookItalic.woff2') format('woff2');font-weight:400;font-style:italic;font-display:swap}
@font-face{font-family:'Maison Neue';src:url('fonts/MaisonNeue-Demi.woff2') format('woff2');font-weight:600;font-style:normal;font-display:swap}
@font-face{font-family:'Maison Neue';src:url('fonts/MaisonNeue-DemiItalic.woff2') format('woff2');font-weight:600;font-style:italic;font-display:swap}
@font-face{font-family:'Maison Neue';src:url('fonts/MaisonNeue-Bold.woff2') format('woff2');font-weight:700;font-style:normal;font-display:swap}
@font-face{font-family:'Maison Neue';src:url('fonts/MaisonNeue-Black.woff2') format('woff2');font-weight:800 900;font-style:normal;font-display:swap}
@font-face{font-family:'Maison Neue';src:url('fonts/MaisonNeue-BlackItalic.woff2') format('woff2');font-weight:800 900;font-style:italic;font-display:swap}

@font-face{font-family:'Raleway';src:url('fonts/Raleway-Regular.woff2') format('woff2');font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:'Raleway';src:url('fonts/Raleway-Italic.woff2') format('woff2');font-weight:400;font-style:italic;font-display:swap}
@font-face{font-family:'Raleway';src:url('fonts/Raleway-Medium.woff2') format('woff2');font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:'Raleway';src:url('fonts/Raleway-MediumItalic.woff2') format('woff2');font-weight:500;font-style:italic;font-display:swap}
@font-face{font-family:'Raleway';src:url('fonts/Raleway-SemiBold.woff2') format('woff2');font-weight:600;font-style:normal;font-display:swap}
@font-face{font-family:'Raleway';src:url('fonts/Raleway-SemiBoldItalic.woff2') format('woff2');font-weight:600;font-style:italic;font-display:swap}
@font-face{font-family:'Raleway';src:url('fonts/Raleway-Bold.woff2') format('woff2');font-weight:700 800;font-style:normal;font-display:swap}
@font-face{font-family:'Raleway';src:url('fonts/Raleway-BoldItalic.woff2') format('woff2');font-weight:700 800;font-style:italic;font-display:swap}
@font-face{font-family:'Raleway';src:url('fonts/Raleway-Black.woff2') format('woff2');font-weight:900;font-style:normal;font-display:swap}
@font-face{font-family:'Raleway';src:url('fonts/Raleway-BlackItalic.woff2') format('woff2');font-weight:900;font-style:italic;font-display:swap}

/* ---------- Tokens invariants ---------- */
:root{
  /* Palette officielle */
  --c-orange:#EA5027; --c-orange-h:#C8401F;
  --c-black:#000000;  --c-cream:#EFEEDA; --c-cream-2:#F0EEE5;
  --c-yellow:#FFEA28; --c-yellow24:#FFDA15; --c-grey24:#282828;
  --c-violet:#8A14FF; --c-lime:#E0FB9C;

  /* Etats */
  --ok:#168A4A;   --ok-s:rgba(22,138,74,.10);
  --warn:#B97A1A; --warn-s:rgba(185,122,26,.12);
  --err:#C53030;  --err-s:rgba(197,48,48,.11);
  --info:#2059D4; --info-s:rgba(32,89,212,.10);

  /* Typo */
  --font-title:'Maison Neue','Raleway',Arial,sans-serif;
  --font:'Raleway',Arial,sans-serif;
  --mono:'Courier New',monospace;

  /* Geometrie */
  --r-sm:.375rem; --r:.625rem; --r-lg:.875rem; --r-xl:1.25rem; --r-f:9999px;
  --t:200ms ease; --tf:120ms ease;

  /* Marque par defaut : ARTFX (orange) */
  --brand:var(--c-orange); --brand-h:var(--c-orange-h);
  --brand-s:rgba(234,80,39,.10); --brand-g:rgba(234,80,39,.25);
  --on-brand:#FFFFFF;          /* texte pose SUR un aplat --brand */
  --brand-tx:var(--c-orange);  /* texte colore marque sur fond du theme */
  --accent2:var(--c-yellow);
}

/* ---------- Themes ---------- */
html[data-theme="light"]{
  --bg:#F5F6F8; --sf:#FFFFFF; --sf2:#EEF0F3; --sfup:#FFFFFF;
  --bd:#E0E4E8; --bd2:#C5CDD5; --tx:#131619; --tx2:#5A6370; --tx3:#8E97A3; --txv:#FFFFFF;
  --hbg:rgba(255,255,255,.90); --th:#EEF0F3; --rh:#F8F9FB; --ibg:#FFFFFF;
  --sh-sm:0 1px 3px rgba(0,0,0,.06); --sh-md:0 4px 20px rgba(0,0,0,.08); --sh-lg:0 16px 48px rgba(0,0,0,.10);
  color-scheme:light;
}
html[data-theme="dark"]{
  --bg:#08090C; --sf:#101318; --sf2:#181C24; --sfup:#1E222C;
  --bd:#252A35; --bd2:#363D4D; --tx:#F2F4F8; --tx2:#B0BAC8; --tx3:#6E7A8C; --txv:#0B0C10;
  --hbg:rgba(8,9,12,.90); --th:#181C24; --rh:#141820; --ibg:#101318;
  --sh-sm:0 1px 3px rgba(0,0,0,.30); --sh-md:0 4px 20px rgba(0,0,0,.35); --sh-lg:0 16px 48px rgba(0,0,0,.50);
  color-scheme:dark;
}
html[data-theme="neutral"],:root:not([data-theme]){
  --bg:#EFEEDA; --sf:#FDFCF7; --sf2:#E7E5D6; --sfup:#FFFFFF;
  --bd:#D8D5C4; --bd2:#C0BCAA; --tx:#1A1C18; --tx2:#585850; --tx3:#8A8878; --txv:#FFFFFF;
  --hbg:rgba(239,238,218,.92); --th:#E7E5D6; --rh:#F4F2EA; --ibg:#FDFCF7;
  --sh-sm:0 1px 3px rgba(0,0,0,.05); --sh-md:0 4px 20px rgba(0,0,0,.07); --sh-lg:0 16px 48px rgba(0,0,0,.09);
  color-scheme:light;
}

/* ---------- Marques ---------- */
/* 24 : jaune #FFDA15 + noir. Jamais de texte jaune sur fond clair (contraste). */
html[data-brand="24"]{
  --brand:var(--c-yellow24); --brand-h:#EBC400;
  --brand-s:rgba(255,218,21,.18); --brand-g:rgba(255,218,21,.35);
  --on-brand:#000000; --brand-tx:#000000; --accent2:var(--c-grey24);
}
html[data-brand="24"][data-theme="dark"]{ --brand-tx:var(--c-yellow24); --brand-s:rgba(255,218,21,.10); }

/* Video Games : violet #8A14FF + lime #E0FB9C (reserve a la filiere jeu video) */
html[data-brand="games"]{
  --brand:var(--c-violet); --brand-h:#6F00E0;
  --brand-s:rgba(138,20,255,.10); --brand-g:rgba(138,20,255,.25);
  --on-brand:#FFFFFF; --brand-tx:var(--c-violet); --accent2:var(--c-lime);
}
html[data-brand="games"][data-theme="dark"]{ --brand-tx:var(--c-lime); }

/* ---------- Bascule des logos selon le theme ---------- */
.logo-dark{display:none!important}
html[data-theme="dark"] .logo-light{display:none!important}
html[data-theme="dark"] .logo-dark{display:inline-block!important}

/* ---------- Bases optionnelles ---------- */
.artfx-base{font-family:var(--font);color:var(--tx);background:var(--bg);line-height:1.6;-webkit-font-smoothing:antialiased;transition:background .3s,color .3s}
.artfx-base h1,.artfx-base h2,.artfx-base h3,.a-title{font-family:var(--font-title);font-weight:900;text-transform:uppercase;letter-spacing:.02em;line-height:1}
.a-label{font-family:var(--font);font-size:.72rem;font-weight:900;text-transform:uppercase;letter-spacing:.08em}
.a-btn{display:inline-flex;align-items:center;justify-content:center;gap:.5rem;min-height:42px;padding:.65rem 1.15rem;border:1.5px solid transparent;border-radius:var(--r-f);font-family:var(--font);font-weight:800;font-size:.78rem;letter-spacing:.07em;text-transform:uppercase;cursor:pointer;background:var(--brand);color:var(--on-brand);transition:background var(--tf),transform var(--tf)}
.a-btn:hover{background:var(--brand-h);transform:translateY(-1px)}
.a-btn-s{background:var(--sf2);color:var(--tx);border-color:var(--bd)}
.a-btn-s:hover{background:var(--sf2);border-color:var(--bd2)}