* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
	
	
}
body{
	font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
    background-size: cover; /* Pour couvrir tout l'écran sans perdre les proportions */
    background-position: center; /* Pour centrer l'image */
	margin: 0;
    padding: 0;
    background-color:#ffffff;
	
	
	
}
	
		h1 {
			font-size: 8vw;
		}
.option{
	
	background-color:white;
}
body background-image{
	opacity:0.5;
	
}
        .grid-container {
			max-width:100%;
			margin: 0 auto;
			display:grid;
			grid-template-columns: repeat(7,1fr);
			min-height:100vh;
			
		}
		.grid-container > div:nth-child(1) {
			grid-column: 1 / span 7;
			justify-items: center;
		}
		.grid-container > div:nth-child(2) {
			grid-column: 1 / span 7;
		}
		.grid-container > div:nth-child(3) {
			grid-column: 1 / span 7;
				min-height:70vh;
		}
		
		.grid-container > div:nth-child(4) {
			grid-column: span 7;
			align-self:end;
		
		}
		.grid-container table {
			
			width:100%;
			
		}
		
		.menu {
			width:100%;
			margin: 0 auto;
			display:grid;
			top: 0;
			position: fixed;
			max-height:3em;
		  border-top: 2px solid grey;
		  border-bottom: 2px solid grey;
		 background-color: white;
		  /*display: flex;*/
			z-index:1000;		  
		  /* width:100% */
		  box-shadow: 0px 8px 10px 0px #888888;
		 grid-auto-flow:line;
			grid-template-columns: repeat(7,1fr);
			justify-items:start;
			align-items:stretch;
			
		}
		.menu > div:nth-child(1) {
			grid-column: 1 ;
		}
		.menu > div:nth-child(2) {
			grid-column: 3  ;
			 
		}
		.menu > div:nth-child(3) {
			grid-column: 3/10 ;
			 
		}
		
		.menu-burger {
			display: none;
		}
		
		.menu2 {
			justify-items:start;
			padding-top:0.7em;
			display: flex;
			padding-bottom:0.5em;
			flex-wrap:wrap;
			justify-content:left;
			/*justify-content: space-around;*/
		}
		
		.webtitle {

			width: 75%; /* ou une largeur fixe, selon le layout */
			max-height: 75%; /* ou une hauteur fixe, selon vos besoins */
			 /* Utilise Flexbox pour faciliter le centrage de l'image */
			
			font-size: 2.5em;	
			
		}
		
		@media (max-width: 1000px) {
		    
		  .webtitle {

			
			
			font-size: 2em;	
			
		}
	
	
		    
			.menu2 {
				display: none;
				flex-direction: column;
				width: 100%;
				transform: translateX(100%); /* Commence caché sur la gauche */
			transition: transform 0.3s;
			background-color: white;
			z-index: 1001;
			}

			.menu-burger {
				display: block;
				cursor: pointer;
			}

			/* Lorsque le menu est activé */
			.menu2.active {
				display: flex;
				transform: translateX(0);
			}
		}
		
		#monTextarea {	    
		  inline-size: 97%;
		  block-size: 100px;
    border: 1px solid #ddd;
    border-radius: 4px;
    padding: 10px;
    font-size: 14px;
    margin-block-end: 20px;
    resize: none;
    background-color: #fcfcfc; 
	}
		
		.webtitle img {
			/*max-width: 100%;  Empêche l'image de dépasser la largeur de la div */
			/*max-height: 100%;  Empêche l'image de dépasser la hauteur de la div */
			width: 75%;
			height: 75%; /* Permet à l'image de conserver ses proportions */
			  /*Assure que l'image est complètement visible */
		}
		.desc {
			
			margin: 0 auto;
			background-color:white;
			
		}
		.desc p {
			font-size: 16px; /* Ou une autre taille de police considérée comme 'par défaut' */
			font-weight: normal;
			line-height: normal;
			color: black;
			background-color:white;	
			margin:20px;
		}
		.desc h1{
		    
		    
			filter:drop-shadow(2px 2px 2px #f2ae4f);
		}
		
	
        .header {
			
            background-color: white;
            text-align: center;
			
			display: flex;
            color: #4caf50; /* Vert pour les principales */
        }
		
		
		
		
		.content {
			font-size:19px;
		 text-align:left;
		  padding-left: 2%;		  
		}
		
		
		#pagetitle{
			
			padding-top:1.55em;
			Position:relative;
			text-align:center;
			font-size: 2em;	
		}
		#pagetitle title_page{
			margin: 0;
			padding: 0;
		}
		.title_page{
			/*padding-top:0.15em;*/
			height:1.2em; 
			background-color:#eFeFeF;	
			color:white;
		}
	#loader {
    position: fixed;
    left: 50%;
    top: 50%;
    width: 50px;
    height: 50px;
    border: 5px solid lightgrey;
    border-top: 5px solid green;
    border-radius: 50%;
    animation: spin 1s linear infinite;
    z-index: 1000; /* Pour s'assurer qu'il reste au-dessus du contenu */
    transform: translate(-50%, -50%);
    display: none; /* Caché par défaut */
}
#overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5); /* Fond gris foncé semi-transparent */
    display: none; /* Caché par défaut */
    justify-content: center;
    align-items: center;
    z-index: 1000; /* Pour s'assurer qu'il reste au-dessus du contenu */
}

	
		@keyframes spin {
			0% { transform: translate(-50%, -50%) rotate(0deg); }
			100% { transform: translate(-50%, -50%) rotate(360deg); }
		}
		fieldset {
		     inline-size: 99%;
    border: 1px solid #ddd;
    border-radius: 4px;
    padding: 10px;
    font-size: 14px;
    margin-block-end: 20px;
    resize: none;
    background-color: #f0f0f0; 
    text-align:center;
			
		}
		

		
		.title_item {
			color:#F89C0E;
			text-decoration: none;		
		}
		
		
		#idcontent{
			margin-left:1em;
		}
		#Formaction {
			margin-left:1.5em;			
		}
		
		.contenu{
			/*background:#FcFcFc;*/
			
		}

		/* Style pour le texte "Menu" */
		#menu-label {
		  background-color: white;
		  position: absolute;
		  top: -0.8em;
		  left: 10px;
		  font-size: 1.5em;
		  color: #F89C0E;
		}

		/* Style pour les éléments de menu */
		.menu-item {
		  color: black;
		  text-decoration: none;
		  margin-right: 0.5em;
		}
		.title_item.wt{
		    filter:drop-shadow(2px 2px 2px #cc7c06);
		}
		.link-item{
			color: black;
		}
		.link-item:hover{
			color: green;
		}
		
		.tab_item {
		  color: black;
		  text-decoration: none;
		 /* margin-right: 0.5em;*/
		}
	
		.tab_item:hover {
		  color: green;
		  
		}
		.sup{
			color: red;		
			text-decoration: none;
			font-size:1.5em;	
		}
		.titre_rep {
			color: green;
			font-size:1.5em;
			padding:1em;
			padding-bottom:0.5em;
		}
	
		.menu-item:last-child {
		  margin-right: 0.5em;  /* Ajustez la marge à droite pour le dernier élément du menu */
		}

		/* Style au survol */
		.menu-item:hover {
		  color: green;
		  font-weight: bold;
		}
        /* .container {
            display: flex;
            flex-wrap: wrap;
            max-width: 1200px;
            margin: 0 auto;
            padding: 15px;
        } */

        .corps {
            flex: 3;
            padding: 15px;
            color: #76b476; /* Vert dégradé */
        }
		.precedent, .suivant {
		  background-color: transparent; /* Rend le fond du bouton transparent */
		  color: #000; /* Couleur du texte. Ajustez selon le thème de votre site */
		  border: none; /* Retire la bordure du bouton */
		  cursor: pointer; /* Change le curseur en main pour indiquer qu'il s'agit d'un bouton cliquable */
		  padding: 10px; /* Ajuste le padding autour du texte pour une meilleure apparence */
		  font-size: 16px; /* Taille du texte. Ajustez selon vos besoins */
		}

		.precedent:hover, .suivant:hover {
		  color: #555; /* Change la couleur du texte au survol pour un effet interactif */
		}

        aside {
            flex: 1;
            background-color: white;
            padding: 15px;
            color: #a8d5a8; /* Vert plus dégradé */
            border-right: 1px solid #d5e8d4; /* Une légère bordure pour séparer */
        }
		table {
		    
		        min-width:450px;
		    
			max-width:95%;
			margin-left: auto;
			margin-right: auto;
			/*border-collapse: separate;*/
			border-spacing: 0;
			border-top:1px;
			box-shadow: 0 0 10px 5px #cecece;
			/*box-shadow: 2px 2px rgba(0, 0, 0, 0.5);*/
			border-radius:6px;
			table-layout:auto;
		}
		th:first-child {
    border-top-left-radius: 6px;
}

th:last-child {
    border-top-right-radius: 6px;
}

tr:last-child  {
    border-bottom-left-radius: 6px;
}

tr:last-child td:last-child {
    border-bottom-right-radius: 6px;
}

tr:last-child td:first-child {
    border-bottom-left-radius: 6px;
}
td:first-child, th:first-child {
    padding-left: 1vw;
}

td:last-child, th:last-child {
    padding-right: 5vw;
}
		#monFormulaire{
			
			border-radius:8px;
		}
		
		input[type=radio]{
			
			border-radius:8px;
		}

