/* ============================================================
   EXPO BÉTON 12ᵉ — Thème commun des pages de souscription
   (page principale + sous-pages dédiées)
   Indigo #293172 · Orange #F5A02B · Bleu #43A7DF
   ============================================================ */
:root {
    --eb-indigo: #293172;
    --eb-indigo-dark: #1F2650;
    --eb-orange: #F5A02B;
    --eb-blue: #43A7DF;
    --eb-bg: #E9EDF5;
    --eb-text: #3D4A6B;
    --eb-muted: #7A86A8;
    --eb-line: #E1E6F2;
    --eb-card: #FFFFFF;
    --card-radius: 14px;
}

body { background: var(--eb-bg); }

.sponsor-main {
    padding: 26px 0 96px;
    position: relative;
    z-index: 1;
}
.sheet {
    max-width: 1180px;
    margin: 0 auto;
    padding: 0 18px;
}

/* ----- HERO : photo du salon en en-tête principal ----- */
.hero {
    position: relative;
    border-radius: var(--card-radius);
    overflow: hidden;
    margin-top: 22px;
    min-height: 300px;
    background: var(--eb-indigo-dark) url('../images/salon_expobeton.jpg') center 38% / cover no-repeat;
    display: flex;
    align-items: flex-end;
}
.hero::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(31, 38, 80, 0.25) 0%, rgba(31, 38, 80, 0.55) 55%, rgba(31, 38, 80, 0.92) 100%);
}
.hero-content {
    position: relative;
    z-index: 1;
    padding: 26px 28px 24px;
    color: #fff;
    width: 100%;
}
.hero-content .logo-line {
    font-family: 'Montserrat', sans-serif;
    font-weight: 800;
    font-size: clamp(1.5rem, 3.4vw, 2.3rem);
    letter-spacing: 1px;
    text-transform: uppercase;
}
.hero-content .logo-line .n12 {
    color: var(--eb-orange);
    font-size: 0.72em;
    vertical-align: super;
}
.hero-content .logo-line small {
    display: block;
    font-size: 0.72rem;
    letter-spacing: 4px;
    font-weight: 600;
    color: #C9D2EC;
}
.hero-content .salon {
    margin: 8px 0 10px;
    font-size: 0.92rem;
    color: #E4E9F7;
    max-width: 760px;
}
.hero-content .theme-chip {
    display: inline-block;
    background: var(--eb-orange);
    color: var(--eb-indigo-dark);
    font-weight: 700;
    font-size: 0.8rem;
    border-radius: 999px;
    padding: 7px 16px;
    margin-bottom: 12px;
}
.hero-content .date-place {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}
.hero-content .chip {
    background: rgba(255, 255, 255, 0.14);
    border: 1px solid rgba(255, 255, 255, 0.28);
    border-radius: 999px;
    padding: 5px 14px;
    font-size: 0.78rem;
    backdrop-filter: blur(2px);
}
.hero-patronage {
    position: relative;
    z-index: 1;
    text-align: center;
    color: #fff;
    font-size: 0.72rem;
    letter-spacing: 0.4px;
    background: var(--eb-indigo);
    border-radius: var(--card-radius) var(--card-radius) 0 0;
    margin: 22px 0 0;
    padding: 8px 16px;
}
.hero-patronage + .hero { margin-top: 0; border-radius: 0 0 var(--card-radius) var(--card-radius); }

/* ----- ANCRAGE FLUIDE + DÉCALAGE DES SECTIONS ----- */
/* Le décalage = hauteur du header fixe + hauteur du sous-menu collé,
   pour que le titre de chaque section arrive juste sous le sous-menu. */
html { scroll-behavior: smooth; }
/* --eb-anchor / --eb-sticky-top sont injectés par sousc-common.js à partir de la
   hauteur réelle du header fixe ; valeurs de secours ci-dessous (mesurées live). */
.cat-section { scroll-margin-top: var(--eb-anchor, 245px); }
@media (max-width: 991px) { .cat-section { scroll-margin-top: var(--eb-anchor, 125px); } }

