/* =========================================================
   WBD Collections — jetons de design
   Un seul jeu de variables, deux thèmes. Tout le reste du CSS
   ne référence que ces variables : ajouter un thème revient à
   écrire un nouveau bloc [data-theme].
   ========================================================= */

:root{
  /* constantes de marque — identiques dans les deux thèmes */
  --bleu:#003CA8;
  --bleu-vif:#1D5FE0;
  --noir:#0A0A0C;

  --display:"Anton","Arial Black",sans-serif;
  --label:"Oswald","Helvetica Neue",Arial,sans-serif;
  --corps:"Barlow","Helvetica Neue",Arial,sans-serif;
  --mono:"IBM Plex Mono",ui-monospace,Menlo,monospace;

  --chanfrein:polygon(0 0,calc(100% - 11px) 0,100% 11px,100% 100%,11px 100%,0 calc(100% - 11px));
  --gouttiere:12px;
  --pas:22px;
}

/* ---------------- thème sombre ---------------- */
[data-theme="sombre"]{
  --fond:#0E1014;
  --page:#05060A;
  --panneau:#171A20;
  --panneau-2:#1E222A;
  --trait:#2A3038;
  --texte:#ECEEF1;
  --texte-doux:#B9BDC6;
  --gris:#8C9099;
  --vide:#22262E;

  --hero:linear-gradient(115deg,#0A0C12 0%,#101828 46%,#0A0C12 100%);
  --hero-slash:rgba(29,95,224,.16);
  --bruit:.07;
  --filet-clair:rgba(255,255,255,.12);
  --voile:linear-gradient(transparent,rgba(6,7,10,.94) 55%);
  --media-opacite:.72;
  --depot-bord:#3A424E;
  --depot-fond:rgba(29,95,224,.05);
  --mot-actif-fond:rgba(29,95,224,.16);
  --mot-actif-texte:#FFFFFF;
  --bascule-off:#2F353E;
  --bascule-bouton:#FFFFFF;
  --placeholder:#6C707A;
  --nav-trait:#333A45;
  --ombre:0 1px 0 rgba(255,255,255,.02);
}

/* ---------------- thème clair ---------------- */
[data-theme="clair"]{
  --fond:#F4F5F7;
  --page:#E4E7EC;
  --panneau:#FFFFFF;
  --panneau-2:#EDEFF2;
  --trait:#D8DCE2;
  --texte:#14161A;
  --texte-doux:#4B5563;
  --gris:#6B7280;
  --vide:#E5E8ED;

  --hero:linear-gradient(115deg,#FFFFFF 0%,#E7EDF9 48%,#FFFFFF 100%);
  --hero-slash:rgba(0,60,168,.10);
  --bruit:.035;
  --filet-clair:rgba(0,0,0,.14);
  --voile:linear-gradient(rgba(6,7,10,.35),rgba(6,7,10,.92) 62%);
  --media-opacite:1;
  --depot-bord:#C2C8D0;
  --depot-fond:rgba(0,60,168,.04);
  --mot-actif-fond:rgba(0,60,168,.10);
  --mot-actif-texte:#003CA8;
  --bascule-off:#C6CBD3;
  --bascule-bouton:#FFFFFF;
  --placeholder:#9AA0A8;
  --nav-trait:#333A45;
  --ombre:0 1px 2px rgba(16,24,40,.06);
}