:root {
  --transition-all: all 0.4s ease;
  --ease: var(--transition-all);
  --font-size-html: 16px;

  --Global-layout-Gutter: 0.625rem;

  --Font-type-font-primary: "Anton";
  --Font-type-font-secondary: "Poppins";

  --font-family: var(--Font-type-font-secondary), sans-serif;
  --font-family-header: var(--Font-type-font-primary), sans-serif;
  --Colors-Blanc: #ffffffff;
  --Colors-Noir: #000000ff;
  --Colors-color-primary: #21201eff;
  --Colors-color-secondary: #38d178ff;
  --Colors-color-3: #ff5e00ff;
  --Colors-color-bordure: #5e5e5eff;

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

  --noir: var(--Colors-Noir);
  --blanc: var(--Colors-Blanc);
  --primary: var(--Colors-color-primary);
  --secondary: var(--Colors-color-secondary);
  --tertiary: var(--Colors-color-3);
  --gris-1: var(--Colors-color-bordure);
  --gris-2: var(--Colors-color-bordure);

  --Font-Size-fs-h1: 2.19rem;
  --Font-Size-fs-h2: 1.56rem;
  --Font-Size-fs-h3: 1.125rem;
  --Font-Size-fs-h4: 0.75rem;
  --Font-Size-fs-p: 1rem;
  --Font-Size-fs-puces: 0.875rem;
  --Font-Size-fs-fil-ariane-footer: 0.625rem;

  --Font-Line-height-lh-h1: 2.5rem;
  --Font-Line-height-lh-h2: 1.625rem;
  --Font-Line-height-lh-h3: 1.375rem;
  --Font-Line-height-lh-h4: 1rem;
  --Font-Line-height-lh-p: 1.25rem;
  --Font-Line-height-lh-puces: 1.25rem;
  --Font-Line-height-lh-fil-ariane-footer: 0.75rem;

  --fs-bouton: var(--Font-Size-fs-p);

  --Spaces-XXS: 0.3125rem;
  --Spaces-XS: 0.625rem;
  --Spaces-S: 1.25rem;
  --Spaces-M: 1.875rem;
  --Spaces-L: 3.125rem;
  --Spaces-XL: 6.25rem;
  --Spaces-XXL: 12.5rem;

  --gap-xs: var(--Spaces-XXS);
  --gap-s: var(--Spaces-XS);
  --gap: var(--Global-layout-Gutter);
  --texte-gap: var(--gap-s);
  --gap-m: var(--Spaces-M);
  --gap-l: var(--Spaces-L);

  --Bordure-S: 1px;
  --Bordure-M: 2px;

  --border-s-width: var(--Bordure-S);
  --border-width: var(--Bordure-M);

  --Corner-S: 0.3125rem;
  --Corner-M: 0.625rem;
  --Corner-L: 1.5625rem;

  --Global-layout-interlettrage: 1px;

  /**
    *https://angel-rs.github.io/css-color-filter-generator/ 
    *Pour appliquer sur SVG noirs
    */
  --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;

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

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

  --border-s-radius: var(--box-pad-s);
  --border-radius: var(--box-pad);

  --edito-padding: var(--gap-s);
  /*marge entre les sections*/
  --section-gap: var(--gap-l);
  /*largeur du conteneur*/
  --container-width: calc((300 / 320) * 100vw);
  /*10px de chaque côté pour les captcha*/
  --espace-min: 10px;

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

  /*entete*/
  --header-height: 90px;
  --scrolled-header-height: 90px;
  --admin-bar-height: 46px;
}

/*rupture admin bar wordpress*/
@media (min-width: 768px) {
  :root {
    --admin-bar-height: 46px;
  }
}

@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;
    --fs-xs: 0.5rem;
    --fs-s: 0.78rem;
    --fs-base: 1rem;
    --fs-m: 1.333rem;
    --fs-l: 2.222rem;
    --fs-xl: 2.666rem;
    --fs-xxl: 3.333rem;
    --fs-xxxl: 4rem;
    --box-pad: var(--gap-m);

    --Font-Size-fs-h1: 2.19rem;
    --Font-Size-fs-h2: 1.56rem;
    --Font-Size-fs-h3: 1.125rem;
    --Font-Size-fs-h4: 0.75rem;
    --Font-Size-fs-p: 1rem;
    --Font-Size-fs-puces: 0.875rem;
    --Font-Size-fs-fil-ariane-footer: 0.625rem;

    --fs-xxl: calc(1.5 * var(--Font-Size-fs-h1));
    --fs-xxxl: calc(1.8 * var(--Font-Size-fs-h1));

    --Font-Line-height-lh-h1: 2.5rem;
    --Font-Line-height-lh-h2: 1.625rem;
    --Font-Line-height-lh-h3: 1.375rem;
    --Font-Line-height-lh-h4: 1.25rem;
    --Font-Line-height-lh-p: 1.56rem;
    --Font-Line-height-lh-puces: 1.25rem;
    --Font-Line-height-lh-fil-ariane-footer: 0.75rem;
  }
}

