/* HTML / Body */

	html {
		height: 100%;
		width: 100%;
	}

	body {
		display: flex;
		flex-direction: column;
		height: 100%;
		background-color: #FDFDFD;
	}

/* HEADER */

	header {
		background-color: #FDFDFD;
	}

	.sticky-top .row {
		margin: 0;
	}

	#logo {
		display: block;
		width: 250px;
		height: auto;
	}

	#col1{
		display: flex;
		align-items: center;
		justify-content: start;
	}

	#col1 img {
		max-width: 220px;
	}

	#col2{
		display: flex;
		align-items: center;
		justify-content: center;
		text-align: center;
	}

	#col3 {
		display: flex;
		align-items: center;
		justify-content: end;
	}

	#col3 nav {
		margin-bottom: 0;
	}

	#col3 a{
		font-weight: bold;
		font-style: oblique;
	}

	#texte {
		display: flex;
		align-items: center;
		justify-content: end;
		white-space: nowrap; 
	}

	#col4 {
		display: flex;
		align-items: center;
		justify-content: end;
		padding: 0 20px 0 20px;
		flex-grow: 0.20;
	}

	#col4 div {
		display: flex;
		flex-direction: row;
		align-items: center;
	}

	#col4 h3 {
		margin: 20px 5px 20px 5px;
	}

	#col4 img {
		width: 40px;
		height: 40px;
	}

	.blue{
		color: #073273;
	}

	@media (max-width: 992px) { 
	    #col2 {
	        display: none;
	    }
	}

	@media (max-width: 800px) { 
	    #col4 {
	        display: none;
	    }

	    #col1 {
	        text-align: center;
	        justify-content: center;
	        flex: 0 0 100%; 
		    max-width: 100%;
	    }
	    
	    #col3 {
	        width: 100%;
	        justify-content: center;
	    }

	    #texte {
	    	gap: 1.5em;
	    }

	    #col3 a {
	    	margin-right: 0;
	    }
	}

	@media (max-width: 427px) {
		#texte {
        display: flex;
        flex-wrap: nowrap; 
        justify-content: center; 
        gap: 5px;
	    }

	    #texte .col {
	        flex: 1; 
	        text-align: center; 
	    }

	    #texte a {
	    	margin: 0;
	    }
	}    	

/* MAIN */

	main {
		/*padding: 25px 50px 50px;*/
		background: #FDFDFD;
		flex-grow: 1;
		/* aggrandir le main au maximum */
	}

	#centre {
		position: relative;
		display: flex;
		align-items: center;
		justify-content: center;
		padding: 0;
	}

	/* Dégradé transparent sur l'image */

	.degrade {
		position: relative;
	    display: inline-block;
	    width: 100%;
	}

	.degrade::after {
	    content: "";
	    position: absolute;
	    top: 0;
	    left: 0;
	    width: 100%;
	    height: 100%;
	    background: linear-gradient(to bottom, rgba(255,255,255,0) 0%, rgba(0,0,0,1) 100%);
	}

	.degrade img {
		width: 100%;
		display: block; 
	}

	.overlay-text {
	    position: absolute;
	    text-transform: uppercase;
	    top: 30%;
	    left: 50%;
	    transform: translate(-50%, -50%);
	    color: #FFF;
	    font-size: clamp(18px, 4.5vw, 42px);
	    font-weight: bold;
	    text-align: center;
	    width: 80%; 
	    text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.8),
                 	-1px -1px 3px rgba(0, 0, 0, 0.8);
        animation: brillance 2s infinite alternate; 
	}

	.overlay-text h1 {
		font-size: clamp(18px, 4.5vw, 42px);
	}

	 @keyframes brillance {
	  0% { text-shadow: 1px 1px 5px rgba(255, 255, 255, 0.5); }
	  50% { text-shadow: 1px 1px 10px rgba(255, 255, 255, 0.3); }
	  100% { text-shadow: 1px 1px 5px rgba(255, 255, 255, 0.5); }
	}

	@media (max-width: 768px) { 
	    .overlay-text {
	        top: 50%;
	        transform: translate(-50%, -50%);
	        font-size: clamp(16px, 3.5vw, 28px);
	        width: 90%;
	    }
	}

