@font-face {
	font-family: 'brandon';
	src: url(Brandon_reg.otf) format('truetype');
}

/* --- STYLES GENERAUX & DE BASE --- */
body {
	background-image: linear-gradient(0deg, rgb(14, 59, 188), white, transparent);
	font-family: 'brandon', sans-serif;
	margin: 0;
	padding: 0;
}

h2 {
	text-align: center;
}

hr {
	margin-top: 50px;
	margin-bottom: 50px;
}

/* --- FORMULAIRES & FIELDSET --- */
fieldset {
	width: 85%; /* Plus large sur mobile par défaut */
	max-width: 500px; /* Limite la taille sur grand écran */
	margin: 50px auto;
	display: block;
	padding: 20px;
	border-radius: 5px;
	border-color: rgb(14, 59, 188);
	box-sizing: border-box;
}

fieldset table {
	width: 100%;
	margin: 0 auto;
}

fieldset td {
	text-align: left;
}

fieldset select, fieldset input {
	width: 100%;
	box-sizing: border-box;
}

.conninput {
	text-align: center;
	border-radius: 3px;
	border-color: rgb(14, 59, 188);
	color: rgb(14, 59, 188);
	padding: 5px;
}

/* --- BOUTONS --- */
button, #connsubmit, #supprsubmit {
	width: 50%; /* Plus large pour être cliquable au doigt */
	max-width: 200px;
	height: 40px; /* Plus haut pour le tactile */
	margin: 20px auto 0 auto;
	display: block;
	border-radius: 5px;
	color: rgb(255, 255, 255);
	cursor: pointer;
	transition-duration: 250ms;
	border: none;
}

button, #connsubmit {
	background-color: #0e3bbc;
}

#supprsubmit {
	background-color: rgb(188, 14, 14);
}

button:hover, #connsubmit:hover, #supprsubmit:hover {
	background-color: rgb(255, 255, 255);
	color: rgb(0, 0, 0);
	border: 1px solid black;
}

/* --- TABLEAUX & LAYOUTS --- */
#tableconn {
	width: 90%;
	max-width: 400px;
	margin: 0 auto;
}

#tableconn tr, #tableconn td {
	text-align: center;
}

#logo {
	width: 30%; /* Plus grand sur mobile pour rester visible */
	max-width: 120px;
	margin: 20px auto;
	display: block;
}

/* Grille de menu (Tuiles) */
/* .tuiles {
	margin: 50px auto;
	border-spacing: 15px;
	width: 100%;
}

.menutuile {
	padding: 5% 10px;
	position: relative;
	cursor: pointer;
	background-color: rgba(255, 255, 255, 0.16);
	text-align: center;
	border: 1px black solid;
	font-family: brandon;
	transition-duration: 500ms;
	border-radius: 10px;

	width: 20%;
  	user-select: none;
} */

.tuiles {
	margin: 100px auto 50px auto;
	width: 90%;
	max-width: 800px; 
	
	display: flex;
	flex-direction: column; 
	gap: 20px;

	user-select: none;
}

.menutuile {
	width: 100%; 
	box-sizing: border-box;
	
	padding-top: 40px;
	padding-bottom: 40px;
	
	position: relative;
	cursor: pointer;
	background-color: rgba(255, 255, 255, 0.16);
	text-align: center;
	border: 1px black solid;
	font-family: brandon;
	transition-duration: 300ms;
	border-radius: 10px;
	font-size: 1.2rem;
	font-weight: bold;
}

.menutuile:hover {
	background-color: rgb(14, 59, 188);
	color: rgb(255, 255, 255);
}

.erreur {
	color: red;
	text-align: center;
	font-weight: bold;
	padding: 10px;
	background-color: white;
	border: 1px solid black;
	width: 85%;
	margin: 0 auto;
	border-radius: 5px;
}

/* Tableaux de données */
.tableusers, .tablestock {
	border-collapse: collapse;
	width: 95%;
	margin: 50px auto 0 auto;
	/* margin-bottom: 30px; */
}

.tableusers td, .tableusers th, 
.tablestock td, .tablestock th {
	border: 1px solid black;
	text-align: center;
	padding: 8px 4px; /* Padding interne pour respirer */
}
.tablestock{
    max-width: 100%; /* Empêche le contenu de dépasser de sa cellule */
}

/* .tableusers td, .tableusers th { width: 25%; } */
.tablestock td, .tablestock th { height: 50px; }

.trp { background-color: white; }
.tablestock .tri { background-color: darkgray; }
.tableusers .trp:hover, .tri:hover, .trAjout:hover { background-color: gray; cursor: pointer; }

.tuileStock {
	border: 1px black solid;
	transition-duration: 250ms;
	background-color: rgba(255,255,255,0.75);
	cursor: pointer;
}
.tuileStock:hover { background-color: grey; }

/* --- NAVIGATION & INTERFACE --- */
.accueil {
	position: fixed;
	cursor: pointer;
	top: 10px;
	z-index: 10;
}
.accueil:hover, #croix:hover, #supprPhoto:hover, #tdPhoto:hover, .contFiltre > img:hover { filter: invert(50%); }
#accueil { left: 10px; }
#deconnexion { right: 10px; }
#ajout, #retour { left: 70px; }

