/* "Comment se passe une séance" — templates/partials/how_it_works.html,
   scene in static/js/thread-3d.js. Same palette as navbar/footer: navy
   for what is done, logo coral for where you are. */
.hiw {
    --hiw-paper: #F3F5F9;
    --hiw-surface: #FFFFFF;
    --hiw-ink: #16213A;
    --hiw-muted: #5E6B82;
    --hiw-line: #D3DBE9;
    --hiw-brand: #1F3B6E;
    --hiw-coral: #F28C74;
    --hiw-display: 'Bricolage Grotesque', 'Instrument Sans', system-ui, sans-serif;

    background: var(--hiw-paper);
    color: var(--hiw-ink);
    font-family: 'Instrument Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
    padding: 56px 20px 104px;
}
html.dark .hiw {
    --hiw-paper: #111A2B;
    --hiw-surface: #18233A;
    --hiw-ink: #E8ECF4;
    --hiw-muted: #A9B4C8;
    --hiw-line: #2C3A55;
    --hiw-brand: #9DB4E3;
    --hiw-coral: #F6A994;
}

/* 1000px of content: same column as the navbar and footer. */
.hiw-inner { max-width: 1000px; margin: 0 auto; }

.hiw h2,
.hiw h3 {
    font-family: var(--hiw-display);
    letter-spacing: -0.025em;
    color: var(--hiw-ink);
}
.hiw p { margin: 0; }

.hiw-head { max-width: 620px; margin-bottom: 40px; }
.hiw-head h2 {
    font-size: clamp(1.9rem, 3.6vw, 2.75rem);
    line-height: 1.08;
    font-weight: 700;
    margin: 0 0 14px;
}
.hiw-head p { color: var(--hiw-muted); font-size: 1.08rem; line-height: 1.6; }

/* ── Story: sticky stage on the left, steps scrolling on the right ── */
.hiw-story {
    display: grid;
    grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
    gap: 56px;
    align-items: start;
}
.hiw-stage {
    position: sticky;
    top: 104px;
    height: min(460px, calc(100vh - 150px));
    border-radius: 28px;
    background: var(--hiw-surface);
    border: 1px solid var(--hiw-line);
    overflow: hidden;
}
.hiw-canvas { display: block; width: 100%; height: 100%; touch-action: pan-y; }

/* Pins and end labels are positioned by the script (translate to the
   projected point); hidden until the scene is there to place them. */
.hiw-pin,
.hiw-tag {
    position: absolute;
    left: 0;
    top: 0;
    visibility: hidden;
}
.hiw-has3d .hiw-pin,
.hiw-has3d .hiw-tag { visibility: visible; }

