/* parcours.css — Les étapes d'un projet, de l'idée aux ventes.
   Partagé par Flair (fin du verdict) et Sonar (tête de la veille). Structure
   seulement : le dessin final revient à Alex. Rien de coloré ici — le chemin
   se lit par la forme (coche, numéro, grisé), pas par une couleur qu'un
   thème sombre ou un daltonien perdrait. */

.pc-parcours {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem 1rem;
    margin: 0 0 1.1rem;
    padding: 0.7rem 0.9rem;
    border: 1px solid var(--mr-border);
    border-radius: 12px;
    background: var(--mr-surface);
}

.pc-projet {
    font-size: 0.8rem;
    font-weight: 650;
    color: var(--mr-text-strong);
}

.pc-etapes {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.pc-etapes--mini { margin: 0 0 0.9rem; }

.pc-etape > a,
.pc-etape:not(:has(> a)) {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.2rem 0.6rem 0.2rem 0.25rem;
    border-radius: 999px;
    font-size: 0.78rem;
    color: var(--mr-text-muted);
    text-decoration: none;
}

.pc-etape > a:hover { background: var(--mr-gris-voile, rgba(127, 127, 127, 0.12)); }

.pc-puce {
    display: inline-grid;
    place-items: center;
    width: 1.35rem;
    height: 1.35rem;
    border: 1px solid var(--mr-border-strong);
    border-radius: 50%;
    font-size: 0.7rem;
    font-weight: 700;
}

.pc-etape--fait .pc-puce {
    border-color: var(--mr-text-strong);
    background: var(--mr-text-strong);
    color: var(--mr-surface);
}

.pc-etape--fait .pc-nom { color: var(--mr-text); }

/* L'étape à faire maintenant : la seule en gras, la seule qu'on doit voir. */
.pc-etape--suivante .pc-puce { border: 2px solid var(--mr-text-strong); color: var(--mr-text-strong); }
.pc-etape--suivante .pc-nom { color: var(--mr-text-strong); font-weight: 650; }

.pc-etape--bientot { opacity: 0.55; }

.pc-bientot {
    font-size: 0.66rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.pc-suivante {
    margin-left: auto;
    font-size: 0.8rem;
    font-weight: 650;
    color: var(--mr-text-strong);
    text-decoration: underline;
    text-underline-offset: 3px;
}

/* ── Fin du verdict de Flair ─────────────────────────────────────────── */
.pc-attente {
    margin: 0.7rem 0 0;
    font-size: 0.8rem;
    line-height: 1.5;
    color: var(--mr-text-muted);
}

.pc-seul { margin-top: 0.9rem; }

.pc-seul > summary {
    cursor: pointer;
    font-size: 0.78rem;
    color: var(--mr-text-muted);
}

.pc-seul[open] > summary { margin-bottom: 0.7rem; }

.pc-bouton-second {
    color: var(--mr-text-strong);
    background: transparent;
}

#chContinuer[disabled] { cursor: progress; opacity: 0.7; }

@media (max-width: 640px) {
    .pc-suivante { margin-left: 0; }
    .pc-nom { font-size: 0.74rem; }
}

/* ── Sonar : choisir quelles veilles on maintient ────────────────────── */
/* Le menu ••• porte deux actions : la liste se positionne, plus chaque
   formulaire (sonar-bord.css les posait en absolu, donc l'un sur l'autre). */
.sb-menu .sb-menu-liste {
    position: absolute; right: 0; top: calc(100% + 6px); z-index: 5;
    display: grid; gap: 2px; padding: 6px;
    border: 1px solid var(--sb-trait, var(--mr-border)); border-radius: 10px;
    background: var(--sb-carte, var(--mr-surface)); box-shadow: var(--mr-shadow);
}
.sb-menu .sb-menu-liste form { position: static; padding: 0; border: 0; box-shadow: none; background: none; }
.sb-menu-action {
    width: 100%; white-space: nowrap; padding: 8px 12px; border: 0; border-radius: 6px;
    background: none; color: var(--mr-text); font: inherit; font-size: .85rem; text-align: left; cursor: pointer;
}
.sb-menu-action:hover { background: var(--mr-gris-voile, rgba(127, 127, 127, 0.12)); }

.pc-pause { display: flex; flex-wrap: wrap; align-items: center; gap: 0.6rem 1rem; }
.pc-pause p { margin: 0; flex: 1 1 20rem; }

/* Le choix proposé dans Flair quand deux veilles tournent déjà. */
.pc-choix { display: grid; gap: 0.4rem; margin: 0.7rem 0 0; padding: 0; list-style: none; }
.pc-choix button {
    width: 100%; padding: 0.55rem 0.8rem; text-align: left; cursor: pointer;
    font: inherit; font-size: 0.82rem; color: var(--mr-text);
    background: var(--mr-surface); border: 1px solid var(--mr-border-strong); border-radius: 8px;
}
.pc-choix button:hover { border-color: var(--mr-text-strong); }