@font-face {
  font-family: 'amiamieregular_round';
  src: url('amiamie-regularround-webfont.woff2') format('woff2'),
       url('amiamie-regularround-webfont.woff') format('woff');
  font-weight: normal;
  font-style: normal;
  }
  html {
    scroll-behavior: smooth;
  }
body{
    background-color: #000;
    font-family: 'amiamieregular_round',Arial, Helvetica, sans-serif;
    }

#page1 {
 opacity: 1;
 background-color: #000;
 z-index:2;
    overflow: hidden;
    cursor: wait;

}

#page2 {
    opacity: 0;
       background-color: red;
       z-index: 1;
       overflow: hidden;
       cursor: url('images/cursor.png'), auto;

   }

.page {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    display: grid;
    grid-template-columns: 5% 5% 5% 5% 5% 5% 5% 5% 5% 5% 5% 5% 5% 5% 5% 5% 5% 5% 5% 5%;
    grid-template-rows: 5% 5% 5% 5% 5% 5% 5% 5% 5% 5% 5% 5% 5% 5% 5% 5% 5% 5% 5% 5%;
}

#tonic {
grid-column-start:6 ;
grid-column-end:17 ;
grid-row-start:9 ;
grid-row-end:16;
text-align: center;
display: block;
font-size: 45px;
font-weight: bold;
text-transform: uppercase;
}

#size {
  width: 100%;
height: 100%;
}

/* page 2 design section*/
#ent{
  top:4%;
left:2%;
width: 10%;
height: 10%;
background-color: none;
}

/*img entete*/
#imo { display: flex;
  justify-content: center;
  align-items: center;
  height: 80%;
  width: 80%;
  position: relative;
  background-color: none;
}

#logo {
  text-align: center;
  max-width: -moz-available;
}
/*img fin entete*/

#desc{
    top: 2%;
    left: 15%;
    width: 80%;
    height: 10%;
    background-color: none;
}

/*txt descri*/
#imo2{
  display: flex;
  justify-content: center;
  align-items: center;
  height: 90%;
  width: 98%;
  position: relative;

}
#txtdescri {
  text-align: left;
  font-size: 25px;
  line-height:28px;

}
/*fin txt descri*/

#corpus{
width: 100%;
height: 100%;
background-color: none;
overflow-y: scroll;
overflow-x: hidden;
position: absolute;
grid-column-start: 4;
  grid-column-end: 21;
  grid-row-start: 4;
  grid-row-end: 21;


}
#corpusc{
  top: 0;
  left: 0;
 width: 100%;
 min-height: 100%;
 position: absolute; 
  }
#menu {
    top:15%;
    left: 0%;
    width: 15%;
   height: 85%;
    background-color: none; 
    grid-template-columns: 20% 20% 20% 20% 20%;
    grid-template-rows: 5% 5% 5% 5% 5% 5% 5% 5% 5% 5% 5% 5% 5% 5% 5% 5% 5% 5% 5% 5%;
}
/*classs tte partie*/
.seco {
    position: absolute;
  /*border: solid 2px #FFF;*/
  display: grid;
}

.seco2 {
  position: absolute;
  /*border: solid 2px #FFF;*/
  display: flex;
  justify-content: center;
  align-items: center;
}
/* page 2 fin design section*/

/* section dans !corpusc! */
.rection {
  left: 0;
  width: 100%;
  height: 100%;
  border: solid 2px #FFF;
  position:absolute;
  display: grid;
  grid-template-columns: 5% 5% 5% 5% 5% 5% 5% 5% 5% 5% 5% 5% 5% 5% 5% 5% 5% 5% 5% 5%;
  grid-template-rows: 5% 5% 5% 5% 5% 5% 5% 5% 5% 5% 5% 5% 5% 5% 5% 5% 5% 5% 5% 5%;
}

/* template 1 img(*style de mise en page)*/
.omg {
  display: flex;
  justify-content: center;
  align-items: center;
  grid-column-start:2 ;
  grid-column-end:10 ;
  grid-row-start:2 ;
  grid-row-end:20;
  background-color: none;
}

