@font-face {
	font-family: 'Raleway';
	src:
	url("../fonts/rl-wf.woff2") format("woff2"),
	url("../fonts/rl-wf.woff") format("woff"),
	url("../fonts/My-webfont.woff") format("woff"),
	url("../fonts/Quicksand-Light.otf") format("truetype");
	font-display: swap;
}

@font-face {
	font-family: 'QuickSand';
	src:
	url("../fonts/poppins-light-wf.woff2") format("woff2"),
	url("../fonts/poppins-light-wf.woff") format("woff"),
	url("../fonts/Quicksand-Light.otf") format("truetype");
	font-display: swap;
}

/* @font-face {
	font-family: 'Trajan';
	src:
	url("../fonts/TrajanPro-Regular.otf") format("opentype");
	font-display: swap;
} */

* {
  text-decoration: none;
  list-style: none;
  box-sizing: border-box;
  padding: 0;
  margin: 0;
  -ms-overflow-style: none;  /* IE and Edge */
  scrollbar-width: none;  /* Firefox */
}

*::-webkit-scrollbar {
  display: none;
	width: 0;
	height: 0;
}

html {
	--dotted-line-color: #CF9458;

	--clr-primary-1: #FFE6D6;
	--clr-primary-2: #583448;

	--clr-secondary-1: #FFD8D8;
	--clr-secondary-2: #9584ae;

	--clr-ternary-1: #483438;
	--clr-ternary-2: #FFFFFF;

	--clr-quaternary-1: #eea811;
	--clr-quaternary-2: #605080;

	--clr-titles: #B04080;

	--clr-error-success : #e4ffd6;
	--clr-error-error : #ffd6dd;

  height: auto;
	margin: 0 auto;
	background-color: var(--clr-ternary-2);
	width: 100%;
}

body {
    display: block;
    text-align: center;
    font-family: sans-serif;
    font-weight: 400;
    font-size: 1em;

		-webkit-hyphens: auto; /* c�sure propre */
    -moz-hyphens: auto; /* c�sure propre */
    hyphens: auto;
    word-wrap: break-word; /* passage � la ligne forc� */
    -webkit-overflow-scrolling: touch;
}

body.noscroll {
	overflow: hidden;
}

main {
	max-width: 1600px;
	width: 100%;
	margin: auto;
	transition: background-color 0.25s, color 0.25s;
	color: black;
}

@media (min-width: 1600px) {
	main {
		border-radius: 5px;
		padding: 10px 0;
	}

	header {
		border-top-left-radius: 6px;
		border-top-right-radius: 6px;
		overflow: hidden;
	}
	footer {
		border-bottom-left-radius: 6px;
		border-bottom-right-radius: 6px;
		overflow: hidden;
	}
}

.error {
	font-size: 1.5em;
	max-width: 1024px;
	width: 100%;
	margin: 25px auto 50px auto;
	font-weight: 600;
	line-height: 1.8em;
	font-family: sans-serif;
	background-color: var(--clr-primary-2);
	color: var(--clr-ternary-2);
	padding: 12px 25px;
	border-radius: 12px;
}


a {
  display: inline-block;
  color: inherit;
  transition: all .2s;
  font-weight: 500;
	cursor: pointer;
	outline: none;
}

a.voir {
	float: right;
  margin-top: 12px;
  border-radius: 6px;
  border: 1px solid var(--clr-primary-2);
  background-color: var(--clr-secondary-2);
  padding: 0.25em 1em;
  font-weight: 600;
  color: var(--txt-secondary-2);
}

#inner > a:focus img,
#inner > a:hover img {
opacity: 0.6;
}

#title {
  flex-basis: 100%;
  flex-grow: 1;
}

#inner p {
  padding: 2px 5px;
  font-weight: 400;
  text-transform:uppercase;
  color: var(--clr-titles);
  letter-spacing: 1px;
	font-family: 'Raleway', sans-serif;
	font-size: 1.1em;
  padding: 3px 5px;
}

#inner p.main {
	font-family: 'QuickSand', serif;
  font-size: min(2em, 10vw);
  font-variant: small-caps;
  text-transform:none;
	font-weight: 700;
	padding-bottom: 0;
	letter-spacing: 2px;
	line-height: 1.7rem;
}

