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

		CODE NON NETTOYE SMARTPHONE < ANCIENNE FEUILLE DE STYLE

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

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

	body::before {
	    background-image: url(../img/fonds/accueil-bis.jpg);
	}
	#balviennois::before, #test_accueil::before {
	    background-position: center;
	    background-size: cover;
	}
	

/* 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;
    }

/* Page d'accueil */

	.page_vitrine #prochain_bal {
	    padding: 0;
	    width: 88%;
	    box-sizing: border-box;
	    margin: 20px;
	    /* border: none; */
	}
	.page_vitrine div#prochain_bal img {
	    width: 100% !important;
	    margin: 15px 0;
	}
	.page_vitrine #prochain_bal a.button {
	    font-size: 18px;
	    letter-spacing: 0;
	    display: inline-block;
	    padding: 11px;
	    box-sizing: border-box;
	    float: none;
	    width: 85%;
	    margin: 10px 10px 20px;
	}
	#prochain_bal p {
	    text-align: center;
	    letter-spacing: 1px;
	    margin: 14px 30px;
	}
	body#balviennois div.central {
	    padding: 0 0 20px !important;
	}
	.page_vitrine #prochain_bal ul li:nth-child(2) {
	    font-size: 21px;
	    line-height: 27px;
	    margin-bottom: 18px;
	}
	.page_vitrine #prochain_bal p:first-child {
	    font-size: 34px;
	    margin-top: 25px;
	    line-height: 28px;
	}
	.page_vitrine #prochain_bal p:first-child {
		font-size: 50px;
    	line-height: 55px;
	}
	.patronage {
	    padding: 20px 0;
	    margin: 0 5px;
	}
	.page_vitrine #patronage p:first-child, p.cursive {
	    font-size: 29px;
	    line-height: 22px;
	}
	.page_vitrine #patronage .medaillon {
	    width: 39%;
	    margin: 10px 20px;
	}
	.page_vitrine #patronage ul li {
	    width: 50%;
	    margin: 0;
	}
	.page_vitrine p {
	    text-align: justify;
	    font-size: 14px;
	}

	.page_vitrine article .central.noir, .page_vitrine .central.orange, .page_vitrine article .central.blanc {
	    padding: 15px !important;
	}
	div.blanc, div.orange{
	    padding: 20px !important;
	}
	.page_vitrine span {
	    font-size: 13px;
	}
	#programme p>img+span {
	    font-size: 15px !important;
	    display: block;
	    text-align: center !important;
	}
	.page_vitrine #patronage ul li {
	    width: 100%;
	}
	
	.page_vitrine .medaillon {
	    width: 40%;
	    border-radius: 100%;
	    float: left;
	    margin: 5px 30% 20px;
	}
	#programme .medaillon {
	    width: 60%;
	    margin: 5px 20% 20px;
	}
	
	#balviennois .page_vitrine .medaillon {
	    width: 80%;
	    border-radius: 100%;
	    float: none;
	    margin: 0; 
	}
	#balviennois .patronage .medaillon {
	    width: 100%;
	    border-radius: 100%;
	    float: left;
	    margin: 0;
	}
	.page_vitrine .patronage p{
		text-align: center;
	}
		.central.blanc.accueil>div+div p, 
	#prochain_bal p:nth-child(3),
	.page_vitrine p{
		font-size: 16px;
		line-height: 27px;
	}
	p#date{
		line-height: 13px !important;
	}

/* Actualités page d'accueil */ 

	.central.blanc.accueil>div {
	    max-height: 250px;
	}
	.central.blanc.accueil img {
	    margin-top: -30px;
    	width: 110%;
	}


/* Page programme */ 

	.page_vitrine .tri-col .col {
	    width: 100%;
	    height: auto;
	    overflow: hidden;
	}
	.page_vitrine .col img {
	    width: 110%;
	    height: auto;
	}
	.page_vitrine .col a:hover {
	    height: 170px;	    
	    line-height: 22px;
	    padding-top: 20%;
	    font-size: 16px;
	}

/* Page Dress code */

	#tenue .tri-col .col {
	    width: 100%;
	}
	#tenue .col img {
	    width: 50%;
	    margin: 0 25%;
	}
	#tenue #patronage p:first-child, p.cursive {
	    font-size: 38px;
	}
	#tenue p.cursive {
	    text-align: center;
	    font-size: 60px; 
	}
	#tenue .orange img {
	    width: 50%;
	    margin: 0 25% 20px;
	}

