/**
 * Tokens UI du site organique.
 * Dérivés du design system réel des Landing Pages, sans réutiliser le namespace lp-.
 */

:root {
  
  --ui-primary: #0051ff;
  --ui-secondary: #379fff;
  --ui-dark-blue: #001d63;
  --ui-black: #000;
  --ui-white: #fff;
  --ui-light-blue: #eef3ff;
  --ui-title: #fff;
  --ui-text: #cecece;
  --ui-text-muted: #8f9bb7;
  --ui-text-dark: #00102e;
  --ui-title-dark: #000;
  --ui-border: #0051ff;
  --ui-bg: #000;
  --ui-bg-dark: #001030;
  --ui-bg-darker: #000817;
  --ui-surface-dark: #001134;
  --ui-surface-dark-2: #00183f;
  --ui-surface-light: #eef3ff;
  --ui-surface-white: #fff;
  --ui-border-light: rgba(255, 255, 255, 0.2);
  --ui-border-dark: rgba(0, 0, 0, 0.08);
  --ui-border-primary-20: rgba(0, 81, 255, 0.2);
  --ui-border-primary-50: rgba(0, 81, 255, 0.5);

  
  --ui-font-heading: "AllRoundGothic", sans-serif;
  --ui-font-body-family: "DM", sans-serif;
  --ui-font-display: clamp(48px, calc(20px + 3.125vw), 80px);
  --ui-font-h1: clamp(42px, calc(29.7px + 1.786vw), 64px);
  --ui-font-h2: clamp(34px, calc(26.6px + 1.116vw), 48px);
  --ui-font-h3: clamp(28px, calc(18.9px + 0.893vw), 36px);
  --ui-font-h4: clamp(24px, calc(19.43px + 0.446vw), 28px);
  --ui-font-h5: clamp(20px, calc(18.86px + 0.164vw), 22px);
  --ui-font-h6: 18px;
  --ui-font-body-lg: clamp(18px, calc(16px + 0.208vw), 20px);
  --ui-font-body: 16px;
  --ui-font-body-sm: 14px;
  --ui-font-case-heading: clamp(34px, calc(17.4px + 2.01vw), 56px);
  --ui-font-impact: clamp(48px, calc(2.3px + 4.46vw), 88px);
  --ui-font-metric: clamp(58px, calc(10px + 4.69vw), 100px);
  --ui-font-caption: 12px;
  --ui-font-micro: 10px;
  --ui-weight-regular: 400;
  --ui-weight-medium: 500;
  --ui-weight-semibold: 600;
  --ui-weight-bold: 700;
  --ui-line-display: 0.95;
  --ui-line-heading: 1.05;
  --ui-line-subheading: 1.2;
  --ui-line-body: 1.6;
  --ui-letter-heading: -0.03em;
  --ui-letter-body: 0;
  --ui-letter-label: 0.04em;

  
  --ui-space-1: 4px;
  --ui-space-2: 8px;
  --ui-space-3: 12px;
  --ui-space-4: 16px;
  --ui-space-5: 20px;
  --ui-space-6: 24px;
  --ui-space-7: 32px;
  --ui-space-8: 40px;
  --ui-space-9: 48px;
  --ui-space-10: 56px;
  --ui-space-11: 64px;
  --ui-space-12: 80px;
  --ui-space-13: 96px;
  --ui-space-14: 120px;
  --ui-space-15: 160px;

  
  --ui-gap-xs: var(--ui-space-2);
  --ui-gap-sm: var(--ui-space-3);
  --ui-gap-md: var(--ui-space-4);
  --ui-gap-lg: var(--ui-space-6);
  --ui-gap-xl: var(--ui-space-7);
  --ui-gap-2xl: var(--ui-space-9);
  --ui-gap-3xl: var(--ui-space-11);
  --ui-stack-tight: var(--ui-space-2);
  --ui-stack-sm: var(--ui-space-3);
  --ui-stack-md: var(--ui-space-4);
  --ui-stack-lg: var(--ui-space-5);
  --ui-stack-xl: var(--ui-space-6);
  --ui-stack-2xl: var(--ui-space-7);
  --ui-section-space-sm: clamp(48px, 6svh, 64px);
  --ui-section-space-md: clamp(56px, 7svh, 80px);
  --ui-section-space-lg: clamp(64px, 8.5svh, 96px);
  --ui-section-header-gap: clamp(32px, 4.5svh, 48px);
  --ui-section-content-gap: clamp(40px, 6svh, 64px);

  
  --ui-container-max: 1440px;
  --ui-container-wide: 1440px;
  --ui-measure-wide: 960px;
  --ui-measure-heading: 800px;
  --ui-measure-lead: 720px;
  --ui-measure-copy: 640px;
  --ui-measure-narrow: 520px;
  --ui-measure-aside: 380px;
  --ui-container-padding: 32px;
  --ui-grid-gap: var(--ui-gap-lg);
  --ui-section-gap: var(--ui-section-content-gap);
  --ui-content-gap: var(--ui-gap-2xl);

  
  --ui-max-width: var(--ui-container-max);
  --ui-max-width-lg: var(--ui-container-max);
  --ui-max-width-sm: var(--ui-measure-wide);
  --ui-max-width-text: var(--ui-measure-wide);
  --ui-max-width-text-sm: var(--ui-measure-lead);

  
  --ui-border-width: 1px;
  --ui-border-width-lg: 2px;
  --ui-radius-xs: 8px;
  --ui-radius-sm: 12px;
  --ui-radius-md: 16px;
  --ui-radius-lg: 20px;
  --ui-radius-card: 24px;
  --ui-radius-xl: 32px;
  --ui-radius-section: 32px;
  --ui-radius-pill: 999px;

  
  --ui-shadow-sm: 0 4px 16px rgba(0, 0, 0, 0.08);
  --ui-shadow-md: 0 12px 40px rgba(0, 0, 0, 0.15);
  --ui-shadow-lg: 0 24px 80px rgba(0, 0, 0, 0.25);
  --ui-shadow-primary: 0 12px 40px rgba(0, 81, 255, 0.3);
  --ui-glow-primary: 0 0 60px rgba(0, 81, 255, 0.35);
  --ui-glow-primary-lg: 0 0 120px rgba(0, 81, 255, 0.45);
  --ui-glow-secondary: 0 0 80px rgba(55, 159, 255, 0.3);
  --ui-blur-sm: 8px;
  --ui-blur-md: 16px;
  --ui-blur-lg: 32px;
  --ui-glass-bg: rgba(255, 255, 255, 0.2);
  --ui-glass-bg-hover: rgba(255, 255, 255, 0.09);
  --ui-glass-border: rgba(255, 255, 255, 0.12);

  
  --ui-control-xs: 32px;
  --ui-control-sm: 40px;
  --ui-control-md: 48px;
  --ui-control-lg: 56px;
  --ui-button-height-sm: var(--ui-control-sm);
  --ui-button-height: var(--ui-control-md);
  --ui-button-height-lg: var(--ui-control-lg);
  --ui-button-padding-x-sm: var(--ui-space-4);
  --ui-button-padding-x: var(--ui-space-6);
  --ui-button-padding-x-lg: var(--ui-space-7);
  --ui-button-gap: var(--ui-space-3);
  --ui-button-font-sm: 13px;
  --ui-button-font: 15px;
  --ui-button-font-lg: 16px;
  --ui-card-padding-sm: var(--ui-space-5);
  --ui-card-padding: var(--ui-space-7);
  --ui-card-padding-lg: var(--ui-space-9);
  --ui-card-gap: var(--ui-gap-lg);
  --ui-card-bg-dark: rgba(0, 15, 50, 0.8);
  --ui-card-bg-light: var(--ui-white);
  --ui-icon-xs: 12px;
  --ui-icon-sm: 16px;
  --ui-icon-md: 20px;
  --ui-icon-lg: 24px;
  --ui-icon-xl: 32px;

  
  --ui-process-marker-size: var(--ui-control-md);
  --ui-process-marker-gap: var(--ui-space-6);
  --ui-process-rail-offset: calc(var(--ui-process-marker-size) + var(--ui-process-marker-gap));
  --ui-process-rail-center: calc(var(--ui-process-marker-size) / 2);
  --ui-comparison-mobile-col: 72px;
  --ui-consent-width: 416px;
  --ui-comparison-criterion-measure: 184px;
  --ui-comparison-mobile-col-compact: 56px;
  --ui-contact-panel-height: clamp(520px, 62svh, 640px);
  --ui-offer-heading-min-height: clamp(80px, 10svh, 112px);
  --ui-offer-price-min-height: clamp(72px, 9svh, 96px);

  
  --ui-header-top: var(--ui-space-4);
  --ui-header-height: var(--ui-space-11);
  --ui-header-bg: rgba(4, 48, 63, 0.5);
  --ui-header-bg-scrolled: rgba(0, 8, 23, 0.78);
  --ui-header-bg-open: rgba(0, 8, 23, 0.9);

  
  --ui-transition: 0.5s ease;
  --ui-transition-fast: 0.2s ease;
  --ui-transition-normal: 0.3s ease;
  --ui-transition-slow: 0.8s ease;
  --ui-ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ui-ease-smooth: cubic-bezier(0.65, 0, 0.35, 1);
  --ui-z-base: 1;
  --ui-z-content: 10;
  --ui-z-header: 100;
  --ui-z-dropdown: 200;
  --ui-z-overlay: 500;
  --ui-z-modal: 1000;
  --reveal-duration: 1s;
  --reveal-distance: 50px;
  --reveal-line-distance: 50px;
  --reveal-stagger: 160ms;
  --reveal-ease: cubic-bezier(0.22, 1, 0.36, 1);

  
  --ui-gradient-primary: linear-gradient(135deg, var(--ui-primary) 0%, var(--ui-secondary) 100%);
  --ui-gradient-blue-light: linear-gradient(180deg, var(--ui-primary) 0%, var(--ui-secondary) 55%, var(--ui-light-blue) 100%);
  --ui-gradient-dark: linear-gradient(180deg, var(--ui-dark-blue) 0%, var(--ui-black) 100%);
  --ui-gradient-radial: radial-gradient(circle, rgba(0, 81, 255, 0.7) 0%, rgba(0, 81, 255, 0.2) 45%, rgba(0, 81, 255, 0) 75%);
  --ui-gradient-glow: radial-gradient(circle at center, rgba(55, 159, 255, 0.5) 0%, rgba(0, 81, 255, 0.25) 35%, rgba(0, 81, 255, 0) 70%);

  
  --ui-hero-min-height: 100svh;
  --ui-hero-content-width: var(--ui-measure-wide);
  --ui-hero-text-width: var(--ui-measure-lead);
  --ui-hero-visual-width: var(--ui-measure-wide);
  --ui-hero-grid-size: var(--ui-space-11);
  --ui-hero-grid-color: rgba(255, 255, 255, 0.08);
  --ui-hero-mockup-width: var(--ui-measure-lead);
  --ui-hero-mockup-bg: rgba(255, 255, 255, 0.94);
  --ui-hero-mockup-border: rgba(255, 255, 255, 0.7);
  --ui-hero-gradient: radial-gradient(ellipse 130% 110% at 50% -10%, var(--ui-black) 10%, var(--ui-dark-blue) 40%, var(--ui-primary) 66%, var(--ui-white) 100%);
  --ui-case-study-gradient: radial-gradient(ellipse 130% 110% at 50% 110%, var(--ui-black) 10%, var(--ui-dark-blue) 30%, var(--ui-primary) 50%, var(--ui-white) 100%);
  --ui-section-padding-y-sm: var(--ui-section-space-sm);
  --ui-section-padding-y: var(--ui-section-space-md);
  --ui-section-padding-y-lg: var(--ui-section-space-lg);
  --ui-hero-padding-top: calc(var(--ui-header-top) + var(--ui-header-height) + var(--ui-space-8));
  --ui-hero-padding-bottom: var(--ui-space-9);
}

