:root
{
	--main-background-color: #F5F4EB;
	--top-background-color: #E0DDCF;
	--bottom-background-color: #ECEADD;
	
	--almost-black:#151515;
	--dark-gray:rgb(49,49,49);
	--medium-gray:rgb(128,126,120);
	--light-gray:#E1E0D8;
	--border-color:#CFCEC7;
	
	--bright-ivory:#fffff3;
	--bright-ivory-slightly-transparent:rgba(255,255,243,0.9);
	
	--green-2:#366e56;
	
	--spacing:0.25rem;
	
	--text-xs:0.70rem;
}

@font-face {
	font-family: "nevo";
	src:
		url("../fonts/Nevo/Nevo-Regular.woff2") format("woff2"),
		url("../fonts/Nevo/Nevo-Regular.woff") format("woff");
	font-display: swap;
}
/*
@font-face {
	font-family: "instruments";
	src:url("../fonts/Instrument_Serif/InstrumentSerif-Regular.ttf");
}
*/
@font-face {
  font-family:"instruments";
  src:url(../fonts/Instrument_Serif/InstrumentSerif-Regular.woff2)format("woff2");
  font-weight:400;
  font-style:normal;
  font-display:block;
}
@font-face {
  font-family:"instruments";
  src:url(../fonts/Instrument_Serif/InstrumentSerif-Italic.woff2)format("woff2");
  font-weight:400;
  font-style:italic;
  font-display:block;
}
@font-face {
  font-family:"geist";
  src:url(../fonts/Geist/static/Geist-Regular.ttf);
  font-weight:400;
  font-style:normal;
  font-display:block;
}
@font-face {
  font-family:"mono";
  src:url(../fonts/Geist_Mono/static/GeistMono-Regular.ttf);
  font-weight:400;
  font-style:normal;
  font-display:block;
}


body {
	background-color:var(--main-background-color);
	margin:0;
	padding:0;
}


/**********/
/* HEADER */
/**********/
.top {
	background-color:var(--top-background-color);
	padding-inline: calc(var(--spacing)*12.5);
	padding-block-start: calc(var(--spacing)*3);
	padding-block-end: calc(var(--spacing)*4);
	position: relative;
	width: 100%;
	box-sizing: border-box;
}

.top a {
	text-decoration:none;
	position:absolute;
	left: 3rem;
	top: 50%;
	transform: translateY(-50%);
}

.top .flag {
	width: calc(var(--spacing)*6);
	height: calc(var(--spacing)*4);
}

.top .top-content {
	display:inline-block;
	text-align:center;
	font-size:var(--text-xs);
	font-family:'nevo';
	letter-spacing:1px;
	display:block;
}

.top .top-content button {
	font-size:var(--text-xs);
	font-family:'nevo';
	letter-spacing:1px;
	border: solid var(--medium-gray) 1px;
	padding: 0.375rem 1rem;
}

/**************/
/* NAVIGATION */
/**************/
nav {
	padding-top: calc(var(--spacing)*6);
	padding-bottom: calc(var(--spacing)*6);
	padding-inline: calc(var(--spacing)*12.5);
}

nav .nav_left {
	font-family:'instruments';
	background-color:var(--light-gray);
	display: inline-block;
	border: solid 1px var(--border-color);
	padding: 0.25rem 1rem;
	border-radius: 20.5px;
}

nav .nav_left a {
	cursor:pointer;
	text-decoration:none;
}

nav .nav_left span {
	padding-block: calc(var(--spacing)*1);
	color:var(--dark-gray);
	font-size:1.5rem;
}

/**********/
/* FOOTER */
/**********/
footer {
	text-transform: uppercase;
	letter-spacing:-0.025rem;
	font-weight:800;
	max-width: 1224px;
	margin: auto;
}

footer p {
	margin-top: 2rem;
	margin-bottom: 2rem;
}

footer a {
	color: var(--dark-gray) !important;
	font-family:"geist";
	max-width:1224px;
}

footer .eagle {
	padding: 6rem;
	min-width: calc(var(--spacing)*100);
	min-height: calc(var(--spacing)*100);
	background-image: url("../images/common/gold-eagle.webp");
	background-repeat: no-repeat;
	background-position: center;
	background-size: contain;
	background-origin: content-box;
	border-bottom:solid 1px var(--dark-gray);
}

footer .footer_bottom {
	text-align: center;
}

footer .footer_end {
	padding-bottom:2rem;
}

footer .footer_end a {
	margin-left:1.25rem;
	margin-right:1.25rem;
}


/***********/
/* BOUTONS */
/***********/
button {
	background-color:transparent;
	transition: background-color 0.2s;
}

