@media screen and (max-width: 767px) 

{

body {font-size: 1em; color: whitesmoke;background-color:#012934; font-weight:200;}
.imgfetes { 
  width:50%; 
 
}
.texteanimenoel { 
  font-size:1.2rem; 
  margin-bottom:5%;
}

.textenoel {
    font-size:1em;
    margin-top:5%;
}

.header{
  width:100%;
  text-align:center;
  font-size:0.8em;
  padding-bottom: 1%;
  margin-top: -1%;
  position: relative;}

.headeraccueil{
  width:100%;
  text-align:center;
  font-size:0.8em;
  padding-bottom: 1%;
  margin-top: auto;
  position: relative;}

.imagelogo {width:90%; margin-top: 5%;}
.logo {margin-top:0; margin-bottom:-2%;}

h1  {font-size: 1em; color: whitesmoke; font-weight: normal; text-shadow: none; margin-top: 4%; margin-bottom: 2%; padding:0; line-height:1.1em;}
h2 {font-size:1em;}
h4 {font-size:1em}
h5 {font-size:1em}

.titreplushaut {padding-top:2%; padding-bottom:4%;margin-bottom:4%}



.background-video {margin-top:10%}
.imagelogo {
  width:45%
  }  

  .nav-container {
  position: fixed;
  display: none;
  overflow-y: auto;
  z-index: -1;
  top: 0;
  right: 0;
  background-color: #012934ca;
  border-radius: 0px 0px 0px 200px;
  -webkit-border-radius: 0px 0px 0px 200px;
  -moz-border-radius: 0px 0px 0px 200px;
  }

  .nav-tabs {
  flex-direction: column;
  align-items: flex-end;
  margin-top: 80px;
  width: 100%;
  }

  .nav-tab:not(:last-child) {
  padding: 20px 25px;
  margin: 0;
  border-right: unset;
 
  }

  .nav-tab:last-child {
  padding: 15px 25px;
  }

  .menu-btn {
  position: relative;
  display: block;
  margin: 0;
  width: 30px;
  height: 45px;
  cursor: pointer;
  z-index: 2;
  padding-top: 20px;
  padding-right:38px;
  border-radius: 10px;
  }

  .menu-btn .menu {
  display: block;
  width: 100%;
  height: 2px;
  border-radius: 2px;
  background: whitesmoke;
  }

  .menu-btn .menu:nth-child(2) {
  margin-top: 4px;
  opacity: 1;
  }

  .menu-btn .menu:nth-child(3) {
  margin-top: 4px;
  }

  #menuToggle:checked + .menu-btn .menu {
  transition: transform 0.2s ease;

  }

  #menuToggle:checked + .menu-btn .menu:nth-child(1) {
  transform: translate3d(0, 6px, 0) rotate(45deg);

  }

  #menuToggle:checked + .menu-btn .menu:nth-child(2) {
  transform: rotate(-45deg) translate3d(-5.71429px, -6px, 0);
  opacity: 0;
  }

  #menuToggle:checked + .menu-btn .menu:nth-child(3) {
  transform: translate3d(0, -6px, 0) rotate(-45deg);
  }

  #menuToggle:checked ~ .nav-container {
  z-index: 1;
  display: flex;
  animation: menu-slide-left 0.3s ease;
  height:90%

  }
  @keyframes menu-slide-left {
  0% {transform: translateX(200px);}
  to {transform: translateX(0);}

  }









.navaccueil {display: block; position: absolute; transform:translate(-1000px,0); transition: all 0.3s ease; margin-top: 2%;}
    