.omg-ordi {
  display: flex;
  justify-content: center;
  align-items: center;
  grid-column-start:2 ;
  grid-column-end:10 ;
  grid-row-start:2 ;
  grid-row-end:20;
  background-color: none;
}

.omg, .omg2, #diaporama {
  border-radius: 10px;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.3); /* Ajouter une ombre pour l'effet de flou */
}
.omg:hover .to1 {
  visibility: visible; /* Rend l'élément visible lorsqu'il est survolé */
}
.omg:hover .to3 {
  visibility: visible; /* Rend l'élément visible lorsqu'il est survolé */
}
.omg:hover img {
  mix-blend-mode: exclusion;
  opacity: 30%;
 }
 
.omg2 {
  display: flex;
  justify-content: center;
  align-items: center;
  grid-column-start:11 ;
  grid-column-end:20 ;
  grid-row-start:2 ;
  grid-row-end:14;
  background-color: none;
}

#diaporama{
  display: flex;
  justify-content: center;
  align-items: center;
  grid-column-start:11 ;
  grid-column-end:20 ;
  grid-row-start:2 ;
  grid-row-end:14;
  background-color: black;
  background-size: contain; /* Pour faire remplir le conteneur sans déborder */
  background-position: center; /* Pour centrer l'image */
  background-repeat: no-repeat; /* Pour éviter la répétition de l'image */
}
.cent{
  text-align: center;
  max-width: 100%;
  max-height: 100%;
}
.cent:hover {
  mix-blend-mode: exclusion;
}

.cent-ordi{
  text-align: center;
  max-width: 100%;
  max-height: 100%;
}


/*fin template 1 img(*style de mise en page)*/

/* template 1 txt(*style de mise en page)*/
.to1{
  font-size: 25px;
  line-height:13px;
  transform-origin:center bottom;
  animation: rotate 5s linear infinite;
  visibility: hidden; /* Définit l'élément comme caché par défaut */
  position: fixed;
  margin-left:9%;
}

@keyframes rotate {
  0% {
      transform: translate(-50%, -50%) rotate(0deg);
  }
  100% {
      transform: translate(-50%, -50%) rotate(360deg);
  }
}

.to2{
  text-align: center;
  font-size: 8px;
  line-height:13px;
  grid-column-start:11;
  grid-column-end:19;
  grid-row-start:14;
  grid-row-end:15;
}

.to3{
  text-align: center;
  font-size: 25px;
  line-height:28px;
  top:10%;
  color:black;
 /* grid-column-start:3;
  grid-column-end:9;
  grid-row-start:3;
  grid-row-end:21;*/
  visibility: hidden; /* Définit l'élément comme caché par défaut */
  position: absolute;
}




.to4{text-align: left;
  font-size: 15px;
  line-height:16px;
  grid-column-start:12;
  grid-column-end:20;
  grid-row-start:15;
  grid-row-end:16;
}

.to5{text-align: left;
  font-size: 15px;
  line-height:16px;
  grid-column-start:11;
  grid-column-end:20;
  grid-row-start:16;
  grid-row-end:21;
}
/* template 1 fin txt(*style de mise en page)*/

/*template 2* scroll droite*/
.xxl {
  grid-column-start:2;
  grid-column-end:20;
  grid-row-start:2;
  grid-row-end:20;
  overflow-x: scroll;
  overflow-y: hidden;
  background-color: red;
}

.xxlbis{
height: 100%;
  width: 100%;
  position: relative;
  display: block ruby;
  padding-left: -100%;
}

.sos1 {
  position:relative;
  display: flex;
  height: 100%;
 top:0;
  width: 100%;
  display: grid;
  grid-template-columns: 5% 5% 5% 5% 5% 5% 5% 5% 5% 5% 5% 5% 5% 5% 5% 5% 5% 5% 5% 5%;
  grid-template-rows: 5% 5% 5% 5% 5% 5% 5% 5% 5% 5% 5% 5% 5% 5% 5% 5% 5% 5% 5% 5%;
}