th, td {
    border-bottom:0px;
    text-align: left;
    height:13vh;
    padding-left: 1vw;
}
th{
    height:6.5vh;
}
tr{
    /*height:15vh;*/
border-bottom:10px;
border-style: solid;
border-color: 1px black;
background-color: #f2f2f2;
padding-left: 1vw;
	
}
tbody{
width: auto;	
	
}
#formmailf {
        width:95%;
		margin-left: auto;
		margin-right: auto;
}
tr:nth-child(even) {
    background-color: #ffffff;
}
@media screen and (min-width: 1000px){
.container_abo {
            display: grid;
			grid-template-columns:1fr 1fr 1fr;
            max-width: 95%;
			justify-items:center;
        }
		
}
	 .container_abo {
            display: grid;
            max-width: 95%;
			justify-items:center;
        }
	 
	 
	
        .option {
            border: 1px 1px solid #ccc;
			padding: 2px;
            margin: 1em;
            box-shadow: 3px 3px 10px rgba(0,0,0,0.1);
			min-width: 200px;
        }
        
		.table-option {
			min-width:350px;
			padding:0px;
            margin: 0em;
			border:1px;
		}
		
		.table-option td {
			max-width:50px;
			padding-left:1vw;
			padding-right:1vw;
		}
		
		.table-option tr {
			max-width:50px;
		}
		
        .option h2 {
            text-align: center;
        }
        .option p {
            text-align: justify;
        }
		.title_item {
			color:#f89c0e;
			text-shadow: 0 0 10px rgba(255,255,255,0.8);
			text-decoration: none;		
		}