@media (max-width: 1024px) {
:root {
    --ui-container-padding: var(--ui-space-6);
    --ui-grid-gap: var(--ui-space-5);
    --ui-card-padding: var(--ui-space-6);
    --ui-card-padding-lg: var(--ui-space-8);
    --ui-radius-section: var(--ui-radius-xl);
    --ui-header-top: var(--ui-space-3);
    --ui-header-height: var(--ui-control-lg);
    --ui-section-space-sm: var(--ui-space-9);
    --ui-section-space-md: var(--ui-space-10);
    --ui-section-space-lg: var(--ui-space-11);
  }
}

@media (max-width: 768px) {
:root {
    --ui-grid-gap: var(--ui-space-5);
    --ui-card-padding-sm: var(--ui-space-4);
    --ui-card-padding: var(--ui-space-6);
    --ui-card-padding-lg: var(--ui-space-7);
    --ui-card-gap: var(--ui-space-6);
    --ui-gap-xl: var(--ui-space-8);
    --ui-gap-2xl: var(--ui-space-10);
    --ui-stack-lg: var(--ui-space-6);
    --ui-stack-xl: var(--ui-space-7);
    --ui-stack-2xl: var(--ui-space-8);
    --ui-radius-section: var(--ui-radius-card);
    --ui-button-height-lg: var(--ui-control-lg);
    --ui-button-padding-x-lg: var(--ui-space-6);
    --ui-header-top: var(--ui-space-3);
    --ui-header-height: var(--ui-control-lg);
    --ui-hero-gradient: radial-gradient(
      ellipse 260% 110% at 50% -10%,
      var(--ui-black) 10%,
      var(--ui-dark-blue) 40%,
      var(--ui-primary) 66%,
      var(--ui-white) 100%
    );
    --ui-case-study-gradient: radial-gradient(
      ellipse 260% 100% at 50% 110%,
      var(--ui-black) 10%,
      var(--ui-dark-blue) 30%,
      var(--ui-primary) 50%,
      var(--ui-white) 100%
    );
    --ui-container-padding: var(--ui-space-5);
    --ui-section-padding-y: clamp(64px, 9svh, 80px);
    --ui-section-padding-y-lg: clamp(72px, 10svh, 96px);
    --ui-section-padding-y-sm: clamp(56px, 8svh, 72px);
    --ui-section-space-sm: var(--ui-space-9);
    --ui-section-space-md: var(--ui-space-10);
    --ui-section-space-lg: var(--ui-space-11);
    --ui-section-header-gap: var(--ui-space-8);
    --ui-section-content-gap: var(--ui-space-10);
    --ui-process-marker-size: var(--ui-control-sm);
    --ui-process-marker-gap: var(--ui-space-3);
  }
}

