/* = ELEMENTS SMARTPHONE 
 ------------------------------- */

@media only screen and (max-width: 959px) {

	
	
	/* info comme Les champs marqués d'un astérisque (*) sont obligatoires. + infos*/
	.info, .obligatoire {
    font-size: 0.9em;
    padding-bottom: 10px;

}

/*
    @content Framework yui cssgrids-responsive
*/
.yui3-g-r > [class ^= "yui3-u"] {
    width: 100%;
}

.yui3-u-1-2:nth-child(2) {
	padding-left: 0;
}

/* dans les formulaires, les inputs des colonnes autres que la 1ère ont une marge à gauche
on leur enlève dans la version mobile comme chaque élément prend toute la largeur */

div[class^="yui3-u-"]:not(:first-child) {
	padding-left: 0;
}

p {
	margin-bottom: 0;
}

/*
    @content Style commun
*/

header .bg_mainBlue,
#header .bg_mainBlue {
   padding: 2%;
}
header li,
#header li {
	font-size: 13px;
}

#site {
    margin: inherit;
    width: inherit;
}


.labelContainer label {
	font-size: inherit;
}

/* page de connexion */

main .loginPage .formContainer, #main .loginPage .formContainer, .loginPage .textBox {
    min-height: 0;
}

main .formContainer legend, #main .formContainer legend {
	text-align: left;
}

.liste-radio-inline > div,
.liste-radio-inline  div,
.liste-radio-inline  * {
    display: inline;
    width: auto;
}
 


input[type="checkbox"],
input[type="radio"] {}



/* la bulle info est à droite du champ */
#voyageDestination #motif .labelWithTooltip .tooltip, 
#voyageDestination #voyageMoyen .labelWithTooltip .tooltip {
	right: 0.7%;
	left: 0 !important;
}


.datepicker input, .datepicker button{
	display: inline-block;
}

.datepicker button{
	padding: 0;
}

.inputContainer .datepicker input,
.datepicker input {
	width: 100px;
	margin-right: 10px;
}

input[type=text], input[type=password], select {
   /*  padding: 1em 0; */
/*    padding: 1.5% 1%; */
}

.breve {
    padding: 0.2em;
    margin-bottom: 0.5em;
}

/* ICONES */
.agenda {
    padding: 10px;
    margin: 0;
}

[class^="icon_"], [class*=" icon_"] {
    display: inline-block;
}



#main .yui-button a,
#main .yui-button button {
    /* font-size: 120%; */
}

#main .yui-button {
    min-width: 9em;
}


/*
    @content Bandeau haut, chemin de fer
*/

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


#infos {
    margin: 0.1em;
    margin-left: 0.625em;
}

#menu_access { 
    position: fixed; 
    width: 100%; 
    z-index: 20; 
    bottom: 0;
    padding: 2px 5px; 
    border-top: 1px solid #999999;
    background-color: #CCCCCC;
}
#pied_de_page { margin-bottom: 2.92em; }

/* masquage du lien "aller au contenu" */
#access_liens li + li + li {
    position:absolute;
    left:-10000px;
    top:auto;
    height: 1px; 
    width: 1px; 
    overflow:hidden;	
}
#access_liens li {
    display: inline-block;
}
		
#links {
    display: block;
}

#links .deconnexionGauche,
#links .deconnexionDroite {
    position:absolute;
    left:-10000px;
    top:auto;
    height: 1px; 
    width: 1px; 
    overflow:hidden;
}

#links .deconnexionBouton a {
    background: #999999;
    color: #FFFFFF;
    display: inline-block;
    width: 9em;
    text-align: center;
    height: 2.5em;
    line-height: 2.5em;
    text-decoration: none;
    margin: 0 0.5em;
}

/* FIL D'ARIANE */

#path {
	padding-left: 3%;
}
#path span, #path a {
	/* font-size: 0.8em; */
}

#path .filArianeChevron {
    color: #000;
}

/*
    HEADER
*/

header li,
#header li {
	/* font-size: 2vw; */
}

header h1,
#header h1 {
	/* font-size: 7vw; */
}

#header .fermer_langues,
#header .langues,
#header .fermer_reseaux_sociaux,
#header .reseaux_sociaux {
    display: none;
}

