body {
	margin:0
}
	
body * {
	box-sizing:border-box
}
	
#fond {
	max-width:660px;
	width:100%;
	background:#d4dcff;
	padding:20px 20px 5px 20px;
	margin:10px auto;
}

.content-container {
	background:#A5D4FF;
	padding-top:0
}

.return {margin-top:0}

#fond  .c {
	text-align:center
}
	
#fond  h1, #fond h2 {
	text-transform: uppercase; 
	padding: 30px 0 0 0;
	margin:0;
	font-size: 32px;
	border:0
}	


#fond h2 {
	font-weight: 500;
    line-height: 1.1em;
}

#fond  p {
	font-size:14px;
	line-height: 1.7;
}

#fond  section {
	padding:30px
}

#fond  .chapeau {
	font-size:20px
}

#fond  #intro {
	padding-bottom:0
}

#fond  #intro h1 {
    font-size: 44px;
    line-height: 1;
    margin: 0;
    margin-bottom: 40px;
	padding-top:0;
	color: #3A455E
}

#fond  #intro h1 span {
	display:block;
	font-size:60px;
	border:0
}

#fond  #perso {
	width:380px;
	margin:0 auto;
	padding-top: 175px;
	position:relative;
	height:456px;
	overflow:visible;
}

#fond  .bulles {
	position:absolute;
	width:150px; 
	height:150px
}

#fond  .bulles img  {
	width:100%
}

#fond  #tirelire {
    left: -90px;
    bottom: 20px
}

#fond  #pillules {
    left: -83px;
    bottom: 200px;
	width:140px
}
#fond  #inter {
    left: 100px;
    top: -11px;
	width:135px
}
#fond  #chaise {
    right: -70px;
    top: 60px;
    width: 140px
}
#fond  #hopital {
    right: -110px;
    bottom: 50px;
	width:150px
}
	
#fond  #inquietude *, #fond  #minorite *, #fond  #perco *, #fond #balance * {
	color:#3A455E
}

#fond  #inquietude {
	margin-top: -50px; 
	padding-bottom: 120px;
	background:#74CEAA;
	border-radius:3px 3px 0 0
}

#fond #immobilier * {
	color:white
}

#fond #minorite {
	background-image: url("../visuels/svg/separateur1.svg");
	background-repeat: no-repeat; 
	background-color:#72B4CA
}

#fond #minorite .chiffre sup {
    font-size: 40px
}

#fond #immobilier {
	background-image: url("../visuels/svg/separateur2.svg");
	padding-bottom:120px;
	background-repeat: no-repeat;
	background-color:#2D5AA8
}

#fond #balance h2, #fond #immobilier h2 {
	margin-top:100px
}

#fond .chiffre {
	font-size: 80px; 
	font-family: 'Playfair Display', serif;
	line-height: 1;
	font-weight:700
}
	
#fond .chiffre.gros {
	font-size:49px;
	padding-top:30px
}

#fond #perco {
	background-image: url("../visuels/svg/separateur3.svg");
	background-repeat: no-repeat;
	background-color:#90BFF0
}

#fond #perco h1 {
	margin-top:0;
	padding-top:0
}

#fond #perco-perso {
	width:410px;
	height:226px;
	position: relative;
    top: -60px;
	margin:0 auto;
}

#fond #perco-perso img {
	max-width: 100%;
    max-height: 100%;
    display: block;
    outline: none;
    border: none;
}

#fond #balance {
	background-image: url("../visuels/svg/separateur4.svg");
	background-repeat: no-repeat;
	background-color:#7aa8e0;
	border-radius: 0 0 3px 3px
}

#fond #cochon {
	width:253px;
	height:209px;
	text-align:center;
	position: relative;	
	margin-top: -90px !important;
	margin:0 auto;
}

#fond #cochon img {
	max-width: 100%;
    max-height: 100%;
    display: block;
    outline: none;
    border: none;
}

#bal img {
	max-width: 100%;
    max-height: 100%;
    display: block;
    outline: none;
    border: none;
}
#bal {width:60%}


#fond .flex-container {
	display: flex;
	justify-content: space-around	
}

#fond #immobilier svg {
	width:50%;
	height:50%
}

#fond .colonnes {
	padding: 10px; 
	min-width:33%
}

#fond #balance .colonnes {
	min-width:auto
}

#fond #balance h1 {
	margin-bottom:0
}

#fond #balance .colonnes:nth-child(2) {
	padding-top:70px;
	width:40%
}

#fond .perso-inquiet {
	width:380px
}

#fond #mentions {
	font-size:10px; 
	text-align:left;
	background:none;
	padding-top:15px;
}

#fond section {
	background-size: 110%;
    background-position: -10px -5px
}

@media (max-width: 650px) {
	#fond {
	padding:0;
	}
	#fond .flex-container {
		flex-direction: column
	}
	#cochon, #perco-perso, #bal {width:100% !important; height:auto !important;}
	#fond #balance .colonnes:nth-child(2) {
	width:100%
	}
	#fond  #tirelire, #fond  #pillules, #fond #hopital, #fond #chaise {
		display:none
	}
	#fond #perso, #fond .perso-inquiet {
		width:100%;
		height:auto
	}
	#fond h1 {
		text-transform: uppercase;
		padding: 35px 0;
		font-size: 24px;
		border: 0;
	}	
	#fond #balance img {
		width:100%
	}
	#fond section {
		background-size: 120%;
		/*background-position: -225px -5px*/
	}
	#fond #inter {
		left: 50%;
		transform: translateX(-50%)
	}
	#fond #intro h1 span {
		display:inline; 
		font-size:44px
	}
	#fond .chiffre.gros {
		padding-top:0
}
}