:root {
  --transition-all: all 0.4s ease;
  --ease: var(--transition-all);
  /*DEBUT FIGMA*/
  /* Couleurs */
  
  --color-bleu:  #09b7ce;
  --color-vert:  #00c181;
  --color-jaune: #F8B326;
  --color-orange: #FF8736;
  --color-rose:   #ffa9d4;
  --color-violet:  #6A4DC4; 
  --color-noir:   #03215D;
  --color-blanc:  #ffffff;
  --color-orange-bg: rgba(255, 135, 54, 0.2);
  
  
  --color-primary:#074698;
  --color-secondary:#51B9E9;
  --color-tertiary:#CB9C1A;
  --CSG:#B7EBE0;
  --LSG:#F0F08E;
  --LSM:#FFA68D;
  --beige:#F7F1E8;

  
  --color-gris-1: #f5f5f5;
  --color-gris-2: #e0e0e0;
  --color-gris-3: #c7c7c7;
  --color-gris-4: #a8a8a8;
  --color-gris-5: #7a7a7a;
  
  --font-primary:   'Fraunces', 'DM Sans', sans-serif;
  --font-secondary: 'IBM Plex Sans Condensed', 'Google Sans', sans-serif;



  /* Layouts globaux */
  --Global-layout-Gutter: 20px;
  --Global-layout-Columns: 12;
  --Global-layout-max-width-3columns: 370px;
  --Global-layout-max-width-2columns: 590px;
  --Global-layout-max-width-4columns: 285px;
  --Global-layout-min-width-2columns: 590px;
  --Global-layout-min-width-4columns: 285px;
  --Global-layout-min-width-column: 320px;
  --Global-layout-Global-margin: 120px;
  --Global-layout-Screen-width: 1440px;
  --Global-layout-interlettrage: 1px;

  /*FIN FIGMA*/
  /*
    *https://angel-rs.github.io/css-color-filter-generator/ 
    *Pour appliquer sur SVG noirs
    */
  --border-width: 2px;
  --border-s-width: 1px;

  --filter-blanc: brightness(0) saturate(100%) invert(100%) sepia(0%)
    saturate(0%) hue-rotate(345deg) brightness(100%) contrast(104%);

  
  
  
  --extra-light: 100;
  --light: 200;
  --thin: 300;
  --normal: 400;
  --medium: 500;
  --semi-bold: 600;
  --bold: 700;
  --extra-bold: 800;
  --black: 900;

  --Spaces-XS: 20px;
  --Spaces-XXS: 10px;
  
  /*10px de chaque côté pour les captcha*/
  --espace-min: 10px;
}

@media (max-width: 979px) {
  :root {
      --font-size-html: 16px;
      --fs-xs:   14px;
      --fs-s:    14px;
      --fs-base: 16px;
      --fs-m:    18px;
      --fs-l:    20px;
      --fs-xl:   24px;
      --fs-xxl:  28px;

      --lh-xs:   16px;
      --lh-s:    16px;
      --lh-base: 24px;
      --lh-m:    22px;
      --lh-l:    24px;
      --lh-xl:   28px;
      --lh-xxl:  32px;

      --corner-s: 10px;
      --corner-m: 20px;
      --corner-l: 50px;
      --border-s-radius: 10px;
      --border-radius: 20px;
      --border-l-radius: 25px;
      --border-s: 1px;
      --border:3px;
      
      --gap-s:    5px;
      --gap-base: 10px;
      --gap-m:    20px;
      --gap-l:    30px;
      --gap-xl:  50px;
      --gap-xxl: 100px;
      /*entete*/
      --header-height: 90px;
      --scrolled-header-height: 90px;
      /*largeur du conteneur*/
      --container-width: calc((300 / 320) * 100vw);
      --box-pad: var(--gap);
  }
  
}
@media(min-width:980px) {
  :root {
      --border-s-radius: 10px;
      --border-radius: 20px;
      --border-l-radius: 50px;
      --corner-s: 10px;
      --corner-m: 20px;
      --corner-l: 50px;
      --border-s: 1px;
      --border:3px;
  }
}
@media (min-width: 980px) and (max-width: 1199px) {
  :root {
          /*entete*/
      --header-height: 90px;
      --scrolled-header-height: 90px;
  }
}
@media (min-width: 1200px) and (max-width: 1599px) {
  :root {
          /*entete*/
      --header-height: 162px;
      --scrolled-header-height: 108px;
  }
}
@media (min-width: 980px) and (max-height:799px) and (max-width: 1599px) {
  :root {
    --font-size-html: 16px;
      --fs-xs:   14px;
      --fs-s:    14px;
      --fs-base: 16px;
      --fs-m:    20px;
      --fs-l:    24px;
      --fs-xl:   30px;
      --fs-xxl:  36px;

      --lh-xs:   18px;
      --lh-s:    18px;
      --lh-base: 24px;
      --lh-m:    24px;
      --lh-l:    30px;
      --lh-xl:   36px;
      --lh-xxl:  40px;

      --gap-s:    5px;
      --gap-base: 10px;
      --gap-m:    20px;
      --gap-l:    30px;
      --gap-xl:  50px;
      --gap-xxl: 100px;
      

      /*largeur du conteneur*/
      --container-width: calc((300 / 320) * 100vw);
      --box-pad: var(--gap);
  }
  #site_header .container {
    width:calc((300 / 320) * 100vw);
  }
  article .container {
    max-width:980px;
  }
}

