/*===========================*/
/* elements généraux         */
/*===========================*/
html, body {
     margin: 0;
     font-family: Arial, sans-serif;
	font-size: 20px; /* taille de référence */
 }
body {
	  /*padding-left:150px;*/
	  background: linear-gradient(to right, #E9F6BC, #C9BCF6);
	  /*background-color:white;*/
    }
a {
      color: blue;
      text-decoration: none;
      font-size: 15px;
	  align-items: center;
	}


/* Effet hover */
a:hover,
    .menu-bottom a:hover {
      color: #00aced;
}	

H1 { color : #3BBCE3; 
 margin-top:15px;
 margin-bottom: 10px;
 	font-size:40px;
 } 
H2 { color : #3BBCE3; ;
 font-size:18pt ;
 margin-top:15px ;
 margin-bottom: 2px;
 text-align: left;
 } 
H40 {font-size:30pt; margin-left:2px; margin-right:2px; margin-top:2px}
.FS12{font-size:12pt}
.FS10{font-size:10pt}
.FS8{font-size:8pt}
.bg{background-color: #CCC}

TH{
	position:sticky;
	top: -15px;
	background:#FFFFFF;
	margin-top:0;
	gap:0;
}

.correction {
  image-orientation: from-image;
}

.container {
	display: grid;
	grid-template-columns: 1fr 10fr; 
	align-items: center;     /* centre verticalement */
	border: 2px solid #333;
	margin:20px;
}

.col1 {
	text-align: right;
	font-size:0.8rem;
	 color : #3BBCE3;
	 	 margin-top:15px ;
	 	padding:2px;
	 margin-bottom: 2px;
}

.col2 {
	margin-left:1px;
	text-align: left;
	padding:1px;
	font-size:0.8rem;
}

.row{
	margin-left:0;

	flex: 1; /* chaque ligne prend une part égale de l’espace disponible */
	align-items: center;
}

.saisie2c {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-auto-rows: auto;

}

.saisie3c {
  display: grid;
  grid-template-columns: 1fr 2fr 1fr;
  grid-auto-rows: auto;
  	align-items: center; 
	justify-content: center;
  gap: 10px;
}


.milieu{
	display:flex;
	align-items: center; 
	justify-content: center;
}

.droit_centre{
	display:flex;
	align-items: center; 
	justify-content: right;
}
.gauche_centre{
	display:flex;
	align-items: center; 
	justify-content: left;
}

/*=============================================*/
/* container avec onglet - page liste_photo.php*/
/*=============================================*/
.app {
  /* prend 80% de la hauteur de la fenêtre */
  		position: fixed;
		top: 15%;
		left: 10%;
		width:90%;
		transform: translate(-5%, -5%);
  height: 80vh;
  margin-top:10px;
  margin-left:10px;
  margin-right:10px;
  border-radius: 10px;
  border: 2px solid #333;;
  display: flex;
  flex-direction: column;
  background: #fff;
  color: #222;
}

/* Barre d'onglets horizontale */
.tabs {
  display: flex;
  gap: 8px;
  padding: 8px 12px;
    border-radius: 10px;
	border: 2px solid #333;
  border-bottom: 1px solid #333;
  background: #f7f7f7;
  /* Optionnel: rester visible lors du scroll */
  position: sticky;
  top: 0;
  z-index: 10;
}

.tab {
  appearance: none;
  border: 0;
  background: transparent;
  padding: 10px 14px;
  border-radius: 6px;
  cursor: pointer;
   font: inherit;
}

.tab.active {
  background: #e9eefc;
  color: #214bff;
  font-weight: 800;
}

/* Zone des panneaux: prend le reste de la hauteur et scrolle verticalement */
.panel {
  /* occupe tout l'espace restant sous la barre d'onglets */
  overflow-y: auto;
 padding: 16px;
  display: none; /* on cache par défaut */
}

.panel.active {
  display: block; /* on montre le panneau actif */
}

/* Démo: rendre le contenu vraiment long */
.long-content {
  display: grid;
  gap: 12px;
}

.long-content p {
  margin: 0;
  padding: 12px;
  border: 1px solid #eee;
  background: #fafafa;
}

/* Responsif: réduire paddings sur petits écrans */
@media (max-width: 600px) {
  .tabs { padding: 2px 2px; gap: 2px; }
  .tab { padding: 1px 1px; }
  .panel { padding: 1px; }
  .app {margin-left:5px;}
  .app {width:90%;}
  .tabs {font-size: 14px;}
}
	/*===================================
      Barre latérale qui glisse à gauche  toutes pages          
	=====================================*/
.menu-toggle {
  position: fixed;
  top: 15px;
  left: 15px;
  background: #2c3e50;
  color: #fff;
  border: none;
  padding: 10px;
  font-size: 20px;
  cursor: pointer;
  z-index: 1001;
}

.sidebar {
  position: fixed;
  top: 0;
  left: -240px; /* cachée */
  width: 220px;
  height: 100vh;
  background: #2c3e50;
  color: #fff;
  padding: 20px;
  transition: left 0.3s ease;
  z-index: 1002;
}
.sidebar nav {
  display: flex;
  flex-direction: column;
  gap: 15px;
  margin-left:5px;
}

.sidebar nav a {
  color: #ecf0f1;
  text-decoration: none;
  padding: 10px;
  border-radius: 4px;
  display: flex;
  align-items: center;
  gap: 8px;
  transition: background 0.5s;
}

.sidebar nav a:hover {
  background: #34495e;
}

.sidebar.active {
  left: 0;
}


/* Effet hover */
.sidebar:hover {
  left: 0;
  background:rgba(0,0,0,0.7)
}	
/* Pour les boutons qui remplace les liens dans la sidebar.
Utile car les boutons ne provoque pas le scroll de l'écran vers le haut à le différence des liens avec Href*/
	.link-button {
	  background: none;
	  border: none;
	  padding: 0;
	  margin: 0;
	  color: white;       
	  font: inherit;        /* hérite de la police */
	  cursor: pointer;      /* main au survol */
	  /*text-decoration: underline; /* souligné comme un lien */
	  margin-left:10px;	  
	  text-align:left;
	  line-height:40px;
	  gap 10px;
	}
	a i{
	  margin-right: 0.5em; /* espace entre l’icône et le texte */
	} 
	button i {
	  margin-right: 0.5em; /* espace entre l’icône et le texte */
	}
	.link-button:hover {
		background: #34495e;      /* couleur au survol */
	}
/*============================================
  apparence des fenêtres infos d'aspect modale        
============================================*/

.info_new{
	
   background-color: #34495e;
	color: white;
    padding: 20px;
    border-radius: 6px;
    max-width: 500px;
    width: 90%;
    box-shadow: 0 0 25px rgba(0,0,0,1);
    position: relative;
	display:none;
}
.info_new.active{
	display:flex;
}
.info{
  position:fixed;
  top:-1000px;	
  max-width: 800px;
  width: 90%;

  background: #34495e;
  border-radius: 10px;
   box-shadow: 0 0 25px rgba(0,0,0,1);

  color: white;
  font-size: 15px;
  padding: 10px;
   display:flex;
   flex-direction: column;
  align-items: center;
  transition: top 0.7s ease;
  z-index: 1010;	
}
.info p{
	line-height: 25px;
}
.info.active{
		position: fixed;
		top: 2%;
		left: 50%;
		transform: translate(-50%, 0);
      flex: 1;
      display: flex;
      justify-content: center;
      align-items: center;
      text-align: center;
      padding: 20px;
      margin-top: 60px;   /* espace sous la barre du haut */
      margin-bottom: 60px;/* espace au-dessus de la barre du bas */
}

.overlay_new{
    position: fixed;
    top: 0; left: 0;
    width: 100%; height: 100%;
    background: rgba(0,0,0,0.5);
    display: none; /* caché par défaut */
    justify-content: center;
    align-items: center;
		  cursor: pointer;

  }
.overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0,0,0,0.5); /* semi-transparent */
  display: none; /* caché par défaut */
  z-index: 1000;
}

