@import url('https://fonts.googleapis.com/css2?family=Dancing+Script:wght@400..700&family=EB+Garamond:ital,wght@0,400..800;1,400..800&family=Merriweather:ital,wght@0,300;0,400;0,700;0,900;1,300;1,400;1,700;1,900&display=swap');

@keyframes color-change{
	0%{color:rgb(243, 228, 0);}
	8%{color:rgb(251, 197, 3);}
	16%{color:rgb(239, 141, 27);}
	25%{color:rgb(233, 97, 30);}
	33%{color:rgb(226, 34, 33);}
	41%{color:rgb(195, 1, 124);}
	50%{color:rgb(108, 56, 138);}
	58%{color:rgb(67, 77, 52);}
	66%{color:rgb(41, 112, 175);}
	75%{color:rgb(1, 149, 186);}
	83%{color:rgb(0, 141, 90);}
	91%{color:rgb(139, 186, 37);}
	100%{color:rgb(243, 228, 0);}
}


/** initialisation **/
*, *::before, *::after { margin : 0;	padding : 0; border : 0; margin-block-start: 0; margin-block-end: 0; margin-inline-start: 0; margin-inline-end: 0; unicode-bidi: isolate; text-align: justify; }

/** Classe global **/
.bg-red {background-image: url("../img/bkgd/bkgd-pink.jpg"); background-position: 0% 60%; }
.eb-family{font-family: "EB Garamont", serif; font-optical-sizing: auto; font-weight: 300; font-size: 0.7vw;}
.ds-family{font-family: "Dancing Script", cursive; font-optical-sizing: auto; font-weight: 700;}
.img-rw{max-height: 340px; max-width: 210px; height: 17.9vw; width:11vw; object-fit: cover; border-radius: 0.5vw;}
.img-rw-sign{max-height: 40px;height: 2vw;}
.img-min{max-height: 60px;height: 3vw;}
.img-cart{max-height: 300px;height: 15.7vw; max-width: 210px; width:11vw; object-fit: cover; border-radius: 0.5vw;}
.img-basic{max-height: 500px;height: 25vw; max-width: 600px; width:31.5vw; object-fit: cover; border-radius: 0.5vw;}
.img-full{max-height: 600px;height: 30vw;}
.slider-presentation{margin: 0.5vw auto; list-style: none;}
.list-guid{margin: 1vw auto; list-style: outside url('../img/logo/picto-dress.png');}
.divider {height: 3vw;}
.divider svg{margin: 0.1vw auto;}


