@charset "utf-8";

/* Cocoon - Alexandre Castets */

a, article, aside, blockquote, body, button, div, em, footer, h1, h2, h3, h4, header, img, input, textarea, nav, p, section, ul, li, section, span, strong{
	padding:0;
	margin:0;
	border:0;
	list-style:none;
	outline:none;
	font-family: 'PT Sans', sans-serif;
	font-size:1.4rem;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
	background:none;
}

html, body{
	width:100%;
	min-height:100%;
	font-size:62.5%;
}
body{
	font-weight:400;
	color:#000;
}

a{ text-decoration:none; color:#312783;}
a:hover{ text-decoration:none;}

::selection{ background:#312783; color:#fff;}
::-moz-selection{ background:#312783; color:#fff;}

input{ -webkit-appearance: none;}




/* HEADER */

header{
	z-index:3;
	top:0;
	position:fixed;
	width:100%;
	height:100px;
}
header.sombre{ background:rgba(48, 38, 131, 0.9);}
header.sombre:hover{ background:rgba(48, 38, 131, 1);}
#home header{
	text-align:center;
}
header nav{
	position:relative;
	width:100%;
	height:130px;
	overflow:hidden;
}
header a{
	display:inline-block;
	height:100px;
	padding:0 15px;
	line-height:100px;
	color:#fff;
	font-size:1.6rem;
	text-transform:uppercase;
	letter-spacing: -0.025rem;
	vertical-align:top;
}
header a#logo{
	width:35%;
	padding:30px 15% 0 5%;
}
#home header a#logo{ display:none;}
header a#logo:hover{ opacity:0.8;}
header a#telephone{
	float:right;
	padding-left:33px;
	background:url('../img/icone-telephone.png') no-repeat center left;
}
header a.premier{ padding-left:0;}
header a#logo img{
	display:inline-block;
	width:100%;
	max-width:500px;
	max-height:100px;
}
header a#logo img.mobile{ display:none;}
header a.actif, header a:hover{ opacity:0.4;}
header a.premier{ padding-left:0;}

/* OUVRIR - FERMER */

#ouvrir, #fermer{
	z-index:5;
	top:0;
	right:0;
	position:fixed;
	width:60px;
	height:60px;
	text-align:center;
	cursor:pointer;
}
#ouvrir, #fermer{
	display:none;
}
#fermer{
	background:#ec3d00;
}
#ouvrir ul, #fermer ul{
	position:absolute;
	width:22px;
	margin:23px 0 0 19px;
}
#ouvrir:hover ul{ margin-top:17px;}
#fermer ul{
	width:60px;
	height:60px;
	margin:0;
	padding:23px 20px;
	background:#ef0000;
}
#ouvrir ul li, #fermer ul li{
	float:left;
	width:100%;
	height:2px;
	margin:0 0 4px 0;
	background:#fff;
	overflow:hidden;
}
#ouvrir:hover  ul li.un{ margin:-6px 0 10px 0;}
#ouvrir ul li.quatre{ margin:6px 0 0 0; background:#fff;}
#ouvrir:hover ul li.quatre{ margin:0 0 0 0;}
#ouvrir:hover  ul li.un, #ouvrir ul li.quatre{opacity:0; -moz-opacity:0; -webkit-opacity:0; filter: alpha(opacity=0);}
#ouvrir:hover ul li.quatre{ opacity:1; -moz-opacity:1; -webkit-opacity:1; filter: alpha(opacity=100);}

#fermer ul li.une{
	margin-top:6px;
	 -ms-transform: rotate(45deg); 
	-webkit-transform: rotate(45deg);
	transform: rotate(45deg);
}
#fermer ul li.deux{
	margin-top:-6px;
	 -ms-transform: rotate(-45deg); 
	-webkit-transform: rotate(-45deg);
	transform: rotate(-45deg);
}

/* FOOTER */

footer{
	position:relative;
	float:left;
	width:100%;
	padding:140px 10% 0;
	background:url('../img/footer.png') top center no-repeat;	
}
footer.violet{ background-color:#302683;}

footer nav{
	float:left;
	width:15%;
}
footer nav a{
	display:inline-block;
	color:#fff;
	height:20px;
	line-height:20px;
	padding:0 40px 0 0;
	font-size:1.3rem;
	opacity:0.8;
}
footer nav a.actif{ opacity:0.4;}
footer nav a:hover{ opacity:1;}
footer nav a#typo{ width:100%; height:35px; padding:0 10% 0 0;}
footer nav a#typo img{ display:inline-block; width:100%;}

footer div.coordonnees{
	float:left;
	min-width:15%;
	padding:35px 0 0;
}
footer div.coordonnees a, footer div.coordonnees span{
	display:inline-block;
	color:#fff;
	height:20px;
	line-height:20px;
	padding:0 40px 0 0;
	font-size:1.3rem;
	opacity:0.8;
}
footer div.coordonnees a:hover{ opacity:1;}
footer div.coordonnees span{ width:100%;}
footer div.coordonnees span span{ opacity:0.67; width:auto; padding:0;}

footer div#reseaux{
	z-index:2;
	position:relative;
	float:left;
	width:100%;
	height:25px;
	border-bottom:1px solid #d5d3e4;
}
footer div#reseaux p{
	float: right;
	background:#2a2173;
}
footer div#reseaux a{
	float:right;
	width: 40px;
	height:40px;
	margin-left: 10px;
	display: flex;
	align-content: center;
	background:#2a2173;
	border: 2px solid #d4d3e3;
	border-radius: 20px;
}
footer div#reseaux a:hover{ border-color:#fff;}
footer div#reseaux a img{
	margin: auto;
	width: 20px;
	opacity:0.8;
}
footer div#reseaux a:hover img{ opacity:1;}

