/* ============================================================ Studio Aparté — thèmes pilotés par [data-theme] sur Thèmes : dark (défaut) · light · intermediate · source Tous les composants utilisent des variables sémantiques. ============================================================ */ :root, html[data-theme="dark"] { --bg: #0d0c0a; --bg-2: #060605; --surface: #16140f; --surface-2: #1e1b15; --surface-3: #262219; --text: #f1ece2; --text-soft: #b7afa1; --muted: #8a8071; --line: rgba(241,236,226,.12); --line-2: rgba(241,236,226,.22); --accent: #ff5a2c; --accent-2: #ff7d50; --accent-ink: #ff6f44; --on-accent: #1a0d05; --logo-filter: brightness(0) invert(1); --logo-op: .6; --ph-1: #2a2014; --ph-2: #0d0c0a; } html[data-theme="light"] { --bg: #faf7f1; --bg-2: #f1ece2; --surface: #ffffff; --surface-2: #fbf8f3; --surface-3: #f1ece2; --text: #181309; --text-soft: #5a5246; --muted: #8a8070; --line: rgba(24,19,9,.12); --line-2: rgba(24,19,9,.2); --accent: #ff5a2c; --accent-2: #ff7d50; --accent-ink: #c23a0c; --on-accent: #1a0d05; --logo-filter: none; --logo-op: .7; --ph-1: #ece4d6; --ph-2: #d6ccba; } html[data-theme="intermediate"] { --bg: #e3dccc; --bg-2: #d8cfbc; --surface: #efe9dc; --surface-2: #f3eee2; --surface-3: #e0d7c5; --text: #1f190d; --text-soft: #574f3f; --muted: #847a66; --line: rgba(31,25,13,.14); --line-2: rgba(31,25,13,.24); --accent: #ef4f22; --accent-2: #ff7d50; --accent-ink: #a83109; --on-accent: #1a0d05; --logo-filter: none; --logo-op: .75; --ph-1: #ddd3bf; --ph-2: #c8bda5; } html[data-theme="source"] { --bg: #ebe6dc; --bg-2: #e1dccf; --surface: #f3efe6; --surface-2: #f7f3ea; --surface-3: #e1dccf; --text: #1f1b14; --text-soft: #56503f; --muted: #8a8070; --line: rgba(31,27,20,.13); --line-2: rgba(31,27,20,.22); --accent: #ef5026; --accent-2: #ff7d50; --accent-ink: #b23509; --on-accent: #1a0d05; --logo-filter: none; --logo-op: .8; --ph-1: #e1dccf; --ph-2: #cdc5b2; } /* Nuit — minuit profond + champagne, élégant premium */ html[data-theme="night"] { --bg: #0e1117; --bg-2: #080b10; --surface: #161b24; --surface-2: #1d2330; --surface-3: #262d3b; --text: #eef1f6; --text-soft: #aab3c2; --muted: #79808f; --line: rgba(238,241,246,.12); --line-2: rgba(238,241,246,.22); --accent: #e0b15e; --accent-2: #f0cd8a; --accent-ink: #ecc270; --on-accent: #15110a; --logo-filter: brightness(0) invert(1); --logo-op: .6; --ph-1: #1d2330; --ph-2: #080b10; } /* Sauge — vert doux + terracotta, naturel et raffiné */ html[data-theme="sage"] { --bg: #eaece1; --bg-2: #dde0d0; --surface: #f3f4ec; --surface-2: #f6f7f0; --surface-3: #dfe2d2; --text: #1b1f14; --text-soft: #54584a; --muted: #828672; --line: rgba(27,31,20,.13); --line-2: rgba(27,31,20,.22); --accent: #aa3f18; --accent-2: #e08a5f; --accent-ink: #973812; --on-accent: #f6f1ea; --logo-filter: none; --logo-op: .78; --ph-1: #dfe2d2; --ph-2: #c9cdb8; } /* Éditorial — bone chaud + ocre, esprit magazine/maison */ html[data-theme="editorial"] { --bg: #f1e9da; --bg-2: #e7ddc9; --surface: #f8f1e4; --surface-2: #fbf5ea; --surface-3: #e7ddc9; --text: #211a0d; --text-soft: #5a503c; --muted: #8a7d63; --line: rgba(33,26,13,.14); --line-2: rgba(33,26,13,.24); --accent: #97581a; --accent-2: #dba74e; --accent-ink: #7c4a12; --on-accent: #fbf6ec; --logo-filter: none; --logo-op: .8; --ph-1: #e7ddc9; --ph-2: #d2c4a6; } /* Galerie — éditorial brutaliste, gallery-white + vermillon, angles vifs */ html[data-theme="gallery"] { --bg: #f3f1ea; --bg-2: #eae6db; --surface: #faf8f2; --surface-2: #ffffff; --surface-3: #ece8dd; --text: #0c0b09; --text-soft: #4c463b; --muted: #8a8272; --line: rgba(12,11,9,.16); --line-2: rgba(12,11,9,.3); --accent: #cf3413; --accent-2: #ff6a47; --accent-ink: #ab2c0d; --on-accent: #faf6ee; --logo-filter: none; --logo-op: .85; --ph-1: #ece8dd; --ph-2: #d8d2c2; } /* Couture — noir profond + or bronze, raffiné et premium */ html[data-theme="couture"] { --bg: #0c0b08; --bg-2: #070605; --surface: #15130e; --surface-2: #1c1913; --surface-3: #24201a; --text: #f3eee3; --text-soft: #b9b0a0; --muted: #8a8070; --line: rgba(243,238,227,.14); --line-2: rgba(243,238,227,.26); --accent: #c9a86a; --accent-2: #e0c690; --accent-ink: #d4b576; --on-accent: #15110a; --logo-filter: brightness(0) invert(1); --logo-op: .58; --ph-1: #24201a; --ph-2: #070605; } * { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; } body { margin: 0; font-family: var(--sans); font-size: 17px; line-height: 1.6; color: var(--text); background: var(--bg); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } :root { --serif: "Fraunces", Georgia, "Times New Roman", serif; --sans: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; --maxw: 1240px; --radius: 14px; --shadow: 0 30px 70px -30px rgba(0,0,0,.55); --t: 240ms cubic-bezier(.4,0,.2,1); } img { max-width: 100%; height: auto; display: block; } a { color: inherit; text-decoration: none; } p { margin: 0 0 1rem; } ::selection { background: var(--accent); color: var(--on-accent); } h1, h2, h3 { font-family: var(--serif); font-weight: 500; line-height: 1.04; letter-spacing: -.015em; margin: 0 0 .5em; color: var(--text); } .container { width: 100%; max-width: var(--maxw); margin-inline: auto; padding-inline: clamp(1.1rem, 4vw, 2.4rem); } .narrow { max-width: 840px; } .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; } .hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; } .skip-link { position: absolute; left: 1rem; top: -3rem; z-index: 200; background: var(--accent); color: var(--on-accent); padding: .7rem 1.1rem; border-radius: 999px; font-weight: 700; transition: top var(--t); } .skip-link:focus { top: 1rem; } :focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; border-radius: 4px; } /* ---------- Header / nav ---------- */ .site-header { position: sticky; top: 0; z-index: 100; background: color-mix(in srgb, var(--bg) 80%, transparent); backdrop-filter: saturate(140%) blur(12px); border-bottom: 1px solid transparent; transition: border-color var(--t), background var(--t); } .site-header.is-scrolled { border-color: var(--line); background: color-mix(in srgb, var(--bg) 92%, transparent); } .header-inner { display: flex; align-items: center; justify-content: space-between; gap: 1rem; min-height: 74px; } .brand-word { font-family: var(--serif); font-size: 1.6rem; font-weight: 600; color: var(--text); } .site-header .brand-word { text-transform: uppercase; letter-spacing: .04em; } .brand-dot { color: var(--accent); } .site-nav { display: flex; align-items: center; gap: clamp(1rem, 2.5vw, 2.1rem); } .site-nav a { font-size: .92rem; font-weight: 500; color: var(--text-soft); position: relative; padding: .3rem 0; transition: color var(--t); } .site-nav a:hover, .site-nav a[aria-current="page"] { color: var(--text); } .site-nav a:not(.nav-cta)::after { content: ""; position: absolute; left: 0; bottom: -2px; height: 1.5px; width: 0; background: var(--accent); transition: width var(--t); } .site-nav a:not(.nav-cta):hover::after, .site-nav a[aria-current="page"]:not(.nav-cta)::after { width: 100%; } .nav-cta { background: var(--accent); color: var(--on-accent) !important; padding: .6rem 1.2rem; border-radius: 999px; font-weight: 700 !important; } .nav-cta:hover { background: var(--text); color: var(--bg) !important; } .nav-toggle { display: none; background: none; border: 0; width: 44px; height: 44px; padding: 10px; cursor: pointer; } .nav-toggle span { display: block; height: 2px; background: var(--text); margin: 4px 0; border-radius: 2px; transition: var(--t); } /* ---------- Buttons ---------- */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: .5rem; font-family: var(--sans); font-weight: 600; font-size: 1rem; line-height: 1; padding: .9rem 1.6rem; border-radius: 999px; border: 1.5px solid transparent; cursor: pointer; transition: transform var(--t), background var(--t), color var(--t), border-color var(--t); text-align: center; } .btn:hover { transform: translateY(-2px); } .btn-lg { padding: 1.1rem 2rem; font-size: 1.05rem; } .btn-sm { padding: .5rem 1rem; font-size: .9rem; } .btn-primary { background: var(--accent); color: var(--on-accent); } .btn-primary:hover { background: var(--accent-2); } .btn-ghost { background: transparent; color: var(--text); border-color: var(--line-2); } .btn-ghost:hover { border-color: var(--accent); color: var(--accent-ink); } .btn-light-ghost { background: transparent; color: #f4efe7; border-color: rgba(244,239,231,.5); } .btn-light-ghost:hover { background: var(--accent); color: var(--on-accent); border-color: var(--accent); } .cta-row { display: flex; flex-wrap: wrap; gap: .9rem; margin-top: 1.6rem; } .link-arrow { font-weight: 600; color: var(--accent-ink); border-bottom: 1.5px solid var(--accent); padding-bottom: 2px; } .link-arrow::after { content: " →"; } /* ---------- Eyebrow / titres ---------- */ .eyebrow { font-family: var(--sans); font-size: .78rem; font-weight: 700; letter-spacing: .22em; text-transform: uppercase; color: var(--accent-ink); margin: 0 0 1rem; } .eyebrow-light { color: var(--accent-ink); } /* ---------- Hero (toujours sombre/cinéma, indépendant du thème) ---------- */ .hero { position: relative; min-height: min(96vh, 880px); display: flex; align-items: flex-end; color: #f4efe7; background: #0d0c0a; overflow: hidden; } .hero[style*="--poster"] { background-image: var(--poster); background-size: cover; background-position: center; } .hero-media { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 0; } .hero-overlay { position: absolute; inset: 0; z-index: 1; background: linear-gradient(180deg, rgba(13,12,10,.35) 0%, rgba(13,12,10,calc(var(--overlay, .55) + .2)) 100%), radial-gradient(130% 80% at 15% 100%, rgba(13,12,10,.6), transparent 70%); } .hero-inner { position: relative; z-index: 2; padding-block: clamp(3rem, 9vh, 6rem); max-width: 1000px; } .hero .eyebrow, .hero .eyebrow-light { color: var(--accent-2); } .hero-title { font-size: clamp(3rem, 9vw, 7.2rem); line-height: .94; letter-spacing: -.03em; margin: .4rem 0 1.3rem; font-weight: 500; color: #f4efe7; } .hero-title span { display: block; } .hero-title span:nth-child(2) { opacity: .96; } .hero-title span:nth-child(3) { font-style: italic; color: var(--accent-2); } .hero-scroll { position: absolute; left: 50%; bottom: 1.4rem; transform: translateX(-50%); z-index: 3; width: 26px; height: 42px; border: 2px solid rgba(244,239,231,.5); border-radius: 999px; } .hero-scroll span { position: absolute; left: 50%; top: 8px; width: 4px; height: 8px; background: var(--accent-2); border-radius: 4px; transform: translateX(-50%); animation: scroll 1.6s infinite; } @keyframes scroll { 0% { opacity: 0; top: 8px; } 40% { opacity: 1; } 100% { opacity: 0; top: 22px; } } /* ---------- Marquee ---------- */ .pillars { background: var(--bg-2); border-block: 1px solid var(--line); } .pillars .marquee { padding-block: 1.6rem; } .marquee { overflow: hidden; } .marquee-inner { display: flex; width: max-content; animation: marquee 30s linear infinite; } .marquee:hover .marquee-inner { animation-play-state: paused; } .marquee-group { display: flex; align-items: center; flex: none; } .marquee-group > * { padding-inline: clamp(1.3rem, 4vw, 3.2rem); } @keyframes marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } } .pillars .marquee-group span { font-family: var(--serif); font-style: italic; font-size: clamp(1.4rem, 3.2vw, 2.6rem); color: var(--text); white-space: nowrap; } .pillars .marquee-group span::after { content: "✳"; margin-left: clamp(1.3rem, 4vw, 3.2rem); color: var(--accent); font-style: normal; font-size: .6em; vertical-align: middle; } /* ---------- Sections ---------- */ .section { padding-block: clamp(4rem, 10vw, 8rem); } .section-alt { background: var(--surface); } .section-dark { background: var(--bg-2); } .section-title { font-size: clamp(2.2rem, 5.4vw, 4rem); max-width: 20ch; } .section-lead { font-size: clamp(1.1rem, 1.6vw, 1.35rem); max-width: 60ch; color: var(--text-soft); } .section-lead a { color: var(--accent-ink); font-weight: 600; } .section-cta { margin-top: 2rem; } .page-hero { padding-block: clamp(4rem, 9vw, 7rem) clamp(1.5rem, 4vw, 3rem); background: var(--surface); border-bottom: 1px solid var(--line); } .page-title { font-size: clamp(2.8rem, 7vw, 5.2rem); letter-spacing: -.025em; } .page-lead { font-size: clamp(1.15rem, 1.8vw, 1.45rem); max-width: 60ch; color: var(--text-soft); } /* ---------- Steps ---------- */ .steps { list-style: none; padding: 0; margin: 2.6rem 0 0; display: grid; gap: 1.4rem; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); } .steps li { background: var(--surface-2); border: 1px solid var(--line); border-radius: var(--radius); padding: 2rem 1.7rem; transition: transform var(--t), border-color var(--t); } .steps li:hover { transform: translateY(-5px); border-color: var(--accent); } .step-num { font-family: var(--serif); font-size: 2.8rem; color: var(--accent-ink); display: block; line-height: 1; margin-bottom: .6rem; } .steps h3 { font-size: 1.4rem; } .steps p { color: var(--text-soft); font-size: .98rem; margin: 0; } /* ---------- Values ---------- */ .values-grid { display: grid; gap: 1.4rem; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); margin-top: 2.6rem; } .value { background: var(--surface-2); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; transition: transform var(--t), border-color var(--t); } .value:hover { transform: translateY(-5px); border-color: var(--accent); } .value-media { aspect-ratio: 3 / 2; overflow: hidden; background: var(--surface-3); } .value-media img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .6s ease; } .value:hover .value-media img { transform: scale(1.06); } .value-body { padding: 1.4rem 1.5rem 1.7rem; } .value h3 { font-size: 1.2rem; text-transform: uppercase; letter-spacing: .05em; font-family: var(--sans); font-weight: 800; color: var(--text); } .value p { color: var(--text-soft); font-size: .95rem; margin: 0; } /* ---------- Logo wall ---------- */ .logo-wall { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; margin-top: 2.2rem; } .logo-cell { background: var(--surface); display: flex; align-items: center; justify-content: center; min-height: 120px; padding: 1.4rem; } .logo-cell img { max-height: 46px; max-width: 150px; width: auto; height: auto; object-fit: contain; filter: var(--logo-filter); opacity: var(--logo-op); transition: opacity var(--t); } .logo-cell:hover img { opacity: 1; } /* Carrousel de logos (marquee défilant) */ .logo-carousel { margin-top: 2.4rem; -webkit-mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent); mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent); } .logo-carousel .marquee-inner { animation-duration: 42s; } .logo-carousel .marquee-group { gap: clamp(2.2rem, 5vw, 4.8rem); padding-block: .6rem; } .logo-carousel .marquee-group > * { padding-inline: 0; } .logo-slide { display: inline-flex; align-items: center; flex: none; } .logo-slide img { height: 50px; width: auto; object-fit: contain; filter: var(--logo-filter); opacity: var(--logo-op); transition: opacity var(--t); } .logo-carousel:hover .marquee-inner { animation-play-state: paused; } .logo-slide img:hover { opacity: 1; } /* ---------- Expertise ---------- */ .expertise-grid { display: grid; gap: 1.4rem; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); margin-top: 2.6rem; } .expertise { background: var(--surface-2); border: 1px solid var(--line); border-radius: var(--radius); padding: 2rem; transition: border-color var(--t), transform var(--t); } .expertise:hover { border-color: var(--accent); transform: translateY(-4px); } .expertise-num { font-family: var(--serif); color: var(--accent-ink); font-size: 1.3rem; } .expertise h3 { font-size: 1.6rem; margin: .3rem 0 .5rem; } .expertise p { color: var(--text-soft); font-size: .97rem; } .expertise ul { list-style: none; padding: 0; margin: 1rem 0 0; display: flex; flex-wrap: wrap; gap: .5rem; } .expertise li { font-size: .82rem; background: var(--surface-3); border: 1px solid var(--line); border-radius: 999px; padding: .3rem .85rem; color: var(--text-soft); } /* ---------- Offers ---------- */ .offers { display: grid; gap: 1.4rem; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); margin-top: 2.6rem; } .offer { padding: 2rem; background: var(--surface-2); border-radius: var(--radius); border: 1px solid var(--line); border-top: 3px solid var(--accent); } .offer h3 { font-size: 1.6rem; font-style: italic; } .offer p { color: var(--text-soft); font-size: .97rem; margin: 0; } /* ---------- Cases ---------- */ .cases-grid { display: grid; gap: 1.8rem; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); margin-top: 2.6rem; } .case-card { background: var(--surface-2); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; transition: transform var(--t), border-color var(--t); } .case-card:hover { transform: translateY(-6px); border-color: var(--accent); } .case-media { aspect-ratio: 16 / 10; background: var(--surface-3); overflow: hidden; } .case-media img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s ease; } .case-card:hover .case-media img { transform: scale(1.05); } .case-media-placeholder { display: flex; align-items: center; justify-content: center; background: linear-gradient(135deg, var(--ph-1), var(--ph-2)); } .case-media-placeholder span { font-family: var(--serif); font-style: italic; color: var(--accent); font-size: 1.5rem; } .case-body { padding: 1.5rem 1.6rem 1.8rem; } .case-meta { font-size: .78rem; letter-spacing: .1em; text-transform: uppercase; color: var(--accent-ink); margin: 0 0 .5rem; } .case-body h3 { font-size: 1.35rem; } .case-body p { color: var(--text-soft); font-size: .96rem; } .case-result { display: inline-block; margin-top: .6rem; font-weight: 700; color: var(--accent-ink); font-size: .95rem; } /* ---------- Talents ---------- */ .talents-grid { display: grid; gap: 1.8rem; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); margin-top: 2.6rem; } .talent-card { background: var(--surface-2); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; transition: transform var(--t), border-color var(--t); } .talent-card:hover { transform: translateY(-5px); border-color: var(--accent); } .talent-photo { aspect-ratio: 4 / 5; background: var(--surface-3); overflow: hidden; } .talent-photo img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s ease; } .talent-card:hover .talent-photo img { transform: scale(1.05); } .talent-photo-placeholder { display: flex; align-items: center; justify-content: center; background: linear-gradient(135deg, var(--ph-1), var(--ph-2)); } .talent-photo-placeholder span { font-family: var(--serif); font-size: 3rem; color: var(--accent); } .talent-body { padding: 1.3rem 1.4rem 1.6rem; } .talent-body h3 { font-size: 1.25rem; margin-bottom: .2rem; } .talent-expertise { font-weight: 600; color: var(--text); font-size: .95rem; margin: 0 0 .3rem; } .talent-meta { font-size: .8rem; text-transform: uppercase; letter-spacing: .07em; color: var(--accent-ink); margin: 0 0 .6rem; } .talent-bio { color: var(--text-soft); font-size: .92rem; margin: 0; } /* ---------- Studio / manifesto ---------- */ .manifesto { font-family: var(--serif); font-size: clamp(1.6rem, 3.6vw, 2.7rem); font-style: italic; line-height: 1.28; margin: 0 0 1.5rem; color: var(--text); border: 0; padding: 0; } .lead-emphasis { font-family: var(--serif); font-style: italic; font-size: 1.4rem; color: var(--accent-ink); } .cities { display: flex; flex-wrap: wrap; gap: 1.5rem 3rem; margin-top: 1.5rem; } .cities a, .cities span { font-family: var(--serif); font-size: clamp(1.8rem, 4.4vw, 3rem); position: relative; padding-left: 1.5rem; transition: color var(--t); color: var(--text); } .cities a::before, .cities span::before { content: "·"; position: absolute; left: 0; color: var(--accent); } .cities a:hover { color: var(--accent-ink); } .founders { display: flex; flex-wrap: wrap; gap: 1.4rem; margin-top: 2rem; } .founder { background: var(--surface-2); border: 1px solid var(--line); border-radius: var(--radius); padding: 1.4rem 1.8rem; min-width: 200px; } .founder h3 { font-size: 1.4rem; margin-bottom: .1rem; } .founder p { color: var(--muted); margin: 0 0 .4rem; } .founder a { color: var(--accent-ink); font-weight: 600; } .founders-photo { margin: 2.2rem 0 0; border-radius: var(--radius); overflow: hidden; max-width: 580px; box-shadow: var(--shadow); border: 1px solid var(--line); } .founders-photo img { width: 100%; height: auto; display: block; } .legal h2 { font-size: 1.4rem; margin-top: 2rem; } .legal p { color: var(--text-soft); } .legal a { color: var(--accent-ink); } .legal .todo { color: var(--accent-ink); font-style: italic; } /* ---------- CTA band (bloc accent, indépendant du thème) ---------- */ .cta-band { background: var(--accent); color: #1a0d06; text-align: center; padding-block: clamp(4rem, 9vw, 7rem); } .cta-band .eyebrow { color: #5a1f08; } .cta-band h2 { font-size: clamp(2.2rem, 5vw, 3.8rem); margin-inline: auto; color: #160a04; } .cta-band-text { max-width: 56ch; margin-inline: auto; color: #3a1c0c; } .cta-band .cta-row { justify-content: center; } .cta-band .btn-primary { background: #160a04; color: #ffb59a; } .cta-band .btn-primary:hover { background: #000; color: #fff; } .cta-band .btn-ghost { border-color: rgba(22,10,4,.4); color: #160a04; } .cta-band .btn-ghost:hover { background: #160a04; color: #ffb59a; border-color: #160a04; } /* ---------- Lead magnet ---------- */ .lead-magnet { text-align: center; } .lead-magnet .section-title, .lead-magnet .section-lead { margin-inline: auto; } /* ---------- Forms ---------- */ .form, .diag-form { margin-top: 1rem; } .field { margin-bottom: 1.2rem; } .field-row { display: grid; gap: 1.2rem; grid-template-columns: 1fr 1fr; } .field label { display: block; font-weight: 600; font-size: .92rem; margin-bottom: .4rem; color: var(--text); } .field input, .field textarea, .field select { width: 100%; font: inherit; font-size: 1rem; color: var(--text); background: var(--surface-3); border: 1.5px solid var(--line-2); border-radius: 12px; padding: .85rem 1rem; transition: border-color var(--t), box-shadow var(--t); } .field input::placeholder, .field textarea::placeholder { color: var(--muted); } .field input:focus, .field textarea:focus, .field select:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 28%, transparent); } .field.is-error input, .field.is-error textarea { border-color: #e0492a; } .field textarea { resize: vertical; } .form-note { font-size: .85rem; color: var(--muted); margin-top: 1rem; } .form-note a { color: var(--accent-ink); } .alert { border-radius: var(--radius); padding: 1.3rem 1.5rem; border: 1px solid var(--line); background: var(--surface-2); margin-bottom: 1.5rem; } .alert-success { border-color: #3f7d52; background: color-mix(in srgb, #3f7d52 16%, var(--surface)); } .alert-error { border-color: #c0563f; background: color-mix(in srgb, #c0563f 16%, var(--surface)); } .alert-success h2 { color: var(--text); } .contact-layout { display: grid; gap: clamp(2rem, 5vw, 4rem); grid-template-columns: 1fr; } .contact-aside h2 { font-size: 1.2rem; font-family: var(--sans); font-weight: 700; } .contact-aside a { color: var(--accent-ink); font-weight: 600; } .contact-aside .mt { margin-top: 1.4rem; } .contact-cities { margin-top: 1.6rem; color: var(--muted); font-family: var(--serif); font-style: italic; font-size: 1.2rem; } @media (min-width: 820px) { .contact-layout { grid-template-columns: 320px 1fr; } } /* ---------- Diagnostic ---------- */ .diag-form { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: clamp(1.5rem, 4vw, 2.8rem); box-shadow: var(--shadow); } .diag-progress { height: 6px; background: var(--surface-3); border-radius: 999px; overflow: hidden; margin-bottom: 2rem; } .diag-progress-bar { display: block; height: 100%; width: 20%; background: linear-gradient(90deg, var(--accent), var(--accent-2)); border-radius: 999px; transition: width 350ms ease; } .diag-step { border: 0; padding: 0; margin: 0; } .diag-step[hidden] { display: none; } .diag-step-counter { font-size: .8rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--accent-ink); padding: 0; } .diag-q { font-size: clamp(1.5rem, 3vw, 2.2rem); margin: .4rem 0 .3rem; } .diag-q.is-error { color: #e0492a; } .diag-help { color: var(--muted); margin-bottom: 1.4rem; } .diag-options { display: grid; gap: .8rem; margin-bottom: 1.8rem; } .diag-option { display: flex; align-items: center; gap: .9rem; padding: 1.05rem 1.2rem; border: 1.5px solid var(--line-2); border-radius: 12px; cursor: pointer; transition: border-color var(--t), background var(--t); background: var(--surface-2); } .diag-option:hover { border-color: var(--accent); } .diag-option input { width: 20px; height: 20px; accent-color: var(--accent); flex: none; } .diag-option span { font-weight: 500; } .diag-option:has(input:checked) { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 14%, var(--surface-2)); } .diag-nav { display: flex; justify-content: space-between; gap: 1rem; margin-top: 1rem; } .diag-nav .btn[data-next], .diag-nav .btn[type="submit"] { margin-left: auto; } .diag-step.shake { animation: shake 360ms; } @keyframes shake { 0%,100% { transform: translateX(0); } 20%,60% { transform: translateX(-6px); } 40%,80% { transform: translateX(6px); } } .result-card { background: var(--surface-2); border: 1px solid var(--line); border-left: 4px solid var(--accent); border-radius: var(--radius); padding: 1.8rem 2rem; margin: 1.5rem 0; } .result-profile { font-size: 1.4rem; font-family: var(--serif); margin-bottom: .6rem; } .result-synth { color: var(--text-soft); margin: 0; } .result-mail-note { color: var(--muted); font-size: .92rem; } .agenda-embed { border-radius: var(--radius); overflow: hidden; border: 1px solid var(--line); background: #fff; margin-top: 1.5rem; } /* ---------- FAQ ---------- */ .faq-list { margin-top: 2rem; display: grid; gap: .8rem; } .faq-item { background: var(--surface-2); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; } .faq-item summary { cursor: pointer; padding: 1.15rem 1.4rem; font-family: var(--serif); font-size: 1.2rem; font-weight: 500; list-style: none; display: flex; justify-content: space-between; align-items: center; gap: 1rem; color: var(--text); } .faq-item summary::-webkit-details-marker { display: none; } .faq-item summary::after { content: "+"; color: var(--accent); font-size: 1.6rem; line-height: 1; transition: transform var(--t); } .faq-item[open] summary::after { transform: rotate(45deg); } .faq-answer { padding: 0 1.4rem 1.3rem; color: var(--text-soft); } .faq-answer p { margin: 0; } /* ---------- Footer ---------- */ .site-footer { background: var(--bg-2); color: var(--text-soft); padding-block: clamp(3.5rem, 6vw, 5rem) 1.5rem; border-top: 1px solid var(--line); } .footer-grid { display: grid; gap: 2rem; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); padding-bottom: 2.5rem; border-bottom: 1px solid var(--line); } .footer-brand .brand-word { color: var(--text); } .footer-brand p { margin-top: .8rem; font-size: .92rem; } .footer-col h3 { font-family: var(--sans); font-size: .8rem; letter-spacing: .14em; text-transform: uppercase; color: var(--accent-ink); font-weight: 700; margin: 0 0 .9rem; } .footer-col h3.mt { margin-top: 1.4rem; } .footer-col a { display: block; color: var(--text-soft); padding: .22rem 0; font-size: .95rem; transition: color var(--t); } .footer-col a:hover { color: var(--accent-ink); } .footer-bottom { display: flex; flex-wrap: wrap; gap: 1rem; justify-content: space-between; align-items: center; padding-top: 1.5rem; font-size: .85rem; } .footer-bottom nav { display: flex; flex-wrap: wrap; gap: 1.2rem; } .footer-bottom a:hover { color: var(--accent-ink); } /* ---------- Cookie banner ---------- */ .cookie-banner { position: fixed; left: 0; right: 0; bottom: 0; z-index: 150; background: var(--surface); border-top: 1px solid var(--line-2); box-shadow: 0 -10px 40px -20px rgba(0,0,0,.4); } .cookie-inner { display: flex; flex-wrap: wrap; gap: 1rem; align-items: center; justify-content: space-between; padding-block: 1rem; } .cookie-inner p { margin: 0; font-size: .9rem; max-width: 60ch; color: var(--text-soft); } .cookie-inner a { color: var(--accent-ink); font-weight: 600; } .cookie-actions { display: flex; gap: .6rem; } /* ---------- Responsive nav ---------- */ @media (max-width: 880px) { .nav-toggle { display: block; } .site-nav { position: fixed; inset: 74px 0 auto 0; flex-direction: column; align-items: flex-start; gap: 0; background: var(--surface); border-bottom: 1px solid var(--line); padding: 1rem clamp(1.1rem, 4vw, 2.2rem) 1.5rem; transform: translateY(-130%); transition: transform var(--t); box-shadow: var(--shadow); } .site-nav.is-open { transform: translateY(0); } .site-nav a { width: 100%; padding: .85rem 0; font-size: 1.1rem; border-bottom: 1px solid var(--line); } .nav-cta { margin-top: .8rem; align-self: stretch; text-align: center; } .field-row { grid-template-columns: 1fr; } } /* ============================================================ Variations de mise en page par thème (artistiques / premium) ============================================================ */ /* GALERIE — brutaliste éditorial : angles vifs, typo démesurée, cartes plates */ html[data-theme="gallery"] .section-title { font-size: clamp(2.7rem, 7.4vw, 5.8rem); letter-spacing: -.035em; line-height: .98; } html[data-theme="gallery"] .page-title { font-size: clamp(3rem, 8.5vw, 6.4rem); } html[data-theme="gallery"] .section { padding-block: clamp(4.5rem, 11vw, 9.5rem); } html[data-theme="gallery"] .eyebrow { letter-spacing: .32em; } html[data-theme="gallery"] .value, html[data-theme="gallery"] .expertise, html[data-theme="gallery"] .case-card, html[data-theme="gallery"] .talent-card, html[data-theme="gallery"] .offer, html[data-theme="gallery"] .steps li, html[data-theme="gallery"] .faq-item, html[data-theme="gallery"] .founder, html[data-theme="gallery"] .diag-form, html[data-theme="gallery"] .result-card, html[data-theme="gallery"] .logo-wall, html[data-theme="gallery"] .field input, html[data-theme="gallery"] .field textarea, html[data-theme="gallery"] .diag-option, html[data-theme="gallery"] .btn, html[data-theme="gallery"] .nav-cta, html[data-theme="gallery"] .expertise li, html[data-theme="gallery"] .founders-photo, html[data-theme="gallery"] .value-media, html[data-theme="gallery"] .case-media, html[data-theme="gallery"] .talent-photo { border-radius: 0; } html[data-theme="gallery"] .expertise, html[data-theme="gallery"] .offer, html[data-theme="gallery"] .steps li { background: transparent; } html[data-theme="gallery"] .offer { border-top-width: 4px; } html[data-theme="gallery"] .section-alt { border-top: 2px solid var(--text); } /* COUTURE — raffiné : eyebrows serif italique, filets dorés, arrondis généreux, chiffres serif */ html[data-theme="couture"] .eyebrow, html[data-theme="couture"] .eyebrow-light { font-family: var(--serif); font-style: italic; text-transform: none; letter-spacing: .02em; font-size: 1.1rem; font-weight: 500; } html[data-theme="couture"] .section-alt { border-top: 1px solid var(--accent); } html[data-theme="couture"] .value, html[data-theme="couture"] .expertise, html[data-theme="couture"] .case-card, html[data-theme="couture"] .talent-card, html[data-theme="couture"] .offer, html[data-theme="couture"] .steps li, html[data-theme="couture"] .faq-item, html[data-theme="couture"] .founder, html[data-theme="couture"] .diag-form, html[data-theme="couture"] .value-media, html[data-theme="couture"] .case-media, html[data-theme="couture"] .founders-photo { border-radius: 20px; } html[data-theme="couture"] .step-num, html[data-theme="couture"] .expertise-num, html[data-theme="couture"] .case-meta, html[data-theme="couture"] .talent-meta, html[data-theme="couture"] .case-result { font-family: var(--serif); } html[data-theme="couture"] .case-meta, html[data-theme="couture"] .talent-meta { text-transform: none; letter-spacing: 0; font-style: italic; font-size: .95rem; } html[data-theme="couture"] .section-title { font-weight: 400; } /* GALERIE — compo magazine : eyebrow-masthead + grandes colonnes */ html[data-theme="gallery"] .eyebrow { display: inline-block; border-top: 2px solid var(--text); padding-top: .9rem; margin-bottom: 1.4rem; } html[data-theme="gallery"] .values-grid, html[data-theme="gallery"] .cases-grid { grid-template-columns: repeat(auto-fit, minmax(370px, 1fr)); gap: 1.8rem; } html[data-theme="gallery"] .expertise-grid, html[data-theme="gallery"] .offers { grid-template-columns: repeat(2, minmax(0, 1fr)); } html[data-theme="gallery"] .section-lead, html[data-theme="gallery"] .page-lead { font-size: clamp(1.2rem, 2.1vw, 1.65rem); max-width: 72ch; } html[data-theme="gallery"] .value h3 { font-size: 1.45rem; } html[data-theme="gallery"] .expertise h3, html[data-theme="gallery"] .offer h3 { font-size: 1.9rem; } /* COUTURE — composition centrée, symétrique */ html[data-theme="couture"] .section > .container > .eyebrow, html[data-theme="couture"] .section > .container > .section-title, html[data-theme="couture"] .section > .container > .section-lead, html[data-theme="couture"] .section > .container > .section-cta, html[data-theme="couture"] .page-hero .container { text-align: center; } html[data-theme="couture"] .section > .container > .section-title, html[data-theme="couture"] .section > .container > .section-lead, html[data-theme="couture"] .page-hero .page-lead { margin-inline: auto; } html[data-theme="couture"] .page-hero .cta-row, html[data-theme="couture"] .section > .container > .cta-row { justify-content: center; } html[data-theme="couture"] .manifesto { text-align: center; } html[data-theme="couture"] .cities, html[data-theme="couture"] .founders { justify-content: center; } @media (max-width: 760px) { html[data-theme="gallery"] .expertise-grid, html[data-theme="gallery"] .offers { grid-template-columns: 1fr; } } /* ============ Motion ============ */ .has-reveal .reveal { opacity: 0; transform: translateY(36px); transition: opacity .9s cubic-bezier(.22,.7,.2,1), transform .9s cubic-bezier(.22,.7,.2,1); will-change: opacity, transform; } .has-reveal .reveal.is-in { opacity: 1; transform: none; } .has-reveal .values-grid .reveal, .has-reveal .cases-grid .reveal, .has-reveal .talents-grid .reveal, .has-reveal .expertise-grid .reveal, .has-reveal .offers .reveal, .has-reveal .steps .reveal, .has-reveal .logo-wall .reveal { transition-delay: calc(var(--i, 0) * 85ms); } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; } .marquee-inner { animation: none !important; } .has-reveal .reveal { opacity: 1 !important; transform: none !important; } }