/* ------------------------------------------------------------------------
   Palette (noir/rouge) — modifier ces valeurs suffit à retoucher tout le site.
------------------------------------------------------------------------- */
:root {
	--brand-black: #1a1a1a;
	--brand-black-soft: #2b2b2b;
	--brand-red: #b91c1c;
	--brand-red-dark: #8a1616;
	--brand-red-light: #fdecea;
	--text-color: #222;
	--border-color: #ccc;
	--success: #1e7e34;
	--success-bg: #eafaf1;
	--success-border: #c3e6cb;
}

*, *::before, *::after {
	box-sizing: border-box;
}

body {
	background-color: #ffffff;
	color: var(--text-color);
	font-family: Arial, Helvetica, sans-serif;
	margin: 0;
	/* Empêche une image ou un tableau trop large de faire défiler toute la
	   page horizontalement sur mobile (un seul élément en cause suffisait
	   auparavant à casser la mise en page complète). */
	overflow-x: hidden;
}

/* Aucune image ne dépasse jamais la largeur de son conteneur — la plupart
   des <img> du site ont une taille figée en dur (width="752", "133"...)
   dans le HTML, ce qui débordait sur mobile. */
img {
	max-width: 100%;
	height: auto;
}

h2, p, h3, form {
	text-align: center;
}

/* ------------------------------------------------------------------------
   Navigation (auparavant dupliquée dans 7 fichiers header.php différents,
   désormais centralisée ici : les fichiers header.php n'ont plus qu'à
   afficher le <ul class="topnav">, tout le style vient d'ici).
------------------------------------------------------------------------- */
ul.topnav {
	list-style-type: none;
	margin: 0;
	padding: 0;
	overflow: hidden;
	background-color: var(--brand-black);
}

ul.topnav li {
	float: left;
	border-right: 1px solid var(--brand-red);
}

ul.topnav li a {
	display: block;
	color: white;
	text-align: center;
	padding: 14px 16px;
	text-decoration: none;
	transition: background-color .15s ease;
}

ul.topnav li a:hover:not(.active) {
	background-color: var(--brand-red);
}

ul.topnav li a.active {
	background-color: var(--brand-red);
}

ul.topnav li.right {
	float: right;
}

@media screen and (max-width: 1109px) {
	ul.topnav li.right,
	ul.topnav li {
		float: none;
	}
}

.logocenter {
	display: block;
	margin: 0 auto;
	max-width: 40%;
	height: auto;
}

/* ------------------------------------------------------------------------
   Boutons — un seul jeu de règles, s'applique automatiquement partout
   (aucune modification nécessaire dans les pages existantes).
------------------------------------------------------------------------- */
input[type="submit"],
input[type="button"],
button {
	background-color: var(--brand-red);
	color: #fff;
	border: none;
	border-radius: 4px;
	padding: 10px 18px;
	font-size: 14px;
	cursor: pointer;
	transition: background-color .15s ease;
}

input[type="submit"]:hover,
input[type="button"]:hover,
button:hover {
	background-color: var(--brand-red-dark);
}

input[type="text"],
input[type="password"],
input[type="number"],
input[type="date"],
input[type="search"],
select,
textarea {
	border: 1px solid var(--border-color);
	border-radius: 4px;
	padding: 6px 8px;
	font-size: 14px;
}

/* Icônes cliquables (retrait/retour/information/modifier...) : léger effet
   au survol pour indiquer qu'elles sont interactives. Taille figée à 133px
   dans le HTML à l'origine (4-5 icônes sur une ligne débordaient largement
   un écran de téléphone) : plafonnée ici, et réduite encore sur petit écran. */
.formulaire a img {
	transition: transform .1s ease, opacity .1s ease;
	max-width: 100px;
}
.formulaire a:hover img {
	opacity: 0.85;
	transform: scale(1.03);
}
@media (max-width: 500px) {
	.formulaire a img {
		max-width: 60px;
	}
}

/* ------------------------------------------------------------------------
   Messages d'erreur/succès — remplacent les <font color="red|green"> qui
   étaient dupliqués dans plus de 360 fichiers.
------------------------------------------------------------------------- */
.alert-error {
	display: inline-block;
	color: var(--brand-red);
	background-color: var(--brand-red-light);
	border: 1px solid var(--brand-red);
	border-radius: 4px;
	padding: 4px 12px;
}

.alert-success {
	display: inline-block;
	color: var(--success);
	background-color: var(--success-bg);
	border: 1px solid var(--success-border);
	border-radius: 4px;
	padding: 4px 12px;
}

.text-accent {
	color: var(--brand-red);
}