#crol1{
   background-color: rgba(240, 255, 255, 0.50);
}

#crol2{
  background-color: rebeccapurple;
}

#crol3{
  background-color: azure;
}

#crol4{
  background-color: rgb(27, 146, 146);
}

#crol5{
  background-color: azure;
}

#crol6{
  background-color: rgb(117, 243, 0);
}
/*template 2* scroll fin droite*/

#sec1 {
  top:0%;
  background-color: none;
}

#sec2 {
  top:100%;
  background-color: none;
}

#sec3 {
  top:200%;
  background-color: none;
}

#sec4 {
  top:300%;
  background-color: none;
}

#sec5 {
  top:400%;
  background-color: none;
}

#sec6 {
  top:500%;
  background-color: none;
}

#sec7 {
  top:600%;
  background-color: none;
}

#sec8 {
  top:700%;
  background-color: none;
}
          
#sec9 {
  top:800%;
  background-color: none;
}
          
#sec10 {
  top:900%;
  background-color: none;
}

#sec11 {
  top:1000%;
  background-color: none;
}

#sec12 {
  top:1100%;
  background-color: none;
}

#sec13 {
  top:1200%;
  background-color: none;
}
/* fin section dans !corpusc! */

/* yeux  anim*/
.zieu{
  width:100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: row;
  grid-column-start:4 ;
  grid-column-end:18 ;
  grid-row-start:2 ;
  grid-row-end:12;
}

.eyes {
    width: 200%;
    height: 200%;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: row;
    column-gap: 5%;
}
  
.eye {
    border: solid #fff 1px;
    width: 20%;
    height: 20%;
    border-radius: 100%;
    background-color: #000;
    display: flex;
    justify-content: center;
    align-items: center;
  }
  
.pupil {
    width: 20%;
    height: 20%;
    border-radius: 100%;
    background-color: #fff;
}  
/*fin yeux anim*/

/*fond particules*/
/*BACKGROOOOOOOOOOOOOOOOOOOOOUND*/
@keyframes move {
    100% {transform: translate3d(0, 0, 1px) rotate(360deg);}
}

.background {
    position: fixed;
    width: 100vw;
    height: 100vh;
    top: 0;
    left: 0;
    background: #ffffff;
    overflow: hidden;
    z-index:-10;
}

.background span {
    width: 1vmin;
    height: 1vmin;
    border-radius: 1vmin;
    backface-visibility: hidden;
    position: absolute;
    animation: move;
    animation-duration: 20;
    animation-timing-function: linear;
    animation-iteration-count: infinite;
}

