@charset "UTF-8";
/*
  Grand Futur — Variables CSS globales
  Palette 3 : Vivante & audacieuse
  -------------------------------------------------
  Couleurs de base fournies :
  - Bleu cyan       #00BFFF (primary)
  - Magenta         #E4007C (accent)
  - Jaune orangé    #FFB100 (cta)
  - Vert turquoise  #1DD1A1 (success)
  - Gris nuit       #2C2C2C (ink)
  - Blanc           #FFFFFF (bg)
*/

:root {
  /* Couleurs principales (solides) */
  --gf-primary: #00BFFF;   /* Bleu cyan */
  --gf-accent:  #E4007C;   /* Magenta */
  --gf-cta:     #FFB100;   /* Jaune orangé (Call-to-Action) */
  --gf-success: #1DD1A1;   /* Vert turquoise */
  --gf-ink:     #2C2C2C;   /* Gris nuit (texte, UI) */
  --gf-bg:      #FFFFFF;   /* Fond principal */

  /* Alias sémantiques (lisibilité dans les composants) */
  --gf-text: var(--gf-ink);
  --gf-text-inverse: #FFFFFF;
  --gf-surface: #FFFFFF;   /* Surface de carte sur fond clair */

  /* Variantes transparentes (pour overlays, hovers, borders) */
  --gf-primary-05a: rgba(0, 191, 255, 0.05);
  --gf-primary-10a: rgba(0, 191, 255, 0.10);
  --gf-primary-20a: rgba(0, 191, 255, 0.20);
  --gf-accent-10a:  rgba(228, 0, 124, 0.10);
  --gf-accent-20a:  rgba(228, 0, 124, 0.20);
  --gf-cta-10a:     rgba(255, 177, 0, 0.10);
  --gf-cta-20a:     rgba(255, 177, 0, 0.20);
  --gf-success-10a: rgba(29, 209, 161, 0.10);
  --gf-success-20a: rgba(29, 209, 161, 0.20);
  --gf-ink-08a:     rgba(44, 44, 44, 0.08); /* Pour traits de séparation */

  /* Dégradés linéaires — signatures visuelles */
  /* Hero dynamique : bleu → magenta → cta */
  --gf-gd-hero: linear-gradient(135deg,
                    var(--gf-primary) 0%,
                    var(--gf-accent) 40%,
                    var(--gf-cta) 100%);

  /* Effet de fond héro (dégradés radiaux + linéaire) */
  --gf-bg-hero: radial-gradient(1200px 600px at 10% -10%,
                                rgba(0, 191, 255, 0.25),
                                transparent 60%),
                 radial-gradient(1200px 600px at 90% -10%,
                                 rgba(228, 0, 124, 0.22),
                                 transparent 60%),
                 linear-gradient(180deg, #ffffff 0%, #fbfcff 100%);

  /* Accent fort : magenta → cta */
  --gf-gd-accent: linear-gradient(135deg,
                      var(--gf-accent) 0%,
                      var(--gf-cta) 100%);

  /* Tech & fresh : bleu → success */
  --gf-gd-primary: linear-gradient(135deg,
                       var(--gf-primary) 0%,
                       var(--gf-success) 100%);

  /* Ruban CTA : cta → bleu (pour boutons ou badges) */
  --gf-gd-cta: linear-gradient(135deg,
                    var(--gf-cta) 0%,
                    var(--gf-primary) 100%);

  /* Overlay lumineux (pour reflets, glassmorphism) */
  --gf-gd-sheen: linear-gradient(90deg,
                      rgba(255, 255, 255, 0.00) 0%,
                      rgba(255, 255, 255, 0.25) 50%,
                      rgba(255, 255, 255, 0.00) 100%);

  /* Ombre douce sur surfaces claires (subtile) */
  --gf-gd-surface: linear-gradient(180deg,
                        rgba(0, 0, 0, 0.00) 0%,
                        rgba(0, 0, 0, 0.04) 100%);

  /* Traits, bordures, ombres */
  --gf-border: var(--gf-ink-08a);
  --gf-shadow-1: 0 4px 12px rgba(44, 44, 44, 0.12);
  --gf-shadow-2: 0 10px 25px rgba(44, 44, 44, 0.18);
}

/* Mode sombre (optionnel) : on inverse les surfaces et on conserve l'identité colorée */
@media (prefers-color-scheme: dark) {
  :root {
    --gf-bg: #0F0F10;      /* Fond sombre profond */
    --gf-surface: #161617; /* Surface de carte sombre */
    --gf-text: #F5F6F7;    /* Texte principal */
    --gf-text-inverse: #0F0F10;

    /* Adapter la bordure/ombre pour le sombre */
    --gf-border: rgba(255, 255, 255, 0.08);
    --gf-shadow-1: 0 4px 12px rgba(0, 0, 0, 0.35);
    --gf-shadow-2: 0 10px 25px rgba(0, 0, 0, 0.5);

    /* Légers ajustements de dégradés pour un rendu plus riche sur fond sombre */
    --gf-gd-hero: linear-gradient(135deg,
                      var(--gf-primary) 0%,
                      color-mix(in oklab, var(--gf-accent), #000 10%) 40%,
                      color-mix(in oklab, var(--gf-cta),    #000 10%) 100%);
    --gf-gd-accent: linear-gradient(135deg,
                        color-mix(in oklab, var(--gf-accent), #000 6%) 0%,
                        color-mix(in oklab, var(--gf-cta),    #000 6%) 100%);
    --gf-gd-primary: linear-gradient(135deg,
                         color-mix(in oklab, var(--gf-primary), #000 6%) 0%,
                         color-mix(in oklab, var(--gf-success), #000 6%) 100%);

    --gf-bg-hero: radial-gradient(1200px 600px at 10% -10%,
                                  color-mix(in oklab, rgba(0, 191, 255, 0.25), #000 10%),
                                  transparent 60%),
                   radial-gradient(1200px 600px at 90% -10%,
                                   color-mix(in oklab, rgba(228, 0, 124, 0.22), #000 10%),
                                   transparent 60%),
                   linear-gradient(180deg,
                                    color-mix(in oklab, #ffffff, #000 12%) 0%,
                                    color-mix(in oklab, #fbfcff, #000 12%) 100%);
  }
}

/* Exemples d'utilisation (facultatif) -----------------------------
  .btn-primary   { background: var(--gf-gd-primary); color: var(--gf-text-inverse); }
  .btn-accent    { background: var(--gf-gd-accent);  color: var(--gf-text-inverse); }
  .hero-section  { background: var(--gf-gd-hero);    color: var(--gf-text-inverse); }
  .card          { background: var(--gf-surface); box-shadow: var(--gf-shadow-1); border: 1px solid var(--gf-border); }
------------------------------------------------------------------- */