@import url('https://fonts.googleapis.com/css?family=Open+Sans&display=swap');

@import url('https://fonts.googleapis.com/css?family=Anton&display=swap');
@font-face {
  font-family: 'Open Sans', sans-serif, cursive;
}
:root {
	--radiusgen: 10px;
    	--radiusgen: 10px;
    
	--font-family: 'ANTON', sans-serif, cursive;


/*    hsl(212, 46%, 15%)
    #142436
    hsl(212, 45%, 32%)
     #2D4F76
    hsl(212, 45%, 52%)
    #4D81BC
    hsl(212, 45%, 72%)
    #97B5D8
    hsl(0, 2%, 99%)
    #FCFCFC
    
    */
    
    --color2: #f4f4f4;
	--color1:  #0f5ea3;
    
    
    	--color1:   #0f5ea3;
    	--color2: #f4f4f4;
        --color3:   #0f5ea3;
         --color4:   #116cbb;
         --color5:   #f4f4f4;
        
	--font-size-big: 2.5em;
	--font-size-medium: 1.2em;
	--font-size: 1em;
	--font-size-small: 0.7em;
	--font-size-very-small: 0.5em;
}




.color1{color: var(--color1);}
.color2{color: var(--color2);}
.color3{color: var(--color3);}
.color4{color: var(--color4);}
.color5{color: var(--color5);}



.font-standard {
	font-family: var(--font-family);
}
.bold {
	font-weight: 700;
}
.lite {
	font-weight: 300;
}
.standard {
	font-weight: 400;
}



.w90{	min-width: 90%;	width: 90%;}


.w95{	min-width: 95%;	width: 95%;}

.w100{	min-width: 100%;	width: 100%;}

.w70{	min-width: 70%;	width: 70%;}

.h5em{	height:5em;}

.h12em{	height:12em;}





.big {
	font-size: 2.5rem;
	line-height: 2.8rem;
}

.medium-big {
	font-size: 1.2rem;
	line-height: 1.2rem;
}


.medium {
	font-size: 1.1rem;
	line-height: 1.1rem;
}
.normal {
	font-size: 0.9rem;
	line-height: 0.9rem;
}
.small {
	font-size: 0.8rem;
	line-height: 0.8rem;
}


.left{
	text-align: left;
}



.right{
	text-align: right;
}

.center{
	text-align: center;
}










.very-small {
	font-size: 0.5rem;
	line-height: 0.7rem;
}
.overflow-hidden {
	overflow: hidden;
}
.overflow-scroll {
	overflow: scroll;
}








