/* ========================================================= NOVASKY CONSULTING — GLOBAL DESIGN SYSTEM Bootstrap 5 + CSS personnalisé ========================================================= */ /* ========================================================= DECORATIVE GRADIENT TEXT ========================================================= */ .gradient-text { background: linear-gradient( 110deg, var(--novasky-sky), var(--novasky-sky-light) ); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; } /* ========================================================= SECTION SYSTEM ========================================================= */ .section { position: relative; padding: var(--section-padding) 0; overflow: hidden; } .section-tag { display: inline-flex; align-items: center; gap: 10px; margin-bottom: 16px; font-family: var(--font-accent); font-size: 0.98rem; font-weight: 900; letter-spacing: 0.14em; text-transform: uppercase; color: var(--novasky-sky); } .section-title { max-width: 720px; margin-bottom: 0; font-family: var(--font-display); font-size: clamp(2rem, 4vw, 3rem); font-weight: 800; line-height: 1.15; letter-spacing: -0.035em; color: var(--novasky-marine); } .section-head { position: relative; z-index: 2; margin-bottom: 56px; } .section-head.center { text-align: center; margin-inline: auto; } .section-head.center .section-title { margin-inline: auto; } .section-sub { max-width: 650px; margin-top: 18px; font-size: 1.04rem; line-height: 1.75; color: var(--novasky-slate-soft); } .section-head.center .section-sub { margin-inline: auto; } /* ========================================================= MODERN DECORATIVE GLOW ========================================================= */ .glow { position: absolute; width: 420px; height: 420px; border-radius: 50%; background: radial-gradient( circle, rgba(46, 155, 230, 0.16) 0%, rgba(46, 155, 230, 0.07) 35%, transparent 70% ); filter: blur(8px); pointer-events: none; animation: floatingGlow 8s ease-in-out infinite; } .glow.orange { background: radial-gradient( circle, rgba(245, 166, 35, 0.15) 0%, rgba(245, 166, 35, 0.05) 40%, transparent 72% ); } @keyframes floatingGlow { 0%, 100% { transform: translate3d(0, 0, 0) scale(1); } 50% { transform: translate3d(0, -20px, 0) scale(1.05); } } /* ========================================================= SUBTLE GRAIN ========================================================= */ .grain { position: absolute; inset: 0; opacity: 0.20; pointer-events: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)' opacity='.28'/%3E%3C/svg%3E"); } /* ========================================================= MODERN CARD SYSTEM ========================================================= */ .card-modern { position: relative; background: rgba(255, 255, 255, 0.92); border: 1px solid var(--novasky-border); border-radius: var(--radius-lg); box-shadow: var(--shadow-sm); overflow: hidden; transition: transform var(--transition), box-shadow var(--transition), border-color var(--transition); } .card-modern::before { content: ""; position: absolute; inset: 0; background: linear-gradient( 135deg, rgba(46, 155, 230, 0.05), transparent 45% ); opacity: 0; transition: opacity var(--transition); pointer-events: none; } .card-modern:hover { transform: translateY(-8px); border-color: rgba(46, 155, 230, 0.22); box-shadow: var(--shadow-lg); } .card-modern:hover::before { opacity: 1; } /* ========================================================= LEGACY CARD SUPPORT ========================================================= */ .cardboard { position: relative; background: var(--novasky-white); border: 1px solid var(--novasky-border); border-radius: var(--radius); box-shadow: var(--shadow-sm); transition: transform var(--transition), box-shadow var(--transition), border-color var(--transition); } .cardboard:hover { transform: translateY(-8px); border-color: rgba(46, 155, 230, 0.20); box-shadow: var(--shadow-lg); } .cardboard.tilt-l, .cardboard.tilt-r { transform: none; } .cardboard.tilt-l:hover, .cardboard.tilt-r:hover { transform: translateY(-8px); } /* ========================================================= BUTTON SYSTEM ========================================================= */ .btn { position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 9px; min-height: 50px; padding: 13px 25px; border: 1px solid transparent; border-radius: var(--radius-pill); font-family: var(--font-accent); font-size: 0.92rem; font-weight: 700; line-height: 1; white-space: nowrap; overflow: hidden; transition: transform var(--transition), box-shadow var(--transition), background-color var(--transition), border-color var(--transition), color var(--transition); } .btn .icon { width: 1rem; height: 1rem; transition: transform var(--transition); } .btn:hover .icon { transform: translateX(3px); } .btn:active { transform: translateY(1px); } /* ================= PRIMARY ================= */ .btn-primary { color: var(--novasky-marine); background: linear-gradient( 135deg, var(--novasky-orange), #FFB83F ); border-color: transparent; box-shadow: 0 10px 25px rgba(245, 166, 35, 0.20); } .btn-primary:hover { color: var(--novasky-marine); transform: translateY(-3px); box-shadow: 0 16px 35px rgba(245, 166, 35, 0.30); } /* ================= DARK ================= */ .btn-dark { color: var(--novasky-white); background: var(--novasky-marine); border-color: var(--novasky-marine); box-shadow: 0 8px 22px rgba(11, 20, 64, 0.16); } .btn-dark:hover { color: var(--novasky-white); background: var(--novasky-marine-2); transform: translateY(-3px); box-shadow: 0 16px 35px rgba(11, 20, 64, 0.24); } /* ================= OUTLINE ================= */ .btn-outline { color: var(--novasky-marine); background: transparent; border-color: rgba(11, 20, 64, 0.18); } .btn-outline:hover { color: var(--novasky-sky); background: rgba(46, 155, 230, 0.05); border-color: var(--novasky-sky); transform: translateY(-3px); } /* ================= GHOST / HERO ================= */ .btn-ghost { color: var(--novasky-white); background: rgba(255, 255, 255, 0.06); border-color: rgba(255, 255, 255, 0.24); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); } .btn-ghost:hover { color: var(--novasky-white); background: rgba(46, 155, 230, 0.12); border-color: rgba(107, 192, 255, 0.70); transform: translateY(-3px); } /* ================= BLOCK ================= */ .btn-block { width: 100%; } /* ========================================================= MODERN BADGE ========================================================= */ .badge-modern { display: inline-flex; align-items: center; gap: 8px; padding: 7px 12px; border-radius: var(--radius-pill); font-family: var(--font-accent); font-size: 0.72rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--novasky-sky); background: var(--novasky-sky-soft); border: 1px solid rgba(46, 155, 230, 0.12); } /* ========================================================= IMAGE HOVER ========================================================= */ .image-hover { overflow: hidden; border-radius: inherit; } .image-hover img { transition: transform 0.7s cubic-bezier(.2, .8, .2, 1), filter 0.5s ease; } .image-hover:hover img { transform: scale(1.045); } /* ========================================================= MODERN LINK ========================================================= */ .link-modern { display: inline-flex; align-items: center; gap: 8px; font-family: var(--font-accent); font-weight: 700; color: var(--novasky-marine); transition: color var(--transition), gap var(--transition); } .link-modern:hover { color: var(--novasky-sky); gap: 12px; } /* ========================================================= ROTATING WORD ========================================================= */ #rotatingWord { display: inline-block; transition: opacity 0.35s ease, transform 0.35s ease; } #rotatingWord.swap { opacity: 0; transform: translateY(8px); } /* ========================================================= SCROLL REVEAL SUPPORT Système unique d'animation d'entrée pour tout le site. Usage : ajouter data-reveal (+ éventuellement data-reveal-delay="100") sur l'élément, plus l'une des classes ci-dessous selon l'effet voulu : .reveal fondu + glissement vers le haut (défaut) .reveal-zoom fondu + léger agrandissement .reveal-glass fondu + flou qui se dissipe (effet verre) .reveal-left fondu + entrée depuis la gauche .reveal-right fondu + entrée depuis la droite ========================================================= */ .reveal, .reveal-zoom, .reveal-glass, .reveal-left, .reveal-right { transition-delay: var(--reveal-delay, 0ms); } .reveal { opacity: 0; transform: translateY(25px); transition: opacity 0.8s ease, transform 0.8s cubic-bezier(.2, .8, .2, 1); } .reveal.is-visible { opacity: 1; transform: translateY(0); } .reveal-zoom { opacity: 0; transform: scale(0.92); transition: opacity 0.7s ease, transform 0.7s cubic-bezier(.2, .8, .2, 1); } .reveal-zoom.is-visible { opacity: 1; transform: scale(1); } .reveal-glass { opacity: 0; transform: scale(0.96) translateY(14px); filter: blur(8px); transition: opacity 0.8s ease, transform 0.8s cubic-bezier(.2, .8, .2, 1), filter 0.8s ease; } .reveal-glass.is-visible { opacity: 1; transform: scale(1) translateY(0); filter: blur(0); } .reveal-left { opacity: 0; transform: translateX(-40px); transition: opacity 0.8s ease, transform 0.8s cubic-bezier(.2, .8, .2, 1); } .reveal-left.is-visible { opacity: 1; transform: translateX(0); } .reveal-right { opacity: 0; transform: translateX(40px); transition: opacity 0.8s ease, transform 0.8s cubic-bezier(.2, .8, .2, 1); } .reveal-right.is-visible { opacity: 1; transform: translateX(0); } @media (prefers-reduced-motion: reduce) { .reveal, .reveal-zoom, .reveal-glass, .reveal-left, .reveal-right { opacity: 1 !important; transform: none !important; filter: none !important; transition: none !important; } } /* ========================================================= PAUSE DES ANIMATIONS HORS ÉCRAN Classe ajoutée par le JS quand une
sort du viewport — stoppe toutes les animations CSS "infinite" qu'elle contient (glow, pulse, scan, etc.) pour économiser du CPU/GPU tant qu'elle n'est pas visible. ========================================================= */ .is-offscreen-paused, .is-offscreen-paused * { animation-play-state: paused !important; } /* ========================================================= NOVASKY CONSULTING PREMIUM PRECISION CURSOR Desktop uniquement ========================================================= */ /* ---------- CURSOR CORE ---------- */ .cursor-dot, .cursor-ring { position: fixed; top: 0; left: 0; pointer-events: none; border-radius: 50%; z-index: var(--z-cursor); will-change: transform; opacity: 0; transition: opacity 0.25s ease, width 0.3s cubic-bezier(.2,.8,.2,1), height 0.3s cubic-bezier(.2,.8,.2,1), border-color 0.3s ease, background-color 0.3s ease, box-shadow 0.3s ease; } /* ========================================================= POINT CENTRAL ========================================================= */ .cursor-dot { width: 6px; height: 6px; background: var(--novasky-orange); transform: translate3d(-50%, -50%, 0); box-shadow: 0 0 0 3px rgba(245,166,35,0.08), 0 0 14px rgba(245,166,35,0.35); } /* ========================================================= ANNEAU EXTERIEUR ========================================================= */ .cursor-ring { width: 38px; height: 38px; border: 1px solid rgba(255,255,255,0.55); background: rgba(46,155,230,0.035); transform: translate3d(-50%, -50%, 0); backdrop-filter: blur(2px); -webkit-backdrop-filter: blur(2px); box-shadow: 0 0 0 1px rgba(46,155,230,0.05), 0 0 24px rgba(46,155,230,0.08); } /* ========================================================= PETIT ACCENT NOVASKY ========================================================= */ .cursor-ring::before { content: ""; position: absolute; top: -3px; right: 6px; width: 5px; height: 5px; border-radius: 50%; background: var(--novasky-orange); box-shadow: 0 0 10px rgba(245,166,35,0.45); } /* ========================================================= ETAT ACTIF ========================================================= */ body.has-cursor .cursor-dot, body.has-cursor .cursor-ring { opacity: 1; } /* ========================================================= SURVOL DES ELEMENTS INTERACTIFS ========================================================= */ .cursor-ring.hover { width: 58px; height: 58px; border-color: rgba(46,155,230,0.85); background: radial-gradient( circle, rgba(46,155,230,0.08), rgba(46,155,230,0.025) 55%, transparent 75% ); box-shadow: 0 0 0 1px rgba(46,155,230,0.10), 0 0 30px rgba(46,155,230,0.16); } .cursor-dot.hover { width: 8px; height: 8px; background: var(--novasky-sky-light); box-shadow: 0 0 0 5px rgba(46,155,230,0.08), 0 0 18px rgba(46,155,230,0.55); } /* ========================================================= SURVOL CTA ========================================================= */ .cursor-ring.cta-hover { width: 68px; height: 68px; border-color: var(--novasky-orange); background: radial-gradient( circle, rgba(245,166,35,0.12), rgba(245,166,35,0.035) 55%, transparent 75% ); box-shadow: 0 0 0 1px rgba(245,166,35,0.10), 0 0 35px rgba(245,166,35,0.20); } .cursor-dot.cta-hover { width: 9px; height: 9px; background: var(--novasky-orange); box-shadow: 0 0 0 6px rgba(245,166,35,0.08), 0 0 22px rgba(245,166,35,0.55); } /* ========================================================= CURSEUR SUR IMAGE ========================================================= */ .cursor-ring.image-hover { width: 54px; height: 54px; border-color: rgba(255,255,255,0.85); background: rgba(255,255,255,0.05); box-shadow: 0 0 25px rgba(255,255,255,0.10); } /* ========================================================= CURSEUR SUR ELEMENT NON INTERACTIF ========================================================= */ .cursor-ring.text-hover { width: 28px; height: 28px; border-color: rgba(46,155,230,0.45); background: transparent; box-shadow: none; } /* ========================================================= CURSEUR PRESSE ========================================================= */ .cursor-ring.clicking { width: 30px; height: 30px; border-color: var(--novasky-orange); box-shadow: 0 0 0 6px rgba(245,166,35,0.08), 0 0 22px rgba(245,166,35,0.25); } .cursor-dot.clicking { transform: translate3d(-50%, -50%, 0) scale(0.65); } /* ========================================================= CURSEUR HORS FENETRE ========================================================= */ body.cursor-hidden .cursor-dot, body.cursor-hidden .cursor-ring { opacity: 0; } /* ========================================================= DESACTIVATION SUR MOBILE / TABLETTE ========================================================= */ @media (max-width: 991.98px) { .cursor-dot, .cursor-ring { display: none !important; } body.has-cursor, body.has-cursor a, body.has-cursor button, body.has-cursor input, body.has-cursor select, body.has-cursor textarea { cursor: auto; } } /* ========================================================= REDUCED MOTION ========================================================= */ @media (prefers-reduced-motion: reduce) { .cursor-dot, .cursor-ring { transition: none !important; } } /* =============================================================================================================================================================== ============================================================================================================================================ ========================================================= */ /* =============================================================================================================================================================== ============================================================================================================================================ ========================================================= */ /* ========================================================= NOVASKY CONSULTING HERO PREMIUM — MASTER CSS ========================================================= VERSION CONSOLIDÉE - Cinematic background slider - Glass visual - Dynamic content - Premium animations - Desktop / TV / Tablet / Mobile - Compatible avec le JS HERO actuel ========================================================= */ /* ========================================================= 01 — HERO BASE ========================================================= */ .hero-clean { --hero-marine: #0B1440; --hero-sky: #2E9BE6; --hero-orange: #F5A623; position: relative; width: 100%; min-height: 100vh; min-height: 100svh; min-height: 100dvh; display: flex; align-items: center; overflow: hidden; isolation: isolate; background: var(--hero-marine); color: #ffffff; } /* ========================================================= 02 — BACKGROUND SLIDER ========================================================= */ .hero-clean .hero-slider { position: absolute; inset: 0; z-index: 0; width: 100%; height: 100%; overflow: hidden; background: var(--hero-marine); } .hero-clean .hero-slide { position: absolute; inset: -2%; width: 104%; height: 104%; opacity: 0; z-index: 0; background-position: center center; background-size: cover; background-repeat: no-repeat; transform: scale(1.055); filter: saturate(.92) contrast(1.03); transition: opacity 1.8s cubic-bezier(.22,.61,.36,1), transform 7s cubic-bezier(.16,1,.3,1); will-change: opacity, transform; backface-visibility: hidden; -webkit-backface-visibility: hidden; } .hero-clean .hero-slide.active { opacity: 1; z-index: 1; transform: scale(1); } /* ========================================================= 03 — OVERLAY CINEMATIC ========================================================= */ .hero-clean .hero-overlay { position: absolute; inset: 0; z-index: 2; pointer-events: none; background: linear-gradient( 90deg, rgba(5,10,35,.95) 0%, rgba(8,18,56,.84) 32%, rgba(8,18,56,.48) 65%, rgba(8,18,56,.70) 100% ), linear-gradient( 180deg, rgba(5,10,35,.38), transparent 28%, rgba(5,10,35,.68) 100% ); } /* ========================================================= 04 — ATMOSPHERIC LIGHT ========================================================= */ .hero-clean .hero-light { position: absolute; width: min(700px, 55vw); height: min(700px, 55vw); right: -300px; top: 50%; z-index: 3; transform: translateY(-50%); pointer-events: none; border-radius: 50%; background: radial-gradient( circle, rgba(46,155,230,.19) 0%, rgba(46,155,230,.08) 35%, transparent 70% ); filter: blur(15px); animation: heroLightPulse 8s ease-in-out infinite; } @keyframes heroLightPulse { 0%, 100% { opacity: .55; transform: translateY(-50%) scale(1); } 50% { opacity: .9; transform: translateY(-50%) scale(1.08); } } /* ========================================================= 05 — GRID ========================================================= */ .hero-clean .hero-grid-lines { position: absolute; inset: 0; z-index: 4; pointer-events: none; opacity: .025; background-image: linear-gradient( rgba(255,255,255,.18) 1px, transparent 1px ), linear-gradient( 90deg, rgba(255,255,255,.18) 1px, transparent 1px ); background-size: 90px 90px; mask-image: linear-gradient( to bottom, transparent, black 25%, black 75%, transparent ); -webkit-mask-image: linear-gradient( to bottom, transparent, black 25%, black 75%, transparent ); } /* ========================================================= 06 — NOISE ========================================================= */ .hero-clean .hero-noise { position: absolute; inset: 0; z-index: 5; pointer-events: none; opacity: .035; background-image: url( "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.75' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.35'/%3E%3C/svg%3E" ); } /* ========================================================= 07 — HERO INNER ========================================================= */ .hero-clean .hero-inner { position: relative; z-index: 10; width: 100%; min-height: 100vh; min-height: 100svh; min-height: 100dvh; display: flex; align-items: center; padding: clamp(105px, 10vh, 150px) clamp(24px, 5vw, 80px) clamp(85px, 8vh, 120px); } /* ========================================================= 08 — HERO LAYOUT ========================================================= */ .hero-clean .hero-layout { width: 100%; max-width: 1540px; margin-inline: auto; display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(390px, .72fr); align-items: center; gap: clamp(45px, 6vw, 110px); } /* ========================================================= 09 — HERO CONTENT ========================================================= */ .hero-clean .hero-content { position: relative; z-index: 20; width: 100%; max-width: 790px; padding-left: 24px; } /* ========================================================= 10 — DECORATIVE LINE ========================================================= */ .hero-clean .hero-content::before { content: ""; position: absolute; left: 0; top: 5px; width: 2px; height: 0; background: linear-gradient( to bottom, var(--hero-sky), var(--hero-orange), transparent ); animation: heroVerticalLine 1.2s .25s cubic-bezier(.2,.8,.2,1) forwards; } @keyframes heroVerticalLine { to { height: 190px; } } /* ========================================================= 11 — EYEBROW ========================================================= */ .hero-clean .hero-eyebrow { position: relative; display: inline-flex; align-items: center; gap: 10px; margin-bottom: 22px; padding: 8px 13px; border: 1px solid rgba(107,192,255,.25); border-radius: 999px; background: rgba(8,20,64,.38); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); font-size: .68rem; font-weight: 750; letter-spacing: .12em; text-transform: uppercase; color: rgba(255,255,255,.76); overflow: hidden; } .hero-clean .hero-eyebrow::after { content: ""; position: absolute; top: 0; left: 0; width: 60px; height: 100%; background: linear-gradient( 90deg, transparent, rgba(255,255,255,.25), transparent ); transform: translateX(-120%); animation: eyebrowShine 4s 1.5s ease-in-out infinite; } @keyframes eyebrowShine { 0% { transform: translateX(-120%); } 30%, 100% { transform: translateX(220%); } } .hero-clean .hero-eyebrow-dot { width: 7px; height: 7px; flex: 0 0 7px; border-radius: 50%; background: var(--hero-orange); box-shadow: 0 0 0 5px rgba(245,166,35,.08), 0 0 18px rgba(245,166,35,.5); animation: heroDotPulse 2.4s ease-in-out infinite; } @keyframes heroDotPulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.35); } } /* ========================================================= 12 — TITLE ========================================================= */ .hero-clean .hero-title { margin: 0; max-width: 850px; font-family: var( --font-display, Arial, sans-serif ); font-size: clamp( 2.8rem, min(5.8vw, 8vh), 5.4rem ); font-weight: 800; line-height: .98; letter-spacing: -.055em; color: #ffffff; text-wrap: balance; } .hero-clean .hero-title span { display: block; width: fit-content; background: linear-gradient( 105deg, #ffffff 0%, #8ad0ff 35%, var(--hero-sky) 68%, var(--hero-orange) 100% ); background-size: 220% auto; background-position: 0% center; -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; animation: heroGradientMove 6s ease-in-out infinite; } @keyframes heroGradientMove { 0%, 100% { background-position: 0% center; } 50% { background-position: 100% center; } } /* ========================================================= 13 — TITLE LINE ========================================================= */ .hero-clean .hero-title-line { width: 0; height: 2px; margin: 24px 0 22px; background: linear-gradient( 90deg, var(--hero-sky), var(--hero-orange), transparent ); box-shadow: 0 0 20px rgba(46,155,230,.25); animation: heroTitleLine 1s .35s cubic-bezier(.2,.8,.2,1) forwards; } @keyframes heroTitleLine { to { width: 145px; } } /* ========================================================= 14 — DESCRIPTION ========================================================= */ .hero-clean .hero-sub { max-width: 650px; margin: 0 0 32px; font-size: clamp( .95rem, 1.15vw, 1.08rem ); line-height: 1.7; color: rgba(255,255,255,.72); } /* ========================================================= 15 — CTA ========================================================= */ .hero-clean .hero-ctas { display: flex; align-items: center; flex-wrap: wrap; gap: 14px; margin-bottom: 38px; } .hero-clean .hero-main-btn { position: relative; min-height: 54px; padding: 0 21px; display: inline-flex; align-items: center; justify-content: center; gap: 10px; overflow: hidden; border-radius: 12px; transition: transform .3s ease, box-shadow .3s ease; } .hero-clean .hero-main-btn::before { content: ""; position: absolute; inset: 0; background: linear-gradient( 110deg, transparent 20%, rgba(255,255,255,.25), transparent 80% ); transform: translateX(-120%); transition: transform .6s ease; } .hero-clean .hero-main-btn:hover::before { transform: translateX(120%); } .hero-clean .hero-main-btn:hover { transform: translateY(-3px); box-shadow: 0 14px 35px rgba(46,155,230,.22); } .hero-clean .hero-icon { width: 18px; height: 18px; transition: transform .3s ease; } .hero-clean .hero-main-btn:hover .hero-icon { transform: translateX(4px); } /* ========================================================= 16 — SECONDARY BUTTON ========================================================= */ .hero-clean .hero-secondary-btn { min-height: 54px; padding: 0 19px; display: inline-flex; align-items: center; justify-content: center; border: 1px solid rgba(255,255,255,.16); border-radius: 12px; background: rgba(255,255,255,.035); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); color: rgba(255,255,255,.76); text-decoration: none; transition: border-color .3s ease, background .3s ease, color .3s ease, transform .3s ease; } .hero-clean .hero-secondary-btn:hover { transform: translateY(-3px); border-color: rgba(107,192,255,.4); background: rgba(46,155,230,.08); color: #ffffff; } /* ========================================================= 17 — META ========================================================= */ .hero-clean .hero-meta { display: flex; align-items: center; gap: 18px; } .hero-clean .hero-meta-item { display: flex; align-items: center; gap: 8px; } .hero-clean .hero-meta-number { font-size: .62rem; font-weight: 800; letter-spacing: .08em; color: var(--hero-orange); } .hero-clean .hero-meta-label { font-size: .64rem; font-weight: 600; letter-spacing: .04em; color: rgba(255,255,255,.48); text-transform: uppercase; } .hero-clean .hero-meta-separator { width: 1px; height: 20px; background: rgba(255,255,255,.14); } /* ========================================================= 18 — GLASS VISUAL CONTAINER ========================================================= */ .hero-clean .hero-glass-visual { position: relative; z-index: 15; width: min(100%, 430px); height: 560px; margin-left: auto; pointer-events: none; } /* ========================================================= 19 — GLASS CARD ========================================================= */ .hero-clean .glass-card { position: absolute; inset: 0; padding: 16px; display: flex; flex-direction: column; border: 1px solid rgba(255,255,255,.22); border-radius: 28px; background: linear-gradient( 145deg, rgba(255,255,255,.14), rgba(255,255,255,.045) ); backdrop-filter: blur(22px) saturate(130%); -webkit-backdrop-filter: blur(22px) saturate(130%); box-shadow: 0 35px 90px rgba(0,0,0,.35), inset 0 1px 0 rgba(255,255,255,.25), inset 0 0 50px rgba(46,155,230,.04); overflow: hidden; transform: perspective(1200px) rotateY(-5deg) rotateX(2deg); transition: transform .8s cubic-bezier(.2,.8,.2,1), box-shadow .5s ease, border-color .4s ease; isolation: isolate; } .hero-clean .glass-card:hover { transform: perspective(1200px) rotateY(0deg) rotateX(0deg) translateY(-6px); border-color: rgba(107,192,255,.30); box-shadow: 0 45px 100px rgba(0,0,0,.42), inset 0 1px 0 rgba(255,255,255,.3), 0 0 70px rgba(46,155,230,.08); } /* ========================================================= 20 — GLASS TOP BAR ========================================================= */ .hero-clean .glass-card-top { height: 42px; display: flex; align-items: center; justify-content: space-between; padding: 0 8px; color: rgba(255,255,255,.72); font-size: 10px; font-weight: 700; letter-spacing: .18em; text-transform: uppercase; } .hero-clean .glass-brand-mini { display: flex; align-items: center; gap: 9px; } .hero-clean .glass-brand-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--hero-sky); box-shadow: 0 0 0 4px rgba(46,155,230,.12), 0 0 16px rgba(46,155,230,.8); } .hero-clean .glass-slide-index { opacity: .55; } /* ========================================================= 21 — GLASS IMAGE ========================================================= */ .hero-clean .glass-image-wrapper { position: relative; height: 285px; flex-shrink: 0; border-radius: 19px; overflow: hidden; background: #081238; } .hero-clean .glass-image { position: absolute; inset: 0; background-size: cover; background-position: center; background-repeat: no-repeat; opacity: 1; transform: scale(1.04); transition: opacity 1s ease, transform 6s cubic-bezier(.16,1,.3,1); will-change: opacity, transform; } .hero-clean .glass-image.is-changing { opacity: 0; transform: scale(1.10); } .hero-clean .glass-image-overlay { position: absolute; inset: 0; z-index: 2; pointer-events: none; background: linear-gradient( 180deg, rgba(8,18,56,.02) 25%, rgba(8,18,56,.35) 60%, rgba(8,18,56,.92) 100% ); } /* ========================================================= 22 — IMAGE LABEL ========================================================= */ .hero-clean .glass-image-label { position: absolute; left: 20px; right: 20px; bottom: 18px; z-index: 3; display: flex; flex-direction: column; gap: 4px; } .hero-clean .glass-image-label span { font-size: 8px; letter-spacing: .20em; color: rgba(255,255,255,.58); } .hero-clean .glass-image-label strong { color: #ffffff; font-size: 21px; font-weight: 600; letter-spacing: -.02em; } /* ========================================================= 23 — WORD AREA ========================================================= */ .hero-clean .glass-word-area { position: relative; padding: 22px 8px 16px; overflow: hidden; } .hero-clean .glass-word-small { display: block; margin-bottom: 4px; color: rgba(255,255,255,.42); font-size: 8px; font-weight: 700; letter-spacing: .22em; } .hero-clean .glass-word-window { position: relative; height: 34px; overflow: hidden; } .hero-clean .glass-word-track { display: flex; flex-direction: column; transition: transform .8s cubic-bezier(.65,0,.35,1); } .hero-clean .glass-word-track span { height: 34px; display: flex; align-items: center; color: #ffffff; font-size: clamp( 18px, 2vw, 25px ); font-weight: 700; letter-spacing: -.025em; white-space: nowrap; } /* ========================================================= 24 — GLASS BOTTOM ========================================================= */ .hero-clean .glass-card-bottom { margin-top: auto; display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; padding: 15px 8px 8px; border-top: 1px solid rgba(255,255,255,.10); } .hero-clean .glass-bottom-item { display: flex; flex-direction: column; gap: 5px; } .hero-clean .glass-bottom-number { color: var(--hero-sky); font-size: 9px; font-weight: 700; letter-spacing: .12em; } .hero-clean .glass-bottom-text { color: rgba(255,255,255,.64); font-size: 10px; letter-spacing: .04em; } /* ========================================================= 25 — GLASS SCAN LINE ========================================================= */ .hero-clean .glass-scan-line { position: absolute; left: 0; right: 0; top: -10%; height: 1px; z-index: 10; pointer-events: none; background: linear-gradient( 90deg, transparent, rgba(46,155,230,.7), transparent ); box-shadow: 0 0 18px rgba(46,155,230,.6); animation: glassScan 6s linear infinite; } @keyframes glassScan { 0% { top: -10%; opacity: 0; } 10% { opacity: 1; } 80% { opacity: 1; } 100% { top: 110%; opacity: 0; } } /* ========================================================= 26 — FLOATING ORBS ========================================================= */ .hero-clean .glass-orb { position: absolute; border-radius: 50%; filter: blur(4px); pointer-events: none; animation: glassOrbFloat 7s ease-in-out infinite; } .hero-clean .glass-orb-blue { width: 150px; height: 150px; top: -50px; right: -55px; background: radial-gradient( circle, rgba(46,155,230,.35), transparent 70% ); } .hero-clean .glass-orb-orange { width: 120px; height: 120px; bottom: -35px; left: -45px; background: radial-gradient( circle, rgba(245,166,35,.25), transparent 70% ); animation-delay: -3s; } @keyframes glassOrbFloat { 0%, 100% { transform: translate3d(0,0,0); } 50% { transform: translate3d(10px,-16px,0); } } /* ========================================================= 27 — FLOATING BADGE ========================================================= */ .hero-clean .glass-floating-badge { position: absolute; right: -35px; top: 95px; z-index: 20; display: flex; align-items: center; gap: 8px; padding: 10px 14px; border: 1px solid rgba(255,255,255,.18); border-radius: 50px; background: rgba(8,18,56,.55); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); color: rgba(255,255,255,.8); font-size: 8px; font-weight: 700; letter-spacing: .18em; box-shadow: 0 15px 35px rgba(0,0,0,.2); animation: badgeFloat 5s ease-in-out infinite; } .hero-clean .glass-badge-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--hero-orange); box-shadow: 0 0 12px rgba(245,166,35,.9); } @keyframes badgeFloat { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-8px); } } /* ========================================================= 28 — FLOATING YEAR ========================================================= */ .hero-clean .glass-floating-number { position: absolute; left: -40px; bottom: 80px; color: rgba(255,255,255,.20); font-size: 11px; font-weight: 700; letter-spacing: .25em; writing-mode: vertical-rl; } /* ========================================================= 29 — HERO SLIDER NAVIGATION ========================================================= */ .hero-clean .hero-slider-navigation { position: absolute; right: clamp(30px, 4vw, 70px); bottom: clamp(24px, 5vh, 40px); z-index: 30; display: flex; align-items: center; gap: 10px; } .hero-clean .hero-slider-btn { position: relative; width: 62px; padding: 0; border: 0; background: transparent; cursor: pointer; color: rgba(255,255,255,.38); text-align: left; } .hero-clean .hero-slider-btn span { display: block; margin-bottom: 8px; font-size: .62rem; font-weight: 800; letter-spacing: .08em; transition: color .3s ease; } .hero-clean .hero-slider-btn i { display: block; width: 100%; height: 2px; overflow: hidden; background: rgba(255,255,255,.18); } .hero-clean .hero-slider-btn i::after { content: ""; display: block; width: 0; height: 100%; background: linear-gradient( 90deg, var(--hero-sky), var(--hero-orange) ); } .hero-clean .hero-slider-btn.active { color: #ffffff; } .hero-clean .hero-slider-btn.active i::after { width: 100%; transition: width 5s linear; } /* ========================================================= 30 — COUNTER ========================================================= */ .hero-clean .hero-counter { position: absolute; left: clamp(24px, 4vw, 50px); bottom: clamp(24px, 5vh, 49px); z-index: 30; display: flex; align-items: center; gap: 12px; font-size: .64rem; font-weight: 800; letter-spacing: .08em; color: rgba(255,255,255,.62); } .hero-clean .hero-counter span:first-child { color: #ffffff; } .hero-clean .hero-counter-line { width: 38px; height: 1px; background: rgba(255,255,255,.25); } /* ========================================================= 31 — SCROLL INDICATOR ========================================================= */ .hero-clean .hero-scroll { position: absolute; left: 50%; bottom: clamp(24px, 4vh, 38px); z-index: 30; transform: translateX(-50%); display: flex; flex-direction: column; align-items: center; gap: 8px; color: rgba(255,255,255,.42); font-size: .58rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; text-decoration: none; transition: color .3s ease; } .hero-clean .hero-scroll:hover { color: #ffffff; } .hero-clean .hero-scroll-line { width: 1px; height: 32px; background: linear-gradient( to bottom, var(--hero-sky), transparent ); animation: heroScroll 2s ease-in-out infinite; } @keyframes heroScroll { 0%, 100% { transform: scaleY(.45); opacity: .4; transform-origin: top; } 50% { transform: scaleY(1); opacity: 1; } } /* ========================================================= 32 — BOTTOM GLOW ========================================================= */ .hero-clean .hero-bottom-glow { position: absolute; left: 0; right: 0; bottom: 0; height: 1px; z-index: 40; background: linear-gradient( 90deg, transparent, var(--hero-sky), var(--hero-orange), transparent ); opacity: .65; box-shadow: 0 0 25px rgba(46,155,230,.35); } /* ========================================================= 33 — TEXT TRANSITION SLIDER ========================================================= */ .hero-clean .hero-content-changing { opacity: 0; transform: translateY(12px); filter: blur(4px); transition: opacity .35s ease, transform .35s ease, filter .35s ease; } .hero-clean .hero-category, .hero-clean .hero-title, .hero-clean .hero-sub { transition: opacity .45s ease, transform .45s ease, filter .45s ease; } /* ========================================================= 34 — TEXT REPLAY ========================================================= */ .hero-clean .hero-content.hero-replay .hero-eyebrow { animation: heroReveal .65s cubic-bezier(.2,.8,.2,1) both; } .hero-clean .hero-content.hero-replay .hero-title { animation: heroReveal .75s .08s cubic-bezier(.2,.8,.2,1) both; } .hero-clean .hero-content.hero-replay .hero-title-line { animation: heroTitleLine .75s .18s cubic-bezier(.2,.8,.2,1) forwards; } .hero-clean .hero-content.hero-replay .hero-sub { animation: heroReveal .7s .18s cubic-bezier(.2,.8,.2,1) both; } .hero-clean .hero-content.hero-replay .hero-ctas { animation: heroReveal .7s .28s cubic-bezier(.2,.8,.2,1) both; } .hero-clean .hero-content.hero-replay .hero-meta { animation: heroReveal .7s .36s cubic-bezier(.2,.8,.2,1) both; } @keyframes heroReveal { from { opacity: 0; transform: translateY(20px); filter: blur(4px); } to { opacity: 1; transform: translateY(0); filter: blur(0); } } /* ========================================================= 35 — GRAND ÉCRAN ========================================================= */ @media (min-width: 1600px) { .hero-clean .hero-inner { padding-left: clamp(60px, 6vw, 120px); padding-right: clamp(60px, 6vw, 120px); } .hero-clean .hero-layout { max-width: 1680px; } .hero-clean .hero-content { max-width: 920px; } .hero-clean .hero-title { font-size: clamp( 4rem, min(5.2vw, 8vh), 6.4rem ); } .hero-clean .hero-sub { max-width: 720px; font-size: clamp( 1rem, 1.1vw, 1.18rem ); } .hero-clean .hero-glass-visual { width: min(470px, 32vw); height: 600px; } .hero-clean .glass-image-wrapper { height: 315px; } } /* ========================================================= 36 — ULTRA LARGE ========================================================= */ @media (min-width: 2000px) { .hero-clean .hero-layout { max-width: 1850px; gap: 130px; } .hero-clean .hero-content { max-width: 1050px; } .hero-clean .hero-title { font-size: clamp( 4.5rem, 5vw, 7rem ); } .hero-clean .hero-sub { max-width: 780px; font-size: 1.2rem; } .hero-clean .hero-glass-visual { width: 520px; height: 640px; } .hero-clean .glass-image-wrapper { height: 340px; } } /* ========================================================= 37 — TABLETTE / PETIT DESKTOP ========================================================= */ @media (max-width: 1100px) and (min-width: 992px) { .hero-clean .hero-inner { padding: 110px 35px 90px; } .hero-clean .hero-layout { grid-template-columns: minmax(0, 1fr) minmax(330px, .68fr); gap: 35px; } .hero-clean .hero-content { max-width: 700px; } .hero-clean .hero-title { font-size: clamp( 2.8rem, 5.7vw, 4.5rem ); } .hero-clean .hero-glass-visual { width: 350px; height: 500px; } .hero-clean .glass-image-wrapper { height: 245px; } .hero-clean .glass-image-label strong { font-size: 18px; } } /* ========================================================= 38 — TABLETTE ========================================================= */ @media (max-width: 991px) { .hero-clean { min-height: 100svh; min-height: 100dvh; } .hero-clean .hero-inner { min-height: auto; padding: 125px 32px 120px; } .hero-clean .hero-layout { display: flex; flex-direction: column; align-items: center; gap: 42px; } .hero-clean .hero-content { max-width: 760px; padding-left: 0; text-align: center; } .hero-clean .hero-content::before { display: none; } .hero-clean .hero-eyebrow { margin-inline: auto; } .hero-clean .hero-title { margin-inline: auto; font-size: clamp( 2.8rem, 7vw, 4.6rem ); } .hero-clean .hero-title-line { margin-inline: auto; } .hero-clean .hero-sub { margin-inline: auto; } .hero-clean .hero-ctas { justify-content: center; } .hero-clean .hero-meta { justify-content: center; } .hero-clean .hero-glass-visual { width: min(100%, 680px); height: 420px; margin: 0 auto; } .hero-clean .glass-card { transform: none; } .hero-clean .glass-card:hover { transform: translateY(-5px); } .hero-clean .glass-image-wrapper { height: 220px; } .hero-clean .hero-slider-navigation { right: 50%; bottom: 22px; transform: translateX(50%); } .hero-clean .hero-counter { left: 28px; bottom: 26px; } .hero-clean .hero-scroll { display: none; } } /* ========================================================= 39 — MOBILE ========================================================= */ @media (max-width: 767px) { .hero-clean .hero-inner { padding: 105px 20px 105px; } .hero-clean .hero-layout { gap: 38px; } .hero-clean .hero-content { text-align: left; } .hero-clean .hero-eyebrow { margin-left: 0; margin-right: auto; } .hero-clean .hero-title { margin-left: 0; margin-right: 0; font-size: clamp( 2.35rem, 11vw, 3.5rem ); line-height: 1.01; } .hero-clean .hero-title-line { margin-left: 0; margin-right: 0; } .hero-clean .hero-sub { margin-left: 0; margin-right: 0; font-size: .91rem; line-height: 1.65; } .hero-clean .hero-ctas { flex-direction: column; align-items: stretch; width: 100%; } .hero-clean .hero-main-btn, .hero-clean .hero-secondary-btn { width: 100%; justify-content: center; } .hero-clean .hero-meta { justify-content: flex-start; gap: 9px; flex-wrap: wrap; } .hero-clean .hero-glass-visual { width: min(100%, 430px); height: 420px; } .hero-clean .glass-card { padding: 12px; border-radius: 22px; } .hero-clean .glass-image-wrapper { height: 210px; border-radius: 16px; } .hero-clean .glass-word-area { padding: 17px 7px 13px; } .hero-clean .glass-word-track span { font-size: 18px; } .hero-clean .glass-floating-number { display: none; } .hero-clean .glass-floating-badge { right: 5px; top: 65px; } .hero-clean .hero-slider-navigation { gap: 6px; } .hero-clean .hero-slider-btn { width: 48px; } .hero-clean .hero-counter { display: none; } .hero-clean .hero-overlay { background: linear-gradient( 180deg, rgba(5,10,35,.84), rgba(5,10,35,.68) 45%, rgba(5,10,35,.94) 100% ); } .hero-clean .hero-light { width: 420px; height: 420px; right: -260px; } .hero-clean .hero-grid-lines { opacity: .018; } } /* ========================================================= 40 — PETIT MOBILE ========================================================= */ @media (max-width: 480px) { .hero-clean .hero-inner { padding: 95px 18px 95px; } .hero-clean .hero-layout { gap: 32px; } .hero-clean .hero-eyebrow { font-size: .60rem; padding: 7px 11px; } .hero-clean .hero-title { font-size: clamp( 2.15rem, 10.5vw, 3rem ); } .hero-clean .hero-sub { font-size: .88rem; } .hero-clean .hero-glass-visual { height: 390px; } .hero-clean .glass-card { padding: 11px; border-radius: 20px; } .hero-clean .glass-card-top { height: 37px; } .hero-clean .glass-image-wrapper { height: 185px; border-radius: 14px; } .hero-clean .glass-image-label { left: 16px; right: 16px; bottom: 15px; } .hero-clean .glass-image-label strong { font-size: 17px; } .hero-clean .glass-word-area { padding: 15px 6px 11px; } .hero-clean .glass-word-track span { font-size: 17px; } .hero-clean .glass-card-bottom { gap: 5px; padding: 11px 6px 5px; } .hero-clean .glass-bottom-number { font-size: 8px; } .hero-clean .glass-bottom-text { font-size: 8px; } .hero-clean .glass-floating-badge { padding: 8px 11px; font-size: 7px; } } /* ========================================================= 41 — ÉCRAN TRÈS BAS / LAPTOP ========================================================= */ @media (min-width: 768px) and (max-height: 760px) { .hero-clean { min-height: 760px; } .hero-clean .hero-inner { min-height: 760px; padding-top: 100px; padding-bottom: 80px; } .hero-clean .hero-title { font-size: clamp( 2.7rem, 6vh, 4.3rem ); } .hero-clean .hero-eyebrow { margin-bottom: 14px; } .hero-clean .hero-sub { margin-bottom: 22px; } .hero-clean .hero-ctas { margin-bottom: 24px; } .hero-clean .hero-glass-visual { height: 390px; } .hero-clean .glass-image-wrapper { height: 195px; } } /* ========================================================= 42 — TRÈS PETITE HAUTEUR + DESKTOP ========================================================= */ @media (min-width: 992px) and (max-height: 680px) { .hero-clean .hero-inner { padding-top: 85px; padding-bottom: 70px; } .hero-clean .hero-title { font-size: clamp( 2.5rem, 5.8vh, 3.9rem ); } .hero-clean .hero-glass-visual { height: 350px; } .hero-clean .glass-image-wrapper { height: 170px; } .hero-clean .glass-word-area { padding: 13px 8px 10px; } } /* ========================================================= 43 — ACCESSIBILITÉ ========================================================= */ @media (prefers-reduced-motion: reduce) { .hero-clean *, .hero-clean *::before, .hero-clean *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; } .hero-clean .hero-slide { transition: opacity .01ms linear; } } /* ========================================================= 44 — SAFETY / TOUCH ========================================================= */ @media (hover: none) { .hero-clean .glass-card:hover { transform: none; } .hero-clean .hero-main-btn:hover { transform: none; box-shadow: none; } .hero-clean .hero-secondary-btn:hover { transform: none; } .hero-clean .hero-glass-visual { pointer-events: none; } } /* ========================================================= FIN — NOVASKY HERO MASTER CSS ========================================================= */ /* ========================================================= NOVASKY CONSULTING ABOUT — PREMIUM / FULL WIDTH / EDITORIAL ========================================================= */ /* ========================================================= NOVASKY CONSULTING ABOUT — PREMIUM / RESPONSIVE / ANIMATED ========================================================= */ /* ========================================================= ABOUT — BASE ========================================================= */ .about { position: relative; width: 100%; margin: 0; padding: 48px 0 55px; overflow: hidden; isolation: isolate; background: radial-gradient( circle at 8% 30%, rgba(46,155,230,.055), transparent 28% ), radial-gradient( circle at 92% 75%, rgba(245,166,35,.045), transparent 25% ), linear-gradient( 180deg, #ffffff 0%, #f8fbff 100% ); color: #081238; } /* ========================================================= CONTAINER — FULL WIDTH ========================================================= */ .about > .container { width: 100% !important; max-width: none !important; margin-left: 0 !important; margin-right: 0 !important; padding-left: 35px !important; padding-right: 35px !important; } /* ========================================================= BACKGROUND ORBS ========================================================= */ .about-bg-shape { position: absolute; width: 360px; height: 360px; border-radius: 50%; pointer-events: none; z-index: -1; opacity: .45; filter: blur(1px); animation: aboutOrbFloat 10s ease-in-out infinite; } .about-bg-shape-1 { top: -220px; right: -100px; background: radial-gradient( circle, rgba(46,155,230,.17), rgba(46,155,230,0) 70% ); } .about-bg-shape-2 { bottom: -220px; left: -120px; background: radial-gradient( circle, rgba(245,166,35,.11), rgba(245,166,35,0) 70% ); animation-delay: -4s; } /* ========================================================= SECTION TITLE ========================================================= */ .about .section-title { position: relative; width: 100% !important; max-width: 900px !important; margin: 0 auto 38px !important; padding: 0 !important; text-align: center !important; animation: aboutTitleReveal .9s cubic-bezier(.22,1,.36,1) both; } /* Decorative line */ .about .section-title::before { content: ""; display: block; width: 42px; height: 3px; margin: 0 auto 14px; border-radius: 20px; background: linear-gradient( 90deg, #2E9BE6, #F5A623 ); animation: aboutLineReveal .8s .15s cubic-bezier(.22,1,.36,1) both; } /* Eyebrow */ .about-eyebrow { display: inline-flex; align-items: center; justify-content: center; gap: 7px; margin-bottom: 9px; padding: 6px 12px; border: 1px solid rgba(46,155,230,.18); border-radius: 100px; background: rgba(46,155,230,.055); color: #2E9BE6; font-size: 9px; font-weight: 800; letter-spacing: .16em; text-transform: uppercase; box-shadow: 0 5px 20px rgba(46,155,230,.05); } .about-eyebrow::before { content: ""; width: 5px; height: 5px; border-radius: 50%; background: #F5A623; box-shadow: 0 0 0 4px rgba(245,166,35,.08); } /* Main title */ .about .section-title h2 { margin: 0; color: #081238; font-size: clamp( 31px, 4vw, 50px ); line-height: 1.06; font-weight: 800; letter-spacing: -.04em; } .about .section-title h2 span { position: relative; display: inline-block; color: #2E9BE6; } .about .section-title h2 span::after { content: ""; position: absolute; left: 7%; right: 7%; bottom: -5px; height: 2px; border-radius: 20px; background: linear-gradient( 90deg, #2E9BE6, #F5A623 ); transform: scaleX(0); transform-origin: left; animation: aboutUnderline .9s .65s cubic-bezier(.22,1,.36,1) forwards; } /* Description */ .about .section-title p { max-width: 760px; margin: 16px auto 0; color: #55627A; font-size: 17px; font-weight: 400; letter-spacing: 0; line-height: 1.75; text-transform: none; } /* ========================================================= MAIN GRID ========================================================= */ .about .row { width: 100%; margin-left: 0 !important; margin-right: 0 !important; --bs-gutter-x: 30px; --bs-gutter-y: 25px; } /* Image column */ .about .col-lg-6:first-child { padding-left: 0 !important; padding-right: 15px !important; } /* Content column */ .about .col-lg-6:last-child { padding-left: 15px !important; padding-right: 0 !important; } /* ========================================================= VISUAL CARD ========================================================= */ /* ========================================================= ABOUT — VISUAL GLASS PREMIUM ========================================================= */ .about-visual { position: relative; width: 100%; margin: 0 !important; padding: 9px; border: 1px solid rgba(255,255,255,.55); border-radius: 25px; background: linear-gradient( 145deg, rgba(255,255,255,.72), rgba(255,255,255,.32) ); box-shadow: 0 18px 45px rgba(8,18,56,.09), inset 0 1px 0 rgba(255,255,255,.8); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); overflow: visible; animation: aboutVisualReveal .9s .15s cubic-bezier(.22,1,.36,1) both; transition: transform .55s cubic-bezier(.22,1,.36,1), box-shadow .55s ease, border-color .4s ease; } /* Halo lumineux */ .about-visual::after { content: ""; position: absolute; inset: -1px; border-radius: inherit; background: linear-gradient( 135deg, rgba(46,155,230,.22), transparent 35%, transparent 65%, rgba(245,166,35,.16) ); opacity: .35; pointer-events: none; z-index: -1; transition: opacity .5s ease, transform .6s ease; } /* Survol */ .about-visual:hover { transform: translateY(-7px) scale(1.008); border-color: rgba(46,155,230,.28); box-shadow: 0 28px 65px rgba(8,18,56,.14), 0 0 0 1px rgba(46,155,230,.05), inset 0 1px 0 rgba(255,255,255,.9); } .about-visual:hover::after { opacity: .75; transform: scale(1.025); } /* ========================================================= IMAGE GLASS ========================================================= */ /* Bordure verre */ .about-image-wrapper::before { content: ""; position: absolute; inset: 0; border: 1px solid rgba(255,255,255,.25); border-radius: inherit; z-index: 4; pointer-events: none; box-shadow: inset 0 1px 0 rgba(255,255,255,.35); } /* Reflet lumineux */ /* Reflet au survol */ .about-visual:hover .about-image-wrapper::after { left: 120%; } /* Image */ /* Zoom + traitement premium */ .about-visual:hover .about-image { transform: scale(1.055); filter: saturate(1.08) contrast(1.025); } /* Overlay */ .about-visual:hover .about-image-overlay { opacity: .8; background: linear-gradient( 135deg, rgba(46,155,230,.05), rgba(8,18,56,.20) ); } /* ========================================================= IMAGE ========================================================= */ .about-image-wrapper { position: relative; width: 100%; height: clamp( 350px, 38vw, 510px ); overflow: hidden; border-radius: 18px; background: #081238; } .about-image-wrapper::before { content: ""; position: absolute; inset: 0; border: 1px solid rgba(255,255,255,.20); border-radius: inherit; z-index: 3; pointer-events: none; } .about-image { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform 1s cubic-bezier(.22,1,.36,1), filter .5s ease; } .about-image-wrapper:hover .about-image { transform: scale(1.045); filter: saturate(1.06); } /* Image overlay */ .about-image-overlay { position: absolute; inset: 0; background: linear-gradient( 135deg, rgba(8,18,56,.02), rgba(8,18,56,.20) ); z-index: 1; transition: opacity .5s ease; } .about-image-wrapper:hover .about-image-overlay { opacity: .65; } /* ========================================================= FLOATING CARD ========================================================= */ .floating-icon { display: flex; align-items: center; justify-content: center; width: 38px; height: 38px; flex: 0 0 38px; border-radius: 10px; color: #ffffff; background: linear-gradient( 135deg, #2E9BE6, #0B1440 ); font-size: 17px; box-shadow: 0 7px 18px rgba(46,155,230,.20); } .about-floating-card strong { display: block; color: #081238; font-size: 13px; font-weight: 800; } .about-floating-card span { display: block; margin-top: 1px; color: #667085; font-size: 10px; } /* ========================================================= EXPERIENCE BADGE ========================================================= */ .about-experience { position: absolute; top: 24px; right: 24px; display: flex; align-items: center; gap: 9px; padding: 10px 13px; border: 1px solid rgba(255,255,255,.10); border-radius: 12px; background: linear-gradient( 135deg, #081238, #101d52 ); box-shadow: 0 15px 35px rgba(8,18,56,.18); z-index: 6; animation: aboutBadgeFloat 6s ease-in-out infinite; } .about-experience strong { color: #F5A623; font-size: 21px; line-height: 1; } .about-experience span { color: rgba(255,255,255,.75); font-size: 8px; line-height: 1.35; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; } /* ========================================================= CONTENT CARD ========================================================= */ .about-content { position: relative; width: 100% !important; max-width: none !important; margin: 0 !important; padding: 28px 30px 26px; border: 1px solid rgba(8,18,56,.07); border-radius: 22px; background: rgba(255,255,255,.82); box-shadow: 0 18px 45px rgba(8,18,56,.065); backdrop-filter: blur(10px); animation: aboutContentReveal .9s .25s cubic-bezier(.22,1,.36,1) both; transition: box-shadow .4s ease, border-color .4s ease; } .about-content:hover { border-color: rgba(46,155,230,.14); box-shadow: 0 22px 50px rgba(8,18,56,.09); } .about-content::before { content: ""; position: absolute; top: 0; left: 25px; width: 50px; height: 3px; border-radius: 0 0 10px 10px; background: linear-gradient( 90deg, #2E9BE6, #F5A623 ); } /* ========================================================= CONTENT HEADING ========================================================= */ .about-content-heading { margin-bottom: 20px; } .about-mini-label { display: block; margin-bottom: 7px; color: #2E9BE6; font-size: 9px; font-weight: 800; letter-spacing: .16em; text-transform: uppercase; } .about-content h3 { width: 100%; max-width: 850px; margin: 0 0 10px; color: #081238; font-size: clamp( 25px, 3vw, 38px ); line-height: 1.12; font-weight: 700; letter-spacing: -.025em; } .about-content h3 strong { color: #2E9BE6; font-weight: 800; } .about-intro { width: 100%; max-width: 850px; margin: 0; color: #667085; font-size: 14px; line-height: 1.65; } /* ========================================================= FEATURES ========================================================= */ .about-features { list-style: none; width: 100%; margin: 18px 0 0; padding: 0; } .about-features li { position: relative; display: flex; align-items: flex-start; gap: 13px; width: 100%; margin-bottom: 10px; padding: 12px 13px; border: 1px solid rgba(8,18,56,.06); border-radius: 13px; background: linear-gradient( 135deg, rgba(255,255,255,.95), rgba(248,251,255,.85) ); transition: transform .35s cubic-bezier(.22,1,.36,1), box-shadow .35s ease, border-color .35s ease; } .about-features li::after { content: ""; position: absolute; left: 0; top: 10px; bottom: 10px; width: 2px; border-radius: 10px; background: linear-gradient( 180deg, #2E9BE6, #F5A623 ); transform: scaleY(0); transform-origin: center; transition: transform .35s ease; } .about-features li:hover { transform: translateX(5px); border-color: rgba(46,155,230,.18); box-shadow: 0 10px 25px rgba(8,18,56,.07); } .about-features li:hover::after { transform: scaleY(1); } /* ========================================================= FEATURE ICON ========================================================= */ .about-feature-icon { display: flex; align-items: center; justify-content: center; width: 43px; height: 43px; flex: 0 0 43px; border-radius: 11px; color: #ffffff; background: linear-gradient( 135deg, #2E9BE6, #0B1440 ); font-size: 18px; box-shadow: 0 7px 18px rgba(46,155,230,.15); transition: transform .35s ease, box-shadow .35s ease; } .about-features li:hover .about-feature-icon { transform: rotate(-5deg) scale(1.06); box-shadow: 0 10px 22px rgba(46,155,230,.22); } /* ========================================================= FEATURE CONTENT ========================================================= */ .about-feature-content { width: 100%; flex: 1; } .about-feature-content h4 { margin: 1px 0 3px; color: #081238; font-size: 15px; font-weight: 750; } .about-feature-content p { width: 100%; margin: 0; color: #667085; font-size: 12.5px; line-height: 1.55; } /* ========================================================= BOTTOM SIGNATURE ========================================================= */ .about-bottom { display: flex; align-items: stretch; width: 100%; gap: 10px; margin-top: 16px; padding-top: 14px; border-top: 1px solid rgba(8,18,56,.06); } .about-line { width: 3px; min-width: 3px; border-radius: 10px; background: linear-gradient( 180deg, #2E9BE6, #F5A623 ); } .about-bottom p { width: 100%; margin: 0; color: #667085; font-size: 12.5px; line-height: 1.55; } .about-bottom strong { color: #081238; } /* ========================================================= STRATEGY — MISSION / VISION ========================================================= */ .about-strategy-card:hover::after { transform: scale(1.4); } /* Strategy icon */ .about-strategy-card:hover .strategy-icon { transform: rotate(-5deg) scale(1.07); } /* Vision accent */ .vision-card .strategy-icon { background: linear-gradient( 135deg, #F5A623, #0B1440 ); } /* Strategy content */ .strategy-content > span { display: block; margin-bottom: 7px; color: #2E9BE6; font-size: 9px; font-weight: 800; letter-spacing: .16em; text-transform: uppercase; } .strategy-content h3 { margin: 0 0 10px; color: #081238; font-size: 21px; line-height: 1.25; font-weight: 750; } .strategy-content p { margin: 0; color: #667085; font-size: 13px; line-height: 1.7; } /* ========================================================= VALUES ========================================================= */ .values-heading .about-mini-label { margin-bottom: 7px; } .values-heading h3 { margin: 0 0 6px; color: #081238; font-size: 28px; font-weight: 800; } .values-heading p { margin: 0; color: #667085; font-size: 12px; line-height: 1.6; } .values-list { display: flex; flex-wrap: wrap; gap: 9px; } .value-item i { color: #2E9BE6; font-size: 15px; transition: transform .3s ease; } .value-item:hover i { transform: scale(1.15) rotate(-5deg); } /* ========================================================= PROMISE ========================================================= */ /* Promise mark */ /* Promise content */ .promise-content > span { display: block; margin-bottom: 8px; color: #F5A623; font-size: 9px; font-weight: 800; letter-spacing: .18em; text-transform: uppercase; } .promise-content h3 { margin: 0 0 12px; color: #ffffff; font-size: clamp( 24px, 3vw, 34px ); line-height: 1.15; font-weight: 750; } .promise-content h3 strong { color: #2E9BE6; } .promise-content p { margin: 0 0 7px; color: rgba(255,255,255,.72); font-size: 13px; line-height: 1.7; } .promise-content p:last-child { margin-bottom: 0; } .promise-content p strong { color: #ffffff; } /* ========================================================= CASCADE ANIMATIONS ========================================================= */ .about-features li:nth-child(1) { animation: aboutFeatureReveal .6s .4s cubic-bezier(.22,1,.36,1) both; } .about-features li:nth-child(2) { animation: aboutFeatureReveal .6s .52s cubic-bezier(.22,1,.36,1) both; } .about-features li:nth-child(3) { animation: aboutFeatureReveal .6s .64s cubic-bezier(.22,1,.36,1) both; } /* ========================================================= KEYFRAMES ========================================================= */ @keyframes aboutTitleReveal { from { opacity: 0; transform: translateY(22px); } to { opacity: 1; transform: translateY(0); } } @keyframes aboutLineReveal { from { opacity: 0; transform: scaleX(0); } to { opacity: 1; transform: scaleX(1); } } @keyframes aboutUnderline { to { transform: scaleX(1); } } @keyframes aboutVisualReveal { from { opacity: 0; transform: translateX(-35px) scale(.985); } to { opacity: 1; transform: translateX(0) scale(1); } } @keyframes aboutContentReveal { from { opacity: 0; transform: translateX(35px) scale(.985); } to { opacity: 1; transform: translateX(0) scale(1); } } @keyframes aboutFeatureReveal { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: translateY(0); } } @keyframes aboutCardFloat { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-7px); } } @keyframes aboutBadgeFloat { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-6px); } } @keyframes aboutOrbFloat { 0%, 100% { transform: translate(0,0); } 50% { transform: translate(-15px,20px); } } /* ========================================================= TABLET ========================================================= */ @media (max-width: 991.98px) { .about { padding: 45px 0 50px; } .about > .container { padding-left: 25px !important; padding-right: 25px !important; } .about .section-title { max-width: 760px !important; margin-bottom: 30px !important; } .about .col-lg-6:first-child, .about .col-lg-6:last-child { padding-left: 0 !important; padding-right: 0 !important; } .about-visual { max-width: 650px; margin: 0 auto !important; } .about-content { margin: 0 auto !important; } } /* ========================================================= MOBILE ========================================================= */ @media (max-width: 575.98px) { .about { padding: 35px 0 40px; } .about > .container { padding-left: 15px !important; padding-right: 15px !important; } .about .section-title { margin-bottom: 25px !important; } .about .section-title h2 { font-size: 29px; } .about .section-title p { font-size: 15px; } .about-visual { padding: 6px; border-radius: 18px; } .about-image-wrapper { height: 275px; border-radius: 14px; } .about-floating-card { left: 12px; bottom: 12px; min-width: 145px; padding: 8px 10px; } .about-experience { top: 12px; right: 12px; padding: 8px 10px; } .about-content { padding: 22px 18px 20px; } .about-content h3 { font-size: 25px; } .about-intro { font-size: 13px; } .about-feature-icon { width: 38px; height: 38px; flex-basis: 38px; font-size: 16px; } .about-feature-content h4 { font-size: 14px; } .about-feature-content p { font-size: 11.5px; } .strategy-content h3 { font-size: 18px; } .strategy-content p { font-size: 12px; } .values-heading h3 { font-size: 24px; } .promise-content h3 { font-size: 24px; } .promise-content p { font-size: 12px; } } /* ========================================================= REDUCED MOTION ========================================================= */ @media (prefers-reduced-motion: reduce) { .about *, .about *::before, .about *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; } } /* ========================================================= ABOUT — STRATEGY / VALUES / PROMISE PREMIUM EDITORIAL SYSTEM ========================================================= */ /* ========================================================= STRATEGY GRID ========================================================= */ .about-strategy-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; width: 100%; margin-top: 32px; } /* ========================================================= STRATEGY CARD ========================================================= */ .about-strategy-card { position: relative; display: flex; align-items: flex-start; gap: 20px; min-height: 245px; padding: 28px; overflow: hidden; border: 1px solid rgba(8,18,56,.07); border-radius: 22px; background: linear-gradient( 145deg, rgba(255,255,255,.96), rgba(247,250,254,.88) ); box-shadow: 0 16px 45px rgba(8,18,56,.055); opacity: 0; transform: translateY(35px); transition: opacity .8s ease, transform .8s cubic-bezier(.22,1,.36,1), box-shadow .45s ease, border-color .45s ease; } /* Apparition */ .about-strategy-card.is-visible { opacity: 1; transform: translateY(0); } /* Décalage de la deuxième carte */ .about-strategy-card:nth-child(2) { transition-delay: .12s; } /* ========================================================= LIGNE LATÉRALE ========================================================= */ .about-strategy-card::before { content: ""; position: absolute; left: 0; top: 24px; bottom: 24px; width: 3px; border-radius: 0 10px 10px 0; background: linear-gradient( 180deg, #2E9BE6, #F5A623 ); transform: scaleY(.15); transform-origin: center; opacity: .5; transition: transform .55s cubic-bezier(.22,1,.36,1), opacity .4s ease; } .about-strategy-card:hover::before { transform: scaleY(1); opacity: 1; } /* ========================================================= HALO DÉCORATIF ========================================================= */ .about-strategy-card::after { content: ""; position: absolute; width: 180px; height: 180px; right: -80px; bottom: -90px; border-radius: 50%; background: radial-gradient( circle, rgba(46,155,230,.10), transparent 68% ); pointer-events: none; transition: transform .7s cubic-bezier(.22,1,.36,1), opacity .5s ease; } .about-strategy-card:hover::after { transform: scale(1.45); opacity: .85; } /* ========================================================= CARD HOVER ========================================================= */ .about-strategy-card:hover { transform: translateY(-7px); border-color: rgba(46,155,230,.16); box-shadow: 0 25px 60px rgba(8,18,56,.10); } /* ========================================================= CARD INDEX ========================================================= */ .about-strategy-card .strategy-content::before { content: "01"; position: absolute; top: -2px; right: 0; color: rgba(8,18,56,.055); font-size: 48px; line-height: 1; font-weight: 900; letter-spacing: -.08em; pointer-events: none; transition: color .4s ease, transform .4s ease; } .about-strategy-card.vision-card .strategy-content::before { content: "02"; } .about-strategy-card:hover .strategy-content::before { color: rgba(46,155,230,.10); transform: translateY(-4px); } /* ========================================================= STRATEGY ICON ========================================================= */ .strategy-icon { position: relative; display: flex; align-items: center; justify-content: center; width: 56px; height: 56px; flex: 0 0 56px; border: 1px solid rgba(46,155,230,.16); border-radius: 16px; color: #2E9BE6; background: linear-gradient( 145deg, rgba(46,155,230,.09), rgba(255,255,255,.95) ); font-size: 23px; box-shadow: 0 10px 25px rgba(46,155,230,.08); z-index: 3; transition: transform .45s cubic-bezier(.22,1,.36,1), color .35s ease, background .35s ease, box-shadow .35s ease; } .strategy-icon::after { content: ""; position: absolute; inset: -5px; border: 1px solid rgba(46,155,230,.08); border-radius: 20px; opacity: 0; transform: scale(.75); transition: opacity .35s ease, transform .45s ease; } .about-strategy-card:hover .strategy-icon { transform: translateY(-3px) rotate(-4deg) scale(1.06); color: #ffffff; background: linear-gradient( 135deg, #2E9BE6, #0B1440 ); box-shadow: 0 14px 30px rgba(46,155,230,.20); } .about-strategy-card:hover .strategy-icon::after { opacity: 1; transform: scale(1); } /* ========================================================= VISION ICON ========================================================= */ .vision-card .strategy-icon { color: #F5A623; border-color: rgba(245,166,35,.16); background: linear-gradient( 145deg, rgba(245,166,35,.09), rgba(255,255,255,.95) ); } .vision-card:hover .strategy-icon { color: #ffffff; background: linear-gradient( 135deg, #F5A623, #0B1440 ); box-shadow: 0 14px 30px rgba(245,166,35,.20); } /* ========================================================= STRATEGY CONTENT ========================================================= */ .strategy-content { position: relative; z-index: 2; flex: 1; padding-top: 1px; } /* ========================================================= LABEL ========================================================= */ .strategy-content > span { display: inline-flex; align-items: center; gap: 7px; margin-bottom: 8px; color: #2E9BE6; font-size: 9px; font-weight: 850; letter-spacing: .17em; text-transform: uppercase; } .strategy-content > span::before { content: ""; width: 18px; height: 2px; border-radius: 20px; background: linear-gradient( 90deg, #2E9BE6, #F5A623 ); } /* ========================================================= STRATEGY TITLE ========================================================= */ .strategy-content h3 { position: relative; margin: 0 0 11px; max-width: 620px; color: #081238; font-size: 22px; line-height: 1.28; font-weight: 750; letter-spacing: -.025em; } /* ========================================================= STRATEGY TEXT ========================================================= */ .strategy-content p { max-width: 650px; margin: 0; color: #667085; font-size: 13px; line-height: 1.72; } /* ========================================================= VALUES — EDITORIAL ========================================================= */ .about-values { display: grid; grid-template-columns: 270px 1fr; gap: 40px; align-items: center; margin-top: 45px; padding: 30px 0; border-top: 1px solid rgba(8,18,56,.07); border-bottom: 1px solid rgba(8,18,56,.07); opacity: 0; transform: translateY(30px); transition: opacity .8s ease, transform .8s cubic-bezier(.22,1,.36,1); } .about-values.is-visible { opacity: 1; transform: translateY(0); } /* ========================================================= VALUES HEADING ========================================================= */ .values-heading { position: relative; padding-left: 18px; } .values-heading::before { content: ""; position: absolute; left: 0; top: 3px; bottom: 3px; width: 2px; border-radius: 10px; background: linear-gradient( 180deg, #2E9BE6, #F5A623 ); } .values-heading h3 { margin: 0 0 7px; color: #081238; font-size: 29px; font-weight: 800; letter-spacing: -.035em; } .values-heading p { margin: 0; color: #667085; font-size: 12px; line-height: 1.65; } /* ========================================================= VALUES LIST ========================================================= */ .values-list { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; } /* ========================================================= VALUE ITEM ========================================================= */ .value-item { position: relative; display: flex; align-items: center; gap: 9px; min-height: 52px; padding: 10px 12px; border: 1px solid rgba(8,18,56,.065); border-radius: 12px; background: rgba(255,255,255,.65); color: #081238; font-size: 11.5px; font-weight: 700; overflow: hidden; opacity: 0; transform: translateY(18px); transition: opacity .55s ease, transform .55s cubic-bezier(.22,1,.36,1), border-color .3s ease, box-shadow .3s ease, background .3s ease; } .about-values.is-visible .value-item { opacity: 1; transform: translateY(0); } .about-values.is-visible .value-item:nth-child(1) { transition-delay: .08s; } .about-values.is-visible .value-item:nth-child(2) { transition-delay: .14s; } .about-values.is-visible .value-item:nth-child(3) { transition-delay: .20s; } .about-values.is-visible .value-item:nth-child(4) { transition-delay: .26s; } .about-values.is-visible .value-item:nth-child(5) { transition-delay: .32s; } .about-values.is-visible .value-item:nth-child(6) { transition-delay: .38s; } .about-values.is-visible .value-item:nth-child(7) { transition-delay: .44s; } /* ========================================================= VALUE ICON ========================================================= */ .value-item i { display: flex; align-items: center; justify-content: center; width: 28px; height: 28px; flex: 0 0 28px; border-radius: 8px; color: #2E9BE6; background: rgba(46,155,230,.07); font-size: 14px; transition: transform .35s ease, color .3s ease, background .3s ease; } /* ========================================================= VALUE HOVER ========================================================= */ .value-item::after { content: ""; position: absolute; left: -100%; top: 0; width: 60%; height: 100%; background: linear-gradient( 90deg, transparent, rgba(255,255,255,.65), transparent ); transform: skewX(-20deg); transition: left .65s ease; } .value-item:hover { transform: translateY(-4px); border-color: rgba(46,155,230,.18); background: #ffffff; box-shadow: 0 10px 25px rgba(8,18,56,.065); } .value-item:hover::after { left: 140%; } .value-item:hover i { transform: rotate(-6deg) scale(1.08); color: #ffffff; background: linear-gradient( 135deg, #2E9BE6, #0B1440 ); } /* ========================================================= PROMISE ========================================================= */ .about-promise { position: relative; display: flex; align-items: flex-start; gap: 28px; margin-top: 45px; padding: 34px 40px; overflow: hidden; border-radius: 23px; background: linear-gradient( 120deg, #081238 0%, #0d1b4d 65%, #10245c 100% ); color: #ffffff; box-shadow: 0 20px 55px rgba(8,18,56,.14); opacity: 0; transform: translateY(35px) scale(.985); transition: opacity .9s ease, transform .9s cubic-bezier(.22,1,.36,1); } .about-promise.is-visible { opacity: 1; transform: translateY(0) scale(1); } /* ========================================================= PROMISE HALO ========================================================= */ .about-promise::before { content: ""; position: absolute; top: -130px; right: -80px; width: 290px; height: 290px; border-radius: 50%; background: radial-gradient( circle, rgba(46,155,230,.24), transparent 70% ); animation: promiseHalo 8s ease-in-out infinite; } .about-promise::after { content: ""; position: absolute; bottom: -120px; left: 20%; width: 250px; height: 250px; border-radius: 50%; background: radial-gradient( circle, rgba(245,166,35,.13), transparent 70% ); animation: promiseHalo 10s -3s ease-in-out infinite; } /* ========================================================= PROMISE MARK ========================================================= */ .promise-mark { position: relative; z-index: 2; flex: 0 0 auto; color: #2E9BE6; font-family: Georgia, serif; font-size: 90px; line-height: .65; opacity: .65; transform: translateY(-4px); animation: promiseQuote 4s ease-in-out infinite; } /* ========================================================= PROMISE CONTENT ========================================================= */ .promise-content { position: relative; z-index: 2; max-width: 900px; } .promise-content > span { display: inline-flex; align-items: center; gap: 8px; margin-bottom: 9px; color: #F5A623; font-size: 9px; font-weight: 850; letter-spacing: .18em; text-transform: uppercase; } .promise-content > span::before { content: ""; width: 20px; height: 2px; border-radius: 10px; background: #F5A623; } .promise-content h3 { margin: 0 0 13px; color: #ffffff; font-size: clamp( 24px, 3vw, 34px ); line-height: 1.15; font-weight: 750; letter-spacing: -.03em; } .promise-content h3 strong { color: #2E9BE6; } .promise-content p { margin: 0 0 8px; color: rgba(255,255,255,.72); font-size: 13px; line-height: 1.7; } .promise-content p:last-child { margin-bottom: 0; } .promise-content p strong { color: #ffffff; } /* ========================================================= ANIMATIONS ========================================================= */ @keyframes promiseHalo { 0%, 100% { transform: translate3d(0,0,0) scale(1); } 50% { transform: translate3d(-15px,12px,0) scale(1.08); } } @keyframes promiseQuote { 0%, 100% { transform: translateY(-4px); } 50% { transform: translateY(4px); } } /* ========================================================= RESPONSIVE — TABLET ========================================================= */ @media (max-width: 991.98px) { .about-strategy-grid { grid-template-columns: 1fr; gap: 16px; } .about-values { grid-template-columns: 1fr; gap: 24px; } .values-list { grid-template-columns: repeat(3, minmax(0, 1fr)); } } /* ========================================================= RESPONSIVE — MOBILE ========================================================= */ @media (max-width: 575.98px) { .about-strategy-grid { gap: 13px; margin-top: 24px; } .about-strategy-card { min-height: auto; gap: 14px; padding: 21px 18px; border-radius: 17px; } .about-strategy-card::before { top: 18px; bottom: 18px; } .strategy-icon { width: 44px; height: 44px; flex-basis: 44px; border-radius: 12px; font-size: 18px; } .strategy-content h3 { padding-right: 5px; font-size: 18px; line-height: 1.3; } .strategy-content p { font-size: 12px; line-height: 1.65; } .strategy-content::before { display: none; } .about-values { margin-top: 30px; padding: 24px 0; } .values-heading { padding-left: 15px; } .values-heading h3 { font-size: 24px; } .values-list { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 7px; } .value-item { min-height: 48px; padding: 8px 9px; font-size: 10.5px; } .value-item i { width: 25px; height: 25px; flex-basis: 25px; font-size: 12px; } .about-promise { flex-direction: column; gap: 4px; margin-top: 30px; padding: 26px 20px; border-radius: 18px; } .promise-mark { font-size: 58px; } .promise-content h3 { font-size: 24px; } .promise-content p { font-size: 12px; } } /* ========================================================= REDUCED MOTION ========================================================= */ @media (prefers-reduced-motion: reduce) { .about-strategy-card, .about-values, .value-item, .about-promise { opacity: 1 !important; transform: none !important; transition: none !important; } .promise-mark, .about-promise::before, .about-promise::after { animation: none !important; } } /* ========================================================= FLOATING CARD — GLASS ========================================================= */ .about-floating-card { position: absolute; left: 25px; bottom: 28px; display: flex; align-items: center; gap: 10px; min-width: 170px; padding: 11px 14px; border: 1px solid rgba(255,255,255,.65); border-radius: 13px; background: rgba(255,255,255,.72); box-shadow: 0 15px 35px rgba(8,18,56,.15), inset 0 1px 0 rgba(255,255,255,.9); backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px); z-index: 6; animation: aboutCardFloat 5s ease-in-out infinite; transition: transform .4s cubic-bezier(.22,1,.36,1), box-shadow .4s ease; } /* ========================================================= PROMISE CTA — PREMIUM ========================================================= */ .about-promise-action { display: inline-flex; align-items: center; justify-content: center; gap: 12px; margin-top: 18px; padding: 11px 16px; border: 1px solid rgba(255,255,255,.22); border-radius: 100px; background: rgba(255,255,255,.07); color: #ffffff; text-decoration: none; font-size: 11px; font-weight: 750; letter-spacing: .02em; backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); box-shadow: 0 8px 25px rgba(0,0,0,.10); transition: transform .4s cubic-bezier(.22,1,.36,1), background .4s ease, border-color .4s ease, box-shadow .4s ease; } /* Icône */ .about-promise-action i { display: flex; align-items: center; justify-content: center; width: 27px; height: 27px; border-radius: 50%; background: #2E9BE6; color: #ffffff; font-size: 12px; transition: transform .4s cubic-bezier(.22,1,.36,1); } /* Hover */ .about-promise-action:hover { color: #ffffff; text-decoration: none; transform: translateY(-3px); background: rgba(46,155,230,.14); border-color: rgba(46,155,230,.45); box-shadow: 0 12px 30px rgba(0,0,0,.18); } .about-promise-action:hover i { transform: rotate(45deg) scale(1.08); } /* ========================================================= ABOUT — SCROLL REVEAL ========================================================= */ .about.reveal-ready .about-content, .about.reveal-ready .about-visual, .about.reveal-ready .about-strategy-card, .about.reveal-ready .about-values, .about.reveal-ready .about-promise { opacity: 0; transform: translateY(35px); } .about.is-visible .about-content, .about.is-visible .about-visual, .about.is-visible .about-strategy-card, .about.is-visible .about-values, .about.is-visible .about-promise { opacity: 1; transform: translateY(0); transition: opacity .8s ease, transform .9s cubic-bezier(.22,1,.36,1); } .about.is-visible .about-strategy-card:nth-child(2) { transition-delay: .12s; } .about.is-visible .about-values { transition-delay: .20s; } .about.is-visible .about-promise { transition-delay: .30s; } /* ========================================================= NOVASKY — ABOUT FINAL POLISH GLASS + HOVER + REVEAL + PROMISE CTA ========================================================= */ /* ========================================================= 01 — IMAGE GLASS PREMIUM ========================================================= */ .about-visual { isolation: isolate; } .about-image-wrapper { isolation: isolate; } /* Voile glass */ .about-image-wrapper::after { content: ""; position: absolute; inset: 0; width: auto; height: auto; top: 0; left: -120%; background: linear-gradient( 110deg, transparent 20%, rgba(255,255,255,.04) 35%, rgba(255,255,255,.24) 48%, rgba(255,255,255,.06) 58%, transparent 75% ); transform: skewX(-15deg); opacity: 0; z-index: 5; pointer-events: none; transition: left 1s cubic-bezier(.22,1,.36,1), opacity .35s ease; } /* Effet glass au survol */ .about-visual:hover .about-image-wrapper::after { left: 120%; opacity: 1; } /* ========================================================= 02 — IMAGE PROFONDEUR ========================================================= */ .about-image { transform: scale(1.001); filter: saturate(.98) contrast(1.01); transition: transform 1.1s cubic-bezier(.22,1,.36,1), filter .7s ease; } .about-visual:hover .about-image { transform: scale(1.065); filter: saturate(1.08) contrast(1.04); } /* ========================================================= 03 — GLASS OVERLAY ========================================================= */ .about-image-overlay { background: linear-gradient( 135deg, rgba(8,18,56,.04), rgba(8,18,56,.10) 45%, rgba(46,155,230,.10) ); opacity: .72; transition: opacity .6s ease, background .6s ease; } .about-visual:hover .about-image-overlay { opacity: 1; background: linear-gradient( 135deg, rgba(8,18,56,.05), rgba(46,155,230,.08) 45%, rgba(8,18,56,.20) ); } /* ========================================================= 04 — BORDURE GLASS ANIMÉE ========================================================= */ .about-image-wrapper { box-shadow: inset 0 0 0 1px rgba(255,255,255,.18), inset 0 1px 0 rgba(255,255,255,.35); } .about-visual:hover .about-image-wrapper { box-shadow: inset 0 0 0 1px rgba(255,255,255,.32), inset 0 1px 0 rgba(255,255,255,.55), 0 0 0 1px rgba(46,155,230,.05); } /* ========================================================= 05 — FLOATING CARD GLASS ========================================================= */ .about-floating-card { background: linear-gradient( 135deg, rgba(255,255,255,.76), rgba(255,255,255,.52) ); backdrop-filter: blur(20px) saturate(130%); -webkit-backdrop-filter: blur(20px) saturate(130%); border: 1px solid rgba(255,255,255,.72); box-shadow: 0 18px 45px rgba(8,18,56,.16), inset 0 1px 0 rgba(255,255,255,.95); transition: transform .45s cubic-bezier(.22,1,.36,1), box-shadow .45s ease, border-color .35s ease; } .about-floating-card:hover { transform: translateY(-7px) scale(1.025); border-color: rgba(46,155,230,.30); box-shadow: 0 25px 55px rgba(8,18,56,.20), 0 0 0 1px rgba(46,155,230,.05), inset 0 1px 0 rgba(255,255,255,1); } /* ========================================================= 06 — EXPÉRIENCE : PETIT EFFET LUMINEUX ========================================================= */ .about-experience { overflow: hidden; border: 1px solid rgba(255,255,255,.16); } .about-experience::after { content: ""; position: absolute; top: 0; left: -100%; width: 70%; height: 100%; background: linear-gradient( 90deg, transparent, rgba(255,255,255,.10), transparent ); transform: skewX(-20deg); transition: left .8s ease; } .about-experience:hover::after { left: 130%; } /* ========================================================= 07 — STRATEGY : LÉGER GLASS ========================================================= */ .about-strategy-card { background: linear-gradient( 145deg, rgba(255,255,255,.88), rgba(247,250,254,.72) ); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); } .about-strategy-card:hover { box-shadow: 0 28px 65px rgba(8,18,56,.11), 0 0 0 1px rgba(46,155,230,.04); } /* ========================================================= 08 — VALEURS : APPARITION EN CASCADE ========================================================= */ .about-values.is-visible .value-item { animation: aboutValuePop .65s cubic-bezier(.22,1,.36,1) both; } .about-values.is-visible .value-item:nth-child(1) { animation-delay: .05s; } .about-values.is-visible .value-item:nth-child(2) { animation-delay: .10s; } .about-values.is-visible .value-item:nth-child(3) { animation-delay: .15s; } .about-values.is-visible .value-item:nth-child(4) { animation-delay: .20s; } .about-values.is-visible .value-item:nth-child(5) { animation-delay: .25s; } .about-values.is-visible .value-item:nth-child(6) { animation-delay: .30s; } .about-values.is-visible .value-item:nth-child(7) { animation-delay: .35s; } @keyframes aboutValuePop { from { opacity: 0; transform: translateY(18px) scale(.96); } to { opacity: 1; transform: translateY(0) scale(1); } } /* ========================================================= 09 — PROMESSE : GLASS INTERNE ========================================================= */ .about-promise { isolation: isolate; } .about-promise .promise-content { position: relative; } .about-promise .promise-content::after { content: ""; position: absolute; top: -15px; right: -80px; width: 180px; height: 180px; border-radius: 50%; border: 1px solid rgba(255,255,255,.06); box-shadow: inset 0 0 35px rgba(46,155,230,.04); pointer-events: none; opacity: .7; } /* ========================================================= 10 — PROMISE CTA PREMIUM ========================================================= */ .about-promise-action { position: relative; overflow: hidden; margin-top: 20px; padding: 7px 8px 7px 15px; border: 1px solid rgba(255,255,255,.18); background: rgba(255,255,255,.055); box-shadow: 0 10px 30px rgba(0,0,0,.12), inset 0 1px 0 rgba(255,255,255,.08); transition: transform .45s cubic-bezier(.22,1,.36,1), border-color .4s ease, background .4s ease, box-shadow .4s ease; } /* reflet CTA */ .about-promise-action::before { content: ""; position: absolute; top: 0; left: -110%; width: 65%; height: 100%; background: linear-gradient( 100deg, transparent, rgba(255,255,255,.15), transparent ); transform: skewX(-18deg); transition: left .8s cubic-bezier(.22,1,.36,1); } .about-promise-action:hover::before { left: 130%; } .about-promise-action:hover { transform: translateY(-4px); background: rgba(46,155,230,.12); border-color: rgba(46,155,230,.42); box-shadow: 0 16px 35px rgba(0,0,0,.20), 0 0 25px rgba(46,155,230,.08); } .about-promise-action i { width: 30px; height: 30px; background: linear-gradient( 135deg, #2E9BE6, #2384c5 ); box-shadow: 0 5px 15px rgba(46,155,230,.25); transition: transform .45s cubic-bezier(.22,1,.36,1), box-shadow .4s ease; } .about-promise-action:hover i { transform: translateX(3px) rotate(45deg); box-shadow: 0 7px 20px rgba(46,155,230,.38); } /* ========================================================= 11 — PROMISE TEXTE ========================================================= */ .about-promise .promise-content > span { opacity: .9; } .about-promise .promise-content h3 { text-shadow: 0 4px 20px rgba(0,0,0,.12); } /* ========================================================= 12 — SCROLL REVEAL PLUS FLUIDE ========================================================= */ .about.reveal-ready .about-content, .about.reveal-ready .about-visual, .about.reveal-ready .about-strategy-card, .about.reveal-ready .about-values, .about.reveal-ready .about-promise { opacity: 0; transform: translateY(28px) scale(.985); filter: blur(2px); } .about.is-visible .about-content, .about.is-visible .about-visual, .about.is-visible .about-strategy-card, .about.is-visible .about-values, .about.is-visible .about-promise { opacity: 1; transform: translateY(0) scale(1); filter: blur(0); transition: opacity .85s ease, transform .9s cubic-bezier(.22,1,.36,1), filter .8s ease; } /* ========================================================= 13 — APPARITION INDIVIDUELLE ========================================================= */ .about.is-visible .about-feature-icon { animation: aboutIconAppear .65s .25s cubic-bezier(.22,1,.36,1) both; } @keyframes aboutIconAppear { from { opacity: 0; transform: scale(.7) rotate(-12deg); } to { opacity: 1; transform: scale(1) rotate(0); } } /* ========================================================= 14 — CURSEUR LUMINEUX SUR LES CARTES ========================================================= */ .about-strategy-card, .about-content, .about-values, .about-promise { --mouse-x: 50%; --mouse-y: 50%; } .about-strategy-card::after { background: radial-gradient( circle at var(--mouse-x) var(--mouse-y), rgba(46,155,230,.12), transparent 32% ); } /* ========================================================= 15 — MOBILE ========================================================= */ @media (max-width: 575.98px) { .about-image-wrapper { height: 275px; } .about-floating-card { backdrop-filter: blur(15px) saturate(120%); } .about-promise-action { width: fit-content; max-width: 100%; } } /* ========================================================= 16 — ACCESSIBILITÉ ========================================================= */ @media (prefers-reduced-motion: reduce) { .about-image-wrapper::after, .about-promise-action::before, .about-experience::after { display: none; } .about-image, .about-floating-card, .about-strategy-card, .about-promise-action { transition: none !important; } } /* ========================================================= NOVASKY — ABOUT MICRO ZOOM PREMIUM AU SURVOL ========================================================= */ /* Cartes principales */ .about-content, .about-strategy-card, .about-values, .about-promise, .about-visual { transition: transform .45s cubic-bezier(.22,1,.36,1), box-shadow .45s ease, border-color .4s ease; } /* Zoom léger */ .about-content:hover, .about-strategy-card:hover, .about-values:hover, .about-promise:hover, .about-visual:hover { transform: translateY(-4px) scale(1.015); } /* ========================================================= ÉLÉMENTS INTERNES ========================================================= */ /* Features */ .about-features li { transition: transform .4s cubic-bezier(.22,1,.36,1), box-shadow .4s ease, border-color .35s ease; } .about-features li:hover { transform: translateX(5px) scale(1.015); } /* Valeurs */ .value-item { transition: transform .4s cubic-bezier(.22,1,.36,1), box-shadow .35s ease, background .35s ease, border-color .35s ease; } .value-item:hover { transform: translateY(-4px) scale(1.035); } /* Icônes */ .about-feature-icon, .strategy-icon, .value-item i, .floating-icon { transition: transform .4s cubic-bezier(.22,1,.36,1), box-shadow .35s ease, background .35s ease; } /* Zoom icône */ .about-features li:hover .about-feature-icon { transform: scale(1.09) rotate(-4deg); } .about-strategy-card:hover .strategy-icon { transform: scale(1.09) rotate(-4deg); } .value-item:hover i { transform: scale(1.12) rotate(-5deg); } /* Floating card */ .about-floating-card { transition: transform .45s cubic-bezier(.22,1,.36,1), box-shadow .4s ease; } .about-floating-card:hover { transform: translateY(-6px) scale(1.035); } /* Badge expérience */ .about-experience { transition: transform .4s cubic-bezier(.22,1,.36,1), box-shadow .4s ease; } .about-experience:hover { transform: translateY(-4px) scale(1.045); } /* Bouton promesse */ .about-promise-action { transition: transform .4s cubic-bezier(.22,1,.36,1), box-shadow .4s ease, background .35s ease, border-color .35s ease; } .about-promise-action:hover { transform: translateY(-3px) scale(1.04); } /* ========================================================= IMAGE — ZOOM UN PEU PLUS CINÉMATIQUE ========================================================= */ .about-visual:hover .about-image { transform: scale(1.07); } /* ========================================================= MOBILE Évite un effet trop important sur écran tactile ========================================================= */ @media (max-width: 575.98px) { .about-content:hover, .about-strategy-card:hover, .about-values:hover, .about-promise:hover, .about-visual:hover { transform: translateY(-2px) scale(1.008); } } /* ========================================================= NOVASKY CONSULTING EXPERTISE — PREMIUM / GLASS / ANIMATED /* ========================================================= NOVASKY CONSULTING SERVICES — PREMIUM / MODERN / INTERACTIVE ========================================================= */ /* ========================================================= NOVASKY — SERVICES PREMIUM 8 SERVICES / COMPACT / MODERNE / DYNAMIQUE ========================================================= */ .services { position: relative; overflow: hidden; padding: clamp(85px, 9vw, 125px) 0; background: radial-gradient( circle at 8% 10%, rgba(46,155,230,.13), transparent 28% ), radial-gradient( circle at 92% 85%, rgba(245,166,35,.09), transparent 28% ), linear-gradient( 135deg, #07102f 0%, #09163d 48%, #06102d 100% ); } /* ========================================================= TEXTURE PREMIUM ========================================================= */ .services::before { content: ""; position: absolute; inset: 0; background-image: linear-gradient( rgba(255,255,255,.018) 1px, transparent 1px ), linear-gradient( 90deg, rgba(255,255,255,.018) 1px, transparent 1px ); background-size: 55px 55px; mask-image: linear-gradient( to bottom, rgba(0,0,0,.8), transparent 90% ); pointer-events: none; } /* ========================================================= ORBES ========================================================= */ .services-bg-orb { position: absolute; border-radius: 50%; pointer-events: none; filter: blur(5px); animation: servicesOrbFloat 9s ease-in-out infinite; } .services-orb-1 { width: 420px; height: 420px; top: -220px; left: -180px; background: radial-gradient( circle, rgba(46,155,230,.18), transparent 68% ); } .services-orb-2 { width: 360px; height: 360px; right: -170px; bottom: -170px; background: radial-gradient( circle, rgba(245,166,35,.12), transparent 68% ); animation-delay: -4s; } @keyframes servicesOrbFloat { 0%, 100% { transform: translate3d(0,0,0); } 50% { transform: translate3d(20px,-18px,0); } } /* ========================================================= HEADER ========================================================= */ .services-heading { position: relative; z-index: 2; max-width: 850px; margin-bottom: clamp(45px, 6vw, 65px); } .services-eyebrow { display: inline-flex; align-items: center; gap: 10px; margin-bottom: 16px; font-family: var(--font-accent); font-size: .72rem; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: #7ccaff; } .services-eyebrow span { width: 8px; height: 8px; border-radius: 50%; background: var(--sky); box-shadow: 0 0 0 5px rgba(46,155,230,.08), 0 0 18px rgba(46,155,230,.55); animation: eyebrowPulse 2.4s ease-in-out infinite; } @keyframes eyebrowPulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.3); } } .services-heading h2 { margin: 0; max-width: 760px; font-family: var(--font-display); font-size: clamp(2.1rem, 4vw, 3.8rem); line-height: 1.08; font-weight: 700; letter-spacing: -.035em; color: #fff; } .services-heading h2 strong { display: block; background: linear-gradient( 100deg, #fff 10%, #71c8ff 50%, #f5a623 100% ); -webkit-background-clip: text; background-clip: text; color: transparent; } .services-heading p { max-width: 680px; margin: 22px 0 0; font-family: var(--font-accent); font-size: .98rem; line-height: 1.8; color: rgba(255,255,255,.62); } /* ========================================================= GRID ========================================================= */ .services .row { position: relative; z-index: 2; --bs-gutter-x: 22px; --bs-gutter-y: 22px; } /* ========================================================= CARTE ========================================================= */ .service-item { position: relative; height: 100%; overflow: hidden; border-radius: 18px; background: linear-gradient( 145deg, rgba(255,255,255,.075), rgba(255,255,255,.025) ); border: 1px solid rgba(255,255,255,.105); box-shadow: 0 18px 45px rgba(0,0,0,.22), inset 0 1px 0 rgba(255,255,255,.055); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); transform: translateY(0) scale(1); transition: transform .5s cubic-bezier(.2,.8,.2,1), border-color .4s ease, box-shadow .5s ease, background .4s ease; } /* ligne lumineuse supérieure */ .service-item::before { content: ""; position: absolute; top: 0; left: 12%; right: 12%; height: 2px; opacity: .75; background: linear-gradient( 90deg, transparent, var(--service-color), transparent ); filter: blur(.3px); transition: left .5s ease, right .5s ease, opacity .4s ease; } /* halo interne */ .service-item::after { content: ""; position: absolute; width: 180px; height: 180px; right: -90px; top: 100px; border-radius: 50%; background: radial-gradient( circle, var(--service-color-alpha), transparent 70% ); opacity: .18; pointer-events: none; transition: transform .6s ease, opacity .5s ease; } .service-item:hover { transform: translateY(-9px) scale(1.018); border-color: var(--service-border); background: linear-gradient( 145deg, rgba(255,255,255,.095), rgba(255,255,255,.035) ); box-shadow: 0 28px 60px rgba(0,0,0,.32), 0 0 35px var(--service-shadow); } .service-item:hover::before { left: 6%; right: 6%; opacity: 1; } .service-item:hover::after { transform: scale(1.5); opacity: .32; } /* ========================================================= VISUEL ========================================================= */ .service-visual { position: relative; height: 190px; overflow: hidden; } .service-visual img { width: 100%; height: 100%; object-fit: cover; opacity: .76; transform: scale(1.01); transition: transform .8s cubic-bezier(.2,.8,.2,1), opacity .5s ease, filter .5s ease; } .service-item:hover .service-visual img { transform: scale(1.09); opacity: .9; filter: saturate(1.12) contrast(1.04); } /* voile */ .service-visual::after { content: ""; position: absolute; inset: 0; background: linear-gradient( to bottom, rgba(5,12,35,.05), rgba(5,12,35,.88) ); pointer-events: none; } /* ========================================================= NUMÉRO ========================================================= */ .service-number { position: absolute; top: 15px; right: 16px; z-index: 3; font-family: var(--font-display); font-size: .7rem; font-weight: 700; letter-spacing: .12em; color: rgba(255,255,255,.8); padding: 7px 10px; border: 1px solid rgba(255,255,255,.18); border-radius: 8px; background: rgba(5,12,35,.45); backdrop-filter: blur(8px); transition: transform .4s ease, background .4s ease; } .service-item:hover .service-number { transform: translateY(-3px); background: var(--service-color); color: #06102d; } /* ========================================================= GLOW IMAGE ========================================================= */ .service-glow { position: absolute; z-index: 2; width: 130px; height: 130px; left: 18px; bottom: -70px; border-radius: 50%; background: radial-gradient( circle, var(--service-color), transparent 70% ); opacity: .3; filter: blur(15px); transition: transform .6s ease, opacity .5s ease; } .service-item:hover .service-glow { transform: scale(1.4); opacity: .55; } /* ========================================================= DETAILS ========================================================= */ .service-item .details { position: relative; z-index: 5; margin: -45px 16px 16px; padding: 30px 24px 24px; border-radius: 15px; display: flex; flex-direction: column; min-height: 250px; background: linear-gradient( 145deg, rgba(10,24,58,.97), rgba(7,16,42,.96) ); border: 1px solid rgba(255,255,255,.09); box-shadow: 0 14px 30px rgba(0,0,0,.25); transition: transform .45s ease, border-color .4s ease; } .service-item:hover .details { border-color: var(--service-border); transform: translateY(-3px); } /* ========================================================= ICÔNE ========================================================= */ .service-icon { position: absolute; top: -27px; left: 24px; width: 54px; height: 54px; display: flex; align-items: center; justify-content: center; border-radius: 15px; color: #fff; background: linear-gradient( 145deg, var(--service-color), var(--service-color-dark) ); border: 3px solid #09163d; box-shadow: 0 8px 22px var(--service-shadow); font-size: 1.25rem; transition: transform .45s cubic-bezier(.2,.8,.2,1), box-shadow .4s ease; } .service-item:hover .service-icon { transform: translateY(-5px) rotate(-4deg) scale(1.08); box-shadow: 0 13px 28px var(--service-shadow); } /* ========================================================= TITRE ========================================================= */ .service-heading { padding-top: 5px; } .service-heading > span { display: block; margin-bottom: 7px; font-family: var(--font-accent); font-size: .63rem; font-weight: 800; letter-spacing: .16em; color: var(--service-color); } .service-heading h3 { margin: 0; font-family: var(--font-display); font-size: 1.3rem; line-height: 1.18; font-weight: 700; color: #fff; transition: color .3s ease, transform .3s ease; } .service-item:hover .service-heading h3 { color: #fff; transform: translateX(2px); } /* ========================================================= INTRO ========================================================= */ .service-intro { margin: 15px 0 17px; font-family: var(--font-accent); font-size: .82rem; line-height: 1.65; color: rgba(255,255,255,.61); } /* ========================================================= LISTE ========================================================= */ .service-list { /* La liste complète est désormais affichée dans la fenêtre modale "En savoir plus" ; la carte s'arrête sur la description courte. Le contenu reste dans le DOM pour que le JS puisse le lire au clic sur "Voir plus". */ display: none; } .service-list > span { position: relative; padding-left: 15px; font-family: var(--font-accent); font-size: .75rem; line-height: 1.45; color: rgba(255,255,255,.78); } .service-list > span::before { content: ""; position: absolute; left: 0; top: .55em; width: 5px; height: 5px; border-radius: 50%; background: var(--service-color); box-shadow: 0 0 8px var(--service-shadow); } /* ========================================================= CONTENU CACHÉ ========================================================= */ .service-more { display: grid; grid-template-rows: 0fr; opacity: 0; overflow: hidden; transition: grid-template-rows .5s ease, opacity .35s ease; } .service-more > * { min-height: 0; } .service-more span { position: relative; padding: 0 0 0 15px; font-family: var(--font-accent); font-size: .75rem; line-height: 1.45; color: rgba(255,255,255,.68); } .service-more span::before { content: ""; position: absolute; left: 0; top: .55em; width: 5px; height: 5px; border-radius: 50%; background: var(--service-color); } /* OUVERT */ .service-item.is-open .service-more { grid-template-rows: 1fr; opacity: 1; margin-top: 7px; } .service-item.is-open .service-toggle i { transform: rotate(90deg); } /* ========================================================= BOUTON ========================================================= */ .service-toggle { display: inline-flex; align-items: center; justify-content: center; gap: 8px; width: fit-content; margin-top: auto; padding: 10px 18px; border: 1px solid var(--service-color); border-radius: 100px; background: transparent; font-family: var(--font-accent); font-size: .72rem; font-weight: 700; color: var(--service-color); cursor: pointer; transition: gap .3s ease, color .3s ease, background .3s ease, transform .3s ease; } .service-toggle i { transition: transform .35s ease; } .service-toggle:hover { gap: 13px; color: #06102d; background: var(--service-color); transform: translateY(-2px); } /* ========================================================= COULEURS — CHAQUE SERVICE ========================================================= */ .service-blue { --service-color: #2e9be6; --service-color-dark: #1471b8; --service-color-alpha: rgba(46,155,230,.8); --service-border: rgba(46,155,230,.5); --service-shadow: rgba(46,155,230,.22); } .service-orange { --service-color: #f5a623; --service-color-dark: #d27d00; --service-color-alpha: rgba(245,166,35,.8); --service-border: rgba(245,166,35,.5); --service-shadow: rgba(245,166,35,.2); } .service-cyan { --service-color: #32d4e8; --service-color-dark: #168eaa; --service-color-alpha: rgba(50,212,232,.8); --service-border: rgba(50,212,232,.5); --service-shadow: rgba(50,212,232,.2); } .service-purple { --service-color: #a879ff; --service-color-dark: #6942bb; --service-color-alpha: rgba(168,121,255,.8); --service-border: rgba(168,121,255,.5); --service-shadow: rgba(168,121,255,.2); } .service-red { --service-color: #ff667d; --service-color-dark: #c63750; --service-color-alpha: rgba(255,102,125,.8); --service-border: rgba(255,102,125,.5); --service-shadow: rgba(255,102,125,.2); } .service-green { --service-color: #39c98a; --service-color-dark: #16815a; --service-color-alpha: rgba(57,201,138,.8); --service-border: rgba(57,201,138,.5); --service-shadow: rgba(57,201,138,.2); } .service-gold { --service-color: #e9c46a; --service-color-dark: #a87925; --service-color-alpha: rgba(233,196,106,.8); --service-border: rgba(233,196,106,.5); --service-shadow: rgba(233,196,106,.2); } .service-violet { --service-color: #d07cff; --service-color-dark: #843eb0; --service-color-alpha: rgba(208,124,255,.8); --service-border: rgba(208,124,255,.5); --service-shadow: rgba(208,124,255,.2); } /* ========================================================= CTA ========================================================= */ /* ========================================================= SERVICES CTA — PREMIUM ========================================================= */ .services-cta { position: relative; z-index: 3; display: flex; align-items: center; justify-content: space-between; gap: 45px; width: min(100%, 980px); margin: 65px auto 0; padding: 34px 38px; overflow: hidden; border: 1px solid rgba(255,255,255,.11); border-radius: 20px; background: linear-gradient( 110deg, rgba(46,155,230,.10), rgba(255,255,255,.045) 45%, rgba(245,166,35,.07) ); box-shadow: 0 25px 70px rgba(0,0,0,.25), inset 0 1px 0 rgba(255,255,255,.06); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); transition: transform .5s cubic-bezier(.2,.8,.2,1), border-color .4s ease, box-shadow .5s ease; } /* ========================================================= HALO DÉCORATIF ========================================================= */ .services-cta::before { content: ""; position: absolute; width: 280px; height: 280px; left: -150px; top: -170px; border-radius: 50%; background: radial-gradient( circle, rgba(46,155,230,.18), transparent 68% ); pointer-events: none; transition: transform .7s ease; } .services-cta::after { content: ""; position: absolute; width: 220px; height: 220px; right: -100px; bottom: -140px; border-radius: 50%; background: radial-gradient( circle, rgba(245,166,35,.14), transparent 68% ); pointer-events: none; } .services-cta:hover { transform: translateY(-5px); border-color: rgba(46,155,230,.28); box-shadow: 0 30px 80px rgba(0,0,0,.32), 0 0 35px rgba(46,155,230,.06), inset 0 1px 0 rgba(255,255,255,.08); } .services-cta:hover::before { transform: scale(1.25); } /* ========================================================= CONTENU ========================================================= */ .services-cta-content { position: relative; z-index: 2; max-width: 620px; } /* ========================================================= BADGE ========================================================= */ .services-cta-badge { display: inline-flex; align-items: center; gap: 9px; margin-bottom: 12px; font-family: var(--font-accent); font-size: .66rem; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: #78caff; } .services-cta-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--sky); box-shadow: 0 0 0 5px rgba(46,155,230,.08), 0 0 15px rgba(46,155,230,.6); animation: servicesCtaPulse 2.2s ease-in-out infinite; } @keyframes servicesCtaPulse { 0%, 100% { transform: scale(1); opacity: .8; } 50% { transform: scale(1.35); opacity: 1; } } /* ========================================================= TITRE ========================================================= */ .services-cta h3 { margin: 0; font-family: var(--font-display); font-size: clamp(1.45rem, 2.5vw, 2rem); line-height: 1.15; letter-spacing: -.025em; color: #fff; } .services-cta h3 strong { background: linear-gradient( 100deg, #fff, #71c8ff 60%, #f5a623 ); -webkit-background-clip: text; background-clip: text; color: transparent; } /* ========================================================= DESCRIPTION ========================================================= */ .services-cta-content p { max-width: 590px; margin: 12px 0 0; font-family: var(--font-accent); font-size: .82rem; line-height: 1.7; color: rgba(255,255,255,.58); } /* ========================================================= ACTION ========================================================= */ .services-cta-action { position: relative; z-index: 2; display: flex; flex-direction: column; align-items: flex-end; flex-shrink: 0; } /* ========================================================= BOUTON ========================================================= */ .services-cta-button { display: inline-flex; align-items: center; gap: 13px; padding: 5px 5px 5px 19px; border: 1px solid rgba(255,255,255,.12); border-radius: 12px; background: linear-gradient( 135deg, #2e9be6, #1672b9 ); color: #fff; font-family: var(--font-accent); font-size: .78rem; font-weight: 700; box-shadow: 0 12px 30px rgba(46,155,230,.18); transition: transform .35s ease, box-shadow .35s ease, gap .35s ease; } .services-cta-button:hover { transform: translateY(-3px); gap: 17px; color: #fff; box-shadow: 0 16px 35px rgba(46,155,230,.30); } /* ========================================================= FLÈCHE ========================================================= */ .services-cta-arrow { width: 39px; height: 39px; display: flex; align-items: center; justify-content: center; border-radius: 9px; background: rgba(255,255,255,.13); font-size: .95rem; transition: transform .35s ease, background .35s ease; } .services-cta-button:hover .services-cta-arrow { transform: rotate(8deg); background: rgba(255,255,255,.2); } /* ========================================================= MICRO-TEXTE ========================================================= */ .services-cta-action small { margin-top: 9px; font-family: var(--font-accent); font-size: .62rem; color: rgba(255,255,255,.38); letter-spacing: .03em; } /* ========================================================= RESPONSIVE ========================================================= */ @media (max-width: 767px) { .services-cta { flex-direction: column; align-items: flex-start; gap: 25px; padding: 28px 25px; margin-top: 48px; } .services-cta-action { align-items: flex-start; } .services-cta-content p { font-size: .78rem; } } @media (max-width: 480px) { .services-cta { border-radius: 16px; padding: 25px 21px; } .services-cta-button { font-size: .72rem; } .services-cta-arrow { width: 36px; height: 36px; } } /* ========================================================= RESPONSIVE ========================================================= */ @media (max-width: 1199px) { .service-visual { height: 180px; } .service-item .details { margin-left: 13px; margin-right: 13px; padding-left: 21px; padding-right: 21px; } } @media (max-width: 767px) { .services { padding: 75px 0; } .services-heading h2 { font-size: 2.25rem; } .service-visual { height: 200px; } .service-item .details { margin: -42px 12px 12px; padding: 29px 20px 21px; } .services-cta { flex-direction: column; align-items: flex-start; } } @media (max-width: 480px) { .services-heading h2 { font-size: 1.95rem; } .service-visual { height: 175px; } .service-heading h3 { font-size: 1.18rem; } .service-intro { font-size: .78rem; } } /* ========================================================= ACCESSIBILITÉ ========================================================= */ @media (prefers-reduced-motion: reduce) { .services *, .services *::before, .services *::after { animation: none !important; transition: none !important; } } /* ========================================================= NOVASKY — SERVICES LARGEUR + GRILLE 4 × 2 ========================================================= */ /* ========================================================= SECTION ========================================================= */ .services { position: relative; width: 100%; overflow: hidden; padding: clamp(90px, 8vw, 140px) 0; } /* ========================================================= HEADER — PRESQUE PLEINE LARGEUR ========================================================= */ .services .services-heading { position: relative; z-index: 5; width: 100%; max-width: none; margin: 0 0 clamp(55px, 6vw, 80px); padding: 0 clamp(24px, 4vw, 70px); text-align: center; opacity: 1 !important; visibility: visible !important; transform: none !important; } .services .services-heading-inner { width: 100%; max-width: 1600px; margin: 0 auto; padding: 0 clamp(10px, 2vw, 30px); opacity: 1 !important; visibility: visible !important; } /* EYEBROW */ .services .services-eyebrow { display: inline-flex; align-items: center; justify-content: center; gap: 11px; margin-bottom: 20px; color: var(--sky-light); font-family: var(--font-accent); font-size: .225rem; font-weight: 700; letter-spacing: .18em; text-transform: uppercase; opacity: 1 !important; visibility: visible !important; } .services .services-eyebrow > span { width: 34px; height: 2px; border-radius: 20px; background: linear-gradient( 90deg, var(--sky), var(--orange) ); box-shadow: 0 0 15px rgba(46,155,230,.35); } /* TITRE */ .services .services-heading h2 { width: 100%; max-width: 1250px; margin: 0 auto; font-family: var(--font-display); font-size: clamp(2.5rem, 5vw, 5.2rem); font-weight: 600; line-height: 1.04; letter-spacing: -.045em; color: #fff; opacity: 1 !important; visibility: visible !important; transform: none !important; } .services .services-heading h2 strong { font-weight: 800; background: linear-gradient( 105deg, #ffffff 0%, var(--sky-light) 45%, var(--orange) 100% ); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; } /* DESCRIPTION */ .services .services-heading p { width: 100%; max-width: 1050px; margin: 28px auto 0; font-family: var(--font-accent); font-size: clamp(.95rem, 1.1vw, 1.08rem); line-height: 1.8; color: rgba(255,255,255,.68); opacity: 1 !important; visibility: visible !important; } /* LIGNE */ .services .services-heading::after { content: ""; display: block; width: 90px; height: 2px; margin: 30px auto 0; border-radius: 20px; background: linear-gradient( 90deg, var(--sky), var(--orange) ); box-shadow: 0 0 18px rgba(46,155,230,.25); } /* ========================================================= CONTENEUR DES 8 SERVICES ========================================================= */ .services > .container:last-of-type { width: 100%; max-width: 1700px; margin: 0 auto; padding-left: clamp(24px, 3vw, 55px); padding-right: clamp(24px, 3vw, 55px); } /* ========================================================= GRILLE — 4 SERVICES PAR LIGNE ========================================================= */ .services > .container:last-of-type > .row { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(18px, 1.7vw, 28px); margin: 0; } /* ========================================================= COLONNES ========================================================= */ .services > .container:last-of-type > .row > [class*="col-"] { width: 100%; max-width: none; padding: 0; } /* ========================================================= CARTES ========================================================= */ .services .service-item { position: relative; width: 100%; height: 100%; overflow: hidden; border-radius: 20px; background: linear-gradient( 145deg, rgba(255,255,255,.075), rgba(255,255,255,.025) ); border: 1px solid rgba(255,255,255,.10); box-shadow: 0 15px 40px rgba(0,0,0,.16); transition: transform .45s cubic-bezier(.2,.8,.2,1), border-color .4s ease, box-shadow .45s ease; isolation: isolate; } /* ========================================================= HOVER CARTE ========================================================= */ .services .service-item:hover { transform: translateY(-8px); border-color: color-mix( in srgb, var(--service-color, var(--novasky-sky)), transparent 35% ); box-shadow: 0 25px 55px rgba(0,0,0,.25), 0 0 35px color-mix( in srgb, var(--service-color, var(--novasky-sky)), transparent 88% ); } /* ========================================================= IMAGE ========================================================= */ .services .service-visual { position: relative; height: clamp(170px, 13vw, 230px); overflow: hidden; } .services .service-visual img { width: 100%; height: 100%; object-fit: cover; transition: transform .8s cubic-bezier(.2,.8,.2,1), filter .5s ease; } .services .service-item:hover .service-visual img { transform: scale(1.08); filter: brightness(.88) saturate(1.1); } /* ========================================================= NUMÉRO ========================================================= */ .services .service-number { position: absolute; top: 15px; right: 15px; z-index: 3; padding: 6px 10px; border-radius: 8px; background: rgba(5,10,30,.55); border: 1px solid rgba(255,255,255,.18); backdrop-filter: blur(10px); color: #fff; font-family: var(--font-accent); font-size: .7rem; font-weight: 700; letter-spacing: .12em; } /* ========================================================= DETAILS ========================================================= */ .services .details { position: relative; margin: 0; padding: 48px 24px 25px; background: linear-gradient( 180deg, rgba(255,255,255,.055), rgba(255,255,255,.025) ); border-radius: 0; box-shadow: none; text-align: left; } /* ========================================================= ICÔNE ========================================================= */ .services .service-icon { position: absolute; top: -27px; left: 24px; width: 54px; height: 54px; display: flex; align-items: center; justify-content: center; border-radius: 15px; background: linear-gradient( 145deg, var(--service-color, var(--novasky-sky)), rgba(255,255,255,.9) ); color: #081238; border: 4px solid rgba(8,18,56,.9); box-shadow: 0 10px 25px color-mix( in srgb, var(--service-color, var(--novasky-sky)), transparent 65% ); font-size: 1.25rem; transition: transform .4s ease, box-shadow .4s ease; } .services .service-item:hover .service-icon { transform: translateY(-4px) scale(1.08) rotate(-3deg); } /* ========================================================= TITRE CARTE ========================================================= */ .services .service-heading span { display: block; margin-bottom: 7px; color: var(--service-color, var(--novasky-sky)); font-family: var(--font-accent); font-size: .65rem; font-weight: 800; letter-spacing: .16em; } .services .service-heading h3 { margin: 0; color: #fff; font-family: var(--font-display); font-size: clamp(1.05rem, 1.25vw, 1.3rem); line-height: 1.2; font-weight: 700; } /* ========================================================= INTRO ========================================================= */ .services .service-intro { margin: 17px 0 18px; color: rgba(255,255,255,.62); font-size: .84rem; line-height: 1.65; } /* ========================================================= LISTE ========================================================= */ .services .service-list { display: flex; flex-direction: column; gap: 7px; color: rgba(255,255,255,.72); font-size: .76rem; line-height: 1.45; } .services .service-list > span { position: relative; padding-left: 13px; } .services .service-list > span::before { content: ""; position: absolute; left: 0; top: .55em; width: 4px; height: 4px; border-radius: 50%; background: var(--service-color, var(--novasky-sky)); } /* ========================================================= VOIR PLUS ========================================================= */ .services .service-more { display: none; } /* ========================================================= CTA ========================================================= */ .services .services-cta { margin-top: 60px; } /* ========================================================= TABLETTE ========================================================= */ @media (max-width: 1100px) { .services > .container:last-of-type > .row { grid-template-columns: repeat(2, minmax(0, 1fr)); } } /* ========================================================= MOBILE ========================================================= */ @media (max-width: 600px) { .services > .container:last-of-type { padding-left: 18px; padding-right: 18px; } .services > .container:last-of-type > .row { grid-template-columns: 1fr; gap: 22px; } .services .service-visual { height: 210px; } } /* ========================================================= NOVASKY — SERVICES HEADING COMPACT / CENTERED / PREMIUM / DYNAMIC ========================================================= */ .services .services-heading-inner { --sky: #2E9BE6; --orange: #F5A623; position: relative; width: min(100%, 1080px); margin: 0 auto; padding: 18px clamp(16px, 3vw, 34px) 15px; text-align: center; overflow: hidden; isolation: isolate; border-radius: 14px; /* Fond très léger */ background: linear-gradient( 135deg, rgba(255,255,255,.035), rgba(255,255,255,.012) ); border: 1px solid rgba(255,255,255,.055); box-shadow: 0 12px 35px rgba(0,0,0,.10); transition: border-color .4s ease, box-shadow .4s ease, transform .4s ease; } /* ========================================================= MICRO HALO CENTRAL ========================================================= */ .services .services-heading-inner::before { content: ""; position: absolute; left: 50%; top: -100px; width: 260px; height: 180px; transform: translateX(-50%); border-radius: 50%; background: radial-gradient( circle, rgba(46,155,230,.12), transparent 70% ); filter: blur(5px); z-index: -1; animation: servicesMiniGlow 7s ease-in-out infinite; } /* ========================================================= PETITE LIGNE SUPÉRIEURE ========================================================= */ .services .services-heading-inner::after { content: ""; position: absolute; top: 0; left: 50%; width: 90px; height: 1px; transform: translateX(-50%); background: linear-gradient( 90deg, transparent, var(--sky), var(--orange), transparent ); box-shadow: 0 0 10px rgba(46,155,230,.35); opacity: .75; } /* ========================================================= HOVER ========================================================= */ .services .services-heading-inner:hover { transform: translateY(-2px); border-color: rgba(46,155,230,.15); box-shadow: 0 18px 45px rgba(0,0,0,.14), 0 0 25px rgba(46,155,230,.035); } /* ========================================================= EYEBROW ========================================================= */ .services .services-eyebrow { position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 7px; margin-bottom: 5px; color: rgba(120,205,255,.82); font-family: var(--font-accent); font-size: 20px; font-weight: 800; letter-spacing: .30rem; text-transform: uppercase; line-height: 1; } /* ========================================================= PETITE LIGNE EYEBROW ========================================================= */ .services .services-eyebrow > span { position: relative; width: 22px; height: 1px; border-radius: 20px; background: linear-gradient( 90deg, transparent, var(--sky) ); box-shadow: 0 0 7px rgba(46,155,230,.35); } /* Petit point animé */ .services .services-eyebrow > span::after { content: ""; position: absolute; right: -2px; top: 50%; width: 3px; height: 3px; border-radius: 50%; background: var(--sky); transform: translateY(-50%); box-shadow: 0 0 7px rgba(46,155,230,.7); animation: servicesMiniDot 2.8s ease-in-out infinite; } /* ========================================================= TITRE ========================================================= */ .services .services-heading h2 { position: relative; width: 100%; margin: 0 auto; color: rgba(255,255,255,.93); font-family: var(--font-display); font-size: clamp( 1.45rem, 2.6vw, 2.35rem ); font-weight: 500; line-height: 1.04; letter-spacing: -.045em; text-wrap: balance; text-shadow: 0 4px 18px rgba(0,0,0,.15); } /* ========================================================= MOT FORT ========================================================= */ .services .services-heading h2 strong { position: relative; display: inline-block; margin-left: .12em; font-weight: 800; background: linear-gradient( 105deg, #8bd7ff, var(--sky) 48%, var(--orange) ); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; filter: drop-shadow( 0 4px 10px rgba(46,155,230,.10) ); transition: transform .35s ease, filter .35s ease; } /* ========================================================= PETIT ACCENT SOUS LE MOT FORT ========================================================= */ .services .services-heading h2 strong::after { content: ""; position: absolute; left: 10%; right: 10%; bottom: -3px; height: 1px; background: linear-gradient( 90deg, transparent, var(--sky), var(--orange), transparent ); opacity: .35; transform: scaleX(.4); transition: transform .4s ease, opacity .4s ease; } .services .services-heading-inner:hover .services-heading h2 strong { transform: translateY(-1px); filter: drop-shadow( 0 0 13px rgba(46,155,230,.20) ); } .services .services-heading-inner:hover .services-heading h2 strong::after { transform: scaleX(1); opacity: .65; } /* ========================================================= DESCRIPTION ========================================================= */ .services .services-heading p { width: min(100%, 700px); margin: 7px auto 0; color: rgba(255,255,255,.48); font-family: var(--font-accent); font-size: .68rem; font-weight: 400; line-height: 1.45; letter-spacing: .005em; text-wrap: balance; } /* ========================================================= LIGNE CENTRALE ========================================================= */ .services .services-heading-line { position: relative; width: min(100%, 600px); height: 1px; margin: 10px auto 8px; background: linear-gradient( 90deg, transparent, rgba(255,255,255,.055), transparent ); } /* Segment lumineux */ .services .services-heading-line span { position: absolute; left: 50%; top: 0; width: 48px; height: 1px; transform: translateX(-50%); border-radius: 50px; background: linear-gradient( 90deg, var(--sky), var(--orange) ); box-shadow: 0 0 9px rgba(46,155,230,.35); animation: servicesMiniLine 3.8s ease-in-out infinite; } /* ========================================================= META ========================================================= */ .services .services-heading-meta { display: flex; align-items: center; justify-content: center; gap: 7px; color: rgba(255,255,255,.24); font-family: var(--font-accent); font-size: .40rem; font-weight: 800; letter-spacing: .16em; line-height: 1; } /* ========================================================= POINTS ========================================================= */ .services .services-heading-meta i { display: block; width: 2px; height: 2px; border-radius: 50%; background: var(--orange); box-shadow: 0 0 5px rgba(245,166,35,.45); animation: servicesMiniPulse 2.5s ease-in-out infinite; } /* ========================================================= ANIMATIONS ========================================================= */ @keyframes servicesMiniGlow { 0%, 100% { transform: translateX(-50%) scale(1); opacity: .55; } 50% { transform: translateX(-50%) scale(1.12); opacity: .9; } } @keyframes servicesMiniDot { 0%, 100% { transform: translateY(-50%) scale(.7); opacity: .5; } 50% { transform: translateY(-50%) scale(1.3); opacity: 1; } } @keyframes servicesMiniLine { 0%, 100% { width: 38px; opacity: .45; } 50% { width: 72px; opacity: 1; } } @keyframes servicesMiniPulse { 0%, 100% { transform: scale(.7); opacity: .4; } 50% { transform: scale(1.4); opacity: 1; } } /* ========================================================= TABLETTE ========================================================= */ @media (max-width: 900px) { .services .services-heading-inner { padding: 17px 22px 14px; } .services .services-heading h2 { font-size: clamp( 1.4rem, 4vw, 2rem ); } } /* ========================================================= MOBILE ========================================================= */ @media (max-width: 600px) { .services .services-heading-inner { width: calc(100% - 4px); padding: 16px 12px 13px; border-radius: 12px; } .services .services-eyebrow { font-size: .47rem; letter-spacing: .15em; margin-bottom: 5px; } .services .services-eyebrow > span { width: 18px; } .services .services-heading h2 { font-size: clamp( 1.30rem, 7vw, 1.75rem ); line-height: 1.06; letter-spacing: -.04em; } .services .services-heading h2 strong { margin-left: 0; } .services .services-heading p { max-width: 470px; margin-top: 7px; font-size: .62rem; line-height: 1.45; } .services .services-heading-line { margin: 9px auto 7px; } .services .services-heading-meta { gap: 5px; font-size: .35rem; letter-spacing: .12em; } } /* ========================================================= REDUCTION DES ANIMATIONS ========================================================= */ @media (prefers-reduced-motion: reduce) { .services .services-heading-inner, .services .services-heading-inner::before, .services .services-eyebrow > span::after, .services .services-heading-line span, .services .services-heading-meta i { animation: none !important; transition: none !important; } } /* ========================================================= NOVASKY CONSULTING WHY — TRANSFORMATION PATH PREMIUM DIGITAL EXPERIENCE GLASS • LIGHT • DEPTH • MOTION • MICRO-INTERACTIONS ========================================================= */ /* ========================================================= VARIABLES ========================================================= */ .why-path { --why-marine: #0B1440; --why-deep: #050A24; --why-sky: #2E9BE6; --why-orange: #F5A623; --why-white: #FFFFFF; --why-muted: rgba(255,255,255,.55); --why-border: rgba(255,255,255,.11); position: relative; width: 100%; padding: clamp(65px, 7vw, 95px) 0; overflow: hidden; isolation: isolate; color: var(--why-white); background: radial-gradient( circle at 50% 48%, rgba(46,155,230,.10), transparent 30% ), linear-gradient( 135deg, var(--why-deep), var(--why-marine) ); } /* ========================================================= BACKGROUND ========================================================= */ .why-path-bg { position: absolute; inset: 0; z-index: -1; pointer-events: none; overflow: hidden; } .why-grid { position: absolute; inset: 0; opacity: .18; background-image: linear-gradient( rgba(255,255,255,.035) 1px, transparent 1px ), linear-gradient( 90deg, rgba(255,255,255,.035) 1px, transparent 1px ); background-size: 46px 46px; mask-image: radial-gradient( circle at center, black, transparent 82% ); } .why-glow { position: absolute; width: 360px; height: 360px; border-radius: 50%; filter: blur(100px); opacity: .13; animation: whyGlowMove 9s ease-in-out infinite alternate; } .why-glow-1 { top: 5%; left: -5%; background: var(--why-sky); } .why-glow-2 { right: -5%; bottom: 5%; background: var(--why-orange); animation-delay: -3s; } .why-glow-3 { top: 35%; left: 45%; background: var(--why-sky); opacity: .07; animation-delay: -5s; } @keyframes whyGlowMove { from { transform: scale(.85) translate3d(0,0,0); } to { transform: scale(1.15) translate3d(30px,-20px,0); } } /* ========================================================= CONTAINER — FULL WIDTH ========================================================= */ /* ========================================================= WHY PATH — CONTENEUR PREMIUM LARGEUR + MARGES GAUCHE / DROITE ========================================================= */ .why-path-container { width: min( 1420px, calc(100% - 80px) ); margin: 0 auto; } /* ========================================================= SYSTEM PRINCIPAL ========================================================= */ .why-path-system { position: relative; width: 100%; display: grid; grid-template-columns: minmax(330px, 1fr) 250px minmax(330px, 1fr); grid-template-rows: minmax(165px, auto) minmax(165px, auto); column-gap: clamp( 55px, 7vw, 110px ); row-gap: clamp( 30px, 3vw, 45px ); align-items: center; } /* ========================================================= CARTES — MARGE VISUELLE ========================================================= */ .why-module { width: 100%; max-width: 430px; min-height: 175px; padding: 22px 26px; box-sizing: border-box; } /* gauche */ .why-module-1, .why-module-3 { justify-self: end; margin-right: clamp( 12px, 2vw, 28px ); } /* droite */ .why-module-2, .why-module-4 { justify-self: start; margin-left: clamp( 12px, 2vw, 28px ); } /* ========================================================= CENTRE ========================================================= */ .why-path-center { grid-column: 2; grid-row: 1 / 3; width: 250px; height: 390px; margin: 0 auto; position: relative; display: grid; place-items: center; z-index: 5; } /* ========================================================= TRANSFORM ========================================================= */ .why-transform { width: 215px; height: 215px; } /* ========================================================= CONNECTEURS ========================================================= */ .why-connector { width: clamp( 65px, 6vw, 105px ); } /* ========================================================= GRAND ÉCRAN ========================================================= */ @media (min-width: 1500px) { .why-path-container { width: min( 1500px, calc(100% - 120px) ); } .why-path-system { column-gap: 120px; } .why-module { max-width: 450px; } } /* ========================================================= TABLETTE ========================================================= */ @media (max-width: 1100px) { .why-path-container { width: calc(100% - 50px); } .why-path-system { grid-template-columns: minmax(280px, 1fr) 210px minmax(280px, 1fr); column-gap: 35px; } .why-module-1, .why-module-3 { margin-right: 8px; } .why-module-2, .why-module-4 { margin-left: 8px; } .why-transform { width: 185px; height: 185px; } } /* ========================================================= MOBILE ========================================================= */ @media (max-width: 760px) { .why-path-container { width: calc(100% - 24px); } .why-path-system { grid-template-columns: 1fr 1fr; grid-template-areas: "center center" "module1 module2" "module3 module4"; gap: 14px; } .why-module-1, .why-module-2, .why-module-3, .why-module-4 { margin: 0; max-width: none; } .why-path-center { grid-area: center; width: 100%; height: 220px; } .why-transform { width: 170px; height: 170px; } .why-connector { display: none; } } /* ========================================================= HEADER ========================================================= */ .why-path-header { width: min( 850px, 100% ); margin: 0 auto clamp(38px, 4vw, 52px); text-align: center; } .why-path-eyebrow { display: inline-flex; align-items: center; gap: 10px; margin-bottom: 14px; font-family: "Montserrat", sans-serif; font-size: 9px; font-weight: 800; letter-spacing: .24em; color: rgba(255,255,255,.65); } .eyebrow-line { width: 30px; height: 1px; background: var(--why-sky); box-shadow: 0 0 10px rgba(46,155,230,.8); } .eyebrow-number { color: var(--why-orange); } .eyebrow-dot { width: 5px; height: 5px; border-radius: 50%; background: var(--why-sky); box-shadow: 0 0 8px var(--why-sky); animation: eyebrowPulse 2s ease-in-out infinite; } @keyframes eyebrowPulse { 50% { transform: scale(1.5); opacity: .4; } } .why-path-title { margin: 0; font-family: "Montserrat", sans-serif; font-size: clamp( 29px, 3.5vw, 48px ); line-height: 1.05; letter-spacing: -.045em; font-weight: 500; } .why-path-title strong { display: block; font-weight: 800; background: linear-gradient( 90deg, #FFFFFF, #67C8FF, #FFFFFF ); background-size: 200% auto; color: transparent; background-clip: text; animation: whyTitleShine 7s linear infinite; } @keyframes whyTitleShine { to { background-position: 200% center; } } .why-path-intro { max-width: 650px; margin: 14px auto 0; font-family: "Lato", sans-serif; font-size: clamp( 11px, 1vw, 13px ); line-height: 1.65; color: var(--why-muted); } /* ========================================================= MAIN SYSTEM ========================================================= */ /* ========================================================= MODULES ========================================================= */ .why-module { position: relative; width: 100%; min-height: clamp( 155px, 12vw, 190px ); padding: 20px clamp( 20px, 2vw, 28px ); display: flex; align-items: center; gap: 18px; overflow: hidden; border: 1px solid var(--why-border); background: linear-gradient( 135deg, rgba(255,255,255,.075), rgba(255,255,255,.018) ); backdrop-filter: blur(18px); box-shadow: 0 20px 45px rgba(0,0,0,.20), inset 0 1px 0 rgba(255,255,255,.06); opacity: 0; transition: opacity .7s ease, transform .7s ease, border-color .35s ease, box-shadow .35s ease; } .why-module.is-visible { opacity: 1; --ty: 0px; } .why-module:hover { border-color: rgba(46,155,230,.55); box-shadow: 0 25px 55px rgba(0,0,0,.30), 0 0 35px rgba(46,155,230,.08), inset 0 1px 0 rgba(255,255,255,.09); transform: translateY(-5px); } /* ========================================================= MODULE POSITIONS ========================================================= */ .why-module-1 { grid-column: 1; grid-row: 1; } .why-module-2 { grid-column: 3; grid-row: 1; } .why-module-3 { grid-column: 1; grid-row: 2; } .why-module-4 { grid-column: 3; grid-row: 2; } /* ========================================================= MODULE NUMBER ========================================================= */ .module-number { position: absolute; top: 14px; right: 18px; font-family: "Montserrat", sans-serif; font-size: 11px; font-weight: 900; letter-spacing: .15em; color: var(--why-orange); opacity: .8; } /* ========================================================= MODULE ICON ========================================================= */ .module-icon { position: relative; flex: 0 0 clamp( 45px, 4vw, 58px ); width: clamp( 45px, 4vw, 58px ); height: clamp( 45px, 4vw, 58px ); display: grid; place-items: center; border: 1px solid rgba(46,155,230,.35); background: rgba(46,155,230,.06); transform: rotate(45deg); transition: transform .4s ease; } .module-icon::before { content: ""; position: absolute; inset: -7px; border-radius: 50%; background: radial-gradient( circle, rgba(46,155,230,.16), transparent 68% ); filter: blur(3px); } .module-icon svg { position: relative; z-index: 2; width: 22px; height: 22px; fill: none; stroke: var(--why-sky); stroke-width: 1.6; transform: rotate(-45deg); filter: drop-shadow( 0 0 7px rgba(46,155,230,.75) ); } .why-module:hover .module-icon { transform: rotate(45deg) scale(1.08); } /* ========================================================= CONTENT ========================================================= */ .module-content { min-width: 0; } .module-label { display: block; margin-bottom: 6px; font-family: "Montserrat", sans-serif; font-size: 8px; font-weight: 900; letter-spacing: .2em; color: var(--why-sky); } .module-content h3 { margin: 0; font-family: "Montserrat", sans-serif; font-size: clamp( 16px, 1.45vw, 21px ); line-height: 1.12; letter-spacing: -.025em; font-weight: 500; } .module-content h3 strong { display: block; font-weight: 800; color: #FFFFFF; } .module-content p { max-width: 410px; margin: 8px 0 0; font-family: "Lato", sans-serif; font-size: clamp( 10px, .85vw, 12px ); line-height: 1.55; color: rgba(255,255,255,.53); } /* ========================================================= DECORATIVE CORNERS ========================================================= */ .module-corner { position: absolute; width: 15px; height: 15px; border-color: var(--why-sky); opacity: .7; transition: width .3s ease, height .3s ease; } .module-corner-tl { top: 0; left: 0; border-top: 1px solid; border-left: 1px solid; } .module-corner-br { right: 0; bottom: 0; border-right: 1px solid; border-bottom: 1px solid; } .why-module:hover .module-corner { width: 25px; height: 25px; } /* ========================================================= MODULE LIGHT LINE ========================================================= */ .module-line { position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: linear-gradient( 90deg, transparent, var(--why-sky), transparent ); opacity: .35; transform: scaleX(.25); transition: transform .5s ease; } .why-module:hover .module-line { transform: scaleX(1); opacity: .8; } /* ========================================================= CENTER ========================================================= */ .why-path-center { position: relative; grid-column: 2; grid-row: 1 / 3; width: 260px; height: 390px; display: grid; place-items: center; z-index: 5; } /* ========================================================= TRANSFORM ========================================================= */ .why-transform { position: relative; width: 210px; height: 210px; display: grid; place-items: center; border-radius: 50%; background: radial-gradient( circle, rgba(46,155,230,.15), rgba(5,10,36,.98) 65% ); border: 1px solid rgba(46,155,230,.55); box-shadow: 0 0 45px rgba(46,155,230,.14), inset 0 0 40px rgba(46,155,230,.08); } /* ========================================================= CENTER AURA ========================================================= */ .transform-aura { position: absolute; inset: -40px; border-radius: 50%; background: radial-gradient( circle, rgba(46,155,230,.14), transparent 68% ); filter: blur(12px); animation: transformAura 3.5s ease-in-out infinite; } @keyframes transformAura { 50% { transform: scale(1.13); opacity: .45; } } /* ========================================================= RINGS ========================================================= */ .transform-ring { position: absolute; border-radius: 50%; pointer-events: none; } .transform-ring-outer { inset: -16px; border: 1px solid rgba(46,155,230,.35); border-right-color: var(--why-orange); animation: transformRotate 13s linear infinite; } .transform-ring-inner { inset: 10px; border: 1px dashed rgba(46,155,230,.30); animation: transformRotateReverse 9s linear infinite; } @keyframes transformRotate { to { transform: rotate(360deg); } } @keyframes transformRotateReverse { to { transform: rotate(-360deg); } } /* ========================================================= CENTER CROSS ========================================================= */ .transform-cross { position: absolute; background: rgba(46,155,230,.15); pointer-events: none; } .transform-cross-x { width: 125%; height: 1px; } .transform-cross-y { width: 1px; height: 125%; } /* ========================================================= CENTER CONTENT ========================================================= */ .transform-content { position: relative; z-index: 10; display: flex; flex-direction: column; align-items: center; text-align: center; } .transform-brand { font-family: "Montserrat", sans-serif; font-size: 8px; font-weight: 800; letter-spacing: .32em; color: rgba(255,255,255,.45); } .transform-content strong { margin-top: 7px; font-family: "Montserrat", sans-serif; font-size: clamp( 23px, 2vw, 30px ); font-weight: 900; letter-spacing: -.045em; background: linear-gradient( 120deg, #FFFFFF, #64C8FF, #FFFFFF ); background-size: 200% auto; color: transparent; background-clip: text; animation: transformTextShine 6s linear infinite; filter: drop-shadow( 0 0 10px rgba(46,155,230,.25) ); } @keyframes transformTextShine { to { background-position: 200% center; } } .transform-divider { width: 42px; height: 1px; margin: 9px 0 7px; background: linear-gradient( 90deg, transparent, var(--why-orange), transparent ); box-shadow: 0 0 8px rgba(245,166,35,.5); } .transform-content small { font-family: "Montserrat", sans-serif; font-size: 7px; font-weight: 800; letter-spacing: .15em; color: rgba(255,255,255,.42); } .transform-content small b { color: var(--why-orange); margin: 0 3px; } /* ========================================================= CORE POINT ========================================================= */ .transform-point { position: absolute; width: 6px; height: 6px; border-radius: 50%; background: #FFFFFF; box-shadow: 0 0 8px #FFFFFF, 0 0 18px var(--why-sky); animation: transformPoint 2s ease-in-out infinite; } @keyframes transformPoint { 50% { transform: scale(1.8); opacity: .45; } } /* ========================================================= CONNECTORS ========================================================= */ .why-connector { position: absolute; width: clamp( 80px, 7vw, 130px ); height: 1px; background: linear-gradient( 90deg, transparent, rgba(46,155,230,.8) ); opacity: .65; } .connector-1 { left: calc( -1 * clamp( 80px, 7vw, 130px ) ); top: 30%; transform: rotate(12deg); } .connector-2 { left: calc( -1 * clamp( 80px, 7vw, 130px ) ); bottom: 30%; transform: rotate(-12deg); } .connector-3 { right: calc( -1 * clamp( 80px, 7vw, 130px ) ); top: 30%; transform: rotate(-12deg); background: linear-gradient( 90deg, rgba(46,155,230,.8), transparent ); } .connector-4 { right: calc( -1 * clamp( 80px, 7vw, 130px ) ); bottom: 30%; transform: rotate(12deg); background: linear-gradient( 90deg, rgba(46,155,230,.8), transparent ); } /* ========================================================= CONNECTOR PARTICLES ========================================================= */ .why-connector i { position: absolute; top: -2px; left: 0; width: 5px; height: 5px; border-radius: 50%; background: #FFFFFF; box-shadow: 0 0 7px var(--why-sky), 0 0 15px var(--why-sky); animation: connectorTravel 2.4s linear infinite; } .connector-2 i { animation-delay: -.8s; } .connector-3 i { animation-delay: -1.2s; } .connector-4 i { animation-delay: -.4s; } @keyframes connectorTravel { 0% { left: 0; opacity: 0; } 15% { opacity: 1; } 85% { opacity: 1; } 100% { left: 100%; opacity: 0; } } /* ========================================================= SIGNATURE ========================================================= */ .why-path-signature { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 12px; margin-top: 34px; font-family: "Montserrat", sans-serif; font-size: 8px; font-weight: 800; letter-spacing: .2em; color: rgba(255,255,255,.32); } .why-path-signature i { width: 4px; height: 4px; border-radius: 50%; background: var(--why-sky); box-shadow: 0 0 7px var(--why-sky); } .signature-active { color: var(--why-sky); } /* ========================================================= RESPONSIVE — TABLET ========================================================= */ @media (max-width: 1050px) { .why-path-system { grid-template-columns: minmax(270px, 1fr) 220px minmax(270px, 1fr); column-gap: 35px; } .why-path-center { width: 220px; } .why-transform { width: 180px; height: 180px; } .module-content h3 { font-size: 16px; } } /* ========================================================= RESPONSIVE — MOBILE ========================================================= */ @media (max-width: 760px) { .why-path { padding: 50px 0; } .why-path-container { width: calc(100% - 20px); } .why-path-system { display: grid; grid-template-columns: 1fr 1fr; grid-template-areas: "center center" "module1 module2" "module3 module4"; gap: 12px; } .why-path-center { grid-area: center; width: 100%; height: 220px; } .why-module-1 { grid-area: module1; } .why-module-2 { grid-area: module2; } .why-module-3 { grid-area: module3; } .why-module-4 { grid-area: module4; } .why-module { min-height: 165px; padding: 16px; display: block; } .module-icon { width: 40px; height: 40px; margin-bottom: 12px; } .module-content h3 { font-size: 15px; } .module-content p { font-size: 9px; } .why-transform { width: 170px; height: 170px; } .why-connector { display: none; } .why-path-signature { margin-top: 22px; } } /* ========================================================= SMALL MOBILE ========================================================= */ @media (max-width: 480px) { .why-path-title { font-size: 25px; } .why-path-intro { font-size: 10px; } .why-module { min-height: 155px; padding: 13px; } .module-number { top: 10px; right: 12px; } .module-icon { width: 34px; height: 34px; } .module-icon svg { width: 17px; height: 17px; } .module-label { font-size: 7px; } .module-content h3 { font-size: 13px; } .module-content p { font-size: 8px; line-height: 1.45; } .why-transform { width: 145px; height: 145px; } .transform-content strong { font-size: 18px; } .transform-content small { font-size: 5.5px; } .why-path-signature { font-size: 6px; gap: 7px; } } /* ========================================================= REDUCED MOTION ========================================================= */ @media (prefers-reduced-motion: reduce) { .why-path *, .why-path *::before, .why-path *::after { animation: none !important; transition: none !important; } } /* ========================================================= NOVASKY CONSULTING WHY — TRANSFORMATION ENGINE V5.1 — INTERACTION VISUELLE BRIGHTNESS • MAGNETIC • 3D • FLOW • FOCUS ========================================================= */ /* ========================================================= 01 — ENGINE READY ========================================================= */ .why-path.why-engine-v6 { --engine-glow: rgba(46,155,230,.45); --engine-orange: rgba(245,166,35,.55); --engine-depth: 0px; } /* ========================================================= 02 — SYSTEM DEPTH ========================================================= */ .why-path-system { perspective: 1400px; transform-style: preserve-3d; } /* ========================================================= 03 — MODULE 3D ENGINE ========================================================= */ .why-module { --rx: 0deg; --ry: 0deg; --tx: 0px; --ty: 25px; --cursor-x: 50%; --cursor-y: 50%; transform: translate3d( var(--tx), calc( var(--ty) + var(--engine-depth) ), 0 ) rotateX( var(--rx) ) rotateY( var(--ry) ); transform-style: preserve-3d; will-change: transform; } /* ========================================================= 04 — LIGHT FOLLOWING THE CURSOR ========================================================= */ .why-module::before { content: ""; position: absolute; inset: 0; pointer-events: none; opacity: 0; background: radial-gradient( circle 140px at var(--cursor-x) var(--cursor-y), rgba(46,155,230,.20), transparent 68% ); transition: opacity .35s ease; z-index: 0; } .why-module:hover::before, .why-module.module-focus::before { opacity: 1; } /* ========================================================= 05 — GLASS HIGHLIGHT ========================================================= */ .why-module::after { content: ""; position: absolute; top: -120%; left: -30%; width: 60%; height: 300%; pointer-events: none; background: linear-gradient( 90deg, transparent, rgba(255,255,255,.10), transparent ); transform: rotate(18deg) translateX(-100%); opacity: 0; } .why-module:hover::after { opacity: 1; animation: moduleGlassSweep 1.2s ease forwards; } @keyframes moduleGlassSweep { to { transform: rotate(18deg) translateX(260%); } } /* ========================================================= 06 — MODULE CONTENT DEPTH ========================================================= */ .why-module > * { position: relative; z-index: 2; } .module-icon { transform: translateZ(22px) rotate(45deg); transition: transform .45s cubic-bezier(.2,.8,.2,1), box-shadow .45s ease; } .module-content { transform: translateZ(16px); transition: transform .45s ease; } .module-number { transform: translateZ(20px); } .why-module:hover .module-content { transform: translateZ(26px); } .why-module:hover .module-icon { transform: translateZ(32px) rotate(45deg) scale(1.08); } /* ========================================================= 07 — ACTIVE MODULE ========================================================= */ .why-module.module-focus { z-index: 20; border-color: rgba(46,155,230,.85); background: linear-gradient( 135deg, rgba(46,155,230,.14), rgba(255,255,255,.035) ); box-shadow: 0 30px 75px rgba(0,0,0,.40), 0 0 0 1px rgba(46,155,230,.12), 0 0 45px rgba(46,155,230,.18), inset 0 1px 0 rgba(255,255,255,.12); transform: translate3d( var(--tx), calc( var(--ty) - 8px ), 40px ) rotateX(var(--rx)) rotateY(var(--ry)) scale(1.035); } /* ========================================================= 08 — MUTED MODULES ========================================================= */ .why-module.module-muted { opacity: .42; filter: saturate(.65) brightness(.72); transform: scale(.97); } .why-path.module-is-active .why-module.module-muted { transition: opacity .45s ease, filter .45s ease, transform .45s ease; } /* ========================================================= 09 — NEARBY MODULES ========================================================= */ .why-module.module-nearby { opacity: .72; border-color: rgba(46,155,230,.25); box-shadow: 0 15px 40px rgba(0,0,0,.22); } /* ========================================================= 10 — CLICK FEEDBACK ========================================================= */ .why-module.module-clicked { animation: moduleClickPulse .6s cubic-bezier(.2,.8,.2,1); } @keyframes moduleClickPulse { 0% { transform: scale(1); } 35% { transform: scale(.975); } 70% { transform: scale(1.045); box-shadow: 0 0 0 1px rgba(46,155,230,.35), 0 0 55px rgba(46,155,230,.30); } 100% { transform: scale(1); } } /* ========================================================= 11 — TOUCH ========================================================= */ .why-module.module-touching { transform: scale(.975); transition: transform .15s ease; } /* ========================================================= 12 — CENTER MAGNETIC ========================================================= */ .why-transform { --mx: 0px; --my: 0px; will-change: transform; transform: translate3d( var(--mx), var(--my), 0 ); transition: box-shadow .45s ease, border-color .45s ease; } /* ========================================================= 13 — CENTER ACTIVE ========================================================= */ .why-transform.is-active { animation: centerEntrance 1s cubic-bezier(.2,.8,.2,1) both; } @keyframes centerEntrance { 0% { opacity: 0; transform: translate3d( var(--mx), var(--my), 0 ) scale(.72); filter: blur(8px); } 70% { transform: translate3d( var(--mx), var(--my), 0 ) scale(1.04); } 100% { opacity: 1; transform: translate3d( var(--mx), var(--my), 0 ) scale(1); filter: blur(0); } } /* ========================================================= 14 — CENTER CONNECTED ========================================================= */ .why-transform.center-connected { border-color: rgba(46,155,230,.95); box-shadow: 0 0 35px rgba(46,155,230,.22), 0 0 80px rgba(46,155,230,.12), inset 0 0 45px rgba(46,155,230,.13); } /* ========================================================= 15 — CENTER PULSE ========================================================= */ .why-transform.center-pulse { animation: centerConnectionPulse .65s cubic-bezier(.2,.8,.2,1); } @keyframes centerConnectionPulse { 0% { box-shadow: 0 0 0 rgba(46,155,230,0); transform: translate3d( var(--mx), var(--my), 0 ) scale(1); } 45% { box-shadow: 0 0 0 12px rgba(46,155,230,.08), 0 0 70px rgba(46,155,230,.45); transform: translate3d( var(--mx), var(--my), 0 ) scale(1.045); } 100% { box-shadow: 0 0 45px rgba(46,155,230,.14); transform: translate3d( var(--mx), var(--my), 0 ) scale(1); } } /* ========================================================= 16 — CENTER AUTO FOCUS ========================================================= */ .why-transform.center-auto-focus { border-color: rgba(245,166,35,.85); box-shadow: 0 0 45px rgba(245,166,35,.22), 0 0 90px rgba(46,155,230,.14), inset 0 0 40px rgba(245,166,35,.08); animation: centerAutoPulse 1.7s ease both; } @keyframes centerAutoPulse { 0% { transform: translate3d( var(--mx), var(--my), 0 ) scale(1); } 45% { transform: translate3d( var(--mx), var(--my), 0 ) scale(1.035); } 100% { transform: translate3d( var(--mx), var(--my), 0 ) scale(1); } } /* ========================================================= 17 — CONNECTOR READY ========================================================= */ .why-connector { opacity: .18; transform-origin: left center; transition: opacity .45s ease, filter .45s ease; } .why-connector.connector-ready { opacity: .65; } /* ========================================================= 18 — ACTIVE CONNECTOR ========================================================= */ .why-connector.connector-focus { opacity: 1; filter: drop-shadow( 0 0 5px rgba(46,155,230,.75) ) drop-shadow( 0 0 12px rgba(46,155,230,.45) ); animation: connectorFocus 1.4s ease-in-out infinite; } @keyframes connectorFocus { 50% { filter: drop-shadow( 0 0 8px rgba(46,155,230,.95) ) drop-shadow( 0 0 22px rgba(46,155,230,.55) ); } } /* ========================================================= 19 — DIM CONNECTORS ========================================================= */ .why-connector.connector-dim { opacity: .15; filter: saturate(.45); } /* ========================================================= 20 — AUTO CONNECTOR ========================================================= */ .why-connector.connector-auto-focus { opacity: 1; filter: drop-shadow( 0 0 7px rgba(245,166,35,.9) ) drop-shadow( 0 0 18px rgba(46,155,230,.55) ); } .why-connector.connector-auto-focus i { background: var(--why-orange); box-shadow: 0 0 8px var(--why-orange), 0 0 20px var(--why-orange); } /* ========================================================= 21 — AUTO MODULE ========================================================= */ .why-module.module-auto-focus { z-index: 15; border-color: rgba(245,166,35,.75); box-shadow: 0 25px 60px rgba(0,0,0,.35), 0 0 0 1px rgba(245,166,35,.10), 0 0 45px rgba(245,166,35,.16); animation: moduleAutoFocus 1.7s cubic-bezier(.2,.8,.2,1); } @keyframes moduleAutoFocus { 0% { transform: translate3d( 0, 0, 0 ) scale(1); } 35% { transform: translate3d( 0, -7px, 25px ) scale(1.025); } 70% { transform: translate3d( 0, -4px, 15px ) scale(1.015); } 100% { transform: translate3d( 0, 0, 0 ) scale(1); } } /* ========================================================= 22 — AUTO TRANSFORMATION STATE ========================================================= */ .why-path.auto-transforming .why-path-center::before { opacity: 1; } .why-path.auto-transforming .why-transform { box-shadow: 0 0 45px rgba(46,155,230,.25), 0 0 100px rgba(245,166,35,.10), inset 0 0 50px rgba(46,155,230,.12); } /* ========================================================= 23 — PARTICLE SYSTEM ========================================================= */ .why-particle-layer { position: absolute; inset: 0; z-index: 1; overflow: hidden; pointer-events: none; } .why-particle { position: absolute; left: var(--particle-x); top: var(--particle-y); width: 3px; height: 3px; border-radius: 50%; background: rgba(255,255,255,.85); box-shadow: 0 0 7px rgba(46,155,230,.9), 0 0 15px rgba(46,155,230,.4); opacity: 0; transform: scale( var(--particle-scale) ); animation: whyParticleFloat var(--particle-duration) ease-in-out var(--particle-delay) infinite; } @keyframes whyParticleFloat { 0% { opacity: 0; transform: translate3d( 0, 15px, 0 ) scale(.5); } 20% { opacity: .65; } 50% { opacity: .9; transform: translate3d( 12px, -20px, 0 ) scale( var(--particle-scale) ); } 80% { opacity: .45; } 100% { opacity: 0; transform: translate3d( -8px, -45px, 0 ) scale(.4); } } /* ========================================================= 24 — SECTION HOVER ========================================================= */ .why-path.why-hovering .why-path-bg .why-glow { opacity: .18; transition: opacity .6s ease; } .why-path.why-hovering .why-glow-3 { opacity: .12; } /* ========================================================= 25 — REVEAL COMPLETION ========================================================= */ .why-path.why-reveal-complete .why-path-signature { animation: signatureReveal .8s ease both; } @keyframes signatureReveal { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } } /* ========================================================= 26 — SIGNATURE ACTIVE FLOW ========================================================= */ .why-path-signature .signature-active { position: relative; } .why-path-signature .signature-active::after { content: ""; position: absolute; left: 0; bottom: -5px; width: 100%; height: 1px; background: linear-gradient( 90deg, transparent, var(--why-sky), transparent ); transform: scaleX(.35); animation: signatureLine 2.5s ease-in-out infinite; } @keyframes signatureLine { 50% { transform: scaleX(1); opacity: .35; } } /* ========================================================= 27 — MODULE NUMBER LIVE ========================================================= */ .why-module.module-focus .module-number { color: #FFFFFF; text-shadow: 0 0 10px rgba(245,166,35,.85); } /* ========================================================= 28 — MODULE ICON ACTIVE ========================================================= */ .why-module.module-focus .module-icon { border-color: rgba(46,155,230,.85); background: rgba(46,155,230,.12); box-shadow: 0 0 18px rgba(46,155,230,.18), inset 0 0 15px rgba(46,155,230,.08); } /* ========================================================= 29 — ACTIVE LINE ========================================================= */ .why-module.module-focus .module-line { opacity: 1; transform: scaleX(1); box-shadow: 0 0 10px rgba(46,155,230,.65); } /* ========================================================= 30 — MOBILE OVERRIDE ========================================================= */ @media (max-width: 760px) { .why-module { transform: none !important; } .why-module.module-focus { transform: translateY(-3px) scale(1.015) !important; } .why-module.module-muted { opacity: .55; transform: scale(.98) !important; } .why-particle { width: 2px; height: 2px; } .why-transform { transform: translate3d( var(--mx), var(--my), 0 ) !important; } } /* ========================================================= 31 — REDUCED MOTION ========================================================= */ @media (prefers-reduced-motion: reduce) { .why-module, .why-module:hover, .why-module.module-focus { transform: none !important; } .why-transform { transform: none !important; } } /* ========================================================= NOVASKY CONSULTING WHY — PREMIUM FINISHING SYSTEM V6.0 ULTRA PREMIUM • GLASS • LIGHT • DEPTH • MICRO DETAILS ========================================================= */ /* ========================================================= 01 — GLOBAL PREMIUM VARIABLES ========================================================= */ .why-path { --premium-blue: #2E9BE6; --premium-blue-soft: rgba(46,155,230,.18); --premium-orange: #F5A623; --premium-orange-soft: rgba(245,166,35,.18); --premium-white: rgba(255,255,255,.92); --premium-glass: linear-gradient( 135deg, rgba(255,255,255,.085), rgba(255,255,255,.018) ); --premium-border: rgba(255,255,255,.13); --premium-shadow: 0 30px 80px rgba(0,0,0,.28); --premium-ease: cubic-bezier(.16,1,.3,1); position: relative; } /* ========================================================= 02 — PREMIUM TOP LIGHT ========================================================= */ .why-path::before { content: ""; position: absolute; top: 0; left: 5%; right: 5%; height: 1px; background: linear-gradient( 90deg, transparent, rgba(46,155,230,.75), rgba(255,255,255,.9), rgba(245,166,35,.55), transparent ); box-shadow: 0 0 12px rgba(46,155,230,.35), 0 0 30px rgba(46,155,230,.12); opacity: .8; pointer-events: none; } /* ========================================================= 03 — PREMIUM AMBIENT VIGNETTE ========================================================= */ .why-path::after { content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 0; background: radial-gradient( ellipse at center, transparent 35%, rgba(0,0,0,.12) 75%, rgba(0,0,0,.32) 100% ); opacity: .7; } /* ========================================================= 04 — GRID PREMIUM ========================================================= */ .why-grid { opacity: .20; background-size: 48px 48px; animation: whyGridDrift 24s linear infinite; } @keyframes whyGridDrift { from { background-position: 0 0; } to { background-position: 48px 48px; } } /* ========================================================= 05 — GLOW ENHANCEMENT ========================================================= */ .why-glow { mix-blend-mode: screen; filter: blur(110px) saturate(1.25); will-change: transform, opacity; } .why-glow-1 { opacity: .16; } .why-glow-2 { opacity: .12; } .why-glow-3 { opacity: .09; } /* ========================================================= 06 — HEADER PREMIUM ========================================================= */ .why-path-header { position: relative; z-index: 5; } /* eyebrow */ .why-path-eyebrow { position: relative; padding: 7px 14px; border: 1px solid rgba(46,155,230,.18); border-radius: 999px; background: rgba(255,255,255,.025); backdrop-filter: blur(12px); box-shadow: inset 0 1px 0 rgba(255,255,255,.07), 0 8px 25px rgba(0,0,0,.12); } /* halo autour de l'eyebrow */ .why-path-eyebrow::before { content: ""; position: absolute; inset: -1px; border-radius: inherit; background: linear-gradient( 90deg, transparent, rgba(46,155,230,.55), transparent ); opacity: .35; z-index: -1; } /* titre */ .why-path-title { position: relative; text-shadow: 0 5px 30px rgba(0,0,0,.25); } /* ligne lumineuse sous titre */ .why-path-title::after { content: ""; display: block; width: clamp(45px, 6vw, 80px); height: 2px; margin: 17px auto 0; background: linear-gradient( 90deg, transparent, var(--premium-blue), var(--premium-orange), transparent ); box-shadow: 0 0 12px rgba(46,155,230,.45); animation: titleLineFlow 3.5s ease-in-out infinite; } @keyframes titleLineFlow { 0%, 100% { transform: scaleX(.55); opacity: .45; } 50% { transform: scaleX(1); opacity: 1; } } /* intro */ .why-path-intro { position: relative; padding: 0 12px; } /* ========================================================= 07 — PREMIUM SYSTEM FRAME ========================================================= */ .why-path-system { position: relative; z-index: 4; } /* halo très léger derrière le système */ .why-path-system::before { content: ""; position: absolute; top: 50%; left: 50%; width: 65%; height: 65%; transform: translate(-50%, -50%); background: radial-gradient( ellipse, rgba(46,155,230,.065), transparent 70% ); filter: blur(35px); pointer-events: none; } /* ========================================================= 08 — CARDS ULTRA GLASS ========================================================= */ .why-module { isolation: isolate; border-radius: 18px; background: var(--premium-glass); border: 1px solid var(--premium-border); box-shadow: var(--premium-shadow), inset 0 1px 0 rgba(255,255,255,.09), inset 0 -1px 0 rgba(0,0,0,.18); backdrop-filter: blur(22px) saturate(130%); -webkit-backdrop-filter: blur(22px) saturate(130%); transition: transform .65s var(--premium-ease), border-color .4s ease, box-shadow .5s ease, background .5s ease, filter .5s ease; } /* bordure lumineuse subtile */ .why-module::before { border-radius: inherit; } /* reflet supérieur */ .why-module::after { border-radius: inherit; } /* ========================================================= 09 — CARD EDGE LIGHT ========================================================= */ .why-module { --edge-opacity: 0; } .why-module:hover { --edge-opacity: 1; border-color: rgba(46,155,230,.55); box-shadow: 0 35px 90px rgba(0,0,0,.38), 0 0 45px rgba(46,155,230,.12), inset 0 1px 0 rgba(255,255,255,.13); } /* ========================================================= 10 — CARD TOP REFLECTION ========================================================= */ .why-module > .module-corner-tl::after { content: ""; position: absolute; top: -1px; left: 15px; width: 45px; height: 1px; background: linear-gradient( 90deg, var(--premium-blue), transparent ); opacity: .7; } /* ========================================================= 11 — CARD ICON PREMIUM ========================================================= */ .module-icon { border-radius: 10px; background: linear-gradient( 135deg, rgba(46,155,230,.14), rgba(46,155,230,.025) ); box-shadow: inset 0 1px 0 rgba(255,255,255,.10), inset 0 0 18px rgba(46,155,230,.05), 0 10px 25px rgba(0,0,0,.15); overflow: visible; } /* cercle lumineux autour */ .module-icon::before { inset: -12px; opacity: .65; animation: iconAura 3s ease-in-out infinite; } @keyframes iconAura { 0%, 100% { transform: scale(.9); opacity: .35; } 50% { transform: scale(1.08); opacity: .75; } } /* petite lumière centrale */ .module-icon::after { content: ""; position: absolute; width: 4px; height: 4px; border-radius: 50%; top: 5px; right: 5px; background: #FFFFFF; box-shadow: 0 0 8px var(--premium-blue); opacity: .75; } /* ========================================================= 12 — CARD CONTENT PREMIUM ========================================================= */ .module-label { position: relative; display: inline-flex; align-items: center; gap: 7px; padding: 4px 8px; border-radius: 5px; background: rgba(46,155,230,.06); } /* petit indicateur */ .module-label::before { content: ""; width: 4px; height: 4px; border-radius: 50%; background: var(--premium-blue); box-shadow: 0 0 8px var(--premium-blue); animation: labelPulse 2s ease-in-out infinite; } @keyframes labelPulse { 50% { transform: scale(1.5); opacity: .45; } } /* titre */ .module-content h3 { text-shadow: 0 4px 20px rgba(0,0,0,.25); } /* texte */ .module-content p { transition: color .35s ease; } .why-module:hover .module-content p { color: rgba(255,255,255,.68); } /* ========================================================= 13 — NUMBER PREMIUM ========================================================= */ .module-number { padding: 4px 7px; border: 1px solid rgba(245,166,35,.18); border-radius: 5px; background: rgba(245,166,35,.035); text-shadow: 0 0 12px rgba(245,166,35,.5); } /* ========================================================= 14 — CORNERS ANIMATED ========================================================= */ .module-corner { border-color: rgba(46,155,230,.65); filter: drop-shadow( 0 0 4px rgba(46,155,230,.35) ); } .why-module:hover .module-corner { border-color: var(--premium-blue); filter: drop-shadow( 0 0 8px rgba(46,155,230,.65) ); } /* ========================================================= 15 — MODULE BOTTOM ENERGY ========================================================= */ .module-line { height: 1px; background: linear-gradient( 90deg, transparent, rgba(46,155,230,.2), var(--premium-blue), rgba(245,166,35,.5), transparent ); filter: drop-shadow( 0 0 5px rgba(46,155,230,.5) ); } /* ========================================================= 16 — CENTER PREMIUM CORE ========================================================= */ .why-path-center { filter: drop-shadow( 0 25px 60px rgba(0,0,0,.22) ); } /* disque central */ .why-transform { background: radial-gradient( circle at 35% 30%, rgba(255,255,255,.10), transparent 20% ), radial-gradient( circle, rgba(46,155,230,.19), rgba(5,10,36,.98) 62% ); border: 1px solid rgba(46,155,230,.65); box-shadow: 0 0 0 1px rgba(255,255,255,.025), 0 0 50px rgba(46,155,230,.18), 0 30px 80px rgba(0,0,0,.38), inset 0 0 45px rgba(46,155,230,.12), inset 0 1px 0 rgba(255,255,255,.13); } /* reflet central */ .why-transform::before { content: ""; position: absolute; top: 12%; left: 22%; width: 35%; height: 12%; border-radius: 50%; background: rgba(255,255,255,.10); filter: blur(10px); transform: rotate(-25deg); pointer-events: none; } /* ========================================================= 17 — CENTER RINGS PREMIUM ========================================================= */ .transform-ring-outer { border-width: 1px; box-shadow: 0 0 10px rgba(46,155,230,.12); } .transform-ring-inner { opacity: .65; } /* petits points cardinaux */ .why-transform::after { content: ""; position: absolute; inset: -27px; border-radius: 50%; background: radial-gradient( circle at 50% 0, rgba(46,155,230,.9) 0 2px, transparent 3px ), radial-gradient( circle at 100% 50%, rgba(245,166,35,.9) 0 2px, transparent 3px ), radial-gradient( circle at 50% 100%, rgba(46,155,230,.6) 0 2px, transparent 3px ), radial-gradient( circle at 0 50%, rgba(46,155,230,.6) 0 2px, transparent 3px ); animation: transformRotateReverse 16s linear infinite; pointer-events: none; } /* ========================================================= 18 — CENTER BRAND ========================================================= */ .transform-brand { padding: 4px 9px; border: 1px solid rgba(255,255,255,.08); border-radius: 999px; background: rgba(255,255,255,.025); box-shadow: inset 0 1px 0 rgba(255,255,255,.06); } /* ========================================================= 19 — CENTER TEXT ========================================================= */ .transform-content strong { text-shadow: 0 0 25px rgba(46,155,230,.25); } /* ========================================================= 20 — CENTER DIVIDER ========================================================= */ .transform-divider { position: relative; width: 55px; } .transform-divider::before, .transform-divider::after { content: ""; position: absolute; top: 50%; width: 5px; height: 5px; border-radius: 50%; background: var(--premium-orange); box-shadow: 0 0 8px var(--premium-orange); } .transform-divider::before { left: -8px; } .transform-divider::after { right: -8px; } /* ========================================================= 21 — CONNECTORS PREMIUM ========================================================= */ .why-connector { height: 2px; background: linear-gradient( 90deg, transparent, rgba(46,155,230,.28), var(--premium-blue), transparent ); filter: drop-shadow( 0 0 5px rgba(46,155,230,.35) ); } /* particule */ .why-connector i { width: 6px; height: 6px; box-shadow: 0 0 8px #FFFFFF, 0 0 18px var(--premium-blue), 0 0 28px rgba(46,155,230,.45); } /* ========================================================= 22 — SIGNATURE PREMIUM ========================================================= */ .why-path-signature { position: relative; padding: 10px 18px; width: fit-content; margin-left: auto; margin-right: auto; border: 1px solid rgba(255,255,255,.07); border-radius: 999px; background: rgba(255,255,255,.018); backdrop-filter: blur(10px); box-shadow: inset 0 1px 0 rgba(255,255,255,.06), 0 10px 30px rgba(0,0,0,.12); } /* ========================================================= 23 — SIGNATURE DOTS ========================================================= */ .why-path-signature i { position: relative; width: 5px; height: 5px; box-shadow: 0 0 10px var(--premium-blue); } /* ========================================================= 24 — PARTICLES MORE PREMIUM ========================================================= */ .why-particle { width: 2px; height: 2px; background: rgba(255,255,255,.9); box-shadow: 0 0 7px var(--premium-blue), 0 0 18px rgba(46,155,230,.55); } /* ========================================================= 25 — ACTIVE CARD PREMIUM ========================================================= */ .why-module.module-focus { background: linear-gradient( 135deg, rgba(46,155,230,.16), rgba(255,255,255,.045) ); border-color: rgba(46,155,230,.9); box-shadow: 0 35px 90px rgba(0,0,0,.45), 0 0 0 1px rgba(46,155,230,.18), 0 0 65px rgba(46,155,230,.22), inset 0 1px 0 rgba(255,255,255,.14); } /* ========================================================= 26 — ACTIVE ICON ========================================================= */ .why-module.module-focus .module-icon { background: linear-gradient( 135deg, rgba(46,155,230,.22), rgba(46,155,230,.05) ); box-shadow: 0 0 25px rgba(46,155,230,.28), inset 0 0 20px rgba(46,155,230,.10); } /* ========================================================= 27 — AUTO FOCUS ORANGE ========================================================= */ .why-module.module-auto-focus { background: linear-gradient( 135deg, rgba(245,166,35,.11), rgba(255,255,255,.035) ); border-color: rgba(245,166,35,.8); box-shadow: 0 30px 75px rgba(0,0,0,.40), 0 0 55px rgba(245,166,35,.15), inset 0 1px 0 rgba(255,255,255,.12); } /* ========================================================= 28 — FOCUS NUMBER ========================================================= */ .why-module.module-focus .module-number, .why-module.module-auto-focus .module-number { background: rgba(245,166,35,.07); border-color: rgba(245,166,35,.25); } /* ========================================================= 29 — HOVER CARD DEPTH ========================================================= */ @media (min-width: 761px) { .why-module:hover { transform: translate3d( var(--tx), calc(var(--ty) - 6px), 12px ) rotateX(var(--rx)) rotateY(var(--ry)); } } /* ========================================================= 30 — PREMIUM MOBILE ========================================================= */ @media (max-width: 760px) { .why-path { padding: 55px 0 45px; } .why-path-header { padding: 0 8px; } .why-path-eyebrow { font-size: 7px; padding: 6px 10px; } .why-path-title { text-shadow: 0 5px 20px rgba(0,0,0,.3); } .why-module { border-radius: 14px; backdrop-filter: blur(16px) saturate(120%); box-shadow: 0 20px 45px rgba(0,0,0,.25), inset 0 1px 0 rgba(255,255,255,.07); } .why-transform { box-shadow: 0 0 35px rgba(46,155,230,.18), 0 20px 50px rgba(0,0,0,.35), inset 0 0 35px rgba(46,155,230,.10); } .why-path-signature { padding: 8px 12px; } } /* ========================================================= 31 — VERY SMALL MOBILE ========================================================= */ @media (max-width: 480px) { .why-path-eyebrow { letter-spacing: .16em; } .why-path-title::after { margin-top: 13px; } .why-module { border-radius: 12px; } .why-module::after { display: none; } .why-path-signature { letter-spacing: .12em; } } /* ========================================================= 32 — ACCESSIBILITY ========================================================= */ @media (prefers-reduced-motion: reduce) { .why-grid, .why-glow, .module-icon::before, .why-transform::after, .why-path-title::after { animation: none !important; } } /* ========================================================= NOVASKY CONSULTING RÉALISATIONS — PREMIUM PORTFOLIO WHITE • NAVY • SKY • ORANGE CLEAN • VISIBLE • RESPONSIVE • INTERACTIVE ========================================================= */ /* ========================================================= 01 — SECTION ========================================================= */ .work { position: relative; /* IMPORTANT : espace supérieur réduit pour éviter le gros vide avec la section précédente */ padding: clamp(48px, 6vw, 78px) 0 clamp(70px, 8vw, 105px); background: radial-gradient( circle at 8% 12%, rgba(46,155,230,.075), transparent 27% ), radial-gradient( circle at 92% 78%, rgba(245,166,35,.055), transparent 26% ), #f6f8fc; color: #0B1440; overflow: hidden; isolation: isolate; } /* lumière décorative supérieure */ .work::before { content: ""; position: absolute; width: 430px; height: 430px; top: -240px; right: -150px; border-radius: 50%; background: radial-gradient( circle, rgba(46,155,230,.13), transparent 68% ); filter: blur(18px); pointer-events: none; z-index: -1; } /* lumière décorative inférieure */ .work::after { content: ""; position: absolute; width: 350px; height: 350px; bottom: -220px; left: -160px; border-radius: 50%; background: radial-gradient( circle, rgba(245,166,35,.08), transparent 68% ); filter: blur(25px); pointer-events: none; z-index: -1; } /* ========================================================= 02 — CONTAINER ========================================================= */ .work .wrap { position: relative; width: min( 1380px, calc(100% - 70px) ); margin: 0 auto; z-index: 2; } /* ========================================================= 03 — HEADER ========================================================= */ .work .section-head { position: relative; width: 100%; max-width: 850px; margin: 0 auto clamp(28px, 4vw, 42px); text-align: center; z-index: 5; } /* ========================================================= 04 — TAG ========================================================= */ .work .section-tag { display: inline-flex; align-items: center; justify-content: center; gap: 9px; margin-bottom: 14px; padding: 7px 14px; border: 1px solid rgba(46,155,230,.22); border-radius: 100px; background: rgba(255,255,255,.72); color: #147fc1; font-family: var( --font-accent, "Montserrat", sans-serif ); font-size: .90rem; font-weight: 1500; letter-spacing: .12em; text-transform: uppercase; box-shadow: 0 6px 20px rgba(11,20,64,.05), inset 0 1px 0 rgba(255,255,255,.95); backdrop-filter: blur(10px); } /* point animé */ .work .section-tag .dot { width: 40px; height: 7px; flex: 0 0 7px; border-radius: 50%; background: #2E9BE6; box-shadow: 0 0 0 4px rgba(46,155,230,.10), 0 0 14px rgba(46,155,230,.55); animation: workTagPulse 2.3s ease-in-out infinite; } @keyframes workTagPulse { 0%, 100% { transform: scale(1); opacity: 1; } 50% { transform: scale(1.35); opacity: .65; } } /* ========================================================= 05 — TITRE ========================================================= */ .work .section-title { display: block; margin: 0; color: #0B1440 !important; font-family: var( --font-display, "Montserrat", sans-serif ); font-size: clamp( 50px, 4vw, 52px ); line-height: 1.05; letter-spacing: -.045em; font-weight: 800; visibility: visible !important; opacity: 1 !important; } /* ligne décorative */ .work .section-title::after { content: ""; display: block; width: 62px; height: 3px; margin: 16px auto 0; border-radius: 30px; background: linear-gradient( 90deg, #2E9BE6, #F5A623 ); box-shadow: 0 5px 18px rgba(46,155,230,.20); } /* ========================================================= 06 — SOUS-TITRE ========================================================= */ .work .section-sub { display: block; max-width: 680px; margin: 16px auto 0; color: #526078 !important; font-family: var( --font-body, "Lato", sans-serif ); font-size: clamp( .88rem, 1vw, 1rem ); line-height: 1.7; visibility: visible !important; opacity: 1 !important; } /* ========================================================= 07 — FILTRES ========================================================= */ .filter-bar { position: relative; display: flex; justify-content: center; align-items: center; flex-wrap: wrap; gap: 9px; width: 100%; margin: 0 auto clamp(30px, 4vw, 44px); z-index: 10; } /* bouton */ .filter-btn { position: relative; appearance: none; border: 1px solid rgba(11,20,64,.11); background: rgba(255,255,255,.90); color: #526078; padding: 10px 19px; border-radius: 100px; font-family: var( --font-accent, "Montserrat", sans-serif ); font-size: .76rem; font-weight: 700; line-height: 1; cursor: pointer; outline: none; box-shadow: 0 6px 18px rgba(11,20,64,.055); transition: color .3s ease, background .3s ease, border-color .3s ease, transform .3s ease, box-shadow .3s ease; } .filter-btn:hover { color: #0B1440; background: #ffffff; border-color: rgba(46,155,230,.35); transform: translateY(-2px); box-shadow: 0 10px 24px rgba(11,20,64,.09); } /* actif */ .filter-btn.active { color: #ffffff !important; background: linear-gradient( 135deg, #0B1440, #1b327d ) !important; border-color: transparent !important; box-shadow: 0 12px 26px rgba(11,20,64,.22), 0 0 0 1px rgba(46,155,230,.12); } /* reflet bouton */ .filter-btn.active::after { content: ""; position: absolute; inset: 1px; border-radius: inherit; background: linear-gradient( 120deg, transparent 25%, rgba(255,255,255,.15), transparent 75% ); pointer-events: none; opacity: .8; } /* ========================================================= 08 — GRID ========================================================= */ .work-grid { position: relative; display: grid; grid-template-columns: repeat( 3, minmax(0, 1fr) ); gap: clamp(20px, 2vw, 30px); width: 100%; z-index: 3; } /* ========================================================= 09 — ITEM ========================================================= */ .work-item { position: relative; min-width: 0; opacity: 1 !important; visibility: visible !important; transition: opacity .4s ease, transform .4s ease, filter .4s ease; } /* sécurité AOS */ .work-item[data-aos] { opacity: 1; visibility: visible; } /* filtre */ .work-item.hidden { display: none !important; } /* ========================================================= 10 — CARD ========================================================= */ .work-card { position: relative; width: 100%; min-width: 0; overflow: hidden; border-radius: clamp( 16px, 1.4vw, 22px ); background: linear-gradient( 145deg, #ffffff 0%, #f8fbff 100% ); border: 1px solid rgba(11,20,64,.11); box-shadow: 0 14px 35px rgba(11,20,64,.075), 0 2px 8px rgba(11,20,64,.035); transform: translateZ(0); transition: transform .5s cubic-bezier(.2,.8,.2,1), box-shadow .5s ease, border-color .35s ease; } /* ligne lumineuse supérieure */ .work-card::before { content: ""; position: absolute; top: 0; left: 8%; width: 84%; height: 1px; background: linear-gradient( 90deg, transparent, rgba(46,155,230,.65), transparent ); opacity: .55; z-index: 20; pointer-events: none; } /* ombre inférieure */ .work-card::after { content: ""; position: absolute; left: 12px; right: 12px; bottom: -8px; height: 14px; border-radius: 50%; background: rgba(11,20,64,.12); filter: blur(11px); z-index: -1; opacity: .55; } /* hover */ .work-card:hover { border-color: rgba(46,155,230,.38); transform: translateY(-9px); box-shadow: 0 30px 65px rgba(11,20,64,.15), 0 8px 28px rgba(46,155,230,.08); } /* ========================================================= 11 — TILT ========================================================= */ .work-card.tilt-l { transform: rotate(-.35deg); } .work-card.tilt-r { transform: rotate(.35deg); } .work-card.tilt-l:hover, .work-card.tilt-r:hover { transform: translateY(-9px) rotate(0deg); } /* ========================================================= 12 — THUMB ========================================================= */ .work-thumb { position: relative; display: flex; align-items: center; justify-content: center; height: clamp( 180px, 16vw, 225px ); overflow: hidden; color: #ffffff; isolation: isolate; } /* DIGITAL */ .work-thumb.g1 { background: linear-gradient( 135deg, #071139 0%, #0B1440 45%, #2E9BE6 100% ); } /* MEDIA */ .work-thumb.g2 { background: linear-gradient( 135deg, #0874b5, #2E9BE6, #72d1ff ); } /* BRANDING */ .work-thumb.g3 { background: linear-gradient( 135deg, #d88708, #F5A623, #ffd77e ); } /* CONSEIL */ .work-thumb.g4 { background: linear-gradient( 135deg, #17233f, #0B1440, #263e78 ); } /* ========================================================= 13 — THUMB LIGHT ========================================================= */ .work-thumb::before { content: ""; position: absolute; width: 190px; height: 190px; top: -85px; left: -60px; border-radius: 50%; background: rgba(255,255,255,.14); filter: blur(25px); transition: transform .8s ease, opacity .5s ease; } .work-thumb::after { content: ""; position: absolute; inset: 0; background: radial-gradient( circle at 25% 20%, rgba(255,255,255,.30), transparent 42% ), linear-gradient( 120deg, transparent 35%, rgba(255,255,255,.12), transparent 65% ); pointer-events: none; z-index: 1; } .work-card:hover .work-thumb::before { transform: translate3d( 100px, 50px, 0 ) scale(1.3); } /* ========================================================= 14 — NUMÉRO ========================================================= */ .work-number { position: absolute; right: 16px; top: 15px; z-index: 5; color: rgba(255,255,255,.78); font-family: var( --font-display, "Montserrat", sans-serif ); font-size: .72rem; font-weight: 800; letter-spacing: .12em; } /* ========================================================= 15 — BADGE ========================================================= */ .work-cat-badge { position: absolute; top: 15px; left: 15px; z-index: 6; padding: 6px 12px; border-radius: 100px; background: rgba(255,255,255,.96); color: #0B1440; border: 1px solid rgba(11,20,64,.08); font-family: var( --font-accent, "Montserrat", sans-serif ); font-size: .67rem; font-weight: 800; letter-spacing: .04em; box-shadow: 0 8px 22px rgba(0,0,0,.17); backdrop-filter: blur(8px); transition: transform .35s ease, box-shadow .35s ease; } .work-card:hover .work-cat-badge { transform: translateY(-2px); box-shadow: 0 11px 25px rgba(0,0,0,.20); } /* ========================================================= 16 — ICON ========================================================= */ .work-thumb .icon { position: relative; z-index: 4; width: 54px; height: 54px; fill: none; stroke: #ffffff; stroke-width: 1.5; color: #ffffff; filter: drop-shadow( 0 7px 18px rgba(0,0,0,.28) ); transition: transform .5s cubic-bezier(.2,.8,.2,1), filter .4s ease; } .work-card:hover .work-thumb .icon { transform: translateY(-5px) scale(1.08) rotate(-3deg); filter: drop-shadow( 0 11px 25px rgba(0,0,0,.30) ); } /* ========================================================= 17 — THUMB SHINE ========================================================= */ .thumb-shine { position: absolute; top: 0; left: -120%; width: 65%; height: 100%; z-index: 5; background: linear-gradient( 100deg, transparent, rgba(255,255,255,.18), transparent ); transform: skewX(-18deg); pointer-events: none; transition: left .8s cubic-bezier(.2,.8,.2,1); } .work-card:hover .thumb-shine { left: 140%; } /* ========================================================= 18 — BODY ========================================================= */ .work-body { position: relative; display: block !important; padding: 21px 22px 22px; background: linear-gradient( 145deg, #ffffff, #f4f8fd ); border-top: 1px solid rgba(11,20,64,.055); color: #0B1440; opacity: 1 !important; visibility: visible !important; z-index: 5; } /* ligne accent */ .work-body::before { content: ""; position: absolute; top: 0; left: 22px; width: 36px; height: 2px; border-radius: 20px; background: linear-gradient( 90deg, #2E9BE6, #F5A623 ); transition: width .4s ease; } .work-card:hover .work-body::before { width: 68px; } /* ========================================================= 19 — META ========================================================= */ .work-meta { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 8px; padding-top: 3px; color: #2E9BE6; font-family: var( --font-accent, "Montserrat", sans-serif ); font-size: .66rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; } .work-meta span:last-child { color: rgba(11,20,64,.30); font-size: .62rem; } /* ========================================================= 20 — TITLE ========================================================= */ .work-title { display: block !important; margin: 0 0 8px; color: #0B1440 !important; font-family: var( --font-display, "Montserrat", sans-serif ); font-size: clamp( .98rem, 1.2vw, 1.12rem ); line-height: 1.28; font-weight: 800; letter-spacing: -.02em; opacity: 1 !important; visibility: visible !important; } /* ========================================================= 21 — DESCRIPTION ========================================================= */ .work-desc { display: block !important; margin: 0; color: #4b5872 !important; font-family: var( --font-body, "Lato", sans-serif ); font-size: .84rem; line-height: 1.65; font-weight: 500; opacity: 1 !important; visibility: visible !important; } /* ========================================================= 22 — LINK PROJET ========================================================= */ .work-link { display: inline-flex; align-items: center; gap: 9px; margin-top: 17px; color: #0B1440 !important; font-family: var( --font-accent, "Montserrat", sans-serif ); font-size: .73rem; font-weight: 800; text-decoration: none; transition: color .3s ease, gap .3s ease; } .work-link:hover { color: #2E9BE6 !important; gap: 13px; } /* icône flèche */ .work-link-icon { display: inline-flex; align-items: center; justify-content: center; width: 25px; height: 25px; border-radius: 50%; background: rgba(46,155,230,.10); color: #2E9BE6; font-size: .95rem; line-height: 1; transition: transform .3s ease, background .3s ease; } .work-link:hover .work-link-icon { transform: translateX(2px); background: rgba(46,155,230,.17); } /* ========================================================= 23 — FOOTER SECTION ========================================================= */ .work-footer { display: flex; align-items: center; justify-content: space-between; gap: 20px; margin-top: clamp(35px, 5vw, 52px); padding: 18px 20px; border: 1px solid rgba(11,20,64,.08); border-radius: 15px; background: rgba(255,255,255,.70); box-shadow: 0 10px 28px rgba(11,20,64,.045); backdrop-filter: blur(10px); color: #526078; font-family: var( --font-body, "Lato", sans-serif ); font-size: .82rem; } .work-footer a { display: inline-flex; align-items: center; gap: 8px; color: #0B1440; font-family: var( --font-accent, "Montserrat", sans-serif ); font-weight: 800; text-decoration: none; transition: color .3s ease, gap .3s ease; } .work-footer a:hover { color: #2E9BE6; gap: 12px; } /* ========================================================= 24 — FILTRE / ANIMATION ========================================================= */ .work-item.filter-enter { animation: workCardReveal .55s cubic-bezier(.2,.8,.2,1) both; } @keyframes workCardReveal { from { opacity: 0; transform: translateY(20px) scale(.97); } to { opacity: 1; transform: translateY(0) scale(1); } } /* ========================================================= 25 — AOS SAFETY ========================================================= */ /* IMPORTANT : empêche AOS de laisser la section invisible si son JS est absent, retardé ou mal initialisé. */ .work .aos-init { visibility: visible !important; } .work .aos-animate { opacity: 1; } /* ========================================================= 26 — TABLET ========================================================= */ @media (max-width: 1050px) { .work .wrap { width: calc(100% - 50px); } .work-grid { grid-template-columns: repeat( 2, minmax(0, 1fr) ); gap: 22px; } .work-thumb { height: 195px; } } /* ========================================================= 27 — MOBILE ========================================================= */ @media (max-width: 700px) { .work { padding: 52px 0 70px; } .work .wrap { width: calc(100% - 28px); } .work .section-head { margin-bottom: 30px; } .work .section-title { font-size: clamp( 27px, 8vw, 36px ); } .work .section-sub { font-size: .84rem; line-height: 1.65; } /* filtres horizontaux */ .filter-bar { justify-content: flex-start; flex-wrap: nowrap; overflow-x: auto; padding: 3px 2px 12px; margin-bottom: 30px; scrollbar-width: none; } .filter-bar::-webkit-scrollbar { display: none; } .filter-btn { flex: 0 0 auto; white-space: nowrap; } /* grille */ .work-grid { grid-template-columns: 1fr; gap: 18px; } /* suppression du tilt */ .work-card.tilt-l, .work-card.tilt-r { transform: none; } .work-card:hover { transform: translateY(-6px); } .work-thumb { height: 190px; } .work-body { padding: 20px 20px 22px; } .work-footer { flex-direction: column; align-items: flex-start; } } /* ========================================================= 28 — PETIT MOBILE ========================================================= */ @media (max-width: 420px) { .work { padding: 48px 0 60px; } .work .wrap { width: calc(100% - 22px); } .work-thumb { height: 175px; } .work-thumb .icon { width: 46px; height: 46px; } .work-title { font-size: .96rem; } .work-desc { font-size: .79rem; } .work-link { font-size: .70rem; } } /* ========================================================= 29 — ACCESSIBILITÉ ========================================================= */ @media (prefers-reduced-motion: reduce) { .work *, .work *::before, .work *::after { animation: none !important; transition: none !important; } .work-card, .work-card.tilt-l, .work-card.tilt-r { transform: none !important; } } /* ========================================================= NOVASKY — FIX HEADER RÉALISATIONS VISIBILITÉ FORCÉE / AOS SAFE ========================================================= */ .work .section-head, .work .section-head[data-aos], .work .section-head.aos-init, .work .section-head.aos-animate { position: relative !important; display: block !important; width: 100% !important; max-width: 850px !important; margin: 0 auto clamp(30px, 4vw, 44px) !important; padding: 0 !important; text-align: center !important; visibility: visible !important; opacity: 1 !important; transform: none !important; z-index: 20 !important; } /* TAG */ .work .section-head .section-tag { position: relative !important; display: inline-flex !important; visibility: visible !important; opacity: 1 !important; transform: none !important; } /* TITRE */ .work .section-head .section-title { position: relative !important; display: block !important; visibility: visible !important; opacity: 1 !important; transform: none !important; color: #0B1440 !important; } /* SOUS-TITRE */ .work .section-head .section-sub { position: relative !important; display: block !important; visibility: visible !important; opacity: 1 !important; transform: none !important; color: #526078 !important; } /* ========================================================= FILTRES — ESPACE PROPRE SOUS L'HEADER ========================================================= */ .work .filter-bar { position: relative !important; display: flex !important; visibility: visible !important; opacity: 1 !important; transform: none !important; z-index: 15 !important; } /* ========================================================= SÉCURITÉ CONTRE LES TRANSFORMATIONS AOS ========================================================= */ .work [data-aos] { visibility: visible !important; opacity: 1 !important; } /* Mais on garde les cartes parfaitement visibles */ .work .work-item { visibility: visible !important; opacity: 1 !important; } /* ========================================================= MOBILE ========================================================= */ @media (max-width: 700px) { .work .section-head { width: 100% !important; margin: 0 auto 30px !important; padding: 0 4px !important; } .work .section-title { font-size: clamp( 27px, 8vw, 36px ) !important; } .work .section-sub { max-width: 620px !important; margin-top: 14px !important; } } /* ========================================================= NOVASKY — PARTENAIRES LOGOS DÉFILANTS PREMIUM ========================================================= */ /* ========================================================= SECTION ========================================================= */ .partners { position: relative; width: 100%; padding: 58px 0 52px; background: #ffffff; overflow: hidden; } /* ========================================================= EN-TÊTE ========================================================= */ .partners-head { position: relative; z-index: 10; width: min(720px, 100%); margin: 0 auto 34px; padding: 0 20px; text-align: center; } /* ========================================================= EYEBROW ========================================================= */ .partners-eyebrow { display: flex; align-items: center; justify-content: center; gap: 10px; margin-bottom: 12px; color: #2E9BE6; font-size: 0.65rem; font-weight: 700; line-height: 1; letter-spacing: 0.18em; text-transform: uppercase; } /* ========================================================= PETITES LIGNES ========================================================= */ .partners-line { display: block; width: 25px; height: 1px; flex: 0 0 25px; background: rgba(46, 155, 230, 0.45); } /* ========================================================= TITRE ========================================================= */ .partners-title { margin: 0; color: #0B1440; font-size: clamp( 1.45rem, 2.2vw, 1.9rem ); font-weight: 700; line-height: 1.2; letter-spacing: -0.025em; } /* ========================================================= DESCRIPTION ========================================================= */ .partners-intro { max-width: 600px; margin: 11px auto 0; color: #64748B; font-size: 0.86rem; line-height: 1.6; } /* ========================================================= CONTENEUR MARQUEE ========================================================= */ .partners-marquee { position: relative; width: 100%; overflow: hidden; padding: 14px 0 18px; } /* ========================================================= PISTE ========================================================= */ .partners-track { display: flex; align-items: center; width: max-content; min-width: max-content; animation: partners-scroll 30s linear infinite; will-change: transform; transform: translate3d(0, 0, 0); } /* ========================================================= GROUPES ========================================================= */ .partners-group { display: flex; align-items: center; gap: 24px; flex: 0 0 auto; width: max-content; /* * IMPORTANT * Cet espace fait partie de la largeur du groupe. * Les deux groupes étant identiques, le -50% reste * parfaitement synchronisé. */ padding-right: 24px; } /* ========================================================= CARTE LOGO ========================================================= */ .partner-logo { position: relative; width: 160px; height: 72px; flex: 0 0 160px; display: flex; align-items: center; justify-content: center; padding: 10px 18px; background: #ffffff; border: 1px solid rgba(11, 20, 64, 0.07); border-radius: 12px; box-shadow: 0 5px 18px rgba(11, 20, 64, 0.045); transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease; } /* ========================================================= LOGO ========================================================= */ .partner-logo img { display: block; width: auto; max-width: 100%; height: 42px; object-fit: contain; filter: grayscale(100%); opacity: 0.55; user-select: none; -webkit-user-drag: none; transition: transform 0.4s ease, filter 0.4s ease, opacity 0.4s ease; } /* ========================================================= ACCENT DORÉ ========================================================= */ .partner-logo::after { content: ""; position: absolute; left: 50%; bottom: -1px; width: 0; height: 2px; transform: translateX(-50%); background: #F5A623; border-radius: 10px; transition: width 0.3s ease; } /* ========================================================= HOVER ========================================================= */ .partner-logo:hover { transform: translateY(-4px); border-color: rgba(46, 155, 230, 0.22); box-shadow: 0 12px 30px rgba(11, 20, 64, 0.10), 0 0 32px rgba(46, 155, 230, 0.22); } .partner-logo:hover::after { width: 28px; } .partner-logo:hover img { transform: scale(1.06); filter: grayscale(0%); opacity: 1; } /* ========================================================= ANIMATION CONTINUE ========================================================= */ @keyframes partners-scroll { from { transform: translate3d( 0, 0, 0 ); } to { transform: translate3d( -50%, 0, 0 ); } } /* ========================================================= PAUSE AU SURVOL ========================================================= */ .partners-marquee:hover .partners-track { animation-play-state: paused; } /* ========================================================= FONDUS LATÉRAUX ========================================================= */ .partners-fade { position: absolute; top: 0; bottom: 0; width: 110px; z-index: 20; pointer-events: none; } /* ========================================================= FONDU GAUCHE ========================================================= */ .partners-fade-left { left: 0; background: linear-gradient( to right, #ffffff 0%, rgba(255, 255, 255, 0.92) 30%, rgba(255, 255, 255, 0) 100% ); } /* ========================================================= FONDU DROIT ========================================================= */ .partners-fade-right { right: 0; background: linear-gradient( to left, #ffffff 0%, rgba(255, 255, 255, 0.92) 30%, rgba(255, 255, 255, 0) 100% ); } /* ========================================================= TABLETTE ========================================================= */ @media (max-width: 900px) { .partners { padding: 46px 0 40px; } .partners-head { margin-bottom: 28px; } .partners-track { animation-duration: 26s; } .partners-group { gap: 20px; padding-right: 20px; } .partner-logo { width: 140px; height: 62px; flex-basis: 140px; padding: 9px 15px; border-radius: 11px; } .partner-logo img { height: 36px; } .partners-fade { width: 75px; } } /* ========================================================= MOBILE ========================================================= */ @media (max-width: 600px) { .partners { padding: 38px 0 34px; } .partners-head { padding: 0 16px; margin-bottom: 24px; } .partners-eyebrow { gap: 7px; margin-bottom: 10px; font-size: 0.56rem; letter-spacing: 0.13em; } .partners-line { width: 18px; flex-basis: 18px; } .partners-title { font-size: 1.3rem; } .partners-intro { padding: 0 10px; font-size: 0.78rem; } .partners-marquee { padding: 8px 0 13px; } .partners-track { animation-duration: 23s; } .partners-group { gap: 15px; padding-right: 15px; } .partner-logo { width: 116px; height: 51px; flex-basis: 116px; padding: 7px 11px; border-radius: 9px; } .partner-logo img { height: 29px; } .partners-fade { width: 45px; } } /* ========================================================= TRÈS PETITS ÉCRANS ========================================================= */ @media (max-width: 380px) { .partner-logo { width: 105px; height: 48px; flex-basis: 105px; } .partner-logo img { height: 27px; } .partners-group { gap: 13px; padding-right: 13px; } } /* ========================================================= ACCESSIBILITÉ ========================================================= */ @media (prefers-reduced-motion: reduce) { .partners-track { animation: none !important; transform: none !important; } } /* ================= TÉMOIGNAGES ================= */ .testimonials { padding: 130px 0; position: relative; overflow: hidden; background: radial-gradient(circle at 10% 15%, rgba(46,155,230,.05), transparent 30%), radial-gradient(circle at 90% 85%, rgba(245,166,35,.04), transparent 28%), #fff; } .t-card { position: relative; overflow: hidden; isolation: isolate; background: rgba(255,255,255,.6); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); border-radius: var(--radius); padding: 44px 40px 36px; border: 1px solid rgba(11,20,64,.08); border-left: 3px solid var(--novasky-sky); box-shadow: 0 18px 45px rgba(11,20,64,.06); height: 100%; transition: transform .45s cubic-bezier(.2,.8,.2,1), box-shadow .45s ease, border-color .35s ease; } /* guillemet décoratif géant en filigrane */ .t-card::before { content: "\201C"; position: absolute; top: -10px; right: 20px; z-index: 0; font-family: Georgia, serif; font-size: 110px; line-height: 1; color: var(--novasky-sky); opacity: .08; pointer-events: none; transition: opacity .35s ease, transform .35s ease; } .t-card:hover { transform: translateY(-6px) rotate(-.4deg); border-left-color: var(--novasky-orange); box-shadow: 0 28px 60px rgba(11,20,64,.12), 0 0 0 1px rgba(46,155,230,.06); } .t-card:hover::before { opacity: .14; transform: scale(1.08); } .t-stars { position: relative; z-index: 1; color: var(--novasky-orange); margin-bottom: 20px; display: flex; gap: 3px; } .t-stars .icon { width: 0.95rem; height: 0.95rem; opacity: 0; transform: scale(.4); } .swiper.is-visible .t-stars .icon { animation: tStarPop .5s cubic-bezier(.2,.8,.2,1) both; } .swiper.is-visible .t-stars .icon:nth-child(1) { animation-delay: .05s; } .swiper.is-visible .t-stars .icon:nth-child(2) { animation-delay: .12s; } .swiper.is-visible .t-stars .icon:nth-child(3) { animation-delay: .19s; } .swiper.is-visible .t-stars .icon:nth-child(4) { animation-delay: .26s; } .swiper.is-visible .t-stars .icon:nth-child(5) { animation-delay: .33s; } @keyframes tStarPop { from { opacity: 0; transform: scale(.4) rotate(-15deg); } to { opacity: 1; transform: scale(1) rotate(0); } } .t-quote { position: relative; z-index: 1; font-size: 1.02rem; line-height: 1.7; color: var(--novasky-slate); margin-bottom: 28px; } .t-person { position: relative; z-index: 1; display: flex; align-items: center; gap: 14px; } .t-avatar { width: 46px; height: 46px; border-radius: 50%; background: linear-gradient(150deg, var(--novasky-marine), var(--novasky-sky)); display: flex; align-items: center; justify-content: center; color: #fff; font-family: var(--font-display); font-weight: 700; box-shadow: 0 0 0 3px rgba(46,155,230,0); transition: box-shadow .35s ease; } .t-card:hover .t-avatar { box-shadow: 0 0 0 4px rgba(46,155,230,.14); } .t-name { font-family: var(--font-display); font-weight: 700; font-size: 0.95rem; color: var(--novasky-marine); } .t-role { font-size: 0.8rem; color: var(--novasky-slate-soft); } .swiper { padding-bottom: 54px !important; } .swiper-pagination-bullet { background: var(--novasky-slate-soft); opacity: 0.3; transition: opacity .25s ease, background .25s ease, transform .25s ease; } .swiper-pagination-bullet-active { background: var(--novasky-orange); opacity: 1; transform: scale(1.2); } @media (max-width: 600px) { .t-card { padding: 30px 24px 26px; } .t-card::before { font-size: 80px; right: 12px; top: -4px; } .t-quote { font-size: 0.95rem; } } @media (prefers-reduced-motion: reduce) { .t-card, .t-card:hover, .t-stars .icon { animation: none !important; transition: none !important; } .t-stars .icon { opacity: 1; transform: none; } } /* ================= BLOG ================= */ .blog { padding: 130px 0; background: var(--novasky-off-white); } .blog-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 26px; } .blog-card { background: #fff; border-radius: var(--radius); overflow: hidden; border: 1px solid rgba(30,42,74,0.08); transition: transform .3s ease, box-shadow .3s ease; } .blog-card:hover { transform: translateY(-8px); box-shadow: 0 26px 48px rgba(11,20,64,0.12); } .blog-thumb { height: 150px; display: flex; align-items: center; justify-content: center; font-size: 2rem; color: #fff; position: relative; overflow: hidden; } .blog-thumb::after { content: ''; position: absolute; inset: 0; background: radial-gradient(circle at 70% 30%, rgba(255,255,255,0.22), transparent 55%); } .blog-thumb .icon { position: relative; z-index: 2; } .blog-thumb.b1 { background: linear-gradient(150deg, var(--novasky-sky), var(--novasky-marine)); } .blog-thumb.b2 { background: linear-gradient(150deg, var(--novasky-orange), var(--novasky-sky)); } .blog-thumb.b3 { background: linear-gradient(150deg, var(--novasky-marine), var(--novasky-slate)); } .blog-body { padding: 26px; } .blog-tag { font-family: var(--font-accent); font-weight: 600; font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.08em; color: var(--novasky-sky); margin-bottom: 12px; display: block; } .blog-title { font-family: var(--font-display); font-weight: 700; font-size: 1.08rem; color: var(--novasky-marine); margin-bottom: 10px; line-height: 1.4; } .blog-excerpt { font-size: 0.87rem; color: var(--novasky-slate-soft); line-height: 1.6; margin-bottom: 18px; } .blog-meta { display: flex; align-items: center; justify-content: space-between; font-size: 0.78rem; color: var(--novasky-slate-soft); } .blog-read { color: var(--novasky-sky); font-weight: 600; display: inline-flex; align-items: center; gap: 6px; transition: gap .2s ease; } .blog-read:hover { gap: 10px; } /* ================= OFFRE ================= */ .offer { padding: 100px 0; background: var(--novasky-marine); position: relative; overflow: hidden; } .offer::before { content: ''; position: absolute; width: 500px; height: 500px; border-radius: 50%; background: radial-gradient(circle, rgba(245,166,35,0.16), transparent 70%); bottom: -260px; right: -160px; } .offer-box { position: relative; z-index: 2; display: grid; grid-template-columns: 1.2fr 0.8fr; gap: 50px; align-items: center; background: rgba(255,255,255,0.035); border: 1px solid rgba(255,255,255,0.12); border-radius: 26px; padding: 54px; box-shadow: 0 40px 80px -30px rgba(0,0,0,0.5); } .offer-badge { display: inline-flex; align-items: center; gap: 8px; background: rgba(245,166,35,0.16); color: var(--novasky-orange); font-family: var(--font-accent); font-weight: 700; font-size: 0.78rem; letter-spacing: 0.08em; text-transform: uppercase; padding: 8px 16px; border-radius: 100px; margin-bottom: 20px; border: 1px solid rgba(245,166,35,0.25); } .offer-title { font-family: var(--font-display); font-weight: 800; font-size: 1.9rem; color: #fff; margin-bottom: 16px; line-height: 1.25; } .offer-text { color: rgba(255,255,255,0.65); margin-bottom: 26px; line-height: 1.65; } .offer-list { display: flex; flex-direction: column; gap: 12px; margin-bottom: 30px; } .offer-list li { display: flex; align-items: center; gap: 12px; color: rgba(255,255,255,0.85); font-size: 0.95rem; } .offer-list .icon { color: var(--novasky-orange); } .offer-timer { display: flex; gap: 14px; } .timer-box { background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.12); border-radius: 14px; padding: 16px 10px; text-align: center; min-width: 70px; } .timer-num { font-family: var(--font-display); font-weight: 800; font-size: 1.5rem; color: #fff; } .timer-label { font-family: var(--font-accent); font-size: 0.68rem; color: rgba(255,255,255,0.5); text-transform: uppercase; letter-spacing: 0.06em; } /* ================= CONTACT ================= */ .contact { padding: 130px 0; background: #fff; } /* Piège à robots — invisible pour les humains, jamais display:none (certains robots ignorent les champs display:none). */ .hp-field { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; } /* Message de confirmation / erreur du formulaire */ .form-status { display: none; margin-bottom: 18px; padding: 14px 16px; border-radius: 10px; font-size: 0.88rem; font-weight: 600; line-height: 1.5; } .form-status.is-visible { display: block; } .form-status.is-success { background: rgba(69, 211, 154, 0.12); border: 1px solid rgba(69, 211, 154, 0.35); color: #146c48; } .form-status.is-error { background: rgba(255, 100, 124, 0.10); border: 1px solid rgba(255, 100, 124, 0.35); color: #a11d38; } .form-card button[disabled] { opacity: 0.65; cursor: not-allowed; } .contact-grid { display: grid; grid-template-columns: 1.1fr 0.9fr; gap: 60px; } .form-card { background: var(--novasky-off-white); border-radius: var(--radius); padding: 44px; border: 1px solid rgba(30,42,74,0.08); } .form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; margin-bottom: 18px; } .field { display: flex; flex-direction: column; gap: 8px; } .field.full { grid-column: 1 / -1; } label { font-family: var(--font-accent); font-weight: 600; font-size: 0.85rem; color: var(--novasky-marine); } input, select, textarea { font-family: var(--font-body); font-size: 0.95rem; padding: 13px 16px; border-radius: 10px; border: 1px solid rgba(30,42,74,0.15); background: #fff; color: var(--novasky-slate); transition: border-color .2s ease, box-shadow .2s ease; } input:focus, select:focus, textarea:focus { outline: none; border-color: var(--novasky-sky); box-shadow: 0 0 0 4px rgba(46,155,230,0.12); } textarea { resize: vertical; min-height: 110px; } .contact-side { display: flex; flex-direction: column; gap: 20px; } .contact-item { display: flex; gap: 18px; padding: 24px; background: var(--novasky-off-white); border-radius: var(--radius); border: 1px solid rgba(30,42,74,0.08); transition: transform .25s ease, border-color .25s ease; } .contact-item:hover { transform: translateX(4px); border-color: rgba(46,155,230,0.25); } .contact-icon { width: 44px; height: 44px; border-radius: 12px; background: linear-gradient(150deg, var(--novasky-marine), var(--novasky-sky)); display: flex; align-items: center; justify-content: center; color: #fff; flex-shrink: 0; } .contact-label { font-family: var(--font-display); font-weight: 700; font-size: 0.95rem; color: var(--novasky-marine); margin-bottom: 4px; } .contact-value { font-size: 0.88rem; color: var(--novasky-slate-soft); line-height: 1.5; } .whatsapp-cta { display: flex; align-items: center; gap: 16px; background: #22C35E; border-radius: var(--radius); padding: 24px; color: #fff; transition: transform .25s ease; box-shadow: 0 16px 32px rgba(34,195,94,0.25); } .whatsapp-cta:hover { transform: translateY(-4px); } .whatsapp-cta .icon { font-size: 1.8rem; width: 1.8rem; height: 1.8rem; } .whatsapp-cta .wa-title { font-family: var(--font-display); font-weight: 700; font-size: 1rem; } .whatsapp-cta .wa-sub { font-size: 0.82rem; opacity: 0.9; } /* ================= RESPONSIVE ================= */ @media (max-width: 960px) { .hero-grid { grid-template-columns: 1fr; } .hero-visual { display: none; } .about-grid { grid-template-columns: 1fr; gap: 50px; } .values-row { grid-template-columns: repeat(2, 1fr); } .expertise-grid { grid-template-columns: 1fr; } .why-grid { grid-template-columns: repeat(2, 1fr); } .work-grid { grid-template-columns: repeat(2, 1fr); } .blog-grid { grid-template-columns: repeat(2, 1fr); } .offer-box { grid-template-columns: 1fr; } .contact-grid { grid-template-columns: 1fr; } } @media (max-width: 560px) { .stats { gap: 30px; } .values-row, .work-grid, .blog-grid { grid-template-columns: 1fr; } .pillar { grid-template-columns: 50px 1fr; } .why-grid { grid-template-columns: 1fr; } .form-row { grid-template-columns: 1fr; } .offer-timer { flex-wrap: wrap; } } @media (prefers-reduced-motion: reduce) { * { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; } } /* ========================================================= NOVASKY — MODALE SERVICE "EN SAVOIR PLUS" ========================================================= */ body.modal-open { overflow: hidden; } .service-modal { position: fixed; inset: 0; z-index: 2000; display: flex; align-items: center; justify-content: center; padding: 24px; opacity: 0; visibility: hidden; transition: opacity .35s ease, visibility .35s ease; } .service-modal.is-open { opacity: 1; visibility: visible; } .service-modal-backdrop { position: absolute; inset: 0; background: rgba(5, 10, 30, .72); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); } .service-modal-panel { position: relative; z-index: 2; width: min(920px, 100%); max-height: 88vh; overflow-y: auto; border-radius: 22px; border: 1px solid rgba(255, 255, 255, .12); background: linear-gradient(160deg, #0c1a44, #081132); box-shadow: 0 40px 100px rgba(0, 0, 0, .45); transform: translateY(24px) scale(.97); opacity: 0; transition: transform .4s cubic-bezier(.2, .8, .2, 1), opacity .4s ease; } .service-modal.is-open .service-modal-panel { transform: translateY(0) scale(1); opacity: 1; } .service-modal-close { position: absolute; top: 18px; right: 18px; z-index: 3; width: 40px; height: 40px; display: flex; align-items: center; justify-content: center; border: 1px solid rgba(255, 255, 255, .18); border-radius: 50%; background: rgba(255, 255, 255, .06); color: #fff; cursor: pointer; transition: background .25s ease, transform .25s ease; } .service-modal-close:hover { background: rgba(255, 255, 255, .16); transform: rotate(90deg); } .service-modal-close .icon { width: 18px; height: 18px; } .service-modal-body { display: grid; grid-template-columns: 1.1fr .9fr; gap: 0; } .service-modal-main { padding: 50px 40px; border-right: 1px solid rgba(255, 255, 255, .08); } .service-modal-main .service-icon { position: static; margin-bottom: 18px; } .service-modal-category { display: block; margin-bottom: 8px; color: var(--service-color, var(--novasky-sky)); font-family: var(--font-accent); font-size: .72rem; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; } .service-modal-title { margin: 0 0 16px; color: #fff; font-family: var(--font-display); font-size: 1.5rem; line-height: 1.25; font-weight: 700; } .service-modal-intro { margin: 0 0 20px; color: rgba(255, 255, 255, .68); font-size: .92rem; line-height: 1.65; } .service-modal-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; } .service-modal-list li { position: relative; padding-left: 18px; color: rgba(255, 255, 255, .82); font-size: .85rem; line-height: 1.5; } .service-modal-list li::before { content: ""; position: absolute; left: 0; top: .55em; width: 6px; height: 6px; border-radius: 50%; background: var(--service-color, var(--novasky-sky)); } .service-modal-form { padding: 50px 40px; background: rgba(255, 255, 255, .03); } .service-modal-form-title { margin-bottom: 6px; color: #fff; font-family: var(--font-display); font-weight: 700; font-size: 1.1rem; } .service-modal-form-sub { margin: 0 0 22px; color: rgba(255, 255, 255, .55); font-size: .84rem; line-height: 1.5; } .service-modal-form .field { margin-bottom: 16px; } .service-modal-form label { display: block; margin-bottom: 6px; color: rgba(255, 255, 255, .75); font-family: var(--font-accent); font-size: .8rem; font-weight: 600; } .field-optional { color: rgba(255, 255, 255, .4); font-weight: 400; text-transform: none; letter-spacing: normal; } .service-modal-form input, .service-modal-form textarea { width: 100%; padding: 12px 14px; border-radius: 10px; border: 1px solid rgba(255, 255, 255, .16); background: rgba(255, 255, 255, .05); color: #fff; font-family: var(--font-body); font-size: .9rem; transition: border-color .2s ease, box-shadow .2s ease; } .service-modal-form textarea { resize: vertical; min-height: 80px; line-height: 1.5; } .service-modal-form input::placeholder, .service-modal-form textarea::placeholder { color: rgba(255, 255, 255, .35); } .service-modal-form input:focus, .service-modal-form textarea:focus { outline: none; border-color: var(--novasky-sky); box-shadow: 0 0 0 4px rgba(46, 155, 230, .16); } @media (max-width: 760px) { .service-modal { padding: 12px; } .service-modal-body { grid-template-columns: 1fr; } .service-modal-main { border-right: 0; border-bottom: 1px solid rgba(255, 255, 255, .08); padding: 32px 20px; } .service-modal-form { padding: 28px 20px; } } @media (max-width: 480px) { .service-modal { padding: 8px; } .service-modal-panel { max-height: 94vh; border-radius: 16px; } .service-modal-main { padding: 28px 16px; } .service-modal-form { padding: 24px 16px; } .service-modal-title { font-size: 1.25rem; } } @media (prefers-reduced-motion: reduce) { .service-modal, .service-modal-panel, .service-modal-close { transition: none !important; } } /* ========================================================= FORMATIONS PAR DOMAINE — CARROUSEL ========================================================= */ .formations { position: relative; overflow: hidden; padding: clamp(80px, 9vw, 120px) 0; background: radial-gradient(circle at 90% 8%, rgba(46,155,230,.10), transparent 30%), radial-gradient(circle at 5% 95%, rgba(245,166,35,.10), transparent 30%), var(--novasky-off-white); } .formations .section-head { margin-bottom: 48px; } .formations-swiper { position: relative; z-index: 2; } .formations-swiper .swiper { padding: 8px 4px 58px !important; } .formations-swiper .swiper-slide { height: auto; display: flex; } .formation-card { display: flex; flex-direction: column; width: 100%; overflow: hidden; border-radius: 22px; background: #fff; border: 1px solid rgba(11,20,64,.07); box-shadow: 0 14px 40px rgba(11,20,64,.08); transition: transform .35s ease, box-shadow .35s ease; } .formation-card:hover { transform: translateY(-6px); box-shadow: 0 24px 56px rgba(11,20,64,.16); } .formation-thumb { position: relative; aspect-ratio: 16 / 10; overflow: hidden; background: linear-gradient(135deg, var(--novasky-marine-2), var(--novasky-marine-3)); } .formation-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .6s ease; } .formation-card:hover .formation-thumb img { transform: scale(1.06); } .formation-level { position: absolute; top: 14px; left: 14px; padding: 6px 14px; border-radius: 999px; font-size: .76rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--novasky-marine); background: rgba(255,255,255,.92); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); } .formation-body { position: relative; display: flex; flex-direction: column; flex: 1; padding: 34px 24px 24px; } .formation-icon { position: absolute; top: -26px; right: 22px; width: 52px; height: 52px; display: grid; place-items: center; border-radius: 16px; font-size: 1.4rem; color: #fff; background: linear-gradient(135deg, var(--novasky-sky), var(--novasky-marine-3)); box-shadow: 0 10px 24px rgba(46,155,230,.35); } .formation-title { margin: 0 0 10px; font-family: var(--font-display); font-size: 1.14rem; font-weight: 800; line-height: 1.3; color: var(--novasky-marine); } .formation-intro { margin: 0 0 18px; font-size: .94rem; line-height: 1.65; color: var(--novasky-slate-soft); } .formation-meta { display: flex; flex-wrap: wrap; gap: 8px; margin: auto 0 20px; } .formation-meta span { display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border-radius: 999px; font-size: .8rem; font-weight: 700; color: var(--novasky-marine); background: var(--novasky-sky-soft); } .formation-meta .formation-price { color: #8a5a00; background: var(--novasky-orange-soft); } .formation-card .service-toggle { align-self: flex-start; color: var(--novasky-marine); border-color: rgba(11,20,64,.25); } .formation-card .service-toggle:hover { color: #fff; background: var(--novasky-marine); border-color: var(--novasky-marine); } /* ----- Contenu enrichi de la fenêtre modale ----- */ .service-modal-image { display: block; width: 100%; aspect-ratio: 16 / 9; object-fit: cover; margin-bottom: 20px; border-radius: 16px; } .service-modal-image[hidden] { display: none; } .service-modal-meta { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 18px; } .service-modal-meta:empty { display: none; } .service-modal-meta span { display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border-radius: 999px; font-size: .82rem; font-weight: 700; color: #fff; background: rgba(255,255,255,.1); border: 1px solid rgba(255,255,255,.15); } .service-modal-meta .formation-price { color: var(--novasky-orange-light); border-color: rgba(245,166,35,.4); } @media (max-width: 575px) { .formation-body { padding: 32px 18px 20px; } .formations-swiper .swiper { padding-bottom: 50px !important; } } @media (prefers-reduced-motion: reduce) { .formation-card, .formation-thumb img { transition: none; } } /* ========================================================= RÉALISATIONS — IMAGE DE COUVERTURE DES CARTES Source : images/realisations//1.jpg Si l'image est absente, le dégradé + icône d'origine restent. ========================================================= */ .work-cover { position: absolute; inset: 0; z-index: 0; overflow: hidden; } .work-cover img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .7s cubic-bezier(.2, .8, .2, 1); } .work-cover::after { content: ""; position: absolute; inset: 0; background: linear-gradient( 180deg, rgba(7, 16, 47, .55) 0%, rgba(7, 16, 47, .05) 45%, rgba(7, 16, 47, .55) 100% ); } .work-card:hover .work-cover img { transform: scale(1.07); } .work-thumb.has-cover .icon, .work-thumb.has-cover .thumb-shine { display: none; } .work-thumb .work-number, .work-thumb .work-cat-badge { z-index: 2; } /* ========================================================= INSIGHTS (BLOG) — IMAGE DE COUVERTURE DES ARTICLES Source : images/blog/1.jpg, 2.jpg, 3.jpg (dégradé si absente) ========================================================= */ .blog-thumb { height: 190px; } .blog-cover { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .7s cubic-bezier(.2, .8, .2, 1); } .blog-card:hover .blog-cover { transform: scale(1.07); } .blog-thumb.has-cover .icon { display: none; } /* ========================================================= SERVICES — IMAGES NETTES + LUEUR AUX COINS Plus de voile sombre/opaque : l'image garde toute sa clarté ; une lumière douce aux couleurs du service éclaire seulement les coins. ========================================================= */ .service-visual img, .services .service-visual img { opacity: 1; filter: none; } .service-item:hover .service-visual img, .services .service-item:hover .service-visual img { opacity: 1; filter: saturate(1.08) contrast(1.03); } .service-visual::after, .services .service-visual::after { content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none; background: radial-gradient( circle at 0% 0%, color-mix(in srgb, var(--service-color, #2E9BE6) 55%, transparent) 0%, transparent 42% ), radial-gradient( circle at 100% 100%, color-mix(in srgb, var(--service-color, #2E9BE6) 45%, transparent) 0%, transparent 40% ); mix-blend-mode: screen; transition: opacity .5s ease; } .service-item:hover .service-visual::after { opacity: .75; } .service-visual .service-number { z-index: 3; } /* la petite lueur ronde du bas n'est plus nécessaire sur l'image */ .service-visual .service-glow { display: none; } /* ========================================================= FORMATIONS — NUMÉRO + TITRE SUR OMBRE DÉGRADÉE (BAS DE L'IMAGE) ========================================================= */ .formation-thumb { aspect-ratio: 16 / 11; } .formation-thumb::after { content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none; background: linear-gradient( 180deg, rgba(7, 16, 47, 0) 38%, rgba(7, 16, 47, .55) 68%, rgba(7, 16, 47, .92) 100% ); } .formation-level { z-index: 3; } .formation-caption { position: absolute; left: 0; right: 0; bottom: 0; z-index: 2; display: flex; align-items: flex-end; gap: 12px; padding: 0 76px 16px 20px; color: #fff; } .formation-num { font-family: var(--font-display); font-size: 1.9rem; font-weight: 800; line-height: 1; color: var(--novasky-orange); text-shadow: 0 2px 10px rgba(0, 0, 0, .35); } .formation-caption .formation-title { margin: 0; font-size: 1rem; line-height: 1.3; color: #fff; text-shadow: 0 2px 10px rgba(0, 0, 0, .4); display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; } .formation-body { padding-top: 22px; } .formation-icon { z-index: 4; } /* ========================================================= INSIGHTS — LIENS, BOUTON « TOUS LES ARTICLES », PAGE ARCHIVE ========================================================= */ .blog-thumb { text-decoration: none; } .blog-title a { color: inherit; text-decoration: none; } .blog-title a:hover { color: var(--novasky-sky); } .blog-more { display: flex; justify-content: center; margin-top: 44px; } .blog-archive { padding-top: 150px; min-height: 70vh; } /* ========================================================= FORMATIONS — SURVOL : IMAGE SEULE, ZOOM, LUEUR DE COINS, BORDURE ANIMÉE ========================================================= */ @property --nv-angle { syntax: ""; inherits: false; initial-value: 0deg; } .formation-card { position: relative; } .formation-card::before { content: ""; position: absolute; inset: 0; z-index: 6; padding: 2.5px; border-radius: inherit; pointer-events: none; background: conic-gradient( from var(--nv-angle), transparent 0deg, var(--novasky-sky) 70deg, var(--novasky-orange) 140deg, transparent 210deg, transparent 360deg ); -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0); opacity: 0; transition: opacity .4s ease; } .formation-card:hover::before, .formation-card:focus-within::before { opacity: 1; animation: nv-spin 2.6s linear infinite; } @keyframes nv-spin { to { --nv-angle: 360deg; } } /* lueur lumineuse aux coins intérieurs de l'image */ .formation-thumb::before { content: ""; position: absolute; inset: 0; z-index: 2; pointer-events: none; opacity: 0; transition: opacity .45s ease; mix-blend-mode: screen; background: radial-gradient(circle at 0% 0%, rgba(46,155,230,.65), transparent 46%), radial-gradient(circle at 100% 0%, rgba(245,166,35,.45), transparent 40%), radial-gradient(circle at 100% 100%, rgba(245,166,35,.65), transparent 46%), radial-gradient(circle at 0% 100%, rgba(46,155,230,.45), transparent 40%); } .formation-thumb::after { transition: opacity .4s ease; } .formation-caption { transition: opacity .35s ease, transform .35s ease; } .formation-card:hover .formation-thumb::before, .formation-card:focus-within .formation-thumb::before { opacity: 1; } .formation-card:hover .formation-thumb::after, .formation-card:focus-within .formation-thumb::after { opacity: 0; } .formation-card:hover .formation-caption, .formation-card:focus-within .formation-caption { opacity: 0; transform: translateY(14px); } .formation-card:hover .formation-thumb img, .formation-card:focus-within .formation-thumb img { transform: scale(1.12); } @media (prefers-reduced-motion: reduce) { .formation-card:hover::before { animation: none; } } /* ========================================================= INSIGHTS — LISTE DÉPLIABLE SUR L'ACCUEIL + TEXTES JUSTIFIÉS ========================================================= */ .blog-card--extra[hidden] { display: none; } .blog-card--extra.is-entering { animation: nv-fade-up .55s ease both; } @keyframes nv-fade-up { from { opacity: 0; transform: translateY(22px); } to { opacity: 1; transform: none; } } [data-blog-toggle] .blog-toggle-icon { transition: transform .35s ease; } [data-blog-toggle][aria-expanded="true"] .blog-toggle-icon { transform: rotate(-90deg); } .blog-excerpt { text-align: justify; hyphens: auto; -webkit-hyphens: auto; } /* ========================================================= RÉALISATIONS (CARTES) — IMAGES NETTES, LUEUR DE COINS, BORDURE ANIMÉE ========================================================= */ .work-cover::after { background: radial-gradient(circle at 0% 0%, rgba(46,155,230,.50), transparent 42%), radial-gradient(circle at 100% 100%, rgba(245,166,35,.50), transparent 42%); mix-blend-mode: screen; transition: opacity .5s ease; } .work-card:hover .work-cover::after { opacity: .75; } /* plus de voile blanc/coloré sur l'image */ .work-thumb.has-cover::before, .work-thumb.has-cover::after { display: none; } .work-thumb.has-cover .work-number, .work-thumb.has-cover .work-cat-badge { text-shadow: 0 2px 10px rgba(0,0,0,.45); } .work-border { position: absolute; inset: 0; z-index: 25; padding: 2.5px; border-radius: inherit; pointer-events: none; background: conic-gradient( from var(--nv-angle), transparent 0deg, var(--novasky-sky) 70deg, var(--novasky-orange) 140deg, transparent 210deg, transparent 360deg ); -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0); opacity: 0; transition: opacity .4s ease; } .work-card:hover .work-border, .work-card:focus-within .work-border { opacity: 1; animation: nv-spin 2.6s linear infinite; } /* ========================================================= ÉQUIPE — 6 CARTES COMPACTES SUR UNE MÊME LIGNE ========================================================= */ .team { position: relative; overflow: hidden; background: radial-gradient(circle at 8% 12%, rgba(46,155,230,.10), transparent 38%), radial-gradient(circle at 92% 88%, rgba(245,166,35,.12), transparent 40%), var(--novasky-off-white); } .team-grid { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 16px; align-items: stretch; } .team-card { --tc: var(--novasky-orange); --tc2: var(--novasky-orange-light); position: relative; display: flex; flex-direction: column; border-radius: 18px; overflow: hidden; background: #fff; border: 1px solid rgba(11,20,64,.07); box-shadow: 0 10px 28px rgba(11,20,64,.08); transition: transform .4s ease, box-shadow .4s ease; outline: none; } .team-card:hover, .team-card:focus-visible { transform: translateY(-8px); box-shadow: 0 22px 46px rgba(11,20,64,.16); } .team-border { position: absolute; inset: 0; z-index: 8; padding: 2px; border-radius: inherit; pointer-events: none; background: conic-gradient( from var(--nv-angle), transparent 0deg, var(--tc) 80deg, var(--tc2) 150deg, transparent 220deg, transparent 360deg ); -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0); opacity: 0; transition: opacity .4s ease; } .team-card:hover .team-border, .team-card:focus-visible .team-border { opacity: 1; animation: nv-spin 2.6s linear infinite; } .team-photo { position: relative; aspect-ratio: 4 / 5; overflow: hidden; display: grid; place-items: center; background: linear-gradient(145deg, var(--novasky-marine-2), var(--novasky-marine-3)); } .team-photo::before { content: ""; position: absolute; inset: 0; z-index: 2; pointer-events: none; mix-blend-mode: screen; background: radial-gradient(circle at 0% 0%, color-mix(in srgb, var(--tc) 60%, transparent), transparent 46%), radial-gradient(circle at 100% 100%, color-mix(in srgb, var(--tc2) 50%, transparent), transparent 44%); opacity: .8; } .team-photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center top; z-index: 1; transition: transform .7s ease, filter .5s ease; } .team-card:hover .team-photo img, .team-card:focus-visible .team-photo img { transform: scale(1.08); filter: blur(1.5px) brightness(.55); } .team-initials { font-family: var(--font-display); font-size: 2.2rem; font-weight: 800; letter-spacing: -.04em; color: rgba(255,255,255,.9); } .team-num { position: absolute; top: 10px; left: 10px; z-index: 4; font-family: var(--font-display); font-weight: 800; font-size: .68rem; color: #fff; padding: 3px 9px; border-radius: 999px; background: rgba(7,16,47,.55); backdrop-filter: blur(6px); } .team-badge { position: absolute; right: 10px; bottom: 10px; z-index: 4; width: 34px; height: 34px; display: grid; place-items: center; border-radius: 11px; font-size: .95rem; color: #fff; background: linear-gradient(135deg, var(--tc), var(--tc2)); box-shadow: 0 8px 18px rgba(0,0,0,.28); transition: transform .4s ease, opacity .3s ease; } .team-card:hover .team-badge, .team-card:focus-visible .team-badge { transform: rotate(-10deg) scale(1.12); } /* panneau révélé au survol : citation + expertises */ .team-hover { position: absolute; inset: 0; z-index: 5; display: flex; flex-direction: column; justify-content: center; gap: 12px; padding: 16px 14px 20px; opacity: 0; transform: translateY(18px); transition: opacity .4s ease, transform .4s ease; } .team-card:hover .team-hover, .team-card:focus-visible .team-hover { opacity: 1; transform: none; } .team-quote { margin: 0; font-size: .76rem; line-height: 1.55; font-style: italic; color: #fff; text-align: center; } .team-tags { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; } .team-tags li { padding: 4px 9px; border-radius: 999px; font-size: .62rem; font-weight: 800; color: #fff; background: color-mix(in srgb, var(--tc) 75%, transparent); border: 1px solid color-mix(in srgb, var(--tc2) 70%, transparent); } .team-info { position: relative; flex: 1; padding: 16px 12px 16px; text-align: center; display: flex; flex-direction: column; gap: 6px; } .team-info::before { content: ""; position: absolute; top: 0; left: 50%; width: 34px; height: 3px; border-radius: 0 0 4px 4px; transform: translateX(-50%); background: linear-gradient(90deg, var(--tc), var(--tc2)); transition: width .45s ease; } .team-card:hover .team-info::before { width: 70%; } .team-name { margin: 4px 0 0; font-family: var(--font-display); font-size: .74rem; line-height: 1.3; letter-spacing: -.005em; color: var(--novasky-marine); } .team-role { font-size: .64rem; font-weight: 800; letter-spacing: .06em; line-height: 1.4; text-transform: uppercase; color: var(--tc); } @media (max-width: 1199.98px) { .team-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; } .team-name { font-size: .88rem; } .team-role { font-size: .7rem; } .team-quote { font-size: .85rem; } .team-tags li { font-size: .68rem; } } @media (max-width: 575.98px) { .team-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; } .team-name { font-size: .78rem; } .team-role { font-size: .6rem; } .team-quote { font-size: .7rem; } .team-tags li { font-size: .58rem; padding: 3px 7px; } } @media (hover: none) { /* tactile : on affiche toujours les expertises sous le nom */ .team-hover { display: none; } } @media (prefers-reduced-motion: reduce) { .team-card:hover .team-border, .work-card:hover .work-border { animation: none; } } .team-initials { transition: opacity .3s ease; } .team-card:hover .team-initials, .team-card:focus-visible .team-initials { opacity: 0; } /* ========================================================= ÉQUIPE — ENTRÉE DOUCE DE CHAQUE CADRE (échelonnée) ========================================================= */ .team-card[data-reveal]:not(.is-visible) { opacity: 0; } .team-card.is-visible { animation: team-in .9s cubic-bezier(.22, .8, .24, 1) var(--reveal-delay, 0ms) backwards; } .team-card.is-visible .team-photo img, .team-card.is-visible .team-initials { animation: team-photo-in 1.3s cubic-bezier(.22, .8, .24, 1) var(--reveal-delay, 0ms) backwards; } .team-card.is-visible .team-info { animation: team-info-in .8s ease calc(var(--reveal-delay, 0ms) + 320ms) backwards; } .team-card.is-visible .team-border { animation: team-border-flash 1.6s ease calc(var(--reveal-delay, 0ms) + 250ms) 1 both, nv-spin 1.6s linear calc(var(--reveal-delay, 0ms) + 250ms) 1; } @keyframes team-in { from { opacity: 0; transform: translateY(34px) scale(.94); filter: blur(6px); } to { opacity: 1; transform: none; filter: blur(0); } } @keyframes team-photo-in { from { transform: scale(1.18); opacity: .4; } to { transform: scale(1); opacity: 1; } } @keyframes team-info-in { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } } @keyframes team-border-flash { 0% { opacity: 0; } 30% { opacity: 1; } 100% { opacity: 0; } } @media (prefers-reduced-motion: reduce) { .team-card[data-reveal]:not(.is-visible) { opacity: 1; } .team-card.is-visible, .team-card.is-visible * { animation: none !important; } } /* ========================================================= ÉQUIPE — PANNEAU DE SURVOL PLUS LISIBLE ========================================================= */ .team-card:hover .team-photo img, .team-card:focus-visible .team-photo img { filter: blur(3px) brightness(.38) saturate(.9); } .team-hover { justify-content: flex-end; align-items: stretch; gap: 12px; padding: 16px 12px 16px; background: linear-gradient(180deg, rgba(7,16,47,.30) 0%, rgba(7,16,47,.90) 55%, rgba(7,16,47,.96) 100%); } .team-hover::before { content: ""; width: 30px; height: 3px; margin: 0 auto 2px; border-radius: 3px; background: linear-gradient(90deg, var(--tc), var(--tc2)); } .team-quote { font-size: .8rem; line-height: 1.5; font-weight: 500; color: #fff; text-shadow: 0 1px 6px rgba(0,0,0,.6); } .team-tags { gap: 6px; } .team-tags li { padding: 5px 10px; font-size: .64rem; font-weight: 800; letter-spacing: .02em; color: var(--novasky-marine); background: #fff; border: 0; border-left: 3px solid var(--tc); border-radius: 6px; box-shadow: 0 4px 12px rgba(0,0,0,.25); } .team-card:hover .team-tags li { background: #fff; color: var(--novasky-marine); } .team-card:hover .team-badge, .team-card:focus-visible .team-badge { opacity: 0; } @media (max-width: 1199.98px) { .team-quote { font-size: .9rem; } .team-tags li { font-size: .7rem; } } .team-num { transition: opacity .3s ease; } .team-card:hover .team-num, .team-card:focus-visible .team-num { opacity: 0; } /* ========================================================= SURVOL DES CARTES — LE BLOC DE TEXTE PASSE EN BLEU MARINE Le fond (fondu d'une couche) et les couleurs de texte utilisent exactement la même durée : plus de mélange noir/blanc. ========================================================= */ .work-body, .formation-body, .blog-body { position: relative; isolation: isolate; } .work-body::after, .formation-body::after, .blog-body::after { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; opacity: 0; transition: opacity .28s ease; background: radial-gradient(circle at 100% 100%, rgba(245,166,35,.28), transparent 48%), radial-gradient(circle at 0% 0%, rgba(46,155,230,.30), transparent 50%), linear-gradient(145deg, #0B1440, #17245F); } .work-card:hover .work-body::after, .work-card:focus-within .work-body::after, .formation-card:hover .formation-body::after, .formation-card:focus-within .formation-body::after, .blog-card:hover .blog-body::after, .blog-card:focus-within .blog-body::after { opacity: 1; } /* toutes les couleurs de texte : même durée que le fond */ .work-body *, .formation-body *, .blog-body * { transition: color .28s ease, background-color .28s ease, border-color .28s ease, gap .28s ease, transform .28s ease !important; } /* --- réalisations --- */ .work-card:hover .work-body .work-meta, .work-card:hover .work-body .work-meta span { color: var(--novasky-orange-light) !important; } .work-card:hover .work-body .work-title { color: #fff !important; } .work-card:hover .work-body .work-desc { color: rgba(255,255,255,.88) !important; } .work-card:hover .work-body .work-link { color: #fff !important; } .work-card:hover .work-body .work-link-icon { background: var(--novasky-orange); color: var(--novasky-marine); } /* --- formations --- */ .formation-card:hover .formation-intro { color: rgba(255,255,255,.88); } .formation-card:hover .formation-meta span { color: #fff; background: rgba(255,255,255,.14); } .formation-card:hover .formation-meta .formation-price { color: var(--novasky-marine); background: var(--novasky-orange-light); } .formation-card:hover .service-toggle { color: var(--novasky-marine); background: var(--novasky-orange); border-color: var(--novasky-orange); } /* --- insights --- */ .blog-card:hover .blog-tag { color: var(--novasky-orange-light); } .blog-card:hover .blog-title, .blog-card:hover .blog-title a { color: #fff; } .blog-card:hover .blog-excerpt { color: rgba(255,255,255,.86); } .blog-card:hover .blog-meta { color: rgba(255,255,255,.72); } .blog-card:hover .blog-read { color: var(--novasky-orange-light); } /* ========================================================= FORMATIONS — L'ICÔNE PASSE AU PREMIER PLAN (au-dessus de l'ombre du titre) ========================================================= */ .formation-body { z-index: 7; } .formation-body .formation-icon { z-index: 8; } .formation-card::before { z-index: 9; } /* ========================================================= MOBILE : OFFRE DU MOMENT + FORMULAIRE CONTACT ========================================================= */ .offer-box > *, .contact-grid > *, .form-row > *, .field{ min-width:0; } .field input, .field select, .field textarea, .form-card input, .form-card select, .form-card textarea{ width:100%; max-width:100%; min-width:0; box-sizing:border-box; } .contact-value, .contact-label, .wa-sub, .wa-title{ overflow-wrap:anywhere; } @media (max-width:960px){ .offer-box{ grid-template-columns:minmax(0,1fr); gap:30px; } .contact-grid{ grid-template-columns:minmax(0,1fr); gap:30px; } } @media (max-width:560px){ .offer{ padding:70px 0; } .offer-box{ padding:26px 18px; border-radius:20px; } .offer-title{ font-size:1.45rem; } .offer-timer{ gap:8px; } .form-card{ padding:22px 16px; } .contact-item, .whatsapp-cta{ padding:18px 14px; gap:12px; } } @media (max-width:560px){ .offer-timer{ display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:6px; } .timer-box{ min-width:0; padding:12px 2px; } .timer-box *{ overflow-wrap:normal; } } @media (max-width:560px){ .timer-box .timer-label, .timer-box div:last-child{ font-size:8px !important; letter-spacing:0 !important; } }