/*----------------------------- Importation ---*/

	@font-face{
		src:url();
		font-family: ;
	}
/*--------------------------------- Général ---*/

	*{
		padding: 0;
		margin: 0;
		box-sizing: border-box;
		object-fit: cover;
		font-family: 'Dosis', sans-serif;
	}

	body{
		background-color: #fff;
		overflow: hidden;
	}

	main{
	}

	a{
		text-decoration: none;
		color: #111111;
	}
/*---------------------------------- Header ---*/
	header{
		text-align: center;
		background-color: #5f8fd3;
		width: 100vw;
		height: 100vh;
	}

	.suite{
		transition: 1s;
		height: 25vh;
	}

	.logoc{
		position: absolute;
		height: 100vh;
		width: 50vw;
		left: 25vw;
		z-index: 6;
	}

	.logop{
		height: 100vh;
		width: 50vw;
		z-index: 2;
	}

	svg .svg-elem-1 {
		stroke-dashoffset: 3572.275634765625px;
		stroke-dasharray: 3572.275634765625px;
		fill: transparent;
		transition: stroke-dashoffset 2s cubic-bezier(0.47, 0, 0.745, 0.715) 0s,
	           		fill 0.7s cubic-bezier(0.47, 0, 0.745, 0.715) 0.8s;
	}

	svg .svg-elem-2 {
		stroke-dashoffset: 0;
		fill: rgba(255, 255, 255, 0);
	}

	.fin-c{
		display: none;
		top: -100vw;
	}

	.suite-p{
		transition: 1s;
		width: 15vw;
		height: 15vw
	}

	header .intro1{
		height: 100vh;
		width: 150vw;
		z-index: 5;
		position: absolute;
		left: 0;
		top:0;
		transition: 5s;
	}
	header .intro2{
		height: 100vh;
		width: 150vw;
		z-index: 4;
		position: absolute;
		left: 0;
		top:0;
		transition: 7s;
	}
	header .intro3{
		height: 100vh;
		width: 150vw;
		z-index: 3;
		position: absolute;
		left: 0;
		top:0;
		transition: 8s;
	}

	header .introm{
		left: -150vw;
	}

	header img{
		width: 15vw;
	}

	header h1{
		height: 1vw;
		letter-spacing: 1vw;
	}
/*------------------------------------ Nav ---*/


/*---------------------------- Section fond ---*/
	.fond{
		background-color: #5f8fd3;
		background-image: url(images/nuage.png);
		height: 250px;
	}
/*--------------------------- Section bulle ---*/

