/* CODES PROMO placements drawn by assets/js/codes-promo.js only when a live code exists:
   button on fiches / brand review pages, badge on product cards, code line of the fiche buy block, top banner. */

/* Button « Codes promo {Marque} » (after the H1) */
.cp-bouton, .cp-achat, .cp-ban, .cp-pastille { font-family: var(--sans, system-ui, sans-serif); }
.cp-bouton { display: inline-flex; align-items: stretch; margin: .5rem 0 .4rem; border-radius: var(--r-ctl, 999px); border: 1px solid var(--moutarde); background: var(--blanc); color: var(--anthracite); text-decoration: none; font-size: var(--t-sm, .9rem); font-weight: 600; overflow: hidden; transition: background .15s; }
.cp-bouton:hover { background: var(--moutarde-voile); }
.cp-bouton__pct { display: flex; align-items: center; padding: .32rem .7rem; background: var(--moutarde); color: var(--anthracite); font-weight: 700; white-space: nowrap; }
.cp-bouton__txt { display: flex; align-items: center; padding: .32rem .85rem; }
.cp-bouton:focus-visible { outline: 2px solid var(--bleu); outline-offset: 2px; }

/* Badge « -X % avec code » on product cards */
.carte .carte__photo { position: relative; }
.cp-pastille { position: absolute; z-index: 2; left: .6rem; bottom: .6rem; padding: .22rem .6rem; border-radius: var(--r-ctl, 999px); background: var(--moutarde); color: var(--anthracite); font-size: var(--t-xs, .76rem); font-weight: 700; line-height: 1.3; letter-spacing: .01em; box-shadow: 0 1px 4px rgba(0,0,0,.12); pointer-events: none; white-space: nowrap; }

/* Code line under the merchant button of a fiche */
.achat__cta:has(> .cp-achat) { flex-wrap: wrap; }
.achat__cta > .cp-achat { order: 5; flex: 1 1 100%; margin-top: .2rem; }
.cp-achat { margin-top: .7rem; padding: .7rem .85rem; border: 1px dashed var(--moutarde); border-radius: var(--r-img, 10px); background: var(--moutarde-voile); font-size: var(--t-sm, .9rem); }
.cp-achat__txt { margin: 0; color: var(--anthracite); }
.cp-achat__code { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; letter-spacing: .06em; padding: .05rem .35rem; border-radius: 4px; background: var(--blanc); }
.cp-achat__cond { margin: .25rem 0 0; color: var(--feutre); font-size: var(--t-xs, .8rem); }
.cp-achat__actions { margin: .5rem 0 0; display: flex; flex-wrap: wrap; align-items: center; gap: .4rem .9rem; }
.cp-achat__copier { font: inherit; font-weight: 700; padding: .35rem .85rem; border-radius: var(--r-ctl, 999px); border: 0; background: var(--anthracite); color: var(--blanc); cursor: pointer; }
.cp-achat__copier:hover { background: var(--foret); }
.cp-achat__lien { color: var(--bleu); text-decoration: underline; text-underline-offset: 2px; }

/* Top banner (closable, hidden 3 days for this code) */
.cp-ban { background: var(--anthracite); color: var(--blanc); font-size: var(--t-sm, .9rem); }
.cp-ban__in { max-width: var(--col, 72rem); margin: 0 auto; padding: .5rem var(--gutter, 1rem); display: flex; align-items: center; gap: .5rem .9rem; }
.cp-ban__pct { flex: none; padding: .15rem .55rem; border-radius: var(--r-ctl, 999px); background: var(--moutarde); color: var(--anthracite); font-weight: 700; white-space: nowrap; }
.cp-ban__txt { flex: 1; min-width: 0; }
.cp-ban__txt strong { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; letter-spacing: .06em; color: var(--moutarde); }
.cp-ban__cta { flex: none; color: var(--blanc); font-weight: 700; text-decoration: underline; text-underline-offset: 3px; white-space: nowrap; }
.cp-ban__cta:hover { color: var(--moutarde); }
.cp-ban__fermer { flex: none; display: grid; place-items: center; width: 2rem; height: 2rem; border: 0; border-radius: 50%; background: transparent; color: var(--blanc); cursor: pointer; }
.cp-ban__fermer:hover { background: rgba(255,255,255,.12); }
@media (max-width: 640px) {
  .cp-ban__in { flex-wrap: wrap; padding-block: .45rem; font-size: var(--t-xs, .8rem); position: relative; padding-right: 2.6rem; }
  .cp-ban__fermer { position: absolute; top: .3rem; right: .4rem; }
}
.cp-achat__sur { margin: 0 0 .2rem; font-size: var(--t-xs, .76rem); text-transform: uppercase; letter-spacing: .07em; color: var(--bleu); font-weight: 700; }

/* Fiche head (design-fiche-t1): desktop grid with named areas, mobile flex column with order */
@media (min-width: 901px) {
  .fiche.ft .fiche__tete .achat > .cp-bouton { grid-area: kick; justify-self: end; align-self: end; margin: 0; }
}
@media (max-width: 900px) {
  .fiche.ft .achat > .cp-bouton { order: 2; align-self: flex-start; }
  .fiche.ft .achat > .cp-achat { order: 6; }
  .cp-ban__txt { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
}