/* =====================================================================
   YANIS LAMECHE — Design system v4 : socle de tokens
   ---------------------------------------------------------------------
   Source unique de verite pour la palette, la typographie et la forme.
   Charge AVANT style.css (et avant les <style> inline des pages privees).

   Ce fichier ne contient aucune regle de composant : uniquement des
   variables et un jeu d'utilitaires prefixes en .u- pour garantir zero
   collision avec les classes existantes.

   Compatibilite : les alias plus bas exposent la meme palette sous les
   noms utilises par dashboard.php (--txt, --mut, --line, --acc). Rien a
   renommer dans le markup ou le JS existant.
   ===================================================================== */

:root{
  /* ---------- 1. FONDS ----------
     Theme par defaut : sombre. Le relief des cartes vient de la bordure et
     de l'ombre, pas de l'aplat : sur fond sombre, surface et fond ne
     peuvent pas se distinguer par le remplissage (1,16:1 au mieux). */
  --bg:#16181c;            /* gris fonce, pas noir */
  --bg2:#1b1e23;
  --surface:#21242b;
  --surface2:#2a2e36;
  --overlay:#1a1d21;
  --panel:rgba(255,255,255,.055);

  /* ---------- 2. BORDURES ---------- */
  --border:rgba(255,255,255,.13);
  --border2:rgba(255,255,255,.22);

  /* ---------- 3. TEXTE ---------- */
  --text:#e8eaed;          /* 14,75:1 sur --bg */
  --text2:#a2a9b4;         /*  7,51:1 sur --bg */
  --text3:#79808b;         /*  4,46:1 sur --bg */

  /* ---------- 4. ACCENT ---------- */
  --accent:#e9ebee;
  --on-accent:#16181c;
  --accent2:#8fa3b8;
  --accent3:#b8c2cd;
  --accent-soft:rgba(233,235,238,.08);
  --accent2-soft:rgba(143,163,184,.12);
  --grad:linear-gradient(135deg,#e9ebee 0%,#9aa7b5 100%);
  --grad-line:linear-gradient(90deg,transparent,rgba(255,255,255,.16),transparent);

  /* ---------- 5. SEMANTIQUE ---------- */
  --ok:#4ade80;
  --warn:#f5c451;
  --bad:#f87f8e;
  --ok-soft:rgba(74,222,128,.13);
  --warn-soft:rgba(245,196,81,.13);
  --bad-soft:rgba(248,127,142,.13);

  /* ---------- 5b. PALETTE CATEGORIELLE ---------- */
  --cat-violet:#9b90c2;
  --cat-blue:#7ba3bd;
  --cat-green:#84b89a;
  --cat-amber:#c2a96d;
  --cat-rose:#c291a6;
  --cat-violet-soft:rgba(155,144,194,.14);
  --cat-blue-soft:rgba(123,163,189,.14);
  --cat-green-soft:rgba(132,184,154,.14);
  --cat-amber-soft:rgba(194,169,109,.14);
  --cat-rose-soft:rgba(194,145,166,.14);

  /* ---------- 6. TYPOGRAPHIE ---------- */
  --ui:'Inter',system-ui,-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  --dp:var(--ui);
  --mono:'JetBrains Mono','SFMono-Regular',ui-monospace,Consolas,monospace;
  --tracking-tight:-.022em;
  --tracking-wide:.12em;

  /* ---------- 7. FORME ---------- */
  --radius-s:8px;
  --radius:12px;
  --radius-l:16px;
  --radius-pill:999px;
  --shadow:0 1px 2px rgba(0,0,0,.5),0 4px 12px rgba(0,0,0,.35);
  --shadow-card:0 1px 0 rgba(255,255,255,.04) inset,0 2px 6px rgba(0,0,0,.45);
  --shadow-lift:0 1px 2px rgba(0,0,0,.5),0 14px 38px rgba(0,0,0,.55);
  --shadow-float:0 1px 0 rgba(255,255,255,.06) inset,0 10px 34px rgba(0,0,0,.6);

  /* ---------- 8. RYTHME ---------- */
  --gutter:clamp(20px,5vw,64px);
  --section-y:clamp(80px,11vw,150px);
  --maxw:1240px;
  --nav-h:60px;

  /* ---------- 9. MOUVEMENT ---------- */
  --ease:cubic-bezier(.22,1,.36,1);
  --blur:blur(20px) saturate(150%);
}

/* ------------------- THEME CLAIR : BLANC FRANC -------------------
   Active par le bouton de bascule. Fonds purement blancs, gris neutres,
   texte quasi noir : l'ecart avec le theme sombre est total. */
body.light{
  /* Fond legerement teinte et non blanc pur : sur un ecran, du #ffffff
     plein page fatigue et aplatit tout. Les cartes, elles, restent en
     blanc franc et ressortent ainsi du fond (1,10:1). */
  --bg:#f4f4f6;
  --bg2:#ebebee;
  --surface:#ffffff;
  --surface2:#f0f0f3;
  --overlay:#ffffff;
  --panel:#eeeef1;

  --border:#e0e0e4;
  --border2:#c8c8ce;

  --text:#16161a;          /* 16,43:1 sur --bg */
  --text2:#54545c;         /*  6,83:1 sur --bg */
  --text3:#71717a;         /*  4,40:1 sur --bg */

  --accent:#16161a;
  --on-accent:#ffffff;
  --accent2:#54545c;
  --accent3:#3f3f46;
  --accent-soft:rgba(22,22,26,.05);
  --accent2-soft:rgba(84,84,92,.09);
  --grad:linear-gradient(135deg,#16161a 0%,#54545c 100%);
  --grad-line:linear-gradient(90deg,transparent,rgba(22,22,26,.14),transparent);

  --ok:#15803d;
  --warn:#b45309;
  --bad:#be123c;
  --ok-soft:rgba(21,128,61,.09);
  --warn-soft:rgba(180,83,9,.09);
  --bad-soft:rgba(190,18,60,.09);

  --cat-violet:#574b80;
  --cat-blue:#3b607a;
  --cat-green:#3a7452;
  --cat-amber:#7d5f22;
  --cat-rose:#844c63;
  --cat-violet-soft:rgba(87,75,128,.09);
  --cat-blue-soft:rgba(59,96,122,.09);
  --cat-green-soft:rgba(58,116,82,.09);
  --cat-amber-soft:rgba(125,95,34,.09);
  --cat-rose-soft:rgba(132,76,99,.09);

  --shadow:0 1px 2px rgba(22,22,26,.06),0 2px 8px rgba(22,22,26,.05);
  --shadow-card:0 1px 2px rgba(22,22,26,.05);
  --shadow-lift:0 1px 3px rgba(22,22,26,.08),0 12px 30px rgba(22,22,26,.1);
  --shadow-float:0 1px 0 rgba(255,255,255,1) inset,0 8px 26px rgba(22,22,26,.09);
}

/* --------------- ALIAS DE COMPATIBILITE (dashboard.php) ---------------
   dashboard.php nomme ses tokens autrement. Ces alias lui permettent de
   consommer cette palette sans renommer une seule classe.

   Declares sur `body` et NON sur `:root` : une propriete personnalisee est
   resolue la ou elle est declaree. Sur :root, var(--text) aurait toujours
   rendu la valeur du theme sombre, puisque body.light redefinit --text sur
   body et non sur :root. Les 221 usages de ces alias dans le dashboard
   seraient restes en couleurs sombres en mode clair. */
body{
  --txt:var(--text);
  --mut:var(--text2);
  --line:var(--border);
  --acc:var(--accent);
  --acc2:var(--accent2);
}

/* ===================================================================
   UTILITAIRES — tous prefixes .u- pour ne heurter aucune classe
   existante de style.css, index.php, en.php ou dashboard.php.
   =================================================================== */

/* ---------- Conteneurs ---------- */
.u-container{width:100%;max-width:var(--maxw);margin-inline:auto;padding-inline:var(--gutter)}
.u-container-narrow{width:100%;max-width:820px;margin-inline:auto;padding-inline:var(--gutter)}
.u-stack{display:flex;flex-direction:column;gap:var(--u-gap,16px)}
.u-row{display:flex;align-items:center;gap:var(--u-gap,12px);flex-wrap:wrap}

/* ---------- Grille bento ----------
   12 colonnes sur desktop, 6 sur tablette, 1 colonne sur mobile.
   Les spans se replient automatiquement, sans classe supplementaire. */
.u-bento{
  display:grid;
  grid-template-columns:repeat(12,minmax(0,1fr));
  gap:var(--u-bento-gap,16px);
}
.u-bento > *{min-width:0}
.u-col-2{grid-column:span 2}
.u-col-3{grid-column:span 3}
.u-col-4{grid-column:span 4}
.u-col-5{grid-column:span 5}
.u-col-6{grid-column:span 6}
.u-col-7{grid-column:span 7}
.u-col-8{grid-column:span 8}
.u-col-9{grid-column:span 9}
.u-col-12{grid-column:span 12}
.u-row-2{grid-row:span 2}

@media(max-width:1000px){
  .u-bento{grid-template-columns:repeat(6,minmax(0,1fr))}
  .u-col-2,.u-col-3,.u-col-4{grid-column:span 3}
  .u-col-5,.u-col-6,.u-col-7,.u-col-8,.u-col-9,.u-col-12{grid-column:span 6}
}
@media(max-width:640px){
  .u-bento{grid-template-columns:1fr}
  .u-bento > *{grid-column:span 1 !important;grid-row:auto !important}
}

/* ---------- Surface de carte ---------- */
.u-card{
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:var(--radius);
  padding:var(--u-card-pad,24px);
  box-shadow:var(--shadow-card);
  transition:border-color .22s var(--ease),background .22s var(--ease),box-shadow .22s var(--ease);
}
.u-card-hover:hover{border-color:var(--border2);background:var(--surface2);box-shadow:var(--shadow)}

/* ---------- Badges ---------- */
.u-badge{
  display:inline-flex;align-items:center;gap:6px;
  font-family:var(--mono);font-size:10.5px;font-weight:500;
  letter-spacing:var(--tracking-wide);text-transform:uppercase;
  color:var(--text3);
  background:var(--panel);
  border:1px solid var(--border);
  border-radius:var(--radius-pill);
  padding:5px 11px;white-space:nowrap;
}
.u-badge-solid{background:var(--accent);border-color:transparent;color:var(--on-accent)}
.u-badge-accent{color:var(--accent2);border-color:var(--border2);background:var(--accent2-soft)}
.u-badge-ok{color:var(--ok);border-color:var(--border2)}
.u-badge-dot::before{content:'';width:5px;height:5px;border-radius:50%;background:currentColor;flex-shrink:0}

/* ---------- Divers ---------- */
.u-mono{font-family:var(--mono);letter-spacing:.02em}
.u-muted{color:var(--text2)}
.u-hairline{height:1px;border:0;background:var(--border);margin:0}
.u-sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
  clip:rect(0,0,0,0);white-space:nowrap;border:0}

@media(prefers-reduced-motion:reduce){
  .u-card,.u-card-hover:hover{transition:none}
}