/* ============================================================
   GROUPE CHEDJOU — Design System Variables
   ============================================================ */

:root {

  /* ── Couleurs primaires (charte officielle Groupe Chedjou) ── */
  --color-blue-deep:    #1C74B9;  /* bleu marque officiel (extrait logo) */
  --color-blue-mid:     #2B8ED4;
  --color-blue-light:   #55B8E6;
  --color-blue-pale:    #BDD5EC;
  --color-blue-night:   #111E2E;
  --color-blue-overlay: rgba(28, 116, 185, 0.88);
  --color-blue-glass:   rgba(28, 116, 185, 0.72);

  /* ── Accentuation (charte officielle) ── */
  --color-gold:         #FCC81F;  /* or marque officiel (extrait logo) */
  --color-gold-dark:    #D4A810;
  --color-gold-light:   #FDD85C;
  --color-gold-glow:    rgba(252, 200, 31, 0.35);

  /* ── Neutres ── */
  --color-white:        #FFFFFF;
  --color-grey-light:   #F4F6F9;
  --color-grey-mid:     #646564;  /* gris secondaire officiel charte */
  --color-grey-dark:    #1C1C1E;
  --color-grey-border:  #E2E8F0;
  --color-footer:       #111E2E;

  /* ── Typographie (charte officielle : Montserrat exclusivement) ── */
  --font-display:       'Montserrat', sans-serif;   /* titres : Montserrat Bold */
  --font-heading:       'Montserrat', sans-serif;   /* interface : Montserrat Bold/Medium */
  --font-body:          'Montserrat', sans-serif;   /* corps : Montserrat Medium */
  --font-alt:           'Montserrat Alternates', 'Montserrat', sans-serif; /* textes spéciaux */

  --font-weight-light:  300;
  --font-weight-reg:    400;
  --font-weight-med:    500;
  --font-weight-semi:   600;
  --font-weight-bold:   700;
  --font-weight-black:  800;

  /* ── Tailles de police (scale fluide) ── */
  --text-xs:   clamp(0.70rem, 1vw,  0.75rem);
  --text-sm:   clamp(0.82rem, 1.2vw, 0.875rem);
  --text-base: clamp(0.9rem,  1.4vw, 1rem);
  --text-md:   clamp(1rem,    1.6vw, 1.125rem);
  --text-lg:   clamp(1.1rem,  2vw,   1.25rem);
  --text-xl:   clamp(1.2rem,  2.5vw, 1.5rem);
  --text-2xl:  clamp(1.5rem,  3vw,   2rem);
  --text-3xl:  clamp(1.8rem,  4vw,   2.5rem);
  --text-4xl:  clamp(2.2rem,  5vw,   3.5rem);
  --text-5xl:  clamp(2.8rem,  7vw,   5rem);
  --text-hero: clamp(3.2rem,  9vw,   7.5rem);

  /* ── Espacement ── */
  --space-1:   0.25rem;
  --space-2:   0.5rem;
  --space-3:   0.75rem;
  --space-4:   1rem;
  --space-5:   1.25rem;
  --space-6:   1.5rem;
  --space-8:   2rem;
  --space-10:  2.5rem;
  --space-12:  3rem;
  --space-16:  4rem;
  --space-20:  5rem;
  --space-24:  6rem;
  --space-32:  8rem;
  --space-40:  10rem;

  /* ── Sections padding ── */
  --section-py:  clamp(4rem, 8vw, 7rem);
  --section-px:  clamp(1.25rem, 5vw, 6rem);

  /* ── Container ── */
  --container-max: 1440px;
  --container-md:  1100px;
  --container-sm:  860px;

  /* ── Border radius ── */
  --radius-xs:   2px;
  --radius-sm:   4px;
  --radius-md:   8px;
  --radius-lg:   16px;
  --radius-xl:   24px;
  --radius-pill: 999px;

  /* ── Ombres ── */
  --shadow-sm:   0 1px 3px rgba(0,0,0,.08), 0 1px 2px rgba(0,0,0,.05);
  --shadow-md:   0 4px 16px rgba(0,0,0,.10), 0 2px 6px rgba(0,0,0,.06);
  --shadow-lg:   0 10px 32px rgba(0,0,0,.14), 0 4px 12px rgba(0,0,0,.08);
  --shadow-xl:   0 20px 48px rgba(0,0,0,.18), 0 8px 24px rgba(0,0,0,.10);
  --shadow-gold: 0 4px 20px rgba(252,200,31,.40);
  --shadow-blue: 0 8px 32px rgba(28,116,185,.35);

  /* ── Transitions ── */
  --ease-out:   cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in:    cubic-bezier(0.7, 0, 0.84, 0);
  --ease-inout: cubic-bezier(0.45, 0, 0.55, 1);
  --ease-card:  cubic-bezier(0.25, 0.46, 0.45, 0.94);
  --dur-fast:   200ms;
  --dur-med:    300ms;
  --dur-slow:   500ms;
  --dur-slower: 700ms;

  /* ── Z-index ── */
  --z-base:    1;
  --z-above:   10;
  --z-overlay: 100;
  --z-modal:   500;
  --z-header:  1000;
  --z-tooltip: 1500;

  /* ── Clip-paths ── */
  --clip-diagonal-down:   polygon(0 0, 100% 0, 100% 92%, 0 100%);
  --clip-diagonal-up:     polygon(0 8%, 100% 0, 100% 100%, 0 100%);
  --clip-diagonal-both:   polygon(0 6%, 100% 0, 100% 94%, 0 100%);

  /* ── Header ── */
  --header-h:     80px;
  --header-h-mob: 64px;
  --header-bg:          #1C74B9;  /* bleu marque officiel */
  --header-bg-scrolled: #1668A8;  /* légèrement plus foncé au scroll */

  /* ── Texture ── */
  --noise-opacity: 0.035;
}