/* defaults */
* {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  padding: 0;
  height: 100%;
  /* background-color: black; */
}

body {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-smooth: always;
  text-rendering: optimizeLegibility;
  background-color: rgb(98, 124, 197);
}

.container {
  display: flex;
  flex-wrap: wrap;
  width: 100%;
  height: 100%;
}
.svg-container {
  width: 400%;
  height: 400%;
}
svg {
  width: 100%;
  height: 100%;
}

.selenite {
  width: 220%;
  display: block;
  position: fixed;
  height: 100%;
  left: 50%;
  right: 50%;
  top: 0px;
  transform: translate(-50%, 0);
}

.base {
  /* animation-name: pathAnim;
  animation-duration: 8s;
  animation-iteration-count: infinite; */
  fill: transparent;
  stroke: rgb(255, 255, 255);
  stroke-width: 0.1vw;
  transition: stroke-width 4s ease-in-out;
}

.animEnd {
  stroke-width: 6vw;
}

.baseSans {
  animation: none;
}

.Ouverture {
  position: relative;
  box-sizing: border-box;
  width: 100%;
  height: 95%;
  row-gap: 10px;
  flex-direction: row;
  align-self: flex-start;
  float: left;
  flex-wrap: wrap;
  z-index: 1000;

  background: radial-gradient(circle, rgb(255, 255, 255) 0.05em, transparent 0.05em), radial-gradient(circle, rgb(0, 0, 0),rgb(0, 0, 0) ) 2px 2px;
  background-size: 1vw 1vw;
  background-attachment: fixed;
}

.toutS {
  height: 80vw;
  left: calc(50%);
  right: calc(50%);
  margin-top: 5vw;
  transform: translate(22%, 0);
}

.Intro {
  position: relative;
  box-sizing: border-box;
  width: 100%;
  height: 45%;
  row-gap: 10px;
  flex-direction: row;
  align-self: flex-start;
  float: left;
  flex-wrap: wrap;
  overflow: hidden;
  background-color: rgb(98, 124, 197);
  z-index: 1000;
  border-top: 1.5px solid rgb(255, 255, 255);
}

.IntroTexte {
  position: relative;
  box-sizing: border-box;
  width: calc(200%/3);
  height: 100%;
  row-gap: 10px;
  flex-direction: row;
  align-self: flex-start;
  float: left;
  flex-wrap: wrap;
  z-index: 5;
}

.IntroLogo {
  position: relative;
  box-sizing: border-box;
  width: calc(100%/3);
  height: 100%;
  row-gap: 10px;
  flex-direction: row;
  align-self: flex-start;
  float: left;
  flex-wrap: wrap;
  overflow: hidden;
  background-color: rgb(98, 124, 197);
  z-index: 2;
  background: rgb(98, 124, 197);
}

.colonne1 {
  margin-left: 10vw;
  row-gap: 10px;
  flex-direction: row;
  align-self: flex-start;
  float: left;
  flex-wrap: wrap;
  overflow: hidden;
}

.colonne2 {
  margin-left: 10vw;
  row-gap: 10px;
  flex-direction: row;
  align-self: flex-start;
  float: left;
  flex-wrap: wrap;
  overflow: hidden;
}

.Logo {
  fill: rgb(255, 255, 255);
  display: flex;
  width: 170%;
  height: 100%;
  left: 80%;
  right: 50%;
  transform: translate(-20%, 0);
  overflow: hidden;
}

.Anatomie {
  position: relative;
  box-sizing: border-box;
  width: 100%;
  height: 100%;
  row-gap: 10px;
  flex-direction: row;
  align-self: flex-start;
  float: left;
  flex-wrap: wrap;
  overflow: hidden;
  background-color: rgb(98, 124, 197);
  z-index: 2;
  border-top: 1.5px solid rgb(255, 255, 255);
}

.seleniteOver {
  position: relative;
  display: block;
  box-sizing: border-box;
  width: calc(200%/4);
  height: 100%;
  row-gap: 10px;
  flex-direction: row;
  align-self: flex-start;
  float: left;
  flex-wrap: wrap;
  overflow: hidden;
  z-index: 1;
  background: radial-gradient(circle, rgb(255, 255, 255) 0.05em, transparent 0.05em), radial-gradient(circle, rgb(98, 124, 197), rgb(98, 124, 197) ) 2px 2px;
  background-size: 1vw 1vw;
  background-attachment: fixed;
  /*border-right: 1.5px solid rgb(255, 255, 255);*/

  overflow: scroll;
}

.containerTexte {
  position: relative;
  box-sizing: border-box;
  width: 25%;
  height: 100%;
  row-gap: 10px;
  flex-direction: row;
  align-self: flex-start;
  float: left;
  flex-wrap: wrap;
  overflow: hidden;
  background-color: rgb(98, 124, 197);
  z-index: 2;
  background: radial-gradient(circle, rgb(255, 255, 255) 0.05em, transparent 0.05em), radial-gradient(circle, rgb(0, 0, 0),rgb(0, 0, 0) ) 2px 2px;
  background-size: 1vw 1vw;
  background-attachment: fixed;
  border-right: 1.5px solid rgb(255, 255, 255);

  overflow: scroll;
}

