/* Déclaration des éléments:variables */
:root {
	--ma-police : "Red Rose", sans-serif;
	--ma-couleur : #0c4a0c;
	--ma-couleur-fond : #f0f7f2;
	--ma-couleur-pastel : rgba(12, 74, 12, 0.3);
	--taille-grande : 1.5em;
	--taille-moyenne : 0.8em;
	--taille-petite : 0.5em;
}

.motclef {
	background-color: var(--ma-couleur-pastel);
	color: var(--ma-couleur-fond);
	padding : 0.1em;
}
footer {
	background-color: var(--ma-couleur-pastel);
	color: var(--ma-couleur-fond);
	padding:2em;
}

.list-inline-item a {
	font-family: var(--ma-police);
	color :  var(--ma-couleur);
	text-decoration: none;
}

.list-inline-item a:hover {
	font-family: var(--ma-police);
	color :  var(--ma-couleur);
	text-decoration: none;
}

hr {
	border: 1px solid var(--ma-couleur-fond);
}

#blocontenu {
	padding:2em;
	margin-top:300px;
	text-align : left;
	font-family: var(--ma-police);
	color :  var(--ma-couleur);
	min-height : calc(100vh - 40px)
}

#menusupp {
	font-family: var(--ma-police);
	color :  var(--ma-couleur);
	display: flex;
	position: fixed; /* Fixe l'élément */
	top: 0; /* Positionne en haut de la page */
	z-index: 1000; /* Assure que c'est au-dessus d'autres éléments */
	background-color: #fff; /* Couleur de fond */
	border-bottom: 1px solid #ddd; /* Ligne en bas pour la séparation */
	padding: 10px; /* Espacement interne */
	box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1); 
}

#menusupp a {
	font-family: var(--ma-police);
	color :  var(--ma-couleur);
}



.sidebar .closebtn {
    position: absolute;
    top: 10px;
    right: 25px;
    font-size: 36px;
}

.openbtn {
    font-size: 20px;
    cursor: pointer;
    background-color: var(--ma-couleur);
    color: var(--ma-couleur-fond);
    padding: 10px 15px;
    border: none;
    position: fixed;
    top: 15px;
    left: 15px;
    z-index: 1002;
}

.openbtn:hover {
    background-color: var(--ma-couleur);
}

.sidebar {
    height: 100%;
    width: 250px;
    position: fixed;
    top: 100;
    left: -250px; /* Panneau caché en dehors de l'écran */
    background-color: var(--ma-couleur);
	opacity: 0.76;
    overflow-x: hidden;
    transition: 0.5s;
    padding-top: 20px;
    z-index: 1001;
}

.sidebar a {
    padding: 10px 15px;
    text-decoration: none;
    font-size: 25px;
    color: var(--ma-couleur-fond);
	font-family: var(--ma-police);
    display: block;
    transition: 0.3s;
}

.sidebar a:hover {
    background-color: var(--ma-couleur);
}

.sidebar h3 {
    color: var(--ma-couleur-fond);
	font-family: var(--ma-police);
    padding-left: 10px;
}

.sidebar form {
    display: flex;
    flex-direction: column;
    padding: 10px;
}

.sidebar label {
    color: var(--ma-couleur-fond);
	font-family: var(--ma-police);
    margin-top: 10px;
}

.sidebar input, .sidebar select, .sidebar button {
    margin-top: 5px;
	border-radius: 10px;
}

.sidebar button {
    background-color: var(--ma-couleur);
    color: var(--ma-couleur-fond);
	font-family: var(--ma-police);
    border: none;
    padding: 10px;
    cursor: pointer;
    margin-top: 20px;
	border-radius: 10px;
}

.sidebar button:hover {
	background-color: var(--ma-couleur-fond);
    color: var(--ma-couleur);
}

#active-filters {
        display: flex;
        flex-wrap: wrap;
        gap: 10px; /* Espace entre les pastilles */
    }
.filter-pill {
	display: inline-flex;
	align-items: center;
	background-color: var(--ma-couleur-fond);
	color : var(--ma-couleur);
	border-radius: 20px;
	padding: 5px 10px;
	margin: 5px;
}
.filter-pill .close {
	margin-left: 10px;
	cursor: pointer;
}

select {
	color : var(--ma-couleur);
	border-radius: 10px;
	border: var(--ma-couleur) 2px solid;
}

select>option {
    background-color: var(--ma-couleur-fond);
}

.scroll-y {
  max-height: 600px;
  overflow-y: auto;
  -ms-overflow-style: -ms-autohiding-scrollbar;

}

.scroll-y-court {
  max-height: 200px;
  overflow-y: auto;
  -ms-overflow-style: -ms-autohiding-scrollbar;

}

.table th.date-column,
.table td.date-column {
	width: 220px;
}
.table tbody tr {
	height: 120px;
}

.table th,
.table td {
	vertical-align: middle;
}
.table img {
	display: block;
	margin: auto;
	max-height: 80px;
}

.table tbody tr:hover,
.table tbody tr:focus {
	background-color:var(--ma-couleur-fond);
	color:var(--ma-couleur);
}


h3 {
	color:var(--ma-couleur);
	font-size : var(--taille-moyenne);
	font-family: var(--ma-police);
}

.navbar {
	background-color: white;
	position: fixed;
	top: 2;
	width: 100%;
	z-index: 1000; /* Assurez-vous que la navbar est au-dessus des autres contenus */
}
.navbar .navbar-content {
	opacity: 0.8; /* Ajustez cette valeur pour la transparence du contenu de la navbar */
}

.nav-link {
	color:var(--ma-couleur);
	font-size : var(--taille-grande);
	font-family: var(--ma-police);	
}