/* ------------------------------------------------------------------------
   Mise en page générale
------------------------------------------------------------------------- */
.center {
	display: block;
	margin: 0 auto;
	max-width: 20%;
	height: auto;
}

/* max-device-width ne réagit pas au redimensionnement de la fenêtre (seulement
   à la résolution physique de l'appareil) : remplacé par max-width, qui
   s'applique correctement sur tout écran/fenêtre étroite. */
@media (max-width: 768px) {
	.center {
		max-width: 55%;
	}
}
@media (max-width: 480px) {
	.center {
		max-width: 80%;
	}
}

.formulaire {
	margin: 0 auto;
	max-width: 100%;
	text-align: left;
}

.test {
	text-align: left;
	margin-left: 15%;
	margin-right: 15%;
}

a:visited {
	color: black;
}

/* Regroupement visuel en "cartes" (utilisé notamment par le panneau
   d'administration, qui enchaînait auparavant une dizaine de formulaires
   à plat sans séparation visuelle). Disposées en grille (2-3 colonnes selon
   la largeur d'écran) pour limiter le défilement, au lieu d'un long empilement
   vertical. */
.admin-cards-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
	gap: 16px;
	max-width: 1200px;
	margin: 20px auto;
	padding: 0 12px;
	align-items: start;
}
@media (max-width: 360px) {
	/* minmax(300px, 1fr) déborde sur les téléphones les plus étroits
	   (ex. 320px de large) : on repasse en une seule colonne franche. */
	.admin-cards-grid {
		grid-template-columns: 1fr;
	}
}
.admin-card {
	padding: 16px 20px;
	border: 1px solid var(--border-color);
	border-left: 4px solid var(--brand-red);
	border-radius: 4px;
	background-color: #fafafa;
}
.admin-card h3 {
	margin-top: 0;
	color: var(--brand-black);
	text-align: left;
	font-size: 16px;
}
.admin-card p {
	text-align: left;
}

/* Badges (éléments manquants/endommagés sur une fiche véhicule en alerte). */
.badge-alert {
	display: inline-block;
	background-color: var(--brand-red-light);
	color: var(--brand-red);
	border: 1px solid var(--brand-red);
	border-radius: 12px;
	padding: 3px 10px;
	margin: 3px 4px 3px 0;
	font-size: 13px;
}

/* Formulaires "check-list" (état d'un véhicule, contrôle technique...) :
   remplace l'ancien rendu en tableau à fond noir plein (hérité d'une règle
   <th> trop générique) par des lignes claires, une étiquette à gauche et le
   choix à droite. Classe dédiée (et non ".formulaire table") car la classe
   "formulaire" est aussi posée directement sur des tableaux qui servent de
   simple barre d'icônes (fiches produit) et ne doivent pas hériter de ce style. */
.checklist-table {
	width: 100%;
	border-collapse: collapse;
	margin: 12px 0;
	text-align: left;
}
.checklist-table th,
.checklist-table td {
	background: none;
	color: var(--text-color);
	font-weight: normal;
	text-align: left;
	padding: 10px 12px;
	border: none;
	border-bottom: 1px solid #eee;
}
.checklist-table th:first-child {
	font-weight: 600;
	width: 40%;
}
.checklist-table tr:nth-of-type(even) {
	background: #fafafa;
}
.checklist-table label {
	cursor: pointer;
	margin-right: 4px;
}

/* ------------------------------------------------------------------------
   Toasts (notifications de succès/erreur, remplacent les gros blocs de
   texte coloré affichés en plein milieu de page).
------------------------------------------------------------------------- */
#toast-container {
	position: fixed;
	top: 16px;
	right: 16px;
	left: 16px;
	z-index: 1000;
	display: flex;
	flex-direction: column;
	align-items: flex-end;
	gap: 10px;
	max-width: 320px;
	margin-left: auto;
}
@media (max-width: 400px) {
	/* Toast pleine largeur (moins les marges) plutôt que collé à droite,
	   sinon trop étroit pour lire le message sur un petit téléphone. */
	#toast-container {
		max-width: none;
		align-items: stretch;
	}
}
.toast {
	background-color: var(--brand-black);
	color: #fff;
	border-left: 4px solid var(--brand-red);
	border-radius: 4px;
	padding: 12px 16px;
	box-shadow: 0 4px 12px rgba(0,0,0,0.25);
	opacity: 0;
	transform: translateX(20px);
	transition: opacity .2s ease, transform .2s ease;
	font-size: 14px;
	text-align: left;
}
.toast-visible {
	opacity: 1;
	transform: translateX(0);
}
.toast-success {
	border-left-color: var(--success);
}
.toast-error {
	border-left-color: var(--brand-red);
}

