@font-face {
    font-family: 'WuerthBold';
    src: url('../Fonts/WuerthBold.ttf');
    src: url('../Fonts/WuerthBold.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'WuerthBook';
    src: url('../Fonts/WuerthBook.ttf');
    src: url('../Fonts/WuerthBook.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}

*{
    box-sizing: border-box;
    margin: 0;
}


body{
    margin: 0px;
    width: 100%;
    position: relative;
    top: 0px;
    font-family: sans-serif;
}

input, textarea{
    -webkit-appearance: none;
    -webkit-border-radius: 0;
}

/*header.fakeheader{
    height: 182px;
    background-image: url(../img/header.jpg);
    background-position: top center;
}

footer{
    height: 739px;
    background-image: url(../img/footer.jpg);
    background-position: top center;
}
*/

#loading{
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 999;
    background: rgba(0, 0, 0, 0.6);
    color: #fff;
    overflow: hidden;
}

#tourne{
	transform: translate(-50%, -50%);
    height: 100px;
    width: 100px;
    position: absolute;
    border-radius: 100px;
    border: solid 6px rgba(0,0,0,0.3);
    margin: 0 auto;
    left: 50%;
    top: 50%;
    box-sizing: content-box;
}

#tourne:after{
    content: '';
    position: absolute;	
    top: -6px;
    left: -6px;	
    width: 100px;
    height: 100px;
    border: 6px solid transparent;
    border-radius: 100px;
    border-top-color: white;
    animation:spin 1.5s infinite linear;		
}
    
@keyframes spin{
    0%{transform: rotate(0deg);}
    100%{transform: rotate(-360deg);}
}

.cms-page-view .main{
    width: 100%;
}
.main-container{
    max-width: 100%;
}

#devisPerso{
    position: relative;
    top: 0px;
    left: 0px;
    background: #EFEFEF;
}

.page-title{display: none;}

#devisPerso p, #devisPerso .book, .popup .book, #devisPerso .textbox p.book{
    font-family: "wuerthbook";
    font-weight: normal;
    line-height: normal;
}

#devisPerso p.bold, #devisPerso .bold, #devisPerso strong, .popup strong, .popup .bold {
    font-family: "wuerthbold";
    font-weight: normal;
    line-height: normal;
}

#recapFixed{
    position: fixed;
    top: 0px;
    right: 0px;
    z-index: 99;
}

.wrapper{
    max-width: 1680px;
    position: relative;
    margin: 0 auto;
    transition: left 1s;
}

.recapitulatif .wrapper{
    max-width: 1088px;
}

#devisPerso .logo img{
    width: 190px;
}

.etape{
    font-size: 16px;
    width: 100%;
    display: inline-block;
    vertical-align: top;
    position: relative;
    top: 0px;
    left: 0px;
    z-index: 2;
}

.etape.last{
    padding-bottom:60px;
}

#etape0, #etapeMerci{
    display: block;
    padding-top: 0px;
}

#etape0 h1.bold{
    font-size: 132px;
    color: #ffffff;
    text-transform: uppercase;
    text-align: center;
    line-height: 130px;
}

#etapeMerci h1.bold{
    font-size: 50px;
    color: #ffffff;
    text-transform: uppercase;
    text-align: center;
    line-height: 130px;
}

#etape0 h2{
    font-size: 18px;
    text-transform: uppercase;
    color: #ffffff;
    text-align: center;
    letter-spacing: 11px;
    text-shadow: 0px 1px 5px #000;
}

#etape0 .text{
    box-shadow: 0px 10px 43.4px 18.6px rgba(37, 37, 38, 0.14);
}

#etape0 .top, #etapeMerci .top{
    background-image: url(../img/portraits.jpg);
    color: #ffffff;
    height: 486px;
}

#etape0 .top img{
    vertical-align: middle;
}

#etape0 .bottom h3{
    text-align: center;
    vertical-align: middle;
    font-size: 63px;
    line-height: 60px;
}

#etapeMerci .bottom h3{
    font-size: 30px;
}

#etape0 .bottom h3 strong{
    text-transform: uppercase;
    line-height: inherit;
}

#etape0 .bottom, #etapeMerci .bottom{
    padding: 20px;
    background: #ffffff;
}

#etapeMerci{
    min-height: 100vh;
    padding-top: 20px;
}

#etapeMerci .bottom .buttons{
    text-align: center;
    margin: 20px;
}

#etapeMerci .bottom .buttons a{
    display: inline-block;
    background: #c00;
    padding: 10px 15px;
    font-size: 18px;
    color: #fff;
    text-decoration: none;
    font-family: "wuerthbold";
}

#etapeMerci .bottom p{
    font-size: 16px;
    margin-top: 10px;
}

#etape0 .bottom p{
    text-transform: uppercase;
    text-align: center;
    font-size: 34px;
    position: relative;
    letter-spacing: 10px;
    margin: 30px 0px;
}


#etape0 .bottom p::before{
    content: "";
    width: 100%;
    height: 2px;
    background: red;
    position: absolute;
    display: block;
    top: 50%;
}

#etape0 .bottom p span{
    background: #fff;
    position: relative;
    z-index: 2;
    padding: 0 4px 0 10px;
}

#etape0 a.suivant{
    display: block;
    margin-top: 10px;
    color: #ffffff;
    font-size: 20px;
    padding: 5px 10px;
    text-decoration: none;
    text-transform: uppercase;
    background: #cc0000;
    text-align: center;
    transition: 0.3s;
    border: solid 2px #c00;
}

#etape0 a.suivant:hover{
    background: #ffffff;
    color: #c00;
}

#etape0 a.suivant~p{
    text-align: center;
    font-size: 16px;
    color: #b7b6b6;
    margin-top: 16px;
}



:root {
    --bleu: #253c4f;
    --rouge: #86131e;
    --vert: #4c7c51;
    --orange: #e06334;
}


body[data-categ=cat1] #schema1{display: block}
body[data-categ=cat2] #schema2{display: block}
body[data-categ=cat3] #schema3{display: block}
body[data-categ=cat4] #schema4{display: block}



.hero{
    height: 800px;
    background-image: url(../img/bandeau.jpg);
    background-position: top center;
    background-repeat: no-repeat;
    background-color: #000;
    padding: 480px 0px 66px 0px;
    transition: 0.3s;
}

.hero h1, .cms-page-view h1 {
    font-size: 46px;
    font-family: "wuerthbold";
    font-weight: normal;
    text-align: center;
    color: #fff;
    margin: 0px;
    margin-bottom: 20px;
    line-height: 1;
}

.hero p.baseline {
    color: #fff;
    text-transform: uppercase;
    font-family: "wuerthbold";
    font-weight: normal;
    text-align: center;
    margin-bottom: 60px;
}

#etape1{
    padding-top: 0;
    background-color: #fff;
}

#etape1 p.bigTitle{
    font-size: 39px;
    text-align: center;
    margin: 30px 0px;
    color: #ffffff;
}

#etape1 p.bigTitle strong{
    color: #cc0000;
}

#etape1 #labels{
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: -180px;
    transition: 0.3s;
    padding: 0 65px;
}

#etape1 #labels div{
    display: block;
    width: 420px;
    height: 422px;
    transition: 0.3s;
    margin: 0 10px;
}

#etape1 #labels div input{
    display: none;
}

#etape1 #labels div label{    
    display: flex;
    flex-flow: column;
    justify-content: space-between;
    width: 100%; 
    height: 100%;
    transition: 0.3s;
    border: none;
    padding: 20px;
    margin: 0px;
    position: relative;
    cursor: pointer;
    transition: 0.3s;
}

#etape1 #labels div label:hover span.cta{
    background-color: #E51717;
}

#etape1 #labels div label.is-checked span.cta{
    background-color: #E51717;
}




#etape1 #labels div label[for=cat1]{
    background-image: url(../img/hauts.jpg);
}

#etape1 #labels div label[for=cat2]{
    background-image: url(../img/bas.jpg);
}

#etape1 #labels div label[for=cat3]{
    background-image: url(../img/accessoires.jpg);
}

#etape1 #labels div label p.title{
    font-size: 32px;
    width: 172px;
}

#etape1 #labels div label ul{
    color: #818A8F;
    list-style: none;
    font-size: 16px;
    text-transform: uppercase;
    margin: 0;
    padding-left: 0;
}


.ta-center{
    text-align: center;
}

#etape1 #labels div label span.cta{
    background-color: #c00;
    color: #fff;
    padding: 27px 44px;
    display: inline-block;
    width: 226px;
}

#etape1 #labels div label.movetop .bottom.bold{
    height: 312px;
    margin-top: -312px;
    width: 100%;
    background: transparent;
}


#etape1 #labels div label.is-checked.movetop .bottom .bottom{top: 100px;}

#etape1 #labels div label.is-not-checked{
    filter: brightness(0.5);
}

[data-categ] .hero{
    height: 700px;
    background-image: url(../img/bandeau2.jpg);
    padding: 70px 0px 66px 0px;
}

[data-categ] .filcontainer, .etape.last .filcontainer{
    display: block;
    width: 597px;
    margin: 0 auto;
}

[data-categ] .hero p.baseline{
    display: none;
}

[data-categ] #etape1 #labels div{
    height: 310px;
}

[data-categ] #etape1 #labels div label span.cta{
    display: none;
}

[data-categ] #etape1 #labels{
    margin-top: -380px;
}

.filcontainer{
    display: none;
}

.fil, .filtext{
    display: flex;
    position: relative;
}

.fil{
    margin-top: 60px;
}

.fil::after{
    content: "";
    position: absolute;
    top: 50%;
    left: calc(100% / 3 / 2);
    width: 67%;
    height: 4px;
    background-color: #818A8F;
    z-index: 2;
}

.fil div, .filtext div{
    width: calc(100% / 3);
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
}

.fil span{
    background-color: #818A8F;
    width: 36px;
    height: 36px;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    z-index: 3;
    position: relative;
}

.filtext div{
    text-transform: uppercase;
    font-size: 16px;
    color: #000;
    margin-top: 16px;
}


#devisPerso .filcontainer .filtext div{
    font-size: 16px;
    color: rgba(255,255,255,0.5);
}


#devisPerso .fil div.active span{
    background-color: #fff;
    color: #818a8f;
}

#devisPerso .filcontainer .filtext div.active{color: #818a8f;}


#devisPerso .filcontainer .filtext div.valid{color: #fff;}

#devisPerso .fil div.valid span{ background-color: #c00;}

#devisPerso .fil::after{
    background: linear-gradient(90deg, #c00 50%, #818a8f 50%);
}

#devisPerso .etape.last .fil::after{ background: #c00;}

.columns{
    height: 0px;
    overflow: hidden;
    width: calc(100% - 65px);    
    display: flex;
    align-items: flex-start;
    margin-top: 10px;
    background-color: #fff;
}

