@charset "UTF-8";
html
{
	width: 100%;
	height: 100%;
	font-family:'Times New Roman', 'Arial' , 'helvetica';
	margin:10px;

}


body.p2
{
position: relative;
width: 99%;
margin-top:10px;
margin-left: auto;
margin-right: auto;
padding: 1%;
background-color: transparent;
background-image: url("imgp1/star60.gif");
}

table.t22
{
  -webkit-border-radius:10%;
-moz-border-radius:10%;
-o-border-radius:10%;
-ms-border-radius:10%;
-khtml-border-radius: 10%; 
border-radius:10%;
background-color: white;  
border:solid 1px  #ff7a33 ;
padding: 2%;
}

.D111
{
   -webkit-border-radius:10%;
-moz-border-radius:10%;
-o-border-radius:10%;
-ms-border-radius:10%;
-khtml-border-radius: 10%; 
border-radius:10%;
background-color: white;  
height:90px;
width: 80%;
margin-left: auto;
margin-right: auto;
text-align: center;
padding-top: 3%;
}

body
{
position: relative;
width: 99%;
margin-top:10px;
margin-left: auto;
margin-right: auto;
padding: 1%;

background: white;
font-size: 1.1em;
min-height: 100%;


} 

body:before 
{
content: "Version Ordinateur du site";
display: block;
text-align: left;
font-style: italic;
color: #777;
font-size: 0.6em;
text-align: center;
}


h2
{
 margin-bottom:1px; 
 padding-bottom:1px; 
}

h3
{
 margin-bottom:1px; 
 padding-bottom:1px; 
}

h4
{
 margin-bottom:1px; 
 padding-bottom:1px; 
}

div.D1
{
top:1%;
width: 99%;
height:3%;
padding: 1%;
background-color:white;
-webkit-border-radius:5px;
-moz-border-radius:5px;
-o-border-radius:5px;
-ms-border-radius:5px;
-khtml-border-radius: 5px ; 
border-radius:5px;
margin-left: auto;
margin-right: auto;
text-align: center;

}

.divcouleur
{
-webkit-border-radius:1%;
-moz-border-radius:1%;
-o-border-radius:1%;
-ms-border-radius:1%;
-khtml-border-radius: 1%; 
border-radius:1%;
background-color: white;
padding: 1%;
margin:1%;
box-shadow: 6px 6px 16px red;
width: 95%;	
height:auto;
text-align: center;
overflow-x: auto;
top: 25%;
vertical-align: middle;
		margin-left: auto;
		margin-right: auto;
}


.DivFamilleMenu
{

-webkit-border-radius:1%;
-moz-border-radius:1%;
-o-border-radius:1%;
-ms-border-radius:1%;
-khtml-border-radius: 1%; 
border-radius:1%;
background-color: white;
padding: 1%;
margin:1%;
margin-top:2%;
box-shadow: 6px 6px 16px red;
width: 95%;	
height:70px;

overflow-x: auto;
top: 25%;
vertical-align: middle;
		margin-left: auto;
		margin-right: auto;
}



.menuhCellule
{
width: auto;
min-width: 10%;
height:auto;
padding: 1%;
margin-top:20%;
margin-bottom:20%;
background-color:white;
-webkit-border-radius:10%;
-moz-border-radius:10%;
-o-border-radius:10%;
-ms-border-radius:10%;
-khtml-border-radius: 10%; 
border-radius:40%;

box-shadow: rgb(255, 198, 0) -2px -2px 0px 2px, rgb(246, 84, 174) 0px 0px 0px 4px, rgba(0, 0, 0, 0.05) 0px 0px 2px 7px;
transition: all 0.2s;
}

.menuhCellule:hover
{
	background-color:#00FF00 ;
	color: red;
	border:solid 2px #BDBDBD;
	box-shadow: 6px 6px 16px red;
}