.navaccueil a {width: 100%; padding: 0%; ;background-color: #c0d5d0; color:#395B64; margin-bottom:0; margin-top: 0; line-height: 2em}
      
.navaccueil a:hover {transform: translate(0); color:#06F6EA }
      

   


   
.box {width:100%; margin-bottom: 2%;}

.texteanime {font-size:0.8em; margin-top: -5%; margin-bottom: 12%; display:block; font-family:'courier new';}

#responsive { }


.contactezmoi { padding-top:7%; font-size: 1em; font-weight: 200;margin-bottom:-1%;}
.boutoncontact { width:125px; text-align: center; margin-left: auto; margin-right: auto;margin-top:5%;; border-radius : 25px;height:55px; border: #c0d5d0 solid 0.5px;}

.contactezmoinoir {color:whitesmoke;text-shadow: 
  0 0 1px #c0d5d0,
  0 0 1px #c0d5d0,
  0 0 1px #c0d5d0,
  0 0 1px #c0d5d0,
  0 0 1px #c0d5d0;}


.titreopacite2 {font-size:0.8em;color:white; font-weight:100;}
.titrevilles {font-size:0.8em;padding-top:25%;}

/* page offre */
#bodyoffre  { background-color:#012934;  font-weight: 300; }
#mainoffre {padding-bottom:10%;background-color:#012934;  font-weight: 300; padding-top:20%; }
.presentationoffre {width:90%; margin-right:auto; margin-left:auto;}
.containeroffre {
 display: block;
 padding-top:5%;
 padding-bottom:15%}

.offretext {color:whitesmoke; padding-left:2%; font-size: 1em;padding:1%}
.imgoffre { padding-left:15%; padding-right: 1%;text-align:center; margin:auto;}



/* PAGE BIENVENUE */


.containerlanding, .blue {
  grid-template-columns: 1fr;
}
.left, .right {
  grid-column: auto;
  text-align: center;
}
.landingtitres {
  font-size: 1.4em;
}
.landingtext, .landingtext2, .landingtext3 {
  font-size: 1em; text-align: left;
}
.imglandingbottom { width:98%; margin:auto}



/*PAGE INDEX */

#cubtombants {display:none;}
.balls {display:none;}

#boutonentrer { width:100px; text-align: center; margin-left: auto; margin-right: auto;margin-top:18%;margin-bottom: 45%; border-radius: 25px; border: #06f6ea solid 0.5px; height:25px; box-shadow:  0 0 7px #fff, 
    0 0 5px #fff, 
    0 0 22px #06F6ea,   
    0 0 47px #06F6ea, 
    0 0 60px #06F6ea ;
    padding-top:1px;
    padding-bottom:10px;
    font-size:1em;
    text-decoration: none;
    color:#06F5EA;
    z-index:99;
}

#fondanimeindex {
    margin-top:35%;
    margin-bottom:25%;}

.loaderindex span:before {
  content: '';
  position: absolute;
  left: 0;
  width: 25px;
  height: 25px;
  background: rgb(148, 245, 3);
  animation: animateindex 3s linear  infinite;
  animation-delay: calc(0.05s * var(--i));
  box-shadow: 0 0 5px #f60592, 0 0 10px #03eef6, 0 0 15px #6a13f5, 0 0 20px rgb(144, 1, 25), 0 0 25px rgb(159, 249, 5), 0 0 30px rgb(248, 170, 2); }

 .loaderindex {
    position: relative;
    margin-top:10%;
    margin-bottom: 10%;
    margin-left:35%;
    padding-top:0; }

@keyframes animateindex {
  0% {
      transform: translate(0) scale(0.1);}
  50% {
      transform: translate(-50px)  scale(1);}
  100% {
      transform: translate(1px) scale(0.1);}

  }

.imagelogofooteraccueil {}

#mentionsaccueil{margin-top:20px;}





/* PAGE ACCUEIL */

.titreopaciteindex1 {padding-top:8%}

#pageaccueil { color :#c0d5d0; width:100%; text-align:center; margin-left:auto; margin-right:auto;padding-bottom:5% }
.texteanimeaccueil {font-size:0.8em; margin-top:5%; margin-bottom: 2%; display:block; font-family:'Courier New', Courier, monospace;text-shadow:none; color:#06F6EA}

#bodyaccueil {background-color: #012934;}

#titreunpageindex {font-size: 0.9em;  margin-bottom: 5%; display:block; font-family:'Courier New', Courier, monospace;color:#A5C9CA; text-shadow:none}

.presentation {display:block;  padding: 1%;margin-bottom:10%; margin-top:-4%; }
.cardindex1 {width: 100%;height:400px;margin-top:25%; margin-left:auto; margin-right:auto; animation-duration:2s; }
.cardindex2 {width:100% ;height:400px;margin-top:25%; margin-left:auto; margin-right:auto; animation-name:fadeinright; animation-duration:3s;}
.cardindex3 {width: 100% ;height:400px;margin-top:25%; margin-left:auto; margin-right:auto; animation-duration:4s;}

.details {
position: absolute;
z-index:9; 
margin-bottom: 5%;
margin-top: 35%;
margin-left:auto;
margin-right:auto;
width:auto; 
height:70px;
text-align: center;
font-weight: bolder; 
line-height: 1em;
-webkit-backdrop-filter: blur(7px);
backdrop-filter: blur(7px);
transition: ease 0.5s;
background-color: #ffffff60; 
overflow: hidden;}
    

.titrefondbleu { font-size: 1.2em; font-weight: 900;}


.fondbleuit {color:whitesmoke;text-align: left; font-size: 0.7em; clear: both; text-shadow: 1px 1px 2px white;}


.iconlist {display: block;}
.cardicon {width:98%; margin-left:auto; margin-right:auto; margin-top:50px; text-align: center; font-size: 0.9em;background-color: #395B64; padding-top:3%;}
.cardicon p {margin-top:-3%;}
.cardicon1 {animation: none }
.cardicon2 {animation: none }
.cardicon3 {animation: none}
.cardicon4 {animation: none }
.cardicon5 {animation: none }
#texteicones {margin-bottom:10%; margin-top:-3%;}
.tailleicon {width:100px; height: 100px; text-align: center; margin:auto; padding-top:2%; }
#boutoncontactaccueil {width:100px; height:40px}

/* PAGE SITE */

.bandeauconfiance { width:100%;}
.carousel-track {width:100% }
.confiance {width:10vw; margin-left: 6%;
    margin-right: 6%;
    margin-top: 0;
    margin-bottom: 0;
  }
.conf {width:15vw}

.cookies {width: 20%; margin-top: 3px;margin-bottom: -5px; padding-bottom: 0;}

#accueil {display: block; text-align: center;}

#plushaut {margin-top:35%; padding:0; margin-bottom : 2%}

.areduire {width:60%; padding:2%;  margin: auto;}

.areduire1 {width:90%; padding:2%;  margin: auto; display: block;}

.article1 {width:100%; text-align:left; padding:1%;margin:auto; display: block;}

#titrepluspetit {font-size: 0.5em;}   

.quelsite{display:block;}

.normal {width:98%; text-align: left; padding: 1%; margin:auto; }

#enlargeur {text-align:left}

.sitevitrine {margin-bottom: 12%;}

#normal #enlargeur {display: block; width:98%; text-align: center; padding:1%}
 
.imagesidentiques {width:100%; background-color: whitesmoke;box-shadow: none}

#areduire2 {width:100%; padding: 1%; padding-top:2%; margin:auto; display:block; margin-bottom: 5%;box-shadow: none}
 
#votresite {display:block; clear: both;}
 
#imageacentrer {width:99%; padding:1%; margin:auto; display: block; margin-right: 1%;box-shadow: none;}
 
.agauche {width:98%; padding:1%; text-align: center; display: block;}
 
#basique {text-align: left; display: block; }

.green2 {margin-top:-20%;}

.siteeco {width:100%; margin:auto; text-align:center;margin-bottom:-6%}
.divsiteeco {text-align:center; margin-left:auto; margin-right:auto; margin-top:-2%; margin-bottom:-14%; }

#titrevillespageidentite {font-size: 1em; font-weight:200}


/* PAGE REDACTION */

.fondmetal {background-image: url(/photos/fond-photo2.webp);background-attachment: fixed;
  background-position:center;
  background-repeat: no-repeat;
  margin-bottom:3%;}

  .texteanimeduhautfonce {display: block; text-align:center; margin-bottom: 10px;  font-size:1em ; margin-top:1%; font-weight: 100; color:#395b64; padding-bottom: 2%; padding-top:2%}
.blanc {font-size:0.8em;color:white; font-weight:300; line-height:1.1em}

.seocentrer {text-align:left}

.seo {margin-bottom:-5%; padding-top:30%;}


 
/* PAGE IDENTITE */
#h1identite {padding-top:30%;}

#ajoute {display: block; width:100%; margin-left: 0;margin-right:0; margin-top:5%;}

#aligneragauche {display: block; width:100%; margin: auto; text-align: left;}

.acentrer {display: block; width:98%; margin: auto;}

#article2 { width:95%;box-shadow: none; padding: 3% ; margin:auto }

.graphisme {display:block; width:100%; padding: 1%;margin:auto}

.card {width: auto;margin:4%; border:solid 1px #395b64 ;}

.reduire:hover {transform:none;}

#remonterunpeu {display: none}

#alone {padding:3%; display: block; clear: both; width: 100%;}

#cartes{width:80%;  margin-top: -40%; margin-bottom:-20%;}

.opacite {display:block}



/*PORTFOLIO et FENETRE MODALE */

#techno {width:90%; text-align: center; margin-left: auto; margin-right:auto; margin-bottom:-5%;}
.maquettes {display:block; text-align:center; margin:auto;}
#maquettessites {max-width:80%; text-align:center; margin:auto;}
.fondblancsursites {display:block; width: 100%;}
.creaweb {display:block; width:100%;}
.messites{display:block; width: 90%; margin-left:5%; margin-right:5%; margin-bottom: 30px; animation:none; border:0.5px solid #395b6420; border-radius:20px ;}
.messites2{display:none}
.videomaquette {width: 80%; text-align: center; background-color: black; padding:20px; margin-bottom:10%; display: block;}
.contenumodale {display: block; width:80%}
.modal {
position: absolute;
display: block;
left:50%;
transform: translate(-50%, -120%);
width: 80%;
border: solid #c0d5d0 0.5px;
background-color:white;
padding: 1rem;
box-shadow: -12px 10px 1px 1px #395b64;
z-index: 10;}
.basduporfolio {background-color:#012934; margin-top: -6%;}
.boutoncontactportfolio{ width:150px; height:60px;}


/* PAGE CONTACT ACORDEON */

.interlocuteur { 
display: block;
padding:2%;
 background-color:#012934;
 margin-top:-2%;
 margin-bottom:-2%}

 .phrase {
  color:#06F6EA; text-align:left; padding-left:2%; padding-right:3%;padding-top:5%; font-size:1em
}
.photo-moi {display:block;text-align:center;margin-right:auto; margin-left:auto;}
.untrucadire {width:40%;height:40%;margin-top:16%;}


.areduirebeaucoup2a {width:40%; text-align: center;margin: auto;}
.areduirebeaucoup2b {width:40%; text-align: center;margin: auto;}
.areduirebeaucoup2c {width:40%; text-align: center;margin: auto;}

form input , form textarea { display:block;
  margin-top: 40px;
  padding:10px;
  width:90%;
  font-family: 'Poppins', sans-serif; 
  margin-left: auto;
  margin-right: auto;
  background-color: whitesmoke; color:  #395b64; font-weight: 300; font-size: 0.7em;}
   .questionhumaine {font-size:0.7em; padding:0; margin-top:-10px; font-weight:900; width:100%;line-height:1em; color:#0d2126;}
#boutonenvoi {width: auto; background-color:  #395b64; color: #a5c9ca; margin-bottom: 3%; margin-top: 3%;}

textarea { min-height:150px}
  
#fondduformulaire { margin-right:auto; margin-left:auto; text-align: center; padding: 1%; width:96% ;
backdrop-filter: blur( 6px );
-webkit-backdrop-filter: blur( 6px );
border-radius: 10px;
  box-shadow: 10px 5px 1px 1px #395b64; border:solid 1px #395b64;}

.fondfixe2 {text-align:center; margin-bottom:-5%; padding-bottom:5%} 

.glass {width:90%; margin-left: auto; margin-right: auto;margin-top: 6%;text-align: center; border: none;}
.contacttel {font-size: 0.8em;  font-weight: 100; background-color:whitesmoke; width:90%;text-align:center; margin:auto;}
.contacttel a {color:#395b64;}

.liste {text-align:left;}
.mettreenavant {text-align:left;}

.acordeon {margin-bottom:-5%; padding-bottom:2%}


/*FOOTER*/

.footermentions {height: auto;}


.imagelogofooter {width:40%; text-align: center; margin:auto; padding-top:3%;filter: drop-shadow(0 0 1px white); line-height: 0.5em; padding-bottom: -20px;}


.mentions {color: whitesmoke; font-family: 'Courier New', Courier, monospace; padding-bottom:10px; margin-top: 0; margin-bottom: 0; font-size: 0.8em; line-height:1.1em;}
.mentions a {color:whitesmoke; font-size: 0.7rem; padding-top:10px;  text-decoration: none;}



.texteanimedubasfonce {
  display: block; text-align:center;   font-size:0.8em ; margin-top:5%; font-weight: 200; color:#06F5EA; padding-bottom: 7%; padding-top:12%}
  
.texteanimedubas {
  display: block; text-align:center; font-size:0.8em ; font-weight: 200; color:#012934}
  
.loader span:before {
  content: '';
  position: absolute;
  left: 0;
  width: 15px;
  height: 15px;
  background: rgb(148, 245, 3);
  animation: animate 2.5s linear  infinite;
  animation-delay: calc(0.05s * var(--i));
  box-shadow: 0 0 5px #f60592, 0 0 10px #03eef6, 0 0 15px #6a13f5, 0 0 20px rgb(144, 1, 25), 0 0 25px rgb(159, 249, 5), 0 0 30px rgb(248, 170, 2); }

 .loader {
    position: relative;
    margin-top:-14%;
    margin-bottom: 0;
    margin-left:35%;
    padding-top:0; }

@keyframes animate {
  0% {
      transform: translate(0) scale(0.3);}
  50% {
      transform: translate(-70px)  scale(0.5);}
  100% {
      transform: translate(7px) scale(0.2);}

  }
  
  
/* PAGE MENTIONS */

.petit {color: #c0d5d0; font-size: 3 em; font-weight: 100; text-align:center}

.credits {font-size:0.6em;padding:1%; width:auto;}
.politiqueconfidentialite {font-size:0.6em;padding:1%; width:auto;}

#mentionslegales {
    padding-top:30%;
}

/* bandeau logo */
.conf2 {width:15vw}

}


 

  @media (min-width: 768px) and (max-width: 1023px)



  {

.nav-container {
  position: fixed;
  display: none;
  overflow-y: auto;
  z-index: -1;
  top: 0;
  right: 0;
  width: 50vw;
  height: 90%;
  background-color:#012934ca;
  border-radius: 0px 0px 0px 200px;
-webkit-border-radius: 0px 0px 0px 200px;
-moz-border-radius: 0px 0px 0px 200px;
  }

.nav-tabs {
flex-direction: column;
align-items: flex-end;
margin-top: 80px;
width: 100%;
}

.nav-tab:not(:last-child) {
padding: 20px 25px;
margin: 0;
border-right: unset;
}

.nav-tab:last-child {
padding: 15px 25px;
}

.menu-btn {
position: relative;
display: block;
margin: 0;
width: 30px;
height: 15px;
cursor: pointer;
z-index: 2;
padding: 20px;
border-radius: 10px;
}

.menu-btn .menu {
display: block;
width: 100%;
height: 2px;
border-radius: 2px;
background: whitesmoke;
}

.menu-btn .menu:nth-child(2) {
margin-top: 4px;
opacity: 1;
}

.menu-btn .menu:nth-child(3) {
margin-top: 4px;
}

#menuToggle:checked + .menu-btn .menu {
transition: transform 0.2s ease;
}

#menuToggle:checked + .menu-btn .menu:nth-child(1) {
transform: translate3d(0, 6px, 0) rotate(45deg);
}

#menuToggle:checked + .menu-btn .menu:nth-child(2) {
transform: rotate(-45deg) translate3d(-5.71429px, -6px, 0);
opacity: 0;
}

#menuToggle:checked + .menu-btn .menu:nth-child(3) {
transform: translate3d(0, -6px, 0) rotate(-45deg);
}

#menuToggle:checked ~ .nav-container {
z-index: 1;
display: flex;
animation: menu-slide-left 0.3s ease;
}

@keyframes menu-slide-left {
0% {transform: translateX(200px);}
to {transform: translateX(0);}
}



.background-video {margin-top:10%}




body {font-size: 1em; }
  
.box {width:100%; margin-bottom: 2%;}
nav a{}
.navaccueil a {color: white;}


  
h3{ font-size: 0.8em;}
  

.texteanime {font-size:1.1em; margin-bottom: 8%; padding-bottom: 0; display:block;}
  
  
.header{
    width:100%;
    text-align:center;
    font-size:0.5em;
    padding-bottom: 1%;
    margin-top: -1%;
    color:whitesmoke;
    position: sticky;
  }
  
.titreopacite {font-size:0.2em;} 


/* page offre */
#bodyoffre  { background-color:#012934;  font-weight: 300; }
#mainoffre {padding-bottom:10%;background-color:#012934;  font-weight: 300; padding-top:10%; }
.presentationoffre {width:90%; margin-right:auto; margin-left:auto;}
.containeroffre {
 display: block;
 padding-top:5%;
 padding-bottom:15%}

.offretext {color:whitesmoke; padding-left:2%; font-size: 1em;padding:1%}
.imgoffre { padding-left:15%; padding-right: 1%;text-align:center; margin:auto;}



/*PAGE BIENVENUE */

.landigntitres {font-size:1.3em}

  .containerlanding {
   display:block
  }
  .blue {
    grid-template-columns: repeat(2, 1fr);
  }
  .left, .right {
    grid-column: auto;
  }


/*PAGE accueil */

#cubtombants {display:none;}
.balls {display:none;}

#fondanimeindex {
    margin-top:35%;
    margin-bottom:25%;}

.loaderindex span:before {
  content: '';
  position: absolute;
  left: 0;
  width: 25px;
  height: 25px;
  background: rgb(148, 245, 3);
  animation: animateindex 3s linear  infinite;
  animation-delay: calc(0.05s * var(--i));
  box-shadow: 0 0 5px #f60592, 0 0 10px #03eef6, 0 0 15px #6a13f5, 0 0 20px rgb(144, 1, 25), 0 0 25px rgb(159, 249, 5), 0 0 30px rgb(248, 170, 2); }

 .loaderindex {
    position: relative;
    margin-top:20%;
    margin-bottom: 20%;
    margin-left:35%;
    padding-top:0; }

@keyframes animateindex {
  0% {
      transform: translate(0) scale(0.1);}
  50% {
      transform: translate(-50px)  scale(1);}
  100% {
      transform: translate(1px) scale(0.1);}

  }

#boutonentrer { width:100px; text-align: center; margin-left: auto; margin-right: auto;margin-top:18%;margin-bottom: 45%; border-radius: 25px; border: #06f6ea solid 0.5px; height:25px; box-shadow:  0 0 7px #fff, 
    0 0 5px #fff, 
    0 0 22px #06F6ea,   
    0 0 47px #06F6ea, 
    0 0 60px #06F6ea ;
    padding-top: 5px;
    padding-bottom:12px;
    font-size:1em;
    text-decoration: none;
    color:#06F5EA;
    z-index:99;
}

.imagelogofooteraccueil {}

#mentionsaccueil{margin-top:20px;}

  
/* PAGE index */

.texteanimeaccueil {font-size:1.1em; margin-bottom: 8%; padding-bottom: 0; display:block;}
.headeraccueil{
  width:100%;
  text-align:center;
  font-size:0.8em;
  padding-bottom: 1%;
  margin-top: -1%;
  background-color: #395B64;
  position: sticky;}


.presentation {width:100%; overflow: hidden; margin: auto; text-align: center; display: block;}

.details { font-size:0.9em}

.titrefondbleu {font-size: 1.2em;text-shadow: 1px 1px 2px white;}

.fondbleuit {color:#395b64;text-align: left; font-size: 1em; clear: both;text-shadow: 1px 1px 2px white;}

.cardindex1 {width: 98%;height:350px;margin-top:20%; margin-left:auto; margin-right:auto; animation-duration:2s; }
.cardindex2 {width: 98% ;height:350px;margin-top:20%; margin-left:auto; margin-right:auto; animation-name:fadeinright; animation-duration:3s;}
.cardindex3 {width: 98% ;height:350px;margin-top:20%; margin-left:auto; margin-right:auto; animation-duration:4s;}



.details {
position: absolute;
z-index:9; 
margin-bottom: 3.5%;
margin-top: 20%;
margin-left:3.5%;
margin-right:auto;
width:70%; 
height:100px;
text-align: center;
font-weight: bolder; 
line-height: 1em;
padding: 1%; 
-webkit-backdrop-filter: blur(7px);
backdrop-filter: blur(7px);
transition: ease 0.5s;
background-color: #ffffff60; 
overflow: hidden;
 }
.contactezmoi { padding-top:7%; font-size: 1em; font-weight: 200;}

.boutoncontact { width:125px; text-align: center; margin-left: auto; margin-right: auto;margin-top:5%;; border-radius : 25px;height:55px; border: #c0d5d0 solid 0.5px;}
 
.iconlist {display: block;}
.cardicon {width:98%; margin-left:auto; margin-right:auto; margin-top:50px; text-align: center; font-size: 0.9em;background-color: #395B64; padding-top:3%;}
.cardicon p {margin-top:-3%;}
#texteicones {margin-bottom:10%; margin-top:-3%;}
.tailleicon {width:100px; height: 100px; text-align: center; margin:auto; padding-top:2%; }


 /* PAGE SITE */

 /* BANDEAU CONFIANCE */
    .bandeauconfiance { width:100%;}
    .carousel-track {width:100% }
    .confiance {width:10vw; margin-left: 4%;
    margin-right: 4%;
    margin-top: 0;
    margin-bottom: 0;}
  
    .conf {width:15vw}
    
 /* bandeau logo */
    
.conf2 {width:20vw}
    
    
  #accueil {display: block; text-align: center;}
  
  .areduire {width:60%; padding:2%;  margin: auto;}
  
  .areduire1 {width:90%; padding:2%;  margin: auto; display: block;}
  
  .article1 {width:100%; text-align:justify; padding:1%;margin:auto; display: block;}
  
  #titrepluspetit {font-size: 0.5em;}  
   
  #siteinternet {display:block}     
   
  .quelsite{display:block;}
  
  .normal {width:98%; text-align: justify; padding: 1%; margin:auto; }
  
  .sitevitrine {margin-bottom: 12%;}
  
  #normal #enlargeur {display: block; width:98%; text-align: center; padding:1%}
    
  .imagesidentiques {width:100%; text-align: center; margin: auto;}
  
  #areduire2 {width:100%;  padding-top:2%; margin:auto; display:block; margin-bottom: 5%; }
    
  #votresite {display:block; clear: both;}
    
  #imageacentrer {width:100%; margin:auto; display: block;}
    
  .agauche {width:98%; padding:1%; text-align: center; display: block;}
    
  #basique {text-align: justify; display: block; }
  
  .green2 {margin-top:-9%;}
  
  .siteeco {width:60%; margin:auto; text-align:center;}
.divsiteeco {text-align:center; margin-left:auto; margin-right:auto; margin-top:-2%; margin-bottom:-12%;}

  
  /* PAGE REDACTION */


.fondmetal {background-image: url(/photos/fond-photo2.webp);background-attachment: fixed;
  background-position:center;
  background-repeat: no-repeat;
  margin-bottom:3%;}

  .texteanimeduhautfonce {
  display: block; text-align:center; margin-bottom: 10px;  font-size:1em ; margin-top:2%; font-weight: 100; color:#395b64; padding-bottom: 2%; padding-top:2%}

   
  /* PAGE IDENTITE */

#h1identite {padding-top:20%;}
  #ajoute {display: block; width:100%; margin: 0;}

  #aligneragauche {display: block; width:100%; margin: auto;}
  
  .acentrer {display: block; width:98%; margin: auto;}
  
  #article2 { width:90%;box-shadow: none; padding: 3% ; margin:auto }
  #alone {padding:3%; display: block; clear: both; width: 100%;}

  #identite {display:block}
  .graphisme {display:block; width:95%; padding: 1%;margin:auto; clear: both;}
  
  .card {width: 92%; margin:4%; text-align: center;}
  
  .reduire:hover {
    transform:none;}

  #cartes {width:20%; margin-bottom:-20%; clear: both; }

  #remonterunpeu {display: block; text-align: center; font-style: italic;}
  


/* PAGE CONTACT ACORDEON */
.acordeon {margin-top:-1%}

.areduirebeaucoup2a {width:30%; text-align: center;margin: auto;}
.areduirebeaucoup2b {width:30%; text-align: center;margin: auto;}
.areduirebeaucoup2c {width:30%; text-align: center;margin: auto;}

form input , form textarea { display:block;
  margin-top: 40px;
  padding:10px;
  width:90%;
  font-family: 'Poppins', sans-serif; 
  margin-left: auto;
  margin-right: auto;
  background-color: whitesmoke; color:  #395b64; font-weight: 300; font-size: 0.8em;}
 .questionhumaine {font-size:0.6em; font-style:italic;padding:0; margin-top:-10px;line-height:1em;color:#0d2126;font-weight:900;} 
 
#boutonenvoi {width: auto; background-color:  #395b64; color: #a5c9ca; margin-bottom: 3%; margin-top: 3%;}

textarea { min-height:150px}
  
#fondduformulaire { background-color: white; margin-right:auto; margin-left:auto; text-align: center; padding: 1%; width:90% ;border:solid 1px #395b64; }

.fondfixe2 {text-align: center; margin:auto;
box-shadow: 0 8px 32px 0 rgba( 31, 38, 135, 0.45 );
backdrop-filter: blur( 6px );
-webkit-backdrop-filter: blur( 6px );
border-radius: 10px;
  box-shadow: 10px 5px 1px 1px #395b64; border:solid 1px #395b64;}

.glass {width:100%; margin-left: auto; margin-right: auto;margin-top: 6%;text-align: center; border: none;}
.contacttel {font-size: 1.1em; color: #395B64; font-weight: 100;background-color:whitesmoke; width:90%;text-align:center; margin:auto}

.contacttel a {color:#395b64;}

.photo-moi{margin-top:4%;}


/*FOOTER*/


.imagelogofooter {width:40%; text-align: center; margin:auto; padding-top:1%;filter: drop-shadow(0 0 1px white); line-height: 0.5em; padding-bottom: -20px;}


.mentions {color:whitesmoke; font-family: 'Courier New', Courier, monospace; padding-bottom:10px; margin-top: 0; margin-bottom: 0; font-size: 1em;line-height:1em;}
.mentions a {color:whitesmoke; font-size: 0.6rem; padding-top:10px;  text-decoration: none;}


.texteanimedubasfonce {
display: block; text-align:center; margin-bottom: 20px;  font-size:1em ;  font-weight: 100; color:#395b64; padding-bottom: 7%; padding-top:2%}
  
.texteanimedubas {
 display: block; text-align:center; font-size:1em ; font-weight: 100;}
  
.loader {
  position: relative;
  margin-top: -8%;
  margin-bottom: 0;
  margin-left:27%}

  


/* CONTENU MODALE SITES WEB*/

.contenumodale {display:block; margin:auto; text-align: center; width: 80% ;}

.show-modal {
font-size: 1.2em;}
  
.close-modal {
position: absolute;
top: 10%;
right: 10%;
font-size: 2em;
color: #395b64;
cursor: pointer;
border: none;
background: none;}
  
.modal {
position: absolute;
overflow:hidden;
transform: translate(-50%, -50%);
width: 70%;
text-align:center;
background-color: white;
padding: 6rem;
border-radius: 5px;
box-shadow: 3em 3em 3em 3em #A5C9CA;
 z-index: 10;}
  
.overlay {
position: absolute;
top: 0;
left: 0;
width: auto;
height: auto;
background-color: rgba(0, 0, 0, 0.6);
backdrop-filter: blur(3px);
z-index: 5; }


 /* PORTFOLIO */

.maquettes {display: block;}
.videomaquette {width: 50%; text-align: center; background-color: black; padding:20px; margin:20px;}

.messites2 {width:50%; color:whitesmoke;margin:1px; ;  border:0; font-weight: 100; font-size: 1em; padding-top:30px; font-size:0.8em;}
.boutoncontactportfolio{ width:150px; height:60px;}
  }





  @media screen and (min-width:1024px) and (max-width:1600px)
  
  {
      
  /* en-tête */ 
    .imagelogo { width: 55%;padding-top:4%;}
    .background-video {margin-top:10%}   
    nav {margin-top:-2%;}
    
    
   /* page offre */
#bodyoffre  { background-color:#012934;  font-weight: 300; }
#mainoffre {padding-bottom:10%;background-color:#012934;  font-weight: 300; padding-top:10%; }
.presentationoffre {width:90%; margin-right:auto; margin-left:auto;}
.containeroffre {
 display: block;
 padding-top:5%;
 padding-bottom:15%}

.offretext {color:whitesmoke; padding-left:2%; font-size: 1em;padding:1%}
.imgoffre { padding-left:15%; padding-right: 1%;text-align:center; margin:auto;}


   
      
 /*PAGE BIENVENUE */    

    .containerlanding {
     display:block; font-size:1em
    }
    .blue {
      grid-template-columns: repeat(2, 1fr);
    }
    .left, .right {
      grid-column: auto;
    }
    
 /* BANDEAU CONFIANCE */
  .bandeauconfiance { width:100%;}
  .carousel-track {width:100% }
  .confiance {width:10vw; margin-left: 5%;
    margin-right: 5%;
    margin-top: 0;
    margin-bottom: 0;
  }
  
/* bandeau logo */
.conf2 {padding-top:90%; margin-top:90%; width:12vw}
  
  
      
/*PAGE accueil */

#cubtombants {display:none;}
.balls {display:none;}


#fondanimeindex {
    margin-top:10%;
    margin-bottom:5%;}

.loaderindex span:before {
  content: '';
  position: absolute;
  left: 0;
  width: 45px;
  height: 45px;
  background: rgb(148, 245, 3);
  animation: animateindex 3s linear  infinite;
  animation-delay: calc(0.05s * var(--i));
  box-shadow: 0 0 5px #f60592, 0 0 10px #03eef6, 0 0 15px #6a13f5, 0 0 20px rgb(144, 1, 25), 0 0 25px rgb(159, 249, 5), 0 0 30px rgb(248, 170, 2); }

 .loaderindex {
    position: relative;
    margin-top:15%;
    margin-bottom: 5%;
    margin-left:35%;
    padding-top:0; }

@keyframes animateindex {
  0% {
      transform: translate(0) scale(0.1);}
  50% {
      transform: translate(-50px)  scale(1);}
  100% {
      transform: translate(1px) scale(0.1);}

  }

#boutonentrer { width:120px; text-align: center; margin-left: auto; margin-right: auto;margin-top:15%;margin-bottom: 20%; border-radius: 25px; border: #06f6ea solid 0.5px; height:28px; box-shadow:  0 0 7px #fff, 
    0 0 5px #fff, 
    0 0 22px #06F6ea,   
    0 0 47px #06F6ea, 
    0 0 60px #06F6ea ;
    padding-top: 5px;
    padding-bottom:14px;
    font-size:1em;
    text-decoration: none;
    color:#06F5EA;
    z-index:99;
}

.imagelogofooteraccueil {display:none}

#mentionsaccueil{margin-top:20px;}
  


/*PAGE index */

.presentation {
    display: flex; justify-content: space-around; clear:both; width:100%; margin-left :auto; margin-right :auto; margin-bottom :8%; text-align: center; overflow: hidden;}
  
  .details { font-size:0.9em}
  
  .titrefondbleu {font-size: 0.8em;text-shadow: 1px 1px 2px white;}
  
  .fondbleuit {color:#395b64;text-align: left; font-size: 0.8em; clear: both;text-shadow: 1px 1px 2px white;}
  
  .cardindex1 {width: 98%;height:350px;margin-top:15%; margin-left:1%; margin-right:1%; animation-duration:2s;  }
  .cardindex2 {width: 98% ;height:350px;margin-top:15%; margin-left:1%; margin-right:1%; animation-name:fadeinright; animation-duration:3s;}
  .cardindex3 {width: 98% ;height:350px;margin-top:15%; margin-left:1%; margin-right:1%; animation-duration:4s;}
  
  #article2 {width:45%; padding:4%; }
  #alone {width:48%;padding-left:3%;}
  .details  {
    width: 100%;
    text-align: center;
    margin-top:60%;
    margin-bottom: 5%;
   box-shadow: 10px 5px 1px 1px #395b64;border:solid 1px #395b64;
    -webkit-backdrop-filter: blur(7px);
    backdrop-filter: blur(7px);
    transition: ease 0.5s;
    background-color:#f4f0f050;
    padding-bottom:15px;
   line-height: 1.2em; 
   overflow: hidden;
   }  


.boutoncontact { width:150px; text-align: center; margin-left: auto; margin-right: auto;margin-top:3%;margin-bottom: 3%; border-radius: 50px; border: #c0d5d0 solid 0.5px; height:55px}


.titreopacite {display: none;}

nav a{font-size: 1em; color: whitesmoke; font-weight: 100;}
.navaccueil a {font-size: 1em; color: white; font-weight: 100;}
    
 a:hover {color:#f60592 }

.texteanime {font-size:1.2em; margin-top: 0; margin-bottom: 10%; display:block; font-family:'courier new';}

.texteanimeaccueil {font-size:1.2em; margin-top: 0; margin-bottom: 3%; display:block; font-family:'courier new';}


.iconlist {display:flex;}

.tailleicon {width:100px; height: 100px; text-align: center; margin:auto; padding-top:2%; }

.cardicon {font-size: 0.8em; margin:1%; width:24%; background-color:#a5c9ca10;padding-top:2%; padding-bottom:2%;}
.iconlist {width: 100%; text-align: center; margin: auto;}
#iconmail {display: none;}

.green2 {margin-top:-9%;}

.siteeco {width:50%; margin:auto; text-align:center;}
.divsiteeco {text-align:center; margin-left:auto; margin-right:auto; margin-top:-2%; margin-bottom:-10%;}


    /* PORTFOLIO */
   
.maquettes {clear: both; margin-top: 15%; margin-left: auto;margin-right: auto; text-align: center; padding-top:2%}
.videomaquette {width: 30%; text-align: center; background-color: black; padding:2px; margin:2px; display: block;}
.messites2 {width:50%; color:whitesmoke;margin:1px; ;  border:0; font-weight: 100; font-size: 1em; padding-top:50px}
.boutoncontactportfolio{ width:180px; height:70px;}  
   
   
   
   
    /* FORMULAIRE CONTACT */
  .phrase {font-size:1em;}
  
form input , form textarea { display:block;
     margin-top: 40px;
     padding:10px;
     width:90%;
     font-family: 'Poppins', sans-serif; 
     margin-left: auto;
     margin-right: auto;
     background-color: whitesmoke; color:  #395b64; font-weight: 300; font-size: 0.8em;}
 .questionhumaine {font-size:0.7em; font-style:italic;padding:0; margin-top:-10px;line-height:1em; color:#0d2126; font-weight:900;}
     
   #boutonenvoi {width: auto; background-color:  #395b64; color: #a5c9ca; margin-bottom: 3%; margin-top: 3%;}
   
   textarea { min-height:150px}
     
   #fondduformulaire { background: rgba( 255, 255, 255, 0.25 ); margin-right:auto; margin-left:auto; text-align: center; padding: 1%; width:90% ;border:solid 1px #395b64;-webkit-backdrop-filter: blur(7px); backdrop-filter: blur(7px); }
 
   
   .fondfixe2 {background-color: whitesmoke; text-align: center; margin:auto; }

.glass {width:90%; margin-left: auto; margin-right: auto;margin-top: 6%;text-align: center; border: none;}
.contacttel {font-size: 1.1em; ; color: #395B64; font-weight: 100;background-color:whitesmoke; width:90%;text-align:center; margin:auto}
.contacttel a {color:#395b64;}


/* FOOTER */



.texteanimedubasfonce {
    display: block; text-align:center; margin-bottom: 20px;  font-size:1.8em ;  font-weight: 100; color:#395b64; padding-bottom: 7%; padding-top:2%; text-shadow: 1px 1px 1px #395b64, 1px 1px 1px #06f6ea, 1px 1px 1px #395b64, 1px 1px 1px #395b64, 1px 1px 1px #395b64;
}
  
.texteanimedubas {
    display: block; text-align:center; font-size:1.8em ; font-weight: 100;}
  
   

/* MENTIONS */

.credits {font-size:0.7em;padding:1%; width:auto;}
.politiqueconfidentialite {font-size:0.7em;padding:1%; width:auto;}

     }