/* Définir les variables dans :root pour qu'elles soient globales */
@font-face {
  font-family: Briofont;
  src: url(../api/font/BRIOFONT.otf);
}

@font-face {
  font-family: Sohne;
  src: url(../api/font/Sohnefont.ttf);
}

@font-face {
  font-family: Helevetica Neue;
  src: url(../api/font/HelveticaNeueRoman.otf);
}

@font-face {
  font-family: Roboto Bold;
  src: url(../api/font/Roboto/Roboto-Bold.ttf);
}

@font-face {
  font-family: Roboto;
  src: url(../api/font/Roboto/Roboto-Regular.ttf);
  font-display: swap;
}
@font-face {
  font-family: Roboto Medium;
  src: url(../api/font/Roboto/Roboto-Medium.ttf);
  font-display: swap;
}
@font-face {
  font-family: Roboto Light;
  src: url(../api/font/Roboto-Light.ttf);
  font-display: swap;
}

@import url('https://fonts.googleapis.com/css2?family=Karla:ital,wght@0,200..800;1,200..800&family=Montserrat&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans:ital,wght@0,100..900;1,100..900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Merriweather+Sans:ital,wght@0,300..800;1,300..800&family=Noto+Sans:ital,wght@0,100..900;1,100..900&display=swap');
@import url('https://fonts.googleapis.com/css2?display=swap&family=Lexend%3Awght%40400%3B500%3B700%3B900');

@font-face {
  font-family: Noto Sans;
  font-style: normal;
  font-weight: 100 900;
  font-stretch: 100%;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/notosans/v38/o-0bIpQlx3QUlC5A4PNB6Ryti20_6n1iPHjc5a7du3mhPy0.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
body, p, span, li, input, textarea {
  font-family: 'Mulish', sans-serif;
  font-weight: 400;
  color: #1A1A1A;
  letter-spacing: 0.01em;
}
h1:not(#titleco), h2, h3, h4, h5, h6 {
  font-family: 'Lato', sans-serif;
  font-weight: 700;
  color: #111111;
  margin-bottom: 0.4em;
}
/* TITRES secondaires */

h2 { font-weight: 600; }
h3 { font-weight: 600; }

/* UI Elements */
button, .btn {
  font-family: 'Lato', sans-serif;
  font-weight: 600;
  font-size: 15px;
}
.font-h1{
  font-family: 'Lato', sans-serif;
  font-size: 36px;
  font-weight: 700;
  color: #111111;
}
.font-h2{
  font-family: 'Lato', sans-serif;
  font-size: 28px;
  font-weight: 600;
  color: #111111;
}
.font-h3{
  font-family: 'Lato', sans-serif;
  font-size: 21px;
  font-weight: 500;
  color: #111111;
}
.font-body{
  font-family: 'Mulish', sans-serif;
  font-weight: 400;
  color: #1A1A1A;
}
.font-labels{
  font-family: 'Mulish', sans-serif;
  font-weight: 500;
}
.font-buttons{
  font-family: 'Lato', sans-serif;
  font-weight: 600;
  font-size: 14px;
}

#tarteaucitronRoot{
  z-index: 1000;
}
.tarteaucitronIconBottomRight{
  display: none;
}


:root {
  /* Variables pour les titres */
  --font-size-largest: 34px;
  --font-size-h1: 28px;
  --font-size-h2: 24px;
  --font-size-h3: 20px;
  --font-size-h4: 18px;
  --font-size-h5: 16px;

  /* Variables pour le texte */
  --font-size-larg: 15px;
  --font-size-body: 14px;
  --font-size-small: 13px;
  --font-size-tiny: 12px;
  /* Line height */
  --font-line-body: 18px;
  --font-line-title: 28px;
  /* Color */
  --font-color-title: #201036;
  --font-color-subtitle: #9F78FE;
  --font-color-body: #666567;
  --font-color-orange: #C55A36;
  --font-color-darkgrey: #212121;

  --color-grisclair: #F4F4F4;
  --color-grismiddle: #64738B;
  --color-grisfonce: #8D8D8D;
  --color-bleuclair: #E0F2FE;
  --color-bleufonce: #007EB4;
  --color-orange: #B04B3D;
  --color-noir: #000000;
  --color-beige: #FAEBE6;
  --color-beige-hovered: #f8e5df;
  --color-rouge: #c53636;
  --color-rougeclair: #FEF2F2;
  --color-vert: #155724;
  --color-vertclair: #D4EDDA;

  /* letter spacing */
   --font-spacing-body: 2%;

  /* Autres propriétés utiles */
  --line-height-title: 1.2;
  --line-height-body: 1.6;
  --font-family-logo: 'Briofont', sans-serif;
  --font-family-title: 'Noto Sans', "Helevetica Neue", sans-serif;
  --font-family-all: 'Noto Sans', "Helevetica Neue", sans-serif;
  --font-family-btn: Lexend,'Noto Sans', "Helevetica Neue", sans-serif;
  --font-family-secours: "Helevetica Neue", sans-serif;


  /* Background color */
  --background-grey-clair: #F8F8F9;
  --background-grey-moyenbtn : #F2F2F2;
  --background-orange: #C55A36;
  --background-violet: #9F78FE;


  
}