@media screen and (min-width: 800px) {
    #zone-art{
    min-height:20em;
    display:flex;
    height:50vh;
    max-width:1020;
    overflow:hidden;
      justify-content: center;
      display: flex;
      flex-wrap: wrap;
    }
    
    
    
    
    .art-cadre {  
    
        flex: 1 1 0;
        position: relative;
        background: var(--color5);
        border-radius: var(--radiusgen);
        min-width: 25%;
        width: 50vw;
        max-width: em;
        height: 30vh;
        padding: 0.4em;
        margin: 0.5rem 0.5rem 0.5rem 0.5rem;
        overflow: hidden;
        box-shadow: 0px 0px 20px black;
    }
    
    
    .art-cadre .image {
    width: 100%;
        height: 30em;
        background: rgba(255, 255, 255, 1);
        border-radius: var(--radiusgen);
        overflow: hidden;
    }
    }
    .art-cadre .image img {
        width: auto;
        height: 100%;
        overflow: hidden;
    }
    .art-cadre .titre {
        width: 100%;
        height: 3em;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        padding-bottom: 0.3rem;
        padding-top: 0.3rem;
        border-radius: 0em;
        overflow: hidden;
    }
    .art-cadre .text {
    
        width: 100%;	max-width: 100%;
        height: 0;auto;
        padding-bottom: 0rem;
        border-radius: 0em;
        overflow: hidden;
    }
    .art-cadre .prix {
    
        width: 30%;
        height:0;auto; 
        padding-bottom: 0.3rem;
        border-radius: 0em;
        overflow: hidden;
    
    }
    .art-cadre .description {
    height:0em;
        flex: auto;
        width: 100%;
        display: -webkit-box;
        -webkit-line-clamp: 4;
        -webkit-box-orient: vertical;
        padding-top: 0.3rem;
        overflow: hidden;
    }
    .art-cadre .action {
        display: flex;
        width: 100%;
        height: auto;
    }
    .masque {
        width: 100%;
        height: 100%;
        position: absolute;
        top: 100%;
        left: 0;
        background: var(--color2);
        transition: 0.3s;
    }
    .active:hover ~ .masque {
        position: absolute;
        top: -0%;
        left: 0;
    }
    .masque:hover {
        position: absolute;
        top: -0%;
        left: 0;
    }
    .flex {
        display: flex;
    }
    
    
    }









    #zone-art{
        min-height:20em;
        display:flex;
        height:50vh;
        max-width:1020;
        overflow:hidden;
          justify-content: center;
          display: flex;
          flex-wrap: wrap;
        }
        
        
        
        
        .art-cadre {  flex: 1 1 0;
        
            position: relative;
         
            background: var(--color5);
            border-radius: var(--radiusgen);
            min-width: 25%;
            width: 12em;
            max-width: 20em;
            height: auto;
            padding: 0.4em;
            margin: 0.5rem 0.5rem 0.5rem 0.5rem;
            overflow: hidden;
            box-shadow: 0px 0px 20px black;
        }
        .art-cadre .image {
            width: 100%;
            height: 12em;
            background: rgba(255, 255, 255, 1);
            border-radius: var(--radiusgen);
            overflow: hidden;
        }
        .art-cadre .image img {
            width: auto;
            height: 100%;
            overflow: hidden;
        }
        .art-cadre .titre {
            width: 100%;
            height: 3em;
            display: -webkit-box;
            -webkit-line-clamp: 2;
            -webkit-box-orient: vertical;
            padding-bottom: 0.3rem;
            padding-top: 0.3rem;
            border-radius: 0em;
            overflow: hidden;
        }
        .art-cadre .text {
        
            width: 100%;	max-width: 100%;
            height: 0;auto;
            padding-bottom: 0rem;
            border-radius: 0em;
            overflow: hidden;
        }
        .art-cadre .prix {
        
            width: 30%;
            height:0;auto; 
            padding-bottom: 0.3rem;
            border-radius: 0em;
            overflow: hidden;
        
        }
        .art-cadre .description {
        height:0em;
            flex: auto;
            width: 100%;
            display: -webkit-box;
            -webkit-line-clamp: 4;
            -webkit-box-orient: vertical;
            padding-top: 0.3rem;
            overflow: hidden;
        }
        .art-cadre .action {
            display: flex;
            width: 100%;
            height: auto;
        }
        .masque {
            width: 100%;
            height: 100%;
            position: absolute;
            top: 100%;
            left: 0;
            background: var(--color2);
            transition: 0.3s;
        }
        .active:hover ~ .masque {
            position: absolute;
            top: -0%;
            left: 0;
        }
        .masque:hover {
            position: absolute;
            top: -0%;
            left: 0;
        }
        .flex {
            display: flex;
        }



/*// cart article cadi  ////////////////////////////////////////////////////////////////*/








.grid-text{ grid-area: text;}
.grid-titre{ grid-area: titre;}
.grid-prix{ grid-area:prix;}
.grid-description{ grid-area: description;}
.grid-action{ grid-area: action;}
.grid-image{ grid-area: image;}

.grid-quantite{ grid-area: quantite;}