/* 	.bulle{
	width: 100vw;
	max-height: 20vh;
	height: 100vh;
	margin: auto;
	transition: 1s;
	display: flex;
	justify-content: space-around;
	align-items: center;
} */

	.bprin a, .bpro a, .bperso a{
		transition: 1s;
		background-size: contain;
		background-repeat: no-repeat;		
	}

	.bulle11 a{
		background-image: url(images/icone/pro_alogo.png);
	}

	.bulle12 a{
		background-image: url(images/icone/pro_photoshop.png);
	}

	.bulle13 a{
		background-image: url(images/icone/pro_illustrator.png);
	}

	.bulle14 a{
		background-image: url(images/icone/pro_indesign.png);
	}

	.bulle15 a{
		background-image: url(images/icone/pro_html.png);
	}

	.bulle21 a{
		background-image: url(images/icone/perso_alogo.png);
	}

	.bulle22 a{
		background-image: url(images/icone/perso_photoshop.png);
	}

	.bulle23 a{
		background-image: url(images/icone/perso_illustrator.png);
	}

	.bulle24 a{
		background-image: url(images/icone/perso_premiere.png);
	}
	
	.image{
		opacity: 0;
		transition: 50ms;
	}	

	.image:hover{
		opacity: 1;
	}

	.image:target{
		opacity: 1;
	}

	.debut-b1{
		display: flex;
		width: 30vw;
		align-items: center;
		position: absolute;
		top:150vw;
		left: 20vw;
		padding-right: 3vw;
		transition: 1s;
		z-index: 1;
	}

	.debut-b2{
		display: flex;
		flex-direction: row-reverse;
		width: 30vw;
		position: absolute;
		top:150vw;
		right: 20vw;
		padding-left: 3vw;
		align-items: center;
		transition: 1s;
		z-index: 1;
	}

	.bulle h3,.bulle h4{
		text-align: center;
		letter-spacing: 1vw;
		font-size: 1.6em;
	}

	.bprin img{
		width: 15vw;
		transition: 1s;
	}

	.suite11{
		display: flex;
		width: 30vw;
		align-items: center;
		position: absolute;
		top:30vw;
		left: 20vw;
		padding-right: 3vw;
		transition: 1s;
		z-index: 1;
	}

	.bulle1 h3{
		-webkit-writing-mode: vertical-rl;
		-ms-writing-mode: vertical-rl;
		writing-mode: vertical-rl; 
		transform: rotate(180deg);
		padding-left: 50px;
		padding-bottom:1vw;
		width: 3vw;
		transition: 1s;
	}

	.suite21{
		display: flex;
		flex-direction: row-reverse;
		width: 30vw;
		position: absolute;
		top:30vw;
		right: 20vw;
		padding-left: 3vw;
		align-items: center;
		transition: 1s;
		z-index: 1;
	}

	.bulle2 h3{
		writing-mode: vertical-rl;
		padding-left: 50px;
		padding-top: 1vw;
		width: 3vw;
		transition: 1s;
	}

	.sousbulle{
		display: flex;
	}

	.sousbulle h4{
		font-size: 1.3em;
		padding-left: .8vw;
		letter-spacing: .8vw;
		font-weight: normal;
		padding-top: 1vw
	}

	.bpro,.bperso{
		width: 20vw;
		display: none;
		transition: 1s;
	}

	.bpro img,.bperso img{
		width: 10vw;
	}

	.bspectre{
		display: none;
	}

	.sbspectre{
		display: none;
	}

	.sbfantome{
		opacity: 0;
		padding-top: 4vw;
		width: 20vw;
		display: flex;
		flex-direction: column;
		align-items: center;
		position: absolute;
		left: 60vw;
		top:70vw;
		z-index: -1;
	}

	.sbfantome img{width: 10vw;}

	.tfantome{
		transition: 1s;
		top: 60vw;
	}
	/*------------------- Act pro ---*/

	.leader{
		max-height: 100vh;
	}

	.orbit1{
		z-index: 2;
		position: absolute;
		left: 34.5vw;
		top:40vw;
		transform: rotate(45deg)
	}

	.orbit1 a{
		transform: rotate(-45deg);		
	}

	.orbit1 img{
		width: 25vw;
		opacity: 1;
	}

	.lune1{
		right: 40.5vw;
		top:40vw;
		transform: rotate(-45deg)
	}

	.lune1 a{
		transform: rotate(45deg);
	}

	.lune1 img{
		width: 10vw;
	}

	.lune1 h3{
		font-size: .8em;
		letter-spacing: 10px;
		padding-top: 10px;
		padding-left:0;
		width: 2vw;
	}

	.satelite1{
		opacity: 0;
		display: flex;
		flex-direction: column;
		align-items: center;
		position: absolute;
		left: 40vw;
		top:45vw;
	}

	.s12{
		opacity: 100;
		left:17vw;
		top: 55vw;
	}

	.s13{
		opacity: 100;
		left:30vw;
		top: 70vw;		
	}

	.s14{
		opacity: 100;
		left: 50vw;
		top: 70vw;		
	}

	.s15{
		opacity: 100;
		left: 62vw;
		top: 55vw;
	}

	.s12 h4{
		margin-right: 7vw;
	}

	.s13 h4{
		margin-right: 3vw;
	}

	.s14 h4{
		margin-left: 3vw;
	}

	.s15 h4{
		margin-left: 7vw;
	}
	/*------------------- Act perso ---*/

	.orbit2{
		z-index: 2;
		position: absolute;
		right: 34.5vw;
		top:40vw;
		transform: rotate(-45deg)
	}

	.orbit2 a{
		transform: rotate(45deg);
	}

	.orbit2 img{
		width: 25vw;
		opacity: 1;
	}

	.lune2{
		left: 40.5vw;
		top:40vw;
		transform: rotate(45deg)
	}

	.lune2 a{
		transform: rotate(-45deg);
	}

	.lune2 img{
		width: 10vw;
	}

	.lune2 h3{
		font-size: .8em;
		letter-spacing: 10px;
		padding-top: 10px;
		padding-right:0;
		width: 2vw;
	}

	.satelite2{
		opacity: 0;
		display: flex;
		flex-direction: column;
		align-items: center;
		position: absolute;
		left: 40vw;
		top:45vw;
	}

	.s22{
		opacity: 100;
		left:20vw;
		top: 60vw;
	}

	.s23{
		opacity: 100;
		top: 70vw;		
	}

	.s24{
		opacity: 100;
		left: 60vw;
		top: 60vw;		
	}
	
	.s22 h4{
		margin-right: 7vw;
	}

	.s24 h4{
		margin-left: 7vw;
	}
