body, html {
	margin:0;
	padding:0;
	box-sizing:border-box;
	line-height:1.5;
}
p:not(.pFoot) {
	position:relative;
	background-color:rgba(60, 60, 60, 0.8);
	z-index:10;
	border-radius:15px;
	padding:1rem;
}
p.pFoot {
    text-align: center;
}
.menufixe {
	position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  border: 1px solid #000000;
  z-index: 20;
  text-align: center;
  background-color: #ccc;
  line-height: 2em;
	box-shadow:2px 2px 8px #333;
	margin:0;
	padding:1.4rem;
}
div.reseaux {
	position:fixed;
	top:calc(50% - (75px + 3rem));
	left:0;
}
div.fb, div.twit, div.insta {
	width:50px;
	height:50px;
	margin:0.5rem;	
}
div.fb {
	background:url(../img/fb.png) no-repeat 0 0  / contain;	
}
div.twit {
	background:url(../img/twit.png) no-repeat 0 0  / contain;	
}
div.insta {
	background:url(../img/insta.png) no-repeat 0 0  / contain;	
}
.content {
  z-index: 1;
  padding: 5rem 50px 190px;
	max-width:1280px;
	margin:0 auto;
}
.flexContainer {
	display:flex;
	justify-content:space-around;
	flex-flow:row wrap;
}
.flexContainer article {
	flex:1 1 450px;
	border-radius: 20px 20px 0 0;
	padding:1rem;
	box-sizing:border-box;
	margin: 2rem 2rem;
	background-color:#232323;
	color:#fff;
	position:relative;
}
article::before {
    background-color: #ccc;
    border: 3px solid #bbb;
    content: "";
    display: block;
    height: 65px;
    left: 30%;
    position: absolute;
    top: -15px;
    transform: rotate(35deg);
    width: 65px;
}
.circle {
	border: 20px double #222;
    border-radius: 50%;
    box-sizing: border-box;
    height: 100px;
    line-height: 90px;
    position: absolute;
    top: calc(50% - 50px);
    text-align: center;
    right: -50px;
    width: 100px;	
}
nav .circle {
    bottom: auto;
    color: #fff;
    top: -50px;
}
article a {
	display:block;
	background-color:yellow;
	position:relative;
	top:40px;
	width:100%;
	left:-1rem;
	padding:1rem;
	text-align:center;
	z-index:10;
	border-radius: 0 0 20px 20px;
}

footer {
	position:fixed;
	bottom:0;
	background-color: yellow;
    min-height: 40px;
    width: 100%;
    z-index: 100;
    border-top: 20px solid #333;
}

.bubble {
	display: inline-block;
	position:absolute;
	z-index:100;
	top:0;
	transform-origin:50% 50%;
	vertical-align: middle;
	width: 20px;
	height: 20px;
	margin: 25px auto;
	background: #E5007E;
	border-radius: 50px;
	animation: bubbling 1s infinite alternate;
}
@keyframes bubbling {
0% {
	-moz-transform: translate(0, 0) scaleX(3);
}
60% {
	-moz-transform: translate(25px, -50px)  scaleX(1);
}
100% {
	-moz-transform: translate(45px, 0)  scaleX(3);
}

}