* {
    box-sizing: border-box;
}


body {

    margin:0;
    padding:0;
    background:#ffffff;
    color:#111;
    font-family:Arial, Helvetica, sans-serif;

}



.audit-container {

    width:100%;
    max-width:850px;
    margin:auto;
    min-height:80vh;
    padding:40px 25px;

}



.step {

    display:none;
    animation:fade .3s ease;

}



.step.active {

    display:block;

}



@keyframes fade {

    from {

        opacity:0;
        transform:translateY(10px);

    }

    to {

        opacity:1;
        transform:translateY(0);

    }

}




h1 {

    font-size:38px;
    font-weight:700;
    margin-bottom:15px;
    letter-spacing:-1px;

}



h2 {

    font-size:24px;
    margin:35px 0 20px;

}



.intro {

    font-size:18px;
    line-height:1.5;
    max-width:650px;
    margin-bottom:40px;

}





/* ==========================
PROFILS
========================== */


.profiles {

    display:grid;
    grid-template-columns:repeat(2,1fr);
    gap:20px;

}



.profile-choice {

    background:#fff;
    border:2px solid #111;
    padding:25px;
    border-radius:12px;
    font-size:18px;
    cursor:pointer;
    transition:.25s;

}



.profile-choice:hover {

    background:#111;
    color:white;

}







/* ==========================
QUESTIONS
========================== */


.progress {

    font-size:14px;
    margin-bottom:30px;
    color:#555;

}



.question-card {

    border:1px solid #ddd;
    border-radius:16px;
    padding:35px;

}






.family {

    display:inline-block;
    font-size:20px;
    text-transform:uppercase;
    font-weight:800;
    letter-spacing:1.5px;
    margin-bottom:12px;
    padding:8px 14px;
    background:#000;
    color:#fff;
    border-radius:50px;

}




.products {

    font-size:16px;
    font-weight:500;
    color:#666;
    margin:10px 0 30px;

}





#question-title {

    margin-top:15px;
    font-size:32px;
    line-height:1.25;
    font-weight:700;
    letter-spacing:-0.5px;

}






#answers-container {

    display:flex;
    flex-direction:column;
    gap:12px;
    margin-top:30px;

}





.answer {

    text-align:left;
    padding:18px 20px;
    background:white;
    border:1px solid #ccc;
    border-radius:10px;
    cursor:pointer;
    font-size:16px;
    transition:.2s;

}



.answer:hover {

    border-color:#000;

}



.answer.selected {

    background:#000;
    color:white;
    border-color:#000;

}








/* ==========================
BOUTONS
========================== */


.navigation-buttons {

    display:flex;
    justify-content:space-between;
    align-items:center;
    gap:15px;
    margin-top:30px;

}




.primary-button {

    background:#000;
    color:white;
    border:none;
    border-radius:50px;
    padding:16px 35px;
    font-size:16px;
    cursor:pointer;
    transition:.2s;

}



.primary-button:hover {

    opacity:.8;

}




/* FLECHE RETOUR */


.back-button {

    background:#fff;

    color:#000;

    border:2px solid #000;

    border-radius:50px;

    padding:16px 35px;

    font-size:16px;

    cursor:pointer;

    transition:.2s;

}


.back-button:hover {

    background:#000;

    color:#fff;

}







/* ==========================
RESULTATS
========================== */


.score-box {

    text-align:center;
    margin:30px 0;

}



.score {

    font-size:60px;
    font-weight:800;

}





.priority-card {

    border-left:5px solid #000;
    background:#f5f5f5;
    padding:20px;
    margin-bottom:15px;
    border-radius:8px;

}



.priority-card h3 {

    margin-top:0;

}








/* ==========================
FORMULAIRE
========================== */


.contact-form {

    display:flex;
    flex-direction:column;
    gap:15px;

}



.contact-form input {

    padding:16px;
    border-radius:8px;
    border:1px solid #ccc;
    font-size:16px;

}






#success-message {

    margin-top:30px;
    padding:25px;
    background:#f5f5f5;
    border-radius:10px;

}








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


@media(max-width:700px){


    .audit-container {

        padding:25px 15px;

    }



    h1 {

        font-size:30px;

    }



    .profiles {

        grid-template-columns:1fr;

    }



    .question-card {

        padding:20px;

    }



    .family {

        font-size:16px;

    }



    #question-title {

        font-size:24px;

    }



    .navigation-buttons {

        flex-direction:row;

    }



}