:root {
    --bg: #F6F5FB;
    --soft: #F6F5FB;
    --ink: #34324A;
    --peach: #F4B89A;
    --sky: #B9D0EE;
    --card: #FFFFFF;
    --muted: #5B5970;
    --line: #8B89A3;
    --track: #E2DFF0;
    --peach-shadow: #D9937A;
    --sky-bg: #EEF3FA;
    --peach-bg: #FDEFE7;
    --disabled: #ECEAF6;
    --dot: #C9C6DC;
    --gutter: 24px;
    --radius: 20px;
}

*, *::before, *::after { box-sizing: border-box; }

/* The page colour is painted by body itself, not propagated to the canvas: the Hiro videos blend
   with it (mix-blend-mode), and nothing blends with the canvas. */
html { background: var(--bg); }

body {
    margin: 0;
    min-height: 100vh;
    background: var(--bg);
    color: var(--ink);
    font-family: 'Quicksand', system-ui, sans-serif;
    font-size: 1rem;
    font-weight: 500;
    line-height: 1.5;
}

body.theme-sky { --bg: var(--sky-bg); }
body.theme-peach { --bg: var(--peach-bg); }

a { color: var(--ink); }
a:hover { color: #1f1d30; }

:focus-visible { outline: 3px solid var(--ink); outline-offset: 3px; }

h1, h2, p, ul, dl, dd, fieldset { margin: 0; }

[hidden] { display: none !important; }

.visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
}

/* ---------- Layout: one column, sticky call to action ---------- */

.app {
    max-width: 480px;
    margin: 0 auto;
}

.flash { margin: 12px var(--gutter) 0; padding: 12px 16px; background: var(--sky); border-radius: var(--radius); font-weight: 600; }

.screen {
    display: flex;
    flex-direction: column;
    gap: 12px;
    min-height: 100dvh;
    padding: 22px var(--gutter) 0;
}

.screen--login, .screen--done, .theme-sky .screen { padding-top: 40px; }

.screen__main {
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.screen__main--center { align-items: center; justify-content: center; text-align: center; }

.screen__actions {
    position: sticky;
    bottom: 0;
    z-index: 2;
    display: flex;
    flex-direction: column;
    gap: 4px;
    margin: 0 calc(-1 * var(--gutter));
    padding: 12px var(--gutter) 28px;
    background: linear-gradient(to bottom, transparent, var(--bg) 12px);
}

/* Desktop: a full-height screen leaves the button far below the content. Center the column
   instead, so the button follows what it answers. Long screens still scroll with the sticky
   button; the conversation keeps its full height, like any chat. */
@media (min-width: 768px) {
    .app {
        display: flex;
        flex-direction: column;
        justify-content: center;
        min-height: 100dvh;
        padding: 48px 0;
    }

    .app:has(.conversation) { display: block; padding: 0; }
    .screen:not(.conversation) { min-height: 0; }
    .screen:not(.conversation) .screen__main { flex-grow: 0; }
    .screen:not(.conversation) .screen__actions { padding-top: 20px; }
}

.screen__footnote { padding-bottom: 32px; font-size: 15px; font-weight: 600; line-height: 1.45; text-align: center; }

/* ---------- Steps ---------- */

.steps { display: flex; flex-direction: column; gap: 8px; }
.steps__bar { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 6px; }
.steps__segment { height: 8px; border-radius: 999px; background: var(--track); }
.steps__segment[style] { background: linear-gradient(90deg, var(--peach) var(--fill), var(--track) var(--fill)); }
.steps__segment--done { background: var(--peach); }
.steps__text { font-size: 13px; font-weight: 700; color: var(--muted); }

/* ---------- Hiro ---------- */

.hiro__media {
    display: block;
    flex-shrink: 0;
    width: var(--hiro-size, 220px);
    min-width: var(--hiro-size, 220px);
    height: var(--hiro-size, 220px);
    object-fit: contain;
}

/* MP4 has no alpha: the video's own background becomes a deliberate soft card. */
/* The videos have an opaque, near-white background: brightening it to pure white, then multiplying,
   lets the page colour (sky, peach, lavender) show through instead of a square around Hiro. */
video.hiro__media { object-fit: cover; filter: brightness(1.04); mix-blend-mode: multiply; }

.hiro--hero { display: flex; flex-direction: column; align-items: center; gap: 12px; text-align: center; }
.hiro--hero .hiro__bubble { display: flex; flex-direction: column; align-items: center; gap: 12px; }
.hiro--hero .hiro__title { font-size: 28px; font-weight: 700; line-height: 1.25; }
.hiro--hero .hiro__message { max-width: 300px; font-size: 17px; line-height: 1.45; }
.screen--login .hiro__title { font-size: 32px; }
.screen--done .hiro__title { font-size: 34px; line-height: 1.15; }
.theme-sky .hiro--hero .hiro__title { font-size: 24px; }

.hiro--speaks { display: flex; align-items: flex-end; gap: 6px; }
.hiro--speaks .hiro__bubble {
    margin-bottom: 24px;
    padding: 14px 16px;
    background: var(--card);
    border-radius: 22px 22px 22px 6px;
    box-shadow: 0 4px 14px rgb(52 50 74 / 7%);
}
.hiro__kicker { margin: 0 0 4px; font-size: 14px; font-weight: 700; color: var(--muted); }
.hiro--speaks .hiro__title { font-size: 19px; font-weight: 700; line-height: 1.3; }
.hiro--speaks .hiro__message { font-size: 16px; font-weight: 700; line-height: 1.35; }

.hiro--breathing { animation: hiro-breathe 3.2s ease-in-out infinite; }

@keyframes hiro-breathe {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-4px); }
}

