@font-face {
	font-family: 'Monigue';
	/* J'indique au navigateur que la font est capable
    de gérer des graisses allant de 200 à 800 */
	font-display: fallback;
	src: url(../assets/fonts/Monigue.woff2) format('woff2');
	unicode-range: U+20-5F, U+61-7A, U+7C, U+A0, U+A7, U+A9, U+AB, U+B2-B3, U+BB, U+C0, U+C2, U+C6-CB,
		U+CE-CF, U+D4, U+D9, U+DB-DC, U+E0, U+E2, U+E6-EB, U+EE-EF, U+F4, U+F9, U+FB-FC, U+FF,
		U+152-153, U+178, U+2B3, U+2E2, U+1D48-1D49, U+2010-2011, U+2013-2014, U+2019, U+201C-201D,
		U+2020-2021, U+2026, U+202F-2030, U+20AC, U+2212;
}

/*

HOME PRODUIT
#header {
  background: linear-gradient(180deg, rgba(255, 238, 214, 0.00) 88.33%, #FFEED6 98.24%), url(<path-to-image>) lightgray 50% / cover no-repeat;
}
  EITO
  background: linear-gradient(180deg, rgba(255, 238, 214, 0.00) 88.33%, #FFEED6 98.24%), url(<path-to-image>) lightgray 50% / cover no-repeat;
  
*/
:root {
  --transition-all: all 0.4s ease;
  --ease: var(--transition-all);
  --Global-layout-Global-margin: 120px;
  --Global-layout-Gutter: 20px;  
  
  /* Typographies */
  --font-primary: 'Monigue', sans-serif;
  --font-secondary: 'Poppins', sans-serif;
  
  /* Couleurs */  
  --color-blanc: #FFFFFFFF;
  --color-noir: #000000FF;
  --color-primary: #F6A131FF;
  --color-secondary: #212C55FF;
  --color-color-3: #218CCCFF;
  --color-tertiary:var(--color-color-3);
  --color-color-4: #87B127FF;
  --color-color-5: #FFEED6FF;
  
  --color-primary-light: #FFEED6FF;
  --color-secondary-light: rgb(148, 166, 215);
  --color-tertiary-light: rgb(152, 204, 232);
  --fond-noir: var(--color-noir);
  --fond-blanc: var(--color-blanc);
  --fond-primary: var(--color-primary);
  --fond-secondary: var(--color-secondary);
  --fond-tertiary: var(--color-tertiary);
  --fond-primary-light: var(--color-primary-light);
  --fond-secondary-light: var(--color-secondary-light);
  --fond-tertiary-light: var(--color-tertiary-light);

  --border-m: 4px;
  --border-s: 2px;
  --corner-l: 25px;
  --corner-m: 10px;
  --corner-s: 5px;

  --border-m: 2px;
  --border-s: 1px;
  --border-width: var(--border-m);
  --border-s-width: var(--border-s);
  
  --corner-l: 50px;
  --corner-m: 20px;
  --corner-s: 10px;
  --border-s-radius: var(--corner-s);
  --border-radius: var(--corner-m);
  --border-l-radius: var(--corner-l);

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

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

  --fs-letter-spacing: 3px;
  --Global-layout-interlettrage: var(--fs-letter-spacing);
  
  /*entete*/
  --header-height: 107px;
  --scrolled-header-height: 107px;
  /*10px de chaque côté pour les captcha*/
  --espace-min: 10px;
}

@media (max-width: 979px) {
  :root {
    
    --font-size-html: 14px;
    --fs-xxl: 3.57rem; /* 50px */
    --fs-xl: 3.57rem; /* 50px */
    --fs-l: 2.14rem; /* 30px */
    --fs-m: 1.14rem; /* 20px */
    --fs-base: 1rem; /* 14px */
    --fs-s: 1rem; /* 14px */
    --fs-h2: var(--fs-l);
    /* Espacements */
    --gap-xxl: 150px;
    --gap-xl: 50px;
    --gap-l: 30px;
    --gap-m: 20px;
    --gap-base: 10px;
    --gap-s: 5px;
    /*largeur du conteneur*/
    --container-width: calc((300 / 320) * 100vw);
    --diaporama-slide-width:  var(--container-width);


  }
}
@media (min-width: 980px) and (max-width: 1179px) {
  :root {
    --font-size-html: 16px;
    --fs-xxl: 4rem; /* 56px */
    --fs-xl: 3rem; /* 42px */
    --fs-l: 2rem; /* 28px */
    --fs-m: 1.14rem; /* 16px */
    --fs-base: 1rem; /* 14px */ 
    --fs-s: 1rem; /* 14px */
    
    --fs-xs: 0.8rem; /* 10px */
    --fs-s: 0.9rem; /* 16px */
    --fs-h2: var(--fs-l);

    /* Espacements */
    --gap-xxl: 150px;
    --gap-xl: 50px;
    --gap-l: 30px;
    --gap-m: 20px;
    --gap-base: 10px;
    --gap-s: 5px;

  }
}

