/** * canvas.css — Fond mesh fixe + panneaux suspendus (nael.so) * Activer via : ou canvas-consultant */ :root { --canvas-cream: #F7F5F0; --canvas-cream-dark: #EFECE4; --canvas-dark: #1C1A14; --canvas-consultant-base: #F4F7FF; --canvas-consultant-dark: #0C1527; --radius-xl: 22px; --shadow-float: 0 2px 4px rgba(28, 26, 20, 0.03), 0 10px 28px rgba(28, 26, 20, 0.08), 0 32px 80px rgba(28, 26, 20, 0.12), 0 0 0 1px rgba(28, 26, 20, 0.05); --shadow-float-hover: 0 4px 8px rgba(28, 26, 20, 0.04), 0 16px 40px rgba(28, 26, 20, 0.1), 0 40px 100px rgba(28, 26, 20, 0.14), 0 0 0 1px rgba(28, 26, 20, 0.06); --shadow-float-dark: 0 12px 40px rgba(0, 0, 0, 0.35), 0 40px 100px rgba(0, 0, 0, 0.28), 0 0 0 1px rgba(255, 255, 255, 0.07); } /* ─── Canvas restaurateur (cream) — !important beats inline body { background } ─── */ body.canvas-page.canvas-cream { background-color: var(--canvas-cream) !important; background-image: radial-gradient(ellipse 90% 55% at 12% -5%, rgba(27, 79, 204, 0.11), transparent 52%), radial-gradient(ellipse 70% 45% at 92% 18%, rgba(168, 192, 255, 0.22), transparent 48%), radial-gradient(ellipse 60% 40% at 50% 105%, rgba(28, 26, 20, 0.05), transparent 50%) !important; background-attachment: fixed !important; } /* ─── Canvas consultant (bleu) ─── */ body.canvas-page.canvas-consultant { background-color: var(--canvas-consultant-base) !important; background-image: radial-gradient(ellipse 85% 50% at 10% -8%, rgba(27, 79, 204, 0.14), transparent 55%), radial-gradient(ellipse 65% 45% at 95% 25%, rgba(168, 192, 255, 0.35), transparent 50%), radial-gradient(ellipse 55% 38% at 48% 100%, rgba(12, 21, 39, 0.04), transparent 48%) !important; background-attachment: fixed !important; } body.canvas-page main { position: relative; z-index: 0; } /* ─── Panneau flottant générique ─── */ body.canvas-page .float-panel, body.canvas-page .float-note, body.canvas-page .story-card, body.canvas-page .form-card, body.canvas-page .pricing-card, body.canvas-page .step-card, body.canvas-page .proof-card:not(.proof-metrics .proof-card), body.canvas-page .method-card, body.canvas-page .tool-card-home, body.canvas-page .tool-card, body.canvas-page .calc-card, body.canvas-page .cta-box, body.canvas-page .callout, body.canvas-page article, body.canvas-page .page-panel, body.canvas-page .login-box, body.canvas-page .auth-card, body.canvas-page .legal-card, body.canvas-page .tool-card-home, body.canvas-page .card, body.canvas-page .newsletter-box, body.canvas-page .crise-inner, body.canvas-page .price-box, body.canvas-page .checklist, body.canvas-page .tool-link, body.canvas-page .panel, body.canvas-page .surface-card { box-shadow: var(--shadow-float); } body.canvas-page .float-panel, body.canvas-page .float-note, body.canvas-page .story-card, body.canvas-page .form-card, body.canvas-page .pricing-card, body.canvas-page .step-card, body.canvas-page .method-card, body.canvas-page .tool-card, body.canvas-page .calc-card, body.canvas-page .cta-box, body.canvas-page article, body.canvas-page .page-panel, body.canvas-page .login-box, body.canvas-page .auth-card, body.canvas-page .legal-card, body.canvas-page .card, body.canvas-page .newsletter-box, body.canvas-page .price-box, body.canvas-page .checklist, body.canvas-page .panel, body.canvas-page .surface-card { background: rgba(255, 255, 255, 0.94); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); border: 1px solid rgba(28, 26, 20, 0.08); border-radius: var(--radius-xl); } body.canvas-page .float-note { padding: 28px 32px; } body.canvas-page .pricing-card:hover, body.canvas-page .step-card:hover, body.canvas-page .tool-card:hover, body.canvas-page .tool-card-home:hover, body.canvas-page .method-card:hover, body.canvas-page .card:hover, body.canvas-page .tool-link:hover { box-shadow: var(--shadow-float-hover); transform: translateY(-4px); } body.canvas-page .pricing-card, body.canvas-page .step-card, body.canvas-page .tool-card, body.canvas-page .tool-card-home, body.canvas-page .method-card, body.canvas-page .card, body.canvas-page .tool-link { transition: transform 0.35s ease, box-shadow 0.35s ease; } /* Blog / DAF */ body.canvas-page .formula-box, body.canvas-page .ratio-gauge-wrapper, body.canvas-page .comparison-table-wrapper, body.canvas-page .conseil-daf { box-shadow: var(--shadow-float); border-radius: 14px; } body.canvas-page .faq details, body.canvas-page article .faq details { box-shadow: var(--shadow-float); border-radius: 12px; } body.canvas-page article { padding: 32px 28px 64px; max-width: 720px; } /* Outils */ body.canvas-page .calc-card { padding: 28px 24px; } body.canvas-page .tools-grid .tool-card, body.canvas-page .tools-grid-home .tool-card-home { border-radius: var(--radius-xl); } /* Product shell */ body.canvas-page .product-shell { box-shadow: var(--shadow-float); transition: transform 0.45s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.45s; } body.canvas-page .product-shell:hover { transform: translateY(-6px); box-shadow: var(--shadow-float-hover); } body.canvas-page .hero-stage .product-shell:hover { transform: none; } body.canvas-page .raft-dark .product-shell, body.canvas-page .raft-dark .product-shell:hover { box-shadow: 0 16px 48px rgba(0, 0, 0, 0.5), 0 40px 90px rgba(0, 0, 0, 0.35), 0 0 0 1px rgba(255, 255, 255, 0.08); } body.canvas-page .proof-metrics { box-shadow: var(--shadow-float-dark); } [data-float] { transition: transform 0.15s ease-out; will-change: transform; } /* ─── Raft sombre suspendu ─── */ body.canvas-page .raft-dark { position: relative; margin: 40px 16px 48px; max-width: 1160px; margin-left: auto; margin-right: auto; padding: 4px 0 8px; border-radius: 28px; background: linear-gradient(165deg, #2a261c 0%, var(--canvas-dark) 42%, #16140f 100%); box-shadow: var(--shadow-float-dark); overflow: hidden; } body.canvas-page.canvas-consultant .raft-dark { background: linear-gradient(165deg, #152238 0%, var(--canvas-consultant-dark) 45%, #080e18 100%); } @media (min-width: 768px) { body.canvas-page .raft-dark { margin: 56px 24px 64px; padding: 8px 0 12px; } } body.canvas-page .raft-dark::before { content: ''; position: absolute; inset: 0; background: radial-gradient(ellipse 75% 55% at 85% 0%, rgba(27, 79, 204, 0.16), transparent 58%), radial-gradient(ellipse 50% 40% at 10% 100%, rgba(255, 255, 255, 0.04), transparent 55%); pointer-events: none; } body.canvas-page .raft-dark > section, body.canvas-page .raft-dark > div { position: relative; z-index: 1; } body.canvas-page .raft-dark--solo { margin-top: 48px; margin-bottom: 56px; } body.canvas-page .raft-dark .feat-section.dark, body.canvas-page .raft-dark .section-glissement, body.canvas-page .raft-dark .section-how, body.canvas-page .raft-dark .section-metrics, body.canvas-page .raft-dark .section-problem, body.canvas-page .raft-dark .section-urgence { background: transparent !important; } /* Étapes sur fond sombre — ne pas appliquer le panneau blanc générique */ body.canvas-page .raft-dark .step-card, body.canvas-page .section-how .step-card { background: rgba(255, 255, 255, 0.07) !important; border: 1px solid rgba(255, 255, 255, 0.12) !important; box-shadow: none; color: #f7f5f0; } body.canvas-page .raft-dark .step-card:hover, body.canvas-page .section-how .step-card:hover { background: rgba(255, 255, 255, 0.1) !important; box-shadow: 0 8px 32px rgba(0, 0, 0, 0.25); transform: translateY(-2px); } body.canvas-page .section-how .section-eyebrow { color: rgba(247, 245, 240, 0.72); } body.canvas-page .section-how .section-header h2 { color: #f7f5f0; } body.canvas-page .section-how .section-header .section-desc { color: rgba(247, 245, 240, 0.78); } body.canvas-page .section-how .step-title { color: #f7f5f0; } body.canvas-page .section-how .step-desc { color: rgba(247, 245, 240, 0.82); } body.canvas-page .section-how .step-desc strong { color: #fff; font-weight: 600; } body.canvas-page .section-how .step-num { background: rgba(27, 79, 204, 0.45); color: #fff; } /* ─── Sections landing : fond transparent ─── */ body.canvas-page .proof, body.canvas-page .feat-section, body.canvas-page .feat-section.alt, body.canvas-page .feat-section.dark, body.canvas-page .section-glissement, body.canvas-page .section-how, body.canvas-page .story-section, body.canvas-page .section-pricing, body.canvas-page .section-trust, body.canvas-page .section-faq, body.canvas-page .section-form, body.canvas-page .tools-section, body.canvas-page .section-sources, body.canvas-page .consultant-banner, body.canvas-page .diy-hero, body.canvas-page .section-metrics, body.canvas-page .section-wrap, body.canvas-page .section-problem, body.canvas-page .section-urgence, body.canvas-page .section-roi, body.canvas-page .section-final, body.canvas-page .hero { background: transparent !important; border-bottom-color: transparent; } body.canvas-page .trust-raft { max-width: 920px; margin: 0 auto; padding: 28px 32px; background: rgba(255, 255, 255, 0.9); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border: 1px solid rgba(28, 26, 20, 0.07); border-radius: var(--radius-xl); box-shadow: var(--shadow-float); } body.canvas-page .problem-card, body.canvas-page .metrics-inner, body.canvas-page .roi-card, body.canvas-page .price-card, body.canvas-page .urgence-inner .forfait-card { box-shadow: var(--shadow-float); } body.canvas-page .metrics-inner { box-shadow: var(--shadow-float-dark); } body.canvas-page .problem-card { background: rgba(255, 255, 255, 0.96); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); } body.canvas-page .consultant-banner .consultant-banner-inner { padding: 40px 32px; background: rgba(255, 255, 255, 0.92); border: 1px solid rgba(28, 26, 20, 0.08); border-radius: var(--radius-xl); box-shadow: var(--shadow-float); } body.canvas-page .diy-hero .diy-hero-inner, body.canvas-page .section-final .final-inner { padding: 64px 28px; border-radius: 28px; background: linear-gradient(165deg, #252218 0%, var(--canvas-dark) 45%, #181610 100%); box-shadow: var(--shadow-float-dark); position: relative; overflow: hidden; } body.canvas-page.canvas-consultant .diy-hero .diy-hero-inner, body.canvas-page.canvas-consultant .section-final .final-inner { background: linear-gradient(165deg, #152238 0%, var(--canvas-consultant-dark) 50%, #080e18 100%); } /* Nav scrolled — fond glass harmonisé */ body.canvas-page.canvas-cream nav.scrolled { background: rgba(247, 245, 240, 0.88); } body.canvas-page.canvas-consultant nav.scrolled { background: rgba(244, 247, 255, 0.9); } @media (prefers-reduced-motion: reduce) { [data-float] { transition: none; transform: none !important; } body.canvas-page .product-shell:hover, body.canvas-page .pricing-card:hover, body.canvas-page .step-card:hover { transform: none; } }