@media (min-width: 1180px) and (max-width: 1399px) {
  /* 1200px */
  :root {
    --container-width: 1000px;
    --scrolled-header-height: 80px;
    --header-height: 144px;
    --font-size-html: 18px;
    --Font-Size-fs-fil-ariane-footer: 0.5rem;
    --Font-Size-fs-fil-ariane-footer: 0.78rem;
    --Font-Size-fs-p: 1rem;
    --Font-Size-fs-h4: 1rem;
    --Font-Size-fs-h3: 1.2rem;
    --Font-Size-fs-h2: 2.222rem;
    --Font-Size-fs-h1: 3.333rem;
    --fs-xxl: calc(1.5 * var(--Font-Size-fs-h1));
    --fs-xxxl: calc(1.8 * var(--Font-Size-fs-h1));

    --Font-Line-height-lh-h1: 3.5rem;
    --Font-Line-height-lh-h2: 2.4rem;
    --Font-Line-height-lh-h3: 1.375rem;
    --Font-Line-height-lh-h4: 1.22rem;
    --Font-Line-height-lh-p: 1.56rem;
    --Font-Line-height-lh-puces: 1.25rem;
    --Font-Line-height-lh-fil-ariane-footer: 0.75rem;

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

@media (min-width: 1400px) {
  /* 1400px */
  :root {
    --container-width: 1340px;
    --scrolled-header-height: 80px;
    --header-height: 144px;
    --font-size-html: 18px;
    --Font-Size-fs-h1: 3.33rem;
    --Font-Size-fs-h2: 2.22rem;
    --Font-Size-fs-h3: 1.2rem;
    --Font-Size-fs-h4: 1rem;
    --Font-Size-fs-p: 1rem;
    --Font-Size-fs-puces: 1.11rem;
    --Font-Size-fs-fil-ariane-footer: 0.78rem;
    --fs-xxl: calc(2 * var(--Font-Size-fs-h1));
    --fs-xxxl: calc(2.6 * var(--Font-Size-fs-h1));
    --box-pad: var(--gap-m);

    --Font-Line-height-lh-h1: 3.89rem;
    --Font-Line-height-lh-h2: 2.56rem;
    --Font-Line-height-lh-h3: 1.67rem;
    --Font-Line-height-lh-h4: 1.22rem;
    --Font-Line-height-lh-p: 1.56rem;
    --Font-Line-height-lh-puces: 1.44rem;
    --Font-Line-height-lh-fil-ariane-footer: 0.89rem;

    --Spaces-XXS: 10px;
    --Spaces-XS: 20px;
    --Spaces-S: 40px;
    --Spaces-M: 60px;
    --Spaces-L: 100px;
    --Spaces-XL: 300px;
    --Spaces-XXL: 500px;

    --Bordure-S: 1px;
    --Bordure-M: 2px;

    --Corner-S: 10px;
    --Corner-M: 20px;
    --Corner-L: 50px;
  }
}

:root {
  --fs-xs: var(--Font-Size-fs-fil-ariane-footer);
  --fs-s: var(--Font-Size-fs-puces);
  --fs-base: var(--Font-Size-fs-p);
  --fs-h4: var(--Font-Size-fs-h4);
  --fs-m: var(--Font-Size-fs-h3);
  --fs-l: var(--Font-Size-fs-h2);
  --fs-xl: var(--Font-Size-fs-h1);
  --fs-xxl: calc(1.2 * var(--Font-Size-fs-h1));
  --fs-xxxl: calc(1.5 * var(--Font-Size-fs-h1));

  --lh-xxs: var(--Font-Line-height-lh-fil-ariane-footer);
  --lh-xs: var(--Font-Line-height-lh-puces);
  --lh-s: var(--Font-Line-height-lh-h4);
  --lh-base: var(--Font-Line-height-lh-p);
  --lh-m: var(--Font-Line-height-lh-h3);
  --lh-l: var(--Font-Line-height-lh-h2);
  --lh-xl: var(--Font-Line-height-lh-h1);
  --lh-xxl: calc(1.2 * var(--Font-Line-height-lh-h1));
  --lh-xxxl: calc(1.5 * var(--Font-Line-height-lh-h1));
}

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