/**** COULEURS ****

bleu : #235
dore : #b49052
rouge fonce: #D53750

*/


/*** HTML ***/
body {margin:0; padding:0; background-color:#f4f4f4; font-family:"Noto Sans", sans-serif; font-size:100%; color:#332;}
a {color:#235; text-decoration:none;}
	a:hover {color:#457;}
	a:active {color:#06b;}
blockquote {max-width:500px; padding:1em; font-style:italic; font-size:120%; line-height:1.2em;}
	blockquote::before {content:"\00AB\00a0"; font-size:200%; font-weight:bold; line-height:0;}
	blockquote::after {content:"\00a0\00BB";font-size:200%; font-weight:bold; line-height:0;}
header,footer, main, section, div {position:relative; box-sizing:border-box;}
img {max-width:100%;}
h1, h2 {margin:0; font-family:"Noto Sans", sans-serif; font-weight:900;}
h1 {font-size:300%;}
h2 {font-size:180%;}
sup {font-size:80%;}
table {border-collapse:collapse; border-spacing:0;}
ul {margin:0;}

/*** STRUCTURE GENERALE ***/
main {z-index:1; width:100%; min-height:600px; margin:0 auto; box-sizing:inherit;}
section {padding:4em 0; background-color:#fff;}
.container {max-width:1290px; margin:auto;}

/*** MISE EN FORME ***
**********************/

.content {}
.button {margin:0 1em; padding:.5em 1.5em; background-color:#bbb; border:none; color:#fff; text-transform:uppercase; font-weight:normal; text-align:center; white-space:nowrap;}
	.button:hover {background-color:#235; color:#fff;}
	.button:active {background-color:#F34;}

.center {vertical-align:middle; text-align:center; display:block;}
.price, .number, .currency {text-align:right; white-space:nowrap;}
.mandatory {color:#235}
.mandatoryInfo {font-style:italic;}
.error {color:#f03;}
div.error {background-color:#f03; color:#fff; padding:1em;}
	div.error .button {background-color:#eee; color:#f03;}
	div.error .button:hover {background-color:#fff;}
.linkFollow {font-style:italic; text-align:right;}
	.linkFollow::after {content:"\203A"; margin-left:.3em; font-weight:bold;}
.linkBack {font-family:Kiro, serif; font-style:italic; text-align:left;}
	.linkBack::before {content:"\2039"; margin-right:.3em; font-weight:bold;}

/*** Header ***/
header {position:sticky; top:0; z-index:100; background-color:#fff; border-bottom:1px solid #eee; box-shadow: 0 0.1em 0.3em #444;}
.header-main {display:flex; justify-content:space-between; align-items:center; max-width:1400px; margin:0 auto; padding:1em;}
	.header-main a {color:#000;}
	.header-main a:hover {color:#235;}
	.header-logo {width:200px;}
	.header-logo img {width:100%;}
	.header-nav {display:flex; justify-content:center; align-items:center; margin:0 3em; padding:0;}
		.header-nav-item {flex:1; list-style:none; margin:0 .5em; text-align:center; text-transform:uppercase;}
		.header-nav-item a {display:block; padding:1em; border:1px solid #fff; border-radius:.5em; }
		.header-nav-item a:hover {box-shadow:0 0 .3em #cce;}

/* Hamburger button */
.nav-toggle {
    display: none;
    background: none;
    border: none;
    cursor: pointer;
    flex-direction: column;
    gap: 5px;
}

.nav-toggle span {
    width: 25px;
    height: 3px;
    background: #333;
    transition: 0.3s;
}

/* Mobile */
@media (max-width: 768px) {

    .nav-toggle {
        display: flex;
    }

    .header-nav {
        position: absolute;
        top: 60px;
        right: 0;
        width: 100%;
        background: white;
        flex-direction: column;
        align-items: center;
        gap: 1.5rem;
        padding: 2rem 0;
        display: none;
    }

    .header-nav.active {
        display: flex;
    }
}

	.header-contact {display:flex; flex-wrap:wrap;}
		.header-phone-symbol {width:1em;}
	.header-contact a.button {margin-right:0; border-radius:.5em; background-color:#000; color:#fff;}
	.header-contact a.button:hover {background-color:#235;}

		
/*** FOOTER ***/
footer {padding:1em; background-color:#235;}
.footer-main {max-width:1290px; margin:auto; display:flex; justify-content:space-between;}
.footer-logo {width:150px;}

/*** MAIN ***/	

main img {max-width:100%;}
main h2 {text-align:center; padding-bottom:1em;}
main h3 {margin-bottom:.5em;}

.pageTitle {margin:1em; text-align:center;}
	.pageTitle h1 {margin:0;}
	.pageTitle h2 {margin:0; font-weight:normal;}

.banner {z-index:100; width:100%; height:600px; background-color:#235;}
	.banner .container {display:flex; flex-direction:column; justify-content:flex-end; height:100%; text-shadow:-1px 1px 2px #333, 1px -1px 2px #333;}
	.banner-title {margin:0; line-height:1em; color:#fff; text-transform:uppercase;}
		.banner-subtitle {max-width:900px; margin:0 0 1em 0; color:#fff; font-weight:normal; font-style:italic;}

.subtitle {text-align:center;}	
.chapo {max-width:800px; margin-left:4em; font-size:140%; font-style:italic;}

/*** HOME ***/
#home {padding:0;}
.home-banner {background:url('/images/fournier-voyages-banner-home.jpg') no-repeat; background-position:center center; background-size:cover;}
	.home-banner .container {justify-content:flex-start; align-items:center; text-shadow:-1px 1px 2px #fff, 1px -1px 2px #fff;}
	.home-banner .banner-title {margin-top:1em; color:#235;}
	.home-banner .banner-subtitle {color:#235;}

.browseCatalogue {width:100%; height:800px; border-radius:1em; box-shadow:0 0 .5em #ddd;}

#catalogue {background-color:#f8f8f8;}

.agences {display:flex; flex-wrap:wrap; justify-content:space-between;}
	.agence {width:47%; border-radius:1em; box-shadow:0 0 .5em #ccc; overflow:hidden;}
		.agence-img {width:100%;} 
		.agence-desc {padding:2em;} 
		.agence-desc h3 {margin-top:0; font-size:200%; line-height:1;} 
		.agence-desc h3 small {font-size:60%; font-weight:normal; text-transform:uppercase;} 
	.timetable {border-radius:.5em;}
		.timetable th, .timetable td {padding:.5em 1em;}
		.timetable tr:nth-child(odd) {background-color:#f8f8f8;}
		.timetable tr:nth-child(even) {background-color:#eee;}
		.timetable th {text-align:right;}
		.timetable td {text-align:center;}
	
/*** MEDIA QUERIES ***/

@media screen and (max-width:1300px) {
	.container {margin:0 1em;}
	
}@media screen and (max-width:1050px) {
	.header-contact {flex-direction:column;}
	.header-contact .button {margin:.5em 0 0 0;}
}

@media screen and (max-width:768px) {
	body {margin:0;}
	h1 {font-size:200%;}
	h2 {font-size:150%;}	
	h3 {font-size:110%;}	
	.agences {flex-direction:column;}
	.agence {width:100%; margin-bottom:3em;}
	.footer {padding-right:2%; padding-left:2%;}
	.container {padding:0 2%;}
}

@media screen and (max-width:450px) {
	.header-contact {display:flex; justify-content: space-between; width:98%; margin:0;}
	.header-contact-button .mob-hidden, .header-contact label {display:none;}
	header, footer {padding-left:1em; padding-right:1em;}

}