button:hover {
	background-color:rgba(0,0,0,0.08);
	cursor:pointer;
}



/**********/
/* INPUTS */
/**********/
input {
	background-color:transparent;
	font-family:"geist";
}

input[type="email"], input[type="text"] {
	background-color:var(--almost-black);
	border:none;
	height:54px;
	border-radius: 27px;
	color:white;
	font-size: 15px;
	padding-inline: calc(var(--spacing)* 5);
}

select {
	font-family:"geist";
	background-color: var(--almost-black);
	color:white;
	height:54px;
	border-radius: 1.5rem;
	padding: 0 1.25rem;
}

textarea {
	font-family:"geist";
	background-color: var(--almost-black);
	color:white;
	border-radius: 1.5rem;
	padding:1.5rem;
	width:100%;
	height:20rem;
}


/*********/
/* POPUP */
/*********/
.popup {
	display:none;
	position:fixed;
	left:0;
	top:0;
	width:100vw;
	height:100vh;
	backdrop-filter: blur(8px);
	background-color: rgba(0,0,0,0.25);
}

.popup .inside_popup_main {
	padding: calc(var(--spacing)*10);
	max-width: calc(var(--spacing)*115);
	backdrop-filter: blur(8px);
	margin: 8rem auto;
	background-color: rgba(0, 0, 0, 0.5);
	border-radius: 1rem;
}

.popup .inside_popup_main h2 {
	color:var(--bright-ivory);
	font-family:"instruments";
	font-size: 220%;
	margin-top: 0;
	padding: 0rem 0rem 2rem;
}
.popup .inside_popup_main p {
	color: color-mix(in oklab,var(--bright-ivory)50%,transparent);
	font-family:"nevo";
	font-size: 120%;
	padding-bottom:2rem;
}

.popup input[type="email"].sign_up {
	width:100%;
	box-sizing: border-box;
}

.popup button.sign_up {
	position:absolute;
	top:5px;
	right:5px;
	height:44px;
	border-radius:22px;
	border: none;
	background-color: var(--bright-ivory);
	width: 100px;
	font-weight: bold;
	font-size: 90%;
}

.popup button.sign_up:hover {
	background-color: var(--bright-ivory-slightly-transparent);
}


/***********/
/* GÉNÉRAL */
/***********/
h1 {
	font-family:'instruments';
	font-size: clamp(100px,10vw,168px);
	text-align: center;
	font-weight: 100;
	line-height: clamp(100px,10vw,168px);
	color:var(--dark-gray);
	width: fit-content;
	margin: 2rem auto 0;
	position:relative;
}

h2 {
	font-family:'instruments';
	color:var(--dark-gray);
	font-size: 86px;
	text-align: center;
	width: 100%;
	font-weight: 100;
	max-width: calc(var(--spacing)*315);
	margin: auto;
	padding-top: 6rem;
	padding-bottom: 6rem;
	letter-spacing: -0.1175rem;
	line-height:1.08;
}

h3 {
	font-family:'instruments';
	color:var(--dark-gray);
	font-size: 2.5rem;
}

p {
	font-family:"geist";
	margin:auto;
	text-align:center;
	color:var(--dark-gray);
}

.grid8 {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(calc(100% / 8), 1fr));
	margin: 0;
	padding: 0;
}

b {
	color:var(--green-2);
}

.pointer {
	cursor:pointer;
}

/***********/
/* ACCUEIL */
/***********/
.obey > a {
	position:relative;
	text-align: center;
}

.obey img.obey_portrait {
	max-width:10rem;
}
.obey img.obey_logo {
	max-width:5rem;
	max-height:4rem;
	position:absolute;
	bottom:0;
	left:0;
}

h2.abstract {
	position:relative;
	background-image: url("../images/accueil/trump.webp");
	background-repeat: no-repeat;
	background-position: center;
	background-size: auto 100%;
}
h2.abstract img {
	position:absolute;
	top:0;
	left:50%;
	transform:translateX(-50%);
	height:60rem;
}

.proof {
	width:50%;
}

.products_list {
	background: linear-gradient(
		to bottom,
		#E0DDCF 0%,
		#F5F4EB 100%
	);
}

.products_list_table {
	border-collapse: collapse;
	max-width:1260px;
	margin:auto;
}

.products_list_table th, .products_list_table td {
	border-bottom: solid 1px var(--border-color);
}

.products_list_table th {
	font-family:"mono";
	color:var(--dark-gray);
	font-weight:100;
	text-align:left;
	padding-left: 5rem;
}

.products_list_table img {
	width:400px;
}


