/*
 * Les commandes-relais (V8-70, P17-03 / P17-04 / P17-07) — la sélection de la cliente, ses demandes, les demandes reçues
 * par la conseillère. Porté du kit maquette.css (order-row, order-status, basket-line) : jetons seulement, mobile d'abord,
 * rien sous .75rem sur téléphone (charte § 5 quater).
 */

/* ------------------------------------------------------------------ */
/* 1. « Ma sélection (n) » en haut de la boutique, le bandeau « Ajouté »  */
/* ------------------------------------------------------------------ */
.hero .hero-top { display: flex; align-items: center; justify-content: space-between; gap: .6rem; margin-bottom: .5rem; }
.hero .hero-top .hero-back { margin: 0 0 0 -.5rem; }
.selection-pill { display: inline-flex; align-items: center; gap: .35rem; padding: .3rem .7rem; border-radius: var(--brand-radius-pill); font-size: .85rem; font-weight: 800; white-space: nowrap; line-height: 1.3; }
.selection-pill .n { display: inline-block; min-width: 1.3em; padding: 0 .4em; border-radius: var(--brand-radius-pill); background: var(--brand-accent); color: var(--brand-secondary); font-size: .78rem; text-align: center; }
.selection-pill-light { color: var(--brand-on-dark); background: color-mix(in srgb, var(--brand-on-dark) 14%, transparent); }
.selection-pill-light:hover, .selection-pill-light:focus-visible { color: var(--brand-on-dark); background: color-mix(in srgb, var(--brand-on-dark) 24%, transparent); }
.selection-pill-dark { color: var(--brand-secondary); background: var(--brand-surface); border: 1px solid var(--brand-line); }
.selection-pill-dark:hover, .selection-pill-dark:focus-visible { border-color: var(--brand-accent); color: var(--brand-secondary); }
/* « ✓ Dans ta sélection : … · voir › » : un flash flottant (la .flash-zone de la coquille), sur une ligne, le lien à la suite. */
.flash-zone .selection-added { font-size: .9rem; line-height: 1.45; }
.selection-added .sa-size { white-space: nowrap; }
.selection-added a { font-weight: 800; white-space: nowrap; }

/* La feuille du choix de contenance (le « ＋ » d'une carte, relay.js) : les cartes de contenance de la fiche (.size-picker,
   catalog.css) en boutons radio — la cochée prend le liseré doré, l'indisponible reste listée, barrée. */
.size-picker label.sz { cursor: pointer; margin: 0; }
.size-picker label.sz:has(input:checked) { border-color: var(--brand-accent); box-shadow: 0 0 0 2px color-mix(in srgb, var(--brand-accent) 30%, transparent); background: var(--brand-surface-soft); }
.size-picker label.sz:has(input:disabled) { opacity: .55; cursor: not-allowed; }
.size-picker label.sz:has(input:disabled) .pr { text-decoration: line-through; }
.pick-name { font-family: var(--brand-font-display); font-size: 1.1rem; color: var(--brand-secondary); margin-bottom: .6rem; }
.pick-cta { display: flex; gap: .6rem; align-items: flex-end; }
.pick-cta .btn { flex: 1 1 0; min-height: 2.6rem; }
.pick-qty { flex: 0 0 5rem; display: flex; flex-direction: column; gap: .15rem; margin: 0; }
.pick-qty input { text-align: center; font-weight: 800; }

/* ------------------------------------------------------------------ */
/* 2. La carte produit : le lien et le « ＋ » côte à côte               */
/* ------------------------------------------------------------------ */
.pcard .pc-link { display: flex; flex-direction: column; flex: 1; min-width: 0; color: inherit; }
.pcard .pc-link:hover, .pcard .pc-link:focus-visible { color: inherit; }
.pcard .pc-add { display: grid; margin: 0 .6rem .6rem; }
.pcard .pc-add .pc-cta { margin: 0; }

