body {
    text-rendering: optimizeLegibility;
    --res: calc(0.01 * 10vmin);
    text-decoration: none;
    overflow-x: hidden;
    margin: 0;
    padding: 0;
    background-color: white;
    -webkit-font-smoothing: antialiased;
    font-family: Main;
    box-sizing: border-box;
    width: 100%;
    height: 100%;
}

@font-face {
    font-family: Main;
    src: url("medias/Unica77LL-Regular.otf");
}
.color-header {
    margin: 0;
    padding: 0;
    width: 100%;
    display: flex;
    z-index: 999;
    position: fixed;
    top: 0;
    left: 0;


}

.link {
    cursor: pointer;
}
.color-bands1 {
    height: 10px;
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    background-color: #603813;
    display: inline-flex;
    width: 25%;
}
.color-bands2 {
    box-sizing: border-box;
    height: 10px;
    background-color: #ce8aff;
    display: inline-flex;
    margin: 0;
    padding: 0;
    width: 25%;
}
.color-bands3 {
    box-sizing: border-box;
    height: 10px;
    background-color: #f53d43;
    display: inline-flex;
    margin: 0;
    padding: 0;
    width: 25%;
}
.color-bands4 {
    box-sizing: border-box;
    height: 10px;
    margin: 0;
    padding: 0;
    background-color: #3181ff;
    display: inline-flex;
    width: 25%;
}
/* Header */
header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 2px solid #000;
    background-color: #fff;
    height: 40px;
    padding-top: 10px;
    float: right;
    grid-area: 1 / 2 / 2 / 3; 
  
}

/* Styles pour les boutons de langue */
.language-buttons {
    display: flex;
    align-items: center;
    margin-top: 2px;
}

a {
    text-decoration: none;
    color: #000;
    margin: 0;
    padding: 0;
}

#bleu:hover {
    color: #f53d43;
}
#rose:hover {
    color: #ce8aff;
}
#jaune:hover {
    color: #603813;
}

#fr-button {
    padding-right:5px;
}
/* Styles pour le conteneur des boutons de menu */
.menu-buttons {
    margin-right: 10px;
    margin-top: 5px;
    display: flex;
    align-items: center;
    justify-content: flex-end; /* Pour aligner les boutons à droite */
}

.menu-buttons a {
    margin-left: 10px; /* Espacement entre les boutons */
}

.menu-buttons img {
    width: 20px; /* Ajuster la taille des icônes selon vos besoins */
    height: 20px;
}



.titre a {
   
    display: flex;
    align-items: center;
}

.info {
    width: 18px;
z-index: 3;
   margin-top: -5px;
    align-items: center;
    /* Ajoutez les styles souhaités pour l'élément .info */
    margin-right: 10px; /* Exemple de marge entre l'image et le titre */
    transition: all 1s ease;
}

.info:hover {
rotate: 180deg;
}
.plus {
    transition: all 1s ease;
 
}
.plus:hover {
    rotate: 180deg;
    }

.roro:hover {
    rotate: 180deg;
        }

        .roro {
            rotate: 45deg;
            transition: all 1s ease;
        }
.italic {
    font-style: italic;
}

.blase {
    position: absolute;
    top: 20px;
    left: 20px;

    grid-area: 1 / 1 / 2 / 2;
    line-height: 0.9;
    font-family: Main;
    z-index: 2;
    font-size: 40px;
}

header#menu {
    position: absolute;
    z-index: 10;
    left: 25%;
    right: 0;
}

#spacer {
    height: 50px;
}



p {
    margin: 0; /* Supprime les marges par défaut des paragraphes */
}




.left-column1 p {
    position: absolute;
  top: 330px;
  width: 22%;
  margin-left: 20px;

    bottom: 0;
    /* height: fit-content; */
    /* border: 0; */
    overflow: hidden;
}


#fanfic {
   font-size: 19px;
}
.titre {
    position: absolute;
    top: -20px;
    display: flex;
}

.titre1 {
    position: absolute;
    margin-left: 20px;

    top: 230px;
    display: flex;
}

.left-column {
    z-index: 2;
    grid-area: 1 / 1 / 3 / 2; /* Ajustez en fonction de votre grille */
    margin-left: 20px;
    position: relative;
}

.columns p {
    display: grid;
    grid-template-columns: 1fr 1fr; /* Colonnes de largeur égale */
    margin: 0;

}

.info_close {
    width: 25px;
    height: 25px;
    z-index: 3;
  position: fixed;
    right: 10px;
    top: 20px;
    overflow: hidden;
    cursor: pointer;
    z-index: 9;
    transition: all 0.5s cubic-bezier(0.715, 0.195, 0.000, 0.925); /* custom */
    transition-timing-function: cubic-bezier(0.715, 0.195, 0.000, 0.925); /* custom */
  }
  .info_open.is_open {
    z-index: 40;
    overflow: hidden;
    -webkit-transform: translateY(100%);
    transform: translateY(100%);
  }
  
  .info_open {
    position: fixed;
    z-index: 198;
    float: right;
    height: 100%;
  
  line-height: 1.1;
    font-family: Main;
    font-weight: normal;
    font-size: 20px;
    right: 0;
    text-align: left;
    overflow: scroll;
    -webkit-overflow-scrolling: touch;
    width: 100%; 
    box-sizing: border-box;
   
    color: rgb(0, 0, 0);
    background-color: rgb(255, 255, 255);
    transform: translateY(0%);
    transition: all .4s cubic-bezier(0.82, 0.09, 0.25, 1);
  
  }

  .text_info {
    margin-left: 25%;
    margin-top: 70px;
    width: 35%;

  }

