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

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

body{
width:100%;
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;
border-width:2px;}

.wavetop{
width:100%;
z-index:11;
position:fixed;
filter:drop-shadow(0 6px 0px #ebb92877);}
.wavetop img{
height:fit-content;
transform:translateY(-2px);}
.wavebottom{}
.wavebottom img{
height:fit-content;
transform:translateY(7px);}

/*NAVBAR*/
header{
z-index:11;
top:0;
justify-content:flex-end;
padding-top:40px;
position:sticky;
height:120px;
width:100vw;
display:inline-flex;
flex-flow:row;
overflow:scroll;
background-color:var(--menthe);}
header a{
text-wrap-mode:nowrap;
display:inline-block;
padding:20px 40px;
text-decoration:none;
font-size:48px;
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:40vw;
aspect-ratio:0.7;
height:fit-content;
text-align:center;
overflow:hidden;
cursor:pointer;}



/*CAROUSEL*/
.carousel{
display:flex;
overflow-x:scroll;
scroll-snap-type:x mandatory;
width:100vw;
aspect-ratio:0.833;
-webkit-overflow-scrolling:touch;}

.slide{
flex:0 0 100vw;
scroll-snap-align:start;}

.slide img{
width:100vw;
aspect-ratio:0.833;
object-fit:cover;}


/*LAYOUT*/
.display_index{
display:grid;
gap:8%;
margin:150px 6% 30px 6%;
grid-template-columns:repeat(2,1fr);
justify-content:space-evenly;}

	/*presentation article*/
.LAYOUT_MAIN_presentation{
max-width:1300px;
margin-top:80px;
margin-left:80px;
margin-right:80px;
display:grid;
column-gap:140px;}
.LAYOUT_text{/*on garde en display de base*/
text-align:left;
margin:70px 5%;}
.LAYOUT_textc{/*on garde en display de base*/
text-align:left;
padding:70px 5%;
margin-bottom:140px;
width:90%;
display:inline-block;
box-shadow:rgba(0,0,0,0.3)0 0 24px -10px;
background-color:var(--ciel);}

	/*footer*/
footer{
background-color:var(--rose);
display:inline-block;
width:100%;
padding:40px 0;}
.sousfooter{
padding:18px 0;
background-color:color(srgb 0.86 0.5727 0.5547);
font-weight:bold;
letter-spacing:1px;
font-size:19px;}

.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 - 560px);
display:flex;
column-gap:70px;}


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

	/*tableau 1\5*/
.gridTable{
display:grid;
gap:8%;
margin:140px 6% 140px 6%;
grid-template-columns:repeat(2,1fr);
justify-content:space-evenly;}
.sideTable{
margin-top:70px;
width:100%;
height:140px;
overflow-x:scroll;
box-shadow:rgba(0, 0, 0, 0.3) 5px 18px 12px -20px;}


.listElement{/*GARDE élément liste*/
background-color:#ffffffb8;
border-radius:20px;
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 0.08fr);
column-gap:10px;
transition:transform 0.15s ease;}
.listElement:hover{
transform:scale(0.99);
transition:transform 0.08s ease;}

.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(textile.png);
background-size:600px;
image-rendering:optimizeSpeed;}
.sideElementList{/*GARDE ruban rose en haut*/
display:flex;
width:90%;
height:65px;
flex-wrap:wrap;
flex-direction:column;
overflow-x:scroll;
overflow-y:hidden;
background-color:var(--sucre);
padding:15px 5%;
box-shadow:rgba(0,0,0,0.3)5px 18px 24px -20px;
gap:20px;
text-align:left;}

/*PANIER*/
.panier{
position:fixed;
text-align:left;
width:90%;
font-size:36px;
background-color:#ffffffb3;
right:-100%;
top:0;
padding:250px 5% 5% 5%;
overflow:scroll;
height:50%;
z-index:9;
transition:right 0.4s cubic-bezier(.65,.05,.36,1);
backdrop-filter:blur(7px);
border-bottom:rgba(0,0,0,0.05) 4px solid;
box-shadow:0 5px 30px -4px rgb(0 0 0 / 30%);}

/*CONNEXION*/
.connexion{
position:fixed;
text-align:left;
display:grid;
background-color:#ffffffb8;
width:100%;
top:-1100px;
padding:150px 5% 5% 5%;
z-index:9;
transition:top 0.4s cubic-bezier(.65,.05,.36,1);
backdrop-filter:blur(7px);
border-bottom:rgba(0,0,0,0.05) 4px solid;
box-shadow:0 5px 30px -4px rgb(0 0 0 / 30%);}



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

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

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

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

.lien{
font-size:25px;
line-height:1em;
text-decoration:none;
font-weight:normal;
font-family:coolvetica;
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:36px;
line-height:1.7em;
font-family:"helveticool";
color:var(--gris);}