.AnatomieInfos {
  position: relative;
  box-sizing: border-box;
  width: 25%;
  height: 100%;
  row-gap: 10px;
  flex-direction: row;
  align-self: flex-start;
  float: left;
  flex-wrap: wrap;
  overflow: hidden;
  background-color: rgb(98, 124, 197);
  z-index: 2;
  background: rgb(98, 124, 197);
  background: radial-gradient(circle, rgb(255, 255, 255) 0.05em, transparent 0.05em), radial-gradient(circle, rgb(98, 124, 197), rgb(98, 124, 197) ) 2px 2px;
  background-size: 1vw 1vw;
  background-attachment: fixed;

  overflow: scroll;
}

.CorpsInfos {
  font-family: Concern, sans-serif;
  font-size: 2.10vw;
  margin-left: 3vw;
  margin-right: 3vw;
  transition: strokeWidth 2s ease-in-out;
  line-height: 1;
  height: 4vw;
  color: rgb(255, 255, 255);
}

.CorpsInfosPetit {
  font-family: Concern, sans-serif;
  font-size: 1vw;
  margin-left: 1.5vw;
  margin-right: 1.5vw;
  transition: strokeWidth 2s ease-in-out;
  line-height: 1;
  height: 4vw;
  color: rgb(255, 255, 255);
}

.CorpsInfosPetit2 {
  font-family: Concern, sans-serif;
  font-size: 1vw;
  margin-left: 3vw;
  margin-right: 1.5vw;
  transition: strokeWidth 2s ease-in-out;
  line-height: 1;
  height: 4vw;
  color: rgb(255, 255, 255);
}

.texteSvg {
  font-family: Concern, sans-serif;
  color: rgb(255, 255, 255);
  font-size: 1.05vw;
  line-height: 1;
}

.titre {
  font-family: Concern, sans-serif;
  font-size: 5vw;
  line-height: 1;
  margin-left: 3vw;
  margin-top: 3vw;
  margin-bottom: 1vw;
  color: rgb(255, 255, 255);
}

.corps {
  font-family: Concern, sans-serif;
  font-size: 2.10vw;
  margin-left: 3vw;
  margin-right: 3vw;
  margin-top: 2vw;
  transition: strokeWidth 2s ease-in-out;
  line-height: 0.01;
  max-height: 0;
}

.corpsP {
font-family: Concern, sans-serif;
color: rgb(255, 255, 255);
font-size: 2.10vw;
margin-left: 3vw;
margin-right: 3vw;
margin-top: 1vw;
margin-bottom: 0vw;
transition: max-height .1s ease-in-out;
line-height: 1;
max-height: 0;
overflow: hidden;
height: 30vw;
background-color: rgb(98, 124, 197);
}

/*
.CorpsInfos {
  font-family: Concern, sans-serif;
  font-size: 2.10vw;
  margin-left: 2vw;
  margin-right: 2vw;
  transition: strokeWidth 2s ease-in-out;
  line-height: 1;
  height: 4vw;
  color: rgb(255, 255, 255);
}
*/

.pinces {
font-family: Concern, sans-serif;
color: rgb(255, 255, 255);
}

.pinces:hover {
text-shadow: rgb(255, 255, 255) 0px 0 10px;
cursor: pointer;
}

.pincesDev {
color: rgb(255, 255, 255);
}

.pieds {
font-family: Concern, sans-serif;
color: rgb(255, 255, 255);
}

.pieds:hover {
text-shadow: rgb(255, 255, 255) 0px 0 10px;
cursor: pointer;
}

.piedsDev {
color: rgb(255, 255, 255);
}

.corps {
font-family: Concern, sans-serif;
color: rgb(255, 255, 255);
}

.genoux:hover {
text-shadow: rgb(255, 255, 255) 0px 0 10px;
cursor: pointer;
}

.genouxDev {
color: rgb(255, 255, 255);
}

.piques {
font-family: Concern, sans-serif;
color: rgb(255, 255, 255);
}

.piques:hover {
text-shadow: rgb(255, 255, 255) 0px 0 10px;
cursor: pointer;
}

.piquesDev {
color: rgb(255, 255, 255);
}

