@font-face {
    font-family: 'Bricolage Grotesque';
    src: url('fonts/BricolageGrotesque/BricolageGrotesque-ExtraBold.eot');
    src: url('fonts/BricolageGrotesque/BricolageGrotesque-ExtraBold.eot?#iefix') format('embedded-opentype'),
        url('fonts/BricolageGrotesque/BricolageGrotesque-ExtraBold.woff2') format('woff2'),
        url('fonts/BricolageGrotesque/BricolageGrotesque-ExtraBold.woff') format('woff'),
        url('fonts/BricolageGrotesque/BricolageGrotesque-ExtraBold.ttf') format('truetype'),
        url('fonts/BricolageGrotesque/BricolageGrotesque-ExtraBold.svg#BricolageGrotesque-ExtraBold') format('svg');
    font-weight: bold;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Bricolage Grotesque';
    src: url('fonts/BricolageGrotesque/BricolageGrotesque-SemiBold.eot');
    src: url('fonts/BricolageGrotesque/BricolageGrotesque-SemiBold.eot?#iefix') format('embedded-opentype'),
        url('fonts/BricolageGrotesque/BricolageGrotesque-SemiBold.woff2') format('woff2'),
        url('fonts/BricolageGrotesque/BricolageGrotesque-SemiBold.woff') format('woff'),
        url('fonts/BricolageGrotesque/BricolageGrotesque-SemiBold.ttf') format('truetype'),
        url('fonts/BricolageGrotesque/BricolageGrotesque-SemiBold.svg#BricolageGrotesque-SemiBold') format('svg');
    font-weight: 600;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Bricolage Grotesque';
    src: url('fonts/BricolageGrotesque/BricolageGrotesque-Regular.eot');
    src: url('fonts/BricolageGrotesque/BricolageGrotesque-Regular.eot?#iefix') format('embedded-opentype'),
        url('fonts/BricolageGrotesque/BricolageGrotesque-Regular.woff2') format('woff2'),
        url('fonts/BricolageGrotesque/BricolageGrotesque-Regular.woff') format('woff'),
        url('fonts/BricolageGrotesque/BricolageGrotesque-Regular.ttf') format('truetype'),
        url('fonts/BricolageGrotesque/BricolageGrotesque-Regular.svg#BricolageGrotesque-Regular') format('svg');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Bricolage Grotesque';
    src: url('fonts/BricolageGrotesque/BricolageGrotesque-ExtraLight.eot');
    src: url('fonts/BricolageGrotesque/BricolageGrotesque-ExtraLight.eot?#iefix') format('embedded-opentype'),
        url('fonts/BricolageGrotesque/BricolageGrotesque-ExtraLight.woff2') format('woff2'),
        url('fonts/BricolageGrotesque/BricolageGrotesque-ExtraLight.woff') format('woff'),
        url('fonts/BricolageGrotesque/BricolageGrotesque-ExtraLight.ttf') format('truetype'),
        url('fonts/BricolageGrotesque/BricolageGrotesque-ExtraLight.svg#BricolageGrotesque-ExtraLight') format('svg');
    font-weight: 200;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Bricolage Grotesque';
    src: url('fonts/BricolageGrotesque/BricolageGrotesque-Light.eot');
    src: url('fonts/BricolageGrotesque/BricolageGrotesque-Light.eot?#iefix') format('embedded-opentype'),
        url('fonts/BricolageGrotesque/BricolageGrotesque-Light.woff2') format('woff2'),
        url('fonts/BricolageGrotesque/BricolageGrotesque-Light.woff') format('woff'),
        url('fonts/BricolageGrotesque/BricolageGrotesque-Light.ttf') format('truetype'),
        url('fonts/BricolageGrotesque/BricolageGrotesque-Light.svg#BricolageGrotesque-Light') format('svg');
    font-weight: 300;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Bricolage Grotesque';
    src: url('fonts/BricolageGrotesque/BricolageGrotesque-Medium.eot');
    src: url('fonts/BricolageGrotesque/BricolageGrotesque-Medium.eot?#iefix') format('embedded-opentype'),
        url('fonts/BricolageGrotesque/BricolageGrotesque-Medium.woff2') format('woff2'),
        url('fonts/BricolageGrotesque/BricolageGrotesque-Medium.woff') format('woff'),
        url('fonts/BricolageGrotesque/BricolageGrotesque-Medium.ttf') format('truetype'),
        url('fonts/BricolageGrotesque/BricolageGrotesque-Medium.svg#BricolageGrotesque-Medium') format('svg');
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Bricolage Grotesque';
    src: url('fonts/BricolageGrotesque/BricolageGrotesque-Bold.eot');
    src: url('fonts/BricolageGrotesque/BricolageGrotesque-Bold.eot?#iefix') format('embedded-opentype'),
        url('fonts/BricolageGrotesque/BricolageGrotesque-Bold.woff2') format('woff2'),
        url('fonts/BricolageGrotesque/BricolageGrotesque-Bold.woff') format('woff'),
        url('fonts/BricolageGrotesque/BricolageGrotesque-Bold.ttf') format('truetype'),
        url('fonts/BricolageGrotesque/BricolageGrotesque-Bold.svg#BricolageGrotesque-Bold') format('svg');
    font-weight: bold;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Noto Sans';
    src: url('fonts/NotoSans/NotoSans-Bold.eot');
    src: url('fonts/NotoSans/NotoSans-Bold.eot?#iefix') format('embedded-opentype'),
        url('fonts/NotoSans/NotoSans-Bold.woff2') format('woff2'),
        url('fonts/NotoSans/NotoSans-Bold.woff') format('woff'),
        url('fonts/NotoSans/NotoSans-Bold.ttf') format('truetype'),
        url('fonts/NotoSans/NotoSans-Bold.svg#NotoSans-Bold') format('svg');
    font-weight: bold;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Noto Sans';
    src: url('fonts/NotoSans/NotoSans-Italic.eot');
    src: url('fonts/NotoSans/NotoSans-Italic.eot?#iefix') format('embedded-opentype'),
        url('fonts/NotoSans/NotoSans-Italic.woff2') format('woff2'),
        url('fonts/NotoSans/NotoSans-Italic.woff') format('woff'),
        url('fonts/NotoSans/NotoSans-Italic.ttf') format('truetype'),
        url('fonts/NotoSans/NotoSans-Italic.svg#NotoSans-Italic') format('svg');
    font-weight: normal;
    font-style: italic;
    font-display: swap;
}