/* ------------------------------------------------------------------ */
/* 3. La fiche : « ＋ Ajouter à ma sélection » avec la quantité, la question */
/* ------------------------------------------------------------------ */
.shop-cta-bar .cta-add { display: flex; flex: 1 1 0; min-width: 0; gap: .4rem; align-items: center; }
.shop-cta-bar .cta-add .btn { flex: 1 1 0; }
.shop-cta-bar .cta-qty { flex: 0 0 4.2rem; height: 2.5rem; text-align: center; font-weight: 800; font-size: .95rem; border-color: var(--brand-line); }
/* Sur téléphone, sous 480 px (AJUST-39, retour #2409 — le 370 px d'un Android, le 390 px d'un iPhone, le 320 px) : le prix
   et la quantité sur la première rangée, « ＋ Ajouter à ma sélection » en pleine largeur dessous, le texte entier — mesuré
   en jouant le plan : à 390 px, prix + quantité + bouton ne tiennent pas sur une rangée (le bouton n'a que 156 px pour
   215 px de texte). La quantité est hors du formulaire (attribut form du champ) pour pouvoir rester en haut. */
@media (max-width: 479.98px) {
    .shop-cta-bar { flex-wrap: wrap; }
    .shop-cta-bar .cta-qty { margin-left: auto; }
    .shop-cta-bar .cta-add { flex-basis: 100%; }
}
/* AJUST-40 : la barre de la membre — « 📤 Partager », la quantité, « ＋ Ajouter au panier ». Le partage garde la largeur de
   son texte et le bouton d'ajout prend le reste ; sur téléphone, « Partager » et la quantité sur la première rangée, l'ajout
   en pleine largeur dessous (jamais trois rangées sous 390 px : le partage reste à côté de la quantité). */
.shop-cta-bar.is-basket > .btn { flex: 0 0 auto; }
@media (max-width: 479.98px) {
    .shop-cta-bar.is-basket > .btn { flex: 1 1 0; }
}
.shop-ask { margin: .6rem 0 .2rem; }

/* AJUST-40 : l'envoi du panier — « À qui ? » une ligne par choix, les blocs sans cadre (la carte les porte). */
.basket-who .form-check { display: flex; gap: .5rem; align-items: center; padding: .55rem .2rem; margin: 0; border-bottom: 1px solid var(--brand-line); }
.basket-who .form-check:last-child { border-bottom: 0; }
.basket-who .form-check-input { margin: 0; flex: 0 0 auto; }
.basket-panel { border: 0; padding: 0; margin: .4rem 0 0; min-width: 0; }
.basket-panel[hidden] { display: none; }
.shop-ask a { font-weight: 800; color: var(--brand-accent-deep); }

/* ------------------------------------------------------------------ */
/* 4. Les lignes d'une sélection ou d'une demande (P17-03)              */
/* ------------------------------------------------------------------ */
.basket-line { display: flex; gap: .6rem; align-items: center; padding: .55rem 0; border-bottom: 1px dashed var(--brand-line-soft); font-size: .92rem; }
.basket-line:last-child { border-bottom: 0; }
.basket-line .bl-text { flex: 1; min-width: 0; }
.basket-line .bl-text b { display: block; color: var(--brand-secondary); font-size: .92rem; }
.basket-line .bl-text small { display: block; color: var(--brand-muted); font-size: .8rem; }
.basket-line .bl-text .bl-tag { display: inline-block; margin-left: .3rem; padding: 0 .4rem; border-radius: var(--brand-radius-pill); background: var(--brand-info-soft); color: var(--brand-info); font-size: .72rem; font-weight: 800; }
/* AJUST-40 (H30) : une quantité changée par la cliente avant de confirmer le panier. */
.basket-line .bl-text .bl-change { color: var(--brand-info); font-weight: 700; }
/* Les produits du panier que la cliente a retirés : barrés, sous les lignes. */
.relay-removed { margin: .4rem 0 0; padding: .4rem .6rem; border-radius: 10px; background: var(--brand-surface-soft); font-size: .82rem; color: var(--brand-muted); }
.relay-removed s { color: var(--brand-muted); }
/* Largeur fixe (« 1 234,56 € » tient) et chiffres à largeur fixe : le compteur de quantité ne recule plus d'un chiffre entre
   « 35,00 € » et « 135,00 € » d'une ligne à l'autre (retour d'Axel en recette, 30/09/2026) — même composant pour la sélection
   de la cliente, sa demande et la demande côté conseillère. */
