body
{
width:100%;
height:100%;
margin:0;
padding:0;
font-family: 'Recursive', sans-serif;
color:#404040;
background-color:#fefefe;
font-size:11pt
}

#fen div
{
border-radius:5px;
border:1px solid #efefef;
box-shadow: 0px 7px 18px -9px rgba(0,0,0,1);
-webkit-box-shadow: 0px 7px 18px -9px rgba(0,0,0,1);
-moz-box-shadow: 0px 7px 18px -9px rgba(0,0,0,1);
}

p
{
text-align:justify
}

#fen
{
position:fixed;
top:50%;
left:50%;
transform:translate(-50%,-50%);
z-index:101;
max-width:80%;
background-color:#fefefe;
text-align:center
}

.app button
{
cursor:pointer
}

a{
text-decoration:none;
color:#404040
}

div, p
{
box-sizing:border-box;
}

.top_ban_desk
{
position:fixed;
top:0;
left:0;
width:100%;
padding:10px;
color:#fefefe;
background-color:#549cd5;
font-size:10pt;
font-weight:300;
z-index:100;
}

.top_ban_desk img
{
vertical-align:middle;
height:15px;
margin:0 5px 0 25px;
}

.top_ban_desk span
{
cursor:pointer	
}

.top_ban_desk a, .footer a, button a
{
color:#fefefe
}

.menu_desk
{
position:fixed;
top:65px;
left:20px;
z-index:100;
}

.ico_menu_desk img
{
width:50px;
margin:0 0 0 40px;
cursor:pointer
}

.nav_menu_desk
{
margin:25px 0 0 0;
padding:35px 35px 15px 55px;
border-right:1px solid #efefef;
border-bottom:1px solid #efefef;
border-bottom-right-radius:15px;
border-top-right-radius:15px;
text-align:left;
background-color:#fefefe;
}

.logo-menu
{
height:50px;
display:block;
margin:auto
}

.nav_menu_desk span
{
display:block;
text-align:center;
margin:10px 0;
width:100%;
font-family: 'Montserrat', sans-serif;
}
	
.nav_menu_desk ul
{
margin:20px 0;
padding:0;
}

.nav_menu_desk ul li
{
list-style-type:none;
margin:15px 0;
padding:5px 0;
font-family: 'Montserrat', sans-serif;
cursor:pointer
}

.accueil
{
height:90vh;
position:relative;
background:url(../img/fonds/accueil.webp);
background-position:top;
background-size:cover;
background-repeat:no-repeat
}

.text-accueil
{
position:absolute;
top:65%;
left:200px;
transform:translate(0,-50%)
}

.text-accueil h1
{
color:#fefefe;
font-size:15pt;
font-family: 'Montserrat', sans-serif;
}

h2, h3, h4
{
font-family: 'Montserrat', sans-serif;
font-weight:600
}

h3, h4
{
font-family: 'Montserrat', sans-serif;
font-weight:600
}
	
.text-accueil span
{
color:#fefefe;
font-size:75pt;
font-family: 'Montserrat', sans-serif;
}

.section
{
position:relative;
margin:100px 0;
background-color:#fefefe;
width:100%
}

.sites-internet
{
text-align:right;
}

.sites-internet .x3, .sites-internet .x2
{
text-align:left;
overflow:hidden
}

.sites-internet .x3
{
padding:0 100px 0 0;
}

.x2
{
width:50%;
vertical-align:middle;
display:inline-block;
position:relative;
}

.x3
{
width:33%;
vertical-align:middle;
display:inline-block;
}

.x4
{
width:25%;
vertical-align:middle;
display:inline-block;
}

.slide_x2
{
position:relative;
width:1000%;
}

.slide_x2 div
{
width:10%;
vertical-align:middle;
display:inline-block;
}

.slide_x2 div img
{
width:90%;
display:block;
margin:auto
}

.crea
{
height:800px;	
position:relative;
background:url(../img/fonds/crea.webp);
background-position:center;
background-size:100% auto;
background-repeat:no-repeat;
text-align:center;
padding:520px 0 0 0
}

.crea .x4
{
background-color:#fefefe;
margin:0 25px;
padding:25px;
border-radius:5px;
transform:translate(0,-50%);
height:440px;
border:1px solid #efefef;
box-shadow: 0px 7px 18px -9px rgba(0,0,0,1);
-webkit-box-shadow: 0px 7px 18px -9px rgba(0,0,0,1);
-moz-box-shadow: 0px 7px 18px -9px rgba(0,0,0,1);
}

