/* Heop — la ligne de creneau : /sortir/ ET les onglets de l'accueil.
 *
 * Elle vivait dans listing.css, la feuille des pages de liste, que l'accueil
 * ne charge pas. Les onglets « Sortir maintenant » et « Experiences » rendent
 * la MEME ligne (sortir_creneau.html) : la copier dans une feuille de
 * l'accueil aurait fait deux lignes qui divergent. Elle a donc sa feuille,
 * chargee par les deux surfaces (styles.html, drapeau `sortir`).
 */
/* =====================================================================
 * /sortir/ — l agenda des sorties. Le temps d abord : le bloc « moins de
 * 2 heures » ouvre la page avec le liseret du geste ; les jours suivent.
 * ===================================================================== */
.sortir-bloc { margin-top: 18px; }

.sortir-bloc__titre {
    display: flex;
    align-items: baseline;
    gap: 8px;
    margin: 0 0 8px;
    color: var(--hp-green, #245A3B);
    font-size: 1.05rem;
}

.sortir-bloc__titre small {
    color: var(--hp-muted, #6E6252);
    font-size: .78rem;
    font-weight: 400;
}

.sortir-liste {
    display: grid;
    gap: 8px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.sortir-creneau {
    display: grid;
    grid-template-columns: 64px minmax(0, 1fr) auto;
    gap: 10px;
    align-items: center;
    padding: 10px 12px;
    border: 1px solid var(--hp-border-strong, #DFD4C3);
    border-radius: 14px;
    background: var(--hp-surface, #FFFDF7);
}

.sortir-creneau--urgent {
    border-inline-start: 4px solid var(--hp-orange, #C86138);
}

.sortir-creneau--complet { opacity: .62; }

.sortir-creneau__quand strong {
    display: block;
    font-variant-numeric: tabular-nums;
    color: var(--hp-green, #245A3B);
}

.sortir-creneau__pastille {
    display: inline-block;
    padding: 1px 7px;
    border-radius: 999px;
    background: rgba(200, 97, 56, .12);
    color: var(--hp-orange, #C86138);
    font-size: .66rem;
    font-weight: 700;
    text-transform: uppercase;
}

.sortir-creneau__quoi { min-width: 0; }
.sortir-creneau__quoi strong { display: block; }
.sortir-creneau__quoi small {
    display: block;
    color: var(--hp-muted, #6E6252);
    font-size: .78rem;
}

.sortir-creneau__geste {
    display: grid;
    justify-items: end;
    gap: 4px;
}

.sortir-creneau__prix {
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}

.sortir-creneau__etat {
    color: var(--hp-muted, #6E6252);
    font-size: .8rem;
    font-weight: 700;
}