html, body {
margin: 0;
padding: 0;
}

html {
background-color: #fafffb;
}

/* pied de page fixé en bas de la page */
body {
min-height: 100vh;
display: grid;
grid-template-rows: auto 1fr auto;
}

body.stellae {
display: block;
min-height: inherit;
}

h1, h2 {
font-weight: 500;
}

h1 a, h2 a {
font-weight: 500;
}

h3 {
margin: 0;
padding: 0;
font-weight: 500;
font-size: 1.3em;
}

a {
text-decoration: none;
font-weight: 400;
color: #000;
}


a:hover {
text-decoration: none;
opacity: 0.5;
cursor: pointer;
}


a.bouton {
  display: inline-block;
  padding: 20px;
  color: #dadadb;
  background: #000;
  text-align: center;
  margin: 0 auto;
  font-weight: 300;
  font-size: 1em;
  font-weight: 300;
  letter-spacing: 0.02em;
}

a.bouton:hover {
cursor: pointer;
color: #fff;
opacity: 1;
}
  
  

strong, b {
font-weight: 400;
}



html {
font-family: 'Roboto', sans-serif;
background-color: #fafffb;
}

.flex {
display: flex;
}

.container  input {
font-size: 2em;
border: 1px solid #dfe1e5;
padding: 5px;
text-align: center;
letter-spacing: 0.5em;
width: 80%;
border-radius: 24px;
max-width: 400px;
}

textarea:focus, input:focus{
    outline: none;
}

button {
  border: none;
  background: #eaeaeb;
  color: #000;
  padding: 15px 32px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 1em;
  cursor: pointer;
  letter-spacing: 0.03em;
  font-weight: 400;
  transition: 0.5s;
}

button:hover {
background: #f4f4f4;
}


button.ulybutton {
  border: none;
   background-image: linear-gradient(to right top, #00074e, #00418c, #007bbf, #00b7e4, #00f4ff);
  color: #dadadb;
  padding: 15px 32px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 0.9em;
  cursor: pointer;
  letter-spacing: 0.03em;
  font-weight: 400;
  transition: 0.5s;
  box-shadow: 10px 5px 15px #000;
}

button.ulybutton:hover {
 color: #fff;
 }


.number {
letter-spacing: 1em;
font-size: 3em;
}


.animation-chiffre {

  font-size: 21em;
  font-weight: bold;
  color: #000;
  width: 80%;

  position: absolute;
  top: 45%;
  left: 50%;
  transform: translate(-50%, -50%);

  text-align: center;

  opacity: 0;
 transition: opacity 0.5s;
}

.fade-in-out {
opacity: 1;
}

/* accueil */

.main {
padding: 0 50px 20px 50px;
}

h1 {
font-size: 5vw;
color: #000;
}


.homepageh1 {
padding-top: 50px;
}

.homebloc  {
justify-content: space-between;
}

.homebloc div {
padding: 10px;
width: 30%;
height: 300px;
background: #ccc;
}

p.big {
padding-top: 200px;
font-size: 3em;
font-weight: 300;
color: #000;
}

.homemain {
margin-bottom: 100px;
}

/* footer */

.footer {
bottom: 0;
background: #000;
width: 100%;
}

.footerlongpage {
position: absolute;
bottom: 0;
min-height: 28px;
}

.footer ul {
margin: 0;
padding: 5px 5px 7px 5px;
}

.footer ul li {
display: inline;
list-style: none;
color: #fff;
}

.footer ul li a {
text-decoration: none;
letter-spacing: 0.03em;
font-size: 0.8em;
}

.footer .right {
padding-right: 7px;
}

.footer .right ul li a {
color: #fafffb;
padding-left: 10px;
font-weight: 400;
font-size: 0.8em;
opacity: 0.8;
}

.footer .left {
padding-left: 7px;
}

.footer .left ul li a {
color: #fafffb;
opacity: 0.6;
padding-right: 10px;
font-weight: 400;
font-size: 0.7em;
}

.footer ul li a:hover {
opacity: 1;
color :#fff;
}


.left {
float: left;
}

.right {
float: right;
}

.clear {
clear: both;
}

.footer ul li a img {
display: inline-block;
padding-right: 5px;
}

/* inner pages */

.global {
padding: 70px 129px 121px 129px;
}

.global h1 {
font-size: 2em;
}

.global h2 {
margin-top: 77px;
}

.global p {
font-size: 1.3em;
line-height: 1.3em;
color: #000;
font-weight: 300;
margin-top: 0;
padding-top: 0;
}


.global ol  li, .global ul li {
font-size: 1.3em;
margin-bottom: 15px;
color: #000;
font-weight: 300;
}


/* FAQ */

h2.h2faq {
color: #000;
padding: 10px 24px 10px 0;
display: inline-block;
margin: 0;
font-weight: 500;
}

p.pfaq {
padding: 0 20px 0 0;
}

.questionfaq {
margin: 100px 0 100px 0;
}

p.violet {
color: #45008b;
font-weight: 400;
}

p.aste {
font-size: 0.9em;
}

span.iconaste {
position: relative;
top: -1px;
}

p.aste span.auteur {
font-size: 0.8em;
font-weight: 500;
}
/* use */

ul.procedure {
background: #020297;
color: #fff;
padding: 35px 30px 25px 55px;
margin: 30px 0 30px 0;
}

ul.procedure li {
color: #fff;
}

ul.procedure li a {
color: #fff;
}

/* how to */

ul.howto {
color: #020297;
padding: 0;
margin: 0;
}

ul.howto li {
color: #020297;
list-style: none;
}

/* logo */

.logo {
     max-width:400px;
     margin: 0 auto;
     text-align:center;
padding-bottom: 5px;
}

a.logo {
display: inline-block;
background: linear-gradient(to left, #00ffff, #0000ff);
background-clip: text;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
  text-transform: uppercase;
 letter-spacing: 0.2em;
  font-weight: 400;
  transition: 0.5s;
  font-size: 0.8em;
}

a.logo:hover {
 cursor: pointer;
 opacity: 1;
}

/* healing codes */

.samples {
justify-content: flex-start;
flex-wrap: wrap;
}

p.code {
display: inline-block;
background: #0101b7;
padding: 5px 7px 5px 7px;
margin: 0 7px 7px 0;
color: #fff;
font-size: 0.9em;
font-weight: 300;
}

p.code span {
display: inline-block;
padding-right: 5px;
font-weight: 500;
}


/* email */

.arobase::before {
content: "\000040";
}

p.codedwithlove {
margin-top: 200px;
font-size: 0.8em;
color: #999;
}

p.links {
font-size: 1.1em;
margin: 0;
padding: 0 0 5px 0;
}

p.links span.author {
display: inline-block;
padding-left: 15px;
font-size: 0.9em;
color: #999;
}

/* chat */


#code {
     opacity: 0;
     transition: opacity 1s;
   }

   /* Animation de fondu pour afficher progressivement le code */
   #code.show {
     opacity: 1;
   }

