/* ==========================================================================
   PCR Énergie — Variables globales (Design Tokens)
   Fichier : assets/css/variables.css
   - DARK par défaut (cohérent logo bleu/rouge/gris)
   - Tous les CSS doivent dépendre de ces variables
   ========================================================================== */

:root{
  /* ----------------------------------------------------------
     Branding (logo)
     ---------------------------------------------------------- */
  /* Bleu principal (icône flocon) */
  --pcr-brand-blue: #40c4ff;         /* cyan/bleu clair */
  --pcr-brand-blue-2: #2aa7ff;       /* hover / alternative */
  --pcr-brand-blue-soft: rgba(64,196,255,.14);

  /* Rouge principal (flamme) */
  --pcr-brand-red: #ff3b30;
  --pcr-brand-red-2: #e12f26;
  --pcr-brand-red-soft: rgba(255,59,48,.14);

  /* Gris (typographie “Energie” / neutres) */
  --pcr-brand-gray: #a7adb7;         /* texte secondaire */
  --pcr-brand-gray-2: #c6cbd3;       /* texte clair */
  --pcr-brand-gray-ink: #0b0f14;     /* “noir” profond */

  /* ----------------------------------------------------------
     Couleurs sémantiques (DARK par défaut)
     ---------------------------------------------------------- */
  --pcr-color-bg: #0b0f14;           /* fond global (dark) */
  --pcr-color-surface: #111827;      /* surface 1 (cards, header, sections) */
  --pcr-color-surface-2: #0f172a;    /* surface 2 (hover, blocks) */
  --pcr-color-surface-3: #0b1220;    /* surface 3 (panneaux / offcanvas) */

  --pcr-color-text: #e8edf6;         /* texte principal */
  --pcr-color-muted: var(--pcr-brand-gray); /* texte secondaire */
  --pcr-color-heading: #ffffff;      /* titres */
  --pcr-color-border: rgba(255,255,255,.12);
  --pcr-color-divider: rgba(255,255,255,.10);

  /* Primary/Secondary alignés logo */
  --pcr-color-primary: var(--pcr-brand-blue);
  --pcr-color-primary-hover: var(--pcr-brand-blue-2);
  --pcr-color-primary-soft: var(--pcr-brand-blue-soft);

  --pcr-color-secondary: var(--pcr-brand-red);
  --pcr-color-secondary-hover: var(--pcr-brand-red-2);
  --pcr-color-secondary-soft: var(--pcr-brand-red-soft);

  /* États */
  --pcr-color-success: #22c55e;
  --pcr-color-warning: #f59e0b;
  --pcr-color-danger: var(--pcr-brand-red);
  --pcr-color-info: var(--pcr-brand-blue);

  /* Liens */
  --pcr-link-color: var(--pcr-color-primary);
  --pcr-link-hover: var(--pcr-color-primary-hover);

  /* Overlay */
  --pcr-overlay-bg: rgba(0,0,0,.68);

  /* ----------------------------------------------------------
     Typographie
     ---------------------------------------------------------- */
     
     /* ----------------------------------------------------------
   Typographie — Familles
   ---------------------------------------------------------- */
--pcr-font-heading: "Poppins", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
--pcr-font-body: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --pcr-font-sans: system-ui, -apple-system, "Segoe UI", Roboto, Arial, "Helvetica Neue", Helvetica, sans-serif;
  --pcr-font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;

  /* Tailles */
  --pcr-text-xs: 12px;
  --pcr-text-sm: 14px;
  --pcr-text-md: 16px;
  --pcr-text-lg: 18px;
  --pcr-text-xl: 22px;
  --pcr-text-2xl: 28px;
  --pcr-text-3xl: 36px;

  /* Interlignage */
  --pcr-leading-tight: 1.2;
  --pcr-leading-normal: 1.6;

  /* Poids */
  --pcr-weight-regular: 400;
  --pcr-weight-medium: 500;
  --pcr-weight-semibold: 600;
  --pcr-weight-bold: 700;

  /* ----------------------------------------------------------
     Layout / Grille
     (tu utilises ou pas selon les templates)
     ---------------------------------------------------------- */
  --pcr-container-max: 1200px;
  --pcr-container-pad: 20px;

  --pcr-offcanvas-w: min(92vw, 420px);

  /* ----------------------------------------------------------
     Espacements
     ---------------------------------------------------------- */
  --pcr-space-0: 0;
  --pcr-space-1: 4px;
  --pcr-space-2: 8px;
  --pcr-space-3: 12px;
  --pcr-space-4: 16px;
  --pcr-space-5: 20px;
  --pcr-space-6: 24px;
  --pcr-space-7: 30px;
  --pcr-space-8: 40px;
  --pcr-space-9: 50px;

  /* ----------------------------------------------------------
     Rayons
     ---------------------------------------------------------- */
  --pcr-radius-sm: 10px;
  --pcr-radius-md: 12px;
  --pcr-radius-lg: 14px;
  --pcr-radius-xl: 18px;
  --pcr-radius-pill: 999px;

  /* ----------------------------------------------------------
     Bordures / focus ring
     ---------------------------------------------------------- */
  --pcr-border-width: 1px;
  --pcr-border: var(--pcr-border-width) solid var(--pcr-color-border);

  /* Focus ring = bleu logo (visible sur dark) */
  --pcr-outline: 0 0 0 3px rgba(64,196,255,.28);
  --pcr-focus-ring: var(--pcr-outline);

  /* ----------------------------------------------------------
     Ombres (dark)
     ---------------------------------------------------------- */
  --pcr-shadow-sm: 0 2px 14px rgba(0,0,0,.35);
  --pcr-shadow-md: 0 14px 34px rgba(0,0,0,.45);
  --pcr-shadow-lg: 0 20px 70px rgba(0,0,0,.55);

  /* ----------------------------------------------------------
     Transitions
     ---------------------------------------------------------- */
  --pcr-ease: ease;
  --pcr-dur-fast: .18s;
  --pcr-dur: .25s;
  --pcr-dur-slow: .35s;

  /* ----------------------------------------------------------
     Header / Nav tokens
     ---------------------------------------------------------- */
  --pcr-header-bg: rgba(17,24,39,.92); /* surface + légère transparence */
  --pcr-header-border: var(--pcr-color-border);
  --pcr-header-height: 72px;

  --pcr-menu-text: var(--pcr-color-text);
  --pcr-menu-hover-bg: rgba(255,255,255,.06);
  --pcr-menu-link-pad-y: 8px;
  --pcr-menu-link-pad-x: 12px;
  --pcr-menu-link-radius: var(--pcr-radius-sm);

  /* Hamburger */
  --pcr-burger-size: 18px;
  --pcr-burger-thickness: 2px;
  --pcr-burger-gap: 6px;

  /* Offcanvas */
  --pcr-offcanvas-bg: var(--pcr-color-surface-3);
  --pcr-offcanvas-border: var(--pcr-color-border);
  --pcr-offcanvas-pad: 16px;

  /* ----------------------------------------------------------
     Boutons (dark)
     ---------------------------------------------------------- */
  --pcr-btn-font-size: var(--pcr-text-md);
  --pcr-btn-font-weight: var(--pcr-weight-semibold);
  --pcr-btn-radius: var(--pcr-radius-md);
  --pcr-btn-pad-y: 10px;
  --pcr-btn-pad-x: 14px;

  /* Primary = bleu */
  --pcr-btn-primary-bg: var(--pcr-color-primary);
  --pcr-btn-primary-fg: #07121f;
  --pcr-btn-primary-bg-hover: var(--pcr-color-primary-hover);

  /* Secondary = rouge */
  --pcr-btn-secondary-bg: var(--pcr-color-secondary);
  --pcr-btn-secondary-fg: #1a0908;
  --pcr-btn-secondary-bg-hover: var(--pcr-color-secondary-hover);

  /* Ghost = surface */
  --pcr-btn-ghost-bg: transparent;
  --pcr-btn-ghost-fg: var(--pcr-color-text);
  --pcr-btn-ghost-border: var(--pcr-color-border);
  --pcr-btn-ghost-bg-hover: rgba(255,255,255,.06);

  /* ----------------------------------------------------------
     Forms (inputs) dark
     ---------------------------------------------------------- */
  --pcr-input-bg: rgba(255,255,255,.04);
  --pcr-input-fg: var(--pcr-color-text);
  --pcr-input-border: rgba(255,255,255,.14);
  --pcr-input-radius: var(--pcr-radius-md);
  --pcr-input-pad-y: 10px;
  --pcr-input-pad-x: 12px;

  /* ----------------------------------------------------------
     Z-index
     ---------------------------------------------------------- */
  --pcr-z-header: 1000;
  --pcr-z-fab: 5000;
  --pcr-z-overlay: 99990;
  --pcr-z-offcanvas: 99991;
  --pcr-z-adminbar: 100000;

  /* WP Admin bar heights */
  --pcr-adminbar-h-desktop: 32px;
  --pcr-adminbar-h-mobile: 46px;
}

