/* ============================================================
   tokens.css — Nouvelle direction artistique ComEvents (phase 1)
   SOURCE UNIQUE des couleurs, typographies et composants de base.
   Chargé AVANT main.css (site) et admin.css (admin) :
   modifier une valeur ici la modifie partout.
   ============================================================ */
:root{
  /* Couleurs */
  --bg:#0A0A0A;
  --bg2:#111111;
  --bg3:#171717;          /* « encre » de la maquette */
  --ink:#171717;
  --paper:#F3EEE6;        /* texte principal */
  --fg:var(--paper);
  --mute:#c4bdb0;         /* texte secondaire */
  --red:#CE0303;          /* rouge de marque */
  --red-bright:#E5322B;   /* rouge éclairci : petit texte rouge (contraste AA) et survols */
  --champagne:#C8A96A;    /* or */
  --gold:var(--champagne);
  --line:rgba(243,238,230,.16);
  --line-strong:rgba(243,238,230,.28);
  --success:#3EB88A;
  --warning:#D9A441;
  --grain-tex:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");

  /* Typographies */
  --display:'Space Grotesk',system-ui,sans-serif;
  --body:'Inter',system-ui,sans-serif;
  --cond:'Barlow Condensed','Space Grotesk',system-ui,sans-serif;

  /* Formes et mouvement */
  --pill:99px;
  --ease:cubic-bezier(.2,.8,.2,1);
  color-scheme:dark;
}
:focus-visible{outline:2px solid var(--champagne);outline-offset:3px;}

/* ---------- Boutons (site + admin) ---------- */
.btn-primary,.btn-ghost{
  display:inline-block;text-decoration:none;cursor:pointer;
  font-family:var(--body);font-weight:500;font-size:.92rem;line-height:1.2;
  padding:.8rem 1.4rem;border-radius:var(--pill);border:1px solid transparent;
  transition:transform .2s var(--ease),filter .2s,border-color .2s,background .2s;
}
.btn-primary{background:var(--red);border-color:var(--red);color:#fff;}
.btn-primary:hover{filter:brightness(1.12);transform:translateY(-1px);}
.btn-ghost{background:none;border-color:rgba(243,238,230,.45);color:var(--paper);}
.btn-ghost:hover{border-color:var(--champagne);transform:translateY(-1px);}
.btn-primary:active,.btn-ghost:active{transform:none;}

/* ---------- Composants de la DA (utilisés dès la phase 2) ---------- */
/* Barre rouge inclinée : signature « barres du E » */
.ce-bar,h2.sec-title::before{
  content:"";display:block;width:46px;height:8px;background:var(--red);
  transform:skewX(-30deg);margin-bottom:1rem;
}
.ce-bar{display:block;}
/* Kicker */
.ce-kicker{
  font:500 .78rem var(--display);letter-spacing:.16em;text-transform:uppercase;
  color:var(--champagne);margin:0 0 1rem;
}
/* Carte numérotée */
.ce-card{border:1px solid var(--line);padding:1.4rem;background:rgba(243,238,230,.03);transition:border-color .25s,transform .25s;}
.ce-card:hover{border-color:rgba(200,169,106,.5);}
.ce-card .ce-no{font:700 .9rem var(--display);letter-spacing:.12em;color:var(--champagne);}
/* Panneau d'information à filet rouge */
.ce-panel{border-left:2px solid var(--red);padding:.2rem 0 .4rem 1.2rem;}
/* Puce / filtre */
.ce-chip{
  background:none;border:1px solid var(--line);border-radius:var(--pill);
  padding:.6rem 1rem;color:var(--paper);font:inherit;cursor:pointer;
  transition:background .25s,border-color .25s,transform .2s;
}
.ce-chip:hover{border-color:var(--champagne);transform:translateY(-1px);}
.ce-chip[aria-pressed=true],.ce-chip[aria-selected=true],.ce-chip.is-active{background:var(--red);border-color:var(--red);color:#fff;}
/* Chiffre clé */
.ce-stat b{display:block;font:700 clamp(2rem,8vw,3.4rem)/1 var(--display);}
.ce-stat span{color:var(--mute);font-size:.9rem;}
/* Logo : mot-symbole */
.ce-logo{display:inline-flex;align-items:center;gap:.6rem;text-decoration:none;color:var(--paper);}
.ce-logo svg{width:26px;height:auto;display:block;flex:none;}
.ce-logo .ce-word{font:800 1.5rem/1 var(--cond);letter-spacing:.005em;}
.ce-logo .ce-word b{color:var(--red);font-weight:800;}
.ce-logo .ce-word i{font-style:normal;}
.ce-logo.ce-logo-lg svg{width:44px;}
.ce-logo.ce-logo-lg .ce-word{font-size:2.3rem;}
@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto!important;}.btn-primary,.btn-ghost,.ce-card,.ce-chip{transition:none;}}