@import 'Collecta.Web.Client.h6ef7xtv13.bundle.scp.css';
@import '_content/LEC.Blazor.Localization.Client/LEC.Blazor.Localization.Client.4ihemxkohm.bundle.scp.css';

/* /Components/Pages/Coupon.razor.rz.scp.css */
/* Page publique d'une offre. Volontairement sans MudBlazor : seuls les tokens de
   app.scss sont utilisés, la page devant s'afficher avant tout chargement applicatif. */

/* La base sans-serif vient normalement du thème MudBlazor ; ce layout nu ne le charge pas,
   il faut donc la poser ici, sans quoi la page hérite du serif par défaut du navigateur. */
.coupon-page[b-b2kv4owoyv] {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 32px 20px;
    background: var(--bg);
    font-family: var(--font-ui);
    color: var(--txt);
    letter-spacing: -.005em;
}

.coupon[b-b2kv4owoyv] {
    width: 100%;
    max-width: 470px;
    padding: 40px 38px 34px;
    text-align: center;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: calc(var(--mud-default-borderradius, 8px) * 1.5);
    box-shadow: 0 18px 48px rgba(20, 33, 46, .10);
}

.coupon__brand[b-b2kv4owoyv] {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    margin-bottom: 30px;
    font-family: var(--font-display);
    font-size: 1.2rem;
    font-weight: 600;
    letter-spacing: -.01em;
    color: var(--primary);
}

.coupon__eyebrow[b-b2kv4owoyv] {
    margin: 0 0 6px;
    font-size: .8rem;
    color: var(--txt-3);
}

/* L'offre est le sujet de la page : c'est le seul élément qui a le droit d'être grand. */
.coupon__offer[b-b2kv4owoyv] {
    margin: 0;
    font-family: var(--font-display);
    font-size: 2.45rem;
    font-weight: 700;
    line-height: 1.12;
    letter-spacing: -.025em;
    color: var(--primary);
}

/* Le titre reçoit le focus au chargement (FocusOnNavigate cible h1). L'anneau global
   n'a pas de sens sur un élément non actionnable — il se lit comme un cadre décoratif. */
.coupon__offer:focus[b-b2kv4owoyv],
.coupon__offer:focus-visible[b-b2kv4owoyv] {
    outline: none;
}

.coupon__offer--muted[b-b2kv4owoyv] {
    font-size: 1.7rem;
    color: var(--txt-2);
}

/* Filet laiton : la signature « papier à lettres » du système de design. */
.coupon__rule[b-b2kv4owoyv] {
    width: 64px;
    height: 2px;
    border: none;
    border-radius: 1px;
    margin: 18px auto 0;
    background: var(--brass);
}

/* Valeur du bon : le laiton, accent décoratif de la charte, sert ici de dénomination —
   c'est la pastille qui fait lire « bon » plutôt que « annonce ». Texte en --brass-ink,
   le laiton lui-même n'ayant pas le contraste requis pour du texte. */
.coupon__value[b-b2kv4owoyv] {
    display: inline-block;
    margin: 20px 0 0;
    padding: 9px 20px;
    border-radius: 999px;
    background: var(--brass-bg);
    /* Le filet donne son arête à la pastille : sans lui, le fond laiton très clair
       flotte sur le blanc au lieu de se lire comme une dénomination apposée. */
    border: 1px solid var(--brass-light);
    color: var(--brass-ink);
    font-size: 1.12rem;
    font-weight: 700;
    letter-spacing: -.01em;
    font-variant-numeric: tabular-nums;
}

.coupon__value-note[b-b2kv4owoyv] {
    margin: 7px 0 0;
    font-size: .74rem;
    color: var(--txt-3);
}

.coupon__lead[b-b2kv4owoyv] {
    margin: 20px 0 0;
    font-size: .94rem;
    line-height: 1.55;
    color: var(--txt-2);
}

.coupon__code[b-b2kv4owoyv] {
    margin: 26px 0 0;
    padding: 14px 18px;
    border-radius: var(--mud-default-borderradius, 8px);
    background: var(--primary-50);
}

.coupon__code-label[b-b2kv4owoyv] {
    display: block;
    font-size: .74rem;
    color: var(--txt-3);
}

.coupon__code-value[b-b2kv4owoyv] {
    display: block;
    margin-top: 3px;
    font-size: 1.5rem;
    font-weight: 700;
    letter-spacing: .12em;
    color: var(--primary);
    font-variant-numeric: tabular-nums;
    word-break: break-all;
}

.coupon__actions[b-b2kv4owoyv] {
    display: flex;
    gap: 10px;
    margin: 24px 0 0;
}

.coupon__cta[b-b2kv4owoyv] {
    display: block;
    flex: 1 1 0;
    margin: 24px 0 0;
    padding: 14px 22px;
    border-radius: var(--mud-default-borderradius, 8px);
    background: var(--primary);
    color: #fff;
    font-size: 1rem;
    font-weight: 600;
    text-decoration: none;
    transition: background .2s ease;
}

.coupon__cta:hover[b-b2kv4owoyv] {
    background: var(--primary-dark);
}

.coupon__cta:focus-visible[b-b2kv4owoyv] {
    outline: 3px solid var(--primary-600);
    outline-offset: 2px;
}

.coupon__cta--quiet[b-b2kv4owoyv] {
    background: transparent;
    color: var(--primary-600);
    border: 1px solid var(--line-strong);
}

.coupon__cta--quiet:hover[b-b2kv4owoyv] {
    background: var(--primary-50);
}

.coupon__actions .coupon__cta[b-b2kv4owoyv] {
    margin-top: 0;
}

.coupon__pdf[b-b2kv4owoyv] {
    margin: 26px 0 22px;
    font-size: .82rem;
}

.coupon__pdf a[b-b2kv4owoyv] {
    color: var(--primary-600);
    text-decoration: none;
    border-bottom: 1px solid var(--primary-300);
    padding-bottom: 1px;
}

.coupon__pdf a:hover[b-b2kv4owoyv] {
    border-bottom-color: var(--primary-600);
}

.coupon__fine[b-b2kv4owoyv] {
    margin: 16px 0 0;
    font-size: .78rem;
    line-height: 1.5;
    color: var(--txt-3);
}

@media (max-width: 480px) {
    .coupon[b-b2kv4owoyv] {
        padding: 30px 22px 26px;
    }
    .coupon__offer[b-b2kv4owoyv] {
        font-size: 2rem;
    }
    /* Deux boutons côte à côte deviennent illisibles sous cette largeur. */
    .coupon__actions[b-b2kv4owoyv] {
        flex-direction: column;
    }
}