/* 
	Plan (pseudocode détaillé en français) :
	- Détecter petits écrans via media queries (max-width: 900px, 600px, 400px).
	- Réorganiser les conteneurs en colonne : .plan-container => flex-direction: column.
	- Rendre les blocs latéraux non flottants : .copro-container, .dash-container => width: 100%; float: none.
	- Adapter les largeurs : .container max-width -> 95% sur petits écrans, padding réduit.
	- Boutons et navs : .nav_button, .nav_button_fin => display:block; width:100%; margin-bottom pour empiler.
	- Tables : permettre le scroll horizontal : table { display:block; overflow-x:auto; width:100%; } et réduire padding des td.
	- Inputs/textarea : width:100% (déjà proche) et padding réduit.
	- Ajuster tailles de police (h1, h2, .icone) pour petits écrans.
	- Ajuster .dash-graph hauteur et .dash-graph-barre flex-basis pour conserver lisibilité.
	- Garder les couleurs et variables existantes ; ne pas casser autres règles.
	*/

	/* Palette et variables globales */
	:root{
		/* Palette verte légère -> foncée */
		--green-100: #dff3dd; /* très clair pour fonds */
		--green-200: #c5e6c5; /* utilisé déjà */
		--green-300: #86c988; /* action légère */
		--green-400: #4a7a2a; /* action plus foncée pour hover */
		--green-500: #356021; /* couleur d'accent foncée pour contraste */
		--btn-text: #ffffff;
		--btn-border: rgba(24,80,28,0.9);
		--btn-shadow: 0 6px 14px rgba(31,122,8,0.12);
		--btn-shadow-strong: 0 8px 18px rgba(20,80,20,0.18);
		--btn-radius: 8px;
		--transition: 180ms ease;
	}

	/* --- Document existant adapté --- */
	body {
		font-family: Arial, sans-serif;
		background-color: #f4f4f4;
		margin: 0;
		padding: 0;
	}

	.container {
		max-width: 75%;
		height: auto;
		margin: 50px auto;
		background-color: #eeeeee;
		padding: 20px;
		border-radius: 8px;
		box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
	}

	.icone {
		font-family: 'Mistral', 'Arial', sans-serif;
		/* Choisissez une police stylisée si vous préférez */
		font-size: 25px;
		color: rgb(31, 122, 8);
		text-shadow: 3px 3px 3px rgb(114, 155, 103);
		/* Ajout de l'effet satin blanc */
		display: inline-block;
		transform: rotate(-5deg);
		/* Légère rotation pour un style unique */
		position: relative;
	}

	.telecommande-container {
		border: 1px solid #ccc;
		padding: 10px;
		margin-bottom: 20px;
		border-radius: 5px;
		position: relative;
		background-color: #d0e9d3;
	}

	.copro-container {
		border: 1px solid #ccc;
		width: 30%;
		float: left;
		padding: 10px;
		margin-bottom: 20px;
		border-radius: 5px;
		position: relative;
		background-color: #d0e9d3;
	}

	.plan-container {
		display: flex;
		flex-wrap: wrap; /* Permet de passer à la ligne si nécessaire */
		max-width: 95%;
		margin: 50px auto;
		background-color: #d0e9d3;
		padding: 20px;
		border-radius: 8px;
		box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
	}

	.plan-etage-container {
		flex: 1;
		color: #000000;
		border: 1px solid #ccc;
		width: 98%;
		padding: 1%;
		margin-bottom: 2%;
		border-radius: 5px;
		position: relative;
		background-color: #d0e9d3;
	}

	.telecommande-container label {
		display: block;
		margin-bottom: 10px;
	}

	.dash-container {
		float: auto;
		width: auto;
		height: auto;
		border: 1px solid #ccc;
		padding: 10px;
		margin-bottom: 20px;
		margin-left: 10px;
		border-radius: 5px;
		background-color: #d0e9d3;
	}

	h2 {
		text-align: center;
		color: #3A5335;
		/* Vert olive foncé pour une apparence sobre */
		text-shadow: 3px 3px 6px rgba(0, 0, 0, 0.3);
		/* Ombre plus grande et plus sombre */
		font-family: 'Roboto', sans-serif;
		background: linear-gradient(45deg, #556B2F, #6B8E23);
		/* Vert olive et vert olive pâle */
		-webkit-background-clip: text;
		color: transparent;
		padding-left: 10px;
	}

	h1 {
		text-align: left;
		color: #3A5335;
		/* Vert olive foncé pour une apparence sobre */
		text-shadow: 3px 3px 6px rgba(0, 0, 0, 0.3);
		/* Ombre plus grande et plus sombre */
		font-family: 'Roboto', sans-serif;
		background: linear-gradient(45deg, #556B2F, #6B8E23);
		/* Vert olive et vert olive pâle */
		-webkit-background-clip: text;
		color: transparent;
		padding-left: 10px;
	}

	a {
		text-decoration: none;
		color: rgb(255, 255, 255);
	}

	p.gras {
		font-weight: bold;
		text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5);
	}

	.plan {
		border: #333 solid 1px;
		color: #000000;
	}

	label {
		display: block;
		margin-bottom: 10px;
		color: #555;
	}

	input[type="text"],
	select,
	input[type="file"] {
		width: calc(100% - 24px);
		padding: 10px;
		margin-bottom: 20px;
		border: 1px solid #ccc;
		border-radius: 5px;
		box-sizing: border-box;
		font-size: 16px;
		display: inline-block;
	}

	input[type="radio"] {
		margin-right: 5px;
		vertical-align: middle;
	}

	.dash-graph {
		display: flex;
		justify-content: space-around;
		align-items: flex-end;
		border: #faf9f9 solid 1px;
		box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
		border-radius: 5px;
		width: 100%;
		height: 25%;
	}

	.dash-graph-barre {
		display: flex;
		justify-content: center;
		/* Centre le contenu horizontalement */
		align-items: center;
		/* Centre le contenu verticalement */
		width: 10%;
		text-align: center;
		transition: background-color 3s;
		background-color: #abdb9f;
		border: 1px solid #9fdbb1;
		box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
		font-size: 75%;
	}

	.dash-container label {
		display: block;
		margin-bottom: 10px;
	}

	/* Boutons standards */
	input[type="submit"] {
		background-color: #4CAF50;
		color: white;
		padding: 14px 20px;
		margin: 8px 0;
		border: none;
		border-radius: 4px;
		cursor: pointer;
		width: 100%;
		font-size: 16px;
		transition: background-color var(--transition), transform var(--transition);
	}

	input[type="submit"]:hover {
		background-color: #45a049;
	}

	input[type="submit_nv"] {
		background-color: #4CAF50;
		width: 8%;
		text-align: center;
		color: rgb(255, 0, 0);
		padding: 14px 20px;
		margin: 8px 0;
		border: none;
		border-radius: 4px;
		cursor: pointer;
		width: 100%;
		font-size: 16px;
	}

	input[type="submit_nv"]:hover {
		background-color: #45a049;
	}

	table {
		border-collapse: collapse;
		width: 100%;
	}

	/* rendre les tableaux défilables sur petits écrans */
	table {
		display: table;
		max-width: 100%;
	}

	/* structure des cellules */
	td {
		padding: 10px;
		border-bottom: 1px solid #dddcdc;
		text-align: center;
	}
	tr {
		padding: 10px;
		border-bottom: 1px solid #dddcdc;
		text-align: center;
	}

	table.plan {
		border-collapse: collapse;
		max-width: 100%;
	}

	table.plan td {
		padding: 10px;
		border: 1px solid #5c815d;
		background-color: #c5e6c5;
		text-align: center;
	}

	table.residentsTable tr {
		text-align: left;
	}

	table.plan td.v {
		background-color: transparent;
		/* Définir la couleur de fond comme transparent */
	}

	input[type="radio"] {
		vertical-align: middle;
	}

	textarea {
		width: 80%;
		padding: 10px;
		border: 1px solid #ccc;
		border-radius: 10px;
		resize: vertical;
	}

	/* Toggle */
	.toggle-button {
		width: 75px;
		height: 20px;
		border: none;
		border-radius: 20px;
		background-color: #ccc;
		cursor: pointer;
		display: flex;
		justify-content: center;
		align-items: center;
		transition: background-color 0.3s;
	}

	.toggle-button.active {
		background-color: #4CAF50;
	}

	.toggle-button.active::after {
		content: 'Actif';
		color: white;
	}

	.toggle-button::after {
		content: attr(data-text);
		color: #333;
	}

	/* Nav tabs */
	.nav-tabs {
		border-bottom: none;
	}

	.nav-tabs .nav-link {
		border: 1px solid transparent;
		border-top-left-radius: 0.25rem;
		border-top-right-radius: 0.25rem;
	}

	.nav-tabs .nav-link.active {
		border-color: #dee2e6 #dee2e6 #fff;
	}

	.nav-tabs .nav-item.show .nav-link,
	.nav-tabs .nav-link.active {
		border-color: transparent;
	}

	/* Boutons de navigation - variables redéfinies */
	:root{
	  --btn-bg: var(--green-300, #86c988);
	  --btn-bg-hover: var(--green-400, #4a7a2a);
	  --btn-text-alt: rgba(255,255,255,0.95);
	  --btn-shadow-hover: 0 8px 18px rgba(20,80,20,0.18);
	  --btn-focus-ring: 0 0 0 4px rgba(74,122,42,0.12);
	}

	/* Boutons de navigation : correction et amélioration de la visibilité */
	.nav_button,
	.nav_button_fin {
	  display: inline-block;
	  padding: 0.65em 1.25em;
	  text-decoration: none;
	  background: var(--btn-bg);
	  color: var(--btn-text, #ffffff);
	  border: 1px solid var(--btn-border, rgba(24,80,28,0.9));
	  border-radius: var(--btn-radius, 8px);
	  cursor: pointer;
	  transition: transform var(--transition, 180ms ease), box-shadow var(--transition, 180ms ease), background-color var(--transition, 180ms ease);
	  box-shadow: var(--btn-shadow, 0 6px 14px rgba(31,122,8,0.12));
	  font-weight: 600; /* meilleure lisibilité */
	  -webkit-font-smoothing: antialiased;
	  -moz-osx-font-smoothing: grayscale;
	  vertical-align: middle;
	  line-height: 1;
	}

	/* Hover : contraste augmenté et retour visuel */
	.nav_button:hover,
	.nav_button_fin:hover {
	  background: var(--btn-bg-hover);
	  color: var(--btn-text, #ffffff);
	  box-shadow: var(--btn-shadow-hover);
	  transform: translateY(-2px);
	}

	/* Focus : anneau visible pour accessibilité clavier */
	.nav_button:focus,
	.nav_button_fin:focus {
	  outline: none;
	  box-shadow: var(--btn-shadow-hover), var(--btn-focus-ring);
	  border-color: rgba(53,96,33,0.9);
	  transform: translateY(-1px);
	}

	/* Active : effet d'enfoncement */
	.nav_button:active,
	.nav_button_fin:active {
	  transform: translateY(0);
	  box-shadow: var(--btn-shadow, 0 6px 14px rgba(31,122,8,0.12));
	}

	/* Variante compacte pour `.nav_button_fin` */
	.nav_button_fin {
	  padding: 0.35em 0.95em;
	  font-size: 0.9rem;
	  color: var(--btn-text-alt);
	  background: linear-gradient(180deg, var(--btn-bg), color-mix(in srgb, var(--btn-bg) 80%, #000 20%));
	}

	/* Optionnel : mettre en évidence la variante sélectionnée si nécessaire */
	.nav_button_sel,
	.nav_button_app_sel {
	  background: var(--btn-bg-hover);
	  color: var(--btn-text, #ffffff);
	  box-shadow: var(--btn-shadow-hover);
	  font-weight: 700;
	}

	/*gestion des ongltes des box par lot*/
	.box {
		width: 100%;
		display: none;
		margin-top: 10px;
	}

	.box:target {
		display: block;
	}

	.button_lot {
		padding: 10px 20px;
		background-color: #d0e9d3;
		color: white;
		border: none;
		cursor: pointer;
		margin-top: 10px;
		border-radius: 8px;
		box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
	}

	/* plan copro res */
	.plan_copro_res {
		padding: 1px 20px;
		text-decoration: none;
		background-color: #86c988;
		color: rgb(0, 0, 0);
		border: solid 1px #556b2f6c;
		border-radius: 5px;
		transition: background-color 0.3s, color 0.3s, box-shadow 0.3s;
		box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
		font-size: 75%;
	}

	/* hover compact */
	.nav_button_fin:hover {
		font-size: 75%;
		background-color: #508d52;
		color: #fff;
		box-shadow: 0 8px 16px rgba(0, 0, 0, 0.1);
	}

	/* nav button selected */
	.nav_button_sel {
		padding: 10px 20px;
		text-decoration: none;
		background-color: #508d52;
		color: white;
		border: none;
		border-radius: 5px;
		cursor: pointer;
		transition: background-color 0.3s, color 0.3s, box-shadow 0.3s;
		box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
	}

	.nav_button_app {
		text-decoration: none;
		background-color: #8ac08c;
		color: white;
		border: none;
		border-radius: 5px;
		cursor: pointer;
		transition: background-color 0.3s, color 0.3s, box-shadow 0.3s;
		box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
	}

	.nav_button_app_sel {
		text-decoration: none;
		background-color: #508d52;
		color: white;
		border: none;
		border-radius: 5px;
		cursor: pointer;
		transition: background-color 0.3s, color 0.3s, box-shadow 0.3s;
		box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
	}

	/* --- Règles de responsivité pour petits écrans --- */

	/* Tableaux et conteneurs défilants si nécessaire */
	.table-responsive {
		display: block;
		width: 100%;
		overflow-x: auto;
		-webkit-overflow-scrolling: touch;
	}

	/* Breakpoint : tablettes / petits écrans larges */
	@media (max-width: 900px) {
		.container {
			max-width: 95%;
			margin: 20px auto;
			padding: 16px;
		}

		.copro-container,
		.dash-container {
			width: 100% !important;
			float: none !important;
			margin-left: 0;
		}

		.plan-container {
			flex-direction: column;
			padding: 16px;
			margin: 20px auto;
		}

		.plan-etage-container {
			width: 100% !important;
			padding: 10px;
		}

		.dash-graph {
			flex-wrap: wrap;
			height: auto;
			padding: 10px;
		}

		.dash-graph-barre {
			width: 18%;
			margin-bottom: 8px;
			font-size: 85%;
		}

		textarea {
			width: 100%;
		}

		/* Empiler les boutons de navigation */
		.nav_button,
		.nav_button_fin {
			display: block;
			width: 100%;
			margin: 8px 0;
		}

		.button_lot {
			width: 100%;
		}

		/* Formulaires : ajustement des champs */
		input[type="text"],
		select,
		input[type="file"] {
			width: calc(100% - 20px);
			padding: 8px;
		}

		/* Titres plus petits */
		h1 { font-size: 1.4rem; }
		h2 { font-size: 1.1rem; }
		.icone { font-size: 20px; }
	}

	/* Breakpoint : smartphones */
	@media (max-width: 600px) {
		.container {
			margin: 12px auto;
			padding: 12px;
		}

		.dash-graph-barre {
			width: 22%;
			font-size: 85%;
		}

		.nav_button,
		.nav_button_fin {
			padding: 0.6em 0.9em;
			font-size: 0.95rem;
		}

		.plan-etage-container {
			padding: 8px;
		}

		table.plan td,
		td {
			padding: 6px;
			font-size: 14px;
		}

		textarea { width: 100%; }

		/* rendre tout tableau scrollable horizontalement */
		table, .table-responsive table {
			display: block;
			width: 100%;
			overflow-x: auto;
			-webkit-overflow-scrolling: touch;
		}

		/* inputs et boutons plus compacts */
		input[type="submit"], input[type="submit_nv"], .button_lot {
			padding: 10px;
			font-size: 15px;
		}
	}

	/* Très petits écrans */
	@media (max-width: 400px) {
		.icone { font-size: 18px; transform: rotate(-4deg); }
		h1 { font-size: 1.2rem; padding-left: 6px; }
		h2 { font-size: 1rem; padding-left: 6px; }
		.nav_button, .nav_button_fin { font-size: 0.95rem; padding: 0.5em 0.75em; }
		.dash-graph-barre { width: 28%; }
		table.plan td, td { padding: 4px; font-size: 13px; }
	}