:root {
  --primary: #345a7d;
  --noir: #000000;
  --blanc: #ffffff;
  --clair: #000000;
  --beige: #fdf7e2;
  --orange: #f39c13;
  --jaune: #eec216;
  --gris-fonce: var(--primary);
  --bleu: #009de0;
  --bleu-plage: #62bcc3;

  --bleu-fonce: #2f6d9a;
  --border-color: var(--primary);

  --filter-primary: brightness(0) saturate(100%) invert(34%) sepia(10%)
    saturate(2588%) hue-rotate(168deg) brightness(88%) contrast(85%);
  --filter-bleu: brightness(0) saturate(100%) invert(45%) sepia(77%)
    saturate(1780%) hue-rotate(167deg) brightness(92%) contrast(101%);
  --filter-orange: brightness(0) saturate(100%) invert(73%) sepia(36%)
    saturate(4616%) hue-rotate(355deg) brightness(101%) contrast(91%);

  --transition-all: all 0.3s ease;

  --font-size-html: 16px;

  --font-family: "Figtree";
  --font-family-head: "Righteous";

  --light: 300;
  --normal: 400;
  --medium: 500;
  --semi-bold: 600;
  --bold: 700;
  --extra-bold: 800;

  --fs-base: 16px;
  --fs-bouton: 16px;
  --fs-s: 14px;
  --fs-m: 20px;
  --fs-l: 24px;
  --fs-xl: 30px;

  --ease: all 0.4s ease;

  --header-height: 60px;
  --open-header-height: 60px;
  --scrolled-header-height: 60px;
  --admin-bar-height: 46px;
  --section-y-pad: 50px;
  --gap: 2.5rem;
  --gap-s: 1.25rem;
  --gap-l: 3.125rem;
  --space-h: var(--gap);
  --rounded: 20px;
  --container-width: 94%;
  --outer-width: var(--container-width);
}

@media (min-width: 640px) and (max-width: 979px) {
  :root {
    --container-width: 620px;
    --outer-width: 90vw;
  }
}
@media (min-width: 784px) and (max-width: 979px) {
  :root {
    --admin-bar-height: 32px;
  }
}
@media (min-width: 980px) {
  :root {
    --admin-bar-height: 32px;

    --scrolled-height: 121px;
    --header-height: 121px;
    /* --container-width: 94%; */
    --container-width: 870px;
    --outer-width: 960px;
    --gap-l: 6.25rem;
    --fs-base: 16px;
    --fs-s: 14px;
    --fs-m: 20px;
    --fs-l: 24px;
    --fs-xl: 30px;
  }
}

@media (min-width: 1280px) {
  :root {
    --container-width: 1130px;
    --outer-width: 1190px;
  }
}

@media (min-width: 1440px) {
  :root {
    --fs-base: 20px;
    --fs-s: 16px;
    --fs-m: 26px;
    --fs-l: 40px;
    --fs-xl: 70px;

    --section-y-pad: 100px;
    --header-height: 115px;
    --container-width: 1130px;
    --outer-width: 1440px;
  }
}