.container {
  width: 90%;
  margin: 0 auto;
  text-align: center;
  position: absolute; /* postulat de départ */
   top: 43%; left: 50%; /* à 50%/50% du parent référent */
   transform: translate(-50%, -50%); /* décalage de 50% de sa propre taille */
}

#code {
font-weight: 500;
font-size: 4em;
letter-spacing: 1em;
margin: 30px 0 30px 0;
position: absolute; /* postulat de départ */
 top: 0%; left: 53%; /* à 50%/50% du parent référent */
 transform: translate(-50%, -50%); /* décalage de 50% de sa propre taille */
color:  #000;
margin-top: -1%;
}

.how a {
color: #000;
font-weight: 300;
font-size: 0.9em;
letter-spacing: 0.03em;
}

.how a:hover {
opacity: 0.5;
}



.parallax {
  background-image: url("https://www.stereonet.fr/wp-content/uploads/2018/06/communication-avignon.jpg");
  min-height: 300px;
  background-attachment: fixed;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  margin: 150px 0 50px 0;
  color: #fff;
  padding: 50px;
  font-weight: 300;
}

p.quote {
font-size: 1.3em;
margin: 0;
padding: 0;
}

p.temoin {
font-size: 0.9em;
margin: 10px 0 20px 0;
padding: 0;
}

.bloc {
font-size: 4em;
}

/* outils */

.globaloutils {
flex-wrap: wrap;
justify-content: flex-start;
}