#inner p.metier {
	color: var(--clr-quaternary-1);
	font-family: sans-serif;
	font-size: min(1rem, 5.3vw);
  font-weight: 600;
  padding: 0 5px 5px 5px;
}

#inner p.ville {
	display: inline-block;
  border-top: 1px solid var(--clr-titles);
	color: var(--clr-ternary-1);
	padding: 6px 1em;
	font-size: min(0.95rem, 5.2vw);
	line-height: 1.1rem;
	font-weight: 700;
}

.ville span {
	font-weight: 500;
	color: var(--clr-primary-2);
}

#hamburger {
	order: 999;
	flex-basis: 100%;
	position: fixed;
	top: 0;
	height: 0;
  width: 0;
  opacity: 0;
	appearance: none;
	-moz-appearance: none;
	-webkit-appearance: none;
	border: none;
}

#hamburger + label {
  position: relative;
  width: 32px; height: 32px;
  padding: 3px 2px;
	background-color: var(--clr-primary-1);
	border: 1px solid var(--clr-primary-2);
	border-radius: 5px;
	transition: all .2s ease 0s;
	cursor: pointer;
}

#hamburger + label span,
#hamburger + label::before,
#hamburger + label::after {
	left: 15%;
  position: absolute;
  height: 12%;
  width: 70%;
  transition: all .2s ease 0s;
	background-color: var(--clr-primary-2);
}

#hamburger + label span {top: 44%; }
#hamburger + label::before { content: ''; top: 6px }
#hamburger + label::after { content: ''; bottom: 6px }

#hamburger:checked + label {background-color: var(--clr-primary-2);}

#hamburger:checked + label:hover,
#hamburger:not(:checked) + label:hover span,
#hamburger:not(:checked) + label:hover::before,
#hamburger:not(:checked) + label:hover::after {opacity: 0.6}

#hamburger:checked + label span,
#hamburger:checked + label::before,
#hamburger:checked + label::after { background-color: var(--clr-primary-1) }

nav {
  font-size: 1.15em;
  width: 100%;
  justify-content: space-between;
  align-items: flex-end;
  flex-wrap: wrap;
  background-color: var(--clr-primary-2);
	display: none;
}

nav .out {display: none}

#hamburger-items {
  display: none;
  flex-grow: 0;
	overflow-x: hidden;
	background-color: var(--clr-primary-1);
  color: var(--clr-primary-2);
}

#hamburger-items li, #other-items li {
	width: 100%;
  font-variant: small-caps;
	transition: all .25s;
	outline: none;
	display: flex;
}

#hamburger-items li a {
	text-align: center;
	font-size: 1rem;
	line-height: 54px;
	width: 100%;
	letter-spacing: .5px;
	font-weight: 500;
}

#hamburger-items li:hover,
#hamburger-items li a:focus {
	background-color: var(--clr-primary-2);
	color: var(--clr-primary-1);
}

li.active a:before, li.active a:after {
	font-family: webdings;
	color: var(--clr-primary-2);
	position: relative;
	font-size: 1.18em;
}

li.active a:before {
    content: '\f034';
		left: -2px;
		top: 1px;
}

li.active a:after {
    content: '\f033';
		right: -2px;
		top: 2px;
}

li.active:hover a:before, li.active:hover a:after {
	color: var(--clr-primary-1);
}

#hamburger-items {
  flex-grow: 1;
  display: flex;
  justify-content: center;
}

#hamburger:checked ~ nav {
	display: flex;
	justify-content: center;
}

.closeBtn {
	color: var(--clr-ternary-2);
	font-family: 'Raleway', sans-serif;
	font-size: 0.9em;
	font-weight: 700;
	transform: scaleX(1.3);
	position: absolute;
	left: 21px; top: 8px;
	cursor: pointer;
	padding: 4px 6px;
	transition: .2s;
}

.closeBtn:hover {transform: scale(1.5,1.2)}