/****************************/
/* PRIVACY POLICY / CONTACT */
/****************************/
.pricavy_policy {
	color:var(--dark-gray);
	max-width:48rem;
	padding-block: calc(var(--spacing)*20);
}
nav:has(+ .page .pricavy_policy) {
	background-color:var(--bright-ivory);
}

div:has(.pricavy_policy) {
	background-color:var(--bright-ivory);
}

.pricavy_policy {
	max-width:48rem;
	margin:auto;
}
.pricavy_policy h1 {
	font-size:3rem;
	text-align:left;
	width: 100%;
	line-height: initial;
	margin-top: 0;
}

.pricavy_policy p {
	text-align:left;
	padding-top: 1rem;
	padding-bottom: 1rem;
}

.pricavy_policy input[type="email"], .pricavy_policy input[type="text"] {
	width:100%;
	box-sizing: border-box;
	max-width: 25rem;
	display: block;
	margin-top: 1rem;
	margin-bottom: 1rem;
}

.pricavy_policy button.send_button {
	border-radius:22px;
	border: none;
	background-color: var(--dark-gray);
	font-weight: bold;
	font-size: 90%;
	padding: 1rem 2rem;
	margin-top: 1rem;
	margin-bottom: 1rem;
	color:white;
}

.pricavy_policy button.send_button:hover {
	background-color: var(--medium-gray);
}


/***********/
/* PRODUCT */
/***********/
.product .product_presentation {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(calc(100% / 2), 1fr));
	margin:0;
	padding:0;
}

.product h1 {
	font-size: 72px;
	margin-top:0;
	line-height: 100px;
}

.product .product_presentation_abstract {
	padding: 0 2rem;
}

.product .prix {
	font-family:'instruments';
	color:var(--green-2);
	font-size: 3rem;
	text-align:center;
	margin-bottom: 2rem;
}

.product p {
	text-align:justify;
	max-width: 40rem;
	line-height: 1.5rem;
	margin-top: 2rem;
}

.product_presentation_visuel img {
	width:100%;
}

.product_page_content {
	margin:auto;
	max-width:1200px;
	padding:1rem 2rem;
}



/***************************/
/* DIFFÉRENTES RÉSOLUTIONS */
/***************************/

/* max-width: 1200px */
@media only screen and ( max-width: 1200px ) {
	.products_list_table h3 {
		font-size:2rem;
	}
}


/* max-width: 1024px */
@media only screen and ( max-width: 1024px ) {
	.top .top-content {
		position:relative;
	}
	.grid8 {
		grid-template-columns: repeat(auto-fit, minmax(calc(100% / 4), 1fr));
	}

	textarea {
		max-width: 500px;
	}
	.product .product_presentation {
		grid-template-columns: repeat(auto-fit, minmax(calc(100% / 1), 1fr));
	}
	
	.proof {
		width:100%;
	}
	.products_list_table h3 {
		font-size:1.5rem;
	}
	.products_list_table img {
		width:300px;
	}
}

@media only screen and ( max-width: 800px ) {
	.proof h2 {
		font-size:48px;
	}
	.products_list_table img {
		width:250px;
	}
	.top .top-content {
		text-align:right;
		padding-right: 4rem;
		padding-left: 2rem;
	}
}

@media only screen and ( max-width: 600px ) {
	h1 {
		font-size: clamp(80px,8vw,135px);
	}
	h2 {
		font-size: 68px;
		line-height:1.04;
		padding-top: 3rem;
		padding-bottom: 3rem;
	}
	.grid8 {
		grid-template-columns: repeat(auto-fit, minmax(calc(100% / 3), 1fr));
	}
	footer .eagle {
		min-width: calc(var(--spacing)*80);
		min-height: calc(var(--spacing)*80);
		padding: 2rem;
	}
	
	.popup .inside_popup_main {
		margin-top:0;
	}
	textarea {
		max-width: 360px;
	}
	.products_list_table img {
		width:200px;
	}
	.products_list_table h3 {
		font-size: 1rem;
	}
}

@media only screen and ( max-width: 500px ) {
	.products_list_table img {
		width:150px;
	}
}

@media only screen and ( max-width: 420px ) {
	.grid8 {
		grid-template-columns: repeat(auto-fit, minmax(calc(100% / 2), 1fr));
	}
	h1 {
		font-size: clamp(60px,6vw,100px);
	}
	h2 {
		font-size: 52px;
	}
	footer .eagle {
		min-width: calc(var(--spacing)*60);
		min-height: calc(var(--spacing)*60);
		padding: 1rem;
	}
	input, select, textarea {
		max-width:300px;
	}
}