footer div#bottom{
	float:left;
	width:100%;
	height:50px;
	padding:0 153px 0 0;
	overflow:hidden;
}
footer div#bottom p{
	float:left;
	width:48%;
	height:50px;
	line-height:50px;
	color:#d5d3e4;
}
footer div#bottom p.droite{ float:right; width:52%;}
footer div#bottom p span{
	display:inline-block;
	width:20px;
	height:50px;
	line-height:50px;
	text-align:center;
}
footer div#bottom p a{
	color:#fff;
	opacity:0.8;
}
footer div#bottom p.gauche a{ padding:0;}
footer div#bottom p.droite a{
	float:right;
	height:50px;
	line-height:50px;
	padding:0 10px;
}
footer div#bottom p.droite a.actif{ font-weight:700;}
footer div#bottom p.droite a.actif, footer div#bottom p.droite a:hover{ opacity:1;}
footer div#bottom p.droite a.droite{ padding-right:0;}
footer div#bottom p.droite span{ float:right; width:auto;}


/* ACCUEIL */

body#home, body#contact{
	background-color:#312783;
	background-repeat:no-repeat;
	background-position:center center;
	-webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
}

section#accueil{
	z-index:1;
	position:absolute;
	width:100%;
	height:100%;
	text-align:center;
	overflow:hidden;
}

section#accueil div#cocoon{
	position:absolute;
	width:100%;
	top:24%;
	margin:-50px 0 0;
}
section#accueil img{
	display:inline-block;
	width:22.5%;
	max-width:500px;
	margin-right:10px;
}
section#accueil h1{
	position:absolute;
	width:100%;
	top:52%;
	margin:-100px 0 0;
	padding:0 3%;
	font-size:3.2rem;
	font-weight:400;
	color:#fff;
}
section#accueil h1 span{
	display:inline-block;
	width:100%;
	font-size:5rem;
	font-weight:700;
	color:#fff;
}
section#accueil a#decouvrir{
	position:absolute;
	top:75%;
	margin:-70px 0 0 -70px;
	width:141px;
	height:141px;
	line-height:141px;
	font-size:1.5rem;
	font-weight:700;
	color:#fff;
	text-transform:uppercase;
	background:url('../img/decouvrir.png') no-repeat center center;
}

/* PAGES */

section#titre{
	position:relative;
	float:left;
	width:100%;
	height:900px;
	padding:100px 0 0;
	background-color:#312783;
	background-repeat:no-repeat;
	background-position:center center;
	background-size:cover;
	-webkit-background-size:cover;
}
section.metro{ background-image:url('../img/backgrounds-baudry-metro.jpg');}
section#titre div#cache{
	position:relative;
	float:left;
	width:100%;
	height:100%;
	background:url('../img/cache.png') no-repeat bottom center;
}
section#titre h1{
	position:absolute;
	bottom:460px;
	width:100%;
	padding:0 10% 0 35%;
	font-size:6rem;
	font-weight:400;
	line-height:7.2rem;
	color:#fff;
}
section#titre h1 span{
	display:inline-block;
	width:100%;
	font-size:6rem;
	font-weight:700;
	color:#fff;
}

section#content{
	position:relative;
	float:left;
	width:100%;
	margin:-280px 0 0;
}
section#content h2, section#content nav#sousmenu{
	clear:both;
	float:left;
	width:20%;
	text-align:right;
	font-size:1.6rem;
}
section#content h2{ line-height:3.2rem;}
section#content h2#page{ clear:none; font-size:1.8rem;}
section#content h2.interne{ padding:40px 0; text-align:left; text-transform:uppercase;}
section#content h2.premier{ padding-top:0; clear:none;}
section#content h2.interne span{ font-size:1.6rem; padding-right:20px;}
section#content h2 div{ position:absolute; margin:-138px 0 0;}
section#content h2.pack span{
	display:inline-block;
	max-width:75%;
	text-align:center;
	text-transform:uppercase;
	color:#3283b9;
	font-size:1.8rem;
}
section#content h2 span.bleu{ color:#124992;}
section#content h2 span.marine{ color:#302683;}
section#content h2 span.violet{ color:#6e569d;}
section#content h2.pack span img{
	display:inline-block;
	max-width:100%;
}
section#content nav#sousmenu{
	clear:left;
	padding:35px 0 0 5px;
}
section#content nav#sousmenu a{
	display:inline-block;
	width:100%;
	padding:0 0 15px;
	line-height:1.8rem;
	font-size:1.6rem;
	color:#302683;
}
section#content nav#sousmenu a:hover{ padding-right:10px;}
section#content p, section#content span.tiret, section#content h2.interne, section#content div.image-interne{
	float:right;
	width:55%;
	margin-right:10%;
}
section#content div.image-interne{ text-align:left; padding-bottom:40px;}
section#content div.image-interne img{ display:inline-block; max-width:100%;}
section#content span.tiret-mobile{ display:none;}
section#content p, section#content p span, section#content p strong, section#content p a, section#content p b, section#content p em, section#content p i, section#content p u{
	font-size:1.8rem;
	line-height:3.2rem;
	padding-bottom:40px;
}
section#content p a{ color:#302683; padding-bottom:2px; border-bottom:1px solid #302683;}
section#content p a:hover{ border-bottom:1px solid #fff;}
section#content p strong{ font-weight:700; color:#302683;}
section#content .violet p strong{ color:#fff;}
section#content p strong, section#content p:last-child{ padding-bottom:0;}
section#content p span{ padding:0;}
section#content p span.bull{
	float:left;
	width:100%;
	background:url('../img/list.png') no-repeat top left;
	padding-left:40px;
}
section#content .violet p span.bull{ background:url('../img/list-violet.png') no-repeat top left;}
section#content p span.option{ width:75%; background:url('../img/list-option.png') no-repeat top left;}
section#content p span.forfait{ clear:both; width:33%; background:url('../img/list-forfait.png') no-repeat top left;}
section#content p span.large{ width:100%;}
section#content p span.tarif{
	float:left;
	width:25%;
	padding:0 0 0 5%;
	text-align:right;
	color:#302683;
}
	
	
section#content p#slogan{ font-weight:700; font-size:1.8rem;}
section#content p#slogan i{ font-weight:400;}
section#content div#introduction p{
	font-size:2.4rem;
	line-height:3.6rem;
	padding-bottom:40px;
}
section#content span.tiret span{
	float:left;
	margin:0 0 40px 0;
	width:80px;
	height:1px;
	background:#000;
}
section#content span.demi span{ width:40px;}
section#content span.large span{ width:400px; max-width:100%; margin:60px 0 100px;}
section#content div.image{
	float:left;
	width:100%;
	padding:10px 10% 50px;
}
section#content div.blanc_violet{ background:url('../img/violet-bas.jpg') repeat-x center center;}
section#content div.violet_blanc{ background:url('../img/violet-haut.jpg') repeat-x center center;}
section#content div.image img{
	display:inline-block;
	width:100%;
}
section#content div.violet{
	position:relative;
	float:left;
	width:100%;
	padding:0 0 40px 0;
	background:#302683;
}
section#content div.violet h2, section#content div.violet p{ color:#fff;}