#panier-container {
  position: fixed;
  top: 48px;
  right: calc(0% - min(400px, 98%));
  width: min(400px, 98%);
  height: calc(100vh - 52px)!important;
  margin: 0 auto;
  opacity: 0;
  transition: .4s;
  z-index: 5002;
  background-color: var(--clr-ternary-2);
  border: 1px solid var(--clr-secondary-2);
  display: grid;
  grid-template-rows: 48px 1fr 48px;
  border-radius: 5px;
  overflow: hidden;
}

#panier-container.show {
  right: min(15px, 1%);
  opacity: 1;
}

#panier-container .out {
  font-family: 'QuickSand', sans-serif;
  background-color: var(--clr-quaternary-2);
  color: var(--clr-ternary-2);
  display: flex; justify-content: center; align-items: center;
  text-align: center;
  font-weight: 700;
  font-size: x-large;
  position: relative;
}

#panier-container .bas { display: flex; justify-content: space-between; align-items: center }

#panier-container .bas > * {
	height: 100%;
	flex-basis: 25%; flex-grow: 1;
	display: flex; align-items: center; justify-content: center;
}

#panier-container .bas #total {
	position: relative;
	font-size: 0.9rem;
	flex-wrap: wrap;
}

#panier-container .bas #checkout {
	font-size: 1.2rem;
	border-left: 1px solid var(--clr-primary-1);
	cursor: pointer;
	transition: .25s;
}

#panier-container .bas #checkout:hover,
#panier-container .bas #checkout:focus { background-color: var(--clr-secondary-2); }

#panier-container .bas #total span { padding: 0 10px; font-weight: 400; }

#panier-container .bas #total .ttl {
	font-family: sans-serif;
	font-size: 1rem;
	font-weight: 700;
	position: relative;
	top: 1px;
}

#panier-container .list { overflow-x: hidden; overflow-y: auto}

#panier-container .item {
  gap: 10px;
  padding: 8px 10px;
  display: flex;
  align-items: stretch;
  justify-content: space-between;
  border-bottom: 1px dotted var(--clr-secondary-2);
}

#panier-container .it { display: flex; justify-content: space-between;gap: 8px; flex-grow: 1}
#panier-container .d { display: flex; justify-content: space-between; gap: 8px; align-items: center}
#panier-container .d .qte { display: flex; justify-content: space-between; gap: 2px; align-items: center}

#panier-container img {height: 72px; width: 72px}

#panier-container .title {
    font-family: 'QuickSand', 'Raleway', sans-serif;
    letter-spacing: 0.1px;
    font-size: 0.9em;
    line-height: 1.4em;
    font-weight: 700;
    text-transform: capitalize;
    color: var(--clr-primary-2);
    display: flex; justify-content: center; align-items: center;
		flex-grow: 1;
}

.qte .txt {flex-grow: 1; text-align: right; padding-right: 10px}
.qte .m, .qte .p, .qte .quantite {
	display: flex; justify-content: center; align-items: center;
	border-radius: 50%;
	width: 28px; height: 28px;
	font-size: 1.5em;
	line-height: 0;
	font-family: sans-serif;
	font-weight: 500;
	border: 1px solid var(--clr-primary-2);
	background-color: var(--clr-quaternary-2);
	color: var(--clr-primary-1);
	cursor: pointer
}

.qte .quantite {
	background: none;
	color: inherit;
	border: none;
	font-size:1em;
	cursor:inherit
}

.qte .m:hover, .qte .p:hover { background-color: var(--clr-secondary-2) }

#panier-container .prix { font-size: 0.9em }
#panier-container .qte .quantite { width: 26px }
#panier-container .qte .m, #panier-container .qte .p {width: 26px; height: 26px }

#panier-container .item:nth-of-type(2n) {
  background-color: var(--clr-primary-1);
}