/* Page contact */

	#contact .connexion {
	    border: none;
	    padding: 0 20px;
	    margin-bottom: 0;
	}
	#formulaire_contact button {
	    width: 100%;
	    margin-left: 185px;
	}
	#formulaire_contact button {
	    margin-right: 0;
	}

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

    .connexion{
        padding: 0;        
    }
	.page_vitrine .connexion {
	    padding: 20px;
	    margin-bottom: 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.commande h4{
	        font-size: 22px;
	    }
	    div.commande h2{
	        margin-top: 0;
	    }
	    #programme h2, #programme h3 {
		    text-align: center;
		}

	/* Textes divers */

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

	/* Images */

	    .medaillon-p {
	        float: none;
	    }
	    div.commande img{
	        height: 100px;
	        border-radius: 50px;
	    }

	/* Formulaires */

	    label {
	        width: 100% !important;
	        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 {
	        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;
	    }



}
@media only screen and (min-width: 480px) and (max-width: 800px) and (orientation:landscape) {
	#deroule .col a:hover {
	    padding-top: 19%;
	    height: 61%;
	    line-height: 15px;
	    font-size: 12px;
	}
}
@media all and (min-width: 600px) and (max-width: 736px) and (orientation:landscape) {
	.page_vitrine .tri-col .col {
	    width: 48%;
	    overflow: hidden;;
	}
	.page_vitrine .col img {
	    width: 100%;
	    /* height: auto; */
	}
}

@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: 360px) and (max-width: 640px) and (orientation:landscape) {
	.page_vitrine .col img {
	    width: 125%;
	}
}


@media all and (min-width: 376px) and (max-width: 481px) and (orientation:landscape) {
	#nav-toggle img {
	    width: 60%;
	}
}
@media all and (min-width: 320px) and (max-width: 480px) and (orientation:landscape) {
	.page_vitrine .tri-col .col {
	    height: 200px;
	}
	.page_vitrine .col img {
	    width: 100%;
	}
}
@media all and (min-width: 320px) and (max-width: 640px) and (orientation:landscape) {
	.page_vitrine .col a {
	    height: 43px;
	    line-height: 43px;
	    font-size: 14px;
	}
	.page_vitrine .col img {
	    width: 120%;
	    height: auto;
	}
	.page_vitrine .col a:hover {
	    padding-top: 13%;
	}
}
@media all and (min-width: 320px) and (max-width: 568px) and (orientation:landscape) {
	.page_vitrine .col a:hover {
	    padding-top: 14%;
	}
}
@media all and (min-width: 320px) and (max-width: 533px) and (orientation:landscape) {
	.page_vitrine .col a:hover {
	    padding-top: 16%;
	}
}
@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;
	}
	.page_vitrine .col a:hover {
	    padding-top: 23%;
	}
}

@media all and (max-width: 320px) {
	nav#menu #nav-toggle span {
	    margin: 7px 25px 7px 0;
	}
	#nav-toggle img {
	    margin-left: -23px;
	}
	.page_vitrine .col img {
	    width: 127%;
	    height: auto;
	}
	.page_vitrine .col a:hover {
	    padding-top: 25%;
	    font-size: 12px;
	}
}

@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: 12px;
	}
	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;
	}	
	.page_vitrine .col img {
	    width: 183%;
	    margin-left: -32%;
	}
}


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

	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;
	}
	#deroule .col a:hover {
	    height: 53.4%;
	    padding-top: 23%;
	    line-height: 10px;
	    font-size: 11px;
	}
}

@media only screen and (min-width: 600px) and (max-width: 1024px) and (orientation:portrait) {
	#deroule .col a:hover {
	    height: 53.4%;
	    padding-top: 15%;
	    line-height: 10px;
	    font-size: 20px;
	}
}
@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) {
	#deroule .col a:hover {
	    height: 52.4%;
	    padding-top: 16%;
	    line-height: 10px;
	    font-size: 11px;
	}
}
@media only screen and (min-width: 800px) and (max-width: 1280px) and (orientation:portrait) {
	nav#menu #nav-toggle {
    	height: 64px;
    }
}