section#content a.lien{
	display:inline-block;
	color:#302683;
	font-weight:700;
	font-size:1.8rem;
	opacity:0.8;
	border:none;
}
section#content a.lien:hover{ opacity:1; border:none;}
section#content a.lien span.texte{ display:inline-block; margin-bottom:10px; border-bottom:2px solid #fff;}
section#content a.lien span.texte:hover{ border-bottom:2px solid #302683;}
section#content .violet a.lien span.texte{ color:#fff; border-bottom:2px solid #302683;}
section#content .violet a.lien span.texte:hover{ border-bottom:2px solid #fff;}
section#content span.bouton{
	display:inline-block;
	margin:0 10px;
	height:40px;
	line-height:37px;
	font-size:1.5rem;
	padding:0 20px;
	text-transform:uppercase;
	border:2px solid #302683;
	border-radius:20px;
}
section#content span.bouton:hover{ color:#fff; background:#302683;}
section#content span.bouton-blanc{ color:#fff; border-color:#fff;}
section#content span.bouton-blanc:hover{ opacity:1;}
section#content span.icone-telephone, section#content span.icone-telephone:hover{ padding-left:38px; background:url('../img/icone-bouton-telephone.png') no-repeat left center;}


/* TÉMOIGNAGES - PARTENAIRES*/

section#temoignages, section#partenaires, section#articles{
	position:relative;
	float:left;
	width:100%;
	padding:0 10%;
}
section#temoignages article, section#partenaires article, section#articles article{
	float:left;
	width:45%;
	padding:40px 0 0;
}
section#partenaires article{ width:25%; margin-top:40px; padding:0;}
section#articles article{ clear:both;}
section#temoignages article.droite, section#articles article.droite{ float:right;}
section#articles article.droite{ clear:none;}
section#partenaires article.premier{ clear:both;}
section#partenaires article a{ display:inline-block; width:100%; padding:0 3%; text-align:center; color:#000;}
section#partenaires article a:hover{ color:#312783;}
section#temoignages article div.image, section#partenaires article div.image, section#articles article div.image{
	padding:0;
	text-align:center;
}
section#temoignages article div.image img, section#partenaires article div.image img, section#articles article div.image img{
	display:inline-block;
	width:200px;
	max-width:50%;
	border-radius:200px;
	overflow:hidden;
	filter:grayscale(100%);
}
section#articles article div.image img{ width:auto; max-width:100%; border-radius:0; filter:grayscale(0%);}
section#partenaires article div.image img{ max-width:66%; filter:grayscale(0%);}
section#temoignages article:hover div.image img{ filter:grayscale(0%);}
section#partenaires article:hover div.image img{ filter:grayscale(100%);}
section#temoignages article h2, section#partenaires article h2, section#articles article h2{
	float:left;
	width:100%;
	padding:25px 20px;
	font-size:1.8rem;
	text-align:center;
}
section#articles article h2{ text-transform:uppercase;}
section#partenaires article h2{ padding:15px 0;}
section#temoignages article h2 span, section#partenaires article h2 span{
	font-weight:400;
	font-size:1.8rem;
	line-height:3.2rem;
}
section#temoignages article div.texte, section#articles article div.texte{
	float:left;
	width:100%;
	padding:20px;
	border-radius:4px;
}
section#articles article div.texte{ padding-bottom:10px;}
section#articles article div.texte{ background:#f5f5f5;}
section#temoignages article:hover div.texte{ background:#302683;}
section#articles article:hover div.texte{ background:#ebebeb;}
section#temoignages article p, section#temoignages article span, section#partenaires article p, section#articles article p, section#articles article span{
	display:inline;
	float:none;
	width:auto;
	margin:0;
	padding:0;
	vertical-align:top;
}
section#temoignages article div.texte span{ color:#dbdbdb; font-size:5rem; line-height:3.2rem; padding-right:10px;}
section#temoignages article div.texte span.fin{ padding:0 0 0 10px; line-height:5rem; height:20px; display:inline-block;}
section#temoignages article:hover div.texte span{ color:#7974a7;}
section#temoignages article p, section#temoignages article strong, section#temoignages article em{
	font-size:1.8rem;
	line-height:3.2rem;
	font-style:italic;
}
section#articles article p, section#articles article strong, section#articles article em, section#articles article span, section#articles article em, section#articles article a{
	font-size:1.6rem;
	line-height:2.8rem;
}
section#articles article a.lien, section#articles article a.fichier{ float:left; padding:10px 0;}
section#articles article a.fichier{ clear:both; background:url('../img/piece-jointe.png') no-repeat left center; padding-left:25px;}
section#articles article a.lien:hover, section#articles article a.fichier:hover{ text-decoration:underline;}
section#articles article span.date{ float:right; text-align:right; font-style:italic; font-size:1.4rem; color:#787878; padding:10px 0;}
section#partenaires article p{ font-size:1.6rem; line-height:normal;}
section#temoignages article:hover p, section#temoignages article:hover strong, section#temoignages article:hover em{ color:#fff;}









/* CONTACT */