@media (prefers-reduced-motion: reduce) {
    .hiro--breathing { animation: none; }
}

/* ---------- Buttons ---------- */

.btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    min-height: 60px;
    padding: 18px;
    border: 0;
    border-radius: 20px;
    background: var(--peach);
    color: var(--ink);
    box-shadow: 0 4px 0 var(--peach-shadow);
    font: inherit;
    font-size: 19px;
    font-weight: 700;
    line-height: 1.2;
    text-align: center;
    text-decoration: none;
    cursor: pointer;
}

.btn:hover { color: var(--ink); }
.btn:active:not(:disabled) { transform: translateY(4px); box-shadow: 0 0 0 transparent; }
.btn:disabled { background: var(--disabled); color: var(--muted); box-shadow: none; cursor: default; }

/* Sending: stays peach (a grey button reads as broken) while Hiro's dots hop. */
.btn--busy:disabled { background: var(--peach); color: var(--ink); box-shadow: 0 4px 0 var(--peach-shadow); cursor: progress; }
.busy-dots { display: inline-flex; gap: 5px; margin-left: 10px; }
.busy-dots span { width: 7px; height: 7px; border-radius: 999px; background: currentColor; animation: busy-hop 1s ease-in-out infinite; }
.busy-dots span:nth-child(2) { animation-delay: 0.15s; }
.busy-dots span:nth-child(3) { animation-delay: 0.3s; }