.card-art-cadre {  flex: 1 1 0;

	position: relative;
 
	background:rgba(245, 245, 255, 1);
	border-radius:var(--radiusgen);
	min-width: 20em;
	width: 20em;
	max-width: 100%;
	height: 4.5em;
	padding: 0.4em;
	margin: 0.1rem 0.1rem 0.1rem 0.1rem;
	overflow: hidden;
    
    
     display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-auto-rows: 2em 2.5em;
  grid-auto-columns:5em auto 5em;
  grid-template-areas:
    "image titre prix"
    "image quantite  remise";
    

    
    
    
    
}
.card-art-cadre .image {
	width: 4.5rem;
	height: 4.5rem;
	background: rgba(255, 255, 255, 1);
	border-radius: var(--radiusgen);
	overflow: hidden;
}
.card-art-cadre .image img {
	width: auto;
	height: 100%;
	overflow: hidden;
}
.card-art-cadre .titre {
	width: 100%;
	height: auto;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;

	overflow: hidden;
}
.card-art-cadre .text {


	height: auto;
	padding-bottom: 0rem;
	border-radius: 0em;
	overflow: hidden;
}

.card-art-cadre .prix {	
	
	height: auto;
	padding-bottom: 0.3rem;


}

.card-art-cadre .remise{
	width: auto;
	padding-bottom: 0.3rem;
	border-radius: 0em;
	overflow: hidden;

}
.card-art-cadre .quantite {

	width: 10rem;


	padding-top: 0.0rem;
	overflow: hidden;
}

.card-art-cadre .description {
	flex: auto;
	width: 100%;
	display: -webkit-box;
	-webkit-line-clamp: 4;
	-webkit-box-orient: vertical;
	padding-top: 0.3rem;
	overflow: hidden;
}
.card-art-cadre .action {
	display: flex;
	width: 100%;
	height: auto;
}
.masque {
	width: 100%;
	height: 100%;
	position: absolute;
	top: 120%;
	left: 0;
	background: var(--color2);
	transition: 0.3s;
}
.active:hover ~ .masque {
	position: absolute;
	top: -0%;
	left: 0;
}
.masque:hover {
	position: absolute;
	top: -0%;
	left: 0;
}



















/*// bouton  ////////////////////////////////////////////////////////////////*/



.bouton {
	height: 2em;
	width: auto;
	min-width: 10em;
	border-radius: var(--radiusgen);
	margin-top: 0.3em;
	line-height: 2em;
	vertical-align: middle;
	text-align: center;
	cursor: pointer;
	overflow: hidden;
	transition: 0.3s;
}





.bouton-sombre:hover, .bouton-claire {
	background: var(--color2);
	color: var(--color1);
	border: solid 0.05rem var(--color1);
}
.bouton-sombre, .bouton-claire:hover {
	color: var(--color2);
	background: var(--color1);
	border: solid 0.05rem var(--color2);
}








input[type=number]::-webkit-inner-spin-button, 
input[type=number]::-webkit-outer-spin-button { 
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    margin: 0; 
}



input[type=number] 
{ text-align:center;
 border: none;
}



fieldset {  
border-radius:var(--radiusgen); 

}




 .input {  background:  var(--color2) ;
padding-left:2em;
border:solid 1px  var(--color1);
color: rgba(0,0,0,1);
vertical-align:middle;
border-radius:var(--radiusgen); 
overflow: hidden;
height:2em;
transition:0.2s;
font-weight:700;
width:10rem;
font-size:1rem;
padding-right:0.3em;  
margin:0.2em;
}


 .input:focus { outline: none;
border:solid 0.0em  var(--color1);
box-shadow: 0px 0px 0.0em 0.1em var(--color1),0px 0px 0.0em 0.2em var(--color2);;
transition:0.2s;
padding-left:0.6em;
text-overflow: ellipsis;
 background-position: -100%;

}


 .input::placeholder  { 
 font-weight:700;line-height: 1.5em; color: rgba(0,0,0,0.35);
}




 .recherche {  
 background: url(../skin/icon/shear.jpg)0% 0% no-repeat, rgba(250,250,250,1) ;
 background-size: auto 100%,cover;
 
}
/*// bouton icon ////////////////////////////////////////////////////////////////*/

.Pseudo{
background: url(../skin/icon/PSEUDO.jpg)0% 0% no-repeat, rgba(250,250,250,1) ;
 background-size: auto 100%,cover;

min-width:10em;
}


