* {
    margin: 0%;
}

@font-face {
    font-family: Compagnon-Medium;
    src: url(./fonts/Compagnon-Medium.otf);
}

@font-face {
    font-family: Compagnon-Bold;
    src: url(./fonts/Compagnon-Bold.otf);
}

@font-face {
    font-family: Compagnon-Light;
    src: url(./fonts/Compagnon-Light.otf);
}

@font-face {
    font-family: Compagnon-LightItalic;
    src: url(./fonts/Compagnon-LightItalic.otf);
}

@font-face {
    font-family: Compagnon-Roman;
    src: url(./fonts/Compagnon-Roman.otf);
}

/* HEADER */
header {
    background-color: rgb(0, 0, 0);
}

header nav ul {
    display: flex;
    justify-content: space-around;
    height: 80px;
    align-items: center;
    margin: 0;
    font-size: 25px;
}

nav li {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 10px;
}

ul li a {
    color: azure;
    text-decoration: none;
    cursor: pointer;
    transition: transform 0.3s ease;
}

ul li a:hover {
    background: none;
    transform: scale(1.1);
}

header nav ul li:nth-of-type(3) a {
    font-family: "Compagnon-Bold";
}

header nav ul li:nth-of-type(4) a {
    font-family: "Compagnon-Light";
}

header nav ul li:nth-of-type(5) a {
    font-family: "Compagnon-Roman";
}

header nav ul li:nth-of-type(6) a {
    font-family: "Compagnon-Medium";
}

a {
    color: white;
    text-decoration: none;
}

.logo {
    height: 50px;
    width: auto;
    display: block;
}
#retour {
	width: 70px;
	height: 40px;
	border-radius: 50px;
	display: grid;
	place-items: center;
	background: rgb(0, 0, 0);
	background: radial-gradient(
		circle,
		rgba(226, 193, 249, 1) 0%,
		rgba(240, 255, 250, 1) 25%,
		rgba(251, 255, 228, 1) 50%,
		rgba(254, 218, 251, 1) 75%,
		rgba(226, 193, 249, 1) 100%
	);
	position: absolute;
    font-family: Arial;
    
}

#retour a {
	/*placer le nom de votre font*/
	font-size: 16px;
	text-decoration: none;
	color: #494949;
}

/*VIDEO 1*/
video {
    width: 100vw;
}

/* ANIMATIONS */
.note {
    animation: wave linear infinite alternate;
    background-color: transparent;
    color: black;
}

.note-a {
    position: absolute;
    top: 1100px;
    left: 10%;
}

.note-b {
    position: absolute;
    top: 1100px;
    left: 0%;
}

.note-c {
    position: absolute;
    top: 1090px;
    left: 15%;
}

.note-d {
    position: absolute;
    top: 1170px;
    left: 20%;
}

.note-e {
    position: absolute;
    top: 1170px;
    left: 25%;
}

@keyframes wave {
    0% {
        transform: translateX(0px) translateY(50px);
    }

    25% {
        transform: translateX(50px) translateY(0px);
    }

    50% {
        transform: translateX(100px) translateY(50px);
    }

    75% {
        transform: translateX(150px) translateY(0px);
    }

    100% {
        transform: translateX(200px) translateY(50px);
    }
}


/* .handwriting {
    font-family: Compagnon-Bold;
    font-size: 20px;
    color: black;
    background: linear-gradient(90deg, black 50%, transparent 50%);
    background-clip: text;
    -webkit-background-clip: text;
    text-align: left;
    -webkit-text-fill-color: transparent;
    animation: reveal 4s infinite 1s;
    width: 300px;
    position: absolute;
    top: 795px;
    left: 200px;
}

.handwriting-2 {
    font-family: Compagnon-Bold;
    font-size: 20px;
    color: black;
    background: linear-gradient(90deg, black 50%, transparent 50%);
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    animation: reveal 4s infinite 1s;
    width: 300px;
    position: absolute;
    top: 858px;
    left: 200px;
}

.handwriting-3 {
    font-family: Compagnon-Bold;
    font-size: 20px;
    color: black;
    background: linear-gradient(90deg, black 50%, transparent 50%);
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    animation: reveal 4s infinite 1s;
    width: 300px;
    position: absolute;
    top: 920px;
    left: 400px;
}

.handwriting-4 {
    font-family: Compagnon-Bold;
    font-size: 20px;
    color: black;
    background: linear-gradient(90deg, black 50%, transparent 50%);
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    animation: reveal 4s infinite 1s;
    width: 400px;
    position: absolute;
    top: 983px;
    left: 250px;
}


@keyframes reveal {
    from {
        background-size: 200% 100%;
        background-position: 100% 0;
    }

    to {
        background-size: 100% 100%;
        background-position: 0 0;
    }
} */