@media (min-width: 1024px) {
	#logo {display: inline-block}
  #title {
      flex-basis: auto;
      margin-top: 0;
			max-width: 500px;
  }

  #hamburger + label {display: none;}

	nav {right: -400px; transition: none;}
  #hamburger-items {
    order: 1;
    display: flex;
    flex-grow: 1;
		margin: 0 20px;
    justify-content: space-around;
  }

	#hamburger-items {
    border-top: 1px solid var(--clr-primary-2);
		border-bottom: 1px dotted var(--clr-quaternary-1);
  }

	#hamburger-items li a {
		padding-top: 1px;
		letter-spacing: 0;
		line-height: 32px;
	}

	#hamburger-items li.active a {color: var(--clr-primary-2);}
	li.active a::before, li.active a::after {color: var(--clr-ternary-1);}

	#hamburger-items li.active:hover a,
	li.active:hover a::before, li.active:hover a::after {color: var(--clr-primary-1);}
	#hamburger-items li.active a:focus,
	li.active a:focus::before, li.active a:focus::after {color: var(--clr-primary-1);}

	@media (min-width: 1600px) {
		#panier-container { top: 53px; height: calc(100vh - 62px) !important; }
		#panier-container.show {right: calc(((25px + 100%) - 1600px) / 2);}
	}
}

@media (max-width: 1023px) {
	nav {
		z-index: -1;
		font-size: 1.15em;
		position: fixed;
		width: min(98%, 400px);
		height: calc(100vh - 54px);
		right: -400px;
		top: 48px;
		background-color: var(--clr-primary-1);
		display: grid !important;
		grid-template-columns: 1fr;
		grid-template-rows: 48px 1fr;
		opacity:0;
		transition: .4s;
		border-radius: 5px;
    border: 1px solid var(--clr-quaternary-2);
    overflow: hidden;
	}

	#hamburger:checked ~ nav { z-index: 5003;opacity:1; right: 1%;}

	nav .out {
		font-family: 'QuickSand', sans-serif;
		background-color: var(--clr-quaternary-2);
		color: var(--clr-ternary-2);
		display: flex; justify-content: center; align-items: center;
		text-align: center;
		font-weight: 700;
		font-size: x-large;
		position: relative;
		height: 100%;
	}

	#hamburger-items
	{
		display: grid;
		grid-template-columns: 1fr;
		align-items: center;
		height: 100%;
		color: var(--clr-primary-2);
	}

	#hamburger-items li a { font-size: 0.9em; }

	@media (orientation:landscape) {
		nav {height: calc(100vh - 2%); top: 1%;width: min(calc(100% - 54px), 400px)}
		#hamburger:checked ~ nav { right: 48px; }
		#panier-container { height: calc(100vh - 2%)!important; top: 1%; width: min(calc(100% - 54px), 400px)}
    #panier-container.show { right: 48px; }
	}

	@media (max-width: 400px) {
		nav {	border-radius: 0px; border: none; right: -100vw;top: 0px;height: 100vh;width: 100vw}
		#hamburger:checked ~ nav { right: 0px }
		#panier-container {
      top: 0px; right: -100vw; width: 100vw; height: 100vh!important;
      border: none; border-radius: 0px;
    }
    #panier-container.show {right: 0px;}

		#panier-container .it { flex-direction: column;gap: 4px}
    @media (max-width: 299px) {
			#panier-container .title {font-size: 0.8em}
      #panier-container .d { flex-wrap: wrap;gap: 12px}
      #panier-container .item img {height: 48px; width: 48px}
      #panier-container .qte .m, #panier-container .qte .p {width: 22px;height: 22px}
      #panier-container .qte .quantite {width: 22px}
    }
	}
}


.titre_partie {
	color: var(--clr-secondary-2);
	font-weight: 600;
	font-size: 1.1em;
	/* flex-basis: 100%; */
	line-height: 1.75em;
	margin: 25px auto;
	font-family: 'QuickSand', sans-serif;
}

.titre_partie span {
	font-size: 0.80em;
	max-width: 600px;
	font-family: 'Raleway', serif;
}

@media (min-width: 768px) {
	.titre_partie span { font-size: 0.90em; }
}

footer {
	/* min-height: 50px; */
	background-color: var(--clr-primary-1);
  color: var(--clr-primary-2);
  padding: 2em 1em 0.5em;
  border-top: 1px solid var(--clr-quaternary-1);
  font-size: 1.1em;
  display: flex;
  flex-direction: column;
  justify-content: center;
  margin: 0;
}

footer .copyright, footer .rcs {margin-bottom: 20px;}
footer .copyright .other {display: block;}
footer .copyright .tiret {display: none;}

footer a {
	text-decoration: underline dotted var(--clr-secondary-2);
  text-underline-position: under;
  text-underline-offset: 1px;
}