.background span:nth-child(0) {
    color: #000000;
    top: 13%;
    left: 38%;
    animation-duration: 243s;
    animation-delay: -100s;
    transform-origin: 6vw -1vh;
    box-shadow: -2vmin 0 0.5574713372415834vmin currentColor;
}
.background span:nth-child(1) {
    color: #000000;
    top: 12%;
    left: 97%;
    animation-duration: 155s;
    animation-delay: -11s;
    transform-origin: 19vw -3vh;
    box-shadow: 2vmin 0 0.9949157644399785vmin currentColor;
}
.background span:nth-child(2) {
    color: #000000;
    top: 34%;
    left: 27%;
    animation-duration: 34s;
    animation-delay: -94s;
    transform-origin: -2vw 4vh;
    box-shadow: 2vmin 0 0.9931882024177596vmin currentColor;
}
.background span:nth-child(3) {
    color: #000000;
    top: 95%;
    left: 19%;
    animation-duration: 84s;
    animation-delay: -286s;
    transform-origin: -3vw 22vh;
    box-shadow: -2vmin 0 0.9824081639121449vmin currentColor;
}
.background span:nth-child(4) {
    color: #000000;
    top: 2%;
    left: 58%;
    animation-duration: 126s;
    animation-delay: -4s;
    transform-origin: 4vw -7vh;
    box-shadow: 2vmin 0 0.5186654903927095vmin currentColor;
}
.background span:nth-child(5) {
    color: #000000;
    top: 36%;
    left: 71%;
    animation-duration: 36s;
    animation-delay: -233s;
    transform-origin: -17vw 20vh;
    box-shadow: -2vmin 0 0.5938462200199852vmin currentColor;
}
.background span:nth-child(6) {
    color: #000000;
    top: 91%;
    left: 53%;
    animation-duration: 81s;
    animation-delay: -118s;
    transform-origin: 14vw 5vh;
    box-shadow: 2vmin 0 0.43756990742723356vmin currentColor;
}
.background span:nth-child(7) {
    color: #000000;
    top: 28%;
    left: 69%;
    animation-duration: 136s;
    animation-delay: -252s;
    transform-origin: 14vw -10vh;
    box-shadow: 2vmin 0 1.1967419771385055vmin currentColor;
}
.background span:nth-child(8) {
    color: #000000;
    top: 12%;
    left: 96%;
    animation-duration: 128s;
    animation-delay: -155s;
    transform-origin: 3vw -17vh;
    box-shadow: 2vmin 0 0.928376371493161vmin currentColor;
}
.background span:nth-child(9) {
    color: #000000;
    top: 2%;
    left: 96%;
    animation-duration: 67s;
    animation-delay: -142s;
    transform-origin: -13vw 24vh;
    box-shadow: -2vmin 0 0.4766558302587405vmin currentColor;
}
.background span:nth-child(10) {
    color: #000000;
    top: 87%;
    left: 98%;
    animation-duration: 98s;
    animation-delay: -154s;
    transform-origin: -22vw 18vh;
    box-shadow: -2vmin 0 1.2369938338175996vmin currentColor;
}
.background span:nth-child(11) {
    color: #000000;
    top: 55%;
    left: 65%;
    animation-duration: 295s;
    animation-delay: -42s;
    transform-origin: 20vw 16vh;
    box-shadow: -2vmin 0 0.3382471128504262vmin currentColor;
}
.background span:nth-child(12) {
    color: #000000;
    top: 84%;
    left: 17%;
    animation-duration: 256s;
    animation-delay: -156s;
    transform-origin: 4vw 12vh;
    box-shadow: -2vmin 0 1.0887118567481615vmin currentColor;
}
.background span:nth-child(13) {
    color: #000000;
    top: 63%;
    left: 20%;
    animation-duration: 154s;
    animation-delay: -206s;
    transform-origin: -19vw 20vh;
    box-shadow: -2vmin 0 0.7126860984116186vmin currentColor;
}
.background span:nth-child(14) {
    color: #000000;
    top: 26%;
    left: 73%;
    animation-duration: 286s;
    animation-delay: -246s;
    transform-origin: 6vw 18vh;
    box-shadow: -2vmin 0 1.0608875953674697vmin currentColor;
}
.background span:nth-child(15) {
    color: #000000;
    top: 26%;
    left: 9%;
    animation-duration: 105s;
    animation-delay: -277s;
    transform-origin: -11vw -8vh;
    box-shadow: -2vmin 0 0.6093585710937971vmin currentColor;
}
.background span:nth-child(16) {
    color: #000000;
    top: 70%;
    left: 9%;
    animation-duration: 207s;
    animation-delay: -149s;
    transform-origin: 14vw -1vh;
    box-shadow: 2vmin 0 0.8010804828664705vmin currentColor;
}
.background span:nth-child(17) {
    color: #000000;
    top: 96%;
    left: 53%;
    animation-duration: 288s;
    animation-delay: -158s;
    transform-origin: 23vw 22vh;
    box-shadow: 2vmin 0 1.1811946011769492vmin currentColor;
}
.background span:nth-child(18) {
    color: #000000;
    top: 13%;
    left: 17%;
    animation-duration: 176s;
    animation-delay: -199s;
    transform-origin: 4vw 13vh;
    box-shadow: -2vmin 0 0.5961731100798575vmin currentColor;
}
.background span:nth-child(19) {
    color: #000000;
    top: 79%;
    left: 84%;
    animation-duration: 130s;
    animation-delay: -10s;
    transform-origin: -6vw 10vh;
    box-shadow: 2vmin 0 1.2096188876198586vmin currentColor;
}
.background span:nth-child(20) {
    color: #000000;
    top: 56%;
    left: 8%;
    animation-duration: 136s;
    animation-delay: -16s;
    transform-origin: -17vw -4vh;
    box-shadow: -2vmin 0 0.9075677238589638vmin currentColor;
}
.background span:nth-child(21) {
    color: #000000;
    top: 11%;
    left: 54%;
    animation-duration: 115s;
    animation-delay: -35s;
    transform-origin: 14vw 0vh;
    box-shadow: -2vmin 0 0.8664150240581505vmin currentColor;
}
.background span:nth-child(22) {
    color: #000000;
    top: 35%;
    left: 89%;
    animation-duration: 178s;
    animation-delay: -41s;
    transform-origin: -14vw -13vh;
    box-shadow: -2vmin 0 0.45781008171976434vmin currentColor;
}
.background span:nth-child(23) {
    color: #000000;
    top: 81%;
    left: 49%;
    animation-duration: 208s;
    animation-delay: -15s;
    transform-origin: -1vw -19vh;
    box-shadow: -2vmin 0 1.1558233482554594vmin currentColor;
}
.background span:nth-child(24) {
    color: #000000;
    top: 59%;
    left: 84%;
    animation-duration: 295s;
    animation-delay: -221s;
    transform-origin: -8vw -4vh;
    box-shadow: -2vmin 0 0.960045277964608vmin currentColor;
}
.background span:nth-child(25) {
    color: #000000;
    top: 14%;
    left: 72%;
    animation-duration: 8s;
    animation-delay: -261s;
    transform-origin: 22vw -17vh;
    box-shadow: -2vmin 0 0.6762817054387239vmin currentColor;
}
.background span:nth-child(26) {
    color: #000000;
    top: 59%;
    left: 40%;
    animation-duration: 151s;
    animation-delay: -218s;
    transform-origin: -16vw -17vh;
    box-shadow: 2vmin 0 0.943706568082069vmin currentColor;
}
.background span:nth-child(27) {
    color: #000000;
    top: 15%;
    left: 88%;
    animation-duration: 121s;
    animation-delay: -171s;
    transform-origin: -5vw -8vh;
    box-shadow: -2vmin 0 0.8726031840665397vmin currentColor;
}
.background span:nth-child(28) {
    color: #000000;
    top: 53%;
    left: 96%;
    animation-duration: 27s;
    animation-delay: -48s;
    transform-origin: 17vw 11vh;
    box-shadow: 2vmin 0 0.46716915160855865vmin currentColor;
}
.background span:nth-child(29) {
    color: #000000;
    top: 42%;
    left: 79%;
    animation-duration: 31s;
    animation-delay: -267s;
    transform-origin: -6vw -20vh;
    box-shadow: -2vmin 0 0.48956889790473324vmin currentColor;
}
.background span:nth-child(30) {
    color: #000000;
    top: 41%;
    left: 7%;
    animation-duration: 89s;
    animation-delay: -26s;
    transform-origin: -1vw 8vh;
    box-shadow: 2vmin 0 0.9130525366179133vmin currentColor;
}
.background span:nth-child(31) {
    color: #000000;
    top: 23%;
    left: 89%;
    animation-duration: 12s;
    animation-delay: -102s;
    transform-origin: 24vw 2vh;
    box-shadow: -2vmin 0 0.5354576625704056vmin currentColor;
}
.background span:nth-child(32) {
    color: #000000;
    top: 19%;
    left: 60%;
    animation-duration: 104s;
    animation-delay: -279s;
    transform-origin: -14vw 20vh;
    box-shadow: 2vmin 0 0.3202399946807676vmin currentColor;
}
.background span:nth-child(33) {
    color: #000000;
    top: 81%;
    left: 72%;
    animation-duration: 154s;
    animation-delay: -51s;
    transform-origin: -20vw -24vh;
    box-shadow: 2vmin 0 0.6258982439615877vmin currentColor;
}
.background span:nth-child(34) {
    color: #000000;
    top: 52%;
    left: 6%;
    animation-duration: 209s;
    animation-delay: -29s;
    transform-origin: 20vw 25vh;
    box-shadow: 2vmin 0 0.7369576766138403vmin currentColor;
}
.background span:nth-child(35) {
    color: #000000;
    top: 74%;
    left: 36%;
    animation-duration: 15s;
    animation-delay: -44s;
    transform-origin: -17vw 10vh;
    box-shadow: -2vmin 0 0.3407750158651217vmin currentColor;
}