@media (min-width: 1180px) and (max-width: 1399px) {
  :root {
    --font-size-html: 16px;
    --fs-xxl: 6.375rem; /* 150px */
    --fs-xl: 4.625rem; /* 90px */
    --fs-l: 2.875rem; /* 46px */
    --fs-m: 1.375rem; /* 22px */
    --fs-base: 1.125rem; /* 16px (1rem) passé à 18px (1.125)*/
    --fs-s: 0.875rem; /* 14px */
    --fs-xs: 0.8rem; /* 10px */
    --fs-s: 1rem; /* 16px */
    --fs-h2: var(--fs-l);
    /* Espacements */
    --gap-xxl: 150px;
    --gap-xl: 50px;
    --gap-l: 30px;
    --gap-m: 20px;
    --gap-base: 10px;
    --gap-s: 5px;

  }
}

@media(max-width:479px) {
  :root {
    --box-pad: var(--gap-base);
  }
}
@media (min-width: 480px) and (max-width: 639px) {
  :root {
    --container-width: 433px;
    --box-pad: var(--gap-base);
  }
}

@media (min-width: 640px) and (max-width: 767px) {
  :root {
    --container-width: 620px;
    --box-pad: var(--gap-m);
  }
}

@media (min-width: 768px) and (max-width: 979px) {
  /* 768px */
  :root {
    --container-width: 660px;
    --box-pad: var(--gap-m);
  }
}
@media (min-width: 980px) {
  :root {
     --diaporama-slide-width: calc(((2 * var(--container-width)) - (2 * var(--total-space-h))) / 3);
    
    --Global-layout-Gutter: 20px;
  }
  
}

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

    --box-pad: var(--gap-m);
  }
}
@media (min-width: 1180px) and (max-width: 1399px) {
  /* 980px */
  :root {
    --container-width: 1100px;
    --box-pad: var(--gap-m);
  }
}
@media(max-width:1399px) {
    :root {
      --lh-xxl: 0.95em; 
      --lh-xl: 0.95em; 
      --lh-l: 0.95em;
      --lh-m: 1.25em; 
      --lh-base: 1.375em; /* 1.25 passé à 1.375 */
      --lh-s: 1em;   
    }   

}

@media (min-width: 1400px) {
  /* 1400px */
  :root {
    --container-width: 1360px;

    --font-size-html: 16px;
    /* font-size */
    --fs-xxl: 9.375rem; /* 150px */
    --fs-xl: 5.625rem; /* 90px */
    --fs-l: 2.875rem; /* 46px */
    --fs-m: 1.375rem; /* 22px */
    --fs-base: 1.125rem; /* 16px (1rem) passé à 18px (1.125)*/
    --fs-s: 0.875rem; /* 14px */
    
      /* Line heights */
    --lh-xxl: 15.625rem; /* 250px */
    --lh-xl: 5rem; /* 80px */
    --lh-l: 2.75rem; /* 44px */
    --lh-m: 1.625rem; /*1.75rem / 28px modifié en >>>  26px */
    --lh-base: 1.5rem; /* 1.25rem / 20px modifié en >>> 1.5 */
    --lh-s: 1rem; /* 16px */
    --fs-h2: var(--fs-l);

    /* Espacements */
    --gap-xxl: 200px;
    --gap-xl: 100px;
    --gap-l: 60px;
    --gap-m: 40px;
    --gap-base: 20px;
    --gap-s: 10px;
    

    --box-pad: var(--gap-m);

    --header-height: 107px;
    --scrolled-header-height: 80px;
    --diaporama-slide-width:880px;
  }
  .w-66 {
    width: 880px!important;
  }
  .diapo_plus_nav.w-66.s-w100.petit_container .diaporama.w-100 {
    width:880px;
    margin: 0 auto;
  }
}

:root {
  
  --Spaces-XS: 20px;
  --Spaces-XXS: 10px;
  
  --fs-html: var(--font-size-html);
  
  --gap : var(--gap-base);
  
  --space-v: var(--gap);
  --space-h: var(--gap);

  --texte-gap: var(--gap);
  --box-pad-m: var(--gap-m);
  --box-pad-s: var(--gap-s);
  --box-pad: var(--gap);
  
  --edito-padding: var(--gap-s);
  /*marge entre les sections*/
  --section-gap: var(--gap-xl);

  --diaporama-slide-aspect-ratio: 16 / 9;

  --fs-bouton: var(--fs-base);
  --lh-bouton: var(--lh-base);
}

/* Tailles de police */
.fs-xs {
  font-size: var(--fs-xs);
  line-height: var(--lh-xs);
}

.fs-s {
  font-size: var(--fs-s);
  line-height: var(--lh-s);
}

.fs-base {
  font-size: var(--fs-base);
  line-height: var(--lh-base);
}

.fs-m {
  font-size: var(--fs-m);
  line-height: var(--lh-m);
}

.fs-l {
  font-size: var(--fs-l);
  line-height: var(--lh-l);
}

.fs-xl {
  font-size: var(--fs-xl);
  line-height: var(--lh-xl);
}

.fs-xxl {
  font-size: var(--fs-xxl);
  line-height: var(--lh-xxl);
}

.fs-xxxl {
  font-size: var(--fs-xxxl);
  line-height: var(--lh-xxxl);
}