/*ici nous initialisons des variables de couleurs a appeler dans vos autres fichiers CSS. cela permettera de ne pas avoir a maintenir un code surchargé de couleurs defini en dur, et de pouvoir tester des jeux de couleurs rapidement */

:root{

    --purple: #6768ac;
    --yellow: #ecc371;
    --paleblue: #85a2ab;
    --red: #ea435e;
    --green: #47986b;

    /*BRANDING 2026*/

    /* CSS HSL */

    /*2025*/
    --dark-green: hsla(185, 58%, 16%, 1);
    --yellow: hsla(37, 100%, 56%, 1);
    --sea-green: hsla(178, 58%, 43%, 1);
    --lion: hsla(35, 41%, 56%, 1);
    --ecru: hsla(37, 53%, 69%, 1);
    --cream: hsla(37, 51%, 92%, 1);

    /*2026*/
    --ultra-marine: rgba(29, 34, 56, 1);
    --marine: rgba(42, 51, 84, 1);
    --marine-blue: rgba(79, 92, 152, 1);
    --blue-lagoon: rgba(97, 103, 147, 1);
    --ice-blue: rgba(141, 182, 255, 1);

    --paprika: rgb(221, 83, 37);
    --cienna: rgb(197, 87, 42);
    --chocolate: rgb(149, 66, 38);
    --milk: rgb(232, 210, 201);


    /*GRADIENT FOR BANNER*/
    --dark-green-gradient: radial-gradient(circle, rgba(17,59,64,1) 42%, rgba(11,43,45,1) 100%);



/*ceci est un exemple : vous pouvez mettre en "variable" des liens url*/
    --url: url("https://picsum.photos/1024/720");
/*ceci est un exemple : vous pouvez creer des "variables" de taille*/
    --size-3: 3rem;
/*ceci est un exemple : vous pouvez imbriquer des var*/
    --size-title: var(--size-3);
    --size-marg: var(--size-3);


/*pour cette page unique, je vous propose de ne mettre en place un set de couleur moins complexe*/

/* CLR pour couleur + -nom*/
--clr-primary:var(--ultra-marine);
--clr-secondary:var(--paprika);

--clr-lighter:var(--milk);
--clr-light:var(--milk);
--clr-neutral:var(--chocolate);
--clr-dark: var(--ultra-marine);

--clr-white:rgba(255,255,255,0.9);
--clr-black:rgba(0,0,0,0.9);

--bg-dark: var(--ultra-marine);

/*ceci est un exemple : vous pouvez mettre en "variable" des liens url*/
--url: url(../img/backgrounds/Firefly\ 3d\ hexagons\ floating3.jpg);
/*ceci est un exemple : vous pouvez creer des "variables" de taille*/
--size-3: 3rem;
/*ceci est un exemple : vous pouvez imbriquer des var*/
--size-title: var(--size-3);
--size-marg: var(--size-3);







/*-----------------------------------*/
/*----------CUSTOM ONE PAGE----------*/
/*-----------------------------------*/
      --ultra-marine: rgba(29, 34, 56, 1);
      --clr-black: #000;
      --clr-white: #fff;
      --clr-accent: #ff0000;

      /* Masque de lumière semi-transparent par défaut */
      --bg-color-1: rgba(255, 255, 255, 0.25);
      --bg-color-2: rgba(0, 0, 0, 0.2);
      --bg-color-3: rgba(0, 0, 0, 0.8);

      /* Position du centre et diffusion */
      --bg-x: 50%;
      --bg-y: 50%;
      --bg-stop-1: 30%;
      --bg-stop-2: 68%;
}