.filters{
    width: 18.5%;
    box-shadow: 0 7px 15px #efefef;
    padding: 17px 32px 17px 29px;    
    flex-flow: column;
    background-color: #fff;
}

.filters .filter-head .filter-head-left{
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.filters .filter-head .filter-subtitle {
    display: inline-block;
    padding: 10px 10px 8px 39px;
    font-size: 18px;
    font-weight: 700;
    line-height: 1.56;
    border-bottom: unset;
}

.filters .filter-head .filter-subtitle:before {
    content: '';
    position: absolute;
    left: 6px;
    height: 20px;
    width: 20px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'%3E%3Cg fill='none' fill-rule='evenodd' stroke='rgba(204,0,0,0.99)' stroke-width='2'%3E%3Cpath d='M12 16h8M4 8h10M4 16h3M8 14h4v4H8zM15 6h4v4h-4z'/%3E%3C/g%3E%3C/svg%3E");
}

.filters .filter-head .layernav-amount{
    display: inline-block;
    padding: 10px;
    font-size: 16px;
    line-height: 1.63;
    color: #818a8f;
}

.filters input{
    display: none;
}

.filters .filtre{
    display: inline-block;
    font-size: 16px;
    position: relative;
    padding: 0px;
}

.filters .filtre>div{position: relative;}

/*.option-set div{display: none;}*/

[data-categ=cat1] .option-set .cat2, [data-categ=cat1] .option-set .cat3{ display: none;}
[data-categ=cat2] .option-set .cat1, [data-categ=cat2] .option-set .cat3{ display: none;}
[data-categ=cat3] .option-set .cat1, [data-categ=cat3] .option-set .cat2{ display: none;}

.filters button+div{
    display: block;
    width: 100%;
    margin: 0 auto;
    padding: 7px 5px 0;
}

.filters button+div[data-group="colors"]{
    padding: 5px 10px;
    display: flex;
    flex-flow: row wrap;
}

.filters button{
    border: none;
    color: #000;
    text-transform: uppercase;
    margin: 0 auto;
    width: 100%;
    display: block;
    transition: 0.3s;
    position: relative;
    font-size: 15px;
    background: transparent;
    text-align: left;
    padding-top: 25px;
    margin-bottom: 17px;
}



.filters label{    
    cursor: pointer;
    position: relative;
    padding: 0 5px;
    display: flex;
    cursor: pointer;
    width: 100%;
    margin-bottom: 14px;
    font-size: 18px;
}

.filters input[type=checkbox]+label::before {
    content: "";
    width: 24px;
    height: 24px;
    background-color: #EFEFEF;
    border: solid 1px #E1E3E3;
    display: inline-block;
    margin-right: 10px;
}

.filters input[type=checkbox]:checked+label::before {
    background-color: #c00;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' version='1.1' x='0px' y='0px' width='14.2px' height='12.1px' viewBox='0 0 14.2 12.1' style='overflow:visible;enable-background:new 0 0 14.2 12.1;' xml:space='preserve'%3E%3Cstyle type='text/css'%3E .st0%7Bfill:%23FFFFFF;%7D%0A%3C/style%3E%3Cdefs/%3E%3Cpolygon class='st0' points='7.3,12.1 3.7,12.1 0,7.7 3.1,5.1 5.4,7.9 10.9,0 14.2,2.3 '/%3E%3C/svg%3E");
    background-position: center;
    background-repeat: no-repeat;
}

.filters button+div[data-group="colors"] label{padding: 0px;}

.filters  button+div[data-group="colors"] input[type=checkbox]+label::before{
    display: none;
}

.filters button+div[data-group="colors"] label:hover{
    border: solid 1px #000;
}

.filters button+div[data-group="taille"]{
    display: flex;
    flex-flow: wrap;
}

.taille-filter input[type=checkbox]+label::before, .taille-filter .filter-count2{
    display: none;
}

.taille-filter input[type=checkbox]+label{
    display: flex;
    flex-flow: wrap;
    justify-content: flex-start;
}

.taille-filter input[type=checkbox]+label {
    margin: 1%;
    width: 31%;
    height: 40px;
    background-color: #efefef;
    justify-content: center;
    align-items: center;
    font-family: "wuerthbold";
    font-weight: normal;
    font-size: 13px;
    text-align: center;
}

.taille-filter input[type=checkbox]+label:hover, .taille-filter input[type=checkbox]:checked+label {
    background: #c00;
    color: #fff;
}

.filters .color-filter label{
    display: inline-block;
    width: 24px;
    height: 24px;
    overflow: hidden;
    color: transparent;
    background: #c3c8c8;
    text-align: center;
    margin: 5px;
}

.filters .color-filter input:checked+label{
    color: #ffffff;
    text-decoration: none;
    box-shadow: inset 0px 0px 5px #00000047;
    text-shadow: 0px 0px 5px #00000047;
}

label[for="tS/M"],label[for="tL/XL"],label[for="tXXL/3XL"]{display: none;}

.color-filter label[for="noir"]{display: none;}
.color-filter label[for="Negro"]{background: #000000;}
.color-filter label[for="Gris-oscuro"]{background: #595959;}
.color-filter label[for="Gris-claro"]{background: #BBBBBB;}
.color-filter label[for="Blanco"]{background: #f2f3f7;}
.color-filter label[for="Azul-marino"]{background: #425180;}
.color-filter label[for="Azul-real"]{background: #077DDD;}
.color-filter label[for="Rojo"]{background: #CC0000;}
.color-filter label[for="Naranja"]{background: #FF6500;}
.color-filter label[for="Amarillo"]{background: #FFC507;}
.color-filter label[for="Verde"]{background: #438F59;}
.color-filter label[for="Rosa"]{background: #c759ab;}
.color-filter label[for="Marrón"]{background: #9C5918;}
.color-filter label[for="Beige"]{background: #E0CCA3;}

.zero{
    opacity: 0.5;
}

.filter-count2{    
    display: inline-block;
    margin-left: 10px;
    color: #C3C8C8;
}

#etape2 .hero, .etape.last .hero{
    height: auto;
    position: relative;
    background-image: url(../img/bandeau2.jpg);
    background-color: #000;
    background-repeat: no-repeat;
    padding: 0;
    padding-top: 70px;
    padding-bottom: 46px;
}

#etape2 .hero h1, .etape.last .hero h1{
    color: #fff;
    font-size: 46px;
    margin: 0;
}

#etape2{
    padding-bottom: 0px;
}

#etape2-1{
    padding-top: 0px;
}

.column.main{
    width: 79.16666667%;
    float: right;
    -ms-flex-order: 2;
    -webkit-order: 2;
    order: 2;
}

#produits button.retour{
    background: none;
    border: none;
    cursor: pointer;
    color: #ffffff;
    margin-top: 14px;
}

#produits button.retour:hover{
    text-decoration: underline;
}


#etape2 .flipContainer{
    position: relative;
    perspective: 1000px;
    height: 60px;
    margin: 8px 10px;
}

#etape2 .flip-inner{
    position: relative;
    width: 100%;
    height: 100%;
    text-align: center;
    transition: transform 0.8s;
    transform-style: preserve-3d;  
}

#etape2 a.retour, a.retour{
    color: inherit;
    text-decoration: none;
    display: block;
    cursor: pointer;
}

.retour::before{
    content: "\1F844";
    display: inline-block;
    margin-right: 5px;
    color: #e00;
}

#etape2 a.retour:hover, a.retour:hover{
    text-decoration: underline;
}

#etape2 p.bigTitle{
    font-size: 39px;
    color: #ffffff;
    text-align: center;
    margin: 30px 0px;
}


#produits{
    margin: 0px;
    display: flex;
    justify-content: flex-start;
}

.col3{
    width: calc(100% / 3);    
    padding: 15px;
}



.col3 .inner{
    background: #fff;
    position: relative;
    transition: 0.3s;    
    padding: 30px 35px;
    text-align: center;
}

.col3 .inner:hover{
    box-shadow: 0 7px 22px 0 rgb(0 0 0 / 8%);
    z-index: 5;
}

.col3 div.imgContainer{
    width: 231px;
    display: inline-block;
    max-width: 100%;
}

.col3 div.imgWrapper{
    padding-bottom: 136.364%;
    height: 0;
    overflow: hidden;
    position: relative;
}

.col3 .suivant{
    cursor: pointer;
}

.col3 img{
    bottom: 0;
    display: block;
    left: 0;
    margin: auto;
    position: absolute;
    right: 0;
    top: 0;
    width: auto;
    cursor: pointer;
}

[data-categ=cat4] .col3 div.img{background-size: 90%;}

.col3 div.bottom{
   /* height: 212px;*/
    color: #000;
    position: relative;
}


#devisPerso .col3 p.titre{
    line-height: normal;
    margin: 0px;
    font-size: 18px;
    text-align: center;
    color: #000;
    height: 48px;
    overflow: hidden;
}

.col3 .couleur{
    display: none;
}

.col3 .couleur p{
    display: inline-block;
    color: inherit;
    font-size: inherit;
}

.col3 .couleur p:last-child{
    float: right;
}

.col3 .couleur p:last-child::first-letter{
    text-transform: uppercase;
}

.col3 .prices{
    text-align: center;
    color: inherit;
    margin: 0;
    font-size: 26px;
    min-height: 26px;
}

.col3 .prices span{
    display: block;
}

.col3 .prices small{
    font-size: 16px;
}

.promo{    
    padding: 8px 20px;
    font-size: 11px;
    color: #fff;
    text-transform: uppercase;
    background-color: #c00;
    margin-bottom: 10px;
    position: absolute;
    top: 25px;
    left: 25px;
}

.prixbarre{
    text-decoration: line-through;
    font-size: 15px;
}

.blank{
    font-size: 15px;
}

.prixbarre::after{
    color: inherit;
    text-decoration: line-through;
}

.prixbarre::after, .prixHT::after{
    content: ' €';
}

.prixHT{
    font-size: 26px;
}

.price-vat-label{
    font-size: 13px;
    line-height: 18px;
    color: #8d8d8d;
    text-align: center;
}



[data-destockage=true] .bottom::before{
    content: "Fin de série";
    position: absolute;
    font-size: 10px;
    padding: 2px;
    top: 0;
    right: 0;
    background: #f9491c;
    color: #fff;
    transform-origin: center top;
    width: 100%;
    text-align: center;
    box-sizing: border-box;
    transform: translateY(-100%);
}

.col3 button{
    width: 100%;
    border: solid 2px transparent;
    background: #ffffff;
    font-size: 16px;
    text-transform: uppercase;
    padding: 5px 10px;
    cursor: pointer;
    transition: 0.3s;
}

input[type="number"]::-webkit-outer-spin-button, input[type="number"]::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}
 
input[type="number"] {
    -moz-appearance: textfield;
    width: 50px;
    text-align: center;
}

#formulaire{
    font-size: 0px;
    display: none;
    margin-top: 60px;
}

