*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
:root {
	--bleu_fonce:	#1a3a5c;
	--azer:      	#4eb1c8;
	--azer_fonce:  	#3a8fa3;
	--azer_clair:  	#e8f6fa;
	--blanc:       	#ffffff;
	--gris_clair:  	#f4f6f8;
	--gris_moyen:   #c8d5e0;
	--gris_texte:   #5a6a7a;
	--vert_valide:  #2e7d32;
	--orange:		#ff4000;
	--valide:		#33eb48;
	--alerte:		#eba433;
	--neutre:		#95a5a6;
	--alarme:		#f00729;
	--rouge_pastel:	#f54e67;
	--actif:		#0000ff;
	--vert_fond:	#e1f5ee;
	--vert_text:	#085041;
	--rouge_fond:   #FCEBEB;
	--rouge_text:	#791F1F;
	--orange_fond:	#FCC6BB;
	--orange_texte:	#F54927;

	--police_libelle:'Trebuchet MS','Arial', sans-serif;
	--police_donnee:'Verdana','Georgia', sans-serif;
	
	--fiche_arrondi: 12px;
	--badge_arrondi: 20px;
	--btn_arrondi: 	4px;
}
html { overflow-x: clip;scroll-behavior: smooth; scroll-padding-top: 10px; }
body { overflow-x: clip;font-family: var(--police_libelle); color: var(--gris_texte); background: #f4f7f5; font-size: 15px; line-height: 1.75; }
::placeholder {	font-style: italic;color:var(--gris_texte);}

/* Formulaire de connexion */
.connexion { max-width: 1100px;margin: 0 auto;padding: 2rem 5rem; background: var(--gris_clair);}
.logo { display: flex; align-items: center; gap: .8rem; padding: 0;  }
.logo .image { display: flex; align-items: center;}
.logo .image img { width: 50px; height: 50px;}
.logo .titre { font-family: var(--police_titre); font-weight: 700; font-size: 1.25rem; color: var(--bleu_fonce); letter-spacing: .5px; padding: 0 1rem;}
.logo .titre span { display: block; font-size: .5rem; font-weight: 400; color: var(--gris_texte); letter-spacing: .08em; text-transform: uppercase; }
.logo a { display: flex; align-items: center; padding: .2rem; margin-top: 0.5rem;  text-decoration: none; font-size: .87rem; font-weight: 600; }

.connexion h2 { display: inline-block; background: var(--azer_clair); color: var(--azer); border-left: 3px solid var(--azer); padding: .2rem .8rem; font-size: .78rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; margin-bottom: .8rem; }
.connexion .formulaire { background: white; border: 1px solid var(--gris_moyen); border-radius: 8px; padding: 2.2rem; box-shadow: 0 4px 20px rgba(0,0,0,0.06); }

.connexion .formulaire .champs { margin-bottom: 1.2rem; display: flex }
.connexion .formulaire .champs label { width: 150px; font-size: .82rem; font-weight: 700; color: var(--bleu_fonce); letter-spacing: .04em; text-transform: uppercase; margin-bottom: .45rem; }
.connexion .formulaire .champs label .required { color: var(--orange); margin-left: 2px; vertical-align: super; font-weight:400;}
.connexion .formulaire .champs input,
.connexion .formulaire .champs select,
.connexion .formulaire .champs textarea {
  flex:1;
  font-family: var(--police_donnee);
  padding: .65rem .9rem;
  border: 1px solid var(--gris_moyen);
  border-radius: var(--btn_arrondi);
  font-size: .92rem;
  color: var(--gris_texte);
  background: var(--blanc);
  transition: border-color .2s, box-shadow .2s;
  outline: none;
  appearance: none;
}
.connexion .formulaire .champs input:focus,
.connexion .formulaire .champs select:focus,
.connexion .formulaire .champs textarea:focus {
  border-color: var(--azer);
  box-shadow: 0 0 0 3px rgba(78,177,200,0.13);
}
.connexion .formulaire .champs textarea { resize: vertical; min-height: 130px; }
.connexion .formulaire .champs select { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%232162a0' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right .9rem center; padding-right: 2.5rem; cursor: pointer; }
.connexion .formulaire .coche {text-align: center;font-style: italic;font-size:.75rem;}
.connexion .formulaire .erreur {
	min-height: 28px;
	text-align: center;
	visibility: hidden;
}
.connexion .formulaire .erreur.show {
	visibility: visible;
	background: var(--rouge_fond);
	border: 1px solid var(--alarme);
	padding: 6px 10px;
	border-radius: var(--btn_arrondi);
	color: var(--rouge_text);
	font-weight: 600;
}
.connexion .formulaire .bouton {display: flex;margin-top: 1rem;justify-content: flex-end;}
.connexion .formulaire .bouton button { align-items: center; gap: .6rem; background: var(--azer); color: white; border: none; padding: .8rem 2rem; margin: 0;border-radius: var(--btn_arrondi);  font-size: .95rem; font-weight: 600;cursor: pointer; letter-spacing: .03em;transition: background .2s, transform .2s; flex-shrink: 0;}
.connexion .formulaire .bouton button:hover { background: var(--azer_fonce); transform: translateY(-1px); }

/* Barre de navigation */
nav { background: var(--azer); border-bottom: 3px solid var(--azer_fonce); padding: 0 2vw; position: sticky; top: 0; z-index: 100; box-shadow: 0 2px 8px rgba(0,0,0,0.08); font-family: var(--police_systeme);}
.barre_navi {  color: rgba(255,255,255,.9); padding: 1.1rem 1.5rem; display: flex; align-items: center;  justify-content: space-between;}
.barre_navi .bloc_info_droit {display: flex; align-items: center; gap: 15px;}
.barre_navi .bloc_info_droit .logo img { width: 50px; height: 50px;}
.barre_navi .utilisateur h1 { font-size: 1.4rem; font-weight: 700; margin: 0; }
.barre_navi .utilisateur .badge .badge_acces { background: rgba(255,255,255,.15); border: 1px solid rgba(255,255,255,.3); font-size: .72rem; padding: 3px 10px; border-radius: var(--badge_arrondi);opacity: .75; }
.barre_navi .utilisateur .badge .badge_url   { background: var(--azer_fonce);  font-size: .72rem;  padding: 3px 8px; border-radius: var(--badge_arrondi);  margin-left: 8px;opacity: .75; }
.barre_navi .bloc_lien {display: flex; align-items: center; list-style: none; gap: 20px; margin: 0; padding: 0;}
.barre_navi .bloc_lien a {display:block;min-width: 230px;text-align: center;color:var(--azer_clair);border: 1px solid var(--blanc);border-radius:var(--btn_arrondi);padding :5px;text-decoration:none;transition: transform .2s, box-shadow .2s;}
.barre_navi .bloc_lien a:hover {color:var(--azer_fonce);background-color: var(--azer_clair);border: 1px solid var(--azer_fonce);transform: translateY(-2px); box-shadow: 2px 2px 5px rgba(0,0,0,0.4);}
.hamburger { display: none; }

.titre h1 {color:var(--azer);letter-spacing: .03em;font-weight: 600; text-align:center;}

/* ── Badges compteurs ── */
.badge_compteur  { display: flex;flex-direction: column;align-items: left;justify-content: center;height: 100%;border-radius: 10px; padding: .9rem 1.2rem; color: var(--blanc); font-weight: 600; background:var(--azer); }
.valide { background: var(--valide); }
.alerte { background: var(--alerte); }
.alarme { background: var(--alarme); }
.neutre  { background: var(--neutre); }
.badge_compteur .nombre { font-size: 2rem; line-height: 1; }
.badge_compteur .libelle { font-size: .78rem; text-transform: uppercase; letter-spacing: .04em; opacity: .85; }


.barre_filtre {  border-radius: 10px; padding: 1rem 1.2rem; box-shadow: 0 1px 6px rgba(0,0,0,.07); }
.barre_filtre button {color:var(--blanc);background-color: var(--azer);}
.barre_filtre button:hover {color:var(--blanc);background-color: var(--azer_fonce);}

.table_wrap { border-radius: 10px; box-shadow: 0 1px 6px rgba(0,0,0,.07); overflow: hidden; }
.table_wrap thead th{ background: var(--azer); color: var(--blanc); font-size: .8rem; text-transform: uppercase; letter-spacing: .04em; vertical-align: middle; white-space: nowrap; user-select: none; }
.table_wrap thead th[data-col] { cursor: pointer; }
.table_wrap thead th[data-col]:hover { background: var(--azer_fonce); }
.table_wrap thead th[data-col] .sort-icon { opacity: .45; margin-left: 4px; font-size: .7rem; }
.table_wrap thead th[data-col] .sorted .sort-icon { opacity: 1; }
.table_wrap td { vertical-align: middle; font-size: .88rem; }
.table_wrap th button {font-weight:550;font-size: .88rem;color:var(--azer_clair);background-color: var(--azer);border: 1px solid var(--blanc);border-radius:var(--btn_arrondi);padding :5px;transition: transform .2s, box-shadow .2s;}
.table_wrap th button:hover {color:var(--azer_fonce);background-color: var(--azer_clair);border: 1px solid var(--azer_fonce);transform: translateY(-2px); box-shadow: 2px 2px 5px rgba(0,0,0,0.4);}
.table_wrap td button,
.modal-footer button { color: var(--azer); background-color:var(--azer_clair);border: 1px solid var(--azer);border-radius:var(--btn_arrondi);font-size: 0.875rem;padding: 0.15rem 0.5rem;font-family: var(--police_libelle);transition: transform .2s, box-shadow .2s;}
.table_wrap td button:hover,
.modal-footer button:hover  { color: var(--azer_clair); border-color:var(--azer_fonce);background-color:var(--azer);border: 1px solid var(--azer_fonce);transform: translateY(-2px); box-shadow: 2px 2px 5px rgba(0,0,0,0.4);}
.table_wrap thead .titre_liste {color:var(--gris_texte);background-color:var(--gris_clair);text-transform: none;font-size: .75rem;font-weight: 600;font-style:italic;}
.table_wrap tbody tr.col_donnee { font-family: var(--police_donnee); cursor:pointer;}
.table_wrap tbody tr td.donnee_importante { font-weight:550; }
.table_wrap tbody tr td.donnee_discrete { color:var(--gris_texte); }

.detail_libelle { font-weight: 600; color: var(--azer); font-size: .8rem; text-transform: uppercase; }
.detail_valeur   { margin-bottom: .7rem; font-size: .9rem; font-family: var(--police_donnee);}
.nb_ligne { font-size: .85rem; color: #6c757d; }
.detail_invisible {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}
/* Couleur de signalement des disconnecteurs */
.badge_etat_disco {min-width:120px;text-align:center;font-weight:600;border-radius: var(--badge_arrondi);display:inline-block;padding:0.1rem 0.5rem;color:var(--blanc);}
.a_controler {background-color:var(--alarme);border: 3px solid var(--alarme);}
.controle_ok {background-color:var(--valide);border: 3px solid var(--valide);}		
.prochainement {background-color:var(--alerte);border: 3px solid var(--valide);}
/* On utilise les styles des états des disco pour les styles des boutons de filtres de la carte et là, on ajoute le style tous pour le bouton */
.tous {background-color:var(--azer);border: 3px solid var(--azer);}

#carte,#carteTous { height: 100%; width: 100%; min-height: 400px;}
#carteModaleTous .modal-body {display: flex; flex-direction: column; height: 100%;}
#filtresCarte {margin-bottom: 8px; display: flex; gap: 8px; flex-wrap: wrap;}
#filtresCarte button{font-size:.8rem;border-radius:var(--btn_arrondi);padding:0.15rem 0.5rem;color:var(--blanc);}
#filtresCarte .actif {outline: 3px solid var(--actif);font-weight: 600;}		/* Le bouton sélectionné s'affiche entouré d'un cadre de couleur */
#carte .adresse_etat,#carteTous .adresse_etat	{text-align:center;}	/* Centre l'adresse et l'état dans le tooltip de la carte */

.modal-header { background: var(--azer); color: var(--blanc); }
.modal-header .btn-close { filter: invert(1); }
.modal-footer .btn-secondary { color:var(--azer_clair); background-color:var(--azer);border-color:var(--azer_fonce);}
.modal-footer .btn-secondary:hover { color:var(--azer_clair); background-color:var(--azer_fonce);border-color:var(--azer);}

/* Fiche disco */
.fiche {
	max-width: 1100px;
	margin: 0 auto;
}
.fiche .cadre {
	background: var(--blanc);
	border: 1px solid var(--gris_moyen);
	border-radius: var(--fiche_arrondi);
	margin-bottom: 1rem;
	box-shadow: 0 6px 20px rgba(0,0,0,0.4);
}
.fiche .titre {
	padding:.8rem;
	border-top-right-radius:var(--fiche_arrondi);
	border-top-left-radius:var(--fiche_arrondi);
	background-color:var(--azer_fonce);
	color:var(--azer_clair);
	font-weight:600;
}
.fiche .corps {
	padding:1rem;
}
/* ── Badges Oui / Non ── */
.badge_perso {
	display: inline-block;
	line-height:1.6;
	padding: 2px 10px;
	border-radius: var(--badge_arrondi);
	font-size: .8rem;
	font-weight: 500;
	font-family: var(--police_donnee);
}
.badge_oui     { background: var(--vert_fond);  color: var(--vert_text); }
.badge_non      { background: var(--rouge_fond);   color: var(--rouge_text); }
.badge_alerte    { background: var(--orange_fond); color: var(--orange_texte); }

@media (max-width: 480px) {	/* Mobile en mode portrait */
	.col_cache_xs,.col_cache_md { display: none; }
}
@media (max-width: 767px) {	/* Mobile en mode paysage */
	.col_cache_md { display: none; }
	.hamburger {
		display: flex;
		flex-direction: column;
		justify-content: space-between;
		width: 28px;
		height: 20px;
		background: none;
		border: none;
		cursor: pointer;
		padding: 0;
		margin-top: 15px;
	}
	.hamburger span {
		display: block;
		height: 3px;
		background: var(--azer_fonce);
		border-radius: 2px;
		transition: transform .25s, opacity .25s;
	}
	.hamburger.actif span:nth-child(1) { transform: translateY(8.75px) rotate(45deg); }
	.hamburger.actif span:nth-child(2) { opacity: 0; }
	.hamburger.actif span:nth-child(3) { transform: translateY(-8.75px) rotate(-45deg); }
	.champs {
		flex-direction: column;   /* label au-dessus de l’input */
		align-items: flex-start;
	}
	.champs label {
		width: auto;              /* plus de largeur fixe */
		margin-bottom: 6px;       /* petit espace sous le label */
	}
	.champs input,
	.champs select,
	.champs textarea {
		width: 100%;              /* input prend toute la largeur */
	}
	.connexion .formulaire {padding: .5rem;}
	.connexion .formulaire .bouton { width: 100%; justify-content: center; }

	.barre_navi .bloc_lien { display: none; }
	.barre_navi .bloc_lien.ouvert {
		display: flex;
		flex-direction: column;
		align-items: stretch; /* ← les enfants prennent toute la largeur */
		position: absolute;
		top: 100%;
		left: 0;
		right: 0;
		background: var(--azer);
		border-bottom: 3px solid var(--azer_fonce);
		z-index: 99;
		padding: .5rem 0;
	}
	.barre_navi .bloc_lien.ouvert a {
		background: var(--azer_fonce);
		padding: .8rem 1.5rem;
		font-size: 1rem;
		width: 90%;
		margin: 0 auto;
	}
	.barre_navi .utilisateur .badge .badge_url {display : none;}		/* Badge url qui disparait en mobile */
	.barre_navi .utilisateur h1 {font-size:1rem;}	/* Nom utilisateur plus petit */
}
@media (min-width: 768px) and (max-width: 1150px) {
  .barre_navi .utilisateur .badge {
	  display: flex;
	  flex-wrap: wrap;
  }
  .barre_navi .utilisateur .badge .badge_url {margin-left:0px;}
  .barre_navi .bloc_lien {
    flex-wrap: wrap;      /* permet de passer sur 2 lignes */
    justify-content: right;
  }
}