/* Paliers de remise automatiques (maquettes _design/paliers-remise) : bandeau, badges des quantités, encadré, confirmation d'ajout,
   barre de progression et suggestions du panier. Tokens de app.css, propriétés logiques (RTL). */

/* ───── Bandeau du haut (fiches service et panier) ───── */
.tierbar{font-size:14px;line-height:1.35}
.tierbar[hidden]{display:none}
.tierbar.is-offer{background:var(--ink);color:var(--bg)}
.tierbar.is-progress{background:var(--accent);color:var(--accent-ink)}
.tierbar.is-max,.tierbar.is-coupon{background:var(--accent-soft);color:#173F31}
.tierbar-in{position:relative;display:flex;align-items:center;justify-content:center;gap:14px;min-height:44px;max-width:var(--container);margin-inline:auto;padding:4px 56px}
.tierbar.is-progress .tierbar-in{min-height:52px;gap:18px}
.tierbar b{font-weight:600}
.tierbar-pill{display:inline-flex;align-items:center;padding:3px 10px;border-radius:var(--radius-full);background:var(--accent);color:var(--accent-ink);font-size:12px;font-weight:600;flex:none}
.tierbar-ic{flex:none;color:var(--accent)}
.tierbar-txt{min-width:0}
.tierbar-short{display:none}
.tierbar-meter{flex:none;width:200px;height:8px;border-radius:var(--radius-full);background:rgba(242,238,230,.25);overflow:hidden}
.tierbar-meter span{display:block;height:100%;background:var(--accent-ink);border-radius:var(--radius-full)}
.tierbar-link{flex:none;font-weight:600;color:inherit;text-underline-offset:3px}
.tierbar.is-offer .tierbar-link{color:var(--accent-soft);font-weight:500}
.tierbar.is-max .tierbar-link,.tierbar.is-coupon .tierbar-link{color:var(--accent)}
.tierbar-x{position:absolute;inset-inline-end:8px;top:50%;transform:translateY(-50%);width:44px;height:44px;border:0;background:transparent;color:inherit;font-size:20px;line-height:1;cursor:pointer;border-radius:var(--radius-s)}
.tierbar-x:focus-visible{outline:2px solid currentColor;outline-offset:-4px}
/* Mobile : une ligne compacte (texte court, croix sur la même ligne), sans barre ni lien. */
@media (max-width:759px){
  .tierbar{font-size:13px}
  .tierbar-in,.tierbar.is-progress .tierbar-in{justify-content:flex-start;gap:8px;min-height:44px;padding:4px 48px 4px 16px;padding-inline:16px 48px}
  .tierbar-long{display:none}
  .tierbar-short{display:inline}
  .tierbar-meter,.tierbar-link{display:none}
  .tierbar-pill{padding:2px 8px;font-size:11px}
  .tierbar-ic{width:16px;height:16px}
  .tierbar-x{inset-inline-end:2px}
}

/* ───── Encadré (fiche, confirmation) ───── */
.tier-box{display:flex;flex-direction:column;gap:8px;padding:12px 14px;border-radius:var(--radius-m);background:var(--accent-soft);color:#173F31;font-size:14px;line-height:1.45}
.tier-box b{font-weight:600}
.tier-meter{height:6px;border-radius:var(--radius-full);background:rgba(31,90,69,.18);overflow:hidden}
.tier-meter span{display:block;height:100%;background:var(--accent);border-radius:var(--radius-full)}
.tier-slot:empty{display:none}
.tier-slot-m{margin-block:4px 8px}
@media (min-width:1120px){.tier-slot-m{display:none}}

/* ───── Badges des quantités (fiche) ───── */
.tile-tier{position:absolute;top:-10px;inset-inline-end:8px;padding:2px 8px;border-radius:var(--radius-full);background:var(--accent-soft);color:var(--accent);font-size:11px;font-weight:600;white-space:nowrap;z-index:1}
.tile-tier.is-top{background:var(--accent);color:var(--accent-ink)}
.tile-tier[hidden]{display:none}
/* Une étiquette « Populaire » / « Meilleur prix » occupe déjà le coin : le badge palier passe de l'autre côté. */
.tile-badge ~ .tile-tier{inset-inline-end:auto;inset-inline-start:8px}
.tile.is-checked .tile-tier,.tile:has(input:checked) .tile-tier{box-shadow:0 0 0 2px var(--surface)}
.tile-tier-hint{margin:10px 0 0;font-size:12.5px;color:var(--ink-3)}
.tile-tier-hint[hidden]{display:none}

/* ───── Confirmation d'ajout au panier ───── */
.tt-host{position:fixed;z-index:70;inset-inline:12px;inset-block-end:12px;display:flex;justify-content:center;pointer-events:none}
@media (min-width:760px){.tt-host{inset-inline:auto 24px;inset-block:96px auto}[dir="rtl"] .tt-host{inset-inline:24px auto}}
.has-sticky-bar .tt-host{inset-block-end:96px}
@media (min-width:1120px){.has-sticky-bar .tt-host{inset-block-end:auto}}
.tt{pointer-events:auto;width:392px;max-width:100%;max-height:calc(100vh - 120px);overflow:auto;box-sizing:border-box;background:var(--surface);border:1px solid var(--line);border-radius:18px;box-shadow:0 16px 40px rgba(25,23,20,.14);padding:20px;display:flex;flex-direction:column;gap:16px;animation:toastIn .2s var(--ease, ease-out)}
.tt:focus{outline:none}
.tt-head{display:flex;align-items:center;gap:10px}
.tt-ok{flex:none;width:28px;height:28px;border-radius:14px;background:var(--accent);color:var(--accent-ink);display:inline-flex;align-items:center;justify-content:center}
.tt-head-txt{flex:1;min-width:0}
.tt-title{font-size:15px;font-weight:600}
.tt-sub{font-size:13px;color:var(--ink-2)}
.tt-x{flex:none;width:44px;height:44px;margin-inline-end:-10px;border:0;background:transparent;font-size:20px;color:var(--ink-3);cursor:pointer;border-radius:var(--radius-s)}
.tt-cap{font-size:12px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-3)}
[dir="rtl"] .tt-cap{letter-spacing:0}
.tt-sugg{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:8px}
.tt-item{display:flex;align-items:center;gap:12px;padding:12px;border:1px solid var(--line);border-radius:var(--radius-m);background:#fff}
.tt-bar{flex:none;width:6px;align-self:stretch;border-radius:3px;background:var(--c)}
.tt-item-txt{flex:1;min-width:0}
.tt-item-title{font-size:14px;font-weight:600}
.tt-item-sub{font-size:12.5px;color:var(--accent);font-weight:500}
.tt-add{flex:none;display:inline-flex;align-items:center;justify-content:center;height:44px;padding:0 14px;border-radius:var(--radius-s);border:0;background:var(--c);color:#fff;font:inherit;font-size:13.5px;font-weight:600;text-decoration:none;cursor:pointer}
.tt-add:hover{color:#fff;filter:brightness(.92)}
.tt-add.is-loading{opacity:.6}
.tt-actions{display:flex;gap:10px}
.tt-actions .btn{flex:1;min-height:48px}

/* ───── Panier : barre de progression ───── */
.tier-progress{display:flex;flex-direction:column;gap:14px;padding:22px 24px;border-radius:18px}
.tier-progress-head{display:flex;justify-content:space-between;align-items:baseline;gap:16px}
.tier-progress-txt{margin:0;font-size:16px;line-height:1.45}
.tier-progress-txt b{font-weight:600}
.tier-progress-of{flex:none;font-size:14px;color:var(--ink-2);white-space:nowrap}
.tier-track{position:relative;height:40px}
.tier-track-bg,.tier-track-fill{position:absolute;inset-inline-start:0;top:6px;height:10px;border-radius:var(--radius-full)}
.tier-track-bg{inset-inline-end:0;background:var(--line-soft)}
.tier-track-fill{background:var(--accent);max-width:100%}
.tier-mark{position:absolute;top:0;transform:translateX(-50%);display:flex;flex-direction:column;align-items:center;gap:2px}
[dir="rtl"] .tier-mark{transform:translateX(50%)}
.tier-mark.is-last{transform:translateX(-100%);align-items:flex-end}
[dir="rtl"] .tier-mark.is-last{transform:translateX(100%)}
.tier-dot{width:22px;height:22px;border-radius:11px;box-sizing:border-box;background:var(--surface);border:3px solid var(--accent)}
.tier-mark.is-reached .tier-dot{background:var(--accent);border-color:var(--surface)}
.tier-mark-l{font-size:12px;font-weight:600;color:var(--ink-2);white-space:nowrap}
.tier-mark.is-reached .tier-mark-l{color:var(--accent)}
.tier-marks-m{display:none;justify-content:space-between;font-size:12px;font-weight:600;color:var(--ink-2)}
.tier-marks-m .is-reached{color:var(--accent)}
.tier-progress.is-max .tier-progress-txt,.tier-progress.is-coupon .tier-progress-txt{color:#173F31}
@media (max-width:759px){
  .tier-progress{padding:16px;gap:10px;border-radius:16px}
  .tier-progress-txt{font-size:14.5px}
  .tier-progress-of{display:none}
  .tier-track{height:10px}
  .tier-track-bg,.tier-track-fill{top:0}
  .tier-mark{display:none}
  .tier-marks-m{display:flex}
}

/* ───── Panier : « Complète ton panier » ───── */
.tier-sugg{display:flex;flex-direction:column;gap:12px}
.tier-sugg-head{display:flex;justify-content:space-between;align-items:baseline;gap:12px;flex-wrap:wrap}
.tier-sugg-head h2{margin:0;font-family:var(--font-head);font-weight:400;font-size:26px}
.tier-sugg-head .muted{font-size:13px;color:var(--ink-2)}
.tier-sugg-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
.tier-card{background:#fff;border:1px solid var(--line);border-radius:14px;padding:16px;display:flex;flex-direction:column;gap:10px}
.tier-card-plat{font-size:12px;font-weight:600;color:var(--c);letter-spacing:.06em;text-transform:uppercase}
[dir="rtl"] .tier-card-plat{letter-spacing:0}
.tier-card-title{margin:0;font-family:var(--font-body);font-size:15px;font-weight:600;line-height:1.3}
.tier-card-price{font-size:13px;color:var(--ink-2)}
.tier-card-sub{display:none;font-size:12.5px;color:var(--accent);font-weight:500}
.tier-card-badge{align-self:flex-start;padding:2px 8px;border-radius:var(--radius-full);background:var(--accent);color:var(--accent-ink);font-size:11.5px;font-weight:600}
.tier-card-btn{margin-top:auto;min-height:44px}
@media (max-width:759px){
  .tier-sugg-head h2{font-size:22px}
  .tier-sugg-head .muted{display:none}
  .tier-sugg-grid{display:flex;gap:10px;overflow-x:auto;padding-bottom:4px;scroll-snap-type:x mandatory;margin-inline:calc(-1 * var(--gutter,16px));padding-inline:var(--gutter,16px)}
  .tier-card{flex:none;width:200px;padding:14px;gap:8px;scroll-snap-align:start}
  .tier-card-plat,.tier-card-price,.tier-card-badge{display:none}
  .tier-card-title{font-size:14px}
  .tier-card-sub{display:block}
}

/* ───── Récapitulatif et paiement ───── */
.co-saving{margin:-6px 0 0;font-size:13px;color:var(--accent)}
.co-nostack{margin:0;font-size:12px;color:var(--ink-3)}
.tier-note{margin:0;padding:10px 12px;border-radius:var(--radius-s);background:var(--surface-2);font-size:13px;color:var(--ink-2)}
.tier-note.is-ok{background:var(--accent-soft);color:#173F31}
.tier-note a{font-weight:600}