.fc .fc-button-primary { color: #FFFFF; background-color: var(--ma-couleur) !important; border-color: var(--ma-couleur) !important; }

.listeref {
	color:var(--ma-couleur);
	font-size : 0.7em;
	font-family: var(--ma-police);	
}

.listeref:hover {
	font-size : 0.8em;
}

#reference_image {
  border: 1px solid var(--ma-couleur);
  border-radius: 4px;
  padding: 2px;
  width : 14em;
  box-shadow:  -5px 5px 16px var(--ma-couleur),
                 5px -5px 16px #ddedff;
}

.bouton_direction {
	background-color: white;
	color : var(--ma-couleur);
	font-family: var(--ma-police);
	font-size : small;
	box-shadow: 0px 3px 4px rgba(0, 0, 0, 0.4);
	border-radius: 10px;
	border: none;
	padding: 8px 15px;
	transition: all 0.3s ease;
}
/* Effet au survol */
.bouton_direction:hover {
  /* Réduire légèrement l'ombre */
  box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.2);
  /* Légèrement réduire la taille */
  transform: translateY(1px);
}

.bouton_validation {
	background-color: var(--ma-couleur);
	color : white;
	font-family: var(--ma-police);
	font-size : small;
	box-shadow: 0px 3px 4px rgba(0, 0, 0, 0.4);
	border-radius: 10px;
	border: none;
	padding: 8px 15px;
	transition: all 0.3s ease;
}
/* Effet au survol */
.bouton_validation:hover {
  /* Réduire légèrement l'ombre */
  box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.2);
  /* Légèrement réduire la taille */
  transform: translateY(1px);
}

.bouton_suppression {
	background-color: #d12d08;
	color : white;
	font-family: var(--ma-police);
	font-size : small;
	box-shadow: 0px 3px 4px rgba(0, 0, 0, 0.4);
	border-radius: 10px;
	border: none;
	padding: 8px 15px;
	transition: all 0.3s ease;
}
/* Effet au survol */
.bouton_suppression:hover {
  /* Réduire légèrement l'ombre */
  box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.2);
  /* Légèrement réduire la taille */
  transform: translateY(1px);
}


.reftabconnexe {
	color:var(--ma-couleur);
	font-size : var(--taille-moyenne);
	font-family: var(--ma-police);
	line-height: normal;
}

.reftabconnexe:hover {
	background-color:var(--ma-couleur-fond);
	cursor: pointer;
	text-decoration : none;
}


.form-control {
    width: 20%; /* Pour que les inputs occupent toute la largeur */
    padding: 10px;
    margin-bottom: 15px; /* Espacement entre les champs */
    box-sizing: border-box; /* Pour que la largeur inclue les paddings */
}

label {
    font-weight: bold;
    display: block; /* Pour que le label soit aligné verticalement au-dessus du champ */
    margin-bottom: 5px;
}

::-webkit-scrollbar {
  width: 7px;
  background: transparent;
  border-radius: 20px;
}

::-webkit-scrollbar-thumb {
  border: 5px solid var(--ma-couleur);
  -webkit-box-shadow: inset 0 0 px var(--ma-couleur) ;
  border-radius: 15px;
}

.image-container {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5em; /* Small gap between the cards */
}

.image-item {
    flex: 1 1 calc(20% - 1em); /* Adjust the percentage to show 5 cards per row */
    max-width: calc(20% - 1em); /* Adjust the percentage to show 5 cards per row */
    position: relative; /* Ensure child elements are positioned correctly */
    margin-bottom: 0.5em; /* Small gap between rows */
}

.card {
    perspective: 150rem;
    position: relative;
    width: 100%;
    height: 0;
    padding-bottom: 100%; /* Maintain aspect ratio (1:1) */
    background: none;
}

.card-side {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border-radius: 15px;
    transition: all 1s ease;
    backface-visibility: hidden;
    overflow: hidden; /* Ensure content does not overflow the card */
    display: flex;
    align-items: center;
    justify-content: center;
}

.card-side.back {
    transform: rotateY(-180deg);
}

.card-side.front {
    background-color: var(--ma-couleur);
    color: white;
    font-size: var(--taille-moyenne);
    font-family: var(--ma-police);
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center; /* Center text horizontally */
}

.card-side.back img {
    width: 60%;
    height: auto;
    object-fit: cover; /* Ensure the image covers the entire card side */
    border-radius: 1px; /* Match the border radius of the card */
}

.card:hover .card-side.front {
    transform: rotateY(180deg);
    transition: transform 1s ease; /* Ensure the same shorter duration on hover */
}

.card:hover .card-side.back {
    transform: rotateY(0deg);
    transition: transform 2s ease; /* Ensure the same longer duration on hover */
}

.custom-accordion-item {
    margin-bottom: 10px;
    border: 1px solid white;
    border-radius: 4px;
    overflow: hidden;
}

.custom-accordion-header {
    background-color: transparent;
    padding: 10px;
    cursor: pointer;
}

.custom-accordion-body {
    padding: 10px;
    color: var(--ma-couleur); 
}

.lettres {
    display: flex;
    flex-wrap: wrap;
    gap: 10px; /* Espace entre les lettres */
}

.lettre {
    font-size: 20px; /* Taille des lettres */
    font-weight: bold; /* Mettre en gras */
    padding: 5px; /* Ajouter un peu de padding */
	color: var(--ma-couleur);
	background-color: transparent;
}

.lettre:hover {
	color: white;
	background-color: var(--ma-couleur);
}

#liste-sigle li:hover {
	color: white;
	background-color: var(--ma-couleur);	
}

 #imginfo { 
	object-fit: cover; 
}