/* FNSHOP · theme-c-body.css — GENERE, ne pas editer. * Source et documentation (dont l echelle des z-index) : * theme-src/theme-c.css -> node tools/split-theme.js * Les regles du PREMIER RENDU ne sont PAS ici : elles sont dans * assets/fnshop-v2.css, liee dans le . Liste figee dans * tools/premier-rendu-liste.json, partition dans tools/split-theme.js. */ .fn-psc-logo-inner, .fn-psc-logo-inner * { color: #fff; } .fn-acc-tab.is-active, .fn-plan-badge-rec, .fn-size-opt.is-active, .fn-rch-chip.is-active, .fn-rch-method.is-active, .fn-bc-chip, .fn-od-block-title, .fn-escrow-v2-status--active, .fn-badge.fn-badge-purple, .fn-badge.fn-badge-red, .fn-mode-card-badge, .fn-relay-search-btn-co { color: rgb(var(--tt)); } .fn-lang-btn, .fn-curr-settings-btn { background: rgb(var(--tf) / 0.05); } .fn-lang-btn.fn-lang-active, .fn-curr-settings-btn.fn-curr-settings-active { background: rgb(var(--ta) / 0.14); } .fn-ck-required-badge, .fn-lang-btn.fn-lang-active, .fn-curr-settings-btn.fn-curr-settings-active, .fn-cancel-confirm-yes { color: rgb(var(--tt)) !important; } body.no-scroll { overflow: hidden !important; position: fixed; top: var(--fn-scroll-lock-y, 0px); left: 0; right: 0; width: 100%; touch-action: none; } #fn-authenticity, .fn-hf-footer { background: rgb(var(--tband)) !important; color: rgb(var(--tband-fg)) !important; } #fn-authenticity *, .fn-hf-footer * { color: rgb(var(--tband-fg)) !important; } #fn-authenticity .fn-aut-check-card, #fn-authenticity .fn-aut-faq-item { background: rgb(var(--tband-fg) / 0.06) !important; border-color: rgb(var(--tband-fg) / 0.16) !important; box-shadow: none !important; } #fn-authenticity .fn-aut-brand-tag, #fn-authenticity .fn-aut-metric-lbl, #fn-authenticity .fn-aut-check-desc, #fn-authenticity .fn-aut-step-desc, .fn-hf-desc, .fn-hf-col a { color: rgb(var(--tband-fg) / 0.78) !important; } .fn-cart-badge.is-zero { background: rgb(var(--tb2)) !important; color: rgb(var(--tt2)) !important; } .fn-aut-cta-sub, .fn-aut-guarantee-text, .fn-aut-hero-sub, .fn-bc-desc, .fn-bc-label, .fn-cart-share-btn, .fn-hype-label, .fn-hype-online, .fn-hype-product, .fn-hype-refresh, .fn-hype-time, .fn-mock-mini-label, .fn-mock-mini-sub, .fn-rch-method, .fn-t2-avoir-link, .fn-t2-pay, .fn-v2-charter-btn, .fn-acc-action-btn, .fn-notif-clear-all, .fn-cny-countdown, .fn-journey-step-num, .fn-journey-step-desc { color: rgb(var(--tt2)) !important; opacity: 1 !important; } .fn-od-block-title { color: rgb(var(--ta2)) !important; } .fn-auth-badge, .fn-escrow-v2-num, .fn-escrow-v2-shield-line, .fn-journey-eyebrow, .fn-plan-tier, .fn-section-badge, .fn-dup-btn, #fn-dup-label{ color: rgb(var(--ta)) !important; } .fn-hero .fn-hero-trust-item, .fn-hero .fn-hero-scroll span { color: rgb(var(--tt2)) !important; } .fn-hero .fn-auth-badge { color: rgb(var(--tad)) !important; } .fn-cancel-confirm-body, .fn-ck-banner-text, .fn-ck-reject-btn, .fn-cny-sub, .fn-od-qc-txt, .fn-v2-aes { color: rgb(var(--tt2)) !important; } .fn-cancel-confirm-title{ color: rgb(var(--td)) !important; } .fn-acc-group-title { color: rgb(var(--ta)) !important; opacity: 1 !important; } .fn-modal-card h3, #fn-modal-backdrop h3 { color: rgb(var(--ta)) !important; opacity: 1 !important; } .fn-auth-tab { color: rgb(var(--tt2)) !important; opacity: 1 !important; } .fn-auth-tab.is-active, .fn-auth-tab[aria-selected="true"] { color: rgb(var(--toa)) !important; } .fn-field-eye { color: rgb(var(--tt2)) !important; opacity: 1 !important; } .fn-rch-overlay { background: rgb(var(--tsh) / 0.42) !important; } .fn-rch-card { background: rgb(var(--ts)) !important; } .fn-rch-card, .fn-rch-card * { color: rgb(var(--tt)) !important; } .fn-rch-sub, .fn-rch-label, .fn-rch-close { color: rgb(var(--tt2)) !important; } .fn-rch-chip, .fn-rch-method { background: rgb(var(--tb2)) !important; border-color: rgb(var(--tf) / 0.12) !important; } .fn-rch-chip.is-sel, .fn-rch-method.is-sel { background: rgb(var(--ta) / 0.10) !important; border-color: rgb(var(--ta)) !important; color: rgb(var(--ta)) !important; } .fn-rch-card .fn-rch-submit { background: rgb(var(--ta)) !important; color: rgb(var(--toa)) !important; } .fn-cart-void-ico { background: rgb(var(--ta) / 0.06) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 22 22' fill='none' stroke='%239E4630' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3.5 8.5h15L17 19a2 2 0 01-2 1.5H7A2 2 0 015 19L3.5 8.5z'/%3E%3Cpath d='M8 8.5V7a3 3 0 016 0v1.5'/%3E%3C/svg%3E") center / 30px no-repeat !important; } .fn-cart-select { background: rgb(var(--ts)) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%239E4630' stroke-width='2.5' stroke-linecap='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") right 8px center / 12px no-repeat !important; } .fn-enh-valid { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%232F6B4F' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E") !important; } .fn-g3-flame { background: no-repeat center/contain url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%239E4630'%3E%3Cpath d='M12 2s5 4.5 5 10a5 5 0 0 1-10 0c0-1.5.5-2.8 1.2-3.8C8 9.5 8.5 11 10 11c0-2 1-4 2-5 0-1.5 0-3 0-4z'/%3E%3C/svg%3E") !important; } .fn-db-brandsel { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%239E4630' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") !important; } .fn-plan-feat--ok::before { background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' fill='none' stroke='%232F6B4F' stroke-width='2.5' stroke-linecap='round' xmlns='http://www.w3.org/2000/svg'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E") !important; } .fn-c-rise { animation: fn-c-rise 0.62s cubic-bezier(0.22, 0.61, 0.36, 1) both; } @keyframes fn-c-rise { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } } html.fn-motion-off .fn-c-rise, html.fn-motion-off [data-fn-v2-anim] { animation: none !important; transition: none !important; } @media (prefers-reduced-motion: reduce) { .fn-c-rise { animation: none !important; } } .fn-notif-panel { background: rgb(var(--ts2)) !important; border: var(--fn-c-rule) !important; border-radius: var(--fn-c-radius-lg) !important; box-shadow: var(--fn-c-shade) !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important; overflow: hidden !important; } .fn-notif-panel::before { display: none !important; } .fn-notif-backdrop { background: rgb(var(--tsh) / 0.38) !important; backdrop-filter: none !important; } .fn-notif-head { padding: 15px 46px 11px 18px !important; border-bottom: var(--fn-c-rule) !important; background: rgb(var(--ts2)) !important; } .fn-notif-head-title { font-weight: 700 !important; letter-spacing: -0.01em !important; } .fn-notif-mark-all, .fn-notif-clear-all { border-radius: var(--fn-c-pill) !important; border: var(--fn-c-rule) !important; color: rgb(var(--tt2)) !important; padding: 5px 10px !important; } .fn-notif-mark-all:hover, .fn-notif-clear-all:hover { color: rgb(var(--ta)) !important; border-color: rgb(var(--ta) / 0.45) !important; } .fn-notif-close { border-radius: var(--fn-c-pill) !important; color: rgb(var(--tt2)) !important; } .fn-notif-close:hover { color: rgb(var(--ta)) !important; background: rgb(var(--ta) / 0.10) !important; } .fn-notif-body { padding: 6px 0 !important; } .fn-notif-body::-webkit-scrollbar-thumb { background: rgb(var(--ta) / 0.28) !important; } .fn-notif-card { position: relative !important; display: block !important; padding: 10px 40px 10px 34px !important; margin: 0 7px !important; background: transparent !important; border: 0 !important; border-radius: var(--fn-c-radius-sm) !important; box-shadow: none !important; opacity: 1 !important; transition: background 0.16s ease !important; } .fn-notif-card::after { content: '' !important; position: absolute !important; left: 12px !important; right: 12px !important; bottom: 0 !important; height: 1px !important; background: rgb(var(--tf) / 0.07) !important; pointer-events: none !important; } .fn-notif-card:last-child::after { display: none !important; } .fn-notif-card:hover { background: rgb(var(--tf) / 0.03) !important; } .fn-notif-card.is-unread { background: rgb(var(--ta) / 0.045) !important; } .fn-notif-card.is-unread:hover { background: rgb(var(--ta) / 0.075) !important; } .fn-notif-card.is-read { opacity: 1 !important; } .fn-notif-card.is-read:hover { opacity: 1 !important; } .fn-notif-card:focus-visible { outline: 2px solid rgb(var(--ta)) !important; outline-offset: -2px !important; } .fn-notif-unread-dot { position: absolute !important; top: 16px !important; left: 15px !important; width: 7px !important; height: 7px !important; margin: 0 !important; border-radius: var(--fn-c-pill) !important; background: rgb(var(--ta)) !important; opacity: 1 !important; transform: none !important; } .fn-notif-card.is-read .fn-notif-unread-dot { background: rgb(var(--tf) / 0.20) !important; opacity: 1 !important; transform: none !important; } .fn-notif-card-inner { min-width: 0 !important; cursor: pointer !important; } .fn-notif-card-title { font-size: 0.87rem !important; font-weight: 700 !important; letter-spacing: -0.01em !important; color: rgb(var(--tt)) !important; white-space: nowrap !important; overflow: hidden !important; text-overflow: ellipsis !important; margin: 0 !important; } .fn-notif-card.is-read .fn-notif-card-title { font-weight: 500 !important; color: rgb(var(--tt2)) !important; } .fn-notif-card-msg { font-size: 0.81rem !important; line-height: 1.5 !important; color: rgb(var(--tt2)) !important; max-height: 0 !important; opacity: 0 !important; overflow: hidden !important; margin: 0 !important; transition: max-height 0.26s ease, opacity 0.2s ease, margin-top 0.26s ease !important; } .fn-notif-card-actions { max-height: 0 !important; overflow: hidden !important; margin: 0 !important; transition: max-height 0.26s ease, margin-top 0.26s ease !important; } .fn-notif-card:hover .fn-notif-card-msg, .fn-notif-card:focus .fn-notif-card-msg, .fn-notif-card:focus-within .fn-notif-card-msg { max-height: 300px !important; opacity: 1 !important; margin-top: 4px !important; } .fn-notif-card:hover .fn-notif-card-actions, .fn-notif-card:focus .fn-notif-card-actions, .fn-notif-card:focus-within .fn-notif-card-actions { max-height: 64px !important; margin-top: 9px !important; } .fn-notif-card-date { font-size: 0.69rem !important; color: rgb(var(--tt3)) !important; font-variant-numeric: tabular-nums !important; margin: 2px 0 0 !important; } .fn-notif-status-btn { background: rgb(var(--ta)) !important; color: rgb(var(--toa)) !important; border: 1px solid rgb(var(--ta)) !important; border-radius: var(--fn-c-pill) !important; font-weight: 600 !important; padding: 5px 12px !important; } .fn-notif-status-btn:hover { background: rgb(var(--tad)) !important; } .fn-notif-del { position: absolute !important; top: 9px !important; right: 10px !important; width: 24px !important; height: 24px !important; border-radius: var(--fn-c-pill) !important; color: rgb(var(--tt3)) !important; background: transparent !important; border: 0 !important; } .fn-notif-del:hover { color: rgb(var(--td)) !important; background: rgb(var(--td) / 0.10) !important; } .fn-notif-empty { padding: 44px 20px !important; text-align: center !important; color: rgb(var(--tt3)) !important; font-size: 0.88rem !important; line-height: 1.55 !important; } .fn-notif-empty b { display: block !important; color: rgb(var(--tt2)) !important; font-size: 0.95rem !important; font-weight: 700 !important; margin-bottom: 4px !important; } @media (hover: none), (any-pointer: coarse) { .fn-notif-card-msg { max-height: 300px !important; opacity: 1 !important; margin-top: 4px !important; transition: none !important; } .fn-notif-card-actions { max-height: 64px !important; margin-top: 9px !important; transition: none !important; } .fn-notif-card-title { white-space: normal !important; overflow: visible !important; text-overflow: clip !important; } } html.fn-motion-off .fn-notif-card, html.fn-motion-off .fn-notif-card-msg, html.fn-motion-off .fn-notif-card-actions { transition: none !important; } @media (prefers-reduced-motion: reduce) { .fn-notif-card, .fn-notif-card-msg, .fn-notif-card-actions { transition: none !important; } }