/* Wrapper général */
.atlox-quiz-cv-wrapper {
    max-width: 780px;
    margin: 40px auto;
    padding: 0;                 /* suppression du “cadre” global */
    background: transparent;    /* on laisse le résultat devenir le bloc principal */
    box-shadow: none;           /* plus de cadre/ombre globale */
    border-radius: 0;
    box-sizing: border-box;
    font-family: "Montserrat", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    color: #222222;
    border: none;               /* suppression du cadre orange */
}

/* Formulaire */
.atlox-quiz-cv-form {
    margin: 0;
}

/* Question */
.atlox-quiz-question {
    margin-bottom: 40px;
}

.atlox-quiz-question-title {
    font-size: 1.1rem;
    font-weight: 700;
    color: #f59c00;
    margin-bottom: 18px;
}

/* Réponses : gros boutons rectangulaires cliquables */
.atlox-quiz-answers {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.atlox-quiz-answer {
    display: flex;
    align-items: center;
    padding: 14px 16px;
    border-radius: 10px;
    background: #f5f7fb;
    border: 2px solid transparent;
    cursor: pointer;
    transition: background 0.2s ease, border-color 0.2s ease, transform 0.1s ease;
    font-size: 0.98rem;
}

.atlox-quiz-answer input[type="radio"] {
    display: none;
}

/* Texte de la réponse + carré blanc au début */
.atlox-quiz-answer span {
    display: inline-block;
    position: relative;
    padding-left: 34px;
}

/* Carré blanc */
.atlox-quiz-answer span::before {
    content: "";
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 18px;
    height: 18px;
    border-radius: 4px;
    background: #ffffff;
    border: 2px solid #b7cde5;
    box-sizing: border-box;
}

/* Hover sur les réponses */
.atlox-quiz-answer:hover {
    background: #e8f0ff;
    border-color: #b7cde5;
    transform: translateY(-1px);
}

/* Réponse sélectionnée */
.atlox-quiz-answer input[type="radio"]:checked ~ span {
    font-weight: 600;
    color: #0e4194;
}

/* Bordure du carré quand sélectionné */
.atlox-quiz-answer input[type="radio"]:checked ~ span::before {
    border-color: #f59c00;
}

/* V orange */
.atlox-quiz-answer input[type="radio"]:checked ~ span::after {
    content: "✓";
    position: absolute;
    left: 3px;
    top: 50%;
    transform: translateY(-55%);
    font-size: 14px;
    font-weight: 700;
    color: #f59c00;
}

/* Barre de progression */
.atlox-quiz-progress {
    width: 100%;
    height: 14px;
    border-radius: 999px;
    background: #ffffff;
    overflow: hidden;
    margin-bottom: 25px;
    box-sizing: border-box;
    padding: 2px;
    border: 2px solid #0e4194;
}

/* Barre interne (segments) */
.atlox-quiz-progress-bar {
    height: 100%;
    width: 0;
    border-radius: 999px;
    background-image: repeating-linear-gradient(
        to right,
        #0e4194,
        #0e4194 calc((100% / 13) - 3px),
        #b7cde5 calc((100% / 13) - 3px),
        #b7cde5 calc(100% / 13)
    );
    transition: width 0.25s ease;
}

/* Navigation (Précédent / Suivant) */
.atlox-quiz-nav {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin: 10px 0 25px;
    gap: 10px;
}

.atlox-quiz-prev,
.atlox-quiz-next {
    flex: 1;
    border: none;
    border-radius: 999px;
    padding: 10px 18px;
    font-size: 0.95rem;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.2s ease, transform 0.1s ease, box-shadow 0.2s ease;
    font-family: inherit;
}

.atlox-quiz-prev {
    background: #ffffff;
    color: #0e4194;
    border: 2px solid #b7cde5;
}

.atlox-quiz-next {
    background: #0e4194;
    color: #ffffff;
    box-shadow: 0 6px 16px rgba(14, 65, 148, 0.35);
}

/* Hover / active nav */
.atlox-quiz-prev:hover {
    background: #f5f7fb;
}

.atlox-quiz-next:hover {
    background: #133064;
    transform: translateY(-1px);
}

.atlox-quiz-prev:active,
.atlox-quiz-next:active {
    transform: translateY(0);
    box-shadow: none;
}

/* Bouton de soumission */
.atlox-quiz-submit {
    text-align: center;
    margin-top: 20px;
}

.atlox-quiz-submit button[type="submit"] {
    border: none;
    border-radius: 999px;
    padding: 12px 28px;
    font-size: 1rem;
    font-weight: 700;
    cursor: pointer;
    background: #f59c00;
    color: #ffffff;
    box-shadow: 0 8px 22px rgba(245, 156, 0, 0.45);
    transition: background 0.2s ease, transform 0.1s ease, box-shadow 0.2s ease;
    font-family: inherit;
}

.atlox-quiz-submit button[type="submit"]:hover {
    background: #d98500;
    transform: translateY(-1px);
}

.atlox-quiz-submit button[type="submit"]:active {
    transform: translateY(0);
    box-shadow: none;
}

/* Résultats : le bloc résultat reprend la “présence” de l’ancien cadre orange */
.atlox-quiz-result {
    max-width: 780px;
    margin: 40px auto 0;
    padding: 30px 25px;
    border-radius: 14px;
    font-size: 1.05rem; /* texte un peu plus grand */
    line-height: 1.7;
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.08);
    box-sizing: border-box;
}