#scrollTop{
    display: flex;
    align-items: center;
}
/*BOUTONS PLAY*/

.image-bouton-play {
    width: 50px;
    display: block;
    position: absolute;
    cursor: pointer;
    
    top: 1097px;
    left: 150px
}

.image-bouton-play-2 {
    width: 50px;
    display: block;
    position: absolute;
    cursor: pointer;
    top: 1233px;
    left: 150px
}

/*TOUCHES PIANO*/
.piano {
    display: grid;
    grid-template-columns: 1fr 350px;
    grid-template-rows: 100px 53px 20px 53px 50px 53px 20px 53px 20px 53px 50px 53px 20px 53px 20px 53px 100px;
    grid-column-gap: 0px;
    grid-row-gap: 0px;
}

.div1 {
    grid-area: 1 / 2 / 2 / 3;
}

.div2 {
    grid-area: 2 / 2 / 3 / 3;
    background-color: black;
    border-radius: 3px;
}

.div3 {
    grid-area: 3 / 2 / 4 / 3;
}

.div4 {
    grid-area: 4 / 2 / 5 / 3;
    background-color: black;
    border-radius: 3px;
}

.div5 {
    grid-area: 5 / 2 / 6 / 3;
}

.div6 {
    grid-area: 6 / 2 / 7 / 3;
    background-color: black;
    border-radius: 3px;
}


.div7 {
    grid-area: 7 / 2 / 8 / 3;
}


.div8 {
    grid-area: 8 / 2 / 9 / 3;
    background-color: black;
    border-radius: 3px;
}

.div9 {
    grid-area: 9 / 2 / 10 / 3;
}

.div10 {
    grid-area: 10 / 2 / 11 / 3;
    background-color: black;
    border-radius: 3px;
}

.div11 {
    grid-area: 11 / 2 / 12 / 3;
}

.div12 {
    grid-area: 12 / 2 / 13 / 3;
    background-color: black;
    border-radius: 3px;
}

.div13 {
    grid-area: 13 / 2 / 14 / 3;
}

.div14 {
    grid-area: 14 / 2 / 15 / 3;
    background-color: black;
    border-radius: 3px;
}

.div15 {
    grid-area: 15 / 2 / 16 / 3;
}

.div16 {
    grid-area: 16 / 2 / 17 / 3;
    background-color: black;
    border-radius: 3px;
}

.div17 {
    grid-area: 17 / 2 / 18 / 3;
}

.popup-container {
    position: relative;
}

.popup {
    display: none;
    position: absolute;
    left: 50%;
    top: 20%;
    transform: translateX(-140%);
    width: 500px;
    background-color: black;
    color: white;
    padding: 10px 20px;
    border-radius: 5px;
    text-align: left;
    font-size: 18px;
    white-space: normal;
    overflow-wrap: break-word;
    font-family: Arial;
}

.popup-container:hover .popup {
    display: block;
}

.story {
    font-family: Arial;
    font-size: 20px;
    color: white;
    text-align: center;
    padding: 0;
    margin: 16px;
}

.Bold {
    font-family: Compagnon-Bold;
    font-size: 20px;
    color: white;
    text-align: center;
    padding: 0;
    margin: 16px;

}

.popup-img-block {
    display: none;
    position: absolute;
    left: 50%;
    width: 500px;
    top: 20%;
    transform: translateX(-140%);
}

