/************************************************************************
                            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 { 

  /********** 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:      #f0f0f0;
  --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;

  /********** 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;

  --height-header: 100px;
  --height-header-mobile: 200px;

  /********** FONTS **********/
    /** Si une font **/
    --font-text: 'Poppins', sans-serif;
  
    --font-text-thin: 100;
    --font-text-regular: 400;
    --font-text-bold: 700;

    --font-title: 'Fira Sans', sans-serif;
    
    --font-title-thin: 100;
    --font-title-regular: 400;
    --font-title-bold: 700;
  

  /********** SIZES **********/
  --size-h1:        3.5rem;
  --size-h1-height: 3.8rem;
  --size-h2:        2.4rem;
  --size-h2-height: 2.5rem;
  --size-h3:        3.6rem;
  --size-h3-height: 4rem;  
  --size-h4:        1.5rem;
  --size-h4-height: 1.5rem;
  --size-p:         1.3rem;
  --size-p-height:  2rem;    

  font-size: 62.5%;

  /********** WIDTH **********/
    --width-column: 7.6%;
    --width-space: 0.8%;

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