:root
{
--price-color: #ede83e;
--color-fond-rgba: rgba(0, 0, 0, 0.90);
--color-fich-rgba: rgba(255, 255, 255, 0.9);
--color-white-rgba: rgba(255, 255, 255, 0.8);
}

body
{
background-image: url('../../boutique/images/fond.png');
background-repeat: no-repeat;
background-size: cover;
}

header
{
background-color: var(--color-white-rgba);
}

#affZone
{
max-height: 70vh;
overflow-y: auto;
justify-content: space-around;
scrollbar-width: thin;
scrollbar-color: var(--color-one-rgba) var(--color-four-rgba);
}

#rightCol
{
position: absolute;
top: 5vh;
left: 78vw;
display: flex;
flex-wrap: wrap;
width: 20vw;
min-height: 90vh;
max-height: 90vh;
overflow-y: auto;
justify-content: space-around;
align-items: space-around;
scrollbar-width: thin;
scrollbar-color: var(--color-one-rgba) var(--color-four-rgba);
}

.sfam
{
display: flex;
flex-direction: column;
width: 10vw;
height : 25vh;
box-sizing: border-box;
margin: 1vh;
border: 1px solid var(--color-one);
justify-content: space-around;
align-items: center;
background-color: var(--color-two-rgba);
}

.sfamTitle
{
height: 20%;
width: 90%;
font-size: 0.8vw;
text-align: center;
}

.selected
{
background-color: var(--color-four-rgba);
color: var(--color-five);
}

.coordImg
{
animation-name: none;
}

.art
{
display: flex;
flex-direction: column;
flex-wrap: wrap;
width: 15vw;
height : 40vh;
box-sizing: border-box;
margin: 1vh;
border: 1px solid var(--color-one);
justify-content: space-around;
align-items: center;
background-color: var(--color-white-rgba);
}

.artImg
{
display: block;
width: 90%;
max-height: 70%; 
}

.artTitle
{
height: 20%;
width: 90%;
color: var(--color-four);
font-size: 0.8vw;
text-align: center;
}

.artStitle
{
height: 7%;
width: 90%;
color: var(--color-one);
font-size: 0.7vw;
text-align: center;
}

.artDesc
{
height: 18%;
width: 90%;
color: var(--color-one);
font-family: "Font2";
font-size: 0.8vw;
}

.artPrice
{
display: flex;
height: 15%;
width: 100%;
align-items: center;
justify-content: center;
color: var(--color-four);
font-size: 1.1vw;
}

.artRef
{
display: flex;
justify-content: flex-end;
width: 20%;
color: var(--color-one);
font-family: "Font2";
font-size: 0.7vw;
}

#affZoneOver
{
display: flex;
flex-wrap: wrap;
justify-content: space-around;
align-items: center;
width: 96vw;
height: 96vh;
position: absolute;
z-index: 2;
background-color: var(--color-white-rgba);
background-image: url("../images/logo.png");
background-size: contain;
background-repeat: no-repeat;
background-position: center;
top: 2vh;
left: 2vw;
}

#affOverImg
{
display: flex;
justify-content: center;
align-items: space-around;
flex-wrap: wrap;
width: 46vw;
min-height: 88vh;
max-height: 88vh;
overflow-y: auto;
scrollbar-width: thin;
scrollbar-color: var(--color-one-rgba) var(--color-four-rgba);
}

.artOverImg
{
display: block;
box-sizing: border-box;
margin: 1.5vh;
max-width: 43vw;
height: 65vh;
}

#affOverFich
{
display: flex;
flex-wrap: wrap;
justify-content: center;
width: 26vw;
height: 85vh;
box-sizing: border-box;
border: 2px solid var(--color-four);
background-color: var(--color-fich-rgba);
}

.affOverTitle
{
display: block;
width: 26vw;
height: 17vh;
font-size: 1.6vw;
text-align: center;
text-shadow: 0px 0px 6px var(--color-five);
}

.affOverSub
{
display: block;
width: 26vw;
height: 8vh;
color: var(--color-four);
font-family: "Font2";
font-size: 2vw;
text-align: center;
}

.affOverPrice
{
display: flex;
justify-content: center;
align-items: center;
width: 13vw;
height: 8vh;
color: var(--color-four);
box-sizing: border-box;
font-size: 2.1vw;
text-align: center;
}

.affOverText
{
display: block;
width: 24vw;
height: 50vh;
color: var(--color-one);
font-family: "Font2";
font-size: 1.8vw;
box-sizing: border-box;
border: 1px solid var(--color-one);
padding: 1vh;
text-align: justify;
overflow-y: auto;
scrollbar-width: thin;
scrollbar-color: var(--color-one-rgba) var(--color-four-rgba);
}

.affOverRef
{
display: flex;
justify-content: center;
align-items: center;
width: 12vw;
height: 8vh;
font-family: "Font2";
box-sizing: border-box;
font-size: 1.5vw;
text-align: center;
}


.close
{
display: block;
width: 4vh;
height: 4vh;
margin: 1vw;
}

.occasImg
{
display: block;
max-width: 10vw;
max-height: 20vh;
box-sizing: border-box;
border: solid 1px var(--color-one);
animation: hiden 3s 1;
}

.occasText
{
display: flex;
justify-content: center;
align-items: center;
width: 10vw;
height: 5vh;
font-size: 0.8vw;
text-align: center;
color: var(--color-four);
}

.occasSub
{
display: block;
width: 10vw;
height: 15vh;
font-size: 0.95vw;
/*text-align: justify;*/
color: var(--color-one);
font-family: "Font2";
}

#occas
{
position: absolute;
left: 80vw;
display: flex;
flex-direction: column;
flex-wrap: wrap;
justify-content: space-around;
align-items: center;
width: 15vw;
height: 90vh;
background-color: var(--color-two-rgba);
box-sizing: border-box;
border: 1px solid var(--color-one);
margin-top: 5vh;
}