#formulaire .flex{
    display: flex;
}

#devisPerso .book#client, #devisPerso .book#pasclient{
    display: flex;
    align-items: center;
    font-size: 16px;
    border: none;
    padding: 5px;
    cursor: pointer;
    margin-bottom: 10px;
    text-align: center;
}

#client::before, #pasclient::before{
    content: '';
    height: 28px;
    width: 28px;
    display: inline-block;
    margin-right: 10px;
    background: #fff;
    border: solid 1px #E1E3E3;
    vertical-align: text-top;
    border-radius: 50%;
}

#client.active::before, #pasclient.active::before{
    border: solid 10px #c00;
    height: 10px;
    width: 10px;
}

#client:hover, #pasclient:hover{}

#client.active, #pasclient.active{
    /*border: solid 1px #818a8f;*/
    opacity: 1;
}

#client{margin-right: 2%;}

.pasclient, .client{
    display: none;
    flex-flow: wrap row;
    justify-content: space-between;
}

#formulaire form{
    display: none;
    font-size: 0px;
}

#formulaire label{
    font-size: 15px;
}

#formulaire p.book{
    font-size: 16px;
    margin-bottom: 6px;
}

.select{
    margin-bottom: 42px;
    display: inline-block;
    width: 50%;
}

.select select{
    padding: 5px;
    font-size: 18px;
    font-family: "wuerthbook";
    font-weight: normal;
    border: solid 1px #c3c8c8;
    vertical-align: initial;
    margin-left: 10px;
}

.select label{
    font-family: "wuerthbold";
    font-weight: normal;
    font-size: 14px;
    text-transform: uppercase;
}

#formulaire hr{
    margin: 10px 0;
    border: solid 1px #c3c8c8;
}

#formulaire textarea {
    display: block;
    width: 100%;
    margin-bottom: 15px;
    font-size: 14px;
    padding: 5px;
    border: solid 1px #c3c8c8;
}

#formulaire .Input {
    position: relative;
    padding: 0;
    margin-bottom: 42px;
    width: 100%;
}

#formulaire .Input-text {
    display: block;
    margin: 0;
    padding: 15px 20px;
    color: inherit;
    width: 100%;
    font-family: "wuerthbook";
    font-weight: normal;
    font-size: 18px;
    border: none;
    margin: 0;
}

#formulaire .Input-text.error, #formulaire .Input-text.error:focus, #produitHorsCataForm textarea.error{ border-color: #cc0000; }

#formulaire input[type=file].error, #produitHorsCataForm input.error+label{ color: #cc0000; }

#formulaire .Input-text::placeholder { color: #B0BEC5; }

#formulaire  .Input-text:focus {
    outline: none;
    border-color: #818a8f;
}

#formulaire .Input-label {
    display: block;
    color: #000;  
    font-size: 14px; 
    font-family: "wuerthbold";
    font-weight: normal;   
    text-transform: uppercase;
    margin-bottom: 13px;
}



#formulaire  .Input-text:placeholder-shown + .Input-label {
    
}



#fichiers .flex{
    display: flex;
    margin-bottom: 10px;
    align-items: center;
}

/*#recap input[type=file]{ display: none; }*/

#recap label[for=inputfile]{
    background: #818A8F;
    color: #fff;
    border: none;
    padding: 14px;
    text-decoration: none;
    font-size: 16px;
    margin-right: 10px;
    transition: 0.3s;
    cursor: pointer;
}

#recap label[for=inputfile]:hover{
    background: #97A2A8;
    box-shadow: 0px 7px 14px rgba(0,0,0,0.24);
}

#recap .infoinput{
    font-size: 16px;
}

#formulaire .Input.i50{
    width: 49%;
    display: inline-block;
}

#formulaire .Input.i70, #formulaire .Input.i30{ display: inline-block; }

#formulaire .Input.i70{ width: 69%; }

#formulaire .Input.i30{ width: 29%; }

#formulaire input[type=submit]{
    color: #ffffff;
    background: #cc0000;
    border: none;
    margin-top: 20px;
    font-size: 18px;
    cursor: pointer;
    display: inline-block;
    padding: 27px 62px;
    transition: 0.3s;
    margin: 0 auto;
}

#formulaire input[type=submit]:hover{
    
    background: #E51717;
    box-shadow: 0px 7px 14px rgb(0 0 0 / 24%);
}

#textForm, #textForm2{display: none;}

#recap label[for=optin]{
    cursor: pointer; 
    margin-bottom: 42px;
    display: flex;
    align-items: center;
}

#recap label[for=optin]::before{
    content: '';
    height: 24px;
    width: 24px;
    border: solid 1px #E1E3E3;
    background-color: #fff;
    display: inline-block;
    margin-right: 5px;
}

#recap #optin:checked~label[for=optin]::before{
    content: '';
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14.173' height='12.145' viewBox='0 0 14.173 12.145'%3E%3Cpath id='check' d='M10.757,17H7.209L3.467,12.533,6.533,9.964l2.323,2.772,5.5-7.882,3.279,2.29Z' transform='translate(-3.467 -4.855)' fill='%23fff'/%3E%3C/svg%3E%0A");
    background-color: #c00;
    background-position: center;
    background-repeat: no-repeat;
}

.col3 .prices span.info, span.info, span.infoo{
    display: inline-block;
    background: #818a8f;
    width: 15px;
    height: 15px;
    border-radius: 8px;
    vertical-align: middle;
    text-align: center;
    background-image: url(https://www.modyf.fr/documents/pages/shoefinder/images/info.svg);
    background-repeat: no-repeat;
    background-size: contain;
    font-size: 0px;
    cursor: pointer;
}

.popupbg {
    display: none;
    position: fixed;
    top: 0px;
    left: 0px;
    background: rgba(0,0,0,0.3);
    width: 100%;
    height: 100%;
    overflow: hidden;
    z-index: 99999999;
}

.popup {
    display: none;
    background: #fff;
    position: absolute;
    z-index: 20;
    left: 50%;
    top: 20px;
    transform: translate(-50%, 0);
    padding: 50px;
    box-shadow: 0px 5px 20px 4px rgba(0, 0, 0, 0.53);
    font-size: 16px;
    overflow-y: auto;
    max-height: 80%;
}

.popup button.closePopup, #recap button.closeRecap{
    position: absolute;
    top: 3px;
    right: 3px;
    z-index: 3;
    border: none;
    background: none;
    width: 30px;
    height: 30px;
    cursor: pointer;
    background-image: url(https://www.modyf.fr/documents/pages/shoefinder/images/close.svg);
    background-repeat: no-repeat;
    background-position: center center;
    opacity: 1;
    transition: 0.3s;
    font-size: 0px;
}

.popup .buttons{ margin-top: 20px; }

.popup button.closePopup.bold{
    position: static;
    display: block;
    background: #818a8f;
    color: #fff;
    border: solid 2px transparent;
    padding: 28px;
    text-decoration: none;
    font-size: 18px;
    margin-right: 0px;
    transition: 0.3s;
    width: auto;
    height: auto;
    float: right;
}

.popup h3 {
    margin-top: 0px;
    font-family: "wuerthbold";
    font-weight: normal;
    font-size: 20px;
    text-transform: uppercase;
    margin-bottom: 10px;
}

.popup p {
    font-family: "wuerthbold";
    font-weight: normal;
    font-size: 18px;
    line-height: normal;
}

p.error{
    display: none;
    color: rgb(177, 0, 0);
    background: #ff6b6b;
    padding: 5px;
}

.popup button.active{
    border: 1px solid red;
}

#etape2{
    background-color: #EFEFEF;
}

#etape2 .wrapper{
    padding-top: 46px;
    padding-left: 60px;
    padding-right: 60px;
    display: flex;
    flex-flow: row;
}

#etape2 h2, #etape3 h2{
    font-size: 32px;
    text-align: center;
    color:  #000;
    margin: 0;
}


#etape2 .left{
    width: calc(100% - 510px);
    padding-right: 20px;
    border-right: solid 1px #818A8F;
}

#etape2 .right{
    width: 500px;
    
    padding: 20px;
    position: sticky;
    top: 0;
    max-height: fit-content;
}



#etape2 .flex{
    display: flex;
    align-items: center;
}


#etape2 .col1-3{
    width: 25%;
    vertical-align: middle;
    text-align: center;
    padding: 20px;
    margin-right: 22px;
}


#etape2 .col1-3 h3{
    font-size: 18px;
    line-height: 18px;
    margin: 10px 0;
}

#etape2 .col2-3{
    width: 100%;
    padding: 0 32px;
    display: flex;
    align-items: center;
    justify-content: space-evenly;
}

#etape2 .fs0 .col1-3, #etape2 .fs0 .col2-3{ display: none;}

.comment[data-active=""]{display: none;}

.comment[data-active="true"]{
    display: flex;
    align-items: center;
    margin: 10px 0;
}

#technique_comment{
    justify-content: center;
}

.comment[data-active="true"]::before{
    content: "";
    display: block;
    width: 16px;
    height: 16px;
    margin-right: 5px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' version='1.1' id='Calque_1' x='0px' y='0px' viewBox='0 0 16 16' style='enable-background:new 0 0 16 16;' xml:space='preserve'%3E%3Cscript xmlns='' src='chrome-extension://akeipgacajnejdmcdmjcilfmhmaejjoe/init.js'/%3E%3Cscript xmlns='' id='datalayer-checker-script'/%3E%3Cstyle type='text/css'%3E .st0%7Bfill:%23818A8F;%7D .st1%7Bfill:%23FFFFFF;%7D%0A%3C/style%3E%3Ccircle id='Ellipse_6' class='st0' cx='8' cy='8' r='8'/%3E%3Cpath class='st1' d='M9.3,2v1.7C9.3,3.8,9.2,4,9,4H7C6.8,4,6.7,3.8,6.7,3.7V2c0-0.2,0.1-0.3,0.3-0.3h2C9.2,1.7,9.3,1.8,9.3,2z'/%3E%3Cpath class='st1' d='M10.7,11.3V13c0,0.2-0.1,0.3-0.3,0.3H5.7c-0.2,0-0.3-0.1-0.3-0.3v-1.7c0-0.2,0.1-0.3,0.3-0.3h1V7.7h-1 c-0.2,0-0.3-0.1-0.3-0.3V5.7c0-0.2,0.1-0.3,0.3-0.3H9c0.2,0,0.3,0.1,0.3,0.3V11h1C10.5,11,10.7,11.1,10.7,11.3z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: center;
    
	min-width: 16px;
}

g[id]:not([data-class]){
    display: none;
}

[data-class=zone]:hover{ cursor: pointer;}

[data-class=zone]:hover .st0{ opacity: 0.5;}

