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

  --m-max:979px


  --font-family-head: "Space Grotesk", sans-serif;
  --Fonts-title: "Space Grotesk";
  --font-family: "Space Grotesk", sans-serif;
  --Fonts-font-paragraphe: "Space Grotesk";

  --noir: #16161b;
  --blanc: #ffffff;
  --gris-clair: #b3b3b3;
  --primary: #12074d;
  --secondary: #fe9318;
  --gris-1: #b3b3b3;
  --primary-light: #b3b5e8;
  --secondary-light: #fbdba0;
  --Colors-orange-clair: var(--secondary-light);

  --Colors-blanc: var(--blanc);
  --Colors-noir: var(--noir);
  --Colors-gris-clair: var(--gris-clair);
  --Colors-primary: var(--primary);
  --Colors-secondary: var(--secondary);
  --Colors-gris-1: var(--gris-1);
  --Colors-primary-light: var(--primary-light);
  --Colors-secondary-light: var(--secondary-light);
  --fond-noir: var(--noir);
  --fond-blanc: var(--blanc);
  --fond-primary: var(--primary);
  --fond-secondary: var(--secondary);
  --fond-primary-light: var(--primary-light);
  --fond-secondary-light: var(--secondary-light);

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

  --font-size-html: 16px;

  --fs-xs: 0.5rem;
  --fs-s: 0.75rem;
  --fs-base: 14px;
  --fs-h4: 1.25rem;
  --fs-m: 1.25rem;
  --fs-l: 1.5rem;
  --fs-xl: 2rem;
  --fs-xxl: 2.5rem;
  --fs-xxxl: 3rem;
  --fs-bouton: 1.125rem;

  --Size-font-fs-h1: var(--fs-xl, 3rem);
  --Size-font-fs-h2: var(--fs-l, 2.5rem);
  --Size-font-fs-h3: var(--fs-m, 2rem);
  --Size-font-fs-h4: var(--fs-h4, 1.25rem);
  --Size-font-fs-paragraphe: var(--fs-base);
  --Size-font-lh-h1: 1;
  --Size-font-lh-h2: 1;
  --Size-font-lh-h3: 24/20; /* 187.5% */
  --Size-font-lh-h4: 20/18; /* 180% */
  --Size-font-lh-paragraphe: 20/14; /* 140% */
  --Size-font-fs-ariane: 0.625rem;

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

  --Gap-gap-xs: 0.625rem;
  --Gap-gap-s: 1.25rem;
  --Gap-gap-m: 2.5rem;
  --Gap-gap-l: 6.25rem;
  --gap-xs: var(--Gap-gap-xs, 0.625rem);
  --gap-s: var(--Gap-gap-s, 1.25rem);
  --gap-m: var(--Gap-gap-m, 2.5rem);
  --gap-l: var(--Gap-gap-l, 6.25rem);
  --gap: var(--gap-s);
  --texte-gap: var(--gap-s);
  --space-v: var(--gap-m);
  --space-h: var(--gap-m);

  --box-pad-s: var(--gap-xs);
  --box-pad: var(--gap-s);
  --Corners-corner: 1.25rem;
  --border-s-radius: var(--Corners-corner, 1.25rem);
  --border-radius: var(--Corners-corner, 1.25rem);
  --border-width: 1px;

  /*padding de l'édito pour le mobile, normalement max 10px, pas toujours utilisé, normalement container-width:fait le job*/
  --edito-padding: var(--gap-s);
  /*marge entre les sections*/
  --section-gap: var(--gap-m);
  /*largeur du conteneur*/
  --container-width: calc((300 / 320) * 100%);
  /*10px de chaque côté pour les captcha*/
  --espace-min: 10px;

  /*entete*/
  --header-height: calc(2.5rem + (2 * var(--gap-s)));
  --scrolled-header-height: var(--header-height);
  --admin-bar-height: 46px;
}

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

