/* ═══════════════════════════════════════════════
   PraxiMet – Styles Quiz Public
   Côté visiteur — responsive mobile first
   ═══════════════════════════════════════════════ */

:root {
    --pm-blue:        #1e3a5f;
    --pm-blue-mid:    #2d5a8e;
    --pm-blue-light:  #e8f0fb;
    --pm-blue-pale:   #f0f5fb;
    --pm-green:       #00834e;
    --pm-border:      #e2e8f0;
    --pm-bg:          #f8fafc;
    --pm-white:       #ffffff;
    --pm-text:        #1a202c;
    --pm-muted:       #64748b;
    --pm-radius:      12px;
    --pm-radius-sm:   8px;
    --pm-shadow:      0 4px 20px rgba(30,58,95,.10);
    --pm-shadow-sm:   0 2px 8px  rgba(30,58,95,.07);
    --pm-transition:  .2s ease;
}

/* ── Wrapper principal ───────────────────────── */
.praximet-wrapper {
    max-width: 680px;
    margin: 0 auto;
    padding: 0 16px;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    color: var(--pm-text);
    box-sizing: border-box;
}

.praximet-wrapper *,
.praximet-wrapper *::before,
.praximet-wrapper *::after {
    box-sizing: inherit;
}

/* ── Utilitaires ─────────────────────────────── */
.praximet-hidden { display: none !important; }

/* ══════════════════════════════════════════════
   ÉTAPE 1 — QUIZ
   ══════════════════════════════════════════════ */

/* En-tête quiz */
.praximet-header {
    text-align: center;
    padding: 40px 0 32px;
}

.praximet-titre {
    font-size: 26px !important;
    font-weight: 800 !important;
    color: var(--pm-blue) !important;
    margin: 0 0 10px !important;
    line-height: 1.2 !important;
}

.praximet-sous-titre {
    font-size: 15px;
    color: var(--pm-muted);
    margin: 0;
    line-height: 1.6;
}

/* Barre de progression */
.praximet-progress-container {
    margin-bottom: 6px;
}

.praximet-progress-track {
    height: 8px;
    background: var(--pm-border);
    border-radius: 4px;
    overflow: hidden;
    margin-bottom: 6px;
}

.praximet-progress-fill {
    height: 100%;
    background: linear-gradient(90deg, var(--pm-blue-mid), var(--pm-blue));
    border-radius: 4px;
    transition: width .4s cubic-bezier(.4,0,.2,1);
}

.praximet-progress-label {
    font-size: 12px;
    color: var(--pm-muted);
    display: block;
    text-align: right;
}

/* Numéro de question */
.praximet-question-num {
    font-size: 13px;
    color: var(--pm-muted);
    text-align: center;
    margin: 16px 0 12px;
    font-weight: 500;
}

