@charset "UTF-8";
/* CSS Document */

/*Div qui contient toute la météo*/
#la-meteo .gallery-full-css .carte-item {
	width:100%;
	margin:20px 0 20px 0;
	padding:0;
	height:auto;
	overflow: hidden;
	text-align: center;
	background-color:#FFF;
}

/*La div qui contient les div Matin / Aprem / Soir*/
figure .krea3meteo_jour{
	margin:40px 0 20px 0;
	text-align: center;
	clear:both;
}

/*Les 3 div Matin / Aprem / Soir*/
figure .krea3meteo_matin, figure .krea3meteo_apres-midi, figure .krea3meteo_soir{
	display: inline-block;
	width:29%;
	height:200px;
	margin:10px 10px 10px 10px;
	background-color:#CCC;
	padding-top:20px;
	color:#FFF;
	font-family: 'Lato', sans-serif;
	font-weight:400;
	text-transform:uppercase;
	font-size:1.3em;
	/*text-shadow: 1px 1px 2px #25211e;*/
}

figure .krea3meteo_matin{background:#95ae50;}
figure .krea3meteo_apres-midi{background:#6c9a59;}
figure .krea3meteo_soir{background:#9b3a3b;}

figure .krea3meteo_matin img, figure .krea3meteo_apres-midi img, figure .krea3meteo_soir img{
	margin-top:10px;
}

/*Pour la météo d'Aujourd'hui qui a besoin d'un petit ajustement*/
#krea3meteogen .carte-item:first-of-type{
	position:relative;
	top:15px;
}



/*Aujourd'hui / Demain / Lundi / etc.*/
#krea3meteogen .carte-item, #krea3meteogen .controls{
	left:0;
	background:#FFF;
	width:100%;
	margin:20px auto 0 auto;
	padding:0;
	display:block;
}

/*La couleur d'un lien Aujourd'hui / Demain*/
#la-meteo .gallery-full-css .control-button {
	font-weight:700;
	font-size:1.1em;
	display:inline-block;
	margin:0 10px 20px 10px;
	color:#a92535;
	padding:5px 10px;
	border:2px solid #fff;
}
#la-meteo .gallery-full-css .control-button:hover {
}

/*Pour que le lien Aujourd'hui soit de la même couleur que les autres quand il n'est pas sélectionnée*/
#la-meteo .gallery-full-css .control-operator:target ~ .controls .control-button {
	background:none !important;
	color:#a92535 !important;
}

/*La période sélectionnée (Aujourd'hui, demain, etc)*/
#la-meteo .gallery-full-css .control-button:first-of-type, 
#la-meteo .gallery-full-css .control-operator:nth-of-type(1):target ~ .controls .control-button:nth-of-type(1), 
#la-meteo .gallery-full-css .control-operator:nth-of-type(2):target ~ .controls .control-button:nth-of-type(2), 
#la-meteo .gallery-full-css .control-operator:nth-of-type(3):target ~ .controls .control-button:nth-of-type(3), 
#la-meteo .gallery-full-css .control-operator:nth-of-type(4):target ~ .controls .control-button:nth-of-type(4), 
#la-meteo .gallery-full-css .control-operator:nth-of-type(5):target ~ .controls .control-button:nth-of-type(5) {
	color:#fff !important;
	background:#a92535 !important;
}


/*LE RESPONSIVE*/

@media screen and (max-width:737px){
	figure .krea3meteo_matin, figure .krea3meteo_apres-midi, figure .krea3meteo_soir{
	margin:10px 5px 10px 5px;
}
}

@media screen and (max-width:700px){
	/*La div qui contient les div Matin / Aprem / Soir*/
	/*Besoin d'un margin plus grand quand Aujourd'hui / DEmain / LUndi / etc. est sur 2 lignes*/
	figure .krea3meteo_jour{
	margin:116px 0 20px 0;
}
}


@media screen and (max-width:440px){
	#la-meteo{
		height:700px; /*Sinon la météo recouvre le pied de page*/
	}
	
	/*La div qui contient les div Matin / Aprem / Soir*/
	figure .krea3meteo_jour{
	margin:110px 0 20px 0;
}
	
	figure .krea3meteo_matin, figure .krea3meteo_apres-midi, figure .krea3meteo_soir{
	display:block;
	width:100%;
	height:180px;
	margin:10px 0 10px 0;
}
}

#krea3meteogen .carte-item{
	max-width:100% !important;
}