@font-face {
    font-family: 'abordage';
    src: url(../fonts/Abordage-Regular.otf);
}

@font-face {
    font-family: 'goozette';
    src: url(../fonts/Goozette.otf);
}

@font-face {
    font-family: 'goozee';
    src: url(../fonts/Goozeeoutline.otf);
}

@font-face {
    font-family: 'louise';
    src: url(../fonts/Louise-Regular.otf);
}

@font-face {
    font-family: 'tordue';
    src: url(../fonts/SuperNotoriousTordue.otf);
}

@font-face {
    font-family: 'lucettereg';
    src: url(../fonts/Lucette-Regular.otf);
}

@font-face {
    font-family: 'lucetteitalic';
    src: url(../fonts/Lucette-Regularitalic.otf);
}

@font-face {
    font-family: 'adelphe';
    src: url(../fonts/Adelphe-FlorealItalic.otf);
}

@font-face {
    font-family: 'redacreg50';
    src: url(../fonts/Redaction50-Regular.otf);
}

@font-face {
    font-family: 'redacitalic50';
    src: url(../fonts/Redaction50-Italic.otf);
}

@font-face {
    font-family: 'redacreg20';
    src: url(../fonts/Redaction20-Regular.otf);
}
   
@font-face {
    font-family: 'redacitalic20';
    src: url(../fonts/Redaction20-Italic.otf);
}

@font-face {
    font-family: 'redacitalic10';
    src: url(../fonts/Redaction10-Italic.otf);
}

@font-face {
    font-family: 'happytimesit';
    src: url(../fonts/happy-times-NG_italic_master.otf);
}

@font-face {
    font-family: 'happytimesbold';
    src: url(../fonts/happy-times-NG_bold_master.otf);
}

@font-face {
    font-family: 'happytimesreg';
    src: url(../fonts/happy-times-NG_regular_master.otf);
}

@font-face {
    font-family: 'amireg';
    src: url(../fonts/Amiamie-Regular.otf);
}

@font-face {
    font-family: 'amireground';
    src: url(../fonts/Amiamie-RegularRound.otf);
}

@font-face {
    font-family: 'amiitalic';
    src: url(../fonts/Amiamie-Italic.otf);
}

@font-face {
    font-family: 'amibold';
    src: url(../fonts/Amiamie-Black.otf);
}

@font-face {
    font-family: 'amiboldrounditalic';
    src: url(../fonts/Amiamie-BlackItalicRound.otf);
}

@font-face {
    font-family: 'amiboldround';
    src: url(../fonts/Amiamie-BlackRound.otf);
}

@font-face {
    font-family: 'amilight';
    src: url(../fonts/Amiamie-Light.otf);
}

@font-face {
    font-family: 'amilightround';
    src: url(../fonts/Amiamie-LightRound.otf);
}

@font-face {
    font-family: 'amilightrounditalic';
    src: url(../fonts/Amiamie-LightRoundItalic.otf);
}

html { 
   /* background-image: linear-gradient(white 87%, rgb(20, 0, 76));*/
    height: 100%;
}

body {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
    color: rgb(20, 0, 76);
    margin: 0;
    padding: 20px;
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;

}

h1 {
    font-family: 'amiboldrounditalic';
    font-size: 16pt;
}

#titre {
    font-family: 'amireground';
    font-size: 14pt;
    grid-column: 1;
    margin-top: 0;
    margin-bottom: 0;
}

li {
    font-family: 'amireground';
    list-style: none;
    font-size: 14pt;
    grid-column: 1;
}

nav {
    grid-column: 1/2;
    margin-top: 0;
}

li :hover {
    cursor: pointer;
}

a {
    text-decoration: none;
    color: rgb(20, 0, 76);
}

ul:hover {
    text-decoration: underline;
    text-decoration-style: dotted;
    text-decoration-thickness:2px;
}

.creer {
    visibility: hidden;
    padding-left: 5vw;
}

.plus {
    font-family: 'amiboldround';
    font-size: 18pt;
    color: rgb(198, 0, 179);
}

.webpage {
    font-family: 'amiboldround';
    font-size: 14.5pt;
    color: rgb(198, 0, 179);
}

.étape1 {
    color: rgb(20, 0, 76);
    margin-top: 5vh;
}

.étape2 {
    visibility: hidden;
    color: rgb(20, 0, 76);
    margin-top: 3vh;
}

.étape3 {
    visibility: hidden;
    color: rgb(20, 0, 76);
}

.étape4 {
    visibility: hidden;
    color: rgb(20, 0, 76);
}

.étape5 {
    visibility: hidden;
    color: rgb(255, 255, 255);
}


.next2 {
    text-decoration: dotted;
}

.next4 {
    color: rgb(20, 0, 76);
}

#étape {
    width: 80%;
    margin-bottom: 20px;
    display: grid;
    grid-template-columns: 70% 30%;
    gap: 2vw;
    align-items: start;
    position: relative;
}

img {
    width: 30%;
    height: auto;
    grid-column: 2;
    margin-left: 0;
    position: absolute;
    right: 0;
    top: 0;
    box-shadow: 7px 5px 5px rgb(198, 0, 179);
}

img:hover {
    width: 90%;
    cursor:pointer;
}

.imgplus {
    visibility: hidden;
}

.imgtitle {
    visibility: hidden;
}

.imgtags {
    visibility: hidden;
}

.jauge {
    position: fixed;
    z-index: 10;
    top: 0;
    left: 0;
    width: 10%;
    height: 10px;
    background-image: linear-gradient(to top, rgb(255, 255, 255) 5%,  rgb(198, 0, 179) 95%);
    border-radius: 0 15px 20px 0;
    transition: width 0.3s ease-out; 
}

.mercitxt {
   font-family: 'amireground';
   color: white;
   font-size: 50pt;
   top: 50%;
  /* border: solid 2px;
    border-style:dotted;
    border-color: white;*/
    text-align: center;
    
}

.merci {
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.7s ease;
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 0;
    background: transparent;
}

  body.noscroll, html.noscroll {
      overflow: hidden !important;
      height: 100vh;
  }

/*.merci .corner {
    position: absolute;
    width: 30px;
    height: 30px;
    background: white;
    z-index: 2;
}
.merci .corner.top-left    { top: 0; left: 0; }
.merci .corner.top-right   { top: 0; right: 0; }
.merci .corner.bottom-left { bottom: 0; left: 0; }
.merci .corner.bottom-right{ bottom: 0; right: 0; }

.merci::before {
    content: '';
    position: absolute;
    top: 0;
    left: 30px;
    right: 30px;
    height: 60px;
    background: linear-gradient(to bottom, transparent, white);
}

.merci::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 30px;
    right: 30px;
    height: 60px;
    background: linear-gradient(to top, transparent, white);
}

.merci .left-border {
    position: absolute;
    left: 0;
    top: 30px;
    bottom: 30px;
    width: 60px;
    background: linear-gradient(to right, transparent, red);
}

.merci .right-border {
    position: absolute;
    right: 0;
    top: 30px;
    bottom: 30px;
    width: 60px;
    background: linear-gradient(to left, transparent, red);
}/*