/* Card question */
.praximet-question-card {
    background: var(--pm-white);
    border: 1px solid var(--pm-border);
    border-radius: var(--pm-radius);
    padding: 32px 28px;
    margin-bottom: 24px;
    box-shadow: var(--pm-shadow);
    min-height: 110px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.praximet-question-texte {
    font-size: 18px;
    font-weight: 600;
    color: var(--pm-text);
    text-align: center;
    margin: 0;
    line-height: 1.5;
}

/* Animation fade-in question */
@keyframes praximet-fade {
    from { opacity: 0; transform: translateY(6px); }
    to   { opacity: 1; transform: translateY(0);   }
}

.praximet-fade-in {
    animation: praximet-fade .25s ease forwards;
}

/* Boutons Oui / Non */
.praximet-btns-reponse {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    margin-bottom: 16px;
}

.praximet-btn {
    border: none;
    border-radius: var(--pm-radius-sm);
    font-size: 16px;
    font-weight: 700;
    cursor: pointer;
    padding: 16px 12px;
    transition: all var(--pm-transition);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    letter-spacing: .3px;
}

.praximet-btn--non {
    background: var(--pm-bg);
    color: var(--pm-muted);
    border: 2px solid var(--pm-border);
}

.praximet-btn--non:hover {
    background: #fee2e2;
    border-color: #fca5a5;
    color: #b91c1c;
    transform: translateY(-1px);
    box-shadow: var(--pm-shadow-sm);
}

.praximet-btn--non.praximet-btn--actif {
    background: #fee2e2;
    border-color: #ef4444;
    color: #b91c1c;
}

.praximet-btn--oui {
    background: var(--pm-blue-light);
    color: var(--pm-blue);
    border: 2px solid var(--pm-blue-light);
}

.praximet-btn--oui:hover {
    background: var(--pm-blue);
    border-color: var(--pm-blue);
    color: var(--pm-white);
    transform: translateY(-1px);
    box-shadow: var(--pm-shadow);
}

.praximet-btn--oui.praximet-btn--actif {
    background: var(--pm-blue);
    border-color: var(--pm-blue);
    color: var(--pm-white);
}

/* Bouton Précédent */
.praximet-nav-prev {
    text-align: center;
    margin-bottom: 32px;
}

.praximet-btn--prev {
    background: none;
    color: var(--pm-muted);
    font-size: 13px;
    font-weight: 500;
    padding: 8px 16px;
    border: 1px solid transparent;
    border-radius: var(--pm-radius-sm);
}

.praximet-btn--prev:hover {
    color: var(--pm-blue);
    border-color: var(--pm-border);
    background: var(--pm-bg);
}


/* ══════════════════════════════════════════════
   ÉTAPE 2 — FORMULAIRE
   ══════════════════════════════════════════════ */

/* Aperçu résultat flou */
.praximet-resultat-apercu {
    text-align: center;
    padding: 32px 20px 24px;
}

.praximet-code-flou {
    display: flex;
    justify-content: center;
    gap: 8px;
    margin-bottom: 16px;
}

.praximet-lettre-floue {
    width: 64px;
    height: 64px;
    background: var(--pm-blue);
    color: var(--pm-white);
    border-radius: 10px;
    font-size: 32px;
    font-weight: 800;
    display: flex;
    align-items: center;
    justify-content: center;
    filter: blur(5px);
    user-select: none;
    opacity: .6;
}

.praximet-apercu-texte {
    font-size: 16px;
    color: var(--pm-text);
    line-height: 1.6;
    margin: 0;
}

/* Formulaire */
.praximet-form {
    background: var(--pm-white);
    border: 1px solid var(--pm-border);
    border-radius: var(--pm-radius);
    padding: 28px;
    box-shadow: var(--pm-shadow);
    margin-bottom: 32px;
}

.praximet-form-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
}

.praximet-form-group {
    margin-bottom: 16px;
}

.praximet-form-group label {
    display: block;
    font-size: 13px;
    font-weight: 600;
    color: var(--pm-blue);
    margin-bottom: 6px;
}

.praximet-form-group input[type="text"],
.praximet-form-group input[type="email"],
.praximet-form-group input[type="tel"] {
    width: 100%;
    padding: 11px 14px;
    border: 1.5px solid var(--pm-border);
    border-radius: var(--pm-radius-sm);
    font-size: 14px;
    color: var(--pm-text);
    background: var(--pm-white);
    transition: border-color var(--pm-transition), box-shadow var(--pm-transition);
    outline: none;
    appearance: none;
}

.praximet-form-group input:focus {
    border-color: var(--pm-blue-mid);
    box-shadow: 0 0 0 3px rgba(45,90,142,.12);
}

/* Checkbox RGPD */
.praximet-form-group--rgpd {
    margin-bottom: 20px;
}

.praximet-label-checkbox {
    display: flex;
    gap: 10px;
    align-items: flex-start;
    cursor: pointer;
    font-size: 13px;
    color: var(--pm-muted);
    line-height: 1.5;
}

