@charset: "UTF-8";

/* ==========================================================================
   		Styles (généraux)
   ========================================================================== */

.header {
	display: none;
}

/*a.logo {
	display: block;
	width: 60px;
	height: 78px;
	background: transparent url(../img/logo.png) no-repeat;	
}*/


html {
	font-family: Arial, sans-serif;
	color: #282828;
}


body {
    font-size: 0.8em;
    line-height: 1.4;
    padding-top: 92px; /* => place pour le btn effacer la résa et données personnelles + btn panier*/
}


@media (min-width: 600px) {
	body {
		padding-top: 42px; /* => place pour le btn effacer la résa et données personnelles + btn panier*/
	}
}


/*On augmente la taille moyenne de tous les textes pour les mobiles*/
@media (min-width: 320px) and (max-width:400px) {
	html {
		font-size: 1.1em;
	}
}

*[id^="etape"]{
    display:none;
}

::-moz-selection {
    background: #b3d4fc;
    text-shadow: none;
}

::selection {
    background: #b3d4fc;
    text-shadow: none;
}

hr {
    display: block;
    height: 1px;
    border: 0;
    border-top: 1px solid #ccc;
    margin: 1em 0;
    padding: 0;
}

img {
    vertical-align: middle;
}


button[disabled="disabled"] {
	cursor: not-allowed;
}



/*fieldset {
    border: 0;
    margin: 0;
    padding: 0;
}*/

textarea {
    resize: vertical;
}

.chromeframe {
    margin: 0.2em 0;
    background: #ccc;
    color: #000;
    padding: 0.2em 0;
}


/* ==========================================================================
   Styles TOP MENU BAR & PANIER + BTN PANIER
   ========================================================================== */

.top_meta_infos {
	/*Cette div englobe la top_menu_bar et le contenu du panier*/
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	z-index: 9998;
}

.top_menu_bar {
	box-sizing: border-box;
	top: 0;
	left: 0;
	width: 100%;
	background: #009ee2;
	padding: 8px;
	border-bottom: 1px solid #0078ac;
}

#deconnexion_agence, 
#effacement_session_php {
	display: inline-block;
	width: 270px;
	padding: 5px 0 0 40px;
	background: url(/img/erase-w@2X.png) no-repeat 10px 70%;
	background-size: 18px;
	text-decoration: none;
	-webkit-hyphens: auto;
	-moz-hyphens: auto;
	-ms-hyphens: auto;
	-o-hyphens: auto;
	hyphens: auto;
	font-size: 14px;
	margin-bottom: 0.6em;
}

@media (min-width: 600px) {
	#deconnexion_agence, 
	#effacement_session_php {
		width: 440px;
		margin-bottom: 0;
		vertical-align: middle;
	}
}

#deconnexion_agence a, 
#effacement_session_php a {
	display: inline-block;
	padding-right: 10px;
	text-align: left;
	text-decoration: none;
	color: #fff;
}

#deconnexion_agence a:hover, 
#effacement_session_php a:hover {
	color: #404040;
}

#identification_agence {
    color : red;
    font-weight : bold;
}

.btn_open_bsk_container {
	display: inline-block;
	margin-left: 20px;
	vertical-align: top;
}

#bouton_panier_ouverture {
	display: inline-block;
	vertical-align: top;
	background: #fff url(/img/panier/basket-btn-icon@2X.png) no-repeat 92% center;
	background-size: 20px;
	border: 1px solid #8E8B8B;
	-moz-border-radius: 5px;
	-webkit-border-radius: 5px;
	border-radius: 5px;
	text-decoration: none;
	padding: 0.3em 3em 0.3em 1.1em;
	line-height: 22px;
	max-height: 20px;
	font-weight: bold;
	letter-spacing: -0.02em;
}

#bouton_panier_ouverture:hover {
	color: #fff;
	background: #404040 url(/img/panier/basket-btn-icon-w@2X.png) no-repeat 92% center;
	background-size: 20px;
	border-color: #404040;
}

#contenu_panier {
	z-index: 9998;
	display: table;
	table-layout: fixed;
	background: #f3f3f3;
	width: 100%;
	min-height: 250px;
	padding: 0;
	border-bottom: 1px solid #dedede;
	box-shadow: 0px 2px 5px #ddd;
}

@-moz-document url-prefix() { 
	#panier-illustration {
		padding-bottom: 200px;
	}
}


#panier-illustration {display: none;}

@media (min-width: 600px) {

	#panier-illustration {
		display: table-cell;
		width: 60px;
		min-height: 100px;
		background: #e9e9e9 url(../img/panier/blue-basket@2X.png) no-repeat center 20px;
		background-size: 25px;
		position: relative;
	}
	
	#panier-illustration span {
		display: block;
		width: 150px;
		font-size: 1.3em;
		text-transform: uppercase;
		text-align: center;
		position: relative;
		top: 100px;
		left: -45px;
		font-weight: bold;
		-moz-transform: rotate(-90deg);
		-webkit-transform: rotate(-90deg);
		-o-transform: rotate(-90deg);
		transform: rotate(-90deg);
	}
	
}

#panier {
	display: table-cell;
	box-sizing: border-box;
	padding: 2em 1.5em 1.5em 1.5em;
	font-size: 90%;
	background: url(../img/panier/basket-watermark@1X.png) no-repeat 50% center;
}

@media (min-width: 600px) {
	#panier {
		padding: 2em 2em 2em 3em;
		background-position: 90% center;
	}	
}


.panier-title {
	text-transform: uppercase;
	font-weight: bold;
	font-size: 1.2em;
	margin-top: 0;
	letter-spacing: -0.02em;
}

.panier-ligne_resa {
	margin-bottom: 0.8em;
	line-height: 1.3em;
	position: relative;
	padding-right: 70px;
	text-indent: 0;
	max-width: 500px;

	padding-bottom: .5em;
}


.panier-ligne_resa span {
	display: inline-block;
	vertical-align: top;
	margin-right: 1.5em;
}

span.panier-prix_voyage {
    display : block;
    padding-left : 20px;
}

span.panier-passages {
    display : block;
    font-weight : bold;
    padding-left : 10px;
    margin : 8px 0;
}


@media (min-width: 768px) {
	
	.panier-libelle_voyage {
		display: inline-block;
		//width: 300px;
		text-overflow: ellipsis;
		white-space: nowrap;
		overflow: hidden;
	}
		
}


/*La span qui "encadre" les 2 icônes*/
.modifier_lignes {
	position: absolute;
	top: 0;
	right: 0;
}


.panier-modifier_ligne {
	width: 18px;
	height: 18px;
	display: inline-block;
	background: url(../img/panier/edit-icon@2X.png) no-repeat;
	background-size: contain;
	text-indent: 9999999em;
}

.panier-effacer_ligne {
	width: 18px;
	height: 18px;
	display: inline-block;
	background: url(../img/panier/erase-line@2X.png) no-repeat;
	background-size: contain;
	text-indent: 9999999em;
}

.panier-modifier_ligne:hover,
.panier-effacer_ligne:hover {
	opacity: 0.6;
}




.ligne-resa_en_cours {
	color: #c85757;
}


.ligne-resa_en_cours::after {
	display: inline-block;
	content: 'Voyage en cours d\'édition…';
	font-style: italic; 
	background: #c85757 url(../img/panier/gear-w@2X.png) no-repeat 10px center; 
	background-size: 12px;
	padding-left: 30px;
	padding-right: 15px;
	font-size: 90%;
	color: #fff;
	border-radius: 5px;
}


#btn_fermer_panier {
	margin-top: 1.5em;
	padding: 0.5em 1em;
	font-size: 1em;
	border-radius: 3px;
	box-shadow: none;
	outline: none;
	background-color: #009ee1;
	border: 1px solid #008fcb;
	font-weight: normal;
	color: #f2f3f2;
	float: right;
	margin-right: 1em;
}

@media (min-width: 768px) {
	#btn_fermer_panier {
		float: none;
		margin-left: 460px;
	}
}


#btn_fermer_panier:hover {
	background-color: #0087c0;
}

#btn_fermer_panier:active {
	position: relative;
	top: 1px;
}


#zone_btn_panier {
	clear: both;
	display: block;
	margin: 2em auto;
}


/* Styles communs à tous les btn de la zone BTN panier */
.btn_zone_boutons {
	display: block;
	width: 60%;
	background-color: #009ee2;
	padding: .4em 2em .4em 3.2em;
	border-radius: 3px;
	color: #fff;
	text-decoration: none;
	margin: 1em auto;
	font-size: 1.15em;
	line-height: 1em;
}

.btn_zone_boutons:hover {
	color: #404040;
}

@media (min-width: 500px) {
	.btn_zone_boutons {
		display: inline-block;
		width: auto;
		vertical-align: top;
		margin: .5em .5em .5em 0;
	}
}

.btn_zone_boutons span:first-child {
	text-transform: uppercase;	
}

.btn_zone_boutons span {
	display: block;
	border-left: 1px solid #404040;
	padding-left: 15px;
}

#bouton_annuler_voyage {
	background-image: url(../img/panier/big-trash@2X.png);
	background-repeat: no-repeat;
	background-position: 12px center;
	background-size: 20px;
}

#bouton_enregistrer_voyage {
	background-image: url(../img/panier/add2basket@2X.png);
	background-repeat: no-repeat;
	background-position: 12px center;
	background-size: 26px;	
}

#bouton_ajouter_voyage {
	background-image:url(../img/panier/plus@2X.png);
	background-repeat: no-repeat;
	background-position: 12px center;
	background-size: 24px;
}


#bouton_terminer_resa {
	background: #404040 url(../img/panier/end-w@2X.png) no-repeat 12px center;
	background-size: 30px;
}

#bouton_payer_resa {
	background: #404040 url(../img/panier/cb-w@2X.png) no-repeat 12px center;
	background-size: 30px;
	padding: 1em 2em 1em 3em 
}

#bouton_terminer_resa span,
#bouton_payer_resa span {
	border: 0;
}

#bouton_terminer_resa:hover,
#bouton_payer_resa:hover {
	background-color: #009ee2;
}



/* ==========================================================================
   Styles CELYA pour LS RESA 2.0
   ========================================================================== */
   

/*
CODE COULEUR
GRIS TEXTE : #282828;
BLEU CLAIR : #009ee2;
VERT : #3bb62a;
Couleur border commune : #c6c6c6;
*/


noscript {
	width: 100%;
	height: 3000px;
	position: absolute;
	z-index: 999;
	background-color: #ddd;
	overflow: overlay;
}

noscript p {
	min-height: 221px;
	font-size: 1.5em;
	width: 40%;
	margin: 10%;
	padding-left: 260px;
	padding-top: 20px;
	color: #282828;
	position: fixed;
	background: #ddd url(../img/js-alert.png) no-repeat;
}

noscript p strong {
	color: #930b0b;
}

.left {
	float: left;
	margin: 0.5em;
}

.right {
	float: right;
	margin-left: 0.5em;
}

.center {
	margin-left: auto;
	margin-right: auto;
	text-align: center;
}


strong {
	font-style: normal;
}


button span {
	display: block;
}

.help {
	clear: both;
	display: block;
	height: 20px;
	background: transparent url(../img/help@2X.png) no-repeat 0 50%;
	background-size: 20px 20px;
	padding-left: 25px;
	padding-top: 5px;
	text-decoration: none;
	cursor: pointer;
}

.help:hover {
	text-decoration: none;
}

.alert-box {
	display: none;
}

a { 
    color: #282828;
    text-decoration: underline;
}

input {
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
    border: 1px solid #d0d0d0;
    padding: 4px 10px;
    height: 18px;
    font-size: 1em;
    margin-bottom: 5px;
}


:disabled {
	opacity: 0.6;
}


