:root {

    --couleur-principale:#2e7d32;

    --couleur-texte:#263238;

    --couleur-bordure:#d8dee4;

    --rayon:12px;

}



html,
body {


    margin:0;

    padding:0;


    min-height:100%;


    font-family:

    "Segoe UI",
    Arial,
    sans-serif;


    background:#f4f6f8;


    color:

    var(--couleur-texte);

}


/* =====================================================
   POPUP INFORMATIONS
   Fenêtre flottante ouverte par bouton INFO
===================================================== */


.popup-info {


    width:90%;

    max-width:900px;


    margin:30px auto;


    background:white;


    border-radius:

    var(--rayon);


    box-shadow:

    0 8px 25px rgba(0,0,0,0.25);


    overflow:hidden;


}



/* =====================================================
   ENTETE POPUP
===================================================== */


.popup-entete {


    display:flex;


    justify-content:space-between;


    align-items:center;


    padding:15px 18px;


    background:

    linear-gradient(

        135deg,

        #1b5e20,

        #43a047

    );


    color:white;


    font-size:1.15rem;


    font-weight:bold;

}



.popup-entete button {


    border:none;


    background:rgba(255,255,255,0.15);


    color:white;


    width:32px;


    height:32px;


    border-radius:50%;


    cursor:pointer;


    font-size:18px;


}



.popup-entete button:hover {


    background:rgba(255,255,255,0.3);

}






/* =====================================================
   CORPS INFORMATIONS
===================================================== */


.popup-corps {


    padding:25px;


    line-height:1.6;


    font-size:.95rem;


}


.popup-corps h3 {


    margin:

    12px 0;


    color:

    var(--couleur-principale);


    font-size:1.1rem;


}




.popup-corps p {


    margin:

    10px 0;

}




.popup-corps ul {


    padding-left:25px;


}



.popup-corps li {


    margin-bottom:8px;

}



.popup-corps hr {


    border:none;


    border-top:

    1px solid

    var(--couleur-bordure);


    margin:

    18px 0;

}






/* =====================================================
   MISE EN VALEUR FORMULES
===================================================== */


.popup-corps b {


    color:

    var(--couleur-texte);


}





/* =====================================================
   SCROLLBAR POPUP
===================================================== */


.popup-corps::-webkit-scrollbar {


    width:8px;

}



.popup-corps::-webkit-scrollbar-track {


    background:#eeeeee;

}



.popup-corps::-webkit-scrollbar-thumb {


    background:#81c784;


    border-radius:10px;

}






/* =====================================================
   VERSION MOBILE
===================================================== */


@media(max-width:600px){


    .popup-info {


        top:80px;


        right:5%;


        width:90%;


        max-height:80vh;

    }


}