/**
 * Page Location et essais (gabarit page-location.php). Fichier identique sur ride&co et Giant.
 * Mêmes formes que le header et la barre des catégories de l'accueil (coins arrondis, barre sombre).
 * Compatible Chrome 91 (écrans des magasins) : pas de :has(), pas de svh, pas de color-mix.
 */

.loc {
    --loc-ink: #111;
    --loc-brand: #138a6e;
    --loc-brand-ink: #fff;
    --loc-bar: #111;
    --loc-mist: #f2f4f3;
    --loc-line: #e1e6e3;
    --loc-muted: #5b6360;
    --loc-pick: #e6f3ef;
    --loc-width: 85rem;
    --loc-side: 1rem;

    max-width: calc(var(--loc-width) + 2 * var(--loc-side));
    margin: 0 auto;
    padding: 0 var(--loc-side) 4rem;
    color: var(--loc-ink);
}

.loc--giant {
    --loc-ink: #0c0a3e;
    --loc-brand: #120A8F;
    --loc-bar: #120A8F;
    --loc-pick: #ebeafb;
    --loc-muted: #55546e;
}

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

/* L'ancien thème met une coche ou un numéro et un retrait sur tous les li de #main.site-main :
   retirés sur nos blocs, gardés dans le texte du bas (.loc-guide) */
#main.loc.site-main .loc-layout li,
#main.loc.site-main .loc-steps li {
    margin-bottom: 0;
    padding-left: 0;
    font-size: inherit;
    color: inherit;
}

#main.loc.site-main .loc-layout li::before {
    content: none;
    display: none;
}

.loc .loc-h2 {
    margin: 0 0 1rem;
    font-size: clamp(1.375rem, 2.2vw, 1.75rem);
    font-weight: 600;
    line-height: 1.2;
    letter-spacing: -0.01em;
    color: var(--loc-ink);
}

/* ─── Boutons ─────────────────────────────────────────────────────────── */

.loc .loc-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 2.875rem;
    padding: 0.625rem 1.375rem;
    font: inherit;
    font-size: 0.9375rem;
    font-weight: 600;
    color: var(--loc-ink);
    text-decoration: none;
    background: #fff;
    border: 1.5px solid var(--loc-ink);
    border-radius: 999px;
    cursor: pointer;
    transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}

.loc .loc-btn:hover {
    color: #fff;
    background: var(--loc-ink);
}

.loc .loc-btn--solid {
    color: var(--loc-brand-ink);
    background: var(--loc-brand);
    border-color: var(--loc-brand);
}

.loc .loc-btn--solid:hover {
    color: var(--loc-brand-ink);
    background: var(--loc-ink);
    border-color: var(--loc-ink);
}

.loc a:focus-visible,
.loc button:focus-visible {
    outline: 2px solid var(--loc-brand);
    outline-offset: 3px;
}

/* ─── Haut de page ────────────────────────────────────────────────────── */

.loc-hero {
    display: grid;
    grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
    gap: 2rem 3rem;
    align-items: center;
    padding: clamp(1rem, 4vw, 3rem) 0 clamp(2rem, 5vw, 3.5rem);
}

.loc-hero__fig {
    position: relative;
    margin: 0;
    background: var(--loc-mist);
    border-radius: 1.75rem;
}

.loc .loc-hero__fig img {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 4 / 3;
    padding: 1.5rem;
    object-fit: contain;
    mix-blend-mode: multiply;
}

/* Étiquette de prix accrochée au vélo, comme en magasin */
.loc-hero__tag {
    position: absolute;
    right: 1.25rem;
    bottom: 1.25rem;
    padding: 0.625rem 1rem;
    font-size: 0.9375rem;
    line-height: 1.3;
    color: #fff;
    background: var(--loc-bar);
    border-radius: 1rem;
}

.loc-hero__tag strong {
    display: block;
    font-size: 1.375rem;
}

.loc .loc-hero__title {
    max-width: 18ch;
    margin: 0 0 1.25rem;
    font-size: clamp(2.25rem, 5.5vw, 4.25rem);
    font-weight: 700;
    line-height: 1.02;
    letter-spacing: -0.035em;
    color: var(--loc-ink);
}

.loc-hero__lead {
    max-width: 38rem;
    margin: 0 0 1.75rem;
    font-size: 1.125rem;
    line-height: 1.6;
    color: var(--loc-muted);
}

.loc-hero__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    margin: 0;
}

