/*tableau prévisions*/

a img {
	border: none;
}

body {
	width: 100%;
	background-color: #f1f1f1;
	font-size: 1.3em;
}
.largeurPleine {
	/* width: 2920px; */
	width: 100%;
}
.fontEspPro {
	font-family: helvetica,arial,sans-serif;
}

.prevision>thead, .nomParamsPrevs>thead{
	padding: 0px 0px 0px 0px;
	border: none;
}
.prevision thead tr, .nomParamsPrevs thead tr{
	padding: 0px 0px 0px 0px;
	border: none;
	background-color: #5592BF;
	color: white;
}
.prevision thead tr th, .nomParamsPrevs thead tr th{
	padding: 5px 0px 5px 0px;
	border-bottom: 1px solid #c3ccdd;
	border-left: none;
	border-right: none;
	text-align: center;
	font-size: 1.3em;
	overflow: hidden;
	text-overflow: ellipsis;
}

.prevision>tbody, .nomParamsPrevs tbody{
	padding: 0px 0px 0px 0px;
	border: none;
}
.prevision>tbody>tr, .nomParamsPrevs tbody tr {
	padding: 0px 0px 0px 0px;
	border: none;
	height: 28px;
}
.prevision>tbody>tr>td, .nomParamsPrevs tbody tr td {
	border: none;
	white-space: nowrap;
	text-align: center;
	background-color: #24A9E2;
	font-size: 1.3em;
}

.nomParamsPrevs thead tr th {
	text-align: left;
	padding-left: 8px;
	padding-right: 10px;
	font-size: 1.3em;
	color: white;
}

.nomParamsPrevs tbody tr td {
	text-align: left;
	padding-left: 8px;
	padding-right: 10px;
	font-size: 1.3em;
	color: white;
}

.prevision>thead>tr>th.jourAffiche, .nomParamsPrevs>thead>tr>th.jourAffiche{
	text-align: left;
	background-color: #3F6888;
	color: white;
	padding: 5px 0px 5px 10px !important;
	text-align: center;
	font-size: 1.3em;
}

.inviJourAffiche {
	color: #3F6888;
}

.prevision>tbody>tr>td.boutonDefilementD{
	background-color: #90D1EF;
}
.prevision>tbody>tr>td.boutonDefilementG{
	background-color: #90D1EF;
}

#observs.prevision tr td, #observs.prevision tr td th {
	width: 90px;
}

.prevsAere {
	padding-right:10px;
	padding-left:10px;
}
.styleEcranContenu, .contParamsPrevs, .contAppelPrevs, .contCompModel {
	display: inline-block;
	margin-top:15px;
	font-family: Helvetica, Arial, sans-serif;
	vertical-align: top;
}
.contParamsPrevs {
	margin-left: 1%;
}
.contAppelPrevs {
	background-color: white;
	padding-top: 30px;
	padding-left: 20px;
	padding-right: 35px;
	padding-bottom: 15px;
}
.contCompModel {
	background-color: white;
	padding-top: 30px;
	padding-left: 20px;
	padding-right: 35px;
	padding-bottom: 15px;
	width: 80%;
}
.smallWind {
	height:50px;	
}
.ctrlTend {
	display:inline-block;
	background-color: #87cceb;
	margin-top:20px;
	border: 1px solid black;
}
.ctrlTend td img {
	display: block;
	width: 100%;
	height: auto;
}
.ctrlAlertes, .ctrlAlertesPro {
	display: inline-block;
	width: 900px;
	background-color: #ffffff;
	margin-left:14px;
	margin-top:20px;
}

