/* ==========================================================================
   ACCROKITE — DESIGN TOKENS
   Source : Figma "Accrokite" — variables du fichier + page UI KIT (node 279:2)
   Généré depuis les versions VF des maquettes.
   Ne pas éditer à la main : ce fichier est la source de vérité du design system.
   ========================================================================== */

:root {

  /* ---------- COULEURS — socle ---------- */
  --ak-foreground:            #011B35; /* navy — texte principal, titres */
  --ak-background:            #F7FDFF; /* fond de page */
  --ak-background-strong:     #0D2438; /* fond sombre (sections inversées) */
  --ak-card:                  #FFFFFF; /* fond des cartes */
  --ak-border:                #D1E1E9; /* bordures, filets, séparateurs */
  --ak-muted-foreground:      #506679; /* texte secondaire, légendes */

  /* ---------- COULEURS — marque ---------- */
  --ak-primary:               #0064A8; /* bleu principal — liens, boutons pleins */
  --ak-primary-foreground:    #FFFFFF; /* texte sur --ak-primary */
  --ak-primary-glow:          #00B8E1; /* cyan — dégradés, halos, survols */
  --ak-cta:                   #00CACA; /* turquoise — bouton d'action principal */
  --ak-cta-foreground:        #0D2438; /* navy sur le turquoise : blanc sur #00CACA ne donnait
                                            que 2,03:1, sous le minimum WCAG AA. Le navy monte à
                                            7,8:1 et aligne le bouton de l'en-tête sur tous les
                                            autres boutons turquoise du site, déjà en navy. */
  --ak-sea:                   #0098C0; /* bleu mer — dégradés */
  --ak-sky:                   #B5DFF1; /* bleu ciel — aplats doux */
  --ak-accent:                #B0EAF4; /* aqua clair — surlignes, puces */
  --ak-surface-light:         #F2FAFD; /* surface alternative très claire */
  --ak-violet:                #914DE6; /* violet — usage ponctuel (à confirmer) */

  /* ---------- COULEURS — dérivées (états) ---------- */
  --ak-primary-hover:         #005490;
  --ak-cta-hover:             #00B3B3;
  --ak-foreground-70:         rgba(1, 27, 53, 0.70);
  --ak-overlay-hero:          rgba(1, 27, 53, 0.32); /* voile sur média hero */

  /* ---------- TYPOGRAPHIE — familles ---------- */
  --ak-font-display: "Outfit", "Helvetica Neue", Arial, sans-serif; /* titres */
  --ak-font-body:    "Inter", "Helvetica Neue", Arial, sans-serif;  /* textes + UI */

  --ak-weight-display: 700;
  --ak-weight-regular: 400;
  --ak-weight-semibold: 600;

  /* ---------- TYPOGRAPHIE — échelle (valeurs maquette 1440px) ---------- */
  --ak-size-hero:      76px;  --ak-lh-hero:      82px;
  --ak-size-display:   48px;  --ak-lh-display:   56px;
  --ak-size-section:   38px;  --ak-lh-section:   44px;
  --ak-size-subhead:   28px;  --ak-lh-subhead:   34px;
  --ak-size-card:      20px;  --ak-lh-card:      26px;
  --ak-size-body:      16px;  --ak-lh-body:      24px;
  --ak-size-ui:        14px;  --ak-lh-ui:        20px;
  --ak-size-small:     12px;  --ak-lh-small:     18px;

  /* ---------- TYPOGRAPHIE — échelle fluide (responsive déduit) ---------- */
  /* Bornes : mobile 375px  →  desktop 1440px */
  --ak-fluid-hero:    clamp(40px, 2.10rem + 3.45vw, 76px);
  --ak-fluid-display: clamp(32px, 1.75rem + 2.10vw, 48px);
  --ak-fluid-section: clamp(26px, 1.45rem + 1.60vw, 38px);
  --ak-fluid-subhead: clamp(22px, 1.28rem + 0.90vw, 28px);
  --ak-fluid-card:    clamp(18px, 1.05rem + 0.35vw, 20px);

  /* Interlettrage */
  --ak-tracking-tight:  -0.02em;  /* titres display */
  --ak-tracking-eyebrow: 0.08em;  /* sur-titres en capitales */

  /* ---------- ESPACEMENTS (base 4px) ---------- */
  --ak-space-1:  4px;
  --ak-space-2:  8px;
  --ak-space-3:  12px;
  --ak-space-4:  16px;
  --ak-space-5:  20px;
  --ak-space-6:  24px;
  --ak-space-7:  28px;
  --ak-space-8:  32px;
  --ak-space-9:  36px;
  --ak-space-10: 40px;
  --ak-space-12: 48px;
  --ak-space-14: 56px;
  --ak-space-16: 64px;
  --ak-space-18: 72px;
  --ak-space-24: 96px;

  /* ---------- GRILLE ---------- */
  --ak-content-max:    1296px; /* largeur de contenu (1440 − 2×72) */
  --ak-gutter:         72px;   /* marge latérale desktop */
  --ak-gutter-tablet:  40px;
  --ak-gutter-mobile:  20px;
  --ak-grid-gap:       32px;   /* gouttière entre cartes */
  --ak-grid-gap-wide:  24px;

  /* ---------- RAYONS ---------- */
  --ak-radius-sm:    8px;
  --ak-radius-md:   12px;
  --ak-radius-lg:   16px;
  --ak-radius-xl:   20px;  /* cartes */
  --ak-radius-2xl:  28px;
  --ak-radius-pill: 999px; /* boutons */

  /* ---------- OMBRES (styles nommés Figma) ---------- */
  --ak-shadow-field:
      0 1px 3px 0 rgba(0, 0, 0, 0.10),
      0 1px 2px -1px rgba(0, 0, 0, 0.10);
  --ak-shadow-card:
      0 1px 2px 0 rgba(15, 61, 100, 0.05),
      0 8px 24px -8px rgba(15, 61, 100, 0.12);
  --ak-shadow-float:
      0 4px 12px 0 rgba(15, 61, 100, 0.08),
      0 24px 60px -20px rgba(15, 61, 100, 0.25);
  --ak-shadow-button:
      0 5px 6px rgba(13, 36, 51, 0.16);

  /* ---------- HAUTEURS DE CONTRÔLES ---------- */
  --ak-control-sm: 44px;
  --ak-control-md: 48px;
  --ak-control-lg: 52px;
  --ak-header-h:   96px;

  /* ---------- TRANSITIONS ---------- */
  --ak-ease:       cubic-bezier(0.22, 0.61, 0.36, 1);
  --ak-duration:   220ms;
}

/* ---------- POINTS DE RUPTURE (référence) ----------
   mobile   : ≤ 640px    — 1 colonne, gouttière 20px
   tablette : 641–1024px — 2 colonnes, gouttière 40px
   desktop  : ≥ 1025px   — grille pleine, gouttière 72px
   Ces valeurs sont reprises dans les Breakpoints d'Elementor.
--------------------------------------------------------- */

@media (max-width: 1024px) {
  :root { --ak-gutter: var(--ak-gutter-tablet); --ak-grid-gap: 24px; }
}
@media (max-width: 640px) {
  :root { --ak-gutter: var(--ak-gutter-mobile); --ak-grid-gap: 16px; --ak-header-h: 72px; }
}