@font-face {
    font-family: 'Noto Sans';
    src: url('fonts/NotoSans/NotoSans-BoldItalic.eot');
    src: url('fonts/NotoSans/NotoSans-BoldItalic.eot?#iefix') format('embedded-opentype'),
        url('fonts/NotoSans/NotoSans-BoldItalic.woff2') format('woff2'),
        url('fonts/NotoSans/NotoSans-BoldItalic.woff') format('woff'),
        url('fonts/NotoSans/NotoSans-BoldItalic.ttf') format('truetype'),
        url('fonts/NotoSans/NotoSans-BoldItalic.svg#NotoSans-BoldItalic') format('svg');
    font-weight: bold;
    font-style: italic;
    font-display: swap;
}

@font-face {
    font-family: 'Noto Sans';
    src: url('fonts/NotoSans/NotoSans-Medium.eot');
    src: url('fonts/NotoSans/NotoSans-Medium.eot?#iefix') format('embedded-opentype'),
        url('fonts/NotoSans/NotoSans-Medium.woff2') format('woff2'),
        url('fonts/NotoSans/NotoSans-Medium.woff') format('woff'),
        url('fonts/NotoSans/NotoSans-Medium.ttf') format('truetype'),
        url('fonts/NotoSans/NotoSans-Medium.svg#NotoSans-Medium') format('svg');
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Noto Sans';
    src: url('fonts/NotoSans/NotoSans-LightItalic.eot');
    src: url('fonts/NotoSans/NotoSans-LightItalic.eot?#iefix') format('embedded-opentype'),
        url('fonts/NotoSans/NotoSans-LightItalic.woff2') format('woff2'),
        url('fonts/NotoSans/NotoSans-LightItalic.woff') format('woff'),
        url('fonts/NotoSans/NotoSans-LightItalic.ttf') format('truetype'),
        url('fonts/NotoSans/NotoSans-LightItalic.svg#NotoSans-LightItalic') format('svg');
    font-weight: 300;
    font-style: italic;
    font-display: swap;
}

@font-face {
    font-family: 'Noto Sans';
    src: url('fonts/NotoSans/NotoSans-MediumItalic.eot');
    src: url('fonts/NotoSans/NotoSans-MediumItalic.eot?#iefix') format('embedded-opentype'),
        url('fonts/NotoSans/NotoSans-MediumItalic.woff2') format('woff2'),
        url('fonts/NotoSans/NotoSans-MediumItalic.woff') format('woff'),
        url('fonts/NotoSans/NotoSans-MediumItalic.ttf') format('truetype'),
        url('fonts/NotoSans/NotoSans-MediumItalic.svg#NotoSans-MediumItalic') format('svg');
    font-weight: 500;
    font-style: italic;
    font-display: swap;
}