#burgerMenu {
	visibility: hidden; /* À basculer en visible via JS sur mobile si besoin */
}

nav {
	position: fixed;
	top: 0px;
	left: 0px;
	width: 250px; /* Largeur fixe plus adaptée qu'un % sur mobile */
	height: 100%;
	background-color: #072170;
	color: white;
	transform: translateX(-100%); /* Caché par défaut à gauche */
	transition: transform 0.3s ease;
	z-index: 100;
}

/* Classe à ajouter en JavaScript sur ton élément <nav> pour l'ouvrir */
nav.open {
	transform: translateX(0);
}

nav div {
	width: 100%;
	height: 60px;
	display: flex;
	align-items: center;
	justify-content: center;
	font-weight: bold;
}
nav div:hover { background-color: lightgrey; color: black; cursor: pointer; }

/* --- POPUPS & MODALES --- */
.popup, #popupAjout, #popupInventaire {
	position: fixed;
	background-color: white;
	border: 1px black solid;
	border-radius: 10px;
	z-index: 1000;
	box-sizing: border-box;
}

.popup {
	width: 85%;
	max-width: 300px;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
}
.popup table { width: 100%; margin: 0 auto; }

#popupAjout {
	background-color: rgba(255, 255, 255, 0.95);
	width: 90%;
	max-width: 500px;
	top: 50%;
	left: 50%;
	transform: translate(-50%,-50%);
	padding: 15px;
}
#popupajout table { width: 90%; margin: 0 auto; }
#popupajout td { text-align: left; }

#popupInventaire {
	visibility: hidden;
	width: 90%;
	max-width: 500px;
	left: 5%;
	top: 15%;
	padding: 15px;
}
#popupInventaire fieldset { width: 100%; }

#croix { position: absolute; top: 10px; right: 10px; cursor: pointer; }
#closer {
	visibility: hidden;
	width: 100%;
	height: 100%;
	opacity: 0.7;
	display: block;
	background-color: gray;
	position: fixed;
	top: 0px;
	left: 0px;
	z-index: 90;
}

/* --- CONTENEUR POUR GRANDS TABLEAUX SUR MOBILE --- */
.table-responsive {
	width: 100%;                  /* Prend toute la largeur de l'écran du mobile */
	overflow-x: auto;             /* Active le scroll horizontal UNIQUEMENT si le tableau déborde */
	-webkit-overflow-scrolling: touch; /* Rend le défilement fluide et agréable au doigt sur smartphone */
	margin-top: 50px;             /* Reprend la marge du haut qui était sur ton tableau */
}

/* --- AJUSTEMENT DE LA TABLE --- */
.table-responsive .tablestock {
	width: auto;                  /* Permet au tableau de prendre sa taille naturelle sans forcer */
	min-width: 100%;              /* S'assure qu'il prend au moins toute la largeur s'il a peu de colonnes */
	margin-top: 0;                /* On remet à zéro car c'est le conteneur du dessus qui gère l'espace */
}


/* ==========================================================================
   MEDIA QUERIES (POUR LES GRANDS ÉCRANS / DESKTOP)
   ========================================================================== */
@media (min-width: 768px) {
	fieldset { width: 30%; }
	#tableconn { width: 40%; }
	#logo { width: 10%; }
	.erreur { width: 30%; }
	
	.tableusers { width: 20%; }
	.tablestock { width: 50%; }
	
	button, #connsubmit, #supprsubmit { width: 20%; }
	
	.popup { width: 20%; top: 40%; transform: none; left: auto; margin: 0 auto; }
	#popupInventaire { width: 50%; height: 50%; left: 25%; top: 25%; }
	#popupInventaire fieldset { width: 70%; }
	
	nav {
		width: 20%;
		transform: translateX(0); /* Toujours affiché sur grand écran */
	}

	.tuiles {
		/* Sur PC, les boutons passent côte à côte */
		flex-direction: row; 
		justify-content: space-between;
	}

	.menutuile {
		/* flex: 1 force les deux boutons à se partager équitablement l'espace */
		/* Ils auront donc pile la même largeur automatiquement ! */
		flex: 1; 
		
		/* Tu peux optionnellement ajuster la hauteur spécifiquement sur PC ici */
		padding-top: 60px;
		padding-bottom: 60px;
	}

	/* .filter-wrapper {
	display: flex;
	align-items: center; 
	gap: 8px;            
	}

	.filter-icon {
	width: 20px;        
	height: auto;
	flex-shrink: 0;     
	} */

	.contFiltre {
    display: flex;
    align-items: center;    
    justify-content: center;
    position: relative;
	}

	.contFiltre img {
		position: absolute;
		left: 1px;     
		width: 25px;
		height: 25px;
		cursor: pointer;
	}

	#searchInput{
		width: 30%;
		height: 40px;
		margin: 0 auto;
		display: block;
		border-radius: 10px;
		border: 1px solid black;
		padding: 5px 10px;
		font-family: 'brandon', sans-serif;
	}
}