/* =========================================================================
   Test « Êtes-vous prêt à vendre votre boîte ? »
   Parcours en six étapes puis page de résultat avec radar.
   Cohérent avec assets/css/diagnostic.css, dont il reprend les proportions.
   ========================================================================= */

/* --- Accueil ------------------------------------------------------------ */
.evp-reprise {
    margin-top: var(--space-sm);
    font-size: .9375rem;
    color: var(--color-text-muted);
}

.evp-limites p + p { margin-top: var(--space-sm); }

.evp-dimension-carte { position: relative; padding-top: var(--space-md); }

.evp-dimension-carte__num {
    position: absolute;
    top: var(--space-sm);
    right: var(--space-sm);
    display: grid;
    place-items: center;
    width: 2rem; height: 2rem;
    border-radius: 50%;
    background: var(--color-primary-soft);
    color: var(--color-primary-dark);
    font-weight: 800;
    font-size: .875rem;
}

.evp-dimension-carte__compte {
    margin-top: var(--space-sm);
    font-size: .8125rem;
    font-weight: 600;
    letter-spacing: .02em;
    text-transform: uppercase;
    color: var(--color-text-muted);
}

/* --- Parcours ----------------------------------------------------------- */
.evp-etape__inner { max-width: 46rem; }

.evp-progression { margin-bottom: var(--space-md); }

.evp-progression__texte {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem 1rem;
    align-items: baseline;
    margin-bottom: .5rem;
    font-size: .9375rem;
    color: var(--color-text-muted);
}
.evp-progression__dimension { font-weight: 600; color: var(--color-text); }

.evp-progression__barre {
    height: 8px;
    border-radius: var(--radius-pill);
    background: var(--color-border);
    overflow: hidden;
}
.evp-progression__barre span {
    display: block;
    height: 100%;
    border-radius: var(--radius-pill);
    background: var(--color-primary);
    transition: width .3s ease;
}

.evp-etape__titre { font-size: clamp(1.75rem, 1.3rem + 2vw, 2.5rem); }
.evp-etape__intro {
    margin-top: var(--space-xs);
    font-size: 1.0625rem;
    color: var(--color-text-muted);
}

/* --- Questions ---------------------------------------------------------- */
.evp-question {
    margin: var(--space-md) 0 0;
    padding: var(--space-md);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    background: var(--color-bg);
}
.evp-question.is-invalid { border-color: #b03030; background: #fdf6f6; }

.evp-question legend {
    display: flex;
    gap: .75rem;
    align-items: flex-start;
    padding: 0;
    font-size: 1.125rem;
    font-weight: 700;
    line-height: 1.35;
}

.evp-question__num {
    flex: none;
    display: grid;
    place-items: center;
    width: 1.75rem; height: 1.75rem;
    margin-top: .1rem;
    border-radius: 50%;
    background: var(--color-primary);
    color: #fff;
    font-size: .875rem;
    font-weight: 800;
}

.evp-choix { margin-top: var(--space-sm); }

/* Toute la ligne est cliquable : sur mobile, viser un rond de 16px est une
   contrainte inutile. */
.evp-choix__item {
    display: flex;
    gap: .75rem;
    align-items: flex-start;
    padding: .75rem .9375rem;
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    cursor: pointer;
    line-height: 1.5;
    transition: border-color .15s ease, background .15s ease;
}
.evp-choix__item + .evp-choix__item { margin-top: .5rem; }
.evp-choix__item:hover { border-color: var(--color-primary); background: var(--color-primary-soft); }

.evp-choix__item input { flex: none; margin-top: .3rem; accent-color: var(--color-primary); }

/* L'anneau de focus doit suivre l'étiquette entière, pas le seul rond. */
.evp-choix__item:focus-within {
    outline: 3px solid var(--color-primary);
    outline-offset: 2px;
}
.evp-choix__item:has(input:checked) {
    border-color: var(--color-primary);
    background: var(--color-primary-soft);
    font-weight: 600;
}

.evp-rappel { margin-top: var(--space-md); }

.evp-nav {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: var(--space-sm);
    margin-top: var(--space-md);
}

/* --- Résultat ----------------------------------------------------------- */
.evp-resultat__eyebrow {
    font-size: .8125rem;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--color-primary);
}

.evp-score {
    display: flex;
    align-items: baseline;
    justify-content: center;
    gap: .5rem;
    margin-top: var(--space-sm);
}
.evp-score__valeur {
    font-size: clamp(3rem, 2rem + 5vw, 5rem);
    font-weight: 800;
    line-height: 1;
    letter-spacing: -.03em;
    color: var(--color-primary);
}
.evp-score__sur { font-size: 1.125rem; color: var(--color-text-muted); }