@font-face {
    font-family: 'Noto Sans';
    src: url('fonts/NotoSans/NotoSans-Light.eot');
    src: url('fonts/NotoSans/NotoSans-Light.eot?#iefix') format('embedded-opentype'),
        url('fonts/NotoSans/NotoSans-Light.woff2') format('woff2'),
        url('fonts/NotoSans/NotoSans-Light.woff') format('woff'),
        url('fonts/NotoSans/NotoSans-Light.ttf') format('truetype'),
        url('fonts/NotoSans/NotoSans-Light.svg#NotoSans-Light') format('svg');
    font-weight: 300;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Noto Sans';
    src: url('fonts/NotoSans/NotoSans-SemiBold.eot');
    src: url('fonts/NotoSans/NotoSans-SemiBold.eot?#iefix') format('embedded-opentype'),
        url('fonts/NotoSans/NotoSans-SemiBold.woff2') format('woff2'),
        url('fonts/NotoSans/NotoSans-SemiBold.woff') format('woff'),
        url('fonts/NotoSans/NotoSans-SemiBold.ttf') format('truetype'),
        url('fonts/NotoSans/NotoSans-SemiBold.svg#NotoSans-SemiBold') format('svg');
    font-weight: 600;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Noto Sans';
    src: url('fonts/NotoSans/NotoSans-Regular.eot');
    src: url('fonts/NotoSans/NotoSans-Regular.eot?#iefix') format('embedded-opentype'),
        url('fonts/NotoSans/NotoSans-Regular.woff2') format('woff2'),
        url('fonts/NotoSans/NotoSans-Regular.woff') format('woff'),
        url('fonts/NotoSans/NotoSans-Regular.ttf') format('truetype'),
        url('fonts/NotoSans/NotoSans-Regular.svg#NotoSans-Regular') format('svg');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Noto Sans';
    src: url('fonts/NotoSans/NotoSans-SemiBoldItalic.eot');
    src: url('fonts/NotoSans/NotoSans-SemiBoldItalic.eot?#iefix') format('embedded-opentype'),
        url('fonts/NotoSans/NotoSans-SemiBoldItalic.woff2') format('woff2'),
        url('fonts/NotoSans/NotoSans-SemiBoldItalic.woff') format('woff'),
        url('fonts/NotoSans/NotoSans-SemiBoldItalic.ttf') format('truetype'),
        url('fonts/NotoSans/NotoSans-SemiBoldItalic.svg#NotoSans-SemiBoldItalic') format('svg');
    font-weight: 600;
    font-style: italic;
    font-display: swap;
}

body {
    font-family: Noto Sans;
    font-weight: normal;
    font-style: normal;
}

h1, h2, h3, h4, h5, h6 {
    font-family: Bricolage Grotesque;
    font-weight: 600;
    font-style: normal;
    color: #191919;
}

.sous-titre-principal{
    font-family: Bricolage Grotesque;
    font-weight: 300;
    font-style: normal;
    color: #191919;
    display:block;
}

.titre-display {
    font-family: Bricolage Grotesque;
    font-weight: 600;
    font-style: normal;
    color: #FA8700;
    display:block;
}

.footer-display {
    font-family: Bricolage Grotesque;
    font-weight: normal;
    font-style: normal;
    color: #484848;
}

.paragraphe-L{font-size:16px;line-height:28px;font-weight:500;font-style:normal;}
p, .paragraphe-M{font-size:16px;line-height:28px;font-weight:normal;font-style:normal;color:#191919;}
.paragraphe-S{font-size:15px;line-height:26px;font-weight:normal;font-style:normal;color:#484848;}
.paragraphe-legende{font-size:15px;line-height:15px;font-weight:300;font-style:italic;}

p{
    max-width: 580px;
    color: #191919;
}

@media screen and (max-width: 600px) {
  h1 {
    font-size: 38px;
    line-height: 1.2;
  }
  h2 {
    font-size: 31px;
    line-height: 1.3;
  }
  h3 {
    font-size: 24px;
    line-height: 1.3;
  }
  h4 {
    font-size: 21px;
    line-height: 1.4;
  }
  h5 {
    font-size: 18px;
    line-height: 1.4;
  }
  h6 {
    font-size: 16px;
    line-height: 1.5;
  }
  .titre-display{font-size:20px;line-height:20px;}
}

@media screen and (min-width: 601px) {
  h1 {
    font-size: 48px;
    line-height: 1.2;
  }
  h2 {
    font-size: 40px;
    line-height: 1.3;
  }
  h3 {
    font-size: 33px;
    line-height: 1.3;
  }
  h4 {
    font-size: 28px;
    line-height: 1.4;
  }
  h5 {
    font-size: 23px;
    line-height: 1.4;
  }
  h6 {
    font-size: 19px;
    line-height: 1.5;
  }
  .titre-display{font-size:28px;line-height:28px;}
}

@media screen and (min-width: 993px) {
    h1 {
    font-size: 62px;
    line-height: 1.2;
  }
  h2 {
    font-size: 44px;
    line-height: 1.3;
  }
  h3 {
    font-size: 31px;
    line-height: 1.3;
  }
  h4 {
    font-size: 25px;
    line-height: 1.4;
  }
  h5 {
    font-size: 21px;
    line-height: 1.4;
  }
  h6 {
    font-size: 18px;
    line-height: 1.5;
  }
  .titre-display{font-size:36px;line-height:36px;}
}