.crea .x4 li
{
text-align:left;
margin:0 0 15px 0
}

.crea .x4 p
{
position:absolute;
bottom:15px;
font-weight:600;
font-family: 'Montserrat', sans-serif;
display:block;
width:100%;
text-align:center;
left:0;
}

.crea h2, .dev h2, .contact h2
{
position:absolute;
top:20px;
left:0;
color:#fefefe;
font-size:50pt;
padding:0 0 0 130px;
text-align:left
}

button
{
border:0;
padding:15px 25px;
background-color:#549cd5;
color:#fefefe;
font-family: 'Montserrat', sans-serif;
border-radius:2px;
margin:auto;
display:block;
cursor:pointer
}

.crea span, .dev span, .contact span
{
border:0;
padding:15px 25px;
background-color:#549cd5;
color:#fefefe;
font-family: 'Montserrat', sans-serif;
border-radius:2px;
display:block;
margin:20px 0 0 0
}

.eshop .x2
{
overflow:hidden	
}

.slider
{
position:relative;
width:1000%;
}

.slider div
{
width:10%;
vertical-align:middle;
display:inline-block;
padding: 40px 0 0 0;
}

.eshop .x2:first-child .slider div
{
background-position:center;
background-size:cover;
height:500px;
}

.slider div p
{
width:70%;
display:block;
margin:40px auto 0 auto;
font-size:14pt
}

.slider div h3
{
text-align:center;
font-size:20pt
}

.control
{
position:absolute;
left:50%;
transform:translate(-50%, 0);
z-index:99
}

.round
{
width:30px;
height:30px;
border-radius:50%;
background-color:#efefef;
display:inline-block;
margin: 0 15px;
cursor:pointer
}

.x6
{
width:16.66%;
vertical-align:middle;
display:inline-block;
position:relative;	
}

.crea .x6
{
margin-top:-150px
}

.crea .x6 img
{
height:40px;
vertical-align:middle;
margin:0 15px 0 0
}

.crea .x6 h3
{
vertical-align:middle;
display:inline-block;
}

.crea .x6 p
{
margin:auto;
width:80%;
}

.dev
{
height:952px;	
position:relative;
background:url(../img/fonds/dev.webp);
background-position:bottom;
background-size:cover;
background-repeat:no-repeat;
text-align:center;
padding:520px 0 0 0;
margin-top:250px
}

.contact
{
height:900px;	
position:relative;
background:url(../img/fonds/contact.webp);
background-position:bottom;
background-size:cover;
background-repeat:no-repeat;
text-align:center;
padding:520px 0 0 0;
margin-top:150px;
margin-bottom:-150px
}

.sites-internet .x3
{
font-size:14pt
}

.app
{
padding:30px;
border:1px solid #dfdfdf;
border-radius:3px;
background-color:#efefef;
}

.dev .x3
{
background-color:#fefefe;
margin:0 25px;
padding:25px;
border-radius:5px;
transform:translate(0,-50%);
height:440px;
border:1px solid #efefef;
box-shadow: 0px 7px 18px -9px rgba(0,0,0,1);
-webkit-box-shadow: 0px 7px 18px -9px rgba(0,0,0,1);
-moz-box-shadow: 0px 7px 18px -9px rgba(0,0,0,1);
}

.contact .x3
{
background-color:#fefefe;
margin:0 25px;
padding:25px;
border-radius:5px;
transform:translate(0,-100%);
border:1px solid #efefef;
box-shadow: 0px 7px 18px -9px rgba(0,0,0,1);
-webkit-box-shadow: 0px 7px 18px -9px rgba(0,0,0,1);
-moz-box-shadow: 0px 7px 18px -9px rgba(0,0,0,1);
}

.dev .x3 li
{
text-align:left;
margin:0 0 15px 0
}

.dev .x3 p
{
position:absolute;
bottom:15px;
font-weight:600;
font-family: 'Montserrat', sans-serif;
display:block;
width:100%;
text-align:center;
left:0;
}

.slide_x2 p
{
text-align:center
}

.footer
{
padding:20px;
background-color:#404040;
color:#efefef;
text-align:center;
margin-bottom:0
}

input, textarea
{
padding:10px;
margin:0 auto 10px auto;
border-radius:3px;
border:1px solid #dfdfdf;
max-width:80%;
}

.mentions
{
width:80%;
margin:100px auto!important
}

.dis
{
background-color:red
}

.eshop{
margin-bottom:50px!important
}

.applications, .applications p, .appl
{
text-align:center;
}