/* ─── Étapes (vraie suite : on choisit, on vient, on décide) ─────────── */

.loc-steps {
    padding: 2rem 0 3rem;
    border-top: 1px solid var(--loc-line);
}

.loc .loc-steps__list {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 2rem;
    margin: 0;
    padding: 0;
    list-style: none;
    counter-reset: loc-step;
}

#main.loc.site-main .loc-steps__list li {
    counter-increment: loc-step;
}

#main.loc.site-main .loc-steps__list li::before {
    content: counter(loc-step);
    position: static;
    display: grid;
    place-items: center;
    width: 2.25rem;
    height: 2.25rem;
    margin-bottom: 0.875rem;
    font-size: 1rem;
    font-weight: 700;
    color: var(--loc-brand-ink);
    background: var(--loc-brand);
    border-radius: 50%;
}

.loc .loc-steps__list h3 {
    margin: 0 0 0.375rem;
    font-size: 1.0625rem;
    font-weight: 600;
    color: var(--loc-ink);
}

.loc .loc-steps__list p {
    margin: 0;
    line-height: 1.55;
    color: var(--loc-muted);
}

/* ─── Catalogue ───────────────────────────────────────────────────────── */

.loc-catalog {
    padding-top: 1rem;
    scroll-margin-top: calc(var(--rh-total-h, 7.5rem) + 1rem);
}

.loc-catalog__head {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: space-between;
    gap: 0.5rem 1rem;
}

.loc-catalog__count {
    margin: 0;
    color: var(--loc-muted);
}

/* Barre sombre, même forme que la barre des catégories de l'accueil */
.loc-bar {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 0.5rem;
    margin: 0 0 1.5rem;
    padding: 0.5rem;
    background: var(--loc-bar);
    border-radius: 1.5rem;
}

.loc-bar__group {
    display: flex;
    flex-wrap: wrap;
    gap: 0.25rem;
}

.loc .loc-chip {
    min-height: 2.5rem;
    padding: 0.5rem 1.125rem;
    font: inherit;
    font-size: 0.9375rem;
    font-weight: 500;
    color: #fff;
    background: transparent;
    border: 0;
    border-radius: 999px;
    cursor: pointer;
    transition: background-color 0.2s ease, color 0.2s ease;
}

.loc .loc-chip:hover {
    background: rgba(255, 255, 255, 0.12);
}

.loc .loc-chip.is-on {
    color: var(--loc-bar);
    background: #fff;
}

.loc .loc-chip:focus-visible {
    outline-color: #fff;
}

.loc .loc-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(15.5rem, 1fr));
    gap: 1.25rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.loc .loc-bike {
    display: flex;
    flex-direction: column;
    background: #fff;
    border: 1px solid var(--loc-line);
    border-radius: 1.25rem;
    overflow: hidden;
    transition: border-color 0.2s ease, background-color 0.2s ease;
}

.loc .loc-bike[hidden] {
    display: none;
}

.loc .loc-bike.is-picked {
    background: var(--loc-pick);
    border-color: var(--loc-brand);
}

.loc-bike__media {
    position: relative;
    aspect-ratio: 3 / 2;
    background: #fff;
}

.loc-bike__media a {
    display: block;
    height: 100%;
}

.loc .loc-bike__img {
    display: block;
    width: 100%;
    height: 100%;
    padding: 0.75rem;
    object-fit: contain;
}

.loc-bike__store {
    position: absolute;
    top: 0.75rem;
    left: 0.75rem;
    padding: 0.25rem 0.625rem;
    font-size: 0.8125rem;
    font-weight: 500;
    color: var(--loc-ink);
    background: var(--loc-mist);
    border-radius: 999px;
}

.loc-bike__body {
    display: flex;
    flex: 1;
    flex-direction: column;
    padding: 1rem 1.25rem 1.25rem;
    border-top: 1px solid var(--loc-line);
}

.loc .loc-bike__name {
    margin: 0;
    font-size: 1.1875rem;
    font-weight: 600;
    line-height: 1.25;
}

.loc .loc-bike__name a {
    color: var(--loc-ink);
    text-decoration: none;
}

.loc .loc-bike__name a:hover {
    text-decoration: underline;
}

.loc-bike__kind {
    margin: 0.25rem 0 0.75rem;
    font-size: 0.9375rem;
    color: var(--loc-muted);
}

.loc .loc-bike__specs {
    margin: 0 0 1rem;
    font-size: 0.875rem;
}