.popup-container:hover .popup-img-block {
    display: block;
}

.popup-image img {
    width: 80%;
    height: auto;
    display: block;
    padding: 0;
    border-radius: 5px;
    margin: 0 auto;
}

.Light-Light-italic {
    font-family: Compagnon-Light;
    font-size: 20px;
    color: white;
    text-align: center;
    padding: 0;
    margin: 16px;
}

.different-font {
    font-family: Compagnon-LightItalic;
}

/*PIANO 2*/
.piano-2 {
    display: grid;
    grid-template-columns: 1fr 350px;
    grid-template-rows: 100px 53px 20px 53px 20px 53px 50px 53px 20px 53px 20px 53px 100px;
    grid-column-gap: 0px;
    grid-row-gap: 0px;
}

.div1 {
    grid-area: 1 / 2 / 2 / 3;
}

.div2 {
    grid-area: 2 / 2 / 3 / 3;
    background-color: black;
    border-radius: 3px;
}

.div3 {
    grid-area: 3 / 2 / 4 / 3;
}

.div4 {
    grid-area: 4 / 2 / 5 / 3;
    background-color: black;
    border-radius: 3px;
}

.div5 {
    grid-area: 5 / 2 / 6 / 3;
}

.div6 {
    grid-area: 6 / 2 / 7 / 3;
    background-color: black;
    border-radius: 3px;
}

.div7 {
    grid-area: 7 / 2 / 8 / 3;
}

.div8 {
    grid-area: 8 / 2 / 9 / 3;
    background-color: black;
    border-radius: 3px;
}

.div9 {
    grid-area: 9 / 2 / 10 / 3;
}

.div10 {
    grid-area: 10 / 2 / 11 / 3;
    background-color: black;
    border-radius: 3px;
}

.div11 {
    grid-area: 11 / 2 / 12 / 3;
}

.div12 {
    grid-area: 12 / 2 / 13 / 3;
    background-color: black;
    border-radius: 3px;
}

.div13 {
    grid-area: 13 / 2 / 14 / 3;
}

.Roman {
    font-family: Compagnon-Roman;
    font-size: 20px;
    color: white;
    text-align: center;
    padding: 0;
    margin: 16px;
}

.Medium {
    font-family: Compagnon-Medium;
    font-size: 20px;
    color: white;
    text-align: center;
    padding: 0;
    margin: 16px;
}

/* ANIMATIONS */
.cursor {
    display: inline-block;
    width: 3px;
    height: 20px;
    background-color: black;
    animation: blink 0.7s infinite;
}

#text-container {
    position: absolute;
    font-family: Compagnon-Roman;
    left: 200px;
    top: 1943px;
}

#terminal-container {
    font-family: Compagnon-Medium;
    font-size: 20px;
    white-space: pre-line;
    color: #00FF00;
    background-color: black;
    width: 250px;
    left: 200px;
    position: absolute;
    top: 2187px;
}

.cursor-terminal {
    display: inline-block;
    width: 10px;
    height: 18px;
    background-color: #00FF00;
    animation: blink 0.7s infinite;
}

@keyframes blink {
    50% {
        opacity: 0;
    }
}

/* TEXT AREA */

.textarea-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
}

textarea {
    resize: none;
    outline: none;
}

#textarea-bold {
    font-family: Compagnon-Bold;
    width: 800px;
    height: 120px;
    font-size: 20px;

}

#textarea-light {
    font-family: Compagnon-Light;
    width: 400px;
    height: 150px;
    font-size: 25px;
}

#textarea-lightitalic {
    font-family: Compagnon-LightItalic;
    width: 400px;
    height: 150px;
    font-size: 25px;
}

#textarea-roman {
    font-family: Compagnon-Roman;
    width: 600px;
    height: 300px;
    font-size: 30px;
}

#textarea-medium {
    font-family: Compagnon-Medium;
    width: 600px;
    height: 140px;
    font-size: 35px;
}

