/* ============================================================ YZA - DESIGN TOKENS · Pure-white palette (user override 2026-06-26) Backgrounds: pure white #ffffff (user removed all cream). Ink: Mine Shaft #1f1f1f (soft near-black, brand still avoids pure #000). Type: Jost as the single geometric sans, everywhere. ============================================================ */ /* ---- POLICES DE SECOURS AUX METRIQUES ALIGNEES (2026-08-20) ------------------- Jost et Fraunces arrivent de fonts.gstatic.com en display=swap : le navigateur peint d'abord Arial / Georgia, puis echange. Georgia est 12 % plus large que Fraunces (2328 px contre 2040 px pour la meme phrase a 100 px, mesure faite dans le navigateur) : a l'echange, CHAQUE titre serif se recompose, la hauteur du bloc change, et tout ce qui suit descend ou remonte. C'est la totalite du CLS mobile de 0,142 releve par Lighthouse le 2026-08-20 — les deux seules causes listees par l'audit etaient ces deux .woff2. On ne peut pas supprimer l'echange sans perdre la police de marque (et font-display: optional la ferait disparaitre sur les connexions lentes, ce qui est pire pour une maison de mode). On rend donc l'echange NEUTRE : ces deux faces de secours re-dimensionnent Arial et Georgia pour qu'elles occupent exactement la place de Jost et Fraunces. Le texte ne bouge plus d'un pixel. Chiffres mesures a 100 px, largeur d'une meme phrase + fontBoundingBox : Jost w=2265,4 asc=107 desc=38 | Arial w=2321,8 asc=91 desc=21 Fraunces w=2040,5 asc= 98 desc=26 | Georgia w=2328,7 asc=92 desc=22 size-adjust = largeur cible / largeur secours ; les surcharges d'ascendante et de descendante sont divisees par ce meme facteur, l'em ayant ete redimensionne. */ @font-face { font-family: 'Jost Fallback'; src: local('Arial'), local('Helvetica'), local('Liberation Sans'); size-adjust: 97.57%; ascent-override: 109.66%; descent-override: 38.95%; line-gap-override: 0%; } /* On vise Times New Roman et NON Georgia, bien que Georgia soit le secours historique du jeton : Georgia est absente de la plupart des machines Linux — dont le runner Lighthouse — et n'a aucun clone metrique, donc le size-adjust calcule sur elle tomberait sur une autre police au hasard. Times New Roman, elle, a Liberation Serif comme clone metrique exact sur Linux : le calage tient sur les trois systemes. Georgia reste en dernier recours si Times manque. */ @font-face { font-family: 'Fraunces Fallback'; src: local('Times New Roman'), local('Liberation Serif'), local('Georgia'); size-adjust: 94.27%; ascent-override: 103.96%; descent-override: 27.58%; line-gap-override: 0%; } /* ---- UNE SEULE LANGUE DES LE PREMIER PIXEL (2026-08-20) ---------------------- Chaque libelle traduit est present CINQ fois dans le HTML (fr/en/es/tr/ar : 22 par langue sur l'accueil, 110 au total), et c'est i18n.js qui masque les quatre autres, en JS, a la ligne 804 : `el.hidden = ...`. Avant que ce script ne s'execute, le navigateur peint donc les cinq versions empilees — le titre du hero fait cinq lignes au lieu d'une — puis tout se replie d'un coup et TOUT le contenu en dessous remonte. C'est la part du CLS mobile que les polices n'expliquaient pas : Lighthouse attribuait 0,142 a
alors que l'insight « polices » n'en couvrait que 0,032. La regle ci-dessous fait le meme choix qu'i18n.js, mais en CSS et donc AVANT le premier rendu. Elle se cale sur l'attribut lang du document : quand i18n bascule la langue il met a jour , et l'affichage suit tout seul. `revert` et non `inline` : certains blocs traduits sont des
, on rend a chacun son display par defaut plutot que d'en imposer un. */ [data-lang] { display: none; } html[lang="fr"] [data-lang="fr"], html[lang="en"] [data-lang="en"], html[lang="es"] [data-lang="es"], html[lang="tr"] [data-lang="tr"], html[lang="ar"] [data-lang="ar"] { display: revert; } :root { /* ---- REAL JACQUEMUS PALETTE (extracted from jacquemus.com, 2026-06-26) ---- The 12 brand colours the user supplied, mapped to roles. Ink is the soft #2E2E2E (Jacquemus never uses harsh pure black for running text); pure #000 is held in --true-black for overlays / ::selection only. Cream #FFFCED is the REAL Jacquemus ground, parked in --jq-cream; --color-bg below decides whether the site actually sits on cream or stays pure white (the user earlier asked to remove all cream — flip one line to switch). */ --jq-ink: #2e2e2e; /* primary text — soft near-black */ --jq-ink-2: #212529; /* darker ink / dark-section ground */ --jq-ink-hover: #000000; /* hover-darkened to true black */ --jq-link: #444444; /* secondary link grey */ --jq-muted: #a4a4a4; /* light caption / meta grey */ --jq-coral: #ff6666; /* "new" / flag coral */ --jq-pink: #edb2dd; /* Jacquemus pink accent */ --jq-gold: #d6a94f; /* gold — premium + B2B accent */ --jq-sale: #d90b0b; /* reduced-price red */ --jq-line: #dad7db; /* hairline borders, soft card ground */ --jq-cream: #fffced; /* real Jacquemus warm ground */ --true-black: #000000; /* overlays / selection only */ --jq-navy: #1c2a4d; /* occasional logo-variant accent */ --yza-orange: #c45e29; /* YZA terracotta orange — used for accent bands (kept out of the monochrome ground) */ --jq-bg: var(--color-bg); /* ---- YZA BRAND ACCENTS (2026-06-27) — two warm accents on the pure-white base ---- terracotta = text / links / hover / borders / icons (#de733d on white ≈ 3.0:1 → OK for large text + UI/graphics ≥3:1; below 4.5:1 for small body text, so only used on hover/large/glyph/border here). saffron = selection background / large display numbers / fills ONLY (#fdc733 on white ≈ 1.3:1 → never use as text). */ --accent: #de733d; /* terracotta — REMPLISSAGES, filets, graphismes. 3,17:1 sur blanc : ne JAMAIS l'employer comme texte, voir --accent-text ci-dessous. */ /* Terracotta LISIBLE (2026-08-05). #de733d en texte plafonnait a 3,17:1 sur blanc, 2,76:1 sur la carte postale : sous le seuil AA (4,5) partout ou il servait de texte. Cette valeur est le MEME terracotta simplement assombri (canaux x0,72), donc la teinte est identique — ce n'est pas une autre couleur, c'est la meme a une luminosite lisible. Mesure : 5,57 sur blanc, 4,85 sur --paper-card, 4,63 sur --mood-sand du jour. On garde les deux jetons separes exprès : la marque continue de remplir en #de733d, seul le TEXTE bascule. */ --accent-text: #a0532c; --accent-2: #fdc733; /* saffron — selection / "new" badge fill / large numbers (never small text) */ --accent-3: #b19f31; /* olive — editorial link accent (~3.4:1 on white) */ --blush: #e8bec0; /* blush — soft panels / fills only, never text */ --brand-pink: var(--jq-pink); --brand-orange: var(--accent); /* PRIMARY ACCENT → terracotta */ --brand-olive: var(--jq-ink); --brand-yellow: var(--accent-2); --black: var(--jq-ink); /* ink (soft #2E2E2E, not pure #000) */ --white: #ffffff; --terre-cuite: var(--jq-ink); /* deep accent → ink */ --brand-violet: var(--jq-pink); /* secondary accent → pink */ /* ---- LEGACY ALIASES ---- */ --cream: var(--color-bg); /* base ground (see --color-bg) */ --ink: var(--black); --terracotta: var(--accent); /* → terracotta (links / hovers / nav underline / numbers) */ --olive: var(--brand-olive); --violet: var(--jq-pink); --saffron: var(--accent-2); /* ---- NEUTRAL GREY RAMP (warm-neutral, tuned to the Jacquemus line greys) ---- */ --n-lin: #ffffff; --n-sable: #fffced; /* faintest warm tint */ --n-grege: #eeeeee; --n-argile: var(--jq-line); --n-taupe: var(--jq-muted); --n-brun: #767676; --n-moka: #444444; --n-encre: var(--jq-ink); /* ---- SEMANTIC TOKENS ---- */ --color-bg: #ffffff; /* GROUND — pure white (user preference 2026-06-26) */ --color-surface: var(--color-bg); --color-surface-2: #ffffff; /* cards / panels */ --color-fg: var(--jq-ink); /* Gris secondaire. Etait #767676, choisi pour le BLANC (4,54:1, tout juste AA) puis reutilise sur les surfaces creme, ou il retombait a 3,95:1 (--paper-card) et 3,77:1 (--mood-sand). Assombri pour passer AA sur les TROIS fonds : 5,57 blanc / 4,85 paper-card / 4,63 mood-sand. L'ecart visuel avec l'ancien est minime. */ --color-muted: #686868; --color-border: rgba(46, 46, 46, 0.10); /* light hairline */ --color-border-strong: rgba(46, 46, 46, 0.18); --color-accent: var(--jq-ink); /* solid fills/buttons → ink */ --color-accent-text: var(--jq-ink); /* accented text → ink */ --color-accent-fg: #ffffff; /* white text on ink fills */ --color-accent-2: var(--jq-muted); --color-dark: var(--jq-ink-2); /* #212529 dark-section ground */ --color-dark-fg: #ffffff; /* ---- EDITORIAL SURFACES ---- */ --paper: var(--color-bg); --sand: var(--color-bg); --paper-card: #f1efe9; /* soft warm light-grey product-card ground (Jacquemus thumbnails) */ /* ---- TYPOGRAPHY ---- Hermès-inspired system (experiment): EB Garamond (italic display serif) for headlines & subheads · Overpass Mono for functional uppercase labels, CTAs and product titles · Manrope for body/UI. Loaded via Google Fonts in each page . Arabic falls back to a system Naskh/Kufi stack - see the [dir="rtl"] overrides in styles.css (EB Garamond/Overpass Mono lack Arabic). */ /* JACQUEMUS TYPOGRAPHY — one warm geometric sans everywhere, no serif/mono mix. Jacquemus's real face is a custom proprietary sans (geometric/Futura-like warmth in the 2025 identity) that can't be redistributed. Jost — the open-source Futura clone — is the substitute, set as the PRIMARY face so it actually renders for every visitor, on body, UI, headlines, menus, the lot. No exceptions. (Futura PT only kicks in for the rare visitor who licenses it.) For a condensed wordmark contrast we could layer Bebas Neue / Anton on headlines later; for now the unified Jost system keeps the whole site coherent. */ --font-display: 'Jost', 'Futura PT', 'Jost Fallback', 'Helvetica Neue', Arial, sans-serif; --font-title: var(--font-display); --font-body: 'Jost', 'Futura PT', 'Jost Fallback', 'Helvetica Neue', Arial, sans-serif; --font-mono: 'Jost', 'Futura PT', 'Jost Fallback', 'Helvetica Neue', Arial, sans-serif; --font-hand: var(--font-display); /* Editorial display serif (2026-06-27) — big headings only; chrome stays on Jost. Ogg-spirited; 'opsz' axis supplies the high-contrast display cut at large sizes. */ --font-serif: 'Fraunces', 'Fraunces Fallback', 'Georgia', 'Times New Roman', serif; /* Handwritten accent (2026-06-27) — section kickers / eyebrows only, the brand's "en-tête de section" role (Tlab Lemongrass → Caveat as the free web stand-in). */ --font-hand-accent: 'Caveat', 'Segoe Script', 'Bradley Hand', cursive; /* ---- TYPE SCALE ---- */ --fs-xs: 0.75rem; --fs-sm: 0.875rem; --fs-base: 1rem; --fs-md: 1.125rem; --fs-lg: 1.5rem; --fs-xl: 2rem; --fs-2xl: clamp(2.25rem, 4vw, 3rem); --fs-3xl: clamp(2.75rem, 6vw, 4rem); --fs-hero: clamp(2.35rem, 4.6vw, 3rem); --tracking-wide: 0.18em; --tracking-wider: 0.24em; --leading-tight: 1.08; --leading-snug: 1.25; --leading-body: 1.62; /* ---- SPACING ---- */ --space-1: 0.25rem; --space-2: 0.5rem; --space-3: 0.75rem; --space-4: 1rem; --space-5: 1.25rem; --space-6: 1.5rem; --space-7: 1.75rem; --space-9: 2.25rem; --space-8: 2rem; --space-10: 2.5rem; --space-12: 3rem; --space-16: 4rem; --space-20: 5rem; --space-24: 6rem; --space-32: 8rem; /* ---- LAYOUT ---- */ --container: 1320px; --container-wide: 1560px; --gutter: clamp(1.25rem, 4vw, 3.5rem); --radius: 0px; /* Jacquemus is flat — sharp corners */ --radius-lg: 0px; --header-h: 80px; --header-h-stuck: 56px; /* ---- MOTION / EFFECTS ---- */ --transition: 0.35s cubic-bezier(0.22, 1, 0.36, 1); --transition-fast: 0.2s ease; --shadow: 0 20px 50px -28px rgba(0, 0, 0, 0.30); /* neutral, restrained */ --shadow-sm: 0 6px 18px -12px rgba(0, 0, 0, 0.22); --shadow-soft: 0 12px 32px -24px rgba(0, 0, 0, 0.18); --ease-out: cubic-bezier(0.22, 1, 0.36, 1); }