.overlay.active {
  display: block;
}

.content {
  padding: 20px;
}
.closeBtn { /* bouton de fermeture des fenêtres infos en croix*/
    position: absolute;
    top: 10px; right: 10px;
    cursor: pointer;
    font-weight: bold;
    background: none;
    border: none;
    font-size: 1.2em;
	color:white;
	transform: scale(1.5); 
  }

/*===================================
			Barre de menu du bas   - affiche_photo.php          
=====================================*/
       /* Barre de menu fixe */
        .menu-bas {
			display:flex;
            position: fixed;       /* Fixe la barre */
            bottom: 0;             /* En bas de l'écran */
            left: 0px;
            width: 100%;           /* Prend toute la largeur */
			color: white;
			/*height:40px;*/
            text-decoration: none;
            font-size: 20px;
            padding: 1px 1px;
			gap:8px;
            background-color: #34495e;
            display: flex;
			/*justify-content: space-around;*/
            align-items: center;
            padding: 2px 0;
            box-shadow: 0 -2px 5px rgba(0,0,0,0.3);
            z-index: 1500;         /* Toujours au-dessus du contenu */
        }
		/* affichage des n° de pages*/
		.PAGEG {font-size:35pt; font-weight : bold; margin-left:2px ; margin-right: 2px; margin-top:2px}
		.PAGEN {font-size:20pt; margin-left:2px; margin-right:2px; margin-top:2px}


        /* Liens du menu */
        .menu-bas a {
            color: white;
            text-decoration: none;
            font-size: 18px;
            padding: 1px 1px;
            transition: background 0.3s;
			      cursor: pointer; /* main sur les boutons */
		}
		

		.legende{
			position: fixed;       /* Fixe la barre */
			bottom:0;
            left: 0px;
            width: 100%;           /* Prend toute la largeur */
			color: white;
			height:80px;
		    display: grid;
		    grid-template-columns: 1fr 1fr; /* 2 colonnes égales */
		    gap: 10px;
		    padding: 10px;
		    background-color: none;
		    z-index: 1500;         /* Toujours au-dessus du contenu */
			background: none; /* semi-transparent */
			transform: translate(0px, -30px);
		}
			.legend-item {
				color:black;
			padding: 15px;
			font-family: Arial, sans-serif;
		}
		.grid-container {
	
			position: fixed;       /* Fixe la barre */
			bottom:0;
			transform: translate(0px, -35px);
            left: 0px;
            width: 100%;           /* Prend toute la largeur */
			color: white;
			height:60px;

      display: grid;
      grid-template-columns: 200px 1fr; /* 2 colonnes égales */
      grid-auto-rows;
	  gap: 1px;
      padding: 1px;
		background: rgba(0,0,0,0.5); /* semi-transparent */
  	  	  	  		align-items:center;
    }
    .grid-item {
      background:none;
	  color:white;
      padding: 1px;
      /*border: 1px solid #ccc;*/
      font-family: Arial, sans-serif;
			text-align:center;
    }
	.grid-container a{
		color:red;
	}
	.grid-container a:hover {
            background-color: #6999;
            border-radius: 4px;
	}
	.messagePortrait{
		position:fixed;
		top:85%;
		left:50%;
		transform:translate(-50%,0%);
		align-items:center;
		text_align:center;
		font-size:1.5em;
		background:#34495e;;
		color:#3BBCE3;;
		display:none; //invisible par défaut;
	}

