@font-face {
  font-family: 'ReadyActiveTest-Light';
  src: url('../fonts/ReadyActiveTest-Light.woff2') format('woff2');
}

@font-face {
  font-family: 'ReadyBygoneTest-Light';
  src: url('../fonts/ReadyBygoneTest-Light.woff2') format('woff2');
}

@font-face {
  font-family: 'JrugPung-Regular';
  src: url('../fonts/JrugPung-Regular.woff2') format('woff2');
}

@font-face {
  font-family: 'SyneMono-Regular';
  src: url('../fonts/SyneMono-Regular.woff2') format('woff2');
}

@font-face {
  font-family: 'SyneTactile-Regular';
  src: url('../fonts/SyneTactile-Regular.woff2') format('woff2');
}

@font-face {
  font-family: 'VampiroOne-Regular';
  src: url('../fonts/VampiroOne-Regular.woff2') format('woff2');
}

body{
    font-family: 'aktiv-grotesk';
    background-color: white;
    overflow: hidden;
}

*::selection{
    background-color: pink;
    color: green;
}

*::-moz-selection{
    background-color: black;
    color: white;
}

.centre::-webkit-scrollbar {
    display: none; /* Cacher la barre de défilement */
}

.centre {
    scrollbar-width: none; /* Cacher la barre de défilement */
}

h1{
    font-size: 6em;
    font-family: 'ReadyBygoneTest-Light';
    font-style: normal;
    padding-bottom: 5px;
    color: lime;
}

h2{
    margin-top: -10px;
    font-family: aktiv-grotesk;
    color: black;
}

h4{
    font-size: 1em;
    margin-left: 120px;
    color: silver;
    font-family: 'aktiv-grotesk';
}

article{
    gap: 20px;
    width: 50%;
    margin: auto;
    margin-top: 20px;
    display: flex;
}

article.centre{
    gap: 20px;
    width: 98vw;
    margin: auto;
    height: 100vh;
    margin-top: 20px;
    display: flex;
    overflow: scroll;
}

article.centre2{
    gap: 20px;
    width: 98vw;
    margin: auto;
    height: 100vh;
    margin-top: 20px;
    display: flex;
}

div.gauche{
    width: 75%;
    padding: 10px;
    padding-top: 0px;
    height: 95%;
    overflow: scroll;
    margin-bottom: 20px;
    text-align: justify;
    
}

div.gauche-medium{
    width: 50%;
    padding: 10px;
    padding-top: 0px;
    height: 95%;
    overflow: scroll;
    margin-bottom: 20px;
    text-align: justify;
    
}

div.gauche2{
    width: 48%;
    padding: 10px;
    padding-top: 0px;
    height: auto;
    overflow: scroll;
    margin-bottom: 20px;
    font-family:'SyneTactile-Regular';
}

span#rose{
    font-size: 6em;
    color: pink;
}

span#vert{
    font-size: 6em;
    color: green;
}

.droite, .introduction {
    width: 25%;
    position: sticky;
    top: 0; /* ou la valeur appropriée selon votre mise en page */
}

.introduction-large{
    width: 25%;
    position: sticky;
    overflow: scroll;
    top: 0; /* ou la valeur appropriée selon votre mise en page */
}

div#about{
    font-family: 'SyneTactile-Regular';
    font-size: 1.5em;
    color: green;
}

a{
    color: silver;
    text-decoration: none;
    font-style: italic;
}

a:hover{
    text-decoration: underline;
    color: green;
}

a#pink-button{
    color: green;
    text-decoration: none;
    font-style: normal;
    opacity: 100%;
}

a#pink-button:hover{
    color: pink;
    text-decoration: underline;
}

a.carte,.carte-flou{
    width: 25%;
    height: 440px;
    top: 0; /* ou la valeur appropriée selon votre mise en page */
    transition: transform 0.3s ease, box-shadow 0.3s ease; /* Ajout de la transition pour l'ombre portée */
    z-index: 1; /* Assure que la carte est au-dessus de l'élément flou */
    font-style: normal;
}

a.carte:hover{
    transform: scale(1.02);
    box-shadow: 0 4px 8px rgba(0, 128, 0, 0.2); /* Ombre portée verte augmentée au survol */
    text-decoration: none;
}

a.carte-flou:hover{
    text-decoration: none;
}

div.carte{
    width: 100%;
}

div.carte-flou{
    filter: blur(8px);
    width: 100%;
}

p.a-venir{
    font-family: 'SyneTactile-Regular';
    color: white;
    font-size: 2em;
    margin-top: 7.5%;
    margin-left: 6%;
    z-index: 1000;
    position: absolute;
}

