/* JCode Studio — feuille de style principale Le design vient de Claude Design et s'intègre à la main. La maquette est dessinée pour une fenêtre de 1280 px ; les points de rupture ci-dessous n'en font pas partie et adaptent la page aux écrans plus étroits. Sommaire 1. Polices 2. Jetons de couleur (thème clair / sombre) 3. Réinitialisation et base 4. Commun à toutes les pages 5. En-tête et navigation 6. Sections de la page d'accueil 7. Pages secondaires 8. Points de rupture */ /* ═══════════ 1. Polices ═══════════ */ /* Auto-hébergées (cf. README.md) ; sous-ensemble latin uniquement. */ @font-face { font-family: 'Newsreader'; font-style: normal; font-weight: 300 600; font-display: swap; src: url('/assets/fonts/newsreader-var.woff2') format('woff2'); } @font-face { font-family: 'IBM Plex Sans'; font-style: normal; font-weight: 400 600; font-display: swap; src: url('/assets/fonts/ibm-plex-sans-var.woff2') format('woff2'); } @font-face { font-family: 'IBM Plex Mono'; font-style: normal; font-weight: 400; font-display: swap; src: url('/assets/fonts/ibm-plex-mono-400.woff2') format('woff2'); } /* ═══════════ 2. Jetons de couleur ═══════════ */ /* --surface est dupliqué dans les balises `theme-color` du et dans CHROME_COLORS (main.js) : garder les trois synchronisés. */ :root, [data-theme='clair'] { --surface: #faf7f0; --surface-2: #f5f0e5; --surface-3: #f3ede1; --surface-4: #f7f3ea; --line: #ede5d6; --line-2: #e7decb; --line-3: #efe7d8; --line-4: #e2daca; --ink: #241f1a; --ink-2: #4c4438; --ink-3: #5e574a; --muted: #857c6b; --accent: #a9502d; --accent-solid: #a9502d; --accent-solid-ink: #faf7f0; --accent-solid-hover: #8f4325; --btn-bg: #1f1d1a; --btn-ink: #faf7f0; --btn-bg-hover: #3a342e; --ghost-border: #d8cebb; --ghost-border-hover: #c6baa3; --ghost-hover-bg: #f0eadd; --inv-bg: #1f1d1a; --inv-ink: #faf7f0; --inv-ink-2: #d5ccb9; --inv-muted: #9a9284; --inv-line: #3d3833; --inv-accent: #e9b491; --nav-bg: rgba(250, 247, 240, .92); --overlay: rgba(233, 229, 220, .62); --seg-shadow: 0 1px 2px rgba(0, 0, 0, .14); } [data-theme='sombre'] { --surface: #191713; --surface-2: #201d18; --surface-3: #231f1a; --surface-4: #221e19; --line: #2e2924; --line-2: #332d26; --line-3: #332d26; --line-4: #38312a; --ink: #f2ede3; --ink-2: #cdc5b6; --ink-3: #b7ae9e; --muted: #8c8474; --accent: #e9b491; --accent-solid: #b85a33; --accent-solid-ink: #fff4ec; --accent-solid-hover: #ce6939; --btn-bg: #efe8db; --btn-ink: #191713; --btn-bg-hover: #fffcf5; --ghost-border: #3b342c; --ghost-border-hover: #544a3e; --ghost-hover-bg: #241f1a; --inv-bg: #0f0e0b; --inv-ink: #f7f3ea; --inv-ink-2: #cdc5b6; --inv-muted: #928a7b; --inv-line: #2a251f; --inv-accent: #e9b491; --nav-bg: rgba(25, 23, 19, .93); --overlay: rgba(15, 14, 11, .6); } :root { --font-sans: 'IBM Plex Sans', system-ui, -apple-system, 'Segoe UI', sans-serif; --font-serif: 'Newsreader', Georgia, 'Times New Roman', serif; --font-mono: 'IBM Plex Mono', ui-monospace, 'Cascadia Mono', Menlo, monospace; --gutter: 56px; --page-max: 1280px; --nav-height: 58px; } /* ═══════════ 3. Réinitialisation et base ═══════════ */ *, *::before, *::after { box-sizing: border-box; } * { margin: 0; padding: 0; } html { scroll-behavior: smooth; scroll-padding-top: var(--nav-height); } body { font-family: var(--font-sans); -webkit-font-smoothing: antialiased; text-wrap: pretty; background: var(--surface); color: var(--ink); transition: background .25s ease, color .25s ease; } svg { display: block; } img { display: block; max-width: 100%; } a { color: var(--accent); text-decoration: none; } a:hover { text-decoration: underline; text-underline-offset: 3px; } button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; } h1, h2, h3 { font-family: var(--font-serif); font-weight: 400; } :focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 4px; } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; } } /* ═══════════ 4. Commun à toutes les pages ═══════════ */ /* Hors du flux tant qu'il n'a pas le focus : le lien n'apparaît qu'à la première tabulation. */ .skip-link { position: absolute; left: -9999px; z-index: 10; padding: .75rem 1.25rem; background: var(--surface); color: var(--ink); } .skip-link:focus { left: 1rem; top: 1rem; } .container { max-width: var(--page-max); margin: 0 auto; padding-left: var(--gutter); padding-right: var(--gutter); } .eyebrow { font-family: var(--font-mono); font-size: 11px; letter-spacing: .18em; text-transform: uppercase; color: var(--accent); } .kicker { font-family: var(--font-mono); font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); } .tag { font-family: var(--font-mono); font-size: 10.5px; letter-spacing: .16em; text-transform: uppercase; color: var(--accent); } .section-title { font-size: 32px; letter-spacing: -.01em; } .section-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 14px; } .btn { display: inline-block; padding: 12px 22px; border-radius: 999px; font-size: 14.5px; transition: background .18s ease, border-color .18s ease; } .btn:hover { text-decoration: none; } .btn--solid { background: var(--btn-bg); color: var(--btn-ink); } .btn--solid:hover { background: var(--btn-bg-hover); } .btn--ghost { border: 1px solid var(--ghost-border); color: var(--ink-3); } .btn--ghost:hover { background: var(--ghost-hover-bg); border-color: var(--ghost-border-hover); } .band--soft { background: var(--surface-2); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); } .band--inv { background: var(--inv-bg); color: var(--inv-ink); } .band--inv .section-title { color: var(--inv-ink); } .band--inv .kicker { color: var(--inv-muted); } .band--inv .tag { color: var(--inv-accent); } .page-404 { max-width: 40rem; margin: 0 auto; padding: 6rem 1.5rem; } .page-404 > * + * { margin-top: 1rem; } /* ═══════════ 5. En-tête et navigation ═══════════ */ .site-header { position: sticky; top: 0; z-index: 5; background: var(--nav-bg); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); border-bottom: 1px solid var(--line); } .nav { display: flex; justify-content: space-between; align-items: center; gap: 24px; padding-top: 14px; padding-bottom: 14px; } .nav__brand { font-family: var(--font-mono); font-size: 12px; letter-spacing: .12em; text-transform: uppercase; color: var(--ink); } .nav__links { display: flex; align-items: center; gap: 20px; font-size: 13.5px; list-style: none; } .nav__links a { color: var(--ink-3); } .nav__controls { display: flex; align-items: center; gap: 20px; } .nav__cta { padding: 7px 15px; border-radius: 999px; background: var(--accent-solid); color: var(--accent-solid-ink); font-size: 13px; transition: background .18s ease; } .nav__cta:hover { text-decoration: none; background: var(--accent-solid-hover); } .seg { display: flex; align-items: center; gap: 2px; padding: 2px; border: 1px solid var(--line-2); border-radius: 999px; background: var(--surface-2); } .seg__btn { display: flex; align-items: center; gap: 6px; padding: 5px 10px; border-radius: 999px; color: var(--muted); font-family: var(--font-mono); font-size: 10px; letter-spacing: .12em; text-transform: uppercase; transition: background .18s ease, color .18s ease; } .seg__btn:hover { text-decoration: none; color: var(--ink-3); } .seg__btn[aria-pressed='true'], .seg__btn[aria-current] { background: var(--surface); color: var(--ink); box-shadow: var(--seg-shadow); } .theme-switch .seg__btn { padding: 5px 11px 5px 9px; } .seg__dot { width: 9px; height: 9px; border-radius: 999px; background: currentColor; } .seg__dot--moon { background: none; box-shadow: inset -3px 0 0 0 currentColor; } /* ═══════════ 6. Sections de la page d'accueil ═══════════ */ /* Accroche et prestations */ .hero { display: grid; grid-template-columns: 1fr 372px; gap: 56px; align-items: start; padding-top: 76px; padding-bottom: 60px; } .hero__intro { display: flex; flex-direction: column; gap: 24px; max-width: 600px; } .hero__title { font-size: 44px; line-height: 1.1; letter-spacing: -.02em; } .hero__lead { font-size: 17.5px; line-height: 1.6; color: var(--ink-2); } .hero__lead strong { font-weight: 600; } .hero__actions { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; } .services { display: flex; flex-direction: column; background: var(--surface-2); border: 1px solid var(--line-3); border-radius: 10px; overflow: hidden; } .services__title { padding: 18px 24px; border-bottom: 1px solid var(--line-2); font-size: 20px; } .services__item { display: flex; flex-direction: column; gap: 8px; padding: 22px 24px; } .services__item + .services__item { border-top: 1px solid var(--line-2); } .services__item h3 { font-weight: 500; font-size: 19px; } .services__item p { font-size: 14px; line-height: 1.6; color: var(--ink-2); } /* Produits et références : cartes illustrées */ .showcase { display: flex; flex-direction: column; gap: 30px; padding-top: 56px; padding-bottom: 56px; } .cards { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; list-style: none; } .card { position: relative; background: var(--surface-3); border: 1px solid var(--line-3); border-radius: 10px; overflow: hidden; } /* height: auto neutralise l'attribut height de la balise, sans quoi aspect-ratio est ignoré. */ .card__media { width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; } .card__overlay { position: absolute; inset: 0; background: var(--overlay); transition: background .35s ease; } .card:hover .card__overlay { background: transparent; } .card__caption { position: absolute; left: 0; right: 0; bottom: 0; display: flex; flex-direction: column; gap: 6px; padding: 15px 22px 17px; background: var(--surface); border-top: 1px solid var(--line-2); } .card__head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; } .card__head h3 { font-weight: 500; font-size: 21px; } .card__head h3 a { color: var(--ink); } .card__url { font-family: var(--font-mono); font-size: 11px; letter-spacing: .06em; } .card__text { font-size: 14.5px; line-height: 1.55; color: var(--ink-2); } /* Approche technique */ .stack { display: flex; flex-direction: column; gap: 34px; padding-top: 60px; padding-bottom: 60px; } .stack__lead { margin-top: -22px; max-width: 640px; font-size: 16.5px; line-height: 1.6; color: var(--inv-ink-2); } .stack__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 36px 44px; list-style: none; } .stack__item { display: flex; flex-direction: column; gap: 8px; padding-top: 18px; border-top: 1px solid var(--inv-line); } .stack__item h3 { font-family: var(--font-mono); font-size: 13px; color: var(--inv-ink); } .stack__item p { margin-top: -2px; font-size: 15.5px; line-height: 1.6; color: var(--inv-ink-2); } /* À propos */ .about { display: grid; grid-template-columns: 250px 1fr; gap: 48px; align-items: center; padding-top: 60px; padding-bottom: 60px; } .about__portrait { width: 250px; height: 300px; border-radius: 8px; object-fit: cover; } .about__body { display: flex; flex-direction: column; gap: 18px; max-width: 640px; } .about__body p { font-size: 17px; line-height: 1.65; color: var(--ink-2); } .facts { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin-top: 10px; list-style: none; } .facts__item { display: flex; flex-direction: column; gap: 8px; padding: 16px 18px; border: 1px solid var(--line-4); border-radius: 8px; background: var(--surface-4); } .facts__value { font-size: 26px; line-height: 1; letter-spacing: -.02em; font-weight: 600; color: var(--ink); } .facts__label { font-family: var(--font-mono); font-size: 10px; letter-spacing: .16em; text-transform: uppercase; color: var(--muted); } /* Contact */ .contact { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-end; gap: 28px; padding-top: 52px; padding-bottom: 52px; } .contact__main { display: flex; flex-direction: column; gap: 12px; } .contact__where { font-family: var(--font-mono); font-size: 10.5px; letter-spacing: .16em; text-transform: uppercase; color: var(--inv-muted); } .contact__email { font-family: var(--font-serif); font-size: 30px; color: var(--inv-ink); overflow-wrap: anywhere; } .contact__aside { display: flex; flex-direction: column; gap: 8px; align-items: flex-end; } .contact__links { display: flex; gap: 18px; font-size: 14px; list-style: none; } .contact__links a { color: var(--inv-accent); } .contact__status { font-family: var(--font-mono); font-size: 10.5px; letter-spacing: .12em; text-transform: uppercase; color: var(--inv-muted); } /* ═══════════ 7. Pages secondaires ═══════════ */ .legal { display: flex; flex-direction: column; gap: 36px; max-width: calc(720px + 2 * var(--gutter)); padding-top: 64px; padding-bottom: 80px; } .legal h1 { font-size: 40px; line-height: 1.1; letter-spacing: -.02em; } .legal__section { display: flex; flex-direction: column; gap: 12px; } .legal h2 { font-size: 24px; letter-spacing: -.01em; } .legal p { font-size: 16px; line-height: 1.65; color: var(--ink-2); } .legal__facts { display: grid; grid-template-columns: max-content 1fr; gap: 10px 24px; padding: 20px 24px; border: 1px solid var(--line-4); border-radius: 8px; background: var(--surface-4); } .legal__facts dt { padding-top: 3px; font-family: var(--font-mono); font-size: 10.5px; letter-spacing: .16em; text-transform: uppercase; color: var(--muted); } .legal__facts dd { font-size: 15.5px; line-height: 1.5; } /* ═══════════ 8. Points de rupture ═══════════ */ @media (max-width: 1023px) { :root { --gutter: 32px; } .hero { grid-template-columns: 1fr; gap: 40px; padding-top: 56px; } .nav { flex-wrap: wrap; gap: 12px 24px; } .nav__links { flex-basis: 100%; order: 3; gap: 18px; overflow-x: auto; padding-bottom: 2px; -webkit-overflow-scrolling: touch; } .nav__links li { flex-shrink: 0; } .nav__controls { margin-left: auto; } } @media (max-width: 767px) { :root { --gutter: 20px; } .hero__title { font-size: 34px; } .legal h1 { font-size: 32px; } .legal__facts { grid-template-columns: 1fr; gap: 2px 0; } .legal__facts dd + dt { margin-top: 10px; } .section-title { font-size: 28px; } .cards, .stack__grid { grid-template-columns: 1fr; } .about { grid-template-columns: 1fr; gap: 32px; } .facts { grid-template-columns: repeat(2, minmax(0, 1fr)); } .contact__aside { align-items: flex-start; } .contact__email { font-size: 24px; } }