.controleCentral {
  font-family: Concern, sans-serif;
  color: rgb(255, 255, 255);
  }
  
  .controleCentral:hover {
  text-shadow: rgb(255, 255, 255) 0px 0 10px;
  cursor: pointer;
  }
  
  .controleCentralDev {
  color: rgb(255, 255, 255);
  }

  .orbites {
    font-family: Concern, sans-serif;
    color: rgb(255, 255, 255);
    }
    
    .orbites:hover {
    text-shadow: rgb(255, 255, 255) 0px 0 10px;
    cursor: pointer;
    }
    
    .orbitesDev {
    color: rgb(255, 255, 255);
    }

    .zoneMache {
      font-family: Concern, sans-serif;
      color: rgb(255, 255, 255);
      }
      
      .zoneMache:hover {
      text-shadow: rgb(255, 255, 255) 0px 0 10px;
      cursor: pointer;
      }
      
      .zoneMacheDev {
      color: rgb(255, 255, 255);
      }

      .canalEcoulement {
        font-family: Concern, sans-serif;
        color: rgb(255, 255, 255);
        }
        
        .canalEcoulement:hover {
        text-shadow: rgb(255, 255, 255) 0px 0 10px;
        cursor: pointer;
        }
        
        .canalEcoulementDev {
        color: rgb(255, 255, 255);
        }

        .conduitRespiratoire {
          font-family: Concern, sans-serif;
          color: rgb(255, 255, 255);
          }
          
          .conduitRespiratoire:hover {
          text-shadow: rgb(255, 255, 255) 0px 0 10px;
          cursor: pointer;
          }
          
          .conduitRespiratoireDev {
          color: rgb(255, 255, 255);
          }

          .injecteur {
            font-family: Concern, sans-serif;
            color: rgb(255, 255, 255);
            }
            
            .injecteur:hover {
            text-shadow: rgb(255, 255, 255) 0px 0 10px;
            cursor: pointer;
            }
            
            .injecteurDev {
            color: rgb(255, 255, 255);
            }

            .rotuleTete {
              font-family: Concern, sans-serif;
              color: rgb(255, 255, 255);
              }
              
              .rotuleTete:hover {
              text-shadow: rgb(255, 255, 255) 0px 0 10px;
              cursor: pointer;
              }
              
              .rotuleTeteDev {
              color: rgb(255, 255, 255);
              }

              .mobilisateurs {
                font-family: Concern, sans-serif;
                color: rgb(255, 255, 255);
                }
                
                .mobilisateurs:hover {
                text-shadow: rgb(255, 255, 255) 0px 0 10px;
                cursor: pointer;
                }
                
                .mobilisateursDev {
                color: rgb(255, 255, 255);
                }

                .forceps {
                  font-family: Concern, sans-serif;
                  color: rgb(255, 255, 255);
                  }
                  
                  .forceps:hover {
                  text-shadow: rgb(255, 255, 255) 0px 0 10px;
                  cursor: pointer;
                  }
                  
                  .forcepsDev {
                  color: rgb(255, 255, 255);
                  }

                  .pressionPli {
                    font-family: Concern, sans-serif;
                    color: rgb(255, 255, 255);
                    }
                    
                    .pressionPli:hover {
                    text-shadow: rgb(255, 255, 255) 0px 0 10px;
                    cursor: pointer;
                    }
                    
                    .pressionPliDev {
                    color: rgb(255, 255, 255);
                    }

                    .cotes {
                      font-family: Concern, sans-serif;
                      color: rgb(255, 255, 255);
                      }
                      
                      .cotes:hover {
                      text-shadow: rgb(255, 255, 255) 0px 0 10px;
                      cursor: pointer;
                      }
                      
                      .cotesDev {
                      color: rgb(255, 255, 255);
                      }

                      .broyageNourriture {
                        font-family: Concern, sans-serif;
                        color: rgb(255, 253, 253);
                        }
                        
                        .broyageNourriture:hover {
                        text-shadow: rgb(255, 255, 255) 0px 0 10px;
                        cursor: pointer;
                        }
                        
                        .broyageNourritureDev {
                        color: rgb(255, 255, 255);
                        }

                        .porteurs {
                          font-family: Concern, sans-serif;
                          color: rgb(255, 255, 255);
                          }
                          
                          .porteurs:hover {
                          text-shadow: rgb(255, 255, 255) 0px 0 10px;
                          cursor: pointer;
                          }
                          
                          .porteursDev {
                          color: rgb(255, 255, 255);
                          }

                          .rotules {
                            font-family: Concern, sans-serif;
                            color: rgb(255, 255, 255);
                            }
                            
                            .rotules:hover {
                            text-shadow: rgb(255, 255, 255) 0px 0 10px;
                            cursor: pointer;
                            }
                            
                            .rotulesDev {
                            color: rgb(255, 255, 255);
                            }

                            .stabilisateurs {
                              font-family: Concern, sans-serif;
                              color: rgb(255, 255, 255);
                              }
                              
                              .stabilisateurs:hover {
                              text-shadow: rgb(255, 255, 255) 0px 0 10px;
                              cursor: pointer;
                              }
                              
                              .stabilisateursDev {
                              color: rgb(255, 255, 255);
                              }

                              .amortisseurs {
                                font-family: Concern, sans-serif;
                                color: rgb(255, 255, 255);
                                }
                                
                                .amortisseurs:hover {
                                text-shadow: rgb(255, 255, 255) 0px 0 10px;
                                cursor: pointer;
                                }
                                
                                .amortisseursDev {
                                color: rgb(255, 255, 255);
                                }

.GEdef {
fill: transparent;
stroke: rgb(255, 255, 255);
stroke-width: 0.1vw;
cursor: pointer;
}

.GEdef:hover {
  stroke-width: 1.5vw;
  
}

.PIQdef {
fill: transparent;
stroke: rgb(255, 255, 255);
stroke-width: 0.1vw;
cursor: pointer;
}

.PIQdef:hover {
  stroke-width: 1.5vw;
}

.PINdef {
fill: transparent;
stroke: rgb(255, 255, 255);
stroke-width: 0.1vw;
cursor: pointer;
}

.PINdef:hover {
  stroke-width: 1.5vw;
}

.PIEdef {
fill: transparent;
stroke: rgb(255, 255, 255);
stroke-width: 0.1vw;
cursor: pointer;
}

.PIEdef:hover {
stroke-width: 1.5vw;
}

