/*
 * Auteur : Adrien DEPROST
 * Date de création : 03/05/2025
 *
 * Licence :
 * Ce fichier est sous licence propriétaire, sauf indication contraire.
 * Toute utilisation, modification ou distribution de ce fichier 
 * est interdite sans l'autorisation écrite préalable de l'auteur.
 * 
 * Historique des modifications :
 * 08/05/2025 Adrien DEPROST : ajout de classes spécifiques pour distinguer le header des nav bootstrap, meilleur gestion des tabs
 * 03/05/2025 - Adrien DEPROST - Création
 *
 * -----------------------------------------------------------------------------
 */

/* Fonts */
:root {
	--font-default: "Open Sans", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", "Liberation Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
	--font-primary: "Montserrat", sans-serif;
	--font-secondary: "Poppins", sans-serif;
}
  
/* Colors */
:root {
	--color-default: #222222;

	/* Vert et Orange
	--color-primary: #008374; 
	--color-secondary: #f85a40;
	--color-secondary-opacity-50: rgba(248, 90, 64, 0.5);
	*/

	/* Bleu et jaune */
	--color-primary: #003066;
	--color-secondary: #f9d003;
	--color-secondary-opacity-50: rgba(249, 208, 3, 0.5);
	

	--button-color: black;
	--button-background-color: silver;
	--bs-btn-bg : black; 
}
  
/* Smooth scroll behavior */
:root {
	scroll-behavior: smooth;
}


/*--------------------------------------------------------------
# General
--------------------------------------------------------------*/
body {
	font-family: var(--font-default);
	color: var(--color-default);
}

main {
	margin-top:100px;
	margin-bottom: 50px;
}

.color-secondary {
	color: var(--color-secondary);
}
  
a {
	color: var(--color-primary);
	text-decoration: none;
}
  
a:hover {
	color: var(--color-primary);
	text-decoration: none;
	opacity: 0.8;
}
  
h1, h2, h3, h4, h5, h6 {
	font-family: var(--font-primary);
}
  
.bd-placeholder-img {
	font-size: 1.125rem;
	text-anchor: middle;
	-webkit-user-select: none;
	-moz-user-select: none;
	user-select: none;
}
  
@media (min-width: 768px) {
	.bd-placeholder-img-lg {
		font-size: 3.5rem;
	}
}
  
.b-example-divider {
	width: 100%;
	height: 3rem;
	background-color: rgba(0, 0, 0, .1);
	border: solid rgba(0, 0, 0, .15);
	border-width: 1px 0;
	box-shadow: inset 0 .5em 1.5em rgba(0, 0, 0, .1), inset 0 .125em .5em rgba(0, 0, 0, .15);
}

.b-example-vr {
	flex-shrink: 0;
	width: 1.5rem;
	height: 100vh;
}
  
.bi {
	vertical-align: -.125em;
	fill: currentColor;
}
  
.nav-scroller {
	position: relative;
	z-index: 2;
	height: 2.75rem;
	overflow-y: hidden;
}
  
.nav-scroller .nav {
	display: flex;
	flex-wrap: nowrap;
	padding-bottom: 1rem;
	margin-top: -1px;
	overflow-x: auto;
	text-align: center;
	white-space: nowrap;
	-webkit-overflow-scrolling: touch;
}
  
.bd-mode-toggle {
	z-index: 1500;
}

.bd-mode-toggle .dropdown-menu .active .bi {
	display: block !important;
}

.btn-primary {
	background-color: var(--color-secondary);
	border-color: var(--color-secondary);
}

.btn-primary:hover {
	background-color: var(--color-secondary);
	border-color: var(--color-secondary);
	opacity: 0.8;

}

.btn.disabled, .btn:disabled, fieldset:disabled .btn {
	color: var(--bs-btn-disabled-color);
	pointer-events: none;
	background-color: var(--color-secondary);
	border-color: var(--color-secondary);
	opacity: 0.8;
}

