/* RESPONSIVE : PHONE / VERTICAL DEVICES */
.burger-nav-mobile .fa-bars, .burger-nav-mobile .mobile-menu{
	display: none;
}
@media only screen and (max-width: 767px) {
	.burger-nav-mobile .fa-bars, .burger-nav-mobile .fa-xmark {  
		margin-top: 5%;
    margin-left: 5%;
    font-size: 150%;
	}
	.burger-nav-mobile .fa-bars {
		display: block;  
	}
	.fa-bars:hover {
		cursor: pointer;
	}
	.to-suppress-mobile, #homepage #main-menu  {
		display: none;
	} 
	#homepage header  {
    height: initial; 
		padding: 10vh 0;
    line-height: initial;
	}
	#other-page h1 {
    width: 80%;
    margin: auto;
	}
	.burger-nav-mobile .mobile-menu {
		position: fixed;
		left: 0;
		width: 80%;
		height: 100vh;
		background-color: var(--cream-color);
		text-align: initial;
		z-index: 999;
	}
	.burger-nav-mobile .nav-content {
		text-align: center;
	}
	.burger-nav-mobile .nav-content .menu-item {
		text-align: left;
		margin-bottom: 5%;
	}
	#other-page .flag-nav {
    position: initial;
    margin-left: 0!important;
    margin-top: 10%;
  }
  #other-page .col-1-carousel {
  	margin: 0;
  	padding: 0;
  }
  #other-page .col-1-carousel button{
  	width: -webkit-fill-available;
  	width: -moz-available;          
    width: fill-available;
  }
}

/* ====== COMMON FOR EVERY PAGES ====== */
/* ==================================== */

body {
	--gold-color: #ffdd63;
	--cream-color: #FAF2EA;
	--light-brown-color: #CCAEA4;
	--brown-color: #B39188;
	--dark-brown-color: #392E2C;
	margin: 0;
  max-width: 100%;
  overflow-x: hidden;
}

a {
	text-decoration: none;
	font-weight: 700;
  font-size: .80rem;
  text-transform: uppercase;
  color: var(--dark-brown-color);
}


ul {
  list-style-type: none;
}

img.drawing {
	width: 55%;
  display: block;
  margin: auto;
}


/* FONTS */
.title-font {
	font-family: "Lexend Exa", serif;
  font-optical-sizing: auto;
  font-weight: 400;
  text-transform: uppercase;
  font-size: 2em;
  font-style: normal;
  color: var(--dark-brown-color);
}
.text-font {
  font-family: "Red Hat Display", sans-serif;
  font-optical-sizing: auto;
  font-weight: 400;
  font-style: normal;
  color: var(--dark-brown-color);
}
.light-text-font {
  font-family: "Red Hat Display", sans-serif;
  font-optical-sizing: auto;
  font-weight: 400;
  font-style: normal;
  color: var(--light-brown-color);
}
.text-highlight-font {
  font-family: "Parisienne", cursive;
  font-weight: 900;
  text-align: center;
  font-size: 1.2em;
  margin: 2em 0;
  font-style: normal;
  color: var(--dark-brown-color);
  text-transform: initial;
}
.highlight-font-size-up {
  font-size: 1.4em;
}
.ymis-font {
  font-family: "Libre Bodoni", serif;
  font-optical-sizing: auto;
  font-weight: 400;
  font-style: normal;
  font-size: 1.1em;
}
.footer-font {
  font-family: "Parisienne", cursive;
  font-weight: 400;
  font-style: normal;
}

/* FLAG DIV */
.flag-nav{
	line-height: initial;
	position: absolute;
}
#main-menu .col-1 {
  display: block;
  overflow: hidden;
  position: relative;
}
.flag-nav, .dropdown {
  display: inline-block;
  width: 20px;
  height: 20px;
}
.flag-nav {
	right: calc(50% - 10px);
  top: calc(50% - 10px); /* -10px because it's width/2 */
}
.flag-nav img{
  width: 100%; 
  height: auto;
  display: inline;
  margin: 0 auto;
}
.flag-nav ul {
	padding:0;
	left: 0;
}
.flag-nav ul.dropdown {
  display:none;
  list-style-type: none;
}
.dropdown-toggle::after {
	color: var(--dark-brown-color);
}
nav #active {
	color: var(--light-brown-color);
  border-left-style: solid;
  padding-left: 0.5rem;
}
a:hover{
	color: var(--brown-color);
}
nav #active:hover{
	color: var(--light-brown-color);
}

/* FOOTER */
footer {
	height: 7vh;
	background: var(--dark-brown-color);
	color: var(--brown-color);
	text-align: center;
}

footer .fa-solid {
    margin-top: calc(3.5vh - (var(--fa-width,1.25em) / 2));
}

footer .footer-content {
	line-height: 7vh;
	vertical-align: middle;
}

footer .footer-content i {
	float: left;
}

