.bientot_disponnible{
    color: brown    ;
    position: absolute;
    top: 35px;
    left: 0px;
    rotate: -45deg;
    pad: 10px;
    border-radius: 10px;
    background-color: white;
    border: 3px solid brown;
}

.theme-nav-picto {
    margin: 0 !important;
}

.vignettes-theme-nav{
    width: 100%;
    display: flex;
    padding-bottom: 13px;
    margin: auto;
    justify-content: space-evenly;
}



.vignettes-theme-nav .vignette{
    margin : 5px 10px;
    max-width : 90px;
}

.vignettes-theme-nav .title-vignette{
    padding-top: 15px;

}
.disabled{
    position:relative;
}

/* HTML: <div class="ribbon">Your text content</div> */
.ribbon {
    font-size: 10px;
    font-weight: bold;
    color: #fff;
  }
.ribbon {
    --f: .5em; /* control the folded part */
    
    position: absolute;
    top: 0px;
    left: 0px;
    line-height: 1.8;
    padding-inline: 1lh;
    padding-bottom: var(--f);
    border-image: conic-gradient(#0008 0 0) 51%/var(--f);
    clip-path: polygon(
      100% calc(100% - var(--f)),100% 100%,calc(100% - var(--f)) calc(100% - var(--f)),var(--f) calc(100% - var(--f)), 0 100%,0 calc(100% - var(--f)),999px calc(100% - var(--f) - 999px),calc(100% - 999px) calc(100% - var(--f) - 999px));
    transform: translate(calc((cos(45deg) - 1)*100%), -100%) rotate(-45deg);
    transform-origin: 100% 100%;
    background-color: #F07818 !important;
}



@media only screen and (max-width: 780px) {
    .vignettes-theme-nav{
        overflow-x: scroll;
    }
}