/* ==========================================================================
   Mode clair (optionnel)
   Active via : <html data-theme="light">
   ========================================================================== */
html[data-theme="light"]{
  --pcr-color-bg: #ffffff;
  --pcr-color-surface: #ffffff;
  --pcr-color-surface-2: #f6f7fb;
  --pcr-color-surface-3: #ffffff;

  --pcr-color-text: #111827;
  --pcr-color-muted: #6b7280;
  --pcr-color-heading: #0f172a;
  --pcr-color-border: rgba(15,23,42,.12);
  --pcr-color-divider: rgba(15,23,42,.10);

  --pcr-header-bg: rgba(255,255,255,.92);
  --pcr-menu-hover-bg: rgba(15,23,42,.06);

  --pcr-overlay-bg: rgba(0,0,0,.55);

  --pcr-shadow-sm: 0 2px 10px rgba(0,0,0,.06);
  --pcr-shadow-md: 0 10px 30px rgba(0,0,0,.10);
  --pcr-shadow-lg: 0 18px 60px rgba(0,0,0,.14);

  --pcr-input-bg: #fff;
  --pcr-input-fg: var(--pcr-color-text);
  --pcr-input-border: rgba(15,23,42,.16);

  /* boutons en light : garder lisible */
  --pcr-btn-primary-fg: #ffffff;
  --pcr-btn-secondary-fg: #ffffff;
}