/* By Diagnos'TIC Pierre Belleney */

html,body,article,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block;margin:0;padding:0}
h1,h2,h3,h4,h5,h6,ul,ol,li{margin:0;padding:0}

* {box-sizing:border-box /*Largeur de la boîte:variable de width="", même si on ajoute des padding et bordures.*/}

/* ====================================================================== TYPOGRAPHIE ======================================================================================== */
@font-face{font-family:'Bell Gothic Std'; src:url('../fonts/BellGothicStd-Bold.ttf')}
html{font-family:"Bell Gothic Std", Helvetica, Arial, sans-serif;hyphens:auto;word-wrap:break-word;word-spacing: 0.1em;widows:3;orphans:3;color:#666}

p {text-align:justify}
b{font-weight:700}
.text-left{text-align:left}
.text-right{text-align:right}
.text-center{text-align:center}
ul,ol{margin:0;padding:0}
.list-unstyled{list-style:none}

h1,h2,h3,h4,h5,h6{font-weight:300}
h1{font-size:2.2em}
h2{font-size:1.8em}
h3{font-size:1.6em}
h4{font-size:1.4em}
h5{font-size:1.2em}
h6{font-size:1.1em}
h7{font-size:0.5em}

/* ====================================================================== Couleurs ======================================================================================== */
.mauve1-bg{background-color:#9a1b62}
.mauve2-bg{background-color:#9f479e}
.mauve3-bg{background-color:#7e0ac9}
.orange-bg{background-color:#f6863e}
.jaune-bg{background-color:#eccc2c}
.bleu-bg{background-color:#0099cc}

.mauve1-color{color:#9a1b62}
.mauve2-color{color:#9f479e}
.mauve3-color{color:#7e0ac9}
.orange-color{color:#f6863e}
.jaune-color{color:#eccc2c}
.bleu-color{color:#0099cc}
.white-color{color:#fff}
/* ===================================================================== LINKS ================================================================= */
a{text-decoration:none;color:#f6863e}
a:hover{color:#9f479e}

.menuitem>li a{font-size:1.2em;padding:64px 8px 24px;color:#eee}
.menuitem>li a:hover{background-color:#eee;color:#9f479e}

.links{padding:8px 16px}
.links:hover{background-color:#eee;color:#9a1b62}

button,input{cursor:pointer}

/* ================================================================= ANIMATIONS ================================================================================== */

.drop-list-icon,.social-network>li a,.menuitem>li a,.home{transition:background-color .6s ease}
/*======================================== SHADOWS ===================================================================*/
.shadow{box-shadow:0 8px 8px 0 #aaa}
.shadow-inset{box-shadow:inset 0 8px 8px 4px #aaa}
.menuitem>li a,.social-network>li a,.home,#pro_formation .drop-list-icon{box-shadow:0 4px 2px 0 #aaa}

/*======================================== BLOCS (0,1666666=1px) ===================================================================*/
.center{margin-left:auto;margin-right:auto;text-align:center}
.pull-right{float:right}
.pull-left{float:left}

.img-responsive{display:block;height:auto;max-width:100%}

.menuitem>li a,#mm img,#mm div:first-child p,#contact div,#mentions-legales div,.links{border-top-left-radius:30%;border-bottom-right-radius:30%}

header,header h1,header h2,header ul{position:fixed;z-index:11}
header{width:100vw;top:0;height:80px;border-bottom-left-radius:10%;background:-webkit-linear-gradient(left,#f1e5ee,white);background:-o-linear-gradient(left,#f1e5ee,white);background:-moz-linear-gradient(left, #f1e5ee,white);background:linear-gradient(to right,#f1e5ee,white)}
header h1,header h2{left:14vw;color:#ddd}
header h1{top:48px}
header h2{top:80px}
header ul>li{display:inline-block}
#pro-formation header{height:200px;background:-webkit-linear-gradient(left,white,white);background:-o-linear-gradient(left,white,white);background:-moz-linear-gradient(left, white,white);background:linear-gradient(to right,white,white)}
#pro-formation h1{padding-top:6vh}
#pro-formation h3{font-size:1em;padding-bottom:6vh}
@media (min-width:1024px) {
	.hidden{visibility: hidden}
	}
/*=============================================== VOLET =====================================================================*/
/*http://www.alsacreations.com/tuto/lire/1234-creer-volet-coulissant-CSS3-target-transition.html*/
#volet {position:absolute;left:-100%;top:18vh;width:100%;height:82vh;display:table;z-index:3;-webkit-transition:all .5s ease-in;-moz-transition:all .5s ease-in;transition:all .5s ease-in;background-color:#fff;font-size:1.6em;padding:28vh 4vw 4vh 4vw;text-align:right}
#volet:target {left:0px}

.social-network{right:8px;top:4px}
.social-network img,.social-network>li a{border-radius:50%}
.social-network img{vertical-align:middle}
.social-network>li {height:64px;line-height:64px}
.social-network>li a {background-color:white;padding:12px}
.social-network>li a:hover{background-color:#eee}

.menuitem{top:28vh;right:8px}

.row-vertical{padding-top:26vh;width:100vw;left:0;height:100vh;line-height:74vh;text-align:center}

[class*="bloc-"]{display:inline-block;vertical-align:middle;line-height:normal;padding:32px}
.bloc-4{width:4vw}.bloc-8{width:8vw}.bloc-12{width:12vw}.bloc-16{width:16vw}.bloc-20{width:20vw}.bloc-24{width:24vw}.bloc-28{width:28vw}.bloc-32{width:32vw}.bloc-36{width:36vw}.bloc-40{width:40vw}.bloc-44{width:44vw}.bloc-48{width:48vw}.bloc-52{width:52vw}.bloc-56{width:56vw}.bloc-60{width:60vw}.bloc-64{width:64vw}.bloc-68{width:68vw}.bloc-72{width:72vw}.bloc-76{width:76vw}.bloc-80{width:80vw}.bloc-84{width:84vw}

/* ================================================================= Qui suis-je ===========================================================================================*/
#mm div:first-child p{padding-top:2vh;padding-bottom:2vh}
#mm div:nth-child(2){padding-left:9vw}
/* ================================================================= Psychologue ===========================================================================================*/
#psychologue h3{text-align:left}
#psychologue li{text-align:left}
#psychologue .circle {list-style-type:circle;padding-left:4em;padding-right:2em;font-size:.9em}
/* ================================================================= formatrice ===========================================================================================*/
.drop-list{display:table;height:40px;margin-top:16px}
.drop-list-icon{display:table-cell;position:relative;width:40px;height:40px;border-radius:50%}
.drop-list-icon:hover{background-color:#9f479e}
.drop-list p{display:table-cell;vertical-align:middle;padding-left:16px}

/* ================================================================= CONTACT ===========================================================================================*/

.cloud-a{display:block;height:52px;line-height:64px;font-size:1.6em}
.cloud-b{font-size:1.5em;text-shadow:2px 2px #eccc2c;border-radius:50%}
.cloud-p{font-size:4em;text-shadow:2px 2px #eccc2c;border-radius:50%}
.cloud-p:hover{background-color:#eccc2c;font-size:4em;text-shadow:2px 2px #f6863e}
.cloud-h3{font-size:17em;text-shadow:2px 2px #eccc2c}

.shared-links-list{margin-top:6vh}
#links .row-vertical{background:-webkit-linear-gradient(top,#fff,#f6863e,#eccc2c);background:-o-linear-gradient(top,#fff,#f6863e,#eccc2c);background: -moz-linear-gradient(top,#fff,#f6863e,#eccc2c);background:linear-gradient(to bottom,#fff 5%,#eccc2c)}
#links .row-vertical .bloc-60,#links .row-vertical .bloc-36{margin:0;padding:0}
.shared-links a{display:block;line-height:32px;font-size:2.4em;margin-bottom:2vh;padding:8px;letter-spacing:-3px;}
.shared-links a:hover{font-size:1.8em;}

.copyright{background:-webkit-linear-gradient(left,#fff,#f6863e,#eccc2c);background:-o-linear-gradient(left,#fff,#f6863e,#eccc2c);background: -moz-linear-gradient(left,#fff,#f6863e,#eccc2c);background:linear-gradient(to right,#fff 60%,#eccc2c)}
.copyright{position:fixed;width:100vw;bottom:0;height:24px;line-height:8px;font-size:0.8em;background:-webkit-linear-gradient(left,#fff,#f6863e,#eccc2c);background:-o-linear-gradient(left,#fff,#f6863e,#eccc2c);background: -moz-linear-gradient(left,#fff,#f6863e,#eccc2c);background:linear-gradient(to right,#fff 60%,#eccc2c)}
.copyright p{text-align:left;padding-left:38vw}
.copyright a:hover{color:#666}

#localisation iframe{width:80vw}

#send-mail form{max-width:320px}
#send-mail input,#send-mail textarea,#send-mail button,#send-mail p{width:254px}
.required{cursor:none}
/*======================================== RETOUR ACCUEIL ===================================================================*/
.home{position:fixed;bottom:4px;right:8px;height:48px;line-height:4px;padding:12px 8px;border-radius:50%;color:#eee;font-size:8em}
.home:hover{background-color:#f6863e;color:#eee}

/*======================================== MEDIA QUERIES ===================================================================*/
@media (min-width:1920px) {
	.copyright p{text-align:left;padding-left:37vw}
	}
@media (max-width:1280px) {
    header h1,header h2{left:14.5vw}
	}
@media (max-width:1024px) {
    header h1,header h2{left:18.5vw}
	}
@media (max-width:1023px) {
	.row-vertical{text-align:left;line-height:normal}
	[class*="bloc-"]{width:100vw;margin-bottom:1vh}
	#send-mail{text-align:center}
	.menuitem{visibility: hidden}
	.hidden{font-size:1.2em}
	#pro_formation h1{text-align:right}
	#pro-formation #volet {top:48vh}
	#links .row-vertical .bloc-36{background-color:#f6863e;}
	.cloud-h3{font-size:12em}
	}
@media (max-width:980px) {
    header h1,header h2{left:19vw}
	h3{text-align:right}
	.copyright p{text-align:center;padding-left:0}
	}
@media (max-width:800px) {
    header h1,header h2{left:23vw}
	}
@media (max-width:768px) {
    header h1,header h2{left:24vw}
	header{border-bottom-left-radius:0}
	.social-network{top:4px}
	.social-network>li {height:60px;line-height:60px}
	}
@media (max-width:640px) {
    header h1,header h2{left:26vw;font-size:1.8em}
	}
@media (max-width:480px) {
	.drop-list{height:32px;margin-top:8px}
	.drop-list-icon{width:32px;height:32px}
	.row-vertical{line-height:normal;text-align:left;margin:0}
    header h1,header h2{left:26vw;font-size:1.1em}
	header{height:40px}
    header h1{top:36px}
    header h2{top:52px}
	.social-network>li {height:32px;line-height:32px}
	.social-network>li a {padding:4px 8px}
	#psychologue .circle {padding-left:16px;padding-right:0}
	}
@media (max-width:360px) {
	[class*="bloc-"]{font-size:.8em}
	.copyright{bottom:0;height:24px;line-height:8px}
	}
	
@media (max-width:360px) {
	.shared-links a{font-size:1.6em}
	}
@media (max-width:240px) {
    header h1{top:32px;left:24vw;font-size:.8em}
    header h2{display:none}
	.home,.social-network{right:2px}
	.social-network>li {height:24px;line-height:24px}
	.social-network>li a {padding:2px 4px}
	#send-mail{text-align:left;padding:0;margin:0;width:240px}
	#send-mail form{width:240px;padding:0;margin:0;width:240px}
	.cloud-h3{font-size:8em}
	.shared-links a{font-size:1.4em}
	.shared-links a:hover{font-size:1.2em}
	}