/********************************************
	* Domaine : carre-pleyel.fr
	*
	* Exploitant : AG Real Estate
	*
	* Rôle : Feuille de style spécifique contenus page accessibilité 
	*
	* Auteur : Ultra-Fluide, copyright 2021
********************************************/

/**** couleurs  ********/
/************************/
:root{
	--fond-trame: #ffeec5;
	--titre: #F4BF50;
	--sous-titre: #715211;
	--encart: #F4BF50;
}
/**   Carte large temps de transport ***/
/**********************************/
section.technique > div > div > img:nth-of-type(2) { /* picto la défense */
	width:12%;
}
/**   texte carte transports **/
/**********************************/
section#transports > div > article:nth-of-type(1) li img {
	height:20px;
	display:inline-block;
	position:relative;
	top:5px;
}
section#transports > div > article:nth-of-type(1) li {
	line-height:30px;
}
/**   carte transports **/
/**********************************/
section#transports > div > article:nth-of-type(2) {
	padding:0;
}
section#transports article:nth-of-type(2) img{
	display:block;
	width:100%;
}
/**  pictos carte transports **/
/**********************************/
#metro-13, #metro-14, #rer, #velib, #a86{
	position:absolute;
	width:5%;
}
/** annimation pictos transports **/
/**********************************/
@keyframes pulsation { from { width:90%; } 50% { width:100%; } to { width:100%; } }
section#transports article:nth-of-type(2) > div > .picto {
	animation: 1s linear 0s infinite alternate pulsation;
}
div > .picto .cls-1{
	fill:#212e33;
	stroke:#fff;
	stroke-miterlimit:10;
}
div > .picto .cls-2{
	fill:#fff;
}
/** annimation des trajets ********/
/**********************************/
svg.trajet {
	position: absolute;
	width: 1px;
	transition: width 0s linear 2s;
}
div:hover > svg.trajet {
	transition: width 0s linear 0s;
}
svg.trajet > path{
	transition: opacity 2s linear;
	opacity: 0;
	stroke-width:8;
	fill:none;
	stroke:#F4BF50;
	stroke-dasharray: 20;
	animation: parcours 7s linear infinite;
}
div:hover > svg.trajet > path {
	opacity: 1;
}
@keyframes parcours { to { stroke-dashoffset: -600; }  }
/** annimations popups    **/
/*****************/
section#transports article:nth-of-type(2) p{
	position:absolute;
	border:0 solid var(--titre);
	box-shadow: 0 0 4px 0px var(--sous-titre);
	background:white;
	font-size:.9rem;
	margin:0;
	transition: all .4s ease-in;
	top:0;
	left:0;
	width:0;
	height:0;
	overflow:hidden;
	border-radius: 3px;
}
/** caracteristiques picto et trajet A86  **/
/******************************************/
#a86 {
	top:5%;
	left:56%;
}
div#a86 > svg.trajet {
	top: 0;
	left: -437%;
	transform: translateY(17.17%);
}
div#a86:hover > svg.trajet {
	width: 478%;
}
div#a86:hover svg.picto .cls-1{
	fill:#1471b5;
}
/** popup  A86  **/
/*****************/
section#transports article:nth-of-type(2) div#a86:hover > p{
	padding:5px;
	transform: translateX(-105%);
	width:150px;
	height:80px;
	border-width:3px;
}

/** caracteristiques picto et trajet Velib  **/
/******************************************/
#velib {
	top:44%;
	left:24%;
}
div#velib > svg.trajet {
	top: 0;
	left: 100%;
	transform: translateY(17%);
}
div#velib:hover > svg.trajet {
	width: 238.25%;
}
div#velib:hover svg.picto .cls-1{
	fill:#731b56;
}
/** popup  velib  **/
/*****************/
section#transports article:nth-of-type(2) div#velib:hover > p{
	padding:5px;
	transform: translateX(-105%);
	width:160px;
	height:96px;
	border-width:3px;
}
/** caracteristiques picto et trajet Metro 13  **/
/******************************************/
#metro-13 {
	top:57%;
	left:27%;
}
div#metro-13 > svg.trajet {
	top: -5%;
	left: 90%;
}
div#metro-13 > svg.trajet path {
	stroke-width:12;
}
div#metro-13:hover > svg.trajet {
	width: 194.46%;
}
div#metro-13:hover svg.picto .cls-1, div#metro-14:hover svg.picto .cls-1, div#rer:hover svg.picto .cls-1{
	fill:white;
	stroke:#7f7e7e;
	stroke-width:4;
}
div#metro-13:hover svg.picto .cls-2, div#metro-14:hover svg.picto .cls-2, div#rer:hover svg.picto .cls-2{
	fill:#7f7e7e;
}
/** popup  Métro 13  **/
/*****************/
section#transports article:nth-of-type(2) div#metro-13:hover > p{
	padding:5px;
	transform: translateX(-105%);
	width:160px;
	height:110px;
	border-width:3px;
}
/** caracteristiques picto et trajet Metro 14  **/
/******************************************/
#metro-14 {
	top:79%;
	left:45%;
}
div#metro-14 > svg.trajet {
	top: 0;
	left: -130%;
	transform: translateY(-95%);
}
div#metro-14:hover > svg.trajet {
	width: 134.85%;
}
/** popup  Métro 14  **/
/*****************/
section#transports article:nth-of-type(2) div#metro-14:hover > p{
	padding:5px;
	transform: translateX(-105%);
	width:160px;
	height:110px;
	border-width:3px;
}
/** caracteristiques picto et trajet RER  **/
/******************************************/
#rer {
	top:81%;
	left:91%;
}
div#rer > svg.trajet {
	transform: translate(-95.8%,-100%);
	left:0;
}
div#rer:hover > svg.trajet {
	width: 1100%;
}
/** popup  RER  **/
/*****************/
section#transports article:nth-of-type(2) div#rer:hover > p{
	padding:5px;
	transform: translateX(-105%);
	width:230px;
	height:110px;
	border-width:3px;
}