header .twitterContainer, #header .twitterContainer{
text-align: right;
padding-right: 4%;
box-sizing: border-box;
vertical-align: text-top;
}

header .twitterContainer a, #header .twitterContainer a {
    /* font-size: 0.5em; */
}

.accessibilite  {
  padding-left: 1%;
}

.titleAriane img {
	max-width: 300px;
}

header .twitter-follow-button i {
	width: 20px;
    height: 20px;	
}



/* MAIN */

/*** FORMULAIRES ***/


#main .checkbox-content:not(.info),
#main .checkbox-content.info,
.labelContainer,
.inputContainer,
form label,
form input,
#rappel,
#rappel li,
p,
li,
.errorBox,
.errorBox h3,
.erreurConnexion,
.formContainer,
.formContainer input
.formContainer label,
.formContainer legend,
.accessibilite a  {
	font-size: 12px !important;
}

.accessibilite a {
	margin-right: 1%;
}

.errorBox .titleError {
	font-size: 15px !important;
}

main .formContainer .titleError, #main .formContainer .titleError {
	margin-left: 1em;
}
.labelContainer,
.inputContainer,
form label,
form input {
	display: block;
	width: 100%;
	max-width: 100vw;
}

#main .button-group span,
#main .button-group .yui-button {
	display: block;
	width: 100%;
	margin: 0;
	min-width: 0;
}

#main .yui-button button {
	box-sizing: border-box;
	margin-top: 2%;
}

.toggleControl {
		left: 15px;
	}


/*** PAGE LOGIN ***/
.login .labelContainer {
    width: auto;
}

main .login .formContainer input, #main .login .formContainer input {
	max-width: none;
	font-size: 20px;
}



.login .forgottenContainer {
	padding-left: 0;
}

.login .forgottenContainer a {
	font-size: 0.85em;
}

main .loginPage .formContainer .btn, #main .loginPage .formContainer .btn {

    margin-left: auto;
    margin-right: auto;

}

.textBox {
	margin-left: 0;
}

/* id ou mdp oublié : passer sur deux lignes */
main .formContainer .forgottenContainer span,
#main .formContainer .forgottenContainer span {
	display: block;
}


/*** PAGE FORMULAIRE ***/

main .formContainer, #main .formContainer {
    padding: 1em;
} 

/* bouton retour haut de page */
.retour_haut, .retour_haut a, .retour_haut svg {
	width: 55px;
	height: 55px;
}


#header a { 
	width: 100%;
}

.logo { overflow: hidden }

.logo h1 {
	font-size: 0.85em; 
	border-bottom: none; 
	margin-top: 0px; 
}

#header #haut_droit { width: 100%; }
#header { 
	width: 100%; 
	margin-bottom: 10px; 
	}
	
	#hd {
	margin-bottom: 0;
	}
	
	/* corps de page */

main h2, #main h2 {
	font-size: 0.7em;
	padding-left: 5%;
}

main .loginPage .formContainer input, #main .loginPage .formContainer input {
	max-width: 100%;
	width: 90%;
}

main .loginPage .formContainer .labelContainer, 
#main .loginPage .formContainer .labelContainer {
		width: 100%; 
	}

main h3, #main h3 {
	
}
main .accordionSection h3, #main .accordionSection h3 {
	min-height: 2.5em;
}

#banner a {
	padding: 7%;
}

.accordionSection p {
  font-size: 1em;
}
.mentionsLegales ,
.politiqueConfidentialite {
	padding: 1em;
}

.textBox {
	font-size: 0.73em;
}

.textBox h3 {
	padding-bottom: 0.5em;
}






/*
    @content Menu bas, bas de page
*/

.mentionsLegalesSmartphone {
	display: none;
}

footer, #footer {
    font-size: 0.6em;
}

footer ul, #footer ul,
footer p, #footer p {
	margin: 0;
	padding: 1% 2%;
}

#pied_de_page {
    margin-top: 3em;
}
hr {display: none;}


#pied_content {
    padding: 0.2em;
}

#pied_content h2.mobile{ 
    clear: both;
    padding: .7em;
    border: solid 1px #cccccc;
    margin-bottom:0;
    text-align: center;
}
#pied_content h2.mobile,
#pied_content h2.mobile a {
    cursor: pointer;
    color: #000000;
    font-weight: bold;
}
#pied_content h2.mobile a {
    text-decoration: none;
}
#pied_content.active h2.mobile,
#pied_content.active h2.mobile a {
    background-color: #336699;
    color: #FFFFFF;
}

