

    body{
    display: flex;
    min-height: 100vh;
    width : 100%;
    margin :0;
    padding:0;
    font-family: 'poppins' , sans-serif;
    background-color: #f5f5f5;
   
    }
    
    section{
        flex-direction: column;
        width:80%;
        display:flex;
        justify-content:center;
        align-items :center;
        gap:20px ;
        
        background-image: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url('porsche.avif'); 
        background-size: cover; 
        background-repeat: no-repeat; 
        background-position: center; 
    }
    
    
    .graphs {
        display: flex;
        
        width: 95%;
        height: 70%; 
        border-radius:15px;
       justify-content: start;
        align-items : top;
        gap :20px;
        /*background-color: white;*/
        padding:0px 0px 20px 0px;
        position:relative;
        
    }
    
    .savoir{
        width: 30px;
        height : 30px;
        background-color: #b8bcbe;
        padding: 1em;
        border-radius:50%;
        display: flex;
        justify-content : center;
        align-items: center;
        cursor:pointer;
        border: 2px solid white ;
    }
    
    .savoir img{
     
        cursor:pointer;
    }
    
    .add {
    position: relative;
}

.cadre {
    padding: 10px;
    position: absolute;
    top: 50px; /* Ajustez selon votre mise en page */
    left: 0;
    width: 260px; /* Largeur de l'iframe */
    height: 360px; /* Hauteur de l'iframe */
    border: none;
    opacity: 0; /* Rend invisible par défaut */
    transform: scale(0.9); /* Réduction initiale pour l'effet zoom */
    pointer-events: none; /* Empêche les interactions lorsque caché */
    transition: all 0.5s ease-in-out; /* Transition fluide pour tous les changements */
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2); /* Ombre optionnelle */
    border-radius: 20px; /* Coins arrondis */
    background-color: white; /* Couleur de fond */
}