.application img
{
max-width:80%;
max-height:30vh;
display:block;
margin:auto
}	


/* >4K */
@media screen and (min-width: 4096px)
{

.dev .app
{
margin-top:-150px;
}
		
#fen div
{
padding:20px;
}
	
body
{
font-size:24pt
}	

.text-accueil h1
{
font-size:30pt;
}

.text-accueil span
{
font-size:150pt;
}

.sites-internet .x3
{
font-size: 24pt;
}

.slider div p {
    font-size: 24pt;
}

.slider div h3 {
    font-size: 30pt;
}

.eshop .x2:first-child .slider div {
    height: 1000px;
}

button {
    font-size: 24pt;
}

.crea h2, .dev h2,.contact h2 {
    font-size: 100pt;
}

.crea .x4 {
    height: 800px;
}

.dev .x3,.contact .x3 {
    height: 690px;
}

.ico_menu_desk img {
    width: 80px;
}

.top_ban_desk {
    font-size: 24pt;
}

.top_ban_desk img {
    height: 37px;
    margin: 0px 10px 0 50px;
}

.menu_desk {
    top: 130px;
}

.crea .x6 {
    margin-top: -10vh;
}

.crea{
height: 1987px;
padding: 1291px 0 0 0;;
}

.dev
{
padding: 700px 0 0 0;	
height: 1695px;
}

.contact{
height:1400px;
padding: 1025px 0 0 0;
}

input, textarea
{
padding:10px;
margin:0 auto 10px auto;
border-radius:3px;
border:1px solid #dfdfdf;
font-size:16pt
}

.application .x2
{
padding:30px;
margin:0 0 20px 0
}

.application .x2 p
{
width:80%
}

}

/* >2K */
@media screen and (min-width: 2560px) and (max-width: 4095px)
{
.dev .app
{
margin-top:-230px;
}

.application .x2
{
padding:20px;
margin:0 0 20px 0
}

.application .x2 p
{
width:80%
}	

#fen div
{
padding:20px;
}
	
.contact{
height:1300px;
padding-top:1050px;
}	

.dev
{
padding: 700px 0 0 0;	
height:1435px;
}

.crea
{
height:1165px;	
padding-top:740px;
}

	
body
{
font-size:18pt
}	

.text-accueil h1
{
font-size:30pt;
}

.text-accueil span
{
font-size:150pt;
}

.sites-internet .x3
{
font-size: 18pt;
}

.slider div p {
    font-size: 18pt;
}

.slider div h3 {
    font-size: 30pt;
}

.eshop .x2:first-child .slider div {
    height: 700px;
}

button {
    font-size: 18pt;
}

.crea h2, .dev h2, .contact h2 {
    font-size: 100pt;
}

.crea .x4 {
    height: 600px;
}

.dev .x3, .contact .x3 {
    height: 600px;
}

.ico_menu_desk img {
    width: 60px;
}

.top_ban_desk {
    font-size: 14pt;
}

.top_ban_desk img {
    height: 20px;
    margin: 0px 10px 0 50px;
}

.menu_desk {
    top: 100px;
}

.crea .x6 {
    margin-top: -15vh;
}

input, textarea
{
padding:10px;
margin:0 0 10px 0;
border-radius:3px;
border:1px solid #dfdfdf;
font-size:14pt
}

}

/* FHD */
@media screen and (min-width: 1920px) and (max-width: 2559px)
{

.dev .app
{
margin-top:-150;
}

.appl
{
margin-top:200px
}

.application .x2
{
padding:20px;
margin:0 0 10px 0
}

.application .x2 p
{
width:80%
}	

.dev {
    padding: 410px 0 0 0;
}

.app {
    margin-top: -150px;
}

.crea .x6{
    margin-top: -150px;
}

.dev .x3 {
    height: 380px;
}

.contact .x3 {
    height: 465px;
}

.contact{
margin-top:100px;
margin-bottom:-100px;
padding:700px 0 0 0;
height:800px
}

#fen div
{
padding:20px;
}

}	