.menuhCelluleMenu
{
width: auto;
min-width: 10%;
height:auto;
padding: 1%;
margin:0.5%;
margin-top:15%;
margin-bottom:40%;
background-color:white;
-webkit-border-radius:10%;
-moz-border-radius:10%;
-o-border-radius:10%;
-ms-border-radius:10%;
-khtml-border-radius: 10%; 
border-radius:40%;

box-shadow: rgb(255, 198, 0) -2px -2px 0px 2px, rgb(246, 84, 174) 0px 0px 0px 4px, rgba(0, 0, 0, 0.05) 0px 0px 2px 7px;
transition: all 0.2s;
}

 .box {
        display: -webkit-box;
        display: -moz-box;
        display: -ms-flexbox;
        display: -webkit-flex;
        display: flex;
        width: 99%;
        height: 100%;
        
		text-align: center;
		
		margin-left: auto;
		margin-right: auto;
		
      }
	  
      .box div {
        width: 98%;
		
        padding: 1%;
		margin:1%;
        text-align: center;
        color: #000000;
        font-family: arial, sans-serif;
		text-align: center;
		margin-left: auto;
		margin-right: auto;
		overflow-x: auto;
      }


	  

div.CataArticle
{

width: 99%;



}

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

div.CataArticleDetail
{
border:solid 3px  #dc7633  ;
width: 98%;
min-height: 400px;
height: 400px;
-webkit-border-radius:2%;
-moz-border-radius:2%;
-o-border-radius:2%;
-ms-border-radius:2%;
-khtml-border-radius: 2%; 
border-radius:2%;
margin-left: auto;
margin-right: auto;
padding-left:1%;
padding-top:1px;
overflow-x: auto;
}

div.CataArticleDetailHaut
{
top:1px;	
width: 98%;
padding-top:1px;
min-height: 30px;
max-height: 30px;
text-align: center;
margin-top:0px;
margin-bottom: auto;
}

div.CataArticleDetailHaut h3
{
width: 70%;
font-size: 1em;	
-webkit-border-radius:2%;
-moz-border-radius:2%;
-o-border-radius:2%;
-ms-border-radius:2%;
-khtml-border-radius: 2%; 
border-radius:2%;
border: 1px dotted rgb(94, 94, 95);
text-align: center;
margin-left: auto;
margin-right: auto;
background-color:#D8D8D8;
color: blue;
}

div.artifloatright
{
width: auto;
width: 35%; 

margin-top:5%;
float: right;
text-align: center;
color: blue;
background-color: #f8f9f9;
}

div.CataArticleright
{
  margin-top:2%;
 width: 20%; 
 float: right;
}

.submitpanier
{
background-color:#D8D8D8;
border: 3px dotted rgb(94, 94, 95);
-webkit-border-radius:2%;
-moz-border-radius:2%;
-o-border-radius:2%;
-ms-border-radius:2%;
-khtml-border-radius: 2%; 
border-radius:2%;
}

.imgarti
{
-webkit-border-radius:2%;
-moz-border-radius:2%;
-o-border-radius:2%;
-ms-border-radius:2%;
-khtml-border-radius: 2%; 
border-radius:2%;
border:solid 5px #BDBDBD;
margin-left:1%;
margin-top:3%;
 width: 20%; 
}

table.talterno
{
width: 40%;
margin-left: auto;
margin-right: auto;
-webkit-border-radius:2%;
-moz-border-radius:2%;
-o-border-radius:2%;
-ms-border-radius:2%;
-khtml-border-radius: 2%; 
border-radius:2%;
padding-left: 2%;
font-size: 1.0em;
border: 2px dotted rgb(94, 94, 95);
}

table.talterno tr:nth-child(even) 
{
  background-color:#D8D8D8;
 
 
}

table.talterno tr:nth-child(odd) 
{
background-color: #FFF;
border-bottom: 1px dotted rgb(94, 94, 95);
}



table.talternopanier
{
width: 70%;
min-width:50%;
  top:0;
  left:0;
  right:0;
-webkit-border-radius:2%;
-moz-border-radius:2%;
-o-border-radius:2%;
-ms-border-radius:2%;
-khtml-border-radius: 2%; 
border-radius:2%;
padding-left: 1px;
font-size: 1.0em;
border: 1px dotted rgb(94, 94, 95);
}

