:root {
      --color1: #000000;
      --color2: #A854B1;
      --color3: #A575D2;
      --color4: #7C188D;
      --color5: #5F2992;
      --color6: #D9D9D9;
      --color7: white;
      --color8: #1E072D;
  }
  
  .bold{
    font-weight: bold;
}

.invisible{
    display: none;
}

  /* ------ titre ------- */
  .revenusFrance h2{
      font-size: 5rem;
      font-family: "mister-grape";
      font-weight: lighter;
      color: var(--color7);
      margin-top: 0.5vh;
      margin-bottom: 2vh;
  }
  .revenus p{
    margin-left: 10vh;
  }
  
  
  .revenusFrance .description{
      color: #fff;
      margin-left: 20vh;

  }
  
  
  .revenusFrance .date{
      font-size: 1.5rem;
      color: white;
      margin-top: 20px;
      font-weight: bold;
      padding: 2.5vh;
      border-radius: 3vh;
      width: fit-content;
  }
  
  
  
  
  /* ----- camembert ----- */
  .revenusFrance  .slider-container{
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 20px;
    margin-bottom: 3vh;
}

.revenusFrance .cliker{
    display: flex;
    justify-content: center;
    align-items: center;
}

  /* ----- flèches -----  */
  .revenusFrance button{
      width: 8vh;
      background-color: #1E072D;
      border-radius: 20vh;
      border: #b16cdf;
      margin: 0 10vh 0 10vh;
  
  }
  
  .revenusFrance img{
    width: 2vw;
  }

  .revenusFrance button:hover{
    transform: scale(120%);

  }  
  
.diagramme{  
    display: flex;
    justify-content: center;
    align-items: center;
    margin-bottom: 5%;
}

.source{
    color:var(--color6);
    margin-bottom: 12vh;
    display: flex;
    justify-content: center;
    align-items: center;
}

.source1{

    color:var(--color6);
    position: relative;
    bottom: 140px;
   margin-left: 90px;

   
}


  
  
  
  /* ------- légendes ------- */
  .revenusFrance .legend{
      margin-left: 50px;
  }
  
  .revenusFrance .col2 {
      grid-column: 2 / 2;
      grid-row:  1;
      color: #fff;
      grid-area: b;
      align-self: center;
  }
  
  
  .revenusFrance .l1{
      background-color: var(--color5);
      padding-top: 4px;
      padding-bottom: 4px;
      padding-left: 10px;
      padding-right: 10px;
      border-radius:100px 100px 100px 100px;
  }
  .revenusFrance .l2{
      background-color: var(--color6);
      padding-top: 4px;
      padding-bottom: 4px;
      padding-left: 10px;
      padding-right: 10px;
      border-radius:100px 100px 100px 100px;
      color: black;
  }
  .revenusFrance .l3{
      background-color: var(--color4);
      padding-top: 4px;
      padding-bottom: 4px;
      padding-left: 10px;
      padding-right: 10px;
      border-radius:100px 100px 100px 100px;
  }
  .revenusFrance .l4{
      background-color: var(--color3);
      padding-top: 4px;
      padding-bottom: 4px;
      padding-left: 10px;
      padding-right: 10px;
      border-radius:100px 100px 100px 100px;
      color: black;
  
  }
  .revenusFrance .l5{
      background-color: var(--color2);
      padding-top: 4px;
      padding-bottom: 4px;
      padding-left: 10px;
      padding-right: 10px;
      border-radius:100px 100px 100px 100px;
  }
  
  
  
  /* ----- tableau -----  */
  .revenusFrance .tableau{
      color: #fff;
      display: flex;
      width: 800px;
      margin: auto;
  }
  
  .revenusFrance td{
      text-align: center;
      padding: 4px;
      margin: 4px;
  }
  .revenusFrance tr{
      text-align: center;
      padding: 1000px;
  }
  
  
  .revenusFrance table{
      width: 100%; 
      margin-top: 20px;
      border-radius: 20px;
      box-shadow: 0 0 10px rgba(255, 255, 255, 0.1);
  }
  
  .revenusFrance .entete{
      color: #fff;
      box-shadow: 0 0 10px rgba(255, 255, 255, 0.1);
      font-weight: bold;
  }
  
  .revenusFrance .donnes td{
      border: 1px solid #fff;
      
  }
  
  .revenusFrance td p {
      margin: 0;
  }
  .revenusFrance table {
      width: 1050px;
  }
  
  /* graphique mondial  */
  #chart-container {
    position: relative; /* Utilisez 'fixed' si vous voulez que le graphique reste visible même en défilant. */
    z-index: 9999; /* Place l'élément au-dessus des autres éléments de la page. */
    pointer-events: none; /* Optionnel : empêche les interactions si nécessaire. */
}

#chart svg {
    pointer-events: auto; /* Réactive les interactions pour les éléments à l'intérieur du graphique. */
}