footer{
	/*position: fixed;
    left: 0;
    bottom: 0;
    width: 100%;
    background-color: #333;
    padding: 1px;
    text-align: center;*/
	
}

th {
    background-color: #6B5E62;
    color: white;
}
.no-border {
	border-collapse: collapse;
}

.no-border th, .no-border td {
	border: none;
}
        footer {
            background-color: white;
            text-align: center;
            padding: 10px 0;
            color: white;/* #388e3c;  Vert plus foncé */
        }
		.id_sss{
			font-size:16px;
			color: black; 
			text-decoration: none;
		}
		.id_sss:hover{
			color: green;
		}
		
		.formloggin{
	display:flex;
	flex-wrap:wrap;
	gap:5%;
	row-gap:10px;
	justify-content:center;
	align-items:center;
	flex-direction:column;
}
.box-log{
	padding:10px;
	
}
.enter{
	width:clamp(140px,20vw,200px);
	height:30px;
	border-radius:10px;
	background: #DFDFDF;
	border:none;
}


.butsub{
	width:clamp(140px,20vw,200px);
	background: #4caf50;
	height:30px;
	border-radius:10px;
	border:none;
	box-shadow: 0px 0px 5px rgba(0,0,0,0.3);
	color:white;
	
}
 .cent{
     margin:10px;
     
 }	
 .wip{
     display:flex;
     justify-content:center;
 }
.wip img{
    width:25%;
    margin:15px;
    filter:drop-shadow(2px 2px 2px #DFDFDF);
    
}		
.wip img:hover{	
    filter:drop-shadow(2px 2px 10px red);
}