.lsr-btn {
	border: 1px solid #a19f9f;
	-moz-border-radius: 5px;
	-webkit-border-radius: 5px;
	border-radius: 5px;
	-moz-background-clip: padding;
	-webkit-background-clip: padding-box;
	background-clip: padding-box;
	background-color: #ada7a7;
	-moz-box-shadow:inset 0px 1px 0px 0px #ffffff;
	-webkit-box-shadow:inset 0px 1px 0px 0px #ffffff;
	box-shadow:inset 0px 1px 0px 0px #ffffff;
	background-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDI5NCAzMyIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+PGxpbmVhckdyYWRpZW50IGlkPSJoYXQwIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjUwJSIgeTE9IjEwMCUiIHgyPSI1MCUiIHkyPSItMS40MjEwODU0NzE1MjAyZS0xNCUiPgo8c3RvcCBvZmZzZXQ9IjAlIiBzdG9wLWNvbG9yPSIjYzFjMWMxIiBzdG9wLW9wYWNpdHk9IjEiLz4KPHN0b3Agb2Zmc2V0PSIxMDAlIiBzdG9wLWNvbG9yPSIjZTdlN2U3IiBzdG9wLW9wYWNpdHk9IjEiLz4KICAgPC9saW5lYXJHcmFkaWVudD4KCjxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIyOTQiIGhlaWdodD0iMzMiIGZpbGw9InVybCgjaGF0MCkiIC8+Cjwvc3ZnPg==);
	background-image: -moz-linear-gradient(bottom, #c1c1c1 0%, #e7e7e7 100%);
	background-image: -o-linear-gradient(bottom, #c1c1c1 0%, #e7e7e7 100%);
	background-image: -webkit-linear-gradient(bottom, #c1c1c1 0%, #e7e7e7 100%);
	background-image: linear-gradient(bottom, #c1c1c1 0%, #e7e7e7 100%);
	cursor: pointer;
}


.lsr-btn:hover {
	-moz-background-clip: padding;
	-webkit-background-clip: padding-box;
	background-clip: padding-box;
	background-color: #ada7a7;
	-moz-box-shadow: inset 0 -1px 0 #f3f3f3;
	-webkit-box-shadow: inset 0 -1px 0 #f3f3f3;
	box-shadow: inset 0 -1px 0 #f3f3f3;
	background-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDI5NCAzMyIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+PGxpbmVhckdyYWRpZW50IGlkPSJoYXQwIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjUwJSIgeTE9IjEwMCUiIHgyPSI1MCUiIHkyPSItMS40MjEwODU0NzE1MjAyZS0xNCUiPgo8c3RvcCBvZmZzZXQ9IjAlIiBzdG9wLWNvbG9yPSIjZTdlN2U3IiBzdG9wLW9wYWNpdHk9IjEiLz4KPHN0b3Agb2Zmc2V0PSIxMDAlIiBzdG9wLWNvbG9yPSIjYzFjMWMxIiBzdG9wLW9wYWNpdHk9IjEiLz4KICAgPC9saW5lYXJHcmFkaWVudD4KCjxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIyOTQiIGhlaWdodD0iMzMiIGZpbGw9InVybCgjaGF0MCkiIC8+Cjwvc3ZnPg==);
	background-image: -moz-linear-gradient(bottom, #e7e7e7 0%, #c1c1c1 100%);
	background-image: -o-linear-gradient(bottom, #e7e7e7 0%, #c1c1c1 100%);
	background-image: -webkit-linear-gradient(bottom, #e7e7e7 0%, #c1c1c1 100%);
	background-image: linear-gradient(bottom, #e7e7e7 0%, #c1c1c1 100%);
}

.lsr-btn:active {
	-moz-background-clip: padding;
	-webkit-background-clip: padding-box;
	background-clip: padding-box;
	background-color: #ada7a7;
	-moz-box-shadow: inset 0 0 6px rgba(178,178,178,.71);
	-webkit-box-shadow: inset 0 0 6px rgba(178,178,178,.71);
	box-shadow: inset 0 0 6px rgba(178,178,178,.71);
	background-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDI5NCAzMyIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+PGxpbmVhckdyYWRpZW50IGlkPSJoYXQwIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjUwJSIgeTE9IjEwMCUiIHgyPSI1MCUiIHkyPSItMS40MjEwODU0NzE1MjAyZS0xNCUiPgo8c3RvcCBvZmZzZXQ9IjAlIiBzdG9wLWNvbG9yPSIjYzFjMWMxIiBzdG9wLW9wYWNpdHk9IjEiLz4KPHN0b3Agb2Zmc2V0PSIxMDAlIiBzdG9wLWNvbG9yPSIjZTdlN2U3IiBzdG9wLW9wYWNpdHk9IjEiLz4KICAgPC9saW5lYXJHcmFkaWVudD4KCjxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIyOTQiIGhlaWdodD0iMzMiIGZpbGw9InVybCgjaGF0MCkiIC8+Cjwvc3ZnPg==);
	background-image: -moz-linear-gradient(bottom, #c1c1c1 0%, #e7e7e7 100%);
	background-image: -o-linear-gradient(bottom, #c1c1c1 0%, #e7e7e7 100%);
	background-image: -webkit-linear-gradient(bottom, #c1c1c1 0%, #e7e7e7 100%);
	background-image: linear-gradient(bottom, #c1c1c1 0%, #e7e7e7 100%);
}



#sidebar {
    float: left;
    width: 193px; /*233px*/
    padding: 25px 20px;
}



#resa {
	padding: 35px 20px 25px 20px;
	position: relative;
}

#etape2 {
	/*effectif uniquement sur mobile*/
	padding: 15px;
}

@media (max-width: 400px) {	
	a#espace-pro {
		position: absolute;
		top: 0;
		right: 20px;
	}
}



@media (min-width: 400px) {
	#resa {
    	max-width: 700px; /*780px*/
    	padding: 35px 40px 25px 40px;
	}
	#etape2 {
		max-width: 700px; /*780px*/
		padding: 10px 40px 100px 40px;
	}
}

form {
	margin-bottom: 1.5em;
}


#main-title {
    font-size: 1.7em;
    text-transform: uppercase;
    font-weight: normal;
    letter-spacing: 1px;
    margin-top: 0;
    margin-bottom: 35px;
    line-height: 22px;
}

@media (min-width: 320px) and (max-width:400px) {
	
	#main-title {
	  	margin-top: 20px;
	    margin-bottom: 25px;
	    line-height: 1em;
	}
}



#espace-pro {
	background: transparent url(../img/locked.png) no-repeat;
	padding-left: 20px;
	margin-top: 20px;
}

.contrast { color: #009ee2;}

#passage {
	display: inline-block;
	margin-top: 0.35em;
	width: 209px;
	height: 39px;
	background: transparent url(../img/passage@2X.png) no-repeat;
	background-size: 209px 39px;
	text-indent: -99999em;
}


@media (min-width: 550px) {
	#passage {
		position: relative;
		top: -7px;
	}
}


.infos-zone {
    font-style: italic;
    padding: 0.8em 5em 0.6em 2em;
    border: 1px solid #009ee2;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
    background: transparent url(../img/info.png) no-repeat 95% 50%;
    margin: 2em auto;
}

.infos_voyageurs {
    font-style: italic;
    padding: 0.8em 5em 0.6em 02em;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
    background: transparent url(../img/info.png) no-repeat 95% 50%;
    margin: 2em auto;
}


@media (min-width: 320px) and (max-width:400px) {
	.infos-zone {
		padding: 0.8em 3em 0.6em 1em;
		font-size: 0.9em;
		line-height: 1.2em;
	}
}




#select_nb_passagers {
    /* Le sélecteur du nombre de passagers est invisible par défaut pour tout le monde */
    display: none;
}

#select_nb_passagers label {
	margin-left: 0.8em;
	margin-right: 0.5em;
}

#select_nb_passagers .dropdown-style {
	margin-bottom: 0;
}


/*--- Styles des "dropdown select menu" ---*/

/*Ce conteneur des éléments select doit être plus court 
que les select de façon à cacher les flèches par défaut. 
(overflow:hidden)*/ 
 .dropdown-style {
    margin: 0.8em 0;
    padding: 0;
    height: 32px;
    overflow: hidden;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
    border: 1px solid #c6c6c6;
    background: #e9e9e9 url(../img/dropdown-arrow.png) no-repeat 95% 50%;    
}


.dropdown-style.narrow {
    width: 60px;
    background-position: 80% 50%; 
    display: inline-block;
}



.dropdown-style.medium { width: 180px; }

.dropdown-style.wide { width: 270px; }

.dropdown-style.narrow select { width: 80px; }

.dropdown-style.medium select { width: 200px; }

.dropdown-style.wide select { width: 290px; }

.dropdown-style select {
    background: transparent;
    padding: 4px 0 4px 12px;
    font-size: 13px;
    border: 0;
    height: 30px;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    position: relative;
    top: 2px;
}



/*Ci-dessous : pour enlever les pointillés sur le focus du select sous FF*/
.dropdown-style select:focus {outline: 0; border: 0;}
select:-moz-focusring {
    color: transparent;
    text-shadow: 0 0 0 #000;
}


#etape1-1 p:first-child label{
	font-weight: bold;
	padding: 10px 0 0 30px;
	float: left;
	margin-right: 46px;
}

@media (min-width: 320px) and (max-width:400px) {
	
	#etape1-1 p:first-child label {
		padding-left: 10px;
		margin-right: 20px;
	}
}



.reset-croisiere {
	height: 28px;
	background: transparent url(../img/reset-icon@2X.png) no-repeat left center;
	background-size: 14px 18px;
	padding: 5px 10px 5px 20px;
	border:  none;
	margin-left: 5px;
}



.reset-croisiere:hover {
	text-decoration: underline;
}




/* ===============================================
 		Styles Etape 2 (+ styles datepicker) 
   =============================================== */

#etape1-2 {
	float: left;
	margin-left: 4em;
	margin-top: 1em;
}


.choose-date:first-child {
	margin: 3.5em auto;
}



.ui-datepicker-trigger {
	width: 27px;
	height: 27px;
	margin-top: -4px;
	cursor: pointer;
}

.choix-date {
	display: inline-block;
	margin-right: 1.1em;
	height: 26px;
	line-height: 2em;
}

.date-ok {
	background: transparent url('../img/checkmark.png') no-repeat 100% 50%;
	padding-right: 25px;
}

.choose-date label {
	display: block;
	margin: 1em 0 0.5em 0;
	max-width: 250px;
}

.choose-date input {
	width: 120px;
	margin-right: 5px;
}



/* ---------------------------- */
/*        Styles datepicker     */ 
/* ---------------------------- */

.ui-datepicker {
	width: 19em;
	display: none;
	font-size: 15px;
	padding: .8em .8em;
	background-color: #009ee2;
	-webkit-border-radius: 5px;
	-moz-border-radius: 5px;
	border-radius: 5px;
	position: relative;
    -moz-box-shadow: 0px 4px 12px #001e29;
    -webkit-box-shadow: 0px 4px 12px #001e29;
    box-shadow: 0px 4px 12px #001e29;
    filter: progid:DXImageTransform.Microsoft.Shadow(strength = 4, direction = 180, color = '#001e29');
    -ms-filter: "progid:DXImageTransform.Microsoft.Shadow(strength = 4, Direction = 180, Color = '#001e29')";
}

a.ui-corner-all {
	display: inline-block;
	cursor: pointer;
	width: 25px;
	height: 25px;
	overflow: hidden;
	border-radius: 25px;
	text-indent: -9999em;
}