.pied_haut_lien li a { width: 100%; height: auto; display: block; }
.pied_haut_lien li { background-color: #f4f2f1; }
.pied_haut_lien li, .interministeriel li { list-style: none outside none; }
.pied_haut_lien li, .pied_bas, .interministeriel li { padding: 1em 0; }
.pied_haut, .pied_bas, .interministeriel { width: 100%; text-align: center; }

.pied_haut, .pied_bas, .interministeriel { display: none; }
#pied_content.active .pied_haut, 
#pied_content.active .pied_bas, 
#pied_content.active .interministeriel { 
    display: inherit !important;
}

/* debut erreurs */

.errorBox .titleError+ul, .infoBox .titleInfo+ul {
    margin-left: 1em;
}

.errorBox li {
    margin: 1em 0;
}

.errorBox a {
    text-decoration: underline;
}

/* fin erreurs */



/*
    @content Pages Accueil
*/

#login h2 {
    font-size: 105%;
}

#login #inscription {
    margin: 0.5em 0;
    margin-bottom: 1em;
}
#login #connexion {
    margin: 0.5em 0;
}

#login .zoneform {
    margin: 1em 10% 0.5em;
}

#login #identifiantOublie a,
#login #motDePasseOublie a {
    margin: 10px 8px;
    display: block;
    color: #336699;
}

/* voyage */
.finaliserVoy div {
    width: 14.1em;
}

.checkbox-inline,
.checkbox-inline-block {
    padding-bottom: 10px;
}
.checkbox-inline input[type="checkbox"],
.checkbox-inline-block input[type="checkbox"] {
    margin-right: 0;
}
.checkbox-inline label,
.checkbox-inline-block label {
    padding: 6px;
}
.checkbox-inline-block label {
    display: inline-block;
    min-width: 50%
}

/* accueil connecte */

#profil .textBox {
	min-height: 0;
}

.ajoutVoyage--container {
	padding: 5%;
}

#profil .chevron.blue li::before {
	content: "";
}

#profil #gestionCompte .mobile { 
    clear: both;
    padding: .7em;
    border: solid 1px #cccccc;
    margin-bottom:0;
}
#profil #gestionCompte .mobile a {
    cursor: pointer;
    color: inherit;
    font-weight: inherit;
    text-decoration: none;
}

#profil #gestionCompte.active .mobile,
#profil #gestionCompte.active .mobile a {
    background-color: #336699;
    color: #FFFFFF;
}

#profil #gestionCompte ul { text-align: center; margin: 0; }
#profil #gestionCompte li { background: #f4f2f1; padding: 1em 0; margin: 0; }
#profil #gestionCompte li a { width: 100%; height: auto; display: block; }

#profil #gestionCompte ul { display: none; }
#profil #gestionCompte.active ul { display: inherit !important; }

#profil #gestionVoyages {
    margin-left: 10px;
    padding-top: 10px;
}

#main #accessibilite p,
main #accessibilite p,
#main #accessibilite h4,
main #accessibilite h4,
#main #accessibilite h5,
main #accessibilite h5,
#main #accessibilite h6,
main #accessibilite h6,
#accessibilite > ul li ul li ul li,
#accessibilite .littleList li {
	font-size: 15px;
}
#accessibilite {
	padding: 15px;
}

#main #accessibilite h3,
main #accessibilite h3,
#main #accessibilite h4,
main #accessibilite h4,
#main #accessibilite h5,
main #accessibilite h5,
#main #accessibilite h6,
main #accessibilite h6 {
	margin-top: 5%;
}

}

@media only screen and (max-width: 670px) {
	#main .agenda + div .yui-dialog {
	    left: 0 !important;
	}
	
}

