:root{
    --un:  #CC5500;
    --deux: #FF8800;
    --trois:  #993300;
    font-size: 16px;
  }
  
  h1{
    font-size:4rem;
    text-shadow:#ff006e 2.5px 2.5px 0,
var(--trois) 5px 5px 0,
var(--un) 7.5px 7.5px 0,
var(--deux) 10px 10px 10px;
  color:#ffcc00;
  }
  
  h2{
    font-size:3rem;
     text-shadow:#ff006e 2.5px 2.5px 0,
var(--trois) 5px 5px 0;
  color:#ffcc00;
    margin-top:1.5rem;
  }


h3:first-letter{
      text-transform: uppercase;
  text-shadow:#ff006e 2.5px 2.5px 0,;
}
  
  body{
    padding: 0rem 2rem;
    display: flex;
    flex-direction:column;
overflow-x: hidden;
  }
  
  .rapport{
      display: grid;
      grid-template-columns: 
      repeat(auto-fit, minmax(250px, 1fr));
    background-color: var(--deux);
    border-radius:1rem;
    border:0.5rem solid var(--trois);
    box-shadow: inset 0rem 0rem 6rem 1rem var(--trois);
    gap:1.5rem;
    padding: 1.5rem;
    align-items: start;
     grid-auto-flow:dense;
    
    }
    
  .graph{
    display: flex;
    flex-direction: column;
    background-color: var(--un);
    border-radius:1rem;
    border:0.3rem solid var(--deux);
    box-shadow:  inset 0rem 0rem 5rem 0.3rem var(--deux),0rem 0rem 2rem 0.5rem var(--trois);  
    color: white;
text-shadow:var(--trois) -2px -2px 0;
    padding:0.5rem;
  }

.graph:hover{
  background-color: var(--deux); 
  box-shadow:  inset 0rem 0rem 5rem 0.3rem var(--trois),0rem 0rem 2rem 0.5rem var(--un);
}

.graph .pie:hover tbody{
 box-shadow:  0rem 0rem 1rem 1rem var(--deux);
}
.graph tr{
  color: white;
}

.graph:has(.area) th{
visibility: hidden;
 white-space : nowrap;
}

.graph:has(.area) tr:hover th{
visibility:visible;
}

.area  td:hover {
  z-index: 9999 !important;
}
  
.graph caption{
  color: white;
}
  .graph:has(.area),.graph:has(.column){
     grid-column-end: span 2;
  }

.charts-css.legend {
  border:none;
}

.charts-css li:before{
  border-color:white !important;
}