/** Body **/
body.main { background-color : #FDEEFD;}

/** header, main, footer generale **/
header,footer { max-height: 200px;}

header{display: inline-flex; flex-direction: row; flex-wrap: nowrap; justify-content: space-between; max-width: 1900px; max-height: 200px; width: 100vw; height: 11vw;}
.header-col-1{ max-width: 160px; max-height: 160px; width: 10vw; height: 10vw; margin: 0.6vw; }
.header-col-2{ max-width : 950px; max-height : 150px; width : 50vw; height : 9vw; margin: auto 0; }
.header-col-3{ display: inline-flex; flex-direction: row; flex-wrap: nowrap; justify-content: space-between; align-content: space-around; max-height : 150px; width : 20vw; height : 9vw; margin: auto 0;}

/** Logo **/
.main-logo { max-width : 150px; max-height : 150px; width : 8vw; height : 8vw;}

/** Navigation **/
ul.main-nav-list { display: inline-flex; flex-direction: row; flex-wrap: nowrap; justify-content: space-between; gap: 3vw; list-style : none; }
li.main-nav-item { max-width : 220px; max-height : 130px; width : 7vw; height : 7.5vw; margin: auto; transition: box-shadow .3s }
li.main-nav-item:focus, li.main-nav-item:focus-visible, li.main-nav-item:focus-within, li.main-nav-item:hover {box-shadow: rgba(255, 90, 255, 0.5) 0 0 1em 0.25em;}
a.main-nav-link { color : #0d0221; text-decoration: none;}
.main-nav-container { display: flex; flex-direction: column; }
.main-nav-icon { margin: auto; }
.nav-logo { max-width : 75px; max-height : 75px; width : 4vw; height : 4vw; }
.main-nav-title { font-size : 1.3vw; margin: auto;}
.nav-title{text-align: center !important; }
/** Panier **/
.basket-content { margin: auto; }
.basket-link { color : #0d0221; text-decoration: none; }
.basket-container { display: flex; flex-direction: column; }
.basket-icon { margin : auto; }
.basket-logo { max-width : 75px; max-height : 75px; width : 4vw; height : 4vw; }
.basket-info { font-size : 1vw; margin: auto; }

/** Compte **/
.user-content { margin: auto; }
.user-link { display: flex; flex-direction: column; color : #0d0221; text-decoration: none; }
.user-exit-link { color : #0d0221; text-decoration: none; }
.user-container { display: flex; flex-direction: row; gap: 1vw; }
.user-tag { display: flex; flex-direction: column; margin: auto;}
.user-icon { margin : auto; }
.user-info { font-size : 0.9vw; margin: auto; }
.user-exit-icon { margin : auto 1vw; }
.user-logo { max-width : 75px; max-height : 75px; height : 4vw; }
.exit-logo { max-height : 135px; height : 7.2vw; }

/** main **/
.main-style { display: flex; flex-flow: column; }
/** presentation **/
#main-presentation { display: flex; gap: 3vw; margin: 2vw auto; flex-wrap: wrap; }
#presentation-text-box{ width: 32vw; margin: 0 auto; margin-top: 3.5vw; }
#presentation-title-box{ width: 42vw; font-family: "Dancing Script", cursive; font-weight: 700; font-style: bold; font-optical-sizing: auto; font-size: 1.75vw; height: min-content; position: absolute; background-color: #17E8688A; left: 40vw; padding: 0.5vw 5vw 0.5vw 2.5vw; border-radius: 2.5vw 0vw 0vw 2.5vw; text-align: justify; top: 11.5vw; }
.slider-presentation { display: flex; }
#presentation-descr-box{ width: 32vw; font-size: 1vw; font-style: italic; font-weight: 400; display: flex; flex-direction: column; }
.citation-box{ background-color:#e9a0e1a8; width: 30vw; margin: auto; padding: 1.5vw; border-radius: 10% 60% / 60% 40%; }
.citation{ display:block; margin: auto; }
.citation p.cite-1{ text-align: left !important; }
.citation p.cite-2{ text-align: center !important; }
.citation figcaption p{ text-align: right !important; }
blockquote p.cite-1::before {content: '\201C';}
blockquote p.cite-2::after {content: '\201D';}

/** Séparateur CTA **/
/*.see-coll-button-divider
.top-divider
.see-coll-button*/

/** Page d'acceuil - Collection aléatoire **/
#coll-mea {display: flex; flex-flow: row nowrap;justify-content:space-evenly; width:78.9vw; margin: 0.5vw auto;}

#coll-mea .short-collection {display: flex; flex-flow: column; justify-content: space-evenly; width:18.9vw;}
#coll-mea .short-collection .shcol-pht {margin: auto;}
#coll-mea .short-collection .shcol-ttl {margin: auto;padding: 0.4vw;font-size: 1.68vw;color:#488CA3}
#coll-mea .short-collection .shcol-dscpt{margin: auto;padding: 0.4vw;font-size: 0.9vw;}

/** Page d'acceuil - Commentaire aléatoire **/
#review-mea {display: flex; flex-flow: row nowrap;justify-content:space-evenly; width:78.9vw; margin: 0.5vw auto;}

#review-mea .short-review {display: flex; flex-flow: column;width: 25.3vw;}

#review-mea .short-review .shrw {display: flex; flex-flow: row nowrap;}
	#review-mea .short-review .shrw-pht {max-width: 210px; width: 11vw;}
	#review-mea .short-review .shrw-txt {display: flex; flex-flow: column; width: 14.3vw;}
		#review-mea .short-review .shrw-ttl {margin: 0 auto;padding: 0.4vw;font-size: 1.68vw;color:#488CA3; background:#17E868ee; border-radius: 50% 50% / 25% 25%; width:120%; position: relative; left: -25%;}
		#review-mea .short-review .shrw-dscpt{margin: 0.5vw auto;padding: 0.4vw;font-size: 0.9vw;}

#review-mea .short-review .shrw-sign {display: flex; flex-flow: row nowrap; background:#a6a6a6; width:80%;margin: 0vw 1vw; border-radius: 0.5vw;}
	#review-mea .short-review .shrw-sign-pht {margin: auto;}
	#review-mea .short-review .shrw-sign-txt {display: flex; flex-flow: column;justify-content:space-evenly;}
		#review-mea .short-review .shrw-sign-name {margin: auto;padding: 0.4vw;font-size: 1.68vw;color:#488CA3}
		#review-mea .short-review .shrw-sign-vdl {margin: auto;padding: 0.4vw;font-size: 0.9vw;}
	#review-mea .short-review .shrw-sign-vld-lg {margin: 0.1vw auto;}

/** Page d'acceuil - Footer **/
.footer-content { display: flex; flex-flow: column;}
.footer-nav { display:flex; flex-flow: row nowrap; margin: 0.5vw auto; justify-content: space-evenly; }
.fni { margin: auto 0.3vw; }
.fnol { margin: auto 1vw; }

/** Generic **/
.fbcc{display:flex;flex-direction:column;justify-content:center;}
.ctrd-blk{margin:auto;}

.animated-rainbow{
	animation: color-change 3s infinite linear;
}


/** ******************** Element de formulaire ******************** **/

/** -------------------- checkbox personnalisé -------------------- **/
.form-check {--brd:#ccc;--bg:#fff;--btn:#666;--ckd-brd:#ff67ff;--ckd-bg:#f7a0f7;--ckd-btn:#ff18ff;position: relative;font-size: 30px;}
.form-check input {position: absolute; opacity: 0;}

.form-check label {display:grid;grid-template-columns: 2em 1fr;grid-template-areas: "checkbox label";gap:0.7em;}
.form-check label::before, .form-check label::after {content:'';grid-area:checkbox;display:block;margin-top:.1em;}
.form-check label::before {width:100%;height:1em;border-radius: 1em;border: solid 1px var(--brd);transition: background-color .3s, border-color .3s, box-shadow .3s;}
.form-check label::after {position: relative;top:.1em;left:0.1em;width:0.85em;height:0.85em;border-radius:50%;background-color:var(--btn);transition: background-color .3s, transform .3s;}
.form-check input:checked + label::before {background-color:var(--ckd-bg);border-color: var(--ckd-brd);}
.form-check input:checked + label::after {background-color:var(--ckd-btn);transform: translateX(1em);}
.form-check input:focus + label::before {box-shadow: rgba(255, 90, 255, 0.5) 0 0 1em 0.25em;}