@media print {
  body * {
    visibility: hidden;
  }

  #contenuPDF, #contenuPDF * {
    visibility: visible;
  }

  #contenuPDF {
    position: absolute;
    left: 0;
    top: 0;
  }

  .no-print {
    display: none !important;
  }
}


/* ========== GLOBAL ========= */
* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}
body {
  font-family: 'Segoe UI', sans-serif;
  background-color: #ffffff;
  color: #1e5a7e;
  line-height: 1.6;
}

/* ========== ^userTools ========= */
.userTools{
	background-color : #f2f3f3;
	width: 98%;
	padding-bottom : -20px;
	margin : 0px;
}
/* ========== user ========= */
.user{
	background-color : #f2f3f3;
	width: 100%;
	text-align:right;
}

/* ========== ^MAP ========= */
   #map {  }
    .chart-container { width: 48%; display: inline-block; vertical-align: top; }
    .leaflet-control-attribution {
        font-size: 8px !important;
        opacity: 0.3;
    }


/* ========== HEADER ========= */
.header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background-color: white;
  padding: 5px 20px;
  border-bottom: 1px solid #ccc;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
}
.logo-container {
  display: flex;
  align-items: center;
}
.logo {
  height: 150px;
  width: auto;
}
nav ul {
  list-style: none;
  display: flex;
  gap: 1rem;
}
nav a {
  text-decoration: none;
  color: #1e5a7e;
}
nav a:hover {
  text-decoration: underline;
}
.current-page {
  font-weight: bold;
  color: #1e5a7e;
  cursor: default;
  text-decoration: underline;
  font-size:22px;
}

/* ========== MAIN CONTENT ========= */
.content {
  padding: 2rem;
}
h2 {
  text-align: left;
  font-size: 1.5rem;
  margin-bottom: 1.5rem;
}

.titre_bloc {
  width: 100%;                 /* Prend toute la largeur */
  background: transparent;     /* Fond transparent */
  font-size: 20px;             /* Taille de police */
  border: none;                /* Supprime les bordures existantes éventuelles */
  border-bottom: 2px solid #ccc; /* Ligne grise en bas */
  padding-bottom: 4px;         /* Espace entre le texte et la bordure (ajustable) */
  margin-top: 20px;  
  margin-bottom: 10px;         /* Espace en dessous du bloc (facultatif) */
  font-weight: bold;

}

#legendeAltitudes {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  border-top: 2px solid #ccc;
  padding-top: 8px;
  margin-top: 10px;
}

#legendeAltitudes em {
  margin-right: 10px;
  font-style: italic;
}

.legend-item {
  display: flex;
  align-items: center;
  gap: 6px;
}

.legend-color {
  width: 20px;
  height: 20px;
  border: 1px solid #000;
  border-radius: 50%;
}

.legend-label {
  font-size: 14px;
}


/* ========== FOOTER ========= */
footer {
  background-color: #1e5a7e;
  color: #8ca0b8;
  text-align: center;
  padding: 2px;
  font-size: 0.9rem;
  border-top: 1px solid #1a2a40;
}

/* ========== TABLE ========= */
table {
  table-layout: auto;
  border-collapse: collapse;
  margin-top: 1rem;
  background-color: #ffffff;
  color: #1e5a7e;
  border: 1px solid #1a2a40;
  border-radius: 4px;
  overflow: hidden;
}
th, td {
  padding: 0.25rem;
  border: 1px solid #1a2a40;
  text-align: left;
  white-space: nowrap;
}
th {
  background-color: #1e5a7e;
  color: #00b4ff;
}
 table tr:nth-child(even) {
        background-color: #f2f2f2;
    }
tbody tr:hover {
  background-color: #e0f3ff;
  transition: background-color 0.2s;
}

/* ========== FORMULAIRE ========= */
.popup-overlay {
  position: fixed;
  top: 0; left: 0;
  width: 100%; height: 100%;
  background: rgba(0,0,0,0.5);
  z-index: 1000;
}

.popup-content {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  background: white;
  padding: 2em;
  border-radius: 10px;
  width: 300px;
  box-shadow: 0 0 20px rgba(0,0,0,0.3);
}