.Amortisseurs {
  fill: transparent;
  stroke: rgb(255, 255, 255);
  stroke-width: 0.1vw;
  cursor: pointer;
  }
  
  .Amortisseurs:hover {
  stroke-width: 1.5vw;
  }

  .Stabilisateurs {
    fill: transparent;
    stroke: rgb(255, 255, 255);
    stroke-width: 0.1vw;
    cursor: pointer;
    }
    
    .Stabilisateurs:hover {
    stroke-width: 1.5vw;
    }

    .Rotules {
      fill: transparent;
      stroke: rgb(255, 255, 255);
      stroke-width: 0.1vw;
      cursor: pointer;
      }
      
      .Rotules:hover {
      stroke-width: 1.5vw;
      }

      .Porteurs {
        fill: transparent;
        stroke: rgb(255, 255, 255);
        stroke-width: 0.1vw;
        cursor: pointer;
        }
        
        .Porteurs:hover {
        stroke-width: 1.5vw;
        }

        .BroyageNourriture {
          fill: transparent;
          stroke: rgb(255, 255, 255);
          stroke-width: 0.1vw;
          cursor: pointer;
          }
          
          .BroyageNourriture:hover {
          stroke-width: 1.5vw;
          }

          .Cotes {
            fill: transparent;
            stroke: rgb(255, 255, 255);
            stroke-width: 0.1vw;
            cursor: pointer;
            }
            
            .Cotes:hover {
            stroke-width: 1.5vw;
            }

            .PressionPli {
              fill: transparent;
              stroke: rgb(255, 255, 255);
              stroke-width: 0.1vw;
              cursor: pointer;
              }
              
              .PressionPli:hover {
              stroke-width: 1.5vw;
              }

              .Forceps {
                fill: transparent;
                stroke: rgb(255, 255, 255);
                stroke-width: 0.1vw;
                cursor: pointer;
                }
                
                .Forceps:hover {
                stroke-width: 1.5vw;
                }

                .Mobilisateurs {
                  fill: transparent;
                  stroke: rgb(255, 255, 255);
                  stroke-width: 0.1vw;
                  cursor: pointer;
                  }
                  
                  .Mobilisateurs:hover {
                  stroke-width: 1.5vw;
                  }

                  .RotuleTete {
                    fill: transparent;
                    stroke: rgb(255, 255, 255);
                    stroke-width: 0.1vw;
                    cursor: pointer;
                    }
                    
                    .RotuleTete:hover {
                    stroke-width: 1.5vw;
                    }

                    .Injecteur {
                      fill: transparent;
                      stroke: rgb(255, 255, 255);
                      stroke-width: 0.1vw;
                      cursor: pointer;
                      }
                      
                      .Injecteur:hover {
                      stroke-width: 1.5vw;
                      }

                      .ConduitRespiratoire {
                        fill: transparent;
                        stroke: rgb(255, 255, 255);
                        stroke-width: 0.1vw;
                        cursor: pointer;
                        }
                        
                        .ConduitRespiratoire:hover {
                        stroke-width: 1.5vw;
                        }

                        .CanalEcoulement {
                          fill: transparent;
                          stroke: rgb(255, 255, 255);
                          stroke-width: 0.1vw;
                          cursor: pointer;
                          }
                          
                          .CanalEcoulement:hover {
                          stroke-width: 1.5vw;
                          }

                          .ZoneMache {
                            fill: transparent;
                            stroke: rgb(255, 255, 255);
                            stroke-width: 0.1vw;
                            cursor: pointer;
                            }
                            
                            .ZoneMache:hover {
                            stroke-width: 1.5vw;
                            }

                            .Orbites {
                              fill: transparent;
                              stroke: rgb(255, 255, 255);
                              stroke-width: 0.1vw;
                              cursor: pointer;
                              }
                              
                              .Orbites:hover {
                              stroke-width: 1.5vw;
                              }

                              .ControleCentral {
                                fill: transparent;
                                stroke: rgb(255, 255, 255);
                                stroke-width: 0.1vw;
                                cursor: pointer;
                                }
                                
                                .ControleCentral:hover {
                                stroke-width: 1.5vw;
                                }
  



.focusPartie path {
stroke-width: 1.5vw;
}





.slogan {
  font-family: Concern, sans-serif;
  font-size: 2.10vw;
  color: rgb(255, 255, 255);
  text-align:center;

  position: relative;
  top: 46vw;
}

.infos {
  position: relative;
  margin-left: 2.5vw;
  margin-right: 2.5vw;
  margin-top: 2.5vw;
}

.menu {
  top: 6vw;
  font-family: Concern, sans-serif;
  font-size: 2.10vw;
}

.titres {
  font-family: Concern, sans-serif;
  font-size: 5vw;
  line-height: 1.2;
  color: rgb(255, 255, 255);
}

.eratosthene{
  font-family: Concern, sans-serif;
  font-size: 2.10vw;
  color: rgb(255, 255, 255);
  cursor: pointer;
}

.eratosthene:hover{
text-shadow: rgb(255, 255, 255) 0px 0 10px;
cursor: pointer;
}

.partus{
  font-family: Concern, sans-serif;
  font-size: 2.10vw;
  margin-left: 5vw;
  color: rgb(255, 255, 255);
  cursor: pointer;
}

.partus:hover{
  text-shadow: rgb(255, 255, 255) 0px 0 10px;
  cursor: pointer;
  }

.gups{
  font-family: Concern, sans-serif;
  font-size: 2.10vw;
  margin-left: 5vw;
  color: rgb(255, 255, 255);
  cursor: pointer;
}
  