footer a:hover,footer a:focus {opacity: 0.6;}

#content {
  font-family: 'Raleway', sans-serif;
	padding: 0;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	flex-wrap: wrap;
	min-height: 60vh;
	background-color: var(--clr-ternary-2);
}

#content h1#title {
	display: inline-block;
	margin: 1em auto;
	font-family: 'QuickSand', sans-serif;
	flex-basis: 100%;
	font-weight: 600;
	font-size: 2.5em;
	max-width: 500px;
}

h3 {
	font-size: 0.9em;
  font-weight: 600;
  font-family: 'QuickSand', sans-serif;
  color: var(--clr-titles);
	text-align: center;
	line-height: 2em;
}

.articles {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	margin: 0 auto 20px;
	gap: 5%;
	font-weight: 500;
	font-size: 0.975em;
	line-height: 2em;
	text-align: justify;
}

#content p {
	line-height: 1.6em;
}

section#produit {max-width: 100%;padding: 2em 5% 1em; display: grid}

.article {
  margin: 12px auto 50px;
	text-align: justify;
	width: min(350px, 100%);
	position: relative;
}

.article .titre {
	font-family: 'QuickSand', 'Raleway', sans-serif;
  letter-spacing: 0.3px;
  font-size: 1.2em;
  line-height: 1.4em;
  font-weight: 700;
  text-transform: capitalize;
	color: var(--clr-secondary-2);
  border-top-left-radius: 5px; border-top-right-radius: 5px;
	width: 100%;
	height: 54px;
	padding: 0;
	position: relative;
	/* left: 1px;
	top: 0px; */
	display: flex; justify-content: space-between; align-items: center; gap: 8px;
	text-align: left;
}

.article .image {
	border-radius: 5px;
	display: flex;
	overflow: hidden;
	border: 1px solid var(--clr-primary-2);
	margin-bottom: 5px;
	position: relative;
}

.article .image img {
	transition: .25s
}

.article .image:hover img {
	-webkit-transform: scale(1.2);
	-moz-transform: scale(1.2);
	-o-transform: scale(1.2);
	transform: scale(1.1);
	opacity: 0.6;
	transition: 4s;
}

.article .panierbtn {position: absolute; display: flex; justify-content: center; align-items: center;border-radius: 5px;width: 48px; height: 48px;font-size: 2em;line-height: 0;font-family: sans-serif;font-weight: 500; border: 1px solid var(--clr-primary-2);background-color: var(--clr-quaternary-2);color: var(--clr-primary-1); cursor: pointer; right: 20%; ; bottom: 5px; opacity: 0; transition: ease-out .2s .2s}
.article .image:hover .panierbtn {opacity: 1; right: 5px}
.article .panierbtn:hover {background-color: var(--clr-secondary-2)}
.article .panierbtn .quantite {display: none!important}

.prix {
	color: var(--clr-quaternary-1);
	font-family: sans-serif;
	font-weight: 700;
}

.article img {
	border-radius: 5px;
	height:100%;
	min-width:32px;
	min-height:32px;
	background:var(--clr-primary-1) url(../images/loader-img3.gif) center no-repeat;
	background-size:32px;
	max-width: 100%;
}

@media (max-width: 419px) {
	.article .titre {font-size: 1.1em}
	.article .prix {font-size: 1rem;position: relative;top: 1px}
	.article .panierbtn {width: 32px; height: 32px;opacity: 1;right: 5px}
	@media (max-width: 319px) {
		.article .prix {font-size: 1em;}
		@media (max-width: 299px) {
			.article .titre {height: 44px; font-size: 0.9em}
			.article .prix {font-size: 0.95em;}
		}
	}
}

@media (min-width: 600px) {
	footer .copyright .other {display: inline;}
	footer .copyright .tiret {display: inline-block;}

	@media (min-width: 768px) {
		@media (min-width: 900px) {
			footer { flex-direction: row; align-items: end; justify-content: space-evenly }
			footer .rcs {margin-bottom: 0;}

			.article .titre {padding: 1em}

			@media (min-width: 1200px) {
				.articles {max-width: 100%;}

				@media (min-width: 1600px) {
				}
			}
		}
	}
}