a.ui-corner-all:hover { background-color: #0482b1;}


a.ui-datepicker-prev {
	float: left;
	position: relative;
	top: 3px;
}
a.ui-datepicker-next {
	float: right;
	position: relative;
	top: 3px;
}

div.ui-datepicker-title { 
	text-align: center;
	color: white;
	text-transform: uppercase;
	border-bottom: 1px solid #47c5f3;
	padding: 0 5px;
	margin: 0 auto;
	margin-bottom: 5px;
	line-height: 0;
}


span.ui-icon {
	display: block;
	width: 25px;
	height: 25px;
}


.ui-datepicker .ui-datepicker-prev span,
.ui-datepicker .ui-datepicker-next span {
	display: block;
	position: absolute;
	left: 50%;
	margin-left: -13px;
	top: 30%;
	margin-top: -8px;
}



a.ui-datepicker-prev span.ui-icon {
	background: transparent url('../img/dp_left_arrow@2X.png') no-repeat 40% 50%;
	background-size: 10px 14px;
}


a.ui-datepicker-next span.ui-icon {
	background: transparent url('../img/dp_right_arrow@2X.png') no-repeat 60% 50%;
	background-size: 10px 14px;
}



table.ui-datepicker-calendar {
	color: #01142e; /* couleur par défaut des n° de jours */
	text-align: center;
}

table.ui-datepicker-calendar td.ui-datepicker-week-col {
	padding-right: 1.2em;
}

table.ui-datepicker-calendar thead tr th.ui-datepicker-week-col, 
td.ui-datepicker-week-col {
	color: #037099;
	text-align: left;
}


.ui-datepicker-calendar th,
.ui-datepicker-calendar td {
	padding: .15em;
}

.ui-datepicker-calendar a {
	text-decoration: none;
	position: relative;
}

.ui-datepicker-calendar thead tr th {
	color: white;
	font-weight: normal;
}


table.ui-datepicker-calendar a,
table.ui-datepicker-calendar span
{
	display: block;
	width: 26px;
	height: 26px;
	border-radius: 26px;
	font-weight: normal;
	line-height: 25px;
	text-align: center;

}

table.ui-datepicker-calendar a:hover {
	background-color: #044a68;
	color: white;
}


a.ui-state-active {
	background-color: #282828;
	color: white;	
}

td.ui-datepicker-today a {
	text-decoration: underline;
}



td.ui-datepicker-week-end a,
td.ui-datepicker-week-end span {
	/* font-weight: bold; */
}


.ui-datepicker-unselectable {
	opacity: 0.5;
}

/* Correctif pour la case de fermeture des ui-dialog
suite à la mise à jour de jQuery UI */ 
.ui-dialog button.ui-button span.ui-button-icon-space {
  display: none;
}

/* --- END Styles datepicker --- */ 



/* ===============================================
        Styles ETAPE 1-3 (tableaux des horaires) 
   =============================================== */


#etape1-3 {
	-moz-box-sizing: border-box;
	box-sizing: border-box;
	width: 100%;
	-webkit-border-top-left-radius: 5px;
	-webkit-border-top-right-radius: 5px;
	-moz-border-radius-topleft: 5px;
	-moz-border-radius-topright: 5px;
	border-top-left-radius: 5px;
	border-top-right-radius: 5px;
	border: 1px solid #c6c6c6;
	padding-bottom: 15px;
	background-color: #f3f3f3;
	z-index: 1;
	position: relative;
	margin: 2em 0 2em 0;
	padding: ;
	clear: left;
}

#etape1-3 h4 {
	-moz-box-sizing: border-box;
	       box-sizing: border-box;
	-webkit-border-top-left-radius: 5px;
	-webkit-border-top-right-radius: 5px;
	-moz-border-radius-topleft: 5px;
	-moz-border-radius-topright: 5px;
	border-top-left-radius: 5px;
	border-top-right-radius: 5px;
	border: 1px solid #009ee2;
	background-color: #009ee2;
	text-align: center;
	text-transform: uppercase;
	font-size: 17px;
	letter-spacing: -1px;
	font-weight: normal;
	padding: 0.3em 1em;
	margin: 0;
	z-index: 2;
	position: relative;
	top: -2px;
}


#etape1-3 h4::before {
	content: '';
	display: inline-block;
	width: 20px;
	height: 20px;
	background: #009ee2 url(../img/clock-big@2X.png) no-repeat;
	background-size: 20px 20px;
	position: relative;
	top: 4px;
	left: -10px;
}


.infos-cie {
	width: 80%;
	font-style: italic;
	margin: 15px auto;
}

#promotion {
	width: 90%;
	margin: 15px auto;
	text-align: center;
}

#promotion input {
	margin-top: 5px;
}


.promo-code {
	margin: 5px 20px;
}


.display-travel {
	min-width: 250px;
	width: 50%;
	padding: 0;
	margin: 0 auto 1em auto;
}


@media (min-width: 768px) {
	.display-travel {		
		width: 45%;
		padding: 0 1em;
	}
	
	#template_horaires_0 {
		float: left;
	}
	
	#template_horaires_1 {
		float: right;
	}
}


@media (min-width: 320px) and (max-width:767px) {
	
	div[id^="template_horaires_"] {
		padding:  0 0 1em 0;
		border-bottom: 1px dashed #dadbda;
	}
	
	div[id^="template_horaires_"]:last-child {
		border: none;
	}
}






/*#horaires2 {
	display: none;
}*/

.travel {
	position: relative;
	font-size: 16px;
	font-weight: bold;
	text-transform: uppercase;
	text-align: center;
	width: 90%;
	margin: 20px auto 0 auto;
}

.traveltype-label {
	text-align: center;
	text-transform: uppercase;
	margin: 5px auto 0 auto;
	font-size: 16px;
	line-height: 1em;
}


.travel-date {
	display: inline-block;
}

.prev-trip {
    display: inline-block;
    width: 0px;
    height: 0px;
    border-style: solid;
    border-width: 8px 10px 8px 0;
    border-color: transparent #282828 transparent transparent;
    font-size: 0;
    position: relative;
    top: -5px;
    margin-right: 10px;
    cursor: pointer;
    text-decoration : none;
}


.prev-trip:hover {
    border-color: transparent #009ee2 transparent transparent;
    text-decoration : none;
}

.next-trip {
    display: inline;
    width: 0px;
    height: 0px;
    border-style: solid;
    border-width: 8px 0 8px 10px;
    border-color: transparent transparent transparent #282828;
    font-size: 0;
    position: relative;
    top: -5px;
    margin-left: 10px;
    cursor: pointer;
    text-decoration : none;
}


.next-trip:hover {
    border-color: transparent transparent transparent #009ee2;
    text-decoration : none;
}


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

.direction {
	width: 25px;
	height: 9px;
	display: inline-block;
	background: transparent url(../img/destination282828@2X.png) no-repeat;
	background-size: 25px 9px;
	font-size: 0;
	margin: 0 5px;
	position: relative;
	top: -8px;
}

button.show-schedule {
	height: 32px;
	display: block;
	min-width: 250px;
	width: 45%;
	padding: 5px;
	margin: 5px auto;
}


button.show-schedule span {
	background: transparent url(../img/dropdown-arrow@2X.png) no-repeat 100% 50%;
	background-size: 13px 7px;
	padding-right: 20px;
}



.display-schedule {
	padding: 0px;
	list-style-type: none;
	display: block;
}

.passage {
	position: relative;
	border-bottom: 1px solid #d3d2d2;
	position: relative;
	padding: 10px;
	cursor: pointer;
}

.complet .selection {
	display: none;
}

.passage:last-child {
	border: none;
}

.passage:hover {
	background-color: #ededed;
	color: #3c3b3b;
	-webkit-border-radius: 5px;
	-moz-border-radius: 5px;
	border-radius: 5px;
	-webkit-box-shadow: 0 0 2px #817e7e;
		-moz-box-shadow: 0 0 2px #817e7e;
	  	    box-shadow: 0 0 2px #817e7e;
}



.boat {
	width: 62px;
	height: 60px;
	float: left;
	border: 2px solid #fff;
	background-color: #fff;
	-moz-box-shadow: 1px 1px 1px 0 rgba(93,101,105,.36);
	-webkit-box-shadow: 1px 1px 1px 0 rgba(93,101,105,.36);
	box-shadow: 1px 1px 1px 0 rgba(93,101,105,.36);
	position: relative;
	top: 3px;
}

.boat img {
	width: 60px;
	height: 44px;
	border: 1px solid #d0cfcf;
	margin: 1px auto;
}



/*li.passage div {
	display: inline-block;
}*/

.passage .horaire_cible {
	position: relative;
}

h5.libelle-passage {
	font-size: 14px;
	text-transform: uppercase;
	color: #019ee1;
	margin:  0 auto 2px auto;
	text-align: left;
	line-height: 15px;
}

.places-dispo {
	display: block;
	width:100%;
	font-size: 12px;
	letter-spacing: normal;
	text-align: left;
}

/*Cette div comprend les infos d'horaires et de tarifs*/
.horaire_cible:first-child div {
	display: table-cell;
	vertical-align: top;
}

/*Bouton radio de sélection*/
.selection {
	display: table-cell;
	vertical-align: top;
	text-align: center;
	text-transform: uppercase;
	font-weight: bold;
	margin: 5px 0 0 0px;
}


.heure-depart {
	font-weight: bold;
	font-size: 14px;
	border: 1px solid #333;
	padding: 0 2px;
	-webkit-border-radius: 5px;
	-moz-border-radius: 5px;
	border-radius: 5px;
	background-color: white;
}

.heure-arrivee {
	display: block;
	font-weight: normal;
}


.horaires {
	background: transparent url(../img/clock-small@2X.png) no-repeat 0 3px;
	background-size: 12px 12px;
	margin: 0px 0 10px 0px;
	padding: 0 15px 0 20px;
	line-height: 17px;
	position: relative;
	top: 5px;
}


.heure-arrivee {
	display: inline-block;
	font-weight: normal;
	font-size: 14px;
}

.tarifs {
	background: transparent url(../img/pricetag-small@2X.png) no-repeat 0 3px;
	background-size: 12px 12px;
	margin: 0  0 0.5em 0;
	padding: 0 15px 0 20px;
	line-height: 14px;
	font-size: 12px;
}

.tarifs span {
	font-weight: normal;
}

.more-infos {
	clear: both;
	font-size: 12px;
	font-style: italic;
	padding-left: 70px;
	margin-top: 2em;
	margin-bottom: 0;
	cursor: pointer;
}

.more-infos:hover {
	color: #019ee2;
}

.more-infos:hover .infos-picto {
	background-color: #019ee2;
}


.infos-picto {
	display: block;
	float: left;
	width: 20px;
	height: 20px;
	-webkit-border-radius: 20px;
	-moz-border-radius: 20px;
	border-radius: 20px;
	background-color: #282828;
	margin-right: 5px;
	position: relative;
	top: -2px;
}

.infos-picto::after {
	content: 'i';
	color: white;
	font-family: Georgia, serif;
	font-style: italic;
	font-weight: normal;
	position: relative;
	left: 8px;
	top: 2px;
}

.more-infos .ttip-boat-img {
	position: absolute;
	bottom: 0;
	left: 10px;
	margin-bottom: 0.5em;
	border: 0;
}

.boat-big {
	width: 60px;
	height: 45px;
	background-size: 60px 45px;
	float: left;
	margin-right: 10px;
/*	-moz-box-shadow: 0 0 8px rgba(243,243,243,.20);
	-webkit-box-shadow: 0 0 8px rgba(243,243,243,.20);
	box-shadow: 0 0 8px rgba(243,243,243,.20);*/
	/*border: 1px solid #cccaca;*/
	border-radius: 5px;
}


.passage div.infos-bulle {
	display: block;
	color: #cccaca;
	width: 550px;
	position: absolute;
	left: 120px;
	top: -80px;	
	font-style: normal;
	font-weight: normal;
	cursor: default;
	padding: 20px 30px;
	background: url(../img/helm-big@1X.png) right bottom no-repeat #282828;
}


div.infos-bulle > * {
	margin: 15px auto; /*tous les enfants de .infos-bulle*/
}

h5.ttip-libelle-pass {
	text-transform: uppercase;
	font-size: 16px;
	font-style: normal;
	font-weight: normal;
	margin-top: 0;
}

.ttip-libelle-pass::before {
	content: '';
	display: block;
	float: left;
	padding-right: 10px;
	width: 23px;
	height: 23px;
	background: transparent url(../img/helm.png) no-repeat left 50%;
	background-size: 23px 23px;
}


table.ttip-troncon {
	font-size: 12px;
	margin: 20px auto 20px 0;
	overflow-x: scroll;
}

@media (min-width: 320px) and (max-width:400px) {
	table.ttip-troncon {
		display: none;
	}
}

table.ttip-troncon caption {
	text-align: left;
	text-transform: uppercase;
	margin-bottom: 10px;
	vertical-align: top;
}


tr.troncon-header th {
	text-transform: uppercase;
	text-decoration: underline;
	font-weight: normal;
}

tr.troncon-line {
	vertical-align: middle;
}

td.ttip-date-depart, td.ttip-date-arrivee {
	text-align: left;
	width: 65px;
	padding-right: 10px;
}

td.ttip-heure-dep, td.ttip-heure-arrivee {
	text-align: right;
	padding-right: 10px;
	width: 40px;
}

span.ttip-horaire {
	display: block;
	width: 35px;
	height: 15px;
	background-color: #e6e6e6;
	-webkit-border-radius: 5px;
	-moz-border-radius: 5px;
	border-radius: 5px;
	color: #202020;
	text-align: center;
	padding: 2px 5px;
	position: relative;
	top: -2px;
	line-height: 120%;
}

td.ttip-boat-img {
	min-width: 70px;
}

td.ttip-boat-img img {
	min-width: 70px;
	height: auto;
}


td.ttip-boat-description {
	font-style: italic;
}

td.ttip-boat-img, td.ttip-boat-description {
	font-size: 11px;
	padding-bottom: 10px;
	border-bottom: 0;
}

