@font-face {
  font-family: "Avenir-Light";
  src: url("../fonts/Avenir-Light.ttf") format("opentype");
  font-display: swap;
  }
  @font-face {
  font-family: "Cormorant-Bold";
  src: url("../fonts/Cormorant-Bold.ttf") format("opentype");
  font-display: swap;
  }
  @font-face {
  font-family: "Cormorant-BoldItalic";
  src: url("../fonts/Cormorant-BoldItalic.ttf") format("opentype");
  font-display: swap;
  }
  @font-face {
  font-family: "Cormorant-Italic";
  src: url("../fonts/Cormorant-Italic.ttf") format("opentype");
  font-display: swap;
  }
  @font-face {
  font-family: "Cormorant-Light";
  src: url("../fonts/Cormorant-Light.ttf") format("opentype");
  font-display: swap;
  }
  @font-face {
  font-family: "Cormorant-LightItalic";
  src: url("../fonts/Cormorant-LightItalic.ttf") format("opentype");
  font-display: swap;
  }
  @font-face {
  font-family: "Cormorant-Medium";
  src: url("../fonts/Cormorant-Medium.ttf") format("opentype");
  font-display: swap;
  }
  @font-face {
  font-family: "Cormorant-MediumItalic";
  src: url("../fonts/Cormorant-MediumItalic.ttf") format("opentype");
  font-display: swap;
  }
  @font-face {
  font-family: "Cormorant-Regular";
  src: url("../fonts/Cormorant-Regular.ttf") format("opentype");
  font-display: swap;
  }
  @font-face {
  font-family: "Cormorant-SemiBold";
  src: url("../fonts/Cormorant-SemiBold.ttf") format("opentype");
  font-display: swap;
  }
  @font-face {
  font-family: "Cormorant-SemiBoldItalic";
  src: url("../fonts/Cormorant-SemiBoldItalic.ttf") format("opentype");
  font-display: swap;
  }
  @font-face {
  font-family: "Avenir-Black";
  src: url("../fonts/Avenir-Black.otf") format("opentype");
  font-display: swap;
  }
  @font-face {
  font-family: "Avenir-Book";
  src: url("../fonts/Avenir-Book.otf") format("opentype");
  font-display: swap;
  }
  @font-face {
  font-family: "Avenir-Roman";
  src: url("../fonts/Avenir-Roman.otf") format("opentype");
  font-display: swap;
  }
body
{
overflow-x: hidden;
margin:0;
margin-top: 99px;
  --couleur-1: #004982;
  --couleur-2: #004174;
  --couleur-3: #005faa;
  --couleur-4: #ffc770;
  --couleur-5: #ffbd57;
  --couleur-6: #191919;
  --couleur-7: #272727;
  --couleur-8: #2f2f2f;
  --couleur-9: #434343;
  --couleur-10: #626262;
  --couleur-11: #b7b7b7;
  --couleur-12: #e0e0e0;
  --couleur-13: #ffffff;
  --couleur-14: #000000;


  --police-Avenir-Light: 'Avenir-Light';

  --police-Cormorant-Bold: 'Cormorant-Bold';

  --police-Cormorant-BoldItalic: 'Cormorant-BoldItalic';

  --police-Cormorant-Italic: 'Cormorant-Italic';

  --police-Cormorant-Light: 'Cormorant-Light';

  --police-Cormorant-LightItalic: 'Cormorant-LightItalic';

  --police-Cormorant-Medium: 'Cormorant-Medium';

  --police-Cormorant-MediumItalic: 'Cormorant-MediumItalic';

  --police-Cormorant-Regular: 'Cormorant-Regular';

  --police-Cormorant-SemiBold: 'Cormorant-SemiBold';

  --police-Cormorant-SemiBoldItalic: 'Cormorant-SemiBoldItalic';

  --police-Avenir-Black: 'Avenir-Black';

  --police-Avenir-Book: 'Avenir-Book';

  --police-Avenir-Roman: 'Avenir-Roman';
}