@media (min-width: 480px) and (max-width: 639px) {
  :root {
    --container-width: calc((300 / 320) * 480px);
    --font-size-html: 16px;
    --fs-xs: 0.5rem;
    --fs-s: 0.625rem;
    --fs-base: 0.875rem;
    --fs-h4: 1rem;
    --fs-m: 1.25rem;
    --fs-l: 1.75rem;
    --fs-xl: 2.25rem;
    --fs-xxl: 2.75rem;
    --fs-xxxl: 3rem;
    --Size-font-fs-h1: var(--fs-xl, 2.25rem);
    --Size-font-fs-h2: var(--fs-l, 1.75rem);
    --Size-font-fs-h3: var(--fs-m, 1.25rem);
    --Size-font-fs-h4: var(--fs-h4, 1rem);
    --Size-font-fs-paragraphe: var(--fs-base, 0.875rem);
    --Size-font-lh-h1: 2.4rem; /* 125% */
    --Size-font-lh-h2: 1.9rem; /* 125% */
    --Size-font-lh-h3: 1.25rem; /* 125% */
    --Size-font-lh-h4: 1.125rem; /* 125% */
    --Size-font-lh-paragraphe: 1.3rem; /* 140% */
  }
}

@media (min-width: 640px) and (max-width: 767px) {
  :root {
    --container-width: 620px;
    --font-size-html: 16px;
    --fs-xs: 0.5rem;
    --fs-s: 0.6875rem;
    --fs-base: 0.9375rem;
    --fs-h4: 1.125rem;
    --fs-m: 1.375rem;
    --fs-l: 1.875rem;
    --fs-xl: 2.5rem;
    --fs-xxl: 3rem;
    --fs-xxxl: 3.5rem;
    --Size-font-fs-h1: var(--fs-xl, 2.5rem);
    --Size-font-fs-h2: var(--fs-l, 1.875rem);
    --Size-font-fs-h3: var(--fs-m, 1.375rem);
    --Size-font-fs-h4: var(--fs-h4, 1.125rem);
    --Size-font-fs-paragraphe: var(--fs-base, 0.9375rem);
    --Size-font-lh-h1: 2.6255rem; /* 125% */
    --Size-font-lh-h2: 1.95rem; /* 125% */
    --Size-font-lh-h3: 1.425rem; /* 125% */
    --Size-font-lh-h4: 1.25rem; /* 125% */
    --Size-font-lh-paragraphe: 1.6rem; /* 140% */
  }
}

@media (min-width: 768px) and (max-width: 979px) {
  /* 768px */
  :root {
    --container-width: 748px;
    --font-size-html: 16px;
    --fs-xs: 0.5rem;
    --fs-s: 0.75rem;
    --fs-base: 1rem;
    --fs-h4: 1.25rem;
    --fs-m: 1.5rem;
    --fs-l: 2.25rem;
    --fs-xl: 3rem;
    --fs-xxl: 3.5rem;
    --fs-xxxl: 4rem;
    --Size-font-fs-h1: var(--fs-xl, 3rem);
    --Size-font-fs-h2: var(--fs-l, 2.25rem);
    --Size-font-fs-h3: var(--fs-m, 1.5rem);
    --Size-font-fs-h4: var(--fs-h4, 1.25rem);
    --Size-font-fs-paragraphe: var(--fs-base, 1rem);
    --Size-font-lh-h1: 3.125rem; /* 125% */
    --Size-font-lh-h2: 2.365rem; /* 125% */
    --Size-font-lh-h3: 1.625rem; /* 125% */
    --Size-font-lh-h4: 1.325rem; /* 125% */
    --Size-font-lh-paragraphe: 1.75rem; /* 140% */
  }
}

