/* ============================================================ SCÈNE — MAISON (Showroom) Architecture identique Porte d'entrée : image bitmap photoréaliste + overlay interactif. Trois zones étagère cliquables remplacent l'unique zone porte. Trois plaques laiton recouvrent les plaques BLANK de l'image (texte HTML uniquement). Animation zoom caméra à 3 origines distinctes selon l'étagère cliquée. Références : Hermès Faubourg, Loro Piana Place Vendôme, Goyard. ============================================================ */ /* ============================================================ 00a · VOILE DORÉ ENTRANT — raccord avec voile sortant Porte d'entrée À l'arrivée depuis index.html, le voile doré full-screen sortant de la Porte d'entrée (.dev-fade-overlay) est à ~80 % d'opacité au moment de la navigation. On reprend immédiatement avec un voile doré identique (même teinte ocre) en plein écran, qui fade-out 900 ms en ease-out. Zéro flash blanc entre les deux pages. La classe .is-entering est posée sur au load HTML, retirée automatiquement à la fin de l'animation (animation-fill-mode forwards + visibility: hidden). Pas besoin de JS dédié. Reduced-motion : le voile saute (display: none). ============================================================ */ .page--maison.is-entering::before { content: ''; position: fixed; inset: 0; z-index: var(--z-overlay); pointer-events: none; background: radial-gradient(circle at 50% 50%, rgba(200, 153, 104, 1.00) 0%, rgba(170, 130, 85, 0.98) 50%, rgba(130, 95, 55, 0.95) 100% ); animation: maison-veil-out 900ms var(--ease-out-soft) forwards; } @keyframes maison-veil-out { from { opacity: 1; } to { opacity: 0; visibility: hidden; } } /* ============================================================ 00 · CONTENEUR SCÈNE ============================================================ */ .scene--maison { position: relative; min-height: 100vh; min-height: 100dvh; overflow: hidden; background: var(--color-bg); } .scene--maison .scene__camera { position: relative; width: 100%; height: 100%; min-height: inherit; /* hérite le 100vh — sans ça, les enfants en position:absolute font collapser à 0. */ overflow: hidden; } .scene--maison .scene__stage { position: relative; width: 100%; height: 100%; min-height: inherit; } /* ============================================================ 01 · COUCHE PHOTO — image bitmap pleine zone Cadrage desktop : 16:9 (paysage), panorama showroom 3 étagères Cadrage mobile : 9:16 (portrait, cadrage plus serré sur les étagères) ============================================================ */ .maison-photo { position: absolute; inset: 0; z-index: 0; display: block; /* Placeholder visuel pendant le développement, avant placement des fichiers WebP. Tonalité crème/sable + halo doré central pour suggérer le lustre + la lumière dorée du prompt. */ background: radial-gradient(ellipse 50% 35% at 50% 32%, rgba(255, 220, 160, 0.30) 0%, rgba(255, 200, 120, 0.10) 50%, transparent 80% ), linear-gradient(180deg, #F1E9DA 0%, #ECE3CF 50%, #DCD0B6 100% ); } .maison-photo__img { width: 100%; height: 100%; object-fit: cover; /* Cadrage desktop par défaut : centre H, 50 % vertical (plein cadre, mur du fond + sol marbre + plafond visibles). */ object-position: 50% 50%; display: block; } @media (max-width: 767px) { .maison-photo__img { /* Mobile : object-position center 50/50. L'image desktop 16:9 est utilisée aussi sur mobile (Gemini n'a pas su reproduire la compo 3 étagères côte-à-côte en portrait). object-fit: cover crop horizontalement → seule l'étagère centrale reste pleinement visible. Bords gauche/droit coupés assumés (Cyril). */ object-position: 50% 50%; } } /* ============================================================ 02 · COUCHE OVERLAY — éléments interactifs au-dessus de la photo pointer-events: none par défaut, activés sur les enfants cliquables et sur les plaques (les plaques sont décoratives → none aussi). ============================================================ */ .maison-overlay { position: absolute; inset: 0; z-index: 2; pointer-events: none; } .maison-overlay > * { pointer-events: auto; } .maison-shelf-plaque { pointer-events: none; /* les plaques sont décoratives, le clic passe au-travers vers la zone étagère. */ } /* ============================================================ 03 · ZONES ÉTAGÈRE — calage pixel-perfect sur les 3 étagères de l'image. CSS variables par étagère : --shelf-{N}-left/top/width/ height. Valeurs initiales basées sur la description du prompt Imagen ("3 étagères équidistantes occupant le 2/3 central horizontal du mur du fond"). À CALIBRER en preview une fois l'image bitmap générée et déposée. ============================================================ */ .maison-overlay { /* CALIBRÉ pixel-perfect sur maison-desktop.webp (1376×768). Mesures effectuées directement sur l'image bitmap déposée : • Étagères alignées top ~35 %, hauteur ~31 % (corniche → bord plaque) • Width ~23 % chacune, équidistantes • Étagère 1 (couettes) : left 13 % • Étagère 2 (oreillers) : left 38.5 % • Étagère 3 (traversins) : left 64 % L'image mobile = même image desktop (Gemini limitation). Sur mobile object-fit: cover crop les bords latéraux → seules les zones tombant dans la portion visible restent cliquables (en pratique : étagère 2 centrale toujours visible, étagères 1 et 3 partiellement coupées selon la largeur du viewport). Cyril a accepté ce dégradé. */ --shelf-1-left: 13%; --shelf-1-top: 35%; --shelf-1-width: 23%; --shelf-1-height: 31%; --shelf-2-left: 38.5%; --shelf-2-top: 35%; --shelf-2-width: 23%; --shelf-2-height: 31%; --shelf-3-left: 64%; --shelf-3-top: 35%; --shelf-3-width: 23%; --shelf-3-height: 31%; } .maison-shelf-zone { position: absolute; z-index: 4; } .maison-shelf-zone--1 { left: var(--shelf-1-left); top: var(--shelf-1-top); width: var(--shelf-1-width); height: var(--shelf-1-height); } .maison-shelf-zone--2 { left: var(--shelf-2-left); top: var(--shelf-2-top); width: var(--shelf-2-width); height: var(--shelf-2-height); } .maison-shelf-zone--3 { left: var(--shelf-3-left); top: var(--shelf-3-top); width: var(--shelf-3-width); height: var(--shelf-3-height); } /* ============================================================ 04 · BOUTON ÉTAGÈRE — zone cliquable transparente, halo doré au hover/focus. L'étagère est dans l'image bitmap, pas dessinée en CSS — le bouton est juste une zone interactive invisible. ============================================================ */ .maison-shelf { position: absolute; inset: 0; margin: 0; padding: 0; border: 0; background: transparent; cursor: pointer; z-index: 2; border-radius: 4px; /* iOS : coupe le délai 300 ms et le sticky hover qui faisait croire à un délai après le tap (audit iPhone 2026-04-30 bug critique 1). */ touch-action: manipulation; -webkit-tap-highlight-color: transparent; transition: background var(--duration-base) var(--ease-out-soft), box-shadow var(--duration-base) var(--ease-out-soft), transform var(--duration-base) var(--ease-out-soft); } /* Halo chaud subtil — uniquement sur périphériques pointeur (souris). Sur tap, ce :hover restait collé pendant la navigation, perçu comme un délai. */ @media (hover: hover) { .maison-shelf:hover { background: radial-gradient(ellipse at center, rgba(255, 220, 160, 0.18) 0%, rgba(255, 220, 160, 0.06) 50%, transparent 80% ); box-shadow: 0 0 60px rgba(212, 175, 122, 0.28); transform: translateY(-1px); } } .maison-shelf:focus-visible { outline: var(--focus-ring); outline-offset: 4px; background: radial-gradient(ellipse at center, rgba(255, 220, 160, 0.18) 0%, rgba(255, 220, 160, 0.06) 50%, transparent 80% ); } /* Feedback tactile renforcé : le tap doit clairement "répondre" en moins de 100 ms (avant ce fix, scale 0.997 imperceptible + transition var(--duration-base) trop lente = sensation de clic ignoré). */ .maison-shelf:active { transform: scale(0.97); background: radial-gradient(ellipse at center, rgba(255, 220, 160, 0.28) 0%, rgba(255, 220, 160, 0.10) 50%, transparent 80% ); transition: transform 80ms var(--ease-out-soft), background 80ms var(--ease-out-soft); } /* ============================================================ 04b · SHELF CTA — texte UX laiton "→ Découvrir" Indication visuelle discrète au bas de chaque étagère pour signaler la cliquabilité (Cyril a constaté en test mobile que les visuels seuls étaient ambigus). - Couleur laiton (#D4AF7A) cohérent avec la plaque DUVEA et les vraies plaques imprimées dans la photo Imagen - Position bottom 6 % : sous les produits, sans chevaucher les libellés Couettes/Oreillers/Traversins déjà imprimés en haut de chaque étagère dans la photo - Stagger 1.5 / 1.7 / 1.9 s : esprit "lecture" descendante - pointer-events: none pour ne pas bloquer le clic sur le bouton - aria-hidden: le bouton porte déjà l'aria-label complet ============================================================ */ .maison-shelf__cta { position: absolute; left: 50%; bottom: 6%; transform: translate(-50%, 0); font-family: var(--font-body); font-weight: 600; font-size: clamp(12px, 0.95vw, 14px); letter-spacing: 0.12em; text-transform: uppercase; /* Audit iPhone 2026-04-30 bug majeur 3 : sur photo bitmap "armoire", le laiton clair sans fond se confondait avec les boiseries. On passe sur un fond pill semi-transparent + texte blanc cassé pour garantir un contraste lisible quel que soit le pixel sous-jacent. */ color: #FFF8E7; background: rgba(11, 37, 69, 0.55); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); padding: 8px 16px; border-radius: 999px; border: 0.5px solid rgba(212, 175, 122, 0.45); text-shadow: 0 1px 3px rgba(0, 0, 0, 0.65), 0 0 8px rgba(0, 0, 0, 0.40); box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25); white-space: nowrap; pointer-events: none; opacity: 0; animation: maison-shelf-cta-in 700ms var(--ease-out-soft) forwards; } .maison-shelf-zone--1 .maison-shelf__cta { animation-delay: 1500ms; } .maison-shelf-zone--2 .maison-shelf__cta { animation-delay: 1700ms; } .maison-shelf-zone--3 .maison-shelf__cta { animation-delay: 1900ms; } @keyframes maison-shelf-cta-in { from { opacity: 0; transform: translate(-50%, 4px); } to { opacity: 1; transform: translate(-50%, 0); } } @media (max-width: 767px) { .maison-shelf__cta { /* Mobile : taille bumpée à 16 px min (audit iPhone 2026-04-30 bug majeur 3) pour garantir la lisibilité sur 5G + petits écrans. Padding ajusté pour rester proportionnel au texte agrandi. */ font-size: clamp(14px, 3.6vw, 16px); padding: 10px 18px; letter-spacing: 0.12em; bottom: 8%; } } @media (prefers-reduced-motion: reduce) { .maison-shelf__cta { animation: none; opacity: 1; } } /* ============================================================ 05 · PLAQUES LAITON — × 3, sous chaque étagère. Recouvrent les plaques BLANK de l'image bitmap. Format horizontal (ratio ~2.75:1) pour accueillir le label "Couettes" / "Oreillers" / "Traversins" en Fraunces 700 bleu marine. Position : top commun à toutes (alignement horizontal pixel-perfect), left distinct par modifier --1/--2/--3. ============================================================ */ .maison-overlay { /* CALIBRÉ sur les plaques BLANK de l'image bitmap (1376×768). Plaques alignées top 62 %, width ~7 %, ratio horizontal ~3.6:1. Centres horizontaux des plaques mesurés sur l'image : • Plaque 1 (couettes) centrée sur 24 % → left 20.5 % • Plaque 2 (oreillers) centrée sur 50 % → left 46.5 % • Plaque 3 (traversins) centrée sur 76 % → left 72.5 % */ --plaque-top: 62%; --plaque-width: 7%; --plaque-1-left: 20.5%; --plaque-2-left: 46.5%; --plaque-3-left: 72.5%; } .maison-shelf-plaque { position: absolute; top: var(--plaque-top); width: var(--plaque-width); aspect-ratio: 100 / 28; /* horizontal large 3.57:1 — calibré sur les plaques laiton de l'image bitmap. */ z-index: 5; border-radius: 1.5px; /* Laiton brossé — verbatim style Porte d'entrée (.dev-plaque) : stries verticales très subtiles + bandes lumière/ombre + gradient #B8945F → #D4AF7A. */ background: repeating-linear-gradient(180deg, rgba(255, 245, 215, 0.06) 0, rgba(255, 245, 215, 0.06) 1px, transparent 1px, transparent 2px ), linear-gradient(180deg, rgba(255, 250, 230, 0.22) 0%, transparent 30%, transparent 70%, rgba(0, 0, 0, 0.10) 100% ), linear-gradient(135deg, #B8945F 0%, #D4AF7A 50%, #B8945F 100% ); /* Bord biseauté */ border-top: 0.5px solid rgba(255, 250, 230, 0.55); border-bottom: 0.5px solid rgba(0, 0, 0, 0.28); border-left: 0.5px solid rgba(255, 250, 230, 0.30); border-right: 0.5px solid rgba(0, 0, 0, 0.18); /* Reliefs intérieurs + ombre portée sur le bois de l'étagère */ box-shadow: inset 1px 1px 0 rgba(255, 250, 230, 0.45), inset -1px -1px 0 rgba(0, 0, 0, 0.18), 0 2px 4px rgba(58, 48, 36, 0.32), 0 1px 2px rgba(58, 48, 36, 0.20); } .maison-shelf-plaque--1 { left: var(--plaque-1-left); } .maison-shelf-plaque--2 { left: var(--plaque-2-left); } .maison-shelf-plaque--3 { left: var(--plaque-3-left); } /* Vis aux 4 coins (taille proportionnelle au format horizontal : plus petite que sur la plaque verticale Porte d'entrée) */ .maison-shelf-plaque__screw { position: absolute; width: 5%; aspect-ratio: 1; border-radius: 50%; background: radial-gradient(circle at 35% 35%, #8B6F47 0%, #6B5234 60%, #3A2E1A 100% ); box-shadow: inset 1px 1px 1px rgba(255, 245, 215, 0.30), inset -1px -1px 1px rgba(0, 0, 0, 0.40), 0 0.5px 0.5px rgba(0, 0, 0, 0.35); pointer-events: none; } .maison-shelf-plaque__screw { width: 4%; } .maison-shelf-plaque__screw--tl { top: 16%; left: 3%; } .maison-shelf-plaque__screw--tr { top: 16%; right: 3%; } .maison-shelf-plaque__screw--bl { bottom: 16%; left: 3%; } .maison-shelf-plaque__screw--br { bottom: 16%; right: 3%; } /* Label catégorie — Fraunces 700 bleu marine, capitales (cohérent avec le style "plaque cabinet d'avocat"), centré, ombré "imprimé sur laiton". Taille fluide : ajustée pour rentrer dans une plaque ~96×27 px sur desktop (1376 px) et plus large mais plus basse sur mobile. */ .maison-shelf-plaque__label { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-family: var(--font-section-title); font-weight: 700; font-size: clamp(7px, 0.7vw, 11px); letter-spacing: var(--tracking-wider); text-transform: uppercase; color: var(--bleu); text-shadow: 0 1px 0 rgba(255, 250, 230, 0.40); user-select: none; } @media (max-width: 767px) { .maison-shelf-plaque__label { font-size: clamp(8px, 1.6vw, 12px); } } /* ============================================================ 05b · OPTION B — LAYOUT VERTICAL MOBILE maison-mobile.webp est désormais une vraie photo Imagen 9:16 (768×1376) montrant un meuble bois noyer avec 3 étagères EMPILÉES VERTICALEMENT : Couettes (haut), Oreillers (milieu), Traversins (bas). Les plaques laiton avec labels sont déjà imprimées sur la photo. On override donc : 1. Les 3 .maison-shelf-zone : disposition verticale (top/height spécifiques par étagère, left/width communs centrés sur le meuble qui occupe ~50 % central de la largeur photo). 2. Les plaques laiton CSS : cachées (display: none) puisque la photo les contient déjà avec les bons labels. Évite toute redondance / désalignement avec les vraies plaques. Desktop et tablette ≥ 768 px : strictement inchangé. ============================================================ */ @media (max-width: 767px) { .maison-shelf-zone--1 { left: 25%; top: 14%; width: 50%; height: 16%; } .maison-shelf-zone--2 { left: 25%; top: 40%; width: 50%; height: 18%; } .maison-shelf-zone--3 { left: 25%; top: 65%; width: 50%; height: 18%; } .maison-shelf-plaque { display: none; } } /* ============================================================ 05b · FIX MOBILE — shelf-1 (couettes) passe sous le header Sur .page--maison mobile, top:14 % du shelf-1 plaçait le haut de la zone cliquable à y ≈ 114 px, sous le header sticky (z:100, bottom 140 px) → environ 20 % de l'aire tactile inaccessible. On descend la zone à top:20 % (y ≈ 162 px, dégagé), height raccourcie à 15 % pour préserver l'espace avant shelf-2 (top 40 %). shelf-2 et shelf-3 restent strictement inchangées. Spécificité (.page--maison .maison-shelf-zone--1 = 0,2,0) > override ci-dessus (.maison-shelf-zone--1 = 0,1,0) → pas de !important. ============================================================ */ @media (max-width: 767px) { .page--maison .maison-shelf-zone--1 { top: 20%; height: 15%; } } /* ============================================================ 06 · ANIMATION ZOOM CAMÉRA — 3 origines distinctes Au clic sur une étagère, scene-maison.js ajoute la classe .is-zooming-{N} sur la scène (N = 1, 2, 3). Le scale s'applique au .scene__camera, donc image bitmap + overlay zooment ensemble (plaques restent calées sur les plaques de l'image, étagères restent dans leur position relative). 3 origines : #1 (couettes) → 25 % horizontal (étagère gauche) #2 (oreillers) → 50 % horizontal (étagère centre) #3 (traversins) → 75 % horizontal (étagère droite) Tous à 45 % vertical (centre vertical des étagères, légèrement au-dessus du milieu vertical du frame). ============================================================ */ .scene--maison .scene__camera { /* Origine par défaut. Sera overridée par .is-zooming-{N} ci-dessous. */ transform-origin: 50% 45%; transition: transform 1500ms cubic-bezier(0.4, 0, 0.2, 1); } .scene--maison.is-zooming-1 .scene__camera { transform-origin: 25% 45%; } .scene--maison.is-zooming-2 .scene__camera { transform-origin: 50% 45%; } .scene--maison.is-zooming-3 .scene__camera { transform-origin: 75% 45%; } /* Scale identique pour les 3, seule l'origine change. */ .scene--maison.is-zooming-1 .scene__camera, .scene--maison.is-zooming-2 .scene__camera, .scene--maison.is-zooming-3 .scene__camera { transform: scale(4); } @media (max-width: 767px) { .scene--maison.is-zooming-1 .scene__camera, .scene--maison.is-zooming-2 .scene__camera, .scene--maison.is-zooming-3 .scene__camera { transform: scale(3); /* Mobile : scale 3× (perf + viewport étroit). */ } } /* ============================================================ 07 · VOILE DORÉ — full-screen, recouvre la fenêtre en fin de zoom. Identique Porte d'entrée : opacity 0 au repos, 1 au .is-zooming-{N}. Transition delay 0.4 s + duration 0.8 s = opaque à 1.2 s, soit 300 ms avant la navigation (setTimeout 1500 dans scene-maison.js). ============================================================ */ .maison-fade-overlay { position: fixed; inset: 0; z-index: var(--z-overlay); opacity: 0; pointer-events: none; background: radial-gradient(circle at 50% 50%, rgba(200, 153, 104, 1.00) 0%, rgba(170, 130, 85, 0.98) 50%, rgba(130, 95, 55, 0.95) 100% ); transition: opacity 800ms cubic-bezier(0.4, 0, 0.2, 1) 400ms; } .scene--maison.is-zooming-1 .maison-fade-overlay, .scene--maison.is-zooming-2 .maison-fade-overlay, .scene--maison.is-zooming-3 .maison-fade-overlay { opacity: 1; } /* ============================================================ 08 · HEADER STICKY — état initial caché. Apparition à t=1.5s gérée par scene-maison.js (sauf reduced-motion). Sur les stubs catégorie, la classe .is-visible est posée en dur dans le HTML → header visible en permanence. ============================================================ */ .maison-nav { position: fixed; top: 0; left: 0; right: 0; z-index: var(--z-sticky); height: 72px; display: flex; align-items: center; justify-content: space-between; gap: var(--space-5); padding-inline: clamp(var(--space-5), 5vw, var(--space-8)); background: rgba(255, 252, 247, 0.92); backdrop-filter: saturate(180%) blur(10px); -webkit-backdrop-filter: saturate(180%) blur(10px); border-bottom: 1px solid rgba(214, 206, 194, 0.5); transform: translateY(-100%); opacity: 0; transition: transform 800ms var(--ease-out-soft), opacity 800ms var(--ease-out-soft); will-change: transform, opacity; } .maison-nav.is-visible { transform: translateY(0); opacity: 1; } /* Logo en taille header (~32 px de hauteur). */ .logo--nav .logo-n { font-size: 22px; } .logo--nav .logo-flag svg { width: 22px; } .logo--nav .logo-mif { font-size: 6.5px; letter-spacing: 0.2em; opacity: 0.7; } .maison-nav__menu { display: flex; align-items: center; gap: clamp(var(--space-5), 3vw, var(--space-7)); } .maison-nav__link { position: relative; font-family: var(--font-body); font-weight: 500; font-size: 13px; letter-spacing: var(--tracking-wider); text-transform: uppercase; color: var(--noir); text-decoration: none; padding-block: var(--space-3); transition: color 200ms var(--ease-out-soft); } .maison-nav__link:hover, .maison-nav__link:focus-visible { color: var(--bleu); } /* Item actif — filet ocre 1 px sous le mot (esprit cabinet d'avocat). */ .maison-nav__link[aria-current='page']::after { content: ''; position: absolute; left: 0; right: 0; bottom: calc(var(--space-3) - 4px); height: 1px; background: var(--ocre); } .maison-nav__cart { position: relative; width: 44px; height: 44px; display: grid; place-items: center; background: transparent; border: 1px solid transparent; border-radius: var(--radius-pill); color: var(--noir); cursor: pointer; transition: background 200ms var(--ease-out-soft), border-color 200ms var(--ease-out-soft); } .maison-nav__cart:hover, .maison-nav__cart:focus-visible { background: var(--creme); border-color: var(--gris-cl); outline: none; } .maison-nav__cart-count { position: absolute; top: 4px; right: 4px; min-width: 16px; height: 16px; padding: 0 4px; display: grid; place-items: center; background: var(--bleu); color: var(--creme); font-family: var(--font-body); font-weight: 600; font-size: 10px; border-radius: var(--radius-pill); font-variant-numeric: tabular-nums; } .maison-nav__cart-count[data-count='0'] { display: none; } @media (max-width: 900px) { .maison-nav { height: 60px; padding-inline: var(--space-5); } /* Sur mobile/tablette, on cache le menu textuel et on garde juste logo + icône panier. La nav catégories sera accessible via un drawer en Phase 3. */ .maison-nav__menu { display: none; } .logo--nav .logo-n { font-size: 18px; } .logo--nav .logo-flag svg { width: 18px; } .logo--nav .logo-mif { font-size: 6px; } } /* ============================================================ 09 · APPARITION INITIALE — fade CSS pur sur photo + overlay. La classe .is-loading (présente au load) maintient opacity:0, scene-maison.js la retire au boot. Identique Porte d'entrée. ============================================================ */ .maison-photo, .maison-overlay { transition: opacity 800ms var(--ease-out-soft); } .scene--maison.is-loading .maison-photo, .scene--maison.is-loading .maison-overlay { opacity: 0; } /* ============================================================ 09b · BOUTON RETOUR PORTE D'ENTRÉE — override .scene-back local Le composant .scene-back est défini dans scenes.css (top-left de la scène, pill arrondi avec backdrop blur). Ici on relève son z-index au-dessus du header sticky pour qu'il reste visible quand le header apparaît à 1.5 s. Visible dès le boot (n'attend pas le fade scène). ============================================================ */ /* Bouton retour MAGASIN — composant autonome (n'hérite plus de .scene-back de scenes.css pour éviter les conflits de pseudo- éléments et de styles). HTML explicite : et . */ .maison-back { position: fixed; /* Décalé clairement sous le header sticky (72 px desktop) + 24 px de respiration. Pas de chevauchement possible. */ top: 96px; left: 24px; z-index: var(--z-sticky); /* 100, sous le header (au cas où le header passerait dessus) — évite le chevauchement visuel quand z-modal perçait à travers le header. */ display: inline-flex; align-items: center; gap: 8px; padding: 10px 20px 10px 14px; background: var(--blanc); border: 1px solid var(--ocre); border-radius: 999px; box-shadow: 0 4px 12px rgba(58, 48, 36, 0.14), 0 1px 3px rgba(58, 48, 36, 0.08); /* Manrope 600 — police preloaded + font-weight existant dans @font-face. */ font-family: var(--font-body); font-weight: 600; font-size: 13px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--bleu); text-decoration: none; white-space: nowrap; transition: background 200ms var(--ease-out-soft), border-color 200ms var(--ease-out-soft), transform 200ms var(--ease-out-soft); } .maison-back__arrow { display: inline-block; flex-shrink: 0; color: var(--bleu); transition: transform 200ms var(--ease-out-soft); } .maison-back__label { display: inline-block; line-height: 1; color: var(--bleu); } .maison-back:hover, .maison-back:focus-visible { background: var(--creme); border-color: var(--ocre); outline: none; } .maison-back:hover .maison-back__arrow { transform: translateX(-3px); } @media (max-width: 900px) { .maison-back { /* Header passe à 60 px en mobile + 24 px de respiration */ top: 84px; left: 16px; padding: 10px 18px 10px 14px; font-size: 13px; letter-spacing: 0.14em; } .maison-back__arrow { font-size: 16px; } } /* ============================================================ 09b · FIX MOBILE — bouton « Porte d'entrée » sur la page showroom Sur maison.html, le top:164px hérité de la Vague 2.0 (components.css §13) tombe DANS la zone cliquable de l'étagère couettes (top 14 % / height 16 % du stage). On repositionne le bouton en bas-gauche, scopé à .page--maison + ≤767 px pour ne PAS affecter panier / fiches / rayons. !important nécessaire pour battre le top:164px !important de components.css. ============================================================ */ @media (max-width: 767px) { .page--maison .maison-back { top: auto !important; bottom: 16px; } } /* ============================================================ 10 · SKIP LINK — accessibilité clavier ============================================================ */ .skip-link { position: absolute; top: -100px; left: var(--space-4); padding: var(--space-2) var(--space-4); background: var(--color-primary); color: var(--color-text-on-dark); font-family: var(--font-ui); font-weight: 500; font-size: var(--fs-sm); letter-spacing: var(--tracking-wider); text-transform: uppercase; text-decoration: none; border-radius: var(--radius-sm); z-index: var(--z-toast); transition: top var(--duration-fast) var(--ease-out-soft); } .skip-link:focus { top: var(--space-4); } /* ============================================================ 11 · REDUCED-MOTION — strict - Pas de zoom cinématique : le JS fait fade body 250 ms + nav - Pas de transition header sticky : visible immédiatement - Pas de transition fade .is-loading : photo/overlay visibles direct ============================================================ */ @media (prefers-reduced-motion: reduce) { /* Voile doré entrant : pas d'animation, on cache directement. */ .page--maison.is-entering::before { animation: none; display: none; } .scene--maison .scene__camera, .maison-fade-overlay { transition: none; } .scene--maison.is-zooming-1 .scene__camera, .scene--maison.is-zooming-2 .scene__camera, .scene--maison.is-zooming-3 .scene__camera { transform: none; } .maison-nav { transition: none; } .maison-photo, .maison-overlay { transition: none; } .scene--maison.is-loading .maison-photo, .scene--maison.is-loading .maison-overlay { opacity: 1 !important; } .maison-shelf { transition: none; } }