.fondation a.blocoutils {
 background-image: linear-gradient(to right top, #f4f4f4, #e7e7e8, #d9dbdb, #cccfce, #c1c2c0);
 }
 
 .introspection a.blocoutils {
background-image: linear-gradient(to right top, #d7e3ff, #d7dbff, #dfd1ff, #edc6ff, #ffb8fc);
 }
 
 .transcendance a.blocoutils {
background: #f3f2f2;
 }

a.blocoutils {
display: block;
box-shadow: 5px 5px 5px #ccc;
width: 25%;
padding: 20px;
margin-right: 20px;
margin-top: 20px;
transition: 0.5s;
position: relative;
}

a.blocoutils:hover {
box-shadow: none;
}

a.blocoutils h2 {
margin-top: 10px;
color: #000;
text-transform: uppercase;
letter-spacing: 0.2em;
font-weight: 300;
font-size: 2em;
}

a.blocoutils:hover h2 {
opacity: 1 !important;
}

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

.logotool h1 {
color: #000;
  text-transform: uppercase;
  letter-spacing: 0.2em;
  font-weight: 400;
  transition: 0.5s;
  font-size: 0.8em;
margin-bottom: 15px;
}

p.version {
font-size: 0.7em;
margin: 0;
padding: 0;
text-transform: uppercase;
letter-spacing: 0.2em;
position: absolute;
left: 20px;
bottom: 20px;
}

p.free {
color: #0000ff;
}

p.premium {
color: #82006e;
}



/* ethamin */


.champ {
width: 90%;
margin: 0 auto;
position: absolute;
top: 43%;
left: 50%;
transform: translate(-50%, -50%);
text-align: center;
}

.champ p {
font-weight: 300;
  font-size: 0.9em;
  letter-spacing: 0.03em;
  margin-top: 17px;
}

.champ input {
font-size: 2em;
border: none;
background: #f4f4f4;
padding: 5px;
text-align: center;
letter-spacing: 0.5em;
width: 80%;
max-width: 400px;
}

textarea:focus, input:focus{
    outline: none;
}

.animation-chiffre {

  font-size: 21em;
  font-weight: bold;
  color: #000;
  width: 80%;

  position: absolute;
  top: 45%;
  left: 50%;
  transform: translate(-50%, -50%);

  text-align: center;

  opacity: 0;
 transition: opacity 0.5s;
}

.fade-in-out {
opacity: 1;
}

/* echo */

#output {
font-weight: 400;
font-size: 0.9em;
line-height: 1em;
letter-spacing: 0.2em;
transition: 0.5s;
}

/* triangle */

        #outputResults {
          text-align: center;
          font-size: 3.3em;
          padding-top: 10%;
          letter-spacing: 0.3em;
          line-height: 1.3em;
          font-weight: 500;
        }

        .fade-in {
            opacity: 0;
            transition: opacity 1s ease-in-out;
        }

        .fade-in.show {
            opacity: 1;
        }
        
/* guidance */

.blue {
color: #1744ab;
}

/* citation */

q { 
font-size: 1.3em;
line-height: 1.3em;
color: #000;
}

q:before {  
font-family: "Times New Roman", Times, serif;
    quotes: "“" "”" "‘" "’";
    content: open-quote;  
    font-size: 34pt;  
    color: #999;  
   }  

q:after {
content: ""; 
}

p.auteur {
font-weight: 300;
padding-left: 20px;
font-size: 1em;
color: #999;
}

.globalquote {
margin-top: 30px;
text-align: left;
}


@media only screen and (max-width: 800px) {

h2.bloctitle {
padding-left: 7px;
}

p.auteur {
padding-left: 0;
}

.containerstellae {
position: absolute;
}


a.blocoutils h2 {
font-size: 1.5em;
}


 #outputResults {
          font-size: 2em;
        }

#output {
font-size: 0.8em;
}

.main {
margin-bottom: 100px;
}

a.blocoutils {
max-width: inherit;
width: 85%;
margin: 0 auto;
margin-bottom: 20px;
}

p.quote {
font-size: 1em;
}

p.temoin {
font-size: 0.7em;
}


.parallax {
  margin: 50px 0 50px 0;
}


.homebloc div {
width: 100%;
padding: 0;
margin-bottom: 50px;
}

h1 {
font-size: 3em;
}


  .flex {
  display: block;
  }



  .global {
  padding: 70px 30px 70px 30px;
  }



input::placeholder {
  font-size: 0.5em;
  }


  .left {
  float: none;
  }

  .right {
float: none;
  }

  .footer .right ul li a {
  padding-left: 0;
  padding-right: 10px;
  }

  .footer .right ul {
  padding: 0 5px 7px 11px;
  }

  .footer ul li a {
  letter-spacing: 0.02em;
  font-size: 0.8em;
  }

  #code {
  font-size: 2em;
  }

  #code {
   top: 0; left: 54%; /* à 50%/50% du parent référent */
   }
   

}


/* particules */

    body, html {
      margin: 0;
      padding: 0;
     
      background-color: #fff;
    }
    

    .particle-container {
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      pointer-events: none;
    }

    .particle {
      position: absolute;
      background-color: #000;
      border-radius: 50%;
      animation: particle-animation linear forwards;
    }

    @keyframes particle-animation {
      0% {
        transform: translate3d(calc(var(--x) * 1px), calc(var(--y) * 1px), 0) scale(0.5);
      }
      90% {
        /* Aucun changement d'opacité */
      }
      100% {
        transform: translate3d(calc(var(--x-end) * 1px), calc(var(--y-end) * 1px), 0) scale(1.5);
        opacity: 0;
      }
    }