/* Le parcours invité (AJUST-25, #984) — ce qui n'existe pas déjà dans tunnel.css / quiz.css : les cinq
   prénoms, la carte d'une présentation, la vidéo de remerciement, les étapes de l'entrée. Rien que des
   jetons : changer les 5 couleurs d'un réseau recolore le parcours aussi. */

.guest-hero {
    font-size: 2.6rem;
    line-height: 1;
    margin: .6rem 0 .8rem;
}

/* La sortie « boutique » : l'accroche au-dessus du titre, le nom du site sous le bouton. */
.guest-shop-lead {
    margin: 0 0 .35rem;
    font-size: .95rem;
    font-weight: 700;
    white-space: nowrap;
    color: var(--brand-accent);
}

.guest-shop-site {
    font-size: .92rem;
    color: var(--brand-muted);
}

/* Les conditions de l'offre : en petit, sous le bouton — lisibles, jamais sous 12 px (AJUST-06). */
.guest-shop-terms {
    margin: .9rem 0 0;
    font-size: .86rem;
    line-height: 1.5;
    color: var(--brand-muted);
}

/* Les quatre étapes annoncées à l'entrée : la liste numérotée du tunnel (`.tunnel-next`), en plus léger.
   Toute la largeur de la colonne et un corps un peu plus petit : une étape tient sur une ligne, même à
   390 px, sans toucher aux phrases (retour François, recette #984). */
.guest-stages {
    list-style: none;
    counter-reset: stage;
    padding: 0;
    margin: 0 0 1.2rem;
    text-align: left;
}

.guest-stages li {
    counter-increment: stage;
    display: flex;
    align-items: center;
    gap: .6rem;
    padding: .35rem 0;
    font-size: .92rem;
    white-space: nowrap;
}

.guest-stages li::before {
    content: counter(stage);
    flex: 0 0 1.6rem;
    height: 1.6rem;
    border-radius: 50%;
    background: var(--brand-surface-soft);
    color: var(--brand-accent);
    font-weight: 800;
    font-size: .8rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

/* ── Les cinq prénoms ──────────────────────────────────────────────────────── */

.guest-names {
    display: grid;
    gap: .55rem;
}

.guest-name {
    display: flex;
    align-items: center;
    gap: .6rem;
    margin: 0;
}

.guest-name-index {
    flex: 0 0 1.6rem;
    height: 1.6rem;
    border-radius: 50%;
    background: var(--brand-surface-soft);
    color: var(--brand-accent);
    font-weight: 800;
    font-size: .8rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.guest-name .form-control {
    font-size: 1rem;
    min-height: 2.9rem;
}

.guest-error {
    color: var(--brand-danger);
    font-weight: 600;
    font-size: .92rem;
    margin: 0 0 .4rem;
}

/* Les prénoms rendus à la fin : une carte douce, une seule phrase. */
.guest-names-back {
    margin: 1.2rem auto 0;
    padding: .8rem 1rem;
    border-radius: 14px;
    background: var(--brand-surface-soft);
    font-size: .92rem;
}

/* ── Une présentation proposée : le dessin des créneaux (`.slot-btn`), avec le bouton « Je viens » ─── */

.guest-event {
    display: grid;
    grid-template-columns: 1fr auto;
    grid-template-areas: "when button" "where button";
    align-items: center;
    column-gap: .8rem;
    row-gap: .15rem;
    padding: .8rem 1rem;
    border-radius: 14px;
    background: var(--brand-surface);
    border: 1px solid var(--brand-line);
}

.guest-event-when {
    grid-area: when;
    font-weight: 700;
}

.guest-event-where {
    grid-area: where;
    font-size: .92rem;
    color: var(--brand-muted);
}

.guest-event .btn {
    grid-area: button;
    white-space: nowrap;
}

/* ── La vidéo de remerciement ────────────────────────────────────────────── */

.guest-video {
    display: block;
    width: 100%;
    max-height: 60vh;
    border-radius: 14px;
    background: var(--brand-secondary);
    margin: 0 0 1rem;
}

.guest-video-preview {
    max-width: 28rem;
}