/* Nav bar menu*/
#galerie {
    display: flex;
    flex-wrap:wrap;
    max-width: 900px;
    margin: 0 auto;
    border: 1px solid #999;
}

#galerie article {
    width: 33.3333333%;
    overflow: hidden;
    position: relative;
}

#galerie img {
    height: 500px;
    object-fit: cover;
    object-position: center center;
}

#galerie .infos {
    position:absolute;
    top:0;
    left:0;
    width: 100%;
    height:100%;
    background-color: rgba(0,0,0,0.5);
    color:#fff;
    text-align: center;
    display:flex;
    flex-direction: column;
    justify-content: center;
    opacity:0;
    transform:scale(0.7);
    transition:opacity ease 0.2s;
}

#galerie article:hover .infos {
    opacity:1;
    transform:scale(1);
}

/* partie dropdown */
#drops button {
  border:2px solid burlywood;
  background-color: burlywood;
  color: #fff;
  padding:15px 20px;
  border-radius: 4px;
  font-size: 25px;
  /*cursor: pointer;*/
}

#drops button:hover {
  background-color: darkred;
}

#drops .bullet {
  position:absolute;
  background-color: #fff;
  box-shadow: 0 0 6px #999;
  font-size:0.89rem;
  width:12rem;
  color:darkred;
  padding: 10x;
  display:none;
  margin-top: 20px;
  margin-left: -50px;
}