.evp-resultat__grille {
    display: grid;
    grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
    gap: var(--space-lg);
    align-items: center;
}

.evp-radar-cadre { margin: 0; }
.evp-radar-cadre figcaption {
    margin-top: var(--space-sm);
    font-size: .875rem;
    color: var(--color-text-muted);
}

.evp-radar { width: 100%; height: auto; }
.evp-radar__grille { fill: none; stroke: var(--color-border); stroke-width: 1; }
.evp-radar__axe    { stroke: var(--color-border); stroke-width: 1; }
.evp-radar__label  { font-size: 12px; fill: var(--color-text-muted); }
.evp-radar__trace  {
    fill: rgba(20, 98, 240, .18);
    stroke: var(--color-primary);
    stroke-width: 2;
    stroke-linejoin: round;
}
.evp-radar__point  { fill: var(--color-primary); }

.evp-tableau-wrap { overflow-x: auto; }

.evp-tableau { width: 100%; border-collapse: collapse; }
.evp-tableau caption {
    margin-bottom: var(--space-sm);
    font-weight: 700;
    text-align: left;
}
.evp-tableau th, .evp-tableau td {
    padding: .75rem .5rem;
    border-bottom: 1px solid var(--color-border);
    text-align: left;
}
.evp-tableau thead th { font-size: .8125rem; text-transform: uppercase; letter-spacing: .04em; }
.evp-tableau tbody th { font-weight: 600; }
.evp-tableau td { font-variant-numeric: tabular-nums; font-weight: 700; white-space: nowrap; }
/* #8a5a00 sur #fdf8ec : 5,3:1, au-dessus du seuil AA. */
.evp-tableau .is-faible td { color: #8a5a00; }
.evp-tableau .is-faible { background: #fdf8ec; }

/* --- Détail par dimension ----------------------------------------------- */
.evp-details {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-md);
}

.evp-detail {
    padding: var(--space-md);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    background: var(--color-bg);
}
.evp-detail--alerte { border-color: #efe2c4; background: #fdf8ec; }

.evp-detail__head {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: var(--space-sm);
}
.evp-detail__head .card__title { margin-bottom: 0; }

.evp-detail__score {
    flex: none;
    font-size: 1.5rem;
    font-weight: 800;
    color: var(--color-primary);
    font-variant-numeric: tabular-nums;
}
.evp-detail__score span { font-size: .875rem; font-weight: 600; color: var(--color-text-muted); }

.evp-jauge {
    height: 6px;
    margin: var(--space-sm) 0;
    border-radius: var(--radius-pill);
    background: var(--color-border);
    overflow: hidden;
}
.evp-jauge span { display: block; height: 100%; background: var(--color-primary); }
.evp-detail--alerte .evp-jauge span { background: #c9a227; }

.evp-detail__lecture { color: var(--color-text-muted); }

.evp-alerte {
    display: flex;
    gap: var(--space-sm);
    align-items: flex-start;
    margin-top: var(--space-sm);
    padding-top: var(--space-sm);
    border-top: 1px solid #efe2c4;
}
.evp-alerte .icon-tile { flex: none; }
.evp-alerte p { font-size: .9375rem; line-height: 1.6; }

/* --- Sorties ------------------------------------------------------------ */
.evp-ctas {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: var(--space-sm);
    margin-top: var(--space-md);
}

.evp-lead {
    max-width: 46rem;
    margin-inline: auto;
    padding: var(--space-md);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    background: var(--color-bg-muted);
}
.evp-lead__intro { margin-bottom: var(--space-sm); }
.evp-lead__intro .icon-tile { margin-bottom: var(--space-sm); }
.evp-lead__intro p { color: var(--color-text-muted); }
.evp-lead .field--check span { font-size: .875rem; line-height: 1.55; }
.evp-lead input[type="text"],
.evp-lead input[type="email"] { background: var(--color-bg); }

/* --- Responsive --------------------------------------------------------- */
@media (max-width: 900px) {
    .evp-resultat__grille { grid-template-columns: 1fr; gap: var(--space-md); }
    .evp-details { grid-template-columns: 1fr; }
    .evp-nav { flex-direction: column-reverse; }
    .evp-nav .btn { justify-content: center; }
}

@media (max-width: 560px) {
    .evp-radar__label { font-size: 11px; }
    .evp-question { padding: var(--space-sm); }
}

@media (prefers-reduced-motion: reduce) {
    .evp-progression__barre span,
    .evp-choix__item { transition: none; }
}