/* message fin */

#message-fin {margin-top:3%;margin-bottom:5%;}
.logo-fin {text-align: center; width:100%; margin-right:50%;margin-left:50%;margin-top:5%;}



/* CODE NOEL */


.imgfetes { 
  width:20%; 
  animation:guirlandesapin 2s infinite linear;
  margin-bottom:1%;
  margin-top:-2%;
 
  
}
@keyframes guirlandesapin{
  100%{
    filter: drop-shadow(1px 0px 1px red);
  }
  85%{
    filter: drop-shadow(1px 0px 1px #02f817);
  }

  60%{
    filter: drop-shadow(1px 0px 1px #06f6ea);
  }
  50%{
    filter: drop-shadow(1px 0px 1px red);
  }
  40%{
    filter: drop-shadow(1px 0px 1px rgb(0, 255, 187));
  }
  30%{
    filter: drop-shadow(1px 0px 1px #ff0df2);
  }
  20%{
    filter: drop-shadow(1px 0px 1px #f0f802);
  }
  0%{
    filter: drop-shadow(1px 0px 1px #06f6ea)
}

}





.texteanimenoel {
-webkit-animation: guirlande 3s linear infinite both;
      animation: guirlande 3s linear infinite both;
       
        color: #06f6ea;
        font: 2.5rem 'TeXGyreAdventorBold';
        text-transform: none;
        text-align: center;
        font-family: poppins;
        font-weight: 100;
    
}
.textenoel {
  color: #06f6ea;
  font-size: 3rem ;
  text-transform: none;
  text-align: center;
  font-family: poppins ;
  font-weight: 100;
margin-top:15%}

  @-webkit-keyframes guirlande {
    0% {
      opacity: 1;
      text-shadow: 0 0 190px #ffd700, 0 0 60px rgba(255, 217, 0, 0.809), 0 0 110px rgba(250, 225, 82, 0.84), 0 0 100px rgba(255, 255, 255, 0.1);
    }
    13.9% {
      opacity: 1;
      text-shadow: 0 0 190px gold, 0 0 60px rgba(255, 217, 0, 0.809), 0 0 110px rgba(250, 225, 82, 0.84), 0 0 100px rgba(255, 255, 255, 0.1);
    }
    14% {
      opacity: 0;
      text-shadow: none;
    }
    14.9% {
      opacity: 0;
      text-shadow: none;
    }
    15% {
      opacity: 1;
      text-shadow: 0 0 190px red, 0 0 60px rgba(248, 55, 55, 0.75), 0 0 110px rgba(250, 225, 82, 0.84), 0 0 100px rgba(255, 255, 255, 0.65);
    }
    22.9% {
      opacity: 1;
      text-shadow: 0 0 190px red, 0 0 60px rgba(248, 55, 55, 0.75), 0 0 110px rgba(250, 225, 82, 0.84), 0 0 100px rgba(255, 255, 255, 0.1);
    }
    23% {
      opacity: 0;
      text-shadow: none;
    }
    24.9% {
      opacity: 0;
      text-shadow: none;
    }
    25% {
      opacity: 1;
      text-shadow: 0 0 90px greenyellow, 0 0 60px rgba(255, 217, 0, 0.622), 0 0 100px rgba(250, 225, 82, 0.84);
    }
    34.9% {
      opacity: 1;
      text-shadow: 0 0 90px greenyellow, 0 0 60px rgba(255, 217, 0, 0.622), 0 0 100px rgba(250, 225, 82, 0.84);
    }
    35% {
      opacity: 0;
      text-shadow: none;
    }
    39.9% {
      opacity: 0;
      text-shadow: none;
    }
    40% {
      opacity: 1;
      text-shadow: 0 0 90px gold, 0 0 60px rgba(255, 217, 0, 0.622);
    }
    42.9% {
      opacity: 1;
      text-shadow: 0 0 90px gold, 0 0 60px rgba(255, 217, 0, 0.622);
    }
    43% {
      opacity: 0;
      text-shadow: none;
    }
    44.9% {
      opacity: 0;
      text-shadow: none;
    }
    45% {
      opacity: 1;
      text-shadow: 0 0 90px red, 0 0 60px rgba(248, 55, 55, 0.75);
    }
    50% {
      opacity: 1;
      text-shadow: 0 0 90px red, 0 0 60px rgba(248, 55, 55, 0.75);
    }
    54.9% {
      opacity: 1;
      text-shadow: 0 0 90px red, 0 0 60px rgba(248, 55, 55, 0.75);
    }
    55% {
      opacity: 0;
      text-shadow: none;
    }
    69.4% {
      opacity: 0;
      text-shadow: none;
    }
    69.5% {
      opacity: 1;
      text-shadow: 0 0 90px gold, 0 0 60px rgba(250, 225, 82, 0.84);
    }
    69.9% {
      opacity: 1;
      text-shadow: 0 0 90px gold, 0 0 60px rgba(250, 225, 82, 0.84);
    }
    70% {
      opacity: 0;
      text-shadow: none;
    }
    79.4% {
      opacity: 0;
      text-shadow: none;
    }
    79.9% {
      opacity: 1;
      text-shadow: 0 0 90px gold;
    }
    80% {
      opacity: 0;
      text-shadow: none;
    }
    89.8% {
      opacity: 0;
      text-shadow: none;
    }
    89.9% {
      opacity: 1;
      text-shadow: none;
    }
    90% {
      opacity: 0;
      text-shadow: none;
    }
    100% {
      opacity: 0;
    }
  }
  @keyframes guirlande{
    0% {
      opacity: 1;
      text-shadow: 0 0 7px #fff, 
      0 0 5px #fff, 
      0 0 22px #06F6ea,   
      0 0 40px #06F6ea, 
      0 0 50px #06F6ea ;
    }
    13.9% {
      opacity: 1;
      text-shadow: 0 0 90px gold, 0 0 60px rgba(255, 255, 255, 0.45), 0 0 110px rgba(250, 225, 82, 0.84), 0 0 100px rgba(255, 255, 255, 0.1);
    }
    14% {
      opacity: 0;
      text-shadow: none;
    }
    14.9% {
      opacity: 0;
      text-shadow: none;
    }
    15% {
      opacity: 1;
      text-shadow: 0 0 90px red, 0 0 60px rgba(248, 55, 55, 0.75), 0 0 110px rgba(250, 225, 82, 0.84), 0 0 100px rgba(255, 255, 255, 0.1);
    }
    22.9% {
      opacity: 1;
      text-shadow: 0 0 90px red, 0 0 60px rgba(248, 55, 55, 0.75), 0 0 110px rgba(250, 225, 82, 0.84), 0 0 100px rgba(255, 255, 255, 0.1);
    }
    23% {
      opacity: 0;
      text-shadow: none;
    }
    24.9% {
      opacity: 0;
      text-shadow: none;
    }
    25% {
      opacity: 1;
      text-shadow: 0 0 90px greenyellow, 0 0 60px rgba(250, 225, 82, 0.84), 0 0 100px rgba(255, 217, 0.1);
    }
    34.9% {
      opacity: 1;
      text-shadow: 0 0 90px greenyellow, 0 0 60px rgba(250, 225, 82, 0.84), 0 0 100px rgba(250, 225, 82, 0.84);
    }
    35% {
      opacity: 0;
      text-shadow: none;
    }
    39.9% {
      opacity: 0;
      text-shadow: none;
    }
    40% {
      opacity: 1;
      text-shadow: 0 0 90px gold, 0 0 60px #f3f5ac86;
    }
    42.9% {
      opacity: 1;
      text-shadow: 0 0 90px gold, 0 0 60px rgba(172, 255, 47, 0.7);
    }
    43% {
      opacity: 0;
      text-shadow: none;
    }
    44.9% {
      opacity: 0;
      text-shadow: none;
    }
    45% {
      opacity: 1;
      text-shadow: 0 0 90px red, 0 0 60px #f3f5ac86;
    }
    50% {
      opacity: 1;
      text-shadow: 0 0 90px red, 0 0 60px #f3f5ac86;
    }
    54.9% {
      opacity: 1;
      text-shadow: 0 0 90px gold, 0 0 60px #f3f5ac86;
    }
    55% {
      opacity: 0;
      text-shadow: none;
    }
    69.4% {
      opacity: 0;
      text-shadow: none;
    }
    69.5% {
      opacity: 1;
      text-shadow: 0 0 30px greenyellow, 0 0 60px rgba(172, 255, 47, 0.7);
    }
    69.9% {
      opacity: 1;
      text-shadow: 0 0 30px greenyellow, 0 0 60px rgba(172, 255, 47, 0.7);
    }
    70% {
      opacity: 0;
      text-shadow: none;
    }
    79.4% {
      opacity: 0;
      text-shadow: none;
    }
    79.9% {
      opacity: 1;
      text-shadow: 0 0 30px gold;
    }
    80% {
      opacity: 0;
      text-shadow: none;
    }
    89.8% {
      opacity: 0;
      text-shadow: none;
    }
    89.9% {
      opacity: 1;
      text-shadow: none;
    }
    90% {
      opacity: 0;
      text-shadow: none;
    }
    100% {
      opacity: 0;
    }
  }
  

/* CUBE QUI TOMBENT PAGE INDEX */


.balls{
	display: flex;
	height: 100%;
	width: 100%;

	margin-left:auto;
	margin-right:auto;
	text-align:center;
}
.ball{
	position: absolute;
	top: -5000px;
	width: 90px;
	height: 90px;

	animation: ball 8s infinite;
}

.ball--1{ background-image: linear-gradient(to bottom , #FFE93E, #FF952A);}
.ball--2{ background-image: linear-gradient(to bottom , #FF009E, #FF0038);}
.ball--3{ background-image: linear-gradient(to bottom , #00FF00, #9AFE2E);}
.ball--4{ background-image: linear-gradient(to bottom , #FC00F9, #B500F9);}
.ball--5{ background-image: linear-gradient(to bottom , #06f6ea, #00FFFF);}

.balls-1 .ball--1{ left: 38%;  animation-delay: 0; }
.balls-1 .ball--2{ left: 43%;  animation-delay: 0.1s; }
.balls-1 .ball--3{ left: 48%;  animation-delay: 0.2s; }
.balls-1 .ball--4{ left: 53%;  animation-delay: 0.22s; }
.balls-1 .ball--5{ left: 58%;  animation-delay: 0.32s; }

.balls-2 .ball--1{ left: 38%;  animation-delay: 4s; }
.balls-2 .ball--2{ left: 43%;  animation-delay: 4.1s; }
.balls-2 .ball--3{ left: 48%;  animation-delay: 4.2s; }
.balls-2 .ball--4{ left: 53%;  animation-delay: 4.24s; }
.balls-2 .ball--5{ left: 58%;  animation-delay: 4.32s; }

@keyframes ball {
	0%, 25%{ top: -2000px; }
	35%{ top: calc(60% - 50px ); }
	40%{ top: calc(45% - 50px ); }
	45%{ top: calc(55% - 50px ); }
	50%, 70%{ top: calc(50% - 25px); }

}





/* PIXELS QUI TOURNENT PAGE INDEX */

#fondanimeindex {
    margin-top:15%;
  
  display: flex;
  justify-content: center;
  align-items: center;
  background: #395b64;
  height: 0;
  animation: animate-color 1s linear infinite; } 



.loaderindex {
  position: relative;
  margin-top: 20%;
  margin-bottom: 10%;
  margin-left:22%}

.loaderindex span {
  position: absolute;
  top: 0;
  right:0;
  width: 60px;
  transform-origin: right;
  transform: rotate(calc(40deg * var(--i)));}

.loaderindex span:before {
  content: '';
  position: absolute;
  left: 0;
  width: 60px;
  height: 60px;
  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 12px #6a13f5, 0 0 16px rgb(144, 1, 25), 0 0 20px rgb(159, 249, 5), 0 0 22px rgb(248, 170, 2),0 0 25px red,0 0 30px yellowgreen,0 0 35px blueviolet}
  
  @keyframes animateindex {
  0% {
      transform: translate(0) scale(0.1);
  }
  50% {
      transform: translate(-150px)  scale(1);
  }
  100% {
      transform: translate(0 ) scale(0.1);
  }}



/* LANDING PAGE */
.divlieu {
    padding-top:1%;
    line-height:1em;
    margin-top:10%;
}

.lieu  {
  color: #06f6ea;
  font-size: 1rem ;
  text-transform: none;
  text-align: center;
  font-family: poppins ;
  font-weight: 100;
  margin:0;
  padding:0;
}

#mainlanding { background-color:#012934;  font-weight: 300; }
#landingpage {
  margin:0;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  background-color:#012934;
  
}
.landingtitres {color: whitesmoke; font-size:2.2em; margin-bottom: 2%; text-shadow: 1px 1px 1px #395b64, 1px 1px 1px #06f6ea, 1px 1px 1px #395b64, 1px 1px 1px #395b64, 1px 1px 1px #395b64; padding-top:0; text-align: center; margin-left: auto;margin-right: auto;}


.containerlanding {
  display: grid;
  grid-template-columns:repeat(4, 1fr);
  gap: 20px; 
  padding-top:5%
}

.left {
  grid-column: 1 / 3;
  text-align: left; 
}

.right {
  grid-column: 3 / 5;
  text-align:center;
}
.footerlanding {text-align: center; padding-top:3% ; padding-bottom:3%;background-color: #012934; bottom:1px
}
.landingtext {color:whitesmoke; padding-left:4%; padding-right:4%; font-size: 1.1em;}

.imglanding {width:100%; text-align:center; clear:both; padding-top:12%; }  

.imglandingbottom {width: 70%; padding: 1%; text-align:center; clear:both; margin-top:2%; margin-bottom:2%}  

.blue { gap:50px; display: grid;
  grid-template-columns:repeat(4, 1fr);
 clear: both; margin-top:5%; margin-bottom:5%; padding:2%;background-color:#012934;}


@keyframes gradient-animation2 {
  0% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0% 50%;
  }
}

.bottomup {text-align: center; padding: 5% ; font-size:1.1em; background: linear-gradient(300deg,#012934,#038e87,#012934);
 background-size: 180% 180%;
 animation: gradient-animation2 4s ease infinite}

.bottom {text-align: center; padding:2%;margin-top:1%; font-size:1.1em; }

.landingtext2 {color:whitesmoke; font-size:1.2em; text-align:left; padding-left:5px; clear:both}

.ulin { padding-left:5%;text-align:left; font-size:1em; color:#012934}

.landingtext3 {color:whitesmoke; font-size:1em; text-align:left; padding-left:5px; clear:both}

.landingtextbottom {color:whitesmoke; font-size:1em; text-align:center; clear:both; padding:1%}

.b-bottom {text-align:center; margin-left:auto; margin-right:auto; margin-bottom:5%; padding-top:3%}

#boutonsavoirplus { text-align: center; margin-left: auto; margin-right: auto; border-radius: 50px; border: #06f6ea solid 0.5px;  padding:-1%;box-shadow:  0 0 7px #fff, 
  0 0 5px #fff, 
  0 0 22px #06F6ea,   
  0 0 47px #06F6ea, 
  0 0 80px #06F6ea;
color: whitesmoke;
font-size: 1em; 
padding:1%;
text-decoration: none;}


/*GÉNÉRAL et titres*/

html{
  scroll-behavior: smooth}

body { 
  font-family: 'Poppins', sans-serif; font-weight:200; font-size: 1.2em;line-height: 2.3em;width: 100%; margin: auto; margin-top:0.2%; background-color: #012934; color:whitesmoke;}

main {background-color:#012934}

a {
  text-decoration: underline;color:#bafdef;}

a:hover {
    color:#f0f6ea; cursor: pointer; }

h1  {font-size: 1.6em; color: whitesmoke; text-shadow: none; margin:auto; text-align: center; padding-top: 6%; padding-bottom: 1%; font-weight: 600; margin-top: 5%; }

h2 { text-align: center;
  margin-bottom:1%;
  padding-top:10%;
  color:whitesmoke; 
  font-size: 1.5em; 
  font-weight: 900;}
 
cite {font-weight: 600;}
.titrevilles { padding:0; font-size: 1em; line-height:1.2em; margin-bottom:1em; font-weight:100;}
.titreopacite2 {font-size:1.7em; padding-top:5%; margin-top:2%; margin-bottom:5%;color:whitesmoke; text-shadow: 
  1px 1px 1px #395b64,
  1px 1px 1px #06f6ea,
  1px 1px 1px #395b64,
  1px 1px 1px #395b64,
  1px 1px 1px #395b64;}
.blanc { color: white; padding-top: 3%;}

  @keyframes arrive {
from {
  transform:translateX(8000px) scale(1) ;
}
to {
  transform:translateX(0) scale(1) ;
}}

.titreplushaut {padding-top:0; padding-bottom: 2%;margin-bottom:1%; color:#395b64;}

#titrepluspetit {
  font-size: 1em;background-color: transparent; color:#395b64; text-shadow: none; display:block; text-align: center; font-weight:500; line-height:1em;padding-top: 1%; animation:none; margin: 0;}

h3 {
  font-size: 1.2em; color: whitesmoke; text-shadow: none; margin-top:0%; text-align: center; padding-top: 2%; font-weight: 200; text-decoration: underline;}

h4 {font-size: 1.2em; color: #395b64; text-shadow: none; margin-top:0%; margin-bottom:-2%; text-align: center; padding-top: 2%; font-weight: 600; text-decoration:underline;}

h5 {
  font-size: 1.2em; color: orange; text-shadow: none; margin-top:0%; text-align: center; padding-top: 4%; font-weight: 300; text-decoration: underline;}

h6 { text-align: center;
  margin-bottom:2%;
  padding:3%;
  color:#012934;
  font-weight: bolder; 
  font-size: 2em; 
  animation-duration: 2s; animation-name: arrive; animation-delay: 0.5s; display: block;
    text-shadow: 
  0 0 1px #c0d5d0,
  0 0 1px #c0d5d0,
  0 0 1px #c0d5d0,
  0 0 1px #c0d5d0,
  0 0 1px #c0d5d0;
}

.titreopaciteindex1 {font-size:1.2em; margin-top:-5%; color:whitesmoke; font-weight:100; line-height:1.1em;} 

.titreopaciteindex2 {font-size:1.2em; padding-bottom:4%; color:whitesmoke; font-weight:100; line-height:1.1em;} 

.texteacentrer { 
  text-align: center;}

.areduire {
  width: 25%; margin: auto; overflow: hidden; align-items: flex-start; padding-top: 5%; margin-top: 1%;}


#corps {width:95%; display: block; text-align: center; margin: auto;}

strong {font-weight: 200}



.texte {text-align:center; transform: translate((-50%,-50%)); width:50%; position: relative; top:25%; background-color: whitesmoke;}

#anim {width:50%}

#boutoncontactaccueil { width:180px; text-align: center; margin-left: auto; margin-right: auto;margin-top:8%;margin-bottom: 5%; border-radius: 50px; border: #06f6ea solid 0.5px; height:75px; box-shadow:  0 0 7px #fff, 
    0 0 5px #06f6ea, 
    0 0 22px #bafdef,   
    0 0 47px #bafdef80, 
    0 0 80px #bafdef50  }
               

               
               
.boutoncontact { width:200px; text-align: center; margin-left: auto; margin-right: auto;margin-top:1%;margin-bottom: 14%; border-radius: 50px; border: #395B64 solid 1px; padding:-1%; height:75px;box-shadow:  0 0 4px #fff,
    0 0 5px #06f6ea, 
    0 0 22px #bafdef,   
    0 0 47px #bafdef80, 
    0 0 80px #bafdef50  }     

.boutoncontactportfolio   { width:200px; text-align: center; margin-left: auto; margin-right: auto;margin-top:6%;margin-bottom: 8%; border-radius: 50px; border: #06f6ea solid 0.5px; height:75px; padding:-1%;box-shadow:  0 0 7px #fff, 
  0 0 5px #06f6ea, 
  0 0 22px #bafdef,   
  0 0 47px #bafdef80, 
  0 0 80px #bafdef50 }      
               

.contactezmoi { margin-top:3%; font-size: 1.1em; text-align: center;margin-left: auto;margin-right: auto; padding:2%; color:whitesmoke;}

.contactezmoisite { margin-top:0%; font-size: 1.1em; text-align: center;margin-left: auto;margin-right: auto; color: whitesmoke; background-color:#012934; clear:both; padding-top:7%; padding-bottom:-3%}

.contactezmoinoir {color:whitesmoke; font-size: 1.1em;}


.green2 {margin-top:-4.5%; margin-bottom :2%; opacity: 0.6 }



/* PAGE ACCUEIL ANNIMATION */



#divaccueil{margin-top:20%; background-color:pink;}
#bodyaccueil { 
    background-color:#012934;
    padding:0;
            margin:0;
            display: flex;
            align-items: center;
            justify-content: center;
            flex-direction: column;
}

#bodyaccueil2{
            padding:0;
            margin:0;
            display: flex;
            align-items: center;
            justify-content: center;
            flex-direction: column;
            background-color:#012934;
        }
        

@keyframes gradient-animation {
  0% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0% 50%;
  }
}
        .container{
            margin-top:8%;
            margin-bottom:3%;
            transform-style: preserve-3d;
            display: flex;
            transform: perspective(1000px) rotateX(-20deg) rotateY(20deg);
            flex-flow: row wrap;
            gap:5px;
            width:300px;
            animation: rotate 20s linear infinite alternate;
            z-index:1;
        }
        .cube{
            width:50px;
            height:50px;
            position: relative;
            background-color: #06F6EA;
            transform-style: preserve-3d;
            animation:  1.5s anim linear infinite alternate;
            animation-delay: var(--i);
             z-index:1;
        }
        .cube::before{
            content: "";
            position: absolute;
            transform-style: preserve-3d;
            transform-origin: bottom;
            left: 0;
            background-color: #1d7870;
            width:100%;
            height:100%;
            transform: rotateX(90deg);
             z-index:1;
        }
        .cube::after{
            content: "";
            position: absolute;
            transform-style: preserve-3d;
            transform-origin: right;
            top: 0;
            background-color: rgb(11, 131, 147, 0.9);
            width:100%;
            height:100%;
            transform: rotateY(-90deg);
             z-index:1;
        }
        .cube1{
            width:100%;
            height:100%;
            background-color: rgb(246, 124, 43, 0.9);
            transform-style: preserve-3d;
            position: absolute;
            transform: translateZ(-50px);
            animation:  1.5s anim2 linear infinite alternate;
            animation-delay: var(--j);
             z-index:1;
        }
        .cube1::before{
            content: "";
            position: absolute;
            transform-style: preserve-3d;
            transform-origin: left;
            left: 0;
            background-color: rgb(247, 103, 7);
            width:100%;
            height:100%;
            transform: rotateY(-90deg);
             z-index:1;
        }
        .cube1::after{
            content: "";
            position: absolute;
            transform-style: preserve-3d;
            transform-origin: top;
            top: 0;
            background-color: #ee05fa;
            width:100%;
            height:100%;
            transform: rotateX(90deg);
             z-index:1;
        }
        
        @keyframes anim {
            0%{
                transform: translateZ(0px);
            }
            50%{
                transform: translateZ(0px);
                background-color: rgb(212, 231, 231);
            }
            100%{
                transform: translateZ(-50px);
            }
        }
        @keyframes anim2 {
            0%{
            }
            50%{
                background-color: rgb(212, 231, 231);
            }
            100%{
            }
        }
        @keyframes rotate{
            from{
                transform: rotateX(-360deg) rotateZ(-360deg);
            }
            to{
                transform: rotateX(360deg) rotateZ(360deg);
                background-color: var(--back);
            }
        }
    .root{
        --i:2s;
        --back:#fff;
    }


#boutonentrer { width:200px; text-align: center; margin-left: auto; margin-right: auto;margin-top:17%;margin-bottom: 15%; border-radius: 40px; border: #06f6ea solid 0.5px; height:55px; box-shadow:  0 0 7px #fff, 
    0 0 5px #fff, 
    0 0 12px #06F6ea,   
    0 0 20px #06F6ea, 
    0 0 45px #06F6ea ;
    padding-top: 12px;
    font-size:1.8em;
    text-decoration: none;
    color:#06F5EA;
    z-index:99;
}

.imagelogofooteraccueil {width:20%; text-align: center; margin:auto; padding-top:3%;filter: drop-shadow(1px 1px 2px #06F6EA); line-height: 0.5em; padding-bottom: -20px; }

#mentionsaccueil {margin-bottom:5%; text-align:center;color: whitesmoke; font-family: 'Courier New', Courier, monospace; padding-bottom:55px; margin-top: 0%;  line-height:1em;font-size:0.8em;}




/*EN-TÊTE */

header {
  position:fixed;
  top :0; 
  left:0; 
  width: 100%;
  z-index:99;
background-color: #012934;
}



.imagelogo {
  width:10%;
  padding-top:10px }



.nav-wrapper {
	display: flex;
	position: sticky;
	flex-direction: row;
	flex-wrap: nowrap;
	width: 100%;
	height: auto;
	z-index: 90;
    background: linear-gradient(0deg, rgba(1,36,46,1) 0%, rgba(1,41,52,1) 40%, rgba(1,41,52,1) 100%);

  align-items: center;
  justify-content: center;
  margin-bottom: 0;
}

.logo-container {
	
  margin-right:auto;
  padding-left:1%;
  align-content: center;
}


.nav-container {padding-right:20px
}
.nav-tabs a {color:whitesmoke}

.nav-tabs {
	display: flex;
	font-weight: 400;
	font-size: 18px;
	list-style: none;
  padding-right:0;
  color:whitesmoke;
  margin-top:0
}

.nav-tab a:hover {
  color: #06F5EA;
  text-decoration: overline;
  cursor: pointer;
  transform: scale(1.2);
  transition-duration: 0.5s;
}

.nav-tab:not(:last-child) {
	padding: 10px 60px;
}

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

.nav-tab,
.menu-btn {
	cursor: pointer;
}

.hidden {
	display: none;
}


.background-video {
  width: 100%;
  object-fit: cover;
  position:relative;
  margin:auto
     
  }
.imagelogo {width:40%;filter: drop-shadow(1px 1px 2px #bafdef); }
.logo {width:100%; text-align: center;  margin-bottom: -1%; background-color: #012934; top:0}


nav {
  text-align: center; justify-content:space-around; display: inline-flex; width: 100%;height: 1.4em;  margin-bottom: 1%; margin-top:-1%;color:#c0d5d0 }

nav a {
  display: block; padding:1%; text-align: center;   color:#c0d5d0; font-weight:200; font-size: 1em;}

nav a:hover {
  color: #bafdef; text-decoration: overline; cursor: pointer; transform: scale(1.2); transition-duration: 1s; }

 
#responsive {
    margin:auto; margin-top: 0;  overflow: hidden; margin-bottom:-1%; padding-top:-2%; width: 100%;  text-align: center; }  

.texteanime {
  display: block; text-align:center; margin-bottom:5% ; font-family: 'VT323', monospace; font-size:3em ; margin-top:0; font-weight: 100; ;color:#395b64; text-shadow: 
  0 0 1px #c0d5d0,
  0 0 1px #c0d5d0,
  0 0 1px #c0d5d0,
  0 0 1px #c0d5d0,
  0 0 1px #c0d5d0; }      


.box { text-align:center;}
.texteacentrer {display: block; color: whitesmoke; text-decoration:underline solid 0.5px ; }

  

/* FOOTER*/

/* BANDEAU CONFIANCE et bandeau logo */

 .carousel-track {
  display: flex;
  animation-fill-mode: forwards;
  animation: roll 45s linear infinite;
}

.confiance {
  width: 20vw;
  height: 100%;
  object-fit: cover;
  text-align:center;
  filter: opacity(60%);
  padding-bottom:3%;

}

.conf {width:20vh}

.bandeauconfiance {
display:block;
text-align:center;
margin-right: auto;
margin-left:auto;
overflow: hidden;
position: relative;
margin-top:4%;

}

.texteconf {
    text-align:center;
    margin-right:auto;
    margin-left:auto;
    color:whitesmoke;
    font-weight:100;
    margin-bottom:0;
    clear:both;
    font-size:0.8em;
    line-height:0.9em;
}

@keyframes roll {
  0% {
    transform: translateX(0);
}
100% {
    transform: translateX(-300vw);
}
}

/* bandeau logo */

.bandeaulogo {
  width: 20vw;
  height: 100%;
  object-fit: cover;
  text-align:center;
}

.conf2 {width:7vw}


     
   /* FOOTER*/   


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

.texteanimedubas {
  color:grey;display: block; text-align:center; font-size:3.5em ; font-weight: 100;margin-top:4%; margin-bottom:4%; text-shadow: 
  0 0 1px #c0d5d0,
  0 0 1px #06f6ea,
  0 0 1px #c0d5d0,
  0 0 1px #c0d5d0,
  0 0 1px #c0d5d0; }


.logofooter {margin: 0; padding: 0;}


.footer {text-align: center;margin-top:-2% ; background: rgb(2,59,77);
background: rgb(2,45,57);
background: linear-gradient(180deg, rgba(2,45,57,1) 0%, rgba(1,41,52,1) 49%, rgba(1,38,48,1) 100%);  width:100%;
  }
 


.footermentions  {text-align: center;  margin-bottom: 0; display: block;width: 100%; bottom: 0; line-height: 1em; height: auto;padding-top:-10%} 


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


.anim {width:40%}


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

#fondanime {
  display: flex;
  justify-content: center;
  align-items: center;
  background: #395b64;
  height: 0;
  animation: animate-color 1s linear infinite; } 


@keyframes animate-color {
  0% {
      filter: hue-rotate(0deg);
  }
  100% {
      filter: hue-rotate(360deg);
  }}

.loader {
  position: relative;
  margin-top: -10%;
  margin-bottom: 0;
  margin-left:22%}

.loader span {
  position: absolute;
  top: 0;
  right:0;
  width: 20px;
  transform-origin: right;
  transform: rotate(calc(40deg * var(--i)));}

.loader span:before {
  content: '';
  position: absolute;
  left: 0;
  width: 30px;
  height: 30px;
  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);}

@keyframes animate {
  0% {
      transform: translate(0) scale(0.1);
  }
  50% {
      transform: translate(-100px)  scale(0.3);
  }
  100% {
      transform: translate(10 px) scale(0.1);
  }}



/* page offre */
 #bodyoffre  { background-color:#012934;  font-weight: 300; }
 #mainoffre {padding-bottom:10%;background:#012934;  font-weight: 300; }
 .presentationoffre {width:60%; padding-left:2%;}
 .containeroffre { clear:both;
  display: flex;
  padding-top:5%;
  padding-bottom:15%; 
}
.offretext {color:whitesmoke; padding-left:2%; font-size: 1.1em;padding:1%}
.imgoffre { padding-left:15%; padding-right: 1%;text-align:center; margin:auto; width:70%}
.blancoffre {display:block; color:whitesmoke; text-align:center; margin-right:auto; margin-left:auto}

.modalView {
  width:300px;
  position: static;
  border-radius: 5px;
  display: flex;
  justify-content: center;
  align-items: center;
  text-align:center;
  margin-left:50%;
  background: #395b64;
  transform: translate(-50%, -50%);
  padding: 20px 20px;
  font-size: 1.2rem;
  -webkit-box-shadow: -1px 2px 30px -8px rgba(0, 0, 0, 0.62);
  -moz-box-shadow: -1px 2px 30px -8px rgba(0, 0, 0, 0.62);
  box-shadow: -1px 2px 30px -8px rgba(0, 0, 0, 0.62);
  border:1px solid orange;
  margin-top:-20%
}

.modalView > .modalView__content {
  color: whitesmoke;
  
}
.modalView > .modalView__content.centered {
  text-align: center;
}


.modalView__content p {
  font-size: 1rem;
}

#modalView__closeBtn {
  position: absolute;
  background: orange;
  width: 35px;
  border-radius: 35px;
  height: 35px;
  right: -17px;
  top: -17px;
  color: whitesmoke;
}

#modalView__closeBtn {
  cursor: pointer;
}
#modalView__closeBtn:after,
#modalView__closeBtn:before {
  content: "";
  height: 20px;
  width: 20px;
  border-top: 3px solid whitesmoke;
  position: absolute;
  top: 13px;
  right: 0px;
  -moz-transform: rotate(-45deg);
  -ms-transform: rotate(-45deg);
  -webkit-transform: rotate(-45deg);
  transform: rotate(-45deg);
}
#modalView__closeBtn:before {
  color: whitesmoke;
  right: 14px;
  -moz-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  -webkit-transform: rotate(45deg);
  transform: rotate(45deg);
}
#modalView__closeBtn:hover {
  background-color: #00FFFF;
}



/* PAGE ACCUEIL */

.alignleft1 {margin-top:3%; font-size: 1.1em; text-align: left; padding:2%; color:whitesmoke;}

#titreunpageindex {font-size:1.7em; padding:0; margin-top:2%; margin-bottom:5%;color:#395b64; text-shadow: 
  1px 0 1px #c0d5d0,
  1px 0 1px #06f6ea,
  1px 0 1px #c0d5d0,
  1px 0 1px #c0d5d0,
  1px 0 1px #c0d5d0;}

#titrepageindex {margin-top:5%; }

#pageaccueil { 
  background-color:#012934 
; color :#c0d5d0; width:100%; text-align:center; margin-left:auto; margin-right:auto; padding-bottom:3%; }

@keyframes gradient-animation {
  0% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0% 50%;
  }
}
  

.liennormal {color:#c0d5d0 ; text-decoration:underline;}

.headeraccueil{
width:100%;
text-align:center;
font-size:1em;
padding-top:1%;
padding-bottom:1%;
margin-top: 1%;
position:sticky; top:0; z-index: 9;
line-height: 0.5em;
background-color: #012934; 
margin-bottom:5%}

.lienaccueil {color: #a5c9ca; border:#c0d5d0 solid 1px; text-decoration: none;
  width: 250px;
  text-align: center;
  margin-left: auto;
  margin-right: auto;
  margin-top: 3%;
  margin-bottom: 3%;
  border-radius: 50px;
  padding:15px}

#centreraccueil {width:100%; text-align:center; margin-left:auto; margin-right: auto; margin-bottom:5%; margin-top:1%}

.navaccueil { color: #c0d5d0;text-align: center; justify-content:space-around; display: inline-flex; width: 100%; }

.navaccueil a {color: #a5c9ca;  display: block; padding:1%; text-align: center; font-weight:200; font-size: 1em; }


.logoaccueil {width:100%; text-align: center;  margin-bottom: -1%; background-color:#012934; top:0;}

.texteanimeaccueil {
  display: block; text-align:center ; font-family: 'VT323', monospace; font-size:3em ; font-weight: 100; ;color:#012934; text-shadow: 
  1px 0 1px #c0d5d0,
  1px 0 1px #06f6ea,
  1px 0 1px #c0d5d0,
  1px 0 1px #c0d5d0,
  1px 0 1px #c0d5d0;
  -webkit-text-stroke: 1px rgb(57, 91, 100);
  padding-bottom:2%; line-height:1.8em;
}      

.presentation {
    display: flex; justify-content: space-around; clear:both; width:100%; margin-left :auto; margin-right :auto; margin-bottom :8%; text-align: center;}

   
    
    
    
  .cardindex1 {
      background-image: url("/photos/card1-pixeletrem-site.jpg");
      text-align: center;
      color: #395b64;
      justify-content: space-around;   
       background-position: center;
      background-size: cover;
      display: block;
   width:100%;
   min-height: 400px;
    margin:3%;
    box-shadow: 0 0 2px #ffffff80;
    animation-name: fadeinleft;
    animation-duration:2.5s;
    border-radius: 10px;
  }
  
    
.cardindex2 {
      background-image: url("/photos/card2-pixeletrem-identite.jpg");
      text-align: center ; 
      color: #395b64;
      justify-content: space-around;    
      background-position: center;
      background-size: cover;
      display: block;
    width:100%;
    min-height: 400px;
    margin:3%;
    box-shadow: 0 0 2px #ffffff80;
    animation-duration: 3.5s;
    animation-name: tourne;
    border-radius: 10px;
    }
    
   .cardindex3 {
      background-image: url("/photos/card3-pixeletrem-contenu.jpg");
      text-align: center; 
      color: #395b64;
      justify-content: space-around;    
      background-position: center;
      background-size: cover;
      display: block;
      width:100%;
      min-height: 400px;
      margin:3%;
      box-shadow: 0 0 2px #ffffff80;
      animation-name: fadeinright; 
      animation-duration: 2.5s;
      border-radius: 10px;
   }
  

    
    .details  {
      min-width: 80%;
      text-align: center;
      margin-top:65%;
      margin-bottom: 5%;
      border-top: 1px solid #ffffff37;
      -webkit-backdrop-filter: blur(15px);
      backdrop-filter: blur(15px);
      transition: ease 0.5s;
      background-color:#ffffff50;
      padding-bottom:10px;
     line-height: 1.2em; 
     font-weight:bold;
     }  

  

    
    .content {
      display: block;
      flex-direction: column;
      align-items: center;
    padding:1%;
  overflow: hidden;}
     
    
    .titrefondbleu { font-size: 1.2em; font-weight: bolder; color:#012934; padding-top:2%;}
    
    .fondbleuit {color:#012934;text-align: left; font-size: 1em; clear: both;  }
    
    .lienfondbleu {color:#012934; text-align: right; display: block; font-size:0.9em;}
    
    


.iconlist {display: flex; clear:both; width:95%; text-align: center; margin: auto ; margin-top:-5%}

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

.cardicon {display: block; margin:1%; width: 35%; margin-bottom: 5%;background-color:#2e4a5250; box-shadow: inset 5px 5px 19px rgba(162, 247, 247, 0.45), inset 5px 5px 19px rgba(162,247,247,0.3), inset -5px -5px 19px rgba(162,247,247,0.45); border-radius: 10px; padding:0.5%; font-size:0.9em}
/* 
.cardicon1 {animation: bounce 3s ease-out 1; animation-delay:4s;}
.cardicon2 {animation: bounce 3s ease-out 1; animation-delay:5s;}
.cardicon3 {animation: bounce 3s ease-out 1; animation-delay:6s;}
.cardicon4 {animation: bounce 3s ease-out 1; animation-delay:7s;}
.cardicon5 {animation: bounce 3s ease-out 1; animation-delay:8s;}

@keyframes bounce {
    70% { transform:translateY(0%); }
    80% { transform:translateY(-17%); }
    90% { transform:translateY(0%); }
    95% { transform:translateY(-9%); }
    97% { transform:translateY(-0%); }
    99% { transform:translateY(-4%); }
    100% { transform:translateY(0); }
}

*/
.cardicon a{color :#c0d5d0; text-decoration:none;}

.pixeletremcest { display:block; text-align: center; margin-bottom: 2%;}

#texteicones { margin-top:-3%; font-size: 1.5em; text-align: center;margin-left: auto;margin-right: auto; padding:1%; color: #a5c9ca;margin-bottom: 5%; font-weight: 200;}


.textcookies {font-size:0.8em; color:#a5c9ca; margin-top:5px;}
.textcookies a {font-size:1em; color:#a5c9ca; text-decoration:none;}
button{ width:100px; text-align: center; margin-left: auto; margin-right: auto;margin-top:0;margin-bottom: 2%; border-radius: 50px; border: #395B64 solid 1px; height:55px;color:#395B64; font-size:0.8em; padding-bottom:10px;  } 
button a {text-decoration:none; color:#395B64; font-size:1em}
.btncookie {background-color:#a5c9ca; width:100px; text-align: center; margin-left: auto; margin-right: auto;margin-top:0;margin-bottom: 1%; border-radius: 50px; border: #395B64 solid 1px; height:25px;color:#395B64; font-size:0.8em; padding-top:5px; padding-bottom:4px; }


/* PAGE SITE */



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

  #accueil {
    width:100%;  text-align: justify; margin: auto; display: block; clear: both; }

  .adroite {
    width:60%; padding-left:1%; padding-right:2%; text-align: justify; margin:1%; padding-top: 4%; padding-bottom: 2%; float: right;}

  .article1 {
    padding-left: 2%; padding-right:1%; margin-top: 2%; margin-bottom: 4%;}

  .areduire1 {
    max-width:30%; margin:auto;  overflow: hidden; float:left;
    animation-duration: 5s; margin-bottom: -5%;
      animation-name: descend;}

    @keyframes descend {
    from {
      transform:translateY(-500px) scale(0) ;
    }
    to {
      transform:translateY(0) scale(1) ;
    }
  }

  .contient { margin-bottom: -5%;
    animation-name: fadeinright; animation-duration: 6s; animation-delay:1s;} 

  @keyframes fadeinright {
    from {
      opacity: 0;
      -webkit-transform: translate3d(100%, 0, 0);
      transform: translate3d(100%, 0, 0);
    }
  
    to {
      opacity: 1;
      -webkit-transform: none;
      transform: none;
    }
  }

.contient2 {margin-bottom: -5%;
    animation-name: fadeinleft; animation-duration: 7s; animation-delay:2s;} 

  @keyframes fadeinleft {
    0% {
      opacity: 0;
      transform: translateX(-1000px);
   }
   100% {
      opacity: 1;
      transform: translateX(0);
    }}

.contient{position:relative; padding:2%}
.contient:hover .recouvrement  { opacity:1}

.contient2{position:relative; padding:2%}
.contient2:hover .recouvrement2 {opacity: 1;}


.recouvrement {opacity:0; background-color:whitesmoke; position:absolute; top:0; bottom:0; left:0; right:0; transition:0.2s ease; text-align: center; width:102%;height: 102%; padding:0; overflow: hidden; transform: translate(-20px);}

.recouvrement2 {opacity:0; background-color:whitesmoke; position:absolute; top:0; bottom:0; left:0; right:0; transition:0.2s ease; text-align: center; width:102%;height: 102%; padding:0; overflow: hidden; }



.siteinternet {
display:block; margin-bottom: 0; background-color: #c0d5d0}
  
.quelsite {
display:inline-flex;clear: both; margin-top: 3%; margin-bottom:0;} 
  
.imagesidentiques { width:35%; margin:auto; text-align: center; }
  
#imageacentrer {width:98%; text-align: center; margin:auto;box-shadow: 22px 20px 1px 1px #012934;}
    
  
.normal {
  padding-right:1%; text-align: justify; margin-left:0; padding-top :1%; margin :auto; width:65%;  }
  
  
#enlargeur {clear:both; display: block; text-align: justify; margin-top:3% ; padding-top: 3%; }
  
#votresite {display:flex; clear: both; margin-top: 0; width:100%}
  
.agauche {
   text-align: justify; padding :2%;font-weight: normal;width: 65%; }
  
.texteacentrer2 {
    display: block; color: whitesmoke; font-style: italic; text-align:center; padding:0; margin-top: -1%; }
  
#basique {width:100%; margin:auto; padding-top:2%; font-weight: 200;}
  
#areduire2 {width:98%; text-align: center;box-shadow: -22px 20px 1px 1px #012934;}

.siteeco {width:25%; margin-right:auto; margin-left:auto; margin-top:-3%; text-align:center;}
.divsiteeco {text-align:center; margin-left:auto; margin-right:auto;  background-color:#012934; font-size:1em}





  /* PAGE IDENTITE */

#h1identite {padding-top:15%}
#alone {
   padding-top:3%; padding-left: 4% ;margin-top: 0;  margin-bottom:3%; float: right; width:50%}
   
.insta {float:inline-end; width:20%; padding-left:1%; padding-right:1%; padding-bottom:0; padding-top:0;margin-top:-5px ; margin-bottom:-10px;}

.graphisme {
  display: flex; justify-content: space-around; clear:both; width:auto; margin-top:5%;}

.reduire {
  width : 100%;flex-shrink: 2; flex-basis: 10%; overflow: hidden; }

.reduire:hover {transform: scale(2);}
  .cardgauche:hover {transform:translate(-200px) scale(2);}
  .carddroite:hover {transform:translate(170px) scale(2);}

.card {
  text-align: center; 
  margin: 1%; color: white;justify-content: space-around;background: linear-gradient(300deg,#c0d5d0, #395B64,#012934);
  background-size: 180% 180%;
  animation: gradient-animation 1.5s ease infinite;font-size:0.8rem;
}

@keyframes gradient-animation {
  0% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0% 50%;
  }
}

#ajoute {
  padding-bottom: 2%; margin-top:2%; display: flex;}

.article1 {display: block; text-align: justify;}

#remonterunpeu {font-style: italic ; margin-bottom: 2%; margin-top: 0; padding-top: 0;}

#aligneragauche {padding:3%; text-align: justify ; }

.opacite{ width:100%; margin-left:0; padding-left:-2%; float: left;background-color: #c0d5d0; }

#cartes {width:100%; padding-left: -20%; ;background-color: #c0d5d0; }



#article2 {width: 40%; text-align:justify; padding-right:1%;padding-left:1%; background-image: url(/photos/carte-de-visite-pixeletrem-communication.png); ; background-repeat: no-repeat; margin-top:2%; margin-bottom:0;padding-bottom: 0; font-weight: 300; border-width: thin ; color:whitesmoke; text-shadow:black 2px 2px 2px; clear: both; display: block; ;
  background-size: contain; background-position:bottom; animation-duration: 3s; font-size:1em;
  background-color: #395b64;
    animation-name: tourne;}

  @keyframes tourne {
from {
  transform:translateY(-500px) scale(0) rotateY(0);
}
to {
  transform:translateY(0) scale(1) rotateY(360deg);
}}




#logoitallique {font-style:italic; margin-bottom:4%; width:100%; margin-top:-2%;}
blockquote {margin-left:0; margin-right:0;}

.acentrer {text-align: center; ; font-weight: 500; padding-top:5%; clear: both; font-size: 1.6em;}

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

.green {color :#83b81a;font-size: 1.1em; text-align: center;margin-left: auto;margin-right: auto; }

.titresurfondbleu {display: block; text-align:center ; font-size:1.2em ;color:whitesmoke;margin-top:12%; } 

#titrevillespageidentite {margin-top:-5%; font-size:2em; padding-bottom:3%; text-decoration:none}


/* PAGE REDACTION */

.listeredaction {list-style-position: inside;
    padding-left: 1em; 
    margin-left: 0; 
    text-align: left;
    clear:both;
}
    
    
#pageredaction {width:100%; padding :0; background-color:#012934}

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


.fondmetal {background-image: url(/photos/fond-photo2.webp);background-attachment: fixed;
  background-size:cover;
  background-repeat: no-repeat;
  margin-bottom:0%;
  animation-duration: 2s;
  animation-name: bounce;
    overflow:hidden; width:100%;
}


@keyframes bounce {
  0% {
     opacity: 0;
     transform: translateY(-2000px);
  }
  20% {
     opacity: 1;
     transform: translateY(40px);
  }
  30% {
     transform: translateY(-100px);
  }
  50% {
    opacity: 1;
    transform: translateY(30px);
 }
 60% {
    transform: translateY(-50px);
 }
  70% {
    opacity: 1;
    transform: translateY(20px);
 }
 85% {
    transform: translateY(-10px);
 }
  100% {
     transform: translateY(0);
  }
} 


.surfondmetal {color: white; background-color: #395b6460; margin-bottom: 0%;margin-left:auto; margin-right:auto; text-align: center; padding:1%; width :98%;}

.seo {
  display:block; padding-bottom: 0%; margin-bottom: 0%; padding-top:8% ; }

.seocentrer {
 text-align: justify; margin-bottom: 1%; }

#autres {text-align: justify;}





/* FLECHE POUR RETOUR HAUT DE PAGE */

#flecheremonter {
  display: none; 
  position: fixed; 
  top: 30%; 
  right:  4%; 
  z-index: 9; 
   
  color: #395B64; 
  cursor: pointer; 
  padding-bottom: 10px; 
  font-size: 2em; 
  border: solid white 1px; 
  border-radius: 10px;
  background-color:#a5c9ca7c;
  border-width: thin;
  width:2em;
  text-align: center;}


#flecheremonter:hover {
  background-color: white; color:#395b6462; border: #395b64 solid;}




/* PAGE CONTACT */

.mainpagecontact {background-color:#012934 ;}

#titresduhautpagecontact {color:whitesmoke; background-color:#012934;}

.paonfonce {font-size:2em ;color:white; margin-bottom:5%; margin-top:-2%; padding-top:8%; padding-bottom:3%;text-shadow: 1px 1px 1px #395b64, 1px 1px 1px #06f6ea, 1px 1px 1px #395b64, 1px 1px 1px #395b64, 1px 1px 1px #395b64;
}


#responsivecontact {
  margin:auto; overflow: hidden; margin-bottom:-1%; width: 100%;  text-align: center;}


.animentete {border: solid 1px #395b64;}

.glass  {

  text-align: center;
  margin-left:auto;
  margin-right:auto;
  margin-top:5%;
  margin-bottom: 5%;
  border: 1px solid rgba( 255, 255, 255, 0.18 );
  border-radius: 10px;
  box-shadow: 0 8px 32px 0 rgba( 31, 38, 135, 0.25 );
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
  transition: ease 0.5s;
  background: rgba( 255, 255, 255, 0.25 );
  padding-bottom:20px;
  padding-top: 30px;
 line-height: 1.2em; 
 font-weight:bold;
 }  


.contacttel 
{line-height: 2em; font-size: 1.5em; font-weight: 400 ; color:#012934; text-shadow: 
  0 0 1px white,
  0 0 1px white,
  0 0 1px white,
  0 0 1px white,
  0 0 1px white; }
  
.contacttel a {text-decoration:none; font-weight: 400;color :#012934; text-shadow: 
  0 0 1px white,
  0 0 1px white,
  0 0 1px white,
  0 0 1px white,
  0 0 1px white; }

 /*.contacttel {line-height: 2em; font-size: 1.5em; font-weight: 100 ; color:rgba(245, 245, 245, 0.926);text-shadow: 
  0 0 2px #2e4a52,
  0 0 2px #395b64,
  0 0 2px #395b64,
  0 0 2px #395b64,
  0 0 2px #395b64; }
  
  .contacttel a:hover {color:#395b64;}
  .contacttel a {color:#39b6410; text-shadow: 
  0 0 2px #2e4a52,
  0 0 2px #395b64,
  0 0 2px #395b64,
  0 0 2px #395b64,
  0 0 2px #395b64;}

*/


/* PAGE  TARIFS */


.mettreenavant {font-family: 'Courier New', Courier, monospace;text-align: justify; margin:auto; font-weight: 300; width: 90%;padding-top: 1%; padding-bottom: 5%; font-size: 0.7em;}

#devisrouge {color:red;}




/* CSS POUR ACORDEON */



.acordeon { margin-top:-5%; padding-top: 8%; margin-bottom: 5%; background-color: #012934;
}


.acordeon input{
	display:none; 
	}

.labelacordeon{
	display:block;
	width:90%;
text-align: center;
  background-color:#395B64;
	text-align:center;
  margin-left:auto;
  margin-right:auto;
	cursor:pointer;
  margin-top: 20px;
 border:solid 0.5px #a5c9ca;
  color:#a5c9ca;
  border-radius:2px
	}

.liste {text-align:left; color:whitesmoke}

.acordeon ul{
	width:100%;
  padding:2%;
	text-align:left;
  color: #395b64;
	}
	
.acordeon div{
	position:relative;
	height:0;
  width:100%;
	overflow:hidden;
	transition:height .5s;
	}
	
#ligne1:checked ~ #cont1{
  height: auto; text-align: center; padding-left:3%; padding-right:7%; width:95% ;background-color:#012934; color:whitesmoke;
  }
	

	
#ligne2:checked ~ #cont2{
	height: auto; text-align: center; background-color:#012934; color:whitesmoke;;padding-left:3%; padding-right:7% ;width:95% 
	}
	
#ligne3:checked ~ #cont3{
	height: auto; text-align: center; background-color:#012934; color:whitesmoke;; padding-left:3%; padding-right:7%; width:95%  }
	
#ligne4:checked ~ #cont4{
	height: auto; text-align: center; background-color:#012934; color:whitesmoke;; padding-left:3%; padding-right:7%; width:95%  }



.areduirebeaucoup2a {width:20%; text-align: center;margin: auto; animation-duration: 2s; animation-name: arrivea; animation-delay: 0.5s; padding-top:2%;clear:both}

@keyframes arrivea {
  from {
    transform:translateX(8000px) scale(1) ;
  }
  to {
    transform:translateX(0) scale(1) ;
  }}


  .areduirebeaucoup2b {width:20%; text-align: center;margin: auto; animation-duration: 2s; animation-name: arriveb; animation-delay: 2s; padding-top:2%;}

  @keyframes arriveb {
    from {
      transform:translateX(-8000px) scale(1) ;
    }
    to {
      transform:translateX(0) scale(1) ;
    }}

    .areduirebeaucoup2c {width:20%; text-align: center;margin: auto; animation-duration: 2s; animation-name: arrivec; animation-delay: 4s; padding-top:2%;}

@keyframes arrivec {
  from {
    transform:translateX(8000px) scale(1) ;
  }
  to {
    transform:translateX(0) scale(1) ;
  }}

/*css tete qui tourne */

  .interlocuteur { 
  display: flex;
padding:2%;
 align-items: inline-end;
 background-color:#012934;
 margin-top:-2%;
 margin-bottom:-2%
}

.photo-moi { margin:0; display:flex;}


.untrucadire {text-align:left; width:10%; clear:both; background-color:#395b64;
  box-shadow:  0 0 7px #fff, 
  0 0 2px #395B64, 
  0 0 22px #395B64,   
  0 0 47px #395B6450, 
  0 0 80px #06F6EA80 ;
  animation: rotatemoi 4s infinite linear;
  transform-style: preserve-3d;
    border-radius:10px;
}
  
  @keyframes rotatemoi {
  0% {
      transform: rotateY(0deg);
  }
  100% {
      transform: rotateY(360deg);
  }
}



.phrase {
  color: whitesmoke;text-align:left; padding-left:5%; padding-right:5%;padding-top:5%; font-size:1.3em;text-shadow: 1px 1px 1px #395b64, 1px 1px 1px #06f6ea, 1px 1px 1px #395b64, 1px 1px 1px #395b64, 1px 1px 1px #395b64;
}



/* FORMULAIRE CONTACT */


form input , form textarea { display:block;
  margin-top: 40px;
  padding:10px;
  width:80%;
  font-family: 'Poppins', sans-serif; 
  margin-left: auto;
  margin-right: auto;
  background-color:rgba(255,255,255,0.75) ; color:  #395b64; font-weight: 300; font-size: 1em;}
  
  .questionhumaine {font-size:0.8em; font-style:italic; margin-top:-10px; background-color:#06F6EA; color:whitesmoke; line-height:1.5em; display:block; padding-left:10%; padding-right:10%; width:50%; margin-right:auto; margin-left:auto; font-weight:300;color:#395b64; border-radius:20px;}

.messageenvoye { font-size:2em; font-weight:200; background-color:#395b64; color:#06f6ea;}  

#boutonenvoi {width: 170px; background-color:  #395b64; color: #a5c9ca; margin-bottom: 3%; margin-top: 3%; border-radius :50px;}

#boutonenvoi:hover {color:#06f6ea}

textarea { min-height:300px}

#idprenom {display:none; } 

.fondduformulaire  {background: rgba( 165, 201, 202, 0.55 );
backdrop-filter: blur( 8px );
-webkit-backdrop-filter: blur( 8px );
border-radius: 10px; 
border:solid 1px rgb(165, 201, 202);
margin-bottom:10%; padding-bottom:5%;
animation-duration: 1s; animation-name: descend; animation-delay: 0.2s 
    
}

@keyframes descend {
  0% {
    opacity: 0;
    -webkit-transform: translate3d(0, -100%, 0);
    transform: translate3d(0, -100%, 0);
  }
  100% {
    opacity: 1;
    -webkit-transform: none;
    transform: none;
  }
}

.fondfixe2 {background-image: url(/photos/pixeletrem-fond-cube.svg);
  background-attachment: fixed;
  background-repeat: no-repeat;
  background-position: center;
  background-size:cover;
  margin-top:0%;
padding-bottom:5%;
margin-left: auto;
margin-right: auto;
text-align: center;
padding-top: 12%;
padding-left:5%;
padding-right:5%;

}


/*MENTIONS LEGALES */

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

.credits a {color:#bafdef}

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

.texteacentrer2b {
  display: block; color: #395b64; font-style: italic; text-align:center; padding:2%; margin-top: 30%; margin-bottom: 5%;font-family: 'Courier New', Courier, monospace}

#mentionslegales {color: #395b64; font-size: 1.5em; font-weight: 600;text-align: center; margin: auto; padding-top: 15%; padding-bottom: 2em; }

.messagedefilant {
  display: block;
  margin-top:20% ;
  margin-bottom:15%;
  padding: 10%;
  overflow: hidden;
  position: relative;
  width: 90%;
  color:#395b64;
  font-weight: 900;
}
 
.messagedefilant div {
  position: absolute;
  min-width: 100%;
}
 
.messagedefilant div span, 
.messagedefilant div:after {
  position: relative;
  display: inline-block;
  font-size: 2rem;
  white-space: nowrap;
  top:0;
}
 
.messagedefilant div span {
  animation: defilement 12s infinite linear;
 ;
}
 
.messagedefilant div:after {
  position: absolute;
  top:0; left:0;
  content:attr(data-text);
  animation: defilement2 12s infinite linear;
 ;
}
 
@keyframes defilement {
  0% { margin-left: 0; }
  100% { margin-left: -100%; }
}
 
@keyframes defilement2 {
  0% { margin-left: 100%; }
  100% { margin-left: 0%; }
}



 /* PORTFOLIO */
 .basduportfolio {background-color:#012934;margin-top:-5%; padding-top:8%;}
.titrecrea {padding-top:15%}
#fondblancsursites {width:100%; text-align:center; margin-left:auto; margin-right:auto; margin-top:3%; margin-bottom:0; background-color: whitesmoke; }
#titrecrea {margin-top: 2%; margin-bottom: 8%; font-weight: 200;color:whitesmoke}
#techno { width:50%; padding:3%; }
.pageportfolio {text-align: center; background-color:#012934; margin-top:-1%; padding-top:9%;}
 
.creaweb {display:inline-flex; width:100%; text-align: center;}

.reduire3 {width:70%; text-align: center; margin-top:2%;}

.videomaquette {width:25%; text-align: center; background-color: black; padding:20px; margin:20px}

.maquettes {width:100%; display:flex; text-align:center;margin:auto; justify-content: space-around ; margin-top: 8%;}

.messites {text-align: center;  color:whitesmoke;  padding: 0; margin:1px ; display:inline; width:50%;float:left; background-color: white; border:0;animation-duration: 2.5s; animation-name: tourne; animation-delay: 0.5s}
.messites2 {width:50%; color:whitesmoke;margin:1px; ;  border:0; font-weight: 100; font-size: 1em; padding-top:140px}
.soshin {background-color:#E2C785;}
.sitecb {background-color:#977665;}
.sitecaryl {background-color:#598393;}
.sitenrj {background-color:#a673b0; animation-duration: 1.5s; animation-name: descend; animation-delay: 0.7s}
.sitevin {background-color:#570f2a; animation-duration: 2.2s; animation-name: descend; animation-delay: 0.9s}
.sitevert {background-color: green; animation-duration: 2.5s; animation-name: descend; animation-delay: 0.9s}
.sitefonce {background-color: #272c2d;animation-duration: 3.5s; animation-name: descend; animation-delay: 0.5s}
.sitedore {background-color: #dcb253;animation-duration: 3s; animation-name: fadeinleft; animation-delay: 0.8s}
.siteorange {background-color: #dd6229;animation-duration: 4.5s; animation-name: descend; animation-delay: 0.9s}
.sitevertclair {background-color: rgb(68, 186, 5);animation-duration: 5.5s; animation-name: fadeinright; animation-delay: 1s}
.siteorangeclair {background-color: #d1821e;animation-duration: 3s; animation-name: descend; animation-delay: 0.3s}

.messites2 a   {color:whitesmoke; font-weight: 300; font-size: 1.1em;}
.messites2 strong {font-weight: 100;}
 
#maquettessites {max-width: 60%; margin-top: 8%; text-align:center; margin-left:auto; margin-right:auto;}

.messitesit {text-align: center;  color:whitesmoke;  padding: 1%; margin-top:1%; margin-left:auto; margin-right: auto; margin-bottom:5%; font-style:italic; font-size:0.9em;}

.contenumodale {display:flex; margin:auto; text-align: center; width: 100% ;}
.photomodale {width:30%}

.show-modal { width:auto;
 font-size: 1.1em;
    background-color: #012934;
  cursor: pointer;
  color: whitesmoke;
  border:none;
  font-weight: 100;
  text-decoration:underline; }

.show-modal:hover {color:#06f6ea; }

.close-modal {
	position: absolute;
	top: 1.2rem;
	right: 2rem;
	font-size: 1.5em;
	color: #395b64;
	cursor: pointer;
	border: none;
	background: none;
}

.close-modal:hover {color:#012934}


.hidden {
	 visibility: hidden;
}

.modal {
	position: absolute;
	display: block;
	left: 50%;
	transform: translate(-50%, -120%);
	width: 60%;
  border: solid #c0d5d0 0.5px;
	background-color:white;
	padding: 3rem;
	box-shadow: -120px 100px 1px 1px #012934;
	z-index: 10;
  border: solid 1px #012934;
}
/*
.overlay {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-color: rgba(0, 0, 0, );
	backdrop-filter: blur(3px);
	z-index: 5;
}