[data-class=zone] .st0{fill: #818a8f;}
[data-class=zone] .st1{fill: #fff;}

g[data-checked=checked] .st0{fill: #c00;}
g[data-checked=checked] .st1{fill: #fff;}


.schema input[type=checkbox]{ display: none; }

.schema label{
    cursor: pointer;
    display: block;
    height: 30px;
    margin-bottom: 5px;
}

.schema label span{
    padding: 5px;
    background: transparent;
    display: inline-block;
    width: calc(100% - 50px);
    height: 100%;
    color: #000;
    font-size: 18px;
}

.schema label span.case{
    background: #818a8f;
    color: #fff;
    width: 50px;
    text-align: center;
}

.schema label.checked span.case{background: #c00;}

.schemaContainer{
    position: relative;
    padding-bottom:2px;
    margin-top: 20px;
}

.schemaContainer .emplacements{
    display: flex;
	flex-flow: column;
	flex-wrap: wrap;
	max-height: 400px;
}

.schemaContainer p{ color: #818a8f; }

.schemaContainer .svg{
    width: 50%;
    display: inline-block;
    vertical-align: middle;
    font-size: 16px;
}

.svg svg{width: 100%;}

.teeshirt [for=empE], .teeshirt [for=empF], .teeshirt [for=empI], .teeshirt [for=empH], .teeshirt [for=empJ], .teeshirt [for=empK]{ display: none; }

.polo [for=empI], .polo [for=empH], .polo [for=empJ], .polo [for=empK]{ display: none; }

.veste [for=empE], .veste [for=empF], .veste [for=empI], .veste [for=empH], .veste [for=empJ], .veste [for=empK], .veste [for=empL], .veste [for=empC]{ display: none;}

.pantalon [for=empE], .pantalon [for=empF], .pantalon [for=empA], .pantalon [for=empB], .pantalon [for=empJ], .pantalon [for=empK], .pantalon [for=empL], .pantalon [for=empC], .pantalon [for=empG], .pantalon [for=empM], .pantalon [for=empD]{ display: none;}

.bermuda [for=empE], .bermuda [for=empF], .bermuda [for=empA], .bermuda [for=empB], .bermuda [for=empJ], .bermuda [for=empK], .bermuda [for=empL], .bermuda [for=empC], .bermuda [for=empG], .bermuda [for=empM], .bermuda [for=empD]{ display: none;}

.salopette [for=empE], .salopette [for=empF], .salopette [for=empA], .salopette [for=empB], .salopette [for=empJ], .salopette [for=empK], .salopette [for=empL], .salopette [for=empC], .salopette [for=empG], .salopette [for=empM], .salopette [for=empD]{ display: none;}

.casquette [for=empE], .casquette [for=empF], .casquette [for=empA], .casquette [for=empB], .casquette [for=empI], .casquette [for=empH], .casquette [for=empL], .casquette [for=empC], .casquette [for=empG], .casquette [for=empM], .casquette [for=empD]{ display: none;}

.combinaison [for=empE], .combinaison [for=empF], .combinaison [for=empJ], .combinaison [for=empK], .combinaison [for=empL]{ display: none;}

.gilet [for=empD], .gilet [for=empE], .gilet [for=empF], .gilet [for=empI], .gilet [for=empH], .gilet [for=empJ], .gilet [for=empK], .gilet [for=empL], .gilet [for=empC]{ display: none; }


.schemaContainer .tooltip{
    background: #c3c8c8;
    padding: 5px;
    margin: 10px 0px;
    transition: 0.3s;
    opacity: 0;
}

.schemaContainer .tooltip p{ color: #000000;}

.schemaContainer p.tooltiptrigger{
    font-size: 14px;
    cursor: pointer;
}

.schemaContainer .autreEmplacement{
    margin: 10px 0px;
    cursor: pointer;
}

.schemaContainer .autreEmplacement.checked{ color: green;}

.schemaContainer .autreEmpIntput{
    width: 100%;   
    font-size: 0px;
    display: none;
    height: 28px;
}

.schemaContainer .autreEmpIntput input{
    padding: 2px 5px;
    width: 80%;
    font-size: 16px;
    border: solid 1px #818a8f; 
}

.schemaContainer .autreEmpIntput button{
    width: 20%;
    font-size: 16px;
    height: 28px;
    background: #818a8f;
    color: #ffffff;
    border: none;
    cursor: pointer;
}

.schemaContainer .centerContainer{
    width: 100%;
    text-align: center;
}

.schemaContainer hr{
    border: 0px;
    border-top: solid 1px #818a8f;
}

#emplacements{
    padding-bottom: 36px;
    border: none;
    border-bottom: solid 1px #C3C8C8;
    margin-bottom: 46px;
}

#choixDesign{
    padding-bottom: 36px;
    border-bottom: solid 1px #c3c8c8;
    margin-bottom: 46px;
}

#choixDesign .content, .choixTailles .content{
    display: none;
}

#etape2 .inactif h2{
    color: #818181;
    margin-bottom: 0;
}

#choixDesign .soustitre p span:first-child, #choixDesign .soustitre p span:last-child{   
    font-size: 58px;
    line-height: 48px;
}

#choixDesign .soustitre p span{
    font-size: 48px;
    line-height: 38px;
}

#choixDesign .design{
    background: #ffffff;
    max-width: 1340px;
    margin: 0 auto;
    margin-bottom: 20px;
    border-radius: 20px;
}

#choixDesign .design .flex{
    flex-flow: row wrap;
    align-items: flex-start;
}


#choixDesign .design span.title{
    font-size: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    cursor: pointer;
}

#choixDesign .design span.title::after{
    content: '';
    background-image: url("data:image/svg+xml,%3Csvg id='icons_controls_dropdown_light-grey' data-name='icons/controls/dropdown/light-grey' xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'%3E%3Crect id='Rectangle_46' data-name='Rectangle 46' width='24' height='24' fill='none'/%3E%3Cpath id='Path' d='M0,12,6,6,0,0' transform='translate(18 8.5) rotate(90)' fill='none' stroke='%23000' stroke-miterlimit='10' stroke-width='2'/%3E%3C/svg%3E%0A");
    background-position: center;
    position: absolute;
    right: 0px;
    width: 24px;
    height: 24px;
    text-align: center;
    font-family: "wuerthbold";
    font-weight: normal;
    margin-right: 14px;
}

#choixDesign .design span.title.active::after{
    transform: rotate(180deg);
}


#choixDesign .design span.title span.case{
    background: #c00;
    color: #ffffff;
    padding: 10px;
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-right: 20px;
}

#choixDesign .design span.title span.book{
    color: #818a8f;
    background: #ffffff;
}

/*.design textarea{
    font-size: 16px;
    font-family: 'Arial', sans-serif;
    width: 100%;
    padding: 5px;
}*/

.design .techniqueContainer{
    text-align: center;
    margin-top: 30px;
    width: 100%;
    margin-bottom: 30px;
}

.design .techniqueContainer .flex{
    justify-content: space-evenly;
}


.design.Impresión .techniqueContainer .tech1,
.design.Bordado .techniqueContainer .tech2,
.design.Bordado .techniqueContainer .tech3,
.design.Bordado .techniqueContainer .tech4 {opacity: 0.5; cursor: not-allowed;}

.design.Impresión .techniqueContainer .tech1 label,
.design.Bordado .techniqueContainer .tech2 label,
.design.Bordado .techniqueContainer .tech3 label,
.design.Bordado .techniqueContainer .tech4 label {pointer-events:none ;}


.design .techniqueContainer .tech{
    width: 308px;
    font-size: 16px;
    display: inline-block;
    vertical-align: top;
    text-align: center;
    min-height: 426px;
    position: relative;
    border: solid 2px #dfe2e2;
    border-radius: 20px;
    overflow: hidden;
    cursor: pointer;
}



.design .techniqueContainer .tech img{
    max-width: 100%;
}


#choixDesign .design .techniqueContainer .tech span.title{
    display: block;
    color: #000;
    margin-top: 26px;
    border-bottom: none;
}

.design .techniqueContainer .tech span.title::after{ display: none;}

.design .techniqueContainer .tech span.cta{
    display: inline-block;
    width: calc(100% - 80px);
    text-transform: uppercase;
    margin: 0px;
    margin-top: 42px;
    margin-bottom: 30px;
    padding: 14px 0;
    transition: 0.3s;
    background-color: #818A8F;
    color: #ffffff;
    font-size: 18px;
}

.design .techniqueContainer input{
    display: none;
}

#choixDesign .design .techniqueContainer input:checked+label span.cta{    
    background-color: #97A2A8;
}

.design .techniqueContainer label{
    cursor: inherit;
    display: block;
    transition: 0.3s;
}



.design .techniqueContainer .tech:has(input:checked){ opacity: 1; border: 2px solid #818a8f;}
.design .techniqueContainer .tech:has(input:disabled){ opacity: 0.3; border: 2px solid #818a8f; cursor: not-allowed;}

.design .techniqueContainer .tech p{
    font-size: 18px;
    color: #707070;
    padding: 0 10px;
}

.pinfo{ cursor: pointer;}

.pinfo:hover{text-decoration: underline}

.design .techniqueContainer span.info{ margin-left: 5px;}

.buttonContainer{
    width: 100%;
    display: flex;
    justify-content: space-evenly;
}

.design button.valEmp, .design button.valSupp{    
    border: none;
    font-size: 18px;
    line-height: 22px;
    cursor: pointer;
    margin: 15px 5%;    
	display: flex;
	align-items: center;
}

.design button.valEmp{
    padding: 27px;
    color: #ffffff;
}

.design button.valEmp:hover{ opacity: 0.9;}

.design button.valEmp.bgcolor{
    background-color: #c00;
}

.design button.valSupp{
    background: none;
    color: #cc0000;
}

.design button.valSupp::before{
    content: "";
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 18 18'%3E%3Cg id='bin' transform='translate(0 1)'%3E%3Cpath id='Path' d='M11.926,14H.074L-1.08-1H13.08Zm-10-2h8.148L10.92,1H1.08Z' transform='translate(3 3)' fill='%23cc0000'/%3E%3Cpath id='Path-2' data-name='Path' d='M1.5,7h-2V0h2Z' transform='translate(6.5 6)' fill='%23cc0000'/%3E%3Cpath id='Path-3' data-name='Path' d='M1.5,7h-2V0h2Z' transform='translate(10.5 6)' fill='%23cc0000'/%3E%3Cpath id='Path-4' data-name='Path' d='M18,1.5H0v-2H18Z' transform='translate(0 2.5)' fill='%23cc0000'/%3E%3Cpath id='Path-5' data-name='Path' d='M1.5-1H6A2.5,2.5,0,0,1,8.5,1.5V4H-1V1.5A2.5,2.5,0,0,1,1.5-1Zm5,3V1.5A.5.5,0,0,0,6,1H1.5a.5.5,0,0,0-.5.5V2Z' transform='translate(5.25)' fill='%23cc0000'/%3E%3C/g%3E%3C/svg%3E%0A");
    width: 18px;
    height: 18px;
    background-position: center;
    background-repeat: no-repeat;
    display: inline-block;
    margin-right: 10px;

}

.design button.valSupp:hover{ text-decoration: underline;}

.choixTailles{
    padding-bottom: 36px;
    border-bottom: solid 1px #c3c8c8;
    margin-bottom: 46px;
}


.choixTailles p{
    text-align: center;
    margin: 10px;
    font-size: 18px;
    color: #707070;
}

.choixTailles .soustitre p span:last-child{
    font-size: 64px;
    line-height: 54px;
}

div.tailles{
    display: flex;
    flex-flow: row wrap;
}

div.tailles strong{
    margin-right: 5px;
}

body[data-categ=cat4] .taillesRecap .taille.total{ border: none;}

.choixTailles .tailles span.taille, #tailleapreciser span.taille{
    font-size: 18px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 10px;
    text-align: center;
}
.choixTailles .tailles span.taille label, #tailleapreciser span.taille label{
    display: inline-block;
    vertical-align: top;
    color: #818a8f;
}