p{
    font-weight: normal;
    margin-top: 10px;
    font-size: 0.8em;
    color: black;
    opacity: 50%;
}

p.infos{
    margin-top: 3px;
    padding-left: 10px;
}

.texte-intro {
    font-size: 0.9em;
    margin-top: 0px;
}

span#SyneMono-Regular{
    font-family:'SyneMono-Regular';
}

span#SyneTactile-Regular{
    font-family:'SyneTactile-Regular';
}

span.BB {
    line-height: 1.1em;
    display: unset;
    font-size: 1em;
    opacity: 100%;
    color: pink;
    filter: saturate(200%);
}

span.QD {
    line-height: 1em;
    display: unset;
    font-size: 1.1em;
    opacity: 100%;
    color: green;
}

img {
  max-width: 100%; /* L'image ne peut pas dépasser la largeur de la figure */
  width: 100%; /* L'image prendra la largeur de son conteneur, la figure */
}


img.soon{
    position: relative;
}

/* Cacher la deuxième vignette par défaut */
.vignette {
    position: absolute;
    bottom: 0;
    right: 0;
    width: 80px;
    padding-bottom: 25px;
}

/* Cacher la deuxième vignette par défaut */
.vignette2 {
    position: absolute;
    bottom: 0;
    right: 0;
    width: 80px;
    padding-bottom: 25px;
    display: none;
}

/* Afficher la deuxième vignette lorsqu'on survole la vignette */
.vignette-link:hover .vignette2 {
    display: block;
}

/* Masquer la première vignette lorsqu'on survole la vignette */
.vignette-link:hover .vignette {
    display: none;
}

.residu{
    color: transparent;
    opacity: 60%;
    font-family: 'aktiv-grotesk';
}

.repete{
    color: transparent;
    opacity: 40%;
    font-family: 'aktiv-grotesk';
}


.timecode{
    color: transparent;
    background-color: white;
    font-family: 'aktiv-grotesk';
    display: inline-block;
    margin-top: 0px;
    font-size: 1em;
}

.contrainte{
    font-family: 'SyneMono-Regular';
    color: transparent;
    filter: contrast(90%);
}

.typographie{
    font-family: 'aktiv-grotesk';
    color: transparent;
    filter: contrast(90%);
}

.lieu{
    font-family: 'aktiv-grotesk';
    color: transparent;
    filter: contrast(90%);
}

hr{
    width: 50%;
    border: 0.5px solid lime;
    margin-top: 4vh;
}

div#titre{
    padding-top: 15vh;
    padding-bottom: 2vh;
    width: 50%;
    margin: auto;
    color: black;
}

div{
    width: 50%;
}

button#impression{
    margin-top: 20px;
}

.search-container {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 20px;
}

#searchInput:focus {
  outline: none;
}

#searchButton {
  padding: 10px 20px;
  color: white;
  border: none;
  border-radius: 5px;
  font-size: 16px;
  cursor: pointer;
}

#content {
  margin-top: 20px;
}

#result {
    color: black;
    opacity: 50%;
    margin-top: 10px;
    font-size: 0.8em;
}

div#recherche{
    width: 90%;
}

canvas#myChart, #myChart2{
    width: 100%;
    margin-bottom: 30px;
}

canvas#myChartThemes{
    width: 25%;
}

#wordChartContainer {
    margin-top: 30px;
    width: 98%; /* Pour que la taille soit ajustée au contenu */
    margin: auto;
}

#wordChart {
    margin-bottom: 30px;
    width: 100%; /* Pour que le graphique occupe toute la largeur de son conteneur */
    height: auto; /* Pour que la hauteur soit ajustée automatiquement en fonction de la largeur */
}

div#podium{
    width: 100%;
    margin-left: 10px;
    margin-top: -10px;
}

ul#podium{
    border: none;
}

ol.podimList{
    padding: 0px;
    line-height: 6px;
}

li#listemots{
    margin-left: 15px;
    font-size: 0.9em;
    line-height: 10px;
    list-style-type: none;
}

div#champlexical{
    display: none;
    width: 100%;
    margin-left: 10px;
    margin-top: -10px;
}

.highlight {
    color: green;
    background-color: pink; /* Couleur de texte par défaut */
}

.highlight.pink {
    color: green;
    background-color: pink;
}

.highlight.green {
    color: pink;
    background-color: green;
}

div.definition-container{
    display: none;
    height: fit-content;
    margin-top: 0px;
    width: 95%;
    transition: display 0.5 ease;
    overflow: scroll;
}

p.definition{
    margin-top: 0px;
    margin-left: 20px;
    padding: 5px;
    color: black;
}