@media (min-width:320px) and (max-width:400px) {
	
	/*On masque la photo du bateau ou le picto bateau 
	pour les résolutions tél mobiles (pas assez de place) */
 	
 	td.ttip-boat-img {
 	display: none;
 	}

	/* --On adapte le tableau des tronçons aux résolutions mobiles.
	Hack inspiré par  -- */
	
	.ttip-troncon tr {
		display: inline-block;
	}
	
	.cf:after {
	    clear: both;
	    content: " ";
	    display: block;
	    font-size: 0;
	    height: 0;
	    visibility: hidden;
	}
	
	.rt {
	    border-collapse: collapse;
	    border-spacing: 0;
	    font-size: 0.75em;
	    line-height: 1.25em;
	}

}




tr.troncon-line td {
	padding-top: 12px;
	padding-bottom: 5px;
}



/* TODO PG: vérifier la pertinence de l'effacement complet
td.boat-picto {
	background: transparent url(../img/boat-picto@2X.png) no-repeat 30% 50%;
	background-size: 46px;
}
*/




p.ttip-infos-cie {
	border: 1px solid #cccaca;
	padding: 8px 25px;
	-webkit-border-radius: 5px;
	-moz-border-radius: 5px;
	border-radius: 5px;
	font-style: italic;
	background-color: rgba(255, 255, 254, 0.18);
	color: #cccaca;
	font-size: 13px;
}



.date-navigation {text-align: center; padding: 5px 0px;}

.date-navigation a {
	display: block; 
	margin: 2px auto 8px auto;
	color: #009ee2;
	text-decoration: none;
	font-size: 13px;
	cursor: pointer;
	border: 1px solid #009ee2;
	border-radius: 5px;
}


.date-navigation a:hover {
	text-decoration: none;
	color: #009ee2;
	font-weight: bold;
}

.date-navigation a:hover span {
	text-decoration: none;
}


@media (min-width: 600px) {
	
	.date-navigation {
		height: auto;
	}
	
	a.bottom-prev-trip {
		width: 145px;
		float: left; 
		margin: 0;
		font-size: 12px;
	}
	a.bottom-next-trip {
		width: 135px;
		float: right;
		margin: 0;
		font-size: 12px; 
	}
}


/* Ce bouton est créé par jQuery */
.showAll {
	-webkit-appearance: none;
   -moz-appearance:    none;
   appearance:         none;
	-webkit-border-radius: 5px;
	-moz-border-radius: 5px;
	border-radius: 5px;
	background: white url(../img/clock-small@2X.png) no-repeat 10px 50%;
	background-size: 12px 12px;
	font-size: 11px;
	padding: 4px 10px 4px 30px;
	border: 1px solid #c6c6c6;
} 

.showAll:hover {
	background-color: #009ee2;
	border-color: #aaa;
}



/* ===============================================
        Styles ETAPE 1-4 Informations voyageurs 
   =============================================== */



div#etape1-4 h4 {
	color: #009ee2;
	text-transform: uppercase;
	font-size: 20px;
	font-weight: normal;
	letter-spacing: -1px;
	margin: 2.5em 0 0em 0;
}

div#etape1-4 input[type=checkbox] {
	position: relative;
	top: 6px;
	left: 10px;
}


p#envoi-tickets {
	width: 300px;
}

input.ok {
	height: 28px;
	font-weight: bold;
	position: relative;
	margin-left: 10px;
}




.infos-zone-2 {
	max-width: 75%;
	padding: 0 20px 0;
	border-left: 5px solid #009ee2;
	margin: 25px 0;
}


.rate-btn-zone,
.carte-btn-zone {
	display: block;
	width: 180px;
	float: left;
	border: none;
	padding: 0;
	margin:  10px 20px 10px 0 ;
}





fieldset.rate-btn-zone legend {
	display: none;
}

fieldset legend {
	display: block;
	padding: 4px 10px;
	font-size: 12px;
	-webkit-border-radius: 5px;
	-moz-border-radius: 5px;
	border-radius: 5px;
	line-height: 13px;
}

.add-rate {
	display: block;	
	color:#282828;
	min-height: 50px;
	width:100%;
	text-decoration:none;
	text-align: left;
	text-shadow:1px 1px 0px #ffffff;	
	font-size: 13px;
	letter-spacing: -1px;
	position: relative;
	margin-bottom: 0px;
	cursor: pointer;
	z-index: 999; /* permet d'éviter que seuls les textes soit clickables dans le button pour IE8 et IE9 */
}


.add-rate span.infos-picto {
	display: block;
	position: absolute;
	right: 0;
}


.add-rate:hover {
	background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #dfdfdf), color-stop(1, #ededed) );
	background:-moz-linear-gradient( center top, #dfdfdf 5%, #ededed 100% );
	filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#dfdfdf', endColorstr='#ededed');
	background-color:#dfdfdf;
	z-index: 999; /* permet d'éviter que seuls les textes soit clickables dans le button pour IE8 et IE9 */
	
}

.add-rate:active {
	position:relative;
	top:1px;
}

.add-rate::before {
	content: 'AJOUTER';
	display: block;
	font-weight: bold;
	font-size: 10px;
	position: relative;
	top: 2px;
	padding-right: 8px;
	text-shadow: none;
}


.cpt_presta {
    display : none;
}

span.price {
	width: 50px;
	text-align: right;
	display: block;
	font-weight: bold;
	position: absolute;
	top: 5px;
	right: 8px;
	font-size: 14px;
}


.add-rate .libelle_prestation {
	margin-top: 10px;
	width: 130px;
}

.price::after, 
.price-carte::after {
	content: ' €';
}


div[id^="prestation_"] {
	position: relative;
	height: auto;
}

div[id^="prestation_"] button {
	margin-top: 0;
}

div[id^="prestation_"] .infos-picto {
	display: block;
	position: absolute;
	top: 26px;
	right: 2px;
	z-index: 999;
}



#compose-cmd {
	padding: 15px 0 25px 0;
}


fieldset.carte-btn-zone legend {
	display: none;
}