.Mdp{width:75%;min-width:10em;
background: url(../skin/icon/mdp.jpg)0% 0% no-repeat, rgba(250,250,250,1) ;
 background-size: auto 100%,cover;
transition:0.2s;
}


.Cp{width:75%;min-width:10em;
background: url(../skin/icon/cp.jpg)0% 0% no-repeat, rgba(250,250,250,1) ;
 background-size: auto 100%,cover;height:2.5em;
transition:0.2s;
}



.Ville{width:75%;min-width:10em;
background: url(../skin/icon/ville.jpg)0% 0% no-repeat, rgba(250,250,250,1) ;
 background-size: auto 100%,cover;
transition:0.2s;
}




.Cloche{width:75%;min-width:10em;
background: url(../skin/icon/cloche.jpg)0% 0% no-repeat, rgba(250,250,250,1) ;
 background-size: auto 100%,cover;
transition:0.2s;
}




.Mail{width:75%;min-width:10em;
background: url(../skin/icon/mail.jpg)0% 0% no-repeat, rgba(250,250,250,1) ;
 background-size: auto 100%,cover;
transition:0.2s;
}

.Ref{width:75%;min-width:10em;
background: url(../skin/icon/ref.jpg)0% 0% no-repeat, rgba(250,250,250,1) ;
 background-size: auto 100%,cover;
transition:0.2s;
}


.Trait{width:75%;min-width:10em;
background: url(../skin/icon/trait.png)0% 0% no-repeat, rgba(250,250,250,1) ;
 background-size: auto 100%,cover;
transition:0.2s;
}



.Eur{width:75%;min-width:10em;
background: url(../skin/icon/eur.jpg)0% 0% no-repeat, rgba(250,250,250,1) ;
 background-size: auto 100%,cover;
transition:0.2s;
}













#card-title{
	color: #f4f4f4;
font-weight: 700;
min-width:10em;
font-size:1.8em;
Padding:0em 0.5em ;
margin:0.0em;
margin-bottom:0em;
width:20rem;
height: auto;
text-align:left;
border-bottom:0.1em  solid rgba(0,0,0,1);
padding:0.3em 0 0.5em 0;text-weight:700
border-bottom:0.1em  solid rgba(0,0,0,1);
padding:0.3em 0 0.5em 0;

}




#art-view{
display:flex;
flex-direction: column;
width:30em;
text-align:center;
justify-content: center top;
max-width:100%;
align-items: center;
padding-top:1em;overflow-y:scroll;overflow-x:hidden;
height:auto;
max-height:calc(100% - 17.5em);transistion:0.5s;
min-height:calc(100% - 17.5em);
}




#card-viewlien{  justify-content: center;
font-weight: bold;
line-height: 1.4em;
font-size:1.4em;
flex:1;
 vertical-align: middle;
 color:var(--color2);
text-align:center;
position:fixed;top:0.2em;right:0.2em;
border-radius:var(--radiusgen) var(--radiusgen) var(--radiusgen) calc( var(--radiusgen) /4);
font-family: 'segoe';
background: var(--color1);

Padding:0;
margin-top:5vh;
width: 2.3em;
height:2.3em;

user-select: none;
max-width:95%;
box-shadow:0.0em 0.0em 0.2em rgba(0,0,0,0.5);
transition:0.5s ease-out;

z-index:10;

}

.card-viewnum{ 

font-weight: bold;
line-height: 1.5em;
font-size:0.7em;
 vertical-align: middle;
 color:var(--color1);
text-align:center;

position:absolute;
top:-0em;
right:-0em;

font-family: 'segoe';
background: var(--color2); 
Padding:0.0em;margin:0.0em;
width: 1.5em;
height:1.5em;
border-radius:var(--radiusgen) ;
max-width:1.5em;max-height:1.5em; user-select: none;
box-shadow:0.0em 0.0em 0.2em rgba(0,0,0,0.5);

transition:0.5s ease-out;
}




.card-viewlien img{  transition:0.5s ease-out;top:-0em;right:-0em;
content: url(../skin/icon/cad.png);  width:100%;height:100%}
#card-viewcheck:checked ~ * .card-viewlien img{content: url(../skin/icon/croix.png); }