#formCarte, #formStats, .results {
  display: flex;
  flex-wrap: wrap;
  align-items: center; /* C’est la clé ici */
  gap: 1.5rem;
  justify-content: center;
  padding: 1.5rem 2rem;
  background-color: #eef8ff; 
  border-radius: 12px;
  border: 1px solid #d6e4f0;
}
.results {
	  background-color: #f9fbfd; 
}

/* Fieldset stylisé */
#formCarte fieldset {
  border: 1px solid #1e5a7e;
  border-radius: 10px;
  padding: 1rem;
  min-width: 190px;
  background-color: #ffffff;
}

/* Légende claire et cohérente */
#formCarte legend {
  font-weight: 600;
  color: #1e5a7e;
  font-size: 1rem;
  margin-bottom: 0.8rem;
}

/* Groupe de boutons radios */
#formCarte .radio-group {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  justify-content: center;
}

/* Style des radios et labels */
#formCarte .radio-group label {
  display: flex;
  flex-direction: column;
  align-items: center;
  cursor: pointer;
  font-weight: 500;
  font-size: 0.99rem;
  color: #1e5a7e;
  transition: color 0.2s;
}

#formCarte .radio-group label:hover {
  color: #00b4ff;
}

#formCarte .radio-group input[type="radio"] {
  width: 18px;
  height: 18px;
  margin-bottom: 0.3rem;
  accent-color: #00b4ff;
}

/* Harmonisation des autres inputs/selects */
#formCarte input[type="text"],
#formCarte input[type="datetime-local"],
#formCarte select {
  background-color: #ffffff;
  color: #1e5a7e;
  border: 1px solid #22354d;
  padding: 0.5rem 1rem;
  border-radius: 6px;
  font-size: 0.85rem;
  transition: all 0.2s ease;
  min-width: 190px;
}

/* Bouton "Afficher la carte" */
.bouton-carte {
  background-color: #0d6efd;   /* Bleu Bootstrap */
  color: #fff;                 /* Texte blanc */
  padding: 0.5rem 1rem;        /* Espacement interne */
  font-size: 1rem;             /* Taille du texte */
  border: none;               /* Pas de bordure */
  border-radius: 0.375rem;     /* Coins arrondis */
  cursor: pointer;            /* Curseur main */
  transition: background-color 0.3s ease;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1); /* Ombre légère */
}

.bouton-carte:hover {
  background-color: #0b5ed7; /* Légèrement plus foncé au survol */
}


/* Responsive */
@media (max-width: 768px) {
  #formCarte {
    flex-direction: column;
    align-items: stretch;
  }

  #formCarte fieldset {
    width: 100%;
  }
}



/* v2 */
.form-row {
  display: flex;
  flex-wrap: wrap;
  gap: 4.5rem;
  align-items: flex-start;
  padding: 1rem;
  background-color: #ffffff;
  font-family: sans-serif;
   border-radius: 10px;
  
}

.filter-group {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  min-width: 150px;
  text-transform: uppercase;
}

.filter-group h4 {
  margin: 0;
  padding-bottom: 0.2rem;
  border-bottom: 2px solid #0077b6;
  font-size: 1rem;
  font-weight: bold;
  color: #1d3557;
   
}

.filter-group label {
  margin-top: 0.4rem;
  font-size: 0.90rem;
}

.filter-group select {
  margin-top: 1.4rem; /* Important pour aligner avec les radios */
  padding: 0.3rem;
  font-size: 0.95rem;
  height: 2rem;
  vertical-align: top;
}



/* ========== MESSAGES & INFOS ========= */
#countInfo, #dbCount {
  background-color: #111a2e;
  color: #aac6e3;
  padding: 0.75rem 1rem;
  margin: 1rem 0;
  border-left: 4px solid #00b4ff;
  box-shadow: 0 0 5px rgba(0, 180, 255, 0.3);
  border-radius: 4px;
}

/* ========== LIENS GÉNÉRAUX ========= */
a, .aTd, .aLogin, .aAnchor {
  color: #1e5a7e;
  font-size : 22px;
}
a:hover {
  text-decoration: underline;
}
.aTd{
	font-size : 13px;
	
}
.aPopup{
	font-size : 12px;	
}
.aLogin{
	font-size : 14px;	
}

.aAnchor {
  font-size: 17px;
  text-decoration: none; /* Pas de soulignement par défaut */
  color: inherit; /* Optionnel : garde la couleur du parent */
}

.aAnchor:hover {
  text-decoration: underline; /* Soulignement au survol */
}

