/*
color Logo Meteo France :rgb(0,85,141);
*/

html{
	scroll-behavior: smooth;
}

body, html {
	margin : 0;
	padding: 0;
}

html::-webkit-scrollbar {
	width: 12px; /* Largeur de la barre de défilement */
}

body{
	background-color: rgba(8, 8, 26, 1);
	margin: 0px;
	padding: 0px;
	font-family: 'roboto', sans-serif;
}
/*----header.php----*/

	/*------Block------*/
	div.block1
	{
		background-color:rgba(0,85,141,0.2);
		padding-top: 20px;
		padding-left: 5%;
		padding-right: 5%;
		margin:0px;
	}

	div.blockA
	{
		background-color: rgba(8, 8, 26, 1);
		margin:0px;
		padding: 0px;
		border-bottom-left-radius: 1em;
		border-bottom-right-radius: 1em;
		margin-top: 3em;
	}

	div.block2
	{
		/* background-color:rgba(0,85,141,0.2); */
		padding-left: 5%;
		padding-right: 5%;
	}

	/*--------Over Page----------*/
	div.overPage { text-align: right; }

	div.overPage div.overPage-block
	{
		display: inline-block;
		margin: 10px;
		color: rgb(0,85,141);
	}

	

	img.overMeteo
	{
		width:100px;
		top: 0px;

	}

	/*------Navbar Meteo--------*/
		.navbar{
			background-color: rgba(8, 8, 26, 0.92);
			color : white;
			transform: translateY(0);
			transition: transform 0.3s ease-in-out;
		}

		.navbar.hidden {
			transform: translateY(-100%);
		}

		nav .container{
			width: 90%;
			max-width: 100%;
		}

		.navbar-light .navbar-toggler{
			border-color: rgb(255, 255, 255);
		}

		.navbar-toggler-icon span {
			background-color: white; /* Définir la couleur de fond en blanc */
		}
		nav
		{
			background-color: rgba(8, 8, 26, 0.92);
		}
		
		/* nav .btn{
			background-color :#ffffff;
			border: 2px solid rgb(165, 165, 165);
			width : 10em;
			height: 4em;
			margin-left: 2em;
			margin-right: 2em;
			margin-top : 1em;
			margin-bottom : 1em;
			border-radius: 0%;
		} */


		/* #navbarResponsive {
			margin-right: 1em;
			margin-right: 1em;
		} */
		.navbar-nav{
			margin-right: 1em;
		}
		.li{
			margin: 60px;
		}


		nav img.navMeteo
		{
			min-width: 75px;
			width:75px;
			margin-left:50px;
		}
		.nav-link{
			padding-right:0.5em;
			padding-left:0.5em;

		}
		/* 
		nav img.eumetsat
		{
			width:10%;
			margin-left:50px;
		}
		nav img.nwpsaf
		{
			width:9%;
			margin-left:50px;
		}
		nav img.met_of
		{
			width:9%;
			margin-left:50px;
		}
		nav img.ecmwf
		{
			width:7%;
			margin-left:50px;
		}
		nav img.dwd
		{
			width:3.5%;
			margin-left:50px;
		}
		nav img.cnrm
		{
			width:4.5%;
			margin-left:50px;
		}
		nav img.cnrs
		{
			width:4.5%;
			margin-left:50px;
		} */
		
		/*----Image slide----*/
		div.Slide img
		{
			width:100%;
			height: 27em;
			object-fit: cover;
		}

/*----Craouselle----*/

		.carousel{
			margin-top: 1em;
			width: 100%;
			margin-right: 0%;
			margin-left: 0%;
			padding: 0em;
		}
		.carousel-item{
			border-radius: 100em;
			border-color: #f2f2f2;
		}
		.centered-div{
			padding: 2em;
		}

		.carousel-item img {
			opacity: 0.750;
		}

		.carousel-caption {
			display: flex;
			flex-direction: column;
			justify-content: center;
			align-items: center;
			height: 100%; /* Assurez-vous que la hauteur du carousel-caption est de 100% */
		}

		h1{
			font-family: "roboto", sans-serif;
			color : white;
			font-weight:bold;
			-webkit-text-stroke: 1px #000000;
			text-stroke: 10px #020202;
		}

		

		hr{
			border-color : white;
			width: 10em;
			border-width: 5px;
			border-radius: 1em;
		}


		

/*----Resultat recherche----*/

	.res{
		color :white;
		padding : 3em;
		border-radius: 1em;

	}

	

	.res, .res .chargement, .res .rien{
		position: relative;
		/* height:15em; */
		display: block;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		z-index: 2;
	}



	.res .chargement, .res .rien{
		height:15em;
	}

	.res p{
		font-size: 25px;
	}

	.thumbnail-container{
		font-size: 1px;
	}