button.tarif-carte {
	display: block;
	margin: 0 5px 10px 0;
	text-align: left;
	font-size: 13px;
	letter-spacing: -1px;
	position: relative;
	color: white;
	width: 100%;
	min-height: 50px;
	border: 1px solid #1d8bbb;
	-moz-border-radius: 5px;
	-webkit-border-radius: 5px;
	border-radius: 5px;
	-moz-background-clip: padding;
	-webkit-background-clip: padding-box;
	background-clip: padding-box;
	background-color: #d53f3f;
	-moz-box-shadow: inset 0 1px 0 #fff;
	-webkit-box-shadow: inset 0 1px 0 #fff;
	box-shadow: inset 0 1px 0 #fff;
	background-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDk5IDYxIiBwcmVzZXJ2ZUFzcGVjdFJhdGlvPSJub25lIj48bGluZWFyR3JhZGllbnQgaWQ9ImhhdDAiIGdyYWRpZW50VW5pdHM9Im9iamVjdEJvdW5kaW5nQm94IiB4MT0iNTAlIiB5MT0iMTAwJSIgeDI9IjUwJSIgeTI9Ii0xLjQyMTA4NTQ3MTUyMDJlLTE0JSI+CjxzdG9wIG9mZnNldD0iMCUiIHN0b3AtY29sb3I9IiMxZTkxYzIiIHN0b3Atb3BhY2l0eT0iMSIvPgo8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiM4ZGQxZWUiIHN0b3Atb3BhY2l0eT0iMSIvPgogICA8L2xpbmVhckdyYWRpZW50PgoKPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9Ijk5IiBoZWlnaHQ9IjYxIiBmaWxsPSJ1cmwoI2hhdDApIiAvPgo8L3N2Zz4=);
	background-image: -moz-linear-gradient(bottom, #1e91c2 0%, #8dd1ee 100%);
	background-image: -o-linear-gradient(bottom, #1e91c2 0%, #8dd1ee 100%);
	background-image: -webkit-linear-gradient(bottom, #1e91c2 0%, #8dd1ee 100%);
	background-image: linear-gradient(bottom, #1e91c2 0%, #8dd1ee 100%);
}

.tarif-carte:hover {
	color: #282828;
	background-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDE4MCA1MCIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+PGxpbmVhckdyYWRpZW50IGlkPSJoYXQwIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjUwJSIgeTE9Ii0xLjQyMTA4NTQ3MTUyMDJlLTE0JSIgeDI9IjUwJSIgeTI9IjEwMCUiPgo8c3RvcCBvZmZzZXQ9IjAlIiBzdG9wLWNvbG9yPSIjMWU5MWMyIiBzdG9wLW9wYWNpdHk9IjEiLz4KPHN0b3Agb2Zmc2V0PSIxMDAlIiBzdG9wLWNvbG9yPSIjOGRkMWVlIiBzdG9wLW9wYWNpdHk9IjEiLz4KICAgPC9saW5lYXJHcmFkaWVudD4KCjxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxODAiIGhlaWdodD0iNTAiIGZpbGw9InVybCgjaGF0MCkiIC8+Cjwvc3ZnPg==);
	background-image: -moz-linear-gradient(top, #1e91c2 0%, #8dd1ee 100%);
	background-image: -o-linear-gradient(top, #1e91c2 0%, #8dd1ee 100%);
	background-image: -webkit-linear-gradient(top, #1e91c2 0%, #8dd1ee 100%);
	background-image: linear-gradient(top, #1e91c2 0%, #8dd1ee 100%);
}

.tarif-carte:active::before {
	font-weight: bold;
	font-size: 115%;
}

.tarif-carte:hover::after {
	opacity: 0.7;
}

.tarif-carte::after {
	width: 29px;
	height: 40px;
	content: '';
	display: block;
	background: transparent url(../img/user@2X.png) no-repeat;
	background-size: 29px 40px;
	position: absolute;
	bottom: 4px;
	right: 3px;
}

.tarif-carte::before {
	content: 'Ajouter';
	text-transform: uppercase;
	color: #282828;
	font-weight: bold;
	font-size: 10px;
	letter-spacing: normal;
	text-shadow: none;
}


span.nom-carte {
	max-height: 30px;
	width: 110px;
	bottom: 5px;
	line-height: 15px;
	overflow: hidden;
	text-overflow: ellipsis;
	text-transform: uppercase;
}

span.prestation_carte {
	color: #282828;
	font-style: italic;
}

.price-carte {
	width: 50px;
	text-align: right;
	display: block;
	position: absolute;
	right: 35px;
	top: 5px;
	color: #163543;
	font-weight: bold;
}


#need-help {
	margin: 0 auto 20px 8px;
	font-style: italic;
	font-weight: bold; 
	width: 180px;
	cursor: pointer;
}


div[id^="tarif-carte_"] {
	position: relative;
	height: auto;
}

div[id^="tarif-carte_"] button {
	margin-top: 0;
}

div[id^="tarif-carte_"] .infos-picto {
	display: block;
	position: absolute;
	top: 28px;
	left: 120px;
	z-index: 999;
	background-color: #eee;
	border: 1px solid #296178;
}

div[id^="tarif-carte_"] .infos-picto::after {color: #404040; }





/* ---  tableau Récapitulatif --- */



.live-recap {
	float: left;
	width: 250px;
	min-height: 350px;
	background: #F6F6F6 url('../img/squared@2X.png') repeat;
	background-size: 18px 18px;
	-webkit-border-radius:0px;
	-moz-border-radius: 0px;
	border-radius: 0px;
	border: 1px solid #bbb;
	position: relative;
	margin: 10px auto;
	position: -webkit-sticky;
	position: sticky;
	top : 1em;
}

.live-recap::before {
	content: '';
	display: block;
	width: 263px;
	height: 89px;
	position: absolute;
	bottom: -15px;
	left: -4px;
	background: transparent url('../img/ombre@1X.png') no-repeat;
	z-index: -1;
}

#etape1-4 h4#recap-header {
	width: 250px;
	height: 27px;
	color: #282828;
	margin: 0;
	font-size: 16px;
	padding-top: 5px;
	text-align: center;
	background: #009ee2 url('../img/recap-bg.jpg') repeat-x;
	background-size: 20px 32px;
	-webkit-border-top-left-radius: 2px;
	-webkit-border-top-right-radius: 2px;
	-moz-border-radius-topleft: 2px;
	-moz-border-radius-topright: 2px;
	border-top-left-radius: 2px;
	border-top-right-radius: 2px;
	border: 1px solid #0fa4e5;
	position: relative;
	left: -1px;
	top: -2px;
	-moz-box-shadow: 0px 1px 1px #095d83;
	-webkit-box-shadow: 0px 1px 1px #095d83;
	box-shadow: 0px 1px 1px #095d83;
	filter: progid:DXImageTransform.Microsoft.Shadow(strength = 1, direction = 180, color = '#095d83');
	-ms-filter: "progid:DXImageTransform.Microsoft.Shadow(strength = 1, Direction = 180, Color = '#095d83')";
	text-shadow: 1px 1px 0px #74d2fb;
}


#recap-title {
	display: block;
	width: 204px;
	height: 20px;
	color: white;
	font-size: 14px;
	background: transparent url(../img/agraphes.png) no-repeat 50% 80%;
	background-size: 204px 10px;
	margin: 0 auto;
	position: relative;
	top: 5px;
}


.recap-body {
	font-family: Courier, monospace;
	padding: 25px 15px 55px 15px;
	background: transparent url(../img/dechire.png) no-repeat 0 -1px;
	background-size: 250px 9px;
	letter-spacing: -1px;
}

.recap-body ul {
	list-style-type: none;
	padding: 0;
	margin-left: 10px;
}


.recap-body ul li {
	width: 90%;
	line-height: 1.2em;
	padding-left:0;
	font-size: 12px;
	position: relative;
	margin-bottom: 1em;
}

.recap-body .qte {
	font-weight: bold;
	display: inline-block;
	vertical-align: top;
}

.recap-body .qte::before {
	content: '– ';
	font-weight: normal;
	
}

.item span.libelle_prestation {	
	padding-left: 2px;
	max-width: 140px;
	word-spacing: -2px;
	letter-spacing: normal;
	display: inline-block;
	vertical-align: top; /* Important pour éviter un décalage */
	font-size: 13px;
}

.remove1 {
	position: absolute;
	display: block;
	top: 0;
	right: -10px;
	width: 14px;
	height: 14px;
	background: transparent url(../img/minus-hover.png) no-repeat;
	background-size: 13px 13px;
	border: none;
	cursor: pointer;
	z-index: 999; /* pour IE8 - Don't erase */
}

.remove1:hover {
	background: transparent url(../img/minus.png) no-repeat;
	background-size: 13px 13px;
}

.remove_infos:hover {
	background: transparent url(../img/info.png) no-repeat;
	background-size: 13px 13px;
}

.remove_infos {
	position: absolute;
	display: block;
	top: 0;
	right: -10px;
	width: 14px;
	height: 14px;
	background: transparent url(../img/info.png) no-repeat;
	background-size: 13px 13px;
	border: none;
	cursor: pointer;
	z-index: 999; /* pour IE8 - Don't erase */
}



.resume {
	position: absolute;
	bottom: 10px;
	right: 0;
	font-size: 22px;
	margin: 15px 15px 5px 0;
}

.total {
	color: #c21515;
}


.total::after {
	content: ' €';
}


/* ---------------- End Tableau récapitulatif ------------ */



.validation-btn {
	padding:5px 20px;
	height: 32px;
	overflow: hidden;
	border: 1px solid #038bc6;
	-moz-border-radius: 5px;
	-webkit-border-radius: 5px;
	border-radius: 5px;
	-moz-background-clip: padding;
	-webkit-background-clip: padding-box;
	background-clip: padding-box;
	background-color: #009de1;
	background-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEzNCAzOCIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+PGxpbmVhckdyYWRpZW50IGlkPSJoYXQwIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjUwJSIgeTE9IjEwMCUiIHgyPSI1MCUiIHkyPSItMS40MjEwODU0NzE1MjAyZS0xNCUiPgo8c3RvcCBvZmZzZXQ9IjAlIiBzdG9wLWNvbG9yPSIjMDU4MmI5IiBzdG9wLW9wYWNpdHk9IjEiLz4KPHN0b3Agb2Zmc2V0PSIxMDAlIiBzdG9wLWNvbG9yPSIjMDA5ZGUxIiBzdG9wLW9wYWNpdHk9IjEiLz4KICAgPC9saW5lYXJHcmFkaWVudD4KCjxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxMzQiIGhlaWdodD0iMzgiIGZpbGw9InVybCgjaGF0MCkiIC8+Cjwvc3ZnPg==);
	background-image: -moz-linear-gradient(bottom, #0582b9 0%, #009de1 100%);
	background-image: -o-linear-gradient(bottom, #0582b9 0%, #009de1 100%);
	background-image: -webkit-linear-gradient(bottom, #0582b9 0%, #009de1 100%);
	background-image: linear-gradient(bottom, #0582b9 0%, #009de1 100%);
	color: white;
	text-transform: uppercase;
	font-size: 16px;
	text-align: center;
	text-shadow: 1px 1px #465e69;
}

.validation-btn:hover {
	border: 1px solid #016a97;
	background-color: #009de1;
	background-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEzNCAzOCIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+PGxpbmVhckdyYWRpZW50IGlkPSJoYXQwIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjUwJSIgeTE9Ii0xLjQyMTA4NTQ3MTUyMDJlLTE0JSIgeDI9IjUwJSIgeTI9IjEwMCUiPgo8c3RvcCBvZmZzZXQ9IjAlIiBzdG9wLWNvbG9yPSIjMDU4MmI5IiBzdG9wLW9wYWNpdHk9IjEiLz4KPHN0b3Agb2Zmc2V0PSIxMDAlIiBzdG9wLWNvbG9yPSIjMDA5ZGUxIiBzdG9wLW9wYWNpdHk9IjEiLz4KICAgPC9saW5lYXJHcmFkaWVudD4KCjxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxMzQiIGhlaWdodD0iMzgiIGZpbGw9InVybCgjaGF0MCkiIC8+Cjwvc3ZnPg==);
	background-image: -moz-linear-gradient(top, #0582b9 0%, #009de1 100%);
	background-image: -o-linear-gradient(top, #0582b9 0%, #009de1 100%);
	background-image: -webkit-linear-gradient(top, #0582b9 0%, #009de1 100%);
	background-image: linear-gradient(top, #0582b9 0%, #009de1 100%);
}



div.infos-voyageurs {
	width: 190px;
	float: left;
	margin: 20px 15px 40px 0;
	border-right : 1px dotted #ccc;
	white-space: nowrap;
	text-align:left;
}

div.infos-voyageurs:last-child {
	border-right: none;
}


div.infos-voyageurs input { 
	margin: 5px 20px 5px 0;
}

p.remove-person {
	font-weight: bold;
	margin-top: 0;
}

.libelle_transporte {
	display: block;
}

a.trash {
	text-decoration: none;
	font-weight: normal;
	margin-left: 0px;
}

a.trash:hover {
	color: #009ee2;
}

a.trash:hover::after {
	background: transparent url(../img/trash-blue.png) no-repeat;
	background-size: 10px 13px;
}

a.trash::after {
	content: '';
	display: inline-block;
	width: 10px;
	height: 13px;
	background: transparent url(../img/trash.png) no-repeat;
	background-size: 10px 13px;
	margin-left: 5px;
	position: relative;
	top: 1px;
}

/* =======================================================
         ÉTAPE 1-5 Infos paiement (tableau coordonnées)
   ======================================================= */


#infos-paiement {
	clear: left;
	background-color: transparent;
	border: none;
	border-collapse: separate; /* Pour que FF gère correctement les arrondis */
	margin-top: 4em;
}


#infos-paiement th {
	-webkit-border-top-left-radius: 5px;
	-webkit-border-top-right-radius: 5px;
	-moz-border-radius-topleft: 5px;
	-moz-border-radius-topright: 5px;
	border-top-left-radius: 5px;
	border-top-right-radius: 5px;
	border: 1px solid #c6c6c6;
	font-weight: normal;
	text-align: left;
	padding: 0.3em 1em;
}

#infos-paiement th h4 {
	color: #009ee2;
	font-size: 20px;
	font-weight: normal;
	letter-spacing: -1px;
	text-transform: uppercase;
	margin: 5px auto 5px auto;
}


#infos-paiement th p {
	margin: 5px auto;
}

#infos-paiement th .infos-zone{
	border: 0;
}

.alert-form-msg {
	color: #c11415;
	text-align: center;
	font-weight: bold;
	font-style: italic;
}


#infos-paiement td {
	border: 1px solid #c6c6c6;
	border-top: none;
	vertical-align: middle;
}

.picto-lines td {
	padding: 5px 15px 5px 40px;	
}


#nom, #ville {
	text-transform: uppercase;
}

#prenom {
	text-transform: capitalize;
}


#pays {
	text-transform: uppercase ;
}

#observation {
	padding: 0.5em 0.5em 0.5em 1.5em;
	border: none;
	width: 95%;
}

.label4ie {
	display: none;
	border: none;
	margin: 4px 15px 4px 10px;
	float: left;
	position: relative;
	top: 3px;
}

#infos-paiement input {
	display: block;
	border: none;
	margin: 4px 10px 4px 10px;
	-webkit-border-radius: 0px;
	-moz-border-radius: 0px;
	border-radius: 0px;
}

#infos-paiement select {
	display: block;
	border: none;
	margin: 4px 10px 4px 10px;
	-webkit-border-radius: 0px;
	-moz-border-radius: 0px;
	border-radius: 0px;
}

/* Indication des champs obligatoires */
/* Attention : Ne pas rassembler les 4 déclarations ci-dessous en une seule */

:required::-webkit-input-placeholder::after {
	content: ' *';
	font-weight: bold;
}

input:required:-moz-placeholder::after { /* Firefox 18- */
	content: ' *';
	font-weight: bold;
}

input:required::-moz-placeholder::after { /* Firefox 19+ */
	content: ' *';
	font-weight: bold;
}

:required:-ms-input-placeholder::after { /* Internet Explorer */
	content: ' *';
	font-weight: bold;
}




@media (min-width: 768px) {
	#infos-paiement input {
	float: left;
	}
}



#user-icon select {
	margin-left: 20px;
	margin-right: 15px;
}

#validation-cell {
	text-align: right;
	padding: 0.5em 2em 0.5em 1em  ;
	-webkit-border-bottom-right-radius: 5px;
	-webkit-border-bottom-left-radius: 5px;
	-moz-border-radius-bottomright: 5px;
	-moz-border-radius-bottomleft: 5px;
	border-bottom-right-radius: 5px;
	border-bottom-left-radius: 5px;
}

#validation-cell input {
	display: block;
	float: left;
}

@media (min-width: 768px) {
	#validation-cell input {
		float: right;
	}
}


.link-btn {
	background: none;
	border: none;
	text-decoration: none;
	-webkit-border-radius: 0px;
	-moz-border-radius: 0px;
	border-radius: 0px;
	cursor: pointer;
}

#validation-cell #payt-infos-reset {
	position: relative;
	top: 5px;
	border-bottom: none;
}


#payt-infos-reset:hover {
		font-weight: bold;
}


#ligne_envoi_postal label {
	position: relative;
	top: 4px;
}

#user-icon {
	background: transparent url(../img/user-icon-big@2X.png) no-repeat 15px 50%;
	background-size: 18px 18px;
}

#email-icon {
	background: transparent url(../img/arobase@2X.png) no-repeat 15px 50%;
	background-size: 18px 18px;
}

#phone-icon {
	background: transparent url(../img/phone@2X.png) no-repeat 15px 50%;
	background-size: 18px 18px;
}

#enveloppe-icon {
	background: transparent url(../img/enveloppe@2X.png) no-repeat 15px 50%;
	background-size: 18px 13px;
}

#pins-icon {
	background: transparent url(../img/pins@2X.png) no-repeat 15px 50%;
	background-size: 16px 24px;
}

#ligne_id_contact {
	display: none;
}

.agence #ligne_id_contact {
	display: table-row;
}

#email #email2{
    text-transform: lowercase;
}

#infos-paiement input.conserve_donnees{
    display : inline;
    float : none;
}

/* Spécifictés des informations de contact pour les agences */
/*Par défaut on masque les lignes d'adresse ainsi que l'envoi postal*/

.agence #ligne_envoi_postal,
.agence #ligne_email,
.agence #ligne_adresse,
.agence #ligne_ville,
.agence #phone-group
 {
	display: none;
}




/* ============================================================
         ÉTAPE 2 RÉCAPITULATIF FINAL & PAIEMENT
         – approche mobile first –
         Ci-dessous en premier lieu les styles pour mobiles
   ============================================================ */



#etape2 h4 {
	color: #009ee2;
	text-transform: uppercase;
	font-size: 20px;
	font-weight: normal;
	letter-spacing: -1px;
	margin: 0.5em 0 1.5em 0;
}


