/************************************************************************
                            IMPORT DES POLICES
************************************************************************/

/*
 * @import url('https://fonts.googleapis.com/css2?family=Roboto:wght@100;400;900&family=Roboto+Condensed:wght@300;400;700&display=swap');
 * mettre dans font.css le contenu de l'url une fois que c'est terminé.
 * Accelere le chargement de la page
 */

 :root {
   --color-primary: rgb(191, 165, 120);
   --color-primary-text: #FFF;
   --color-primary-trans: rgba(191, 165, 120, 0.8);

   --color-secondary: rgb(191, 165, 120);
   --color-secondary-text: #FFF;
   --color-secondary-trans: rgba(191, 165, 120, 0.8);   
 
   --color-gris: rgb(118, 118, 119);
   --color-gris-text: #FFF;
   --color-gris-trans: rgba(118, 118, 119, 0.8);
 
   --color-black: #000;
   --color-black-trans: rgba(0, 0, 0, 0.8);
   --color-black-trans-plus: rgba(0, 0, 0, 0.4);
 
   --color-white: #FFF;
   --color-white-trans: rgba(255, 255, 255, 0.8);
   --color-white-trans-plus: rgba(0, 0, 0, 0.4);

   --vertical-menu-color-bg: #5066E2;
   --vertical-menu-color-text: #FFF;
   --vertical-menu-width : 400px;
      
   --gap-xs: 8px;
   --gap: 15px;
   --gap-2: 30px;
   --gap-3: 45px;
   --gap-4: 60px;
   --gap-5: 75px;
   --gap-6: 90px;
   --gap-7: 105px;
   --gap-8: 120px;
   --gap-9: 135px;
   --gap-10: 150px;
 
   --gap-button-v: 5px;
   --gap-button-h: 10px;
 
   --font-primary: 'Roboto', sans-serif;
   --font-primary-thin: 100;
   --font-primary-regular: 400;
   --font-primary-bold: 900;

   --font-secondary: 'Roboto Condensed', sans-serif;
   --font-secondary-thin: 300;
   --font-secondary-regular: 400;
   --font-secondary-bold: 700;
 
   --height-header: 80px;
 
   --size-h1: 3.5rem;
   --size-h1-height: 3rem;
   --size-h2: 2.4rem;
   --size-h2-height: 2.4rem;
   --size-h3: 1.6rem;
   --size-h3-height: 2rem;
   --size-h4: 1.5rem;
   --size-h4-height: 1.2rem;
   --size-p: 1.45rem;
   --size-p-height: 2rem;
 
   font-size: 62.5%;
 }


/************************************************************************
                            IMPORT DES POLICES
************************************************************************/

/*
 * @import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@100;400;700&display=swap');
 * mettre dans font.css le contenu de l'url une fois que c'est terminé.
 * Accelere le chargement de la page
 */


:root { 

  --height-header: 80px;

  /********** COULEURS **********/
  --color-black:            #000;
  --color-black-trans:      rgba(0, 0, 0, 0.8);
  --color-black-trans-mid:  rgba(0, 0, 0, 0.5);
  --color-black-trans-plus: rgba(0, 0, 0, 0.2);
  --color-white:            #FFF;
  --color-white-trans:      rgba(255, 255, 255, 0.8);
  --color-white-trans-mid:  rgba(255, 255, 255, 0.5);
  --color-white-trans-plus: rgba(255, 255, 255, 0.2);

  --color-blue:            #00899c;
  --color-blue-trans:      #008a9cc8;
  --color-blue-trans-mid:  #008a9cc5;
  --color-blue-text:       #fff;
  --color-blue-trans-text: #fff;

  --color-dark-blue:            #005271;
  --color-dark-blue-trans:      #005271c8;
  --color-dark-blue-trans-mid:  #005271c5;
  --color-dark-blue-text:       #fff;
  --color-dark-blue-trans-text: #fff;

  --color-orange:      #fe9934;
  --color-orange-trans:#fe9934c8;
  --color-orange-text: #fff;

  --color-grey:      #AAA;
  --color-grey-trans:#f0f0f0c8;
  --color-grey-text: #000;

  --color-dark-grey: #878787;
  --color-dark-grey-trans: #878787c8;
  --color-dark-grey-text: #000;

  /********** AUTRES COULEURS **********/
  --color-green:          #1a9989;
  --color-green-text:     #fff;
  --color-greywhite:      #b6c2cb;
  --color-greywhite-text: #000;

  --color-greylight: #EFEFEF;

  --color-text: #333;

  --color-overlay: #000000AA;
  --color-primary-overlay: #145A70AA;

  /********** CF7 **********/
    --color-border: #f0f0f0;
    --color-placeholder: #878787;
    --color-focus: #00899c;

  /********** GAPS **********/
  --gap-xxs : 4px;
  --gap-xs  : 8px;
  --gap     : 15px;
  --gap-2   : 30px;
  --gap-3   : 45px;
  --gap-4   : 60px;
  --gap-5   : 75px;
  --gap-6   : 90px;
  --gap-7   : 105px;
  --gap-8   : 120px;
  --gap-9   : 135px;
  --gap-10  : 150px;
  --gap-11  : 165px;
  --gap-12  : 180px;
  --gap-13  : 195px;
  --gap-14  : 210px;
  --gap-15  : 225px;

  --gap-button-v: 5px;
  --gap-button-h: 10px;

  /********** FONTS **********/    
    --font-text: 'Jost', sans-serif;
    --font-text-thin: 100;
    --font-text-regular: 400;
    --font-text-bold: 900;

    --font-title: 'Jost', sans-serif;
    --font-title-thin: 100;
    --font-title-regular: 400;
    --font-title-bold: 900;

    --font-scale: 1.15; 

  font-size: 62.5%;
}