/* ========================================================= DIGITAL FACTORY — Shared stylesheet --------------------------------------------------------- THEMING SYSTEM Each theme overrides a set of design tokens (color, type, surface treatment). All UI components consume these tokens exclusively, so swapping `data-theme` on reskins the entire site without DOM changes. Available themes (set on ) : • atelier — editorial-tech sombre, ambre chaud (default) • manuscrit — papier crème, encre noire, accents rouges • ingenieur — blanc franc, bleu marine, monochrome technique • neon — noir profond, vert lime électrique ========================================================= */ /* -------- THEME · ATELIER (default) ----------------------- */ :root, html[data-theme="atelier"] { --ink: #0e0d0b; --paper: #f4efe6; --paper-2: #ebe4d6; --char: #1a1816; --line: #2b2824; --line-light: #d8cfbd; --accent: #d97a2c; --accent-soft: #e89a5c; --accent-glow: rgba(217, 122, 44, 0.18); --accent-glow-soft: rgba(217, 122, 44, 0.04); --accent-shadow: rgba(217, 122, 44, 0.5); --accent-shadow-faint: rgba(217, 122, 44, 0.13); --accent-border-soft: rgba(217, 122, 44, 0.4); --accent-tint: rgba(217, 122, 44, 0.08); --secondary: #6b7a5a; --tertiary: #c46a5e; --muted: #6e6a62; --muted-2: #8b857a; --bg-page: var(--ink); --fg-page: var(--paper); --bg-nav: rgba(14, 13, 11, 0.82); --bg-nav-scrolled: rgba(14, 13, 11, 0.92); --bg-card: linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.005)); --bg-input: rgba(255,255,255,0.03); --bg-input-focus: rgba(255,255,255,0.05); --bg-experts: #08080a; --bg-footer: #07060a; --border-light: rgba(244, 239, 230, 0.2); --border-paper: rgba(244, 239, 230, 0.06); --fg-muted-soft: rgba(244, 239, 230, 0.78); --fg-muted-soft-2: rgba(244, 239, 230, 0.7); --fg-muted-soft-3: rgba(244, 239, 230, 0.65); --fg-muted-soft-4: rgba(244, 239, 230, 0.6); --fg-muted-soft-strong: rgba(244, 239, 230, 0.92); --serif: 'Fraunces', 'Times New Roman', serif; --sans: 'Inter Tight', -apple-system, sans-serif; --mono: 'JetBrains Mono', monospace; --display-weight: 300; --display-italic-weight: 400; --grain-opacity: 0.06; --grain-blend: overlay; --radius: 4px; --radius-card: 6px; /* Sections inversées (manifeste, metrics, CTA banner) : prennent la couleur opposée au fond principal */ --bg-inverted: var(--paper); --fg-inverted: var(--ink); --line-inverted: var(--line-light); --maxw: 1320px; --gutter: clamp(20px, 4vw, 56px); } /* -------- THEME · MANUSCRIT ------------------------------- */ /* Inspiration : carnet de cabinet, vélin, encre noire, accents rouge cinabre. Posture artisanale et intellectuelle. */ html[data-theme="manuscrit"] { --ink: #1a1410; --paper: #f5ecdc; --paper-2: #ede2cd; --char: #2a2118; --line: #d4c5ad; --line-light: #c9b896; --accent: #b3402a; --accent-soft: #c75a44; --accent-glow: rgba(179, 64, 42, 0.14); --accent-glow-soft: rgba(179, 64, 42, 0.03); --accent-shadow: rgba(179, 64, 42, 0.35); --accent-shadow-faint: rgba(179, 64, 42, 0.10); --accent-border-soft: rgba(179, 64, 42, 0.4); --accent-tint: rgba(179, 64, 42, 0.07); --secondary: #4a5d3a; --tertiary: #8a6a3a; --muted: #6f6552; --muted-2: #8a7e67; --bg-page: var(--paper); --fg-page: var(--ink); --bg-nav: rgba(245, 236, 220, 0.85); --bg-nav-scrolled: rgba(245, 236, 220, 0.95); --bg-card: linear-gradient(180deg, rgba(255,255,255,0.55), rgba(255,255,255,0.25)); --bg-input: rgba(255,255,255,0.5); --bg-input-focus: rgba(255,255,255,0.85); --bg-experts: #ede2cd; --bg-footer: #1a1410; --border-light: rgba(26, 20, 16, 0.2); --border-paper: rgba(26, 20, 16, 0.08); --fg-muted-soft: rgba(26, 20, 16, 0.78); --fg-muted-soft-2: rgba(26, 20, 16, 0.7); --fg-muted-soft-3: rgba(26, 20, 16, 0.65); --fg-muted-soft-4: rgba(26, 20, 16, 0.55); --fg-muted-soft-strong: rgba(26, 20, 16, 0.92); --serif: 'EB Garamond', 'Times New Roman', serif; --sans: 'EB Garamond', Georgia, serif; --mono: 'IBM Plex Mono', monospace; --display-weight: 400; --display-italic-weight: 500; --grain-opacity: 0.10; --grain-blend: multiply; --radius: 2px; --radius-card: 3px; --bg-inverted: var(--ink); --fg-inverted: var(--paper); --line-inverted: rgba(245, 236, 220, 0.15); } /* -------- THEME · INGENIEUR ------------------------------- */ /* Inspiration : documentation technique allemande, fond blanc franc, bleu marine, monospace partout, grilles strictes. */ html[data-theme="ingenieur"] { --ink: #0a1929; --paper: #ffffff; --paper-2: #f4f6f9; --char: #14253c; --line: #d6dde6; --line-light: #c4cfdc; --accent: #1d3f7a; --accent-soft: #345aa3; --accent-glow: rgba(29, 63, 122, 0.10); --accent-glow-soft: rgba(29, 63, 122, 0.02); --accent-shadow: rgba(29, 63, 122, 0.35); --accent-shadow-faint: rgba(29, 63, 122, 0.08); --accent-border-soft: rgba(29, 63, 122, 0.35); --accent-tint: rgba(29, 63, 122, 0.06); --secondary: #486a8a; --tertiary: #b04545; --muted: #5a6b7d; --muted-2: #7c8a9c; --bg-page: var(--paper); --fg-page: var(--ink); --bg-nav: rgba(255, 255, 255, 0.88); --bg-nav-scrolled: rgba(255, 255, 255, 0.97); --bg-card: linear-gradient(180deg, rgba(244, 246, 249, 0.8), rgba(244, 246, 249, 0.3)); --bg-input: rgba(244, 246, 249, 0.7); --bg-input-focus: rgba(255, 255, 255, 1); --bg-experts: #f4f6f9; --bg-footer: #0a1929; --border-light: rgba(10, 25, 41, 0.18); --border-paper: rgba(10, 25, 41, 0.08); --fg-muted-soft: rgba(10, 25, 41, 0.82); --fg-muted-soft-2: rgba(10, 25, 41, 0.72); --fg-muted-soft-3: rgba(10, 25, 41, 0.65); --fg-muted-soft-4: rgba(10, 25, 41, 0.55); --fg-muted-soft-strong: rgba(10, 25, 41, 0.95); --serif: 'JetBrains Mono', 'Courier New', monospace; --sans: 'IBM Plex Sans', -apple-system, sans-serif; --mono: 'JetBrains Mono', monospace; --display-weight: 500; --display-italic-weight: 500; --grain-opacity: 0.02; --grain-blend: multiply; --radius: 0px; --radius-card: 0px; --bg-inverted: var(--ink); --fg-inverted: var(--paper); --line-inverted: rgba(255, 255, 255, 0.15); } /* -------- THEME · NEON ------------------------------------ */ /* Inspiration : terminal moderne, noir profond, vert lime électrique, posture disruptive et tech-forward. */ html[data-theme="neon"] { --ink: #050608; --paper: #e8f0e3; --paper-2: #d6e0d0; --char: #0a0d0c; --line: #1f2521; --line-light: #c8d4c0; --accent: #b8ff3a; --accent-soft: #d6ff7a; --accent-glow: rgba(184, 255, 58, 0.18); --accent-glow-soft: rgba(184, 255, 58, 0.05); --accent-shadow: rgba(184, 255, 58, 0.5); --accent-shadow-faint: rgba(184, 255, 58, 0.15); --accent-border-soft: rgba(184, 255, 58, 0.45); --accent-tint: rgba(184, 255, 58, 0.08); --secondary: #5ad6b8; --tertiary: #ff5e8a; --muted: #6b7a72; --muted-2: #8a9a90; --bg-page: var(--ink); --fg-page: var(--paper); --bg-nav: rgba(5, 6, 8, 0.85); --bg-nav-scrolled: rgba(5, 6, 8, 0.95); --bg-card: linear-gradient(180deg, rgba(184, 255, 58, 0.025), rgba(184, 255, 58, 0.005)); --bg-input: rgba(184, 255, 58, 0.04); --bg-input-focus: rgba(184, 255, 58, 0.08); --bg-experts: #07090a; --bg-footer: #030405; --border-light: rgba(232, 240, 227, 0.16); --border-paper: rgba(184, 255, 58, 0.08); --fg-muted-soft: rgba(232, 240, 227, 0.78); --fg-muted-soft-2: rgba(232, 240, 227, 0.68); --fg-muted-soft-3: rgba(232, 240, 227, 0.6); --fg-muted-soft-4: rgba(232, 240, 227, 0.5); --fg-muted-soft-strong: rgba(232, 240, 227, 0.95); --serif: 'Space Grotesk', sans-serif; --sans: 'Space Grotesk', -apple-system, sans-serif; --mono: 'JetBrains Mono', monospace; --display-weight: 400; --display-italic-weight: 500; --grain-opacity: 0.04; --grain-blend: screen; --radius: 2px; --radius-card: 4px; --bg-inverted: var(--paper); --fg-inverted: var(--ink); --line-inverted: rgba(0, 0, 0, 0.15); } /* -------- LEGACY ALIASES ---------------------------------- */ /* Conserve la compatibilité avec les noms historiques. */ :root { --amber: var(--accent); --amber-soft: var(--accent-soft); --sage: var(--secondary); --rose: var(--tertiary); } * { margin: 0; padding: 0; box-sizing: border-box; } html { scroll-behavior: smooth; } body { background: var(--bg-page); color: var(--fg-page); font-family: var(--sans); font-size: 16px; line-height: 1.6; -webkit-font-smoothing: antialiased; overflow-x: hidden; } img { max-width: 100%; display: block; } a { color: inherit; text-decoration: none; } button { font-family: inherit; cursor: pointer; border: none; background: none; color: inherit; } body::before { content: ''; position: fixed; inset: 0; pointer-events: none; z-index: 100; opacity: 0.06; mix-blend-mode: overlay; background-image: url("data:image/svg+xml;utf8,"); } /* ========== NAVIGATION ========== */ .nav { position: fixed; top: 0; left: 0; right: 0; z-index: 50; padding: 22px var(--gutter); display: flex; align-items: center; justify-content: space-between; transition: background 0.35s ease, backdrop-filter 0.35s ease, border-color 0.35s ease; border-bottom: 1px solid transparent; background: var(--bg-nav); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); border-bottom-color: var(--border-paper); } .nav.scrolled { background: var(--bg-nav-scrolled); } .logo { display: flex; align-items: baseline; gap: 10px; font-family: var(--serif); font-weight: 500; font-size: 22px; letter-spacing: -0.02em; } .logo-mark { display: inline-block; width: 10px; height: 10px; background: var(--accent); border-radius: 50%; transform: translateY(-1px); position: relative; } .logo-mark::after { content: ''; position: absolute; inset: -4px; border-radius: 50%; border: 1px solid var(--accent); opacity: 0.3; animation: pulse 2.4s ease-in-out infinite; } @keyframes pulse { 0%, 100% { transform: scale(1); opacity: 0.3; } 50% { transform: scale(1.4); opacity: 0; } } .logo em { font-style: italic; font-weight: 400; color: var(--accent-soft); } .nav-links { display: flex; gap: 36px; font-size: 14px; font-weight: 500; } .nav-links a { position: relative; padding: 4px 0; transition: color 0.2s; } .nav-links a::after { content: ''; position: absolute; left: 0; bottom: 0; width: 0; height: 1px; background: var(--accent); transition: width 0.3s ease; } .nav-links a:hover, .nav-links a.active { color: var(--accent-soft); } .nav-links a:hover::after, .nav-links a.active::after { width: 100%; } .nav-cta { padding: 10px 18px; border: 1px solid var(--border-light); border-radius: 100px; font-size: 13px; font-weight: 500; transition: all 0.25s; display: inline-flex; align-items: center; gap: 8px; } .nav-cta:hover { border-color: var(--accent); color: var(--accent-soft); } .nav-cta::after { content: '→'; transition: transform 0.25s; } .nav-cta:hover::after { transform: translateX(4px); } @media (max-width: 820px) { .nav-links { display: none; } } /* ========== PAGE HEADER (subpages) ========== */ .page-hero { padding: 160px var(--gutter) 80px; max-width: var(--maxw); margin: 0 auto; position: relative; border-bottom: 1px solid var(--line); } .page-hero::before { content: ''; position: absolute; top: 100px; right: -10%; width: 50vw; height: 50vw; background: radial-gradient(circle at center, var(--accent-shadow-faint), transparent 60%); filter: blur(60px); pointer-events: none; z-index: -1; } .breadcrumb { font-family: var(--mono); font-size: 12px; text-transform: uppercase; letter-spacing: 0.14em; color: var(--muted-2); margin-bottom: 32px; display: flex; align-items: center; gap: 12px; } .breadcrumb a { color: var(--accent); transition: color 0.2s; } .breadcrumb a:hover { color: var(--accent-soft); } .breadcrumb .sep { opacity: 0.5; } .page-hero h1 { font-family: var(--serif); font-size: clamp(40px, 6vw, 88px); font-weight: var(--display-weight); line-height: 1; letter-spacing: -0.03em; max-width: 900px; margin-bottom: 32px; } .page-hero h1 em { font-style: italic; color: var(--accent-soft); font-weight: 400; } .page-hero .lede { font-family: var(--serif); font-size: clamp(18px, 1.6vw, 22px); font-weight: var(--display-weight); line-height: 1.5; color: var(--fg-muted-soft); max-width: 720px; border-left: 1px solid var(--accent-border-soft); padding-left: 22px; } /* ========== SECTIONS ========== */ section { padding: 100px var(--gutter); max-width: var(--maxw); margin: 0 auto; position: relative; } @media (max-width: 820px) { section { padding: 64px var(--gutter); } .page-hero { padding: 130px var(--gutter) 60px; } } .eyebrow { font-family: var(--mono); font-size: 12px; text-transform: uppercase; letter-spacing: 0.18em; color: var(--accent); display: inline-flex; align-items: center; gap: 12px; margin-bottom: 24px; } .eyebrow::before { content: ''; width: 30px; height: 1px; background: var(--accent); } h2 { font-family: var(--serif); font-size: clamp(32px, 4.5vw, 56px); font-weight: var(--display-weight); line-height: 1.05; letter-spacing: -0.025em; margin-bottom: 32px; } h2 em { font-style: italic; color: var(--accent-soft); font-weight: 400; } h3 { font-family: var(--serif); font-size: 26px; font-weight: 400; line-height: 1.2; letter-spacing: -0.02em; margin-bottom: 14px; } h3 em { font-style: italic; color: var(--accent-soft); } /* ========== BUTTONS ========== */ .btn { display: inline-flex; align-items: center; gap: 14px; padding: 16px 24px; border-radius: var(--radius); font-family: var(--mono); font-size: 13px; font-weight: 500; letter-spacing: 0.04em; text-transform: uppercase; transition: all 0.3s ease; } .btn-primary { background: var(--accent); color: var(--ink); } .btn-primary:hover { background: var(--accent-soft); transform: translateY(-2px); box-shadow: 0 12px 30px -10px var(--accent-shadow); } .btn-ghost { border: 1px solid var(--border-light); color: var(--fg-page); } .btn-ghost:hover { border-color: var(--fg-page); background: rgba(244, 239, 230, 0.04); } .btn .arrow { transition: transform 0.3s; } .btn:hover .arrow { transform: translateX(6px); } /* ========== PROSE (legal & editorial pages) ========== */ .prose { max-width: 780px; margin: 0 auto; font-family: var(--serif); font-size: 18px; font-weight: var(--display-weight); line-height: 1.65; color: var(--fg-muted-soft); } .prose h2 { font-size: clamp(28px, 3.4vw, 40px); margin: 60px 0 20px; color: var(--fg-page); } .prose h2:first-child { margin-top: 0; } .prose h3 { font-size: 22px; margin: 36px 0 12px; color: var(--fg-page); } .prose p { margin-bottom: 22px; } .prose ul, .prose ol { margin: 0 0 22px 24px; padding-left: 8px; } .prose li { margin-bottom: 10px; } .prose strong { font-weight: 500; color: var(--fg-page); } .prose em { color: var(--accent-soft); font-style: italic; } .prose a { color: var(--accent); border-bottom: 1px solid rgba(217, 122, 44, 0.3); transition: border-color 0.2s; } .prose a:hover { border-bottom-color: var(--accent); } .prose hr { border: none; border-top: 1px solid var(--line); margin: 50px 0; } .prose .meta { font-family: var(--mono); font-size: 12px; color: var(--muted-2); text-transform: uppercase; letter-spacing: 0.12em; margin-bottom: 40px; padding-bottom: 24px; border-bottom: 1px solid var(--line); display: flex; flex-wrap: wrap; gap: 18px; } .prose blockquote { font-style: italic; font-size: 22px; border-left: 2px solid var(--accent); padding: 6px 0 6px 24px; margin: 30px 0; color: var(--fg-page); } /* ========== CARD GRIDS ========== */ .card-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; } @media (max-width: 900px) { .card-grid { grid-template-columns: 1fr; } } .card-grid.two { grid-template-columns: repeat(2, 1fr); } @media (max-width: 900px) { .card-grid.two { grid-template-columns: 1fr; } } .card { background: var(--bg-card); border: 1px solid var(--line); padding: 32px; border-radius: var(--radius-card); transition: all 0.4s ease; position: relative; display: flex; flex-direction: column; } .card:hover { border-color: var(--accent-border-soft); transform: translateY(-3px); } .card .tag { display: inline-block; font-family: var(--mono); font-size: 11px; text-transform: uppercase; letter-spacing: 0.1em; color: var(--accent); margin-bottom: 18px; } .card h3 { margin-bottom: 12px; } .card p { font-size: 15px; line-height: 1.6; color: var(--fg-muted-soft-3); margin-bottom: 20px; } .card .read-more { font-family: var(--mono); font-size: 12px; text-transform: uppercase; letter-spacing: 0.08em; color: var(--accent-soft); margin-top: auto; display: inline-flex; align-items: center; gap: 8px; transition: gap 0.3s; } .card:hover .read-more { gap: 14px; } /* ========== FORMS ========== */ .form { display: grid; gap: 20px; max-width: 640px; } .form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; } @media (max-width: 600px) { .form-row { grid-template-columns: 1fr; } } .field label { display: block; font-family: var(--mono); font-size: 11px; text-transform: uppercase; letter-spacing: 0.12em; color: var(--accent); margin-bottom: 8px; } .field input, .field textarea, .field select { width: 100%; background: var(--bg-input); border: 1px solid var(--line); padding: 14px 16px; font-family: var(--sans); font-size: 15px; color: var(--fg-page); border-radius: var(--radius); transition: border-color 0.2s, background 0.2s; } .field input:focus, .field textarea:focus, .field select:focus { outline: none; border-color: var(--accent); background: var(--bg-input-focus); } .field textarea { min-height: 130px; resize: vertical; font-family: var(--sans); } .field .hint { font-family: var(--mono); font-size: 11px; color: var(--muted); margin-top: 6px; letter-spacing: 0.04em; } .checkbox { display: flex; align-items: flex-start; gap: 12px; font-size: 13px; color: var(--fg-muted-soft-2); line-height: 1.5; } .checkbox input { width: 16px; height: 16px; margin-top: 3px; accent-color: var(--accent); } /* ========== TABLES ========== */ .simple-table { width: 100%; border-collapse: collapse; font-size: 14px; margin: 28px 0; } .simple-table th, .simple-table td { padding: 16px 12px; border-bottom: 1px solid var(--line); text-align: left; } .simple-table th { font-family: var(--mono); font-size: 11px; text-transform: uppercase; letter-spacing: 0.1em; color: var(--accent); font-weight: 500; } .simple-table td { color: var(--fg-muted-soft); } /* ========== ACCORDIONS ========== */ .faq { border-top: 1px solid var(--line); } .faq-item { border-bottom: 1px solid var(--line); } .faq-item summary { cursor: pointer; list-style: none; padding: 28px 0; display: flex; justify-content: space-between; align-items: center; gap: 24px; font-family: var(--serif); font-size: 21px; font-weight: 400; letter-spacing: -0.01em; transition: color 0.2s; } .faq-item summary::-webkit-details-marker { display: none; } .faq-item summary:hover { color: var(--accent-soft); } .faq-item summary::after { content: '+'; font-family: var(--mono); font-size: 22px; color: var(--accent); transition: transform 0.3s ease; flex-shrink: 0; } .faq-item[open] summary::after { transform: rotate(45deg); } .faq-item .faq-body { padding: 0 0 28px; font-family: var(--serif); font-size: 17px; line-height: 1.6; color: var(--fg-muted-soft-2); max-width: 820px; } .faq-item .faq-body p { margin-bottom: 14px; } .faq-item .faq-body p:last-child { margin-bottom: 0; } /* ========== CTA BANNER ========== */ .cta-banner { max-width: none; background: var(--bg-inverted); color: var(--fg-inverted); padding: 100px var(--gutter); text-align: center; position: relative; overflow: hidden; } .cta-banner-inner { max-width: 760px; margin: 0 auto; position: relative; z-index: 1; } .cta-banner h2 { color: var(--fg-inverted); font-size: clamp(34px, 5vw, 64px); } .cta-banner h2 em { color: var(--accent); } .cta-banner p { font-family: var(--serif); font-size: 19px; font-weight: 300; color: var(--muted); opacity: 0.8; margin-bottom: 36px; max-width: 560px; margin-left: auto; margin-right: auto; } .cta-banner .btn-primary { background: var(--bg-page); color: var(--fg-page); } .cta-banner .btn-primary:hover { background: var(--accent); color: var(--ink); } /* ========== FOOTER ========== */ footer { background: var(--bg-footer); border-top: 1px solid var(--line); padding: 80px var(--gutter) 30px; } .footer-inner { max-width: var(--maxw); margin: 0 auto; display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: 50px; margin-bottom: 60px; } @media (max-width: 820px) { .footer-inner { grid-template-columns: 1fr 1fr; gap: 40px; } } .footer-brand .logo { margin-bottom: 22px; } .footer-brand p { font-size: 14px; color: var(--muted-2); line-height: 1.6; max-width: 320px; margin-bottom: 20px; } .footer-brand .addr { font-family: var(--mono); font-size: 12px; color: var(--muted); line-height: 1.7; } .footer-col h5 { font-family: var(--mono); font-size: 12px; text-transform: uppercase; letter-spacing: 0.12em; color: var(--accent); margin-bottom: 20px; } .footer-col ul { list-style: none; display: flex; flex-direction: column; gap: 10px; } .footer-col a { font-size: 14px; color: var(--fg-muted-soft-2); transition: color 0.2s; } .footer-col a:hover { color: var(--accent-soft); } .footer-bottom { max-width: var(--maxw); margin: 0 auto; padding-top: 30px; border-top: 1px solid var(--line); display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 16px; font-family: var(--mono); font-size: 11px; color: var(--muted); text-transform: uppercase; letter-spacing: 0.1em; } /* ========== REVEAL ========== */ .reveal { opacity: 0; transform: translateY(36px); transition: opacity 0.8s ease, transform 0.8s ease; } .reveal.in-view { opacity: 1; transform: translateY(0); } /* ========== SPECIFIC: Newsletter ========== */ .newsletter-inline { display: flex; gap: 8px; max-width: 480px; margin-top: 24px; } .newsletter-inline input { flex: 1; background: var(--bg-input); border: 1px solid var(--line); padding: 14px 16px; font-family: var(--sans); font-size: 15px; color: var(--fg-page); border-radius: var(--radius); } .newsletter-inline input:focus { outline: none; border-color: var(--accent); } /* ========== JOB LISTINGS ========== */ .job-list { border-top: 1px solid var(--line); } .job { display: grid; grid-template-columns: 1fr auto auto; gap: 30px; padding: 28px 0; border-bottom: 1px solid var(--line); align-items: center; transition: padding 0.3s, color 0.3s; } .job:hover { padding-left: 14px; } @media (max-width: 720px) { .job { grid-template-columns: 1fr; gap: 8px; } } .job-title h3 { font-size: 22px; margin-bottom: 4px; } .job-title p { font-family: var(--mono); font-size: 11px; text-transform: uppercase; letter-spacing: 0.1em; color: var(--muted-2); } .job-meta { font-family: var(--mono); font-size: 12px; color: var(--muted-2); text-transform: uppercase; letter-spacing: 0.08em; } .job-cta { font-family: var(--mono); font-size: 12px; color: var(--accent); text-transform: uppercase; letter-spacing: 0.1em; display: inline-flex; align-items: center; gap: 8px; transition: gap 0.3s; } .job:hover .job-cta { gap: 14px; } /* ========== TWO-COL with sidebar ========== */ .two-col { display: grid; grid-template-columns: 1fr 280px; gap: 80px; align-items: start; } @media (max-width: 900px) { .two-col { grid-template-columns: 1fr; gap: 50px; } } .sidebar { position: sticky; top: 110px; border: 1px solid var(--line); padding: 28px; border-radius: var(--radius-card); background: var(--bg-card); } .sidebar h5 { font-family: var(--mono); font-size: 11px; text-transform: uppercase; letter-spacing: 0.12em; color: var(--accent); margin-bottom: 16px; } .sidebar ul { list-style: none; display: flex; flex-direction: column; gap: 10px; font-size: 13px; } .sidebar a { color: var(--fg-muted-soft-2); transition: color 0.2s; } .sidebar a:hover { color: var(--accent-soft); } /* ========================================================= THEME SWITCHER Bouton flottant en bas à droite, déploie 4 swatches. ========================================================= */ .theme-switcher { position: fixed; bottom: 24px; right: 24px; z-index: 200; font-family: var(--mono); } .theme-switcher-toggle { display: flex; align-items: center; gap: 10px; padding: 12px 16px; background: var(--bg-nav-scrolled); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); border: 1px solid var(--border-light); color: var(--fg-page); font-family: var(--mono); font-size: 11px; text-transform: uppercase; letter-spacing: 0.12em; border-radius: 100px; transition: all 0.25s ease; box-shadow: 0 8px 28px -10px rgba(0,0,0,0.4); } .theme-switcher-toggle:hover { border-color: var(--accent-border-soft); color: var(--accent); } .theme-switcher-toggle .swatch-current { width: 12px; height: 12px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 0 2px var(--bg-page), 0 0 0 3px var(--accent); } .theme-switcher-toggle .chevron { font-size: 10px; transition: transform 0.3s; opacity: 0.6; } .theme-switcher.open .theme-switcher-toggle .chevron { transform: rotate(180deg); } .theme-switcher-panel { position: absolute; bottom: calc(100% + 12px); right: 0; background: var(--bg-nav-scrolled); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); border: 1px solid var(--border-light); border-radius: 12px; padding: 12px; min-width: 260px; opacity: 0; pointer-events: none; transform: translateY(8px); transition: opacity 0.25s ease, transform 0.25s ease; box-shadow: 0 20px 48px -12px rgba(0,0,0,0.5); } .theme-switcher.open .theme-switcher-panel { opacity: 1; pointer-events: auto; transform: translateY(0); } .theme-switcher-panel h6 { font-family: var(--mono); font-size: 10px; text-transform: uppercase; letter-spacing: 0.14em; color: var(--accent); padding: 8px 12px 12px; border-bottom: 1px solid var(--border-paper); margin-bottom: 4px; } .theme-option { display: flex; align-items: center; gap: 14px; padding: 10px 12px; width: 100%; text-align: left; border-radius: 6px; cursor: pointer; transition: background 0.2s; color: var(--fg-page); } .theme-option:hover { background: var(--accent-tint); } .theme-option.active { background: var(--accent-tint); } .theme-option .swatches { display: flex; gap: 4px; flex-shrink: 0; } .theme-option .swatch { width: 14px; height: 14px; border-radius: 50%; border: 1px solid var(--border-paper); } .theme-option .info { flex: 1; display: flex; flex-direction: column; gap: 2px; min-width: 0; } .theme-option .info strong { font-family: var(--sans); font-size: 13px; font-weight: 500; letter-spacing: -0.005em; } .theme-option .info span { font-family: var(--mono); font-size: 10px; text-transform: uppercase; letter-spacing: 0.1em; color: var(--muted-2); } .theme-option .check { font-size: 12px; color: var(--accent); opacity: 0; } .theme-option.active .check { opacity: 1; } /* Theme-specific swatch palettes (for the picker preview) */ .swatch-atelier-1 { background: #0e0d0b; } .swatch-atelier-2 { background: #d97a2c; } .swatch-atelier-3 { background: #f4efe6; } .swatch-manuscrit-1 { background: #f5ecdc; } .swatch-manuscrit-2 { background: #b3402a; } .swatch-manuscrit-3 { background: #1a1410; } .swatch-ingenieur-1 { background: #ffffff; } .swatch-ingenieur-2 { background: #1d3f7a; } .swatch-ingenieur-3 { background: #0a1929; } .swatch-neon-1 { background: #050608; } .swatch-neon-2 { background: #b8ff3a; } .swatch-neon-3 { background: #5ad6b8; } /* Système : moitié clair / moitié sombre pour évoquer l'auto */ .swatch-system-1 { background: linear-gradient(135deg, #f4efe6 0%, #f4efe6 50%, #0e0d0b 50%, #0e0d0b 100%); } .swatch-system-2 { background: linear-gradient(135deg, #b3402a 0%, #b3402a 50%, #d97a2c 50%, #d97a2c 100%); } .swatch-system-3 { background: linear-gradient(135deg, #1a1410 0%, #1a1410 50%, #f4efe6 50%, #f4efe6 100%); } @media (max-width: 600px) { .theme-switcher { bottom: 16px; right: 16px; } .theme-switcher-toggle { padding: 10px 14px; font-size: 10px; } .theme-switcher-panel { min-width: 240px; } } /* ========================================================= PER-THEME OVERRIDES (subtleties) Touche finale par thème : effets que les variables ne peuvent pas gérer seules. ========================================================= */ /* Manuscrit : suppression des halos sombres + gradient papier */ html[data-theme="manuscrit"] .hero-bg::before, html[data-theme="manuscrit"] .hero-bg::after, html[data-theme="manuscrit"] .cta-final::before { opacity: 0.5; filter: blur(80px); } html[data-theme="manuscrit"] .testimonial::before { opacity: 0.18; } html[data-theme="manuscrit"] .ticker { background: var(--ink); } html[data-theme="manuscrit"] .nav.scrolled { border-bottom-color: var(--line); } /* Ingénieur : aspect technique, retire les arrondis et halos */ html[data-theme="ingenieur"] .hero-bg::before, html[data-theme="ingenieur"] .hero-bg::after, html[data-theme="ingenieur"] .cta-final::before { display: none; } html[data-theme="ingenieur"] .ticker { background: var(--paper-2); border-color: var(--line); } html[data-theme="ingenieur"] body::before { display: none; /* no grain — strict surface */ } html[data-theme="ingenieur"] .nav.scrolled { border-bottom-color: var(--line); } html[data-theme="ingenieur"] .logo-mark::after { display: none; /* no pulsing dot — engineering doesn't pulse */ } html[data-theme="ingenieur"] h1, html[data-theme="ingenieur"] h2, html[data-theme="ingenieur"] h3, html[data-theme="ingenieur"] .hero h1 { letter-spacing: -0.01em; } /* Néon : glow CRT léger sur les éléments accent */ html[data-theme="neon"] .accent-glow, html[data-theme="neon"] .logo-mark { box-shadow: 0 0 16px var(--accent), 0 0 4px var(--accent); } html[data-theme="neon"] .step-circle { box-shadow: 0 0 0 1px var(--accent), 0 0 12px var(--accent-glow); } html[data-theme="neon"] .btn-primary { box-shadow: 0 0 24px -6px var(--accent-shadow); } html[data-theme="neon"] .btn-primary:hover { box-shadow: 0 0 32px -4px var(--accent-shadow); } html[data-theme="neon"] .ticker { background: #030405; } html[data-theme="neon"] .testimonial blockquote em, html[data-theme="neon"] .hero h1 em, html[data-theme="neon"] h2 em, html[data-theme="neon"] h3 em { text-shadow: 0 0 18px var(--accent-glow); } /* Smooth theme transition (without hurting initial paint) */ .theme-transitioning, .theme-transitioning * { transition: background-color 0.4s ease, color 0.4s ease, border-color 0.4s ease !important; } /* Ingénieur : la mono est large, on réduit le H1 du hero */ html[data-theme="ingenieur"] .hero h1 { font-size: clamp(38px, 6.5vw, 96px); letter-spacing: -0.005em; } html[data-theme="ingenieur"] .page-hero h1 { font-size: clamp(34px, 5vw, 72px); letter-spacing: -0.005em; } html[data-theme="ingenieur"] h2 { font-size: clamp(28px, 3.8vw, 48px); letter-spacing: -0.005em; } /* Manuscrit : EB Garamond a aussi besoin d'un peu plus de tracking sur les très gros titres */ html[data-theme="manuscrit"] .hero h1 { letter-spacing: -0.02em; } /* Manuscrit + Ingénieur : ajuster le menu de nav (texte sombre sur fond clair) */ html[data-theme="manuscrit"] .nav-cta, html[data-theme="ingenieur"] .nav-cta { border-color: var(--border-light); } /* Manuscrit/Ingénieur : ajuster les boutons hero ghost (border-color paper sur fond clair invisible) */ html[data-theme="manuscrit"] .btn-ghost, html[data-theme="ingenieur"] .btn-ghost { color: var(--fg-page); } /* Boutons primaires : sur thème clair, le bouton primary doit garder du contraste */ html[data-theme="manuscrit"] .btn-primary, html[data-theme="ingenieur"] .btn-primary { color: #fff; } html[data-theme="manuscrit"] .btn-primary:hover, html[data-theme="ingenieur"] .btn-primary:hover { color: #fff; } /* Manuscrit : le ticker doit avoir un fond contrasté (encre) */ html[data-theme="manuscrit"] .ticker .ticker-track { color: rgba(245, 236, 220, 0.85); } /* Ingénieur : ticker contrasté */ html[data-theme="ingenieur"] .ticker { border-color: var(--line); } html[data-theme="ingenieur"] .ticker .ticker-track { color: var(--muted); }