/*

Theme Name: Studios Nuée Bleue v2
Description: Thème du site studios-nuee-bleue.fr
Version: 2.0

*/


/* ----- Imports ----- */

@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:wght@100;400;700&family=Inter:ital,wght@0,100..900;1,100..900&display=swap');

/* ----- CSS RESET ----- */
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary,time, mark, audio, video {margin: 0; padding: 0; border: 0; font-size: 100%; font: inherit; vertical-align: baseline;}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {display: block;}
body {line-height: 1;}
ol, ul {list-style: none;}
blockquote, q {quotes: none;}
blockquote:before, blockquote:after,q:before, q:after {content: ''; content: none;}
table {border-collapse: collapse; border-spacing: 0;}


/* ----- Structure ----- */



aside.breadcrumbs {width:100%; background-color: #266987; padding:10px 0; box-sizing: border-box;}

.wcontainer {width:100%; padding:50px 0px 50px 0px; box-sizing: border-box;}
.ncontainer {max-width:1100px; margin:auto; position: relative; /*overflow: hidden;*/}
.flex {display: flex; justify-content: space-between; align-items: stretch;}
.content550{width:550px; }
.sidebar{width:250px; margin-left:100px;}

.wcontainer.h1 {width:100%; height: 450px; margin-top:60px; padding:50px 0px 50px 0px; box-sizing: border-box; position:relative;}
.wcontainer.h1 > .ncontainer {height:250px; box-sizing: border-box;}

.headerimg {width:100%; height:100%; position: absolute; top:0; left: 0; object-fit: cover;}
.headershadow {width:100%; height:100%; position: absolute; top:0; left: 0; background: #268887; background: linear-gradient(160deg,rgba(38, 128, 135, 1) 0%, rgba(38, 104, 135, 1) 60%);}

.wcontainer.wcborder {border-top:1px solid #ddd;}
.wcontainer.wcnomargin {padding: 0;}
.wcontainer.wcbgDDD {background-color: #DDD;}

.wcontainer.contpart img {max-width: 10%;  height: auto; display:inline-block; margin-right: 10px;}

/* ----- Fonts ----- */
html, p { font-family: "Inter", sans-serif; font-optical-sizing: auto; font-weight: 400; color:#000; font-size:15px; margin: 0 0 20px; line-height: 1.20; text-align: left;}
h1 {  font-family: "Inter", monospace; font-optical-sizing: auto; font-weight: 700; color: #266987; font-size: 28px; margin:0px 0 50px; text-transform: uppercase; text-align: left;}
h1 span {display:block; font-size: 18px; font-weight: 100;}
h2 {  font-family: "Inter", sans-serif; font-optical-sizing: auto; font-weight: 700; color: #000; font-size: 20px; margin:70px 0 40px; text-transform: uppercase;}
/*h2:after { background: none repeat scroll 0 0 #266987; bottom: -10px; content: ""; display: block; height: 1px; position: relative; width: 100px;}*/
h3 {  font-family: "Inter", serif; font-optical-sizing: auto; font-weight: 700; color: #266987; font-size: 15px; margin:40px 0 10px;}
strong {font-weight:inherit;}

span.hid {display: none;}
span.role {text-transform: uppercase; color:#7d9cbc; font-size:12px; font-weight: 800;}
aside.breadcrumbs {text-transform: uppercase; color:#FFF; font-size:12px; font-weight: 800;}

/*a {color:inherit; text-decoration: none; position:relative; display: inline;}*/


a {color: inherit; cursor: pointer; text-decoration: none; display: inline; transition: all 0.2s linear;}

a:hover {color:#255987; text-decoration: underline;}

div.topics {margin-bottom: 30px; color:#DDD; text-transform: uppercase; font-size: 12px; font-weight: bold; text-align: left;}
div.topics a {color: inherit; cursor: pointer; text-decoration: none; display: inline-block; transition: all 0.35s linear; background-image: none; background-color: #FFF; padding: 5px 15px; border: 1px solid #ddd; border-radius: 30px; margin:0 10px 10px 0;}
div.topics a:hover {color:#266987; border: 1px solid #266987; }

a.breadcrumbs {color: inherit; cursor: pointer; text-decoration: none; display: inline-block; transition: all 0.35s linear; background-image: none; background-color: #FFF; padding: 10px 15px; border-left: 1px solid #ddd; margin:0;}
a.breadcrumbs:first-of-type {border: none; padding-left:0;}


ul.benefits {list-style-position: inside; list-style-type: disc; font-weight: bold; color:#390;}
ul.benefits li {margin-bottom: 10px;}

/* ----- Nav -----*/

nav { position: fixed; top:0; left:0; background-color: #FFF; width:100%; height:60px; /*border-bottom: 1px solid #FFF;*/ transition: all 0.5s;}
/*nav {width:100px; height:100%; background-color:#266987; padding:20px; box-sizing: border-box; position:fixed; top:0; left:0; transition: all 1s;}*/

nav img.logo {width:200px; height:auto; margin:auto; }
/*nav .logo {font-family: "Inter", sans-serif; padding: 0; height:40px; width:100px;margin:0 auto;}*/
/*nav .logoc {opacity:0; display:none;}
nav .logow {opacity:1; display:block;}
nav.scrolled .logoc { opacity:1; display:block; }
nav.scrolled .logow { opacity:0; display:none;}*/
nav ul { position:absolute; top:0; right:0; color:#FFF;font-size:18px; width:600px; diplay:flex; justify-content: right;}
nav ul li {margin: 0px 0px;margin-left: 30px; line-height: 60px; display: inline-block;}
nav ul li:hover {border-bottom: 5px solid #FFF; line-height: 55px;}
nav a, nav a:hover {text-decoration: none; background-image: none;}


nav.scrolled {background-color: #FFF; border-bottom: 0px; box-shadow: rgba(255, 255, 255, 0.2) 0px 1px 1px 0px inset, rgba(50, 50, 93, 0.35) 0px 50px 100px -20px, rgba(0, 0, 0, 0.5) 0px 30px 60px -30px;}
nav.scrolled ul {color:#000;}
nav.scrolled ul li:hover {border-bottom: 5px solid #266987;}

/* ----- Prefooter + Footer  -----*/

.topics {border-bottom:1px solid #EEE;}
.topics div {padding:50px 0;}
.topics h2 {display:none;}
.topics a {padding:10px 15px; box-sizing: border-box; border:1px solid #CCC; font-size: 12px; border-radius: 20px; margin: 10px 5px 0px 0; display:inline-block; color:#999; text-decoration: none;}
.topics a:hover {border:1px solid #266987; color:#266987; text-decoration: none;}


footer {width:100%; background-color: #FFF; padding:50px 0; box-sizing: border-box;}
footer div div {width:20%;}
footer img {width: 100%;}
footer h2 {display:none;}
footer a span {display:none;}
footer ul li {margin: 5px 0;}
footer h3 {margin-top: 12px;}


/* ----- CTA -----*/

aside.cta {width:100%; padding:80px 0; box-sizing: border-box;  background: linear-gradient(160deg,rgba(38, 128, 135, 1) 0%, rgba(38, 104, 135, 1) 60%); text-align: center;}
aside.cta h2 {color:#FFF; margin:0px 0 40px;}
aside.cta h2:after { background: none; bottom: -10px; content: ""; display: block; height: 3px; position: relative; width: 100px;}
form.booking {width:100%; box-sizing: border-box;  background-color:rgba(255,255,255); border-radius: 20px;}
form.booking div {display: flex; display: 100%; justify-content: space-between; color:#F90; padding: 15px;}
form.booking div:nth-of-type(2) {position: relative; top:-25px; padding-bottom: -25px;}
form.booking input {background-color: #FFF; border:1px solid #CCC; font-size: 21px; padding: 10px; appearance: none; box-sizing: border-box;}
form.booking select {appearance: none; font-size: 21px;padding: 10px; border: 1px solid #caced1;color: #000;cursor: pointer;}
form.booking.desktop input:first-child {border-radius: 15px 0 0 15px;}
form.booking.desktop input:last-child {border-radius: 0px 15px 15px 0px;}
form.booking input[type=button] {border:1px solid #FFF;}
form.booking input.btn_booking {background-color: #003b95;color:#FFF;}
form.booking input.btn_hotels {background-color: #EF3346; color:#FFF;}
form.booking input.btn_expedia {background-color: #fddb32;color:#000;}

form .angle1 {border-radius: 15px 0 0 0;}
form .angle2 {border-radius: 0 15px 0 0;}
form .angle4 {border-radius: 0 0 15px 0;}
form .angle3 {border-radius: 0 0 0 15px;}

form.mobile input, form.mobile select {width:33%;}
form.desktop input, form.desktop select {width:16%;}

form.mobile {display:none;}
form.desktop.topform {position:absolute; z-index: 1000; bottom:-170px;}
form.mobile.topform {position:absolute; z-index: 1000; bottom:-200px;}


/* ----- Review -----*/

.review {width:100%; padding:80px 0; box-sizing: border-box; border-top:1px solid #EEE; text-align: center;}
.review h2 {color:#000; margin:0px 0 40px;}
.review .flex {flex-wrap: wrap; flex-direction: column;}
.review .flex div {border:1px solid #266987; padding:10px 25px 10px; margin-bottom:30px; background-color: #FFF; border-radius: 30px; text-align: left; width:100%; height:auto; box-sizing: border-box; align-self: top;}
.review .flex div p {margin-top: 20px; text-align: left;}
.review p {margin-top: 50px; text-align: center;}

/* ----- Features -----*/
.flex.features {flex-wrap: wrap;}
.features div {width:30%; margin-bottom: 20px; vertical-align: middle;}
.features div img {height:60px; width:60px; float:left; margin-right:20px;}

/* ----- Moments -----*/
.flex.moments {flex-wrap: wrap;}
.moments div {width:22%; margin-bottom: 20px; vertical-align: middle;}
.moments div img {height:80px; width:80px;}

/* ----- subpages -----*/
.flex.subpages {flex-wrap: wrap;}
.subpages div {width:30%; margin-bottom: 20px; vertical-align: middle;}
.subpages div img {height:100px; width:100%; object-fit: cover;}
.subpages div p {font-family: "Inter", sans-serif; font-optical-sizing: auto; font-weight: 700; color: #000; font-size: 21px; margin:10px 0 40px; text-transform: uppercase;}

/* ----- Accordion -----*/
.faq h2 {margin-top:0;}
.accordion {background-color:#FFF; color: #000; cursor: pointer; padding: 20px 0px 20px 40px; box-sizing: border-box; width: 100%; text-align: left; border: none; outline: none; transition: 0.4s; position: relative;}
.accordion h3 { font-family: "Inter", sans-serif; font-optical-sizing: auto; font-weight: 400; color: #000; font-size: 18px; margin:0;}
.accordion h3:before {content: "↓"; position: absolute; top:20; left:0; font-weight: 800; color:#000;}
.accordion:hover { background-color: #f3f1eb;}
.accordion.active:hover { background-color: #FFF;}
.accordion.active h3 {color:#266987;}
.panel {padding: 0px 0px; border-bottom: 1px solid #EEE; height: 0px; box-sizing: border-box; overflow: hidden; transition: all 0.4s ease-out; margin: 0; line-height: 1.25;}
.active + .panel {height: auto; overflow: hidden; padding: 20px 0px;}


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


	.wcontainer, .wcontainer.h1 {padding:50px 20px 50px 20px;}
	nav {padding:0;}

	aside .ncontainer {padding:0 20px; width:100%; box-sizing: border-box;}
	form.mobile {display:block;}
	form.desktop {display:none;}

	.ncontainer {box-sizing: border-box; margin: 0 0px;}
	.flex {width:100%;} 
	.content550{width:100%;}
	.sidebar{width:100%; margin-left:0;}
	html, p {text-align: left;}

	footer {padding:50px 20px;}
	
	aside.prefooter {padding:50px 20px;}
	aside.breadcrumbs {padding:10px 20px;}

	.review div {width:100%; margin-bottom: 50px;}
	.moments div {width:30%; margin-bottom: 20px; vertical-align: middle;}
	.features div {width:50%; margin-bottom: 20px; vertical-align: middle;}
	.subpages div {width:100%; margin-bottom: 0px;}
	

	.tuilecontainer {margin:0 -20px;}
	.tuile {width:300px;}
	.tuilecontainer div:first-of-type, .tuileconta