.praximet-label-checkbox input[type="checkbox"] {
    margin-top: 2px;
    width: 16px;
    height: 16px;
    accent-color: var(--pm-blue);
    flex-shrink: 0;
    cursor: pointer;
}

.praximet-label-checkbox a {
    color: var(--pm-blue);
    text-decoration: underline;
}

/* Erreur formulaire */
.praximet-error {
    background: #fee2e2;
    border: 1px solid #fca5a5;
    border-radius: var(--pm-radius-sm);
    padding: 12px 16px;
    font-size: 13px;
    color: #b91c1c;
    margin-bottom: 16px;
    font-weight: 500;
}

/* Bouton submit */
.praximet-btn--submit {
    width: 100%;
    background: var(--pm-blue);
    color: var(--pm-white);
    border: none;
    border-radius: var(--pm-radius-sm);
    padding: 16px;
    font-size: 16px;
    font-weight: 700;
    cursor: pointer;
    transition: all var(--pm-transition);
    letter-spacing: .3px;
}

.praximet-btn--submit:hover:not(:disabled) {
    background: var(--pm-blue-mid);
    transform: translateY(-1px);
    box-shadow: var(--pm-shadow);
}

.praximet-btn--submit:disabled {
    opacity: .65;
    cursor: not-allowed;
    transform: none;
}


/* ══════════════════════════════════════════════
   ÉTAPE 3 — RÉSULTAT
   ══════════════════════════════════════════════ */

/* En-tête résultat */
.praximet-resultat-header {
    text-align: center;
    padding: 40px 0 28px;
}

.praximet-resultat-intro {
    font-size: 13px;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    color: var(--pm-muted);
    margin: 0 0 16px;
    font-weight: 600;
}

/* Code RIASEC animé */
.praximet-code-riasec {
    display: flex;
    justify-content: center;
    gap: 10px;
    margin-bottom: 6px;
}

@keyframes praximet-pop {
    0%   { opacity: 0; transform: scale(.6) translateY(10px); }
    70%  { transform: scale(1.08) translateY(-2px); }
    100% { opacity: 1; transform: scale(1) translateY(0); }
}

.praximet-lettre-code {
    width: 72px;
    height: 72px;
    background: var(--pm-blue);
    color: var(--pm-white);
    border-radius: 12px;
    font-size: 36px;
    font-weight: 800;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    animation: praximet-pop .45s cubic-bezier(.34,1.56,.64,1) forwards;
    box-shadow: 0 4px 16px rgba(30,58,95,.25);
}

/* Profil détaillé */
.praximet-profil-detail {
    margin-bottom: 28px;
}

.praximet-resultat-prenom {
    font-size: 16px;
    font-weight: 700;
    color: var(--pm-blue);
    text-align: center;
    margin: 0 0 20px;
}

/* Cards type de personnalité */
.praximet-type-card {
    background: var(--pm-white);
    border: 1px solid var(--pm-border);
    border-left: 4px solid var(--pm-blue);
    border-radius: var(--pm-radius-sm);
    padding: 20px 22px;
    margin-bottom: 12px;
    box-shadow: var(--pm-shadow-sm);
}

.praximet-type-rang {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: var(--pm-muted);
    margin: 0 0 4px;
    font-weight: 600;
}

.praximet-type-label {
    font-size: 17px !important;
    font-weight: 800 !important;
    color: var(--pm-blue) !important;
    margin: 0 0 8px !important;
}

.praximet-type-desc {
    font-size: 14px;
    color: #475569;
    line-height: 1.6;
    margin: 0;
}

/* CTA Calendly */
.praximet-cta-rdv {
    background: var(--pm-blue-pale);
    border: 1px solid var(--pm-blue-light);
    border-radius: var(--pm-radius);
    padding: 28px 24px;
    text-align: center;
    margin-bottom: 40px;
}

