@font-face { font-family: 'Ubuntu'; src: url('/assets/fonts/Ubuntu-Regular.ttf') format('truetype'); font-weight: 400; font-style: normal; font-display: swap;}
@font-face { font-family: 'Ubuntu'; src: url('/assets/fonts/Ubuntu-Medium.ttf') format('truetype');  font-weight: 500; font-style: normal; font-display: swap;}
@font-face { font-family: 'Ubuntu'; src: url('/assets/fonts/Ubuntu-Bold.ttf') format('truetype');    font-weight: 700; font-style: normal; font-display: swap;}

:root { --creme: #E7E0C5; --bleu: #00FFFF; --vert: #252D25;	--jaune: #C88E37; }
.jaune 	{ color: var(--jaune); }
.bleu 	{ color: var(--bleu);  }
.vert 	{ color: var(--vert);  }


body 			{ font-family: "din-2014", sans-serif!important; background-color: var(--creme); color: #212529; }
h1, h2, h3, h4 	{ font-weight: 700; }
strong 			{ font-weight: 700; }
button, a 		{ transition-duration:0.3s; }


/* ==== ACCESSIBILITE ==== ACCESSIBILITE ==== ACCESSIBILITE ==== ACCESSIBILITE ==== ACCESSIBILITE ==== ACCESSIBILITE ===== ACCESSIBILITE ==== */
:focus { outline: none; }
:focus-visible { outline: 3px solid var(--vert)!important; outline-offset: 4px; }
#separator .cta:focus-visible { outline: 2px solid #fff!important; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }


/* ====== NAV ===== NAV ===== NAV ===== NAV ===== NAV ===== NAV ===== NAV ===== NAV ===== NAV ===== NAV ===== NAV ===== NAV ===== NAV ===== NAV ===== NAV ===== NAV ===== */
nav.navbar 					{ width:100%; }
.navbar-container 			{ background-color:#fff; width: 100%; }
.logo-container				{ z-index:99; display:block; position:absolute; width:100%; top: 25px; max-width:180px; left:50%;  transform:translateX(-50%);  }


/* ====== PAGES ===== PAGES ===== PAGES ===== PAGES ===== PAGES ===== PAGES ===== PAGES ===== PAGES ===== PAGES ===== PAGES ===== PAGES ===== PAGES ===== PAGES ========== */
.page h1 		{ font-weight:700; font-size:2.2rem; padding-bottom:1.2rem; padding-top:90px; text-align:center; }
.page h2 		{ font-weight:700; font-size:1.7rem; padding-bottom:0.3rem; padding-top:1.2rem; }
.page 			{ padding-bottom:7rem; padding-top:5rem; }
.page a			{ color:var(--jaune); }
.page a:hover	{ color:var(--vert); }
.error404 a			{ background-color:transparent; color:var(--jaune); font-size:1.30rem; padding: 8px 35px; border-radius:5px; border: solid 1px var(--jaune); font-weight:700; }
.error404 a:hover 	{ background-color:var(--jaune); color:var(--vert);}


/* ====== HOMEPAGE ===== HOMEPAGE ===== HOMEPAGE ===== HOMEPAGE ===== HOMEPAGE ===== HOMEPAGE ===== HOMEPAGE ===== HOMEPAGE ===== HOMEPAGE ===== HOMEPAGE ===== HOMEPAGE ===== */
#hero						{ position:relative; }
#hero .background 			{ width:100%; height:100%; }
#hero .background img 		{ position:relative; width:100%; height:100%; aspect-ratio: 16 / 9; }
#hero .content 				{ position: absolute; top:40%; left:55%; width:37%; height: 100%; z-index:98; }
#hero .logo 				{ max-width:350px; margin-bottom:20px; }
#hero .txt-1 				{ font-size:1.3rem; font-weight:300; }

#presentation 				{ background-color: var(--vert); } 
#presentation .txt-1 		{ font-size:3.8rem;  font-weight:700; padding-right:150px; }
#presentation .txt-2 		{ font-size:1.35rem; color: #ffffffaa; border-right: solid 1px #ffffffaa; padding-right:150px; }
#presentation .txt-3 		{ font-size:1.35rem; font-weight:300; color:#fff; }

#separator 					{ position:relative; }
#separator .background 		{ width:100%; height:100%; }
#separator .background img 	{ position:relative; width:100%; height:100%; }
#separator .content 		{ position: absolute; top:10%; left:55%; width:37%; height: 100%; z-index:98; }
#separator .cta 			{ background-color:transparent; color:var(--bleu); font-size:1.30rem; padding: 8px 35px; border-radius:5px; border: solid 2px #ffffffaa; }
#separator .cta:hover		{ background-color:var(--bleu); color:var(--vert); border: solid 2px var(--vert);}

#job 						{ position:relative; z-index:1; margin-bottom: -30px; }
#job .logo					{ max-width:210px; margin-bottom:20px; }
#job h2						{ color:var(--vert); font-size: 1.35rem; margin-bottom:100px; }
#job .jobcard 	 			{ padding-left:16px; padding-right:16px; }
#job .jobcard h3 			{ color:var(--vert); font-size:1.35rem!important; margin-bottom:20px; }
#job .jobcard p 			{ color:var(--vert); font-size: 1.35rem; font-weight:300; }
#job .joblists 				{ display:flex; list-style:none; justify-content:center; }
#job .jobitem	 			{ width:18%; max-width:200px; display:flex; flex-direction:column; align-items: center; }
#job .jobitem img	 		{ padding-left:5px; padding-right:5px; max-width:130px; margin-bottom:15px; }
#job .jobitem span	 		{ color:var(--vert); font-size: 1.20rem; text-transform:uppercase; }

#separator-2 					{ position:relative; z-index:0; }
#separator-2 .background 		{ width:100%; height:100%; position:relative; z-index:0; }
#separator-2 .background img 	{ position:relative; width:100%; height:100%; position:relative; z-index:0; }
#separator-2 .content 			{ position: absolute; top:5%; width:100%; height: 100%; z-index:98; text-align:center;  }
#separator-2 .cta 				{ background-color:transparent; color:var(--jaune); font-size:1.30rem; padding: 8px 35px; border-radius:5px; border: solid 1px var(--jaune); font-weight:700; text-decoration:none; }
#separator-2 .cta:hover			{ background-color:var(--jaune); color:var(--vert);}

#bio 						{ position:relative; z-index:1; margin-top:-450px; margin-bottom: 250px; } 
#bio hr 					{ opacity:1; border-radius:2px; border: solid 10px var(--bleu); width:80px; margin-top:150px; margin-bottom:30px; }
#bio .txt-1 				{ font-size:1.35rem;  font-weight:300;  }
#bio .cta 					{ background-color:transparent; color:var(--jaune); font-size:1.30rem; padding: 8px 35px; border-radius:5px; border: solid 1px var(--jaune); font-weight:700; max-width: 420px; margin: auto; margin-top: 200px; }
#bio .cta:hover				{ background-color:var(--jaune); color:var(--vert);}

footer a 		{ color:var(--jaune)!important; text-decoration:none; }
footer a:hover 	{ color:var(--vert)!important; }



/* ====== CONTACT ===== CONTACT ===== CONTACT ===== CONTACT ===== CONTACT ===== CONTACT ===== CONTACT ===== CONTACT ===== CONTACT ===== CONTACT ===== CONTACT ===== CONTACT =====  */
.modal-content 			{ background-color: var(--creme)!important; border: var(--bs-modal-border-width) solid var(--bs-modal-border-color); }
.btn 					{ background-color:transparent; color:var(--vert); font-size:1.30rem; padding: 8px 35px; border-radius:5px; border: solid 1px var(--jaune); font-weight:700; }
.btn:hover				{ background-color:var(--jaune); color:var(--vert); border: solid 1px var(--jaune);}
.btn:active, .btn:focus	{ background-color:var(--jaune); color:var(--vert); border: solid 1px var(--jaune);}
.btn:focus-visible		{ background-color:var(--jaune); color:var(--vert); border: solid 1px var(--jaune);}

#formAlert				{ margin-top: 15px; }




/* ====== MOBILE ===== MOBILE ===== MOBILE ===== MOBILE ===== MOBILE ===== MOBILE ===== MOBILE ===== MOBILE ===== MOBILE ===== MOBILE ===== MOBILE ===== MOBILE ===== MOBILE =====  */
@media (max-width: 1200px) {
	.logo-container						{ max-width:100px; }
	#hero						{ margin-bottom:-1px; }
	#hero .content				{ position:absolute; top:55%; left:42%; width:53%; padding-right:calc(1.5rem * .5); padding-left:calc(1.5rem * .5); }
	#hero .logo					{ max-width:250px; margin-bottom:20px; }

	#presentation				{ padding-top:100px; padding-bottom:70px; }
	#presentation .txt-1		{ text-align:left!important; font-size:3rem; padding-right:0; }
	#presentation .txt-2		{ text-align:left!important; border-right:none; padding-right:0; }
	#presentation .txt-3		{ margin-bottom:80px; }

	#separator .content			{ position:absolute; top:-15%; left:3%; width:94%; height:100%; z-index:98; text-align:center; }

	#job						{ margin-bottom:0; }
	#job .joblists				{ flex-wrap:wrap; }
	#job .jobitem				{ width:100%; max-width:200px; display:flex; flex-direction:column; align-items:center; margin-bottom:50px; }
	#job .jobitem img			{ padding-left:5px; padding-right:5px; max-width:130px; margin-bottom:15px; }
	#job .jobitem span			{ color:var(--vert); font-size:1.20rem; text-transform:uppercase; }

	#separator-2				{ position:relative; z-index:0; }
	#separator-2 .content		{ position:absolute; top:-5%; width:100%; height:100%; z-index:98; text-align:center; }

	#bio						{ position:relative; z-index:1; margin-top:-150px; margin-bottom:250px; }
	#bio hr						{ opacity:1; border-radius:2px; border:solid 10px var(--bleu); width:80px; margin-top:20px; margin-bottom:30px; }
}

/* ————————————————————— 900 px  ————————————————————— */
@media (max-width: 900px) {
	#hero .background img 		{ height: 515px; object-fit: cover; object-position: left; }
	#hero .content				{ top:65%; left:5%; width:90%; }
	#presentation				{ padding-top:300px; } /* le reste est déjà défini */
	#separator-2 .background img { height: 900px; object-fit: cover; }
	#bio						{ margin-top:-30px; margin-bottom:250px; }
}

/* ————————————————————— 500 px  ————————————————————— */
@media (max-width: 500px) {
	#presentation					{ padding-top:350px; }
	#hero .content					{ left:0; width:100%; }
	#separator-2 .background img 	{ height: 660px; object-fit: cover; }
	#bio .cta 						{ background-color:transparent; color:var(--jaune); font-size:1.20rem; padding: 8px 25px; border-radius:5px; border: solid 1px var(--jaune); font-weight:700; max-width: 320px; margin: auto; margin-top: 200px; }

}

/* ————————————————————— 360 px  ————————————————————— */
@media (max-width: 360px) {
	#presentation				{ padding-top:400px; }
}