: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; 


	--color1:#f7f5f2;
	--color2:#4e413e;
	--color3:#ef4123;
	--color4:#feefcc;


	--accent_color:var(--color3);

	--spacer100 : 200px;

	--font_base:   "Montserrat", sans-serif;
	--font_heading: "Playfair Display", serif;
	--text_color :var(--color2);
	--accent_color:#efff8a; 
	--color-bg : var(--color1);

	/* --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: #f7f5f2;
	--text_color:#4e413e;
	color:var(--text_color);
		--accent_color:var(--color3);
}
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...)

*/


.menu {
	display: flex;
	display: flex;
	gap:2em;
	text-transform: uppercase;
	align-items: center;
	padding-inline-start: 0px;	
	font-size: 0.75em;

}

.menu .logo { 
	width: 20cqw;
	
}

.menu > *:nth-child(1){
	flex:1;
}



.mod_full_page {
	
	align-items: center;
	display: flex;
	flex-direction: column;

	position: relative;
}
.container12 {
	align-items: center;
	flex-direction:row;
}
/* Barre navitagion et Redactor*/
body {
	font-weight: 300;
}
h1,h2,h3,h4 {
	font-weight: 800;

	line-height: 1em;
	--text_color:var(--color3);
	color:var(--text_color);
	margin: 1.2em 0;
	/* color:#ef4123; */
}



h1 {
	text-transform:none;
}

h2 {
	font-size: 1.25em;
	--text_color:var(--color2);
	line-height: 2.1em;
		font-family: var(--font_base);
	font-weight: 500;
}
h2 strong {
	font-family: var(--font_heading);
	font-size: 2em;
	--text_color:var(--color3);
	display: block;
	text-transform: none;
}

.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;
}

.mod_back_2 {
	background-color: var(--color2);
	/* --text_color:white; */
}
section {
	margin-top: var(--gap_lg);
	margin-bottom: var(--gap_lg);
}
.mod_back_white { 
	background-color: white;
	padding-top: var(--gap_lg);
	padding-bottom: var(--gap_lg);
	position: relative;
}
.mod_bodure_wave {
	position: relative;
}
.mod_bodure_wave.wave_top::before,
.mod_bodure_wave.wave_bottom::after {
  content: "";
  width: 100%;
  height: 3cqw;
  background-color: inherit;
  -webkit-mask-image: url('/assets/Wave1.svg');
  mask-image: url('/assets/Wave1.svg');
  -webkit-mask-repeat: repeat-x;
  mask-repeat: repeat-x;
  -webkit-mask-size: 100% auto;
  mask-size: 100% auto;
  position: absolute;
  top: -2.7cqw;
}

.mod_bodure_wave.wave_bottom::after {
	top:unset;
	bottom:-2.7cqw;
	transform: scaleY(-1);
}

.mod_square {
	aspect-ratio: 1/1;
	padding: var(--gap_md);
	border: 1px solid var(--color3);
	border-radius: var(--default_radius);
}


#admissibilite {
	background-color: var(--color4);
	position: relative;
}
#admissibilite p,
#admissibilite li {
	font-size: 0.8em;
}
#partenaires a {
	width: 10%;
}
#partenaires.container12 {

}

#partenaires .logos {
	display: flex;
		justify-content: space-around;
	gap:var(--gap);
	align-items:center;
	
}
#partenaires .logo_partenaire{


}

#partenaires .grid.mod_square {
	--width : 35cqw;
	/* width: 15cqw; */
	transform: scale(0.8);
}
#histoire .container12 {
	align-items:flex-start;
}
#histoire .grid_4 strong {
	font-family: var(--font_heading);
	color:var(--color3);
	display: block;
	font-size: 1.5em;
	font-weight: 900;
}


/*
form label {
	width: 100%;
	font-size: 0.75em;
	display: block;

}
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;}


*/

.form-grid {
display: block;
	--bs-primary: var(--color3);
}
.form-grid [role="group"] {
	display: grid;
		grid-template-columns : repeat(12, 1fr);
	gap:var(--gap);
}
.field, h3  { 
	margin-bottom: 0;
	grid-column: span 12;
}
.field[data-field-name="Responsable_email"],
.field[data-field-name="Responsable_telephone"] {
	grid-column:  span 6;
}


.field label, label {
	font-size: 0.9em;
	opacity: 0.9;
}

.form-row-button {
	margin-top: 2em;
}
.base.selected {--text_color:white;}


footer {

	font-size: 0.8em;
	--font-size-base:0.75rem;
	line-height: 1.75em;
	--accent_color:red;
	--text_color:rgb(137, 137, 137);
}
footer .logo {
	width: 75%;
}
footer .illustration { 
    margin-top: -8em;
}

footer h3 {

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

.col_2 {
	display: grid;
grid-template-columns: repeat(2, 1fr);
gap: var(--gap);
}

footer {
	line-height: 1.1em;
}
@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; }

	.container12 {
	--col-count:2;
	}
	.pull_3 {
		padding-right:unset;
	}
	.menu .logo {
		width: 50%;
	}
	footer .illustration { 
		width: 70%;
		display: block;
    	margin-left: auto;
	}
#partenaires .grid.mod_square {
		--width:100%;
	}
}


@media print {
    /* styles here */

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

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