@font-face {
    font-family: ANTIQUE-OLIVE;
    margin: 0;
    src: url(/assets/font/antique-olive-nord-d-regular.ttf);
}
@font-face {
    font-family: DINA-CHAUMONT-TEXT-BOLD;
    src: url(/assets/font/DinaChaumont-TextBold.woff);
}
@font-face {
    font-family: HOST-REGULAR;
    src: url(/assets/font/HostGrotesk-Regular.ttf);
}
@font-face {
    font-family: HOST-BOLD;
    src: url(/assets/font/HostGrotesk-Bold.ttf);
}
@font-face {
    font-family: "Host Grotesk", sans-serif;
    font-optical-sizing: auto;
    font-weight: 400;
    font-style: normal;
    src: url('https://fonts.googleapis.com/css2?family=Host+Grotesk:ital@0;1&display=swap');
}



body, head{
    background-color: var(--bleu-111);
    padding: 0;
    margin: 0;
    max-width: 100vw;
    font-family: var(--secondaryFont);
    font-size: var(--font-size);
    overflow-x: hidden !important;
    overflow-y: auto;

    background-image: url("/assets/img/111/fond-trame-bricolage.png");
    background-size: 100%;

    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

* {
  box-sizing: border-box;
}


body::-webkit-scrollbar {
  width: 0px;
  background: transparent;
}

body::-webkit-scrollbar-track {
  background: transparent;
}

body::-webkit-scrollbar-thumb {
  background: var(--noir);
  border-radius: 3px;
}



h1{
    font-family: var(--principalFont111);
    font-size: var(--font-size);
    color: var(--color4);
    line-height: auto;
    text-align: left;
    margin-block: 0;
}

h2{
    font-family: var(--secondaryFont);
    font-size: calc(var(--font-size)/1);
    color: var(--color4);
    margin: 0;
}
h3{
    font-family: var(--secondaryFont); 
    font-size: calc(var(--font-size)/2);
    color: var(--orange-111);
    text-align: center;
    margin: 0;
}
h4{
    font-family: var(--secondaryFont);
    font-size: calc(var(--font-size)/2);
    color: var(--color4);
}

    h4 a{ color: var(--color4); text-decoration: underline; transition: 0.2s;}
    h4 a:hover{ color: var(--color2);}
h5{
    font-family: var(--secondaryFont);
    font-size: calc(var(--font-size)/1.5);
    color: var(--color4);
    margin: 0;
}
h6{
    font-family: var(--secondaryFont);
    font-size: calc(var(--font-size)/3);
    color: var(--orange-111);
}

h1, h2, h3, h4, h5, h6, p, b {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}


strong{
    font-family: var(--secondaryFontBold);
    text-decoration: none;
    background-image: url("/assets/svg/underline.svg");
    background-repeat: repeat-x;
    background-position: 0 100%;
    background-size: auto 6px;
    padding-bottom: 2px;
    border-radius: 4px;
}

s {
  text-decoration: none;
  position: relative;
}

li{
    margin-left: 20px;
}

/*s::before {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  top: 50%;
  height: 3px;
    background-image: url("/assets/svg/underline.svg");
    background-repeat: repeat-x;
    background-position: 0 100%;
    background-size: auto 6px;
  transform: rotate(3deg);
}*/

s::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  top: 50%;
  height: 3px;
    background-image: url("/assets/svg/underline.svg");
    background-repeat: repeat-x;
    background-position: 0 100%;
    background-size: auto 6px;
  transform: rotate(-8deg); 
}

a{
    text-decoration: none;
}


.gap{
    width: 100%;
    height: var(--height-gap);
}