.choixTailles .tailles span.taille div, #tailleapreciser span.taille div{
    display: flex;
    border: solid 1px #818A8F;
    height: 100%;
    margin-left: 10px;  
    border-radius: 13px;
    overflow: hidden;
}

.choixTailles .tailles span.taille div input, #tailleapreciser span.taille div input{
    border: none;
    vertical-align: top;
    height: 100%;
    font-family: "wuerthbold";
    font-weight: normal;
    width: 46px;
    font-size: 20px;
    background: none;
}

.choixTailles .tailles span.taille div button, #tailleapreciser span.taille div button{
    background-color: transparent;
    border: none;
    width: 28px;
    vertical-align: top;
    height: 100%;
    cursor: pointer;
    border-radius: 13px;
    transition: 0.3s;
    padding: 0px;
    background-position: center;
    background-repeat: no-repeat;
    color: transparent;
}

span.taille div button.lessQty{
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='2' viewBox='0 0 14 2'%3E%3Cpath id='Rectangle' d='M0-.5H14v2H0Z' transform='translate(0 0.5)'/%3E%3C/svg%3E%0A");
}

span.taille div button.moreQty{
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 14 14'%3E%3Cg id='Group' transform='translate(0 -0.5)'%3E%3Cpath id='Rectangle' d='M0-.5H14v2H0Z' transform='translate(0 7)'/%3E%3Cpath id='Rectangle-2' data-name='Rectangle' d='M0-.5H14v2H0Z' transform='translate(7.5 0.5) rotate(90)'/%3E%3C/g%3E%3C/svg%3E%0A");
}


.choixTailles p.color{
    transition: 0.3s;
    text-align: center;
    font-size: 14px;
}

.choixTailles p.color.error{
    display: block;
    color: rgb(177, 0, 0);
}

#tailleapreciser p{
    font-size: 18px;
    cursor: pointer;
    color: #000;
}

#tailleapreciser p::before{
    content: '';
    height: 24px;
    width: 24px;
    border: solid 1px #E1E3E3;
    background-color: #fff;
    display: inline-block;
    margin-right: 5px;
    vertical-align: bottom;
}

#tailleapreciser p.active::before, .design button.texte.active::before {
    content: '';
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14.173' height='12.145' viewBox='0 0 14.173 12.145'%3E%3Cpath id='check' d='M10.757,17H7.209L3.467,12.533,6.533,9.964l2.323,2.772,5.5-7.882,3.279,2.29Z' transform='translate(-3.467 -4.855)' fill='%23fff'/%3E%3C/svg%3E%0A");
    background-color: #c00;
    background-position: center;
    background-repeat: no-repeat;
}

#tailleapreciser p+div{
    display: none;
    text-align: center;
}

.bottomrecap{
    text-align: center;
    display: none;
    padding-bottom: 20px;
    margin-top: 10px;
}

.bottomrecap .soustitre{
    background-image: url(../img/bg-recap.jpg);
    background-blend-mode: multiply;
    text-align: left;
}

.bottomrecap .soustitre span:first-child{
    text-transform: uppercase;
    font-size: 74px;
    line-height: 64px;
    display: block;
}

.bottomrecap .soustitre span:last-child{
    text-transform: uppercase;
    font-size: 49px;
    line-height: 39px;
    display: block;
}

.bottomrecap .flex{
    display: flex;
    justify-content: space-around;
}

.bottomrecap .col3{
    padding: 5px;
    width: auto;
    background: none;
}

.bottomrecap .col3 .inner{
    padding: 20px;
    box-shadow: none;
    background: none;
}

.bottomrecap .col3 .inner:hover{transform: none;}

.bottomrecap .col2-33{
    width: auto;
    padding: 5px;
    display: flex;
}

#productDetail{
    font-size: 18px;
    max-width: 33%;
}

#productDetail h3.bold{
    font-size: 18px;
    color: #000;
}

.bottomrecap h3.bold{
    margin-bottom: 25px;
    text-align: left;
}

.right #composition{
    border-top: solid 2px #818A8F;
    border-bottom: solid 2px #818A8F;
    color: #818A8F;
    padding: 5px;
    margin: 15px 0px;
    text-align: center;
}

.right ul#usp{
    margin-bottom: 20px;
}

.imgs{ min-height: 257px;}

#productDetail ul{
    margin: 0px;
    padding-left: 0px;
    text-align: left;
    margin-bottom: 10px;
    display: none;
}

.std #etape2 ul li{ list-style: none;}

.cms-page-view #etape2 ul>li{ margin-top: 0px;}

#productDetail ul li::before{
    content: '\2714';
    margin-right: 5px;
    color: #ee0000;
}

#productDetail p#shortdescription{text-align: left;}

#productDetail .tailles p{ display: inline;}

#productDetail .tailles{ display: none;}

#guide{
    border: none;
    cursor: pointer;
    display: inline;
    background: none;
    text-decoration: underline;
    font-size: 16px;
    color: #c00;
}

#guide:hover{ opacity: 0.6;}

#clonedSvg .zone:not(.checked){ opacity: 0;}

#miniRecap{
    font-size: 18px;
    display: inline-block;
    text-align: left;
    vertical-align: top;
    margin-right: 90px;
}


#miniRecap span.case{
    background: #c00;
    text-align: center;
    padding: 5px;
    font-size: 18px;
    color: #fff;
    display: inline;
}

#miniRecap span{
    padding: 5px;
    display: inline;
    height: 100%;
}


#miniRecap ul{ padding-left: 0px;}

#miniRecap li.hide, #devisPerso .hide{display: none;}

#miniRecap li ul{ padding-left: 0px;}

#miniRecap .mainUL li{
    margin: 20px 0px;
    list-style: none;
    font-size: 16px;
}

#miniRecap li ul li strong{
    color: #000;
}

#miniRecap li ul li .textbox p strong{ color: inherit;}

#miniRecap .mainUL ul li{ margin: 7px 0px;}

#devisPerso .textbox p, #devisPerso .textbox p strong{
    font-family: 'Arial', sans-serif;
    font-size: 16px;
    color: #000000;
    text-transform: initial;
    display: inline;
}

#miniRecap li ul li span{display: inline;}



.taillesDiv .taillesRecap{
    border: solid 2px #C3C8C8;
    width: 200px;
    margin: 0 auto;
    margin-bottom: 12px;
    font-size: 0;
}

.taillesRecap .taille.zero{ height: 0px;}

.taillesRecap .taille{
    color: #000;
    font-size: 18px;
    transition: 0.3s;
    overflow: hidden;
    text-align: left;
}

.taillesRecap .taille:not(.zero){
    padding: 7px 20px;
}

.taillesRecap .taille.total{
    border-color: #C3C8C8;
    border-style: solid;
    border-width: 2px;
    border-bottom: none;
    border-right: none;
    border-left: none;
}

.validPerso{
    text-align: right;
    padding: 0 20px;
}

.validPerso .suivant{
    font-size: 18px;
    border: none;
    padding: 28px;
    cursor: pointer;
    color: #ffffff;
    background: #cc0000;
    border: solid 2px transparent;
    transition: 0.3s;
    display: inline-block;
    width: 486px;
}

.bottomrecap .suivant:hover{
    background-color: #E51717;
    box-shadow: rgba(0,0,0,0.24) 0 7px 14px;
}

#etape2 .legals{
    text-align: center;
    font-size: 12px;
    margin: 10px;
}

#produitHorsCataForm hr{
    margin: 10px 5px;
    border: none;
    border-top: solid 1px #918a8f;
}

#produitHorsCataForm p{ margin: 10px 0px;}

#produitHorsCataForm p.book{
    font-size: 14px;
    margin: 0px;
    max-width: 600px;
    margin-bottom: 10px
}

#produitHorsCataForm textarea{
    font-size: 16px;
    color:#000000;
    padding: 5px;
    border: solid 1px #c3c8c8;
}

#produitHorsCataForm input[type=radio]{ display: none;}

#produitHorsCataForm input[type=radio]+label{
    cursor: pointer;
    font-family: "wuerthbook";
    font-weight: normal;
}

#produitHorsCataForm input[type=radio]+label:before{
    content:'';
    width: 14px;
    height: 14px;
    background: #c3c8c8;
    border-radius: 50%;
    display: inline-block;
    margin-right: 5px;
    box-shadow: inset 0px 0px 3px 0px #37424a61;
}

#produitHorsCataForm input[type=radio]:checked+label:before{
    width: 8px;
    height: 8px;
    background: #37424a;
    border: solid 3px #c3c8c8;
}

#produitHorsCataForm table, .cms-page-view #produitHorsCataForm table{
    width: 600px;
    max-width: 100%;
    margin-bottom: 5px;
}

#produitHorsCataForm table td{ padding: 2px;}

.cms-page-view #produitHorsCataForm table tr:first-child, .cms-page-view #produitHorsCataForm table tr, .cms-page-view #produitHorsCataForm table tr:first-child>td:first-child, .cms-page-view #produitHorsCataForm table tr>td {
    background: #fff;
    color: #000;
    border-left: none;
    border-top: none;
    border: none;
    width: auto;
    height: auto;
    text-align: left;
    text-transform: none;
    font-size: 16px;
    font-weight: normal;
}

#autreTxt{
    display: none;
    width: 100%;
}

#produitHorsCataForm #caracteristiques{ width: 100%;}

#produitHorsCataForm button{
    padding: 5px 10px;
    font-size: 16px;
    text-transform: uppercase;
    background: #37424a;
    color: #ffffff;
    border: none;
    margin-top: 10px;
    width: 100%;
    cursor: pointer; 
    transition: 0.3s;
    border: solid 2px transparent;
}

#produitHorsCataForm button:hover{
    border-color: #37424a;
    color: #37424a;
    background: transparent;
}

#produitHorsCataForm label.error{ color: red;}

#produitHorsCataForm #caracteristiques.error{ border-color: red;}