footer p, footer a {
	font-size: 0.8em;
}

/* ====== HOME PAGE ====== */
/* ======================= */

#homepage{
  display: block;
  overflow: hidden;
}
/* HEADER TITRE */
header {
	height: 20vh;
	line-height: 20vh;
	background-color: var(--cream-color);
}
header div, header div h1 {
	height: 100%;
	line-height: inherit;
}
header div h1 {
	vertical-align: middle;
	color: var(--dark-brown-color);
}
.ymis-font-bigger { 
	font-size: 2.5rem;
}
.ymis-title{
	font-weight: 400;
	text-align: center;
  letter-spacing: 2px;
  word-spacing: 7px;
  font-size: 2.5rem;
  margin: 0;
}
#title-div{
	color: var(--dark-brown-color);
}

/* DRAWINGS BLOCK */
#homepage .block-img {
	background-image: url("../images/bandeau_plan_de_travail.jpg");
	background-size: cover;
	height: 58vh;
}

/* MAIN MENU */
#homepage #main-menu .container-fluid, #homepage #main-menu .container-fluid .row,
#homepage #main-menu .container-fluid .row .col, #homepage #main-menu .container-fluid .row .col-1{
	height: inherit;
	line-height: inherit;
}
#homepage #main-menu{
	height: 15vh;
	line-height: 15vh;
}

/* ====== COMMON FOR OTHER PAGES ====== */
/* ==================================== */

/* LOGO */
#other-page #logo {
	width: 5em;
	margin-bottom: 10%;
  margin-top: 10%;
}
/* to delete when logo is ready */
#other-page .to-suppress-mobile #nav-menu {
  margin-top: 5em;
}
#other-page .mobile-menu .nav-content {
  margin-top: 5em;
}
/***********************************/
/* NAV */
#other-page .div-nav {
	background: var(--cream-color);
}

#other-page #nav-menu{
  text-align: left;
}
#other-page .div-nav {
	position: fixed;
	height: 100vh;
	overflow: hidden;
}
#other-page ul {
	position: relative;
}
#other-page .div-nav li {
	padding: 3%;
}
#other-page .flag-nav {
	position: initial;
	margin-left: calc(50% - 20px);
	margin-bottom: 10%;
}

/* CONTENT PAGE */
#other-page .content-div {
	display: block;
	margin: 3em 0;
}
#other-page h1 {
	margin-bottom: 1.5em;
}
#other-page .content-div .content-col {
	text-align: justify;
	color: var(--dark-brown-color);
}
#other-page .p-0 {
	margin-bottom: 3vh;
}

/* FOOTER */
#other-page footer{
	bottom: 0;
  width: 100%;
  position: fixed;
  z-index: 999;
}
    
/* ====== CAROUSEL NOS VALEURS / SERVICES ====== */
/* ============================================= */
#other-page h2 {
	text-align: center;
	margin-bottom: 1.5em;
}

/* ====== MODE DE FONCTIONNEMENT ====== */
/* ==================================== */
#other-page .carousel-div .col-1 {
	position: relative;
	display: block;
}

#other-page .carousel-div button {
	left: auto;
	right: auto;
	width: auto;
	align-items: normal;
}
#other-page .card {
	width: 80%;
  margin: auto;
}
#other-page .card h5 {
	margin: 1em 0;
}
.mode-fonctionnement .content-div{
	margin: 0!important;
}
.mode-fonctionnement .title-mode-fonctionnement{
	margin-top: 3em;
  margin-bottom: 1.5em;
}
.mode-fonctionnement .carousel, .mode-fonctionnement .carousel-item {
	height: 40vh;
  margin-bottom: 2vh;

}

.mode-fonctionnement .carousel {
	border: 1px var(--brown-color) solid;
}
.mode-fonctionnement .carousel .text-font{
	width: 80%;
  margin: auto;
  margin-top: 2vh;
  text-align: justify;
}

/* ====== FORMULAIRE CONTACT ====== */
/* ================================ */
#other-page #form-evenement {
	text-transform: uppercase;
}
#other-page form {
	margin-top: 1em;
	margin-bottom: 1em;
}

#other-page form button {
	background: var(--cream-color);
  border: none;
}
#other-page form button:hover {
	color: var(--brown-color);
}
#other-page .infos-contact-last {
	padding-top: 1em;
	margin-top: 1em;
	border: 1px solid var(--brown-color);
}


/* ====== PAGE AVANTAGES ====== */
/* ============================ */
#other-page .avantages h3 {
	text-transform: initial;
	font-size: 1em;
}
#other-page .avantages {
	margin-bottom: 6vh;
}


/* ====== QUI SOMMES NOUS ====== */
/* ============================= */

#other-page #photo-nongnart, #other-page .conference-img img {
  width: -webkit-fill-available;
  width: -moz-available;          
  width: fill-available;
	margin-bottom: 1rem;
}