.left-column p {
    position: relative;
    /* position: absolute;  Commentez ou supprimez cette ligne si le positionnement absolu n'est pas nécessaire */
    top: 50px;
    bottom: 0;
    overflow: hidden;
}

/* Reste du CSS inchangé */
.contact {
   width: 30%;
    position: fixed;
    
top: 70px;
right: -100px;
}
#maindiv{
  width: 100%;
  position: fixed;
  bottom: 10px;
    overflow: hidden;
    white-space: nowrap;
  }
  
  #div1 {
    display: inline-block;
    animation: marquee 40s linear infinite;
   
  }

  @keyframes marquee {
    from {
      transform: translateX(0%);
    }
    to {
      transform: translateX(-100%);
    }
  }
  
  @keyframes marquee2 {
    from {
      transform: translateX(0%);
    }
    to {
      transform: translateX(-200%);
    }
  }

p {
    width: 90%;
    padding: 0;
    margin: 0;
}
.title {
    grid-area: 1 / 1 / 2 / 2;
    line-height: 0.9;
    font-family: Main;
    z-index: 2;
    font-size: 40px;
}

.title2 {
    grid-area: 1 / 1 / 2 / 2;
    line-height: 0.9;
    font-family: Main;
    z-index: 2;
    font-size: 40px;
    opacity: 0;
}

.right-column {
position: relative;
padding: 0;
margin: 0;
grid-area: 1 / 2 / 3 / 3;

}

.parent {
    display: grid;
    grid-template-columns: 1fr 3fr;
    grid-template-rows: 0fr 2fr;
    grid-column-gap: 0px;
    height: 687px;
    padding-bottom: 5px;
    }
/* ... Vos autres styles CSS ... */

.slider {
    width: 100%;
    height: 100%;
    position: absolute;
    overflow-x: scroll;
    display: flex;
    scroll-snap-type: x mandatory; /* Pour un défilement fluide sur chaque image */
    bottom: 0;
    overflow-y: hidden;
}

.slide {
    flex: 2 0 auto; /* Empêche les images de se redimensionner */
    width: 40%; /* Chaque image occupe 100% de la largeur du slider */
   margin-right: 5px;


   height: 100%;
}

.slider img {
    width: 100%;
    height: 100%;
    object-fit: cover; /* Redimensionne les images pour remplir le conteneur */
}

video {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.slider::-webkit-scrollbar {
display: none;
}

.info_open::-webkit-scrollbar {
    display: none;
    }

.spacer {
    height: 10px;
}

.audio-player {
    height: 70px;
    background-color: #ffffff;
    display: flex;
    align-items: center;
    justify-content: space-between;
    bottom: 0;
    position: fixed;
    width: 100%;
    z-index: 999;
    visibility: hidden;

  
}

.audio-player.visible {
    visibility: visible;
  
}



audio::-webkit-media-controls-panel {
    background-color: white;
  }

audio {
    width: 100%;
    background-color: white;
    color: white;
    height: 20px; /* Ajustez la hauteur du lecteur selon vos besoins */
}

/* Style pour les autres éléments du lecteur audio (titre, durée, boutons) */
.player-info,
.player-controls {
    background-color: white;
    display: flex;
    align-items: center;
}

.player-controls button {
    background-color: white;
    margin: 0 10px;
    font-size: 10px;
    cursor: pointer;
    background: none;
    border: none;
}

.button-player-played  {
visibility: hidden;
position: absolute;
    right: 40px;
}

.button-player-stopped  {
visibility: visible;
position: absolute;
    right: 40px;
}

#button-player-played img {
width: 22px;
height: 24px;
position: absolute;
    right: 40px;
    top: 17px;
animation: rotat 5s linear infinite;
}

#button-player-stopped img {
width: 22px;
height: 24px;
/*animation: stopp 2s linear infinite;*/
}

@keyframes rotat {
    from {
      transform: rotate(0deg);
    }
    to {
      transform: rotate(360deg);
    }
  }
  
@keyframes stopp {
    from {
      transform: rotate(0deg);
    }
    to {
      transform: rotate(0deg);
    }
  }

@media screen and (max-width: 900px) {
   .blase {
       font-size: 9px;
       margin-top: -12px;
       margin-left: -12px;
       position: fixed;
   }
   .left-column {
       display: none;
   }
   .left-column1 {
    display: none;
}
.right-column {
    grid-area: 1 / 1 / 3 / 3;
}
.language-buttons {
visibility: hidden;
}
#spacer {
    height: 60px;
    position: fixed;
    z-index: 1;
}


header#menu {
    margin-top: 5px;
    left: 0;
    z-index: 1;
    border-bottom: hidden;
    position: fixed;
}

.slide {
    width: 95%;
}

.slider {
    height: 80vh;
    top: 60px;
}
.parent {
    height: 80vh;
}

.text_info {
    font-size: 12px;
    width: 80%;
 position: fixed;
  margin-left: 0;
  left: 10px;
}
.contact {
    left: 12px;
    top: 500px;
   width: 100%;
    display: block;
}
.burger-menu {
    display: none;
}
#maindiv {
font-size: 12px;
}

  }