.loc-bike__specs div {
    display: flex;
    gap: 0.5rem;
    padding: 0.375rem 0;
    border-top: 1px dashed var(--loc-line);
}

.loc .loc-bike__specs dt {
    flex: 0 0 5.5rem;
    margin: 0;
    font-weight: 400;
    color: var(--loc-muted);
}

.loc .loc-bike__specs dd {
    margin: 0;
}

/* Le prix change avec la durée choisie dans la barre */
.loc-bike__price {
    margin: auto 0 1rem;
    color: var(--loc-muted);
}

.loc-bike__price strong {
    margin-right: 0.25rem;
    font-size: 1.75rem;
    font-weight: 700;
    letter-spacing: -0.02em;
    color: var(--loc-ink);
}

.loc-bike__price [hidden] {
    display: none;
}

.loc .loc-bike__add {
    width: 100%;
}

.loc .loc-bike__add[aria-pressed="true"] {
    color: var(--loc-brand-ink);
    background: var(--loc-brand);
    border-color: var(--loc-brand);
}

.loc-empty {
    padding: 2rem;
    text-align: center;
    background: var(--loc-mist);
    border-radius: 1.25rem;
}

/* ─── Conditions, assurance, magasins ─────────────────────────────────── */

.loc-info {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.25rem;
    margin-top: 4rem;
}

.loc-info__block:first-child {
    grid-column: 1 / -1;
}

.loc-info__block {
    padding: 1.5rem;
    background: var(--loc-mist);
    border-radius: 1.25rem;
}

.loc-info__block .loc-h2 {
    font-size: 1.25rem;
}

.loc-info__block p {
    margin: 0;
    line-height: 1.6;
}

.loc .loc-info__list,
.loc .loc-info__stores {
    margin: 0;
    padding: 0;
    list-style: none;
}

.loc .loc-info__list li,
.loc .loc-info__stores li {
    padding: 0.625rem 0;
    line-height: 1.55;
    border-top: 1px solid var(--loc-line);
}

.loc .loc-info__list li:first-child,
.loc .loc-info__stores li:first-child {
    padding-top: 0;
    border-top: 0;
}

.loc .loc-info__stores a {
    font-weight: 600;
    color: var(--loc-ink);
}

.loc-info__block--insure {
    color: #fff;
    background: var(--loc-bar);
}

.loc .loc-info__block--insure .loc-h2 {
    color: #fff;
}

/* ─── Réservation ─────────────────────────────────────────────────────── */

/* Le thème coupe le débordement horizontal avec overflow-x: hidden sur body et #page, ce qui
   empêche position: sticky. clip coupe pareil sans créer de zone de défilement (Chrome 90+). */
body.page-template-page-location,
body.page-template-page-location #page {
    overflow-x: clip;
}

/* Colonne principale (vélos, conditions) + demande de réservation toujours visible à droite */
.loc-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 25rem;
    gap: 2rem;
    align-items: start;
}

.loc-book {
    position: sticky;
    top: calc(var(--rh-total-h, 7.5rem) + 1rem);
    max-height: calc(100vh - var(--rh-total-h, 7.5rem) - 2rem);
    overflow-y: auto;
    overscroll-behavior: contain;
    padding: 1.5rem;
    background: #fff;
    border: 1px solid var(--loc-line);
    border-radius: 1.75rem;
    box-shadow: 0 20px 40px -28px rgba(0, 0, 0, 0.35);
    scroll-margin-top: calc(var(--rh-total-h, 7.5rem) + 1rem);
}

.loc-book .loc-h2 {
    font-size: 1.375rem;
}

.loc-book__note {
    margin: -0.5rem 0 1rem;
    font-size: 0.875rem;
    color: var(--loc-muted);
}

.loc-cart {
    margin-bottom: 1.25rem;
    padding: 0.875rem 1rem;
    background: var(--loc-mist);
    border: 1.5px solid transparent;
    border-radius: 1rem;
}

/* Bouton « Ma demande » en bas de l'écran, seulement quand la demande passe sous les vélos */
.loc .loc-fab {
    display: none;
}

.loc-cart.is-error {
    border-color: #c0392b;
}

.loc-cart__empty {
    margin: 0;
}

.loc-cart__empty[hidden] {
    display: none;
}

.loc .loc-cart__list {
    margin: 0;
    padding: 0;
    list-style: none;
}

.loc .loc-cart__item {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 0.25rem 0.75rem;
    align-items: center;
    padding: 0.75rem 0;
    border-top: 1px solid var(--loc-line);
}