.sepTend {
	border-bottom: 1px solid #f1f1f1;
}
.tendTempMin {
	font-size: 1.7em;
	vertical-align:bottom;
	border-bottom: 1px solid black;	
}
.tendTempMin span {
	color: #858688;
}
.tendWrite {
	color: #5e6164;
}
.tendRaf {
	color:#c60005;
}
.tendTempMax {
	font-size: 1.7em;
	vertical-align:top;
}
.tendJourSemaine {
	margin-left: 8px;
	font-weight: bold;
	font-size: 22px;
}
.alertesAucuneJour {
	background-color: #78d019;
}
.tabAlertes {
	margin-left: 20px;
	margin-bottom: 20px;
}
.tabAlertes tr {
	height: 30px;
}
.tabAlertes td {
	width: 100px;
	text-align: center;	
}
.tabAlertes th {
	text-align: left;
}
.tabAlertes th span {
	margin-left: 10px;	
}
.titreTabAlertes {
	font-size: 20px;
	display: block;
	margin-top: 16px;
	margin-left: 15px;
	padding-bottom:12px;
}
.titreZone {
	font-size: 20px;
}
.btnLiensMenuHoriz {
	background-color: #87CCEB;
	display:inline-block;
	height: 60px;
	font-size: 1.1em;
	border-right: solid 1px #73b4d5;
	text-align: center;
	padding-left: 10px;
	padding-right: 10px;
	margin-top: 0px;
}
.btnLiensMenuHoriz a {
	color: #28648a;
	display: block;
	height: 39px;
	text-decoration: none;
	padding-top: 21px;
	white-space: nowrap;
}
.btnLiensMenuHoriz:hover {
	background-color: #28648a;
}
.logoMenuHoriz {
	display: inline-block;
	width: 345px;
	height: 60px;
	vertical-align: top;
	border-right: solid 1px #73b4d5;
	text-align: center;
}
.logoMenuHoriz img {
	width: 285px;
	height: 45px;
	margin-top: 7px;
}
.bandeHaut {
	height: 30px;
	background-color: #163E7B;
}
.bandeHaut a {
	margin-left: 80%;
	padding-top: 4px;
	font-size: 1.3em;
	font-weight:bold;
	color: white;
	cursor: pointer;
}
.bandeEtMenuHoriz {
	background-color: #87CCEB;
	font-family: Helvetica, Arial, sans-serif;
	display: block;
}
#blocTitreHeader {
	height: 48px;
	font-size: 2.2em;
	margin-top: 12px;	
}
#alertesHeader {
	height: 35px;
	padding-left: 2px;
	padding-top: 4px;
	font-size: 1em;
	font-weight: bold;
	white-space: nowrap;
}

.invisible {
	display: none;	
}

#dateHeader {
	width: 5%;
	height: 95px;
	display: inline-block;
	vertical-align: top;
	margin-top: 20px;
	padding-left: 1%;
	line-height: 1;
}
#commentaireHeader {
	width: 94%;
	display: inline-block;
	margin-top: 10px;
}

#contErreur {
	display: inline-block;
	vertical-align: top;
	width: 1200px;
}
.villeFav {
	background-color:#24a9e2;
}
.grosTitreAnnonce {
	font-weight: bold;
	font-size: 20px;
}
.moyenTitreAnnonce {
	font-weight: bold;
	font-size: 18px;
}
.petitTitreAnnonce {
	font-weight: bold;
}
.contGlobalPourFavs {
	display: inline-block;
	vertical-align: top;
	margin-top: 10px;
}
.contBtnFavs {
	margin-left: 10px;
}
.enrichissEcranContenuFavs {
	padding-top: 0px;
	background-color: white;
}
.titreEspacePro {
	color: #012b5d;
	font-weight: bold;
}
.frameBulletinMeteo {
	width: 1100px;
	height: 800px;
	overflow: hidden;
}
#pasImprimerDeux {
	display: inline-block;	
}
.imgBigPictos {
	width: 145px;
	height: 145px;
}
.imgSmallPictos {
	width: 70px;
	height: 70px;
}

.footer {
	clear: both;
	background-color: #163e79;
	height: 150px;
	width: 100%;	
}

@media screen and (min-width: 401px) {
    #connexion {
        width: 390px;
        height: 325px;
		text-align: center;
		background-color: #a8daf1;
    }
}