.gups:hover{
  text-shadow: rgb(255, 255, 255) 0px 0 10px;
  cursor: pointer;
  }

.serenite{
  font-family: Concern, sans-serif;
  font-size: 2.10vw;
  margin-left: 5vw;
  color: rgb(255, 255, 255);
  cursor: pointer;
}

.serenite:hover{
  text-shadow: rgb(255, 255, 255) 0px 0 10px;
  cursor: pointer;
  }

.crises{
  font-family: Concern, sans-serif;
  font-size: 2.10vw;
  margin-left: 5vw;
  color: rgb(255, 255, 255);
  cursor: pointer;
}

.crises:hover{
  text-shadow: rgb(255, 255, 255) 0px 0 10px;
  cursor: pointer;
  }

.tranquilite{
  font-family: Concern, sans-serif;
  font-size: 2.10vw;
  margin-left: 5vw;
  color: rgb(255, 255, 255);
  cursor: pointer;
}

.tranquilite:hover{
  text-shadow: rgb(255, 255, 255) 0px 0 10px;
  cursor: pointer;
  }

.fecondite{
  font-family: Concern, sans-serif;
  font-size: 2.10vw;
  margin-left: 5vw;
  color: rgb(255, 255, 255);
  cursor: pointer;
}

.fecondite:hover{
  text-shadow: rgb(255, 255, 255) 0px 0 10px;
  cursor: pointer;
  }

.nectar{
  font-family: Concern, sans-serif;
  font-size: 2.10vw;
  margin-left: 5vw;
  color: rgb(255, 255, 255);
  cursor: pointer;
}

.nectar:hover{
  text-shadow: rgb(255, 255, 255) 0px 0 10px;
  cursor: pointer;
  }

.apennins{
  font-family: Concern, sans-serif;
  font-size: 2.10vw;
  color: rgb(255, 255, 255);
  cursor: pointer;
}

.apennins:hover{
  text-shadow: rgb(255, 255, 255) 0px 0 10px;
  cursor: pointer;
  }

  .Eratosthene {
    fill: transparent;
    stroke: rgb(255, 255, 255);
    stroke-width: 0.1vw;
    cursor: pointer;
  }
      
  .Eratosthene:hover {
    stroke-width: 1.5vw;
  }

.Pluies {
  fill: transparent;
  stroke: rgb(255, 255, 255);
  stroke-width: 0.1vw;
  cursor: pointer;
}
    
.Pluies:hover {
  stroke-width: 1.5vw;
}

.Gups {
  fill: transparent;
  stroke: rgb(255, 255, 255);
  stroke-width: 0.1vw;
  cursor: pointer;
}
    
.Gups:hover {
  stroke-width: 1.5vw;
}

.Partus {
  fill: transparent;
  stroke: rgb(255, 255, 255);
  stroke-width: 0.1vw;
  cursor: pointer;
}
    
.Partus:hover {
  stroke-width: 1.5vw;
}

.Apennins {
  fill: transparent;
  stroke: rgb(255, 255, 255);
  stroke-width: 0.1vw;
  cursor: pointer;
}
    
.Apennins:hover {
  stroke-width: 1.5vw;
}

.Tempetes {
  fill: transparent;
  stroke: rgb(255, 255, 255);
  stroke-width: 0.1vw;
  cursor: pointer;
}
    
.Tempetes:hover {
  stroke-width: 1.5vw;
}

.TranquiliteNectar {
  fill: transparent;
  stroke: rgb(255, 255, 255);
  stroke-width: 0.1vw;
  cursor: pointer;
}
    
.TranquiliteNectar:hover {
  stroke-width: 1.5vw;
}

.Crises {
  fill: transparent;
  stroke: rgb(255, 255, 255);
  stroke-width: 0.1vw;
  cursor: pointer;
}
    
.Crises:hover {
  stroke-width: 1.5vw;
}

.Vapeurs {
  fill: transparent;
  stroke: rgb(255, 255, 255);
  stroke-width: 0.1vw;
  cursor: pointer;
}
    
.Vapeurs:hover {
  stroke-width: 1.5vw;
}

.Humeurs {
  fill: transparent;
  stroke: rgb(255, 255, 255);
  stroke-width: 0.1vw;
  cursor: pointer;
}
    
.Humeurs:hover {
  stroke-width: 1.5vw;
}

.Nuees {
  fill: transparent;
  stroke: rgb(255, 255, 255);
  stroke-width: 0.1vw;
  cursor: pointer;
}
    
.Nuees:hover {
  stroke-width: 1.5vw;
}

.Fecondite {
  fill: transparent;
  stroke: rgb(255, 255, 255);
  stroke-width: 0.1vw;
  cursor: pointer;
}
    
.Fecondite:hover {
  stroke-width: 1.5vw;
}

.container1 {
  position: relative;
  box-sizing: border-box;
  width: calc(100%);
  height: calc(100%);
  row-gap: 10px;
  background-color: rgb(0, 0, 0);
  top: 0rem;
  z-index: 1;
  overflow: hidden;
  /* border: 1px dashed black; */
}

.S {    
  height: calc(100%/2);
  left: 50%;

}

.cercle {
  position: absolute;
  background-color: rgb(255, 255, 255);
  box-sizing: border-box;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  z-index: 100;
  transform: translate(-50%, -50%);
}

