/* ============================================================= Galerie client — Eloic Foucart Design tokens repris à l'identique du portfolio eloicfoucart.com ============================================================= */ /* ---- Fontes auto-hébergées ---- */ @font-face { font-family: 'Space Grotesk'; font-style: normal; font-weight: 300 700; font-display: swap; src: url('../fonts/sg-latin-ext.woff2') format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } @font-face { font-family: 'Space Grotesk'; font-style: normal; font-weight: 300 700; font-display: swap; src: url('../fonts/sg-latin.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: 'JetBrains Mono'; font-style: normal; font-weight: 400 500; font-display: swap; src: url('../fonts/jbm-latin-ext.woff2') format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } @font-face { font-family: 'JetBrains Mono'; font-style: normal; font-weight: 400 500; font-display: swap; src: url('../fonts/jbm-latin.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } /* ---- Tokens ---- */ :root { color-scheme: light; --paper-0: #fbfdfb; --paper-1: #eef2ee; --paper-2: #e3e8e3; --paper-ink: #0d1113; --muted: #6b7280; --muted-2: #9aa1a6; --line: rgba(0,0,0,.09); --ink-0: #0d1113; --ink-1: #131719; --ink-2: #1b2023; --accent: #0d1113; --danger: #b4442f; --warning: #c98a2b; --success: #2f7d5c; --font-display: 'Space Grotesk', 'Space Grotesk repli', 'Inter', system-ui, sans-serif; --font-body: 'Space Grotesk', 'Space Grotesk repli', 'Inter', system-ui, sans-serif; --font-mono: 'JetBrains Mono', 'JetBrains Mono repli', ui-monospace, 'SF Mono', Menlo, monospace; --text-xs: 12px; --text-sm: 14px; --text-base: 16px; --text-md: 20px; --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-6: 24px; --space-8: 32px; --space-12: 48px; --radius-sm: 6px; --radius-md: 12px; --radius-pill: 999px; --ease-out: cubic-bezier(.2,.8,.2,1); --ease-in-out: cubic-bezier(.76,0,.24,1); --dur-ui: 320ms; --dur-micro: 180ms; --dur-enter: 560ms; --sat: env(safe-area-inset-top, 0px); --sar: env(safe-area-inset-right, 0px); --sab: env(safe-area-inset-bottom, 0px); --sal: env(safe-area-inset-left, 0px); } /* Wide-gamut, comme sur le portfolio */ @supports (color: color(display-p3 0 0 0)) { @media (color-gamut: p3) { :root { --paper-0: color(display-p3 0.984 0.992 0.984); --paper-ink: color(display-p3 0.051 0.067 0.075); } ::selection { background: color(display-p3 0.051 0.067 0.075); color: color(display-p3 0.984 0.992 0.984); } } } /* ---- Surfaces : les composants s'expriment en --fg / --bg / --hairline ---- Le second sélecteur sert au thème « auto » : le script du pose data-theme sur avant le premier rendu, et sa spécificité plus forte retourne la surface sombre rendue par le serveur, sans clignotement. */ .surface-paper, html[data-theme="light"] body.surface-dark { color-scheme: light; --bg: var(--paper-0); --bg-2: var(--paper-1); --bg-3: var(--paper-2); --fg: var(--paper-ink); --fg-2: rgba(13,17,19,.62); --fg-3: rgba(13,17,19,.38); --fg-4: rgba(13,17,19,.20); --hairline: rgba(0,0,0,.09); --hover: rgba(0,0,0,.035); --btn-fg: var(--paper-0); --btn-bg: var(--paper-ink); } .surface-dark, html[data-theme="dark"] body.surface-paper, .lb { color-scheme: dark; --bg: var(--ink-0); --bg-2: var(--ink-1); --bg-3: var(--ink-2); --fg: rgba(255,255,255,.92); --fg-2: rgba(255,255,255,.48); --fg-3: rgba(255,255,255,.28); --fg-4: rgba(255,255,255,.14); --hairline: rgba(255,255,255,.10); --hover: rgba(255,255,255,.04); --btn-fg: var(--ink-0); --btn-bg: rgba(255,255,255,.92); } /* ---- Reset & base ---- */ *, *::before, *::after { box-sizing: border-box; } html { height: 100%; -webkit-text-size-adjust: 100%; } body { margin: 0; min-height: 100%; background: var(--bg); color: var(--fg); font-family: var(--font-body); font-size: var(--text-base); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; } img, video { display: block; max-width: 100%; } a { color: inherit; } button, input, select, textarea { font-family: inherit; font-size: inherit; color: inherit; } h1, h2, h3, h4 { font-weight: 400; margin: 0; } p { margin: 0; } :focus-visible { outline: 2px solid currentColor; outline-offset: 3px; border-radius: 2px; } /* L'attribut hidden doit toujours l'emporter : sans cela, un display: flex posé par une classe rendrait visible un bloc que le HTML déclare masqué. */ [hidden] { display: none !important; } .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; } .wrap { max-width: 1480px; margin: 0 auto; padding-left: max(clamp(20px, 3.4vw, 48px), var(--sal)); padding-right: max(clamp(20px, 3.4vw, 48px), var(--sar)); } .wrap-narrow { max-width: 760px; } /* ---- Keyframes partagées ---- */ @keyframes fadeUp { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: none; } } @keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } } @keyframes panelIn { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } } @keyframes spin { to { transform: rotate(360deg); } } /* ---- Typographie ---- */ .kicker { font-family: var(--font-mono); font-size: var(--text-xs); letter-spacing: .16em; text-transform: uppercase; color: var(--fg-2); display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin: 0; } .kicker-dot { opacity: .35; } .display { font-family: var(--font-display); font-weight: 300; font-size: clamp(38px, 7vw, 92px); letter-spacing: -.035em; line-height: .95; color: var(--fg); margin: 0; } .display-sm { font-family: var(--font-display); font-weight: 300; font-size: clamp(28px, 4vw, 46px); letter-spacing: -.03em; line-height: 1.02; margin: 0; } .lead { font-size: clamp(17px, 1.6vw, 21px); line-height: 1.55; letter-spacing: -.01em; color: var(--fg); } .text-body { font-size: clamp(14px, 1.1vw, 16px); line-height: 1.8; color: var(--fg-2); } .mono { font-family: var(--font-mono); font-size: var(--text-xs); letter-spacing: .1em; color: var(--fg-2); } .muted { color: var(--fg-2); } .dim { color: var(--fg-2); } /* ---- Boutons ---- */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; font-family: var(--font-mono); font-size: var(--text-xs); letter-spacing: .18em; text-transform: uppercase; text-decoration: none; padding: 14px 26px; min-height: 46px; border: 1px solid var(--hairline); border-radius: var(--radius-pill); background: transparent; color: var(--fg); cursor: pointer; transition: background var(--dur-micro) var(--ease-out), border-color var(--dur-micro) var(--ease-out), opacity var(--dur-micro) var(--ease-out); } @media (hover: hover) { .btn:hover { background: var(--hover); border-color: var(--fg-3); } } .btn[disabled], .btn.is-disabled { opacity: .4; pointer-events: none; } .btn-solid { background: var(--btn-bg); color: var(--btn-fg); border-color: transparent; } @media (hover: hover) { .btn-solid:hover { opacity: .82; background: var(--btn-bg); } } .btn-sm { padding: 9px 16px; min-height: 38px; font-size: 10px; letter-spacing: .14em; } .btn-ghost { border-color: transparent; } .btn-danger { color: var(--danger); border-color: rgba(180,68,47,.35); } /* Lien-CTA souligné, comme les CTA du portfolio */ /* Le même appel à l'action, qu'il soit écrit ou