@media (min-width: 1025px) and (max-width: 1600px) {
:root {
    --ui-container-max: var(--ui-container-wide);
    --ui-card-padding: var(--ui-space-6);
    --ui-card-padding-lg: var(--ui-space-8);
    --ui-grid-gap: var(--ui-space-5);
    --ui-content-gap: var(--ui-space-8);
  }
}

@media (max-width: 480px) {
:root {
    --ui-container-padding: var(--ui-space-4);
  }
}

@media (min-width: 1025px) and (max-height: 850px) {
:root {
    --ui-header-top: var(--ui-space-2);
    --ui-header-height: var(--ui-control-md);
    --ui-hero-padding-top: calc(var(--ui-header-top) + var(--ui-header-height) + var(--ui-space-6));
    --ui-hero-padding-bottom: var(--ui-space-7);
    --ui-section-space-sm: var(--ui-space-8);
    --ui-section-space-md: var(--ui-space-9);
    --ui-section-space-lg: var(--ui-space-10);
    --ui-section-header-gap: var(--ui-space-7);
    --ui-section-content-gap: var(--ui-space-9);
  }
}

@media (max-width: 1024px) and (max-height: 600px) and (orientation: landscape) {
:root {
    --ui-section-space-sm: var(--ui-space-7);
    --ui-section-space-md: var(--ui-space-8);
    --ui-section-space-lg: var(--ui-space-9);
  }
}

:root {
  /* Aliases métier pour le reste du thème V2. */
  --color-primary: var(--ui-primary);
  --color-secondary: var(--ui-secondary);
  --color-dark: var(--ui-dark-blue);
  --color-text: var(--ui-text-dark);
  --color-muted: var(--ui-text-muted);
  --color-light: var(--ui-light-blue);
  --color-white: var(--ui-white);
  --gradient-primary: var(--ui-gradient-primary);
  --font-body: var(--ui-font-body-family);
  --font-heading: var(--ui-font-heading);
  --max-width: var(--ui-container-max);
}