.cercle1 {
  display: inline-block;
  flex-direction: row;
  top: 50%;
  left: 50%;
}

.cercle2 {
  top: 70%;
  left: 20%
}

.cercle3 {
  top: 70%;
  left: 20%
}

.cercle4 {
  top: 70%;
  left: 20%
}

.cercle5 {
  top: 70%;
  left: 20%
}

.selenite {
  width: 100%;
}

.container3 {
  position: relative;
  box-sizing: border-box;
  width: calc(100%);
  height: 100%;
  row-gap: 10px;
  top: 0rem;
  z-index: 3;
  flex-direction: row;
  align-self: flex-start;
  float: left;
  flex-wrap: wrap;
  border-top: 1.5px solid rgb(255, 255, 255);
  overflow: hidden;
}
/*
.container31 {
  order: 1;
  flex-direction: row;
  align-self: flex-start;
  float: left;
  position: relative;
  box-sizing: border-box;
  width: calc(100%/3);
  height: 100%;
  flex-wrap: wrap;
  align-items: flex-start;
  background: radial-gradient(circle, rgb(255, 255, 255) 0.05em, transparent 0.05em), radial-gradient(circle, rgb(0, 0, 0),rgb(0, 0, 0) ) 2px 2px;
  background-size: 1vw 1vw;
  background-attachment: fixed;

  overflow: scroll;
}
*/
.container32 {
  order: 2;
  flex-direction: row;
  align-self: flex-start;
  float: left;
  position: relative;
  box-sizing: border-box;
  overflow: hidden;
  width: 100%;
  height: 130%;
  flex-wrap: wrap;
  align-items: flex-start;
  border-left: 1.5px solid rgb(255, 255, 255);
  background: radial-gradient(circle, rgb(255, 255, 255) 0.05em, transparent 0.05em), radial-gradient(circle, rgb(98, 124, 197),rgb(98, 124, 197) ) 2px 2px;
  background-size: 1vw 1vw;
  background-attachment: fixed;
  z-index: 200000000;

  overflow: scroll;
}

.CarteDev {
  height: 10vw;
  width:100%;
  position: absolute;
  /* display:none; */
  display:block;
  bottom:0;
}

.hide{display:none;}

.CarteDev1 {
  position: relative;
  width: 100%;
  height: 100%;
  bottom:0;
  background: rgb(98, 124, 197);
  border-top: 1.5px solid rgb(255, 255, 255);
  z-index: 200000000;
}

.CarteDev2 {
  position: relative;
  width: 100%;
  height: 100%;
  bottom:0;
  background: rgb(98, 124, 197);
  border-top: 1.5px solid rgb(255, 255, 255);
  z-index: 200000000;
}

.CarteDev3 {
  position: relative;
  width: 100%;
  height: 100%;
  bottom:0;
  background: rgb(98, 124, 197);
  border-top: 1.5px solid rgb(255, 255, 255);
  z-index: 200000000;
}

.CarteDev4 {
  position: relative;
  width: 100%;
  height: 100%;
  bottom:0;
  background: rgb(98, 124, 197);
  border-top: 1.5px solid rgb(255, 255, 255);
  z-index: 200000000;
}

.CarteDev5 {
  position: relative;
  width: 100%;
  height: 100%;
  bottom:0;
  background: rgb(98, 124, 197);
  border-top: 1.5px solid rgb(255, 255, 255);
  z-index: 200000000;
}

.CarteDev6 {
  position: relative;
  width: 100%;
  height: 100%;
  bottom:0;
  background: rgb(98, 124, 197);
  border-top: 1.5px solid rgb(255, 255, 255);
  z-index: 200000000;
}

.CarteDev7 {
  position: relative;
  width: 100%;
  height: 100%;
  bottom:0;
  background: rgb(98, 124, 197);
  border-top: 1.5px solid rgb(255, 255, 255);
  z-index: 200000000;
}

.CarteDev8 {
  position: relative;
  width: 100%;
  height: 100%;
  bottom:0;
  background: rgb(98, 124, 197);
  border-top: 1.5px solid rgb(255, 255, 255);
  z-index: 200000000;
}

.CarteDev9 {
  position: relative;
  width: 100%;
  height: 100%;
  bottom:0;
  background: rgb(98, 124, 197);
  border-top: 1.5px solid rgb(255, 255, 255);
  z-index: 200000000;
}

.CarteDev10 {
  position: relative;
  width: 100%;
  height: 100%;
  bottom:0;
  background: rgb(98, 124, 197);
  border-top: 1.5px solid rgb(255, 255, 255);
  z-index: 200000000;
}

.CarteDev11 {
  position: relative;
  width: 100%;
  height: 100%;
  bottom:0;
  background: rgb(98, 124, 197);
  border-top: 1.5px solid rgb(255, 255, 255);
  z-index: 200000000;
}

.CarteDev12 {
  position: relative;
  width: 100%;
  height: 100%;
  bottom:0;
  background: rgb(98, 124, 197);
  border-top: 1.5px solid rgb(255, 255, 255);
  z-index: 200000000;
}

.CarteDevZone {
  position: relative;
  width: 100%;
  height: 100%;
  bottom:0;
  background: rgb(98, 124, 197);
  border-top: 1.5px solid rgb(255, 255, 255);
  z-index: 200000000;
}

.container32 svg {
  transition: transform 0.3s ease-in-out;
}

