/* Page du code promo du mois (includes/promo-codes.php) : en plus du style des pages outil (blocks/markets/style.css). */

.opx-tool--promo .opx-disclosure { margin: 0 0 18px; color: var(--opx-muted); font-size: 12px; }
.opx-tool--promo .opx-disclosure a { color: inherit; }

.opx-promo__side-code { margin: 6px 0 0; font-size: clamp(34px, 5vw, 46px); font-weight: 800; letter-spacing: .04em; line-height: 1; }
.opx-promo__side-pct { margin: 4px 0 12px; color: var(--opx-cyan); font-size: 18px; font-weight: 700; }
.opx-promo__none { margin: 0; color: rgba(254, 255, 250, .8); }

.opx-promo__h { margin: 34px 0 14px; font-size: 22px; font-weight: 700; }
.opx-promo__grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 280px), 1fr)); gap: 18px; }
.opx-promo { position: relative; overflow: hidden; padding: 22px; border-radius: 20px; background: var(--opx-ink); color: var(--opx-ivory); }
.opx-promo::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: radial-gradient(400px 160px at 100% 0%, rgba(31, 205, 255, .18), transparent 70%); }
.opx-promo__head { position: relative; z-index: 1; }
.opx-promo__k { margin: 0; color: rgba(254, 255, 250, .6); font-size: 12px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; }
.opx-promo__code { margin: 8px 0 0; font-size: 36px; font-weight: 800; letter-spacing: .05em; line-height: 1; }
.opx-promo__pct { margin: 6px 0 0; color: var(--opx-cyan); font-size: 18px; font-weight: 700; }
.opx-promo__img { position: relative; z-index: 1; display: block; width: calc(100% + 44px); height: auto; aspect-ratio: 16 / 9; object-fit: cover; margin: -22px -22px 16px; border-radius: 20px 20px 0 0; }

/* Encadré du haut : le visuel du meilleur code en fond, voilé pour garder le texte lisible. */
.opx-tool--promo .opx-next { position: relative; overflow: hidden; padding: 0; }
.opx-promo__side-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: .45; }
.opx-promo__side { position: relative; z-index: 1; padding: 18px 20px; background: linear-gradient(90deg, rgba(1, 24, 42, .92) 0%, rgba(1, 24, 42, .55) 70%, rgba(1, 24, 42, .25) 100%); }
.opx-promo__facts { position: relative; z-index: 1; margin: 14px 0 0; padding: 0; list-style: none; color: rgba(254, 255, 250, .85); font-size: 14px; }
.opx-promo__facts li { padding: 6px 0; border-top: 1px solid rgba(255, 255, 255, .12); }
.opx-promo__btn { position: relative; z-index: 1; display: inline-block; margin-top: 16px; padding: 10px 18px; border-radius: 999px; background: var(--opx-ivory); color: var(--opx-blue); font-weight: 800; text-decoration: none; }
.opx-promo__btn:hover { background: #fff; }

.opx-promo__steps { margin: 0; padding-inline-start: 1.3em; font-size: 15px; line-height: 1.6; }
.opx-promo__steps li { margin: 6px 0; }
.opx-promo__past { margin-top: 6px; }
.opx-promo__q { margin: 18px 0 4px; font-size: 16px; font-weight: 700; }
.opx-promo__q + p { margin: 0; }