body {
	height: 100vh;
	background: url("../images/batiment-mmi.jpg") 50% fixed;
	background-size: cover;
}
header {
	align-items:center;
	background:#fcfdff;
	border-bottom:5px solid #e6007e;
	display:flex;
	flex-direction:row;
	justify-content:space-between;
	padding:0 15px;
}
header > div, nav > ul {
	align-items:center;
	display:flex;
	flex-direction:row;
}
header > div {
	justify-content:flex-start;
	width:65%;
}
nav {
	width:30%;
}
nav > ul {
	justify-content:space-around;
}
nav li {
	text-align:center;
	width:50%;
}
nav li:nth-of-type(2) {
	border-left:2px solid #e6007e;
}
nav a {
	color:#263a7a;
}
header img {
	display:block;
	margin:0 20px 0 0;
}
header p {
	color:#263a7a;
	font-size:15px;
	font-weight:bold;
}
.desktop {
	display:none;
}
.small {
	display:flex;
}
main {
	background:rgba(255, 255, 255, 0.45);
	font-size:11px;
	padding:15px 10px;
}
footer {
	background:#263a7a;
	font-size:12px;
}
footer, footer a {
	color:#fcfdff;
}
footer > ul:first-of-type {
	display:none;
}
footer > ul:nth-of-type(2) {
	align-items:center;
	display:flex;
	flex-direction:row;
	justify-content:space-around;
	padding:0 10px 10px 10px;
	width:100%;
}
footer > ul:nth-of-type(2) > li:last-of-type {
	max-width:30%;
	text-align:right;
}
footer > ul:last-of-type {
	border-top:1px solid #fcfdff;
	padding:10px 10px 0 10px;
	text-align:center;
}
footer > ul:last-of-type a {
	color:#e6007e;
}
footer span {
	display:none;
	font-size:22px;
	font-weight:bold;
}
@media screen and (min-width:768px) {
	header > div {
		width:30%;
	}
	header p {
		font-size:22px;
	}
	.desktop {
		display:flex;
	}
	.small {
		display:none;
	}
	main {
		font-size:12px;
	}
}
@media screen and (min-width:1024px) {
	footer {
		align-items:center;
		display:flex;
		flex-direction:row;
		justify-content:space-around;
	}
	footer > ul {
		width:20%;
	}
	footer > ul:first-of-type {
		display:block;
		padding:10px;
	}
	footer > ul:first-of-type > li:first-of-type, footer span {
		font-size:16px;
		font-weight:bold;
	}
	footer > ul:nth-of-type(2) {
		border-left:3px solid #fcfdff;
		border-right:3px solid #fcfdff;
		padding:10px;
	}
	footer span {
		display:block;
	}
	footer > ul:nth-of-type(2) > li:last-of-type {
		max-width:15%;
	}
	footer > ul:last-of-type {
		border:0;
		padding:10px;
		text-align:left;
	}
}

/* Test menu */
#svg_bubble{
	display:none;
}
.menu_bubble {
  display:flex;
  justify-content:center;
  align-items: center;
  -webkit-filter: url("#goo");
	filter: url("#goo");
}
.img-menu {
  width:24px;
}
.center {
  border: 1px solid grey;
  border-radius:180px;
  background-color : grey;
  padding: 30px 24px;
  animation: menu-neutral 0.25s forwards;
}
.center.active{
  animation: menu-active 0.5s forwards;
  
}
@keyframes menu-neutral {from{padding: 20px 14px;}to{padding: 30px 24px;}}
@keyframes menu-active {from{padding: 30px 24px;}to{padding: 20px 14px;}}
.line {
  border-bottom: 1px solid white;
  border-radius:5px;
  width:25px;
  margin-top:3px;
}

.bulle-top {
  position:absolute;
  border: 1px solid grey;
  border-radius:180px;
  padding: 8px 10px;
  background-color : grey;
  animation: out-bubble-top 0.5s forwards;
  z-index:-1;
}
.bulle-top.active {
  animation: in-bubble-top 0.75s forwards;
}
@keyframes in-bubble-top {
  0% {visibility:visible;margin-left:0px; opacity:0;}
  100% {margin-left:-80px; opacity:1;}
}
@keyframes out-bubble-top {
  0% {margin-left:-80px; opacity:1;}
  99% {margin-left:0px;opacity:0;}
  100% {visibility:hidden;opacity:0;}
}

.bulle-right {
  position:absolute;
  border: 1px solid grey;
  border-radius:180px;
  padding: 8px 10px;
  background-color : grey;
  animation: out-bubble-right 0.5s forwards;
  z-index:-1;
}
.bulle-right.active {
  animation: in-bubble-right 0.75s forwards;
}
@keyframes in-bubble-right {
  0% {margin-left:0px; opacity:0;}
  100% {margin-left:-240px; opacity:1;}
}
@keyframes out-bubble-right {
  0% {visibility:visible;margin-left:-240px; opacity:1;}
  99% {margin-left:0px;opacity:0;}
  100% {visibility:hidden;opacity:0;}
}

.bulle-left {
  position:absolute;
  border: 1px solid grey;
  border-radius:180px;
  padding: 8px 10px;
  background-color : grey;
  animation: out-bubble-left 0.5s forwards;
  z-index:-1;
}
.bulle-left.active {
  animation: in-bubble-left 0.75s forwards;
}
@keyframes in-bubble-left {
  0% {margin-left:0px; opacity:0;}
  100% {margin-left:-160px; opacity:1;}
}
@keyframes out-bubble-left {
  0% {visibility:visible;margin-left:-160px; opacity:1;}
  99% {margin-left:0px;opacity:0;}
  100% {visibility:hidden;opacity:0;}
}

.bulle-bottom {
  position:absolute;
  border: 1px solid grey;
  border-radius:180px;
  padding: 8px 10px;
  background-color : grey;
  animation: out-bubble-bottom 0.5s forwards;
  z-index:-1;
}
.bulle-bottom.active {
  animation: in-bubble-bottom 0.75s forwards;
}
@keyframes in-bubble-bottom {
  0% {visibility:visible;margin-top:0px; opacity:0;}
  100% {margin-left:-320px; opacity:1;}
}
@keyframes out-bubble-bottom {
  0% {margin-left:-320px; opacity:1;}
  99% {margin-top:0px;opacity:0;}
  100% {visibility:hidden;opacity:0;}
}

/* --------- */