/*GENERAL*/
@charset"UTF-8";

:root{
--bonbon:#db7364;
--rose:#ebaba7;
--sucre:#f0d8d3;
--fond:#F5F3EB;
--ciel:#f5deb5;
--menthe:#ebb928;
--gris:#444e51;}

body{
overflow-x:hidden;
user-select:none;
margin:0;
text-align:-webkit-center;
font-size:15px;
font-family:laviosa;
color:var(--gris);
background-color:var(--fond);}

hr{
border-style:solid;
border-color:gray;}

.wavetop{
display:block;
z-index:11;
position:fixed;
top:60px;
color:var(--menthe);
filter:drop-shadow(0 6px 0px #ebb92877);}
.wavebottom{display:flex;filter:drop-shadow(0 -6px 0px #ebaba777);}

/*NAVBAR*/
header{
z-index:11;
top:0;
position:sticky;
height:60px;
width:100vw;
background-color:var(--menthe);}
header a{
display:inline-block;
padding:20px 18px;
text-decoration:none;
font-size:17px;
font-weight:bold;
color:var(--fond);
transition:all 0.1s linear 0s;}
header a:hover{
color:var(--bonbon);
transition:all 0s linear 0s;}
header a svg{
fill:var(--fond);
transition:all 0.1s linear 0s;}
header a svg:hover{
fill:var(--bonbon);
transition:all 0s linear 0s;}


.imghome{
width:300px;
height:300px;
rotate:-2deg;
border:var(--fond) 10px solid;
box-shadow:0 9px 17px -9px rgba(0,0,0,0.5);
animation:entry 0.5s;}

@keyframes entry{
0%{transform:rotate(-20deg) translate(-150px,-100px);opacity:0;}
100%{transform:rotate(0deg) translate(0,0);opacity:1;}
}
@keyframes entrytop{
0%{transform:translateY(-50px);opacity:0;}
100%{transform:rtranslate(0);opacity:1;}
}

article{
width:250px;
height:fit-content;
text-align:left;
overflow:hidden;
cursor:pointer;}




/*LAYOUT*/
	/*presentation article*/
.LAYOUT_MAIN_presentation{
max-width:1300px;
margin-top:80px;
margin-left:80px;
margin-right:80px;
display:flex;
column-gap:140px;}
.LAYOUT_R_presentation{
text-align:left;
flex:2;}

	/*footer*/
footer{
background-color:var(--rose);
padding:20px;
display:flex;
justify-content:center;
gap:25px;}
.LAYOUT_L_footer{
height:fit-content;
text-align:left;
padding-right:25px;
border-right:gray 2px solid;
display:grid;}
.LAYOUT_C_footer{
height:fit-content;
text-align:left;
padding-right:25px;
display:grid;}
.LAYOUT_R_footer{
text-align:right;
margin-left:70px;}

	/*commentaires*/
.LAYOUT_commentaires{
margin: 70px 0;
max-width: 900px;
display: inline-block;
text-align: left;
width: 100%;}


.divTitre{
max-width:1300px;
margin-top:80px;
margin-left:80px;
margin-right:80px;
text-align:left;}
	/*base main*/
.mainGrid{/*base*/
max-width:1300px;
margin-top:80px;
margin-left:80px;
margin-right:80px;
min-height:calc(100vh - 450px);
display:flex;
column-gap:70px;}


	/*liste 2\3*/
.listGrid{
display:flex;
flex-direction:column;
row-gap:35px;
flex:2;}
	/*side*/
.sideGrid{
display:flex;
flex-direction:column;
row-gap:35px;
width:350px;}


	/*base main*/
.mainTable{/*base*/
max-width:1700px;
min-height:calc(100vh - 450px);
display:flex;
padding:70px;
column-gap:70px;}
	/*tableau 1\5*/
.gridTable{
display:grid;
gap:70px;
flex:4;
grid-template-columns:repeat(auto-fit,250px);
justify-content:center;}
.sideTable{
display:flex;
flex-direction:column;
row-gap:35px;
width:250px;}



.listElement{/*élément liste*/
background-color:#ffffffb8;
border-radius:8px;
rgb(234, 233, 231) 2px solid
margin:8px 0;
padding:8px;
display:grid;
text-align:left;
grid-auto-flow:column;
grid-template-columns:repeat(1,0fr 1fr 0fr);}
.sideElement{/*élément side*/
background-color:var(--ciel);
padding:15px;
text-align:left;
border-top:rgba(255,255,255,0.27) 3px solid;
border-bottom:rgba(0,0,0,0.05) 3px solid;
border-radius:17px;
background-image:url(tissu.png);
background-size:11px;
image-rendering:optimizeSpeed;
image-rendering:pixelated;}
.sideElementList{/*élément side*/
display:grid;
background-color:var(--ciel);
padding:15px;
gap:10px;
text-align:left;
border-top:rgba(255,255,255,0.27) 3px solid;
border-bottom:rgba(0,0,0,0.05) 3px solid;
border-radius:17px;
background-image:url(tissu.png);
background-size:11px;
image-rendering:optimizeSpeed;
image-rendering:pixelated;}

/*PANIER*/
.panier{
position:fixed;
text-align:left;
width:280px;
background-color:#ffffffb8;
right:-300px;
top:50px;
padding:8px;
border-radius:8px 0 0 8px;
min-height:230px;
z-index:16;
transition:right 0.4s cubic-bezier(.65,.05,.36,1);
backdrop-filter:blur(10px);
border-top:rgba(255,255,255,0.3) 2px solid;
border-bottom:rgba(0,0,0,0.05) 2px solid;
box-shadow:0 5px 5px -4px rgb(0 0 0 / 15%);}

/*CONNEXION*/
.connexion{
position:fixed;
text-align:left;
background-color:#ffffffb8;
right:50px;
top:-330px;
padding:8px;
border-radius:0 0 8px 8px;
z-index:9;
transition:top 0.4s cubic-bezier(.65,.05,.36,1);
backdrop-filter:blur(10px);
border-bottom:rgba(0,0,0,0.05) 2px solid;
box-shadow:0 5px 5px -4px rgb(0 0 0 / 15%);}



/*TEXTES*/
@font-face{
font-family:onelittlefont;
src:url(onelittlefont.otf)}

@font-face{
font-family:laviosa;
src:url(laviosa.otf)}

::placeholder{
color:grey;
letter-spacing:-0.5px}

.lien{
font-size:13px;
line-height: 1em;
text-decoration:none;
font-family:var(--laviosa);
color:var(--gris);
transition:all 0.2s linear 0s;}
.lien:hover{
color:var(--sucre);
text-decoration:none;
transition:all 0s linear 0s;
cursor:default;}

label{
display:block;
margin-block-start:18px;
margin-block-end:6px;
margin-inline-start:6px;
font-size:15px;
line-height:1.3em;
font-family:"laviosa";
color:var(--gris);}

a{
margin-inline-start:6px;
text-decoration:none;
font-size:15px;
padding:6px;
margin:0;
font-weight:bold;
font-family:"laviosa";
color:var(--gris);
transition:all 0.2s linear 0s;}
a:hover{
text-decoration:none;
color:var(--rose);
transition:all 0s linear 0s;
cursor:default;}
a:visited{
}
a:active{
}
a:focus{
}

h1{
font-family:"laviosa";
font-size:38px;
margin-block-start:1em;
margin-block-end:1em;
margin-inline-start:0;
font-weight:bold;
letter-spacing:-1px;
color:var(--fond);
text-shadow:
-2px -2px var(--gris),
0px -2px var(--gris),
2px -2px var(--gris),
2px 0px var(--gris),
2px 2px var(--gris),
0px 0px var(--gris),
-1px 1px var(--gris),
-2px 1px var(--gris),
-3px 2px var(--gris),
-4px 3px var(--gris),
-5px 3px var(--gris),
-6px 4px var(--gris),
-7px 5px var(--gris),
-8px 5px var(--gris),
-9px 6px var(--gris),
-10px 7px var(--gris),
-11px 7px var(--gris),
-12px 8px var(--gris),
-13px 9px var(--gris),
-14px 9px var(--gris),
-15px 10px var(--gris),
-16px 11px var(--gris),
-17px 11px var(--gris),
-18px 12px var(--gris),
-19px 13px var(--gris),
-20px 13px var(--gris),
-21px 14px var(--gris);}
h3{
margin-inline-start:6px;
text-decoration:none;
display:inline;
font-size:15px;
padding:6px;
margin:0;
font-weight:bold;
font-family:"laviosa";
color:var(--gris);
}
h4{
outline-offset:2px;
outline:2px solid var(--gris);
padding:6px;
margin:0;
font-size:15px;
font-weight:bold;
display:inline;}
h5{/*partie*/
margin-block-start:36px;
margin-block-end:18px;
margin-inline-start:6px;
font-size:20px;
font-weight:bold;
font-family:"laviosa";
color:var(--gris);}
h6{/*tag*/
text-align:center;
margin-block-start:0;
margin-block-end:0;
margin-inline-start:0;
font-weight:normal;
font-size:15px;
line-height:2.1em;
font-family:"laviosa";
color:var(--gris);}
p{/*texte*/
margin-block-start:18px;
margin-block-end:6px;
margin-inline-start:6px;
font-size:15px;
line-height:1.3em;
font-family:"laviosa";
color:var(--gris);}

/*IMAGES*/
object{position:absolute;}

/*CONTENEURS*/
.divContenu{
background-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAIAAAACCAYAAABytg0kAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAAAYdEVYdFNvZnR3YXJlAFBhaW50Lk5FVCA1LjEuOWxu2j4AAAC2ZVhJZklJKgAIAAAABQAaAQUAAQAAAEoAAAAbAQUAAQAAAFIAAAAoAQMAAQAAAAMAAAAxAQIAEAAAAFoAAABphwQAAQAAAGoAAAAAAAAAo5MAAOgDAACjkwAA6AMAAFBhaW50Lk5FVCA1LjEuOQADAACQBwAEAAAAMDIzMAGgAwABAAAAAQAAAAWgBAABAAAAlAAAAAAAAAACAAEAAgAEAAAAUjk4AAIABwAEAAAAMDEwMAAAAABdUNkYj53BAQAAABBJREFUGFdjAAJmEAEFDMwAAD8AB0aXEPcAAAAASUVORK5CYII=);
background-size:11px;
padding-bottom:50px;
image-rendering:optimizeSpeed;}
section{
width:100vw;
padding:75px 0;}
.banniere{
z-index:0;
text-align:left;
display:flow-root;
position:relative;
margin:60px;
max-width:930px;}
main{
position:relative;
display:inline-grid;
grid-gap:60px;
grid-template-columns:repeat(3,1fr);}
.carte{
padding:10px 40px;
margin:80px 0;
text-align:left;
width:700px;
background-color:var(--ciel);
border-top:rgba(255,255,255,0.27) 3px solid;
border-bottom:rgba(0,0,0,0.05) 3px solid;
border-radius:17px;
display:inline-block;}
.alerte{
position:fixed;
z-index:5;
color:var(--gris);
background-color:#ffffffb8;
backdrop-filter:blur(10px);
border-top:rgba(255,255,255,0.3) 2px solid;
border-bottom:rgba(0,0,0,0.05) 2px solid;
padding:15px;
border-radius:25px;
box-shadow:0 9px 17px -9px rgba(0,0,0,0.5);
left:50%;
opacity:1;
transform:translateX(-50%) translateY(-10px);
transition:opacity 0.5s ease;
animation:slideDown 0.5s ease forwards;
}
@keyframes slideDown{
from{
transform:translateX(-50%) translateY(-10px);}
to{
transform:translateX(-50%) translateY(130px);}
}

/*BOUTON BONBON*/
.btnHeart{
mask-image:url(../heart0.svg);
mask-size:cover;
z-index:4;
transform-origin:-40px 33px;
background-color:white;
opacity:0;
transition:all 0.1s ease;
height:50px;
width:50px;
transform:translate(-62px,10px) scale(1);
padding:0;
appearance:none;
border:none;
outline:currentcolor;
position:absolute;}
.btnHeart:hover{
transform:translate(-55px,10px) scale(0.9);
background-color:var(--rose);
transition:all 0.1s ease;}
.btnHeart:active{
background-color:var(--bonbon);
transform:translate(-88px,10px) scale(1.4);
transition:all 0.1s ease;}
article:hover .btnHeart{
opacity:1;
transition:all 0.1s ease;
pointer-events:auto;}
.favoris:hover .btnHeart{
opacity:1;
transition:all 0s ease;
pointer-events:auto;}

.btnCapusule{
z-index:4;
background-color:var(--rose);
padding:2px 0 0 0;
transition:all 0.3s ease;
height:35px;
font-size:13px;
font-weight:bold;
font-family:laviosa;
color:var(--gris);
vertical-align:middle;
margin:-5px 10px 0 0;
padding:0 10px;
appearance:none;
border:none;
outline:currentcolor;
border-radius:20px;
box-shadow:0 3px 10px 0 rgba(233,166,190,0.55);}
.btnCapusule:hover{
transition:all 0s ease;
background-color:var(--bonbon);}

.imgArticle{
width:250px;
height:300px;}
.imgArticlePreview{
width:73px;
height:88px;
border-radius:13px;
margin:0 7px;
image-rendering:pixelated;}
@keyframes doublejump{
0%{transform:translateY(0);}
30%{transform:translateY(-20px);}
60%{transform:translateY(0);}
80%{transform:translateY(-10px);}
100%{transform:translateY(0);}
}
@keyframes jump{
0%{transform:translateY(0);}
20%{transform:translateY(-20px);}
100%{transform:translateY(0);}
}
@keyframes shake{
0%{transform:rotate(0deg);}
20%{transform:rotate(10deg);}
40%{transform:rotate(-10deg);}
60%{transform:rotate(8deg);}
80%{transform:rotate(-8deg);}
100%{transform:rotate(0deg);}
}
.imgPetite{
width:75px;
height:90px;
border-radius:5px;
grid-row:span 2;
image-rendering:pixelated;}

.btnMain{
-webkit-appearance:none;
outline:none;
background-color:var(--bonbon);
font-family:onelittlefont;
font-size:16px;
margin:20px 0;
border:none;
font-weight:bold;
height:57px;
width:140px;
transform:translate(0,0) rotate(0deg);
color:var(--fond);}
.btnMain--1{mask-image:url(blob1.svg);}
.btnMain--2{mask-image:url(blob2.svg);}
.btnMain--3{mask-image:url(blob3.svg);}
.btnMain:hover:enabled{
outline:none;
animation:floating 6s infinite linear;}
.bouton:disabled{
border:3px solid grey;
color:grey;}

@keyframes floating{
0% {transform:translate(0px,0px) rotate(0deg);}
2% {transform:translate(2px,-2px) rotate(0.3deg);}
4% {transform:translate(4px,-3px) rotate(0.7deg);}
6% {transform:translate(6px,-4px) rotate(1.2deg);}
8% {transform:translate(8px,-2px) rotate(2deg);}
10%{transform:translate(10px,0px) rotate(2.5deg);}
12%{transform:translate(12px,2px) rotate(3deg);}
14%{transform:translate(13px,4px) rotate(3.2deg);}
16%{transform:translate(14px,5px) rotate(3.5deg);}
18%{transform:translate(12px,7px) rotate(3deg);}
20%{transform:translate(10px,8px) rotate(2.2deg);}
22%{transform:translate(8px,9px) rotate(1.5deg);}
24%{transform:translate(5px,10px) rotate(0.8deg);}
26%{transform:translate(2px,9px) rotate(0.3deg);}
28%{transform:translate(-1px,8px) rotate(-0.2deg);}
30%{transform:translate(-3px,6px) rotate(-0.8deg);}
32%{transform:translate(-5px,4px) rotate(-1.2deg);}
34%{transform:translate(-8px,2px) rotate(-2deg);}
36%{transform:translate(-10px,0px) rotate(-2.8deg);}
38%{transform:translate(-12px,-2px) rotate(-3.5deg);}
40%{transform:translate(-13px,-3px) rotate(-3.8deg);}
42%{transform:translate(-14px,-4px) rotate(-4deg);}
44%{transform:translate(-12px,-6px) rotate(-3.5deg);}
46%{transform:translate(-10px,-7px) rotate(-3deg);}
48%{transform:translate(-8px,-8px) rotate(-2deg);}
50%{transform:translate(-5px,-9px) rotate(-1deg);}
52%{transform:translate(-2px,-10px) rotate(-0.5deg);}
54%{transform:translate(1px,-9px) rotate(0deg);}
56%{transform:translate(4px,-8px) rotate(0.6deg);}
58%{transform:translate(6px,-6px) rotate(1.2deg);}
60%{transform:translate(8px,-4px) rotate(1.8deg);}
62%{transform:translate(10px,-2px) rotate(2.4deg);}
64%{transform:translate(12px,0px) rotate(3deg);}
66%{transform:translate(13px,2px) rotate(3.4deg);}
68%{transform:translate(14px,3px) rotate(3.6deg);}
70%{transform:translate(13px,4px) rotate(3.4deg);}
72%{transform:translate(11px,5px) rotate(3deg);}
74%{transform:translate(8px,6px) rotate(2.2deg);}
76%{transform:translate(5px,7px) rotate(1.5deg);}
78%{transform:translate(2px,6px) rotate(0.8deg);}
80%{transform:translate(-1px,4px) rotate(0deg);}
82%{transform:translate(-4px,2px) rotate(-0.8deg);}
84%{transform:translate(-7px,0px) rotate(-1.4deg);}
86%{transform:translate(-9px,-2px) rotate(-2deg);}
88%{transform:translate(-11px,-3px) rotate(-2.6deg);}
90%{transform:translate(-12px,-4px) rotate(-3deg);}
92%{transform:translate(-10px,-5px) rotate(-2.4deg);}
94%{transform:translate(-7px,-6px) rotate(-1.8deg);}
96%{transform:translate(-4px,-5px) rotate(-1deg);}
98%{transform:translate(-2px,-3px) rotate(-0.4deg);}
100%{transform:translate(0px,0px) rotate(0deg);}
}


.Boutonnum{
height:18px;
-webkit-appearance:none;
border:none;
outline:none;
background-color:rgba(0,0,0,0);
font-size:15px;
font-weight:800;
color:var(--gris);
transition:all 0.3s linear 0s;
width:18px;}
.Boutonnum:hover:enabled{
outline:none;
color:var(--bonbon);
transition:all 0s linear 0s;}

ul{
position:absolute;
list-style:none;
padding:0;
margin:0;
background-color:#ffffffb8;
border-radius:8px;
backdrop-filter:blur(10px);
border-top:rgba(255,255,255,0.3) 2px solid;
border-bottom:rgba(0,0,0,0.05) 2px solid;
box-shadow:0 5px 5px -4px rgb(0 0 0 / 15%);}


/*TEXT INPUT*/
input{
-webkit-appearance:none;
border:none;
margin:0;
border-radius:15px;
padding:0 7px;
font-family:var(--laviosa);
text-align:left;
border:2px solid var(--sucre);
width:100px;
color:var(--gris);
background-color:var(--fond);
outline:white;
box-sizing:border-box;
font-size:15px;
box-shadow:inset 0 5px 5px -4px rgb(0 0 0 / 15%);
height:35px;
transition:all 0.1s linear 0s;}
input:focus{
border:3px solid var(--bonbon);
transition:all 0s linear 0s;}

/*TIMELINE*/
.timeline {
/* display: -webkit-box; */
width: 800px;
height: 3px;
/* list-style: none; */
text-align: justify;
margin: 40px auto;
background: -webkit-gradient(left top, left bottom, color-stop(0%, rgba(255,255,255,0)), color-stop(45%, rgba(255,255,255,0)), color-stop(51%, rgba(191,128,11,1)), color-stop(57%, rgba(255,255,255,0)), color-stop(100%, rgba(255,255,255,0)));
border-radius: 0;
box-shadow: none;
border: none;
position: relative;
}
.timeline:after {
    display: inline-block;
    content: "";
    width: 100%;
}
.timeline li {
display: inline-block;
width: 40px;
height: 40px;
background-color: var(--ciel);
/* text-align: center; */
top: -20px;
position: relative;
border-radius: 50%;
}
.timeline .etape{background-color:var(--rose);transition:all 0.2s linear 0s;}
.timeline li:hover{background-color:var(--bonbon);transition:all 0s linear 0s;}
.timeline li:before {
	display: inline-block;
	content: attr(data-year);
	font-size: 26px;
	position: absolute;
	left: 50%;
	transform: translateX(-50%);
	top:5px;
}
.timeline li:nth-child:before {
top:6px;
}
.timeline li:after {
pointer-events:none;
	display: inline-block;
	content: attr(data-text);
	font-size: 16px;
	position: absolute;
	left: 50%;
	top:46px;
	transform: translateX(-50%);
}