.lune {
  fill: transparent;
  stroke: rgb(255, 255, 255);
  stroke-width: 0.1vw;
}

.crisesCarte {
  fill: transparent;
  stroke: rgb(255, 255, 255);
  stroke-width: 0.1vw;
  cursor: pointer;
  }
  
.crisesCarte:hover {
  stroke-width: 1.5vw;
}

.sereniteCarte {
  fill: transparent;
  stroke: rgb(255, 255, 255);
  stroke-width: 0.1vw;
  cursor: pointer;
  }
  
.sereniteCarte:hover {
  stroke-width: 1.5vw;
}

.apenninsCarte {
  fill: transparent;
  stroke: rgb(255, 255, 255);
  stroke-width: 0.1vw;
  cursor: pointer;
  }
  
.apenninsCarte:hover {
  stroke-width: 1.5vw;
}

.tranquiliteCarte {
  fill: transparent;
  stroke: rgb(255, 255, 255);
  stroke-width: 0.1vw;
  cursor: pointer;
  }
  
.tranquiliteCarte:hover {
  stroke-width: 1.5vw;
}

.feconditeCarte {
  fill: transparent;
  stroke: rgb(255, 255, 255);
  stroke-width: 0.1vw;
  cursor: pointer;
  }
  
.feconditeCarte:hover {
  stroke-width: 1.5vw;
}

.carte {
  width: calc(100%);
  height: 30%;
  overflow: hidden;
}

.Images {
  position: relative;
  box-sizing: border-box;
  width: 100%;
  height: 150%;
  row-gap: 10px;
  flex-direction: row;
  align-self: flex-start;
  float: left;
  flex-wrap: wrap;
  overflow: hidden;
  background-color: rgb(98, 124, 197);
  z-index: 1000;
  border-top: 1.5px solid rgb(255, 255, 255);
}

.CelluleImage {
  font-family: Concern, sans-serif;
  height: 55%;
  width: calc(100%/3);
  overflow: hidden;
  flex-direction: row;
  align-self: flex-start;
  float: left;
  flex-wrap: wrap;
}

.CelluleImage2 {
  font-family: Concern, sans-serif;
  height: 45%;
  width: calc(100%/2);
  overflow: hidden;
  flex-direction: row;
  align-self: flex-start;
  float: left;
  flex-wrap: wrap;
}

/*
  #shine { /* image display in browser*/
/*
  background:url(img/353_wallach.jpg) no-repeat 200px -70px;
  
  width:633px;
  
  height:567px;

}
*/
.Formulaire {
  position: relative;
  box-sizing: border-box;
  width: 100%;
  height: 100%;
  row-gap: 10px;
  flex-direction: row;
  align-self: flex-start;
  float: left;
  flex-wrap: wrap;
  z-index: 1000;
  border-top: 1.5px solid rgb(255, 255, 255);

  background: rgb(0, 0, 0);
}

/* Style inputs, select elements and textareas */
input[type=text], select, textarea{
  width: 70%;
  padding: 12px;
  border: 1vw solid rgb(255, 255, 255);
  border-radius: 1vw;
  box-sizing: border-box;
  resize: vertical;
}

/* Style the label to display next to the inputs */
label {
  padding: 12px 12px 12px 0;
  display: inline-block;
}

/* Style the submit button */
input[type=submit] {
  background-color: rgb(98, 124, 197);
  color: rgb(255, 255, 255);
  padding: 12px 20px;
  border: none;
  border-radius: 10vw;
  cursor: pointer;
  float: right;
  margin-right: 10vw;
}

/* Style the container */
.container {
  border-radius: 5px;
  background-color: rgb(98, 124, 197);
  padding: 20px;
}

/* Floating column for labels: 25% width */
.col-25 {
  float: left;
  width: 25%;
  margin-top: 6px;
}

/* Floating column for inputs: 75% width */
.col-75 {
  float: left;
  width: 75%;
  margin-top: 1vw;
}

.col-7 {
  float: left;
  width: 75%;
  margin-top: 1vw;
}

.col-8 {
  float: left;
  width: 75%;
  margin-top: 1vw;
}

/* Clear floats after the columns */
.row:after {
  content: "";
  display: table;
  clear: both;
}

/* Responsive layout - when the screen is less than 600px wide, make the two columns stack on top of each other instead of next to each other */
@media screen and (max-width: 600px) {
  .col-25, .col-75, input[type=submit] {
    width: 100%;
    margin-top: 0;
  }
}



/* Page 2 */

.enregistrement {
  position: relative;
  box-sizing: border-box;
  width: 100%;
  height: 100%;
  row-gap: 10px;
  flex-direction: row;
  align-self: flex-start;
  float: left;
  flex-wrap: wrap;
  z-index: 1000;

  background: radial-gradient(circle, rgb(255, 255, 255) 0.05em, transparent 0.05em), radial-gradient(circle, rgb(0, 0, 0),rgb(0, 0, 0) ) 2px 2px;
  background-size: 1vw 1vw;
  background-attachment: fixed;

  animation: fond 3.5s infinite;
  overflow: hidden;
}

