/* ============================================================
   JEC — Plugin « Annonce d'événement »
   DA Halo — tokens
   Une seule valeur change d'un site à l'autre : --brand (+ --accent).
   ============================================================ */

.jec-announce {
  /* ---- Marque (injectée depuis le back-office) ---- */
  --brand: #E8501E;
  --accent: #A6CE39;

  /* ---- Palette dérivée (ne jamais coder de teinte en dur) ---- */
  --brand-04:   color-mix(in oklab, var(--brand) 10%, #fff);
  --brand-12:   color-mix(in oklab, var(--brand) 12%, #fff);
  --brand-26:   color-mix(in oklab, var(--brand) 26%, #fff);
  --brand-60:   color-mix(in oklab, var(--brand) 60%, #fff);
  --brand-deep: color-mix(in oklab, var(--brand) 72%, var(--ink));
  --brand-glow: color-mix(in oklab, var(--brand) 34%, transparent);
  --brand-ring: color-mix(in oklab, var(--brand) 22%, transparent);

  /* ---- Texte sur aplat de marque : calculé en JS (pickOnBrand), AA garanti ---- */
  --on-brand: #FFFFFF;

  /* ---- Base neutre : fixe, jamais dérivée de la marque ---- */
  --ink: #1B1D21;
  --ink-2: #5B5D62;
  --ink-3: #6C6E73;
  --ink-4: #93959A;
  --ok: #4B7A55;

  --glass: rgba(255,255,255,.72);         /* surface sur fond clair */
  --glass-strong: rgba(255,255,255,.84);  /* surface sur fond photo/sombre */
  --glass-inner: rgba(255,255,255,.55);
  --glass-border: rgba(255,255,255,.80);
  --line: rgba(27,29,33,.08);

  /* ---- Formes ---- */
  --r-pill: 999px;
  --r-card: 24px;
  --r-media: 16px;
  --r-field: 14px;

  /* ---- Flou ---- */
  --blur-bar: blur(18px);
  --blur-card: blur(22px);

  /* ---- Ombres ---- */
  --sh-bar: 0 10px 30px rgba(27,29,33,.12), inset 0 1px 0 rgba(255,255,255,.9);
  --sh-card: 0 26px 60px rgba(27,29,33,.18), inset 0 1px 0 rgba(255,255,255,.9);
  --sh-pastille: 0 12px 30px rgba(27,29,33,.16);
  --sh-cta: 0 10px 24px var(--brand-glow);
  --sh-close: 0 4px 14px rgba(27,29,33,.18);

  /* ---- Espacement ---- */
  --s-1: 4px;  --s-2: 6px;  --s-3: 8px;  --s-4: 10px; --s-5: 12px;
  --s-6: 14px; --s-7: 18px; --s-8: 20px; --s-9: 24px;

  /* ---- Typographie ---- */
  --font: Manrope, system-ui, -apple-system, sans-serif;
  --font-mono: 'IBM Plex Mono', ui-monospace, monospace;

  /* ---- Géométrie des composants ---- */
  --bar-h: 58px;          /* 48px en mobile */
  --bar-inset: 14px;      /* 10px en mobile */
  --card-w: 384px;
  --card-media-h: 196px;  /* 1.91:1 à 384px de large */
  --edge: 24px;           /* 12px en mobile */
  --tap: 44px;            /* cible tactile minimale */
  --marquee-dur: 34s;
  --ease: cubic-bezier(.2,.8,.2,1);
}

/* Fallback si color-mix() n'est pas supporté : les 5 teintes sont écrites en JS. */
@supports not (color: color-mix(in oklab, red 50%, white)) {
  .jec-announce { /* voir buildPalette() dans reference-implementation.html */ }
}

@media (max-width: 767px) {
  .jec-announce {
    --bar-h: 48px;
    --bar-inset: 10px;
    --edge: 12px;
    --card-w: auto;
    --card-media-h: 78px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .jec-announce * {
    animation: none !important;
    transition-duration: 0ms !important;
  }
}