/* ============================================================
   MDJLABS — Identités produits (wordmarks) + FX tech-lab
   PRO en blanc, suffixe dans la couleur dominante du produit.
   S'ajoute après tokens.css / site.css / v2.css.
   ============================================================ */

:root {
  /* ---- Couleurs dominantes par produit ---- */
  --pl: #2EE6C8;                       /* ProLearn — bleu-vert */
  --pl-glow: rgba(46, 230, 200, 0.22);
  --pl-soft: rgba(46, 230, 200, 0.08);
  --pl-line: rgba(46, 230, 200, 0.30);

  --ps: #B79CFF;                       /* ProSkills — violet */
  --ps-glow: rgba(183, 156, 255, 0.22);
  --ps-soft: rgba(183, 156, 255, 0.08);
  --ps-line: rgba(183, 156, 255, 0.30);

  --pf: #FFC04D;                       /* ProField — ambre */
  --pf-glow: rgba(255, 192, 77, 0.22);
  --pf-soft: rgba(255, 192, 77, 0.08);
  --pf-line: rgba(255, 192, 77, 0.30);

  --pr: #62B6FF;                       /* ProRent — azur */
  --pr-glow: rgba(98, 182, 255, 0.22);
  --pr-soft: rgba(98, 182, 255, 0.08);
  --pr-line: rgba(98, 182, 255, 0.30);

  /* ProLearn passe officiellement au bleu-vert */
  --prolearn: var(--pl);
  --prolearn-glow: var(--pl-glow);
  --prolearn-soft: var(--pl-soft);
  --prolearn-line: var(--pl-line);
}

/* =========================================================
   WORDMARKS — typo logo des produits
   ========================================================= */
.wm {
  font-family: var(--ff-mono);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.005em;
  color: var(--fg-0);
}
.wm[data-p] b {
  font-weight: 600;
  color: var(--wm-c, var(--acc));
  text-shadow: 0 0 20px var(--wm-g, transparent);
}
.wm[data-p="pl"]  { --wm-c: var(--pl);  --wm-g: var(--pl-glow); }
.wm[data-p="ps"]  { --wm-c: var(--ps);  --wm-g: var(--ps-glow); }
.wm[data-p="pf"]  { --wm-c: var(--pf);  --wm-g: var(--pf-glow); }
.wm[data-p="pr"]  { --wm-c: var(--pr);  --wm-g: var(--pr-glow); }
.wm[data-p="mdj"] { --wm-c: var(--acc); --wm-g: var(--acc-glow); }

/* Écosystème : symboles bicolores */
.eco-node .sym b { font-weight: 600; }
.eco-node[data-node="PL"] .sym b { color: var(--pl); }
.eco-node[data-node="PS"] .sym b { color: var(--ps); }
.eco-node[data-node="PF"] .sym b { color: var(--pf); }
.eco-node[data-node="PR"] .sym b { color: var(--pr); }
.eco-node.is-active .sym { color: var(--fg-0); }

/* Chips statut des cartes solutions, teintées produit */
.sol-card[data-p="ps"] .sol-chip.is-design { color: var(--ps); border-color: var(--ps-line); background: var(--ps-soft); }
.sol-card[data-p="ps"] .sol-chip.is-design i { background: var(--ps); }
.sol-card[data-p="pf"] .sol-chip.is-design { color: var(--pf); border-color: var(--pf-line); background: var(--pf-soft); }
.sol-card[data-p="pf"] .sol-chip.is-design i { background: var(--pf); }
.sol-card[data-p="pr"] .sol-chip { color: var(--pr); border-color: var(--pr-line); background: var(--pr-soft); }
.sol-card[data-p="pr"] .sol-chip i { background: var(--pr); animation: mpulse 1.8s var(--ease) infinite; }
.sol-card[data-p="ps"]:hover { border-color: var(--ps-line); }
.sol-card[data-p="pf"]:hover { border-color: var(--pf-line); }
.sol-card[data-p="pr"]:hover { border-color: var(--pr-line); }
.sol-card[data-p="ps"] .cta:hover { color: var(--ps); }
.sol-card[data-p="pf"] .cta:hover { color: var(--pf); }
.sol-card[data-p="pr"] .cta:hover { color: var(--pr); }

/* =========================================================
   FX — glitch tech-lab (rare, déclenché par fx.js)
   ========================================================= */
@media (prefers-reduced-motion: no-preference) {
  .is-glitching {
    animation: mdjGlitch 0.34s steps(1, end) both;
  }
  @keyframes mdjGlitch {
    0%   { transform: translate(0, 0);                 text-shadow: none; opacity: 1; }
    12%  { transform: translate(-3px, 1px) skewX(-2deg); text-shadow: 3px 0 0 var(--pl), -3px 0 0 var(--acc); opacity: 0.85; }
    28%  { transform: translate(2px, -1px);            text-shadow: -2px 0 0 var(--pl), 2px 0 0 var(--acc); clip-path: inset(6% 0 38% 0); }
    44%  { transform: translate(-1px, 0) skewX(1.6deg); text-shadow: 2px 0 0 var(--acc); clip-path: inset(42% 0 8% 0); opacity: 0.92; }
    60%  { transform: translate(1px, 1px);             text-shadow: -1px 0 0 var(--pl); clip-path: none; }
    100% { transform: none;                            text-shadow: none; opacity: 1; }
  }
}

/* Canvas d'ambiance (particules + balayages) */
.mdj-fx {
  position: fixed; inset: 0;
  z-index: 39;
  pointer-events: none;
  mix-blend-mode: screen;
}