.loc .loc-cart__item:first-child {
    padding-top: 0;
    border-top: 0;
}

.loc-cart__name {
    font-weight: 600;
}

.loc-cart__store {
    grid-column: 1;
    font-size: 0.875rem;
    color: var(--loc-muted);
}

.loc-cart__qty {
    grid-row: 1 / span 2;
    grid-column: 2;
    display: flex;
    align-items: center;
    gap: 0.25rem;
}

.loc .loc-cart__qty button,
.loc .loc-cart__remove {
    font: inherit;
    cursor: pointer;
}

.loc .loc-cart__qty button {
    width: 2rem;
    height: 2rem;
    padding: 0;
    font-size: 1.125rem;
    line-height: 1;
    color: var(--loc-ink);
    background: #fff;
    border: 1px solid var(--loc-line);
    border-radius: 50%;
}

.loc-cart__qty output {
    min-width: 1.5rem;
    font-weight: 600;
    text-align: center;
}

.loc .loc-cart__remove {
    grid-column: 1;
    justify-self: start;
    padding: 0;
    font-size: 0.875rem;
    color: var(--loc-muted);
    text-decoration: underline;
    background: none;
    border: 0;
}

/* Formulaire CF7 « location (nouvelle page) » */
.locf {
    display: grid;
    gap: 1.125rem;
}

.locf p {
    margin: 0;
}

/* Avec JavaScript, la liste de gauche remplace le champ texte (qui reste envoyé) */
.locf__bikes.is-js {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
}

.locf__label,
.locf__group legend {
    margin: 0 0 0.5rem;
    padding: 0;
    font-weight: 600;
}

.locf__group {
    margin: 0;
    padding: 0;
    border: 0;
}

.locf__row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.75rem;
}

.loc .locf__field {
    display: block;
    font-weight: 600;
}

.loc .locf__field br {
    display: none;
}

.loc .locf input[type="text"],
.loc .locf input[type="email"],
.loc .locf input[type="tel"],
.loc .locf input[type="date"],
.loc .locf textarea {
    width: 100%;
    margin-top: 0.375rem;
    padding: 0.75rem 0.875rem;
    font: inherit;
    font-weight: 400;
    color: var(--loc-ink);
    background: #fff;
    border: 1px solid #c9d0cc;
    border-radius: 0.75rem;
    box-shadow: none;
}

.loc .locf input:focus,
.loc .locf textarea:focus {
    border-color: var(--loc-brand);
    outline: 2px solid var(--loc-brand);
    outline-offset: 0;
}