/* Score : plus grand et centré (tous niveaux) */
.atlox-quiz-score {
    font-weight: 800;
    margin: 0 0 14px;
    text-align: center;
    font-size: 1.35rem;
}

/* Titre/slogan : plus grand et centré (tous niveaux) */
.atlox-quiz-result h3 {
    margin: 0 0 18px;
    text-align: center;
    font-size: 1.45rem;
    font-weight: 800;
}

/* Corps du texte : noir et un peu plus grand (sans toucher au score) */
.atlox-quiz-result p:not(.atlox-quiz-score) {
    color: #000000;
    font-size: 1.05rem;
}

/* Couleurs des différents niveaux (fonds inchangés) */
.atlox-quiz-result-low {
    background: #ffe5e5;
    border: 2px solid #cd1619; /* rouge demandé UNIQUEMENT ici */
    color: #5c0000;
}

.atlox-quiz-result-midlow {
    background: #fff2df;
    border: 1px solid #f59c00;
    color: #6a3d00;
}

.atlox-quiz-result-good {
    background: #fff9d6;
    border: 1px solid #ffd447;
    color: #5c4a00;
}

.atlox-quiz-result-excellent {
    background: #e3f5e9;
    border: 1px solid #2e7d32;
    color: #124a18;
}

/* Score + slogan en rouge UNIQUEMENT pour le niveau bloquant */
.atlox-quiz-result-low .atlox-quiz-score,
.atlox-quiz-result-low h3 {
    color: #cd1619;
}

/* CTA : style bouton (comme l'image) */
.atlox-quiz-cta {
    display: block;
    width: 100%;
    text-align: center;
    margin-top: 22px;
    padding: 16px 18px;
    background: #f59c00;
    color: #ffffff;
    font-weight: 800;
    font-size: 1.1rem;
    border-radius: 14px;
    border: 2px solid #000000;
    text-decoration: none;
    box-sizing: border-box;
}

.atlox-quiz-cta:hover {
    background: #d98500;
}

.atlox-quiz-cta:active {
    transform: translateY(1px);
}

/* Responsive */
@media (max-width: 640px) {
    .atlox-quiz-cv-wrapper {
        margin: 20px auto;
    }

    .atlox-quiz-result {
        padding: 20px 15px;
        margin: 20px auto 0;
    }

    .atlox-quiz-nav {
        flex-direction: column;
        align-items: stretch;
    }

    .atlox-quiz-prev,
    .atlox-quiz-next {
        width: 100%;
    }

    .atlox-quiz-question-title {
        font-size: 1rem;
    }

    .atlox-quiz-score {
        font-size: 1.2rem;
    }

    .atlox-quiz-result h3 {
        font-size: 1.25rem;
    }

    .atlox-quiz-cta {
        font-size: 1.05rem;
        padding: 14px 16px;
    }
}