/*  ---------------------------------------------styles.css----------------------------------------------------- */
/*  ------------------------------------------------------------------------------------------------------------ */



* { padding: 0;  margin: 0;  box-sizing: border-box;}
body { width: 100vw;  overflow-x: hidden;  font-family: arial, sans-serif;  background-color: white;}



/*  -------------------------------------------------------------------------------------------------------- */
/*  -------------------------------------------Header------------------------------------------------------- */


.header { display: flex;  position: fixed;  width: 97vw;  height: 15vh;  padding: 15px 0;  grid-area: header;  justify-content: space-around;  background-color: rgb(240,240,239);  z-index: 1;}
.header .logoheader, .header .logoheader p { height: 100%;}
.header .logoheader p a { display: inline-block;  height: 100%;}
.header .logoheader img { height: 100%;  object-fit: contain;}
.header .menuheader { display: flex;  width: 150px;  height: 100%;  flex-flow: row wrap;  align-content: space-evenly;}
.header .menuheader .icon { height: 25%;  flex: 1 50%;  text-align: center;}
.header .menuheader .icon img { height: 100%;}


@media only screen and (max-width: 1350px) {
	.header { height: 22vh;   flex-direction: column;  justify-content: space-between;}
	.header .logoheader { width: 100%;  height: 72%;}
	.header .logoheader p { width: 100%; text-align: center;}
	.header .logoheader img { width: 100%;}
	.header .menuheader { width: 100%;  height: 18%;  flex-flow: row nowrap;}
	.header .menuheader .icon { height: 100%;}
}



/*  -------------------------------------------------------------------------------------------------------- */
/*  -------------------------------------------Main page---------------------------------------------------- */



#mainpage { width: 100vw;  min-height: 82vh;}
#mainpage input[name="radio"] { display: none;}

.container { position: absolute;  display: flex;  width: 194vw;  min-height: 100%;  overflow: hidden;  transition: left 1s ease;}
#boutique:not(:checked) + .container { left: -94vw;}
#boutique:checked + .container { left: 0%;}
.container label { width: 100%;  height: 100%;}

.boutique { width: 97vw;  height: auto;  background-color: rgb(240,240,239);}
.decouverte { width: 97vw;  height: auto;  background-color: rgb(168,220,171);}



/*  -------------------------------------------------------------------------------------------------------- */
/*  -------------------------------------------Boutique---------------------------------------------------- */


.boutique label[for="boutique"] { display: grid;  grid-template-columns: 1fr 3vw;  grid-template-rows: 15vh 1fr;  grid-template-areas: "header nav" "content nav";}


.boutique .nav { position: fixed;  top: 0;  width: 3vw;  height: 100vh;  grid-area: nav;  order: 2;  transition: left 1s ease;  z-index: 2;}
.boutique .nav p { width: 100%;  height: 100vh;  color: rgb(60,174,99);  writing-mode: vertical-rl;  text-orientation: upright;  font-family: Please, arial, sans-ms;  font-size: 2.2em;  font-weight: bold;  text-align: center;  line-height: 1.8;}
#boutique:not(:checked) + .container .boutique .nav { left: 0;}
#boutique:checked + .container .boutique .nav { left: 94vw;}


.boutique .content { grid-area: content;  order: 1;}


.boutique .content .promo { width: 100%;}
.boutique .content .promo .scroll-layout { display: grid;  padding-top: 15px;  grid-template-areas: "scroll scroll scroll" "left markers right";  grid-template-columns: 2vw 90vw 2vw;}
.boutique .content .promo .scroll-layout .carrousel { display: grid;  overflow-x: hidden;  scroll-snap-type: x;  overscroll-behavior-x: contain;  scroll-marker-group: after;  grid-area: scroll;  scroll-behavior: smooth;
	@media (prefers-reduced-motion: no-preference) { scroll-behavior: smooth;}
	@media (hover: none) { overflow-x: auto;}}
.boutique .content .promo .scroll-layout .carrousel::scroll-button(*) { position: relative;  top: -550%;  width: 90%;  margin: 5%;  aspect-ratio: 1;  align-self: center;  font-size: 1.3em;  color: rgb(255,255,255);  border-radius: 50%;  border: none;  background-color: rgb(20,20,20);  opacity: 0.7;}
.boutique .content .promo .scroll-layout .carrousel::scroll-button(*):focus-visible { outline-offset: 5px;}
.boutique .content .promo .scroll-layout .carrousel::scroll-button(*):not(:disabled):is(:hover, :active) { opacity: 1;  scale: 1.1;}
.boutique .content .promo .scroll-layout .carrousel::scroll-button(*):disabled { opacity: 0.25;  cursor: unset;}
.boutique .content .promo .scroll-layout .carrousel::scroll-button(left) { content: '\276E';  grid-area: left;}
.boutique .content .promo .scroll-layout .carrousel::scroll-button(right) { content: '\276F';  grid-area: right;}
.boutique .content .promo .scroll-layout .carrousel::scroll-marker-group { position: relative;  top: -100%;  display: grid;  padding: 10px;  grid: 20px / auto-flow 20px;  gap: 15px;  place-content: safe center;  scroll-padding: 15px;  grid-area: markers;  overflow: auto;  overscroll-behavior-x: contain;  scrollbar-width: none;  scroll-snap-type: x mandatory;
	@media (prefers-reduced-motion: no-preference) { scroll-behavior: smooth;}}