/* Choix (magasin, durée) en pastilles */
.loc .locf .wpcf7-radio {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.loc .locf .wpcf7-radio .wpcf7-list-item {
    margin: 0;
}

.loc .locf .wpcf7-radio label {
    position: relative;
    display: block;
    cursor: pointer;
}

.loc .locf .wpcf7-radio input {
    position: absolute;
    opacity: 0;
}

.loc .locf .wpcf7-radio .wpcf7-list-item-label {
    display: block;
    padding: 0.5rem 1rem;
    font-weight: 500;
    background: #fff;
    border: 1.5px solid #c9d0cc;
    border-radius: 999px;
}

.loc .locf .wpcf7-radio input:checked + .wpcf7-list-item-label {
    color: var(--loc-brand-ink);
    background: var(--loc-brand);
    border-color: var(--loc-brand);
}

.loc .locf .wpcf7-radio input:focus-visible + .wpcf7-list-item-label {
    outline: 2px solid var(--loc-brand);
    outline-offset: 2px;
}

.locf__consent {
    font-size: 0.875rem;
    color: var(--loc-muted);
}

.loc .locf input.locf__submit {
    justify-self: start;
    min-height: 3rem;
    padding: 0.75rem 1.75rem;
    font: inherit;
    font-weight: 600;
    color: var(--loc-brand-ink);
    background: var(--loc-brand);
    border: 0;
    border-radius: 999px;
    cursor: pointer;
}

.loc .locf input.locf__submit:hover {
    background: var(--loc-ink);
}

/* ─── Guide (texte de la page) ────────────────────────────────────────── */

.loc-guide {
    max-width: 46rem;
    margin: 5rem auto 0;
    line-height: 1.7;
}

.loc-guide h2 {
    margin-top: 2.5rem;
    font-size: 1.5rem;
}

.loc-guide h3 {
    margin-top: 1.75rem;
    font-size: 1.1875rem;
}

/* ─── Tablette et mobile ──────────────────────────────────────────────── */

@media (max-width: 1100px) {
    .loc-layout {
        grid-template-columns: 1fr;
    }

    .loc-book {
        position: static;
        max-height: none;
        overflow: visible;
    }

    .loc .loc-fab {
        position: fixed;
        z-index: 50;
        right: 1rem;
        bottom: 1rem;
        display: inline-flex;
        align-items: center;
        gap: 0.375rem;
        min-height: 3rem;
        padding: 0.75rem 1.375rem;
        font-weight: 600;
        color: var(--loc-brand-ink);
        text-decoration: none;
        background: var(--loc-brand);
        border-radius: 999px;
        box-shadow: 0 12px 28px -10px rgba(0, 0, 0, 0.5);
    }
}

@media (max-width: 860px) {
    .loc-hero {
        grid-template-columns: 1fr;
    }

    .loc .loc-steps__list {
        grid-template-columns: 1fr;
        gap: 1.25rem;
    }

}

@media (max-width: 640px) {
    .loc {
        --loc-side: 0.75rem;
    }

    .loc-info {
        grid-template-columns: 1fr;
    }

    .locf__row {
        grid-template-columns: 1fr;
    }

    .loc-bar {
        border-radius: 1.25rem;
    }

    .loc .loc-chip {
        padding: 0.5rem 0.875rem;
    }
}

@media (prefers-reduced-motion: reduce) {
    .loc * {
        transition: none !important;
    }
}

/* Le thème grise les fieldset, limite la largeur des dates et affine les h3 de #main */
.loc .locf .locf__group {
    background: none;
}

.loc .locf input[type="date"] {
    max-width: none;
}

#main.loc .loc-bike__name,
#main.loc .loc-steps__list h3 {
    font-weight: 600;
}

/* ─── Module de réservation compact : tout visible sans défiler (écran de 900 px de haut et plus) ─── */
.loc-book {
    padding: 1.25rem 1.25rem 1.125rem;
}

.loc-book .loc-h2 {
    margin-bottom: 0.25rem;
    font-size: 1.25rem;
}

.loc-book .loc-book__note {
    margin: 0 0 0.75rem;
    font-size: 0.8125rem;
}

.loc-book .loc-cart {
    margin-bottom: 0.875rem;
    padding: 0.625rem 0.75rem;
    font-size: 0.875rem;
}

.loc .loc-book .loc-cart__item {
    grid-template-columns: 1fr auto auto;
    gap: 0 0.5rem;
    padding: 0.375rem 0;
}