#recap{
    position: relative;
    z-index: 20;    
    padding: 20px;
    font-size: 16px;
}

#recapToggle{
    position: absolute;
	top: 0px;
	right: 0;
	width: 100px;
	z-index: 9;
	background-color: #000;
	padding: 10px;
}

#recapToggle button{
	width: 100%;
	padding: 10px;
	border: none;
	background: transparent;
	color: #ffffff;
	position: relative;
	cursor: pointer;
	transition: 0.3s;
	display: flex;
	flex-flow: column;
	align-items: center;
}

#recapToggle button:hover{ opacity: 0.8;}

#recapToggle button img {
	width: 25px;
	display: inline;
	vertical-align: middle;
	margin-bottom: 10px;
}
#recapToggle span {
	display: block;
	font-size: 12px;
	font-family: "wuerthbold";
}

#recapToggle #productCounter{
    background: #cc0000;
	color: #ffffff;
	padding: 3px 7px;
	position: absolute;
	top: 0;
	left: 10px;
	border-radius: 7px;
}

/*#recap.full{
    width: 100%;
    min-height: 100%;
    transform: none;
    left: 0;
    top: 0;
}*/

#recap h3 {    
    font-size: 24px;
    margin-bottom: 33px;
}

#recap #formulaire h3{
    margin-top: 30px;
    font-size: 30px;
}

#recap p {
    font-family: "wuerthbook";
    font-weight: normal;
    font-size: 16px;
    line-height: 20px;
    margin-bottom: 0;
}


#recap table{
    border-collapse: collapse;
    width: 100%;
    max-width: 1088px;
    font-family: "wuerthbook";
    font-weight: normal;
    font-size: 16px;
    line-height: normal;
    margin: 0 auto;
    margin-bottom: 30px;
    margin-top: 30px;
}

#recap tr:first-child{
    border: none;
    padding-bottom: 46px;
}

#recap tr.ligne{
    border-right: none;
    border-top: solid 1px #C3C8C8;
}

#recap tr:nth-last-child(2){    
    border-right: none;
    border-bottom: solid 1px #C3C8C8;
}

#recap tr:last-child{
    border-bottom: none;
    border-right: none; 
}

#recap td{
    border: 0px;
    padding: 20px 10px;
    text-align: center;
    vertical-align: middle;
    background: none;
    width: auto;
    height: auto;
    font-family: "wuerthbook";
    font-weight: normal;
    font-size: 16px;
    text-transform: none;
}

#recap th{
    font-family: "wuerthbold";
    font-weight: normal;
    text-align: center;
    padding: 5px 0px;
    padding-bottom: 30px;
    font-size: 11px;
    color: #818A8F;
    text-transform: uppercase;
}

#recap th:first-child{
    text-align: left;
}

#recap th:last-child{
    text-align: right;
}

#recap .tdPerso, #recap .thPerso{
    text-align: left;
    width: 220px;
}

#recap .tdQuantite, #recap .thQuantite{
    /*width: 120px;*/
}

#recap .tdQuantite ul li{
    display: flex;
    justify-content: center;
}

#recap .tdQuantite ul li div{
    margin-left: 15px;
    display: flex;
}

#recap td img{
    width: 116px;
    vertical-align: middle;
}

#recap td div.imgcontainer{
    width: 50px;
    height: 56px;
    vertical-align: middle;
    margin: 0 auto;
    overflow: hidden;
}

#recap td div.imgcontainer img{
    width: 100%;
    height: 100%;
        filter: drop-shadow(0px 0px 1px rgba(0,0,0,0.5));
}

#recap div.buttons{
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 46px;
}

#recap .prix p{
    text-align: right;
    font-size: 24px;
    color: #000;
}

#recap .prix p:nth-child(2){
    font-size: 13px;
    color: #8D8D8D;
}

#promo{
    display: none;
    background: #1b1b1c;
    margin-bottom: 10px;
    padding: 10px;
}

#etape1 #promo{ background: #fff;}

#promo p{
    color: #fff;
    font-size: 25px;
    text-align: center;
}

#promo p.legals{
    font-size: 13px;
    opacity: 0.8;
}

#etape1 #promo p{ color: #000;}

#promo span.underline{ text-decoration: underline;}

#promo span.bold{text-transform: uppercase;}

a#reset{
    display: inline-block;
    background: #818A8F;
    color: #fff;
    border: none;
    padding: 28px;
    text-decoration: none;
    font-size: 18px;
    vertical-align: top;
    margin-right: 10px;
    transition: 0.3s;
}

a#reset:hover, .popup button.closePopup.bold:hover{    
    background: #97A2A8;
    box-shadow: 0px 7px 14px rgba(0,0,0,0.24);
}

#recap span#valider{
    font-size: 20px;
    border: none;
    padding: 26px;
    cursor: pointer;
    color: #ffffff;
    background: #cc0000;
    border: none;
    transition: 0.3s;
    position: relative;
}

#recap span#valider:hover{
    background: #E51717;
    box-shadow: 0px 7px 14px rgba(0,0,0,0.24);
}

/*#recap span#valider::after{
    content: "-10% supplémentaire !";
    position: absolute;
    background-color: #497958;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 40px;
    bottom: -40px;
    left: 0;
    width: 100%;
    text-align: center;
    font-family: "wuerth";
    font-weight: normal;
    font-size: 18px;
}*/

#recap .tdSupp{
    display: flex;
    justify-content: end;
    padding-top: 10px;
}

#recap td button.delete{
    font-size: 16px;    
    border: none;
    cursor: pointer;
    color: #818A8F;
    padding: 0;
    display: flex;
    justify-content: center;
}

#recap td button.delete::before{
    content: "";
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 18 18'%3E%3Cg id='bin' transform='translate(0 1)'%3E%3Cpath id='Path' d='M11.926,14H.074L-1.08-1H13.08Zm-10-2h8.148L10.92,1H1.08Z' transform='translate(3 3)' fill='%23818a8f'/%3E%3Cpath id='Path-2' data-name='Path' d='M1.5,7h-2V0h2Z' transform='translate(6.5 6)' fill='%23818a8f'/%3E%3Cpath id='Path-3' data-name='Path' d='M1.5,7h-2V0h2Z' transform='translate(10.5 6)' fill='%23818a8f'/%3E%3Cpath id='Path-4' data-name='Path' d='M18,1.5H0v-2H18Z' transform='translate(0 2.5)' fill='%23818a8f'/%3E%3Cpath id='Path-5' data-name='Path' d='M1.5-1H6A2.5,2.5,0,0,1,8.5,1.5V4H-1V1.5A2.5,2.5,0,0,1,1.5-1Zm5,3V1.5A.5.5,0,0,0,6,1H1.5a.5.5,0,0,0-.5.5V2Z' transform='translate(5.25)' fill='%23818a8f'/%3E%3C/g%3E%3C/svg%3E%0A");
    width: 18px;
    height: 18px;
    background-position: center;
    background-repeat: no-repeat;
    display: inline-block;
    margin-right: 10px;
}

#addProduct td{ padding: 0px;}

#recap td:nth-child(3){ text-align: left;}

#recap td.tdImg{
    display: flex;
    align-items: center;
 }


#recap .tdNom{
    margin-left: 20px;
}

#recap .tdNom p{
    text-align: left;
    font-size: 13px;
    color: #8D8D8D;
}

#recap .tdNom p.title{
    margin-bottom: 15px;
    font-size: 18px;
    color: #000;
}

#recap .tdNom p a{
   color: inherit;
    text-decoration: none;
}

#recap .tdNom p .red{
    color: #c00;
}

#recap .barre{ text-decoration: line-through;}


#recap td ul{ padding-left: 0px;}

#recap td ul li{
    list-style: none;   
    padding: 0;
    margin: 0;
    text-transform: none;
    font-family: "wuerthbook";
    font-weight: normal;
    font-size: 16px;
    margin-bottom: 16px;
}

#recap td.tdQuantite ul li.zero{
    opacity: 1;
    display: none;
}

#recap td.tdQuantite ul li.voirPlus {
    margin-bottom: 0;

}

#recap td.tdQuantite ul li.voirPlus button{
    background: none;
    border: none;
    cursor: pointer;
    color: #818A8F;
    font-size: 16px;
    display: flex;
}
#recap td.tdQuantite ul li.voirPlus button::before{
    content: "";
    width: 24px;
    height: 24px;
    background-image: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cg clip-path='url(%23clip0_2878_2670)'%3E%3Cg clip-path='url(%23clip1_2878_2670)'%3E%3Cpath d='M6 8.5L12 14.5L18 8.5' stroke='%23818A8F' stroke-width='2' stroke-miterlimit='10'/%3E%3C/g%3E%3C/g%3E%3Cdefs%3E%3CclipPath id='clip0_2878_2670'%3E%3Crect width='24' height='24' fill='white'/%3E%3C/clipPath%3E%3CclipPath id='clip1_2878_2670'%3E%3Crect width='24' height='24' fill='white'/%3E%3C/clipPath%3E%3C/defs%3E%3C/svg%3E%0A");
    display: block;
    transition: 0.3s;
}

#recap td.tdQuantite ul li.voirPlus button.active::before{
    transform: rotate(180deg);
}

#recap td ul li ul li{
    display: flex;
    margin-bottom: 2px;
}

#recap td ul li strong{
    margin-bottom: 14px;
    display: block;
}

#recap span.colorSquare{
    display: inline-block;
    width: 16px;
    height: 16px;
    margin-left: 5px;
    vertical-align: bottom;
}

#recap span.colorSquare[title=Blanc]{ border: solid 1px #bdbdbd;}

.colorBox{
    display: inline-block;
    width: 16px;
    height: 16px;
    margin-right: 5px;
}

#recap .lessQty, #recap .moreQty{
    width: 23px;
    height: 23px;
    border: none;
    background-color: transparent;
    cursor: pointer;
    color: #ffffff;
    background-position: center;
    background-repeat: no-repeat;
    color: transparent;
}

#recap .lessQty{
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='2' viewBox='0 0 14 2'%3E%3Cpath id='Rectangle' d='M0-.5H14v2H0Z' transform='translate(0 0.5)'/%3E%3C/svg%3E%0A");
}

#recap .moreQty{
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 14 14'%3E%3Cg id='Group' transform='translate(0 -0.5)'%3E%3Cpath id='Rectangle' d='M0-.5H14v2H0Z' transform='translate(0 7)'/%3E%3Cpath id='Rectangle-2' data-name='Rectangle' d='M0-.5H14v2H0Z' transform='translate(7.5 0.5) rotate(90)'/%3E%3C/g%3E%3C/svg%3E%0A");
}

#recap .lessQty+input{
    height: 23px;
    width: 35px;
    border: none;
    background-color: #eeecec;
    font-size: 20px;
}

#recap #total td:first-child{text-align: left;}

#recap #total td{
    text-align: center;
    padding: 15px 10px;
}