#loading,
.pop_up_add {
position: fixed;
z-index: 10000000;
height: 100vh;
width: 100vw;
background-color: rgba(0, 0, 0, 0.5);
display: none;
align-items: center;
justify-content: center;
top: 0;
left: 0;
}

section{
background-position: center;
background-size: cover;
padding-top: clamp(50px, 10vw, 100px);
padding-bottom: clamp(50px, 10vw, 100px);
padding-right: 10%;
padding-left: 10%;
}

img {
max-width: 100%;
}


html {
scrollbar-width: auto;
scrollbar-width: thin;
}
h1 {
text-transform: uppercase;
}

h2 {
text-transform: uppercase;
}



a {
text-decoration: none;
}

  h1  {
    font-size: 40px;
  font-family: var(--police-Avenir-Light);
  color: var(--couleur-13);
  }
  h2  {
    font-size: 35px;
  font-family: var(--police-Cormorant-Light);
  color: var(--couleur-13);
  }
  h3  {
    font-size: 20px;
  font-family: var(--police-Avenir-Light);
  color: var(--couleur-13);
  }
  h4  {
    font-size: 20px;
  font-family: var(--police-Avenir-Light);
  color: var(--couleur-13);
  }
  p  {
    font-size: 16px;
  font-family: var(--police-Avenir-Light);
  color: var(--couleur-13);
  }
  a  {
    font-size: 16px;
  font-family: var(--police-Avenir-Light);
  color: var(--couleur-13);
  }
  input  {
    font-size: 16px;
  font-family: var(--police-Avenir-Light);
  color: var(--couleur-13);
  }
  span  {
    font-size: 16px;
  font-family: var(--police-Cormorant-Bold);
  color: var(--couleur-13);
  }
  button  {
    font-size: 16px;
  font-family: var(--police-Avenir-Light);
  color: var(--couleur-13);
  }
  tr  {
    font-size: 16px;
  font-family: var(--police-Avenir-Light);
  color: var(--couleur-13);
  }
  td  {
    font-size: 16px;
  font-family: var(--police-Avenir-Light);
  color: var(--couleur-13);
  }
  bdi  {
    font-size: 16px;
  font-family: var(--police-Avenir-Light);
  color: var(--couleur-13);
  }
  li  {
    font-size: 16px;
  font-family: var(--police-Avenir-Light);
  color: var(--couleur-13);
  }
  label  {
    font-size: 16px;
  font-family: var(--police-Avenir-Light);
  color: var(--couleur-13);
  }

@media screen and (max-width:1024px)
{
  h1  {
    font-size: 30px;
  font-family: var(--police-Avenir-Light);
  color: var(--couleur-13);
  }
  h2  {
    font-size: 25px;
  font-family: var(--police-Cormorant-Light);
  color: var(--couleur-13);
  }
  h3  {
    font-size: 18px;
  font-family: var(--police-Avenir-Light);
  color: var(--couleur-13);
  }
  h4  {
    font-size: 18px;
  font-family: var(--police-Avenir-Light);
  color: var(--couleur-13);
  }
  p  {
    font-size: 14px;
  font-family: var(--police-Avenir-Light);
  color: var(--couleur-13);
  }
  a  {
    font-size: 14px;
  font-family: var(--police-Avenir-Light);
  color: var(--couleur-13);
  }
  input  {
    font-size: 14px;
  font-family: var(--police-Avenir-Light);
  color: var(--couleur-13);
  }
  span  {
    font-size: 14px;
  font-family: var(--police-Avenir-Light);
  color: var(--couleur-13);
  }
  button  {
    font-size: 14px;
  font-family: var(--police-Avenir-Light);
  color: var(--couleur-13);
  }
  tr  {
    font-size: 14px;
  font-family: var(--police-Avenir-Light);
  color: var(--couleur-13);
  }
  td  {
    font-size: 14px;
  font-family: var(--police-Avenir-Light);
  color: var(--couleur-13);
  }
  bdi  {
    font-size: 14px;
  font-family: var(--police-Avenir-Light);
  color: var(--couleur-13);
  }
  li  {
    font-size: 14px;
  font-family: var(--police-Avenir-Light);
  color: var(--couleur-13);
  }
  label  {
    font-size: 14px;
  font-family: var(--police-Avenir-Light);
  color: var(--couleur-13);
  }
}