.praximet-cta-texte {
    font-size: 15px;
    color: var(--pm-blue);
    font-weight: 600;
    margin: 0 0 18px;
    line-height: 1.5;
}

.praximet-btn--calendly {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: var(--pm-blue);
    color: var(--pm-white);
    text-decoration: none;
    padding: 16px 32px;
    border-radius: var(--pm-radius-sm);
    font-size: 16px;
    font-weight: 700;
    transition: all var(--pm-transition);
    box-shadow: var(--pm-shadow);
}

.praximet-btn--calendly:hover {
    background: var(--pm-blue-mid);
    transform: translateY(-1px);
    box-shadow: 0 6px 24px rgba(30,58,95,.2);
    color: var(--pm-white);
    text-decoration: none;
}


/* ══════════════════════════════════════════════
   RESPONSIVE MOBILE
   ══════════════════════════════════════════════ */

@media (max-width: 480px) {

    .praximet-titre { font-size: 21px !important; }

    .praximet-question-card { padding: 24px 18px; min-height: 90px; }
    .praximet-question-texte { font-size: 16px; }

    .praximet-form-row { grid-template-columns: 1fr; }

    .praximet-form { padding: 20px 16px; }

    .praximet-lettre-code,
    .praximet-lettre-floue {
        width: 58px;
        height: 58px;
        font-size: 28px;
    }

    .praximet-btns-reponse { gap: 8px; }
    .praximet-btn { padding: 14px 8px; font-size: 15px; }

    .praximet-btn--calendly { padding: 14px 20px; font-size: 15px; }

    .praximet-type-card { padding: 16px; }
}


/* ══════════════════════════════════════════════
   BANDEAU CTA — Page résultat
   ══════════════════════════════════════════════ */