#recap #total td:last-child{
    text-align: right;
    font-size: 24px;
}

.sp-container, .sp-container button, .sp-container input, .sp-color, .sp-hue, .sp-clear{
    font-family: "wuerthbook";
    font-weight: normal;
}

.sp-container{
    background: #ffffff;
    border: none;
    box-shadow: 0px 10px 43.4px 18.6px rgba(37, 37, 38, 0.14);
}

.sp-input{
    border-radius: 0px;
    border: solid 1px #c3c8c8;
    background: #ffffff;
}

.sp-input:focus,.sp-palette .sp-thumb-el:hover, .sp-palette .sp-thumb-el.sp-thumb-active,.sp-replacer:hover, .sp-replacer.sp-active{ border-color: #37424a;}

.sp-replacer{ border-color: #c3c8c8;}

.sp-input-container{ margin-bottom: 10px;}

.sp-container button{
    font-family: "wuerthbold";
    font-weight: normal;
    text-transform: uppercase;
    color: #ffffff;
    background: #37424a;
    border: none;
    border-radius: 0px;
    text-shadow: none;
}

.sp-container button:hover{
    border: none;
    background: #37424a;
    text-shadow: none;
}

#colorname{
    margin-left: 10px;
    font-style: italic;
}

.owl-carousel {
    display: none;
    position: relative;
    width: 100%;
    -ms-touch-action: pan-y;
}

.owl-carousel .owl-wrapper-outer {
    overflow: hidden;
    position: relative;
    width: 100%;
}

.owl-carousel .owl-item { float: left;}

ul.slide_show{
    padding-left: 0;
    list-style: none;
    text-align: center;
}

[data-categ=cat1] .owl-theme .owl-controls .owl-page.active span, [data-categ=cat1] .owl-theme .owl-controls.clickable .owl-page:hover span{ background: var(--rouge);}

[data-categ=cat2] .owl-theme .owl-controls .owl-page.active span, [data-categ=cat2] .owl-theme .owl-controls.clickable .owl-page:hover span{ background: var(--bleu);}

[data-categ=cat3] .owl-theme .owl-controls .owl-page.active span, [data-categ=cat3] .owl-theme .owl-controls.clickable .owl-page:hover span{ background: var(--vert);}

[data-categ=cat4] .owl-theme .owl-controls .owl-page.active span, [data-categ=cat4] .owl-theme .owl-controls.clickable .owl-page:hover span{ background: var(--orange);}

#popupjob h4{
    color: var(--rouge);
    text-transform: uppercase;
    font-size: 18px;
    margin: 10px 0;
    margin-bottom: 0px;
}

#popupjob table{
    width: 100%;
    margin-bottom: 30px;
}

#popupjob table tr{ border-bottom: solid 1px #c3c8c8;}

#popupjob table tr:first-child{ border-bottom: 2px solid #818a8f;}

#popupjob table td, #popupjob table th{
    padding: 5px;
    font-family: "wuerthbook";
    font-weight: normal;
}

.popup.guide{width: 80%;}

.guide h1{
    text-align: left;
    font-family: "wuerthbold";
    font-weight: normal;
    font-size: 24px;
    text-transform: uppercase;
}

.guide h2, .guide h3{
    clear: both;
    text-align: center;
    font-family: "wuerthbold";
    font-weight: normal;
    color: #000;
    font-size: 20px;
    margin-top: 20px;
    margin-bottom: 10px;
}

.guide h4{
    clear: both;
    text-align: left;
    font-family: "wuerthbold";
    font-weight: normal;
    text-transform: uppercase;
    color: #37424a;
    font-size: 18px;
    margin-top: 20px;
    margin-bottom: 10px;
}

.col2-set{ font-size: 0;}

.col2-set .col-1 {
    float: none;
    width: 50%;
    font-size: 16px;
    display: inline-block;
    vertical-align: middle;
}

.col2-set .col-2 {
    float: none;
    width: 50%;
    font-size: 16px;
    display: inline-block;
    vertical-align: middle;
}

.col2-set .col-2 {padding-left: 20px;}

.guide ul li{
    font-family: "wuerthbold";
    font-weight: normal;
}

.colorSelect{ font-size: 16px;}

.colorSelect div{    
    display: flex;
    align-items: center;
    justify-content: center;
}

.colorSelect button{
    margin-top: 10px;
    min-width: 100px;
    height: 60px;
    font-size: 16px;
    cursor: pointer;
    box-shadow: rgb(0 0 0 / 8%) 0 7px 22px;
    border-radius: 0px;    
    border: none;
    border-color: #818a8f;
    background: #dadcdc;    
    position: relative;
    z-index: 1;
    margin: 5px;
    overflow: hidden;
    padding: 0;
}

.colorSelect button.addColor{
    background-image: url(../img/SVG/plus.svg);
    background-repeat: no-repeat;
    background-position: center center;
    background-size: 34px;
}

.colorSelect button.colorButton{
    background-image: url(https://www.modyf.fr/documents/pages/shoefinder/images/close-w.svg);
    background-size: 24px;
    background-position: 100px 0px;
    background-repeat: no-repeat;
    transition: 0.3s;
    margin: 0;
}

.colorSelect button.colorButton.hffffff{ background-image: url(https://www.modyf.fr/documents/pages/shoefinder/images/close.svg);}

.colorSelect button.addColor.checked{ border: none;}

.colorSelect button.colorButton:hover{ background-position: top right;}

.colorSelect button.colorButton span{
    height: 30px;
    display: block;  
}

.colorSelect button.colorButton span.bold{
    background: #fff;
    color: #37424a;  
    width: 100%;
    text-align: left;
    padding: 2px 5px;
    font-size: 16px;
    box-shadow: rgb(0 0 0 / 8%) 0 7px 22px;
}

.couleurs, .specialCouleurs{
    display: flex;
    flex-flow: wrap;    
    justify-content: space-evenly;
    margin-top: 20px;
}

.couleurs .couleur, .specialCouleurs .couleur{
    width: 161px;
    margin: 5px;
    margin-bottom: 21px;
    display: flex;
    flex-flow: wrap column;
    overflow: hidden;
    box-shadow: rgb(0 0 0 / 8%) 0 7px 22px;
    background: #fff;
    cursor: pointer;
}

.couleurs .couleur:hover, .specialCouleurs .couleur:hover{
    border-color: #fff;
    box-shadow: rgb(0 0 0 / 8%) 0 7px 22px;
}

.couleurs .couleur:hover .bottom, .specialCouleurs .couleur:hover .bottom{background: rgba(37, 37, 38, 0.14); box-shadow: none;}

.couleurs .couleur:hover .bottom p, .specialCouleurs .couleur:hover .bottom p{color: #fff;}

.couleurs .couleur span, .specialCouleurs .couleur span{
    display: block;
    height: 100px;
}

.couleurs .couleur .bottom, .specialCouleurs .couleur .bottom{
    box-shadow: 0px 10px 43.4px 18.6px rgba(37, 37, 38, 0.14);
    padding: 16px;
    background: #fff;
}

.couleurs .couleur .bottom p.bold, .specialCouleurs .couleur .bottom p.bold{
    font-size: 18px;
    margin-bottom: 5px;
}

.couleurs .couleur .bottom p, .specialCouleurs .couleur .bottom p{ font-size: 16px;}

.drop-files{
    border-color: #818a8f!important;
}

.drop-files__explanations em{
    font-family: "wuerthbook";
}

#preview{
    display: none;
    margin-bottom: 20px;
}

#preview .file{
    font-size: 12px;
    width: 200px;
    box-shadow: 0px 5px 20px 2px rgba(37, 37, 38, 0.14);
    margin: 8px;
}

#preview .file .bottom{
    max-width: 200px;
    padding: 5px;
    background: #fff;
}

#preview .file .bottom p{ word-break: break-all;}

#preview .file .thumb{
    width:100%;
    height: 100px;
    background-color: #ffffff;
    background-size: cover;
    background-position: center;  
}

#preview .file .thumb2{
    width:100%;
    height: 100px;
    background-color: #ffffff;
    position: relative;
}

.icon{
    width: 70px;
    height: 86px;
    position: relative;
    background: #ffffff;
    border: solid 3px #37424a;
    text-align: center;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    color: #37424a;
}

#preview .file .thumb2 span.bold{   
    font-size: 26px;
    line-height: 80px;
    text-align: center;
    display: inline-block;
    
}

.fileCorner {
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 20px 0 0 20px;
    border-color: white transparent transparent #37424a;
    position: absolute;
    top: -3px;
    right: -3px;
}