body#contact section#content{
	position:absolute;
	float:none;
	bottom:100px;
	width:80%;
	margin:0 10%;
}
body#contact section#content #gauche{
	float:left;
	width:55%;
}
body#contact section#content h1, body#contact section#content #coordonnees{
	float:left;
	width:100%;
	color:#fff;
}
body#contact section#content h1{
	width: 100%;
	padding:0 0 90px;
	font-size:5.6rem;
	font-weight: 400;
	line-height:normal;
	color: #fff;
	letter-spacing:-0.02rem;
}
body#contact section#content h1 span{
	display: inline-block;
	width: 100%;
	font-size:5.6rem;
	font-weight: 700;
	color: #fff;
}
body#contact section#content #adresses, body#contact section#content #numeros, body#contact section#content #reseaux{
	float:left;
	width:30%;
	color: #fff;
	font-size:1.6rem;
	line-height:2.1rem;
}
body#contact section#content #adresses{ width:40%;}
body#contact section#content div a, body#contact section#content #numeros span{
	color: #fff;
	font-size:1.6rem;
	line-height:2.1rem;
}
body#contact section#content #adresses a, body#contact section#content #reseaux a:hover{ border-bottom:1px solid #fff;}
body#contact section#content #adresses a:hover{ border:none;}
body#contact section#content #coordonnees div span{ opacity:0.67;}

body#contact section#content #formulaire{
	float:right;
	width:40%;
}
body#contact section#content #formulaire ul, body#contact section#content #formulaire li{
	float:left;
	width:100%;
	padding:0 0 20px;
}
body#contact section#content #formulaire li:last-child{ padding-bottom:0;}
body#contact section#content #formulaire input, body#contact section#content #formulaire textarea{
	float:left;
	width:100%;
	height:50px;
	padding:0 5%;
	line-height:50px;
	color:#fff;
	font-size:1.8rem;
	border:2px solid #fff;
	background:rgba(0,0,0, 0.33);
}
body#contact section#content #formulaire input:hover, body#contact section#content #formulaire textarea:hover{ background:rgba(0,0,0, 0.5);}
body#contact section#content #formulaire input.rouge, body#contact section#content #formulaire textarea.rouge{ border-color:#ec3d00; color:#ec3d00;}
body#contact section#content #formulaire input.rouge:hover, body#contact section#content #formulaire textarea.rouge:hover{ color:#fff;}
body#contact section#content #formulaire textarea{ height:200px; padding:15px 5%; line-height:3.2rem;}
body#contact section#content #formulaire input.submit{
	height:auto;
	line-height:normal;
	padding:12px 5%;
	text-align:center;
	letter-spacing:0.5rem;
	cursor:pointer;
}
body#contact section#content #formulaire input.submit:hover{
	color:#302683;
	font-weight:700;
	background:#fff;
}
body#contact section#content #formulaire p{
	float:left;
	width:100%;
	padding:15px 2%;
	color:#fff;
	font-size:1.8rem;
	text-align:center;
	background:#78c652;
}
body#contact section#content #formulaire p.rouge{ background:#ec3d00;}

body#contact footer{
	bottom:0;
	position:absolute;
	width:80%;
	margin:0 10%;
	padding:0;
	height:60px;
	line-height:60px;
	background:none;
	border-top:1px solid #fff;
}
body#contact footer #bottom{ padding-right:0;}


a#credits{
	z-index:2;
	position:absolute;
	width:25px;
	height:20px;
	bottom:20px;
	right:20px;
	opacity:0.6;
}
a#credits:hover{ opacity:1;}
a#credits img{ width:100%;}















/* MAX-WIDTH */

