@import url("https://fonts.googleapis.com/css2?family=Big+Shoulders:opsz,wght@10..72,100..900&family=DM+Sans:ital,opsz,wght@0,9..40,100..1000;1,9..40,100..1000&display=swap");
:root {
  --transition-all: all 0.4s ease;
  --ease: var(--transition-all);

  --font-family-head: "Big Shoulders Display", monospace;
  --font-family: "DM Sans", sans-serif;

  --gris: #16161b;
  --noir: var(--gris);
  --blanc: #ffffff;
  --bleu: #1d1cfe;
  --vert: #6bb543;
  --gris-bleu: #eaecf4;

  --primary: var(--bleu);
  --secondary: var(--vert);
  --tertiary: var(--vert);

  --fond-noir: var(--noir);
  --fond-blanc: var(--blanc);

  --fond-primary: var(--primary);
  --fond-secondary: var(--secondary);
  --fond-tertiary: var(--tertiary);

  --gap-xs: 0.625rem;
  --gap-gap-xs: var(--gap-xs);
  --gap-s: 1rem;
  --gap-gap-s: var(--gap-s);
  --gap-m: 1.25rem;
  --gap-gap-m: var(--gap-m);
  --gap-l: 2.5rem;
  --gap-gap-l: var(--gap-l);
  --gap-xl: 3.25rem;
  --gap-gap-xl: var(--gap-xl);

  --gap: var(--gap-s);
  --texte-gap: 1.75rem;
  --section-gap: var(--gap-l);

  --box-radius: 15px; /*20 desktop*/
  --border-radius: var(--box-radius);
  --button-radius: 5px;

  --bodybackground: var(--blanc);
  --bodycolor: var(--gris);
  --linkcolor: var(--primary);

  --font-size-html: 16px;

  --fs-fs-paragraphe: 14px;
  --fs-lh-paragraphe: 20px;

  --fs-fs-h4: 16px;
  --fs-lh-h4: 20px;

  --fs-lh-h3: 24px;
  --fs-fs-h3: 20px;

  --fs-fs-h2: 30px;
  --fs-lh-h2: 30px;
  --fs-fs-h1: 40px;
  --fs-lh-h1: 40px;

  --fs-xs: 0.8rem;
  --fs-s: 0.9rem;
  --fs-base: var(--fs-fs-paragraphe);
  --fs-base-m: var(--fs-h4);
  --fs-m: var(--fs-fs-h3);
  --fs-l: var(--fs-fs-h2);
  --fs-xl: var(--fs-fs-h1);
  --fs-xxl: var(--fs-fs-h1);
  --fs-xxxl: var(--fs-fs-h1);

  --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);
  --box-pad: var(--gap-m);

  --border-width: 2px;

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

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

@media (min-width: 980px) {
  :root {
    --box-radius: 20px; /*20 desktop*/
    --border-radius: var(--box-radius);
    --gap-xs: 0.625rem;
    --gap-gap-xs: var(--gap-xs);
    --gap-s: 1rem;
    --gap-gap-s: var(--gap-s);
    --gap-m: 1.25rem;
    --gap-gap-m: var(--gap-m);
    --gap-l: 2.5rem;
    --gap-gap-l: var(--gap-l);
    --gap-xl: 3.25rem;
    --gap-gap-xl: var(--gap-xl);
  }
}

/*rupture admin bar wordpress*/
@media (min-width: 768px) {
  :root {
    --admin-bar-height: 46px;
  }
}
/*
@media (min-width: 480px) and (max-width: 639px) {
  :root {
    --container-width: calc((300 / 320) * 480px);
  }
}
@media (min-width: 640px) and (max-width: 767px) {
  :root {
    --container-width: calc(300 / 320 * 100%);
  }
}
@media (min-width: 768px) and (max-width: 979px) {
  :root {
    --container-width: calc(300 / 320 * 100%);
  }
}
@media (min-width: 980px) and (max-width: 1179px) {
  :root {
    --container-width: calc(300 / 320 * 980px);
  }
}
*/
@media (min-width: 1280px) and (max-width: 1399px) {
  :root {
    /* --container-width: calc(300 / 320 * 1280px); */
    --scrolled-header-height: 92px;
    --header-height: 92px;
  }
}

@media (min-width: 1440px) {
  /* 1400px */
  :root {
    --container-width: calc(1440px - 2 * var(--gap-l));
    --scrolled-header-height: 92px;
    --header-height: 92px;
    --fs-fs-paragraphe: 16px;
    --fs-lh-paragraphe: 20px;

    --fs-fs-h4: 30px;
    --fs-lh-h4: 40px;

    --fs-fs-h3: 40px;
    --fs-lh-h3: 42px;

    --fs-fs-h2: 80px;
    --fs-lh-h2: 82px;

    --fs-fs-h1: 110px;
    --fs-lh-h1: 120px;
    --gap-m: 3.125rem;
    --gap-l: 6.25rem;
    --gap-xl: 6.25rem;
  }
}