/* ========================================================================== RASA Public — design tokens + reset + shared components Tokens sourced verbatim from the claude.ai/design canvas (RASA.dc.html). No CDN. No @import http(s). All fonts self-hosted via fonts.css. ========================================================================== */ :root { /* Palette Day (default) */ --paper: #FAF9F5; --paper2: #EFE8DB; --card: #FBF8F2; /* Result-card fill (op 2026-07-07) : a very light beige, LIGHTER than the comparables card fill (--paper2 #EFE8DB) yet warm enough to read as a card. --card-result-2 is the lighter end of the card's lightening gradient. */ --card-result: #F7F1E7; --card-result-2: #F9F4EA; /* Same-object badge text (op 2026-07-07) : a sober, desaturated forest green (NOT neon) — reads on the light beige card. */ --badge-green: #4E7A3A; --ink: #1A1611; --inksoft: #4A423A; --line: #D8CDBA; --gold: #967736; --gold-accent: #C9A24B; --logo-gold: #B8923F; /* Nav header colour — switchable live via ?nav=ink|paper|bordeaux */ --nav-bg: #b10c0c; --nav-fg: #ffffff; --nav-line: rgba(255,255,255,.32); --nav-fg-dim: rgba(255,255,255,.7); /* Type */ --font-serif: 'Bodoni Moda', 'Bodoni Moda Fallback', Georgia, serif; --font-sans: 'Libre Franklin', 'Libre Franklin Fallback', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; --font-mono: 'IBM Plex Mono', 'IBM Plex Mono Fallback', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; /* Radii + shadows (parsimonious) */ --shadow-lot: 0 18px 50px -34px rgba(0,0,0,.4); --shadow-thumb:0 10px 26px -20px rgba(0,0,0,.5); /* Widths */ --content-max: 1500px; --content-pad: 30px; --facet-rail: 268px; --nav-height: 70px; } /* Night variant — via `data-theme="night"` on . */ html[data-theme="night"] { --paper: #0E0C0D; --paper2: #14100F; --card: #17130F; --card-result: #1A1511; --card-result-2: #221C16; --badge-green: #86AE64; --ink: #ECE3D4; --inksoft: #B0A896; --line: #302A22; --gold: #B4914E; --gold-accent: #D2A85A; --nav-bg: #0E0C0D; --nav-fg: #ECE3D4; --nav-line: rgba(236,227,212,.28); --nav-fg-dim: rgba(236,227,212,.68); } /* Nav-colour presets (switchable via body attr for A/B) */ html[data-nav="ink"] { --nav-bg: #1A1611; } html[data-nav="paper"] { --nav-bg: #F4EFE6; --nav-fg: #1A1611; --nav-line: #D8CDBA; --nav-fg-dim: rgba(26,22,17,.6); } html[data-nav="bordeaux"] { --nav-bg: #b10c0c; } /* ========================================================================== Reset ========================================================================== */ * { box-sizing: border-box; } html, body { margin: 0; background: var(--paper); color: var(--ink); font-family: var(--font-sans); } body { min-height: 100vh; } /* Contain overscroll bounce so scrolling past the top or bottom doesn't momentarily reveal content sliding into the 25 px interstice between the nav and the sticky lot header (bounce briefly pushes content past its fixed-position mask). */ html { overscroll-behavior-y: none; } /* Contain the off-canvas nav drawer's translateX(100%) so a closed drawer never adds phantom horizontal scroll. `clip` (not `hidden`) does NOT create a scroll container, so `position: sticky` in page content keeps working. */ html, body { overflow-x: clip; } body { overscroll-behavior-y: none; } ::selection { background: var(--gold); color: var(--paper); } img, svg { display: block; } button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; } input, select, textarea { font: inherit; color: inherit; } a { color: inherit; } /* Scrollbar */ ::-webkit-scrollbar { width: 11px; height: 11px; } ::-webkit-scrollbar-thumb { background: var(--paper2); border: 3px solid var(--paper); } /* Skip-to-content (a11y) */ .skip-link { position: absolute; left: -9999px; top: 0; padding: 8px 14px; background: var(--ink); color: var(--paper); z-index: 1000; } .skip-link:focus { left: 12px; top: 12px; } /* ========================================================================== Utility text ========================================================================== */ .mono { font-family: var(--font-mono); font-feature-settings: 'tnum' 1; } .serif { font-family: var(--font-serif); } .italic { font-style: italic; } /* Tabular numerals + widened thousand separator (~+15% of a normal space) for readability of grouped digits like `79 737 €`. */ .tnum { font-feature-settings: 'tnum' 1; word-spacing: 0.04em; } /* ± step buttons flanking the range-slider number inputs (10k € per click) */ .rasa-stepbtn { width: 20px; height: 34px; flex: none; background: none; border: 1px solid var(--line); color: var(--inksoft); font-size: 14px; line-height: 1; cursor: pointer; padding: 0; } .rasa-stepbtn:hover { border-color: var(--inksoft); color: var(--ink); } .eyebrow { font-size: 11px; letter-spacing: .2em; text-transform: uppercase; color: var(--inksoft); font-weight: 600; } .eyebrow-gold { color: var(--gold); } /* ========================================================================== NAV ========================================================================== */ .rasa-nav { position: sticky; top: 0; z-index: 60; background: var(--nav-bg); color: var(--nav-fg); border-bottom: 1px solid var(--line); height: var(--nav-height); } .rasa-nav__inner { max-width: none; margin: 0; padding: 0 40px; height: var(--nav-height); display: flex; align-items: center; gap: 34px; } .rasa-nav__brand { display: flex; align-items: center; gap: 13px; text-decoration: none; color: var(--nav-fg); } .rasa-nav__brand-word { font-family: var(--font-serif); font-weight: 600; font-size: 24px; line-height: 1; letter-spacing: .2em; padding-left: .2em; } .rasa-nav__links { display: flex; align-items: stretch; height: var(--nav-height); gap: 0; } .rasa-nav__link { display: flex; align-items: center; padding: 0 18px; font-size: 13px; letter-spacing: .04em; color: var(--nav-fg); opacity: .82; text-decoration: none; border-bottom: 2px solid transparent; } .rasa-nav__link:hover, .rasa-nav__link.is-active { opacity: 1; border-bottom-color: var(--gold-accent); } .rasa-nav__right { margin-left: auto; display: flex; align-items: center; gap: 8px; } .rasa-nav__search { display: flex; align-items: center; height: 38px; background: rgba(255,255,255,.07); border: 1px solid var(--nav-line); } .rasa-nav__search:hover, .rasa-nav__search:focus-within { border-color: var(--nav-fg); } .rasa-nav__search-btn { display: flex; align-items: center; gap: 10px; height: 100%; padding: 0 14px 0 13px; color: var(--nav-fg); text-decoration: none; font-size: 13px; min-width: 168px; } .rasa-nav__search-form { display: flex; align-items: center; gap: 9px; height: 100%; padding: 0 12px 0 13px; min-width: 168px; } .rasa-nav__search-ico { font-size: 14px; line-height: 1; color: var(--nav-fg); flex: none; } .rasa-nav__search-input { flex: 1 1 auto; min-width: 0; height: 100%; background: none; border: none; outline: none; color: var(--nav-fg); font-size: 13px; font-family: inherit; letter-spacing: inherit; } .rasa-nav__search-input::placeholder { color: var(--nav-fg-dim); opacity: 1; } /* Safari search-input chrome (cancel button / inner decorations) removed. */ .rasa-nav__search-input::-webkit-search-decoration, .rasa-nav__search-input::-webkit-search-cancel-button { -webkit-appearance: none; } .rasa-nav__search-sep { width: 1px; height: 20px; background: var(--nav-line); flex: none; } .rasa-nav__search-img { width: 38px; height: 100%; display: flex; align-items: center; justify-content: center; color: var(--nav-fg-dim); } .rasa-nav__search-img:hover { color: var(--nav-fg); } .rasa-nav__cta { display: flex; align-items: center; gap: 9px; height: 38px; padding: 0 12px; color: var(--nav-fg); text-decoration: none; font-size: 13px; } .rasa-nav__cta:hover { color: var(--gold-accent); } .rasa-nav__cta-count { font-family: var(--font-mono); font-size: 12px; color: var(--nav-fg-dim); font-weight: 600; } .rasa-nav__avatar { width: 38px; height: 38px; border-radius: 50%; color: #5c5850; background: #e3dacc; border: 1px solid rgba(255,255,255,.14); display: flex; align-items: center; justify-content: center; font-size: 10px; letter-spacing: .04em; font-weight: 300; margin-left: 18px; text-decoration: none; } .rasa-nav__lang { display: inline-flex; margin-right: 4px; border: 1px solid var(--nav-line); height: 26px; align-items: stretch; } .rasa-nav__lang-btn { padding: 0 8px; font-size: 11px; letter-spacing: .06em; color: var(--nav-fg-dim); background: none; text-transform: uppercase; } .rasa-nav__lang-btn.is-active { color: var(--nav-fg); background: rgba(255,255,255,.09); } /* Mobile burger + off-canvas drawer — hidden on desktop, revealed ≤899px. */ .rasa-nav__burger { display: none; flex-direction: column; justify-content: center; gap: 4px; width: 40px; height: 34px; margin-left: 4px; padding: 0 8px; background: none; border: 0; cursor: pointer; flex: none; } .rasa-nav__burger-bar { display: block; height: 2px; width: 22px; background: var(--nav-fg); } /* z88/z89 (op 2026-07-28) — AU-DESSUS du bandeau de sélection (z80). Mesuré : le bandeau peignait par-dessus le tiroir, et « Se déconnecter », placé en dernier exprès, finissait à 781px alors que le bandeau commence à 763 — inatteignable, caché dessous. Le tiroir ouvert est une surface MODALE : rien ne doit flotter dessus. Reste sous le sélecteur de dossier (95) et la visionneuse (100), qui ne coexistent pas avec lui. */ .rasa-nav__overlay { position: fixed; inset: 0; z-index: 88; background: rgba(20,16,10,.42); opacity: 0; pointer-events: none; transition: opacity .22s ease; } .rasa-nav__drawer { position: fixed; top: 0; right: 0; z-index: 89; width: min(78vw, 320px); height: 100%; overflow-y: auto; /* Coupe le CHAÎNAGE du défilement : arrivé en butée (ou quand le contenu tient dans la hauteur, cas le plus fréquent), le geste partait faire défiler la page derrière — « tantôt le menu, tantôt la page ». Le verrou `position: fixed` du body (rasa.js bindNavDrawer) traite l'autre moitié du problème, `body { overflow: hidden }` seul étant sans effet au doigt sur Safari iOS. */ overscroll-behavior: contain; -webkit-overflow-scrolling: touch; background: var(--paper); border-left: 1px solid var(--line); box-shadow: -18px 0 50px -30px rgba(0,0,0,.5); padding: calc(var(--nav-height) + 8px) 22px 28px; display: flex; flex-direction: column; gap: 2px; transform: translateX(100%); transition: transform .24s ease; visibility: hidden; } .rasa-nav__drawer-link { display: flex; align-items: center; gap: 8px; padding: 13px 2px; font-family: var(--font-serif); font-size: 17px; color: var(--ink); text-decoration: none; border-bottom: 1px solid var(--line-faint, var(--line)); } .rasa-nav__drawer-link.is-active { color: var(--gold); } .rasa-nav__drawer-row { display: flex; gap: 18px; } .rasa-nav__drawer-row .rasa-nav__drawer-link { border-bottom: 0; } .rasa-nav__drawer-sep { height: 1px; background: var(--line); margin: 10px 0; } .rasa-nav__drawer .rasa-nav__lang { margin: 6px 0 0; } body.rasa-nav-open .rasa-nav__overlay { opacity: 1; pointer-events: auto; } body.rasa-nav-open .rasa-nav__drawer { transform: translateX(0); visibility: visible; } body.rasa-nav-open { overflow: hidden; } /* ========================================================================== Layout containers ========================================================================== */ .rasa-container { max-width: var(--content-max); margin: 0 auto; padding: 0 var(--content-pad); } .rasa-section { padding: 28px var(--content-pad) 0; } .rasa-page-title { font-family: var(--font-serif); font-weight: 500; font-size: 38px; line-height: 1; color: var(--ink); margin: 0; } /* ========================================================================== Buttons + chips ========================================================================== */ .rasa-btn { display: inline-flex; align-items: center; gap: 9px; height: 42px; padding: 0 22px; border: 1px solid var(--ink); color: var(--ink); background: none; font-size: 13px; letter-spacing: .02em; text-decoration: none; } .rasa-btn:hover { background: var(--paper2); } .rasa-btn--primary { background: var(--ink); color: var(--paper); border: none; } .rasa-btn--primary:hover { background: var(--gold); color: var(--paper); } .rasa-btn--gold { background: var(--gold); color: var(--paper); border: none; } .rasa-btn--gold:hover { background: var(--ink); } /* Compare-toggle button : alternate label + subdued state when the item is already in the cart. Any button carrying `data-rasa-select-key` opts in. */ .rasa-btn[data-rasa-select-key] .cmp-label-remove { display: none; } .rasa-btn[data-rasa-select-key].is-on { background: var(--inksoft); color: var(--paper); } .rasa-btn[data-rasa-select-key].is-on:hover { background: var(--ink); } .rasa-btn[data-rasa-select-key].is-on .cmp-label-add { display: none; } .rasa-btn[data-rasa-select-key].is-on .cmp-label-remove { display: inline; } .rasa-btn[data-rasa-select-key].is-on .cmp-icon { transform: rotate(180deg); } .cmp-icon { display: inline-block; transition: transform .15s ease; } .rasa-btn--ghost { background: none; border: 1px solid var(--line); } .rasa-btn--ghost:hover { border-color: var(--ink); } .rasa-btn--tall { height: 50px; padding: 0 30px; font-size: 14px; } .rasa-chip { display: inline-flex; align-items: center; gap: 9px; height: 30px; padding: 0 8px 0 12px; background: var(--ink); color: var(--paper); font-size: 12px; } .rasa-chip__facet { opacity: .6; font-size: 10px; letter-spacing: .08em; text-transform: uppercase; } .rasa-chip__x { opacity: .7; font-size: 13px; } /* ========================================================================== Facet rail (Explore) — 268px sticky ========================================================================== */ /* Explore layout : full-bleed grid — the rail always hugs the LEFT viewport edge, results fill everything else. No artificial max-width so cards always fill the available space (no dead space on wide screens). */ .rasa-container:has(> .rasa-explore) { max-width: none; padding: 0; margin: 0; } .rasa-explore { display: grid; grid-template-columns: var(--facet-rail) minmax(0, 1fr); gap: 0; align-items: start; } .rasa-facet-rail { border-right: 1px solid var(--line); padding: 28px 26px 64px 30px; position: sticky; top: var(--nav-height); /* --searchhead-h : published by rasa.js bindSearchHead on /search/keyword only (the sticky parameters band) — 0px anywhere else, so the rail never slides under that band. */ max-height: calc(100vh - var(--nav-height) - var(--searchhead-h, 0px)); overflow-y: auto; overflow-x: visible; /* Arrivé au bout du rail, le geste partait faire défiler la page entière d'un coup (« saut » signalé après un passage dans les filtres). */ overscroll-behavior-y: contain; box-sizing: border-box; } .rasa-facet-rail::-webkit-scrollbar { width: 6px; } .rasa-facet-rail::-webkit-scrollbar-thumb { background: var(--paper2); border: none; } .rasa-facet-rail__head { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 4px; } .rasa-facet-group { border-top: 1px solid var(--line); padding: 15px 0 14px; } .rasa-facet-group__toggle { width: 100%; display: flex; align-items: center; justify-content: space-between; } .rasa-facet-group__label { font-size: 12.5px; letter-spacing: .04em; color: var(--ink); font-weight: 600; } .rasa-facet-group__body { margin-top: 13px; } .rasa-facet-group[data-closed="1"] .rasa-facet-group__body { display: none; } .rasa-facet-opt { width: 100%; display: flex; align-items: center; gap: 9px; padding: 5px 0; text-align: left; } .rasa-facet-opt:hover { opacity: .72; } .rasa-facet-opt__label { font-size: 13px; color: var(--ink); flex: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .rasa-facet-opt__count { font-family: var(--font-mono); font-size: 12px; color: var(--inksoft); } .rasa-check { width: 15px; height: 15px; border: 1px solid var(--ink); background: none; display: inline-flex; align-items: center; justify-content: center; font-size: 10px; flex: none; } .rasa-check.is-on { background: var(--ink); color: var(--paper); } /* Facet range slider */ .rasa-range { height: 3px; background: var(--line); position: relative; margin: 18px 4px 14px; } .rasa-range__fill { position: absolute; height: 3px; background: var(--gold); } .rasa-range__handle { position: absolute; width: 13px; height: 13px; border-radius: 50%; background: var(--paper); border: 1.5px solid var(--ink); top: 50%; transform: translate(-50%, -50%); } /* Dual-thumb range slider (min + max on one track). */ .rasa-dslider { position: relative; padding: 24px 6px 10px; } .rasa-dslider__track { position: relative; height: 3px; background: var(--line); } .rasa-dslider__fill { position: absolute; height: 3px; background: var(--gold); } .rasa-dslider__lo, .rasa-dslider__hi { position: absolute; left: -6px; right: -6px; width: calc(100% + 12px); top: -8px; height: 20px; -webkit-appearance: none; appearance: none; background: transparent; pointer-events: none; margin: 0; padding: 0; } .rasa-dslider__lo::-webkit-slider-thumb, .rasa-dslider__hi::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; width: 15px; height: 15px; border-radius: 50%; background: var(--paper); border: 1.5px solid var(--ink); cursor: pointer; pointer-events: auto; } .rasa-dslider__lo::-moz-range-thumb, .rasa-dslider__hi::-moz-range-thumb { width: 15px; height: 15px; border-radius: 50%; background: var(--paper); border: 1.5px solid var(--ink); cursor: pointer; pointer-events: auto; } .rasa-dslider__lo::-webkit-slider-runnable-track, .rasa-dslider__hi::-webkit-slider-runnable-track { background: transparent; } .rasa-dslider__vals { display: flex; justify-content: space-between; margin-top: 8px; font-family: var(--font-mono); font-size: 11px; color: var(--inksoft); font-feature-settings: 'tnum' 1; } .rasa-dslider__hint { font-size: 10px; color: var(--inksoft); opacity: .7; margin-top: 4px; text-align: center; } /* Autocomplete input */ .rasa-input { width: 100%; height: 34px; padding: 0 11px; background: var(--card); border: 1px solid var(--line); font-size: 13px; color: var(--ink); outline: none; } .rasa-input:focus { border-color: var(--ink); background: var(--paper); } /* ========================================================================== Results header + sort + view mode selector ========================================================================== */ .rasa-results { padding: 28px 30px 0; min-height: 80vh; min-width: 0; } /* Pinned header : keeps eyebrow + h1 + tools + chips visible under the nav. */ .rasa-results__pinned { position: sticky; top: var(--nav-height); background: var(--paper); z-index: 10; padding-top: 28px; margin-top: -28px; padding-bottom: 12px; } .rasa-results__head { display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; flex-wrap: wrap; } .rasa-results__tools { display: flex; align-items: center; gap: 18px; padding-bottom: 4px; } .rasa-sort .rasa-sort__menu { display: none; } .rasa-sort.is-open .rasa-sort__menu { display: block !important; } .rasa-sort__menu a:hover { background: var(--paper2); } .rasa-viewmodes { display: flex; border: 1px solid var(--line); } .rasa-viewmodes__btn { width: 36px; height: 34px; display: flex; align-items: center; justify-content: center; color: var(--inksoft); font-size: 16px; } .rasa-viewmodes__btn.is-active { background: var(--ink); color: var(--paper); } .rasa-viewmodes__btn:hover { color: var(--ink); } /* Sticky search parameters (op 2026-07-08, v2 PROGRESSIVE) — /search/keyword. rasa.js bindSearchHead drives --shrink from 0 (top of page) to 1 over the first scroll range (rAF-throttled) ; every dimension below interpolates via calc(), so the scroll literally compresses the band instead of snapping it. The title/tabs live OUTSIDE the band (template) and get pushed up with the page ; the results summary stays visible at all times. */ .rasa-searchhead { position: sticky; top: var(--nav-height); z-index: 40; background: var(--paper); padding-top: calc(22px - 12px * var(--shrink, 0)); padding-bottom: calc(16px - 6px * var(--shrink, 0)); /* Slot effect : shadow fades in with the shrink, clipped to the BOTTOM edge only (no lateral shadows) — the band reads as a slit the results slide under, not a floating card. */ box-shadow: 0 10px 22px -16px rgba(0, 0, 0, calc(.45 * var(--shrink, 0))); clip-path: inset(0 0 -30px 0); } /* Query field shrinks progressively (overrides the inline height/font-size). */ .rasa-searchhead #kwsearch input[name="q"] { height: calc(56px - 14px * var(--shrink, 0)) !important; font-size: calc(19px - 3px * var(--shrink, 0)) !important; } .rasa-searchhead .rasa-corpus-chips { margin-top: calc(14px - 5px * var(--shrink, 0)); } /* Disclaimer folds away progressively (height + fade). */ .rasa-searchhead .rasa-searchhead__note { overflow: hidden; max-height: calc(30px * (1 - var(--shrink, 0))); opacity: calc(1 - 1.4 * var(--shrink, 0)); margin-top: calc(14px * (1 - var(--shrink, 0))); } /* Results summary is ALWAYS visible in the band (op 2026-07-08 v2). */ .rasa-searchhead .rasa-searchhead__summary { display: block; } /* Keyword-search corpus toggles (op 2026-07-06) : check one or several. */ .rasa-corpus-chips { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; margin-top: 14px; } .rasa-corpus-chip { display: inline-flex; align-items: center; gap: 7px; height: 32px; padding: 0 14px; border: 1px solid var(--line); color: var(--inksoft); background: var(--card); font-size: 12.5px; letter-spacing: .02em; cursor: pointer; user-select: none; } .rasa-corpus-chip:hover { border-color: var(--ink); color: var(--ink); } /* On-state : server `.is-on` is the socle ; `:has(:checked)` makes the click feel instant (before the auto-submit reload). */ .rasa-corpus-chip.is-on, .rasa-corpus-chip:has(input:checked) { border-color: var(--ink); background: var(--ink); color: var(--paper); } /* The native checkbox drives state (form submit) but is visually replaced by the chip. */ .rasa-corpus-chip input { position: absolute; opacity: 0; width: 0; height: 0; } /* Per-corpus result count on a checked chip (op 2026-07-08). Inherits the chip's text colour (ink, or paper when the chip is on). */ .rasa-corpus-chip__count { font-size: 10.5px; opacity: .68; margin-left: 3px; } .rasa-corpus-chip::before { content: ""; width: 12px; height: 12px; border: 1px solid currentColor; flex: none; display: inline-flex; align-items: center; justify-content: center; box-sizing: border-box; } /* Checked chip : the square carries an actual ✓ (op 2026-07-08), ink on paper. */ .rasa-corpus-chip.is-on::before, .rasa-corpus-chip:has(input:checked)::before { content: "✓"; background: var(--paper); border-color: var(--paper); color: var(--ink); font-size: 10px; line-height: 1; font-weight: 700; } /* « Tous » — an elegant link-chip (no checkbox square) : small caps, gold accent on hover ; is-on (every corpus selected) inherits the dark chip look. */ .rasa-corpus-chip--all { text-decoration: none; } .rasa-corpus-chip--all::before { content: none !important; } .rasa-corpus-chip--all span { font-size: 10.5px; letter-spacing: .14em; text-transform: uppercase; } .rasa-corpus-chip--all:hover { border-color: var(--gold); color: var(--gold); } .rasa-corpus-chip--all.is-on:hover { color: var(--paper); border-color: var(--ink); } .rasa-corpus-chip input:focus-visible + span { text-decoration: underline; } /* Opt-in to show image-less results (op 2026-07-06). */ .rasa-noimg-toggle { display: flex; align-items: center; justify-content: center; gap: 8px; margin-top: 12px; font-size: 12px; color: var(--inksoft); cursor: pointer; user-select: none; } .rasa-noimg-toggle:hover { color: var(--ink); } .rasa-noimg-toggle input { width: 14px; height: 14px; accent-color: var(--ink); cursor: pointer; } /* Sort + filter controls row under the search box (op 2026-07-06). */ .rasa-search-controls { display: flex; align-items: center; justify-content: center; gap: 24px; flex-wrap: wrap; margin-top: 14px; } .rasa-search-controls .rasa-noimg-toggle { margin-top: 0; } /* Same opt-in as a link toggle in the museum browse tools row (op 2026-07-07). */ .rasa-results__tools .rasa-noimg-toggle { margin-top: 0; text-decoration: none; white-space: nowrap; } .rasa-sort { display: inline-flex; align-items: center; gap: 8px; font-size: 12px; color: var(--inksoft); } .rasa-sort > span { letter-spacing: .1em; text-transform: uppercase; } .rasa-sort select { height: 30px; padding: 0 12px; border: 1px solid var(--line); background: var(--card); color: var(--ink); font-size: 12.5px; cursor: pointer; } .rasa-sort select:hover { border-color: var(--ink); } /* Per-corpus facet rail on the keyword results (op 2026-07-06, Phase 1). */ .rasa-search-sec.has-rail { display: grid; grid-template-columns: 216px 1fr; gap: 32px; align-items: start; } .rasa-search-sec.has-rail .rasa-search-sec__head { grid-column: 1 / -1; } .rasa-facet-rail { position: sticky; top: calc(var(--nav-height) + var(--searchhead-h, 0px) + 14px); } .rasa-facet { margin-bottom: 22px; } /* Category headers pin at the top of the SCROLLING rail while their values scroll (op 2026-07-08) — each label sticks within its own .rasa-facet block, so consecutive labels hand over naturally. Used only by /search/keyword. */ .rasa-facet__label { font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--ink); font-weight: 600; margin-bottom: 9px; position: sticky; top: 0; z-index: 2; background: var(--paper); padding: 4px 0; } .rasa-facet__val { display: flex; align-items: center; gap: 8px; font-size: 12.5px; color: var(--inksoft); cursor: pointer; padding: 2px 0; } .rasa-facet__val:hover { color: var(--ink); } .rasa-facet__val.is-on { color: var(--ink); } .rasa-facet__val input { position: absolute; opacity: 0; width: 0; height: 0; } .rasa-facet__val::before { content: ""; width: 11px; height: 11px; border: 1px solid var(--line); flex: none; box-sizing: border-box; } .rasa-facet__val.is-on::before { background: var(--ink); border-color: var(--ink); } .rasa-facet__v { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .rasa-facet__c { flex: none; font-size: 11px; color: var(--inksoft); } /* Unified left rail in multi-corpus mode (op 2026-07-06) : one filter panel for all selected corpora, sub-grouped by corpus, with the result sections stacked right. */ .rasa-multi.has-rail { display: grid; grid-template-columns: 216px 1fr; gap: 32px; align-items: start; } .rasa-facet-rail--global { position: sticky; top: calc(var(--nav-height) + var(--searchhead-h, 0px) + 14px); } .rasa-facet-rail__title { font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--inksoft); font-weight: 600; margin-bottom: 16px; } .rasa-facet-corpus { margin-bottom: 24px; } .rasa-facet-corpus__head { font-size: 12px; letter-spacing: .04em; color: var(--ink); font-weight: 700; margin-bottom: 13px; padding-bottom: 6px; border-bottom: 1px solid var(--line); } @media (max-width: 900px) { .rasa-search-sec.has-rail { grid-template-columns: 1fr; } .rasa-facet-rail { position: static; margin-bottom: 24px; } .rasa-multi.has-rail { grid-template-columns: 1fr; } .rasa-facet-rail--global { position: static; margin-bottom: 24px; } } /* ========================================================================== Card / Grid item ========================================================================== */ .rasa-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(317px, 1fr)); gap: 47px 34px; } /* Whole-card lightening gradient (op 2026-07-07, inverted) : a single continuous gradient over the card — lighter beige at top → deeper beige at bottom. The image box is transparent (below) so the gradient shows through the letterbox = one surface. */ .rasa-card { display: flex; flex-direction: column; padding-bottom: 12px; background: linear-gradient(160deg, var(--card-result-2) 0%, var(--card-result) 100%); } .rasa-card__img { position: relative; aspect-ratio: 4/5; /* Transparent so the card's lightening gradient shows through the letterbox (object-fit:contain) — one continuous surface across the whole card. */ background: transparent; display: flex; align-items: center; justify-content: center; overflow: hidden; } .rasa-card__img img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; } .rasa-card__glyph { font-family: var(--font-serif); font-style: italic; font-size: 21px; color: var(--ink); opacity: .28; text-align: center; padding: 14px; } .rasa-card__cap { font-family: var(--font-mono); font-size: 9.5px; letter-spacing: .1em; color: var(--inksoft); margin-top: 9px; } .rasa-card__actions { position: absolute; top: 8px; right: 8px; display: flex; gap: 6px; z-index: 2; opacity: 0; pointer-events: none; transition: opacity .15s ease; } .rasa-card__img:hover .rasa-card__actions, .rasa-card__actions:focus-within { opacity: 1; pointer-events: auto; } .rasa-card__act { width: 32px; height: 32px; display: flex; align-items: center; justify-content: center; background: var(--paper); border: 1px solid var(--ink); color: var(--ink); font-size: 14px; } .rasa-card__select { position: absolute; top: 8px; left: 8px; z-index: 2; width: 22px; height: 22px; background: var(--paper); border: 1px solid var(--ink); display: flex; align-items: center; justify-content: center; font-size: 12px; opacity: 0; pointer-events: none; transition: opacity .15s ease; } /* Visible when the card is hovered OR the item is already picked (the .is-on indicator must always show its state). The comparable tiles (.rasa-cmpcard__img) reuse the same overlay. */ .rasa-card__img:hover .rasa-card__select, .rasa-cmpcard__img:hover .rasa-card__select, .rasa-card__select.is-on, .rasa-card__select:focus-visible { opacity: 1; pointer-events: auto; } .rasa-card__select.is-on { background: var(--gold); color: var(--paper); border-color: var(--gold); } /* Quick-compare badge on comparable tiles (op 2026-07-05 v2) — mirrors the ✓ overlay but top-RIGHT, revealed on hover of the WHOLE card. Clicking it opens the 1-vs-1 duo pop-up (bindDuo) ; clicking anywhere else on the card navigates to the object page. */ .rasa-cmpcard__duo { position: absolute; top: 8px; right: 8px; z-index: 2; width: 22px; height: 22px; background: var(--paper); border: 1px solid var(--ink); display: flex; align-items: center; justify-content: center; font-size: 13px; line-height: 1; color: var(--ink); cursor: pointer; opacity: 0; pointer-events: none; transition: opacity .15s ease; } .rasa-cmpcard:hover .rasa-cmpcard__duo, .rasa-cmpcard__duo:focus-visible { opacity: 1; pointer-events: auto; } .rasa-cmpcard__duo:hover { background: var(--gold); color: var(--paper); border-color: var(--gold); } /* ★ favori sur la carte comparable (op 2026-07-10) — empilé sous le badge ⇄. Révélé au hover comme lui ; PERSISTANT quand l'objet est favorisé. */ .rasa-cmpcard__fav { position: absolute; top: 36px; right: 8px; z-index: 2; width: 22px; height: 22px; background: var(--paper); border: 1px solid var(--ink); display: flex; align-items: center; justify-content: center; font-size: 13px; line-height: 1; color: var(--ink); cursor: pointer; opacity: 0; pointer-events: none; padding: 0; transition: opacity .15s ease; } .rasa-cmpcard:hover .rasa-cmpcard__fav, .rasa-cmpcard__fav.is-on, .rasa-cmpcard__fav:focus-visible { opacity: 1; pointer-events: auto; } .rasa-cmpcard__fav:hover { background: var(--gold); color: var(--paper); border-color: var(--gold); } .rasa-cmpcard__fav.is-on { color: var(--gold); border-color: var(--gold); } /* ⛶ agrandir + dossier sur la carte comparable (op 2026-07-28) — les quatre badges attendus sur toute carte de résultat sont compare / agrandir / favori / dossier. Empilés sous ★, révélés au survol comme leurs voisins. */ .rasa-cmpcard__acts { position: absolute; top: 8px; right: 8px; z-index: 2; display: flex; flex-direction: column; gap: 6px; margin-top: 62px; /* sous ⇄ (22) + ★ (22) + les deux écarts */ opacity: 0; pointer-events: none; transition: opacity .15s ease; } .rasa-cmpcard:hover .rasa-cmpcard__acts, .rasa-cmpcard__acts:focus-within { opacity: 1; pointer-events: auto; } .rasa-cmpcard__act { width: 22px; height: 22px; padding: 0; display: flex; align-items: center; justify-content: center; background: var(--paper); border: 1px solid var(--ink); color: var(--ink); font-size: 12px; line-height: 1; cursor: pointer; } .rasa-cmpcard__act:hover { background: var(--gold); color: var(--paper); border-color: var(--gold); } /* Le bouton de dossier arrive avec la classe des grilles — l'aligner ici. */ .rasa-cmpcard__acts .rasa-card__act { width: 22px; height: 22px; font-size: 12px; } /* "Unsold / Invendu" tag — sits in the card footer's price slot */ .rasa-card__unsold { font-size: 9.5px; letter-spacing: .14em; text-transform: uppercase; color: var(--inksoft); border: 1px solid var(--line); padding: 2px 7px; white-space: nowrap; } /* ========================================================================== Comparables — design canvas RASA.dc.html §Comparables + screenshots/final.png Sticky head (title + live count + view toggle + controls) parks under the nav by default ; the lot page drives --cmp-head-top per frame (real band bottom). z25 : over the band backdrop (20), under the band itself (30) — ejects invisibly through the band like .rasa-lot__sec-head. ========================================================================== */ .rasa-cmp__head { position: sticky; top: var(--cmp-head-top, var(--nav-height)); z-index: 25; background: var(--paper); } /* Bouton « Réglages » du header comparables — construit par rasa.js quelle que soit la largeur, c'est la feuille qui décide où il existe (téléphone seulement). Cette règle de base doit vivre AVANT la media query qui le révèle : à spécificité égale, la dernière déclarée l'emporte, et placée après elle rendait le bouton définitivement invisible (mesuré). */ .rasa-cmp__settings { display: none; } .rasa-cmp__tbtn { height: 27px; padding: 0 12px; background: none; color: var(--inksoft); border: 1px solid var(--line); font-size: 12px; cursor: pointer; } .rasa-cmp__tbtn + .rasa-cmp__tbtn { border-left: none; } .rasa-cmp__tbtn.is-on { background: var(--ink); color: var(--paper); border-color: var(--ink); } .rasa-cmp__ctl-label { font-size: 10.5px; letter-spacing: .12em; text-transform: uppercase; color: var(--inksoft); } .rasa-cmp__srcbtn { display: flex; align-items: center; gap: 8px; background: none; border: none; cursor: pointer; padding: 0; font-size: 13px; color: var(--ink); } .rasa-cmp__srcbtn:hover { opacity: .72; } .rasa-cmp__srcbox { width: 15px; height: 15px; flex: none; display: flex; align-items: center; justify-content: center; font-size: 10px; border: 1px solid var(--inksoft); background: transparent; color: transparent; } .rasa-cmp__srcbtn.is-on .rasa-cmp__srcbox { border-color: var(--gold); background: var(--gold); color: var(--paper); } .rasa-cmp__range { width: 128px; accent-color: var(--gold); cursor: pointer; } .rasa-cmp__mosaic { display: grid; gap: 30px 22px; grid-template-columns: repeat(auto-fill, minmax(max(245px, calc((100% - 88px)/5)), 1fr)); } /* align-items:stretch (op 2026-07-11) : les colonnes prennent toutes la hauteur de la plus grande → une colonne SANS résultat (ex. HAR à 0) reste assez haute pour que son en-tête sticky (.rasa-cmp__colhead) tienne toute la course, comme les colonnes pleines (bug : l'en-tête d'une colonne vide se décrochait immédiatement, son parent flex-start ne faisant que ~77px). */ .rasa-cmp__cols { display: flex; gap: 30px; align-items: stretch; } .rasa-cmp__col { flex: 1; min-width: 0; } /* With 1-2 sources checked the surviving columns get very wide — cap the ratio-driven tile so a card never exceeds 1000px tall (op 2026-07-05) ; the contained image letterboxes inside the capped box. */ .rasa-cmp__col .rasa-cmpcard__img { max-height: 1000px; } /* ── Duo compare pop-up (op 2026-07-05) — clicked comparable vs page object. Overlay shell built by rasa.js (bindDuo) ; the panel ships as the /compare/duo partial. data-mode="overlay" stacks the two figures in ONE box (images contained + centered → aligned superposition, B's opacity driven by --duo-op — the operator chains-review full-size compare idiom). */ .rasa-duo-overlay { position: fixed; inset: 0; z-index: 90; background: rgba(20, 16, 12, .78); display: flex; align-items: center; justify-content: center; padding: 24px; } .rasa-duo__panel { background: var(--paper); border: 1px solid var(--ink); width: min(1500px, 96vw); max-height: 94vh; display: flex; flex-direction: column; overflow: hidden; } .rasa-duo__head { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; padding: 14px 22px; border-bottom: 1px solid var(--line); flex: none; } .rasa-duo__stage { display: flex; gap: 22px; padding: 18px 22px 6px; min-height: 0; flex: 1 1 auto; } .rasa-duo__fig { flex: 1; min-width: 0; margin: 0; display: flex; flex-direction: column; min-height: 0; } .rasa-duo__imgbox { flex: 1 1 auto; min-height: 220px; max-height: 58vh; background: var(--paper2); border: 1px solid var(--line); display: flex; align-items: center; justify-content: center; overflow: hidden; } .rasa-duo__imgbox img { max-width: 100%; max-height: 100%; object-fit: contain; display: block; transition: transform .25s ease; } .rasa-duo__cap { font-size: 11px; letter-spacing: .08em; color: var(--inksoft); margin-top: 8px; text-transform: uppercase; } /* Superposition : les deux figures dans la MÊME boîte, B par-dessus. */ .rasa-duo__stage[data-mode="overlay"] { position: relative; } .rasa-duo__stage[data-mode="overlay"] .rasa-duo__fig { position: absolute; inset: 18px 22px 6px; } .rasa-duo__stage[data-mode="overlay"] .rasa-duo__imgbox { max-height: none; } .rasa-duo__stage[data-mode="overlay"] [data-duo-fig="b"] .rasa-duo__imgbox { background: transparent; border-color: transparent; } .rasa-duo__stage[data-mode="overlay"] [data-duo-fig="b"] img { opacity: var(--duo-op, .5); } .rasa-duo__stage[data-mode="overlay"] .rasa-duo__cap { position: absolute; bottom: -2px; } .rasa-duo__stage[data-mode="overlay"] [data-duo-fig="b"] .rasa-duo__cap { right: 0; } /* `contain` : ce cartel vit DANS la pop-up duo — sans lui, le défilement arrivé en butée s'échappait vers la page derrière la modale. */ .rasa-duo__cartel { overflow: auto; overscroll-behavior: contain; padding: 10px 22px 18px; flex: none; max-height: 34vh; } .rasa-duo__cartel table { width: 100%; border-collapse: collapse; font-size: 13px; color: var(--ink); } .rasa-duo__cartel th { text-align: left; font-size: 12px; font-weight: 600; padding: 8px 14px 8px 0; border-bottom: 1px solid var(--ink); vertical-align: bottom; } .rasa-duo__cartel td { padding: 7px 14px 7px 0; border-bottom: 1px solid var(--line); vertical-align: top; } .rasa-duo__cartel th:first-child, .rasa-duo__cartel td:first-child { width: 140px; } .rasa-duo__rowlabel { font-size: 9.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--inksoft); } /* final.png : light column header — label + count over a 2px ink rule. Sticky (op 2026-07-04) : pins flush under the sticky comparables head — --cmp-head-top follows the lot-page dock, --cmp-head-h is measured by bindCmpControls (92px fallback = compact head). z5 sits above the card hover overlays (z2) and below every band mask (z20+) ; paper background so the cards scroll cleanly under the rule. Releases naturally at the end of its own column (sticky is bounded by the parent .rasa-cmp__col). */ .rasa-cmp__colhead { position: sticky; /* +10px (op 2026-07-11) : petit filet d'air sous la ligne inférieure du header comparables, sinon le colhead y est collé quand il est pinné. */ top: calc(var(--cmp-head-top, var(--nav-height)) + var(--cmp-head-h, 92px) + 10px); z-index: 5; background: var(--paper); display: flex; align-items: baseline; justify-content: space-between; gap: 10px; font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--ink); font-weight: 600; border-bottom: 2px solid var(--ink); padding-bottom: 8px; margin-bottom: 18px; } /* Masque le ruban entre le bas du header comparables (.rasa-cmp__head, z25) et le haut du colhead pinné (z5). Sans lui, les cards de la colonne (z auto) y remontent au scroll (op 2026-07-11 « les cards passent dans l'interstice »). #1316 masquait un filet FIXE de 10px, mais l'écart head↔colhead n'est PAS toujours 10px : tant que le header n'est pas pinné en verrou avec le colhead (course de scroll où le colhead est déjà pinné et le header encore mobile), il grimpe à ~30px (mesuré CDP, op 2026-07-12) → 20px de cards fuient sous le filet de 10. Le masque couvre donc TOUTE la hauteur du header (--cmp-head-h, mesurée live) + les 10px de filet : il remonte jusqu'au haut du header. Le surplus (quand l'écart réel < masque) tombe DERRIÈRE le header opaque (z25 > ::before z5) → invisible ; le manque (écart > 10) est avalé. Borné à la largeur de colonne (left/right:0). */ .rasa-cmp__colhead::before { content: ""; position: absolute; left: 0; right: 0; top: calc(-1 * (var(--cmp-head-h, 92px) + 10px)); height: calc(var(--cmp-head-h, 92px) + 10px); background: var(--paper); } .rasa-cmp__colhead .tnum { font-family: var(--font-mono); font-size: 11px; color: var(--inksoft); font-weight: 400; } .rasa-cmp__colbody { display: flex; flex-direction: column; gap: 24px; } .rasa-cmp__empty { font-size: 12px; color: var(--inksoft); font-style: italic; padding: 10px 0; } /* Cards */ /* Same treatment as the result cards (op 2026-07-07) : the whole comparable card carries the lightening beige gradient (lighter top → deeper bottom) and its image box is transparent/borderless so the gradient is one continuous surface. */ .rasa-cmpcard { padding-bottom: 10px; background: linear-gradient(160deg, var(--card-result-2) 0%, var(--card-result) 100%); } .rasa-cmpcard__link { all: unset; cursor: pointer; display: block; } .rasa-cmpcard__link:hover { opacity: .82; } .rasa-cmpcard__img { background: transparent; border: none; overflow: hidden; display: flex; align-items: center; justify-content: center; position: relative; /* anchors the hover .rasa-card__select overlay */ } .rasa-cmpcard__img img { width: 100%; height: 100%; object-fit: contain; display: block; } .rasa-cmpcard__glyph { font-family: var(--font-serif); font-style: italic; font-size: 20px; color: var(--ink); opacity: .4; } .rasa-cmpcard__meta { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: 10px; } .rasa-cmpcard__detail { font-size: 9px; letter-spacing: .1em; text-transform: uppercase; color: var(--gold); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } /* Pilier (MUSÉES/PUBLICATIONS/VENTES/HAR) en gras dans le label carte (op 2026-07-11) — le distingue de la 2ᵉ partie (maison / titre / type). */ .rasa-cmpcard__pillar { font-weight: 700; } .rasa-cmpcard__sim { font-size: 10.5px; color: var(--inksoft); } /* Confirmed same-object badge (op 2026-07-07) — replaces the similarity % on a comparable that is a validated reconciliation link with the page object. */ .rasa-cmpcard__same { font-size: 8.5px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--badge-green); white-space: nowrap; flex: none; } .rasa-cmpcard__bar { height: 2px; background: var(--line); margin-top: 6px; } .rasa-cmpcard__bar > div { height: 2px; background: var(--gold); } .rasa-cmpcard__bar--same > div { background: var(--badge-green); } /* Réserve du bloc texte = marge du titre (10) + 2 lignes de titre (2×1.2×14px) + marge du contexte (5) + 1 ligne de contexte (1.35×11px). Hauteur de carte uniforme dans LES DEUX vues (op 2026-07-04), la ligne de contexte venant épouser un titre d'une seule ligne — le mou reste en bas du bloc. `overflow: hidden` empêche aussi la marge haute du titre de s'échapper du bloc par fusion. `min-height` et non `height` (op 2026-07-28) : depuis que les cartes comparables du corpus VENTES portent une ligne d'estimation (#1539), le contenu dépasse la réserve — calculée, elle, avant que cette ligne existe. Avec une hauteur FIGÉE + `overflow: hidden`, l'estimation était donc ROGNÉE, et seulement sur les cartes au titre de deux lignes : mesuré à 390px, 6 cartes sur 12, le pied débordant de 10 à 12px sous la boîte. Un plancher laisse la carte grandir quand il le faut ; les cartes d'une même rangée s'étirent à la plus haute (grille), donc les tailles restent harmonisées — ce que l'op demande — sans jamais couper un prix. */ .rasa-cmpcard__text { min-height: calc(10px + 2 * 1.2 * 14px + 5px + 1.35 * 11px); overflow: hidden; } /* Cartes VENTES : elles portent en plus la ligne estimation/prix (marge 12 + boîte mesurée 30). On lui réserve sa place, et on fige le titre à deux lignes pleines : sans cela une carte au titre court faisait 439px et sa voisine au titre long 458px — l'op demande des tailles harmonisées, pas seulement un prix visible. Les cartes des autres corpus gardent la réserve d'origine ; elles n'ont pas de ligne de prix à loger. */ .rasa-cmpcard--priced .rasa-cmpcard__text { min-height: calc(10px + 2 * 1.2 * 14px + 5px + 1.35 * 11px + 12px + 30px); } .rasa-cmpcard--priced .rasa-cmpcard__title { min-height: calc(2 * 1.2 * 14px); } .rasa-cmpcard__title { font-family: var(--font-serif); font-style: italic; font-size: 14px; color: var(--ink); margin-top: 10px; line-height: 1.2; /* Max 2 lines (ellipsis) at NATURAL height (op 2026-07-04 rev 2) : a 1-line title lets the context line rise to hug it — the slack sits at the card bottom, not as a hole between title and context. Rows still top-align (grid). */ display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } /* One fixed line — rendered unconditionally (empty keeps the slot) so cards with no context line stay the same height as their neighbours. */ .rasa-cmpcard__ext { font-size: 11px; color: var(--inksoft); margin-top: 5px; line-height: 1.35; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; height: 1.35em; } /* Agnostic (blind) mode : source, similarity and context rows disappear. */ .rasa-cmp.is-agnostic [data-cmp-ext] { display: none !important; } /* Recherche mots-clés (op 2026-07-11) : même mode Agnostique appliqué aux cards de grille des deux vues (Par corpus + mosaïque) — rasa.js bindKwControls pose .is-agnostic sur [data-kw-root]. */ [data-kw-root].is-agnostic [data-cmp-ext] { display: none !important; } .rasa-card__topline { margin-top: 14px; display: flex; align-items: baseline; justify-content: space-between; gap: 10px; } .rasa-card__toplabel { font-size: 10px; letter-spacing: .13em; text-transform: uppercase; color: var(--inksoft); } .rasa-card__topright { font-family: var(--font-mono); font-size: 10px; color: var(--inksoft); } .rasa-card__title { font-family: var(--font-serif); font-style: italic; font-weight: 500; font-size: 11.375px; line-height: 1.22; color: var(--ink); margin-top: 7px; text-wrap: pretty; text-transform: uppercase; letter-spacing: .04em; /* Constant card height : the title box is ALWAYS exactly 2 lines tall — longer titles are clamped with an ellipsis, shorter ones keep the slot. */ display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; height: calc(2 * 1.22em); } /* Ligne artiste au-dessus du titre (#1243 parité public — Spec 061, champ dédié seulement ; supprimée serveur quand le titre porte déjà le nom). */ .rasa-card__artist { font-size: 11px; font-weight: 600; letter-spacing: .4px; text-transform: uppercase; color: var(--ink); margin: 6px 0 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .rasa-card__artist + .rasa-card__title { margin-top: 2px; } /* Taille sous le titre — posée par la route UNIQUEMENT quand la taille est la clé de tri active de la recherche mots-clés (op 2026-07-11). */ .rasa-card__size { font-size: 11px; color: var(--inksoft); margin-top: 2px; font-variant-numeric: tabular-nums; } .rasa-card__meta { font-size: 12.5px; color: var(--inksoft); margin-top: 6px; line-height: 1.4; } /* Museum attribution on museum cards (op 2026-07-07) : name left, logo flag-right on the SAME line (logo pushed to the right edge via margin-left:auto ; when a museum has no logo the name simply keeps the left). */ .rasa-card__museum { display: flex; align-items: center; gap: 7px; margin-top: 7px; min-width: 0; } .rasa-card__museum-logo { height: 15px; width: auto; max-width: 42px; object-fit: contain; flex: none; margin-left: auto; } .rasa-card__museum-name { text-align: left; font-size: 11px; color: var(--inksoft); letter-spacing: .02em; min-width: 0; flex: 0 1 auto; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .rasa-card__foot { margin-top: 12px; border-top: 1px solid var(--line); padding-top: 9px; display: flex; align-items: baseline; justify-content: space-between; } .rasa-card__foot-l { font-size: 11px; color: var(--inksoft); letter-spacing: .02em; } .rasa-card__price { font-family: var(--font-mono); font-size: 14px; font-weight: 500; color: var(--ink); } .rasa-card__price--sold { color: var(--gold); } /* Gallery (masonry) */ .rasa-gallery { column-gap: 18px; } .rasa-gallery__item { break-inside: avoid; margin-bottom: 18px; position: relative; background: var(--paper); overflow: hidden; } /* Caption overlay hidden until hover — the image itself is the primary viewing target in gallery mode. */ .rasa-gallery__cap { opacity: 0; transition: opacity .18s ease; } .rasa-gallery__item:hover .rasa-gallery__cap, .rasa-gallery__item:focus-within .rasa-gallery__cap { opacity: 1; } /* Table */ .rasa-table { width: 100%; } .rasa-table__head, .rasa-table__row { display: grid; grid-template-columns: 32px 60px 70px 1fr 180px 200px 120px 120px; align-items: center; padding: 12px 12px; border-bottom: 1px solid var(--line); } .rasa-table__head { font-size: 10px; letter-spacing: .12em; text-transform: uppercase; color: var(--inksoft); font-weight: 600; } .rasa-table__row:hover { background: var(--card); } /* Skeleton (loading) */ .rasa-sk { animation: rasaSh 1.3s linear infinite; background: linear-gradient(90deg, var(--paper2) 25%, var(--card) 50%, var(--paper2) 75%); background-size: 720px 100%; } @keyframes rasaSh { 0% { background-position: -360px 0; } 100% { background-position: 360px 0; } } @keyframes rasaPulse { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: .3; transform: scale(.7); } } /* Empty state */ .rasa-empty { text-align: center; padding: 90px 20px 110px; } .rasa-empty__title { font-family: var(--font-serif); font-style: italic; font-size: 34px; color: var(--ink); } .rasa-empty__body { font-size: 14px; color: var(--inksoft); margin: 16px auto 26px; max-width: 430px; line-height: 1.6; } /* Pagination */ .rasa-pager { display: flex; align-items: center; justify-content: center; gap: 4px; margin-top: 54px; padding-top: 30px; border-top: 1px solid var(--line); } .rasa-pager__btn { height: 36px; padding: 0 14px; border: 1px solid var(--line); color: var(--ink); font-size: 13px; } .rasa-pager__btn:hover { border-color: var(--ink); } .rasa-pager__num.is-active { background: var(--ink); color: var(--paper); border-color: var(--ink); } /* ========================================================================== Comparison tray (persistent bottom bar) ========================================================================== */ .rasa-tray { position: fixed; left: 0; right: 0; bottom: 0; z-index: 80; background: var(--ink); border-top: 2px solid var(--gold); display: none; } .rasa-tray.is-open { display: block; } /* --- Replié en ONGLET (op 2026-07-28) --------------------------------- Déployé en permanence, le bandeau barrait le bas de chaque page : mesuré, il recouvrait les badges des cartes qui s'y trouvaient — un tap sur ☆ atterrissait sur « Comparer », d'où le « tantôt ça marche » signalé. Replié, il ne reste qu'une pastille en bas à droite, qui porte le compte. `pointer-events: none` sur le conteneur : replié, il ne doit plus rien intercepter sur toute la largeur de l'écran. */ .rasa-tray.is-min { background: none; border-top: 0; pointer-events: none; } .rasa-tray.is-min .rasa-tray__inner { display: none; } .rasa-tray__tab { display: none; } .rasa-tray.is-min .rasa-tray__tab { display: flex; align-items: center; gap: 8px; pointer-events: auto; position: fixed; right: 16px; bottom: 16px; z-index: 1; height: 46px; padding: 0 16px; background: var(--ink); color: var(--paper); border: 1px solid var(--gold); cursor: pointer; box-shadow: 0 10px 26px -14px rgba(0, 0, 0, .55); } .rasa-tray__tab-ico { font-size: 16px; line-height: 1; } .rasa-tray__tab-count { font-family: var(--font-mono); font-size: 13px; color: var(--gold); font-weight: 600; } /* Bouton de repli, présent seulement quand le bandeau est déployé. */ .rasa-tray__min { flex: none; width: 34px; height: 34px; padding: 0; display: flex; align-items: center; justify-content: center; background: none; border: 1px solid var(--nav-line, rgba(244,239,230,.3)); color: rgba(244,239,230,.75); font-size: 15px; line-height: 1; cursor: pointer; } .rasa-tray__min:hover { color: var(--paper); border-color: var(--paper); } .rasa-tray.is-min .rasa-tray__min { display: none; } .rasa-tray__inner { max-width: var(--content-max); margin: 0 auto; padding: 13px var(--content-pad); display: flex; align-items: center; gap: 18px; } .rasa-tray__label { font-size: 10px; letter-spacing: .2em; text-transform: uppercase; color: rgba(244,239,230,.55); flex: none; line-height: 1.4; } /* La bande de vignettes défile horizontalement : `overscroll-behavior-x` empêche le geste d'aller ensuite tirer l'historique du navigateur (retour arrière au balayage) une fois arrivé au bout. */ .rasa-tray__thumbs { display: flex; gap: 7px; flex: 1; overflow-x: auto; /* Marges INCHANGÉES sur écran pointeur : la hauteur du bandeau alimente `trayReserve()` du rig de la fiche objet (rasa.js bindLotDetail), qui en borne son image au repos — l'élargir déplaçait la bande image de 10px (mesuré à y=300). Le ✕ vit donc DANS la vignette ici, et ne déborde qu'au doigt, où le rig est éteint. */ padding: 2px 0; overscroll-behavior-x: contain; -webkit-overflow-scrolling: touch; } /* Cellule = vignette (lien vers la fiche) + ✕ (retrait). Séparer les deux est le correctif du 27/07 : la vignette entière était un bouton de suppression, sans indice visuel — on tapait pour revoir un objet, il disparaissait. */ .rasa-tray__cell { flex: none; position: relative; } .rasa-tray__thumb { /* `flex` et non `block` : ce n'est plus un