@media (min-width: 980px) and (max-width: 1179px) {
  /* 980px */
  :root {
    --container-width: 906px;

    --font-size-html: 16px;
    --fs-xs: 0.5rem;
    --fs-s: 0.75rem;
    --fs-base: 1.125rem;
    --fs-h4: 1.375rem;
    --fs-m: 1.75rem;
    --fs-l: 2.75rem;
    --fs-xl: 3.75rem;
    --fs-xxl: 4.25rem;
    --fs-xxxl: 4.75rem;
    --Size-font-fs-h1: var(--fs-xl, 3.75rem);
    --Size-font-fs-h2: var(--fs-l, 2.75rem);
    --Size-font-fs-h3: var(--fs-m, 1.75rem);
    --Size-font-fs-h4: var(--fs-h4, 1.375rem);
    --Size-font-fs-paragraphe: var(--fs-base, 1.125rem);
    --Size-font-lh-h1: 3.9rem; /* 125% */
    --Size-font-lh-h2: 2.9rem; /* 125% */
    --Size-font-lh-h3: 1.9rem; /* 125% */
    --Size-font-lh-h4: 1.5rem; /* 125% */
    --Size-font-lh-paragraphe: 2rem; /* 140% */
  }
}

@media (min-width: 1179px) and (max-width: 1399px) {
  /* 1200px */
  :root {
    --container-width: 1000px;
    --scrolled-header-height: 142px;
    --header-height: 142px;

    --font-size-html: 16px;
    --fs-xs: 0.5rem;
    --fs-s: 0.75rem;
    --fs-base: 1.1875rem;
    --fs-h4: 1.5rem;
    --fs-m: 2rem;
    --fs-l: 3.5rem;
    --fs-xl: 5rem;
    --fs-xxl: 5.5rem;
    --fs-xxxl: 6rem;

    --Size-font-fs-h1: var(--fs-xl, 5rem);
    --Size-font-fs-h2: var(--fs-l, 3.5rem);
    --Size-font-fs-h3: var(--fs-m, 2rem);
    --Size-font-fs-h4: var(--fs-h4, 1.5rem);
    --Size-font-fs-paragraphe: var(--fs-base, 1.1875rem);
    --Size-font-lh-h1: 6.525rem; /* 125% */
    --Size-font-lh-h2: 3.75rem; /* 125% */
    --Size-font-lh-h3: 2.125rem; /* 125% */
    --Size-font-lh-h4: 1.275rem; /* 125% */
    --Size-font-lh-paragraphe: 2.25rem; /* 140% */
  }
}

@media (min-width: 980px) {
  :root {
    --header-height: calc(6.75rem + (1 * var(--gap-s)));
    --box-pad-s: var(--gap-s);
    --box-pad: var(--gap-m);
    --section-gap: var(--gap-l);
  }
}
@media (min-width: 1400px) {
  /* 1400px */
  :root {
    --container-width: 1240px;
    --scrolled-header-height: 142px;

    --font-size-html: 16px;
    --fs-xs: 0.5rem;
    --fs-s: 0.75rem;
    --fs-base: 1.25rem;
    --fs-h4: 1.625rem;
    --fs-m: 2.5rem; /*26*/
    --fs-l: 5rem;
    --fs-xl: 7rem;
    --fs-xxl: 2.5rem;
    --fs-xxxl: 3rem;
    --Size-font-fs-h1: var(--fs-xl, 3rem);
    --Size-font-fs-h2: var(--fs-l, 2.5rem);
    --Size-font-fs-h3: var(--fs-m, 2rem);
    --Size-font-fs-h4: var(--fs-h4, 1.25rem);
    --Size-font-fs-paragraphe: var(--fs-base, 1rem);
    --Size-font-lh-h1: 7.625rem; /* 125% */
    --Size-font-lh-h2: 5.125rem; /* 68.333% */
    --Size-font-lh-h3: 2.625rem; /* 187.5% */
    --Size-font-lh-h4: 1.625rem; /* 180% */
    --Size-font-lh-paragraphe: 1.75rem; /* 140% */
  }
}