/*Polices*/
@font-face {
    font-family: "LS-VG5000-Regular";
    src: url("../font/LS-VG5000-Regular.woff2");
}
@font-face {
    font-family: "LS-VG5000-Bold";
    src: url("../font/LS-VG5000-Bold.woff2");
}
@font-face {
    font-family: "LS-VG5000-Light";
    src: url("../font/LS-VG5000-Light.woff2");
}
@font-face {
    font-family: "LS-VG5000-RegularShifted";
    src: url("../font/LS-VG5000-RegularShifted.woff2");
}
@font-face {
    font-family: "LS-VG5000-BoldShifted";
    src: url("../font/LS-VG5000-BoldShifted.woff2");
}
@font-face {
    font-family: "LS-VG5000-LightShifted";
    src: url("../font/LS-VG5000-LightShifted.woff2");
}

body{
    font-family: "LS-VG5000-Regular";
    font-variant-numeric: tabular-nums;
    font-variant-ligatures:normal;
    font-variant-ligatures:discretionary-ligatures;
    /*font-feature-settings: "ss01","ss02","ss03";*/   
    /*letter-spacing: 0.025em;*/
    font-size: 15px;
    margin:0px;
    color:black;
    /*text-align:justify;*/
    -webkit-text-size-adjust: none;
}

p{
    margin:0px;
    padding:0px;
}

#intro{
    margin:0px 0px 0px 3px;
    padding:0px;
    width: calc(100vw / 3 * 2 - 6px);
}

#imgs {
	display: flex;
	flex-wrap: wrap;
    padding:1px;
    margin:0px;
    width: calc(100vw / 3 * 2);
}

#imgs > * {
	width: calc((100vw - 2px) / 9 - 2px);
	height: calc((100vw - 2px) / 9 - 2px);
	margin: 1px;
}

.bigImgs {
	width: calc((100vw - 2px) / 3 - 2px)!important;
	height: calc((100vw - 2px) / 3 - 2px)!important;
}

#legends{
    position:fixed;
    overflow: scroll;
    top:0px;
    height:100vh;
    padding:0px;
    margin:0px 0px 0px calc(100vw / 3 * 2);
    width:calc(100vw / 3 - 2px);
}

.numLegend{
    float:left;
    position:absolute;
    left:1px;
}

.lgd{
    margin-left: 42px;
}

.typetester{
    padding:0px;
    margin:0px;
    outline: none; 
    width:calc(100vw / 3 * 2);
}

.interface{
    margin:0px 0px 0px 3px;
    padding:0px;
}

.tester{
    width: calc((100vw / 3 * 2 - 2px) - 62px);
	min-height: calc((100vh / 3 * 2 - 2px) - 62px);
	margin: 0 0 0 2px;
    padding: 30px;
    background-color: #ddd;
    display: flex;
    justify-content: center;
    align-items: center;
    transition: none;
    overflow: hidden;
    outline: none;
}

.typeshow_section {
    display: flex;
	flex-wrap: wrap;
    padding:1px;
    margin:0px;
    width:calc((100vw / 3) * 2 - 2px);
}

.typeshow_case {
    width: calc((100vw / 3 - 1px) / 3 - 2px);
	height: calc((100vw / 3 - 1px) / 3 - 2px);
	margin: 1px;
    background-color: #ddd;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    transition: none;
    overflow: hidden;
}

.typeshow_case.active {
    width: calc((100vw / 3 - 1px)  - 2px)!important;
    height: calc((100vw / 3 - 1px)  - 2px)!important;
}

.typeshow_letter {
    transition: font-size;
}

.typeshow_case.active .typeshow_letter {
    font-size: 300%;
}

#texte{
    font-size: 50px;
}

#spinner{
    outline: none;
}

#select_graisse{
    outline: none;
}

#select_cap{
    outline: none;
}

.container_bg{
    cursor: pointer;
    overflow: hidden;
    background-color:rgba(0, 0, 0, 0.02);
}

.bg{
    height: 100%;
    position: relative;
    z-index:-2;
}

img, video{
    box-shadow: 0px 0px 10px rgb(0 0 0 / 0.2);
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    position: absolute;
    max-width: 90%;
    max-height: 90%;
    z-index:-1;
}

.img_multiple_drop, .img_multiple_drop_cdv, .img_multiple_drop_logo{
    filter: drop-shadow(0px 0px 10px rgb(0 0 0 / 0.2));
    box-shadow: none;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    position: absolute;
}

.img_drop{
    filter: drop-shadow(0px 0px 10px rgb(0 0 0 / 0.2));
    box-shadow: none;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    position: absolute;
    max-width: 90%;
    max-height: 90%;
}

.img_rotate{
    max-width: 75%;
    max-height: 75%;
}

.img_rotate_zoom{
    max-width: 200%;
    max-height: 200%;
}

.img_rotate_cdv{
    max-width: 50%;
    max-height: 50%;
}

.img_carre{
    max-width: 101%;
    max-height: 101%;
    width:101%;
    height:101%;
    top: 50%;
    left: 50%;
    box-shadow: none;
}

.numImg{
    display:block;
    margin:0;
    padding:0px 1px 0px 1px;
    font-size:15px;
    line-height:15px;
    z-index:10;
    position:absolute;
    background: white;
    box-shadow: 0px 0px 10px rgb(0 0 0 / 0.2);
}

.italic{
    font-family: "LS-VG5000-RegularShifted";
}

label{
    cursor:pointer;
}

input{
    cursor:pointer;
}

.input_custom{
    cursor:text;
    margin-bottom:2px;
    outline:none;
}

.total_price{
    font-family: "LS-VG5000-Regular";
    font-size: 15px;
    max-width:20px;
    font-variant-numeric: tabular-nums;
    font-variant-ligatures:normal;
    font-variant-ligatures:discretionary-ligatures;
    cursor:text;
    border:none;
}

.bouton_acheter{
    cursor:pointer;
}

#form2{
    display:none;
}

#paypal-button-container{
    display:none;
    width:calc(100% - 2px);
}

.g-recaptcha {
    display: flex;
    justify-content: left;  /* Centre horizontalement */
    align-items: center;      /* Centre verticalement (si nécessaire) */
    height: 100%;             /* S'adapte à la hauteur disponible */
}

@media only screen and (max-width: 1000px) {
    #imgs {
        width: calc(100vw - 2px);
        margin-bottom: 14px;
    }
    
    #imgs > * {
	   width: calc((100vw - 2px) / 4 - 2px);
	   height: calc((100vw - 2px) / 4 - 2px);
    }
    
    .bigImgs {
	   width: calc(100vw - 4px) !important;
	   height: calc(100vw - 4px) !important;
    }
    
    #legends{
        position:relative;
        width: calc(100vw - 4px);
        margin:0px 0px 0px 2px;
        height:auto;
        overflow: hidden;
   }
    
    .numLegend{
        float:left;
        position:absolute;
    }
    
    .typetester{
        width:100vw;
    }
    
    .typeshow_section{
        width: calc(100vw - 2px);
        margin-bottom: 14px;   
    }
    
    .typeshow_case {
        width: calc((100vw / 1 - 2px) / 3 - 2px);
        height: calc((100vw / 1 - 2px) / 3 - 2px);
    }
    
    .typeshow_case.active {
        width: calc((100vw / 1 - 1px)  - 2px) !important;
        height: calc((100vw / 1 - 1px)  - 2px) !important;
    }
    
    .tester{
        width: calc((100vw - 2px) - 22px);
        min-height: auto;
        height: auto !important;
        padding: 10px;
    }
    
    #intro{
        width: calc(100vw - 6px);
    }
}