/* RESET */

html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video { margin: 0; padding: 0; border: 0; font-size: 100%; font: inherit; vertical-align: baseline; list-style: none; text-decoration: none;}

/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section { display: block; }


* {box-sizing: border-box;}

 :root {
	--m: 2rem;
	--fs-xxxl : 2.5rem;
	--fs-xxl : 1.8rem;
	--fs-xl : 1.2rem;
	--fs-m : 15px;
	--fs-s : 0.85rem;
	--fs-xs : 0.75rem;
	--fs-xxs : 0.65rem;

	--content : 80%;
	--max-content: 1100px;
	
	--c-primary : #FFFFFF;
	--c-primary-2 : #484141;
	--c-secondary : #FFCABA;
	--c-secondary-2 : #FF9D80;
	--c-subtle-dark :#6F6464;
	--c-subtle-light :#D5C7C7;
	
	--bg-dark : #484141;
	--bg-ultradark : #221F1F;
	--bg-light : #ffffff;
	
 }

img {
	width: 100%;
}

html {
	font-size: var(--fs-m);
	line-height: 1.5rem;
	font-family: "Montserrat", sans-serif;
	font-weight: 300;
	font-style: normal;
	color: var(--c-primary);
	scroll-behavior: smooth;
	scroll-padding-top : 0px;
	background-color: var(--bg-ultradark);
}

.desktophide {
display: none;
}


section, footer, header {
  
  width: 100%;
  position: relative;
  padding: calc(var(--m)*2) 0;
}

section .content, nav .content, header .content, footer .content {  
  width: var(--content);
  max-width: var(--max-content);
  margin: 0 auto;
  display: flex;
  flex-wrap: wrap;
  gap: var(--m);
  justify-content: space-between;
  z-index: 1;
  position: relative;

}



nav {
	display: flex;
	justify-content: center;
	position: sticky;
	background-color: rgba(0, 0, 0, 0.5);
	backdrop-filter: blur(10px);
	top: 0;
	z-index: 2;
}

nav ul {
	display: flex;
	padding: 10px;
	align-items: center;
	gap: 1rem;
}

nav ul img {
	width: 35px;
}



nav li a {
	display: inline-block;
	padding: 4px 6px;
	font-weight: 700;
	color: white;
	transition: all ease-in-out 200ms;
	font-size: 0.8rem;
}

nav li a:hover {
	color: var(--c-secondary);
}


header{ 	background-image: url(media/bg_3.jpg); 
	background-repeat: no-repeat;
	background-size: cover;
	background-position: center center;
	padding: calc(var(--m)*4) 0;

}

header .content{
	min-height: 50vh;
	flex-direction: column;
	justify-content: space-between;
	text-align: center;

}

header .content div {
	width: 100%;
	display: flex;
	flex-direction: column;
	align-items: center;
}

header img {
	width: 70%;
	max-width: 400px;
}

.flexvertical {
	
	flex-direction: column;
	align-items: center;
}

.col-left, .col-right, .col-full {
  flex: 1 1;
  align-items: flex-start;
  min-width: 350px;
}

.col-left {
  display: flex;
  flex-direction: column;
}

.col-full {
	min-width: 100%;
}


.bg--dark {
	background-color: var(--bg-dark);
}

.bg--ultradark {
	background-color: var(--bg-ultradark);
}

.bg--light {
	background-color: var(--bg-light);
	color: var(--c-primary-2);
}



hr {
	border: none;
	background-color: transparent;
	border-bottom: 1px solid var(--c-subtle-light);
	margin: 2rem 0;
	
}


h1 {
	
	font-size: 3rem;
	color: white;
	font-weight: 200;
	width: 80%;
	max-width: 800px;
	line-height: 100%;
}

h1 strong {
	text-transform: uppercase;
	font-size: 1rem;
	font-weight: 700;
	letter-spacing: 5px;
}


h2 {
	color: var(--c-secondary);
	font-family: "Times New Roman", serif;
	font-size: 2.5rem;
	line-height: 110%;
	text-transform: uppercase;
	margin-bottom: 2rem;
}

h2 em {
	color: var(--c-primary);
}


.bg--light h2 em {
	color: var(--c-primary-2);
}


h3 {
	text-transform: uppercase;
	font-weight: 700;
	margin-bottom: 1.5rem;
}