/* ------------------------------------------------------------------------
   Modale (confirmation de suppression, détails chargés sans recharger la
   page).
------------------------------------------------------------------------- */
.modal-overlay {
	position: fixed;
	inset: 0;
	background-color: rgba(0,0,0,0.55);
	display: flex;
	align-items: center;
	justify-content: center;
	z-index: 999;
}
.modal-overlay[hidden] {
	display: none;
}
.modal-box {
	background-color: #fff;
	border-radius: 6px;
	border-top: 4px solid var(--brand-red);
	max-width: 480px;
	width: 90%;
	max-height: 85vh;
	overflow-y: auto;
	padding: 20px 24px;
	box-shadow: 0 10px 30px rgba(0,0,0,0.3);
}
body.modal-open {
	overflow: hidden;
}
.modal-close-btn {
	background: none !important;
	color: var(--brand-black) !important;
	float: right;
	font-size: 20px;
	line-height: 1;
	padding: 4px 8px !important;
	cursor: pointer;
}

/* Zone de contenu chargée dynamiquement (fiches produit) : évite un saut
   visuel trop brutal lors du remplacement du contenu par htmx. */
.htmx-swapping {
	opacity: 0.4;
	transition: opacity .1s ease;
}

/* ------------------------------------------------------------------------
   QR code (fiches Outillage/Consommable)
------------------------------------------------------------------------- */
.qrcode-img {
	display: block;
	margin: 0 auto;
	width: 160px;
	height: 160px;
	max-width: 100%;
}

/* ------------------------------------------------------------------------
   Tableaux de détail (fiches Outillage/Vehicules/Consommable/Approvisionnement).
   Auparavant ce bloc était dupliqué en dur dans chaque page générée.
------------------------------------------------------------------------- */
.tg {
	border-collapse: separate;
	border-spacing: 0;
	width: 60%;
	margin: 12px auto;
	border-radius: 6px;
	overflow: hidden;
	box-shadow: 0 1px 4px rgba(0,0,0,0.12);
}
@media (max-width: 900px) {
	.tg { width: 95%; }
}
@media (max-width: 600px) {
	/* Certains tableaux (fiche véhicule) ont 5-6 colonnes : impossible de
	   toutes les afficher sur un écran de téléphone sans les rendre
	   illisibles. On les laisse défiler horizontalement à l'intérieur du
	   tableau plutôt que de casser la mise en page de toute la page. */
	.tg {
		display: block;
		overflow-x: auto;
		-webkit-overflow-scrolling: touch;
		width: 100%;
	}
	.tg tr {
		display: table-row;
	}
	.tg th, .tg td {
		white-space: nowrap;
	}
}
.tg td {
	font-family: Arial, sans-serif;
	font-size: 14px;
	padding: 10px 8px;
	border-bottom: 1px solid #e2e2e2;
	overflow: hidden;
	word-break: normal;
}
.tg th {
	font-family: Arial, sans-serif;
	font-size: 14px;
	font-weight: normal;
	padding: 10px 8px;
	border-bottom: 1px solid #e2e2e2;
	overflow: hidden;
	word-break: normal;
}
.tg .tg-0pky {
	border-color: inherit;
	text-align: left;
	vertical-align: center;
}
.tg .tg-head {
	text-align: center;
	vertical-align: center;
	background-color: var(--brand-black);
	color: white;
	border-bottom: none;
}
.tg .tg-0lax {
	text-align: center;
	vertical-align: center;
	background-color: #fff;
}
.tg .tg-0lex {
	text-align: center;
	vertical-align: center;
	background-color: #fafafa;
}
.tg tr:hover .tg-0lax,
.tg tr:hover .tg-0lex {
	background-color: var(--brand-red-light);
}
.tg .tg-0lax a, .tg .tg-0lex a {
	text-decoration: none;
	color: inherit;
}

/* Tableaux "fiche détail" (une ligne d'étiquettes suivie d'une ligne de
   valeurs, répété pour chaque section : Outillage/Consommable/Vehicules).
   Les deux lignes utilisent la même classe tg-0lax dans le HTML généré ; on
   les distingue ici uniquement par leur position (impaire = étiquettes,
   paire = valeurs) pour qu'on voie clairement quoi est un intitulé et quoi
   est une donnée — sans toucher au code PHP qui génère ces tableaux. */
.tg-detail tr:nth-child(odd) th {
	background-color: var(--brand-black) !important;
	color: #fff !important;
}
.tg-detail tr:nth-child(even) th {
	background-color: var(--brand-red-light) !important;
	color: var(--text-color) !important;
	font-weight: 600;
}