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

/* Smartphones (portrait and landscape) ----------- */

@media screen and (max-width : 465px) 
{
/**________________________________ TEXTES ___________________________________________*/
	

	h2 {
		font-size : 3em;
	}
	
	.titreActivite h2 {
		text-align: center;
		font-size: 2em;
	}
	
	
	
/**________________________________ MENU ___________________________________________*/
	
	.conteneurMenuMobile {
		display: block;
		position: fixed;
		z-index:999;
		height:100%;
		width:0%;
	}	
	.conteneurMenu {
		display: none;
	}
	
	.conteneurMenuMobile.menuAccueil {
		background-color: rgba(65,141,141,0.9);
	}
	.conteneurMenuMobile.menuOut {
		background-color: rgba(0,197,190,0.9);
	}
	.conteneurMenuMobile.menuBy {
		background-color: rgba(221,166,73,0.9);
	}
	.conteneurMenuMobile.menuGo {
		background-color: rgba(255,114,0,0.9);
	}	
	
	.menu {
		height:50%;
		width : 100%;
		position: relative;
		display: flex;
		flex-direction: column;
		align-items : center;
		justify-content: flex-start;
		padding-top:0.75em;
		margin-top:5em;
		opacity: 0;	

	}
	
	.champRecherche
	{
		order:1;
	}
	
	#suggest {
		width:100%;
		left:50%;
	}
	
	.langue {
		order:0;
		margin-bottom: 1.5em;
	}
	
	.elementMenu {
		order:2;
		margin-top:1em;
	}
/*
	#btnContact {
		order:3;
		margin-top:1em;
	}
*/
	
	.itemInfos.demi {
		width:100%;
	}
	
	.menuListe {
	display: flex;
	flex-direction: column;
	align-items : center;
	justify-content: space-around;
	}
	
	.menuListe a {
		margin:1em 0em;
		font-size:1.5em;
	}
	
	.btnContact {
		padding:0.3em 1em;
	}
	
	.btn {
		position: fixed;
		z-index: 1000;
		left : 1.2em;
		top : 1em;
		text-decoration: none;
		width:2.5em;
		height:2.5em;
		display :flex;
		justify-content: center;
		border-radius: 0.5em 0.5em 1em 1em;
	}
	
	
/**________________________________ INTRO ACCUEIL OUT BY GO ___________________________________________*/
	
	.introAccueil,.introOut,.introBy,.introGo {
		flex-direction: column;
		align-items: center;
		width: 90%;
	}
	
	.logoAccueil {
		margin:0 auto;
	}
	
	.textAccueil {
		width:100%;
		margin:2em 0;
	}
	
	.partiesAccueil {
		width:100%;
		flex-wrap: wrap;
		justify-content: center;
	}
	
	.elementsAccueil {
		box-sizing: border-box;
		width:45%;
		margin:0.5em;
	}
	.titre-partieAccueil {
		font-size:6em;
	}
	
	.derniereMinute {
		margin-bottom:5em;
		margin-left:0;
	}

	#veloSmart {
		display: block;
	}
	#velo {
		display: none;
	}
	
/**________________________________ LOGO ___________________________________________*/
	
	.logoOut, .logoBy, .logoGo {
		order:0;
	}
	.titreOut, .titreBy,.titreGo  {
		order:1;
	}
	
	.titreOut h1, .titreBy h1, .titreGo h1 {
		margin:0 auto;
	}
	
	.textOut,.textBy,.textGo {
		order:2;
	}
	.element {
		margin-top:1em;
	}
	
	.conteneur {
		margin-bottom: 5em;
	}
	

/**________________________________ ACTIVITES ____________________________________*/
	
	.titreActivite {
		display: flex;
		flex-direction: column;
		align-items: center;
		margin-top: 0em;
	}

	.prestataire {
		text-align: center;
		margin-top: 0.5em;
	}

	.titreActivite img {
		height:40px;
		width:40px;
	}

	.symbole {
		order:0;
	}

	.nom {
		order:1;
	}
	
	.photoActivite.active {
		width : 200px;
		height : 200px;
		opacity :1;
	}

	.conteneurInfo {
		width: 90%;
	}
	