/* équivalent sm sur Bootstrap */
@media only screen and (max-width: 540px) {
	
	main h2, #main h2 {
		font-size: 0.8em;
	}
	
	header .twitterContainer a, #header .twitterContainer a {

	   /*  font-size: 0.5em; */
	
	}
	
	header .twitterContainer, #header .twitterContainer{
		width: 30%;
	}
	
	header .twitterContainer i, #header .twitterContainer i {
		width: 15px;
		height: 15px;
		background-size: contain;
	}
	
	main .loginPage .formContainer .btn, #main .loginPage .formContainer .btn {
		width: 100%;
		margin: 0;
	}
	
	main .loginPage .formContainer input, #main .loginPage .formContainer input {
		width: 100%;
	}
	
	
	
	.accessibilite {
    	font-size: 0.8em;
    }
	
	.titleAriane img {
		max-width: 200px;
	}
	
	/* Bouton réduire / agrandir de la "bannière" Ariane */
	#btnToggleAriane {
		display: none;
	}
	
	.border.color {
		margin-top: 0;
		margin-bottom: 0;
		box-shadow: 0px 2px 0px 0px #e0e0e0;
	}
	
	
	
	
	main .accordionSection h3, #main .accordionSection h3 {
		/* font-size: 1.1em; */
	}
	
	/* footer */
	
	#footer, footer {
		font-size: 0.8em;
	}
	
	footer ul, #footer ul {
		margin-left: 0;
		margin-right: 0
	}
	
	
	/* mentions légales */
	
	.mentionsLegalesEcranClassique {
		display: none;
	}
	
	
	.mentionsLegalesSmartphone {
		display: block;
		background-color: #fff;
		height: 100%;
		padding: 0.2em 0.5em;
		position: relative;
	}
	
	.mentionsLegalesSmartphone div {
		color: rgba(48, 69, 92, 0.8);
		/* font-size: 17px; */
		line-height: 26px;
		letter-spacing: 1px;
		position: relative;
		overflow: hidden;
		max-height: 800px;
		opacity: 1;
		transform: translate(0, 0);
		margin-top: 14px;
		z-index: 2;
		transition: all 1ms linear;
	}
	
	
	
	.mentionsLegalesSmartphone label {
		cursor: pointer;
		position: relative;
		display: block;
	}
	
	.mentionsContent ul,
	.mentionsContent label	 {
		transform: translate(0, 0);
	  	margin-top: 14px;
	  	z-index: 2;
	  	transition: all 1ms linear;
	}
	
	.mentionsLegalesSmartphone input[type="radio"] + label, 
	.mentionsLegalesSmartphone input[type="checkbox"] + label,
	.mentionsLegalesSmartphone label {
		float: none;
		display: inline-block;
		}
	
	.mentionsLegalesSmartphone input[type="checkbox"] {
		position: absolute;
		cursor: pointer;
		top: 0;
		left: 0;
		z-index: 3;
		display: block;
		opacity: 0;
	}
	
	.mentionsLegalesSmartphone input[type=checkbox] ~ label {
	width: 100%;
	line-height: 2;
	}
	
	.mentionsLegalesSmartphone input[type=checkbox] ~ label i {

		font-style: normal;
	}
	
	.mentionsLegalesSmartphone input[type=checkbox]:not(:checked) ~ .mentionsContent {
		margin-top: 0;
		max-height: 0;
		display: block;
	}
	
	.mentionsLegalesSmartphone input[type=checkbox]:checked ~ .mentionsContent {
		 max-height: none;
	}
	
	.mentionsLegalesSmartphone input[type=checkbox] ~ label i:before {
		position: absolute;
		display: block;
		width: 20px;
		content: "\2303";
		transform: rotate(180deg);
		right: 5%;
		font-weight: normal;
		bottom: -10px;
		font-size: 1.7em;
	}
	.mentionsLegalesSmartphone input[type=checkbox]:checked ~ label i:before {
	    transform: rotate(0deg);
	}
	
	footer .mentionsLegalesSmartphone .mentionsContent li,
	#footer .mentionsLegalesSmartphone .mentionsContent li {
		display: block;
		/* font-size: 1em; */
		text-align: center;
		margin: 2% 0;
		
		background-color: #006ec7;
		
	}
	
	footer .mentionsLegalesSmartphone .mentionsContent p,
	#footer .mentionsLegalesSmartphone .mentionsContent p {
		/* font-size: 0.85em; */
	}
	
	footer .mentionsLegalesSmartphone .mentionsContent li a,
	#footer .mentionsLegalesSmartphone .mentionsContent li a {
	color: #fff;
	width: 100%;
	padding: 2%;
	display: block;
	}
	
	#footer .retour_haut {
		display: none;
	}
}