@font-face{
	font-family: 'chicken_fajitas';
	src: url('../font/chicken_fajitas.otf') format('truetype');
}
.manuscrite{
	font-family: chicken_fajitas;
	font-size: 1.5em;
	color: #00507c;  /* bleu FLOMIC */
}

body{
	color: #00507c; /* bleu FLOMIC */
	/* background-color: #00507c; /* bleu FLOMIC */
	background-color: #ffffff;
}
/* dimension logo nav menu */
h2{
	border-bottom-color:  #00507c; /* bleu FLOMIC */
	border-bottom-width: 2px;
	border-bottom-style : solid;
	margin-bottom: 20px;
	font-weight: bolder;
	font-size: 2.5em;
	font-family: Futura, Trebuchet MS, Arial, sans-serif;
}
#logo_small{
	height: 35px;
	visibility: hidden;
}
#navmenu{
	position: sticky;
	top: -1px;
	z-index: 1030;
}

/* --nav float-- */
/* pour la navbar float top */
.fixed-middle-bottom {
	position: fixed;
	bottom: 10%;
	right: 0;
	z-index: 1030;
}
/* on rend les barres float invisibles au chargement */
.navfloat{
	visibility: hidden;
	opacity: 0;
	border-radius: 20px 0 0 20px;
}
.fd-transparent {
  background-color: rgba(0, 0, 0, 0.5) !important;
}
.fd-transparent img {
	width: 50px;
    opacity: 0.5;
    filter: alpha(opacity=50); /* For IE8 and earlier */
}
/* --nav foat FIN-- */

/* --mise en forme du contenu-- */
/* anciens fonds de page colorés => blancs sur version desktop */
.bg-section-fonce, .bg-section-clair{
	background-color: white;
}
.bg-card-fonce{
	background-color: #00507c; /* bleu FLOMIC */
	color: white;
	margin-top: 1.5rem;
	margin-bottom: 1.5rem;
	margin-right: 1rem;
	margin-left: 1rem;
	padding: 1rem;
	border: 1px solid #f1faff; /* bleu clair FLOMIC */
}
.bg-card-clair{
	background-color: #f1faff; /* bleu clair FLOMIC */
	margin-top: 1.5rem;
	margin-bottom: 1.5rem;
	margin-right: 1rem;
	margin-left: 1rem;
	padding: 1rem;
	border: 1px solid #00507c; /* bleu FLOMIC */
}
.indent{
	text-indent: 2rem;
}
.barre-separe{
	height:10px;
	background-color: #00507c;
}
.clickable{
	cursor: pointer;
	text-decoration: underline;
}
.click-select{
	color: white;
	background-color: #00507c;
}
.img-effet{
	/*filter: sepia(100%);*/
	transform: scale(1);
	transition: .5s ease-in-out;
}
.img-effet:hover{
	/* filter: sepia(0%);*/
	transform: scale(1.2);
}
/* --mise en forme du contenu FIN-- */

/* --pour la largeur de la page max-- */
.w-80{
	width: 90% !important;
	max-width: 900px;
}
/* --pour la largeur de la page max FIN-- */

/* --mise en forme formulaire-- */
.bad-form{
	background-color: #ffe;
	border: 2px solid red;
}
/* --mise en forme formulaire FIN-- */

/* --mise en forme pour le captcha-- */
/* Cachons la case à cocher */
#Fcaptcha:not(:checked),
#Fcaptcha:checked {
  position: absolute;
  left: -9999px;
  z-index: -1;
}
 /* on prépare le label */
#Fcaptcha:not(:checked) + label,
#Fcaptcha:checked + label {
  position: relative; /* permet de positionner les pseudo-éléments */
  padding-left: 30px; /* fait un peu d'espace pour notre case à venir */
  cursor: pointer;    /* affiche un curseur adapté */
  padding-bottom: 20px;
  margin-bottom: -10px;

}
/* Aspect des checkboxes */
/* :before sert à créer la case à cocher */
#Fcaptcha:not(:checked) + label:before,
#Fcaptcha:checked + label:before {
  content: '';
  position: absolute;
  left:0; top: -5px;
  width: 25px; height: 25px; /* dim. de la case */
  border: 1px solid #aaa;
  background: #f8f8f8;
  border-radius: 3px; /* angles arrondis */
  box-shadow: inset 0 1px 3px rgba(0,0,0,.3) /* légère ombre interne */
}
 /* Aspect général de la coche */