@media screen and (max-width: 400px) {
   #connexion {
       width: 250px;
       height: 325px;
		text-align: center;
		background-color: #a8daf1;
   }
}

#blocTitreHeader {
	width: 100%;
	overflow: hidden;
}

table.prevision {
	table-layout: fixed;
}

table.prevision td {
	overflow: hidden;
}

#contLigneTend {
	width: 100%;
}

/* Connexion */
.input-with-icon {
    position: relative;
}

.input-with-icon .icon {
    position: absolute;
    left: 3px; /* Ajustez la position de l'icône selon vos besoins */
    top: 13%;
    transform: translateY(-50%);
    height: 24px; /* Ajustez la taille de l'icône selon vos besoins */
}
.input-with-icon .icon_pass {
    position: absolute;
    left: 3px; /* Ajustez la position de l'icône selon vos besoins */
    top: 43%;
    transform: translateY(-50%);
    height: 24px; /* Ajustez la taille de l'icône selon vos besoins */
}
.input-with-icon .icon_pass {
    position: absolute;
    left: 3px; /* Ajustez la position de l'icône selon vos besoins */
    top: 87%;
    transform: translateY(-50%);
    height: 24px; /* Ajustez la taille de l'icône selon vos besoins */
}
.input-with-icon input {
    padding-left: 45px; /* Ajustez la valeur en fonction de la largeur de l'icône */
    /* Ajoutez d'autres styles si nécessaire */
}
.tet_conn {
  background-color: #fff;
  box-shadow: 0 3px 1px -2px rgba(0,0,0,.2),0 2px 2px rgba(0,0,0,.14),0 1px 5px rgba(0,0,0,.12);
  margin-bottom: 10px;
 ;
  width: 100%;
}
.bandeau {
  overflow: hidden;
   flex-grow: 1; /* Fait en sorte que le bandeau s'étende pour remplir l'espace disponible */
}

.mots-cles {
  list-style-type: none;
  padding: 0;
  margin: 0;
  white-space: nowrap;
  animation: defilement 30s linear infinite;
}
.mots-cles.pause {
  animation-play-state: paused; /* Arrête l'animation des mots-clés */
}
.mots-cles li {
  display: inline-block;
  margin-right: 20px;
}

@keyframes defilement {
  0% { transform: translateX(100%); }
  100% { transform: translateX(-100%); }
}
@media all and (min-width: 1366px) {
	#connexion {
		margin-top: 65px;
		margin-left: 488px;
	}
}
@media all and (min-width: 1280px) and (max-width: 1365px) {
	#connexion {
		margin-top: 65px;
		margin-left: 380px;
	}
}

@media all and (min-width: 1024px) and (max-width: 1279px) {
	#connexion {
		margin-top: 65px;
		margin-left: 180px;
	}	
}

@media all and (min-width: 800px) and (max-width: 1023px) {
	#connexion {
		margin-top: 65px;
		margin-left: 100px;
	}
}

@media all and (min-width: 600px) and (max-width: 799px) {
	#connexion {
		margin-top: 65px;
		margin-left: 100px;
	}
}

@media all and (max-width: 599px) {
	#connexion {
		margin-top: 65px;
		margin-left: 10px;
	}
}

/* colGaucheActu, et actuHeader */

@media all and (min-width: 900px) {
	#colGaucheActu {
		display: inline-block;
		background-color: #24a9e2;
		vertical-align: top;
	}
	#actuHeader {
		display: inline-block;
		background-color: #24a9e2;
		color: white;
		text-align: justify;
	}
	#onAlertes {
		display: inline-block;
		height: 66px;
	}
}

@media all and (max-width: 899px) {
	#colGaucheActu {
		display: block;
		width: 100% !important;
		background-color: #24a9e2;
	}
	#actuHeader {
		display: block;
		width: 100% !important;
		background-color: #24a9e2;
		color: white;
		text-align: justify;
	}
	#onAlertes {
		display: none;
	}
}

/* Menu horizontal */