@media only screen and (max-width : 1699px) {
	
	header a#logo { width: 30%; padding-right: 10%;}
}
@media only screen and (max-width : 1599px) {
	
	html, body{ font-size:62%;}
}
@media only screen and (max-width : 1499px) {
	
	html, body{ font-size:61%;}
	
	header a#logo{ width:25%; padding:30px 5% 0 5%;}
	section#titre h1, section#titre h1 span{ font-size:5.8rem;}
	section#titre h1{ padding-left:30%;}
	section#content p, section#content h2.interne, section#content span.tiret, section#content div.image-interne{ width:60%;}
}
@media only screen and (max-width : 1399px) {
	
	html, body{ font-size:60%;}
	
	header a#logo{ padding-left:4%;}
	section#titre h1{ padding-right:8%;}
	section#content p, section#content span.tiret, section#content h2.interne, section#content div.image-interne{ width:62%; margin-right:8%;}
	section#content div.image, footer{ padding-left:8%; padding-right:8%;}
	body#contact section#content, body#contact footer{ width:84%; margin:0 8%;}
	section#temoignages, section#partenaires, section#articles{ padding:0 5%;}
}
@media only screen and (max-width : 1299px) {
	
	html, body{ font-size:59%;}
	
	header a#logo{ width: 20%; padding:15px 5% 0 5%;}
	section#titre h1, section#titre h1 span{ font-size:5.6rem;}
	body#contact section#content h1, body#contact section#content h1 span{ font-size:5.2rem;}
	section#titre h1{ padding-right:7%;}
	section#content p, section#content h2.interne, section#content span.tiret, section#content div.image-interne{ width:63%; margin-right:7%;}
	section#content div.image, footer{ padding-left:7%; padding-right:7%;}
	body#contact section#content, body#contact footer{ width:86%; margin:0 7%;}
	footer div#bottom p.gauche a, footer div#bottom p.gauche span{ display:none;}
	footer div#bottom p.droite{ width:62%;}
	section#accueil img{ width:25%;}
}
@media only screen and (max-width : 1199px) {
	
	html, body{ font-size:58%;}
	
	header a{ padding:0 10px;}
	section#titre h1, section#titre h1 span{ font-size:5.4rem;}
	body#contact section#content h1, body#contact section#content h1 span{ font-size:5rem;}
	section#titre h1{ padding-right:6%;}
	section#content p, section#content h2.interne, section#content span.tiret, section#content div.image-interne{ width:64%; margin-right:6%;}
	section#content div.image, footer{ padding-left:6%; padding-right:6%;}
	body#contact section#content, body#contact footer{ width:88%; margin:0 6%;}
	footer nav{ width:20%;}
	footer div.coordonnees{ min-width:20%;}
	footer div#bottom p{ width:auto;}
	footer div#bottom p span{ width:24px;}
	footer div#bottom p a{ padding:0 12px;}
	
	section#accueil img{ width:30%;}
	section#content nav#sousmenu a{ font-size:1.5rem;}
	section#temoignages article, section#articles article{ width:47%;}
}
@media only screen and (max-width : 1099px) {
	
	html, body{ font-size:57%;}
	
	header a#logo{ width: 120px; padding:20px 30px 0;}
	header a#logo img.web{ display:none;}
	header a#logo img.mobile{ display:block;}
	header a#logo img#picto{ width:60px; height:60px;}
	
	header a{ padding:0 10px;}
	section#titre h1, section#titre h1 span, body#contact section#content h1, body#contact section#content h1 span{ font-size:5.1rem;}
	body#contact section#content h1, body#contact section#content h1 span{ font-size:4.4rem;}
	
	section#accueil img{ width:32%;}
	section#temoignages, section#partenaires, section#articles{ padding:0 3%;}
}
@media only screen and (max-width : 999px) {
	
	html, body{ font-size:56%;}
	
	header a#logo{ width: 100px; padding: 20px 20px 0;}
	header a{ padding:0 10px;}
	section#titre h1{ padding-right:5%;}
	section#titre h1, section#titre h1 span, body#contact section#content h1, body#contact section#content h1 span{ font-size:4.8rem;}
	body#contact section#content h1, body#contact section#content h1 span{ font-size:4rem;}
	section#content p, section#content h2.interne, section#content span.tiret, section#content div.image-interne{ width:65%; margin-right:5%;}
	section#content div.image, footer{ padding-left:5%; padding-right:5%;}
	body#contact section#content, body#contact footer{ width:90%; margin:0 5%;}
	section#accueil img{ width:35%;}
	section#content nav#sousmenu a{ font-size:1.4rem; line-height:1.7rem;}
	body#contact section#content #formulaire{ width:45%;}
	section#temoignages, section#partenaires, section#articles{ padding:0 2%;}
	section#temoignages article p{ font-size:1.7rem;}
	section#temoignages article p, section#temoignages article span{ line-height:3rem;}
	footer div#bottom{ height:auto; padding:20px 0;}
	footer div#bottom p{ height:30px; line-height:30px;}
	footer div#bottom p.droite{ width:100%;}
	footer div#bottom p.droite, footer div#bottom p.droite a, footer div#bottom p.droite span{ float:left;}
	footer div#bottom p.gauche a, footer div#bottom p.droite a{ padding:0 10px;}
	footer div#bottom p.gauche a, footer div#bottom p.droite a, footer div#bottom p.droite span{ height:30px; line-height:30px;}
	footer div#bottom p.droite a.droite{ padding:0 10px 0 0;}
	footer div#bottom p.gauche{ clear:both; width:100%;}
	footer div#bottom p.gauche a, footer div#bottom p.gauche span{ display:inline-block;}
	footer div#bottom p.gauche a{ padding:0;}
	a#credits{ width:20px; height:16px;}
	
	
	body#contact section#content, body#contact footer{
		position:relative;
		float:left;
		bottom:auto;
	}
	body#contact section#content{ padding:180px 0 0;}
	body#contact section#content #gauche, body#contact section#content #formulaire{ width:100%;}
	body#contact section#content #formulaire{ padding:80px 0;}
	body#contact footer{ height:auto;}
}
@media only screen and (max-width : 899px) {
	
	html, body{ font-size:55%;}
	
	header a#logo{ width: 80px; padding: 20px 10px 0;}
	header a{ padding:0 9px; letter-spacing:-0.035rem; font-size:1.4rem;}
	
	section#titre h1{ padding-right:4%;}
	section#content p, section#content h2.interne, section#content span.tiret, section#content div.image-interne{ width:66%; margin-right:4%;}
	section#content div.image, footer{ padding-left:4%; padding-right:4%;}
	body#contact section#content, body#contact footer{ width:92%; margin:0 4%;}
	
	section#accueil img{ width:38%;}
	body#contact footer div#bottom p{ width:100%; text-align:center;}
	body#contact footer div#bottom p a, body#contact footer div#bottom p span{ display:inline-block; float:none;}
	body#contact footer div#bottom p a{ padding:0 18px;}
	body#contact footer div#bottom p.gauche a{ padding-right:0;}
	section#temoignages article p{ font-size:1.6rem;}
	section#temoignages article p, section#temoignages article span{ line-height:2.7rem;}
}
@media only screen and (max-width : 799px) {
	
	html, body{ font-size:54%;}
	
	header{ height:60px;}
	header nav, #home header nav.violet{ height:60px;}
	#home header nav{ height:0; background:none;}
	#home header nav.violet, header nav.violet{ height:100%; background-color:#302683;}
	header a{
		display:none;
		width:100%;
		height: 10vh !important;
		line-height: 10vh !important;
		color:#fff;
		text-align:center;
		font-size:2.1rem;
		border-bottom:1px solid #2a2173;
	}
	header a#logo{ display:block; width:100%; height:60px !important; padding:0 60px 0 0; background:url('../img/nav-cocoon-avocats.png') no-repeat top center; border:none;}
	header nav.violet a#logo{ background-color:#2a2173;}
	#home header nav.violet a#logo{ display:inline-block;}
	
	header a#telephone{ background-position:center;}
	#ouvrir{ display:block;}
	
	footer nav{ width:25%;}
	footer div.coordonnees{ min-width:25%;}
	
	section#accueil div#cocoon{ top:25%;}
	section#accueil h1{ top:60%;}
	section#accueil a#decouvrir{ top:80%; margin:-50px 0 0 -50px; width: 100px; height: 100px; font-size:1.4rem; line-height: 100px; background: url('../img/decouvrir-mobile.png') no-repeat center center;}
	section#accueil img{ width:40%;}
	section#titre h1{ padding-left:4%; text-align:center;}
	
	section#articles{ padding:0 10%;}
	section#articles article{ width:100%;}
	section#temoignages article p{ font-size:1.5rem;}
	section#temoignages article p, section#temoignages article span{ line-height:2.4rem;}
	section#partenaires article{ width:33.3%;}
	section#partenaires article.droite{ clear:both;}
	section#partenaires article.premier{ clear:none;}
}
@media only screen and (max-width : 699px) {
	
	section#accueil img{ width:45%;}
	
	section#titre h1, section#titre h1 span, body#contact section#content h1, body#contact section#content h1 span{ font-size:4.4rem; line-height:normal;}
	section#content h2{ width:100%; padding:0 0 0 5%; text-align:left; text-transform:uppercase; font-size:1.8rem;}
	section#content p, section#content span.tiret, section#content h2.interne, section#content div.image-interne{ float:left; width:100%; padding-left:5%; padding-right:5%;}
	section#content h2.premier{ padding-top:40px;}
	section#content h2#page, section#content p#slogan{ width:auto; padding-bottom:10px;}
	section#content p#slogan{ margin:0; padding:4px 0 40px 15px; font-weight:400; line-height:normal;}
	section#content span.tiret-mobile{ display:block; padding:20px 5%;} 
	section#content span.tiret-mobile span{ margin:0; width:40px;}
	section#content .violet span.tiret-mobile span{ background:#fff;}
	section#content div.image, footer{ padding-left:5%; padding-right:5%;}
	section#content nav#sousmenu{ width:100%; margin:-20px 0 0; padding:0 5% 30px; text-align:left;}
	section#content nav#sousmenu a{ width:auto; padding:0 0 5px 0; margin:0 20px 5px 0; font-size:1.6rem; letter-spacing:-0.02rem; border-bottom:1px solid #fff;}
	section#content nav#sousmenu a:hover{ padding:0 0 5px 0; border-bottom:1px solid #000;}
	section#content h2.pack{ padding:0 5% 40px; text-align:center;}
	section#content span.large{ text-align:center;}
	section#content span.large span{ margin:35px 0 75px; float:none; display:inline-block; max-width:67%;}
	body#contact section#content, body#contact footer{ width:90%; margin:0 5%;}
	body#contact section#content #reseaux{ text-align:right;}
	
	section#temoignages{ padding:0 10%;}
	section#temoignages article{ width:100%;}
	section#temoignages article p{ font-size:1.7rem;}
	section#temoignages article p, section#temoignages article span{ line-height:3rem;}
}
@media only screen and (max-width : 599px) {
	
	html, body{ font-size:53%;}
	
	header a#logo{ background-image:url('../img/nav-cocoon.png');}
	footer{ padding-top:160px;}
	footer nav a#typo{ padding-right:0;}
	footer div.coordonnees{ min-width:auto; width:50%;}
	footer div.coordonnees a, footer div.coordonnees span{ padding-right:0;}
	footer div.droite{ padding-top:0 !important; width:100%;}
	footer div.droite span.vide{ display:none;}
	footer div#bottom{ padding-right:0;}
	footer div#reseaux{ margin:5px 0 15px;}
	footer div#bottom p{ width:100%; text-align:center;}
	footer div#bottom p a, footer div#bottom p.droite a, footer div#bottom p.droite span{ display:inline-block; float:none;}
	footer div#bottom p.droite a.droite, footer div#bottom p.droite a.gauche{ padding:0 10px;}
	section#accueil img{ width:50%;}
	section#accueil h1{ font-size:3rem;}
	section#accueil h1 span{ font-size:4.4rem;}
	section#titre h1, section#titre h1 span, body#contact section#content h1, body#contact section#content h1 span{ font-size:4rem;}
	section#content p span.bull{ padding-left:35px;}
	section#content span.large span{ margin:10px 0 50px;}
	body#contact section#content #adresses{ width:50%;}
	body#contact section#content #reseaux{ width:20%;}
	section#temoignages, section#articles{ padding:0 5%;}
	section#partenaires article.troisieme{ clear:both;}
	section#partenaires article.droite{ clear:none;}
}
@media only screen and (max-width : 499px) {
	
	footer nav{ width:30%;}
	footer nav, ooter div.coordonnees{ width:50%;}
	footer div#reseaux{ margin:0 0 10px;}
	footer div#bottom p{ height:auto;}
	footer div#bottom p span{ width:20px;}
	footer div#bottom p.droite a{ padding:0 10px;}
	footer div#bottom p.gauche a, footer div#bottom p.gauche span{ display:none;}
	section#accueil img{ width:57%;}
	section#accueil h1{ font-size:2.8rem;}
	section#accueil h1 span{ font-size:4.2rem;}
	section#titre h1, section#titre h1 span, body#contact section#content h1, body#contact section#content h1 span{ font-size:3.6rem;}
	section#content p span.bull{ padding-left:30px;}
	section#content p span.option, section#content p span.tarif, section#content p span.forfait{ width:100%;}
	section#content p span.tarif{ text-align:left; padding:0 0 20px 30px; font-style:italic;}
	body#contact footer div#bottom p.droite{ height:auto; line-height:normal;}
	body#contact footer div#bottom p.droite a.gauche{ width:100%; text-align:center;}
	body#contact footer div#bottom p.droite span.display{ display:none;}
	body#contact footer div#bottom p.gauche{ line-height:normal; padding-top:10px;}
	body#contact footer div#bottom p.gauche a{ width:100%; padding:0;}
	body#contact footer div#bottom p.gauche span{ display:none;}
	body#contact section#content{ padding-top:100px;}
	body#contact section#content h1{ padding-bottom:30px;}
	body#contact section#content #formulaire{ padding:40px 0;}
	body#contact section#content #numeros{ width:50%;}
	body#contact section#content #reseaux{ width:100%; text-align:left; padding-top:20px;}
}
@media only screen and (max-width : 399px) {
	
	html, body{ font-size:52%;}
	
	section#content p, section#content span.tiret, section#content h2.interne, section#content div.image-interne, section#content nav#sousmenu, section#content h2{ padding-left:6%; padding-right:6%;}
	footer div#bottom p.droite, footer div#bottom p.gauche{ text-align:left;}
	footer div#bottom p.droite a.gauche, footer div#bottom p.droite a.droite, footer div#bottom p.droite a{ padding:0;}
	footer div#bottom p.droite span{ width:20px;}
	footer div#bottom p.droite span.display{ display:none;}
	section#accueil img{ width:67%;}
	section#accueil h1{ font-size:2.8rem;}
	section#accueil h1 span{ font-size:3.6rem; line-height:3.6rem; padding-top:5px;}
	section#titre h1, section#titre h1 span, body#contact section#content h1, body#contact section#content h1 span{ font-size:2.8rem;}
	section#content p span.bull, section#content p span.tarif{ padding-left:25px;}
	body#contact section#content #adresses{ width:100%;}
	body#contact section#content #numeros{ width:60%; padding-top:20px;}
	body#contact section#content #reseaux{ width:40%;}
	body#contact section#content #reseaux{ text-align:right;}
	a#credits{ display:none;}
}
@media only screen and (max-width : 299px) {
	
	html, body{ font-size:50%;}
	
	section#accueil img{ width:75%;}
	section#temoignages{ padding:0 3%;}
	section#temoignages article p{ font-size:1.5rem;}
	section#temoignages article p, section#temoignages article span{ line-height:2.4rem;}
	section#partenaires article{ width:100%; padding:0 10%;}
}