.basket-line .bl-price { flex: 0 0 5.4rem; text-align: right; font-weight: 800; color: var(--brand-secondary); font-size: .92rem; font-variant-numeric: tabular-nums; }
.basket-line .bl-price small { display: block; font-weight: 700; color: var(--brand-muted); font-size: .75rem; }
.basket-line .bl-qty { display: inline-flex; align-items: center; gap: .3rem; flex: 0 0 auto; }
.basket-line .bl-qty button { width: 30px; height: 30px; padding: 0; border-radius: 9px; border: 1px solid var(--brand-line); background: var(--brand-surface); color: var(--brand-secondary); font-weight: 800; line-height: 1; cursor: pointer; }
.basket-line .bl-qty button:hover, .basket-line .bl-qty button:focus-visible { border-color: var(--brand-accent); }
.basket-line .bl-qty b { min-width: 1.4em; text-align: center; color: var(--brand-secondary); }
.basket-line .bl-qty .bl-remove { width: auto; padding: 0 .5rem; font-size: .8rem; color: var(--brand-muted); }
/* Téléphone (décision de recette d'Axel, 30/09/2026 — écart assumé avec la rangée unique de P17-03) : le produit sur une
   rangée, la quantité à gauche et le prix à droite sur la rangée du dessous — trois colonnes cassaient le nom sur trois
   lignes. Bureau et tablette : la rangée unique de la maquette. */
@media (max-width: 575.98px) {
    .basket-line { flex-wrap: wrap; row-gap: .35rem; }
    .basket-line .bl-text { flex-basis: 100%; }
    .basket-line .bl-qty { margin-right: auto; }
    /* La colonne fixe est inutile ici (le compteur est calé à gauche, le prix à droite) et, en 320 px, elle ne tenait pas à
       côté de « − 3 ＋ retirer » : le prix passait sur une troisième rangée. */
    .basket-line .bl-price { flex-basis: auto; }
}
.relay-total { display: flex; justify-content: space-between; align-items: baseline; gap: .6rem; padding-top: .6rem; margin-top: .3rem; border-top: 1px solid var(--brand-line-soft); font-size: .92rem; }
.relay-total b { font-size: 1.1rem; color: var(--brand-secondary); }
.relay-doctrine { font-size: .82rem; color: var(--brand-muted); }
.relay-doctrine b { color: var(--brand-secondary); }

/* ------------------------------------------------------------------ */
/* 5. Les lignes de liste et la pastille d'état (P17-04 / P17-07)       */
/* ------------------------------------------------------------------ */
.order-row { display: flex; flex-wrap: wrap; gap: .6rem; align-items: flex-start; padding: .6rem 0; border-bottom: 1px dashed var(--brand-line-soft); font-size: .9rem; color: inherit; }
/* Le mot d'annulation prend toute la largeur de la ligne (retour d'Axel, recette du #2415) */
.order-row .or-word { flex: 1 1 100%; margin-top: 0; }
.order-row:last-child { border-bottom: 0; }
a.order-row:hover, a.order-row:focus-visible { color: inherit; }
a.order-row:hover .or-text b { text-decoration: underline; }
.order-row .or-text { flex: 1; min-width: 0; }
.order-row .or-text b { display: block; color: var(--brand-secondary); }
.order-row .or-text small { display: block; color: var(--brand-muted); font-size: .8rem; margin-top: .1rem; }
.order-row .or-text small.is-due { color: var(--brand-warning-deep); font-weight: 700; }
.order-row .or-side { flex: 0 0 auto; display: flex; flex-direction: column; align-items: flex-end; gap: .3rem; }
/* Très petit écran (320 px, vu en jouant le plan) : la pastille d'état passe sous le texte, à droite — sinon un libellé
   long (« Peptilux – Sérum de jour… ») ou le mot d'annulation s'écrasent dans une colonne de trois mots. */