.requis {
	color : var(--color-secondary);
	font-weight: bold;
}

h1, h2, h3, h4, h5, h6 {
	color: var(--color-primary);
}

.html-error {
	font-size: 8rem;
	color: var(--color-primary);
}

.nav-link {
	color: var(--color-default);
}

.nav-link:hover {
	color: var(--color-default);
}
 
.nav-tabs .nav-link.active {
	background-color: var(--color-secondary);
	border-color: var(--bs-nav-tabs-link-active-border-color);
	color : white;
	font-weight: bold;

}

.biplan-hr-left {
	width: 50%; /* Largeur de la ligne */
	margin-left: 0; /* Alignement à gauche */
	margin-top: 30px; /* Espace avant la ligne */
	margin-bottom: 30px; /* Espace après la ligne */

}
 
/*--------------------------------------------------------------
# Header and Footer
--------------------------------------------------------------*/

.biplan-header, .biplan-footer{
	background-color: var(--color-primary);
}

nav h1, nav h2, nav h3, nav h4, nav h5, nav h6{
	color: white;
}

.navbar-brand h1{
	color: white;
	font-size: 30px;
	margin: 0;
	font-weight: 600;
	letter-spacing: 0.8px;
	color: #fff;
	font-family: var(--font-primary);
}

.navbar {
	min-height: 70px;
}

.navbar .dropdown ul li {
  min-width: 200px;
}

.nav-item{
	padding : 0px !important;
	margin-left: 30px !important;
	margin-right: 5px !important;
}

.biplan-nav-link{
	font-weight: 600;
	margin: 0px 0px !important;
	padding : 0px !important;
	color: white;
	line-height: 32px;

}

.dropdown-item{
	font-weight: 600;
	color: var(--color-primary);
}

.dropdown-item:hover{
	background-color: white;
}

.nav-search{
	margin-left:15px;
}


footer, footer h1, footer h2, footer h3, footer h4, footer h5, footer h6{
	color: white;
}

footer h1, footer h2, footer h3, footer h4, footer h5, footer h6{
	min-height: 40px;
	font-size: 16px;
	font-weight: bold;
	position: relative;
	padding-bottom: 0px;
	margin-bottom: 0px;
}

footer a {
	color: rgba(255, 255, 255, 0.7);
	text-decoration: none;
}
  
footer a:hover {
	color:  rgba(255, 255, 255, 1);
	text-decoration: none;
}

.footer-info {
	font-size: 30px;
  	font-weight: 700;
  	letter-spacing: 1px;
  	color: #fff;
  	font-family: var(--font-primary);
}

.footer  {
	font-size: 14px;
	font-family: var(--font-primary);
}