@media all and (min-width: 970px) {
	#menuHoriz {
		display:inline-block;
	}
}

@media all and (max-width: 969px) {
	#menuHoriz {
		display: block;
	}
}

/* td et th des prévisions, et lien de bandeHaut, etc. */

@media all and (min-width: 800px) {
	.logoMenuHoriz {
		margin: 0;
	}
	#commentaireHeader .titreEspacePro {
		font-size: 1.3em;
	}
	#commentaireHeader .commEspPro {
		font-size: 1.2em;
	}
	#commentaireHeader a {
		font-size: 1.2em;
	}
	.boutFav {
		font-size: 1.2em;
	}
	#blocTitreHeader {
		padding-left: 20%;
		text-align: left;
	}
	#menuHoriz {
		display: inline-block;
	}
}

@media all and (max-width: 799px) and (min-width: 400px) {
	.prevision tr td, .nomParamsPrevs tr td, .prevision tr th, .nomParamsPrevs tr th {
		font-size: 0.6em !important;
	}
	.bandeHaut a {
		margin-left: 20% !important;
	}
	.logoMenuHoriz {
		width: 100% !important;
		margin: auto;
	}
	.btnLiensMenuHoriz {
		height: 20px !important;
		font-size: 0.6em !important;
		padding-left: 4px !important;
		padding-right: 4px !important;
	}
	.btnLiensMenuHoriz a {
		height: 10px !important;
		padding-top: 2px !important;
	}
	#commentaireHeader .titreEspacePro {
	font-size: 0.7em;
	}
	#commentaireHeader .commEspPro {
		font-size: 0.6em;
	}
	#commentaireHeader a {
		font-size: 0.6em;
	}
	.boutFav {
		font-size: 0.6em;
	}
	#blocTitreHeader {
		padding-left: 0;
		text-align: center;
	}
	#menuHoriz {
		display: block;
	}
}

@media all and (max-width: 399px) and (min-width: 347px){
	.prevision tr td, .nomParamsPrevs tr td, .prevision tr th, .nomParamsPrevs tr th {
		font-size: 0.6em !important;
	}
	.bandeHaut a {
		margin-left: 10% !important;
	}
	.logoMenuHoriz {
		width: 100% !important;
		margin: auto;
	}
	.btnLiensMenuHoriz {
		height: 15px !important;
		font-size: 0.5em !important;
		padding-left: 2px !important;
		padding-right: 2px !important;
	}
	.btnLiensMenuHoriz a {
		height: 10px !important;
		padding-top: 1px !important;
	}
	#commentaireHeader .titreEspacePro {
		font-size: 0.7em;
	}
	#commentaireHeader .commEspPro {
		font-size: 0.6em;
	}
	#commentaireHeader a {
		font-size: 0.6em;
	}
	.boutFav {
		font-size: 0.5em;
	}
	#blocTitreHeader {
		padding-left: 0;
		text-align: center;
	}
	#menuHoriz {
		display: block;
	}
}

@media all and (max-width: 346px) {
	.prevision tr td, .nomParamsPrevs tr td, .prevision tr th, .nomParamsPrevs tr th {
		font-size: 0.5em !important;
	}
	.bandeHaut a {
		margin-left: 5% !important;
	}
	.logoMenuHoriz {
		width: 100% !important;
		margin: auto;
	}
	.btnLiensMenuHoriz {
		height: 15px !important;
		font-size: 0.5em !important;
		padding-left: 2px !important;
		padding-right: 2px !important;
	}
	.btnLiensMenuHoriz a {
		height: 10px !important;
		padding-top: 1px !important;
	}
	#commentaireHeader .titreEspacePro {
	font-size: 0.6em;
	}
	#commentaireHeader .commEspPro {
		font-size: 0.5em;
	}
	#commentaireHeader a {
		font-size: 0.5em;
	}
	.boutFav {
		font-size: 0.5em;
	}
	#blocTitreHeader {
		padding-left: 0;
		text-align: center;
	}
	#menuHoriz {
		display: block;
	}
}