@media (max-width: 359px) {
    .order-row { flex-wrap: wrap; }
    .order-row .or-side { flex-basis: 100%; flex-direction: row; justify-content: flex-end; }
}
/* AJUST-40 : un panier envoyé porte une pastille longue (« 📨 Attend sa confirmation ») — sur téléphone, elle passe sous
   le texte dès 576 px, sinon le texte s'écrase en colonne étroite (vu en jouant le ticket à 390 px). */
@media (max-width: 575.98px) {
    .order-row.or-long .or-side { flex-basis: 100%; flex-direction: row; justify-content: flex-end; }
}
.order-status { display: inline-block; font-size: .75rem; font-weight: 800; letter-spacing: .03em; padding: .15rem .55rem; border-radius: var(--brand-radius-pill); white-space: nowrap; line-height: 1.4; }
.os-wait { background: var(--brand-warning-soft); color: var(--brand-warning-deep); }
.os-sent { background: var(--brand-info-soft); color: var(--brand-info); }
.os-done { background: var(--brand-success-soft); color: var(--brand-success); }
.os-no { background: var(--brand-line-soft); color: var(--brand-muted); }
.relay-word { margin-top: .4rem; padding: .5rem .7rem; border-radius: 10px; background: var(--brand-surface-soft); border: 1px solid var(--brand-line-soft); font-size: .85rem; color: var(--brand-text); }
.relay-word b { color: var(--brand-secondary); }

/* Les deux listes (AJUST-33, #2426) : une carte par demande — plus de pointillé entre deux demandes (#2413) —, les sections,
   les pastilles d'état, la recherche d'une cliente, « Voir 10 de plus ». */
.relay-section { margin-bottom: 1rem; }
.relay-section-head { display: flex; align-items: baseline; justify-content: space-between; gap: .6rem; margin: .3rem 0 .5rem; }
.relay-section-head h2 { font-size: 1.15rem; margin: 0; color: var(--brand-secondary); }
.relay-section .card.relay-card { margin-bottom: .6rem; }
.relay-card .card-body { padding: .15rem .9rem; }
.relay-card .order-row { border-bottom: 0; }
.relay-empty { padding: .1rem 0 .4rem; }
/* Les quatre pastilles toujours visibles — à la ligne sur téléphone plutôt qu'un défilement de côté qui cachait « Toutes »
   (vu en jouant le ticket à 390 px) ; rien sous .75rem sur téléphone (charte § 5 quater) : les puces communes (.chip,
   .7rem) grandissent ici. */
.relay-pills { flex-wrap: wrap; overflow: visible; }
.relay-pills .chip { font-size: .78rem; text-decoration: none; }
.relay-search { display: flex; gap: .5rem; }
.relay-search .form-control { flex: 1 1 auto; min-width: 0; }
.relay-search .btn { flex: 0 0 auto; }
.relay-filter { font-size: .85rem; color: var(--brand-muted); }
.relay-filter b { color: var(--brand-secondary); }
.relay-filter a { font-weight: 800; white-space: nowrap; }

/* ------------------------------------------------------------------ */
/* 6. La demande côté conseillère : le calcul de l'entrée (💡)           */
/* ------------------------------------------------------------------ */
.relay-calc { display: grid; gap: .35rem; margin: .5rem 0; }
.relay-calc .rc-line { display: flex; justify-content: space-between; gap: .6rem; align-items: baseline; padding: .35rem 0; border-bottom: 1px dashed var(--brand-line-soft); font-size: .9rem; }
.relay-calc .rc-line:last-child { border-bottom: 0; }
.relay-calc .rc-line b { color: var(--brand-secondary); white-space: nowrap; }
.relay-calc .rc-line .ok { color: var(--brand-success); font-weight: 800; }
.relay-calc .rc-line .missing { color: var(--brand-warning-deep); font-weight: 800; }
.relay-recap { display: flex; flex-wrap: wrap; gap: .4rem 1rem; font-size: .88rem; color: var(--brand-muted); }
.relay-recap b { color: var(--brand-secondary); }
.relay-lines-head { display: grid; grid-template-columns: 1fr auto; gap: .3rem; font-size: .75rem; letter-spacing: .08em; text-transform: uppercase; color: var(--brand-muted); font-weight: 800; padding-bottom: .3rem; border-bottom: 1px solid var(--brand-line-soft); }