# ZWIAD WIZUALNY: bobochicparis.com — CSS, Typografia, Layout, Screenshoty

> **Status: FINALNY.** Warstwa wizualna (render Puppeteer, computed styles, performance). Uzupełnia Raport B (zwiad HTML, `zwiad-bobochic-2026-08-27.md`).
>
> **Uwaga metodyczna:** Screenshoty PNG zostały zapisane (13 plików), ale agent generujący ten raport nie posiada wizji obrazowej — analiza opiera się na (a) computed styles wydobytych przez `getComputedStyle()` w Puppeteer, (b) strukturze DOM zrzucanej do JSON, (c) tekście widocznym (`innerText`), (d) Raporcie B (HTML). Wszystkie wartości liczbowe (px, hex, wagi fontu) pochodzą z live renderu Chrome 124 headless i są faktualne. Tam gdzie brak wizji obrazu ogranicza opis (np. kompozycja fotografii), zaznaczono to wprost.

**Data zwiadu:** 2026-08-28
**Agent:** Agent C (Vilmax Cockpit — zwiad wizualny)
**Narzędzie:** Puppeteer 25.7.0, Chrome 124 headless (`--disable-blink-features=AutomationControlled`), viewport 1440×900 desktop / 375×812 mobile (iPhone X, deviceScaleFactor 2)
**Źródła:** 3 URL-e (Homepage, PDP Fuji, PLP Canapé d'angle convertible) + 4 zrzuty JSON (computed-styles, deep-dom, structure-dom, performance)

---

## 1. SCREENSHOTY — lista plików

Wszystkie w `docs/demo/screenshots/`:

| Plik | Viewport | Typ | Rozmiar | Opis |
|------|----------|-----|---------|------|
| `homepage_desktop.png` | 1440×900 | fullPage | 2,96 MB | Pełna strona główna desktop |
| `homepage_hero_desktop.png` | 1440×900 | viewport | 637 KB | Above-the-fold homepage (hero + nav) |
| `homepage_mobile.png` | 375×812 | fullPage | 2,28 MB | Pełna strona główna mobile (iPhone X, 2x) |
| `homepage_mobile_menu.png` | 375×812 | viewport | 281 KB | Menu mobilne po kliknięciu hamburgera |
| `pdp_fuji_desktop.png` | 1440×900 | fullPage | 3,41 MB | Pełna PDP Fuji desktop |
| `pdp_fuji_hero_desktop.png` | 1440×900 | viewport | 405 KB | Above-the-fold PDP (galeria + info) |
| `pdp_fuji_mobile.png` | 375×812 | fullPage | 2,10 MB | Pełna PDP Fuji mobile |
| `plp_canape_desktop.png` | 1440×900 | fullPage | 2,60 MB | Pełna PLP desktop |
| `plp_canape_hero_desktop.png` | 1440×900 | viewport | 453 KB | Above-the-fold PLP (grid + filtry) |
| `plp_canape_mobile.png` | 375×812 | fullPage | 9,91 MB | Pełna PLP mobile (największy plik — długa lista) |
| `plp_canape_hover.png` | 1440×900 | viewport | 427 KB | Karta produktu po hover (PLP) |

Dane surowe (JSON):
- `computed-styles.json` — getComputedStyle dla body/h1/h2/nav/CTA/price/footer (homepage + PDP)
- `deep-dom.json` — pełny zrzut DOM: fonty, nagłówki, przyciski, ceny, sekcje, obrazy (3 strony)
- `structure-dom.json` — struktura kart produktów PLP, swatchy PDP, badge, galeria, trust, cross-sell
- `performance.json` — metryki CDP + navigation timing (homepage)

---

## 2. PALETA KOLORÓW — konkretne wartości hex

Wartości z `getComputedStyle()` (rgb → hex). Potwierdzone live renderem:

### Kolory bazowe
| Element | Właściwość | rgb | hex | Rola |
|---------|-----------|-----|-----|------|
| `body` | color | rgb(51, 51, 51) | **#333333** | Tekst bazowy (ciemny grafit, nie czysty czarny) |
| `body` | background-color | rgb(255, 255, 255) | **#FFFFFF** | Tło strony (czysta biel) |
| H1 PLP "Canapé d'angle convertible" | color | rgb(11, 11, 12) | **#0B0B0C** | Prawie-czarny nagłówek (główny tytuł PLP) |
| H2 PLP | color | rgb(51, 51, 51) | **#333333** | Podtytuły sekcji SEO |
| Nawigacja PDP (link) | color | rgb(136, 136, 145) | **#888891** | Breadcrumb / linki nawigacyjne (szary) |
| Nawigacja PDP (kontener) | color | rgb(64, 64, 64) | **#404040** | Tekst nawigacji ciemniejszy |

### Kolory akcentów / CTA
| Element | Właściwość | rgb | hex | Rola |
|---------|-----------|-----|-----|------|
| CTA "Ajouter au panier" | background-color | rgb(12, 12, 13) | **#0C0C0D** | Główny przycisk — prawie czarny (nie #000) |
| CTA "Ajouter au panier" | color | rgb(255, 255, 255) | **#FFFFFF** | Tekst na CTA — biały |
| Przycisk "Voir plus de photos" | background-color | rgb(242, 242, 242) | **#F2F2F2** | Przycisk drugorzędny — jasny szary |
| Przycisk "Voir plus de photos" | color | rgb(11, 11, 12) | **#0B0B0C** | Tekst na przycisku drugorzędnym |
| Przycisk "Voir plus de photos" | box-shadow | rgba(12,12,13,0.05) 0 0 25px 0 | — | Delikatna poświata (5% opacity czerni) |

### Kolory cen
| Element | Właściwość | rgb | hex | Rola |
|---------|-----------|-----|-----|------|
| Cena standardowa | color | rgb(11, 11, 12) | **#0B0B0C** | Cena normalna — prawie czarny |
| Cena promocyjna (PDP Fuji 1 699 €) | color | rgb(164, 1, 4) | **#A40104** | **Cena promocyjna — ciemnoczerwony** (akcent promocji) |
| Cena przekreślona (homepage 1 799 €) | color | rgb(164, 1, 4) | **#A40104** | Stara cena — też czerwony |

### Kolory kart produktów (PLP)
| Element | Właściwość | Wartość | Rola |
|---------|-----------|---------|------|
| Karta produktu `li.ajax_block_product` | border | **1px solid rgb(230, 230, 230)** = `#E6E6E6` | Cienka szara ramka (1px) |
| Karta produktu | background-color | transparent (rgba(0,0,0,0)) | Brak wypełnienia — tło strony |
| Karta produktu | box-shadow | none | **Brak cienia** — minimalizm |
| Karta produktu | border-radius | 0px | **Kwadratowe rogi** — zero zaokrąglenia |

### Kolory swatchy (PDP Fuji — kołowe przyciski kolorów)
| Kolor (title) | rgb | hex | Kształt |
|---------------|-----|-----|---------|
| Taupe | rgb(139, 125, 107) | **#8B7D6B** | koło (border-radius: 50px) |
| Beige | rgb(234, 227, 210) | **#EAE3D2** | koło |
| Orange (selected) | rgb(181, 98, 42) | **#B5622A** | koło |
| Vert | rgb(61, 90, 62) | **#3D5A3E** | koło |
| Jaune | rgb(184, 150, 62) | **#B8963E** | koło |
| Rose | rgb(212, 168, 176) | **#D4A8B0** | koło |

Swatche PLP (mniejsze, 16×16px, kwadratowe — border-radius: 0px): Taupe #8B7D6B, Beige #EAE3D2, Bordeaux rgb(139,26,43)=**#8B1A2B**, Orange #B5622A.

### Kolory footer / trust
| Element | Właściwość | rgb | hex | Rola |
|---------|-----------|-----|-----|------|
| Footer (kontener) | background-color | rgb(255, 255, 255) | **#FFFFFF** | Footer biały (nie ciemny!) |
| Footer link (newsletter button) | background-color | rgb(12, 12, 13) | **#0C0C0D** | Przycisk w footerze — czarny |
| Footer link | color | rgb(255, 255, 255) | **#FFFFFF** | Tekst na przycisku footera |
| Pasek trust (reassurance) | background-color | rgb(26, 26, 26) | **#1A1A1A** | **Ciemny pasek trust** (30 jours, livraison, etc.) — ciemnoszary |
| Pasek trust | color | rgb(255, 255, 255) | **#FFFFFF** | Tekst na ciemnym pasku |
| Left block footer (geo/legal) | color | rgb(255, 255, 255) | **#FFFFFF** | Biały tekst na ciemnym tle dolnym |

### Podsumowanie palety
Bobochic używa **monochromatycznej palety z jednym akcentem**:
- **Baza:** biel #FFFFFF + grafit #333333 (tekst) + prawie-czarny #0B0B0C/#0C0C0D (nagłówki, CTA)
- **Akcent promocyjny:** ciemnoczerwony #A40104 (tylko ceny promocyjne/przekreślone)
- **Szare odcienie:** #E6E6E6 (ramki), #F2F2F2 (przyciski 2nd), #888891 (linki nav), #1A1A1A (pasek trust)
- **Zero pastelowych kolorów marki w UI** — kolor występuje tylko w swatchach produktów (realne kolory tkanin)
- **Zero gradientów** w computed styles (wszystkie background-color to wartości flat)

---

## 3. TYPOGRAFIA — font-family, rozmiary, wagi

### Fonty załadowane
- **Google Fonts (przez proxy axept.io):** `Source Sans 3:regular,500,600,700` — `<link>` potwierdzony na wszystkich 3 stronach
- **Fonty ikon:** FontAwesome 5.15.4 (solid, brands, regular, v4deprecations) — `@font-face` z `ka-f.fontawesome.com`
- **Font fallback CJK:** Axeptio CJK Fallback (tylko dla unicode azjatyckich)
- **Hanken Grotesk** — pojawia się w computed styles jako aktywny font nagłówków/nawigacji/przycisków/cen (prawdopodobnie ładowany przez `@font-face` w CSS motywu, nie w wykrytych `<link>`)

### Mapowanie fontów do elementów (z getComputedStyle)
| Element | font-family | font-size | font-weight | line-height | letter-spacing |
|---------|-------------|-----------|-------------|-------------|---------------|
| `body` | "Helvetica Neue", Helvetica, Arial, sans-serif | 14px | 400 | 20px | normal |
| H1 (homepage, ukryty SEO) | "Hanken Grotesk", sans-serif | 12px | 400 | 16px | normal |
| H1 (PDP, breadcrumb-style) | "Hanken Grotesk", sans-serif | 12px | 400 | 16px | normal |
| **H1 PLP "Canapé d'angle convertible"** | **"Hanken Grotesk", sans-serif** | **39px** | **800** | **48px** | normal |
| H2 PLP (SEO podtytuły) | "Hanken Grotesk", sans-serif | 18px | 900 | 24px | normal |
| Nawigacja (kontener) | "Hanken Grotesk", sans-serif | 11–15px | 400 | 16–21px | normal |
| Link nawigacji | "Hanken Grotesk", sans-serif | 11–15px | 400 | 16px | normal |
| **Cena (standard)** | "Hanken Grotesk", sans-serif | 12–14px | **700** | 20px | normal |
| **Cena promocyjna** | "Hanken Grotesk", sans-serif | 12px | **700** | 20px | normal |
| **CTA "Ajouter au panier"** | "Hanken Grotesk", sans-serif | 14px | 400 | 20px | normal |
| Przycisk "Voir plus de photos" | "Hanken Grotesk" | 14px | 600 | 20px | **-0.16px** (delikatny tracking) |
| Badge "Meilleure vente" | "Hanken Grotesk", sans-serif | 12px | **700** | — | normal |
| Footer link (newsletter btn) | "Hanken Grotesk", sans-serif | 16px | 700 | 24px | normal |
| Left block footer | "Hanken Grotesk", sans-serif | 14px | 400 | — | normal |

### Obserwacje typograficzne
- **Dwa systemy fontowe:** "Hanken Grotesk" (sans-serif, geometric) dla całego UI/nagłówków/cen/przycisków + "Helvetica Neue" jako fallback body. Brak fontu serif — marka jest w pełni sans-serif (nowoczesny, czysty).
- **H1 SEO ukryty:** na homepage i PDP H1 ma 12px/400 — to techniczny H1 dla SEO, wizualnie niewidoczny (color: rgb(255,255,255) na homepage = biały na białym? lub ukryty). Prawdziwy nagłówek wizualny to H1 PLP 39px/800.
- **Hierarchia rozmiarów:** 39px (H1 PLP) → 18px (H2) → 16px (footer btn) → 14px (body/CTA) → 12px (badge/nav/breadcrumb). Skok 39→18 jest duży — mocna dominacja tytułu strony.
- **Wagi:** 400 (body/nav), 600 (przycisk 2nd), 700 (cena/badge/footer btn), 800 (H1 PLP), 900 (H2 PLP). H2 jest **najcięższy (900)** — nietypowe, podtytuły SEO mocno zaakcentowane.
- **Letter-spacing:** wszędzie `normal` poza przyciskiem "Voir plus de photos" (-0.16px — delikatny negative tracking, typowy dla średnich rozmiarów sans-serif).
- **Brak kursyw, brak uppercase** w computed styles (text-transform nie badane, ale innerText naturalna wielkość liter).

---

## 4. LAYOUT — struktura każdej strony

### 4.1 Homepage (`/fr/`)

**Sekcje (kolejność z DOM, klasa `slider-video section slider-video-snap`):**
1. **Top bar / slider promo** (`bx_slider`) — rotator: "BOBODAYS: profitez de réductions jusqu'à 450€ offerts" + "Offre limitée: -30% sur tous nos matelas" + Trustpilot "Excellent"
2. **Quick nav** (`block_menu`) — linki: "BOBODAYS: jusqu'à - 450€", "Nos Best-sellers", "Nouveautés", "Canapés -1000€", "Livraison rapide"
3. **Hero slider** (`slider-video section slider-video-snap`) — "Les Bobodays sont de retour — Jusqu'à 450 € offerts! — Je fonce" (CTA)
4. **Sélectionnés pour vous** (`slider-video section`) — karuzela produktów: FUJI, DENISE... z badge "Meilleure vente", cena, liczba opinii (50), (54), (163)
5. **Nouveautés** (`slider-video section`) — "Découvrez nos nouveautés — Le meilleur de nos dernières nouveautés — Je découvre"
6. **Pasek trust** (reassurance, bg #1A1A1A) — "Notre service client à votre écoute / 30 jours d'essais sur les canapés / Livraisons spécialisées avec prise de RDV / Réglez..."
7. **Footer** — biały kontener z czarnym przyciskiem newsletter + left_block (geo: France/Belgique/Polska + linki prawne)

**Sidebar koszyka** (`big-block-cart` / `cart_block block exclusive`) — "Mon panier / Aucun produit / Commander - / 0 €" + rekomendacje "Nous vous recommandons" (FUJI 1 699 € / 1 799 € / -6%).

**Obrazy w nagłówku (ikony SVG, 24–28px):** question (Besoin d'aide?), card, phone, truck, headphones — z `cdn.bobochicparis.com/themes/bobochic/img/new-website/header/2026-*.svg`. Mega-menu używa PNG (`modules/bobomegamenu/images/`).

**Layout desktop:** szerokość 1440px, padding boczny ~64px (nav padding-left: 64px, slider padding: 8px 0 8px 64px). Treść w gridzie z lewym marginem 64px.

### 4.2 PDP Fuji (`/fr/canapes-d-angle-convertibles/18302-...`)

**Struktura (z DOM):**
1. **Top bar promo** — jak homepage (BOBODAYS + -30% matelas + Trustpilot)
2. **Nawigacja / breadcrumb** (nav, padding 45px 540px 8px 64px) — "Accueil / Séjour / Canapé / Canapé d'angle / Canapé d'angle convertible" (linki #888891, 11–12px)
3. **H1 techniczny** "Canapé d'angle convertible FUJI tissu lisse" (12px, #737373 — mały, szary)
4. **Galeria** (`gallery-link col-xs-12 ambianced active col-sm-12`) — thumbnails: 8+ obrazów `large_default` z CDN (288089–288095), format `cdn.bobochicparis.com/{ID}-large_default/canape-d-angle-convertible-fuji-tissu-lisse.jpg`
5. **Sekcja wariantów** — swatche kolorów (kołowe, border-radius 50px) + selektor kąta (Angle droit / Angle gauche)
6. **Blok cen** (`product-prices`) — "1 699 €" (cena promo, #A40104, 12px/700) + "1 799 €" przekreślone + "-6%"
7. **CTA** — "Ajouter au panier" (bg #0C0C0D, color #FFF, 14px, padding 9px 0, border-radius 0) + "Voir plus de photos" (bg #F2F2F2, 14px/600, shadow rgba(12,12,13,0.05) 0 0 25px)
8. **Badge** "Meilleure vente" (12px/700, #0B0B0C na #FFF, padding 2px 8px) + "Visible à Beaugrenelle" (badge salonu fizycznego)
9. **Trustpilot** "Excellent" (14px, #FFF na ciemnym tle nav)
10. **Pasek trust** (bg #1A1A1A) — 30 jours / livraison / paiement
11. **Avis clients** (`desktop-review tab-pane tab_media`) — "3.9/5", sortowanie "Les plus récents / Les plus anciens / Note la plus élevée", opinie (np. "Salmon Sarah 09/06/2025 — Conforme à la description. Très beau canapé, confortable et belle fini...")
12. **Cross-sell Collection FUJI** (`product_collection`) — "FUJI"
13. **Karuzela rekomendacji** (sidebar koszyk "Nous vous recommandons")
14. **Footer** — jak homepage

**Obrazy PDP:** thumbnails 208×156px (Mobile variant) — `cdn.bobochicparis.com/{ID}-Mobile/canape-d-angle-convertible-fuji-tissu-lisse.jpg`. Widoczne 8 produktów pokrewnych (FUJI bouclette, FUJI L, Denise, Montaigne, Roxelane...).

### 4.3 PLP Canapé d'angle convertible (`/fr/60-canapes-d-angle-convertibles`)

**Struktura:**
1. **Top bar promo** — jak wyżej
2. **Nawigacja / breadcrumb** (Raleway 15px na kontenerze, linki Hanken Grotesk 15px #333)
3. **H1** "Canapé d'angle convertible" (**39px/800/#0B0B0C** — główny tytuł wizualny)
4. **H2 SEO** (3×, 18px/900/#333) — "Le canapé d'angle convertible, confort et design" / "...fonctionnel et modulable" / "Découvrez encore plus de canapés chez BOBOCHIC!"
5. **Filtry** (`column col-xs-12 filter-xs` + `btn_filter` "Filtres") — przycisk "Filtres" (14px/#333)
6. **Sortowanie** — element div (pusty tekst — prawdopodobnie dropdown JS-renderowany)
7. **Paginacja / licznik** — "109 résultats" (109 produktów w kategorii)
8. **Grid produktów** (`product_list grid row four_items bobonosto-productlist glow-up`) — **4 kolumny** (`col-lg-3` = 4 per row desktop)
9. **Karty** (`li.ajax_block_product col-xs-12 col-sm-6 col-md-3 col-lg-3`) — responsive: 1 kolumna mobile, 2 tablet, 4 desktop
10. **Footer** — jak wyżej

**Karty produktów (3 zbadane):**
- Karta 1: Lovely (avance-recule électrique), cena "1 799 € / 1 999 € / -11%", badge "Meilleure vente", 3 swatche (Taupe/Beige/Bordeaux)
- Karta 2: Celeste (tissu lisse), "1 299 €", badge "Nouveau", 3 swatche (Beige/Bordeaux/Orange), **2 obrazy** (imgAll: 432642 + 436719 — drugi obraz dla hover)
- Karta 3: Campi (tissu velours), "999 €", badge "Nouveau", 3 swatche (Taupe/Beige/Orange), 2 obrazy

---

## 5. KOMPONENTY UI

### 5.1 Nawigacja główna
- **Font:** Hanken Grotesk, 11–15px, waga 400
- **Kolor linków:** #888891 (szary) na PDP / #333 na PLP / #D9D9D9 (jasnoszary) na homepage (na ciemnym tle hero?)
- **Padding linku:** 12px 12px 12px 0 (homepage) / 0 (PDP/PLP)
- **Border-radius:** 0px (kanciaste)
- **Mega-menu:** moduł `bobomegamenu` z obrazami PNG (356×88 "Bobodays", 156×70 "Nos nouveautés")
- **Ikony nagłówka:** SVG 24–28px (question, card, phone, truck, headphones) — monochromatyczne

### 5.2 Karta produktu (PLP)
- **Border:** 1px solid #E6E6E6 (cienka szara ramka)
- **Background:** transparent
- **Box-shadow:** none (brak cienia — flat design)
- **Border-radius:** 0px (kwadratowe rogi)
- **Padding:** 0px
- **Grid:** 4 kolumny desktop (col-lg-3), 2 tablet (col-sm-6), 1 mobile (col-xs-12)
- **Zawartość:** obraz packshot (Mobile variant, 208×156) + badge + nazwa (kolekcja wielkimi literami np. "FUJI") + cena + swatche (16×16px kwadratowe) + liczba opinii "(54)"
- **Klasa glow-up** (`for_glowup`) — wskazuje na animację hover (CSS glow effect)

### 5.3 Swatche kolorów
- **PDP:** kołowe (border-radius: 50px), rozmiar niezmierzony (offsetWidth 0 — lazy/late render), background = realny hex koloru tkaniny
- **PLP:** kwadratowe (border-radius: 0px), 16×16px, background = hex koloru
- **Selekcja:** klasa `color_pick selected` (PDP Fuji — Orange #B5622A selected)
- **Kolory potwierdzone:** Taupe #8B7D6B, Beige #EAE3D2, Bordeaux #8B1A2B, Orange #B5622A, Vert #3D5A3E, Jaune #B8963E, Rose #D4A8B0

### 5.4 Badge
- **Tekst:** "Meilleure vente", "Nouveau", "Visible à Beaugrenelle"
- **Font:** Hanken Grotesk, 12px, waga 700
- **Color:** #0B0B0C (prawie czarny) na #FFFFFF (białe tło)
- **Padding:** 2px 8px
- **Border-radius:** 0px (kanciasty)
- **Border:** none
- **Styl:** minimalistyczny — czarny tekst na białym, bez kolorowego wypełnienia (kontrast z typowymi czerwonymi badge'ami promocyjnymi)

### 5.5 CTA (przyciski)
- **Główny "Ajouter au panier":** bg #0C0C0D, color #FFF, 14px/400, padding 9px 0, border-radius 0, border 1px solid transparent, shadow none — **pełna szerokość** (padding 9px 0 sugeruje width:100%)
- **Drugorzędny "Voir plus de photos":** bg #F2F2F2, color #0B0B0C, 14px/600, padding 8px 16px, shadow rgba(12,12,13,0.05) 0 0 25px 0 (delikatna poświata), letter-spacing -0.16px
- **CTA hero "Je fonce" / "Je découvre":** tekst w sekcjach slidera (style w sekcji, nie badane osobno)
- **Styl:** kanciasty (border-radius 0), czarno-biały, bez gradientu — spójny z minimalizmem marki

### 5.6 Accordion (cechy techniczne)
- **Klasa:** `accordion module_bobo_footer` (UL) — w footerze "Vous & Nous" z "Pictogramme Plus / Pictogramme Moins" (ikony +/−)
- **PDP features:** element `[id*=features]` nie wykryty jako widoczny (może lazy-loaded lub w tabie) — sekcja "Caractéristiques" z 56 cechami (potwierdzone w Raporcie B)
- **Mechanizm:** +/− toggle (Pictogramme Plus/Moins)

### 5.7 Footer
- **Background:** #FFFFFF (biały — kontrast z paskiem trust #1A1A1A nad nim)
- **Sekcje:** "Vous & Nous" (accordion), Services, Catégories, Projets, Nos engagements
- **Newsletter:** przycisk bg #0C0C0D, color #FFF, 16px/700, padding 8px 16px
- **Left block:** geo (France/Belgique/Polska) + linki prawne (Plan du site, Mentions légales, Charte IA, FAQ, CGV...) — color #FFF na ciemnym tle dolnym
- **Płatności:** CB, VISA, MasterCard, Maestro, Paypal, Alma, Apple Pay, Google Pay, Amex (9 — z Raportu B)

---

## 6. STYL FOTOGRAFII

### 6.1 Metadane obrazów (CDN, rozmiary, alt)

- **CDN:** `cdn.bobochicparis.com/{ID}/` — dedykowany CDN obrazów
- **Warianty rozmiarowe:** `-Mobile` (208×156, thumbnail/listing), `-large_default` (galeria PDP), `-thickbox_default` (zoom)
- **Nazewnictwo:** `{kolekcja}-{typ}-{tkanina}.jpg` (np. `canape-d-angle-convertible-fuji-tissu-lisse.jpg`)
- **Liczba obrazów PDP Fuji:** ~300 URL-i na CDN (Raport B), 10 kolorów × ~15 zdjęć = full coverage wariantów
- **Kompozycja (Raport B):** studio profesjonalne, oświetlenie neutralne, tła białe/ciepłe wnętrza, kąty 3/4 + profil + zbliżenia tkaniny + mechanizm
- **Alt text:** na PLP obrazy mają pusty alt (`alt=""`) — problem dostępności; ikony nagłówka mają alt ("Besoin d'aide?")
- **Lazy loading:** potwierdzone (obrazy ładują się po scrollu — scrollFull wymuszone w skrypcie)
- **Hover drugi obraz:** karty 2 i 3 PLP mają 2 obrazy w `imgAll` (różne ID CDN) — wskazuje na swap obrazu przy hover (packshot → lifestyle/wnętrze)

### 6.2 Analiza obrazowa (gpt-4o Vision, 2026-08-28)

> **Metoda:** 6 kluczowych screenshotów wysłano do OpenAI gpt-4o Vision (detail: high) z promptem do analizy wizualnej (layout, kolory, typografia, styl fotografii, komponenty UI, feel marki). 3 z 6 analiz udane (mobile homepage, mobile PDP, PLP hover); 3 odmowa/ogólnik (hero desktop — gpt-4o odmówił szczegółowej analizy "I'm sorry, I can't assist with that" / "I'm unable to provide a detailed analysis"). Surowe wyniki: `docs/demo/screenshots/vision-analysis.json`.

**Obserwacje wizualne (gpt-4o Vision, 3 udane analizy):**

- **Styl fotografii:** Zdjęcia jasne, profesjonalne, z neutralnym oświetleniem. Tła białe lub wnętrzarskie (salon, sypialnia), co dodaje kontekst produktom. Kompozycja głównie 3/4 (półprofil), pozwala na lepsze zaprezentowanie mebli. Jakość wysoka — wygląda jak profesjonalna sesja studyjna. (potwierdza Raport B §6.1)
- **Feel marki:** "Premium i elegancja", "luksus", "nowoczesność i wyrafinowanie", "komfort i ekskluzywność". Minimalistyczny design, stonowana kolorystyka, wysokiej jakości zdjęcia tworzą wrażenie luksusu. Emocje: elegancja, komfort, nowoczesność.
- **Kolory (wizualnie):** Dominują neutralne — biel, czerń, odcienie szarości. Brak gradientów. Akcenty stonowane. (zgodne z computed styles §2)
- **Typografia (wizualnie):** Sans-serif, nowoczesne, czytelne. Nagłówki grubsze i większe niż tekst główny — wyraźna hierarchia. (zgodne z computed styles §3)
- **Mobile layout:** Układ jednokolumnowy, hamburger menu po lewej, hero zajmuje znaczną część ekranu, sekcje ułożone pionowo, rozbudowany footer. Przyciski touch-friendly (większe).
- **Swatche:** Okrągłe na PDP/mobile (przyjazne, decyzja zakupowa), kwadratowe małe na PLP (kompaktowe, przeglądanie). (zgodne z §5.3)

**Konflikty gpt-4o Vision vs computed styles (odnotować):**

| Element | gpt-4o Vision mówi | computed styles mówi | Kto ma rację? |
|---------|---------------------|----------------------|---------------|
| Karty produktów — rogi | "delikatne zaokrąglone rogi" | border-radius: 0px | **computed styles** (fakt CSS) — gpt-4o może interpretować antyaliasing/edge softness jako zaokrąglenie |
| Karty produktów — cień | "delikatne cienie" | box-shadow: none | **computed styles** (fakt CSS) — gpt-4o może widzieć cień z border 1px #E6E6E6 lub z renderingu przeglądarki |
| Badge kolor | "różowy" (PLP hover) | #0B0B0C na #FFFFFF (czarny na białym) | **computed styles** — gpt-4o może halucynować albo widzieć inny badge |

**Wniosek:** gpt-4o Vision jest dobry do oceny "feel marki" i stylu fotografii (subiektywne), ale **nie jest wiarygodny dla konkretnych wartości CSS** (border-radius, box-shadow, kolory). Dla faktów CSS używać computed styles (§2, §3, §5). Dla oceny estetycznej i stylu fotografii — analiza obrazowa jest wartościowa.

---

## 7. HOVER EFFECTS I INTERAKCJE

### PLP hover (zbadane na 1. karcie)
- **Selektor karty:** `li.ajax_block_product`
- **Klasa animacji:** `glow-up` / `for_glowup` (CSS glow effect na hover)
- **Obraz przed hover:** 1 obraz widoczny (`product-thumbnail-packshot`, packshot--mobile-only, vis:false na desktop — desktop używa innego obrazu via CSS)
- **Obraz po hover:** ta sama liczba obrazów, opacity 0 na mobile-only packshot — desktop renderuje obraz przez CSS background lub inny element
- **Drugi obraz:** karty 2/3 mają 2 src w imgAll (np. 432642 + 436719) — swap na hover potwierdzony strukturalnie
- **Screenshot:** `plp_canape_hover.png` zapisany (427 KB)

### Inne interakcje
- **Mega-menu:** hover na kategorię rozwija panel z obrazami PNG + linkami
- **Swatche PDP:** klik zmienia kolor (klasa `selected`) + aktualizuje galerię
- **Accordion footer:** +/− toggle (Pictogramme Plus/Moins)
- **Karuzele produktów:** `slider-video section slider-video-snap` + `nosto-reco-custom` (Nosto personalization)

---

## 8. MOBILE

### Viewport: 375×812 (iPhone X, deviceScaleFactor 2)

**Homepage mobile:**
- **Hamburger menu:** kliknięty (selektor fallback — element z klasą menu/burger w headerze), screenshot `homepage_mobile_menu.png` (281 KB) zapisany — menu otwarte
- **Top bar:** rotator promo (BOBODAYS / -30% matelas)
- **Quick nav:** prawdopodobnie zwinięta do hamburgera
- **Karuzele:** `slider-video-snap` — snap-scroll karuzela (horizontal swipe)
- **Grid produktów:** 1 kolumna (col-xs-12)
- **Sidebar koszyka:** prawdopodobnie off-canvas drawer

**PDP mobile:**
- Galeria: karuzela horyzontalna (thumbnails 208×156)
- Swatche: kołowe, scrollable
- CTA: pełna szerokość
- Pasek trust: stack pionowy

**PLP mobile:**
- **Grid:** 1 kolumna (col-xs-12) — 109 produktów = bardzo długa strona (9,91 MB screenshot!)
- **Filtry:** `btn_filter` "Filtres" — prawdopodobnie off-canvas drawer
- **Karty:** pełna szerokość, obraz + badge + nazwa + cena + swatche

### Różnice mobile vs desktop
- Grid 4 kol → 1 kol
- Mega-menu → hamburger
- Sidebar koszyk → off-canvas
- Karuzele → snap-scroll swipe
- Filtry boczne → drawer "Filtres"
- Pasek trust: desktop horyzontalny → mobile stack pionowy

---

## 9. PERFORMANCE — homepage desktop

Z `performance.json` (CDP + navigation timing):

| Metryka | Wartość | Ocena |
|---------|---------|-------|
| **domContentLoadedEventEnd** | 684,7 ms | Szybki DOM |
| **loadEventEnd** | 1654,5 ms | ~1,65s full load |
| **domInteractive** | 238,7 ms | Bardzo szybki TTI |
| **responseEnd** (TTFB) | 9,8 ms | Lokalny cache/CDN |
| **LCP** (largest-contentful-paint) | null | Nie zmierzone (LCP API nie zarejestrowało — możliwe obraz hero lazy) |
| **FirstMeaningfulPaint** (CDP) | 188022,86 ms (timestamp) | — |
| **Liczba requestów (Network)** | 178 | Umiarkowanie |
| **Liczba zasobów (Performance)** | 171 (resource) / 311 (CDP Resources) | Dużo — PrestaShop + moduły |
| **Transfer total** | 196 KB | Bardzo mało (CDN obrazów lazy, HTML 56 KB encoded) |
| **encodedBodySize** | 56 162 B (55 KB) | HTML homepage |
| **JS heap used** | 20 MB | Umiarkowane |
| **Layout count** | 44 | Niski (mało reflow) |
| **Recalc style count** | 87 | Umiarkowane |
| **Script duration** | 0,89 s | Niski |
| **Layout duration** | 0,43 s | Umiarkowany |
| **Nodes** | 10 026 | Duży DOM |
| **Frames** | 16 | Iframes (Trustpilot, video, Nosto) |
| **Documents** | 19 | iframe content |

**Obserwacje:**
- **TTFB 9,8 ms** — doskonały (CDN/edge cache)
- **DOM ready 684 ms, load 1,65 s** — szybkie (PrestaShop zoptymalizowany)
- **Transfer 196 KB** — bardzo lekki (obrazy lazy-load z CDN, nie wliczone w initial transfer)
- **171 requestów** — dużo (typowe dla PrestaShop z modułami: mega-menu, Nosto, Trustpilot, Axeptio cookies, FontAwesome)
- **16 iframes** — Trustpilot widget, wideo, Nosto personalization — potencjalny wpływ na CLS
- **LCP null** — API nie zarejestrowało LCP (możliwe że hero to CSS background lub obraz lazy poza viewportem)
- **DOM 10 026 nodes** — duży (mega-menu + karuzele + sidebar)

---

## 10. OCENA ESTETYCZNA — styl marki

### Pozycjonowanie wizualne
Bobochic Paris prezentuje styl **"premium minimalistyczny z akcentem couture"**:
- **Monochromatyczna paleta:** biel + grafit + prawie-czarny, jedyny akcent koloru to ciemnoczerwony #A40104 na cenach promocyjnych. Zero pasteli, zero gradientów, zero kolorów marki w UI.
- **Kanciasty design:** border-radius 0px wszędzie (karty, przyciski, badge, swatche PLP) — tylko swatche PDP są kołowe. To radykalny wybór — większość e-commerce używa zaokrągleń dla "miękkości". Bobochic celuje w **architektoniczną ostrość**.
- **Flat design:** brak cieni na kartach (box-shadow: none), jedyny cień to delikatna poświata na przycisku 2nd (5% opacity). Zero skeuomorfizmu.
- **Typografia sans-serif:** Hanken Grotesk (geometric sans) + Helvetica fallback. Brak serif — nowoczesny, technologiczny, nie "tradycyjny meblarz".
- **Hierarchia mocna:** H1 PLP 39px/800 dominuje, H2 18px/900 (najcięższa waga!) — mocna akcentuacja tytułów SEO.
- **Ceny w czerwieni:** jedyny kolor emocjonalny — ciemnoczerwony #A40104 (nie jaskrawoczerwony), stonowany, premium.

### Ton wizualny
- **"La French Elegance"** (z `<title>`) — potwierdzone wizualnie: restrykcyjna paleta, kanciaste formy, brak "krzykliwych" elementów
- **Couture positioning:** kolekcje nazwane (FUJI, EVEREST, DENISE, MONTAIGNE...) wyświetlane wielkimi literami na kartach — nawiązanie do mody/haute couture
- **Trust przez stonowanie:** Trustpilot "Excellent" + pasek trust #1A1A1A (ciemny, nie krzykliwy) + badge "Meilleure vente" (czarny na białym, nie czerwony)
- **Fotografia jako nośnik premium:** profesjonalne studio, oświetlenie neutralne, ~300 obrazów na PDP — to fotografie robią "premium", nie UI

### Co sprawia wrażenie "premium"
1. **Restrykcyjna paleta monochromatyczna** — zero wizualnego szumu
2. **Kanciaste formy** (border-radius 0) — architektoniczna precyzja
3. **Brak cieni/gradientów** — flat, czysty
4. **Jeden akcent koloru** (czerwień #A40104) — używany oszczędnie, tylko na promocji
5. **Typografia geometric sans** (Hanken Grotesk) — nowoczesna
6. **Mocna hierarchia** (39px H1 vs 14px body) — pewność siebie wizualna
7. **Badge czarno-białe** — nie "wyprzedażowe" czerwone, stonowane
8. **Fotografia studyjna** — realny nośnik jakości

---

## 11. WNIOSKI DLA VILMAX — fakty wizualne wpływające na decyzje produktowe

> **Zakres:** fakty wizualne, NIE rekomendacje strategiczne. To, co zarząd fabryki musi wiedzieć o benchmarku.

### F1. Paleta monochromatyczna jest radykalna
Bobochic używa **tylko biel + grafit + prawie-czarny + jeden akcent czerwieni**. Zero kolorów marki w UI. Kolor występuje wyłącznie w swatchach produktów (realne kolory tkanin). To oznacza, że dla Vilmax decyzja o palecie UI to decyzja między (a) naśladowaniem monochromatycznego minimalizmu, (b) wprowadzeniem własnego koloru marki — co wizualnie odróżniłoby nas, ale ryzykuje "mniej premium" wygląd.

### F2. Kanciaste formy (border-radius 0) to świadomy wybór premium
Wszystkie karty, przyciski, badge mają border-radius 0px. Tylko swatche PDP są kołowe. To kontrastuje z trendem "soft/rounded" w e-commerce. Vilmax musi świadomie wybrać: kanciaste (premium/architektoniczne) czy zaokrąglone (przyjazne/casual).

### F3. Ceny promocyjne w ciemnoczerwonym #A40104
Jedyny kolor emocjonalny w UI. Nie jaskrawoczerwony (#FF0000), ale stonowany bordowy. To wpływa na sposób oznaczania promocji w danych produktowych — Vilmax musi zdecydować czy promocja to "krzyk" (jaskrawy) czy "whisper" (stonowany).

### F4. Badge "Meilleure vente" jest czarno-biały
Nie czerwony, nie żółty — czarny tekst (#0B0B0C) na białym tle, 12px/700, padding 2px 8px. To wpływa na `config/badge-policy.json` — badge premium jest stonowany, nie "wyprzedażowy".

### F5. Typografia: Hanken Grotesk + Helvetica, zero serif
Marka premium meblowa nie używa serif (tradycyjny "meblarz"). To geometric sans. Vilmax musi wybrać font marki — serif = tradycja/regał, sans = nowoczesność/design.

### F6. H1 SEO ukryty (12px), wizualny H1 na PLP 39px/800
Bobochic rozdziela SEO H1 (12px, niewidoczny) od H1 wizualnego. To techniczna decyzja SEO. Vilmax musi zdecydować o strategii H1 w swoich listingach.

### F7. Karta produktu: border 1px #E6E6E6, brak cienia, brak radius
Minimalna karta — cienka szara ramka, zero cienia, zero zaokrąglenia. To oznacza, że "bogata" karta (cień, radius, gradient) = mniej premium w tej estetyce. Wpływa na design komponentu karty w Vilmax Cockpit / WooCommerce.

### F8. Swatche: kołowe PDP, kwadratowe PLP
Niespójność celowa? PDP (decyzja zakupowa) = kołowe (przyjazne), PLP (przeglądanie) = kwadratowe 16px (kompaktowe). Vilmax musi zdecydować o kształcie swatchy w swoich listingach.

### F9. Performance: 196 KB transfer, 1,65s load, 178 requestów
Strona jest lekka (CDN obrazów lazy), ale 178 requestów i 16 iframes (Trustpilot, Nosto, wideo). Vilmax musi świadomie wybrać widgety third-party — każdy iframe to request + potencjalny CLS.

### F10. ~300 obrazów na PDP, 10 kolorów × 15 zdjęć
Bobochic inwestuje masywnie w fotografie — full coverage wariantów. To wpływa na Visual AI Studio (Moduł 2) — Vilmax musi produkować multi-angle + multi-variant zdjęcia, nie tylko 1 packshot. Skala: 10 kolorów × 15 kątów = 150 zdjęć na produkt.

### F11. Drugi obraz na hover (PLP)
Karty 2/3 mają 2 obrazy — swap packshot → lifestyle na hover. To standard premium. Vilmax musi w listingach przewidzieć min. 2 obrazy na produkt (packshot + wnętrze/lifestyle).

### F12. Pasek trust #1A1A1A (ciemny) nad białym footerem
Trust elements (30 jours, livraison, paiement) na ciemnym pasku — kontrast z białym footerem. To wzorzec trust band. Vilmax musi zdecydować o umiejscowieniu trust elements w swoich listingach.

### F13. Cross-sell "Collection FUJI" (`product_collection`)
Kolekcje nazwane (FUJI, EVEREST, DENISE) używane jako cross-sell. Vilmax musi zdecydować o nazywaniu kolekcji i ich roli w cross-sellu — to wpływa na `config/editor-config.json` (copyStyles, kolekcje).

### F14. 3 rynki: France, Belgique, Polska
Footer zawiera geo-switch: bobochicparis.com/fr, .be, .pl. To oznacza, że Bobochic jest już na rynku PL — Vilmax konkuruje bezpośrednio w Polsce.

### F15. Brak LCP zmierzonego
LCP API nie zarejestrowało largest contentful paint — możliwe że hero to CSS background lub lazy-load poza viewportem. Vilmax musi w swoich listingach świadomie zarządzać LCP (hero image priority).

---

## 12. DANE SUROWE — lokalizacja

| Plik | Ścieżka | Zawartość |
|------|---------|-----------|
| computed-styles.json | `docs/demo/screenshots/computed-styles.json` | getComputedStyle: body/h1/h2/nav/CTA/price/footer (homepage + PDP) |
| deep-dom.json | `docs/demo/screenshots/deep-dom.json` | Pełny zrzut DOM: fonty, nagłówki, przyciski, ceny, sekcje, obrazy (3 strony) |
| structure-dom.json | `docs/demo/screenshots/structure-dom.json` | Karty PLP, swatche PDP, badge, galeria, trust, cross-sell |
| performance.json | `docs/demo/screenshots/performance.json` | CDP metrics + navigation timing (homepage) |

Wszystkie screenshoty PNG w `docs/demo/screenshots/` (11 plików, łącznie ~25 MB).

---

**Koniec raportu wizualnego. Uzupełnia Raport B (zwiad HTML, `zwiad-bobochic-2026-08-27.md`).**