#etape2 #reservation {
	margin-bottom: 2em;
	font-style: italic;
}

#etape3 {
	background-color: white;
	padding: 35px 40px 25px 40px;
}

#etape3 h4 {
	color: #009ee2;
	text-transform: uppercase;
	font-size: 20px;
	font-weight: normal;
	letter-spacing: normal;
	margin: 0.5em 0 ;
}


#dab {
	height: 10px;
	-moz-border-radius: 8px;
	-webkit-border-radius: 8px;
	border-radius: 8px;
	-moz-background-clip: padding;
	-webkit-background-clip: padding-box;
	background-clip: padding-box;
	background-color: #929090;
	-moz-box-shadow: inset 3px 3px 4px rgba(0,0,0,.75);
	-webkit-box-shadow: inset 3px 3px 4px rgba(0,0,0,.75);
	box-shadow: inset 3px 3px 4px rgba(0,0,0,.75);
}


#ticket {
	width: 95%;
	font-family: Courier, monospace;
	font-size: 11px;
	padding: 0;
	min-height: 350px;
	border: 1px solid #c5c5c5;
	-moz-border-radius: 11px 11px 1px 1px / 29px 31px 1px 1px;
	-webkit-border-radius: 11px 11px 1px 1px / 29px 31px 1px 1px;
	border-radius: 11px 11px 1px 1px / 29px 31px 1px 1px;
	-moz-background-clip: padding;
	-webkit-background-clip: padding-box;
	background-clip: padding-box;
	background-color: #f6f5f5;
	-moz-box-shadow: 0 2px 4px rgba(0,0,0,.35);
	-webkit-box-shadow: 0 2px 4px rgba(0,0,0,.35);
	box-shadow: 0 2px 4px rgba(0,0,0,.35);
	background-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDM1OSA1MjUiIHByZXNlcnZlQXNwZWN0UmF0aW89Im5vbmUiPjxsaW5lYXJHcmFkaWVudCBpZD0iaGF0MCIgZ3JhZGllbnRVbml0cz0ib2JqZWN0Qm91bmRpbmdCb3giIHgxPSI1MCUiIHkxPSIxMDAlIiB4Mj0iNTAlIiB5Mj0iLTEuNDIxMDg1NDcxNTIwMmUtMTQlIj4KPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2UyZTJlMiIgc3RvcC1vcGFjaXR5PSIwLjc5Ii8+CjxzdG9wIG9mZnNldD0iMCUiIHN0b3AtY29sb3I9IiNlMmUyZTIiIHN0b3Atb3BhY2l0eT0iMC43OSIvPgo8c3RvcCBvZmZzZXQ9IjIxJSIgc3RvcC1jb2xvcj0iI2ZmZiIgc3RvcC1vcGFjaXR5PSIwLjc5Ii8+CjxzdG9wIG9mZnNldD0iNTUlIiBzdG9wLWNvbG9yPSIjZTJlMmUyIiBzdG9wLW9wYWNpdHk9IjAuNzkiLz4KPHN0b3Agb2Zmc2V0PSI3NSUiIHN0b3AtY29sb3I9IiNmZGZkZmQiIHN0b3Atb3BhY2l0eT0iMC43OSIvPgo8c3RvcCBvZmZzZXQ9Ijg4JSIgc3RvcC1jb2xvcj0iI2VlZSIgc3RvcC1vcGFjaXR5PSIwLjc5Ii8+CjxzdG9wIG9mZnNldD0iOTUlIiBzdG9wLWNvbG9yPSIjZGVkZWRlIiBzdG9wLW9wYWNpdHk9IjAuNzkiLz4KPHN0b3Agb2Zmc2V0PSI5OSUiIHN0b3AtY29sb3I9IiNmNmY2ZjYiIHN0b3Atb3BhY2l0eT0iMC43OSIvPgo8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiNkNWQ1ZDUiIHN0b3Atb3BhY2l0eT0iMC43OSIvPgogICA8L2xpbmVhckdyYWRpZW50PgoKPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjM1OSIgaGVpZ2h0PSI1MjUiIGZpbGw9InVybCgjaGF0MCkiIC8+Cjwvc3ZnPg==);
	background-image: -moz-linear-gradient(bottom, rgba(226,226,226,.79) 0%, rgba(226,226,226,.79) 0.49%, rgba(255,255,255,.79) 20.75%, rgba(226,226,226,.79) 54.76%, rgba(253,253,253,.79) 74.76%, rgba(238,238,238,.79) 87.99%, rgba(222,222,222,.79) 95%, rgba(246,246,246,.79) 98.51%, rgba(213,213,213,.79) 100%);
	background-image: -o-linear-gradient(bottom, rgba(226,226,226,.79) 0%, rgba(226,226,226,.79) 0.49%, rgba(255,255,255,.79) 20.75%, rgba(226,226,226,.79) 54.76%, rgba(253,253,253,.79) 74.76%, rgba(238,238,238,.79) 87.99%, rgba(222,222,222,.79) 95%, rgba(246,246,246,.79) 98.51%, rgba(213,213,213,.79) 100%);
	background-image: -webkit-linear-gradient(bottom, rgba(226,226,226,.79) 0%, rgba(226,226,226,.79) 0.49%, rgba(255,255,255,.79) 20.75%, rgba(226,226,226,.79) 54.76%, rgba(253,253,253,.79) 74.76%, rgba(238,238,238,.79) 87.99%, rgba(222,222,222,.79) 95%, rgba(246,246,246,.79) 98.51%, rgba(213,213,213,.79) 100%);
	background-image: linear-gradient(bottom, rgba(226,226,226,.79) 0%, rgba(226,226,226,.79) 0.49%, rgba(255,255,255,.79) 20.75%, rgba(226,226,226,.79) 54.76%, rgba(253,253,253,.79) 74.76%, rgba(238,238,238,.79) 87.99%, rgba(222,222,222,.79) 95%, rgba(246,246,246,.79) 98.51%, rgba(213,213,213,.79) 100%);
	position: relative;
	top: -5px;
	margin: auto;
}


/*le contenu de la div #recap 
  représente tout le texte du ticket, 
  y compris le code barre */

#recap {
	padding: 35px 20px 25px 20px;	
} 

#ticket-footer {
	width: 100%;
	height: 20px;
	background: transparent url(../img/ticket-frame@2X.png) repeat-x 100% bottom;
 	background-size: 20px 20px;
 	position: relative;
 	left: 0px;
 	top: 12px;
}

#agreement {
	padding: 20px 20px 20px 30px;
	margin-top: 1em;
}


#ticket ul {
	list-style-type: none;
	padding-left: 20px;
	width: 90%;	
}


.code-barre {
	float: right;
	width: 70px;
	height: auto;
}


#cmd {
	text-align: center;
	margin: 10px auto 30px 0;
	width: 60%;
	line-height: 1.2em;
}


.etat-payt-cmd {
	font-style: italic;
	text-transform: lowercase;
}


#votre-cmd {		
	display: block;
	width: 173px;
	height: 21px;
	background: transparent url(../img/cmd@2X.png) no-repeat center center;
	background-size: 88%;
	margin: 5px auto;
}



/*--- Styles de l'étape 2 (ticket et agreement) pour les tailles > mobiles --- */

@media (min-width: 400px) {
 
	/*On fixe la largeur du ticket */
	
	#recap-container {
		max-width: 360px;
	}
} 


	
	
@media (min-width: 768px) {
 
	/*A partir de la taille tablette en mode portrait */
	
	#recap-container {
		float: left;
	}
	
	#agreement {
		margin-top: 0;
		max-width: 220px;
		float: right;
	}
	
}




/*-------------- END styles l'étape 2 pour les mobiles -------------- */



#agreement p {
	position: relative;
	padding-left: 10px;
	margin-bottom: 20px;
}


#agreement input[type=checkbox] {
	position: absolute;
	left: -15px;
	top: 3px;
}

p.date-passage, p.itineraire {
	margin: 0;
	color: #000;
	font-size: 12px;
}

p.itineraire {
	padding-bottom: 5px;
	border-bottom: 1px dashed #aaa;
	font-size: 110%;
	font-weight: bold;
	margin-top: 30px;
}





 #ticket ul.details-troncons {
	border-left: 5px solid #a5c9dc;
	padding-left: 5px;
	
}

#ticket ul.details-troncons li p {
	margin: 2px;
}

.titre-prestations {
	margin-top: 20px;
	font-weight: bold;
}

.lignes-prestations li {
	font-size: 12px;
	line-height: 1.5em;
}



p.itineraire:first-child {
	margin-top: 45px;
}


.details-itineraire {
	margin-top: 5px;
}


div.final-recap {
	margin-bottom: 30px;
	word-spacing: -2px;
}

.final-recap ul li {
	position: relative;
}

#ticket .lignes-prestations {
	padding-left: 10px;
}

.lignes-prestations li::before {
	content: '- ';
}


.final-recap ul li span.prix,
p#frais-port span.prix {
	display: block;
	float: right;
	margin-right: 0px;
}


p#frais-port {
	width: 90%;
	padding-left: 20px;
	position: relative;
}

#total-cmd {
	width: 220px;
	background: transparent url(../img/asterisk@2X.png) repeat-x 0 0;
	background-size: 16px 7px;
	padding-top: 15px;
	padding-right: 10px;
	font-size: 22px;
	text-transform: uppercase;
	text-align: right;
	margin: 35px 0 10px auto;
}

#final-total {
	color: #c21515;
}


#cgv {
	display: none;
	max-height: 600px;
	padding-right: 30px;
	text-align: justify;
	overflow-y: auto;
}
 
#cgv-link:hover {
	cursor: pointer;
	text-decoration: underline;
}

.ui-dialog-buttonset button {
	-webkit-border-radius: 5px;
	-moz-border-radius: 5px;
	border-radius: 5px;
	background-color: #fff;
	float: right;
	margin: 30px;
	border: none;
	padding: 5px 10px;
}

.ui-dialog-buttonset button:hover {
	background-color: #ef9e11;
}


.agence #annulation_resa {
	margin-top: 1em;
}


#purchase {
	width: 201px;
	height: 34px;
	margin-top: 20px;
    border: none;
	-moz-border-radius: 5px;
	-webkit-border-radius: 5px;
	border-radius: 5px;
	-moz-background-clip: padding;
	-webkit-background-clip: padding-box;
	background-clip: padding-box;
	background-color: #e53737;
	-moz-box-shadow: inset 0 -1px 0 1px rgba(244,243,243,.48);
	-webkit-box-shadow: inset 0 -1px 0 1px rgba(244,243,243,.48);
	box-shadow: inset 0 -1px 0 1px rgba(244,243,243,.48);
	background-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDIwMSAzNCIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+PGxpbmVhckdyYWRpZW50IGlkPSJoYXQwIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjUwJSIgeTE9IjEwMCUiIHgyPSI1MCUiIHkyPSItMS40MjEwODU0NzE1MjAyZS0xNCUiPgo8c3RvcCBvZmZzZXQ9IjAlIiBzdG9wLWNvbG9yPSIjYzYyZjJmIiBzdG9wLW9wYWNpdHk9IjEiLz4KPHN0b3Agb2Zmc2V0PSIxMDAlIiBzdG9wLWNvbG9yPSIjZTUzNzM3IiBzdG9wLW9wYWNpdHk9IjEiLz4KICAgPC9saW5lYXJHcmFkaWVudD4KCjxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIyMDEiIGhlaWdodD0iMzQiIGZpbGw9InVybCgjaGF0MCkiIC8+Cjwvc3ZnPg==);
	background-image: -moz-linear-gradient(bottom, #c62f2f 0%, #e53737 100%);
	background-image: -o-linear-gradient(bottom, #c62f2f 0%, #e53737 100%);
	background-image: -webkit-linear-gradient(bottom, #c62f2f 0%, #e53737 100%);
	background-image: linear-gradient(bottom, #c62f2f 0%, #e53737 100%);
	color: #fff;
	font-size: 15px;
	font-weight: bold;
	text-shadow: 0 1px 1px rgba(93,101,105,.43);
	text-transform: uppercase;
}

.agence #purchase {
	min-height: 45px;
}


#purchase:hover {
	background-image: -moz-linear-gradient(top, #c62f2f 100%, #e53737 0%);
	background-image: -o-linear-gradient(top, #c62f2f 100%, #e53737 0%);
	background-image: -webkit-linear-gradient(top, #c62f2f 100%, #e53737 0%);
	background-image: linear-gradient(top, #c62f2f 100%, #e53737 0%);
}

#purchase:active {
	-moz-box-shadow: inset 0 0px 0 1px rgba(244,243,243,.48);
	-webkit-box-shadow: inset 0 0px 0 1px rgba(244,243,243,.48);
	box-shadow: inset 0 0px 0 1px rgba(244,243,243,.48);
}


p#secure {
	height: 21px;
	padding-left: 75px;
	background: transparent url(../img/visa@2X.png) no-repeat;
	background-size: 69px 21px;
	margin-bottom: 25px;
}


#agreement a {
	display: block;
	margin-left: 10px;
	text-decoration: none;
	margin-bottom: 10px;
	padding-left: 25px;
	background: transparent url(../img/bouee@2X.png) no-repeat 0 50%;
	background-size: 16px 16px;
}


@media (min-width: 320px) and (max-width:400px) {
	#agreement a {
		margin-left: 0;
		background-position: 0 4px;	
	}
}



#agreement a:hover {
	font-weight: bold;
	text-decoration: underline;
}