@media screen and (max-width:768px)
{
section
{
padding-right:5%;
padding-left:5%;
}
  h1  {
    font-size: 25px;
  font-family: var(--police-Avenir-Light);
  color: var(--couleur-13);
  }
  h2  {
    font-size: 20px;
  font-family: var(--police-Cormorant-Light);
  color: var(--couleur-13);
  }
  h3  {
    font-size: 17px;
  font-family: var(--police-Avenir-Light);
  color: var(--couleur-13);
  }
  h4  {
    font-size: 14px;
  font-family: var(--police-Avenir-Light);
  color: var(--couleur-13);
  }
  p  {
    font-size: 14px;
  font-family: var(--police-Avenir-Light);
  color: var(--couleur-13);
  }
  a  {
    font-size: 14px;
  font-family: var(--police-Avenir-Light);
  color: var(--couleur-13);
  }
  input  {
    font-size: 14px;
  font-family: var(--police-Avenir-Light);
  color: var(--couleur-13);
  }
  span  {
    font-size: 14px;
  font-family: var(--police-Avenir-Light);
  color: var(--couleur-13);
  }
  button  {
    font-size: 14px;
  font-family: var(--police-Avenir-Light);
  color: var(--couleur-13);
  }
  tr  {
    font-size: 14px;
  font-family: var(--police-Avenir-Light);
  color: var(--couleur-13);
  }
  td  {
    font-size: 14px;
  font-family: var(--police-Avenir-Light);
  color: var(--couleur-13);
  }
  bdi  {
    font-size: 14px;
  font-family: var(--police-Avenir-Light);
  color: var(--couleur-13);
  }
  li  {
    font-size: 14px;
  font-family: var(--police-Avenir-Light);
  color: var(--couleur-13);
  }
  label  {
    font-size: 14px;
  font-family: var(--police-Avenir-Light);
  color: var(--couleur-13);
  }
}

@media screen and (max-width:450px)
{
  h1  {
    font-size: 22px;
  font-family: var(--police-Avenir-Light);
  color: var(--couleur-13);
  }
  h2  {
    font-size: 18px;
  font-family: var(--police-Cormorant-Light);
  color: var(--couleur-13);
  }
  h3  {
    font-size: 16px;
  font-family: var(--police-Avenir-Light);
  color: var(--couleur-13);
  }
  h4  {
    font-size: 14px;
  font-family: var(--police-Avenir-Light);
  color: var(--couleur-13);
  }
  p  {
    font-size: 13px;
  font-family: var(--police-Avenir-Light);
  color: var(--couleur-13);
  }
  a  {
    font-size: 13px;
  font-family: var(--police-Avenir-Light);
  color: var(--couleur-13);
  }
  input  {
    font-size: 13px;
  font-family: var(--police-Avenir-Light);
  color: var(--couleur-13);
  }
  span  {
    font-size: 13px;
  font-family: var(--police-Avenir-Light);
  color: var(--couleur-13);
  }
  button  {
    font-size: 13px;
  font-family: var(--police-Avenir-Light);
  color: var(--couleur-13);
  }
  tr  {
    font-size: 13px;
  font-family: var(--police-Avenir-Light);
  color: var(--couleur-13);
  }
  td  {
    font-size: 13px;
  font-family: var(--police-Avenir-Light);
  color: var(--couleur-13);
  }
  bdi  {
    font-size: 13px;
  font-family: var(--police-Avenir-Light);
  color: var(--couleur-13);
  }
  li  {
    font-size: 13px;
  font-family: var(--police-Avenir-Light);
  color: var(--couleur-13);
  }
  label  {
    font-size: 13px;
  font-family: var(--police-Avenir-Light);
  color: var(--couleur-13);
  }
}