:root {
  --transition-all: all 0.4s ease;
  --ease: var(--transition-all);

  /*DEBUT FIGMA*/
  /* Couleurs */
  --color-blanc: #ffffff;
  --color-noir: #000000;
  --color-primary: #f8dc09;
  --color-secondary: #fcf5e4;
  --color-bleu: #4f7abc;
  --color-rouge: #d27161;
  --color-vert: #66a977;

  /* Typographies */
  --font-primary: "Boldonse", sans-serif;
  --font-secondary: "Old Standard TT", serif;

  /* Line heights */
  --lh-base: 170%; /* 34px / 20px */
  --lh-m: 177%; /* 46px / 26px */
  --lh-l: 160%; /* 64px / 40px */
  --lh-xl: 131%; /* 85px / 65px */
  --lh-xs: 150%; /* 15px / 10px */
  --lh-s: 163%; /* 26px / 16px */

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

  --fond-noir: var(--color-noir);
  --fond-blanc: var(--color-blanc);
  --fond-primary: var(--color-primary);
  --fond-secondary: var(--color-secondary);
  --fond-tertiary: var(--color-3);

  --gris-1: var(--color-noir);
  --gris-2: var(--color-noir);
  --color-3: var(--color-tertiary);
  --color-4: var(--color-noir);
  --color-primary-light: var(--color-secondary);
  --color-secondary-dark: var(--color-secondary);

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

  --gap: var(--gap-base);
  --gap-s: 10px;
  --texte-gap: var(--gap);

  /* Coins */
  --corner-s: 10px;
  --corner-m: 10px;
  --corner-l: 10px;

  --border-s-radius: var(--corner-s);
  --border-radius: var(--corner-s);

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

  /*entete*/
  --header-height: 90px;
  --scrolled-header-height: 90px;
  /*10px de chaque côté pour les captcha*/
  --espace-min: 10px;
}

@media (max-width: 979px) {
  :root {
    --font-size-html: 16px;
    --fs-base: 1rem; /* 16px */
    --fs-m: 1.25rem; /* 20px */
    --fs-l: 1.5rem; /*  */
    --fs-xl: 1.75rem; /* 32px */
    --fs-xs: 0.8rem; /* 10px */
    --fs-s: 0.9rem; /* 16px */
    --fs-h2: var(--fs-l);
    /* Espacements */
    --gap-base: 20px;
    --gap-m: 25px;
    --gap-l: 30px;
    --gap-xl: 40px;
    --gap-xxl: 100px;
    --Spaces-XS: 20px;
    --Spaces-XXS: 10px;

    /*largeur du conteneur*/
    --container-width: calc((300 / 320) * 100vw);
    --box-pad: var(--gap);
  }
}
@media (min-width: 980px) and (max-width: 1179px) {
  :root {
    --font-size-html: 16px;
    --fs-base: 1rem; /* 20px */
    --fs-m: 1.25rem; /* 26px */
    --fs-l: 1.5rem; /* 40px */
    --fs-xl: 1.75rem; /* 65px */
    --fs-xs: 0.8rem; /* 10px */
    --fs-s: 0.9rem; /* 16px */
    --fs-h2: var(--fs-l);

    /* Espacements */
    --gap-base: 20px;
    --gap-m: 30px;
    --gap-l: 40px;
    --gap-xl: 50px;
    --gap-xxl: 100px;
    --Spaces-XS: 20px;
    --Spaces-XXS: 10px;

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

@media (min-width: 1180px) and (max-width: 1399px) {
  :root {
    --font-size-html: 16px;
    --fs-base: 1.25rem; /* 20px */
    --fs-m: 1.625rem; /* 26px */
    --fs-l: 2.25rem; /* 40px */
    --fs-xl: 3rem; /* 65px */
    --fs-xs: 0.8rem; /* 10px */
    --fs-s: 1rem; /* 16px */
    --fs-h2: var(--fs-l);
    /* Espacements */
    --gap-base: 20px;
    --gap-m: 30px;
    --gap-l: 40px;
    --gap-xl: 50px;
    --gap-xxl: 100px;
    --Spaces-XS: 20px;
    --Spaces-XXS: 10px;

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

@media (min-width: 480px) and (max-width: 639px) {
  :root {
    --container-width: 433px;
  }
}

@media (min-width: 640px) and (max-width: 767px) {
  :root {
    --container-width: 620px;
    --box-pad: var(--gap-m);
  }
}

@media (min-width: 768px) and (max-width: 979px) {
  /* 768px */
  :root {
    --container-width: 660px;
    --box-pad: var(--gap-m);
  }
}
@media (min-width: 980px) {
  :root {
    --diaporama-slide-width: calc(2 / 3 * var(--container-width));
    --Global-layout-Gutter: 20px;
  }
}
@media (min-width: 980px) and (max-width: 1179px) {
  /* 980px */
  :root {
    --container-width: 906px;

    --font-size-html: 18px;
    --header-height: 144px;
    --scrolled-header-height: 80px;

    --box-pad: var(--gap-m);
  }
}
@media (min-width: 1180px) and (max-width: 1399px) {
  /* 980px */
  :root {
    --container-width: 1100px;
  }
}
@media (min-width: 1400px) {
  /* 1400px */
  :root {
    --container-width: 1200px;
    --font-size-html: 18px;

    --font-size-html: 16px;
    --fs-base: 1.25rem; /* 20px */
    --fs-m: 1.625rem; /* 26px */
    --fs-l: 2.5rem; /* 40px */
    --fs-xl: 4.0625rem; /* 65px */
    --fs-xs: 0.625rem; /* 10px */
    --fs-s: 1rem; /* 16px */
    --fs-h2: var(--fs-l);

    /* Espacements */
    --gap-base: 20px;
    --gap-m: 40px;
    --gap-l: 60px;
    --gap-xl: 150px;
    --gap-xxl: 150px;
    --Spaces-XS: 20px;
    --Spaces-XXS: 10px;

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

    --header-height: 144px;
    --scrolled-header-height: 80px;
  }
}

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

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

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

  --diaporama-slide-width: var(--container-width);
  --diaporama-slide-aspect-ratio: 16 / 9;
}

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