/* FOOTER */

	#bas {
		height: 25em;
		background-color: #FDFDFD;
		padding: 0;
	}

	#bas .row {
		height: 100%;
		margin: 0;
	}

	/* Colonne de gauche */

		#logo-bas {
			display: flex;
			align-items: center;
			justify-content: center;		
		}

		#infos {
			display: flex;
			align-items: center;
			justify-content: center;
			flex-direction: column;
			font-size: 20px;
		}

		#infos p {
			text-decoration: underline;
		}

		#mentions {
			display: flex;
			justify-content: center;
			flex-direction: column;
			text-align: ;
		}

		#bas h2 {
			text-align: center;
		}

		#bas img {
			justify-content: center;
			width: 100%;
			max-width: 400px;
			margin: 5px;
		}

		#mentions a[href="mentions_legales.html"] {
		    font-weight: bold; /* Texte en gras */
		    text-decoration: underline; /* Souligne le texte */
		    transition: color 0.3s ease-in-out;
		    margin-bottom: 1em;
		}

		#mentions a[href="mentions_legales.html"]:hover {
		    color: #0056b3; 
		    text-decoration: none;
		}

		.order-2, #container-infos, #logo-bas {
			background-color: #FDFDFD;
		}

		#copyright {
				font-family: Lato;
				font-style: italic;
				font-weight: bold;
			}

		@media(max-width: 1400px) {
			#container-infos {
				display: flex;
				flex-direction: column;
				align-items: center;
				justify-content: center;
			}

			#container-infos > div {
		        width: 100%; 
		        text-align: center; 
		    }
		}	

	/* Colonne Horaire Droite */

		#hor {
			background: linear-gradient(130deg, #00b0e6, #009ffd, #006ec3);
			color: #FDFDFD;
		}

		#hor h2 {
			margin-top: 10px;
		}

		table {
			margin-top: 2em;
		}

		#table1 {
			display: flex;
			justify-content: center;
			align-items: center;
			margin-bottom: 3em;
		} 

		#table2 {
			width: 80%;
			display: flex;
			justify-content: center;
			align-items: center;
		}

		th[scope="col"], td {
		 	text-align: center;
		}		

/* POUR IMAGE DE FOND */
	.o {
		opacity: 0;
	}

/* LOADER : Animation de chargement */
	
    .loader-wrapper {
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background-color: rgba(0, 0, 0, 0.85); 
      display: flex;
      justify-content: center;
      align-items: center;
      z-index: 9999; 
    }

    .loader {
      width: 12px;
      height: 12px;
      border-radius: 50%;
      display: block;
      margin: 15px auto;
      position: relative;
      color: #009ffd;
      box-sizing: border-box;
      animation: animloader 2s linear infinite;
    }

    @keyframes animloader {
      0% {
        box-shadow: 14px 0 0 -2px, 38px 0 0 -2px, -14px 0 0 -2px, -38px 0 0 -2px;
      }
      25% {
        box-shadow: 14px 0 0 -2px, 38px 0 0 -2px, -14px 0 0 -2px, -38px 0 0 2px;
      }
      50% {
        box-shadow: 14px 0 0 -2px, 38px 0 0 -2px, -14px 0 0 2px, -38px 0 0 -2px;
      }
      75% {
        box-shadow: 14px 0 0 2px, 38px 0 0 -2px, -14px 0 0 -2px, -38px 0 0 -2px;
      }
      100% {
        box-shadow: 14px 0 0 -2px, 38px 0 0 2px, -14px 0 0 -2px, -38px 0 0 -2px;
      }
    }