/*----Barre de chargement----*/

	.progress-container {
		width: 100%;
		background-color: #ccc;
		height: 20px;
		border-radius: 10px;
		position: relative;
		margin-bottom : 1em;
	}
	
	.progress-bar {
		width: 0;
		height: 100%;
		background-color: #3498db;
		border-radius: 10px;
		transition: width 1s;
	}
/*----Composition colorée----*/

	.block_cc
	{
		display: flex; 
	}

/*------Index.php------*/

	/*----IASI----*/
	div.IASI
	{
		text-align: center;
	}
	.IASI .row{
		margin-left : 0em !important;
	}

	.btn_select,
	.btn_form {
		width : 10em;
		height: 3em;
		background-color: #ffffff;
		color: #000000;
		padding: 10px 20px;
		font-size: 16px;
		border: 2px solid rgb(165, 165, 165);
		border-radius: 0px;
		cursor: pointer;
		transform: translate(0, 0);
		transition: box-shadow 0.3s ease, transform 0.3s ease, border-radius 0.3s ease, height 1s ease; 
	
		box-shadow: 0px 0px 0px rgba(0, 0, 0, 0.3);
	}
	
	.btn_select:hover,
	.btn_form:hover{
		box-shadow: 6px 6px 0px rgba(0, 0, 0, 1); 
		transform: translate(-6px, -6px); 
		background-color: rgb(123,178,222);
		border-color: rgb(123,178,222);
	}

	.btn_select:active,
	.btn_form:active{
		box-shadow: 0px 0px 0px rgba(0, 0, 0, 1);
		transform: translate(0px, 0px); 
		transition : transform 0.1s ease, background-color 0.1s ease, box-shadow 0.1s ease;
	}

	.btn_select.a_actif{
		font-weight: bold;
		border-color: rgb(123,178,222);
		border-radius: 2em 2em 0em 0em ;
		width : 10em;
		height: 60px;
		background-color: rgb(123,178,222);
		transition: height 0.4s ease-in, padding 0.5s, box-shadow 0.3s ease, transform 0.3s ease;
		}	
	.btn_select.a_actif:hover{
		transform : translate(-6px, -6px);
		box-shadow: 3px 0px 0px rgba(0, 0, 0, 1); 
	}	

	
	form {
		border-radius: 2em;
		transform: translate(-6px, -6px);
		box-shadow: 6px 6px 0px rgba(0, 0, 0, 1);
		padding : 0em;
		background-color: rgb(123,178,222);
		height : 0px;
		/* width : 30px; */
		overflow: hidden;
		transition: opacity 0.3s ease,height 0.3s ease-in,/* width 0.3s ease-in,*/ padding 0.5s, margin 0.6s, box-shadow 0.3s ease, transform 0.3s ease, border-radius 0.2s ease;	}


	/*----News2----*/
	div.news2 
	{
		text-align:center;
		padding: 20px;
		/* padding-bottom: 100px; */
		background: repeating-linear-gradient(
  			45deg,
  			white,
  			white 10px,
  			rgba(0,85,141,0.2) 5px,
 			rgba(0,85,141,0.2) 15px);
	}

	#news_txt
	{
		padding-left:40px;
	}

	div.news2 #scroll
	{
		height: 600px;
		width: 100%;
		overflow:auto;
	} 

	.news2 div.case
	{
	background-color: white;
	width: 100%;
	padding: 0px;
	margin-bottom:20px;
	box-shadow: 8px 8px 8px #000000;
	}

	.news2 div.titre
	{
		height: 220px;
		
	}
	.news2 img
	{
		height: 150px;
		width: 100%;
		object-fit: cover;
	}

	.news2 div.lien
	{
		border-top:1px solid lightgrey;
		padding-bottom: 20px;
		overflow: hidden;
		max-height: 100px;
		moz-transition: 1.5s;
    		-ms-transition: 1.5s;
    		-o-transition: 1.5s;
    		-webkit-transition: 1.5s;
    		transition: 1.5s;
	}
	
	.news2 div.lien:hover{ max-height:999px; }

/*------Rapport.php------*/

div.report{
	padding-bottom: 100px;
}
div.formulair{
	padding-left: 10%;
	padding-right: 10%;
	border-left: 1px solid lightgrey;
	border-right: 1px solid lightgrey;
}
.formulair select{
	border: none;
	border-bottom: 1px solid grey;
}
.formulair div.pied{
	text-align: center;
}
.formulair div.pied input.Bouton{
	width:200px;
}
/*--------------------*/

/*-----Afficher rapport-------*/
.view_rap{
	text-align: center;
}
.view_rap div.lien{
	width:90%;
}
.view_rap div.lien div.case{
	transition: 0.5s;
}
.view_rap div.lien div.case:hover{
	margin-left: 20px;
}
.view_rap div.lien a{
	color: rgb(0,95,151);
	text-decoration: none;
	font-size: 25px;
	overflow-wrap: break-word;
}
.view_rap div.lien a:hover{
	color: rgb(0,145,201);
}
.view_rap div.ligne{
	border: 1px solid lightgrey;
	width: 80%;
}
.btn-data{
	background-color: #3498db !important;
	border-color: #3498db !important;
}
/*---------------------------*/