.aRetourTop{
	font-size: 15px;
	color:grey;
	 text-decoration: none;
	 padding-left: 10px;
}

/* ========== RESPONSIVE ========= */
@media (max-width: 768px) {
  .header {
    flex-direction: column;
    align-items: flex-start;
  }
  .nav {
    margin-top: 1rem;
  }
  form {
    flex-direction: column;
  }
}

/* ========== CONTENU ========= */
.page-title {
  font-size: 1.5rem;
  font-weight: 700;
  color: #1e5a7e;
  text-align: center;
  margin: 2rem 0 1.5rem;
  position: relative;
}

/* Wrapper principal des graphiques */
.charts-wrapper {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 2rem;
  max-width: 1200px;
  margin: 0 auto;
}

/* Conteneur individuel de chaque graphique */
.chart-container {
  flex: 0 1 45%;
  min-width: 20px;
  max-width: 600px;
  background: white;
  padding: 1.5rem;
  border-radius: 1rem;
  box-shadow: 0 4px 10px rgba(0,0,0,0.1);
  transition: transform 0.2s, box-shadow 0.2s;
}

.chart-container:hover {
  transform: translateY(-5px);
  box-shadow: 0 12px 20px rgba(0, 0, 0, 0.12);
}

/* Titre au-dessus des graphiques */
.chart-title {
  font-size: 1.25rem;
  font-weight: 600;
  text-align: center;
  margin-bottom: 1rem;
  color: #2c3e50;
}

/* Canvas prend toute la largeur dispo */
canvas {
  width: 100% !important;
  height: auto !important;
}

/* Responsive pour les très petits écrans */
@media (max-width: 800px) {
  .chart-container {
    flex: 1 1 100%;
  }
  .chart-title {
    font-size: 1rem;
  }
}

.sous-div {
  clear: both;
}

#communePopup {
  position: fixed;           /* fixe par rapport à la fenêtre */
  top: 50%;                 /* centre vertical */
  left: 50%;                /* centre horizontal */
  transform: translate(-50%, -50%);  /* corrige pour centrer */
  width: 100%;             /* largeur souhaitée */
  max-height: 100%;         /* max hauteur */
  overflow-y: auto;         /* scroll si trop grand */
  background: steel;        /* fond blanc */
  border-radius: 8px;
  box-shadow: 0 2px 10px rgba(0,0,0,0.2);
  padding: 20px;
  z-index: 1000;            /* devant tout */
}

#selectCommunePopupX {
  width: 100%;
}
.popup-overlayX {
  position: fixed;
  top: 0; left: 0; right: 0; bottom: 0;
  background: rgba(0,0,0,0.4);
  z-index: 999;
}


.info-box, .info-box-total, .info-box-carte, .info-box-anchor, .info-box-date-carte, .info-box-commune{
        background-color: #ffffff;
        border-radius: 12px;
        box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
        padding: 10px 10px;
        text-align: center;
        transition: transform 0.3s ease, box-shadow 0.3s ease;
        flex: 1 1 90px;
        max-width: 200px;
		
		flex-wrap: wrap;
    }
.info-box-date-carte{
	max-height: 60px;
	padding: 15px 10px;
	
}	
.info-box-date-carte h2{
	 font-size: 1.3rem;
	  margin-bottom: 10px;
	color:#1e5a7e;
	text-align:center;
}	
.info-box-commune{
	max-height: 100px;
	padding: 15px 10px;
	
}	
.info-box-commune h2{
	 font-size: 1.0rem;
	  margin-bottom: 10px;
	color:#1e5a7e;
	text-align:center;
}	
.info-box-anchor{
	max-width: 100%;
	margin-top:-40px;
	padding-top : 5px;
	padding-bottom:5px;
	border-radius: 1px;
	 box-shadow: none;
	 background-color: transparent;

}

.info-box-carte {
	max-width: 100%;
	margin-top:-20px;
}

.info-box:hover {
	transform: translateY(-5px);
	box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15);
}

.info-box h2 {
	font-size: 1.8rem;
	margin-bottom: 5px;
	color: #2c3e50;
	text-align:center;
}

.info-box p {
	font-size: 0.9rem;
	color: #7f8c8d;
	margin: 0;
}

.periode-label {
	font-weight: bold;
	margin-top: 10px;
	color: #34495e;
}
.hidden {
  display: none;
}