/* MIN HEIGHT */

@media only screen and (max-height : 799px) {
	
	section#titre{ height:800px;}
	section#titre h1{ bottom:420px;}
	body#contact section#content #formulaire p{ padding:10px 2%;}
}
@media only screen and (max-height : 749px) {
	
	
	body#contact section#content #formulaire input, body#contact section#content #formulaire textarea{ height:40px; line-height:40px; font-size:1.6rem;}
	body#contact section#content #formulaire textarea{ height:160px; line-height:normal;}
	body#contact section#content #formulaire p{ font-size:1.6rem; line-height:2rem;}
}
@media only screen and (max-height : 699px) {
	
	section#titre{ height:700px;}
	section#titre h1{ bottom:400px;}
	
	body#contact section#content #formulaire textarea{ height:120px;}
	body#contact section#content #formulaire p{ padding:8px 2%; font-size:1.5rem; line-height:1.9rem;}
}
@media only screen and (max-height : 599px) {
	
	section#titre{ height:600px;}
	section#titre h1{ bottom:380px;}
	
	body#contact section#content, body#contact footer{
		position:relative;
		float:left;
		bottom:auto;
	}
	body#contact section#content{ padding:180px 0 0;}
	body#contact section#content #gauche, body#contact section#content #formulaire{ width:100%;}
	body#contact section#content #formulaire{ padding:80px 0;}
	body#contact section#content #formulaire p{ padding:15px 2%; font-size:1.6rem; line-height:normal;}
}