.partie2 {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    grid-template-rows: 100px repeat(8, 0.6fr);
    grid-column-gap: 0px;
    grid-row-gap: 0px;
    }
    .div1-partie2 { grid-area: 1 / 1 / 2 / 8; }
    .div2-partie2 { grid-area: 2 / 1 / 4 / 8;
    
    position: relative;
top: 20%;
}
    .div3-partie2 { grid-area: 3 / 1 / 4 / 4; 
        position: relative;
top: 20%;
        margin-top: 200px ;
        margin-left: 500px 
      }
    .div4-partie2 { grid-area: 3 / 4 / 4 / 8; 
        z-index: -1
}
    .div5-partie2 { grid-area: 4 / 1 / 5 / 8; }
    .div6-partie2 { grid-area: 5 / 1 / 6 / 3; 
        margin-top: 30px ;
    }
    .div7-partie2 { grid-area: 5 / 3 / 6 / 5; 
    }
    .div8-partie2 { grid-area: 5 / 5 / 6 / 7; 
        margin-top: 30px ;
    }
    .div9-partie2 { grid-area: 6 / 1 / 7 / 7; }
    .div10-partie2 { grid-area: 7 / 1 / 8 / 3;
        margin-left: 50px ;
        margin-top: 28px;
    }
    .div11-partie2 { grid-area: 7 / 3 / 8 / 5; 
        margin-left: 50px 
    }
    .div12-partie2 { grid-area: 7 / 5 / 8 / 7; 
        margin-left: 150px }
    .div13-partie2 { grid-area: 8 / 1 / 9 / 7; 
    margin-top: 80px;}
    .div14-partie2 { grid-area: 9 / 1 / 10 / 7; }

    .img-fortissimo { 
        width: 100%;
    }
.img-fortissimo-2 {
    width: 80%;
}


/* FOOTER */

footer {
    background-color: black;
    color: white;
    text-align: center;
    padding: 20px 0;
    position: relative;
    bottom: 0;
    width: 100%;
    font-family: Arial;
}

.footer-container {
    display: flex;
    justify-content: center;
    align-items: flex-end;
    gap: 20px;
}

.button-icon {
    width: 20px;
    height: 20px;
}

.references {
    display: inline-block;
    line-height: 1.5;
}

button:hover {
    background: none;
    transform: scale(1.1);
}

button {
    background-color: transparent;
    /* position: absolute; */
    gap: 10px;
    padding: 10px 20px;
    border: 2px solid black;
    color: white;
    padding: 10px 20px;
    font-size: 16px;
    cursor: pointer;
    transition: background 0.3s, color 0.3s;
}

/*Revoir les différentes valeurs des px à la toute fin */



.ligne{
    background-color: rgb(0, 0, 0);
    width: 100vw;
    height: 2px;
    position: absolute;
    z-index: -1

}
.ligne:nth-child(1) {
    top: 72%;
}
.ligne:nth-child(2) {
    top: 82%;
}
.ligne:nth-child(3) {
    top:89.5%;
}


.ligne:nth-child(4) {
    top: 96%;
}

.ligne:nth-child(5) {
    top: 103%;
}

.ligne:nth-child(6) {
    top: 111%;
}

.ligne:nth-child(7) {
    top: 119%;
  
}

.ligne:nth-child(8) {
    top: 126.5%;
}

.ligne:nth-child(9) {
    top: 133.5%;
 
}

.ligne:nth-child(10) {
    top: 142%;
}

.ligne:nth-child(11) {
    top: 149.5%;
}

.ligne:nth-child(12) {
    top: 160%;
}

.ligne:nth-child(13) {
    top: 230%;
   
}

.ligne:nth-child(14) {
    top: 239%;
}


.ligne:nth-child(15) {
    top: 247%;
    
}

.ligne:nth-child(16) {
    top: 255%;
     
}

.ligne:nth-child(17) {
    top: 262%;
}

.ligne:nth-child(18) {
    top: 269.2%;
}

.ligne:nth-child(19) {
    top: 277%;
}

.ligne:nth-child(20) {
    top: 285%
}

.ligne:nth-child(21) {
    top: 295%
}