/* 720p */
@media screen and (min-width: 1280px) and (max-width: 1919px)
{

.dev .app
{
margin-top:-150px;
}

.appl
{
margin:-250px 0 -100px 0;
}

	
.application .x2
{
padding:10px;
margin:0 0 10px 0
}

.application .x2 p
{
width:80%
}		
	
#fen div
{
padding:20px;
}

.crea{
height: 678px;
padding: 450px 0 0 0;
}	

.dev
{
height: 1111px;
padding: 400px 0 0 0;
}

.contact
{
height: 800px;
padding: 650px 0 0 0;
}

.text-accueil span {
    font-size: 42pt;
}	
	
.text-accueil h1 {
    font-size: 12pt;
}

.x3 {
    width: 50%;
}

.sites-internet .x3 {
    padding: 0 50px;
	font-size: 11pt;
}

.slider div p {
    font-size: 11pt;
}

.eshop .x2:first-child .slider div {
    height: 390px;
}

.x4 {
    width: 29%;
}

body
{
    font-size: 10pt;
}

.crea .x4 {
    height: 475px;
}

.crea .x6 {
    margin-top: -280px;
}

.dev .x3
{
width:40%;
height:385px
}

.contact .x3
{
width:40%;
height:450px
}


input, textarea
{
padding:10px;
margin:0 0 10px 0;
border-radius:3px;
border:1px solid #dfdfdf;
font-size:10pt
}

	
}	

/* 480p */
@media screen and (min-width: 720px) and (max-width: 1279px)
{
	
.appl
{
margin:50px 0!important;
}
	
	
#fen div
{
padding:20px;
}

.application .x2
{
padding:10px;
margin:0 0 10px 0
}

.application .x2 p
{
width:80%
}	

.contact
{
padding-top:0;
height:initial
}
	
.menu_desk {
    top: 60px;
    left: 0;
}	

.ico_menu_desk img {
    width: 45px;
    margin: 0 0 0 20px;
}	

.nav_menu_desk ul li {
    margin: 8px 0;
}

.text-accueil span {
    font-size: 36pt;
}

.sites-internet .x3 {
    padding: 0 15px;
    width: 100%;
	font-size: 10pt;
	margin:15px 0
}

.x2 {
    width: 100%;
}

.eshop .x2:first-child .slider div {
    height: 375px;
}

.control {
    top: 25px;
}

.slider div p {
    font-size: 12pt;
}

.x4 {
    width: 90%;
}

.crea .x4 {
    margin: 25px 0;
	transform: translate(0,0);
	height:initial
}

.crea, .dev, .contact
{
height:auto;
background-size:cover;
padding:20px 0 0 0
}

.crea h2, .dev h2,.contact h2 {
    font-size: 30pt;
    padding: initial ;
	position:initial;
	top:initial;
	text-align:center
}

.x6 {
    width: 40%;
margin:20px
}

.crea .x6 {
    margin-top: initial;
	background-color:#fefefe;
	padding:20px;
	border-radius:5px;
	height:initial;
}

.x3 {
    width: 90%;
}

.dev .x3,.contact .x3
{
margin:20px 0;
height: initial;
transform: translate(0,0);
}

.dev {
margin-top: 0;
}

.app {
   margin-top: 0
}

.dev .x3 p, .contact .x3 p {
    position: initial;
    bottom: 0;
}

.section{
margin:0;
}

.crea .x4 p {
    position: initial;
    bottom: 0;
}

.slider div {
    padding: 40px 0;
}

	
}

/* < 480p */
@media screen and (min-width: 379px) and (max-width: 719px)
{
	
.appl
{
margin:30px 0!important;
}	
	
#fen div
{
padding:20px;
}

.application .x2
{
padding:5px;
margin:0 0 5px 0
}

.application .x2 p
{
width:80%
}	

.menu_desk {
    top: 60px;
    left: 0;
}	

.ico_menu_desk img {
    width: 45px;
    margin: 0 0 0 20px;
}	

.nav_menu_desk ul li {
    margin: 8px 0;
}

.text-accueil span {
    font-size: 36pt;
}

.sites-internet .x3 {
    padding: 0 15px;
    width: 100%;
	font-size: 10pt;
	margin:15px 0
}

.x2 {
    width: 100%;
}

.eshop .x2:first-child .slider div {
    height: 375px;
}

.control {
    top: 25px;
}

.slider div p {
    font-size: 12pt;
}

.x4 {
    width: 90%;
}

.crea .x4 {
    margin: 25px 0;
	transform: translate(0,0);
}

.crea, .dev, .contact
{
height:auto;
background-size:cover;
padding:20px 0 0 0
}

.crea h2, .dev h2, .contact h2 {
    font-size: 30pt;
    padding: initial ;
	position:initial;
	top:initial;
	text-align:center
}

.x6 {
    width: 40%;
margin:20px
}

.crea .x6{
    margin-top: initial;
	background-color:#fefefe;
	padding:20px;
	border-radius:5px;
	height:initial;
}

.x3 {
    width: 90%;
}

.dev .x3,.contact .x3
{
margin:20px 0;
height: 363px;
transform: translate(0,0);
}

.section{
margin:0
}


.dev, .contact {
margin-top: 0;
margin-bottom:0
}

.app {
   margin-top: 0
}

.text-accueil {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
}

.text-accueil h1 {
    font-size: 12pt;
}

.crea .x4 {
    height: initial;
}


.x6 {
    width: 90%;
    margin: 20px;
}

.dev .x3, .contact .x3 {
    height: initial;
}

.slider div {
    vertical-align: top;
    padding: 40px 0 0 0;
}

.crea .x4 p {
    position: initial;
    bottom: 0;
	margin-top:20px
}

.dev .x3 p, .contact .x3 p {
    position: initial;
    bottom: 0;
}
	
}
	