#card-viewcheck:checked ~ * .card-viewnum{ display:none}

 .bg2 img{ opacity:0 ; transition:0.5s ease-out ;position:absolute;top:-2em;right:-0em;}
.bg1 img{opacity:0 ; content:url(../skin/icon/cad.png); transition:0.5s ease-out }


.bg1  .card-viewnum{ transition:0.2s ease-out;
font-weight: bold;
line-height: 1.5em;
font-size:1.5em;
color: var(--color2);
background: rgba(255,255,255,0.0); 
box-shadow:0.0em 0.0em 0.2em rgba(0,0,0,0.0);


}
card-view{ 
 z-index:20;
}

card{ 
position:fixed;top:0;right:0;
    background:var(--panier);
   Padding:2em 0em ;margin:0.0em;
   width: 0;
   height: 0; 
    overflow:hidden;
    transition: width 0.5s, height 0s 1s;
    max-width:25em; 
    box-shadow:-0.1em 0.0em 0.2em rgba(0,0,0,0.5);  
background: linear-gradient(to top,rgba(0,0,0,0.7) 100% , #ffffff00 ), url(../../img/bg21.webp) center top repeat-y;
    background-size:auto, auto 90%,100% 100%  ;
    text-align:center;
font-family: 'segoe' ; z-index:20;
}

#card-viewcheck:checked ~ * card{ 
position:fixed;top:0;right:0;
Padding:2em 0em ;margin:0.0em;
width: 100%;
height: 100%;max-height: 100vh;
transition: width 0.5s,height 0s;
  
}





.bg1{background: rgba(0,180,0,1);
content: "+1"; 
box-shadow:-0.1em 0.0em 1em rgba(255,255,255,1);

 transition:0.5s ease-out}





.bg2{background: rgba(180,0,0,1);
content: ":,("; 
box-shadow:-0.1em 0.0em 1em rgba(255,255,255,1);


 transition:0.5s ease-out}

#card-viewcheck{ display:none}


#payer{ 
position:absolute;top:0;right:-100%; 
    background:var(--panier);
   Padding:2em 0em ;margin:0.0em;
   width: 100%;
   height: 100%; 
    overflow:hidden;
    transition:  0.5s;
    max-width:25em; 
    box-shadow:-0.1em 0.0em 0.2em rgba(0,0,0,0.5);  
        background:  url(../../img/bg21.webp) center top no-repeat;
    background-size:auto, auto 90%,100% 100%  ;
    text-align:center;
font-family: 'segoe' ;
}




#card-payer:checked  ~ *  #payer{ 
position:absolute;top:0;right:0;
Padding:2em 0em ;margin:0.0em;
width: 100%;
height: 100%;
transition:0.5s;
}


#icon img{
width:100%;
height:100%;
transition:1s;
position: relative;
top: 0%;
}

#icon { 
border-radius:50%;
position: relative;

width:10em;
height:10em;
overflow:hidden;
box-shadow: inset 0em 0em 0.5em rgba(0,0,0,0.5);
}






.connect{top:0;transition: top  0.2s;
background:url(../Skin/connect2.png) ,linear-gradient(to bottom, #2d3e52, #dcc4a0) ; 
background-size:100%,100% ;
}

.lost{top:0;transition: top  0.2s;
background:url(../Skin/lost.png),linear-gradient(to bottom, #2d3e52, #dcc4a0) ; 
background-size:100%,100% ;
}

.inscription{top:0;transition: top 0.2s;
background:url(../Skin/ins2.png) ,linear-gradient(to bottom, #2d3e52, #dcc4a0) ; 
background-size:100%,100% ;

}







.scaleani{transform:scale(0.0);
animation:  0.25s  ease-in 0s   scalean;
animation-delay: 0.25s;
animation-fill-mode:  forwards;
}

  @keyframes scalean { from { transform:scale(0.0); } to {transform:scale(1);}  }

 @-webkit-keyframes scalean { from { transform:scale(0.0); } to {transform:scale(1);}  }