/* @import url("https://fonts.googleapis.com/css?family=Outfit:300,500,400,700"); */

:root {
  --NOIR: #000000;
  --BLANC: #ffffff;

  --NOREE-bleu: rgba(20, 161, 184, 1);
  --Bleu-piscine: var(--NOREE-bleu);
  --NOREE-gris: #3f3e3e;
  --NOREE-vert: #85b445;
  --NOREE-orange: rgba(185, 104, 88, 1);
  --gris-noir-fonc: #1e1e1e;

  --blanc: var(--BLANC);
  --noir: var(--NOIR);
  --gris-1: var(--NOREE-gris);

  --gris-2: var(--gris-noir-fonc);
  --gris-clair: #d9d9d9;
  --vert: var(--NOREE-vert);
  --bleu: var(--Bleu-piscine);
  --orange: var(--NOREE-orange);

  --fond-1: var(--BLANC);
  --fond-2: var(--NOREE-gris);
  --fond-3: var(--gris-noir-fonc);

  --texte-1: var(--BLANC);
  --texte-2: var(--NOREE-vert);
  --texte-3: var(--NOREE-gris);

  --font-family-head: "Outfit", sans-serif;
  --font-family: "Outfit", sans-serif;

  --font-size-html: 16px;

  --fs-s: 0.75rem;
  --fs-base-s: 0.875rem;
  --fs-base: 1rem;
  --fs-bouton: var(--fs-base);
  --fs-base-plus: 1.125rem;
  --fs-base-m: 1.25rem;
  /*--fs-m:1.5rem;  */
  /*--fs-l:2.375rem;*/
  /*--fs-xl:3.125rem;*/
  --fs-xxl: 3.75rem;
  --fs-number: 3.125rem;

  --fs-m: 1.33rem;
  --fs-l: 1.66rem;
  --fs-xl: 2rem;

  --normal: 300;
  --semi-bold: 500;
  --bold: 700;

  --box-s-radius: 10px;
  --box-radius: 30px;
  --transition-all: all 0.3s ease;

  --space-v: 20px;
  --space-h: 20px;
  --big-space-h: 36px;

  --section-v-pad: 12px;
  --big-space-v: 46px;
  --section-pad: 46px 0;

  --container-marge: 0 auto;
  --container-pad: 0 12px;
  --container-pad-h-total: 24px;
  --container-full-pad: var(--container-pad);
  --mega-pad: var(--container-pad);

  --container-width: 100%;
  /*--container-width:calc(100vw - (2 * var(--section-v-pad))); */

  --ease: all 0.4s ease;

  --header-height: 106px;
  --open-header-height: 106px;
  --scrolled-header-height: 106px;

  --header-height: 82px;
  --open-header-height: 82px;
  --scrolled-header-height: 82px;
  --admin-bar-height: 46px;

  --logo-width: 232px;
  --mobile-nav-width: 320px;
  /*alternative 100%*/

  --page-width: 1920px; /* de 1600 a 1920 */
}

@media (min-width: 375px) {
  :root {
    --logo-width: 262px;
  }
}
@media (min-width: 640px) {
  :root {
    --font-size-html: 16px;
    --fs-s: 0.75rem;
    --fs-base: 1rem;
    --fs-bouton: var(--fs-base);
    --fs-base-plus: 1.125rem;
    --fs-base-m: 1.25rem;
    --fs-m: 1.5rem;
    --fs-l: 1.875rem;
    --fs-xl: 2.125rem;
    --fs-xxl: 2.143rem;
    --fs-number: 5rem;
  }
}

@media (min-width: 732px) {
  :root {
    --admin-bar-height: 46px;
  }
}

@media (min-width: 640px) and (max-width: 979px) {
  :root {
    --container-width: 600px;
  }
}
@media (min-width: 980px) {
  :root {
    --font-size-html: 16px;
    --fs-s: 0.75rem;
    --fs-base: 1rem;
    --fs-bouton: var(--fs-base);
    --fs-base-plus: 1.125rem;
    --fs-base-m: 1.25rem;
    --fs-m: 1.5rem;
    --fs-l: 1.875rem;
    --fs-xl: 2.125rem;
    --fs-xxl: 2.143rem;
    --fs-number: 5rem;
    --container-width: calc(100vw - (2 * var(--section-v-pad)));
  }
}

@media (min-width: 1280px) {
  :root {
    --font-size-html: 16px;

    --fs-s: 0.75rem;
    --fs-base: 1rem;
    --fs-bouton: var(--fs-base);
    --fs-base-plus: 1.125rem;
    --fs-base-m: 1.25rem;
    --fs-m: 1.875rem;
    --fs-l: 2.25rem;
    --fs-xl: 3.125rem;
    --fs-xxl: 5rem;
    --fs-number: 5rem;

    --big-space-v: 86px;
    --big-space-h: 86px;

    --section-pad: 86px 0;
    --container-width: 800px;
    --container-pad: 0px 20px;
    --container-pad-h-total: 40px;
    --container-marge: 0 auto;
    --container-full-pad: var(--container-pad);
    --mega-pad: var(--container-pad);
    --admin-bar-height: 46px;
    --vary-base-fs: clamp(14px, 1.25vw, var(--fs-base));
  }
}

@media (min-width: 1200px) {
  :root {
    --section-pad: 86px 0px;
    /* --container-pad:0px 100px 0px 100px; */
    --container-pad: 0 30px;
    /*cesd valeurs ne peuvent pas changer. La zone doit faire 1120 (16 / 10 de 700)*/
    --container-pad-h-total: 60px;
    --container-width: 1180px;
    --container-marge: 0 auto;
    --container-full-pad: var(--container-pad);
  }
}
@media (min-width: 1600px) {
  :root {
    --header-height: 150px;
    --open-header-height: 150px;
    --scrolled-header-height: 150px;
    --big-space-v: 86px;
    --big-space-h: 100px;
    --section-pad: 86px 0px;
    --fs-xl: 3rem;

    --container-pad: 0 32px;
    --container-pad-h-total: 64px;
    --container-marge: 0 auto;
    --container-full-pad: var(--container-pad);
    --mega-pad: var(--container-pad);
  }
}
@media (min-width: 1920px) {
  :root {
    --fs-xl: 5rem;
  }
}