/**
 * Kunclic — Elementor Global Tokens
 *
 * Mappe les variables Elementor sur notre design system.
 * Chargé après les styles Elementor pour prise en charge immédiate,
 * même avant le premier enregistrement via le Kit.
 */

/* ============================================================
   COULEURS GLOBALES ELEMENTOR
   Écrase les valeurs générées par Elementor (--e-global-color-*)
   ============================================================ */
:root {
  /* Couleurs système Elementor (4 slots natifs) */
  --e-global-color-primary:   #C4F135;   /* Accent vert        */
  --e-global-color-secondary: #1a1a1a;   /* Fond alt / surface */
  --e-global-color-text:      #f5f5f5;   /* Texte principal    */
  --e-global-color-accent:    #888888;   /* Texte muted        */

  /* Couleurs personnalisées (custom palette Kunclic) */
  --e-global-color-kunclic_bg:      #0f0f0f;
  --e-global-color-kunclic_bg_alt:  #1a1a1a;
  --e-global-color-kunclic_surface: #141414;
  --e-global-color-kunclic_accent:  #C4F135;
  --e-global-color-kunclic_dark:    #a8d42a;
  --e-global-color-kunclic_white:   #f5f5f5;
  --e-global-color-kunclic_muted:   #888888;
  --e-global-color-kunclic_faint:   #444444;
  --e-global-color-kunclic_border:  rgba(255, 255, 255, 0.08);
}

/* ============================================================
   TYPOGRAPHIE GLOBALE ELEMENTOR
   Écrase les font-family des 4 slots natifs.
   ============================================================ */
:root {
  --e-global-typography-primary-font-family:   'Syne', sans-serif;
  --e-global-typography-primary-font-weight:   700;

  --e-global-typography-secondary-font-family: 'Syne', sans-serif;
  --e-global-typography-secondary-font-weight: 600;

  --e-global-typography-text-font-family:      'Inter', sans-serif;
  --e-global-typography-text-font-weight:      400;

  --e-global-typography-accent-font-family:    'Inter', sans-serif;
  --e-global-typography-accent-font-weight:    500;
}

/* ============================================================
   RESET ELEMENTOR — fond et couleur de base
   ============================================================ */

/* Fond global de la page */
.elementor-page,
body.elementor-page,
.elementor-kit-8 {
  background-color: var(--color-bg);
}

/* Section Elementor — pas de fond par défaut */
.elementor-section,
.e-con {
  background-color: transparent;
}

/* ============================================================
   WIDGETS ELEMENTOR — HEADING
   ============================================================ */
.elementor-widget-heading .elementor-heading-title {
  font-family: var(--font-display);
  letter-spacing: var(--tracking-tight);
  line-height: var(--leading-tight);
  color: var(--color-text);
}

/* ============================================================
   WIDGETS ELEMENTOR — TEXT EDITOR / TEXTE
   ============================================================ */
.elementor-widget-text-editor p,
.elementor-widget-text-editor li {
  font-family: var(--font-body);
  color: var(--color-text-muted);
  line-height: var(--leading-normal);
}

/* ============================================================
   WIDGETS ELEMENTOR — BOUTON
   ============================================================ */
.elementor-widget-button .elementor-button {
  font-family: var(--font-display);
  font-weight: 700;
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  border-radius: var(--radius-full);
  transition:
    background-color var(--duration-base) var(--ease-out),
    color            var(--duration-base) var(--ease-out),
    box-shadow       var(--duration-base) var(--ease-out),
    transform        var(--duration-fast) var(--ease-out);
}

/* Bouton primaire (couleur accent dans Elementor) */
.elementor-widget-button .elementor-button.elementor-button-primary,
.elementor-widget-button .elementor-button[style*="background-color: #C4F135"],
.elementor-widget-button .elementor-button[style*="background-color: var(--e-global-color-primary)"] {
  color: #0f0f0f;
}

.elementor-widget-button .elementor-button.elementor-button-primary:hover {
  box-shadow: var(--shadow-accent);
  transform: translateY(-1px);
}

/* ============================================================
   WIDGETS ELEMENTOR — ICON BOX / CARD
   ============================================================ */
.elementor-widget-icon-box .elementor-icon-box-wrapper,
.elementor-widget-image-box {
  background-color: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--space-8);
  transition:
    border-color var(--duration-base) var(--ease-out),
    box-shadow   var(--duration-base) var(--ease-out),
    transform    var(--duration-base) var(--ease-out);
}

.elementor-widget-icon-box .elementor-icon-box-wrapper:hover,
.elementor-widget-image-box:hover {
  border-color: var(--color-accent);
  box-shadow: var(--shadow-accent), var(--shadow-card);
  transform: translateY(-4px);
}

.elementor-widget-icon-box .elementor-icon {
  color: var(--color-accent);
}

.elementor-widget-icon-box .elementor-icon-box-title {
  font-family: var(--font-display);
  color: var(--color-text);
}

.elementor-widget-icon-box .elementor-icon-box-description {
  color: var(--color-text-muted);
}

/* ============================================================
   WIDGETS ELEMENTOR — DIVIDER
   ============================================================ */
.elementor-widget-divider .elementor-divider-separator {
  border-color: var(--color-border);
}

/* ============================================================
   WIDGETS ELEMENTOR — FORMULAIRE (ElementorPro)
   ============================================================ */
.elementor-field-group input,
.elementor-field-group textarea,
.elementor-field-group select {
  background-color: var(--color-surface) !important;
  border: 1px solid var(--color-border) !important;
  color: var(--color-text) !important;
  border-radius: var(--radius-md) !important;
  transition: border-color var(--duration-fast) var(--ease-out) !important;
}

.elementor-field-group input:focus,
.elementor-field-group textarea:focus {
  border-color: var(--color-accent) !important;
  box-shadow: 0 0 0 3px var(--color-accent-glow) !important;
}

.elementor-field-label {
  color: var(--color-text-muted) !important;
  font-size: var(--text-sm) !important;
}

/* ============================================================
   POPUP ELEMENTOR — fond sombre
   ============================================================ */
.elementor-popup-modal .dialog-widget-content {
  background-color: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-xl);
}

/* ============================================================
   ÉDITEUR ELEMENTOR (admin only) — dark preview
   ============================================================ */
body.elementor-editor-active {
  background-color: var(--color-bg) !important;
}