a,
a:link,
a:visited {
	color: #5B7FA3;  /* bleu grisé, mon préféré */
/*	color: #6F8FAF; /*plus clair */
/*	color: #809DBA; /* très discret */
	*/
    text-decoration:none;
    border-bottom:1px dotted #EFE7DE;
}

a:hover {
	color:#705A35;
	text-decoration:none;
	border-bottom:3px solid red;
	background:#bae498;
}
ul {
	padding:0;
	margin:0;
	list-style-type:none;
}

li {
	margin-left:2px;
	float:left;
}

ul li a {
	text-decoration:none;
	border-bottom:none;
	background:none;
}

ul li a:hover {
	background-color:#D3D3D3;
}							
div.layer_fond {
	position:absolute;
	top:5px;
	left:5px;
	width:220px;
	height:55px;
	visibility:visible;
	z-index:10;
}

div.layer_fond img {
	height:60px;
	width:auto;
}

/* Décalage général pour laisser la place au logo */
div[class^="layer_"]:not(.layer_fond):not(.layer_departement) {
	transform: translateY(60px);
}

/* Entête    */
    div.layer_entete {position:absolute; top:10px; left:0px; width:780px; height:auto; font-size:40px; font-family:Arial; visibility:visible;  z-index:2} 
	div.layer_retour_liste {position:absolute; top:10px; left:780px; width:auto; height:auto; visibility:visible;  z-index:3;}
 	div.layer_retour {position:absolute; top:10px; left:930px; width:auto; height:auto; visibility:visible;  z-index:3;}
    div.layer_titre {position:absolute; top:70px; left:0px; width:auto; height:auto; visibility:visible;  z-index:3;} 
    div.layer_titrespe {position:absolute; top:72px; left:0px; width:1080px; height:auto; visibility:visible;  z-index:4; 
		font-size:45px;font-family:arial;font-weight:bolder;text-align:center;color: #A0600F}    
	
/* colonne 1 */
	div.layer_diaporama {position:absolute; top:135px; left:0px; width:auto; height:auto; visibility:visible;  z-index:2;}
	div.layer_avis {position:absolute; top:520px; left:10px; width:auto; height:auto; visibility:visible;  z-index:2;}
	div.layer_vignette {position:absolute; top:180px; left:26px; width:auto; height:auto; visibility:visible;  z-index:3;}
    div.layer_photospe{ position:absolute; top:580px; left:10px; width:auto; height:200px; visibility:visible; z-index:2;}

/* colonne 2 */	
	div.layer_departement {position:absolute; top:0px; left:0px; width:1px; height:1px; font-size: 40px; visibility:hidden;  z-index:3;} 
	div.layer_topoguide{ position:absolute; top:135px; left:240px; width:auto; height:auto; visibility:visible; z-index:3;}
	div.layer_topoguidespe{ position:absolute; top:180px; left:305px; width:340px; height:auto ;visibility:visible; z-index:3;
	font-size:35px; text-align:left; font-family:Arial; font-weight:bolder; color:red}
    div.layer_distance { position:absolute; top:260px; left:240px; width:auto; height:auto; visibility:visible; z-index:2;}	
    div.layer_longueur{ position:absolute; top:285px; left:250px; width:450px; height:auto; visibility:visible; z-index:2;
		font-size:35px;text-align:left;font-family:Arial;font-weight:normal;}
    div.layer_balisespe { position:absolute; top:420px; left:250px; width:450px; height:auto; visibility:visible; z-index:3;
	font-size:35px;text-align:left;font-family:Arial;font-weight:normal;}
    div.layer_transport{ position:absolute; top:750px; left:630px; width:auto; height:auto; visibility:visible; z-index:2;}
    div.layer_IGN{ position:absolute; top:810px; left:630px; width:auto; height:auto; visibility:visible; z-index:2;}
    div.layer_IGNspe{ position:absolute; top:815px; left:850px; width:auto; height:auto; visibility:visible; z-index:3;
		font-size:35px;text-align:right;font-family:Arial;font-weight:bolder;}

   div.layer_doc{ position:absolute; top:910px; left:0px; width:auto; height:auto; visibility:visible; z-index:2;}
    div.layer_docspe_wiki_1{ position:absolute; top:970px; left:9px; width:390px; height:auto; visibility:visible; z-index:3;
		font-size:35px;text-align:left;font-family:Arial;font-weight:normal;}
	div.layer_docspe_wiki_2{ position:absolute; top:1015px; left:9px; width:390px; height:auto; visibility:visible; z-index:3;
		font-size:35px;text-align:left;font-family:Arial;font-weight:normal;}
    div.layer_docspe_wiki_3{ position:absolute; top:1060px; left:9px; width:390px; height:auto; visibility:visible; z-index:3;
		font-size:35px;text-align:left;font-family:Arial;font-weight:normal;}
	div.layer_docspe_wiki_4{ position:absolute; top:1105px; left:9px; width:390px; height:auto; visibility:visible; z-index:3;
		font-size:35px;text-align:left;font-family:Arial;font-weight:normal;}
	div.layer_docspe_wiki_5{ position:absolute; top:1150px; left:9px; width:390px; height:auto; visibility:visible; z-index:3;
		font-size:35px;text-align:left;font-family:Arial;font-weight:normal;}
    div.layer_docspe_ville_1{ position:absolute; top:1250px; left:9px; width:390px; height:auto; visibility:visible; z-index:3;
		font-size:35px;text-align:left;font-family:Arial;font-weight:normal;}
	div.layer_docspe_ville_2{ position:absolute; top:1295px; left:9px; width:390px; height:auto; visibility:visible; z-index:3;
		font-size:35px;text-align:left;font-family:Arial;font-weight:normal;}
    div.layer_docspe_ville_3{ position:absolute; top:1340px; left:9px; width:390px; height:auto; visibility:visible; z-index:3;
		font-size:35px;text-align:left;font-family:Arial;font-weight:normal;}
	div.layer_docspe_ville_4{ position:absolute; top:1385px; left:9px; width:390px; height:auto; visibility:visible; z-index:3;
		font-size:35px;text-align:left;font-family:Arial;font-weight:normal;}
	div.layer_docspe_ville_5{ position:absolute; top:1430px; left:9px; width:390px; height:auto; visibility:visible; z-index:3;
		font-size:35px;text-align:left;font-family:Arial;font-weight:normal;}   
	div.layer_QRcode{ position:absolute; top:1530px; left:130px; width:auto; height:auto; visibility:visible; z-index:3;
		font-size:35px;text-align:left;font-family:Arial;font-weight:normal;}   
	
/* colonne 3 */	
	div.layer_trace { position:absolute; top:135px	; left:630px; width:450px; height:auto; visibility:visible; z-index:2;
		font-size:35px;font-family:Arial;font-weight:normal;text-align:left;}	
	div.layer_tracespe { position:absolute; top:170px	; left:750px; width:330px; height:auto; visibility:visible; z-index:2;
		font-size:35px;font-family:Arial;font-weight:normal;text-align:left;}	
	div.layer_trace_gps 
		{position: absolute;top: 190px;left: 630px;width: 410px;height: 535px;visibility: visible;z-index: 2;
		background: #ffffff;border: 1px solid #888;border-radius: 8px;overflow: hidden;box-shadow: 0 2px 10px rgba(0,0,0,.25);
		}
	div.layer_trace_visu { position:absolute; top:-680px	; left:250px; width:410px; height:auto; visibility:visible; z-index:2;
		font-size:35px;font-family:Arial;font-weight:normal;text-align:left;}	
	div.layer_commentaire{ position:absolute; top:860px; left:420px; width:660px; height:auto; visibility:visible; z-index:3;
		font-size:35px;font-family:Arial;font-weight:normal;text-align:left;}	
	div.layer_traces_part { position:relative; top:auto; left:600px; width:480px; height:auto; visibility:visible; z-index:2;
		font-size:35px;font-family:Arial;font-weight:normal;text-align:left;}	
	
/* sentiers non testés */		
	div.layer_topoguidenouv{ position:absolute; top:1950px; left:260px; width:auto; height:auto; visibility:visible; z-index:2;}
	div.layer_topoguidespenouv{ position:absolute; top:1870px; left:250px; width:auto; height:auto; visibility:visible; z-index:3;
		font-size:35px;text-align:center;font-family:Arial;font-weight:bolder;}
	div.layer_topoguideclic{ position:absolute; top:2110px; left:400px; width:auto; height:auto; visibility:visible; z-index:4;
		font-size:35px;text-align:center;font-family:Arial;font-weight:bolder;}

	div.layer_stats{ position:absolute; top:2150px; left:05px; width:auto; height:auto; visibility:visible; z-index:2;
		text-align:left}
/* département caché */
	div.layer_departement {position:absolute; top:0px; left:0px; width:1px; height:1px; font-size: 40px; visibility:hidden;  z-index:3;} 
		
/* ===== AFFICHAGE SMARTPHONE EN UNE COLONNE ===== */
@media screen and (max-width: 700px) {

  body {
    margin: 0;
    padding: 0 8px;
    font-family: Arial, sans-serif;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
  }

  img {
    max-width: 100%;
    height: auto;
  }

  div[class^="layer_"] {
    position: static !important;
    left: auto !important;
    top: auto !important;
    height: auto !important;
    box-sizing: border-box;
    margin: 6px 0;
    visibility: visible !important;
    z-index: auto !important;
  }

  div.layer_departement,
  div.layer_trace_visu ,
  div.layer_distance,
  div.layer_titre,
  div.layer_entete,
  div.layer_doc,
  div.layer_transport,
  div.layer_IGN,
  div.layer_IGNspe,
  div.layer_QRcode, 
  div.layer_traces_part,
  div.layer_topoguidenouv, 
  div.layer_topoguidespenouv, 
  div.layer_topoguideclic,
  div.layer_docspe_wiki_1, 
  div.layer_docspe_wiki_2,
  div.layer_docspe_wiki_3, 
  div.layer_docspe_wiki_4, 
  div.layer_docspe_wiki_5, 
  div.layer_docspe_ville_1, 
  div.layer_docspe_ville_2, 
  div.layer_docspe_ville_3, 
  div.layer_docspe_ville_4, 
  div.layer_docspe_ville_5
  
  {
    display: none !important;
  }
  
div[class^="layer_"] {
  transform: none !important;
}

div.layer_fond {
	order: 1;
	display: block !important;
	width: 100% !important;
	height: auto !important;
	margin: 4px 0 6px 0 !important;
	text-align: center !important;
}

div.layer_fond img {
	height: 35px !important;
	width: auto !important;
	max-width: 90% !important;
}

div.layer_titrespe {
	order: 2;
	width: 100% !important;
	margin-top: 4px !important;
	font-size: 24px !important;
	line-height: 1.2 !important;
	text-align: center !important;
	color: #A0600F;
}

  div.layer_retour_liste {
    order: 3;
    width: 50% !important;
    font-size: 12px !important;
    text-align: left !important;
    white-space: nowrap !important;
  }

  div.layer_retour {
    order: 3;
    width: 50% !important;
    font-size: 16px !important;
    text-align: right !important;
    white-space: nowrap !important;
  }
  
	div.layer_retour_liste img,
	div.layer_retour img {
		width: 75px !important;
		height: auto !important;
	}
  
div.layer_balisespe {
    order: 4 !important;
    width: 50% !important;
    box-sizing: border-box !important;
    font-size: 20px !important;
    text-align: left !important;
}

div.layer_longueur {
    order: 5 !important;
    width: 50% !important;
    box-sizing: border-box !important;
    font-size: 20px !important;
    text-align: right !important;
}
 
  div.layer_avis {
    order: 6;
    width: 100% !important;
    text-align: center !important;
  }

  div.layer_topoguide {
    order: 7;
    width: 350px !important;
    margin: 0 auto 12px auto !important;
    text-align: center !important;
  }

  div.layer_topoguide img {
    width: 350px !important;
    height: 30px !important;
  }
    
  div.layer_topoguidespe {
    order: 8;
    width: 100% !important;
    font-size: 20px !important;
    text-align: center !important;
  }
  	div.layer_topoguidespe img
	{
		width: auto !important;
		height: 60px !important;
	}

div.layer_trace {
  order: 9;
  width: 100% !important;
  height: auto !important;
  margin: 10px auto 12px auto !important;
  text-align: center !important;
  overflow: visible !important;
}

div.layer_trace img {
  width: 100% !important;
  height: auto !important;
  display: block !important;
  margin: 0 auto 8px auto !important;
}

  div.layer_tracespe {
    order: 10;
    width: 100% !important;
    font-size: 20px !important;
    text-align: center !important;
  }

  div.layer_trace_gps {
    order: 11;
    width: 100% !important;
    height: 520px !important;
    border-radius: 6px;
    overflow: hidden;
  }

  div.layer_trace_gps iframe {
    width: 100% !important;
    height: 520px !important;
  }
	div.layer_photospe 
	{
		order: 12 !important;
		width: 100% !important;
		text-align: center !important;
	}

  div.layer_diaporama 
  {
    order: 13;
    width: 350px !important;
	height: 40px !important ;
    margin: 0 auto 12px auto !important;
    text-align: center !important;
  }

  div.layer_diaporama img 
  {
    width: 350px !important;
    height: 40px !important;
  }

	div.layer_vignette {
		order: 14 !important;
		width: 100% !important;
		text-align: center !important;
}

  div.layer_commentaire {
    order: 60;
    width: 100% !important;
    font-size: 20px !important;
    line-height: 1.35 !important;
    text-align: left !important;
  }
  /* partenaires dans le commentaire */
div.layer_commentaire table,
div.layer_commentaire tbody,
div.layer_commentaire tr,
div.layer_commentaire td {
  display: block !important;
  width: 100% !important;
  box-sizing: border-box !important;
  text-align: center !important;
}

div.layer_commentaire td {
  margin: 10px 0 !important;
}

/* iframe VisuGPX réduite sur mobile */
div.layer_commentaire iframe {
  width: 100% !important;
  max-width: 400px !important;
  height: 535px !important;
  display: block !important;
  margin: 0 auto !important;
}

/* logos partenaires */
div.layer_commentaire img.trace,
div.layer_commentaire img[alt="visugpx"],
div.layer_commentaire img[alt="randogps"],
div.layer_commentaire img[alt="wikiloc"] {
  display: block !important;
  max-width: 220px !important;
  height: auto !important;
  margin: 8px auto !important;
}

  ul, li {
    float: none !important;
    display: block !important;
    text-align: center !important;
  }
}