a.cta {
	display: inline-block;
	background-color: var(--c-secondary);
	font-weight: 700;
	color: var(--c-primary-2);
	padding: 10px 25px;
	text-align: center;
	border-radius: 50px;
	margin-top: 2rem;
	text-transform: uppercase;
	transition: all ease-in-out 300ms;	
}

a.cta:hover {
	background-color: var(--bg-light);
}

p a, ul.simple a {
	color: var(--c-secondary-2);
}

p a:hover, ul.simple a:hover {
	text-decoration: underline;
}


p {
	margin-bottom: 1.5rem;
}



p.pretitle {
	color: var(--c-subtle-dark);
	text-transform: uppercase;
	margin: 0;
	line-height: 250%;
	font-size: 0.85rem;
	letter-spacing: 2px;
	font-weight: 500;
}

.bg--light p.pretitle {
	color: var(--c-subtle-light);
}


p.prix {
	color: var(--c-secondary-2);
}
p.prix strong {
	font-weight: 700;
}

p.intro {
	font-weight: 500;
}


ul.simple {
	color: var(--c-subtle-light);	
}

ul.simple li {
	margin-bottom: 0.75rem;
	padding: 0;
	border-radius: 0;
}

ul.simple li strong {
	font-weight: 500;
	
}


.bio {
	align-items: center;
}

.bio .col-right {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 1.5rem;
}

.bio .col-right img {
max-width: 120px;
border-radius: 200px;
border: 4px solid rgb(241, 237, 234);
}

.bio .col-right q {
	width: 100%;
	text-align: center;
	color: rebeccapurple;
	font-size: 1.25rem;
	width: 80%;
	color: #b3a0a0;
	line-height: 140%;
}

.bio .col-right p {
	color: var(--c-subtle-light);
}


.pack {
	display: flex;
	gap: 1rem;
	flex-wrap: wrap;
}

.pack > li {
	flex : 1 1;
	border-radius: 30px;
	padding: 30px;
	min-width: 280px;
	position: relative;
}

.pack > li:before {
	position: absolute;
	top :0;
	right: 30px;
	height: 55px;
	width: 25px;
	border-radius: 0 0 7px 7px;
	background-color: var(--c-secondary);
	content: "";
}

.pack li:nth-child(2):before {
	background-color: var(--c-secondary-2);
}

.pack li:nth-child(3):before {
	background-color: var(--c-subtle-dark);
}

.pack p.pretitle {
	line-height: 130%;
	letter-spacing: 0;
}

.pack ul.simple {
	color: var(--c-primary-2);
	margin-top: 1rem;
}

.pack ul.simple li {
margin-bottom: 0.5rem;
line-height: 130%;
}

#kobido .simple {
	max-width: 400px; 
	
}

#kobido .content:first-child {
	align-items: center;
	padding-bottom: 3rem;
}

.demo {
width: 100%;
max-width: 450px;
border-radius: 30px;
}

#contact .col-right img {
	max-width: 100px;
	margin-top :20px;
	margin-bottom: 50px;
}



footer .content {
	flex-direction: row;
}

footer .content img  {
	max-width: 150px;
}

footer .content ul {
	display: flex;
	gap: 1rem;	
}

footer .content ul a {
	color: var(--c-secondary);
	text-transform: uppercase;
	font-size: 0.75rem;
	transition: all ease-in-out 200ms;
}

footer .content ul a:hover {
	color: var(--bg-light);
}

.egue {
	display: flex;
	background-color: rgb(19, 18, 18);
	padding: 1.5rem 0;
}

.egue p {
	margin: 0;
	color: var(--c-subtle-dark);
}


@media only screen and (max-width: 1000px) {

 :root { 
	 --fs-m : 14px; 
	 --content : 85%;
 }

 .col-left, .col-right, .col-half { min-width: 100%; }

h1 { font-size: 2rem;  width: 90%; max-width: 90%;
	line-height: 120%;
}
h2 { font-size: 2rem; }

.pack { gap: 2rem; }
.pack li { border-radius: 20px; padding: 40px;}

header{
	padding: calc(var(--m)*1.5) 0;

}

footer .content, footer .content ul {
	flex-direction: column;
}

.mobilehide {
	display: none;
}

}