/* =========================================================
   Lo On Shing — Questionnaire client (KYC & création de société)
   Assistant multi-étapes : chrome, formulaires, récapitulatif, impression
   ========================================================= */

.q-shell { max-width: 980px; margin: 0 auto; }

/* ---------- Barre de progression ---------- */
.q-progress { display: flex; gap: 0.4rem; margin-bottom: 2rem; flex-wrap: wrap; }
.q-progress-item {
    flex: 1 1 118px; min-width: 118px; border-top: 4px solid var(--bg-border);
    padding-top: 0.5rem; font-size: 0.68rem; letter-spacing: 0.04em;
    text-transform: uppercase; color: var(--text-muted); cursor: pointer;
    background: none; border-left: 0; border-right: 0; border-bottom: 0; text-align: left;
    /*  quatorze étapes : un libellé long (« Administrateurs ») ne doit pas
        chevaucher le suivant — il se coupe au mot, ou à la lettre s'il le faut  */
    overflow-wrap: normal; line-height: 1.25; padding-right: 0.3rem;
}
.q-progress-item:hover { color: var(--text-dark); }
.q-progress-item.is-done { border-top-color: var(--brand-primary-light); color: var(--text-body); }
.q-progress-item.is-current { border-top-color: var(--brand-orange); color: var(--brand-primary-dark); font-weight: 700; }

/* ---------- Étapes ---------- */
.q-step { display: none; }
.q-step.is-active { display: block; }
.q-step-head { margin-bottom: 1.6rem; }
.q-step-head .q-step-count { font-size: 0.76rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--brand-orange); font-weight: 700; }
.q-step-head h2 { margin: 0.35rem 0 0.5rem; font-size: 1.55rem; color: var(--brand-primary-dark); }
.q-step-head p { color: var(--text-muted); font-size: 0.94rem; margin: 0; max-width: 70ch; }

.q-fieldset { border: 1px solid var(--bg-border); border-radius: var(--radius-md); padding: 1.4rem 1.5rem; margin-bottom: 1.4rem; background: var(--bg-white); }
.q-fieldset > legend, .q-fieldset > h3 { font-size: 1.02rem; color: var(--brand-primary-dark); margin: 0 0 1rem; font-weight: 700; }
.q-hint { font-size: 0.82rem; color: var(--text-muted); margin: 0.3rem 0 0; }
.q-note { background: var(--bg-subtle); border-left: 4px solid var(--brand-primary-light); border-radius: var(--radius-sm);
          padding: 0.85rem 1rem; font-size: 0.86rem; color: var(--text-body); margin: 0 0 1.3rem; }

/* ---------- Grille de champs ---------- */
.q-grid { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 1rem 1.2rem; }
.q-grid.cols-3 { grid-template-columns: repeat(3, minmax(0,1fr)); }
.q-grid .full { grid-column: 1 / -1; }
@media (max-width: 700px) { .q-grid, .q-grid.cols-3 { grid-template-columns: 1fr; } }

