<style>

	/* styles généraux */
	
	html{
		height:100%;
		width:100%;
	}

	body {
		height:100%;
		width:100%;
		margin:auto;
		padding:5px;
		background-color: black;
	}

	*{
		font-family:sans-serif;
		font-size:16px;
		box-sizing:border-box;
		-ms-box-sizing:border-box;
		-moz-box-sizing:border-box;
		-webkit-box-sizing:border-box;
	}
	
	label{
		width:100%;
	}

	input[type=password]  {
		color:black;
		width: 100%;
		padding: 8px;
		border: 1px solid #ccc;
		border-radius: 4px;
		box-sizing: border-box;
		margin-top: 6px;
		margin-bottom: 16px;
	}
	
	input[type=text], select, textarea, p, span, a, div  {
		color:white;
	}

	input[type=text], select, textarea {
		color:black;
	}
	
	input[type=text], textarea {
		width: 100%;
		padding: 8px;
		border: 1px solid #ccc;
		border-radius: 4px;
		box-sizing: border-box;
		margin-top: 6px;
		margin-bottom: 16px;
	}
	
	input[type=submit]:hover {
		background-color: #45a049;
	}
	
	a:hover{
		opacity:0.6;
	}
	
	textarea {
		resize: vertical;
	}
	
	h1{font-size: 140%} h2{font-size: 120%} h3{font-size: 100%} h4{font-size: 80%} h5{font-size: 60%} h6{font-size: 60%}

	/* styles spécifiques pages */

	#page {
		width:70%;
		margin:0 auto;
	}
		
	#img_sit{
		width:150px;
		display:inline;
	}
	
	.bandeau{
		display:flex;
		align-items:center;
		width:100%;
		gap:15px;
	}

	.bloc-image{
		flex-shrink:0;
	}

	.bloc-image img{
		width:80px;
		display:block;
	}

	.bloc-texte{
		flex:1;
		min-width:0;
		word-wrap:brek-word;
	}
	
	/* nouveau menu flex*/
	
	.main-header {
	  display: flex;
	  align-items: center; 
	  justify-content: flex-start; 
	  gap: 20px;
	  padding: 5px;
	  background:black;
	  height: 100px; 
	}

	.menu_flex {
	  max-width: 100%; 
	}

	.menu_flex ul {
	  display: flex;
	  flex-wrap: wrap;
	  list-style: none;
	  margin: 0;
	  padding: 0;
	  gap: 10px 25px;
	 }
	
	.menu_flex li {
		cursor:pointer;
		white-space: nowrap;
	}
	
	.menu_flex a {
	  text-decoration: none;
	  color: #333;
	  font-weight: 500;
	  white-space: nowrap;
	}
		
		
		
	/* ancien menu*/		
	#menug{
		position:absolute;
		margin-left:-30px;
		display:inline;
		top:35px;
		list-style-type:none;
	}
	#menug li {
		display:inline;
		margin-right:20px;
		cursor:pointer;
		text-align:center;
	}
	
	#tit_sit {
		float:left;
		margin:28px 0 0 15px;
		/*font-size:160%;*/
		font-weight:bold;
	}
	
	#decon {
		float:right;
		text-decoration:none;
	}
	
	#decon img {
		vertical-align:middle;
		width:32px;
	}
	
	#messer {
		clear:both;
		width:100%;
		margin: 15px 0 15px 0;
		text-align:left;
	}

	.tit_page {
		width:100%;
		vertical-align:middle;
		border-radius:4px;
		line-height:34px;
		background-color: #4CAF50;
		/*background:#7eb536;*/
		color:black;
	}
	
	.tit_page span{
		position:relative;
		top:0.7px;
		color:black;
	}
	
	.titre{
		cursor:pointer;
	}
	.titre a{
		text-decoration:none;
	}
	
	.titre img {
		margin-top:-2px;
		vertical-align:middle;
		margin-right:10px;
	}
	
	.liencal{
		margin-left:6px;
		border:2px solid black;
		border-radius:4px;
		background:black;
		cursor:pointer;
		color:white;
	}
	
	.liencal a{
		text-decoration:none;
	}
	
	.liencal:hover{
		font-weight:bold;
	}
	
	.img_titre2{
		margin-right:8px;
		width:34px;
		vertical-align:middle;
		float:right;
	}
	
	.img_loader{
		position:relative;
		left:5px;
		top:-5px;
		left:-10px;
		width:60px;
		vertical-align:middle;
	}

	.sous_titre{
		margin-left:20px;
		color:#4CAF50;
	}
	
	.libmois{
		border:1px solid #4CAF50;
		padding:5px;
		color:#4CAF50;
		border-radius: 4px;
	}

	.emoj{
		position:relative;
		top:-2px;margin-right:10px;
		cursor:pointer;
	}
	
	/* styles formulaires standards */
	
	.formuls {
		margin:0 auto;
		width:85%
	}
	
	.colformg{
		float:left;
		width:49%
	}
	
	.colformd{
		float:right;
		width:49%
	}
	
	.colformgm{
		float:left;
		width:14%
	}
	
	.colformdm{
		float:right;
		width:84%
	}
	
	.colformig{
		width:360px;
	}
	
	.colformid{
		width:100%;
		clear:both;
		float:left;
		margin-left:140px;
		}

	.explist select{
		width:100%
	}
	
	#nbcarrest {
		font-size:85%;
	}	

	.listagd{
		padding:3px;margin-left:5%;
	}

	.presta{
		position:relative;
		overflow:hidden;
		height:auto;
		max-width:360px;
		text-align:justify;
	}
	
	/* style formulaire de connexion */
	
	#lig_logo{
		text-align:center;
	}
	
	#logo_agcf2 {
		width:200px;
	}
	
	#fconnex {
		width:300px;
		margin:0 auto;
	}

	.btn {
		background-color: #4CAF50;
		color: black;
		border: none;
		border-radius: 4px;
		cursor: pointer;
		line-height:30px;
		width:130px;
		text-align:center;
	}

	.btn:hover {
		background-color: #45a049;
	}
	
	.btng {
		float:left;
	}
	
	.btnd {
		float:right;
	}

	.btnag {
		width:200px;
	}
	
	.bretour {
		position:fixed;
		z-index:9999;
		margin-top:10px;
		max-width:500px;
		width:96%;
		line-height:30px;
		cursor:pointer;
		background:#333333;
		border:1px solid #4caf50;
		border-radius:20px;
		color:#4caf50;
	}
	
	.blocvid{
		display:block;
		width:340px;
		margin-left:auto;
		margin-right:auto;
		border:1px solid white;
	 }
	 
	.vid{
		border:1px solid #444444;
		width:320px;
		height:240px;
	}
	#tblvid{
		margin-left:50px;
	}
		
	/* styles spécifiques au trombinoscope et à la galerie vidéos*/

	/* administration trombinoscope et galerie vidéos */
	.container-formulaires {
		display:flex;
		justify-content:flex-start;
		margin-bottom:30px;
		align-items:flex-end;
	}

	.save-order-form {
		width:80%;
		margin:0 auto;
	}
	
	.form_item{
		width:100%;
	}

	.card-admin{
		display:flex;
		align-items:center; 
		margin-bottom:5px;
		padding:10px;
		background:black;
	}

	.legend input{
		display:block;
		width:100%;
		margin-bottom:5px;
		padding:5px;
		box-sizing:border-box;
	}

	.handle{
		cursor:grab;
	}

	.handle:active{
		margin-left:30px;
		cursor: grabbing;
	}

	.sortable-ghost{
		opacity:0.3;
		background:#e1e1e1;
	}

	.move_item {
		margin-right:10px;
		-webkit-touch-callout: none;
		-webkit-user-select: none;
		touch-action: none; /* TRÈS important pour l'iPhone */
	}

	.card-admin img {
		border-radius:4px;
		margin-left:0px;
		margin-right:0px;
	}
		
	/* affichage trombinoscope*/
	.container-photos { display: grid; grid-template-columns: repeat(auto-fill, 220px);justify-content: center; gap: 20px; padding: 20px; }
	.card-p { background: white; border: 2px solid #2ecc71; border-radius: 10px; overflow: hidden; height: 300px; padding:0; margin:0; overflow: hidden; display: flex; flex-direction: column; }
	.img-p { height: 100%; width: 100%; overflow: hidden;}
	.img-p img { width: 100%; height: 100%; display:block; margin:0; object-fit: cover; }
	.inf-p { background: #4caf50; color: black; padding: 10px; text-align: center; flex-grow: 1; }

	/* affichage galerie vidéos */
	.container-video { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 20px; padding: 20px; }
	.card-v { background: white; border: 2px solid #2ecc71; border-radius: 10px; overflow: hidden; }
	.vid-res { position: relative; padding-bottom: 56.25%; height: 0; }
	.vid-res iframe { position: absolute; top: 0; left: 0; width: 100%; height: 100%; border: none; }
	.inf-v { background: #4caf50; color: black; padding: 10px; text-align: center; }
		
	/* style pied de page */
	
	#pied {
		clear:both;
		position:relative;
		float:left;
		margin:20px 0 0 0;
		width:100%;
		height:auto;
		border-top: 3px solid #4CAF50;
		text-align:center;
	}
	
	/* Styles VIEWPORT*/
		@media screen and (max-width: 1200px) {
		
		#page {
			width:98%;
			margin:0;
			display:block;
		}
		
	}
	
	@media (max-device-width:768px) and (orientation: landscape) {
	
		html {
		   -webkit-text-size-adjust: 100%;
		   -ms-text-size-adjust: 100%;
		}
		
	}

	@media screen and (max-width: 768px) {

		#page {
			width:98%;
			margin:0 auto;
			display:block;
		}
		
		.bandeau {
			width:100%;
			justify-content:center;
			display:block;
		}
		.bloc-image img{
			display:block;
			margin:0 auto;
		}
		.bloc-texte{
			ul li {display:block;}
		}
		
		#img_sit{
			display:block;
			margin: auto;
		}
		
		.logo img{
			margin:0 auto;
		}
			
		.main-header {
			height: auto;          /* Crucial : laisse le header s'agrandir vers le bas */
			min-height: fit-content; 
			position: relative;    /* Vérifie que ce n'est pas en "absolute" sans raison */
			padding-bottom: 20px;  /* Ajoute un peu d'air en bas pour ne pas coller au contenu suivant */
			display: flex;
			flex-direction: column;
			align-items: center;
		  }
		
		.logo {
			margin-bottom: 20px;    /* Espace entre le logo et le premier menu */
		}
		/* On cible la liste (ul) pour qu'elle n'ait plus de comportement horizontal */
		  .menu_flex ul {
			display: flex;
			flex-direction: column; /* Empile les <li> verticalement */
			padding: 0;
			list-style: none;
			width: 100%;           /* Prend toute la largeur pour le centrage */
		  }

		  /* Chaque ligne de menu devient un bloc individuel */
		  .menu_flex li {
			display: block;        /* Force le retour à la ligne */
			margin: 2px 0;        /* Ajoute de l'espace vertical pour le confort du pouce */
			text-align: center; 
			width:245px;
			background:white;
			border: 1px solid white;
			border-radius: 10px;
			color:black;
			line-height: 25px;
		  }
				
		.lgspace{
			display:none;
		}
		
		.formuls {
			width:100%;
			margin:0;
		}

		.colformg, .colformd, .colformgm, .colformdm, .colformig{
			width:100%;
			margin:0;
			clear:both;
			float:left;
		}
		
		.colformid{
			margin-left:15px;
		}
	
		.lvide {
			display:none;
		}
		
		#decon{
			float:left;
			margin:0;
		}
		
		#tit_sit {
			margin:28px 0 50px 15px;
			font-size:100%;
		}
		
		.col1, .col2, .col3, .colinsc {
			width:100%;
		}
		
		.col1{
			text-align:left;
		}
		
		.col3{
			position:relative;
			float:left;
			margin-top:15px;
		}
		
		.colinscg, .colinscd {
			width:100%;
			clear:both;
		}
		
		.tit_even{
			width:100%;
			float:left;
			margin-top:8px;
		}
		
		.desc_even{
			width:100%;
			font-size:90%;
		}
		
		.sous_titre, .libmois{
			width:100%;
			float:left;
			margin-left:0;
		}		
		.col3{
			display:none;
		}

		.col33{
			display:block;
		}
		
		.listagd{
			margin:10px 0 0 0;
			font-size:14px;
		}

		.btnag {
			width:250px;
		}
		
		.blocvid{
			margin-left:auto;
			margin-right:auto;
		 }
	 
		.vi{
			display:block;
			margin-left:auto;
			margin-right:auto;
		}
		.presta{
			width:100%;
		}
		
		#tblvid{
			width:100%;
			margin:0;
		}
		
		.container-photos{
			grid-template-columns: repeat(2, 1fr);
		}
		
		.save-order-form {
			width:100%;
		}
	
		.card-admin{
			width:100%;	
		}
	}
	
</style>