@font-face {
  font-family: 'Dyslexic';
  font-style: normal;
  font-weight: 400;
  src: url(/css/fonts/OpenDyslexic-Regular.otf) format('truetype');
}
@font-face {
  font-family: 'Dyslexic';
  font-style: bold;
  font-weight: 700;
  src: url(/css/fonts/OpenDyslexic-Bold.otf) format('truetype');
}

body { margin:0; padding:0; font-family:Nunito, sans-serif; font-size:1em; color:#474747; font-weight:300 }
body.dyslexic * { font-family:Dyslexic !important; }
body.contrast, body.contrast *, body.contrast *:after { background:#000080 !important; color:#FF0 !important; border-color:#FF0 !important; }

* { box-sizing:border-box }

a { outline:none }

h1 { margin-top:0; font-size:2rem; font-family:Viga; font-weight:normal; letter-spacing:-0.02em }
h2 { margin:0; font-size:1.2rem; font-family:Viga; font-weight:normal; }
h3 { margin:0 0 20px; font-size:1.6rem; font-family:Viga; font-weight:normal; }
h4 { margin:0 0 20px; font-size:1.2rem; }
h5 { margin:20px 0 5px; font-size:1em; text-transform:uppercase }

.hidden { position:absolute; top:-99999px; }

#top { position:fixed; top:-30px; width:100%; height:30px; line-height:30px; font-size:0.8em; color:#fff; background:#333; z-index: 99999; transition:top ease 0.25s; display:block; }
#top.opened { top:0px; }
#top .content { padding:0 20px 0 50px; }
#top a { color:inherit; text-decoration:none; }
#top a:hover, #top a:focus { text-decoration:underline; }
#top ul { margin:0; padding:0; }
#top ul li { display:inline-block; }
#top ul li:before { content:'|'; margin:0 5px; }
#top ul li:first-child:before, #top nav:first-child ul li:nth-child(2):before { content:''; margin:0; }
#top #accessibility { float:left; }
#top #quicklinks { float:right }

.app-header { width:100%; height:140px; padding:0; border-bottom:1px solid #e6e6e6; background:#fff; position:fixed; top:0; z-index:999; box-shadow:0 0 5px rgba(0,0,0,0.05) }

.app-header .logo-cos { width:310px; height:140px; float:left; text-align:center; border-right:1px solid #e6e6e6; transition:filter 0.5s ease; }
.app-header .logo-cos a { width:310px; height:140px; display:block; }
.app-header .logo-cos a:focus { outline:initial; }
.app-header .logo-cos a:hover img, .app-header .logo-cos a:focus img { filter:grayscale(100%) }
.app-header .logo-cos img { height:120px; margin-top:10px; }

.app-header #nav-search-wrapper { width:calc(100% - 510px); height:140px; float:left; }

.app-header .logo-up { width:200px; height:140px; float:right; text-align:center; border-left:1px solid #e6e6e6; filter:grayscale(0%); transition:filter 0.5s ease; }
.app-header .logo-up a { width:200px; height:140px; display:block; }
.app-header .logo-up a:focus { outline:initial; }
.app-header .logo-up a:hover img, .app-header .logo-up a:focus img { filter:grayscale(100%) }
.app-header .logo-up img { height:80px; margin-top:25px; }

.app-header .app-nav { width:750px; float:left; }
.app-header .app-nav ul { height:70px; list-style:none; margin:0; padding:0 20px; }
.app-header .app-nav ul li { height:70px; display:inline-block; }
.app-header .app-nav ul li a { height:70px; line-height:70px; padding:0 10px; text-decoration:none; text-transform:uppercase; color:#474747; font-size:0.9rem; font-family:Viga; }
.app-header .app-nav ul li a:hover, .app-header .app-nav ul li a:focus { color:#3db8b8; }

.app-search { width:100%; padding:0 20px; height:70px; line-height:70px; background:#f9f9f9; z-index:999; border-top:1px solid #e6e6e6; border-bottom:1px solid #e6e6e6; float:left; }
.app-search a.button { width:auto; height:44px; line-height:44px; background:#3db8b8; color:#fff; border-radius:5px; padding:0 20px; text-align:center; margin-top:10px; display:none; text-decoration:none }
.app-search .app-search-submit { display:inline-block; }
.app-search a.button.submit { margin-left:10px; display:inline-block; }
.app-search #main-search-wrapper { display:block; }
.app-search #main-search-wrapper h2 { display:none; }
.app-search #main-search-wrapper a.search-close { display:none }

.app-search .app-search-keywords { float:left; }
.app-search .app-search-keywords input { width:300px; height:44px; line-height:44px; padding:0 20px; margin:0; border:1px solid #3db8b8; font-family:Nunito, sans-serif; font-size:1em; border-radius:5px; }
.app-search .app-search-keywords input::placeholder { color:#3db8b8; }
.app-search .app-search-keywords input:hover, .app-search .app-search-keywords input:focus { border:1px solid #3db8b8; outline:none }
.app-search .app-search-filters { float:left; list-style:none; margin:0; padding:0; margin-left:20px; }
.app-search .app-search-filters > li { display:inline-block; }
.app-search .app-search-filters > li:first-child { font-weight:bold; }
.app-search .app-search-filters > li a { padding:10px; margin-left:2px; border:1px solid #3db8b8; color:#3db8b8; background:#fff; text-decoration:none; border-radius:5px; }
.app-search .app-search-filters > li a:hover, .app-search .app-search-filters > li a:focus { border:1px solid #474747; color:#474747  }
.app-search .app-search-filters > li.active > a, .app-search .app-search-filters > li.selected > a { border:1px solid #3db8b8; background:#3db8b8; color:#fff }
.app-search .app-search-filters > li ul { width:250px; display:none; background:#f9f9f9; position:absolute; border:1px solid #e6e6e6; margin:0; list-style:none; padding:10px; top:139px; margin-left:2px; }
.app-search .app-search-filters > li.active ul { display:block; }
.app-search .app-search-filters li.close { display:none !important }
.app-search .app-search-filters > li ul li { display:block; }
.app-search .app-search-filters > li ul li a { width:100%; height:auto; padding:0 10px; display:inline-block; margin:0 0 5px; float:left; line-height:40px; border:1px solid #fff }
.app-search .app-search-filters > li ul li a:hover, .app-search .app-search-filters > li ul li a:focus { border:1px solid #3db8b8; color:#3db8b8; }
.app-search .app-search-filters > li ul li a.selected { background:#3db8b8; border:1px solid #3db8b8; color:#fff }
.app-search .app-search-filters > li ul li a.selected:before { width:10px; height:20px; font-size:0.9rem; text-align:center; content:'\f00c'; font-family:FontAwesome; color:#fff; margin-right:10px; display:inline-block }
.app-search .app-search-filters > li ul li a.selected:hover:before { width:10px; height:20px; font-size:0.9rem; text-align:center; content:'\f00d'; margin-right:10px; }
.app-search .app-search-filters > li#facilities-filter ul { width:505px; }
.app-search .app-search-filters > li#facilities-filter ul li { width:235px; display:inline; }
.app-search .app-search-filters > li#facilities-filter ul li a { width:235px; display:inline-block; float:left; margin-right:10px; }
.app-search .app-search-filters > li#facilities-filter ul li:nth-child(2n) a { margin-right:0px; }
.app-search .app-search-filters > li#openinghours-filter ul { width:320px; }
.app-search .app-search-submit a { border:1px solid #3db8b8; color:#fff; background:#3db8b8; display:block }
.app-search .app-search-submit a:hover, .app-search .app-search-submit a:focus { background:#474747; border:1px solid #474747; color:#fff }

.app-content { padding:20px 50px; margin-top:140px; }
.app-content .spaces-list { width:100%; list-style:none; margin:0; padding:0; float:left }
.app-content .spaces-list a { color:#474747; float:left; margin:0 20px 20px 0; }
.app-content .spaces-list a:hover, .app-content .spaces-list a:focus { color:#3db8b8; }
.app-content .spaces-list .space { width:100%; display:inline-block; }
.app-content .spaces-list .space .thumb { width:100%; height:calc(((40vw - 50px) / 3) - 20px); background-position:center; background-repeat:no-repeat; background-size:cover; transition:all ease 0.2s; box-shadow:inset 0 0 5px rgba(0,0,0,0.1) }
.app-content .spaces-list .space:hover .thumb, .app-content .spaces-list a:focus .space .thumb { box-shadow:inset 0 0 10px rgba(0,0,0,0.3) }
.app-content .spaces-list .space .category { margin:0; text-transform:uppercase; font-size:0.8em; }
.app-content .spaces-list .space header { margin-top:10px; height:70px; max-height:70px; overflow:hidden; }
.app-content .map { width:40vw; height:calc(100vh - 140px); border-left:1px solid #e6e6e6; position:fixed !important; right:0; bottom:0; background:#ccc; z-index:0; }

.page-content { overflow:auto; padding-bottom:200px; }
.page-content#home-content { padding-right:40vw; }
.page-content .app-intro { margin:0 0 50px 0; }

.page-content .page-header { width:100%; height:300px; padding:0; background:#e6e6e6; position:absolute; top:140px; left:0; text-align:left; background-repeat:no-repeat; background-position:center; background-size:cover; }
.page-content .page-header:before { content:''; width:100%; height:300px; padding:0; background:#000; position:absolute; top:0px; left:0; opacity:0.4; z-index:0 }
.page-content .page-header .content { width:1080px; height:300px; margin:auto; display:flex; flex-direction:column; justify-content:center; position:relative; z-index:1; color:#fff }
.page-content .page-header .category { margin:0; text-transform:uppercase; font-size:0.9em; margin-bottom:10px }
.page-content .page-header h1 { width:710px; font-size:3rem; margin:0; text-shadow:0 0 20px rgba(0,0,0,0.8); line-height:3rem }

.space-content { width:1080px; margin:280px auto 0; padding:50px 0; }
.space-content .col-left { width:710px; float:left; }

.space-content .col-left > nav { width:710px; padding:20px 0; margin-top:-20px; margin-bottom:20px; border-bottom:1px solid #e6e6e6; position:absolute; background:#fff; z-index:999 }
.space-content .col-left > nav.fixed { position:fixed; top:140px;  margin-top:0px; }
.space-content .col-left > nav ul { margin:0; padding:0; list-style:none; }
.space-content .col-left > nav ul li { display:inline }
.space-content .col-left > nav ul li a { font-weight:bold; color:#474747; text-decoration:none; padding:10px; }
.space-content .col-left > nav ul li a.active { color:#3db8b8 !important; }
.space-content .col-left > nav ul li a:hover { color:#3db8b8; }
.space-content .col-left > nav ul li a:focus { color:#999; }

.space-content .col-left .content { margin-top:50px; padding-right:50px; }
.space-content .col-left .content section { padding:10px 0 }
.space-content .col-left .content section p { text-align:justify }

.space-content .col-left .content .facilities-list { margin:0; padding:0; list-style:none; }
.space-content .col-left .content .facilities-list > li {  background:#fcfcfc; }
.space-content .col-left .content .facilities-list > li { display:block; padding:20px; border:1px solid #e6e6e6; border-radius:5px; margin-bottom:5px; }
.space-content .col-left .content .facilities-list > li a { display:block; color:#474747; text-decoration:none }
.space-content .col-left .content .facilities-list > li a:hover, .space-content .col-left .content .facilities-list > li a:focus { color:#3db8b8 }
.space-content .col-left .content .facilities-list .detail { display:none; margin-top:20px; }
.space-content .col-left .content .facilities-list li a:before { width:30px; text-align:center; font-family:FontAwesome; margin-right:20px; display:inline-block }
.space-content .col-left .content .facilities-list li#facility-10 a:before { content:'\f130'; }
.space-content .col-left .content .facilities-list li#facility-15 a:before { content:'\f108'; }
.space-content .col-left .content .facilities-list li#facility-16 a:before { content:'\f02f'; }
.space-content .col-left .content .facilities-list li#facility-17 a:before { content:'\f03d'; }
.space-content .col-left .content .facilities-list li#facility-18 a:before { content:'\f25a'; }
.space-content .col-left .content .facilities-list li#facility-19 a:before { content:'\f0c3'; }
.space-content .col-left .content .facilities-list li#facility-20 a:before { content:'\f1b3'; }
.space-content .col-left .content .facilities-list li#facility-21 a:before { content:'\f236'; }
.space-content .col-left .content .facilities-list li#facility-22 a:before { content:'\f023'; }
.space-content .col-left .content .facilities-list li#facility-23 a:before { content:'\f193'; }
.space-content .col-left .content .facilities-list li#facility-24 a:before { content:'\f02d'; }
.space-content .col-left .content .facilities-list li#facility-25 a:before { content:'\f1c2'; }
.space-content .col-left .content .facilities-list li#facility-26 a:before { content:'\f0f4'; }
.space-content .col-left .content .facilities-list li#facility-27 a:before { content:'\f11b'; }

.space-content .col-left .content .pics { margin:0; padding:0; }
.space-content .col-left .content .pics li { display:inline-block; width:114px; height:114px; background-repeat:no-repeat; background-position:center; background-size:cover; margin:2px; position:relative; z-index:9; box-shadow:0 0 5px rgba(0,0,0,0.1) }
.space-content .col-left .content .pics li:hover { filter:grayscale(100%); cursor:pointer }
.space-content .col-left .content .pics li a { width:114px; height:114px; display:block; text-decoration:none }

.space-content .col-right { width:370px; float:right; }
.space-content .col-right .space-logo { width:370px; height:230px; padding:40px 0; position:absolute; top:160px; text-align:center; }
.space-content .col-right .space-logo img { max-height:160px; }
.space-content .col-right .card { width:370px; height:auto; background:#fcfcfc; border:1px solid #e6e6e6; position:absolute; top:400px; box-shadow:5px 5px 0 rgba(0,0,0,0.1); border-radius:5px; font-size:0.9rem }
.space-content .col-right .card.fixed { position:fixed; top:180px }
.space-content .col-right .card #map { width:calc(100% + 2px); height:221px; border-bottom:1px solid #e6e6e6; margin-top:-1px; margin-left:-1px; }
.space-content .col-right .card .content { padding:20px 30px 20px; min-height:200px; max-height: calc(100vh - 450px); overflow-y:auto }
.space-content .col-right .card .content p { margin:0; }

.map-marker, .map-close { display:none }

.app-footer { clear:both; padding:5px 20px; background:#f9f9f9; position:relative; height:70px; bottom:0; width:100%; font-size:0.8em }
.app-footer nav ul { padding:0; margin:0; list-style:none; float:right }
.app-footer nav ul li { display:inline-block }
.app-footer nav ul li:after { content:" - "; }
.app-footer nav ul li:last-child:after { content:""; }
.app-footer nav ul li a { color:#3db8b8; text-decoration:none }

.app-footer .app-footer-logos ul { margin:0; padding:0; list-style:none; display:inline; }
.app-footer .app-footer-logos ul li { display:inline; }
.app-footer .app-footer-logos ul li a { display:inline-block; margin:10px 20px; }

p.cooptierslieux { border:1px solid #e6e6e6; background:#f9f9f9; padding:20px; float:left }
p.cooptierslieux a { color:#3db8b8; }

@media( max-width:1500px ) and (min-width:961px) {
	
	.app-search a.show-search-form { display:none; }
	.app-search a.show-filters { display:inline-block; margin-left:10px; background:#fff; border:1px solid #3db8b8; color:#3db8b8; }
	.app-search a.show-filters:hover, .app-search a.show-filters:focus { background:#474747; border:1px solid #474747; color:#fff; }
	.app-search a.show-filters.active { background:#3db8b8; color:#fff; border:1px solid #3db8b8; box-shadow:inset 0 0 5px rgba(0,0,0,0.2) }
	.app-search .app-search-filters { width:calc(100% - 309px); height:70px; background:#f9f9f9; position:absolute; left:309px; margin-top:-1px; margin-left:0; padding-left:20px; border-bottom:1px solid #e6e6e6; border-left:1px solid #e6e6e6; box-shadow:0 0 5px rgba(0,0,0,0.05); display:none }
	.app-search .app-search-filters.opened { display:block }
	.app-search .app-search-filters > li ul { top:69px; }
	
}

@media( max-width:1220px ) {
	
	.app-header .logo-cos, .app-header .logo-cos a { width:200px }
	.app-header .logo-cos img { height:100px; margin-top:15px; }
	.app-header .logo-up, .app-header .logo-up a { width:120px }
	.app-header .logo-up img { height:60px; margin-top:35px }
	.app-header #nav-search-wrapper { width:calc(100% - 320px); }
	.app-search .app-search-filters { width:calc(100% - 199px); left:199px; }
	
}
@media( max-width:960px ) {
	
	#top { display:none; }
	#main-content-link { display:none }
	h1 { font-size:1.6rem }
	
	.app-header { height:80px; padding:0; position:absolute; }
	.app-header .logo-cos { width:50%; height:80px; float:left; text-align:center; border-right:1px solid #e6e6e6; }
	.app-header .logo-cos a { width:100%; height:80px; display:block; }
	.app-header .logo-cos a:focus { outline:initial; }
	.app-header .logo-cos img { height:60px; margin-top:10px; }

	.app-header #nav-search-wrapper { width:100%; height:140px; position: absolute; top: 80px; }

	.app-header .logo-up { width:50%; height:80px; float:right; text-align:center; border-left:none; }
	.app-header .logo-up a { width:100%; height:80px; display:block; }
	.app-header .logo-up a:focus { outline:initial; }
	.app-header .logo-up img { height:40px; margin-top:20px; }
	
	#home-content #map { top:0; left:0; width:100%; height:100vh; position:absolute; left:100vw; transition:left ease 0.5s; z-index:99 }
	#home-content #map.opened { left:0 }
	
	.app-content { padding:20px; }
	.app-content .spaces-list .space .thumb { height:calc((100vw / 1.7777) / 3); }
	.page-content#home-content { padding-top:0px; padding-right:0; padding-bottom:0 }
	
	#main-nav { visibility:hidden }
	
	.app-search { height:60px; line-height:60px; top:70px; border-top:none }
	.app-search #main-search-wrapper {width:100vw; height:100vh; padding:20px; background:#3db8b8; position:fixed; top:0; left:100vw; color:#fff; transition:left 0.5s ease; z-index: 1; }
	.app-search #main-search-wrapper a.search-close { position:absolute; right:20px; top:0; color:#fff; display:block }
	.app-search #main-search-wrapper.mobile-shown { left:0 }
	.app-search #main-search-wrapper h2 { display:block; }
	.app-search.fixed { position:fixed; top:0px; border-top:none }
	.app-search a.show-search-form { display:block; }
	.app-search a.show-filters { display:none; }
	.app-search .app-search-keywords { width:100%; margin-bottom:20px }
	.app-search .app-search-keywords input { width:100%; height:50px; border:1px solid #fff; background:transparent; color:#fff; }
	.app-search .app-search-keywords input:hover { border:1px solid #fff; }
	.app-search .app-search-keywords input:focus { border:1px solid #fff; }
	.app-search .app-search-keywords input::placeholder { color:#fff; }
	.app-search .app-search-keywords input:focus::placeholder { color:rgba(255,255,255,0.75); }
	.app-search .app-search-filters { width:100%; margin-left:0 }
	.app-search .app-search-filters li { width:100%; display:block; line-height:30px; float:left; margin-bottom:5px; position:relative; }
	.app-search .app-search-filters li a { width:100%; display:block; float:left; border:1px solid #fff; background:transparent; color:#fff; }
	.app-search .app-search-filters li a:hover { border:1px solid rgba(255,255,255,0.75); color:rgba(255,255,255,0.75); }
	.app-search .app-search-filters li.active a { border:1px solid #fff; background:#fff; color:#3db8b8; }
	.app-search .app-search-filters li.close { width:50px !important; text-align:center; float:right; position:relative; top:-50px; display:block !important; }
	.app-search .app-search-filters li.close a { width:50px !important; }
	.app-search .app-search-filters > li a:after { content:'\f105'; font-family:FontAwesome; float:right }
	.app-search a.button.submit { width:100%; margin-left:0 }
	.app-search .app-search-submit { width:100%; margin-top:20px }
	.app-search .app-search-submit a { background:#fff; color:#3db8b8; text-align:center }
	.app-search .app-search-submit a:after { content:''; }
	.app-search .app-search-filters li ul { width:80vw !important; height:100vh; padding:75px 20px; position:fixed; top:0px; left:100vw; z-index:1; transition:left ease 0.5s; display:block !important; overflow:auto }
	.app-search .app-search-filters li ul li a:after { content:''; }
	.app-search .app-search-filters li.active ul { left:20vw; }
	.app-search .app-search-filters > li.active > a, .app-search .app-search-filters > li.selected > a { border:1px solid #fff; background:#fff; color:#3db8b8 }
		
	.page-content#home-content { padding-top:140px; padding-right:0; padding-bottom:0 }
	.page-content#space { padding-top:30px; }
	
	.page-content .page-header { height:calc(100vw / 1.7777); top:130px; }
	.page-content .page-header:before { height:calc(100vw / 1.7777); }
	.page-content .page-header .content { width:100%; height:calc(100vw / 1.7777); padding:10px; text-align:center; }
	.page-content .page-header h1 { width:100%; font-size:1.6em; line-height:1.4em }
	
	#main-nav { display:none }
	
	#home-content #map { top:0; left:0; width:100%; height:100vh; position:absolute; left:100vw; transition:left ease 0.5s; z-index:99 }
	#home-content #map.opened { left:0 }
	
	.space-content { width:100%; margin: calc(100vw / 1.7777) auto 0; }
	.space-content .col-left { width:100% }
	.space-content .col-left > nav { display:none }
	.space-content .col-left .content { padding-right:0 }
	.space-content .col-right { width:100% }
	
	.space-content .col-right .card { position:relative; top:0; }
	.space-content .col-right .card .content { max-height:100% }
	.space-content .col-right .space-logo { width:100%; position:relative; top:0 }
	.space-content .col-right .card.fixed { width:100%; position:relative; top:0 }
	.space-content .col-right .card #map { width:100%; margin:0; }
	
	.map-marker { display:block; position:fixed; bottom:40px; right:20px; background:#fff; color:#474747; width:50px; height:50px; line-height:50px; text-align:center; border-radius:50px; box-shadow:0 0 5px rgba(0,0,0,0.1); font-size: 1.75em; border:1px solid rgba(0,0,0,0.1); }
	.map-close { display:block; position:fixed; bottom:40px; left:20px; background:#fff; color:#474747; width:50px; height:50px; line-height:50px; text-align:center; border-radius:50px; box-shadow:0 0 5px rgba(0,0,0,0.1); z-index:999; display:none; font-size: 1.75em; border:1px solid rgba(0,0,0,0.1); }

}

@media(min-width:751px) {
	
	.app-content { margin-top:140px; }
	.app-content .spaces-list a { width:calc(100% / 3 - 14px); }
	.app-content .spaces-list a:nth-child(3n) { margin-right:0px; }
	.app-content .spaces-list .space .thumb { height:calc(((40vw - 50px) / 3) - 20px); }
	
}

@media(min-width:750px) AND ( max-width:960px ) {
	#top { display:none; }
	#main-content-link { display:none }
	
	.app-content { margin-top:0px; }
	.app-content .spaces-list .space .thumb { height:calc(((100vw - 150px) / 3) / (3/2) ) }
	
}
@media(min-width:481px) AND ( max-width:750px ) {
	
	#top { display:none; }
	#main-content-link { display:none }
	.app-content { margin-top:0; }
	.app-content .spaces-list a { width:calc(100% / 2 - 14px); }
	.app-content .spaces-list a:nth-child(2n) { margin-right:0; }
	.app-content .spaces-list .space .thumb { height:calc(((100vw - 150px) / 2) / (3/2) ) }
	
}
@media(max-width:480px) {
	
	#top { display:none; }
	#main-content-link { display:none }
	.app-content { margin-top:0; }
	.app-content .spaces-list { width:100%; list-style:none; margin:0; padding:0; float:left }
	.app-content .spaces-list a { width:calc(100% / 3 - 14px); color:#474747; float:left; margin:0 20px 20px 0; }
	.app-content .spaces-list a:nth-child(3n) { margin-right:0; }
	.app-content .spaces-list a:hover, .app-content .spaces-list a:focus { color:#3db8b8; }
	
	.app-content { margin-top:0; }
	.app-content .spaces-list a { width:100%; }
	.app-content .spaces-list a:nth-child(2n) { margin-right:0 }
	.app-content .spaces-list a:nth-child(3n) { margin-right:20px }
	.app-content .spaces-list .space .thumb { height:calc((100vw - 20px) / 1.7777); }
	.app-content .spaces-list .space header { height:auto }
	
}