/*********************************************************************

		CODE NON NETTOYE SMARTPHONE < ANCIENNE FEUILLE DE STYLE

*********************************************************************/

@media all and (max-width: 640px){


/* Structure générale */


/* Menu */

	#nav-toggle img {
	    width: 75%;
	    margin-top: 0;
	    margin-left: -32px;
	}
    nav#menu #nav-toggle {
        height: 49px !important;
    }
    nav#menu #nav-toggle span {
        margin: 7px;
        height: 25px;
	    width: 43px;
    }

/* Corps de texte général */

    .connexion{
        padding: 0;        
    }
    .central.noir>div.connexion {
        padding: 15px !important;
        margin: 0;
    }
	.connexion h2 + p {
	    padding: 15px 10px;
	}
	/* Encart une fois connecté (accueil réservation + mon compte) */
	.connexion .connexion {
	    padding: 10px 20px !important;
	}

/* Corps de texte : caractéristiques pages e-commerce */

    div.commande {
        text-align: center;
    }
    .quadri-col {
        margin: 25px 0;
    }
    .quadri-col .col {
        width: 100% !important;
    }
    .quadri-col img {
        margin-top: 0;
    }
    .quadri-col .col {
        width: 100% !important;
        padding: 5px;
    }
    .quadri-col .col:nth-child(2) {
        padding-right: 0;
    }
    .quadri-col .col:nth-child(4) {
        width: 10%;
        margin-bottom: 20px;
    }

    table.commande{
        font-size: 10px;
    }
    table.commande thead th:nth-child(1), table.commande tr td:nth-child(1) {
        width: 36%;
    }
    thead {
        text-transform: none;
        letter-spacing: 0;
    }
	th {
	    font-size: 9px;
	}


/* Détails */

	/* Titres */ 

	    h2{
	        margin-top: 0;
	    }
	    h2 span {
			margin: 10px 35% 20px;
	    }
	    div#stjoseph h2 {
		    line-height: 33px;
		}
	    div.commande h4{
	        font-size: 22px;
            font-weight: 500;
	    }
	    div.commande h2{
	        margin-top: 0;
	    }

	/* Textes divers */

	    div.commande p, .option-details p {
	        text-align: center;
	    }
	    p.cursive {
	        line-height: 41px;
	    }
	    h3 + ul li {
	        text-align: left !important;
	    }

	/* Images */

	    .medaillon-p {
	        float: none;
	    }
	    div.commande img{
	        height: 100px;
	        border-radius: 50px;
	    }
		div#popin .medaillon {
		    width: 170px;
		    margin: 5px 25% 28px;
		}

	/* Formulaires */

	    label {
	        width: 100%;
	        margin: 7px 0 4px;
	    }
	    input, select, textarea{
	        max-width: none;
	        width: 100% !important;
	        box-sizing: border-box;
	    }
	    div.commande input[type="number"]{
	        width: 32% !important;        
	    }
	    div.commande select {	
		    width: auto !important;
	        font-size: 11px;
	    }
	    input#infolettre {
	        margin-left: 0;
	        width: 5% !important;
	    }
	/* Boutons */

	    button, a.button{
	        width: 100%;
	        margin-right: 0;
	        box-sizing: border-box;
	        text-align: center;
	    }
	    button.left-button, 
	    button.left-button + a.button,
	    a.left-button + a.button{
	        width: auto;
	    }
	    .connexion a.left-button {
	        padding: 7px 9px;
	        font-size: 9px;
	    }
	    .connexion ul + a.button {
	        width: auto;
	        margin-top: 20px;
	    }
	    body#maj-coordonnees button, 
	    button[type="submit"] {
	        margin-right: 0;
	    }
	    div#stjoseph .formule a.reserver{
	        font-size: 12px;
	    }


}

@media all and (min-width: 481px) and (max-width: 640px) and (orientation:landscape) {
	#nav-toggle img {
	    width: 49%;
        margin-top: 0;
	    margin-left: -68px;
	}
	nav#menu #nav-toggle span {
	    margin: 10px;
   	}
}
@media all and (min-width: 376px) and (max-width: 481px) and (orientation:landscape) {
	#nav-toggle img {
	    width: 60%;
	}
}



@media all and (max-width: 375px) {
	nav#menu #nav-toggle span {
	    margin: 7px 19px 7px 7px;
	    height: 22px;
	    width: 29px;
	}
	#nav-toggle img {
	    width: 78%;
	    margin-left: -41px;
	}
	nav#menu #nav-toggle {
	    height: 45px !important;
	}
	#langues ul li {
	    font-size: 9px;
	    text-transform: uppercase !important;
	}
	ul#choix-reservations li a {
	    text-align: center;
	}
	ul#tombola li {
	    width: 100%;
	    height: 100px;
	    line-height: 100px;
	}
}

@media all and (max-width: 320px) {
	nav#menu #nav-toggle span {
	    margin: 7px 25px 7px 0;
	}
	#nav-toggle img {
	    margin-left: -23px;
	}
}

@media all and (max-width: 240px) {
	nav#menu #nav-toggle span {
	    margin: 0;
	    height: 29px;
	    width: 100%;
	}
	#nav-toggle img {
	    margin-left: 0;
	    width: 100%;
	}
	nav#menu #nav-toggle {
	    height: 76px !important;
	}
	#langues {
	    height: auto;	
    	padding: 10px 0;
	}
	#langues ul li a {
	    margin: 0;
	    letter-spacing: 2px;
	    font-size: 11px;
	}
	a#bouton_reservez {
    	font-size: 15px;
    }
	nav#menu a {
	    padding: 6px 10px !important;
	    font-size: 11px;
	    letter-spacing: 2.8px;
	}
	ul#choix-reservations li a {
	    letter-spacing: 0px;
	    font-size: 13px;
	    line-height: 27px;
	    padding: 8px;
	    height: auto;
	}
}


/*******************************************************

	TABLETTES ET SMARTPHONES

********************************************************/


@media only screen and (min-width: 480px) and (max-width: 800px) and (orientation:portrait) {
	#nav-toggle img {
	    width: 69%;
	    margin-top: -4px;
	}
}
@media only screen and (min-width: 600px) and (max-width: 960px) and (orientation:portrait) {
	#nav-toggle img {
	    width: 59%;
	    margin-top: -6px;
        margin-left: -67px;
	}
}
@media only screen and (min-width: 768px) and (max-width: 1024px) and (orientation:portrait) {
	#nav-toggle img {
	    width: 48%;
	    margin-top: -6px;
        margin-left: -67px;
	}
}
@media only screen and (min-width: 800px) and (max-width: 1280px) and (orientation:portrait) {
	nav#menu #nav-toggle {
    	height: 64px;
    }
}