.q-field label { display: block; font-size: 0.84rem; font-weight: 700; color: var(--text-dark); margin-bottom: 0.35rem; }
.q-field .req { color: #c0392b; }
.q-field input[type="text"], .q-field input[type="email"], .q-field input[type="tel"],
.q-field input[type="date"], .q-field input[type="number"], .q-field select, .q-field textarea {
    width: 100%; padding: 0.62rem 0.8rem; border: 1px solid var(--bg-border); border-radius: var(--radius-sm);
    font-family: var(--font-body); font-size: 0.92rem; color: var(--text-dark); background: #fff;
}
.q-field textarea { min-height: 96px; resize: vertical; }
.q-field input:focus, .q-field select:focus, .q-field textarea:focus {
    outline: none; border-color: var(--brand-primary); box-shadow: 0 0 0 3px rgba(26,85,168,0.15);
}
.q-field.is-error input, .q-field.is-error select, .q-field.is-error textarea { border-color: #c0392b; }
.q-error-msg { display: none; font-size: 0.78rem; color: #c0392b; margin-top: 0.25rem; }
.q-field.is-error .q-error-msg { display: block; }

.q-radio-row, .q-check-row { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.q-radio-row label, .q-check-row label {
    display: inline-flex; align-items: center; gap: 0.45rem; font-weight: 400; font-size: 0.88rem;
    border: 1px solid var(--bg-border); border-radius: 999px; padding: 0.45rem 0.9rem; cursor: pointer; background: #fff; margin: 0;
}
.q-radio-row label:has(input:checked), .q-check-row label:has(input:checked) {
    border-color: var(--brand-primary); background: var(--bg-subtle); color: var(--brand-primary-dark); font-weight: 700;
}
.q-checkbox { display: flex; align-items: flex-start; gap: 0.55rem; font-size: 0.88rem; font-weight: 400; }
.q-checkbox input { margin-top: 0.22rem; }

/* ---------- Blocs répétables (personnes, sociétés) ---------- */
.q-repeat-item { border: 1px solid var(--bg-border); border-left: 4px solid var(--brand-primary); border-radius: var(--radius-md);
                 padding: 1.2rem 1.3rem; margin-bottom: 1rem; background: var(--bg-white); }
.q-repeat-head { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-bottom: 1rem; }
.q-repeat-head h4 { margin: 0; font-size: 0.98rem; color: var(--brand-primary-dark); }
.q-remove { background: none; border: 1px solid var(--bg-border); border-radius: var(--radius-sm); color: var(--text-muted);
            font-size: 0.78rem; padding: 0.3rem 0.7rem; cursor: pointer; }
.q-remove:hover { color: #c0392b; border-color: #c0392b; }
.q-add { background: none; border: 1px dashed var(--brand-primary); color: var(--brand-primary); border-radius: var(--radius-sm);
         padding: 0.6rem 1.1rem; font-size: 0.86rem; font-weight: 700; cursor: pointer; }
.q-add:hover { background: var(--bg-subtle); }

/* ---------- Champs conditionnels ---------- */
/*  Un champ posé d'avance et figé — l'adresse de siège que nous
    fournissons à Hong Kong. Il reste un champ pour passer au
    récapitulatif et au PDF ; il se lit comme un fait, pas comme
    une question.  */
.q-readonly,
.q-field textarea.q-readonly {
    background: var(--bg-subtle, #f8fafc);
    color: var(--text-body, #334155);
    border-style: dashed;
    cursor: default;
}

[data-when] { display: none; }
[data-when].is-shown { display: block; }
.q-grid > [data-when].is-shown { display: block; }
/*  une option de bouton radio sous condition garde sa forme de pastille ;
    une <option> de menu se masque par son attribut hidden, pas par ici  */
.q-radio-row label[data-when]:not(.is-shown), .q-check-row label[data-when]:not(.is-shown) { display: none; }
.q-radio-row label[data-when].is-shown, .q-check-row label[data-when].is-shown { display: inline-flex; }
option[data-when] { display: revert; }

/* ---------- Pays à choix multiples (5 sept. 2026) ---------- */
.q-countries-pick { display: flex; gap: 0.5rem; align-items: center; }
.q-countries-pick select { flex: 1 1 auto; }
.q-countries-add { white-space: nowrap; padding: 0.45rem 0.8rem; }
.q-countries-chips { display: flex; flex-wrap: wrap; gap: 0.4rem; margin-top: 0.55rem; }
.q-chip { display: inline-flex; align-items: center; gap: 0.35rem; font-size: 0.84rem; padding: 0.25rem 0.5rem 0.25rem 0.7rem;
          border-radius: 999px; background: var(--bg-subtle); border: 1px solid var(--bg-border); color: var(--brand-primary-dark); }
.q-chip-x { border: 0; background: none; cursor: pointer; color: var(--text-muted); font-size: 1rem; line-height: 1; padding: 0 0.1rem; }
.q-chip-x:hover { color: #c0392b; }

/* ---------- Contrôle d'étape (pourcentages, dates) ---------- */
.q-step-check { color: #c0392b; font-size: 0.86rem; margin: 0.8rem 0 0; padding: 0.6rem 0.9rem; border-left: 4px solid #c0392b; background: #fdf3f2; border-radius: var(--radius-sm); }
.q-step-check[hidden] { display: none; }

/* ---------- Déclarations : la case et le texte respirent (Antoine, 4 sept. 2026) ---------- */
/*  « .q-field label » (display block, gras) l'emportait sur .q-checkbox :
    la case collait au texte. On cible le label-case lui-même.  */
.q-field label.q-checkbox { display: flex; align-items: flex-start; gap: 0.8rem; font-weight: 400; font-size: 0.88rem; margin-bottom: 0; }
.q-field label.q-checkbox input { flex: 0 0 auto; width: 1.05rem; height: 1.05rem; margin: 0.2rem 0 0; }
.q-field label.q-checkbox > span { line-height: 1.55; }

/* ---------- Liste de justificatifs ---------- */
.q-docs { list-style: none; padding: 0; margin: 0; }
.q-docs li { display: flex; gap: 0.7rem; align-items: flex-start; padding: 0.6rem 0; border-bottom: 1px solid var(--bg-border); font-size: 0.9rem; }
.q-docs li:last-child { border-bottom: 0; }
.q-docs .q-doc-for { font-size: 0.76rem; color: var(--text-muted); display: block; margin-top: 0.15rem; }

/* ---------- Navigation ---------- */
.q-nav { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-top: 1.8rem;
         padding-top: 1.4rem; border-top: 1px solid var(--bg-border); }
.q-nav-right { display: flex; gap: 0.6rem; }
.q-saved { font-size: 0.78rem; color: var(--text-muted); }

/* ---------- Récapitulatif ---------- */
.q-summary h3 { font-size: 1rem; color: var(--brand-primary-dark); margin: 1.6rem 0 0.6rem; padding-bottom: 0.35rem; border-bottom: 2px solid var(--bg-border); }
.q-summary-table { width: 100%; border-collapse: collapse; font-size: 0.88rem; }
.q-summary-table th { text-align: left; font-weight: 400; color: var(--text-muted); padding: 0.4rem 1rem 0.4rem 0; width: 42%; vertical-align: top; }
.q-summary-table td { padding: 0.4rem 0; color: var(--text-dark); font-weight: 600; vertical-align: top; }
.q-summary-empty { color: var(--text-muted); font-style: italic; font-weight: 400; }

/* ---------- Impression : uniquement le récapitulatif ---------- */
@media print {
    .header, .footer, .q-progress, .q-nav, .page-hero, .q-note, .q-print-hide { display: none !important; }
    body { background: #fff; }
    .q-step { display: none !important; }
    .q-step.is-active { display: block !important; }
    .q-summary h3 { break-after: avoid; }
    .q-summary-table { break-inside: auto; }
    .q-print-head { display: block !important; margin-bottom: 1.5rem; }
}
.q-print-head { display: none; }

/* ---------- Étape 0 : choix du pays et de la forme ---------- */
.q-choice-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 0.8rem; }
.q-choice {
    text-align: left; background: var(--bg-white); border: 1px solid var(--bg-border);
    border-left: 4px solid var(--brand-primary-light); border-radius: var(--radius-md);
    padding: 1rem 1.15rem; cursor: pointer; transition: var(--transition);
    display: flex; flex-direction: column; gap: 0.3rem; font-family: var(--font-body);
}
.q-choice:hover { border-left-color: var(--brand-orange); box-shadow: var(--shadow-sm); transform: translateY(-1px); }
.q-choice:focus-visible { outline: 2px solid var(--brand-primary); outline-offset: 2px; }
.q-choice.is-picked { border-color: var(--brand-primary); border-left-color: var(--brand-orange); background: var(--bg-subtle); }
.q-choice-title { font-weight: 700; color: var(--brand-primary-dark); font-size: 1rem; }
.q-choice-sub { font-size: 0.85rem; color: var(--text-muted); line-height: 1.45; }

/* ---------- bloc « ce que nous proposons si nous nous en chargeons » ---------- */
.q-ours {
    background: var(--bg-subtle, #eef3fa);
    border: 1px solid var(--brand-accent, #dbe6f5);
    border-left: 4px solid var(--brand-orange, #e67e22);
    border-radius: var(--radius-md, 6px);
    padding: 1rem 1.15rem;
    margin: 0.35rem 0 0.5rem;
}
.q-ours-tag {
    display: inline-block;
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--brand-orange-dark, #c75e0a);
    margin-bottom: 0.5rem;
}
.q-ours p { font-size: 0.9rem; line-height: 1.65; color: var(--text-body, #334155); margin: 0 0 0.6rem; }
.q-ours p:last-child { margin-bottom: 0; }
.q-ours strong { color: var(--brand-primary-darker, #092f66); }
.q-ours-note { font-size: 0.84rem !important; color: var(--text-muted, #64748b) !important; font-style: italic; }

/* ---- KYC du company secretary : champs repris des Know Your Client forms (Shing & Associates) ---- */
.q-field.is-cs { background: #eaf4ea; border-left: 3px solid #7fb98d; border-radius: 6px; padding: 0.55rem 0.7rem 0.6rem; }
.q-field.is-cs > label::after { content: " CS"; font-size: 0.68rem; font-weight: 700; color: #2e7d4f; letter-spacing: 0.04em; vertical-align: super; }
.q-cs-legend { background: #eaf4ea; border-left: 3px solid #7fb98d; border-radius: 6px; padding: 0.7rem 0.9rem; font-size: 0.86rem; color: var(--text-dark); margin: 0; }
.q-cs-legend strong { color: #2e7d4f; }
.q-cs-head { grid-column: 1 / -1; margin: 0.4rem 0 0; font-family: var(--font-display); font-size: 1rem; color: #2e7d4f; border-top: 1px solid rgba(46,125,79,0.25); padding-top: 0.6rem; }

/* ---- Accès direct aux questionnaires : une ligne par juridiction (Antoine, 9 sept. 2026) ---- */
.q-direct-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.6rem; }
.q-direct-row {
    display: grid; grid-template-columns: 11.5rem 1fr; align-items: center; gap: 0.9rem;
    background: var(--bg-white); border: 1px solid var(--bg-border);
    border-left: 4px solid var(--brand-primary-light); border-radius: var(--radius-md);
    padding: 0.7rem 1rem;
}
.q-direct-jur { font-weight: 700; color: var(--brand-primary-dark); font-size: 1rem; line-height: 1.3; }
.q-direct-links { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.q-direct-link {
    flex: 1 1 15rem; display: flex; flex-direction: column; gap: 0.12rem;
    text-decoration: none; background: var(--bg-white);
    border: 1px solid var(--bg-border); border-radius: var(--radius-md);
    padding: 0.5rem 0.75rem; transition: var(--transition);
}
.q-direct-link:hover { border-color: var(--brand-orange); box-shadow: var(--shadow-sm); }
.q-direct-link:focus-visible { outline: 2px solid var(--brand-primary); outline-offset: 2px; }
.q-direct-link strong { font-weight: 700; color: var(--brand-primary-dark); font-size: 0.94rem; }
.q-direct-link small { font-size: 0.8rem; color: var(--text-muted); line-height: 1.4; }
@media (max-width: 640px) {
    .q-direct-row { grid-template-columns: 1fr; align-items: stretch; }
    .q-direct-link { flex: 1 1 100%; }
}