/**________________________________ BY ___________________________________________*/	
	
	.conteneurBy {
		width :70%;
		margin-bottom: 5em;
	}
	#photo2,#photo3 {
		display:none;
	}
	#precSmart,#suivSmart {
		display: block;
	}
	.marque {
		width:200px;
	}

/**________________________________ GO ___________________________________________*/	
	
	.conteneurGo {
		width :70%;
		margin-bottom: 5em;
	}
	.horaire {
		flex-direction: column;
		width:100%;
		align-items: center;
	}
	.horaireAller,.horaireRetour,.infoPlus, .passagers, .equipement {
		width:90%;
	}
	
/**________________________________ POPUP ___________________________________________*/
	
	.popConteneurForm,.popConteneurFormGo,.popConteneurActivDM,.popConteneurFormActivite {
		width:95%;
		
	}


/**________________________________ CONTENU POPUP ADM ___________________________________________*/

	.activiteDM01 {
		flex-direction: column;
	}
	
}

/* Tablettes ----------- */

@media screen and (min-width : 465px) and (max-width : 900px)
{
/**________________________________ INTRO ACCUEIL OUT BY GO ___________________________________________*/
	
	.introAccueil,.introOut,.introBy,.introGo {
		flex-direction: column;
		align-items: center;
		width: 90%;
	}

	.logoAccueil {
		margin:0 auto;
	}

	.textAccueil {
		width:100%;
		margin:2em 0;
	}

	.partiesAccueil {
		width:100%;
		flex-wrap: wrap;
		justify-content: center;
	}

	.elementsAccueil {
		box-sizing: border-box;
		width:45%;
		margin:0.5em;
	}
	.titre-partieAccueil {
		font-size:6em;
	}

	.derniereMinute {
		margin-bottom:5em;
		margin-left:0;
	}

	#veloSmart {
		display: block;
	}
	#velo {
		display: none;
	}
	
/**________________________________ LOGO ___________________________________________*/
	
	.logoOut, .logoBy, .logoGo {
		order:0;
	}
	.titreOut, .titreBy,.titreGo  {
		order:1;
	}
	
	.titreOut h1, .titreBy h1, .titreGo h1 {
		margin:0 auto;
	}
	
	.textOut,.textBy,.textGo {
		order:2;
	}
	.element {
		margin-top:1em;
		width:49%;
	}
	
	.conteneur {
		margin-bottom: 5em;
		justify-content: center;
		width : 90%;
	}
	
	.conteneurBy {
		width :90%;
		margin-bottom: 5em;
	}
	
/**________________________________ ACTIVITES ____________________________________*/
	
	.titreActivite {
		display: flex;
		flex-direction: column;
		align-items: center;
		margin-top: 0em;
	}

	.prestataire {
		text-align: center;
		margin-top: 0.5em;
	}

	.titreActivite img {
		height:40px;
		width:40px;
	}

	.symbole {
		order:0;
	}

	.nom {
		order:1;
	}
	
	.photoActivite.active {
		width : 300px;
		height:300px;
		opacity :1;
	}

	.conteneurInfo {
		width: 90%;
	}
	.marque {
		width:300px;
	}
	
/**________________________________ GO ___________________________________________*/	
	
	.conteneurGo {
		width :90%;
		align-items: center;
	}
	.horaire {
		flex-direction: column;
		width:100%;
		align-items: center;
	}
	.horaireAller,.horaireRetour,.infoPlus, .passagers, .equipement {
		width:90%;
	}
	
/**________________________________ BY ___________________________________________*/
	
	.elementBy {
		flex : 0 0 100%;
	}
	
	
/**________________________________ POPUP ___________________________________________*/
	
	.popConteneurForm,.popConteneurFormGo,.popConteneurActivDM,.popConteneurFormActivite {
		width:95%;
		
	}


/**________________________________ CONTENU POPUP ADM ___________________________________________*/

	.activiteDM01 {
		flex-direction: column;
	}
	
}

/* PC ----------- */

@media screen and (min-width : 900px)
{

}