/*---------------------------------- P vide ---*/

	footer{
		position: absolute;
		bottom: 0;
	}
/*------------------------------ Responsive ---*/

@media(max-width: 600px){

	body{
		overflow-y: visible;
	}

	.suite-p{
		transition: 1s;
		width: 30vw;
		height: 30vw
	}

	h1{
		margin: 0;
	}

	header .intro1{
		height: 100vh;
		width: 150vw;
		z-index: 5;
		position: absolute;
		left: 0;
		top:0;
		transition: 5s;
	}
	header .intro2{
		margin-top: 50vh;
		height: 50vh;
		width: 150vw;
		z-index: 4;
		position: absolute;
		left: 0;
		top:0;
		transition: 7s;
	}
	header .intro3{
		height: 50vh;
		width: 150vw;
		z-index: 3;
		position: absolute;
		left: 0;
		top:0;
		transition: 8s;
	}

	header .introm{
		left: -200vw;
	}

	.bprin img{
		width: 60vw;
	}

	.debut-b1{
		display: flex;
		width: 30vw;
		align-items: center;
		position: absolute;
		top:200vw;
		left: 11vw;
		padding-right: 3vw;
		transition: 1s;
		z-index: 1;
	}

	.debut-b2{
		display: flex;
		flex-direction: row-reverse;
		width: 30vw;
		position: absolute;
		top:265vw;
		right: 11vw;
		padding-left: 3vw;
		align-items: center;
		transition: 1s;
		z-index: 1;
	}

	.bulle h3,.bulle h4{
		text-align: center;
		letter-spacing: 1vw;
		font-size: 1.6em;
	}

	.bprin img{
		width: 50vw;
		transition: 1s;
	}

	.suite11{
		display: flex;
		width: 30vw;
		align-items: center;
		position: absolute;
		top:50vw;
		left: 11vw;
		padding-right: 3vw;
		transition: 1s;
		z-index: 1;
	}

	.bulle1 h3{
		-webkit-writing-mode: vertical-rl;
		-ms-writing-mode: vertical-rl;
		writing-mode: vertical-rl; 
		transform: rotate(180deg);
		padding-left: 50px;
		padding-bottom:1vw;
		width: 3vw;
		transition: 1s;
	}

	.suite21{
		display: flex;
		flex-direction: row-reverse;
		width: 30vw;
		position: absolute;
		top:115vw;
		right: 11vw;
		padding-left: 3vw;
		align-items: center;
		transition: 1s;
		z-index: 1;
	}

	.bulle2 h3{
		writing-mode: vertical-rl;
		padding-left: 50px;
		padding-top: 1vw;
		width: 3vw;
		transition: 1s;
	}

	.sousbulle{
		display: flex;
	}

	.sousbulle h4{
		font-size: 1.3em;
		padding-left: .8vw;
		letter-spacing: .8vw;
		font-weight: normal;
		padding-top: 1vw
	}

	.bpro,.bperso{
		width: 20vw;
		display: none;
		transition: 1s;
	}

	.bpro img,.bperso img{
		width: 25vw;
	}
	/*------------------- Act pro ---*/

	.orbit1{
		left: 17vw;
		top:60vw;
	}

	.lune1{
		top:220vw;
		transform: rotate(0deg);
	}

	.lune1 a{
		transform: rotate(0deg);
	}

	.satelite1{
		opacity: 0;
		display: flex;
		flex-direction: column;
		align-items: center;
		position: absolute;
		left: 40vw;
		top: 90vw;
	}

	.s12{
		opacity: 100;
		left:10vw;
		top: 130vw;
	}

	.s13{
		opacity: 100;
		left:20vw;
		top: 170vw;		
	}

	.s14{
		opacity: 100;
		left: 60vw;
		top: 170vw;		
	}

	.s15{
		opacity: 100;
		left: 70vw;
		top: 130vw;
	}
	/*------------------- Act perso ---*/

	.orbit2{
		right: 17vw;
	}

	.lune2{
		transform: rotate(0deg)
	}

	.lune2 a{
		transform: rotate(0deg);
	}

	.satelite2{
		opacity: 0;
		display: flex;
		flex-direction: column;
		align-items: center;
		position: absolute;
		left: 40vw;
		top:150vw;
	}

	.s22{
		opacity: 100;
		left:10vw;
		top: 190vw;
	}

	.s23{
		opacity: 100;
		top: 230vw;		
	}

	.s24{
		opacity: 100;
		left: 70vw;
		top: 190vw;		
	}
}