.savoir:hover + .cadre {
    opacity: 1; /* Rend visible lors du survol */
    transform: scale(1); /* Zoom progressif */
    pointer-events: auto; /* Active les interactions */
}
    
    

   
    
    .info{
        padding: 10px 10px  0px 10px ;
        
        width:95%;
        height:20%;
       
        display: flex;
        justify-content: start;
        align-items: end;
        gap:20px;
    }
    
    .align{
       
        position :absolute;
        left: 16px;
        top:60px;
        justify-content: center;
    
        padding:0;
       
        
    }
    
    .icon{
       
        background-color: rgba(255, 99, 132, 1);
        padding: 1.2em;
        border-radius:50%;
        position:absolute;
        top: 5%;
        right : 5%;
    }
    
    .icon img{
        width: 16px;
    }
    
    .icon1{
       
        background-color: rgba(54, 162, 235, 1);
        padding: 1.2em;
        border-radius:50%;
        position:absolute;
        top: 5%;
        right : 5%;
    }
    
    .icon1 img{
        width: 16px;
    }
    
     .icon2{
       
        background-color: rgba(255, 206, 86, 1);
        padding: 1.2em;
        border-radius:50%;
        position:absolute;
        top: 5%;
        right : 5%;
    }
    
    .icon2 img{
        width: 16px;
    }
    
     .icon3{
       
        background-color: rgba(75, 192, 192, 1);
        padding: 1.2em;
        border-radius:50%;
        position:absolute;
        top: 5%;
        right : 5%;
    }
    
    .icon3 img{
        width: 16px;
    }
    
    .bloc{
       
        border-radius: 25px;
        background-color: white;
        width: 22%;
        height: 100%;
        display: flex;
        
        justify-content: center;
        align-items: start;
        justify-content:space-around;
        position:relative;

        
    }
    
 
    
    .filtre{
    width: 20%;
    
    display: flex;
    flex-direction: column;
    
    align-items: center;
   
    
    
    background-color: white;
    }
    
    h1{
        
        border-radius: 10px;
        
        padding:10px 20px;
        color: #0D0F1B;
       
     
    }
    
    h3{
        color: #b8bcbe;
        font-weight: normal;
        margin-bottom: 50px;
        font-size:1em;
    }
    
    p{
        font-size:2em;
        font-weight: 600;
        color: #0D0F1B;
        padding:0;
        margin:0;
   
        
    }



    
    select {
    
    padding: 20px 30px;
    width: 90%;
    border: none;
    border-radius: 25px ;
    margin-bottom : 20px;
    color:rgba(3, 3, 3, 1);
    background-color: white;
    box-shadow: 0 0 8px rgba(3, 3, 3, 1);
            
            appearance: none; /* Pour supprimer le style natif du navigateur */
            -webkit-appearance: none; /* Safari */
            -moz-appearance: none; /* Firefox */
            transition: border-color 0.3s ease, box-shadow 0.3s ease;
        }
    
    
    select::hover{
        background-color:white;
    }
        /* Style au survol (focus) de l'élément select */
    select:focus {
            border-color: #5c9ded;
            box-shadow: 0 0 8px rgba(92, 157, 237, 0.5);
        }

    

        /* Design pour l'apparence de l'option sélectionnée */
    option {
            padding: 10px;
        }

        /* Style pour l'icône de dropdown (flèche) */
        select::-ms-expand {
            display: none; /* Cache la flèche native sur Internet Explorer */
        }
    label , h2{
        color: #0D0F1B;
    }
    
    input{
        background-color:rgba(255, 99, 132, 0.5);
    
    }
    
    .range {
        display: flex;
        
    }
    
    .align-range{
        display:flex;
        flex-direction: column;
        justify-content:center;
        align-items:center;
        padding:10px;
        border-radius : 10px;
        box-shadow: 0 0 8px rgba(255, 99, 132, 1);
        margin-top: 20px;
    }
    
    .align-range1{
        display:flex;
        flex-direction: column;
        justify-content:center;
        align-items:center;
        padding:10px;
        border-radius : 10px;
        box-shadow: 0 0 8px rgba(54, 162, 235, 1);
        margin-top: 20px;
    }
    
    .align-range2{
        display:flex;
        flex-direction: column;
        justify-content:center;
        align-items:center;
        padding:10px;
        border-radius : 10px;
        box-shadow: 0 0 8px rgba(255, 206, 86, 1);
        margin-top: 20px;
    }
    
    .align-range3{
        display:flex;
        flex-direction: column;
        justify-content:center;
        align-items:center;
        padding:10px;
        border-radius : 10px;
        box-shadow: 0 0 8px rgba(75, 192, 192, 1);
        margin-top: 20px;
    }
    
    
    
    .all-range{
        display: flex;
        flex-direction: column;
        width: 80%;
      
        margin: 25px;
    }
    
    .all-range2{
       
        display: flex;
        flex-direction: column;
        
        width: 80%;
       
        margin: 25px;
    }
    
   
    
  
    
    
    button{
        padding:20px;
        border-radius: 15px;
        background-color: rgba(153, 102, 255, 1) ;
        border:none;
        color: white;
        cursor: pointer;
    }
    
    
    
    .infographie{
        /*transition: opacity 0.5s ease-in-out;*/
        border-radius: 20px ; 
        width:95% ; 
        height :auto ; 
        border-radius: 25px;
        z-index: 5 ;
        position:absolute;
        top: 50%;
        left: 50%;  
        transform: translate( -50% , -50%);
        }
    
    .switch{
        display:none;
    }
    
    .label{
        margin-top: 20px;
        display:inline-block;
        height: 40px;
        width: 80px;
        background-color : #b8bcbe;
        position: relative;
        border-radius: 20px;
        transition : all , 0.5s;
        cursor: pointer;
    }
    
    .label:after{
        content: "";
        height: 30px;
        width: 30px;
        background-color : white;
        position: absolute;
        top: 5px;
        left: 10px;
        border-radius: 50%;
        transition : all , 0.5s;
    }
    
    .switch:checked + label:after{
        transform : translatex(32px) ;
        
    }
    
    .switch:checked + label{
        background-color: violet;
    }
    
   
   

.dispo{
    display: none;
}

@media (max-width:500px){
    
    .corps {
        display: none;  
    }
    
    .dispo{
        display: block;
        display: flex;
        justify-content: center;
        align-items: center;
        font-size: larger;
        font-weight: 600;  
        text-align: center;
        color: red;
    }
    

}