a{
margin-inline-start:6px;
text-decoration:none;
font-size:36px;
font-weight:bold;
padding:12px;
margin:0;
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:74px;
margin-block-start:1em;
margin-block-end:1em;
margin-inline-start:0;
font-weight:bold;
letter-spacing:-1px;
text-wrap:nowrap;
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:36px;
padding:6px;
margin:0;
font-weight:bold;
font-family:"laviosa";
color:var(--gris);
}
h4{
outline-offset:2px;
outline:4px solid var(--gris);
padding:12px;
margin:0;
font-size:36px;
display:inline;}
h5{/*partie*/
margin-block-start:48px;
margin-block-end:36px;
margin-inline-start:6px;
font-size:48px;
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:bold;
font-size:24px;
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:36px;
line-height:1.6em;
font-family:"coolvetica";
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:10;
color:var(--gris);
background-color:#ffffffb8;
width:80%;
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:30px 30px;
font-size:36px;
text-wrap:wrap;
border-radius:50px;
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(240px);}
}

/*BOUTON BONBON*/
.btnHeart{
mask-image:url(../heart0.svg);
mask-size:cover;
z-index:4;
transform-origin:-40px 33px;
background-color:var(--bonbon);
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: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{
height:96px;
border-radius:50px;
vertical-align:baseline;
z-index:4;
background-color:var(--rose);
transition:all 0.3s ease;
font-size:36px;
font-weight:bold;
font-family:laviosa;
color:var(--gris);
margin:-5px 10px 0 0;
padding:0 20px;
appearance:none;
border:none;
outline:currentcolor;
box-shadow:0 3px 10px 0 rgba(233,166,190,0.55);}
.btnCapusule:hover{
transition:all 0s ease;
background-color:var(--bonbon);}
.btnCapusule:disabled{
background-color:var(--sucre);
color:#c3bbb8;
box-shadow:none;}

.BTN_txtunderlined{
height:42px;
-webkit-appearance:none;
border:none;
outline:none;
background-color:rgba(0,0,0,0);
font-size:36px;
font-weight:800;
color:var(--gris);
transition:all 0.3s linear 0s;
width:auto;
font-family:'laviosa';
margin-bottom:15px;
border-bottom-color:var(--gris);
border-bottom-width:4px;
border-bottom-style:solid;
padding:0;}
.BTN_txtunderlined:hover{
transition:all 0s ease;
color:var(--bonbon);
border-bottom-color: var(--bonbon);}

.imgPreview{
width:100%;
aspect-ratio:0.833;}
.imgArticle{
width:100%;
aspect-ratio:0.8333;
transform:scale(1);
transition:transform 0.15s ease;}
.imgArticle:hover{
transform:scale(0.95);
transition:transform 0.08s ease;}
.imgArticle.hoverForce{
transform:scale(0.95);}

.imgArticlePreview{
width:73px;
height:88px;
margin:0 15px 0 0;
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{
height:160px;
aspect-ratio:0.8333;
border-radius:12px;
grid-row:span 2;
image-rendering:pixelated;}

.btnMain{
-webkit-appearance:none;
outline:none;
background-color:var(--bonbon);
font-family:onelittlefont;
font-size:42px;
margin:30px 0;
border:none;
font-weight:bold;
height:130.285px;
width:320px;
transform:translate(0,0) rotate(0deg);
mask-size:cover;
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:48px;
vertical-align:-5px;
font-weight:bold;
color:var(--gris);
transition:all 0.3s linear 0s;
width:50px;}
.Boutonnum:hover:enabled{
outline:none;
color:var(--bonbon);
transition:all 0s linear 0s;}

ul{
position:absolute;
list-style:none;
display:none;
padding:2%;
margin:0;
background-color:#ffffffb8;
border-radius:50px;
width:86%;
font-size:36px;
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:50px;
padding:0 30px;
font-family:"laviosa";
text-align:left;
border:4px solid var(--sucre);
width:90%;
color:var(--gris);
background-color:var(--fond);
outline:white;
box-sizing:border-box;
font-size:36px;
box-shadow:inset 0 5px 5px -4px rgb(0 0 0 / 15%);
height:100px;
transition:all 0.1s linear 0s;}
input:focus{
border:4px solid var(--bonbon);
transition:all 0s linear 0s;}
input:autofill{
-webkit-box-shadow:0 0 0 1000px var(--fond) inset;
-moz-box-shadow:0 0 0 1000px var(--fond) inset;
box-shadow:0 0 0 1000px var(--fond) inset;
-webkit-transition:all 0.7s ease 0s;
-moz-transition:all 0.7s ease 0s;
-o-transition:all 0.7s ease 0s;
transition:all 0.7s ease 0s;
-webkit-text-fill-color:var(--gris) !important;}

/*TIMELINE*/
.timeline{
display:inline-block;
width:100%;
height:3px;
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;
padding:0;
padding-top:3px;}
.timeline:after{
display:inline-block;
content:"";
width:100%;}
.timeline li{
display:inline-block;
width:80px;
height:80px;
background-color:var(--ciel);
top:-40px;
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:36px;
position:absolute;
left:50%;
transform:translateX(-50%);
top:20px;}
.timeline li:nth-child:before{
top:6px;}
.timeline li:after{
pointer-events:none;
display:inline-block;
content:attr(data-text);
font-size:24px;
position:absolute;
left:50%;
top:90px;
transform:translateX(-50%);}