/* Mode portrait : sur téléphone augmentation de la police pur la barre de menu bas*/
    @media (orientation: portrait) {
		.menu-bas  a{
			font-size: 30px;
		}
		.grid-item {
			font-size: 30px;
		}
		.grid-container {
				transform: translate(0px, -70px);
		}
		.messagePortrait{
			display:block;
		}
	}
	@media (orientation: paysage) {
		.messagePortrait{
			display:none;
		}
	}

		.legende_old{
           position: fixed;       /* Fixe la barre */
		   display:grid;
			display: grid;
			grid-template-columns: 1fr 1fr ; /* largeur fixe pour labels, flexible pour champs */
grid-auto-rows;
            bottom: 0;             /* En bas de l'écran */
            left: 0px;
            width: 100%;           /* Prend toute la largeur */
			color: white;
			height:80px;
            text-decoration: none;
            font-size: 20px;
            padding: 1px 1px;
			gap:8px;
 			/*justify-content: space-around;*/
			text-align:center;
            align-items: center;
            padding: 2px 0;
            
            z-index: 1500;         /* Toujours au-dessus du contenu */
			background: none; /* semi-transparent */
			transform: translate(0px, -30px);
		}
	.legend-item {
      padding: 15px;
      font-family: Arial, sans-serif;
    }
		
		
		
        /* Effet au survol */
        .menu-bas a:hover {
            background-color: #6999;
            border-radius: 4px;
		}
				/* Responsif: réduire paddings sur petits écrans */
/*@media (max-width: 1000px) {
	.menu-bas{font-size:25px;}
	.menu-bas a{font-size:25px; margin-left:20px;}
	.PAGEG {font-size:40px;}
	.PAGEN {font-size:25px;}
	
}*/
 /*===================================
		container centré - page connecxion.php            
=====================================*/
    .center-block {
		position: fixed;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -80%);

      justify-content: center;
      align-items: center;
      text-align: center;
      padding: 10px;
      margin-top: 60px;   /* espace sous la barre du haut */
      margin-bottom: 60px;/* espace au-dessus de la barre du bas */
      }

    .center-block .box {
      background: #f5f5f5;
      border-radius: 10px;
      padding: 30px;
      max-width: 500px;
      width: 90%; /* responsive */
      box-shadow: 0 4px 10px rgba(0,0,0,0.2);

    }

    .center-block h1 {
      margin-top: 10px;
	  margin-bottom:10px;
    }

    /* Responsive : sur petits écrans, réduire la taille */
    @media (max-width: 600px) {
      .center-block .box {
        padding: 20px;
        font-size: 14px;
      }
      .menu-top a {
        font-size: 14px;
      }
      .menu-bottom a span {
        font-size: 10px;
      }
    }


 
/*====================================================================
    Affichage en 2 colonnes centrées fenetres info dans affiche.php  
======================================================================*/
 .form-grid {
    display: grid;
    grid-template-columns: 1fr 100px; /* largeur fixe pour labels, flexible pour champs */
    gap: 10px 20px; /* espace entre lignes et colonnes */
    align-items: center;
    max-width: 500px;
    margin: 20px auto;
    font-family: sans-serif;
  }

  .form-grid label {
    text-align: right; /* labels alignés à droite */
    font-weight: bold;
  }

  .form-grid input[type="number"],
  .form-grid input[type="text"] {
    width: 100%; /* champs prennent toute la largeur disponible */
    padding: 5px;
    box-sizing: border-box;
  }

  .form-grid input[type="checkbox"] {
    transform: scale(1.5); /* agrandir légèrement la case à cocher */
  }