/* ============================================================ THEME TOKENS - Use .theme-dark / .theme-light on or ============================================================ */ :root { color-scheme: dark; /* Layout */ --container: 1180px; /* Radius */ --r-lg: 1.2rem; --r-xl: 1.9rem; /* Motion */ --t: 220ms cubic-bezier(.22,.61,.36,1); /* Brand Colors (logo-based, HSL) */ --c-primary: hsl(210 100% 32%); /* #0057A3 */ --c-primary-700: hsl(210 100% 26%); --c-primary-deep: hsl(210 100% 18%); /* #002E5C */ --c-accent: hsl(45 100% 50%); /* #FFC400 */ --c-accent-soft: hsl(47 100% 67%); /* #FFDD55 */ /* Enterprise Colors */ --c-enterprise: hsl(43 60% 46%); --c-enterprise-700: hsl(42 64% 38%); --c-enterprise-800: hsl(41 70% 30%); /* Neutrals (dark defaults) */ --c-bg-1: hsl(220 38% 6%); --c-bg-2: hsl(220 32% 8%); --c-bg: var(--c-bg-1); --c-surface: hsl(220 28% 12%); --c-ink: hsl(210 40% 96%); --c-muted: hsl(215 28% 72%); --c-muted-2: hsl(215 22% 58%); --c-border: hsl(215 24% 22% / 0.7); /* UI Accents */ --c-accent-ink: hsl(210 40% 92%); --c-breadcrumb-link: hsl(215 28% 74% / 0.9); --c-breadcrumb-sep: hsl(215 20% 60% / 0.5); --c-kicker: hsl(215 30% 76% / 0.9); --c-x-icon: hsl(0 0% 100%); --c-control-border: hsl(215 24% 30% / 0.7); --c-control-bg: hsl(215 24% 18% / 0.5); /* Overlays (theme-aware) */ --c-overlay-04: hsl(0 0% 100% / 0.04); --c-overlay-05: hsl(0 0% 100% / 0.05); --c-overlay-06: hsl(0 0% 100% / 0.06); --c-overlay-08: hsl(0 0% 100% / 0.08); --c-overlay-10: hsl(0 0% 100% / 0.10); --c-overlay-12: hsl(0 0% 100% / 0.12); --c-overlay-14: hsl(0 0% 100% / 0.14); --c-overlay-16: hsl(0 0% 100% / 0.16); --c-overlay-18: hsl(0 0% 100% / 0.18); --c-overlay-20: hsl(0 0% 100% / 0.20); --c-overlay-22: hsl(0 0% 100% / 0.22); --c-overlay-30: hsl(0 0% 100% / 0.30); --c-overlay-35: hsl(0 0% 100% / 0.35); /* Shadows (alpha tokens) */ --c-shadow-05: hsl(0 0% 0% / 0.05); --c-shadow-18: hsl(0 0% 0% / 0.18); --c-shadow-30: hsl(0 0% 0% / 0.30); --c-shadow-35: hsl(0 0% 0% / 0.35); --c-shadow-45: hsl(0 0% 0% / 0.45); --c-shadow-55: hsl(0 0% 0% / 0.55); --c-shadow-60: hsl(0 0% 0% / 0.60); --c-shadow-65: hsl(0 0% 0% / 0.65); --c-shadow-72: hsl(0 0% 0% / 0.72); --c-shadow-75: hsl(0 0% 0% / 0.75); /* Shadows (presets) */ --sh-1: 0 10px 28px rgba(0,0,0,.45); --sh-2: 0 18px 52px rgba(0,0,0,.55); --sh-3: 0 30px 95px rgba(0,0,0,.65); /* Ink alpha (theme-aware) */ --c-ink-60: color-mix(in srgb, var(--c-ink) 60%, transparent); --c-ink-70: color-mix(in srgb, var(--c-ink) 70%, transparent); --c-ink-72: color-mix(in srgb, var(--c-ink) 72%, transparent); --c-ink-75: color-mix(in srgb, var(--c-ink) 75%, transparent); --c-ink-80: color-mix(in srgb, var(--c-ink) 80%, transparent); --c-ink-82: color-mix(in srgb, var(--c-ink) 82%, transparent); --c-ink-85: color-mix(in srgb, var(--c-ink) 85%, transparent); --c-ink-88: color-mix(in srgb, var(--c-ink) 88%, transparent); --c-ink-90: color-mix(in srgb, var(--c-ink) 90%, transparent); --c-ink-92: color-mix(in srgb, var(--c-ink) 92%, transparent); --c-ink-95: color-mix(in srgb, var(--c-ink) 95%, transparent); /* Contrast ink */ --c-ink-inverse: hsl(0 0% 0%); --c-mask: hsl(0 0% 0%); --c-transparent: transparent; /* Panel Surfaces */ --c-panel-1: hsl(220 28% 12% / 0.92); --c-panel-2: hsl(220 26% 10% / 0.7); --c-panel-3: hsl(220 28% 12% / 0.86); --c-panel-4: hsl(220 28% 12% / 0.75); --c-panel-5: hsl(220 28% 12% / 0.98); --c-panel-6: hsl(220 28% 12% / 0.05); --c-panel-7: hsl(220 28% 12% / 0.06); --c-panel-8: hsl(220 26% 10% / 0.35); --c-panel-9: hsl(220 24% 9% / 0.3); --c-panel-10: hsl(220 30% 6%); /* Social */ --c-social-fb: hsl(214 89% 52%); --c-social-li: hsl(210 90% 40%); /* Category accents */ --c-accent-cat-1: hsl(210 90% 38%); --c-accent-cat-1-700: hsl(210 95% 30%); --c-accent-cat-2: hsl(210 100% 32%); --c-accent-cat-2-700: hsl(210 100% 26%); --c-accent-cat-3: hsl(210 80% 42%); --c-accent-cat-3-700: hsl(210 80% 34%); --c-accent-cat-4: hsl(210 70% 46%); --c-accent-cat-4-700: hsl(210 75% 38%); --c-accent-cat-5: hsl(45 100% 50%); --c-accent-cat-5-700: hsl(45 100% 42%); /* Glow (restrained) */ --neon-speed: 2.8s; --neon-glow: 0 0 18px color-mix(in srgb, var(--accent) 22%, transparent); /* Spotlight (blog) */ --mx: 50%; --my: 20%; --spot-opacity: 0; --spot-size: 520px; } /* ============================================================ THEME MODES ============================================================ */ .theme-dark { color-scheme: dark; --c-bg: hsl(220 38% 6%); --c-surface: hsl(220 28% 12%); --c-ink: hsl(210 40% 92%); --c-muted: hsl(215 28% 72%); --c-muted-2: hsl(215 22% 58%); --c-border: hsl(215 24% 22% / 0.7); --c-breadcrumb-link: hsl(215 28% 74% / 0.9); --c-breadcrumb-sep: hsl(215 20% 60% / 0.5); --c-kicker: hsl(215 30% 76% / 0.9); --c-x-icon: hsl(0 0% 100%); --c-control-border: hsl(215 24% 30% / 0.7); --c-control-bg: hsl(215 24% 18% / 0.5); --c-panel-1: hsl(220 28% 12% / 0.92); --c-panel-2: hsl(220 26% 10% / 0.7); --c-panel-3: hsl(220 28% 12% / 0.86); --c-panel-4: hsl(220 28% 12% / 0.75); --c-panel-5: hsl(220 28% 12% / 0.98); --c-panel-6: hsl(220 28% 12% / 0.05); --c-panel-7: hsl(220 28% 12% / 0.06); --c-panel-8: hsl(220 26% 10% / 0.35); --c-panel-9: hsl(220 24% 9% / 0.3); --c-panel-10: hsl(220 30% 6%); --c-bg-1: hsl(220 38% 6%); --c-bg-2: hsl(220 32% 8%); } .theme-light { color-scheme: light; --c-primary: hsl(210 95% 30%); --c-primary-700: hsl(210 95% 24%); --c-primary-deep: hsl(210 100% 16%); --c-enterprise: hsl(43 70% 42%); --c-enterprise-700: hsl(42 72% 35%); --c-enterprise-800: hsl(41 75% 28%); --c-bg: hsl(210 20% 97%); --c-surface: hsl(0 0% 100%); --c-ink: hsl(210 19% 17%); --c-muted: hsl(210 12% 42%); --c-muted-2: hsl(210 10% 50%); --c-border: hsl(210 15% 85%); --c-overlay-04: hsl(210 20% 20% / 0.04); --c-overlay-05: hsl(210 20% 20% / 0.05); --c-overlay-06: hsl(210 20% 20% / 0.06); --c-overlay-08: hsl(210 20% 20% / 0.08); --c-overlay-10: hsl(210 20% 20% / 0.10); --c-overlay-12: hsl(210 20% 20% / 0.12); --c-overlay-14: hsl(210 20% 20% / 0.14); --c-overlay-16: hsl(210 20% 20% / 0.16); --c-overlay-18: hsl(210 20% 20% / 0.18); --c-overlay-20: hsl(210 20% 20% / 0.20); --c-overlay-22: hsl(210 20% 20% / 0.22); --c-overlay-30: hsl(210 20% 20% / 0.30); --c-overlay-35: hsl(210 20% 20% / 0.35); --c-accent-ink: hsl(210 20% 14%); --c-breadcrumb-link: hsl(210 25% 25%); --c-breadcrumb-sep: hsl(210 12% 50%); --c-kicker: hsl(210 25% 25%); --c-x-icon: hsl(210 19% 17%); --c-control-border: hsl(210 18% 75%); --c-control-bg: hsl(210 25% 96% / 0.7); --c-panel-1: hsl(0 0% 100% / 0.92); --c-panel-2: hsl(210 20% 97% / 0.7); --c-panel-3: hsl(0 0% 100% / 0.86); --c-panel-4: hsl(0 0% 100% / 0.75); --c-panel-5: hsl(0 0% 100% / 0.98); --c-panel-6: hsl(0 0% 100% / 0.05); --c-panel-7: hsl(0 0% 100% / 0.06); --c-panel-8: hsl(210 20% 97% / 0.35); --c-panel-9: hsl(210 18% 92% / 0.3); --c-panel-10: hsl(210 20% 96%); --c-bg-1: hsl(210 20% 96%); --c-bg-2: hsl(210 20% 99%); } /* Higher-contrast accent text in light mode */ .theme-light :where(.single-formation, .formations-ui, .blog-ui, .single-post, .service-web-ui), .theme-light:where(.single-formation, .formations-ui, .blog-ui, .single-post, .service-web-ui) { --accent-text: var(--accent-deep); --btn-primary-bg-1: var(--accent-700); --btn-primary-bg-2: var(--accent-deep); --chip-active-text: var(--c-surface); } /* Ensure primary buttons stay white in light mode */ .theme-light.single-formation .btn-primary, .theme-light .single-formation .btn-primary { color: var(--c-surface); } /* ============================================================ BASE ============================================================ */ body { background: var(--c-bg); color: var(--c-ink); } /* Dark mode: swap footer banner image */ .theme-dark img[src*="winner_footer_banner_light"], .theme-dark img[srcset*="winner_footer_banner_light"] { content: url("/wp-content/uploads/2026/02/winner_footer_banner_dark.png"); } .theme-dark [style*="winner_footer_banner_light"] { background-image: url("/wp-content/uploads/2026/02/winner_footer_banner_dark.png") !important; } /* Footer banner image swap (background on footer) */ .theme-dark [data-footer*="type-1"] .ct-footer { background-image: url("/wp-content/uploads/2026/02/winner_footer_banner_dark.png") !important; } /* ============================================================ GLOBAL ANIMATIONS (defined once) ============================================================ */ @property --n-angle { syntax: ""; inherits: true; initial-value: 0turn; } @keyframes neonSpin { to { --n-angle: 1turn; } } @keyframes wsLoaderRing { to { transform: rotate(360deg); } } @keyframes wsSpin { to { transform: rotate(360deg); } } /* ============================================================ THEME TOGGLE ============================================================ */ .ws-theme-toggle { position: fixed; left: calc(var(--theme-frame-size, 0px) + var(--back-top-side-offset, 25px)); bottom: 20px; z-index: 9999; display: inline-flex; align-items: center; justify-content: center; gap: .55rem; width: 43px; height: 43px; padding: 0; border-radius: 999px; border: 1px solid var(--c-border); background: color-mix(in srgb, var(--c-surface) 92%, transparent); color: var(--c-ink); font-weight: 900; font-size: .82rem; letter-spacing: .06em; text-transform: uppercase; cursor: pointer; box-shadow: var(--sh-1); transition: transform var(--t), box-shadow var(--t), background var(--t), color var(--t), border-color var(--t); } .ws-theme-toggle__label { position: relative; display: inline-block; width: 1.45rem; height: 1.45rem; } .ws-theme-toggle__label > span { position: absolute; inset: 0; display: inline-flex; align-items: center; justify-content: center; transition: opacity var(--t), transform var(--t); } .ws-theme-toggle__label--sun { opacity: 0; transform: translateY(6px); } .ws-theme-toggle__label--moon { opacity: 1; transform: translateY(2px); } .ws-theme-toggle[data-mode="theme-light"] .ws-theme-toggle__label--sun { opacity: 1; transform: translateY(0); } .ws-theme-toggle[data-mode="theme-light"] .ws-theme-toggle__label--moon { opacity: 0; transform: translateY(-4px); } .ws-theme-toggle__icon { width: 1.3rem; height: 1.3rem; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; } @media (hover:hover) and (pointer:fine) { .ws-theme-toggle:hover { transform: translateY(-2px); box-shadow: var(--sh-2); border-color: color-mix(in srgb, var(--c-ink) 18%, var(--c-border)); } } /* ============================================================ HOME: Instagram Feed (Smash Balloon) - IG AESTHETIC UPGRADE ============================================================ */ :where(.home) { /* IG palette */ --ig-y:#feda75; --ig-o:#fa7e1e; --ig-p:#d62976; --ig-v:#962fbf; --ig-b:#4f5bd5; /* UI constants */ --ig-r: 1.6rem; --ig-ring: 7px; --ig-ring-gap: 7px; --ig-shape-opacity: .18; } /* Smooth theme switching */ @media (prefers-reduced-motion: no-preference) { .theme-switching body, .theme-switching .ct-header, .theme-switching .ct-header * , .theme-switching .ws-theme-toggle, .theme-switching :where(.hero-section, .formations-ui, .single-formation, .blog-ui, .single-post, .service-web-ui), .theme-switching :where(.hero-section, .formations-ui, .single-formation, .blog-ui, .single-post, .service-web-ui) * { transition-property: background-color, color, border-color, box-shadow, fill, stroke; transition-duration: 160ms; transition-timing-function: ease; } } /* Blocksy/Stackable: dark mode palette tweaks for home */ .theme-dark :where(.home) { --theme-palette-color-4: var(--c-ink); --theme-palette-color-5: var(--c-border); } .theme-dark .stk-block [class*=has-text-align-], .theme-dark .stk-block[class*=has-text-align-] { color: var(--c-ink-82); } .theme-dark .partner-card__name { color: var(--c-ink-82); } /* Home section: "Besoin d'aide..." block */ .theme-dark :where(.home) .stk-45929f8 { --theme-palette-color-8: hsl(210 18% 18%); color: var(--theme-palette-color-8); } /* Home section: "Votre centre..." block */ .theme-dark :where(.home) .stk-2264616-container { --theme-palette-color-4: var(--c-ink); --theme-palette-color-1: hsl(210 85% 70%); color: var(--c-ink); } /* Shared container base */ :where(.home) :where(#sb_instagram, .sb_instagram_header) { padding: 1.2rem 1.2rem 1.4rem; border-radius: var(--ig-r); border: 1px solid var(--c-overlay-14); border-left: 7px solid var(--ig-p); box-shadow: var(--sh-2); background: color-mix(in srgb, var(--c-panel-1) 85%, transparent); position: relative; overflow: hidden; } /* Feed container special background */ :where(.home) #sb_instagram { position: relative; isolation: isolate; overflow: hidden; padding: 1.35rem 1.35rem 1.55rem; background: radial-gradient(260px 180px at 8% 0%, color-mix(in srgb, var(--ig-p) 18%, transparent), transparent 70%), radial-gradient(320px 220px at 96% 14%, color-mix(in srgb, var(--ig-b) 16%, transparent), transparent 72%), radial-gradient(220px 180px at 72% 88%, color-mix(in srgb, var(--ig-o) 14%, transparent), transparent 70%), color-mix(in srgb, var(--c-panel-1) 86%, transparent); } /* Header: match feed background in DARK mode */ .theme-dark :where(.home) .sb_instagram_header { background: radial-gradient(260px 180px at 8% 0%, color-mix(in srgb, var(--ig-p) 18%, transparent), transparent 70%), radial-gradient(320px 220px at 96% 14%, color-mix(in srgb, var(--ig-b) 16%, transparent), transparent 72%), radial-gradient(220px 180px at 72% 88%, color-mix(in srgb, var(--ig-o) 14%, transparent), transparent 70%), color-mix(in srgb, var(--c-panel-1) 86%, transparent); } /* FIX: Header text must be white in dark mode */ .theme-dark :where(.home) .sb_instagram_header :where(.sbi_header_text, .sbi_header_text h3, .sbi_header_text p, .sbi_header_text span), .theme-dark :where(.home) .sb_instagram_header :where(a, a:visited) { color: #fff !important; } /* Optional: keep secondary header text slightly softer but still white */ .theme-dark :where(.home) .sb_instagram_header .sbi_header_text :where(p, span) { opacity: .88; } /* Light mode tuning */ .theme-light :where(.home) :where(#sb_instagram, .sb_instagram_header) { border-color: var(--c-overlay-10); border-left-color: color-mix(in srgb, var(--ig-p) 85%, var(--ig-o)); background: radial-gradient(260px 180px at 8% 0%, color-mix(in srgb, var(--ig-p) 14%, transparent), transparent 72%), radial-gradient(320px 220px at 96% 14%, color-mix(in srgb, var(--ig-b) 12%, transparent), transparent 74%), radial-gradient(220px 180px at 72% 88%, color-mix(in srgb, var(--ig-o) 10%, transparent), transparent 72%), color-mix(in srgb, var(--c-panel-1) 92%, transparent); } /* Keep content above background shapes */ :where(.home) #sb_instagram #sbi_images, :where(.home) .sb_instagram_header { position: relative; z-index: 2; margin-bottom: 30px; } :where(.home) .sb_instagram_header { display: flex; align-items: center; padding-left: 1.6rem; gap: 1.1rem; } /* Animated background shapes (feed only) */ :where(.home) #sb_instagram::before, :where(.home) #sb_instagram::after { content: ""; position: absolute; inset: -40%; z-index: 1; pointer-events: none; opacity: var(--ig-shape-opacity); filter: blur(18px) saturate(1.2); transform: translate3d(0,0,0); } :where(.home) #sb_instagram::before { background: radial-gradient(circle at 30% 35%, color-mix(in srgb, var(--ig-p) 70%, transparent) 0 28%, transparent 42%), radial-gradient(circle at 58% 50%, color-mix(in srgb, var(--ig-v) 65%, transparent) 0 22%, transparent 40%), radial-gradient(circle at 76% 30%, color-mix(in srgb, var(--ig-b) 60%, transparent) 0 18%, transparent 38%); animation: igBlobFloat1 14s ease-in-out infinite; } :where(.home) #sb_instagram::after { background: radial-gradient(circle at 22% 68%, color-mix(in srgb, var(--ig-y) 70%, transparent) 0 18%, transparent 40%), radial-gradient(circle at 62% 72%, color-mix(in srgb, var(--ig-o) 68%, transparent) 0 22%, transparent 42%), radial-gradient(circle at 80% 60%, color-mix(in srgb, var(--ig-p) 60%, transparent) 0 16%, transparent 38%); animation: igBlobFloat2 18s ease-in-out infinite; } @keyframes igBlobFloat1 { 0%,100% { transform: translate(-2%, -3%) rotate(0deg) scale(1); } 50% { transform: translate(3%, 2%) rotate(12deg) scale(1.05); } } @keyframes igBlobFloat2 { 0%,100% { transform: translate(2%, 2%) rotate(0deg) scale(1); } 50% { transform: translate(-3%, -2%) rotate(-10deg) scale(1.06); } } /* Header typography (general/default) */ :where(.home) :where(.sb_instagram_header, #sb_instagram) .sbi_header_text, :where(.home) :where(.sb_instagram_header, #sb_instagram) .sbi_header_text h3 { color: var(--c-ink); font-weight: 900; letter-spacing: -0.01em; } :where(.home) :where(.sb_instagram_header, #sb_instagram) .sbi_header_text :where(p, span) { color: var(--c-muted); } /* Grid items */ :where(.home) #sb_instagram #sbi_images .sbi_item { background: var(--c-panel-3); border: 1px solid var(--c-overlay-12); border-radius: 1.2rem; box-shadow: 0 10px 22px var(--c-shadow-45); overflow: hidden; transform: translateZ(0); transition: transform var(--t), box-shadow var(--t), border-color var(--t), filter var(--t); } :where(.home) #sb_instagram #sbi_images .sbi_item .sbi_photo { border-radius: 1.1rem; background: var(--c-panel-1); } @media (hover:hover) and (pointer:fine) { :where(.home) #sb_instagram #sbi_images .sbi_item:hover { transform: translateY(-4px) scale(1.012); border-color: color-mix(in srgb, var(--ig-p) 35%, var(--c-overlay-18)); box-shadow: 0 18px 46px var(--c-shadow-60), 0 0 0 1px color-mix(in srgb, var(--ig-v) 18%, transparent), 0 0 22px color-mix(in srgb, var(--ig-p) 20%, transparent); filter: saturate(1.12); } } /* Buttons (play/lightbox) */ :where(.home) #sb_instagram :where(.sbi_playbtn, .sbi_lightbox) { border-radius: 999px; } /* Follow button - IG gradient */ :where(.home) :where(#sb_instagram, .sb_instagram_header) .sbi_follow_btn a { border-radius: 999px; font-weight: 900; letter-spacing: 0.06em; text-transform: uppercase; color: var(--c-ink-inverse); border: 1px solid transparent; background: linear-gradient(135deg, var(--ig-p), var(--ig-v), var(--ig-b)); box-shadow: 0 18px 56px rgba(214,41,118,.18); } @media (hover:hover) and (pointer:fine) { :where(.home) :where(#sb_instagram, .sb_instagram_header) .sbi_follow_btn a:hover { transform: translateY(-2px); box-shadow: 0 28px 90px rgba(214,41,118,.22), 0 0 24px rgba(150,47,191,.18); } } /* Accessibility */ @media (prefers-reduced-motion: reduce) { :where(.home) #sb_instagram::before, :where(.home) #sb_instagram::after, :where(.home) .sb_instagram_header .sbi_header_img::before, :where(.home) .sb_instagram_header .sbi_header_img::after { animation: none !important; } } /* ============================================================ HOME: Google Reviews Feed (Smash Balloon Reviews) ============================================================ */ :where(.home) #sb-reviews-container-1 { --gr-blue:#4285f4; --gr-red:#ea4335; --gr-yellow:#fbbc05; --gr-green:#34a853; --gr-r:1.6rem; } :where(.home) #sb-reviews-container-1 .sb-feed-container { position: relative; isolation: isolate; overflow: hidden; padding: 1rem 1rem 1.1rem; border-radius: var(--gr-r); border: 1px solid var(--c-overlay-14); border-left: 7px solid var(--gr-blue); box-shadow: var(--sh-2); background: radial-gradient(260px 180px at 8% 0%, color-mix(in srgb, var(--gr-blue) 16%, transparent), transparent 70%), radial-gradient(320px 220px at 96% 14%, color-mix(in srgb, var(--gr-green) 14%, transparent), transparent 72%), radial-gradient(220px 180px at 72% 88%, color-mix(in srgb, var(--gr-yellow) 12%, transparent), transparent 70%), color-mix(in srgb, var(--c-panel-1) 86%, transparent); } .theme-light :where(.home) #sb-reviews-container-1 .sb-feed-container { border-color: var(--c-overlay-12); border-left-color: color-mix(in srgb, var(--gr-blue) 85%, var(--gr-green)); background: radial-gradient(260px 180px at 8% 0%, color-mix(in srgb, var(--gr-blue) 12%, transparent), transparent 72%), radial-gradient(320px 220px at 96% 14%, color-mix(in srgb, var(--gr-green) 10%, transparent), transparent 74%), radial-gradient(220px 180px at 72% 88%, color-mix(in srgb, var(--gr-yellow) 10%, transparent), transparent 72%), color-mix(in srgb, var(--c-panel-1) 92%, transparent); } :where(.home) #sb-reviews-container-1 .sb-feed-header { margin-bottom: 1rem; background: transparent; border: 0; padding: 0; box-shadow: none; } :where(.home) #sb-reviews-container-1 .sb-post-item { background: var(--c-panel-3); border: 1px solid var(--c-overlay-12); border-radius: 1.2rem; box-shadow: 0 10px 22px var(--c-shadow-45); padding: .75rem .9rem; transition: transform var(--t), box-shadow var(--t), border-color var(--t), filter var(--t); } @media (hover:hover) and (pointer:fine) { :where(.home) #sb-reviews-container-1 .sb-post-item:hover { transform: translateY(-3px) scale(1.01); border-color: color-mix(in srgb, var(--gr-blue) 45%, var(--c-overlay-18)); box-shadow: 0 18px 40px var(--c-shadow-60), var(--neon-glow); filter: saturate(1.1); } } :where(.home) #sb-reviews-container-1 .sb-item-author-name { color: var(--c-ink); font-weight: 900; } :where(.home) #sb-reviews-container-1 :where(.sb-item-author-date, .sb-item-text) { color: var(--c-muted); } .theme-dark :where(.home) #sb-reviews-container-1 .sb-item-author-name { color: var(--c-ink); } .theme-dark :where(.home) #sb-reviews-container-1 :where(.sb-item-author-date, .sb-item-text) { color: var(--c-ink-82); } :where(.home) #sb-reviews-container-1 .sb-item-rating-icon svg { fill: var(--gr-yellow); } :where(.home) #sb-reviews-container-1 [data-post-style="regular"] .sb-post-item-wrap { border-bottom: 0 !important; } :where(.home) #sb-reviews-container-1 .sb-feed-header-btn { border-radius: 999px; font-weight: 950; letter-spacing: .08em; text-transform: uppercase; background: linear-gradient(135deg, var(--accent), var(--accent-700)); color: var(--c-ink-inverse); border: 1px solid transparent; box-shadow: 0 18px 56px color-mix(in srgb, var(--accent) 22%, transparent); } @media (hover:hover) and (pointer:fine) { :where(.home) #sb-reviews-container-1 .sb-feed-header-btn:hover { transform: translateY(-2px); box-shadow: 0 28px 90px color-mix(in srgb, var(--accent) 34%, transparent), 0 0 24px color-mix(in srgb, var(--accent) 28%, transparent); } } /* ============================================================ SHARED CONTEXTS: Formations + Blog Base ============================================================ */ :where(.single-formation, .formations-ui, .blog-ui, .single-post, .service-web-ui) { --accent: var(--c-primary); --accent-700: var(--c-primary-700); --accent-deep: var(--c-primary-deep); --accent-text: var(--accent); --ring-active: 0 0 0 4px color-mix(in srgb, var(--accent) 35%, transparent); --ring-enterprise: 0 0 0 4px color-mix(in srgb, var(--c-enterprise) 35%, transparent); --btn-primary-bg-1: var(--accent); --btn-primary-bg-2: var(--accent-700); --btn-primary-text: var(--c-surface); --chip-active-text: var(--c-ink-inverse); color: var(--c-ink); font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; background: radial-gradient(900px 420px at 8% 0%, color-mix(in srgb, var(--accent) 18%, transparent), transparent 62%), radial-gradient(760px 360px at 92% 10%, color-mix(in srgb, var(--c-accent) 12%, transparent), transparent 58%), radial-gradient(980px 520px at 50% 120%, color-mix(in srgb, var(--accent) 10%, transparent), transparent 60%), linear-gradient(180deg, var(--c-bg-1), var(--c-bg-2)); } :where(.single-formation, .formations-ui, .blog-ui, .single-post, .service-web-ui) p { color: var(--c-muted); line-height: 1.85; } :where(.single-formation, .formations-ui, .blog-ui, .single-post, .service-web-ui) ._container { max-width: var(--container); margin: 0 auto; } :where(.single-formation, .formations-ui, .blog-ui, .single-post, .service-web-ui) :where(a,button,input,select,textarea,[tabindex]):focus-visible { outline: none; box-shadow: var(--ring-active); } :where(.single-formation.is-enterprise, .formations-ui.is-enterprise) { --accent: var(--c-enterprise); --accent-700: var(--c-enterprise-700); --accent-deep: var(--c-enterprise-800); --ring-active: var(--ring-enterprise); } /* ============================================================ REUSABLE COMPONENTS: Neon Card (unified) ============================================================ */ :where(.single-formation, .formations-ui, .blog-ui, .single-post, .service-web-ui) .neon-card, :where(.single-formation, .formations-ui) .formation-card, :where(.blog-ui, .single-post) .blog-card, :where(.blog-ui, .single-post) .ws-neon-item { position: relative; overflow: hidden; isolation: isolate; border-radius: var(--card-radius, var(--r-xl)); border: 1px solid rgba(255,255,255,.14); background: linear-gradient(180deg, var(--c-panel-1), var(--c-panel-2)); box-shadow: var(--sh-1); transform: translateZ(0); contain: content; will-change: transform; transition: transform var(--t), box-shadow var(--t), border-color var(--t), filter var(--t); --mx: 50%; --my: 50%; } :where(.single-formation, .formations-ui, .blog-ui, .single-post, .service-web-ui) .neon-card::before, :where(.single-formation, .formations-ui) .formation-card::before, :where(.blog-ui, .single-post) .blog-card::before, :where(.blog-ui, .single-post) .ws-neon-item::before { content: ""; position: absolute; inset: -2px; border-radius: inherit; padding: 2px; background: conic-gradient( from var(--n-angle), transparent, color-mix(in srgb, var(--accent) 80%, transparent), color-mix(in srgb, var(--c-accent) 65%, transparent), color-mix(in srgb, var(--accent-700) 70%, transparent), color-mix(in srgb, var(--accent) 80%, transparent), transparent ); -webkit-mask: linear-gradient(var(--c-mask) 0 0) content-box, linear-gradient(var(--c-mask) 0 0); -webkit-mask-composite: xor; mask: linear-gradient(var(--c-mask) 0 0) content-box, linear-gradient(var(--c-mask) 0 0); mask-composite: exclude; opacity: .45; animation: neonSpin var(--neon-speed) linear infinite; pointer-events: none; filter: drop-shadow(0 0 14px color-mix(in srgb, var(--accent) 25%, transparent)); } :where(.single-formation, .formations-ui, .blog-ui, .single-post, .service-web-ui) .neon-card::after, :where(.single-formation, .formations-ui) .formation-card::after, :where(.blog-ui, .single-post) .blog-card::after, :where(.blog-ui, .single-post) .ws-neon-item::after { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; opacity: 0; transition: opacity .25s ease; background: var(--card-overlay, radial-gradient(420px circle at var(--mx) var(--my), color-mix(in srgb, var(--accent) 35%, transparent), transparent 55% )); mix-blend-mode: var(--card-overlay-blend, screen); z-index: 0; } :where(.single-formation, .formations-ui, .blog-ui, .single-post, .service-web-ui) .neon-card > *, :where(.single-formation, .formations-ui) .formation-card > *, :where(.blog-ui, .single-post) .blog-card > *, :where(.blog-ui, .single-post) .ws-neon-item > * { position: relative; z-index: 2; } @media (hover:hover) and (pointer:fine) { :where(.single-formation, .formations-ui, .blog-ui, .single-post, .service-web-ui) .neon-card:hover, :where(.single-formation, .formations-ui) .formation-card:hover, :where(.blog-ui, .single-post) .blog-card:hover, :where(.blog-ui, .single-post) .ws-neon-item:hover { box-shadow: var(--sh-3), 0 0 26px color-mix(in srgb, var(--accent) 22%, transparent); border-color: color-mix(in srgb, var(--accent) 55%, rgba(255,255,255,.18)); filter: saturate(1.18) contrast(1.04); transform: var(--card-hover-transform, translateY(-10px) scale(1.02) rotateX(calc((50% - var(--my)) * 0.06)) rotateY(calc((var(--mx) - 50%) * 0.06))); } :where(.single-formation, .formations-ui, .blog-ui, .single-post, .service-web-ui) .neon-card:hover::before, :where(.single-formation, .formations-ui) .formation-card:hover::before, :where(.blog-ui, .single-post) .blog-card:hover::before, :where(.blog-ui, .single-post) .ws-neon-item:hover::before { opacity: .85; } :where(.single-formation, .formations-ui, .blog-ui, .single-post, .service-web-ui) .neon-card:hover::after, :where(.single-formation, .formations-ui) .formation-card:hover::after, :where(.blog-ui, .single-post) .blog-card:hover::after, :where(.blog-ui, .single-post) .ws-neon-item:hover::after { opacity: .9; } } /* ============================================================ REUSABLE COMPONENTS: Tags (unified) ============================================================ */ :where(.single-formation, .formations-ui) .formation-tag, :where(.blog-ui, .single-post) .blog-tag { display: inline-flex; align-items: center; gap: .45rem; padding: .26rem .72rem; border-radius: 999px; font-size: .70rem; font-weight: 950; text-transform: uppercase; letter-spacing: .08em; border: 1px solid rgba(255,255,255,.12); background: rgba(255,255,255,.06); color: var(--c-muted); } :where(.single-formation, .formations-ui) .formation-tag::before, :where(.blog-ui, .single-post) .blog-tag::before { content: ""; width: 7px; height: 7px; border-radius: 999px; background: rgba(169,181,214,.95); } :where(.single-formation, .formations-ui) .formation-tag--type, :where(.blog-ui, .single-post) .blog-tag--date { background: color-mix(in srgb, var(--accent) 14%, var(--c-panel-1)); border-color: color-mix(in srgb, var(--accent) 40%, rgba(255,255,255,.14)); color: var(--accent-text); } :where(.single-formation, .formations-ui) .formation-tag--type::before, :where(.blog-ui, .single-post) .blog-tag--date::before { background: var(--accent-text); } :where(.single-formation, .formations-ui) .formation-tag--cat, :where(.blog-ui, .single-post) .blog-tag--cat { background: color-mix(in srgb, var(--c-accent) 20%, var(--c-panel-1)); border-color: color-mix(in srgb, var(--c-accent) 45%, transparent); color: var(--c-accent-ink); } :where(.single-formation, .formations-ui) .formation-tag--cat::before, :where(.blog-ui, .single-post) .blog-tag--cat::before { background: var(--c-accent); } /* ============================================================ REUSABLE COMPONENTS: Chips (filters) ============================================================ */ :where(.formations-ui, .blog-ui, .service-web-ui) .ws-chip { display: inline-flex; align-items: center; gap: .6rem; padding: .48rem .9rem; border-radius: 999px; background: color-mix(in srgb, var(--accent) 10%, var(--c-panel-1)); border: 1px solid color-mix(in srgb, var(--accent) 30%, rgba(255,255,255,.12)); box-shadow: var(--sh-1); font-weight: 950; color: var(--c-ink); font-size: .86rem; text-decoration: none; transition: transform var(--t), box-shadow var(--t), border-color var(--t), background var(--t), filter var(--t); } :where(.blog-ui, .service-web-ui) .ws-chip { --chip-hover-saturate: 1.15; } @media (hover:hover) and (pointer:fine) { :where(.formations-ui, .blog-ui, .service-web-ui) .ws-chip:hover { transform: translateY(-2px) scale(1.01); box-shadow: var(--sh-2), var(--neon-glow); border-color: color-mix(in srgb, var(--accent) 55%, rgba(255,255,255,.18)); background: color-mix(in srgb, var(--accent) 14%, var(--c-panel-1)); filter: saturate(var(--chip-hover-saturate, 1.2)); } } :where(.blog-ui, .service-web-ui) .ws-chip.is-active, :where(.formations-ui) .ws-chip.is-active { background: linear-gradient(135deg, var(--accent), var(--accent-700)); color: var(--chip-active-text); border-color: transparent; box-shadow: 0 18px 56px color-mix(in srgb, var(--accent) 22%, transparent); } @media (hover:hover) and (pointer:fine) { :where(.blog-ui, .service-web-ui) .ws-chip:hover { color: var(--c-ink); } :where(.blog-ui, .service-web-ui) .ws-chip.is-active:hover, :where(.formations-ui) .ws-chip.is-active:hover { color: var(--chip-active-text); } } :where(.blog-ui, .service-web-ui) .ws-chip__count { font-size: .72rem; opacity: .9; padding: .14rem .5rem; border-radius: 999px; border: 1px solid rgba(255,255,255,.14); background: var(--c-panel-4); } :where(.blog-ui, .service-web-ui) .ws-chip.is-active .ws-chip__count { background: rgba(0,0,0,.18); border-color: rgba(0,0,0,.12); } :where(.formations-ui) .ws-chip__btn { width: 24px; height: 24px; display: inline-flex; align-items: center; justify-content: center; padding: 0; margin: 0; border-radius: 999px; border: 1px solid color-mix(in srgb, var(--accent) 35%, rgba(255,255,255,.18)); background: var(--c-panel-1); cursor: pointer; font-weight: 950; line-height: 1; font-size: 14px; transform: translateY(-1px); transition: transform var(--t), box-shadow var(--t), border-color var(--t), background var(--t), color var(--t); color: var(--c-ink); } :where(.formations-ui) .ws-chip__btn:hover { transform: translateY(-2px) scale(1.03); background: linear-gradient(135deg, var(--accent), var(--accent-700)); border-color: transparent; box-shadow: 0 14px 28px rgba(0,0,0,.55), var(--neon-glow); color: var(--c-ink-inverse); } :where(.formations-ui) .ws-chip__btn:focus-visible { outline: none; box-shadow: var(--ring-active); } /* ============================================================ REUSABLE COMPONENTS: Buttons (unified) ============================================================ */ :where(.single-formation, .formations-ui, .blog-ui, .single-post, .service-web-ui) .btn { display: inline-flex; align-items: center; justify-content: center; gap: .6rem; padding: 1rem 2.25rem; border-radius: 999px; font-weight: 950; font-size: .95rem; letter-spacing: .08em; text-transform: uppercase; text-decoration: none; border: 1px solid transparent; cursor: pointer; transition: transform var(--t), box-shadow var(--t), background var(--t), color var(--t), border-color var(--t), filter var(--t); will-change: transform; position: relative; overflow: hidden; } :where(.single-formation, .formations-ui, .blog-ui, .single-post, .service-web-ui) .btn::after { content: "->"; font-size: 1.05rem; opacity: .9; } :where(.single-formation, .formations-ui, .blog-ui, .single-post, .service-web-ui) .btn-primary { background: linear-gradient(135deg, var(--btn-primary-bg-1), var(--btn-primary-bg-2)); color: var(--btn-primary-text); box-shadow: 0 18px 56px color-mix(in srgb, var(--accent) 24%, transparent); } @media (hover:hover) and (pointer:fine) { :where(.single-formation, .formations-ui, .blog-ui, .single-post, .service-web-ui) .btn-primary:hover { transform: translateY(-3px) scale(1.03); box-shadow: 0 28px 90px color-mix(in srgb, var(--accent) 34%, transparent), 0 0 24px color-mix(in srgb, var(--accent) 28%, transparent); filter: saturate(1.25) contrast(1.05); } } :where(.single-formation, .formations-ui, .blog-ui, .single-post, .service-web-ui) .btn-outline { background: var(--c-panel-3); color: var(--c-ink); border-color: rgba(255,255,255,.18); box-shadow: 0 10px 26px rgba(0,0,0,.45); } @media (hover:hover) and (pointer:fine) { :where(.single-formation, .formations-ui, .blog-ui, .single-post, .service-web-ui) .btn-outline:hover { transform: translateY(-3px) scale(1.02); background: linear-gradient(135deg, color-mix(in srgb, var(--c-accent) 22%, transparent), color-mix(in srgb, var(--accent) 18%, transparent) ); color: var(--c-ink); border-color: color-mix(in srgb, var(--accent) 55%, rgba(255,255,255,.18)); box-shadow: 0 22px 70px rgba(0,0,0,.65), var(--neon-glow); filter: saturate(1.2); } } /* ============================================================ REUSABLE COMPONENTS: Pagination (unified) ============================================================ */ :where(.formations-ui, .blog-ui) .page-numbers { display: inline-flex; align-items: center; justify-content: center; min-width: 42px; height: 42px; padding: 0 .85rem; margin: .2rem .2rem 0 0; border-radius: 999px; text-decoration: none; font-weight: 950; border: 1px solid rgba(255,255,255,.14); background: var(--c-panel-1); box-shadow: var(--sh-1); color: var(--c-ink); transition: transform var(--t), box-shadow var(--t), border-color var(--t), filter var(--t); } @media (hover:hover) and (pointer:fine) { :where(.formations-ui, .blog-ui) .page-numbers:hover { transform: translateY(-2px); box-shadow: var(--sh-2), var(--neon-glow); border-color: color-mix(in srgb, var(--accent) 45%, rgba(255,255,255,.18)); filter: saturate(1.2); } } :where(.formations-ui, .blog-ui) .page-numbers.current { background: linear-gradient(135deg, var(--accent), var(--accent-700)); color: var(--c-ink-inverse); border-color: transparent; box-shadow: 0 18px 56px color-mix(in srgb, var(--accent) 22%, transparent); } .theme-light:where(.formations-ui, .blog-ui) .page-numbers.current, .theme-light :where(.formations-ui, .blog-ui) .page-numbers.current { color: var(--c-surface); } /* ============================================================ REUSABLE COMPONENTS: Loader (unified) ============================================================ */ :where(.formations-ui, .blog-ui, .service-web-ui) [data-formations-loader], :where(.formations-ui, .blog-ui, .service-web-ui) [data-blog-loader], :where(.formations-ui, .blog-ui, .service-web-ui) [data-service-loader] { position: fixed; inset: 0; z-index: 99999; opacity: 0; pointer-events: none; visibility: hidden; display: flex; align-items: center; justify-content: center; background: rgba(0, 0, 0, .72); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); transition: opacity .18s ease, visibility .18s ease; } :where(.formations-ui, .blog-ui, .service-web-ui) :is([data-formations-loader],[data-blog-loader],[data-service-loader]).is-loading { opacity: 1; pointer-events: auto; visibility: visible; } :where(.formations-ui, .blog-ui, .service-web-ui) [data-formations-loader] .formations-loader__box, :where(.formations-ui, .blog-ui, .service-web-ui) [data-blog-loader] .blog-loader__box, :where(.formations-ui, .blog-ui, .service-web-ui) [data-service-loader] .blog-loader__box { width: min(420px, calc(100vw - 48px)); padding: 22px 22px 18px; border-radius: 18px; background: rgba(10, 12, 18, .75); border: 1px solid rgba(255,255,255,.14); box-shadow: 0 18px 60px rgba(0,0,0,.55), 0 0 28px color-mix(in srgb, var(--accent) 22%, transparent), 0 0 34px color-mix(in srgb, var(--c-accent) 14%, transparent); position: relative; overflow: hidden; } :where(.formations-ui, .blog-ui, .service-web-ui) [data-formations-loader] .formations-loader__box::before, :where(.formations-ui, .blog-ui, .service-web-ui) [data-blog-loader] .blog-loader__box::before, :where(.formations-ui, .blog-ui, .service-web-ui) [data-service-loader] .blog-loader__box::before { content: ""; position: absolute; inset: -2px; border-radius: inherit; background: conic-gradient( from 180deg, color-mix(in srgb, var(--accent) 0%, transparent), color-mix(in srgb, var(--accent) 55%, transparent), color-mix(in srgb, var(--c-accent) 45%, transparent), color-mix(in srgb, var(--accent) 0%, transparent) ); filter: blur(10px); opacity: .65; animation: wsLoaderRing 1.25s linear infinite; pointer-events: none; } :where(.formations-ui, .blog-ui, .service-web-ui) [data-formations-loader] .formations-loader__spinner, :where(.formations-ui, .blog-ui, .service-web-ui) [data-blog-loader] .blog-loader__spinner, :where(.formations-ui, .blog-ui, .service-web-ui) [data-service-loader] .blog-loader__spinner { width: 56px; height: 56px; border-radius: 999px; border: 4px solid rgba(255,255,255,.14); border-top-color: color-mix(in srgb, var(--accent) 85%, white); border-right-color: color-mix(in srgb, var(--c-accent) 70%, white); box-shadow: 0 0 18px color-mix(in srgb, var(--accent) 25%, transparent), 0 0 16px color-mix(in srgb, var(--c-accent) 16%, transparent); animation: wsSpin .85s linear infinite; margin: 0 auto 12px; } :where(.formations-ui, .blog-ui, .service-web-ui) [data-formations-loader] .formations-loader__text, :where(.formations-ui, .blog-ui, .service-web-ui) [data-blog-loader] .blog-loader__text, :where(.formations-ui, .blog-ui, .service-web-ui) [data-service-loader] .blog-loader__text { text-align: center; color: rgba(255,255,255,.9); font-weight: 700; letter-spacing: .2px; } :where(.formations-ui, .blog-ui, .service-web-ui) [data-formations-loader] .formations-loader__sub, :where(.formations-ui, .blog-ui, .service-web-ui) [data-blog-loader] .blog-loader__sub, :where(.formations-ui, .blog-ui, .service-web-ui) [data-service-loader] .blog-loader__sub { margin-top: 6px; text-align: center; color: rgba(255,255,255,.72); font-size: 14px; } /* Light loader */ .theme-light :where(.formations-ui, .blog-ui, .service-web-ui) :where([data-formations-loader],[data-blog-loader],[data-service-loader]) { background: rgba(255,255,255,.72); } .theme-light :where(.formations-ui, .blog-ui, .service-web-ui) :where([data-formations-loader] .formations-loader__box, [data-blog-loader] .blog-loader__box, [data-service-loader] .blog-loader__box) { background: rgba(255,255,255,.9); border: 1px solid var(--c-overlay-14); box-shadow: 0 18px 60px rgba(0,0,0,.18), 0 0 28px color-mix(in srgb, var(--accent) 20%, transparent), 0 0 34px color-mix(in srgb, var(--c-accent) 12%, transparent); } .theme-light :where(.formations-ui, .blog-ui, .service-web-ui) :where([data-formations-loader] .formations-loader__spinner, [data-blog-loader] .blog-loader__spinner, [data-service-loader] .blog-loader__spinner) { border: 4px solid color-mix(in srgb, var(--c-ink) 12%, transparent); border-top-color: color-mix(in srgb, var(--accent) 85%, var(--c-surface)); border-right-color: color-mix(in srgb, var(--c-accent) 70%, var(--c-surface)); box-shadow: 0 0 18px color-mix(in srgb, var(--accent) 18%, transparent), 0 0 16px color-mix(in srgb, var(--c-accent) 10%, transparent); } .theme-light :where(.formations-ui, .blog-ui, .service-web-ui) :where([data-formations-loader] .formations-loader__text, [data-blog-loader] .blog-loader__text, [data-service-loader] .blog-loader__text) { color: var(--c-ink); } .theme-light :where(.formations-ui, .blog-ui, .service-web-ui) :where([data-formations-loader] .formations-loader__sub, [data-blog-loader] .blog-loader__sub, [data-service-loader] .blog-loader__sub) { color: var(--c-muted); } /* ============================================================ CONTACT PAGE - FLUENT FORM #7 (match formations pre-inscription) ============================================================ */ body:is(.page-id-785, .page-contactez-nous) .fluentform_wrapper_7 { --ff-bg: var(--c-panel-1); --ff-bd: var(--c-overlay-14); --ff-shadow: 0 10px 22px var(--c-shadow-45); --ff-focus-shadow: 0 22px 60px color-mix(in srgb, var(--accent) 20%, transparent); } body:is(.page-id-785, .page-contactez-nous) .fluentform_wrapper_7 .ff-el-form-control { background: var(--ff-bg) !important; border: 1px solid var(--ff-bd) !important; border-radius: 1rem !important; box-shadow: var(--ff-shadow) !important; min-height: 50px !important; display: flex; align-items: center; color: var(--c-ink) !important; transition: box-shadow var(--t), border-color var(--t), transform var(--t), filter var(--t) !important; } body:is(.page-id-785, .page-contactez-nous) .fluentform_wrapper_7 :is(input.ff-el-form-control, select.ff-el-form-control, textarea.ff-el-form-control):focus, body:is(.page-id-785, .page-contactez-nous) .fluentform_wrapper_7 :is(input.ff-el-form-control, select.ff-el-form-control, textarea.ff-el-form-control):focus-visible { outline: none !important; border-color: color-mix(in srgb, var(--accent) 65%, var(--c-overlay-22)) !important; box-shadow: var(--ring-active), var(--ff-focus-shadow) !important; transform: translateY(-2px); filter: saturate(1.15); } body:is(.page-id-785, .page-contactez-nous) .fluentform_wrapper_7 :where(.ff-el-input--label label, .ff-el-section-title) { color: var(--c-ink) !important; font-weight: 850 !important; } body:is(.page-id-785, .page-contactez-nous) .fluentform_wrapper_7 .ff-btn-submit { border-radius: 999px !important; padding: 1rem 2.2rem !important; font-weight: 950 !important; letter-spacing: .08em !important; text-transform: uppercase !important; border: 1px solid transparent !important; background: linear-gradient(135deg, var(--accent), var(--accent-700)) !important; color: var(--c-ink-inverse) !important; box-shadow: 0 18px 56px color-mix(in srgb, var(--accent) 24%, transparent) !important; transition: transform var(--t), box-shadow var(--t), filter var(--t) !important; position: relative; overflow: hidden; } .theme-light body:is(.page-id-785, .page-contactez-nous) .fluentform_wrapper_7 :is(.ff-btn-submit, .ff-btn.ff-btn-submit, .ff-btn.ff-btn-lg, .ff_btn_style) { color: var(--c-surface) !important; } body:is(.page-id-785, .page-contactez-nous) .fluentform_wrapper_7 .ff-btn-submit::before { content: ""; position: absolute; inset: -40%; background: radial-gradient(circle at 30% 30%, var(--c-overlay-22), transparent 55%), radial-gradient(circle at 70% 50%, color-mix(in srgb, var(--accent) 30%, transparent), transparent 60%); opacity: 0; transition: opacity var(--t); } body:is(.page-id-785, .page-contactez-nous) .fluentform_wrapper_7 .ff-btn-submit:hover { transform: translateY(-3px) scale(1.03) !important; box-shadow: 0 30px 95px color-mix(in srgb, var(--accent) 34%, transparent), 0 0 24px color-mix(in srgb, var(--accent) 28%, transparent) !important; filter: saturate(1.25) contrast(1.05); } body:is(.page-id-785, .page-contactez-nous) .fluentform_wrapper_7 .ff-btn-submit:hover::before { opacity: .95; } /* Checkbox / radio */ body:is(.page-id-785, .page-contactez-nous) .fluentform_wrapper_7 :where(.ff-el-form-check, .ff-el-form-check-inline, .ff-el-checkbox, .ff-el-radio) { display: block !important; margin: 0 0 .55rem !important; padding: 0 !important; } body:is(.page-id-785, .page-contactez-nous) .fluentform_wrapper_7 :where(.ff-el-form-check-label, .ff_tc_label, .ff-el-form-check label, .ff-el-checkbox label, .ff-el-radio label) { display: flex !important; align-items: flex-start !important; gap: .65rem !important; padding: 0 !important; margin: 0 !important; line-height: 1.35 !important; cursor: pointer; font-weight: 850; color: var(--c-ink); } body:is(.page-id-785, .page-contactez-nous) .fluentform_wrapper_7 :where(.ff-el-form-check-label, .ff_tc_label)::before, body:is(.page-id-785, .page-contactez-nous) .fluentform_wrapper_7 :where(.ff-el-form-check-label, .ff_tc_label)::after { content: none !important; display: none !important; } body:is(.page-id-785, .page-contactez-nous) .fluentform_wrapper_7 input:is([type="checkbox"],[type="radio"]) { appearance: none; -webkit-appearance: none; width: 18px; height: 18px; flex: 0 0 18px; margin: 0 !important; margin-top: .22rem !important; border-radius: 5px; border: 1.6px solid var(--c-control-border); background: var(--c-control-bg); display: grid !important; place-items: center !important; cursor: pointer; transition: border-color var(--t), background var(--t), box-shadow var(--t), transform var(--t), filter var(--t); } body:is(.page-id-785, .page-contactez-nous) .fluentform_wrapper_7 input:is([type="checkbox"],[type="radio"])::before { content: ""; width: 10px; height: 10px; border-radius: 3px; background: var(--accent); transform: scale(0); transform-origin: center; transition: transform 160ms ease; } body:is(.page-id-785, .page-contactez-nous) .fluentform_wrapper_7 input:is([type="checkbox"],[type="radio"]):checked { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 14%, var(--c-panel-1)); box-shadow: var(--ring-active), 0 0 0 3px color-mix(in srgb, var(--accent) 28%, transparent); } body:is(.page-id-785, .page-contactez-nous) .fluentform_wrapper_7 input:is([type="checkbox"],[type="radio"]):checked::before { transform: scale(1); } body:is(.page-id-785, .page-contactez-nous) .fluentform_wrapper_7 :where(label, .ff-el-form-check-label, .ff_tc_label, .ff-el-form-check, .ff-el-checkbox, .ff-el-radio):hover input:is([type="checkbox"],[type="radio"]) { border-color: color-mix(in srgb, var(--accent) 55%, var(--c-overlay-22)); transform: translateY(-1px); filter: saturate(1.2); } body:is(.page-id-785, .page-contactez-nous) .fluentform_wrapper_7 input:is([type="checkbox"],[type="radio"]):focus-visible { outline: none; box-shadow: var(--ring-active), 0 0 0 3px color-mix(in srgb, var(--accent) 28%, transparent); } body:is(.page-id-785, .page-contactez-nous) .fluentform_wrapper_7 .ff-el-form-check.ff-el-tc { margin-top: .35rem !important; } body:is(.page-id-785, .page-contactez-nous) .fluentform_wrapper_7 .ff-el-form-check.ff-el-tc .ff_tc_label { align-items: center !important; gap: .75rem !important; } body:is(.page-id-785, .page-contactez-nous) .fluentform_wrapper_7 .ff-el-form-check.ff-el-tc .ff_tc_checkbox { display: flex !important; align-items: center !important; flex: 0 0 18px !important; } body:is(.page-id-785, .page-contactez-nous) .fluentform_wrapper_7 .ff-el-form-check.ff-el-tc .ff_tc_checkbox input[type="checkbox"] { margin: 0 !important; transform: none !important; } body:is(.page-id-785, .page-contactez-nous) .fluentform_wrapper_7 .ff-el-form-check.ff-el-tc .ff_t_c { margin: 0 !important; line-height: 1.35 !important; } /* ============================================================ CONTACT PAGE - WRAPPER/CARD ============================================================ */ body:is(.page-id-785, .page-contactez-nous) { --accent: var(--c-primary); --accent-700: var(--c-primary-700); --accent-deep: var(--c-primary-deep); --ring-active: 0 0 0 4px color-mix(in srgb, var(--accent) 35%, transparent); --btn-primary-bg-1: var(--accent); --btn-primary-bg-2: var(--accent-700); --contact-card-bg: var(--c-panel-3); --contact-halo: radial-gradient(circle at 25% 20%, color-mix(in srgb, var(--accent) 14%, transparent), transparent 60%), radial-gradient(circle at 80% 35%, color-mix(in srgb, var(--c-accent) 10%, transparent), transparent 60%); --contact-left: var(--accent); --contact-border: var(--c-overlay-14); } body:is(.page-id-785, .page-contactez-nous) .stk-b19e7c9 { padding: 3.6rem 1.5rem 4.2rem !important; } body:is(.page-id-785, .page-contactez-nous) .stk-3446bed { background: var(--contact-card-bg) !important; border-radius: var(--r-xl) !important; padding: 2.65rem 2.85rem !important; border: 1px solid var(--contact-border) !important; border-left: 7px solid var(--contact-left) !important; border-left-color: var(--contact-left) !important; box-shadow: var(--sh-2) !important; position: relative; overflow: hidden; isolation: isolate; transition: transform var(--t), box-shadow var(--t), filter var(--t), border-color var(--t); } body:is(.page-id-785, .page-contactez-nous) .stk-3446bed::before { content: ""; position: absolute; inset: -2px; border-radius: inherit; padding: 2px; background: conic-gradient( from var(--n-angle), transparent, color-mix(in srgb, var(--accent) 80%, transparent), color-mix(in srgb, var(--c-accent) 65%, transparent), color-mix(in srgb, var(--accent-700) 70%, transparent), color-mix(in srgb, var(--accent) 80%, transparent), transparent ); -webkit-mask: linear-gradient(var(--c-mask) 0 0) content-box, linear-gradient(var(--c-mask) 0 0); mask: linear-gradient(var(--c-mask) 0 0) content-box, linear-gradient(var(--c-mask) 0 0); -webkit-mask-composite: xor; mask-composite: exclude; opacity: .55; animation: neonSpin var(--neon-speed) linear infinite; pointer-events: none; } body:is(.page-id-785, .page-contactez-nous) .stk-3446bed::after { content: ""; position: absolute; inset: -35%; background: var(--contact-halo); opacity: .9; pointer-events: none; } body:is(.page-id-785, .page-contactez-nous) .stk-3446bed > .stk-column-wrapper { position: relative; z-index: 1; } body:is(.page-id-785, .page-contactez-nous) .stk-3446bed:hover { transform: translateY(-8px) scale(1.01); box-shadow: var(--sh-3), 0 0 26px color-mix(in srgb, var(--accent) 22%, transparent); border-color: color-mix(in srgb, var(--accent) 55%, var(--c-overlay-18)); border-left-color: var(--contact-left) !important; filter: saturate(1.2); } /* ============================================================ SEARCH MODAL BACKDROP FILTER TYPE-1 (Blur) ============================================================ */ [data-header*="type-1"] #search-modal { backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); } /* Header menu link colors on dark mode */ .theme-dark [data-header*="type-1"] .ct-header [data-transparent-row="yes"] [data-id="menu"] > ul > li > a { --theme-link-initial-color: var(--theme-palette-color-7); --theme-link-hover-color: var(--theme-palette-color-6); } .theme-dark [data-header*="type-1"] [data-id="search"]{ --theme-icon-color: #fff; --theme-icon-hover-color: #fff; }