/*--------------------------------------------------------------
# Desktop Navigation
--------------------------------------------------------------*/
@media (min-width: 992px) {
  
	.biplan-nav-link:not(.disabled)::before {
		content: "";
		position: absolute;
		width: 100%;
		height: 2px;
		bottom: 3px;
		left: 0;
		background-color: var(--color-secondary);
		visibility: visible;
		width: 0px;
		transition: all 0.3s ease-in-out 0s;
		z-index: 999;
		
	}

	.collapse li:hover>a::before,
	.collapse .active::before 
		{
		visibility: visible;
		width: 100%;
	}
  
	.collapse a:not(.disabled):hover,
	.collapse .active,
	.collapse .active:focus,
	.collapse li:hover>a:not(.disabled) {
	  color: #fff;
	}
  
	.collapse .dropdown ul {
	  display: block;
	  position: absolute;
	  left: 28px;
	  top: calc(100% + 30px);
	  margin: 0;
	  /* padding: 10px 0; */
	  z-index: 99;
	  opacity: 0;
	  visibility: hidden;
	  background: #fff;
	  box-shadow: 0px 0px 30px rgba(127, 137, 161, 0.25);
	  transition: 0.3s;
	  border-radius: 4px;
	}
  
	.collapse .dropdown ul li {
	  min-width: 200px;
	}
  
	.collapse .dropdown ul a {
	  padding: 10px 20px;
	  font-size: 15px;
	  text-transform: none;
	  font-weight: 600;
	  color: var(--color-primary);
	}
  
	.collapse .dropdown ul a i {
	  font-size: 12px;
	}
  
	.collapse .dropdown ul a:hover,
	.collapse .dropdown ul .active:hover,
	.collapse .dropdown ul li:hover>a {
	  color: var(--color-secondary);
	}
  
	.collapse .dropdown:hover>ul {
	  opacity: 1;
	  top: 100%;
	  visibility: visible;
	}
  
	.collapse .dropdown .dropdown ul {
	  top: 0;
	  left: calc(100% - 30px);
	  visibility: hidden;
	}
  
	.collapse .dropdown .dropdown:hover>ul {
	  opacity: 1;
	  top: 0;
	  left: 100%;
	  visibility: visible;
	}
  }
  
  @media (min-width: 1280px) and (max-width: 1366px) {
	.collapse .dropdown .dropdown ul {
	  left: -90%;
	}
  
	.collapse .dropdown .dropdown:hover>ul {
	  left: -100%;
	}
  }
  
  @media (min-width: 1280px) {
  
	.mobile-nav-show,
	.mobile-nav-hide {
	  display: none;
	}
  }


/*--------------------------------------------------------------
# Formulaires
--------------------------------------------------------------*/

/* Avoir moins d'espace entre le header et la page*/
section{
	padding: 30px 0;
}
 
/* Les headers des accordeons en orange */
.accordion-button:not(.collapsed) {
	color: white;
	background-color:  var(--color-secondary);
	box-shadow: inset 0 calc(-1 * var(--bs-accordion-border-width)) 0 var(--bs-accordion-border-color);
	font-weight: bold;
}

.accordion-button:focus {
	border-color: var(--color-secondary);
	box-shadow: var(--color-secondary);

}

/* Les switch button sont avec la couleur secondaire */
.form-switch .form-check-input {
	background-color: var(--color-secondary);
	border-color: var(--color-secondary);
	background-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='rgba(255,255,255,1.0)'/></svg>");


}
.form-switch .form-check-input:checked {
	background-color:var(--color-secondary);
	border-color: var(--color-secondary);
	background-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='rgba(255,255,255,1.0)'/></svg>");

}

/* Les radios et les checkbox sont de la couleur secondaire */
.form-check-input:checked {
	background-color: var(--color-secondary);
	border-color: var(--color-secondary);
}

/* Ombre et bordure sur tous les champs sélectionnés*/
.form-control:focus, .form-select:focus, .form-check-input:focus, 
.form-switch .form-check-input:focus {
    border-color: var(--color-secondary-opacity-50);
    outline: 0;
    box-shadow: 0 0 0 0.25rem var(--color-secondary-opacity-50);
}

/*--------------------------------------------------------------
# Utilisé pour les notes de version
--------------------------------------------------------------*/

.li-version {
	list-style-type: none;
}

.orange {
	color: rgba(248, 90, 64, 1);
}

.gold {
	color: rgb(245, 228, 14);
}

.green {
	color: #008374;
}

.grey {
	color: rgb(192, 192, 192);
}


/*--------------------------------------------------------------
# Scroll top button
--------------------------------------------------------------*/
.scroll-top {
	position: fixed;
	visibility: hidden;
	opacity: 0;
	right: 15px;
	bottom: -15px;
	z-index: 99999;
	background: var(--color-secondary);
	width: 44px;
	height: 44px;
	border-radius: 50px;
	transition: all 0.4s;
}

.scroll-top i {
	font-size: 24px;
	color: #fff;
	line-height: 0;
}

.scroll-top:hover {
	background: var(--color-secondary);
	color: #fff;
}

.scroll-top.active {
	visibility: visible;
	opacity: 1;
	bottom: 15px;
}