.praximet-cta-bandeau {
    display: flex;
    align-items: center;
    gap: 20px;
    background: linear-gradient(135deg, #1e3a5f 0%, #2d5a8e 100%);
    border-radius: var(--pm-radius);
    padding: 28px 28px;
    margin-bottom: 40px;
    box-shadow: 0 6px 24px rgba(30,58,95,.25);
}

.praximet-cta-bandeau__icon {
    font-size: 36px;
    flex-shrink: 0;
    line-height: 1;
}

.praximet-cta-bandeau__content {
    flex: 1;
    min-width: 0;
}

.praximet-cta-bandeau__titre {
    font-size: 13px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    color: rgba(255,255,255,.65);
    margin: 0 0 6px;
}

.praximet-cta-bandeau__texte {
    font-size: 15px;
    color: rgba(255,255,255,.92);
    line-height: 1.55;
    margin: 0;
}

.praximet-cta-bandeau .praximet-btn--calendly {
    flex-shrink: 0;
    background: #ffffff;
    color: var(--pm-blue);
    padding: 14px 22px;
    font-size: 14px;
    font-weight: 700;
    border-radius: var(--pm-radius-sm);
    text-decoration: none;
    white-space: nowrap;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    transition: all var(--pm-transition);
    box-shadow: 0 2px 8px rgba(0,0,0,.15);
}

.praximet-cta-bandeau .praximet-btn--calendly:hover {
    background: #f0f5ff;
    transform: translateY(-1px);
    box-shadow: 0 4px 16px rgba(0,0,0,.2);
    color: var(--pm-blue);
    text-decoration: none;
}

/* Mobile : empile les éléments */
@media (max-width: 560px) {
    .praximet-cta-bandeau {
        flex-direction: column;
        text-align: center;
        gap: 16px;
        padding: 24px 20px;
    }

    .praximet-cta-bandeau .praximet-btn--calendly {
        width: 100%;
        justify-content: center;
    }
}


/* ══════════════════════════════════════════════
   RADAR CHART RIASEC
   ══════════════════════════════════════════════ */

.praximet-radar-wrap {
    max-width: 380px;
    margin: 0 auto;
    background: var(--pm-white);
    border: 1px solid var(--pm-border);
    border-radius: var(--pm-radius);
    padding: 24px 16px 16px;
    margin-bottom: 24px;
    box-shadow: var(--pm-shadow);
    text-align: center;
}

.praximet-radar-titre {
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    color: var(--pm-muted);
    margin: 0 0 12px;
}

.praximet-radar-svg {
    width: 100%;
    max-width: 340px;
    height: auto;
    display: block;
    margin: 0 auto;
    overflow: visible;
}

/* Animation d'apparition de la zone */
@keyframes praximet-radar-draw {
    from {
        opacity: 0;
        transform: scale(0.6);
        transform-origin: 200px 200px;
    }
    to {
        opacity: 1;
        transform: scale(1);
        transform-origin: 200px 200px;
    }
}

.praximet-radar-area {
    animation: praximet-radar-draw 0.7s cubic-bezier(.34,1.2,.64,1) forwards;
}

.praximet-radar-dot {
    animation: praximet-radar-draw 0.5s ease forwards;
}

.praximet-radar-lettre {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}

.praximet-radar-label {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}

@media (max-width: 480px) {
    .praximet-radar-svg { max-width: 360px; }
}


/* ══════════════════════════════════════════════
   SOUS-DOMAINES
   ══════════════════════════════════════════════ */

.praximet-sd-wrap {
    margin-bottom: 28px;
}

.praximet-sd-titre {
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    color: var(--pm-muted);
    margin: 0 0 16px;
}

.praximet-sd-bloc {
    background: var(--pm-white);
    border: 1px solid var(--pm-border);
    border-radius: var(--pm-radius-sm);
    padding: 16px 18px;
    margin-bottom: 10px;
    opacity: .55;
    transition: opacity .2s;
}

.praximet-sd-bloc--dominant {
    opacity: 1;
    border-left: 3px solid var(--pm-blue);
}

.praximet-sd-head {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 14px;
}

.praximet-sd-lettre {
    width: 28px;
    height: 28px;
    background: var(--pm-blue);
    color: white;
    border-radius: 6px;
    font-size: 14px;
    font-weight: 800;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.praximet-sd-bloc:not(.praximet-sd-bloc--dominant) .praximet-sd-lettre {
    background: var(--pm-border);
    color: var(--pm-muted);
}

.praximet-sd-type-label {
    font-size: 14px;
    font-weight: 700;
    color: var(--pm-blue);
}

.praximet-sd-bloc:not(.praximet-sd-bloc--dominant) .praximet-sd-type-label {
    color: var(--pm-muted);
}

.praximet-sd-row {
    margin-bottom: 10px;
}

.praximet-sd-row:last-child { margin-bottom: 0; }

.praximet-sd-row-top {
    display: flex;
    justify-content: space-between;
    margin-bottom: 5px;
}

.praximet-sd-nom {
    font-size: 12px;
    color: var(--pm-text);
    font-weight: 500;
}

.praximet-sd-pct {
    font-size: 12px;
    color: var(--pm-muted);
    font-weight: 600;
}

.praximet-sd-bar-track {
    height: 6px;
    background: var(--pm-border);
    border-radius: 3px;
    overflow: hidden;
}

.praximet-sd-bar-fill {
    height: 100%;
    background: var(--pm-blue);
    border-radius: 3px;
    transition: width .6s ease;
}

.praximet-sd-bloc:not(.praximet-sd-bloc--dominant) .praximet-sd-bar-fill {
    background: #c8d8ec;
}


/* ══════════════════════════════════════════════
   BADGE PRAXIMET
   ══════════════════════════════════════════════ */

.praximet-badge-wrap {
    display: flex;
    justify-content: flex-end;
    margin-bottom: 6px;
}

.praximet-badge {
    display: inline-block;
    background: #e86c2f;
    color: #ffffff;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 1px;
    text-transform: uppercase;
    padding: 6px 14px;
    border-radius: 6px;
    box-shadow: 0 2px 8px rgba(232,108,47,.30);
}


/* ══════════════════════════════════════════════
   BOUTON EXPORT PDF
   ══════════════════════════════════════════════ */

.praximet-pdf-wrap {
    text-align: center;
    margin-bottom: 32px;
}

.praximet-btn--pdf {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: var(--pm-white);
    color: var(--pm-blue);
    border: 2px solid var(--pm-blue);
    border-radius: var(--pm-radius-sm);
    padding: 12px 28px;
    font-size: 14px;
    font-weight: 700;
    cursor: pointer;
    transition: all var(--pm-transition);
}

.praximet-btn--pdf:hover {
    background: var(--pm-blue);
    color: var(--pm-white);
    transform: translateY(-1px);
    box-shadow: var(--pm-shadow);
}

.praximet-pdf-loading {
    font-size: 13px;
    color: var(--pm-muted);
    font-style: italic;
}


/* ══════════════════════════════════════════════
   RGPD — SUPPRESSION DONNÉES
   ══════════════════════════════════════════════ */

.praximet-rgpd-wrap {
    text-align: center;
    margin: 24px 0 8px;
    padding: 16px;
    border-top: 1px solid #e2e8f0;
}

.praximet-btn-supprimer {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: none;
    color: #94a3b8;
    border: 1px solid #e2e8f0;
    border-radius: var(--pm-radius-sm);
    padding: 8px 18px;
    font-size: 12px;
    font-weight: 500;
    cursor: pointer;
    transition: all var(--pm-transition);
}

.praximet-btn-supprimer:hover {
    color: #dc2626;
    border-color: #fca5a5;
    background: #fef2f2;
}

.praximet-rgpd-note {
    margin-top: 8px;
    font-size: 11px;
    color: #cbd5e1;
    line-height: 1.5;
}

.praximet-rgpd-confirm {
    font-size: 12px;
    color: #16a34a;
    font-weight: 500;
}


/* ══════════════════════════════════════════════
   GRAPHIQUE BARRES RIASEC
   ══════════════════════════════════════════════ */

.praximet-bars-chart {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin: 8px 0 16px;
}

.praximet-bar-row {
    display: grid;
    grid-template-columns: 160px 1fr 48px;
    align-items: center;
    gap: 12px;
    opacity: 0.6;
    transition: opacity 0.2s;
}

.praximet-bar-row--dominant {
    opacity: 1;
}

.praximet-bar-label {
    display: flex;
    align-items: center;
    gap: 8px;
}

.praximet-bar-lettre {
    font-size: 18px;
    font-weight: 800;
    width: 22px;
    text-align: center;
    flex-shrink: 0;
}

.praximet-bar-nom {
    font-size: 13px;
    color: var(--pm-text-secondary, #64748b);
    font-weight: 500;
}

.praximet-bar-track {
    height: 10px;
    background: #e8ecf2;
    border-radius: 99px;
    overflow: hidden;
}

.praximet-bar-fill {
    height: 100%;
    border-radius: 99px;
    width: 0%;
}

.praximet-bar-score {
    font-size: 12px;
    font-weight: 700;
    color: var(--pm-text-secondary, #64748b);
    text-align: right;
    white-space: nowrap;
}

.praximet-bar-row--dominant .praximet-bar-score {
    color: #1e3a5f;
}

.praximet-code-badge {
    text-align: center;
    font-size: 13px;
    color: #64748b;
    margin-top: 8px;
    padding-top: 12px;
    border-top: 1px solid #e2e8f0;
}

.praximet-code-badge strong {
    color: #1e3a5f;
    font-size: 15px;
    letter-spacing: 2px;
}

@media (max-width: 480px) {
    .praximet-bar-row {
        grid-template-columns: 120px 1fr 40px;
        gap: 8px;
    }
    .praximet-bar-lettre { font-size: 15px; }
    .praximet-bar-nom    { font-size: 12px; }
}