/* ============================================================ WALKERCORP AGENCY — Design system Minimaliste & chic · typo display expressive · accent rose 4 palettes via [data-palette] sur ============================================================ */ @import url('https://fonts.googleapis.com/css2?family=Bricolage+Grotesque:opsz,wght@12..96,400;12..96,500;12..96,600;12..96,700;12..96,800&family=Hanken+Grotesk:wght@400;500;600;700&display=swap'); /* ---------- Tokens : palette par défaut "fuchsia" ---------- */ :root, :root[data-palette="rose"] { color-scheme: light; --bg: oklch(0.985 0.004 350); --surface: oklch(1 0 0); --surface-2: oklch(0.965 0.006 350); --ink: oklch(0.17 0.012 340); --ink-soft: oklch(0.31 0.015 340); --muted: oklch(0.52 0.02 340); --faint: oklch(0.70 0.015 340); --line: oklch(0.90 0.012 345); --line-2: oklch(0.83 0.015 345); --accent: oklch(0.605 0.245 358); --accent-d: oklch(0.52 0.23 358); --accent-soft: oklch(0.95 0.045 358); --on-accent: oklch(0.99 0.01 350); --ph-a: oklch(0.93 0.012 345); --ph-b: oklch(0.88 0.02 350); } :root[data-palette="bleu"] { color-scheme: light; --bg: oklch(0.985 0.004 255); --surface: oklch(1 0 0); --surface-2: oklch(0.965 0.007 255); --ink: oklch(0.18 0.022 260); --ink-soft: oklch(0.32 0.025 260); --muted: oklch(0.53 0.03 260); --faint: oklch(0.70 0.02 260); --line: oklch(0.90 0.014 255); --line-2: oklch(0.83 0.018 255); --accent: oklch(0.55 0.18 258); --accent-d: oklch(0.47 0.17 258); --accent-soft: oklch(0.95 0.04 255); --on-accent: oklch(0.99 0.01 255); --ph-a: oklch(0.93 0.014 255); --ph-b: oklch(0.88 0.03 255); } :root[data-palette="vert"] { color-scheme: light; --bg: oklch(0.985 0.005 155); --surface: oklch(1 0 0); --surface-2: oklch(0.965 0.008 155); --ink: oklch(0.18 0.018 160); --ink-soft: oklch(0.32 0.022 160); --muted: oklch(0.52 0.025 160); --faint: oklch(0.70 0.018 160); --line: oklch(0.90 0.015 155); --line-2: oklch(0.83 0.018 155); --accent: oklch(0.585 0.135 162); --accent-d: oklch(0.50 0.125 162); --accent-soft: oklch(0.95 0.045 160); --on-accent: oklch(0.99 0.01 160); --ph-a: oklch(0.93 0.016 155); --ph-b: oklch(0.88 0.032 158); } :root[data-palette="violet"] { color-scheme: light; --bg: oklch(0.985 0.004 300); --surface: oklch(1 0 0); --surface-2: oklch(0.965 0.007 300); --ink: oklch(0.18 0.02 300); --ink-soft: oklch(0.32 0.024 300); --muted: oklch(0.52 0.028 300); --faint: oklch(0.70 0.02 300); --line: oklch(0.90 0.014 300); --line-2: oklch(0.83 0.018 300); --accent: oklch(0.55 0.235 300); --accent-d: oklch(0.47 0.22 300); --accent-soft: oklch(0.95 0.045 300); --on-accent: oklch(0.99 0.01 300); --ph-a: oklch(0.93 0.014 300); --ph-b: oklch(0.88 0.03 300); } :root[data-palette="ambre"] { color-scheme: light; --bg: oklch(0.985 0.008 75); --surface: oklch(1 0 0); --surface-2: oklch(0.965 0.012 70); --ink: oklch(0.20 0.02 60); --ink-soft: oklch(0.34 0.025 60); --muted: oklch(0.54 0.03 60); --faint: oklch(0.71 0.025 60); --line: oklch(0.90 0.018 70); --line-2: oklch(0.83 0.022 70); --accent: oklch(0.74 0.155 65); --accent-d: oklch(0.64 0.145 60); --accent-soft: oklch(0.94 0.06 75); --on-accent: oklch(0.20 0.04 60); --ph-a: oklch(0.93 0.02 70); --ph-b: oklch(0.88 0.04 68); } /* ---------- Reset ---------- */ *, *::before, *::after { box-sizing: border-box; } * { margin: 0; } html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } } body { background: var(--bg); color: var(--ink); font-family: 'Hanken Grotesk', system-ui, -apple-system, sans-serif; font-size: 18px; line-height: 1.6; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; overflow-x: hidden; transition: background .5s ease, color .5s ease; } img, svg, video { display: block; max-width: 100%; } a { color: inherit; text-decoration: none; } button { font: inherit; color: inherit; cursor: pointer; background: none; border: none; } ul { list-style: none; padding: 0; } ::selection { background: var(--accent); color: var(--on-accent); } /* ---------- Typo ---------- */ .display { font-family: 'Bricolage Grotesque', 'Hanken Grotesk', sans-serif; font-weight: 700; line-height: 0.95; letter-spacing: -0.03em; text-wrap: balance; } h1, h2, h3 { font-family: 'Bricolage Grotesque', 'Hanken Grotesk', sans-serif; font-weight: 700; line-height: 1.0; letter-spacing: -0.025em; text-wrap: balance; } p { text-wrap: pretty; } .eyebrow { font-family: 'Hanken Grotesk', sans-serif; font-weight: 600; font-size: 0.78rem; letter-spacing: 0.22em; text-transform: uppercase; color: var(--accent); display: inline-flex; align-items: center; gap: 0.7em; } .eyebrow::before { content: ""; width: 28px; height: 2px; background: var(--accent); display: inline-block; } .lead { font-size: clamp(1.1rem, 2vw, 1.4rem); color: var(--ink-soft); line-height: 1.5; max-width: 60ch; } /* ---------- Layout ---------- */ .wrap { width: min(1240px, 92vw); margin-inline: auto; } .section { padding: clamp(72px, 11vh, 150px) 0; } .section--tight { padding: clamp(54px, 7vh, 90px) 0; } .grid { display: grid; gap: clamp(20px, 3vw, 40px); } /* ---------- Boutons ---------- */ .btn { display: inline-flex; align-items: center; gap: 0.7em; padding: 0.95em 1.6em; font-family: 'Hanken Grotesk', sans-serif; font-weight: 600; font-size: 0.98rem; letter-spacing: -0.01em; border-radius: 100px; transition: transform .35s cubic-bezier(.2,.8,.2,1), background .3s, color .3s, box-shadow .35s; will-change: transform; } .btn svg { transition: transform .35s cubic-bezier(.2,.8,.2,1); } .btn--primary { background: var(--accent); color: var(--on-accent); } .btn--primary:hover { transform: translateY(-3px); box-shadow: 0 14px 34px -12px var(--accent); } .btn--primary:hover svg { transform: translateX(4px) rotate(-2deg); } .btn--ghost { border: 1.5px solid var(--line-2); color: var(--ink); } .btn--ghost:hover { border-color: var(--ink); transform: translateY(-3px); } .btn--lg { padding: 1.15em 2em; font-size: 1.05rem; } .link-arrow { display: inline-flex; align-items: center; gap: 0.5em; font-weight: 600; color: var(--ink); border-bottom: 1.5px solid transparent; transition: gap .3s, border-color .3s, color .3s; width: max-content; } .link-arrow:hover { gap: 0.85em; border-color: var(--accent); color: var(--accent); } /* ---------- Curseur custom ---------- */ .cursor-dot, .cursor-ring { position: fixed; top: 0; left: 0; border-radius: 50%; pointer-events: none; z-index: 9999; mix-blend-mode: difference; } .cursor-dot { width: 7px; height: 7px; background: #fff; transform: translate(-50%,-50%); } .cursor-ring { width: 42px; height: 42px; border: 1.5px solid #fff; transform: translate(-50%,-50%); transition: width .28s ease, height .28s ease, background .28s ease, opacity .28s; } .cursor-ring.is-hover { width: 64px; height: 64px; background: rgba(255,255,255,0.12); } .cursor-ring.is-down { width: 30px; height: 30px; } @media (hover: none), (pointer: coarse) { .cursor-dot, .cursor-ring { display: none; } } /* ---------- Header / Nav ---------- */ .site-header { position: fixed; inset: 0 0 auto 0; z-index: 200; padding: 18px 0; transition: background .4s ease, backdrop-filter .4s, border-color .4s, padding .4s; border-bottom: 1px solid transparent; } .site-header.is-stuck { background: color-mix(in oklab, var(--bg) 80%, transparent); backdrop-filter: blur(16px) saturate(1.4); border-bottom: 1px solid var(--line); padding: 12px 0; } .nav { display: flex; align-items: center; justify-content: space-between; gap: 24px; } .brand { font-family: 'Bricolage Grotesque', sans-serif; font-weight: 800; font-size: 1.18rem; letter-spacing: -0.04em; line-height: 1; display: inline-flex; align-items: center; gap: 0.55em; } .brand .dot { width: 11px; height: 11px; border-radius: 50%; background: var(--accent); display: inline-block; } .brand .mark-sub { color: var(--muted); font-weight: 500; font-size: 0.66em; letter-spacing: 0.02em; } .nav-links { display: flex; align-items: center; gap: 6px; } .nav-links a { position: relative; padding: 8px 14px; font-weight: 500; font-size: 0.96rem; white-space: nowrap; color: var(--ink-soft); border-radius: 100px; transition: color .25s, background .25s; } .nav-links a::after { content: ""; position: absolute; left: 14px; right: 14px; bottom: 4px; height: 1.5px; background: var(--accent); transform: scaleX(0); transform-origin: left; transition: transform .3s ease; } .nav-links a:hover { color: var(--ink); } .nav-links a:hover::after, .nav-links a[aria-current="page"]::after { transform: scaleX(1); } .nav-links a[aria-current="page"] { color: var(--ink); } .nav-cta { display: flex; align-items: center; gap: 12px; } .nav-cta .btn { white-space: nowrap; } .nav-toggle { display: none; width: 44px; height: 44px; flex-direction: column; gap: 5px; align-items: center; justify-content: center; border-radius: 12px; } .nav-toggle span { width: 22px; height: 2px; background: var(--ink); border-radius: 2px; transition: transform .3s, opacity .3s; } /* ---------- Sous-menu Services ---------- */ .nav-drop { position: relative; display: inline-flex; align-items: center; } .nav-drop > a { display: inline-flex; align-items: center; gap: 5px; } .nav-drop .caret { width: 9px; height: 9px; transition: transform .3s ease; opacity: 0.7; } .nav-drop:hover .caret, .nav-drop:focus-within .caret { transform: rotate(180deg); } .nav-menu { position: absolute; top: calc(100% + 12px); left: 50%; z-index: 250; transform: translateX(-50%) translateY(-6px); min-width: 252px; background: var(--surface); border: 1px solid var(--line); border-radius: 16px; box-shadow: 0 26px 60px -28px rgba(0,0,0,0.5); padding: 8px; display: grid; gap: 2px; opacity: 0; pointer-events: none; transition: opacity .26s cubic-bezier(.2,.8,.2,1), transform .26s cubic-bezier(.2,.8,.2,1); } .nav-menu::before { content: ""; position: absolute; top: -12px; left: 0; right: 0; height: 12px; } .nav-menu::after { content: ""; position: absolute; top: -6px; left: 50%; width: 12px; height: 12px; background: var(--surface); border-left: 1px solid var(--line); border-top: 1px solid var(--line); transform: translateX(-50%) rotate(45deg); } .nav-drop:hover .nav-menu, .nav-drop:focus-within .nav-menu { opacity: 1; pointer-events: auto; transform: translateX(-50%) translateY(0); } .nav-menu a { display: flex; align-items: center; gap: 11px; padding: 10px 12px; border-radius: 10px; font-size: 0.92rem; font-weight: 500; color: var(--ink-soft); white-space: nowrap; } .nav-menu a::after { display: none; } .nav-menu a .mi-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--line-2); flex: none; transition: background .2s, transform .2s; } .nav-menu a:hover { background: var(--surface-2); color: var(--accent); } .nav-menu a:hover .mi-dot { background: var(--accent); transform: scale(1.4); } @media (max-width: 920px) { .nav-links, .nav-cta .btn { display: none; } .nav-toggle { display: flex; } .nav-links.is-open { display: flex; flex-direction: column; align-items: stretch; gap: 4px; position: fixed; inset: 72px 4vw auto 4vw; padding: 16px; background: var(--surface); border: 1px solid var(--line); border-radius: 22px; box-shadow: 0 30px 60px -30px rgba(0,0,0,0.4); } .nav-links.is-open a { font-size: 1.15rem; padding: 14px 16px; } .nav-drop { flex-direction: column; align-items: stretch; } .nav-drop .caret { display: none; } .nav-menu { position: static; opacity: 1; pointer-events: auto; transform: none; min-width: 0; background: transparent; border: none; box-shadow: none; padding: 0 0 6px 12px; gap: 0; } .nav-menu::before, .nav-menu::after { display: none; } .nav-links.is-open .nav-menu a { font-size: 0.98rem; padding: 9px 12px; } } /* ---------- Hero ---------- */ .hero { position: relative; padding-top: clamp(130px, 20vh, 220px); padding-bottom: clamp(60px, 9vh, 120px); overflow: hidden; } .hero-deco { position: absolute; inset: 0; z-index: 0; pointer-events: none; } .blob { position: absolute; border-radius: 50%; filter: blur(8px); opacity: 0.5; } .blob--1 { width: 46vw; height: 46vw; max-width: 620px; max-height: 620px; right: -8vw; top: -6vw; background: radial-gradient(circle at 35% 35%, var(--accent-soft), transparent 68%); opacity: 0.9; filter: blur(6px); } .ring-deco { position: absolute; border: 1.5px solid var(--line-2); border-radius: 50%; } .hero .wrap { position: relative; z-index: 1; } .hero-title { font-size: clamp(3.2rem, 12.5vw, 11rem); } .hero-title .accent { color: var(--accent); } .hero-row { display: grid; grid-template-columns: 1.5fr 1fr; gap: clamp(24px,4vw,64px); align-items: end; margin-top: clamp(28px,4vh,44px); } .hero-actions { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 28px; } @media (max-width: 820px){ .hero-row { grid-template-columns: 1fr; align-items: start; } } /* ---------- Marquee ---------- */ .marquee { overflow: hidden; border-block: 1px solid var(--line); padding: 20px 0; --gap: 3.2rem; } .marquee__track { display: flex; gap: var(--gap); width: max-content; animation: scroll-x 32s linear infinite; } .marquee:hover .marquee__track { animation-play-state: paused; } .marquee__item { display: inline-flex; align-items: center; gap: var(--gap); font-family: 'Bricolage Grotesque', sans-serif; font-weight: 600; font-size: clamp(1.1rem,2vw,1.6rem); letter-spacing: -0.02em; color: var(--ink-soft); white-space: nowrap; } .marquee__item::after { content: "✦"; color: var(--accent); font-size: 0.8em; } @keyframes scroll-x { to { transform: translateX(calc(-50% - var(--gap) / 2)); } } @media (prefers-reduced-motion: reduce) { .marquee__track { animation: none; } } /* ---------- Cards / Services ---------- */ .cards { display: grid; gap: 0; border-top: 1px solid var(--line); } .card-row { display: grid; grid-template-columns: 80px 1.1fr 1.4fr auto; align-items: center; gap: clamp(16px,3vw,48px); padding: clamp(26px,3.4vw,42px) 8px; border-bottom: 1px solid var(--line); transition: background .4s, padding-left .4s; position: relative; } .card-row:hover { background: var(--surface-2); padding-left: 22px; } .card-row .idx { font-family: 'Bricolage Grotesque',sans-serif; font-weight: 600; color: var(--faint); font-size: 0.95rem; } .card-row h3 { font-size: clamp(1.5rem, 2.6vw, 2.3rem); letter-spacing: -0.03em; } .card-row .card-desc { color: var(--muted); font-size: 1.02rem; } .card-row .card-go { width: 52px; height: 52px; border-radius: 50%; border: 1.5px solid var(--line-2); display: grid; place-items: center; transition: background .35s, color .35s, border-color .35s, transform .35s; color: var(--ink); } .card-row:hover .card-go { background: var(--accent); color: var(--on-accent); border-color: var(--accent); transform: rotate(-45deg); } @media (max-width: 860px){ .card-row { grid-template-columns: 44px 1fr auto; } .card-row .card-desc { display: none; } } .tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px,1fr)); gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: 26px; overflow: hidden; } .tile { background: var(--surface); padding: clamp(28px,3vw,40px); transition: background .35s; } .tile:hover { background: var(--surface-2); } .tile .t-ico { width: 48px; height: 48px; border-radius: 14px; background: var(--accent-soft); display: grid; place-items: center; color: var(--accent); margin-bottom: 22px; } .tile h3 { font-size: 1.35rem; margin-bottom: 10px; } .tile p { color: var(--muted); font-size: 1rem; } /* ---------- Placeholders image ---------- */ .ph { position: relative; border-radius: 18px; overflow: hidden; background: repeating-linear-gradient(135deg, var(--ph-a) 0 14px, var(--ph-b) 14px 28px); display: grid; place-items: center; isolation: isolate; } /* Illustrations SVG vectorielles (adaptées à la palette) */ .ph.has-illu { background: var(--surface-2); } .ph.has-illu::after { display: none; } .illu-svg { width: 100%; height: 100%; display: block; } .ph::after { content: attr(data-label); font-family: ui-monospace, 'SF Mono', Menlo, monospace; font-size: 0.72rem; letter-spacing: 0.04em; color: var(--ink-soft); background: color-mix(in oklab, var(--surface) 78%, transparent); padding: 6px 12px; border-radius: 100px; backdrop-filter: blur(3px); text-align: center; max-width: 80%; } /* ---------- Work grid ---------- */ .work-grid { display: grid; grid-template-columns: repeat(12, 1fr); gap: clamp(16px,2.4vw,30px); } .work-card { grid-column: span 6; } .work-card.is-wide { grid-column: span 6; } .work-card .ph { aspect-ratio: 16/11; } .work-card .ph--tall { aspect-ratio: 4/5; } .work-meta { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; margin-top: 16px; } .work-meta h3 { font-size: clamp(1.3rem,2vw,1.7rem); } .work-meta .sector { color: var(--muted); font-size: 0.92rem; white-space: nowrap; } .work-tags { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; } .tag { font-size: 0.78rem; font-weight: 500; color: var(--ink-soft); border: 1px solid var(--line-2); padding: 4px 11px; border-radius: 100px; } .work-card a { display: block; } .work-card a .ph { transition: transform .6s cubic-bezier(.2,.8,.2,1); } .work-card a:hover .ph { transform: scale(1.015); } @media (max-width: 720px){ .work-card, .work-card.is-wide { grid-column: span 12; } } /* ---------- Stats ---------- */ .stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: clamp(20px,3vw,40px); } .stat .num { font-family: 'Bricolage Grotesque',sans-serif; font-weight: 700; font-size: clamp(2.6rem,6vw,4.6rem); line-height: 1; letter-spacing: -0.04em; } .stat .num .accent { color: var(--accent); } .stat .lbl { color: var(--muted); margin-top: 8px; font-size: 0.98rem; } @media (max-width: 720px){ .stats { grid-template-columns: repeat(2,1fr); row-gap: 36px; } } /* ---------- Process ---------- */ .steps { display: grid; gap: 0; } .step { display: grid; grid-template-columns: auto 1fr; gap: clamp(20px,4vw,60px); padding: clamp(28px,4vw,52px) 0; border-top: 1px solid var(--line); } .step:last-child { border-bottom: 1px solid var(--line); } .step .s-num { font-family:'Bricolage Grotesque',sans-serif; font-weight: 700; font-size: clamp(1.4rem,2.4vw,2rem); color: var(--accent); } .step h3 { font-size: clamp(1.5rem,3vw,2.2rem); margin-bottom: 12px; } .step p { color: var(--muted); max-width: 56ch; } /* ---------- Testimonial ---------- */ .quote { max-width: 22ch; } .quote blockquote { font-family:'Bricolage Grotesque',sans-serif; font-weight: 600; font-size: clamp(1.6rem,3.6vw,3rem); line-height: 1.12; letter-spacing: -0.03em; text-wrap: balance; } .quote .q-mark { color: var(--accent); } .quote figcaption { margin-top: 28px; color: var(--muted); display: flex; align-items: center; gap: 14px; } .quote .avatar { width: 46px; height: 46px; border-radius: 50%; } /* ---------- CTA band ---------- */ .cta-band { background: var(--ink); color: var(--bg); border-radius: 34px; padding: clamp(40px,6vw,82px); position: relative; overflow: hidden; } .cta-band h2 { font-size: clamp(2rem,5.5vw,4.4rem); letter-spacing: -0.035em; } .cta-band .cta-blob { position: absolute; width: 40vw; height: 40vw; max-width: 460px; max-height: 460px; right: -6%; bottom: -40%; background: radial-gradient(circle, var(--accent), transparent 65%); opacity: 0.5; border-radius: 50%; pointer-events: none; } .cta-band .btn--primary { box-shadow: none; } /* ---------- Footer ---------- */ .site-footer { border-top: 1px solid var(--line); padding: clamp(50px,7vw,90px) 0 36px; margin-top: clamp(40px,6vw,80px); } .footer-grid { display: grid; grid-template-columns: 1.6fr 1fr 1fr 1fr; gap: clamp(28px,4vw,48px); } .footer-grid h4 { font-size: 0.78rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--faint); font-family:'Hanken Grotesk',sans-serif; font-weight: 600; margin-bottom: 16px; } .footer-grid ul { display: grid; gap: 10px; } .footer-grid a { color: var(--ink-soft); transition: color .25s; } .footer-grid a:hover { color: var(--accent); } .footer-brand .brand { font-size: 1.6rem; margin-bottom: 16px; } .footer-brand p { color: var(--muted); max-width: 34ch; } .footer-bottom { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 14px; align-items: center; margin-top: clamp(36px,5vw,64px); padding-top: 26px; border-top: 1px solid var(--line); color: var(--faint); font-size: 0.88rem; } .footer-bottom a { transition: color .25s; } .footer-bottom a:hover { color: var(--accent); } @media (max-width: 820px){ .footer-grid { grid-template-columns: 1fr 1fr; } .footer-brand { grid-column: 1 / -1; } } /* ---------- Page hero (sous-pages) ---------- */ .page-hero { padding-top: clamp(140px,18vh,210px); padding-bottom: clamp(20px,4vh,50px); } .page-hero h1 { font-size: clamp(2.8rem, 9vw, 7rem); } .breadcrumb { display: flex; gap: 8px; align-items: center; color: var(--faint); font-size: 0.86rem; margin-bottom: 22px; } .breadcrumb a:hover { color: var(--accent); } .breadcrumb .sep { opacity: 0.5; } /* ---------- Service detail ---------- */ .svc { display: grid; grid-template-columns: 0.9fr 1.1fr; gap: clamp(24px,5vw,72px); padding: clamp(40px,6vw,88px) 0; border-top: 1px solid var(--line); align-items: start; } .svc:last-child { border-bottom: 1px solid var(--line); } .svc-sticky { position: sticky; top: 110px; } .svc h2 { font-size: clamp(1.9rem,4vw,3.2rem); margin: 14px 0 16px; } .svc .feat { display: grid; gap: 14px; margin-top: 26px; } .svc .feat li { display: grid; grid-template-columns: auto 1fr; gap: 14px; align-items: start; color: var(--ink-soft); } .svc .feat .chk { width: 24px; height: 24px; border-radius: 50%; background: var(--accent-soft); color: var(--accent); display: grid; place-items: center; flex: none; margin-top: 2px; } .svc-aside { display: grid; gap: 16px; } .svc-aside .ph { aspect-ratio: 4/3; } @media (max-width: 860px){ .svc { grid-template-columns: 1fr; } .svc-sticky { position: static; } } /* ---------- FAQ ---------- */ .faq { border-top: 1px solid var(--line); } .faq details { border-bottom: 1px solid var(--line); } .faq summary { display: flex; justify-content: space-between; align-items: center; gap: 20px; cursor: pointer; list-style: none; padding: clamp(20px,2.6vw,30px) 4px; font-family:'Bricolage Grotesque',sans-serif; font-weight: 600; font-size: clamp(1.15rem,2.2vw,1.6rem); letter-spacing: -0.02em; } .faq summary::-webkit-details-marker { display: none; } .faq summary .ic { width: 34px; height: 34px; border-radius: 50%; border: 1.5px solid var(--line-2); display: grid; place-items: center; flex: none; transition: transform .35s, background .3s, color .3s, border-color .3s; } .faq details[open] summary .ic { transform: rotate(45deg); background: var(--accent); color: var(--on-accent); border-color: var(--accent); } .faq .faq-a { padding: 0 4px clamp(22px,2.6vw,30px); color: var(--muted); max-width: 70ch; } /* ---------- Form ---------- */ .form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; } .field { display: grid; gap: 8px; } .field.full { grid-column: 1 / -1; } .field label { font-size: 0.86rem; font-weight: 600; color: var(--ink-soft); } .field label .req { color: var(--accent); } .field input, .field textarea, .field select { width: 100%; padding: 14px 16px; border: 1.5px solid var(--line-2); border-radius: 14px; background: var(--surface); color: var(--ink); font: inherit; font-size: 1rem; transition: border-color .25s, box-shadow .25s; } .field textarea { min-height: 140px; resize: vertical; } .field input:focus, .field textarea:focus, .field select:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 4px var(--accent-soft); } .field .err { color: oklch(0.58 0.22 25); font-size: 0.82rem; display: none; } .field.invalid input, .field.invalid textarea { border-color: oklch(0.58 0.22 25); } .field.invalid .err { display: block; } .budget-row { display: flex; flex-wrap: wrap; gap: 10px; } .chip-radio { position: relative; } .chip-radio input { position: absolute; opacity: 0; inset: 0; cursor: pointer; } .chip-radio span { display: inline-block; padding: 10px 18px; border: 1.5px solid var(--line-2); border-radius: 100px; font-size: 0.94rem; font-weight: 500; transition: all .25s; } .chip-radio input:checked + span { background: var(--accent); color: var(--on-accent); border-color: var(--accent); } .form-success { display: none; padding: 28px; border-radius: 18px; background: var(--accent-soft); color: var(--accent-d); font-weight: 600; } .form-success.show { display: block; } @media (max-width: 640px){ .form-grid { grid-template-columns: 1fr; } } .contact-grid { display: grid; grid-template-columns: 1.2fr 0.8fr; gap: clamp(30px,5vw,70px); align-items: start; } @media (max-width: 880px){ .contact-grid { grid-template-columns: 1fr; } } .info-block { display: grid; gap: 6px; padding: 22px 0; border-bottom: 1px solid var(--line); } .info-block .k { font-size: 0.78rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--faint); } .info-block .v { font-family:'Bricolage Grotesque',sans-serif; font-weight: 600; font-size: 1.3rem; } /* ---------- Team / values ---------- */ .value-grid { display: grid; grid-template-columns: repeat(auto-fit,minmax(240px,1fr)); gap: clamp(20px,3vw,40px); } .value h3 { font-size: 1.4rem; margin-bottom: 10px; display: flex; align-items: baseline; gap: 12px; } .value h3 .vi { color: var(--accent); font-family:'Bricolage Grotesque',sans-serif; } .value p { color: var(--muted); } .team-grid { display: grid; grid-template-columns: repeat(auto-fit,minmax(220px,1fr)); gap: clamp(18px,2.6vw,32px); } .member .ph { aspect-ratio: 3/4; border-radius: 18px; } .member h3 { font-size: 1.2rem; margin-top: 14px; } .member .role { color: var(--muted); font-size: 0.94rem; } /* ---------- Reveal animations ---------- */ [data-reveal] { opacity: 0; transform: translateY(26px); transition: transform .9s cubic-bezier(.2,.7,.2,1); } [data-reveal].is-in { opacity: 1; transform: none; } [data-reveal-delay="1"]{ transition-delay: .08s; } [data-reveal-delay="2"]{ transition-delay: .16s; } [data-reveal-delay="3"]{ transition-delay: .24s; } [data-reveal-delay="4"]{ transition-delay: .32s; } html:not(.js) [data-reveal] { opacity: 1; transform: none; } @media (prefers-reduced-motion: reduce) { [data-reveal] { opacity: 1 !important; transform: none !important; transition: none; } } /* ---------- Skip link ---------- */ .skip-link { position: absolute; left: -999px; top: 0; z-index: 999; background: var(--accent); color: var(--on-accent); padding: 12px 18px; border-radius: 0 0 12px 0; font-weight: 600; } .skip-link:focus { left: 0; } /* ---------- Sélecteur de couleur : bouton header + popover ---------- */ .palette-wrap { position: relative; display: inline-flex; } .palette-btn { position: relative; width: 42px; height: 42px; border-radius: 50%; flex: none; display: grid; place-items: center; cursor: pointer; border: 1.5px solid var(--line-2); background: var(--surface); transition: border-color .3s, transform .3s, box-shadow .3s; } .palette-btn:hover { transform: translateY(-2px); border-color: var(--ink); box-shadow: 0 8px 20px -10px rgba(0,0,0,0.35); } .palette-btn .pb-wheel { width: 20px; height: 20px; border-radius: 50%; background: conic-gradient(from 0deg, #e5006e, #e08a1e, #12936a, #2f6bdb, #7c3aed, #e5006e); transition: transform .6s cubic-bezier(.2,.8,.2,1); } .palette-btn:hover .pb-wheel { transform: rotate(140deg); } .palette-btn[aria-expanded="true"] { border-color: var(--accent); } .palette-btn[aria-expanded="true"] .pb-wheel { transform: rotate(180deg); } .palette-btn .pb-dot { position: absolute; right: -1px; bottom: -1px; width: 13px; height: 13px; border-radius: 50%; background: var(--accent); border: 2px solid var(--surface); transition: background .4s; } .palette-pop { position: absolute; top: calc(100% + 12px); right: 0; z-index: 300; width: 296px; background: var(--surface); border: 1px solid var(--line); border-radius: 20px; box-shadow: 0 30px 70px -28px rgba(0,0,0,0.5); padding: 18px; font-family: 'Hanken Grotesk', sans-serif; color: var(--ink); opacity: 0; transform: translateY(-8px) scale(0.98); transform-origin: top right; pointer-events: none; transition: opacity .3s cubic-bezier(.2,.8,.2,1), transform .3s cubic-bezier(.2,.8,.2,1); } .palette-pop.open { opacity: 1; transform: none; pointer-events: auto; } .palette-pop::before { content: ""; position: absolute; top: -7px; right: 14px; width: 13px; height: 13px; background: var(--surface); border-left: 1px solid var(--line); border-top: 1px solid var(--line); transform: rotate(45deg); } .palette-pop .pp-label { font-size: 0.7rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--faint); margin-bottom: 12px; } .pal-grid { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 10px; } .pal-opt { border: none; background: none; padding: 4px; border-radius: 12px; cursor: pointer; display: flex; flex-direction: column; align-items: center; gap: 7px; transition: transform .25s; } .pal-opt:hover { transform: translateY(-3px); } .pal-opt .pal-disc { width: 100%; max-width: 48px; aspect-ratio: 1; border-radius: 50%; position: relative; box-shadow: 0 4px 12px -4px rgba(0,0,0,0.3); transition: box-shadow .25s; } .pal-opt .pal-disc::after { content: ""; position: absolute; inset: -4px; border-radius: 50%; border: 2px solid var(--accent); opacity: 0; transform: scale(.82); transition: opacity .25s, transform .25s; } .pal-opt.active .pal-disc::after { opacity: 1; transform: scale(1); } .pal-opt.active .pal-disc { box-shadow: 0 6px 16px -4px rgba(0,0,0,0.4); } .pal-opt .pal-name { font-size: 0.74rem; font-weight: 600; color: var(--ink-soft); } .pal-opt.active .pal-name { color: var(--accent); } @media (max-width: 380px){ .palette-pop { width: calc(100vw - 32px); right: -8px; } } /* ---------- Modale « Votre humeur » (1er clic curieux) ---------- */ .mood-root { position: fixed; inset: 0; z-index: 9600; display: grid; place-items: center; padding: 20px; opacity: 0; pointer-events: none; transition: opacity .35s ease; } .mood-root.open { opacity: 1; pointer-events: auto; } .mood-ov { position: absolute; inset: 0; background: color-mix(in oklab, var(--ink) 42%, transparent); backdrop-filter: blur(7px) saturate(1.1); -webkit-backdrop-filter: blur(7px) saturate(1.1); } .mood-card { position: relative; width: min(460px, 100%); background: var(--surface); border: 1px solid var(--line); border-radius: 26px; padding: clamp(26px, 4vw, 38px); box-shadow: 0 50px 110px -34px rgba(0,0,0,0.55); transform: translateY(16px) scale(0.96); transition: transform .42s cubic-bezier(.2,.9,.3,1); text-align: left; } .mood-root.open .mood-card { transform: none; } .mood-card .mood-spark { font-size: 1.5rem; color: var(--accent); line-height: 1; } .mood-card h2 { font-family: 'Bricolage Grotesque', sans-serif; font-weight: 700; letter-spacing: -0.03em; font-size: clamp(1.5rem, 3.4vw, 2rem); line-height: 1.05; margin: 14px 0 12px; text-wrap: balance; } .mood-card .mood-txt { color: var(--ink-soft); line-height: 1.6; font-size: 1rem; } .mood-card .mood-close { position: absolute; top: 16px; right: 16px; width: 36px; height: 36px; border-radius: 11px; display: grid; place-items: center; color: var(--muted); transition: background .2s, color .2s; } .mood-card .mood-close:hover { background: var(--surface-2); color: var(--ink); } .mood-swatches { display: flex; flex-wrap: wrap; gap: 12px; margin: 24px 0; } .mood-sw { display: flex; flex-direction: column; align-items: center; gap: 8px; cursor: pointer; } .mood-sw .disc { width: 46px; height: 46px; border-radius: 50%; background: var(--c); position: relative; transition: transform .3s cubic-bezier(.2,.85,.25,1), box-shadow .3s; } .mood-sw .disc::after { content: ""; position: absolute; inset: -5px; border-radius: 50%; border: 2px solid var(--c); opacity: 0; transform: scale(.8); transition: opacity .25s, transform .25s; } .mood-sw:hover .disc { transform: translateY(-4px) scale(1.07); box-shadow: 0 12px 24px -10px var(--c); } .mood-sw.on .disc::after { opacity: 1; transform: scale(1); } .mood-sw .nm { font-size: 0.74rem; font-weight: 600; color: var(--ink-soft); } .mood-code { display: flex; align-items: center; gap: 12px; background: var(--accent-soft); border: 1px dashed var(--accent); border-radius: 14px; padding: 14px 16px; margin-bottom: 8px; } .mood-code .mc-txt { flex: 1; font-size: 0.9rem; color: var(--ink-soft); line-height: 1.4; } .mood-code .mc-txt b { color: var(--accent-d); font-family: ui-monospace, 'SF Mono', Menlo, monospace; } .mood-code .mc-copy { flex: none; display: inline-flex; align-items: center; gap: 6px; background: var(--accent); color: var(--on-accent); border-radius: 100px; padding: 8px 14px; font-weight: 600; font-size: 0.82rem; font-family: 'Hanken Grotesk', sans-serif; transition: transform .2s, filter .2s; white-space: nowrap; } .mood-code .mc-copy:hover { transform: translateY(-1px); filter: brightness(1.06); } .mood-code .mc-copy.copied { background: var(--accent-d); } .mood-actions { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 20px; } @media (prefers-reduced-motion: reduce){ .mood-root, .mood-card { transition: opacity .2s; transform: none; } } /* ---------- Surprise du formulaire de contact ---------- */ .surprise-hint { display: inline-flex; align-items: center; gap: 7px; margin-top: 10px; background: var(--accent-soft); color: var(--accent-d); border-radius: 100px; padding: 6px 13px; font-size: 0.84rem; font-weight: 600; opacity: 0; transform: translateY(-4px); transition: opacity .35s, transform .35s; } .surprise-hint.show { opacity: 1; transform: none; } .surprise-hint svg { width: 15px; height: 15px; } .surprise-box { position: relative; overflow: hidden; margin-top: 22px; padding: 26px 26px 24px; border-radius: 20px; background: linear-gradient(135deg, var(--accent-soft), color-mix(in oklab, var(--accent) 14%, var(--surface))); border: 1px solid var(--accent); display: none; } .surprise-box.show { display: block; animation: surprisePop .55s cubic-bezier(.2,.9,.3,1); } @keyframes surprisePop { from { opacity: 0; transform: scale(.94) translateY(10px); } to { opacity: 1; transform: none; } } .surprise-box .sb-spark { font-size: 1.5rem; color: var(--accent); line-height: 1; } .surprise-box h3 { font-family: 'Bricolage Grotesque', sans-serif; font-weight: 700; letter-spacing: -0.02em; font-size: 1.5rem; margin: 10px 0 8px; color: var(--ink); } .surprise-box p { color: var(--ink-soft); line-height: 1.55; max-width: 46ch; } .surprise-box .sb-perks { display: grid; gap: 10px; margin: 18px 0 4px; } .surprise-box .sb-perks li { display: flex; align-items: flex-start; gap: 11px; color: var(--ink); font-weight: 500; } .surprise-box .sb-perks .ck { width: 24px; height: 24px; border-radius: 50%; background: var(--accent); color: var(--on-accent); display: grid; place-items: center; flex: none; margin-top: 1px; } .surprise-box .sb-perks .ck svg { width: 13px; height: 13px; } .confetti-canvas { position: fixed; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 9800; } @media (prefers-reduced-motion: reduce){ .surprise-box.show { animation: none; } } /* ============================================================ IMMERSIF : fond fluide, transitions, magnétique, tilt, reveal ============================================================ */ /* ---------- Fond fluide (mesh blobs animés) ---------- */ .mesh-blob { position: absolute; border-radius: 50%; pointer-events: none; filter: blur(64px); opacity: 0.55; will-change: transform; } @media (prefers-reduced-motion: reduce) { .mesh-blob { animation: none !important; } } @keyframes meshFloatA { 0%,100% { transform: translate3d(0,0,0) scale(1); } 33% { transform: translate3d(6vw,4vh,0) scale(1.12); } 66% { transform: translate3d(-4vw,7vh,0) scale(0.95); } } @keyframes meshFloatB { 0%,100% { transform: translate3d(0,0,0) scale(1); } 50% { transform: translate3d(-7vw,-5vh,0) scale(1.18); } } /* ---------- Reveal mot-à-mot ---------- */ .rv-word { display: inline-block; overflow: hidden; vertical-align: top; padding: 0 0.14em 0.16em; margin: 0 -0.14em -0.16em; } .rv-inner { display: inline-block; transform: translateY(115%); transition: transform .9s cubic-bezier(.2,.85,.25,1); } [data-split].is-in .rv-inner { transform: translateY(0); } [data-split][data-reveal] { opacity: 1; transform: none; } @media (prefers-reduced-motion: reduce) { .rv-inner { transform: none !important; } } /* ---------- Boutons magnétiques / tilt ---------- */ [data-magnetic] { will-change: transform; } [data-tilt] { transition: transform .5s cubic-bezier(.2,.8,.2,1), box-shadow .5s; transform-style: preserve-3d; will-change: transform; } /* ---------- Curseur : label ---------- */ .cursor-ring .c-label { position: absolute; inset: 0; display: grid; place-items: center; font-family: 'Hanken Grotesk', sans-serif; font-weight: 600; font-size: 11px; color: #fff; opacity: 0; transition: opacity .2s; white-space: nowrap; } .cursor-ring.is-label { width: 76px; height: 76px; background: var(--accent); border-color: transparent; mix-blend-mode: normal; } .cursor-ring.is-label .c-label { opacity: 1; } /* ---------- Barre de progression de navigation ---------- */ .route-bar { position: fixed; top: 0; left: 0; right: 0; height: 3px; z-index: 9700; background: var(--accent); transform: scaleX(0); transform-origin: left; opacity: 0; pointer-events: none; box-shadow: 0 0 12px -2px var(--accent); } .route-bar.active { opacity: 1; transition: transform 6s cubic-bezier(.1,.7,.1,1), opacity .2s; } html:not(.js) .route-bar { display: none; } @media (prefers-reduced-motion: reduce) { .route-bar { display: none; } } /* ---------- Footer zones ---------- */ .footer-zones { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 18px; } .footer-zones a { font-size: 0.8rem; font-weight: 500; color: var(--ink-soft); border: 1px solid var(--line-2); padding: 5px 12px; border-radius: 100px; transition: all .25s; } .footer-zones a:hover { border-color: var(--accent); color: var(--accent); } /* ---------- Stack / compétences ---------- */ .stack-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px,1fr)); gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: 22px; overflow: hidden; margin-top: 8px; } .stack-item { background: var(--surface); padding: clamp(22px,2.6vw,32px); transition: background .35s; } .stack-item:hover { background: var(--surface-2); } .stack-item .si-top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; } .stack-item h3 { font-size: 1.25rem; } .stack-item .si-exp { font-size: 0.78rem; font-weight: 600; color: var(--accent); border: 1px solid var(--accent); border-radius: 100px; padding: 3px 10px; } .stack-item p { color: var(--muted); font-size: 0.96rem; } /* ---------- Formulaire : chips budget (conservé pour compat) ---------- */ /* ============================================================ BLOG : grille d'articles + corps d'article (prose) ============================================================ */ .post-grid { display: grid; grid-template-columns: repeat(12, 1fr); gap: clamp(20px,3vw,40px); } .post-card { grid-column: span 4; display: flex; flex-direction: column; } .post-card.is-feat { grid-column: span 8; } .post-card a.pc-media { display: block; overflow: hidden; border-radius: 18px; } .post-card .ph { aspect-ratio: 16/10; transition: transform .6s cubic-bezier(.2,.8,.2,1); } .post-card.is-feat .ph { aspect-ratio: 16/9; } .post-card a.pc-media:hover .ph { transform: scale(1.04); } .post-meta { display: flex; align-items: center; gap: 10px; margin: 18px 0 10px; font-size: 0.8rem; color: var(--faint); } .post-cat { color: var(--accent); font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; font-size: 0.72rem; } .post-meta .sep { width: 3px; height: 3px; border-radius: 50%; background: var(--faint); display: inline-block; } .post-card h3 { font-size: clamp(1.25rem,2vw,1.6rem); letter-spacing: -0.02em; line-height: 1.1; margin-bottom: 10px; } .post-card.is-feat h3 { font-size: clamp(1.7rem,3vw,2.4rem); } .post-card h3 a { transition: color .25s; } .post-card h3 a:hover { color: var(--accent); } .post-card p.excerpt { color: var(--muted); font-size: 0.98rem; flex: 1; } .post-card .link-arrow { margin-top: 16px; font-size: 0.92rem; } @media (max-width: 900px){ .post-card, .post-card.is-feat { grid-column: span 6; } } @media (max-width: 620px){ .post-card, .post-card.is-feat { grid-column: span 12; } } .article-head { padding-top: clamp(130px,16vh,200px); padding-bottom: clamp(16px,3vh,34px); } .article-head h1 { font-size: clamp(2.2rem,5.5vw,4.2rem); max-width: 18ch; margin: 18px 0; } .article-head .post-meta { font-size: 0.9rem; } .article-hero .ph { aspect-ratio: 21/9; border-radius: 24px; } .prose { max-width: 70ch; margin-inline: auto; } .prose > * + * { margin-top: 1.15em; } .prose p { color: var(--ink-soft); font-size: 1.12rem; line-height: 1.7; } .prose h2 { font-family: 'Bricolage Grotesque', sans-serif; font-weight: 700; font-size: clamp(1.5rem,3vw,2.1rem); letter-spacing: -0.025em; margin-top: 1.8em; line-height: 1.1; } .prose h3 { font-family: 'Bricolage Grotesque', sans-serif; font-weight: 600; font-size: clamp(1.2rem,2.4vw,1.5rem); letter-spacing: -0.02em; margin-top: 1.5em; } .prose ul, .prose ol { padding-left: 1.3em; color: var(--ink-soft); font-size: 1.1rem; line-height: 1.6; } .prose ul { list-style: none; padding-left: 0; } .prose ul li { position: relative; padding-left: 1.6em; margin-top: 0.6em; } .prose ul li::before { content: ""; position: absolute; left: 0; top: 0.62em; width: 10px; height: 10px; border-radius: 50%; background: var(--accent); } .prose ol { padding-left: 1.3em; } .prose ol li { margin-top: 0.6em; padding-left: 0.3em; } .prose ol li::marker { color: var(--accent); font-weight: 700; font-family: 'Bricolage Grotesque', sans-serif; } .prose strong { color: var(--ink); font-weight: 700; } .prose a { color: var(--accent); font-weight: 600; border-bottom: 1.5px solid var(--line-2); transition: border-color .25s; } .prose a:hover { border-color: var(--accent); } .prose blockquote { border-left: 3px solid var(--accent); padding: 0.2em 0 0.2em 1.2em; margin-left: 0; font-family: 'Bricolage Grotesque', sans-serif; font-weight: 500; font-size: clamp(1.3rem,2.6vw,1.7rem); letter-spacing: -0.02em; color: var(--ink); line-height: 1.3; } .prose .callout { background: var(--accent-soft); border-radius: 16px; padding: clamp(20px,3vw,28px); } .prose .callout p { color: var(--accent-d); } .prose .callout strong { color: var(--accent-d); } .article-foot { max-width: 70ch; margin: clamp(40px,6vw,72px) auto 0; padding-top: 30px; border-top: 1px solid var(--line); } .author-row { display: flex; align-items: center; gap: 16px; } .author-row .avatar { width: 56px; height: 56px; border-radius: 50%; flex: none; } .author-row .nm { font-family: 'Bricolage Grotesque', sans-serif; font-weight: 700; font-size: 1.1rem; } .author-row .rl { color: var(--muted); font-size: 0.92rem; } /* ============================================================ AMBIANCE SELON L'HEURE — aube · jour · couchant · nuit Couche indépendante du sélecteur de couleur (qui gère l'accent). data-daytime sur . Les règles surchargent --bg / surfaces après les palettes (chargées avant) → priorité à l'ambiance. ============================================================ */ :root { --sky-1: transparent; --sky-2: transparent; --sky-3: transparent; --sun-c: transparent; --sun-glow: transparent; --star-op: 0; } /* Transition douce entre les moments de la journée */ body { transition: background-color .9s ease, color .9s ease; } /* ---- Aube / lever de soleil ---- */ :root[data-daytime="aube"] { --bg: oklch(0.965 0.022 50); --sky-1: oklch(0.86 0.07 285); /* haut : lavande */ --sky-2: oklch(0.92 0.06 40); /* milieu : pêche clair */ --sky-3: oklch(0.90 0.08 25); /* horizon : rosé chaud */ --sun-c: oklch(0.93 0.10 70); --sun-glow: oklch(0.88 0.12 55); --star-op: 0; } /* ---- Plein jour / plein soleil ---- */ :root[data-daytime="jour"] { --bg: oklch(0.975 0.013 230); --sky-1: oklch(0.86 0.06 235); /* bleu ciel */ --sky-2: oklch(0.94 0.035 230); --sky-3: oklch(0.99 0.008 230); /* horizon clair */ --sun-c: oklch(0.97 0.06 95); --sun-glow: oklch(0.93 0.09 95); --star-op: 0; } /* ---- Coucher de soleil ---- */ :root[data-daytime="couchant"] { --bg: oklch(0.95 0.03 45); --sky-1: oklch(0.55 0.13 300); /* haut : mauve crépuscule */ --sky-2: oklch(0.78 0.13 35); /* corail */ --sky-3: oklch(0.82 0.14 55); /* horizon : orange doré */ --sun-c: oklch(0.80 0.16 50); --sun-glow: oklch(0.72 0.18 40); --star-op: 0; } /* ---- Nuit étoilée (sombre) ---- */ :root[data-daytime="nuit"] { color-scheme: dark; --bg: oklch(0.20 0.03 265); --surface: oklch(0.25 0.032 265); --surface-2: oklch(0.29 0.034 265); --ink: oklch(0.96 0.01 265); --ink-soft: oklch(0.85 0.014 265); --muted: oklch(0.70 0.02 265); --faint: oklch(0.56 0.022 265); --line: oklch(0.34 0.028 265); --line-2: oklch(0.43 0.032 265); --sky-1: oklch(0.16 0.035 275); /* nuit profonde */ --sky-2: oklch(0.22 0.04 270); --sky-3: oklch(0.30 0.05 285); /* halo bas */ --sun-c: oklch(0.94 0.02 280); /* lune */ --sun-glow: oklch(0.80 0.05 285); --star-op: 1; } /* Le canvas de page devient le ciel ; les cartes (--surface) restent lisibles */ :root[data-daytime] body { background-color: transparent; } :root[data-daytime] .sky-layer { display: block; } .sky-layer { display: none; position: fixed; inset: 0; z-index: -1; overflow: hidden; pointer-events: none; background: linear-gradient(180deg, var(--sky-1) 0%, var(--sky-2) 52%, var(--sky-3) 100%); transition: background 1.1s ease; } /* Astre (soleil le jour, lune la nuit) */ .sky-layer .celestial { position: absolute; width: 150px; height: 150px; border-radius: 50%; background: radial-gradient(circle at 50% 50%, var(--sun-c) 0%, var(--sun-c) 42%, transparent 72%); box-shadow: 0 0 120px 50px var(--sun-glow); transition: left 1.1s ease, top 1.1s ease, transform 1.1s ease, opacity 1.1s ease; opacity: 0.92; } :root[data-daytime="aube"] .celestial { left: 12%; top: 64%; transform: scale(0.92); } :root[data-daytime="jour"] .celestial { left: 74%; top: 12%; transform: scale(0.78); } :root[data-daytime="couchant"] .celestial { left: 68%; top: 60%; transform: scale(1.25); } :root[data-daytime="nuit"] .celestial { left: 78%; top: 16%; transform: scale(0.62); } /* Croissant de lune : un disque qui masque l'astre */ .sky-layer .moon-mask { position: absolute; width: 150px; height: 150px; border-radius: 50%; background: var(--bg); opacity: 0; transition: opacity 1.1s ease; box-shadow: none; } :root[data-daytime="nuit"] .sky-layer .moon-mask { opacity: 1; left: 74%; top: 13.4%; transform: scale(0.62); } /* Étoiles */ .sky-layer .stars { position: absolute; inset: 0; opacity: var(--star-op); transition: opacity 1.1s ease; } .sky-layer .stars i { position: absolute; width: 2px; height: 2px; border-radius: 50%; background: #fff; box-shadow: 0 0 4px 1px rgba(255,255,255,0.6); animation: twinkle 3.6s ease-in-out infinite; } .sky-layer .stars i.big { width: 3px; height: 3px; } @keyframes twinkle { 0%,100% { opacity: 0.25; } 50% { opacity: 1; } } /* Nuages discrets pour le jour/aube */ .sky-layer .cloud { position: absolute; background: rgba(255,255,255,0.5); border-radius: 100px; filter: blur(14px); opacity: 0; transition: opacity 1.1s ease; } :root[data-daytime="jour"] .sky-layer .cloud, :root[data-daytime="aube"] .sky-layer .cloud { opacity: 0.7; } /* Voile nuit pour la bande CTA (sombre) — adapter aux classes du site */ :root[data-daytime="nuit"] .cta-band { background: var(--surface-2); color: var(--ink); border: 1px solid var(--line); } :root[data-daytime="nuit"] .prose .callout p, :root[data-daytime="nuit"] .prose .callout strong { color: var(--ink); } @media (prefers-reduced-motion: reduce) { .sky-layer, .sky-layer .celestial, .sky-layer .moon-mask, .sky-layer .stars, .sky-layer .cloud { transition: none; } .sky-layer .stars i { animation: none; opacity: 0.7; } body { transition: none; } } /* ---- Bouton d'ambiance dans le header (pastille avec libellé) ---- */ .daytime-btn { display: inline-flex; align-items: center; gap: 8px; height: 44px; padding: 0 15px 0 13px; border-radius: 100px; color: var(--ink-soft); border: 1.5px solid var(--line-2); background: var(--surface); font-family: 'Hanken Grotesk', sans-serif; font-weight: 600; font-size: 0.9rem; letter-spacing: -0.01em; white-space: nowrap; flex: none; transition: transform .3s cubic-bezier(.2,.8,.2,1), border-color .3s, color .3s, background .3s; } .daytime-btn:hover { transform: translateY(-2px); border-color: var(--accent); color: var(--accent); } .daytime-btn svg { width: 19px; height: 19px; flex: none; } .daytime-btn .dt-label { line-height: 1; } @media (max-width: 600px) { .daytime-btn { width: 44px; padding: 0; justify-content: center; } .daytime-btn .dt-label { display: none; } } .daytime-toast { position: fixed; left: 50%; bottom: 28px; transform: translateX(-50%) translateY(20px); background: var(--ink); color: var(--bg); padding: 11px 20px; border-radius: 100px; font-family: 'Hanken Grotesk', sans-serif; font-weight: 600; font-size: 0.92rem; letter-spacing: -0.01em; display: inline-flex; align-items: center; gap: 9px; z-index: 9500; opacity: 0; pointer-events: none; box-shadow: 0 18px 44px -18px rgba(0,0,0,0.5); transition: opacity .35s, transform .35s; } .daytime-toast.show { opacity: 1; transform: translateX(-50%) translateY(0); } .daytime-toast .dt-ic { color: var(--accent); display: inline-flex; } :root[data-daytime="nuit"] .daytime-toast .dt-ic { color: var(--sun-c); }