/* -- Styles MOBILEAN -- */

  /******  COULEURS  ******
  Bleu Mobilean : #4EB0AD */

* {box-sizing:border-box;}
body {margin:0; padding:0; background-color:#e8e8e8; font-family:"Roboto", sans-serif; color:#333;}
a {color:#008080; text-decoration:none;}
a:hover {color:#40c0c0;}
a:active {color:#000;}

h1 {margin-top:0; padding-top:1em; font-size:3em;}
img {max-width:100%;}

@media screen and (max-width:800px) {
	h1 {font-size:2em;}
}

/* Header */
header {position:sticky; top:0; z-index:1000;}
.header {background-color:#4EB0AD; color:#fff;}
	.header-wrapper {display:flex; justify-content:space-between; max-width:1200px; margin:auto; padding:1em 2em; }
	.header-main {display:flex; justify-content:space-between; align-items:center; width:100%; margin:auto;}
	.header a {color:#fff; text-decoration:none;}
	.header a:hover {text-decoration:underline;}
	.header-logo {width:250px;}
		.header-logo img {height:100%;}
		
	.nav-menu .nav1 ul {display:flex; margin:0; padding:0;}
	.nav-menu .nav1 li {list-style-type:none; text-transform:uppercase; margin:1em .5em; white-space:nowrap}
	.nav-menu a {padding:.2em 1em;}
	.burger {display:none;}
	
	.nav-menu .LinkSelected a {border-radius:1em; background-color:#fff; color:#4EB0AD;}
	
@media screen and (max-width:800px) {
	/* Menu mobile*/
	.header-wrapper {flex-direction:column; padding:.5em;}
	.burger {cursor:pointer; display:flex; justify-content:center; align-content:center; align-self:flex-end; background:0 0; border:0;}
		.burger-icon {display:flex; flex-shrink:0; width:2rem; height:2rem; background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg width='24' height='24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M3 18h18v-2H3v2zM3 8h18V6H3v2zm0 5h18v-2H3v2z' fill='white' fill-rule='evenodd'/%3E%3C/svg%3E"); background-position:center; background-size:contain; background-repeat:no-repeat;}
	.burger.active .burger-icon {background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg width='24' height='24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M10.657 12.071L5 6.414 6.414 5l5.657 5.657L17.728 5l1.414 1.414-5.657 5.657 5.657 5.657-1.414 1.414-5.657-5.657-5.657 5.657L5 17.728l5.657-5.657z' fill='white' fill-rule='evenodd'/%3E%3C/svg%3E");}
	nav {z-index:100; position:relative;}
	.menu-container {transition:left .2s cubic-bezier(.215,.61,.355,1); position:fixed; width:100vw; height:fit-content /*calc(100vh - 120px)*/; overflow-y:scroll; left:-100vw; margin-top:.5em; background-color:#f9f8f4;}
	.menu-container.active {display:flex; flex-direction:column; position:fixed; left:0; box-shadow:0 1em 1em -.5em #353430;}
		.menu-root {flex-direction:column; width:100%;}  
			.menu-root-item {border-bottom:1px solid #e5e4e0; padding:0;}
				.menu-root-item-label {position:relative; display:flex; justify-content:space-between; font-weight:bold; text-align:left;}
				.menu-root-item-link {display:block; padding:.5em;}
				.submenu-toggle {display:inline-block; width:3rem; background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg width='10' height='10' xmlns='http://www.w3.org/2000/svg' fill='%23656460'%3E%3Cpath d='M4 4V0h2v4h4v2H6v4H4V6H0V4h4z' fill-rule='evenodd'/%3E%3C/svg%3E"); background-repeat:no-repeat; background-position:center;}
				.menu-root-item.active .menu-root-item-label .submenu-toggle, .menu-sub-item.active .submenu-toggle {background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg width='10' height='2' xmlns='http://www.w3.org/2000/svg' fill='%23656460'%3E%3Cpath d='M0 0h10v2H0z' fill-rule='evenodd'/%3E%3C/svg%3E");}
				.dropdown-container {display:none; padding-top:0;}
				.menu-root-item.active .dropdown-container {display:block; position:relative; pointer-events:initial; transform:scaleY(1); visibility:visible; opacity:1; transform-origin:50% 0; transition:height .4s ease-in-out,transform .1s ease,opacity .2s ease-in-out; z-index:100; margin-top:0; box-shadow:none!important;}
					.dropdown-container .menu-sub {height:auto; margin:0; padding:0; transition:250ms;}
				.menu-sub-item {border-top:1px solid #bdb49f; border-bottom:0;}
					.menu-sub-item-label {display:flex; justify-content:space-between;}
					.menu-sub-item-link {width:100%;}
					.menu-sub-item-link::after {content:none;}

					.menu-sub-item:hover {background-color:#bdb49f; color:#fff;}
					.menu-sub-item:hover .menu-sub-item-link, .menu-sub-item-link:hover {color:#fff;}
					.menu-sub-item-content {display:none!important;}
					.menu-sub-item.active .menu-sub-item-content {display:flex!important; position:relative; top:auto; left:auto; width:100%; height:auto; padding:.5em!important;}
						.menu-sub-item-overview {display:none;}
						.menu-sub-item-nav {margin-left:0; padding-left:0; border-left:0;}
						.menu-sub-item-nav li {margin:0;}
						.menu-sub-item-nav h3 {display:none;}
					.menu-sub-item.active .nav3 {display:block; padding-bottom:.6em;}
						.nav3-name {margin:0;}
						.nav3 a {color:#fff;}
						.nav3-name a {color:#656460;}
						.nav4 {padding-top:.4em; padding-bottom:.4em; border-bottom: 1px solid #fff;}
							.nav4 a {color:#656460;}
							.nav4 a:active {background-color:#06b; color:#fff;}

	.menu-container a  {color:#193219;}
	.menu-container ul {display:flex; flex-direction:column;}
}

/* Main - styles génériques */
.wrapper-main {background-color:#f8f8f8;}
.main {max-width:1200px; margin:auto; padding:0 2em 2em 2em;}
.flex {display:flex; justify-content:space-between;}
.row {}
	.column {margin:1em;}
	.column:first-child {margin-left:0;}
	.column:last-child {margin-right:0;}
		.column img {max-width:100%;}
.radius {border-radius:1.5em;}
.shadow {box-shadow:0 1px 5px rgba(15, 41, 48, 0.1);}
.follow {font-style:italic; text-align:right;}
	.follow a::after {content:"\203A"; margin-left:.3em; font-weight:bold;}
.button {display:inline-block; padding:.6em 2em; background-color:#4EB0AD; color:#fff; border-radius:1.5em; }
.button:hover {background-color:#8Ef0dD; color:#fff;}

.white {padding:.2em 2em; background-color:#fff;}
.blue {padding:.2em 2em; background-color:#4EB0AD; color:#fff;}
	.blue a {color:#fff;}
	.blue .button {background-color:#fff; color:#4EB0AD;}
	.button:hover {background-color:#8Ef0dD;}

@media screen and (max-width:800px) {
	.main {padding:0 .5em .5em .5em;}
	.flex {flex-direction:column;}
	.column {margin:1em 0;}
		.column img {max-width:100%;}
}

/* Footer */
footer {background-color:#e8e8e8; }
.footer {justify-content:space-between; max-width:1200px; margin:0 auto; padding:1em;}
	.footer-list {display:flex; }
	.footer-list ul {display:flex; padding:0;}
	.footer-list li {list-style-type:none; margin-right:2em;}
	.footer-list li:last-child {margin-right:0;}
	.footer-list a {color:#666; text-decoration:none;}
	.footer-list a:hover {color:#4EB0AD;}
	.footer-social img {width:24px;}
	
@media screen and (max-width:800px) {
	.footer {flex-direction:row;}
	.footer-list ul {flex-direction:column;}
	.footer-list li {margin-right:0;}
}

/* Home */
.home-banner {display:flex; flex-direction:column; justify-content:space-between; width:100%; height:60vh; padding:1em; color:#fff;
				background:#f8f8f8 url("/images/mobilean/mobilean-banner-SAT.jpg") center no-repeat; background-size:cover;}
	.home-banner h1 {text-align:center;}
		.home-yourProject-items {display:flex; justify-content:space-around; padding:0;}
		.home-yourProject-item {list-style-type:none; margin:.5em; text-align:center;}
		   .home-yourProject-item .button {border:3px solid #fff;}
.home-compact05 {}
	.home-compact05 .flex {justify-content:space-around;}
.home-map {max-width:200px;}

@media screen and (max-width:800px) {
	.home-banner {width:calc(100% + 1em); margin-left:-.5em;}
	.home-banner .home-yourProject-items {flex-direction:column; align-items:center;}
}

/* Maps */
.REG-map-container {display:flex; flex-direction:row-reverse; flex-wrap:wrap;}
.REG-map-toolbar {width:100%;}
.REG-map {position:sticky!important; top:1em; width:70%; height:70vh; margin:0 auto 1em auto;}
.REG-map-summary {margin-right:1em;}
		.REG-map-summary h2 {margin-top:0;}
		.REG-map-summary-trips {padding:0;}
			.REG-map-summary-trip {list-style-type:none; padding:.2em .5em; border-bottom:1px #fff solid;}
			.REG-map-summary-trip:hover {background-color:#008080!important; color:#fff;}
		.REG-map-summary-missions {padding:0;}
			.REG-map-summary-mission {list-style-type:none; display:flex; justify-content:space-between; padding:.2em .5em; border-bottom:1px #fff solid; background-color:#f4f5f0;}
			.REG-map-summary-mission-name small {color:#554;}
			.REG-map-summary-mission:hover {background-color:#008080; color:#fff;}
			.REG-map-summary-mission:hover small {color:#fff;}
			.REG-map-summary-mission:hover a {color:#fff;}
			.REG-map-summary-mission-name a:hover {text-decoration:underline;}

@media screen and (max-width:800px) {
	.REG-map-container {flex-direction:column;}
	.REG-map-summary {margin-top:1em;}
	.REG-map {position:relative!important; width:100%; margin-bottom:1em;}
}

/* Solutions */
.solutions .column {width:30%; justify-content:center;}
.ml-flex .flex {justify-content:center;}

@media screen and (max-width:800px) {
	.solutions .column {width:100%;}
}

/* A propos */
.trombi .column {width:30%; text-align:center; padding:1em;}
.trombi-image {border-radius:50%; width:200px;}

@media screen and (max-width:800px) {
	.trombi .column {width:100%;}
	.trombi-image {width:120px;}
}


/*** ikCard ***/
.ikCard-wrapper {padding-top:50px; padding-bottom:50px}
.ikCard {max-width:800px; overflow:hidden; margin:2em auto; padding:2em; background-color:#f4f4f4; border-radius:1em; border:0.5em solid #e4e4e4;}

.ikCard-title, .ikCard-title h1 {margin-top:0; padding:0; font-size:1.5em;}
.ikCard-label {display:block; margin-top:1em; text-transform:uppercase; font-size:85%; color:#555;}
.ikCard img {max-width:100%;}
.ikCard-address {width:100%; box-sizing:border-box;}
.ikCard textarea {width:100%; box-sizing:border-box; min-height:5em;}
.ikCard-checkboxOption, .ikCard-radioBlockOption {margin:.3em 0;}
.ikCard-links {display:flex; flex-wrap:wrap; justify-content:center; margin-top:1em!important; padding-top:.5em; border-top:1px solid #e4e4e4;}
	.ikCard-link {margin:.5em;}
.ikCard-content {display:flex; flex-wrap:wrap; justify-content:space-between;}
	.ikCard-content-item {max-width:24em;}
		.ikCard-content-item img {width:100%;}

.ikCard input[type="text"], .ikCard input[type="email"], .ikCard textarea, .ikCard input[type="date"] {border:none; padding:0.5em; border-radius:0.3em;}
.ikCard input[type="submit"] {padding:.5em 1em; border:none; border-radius:.3em; background-color:#555; color:#fff; text-transform:uppercase;}
.ikCard input[type="submit"]:hover {background-color:#4EB0AD; cursor:pointer;}
	
@media screen and (max-width:800px) {
	.ikCard {padding:1em;}
	.ikCard-title {font-size:2em;}
}