figcaption{
    font-family: 'SyneTactile-Regular';
    color: pink;
    margin-top: 10px;
    font-size: 1.5em;
    padding-left: 10px;
}

figcaption.citation{
    font-family: 'aktiv-grotesk';
    color: green;
    padding-bottom: 10px;
}

figure:hover figcaption.citation{
    text-decoration: underline;
}

figure{
    transition: transform 0.3s ease;
}

figure:hover{
    transform: scale(1.02);
    box-shadow: 2px;
    cursor: pointer;
}

figure.droite{
    float: right;
}

figure.fixe{
    transform: none;
    text-decoration: none;
}

figure.fixe:hover figcaption{
    text-decoration: none;
}

audio {
  width: 100%;
  margin-top: 20px;
}

li{
    font-weight: normal;
    margin-top: 10px;
}

ul{
    border: 1px solid red;
    display: flex;
    width: 75%;
    margin: auto;
}

ul.button{
    border: none;
    display: block;
    width: 75%;
    margin: auto;
}

ul figcaption.nom{
    width: 25%;
}

.un{
    width: 10%;
}

.deux{
    width: 70%;
}

.trois{
    width: 10%;
}

.quatre{
    width: 10%;
}

div.filters{
    margin-top: -10px;
    display: block;
    width: 100%;
    padding-left: 10px;
}

/* CHECKBOX STYLE */

/* Masquer la case à cocher par défaut */
input[type="checkbox"] {
    display: none;
}

/* Styliser l'apparence de la case à cocher personnalisée */
input[type="checkbox"] + label {
    display: block;
    position: relative;
    padding-left: 25px; /* Réservez de l'espace pour l'apparence de la nouvelle case à cocher */
    cursor: pointer;
    padding: 3px;
}

/* Style du faux élément de la case à cocher */
input[type="checkbox"] + label::before {
    content: '';
    display: inline-block;
    width: 10px;
    height: 10px;
    position: relative;
    top: 0px;
    margin-right: 5px;
    border: 1px solid silver; /* Couleur de la bordure */
    background-color: #fff; /* Couleur de fond */
}

/* Style de la coche à l'intérieur de la case à cocher */
input[type="checkbox"]:checked + label::before {
    background-color: pink; /* Couleur de fond lorsque la case est cochée */
    border-color: silver; /* Couleur de la bordure lorsque la case est cochée */
}

label{
    font-family: 'aktiv-grotesk';
    color: silver;
    font-size: 0.9em;
    width: 90%;
    display: inline-block;
}

label:hover{
    cursor: pointer;
    color: pink;
}

label#BBCheckbox{
    font-family: 'aktiv-grotesk';
    color: pink;
    font-size: 0.9em;
    width: 90%;
    display: inline-block;
}

label#QDCheckbox{
    font-family: 'aktiv-grotesk';
    color: green;
    font-size: 0.9em;
    width: 90%;
    display: inline-block;
}

label#QDCheckbox:hover{
    color: grey;
}

label#BBCheckbox:hover{
    color: grey;
}

p#index{
    margin-top: 30px;
    padding-bottom: 10px;
}

div#alignitems{
    margin-left: 10px;
    width: 100%;
}

/* SOURCE */

/* Style de base pour l'élément audio */
audio {
    width: 100%;
    max-width: 300px; /* Définissez une largeur maximale pour éviter que l'audio ne soit trop large */
}

/* Style pour les contrôles audio */
audio::-webkit-media-controls-panel {
    background-color: pink;
    border-radius: 8px;
}

/* Style pour les boutons des contrôles audio */
audio::-webkit-media-controls-play-button,
audio::-webkit-media-controls-pause-button {
    color: #333; /* Couleur du bouton de lecture/pause */
}

/* Style pour le curseur de la barre de progression de l'audio */
audio::-webkit-media-controls-current-time-display,
audio::-webkit-media-controls-time-remaining-display {
    color: #333; /* Couleur du texte pour le temps écoulé/temps restant */
}

div.message{
    display: none;
}

@media print {
    /* Afficher les éléments masqués */
    .introduction {
        display: none; /* Utilisation de !important pour forcer l'affichage */
    }

    /* Réinitialiser les styles de débordement */
    article.centre,
    .gauche {
        overflow: visible !important; /* Utilisation de !important pour forcer la réinitialisation */
    }

    .droite{
        display: none;
    }
}

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

    div.message{
        display: block;
        width: 100%;
        text-align: center;
        margin: 45vh auto;
        text-transform: none;
        font-family: 'Arial';
    }

    article.centre2{
        display: none;
    }

}