@media (min-width: 980px) and (min-height:800px) and (max-width: 1599px) {
  :root {
    --font-size-html: 16px;
      --fs-xs:   14px;
      --fs-s:    14px;
      --fs-base: 16px;
      --fs-m:    20px;
      --fs-l:    24px;
      --fs-xl:   30px;
      --fs-xxl:  36px;

      --lh-xs:   18px;
      --lh-s:    18px;
      --lh-base: 24px;
      --lh-m:    24px;
      --lh-l:    30px;
      --lh-xl:   36px;
      --lh-xxl:  40px;

      --gap-s:    5px;
      --gap-base: 10px;
      --gap-m:    20px;
      --gap-l:    30px;
      --gap-xl:  50px;
      --gap-xxl: 100px;
      

      /*largeur du conteneur*/
      --container-width: calc((300 / 320) * 100vw);
      --box-pad: var(--gap);
  }
  .container {
    max-width:1200px;
  }
}


@media (min-width: 980px) {
  :root {
    --diaporama-slide-width: calc(2 / 3 * var(--container-width));
    --Global-layout-Gutter: 20px;
  }
}

@media (min-width: 1600px) {
  /* 1600px */
  :root {
    --container-width: 1360px;
    --font-size-html: 18px;

      --fs-xs:   16px;
      --fs-s:    18px;
      --fs-base: 20px;
      --fs-m:    26px;
      --fs-l:    40px;
      --fs-xl:   50px;
      --fs-xxl:  70px;

      --lh-xs:   18px;
      --lh-s:    24px;
      --lh-base: 30px;
      --lh-m:    30px;
      --lh-l:    50px;
      --lh-xl:   60px;
      --lh-xxl:  80px;

      --gap-s:    10px;
      --gap-base: 20px;
      --gap-m:    40px;
      --gap-l:    60px;
      --gap-xl:  100px;
      --gap-xxl: 150px;


    --box-pad: var(--gap-m);

    --header-height: 162px;
    --scrolled-header-height: 108px;
  }
}

:root {
  --gap: var(--gap-base);
  --space-v: var(--gap);
  --space-h: var(--gap);

  --texte-gap: var(--gap-base);

  --box-pad-s: var(--gap-s);
  --box-pad: var(--gap);

  --edito-padding: var(--gap-s);
  /*marge entre les sections*/
  --section-gap: var(--gap-xxl);

  --diaporama-slide-aspect-ratio: 16 / 9;

  --fs-bouton: var(--fs-base);
  --lh-bouton: var(--lh-base);
}

/* Tailles de police */
.fs-xs {
  font-size: var(--fs-xs);
  line-height: var(--lh-xs);
}

.fs-s {
  font-size: var(--fs-s);
  line-height: var(--lh-s);
}

.fs-base {
  font-size: var(--fs-base);
  line-height: var(--lh-base);
}

.fs-m {
  font-size: var(--fs-m);
  line-height: var(--lh-m);
}

.fs-l {
  font-size: var(--fs-l);
  line-height: var(--lh-l);
}

.fs-xl {
  font-size: var(--fs-xl);
  line-height: var(--lh-xl);
}

.fs-xxl {
  font-size: var(--fs-xxl);
  line-height: var(--lh-xxl);
}

.fs-xxxl {
  font-size: var(--fs-xxxl);
  line-height: var(--lh-xxxl);
}