/* ── Reset & base ──────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

body {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    background: #f5f0fb;
    min-height: 100vh;
    padding: 32px 16px 64px;
    color: #222;
}

/* ── Quiz container ─────────────────────────────────────────── */
.chakra-quiz {
    max-width: 680px;
    margin: 0 auto;
}

/* ── Progress bar ───────────────────────────────────────────── */
.progress-wrap {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 28px;
}
.progress-track {
    flex: 1;
    height: 6px;
    background: #e0d6f0;
    border-radius: 3px;
    overflow: hidden;
}
.progress-fill {
    height: 100%;
    border-radius: 3px;
    background: linear-gradient(90deg,#e74c3c,#e67e22,#f39c12,#27ae60,#2980b9,#6c3483,#9b59b6);
    transition: width .4s ease;
}
.progress-label {
    font-size: .8rem;
    color: #999;
    white-space: nowrap;
    min-width: 64px;
    text-align: right;
}

/* ── Navigation directe entre étapes (puces) ─────────────────── */
.step-nav {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    justify-content: center;
    margin-bottom: 16px;
}
.step-dot {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    border: 2px solid #e0d6f0;
    background: #fff;
    font-size: .95rem;
    line-height: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    padding: 0;
    transition: all .15s;
}
.step-dot.done {
    border-color: var(--c, #9b59b6);
    background: color-mix(in srgb, var(--c, #9b59b6) 14%, #fff);
}
.step-dot.active {
    border-color: var(--c, #9b59b6);
    background: var(--c, #9b59b6);
    transform: scale(1.15);
    box-shadow: 0 2px 8px rgba(0,0,0,.18);
}
.step-dot:disabled {
    opacity: .35;
    cursor: not-allowed;
    background: #f5f0fb;
}
.step-dot:not(:disabled):hover { transform: scale(1.1); }
.step-dot.active:not(:disabled):hover { transform: scale(1.15); }

/* ── Score prévisionnel en direct ────────────────────────────── */
.live-score-panel {
    background: #fff;
    border-radius: 12px;
    padding: 14px 16px;
    margin-bottom: 20px;
    box-shadow: 0 2px 14px rgba(0,0,0,.07);
    display: flex;
    flex-direction: column;
    gap: 10px;
}
/* `[hidden]` seul a la même spécificité que `.live-score-panel` et perdrait
   contre le `display:flex` ci-dessus — on force donc le masquage explicitement. */
.live-score-panel[hidden],
.live-score-group[hidden] { display: none; }
.live-score-group-title {
    font-size: .72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: #999;
    margin-bottom: 6px;
}
.live-score-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}
.live-score-chip {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 4px 8px;
    border-radius: 20px;
    font-size: .78rem;
    font-weight: 600;
    color: #333;
    background: color-mix(in srgb, var(--c, #9b59b6) 10%, #fff);
    border: 1.5px solid color-mix(in srgb, var(--c, #9b59b6) 30%, #fff);
    white-space: nowrap;
}
.live-score-chip .lsc-val { font-weight: 700; }
.live-score-chip.is-leader {
    border-color: #f0c419;
    background: color-mix(in srgb, #f0c419 16%, #fff);
}
.live-score-chip.is-low {
    border-color: color-mix(in srgb, var(--c, #9b59b6) 55%, #fff);
    border-style: dashed;
}
.live-score-chip.is-tie {
    border-color: #e67e22;
    background: color-mix(in srgb, #e67e22 14%, #fff);
    box-shadow: 0 0 0 1px #e67e22 inset;
}
.lsc-mark { font-size: .82rem; line-height: 1; }

/* ── Steps ──────────────────────────────────────────────────── */
.chakra-step { display: none; }
.chakra-step.active {
    display: block;
    animation: fadeUp .35s ease;
}
@keyframes fadeUp {
    from { opacity: 0; transform: translateY(14px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* ── Step header ────────────────────────────────────────────── */
.chakra-step-header {
    background: linear-gradient(135deg, var(--c, #9b59b6), color-mix(in srgb, var(--c, #9b59b6) 70%, #111));
    color: #fff;
    border-radius: 14px 14px 0 0;
    padding: 28px 24px 22px;
    text-align: center;
    margin-bottom: 0;
}
.step-icon { font-size: 2.4rem; display: block; margin-bottom: 8px; }
.chakra-step-header h1,
.chakra-step-header h2 { font-size: 1.35rem; font-weight: 700; color: #fff; }
.chakra-step-header p  { margin-top: 6px; opacity: .88; font-size: .93rem; line-height: 1.5; }

/* ── Card body (wraps fields / questions / nav) ─────────────── */
.chakra-step > *:not(.chakra-step-header):not(.chakra-nav) {
    background: #fff;
    padding: 0 24px;
}
.chakra-step > .chakra-nav {
    background: #fff;
    padding: 16px 24px 24px;
    border-radius: 0 0 14px 14px;
    box-shadow: 0 4px 24px rgba(0,0,0,.09);
}
.chakra-step-header + * { padding-top: 24px; }

/* ── Identity fields ────────────────────────────────────────── */
.chakra-fields {
    display: flex;
    flex-direction: column;
    gap: 16px;
    padding-bottom: 8px;
    background: #fff;
    padding-left: 24px;
    padding-right: 24px;
}

.chakra-field label {
    display: block;
    font-weight: 600;
    font-size: .9rem;
    margin-bottom: 5px;
    color: #444;
}

.chakra-field input {
    width: 100%;
    padding: 10px 14px;
    border: 2px solid #e0d6f0;
    border-radius: 8px;
    font-size: 1rem;
    transition: border-color .2s;
}
.chakra-field input:focus {
    outline: none;
    border-color: #9b59b6;
}
.req { color: #e74c3c; }

/* ── Scale hint ─────────────────────────────────────────────── */
.scale-hint {
    padding: 12px 24px 0;
    background: #fff;
    font-size: .88rem;
    color: #888;
    text-align: center;
}

/* ── Questions ──────────────────────────────────────────────── */
.chakra-questions {
    background: #fff;
    padding: 16px 24px;
    display: flex;
    flex-direction: column;
    gap: 18px;
}

.chakra-question {
    background: #faf7ff;
    border-radius: 10px;
    padding: 14px 18px;
}

.chakra-question p {
    font-size: .95rem;
    font-weight: 500;
    margin-bottom: 12px;
    line-height: 1.45;
    color: #333;
}

/* ── Rating ─────────────────────────────────────────────────── */
.rating {
    display: flex;
    gap: 5px;
}

.rating-opt { flex: 1; }
.rating-opt input { display: none; }

.rating-opt span {
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    min-height: 44px;
    padding: 7px 6px;
    border-radius: 8px;
    border: 2px solid #e0d6f0;
    font-size: .72rem;
    font-weight: 500;
    line-height: 1.3;
    color: #777;
    cursor: pointer;
    transition: all .18s;
    user-select: none;
    background: #fff;
}
.rating-opt:hover span {
    border-color: var(--c, #9b59b6);
    color: var(--c, #9b59b6);
    background: color-mix(in srgb, var(--c, #9b59b6) 6%, #fff);
}
.rating-opt input:checked + span {
    background: var(--c, #9b59b6);
    border-color: var(--c, #9b59b6);
    color: #fff;
    font-weight: 700;
}

/* ── Navigation ─────────────────────────────────────────────── */
.chakra-nav {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
}
.chakra-nav > span { flex: 1; }

.btn {
    padding: 11px 22px;
    border-radius: 8px;
    border: none;
    font-size: .95rem;
    font-weight: 600;
    cursor: pointer;
    text-decoration: none;
    display: inline-block;
    transition: all .18s;
}
.btn-next, .btn-submit {
    background: #9b59b6;
    color: #fff;
}
.btn-next:hover, .btn-submit:hover { background: #7d3c98; transform: translateY(-1px); }
.btn-prev { background: #ede8f5; color: #666; }
.btn-prev:hover { background: #ddd5ef; }

/* ── Notices ────────────────────────────────────────────────── */
.notice {
    padding: 13px 18px;
    border-radius: 8px;
    margin: 16px 0;
    font-size: .93rem;
}
.notice-error {
    background: #fef0ef;
    border-left: 4px solid #e74c3c;
    color: #c0392b;
}

/* ── Loading ────────────────────────────────────────────────── */
.loading {
    text-align: center;
    padding: 28px;
    color: #999;
    font-size: .95rem;
    background: #fff;
    border-radius: 14px;
    box-shadow: 0 4px 24px rgba(0,0,0,.09);
}
.spinner {
    display: inline-block;
    width: 18px; height: 18px;
    border: 3px solid #e0d6f0;
    border-top-color: #9b59b6;
    border-radius: 50%;
    animation: spin .65s linear infinite;
    vertical-align: middle;
    margin-right: 6px;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* ── Results ────────────────────────────────────────────────── */
#results-step .chakra-step-header { border-radius: 14px 14px 0 0; }

#results-body {
    background: #fff;
    border-radius: 0 0 14px 14px;
    padding: 24px;
    box-shadow: 0 4px 24px rgba(0,0,0,.09);
}

.result-intro {
    text-align: center;
    margin-bottom: 24px;
    color: #555;
    font-size: .95rem;
    line-height: 1.6;
}
.result-intro strong { display: block; font-size: 1.1rem; color: #222; margin-bottom: 4px; }

.result-cards {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
    margin-bottom: 28px;
}
.result-card {
    flex: 1 1 160px;
    border-radius: 12px;
    padding: 18px;
    text-align: center;
    color: #fff;
}
.result-card .card-tag {
    font-size: .75rem;
    text-transform: uppercase;
    letter-spacing: .08em;
    opacity: .85;
    margin-bottom: 6px;
}
.result-card .card-val { font-size: 1.25rem; font-weight: 700; }
.result-card .card-sub { font-size: .78rem; opacity: .8; margin-top: 4px; }

.score-bars { display: flex; flex-direction: column; gap: 10px; margin-bottom: 24px; }
.score-row  { display: flex; align-items: center; gap: 10px; }
.score-lbl  { width: 126px; font-size: .85rem; color: #555; flex-shrink: 0; }
.score-track {
    flex: 1; height: 13px; background: #ede8f5;
    border-radius: 7px; overflow: hidden;
}
.score-fill {
    height: 100%;
    border-radius: 7px;
    transition: width .8s cubic-bezier(.4,0,.2,1);
}
.score-num { width: 26px; text-align: right; font-weight: 700; font-size: .88rem; color: #444; }

/* ── Lien de sauvegarde du rapport ───────────────────────────── */
.save-link-box {
    background: #faf7ff;
    border: 2px dashed #d9c8ee;
    border-radius: 10px;
    padding: 14px 18px;
    margin-bottom: 18px;
    text-align: center;
}
.save-link-box p { font-size: .88rem; color: #555; margin-bottom: 10px; }
.save-link-row {
    display: flex;
    gap: 8px;
}
.save-link-input {
    flex: 1;
    min-width: 0;
    padding: 9px 12px;
    border: 2px solid #e0d6f0;
    border-radius: 8px;
    font-size: .85rem;
    color: #555;
    background: #fff;
}
.btn-copy-link {
    background: #9b59b6;
    color: #fff;
    border: none;
    padding: 9px 18px;
    border-radius: 8px;
    font-size: .85rem;
    font-weight: 600;
    cursor: pointer;
    white-space: nowrap;
    transition: background .18s;
}
.btn-copy-link:hover { background: #7d3c98; }

/* ── Envoi du rapport par mail ───────────────────────────────── */
.send-mail-box {
    background: #f7fbf8;
    border: 2px dashed #bfe3cd;
    border-radius: 10px;
    padding: 14px 18px;
    margin-bottom: 18px;
    text-align: center;
}
.send-mail-box p { font-size: .88rem; color: #555; margin-bottom: 10px; }
.btn-send-mail {
    background: #27ae60;
    color: #fff;
    border: none;
    padding: 10px 22px;
    border-radius: 8px;
    font-size: .88rem;
    font-weight: 600;
    cursor: pointer;
    transition: background .18s;
}
.btn-send-mail:hover:not(:disabled) { background: #1e8449; }
.btn-send-mail:disabled { opacity: .6; cursor: default; }

/* Sélecteur descendant : prime sur `.send-mail-box p` sans recourir à !important. */
.send-mail-box .send-mail-status { font-size: .86rem; margin: 10px 0 0; }
.send-mail-status.is-ok    { color: #1e8449; font-weight: 600; }
.send-mail-status.is-error { color: #c0392b; }

.results-restart { text-align: center; padding-top: 8px; }
.btn-restart {
    background: #ede8f5;
    color: #555;
    border: none;
    padding: 10px 20px;
    border-radius: 8px;
    font-size: .9rem;
    font-weight: 600;
    cursor: pointer;
}
.btn-restart:hover { background: #ddd5ef; }

/* ── Axis choice (step 8) ───────────────────────────────────── */
.axe-choices {
    background: #fff;
    padding: 20px 24px 16px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.axe-choice input { display: none; }

.axe-choice-inner {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 14px 18px;
    border-radius: 10px;
    border: 2px solid #e0d6f0;
    cursor: pointer;
    transition: all .18s;
    background: #fff;
}
.axe-choice:hover .axe-choice-inner {
    border-color: #9b59b6;
    background: #faf7ff;
}
.axe-choice input:checked + .axe-choice-inner {
    border-color: #9b59b6;
    background: #f0e8fc;
}

.axe-choice-icon { font-size: 1.6rem; line-height: 1; flex-shrink: 0; }
.axe-choice-text { display: flex; flex-direction: column; gap: 2px; }
.axe-choice-text strong { font-size: .96rem; color: #222; }
.axe-choice-text small  { font-size: .8rem; color: #888; }

/* ── Report sections ────────────────────────────────────────── */
.report-section {
    background: #faf7ff;
    border-radius: 12px;
    padding: 20px 22px;
    margin-bottom: 18px;
    border-left: 4px solid #9b59b6;
}

.report-section-title {
    font-size: .9rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: #6d3a9f;
    margin-bottom: 14px;
    padding-bottom: 8px;
    border-bottom: 1px solid #e8dff5;
}
.report-section-title.rp-phase1 { color: #166534; }
.report-section .report-section-title.rp-phase1 { border-left-color: #22c55e; }
.report-section:has(.rp-phase1)  { border-left-color: #22c55e; }
.report-section-title.rp-phase2 { color: #92400e; }
.report-section:has(.rp-phase2)  { border-left-color: #f59e0b; }
.report-section-title.rp-phase3 { color: #1e40af; }
.report-section:has(.rp-phase3)  { border-left-color: #3b82f6; }

.report-p {
    font-size: .9rem;
    line-height: 1.7;
    color: #444;
    margin-bottom: 10px;
}
.report-p:last-child { margin-bottom: 0; }

.report-transition {
    font-style: italic;
    color: #888;
    font-size: .88rem;
    margin: 10px 0 8px;
}

/* Sous-titre chakra (affiché uniquement quand 2 forts / 2 faibles) */
.report-lead {
    font-weight: 700;
    font-size: .82rem;
    text-transform: uppercase;
    letter-spacing: .03em;
    margin: 14px 0 6px;
}
.report-lead:first-child { margin-top: 0; }

.report-objectif {
    font-size: .85rem;
    color: #666;
    background: rgba(255,255,255,.7);
    padding: 7px 12px;
    border-radius: 7px;
    margin-bottom: 12px;
}

.report-conclusion {
    background: linear-gradient(135deg, #f5edff, #ede0ff);
    border-left-color: #9b59b6;
}
.report-conclusion .report-p { color: #4a1d6e; }

/* Encart parcours personnalisé (intervenants / objectifs) en Phase 1 */
.report-parcours {
    background: rgba(255,255,255,.6);
    border: 1px solid color-mix(in srgb, var(--c) 30%, transparent);
    border-left: 3px solid var(--c);
    border-radius: 8px;
    padding: 10px 14px;
    margin: 10px 0 16px;
}
.rp-parcours-head {
    font-weight: 700;
    font-size: .82rem;
    color: var(--c);
    margin-bottom: 8px;
}
.rp-parcours-row {
    display: flex;
    gap: 8px;
    align-items: baseline;
    font-size: .84rem;
    line-height: 1.5;
    margin-top: 4px;
}
.rp-parcours-tag {
    flex-shrink: 0;
    font-weight: 600;
    color: #555;
    min-width: 108px;
}
.rp-parcours-vals { color: #444; }
@media (max-width: 520px) {
    .rp-parcours-row { flex-direction: column; gap: 2px; }
    .rp-parcours-tag { min-width: 0; }
}

/* ── Axes section headers ───────────────────────────────────── */
.axes-section { margin-bottom: 4px; }
.section-title {
    font-size: .78rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .07em;
    color: var(--c, #9b59b6);
    padding: 10px 0 6px;
    border-bottom: 1px solid #ede8f5;
    margin-bottom: 10px;
    margin-top: 6px;
}

/* ── Axes result cards ──────────────────────────────────────── */
.axes-result-grid {
    display: flex;
    flex-direction: column;
    gap: 14px;
    margin-bottom: 24px;
}
.axes-result-card {
    background: #faf7ff;
    border-left: 5px solid var(--c, #9b59b6);
    border-radius: 10px;
    padding: 14px 18px;
}
.arc-top {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 10px;
}
.arc-emoji { font-size: 1.6rem; line-height: 1; }
.arc-info { flex: 1; }
.arc-title { font-weight: 700; font-size: .95rem; color: #222; }
.arc-interp { font-size: .82rem; font-weight: 700; margin-top: 3px; }
.arc-score {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--c, #9b59b6);
    line-height: 1;
}
.arc-max { font-size: .7rem; font-weight: 400; color: #999; }
.arc-bar-track {
    height: 8px;
    background: #ede8f5;
    border-radius: 4px;
    overflow: hidden;
}
.arc-bar-fill {
    height: 100%;
    border-radius: 4px;
    transition: width .8s cubic-bezier(.4,0,.2,1);
}

/* ── Axe dominant highlight ─────────────────────────────────── */
.axes-result-dominant {
    background: color-mix(in srgb, var(--c, #9b59b6) 10%, #fff);
    border-left-width: 7px;
}
.axes-result-dominant .arc-title { font-size: 1rem; }

/* ── Axe à soutenir (le plus faible) ────────────────────────── */
.axes-result-weak {
    background: color-mix(in srgb, var(--c, #9b59b6) 6%, #fff);
    border-left-style: dashed;
    border-left-width: 7px;
}

/* ── Responsive ─────────────────────────────────────────────── */
@media (max-width: 480px) {
    body { padding: 16px 12px 48px; }
    .result-cards { flex-direction: column; }
    .rating-opt span { height: 36px; font-size: .88rem; }
    .chakra-step-header h1,
    .chakra-step-header h2 { font-size: 1.1rem; }
    .step-dot { width: 26px; height: 26px; font-size: .82rem; }
    .live-score-chip { font-size: .72rem; padding: 3px 6px; }
}