@keyframes busy-hop {
    0%, 60%, 100% { transform: translateY(0); opacity: 0.45; }
    30% { transform: translateY(-6px); opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
    .busy-dots span { animation: none; opacity: 1; }
}

.btn--secondary { background: var(--card); box-shadow: 0 4px 0 var(--track); }
.btn--dark, .btn--dark:hover { background: var(--ink); color: #FFFFFF; box-shadow: none; }
.btn--small { min-height: 52px; margin-top: 4px; padding: 12px; font-size: 17px; }

.btn-pair { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.btn-pair .btn { padding: 18px 0; font-size: 18px; }

.btn-link {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    min-height: 44px;
    padding: 12px;
    border: 0;
    background: none;
    color: var(--ink);
    font: inherit;
    font-size: 15px;
    font-weight: 600;
    text-decoration: underline;
    cursor: pointer;
}

.btn-link--above { order: -1; }
.btn-link--small { font-size: 14px; color: var(--muted); }

/* ---------- Fields ---------- */

.fields { display: flex; flex-direction: column; gap: 12px; }
.screen__main.fields { gap: 8px; }

.field-label { margin-top: 4px; font-size: 15px; font-weight: 700; }
.field-label small { font-weight: 500; color: var(--muted); }

input[type='text'],
input[type='email'],
input[type='password'],
input[type='number'],
input[type='url'] {
    width: 100%;
    padding: 18px;
    border: 2px solid var(--line);
    border-radius: 18px;
    background: var(--card);
    color: var(--ink);
    font: inherit;
    font-size: 18px;
}

.check { display: flex; align-items: center; gap: 10px; min-height: 44px; font-size: 15px; font-weight: 600; cursor: pointer; }
.check input { width: 20px; height: 20px; accent-color: var(--ink); }

[role='alert'] {
    padding: 12px 16px;
    border-radius: 16px;
    background: var(--peach-bg);
    border: 2px solid var(--peach);
    font-weight: 600;
}

.big-input { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 24px 0; }
.big-input input { max-width: 220px; font-size: 40px; font-weight: 700; text-align: center; }
.big-input__unit { font-size: 17px; font-weight: 700; color: var(--muted); }

/* ---------- Tiles (styled native checkboxes and radios) ---------- */

.tiles { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; align-content: start; padding: 0; border: 0; }
.tiles--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.tiles--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }

.tile {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 72px;
    padding: 16px 10px;
    border: 3px solid var(--card);
    border-radius: 20px;
    background: var(--card);
    font-size: 16px;
    font-weight: 700;
    line-height: 1.3;
    text-align: center;
    cursor: pointer;
}

.tile input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.tile:has(input:checked) { border-color: var(--ink); }
.tile:has(input:checked) > span::before { content: '✓ '; }
.tile:has(input:focus-visible) { outline: 3px solid var(--ink); outline-offset: 3px; }

/* « Autre » opens a free field for what it is. */
.other-field { display: none; flex-direction: column; gap: 8px; }
.tiles:has(input[value="Autre"]:checked) + .other-field { display: flex; }

/* Four day tiles per row on a phone: keep « ✓ mer. » on one line so every tile has the same height. */
.tile--day { padding: 16px 4px; white-space: nowrap; }

.tile--duration { flex-direction: column; gap: 2px; min-height: 96px; padding: 18px 0; }
.tile--duration strong { font-size: 24px; line-height: 1.2; }
.tile--duration span { font-size: 13px; }
.tile--duration:has(input:checked) > span::before { content: none; }

/* ---------- Onboarding: candidates ---------- */

.candidates { justify-content: center; }
.candidate {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 20px;
    border-radius: 24px;
    background: var(--card);
    font-size: 15px;
}
.candidate__name { font-size: 19px; }

/* ---------- Waiting ---------- */

.hero { gap: 18px; }
.hero__title { font-size: 28px; font-weight: 700; line-height: 1.25; }
.hero__text { max-width: 290px; font-size: 16px; line-height: 1.45; }

.analysis-bar {
    width: 100%;
    height: 14px;
    border: 0;
    border-radius: 999px;
    background: var(--card);
    overflow: hidden;
    appearance: none;
}
.analysis-bar::-webkit-progress-bar { background: var(--card); border-radius: 999px; }
.analysis-bar::-webkit-progress-value { background: var(--peach); border-radius: 999px; transition: width 0.4s; }
.analysis-bar::-moz-progress-bar { background: var(--peach); border-radius: 999px; }

/* ---------- Result: claims, sources, gaps ---------- */

.claims { display: flex; flex-direction: column; gap: 12px; padding: 0; list-style: none; }
.claim { display: flex; flex-direction: column; gap: 8px; }
.claim > p { font-size: 16px; line-height: 1.5; }

.sources { display: flex; flex-wrap: wrap; gap: 6px; overflow-wrap: anywhere; }
.pill {
    display: inline-block;
    padding: 5px 10px;
    border-radius: 999px;
    background: var(--sky-bg);
    font-size: 13px;
    font-weight: 600;
    line-height: 1.4;
}
.pill--peach { align-self: flex-start; background: var(--peach); font-size: 12px; font-weight: 700; }

.gap-list { display: flex; flex-direction: column; gap: 10px; padding-left: 1.2em; font-size: 16px; line-height: 1.5; }

/* ---------- Commitment ---------- */

.stepper {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 12px 18px;
    border-radius: 22px;
    background: var(--card);
    font-size: 15px;
    font-weight: 700;
}
.stepper__controls { display: flex; align-items: center; gap: 10px; }
.stepper__value { display: flex; align-items: center; gap: 4px; font-size: 18px; }
.stepper__value input[type='number'] {
    width: 4.2em;
    padding: 6px 8px;
    border-radius: 12px;
    font-size: 18px;
    font-weight: 700;
    text-align: center;
    appearance: textfield;
}
.stepper__value input::-webkit-inner-spin-button,
.stepper__value input::-webkit-outer-spin-button { margin: 0; appearance: none; }
.stepper__btn {
    width: 44px;
    height: 44px;
    border: 0;
    border-radius: 50%;
    background: var(--soft);
    color: var(--ink);
    font: inherit;
    font-size: 22px;
    font-weight: 700;
    cursor: pointer;
}

.plan-recap {
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 16px 18px;
    border-radius: 22px;
    background: var(--card);
    font-size: 15px;
}
.plan-recap h2 { font-size: 15px; font-weight: 700; }
.plan-recap ul { display: flex; flex-direction: column; gap: 8px; padding: 0; list-style: none; }
.plan-recap__note { font-size: 13px; font-weight: 700; color: var(--muted); }

/* ---------- Done ---------- */

.done-leads { display: flex; flex-direction: column; gap: 4px; padding: 0; list-style: none; font-size: 15px; font-weight: 700; }

.stage-card { display: flex; flex-direction: column; gap: 8px; padding: 16px; background: var(--card); border-radius: 20px; }
.stage-card h2 { margin: 0; font-size: 18px; }
.stage-card__list { display: flex; flex-direction: column; gap: 8px; margin: 0; padding-left: 24px; }
.stage-card__list input[type="text"] { width: 100%; min-height: 44px; padding: 8px 12px; border: 2px solid var(--track); border-radius: 12px; font: inherit; }
.stage-card__final { color: var(--ink); }

/* ---------- Conversation ---------- */

.conversation__list { gap: 10px; padding-bottom: 8px; }
.conversation__hiro .hiro--speaks { align-items: flex-start; }
.conversation__hiro .hiro--speaks .hiro__bubble { margin-bottom: 0; }
.conversation__hiro .hiro--speaks .hiro__message { font-weight: 500; white-space: pre-line; overflow-wrap: anywhere; }
.bubble {
    max-width: 85%;
    padding: 12px 16px;
    font-size: 16px;
    line-height: 1.4;
    white-space: pre-line;
    overflow-wrap: anywhere;
}
.bubble--her { align-self: flex-end; background: var(--peach-bg); border-radius: 22px 22px 6px 22px; }
.conversation__thinking { padding: 0 0 4px 54px; font-size: 15px; font-weight: 700; color: var(--muted); }

.change-card { display: flex; flex-direction: column; gap: 8px; margin-left: 54px; padding: 14px 16px; background: var(--card); border: 2px solid var(--track); border-radius: 20px; }
.change-card__summary { font-weight: 700; overflow-wrap: anywhere; }
.change-card__details { display: flex; flex-wrap: wrap; gap: 4px 12px; font-size: 14px; color: var(--muted); overflow-wrap: anywhere; }
.change-card__status { font-size: 15px; font-weight: 700; color: var(--muted); }
.change-card .btn-pair .btn { width: 100%; padding: 12px 0; font-size: 16px; }

.composer__row { display: flex; align-items: flex-end; gap: 8px; }
.composer textarea {
    flex-grow: 1;
    min-width: 0;
    min-height: 52px;
    max-height: 40dvh;
    padding: 12px 14px;
    border: 2px solid var(--track);
    border-radius: 16px;
    background: var(--card);
    color: var(--ink);
    font: inherit;
    resize: vertical;
}
.composer__send { flex-shrink: 0; width: auto; min-height: 52px; padding: 12px 16px; font-size: 16px; }
.composer__error { font-size: 15px; font-weight: 700; }

/* ---------- Stages waiting ---------- */

.stages-slow { display: flex; flex-direction: column; gap: 8px; }

/* ---------- Today ---------- */

.today .hiro--speaks .hiro__bubble { min-width: 0; overflow-wrap: anywhere; }
.today-late .hiro--speaks { align-items: center; }
.today-late .hiro--speaks .hiro__bubble { margin-bottom: 0; }
.objective-bar { display: flex; align-items: center; gap: 12px; padding: 12px 16px; background: var(--card); border-radius: var(--radius); }
.objective-bar__hiro { flex: none; width: 48px; height: 48px; }
.objective-bar__text { display: flex; flex: 1; flex-direction: column; gap: 4px; min-width: 0; overflow-wrap: anywhere; }
.objective-bar__goal { font-size: 15px; font-weight: 700; }
.objective-bar__status { font-size: 14px; color: var(--muted); }
.objective-bar__track { height: 8px; background: rgba(0, 0, 0, 0.1); border-radius: 4px; overflow: hidden; }
.objective-bar__fill { height: 100%; background: var(--ink); border-radius: 4px; }
.today-celebration, .welcome-back, .review-celebration { display: flex; justify-content: center; }
.review-banner { display: flex; flex-direction: column; align-items: center; gap: 12px; min-width: 0; padding: 12px; background: var(--card); border-radius: var(--radius); }
.review-banner .hiro__bubble { min-width: 0; overflow-wrap: anywhere; }
.review-banner--end { padding: 16px; background: var(--peach-bg); border-radius: var(--radius); }
.end-review { min-width: 0; overflow-wrap: anywhere; }
.today-celebration .hiro__message { overflow-wrap: anywhere; }

.today-action { display: flex; flex-direction: column; gap: 8px; min-width: 0; padding: 16px; background: var(--card); border-radius: var(--radius); overflow-wrap: anywhere; }
/* The action Hiro puts forward; the others can be done in any order. Restyled in the redesign. */
.today-action--next { box-shadow: 0 0 0 2px var(--peach); }
.today-action__buttons { display: flex; flex-direction: column; gap: 4px; margin-top: 4px; }
.today-action__piste { font-size: 14px; font-weight: 700; color: var(--muted); }
.today-action__title { font-size: 21px; line-height: 1.3; }
.today-action__minutes { font-size: 15px; font-weight: 700; }
.today-action__why { font-size: 16px; line-height: 1.45; }

.today-contact { display: flex; flex-wrap: wrap; gap: 4px 12px; font-size: 14px; color: var(--muted); }
.today-contact__name { flex-basis: 100%; font-size: 16px; font-weight: 700; color: var(--ink); }

.today-material { display: flex; flex-direction: column; gap: 4px; }
.today-material__text {
    padding: 12px 14px;
    border: 2px solid var(--track);
    border-radius: 16px;
    background: var(--soft);
    font-size: 15px;
    line-height: 1.45;
    white-space: pre-wrap;
    overflow-wrap: anywhere;
    user-select: text;
}
.today-material__copy { display: flex; flex-direction: column; align-items: stretch; gap: 4px; }
.today-material__mail { text-align: center; }
.today-material__copied { min-height: 1.4em; font-size: 14px; font-weight: 700; text-align: center; color: var(--muted); }
.conversation__bar { display: flex; justify-content: space-between; gap: 16px; }
.conversation__bar-link { width: auto; min-height: 32px; padding: 0; }

.hint { margin: 0 0 16px; font-size: 15px; line-height: 1.5; color: var(--muted); }