table.talternopanier tr:nth-child(even) 
{
  background-color:#D8D8D8;
 
 
}

table.talternopanier  tr:nth-child(odd) 
{
background-color: #FFF;
border-bottom: 1px dotted rgb(94, 94, 95);

}

.panier
{
  width: 99%;
min-width:99%;
 height:1000px; 
 padding: 1px;
 margin:1px;
 background: gold;
}

.boxcata
{
width: 99%;  
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
}

.divdroit
{
  width: 25%;
  position: relative;
  float: right;
height:100%; 
padding: 1%;
margin-top:1%;
border:solid 1px #3fff33;
}

.divgauche
{
  width: 70%;
  position: relative;
  float:left;
 height:100%; 
 padding: 1%;
 margin-top:1%;
 border:solid 1px red;
}



.DivArticleShop
{
 width: 350px; 
  height:350px;
  border:solid 2px green;
  background-color:#D8D8D8;
  display: flex;
  display:inline-block;
  vertical-align : middle;
  word-wrap : break-word;
overflow-wrap : break-word;
 padding: 6px;
 margin-top:10px;
  margin-bottom:10px;
}

.imgarti2
{
-webkit-border-radius:2%;
-moz-border-radius:2%;
-o-border-radius:2%;
-ms-border-radius:2%;
-khtml-border-radius: 2%; 
border-radius:2%;
border:solid 1px #BDBDBD;
width: 85%;
height:70%;
max-width: 85%;
max-height: 70%;
 padding: 6px;

}

.DivChercheShop
{
width: 75%;   
height:auto;
border:solid 1px #BDBDBD;  
vertical-align: middle;
overflow-wrap : break-word;
text-align: center;
 margin-top:1%;
margin-left: auto;
margin-right: auto;
}

.CDivPanier
{
width: 70%; 
border:solid 5px #BDBDBD;  
margin-left: 9%;
margin-right: auto;
  background-color:white;
}

.boutonpanier
{
 width: 8%;  

float: left;
}

.DivBienvenue1
{
  width: 70%; 
  height:auto;
  margin-left: auto;
margin-right: auto;
border:solid 5px #BDBDBD;  
background-color:#D8D8D8;
}

.cap
{
    width: 70%; 
  height:auto;
  border:solid 5px #BDBDBD; 
  
}
.inputfond
{
  
}


.b1
{
display: inline-block;
outline: 0;
border:0;
cursor: pointer;
text-decoration: none;
position: relative;
color: #000;
background: #fff;
line-height: 30px;
border-radius: 40px;
padding: 20px;
font-size: 30px;
font-weight: 600;
box-shadow: rgb(255, 198, 0) -2px -2px 0px 2px, rgb(246, 84, 174) 0px 0px 0px 4px, rgba(0, 0, 0, 0.05) 0px 0px 2px 7px;
transition: all 0.2s;

}
                
.b1:hover{
border-radius: 50px;
border:10;
background-color: #0000ff;
rotate: -3deg;
}



.fieldsel1
{
width: 70%;  
-webkit-border-radius:10%;
-moz-border-radius:10%;
-o-border-radius:10%;
-ms-border-radius:10%;
-khtml-border-radius: 10%; 
border-radius:10%;
 background-image: linear-gradient(180deg, #fff, #ddd 40%, #ccc);
 box-shadow: rgb(255, 198, 0) -2px -2px 0px 2px, rgb(246, 84, 174) 0px 0px 0px 4px, rgba(0, 0, 0, 0.05) 0px 0px 2px 7px;
transition: all 0.3s;
   
}


.selectMenu 
{
  -webkit-border-radius:10%;
-moz-border-radius:10%;
-o-border-radius:10%;
-ms-border-radius:10%;
-khtml-border-radius: 10%; 
border-radius:10%;
font-size: 1.3em;
box-shadow: rgb(255, 198, 0) -2px -2px 0px 2px, rgb(246, 84, 174) 0px 0px 0px 4px, rgba(0, 0, 0, 0.05) 0px 0px 2px 7px;
transition: all 0.3s;
  
}



    #heart {
      position: relative;
      width: 350px;
      height: 380px;
    }
    #heart:before,
    #heart:after {
      position: absolute;
      content: "";
      left: 50px;
      top: 0;
      width: 350px;
      height: 380px;
      background: red;
      border-radius: 50px 50px 0 0;
      transform: rotate(-45deg);
      transform-origin: 0 100%;
    }
    #heart:after {
      left: 0;
      transform: rotate(45deg);
      transform-origin: 100% 100%;
    }
  

