/*Import Woof 2 font and declare*/
@font-face {
  font-family: 'Rollgates';
  src: url('../fonts/Rollgates_Luxury.woff2') format("woff2"); 
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}


:root {

  --ff-base: 'Livvi', sans-serif;
  --font-family:var(--ff-base);
  --ff-bouton: 'Rollgates', sans-serif;
  --ff-titres: 'Rollgates', sans-serif;

  --fs-html: 16px;
  --fs-s: 14px;
  --fs-base: 16px;
  --fs-bouton: 15px;
  --fs-m: 25px;
  --fs-l: 30px;
  --fs-xl: 30px;
  --fs-2xl: 30px;
  --fs-number: 30px;

  --fw-bouton:400;
  --fw-titres:400;
  --fw-menus:400;
  --fw-base:400;
  
  --thin:100;
  --light: 300;
  --normal: 400;
  --medium:500;
  --semi-bold: 600;
  --bold: 700;
  --black: 900;

  --noir: #000000;
  --blanc: #ffffff;
  --primary: #14616b;
  --primary-dark:#0E4C54;
  --secondary: #cfaa76;
  --tertiary: #B39563;

  /*--primary-light: #289cac;
  --secondary-light: #e0c195;*/

  /* https://angel-rs.github.io/css-color-filter-generator/ */
  --filter-blanc: brightness(0) saturate(100%) invert(100%) sepia(0%)
    saturate(0%) hue-rotate(345deg) brightness(100%) contrast(104%);


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

  --border-radius: 0 0 2em 0;
  --zone-radius:50px;
  --image-radius: calc(5.625 * var(--fs-base));

  --transition-all: all 0.4s ease;

  --gap-s: 1.25rem;
  --gap: 1.25rem;
  --gap-m: 2.5rem;
  --gap-l: 3.5rem;
  --gap-xl:3.5rem;

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

  --texte-gap: var(--gap-s);

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

  --box-pad-s: 0.94rem;
  --box-pad: var(--gap-s);
  --container-full-pad: var(--gap-m);
  --container-width: calc((300 / 320) * 100%);

  --edito-padding: var(--gap-s);
  --section-gap: var(--gap-xl);

  --ease: all 0.4s ease;

  --header-height: 80px;
  --scrolled-header-height: 80px;
  --admin-bar-height: 46px;
}
.box-pad {
  padding: var(--box-pad);
}




@media (min-width: 375px) {
  :root {
    --container-width: calc((300 / 375) * 100%);
  }
}

@media (min-width: 480px) {

}
@media (min-width: 480px) and (max-width: 767px) {

}

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

@media (min-width: 980px) {
  :root {
    --container-width: 906px;
    --header-height: 140px;
    --fs-s: 14px;
    --fs-base: 16px;
    --fs-bouton: 15px;
    --fs-m: 25px;
    --fs-l: 30px;
    --fs-xl: 40px;
    --fs-2xl: 40px;
    --fs-number: 40px;
    --zone-radius:100px;
    --section-gap: 6.25rem;
  }
}

@media (min-width: 1200px) {
  :root {
    --container-width: 1000px;
    --zone-radius:150px ;
  }
}
@media (min-width: 1600px) {
  :root {
    --container-width: 1200px;
    --zone-radius:220px;
  }
}
@media (min-width: 1800px) {
  :root {
    --container-width: 1640px;
    --fs-html: 18px;
    --fs-s: 14px;
    --fs-base: 18px;
    --fs-bouton: 18px;
    --fs-m: 50px;
    --fs-l: 60px;
    --fs-xl: 70px;
    --fs-2xl: 70px;
    --fs-number: 70px;
    --box-pad-s: 0.94rem;
    --box-pad: 1.88rem;
    --edito-padding: var(--gap-m);
    --zone-radius:300px ;
  }
}