#form_paiement p input#bouton {
	padding:5px 20px;
	height: 32px;
	overflow: hidden;
	border: 1px solid #038bc6;
	-moz-border-radius: 5px;
	-webkit-border-radius: 5px;
	border-radius: 5px;
	-moz-background-clip: padding;
	-webkit-background-clip: padding-box;
	background-clip: padding-box;
	background-color: #009de1;
	background-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEzNCAzOCIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+PGxpbmVhckdyYWRpZW50IGlkPSJoYXQwIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjUwJSIgeTE9IjEwMCUiIHgyPSI1MCUiIHkyPSItMS40MjEwODU0NzE1MjAyZS0xNCUiPgo8c3RvcCBvZmZzZXQ9IjAlIiBzdG9wLWNvbG9yPSIjMDU4MmI5IiBzdG9wLW9wYWNpdHk9IjEiLz4KPHN0b3Agb2Zmc2V0PSIxMDAlIiBzdG9wLWNvbG9yPSIjMDA5ZGUxIiBzdG9wLW9wYWNpdHk9IjEiLz4KICAgPC9saW5lYXJHcmFkaWVudD4KCjxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxMzQiIGhlaWdodD0iMzgiIGZpbGw9InVybCgjaGF0MCkiIC8+Cjwvc3ZnPg==);
	background-image: -moz-linear-gradient(bottom, #0582b9 0%, #009de1 100%);
	background-image: -o-linear-gradient(bottom, #0582b9 0%, #009de1 100%);
	background-image: -webkit-linear-gradient(bottom, #0582b9 0%, #009de1 100%);
	background-image: linear-gradient(bottom, #0582b9 0%, #009de1 100%);
	color: white;
	text-transform: uppercase;
	font-size: 16px;
	text-align: center;
	text-shadow: 1px 1px #465e69;
}


#form_paiement p input#bouton:hover {
	border: 1px solid #016a97;
	background-color: #009de1;
	background-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEzNCAzOCIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+PGxpbmVhckdyYWRpZW50IGlkPSJoYXQwIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjUwJSIgeTE9Ii0xLjQyMTA4NTQ3MTUyMDJlLTE0JSIgeDI9IjUwJSIgeTI9IjEwMCUiPgo8c3RvcCBvZmZzZXQ9IjAlIiBzdG9wLWNvbG9yPSIjMDU4MmI5IiBzdG9wLW9wYWNpdHk9IjEiLz4KPHN0b3Agb2Zmc2V0PSIxMDAlIiBzdG9wLWNvbG9yPSIjMDA5ZGUxIiBzdG9wLW9wYWNpdHk9IjEiLz4KICAgPC9saW5lYXJHcmFkaWVudD4KCjxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxMzQiIGhlaWdodD0iMzgiIGZpbGw9InVybCgjaGF0MCkiIC8+Cjwvc3ZnPg==);
	background-image: -moz-linear-gradient(top, #0582b9 0%, #009de1 100%);
	background-image: -o-linear-gradient(top, #0582b9 0%, #009de1 100%);
	background-image: -webkit-linear-gradient(top, #0582b9 0%, #009de1 100%);
	background-image: linear-gradient(top, #0582b9 0%, #009de1 100%);
}

.msg_niv_0 {
	display: none;
}

.msg_niv_1 {
	color: inherit;
}

.msg_niv_2 {
	color: orange;
}

.msg_niv_3 {
	background-color: orange;
	color: black;
}

.msg_niv_4 {
	background: rgba(255, 255, 255, .95) url(/img/warning-red@2X.png) no-repeat 20px 50%;
	background-size: 30px;
	border-radius: 5px;
	padding: 15px 10px 0px 80px;
	color: #404040;
}

#message_session_uuid, #message_attente_serveur {
    vertical-align: middle; 
    width: 100%; 
    height: 100%; 
    position: fixed;
    top: 0; 
    opacity: 1;
    background-color: rgba(255, 255, 255, 0.4);
}


p.patientez_uuid, p.patientez {
	text-transform: uppercase;
	position: relative;
	width:50%;
	height: 250px;	
	background-color: #404040;
	opacity: 1;
	margin: 5em auto;
	padding: 2em 2em 3em 2em;
	color: #fff;
	font-size: 1.3em;
	line-height: 1.2em;
	font-weight: bold;
	-webkit-border-radius: 0;
	-moz-border-radius: 0;
	border-radius: 0;
	border: 2px solid #3e4244;
	-webkit-box-shadow: 0px 0px 10px 0px #000;
	box-shadow: 0px 0px 10pxx #000;
}

p.patientez_uuid {
	background: #eee url(/img/half-broken@2X.png) 50% 30px no-repeat ;
	background-size: 56px 50px;
	max-height: 200px;
	padding: 100px 3em 2em 3em;
	text-transform: none;
	font-weight: bold;
	border: 0;
	color: #404040;
}

p.patientez_uuid .ui-button-text {
	background-color: #fff;
	color: #3f403f;
	font-weight: bold;
	font-size: 15px;
	border-radius: 5px;
	border: 1px solid #a9a5a5;
}

p.patientez_uuid .ui-button-text:hover {
	background-color: #f7c045;
	color: #3f403f;
}


@media (min-width:400px) {
	
	p.patientez_uuid, p#patientez {
		height: 200px;
		max-width: 450px;
	}
}

#message_attente_serveur img {
	display: block;
	margin: 2.5em auto 1em auto;
	z-index: 999;
}

#message_session_uuid_reload {
	cursor: pointer;
}


/* ===============================================
        Styles TOOLTIPS (toutes étapes) 
   =============================================== */

.ui-tooltip {
    padding: 15px 10px 15px 20px;
    -webkit-border-radius: 8px;
    -moz-border-radius: 8px;
    border-radius: 8px;
    background-color: #282828;
    color: #cccaca;
    /*-webkit-hyphens: auto;
    -moz-hyphens: auto;
    -ms-hyphens: auto;
    -o-hyphens: auto;
    hyphens: auto;*/
    font-style: italic;
    -webkit-box-shadow: 2px 2px 15px 0px #282828;
           	box-shadow: 2px 2px 15px 0px #282828;
    z-index: 900;
}

/*Styles communs à toutes les dialog box*/
.ui-dialog {
	-webkit-border-radius: 8px;
	-moz-border-radius: 8px;
	border-radius: 8px;
	background-color: #282828;
	color: #cccaca;
	-webkit-box-shadow: 2px 2px 15px 0px #282828;
	box-shadow: 2px 2px 15px 0px #282828;
	z-index: 50000;
	position: fixed;
	margin: 0 auto;
	padding: 10px 25px 25px 25px;
	max-width: 600px;
	min-width: 250px;
	width: 80% !important;
	left: 0 !important;
	right: 0 !important;
	/*	min-height: 320px;*/
	font-style: normal;
	font-size: 13px;	
}

.ui-dialog a {
	color: #dcdada;
}

@media (min-width: 320px) and (max-width:400px) {
	.ui-dialog {
		padding: 15px;
	}
}


.ui-dialog .ui-dialog-title {
	float: left;
	margin: .1em 0;
	text-transform: uppercase;
	padding-right: 80px;
	height: auto;
	max-width: 80%;
	overflow: auto;
	text-overflow: clip;
	white-space: normal;
	font-weight: bold;
	font-size: 15px;
}


@media (min-width: 320px) and (max-width:400px) {
	span.ui-dialog-title {
		max-width: 50px;
	}
}



.ui-dialog:focus {
	outline: 0;
	border: 0;
}

.ui-dialog-titlebar {
	border-bottom: 1px solid rgba(255, 255, 255, 0.19);
	margin-bottom: 15px;
	padding-bottom: 5px;
	padding-left: 0;
	cursor: move;
	position: relative;
}


.ui-dialog .ui-dialog-titlebar-close {
	position: absolute;
	right: .3em;
	top: 50%;
	width: 30px;
	margin: -20px 0 0 0;
	padding: 1px;
	height: 30px;
	background: none;
	border: 0;
	box-shadow: none;
}


.ui-dialog button.ui-dialog-titlebar-close:hover {
	color: #F1AC32;
}


.ui-dialog button.ui-dialog-titlebar-close:focus {
	outline: 0;
	border: 0;
}


.ui-dialog span.ui-icon-closethick {
	display: block;
	width: 18px;
	height: 18px;
	background: transparent url(../img/close@2X.png) no-repeat;
	background-size: 18px;
	-webkit-border-radius: 0px;
	-moz-border-radius: 0px;
	border-radius: 0px;
}


.ui-dialog span.ui-icon-closethick:hover {
	opacity: .8;
}

.ui-dialog-content {
	font-size: 110%;
}

.ui-dialog-content a {
	color: #fff;
}

.ui-dialog-content a[href=""] {
	text-decoration: none;
}

hr {
	margin: .8em auto;
	opacity: 0.3;
}


/*div.help-tooltip {
	margin: 0 auto;
	padding: 25px;
	max-width: 400px;
	min-width: 250px;
	width: 70% !important;
	left: 0 !important;
	right: 0 !important;
/*	min-height: 320px;*!/
	font-style: normal;
	font-size: 13px;
}*/





div.help-tooltip h4 {
	text-transform: uppercase;
	font-size: 22px;
	margin-top: 0;
	text-shadow:1px 1px 0px #000;
	/*border-bottom: 1px dotted #fff;*/
}

div.help-tooltip p {
	margin-bottom: 30px;
}

p#add-person img {
	position: relative;
	top: -12px;
	margin-bottom: 0;
}


p#rmv-person img {
	position: relative;
	top: -14px;
	left: -10px;
	margin-bottom: 0;
}

p#rmv-person {
	text-align: right;
	padding-right: 5px;
}


.pro-space-tooltip {
	width: 250px;
}

@media (min-width:400px) {
	.pro-space-tooltip {
		width: 300px;
	}
}


/* ------------------------- */
/*          Etape 3          */
/* ------------------------- */

#conclusion, #etape3 {
	max-width: 700px;
	padding: 35px 40px 25px 40px;
}

#zone_form_paiement input[type="submit"] {
	background-color: #009ee1;
	height: 32px;
	color: #fff;
}



/*Bilan du paiement 
*************************************************** */

#conclusion {
	padding: 50px
}

#conclusion h4 {
	font-size: 20px;
	text-transform: uppercase;
	font-weight: normal;
	letter-spacing: normal;
	margin: 0 0 1em 0;
	color: #282828;
}

#bilan_paiement {
	font-size: 1.1em;
	margin-bottom: 1.5em;
}

