/**
 * Law Simulator WP — Feuille de style front-end V1.6
 * Toutes les couleurs passent par des variables CSS injectées dynamiquement.
 * Les valeurs ci-dessous sont les fallbacks (utilisés si les variables ne sont pas définies).
 */

:root {
    --lsw-primary:           #2d6a9f;
    --lsw-primary-dark:      #1a3a5c;
    --lsw-accent:            #f97316;
    --lsw-bg-intro:          #f0f4f8;
    --lsw-border:            #e2e8f0;
    --lsw-qual-in-bg:        #dcfce7;
    --lsw-qual-in-text:      #14532d;
    --lsw-qual-out-bg:       #fef9c3;
    --lsw-qual-out-text:     #713f12;
    --lsw-qual-excl-bg:      #fef2f2;
    --lsw-qual-excl-text:    #7f1d1d;
    --lsw-legal-bg:          #fff7ed;
    --lsw-legal-border:      #f97316;
    --lsw-legal-text:        #7c4b00;
    --lsw-frise-circle:      #2d6a9f;
    --lsw-frise-last:        #374151;
    --lsw-frise-special:     #f97316;
    --lsw-delay-border:      #fbbf24;
    --lsw-delay-text:        #92400e;
    --lsw-result-bg:         #f8fafc;
    --lsw-acc-bg:            #eff6ff;
    --lsw-acc-border:        #2d6a9f;
}

/* ============================================================
   WRAPPER
============================================================ */
.lsw-wrapper {
    max-width: 760px;
    margin: 0 auto;
    padding: 0 16px;
    font-family: inherit;
    color: #1a1a1a;
    line-height: 1.6;
}

/* ============================================================
   SECTIONS
============================================================ */
.lsw-section { margin-bottom: 48px; }

.lsw-section__title {
    font-size: 1.35rem;
    font-weight: 700;
    color: var(--lsw-primary-dark);
    border-left: 4px solid var(--lsw-primary);
    padding-left: 12px;
    margin-bottom: 24px;
}

.lsw-intro {
    background: var(--lsw-bg-intro);
    border-left: 4px solid var(--lsw-primary);
    padding: 16px 20px;
    border-radius: 4px;
    margin-bottom: 32px;
    font-size: 0.95rem;
}

/* ============================================================
   BARRE DE PROGRESSION
============================================================ */
.lsw-progress {
    height: 4px;
    background: var(--lsw-border);
    border-radius: 2px;
    margin-bottom: 28px;
    overflow: hidden;
}
.lsw-progress__bar {
    height: 100%;
    background: var(--lsw-primary);
    border-radius: 2px;
    transition: width 0.3s ease;
}