.hiw-pin {
    width: 30px;
    height: 30px;
    margin: -50px 0 0 -15px;
    padding: 0;
    border-radius: 50%;
    border: 1.5px solid var(--hiw-line);
    background: var(--hiw-surface);
    color: var(--hiw-muted);
    font: 600 0.85rem/1 var(--hiw-display);
    cursor: pointer;
    transition: background-color .35s, border-color .35s, color .35s;
}
.hiw-pin:hover { border-color: var(--hiw-brand); color: var(--hiw-brand); }
.hiw-pin.is-done { background: var(--hiw-brand); border-color: var(--hiw-brand); color: var(--hiw-surface); }
.hiw-pin.is-current { background: var(--hiw-coral); border-color: var(--hiw-coral); color: #16213A; }

.hiw-tag {
    margin-top: 22px;
    white-space: nowrap;
    font-size: 0.82rem;
    font-weight: 600;
    color: var(--hiw-muted);
    pointer-events: none;
}
/* "Vous" sits under its point, "Votre psychologue" above pin 4 and
   right-aligned on it, so both stay clear of the thread and inside the stage. */
.hiw-tag-you { margin-left: -14px; }
.hiw-tag-psy { translate: -100% 0; margin: -82px 0 0 15px; }

.hiw-steps { list-style: none; margin: 0; padding: 0 0 18vh; }
.hiw-step {
    min-height: 58vh;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 24px 0;
}
.hiw-step-num {
    font-family: var(--hiw-display);
    font-size: 3.75rem;
    font-weight: 700;
    line-height: 1;
    letter-spacing: -0.04em;
    color: var(--hiw-line);
    transition: color .4s;
}
.hiw-step.is-done .hiw-step-num { color: var(--hiw-brand); }
.hiw-step.is-current .hiw-step-num { color: var(--hiw-coral); }
.hiw-step h3 { font-size: 1.5rem; font-weight: 600; line-height: 1.2; margin: 14px 0 10px; }
.hiw-step p { color: var(--hiw-muted); font-size: 1.02rem; line-height: 1.65; max-width: 44ch; }
.hiw-step .hiw-after {
    margin-top: 18px;
    padding-left: 14px;
    border-left: 2px solid var(--hiw-line);
    font-size: 0.95rem;
}

/* Without WebGL (or before it loads on very old browsers): steps alone. */
.hiw-no3d .hiw-story { grid-template-columns: minmax(0, 1fr); }
.hiw-no3d .hiw-stage { display: none; }
.hiw-no3d .hiw-step { min-height: 0; }
.hiw-no3d .hiw-step-num { color: var(--hiw-brand); }

/* ── Checklist ── */
.hiw-check {
    display: grid;
    grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
    gap: 32px 56px;
    margin-top: 24px;
    padding: 40px;
    border-radius: 28px;
    background: var(--hiw-surface);
    border: 1px solid var(--hiw-line);
}
.hiw-check h2 { font-size: 1.6rem; font-weight: 700; line-height: 1.15; margin: 0 0 10px; }
.hiw-check-intro > p { color: var(--hiw-muted); line-height: 1.6; }
.hiw-check .hiw-urgent {
    margin-top: 24px;
    padding: 14px 16px;
    border-radius: 14px;
    background: var(--hiw-paper);
    color: var(--hiw-ink);
    font-size: 0.92rem;
}

.hiw-checklist { list-style: none; margin: 0; padding: 0; }
.hiw-checklist li + li { border-top: 1px solid var(--hiw-line); }
.hiw-checklist label {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    padding: 14px 0;
    cursor: pointer;
    line-height: 1.5;
}
.hiw-checklist input {
    appearance: none;
    -webkit-appearance: none;
    flex: 0 0 auto;
    width: 22px;
    height: 22px;
    margin: 1px 0 0;
    border-radius: 7px;
    border: 1.5px solid var(--hiw-line);
    background: var(--hiw-surface) center / 14px no-repeat;
    cursor: pointer;
    transition: background-color .2s, border-color .2s;
}
.hiw-checklist input:hover { border-color: var(--hiw-brand); }
.hiw-checklist input:checked {
    background-color: var(--hiw-brand);
    border-color: var(--hiw-brand);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='white' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3.5 8.5l3 3 6-7'/%3E%3C/svg%3E");
}
.hiw-checklist input:checked + span { color: var(--hiw-muted); }
.hiw-checklist span { transition: color .2s; }

.hiw-pin:focus-visible,
.hiw-checklist input:focus-visible {
    outline: 2px solid var(--hiw-brand);
    outline-offset: 2px;
}

/* ── Phone and tablet: stage pinned at the top, steps scroll under it ── */
@media (max-width: 899px) {
    .hiw { padding: 40px 16px 72px; }
    /* The pinned stage is too short for the end labels: the steps say it. */
    .hiw-has3d .hiw-tag { visibility: hidden; }
    .hiw-story { grid-template-columns: minmax(0, 1fr); gap: 0; }
    .hiw-stage {
        top: 76px;
        z-index: 2;
        height: 230px;
        border-radius: 22px;
        box-shadow: 0 12px 24px -18px rgba(22, 33, 58, 0.35);
    }
    .hiw-step { min-height: 48vh; }
    .hiw-step-num { font-size: 3rem; }
    .hiw-steps { padding-bottom: 8vh; }
    .hiw-check { grid-template-columns: minmax(0, 1fr); padding: 28px 22px; }
}

@media (prefers-reduced-motion: reduce) {
    .hiw-pin, .hiw-step-num, .hiw-checklist input, .hiw-checklist span { transition: none; }
}