.payt-result-box {
	max-width: 350px;
	text-align: center;
	-moz-border-radius: 5px;
	-webkit-border-radius: 5px;
	border-radius: 5px;
	-moz-background-clip: padding;
	-webkit-background-clip: padding-box;
	background-clip: padding-box;
	background-color: #d11313;
/*	-moz-box-shadow: 2px 1px 4px #5d6568;
	-webkit-box-shadow: 2px 1px 4px #5d6568;
	box-shadow: 2px 1px 4px #5d6568;*/
	background-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDQxMyAyNzkiIHByZXNlcnZlQXNwZWN0UmF0aW89Im5vbmUiPjxsaW5lYXJHcmFkaWVudCBpZD0iaGF0MCIgZ3JhZGllbnRVbml0cz0ib2JqZWN0Qm91bmRpbmdCb3giIHgxPSI1MCUiIHkxPSIxMDAlIiB4Mj0iNTAlIiB5Mj0iLTEuNDIxMDg1NDcxNTIwMmUtMTQlIj4KPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2M2MmYyZiIgc3RvcC1vcGFjaXR5PSIxIi8+CjxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iI2U1MzczNyIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgIDwvbGluZWFyR3JhZGllbnQ+Cgo8cmVjdCB4PSIwIiB5PSIwIiB3aWR0aD0iNDEzIiBoZWlnaHQ9IjI3OSIgZmlsbD0idXJsKCNoYXQwKSIgLz4KPC9zdmc+);
	background-image: -moz-linear-gradient(bottom, #c62f2f 0%, #e53737 100%);
	background-image: -o-linear-gradient(bottom, #c62f2f 0%, #e53737 100%);
	background-image: -webkit-linear-gradient(bottom, #c62f2f 0%, #e53737 100%);
	background-image: linear-gradient(bottom, #c62f2f 0%, #e53737 100%);
	padding: 20px 40px;
	margin: 4em auto 2em auto;
}


#payt-succeed {
	-moz-border-radius: 5px;
	-webkit-border-radius: 5px;
	border-radius: 5px;
	-moz-background-clip: padding;
	-webkit-background-clip: padding-box;
	background-clip: padding-box;
	background-color: #d11313;
	background-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEwMCAxMDAiIHByZXNlcnZlQXNwZWN0UmF0aW89Im5vbmUiPjxsaW5lYXJHcmFkaWVudCBpZD0iaGF0MCIgZ3JhZGllbnRVbml0cz0ib2JqZWN0Qm91bmRpbmdCb3giIHgxPSI1MCUiIHkxPSIxMDAlIiB4Mj0iNTAlIiB5Mj0iLTEuNDIxMDg1NDcxNTIwMmUtMTQlIj4KPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzIyODMyNCIgc3RvcC1vcGFjaXR5PSIxIi8+CjxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iIzNhZDQxYyIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgIDwvbGluZWFyR3JhZGllbnQ+Cgo8cmVjdCB4PSIwIiB5PSIwIiB3aWR0aD0iMTAwIiBoZWlnaHQ9IjEwMCIgZmlsbD0idXJsKCNoYXQwKSIgLz4KPC9zdmc+);
	background-image: -moz-linear-gradient(bottom, #228324 0%, #3ad41c 100%);
	background-image: -o-linear-gradient(bottom, #228324 0%, #3ad41c 100%);
	background-image: -webkit-linear-gradient(bottom, #228324 0%, #3ad41c 100%);
	background-image: linear-gradient(bottom, #228324 0%, #3ad41c 100%);
}

#payt-wait {
	-moz-border-radius: 5px;
	-webkit-border-radius: 5px;
	border-radius: 5px;
	-moz-background-clip: padding;
	-webkit-background-clip: padding-box;
	background-clip: padding-box;
	background-color: #d11313;
	background-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEwMCAxMDAiIHByZXNlcnZlQXNwZWN0UmF0aW89Im5vbmUiPjxsaW5lYXJHcmFkaWVudCBpZD0iaGF0MCIgZ3JhZGllbnRVbml0cz0ib2JqZWN0Qm91bmRpbmdCb3giIHgxPSI1MCUiIHkxPSIxMDAlIiB4Mj0iNTAlIiB5Mj0iLTEuNDIxMDg1NDcxNTIwMmUtMTQlIj4KPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzIyODMyNCIgc3RvcC1vcGFjaXR5PSIxIi8+CjxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iIzNhZDQxYyIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgIDwvbGluZWFyR3JhZGllbnQ+Cgo8cmVjdCB4PSIwIiB5PSIwIiB3aWR0aD0iMTAwIiBoZWlnaHQ9IjEwMCIgZmlsbD0idXJsKCNoYXQwKSIgLz4KPC9zdmc+);
	background-image: -moz-linear-gradient(bottom, #ffb76b 0%, #ff7f04 100%);
	background-image: -o-linear-gradient(bottom, #ffb76b 0%, #ff7f04 100%);
	background-image: -webkit-linear-gradient(bottom, #ffb76b 0%, #ff7f04 100%);
	background-image: linear-gradient(bottom, #ffb76b 0%, #ff7f04 100%);
}



p.cause {
	text-transform: uppercase;
	color: #fff;
	font-size: 1.6em;
	padding-top: 70px;
	line-height: normal;
}

#payt-wait .cause {
	padding-top: 20px
}

p.consequence, a.consequence {
	color: #fff;
	font-style: italic;
	font-size: 1.3em;
	line-height: normal;
}


#payt-succeed .cause {
	background: transparent url(../img/cb-big@2X.png) no-repeat 50% 0;
	background-size: 74px 47px;
}

#payt-failed .cause {
	background: transparent url(../img/cb-failure@2X.png) no-repeat 50% 0;
	background-size: 74px 73px;
	padding-top: 90px;
}

#payt-canceled .cause {
	background: transparent url(../img/stop@2X.png) no-repeat 50% 0;
	background-size: 74px 65px;
	padding-top: 90px;
}


#conclusion #recap-zone {
	max-width: 432px; 
	margin: 4em auto 2em auto;
	position: relative;
	left: 0;
}




#back-to-resa {
	display: block;
	max-width: 220px;
	min-height: 20px;
	color: white;
	font-size: 1.2em;
	-webkit-border-radius: 3px;
	-moz-border-radius: 3px;
	border-radius: 3px;
	padding: 8px 10px;
	line-height: normal;
	border: 1px solid #fff;
	text-decoration: none;
	text-align: center;
	margin: 20px auto;
}


#back-to-resa:hover {
	color: #282828;
	background-color: #fff;
}


.ui-dialog-buttonset .ui-button:focus {
	outline: 0;
}



/* ==========================================================================
   Styles pour le template récap PDF 
   ========================================================================== */

h1.logo-cie {
	min-height: 100px;
}

#recap-pdf {
	padding-top: 5px;
}


.address-block {
	width: 250px;
	position: absolute;
	top: 0px;
	right: 20px
}


.block-confirmation {
	-webkit-border-radius: 5px;
	-moz-border-radius: 5px;
	border-radius: 5px;
	border: 1px solid #282828;
	padding: 0.8em;
	text-transform: uppercase;
	text-align: center;
}

#recap-pdf #recap {
	width: 800px;
	padding: 2em 2em 5em 2em;
	border: 1px solid #aaa;
}


#recap-pdf #recap ul {
	list-style-type: none;
}

#recap-pdf #recap ul.details-troncons {
	border-left: 3px solid #aaa;
	padding-left: 15px;
}

#recap-pdf #recap ul.details-troncons p{
	margin: 0;
}


#recap-pdf #recap ul.lignes-prestations {
	padding-left: 0px;
}

#recap-pdf #recap ul.lignes-prestations li {
	font-size: 14px;
}


#recap-pdf #recap p {
	word-spacing: 1px;
}

#recap-pdf #recap p#total-cmd {
	width: 210px;
	background: transparent url(../img/asterisk@1X.png) repeat-x 0 0;
	font-size: 20px;
	text-transform: uppercase;
	text-align: right;
	position: static;
	float: right;
	margin-top: 0.5em;

}




.footer-infos-cie {
	font-size: 0.85em;
	text-align: center;
	border-top: 1px solid #333;
	padding-top: 10px;
	margin-top: 3em;
}






/* ==========================================================================
   "RETINISATION" DES IMAGES
   ========================================================================== */

@media
only screen and (-webkit-min-device-pixel-ratio: 2),
only screen and (   min--moz-device-pixel-ratio: 2),
only screen and (     -o-min-device-pixel-ratio: 2/1),
only screen and (        min-device-pixel-ratio: 2),
only screen and (                min-resolution: 192dpi),
only screen and (                min-resolution: 2dppx) { 


       
      	a#espace-pro {
      		background: transparent url(../img/locked@2x.png) no-repeat;
      		background-size: 13px 15px;	
      		}
      		
      	.infos-zone {
      	    background: transparent url(../img/info@2X.png) no-repeat 95% 50%;
      	    background-size: 20px 20px;
      	}
      	
      	
      	.dropdown-style {
      	    background: #eeefef url(../img/dropdown-arrow@2X.png) no-repeat 95% 50%;
      	    background-size: 13px 7px;
      	}
      	
      	.date-ok {
      		background: transparent url('../img/checkmark@2X.png') no-repeat 100% 50%;
      		background-size: 21px 15px;
      	}
      	
       
} /*end requête pour cibler les écran rétina*/



/* ==========================================================================
   Media Queries
   ========================================================================== */

   
   

@media only screen and (min-width: 35em) {

}

@media _print,
       (-o-min-device-pixel-ratio: 5/4),
       (-webkit-min-device-pixel-ratio: 1.25),
       (min-resolution: 120dpi) {

}

/* ==========================================================================
   Helper classes
   ========================================================================== */

.ir {
    background-color: transparent;
    border: 0;
    overflow: hidden;
    *text-indent: -9999px;
}

.ir:before {
    content: "";
    display: block;
    width: 0;
    height: 150%;
}

.hidden {
    display: none !important;
    visibility: hidden;
}

.visuallyhidden {
    border: 0;
    clip: rect(0 0 0 0);
    height: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    position: absolute;
    width: 1px;
}

.visuallyhidden.focusable:active,
.visuallyhidden.focusable:focus {
    clip: auto;
    height: auto;
    margin: 0;
    overflow: visible;
    position: static;
    width: auto;
}

.invisible {
    visibility: hidden;
}

.clearfix:before,
.clearfix:after {
    content: " ";
    display: table;
}

.clearfix:after {
    clear: both;
}

.clearfix {
    *zoom: 1;
}

/* ==========================================================================
   Print styles
   ========================================================================== */

@media _print {
    
    * {
        background: transparent !important;
        color: #000 !important; /* Black prints faster: h5bp.com/s */
        box-shadow: none !important;
        text-shadow: none !important;
    }

    a,
    a:visited {
        text-decoration: underline;
    }

    a[href]:after {
        content: " (" attr(href) ")";
    }

    abbr[title]:after {
        content: " (" attr(title) ")";
    }

    /*
     * Don't show links for images, or javascript/internal links
     */

    .ir a:after,
    a[href^="javascript:"]:after,
    a[href^="#"]:after {
        content: "";
    }

    pre,
    blockquote {
        border: 1px solid #999;
        page-break-inside: avoid;
    }

    thead {
        display: table-header-group; /* h5bp.com/t */
    }

    tr,
    img {
        page-break-inside: avoid;
    }

    img {
        max-width: 100% !important;
    }

    @page {
        margin: 0.5cm;
    }

    p,
    h2,
    h3 {
        orphans: 3;
        widows: 3;
    }

    h2,
    h3 {
        page-break-after: avoid;
    }
}


/*************************************************************************
 * Repositionnement de l'ensemble des z-index importants
 *************************************************************************/
 
#contenu_panier {/* Panneau présentation du panier*/
    z-index : 10000;
}

.top_meta_infos {/* Barre Oublier mes données */
    z-index : 15000;
}

#ui-datepicker-div {
    z-index : 20000 !important;
}

.ui-dialog {/* Toutes boites de dialogue (sauf messages utilisateur)*/
    z-index : 30000;
}

.ui-tooltip {/* Tooltip survol liens et images */
    z-index : 35000;
}

#message_utilisateur {/* Message serveur => utilisateur */
    z-index : 40000;
}

#message_session_uuid{/* le rideau message erreur de session */
    z-index : 90000;
}

#message_attente_serveur{/* le rideau qui bloque tout */
    z-index : 100000;
}



/****************************************************************************
 * Fil d'ariane
 */

div#fildariane{
    margin	: -8px;
    margin-top	: 0;
    padding	: 0.5em;
    white-space	: normal;
    overflow	: hidden;
}

div#fildariane span {
    color	: #DDF;
    background	: white;
    padding	: 0 0.5em 0.1em 0.2em;
    border-radius	: 1em;
    white-space: nowrap;
}

div#fildariane span.encours {
    color	: #003;
    background	: #DDF;
}


div#fildariane span.active {
    color	: #00A;
    background	: white;
}


div#fildariane span em{
    font-style	: normal;
    font-weight	: bold;
    display	: inline-block;
    min-width	: 1.5em;
    min-height	: 1.5em;
    text-align	: center;
    vertical-align	: middle;
    background	: #AAF;
    color	: #336;
    border	: solid 2px #AAF;
    border-radius	: 1em;
    margin	: 0 0.1em;
}