.boutique .content .promo .scroll-layout .carrousel ul { display: grid;  grid: 1fr / auto-flow 94vw;  gap: 20px;}
.boutique .content .promo .scroll-layout .carrousel ul li { display: inline-block;  list-style-type: none;  scroll-snap-align: start;  overflow-y: hidden;}
.boutique .content .promo .scroll-layout .carrousel ul li.intro { background: url('../images/boutique/promo1c.jpg') center / cover no-repeat;}
.boutique .content .promo .scroll-layout .carrousel ul li.intro span { display: block;  padding: 6% 26%;  font-family: Please, arial, sans-ms;  font-size: 1.4em;  font-weight: normal;  text-align: center;}
.boutique .content .promo .scroll-layout .carrousel ul li img { width: 100%;  height: -webkit-fill-available;}
.boutique .content .promo .scroll-layout .carrousel ul li::scroll-marker { content: " ";  border: 1px solid rgb(100,100,100);  border-radius: 50%;  outline-offset: 4px;  -webkit-tap-highlight-color: transparent;  scroll-snap-align: start;}
.boutique .content .promo .scroll-layout .carrousel ul li::scroll-marker:is(:hover, :focus-visible) { border-color: rgb(20,20,20);}
.boutique .content .promo .scroll-layout .carrousel ul li::scroll-marker:target-current { background: rgb(20,20,20);  border-color: rgb(20,20,20);}


.boutique .content .produits { width: 100%;  min-height: 1000px;}
.boutique .content .produits h1 { width: 100%;  padding: 0.80em;  color: rgb(0,0,0);  font-family: Please, arial, sans-ms;  font-size: 2.5em;  text-align: left;}
.boutique .content .flex { display: flex;  width: 100%;}
.boutique .content .flex.right { justify-content: flex-end;}
.boutique .content .flex.left { justify-content: flex-start;}
.boutique .content .flex .produit { display: flex;  margin: 2% 1%;  width: 66%;  background-color: rgb(252,252,252);  border: 2px solid rgb(50,50,50);}
.boutique .content .flex .produit .prod_image { width: 50%;}
.boutique .content .flex .produit .prod_image img { width: 100%;  height: 100%;}
.boutique .content .flex .produit .prod_desc { position: relative;  width: 50%;  overflow: hidden;}
.boutique .content .flex .produit .prod_desc::before { position: absolute;  display: block;  width: 100%;  height: 100%;  content: '';  clip-path: polygon(0 0, 100% 100%, 0 100%);}
.boutique .content .flex .produit .prod_desc.sk::before { background: url('../images/boutique/produits/sk_craft.jpg');}
.boutique .content .flex .produit .prod_desc.sa::before { background: url('../images/boutique/produits/sa_craft.jpg');}
.boutique .content .flex .produit .prod_desc.sb::before { background: url('../images/boutique/produits/sb_craft.jpg');}

.boutique .content .flex .produit .prod_desc h2 { width: 100%;  padding: 1%;  text-align: center;  background-color: rgb(240,240,240);  border-top: 1px solid rgb(118,106,75);  border-bottom: 1px solid rgb(118,106,75);  cursor: pointer;}
.boutique .content .flex .deco { display: flex;  margin-left: 10%;  width: 15%;  align-self: center;}
.boutique .content .flex .deco img { width: 100%;  height: fit-content;}



@media only screen and (max-width: 1350px) {
	.boutique .content .flex .produit { width: 85%;}
	.boutique .content .promo .scroll-layout .carrousel ul li.intro span { padding: 14% 5%;}
}



/*  -------------------------------------------------------------------------------------------------------- */
/*  -------------------------------------------Decouverte---------------------------------------------------- */



.decouverte label[for="decouverte"] { display: flex;}
.decouverte .header { background-color: rgb(168,220,171);}
.decouverte .header .logoheader img, .decouverte .header .menuheader .icon img { filter: invert(100%);}
.decouverte .nav { position: fixed;  top: 0;  width: 3vw;  height: 100vh;  order: 2;  transition: left 1s ease;  z-index: 2;}
.decouverte .nav p { width: 100%;  height: 100vh;  writing-mode: vertical-rl;  text-orientation: upright;  font-family: Please, arial, sans-ms;  font-size: 2.2em;  font-weight: bold;  text-align: center;  color: rgb(255,255,255);  line-height: 2;}
#boutique:not(:checked) + .container .decouverte .nav { left: 3vw;}
#boutique:checked + .container .decouverte .nav { left: 97vw;}


.decouverte .content { width: 92vw;}