.loc-book .loc-cart__name {
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.loc-book .loc-cart__store {
    grid-row: 2;
    font-size: 0.75rem;
}

.loc .loc-book .loc-cart__qty {
    grid-row: 1 / span 2;
}

.loc .loc-book .loc-cart__qty button {
    width: 1.625rem;
    height: 1.625rem;
    font-size: 1rem;
}

.loc .loc-book .loc-cart__remove {
    grid-row: 1 / span 2;
    grid-column: 3;
    width: 1.625rem;
    height: 1.625rem;
    font-size: 1.125rem;
    line-height: 1;
    text-decoration: none;
}

/* CF7 entoure chaque ligne d'un <p> : on le rend transparent pour garder deux champs par ligne */
.locf > p,
.locf__row > p,
.locf__step > p,
.locf__when > p {
    display: contents;
}

.loc-book .locf {
    gap: 0.625rem;
}

.loc-book .locf__row {
    gap: 0.5rem;
}

.loc .loc-book .locf__field,
.loc-book .locf__group legend {
    margin: 0;
    font-size: 0.8125rem;
    font-weight: 600;
}

.loc .loc-book .locf input[type="text"],
.loc .loc-book .locf input[type="email"],
.loc .loc-book .locf input[type="tel"],
.loc .loc-book .locf input[type="date"],
.loc .loc-book .locf select,
.loc .loc-book .locf textarea {
    width: 100%;
    margin-top: 0.25rem;
    padding: 0.5rem 0.625rem;
    font: inherit;
    font-size: 0.9375rem;
    font-weight: 400;
    color: var(--loc-ink);
    background: #fff;
    border: 1px solid #c9d0cc;
    border-radius: 0.625rem;
}

.loc .loc-book .locf textarea {
    height: 3.75rem;
    resize: vertical;
}

.loc .loc-book .locf .wpcf7-radio .wpcf7-list-item-label {
    padding: 0.375rem 0.875rem;
    font-size: 0.875rem;
}

.loc-book .locf__group legend {
    margin-bottom: 0.25rem;
}

.loc-book .locf__consent {
    font-size: 0.75rem;
    line-height: 1.4;
}

.loc .loc-book .locf input.locf__submit {
    width: 100%;
    min-height: 2.75rem;
    padding: 0.625rem 1rem;
}

.loc-book .wpcf7-spinner {
    position: absolute;
}

/* CF7 ajoute des <br> entre les champs : ils prendraient une case de la grille */
.loc .locf br {
    display: none;
}

/* Le thème met une marge sous chaque champ */
.loc .loc-book .locf input,
.loc .loc-book .locf select,
.loc .loc-book .locf textarea {
    margin-bottom: 0;
}

/* Au-delà de 3 vélos, seule la liste défile : le formulaire reste entier à l'écran */
.loc-book .loc-cart__list {
    max-height: 10.5rem;
    overflow-y: auto;
}


/* ─── Formulaire en 2 étapes ─── */
.loc-book.is-steps [data-locf-step="2"],
.loc-book.is-step2 [data-locf-step="1"],
.loc-book.is-step2 .loc-cart {
    display: none;
}

.loc-book.is-step2 [data-locf-step="2"] {
    display: grid;
}

.locf__step {
    display: grid;
    gap: 0.625rem;
}

.loc .loc-book .locf__next {
    width: 100%;
    min-height: 2.75rem;
    margin-top: 0.25rem;
    padding: 0.625rem 1rem;
    font: inherit;
    font-weight: 600;
    color: var(--loc-brand-ink);
    background: var(--loc-brand);
    border: 0;
    border-radius: 999px;
    cursor: pointer;
}

.loc .loc-book .locf__next:hover {
    background: var(--loc-ink);
}

.locf__msg {
    margin: 0;
    font-size: 0.875rem;
    color: #b42318;
}

.locf__msg:empty {
    display: none;
}

.locf__recap {
    padding: 0.625rem 0.75rem;
    font-size: 0.875rem;
    line-height: 1.45;
    background: var(--loc-mist);
    border-radius: 0.75rem;
}

.loc .locf__recap button {
    padding: 0;
    font: inherit;
    font-weight: 600;
    color: var(--loc-ink);
    text-decoration: underline;
    background: none;
    border: 0;
    cursor: pointer;
}


/* Retrait et retour : la date, puis matin ou après-midi à côté */
.locf__when {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 0.5rem;
    align-items: end;
}

.loc .locf__slot .wpcf7-radio {
    flex-wrap: nowrap;
    gap: 0;
    padding: 0.1875rem;
    background: var(--loc-mist);
    border-radius: 999px;
}

.loc .loc-book .locf__slot .wpcf7-radio .wpcf7-list-item-label {
    padding: 0.4375rem 0.75rem;
    font-size: 0.8125rem;
    white-space: nowrap;
    border-color: transparent;
    background: transparent;
}

.loc .loc-book .locf__slot .wpcf7-radio input:checked + .wpcf7-list-item-label {
    background: var(--loc-brand);
    border-color: var(--loc-brand);
}


/* Promo 7 jours : pastille dans la barre, ancien prix barré sur les vélos */
.loc-chip__promo {
    margin-left: 0.25rem;
    padding: 0.0625rem 0.4375rem;
    font-size: 0.75rem;
    font-weight: 700;
    color: #fff;
    background: var(--loc-brand);
    border-radius: 999px;
}

.loc--giant .loc-chip__promo {
    color: var(--loc-bar);
    background: #fff;
}

.loc .loc-chip.is-on .loc-chip__promo {
    color: #fff;
    background: var(--loc-brand);
}

.loc-bike__was {
    margin-left: 0.25rem;
    font-size: 0.9375rem;
    color: var(--loc-muted);
}


/* Vélo indisponible (Nombre disponible = 0 dans Options du Site > Location vélos) */
.loc .loc-bike.is-out .loc-bike__img {
    opacity: 0.45;
}

.loc-bike__out {
    margin: 0;
    padding: 0.75rem;
    font-weight: 600;
    text-align: center;
    color: var(--loc-muted);
    background: var(--loc-mist);
    border-radius: 999px;
}

.loc .loc-cart__qty button:disabled {
    opacity: 0.35;
    cursor: default;
}