:root { --bg: #120d1c; --s1: #1b1429; --s2: #261d3a; --line: #3a2e55; --ink: #f4f0fa; --muted: #b3a8c7; --violet: #9b7bff; --vs: #6d42f5; --head: #ffb23f; --j-bg: #f8f6fb; --j-s2: #efeaf7; --j-line: #dcd3ea; --j-ink: #191224; --j-muted: #5c5170; --j-v: #5b2ee0; --j-soft: #e9e2fd; --ease: cubic-bezier(.16, 1, .3, 1); } * { box-sizing: border-box; } html { background: var(--bg); } body { margin: 0; font-family: "Bricolage Grotesque", "Helvetica Neue", Arial, sans-serif; color: var(--ink); background: var(--bg); -webkit-font-smoothing: antialiased; overflow-x: clip; transition: background-color .6s ease; } body.neg { background: var(--j-bg); } a { color: inherit; } img { display: block; } .wrap { width: min(1200px, calc(100% - 32px)); margin: 0 auto; } .btn { display: inline-block; padding: 14px 26px; border-radius: 8px; background: var(--vs); color: #fff; font-weight: 600; text-decoration: none; } .btn--ghost { background: transparent; border: 1px solid #6e6090; } .acc section { position: relative; } .ce-pin { position: sticky; top: 0; height: 100vh; overflow: hidden; } .acc-header { position: fixed; inset: 0 0 auto; z-index: 50; mix-blend-mode: difference; color: #fff; } .acc-header .wrap { display: flex; justify-content: space-between; align-items: center; gap: 24px; height: 76px; } .acc-header .logo { font-size: 22px; font-weight: 700; letter-spacing: -.02em; text-decoration: none; } .acc-header nav { display: flex; gap: 28px; } .acc-header nav a, .acc-header .go { font-weight: 600; text-decoration: none; } @media (max-width: 900px) { .acc-header nav { display: none; } } h2.big { font-size: clamp(38px, 4.6vw, 68px); letter-spacing: -.035em; line-height: 1; margin: 0 0 14px; } .lead { font-size: 19px; margin: 0 0 48px; max-width: 52ch; } /* 1. Hero */ .hero { min-height: 100vh; display: grid; align-items: center; padding: 110px 0 60px; } .hero .wrap { display: grid; grid-template-columns: 1fr 1.1fr; gap: 56px; align-items: center; } .hero h1 { font-size: clamp(44px, 5.4vw, 80px); line-height: .98; letter-spacing: -.035em; font-weight: 750; margin: 0 0 24px; } .hero p { color: var(--muted); font-size: 19px; line-height: 1.55; margin: 0 0 32px; max-width: 34ch; } .hero__cta { display: flex; gap: 12px; flex-wrap: wrap; } .hero small { display: block; margin-top: 18px; color: var(--muted); font-size: 15px; } .frame { aspect-ratio: 16/9; border-radius: 14px; overflow: hidden; box-shadow: 0 30px 60px -30px #000; margin: 0; } .frame img { width: 100%; height: 100%; object-fit: cover; } /* 2. Projets : mosaïque de vraies vidéos */ .proj { padding: 110px 0 120px; } .proj .lead { color: var(--muted); } .tiles { display: grid; grid-template-columns: repeat(4, 1fr); grid-auto-rows: 210px; gap: 16px; } .tile { position: relative; border-radius: 14px; overflow: hidden; display: block; text-decoration: none; background: var(--s2); } .tile--big { grid-column: span 2; grid-row: span 2; } .tile--wide { grid-column: span 2; } .tile img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s var(--ease), filter .4s; } .tile:hover img { transform: scale(1.06); filter: brightness(.8); } .tile::after { content: ""; position: absolute; inset: 0; background: linear-gradient(transparent 45%, rgba(10, 7, 16, .85)); } .tile__txt { position: absolute; left: 16px; right: 16px; bottom: 14px; z-index: 1; } .tile__txt b { display: block; font-size: 19px; letter-spacing: -.01em; } .tile--big .tile__txt b { font-size: 28px; } .tile__txt small { display: block; color: var(--muted); font-size: 13px; margin-top: 2px; } /* Même bouton « verre liquide » que la vidéo de présentation */ .tile__play { position: absolute; right: 14px; top: 14px; z-index: 1; width: 52px; height: 52px; border-radius: 99px; display: grid; place-items: center; color: #fff; background: linear-gradient(135deg, rgba(155, 123, 255, .42), rgba(109, 66, 245, .16) 55%, rgba(255, 255, 255, .08)); border: 1px solid rgba(255, 255, 255, .28); -webkit-backdrop-filter: blur(12px) saturate(170%); backdrop-filter: blur(12px) saturate(170%); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .45), 0 12px 26px -12px rgba(20, 8, 50, .8); scale: .7; opacity: 0; transition: scale .55s cubic-bezier(.34, 1.56, .64, 1), opacity .3s; } .tile__play::before { content: ""; position: absolute; inset: 6px; border-radius: inherit; background: linear-gradient(145deg, #9b7bff, #6d42f5); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .5); } .tile__play::after { content: ""; position: absolute; inset: -1px; border-radius: inherit; border: 1.5px solid rgba(180, 155, 255, .7); opacity: 0; pointer-events: none; } .tile:hover .tile__play, .tile:focus-visible .tile__play { scale: 1; opacity: 1; } .tile:hover .tile__play::after, .tile:focus-visible .tile__play::after { animation: tile-ring 1.4s ease-out .15s infinite; } @keyframes tile-ring { 0% { transform: scale(1); opacity: .9; } 100% { transform: scale(1.6); opacity: 0; } } .tile__play svg { position: relative; width: 15px; height: 15px; margin-left: 2px; } @media (hover: none) { .tile__play { scale: .85; opacity: 1; } } .tile--cta { background: var(--head); color: #120d1c; display: grid; align-content: end; padding: 18px; } .tile--cta::after { display: none; } .tile--cta b { font-size: 20px; line-height: 1.15; } .tile--cta small { color: rgba(18,13,28,.75); font-size: 14px; margin-top: 6px; display: block; } .lightbox { position: fixed; inset: 0; z-index: 80; background: rgba(10, 7, 16, .9); display: grid; place-items: center; opacity: 0; pointer-events: none; transition: opacity .3s; } .lightbox.on { opacity: 1; pointer-events: auto; } .lightbox__box { width: min(1100px, calc(100% - 32px)); aspect-ratio: 16 / 9; border-radius: 14px; overflow: hidden; background: #000; } .lightbox iframe { width: 100%; height: 100%; border: 0; } .lightbox button { position: absolute; top: 20px; right: 20px; width: 48px; height: 48px; border-radius: 99px; border: 0; background: #fff; font-size: 24px; cursor: pointer; } /* 3. Le retournement : le site passe en négatif */ .flip { height: 380vh; } .flip .ce-pin { perspective: 1800px; display: grid; place-items: center; background: #0a0710; transition: background-color .4s linear; } .flip__grid { position: absolute; inset: 0; background-image: linear-gradient(rgba(155,123,255,.12) 1px, transparent 1px), linear-gradient(90deg, rgba(155,123,255,.12) 1px, transparent 1px); background-size: 80px 80px; background-position: 50% var(--gy, 0px); opacity: 0; } .flip__card { position: absolute; inset: 0; transform-style: preserve-3d; will-change: transform; } .flip__face { position: absolute; inset: 0; backface-visibility: hidden; -webkit-backface-visibility: hidden; display: grid; align-content: center; padding: 76px 0 0; border-radius: var(--rad, 0); overflow: hidden; } .flip__face--front { background: var(--bg); color: var(--ink); } .flip__face--back { background: var(--j-bg); color: var(--j-ink); transform: rotateY(180deg); } .flip__face .kicker { font-size: clamp(18px, 1.6vw, 24px); font-weight: 600; margin: 0 0 22px; } .flip__face--front .kicker { color: var(--muted); } .flip__face--back .kicker { color: var(--j-muted); } .flip__face h3 { font-size: clamp(44px, 6.4vw, 104px); line-height: .95; letter-spacing: -.045em; margin: 0 0 36px; font-weight: 780; max-width: 14ch; } .flip__face--front h3 { color: #6e6090; text-decoration: line-through; text-decoration-thickness: .06em; text-decoration-color: rgba(255,138,128,.8); } .flip__face--back h3 span { color: var(--j-v); } .flip__face ul { margin: 0; padding: 0; list-style: none; display: grid; grid-template-columns: 1fr 1fr; gap: 14px 40px; max-width: 900px; font-size: 19px; } .flip__face li { display: flex; gap: 12px; align-items: baseline; } .flip__face--front li::before { content: "×"; color: #ff8a80; font-weight: 700; } .flip__face--back li::before { content: "✓"; color: var(--j-v); font-weight: 700; } .flip__face--front li { color: var(--muted); } .flip__badge { position: absolute; top: 96px; right: max(16px, calc((100vw - 1200px) / 2)); font: 600 14px/1 "Bricolage Grotesque"; padding: 8px 14px; border-radius: 99px; } .flip__face--front .flip__badge { border: 1px solid var(--line); color: var(--muted); } .flip__face--back .flip__badge { background: var(--j-v); color: #fff; } /* Monde négatif (clair) après le retournement */ .neg-zone { color: var(--j-ink); background: var(--j-bg); } .neg-zone .lead { color: var(--j-muted); } /* 4. Avis (E+) */ .avis { height: 420vh; } .avis .ce-pin { display: grid; grid-template-columns: 1fr 2.2fr; align-items: center; gap: 64px; padding: 0 max(16px, calc((100vw - 1200px) / 2)); } .avis__side h2 { font-size: clamp(34px, 3.6vw, 52px); letter-spacing: -.03em; line-height: 1.02; margin: 0 0 28px; } .avis__num { font-size: clamp(80px, 9vw, 150px); font-weight: 800; letter-spacing: -.06em; line-height: .85; color: var(--j-v); font-variant-numeric: tabular-nums; } .avis__stars { display: flex; gap: 6px; margin: 16px 0 8px; } .avis__stars i { width: 22px; height: 22px; background: var(--head); clip-path: polygon(50% 0, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%); transform: scale(0); transition: transform .5s var(--ease); } .avis.on .avis__stars i { transform: scale(1); } .avis.on .avis__stars i:nth-child(2) { transition-delay: .08s } .avis.on .avis__stars i:nth-child(3) { transition-delay: .16s } .avis.on .avis__stars i:nth-child(4) { transition-delay: .24s } .avis.on .avis__stars i:nth-child(5) { transition-delay: .32s } .avis__side small { color: var(--j-muted); font-size: 15px; } .avis__side a { display: inline-block; margin-top: 20px; color: var(--j-v); font-weight: 600; } .avis__stage { position: relative; height: 70vh; } .avis__mark { position: absolute; left: -12px; top: -40px; width: 120px; height: 100px; } .avis__mark path { fill: none; stroke: var(--j-v); stroke-width: 6; stroke-linecap: round; stroke-dasharray: 260; stroke-dashoffset: calc(260 - var(--m, 0) * 260); } .avis__q { position: absolute; left: 0; right: 0; top: 50%; transform: translateY(-50%); } .avis__q p { font-size: clamp(28px, 3.3vw, 52px); line-height: 1.14; letter-spacing: -.03em; font-weight: 650; margin: 0 0 32px; } .avis__q .line { display: block; overflow: hidden; } .avis__q .line > span { display: block; transform: translateY(var(--ly, 110%)); transition: transform .9s var(--ease); } .avis__q.on .line > span { --ly: 0%; } .avis__q.gone .line > span { --ly: -110%; } .avis__q .line:nth-child(2) > span { transition-delay: .06s } .avis__q .line:nth-child(3) > span { transition-delay: .12s } .avis__q .line:nth-child(4) > span { transition-delay: .18s } .avis__q .line:nth-child(5) > span { transition-delay: .24s } .avis__q i { font-style: normal; color: rgba(25,18,36,.18); background-image: linear-gradient(var(--j-v), var(--j-v)); background-repeat: no-repeat; background-position: 0 92%; background-size: var(--u, 0%) 3px; transition: color .3s ease; } .avis__q i.lit { color: var(--j-ink); } .avis__q cite { font-style: normal; display: flex; gap: 14px; align-items: center; opacity: 0; transition: opacity .6s .3s; } .avis__q.on cite { opacity: 1; } .avis__q cite b { font-size: 18px; } .avis__q cite span { color: var(--j-muted); } .avis__bar { position: absolute; left: 0; bottom: 0; display: flex; gap: 10px; } .avis__bar i { width: 60px; height: 3px; background: var(--j-line); position: relative; overflow: hidden; border-radius: 2px; } .avis__bar i::after { content: ""; position: absolute; inset: 0; background: var(--j-v); transform: scaleX(var(--f, 0)); transform-origin: left; } /* 5. Offres (F+) : cartes sur une scène en perspective */ .offres { padding: 120px 0 180px; overflow: hidden; } .offres__stage { position: relative; perspective: 1400px; margin-top: 30px; } .offres__floor { position: absolute; left: -10%; right: -10%; bottom: -120px; height: 360px; background-image: linear-gradient(rgba(91,46,224,.16) 1px, transparent 1px), linear-gradient(90deg, rgba(91,46,224,.16) 1px, transparent 1px); background-size: 70px 70px; transform: perspective(700px) rotateX(58deg); transform-origin: 50% 0; -webkit-mask: linear-gradient(transparent, #000 30%, #000 60%, transparent); mask: linear-gradient(transparent, #000 30%, #000 60%, transparent); background-position: 0 var(--fy, 0px); } .offres__grid { position: relative; display: grid; grid-template-columns: 1fr 1.12fr 1fr; gap: 24px; align-items: end; transform-style: preserve-3d; } .tier { position: relative; border-radius: 24px; padding: 36px; background: #fff; border: 1px solid var(--j-line); transform-origin: 50% 100%; will-change: transform; overflow: hidden; box-shadow: 0 40px 60px -40px rgba(25,18,36,.35); } .tier::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: radial-gradient(420px circle at var(--mx, -200px) var(--my, -200px), rgba(255,255,255,.55), transparent 45%); mix-blend-mode: soft-light; } .tier.feat { background: var(--j-v); color: #fff; border-color: var(--j-v); padding: 48px 40px; } .tier small { font-weight: 600; color: var(--j-v); } .tier.feat small { color: #fff; background: rgba(255,255,255,.18); padding: 6px 12px; border-radius: 99px; } .tier h3 { font-size: 28px; letter-spacing: -.02em; margin: 14px 0 6px; } .tier .price { font-size: 36px; font-weight: 750; margin: 0 0 18px; letter-spacing: -.02em; } .tier ul { margin: 0 0 24px; padding-left: 20px; display: grid; gap: 8px; color: var(--j-muted); } .tier.feat ul { color: rgba(255,255,255,.85); } .tier a { font-weight: 600; color: var(--j-v); } .tier.feat a { color: #fff; } .tier .btn { background: #fff; color: var(--j-v); } /* 6. Appel final (G+) */ .cta { position: relative; min-height: 110vh; display: grid; place-items: center; overflow: hidden; } .cta__lines { text-align: center; } .cta__line { font-size: 13.5vw; font-weight: 800; letter-spacing: -.06em; line-height: .86; white-space: nowrap; will-change: transform; } .cta__line--img { color: transparent; background: url(/wp-content/uploads/2025/11/Capture-decran-2025-11-04-a-15.04.29-1536x851.avif) 50% var(--by, 40%) / 120% auto; -webkit-background-clip: text; background-clip: text; } .cta__btn { position: absolute; left: 50%; top: 50%; width: 210px; height: 210px; margin: -105px 0 0 -105px; border-radius: 999px; z-index: 2; display: grid; place-items: center; text-decoration: none; } .cta__btn.pull { transition: transform .12s linear; } .cta__btn .core { width: 150px; height: 150px; border-radius: 999px; background: var(--head); color: #120d1c; display: grid; place-items: center; text-align: center; font-weight: 750; font-size: 18px; line-height: 1.15; transition: transform .4s var(--ease); } .cta__btn:hover .core { transform: scale(1.08); } .cta__btn svg { position: absolute; inset: 0; width: 100%; height: 100%; animation: cta-spin 16s linear infinite; } .cta__btn text { font: 600 13px "Bricolage Grotesque"; letter-spacing: .08em; fill: var(--j-ink); } @keyframes cta-spin { to { transform: rotate(360deg); } } /* Mur de vraies miniatures (vidéos montées pour les clients) */ .wall { margin: 64px 0 0; overflow: hidden; transform: rotate(-4deg); width: 116vw; margin-left: -8vw; display: grid; gap: 14px; } .wall__row { display: flex; gap: 14px; will-change: transform; } .wall__row img { flex: none; width: 300px; aspect-ratio: 16 / 9; object-fit: cover; border-radius: 10px; background: var(--s2); } .wall__row img:hover { outline: 2px solid var(--head); } /* Avis : photo du client quand elle existe */ .avis__q cite img { width: 44px; height: 44px; border-radius: 99px; object-fit: cover; } /* Appel final : une vraie vidéo à travers les lettres */ .cta__line--vid { position: relative; display: inline-block; background: var(--j-v); overflow: hidden; } .cta__line--vid video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; } .cta__line--vid span { position: relative; display: block; background: var(--j-bg); color: #000; mix-blend-mode: screen; padding: 0 .04em .02em; } .cta__btn text { font-family: "Bricolage Grotesque", "Helvetica Neue", Arial, sans-serif; } /* Mascotte « tête de lecture » */ .mascot { position: fixed; left: 0; top: 0; z-index: 60; width: 96px; height: 96px; will-change: transform; touch-action: none; } .mascot__body { position: absolute; inset: 0; animation: bob 3.2s ease-in-out infinite; } @keyframes bob { 50% { transform: translateY(-9px); } } .mascot.drag .mascot__body { animation: none; } .mascot svg { width: 96px; height: 96px; overflow: visible; cursor: grab; } .mascot.drag svg { cursor: grabbing; } .mascot .m-all { transform-box: view-box; transform-origin: 50% 90%; animation: squish 3.2s ease-in-out infinite; } @keyframes squish { 0%, 100% { transform: scale(1, 1); } 45% { transform: scale(1.04, .96); } 55% { transform: scale(.97, 1.03); } } .mascot .m-antenna { transform-box: view-box; transform-origin: 50% 26%; animation: sway 2.4s ease-in-out infinite; } @keyframes sway { 50% { transform: rotate(8deg); } } .mascot .m-arm { transform-box: fill-box; transform-origin: 50% 20%; transition: transform .3s; } .mascot.open .m-arm--r, .mascot.talk .m-arm--r { animation: wave .5s ease-in-out 3; } @keyframes wave { 50% { transform: rotate(-35deg) translateY(-3px); } } .mascot .m-mouth { transition: d .2s; } .mascot.talk .m-mouth { animation: talk .18s steps(2) 8; } @keyframes talk { 50% { d: path("M44 68 Q50 78 56 68"); } } .mascot.happy .m-mouth { d: path("M43 67 Q50 79 57 67"); } .mascot .m-shadow { transform-box: fill-box; transform-origin: center; animation: shadow 3.2s ease-in-out infinite; } @keyframes shadow { 50% { transform: scaleX(.8); opacity: .1; } } .mascot .lid { transform-box: fill-box; transform-origin: center; animation: blink 5s infinite; } @keyframes blink { 0%, 94%, 100% { transform: scaleY(1); } 96% { transform: scaleY(.1); } } .mascot__bubble { position: absolute; right: calc(100% + 8px); bottom: 52px; width: max-content; max-width: 250px; padding: 12px 16px; border-radius: 16px 16px 4px 16px; background: #fff; color: var(--j-ink); font-size: 15px; line-height: 1.35; font-weight: 500; box-shadow: 0 14px 30px -12px rgba(18, 13, 28, .35); transform-origin: 100% 100%; transition: opacity .3s ease, transform .4s var(--ease); } .mascot__bubble.swap { opacity: 0; transform: scale(.85); } .mascot__actions { position: absolute; left: 50%; top: 50%; pointer-events: none; } .mascot__actions a, .mascot__actions button { position: absolute; left: -26px; top: -26px; width: 52px; height: 52px; border-radius: 99px; border: 0; display: grid; place-items: center; background: #fff; color: var(--j-v); font: 600 12px "Bricolage Grotesque", sans-serif; text-decoration: none; cursor: pointer; box-shadow: 0 10px 24px -10px rgba(18,13,28,.5); opacity: 0; transform: translate(0, 0) scale(.3); transition: transform .5s var(--ease), opacity .3s ease; } .mascot__actions svg { width: 22px; height: 22px; filter: none; } .mascot.open .mascot__actions { pointer-events: auto; } .mascot.open .mascot__actions > * { opacity: 1; } .mascot.open .mascot__actions > :nth-child(1) { transform: translate(-78px, -48px) scale(1); } .mascot.open .mascot__actions > :nth-child(2) { transform: translate(-92px, 14px) scale(1); transition-delay: .05s; } .mascot.open .mascot__actions > :nth-child(3) { transform: translate(-40px, 66px) scale(1); transition-delay: .1s; } .mascot.open .mascot__bubble { opacity: 0; } .mascot__actions i { position: absolute; top: 100%; margin-top: 4px; font-style: normal; font-size: 11px; color: var(--j-ink); background: #fff; padding: 2px 6px; border-radius: 4px; white-space: nowrap; } .popmail { position: fixed; right: 24px; bottom: 24px; z-index: 70; width: min(380px, calc(100% - 32px)); padding: 24px; border-radius: 20px; background: #fff; color: var(--j-ink); box-shadow: 0 30px 60px -20px rgba(18,13,28,.5); transform: translateY(20px) scale(.96); opacity: 0; pointer-events: none; transition: transform .5s var(--ease), opacity .3s; } .popmail.on { transform: none; opacity: 1; pointer-events: auto; } .popmail h3 { margin: 0 0 4px; font-size: 22px; } .popmail p { margin: 0 0 16px; color: var(--j-muted); font-size: 14px; } .popmail input, .popmail textarea { width: 100%; font: inherit; padding: 12px 14px; margin: 0 0 10px; border-radius: 8px; border: 1px solid #8d80a6; } .popmail button { width: 100%; font: inherit; font-weight: 700; padding: 14px; border: 0; border-radius: 8px; background: var(--j-v); color: #fff; cursor: pointer; } .popmail .x { position: absolute; top: 12px; right: 12px; width: 32px; height: 32px; padding: 0; background: var(--j-s2); color: var(--j-ink); border-radius: 99px; } .mascot.side-left .mascot__bubble { right: auto; left: calc(100% + 8px); border-radius: 16px 16px 16px 4px; transform-origin: 0 100%; } .mascot.side-left .mascot__actions > :nth-child(1) { transform: translate(78px, -48px) scale(1); } .mascot.side-left .mascot__actions > :nth-child(2) { transform: translate(92px, 14px) scale(1); } .mascot.side-left .mascot__actions > :nth-child(3) { transform: translate(40px, 66px) scale(1); } .mascot:not(.open).side-left .mascot__actions > * { transform: scale(.3); } @media (max-width: 820px) { .mascot__bubble { max-width: 190px; font-size: 13px; } } @media (prefers-reduced-motion: reduce) { .mascot__body, .mascot .lid { animation: none; } } @media (max-width: 820px) { .hero .wrap, .avis .ce-pin { grid-template-columns: 1fr; gap: 24px; } .tiles { grid-template-columns: 1fr 1fr; grid-auto-rows: 150px; } .flip__face ul { grid-template-columns: 1fr; } .offres__grid { grid-template-columns: 1fr; } .avis__stage { height: 56vh; } .cta__btn { width: 170px; height: 170px; margin: -85px 0 0 -85px; } .cta__btn .core { width: 120px; height: 120px; font-size: 15px; } } @media (prefers-reduced-motion: reduce) { .flip, .avis, .steps { height: auto !important; } .ce-pin { position: relative; height: auto; } .flip__face--back { position: relative; transform: none; } } /* Hero : cadre vidéo Vimeo (façade : le lecteur ne charge qu'au clic) */ .hero .frame { position: relative; } .hero .frame { cursor: pointer; } /* Bouton « verre liquide » : posé en bas à gauche pour ne pas masquer le visage */ .hero .frame .ce-frame__play { position: absolute; inset: auto auto 18px 18px; margin: 0; width: auto; height: auto; display: inline-flex; align-items: center; gap: 0; padding: 7px; border-radius: 999px; color: #fff; font-family: inherit; font-size: 15px; font-weight: 600; line-height: 1; cursor: pointer; background: linear-gradient(135deg, rgba(155, 123, 255, .42), rgba(109, 66, 245, .16) 55%, rgba(255, 255, 255, .08)); border: 1px solid rgba(255, 255, 255, .28); -webkit-backdrop-filter: blur(14px) saturate(170%); backdrop-filter: blur(14px) saturate(170%); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .45), inset 0 -8px 18px rgba(109, 66, 245, .25), 0 14px 30px -14px rgba(20, 8, 50, .8); animation: glass-bounce 3.6s var(--ease) infinite; transition: scale .5s var(--ease), translate .5s var(--ease), padding .5s var(--ease), gap .5s var(--ease), background .4s; } .hero .frame .ce-frame__play::before, .hero .frame .ce-frame__play::after { content: ""; position: absolute; inset: -1px; border-radius: inherit; border: 1.5px solid rgba(180, 155, 255, .6); pointer-events: none; animation: glass-wave 3.6s ease-out infinite; opacity: 0; } .hero .frame .ce-frame__play::after { animation-delay: .45s; } .hero .frame .ce-frame__ico { position: relative; width: 38px; height: 38px; border-radius: 99px; display: grid; place-items: center; background: linear-gradient(145deg, #9b7bff, #6d42f5); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .5), 0 4px 12px -2px rgba(109, 66, 245, .7); } .hero .frame .ce-frame__ico svg { width: 15px; height: 15px; margin-left: 2px; } .hero .frame .cap { position: static; display: block; max-width: 0; overflow: hidden; opacity: 0; font-size: 15px; font-weight: 600; text-shadow: 0 1px 8px rgba(0, 0, 0, .35); white-space: nowrap; transition: max-width .55s var(--ease), opacity .3s; } /* Au survol : le bouton grandit en douceur et déplie son texte */ .hero .frame:hover .ce-frame__play, .hero .frame .ce-frame__play:focus-visible { scale: 1.05; translate: 0 -3px; gap: 12px; padding-right: 20px; background: linear-gradient(135deg, rgba(155, 123, 255, .6), rgba(109, 66, 245, .3) 55%, rgba(255, 255, 255, .12)); } .hero .frame:hover .cap, .hero .frame .ce-frame__play:focus-visible .cap { max-width: 260px; opacity: 1; transition: max-width .55s var(--ease), opacity .4s .12s; } @media (hover: none) { .hero .frame .ce-frame__play { gap: 12px; padding-right: 20px; } .hero .frame .cap { max-width: 260px; opacity: 1; } } @keyframes glass-bounce { 0%, 62%, 100% { transform: none; } 70% { transform: translateY(-5px) scale(1.03, .97); } 78% { transform: translateY(0) scale(.98, 1.02); } 86% { transform: translateY(-2px); } } @keyframes glass-wave { 0%, 60% { transform: scale(1); opacity: 0; } 64% { opacity: .9; } 100% { transform: scale(1.18, 1.6); opacity: 0; } } @media (max-width: 600px) { .hero .frame .ce-frame__play { inset: auto auto 12px 12px; } .hero .frame .ce-frame__ico { width: 32px; height: 32px; } .hero .frame .cap { font-size: 13px; } } @media (prefers-reduced-motion: reduce) { .hero .frame .ce-frame__play, .hero .frame .ce-frame__play::before, .hero .frame .ce-frame__play::after { animation: none; } } .hero .frame.is-playing .ce-frame__play, .hero .frame.is-playing .cap, .hero .frame.is-playing img { display: none; } .hero .frame iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; } .hero__status { display: inline-flex; align-items: center; gap: 8px; margin: 0 0 22px; padding: 5px 12px 5px 10px; border: 1px solid var(--line); border-radius: 99px; font-size: 14px; font-weight: 600; } .hero__status::before { content: ""; width: 8px; height: 8px; border-radius: 99px; background: #4fd18b; } .hero__proof { margin-top: 12px; color: var(--muted); font-size: 15px; } /* Déroulé : cartes empilées */ .steps { background: var(--j-bg); color: var(--j-ink); padding: 110px 0 16vh; } .steps .lead { color: var(--j-muted); } .step { position: sticky; top: calc(14vh + var(--i) * 22px); height: 58vh; margin-bottom: 8vh; border-radius: 28px; padding: clamp(28px, 4vw, 56px); display: grid; grid-template-columns: auto 1fr; gap: 40px; align-items: end; transform-origin: 50% 0; color: #fff; } .step:nth-of-type(1) { background: #2a1f4d; } .step:nth-of-type(2) { background: #3b2a78; } .step:nth-of-type(3) { background: #5b2ee0; } .step:nth-of-type(4) { background: #120d1c; } .step b { font-size: clamp(90px, 14vw, 210px); line-height: .8; letter-spacing: -.06em; font-weight: 800; } .step:nth-of-type(4) b { color: var(--head); } .step h3 { font-size: clamp(28px, 3vw, 44px); margin: 0 0 12px; letter-spacing: -.02em; } .step p { margin: 0; font-size: 19px; opacity: .85; max-width: 36ch; } /* Qui suis-je */ .about { padding: 120px 0; } .about .wrap { display: grid; grid-template-columns: .9fr 1.1fr; gap: 64px; align-items: center; } .about__photo { border-radius: 24px; overflow: hidden; aspect-ratio: 4 / 5; background: var(--j-s2); } .about__photo img { width: 100%; height: 100%; object-fit: cover; } .about p { font-size: 19px; line-height: 1.6; color: var(--j-muted); max-width: 60ch; } .about p.first { color: var(--j-ink); font-size: 21px; } .about__nums { display: flex; gap: 40px; margin: 28px 0; } .about__nums b { display: block; font-size: 48px; letter-spacing: -.04em; color: var(--j-v); line-height: 1; } .about__nums span { color: var(--j-muted); font-size: 15px; } .about a.link { color: var(--j-v); font-weight: 600; } .about a.link + a.link { margin-left: 22px; } /* FAQ */ .faq { padding: 60px 0 120px; } .faq .wrap { display: grid; grid-template-columns: 1fr 1.6fr; gap: 64px; } .faq details { border-bottom: 1px solid var(--j-line); } .faq details:first-child { border-top: 1px solid var(--j-line); } .faq summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; gap: 24px; padding: 24px 0; font-size: 21px; font-weight: 650; letter-spacing: -.01em; } .faq summary::-webkit-details-marker { display: none; } .faq summary::after { content: "+"; font-size: 28px; line-height: 1; color: var(--j-v); transition: transform .3s var(--ease); } .faq details[open] summary::after { transform: rotate(45deg); } .faq details p { margin: 0 0 24px; color: var(--j-muted); font-size: 17px; max-width: 60ch; } /* Derniers articles (bloc WordPress) */ .blog { padding: 60px 0 120px; } .blog .head { display: flex; justify-content: space-between; align-items: end; gap: 24px; margin-bottom: 36px; } .blog .head a { color: var(--j-v); font-weight: 600; } .blog .wp-block-latest-posts { display: grid !important; grid-template-columns: repeat(3, 1fr); gap: 24px; padding: 0; margin: 0; list-style: none; } .blog .wp-block-latest-posts li { margin: 0 !important; width: auto !important; } .blog .wp-block-latest-posts__featured-image { border-radius: 14px; overflow: hidden; margin-bottom: 14px; } .blog .wp-block-latest-posts__featured-image img { width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; transition: transform 1.2s var(--ease); } .blog li:hover img { transform: scale(1.05); } .blog .wp-block-latest-posts__post-title { font-size: 20px; font-weight: 650; line-height: 1.3; color: var(--j-ink); text-decoration: none; letter-spacing: -.01em; } .blog .wp-block-latest-posts__post-date { display: block; color: var(--j-muted); font-size: 14px; margin-top: 6px; } /* Contact : appel final + formulaire + coordonnées */ .contact h2 { margin: 0; font-weight: 800; } .contact__grid { display: grid; grid-template-columns: 1fr 1.4fr; gap: 56px; padding: 20px 0 140px; } .contact__info p { color: var(--j-muted); font-size: 18px; } .contact__info a { display: block; color: var(--j-ink); font-size: 20px; font-weight: 650; margin: 10px 0; text-decoration: none; } .contact__info a:hover { color: var(--j-v); } .wpcf7 label { display: grid; gap: 8px; font-size: 14px; font-weight: 600; margin-bottom: 14px; color: var(--j-ink); } .wpcf7 input:not([type=submit]), .wpcf7 select, .wpcf7 textarea { width: 100%; font: inherit; font-size: 16px; padding: 14px 16px; border-radius: 8px; border: 1px solid #8d80a6; background: #fff; color: var(--j-ink); box-sizing: border-box; } .wpcf7 [type=submit] { font: inherit; font-weight: 700; font-size: 18px; padding: 18px 32px; border: 0; border-radius: 8px; background: var(--j-v); color: #fff; cursor: pointer; width: 100%; } .wpcf7 p { margin: 0; } .wpcf7-response-output { margin: 12px 0 0 !important; border-radius: 8px; } .popmail .wpcf7 label { margin-bottom: 8px; } .popmail .wpcf7 input:not([type=submit]), .popmail .wpcf7 select, .popmail .wpcf7 textarea { padding: 10px 12px; font-size: 15px; } .popmail .wpcf7 textarea { height: 80px; } .popmail { max-height: calc(100vh - 48px); overflow: auto; } /* Pied de page du thème sur fond clair */ .acc-foot .ce-footer { background: var(--bg); color: var(--ink); } .ce-wordmark { margin: 0; font-weight: 800; font-size: clamp(48px, 11.8vw, 196px); line-height: .82; letter-spacing: -.055em; color: var(--s2); white-space: nowrap; overflow: hidden; user-select: none; padding-top: .1em; } @media (max-width: 820px) { .step { grid-template-columns: 1fr; height: 52vh; } .about .wrap, .faq .wrap, .contact__grid { grid-template-columns: 1fr; gap: 32px; } .blog .wp-block-latest-posts { grid-template-columns: 1fr; } .tile--big { grid-column: span 2; grid-row: span 1; } } .cta__lines { margin: 0; text-align: center; font-weight: 800; } .cta__line { display: block; } .cta__line--vid span { display: block; } .contact .cta { min-height: 100vh; } /* La mascotte remplace la bulle WhatsApp sur l accueil */ #ce-wa-wrapper { display: none !important; } /* Les titres prennent la couleur de leur monde (sombre ou clair), pas celle imposée par le thème */ .acc :is(h1, h2, h3), .acc-foot :is(h2, h3) { color: inherit; } .flip__face--front h3 { color: #6e6090; } .hero, .proj { background: var(--bg); color: var(--ink); } .tier.feat a.btn { color: var(--j-v); background: #fff; } .tier.feat a.btn:hover { background: var(--j-soft); } .tiles { grid-auto-flow: dense; } /* Guillemet d'ouverture typographique, révélé par un balayage */ .avis__mark { position: absolute; left: -8px; top: -70px; width: auto; height: auto; font-size: 180px; line-height: 1; font-weight: 800; color: var(--j-v); clip-path: inset(0 calc(100% - var(--m, 0) * 100%) 0 0); } .tier .price .ht { font-size: .5em; font-weight: 600; letter-spacing: 0; opacity: .8; } .offres__note { position: relative; margin: 48px 0 0; text-align: center; color: var(--j-muted); font-size: 15px; } .tier .price .from { display: block; font-size: 15px; font-weight: 600; letter-spacing: 0; opacity: .75; margin-bottom: 2px; color: inherit; background: none; padding: 0; } .tier .price .amt { white-space: nowrap; } /* ---------- Formulaire de devis compact, en 3 temps ---------- */ .contact__grid { grid-template-columns: 1fr minmax(0, 520px); justify-content: space-between; align-items: start; } .wpcf7 form { display: grid; gap: 6px; } .wpcf7 .qf-step { padding: 18px 20px; border-radius: 16px; background: #fff; border: 1px solid var(--j-line); } .qf-q { display: flex; align-items: center; gap: 10px; margin: 0 0 12px !important; font-size: 16px; font-weight: 650; color: var(--j-ink); } .qf-q b { display: grid; place-items: center; width: 24px; height: 24px; border-radius: 99px; background: var(--j-soft); color: var(--j-v); font-size: 13px; } .wpcf7 .wpcf7-radio { display: flex; flex-wrap: wrap; gap: 8px; } .wpcf7 .wpcf7-list-item { margin: 0; } .wpcf7 .wpcf7-list-item label { position: relative; display: block; margin: 0; cursor: pointer; } .wpcf7 .wpcf7-list-item input { position: absolute; left: 0; top: 0; width: 1px; height: 1px; margin: 0; opacity: 0; pointer-events: none; } .wpcf7 .wpcf7-list-item-label { display: inline-block; padding: 9px 14px; border-radius: 8px; border: 1px solid var(--j-line); background: var(--j-bg); font-size: 14px; font-weight: 600; color: var(--j-ink); transition: background-color .2s, border-color .2s, color .2s, transform .2s; } .wpcf7 .wpcf7-list-item label:hover .wpcf7-list-item-label { border-color: var(--j-v); } .wpcf7 .wpcf7-list-item input:checked + .wpcf7-list-item-label { background: var(--j-v); border-color: var(--j-v); color: #fff; } .wpcf7 .wpcf7-list-item input:focus-visible + .wpcf7-list-item-label { box-shadow: 0 0 0 3px #b39bff; } .qf-row { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-bottom: 8px; } .wpcf7 .qf-row input, .wpcf7 .qf-more input, .wpcf7 .qf-more textarea { padding: 11px 14px; font-size: 15px; border-radius: 8px; } .wpcf7 .qf-step label { margin: 0; } .qf-more { margin: 0 0 12px; } .qf-more summary { cursor: pointer; font-size: 14px; font-weight: 600; color: var(--j-v); list-style: none; } .qf-more summary::-webkit-details-marker { display: none; } .qf-more[open] summary { margin-bottom: 8px; } .qf-more .wpcf7-form-control-wrap { display: block; margin-bottom: 8px; } .wpcf7 .qf-step [type=submit] { padding: 14px 24px; font-size: 16px; } .qf-note { margin: 10px 0 0 !important; text-align: center; font-size: 13px; color: var(--j-muted); } .wpcf7-not-valid-tip { font-size: 13px; margin-top: 4px; color: #b3261e; } /* Déploiement progressif (seulement si le script tourne ; sinon tout reste visible) */ .qf-js .qf-step--2, .qf-js .qf-step--3 { display: grid; grid-template-rows: 0fr; opacity: 0; padding-top: 0; padding-bottom: 0; border-width: 0; transition: grid-template-rows .5s var(--ease), opacity .4s ease, padding .5s var(--ease); } .qf-js .qf-step--2 > *, .qf-js .qf-step--3 > * { min-height: 0; overflow: hidden; } .qf-js .qf-step--2 { grid-template-rows: 0fr; } .qf-js .qf-step.is-open { grid-template-rows: auto 1fr; opacity: 1; padding-top: 18px; padding-bottom: 18px; border-width: 1px; } .qf-js .qf-step--2.is-open, .qf-js .qf-step--3.is-open { grid-template-rows: auto; } .qf-js :is(.qf-step--2, .qf-step--3):not(.is-open) > * { max-height: 0; } .qf-js .qf-step.is-open > * { max-height: 600px; transition: max-height .6s var(--ease); } .popmail .wpcf7 .qf-step { padding: 14px 16px; } @media (max-width: 820px) { .contact__grid { grid-template-columns: 1fr; } .qf-row { grid-template-columns: 1fr; } } /* ---------- Coordonnées : cases avec icône, surlignage qui suit la souris ---------- */ .cards { position: relative; display: grid; gap: 10px; margin-top: 24px; } .card { position: relative; z-index: 1; display: flex; align-items: center; gap: 16px; padding: 14px 16px; border-radius: 16px; border: 1px solid var(--j-line); background: #fff; text-decoration: none; color: var(--j-ink); transition: color .3s ease, border-color .3s ease, background-color .3s ease; } .card small { display: block; font-size: 13px; color: var(--j-muted); transition: color .3s; } .card b { font-size: 17px; font-weight: 650; } .card__ico { flex: none; display: grid; place-items: center; width: 44px; height: 44px; border-radius: 12px; background: var(--j-soft); color: var(--j-v); transition: background-color .3s, color .3s, transform .5s var(--ease); } .card__ico svg { width: 22px; height: 22px; } .cards__hl { position: absolute; z-index: 0; left: 0; top: 0; width: 0; height: 0; border-radius: 16px; background: var(--j-v); opacity: 0; pointer-events: none; transition: transform .45s var(--ease), width .45s var(--ease), height .45s var(--ease), opacity .3s ease; } .cards.is-hover .cards__hl { opacity: 1; } .cards.is-hover .card.is-on { background: transparent; border-color: transparent; color: #fff; } .cards.is-hover .card.is-on small { color: rgba(255,255,255,.75); } .cards.is-hover .card.is-on .card__ico { background: rgba(255,255,255,.18); color: #fff; transform: rotate(-8deg) scale(1.08); } @keyframes card-in { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } } .cards.is-in .card { animation: card-in .7s var(--ease) both; } .cards.is-in .card:nth-of-type(2) { animation-delay: .08s; } .cards.is-in .card:nth-of-type(3) { animation-delay: .16s; } @media (prefers-reduced-motion: reduce) { .cards.is-in .card { animation: none; } .cards__hl { transition: none; } } .contact__info a.card { display: flex; margin: 0; font-size: inherit; color: var(--j-ink); } .cards.is-hover .contact__info a.card.is-on, .contact__info .cards.is-hover a.card.is-on { color: #fff; } /* ---------- Projets : cases plus petites qui « poppent » dans le désordre ---------- */ .tiles { grid-template-columns: repeat(5, 1fr); grid-auto-rows: 150px; gap: 14px; perspective: 1200px; } .tile__txt b { font-size: 16px; } .tile--big .tile__txt b { font-size: 22px; } .tile__txt small { font-size: 12px; } .tile--cta b { font-size: 17px; } @keyframes tile-pop { 0% { opacity: 0; transform: translate3d(0, 30px, -260px) rotateX(38deg) scale(.4); } 55% { opacity: 1; transform: translate3d(0, -16px, 40px) rotateX(-6deg) scale(1.08); } 75% { transform: translate3d(0, 4px, 0) rotateX(2deg) scale(.97); } 100% { opacity: 1; transform: none; } } @keyframes tile-wave { 0% { box-shadow: 0 0 0 0 rgba(155, 123, 255, .55), 0 0 0 0 rgba(155, 123, 255, .35); } 100% { box-shadow: 0 0 0 18px rgba(155, 123, 255, 0), 0 0 0 36px rgba(155, 123, 255, 0); } } .tiles.pop-ready .tile { opacity: 0; } .tiles.pop-in .tile { animation: tile-pop .9s cubic-bezier(.34, 1.56, .64, 1) both, tile-wave .9s ease-out both; animation-delay: var(--pd, 0s), calc(var(--pd, 0s) + .55s); } @media (max-width: 820px) { .tiles { grid-template-columns: 1fr 1fr; grid-auto-rows: 130px; } } /* ---------- Avis : défilement libre, plus de blocage ---------- */ .avis { height: auto !important; padding: 110px 0 60px; } .avis .ce-pin { position: relative; top: auto; height: auto; overflow: visible; align-items: start; } .avis__side { position: sticky; top: 130px; } .avis__stage { height: auto; display: grid; gap: 72px; padding-top: 90px; } .avis__q { position: relative; top: auto; transform: none; } .avis__bar { display: none; } .avis__q .line > span { transition-delay: 0s !important; } @media (max-width: 820px) { .avis__side { position: static; } .avis__stage { padding-top: 60px; gap: 48px; } } .avis__q p { font-size: clamp(22px, 2.3vw, 32px); line-height: 1.25; margin-bottom: 18px; } .avis__stage { gap: 56px; } /* ---------- Hero rééquilibré ---------- */ .hero .wrap { grid-template-columns: 1fr 1.1fr; align-items: center; } .hero__media { display: grid; gap: 18px; justify-items: start; } .hero__media .frame { width: 100%; } .hero__under { display: grid; gap: 4px; padding-left: 4px; } .hero__under small { margin: 0; color: var(--muted); font-size: 14px; display: flex; align-items: center; gap: 8px; } .hero__under small::before { content: ""; width: 6px; height: 6px; border-radius: 99px; background: var(--head); } .hero__under .hero__proof { margin: 0; font-size: 15px; color: var(--muted); } .hero__text p { margin-bottom: 36px; } /* ---------- Badge « Disponible » vivant + conversation WhatsApp ---------- */ .wa { position: relative; z-index: 5; } @keyframes wa-float { 50% { transform: translateY(-5px); } } @keyframes wa-aura { 0% { box-shadow: 0 0 0 0 rgba(79, 209, 139, .45), 0 0 24px 2px rgba(79, 209, 139, .18); } 70% { box-shadow: 0 0 0 12px rgba(79, 209, 139, 0), 0 0 30px 6px rgba(79, 209, 139, .22); } 100% { box-shadow: 0 0 0 0 rgba(79, 209, 139, 0), 0 0 24px 2px rgba(79, 209, 139, .18); } } .wa__badge { display: inline-flex; align-items: center; gap: 10px; padding: 9px 16px 9px 12px; border-radius: 99px; border: 1px solid rgba(79, 209, 139, .45); background: rgba(79, 209, 139, .08); color: var(--ink); font: 600 14px/1.2 "Bricolage Grotesque", sans-serif; cursor: pointer; animation: wa-float 3.4s ease-in-out infinite, wa-aura 2.6s ease-out infinite; } .wa__badge::before { content: ""; width: 8px; height: 8px; border-radius: 99px; background: #4fd18b; box-shadow: 0 0 10px #4fd18b; } .wa__badge::after { content: "· m’écrire"; color: #4fd18b; font-weight: 600; opacity: 0; max-width: 0; overflow: hidden; white-space: nowrap; transition: opacity .3s, max-width .4s var(--ease); } .wa:hover .wa__badge::after, .wa.open .wa__badge::after { opacity: 1; max-width: 90px; } .wa__panel { position: absolute; left: 0; top: calc(100% + 12px); width: 340px; border-radius: 18px; overflow: hidden; background: #0b141a; color: #e9edef; box-shadow: 0 30px 60px -20px rgba(0, 0, 0, .8); transform-origin: 24px 0; transform: translateY(-8px) scale(.92); opacity: 0; pointer-events: none; transition: transform .45s var(--ease), opacity .25s ease; } .wa.open .wa__panel { transform: none; opacity: 1; pointer-events: auto; } .wa__head { display: flex; align-items: center; gap: 12px; padding: 12px 14px; background: #1f2c34; } .wa__av { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 99px; background: var(--vs); color: #fff; font-weight: 800; } .wa__head b { display: block; font-size: 15px; } .wa__head small { font-size: 12px; color: #8696a0; } .wa__body { padding: 14px; background: #0b141a; display: grid; gap: 10px; } .wa__in { margin: 0; justify-self: start; max-width: 85%; padding: 8px 12px; border-radius: 0 10px 10px 10px; background: #202c33; font-size: 14px; line-height: 1.4; } .wa__label { font-size: 12px; color: #8696a0; } .wa__body textarea { width: 100%; box-sizing: border-box; resize: none; font: inherit; font-size: 14px; line-height: 1.4; padding: 10px 12px; border-radius: 10px 0 10px 10px; border: 0; background: #005c4b; color: #e9edef; } .wa__body textarea:focus { outline: 2px solid #25d366; } .wa__send { display: flex; justify-content: center; align-items: center; gap: 8px; margin: 0 14px 14px; padding: 12px; border-radius: 99px; background: #25d366; color: #0b141a; font-weight: 700; text-decoration: none; font-size: 15px; } .wa__send svg { width: 18px; height: 18px; } .wa__send:hover { background: #1fbe5a; } @media (prefers-reduced-motion: reduce) { .wa__badge { animation: none; } } @media (max-width: 820px) { .wa__panel { width: min(340px, calc(100vw - 32px)); } .hero__media { order: 2; } } body.wa-open .mascot { opacity: 0; pointer-events: none; transition: opacity .3s; } /* ---------- Badge « Disponible » : à droite, plus haut, ondes en pulsation ---------- */ .hero__media .wa { justify-self: end; margin-top: -56px; } .wa__panel { left: auto; right: 0; transform-origin: calc(100% - 24px) 0; } .wa::before, .wa::after { content: ""; position: absolute; left: 0; top: 0; width: 100%; height: 42px; border-radius: 99px; border: 2px solid rgba(79, 209, 139, .55); pointer-events: none; animation: wa-ring 2.4s cubic-bezier(.2, .6, .3, 1) infinite; } .wa::after { animation-delay: 1.2s; } @keyframes wa-ring { 0% { transform: scale(1); opacity: .9; } 100% { transform: scale(1.35, 1.9); opacity: 0; } } .wa.open::before, .wa.open::after { animation-play-state: paused; opacity: 0; } @media (prefers-reduced-motion: reduce) { .wa::before, .wa::after { animation: none; opacity: 0; } } @media (max-width: 820px) { .hero__media .wa { justify-self: start; margin-top: 0; } .wa__panel { left: 0; right: auto; } } /* ---------- Mode gourmand ---------- */ .apple { position: fixed; left: 18px; bottom: 22px; z-index: 61; display: flex; align-items: center; gap: 8px; padding: 8px 14px 8px 8px; border-radius: 99px; border: 1px solid var(--line); background: rgba(27, 20, 41, .85); color: var(--ink); font: 600 13px "Bricolage Grotesque", sans-serif; cursor: pointer; backdrop-filter: blur(8px); animation: apple-float 3s ease-in-out infinite; } .apple svg { width: 30px; height: 30px; transition: transform .4s var(--ease); } .apple:hover svg { transform: rotate(-12deg) scale(1.1); } .apple[aria-pressed="true"] { background: #ff5d6c; border-color: #ff5d6c; color: #fff; } .apple[aria-pressed="true"] svg { animation: apple-wiggle .6s ease-in-out infinite alternate; } @keyframes apple-float { 50% { transform: translateY(-6px); } } @keyframes apple-wiggle { from { transform: rotate(-10deg); } to { transform: rotate(10deg); } } .neg .apple, body.neg .apple { background: rgba(255, 255, 255, .9); color: var(--j-ink); border-color: var(--j-line); } body.eat-mode .drop-hover { outline: 3px dashed #ff5d6c !important; outline-offset: 4px; } /* La mascotte grossit, verdit, transpire */ .mascot svg { transform-origin: 50% 88%; transform: scale(var(--fat, 1), var(--fatY, 1)); } .mascot .m-lump { transform-box: fill-box; transform-origin: center; } .mascot.chomp .m-mouth { animation: chomp .16s steps(2) infinite; } @keyframes chomp { 50% { d: path("M42 66 Q50 82 58 66"); } } .mascot.sick .mascot__body { animation: queasy 2.8s ease-in-out infinite; } @keyframes queasy { 0%, 100% { transform: translateY(0) rotate(0); } 50% { transform: translateY(-4px) rotate(-3deg); } } @keyframes sick-wobble { 25% { transform: rotate(-5deg) translateY(-3px); } 75% { transform: rotate(5deg) translateY(2px); } } .mascot.sick .lid { animation: none; transform: scaleY(.62); transform-box: fill-box; transform-origin: 50% 30%; } .mascot.sick ellipse[fill="#ff8fb3"] { fill: #9fd67a; } @keyframes dizzy { to { rotate: 360deg; } } .mascot.sick .mascot__body::after { content: ""; position: absolute; right: 18px; top: 22px; width: 8px; height: 12px; border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%; background: #7fd3ff; animation: sweat 1.6s ease-in infinite; } @keyframes sweat { 0% { opacity: 0; transform: translateY(0); } 30% { opacity: 1; } 100% { opacity: 0; transform: translateY(16px); } } /* ---------- Menu de la mascotte : lisible, étiquettes à côté, couleur par canal ---------- */ .mascot__actions a, .mascot__actions button { width: 48px; height: 48px; left: -24px; top: -24px; transition: transform .5s var(--ease), opacity .3s ease, background-color .25s ease, color .25s ease, box-shadow .25s ease; } .mascot.open .mascot__actions > :nth-child(1) { transform: translate(-92px, -64px) scale(1); } .mascot.open .mascot__actions > :nth-child(2) { transform: translate(-112px, 0) scale(1); } .mascot.open .mascot__actions > :nth-child(3) { transform: translate(-92px, 64px) scale(1); } .mascot.side-left.open .mascot__actions > :nth-child(1) { transform: translate(92px, -64px) scale(1); } .mascot.side-left.open .mascot__actions > :nth-child(2) { transform: translate(112px, 0) scale(1); } .mascot.side-left.open .mascot__actions > :nth-child(3) { transform: translate(92px, 64px) scale(1); } .mascot__actions i { top: 50%; right: calc(100% + 10px); left: auto; margin: 0; transform: translateY(-50%); padding: 5px 10px; border-radius: 8px; font-size: 13px; font-weight: 650; background: #fff; color: var(--j-ink); box-shadow: 0 6px 16px -8px rgba(18,13,28,.45); pointer-events: none; } .mascot.side-left .mascot__actions i { right: auto; left: calc(100% + 10px); } .mascot__actions svg { transition: transform .3s var(--ease); } .mascot__actions > :hover svg, .mascot__actions > :focus-visible svg { transform: scale(1.15); } .mascot__actions > :nth-child(1):hover, .mascot__actions > :nth-child(1):focus-visible { background: #2f7cf6; color: #fff; box-shadow: 0 0 0 6px rgba(47, 124, 246, .22), 0 10px 24px -10px rgba(47,124,246,.8); } .mascot__actions > :nth-child(2):hover, .mascot__actions > :nth-child(2):focus-visible { background: var(--vs); color: #fff; box-shadow: 0 0 0 6px rgba(109, 66, 245, .22), 0 10px 24px -10px rgba(109,66,245,.8); } .mascot__actions > :nth-child(3):hover, .mascot__actions > :nth-child(3):focus-visible { background: #25d366; color: #fff; box-shadow: 0 0 0 6px rgba(37, 211, 102, .22), 0 10px 24px -10px rgba(37,211,102,.8); } .mascot__actions > :nth-child(1) { color: #2f7cf6; } .mascot__actions > :nth-child(3) { color: #1faa55; } /* ---------- Mode « Me nourrir » (bouton caché dans le menu de la mascotte) ---------- */ .apple { display: none !important; } .mascot.open .mascot__actions > :nth-child(1) { transform: translate(-86px, -92px) scale(1); } .mascot.open .mascot__actions > :nth-child(2) { transform: translate(-112px, -32px) scale(1); } .mascot.open .mascot__actions > :nth-child(3) { transform: translate(-106px, 30px) scale(1); } .mascot.open .mascot__actions > :nth-child(4) { transform: translate(-72px, 86px) scale(1); transition-delay: .15s; } .mascot.side-left.open .mascot__actions > :nth-child(1) { transform: translate(86px, -92px) scale(1); } .mascot.side-left.open .mascot__actions > :nth-child(2) { transform: translate(112px, -32px) scale(1); } .mascot.side-left.open .mascot__actions > :nth-child(3) { transform: translate(106px, 30px) scale(1); } .mascot.side-left.open .mascot__actions > :nth-child(4) { transform: translate(72px, 86px) scale(1); } .mascot__actions > :nth-child(4) { color: #ff5d6c; } .mascot__actions > :nth-child(4):hover, .mascot__actions > :nth-child(4):focus-visible, .mascot__actions > :nth-child(4)[aria-pressed="true"] { background: #ff5d6c; color: #fff; box-shadow: 0 0 0 6px rgba(255, 93, 108, .22), 0 10px 24px -10px rgba(255,93,108,.8); } body.eat-mode .mascot svg { cursor: grab; } body:not(.eat-mode) .mascot svg { cursor: pointer; } body.eat-mode .drop-hover { outline: 3px dashed #ff5d6c !important; outline-offset: 4px; } .crumb { position: fixed; left: 0; top: 0; z-index: 59; width: 9px; height: 7px; margin: -4px 0 0 -4px; border-radius: 3px; pointer-events: none; box-shadow: 0 0 0 1px rgba(0,0,0,.08); } .mascot.barf .m-mouth { d: path("M40 64 Q50 86 60 64 Z"); fill: #7ecf4f; } .mascot.barf .mascot__body { animation: sick-wobble .3s ease-in-out infinite; } /* clics d'info : on montre que les éléments « parlent » à la mascotte */ /* ---------- En-tête : transparent en haut, capsule de verre au défilement ---------- */ .acc-header { mix-blend-mode: normal; color: var(--ink); transition: transform .5s var(--ease); } .acc-header .wrap { position: relative; transition: width .6s var(--ease), height .5s var(--ease), margin .5s var(--ease), padding .5s var(--ease), background-color .4s ease, border-color .4s ease, border-radius .5s var(--ease), box-shadow .4s ease; border: 1px solid transparent; border-radius: 0; } .acc-header.is-pill .wrap { width: min(980px, calc(100% - 24px)); height: 58px; margin-top: 12px; padding: 0 8px 0 22px; border-radius: 999px; background: rgba(18, 13, 28, .72); border-color: rgba(155, 123, 255, .22); -webkit-backdrop-filter: blur(16px) saturate(140%); backdrop-filter: blur(16px) saturate(140%); box-shadow: 0 18px 40px -22px rgba(0, 0, 0, .7); overflow: hidden; } .acc-header.is-hidden { transform: translateY(-120%); } .acc-header .logo { transition: font-size .4s var(--ease); } .acc-header.is-pill .logo { font-size: 18px; } .acc-header .go { padding: 10px 18px; border-radius: 999px; background: var(--vs); color: #fff; font-size: 15px; transition: background-color .25s, transform .3s var(--ease); } .acc-header .go:hover { background: #7d56ff; transform: translateY(-1px); } .acc-header__prog { position: absolute; left: 22px; right: 22px; bottom: 0; height: 2px; background: var(--head); transform-origin: left; transform: scaleX(var(--ap, 0)); opacity: 0; transition: opacity .3s; } .acc-header.is-pill .acc-header__prog { opacity: 1; } .acc-header nav { gap: 6px; } .acc-header nav a { display: flex; align-items: center; gap: 7px; padding: 8px 12px; border-radius: 999px; font-size: 15px; transition: background-color .25s, color .25s; } .acc-header nav a:hover { background: rgba(155, 123, 255, .16); color: #fff; } .ni { width: 18px; height: 18px; color: var(--violet); overflow: visible; } /* animations au survol, une par icône */ .ni .clap { transform-box: fill-box; transform-origin: 0% 100%; } nav a:hover .ni--clap .clap { animation: clap .5s ease-in-out; } @keyframes clap { 30% { transform: rotate(-22deg); } 60% { transform: rotate(3deg); } 100% { transform: none; } } .ni .tag { transform-box: view-box; transform-origin: 7.5px 7.5px; } nav a:hover .ni--tag .tag { animation: swing .8s ease-in-out; } @keyframes swing { 20% { transform: rotate(14deg); } 45% { transform: rotate(-10deg); } 70% { transform: rotate(5deg); } 100% { transform: none; } } .ni .head { transform-box: fill-box; transform-origin: center; } nav a:hover .ni--me .head { animation: nod .7s ease-in-out; } @keyframes nod { 30% { transform: translateY(1.6px); } 60% { transform: translateY(-1px); } 100% { transform: none; } } .ni .star { transform-box: fill-box; transform-origin: center; transition: fill .3s, color .3s; } nav a:hover .ni--star .star { animation: spin .7s var(--ease); fill: var(--head); color: var(--head); } @keyframes spin { from { transform: rotate(-72deg) scale(.7); } to { transform: none; } } .ni .pen { transform-box: fill-box; transform-origin: 0% 100%; } .ni .line { stroke-dasharray: 8; stroke-dashoffset: 8; } nav a:hover .ni--pen .pen { animation: scribble .6s ease-in-out; } nav a:hover .ni--pen .line { animation: draw-line .6s ease forwards; } @keyframes scribble { 25% { transform: translate(1px, -1px) rotate(-6deg); } 50% { transform: translate(2px, 0) rotate(4deg); } 75% { transform: translate(3px, -1px) rotate(-4deg); } } @keyframes draw-line { to { stroke-dashoffset: 0; } } @media (prefers-reduced-motion: reduce) { .ni * { animation: none !important; } } @media (max-width: 900px) { .acc-header.is-pill .wrap { padding: 0 8px 0 18px; } } .mascot.shaken .mascot__body { animation: sick-wobble .18s linear infinite; } .crumb { width: 8px; height: 6px; } /* Il n'arrive plus à avaler : il se fige et frissonne */ .mascot.choke .mascot__body { animation: shiver .09s linear infinite; } @keyframes shiver { 50% { transform: translateX(1.5px); } } .mascot.choke .m-mouth { d: path("M44 70 Q50 66 56 70"); } .mascot.shaken .mascot__body { animation: shiver calc(.22s - var(--shake, 0) * .14s) linear infinite; } .mascot__bubble { pointer-events: none; } /* Visionneuse : lecteur vertical pour les Reels/Shorts, onglets quand un projet a plusieurs vidéos */ .lightbox__box { display: grid; grid-template-rows: auto 1fr; background: transparent; overflow: visible; aspect-ratio: auto; } .lightbox__player { aspect-ratio: 16 / 9; border-radius: 14px; overflow: hidden; background: #000; } .lightbox__box.is-vertical { width: auto; } .lightbox__box.is-vertical .lightbox__player { height: min(78vh, 760px); aspect-ratio: 9 / 16; margin: 0 auto; } .lightbox__tabs { display: flex; justify-content: center; gap: 8px; margin-bottom: 14px; } .lightbox__tabs button { position: static; width: auto; height: auto; padding: 8px 16px; border-radius: 999px; border: 1px solid rgba(255,255,255,.25); background: transparent; color: #fff; font: 600 14px "Bricolage Grotesque", sans-serif; cursor: pointer; } .lightbox__tabs button[aria-selected="true"] { background: #fff; color: #120d1c; } /* La mascotte s'éclipse pendant la lecture (rétention → avis) et revient aux tarifs */ @keyframes m-away { 0% { transform: none; opacity: 1; } 25% { transform: translateY(8px) scale(1.05, .9); } 100% { transform: translateY(-260px) scale(.2) rotate(-20deg); opacity: 0; } } @keyframes m-back { 0% { transform: translateY(-300px) scale(.4); opacity: 0; } 60% { transform: translateY(10px) scale(1.08, .9); opacity: 1; } 80% { transform: translateY(-6px) scale(.97, 1.04); } 100% { transform: none; opacity: 1; } } @keyframes m-poof { 0% { transform: scale(.3); opacity: .9; } 100% { transform: scale(1.6); opacity: 0; } } .mascot.away { pointer-events: none; } .mascot.away .mascot__body { animation: m-away .8s cubic-bezier(.5, 0, .75, 0) forwards; } .mascot.away .mascot__bubble { opacity: 0; } .mascot.away::after { content: ""; position: absolute; left: 8px; top: 8px; width: 80px; height: 80px; border-radius: 50%; background: radial-gradient(circle, rgba(244,240,250,.55) 0 30%, transparent 62%); animation: m-poof .7s ease-out .55s both; pointer-events: none; } .mascot.back .mascot__body { animation: m-back .9s cubic-bezier(.34, 1.3, .64, 1) both; } @media (prefers-reduced-motion: reduce) { .mascot.away { opacity: 0; } .mascot.away .mascot__body, .mascot.back .mascot__body { animation: none; } } /* ---------- Retournement : titre barré au défilement + cartes visuelles ---------- */ .flip__face--front h3 { text-decoration: none !important; color: #6e6090; } .strike { background: linear-gradient(#ff8a80, #ff8a80) 0 58% / calc(var(--s, 0) * 100%) .07em no-repeat; -webkit-box-decoration-break: clone; box-decoration-break: clone; } .face__grid { display: grid; grid-template-columns: 1.15fr .85fr; gap: 56px; align-items: center; } .face__grid ul { grid-template-columns: 1fr; } .viz { border-radius: 22px; padding: 20px 20px 16px; } .flip__face--front .viz { background: #1b1429; border: 1px solid #3a2e55; } .flip__face--back .viz { background: #fff; border: 1px solid #dcd3ea; box-shadow: 0 30px 60px -30px rgba(91,46,224,.35); } .viz__head { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 12px; font-size: 14px; } .viz__head span { font-size: 11px; opacity: .6; } .viz svg { display: block; width: 100%; } .viz__chart { height: 150px; } .viz .grid { stroke: currentColor; opacity: .12; stroke-width: 1; fill: none; vector-effect: non-scaling-stroke; } /* la courbe se dessine de gauche à droite (découpe), le graphique démarre vide */ .viz .curve { fill: none; stroke-width: 3; vector-effect: non-scaling-stroke; stroke-linecap: round; } .viz .curve, .viz .area { clip-path: inset(-10px calc((1 - var(--d, 1)) * 100%) -10px 0); } .viz--before[style*="--d: 0.000"] .curve, .viz--before[style*="--d: 0.000"] .area { visibility: hidden; } .viz .area { opacity: .9; } .viz--before .curve { stroke: #ff8a80; } .viz--before .area { fill: rgba(255,138,128,.12); } .viz--after .curve { stroke: #5b2ee0; } .viz--after .area { fill: rgba(91,46,224,.1); } .viz__viewers { height: 16px; margin: 10px 0 6px; } .viz .viewer { fill: #b3a8c7; transition: opacity .35s, transform .45s; transform-box: fill-box; transform-origin: center; } .viz .viewer.gone { opacity: 0; transform: translateY(8px) scale(.4); } .viz__tl { margin-top: 8px; } .viz .clip { fill: #5b2ee0; } .viz .clip--b { fill: #9b7bff; } .viz .clip--t { fill: #ffb23f; } .viz .clip--dull { fill: #3a2e55; } .viz .clip--gap { fill: none; stroke: #3a2e55; stroke-dasharray: 4 4; } .viz text { font: 600 10px "Bricolage Grotesque", sans-serif; fill: #b3a8c7; } .viz .wave rect { fill: #c9bdf5; } .viz__tl--rich .clip, .viz__tl--rich .wave rect { transform-box: fill-box; transform-origin: left; transform: scaleX(var(--d, 1)); } .viz .head { fill: #ffb23f; transform: translateX(calc(var(--d, 1) * 290px)); } .viz__cap { margin: 10px 0 0; font-size: 13px; opacity: .7; } @media (max-width: 900px) { .face__grid { grid-template-columns: 1fr; gap: 20px; } .viz { max-width: 420px; } .viz__chart { height: 110px; } } @media (max-height: 760px) { .face__grid ul { font-size: 16px; } .flip__face h3 { font-size: clamp(38px, 5vw, 80px); } } /* ---------- Hero : textes plus vivants ---------- */ .hero__lead { font-size: clamp(20px, 1.7vw, 24px) !important; line-height: 1.4 !important; color: var(--ink) !important; margin: 0 0 18px !important; max-width: 30ch !important; } .hero mark { background: linear-gradient(transparent 62%, rgba(109, 66, 245, .55) 62%); color: inherit; padding: 0 .08em; } .hero__chips { display: flex; flex-wrap: wrap; gap: 8px; list-style: none; margin: 0 0 20px; padding: 0; max-width: 520px; } .hero__chips li { padding: 6px 12px; border-radius: 999px; border: 1px solid var(--line); background: rgba(155, 123, 255, .08); color: var(--muted); font-size: 14px; font-weight: 600; transition: background-color .25s, color .25s, border-color .25s, transform .3s var(--ease); } .hero__chips li:hover { background: var(--vs); border-color: var(--vs); color: #fff; transform: translateY(-2px); } .hero__how { font-size: 18px !important; color: var(--muted) !important; margin: 0 0 30px !important; } .hero__how b { color: var(--ink); font-weight: 650; } .hero__stats { display: flex; flex-wrap: wrap; gap: 10px; margin: 0 0 8px; } .stat { display: inline-flex; align-items: baseline; gap: 6px; padding: 8px 14px; border-radius: 12px; background: rgba(27, 20, 41, .9); border: 1px solid var(--line); font-size: 14px; color: var(--muted); } .stat b { font-size: 20px; color: var(--ink); letter-spacing: -.02em; } .stars { font-style: normal; color: var(--head); letter-spacing: 1px; } .hero__under small { margin-top: 4px; } .hero .frame { cursor: pointer; } .mascot__bubble.quiet { opacity: 0; transform: scale(.9) translateY(6px); } .faq details p a { color: var(--j-v); font-weight: 600; } /* Liste « Avant » : croix qui rebondissent avec une onde, puis texte qui se déplie, l'un après l'autre */ .flip__face--front li { position: relative; } .flip__face--front li::before { display: inline-block; width: .8em; text-align: center; flex: none; } .flip__face--front li::after { content: ""; position: absolute; left: -.35em; top: -.05em; width: 1.5em; height: 1.5em; border-radius: 50%; border: 2px solid #ff8a80; opacity: 0; pointer-events: none; } .flip__face--front li:nth-child(2) { --i: 1; } .flip__face--front li:nth-child(3) { --i: 2; } .flip__face--front li:nth-child(4) { --i: 3; } .flip__face--front ul.pre li::before { transform: scale(0); } .flip__face--front ul.pre li span { clip-path: inset(-.2em 100% -.3em 0); opacity: 0; transform: translateX(-10px); transition: clip-path .7s var(--ease), opacity .4s, transform .7s var(--ease); } .flip__face--front ul.pre.is-in li::before { animation: cross-pop .65s cubic-bezier(.34, 1.8, .5, 1) calc(var(--i, 0) * .45s) forwards; } .flip__face--front ul.pre.is-in li::after { animation: cross-wave 1.1s ease-out calc(var(--i, 0) * .45s + .12s) forwards; } .flip__face--front ul.pre.is-in li span { clip-path: inset(-.2em -1em -.3em 0); opacity: 1; transform: none; transition-delay: calc(var(--i, 0) * .45s + .18s); } @keyframes cross-pop { 0% { transform: scale(0) rotate(-90deg); } 60% { transform: scale(1.5) rotate(10deg); } 80% { transform: scale(.85) rotate(-4deg); } 100% { transform: scale(1) rotate(0); } } @keyframes cross-wave { 0% { transform: scale(.3); opacity: .9; box-shadow: 0 0 0 0 rgba(255, 138, 128, .45); } 100% { transform: scale(1.9); opacity: 0; box-shadow: 0 0 0 10px rgba(255, 138, 128, 0); } } /* Petit mot laissé en haut de l'écran quand la mascotte s'éclipse (rétention, déroulé) */ .mascot-note { position: fixed; z-index: 61; top: 86px; right: calc(max(16px, (100vw - 1200px) / 2) + 96px); /* à gauche du badge « Avant » */ padding: 10px 16px; border-radius: 14px; background: #fff; color: var(--j-ink); font-size: 14px; font-weight: 500; box-shadow: 0 14px 30px -12px rgba(18, 13, 28, .45); pointer-events: none; opacity: 0; transform: translateY(-16px) scale(.9); transform-origin: 80% 0; transition: opacity .35s, transform .5s var(--ease); } .mascot-note::before { content: "↑"; margin-right: 6px; color: var(--j-v); font-weight: 700; display: inline-block; animation: note-up 1s ease-in-out infinite; } .mascot-note.on { opacity: 1; transform: none; transition: opacity .3s, transform .6s cubic-bezier(.34, 1.56, .64, 1); } @keyframes note-up { 50% { transform: translateY(-3px); } } @media (max-width: 820px) { .mascot-note { top: 74px; right: auto; left: 16px; font-size: 13px; } } /* Déroulé : une petite illustration animée remplit le haut de chaque carte */ .step { position: sticky; } .sv { position: absolute; top: clamp(24px, 3.5vw, 48px); right: clamp(24px, 3.5vw, 56px); width: min(40%, 480px); pointer-events: none; } .sv__win { border-radius: 18px; padding: 12px 14px 16px; background: rgba(255, 255, 255, .07); border: 1px solid rgba(255, 255, 255, .14); box-shadow: 0 30px 60px -30px rgba(0, 0, 0, .6); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); transform: translateY(24px) rotate(1.5deg); opacity: 0; transition: transform .9s var(--ease), opacity .6s; } .step.on .sv__win { transform: none; opacity: 1; } .sv__bar { display: flex; align-items: center; gap: 6px; margin-bottom: 12px; font-size: 12px; color: rgba(255, 255, 255, .6); } .sv__bar i { width: 9px; height: 9px; border-radius: 50%; background: rgba(255, 255, 255, .22); } .sv__bar span { margin-left: 8px; } /* 01 : appel */ .sv__tiles { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; } .sv__tile { position: relative; aspect-ratio: 16/10; border-radius: 12px; background: rgba(0, 0, 0, .25); display: grid; place-items: center; } .sv__tile--you { background: rgba(155, 123, 255, .22); } .sv__av { width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; font-weight: 700; background: linear-gradient(145deg, #9b7bff, #6d42f5); } .sv__tile--you .sv__av { background: linear-gradient(145deg, #ffb23f, #ff8a5c); color: #120d1c; } .sv__wave { position: absolute; left: 10px; bottom: 9px; display: flex; gap: 3px; align-items: end; height: 14px; } .sv__wave i { width: 3px; height: 30%; border-radius: 2px; background: #4fd18b; } .step.on .sv__tile .sv__wave i { animation: sv-talk .9s ease-in-out infinite alternate; } .sv__wave i:nth-child(2) { animation-delay: -.3s !important; } .sv__wave i:nth-child(3) { animation-delay: -.6s !important; } .sv__wave i:nth-child(4) { animation-delay: -.15s !important; } .sv__wave i:nth-child(5) { animation-delay: -.45s !important; } .step.on .sv__tile--you .sv__wave i { animation-duration: .7s; animation-direction: alternate-reverse; } @keyframes sv-talk { to { height: 100%; } } .sv__notes { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; } .sv__notes span, .sv__list span, .sv__files span { font-size: 13px; padding: 6px 11px; border-radius: 99px; background: rgba(255, 255, 255, .1); opacity: 0; transform: translateY(8px) scale(.9); transition: opacity .4s, transform .6s cubic-bezier(.34, 1.56, .64, 1); } .step.on .sv__notes span, .step.on .sv__list span, .step.on .sv__files span { opacity: 1; transform: none; } .step.on .sv__notes span:nth-child(1) { transition-delay: .6s; } .step.on .sv__notes span:nth-child(2) { transition-delay: 1s; } .step.on .sv__notes span:nth-child(3) { transition-delay: 1.4s; } /* 02 : montage */ .sv__screen { position: relative; aspect-ratio: 16/5; border-radius: 10px; background: linear-gradient(135deg, rgba(0, 0, 0, .35), rgba(155, 123, 255, .25)); display: grid; place-items: center; overflow: hidden; } .sv__title { font-weight: 800; font-size: clamp(16px, 1.8vw, 24px); letter-spacing: -.02em; padding: 4px 12px; background: #ffb23f; color: #120d1c; border-radius: 6px; transform: scale(0) rotate(-6deg); } .step.on .sv__title { animation: sv-title 3.2s cubic-bezier(.34, 1.56, .64, 1) infinite; } @keyframes sv-title { 0%, 12% { transform: scale(0) rotate(-6deg); } 26%, 80% { transform: none; } 92%, 100% { transform: scale(0) rotate(4deg); } } .sv__tl { position: relative; margin-top: 10px; display: grid; gap: 4px; } .sv__track { position: relative; height: 12px; } .sv__track i { position: absolute; left: var(--x); width: calc(var(--w) - 2px); top: 0; bottom: 0; border-radius: 3px; background: #9b7bff; transform-origin: left; transform: scaleX(0); transition: transform .7s var(--ease); } .sv__track--t i { background: #ffb23f; height: 8px; } .sv__track--b i { background: #c9bdf5; } .sv__track--a i { background: rgba(79, 209, 139, .55); } .step.on .sv__track i { transform: none; } .step.on .sv__track:nth-child(2) i { transition-delay: .15s; } .step.on .sv__track:nth-child(3) i { transition-delay: .3s; } .step.on .sv__track:nth-child(4) i { transition-delay: .45s; } .sv__head { position: absolute; top: -4px; bottom: -4px; left: 0; width: 2px; background: #ff5c5c; box-shadow: 0 0 8px #ff5c5c; } .step.on .sv__head { animation: sv-play 3.2s linear infinite; } @keyframes sv-play { to { left: 100%; } } /* 03 : retouches */ .sv--review .sv__screen { aspect-ratio: 16/6; } .sv__pin { position: absolute; left: var(--x); top: var(--y); width: 26px; height: 26px; margin: -13px 0 0 -13px; border-radius: 50% 50% 50% 4px; display: grid; place-items: center; font-size: 12px; font-weight: 700; background: #ffb23f; color: #120d1c; transform: scale(0); } .step.on .sv__pin { animation: sv-pin 4.2s cubic-bezier(.34, 1.56, .64, 1) calc(var(--i) * .5s) infinite; } @keyframes sv-pin { 0% { transform: scale(0); background: #ffb23f; } 12%, 55% { transform: scale(1); background: #ffb23f; } 65%, 88% { transform: scale(1); background: #4fd18b; } 100% { transform: scale(0); background: #4fd18b; } } .sv__list { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; } .step.on .sv__list span { transition-delay: calc(.5s + var(--i) * .4s); } /* 04 : livraison */ .sv__files { display: flex; gap: 10px; } .sv__files span { flex: 1; text-align: center; padding: 18px 0; border-radius: 12px; font-weight: 700; font-size: 18px; background: rgba(255, 178, 63, .14); color: #ffb23f; } .step.on .sv__files span { transition-delay: calc(.3s + var(--i) * .2s); } .sv__prog { height: 8px; margin: 16px 0 12px; border-radius: 99px; background: rgba(255, 255, 255, .1); overflow: hidden; } .sv__prog i { display: block; height: 100%; width: 0; border-radius: inherit; background: linear-gradient(90deg, #9b7bff, #ffb23f); } .step.on .sv__prog i { animation: sv-export 3.6s var(--ease) .6s infinite; } @keyframes sv-export { 0% { width: 0; } 60%, 100% { width: 100%; } } .step .sv__done { margin: 0; font-size: 15px; font-weight: 600; opacity: 0; } .step .sv b { font-size: inherit; line-height: inherit; letter-spacing: 0; font-weight: 700; } .step .sv__done b { color: #4fd18b; } .step.on .sv__done { animation: sv-done 3.6s .6s infinite; } @keyframes sv-done { 0%, 58% { opacity: 0; transform: translateY(6px); } 66%, 100% { opacity: 1; transform: none; } } .step .sv p, .steps .step .sv__done { max-width: none; } @media (max-width: 900px) { .step { height: auto; min-height: 52vh; align-content: end; gap: 18px; } .step b { font-size: 84px; } .sv { position: relative; inset: auto; width: auto; order: -1; } .sv__win { padding: 10px 12px 12px; } .sv__tiles { display: none; } .sv__screen { aspect-ratio: 16/5; } .sv__notes { margin-top: 0; } .sv__tl .sv__track:nth-child(1), .sv__tl .sv__track:nth-child(4) { display: none; } .sv__files span { padding: 10px 0; } } @media (prefers-reduced-motion: reduce) { .sv * { animation: none !important; } .sv__win, .sv__notes span, .sv__list span, .sv__files span, .sv__track i { transition: none; } } /* ---------- Mobile : corrections finales (placées en dernier pour primer sur les règles précédentes) ---------- */ @media (max-width: 820px) { .hero .wrap { grid-template-columns: minmax(0, 1fr); gap: 36px; } .hero { padding-top: 96px; min-height: 0; } .hero__media, .hero__text { min-width: 0; } .acc-header .logo { white-space: nowrap; font-size: 19px; } .acc-header .go { padding: 9px 14px; font-size: 14px; white-space: nowrap; } .acc-header .wrap { gap: 12px; } .acc-header.is-pill .wrap { padding-left: 16px; } } .proj { overflow-x: clip; } /* le mur de miniatures incliné dépasse volontairement : on le coupe au bord de l’écran */ /* Mobile : la section Avant / Après doit tenir entière dans l'écran */ @media (max-width: 820px) { .flip__face .kicker { font-size: 15px; margin-bottom: 12px; } .flip__face h3 { font-size: clamp(32px, 9vw, 42px); margin-bottom: 16px; } .flip__face ul { font-size: 15.5px; gap: 8px; } .face__grid { gap: 16px; } .viz { padding: 12px 14px 12px; border-radius: 16px; } .viz__head { margin-bottom: 6px; } .viz__chart { height: 72px; } .viz__viewers { margin: 6px 0 2px; } .viz__tl { display: none; } .viz__cap { margin-top: 6px; } .flip__badge { display: none; } } /* Mobile : guillemet décoratif plus discret, mascotte plus petite */ @media (max-width: 820px) { .avis__stage { padding-top: 90px; } .avis__mark { font-size: 120px; top: -40px; } .mascot, .mascot svg { width: 72px; height: 72px; } .mascot__bubble { bottom: 40px; font-size: 13px; padding: 9px 12px; } } /* mention sur l'origine des avis (Code de la consommation, L111-7-2) */ .avis__src { display: block; margin-top: 14px; max-width: 30ch; font-size: 12.5px; line-height: 1.45; color: var(--j-muted); } .avis__q cite span { white-space: nowrap; } .tier .price small.ttc { display: block; background: none; padding: 0; border-radius: 0; color: inherit; font-size: 14px; font-weight: 500; letter-spacing: 0; opacity: .7; margin-top: 4px; } .mascot svg:focus { outline: none; } .mascot svg:focus-visible { outline: 2px solid var(--j-v, #7c5cff); outline-offset: 4px; border-radius: 50%; } .contact__pro { font-size: 14px; line-height: 1.5; opacity: .8; margin: 10px 0 0; } .contact__pro a { color: inherit; font-weight: 600; text-decoration: underline; text-underline-offset: 3px; } /* texte en cercle lisible : anneau sombre derrière, texte clair */ .cta__btn::before { content: ""; position: absolute; inset: 0; border-radius: 999px; background: #191224; box-shadow: 0 24px 50px -24px rgba(18, 13, 28, .7), inset 0 0 0 1px rgba(155, 123, 255, .35); } .cta__btn .core { position: relative; z-index: 1; } .cta__btn text { fill: #f4f0fa; } /* anneau en verre (liquid glass) plutôt qu'un aplat sombre */ .cta__btn::before { background: linear-gradient(135deg, rgba(109, 66, 245, .62), rgba(58, 35, 121, .55) 55%, rgba(155, 123, 255, .35)); -webkit-backdrop-filter: blur(14px) saturate(170%); backdrop-filter: blur(14px) saturate(170%); border: 1px solid rgba(255, 255, 255, .35); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .5), inset 0 -10px 24px rgba(109, 66, 245, .35), 0 24px 50px -26px rgba(58, 35, 121, .8); } .cta__btn text { fill: #fff; paint-order: stroke; stroke: rgba(40, 20, 90, .35); stroke-width: 2px; } /* au survol : l'anneau de verre et le texte s'écartent du centre avec le rond, puis se fondent (comme une onde) */ .cta__btn::before { transition: transform .7s var(--ease), opacity .55s ease .08s; } .cta__btn svg { transition: scale .7s var(--ease), opacity .55s ease .08s; } .cta__btn:hover::before, .cta__btn:focus-visible::before { transform: scale(1.45); opacity: 0; } .cta__btn:hover svg, .cta__btn:focus-visible svg { scale: 1.45; opacity: 0; } .cta__btn .core { transition: transform .5s var(--ease), box-shadow .5s; } .cta__btn:hover .core, .cta__btn:focus-visible .core { transform: scale(1.1); box-shadow: 0 0 0 10px rgba(155, 123, 255, .18), 0 20px 40px -18px rgba(58, 35, 121, .7); } @media (prefers-reduced-motion: reduce) { .cta__btn::before, .cta__btn svg { transition: opacity .3s; } .cta__btn:hover::before { transform: none; } .cta__btn:hover svg { scale: 1; } } /* survol, version finale : le texte accélère en tournant et se resserre dans le rond, l'anneau se rétracte avec lui */ .cta__btn svg { overflow: visible; transition: rotate 0s, scale .6s var(--ease), opacity .45s ease; } .cta__btn::before { transition: transform .6s var(--ease), opacity .45s ease; } .cta__btn:hover svg, .cta__btn:focus-visible svg { rotate: 900deg; scale: .55; opacity: 0; transition: rotate 1s cubic-bezier(.6, 0, .9, .4), scale .9s cubic-bezier(.6, 0, .9, .5), opacity .35s ease-in .55s; } .cta__btn:hover::before, .cta__btn:focus-visible::before { transform: scale(.74); opacity: 0; transition: transform .8s cubic-bezier(.6, 0, .9, .5), opacity .3s ease-in .5s; } @media (prefers-reduced-motion: reduce) { .cta__btn:hover svg { rotate: 0deg; scale: 1; } .cta__btn:hover::before { transform: none; } } .pf-cases { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin: 26px 0 0; } .pf-cases > span { font-weight: 600; opacity: .8; margin-right: 4px; } .pf-cases a { display: inline-flex; gap: 8px; align-items: center; padding: 10px 18px; border-radius: 99px; border: 1px solid rgba(155, 123, 255, .45); color: inherit; font-weight: 600; text-decoration: none; transition: background-color .25s, border-color .25s; } .pf-cases a:hover { background: rgba(155, 123, 255, .14); border-color: #9b7bff; } .pf-cases a:last-child { background: #6d42f5; border-color: #6d42f5; color: #fff; } .pf-cases a span { transition: transform .3s; } .pf-cases a:hover span { transform: translateX(4px); } /* Ondes du badge « Disponible » : exactement calées sur le badge, qui flotte avec elles */ .hero__media .wa { width: fit-content; animation: wa-float 3.4s ease-in-out infinite; } .hero__media .wa .wa__badge { animation: wa-aura 2.6s ease-out infinite; } .wa::before, .wa::after { inset: 0; width: auto; height: auto; transform-origin: center; } @keyframes wa-ring { 0% { transform: scale(1); opacity: .9; } 100% { transform: scale(1.12, 1.9); opacity: 0; } } @media (prefers-reduced-motion: reduce) { .hero__media .wa { animation: none; } } .hero__media .wa { display: flex; align-items: center; align-self: start; height: max-content; } /* ---------- Menu mobile (audit du 26/09/2026) : sous 900 px la navigation n'était plus accessible ---------- */ .nav-toggle { display: none; width: 44px; height: 44px; flex: none; border: 0; background: transparent; color: inherit; cursor: pointer; flex-direction: column; justify-content: center; align-items: center; gap: 5px; padding: 0; border-radius: 12px; } .nav-toggle span { display: block; height: 2px; width: 22px; background: currentColor; border-radius: 2px; transition: transform .3s var(--ease, ease), opacity .2s; } .acc-header.is-open .nav-toggle span:nth-child(1) { transform: translateY(7px) rotate(45deg); } .acc-header.is-open .nav-toggle span:nth-child(2) { opacity: 0; } .acc-header.is-open .nav-toggle span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); } @media (max-width: 900px) { .nav-toggle { display: flex; } .acc-header nav { display: none; } .acc-header.is-open nav { display: flex; flex-direction: column; gap: 4px; position: absolute; left: 0; right: 0; top: calc(100% + 8px); padding: 12px; border-radius: 18px; background: rgba(18, 13, 28, .96); border: 1px solid rgba(155, 123, 255, .22); box-shadow: 0 24px 50px -20px rgba(0, 0, 0, .8); overflow: visible; min-width: 0; } .acc-header.is-open nav a { padding: 12px 14px; font-size: 16px; color: #f4f0fa; } .acc-header.is-open nav .ni { display: inline-block; } .acc-header.is-open .wrap { overflow: visible; } .acc-header.is-open.is-hidden { transform: none; } .acc-header .wrap { gap: 10px; } } @media (prefers-reduced-motion: reduce) { .nav-toggle span { transition: none; } } /* Audit du 26/09/2026 : à 390 px, .avis__side (587 px) et le sol des offres (816 px) dépassaient l'écran ; on borne et on coupe */ #avis-clients, .avis, .offres, .offres__stage { overflow-x: clip; } .avis__side, .avis__stage, .avis .ce-pin > * { min-width: 0; max-width: 100%; } @media (max-width: 820px) { .avis .ce-pin { grid-template-columns: minmax(0, 1fr); } } .ce-video { margin: 24px 0; } .ce-video video { width: 100%; height: auto; border-radius: 14px; background: #000; } .ce-audio { width: 100%; margin: 16px 0; } /* Avis à 390 px : la signature (photo · nom · « Avis ComeUp · date » en nowrap) imposait une largeur minimale de 420 à 507 px à chaque citation, donc à toute la colonne : texte coupé sur mobile (constaté en production, audit du 26/09/2026) */ .avis__stage { grid-template-columns: minmax(0, 1fr); } .avis__q, .avis__q p { min-width: 0; max-width: 100%; } @media (max-width: 820px) { .avis__q cite { flex-wrap: wrap; } .avis__q cite span { white-space: normal; } }