/* ========================================================================== Novelpix : thème « tech premium » (27/09/2026) Couche posée APRÈS les styles de la page, activée par . Ne change aucun texte : elle remappe les couleurs du site vers un fond sombre, restyle les composants et ajoute les effets (halos, verre, projecteur, bordure lumineuse). Pages concernées : tout le site sauf plaquette.html, visuels-linkedin.html et demo/ (v3, 27/09). Le quiz FM-Score, le formulaire d'essai et la maquette du plan gardent leurs couleurs claires (jetons d'origine restitués plus bas). Nom de fichier versionné (v3 : étendu à toutes les pages, 27/09) : le CSS est mis en cache 30 jours. ========================================================================== */ @property --p-ang { syntax: ""; inherits: false; initial-value: 0deg; } html.premium { /* palette du thème */ --p-bg: #0f2044; --p-bg2: #15294f; --p-line: rgba(170, 198, 236, .20); --p-line2: rgba(170, 198, 236, .34); --p-text: #e3ebf6; --p-muted: #b8c7dd; --p-accent: #ff6a2b; --p-accent2: #ffb088; --p-blue: #5b9dff; --p-cyan: #38bdf8; --p-verre: linear-gradient(180deg, rgba(255,255,255,.10), rgba(255,255,255,.045)); /* jetons du site, remappés pour le sombre */ --blue-dark: #eef4fc; --blue: #86b6ff; --blue-light: rgba(91, 157, 255, .13); --orange: #ff5f1f; --orange-light: rgba(255, 106, 43, .09); --grey-light: #17305c; --grey-mid: rgba(170, 198, 236, .22); --grey-text: #b8c7dd; --white: #16305d; --black: #e3ebf6; color-scheme: dark; background: var(--p-bg); } /* ---------------------------------------------------------------- fond : halos et quadrillage de plan */ html.premium body { background: transparent; color: var(--p-text); font-family: "Segoe UI Variable Text", "Segoe UI", -apple-system, BlinkMacSystemFont, "Inter", system-ui, sans-serif; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } html.premium body::before { content: ""; position: fixed; inset: -20vh -20vw; z-index: -2; pointer-events: none; background: radial-gradient(44vw 34vw at 12% 8%, rgba(76, 145, 255, .34), transparent 70%), radial-gradient(36vw 30vw at 92% 30%, rgba(255, 110, 50, .18), transparent 70%), radial-gradient(50vw 34vw at 50% 110%, rgba(56, 189, 248, .18), transparent 70%); animation: p-halos 26s ease-in-out infinite alternate; } html.premium body::after { content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none; background-image: linear-gradient(rgba(190, 214, 245, .07) 1px, transparent 1px), linear-gradient(90deg, rgba(190, 214, 245, .07) 1px, transparent 1px); background-size: 56px 56px; -webkit-mask-image: radial-gradient(ellipse 80% 60% at 50% 0%, #000 30%, transparent 85%); mask-image: radial-gradient(ellipse 80% 60% at 50% 0%, #000 30%, transparent 85%); } @keyframes p-halos { to { transform: translate3d(3vw, 4vh, 0) scale(1.08); } } html.premium ::selection { background: rgba(255, 106, 43, .35); color: #fff; } html.premium a { text-underline-offset: 3px; } /* ---------------------------------------------------------------- titres */ html.premium :is(section, header, main) :is(h1, h2) { letter-spacing: -.025em; } html.premium :is(section, main) h2:not(.fmscore h2) { color: #fff; background: linear-gradient(180deg, #ffffff 35%, #a8c4ee 120%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; } html.premium :is(section, main) h3 { color: #f3f7fd; } html.premium :is(.hero h1 em) { font-style: normal; background: linear-gradient(100deg, #ffb088 0%, #ff6a2b 40%, #ffd166 60%, #ff6a2b 80%); background-size: 220% 100%; -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; animation: p-miroir 7s ease-in-out infinite; } @keyframes p-miroir { 50% { background-position: 100% 0; } } /* étiquettes de section */ html.premium .section-tag { background: rgba(91, 157, 255, .10); color: #a9cbff; border: 1px solid rgba(91, 157, 255, .28); box-shadow: 0 0 24px -6px rgba(91, 157, 255, .45); } html.premium .section-tag.orange { background: rgba(255, 106, 43, .10); color: var(--p-accent2); border-color: rgba(255, 106, 43, .3); } /* ---------------------------------------------------------------- barre de navigation */ html.premium nav { background: rgba(15, 32, 68, .74) !important; -webkit-backdrop-filter: saturate(160%) blur(16px); backdrop-filter: saturate(160%) blur(16px); border-bottom: 1px solid var(--p-line); box-shadow: none; } html.premium nav.scrolled, html.premium nav.defile { box-shadow: 0 10px 40px -10px rgba(0, 0, 0, .7); } html.premium :is(.nav-link, nav .links a:not(.cta)) { color: rgba(227, 235, 246, .78) !important; transition: color .2s; } html.premium :is(.nav-link, nav .links a:not(.cta)):hover { color: #fff !important; } html.premium :is(.nav-cta, nav .links a.cta) { background: linear-gradient(180deg, #ff7a3d, #ee4f0e) !important; color: #fff !important; box-shadow: 0 0 0 1px rgba(255, 255, 255, .14) inset, 0 8px 24px -8px rgba(255, 95, 31, .8); } html.premium #nvx-operat-banner { background: linear-gradient(90deg, #b8390a, #ea580c 50%, #b8390a) !important; background-size: 200% 100% !important; animation: p-miroir 9s linear infinite; } /* ---------------------------------------------------------------- boutons */ html.premium .btn-primary { background: linear-gradient(180deg, #ff7a3d 0%, #ee4f0e 100%) !important; color: #fff !important; border: 0; box-shadow: 0 0 0 1px rgba(255, 255, 255, .16) inset, 0 12px 34px -10px rgba(255, 95, 31, .85) !important; transition: transform .2s ease, box-shadow .25s ease, filter .2s; } html.premium .btn-primary:hover { transform: translateY(-2px); filter: brightness(1.06); box-shadow: 0 0 0 1px rgba(255, 255, 255, .22) inset, 0 18px 44px -10px rgba(255, 95, 31, .95) !important; } html.premium :is(.btn-secondary, .btn-ghost) { background: rgba(255, 255, 255, .06) !important; color: #fff !important; border: 1px solid rgba(255, 255, 255, .18) !important; -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); box-shadow: 0 1px 0 rgba(255, 255, 255, .08) inset; } html.premium :is(.btn-secondary, .btn-ghost):hover { background: rgba(255, 255, 255, .11) !important; border-color: rgba(255, 255, 255, .32) !important; } /* ---------------------------------------------------------------- héros */ html.premium .hero, html.premium header.hero { background: transparent !important; border-top: 0 !important; } html.premium .hero::after { background: linear-gradient(90deg, rgba(15, 32, 68, .97) 0%, rgba(15, 32, 68, .84) 32%, rgba(15, 32, 68, .4) 58%, rgba(15, 32, 68, .12) 80%, rgba(15, 32, 68, .35) 100%), linear-gradient(180deg, rgba(15, 32, 68, .15) 0%, transparent 30%, transparent 70%, #0f2044 100%), url("hero-immeuble.webp") center right / cover no-repeat; opacity: .95; } @media (max-width: 820px) { html.premium .hero::after { background: linear-gradient(180deg, rgba(15, 32, 68, .84), rgba(15, 32, 68, .94)), url("hero-immeuble.webp") center / cover no-repeat; } } html.premium .hero::before { background: radial-gradient(38% 60% at 18% 40%, rgba(76, 145, 255, .32), transparent 70%), radial-gradient(30% 50% at 78% 18%, rgba(255, 95, 31, .18), transparent 70%); animation: p-halos 18s ease-in-out infinite alternate; } html.premium .hero-tag, html.premium .badge { background: rgba(255, 255, 255, .06) !important; border: 1px solid rgba(255, 255, 255, .16); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); box-shadow: 0 0 30px -8px rgba(91, 157, 255, .5); } html.premium .hero h1, html.premium header.hero h1 { text-shadow: 0 2px 40px rgba(59, 130, 246, .25); } html.premium header.hero::before { opacity: .8; } /* ---------------------------------------------------------------- bandeau de logos et chiffres */ html.premium .nvx-band { background: linear-gradient(180deg, rgba(255, 255, 255, .025), rgba(255, 255, 255, .01)) !important; border-top: 1px solid var(--p-line) !important; border-bottom: 1px solid var(--p-line); } html.premium .nvx-band img { opacity: .62; transition: opacity .25s, filter .25s, transform .25s; } html.premium .nvx-band img:hover { opacity: 1; transform: translateY(-2px); filter: brightness(0) invert(1) drop-shadow(0 0 12px rgba(91, 157, 255, .7)); } html.premium .stats-bar { background: transparent !important; border: 0; border-bottom: 1px solid var(--p-line); } html.premium .stat-num { background: linear-gradient(180deg, #ffffff, #9cc0f2); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; } html.premium .stat-num.orange { background-image: linear-gradient(180deg, #ffc2a3, #ff6a2b); } html.premium .stat-label { color: var(--p-muted); } /* ---------------------------------------------------------------- sections */ html.premium section { background: transparent; } html.premium :is(.problems, .deliverables, .contact, section.tarifs) { background: linear-gradient(180deg, transparent, rgba(120, 175, 255, .075) 20%, rgba(120, 175, 255, .075) 80%, transparent) !important; border-color: transparent !important; } html.premium [style*="background: white"], html.premium [style*="background:white"] { background: transparent !important; } html.premium section[style*="background: var(--grey-light)"] { background: linear-gradient(180deg, transparent, rgba(120, 175, 255, .075) 20%, rgba(120, 175, 255, .075) 80%, transparent) !important; } html.premium section[style*="var(--orange-light)"] { background: radial-gradient(60% 120% at 50% 0%, rgba(255, 95, 31, .14), transparent 70%) !important; border-top: 1px solid rgba(255, 106, 43, .35) !important; } /* pastilles numérotées posées en ligne dans la page */ html.premium [style*="background:var(--blue-dark)"] { background: linear-gradient(135deg, #3b82f6, #1d4ed8) !important; color: #fff !important; box-shadow: 0 0 20px -4px rgba(59, 130, 246, .8); } html.premium [style*="background:var(--orange)"] { box-shadow: 0 0 20px -4px rgba(255, 95, 31, .8); } /* ---------------------------------------------------------------- cartes en verre, projecteur sous la souris */ html.premium :is(.problem-card, .service-card, .deliv-card, .ref-card, .fact-card, .fmscore-widget, .offre, .etape, .fonctions > div, .faq-item, .chain-step, .contact-form, #ressources a[style*="display:block"]) { background: radial-gradient(420px circle at var(--mx, -500px) var(--my, -500px), rgba(255, 122, 61, .11), transparent 45%), var(--p-verre) !important; border: 1px solid var(--p-line) !important; border-radius: 16px; box-shadow: 0 1px 0 rgba(255, 255, 255, .06) inset, 0 24px 48px -28px rgba(0, 0, 0, .9) !important; transition: transform .3s cubic-bezier(.2, .7, .2, 1), border-color .3s, box-shadow .3s; } html.premium :is(.problem-card, .service-card, .deliv-card, .ref-card, .fact-card, .offre, .etape, .fonctions > div, .chain-step, #ressources a[style*="display:block"]):hover { border-color: rgba(255, 138, 76, .38) !important; transform: translateY(-4px); box-shadow: 0 1px 0 rgba(255, 255, 255, .08) inset, 0 30px 60px -28px rgba(0, 0, 0, .95), 0 0 40px -16px rgba(255, 106, 43, .55) !important; } html.premium :is(.problem-card, .ref-card)[style*="border-left"], html.premium .problem-card { border-left-width: 1px !important; } html.premium :is(.service-icon, .contact-line .cl-icon) { background: linear-gradient(135deg, rgba(91, 157, 255, .22), rgba(91, 157, 255, .06)) !important; border: 1px solid rgba(91, 157, 255, .3); box-shadow: 0 0 22px -6px rgba(91, 157, 255, .6); } html.premium .icon { stroke: #a9cbff; } html.premium :is(.problem-icon, .deliv-card .deliv-icon) { background: none !important; box-shadow: none !important; border: 0 !important; } html.premium :is(.problem-icon, .deliv-card .deliv-icon) .icon { filter: drop-shadow(0 0 8px rgba(91, 157, 255, .7)); } html.premium table [style*="background:var(--blue-dark)"] { background: rgba(91, 157, 255, .14) !important; box-shadow: none !important; } html.premium :is(.service-tag) { background: rgba(255, 255, 255, .06) !important; color: var(--p-muted) !important; border: 1px solid var(--p-line); } html.premium :is(.service-tag.hot) { background: rgba(255, 106, 43, .12) !important; color: var(--p-accent2) !important; border-color: rgba(255, 106, 43, .3); } html.premium .ref-card { border-top: 2px solid rgba(91, 157, 255, .55) !important; } html.premium .ref-card .ref-sector { color: #7fb2ff; } /* bordure lumineuse qui tourne : cartes à mettre en avant */ html.premium :is(.offre.reco, .fmscore-widget, .contact-form, form.carte, .contact-card) { position: relative; isolation: isolate; } html.premium :is(.offre.reco, .fmscore-widget, .contact-form, form.carte, .contact-card)::after { content: ""; position: absolute; inset: -1px; border-radius: inherit; padding: 1.5px; pointer-events: none; z-index: 2; background: conic-gradient(from var(--p-ang), transparent 0 62%, rgba(255, 106, 43, .9) 76%, #ffd9c4 82%, rgba(91, 157, 255, .9) 90%, transparent 97%); -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; animation: p-tour 6s linear infinite; } @keyframes p-tour { to { --p-ang: 360deg; } } /* ---------------------------------------------------------------- blocs sombres d'origine (fonds devenus clairs par le remappage) */ html.premium :is(.operat-box, .plugin-section, .cta-block, section.essai, .quiz-cta, .contact-card) { background: radial-gradient(70% 90% at 0% 0%, rgba(59, 130, 246, .22), transparent 60%), radial-gradient(60% 80% at 100% 100%, rgba(255, 95, 31, .16), transparent 60%), linear-gradient(180deg, #1c3a70, #15305e) !important; border: 1px solid var(--p-line2); color: var(--p-text); } html.premium section.essai { border-left: 0; border-right: 0; } html.premium .fmscore { background: radial-gradient(50% 90% at 15% 30%, rgba(59, 130, 246, .28), transparent 65%), radial-gradient(40% 80% at 90% 70%, rgba(255, 95, 31, .2), transparent 65%), #173466 !important; border-top: 1px solid var(--p-line); border-bottom: 1px solid var(--p-line); } html.premium .fmscore h2 { color: #fff; } html.premium .contact-form { background: var(--p-verre) !important; } html.premium .chain-step.highlight { background: linear-gradient(135deg, rgba(255, 106, 43, .25), rgba(255, 106, 43, .08)) !important; border-color: rgba(255, 106, 43, .45) !important; } html.premium .chain-arrow { color: var(--p-line2); } html.premium .highlight-pill { background: rgba(255, 106, 43, .14); color: var(--p-accent2); } /* démonstration vidéo */ html.premium .nvxgif h2 { color: #fff; } html.premium .nvxgif p.sub, html.premium .nvxgif .note { color: var(--p-muted); } html.premium .nvxgif a.frame { border: 1px solid var(--p-line2); background: #16305d; box-shadow: 0 0 0 1px rgba(255, 255, 255, .04) inset, 0 40px 90px -30px rgba(0, 0, 0, .95), 0 0 80px -30px rgba(59, 130, 246, .55); transition: transform .4s ease, box-shadow .4s ease; } html.premium .nvxgif a.frame:hover { transform: translateY(-4px) scale(1.005); box-shadow: 0 0 0 1px rgba(255, 255, 255, .06) inset, 0 50px 100px -30px rgba(0, 0, 0, .95), 0 0 100px -24px rgba(255, 106, 43, .5); } /* ---------------------------------------------------------------- tableaux */ html.premium table { border-collapse: separate !important; border-spacing: 0; border: 1px solid var(--p-line); border-radius: 14px; overflow: hidden; } html.premium th { background: rgba(91, 157, 255, .12) !important; color: #dbe8fb !important; border-bottom: 1px solid var(--p-line2) !important; } html.premium td { border-bottom: 1px solid var(--p-line) !important; } html.premium tr:last-child td { border-bottom: 0 !important; } html.premium tbody tr { transition: background .2s; } html.premium tbody tr:hover { background: rgba(255, 255, 255, .03); } /* ---------------------------------------------------------------- FAQ */ html.premium .faq-item { margin-top: 12px; } html.premium .faq-item summary h3 { color: #f3f7fd; } html.premium .faq-chevron { border-color: #a9cbff; } html.premium details.faq { border-color: var(--p-line); } html.premium .faqs { border-color: var(--p-line); } html.premium details.faq summary::after { background-color: rgba(255, 255, 255, .06); } html.premium details.faq[open] summary::after { background-color: rgba(255, 106, 43, .18); } /* ---------------------------------------------------------------- page NovelCAD */ html.premium section.tarifs h2 { background: linear-gradient(180deg, #fff 35%, #a8c4ee 120%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; } html.premium .periode div { background: rgba(255, 255, 255, .05); border-color: var(--p-line2); } html.premium .periode button { color: var(--p-muted); } html.premium .periode button[aria-pressed="true"] { background: linear-gradient(180deg, #ff7a3d, #ee4f0e); color: #fff; box-shadow: 0 6px 20px -6px rgba(255, 95, 31, .8); } html.premium .periode em { color: #6ee7a0; } html.premium .periode button[aria-pressed="true"] em { color: #fff; } html.premium .offre li { color: var(--p-text); border-bottom-color: var(--p-line); } html.premium .offre li::before { border-color: #4ade80; } html.premium .offre .prix b { background: linear-gradient(180deg, #fff, #a8c4ee); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; } html.premium .offre.reco { background: radial-gradient(120% 80% at 50% 0%, rgba(255, 106, 43, .16), transparent 60%), var(--p-verre) !important; } html.premium .offre .btn-secondaire { background: rgba(255, 255, 255, .05); color: #fff; border-color: rgba(255, 255, 255, .22); } html.premium .offre .btn-secondaire:hover { background: #fff; color: #0a1428; } html.premium .etape .num { box-shadow: 0 0 22px -4px rgba(255, 95, 31, .9); } html.premium .callout { background: linear-gradient(90deg, rgba(255, 106, 43, .12), rgba(255, 106, 43, .03)); border-left-color: var(--p-accent); } html.premium .toc { background: var(--p-verre); border-color: var(--p-line); } html.premium code { background: rgba(255, 255, 255, .08); padding: 1px 6px; border-radius: 5px; color: #ffd2bc; } html.premium .ecran { box-shadow: 0 0 0 1px rgba(255, 255, 255, .08), 0 40px 100px -30px rgba(0, 0, 0, .95), 0 0 90px -20px rgba(59, 130, 246, .55); } html.premium section.essai a[href^="mailto"] { color: var(--p-accent2) !important; } /* ---------------------------------------------------------------- pied de page */ html.premium footer { background: linear-gradient(180deg, transparent, rgba(8, 18, 40, .55)) !important; border-top: 1px solid var(--p-line); } /* ---------------------------------------------------------------- îlots clairs : jetons d'origine restitués */ html.premium :is(.quiz-overlay, form.carte, .ecran) { --blue-dark: #1a365d; --blue: #2b5797; --blue-light: #d6e4f7; --orange: #e8500a; --orange-light: #fef0e8; --grey-light: #f5f7fa; --grey-mid: #e2e8f0; --grey-text: #4a5568; --white: #ffffff; --black: #1a202c; color-scheme: light; } html.premium .quiz-overlay { color: #1a202c; } html.premium .quiz-overlay h2, html.premium .quiz-overlay h3 { -webkit-text-fill-color: currentColor; background: none; } html.premium form.carte h3 { color: #1a365d; } html.premium form.carte .reussite h3 { color: #15803d; } html.premium form.carte { color: #1a202c; box-shadow: 0 30px 80px -20px rgba(0, 0, 0, .9), 0 0 80px -30px rgba(255, 106, 43, .6); } /* ---------------------------------------------------------------- confort */ @media (prefers-reduced-motion: reduce) { html.premium body::before, html.premium .hero::before, html.premium #nvx-operat-banner, html.premium .hero h1 em, html.premium :is(.offre.reco, .fmscore-widget, .contact-form, form.carte, .contact-card)::after { animation: none !important; } } @media (max-width: 640px) { html.premium body::after { background-size: 40px 40px; } } /* ---------------------------------------------------------------- mobile : plus de débordement horizontal (constaté avant le thème : le tableau comparatif et le bloc contact élargissaient l'accueil à 664 px) */ html.premium .contact-inner > * { min-width: 0; } html.premium .contact-form iframe { max-width: 100%; } @media (max-width: 760px) { html.premium table { display: block; overflow-x: auto; -webkit-overflow-scrolling: touch; } } /* ---------------------------------------------------------------- gabarit article (header.page) et pages légales, 404, 410 */ html.premium header.page { background: radial-gradient(60% 120% at 10% 0%, rgba(76, 145, 255, .38), transparent 60%), radial-gradient(40% 90% at 95% 100%, rgba(255, 110, 50, .22), transparent 60%), linear-gradient(135deg, #1c3a70, #142d5a) !important; border-top: 0 !important; border-bottom: 1px solid var(--p-line); position: relative; overflow: hidden; } html.premium header.page::after { content: ""; position: absolute; inset: 0; pointer-events: none; background-image: linear-gradient(rgba(190, 214, 245, .08) 1px, transparent 1px), linear-gradient(90deg, rgba(190, 214, 245, .08) 1px, transparent 1px); background-size: 40px 40px; -webkit-mask-image: linear-gradient(90deg, transparent, #000 60%); mask-image: linear-gradient(90deg, transparent, #000 60%); } html.premium header.page .inner { position: relative; z-index: 1; } html.premium header.page h1 { color: #fff; text-shadow: 0 2px 40px rgba(59, 130, 246, .35); } html.premium main :is(p, li, dd) { color: var(--p-muted); } html.premium main :is(strong, b) { color: #eef4fc; } html.premium main a { color: #9cc3ff; } html.premium main a:hover { color: #fff; } html.premium :is(.toc, div.lead, .lk) { background: var(--p-verre) !important; border: 1px solid var(--p-line) !important; border-radius: 14px; } html.premium .lk { transition: transform .25s, border-color .25s, box-shadow .25s; } html.premium .lk:hover { border-color: rgba(255, 138, 76, .45) !important; box-shadow: 0 0 36px -14px rgba(255, 106, 43, .6); } html.premium .lk-t { color: #f3f7fd; } html.premium .toc p { color: #fff; } html.premium dl div { border-left: 2px solid rgba(91, 157, 255, .35); padding-left: 14px; } html.premium dt { color: #eef4fc; } html.premium .wrap h1, html.premium .wrap h2 { color: #fff; } html.premium .wrap :is(p, li) { color: var(--p-muted); } html.premium .wrap a { color: #9cc3ff; } html.premium .nvx-maj { color: rgba(227, 235, 246, .7); } /* pastilles d'étapes en compteur CSS, tableaux à fond blanc des pages de type accueil */ html.premium ol.etapes li::before { background: linear-gradient(135deg, #3b82f6, #1d4ed8) !important; color: #fff !important; box-shadow: 0 0 20px -4px rgba(59, 130, 246, .8); } html.premium table { background: var(--p-verre) !important; } html.premium thead th { background: rgba(91, 157, 255, .14) !important; color: #dbe8fb !important; } html.premium .contact-card :is(p, .small) { color: var(--p-muted); }