/* ----- SOUS-MENU STICKY (onglets de catégories) ----- */
.subnav {
    position: sticky;
    top: var(--eb-sticky-top, 74px);   /* sous le header fixe mobile (~74px) ; var injectée par JS */
    z-index: 900;              /* au-dessus du contenu ; sous toast(960), action-bar(950), header(9999) */
    background: linear-gradient(180deg, var(--eb-indigo) 0%, var(--eb-indigo-dark) 100%);
    border-top: 3px solid var(--eb-orange);
    border-radius: 0 0 var(--card-radius) var(--card-radius);
    margin: 14px 0 26px;
    box-shadow: 0 10px 26px rgba(31, 38, 80, 0.34);
}
.subnav-track {
    display: flex;
    gap: 4px;
    overflow-x: auto;
    padding: 7px 10px;
    scrollbar-width: none;             /* Firefox : barre masquée */
    -ms-overflow-style: none;          /* anciens Edge */
    -webkit-overflow-scrolling: touch; /* défilement à momentum (iOS) */
    scroll-snap-type: x proximity;
}
.subnav-track::-webkit-scrollbar { display: none; }   /* Chrome / Safari : barre masquée */
.subnav a {
    flex: 0 0 auto;
    scroll-snap-align: start;
    color: #DDE3F5;
    text-decoration: none;
    font-family: 'Montserrat', sans-serif;
    font-weight: 700;
    font-size: 0.78rem;
    letter-spacing: 0.4px;
    text-transform: uppercase;
    padding: 10px 16px;
    border-radius: 999px;
    white-space: nowrap;
    transition: background 0.2s ease, color 0.2s ease,
                transform 0.2s ease, box-shadow 0.2s ease;
}
.subnav a:hover { background: rgba(255, 255, 255, 0.14); color: #fff; transform: translateY(-1px); }
.subnav a:active { transform: translateY(0); }
.subnav a:focus-visible { outline: 2px solid var(--eb-orange); outline-offset: 2px; }
.subnav a.active {
    background: var(--eb-orange);
    color: var(--eb-indigo-dark);
    box-shadow: 0 4px 14px rgba(245, 160, 43, 0.5);
}
@media (min-width: 992px) {
    .subnav { top: var(--eb-sticky-top, 192px); }   /* secours desktop (~192px) avant injection JS */
}
@media (max-width: 640px) {
    .subnav a { padding: 9px 12px; font-size: 0.72rem; }
}

/* ----- BANNIÈRES DE SECTION ----- */
.eb-banner {
    background: linear-gradient(90deg, var(--eb-indigo) 0%, var(--eb-indigo-dark) 100%);
    color: #fff;
    border-radius: var(--card-radius);
    padding: 20px 26px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin: 34px 0 18px;
}
section:first-of-type .eb-banner, .eb-banner.first { margin-top: 0; }
.eb-banner .b-title {
    font-family: 'Montserrat', sans-serif;
    font-weight: 800;
    font-size: 1.3rem;
    letter-spacing: 0.6px;
    text-transform: uppercase;
}
.eb-banner .b-sub { font-size: 0.8rem; color: #C9D2EC; margin-top: 3px; }
.eb-banner .b-logo {
    font-family: 'Montserrat', sans-serif;
    font-weight: 800;
    letter-spacing: 1px;
    white-space: nowrap;
}
.eb-banner .b-logo .ed12 { color: var(--eb-orange); }
.eb-banner .b-logo .ed12 sup { font-size: 0.95rem; }

.lead-line { color: var(--eb-muted); font-size: 0.88rem; margin: 0 0 16px; }

/* ----- BOUTONS ----- */
.btn-subscribe {
    display: block;
    width: 100%;
    border: 0;
    cursor: pointer;
    background: var(--eb-orange);
    color: var(--eb-indigo-dark);
    font-family: 'Montserrat', sans-serif;
    font-weight: 800;
    font-size: 0.86rem;
    letter-spacing: 0.6px;
    text-transform: uppercase;
    border-radius: 10px;
    padding: 12px 18px;
    text-align: center;
    text-decoration: none;
    transition: filter 0.15s, transform 0.05s;
}
.btn-subscribe:hover { filter: brightness(1.06); color: var(--eb-indigo-dark); text-decoration: none; }
.btn-subscribe:active { transform: translateY(1px); }
.btn-subscribe.inline {
    display: inline-block;
    width: auto;
    padding: 7px 14px;
    font-size: 0.72rem;
    border-radius: 8px;
    white-space: nowrap;
}
.btn-ghost {
    display: inline-block;
    border: 1.5px solid var(--eb-line);
    background: #fff;
    color: var(--eb-indigo);
    font-weight: 700;
    font-size: 0.8rem;
    border-radius: 10px;
    padding: 10px 16px;
    text-decoration: none;
}
.btn-ghost:hover { border-color: var(--eb-indigo); text-decoration: none; }

/* ----- PALIERS : CARTES ----- */
.tiers-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
}
.tier-card {
    background: var(--eb-card);
    border-radius: var(--card-radius);
    box-shadow: 0 4px 14px rgba(31, 38, 80, 0.08);
    padding: 0 0 18px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}
.tier-card .tier-top { height: 6px; background: var(--eb-blue); }
.tier-card.platinum .tier-top { background: linear-gradient(90deg, #8A93B8, #D7DCEB); }
.tier-card.gold .tier-top { background: linear-gradient(90deg, #E0A32E, #F6CE7B); }
.tier-card.bronze .tier-top { background: linear-gradient(90deg, #A66A32, #D8A476); }
.tier-card.silver .tier-top { background: linear-gradient(90deg, #9AA7B4, #DDE4EA); }
.tier-card .tier-name {
    font-family: 'Montserrat', sans-serif;
    font-weight: 800;
    font-size: 1.02rem;
    color: var(--eb-indigo);
    padding: 14px 18px 0;
    text-transform: uppercase;
    letter-spacing: 0.6px;
}
.tier-card .tier-price { padding: 4px 18px 12px; border-bottom: 1px solid var(--eb-line); }
.tier-card .tier-price .amount {
    font-family: 'Montserrat', sans-serif;
    font-weight: 800;
    font-size: 1.5rem;
    color: var(--eb-indigo-dark);
}
.tier-card .tier-price .label { font-size: 0.74rem; color: var(--eb-muted); text-transform: uppercase; letter-spacing: 0.8px; font-weight: 700; }
.benefits { list-style: none; margin: 12px 0 14px; padding: 0 18px; flex: 1; }
.benefits li {
    display: flex;
    gap: 8px;
    align-items: flex-start;
    font-size: 0.82rem;
    color: var(--eb-text);
    padding: 5px 0;
}
.benefits li strong { display: block; color: var(--eb-indigo); font-size: 0.8rem; }
.benefits li.off { opacity: 0.55; }
.chk {
    flex: 0 0 auto;
    width: 17px;
    height: 17px;
    border-radius: 4px;
    background: var(--eb-line);
    color: #fff;
    font-size: 0.68rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-top: 2px;
}
.chk.b { background: var(--eb-blue); }
.chk.o { background: var(--eb-orange); }
.tier-card .cta-row { padding: 0 18px; }

/* ----- PARTICIPANT VIP ----- */
.vip-banner {
    margin-top: 22px;
    background: linear-gradient(90deg, var(--eb-indigo) 0%, var(--eb-indigo-dark) 100%);
    color: #fff;
    border-radius: var(--card-radius);
    padding: 18px 24px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
}
.vip-banner .v-left { display: flex; align-items: center; gap: 12px; }
.vip-banner .v-box { width: 20px; height: 20px; border: 2px solid #fff; border-radius: 4px; }
.vip-banner .v-title {
    font-family: 'Montserrat', sans-serif;
    font-weight: 800;
    letter-spacing: 0.8px;
    font-size: 1.05rem;
}
.vip-banner .v-title small { display: block; font-size: 0.72rem; font-weight: 500; color: #C9D2EC; letter-spacing: 0.2px; }
.vip-banner .v-price { font-family: 'Montserrat', sans-serif; font-weight: 800; font-size: 1.5rem; white-space: nowrap; }
.vip-banner .v-price small { font-size: 0.8rem; font-weight: 600; color: #C9D2EC; }
.vip-banner .v-price sup { color: var(--eb-orange); }
.vip-rail {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 10px;
    margin: 12px 0;
}
.vip-rail .cell {
    background: var(--eb-card);
    border-radius: 10px;
    padding: 10px 12px;
    box-shadow: 0 3px 10px rgba(31, 38, 80, 0.06);
}
.vip-rail .head { font-size: 0.68rem; text-transform: uppercase; letter-spacing: 0.8px; color: var(--eb-muted); font-weight: 700; margin-bottom: 6px; }
.vip-rail .val { font-size: 0.82rem; font-weight: 700; color: var(--eb-indigo); display: flex; gap: 6px; align-items: center; }
.vip-note {
    background: #F7F9FD;
    border-left: 4px solid var(--eb-blue);
    border-radius: 8px;
    padding: 12px 16px;
    font-size: 0.84rem;
    color: var(--eb-text);
    font-style: italic;
}
.vip-list {
    margin: 12px 0 0;
    padding: 12px 16px 12px 34px;
    background: #fff;
    border-radius: 10px;
    box-shadow: 0 3px 10px rgba(31, 38, 80, 0.06);
    font-size: 0.82rem;
    color: var(--eb-text);
}
.vip-list li { margin: 4px 0; }
.vip-list li::marker { color: var(--eb-orange); font-weight: 800; }

/* ----- JOURNÉES ACTIVABLES ----- */
.jours-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 8px;
    margin: 12px 0;
}
.jours-grid label {
    display: flex;
    gap: 8px;
    align-items: center;
    background: #fff;
    border: 1.5px solid var(--eb-line);
    border-radius: 10px;
    padding: 9px 12px;
    font-size: 0.78rem;
    color: var(--eb-text);
    cursor: pointer;
    transition: border-color 0.15s, background 0.15s;
}
.jours-grid label:hover { border-color: var(--eb-blue); }
.jours-grid label:has(input:checked) { border-color: var(--eb-orange); background: #FFF7EA; }
.jours-grid input { accent-color: var(--eb-orange); }

/* ----- MAGAZINE & NEWSLETTER ----- */
.nl-grid { display: grid; grid-template-columns: 1.25fr 1fr; gap: 18px; }
.nl-col-title {
    font-family: 'Montserrat', sans-serif;
    font-weight: 800;
    font-size: 0.86rem;
    text-transform: uppercase;
    letter-spacing: 0.6px;
    color: var(--eb-indigo);
    margin-bottom: 10px;
}
.nl-table {
    width: 100%;
    border-collapse: collapse;
    background: #fff;
    border-radius: 10px;
    overflow: hidden;
    box-shadow: 0 3px 10px rgba(31, 38, 80, 0.06);
}
.nl-table th {
    background: var(--eb-indigo);
    color: #fff;
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.6px;
    text-align: left;
    padding: 10px 14px;
}
.nl-table td { padding: 9px 14px; font-size: 0.84rem; color: var(--eb-text); border-top: 1px solid var(--eb-line); }
.nl-table td.num, .nl-table th.num { text-align: right; font-weight: 800; color: var(--eb-indigo-dark); white-space: nowrap; }
.nl-table td.act { text-align: right; width: 110px; }
.nl-packs { display: grid; gap: 10px; }
.nl-pack {
    background: #fff;
    border-radius: 10px;
    box-shadow: 0 3px 10px rgba(31, 38, 80, 0.06);
    padding: 12px 16px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}
.nl-pack .np-name { font-weight: 800; color: var(--eb-indigo); font-size: 0.92rem; }
.nl-pack .np-sub { font-size: 0.72rem; color: var(--eb-muted); }
.nl-pack .np-price { font-family: 'Montserrat', sans-serif; font-weight: 800; color: var(--eb-indigo-dark); white-space: nowrap; }
.nl-packs-note, .nl-conditions { font-size: 0.76rem; color: var(--eb-muted); margin-top: 10px; }
.nl-conditions {
    background: #FFF7EA;
    border-left: 4px solid var(--eb-orange);
    border-radius: 8px;
    padding: 10px 14px;
    color: var(--eb-text);
}

/* ----- CARTES DE SÉLECTION (stands, branding, paliers compacts) ----- */
.mini-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
.mini-grid.two { grid-template-columns: repeat(2, 1fr); }
.mini-grid.one { grid-template-columns: 1fr; }
.mini-card {
    position: relative;
    background: #fff;
    border: 2px solid var(--eb-line);
    border-radius: 12px;
    padding: 16px;
    cursor: pointer;
    transition: border-color 0.15s, box-shadow 0.15s;
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.mini-card:hover { border-color: var(--eb-blue); }
.mini-card:has(input:checked) { border-color: var(--eb-orange); box-shadow: 0 6px 16px rgba(245, 160, 43, 0.22); }
.mini-card input { position: absolute; top: 12px; right: 12px; accent-color: var(--eb-orange); width: 17px; height: 17px; }
.mini-card .m-name { font-weight: 800; color: var(--eb-indigo); font-size: 0.95rem; padding-right: 26px; }
.mini-card .m-price { font-family: 'Montserrat', sans-serif; font-weight: 800; font-size: 1.15rem; color: var(--eb-indigo-dark); }
.mini-card .m-desc { font-size: 0.76rem; color: var(--eb-muted); }
.mini-card .pack-badge {
    align-self: flex-start;
    background: #EAF6FD;
    color: #1B7FB4;
    border-radius: 999px;
    font-size: 0.68rem;
    font-weight: 700;
    padding: 4px 10px;
}
.mini-card ul { margin: 4px 0 0; padding-left: 18px; font-size: 0.76rem; color: var(--eb-text); }
.mini-card ul li { margin: 2px 0; }
.mini-card .cta-row { margin-top: auto; padding-top: 10px; }

.choice-card {
    background: #F7F9FD;
    border-radius: var(--card-radius);
    padding: 18px 20px;
    margin: 16px 0;
}
.choice-head { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; }
.choice-head h3 { font-family: 'Montserrat', sans-serif; font-weight: 800; font-size: 1rem; color: var(--eb-indigo); margin: 0; }
.pill {
    border-radius: 999px;
    font-size: 0.66rem;
    font-weight: 800;
    letter-spacing: 0.8px;
    text-transform: uppercase;
    padding: 4px 12px;
    color: #fff;
    background: var(--eb-blue);
}
.pill.exposant { background: #3E7C4F; }
.pill.vip { background: var(--eb-orange); color: var(--eb-indigo-dark); }
.pill.jours { background: var(--eb-indigo); }
.pill.branding { background: #7A4FBF; }

/* ----- FORMULAIRE DE COORDONNÉES ----- */
.form-card {
    background: #fff;
    border-radius: var(--card-radius);
    box-shadow: 0 4px 14px rgba(31, 38, 80, 0.08);
    padding: 22px 24px;
    margin: 16px 0;
}
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px 18px; }
.form-group { display: flex; flex-direction: column; gap: 6px; }
.form-group.full { grid-column: 1 / -1; }
.form-group label {
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.6px;
    text-transform: uppercase;
    color: var(--eb-indigo);
}
.form-group input, .form-group select {
    border: 1.5px solid var(--eb-line);
    border-radius: 9px;
    padding: 10px 12px;
    font-size: 0.9rem;
    color: var(--eb-text);
    background: #FCFDFF;
    outline: none;
    width: 100%;
}
.form-group input:focus, .form-group select:focus { border-color: var(--eb-orange); }

/* ----- RÉCAPITULATIF DE COMMANDE ----- */
.recap {
    background: #fff;
    border-radius: var(--card-radius);
    box-shadow: 0 4px 14px rgba(31, 38, 80, 0.08);
    padding: 18px 22px;
    margin: 16px 0;
}
.recap .r-line {
    display: flex;
    justify-content: space-between;
    gap: 14px;
    padding: 8px 0;
    border-bottom: 1px dashed var(--eb-line);
    font-size: 0.88rem;
    color: var(--eb-text);
}
.recap .r-line:last-of-type { border-bottom: 0; }
.recap .r-line .r-amt { font-weight: 800; color: var(--eb-indigo-dark); white-space: nowrap; }
.recap .r-total {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 10px;
    padding-top: 12px;
    border-top: 2px solid var(--eb-indigo);
    font-family: 'Montserrat', sans-serif;
    font-weight: 800;
    font-size: 1.1rem;
    color: var(--eb-indigo-dark);
}

/* ----- ENCADRÉ VIREMENT BANCAIRE ----- */
.bank-box {
    background: #FFF7EA;
    border: 2px solid var(--eb-orange);
    border-radius: var(--card-radius);
    padding: 18px 22px;
    margin: 18px 0;
}
.bank-box .bb-title {
    font-family: 'Montserrat', sans-serif;
    font-weight: 800;
    font-size: 0.98rem;
    color: var(--eb-indigo-dark);
    display: flex;
    gap: 10px;
    align-items: center;
    margin-bottom: 10px;
}
.bank-box .bb-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px 22px; font-size: 0.86rem; color: var(--eb-text); }
.bank-box .bb-grid .k { font-size: 0.68rem; font-weight: 800; letter-spacing: 0.6px; text-transform: uppercase; color: var(--eb-indigo); }
.bank-box .bb-grid .v { font-weight: 600; }
.bank-box .bb-note { font-size: 0.76rem; color: var(--eb-muted); margin-top: 10px; }

/* ----- MODALITÉS ----- */
.modal-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.modal-card {
    background: #fff;
    border-radius: 12px;
    box-shadow: 0 3px 10px rgba(31, 38, 80, 0.06);
    padding: 16px 20px;
    font-size: 0.86rem;
    color: var(--eb-text);
    line-height: 1.55;
}
.modal-card .m-head {
    font-size: 0.7rem;
    font-weight: 800;
    letter-spacing: 0.8px;
    text-transform: uppercase;
    color: var(--eb-orange);
    margin-bottom: 8px;
}
.modal-text { font-size: 0.82rem; color: var(--eb-text); line-height: 1.65; margin-top: 14px; }

/* ----- NOTES DE BAS DE PAGE ----- */
.footnotes {
    margin-top: 16px;
    font-size: 0.72rem;
    color: var(--eb-muted);
    line-height: 1.7;
}
.footnotes .n { color: var(--eb-orange); font-weight: 800; }

/* ----- BARRE D'ACTIONS + TOAST ----- */
.action-bar {
    position: fixed;
    left: 14px;                /* coin bas-gauche : ne couvre plus le contenu */
    bottom: 18px;
    z-index: 950;
    display: flex;
    gap: 10px;
    background: rgba(31, 38, 80, 0.96);
    border-radius: 999px;
    padding: 8px;
    box-shadow: 0 10px 30px rgba(31, 38, 80, 0.4);
}
.action-bar button {
    border: 0;
    cursor: pointer;
    border-radius: 999px;
    font-family: 'Montserrat', sans-serif;
    font-weight: 800;
    font-size: 0.8rem;
    padding: 11px 22px;
}
.action-bar .pay-btn { background: var(--eb-orange); color: var(--eb-indigo-dark); }
.toast {
    position: fixed;
    left: 50%;
    bottom: 86px;
    transform: translateX(-50%) translateY(20px);
    background: var(--eb-indigo-dark);
    color: #fff;
    border-radius: 10px;
    padding: 12px 20px;
    font-size: 0.84rem;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.25s, transform 0.25s;
    z-index: 960;
    max-width: 90vw;
    text-align: center;
}
.toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }

/* ----- EN-TÊTE DE SOUS-PAGE ----- */
.page-head {
    background: linear-gradient(90deg, var(--eb-indigo) 0%, var(--eb-indigo-dark) 100%);
    color: #fff;
    border-radius: var(--card-radius);
    padding: 24px 28px;
    margin-top: 22px;
}
.page-head .ph-kicker { font-size: 0.7rem; letter-spacing: 2px; text-transform: uppercase; color: var(--eb-orange); font-weight: 800; }
.page-head .ph-title { font-family: 'Montserrat', sans-serif; font-weight: 800; font-size: clamp(1.25rem, 3vw, 1.8rem); text-transform: uppercase; letter-spacing: 0.6px; margin: 6px 0 4px; }
.page-head .ph-sub { font-size: 0.86rem; color: #C9D2EC; }
.back-row { margin: 14px 0 0; }

/* ----- RESPONSIVE ----- */
@media (max-width: 992px) {
    .tiers-grid { grid-template-columns: repeat(2, 1fr); }
    .mini-grid { grid-template-columns: repeat(2, 1fr); }
    .vip-rail { grid-template-columns: repeat(3, 1fr); }
    .nl-grid { grid-template-columns: 1fr; }
    .jours-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 640px) {
    .tiers-grid, .mini-grid, .mini-grid.two { grid-template-columns: 1fr; }
    .vip-rail { grid-template-columns: repeat(2, 1fr); }
    .form-grid, .modal-grid, .bank-box .bb-grid { grid-template-columns: 1fr; }
    .jours-grid { grid-template-columns: 1fr; }
    .eb-banner { flex-direction: column; align-items: flex-start; gap: 6px; }
    .action-bar { left: 12px; width: calc(100% - 24px); justify-content: flex-start; }
    /* Libellé de paiement plus long : compactage mobile pour rester lisible */
    .action-bar button { font-size: 0.72rem; padding: 10px 14px; }
    .action-bar .pay-btn { flex: 1 1 auto; }
    /* Moyens de paiement dans le bouton : ligne réduite aux icônes sur mobile */
    .pay-line-methods .eb-pm-word { display: none !important; }
    .pay-line-methods { gap: 4px !important; }
    .pay-line-methods .eb-pm { padding: 3px 6px !important; gap: 4px !important; }
}

/* ----- IMPRESSION ----- */
@media print {
    body { background: #fff; }
    .sponsor-main { padding: 0; }
    .header-area, .footer-bg, .action-bar, .toast, .subnav, .btn-subscribe, .btn-ghost, .back-row { display: none !important; }
    .hero { min-height: 0; background-size: cover; }
    .eb-banner, .tier-card, .vip-banner, .vip-rail, .mini-card, .modal-card, .bank-box, .recap, .form-card {
        -webkit-print-color-adjust: exact;
        print-color-adjust: exact;
        box-shadow: none;
    }
    .eb-banner { break-after: avoid; }
    .tier-card, .mini-card, .bank-box { break-inside: avoid; }
}