/*-----Afficher carte-------*/
div.view_carte{
	text-align: center;
}

.view_carte div.carte img{
	width: 100px;
}

/*------Carte-------*/

.slide * {
  box-sizing: border-box;
}

.slide img {
  vertical-align: middle;
  object-fit: cover;
}

/* Position the image container (needed to position the left and right arrows) */
.slide .Container {
  position: relative;
}

/* Hide the images by default */
.slide .mySlides {
  display: none;
}
.slide{
	margin-right: 5em;
}

/* Add a pointer when hovering over the thumbnail images */
.slide .cursor {
  cursor: pointer;
}

/* Next & previous buttons */
.slide .prev,
.slide .next {
  cursor: pointer;
  position: absolute;
  top: 25em;
  width: auto;
  padding: 16px;
  margin-top: -50px;
  color: white;
  font-weight: normal !important;
  font-size: 20px;
  border-radius: 0 3px 3px 0;
  user-select: none;
  -webkit-user-select: none;
}

/* Position the "next button" to the right */
.slide .next {
  right: -3em;
  border-radius: 3px 0 0 3px;
}

.slide .prev {
	left: -3em;
	border-radius: 3px 0 0 3px;
  }

/* On hover, add a black background color with a little bit see-through */
.slide .prev:hover,
.slide .next:hover {
  background-color: rgba(0, 0, 0, 0.8);
}

/* Number text (1/3 etc) */
.slide .numbertext {
  color: #f2f2f2;
  font-size: 12px;
  padding: 8px 12px;
  position: absolute;
  top: 0;
}

/* Container for image text */
.slide .caption-container {
  text-align: center;
  background-color: #222;
  padding: 2px 16px;
  color: white;
}
.slide #caption{
	overflow-wrap: break-word;
}
.slide .Row:after {
  content: "";
  display: table;
  clear: both;
}

/* Six columns side by side */
.slide .column {
  float: left;
  width: 16.66%;
}

/* Add a transparency effect for thumnbail images */
.slide .demo {
  opacity: 0.6;
  height: 100px;
}

.slide .active,
.demo:hover {
  opacity: 1;
}
/*Afficher carte*/
div.coordonnee{
	background-color: white;
	border: 1px solid rgb(0,85,141);
	height: 100px;
	width: 200px;
	margin: 0px;
	display: none;
}
div.coordonnee div{
	width: 170px;
	margin: 0px;
	padding: 0px;
}
div.coordonnee input{
	width: 80px;
	border: white;
	margin: 0px;
	padding: 0px;
}
div.coordonnee label{
	margin: 0px;
	padding: 0px;
}

div#follower{
    	position: absolute;
    	float: left;
}
/*---------------*/

.row{
	width: 100%;
}

/*--Définition du footer--*/
footer{
	padding-left: 1em;
	background-color: rgb(33,37,41, 0.75);
	position: relative;
	z-index: 1; /* Placez-le en arrière-plan */
}

footer > div:first-child {
	height: 15em;
	margin-left: 0em !important;
}

.img_footer{
	height: 75px;
}

.moitie{
	border: 1em solid rgba(8, 8, 26, 1);
	
}

.btn-container{
	margin : 1em;
	width: 7em;
	height: 7em;
}

.btn-primary{
	background-color: white;
	border-color: white;
}
.btn-primary:hover{
	background-color: #a8c5f0 !important;
	border-color: #a8c5f0 !important;

}
.svg_container{
	object-fit: contain;
}


.stars {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(8, 8, 26, 1); /* Couleur de fond du ciel (noir) */
    z-index: 0; /* Placez-le en arrière-plan */
}

.star {
    position: absolute;
    width: 1px; /* Largeur d'une étoile */
    height: 1px; /* Hauteur d'une étoile */
    background: #fff; /* Couleur des étoiles (blanc) */
    box-shadow: 0 0 5px #fff,
				100px 100px 3px #fff; /* Ombre pour donner un aspect plus brillant */
    animation: twinkle 2s infinite linear; /* Animation des étoiles */

    /* Cela donne une forme plus aléatoire aux étoiles */
    transform: rotate(45deg);
}

@keyframes twinkle {
    0%, 100% {
        opacity: 0.5;
    }
    50% {
        opacity: 1;
    }
}

.case{
	position: relative;
	z-index: 1; /* Placez-le en arrière-plan */
}

.star-falling {
    position: fixed;
    background: #fff;
    box-shadow: 0 0 5px #fff;
    animation: fall 2s linear 1;
    transform: rotate(45deg);
}

@keyframes fall {
    0%, 100% {
        opacity: 0;
        transform: rotate(45deg); /* Ajustez la valeur selon vos besoins */
    }
    10%, 90% {
        opacity: 1;
    }
    100% {
        transform: rotate(45deg); /* Ajustez la valeur selon vos besoins */
    }
}