/* mini */
@media screen and (min-width: 250px) and (max-width: 379px)
{
.appl
{
margin:10px 0!important;
}	
	

.application .x2
{
padding:5px;
margin:0 0 5px 0
}

.application .x2 p
{
width:80%
}	

h1
{
font-size:	14pt
}

h2
{
font-size:	12pt
}

p
{
word-break: break-all;
}
	
#fen div
{
padding:20px;
}
	
.nav_menu_desk span {
    display: block;
    text-align: center;
    margin: 0px 0;
    width: 100%;
    font-family: 'Montserrat', sans-serif;
}	

.nav_menu_desk ul {
    margin: 0px 0;
    padding: 0;
}

.nav_menu_desk {
    margin: -1px 0 0 0;
    padding: 35px 35px 15px 55px;
    border-right: 1px solid #efefef;
    border-bottom: 1px solid #efefef;
    border-bottom-right-radius: 15px;
    border-top-right-radius: 15px;
    text-align: left;
    background-color: #fefefe;
}
	
.menu_desk {
    top: 40px;
    left: 0;
}	

.ico_menu_desk img {
    width: 45px;
    margin: 0 0 0 10px;
}	

.nav_menu_desk ul li {
    margin: 0px 0;
}

.text-accueil span {
    font-size: 20pt;
}

.sites-internet .x3 {
    padding: 0 15px;
    width: 100%;
	font-size: 10pt;
	margin:15px 0
}

.x2 {
    width: 100%;
}

.eshop .x2:first-child .slider div {
    height: 375px;
}

.control {
    top: 25px;
}

.slider div p {
    font-size: 12pt;
}

.x4 {
    width: 90%;
}

.crea .x4 {
    margin: 25px 0;
	transform: translate(0,0);
}

.crea, .dev, .contact
{
height:auto;
background-size:cover;
padding:20px 0 0 0
}

.crea h2, .dev h2, .contact h2 {
    font-size: 15pt;
    padding: initial ;
	position:initial;
	top:initial;
	text-align:center
}

.x6 {
    width: 40%;
margin:20px
}

.crea .x6 {
    margin: 25px auto;
	background-color:#fefefe;
	padding:20px;
	border-radius:5px;
}

.x3 {
    width: 90%;
}

.dev .x3, .contact .x3
{
margin:20px 0;
transform: translate(0,0);
height:auto
}

.dev, .contact {
margin-top: 0;
}

.app {
   margin-top: 0
}

.text-accueil {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
}

.text-accueil h1 {
    font-size: 12pt;
}

.crea .x4 {
    height: 553px;
}


.x6 {
    width: 90%;
    margin: 20px;
}

.round {
    width: 20px;
    height: 20px;
    margin: 0 5px;
}

.crea .x4 {
    height: auto;
}

.dev .x3 p, .contact .x3 p {
    font-weight: 600;
    font-family: 'Montserrat', sans-serif;
    display: block;
    width: 100%;
    text-align: center;
    left: 0;
	margin-top:20px;
	position: initial;
	bottom:initial
}

.crea .x4 p {
    position: initial;
    bottom: 0;
    font-weight: 600;
    font-family: 'Montserrat', sans-serif;
    display: block;
    width: 100%;
    text-align: center;
    left: 0;
}

.section {
    margin: 0vh 0;
}

.x2 {
    vertical-align: top;
}

.top_ban_desk {
    font-size: 8pt;
}

.top_ban_desk img {
    vertical-align: middle;
    height: 10px;
    margin: 0 5px 0 5px;
    cursor: pointer;
}

.slider div {
    padding: 40px 0 0 0;
	vertical-align:top
}
	
}
	
/* Nul */
@media screen and (min-width: 0px) and (max-width: 249px)
{
body
{
display:none
}
}