/** * MIB Privilège — Thème doré espace client * Variables CSS + classes appliquées quand le client est abonné actif * * Usage : inclure ce fichier dans chaque page du PWA client. * Le JS `privilege-theme.js` ajoute la classe `privilege-active` sur * dès que le statut d'abonnement est confirmé. */ /* ── Variables Privilège ─────────────────────────────────────────────────── */ :root { --privilege-gold: #D4AF37; --privilege-gold-dark: #B8930A; --privilege-gold-light: #F5E6B8; --privilege-gold-soft: #FDF6DC; --privilege-stripe: linear-gradient(90deg, #D4AF37 0%, #F5D060 50%, #D4AF37 100%); } /* ── Liseré doré en haut du header quand abonné ─────────────────────────── */ body.privilege-active .header { border-top: 3px solid var(--privilege-gold); box-shadow: 0 2px 12px rgba(212,175,55,.15), 0 2px 8px rgba(0,0,0,.05); } /* ── Badge "MIB Privilège" ───────────────────────────────────────────────── */ .privilege-badge { display: inline-flex; align-items: center; gap: .25rem; background: var(--privilege-gold); color: #fff; font-size: .7rem; font-weight: 700; letter-spacing: .02em; padding: .2rem .5rem; border-radius: 20px; white-space: nowrap; vertical-align: middle; line-height: 1; box-shadow: 0 1px 4px rgba(212,175,55,.4); text-decoration: none; user-select: none; font-family: 'Space Grotesk', sans-serif; } .privilege-badge .privilege-icon { font-size: .8rem; } /* Variante petite */ .privilege-badge-sm { font-size: .62rem; padding: .15rem .4rem; } /* ── Boutons CTA en or pour abonnés ─────────────────────────────────────── */ body.privilege-active .btn-primary, body.privilege-active button.btn-primary { background: linear-gradient(135deg, var(--privilege-gold), #E8C547) !important; border-color: var(--privilege-gold) !important; color: #5a3d00 !important; } body.privilege-active .btn-primary:hover, body.privilege-active button.btn-primary:hover { background: linear-gradient(135deg, var(--privilege-gold-dark), var(--privilege-gold)) !important; } /* ── Bloc "Mes avantages Privilège" ─────────────────────────────────────── */ .privilege-advantages-block { background: linear-gradient(135deg, #FDF6DC 0%, #FFFAE5 100%); border: 1.5px solid var(--privilege-gold); border-radius: 16px; padding: 1.25rem 1rem; margin: 0 0 1.25rem; position: relative; overflow: hidden; } .privilege-advantages-block::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px; background: var(--privilege-stripe); } .priv-adv-header { display: flex; align-items: center; gap: .6rem; margin-bottom: .9rem; } .priv-adv-title { font-family: 'Space Grotesk', sans-serif; font-weight: 700; font-size: 1rem; color: #7a5200; flex: 1; } .priv-adv-manage-link { font-size: .78rem; color: var(--privilege-gold-dark); text-decoration: none; font-weight: 600; border: 1px solid var(--privilege-gold); padding: .2rem .55rem; border-radius: 8px; white-space: nowrap; transition: all .2s; } .priv-adv-manage-link:hover { background: var(--privilege-gold); color: #fff; } .priv-adv-list { display: flex; flex-direction: column; gap: .45rem; margin-bottom: .9rem; } .priv-adv-item { display: flex; align-items: center; gap: .5rem; font-size: .88rem; color: #5a3d00; } .priv-adv-meta { border-top: 1px solid var(--privilege-gold-light); padding-top: .7rem; display: flex; flex-direction: column; gap: .2rem; font-size: .78rem; color: #8a6a20; } /* Sous-statut : annulé en fin de période */ .privilege-advantages-block.sub-cancelled { border-color: #e0a020; } .priv-cancelled-note { margin-top: .7rem; padding: .5rem .75rem; background: #fff3cd; border-left: 3px solid #e0a020; border-radius: 0 8px 8px 0; font-size: .82rem; color: #7a5000; } /* ── Encart promo non-abonné ─────────────────────────────────────────────── */ .privilege-promo-block { background: linear-gradient(135deg, #1a1a2e 0%, #16213e 100%); border-radius: 16px; padding: 1.25rem 1rem; margin: 0 0 1.25rem; color: #fff; position: relative; overflow: hidden; } .privilege-promo-block::after { content: '👑'; position: absolute; right: -4px; top: -6px; font-size: 4rem; opacity: .1; pointer-events: none; } .priv-promo-title { font-family: 'Space Grotesk', sans-serif; font-weight: 700; font-size: .95rem; color: var(--privilege-gold); margin-bottom: .4rem; display: flex; align-items: center; gap: .4rem; } .priv-promo-sub { font-size: .83rem; color: rgba(255,255,255,.75); margin-bottom: .85rem; line-height: 1.4; } .priv-promo-perks { display: flex; flex-wrap: wrap; gap: .35rem; margin-bottom: 1rem; } .priv-promo-perk { background: rgba(212,175,55,.15); border: 1px solid rgba(212,175,55,.35); color: var(--privilege-gold-light); font-size: .75rem; padding: .2rem .55rem; border-radius: 20px; } .priv-promo-cta { display: inline-flex; align-items: center; gap: .35rem; background: var(--privilege-gold); color: #3a2500; font-weight: 700; font-size: .85rem; padding: .55rem 1.1rem; border-radius: 10px; text-decoration: none; transition: all .2s; font-family: 'Space Grotesk', sans-serif; } .priv-promo-cta:hover { background: #E8C547; transform: translateY(-1px); box-shadow: 0 4px 12px rgba(212,175,55,.4); } /* ── Bloc ex-Privilège ───────────────────────────────────────────────────── */ .ex-privilege-block { background: #f9fafb; border: 1.5px solid #e5e7eb; border-radius: 12px; padding: 1rem 1.1rem; margin: 0 0 1.25rem; font-size: .88rem; color: #374151; line-height: 1.5; } .ex-privilege-block p { margin-bottom: .4rem; } .ex-privilege-block a { color: var(--privilege-gold-dark); font-weight: 700; text-decoration: none; } .ex-privilege-block a:hover { text-decoration: underline; } .ex-privilege-challenge-note { margin-top: .5rem; background: var(--privilege-gold-soft); border: 1px solid var(--privilege-gold-light); padding: .5rem .75rem; border-radius: 8px; color: #7a5200; font-size: .82rem; } /* ── Badge Privilège admin/prestataire ───────────────────────────────────── */ .client-privilege-badge { display: inline-flex; align-items: center; gap: .2rem; background: var(--privilege-gold); color: #fff; font-size: .65rem; font-weight: 700; padding: .15rem .45rem; border-radius: 12px; white-space: nowrap; vertical-align: middle; box-shadow: 0 1px 3px rgba(212,175,55,.35); font-family: 'Space Grotesk', sans-serif; letter-spacing: .01em; } /* ── Bottom nav accent doré pour abonnés ────────────────────────────────── */ body.privilege-active .nav-item.active { color: var(--privilege-gold-dark) !important; background: var(--privilege-gold-soft) !important; }