@media only screen and (max-height : 499px) {
	
	a#credits{ display:none;}
}

@media only screen and (max-height : 399px) {
	
}

@media only screen and (max-height : 299px) {
	
}


/* TRANSITIONS */

.t20{-webkit-transition: all 0.2s cubic-bezier(0.86, 0, 0.07, 1);-moz-transition: all 0.2s cubic-bezier(0.86, 0, 0.07, 1); -ms-transition: all 0.2s cubic-bezier(0.86, 0, 0.07, 1); -o-transition: all 0.2s cubic-bezier(0.86, 0, 0.07, 1); transition: all 0.2s cubic-bezier(0.86, 0, 0.07, 1);}
.t33{-webkit-transition: all 0.33s cubic-bezier(0.86, 0, 0.07, 1);-moz-transition: all 0.33s cubic-bezier(0.86, 0, 0.07, 1); -ms-transition: all 0.33s cubic-bezier(0.86, 0, 0.07, 1); -o-transition: all 0.33s cubic-bezier(0.86, 0, 0.07, 1); transition: all 0.33s cubic-bezier(0.86, 0, 0.07, 1);}
.t50{-webkit-transition: all 0.5s cubic-bezier(0.86, 0, 0.07, 1);-moz-transition: all 0.5s cubic-bezier(0.86, 0, 0.07, 1); -ms-transition: all 0.5s cubic-bezier(0.86, 0, 0.07, 1); -o-transition: all 0.5s cubic-bezier(0.86, 0, 0.07, 1); transition: all 0.5s cubic-bezier(0.86, 0, 0.07, 1);}


/* FONTS  https://fonts.googleapis.com/css?family=PT+Sans:400,400i,700,700i */

