:root {
	
	
  /* //Palette de couleur Propre au projet; */

	--color_primary: #ffffff;
	--color_primary-dark: #4e413e; 
	--color_primary-light :#4e413e;
	 
	--color_secondary:#E4BBC1;
	/* --color_secondary: color(srgb 0.7139 0.5859 0.6035); */
	--color_secondary_dark: #faf1f2; 
	--color_secondary_light: #f3e1e3; 


	--spacer100 : 200px;

	--font_base:   "Wix Madefor Display", sans-serif;
	--font_heading: "Wix Madefor Display", sans-serif;
	--text_color : rgb(255, 255, 255);
	--accent_color:#efff8a; 
	--color-bg : #f5f4f3;

	/* --gap : 1em; */
	--gap: 1.45cqw;	
	--gap_small : calc( var(--gap) / 2 );
	--gap_md : calc( var(--gap) * 2 );
	--gap_lg : calc( var(--gap) * 4 );


	a:hover { text-decoration: none; 
	
	}


	--bouble-bordure-size : 0.25em;
  	--default_radius : 1.5rem;
	--font-size-base: clamp(10.56px, 1.12vw, 32px);
	/* --font-size-base: clamp(10.56px, 1cqw, 32px); */

}

body,
header,
main,
footer {
	min-width: calc(var(--min-width)/1);
  font-family: "Wix Madefor Display", sans-serif;
  font-optical-sizing: auto;
  font-weight: 400;
  font-style: normal;
	background-color: black;
	--text_color:white;
	color:var(--text_color);
}
footer {
	background-color: white;
	--text_color:black;
}

main { 
	position: relative;

	/* z-index: 100; */
}

/* Exemple permettant de changer une section
/* .ctx_fond-a {
  
  --bg_color: #1f0fd2;
  --text_color: white;
  --componement_color : #FFB800;
  --accent_color: #59f7f0;
  background-color : var(--bg_color);

  column-count: 4;
}
.ctx_fond-b {
  
  --bg_color: #ffe000;
  --text_color: rgb(74, 30, 0);
  --componement_color : #025a01;
  --accent_color: #019300;
  background-color : var(--bg_color);

} */
 


/*
Préfixe et usage

.el-     
Décris un élément HTML ou composant visuel distinct (ex. el-btn, el-card, el-image, el-blocsouspage)

.mod-
Appliquer une variation ou un style alternatif sur cet élément (ex. mod-large, mod-outline)

.ctx-
Créer un contexte qui influence ses enfants (ex. ctx-dark, ctx-form)

.is-
Représenter un État dynamique (ex. is-active, is-disabled, is-open...)

*/

#cover .logo { 
	width: 10cqw;
	
}
#cover ul.menu { 
	list-style: none;
	display: flex;
	gap:2em;
	text-transform: uppercase;
	align-items: center;
	padding-inline-start: 0px;
}
#cover ul.menu li:nth-child(1){
	flex: 1;
}

#cover video {
	position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
object-fit: cover;
opacity: 0.4;
}


.mod_full_page {
	min-height: 100vh;
	align-items: center;
	display: flex;
	flex-direction: column;
	padding: 10vh 0px;
	position: relative;
}
.container12 {
	align-items: center;
	flex-direction:row;
}
/* Barre navitagion et Redactor*/
body {
	font-weight: 300;
}
h1,h2,h3,h4 {
	font-weight: 800;
	text-transform: uppercase;
	line-height: 1em;
	color:var(--text_color);
}

h1 {
	text-transform:none;
}

.ctx_promo h1 {
	font-size: 1.5em;
	font-weight: 600;

}
.ctx_promo h1 strong {
	font-size: 2.6em;
	line-height: 1.15em;
	font-weight: 800;
	display:inline-block;
	margin-bottom: 0.5em;	
}

.mod_margin_left {
	padding-left: 18cqw;
}

.mod_bouton {
	margin-top: 1em;
	display: inline-block;
	padding: 0.1em 2em;
	border-radius: 100px;
	outline: 1px solid var(--text_color);
}
.mod_bouton.plein {
	background-color: var(--text_color);
	color:black;
}

form label {
	width: 100%;
	font-size: 0.75em;
	display: block;
	/* color:pink; */
}
form input, form textarea {
	border: none;
	background-color: transparent;
	outline: none;
	border-bottom:1px solid var(--text_color);
	width: 100%;
	font-size: 1.15em;
	font-weight: 100;
}
form input::autofill {
	background-color: none;
	color:inherit;
}
form button {

	display: block;
	background-color: var(--accent_color);
	padding: 1em 3em;
	border-radius: 5em;
	width: 100%;
	border: 1px solid var(--accent_color);
	cursor: pointer;
		color:black;
}
form button:hover{
	background-color: transparent;
	border-color: var(--text_color);
		color:var(--text_color);
}

form .error {
	color:var(--accent_color);
}
form .col_2 .grid { --span:4;}
form .grid { --span:8;}
footer {
	padding-top: 13em;
	font-size: 0.8em;
	--font-size-base:0.75rem;
	line-height: 2em;
	--accent_color:red;
	--text_color:rgb(35, 35, 35);
}
footer .container12 {
		border-top:1px solid black;
}
footer h3 {

	font-size:2.75em;
	font-weight: 800;
}

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

	:root {
			--font-size-base: clamp(10.56px, 3.5vw, 32px);
	}

	.mod_margin_left { 
		padding-left: 0px;
	}
	.no_mobil { display: none; }
	#cover .logo { width: 40vw;}
	.container12 {
	--col-count:2;
	}
	.pull_3 {
		padding-right:unset;
	}


}


@media print {
    /* styles here */

	
    * {
		color: black !important;
		background: none !important;
	  }

	.no-print { display: none; }
	header, footer { display: none; }
	main { margin:0px!important;}
}