/* ============================================================
   QUESTIONNAIRE
============================================================ */
.lsw-question {
    background: #fff;
    border: 1px solid var(--lsw-border);
    border-radius: 8px;
    padding: 20px 24px;
    margin-bottom: 20px;
    transition: border-color 0.2s;
}
.lsw-question:focus-within { border-color: var(--lsw-primary); }
.lsw-question--error { border-color: #ef4444 !important; background: #fef2f2; }

.lsw-question__header {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    margin-bottom: 12px;
}
.lsw-question__num {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px; height: 28px; min-width: 28px;
    background: var(--lsw-primary);
    color: #fff;
    border-radius: 50%;
    font-size: 0.8rem;
    font-weight: 700;
}
.lsw-question__title {
    margin: 0;
    font-size: 1rem;
    font-weight: 600;
    color: #1a1a1a;
    padding-top: 4px;
}
.lsw-question__help {
    font-size: 0.875rem;
    color: #64748b;
    margin: 0 0 12px;
}

/* Choix */
.lsw-choices { display: flex; flex-direction: column; gap: 8px; margin-top: 12px; }

.lsw-choice {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 10px 14px;
    border: 1px solid var(--lsw-border);
    border-radius: 6px;
    cursor: pointer;
    transition: background 0.15s, border-color 0.15s;
}
.lsw-choice:hover { background: #f8fafc; border-color: var(--lsw-primary); }
.lsw-choice input[type="radio"],
.lsw-choice input[type="checkbox"] { margin-top: 3px; accent-color: var(--lsw-primary); }
.lsw-choice__label { font-size: 0.95rem; flex: 1; }
.lsw-choice__explanation { font-size: 0.8rem; color: #64748b; display: block; margin-top: 2px; width: 100%; }
.lsw-choice:has(input:checked) { background: #eff6ff; border-color: var(--lsw-primary); }

/* Note juridique */
.lsw-legal-note {
    margin-top: 12px;
    padding: 10px 14px;
    background: var(--lsw-legal-bg);
    border-left: 3px solid var(--lsw-legal-border);
    border-radius: 4px;
    font-size: 0.82rem;
    color: var(--lsw-legal-text);
    display: flex;
    gap: 8px;
    align-items: flex-start;
}
.lsw-legal-note__icon { font-size: 1rem; line-height: 1.4; }

/* Objectif pédagogique */
.lsw-objective-note {
    margin-top: 10px;
    padding: 8px 12px;
    background: #f0fdf4;
    border-left: 3px solid #22c55e;
    border-radius: 4px;
    font-size: 0.82rem;
    color: #14532d;
}

/* Submit */
.lsw-form__submit { margin-top: 28px; text-align: center; }

/* ============================================================
   BOUTONS
============================================================ */
.lsw-btn {
    display: inline-block;
    padding: 12px 28px;
    border-radius: 6px;
    font-size: 1rem;
    font-weight: 600;
    cursor: pointer;
    border: none;
    transition: background 0.2s, transform 0.1s;
    text-decoration: none;
}
.lsw-btn:active { transform: scale(0.98); }
.lsw-btn--primary   { background: var(--lsw-primary); color: #fff; }
.lsw-btn--primary:hover { background: var(--lsw-primary-dark); }
.lsw-btn--secondary { background: var(--lsw-border); color: var(--lsw-primary-dark); }
.lsw-btn--secondary:hover { background: #cbd5e1; }
.lsw-btn--ghost     { background: transparent; color: var(--lsw-primary); border: 1px solid var(--lsw-primary); }
.lsw-btn--ghost:hover { background: #eff6ff; }

/* ============================================================
   RÉSULTAT FINAL (analyse)
============================================================ */
.lsw-result {
    background: var(--lsw-result-bg);
    border: 1px solid var(--lsw-border);
    border-radius: 8px;
    padding: 24px;
}

.lsw-result__qualification {
    font-size: 1.1rem;
    font-weight: 700;
    padding: 12px 16px;
    border-radius: 6px;
    margin-bottom: 20px;
    line-height: 1.5;
}
.lsw-result__qualification--in-scope    { background: var(--lsw-qual-in-bg);   color: var(--lsw-qual-in-text);   }
.lsw-result__qualification--out-of-scope{ background: var(--lsw-qual-out-bg);  color: var(--lsw-qual-out-text);  }
.lsw-result__qualification--excluded    { background: var(--lsw-qual-excl-bg); color: var(--lsw-qual-excl-text); }
.lsw-result--excluded { border-color: #fca5a5; background: var(--lsw-qual-excl-bg); }

.lsw-result__block { margin-bottom: 20px; }
.lsw-result__block-title {
    font-size: 0.85rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: #64748b;
    margin-bottom: 8px;
}
.lsw-result__block-intro {
    font-size: 0.875rem;
    color: #475569;
    font-style: italic;
    margin-bottom: 8px;
}
.lsw-result__list {
    margin: 0;
    padding-left: 0;
    list-style: none;
    font-size: 0.9rem;
    color: #374151;
}
.lsw-result__list li { margin-bottom: 4px; padding-left: 14px; position: relative; }
.lsw-result__list li::before { content: '–'; position: absolute; left: 0; color: #94a3b8; }
.lsw-result__conclusion { margin-top: 8px; font-size: 0.9rem; color: #374151; }

/* ============================================================
   ACCORDÉON — zones grises, vulnérabilités, rapidité
============================================================ */
.lsw-acc-list { list-style: none; padding: 0; margin: 0; }

.lsw-acc-item {
    padding: 7px 0;
    border-bottom: 1px dashed var(--lsw-border);
    font-size: 0.9rem;
    color: #374151;
    line-height: 1.5;
}
.lsw-acc-item:last-child { border-bottom: none; }
.lsw-acc-item::before { display: none; }
.lsw-acc-label { font-weight: 500; }

.lsw-acc-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 20px; height: 20px;
    border-radius: 50%;
    background: var(--lsw-border);
    color: #374151;
    border: none;
    cursor: pointer;
    font-size: 0.85rem;
    font-weight: 700;
    line-height: 1;
    margin-left: 8px;
    vertical-align: middle;
    transition: background 0.15s, color 0.15s;
    flex-shrink: 0;
}
.lsw-acc-toggle:hover,
.lsw-acc-toggle[aria-expanded="true"] { background: var(--lsw-primary); color: #fff; }

.lsw-acc-single { margin-top: 12px; }
.lsw-acc-toggle--single {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    width: auto;
    height: auto;
    border-radius: 4px;
    background: transparent;
    color: var(--lsw-primary);
    border: 1px solid var(--lsw-primary);
    font-size: 0.82rem;
    font-weight: 600;
    padding: 4px 12px;
    margin-left: 0;
    cursor: pointer;
    transition: background 0.15s, color 0.15s;
}
.lsw-acc-toggle--single:hover,
.lsw-acc-toggle--single[aria-expanded="true"] { background: #eff6ff; }
.lsw-acc-icon { font-style: normal; font-weight: 700; }

.lsw-acc-detail {
    margin: 8px 0 10px;
    padding: 10px 14px;
    background: var(--lsw-acc-bg);
    border-left: 3px solid var(--lsw-acc-border);
    border-radius: 4px;
    font-size: 0.85rem;
    color: #1e3a5f;
    line-height: 1.55;
    white-space: pre-line;
}
.lsw-acc-detail--single { margin-top: 10px; }

/* ============================================================
   FRISE CHRONOLOGIQUE NUMÉROTÉE
============================================================ */
.lsw-frise {
    display: flex;
    flex-direction: column;
    gap: 0;
}

.lsw-frise__item {
    display: grid;
    grid-template-columns: 56px 1fr;
    gap: 0 16px;
    position: relative;
}

.lsw-frise__node {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.lsw-frise__circle {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: var(--lsw-frise-circle);
    color: #fff;
    font-size: 1rem;
    font-weight: 700;
    flex-shrink: 0;
    position: relative;
    z-index: 1;
    box-shadow: 0 0 0 4px #fff, 0 0 0 5px var(--lsw-border);
    transition: background 0.2s;
}

.lsw-frise__item--special .lsw-frise__circle {
    background: var(--lsw-frise-special);
    box-shadow: 0 0 0 4px #fff, 0 0 0 5px var(--lsw-frise-special);
}

.lsw-frise__item--last .lsw-frise__circle {
    background: var(--lsw-frise-last);
    box-shadow: 0 0 0 4px #fff, 0 0 0 5px var(--lsw-frise-last);
}

.lsw-frise__connector {
    flex: 1;
    width: 2px;
    background: var(--lsw-border);
    margin: 4px 0;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 36px;
}

.lsw-frise__delay-badge {
    display: inline-block;
    background: #fff;
    border: 1px solid var(--lsw-delay-border);
    color: var(--lsw-delay-text);
    font-size: 0.7rem;
    font-weight: 700;
    padding: 2px 7px;
    border-radius: 10px;
    white-space: nowrap;
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    z-index: 2;
}

.lsw-frise__content {
    padding: 6px 0 24px;
}
.lsw-frise__item--last .lsw-frise__content { padding-bottom: 0; }

.lsw-frise__title {
    font-size: 0.95rem;
    font-weight: 700;
    color: var(--lsw-primary-dark);
    margin: 0 0 4px;
    padding-top: 7px;
}
.lsw-frise__item--last .lsw-frise__title { color: var(--lsw-frise-last); }

.lsw-frise__desc {
    font-size: 0.875rem;
    color: #475569;
    margin: 4px 0 0;
    line-height: 1.5;
}
.lsw-frise__info {
    font-size: 0.82rem;
    color: #64748b;
    font-style: italic;
    margin: 4px 0 0;
}

.lsw-substeps {
    margin-top: 8px;
    padding-left: 12px;
    border-left: 2px dashed var(--lsw-border);
}
.lsw-substep {
    padding: 5px 0;
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    font-size: 0.85rem;
}
.lsw-substep__title { font-weight: 600; color: #374151; }

.lsw-step__delay {
    display: inline-block;
    background: #fef3c7;
    color: var(--lsw-delay-text);
    font-size: 0.78rem;
    padding: 2px 8px;
    border-radius: 12px;
}

/* ============================================================
   EMAIL (bloc déplacé après la frise)
============================================================ */
.lsw-email-section {
    margin-top: 40px;
    padding-top: 32px;
    border-top: 1px solid var(--lsw-border);
}
.lsw-email-form {
    background: var(--lsw-bg-intro);
    border-radius: 8px;
    padding: 20px 24px;
}
.lsw-email-form h3 { margin-top: 0; font-size: 0.95rem; color: var(--lsw-primary-dark); }
.lsw-email-form__row { display: flex; gap: 10px; flex-wrap: wrap; }
.lsw-input {
    flex: 1; min-width: 220px;
    padding: 10px 14px;
    border: 1px solid #cbd5e1;
    border-radius: 6px;
    font-size: 0.95rem;
}
.lsw-email-form__feedback {
    margin-top: 10px;
    font-size: 0.875rem;
    padding: 8px 12px;
    border-radius: 4px;
}
.lsw-email-form__feedback--success { background: var(--lsw-qual-in-bg); color: var(--lsw-qual-in-text); }
.lsw-email-form__feedback--error   { background: var(--lsw-qual-excl-bg); color: var(--lsw-qual-excl-text); }

/* ============================================================
   CHARGEMENT
============================================================ */
.lsw-loading { text-align: center; padding: 32px; color: #64748b; }
.lsw-loading__spinner {
    display: inline-block;
    width: 24px; height: 24px;
    border: 3px solid var(--lsw-border);
    border-top-color: var(--lsw-primary);
    border-radius: 50%;
    animation: lsw-spin 0.7s linear infinite;
    vertical-align: middle;
    margin-right: 8px;
}
@keyframes lsw-spin { to { transform: rotate(360deg); } }


/* ============================================================
   RÉCAPITULATIF DES RÉPONSES
============================================================ */
.lsw-recap {
    margin-top: 20px;
}

.lsw-recap__toggle {
    display: flex;
    align-items: center;
    gap: 8px;
    background: none;
    border: 1px solid var(--lsw-border);
    border-radius: 6px;
    padding: 9px 16px;
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--lsw-primary);
    cursor: pointer;
    transition: background 0.15s, border-color 0.15s;
    width: 100%;
    justify-content: space-between;
}
.lsw-recap__toggle:hover {
    background: #f8fafc;
    border-color: var(--lsw-primary);
}
.lsw-recap__toggle[aria-expanded="true"] {
    border-color: var(--lsw-primary);
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
    background: #f8fafc;
}
.lsw-recap__chevron {
    font-size: 0.8rem;
    color: var(--lsw-primary);
    transition: transform 0.2s;
    flex-shrink: 0;
}

.lsw-recap__body {
    border: 1px solid var(--lsw-primary);
    border-top: none;
    border-radius: 0 0 6px 6px;
    overflow: hidden;
}

.lsw-recap__row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px 16px;
    padding: 10px 16px;
    border-bottom: 1px dashed var(--lsw-border);
    font-size: 0.875rem;
    align-items: start;
}
.lsw-recap__row:last-child { border-bottom: none; }
.lsw-recap__row:nth-child(even) { background: #f8fafc; }

.lsw-recap__question {
    color: #475569;
    line-height: 1.45;
}
.lsw-recap__answer {
    font-weight: 600;
    color: var(--lsw-primary-dark);
    line-height: 1.45;
}

@media (max-width: 540px) {
    .lsw-recap__row { grid-template-columns: 1fr; gap: 2px; }
    .lsw-recap__answer { padding-left: 10px; border-left: 2px solid var(--lsw-primary); }
}

/* ============================================================
   RESPONSIVE
============================================================ */
@media (max-width: 540px) {
    .lsw-question { padding: 16px; }
    .lsw-email-form__row { flex-direction: column; }
    .lsw-btn { width: 100%; text-align: center; }
    .lsw-frise__item { grid-template-columns: 44px 1fr; }
    .lsw-frise__circle { width: 32px; height: 32px; font-size: 0.85rem; }
    .lsw-frise__delay-badge { font-size: 0.65rem; padding: 2px 5px; }
}