.ImgP1
{
  -webkit-border-radius:10%;
-moz-border-radius:10%;
-o-border-radius:10%;
-ms-border-radius:10%;
-khtml-border-radius: 10%; 
border-radius:20%;

      width: 90%;
  transform: rotate(-5deg);
  float: right;
}

.ImgP12
{
    -webkit-border-radius:10%;
-moz-border-radius:10%;
-o-border-radius:10%;
-ms-border-radius:10%;
-khtml-border-radius: 10%; 
border-radius:20%;

      width: 15%;

 transform: rotate(3deg) translateX(100px);

}

.columns_4 
{
   display:block;
  width: auto;
  margin-left: auto;
margin-right: auto;
  columns: 2;
  column-width: 150px;
 
}

.pdroit
{
  margin:1%; 
 float: left;
}
.pgauche
{
 margin:1%;
  float: right;

}

.gallery {
  --s: 150px; /* the image size */
  
  display: grid;
  transform-style: preserve-3d;
  animation: r 15s linear infinite;
  position: relative;
    top:3%;
   padding: 1%;
  margin: 0;
}
@keyframes r {
  0% {transform: perspective(450px) rotateX(-100deg) rotate(0deg)}
  to {transform: perspective(450px) rotateX(-100deg) rotate(-360deg)}
}
.gallery > img {
  grid-area: 1/1;
  width: var(--s);
  aspect-ratio: 1;
  object-fit: cover;
  border-radius: 10px 10px 0 0;
  transform: rotate(var(--_a)) translateY(120%) rotateX(90deg);
     padding: 1%;
  margin: 0;
}
.gallery > img:nth-child(1) {--_a: 0deg}
.gallery > img:nth-child(2) {--_a: 60deg}
.gallery > img:nth-child(3) {--_a: 120deg}
.gallery > img:nth-child(4) {--_a: 180deg}
.gallery > img:nth-child(5) {--_a: 240deg}
.gallery > img:nth-child(6) {--_a: 300deg}

.gallery::before {
  content: "";
  position: absolute;
  inset: -100%;
  clip-path: polygon(50% 0,calc(50% + .866*50%) 25%,calc(50% + .866*50%) 75%,50% 100%,calc(50% - .866*50%) 75%,calc(50% - .866*50%) 25%);
  background: #99B2B7;
  transform: translateZ(calc(var(--s)/2)) rotate(90deg);
}



div.ccc 
{
  top:3%;
   padding: 1%;
  margin: 0;
  min-height: 100vh;
  display: grid;
  place-content: center;
  background: white;
  overflow: hidden;
}

.coming-soon {
	background: linear-gradient(45deg, #ff6b6b, #ff8e53);
	color: white;
	padding: 15px 0;
	text-align: center;
	font-weight: 600;
	font-size: 1.2rem;
	position: relative;
	overflow: hidden;
	box-shadow: 0 4px 15px rgba(255, 107, 107, 0.3);
	animation: pulseGlow 2s infinite alternate;
	 border:solid 1px red;
	 margin-left: auto;
margin-right: auto;
}

	 @keyframes pulseGlow {
	0% { box-shadow: 0 4px 15px rgba(255, 107, 107, 0.3); }
	100% { box-shadow: 0 4px 25px rgba(255, 107, 107, 0.6); }
}