/* ===========================================================================
   GinSSI ENERGY — Design tokens
   Dérivés du GinSSI Design System (Charte Graphique V1.0, Fév. 2026 +
   Présentation Institutionnelle, Mars 2026). Le bleu marine / turquoise /
   or du Groupe restent l'autorité visuelle ; l'accent "Énergie" (#2ECC71)
   est une touche secondaire (CTA solaires, chiffres clés, survols).
   =========================================================================== */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&family=Open+Sans:wght@400;600;700&display=swap');

:root {
  /* --- Palette du Groupe (autorité) -------------------------------------- */
  --navy-marine: #0D2137;
  --navy-deep:   #1F4E79;
  --turquoise:   #00A89D;
  --gold:        #D4A843;
  --turquoise-light: #4DC9C0;
  --gold-light:      #F4D58D;
  --gray-900: #333333;
  --gray-600: #666666;
  --gray-100: #F5F5F5;
  --white:    #FFFFFF;
  --gray-200: #E6E9ED;
  --gray-300: #D2D7DD;
  --gray-50:  #FAFBFC;

  --tint-turquoise: #E6F6F4;
  --tint-gold:      #FBF3DC;
  --tint-navy:      #EAF0F6;
  --tint-error:     #F9EAE8;
  --tint-energy:    #EAFAF0;

  --feedback-error:   #C0392B;
  --feedback-success: #2ECC71;
  --feedback-warning: #D4A843;
  --feedback-info:    #1F4E79;

  /* --- Accent de division : ENERGY ---------------------------------------- */
  --accent-energy:       #2ECC71;
  --accent-energy-deep:  #1E9E58;
  --accent-solar:        #F5A623; /* ambre/or solaire — accent secondaire ENERGY */
  --accent-solar-deep:   #D4890F;
  --accent: var(--accent-energy);

  /* --- Alias sémantiques --------------------------------------------------- */
  --text-primary:   var(--gray-900);
  --text-secondary: var(--gray-600);
  --text-muted:     #8A9099;
  --text-on-dark:      var(--white);
  --text-on-dark-soft: rgba(255, 255, 255, 0.72);
  --text-link: var(--turquoise);

  --surface-page:  var(--white);
  --surface-wash:  var(--gray-50);
  --surface-muted: var(--gray-100);
  --surface-card:  var(--white);
  --surface-dark:   var(--navy-marine);
  --surface-dark-2: var(--navy-deep);

  --border-subtle:  var(--gray-200);
  --border-default: var(--gray-300);
  --border-strong:  var(--navy-deep);
  --border-rule:    var(--turquoise);

  --action-primary-bg:    var(--accent-solar);
  --action-primary-fg:    var(--navy-marine);
  --action-primary-hover: var(--accent-solar-deep);
  --action-secondary-bg:    var(--navy-deep);
  --action-secondary-fg:    var(--white);
  --action-secondary-hover: var(--navy-marine);
  --action-ghost-fg: var(--navy-deep);
  --focus-ring: color-mix(in srgb, var(--turquoise) 55%, transparent);

  --gradient-brand:  linear-gradient(90deg, var(--navy-deep) 0%, var(--turquoise) 100%);
  --gradient-header: linear-gradient(120deg, var(--navy-marine) 0%, var(--navy-deep) 55%, var(--turquoise) 130%);
  --gradient-energy: linear-gradient(120deg, var(--navy-marine) 0%, var(--navy-deep) 45%, var(--accent-energy-deep) 100%);
  --gradient-solar:  linear-gradient(90deg, var(--accent-solar) 0%, var(--gold) 100%);
  --gradient-rule:   linear-gradient(90deg, var(--navy-deep), var(--turquoise));

  /* --- Typographie ---------------------------------------------------------- */
  --font-sans: "Inter", Arial, "Open Sans", "Helvetica Neue", Helvetica, sans-serif;
  --font-display: var(--font-sans);
  --font-mono: "Courier New", "Courier", ui-monospace, monospace;

  --weight-regular: 400;
  --weight-medium: 500;
  --weight-semibold: 600;
  --weight-bold: 700;
  --weight-extrabold: 800;

  --text-display: 3.25rem;
  --text-h1: 2.25rem;
  --text-h2: 1.75rem;
  --text-h3: 1.3125rem;
  --text-lead: 1.1875rem;
  --text-body: 1rem;
  --text-small: 0.875rem;
  --text-caption: 0.75rem;

  --leading-tight: 1.15;
  --leading-snug: 1.3;
  --leading-normal: 1.5;

  --tracking-tight: -0.02em;
  --tracking-normal: 0;
  --tracking-wide: 0.08em;

  --heading-color: var(--navy-marine);
  --heading-weight: var(--weight-bold);
  --eyebrow-color: var(--accent-energy-deep);

  /* --- Spacing / radii / shadows / layout / motion -------------------------- */
  --space-0: 0;
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.5rem;
  --space-6: 2rem;
  --space-7: 3rem;
  --space-8: 4rem;
  --space-9: 6rem;

  --radius-xs: 3px;
  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 16px;
  --radius-xl: 24px;
  --radius-pill: 999px;

  --border-width: 1px;
  --border-rule-width: 2px;
  --accent-bar-width: 4px;

  --shadow-xs: 0 1px 2px rgba(13, 33, 55, 0.06);
  --shadow-sm: 0 1px 3px rgba(13, 33, 55, 0.08), 0 1px 2px rgba(13, 33, 55, 0.05);
  --shadow-md: 0 4px 12px rgba(13, 33, 55, 0.08), 0 2px 4px rgba(13, 33, 55, 0.05);
  --shadow-lg: 0 12px 28px rgba(13, 33, 55, 0.12), 0 4px 10px rgba(13, 33, 55, 0.06);
  --shadow-focus: 0 0 0 3px var(--focus-ring);

  --container-max: 1200px;
  --container-narrow: 760px;
  --gutter: var(--space-5);
  --section-y: var(--space-9);

  --ease-standard: cubic-bezier(0.4, 0, 0.2, 1);
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --duration-fast: 120ms;
  --duration-base: 200ms;
  --duration-slow: 320ms;

  --header-height: 76px;
}