/* ==========================================================================
   Pages publiques écrites dans la console : la boutique premium (premium.html) ;
   la barre de navigation sert aussi au règlement (css/rulebook.css). Chargées par js/site-pages.js.
   ========================================================================== */

.sp-bar-nav { display: flex; align-items: center; gap: var(--nw-sp-2); flex-wrap: wrap; }
.sp-bar-nav a { padding: 6px 12px; border-radius: var(--nw-radius-pill); color: var(--nw-text-dim); font-size: 14px; font-weight: 600; text-decoration: none; }
.sp-bar-nav a:hover { color: var(--nw-text); background: var(--nw-glass-hover); }
.sp-bar-nav a[aria-current] { color: #fff; background: rgba(var(--st-rgb, 168, 85, 247), .22); }

.sp-main { max-width: 1180px; }
.sp-title { margin: var(--nw-sp-2) 0; font-family: var(--nw-font-display); font-size: clamp(32px, 5vw, 50px); font-weight: 900; letter-spacing: -.02em; line-height: 1.05; }
.sp-lead { max-width: 760px; margin: 0 0 var(--nw-sp-3); color: var(--nw-text-dim); font-size: 16px; line-height: 1.7; white-space: pre-line; }
.sp-updated { margin: 0 0 var(--nw-sp-6); font-family: var(--nw-font-mono); font-size: 12px; color: var(--nw-text-faint); }
.sp-loading, .sp-empty { padding: var(--nw-sp-7) var(--nw-sp-5); border: 1px dashed var(--nw-border); border-radius: var(--nw-radius-lg); text-align: center; color: var(--nw-text-dim); }
.sp-empty a { color: var(--nw-primary-light); }

/* ---------- Boutique premium ---------- */
.pm-notice { display: flex; gap: var(--nw-sp-3); align-items: flex-start; max-width: 860px; margin: 0 0 var(--nw-sp-6); padding: var(--nw-sp-3) var(--nw-sp-4); border: 1px solid var(--nw-border); border-radius: var(--nw-radius); background: rgba(var(--st-rgb, 168, 85, 247), .08); color: var(--nw-text-dim); font-size: 14px; line-height: 1.6; }
.pm-notice svg { width: 20px; height: 20px; flex: none; margin-top: 2px; color: var(--nw-primary-light); }
.pm-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(290px, 1fr)); gap: var(--nw-sp-5); align-items: stretch; }
.pm-offer {
    --pm-tint: #8b5cf6;
    position: relative;
    display: flex; flex-direction: column;
    overflow: hidden;
    border: 1px solid var(--nw-border-soft);
    border-radius: var(--nw-radius-lg);
    background: linear-gradient(180deg, color-mix(in srgb, var(--pm-tint) 14%, transparent), transparent 45%), var(--nw-bg-elev);
    transition: transform var(--nw-base) var(--nw-ease), border-color var(--nw-base);
}
.pm-offer:hover { transform: translateY(-3px); border-color: color-mix(in srgb, var(--pm-tint) 60%, transparent); }
.pm-offer.is-featured { border-color: var(--pm-tint); box-shadow: 0 0 34px color-mix(in srgb, var(--pm-tint) 35%, transparent); }
.pm-offer-media { position: relative; aspect-ratio: 16 / 8; background: radial-gradient(circle at 30% 30%, color-mix(in srgb, var(--pm-tint) 45%, transparent), transparent 70%), #0c0718; }
.pm-offer-media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.pm-offer-media::after { content: ''; position: absolute; inset: 0; background: linear-gradient(0deg, var(--nw-bg-elev), transparent 60%); }
.pm-offer-glyph { position: absolute; inset: 0; display: grid; place-items: center; font-family: var(--nw-font-display); font-size: 54px; font-weight: 900; color: color-mix(in srgb, var(--pm-tint) 70%, #fff); opacity: .6; }
.pm-badge { position: absolute; top: var(--nw-sp-3); left: var(--nw-sp-3); z-index: 1; padding: 3px 10px; border-radius: var(--nw-radius-pill); background: var(--pm-tint); color: #fff; font-size: 11px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; }
.pm-offer-body { display: flex; flex-direction: column; gap: var(--nw-sp-3); flex: 1; padding: var(--nw-sp-4) var(--nw-sp-5) var(--nw-sp-5); }
.pm-offer h2 { margin: 0; font-family: var(--nw-font-display); font-size: 24px; font-weight: 900; }
.pm-tagline { margin: -6px 0 0; color: var(--nw-text-dim); font-size: 14px; }
.pm-price { display: flex; align-items: baseline; gap: 6px; margin: 0; }
.pm-price b { font-family: var(--nw-font-display); font-size: 30px; font-weight: 900; color: #fff; }
.pm-price span { color: var(--nw-text-faint); font-size: 13px; }
.pm-desc { margin: 0; color: var(--nw-text-dim); font-size: 14px; line-height: 1.6; white-space: pre-line; }
.pm-perks { display: grid; gap: 6px; margin: 0; padding: 0; list-style: none; font-size: 14px; }
.pm-perks li { display: flex; gap: var(--nw-sp-2); align-items: flex-start; }
.pm-perks svg { width: 16px; height: 16px; flex: none; margin-top: 3px; color: var(--pm-tint); }
.pm-slots { display: inline-flex; align-self: flex-start; align-items: center; gap: 6px; padding: 4px 10px; border-radius: var(--nw-radius-pill); background: color-mix(in srgb, var(--pm-tint) 18%, transparent); color: #fff; font-size: 12px; font-weight: 700; }
.pm-offer .nw-btn { margin-top: auto; }

@media (max-width: 600px) {
    .sp-bar-nav a { padding: 6px 8px; font-size: 13px; }
    .pm-grid { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) {
    .pm-offer { transition: none; }
}

/* ---------- Candidature staff (candidature-staff.html) ---------- */
.sa-main { max-width: 860px; }
.sa-steps { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 var(--nw-sp-5); padding: 0; list-style: none; }
.sa-steps li { display: inline-flex; align-items: center; gap: 8px; padding: 6px 12px 6px 6px; border: 1px solid var(--nw-border); border-radius: var(--nw-radius-pill); font-size: 13px; color: var(--nw-text-dim); }
.sa-steps b { display: grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; background: rgba(var(--st-rgb, 168, 85, 247), .25); color: #fff; font-size: 12px; }
.sa-card { display: grid; gap: var(--nw-sp-4); margin-bottom: var(--nw-sp-4); padding: var(--nw-sp-5); border: 1px solid var(--nw-border); border-radius: var(--nw-radius-lg); background: var(--nw-glass-strong); }
.sa-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: var(--nw-sp-4); }
.sa-field { display: grid; gap: 6px; }
.sa-field > span { font-weight: 700; font-size: 14px; }
.sa-field > span em { font-style: normal; font-weight: 500; color: var(--nw-text-faint); font-size: 12px; }
.sa-count { font-style: normal; font-size: 12px; color: var(--nw-warning); justify-self: end; }
.sa-count.is-ok { color: var(--nw-text-faint); }
.sa-check { display: flex; gap: 8px; align-items: flex-start; font-size: 14px; color: var(--nw-text-dim); }
.sa-check a { color: var(--nw-primary-light); }
.sa-error { margin: 0; padding: 10px 14px; border-radius: var(--nw-radius-sm); background: rgba(239, 68, 68, .12); color: #fecaca; font-size: 14px; }
.sa-actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--nw-sp-3); }
.sa-hint { font-size: 12px; color: var(--nw-text-faint); }
.sa-kicker { margin: 0; font-family: var(--nw-font-mono); font-size: 12px; color: var(--nw-text-faint); }
.sa-status h2 { margin: 0; font-family: var(--nw-font-display); font-size: 30px; }
.sa-status p { margin: 0; color: var(--nw-text-dim); }
.sa-status.is-accepted { border-color: rgba(34, 197, 94, .45); }
.sa-status.is-rejected, .sa-status.is-withdrawn { opacity: .85; }
.sa-status blockquote { margin: 0; padding-left: 12px; border-left: 2px solid var(--nw-primary); color: var(--nw-text-dim); }
.sa-status .nw-btn { justify-self: start; }
.sa-track { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 4px; margin: 0; padding: 0; list-style: none; }
.sa-track li { display: grid; gap: 6px; font-size: 11px; color: var(--nw-text-faint); text-align: center; }
.sa-track i { display: block; height: 6px; border-radius: 4px; background: rgba(255, 255, 255, .08); }
.sa-track li.is-done i { background: var(--nw-primary); }
.sa-track li.is-now { color: var(--nw-text); font-weight: 700; }
@media (max-width: 560px) { .sa-track span { display: none; } }

/* Boutique : avantage avec emoji, panneau indisponible (js/site-pages.js) */
.pm-perk-emoji { flex: none; width: 18px; font-style: normal; text-align: center; }
.pm-offer.is-unavailable .pm-offer-media { filter: grayscale(.7); opacity: .75; }
.pm-off { opacity: .6; cursor: not-allowed; }

/* Boutique en trois panneaux fixes, icône à côté du titre, bandeau de pied */
.pm-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.pm-offer { border-color: color-mix(in srgb, var(--pm-tint) 45%, transparent); }
.pm-offer-title { display: flex; align-items: center; justify-content: space-between; gap: var(--nw-sp-3); padding-bottom: var(--nw-sp-3); border-bottom: 1px solid color-mix(in srgb, var(--pm-tint) 30%, transparent); color: color-mix(in srgb, var(--pm-tint) 70%, #fff); font-style: italic; text-transform: uppercase; text-shadow: 0 0 18px color-mix(in srgb, var(--pm-tint) 55%, transparent); }
.pm-offer-icon { flex: none; font-size: 36px; font-style: normal; line-height: 1; filter: drop-shadow(0 0 10px color-mix(in srgb, var(--pm-tint) 70%, transparent)); }
.pm-perks li { padding: 6px 0; border-bottom: 1px solid rgba(255, 255, 255, .06); }
.pm-perks li:last-child { border-bottom: 0; }
.pm-perks .pm-perk-emoji { width: 22px; font-size: 16px; }
.pm-footer { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: var(--nw-sp-3); margin: var(--nw-sp-6) 0 0; color: #c084fc; font-family: var(--nw-font-display); font-size: clamp(15px, 2.2vw, 22px); font-style: italic; font-weight: 900; text-align: center; text-transform: uppercase; text-shadow: 0 0 18px rgba(168, 85, 247, .45); }
.pm-footer span { color: #a855f7; font-style: normal; }
@media (max-width: 1000px) { .pm-grid--3 { grid-template-columns: 1fr; max-width: 560px; margin-inline: auto; } }