@keyframes fond {
  0% {background: radial-gradient(circle, rgb(28, 180, 104) 0.05em, transparent 0.05em), radial-gradient(circle, rgb(0, 0, 0),rgb(0, 0, 0) ) 2px 2px;
    background-size: 1vw 1vw;
    background-attachment: fixed;
  }
  50% {background: radial-gradient(circle, rgb(0, 0, 0) 0.05em, transparent 0.05em), radial-gradient(circle, rgb(28, 180, 104),rgb(28, 180, 104) ) 2px 2px;
    background-size: 1vw 1vw;
    background-attachment: fixed;
  }
  100% {background: radial-gradient(circle, rgb(28, 180, 104) 0.05em, transparent 0.05em), radial-gradient(circle, rgb(0, 0, 0),rgb(0, 0, 0) ) 2px 2px;
    background-size: 1vw 1vw;
    background-attachment: fixed;
  }
}

.bam {
  font-family: Concern, sans-serif;
  font-size: 20vw;
  line-height: 1;
  margin-left: 3vw;
  margin-top: 3vw;
  margin-bottom: 1vw;
  color: rgb(255, 255, 255);

  animation: bambam 3.5s infinite;
}

.bimbam {
  font-family: Concern, sans-serif;
  font-size: 2.10vw;
  margin-left: 3vw;
  margin-right: 3vw;
  margin-top: 2vw;
  line-height: 1;
  max-height: 0;

  animation: bambam 3.5s infinite;
}

@keyframes bambam {
  0% {color: rgb(28, 180, 104);
  }
  50% {color: rgb(0, 0, 0);
  }
  100% {color: rgb(28, 180, 104);
  }
}

@keyframes firework {
  0% { 
    transform: translate(-50%, 60vh);
    width: 5vmin;
    opacity: 1;
  }
  50% { 
    width: 100vmin;
    opacity: 1;
  }
  100% { 
    width: 200vmin; 
    opacity: 0; 
  }
}

.firework,
.firework::before,
.firework::after {
  --top: 30vh;
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 10vw;
  aspect-ratio: 5;
  background:
    /* random backgrounds */
    radial-gradient(circle, rgb(255, 255, 255) 0.5vw, #0000 0) 50% 00%,
    radial-gradient(circle, rgb(255, 255, 255) 0.5vw, #0000 0) 00% 50%,
    radial-gradient(circle, rgb(255, 255, 255) 0.5vw, #0000 0) 50% 99%,
    radial-gradient(circle, rgb(255, 255, 255) 0.5vw, #0000 0) 99% 50%,
    radial-gradient(circle, rgb(255, 255, 255) 0.5vw, #0000 0) 80% 90%,
    radial-gradient(circle, rgb(255, 255, 255) 0.5vw, #0000 0) 95% 90%,
    radial-gradient(circle, rgb(255, 255, 255) 0.5vw, #0000 0) 10% 60%,
    radial-gradient(circle, rgb(255, 255, 255) 0.5vw, #0000 0) 31% 80%,
    radial-gradient(circle, rgb(255, 255, 255) 0.5vw, #0000 0) 80% 10%,
    radial-gradient(circle, rgb(255, 255, 255) 0.5vw, #0000 0) 90% 23%,
    radial-gradient(circle, rgb(255, 255, 255) 0.5vw, #0000 0) 45% 20%,
    radial-gradient(circle, rgb(255, 255, 255) 0.5vw, #0000 0) 13% 24%
    ;
    background-size: 3vw 3vw;
    background-repeat: no-repeat;
    animation: firework 2s infinite;
}

.firework::before {
  transform: translate(-50%, -50%) rotate(25deg) !important; 
}

.firework::after {
  transform: translate(-50%, -50%) rotate(-37deg) !important;
}

.fireworkIntro,
.fireworkIntro::before,
.fireworkIntro::after {
  --top: 30vh;
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 10vw;
  aspect-ratio: 5;
  background:
    /* random backgrounds */
    radial-gradient(circle, rgb(255, 255, 255) 0.5vw, #0000 0) 50% 00%,
    radial-gradient(circle, rgb(255, 255, 255) 0.5vw, #0000 0) 00% 50%,
    radial-gradient(circle, rgb(255, 255, 255) 0.5vw, #0000 0) 50% 99%,
    radial-gradient(circle, rgb(255, 255, 255) 0.5vw, #0000 0) 99% 50%,
    radial-gradient(circle, rgb(255, 255, 255) 0.5vw, #0000 0) 80% 90%,
    radial-gradient(circle, rgb(255, 255, 255) 0.5vw, #0000 0) 95% 90%,
    radial-gradient(circle, rgb(255, 255, 255) 0.5vw, #0000 0) 10% 60%,
    radial-gradient(circle, rgb(255, 255, 255) 0.5vw, #0000 0) 31% 80%,
    radial-gradient(circle, rgb(255, 255, 255) 0.5vw, #0000 0) 80% 10%,
    radial-gradient(circle, rgb(255, 255, 255) 0.5vw, #0000 0) 90% 23%,
    radial-gradient(circle, rgb(255, 255, 255) 0.5vw, #0000 0) 45% 20%,
    radial-gradient(circle, rgb(255, 255, 255) 0.5vw, #0000 0) 13% 24%
    ;
  background-size: 3vw 3vw;
  background-repeat: no-repeat;
  animation: firework 2s infinite;
}

.fireworkIntro::before {
  transform: translate(-50%, -50%) rotate(25deg) !important; 
}

.fireworkIntro::after {
  transform: translate(-50%, -50%) rotate(-37deg) !important;
}