#Fcaptcha:not(:checked) + label:after,
#Fcaptcha:checked + label:after {
  content: '✔';
  position: absolute;
  left: 0px; top: -5px;
  font-size: 18px;
  color: #09ad7e;
  transition: all .2s; /* on prévoit une animation */
}
/* Aspect si "pas cochée" */
#Fcaptcha:not(:checked) + label:after {
  opacity: 0; /* coche invisible */
  transform: scale(0); /* mise à l'échelle à 0 */
}
/* Aspect si "cochée" */
#Fcaptcha:checked + label:after {
  opacity: 1; /* coche opaque */
  transform: scale(1); /* mise à l'échelle 1:1 */
}
/* Aspect de l'alert captcha */
.alert-captcha{
  background-color: rgba(0, 0, 0, 0.75) !important;
  top: -50px;
}
/* --mise en forme pour le captcha FIN-- */

/* --mise en forme tableau-- */
.tfoot-dark{
	color: #00507c; /* bleu FLOMIC */
	background-color: #212529;
	border-color: #32383e;
	text-align: center;
}
.tfoot-div{
	display: inline-block;
	width: 20px;
}
.tfoot-dark a{
	color: #fff;
}
.tfoot-dark span{
	display: inline-block;
	background-color: #f1faff; /* bleu clair FLOMIC */
	width: 20px;
}
/* --mise en forme tableau FIN-- */

/* --surcouche bootstrap-- */
/* change la couleur de fond dans la barre de nav */
.dropdown-item:hover, .dropdown-item:focus, .nav-link:hover {
	color: #00507c !important;
	background-color: #f1faff !important;
}
/* change la couleur de fond dans la barre de nav */
.dropdown-item, .nav-link {
	color: #00507c !important;
}
/* change la couleur de fond dans la sous-barre de nav au clic */
.dropdown-item.active, .dropdown-item:active {
	color: #fff !important;
	background-color: #00507c !important;
}
/* position menu */
.dropdown:hover .dropdown-menu {
	top: 35px;
}
/* --surcouche bootstrap FIN-- */

/* --3d effets-- */
.effet3d{
    width: 200px;
    height: 200px;
    perspective: 800px;
	cursor: pointer;
}
.div3d{
    width: 200px;
    height: 200px;
    position: absolute;
    top: 0px;
    left: 0px;
    opacity: 1;
    border: 2px solid #444;
    text-align: center;
    transition: 2s;
    backface-visibility: hidden; /* Permet d'éviter de voir le bloc de dos */
}
.devant3d{
    z-index: 100;
    background-color: white;
}
.derriere3d{
    z-index: 50;
	color: white;
    background-color: #00507c;
    transform: rotateY(-180deg); /* Celui-ci est retourné par défaut */
}
.effet3d:hover .devant3d{
    transform: rotateY(180deg); /* On passe de 0 à 360° : tour complet */
}
.effet3d:hover .derriere3d{
    transform: rotateY(0deg); /* On passe de 0 à 360° : tour complet */
}
/* --3d effets FIN-- */

/* --responsive <=> BOOTSTRAP -md--- */
@media (max-width: 768px) {
	.bg-section-fonce h2{
		border-bottom-color:  #fff; /* bleu FLOMIC */
	}
	.bg-section-clair h2{
		border-bottom-color:  #00507c; /* bleu FLOMIC */
	}
	.bg-section-fonce{
		background-color: #00507c; /* bleu FLOMIC */
		color: white;
	}
	.bg-section-clair{
		background-color: #f1faff; /* bleu clair FLOMIC */
	}
	.bg-card-clair, .bg-card-fonce{
		margin-right: 0rem;
		margin-left: 0rem;
	}
	.bg-card-clair{
		color: #00507c; /* bleu FLOMIC */
	}
	.w-80{
		width: 100% !important;
	}
	.barre-separe{
		display: none;
	}
}
/* --responsive <=> BOOTSTRAP -md- FIN-- */