#drops button:hover .bullet {
  display: block;
}

/* navigation */
nav {
  /*margin-top: 2rem;*/
  grid-column-start: 1;
  grid-row-start: 2;
  grid-column-end:6;
  grid-row-end:21;
  background-color: none;
  color:#000;
}
ul, li {
  margin:0;
  padding:0;
  list-style-type: none;
}

ul {
  display: inline-block;

  
}

li {
  width:100%;
}

nav {
  background-color: none;
  padding: 15px;
  color:black;
  text-decoration: none;
  display: inline-block;
  box-sizing:border-box;
  min-width: 6rem;
  text-align: center;
  font-size: 25px;
  line-height: 28px;
/* cursor: pointer;*/
}

nav a:hover {
  background-color:rgb(0, 0, 0);
  color:#ffffff;
  min-height: 2rem;
}

nav ul ul {
  flex-direction: column;
  display: none;
}

nav li:hover ul {
  display: block;
  }

nav li li {
  width: 100%;
  height: auto;
}
.lalien {
 max-height: 1rem;
 background-color: white;
 color:#fff;
 text-decoration: none;
 display: inline-block;
 box-sizing:border-box;
 min-width: 1rem;
 text-align: center;
 /*cursor: pointer;*/
 min-height:0.5rem;
}
a {text-decoration: none;
  color: black;

}
/* fin*/



/*scrollbar fonctionne pas
::-webkit-scrollbar {
  width: 20px;
}

::-webkit-scrollbar-track {
  box-shadow: inset 0 0 5px none; 
  border-radius: 10px;
}
 
::-webkit-scrollbar-thumb {
  background: rgb(0, 0, 0); 
  color:#FFF;
  border-radius: 10px;
}

}
scroll boule fin*/