/*
 * MZ Base — Design tokens (Kalypseau skin).
 * Généré depuis tokens/primitives.json + semantic.json + skins/kalypseau.json
 * via scripts/build-tokens.mjs. NE PAS ÉDITER À LA MAIN — édite le JSON, rebuild.
 *
 * Architecture 3 couches (Tailwind-like) :
 *   1. Primitives : scales brutes (couleurs 50-950, spacing, radius, shadows, type)
 *   2. Semantic   : rôles fonctionnels (primary, accent, surface, fg…)
 *                   ALIASÉS aux Elementor globals — le user surcharge tout via Site Settings
 *   3. Component  : tokens des widgets (bouton, card, hero…) qui pointent vers semantic
 *
 * Convention : var(--mz-color-primary) plutôt que var(--e-global-color-primary).
 * Ainsi les widgets restent portables si on rebadge sans Elementor.
 */

:root {

  /* ============================================================
   * COUCHE 1 — PRIMITIVES (vocabulaire brut, non utilisé en widget)
   * ============================================================ */

  /* Navy */
  --mz-navy-50:  #eef3fb;
  --mz-navy-100: #d5dfef;
  --mz-navy-200: #a8bde0;
  --mz-navy-300: #7c9bd1;
  --mz-navy-400: #4f78c1;
  --mz-navy-500: #2b58a4;
  --mz-navy-600: #1e4586;
  --mz-navy-700: #1a3a6c;
  --mz-navy-800: #122a51;
  --mz-navy-900: #0f2547;
  --mz-navy-950: #08172d;

  /* Blue */
  --mz-blue-50:  #eaf3fc;
  --mz-blue-100: #c9e0f7;
  --mz-blue-200: #94c1ee;
  --mz-blue-300: #5fa1e5;
  --mz-blue-400: #2b7bd8;
  --mz-blue-500: #1c69c1;
  --mz-blue-600: #155296;
  --mz-blue-700: #0f3d6f;
  --mz-blue-800: #092849;

  /* Ink (neutrals) */
  --mz-ink-50:  #f2f3f6;
  --mz-ink-100: #e6e9ef;
  --mz-ink-200: #c9cfda;
  --mz-ink-300: #8a94a8;
  --mz-ink-400: #6b7a92;
  --mz-ink-500: #4a5468;
  --mz-ink-600: #2a3550;
  --mz-ink-700: #1a2138;
  --mz-ink-800: #0e1425;

  /* Cream (warm surfaces) */
  --mz-cream-50:  #fafaf7;
  --mz-cream-100: #f4efe6;
  --mz-cream-200: #e8dfcd;

  --mz-white: #ffffff;
  --mz-black: #000000;

  /* Feedback */
  --mz-success:    #1e6b3a;
  --mz-success-bg: #eaf5ee;
  --mz-warning:    #a76a00;
  --mz-warning-bg: #fdf3e0;
  --mz-danger:     #a02222;
  --mz-danger-bg:  #fbeceb;

  /* Stars / Google */
  --mz-gold:           #f5a623;
  --mz-google-yellow:  #fbbc04;
  --mz-google-red:     #ea4335;
  --mz-google-green:   #34a853;
  --mz-google-blue:    #4285f4;

  /* Spacing */
  --mz-space-0:  0;
  --mz-space-1:  4px;
  --mz-space-2:  8px;
  --mz-space-3:  12px;
  --mz-space-4:  16px;
  --mz-space-5:  20px;
  --mz-space-6:  24px;
  --mz-space-8:  32px;
  --mz-space-10: 40px;
  --mz-space-12: 48px;
  --mz-space-14: 56px;
  --mz-space-16: 64px;
  --mz-space-20: 80px;
  --mz-space-24: 96px;
  --mz-space-32: 128px;

  /* Radii */
  --mz-radius-none: 0;
  --mz-radius-xs:   4px;
  --mz-radius-sm:   6px;
  --mz-radius-md:   10px;
  --mz-radius-lg:   14px;
  --mz-radius-xl:   16px;
  --mz-radius-2xl:  20px;
  --mz-radius-pill: 999px;

  /* Shadows (teintées primary pour cohérence) */
  --mz-shadow-none: none;
  --mz-shadow-xs:   0 1px 2px 0 rgba(15,37,71,0.04);
  --mz-shadow-sm:   0 2px 6px -1px rgba(15,37,71,0.08);
  --mz-shadow-md:   0 6px 20px -8px rgba(26,58,108,0.25);
  --mz-shadow-lg:   0 12px 32px -12px rgba(26,58,108,0.35);
  --mz-shadow-xl:   0 20px 50px -20px rgba(0,0,0,0.20);
  --mz-shadow-2xl:  0 30px 80px -30px rgba(26,58,108,0.35);
  --mz-shadow-cta:  0 12px 32px -12px rgba(26,58,108,0.60);

  /* Type scale (clamp titles, fixed body) */
  --mz-label-xs:   10px;
  --mz-label:      11px;
  --mz-text-2xs:   12px;
  --mz-text-xs:    13px;
  --mz-text-sm:    14px;
  --mz-text-md:    15px;
  --mz-text-base:  16px;
  --mz-text-lg:    18px;
  --mz-title-xs:   18px;
  --mz-title-sm:   20px;
  --mz-title-md:   24px;
  --mz-title-lg:   clamp(26px, 3vw, 32px);
  --mz-title-xl:   clamp(30px, 3.6vw, 44px);
  --mz-title-2xl:  clamp(40px, 5vw, 56px);
  --mz-title-3xl:  clamp(48px, 6vw, 68px);

  /* Weights */
  --mz-fw-regular:  400;
  --mz-fw-medium:   500;
  --mz-fw-semibold: 600;
  --mz-fw-bold:     700;
  --mz-fw-extra:    800;

  /* Line-heights */
  --mz-lh-display: 1.05;
  --mz-lh-title:   1.1;
  --mz-lh-tight:   1.2;
  --mz-lh-body:    1.6;
  --mz-lh-loose:   1.75;

  /* Letter-spacings */
  --mz-tracking-display: -0.5px;
  --mz-tracking-normal:  0;
  --mz-tracking-wide:    0.3px;
  --mz-tracking-wider:   1.5px;
  --mz-tracking-widest:  2px;

  /* Layout */
  --mz-content-narrow: 900px;
  --mz-content-base:   1180px;
  --mz-content-wide:   1280px;
  --mz-content-xwide:  1400px;
  --mz-side-pad:       32px;

  /* Motion */
  --mz-ease-out:   cubic-bezier(0.22, 1, 0.36, 1);
  --mz-ease-in:    cubic-bezier(0.55, 0, 1, 0.45);
  --mz-dur-fast:   0.15s;
  --mz-dur-base:   0.3s;
  --mz-dur-enter:  0.7s;


  /* ============================================================
   * COUCHE 2 — SEMANTIC (rôles fonctionnels — LES WIDGETS UTILISENT ÇA)
   * Chaque couleur/font est ALIASÉE à un Elementor global,
   * avec fallback vers une primitive (skin Kalypseau par défaut).
   * → Le user modifie les globals Elementor = tout se répercute.
   * ============================================================ */

  /* Couleurs — alias Elementor globals */
  --mz-color-primary:        var(--e-global-color-primary,   var(--mz-navy-700));
  --mz-color-primary-hover:  var(--mz-navy-800);
  --mz-color-primary-fg:     var(--mz-white);
  --mz-color-accent:         var(--e-global-color-accent,    var(--mz-blue-400));
  --mz-color-accent-hover:   var(--mz-blue-500);
  --mz-color-accent-fg:      var(--mz-white);
  --mz-color-text:           var(--e-global-color-secondary, var(--mz-ink-700));
  --mz-color-text-soft:      var(--e-global-color-text,      var(--mz-ink-500));
  --mz-color-text-muted:     var(--mz-ink-400);
  --mz-color-text-inverse:   var(--mz-white);
  --mz-color-text-inverse-soft: var(--mz-navy-100);
  --mz-color-surface:        var(--mz-white);
  --mz-color-surface-soft:   var(--mz-cream-50);
  --mz-color-surface-cream:  var(--mz-cream-100);
  --mz-color-surface-inverse: var(--mz-navy-900);
  --mz-color-border:         var(--mz-ink-100);
  --mz-color-divider:        var(--mz-ink-100);
  --mz-color-powder:         var(--mz-navy-50);
  --mz-color-kicker:         var(--mz-blue-400);
  --mz-color-star:           var(--mz-gold);
  --mz-color-star-google:    var(--mz-google-yellow);

  /* Fonts — alias Elementor globals typography */
  --mz-font-title:    var(--e-global-typography-primary-font-family,   "Instrument Serif"), Georgia, serif;
  --mz-font-subtitle: var(--e-global-typography-secondary-font-family, "Instrument Serif"), Georgia, serif;
  --mz-font-body:     var(--e-global-typography-text-font-family,      "Manrope"), system-ui, -apple-system, sans-serif;
  --mz-font-ui:       var(--e-global-typography-accent-font-family,    "Manrope"), system-ui, -apple-system, sans-serif;


  /* ============================================================
   * COUCHE 3 — COMPONENT tokens (surcharge par widget)
   * Pointent vers semantic. Le user peut overrider par instance
   * dans les contrôles Elementor de chaque widget.
   * ============================================================ */

  /* Bouton primaire */
  --mz-btn-bg:            var(--mz-color-primary);
  --mz-btn-bg-hover:      var(--mz-color-primary-hover);
  --mz-btn-fg:            var(--mz-color-primary-fg);
  --mz-btn-radius:        var(--mz-radius-md);
  --mz-btn-padding:       18px 28px;
  --mz-btn-font-weight:   var(--mz-fw-bold);
  --mz-btn-font-size:     var(--mz-text-base);
  --mz-btn-shadow:        var(--mz-shadow-cta);

  /* Bouton outline */
  --mz-btn-outline-fg:       var(--mz-color-primary);
  --mz-btn-outline-border:   #d5dbe5;
  --mz-btn-outline-bg-hover: var(--mz-color-primary);

  /* Card */
  --mz-card-bg:           var(--mz-color-surface);
  --mz-card-border:       var(--mz-color-border);
  --mz-card-radius:       var(--mz-radius-xl);
  --mz-card-padding:      32px 28px;
  --mz-card-shadow-hover: var(--mz-shadow-md);

  /* Pill / badge / kicker */
  --mz-pill-bg:           var(--mz-color-surface);
  --mz-pill-border:       var(--mz-color-border);
  --mz-pill-fg:           var(--mz-color-primary);
  --mz-pill-radius:       var(--mz-radius-pill);

  --mz-kicker-fg:         var(--mz-color-kicker);
  --mz-kicker-size:       var(--mz-text-2xs);
  --mz-kicker-tracking:   var(--mz-tracking-widest);

  /* Section */
  --mz-section-pad-y:     96px;
  --mz-section-pad-x:     var(--mz-side-pad);

  /* Hero */
  --mz-hero-title-size:   var(--mz-title-3xl);
  --mz-hero-lead-size:    var(--mz-text-lg);

  /* Stats card */
  --mz-stats-num-size:    56px;
  --mz-stats-num-font:    var(--mz-font-title);

  /* Google review card */
  --mz-review-num-size:   26px;
  --mz-review-radius:     var(--mz-radius-xl);

  /* Icon container */
  --mz-icon-box-size:     48px;
  --mz-icon-box-radius:   var(--mz-radius-lg);
  --mz-icon-box-bg:       var(--mz-color-powder);
  --mz-icon-box-fg:       var(--mz-color-primary);

  /* Anchor nav sticky pill */
  --mz-anchor-bg:         var(--mz-color-surface-cream);
  --mz-anchor-fg:         var(--mz-color-primary);
  --mz-anchor-active-bg:  var(--mz-color-primary);
  --mz-anchor-active-fg:  var(--mz-color-primary-fg);

  /* Footer */
  --mz-footer-bg:         var(--mz-color-surface-inverse);
  --mz-footer-fg:         #a8b8d1;
  --mz-footer-fg-strong:  var(--mz-color-primary-fg);
  --mz-footer-divider:    rgba(255,255,255,0.10);
  --mz-footer-mini:       #7789a4;
}

/* Skip-link (a11y) — Les Sens pattern porté */
.mz-skip {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 9999;
  background: var(--mz-color-primary);
  color: var(--mz-color-primary-fg);
  padding: 12px 16px;
  border-radius: 0 0 var(--mz-radius-md) 0;
  font: var(--mz-fw-semibold) var(--mz-text-sm)/1 var(--mz-font-ui);
}
.mz-skip:focus { left: 0; }