.pdf .icon{border-color:#ff2116; color: #ff2116;}
.pdf .fileCorner{border-color: white transparent transparent #ff2116;}

.ai .icon,.svg .icon{border-color:#ff860d; color: #ff860d; background: #261402;}
.ai .fileCorner{border-color: white transparent transparent #ff860d;}

.psd .icon{border-color:#26c9ff; color: #26c9ff; background: #061e26;}
.psd .fileCorner{border-color: white transparent transparent #26c9ff;}

.indd .icon{border-color:#ff4594; color: #ff4594; background: #26000f;}
.indd .fileCorner{border-color: white transparent transparent #ff4594;}

.docx .icon{border-color:#295391; color: #295391;}
.docx .fileCorner{border-color: white transparent transparent #295391;}

.xlsx .icon,.xls .icon,.csv .icon{border-color:#1f6b41; color: #1f6b41;}
.xlsx .fileCorner, .csv .fileCorner{border-color: white transparent transparent #1f6b41;}

.techpop{
    max-width: 470px;
    padding: 0px;
}

.techpop .inner{ padding: 20px;}

.techpop h3{
    font-size: 52px;
    text-align: center;
    color: #000;
}

.techpop p{ font-size: 14px;}

.techpop h4{ margin: 10px 0px 5px 0px;}

.std .techpop ul li{
    font-size: 14px;
    list-style: none;
    font-family: "wuerthbold";
    font-weight: normal;
}

.cms-page-view .techpop ul>li{ margin-top: 0;}

.techpop li:before{
    content:'-';
    margin-right: 5px;
}

.techpop p.red{
    text-align: center;
    margin-top: 20px;
}

.techpop .prix{
    background: #c3c8c8;
    text-align: center;
    padding: 5px;
}

.techpop .prix p:first-child{font-size: 20px;}

#popupimpression{
    max-width: 960px;
    width: 100%;
    padding-bottom: 10px;
}

.techno:nth-child(odd){ background-color:#ededed;}

#popupimpression h4{
    font-size: 36px;
    text-transform: uppercase;
    color: #000;
    padding-left: 10px;
    margin: 0px;
}

#popupimpression .col2{
    width: 50%;
    display: inline-block;
    vertical-align: top;
    padding: 10px;
    font-size: 14px;
}

#popupimpression .img{
    display: inline-block;
    width: 310px;
    font-size: 10px;
}

#popupimpression .techno.fs0{    
    display: flex;
    align-items: center;
    margin-bottom: 20px;
}

#popupimpression .fs0{
    font-size: 0px;
}

#popupimpression .fs0 .fs0{
    display: inline-block;
    width: calc(100% - 310px);
}

@keyframes donut-spin {
    0% { transform: translate(-50%, -50%) rotate(0deg);}
    100% { transform: translate(-50%, -50%) rotate(360deg);}
}
.donutSpinner {
    display: inline-block;
    border: 7px solid rgba(0, 0, 0, 0.1);
    border-left-color: #cc0000;
    border-radius: 50%;
    width: 100px;
    height: 100px;
    animation: donut-spin 1.2s linear infinite;
    position: absolute;
    left: 50%;
    top: 50%;
}

#loader{
    min-height: 500px;
    position: relative;
}

.popup[data-pid=idErreur] a.cta{
    display: inline-block;
    background: #c3c8c8;
    color: #37424a;
    border: solid 2px transparent;
    padding: 5px 10px;
    text-transform: uppercase;
    text-decoration: none;
    font-size: 20px;
    vertical-align: top;
    margin-right: 10px;
    transition: 0.3s;
    margin-top: 20px;
}

.popup[data-pid=idErreur] a.cta:last-child{
    float: right;
    margin-right: 0px;
    background: #c00;
    color: #fff;

}

.popup[data-pid=erreurEmp] li{ 
    list-style: none;
    font-size: 18px;
    font-family: inherit;
}

.popup[data-pid=erreurEmp] li::before{ content: "- ";}

.empABCDEFGHI::after{content: " 10 x 5 cm";}

.empLM::after{content: " 25 x 10 cm";}

.empJK::after{content: " 6 x 2 cm";}

.popup[data-pid=erreurEmp] p.note{font-size: 15px;}

.popup[data-pid=erreurEmp] table{
    width: 100%;
    margin-bottom: 6px;
    font-size: inherit;
}

.popup[data-pid=erreurEmp] table tr{
    background: none;
    border: none;
    font-size: inherit;
}

.popup[data-pid=erreurEmp] table tr>td{
    height: auto;
    width: auto;
    font-family: inherit;
}

.popup[data-pid=erreurEmp] table tr>td:first-child{
    background: none;
    text-transform: none;
    font-weight: normal;
}

.popup[data-pid=erreurEmp] table td,.popup[data-pid=erreurEmp] table th{
    border: solid 1px #818a8f;
    text-align: center;
    padding: 2px;
    font-size: inherit;
}


@media screen and (max-width:767px){
    .hero{
        height: 20vh;
        padding: 20px;
        background-image: url(../img/bandeau2.jpg);
    }

    .cms-page-view:not(.cms-home) .std{ padding: 0;}

    div.navblock{display: none;}

    #etape0 h1.bold{
        font-size: 15vw;
        line-height: 21vw;
    }

    #etape0 h2{
        font-size: 6vw;
        letter-spacing: 8px;
    }

    .hero h1, .cms-page-view h1{
        font-size: 32px;
    }

    

    #etape0 .top, #etapeMerci .top{
        background-position: top center;  
        height: 57vw;  
        background-size: cover;
    }

    #etape1 #labels{
        margin-top: 0;
    }

    .filtext div{
        font-size: 4vw;
        padding: 1vw;
    }

    .background{height: 50vh;}

    #etape0 .bottom, #etapeMerci .bottom{ padding: 4vw;}

    .fs0 div.logo, .filcontainer{
        width: 100%;
        text-align: center;
    }


    #recapToggle{ width: 50px;}

    #recapToggle button span{display: none;}

    #recapToggle button span#productCounter{display: inline-block;}

    #etape1 #labels{
        flex-wrap: wrap;
        padding: 0;
    }

    #etape1 #labels div{width: 100%; height: auto;}

    #etape1 #labels div label, [data-categ] #etape1 #labels div{
        height: auto;
    }

    #etape1 #labels div label ul{
        display: none;
    }

    #etape1 #labels div label p.title{
        margin-bottom: 10px;
    }


    .popup{width: 90%;}

    [data-categ] .filcontainer, .etape.last .filcontainer{
        width: 100%;
    }

    .filters .filtre{
        display: none;
    }

    .filters.active .filtre{
        display: block;
    }


    .filters .color-filter label{width: 25%; height: 25px;}

    .columns{
        flex-flow: column;
        width: 100%;
    }

    .filters, .column.main{
        width: 100%;
    }

    .col3{width: 50%; padding: 10px;}

    .col3 div.bottom{padding: 3vw;}

    .col3 div.imgContainer{
        width: 135px;
        margin: 0 auto;
    }

    .col3 img{
        max-width: 100%;
    }

    .col3 .inner{
        padding: 0px;
    }

    .promo{
        padding: 3px 10px;
        top: 10px;
        left: 10px;
    }

    .prixHT{font-size: 4.5vw;}
    .prixbarre{font-size: 4vw;}

    #devisPerso .col3 .couleur{font-size: 4vw;}

    #etape2 .col1-3 .container{
        display: flex;
        flex-flow: row;
        align-items: center;
    }

    #etape2 .flex{
        flex-flow: column;
    }

    #etape2 .wrapper{
        padding: 10px;
        flex-flow: column;
    }

    #etape2 .bigTitle h1 span:first-child{
        font-size: 14vw;
        line-height: 14vw;
    }

    #etape2 .bigTitle h1 span:last-child{
        font-size: 10vw;
        line-height: 10vw;
    }

    #etape2 .col1-3, #etape2 .col2-3{
        width: 100%;
        margin-top: 0;
        margin-right: 0;
        padding: 10px;
    }

    #etape2 .col2-3{
        flex-flow: column;
    }

    .imgs{
        width: 50%;
        display: inline-block!important;
        vertical-align: middle;
        min-height: auto;
    }

    #etape2 .fs0 .col1-3 h3{
        display: inline-block;
        width: 50%;
        margin: 0;
        vertical-align: middle;
    }

    #etape2 .left, #etape2 .right{
        width: 100%;
        padding-right: 0;
        border: none;
    }

     #etape2 .right{
        padding: 0;
     }


    .schema label{width: auto;}

    .schemaContainer .emplacements{
        width: 100%;
        padding: 0 5vw;
    }
    .schemaContainer .svg{width: 100%;}

    #choixDesign .soustitre p span:first-child, #choixDesign .soustitre p span:last-child{font-size: 16vw; line-height: 16vw;}

    #choixDesign .soustitre p span{font-size: 13vw; line-height: 13vw;}

    .bottomrecap .col2-33{
        flex-flow: column;
    }

    #miniRecap{
        margin-right: 0;
    }

    .design .select{width: 80%;}

    #devisPerso .design button.logo, #devisPerso .design button.texte{width: 70%;}

    .trumbowyg-dropdown-foreColor, .trumbowyg-dropdown-backColor{
        right: 0px!important;
        left: auto!important;
    }

    .design .techniqueContainer .tech{width: 50%; margin-bottom: 15px; min-height: auto;}

    #choixDesign .design .techniqueContainer .tech span.title{font-size: 7vw;}

    .design .techniqueContainer .tech span.cta{width: 90%;}

    .design .techniqueContainer .tech.tech3{width: 100%;}

    .design .techniqueContainer .tech .inner{
        min-height: auto;
        padding-bottom: 15px;
    }

    #popupimpression{width: 90%;}

    #popupimpression .img{width: 100%;}

    #popupimpression .fs0 .fs0{width: 100%;}

    #popupimpression h4{
        font-size: 7vw;
        line-height: 7vw;
    }

    .choixTailles .tailles span.taille{width: 48%; margin: 1%;}

    .choixTailles .tailles span.taille div input{width: 40px;   }

    .design button.valSupp{font-size: 4vw;}

    .bottomrecap .soustitre span:last-child{font-size: 13vw;}

    .bottomrecap .col3, #productDetail{width: 100%; max-width: none;}

    #miniRecap{text-align: center; margin-right: 0;}

    #miniRecap h3, .taillesDiv h3.bold, #recap h3{font-size: 10vw;}

    .bottomrecap .col3 .inner{padding: 0 5px;}

    .bottomrecap h3.bold{text-align: center;}

    #miniRecap span{width: auto;}

    .validPerso .suivant{
        width: 100%;
    }

    #recap tr.ligne{
        position: relative;
    }

    #recap table, #recap table tbody{
        width: 100%;
        display: block;
    }

    #recap table tr{display: block;}

    #recap td{padding: 5px 5px;}

    #recap table tr:first-child{display: none;}

    #recap .tdPerso{
        display: block;
        width: 100%;
    }

    #recap td.tdSupp, #recap td.tdImg, #recap td.tdNom{
        display: flex;
        vertical-align: middle;
    }

    #recap td.tdSupp{width: 10%; margin-right: 5%;}

    #recap td.tdPU, #recap td.tdQuantite, #recap td.prix{
        display: flex;
        vertical-align: top;
        width: 100%;
    }

    #recap td.tdPU::before, #recap td.tdQuantite::before, #recap td.prix::before{
        content: attr(data-label);
        display: flex;
        align-self: center;
        font-size: 12px;
        color: #808d93;
    }

    #recap td.tdQuantite ul{
        display: flex;
        flex-flow: row wrap;
        justify-content: space-around;
    }

    #recap td.tdQuantite ul li{
        margin: 5px;
    }

    #recap td[data-label="Total par article"]{
        display: flex;
        flex-flow: row-reverse;
        width: 100%;
        align-items: center;
        justify-content: space-between;
    }

    #recap .tdSupp{
        position: absolute;
        top: 0;
        right: 0;
    }

    #recap td button.delete{
        margin-top: 0;
        font-size: 0;
    }


    a#reset, #recap span#valider, .popup button.closePopup.bold{
        width: 100%; text-align: center;
        float: none;
    }

    #recap span#valider{ margin-top: 0px; float: none;}

    #recap #formulaire h3{font-size: 7vw;}

    #formulaire .Input.i70, #formulaire .Input.i30, #formulaire .Input.i50{width: 100%; margin-right: 0; display: block;}
    .select{width: 100%;}

    #etapeMerci h1.bold{font-size: 10vw; line-height: 10vw;}
    #etapeMerci .bottom h3{font-size: 6vw;}
    #etapeMerci .bottom .buttons a{width: 100%; display: block; text-align: center;}

    .col2-set .col-1, .col2-set .col-2{width: 100%;}

    .popup .popupContent table{
        overflow: scroll;
        min-width: 500px;
    }

    .couleurs .couleur, .specialCouleurs .couleur{
        width: 100%;
        flex-flow: wrap row;
    }
    .couleurs .couleur span, .specialCouleurs .couleur span{
        height: auto;
        width: 30%;
    }
    .couleurs .couleur .bottom, .specialCouleurs .couleur .bottom{width: 70%;}

    #promo p{font-size: 23px;}
}