/* cyrillic-ext */
@font-face {
  font-family: 'PT Sans';
  font-style: normal;
  font-weight: 400;
  src: local('PT Sans'), local('PTSans-Regular'), url(https://fonts.gstatic.com/s/ptsans/v8/fhNmDCnjccoUYyU4ZASaLVKPGs1ZzpMvnHX-7fPOuAc.woff2) format('woff2');
  unicode-range: U+0460-052F, U+20B4, U+2DE0-2DFF, U+A640-A69F;
}
/* cyrillic */
@font-face {
  font-family: 'PT Sans';
  font-style: normal;
  font-weight: 400;
  src: local('PT Sans'), local('PTSans-Regular'), url(https://fonts.gstatic.com/s/ptsans/v8/BJVWev7_auVaQ__OU8Qih1KPGs1ZzpMvnHX-7fPOuAc.woff2) format('woff2');
  unicode-range: U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* latin-ext */
@font-face {
  font-family: 'PT Sans';
  font-style: normal;
  font-weight: 400;
  src: local('PT Sans'), local('PTSans-Regular'), url(https://fonts.gstatic.com/s/ptsans/v8/oysROHFTu1eTZ74Hcf8V-VKPGs1ZzpMvnHX-7fPOuAc.woff2) format('woff2');
  unicode-range: U+0100-024F, U+1E00-1EFF, U+20A0-20AB, U+20AD-20CF, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'PT Sans';
  font-style: normal;
  font-weight: 400;
  src: local('PT Sans'), local('PTSans-Regular'), url(https://fonts.gstatic.com/s/ptsans/v8/CWlc_g68BGYDSGdpJvpktgLUuEpTyoUstqEm5AMlJo4.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2212, U+2215, U+E0FF, U+EFFD, U+F000;
}
/* cyrillic-ext */
@font-face {
  font-family: 'PT Sans';
  font-style: normal;
  font-weight: 700;
  src: local('PT Sans Bold'), local('PTSans-Bold'), url(https://fonts.gstatic.com/s/ptsans/v8/kTYfCWJhlldPf5LnG4ZnHAsYbbCjybiHxArTLjt7FRU.woff2) format('woff2');
  unicode-range: U+0460-052F, U+20B4, U+2DE0-2DFF, U+A640-A69F;
}
/* cyrillic */
@font-face {
  font-family: 'PT Sans';
  font-style: normal;
  font-weight: 700;
  src: local('PT Sans Bold'), local('PTSans-Bold'), url(https://fonts.gstatic.com/s/ptsans/v8/g46X4VH_KHOWAAa-HpnGPgsYbbCjybiHxArTLjt7FRU.woff2) format('woff2');
  unicode-range: U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* latin-ext */
@font-face {
  font-family: 'PT Sans';
  font-style: normal;
  font-weight: 700;
  src: local('PT Sans Bold'), local('PTSans-Bold'), url(https://fonts.gstatic.com/s/ptsans/v8/hpORcvLZtemlH8gI-1S-7gsYbbCjybiHxArTLjt7FRU.woff2) format('woff2');
  unicode-range: U+0100-024F, U+1E00-1EFF, U+20A0-20AB, U+20AD-20CF, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'PT Sans';
  font-style: normal;
  font-weight: 700;
  src: local('PT Sans Bold'), local('PTSans-Bold'), url(https://fonts.gstatic.com/s/ptsans/v8/0XxGQsSc1g4rdRdjJKZrNAzyDMXhdD8sAj6OAJTFsBI.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2212, U+2215, U+E0FF, U+EFFD, U+F000;
}
/* cyrillic-ext */
@font-face {
  font-family: 'PT Sans';
  font-style: italic;
  font-weight: 400;
  src: local('PT Sans Italic'), local('PTSans-Italic'), url(https://fonts.gstatic.com/s/ptsans/v8/GpWpM_6S4VQLPNAQ3iWvVYX0hVgzZQUfRDuZrPvH3D8.woff2) format('woff2');
  unicode-range: U+0460-052F, U+20B4, U+2DE0-2DFF, U+A640-A69F;
}
/* cyrillic */
@font-face {
  font-family: 'PT Sans';
  font-style: italic;
  font-weight: 400;
  src: local('PT Sans Italic'), local('PTSans-Italic'), url(https://fonts.gstatic.com/s/ptsans/v8/7dSh6BcuqDLzS2qAASIeuoX0hVgzZQUfRDuZrPvH3D8.woff2) format('woff2');
  unicode-range: U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* latin-ext */
@font-face {
  font-family: 'PT Sans';
  font-style: italic;
  font-weight: 400;
  src: local('PT Sans Italic'), local('PTSans-Italic'), url(https://fonts.gstatic.com/s/ptsans/v8/DVKQJxMmC9WF_oplMzlQqYX0hVgzZQUfRDuZrPvH3D8.woff2) format('woff2');
  unicode-range: U+0100-024F, U+1E00-1EFF, U+20A0-20AB, U+20AD-20CF, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'PT Sans';
  font-style: italic;
  font-weight: 400;
  src: local('PT Sans Italic'), local('PTSans-Italic'), url(https://fonts.gstatic.com/s/ptsans/v8/PIPMHY90P7jtyjpXuZ2cLJBw1xU1rKptJj_0jans920.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2212, U+2215, U+E0FF, U+EFFD, U+F000;
}
/* cyrillic-ext */
@font-face {
  font-family: 'PT Sans';
  font-style: italic;
  font-weight: 700;
  src: local('PT Sans Bold Italic'), local('PTSans-BoldItalic'), url(https://fonts.gstatic.com/s/ptsans/v8/lILlYDvubYemzYzN7GbLkA7aC6SjiAOpAWOKfJDfVRY.woff2) format('woff2');
  unicode-range: U+0460-052F, U+20B4, U+2DE0-2DFF, U+A640-A69F;
}
/* cyrillic */
@font-face {
  font-family: 'PT Sans';
  font-style: italic;
  font-weight: 700;
  src: local('PT Sans Bold Italic'), local('PTSans-BoldItalic'), url(https://fonts.gstatic.com/s/ptsans/v8/lILlYDvubYemzYzN7GbLkBdwxCXfZpKo5kWAx_74bHs.woff2) format('woff2');
  unicode-range: U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* latin-ext */
@font-face {
  font-family: 'PT Sans';
  font-style: italic;
  font-weight: 700;
  src: local('PT Sans Bold Italic'), local('PTSans-BoldItalic'), url(https://fonts.gstatic.com/s/ptsans/v8/lILlYDvubYemzYzN7GbLkIjoYw3YTyktCCer_ilOlhE.woff2) format('woff2');
  unicode-range: U+0100-024F, U+1E00-1EFF, U+20A0-20AB, U+20AD-20CF, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'PT Sans';
  font-style: italic;
  font-weight: 700;
  src: local('PT Sans Bold Italic'), local('PTSans-BoldItalic'), url(https://fonts.gstatic.com/s/ptsans/v8/lILlYDvubYemzYzN7GbLkBampu5_7CjHW5spxoeN3Vs.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2212, U+2215, U+E0FF, U+EFFD, U+F000;
}
c