/********************************************
	* Domaine : pleyad.fr
	*
	* Exploitant : UBS 
	*
	* Rôle : Feuille de style pour la page situation
	*
	* Auteur : Ultra-Fluide, copyright 2022
********************************************/
section blockquote, section a, section p, section li {
	line-height: 1.9rem;
}
/**** Slide show  *****************/
/*****************************/
section.flexslider{
	position:relative;
}
section.flexslider img{
	width:100%;
	display: block;
}
section.flexslider p{
	position:absolute;
	bottom:100px;
	width:fit-content;
	padding:10px 20px 10px 60px;
	background:rgba(0, 155, 167, 0.65) ;
	color:white;
	font-size:2rem;
	font-weight:600;
	margin:0;
	line-height: normal;
}
section.flexslider p:last-child{
	bottom:41px;
}
section.flexslider ol{
	clear: both;
	text-align:right;
	padding-top:12px;
}
section.flexslider ol li{
	margin: 0 7px;
	display:inline-block;
}
section.flexslider ol li a{
	border-radius:5px;
	background:#ccc;
	height:10px;
	display:block;
	width: 10px;
	text-indent: 9999px;
	overflow:hidden;
}
section.flexslider ol li a.flex-active{
	background:#009ca2;
}
@media screen and (max-width: 855px) {
	section.flexslider p{
		display:none;
	}
}
/**** Pley it fast **/
/*****************************/
section#fast {
	position:relative;
	display: flex;
	flex-flow: row wrap;
	justify-content: space-between;
	margin-top:80px;
	padding-left:5%;
}
section#fast embed{
	width:100%;
}
section#fast article{
	position:absolute;
}
section#fast article img{
	width:100%;
	margin-bottom:50px;
}
section#fast article:nth-of-type(1){
	width:29%;
	top:0;
	left:5%;
}
section#fast article:nth-of-type(2){
	width:43%;
	bottom:0;
	right:4%;
}
@media screen and (max-width: 1000px) {
	section#fast p{
		background-color:rgba(230, 230, 230, 0.8) ;
	}
}
/**** Pley it fast **/
/*****Plan global du Grand Paris**********/
section#grand-paris{
	margin-top:80px;
}
section#grand-paris h2{
	color:#eeb303;
	padding-left:50px;
	text-transform: uppercase;
	line-height:2.2rem;
}
section#grand-paris h2 strong{
	color:white;
	background:#eeb303;
	padding:5px 10px;
}
section#grand-paris > img{
	display:block;
	width:90%;
	margin:0 auto;
	position:relative;
	top:-50px;
}
section#grand-paris ul{
	margin-left:50px;
	position:relative;
	top:-30px;
	
}
section#grand-paris li{
	padding-left:20px;
	background: url(images/temps-aujourdhui.svg) no-repeat left top;
	background-size: 2.5%;
	padding-left:30px;
	list-style-type: none;
}
section#grand-paris li:nth-of-type(2){
	background-image: url(images/temps-demain.svg);
}
section#grand-paris li:nth-of-type(3){
	background-image: url(images/temps-voiture.svg);
}
@media screen and (max-width: 750px) {
	section#grand-paris h2 {
		margin-bottom:20px;
	}
}
/**** Pley it fast **/
/*****transports**********/
section#transports {
	display: flex;
	flex-flow: row wrap;
	justify-content: space-between;
	margin-top:80px;
	padding-left:5%;
}
section#transports article{
	width:50%;
	position:relative;
}
section#transports h2{
	text-transform: uppercase;
	font-weight: 500;
	font-size: 1.4rem;
	margin-bottom: 30px;
}
section#transports p{
	font-size: 1rem;
	padding-right:30px;
}
section#transports embed{
	width:100%;
}
section#transports h3{
	color:#f7a601;
	font-size:1rem;
	text-align:right;
	position:absolute;
	right:67%;
	bottom:20%;
	font-size: 0.9rem;
	line-height:1.05rem;
	width:max-content;
	font-weight: 500;
}
section#transports h3:last-child{
	bottom:0;
}
section#transports h3 strong{
	font-size:2rem;
}
@media screen and (max-width: 800px) {
	section#transports h3{
		
		bottom:50%;
		
	}
	section#transports h3:last-child{
		bottom:30%;
	}
}
/**** Pley it fast **/
/*****quartier**********/
section#quartier {
	position:relative;
}
section#quartier embed{
	width:65%;
	display:block;
}
section#quartier article{
	position:absolute;
	right:0;
	top:50%;
	transform : translateY(-50%);
	width:41%;
	min-width:380px;
}
section#quartier article div{
	padding:20px 0 20px 20px;
}
section#quartier article div p{
	color:white;
}
section#quartier article div:first-child p{
	margin:0;
}
section#quartier article div:last-child{
	background:#eeb303;
	border-radius: 0 0 0 15px;
}
section#quartier article div:first-child{
	border-radius: 15px 0 0 0;
	background: #105f67;
}
section#quartier article div:first-child:before{
	content:"";
	position:absolute;
	top:-33px;
	left:5px;
	height:55px;
	width:35px;
	background:  url(images/numero.svg) no-repeat ;
	background-size: 100%;
}
section#quartier article div img{
	height:30px;
	vertical-align:bottom;
	margin-right:10px;
}
@media screen and (max-width: 1200px) {
	section#quartier article{
		position:relative;
		top:50%;
		transform : translateY(-90%);
		width:100%;
		border-radius: 0;
		display: flex;
		flex-flow: row wrap;
	}
	section#quartier article div:first-child, div:last-child{
		border-radius: 0;
	}
	section#quartier embed{
		width:95%;
	}
}
@media screen and (max-width: 810px) {
	section#quartier article{
		transform : translateY(-50%);
	}
	section#quartier article div:first-child, div:last-child{
		border-radius: 0;
	}
}
/****  Pley it punchy*****************/
/***************** *********/
section#punchy {
	display: flex;
	flex-flow: row wrap;
	justify-content: space-between;
	position:relative;
	top:-2px;
	margin-bottom:40px;
}
section#punchy article {
	display: flex;
	flex-flow: column ;
	justify-content: center;
	width:50%;
	position:relative;
}
section#punchy article:nth-of-type(1), section#punchy article:nth-of-type(2){
	background:#105f67;
}
section#punchy article:nth-of-type(2) p{
	color:white;
}
section#punchy article:nth-of-type(1):before{
	content:"";
	position:absolute;
	top:-28px;
	right:0;
	height:180px;
	width:120px;
	background:  url(images/etoile.svg) no-repeat ;
	background-size: 100%;
}
section#punchy article img{
width:100%;
}
section#punchy article:first-child img{
width:80%;
margin:8%
}
section#punchy h2{
text-transform: uppercase;
font-weight:500;
font-size: 1.4rem;
padding:0 8%;
margin-bottom:20px;
}
section#punchy p{
padding:0 4% 0 8%;
margin:0;
}