/* ========================================================================== Bobochic Paris — Home PhotoMaton (hero + photomaton) Intégration PrestaShop 1.6 · design system Meridian Tous les styles sont cloisonnés sous #bbPhotomaton : aucun impact sur le thème. ========================================================================== */ /* Police Hanken Grotesk : déjà chargée par le thème Bobochic (pas de @font-face ici) */ /* ── Remise à zéro locale : neutralise les styles du thème (Bootstrap 3, etc.) dans le bloc ── */ #bbPhotomaton :where(*:not(svg, svg *)) { all: revert; } #bbPhotomaton, #bbPhotomaton *, #bbPhotomaton *::before, #bbPhotomaton *::after { box-sizing: border-box; } #bbPhotomaton { display: block; position: relative; overflow-x: clip; text-align: left; -webkit-font-smoothing: antialiased; } #bbPhotomaton img { display: block; } #bbPhotomaton a { text-decoration: none; } #bbPhotomaton .btn { text-shadow: none; background-image: none; white-space: nowrap; user-select: none; } #bbPhotomaton .btn:active, #bbPhotomaton .btn.active { box-shadow: none; } #bbPhotomaton [hidden] { display: none !important; } #bbPhotomaton template { display: none; } /* ── Pleine largeur, même si le bloc est placé dans un .container du thème ── */ #bbPhotomaton.bb-pm--bleed { width: calc(100vw - var(--bbpm-sbw, 0px)); margin-left: calc(50% - (100vw - var(--bbpm-sbw, 0px)) / 2); max-width: none; } #bbPhotomaton { --color-neutral-0: #ffffff; --color-neutral-50: #f9f9f9; --color-neutral-100: #f2f2f2; --color-neutral-150: #e6e6e6; --color-neutral-200: #d9d9d9; --color-neutral-250: #cccccc; --color-neutral-300: #bfbfbf; --color-neutral-350: #b3b3b3; --color-neutral-400: #a6a6a6; --color-neutral-450: #8c8c8c; --color-neutral-500: #808080; --color-neutral-550: #737373; --color-neutral-600: #666666; --color-neutral-650: #595959; --color-neutral-700: #4d4d4d; --color-neutral-750: #404040; --color-neutral-800: #333333; --color-neutral-850: #262626; --color-neutral-900: #1a1a1a; --color-neutral-950: #0b0b0c; --color-neutral-1000: #000000; --color-red-100: #fef2f2; --color-red-200: #fde1e1; --color-red-300: #fbbebe; --color-red-400: #f99393; --color-red-500: #f75556; --color-red-600: #e80206; --color-red-700: #c90205; --color-red-800: #a40104; --color-red-900: #740103; --color-green-100: #f2fef2; --color-green-200: #e1fde1; --color-green-300: #bffbbe; --color-green-400: #95f893; --color-green-500: #58f655; --color-green-600: #17e702; --color-green-700: #14c802; --color-green-800: #10a301; --color-green-900: #0b7301; --color-orange-100: #fef6f2; --color-orange-200: #fdebe1; --color-orange-300: #fbd4be; --color-orange-400: #f8bb93; --color-orange-500: #f69e55; --color-orange-600: #e78502; --color-orange-700: #c87302; --color-orange-800: #a35e01; --color-orange-900: #734201; --color-yellow-100: #fefbf2; --color-yellow-200: #fdf6e1; --color-yellow-300: #fbecbe; --color-yellow-400: #f8e293; --color-yellow-500: #f6d855; --color-yellow-600: #e7c602; --color-yellow-700: #c8ab02; --color-yellow-800: #a38c01; --color-yellow-900: #736301; --size-0: 0; --size-1: 2px; --size-2: 4px; --size-3: 8px; --size-4: 16px; --size-5: 24px; --size-6: 32px; --size-7: 40px; --size-8: 48px; --size-9: 56px; --size-10: 64px; --size-11: 80px; --size-12: 96px; --size-13: 120px; --size-14: 144px; --size-15: 200px; --size-16: 256px; --device-mobile-width: 393px; --device-mobile-height: 852px; --device-tablet-width: 834px; --device-tablet-height: 1194px; --device-desktop-width: 1536px; --device-desktop-height: 864px; --color-surface-0: var(--color-neutral-0); --color-surface-1: var(--color-neutral-50); --color-surface-2: var(--color-neutral-100); --color-surface-3: var(--color-neutral-150); --color-surface-4: var(--color-neutral-200); --color-surface-5: var(--color-neutral-350); --color-surface-6: var(--color-neutral-550); --color-surface-7: var(--color-neutral-800); --color-surface-8: var(--color-neutral-850); --color-surface-9: var(--color-neutral-900); --color-surface-10: var(--color-neutral-950); --color-background-neutral-0: var(--color-neutral-0); --color-background-neutral-1: var(--color-neutral-50); --color-background-neutral-2: var(--color-neutral-100); --color-background-neutral-3: var(--color-neutral-150); --color-background-neutral-4: var(--color-neutral-200); --color-background-neutral-5: var(--color-neutral-350); --color-background-neutral-6: var(--color-neutral-550); --color-background-neutral-7: var(--color-neutral-800); --color-background-neutral-8: var(--color-neutral-850); --color-background-neutral-9: var(--color-neutral-900); --color-background-neutral-10: var(--color-neutral-950); --color-background-red-light: var(--color-red-200); --color-background-red-dark: var(--color-red-800); --color-background-green-light: var(--color-green-200); --color-background-green-dark: var(--color-green-900); --color-background-orange-light: var(--color-orange-200); --color-background-orange-dark: var(--color-orange-700); --color-background-yellow-light: var(--color-yellow-200); --color-background-yellow-dark: var(--color-yellow-600); --color-border-neutral-0: var(--color-neutral-0); --color-border-neutral-1: var(--color-neutral-50); --color-border-neutral-2: var(--color-neutral-100); --color-border-neutral-3: var(--color-neutral-150); --color-border-neutral-4: var(--color-neutral-200); --color-border-neutral-5: var(--color-neutral-350); --color-border-neutral-6: var(--color-neutral-550); --color-border-neutral-7: var(--color-neutral-800); --color-border-neutral-8: var(--color-neutral-850); --color-border-neutral-9: var(--color-neutral-900); --color-border-neutral-10: var(--color-neutral-950); --color-border-red-light: var(--color-red-200); --color-border-red-dark: var(--color-red-800); --color-border-green-light: var(--color-green-200); --color-border-green-dark: var(--color-green-900); --color-border-orange-light: var(--color-orange-200); --color-border-orange-dark: var(--color-orange-700); --color-border-yellow-light: var(--color-yellow-200); --color-border-yellow-dark: var(--color-yellow-600); --color-foreground-neutral-0: var(--color-neutral-0); --color-foreground-neutral-1: var(--color-neutral-50); --color-foreground-neutral-2: var(--color-neutral-100); --color-foreground-neutral-3: var(--color-neutral-150); --color-foreground-neutral-4: var(--color-neutral-200); --color-foreground-neutral-5: var(--color-neutral-350); --color-foreground-neutral-6: var(--color-neutral-550); --color-foreground-neutral-7: var(--color-neutral-800); --color-foreground-neutral-8: var(--color-neutral-850); --color-foreground-neutral-9: var(--color-neutral-900); --color-foreground-neutral-10: var(--color-neutral-950); --color-foreground-red-light: var(--color-red-200); --color-foreground-red-dark: var(--color-red-800); --color-foreground-green-light: var(--color-green-200); --color-foreground-green-dark: var(--color-green-900); --color-foreground-orange-light: var(--color-orange-200); --color-foreground-orange-dark: var(--color-orange-700); --color-foreground-yellow-light: var(--color-yellow-200); --color-foreground-yellow-dark: var(--color-yellow-600); --spacing-margin-mobile-sm: var(--size-3); --spacing-margin-mobile-md: var(--size-4); --spacing-margin-mobile-lg: var(--size-5); --spacing-margin-tablet-sm: var(--size-7); --spacing-margin-tablet-md: var(--size-10); --spacing-margin-tablet-lg: var(--size-13); --spacing-margin-desktop-sm: var(--size-10); --spacing-margin-desktop-md: var(--size-14); --spacing-margin-desktop-lg: var(--size-16); --spacing-gap-none: var(--size-0); --spacing-gap-xs: var(--size-1); --spacing-gap-sm: var(--size-2); --spacing-gap-md: var(--size-3); --spacing-gap-lg: var(--size-4); --spacing-gap-xl: var(--size-5); --spacing-gap-2xl: var(--size-6); --spacing-gap-3xl: var(--size-7); --spacing-gap-4xl: var(--size-8); --spacing-gap-5xl: var(--size-9); --spacing-gap-6xl: var(--size-10); --spacing-height-none: var(--size-0); --spacing-height-xs: var(--size-1); --spacing-height-sm: var(--size-2); --spacing-height-md: var(--size-3); --spacing-height-lg: var(--size-4); --spacing-height-xl: var(--size-5); --spacing-height-2xl: var(--size-6); --spacing-height-3xl: var(--size-7); --spacing-height-4xl: var(--size-9); --spacing-height-5xl: var(--size-10); --spacing-width-none: var(--size-0); --spacing-width-xs: var(--size-1); --spacing-width-sm: var(--size-2); --spacing-width-md: var(--size-3); --spacing-width-lg: var(--size-4); --spacing-width-xl: var(--size-5); --spacing-width-2xl: var(--size-6); --spacing-width-3xl: var(--size-7); --spacing-width-4xl: var(--size-10); --spacing-width-5xl: var(--size-11); --radius-none: var(--size-0); --radius-sm: var(--size-2); --radius-md: var(--size-3); --radius-lg: var(--size-4); --radius-xl: var(--size-6); --radius-full: var(--size-16); --radius-badge: var(--size-0); --radius-button: var(--size-0); --line-stroke-base: 1px; --line-stroke-bold: 2px; --elevation-sm: 0px 0px 25px rgba(12, 12, 13, 0.05); --elevation-md: 0px 0px 25px rgba(12, 12, 13, 0.10); --elevation-lg: 0px 0px 25px rgba(12, 12, 13, 0.15); --font-family-text: "Hanken Grotesk", sans-serif; --font-family-heading: "Hanken Grotesk", sans-serif; --font-family-display: "Hanken Grotesk", sans-serif; --font-family-subtitle: "Hanken Grotesk", sans-serif; --font-family-utility: "Hanken Grotesk", sans-serif; --font-family-product: "Hanken Grotesk", sans-serif; --font-family-code: "Hanken Grotesk", sans-serif; --font-weight-base: 400; --font-weight-medium: 600; --font-weight-strong: 700; --font-weight-stronger: 800; --font-weight-strongest: 900; --font-size-xs: 10px; --font-size-sm: 12px; --font-size-md: 14px; --font-size-lg: 18px; --font-size-xl: 25px; --font-size-2xl: 31px; --font-size-3xl: 39px; --font-size-4xl: 49px; --font-size-5xl: 61px; --font-size-6xl: 76px; --font-size-7xl: 95px; --font-size-8xl: 119px; --line-height-xs: 12px; --line-height-flag: 14px; --line-height-sm: 16px; --line-height-md: 20px; --line-height-lg: 24px; --line-height-xl: 28px; --line-height-2xl: 35px; --line-height-3xl: 48px; --line-height-4xl: 64px; --line-height-5xl: 76px; --line-height-6xl: 100px; --line-height-7xl: 125px; --line-height-8xl: 150px; --letter-spacing-default: -0.16px; --letter-spacing-caps: 0.48px; --letter-spacing-display: -1.5px; } #bbPhotomaton .display-xl-strong { font-family: var(--font-family-display); font-weight: var(--font-weight-stronger); font-size: var(--font-size-7xl); line-height: var(--line-height-7xl); letter-spacing: var(--letter-spacing-display); } #bbPhotomaton .display-sm { font-family: var(--font-family-display); font-weight: var(--font-weight-base); font-size: var(--font-size-4xl); line-height: var(--line-height-4xl); letter-spacing: var(--letter-spacing-display); } #bbPhotomaton .heading-title-lg { font-family: var(--font-family-heading); font-weight: var(--font-weight-strong); font-size: var(--font-size-2xl); line-height: var(--line-height-2xl); letter-spacing: var(--letter-spacing-default); } #bbPhotomaton .heading-title-md { font-family: var(--font-family-heading); font-weight: var(--font-weight-medium); font-size: var(--font-size-xl); line-height: var(--line-height-xl); letter-spacing: var(--letter-spacing-default); } #bbPhotomaton .text-lg-regular { font-family: var(--font-family-text); font-weight: var(--font-weight-base); font-size: var(--font-size-lg); line-height: var(--line-height-lg); letter-spacing: var(--letter-spacing-default); } #bbPhotomaton .text-md-regular { font-family: var(--font-family-text); font-weight: var(--font-weight-base); font-size: var(--font-size-md); line-height: var(--line-height-md); letter-spacing: var(--letter-spacing-default); } #bbPhotomaton .text-md-strong { font-family: var(--font-family-text); font-weight: var(--font-weight-strong); font-size: var(--font-size-md); line-height: var(--line-height-md); letter-spacing: var(--letter-spacing-default); } #bbPhotomaton .text-sm-regular { font-family: var(--font-family-text); font-weight: var(--font-weight-base); font-size: var(--font-size-sm); line-height: var(--line-height-sm); letter-spacing: var(--letter-spacing-default); } #bbPhotomaton .text-sm-strong { font-family: var(--font-family-text); font-weight: var(--font-weight-strong); font-size: var(--font-size-sm); line-height: var(--line-height-sm); letter-spacing: var(--letter-spacing-default); } #bbPhotomaton .utility-label { font-family: var(--font-family-utility); font-weight: var(--font-weight-medium); font-size: var(--font-size-sm); line-height: var(--line-height-sm); letter-spacing: var(--letter-spacing-default); } #bbPhotomaton .utility-helpertext { font-family: var(--font-family-utility); font-weight: var(--font-weight-base); font-size: var(--font-size-sm); line-height: var(--line-height-sm); letter-spacing: var(--letter-spacing-default); } #bbPhotomaton { font-family: var(--font-family-text); font-weight: var(--font-weight-base); font-size: var(--font-size-md); line-height: var(--line-height-md); letter-spacing: var(--letter-spacing-default); color: var(--color-foreground-neutral-10) } #bbPhotomaton.mm-mobile .page { width: 393px; } #bbPhotomaton .hdr-sticky { position: sticky; top: 0; z-index: 300; } #bbPhotomaton .hdr-sticky { transition: none; } #bbPhotomaton .hero { position: relative; height: 100vh; min-height: 680px; overflow: hidden; color: var(--color-foreground-neutral-10); } #bbPhotomaton .hero__media { position: absolute; inset: 0; background: var(--color-neutral-800); } #bbPhotomaton .hero__video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; } #bbPhotomaton .hero__scrim { position: absolute; inset: 0; background: radial-gradient(80% 70% at 22% 38%, rgba(11,11,12,0.45), transparent 70%), linear-gradient(90deg, rgba(11,11,12,0.55) 0%, rgba(11,11,12,0.2) 42%, transparent 70%); } #bbPhotomaton .hero__inner { position: relative; height: 100%; display: flex; align-items: center; padding: 0 64px; } #bbPhotomaton .hero__copy { max-width: 600px; } #bbPhotomaton .hero__copy h1 { margin: 0; color: var(--color-foreground-neutral-10); text-wrap: balance; } #bbPhotomaton .hero__lead { margin: var(--spacing-gap-lg) 0 0; max-width: 460px; color: var(--color-foreground-neutral-9); } #bbPhotomaton .hero__cta { margin-top: var(--spacing-gap-2xl); display: flex; gap: var(--spacing-gap-md); } #bbPhotomaton .hero__cta .btn { width: auto; } #bbPhotomaton .hero--dark { color: var(--color-foreground-neutral-0); } #bbPhotomaton .hero--dark .hero__copy h1 { color: var(--color-foreground-neutral-0); } #bbPhotomaton .hero--dark .hero__lead { color: rgba(255,255,255,0.86); } #bbPhotomaton .hero--dark .btn.primary { background: var(--color-neutral-0); color: var(--color-foreground-neutral-10); } #bbPhotomaton .hero--dark .btn.primary:hover { background: var(--color-neutral-150); } #bbPhotomaton .hero--dark .btn.outline { background: transparent; color: var(--color-foreground-neutral-0); border-color: var(--color-foreground-neutral-5); } #bbPhotomaton .hero--dark .btn.outline:hover { border-color: var(--color-neutral-0); } #bbPhotomaton .body { padding: 14px 16px 16px; } #bbPhotomaton .btn { font-family: var(--font-family-utility); font-weight: var(--font-weight-medium); font-size: var(--font-size-md); line-height: var(--line-height-md); letter-spacing: var(--letter-spacing-default); border-radius: var(--radius-button); height: 40px; padding: 0 16px; border: 1px solid transparent; display: inline-flex; align-items: center; gap: 10px; cursor: pointer; box-sizing: border-box; white-space: nowrap; justify-content: center; } #bbPhotomaton .btn .arr { width: 24px; height: 24px; flex-shrink: 0; } #bbPhotomaton .btn.icon-only { width: 40px; padding: 0; gap: 0; } #bbPhotomaton .btn.icon-only .arr { width: 20px; height: 20px; } #bbPhotomaton .primary { background: var(--color-background-neutral-10); color: var(--color-foreground-neutral-0); } #bbPhotomaton .primary:hover { background: var(--color-background-neutral-7); color: var(--color-foreground-neutral-0); } #bbPhotomaton .primary:focus { background: var(--color-neutral-700); color: var(--color-foreground-neutral-0); } #bbPhotomaton .primary:disabled { background: var(--color-background-neutral-4); color: var(--color-foreground-neutral-5); cursor: not-allowed; } #bbPhotomaton .btn.white { background: var(--color-background-neutral-0); color: var(--color-foreground-neutral-10); border-color: transparent; } #bbPhotomaton .btn.white:hover { background: var(--color-background-neutral-2); color: var(--color-foreground-neutral-10); } #bbPhotomaton .btn.white:focus { background: var(--color-background-neutral-3); color: var(--color-foreground-neutral-10); } #bbPhotomaton .btn.white:disabled { background: transparent; color: var(--color-foreground-neutral-5); cursor: not-allowed; } #bbPhotomaton .outline { background: transparent; color: var(--color-foreground-neutral-10); border-color: var(--color-border-neutral-5); } #bbPhotomaton .outline:hover { background: transparent; color: var(--color-foreground-neutral-10); border-color: var(--color-border-neutral-7); } #bbPhotomaton .outline:focus { background: transparent; color: var(--color-foreground-neutral-10); border-color: var(--color-border-neutral-10); } #bbPhotomaton .outline:disabled { background: transparent; color: var(--color-foreground-neutral-4); border-color: var(--color-border-neutral-4); cursor: not-allowed; } #bbPhotomaton .btn.ghost { background: transparent; color: var(--color-foreground-neutral-10); border-color: transparent; padding: 0; height: auto; width: auto; gap: 8px; } #bbPhotomaton .btn.ghost:hover { color: var(--color-foreground-neutral-10); text-decoration: underline; text-underline-offset: 3px; } #bbPhotomaton .btn.ghost:focus { color: var(--color-foreground-neutral-7); text-decoration: underline; text-underline-offset: 3px; } #bbPhotomaton .btn.ghost:disabled { background: transparent; color: var(--color-foreground-neutral-4); cursor: not-allowed; } #bbPhotomaton.mm-mobile .page { width: 393px; } #bbPhotomaton.mm-mobile { --bhm-h: 132px; } #bbPhotomaton.mm-mobile .hero { height: auto; min-height: 0; } #bbPhotomaton.mm-mobile .hero__inner { padding: 0 var(--spacing-margin-mobile-md); min-height: 560px; height: auto; align-items: center; justify-content: center; text-align: center; } #bbPhotomaton.mm-mobile .hero__copy { max-width: 100%; margin: 0 auto; } #bbPhotomaton.mm-mobile .hero__lead { max-width: 100%; margin-left: auto; margin-right: auto; } #bbPhotomaton.mm-mobile .hero__cta { justify-content: center; } #bbPhotomaton.mm-mobile .hero__copy h1.display-sm { font-size: var(--font-size-2xl); line-height: var(--line-height-2xl); } #bbPhotomaton:not(.mm-mobile) { height: auto; } #bbPhotomaton:not(.mm-mobile) { overflow: visible; display: block; } #bbPhotomaton:not(.mm-mobile) .hero { height: min(100vh, 900px); } #bbPhotomaton .pm { position:relative;container-type:inline-size;container-name:pm;background:var(--color-surface-1);color:var(--color-foreground-neutral-10);font-family:var(--font-family-text);padding:var(--spacing-height-5xl) var(--spacing-margin-desktop-sm);overflow:clip;scroll-margin-top:96px } #bbPhotomaton .pm *, #bbPhotomaton .pm *::before, #bbPhotomaton .pm *::after { box-sizing:border-box } #bbPhotomaton .pm h1, #bbPhotomaton .pm h2, #bbPhotomaton .pm h3, #bbPhotomaton .pm p, #bbPhotomaton .pm ol, #bbPhotomaton .pm ul { margin:0 } #bbPhotomaton .pm__in { max-width:1408px;margin:0 auto;display:flex;flex-direction:column;gap:var(--spacing-gap-3xl) } #bbPhotomaton .pm-muted { color:var(--color-foreground-neutral-7) } #bbPhotomaton .pm-enter { animation:pmIn .5s cubic-bezier(.2,.8,.2,1) both } @keyframes pmIn {from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}} #bbPhotomaton .pm .btn { width:auto } #bbPhotomaton .pm .btn.pm-wide { width:100% } #bbPhotomaton .pm .btn:disabled { cursor:not-allowed;opacity:1 } #bbPhotomaton .pm .btn.primary:disabled { background:var(--color-background-neutral-2);color:var(--color-foreground-neutral-4) } #bbPhotomaton .pm .btn.outline:disabled { color:var(--color-foreground-neutral-4);border-color:var(--color-border-neutral-4) } #bbPhotomaton .pm .btn:focus-visible, #bbPhotomaton .pm-thumb:focus-visible, #bbPhotomaton .pm-seg:focus-visible, #bbPhotomaton .pm-net:focus-visible { outline:var(--line-stroke-bold) solid var(--color-border-neutral-10);outline-offset:var(--spacing-gap-xs) } #bbPhotomaton .pm .arr { width:24px;height:24px;flex-shrink:0;display:block } #bbPhotomaton .pm-launch { display:grid;grid-template-columns:minmax(0,1fr) minmax(0,2fr);gap:var(--spacing-gap-4xl);align-items:end } #bbPhotomaton .pm-launch__txt { display:flex;flex-direction:column;gap:var(--spacing-gap-xl);padding-bottom:var(--spacing-height-lg) } #bbPhotomaton .pm-launch__cta { display:flex;flex-wrap:wrap;gap:var(--spacing-gap-lg) } #bbPhotomaton .pm-facade { display:block;cursor:pointer;position:relative;aspect-ratio:1672 / 941;overflow:hidden;background:var(--color-background-neutral-2) } #bbPhotomaton .pm-facade__img { position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;transition:transform 1.4s cubic-bezier(.2,.8,.2,1) } #bbPhotomaton .pm-facade:hover .pm-facade__img { transform:scale(1.02) } #bbPhotomaton .pm-bar { display:flex;align-items:center;justify-content:space-between;gap:var(--spacing-gap-lg);flex-wrap:wrap;padding-bottom:var(--spacing-height-lg);border-bottom:var(--line-stroke-base) solid var(--color-border-neutral-3) } #bbPhotomaton .pm-steps { display:flex;flex-wrap:wrap;gap:var(--spacing-gap-xl);list-style:none;padding:0 } #bbPhotomaton .pm-step { display:flex;align-items:center;gap:var(--spacing-gap-md);color:var(--color-foreground-neutral-5) } #bbPhotomaton .pm-step.is-done { color:var(--color-foreground-neutral-10) } #bbPhotomaton .pm-step.is-active { color:var(--color-foreground-neutral-10) } #bbPhotomaton .pm-booth { display:grid;grid-template-columns:minmax(0,1fr) 360px;gap:var(--spacing-gap-4xl);align-items:start } #bbPhotomaton .pm-screen { border:var(--line-stroke-bold) solid var(--color-border-neutral-10);padding:var(--spacing-height-lg) var(--spacing-width-lg);background:var(--color-surface-0) } #bbPhotomaton .pm-screen__in { position:relative;display:flex;align-items:center;justify-content:center;gap:var(--spacing-gap-2xl);min-height:600px;padding:var(--spacing-height-2xl) var(--spacing-width-2xl);border:var(--line-stroke-bold) solid var(--color-border-neutral-10);background:var(--color-background-neutral-1);overflow:hidden } #bbPhotomaton .pm-screen__in--cam { min-height:0;aspect-ratio:4 / 3;padding:0;background:var(--color-background-neutral-10) } #bbPhotomaton .pm-screen__in--prep { flex-direction:column } #bbPhotomaton .pm-screen__in--prep .btn { min-width:280px } #bbPhotomaton .pm-panel { display:flex;flex-direction:column;gap:var(--spacing-gap-xl) } #bbPhotomaton .pm-panel__head { display:flex;flex-direction:column;gap:var(--spacing-gap-md) } #bbPhotomaton .pm-panel__actions { display:flex;flex-direction:column;gap:var(--spacing-gap-md) } #bbPhotomaton .pm-strip { container-type:inline-size;width:100%;box-shadow:var(--elevation-md) } #bbPhotomaton .pm-strip__body { display:flex;flex-direction:column;gap:2.667cqw;padding:4cqw 4cqw 0 } #bbPhotomaton .pm-slot { position:relative;aspect-ratio:4 / 3;overflow:hidden;background:var(--color-background-neutral-3) } #bbPhotomaton .pm-slot img { position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block } #bbPhotomaton .pm-strip__foot { height:50cqw;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4cqw;padding:0 4cqw } #bbPhotomaton .pm-strip__rue { display:block;width:100%;height:26.667cqw;object-fit:cover;margin-top:2.667cqw } #bbPhotomaton .pm-strip__logo { display:block;width:40cqw;height:auto } #bbPhotomaton .pm-f--noir { background:var(--color-background-neutral-10);color:var(--color-foreground-neutral-0) } #bbPhotomaton .pm-f--noir .pm-slot { background:var(--color-background-neutral-8) } #bbPhotomaton .pm-f--ivoire { background:var(--color-surface-1);color:var(--color-foreground-neutral-10);outline:var(--line-stroke-base) solid var(--color-border-neutral-3);outline-offset:-6px } #bbPhotomaton .pm-mono .pm-slot img, #bbPhotomaton .pm-mono .pm-video { filter:grayscale(1) } #bbPhotomaton .pm-preview { width:180px;flex-shrink:0;animation:pmIn .35s cubic-bezier(.2,.8,.2,1) both } #bbPhotomaton .pm-thumbs { display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--spacing-gap-md) } #bbPhotomaton .pm-thumb { display:flex;flex-direction:column;gap:var(--spacing-gap-sm);align-items:stretch;padding:var(--spacing-height-xs) var(--spacing-width-xs);border:var(--line-stroke-bold) solid transparent;background:transparent;cursor:pointer;font-family:inherit;color:var(--color-foreground-neutral-7);transition:border-color .2s ease,color .2s ease } #bbPhotomaton .pm-thumb:hover { border-color:var(--color-border-neutral-4);color:var(--color-foreground-neutral-10) } #bbPhotomaton .pm-thumb.is-selected { border-color:var(--color-border-neutral-10);color:var(--color-foreground-neutral-10) } #bbPhotomaton .pm-thumb .pm-strip { display:block;box-shadow:var(--elevation-sm) } #bbPhotomaton .pm-thumb__name { text-align:center;white-space:normal } #bbPhotomaton .pm-seg-wrap { display:inline-flex;flex:0 1 auto;gap:4px;padding:4px;background:var(--color-background-neutral-1);border:var(--line-stroke-base) solid var(--color-border-neutral-2);max-width:100%;box-sizing:border-box } #bbPhotomaton .pm-seg { display:inline-flex;align-items:center;justify-content:center;gap:var(--spacing-gap-md);flex:1 1 0;height:40px;padding:0 var(--spacing-width-lg);border:none;background:transparent;white-space:nowrap;cursor:pointer;color:var(--color-foreground-neutral-7);font-family:var(--font-family-utility);font-size:var(--font-size-md);font-weight:var(--font-weight-medium);line-height:var(--line-height-md) } #bbPhotomaton .pm-seg:hover { color:var(--color-foreground-neutral-10) } #bbPhotomaton .pm-seg[aria-pressed="true"] { background:var(--color-surface-0);color:var(--color-foreground-neutral-10);box-shadow:var(--elevation-sm) } #bbPhotomaton .pm-nav { flex-shrink:0 } #bbPhotomaton .pm-video { position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transform:scaleX(-1);background:var(--color-background-neutral-10) } #bbPhotomaton .pm-hud { position:absolute;left:var(--spacing-width-lg);top:var(--spacing-height-lg);display:inline-flex;align-items:center;gap:var(--spacing-gap-md);padding:var(--spacing-height-xs) var(--spacing-width-md);background:var(--color-surface-0);color:var(--color-foreground-neutral-10) } #bbPhotomaton .pm-hud__dot { width:8px;height:8px;border-radius:var(--radius-full);background:var(--color-background-red-dark);animation:pmBlink 1.2s ease-in-out infinite } @keyframes pmBlink {50%{opacity:.25}} #bbPhotomaton .pm-count { position:absolute;inset:0;display:flex;align-items:center;justify-content:center;pointer-events:none } #bbPhotomaton .pm-count__n { display:flex;align-items:center;justify-content:center;width:200px;height:200px;border-radius:var(--radius-full);background:color-mix(in srgb,var(--color-background-neutral-10) 45%,transparent);color:var(--color-foreground-neutral-0);border:var(--line-stroke-bold) solid var(--color-border-neutral-0);animation:pmPop 1s cubic-bezier(.2,.8,.2,1) both } @keyframes pmPop {0%{opacity:0;transform:scale(1.5)}25%{opacity:1;transform:scale(1)}85%{opacity:1}100%{opacity:0;transform:scale(.85)}} #bbPhotomaton .pm-flash { position:absolute;inset:0;background:var(--color-background-neutral-0);animation:pmFlash .32s ease-out both;pointer-events:none } @keyframes pmFlash {from{opacity:1}to{opacity:0}} #bbPhotomaton .pm-roll { display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--spacing-gap-md) } #bbPhotomaton .pm-roll__cell { position:relative;aspect-ratio:4 / 3;display:flex;align-items:center;justify-content:center;border:var(--line-stroke-base) dashed var(--color-border-neutral-4);color:var(--color-foreground-neutral-5);overflow:hidden } #bbPhotomaton .pm-roll__cell img { position:absolute;inset:0;width:100%;height:100%;object-fit:cover;animation:pmIn .4s ease-out both } #bbPhotomaton .pm-roll__cell.is-full { border-style:solid;border-color:var(--color-border-neutral-10) } #bbPhotomaton .pm-meter { height:2px;background:var(--color-background-neutral-3);overflow:hidden } #bbPhotomaton .pm-meter__bar { height:100%;background:var(--color-background-neutral-10);transition:width .4s ease } #bbPhotomaton .pm-print { display:flex;flex-direction:column;align-items:center;gap:var(--spacing-gap-2xl) } #bbPhotomaton .pm-dispenser { width:280px;padding:var(--spacing-height-2xl) var(--spacing-width-2xl);border:var(--line-stroke-bold) solid var(--color-border-neutral-10);background:var(--color-surface-0) } #bbPhotomaton .pm-dispenser__tray { position:relative;height:560px;border:var(--line-stroke-bold) solid var(--color-border-neutral-10);background:var(--color-background-neutral-1);overflow:hidden } #bbPhotomaton .pm-dispenser__mouth { position:absolute;left:0;right:0;top:56px;height:8px;background:var(--color-background-neutral-6);z-index:2 } #bbPhotomaton .pm-dispenser__strip { position:absolute;left:50%;top:60px;width:136px;transform:translate(-50%,-100%) rotate(0deg);box-shadow:var(--elevation-md) } #bbPhotomaton .pm-dispenser__strip.is-out { animation:pmDeliver 2.6s cubic-bezier(.45,.05,.25,1) forwards } @keyframes pmDeliver {0%{transform:translate(-50%,-100%) rotate(0deg)}70%{transform:translate(-50%,8px) rotate(0deg)}100%{transform:translate(-50%,24px) rotate(-3deg)}} #bbPhotomaton .pm-dispenser__strip img { display:block;width:100%;height:auto } #bbPhotomaton .pm-final { display:grid;grid-template-columns:minmax(0,1fr) 400px;gap:var(--spacing-gap-5xl);align-items:center } #bbPhotomaton .pm-final__stage { display:flex;justify-content:center;padding:var(--spacing-height-2xl) 0 } #bbPhotomaton .pm-final__strip { display:block;width:auto;max-width:100%;max-height:680px;box-shadow:var(--elevation-lg);animation:pmLand .8s cubic-bezier(.2,.8,.2,1) both } @keyframes pmLand {from{opacity:0;transform:translateY(-24px) rotate(-3deg)}to{opacity:1;transform:rotate(-1.5deg)}} #bbPhotomaton .pm-final__strip { transform:rotate(-1.5deg) } #bbPhotomaton .pm-nets { display:flex;flex-wrap:wrap;gap:var(--spacing-gap-md) } #bbPhotomaton .pm-net { display:inline-flex;align-items:center;justify-content:center;width:40px;height:40px;border:var(--line-stroke-base) solid var(--color-border-neutral-5);background:transparent;color:var(--color-foreground-neutral-10);cursor:pointer;text-decoration:none;border-radius:var(--radius-button);transition:border-color .15s ease } #bbPhotomaton .pm-net:hover { border-color:var(--color-border-neutral-10) } #bbPhotomaton .pm-sep { height:1px;background:var(--color-border-neutral-3) } #bbPhotomaton .pm .fb { display:flex;align-items:flex-start;gap:var(--spacing-gap-lg);padding:var(--spacing-height-md) var(--spacing-width-md);border:var(--line-stroke-base) solid transparent;border-radius:var(--radius-none);width:100% } #bbPhotomaton .pm .fb .ico { width:24px;height:24px;flex-shrink:0 } #bbPhotomaton .pm .fb .body { flex:1 1 auto;min-width:0;display:flex;flex-direction:column;gap:var(--spacing-gap-xs) } #bbPhotomaton .pm .fb .close { width:24px;height:24px;flex-shrink:0;display:inline-flex;align-items:center;justify-content:center;color:inherit;background:transparent;border:0;padding:0;cursor:pointer;opacity:.7 } #bbPhotomaton .pm .fb .close:hover { opacity:1 } #bbPhotomaton .pm .fb.soft.red { background:var(--color-background-red-light);color:var(--color-foreground-red-dark) } #bbPhotomaton .pm .fb.soft.neutral { background:var(--color-background-neutral-1);color:var(--color-foreground-neutral-10) } #bbPhotomaton .pm .fb.toast { position:absolute;right:var(--spacing-margin-desktop-sm);bottom:var(--spacing-height-2xl);max-width:400px;z-index:6;background:var(--color-background-neutral-10);color:var(--color-foreground-neutral-0);box-shadow:var(--elevation-md);animation:pmIn .35s ease-out both } #bbPhotomaton .pm-privacy { display:flex;align-items:flex-start;gap:var(--spacing-gap-md);color:var(--color-foreground-neutral-7) } #bbPhotomaton .pm-curtain { position:fixed;inset:0;z-index:100000;pointer-events:all;opacity:1;transition:opacity .55s ease } #bbPhotomaton .pm-curtain__cv { position:absolute;inset:0;width:100%;height:100%;display:block } #bbPhotomaton .pm-curtain__rod { position:absolute;left:0;right:0;top:0;height:20px;z-index:3;background:repeating-linear-gradient(180deg,color-mix(in srgb,var(--color-background-neutral-0) 40%,transparent) 0 1px,transparent 1px 3px),linear-gradient(180deg,var(--color-background-neutral-2) 0%,var(--color-background-neutral-4) 55%,var(--color-background-neutral-6) 100%);box-shadow:var(--elevation-md) } #bbPhotomaton .pm { min-height:calc(100svh - 96px);display:flex;flex-direction:column;justify-content:flex-start;padding-top:var(--spacing-height-xl);padding-bottom:var(--spacing-height-2xl) } #bbPhotomaton .pm__in { width:100%;gap:var(--spacing-gap-2xl) } #bbPhotomaton .pm-launch { align-items:center } #bbPhotomaton .pm-thumbs { grid-template-columns:repeat(4,minmax(0,52px));justify-content:space-between } #bbPhotomaton .pm-screen, #bbPhotomaton .pm-dispenser { position:relative;background:repeating-linear-gradient(180deg,color-mix(in srgb,var(--color-background-neutral-0) 45%,transparent) 0 1px,transparent 1px 3px),repeating-linear-gradient(180deg,color-mix(in srgb,var(--color-background-neutral-7) 14%,transparent) 0 1px,transparent 1px 7px),linear-gradient(100deg,var(--color-background-neutral-3) 0%,var(--color-background-neutral-1) 20%,var(--color-background-neutral-4) 44%,var(--color-background-neutral-2) 60%,var(--color-background-neutral-0) 76%,var(--color-background-neutral-3) 100%);border:var(--line-stroke-base) solid var(--color-border-neutral-5);box-shadow:inset 0 1px 0 var(--color-border-neutral-0),inset 0 -1px 0 var(--color-border-neutral-6),var(--elevation-md) } #bbPhotomaton .pm-screen { padding:var(--spacing-height-xl) var(--spacing-width-xl) } #bbPhotomaton .pm-screen__in { min-height:0;height:clamp(360px,calc(100svh - 340px),640px);border-color:var(--color-border-neutral-10) } #bbPhotomaton .pm-screen__in--glass { background:radial-gradient(120% 80% at 20% 0%,color-mix(in srgb,var(--color-background-neutral-0) 10%,transparent),transparent 55%),var(--color-background-neutral-9) } #bbPhotomaton .pm-screen__in--glass .pm-strip { box-shadow:var(--elevation-lg) } #bbPhotomaton .pm-screen__in--cam { height:auto } #bbPhotomaton .pm-screen--cam { width:100%;max-width:calc((100svh - 340px) * 4 / 3 + 38px);justify-self:center } #bbPhotomaton .pm-preview { width:auto;height:100%;aspect-ratio:600 / 2028;max-width:46% } #bbPhotomaton .pm-preview .pm-strip { height:100% } #bbPhotomaton .pm-booth { align-items:center } #bbPhotomaton .pm-print { flex-direction:row;align-items:center;justify-content:center;flex-wrap:wrap;gap:var(--spacing-gap-4xl) } #bbPhotomaton .pm-dispenser__tray { height:clamp(360px,calc(100svh - 370px),620px);border-color:var(--color-border-neutral-10) } #bbPhotomaton .pm-dispenser__mouth { top:0;height:64px;background:linear-gradient(180deg,var(--color-background-neutral-1) 0 56px,var(--color-background-neutral-7) 56px 64px) } #bbPhotomaton .pm-dispenser__strip { width:auto;height:calc(100% - 100px);aspect-ratio:600 / 2028 } #bbPhotomaton .pm-dispenser__strip img { width:100%;height:100%;object-fit:contain } #bbPhotomaton .pm-final__strip { max-height:calc(100svh - 300px) } #bbPhotomaton .pm-strip__logo { flex-shrink:0 } #bbPhotomaton .pm { background:var(--color-surface-1);color:var(--color-foreground-neutral-10);isolation:isolate;transition:background-color .6s ease,color .4s ease } #bbPhotomaton .pm--fond { background:var(--color-background-yellow-light) } #bbPhotomaton .pm--prep { background:var(--color-background-green-light) } #bbPhotomaton .pm--print { background:var(--color-background-orange-light) } #bbPhotomaton .pm--final { background:var(--color-background-green-light) } #bbPhotomaton .pm__in { position:relative;z-index:1 } #bbPhotomaton .pm-facade { padding:0;border-radius:var(--radius-none);overflow:hidden;background:var(--color-background-neutral-2);box-shadow:var(--elevation-lg) } #bbPhotomaton .pm-facade::before { display:none } #bbPhotomaton .pm-facade__img { inset:0;width:100%;height:100%;border-radius:0;transition:transform 1.2s cubic-bezier(.2,.8,.2,1) } #bbPhotomaton .pm-facade:hover .pm-facade__img { transform:scale(1.04) } #bbPhotomaton .pm-bar { border-bottom:0;padding-bottom:0 } #bbPhotomaton .pm-steps { gap:var(--spacing-gap-xs);padding:var(--spacing-height-xs) var(--spacing-width-xs);background:var(--color-surface-0);border-radius:var(--radius-none);box-shadow:var(--elevation-sm) } #bbPhotomaton .pm-step { padding:var(--spacing-height-sm) var(--spacing-width-md);border-radius:var(--radius-button);color:var(--color-foreground-neutral-6);transition:background-color .35s ease,color .35s ease } #bbPhotomaton .pm-step.is-done { color:var(--color-foreground-neutral-10) } #bbPhotomaton .pm-step.is-active { background:var(--color-background-neutral-10);color:var(--color-foreground-neutral-0) } #bbPhotomaton .pm-screen, #bbPhotomaton .pm-dispenser { background:var(--color-surface-0);border:0;border-radius:var(--radius-none);padding:var(--spacing-height-lg) var(--spacing-width-lg);box-shadow:var(--elevation-lg) } #bbPhotomaton .pm-screen::before, #bbPhotomaton .pm-dispenser::before { display:none } #bbPhotomaton .pm-screen__in, #bbPhotomaton .pm-screen__in--glass { background:var(--color-background-neutral-1);border:0;border-radius:var(--radius-none);box-shadow:none } #bbPhotomaton .pm-screen__in--cam { background:var(--color-background-neutral-10) } #bbPhotomaton .pm-booth, #bbPhotomaton .pm-final, #bbPhotomaton .pm-print { animation:pmRise .6s cubic-bezier(.2,.8,.2,1) both } @keyframes pmRise {from{opacity:0;transform:translateY(28px) scale(.98)}to{opacity:1;transform:none}} #bbPhotomaton .pm-preview { perspective:900px;cursor:grab } #bbPhotomaton .pm-preview .pm-strip { transition:transform .25s ease-out;animation:pmFloat 4.5s ease-in-out infinite } @keyframes pmFloat {50%{translate:0 -10px}} #bbPhotomaton .pm-nav { border-radius:var(--radius-button);box-shadow:var(--elevation-md);transition:transform .3s cubic-bezier(.34,1.56,.64,1) } #bbPhotomaton .pm-nav:hover { transform:scale(1.12) } #bbPhotomaton .pm-thumbs { grid-template-columns:repeat(4,minmax(0,1fr));justify-content:stretch;gap:var(--spacing-gap-md) } #bbPhotomaton .pm-thumb { padding:var(--spacing-height-xs) var(--spacing-width-xs);border:0;border-radius:var(--radius-none);background:var(--color-surface-0);box-shadow:var(--elevation-sm);transition:transform .35s cubic-bezier(.34,1.56,.64,1),box-shadow .3s ease } #bbPhotomaton .pm-thumb:hover { border:0;transform:translateY(-6px) rotate(-3deg);box-shadow:var(--elevation-md) } #bbPhotomaton .pm-thumb:nth-child(2n):hover { transform:translateY(-6px) rotate(3deg) } #bbPhotomaton .pm-thumb.is-selected { transform:translateY(-4px);box-shadow:0 0 0 var(--line-stroke-bold) var(--color-border-neutral-10),var(--elevation-md) } #bbPhotomaton .pm-seg-wrap { border:0;border-radius:var(--radius-button);background:var(--color-surface-0);box-shadow:var(--elevation-sm) } #bbPhotomaton .pm-seg { border-radius:var(--radius-button);transition:background-color .3s ease,color .3s ease } #bbPhotomaton .pm-seg[aria-pressed="true"] { background:var(--color-background-neutral-10);color:var(--color-foreground-neutral-0);box-shadow:none } #bbPhotomaton .pm-screen__in--prep { gap:var(--spacing-gap-2xl) } #bbPhotomaton .pm-choices { display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--spacing-gap-xl);width:100%;max-width:660px } #bbPhotomaton .pm-choice { position:relative;display:flex;flex-direction:column;align-items:flex-start;gap:var(--spacing-gap-md);min-height:228px;padding:var(--spacing-height-2xl) var(--spacing-width-2xl);border:0;border-radius:var(--radius-none);background:var(--color-surface-0);color:var(--color-foreground-neutral-10);font-family:inherit;text-align:left;cursor:pointer;box-shadow:var(--elevation-sm);transition:transform .4s cubic-bezier(.34,1.56,.64,1),box-shadow .3s ease } #bbPhotomaton .pm-choice:hover { transform:translateY(-8px) rotate(-1.5deg);box-shadow:var(--elevation-lg) } #bbPhotomaton .pm-choice + .pm-choice:hover { transform:translateY(-8px) rotate(1.5deg) } #bbPhotomaton .pm-choice:active { transform:scale(.97) } #bbPhotomaton .pm-choice:disabled { cursor:progress } #bbPhotomaton .pm-choice:focus-visible { outline:var(--line-stroke-bold) solid var(--color-border-neutral-10);outline-offset:var(--spacing-gap-xs) } #bbPhotomaton .pm-choice--cam { background:var(--color-background-neutral-10);color:var(--color-foreground-neutral-0) } #bbPhotomaton .pm-choice__ico { display:inline-flex;align-items:center;justify-content:center;width:48px;height:48px;border-radius:var(--radius-none);background:var(--color-background-green-light);color:var(--color-foreground-neutral-10) } #bbPhotomaton .pm-choice:not(.pm-choice--cam) .pm-choice__ico { background:var(--color-background-yellow-light) } #bbPhotomaton .pm-choice__s { color:var(--color-foreground-neutral-7) } #bbPhotomaton .pm-choice--cam .pm-choice__s { color:var(--color-foreground-neutral-3) } #bbPhotomaton .pm-choice__go { margin-top:auto;align-self:flex-end;transition:transform .3s ease } #bbPhotomaton .pm-choice:hover .pm-choice__go { transform:translateX(6px) } #bbPhotomaton .pm-hud { border-radius:var(--radius-none) } #bbPhotomaton .pm-count__n { position:relative;width:240px;height:240px;border:0;background:color-mix(in srgb,var(--color-background-neutral-10) 40%,transparent);backdrop-filter:blur(6px) } #bbPhotomaton .pm-count__n::after { content:"";position:absolute;inset:-12px;border-radius:var(--radius-full);border:var(--line-stroke-bold) solid var(--color-border-neutral-0);animation:pmRing 1s ease-out both } @keyframes pmRing {from{transform:scale(.7);opacity:1}to{transform:scale(1.3);opacity:0}} #bbPhotomaton .pm-roll__cell { border-radius:var(--radius-none);transition:transform .4s cubic-bezier(.34,1.56,.64,1) } #bbPhotomaton .pm-roll__cell.is-full:nth-child(odd) { transform:rotate(-3deg) } #bbPhotomaton .pm-roll__cell.is-full:nth-child(even) { transform:rotate(2deg) } #bbPhotomaton .pm-meter { height:6px;border-radius:var(--radius-none) } #bbPhotomaton .pm-meter__bar { border-radius:var(--radius-none) } #bbPhotomaton .pm-dispenser__tray { background:var(--color-background-neutral-1);border:0;border-radius:var(--radius-none);box-shadow:none } #bbPhotomaton .pm-dispenser__mouth { border-radius:var(--radius-none);background:linear-gradient(180deg,var(--color-background-neutral-1) 0 52px,var(--color-background-neutral-10) 52px 64px) } #bbPhotomaton .pm-dispenser__strip.is-out { animation:pmDeliver 2.6s cubic-bezier(.34,1.3,.5,1) forwards } #bbPhotomaton .pm-final__strip { animation:pmLand .9s cubic-bezier(.34,1.56,.64,1) both } #bbPhotomaton .pm-final__stage { animation:pmFloatY 5s ease-in-out .9s infinite } @keyframes pmFloatY {50%{transform:translateY(-10px)}} #bbPhotomaton .pm-net { border:0;border-radius:var(--radius-button);background:var(--color-surface-0);box-shadow:var(--elevation-sm);transition:transform .3s cubic-bezier(.34,1.56,.64,1),box-shadow .3s ease } #bbPhotomaton .pm-net:hover { transform:translateY(-4px) scale(1.08);box-shadow:var(--elevation-md) } #bbPhotomaton .pm-sep { background:var(--color-border-neutral-4) } #bbPhotomaton .pm-curtain__rod { display:none } #bbPhotomaton:where(.mm-mobile) .pm-screen, #bbPhotomaton:where(.mm-mobile) .pm-dispenser { padding:var(--spacing-height-md) var(--spacing-width-md);border-radius:var(--radius-none) } #bbPhotomaton:where(.mm-mobile) .pm-screen__in.pm-screen__in--prep { height:auto;min-height:0 } #bbPhotomaton:where(.mm-mobile) .pm-choices { grid-template-columns:minmax(0,1fr) } #bbPhotomaton:where(.mm-mobile) .pm-choice { min-height:0;padding:var(--spacing-height-xl) var(--spacing-width-xl) } #bbPhotomaton:where(.mm-mobile) .pm-thumbs { gap:var(--spacing-gap-sm) } #bbPhotomaton .pm--fond, #bbPhotomaton .pm--prep, #bbPhotomaton .pm--print, #bbPhotomaton .pm--final { background:var(--color-surface-1) } #bbPhotomaton .pm--prep { background:var(--color-background-neutral-1) } #bbPhotomaton .pm--print { background:var(--color-background-neutral-2) } #bbPhotomaton .pm-choice__ico, #bbPhotomaton .pm-choice:not(.pm-choice--cam) .pm-choice__ico { background:var(--color-background-neutral-1);color:var(--color-foreground-neutral-10) } #bbPhotomaton .pm-choice--cam .pm-choice__ico { background:var(--color-surface-0) } #bbPhotomaton .pm-hud__dot { background:var(--color-background-neutral-10) } #bbPhotomaton .pm .btn { border-radius:var(--radius-button);box-shadow:none } #bbPhotomaton .pm-nav { border-radius:var(--radius-button);box-shadow:var(--elevation-sm);transition:background-color .15s ease } #bbPhotomaton .pm-nav:hover { transform:none;background:var(--color-background-neutral-1) } #bbPhotomaton .pm-net { width:40px;height:40px;border:var(--line-stroke-base) solid var(--color-border-neutral-5);border-radius:var(--radius-button);background:transparent;box-shadow:none;transition:border-color .15s ease } #bbPhotomaton .pm-net:hover { transform:none;box-shadow:none;border-color:var(--color-border-neutral-7) } #bbPhotomaton .pm-seg-wrap { border:var(--line-stroke-base) solid var(--color-border-neutral-2);border-radius:var(--radius-none);background:var(--color-background-neutral-1);box-shadow:none } #bbPhotomaton .pm-seg { border-radius:var(--radius-none) } #bbPhotomaton .pm-seg[aria-pressed="true"] { background:var(--color-surface-0);color:var(--color-foreground-neutral-10);box-shadow:var(--elevation-sm) } #bbPhotomaton .pm-steps, #bbPhotomaton .pm-step { border-radius:var(--radius-none) } #bbPhotomaton .pm-hud { border-radius:var(--radius-none) } #bbPhotomaton .pm-pop { position:absolute;inset:0;z-index:5;display:flex;align-items:center;justify-content:center;padding:var(--spacing-height-xl) var(--spacing-width-xl);background:color-mix(in srgb,var(--color-background-neutral-10) 70%,transparent);border-radius:inherit;animation:pmPopFade .25s ease-out both } #bbPhotomaton .pm-pop .fb { max-width:440px;box-shadow:var(--elevation-lg);animation:pmPopCard .45s cubic-bezier(.34,1.56,.64,1) .05s both } @keyframes pmPopFade {from{opacity:0}to{opacity:1}} @keyframes pmPopCard {from{opacity:0;transform:scale(.85) translateY(16px)}to{opacity:1;transform:none}} #bbPhotomaton .pm .btn, #bbPhotomaton .pm-nav, #bbPhotomaton .pm-net { border-radius:var(--radius-button) } #bbPhotomaton .pm-steps, #bbPhotomaton .pm-step, #bbPhotomaton .pm-seg-wrap, #bbPhotomaton .pm-seg, #bbPhotomaton .pm-hud { border-radius:var(--radius-none) } #bbPhotomaton .pm-seg-wrap { padding:var(--spacing-gap-xs) } #bbPhotomaton .pm-roll__cell.is-full, #bbPhotomaton .pm--shoot .pm-roll__cell.is-full { border-color:transparent } #bbPhotomaton .pm-privacy { align-items:center } #bbPhotomaton .pm-dock { display:flex;flex-direction:column;gap:var(--spacing-gap-md) } #bbPhotomaton .pm-dock .pm-panel__head { margin-bottom:var(--spacing-gap-md) } #bbPhotomaton:where(.mm-mobile) .pm-bar { flex-wrap:nowrap;align-items:center } #bbPhotomaton:where(.mm-mobile) .pm-booth, #bbPhotomaton:where(.mm-mobile) .pm-final { display:flex;flex-direction:column;align-items:stretch;gap:var(--spacing-gap-xl) } #bbPhotomaton:where(.mm-mobile) .pm-booth>.pm-screen { align-self:center;width:100%;max-width:640px } #bbPhotomaton:where(.mm-mobile) .pm-screen--cam { max-width:min(100%,calc((100svh - 340px) * 4 / 3 + 38px)) } #bbPhotomaton:where(.mm-mobile) .pm-screen__in.pm-screen__in--cam { height:auto;width:100%;min-height:0 } #bbPhotomaton:where(.mm-mobile) .pm-booth>.pm-panel, #bbPhotomaton:where(.mm-mobile) .pm-final>.pm-panel { display:contents } #bbPhotomaton:where(.mm-mobile) .pm-panel>.pm-panel__head:first-child { order:-1 } #bbPhotomaton:where(.mm-mobile) .pm-panel>* { order:1 } #bbPhotomaton:where(.mm-mobile) .pm-booth>.pm-screen, #bbPhotomaton:where(.mm-mobile) .pm-final>.pm-final__stage { order:0 } #bbPhotomaton:where(.mm-mobile) .pm-dock { order:5;position:sticky;bottom:0;z-index:20;margin:0 calc(-1 * var(--spacing-margin-mobile-md));padding:var(--spacing-height-md) var(--spacing-margin-mobile-md) calc(var(--spacing-height-md) + env(safe-area-inset-bottom));background:color-mix(in srgb,var(--color-surface-0) 92%,transparent);backdrop-filter:blur(10px);box-shadow:var(--elevation-md) } #bbPhotomaton:where(.mm-mobile) .pm-dock .pm-panel__head { margin-bottom:0;flex-direction:row;align-items:center;justify-content:space-between;gap:var(--spacing-gap-md) } #bbPhotomaton:where(.mm-mobile) .pm-dock .pm-seg-wrap { flex:0 0 auto } #bbPhotomaton:where(.mm-mobile) .pm-dock .pm-seg { padding:0 var(--spacing-width-md) } #bbPhotomaton:where(.mm-mobile) .pm-screen__in--glass { height:clamp(240px,40svh,420px) } #bbPhotomaton:where(.mm-mobile) .pm-thumbs { gap:var(--spacing-gap-sm) } #bbPhotomaton:where(.mm-mobile) .pm-thumb { padding:var(--spacing-height-xs) } #bbPhotomaton:where(.mm-mobile) .pm-thumb .pm-strip { height:56px;overflow:hidden } #bbPhotomaton:where(.mm-mobile) .pm-thumb:hover, #bbPhotomaton:where(.mm-mobile) .pm-thumb:nth-child(2n):hover { transform:translateY(-2px) } #bbPhotomaton:where(.mm-mobile) .pm-final__strip { max-height:56svh } #bbPhotomaton:where(.mm-mobile) .pm-steps { gap:0 } #bbPhotomaton:where(.mm-mobile) .pm-step { padding:var(--spacing-height-xs) var(--spacing-width-sm) } #bbPhotomaton:where(.mm-mobile) .pm-screen { padding:var(--spacing-height-sm) var(--spacing-width-sm) } #bbPhotomaton:where(.mm-mobile) .pm-screen__in--glass { height:clamp(220px,36svh,360px) } #bbPhotomaton:where(.mm-mobile) .pm-preview { max-width:40% } #bbPhotomaton:where(.mm-mobile) .pm-thumb__name { font-size:var(--font-size-xs) } #bbPhotomaton:where(.mm-mobile) .pm-choice { min-height:0;flex-direction:row;align-items:center;padding:var(--spacing-height-lg) var(--spacing-width-lg) } #bbPhotomaton:where(.mm-mobile) .pm-choice__go { margin:0 0 0 auto;align-self:center } #bbPhotomaton:where(.mm-mobile) .pm-choice .heading-title-sm-strong { flex:1 1 auto } #bbPhotomaton:where(.mm-mobile) .pm-choice__s { display:none } #bbPhotomaton .pm .fb .body { padding:0 } #bbPhotomaton .pm .fb { border-radius:var(--radius-none) } #bbPhotomaton .pm .fb.soft.neutral { align-items:center } #bbPhotomaton .pm-info { position:relative } #bbPhotomaton .pm-info__btn { display:none } #bbPhotomaton:where(.mm-mobile) .pm-info { display:flex;justify-content:flex-start } #bbPhotomaton:where(.mm-mobile) .pm-info__btn { display:inline-flex;align-items:center;gap:var(--spacing-gap-sm);height:32px;padding:0 var(--spacing-width-sm);border:0;border-radius:var(--radius-button);background:transparent;color:var(--color-foreground-neutral-7);font-family:var(--font-family-text);font-size:var(--font-size-sm);cursor:pointer } #bbPhotomaton:where(.mm-mobile) .pm-info__btn:focus-visible { outline:var(--line-stroke-bold) solid var(--color-border-neutral-10) } #bbPhotomaton:where(.mm-mobile) .pm-info .fb { display:none;position:absolute;left:0;bottom:calc(100% + var(--spacing-gap-sm));z-index:25;max-width:300px;box-shadow:var(--elevation-lg);background:var(--color-surface-0) } #bbPhotomaton:where(.mm-mobile) .pm-info.is-open .fb { display:flex;animation:pmPopCard .3s cubic-bezier(.34,1.56,.64,1) both } #bbPhotomaton:where(.mm-mobile) .pm-launch h1.display-sm { font-size:var(--font-size-2xl);line-height:var(--line-height-2xl) } #bbPhotomaton:where(.mm-mobile) .pm-launch .text-lg-regular { font-size:var(--font-size-md);line-height:var(--line-height-md) } #bbPhotomaton:where(.mm-mobile) .pm-booth .heading-title-lg { font-size:var(--font-size-xl);line-height:var(--line-height-xl) } #bbPhotomaton:where(.mm-mobile) .pm-booth .pm-panel__head>.pm-muted, #bbPhotomaton:where(.mm-mobile) .pm-final .pm-panel__head>.pm-muted { font-size:var(--font-size-sm);line-height:var(--line-height-sm) } #bbPhotomaton:where(.mm-mobile) .pm-panel__head { gap:var(--spacing-gap-xs) } #bbPhotomaton:where(.mm-mobile) .pm-booth, #bbPhotomaton:where(.mm-mobile) .pm-final { gap:var(--spacing-gap-lg) } #bbPhotomaton:where(.mm-mobile) .pm__in { gap:var(--spacing-gap-lg) } #bbPhotomaton:where(.mm-mobile) .pm-bar { padding-bottom:0 } #bbPhotomaton:where(.mm-mobile) .pm-booth--fond { display:grid;grid-template-columns:minmax(0,1fr) 76px;grid-template-areas:"title title" "screen fonds" "dock dock";align-items:stretch;column-gap:var(--spacing-gap-md);row-gap:var(--spacing-gap-lg) } #bbPhotomaton:where(.mm-mobile) .pm-booth--fond>.pm-screen { grid-area:screen;max-width:none;align-self:stretch } #bbPhotomaton:where(.mm-mobile) .pm-booth--fond .pm-panel>.pm-panel__head:first-child { grid-area:title } #bbPhotomaton:where(.mm-mobile) .pm-booth--fond .pm-panel__fonds { grid-area:fonds } #bbPhotomaton:where(.mm-mobile) .pm-booth--fond .pm-dock { grid-area:dock } #bbPhotomaton:where(.mm-mobile) .pm-booth--fond .pm-screen__in--glass { height:max(220px,calc(100svh - 540px));padding:var(--spacing-height-sm) var(--spacing-width-sm);gap:var(--spacing-gap-sm) } #bbPhotomaton:where(.mm-mobile) .pm-booth--fond .pm-preview { max-width:46% } #bbPhotomaton:where(.mm-mobile) .pm-booth--fond .pm-nav { width:32px;height:32px } #bbPhotomaton:where(.mm-mobile) .pm-panel__fonds .pm-thumbs { grid-template-columns:minmax(0,1fr);height:100%;align-content:space-between;gap:var(--spacing-gap-xs) } #bbPhotomaton:where(.mm-mobile) .pm-panel__fonds .pm-thumb { gap:2px;padding:3px } #bbPhotomaton:where(.mm-mobile) .pm-panel__fonds .pm-thumb .pm-strip { height:34px } #bbPhotomaton:where(.mm-mobile) .pm-panel__fonds .pm-thumb__name { font-size:var(--font-size-xs);line-height:var(--line-height-xs) } #bbPhotomaton:where(.mm-mobile) .pm-booth--fond .pm-dock { gap:var(--spacing-gap-sm) } #bbPhotomaton:where(.mm-mobile) .pm-pop { padding:var(--spacing-height-md) var(--spacing-width-md) } #bbPhotomaton:where(.mm-mobile) .pm-pop .fb { max-width:280px;padding:var(--spacing-height-sm) var(--spacing-width-md);gap:var(--spacing-gap-md) } #bbPhotomaton:where(.mm-mobile) .pm-pop .fb .text-md-strong, #bbPhotomaton:where(.mm-mobile) .pm-pop .fb .text-md-regular { font-size:var(--font-size-sm);line-height:var(--line-height-sm) } #bbPhotomaton:where(.mm-mobile) .pm-dock { position:static;margin:0;padding:0;background:transparent;backdrop-filter:none;box-shadow:none } #bbPhotomaton:where(.mm-mobile) .pm-steps { padding:var(--spacing-height-xs) var(--spacing-width-xs);gap:var(--spacing-gap-xs) } #bbPhotomaton:where(.mm-mobile) .pm-step { padding:var(--spacing-height-sm) var(--spacing-width-md) } #bbPhotomaton:where(.mm-mobile) .pm .pm-booth--fond { grid-template-columns:minmax(0,1fr) 72px } #bbPhotomaton:where(.mm-mobile) .pm .pm-booth--fond .pm-screen__in--glass { height:clamp(220px,calc(100svh - 540px),300px) } #bbPhotomaton:where(.mm-mobile) .pm .pm-booth--fond .pm-preview { max-width:38% } #bbPhotomaton:where(.mm-mobile) .pm .pm-booth--fond>.pm-screen { justify-self:stretch } #bbPhotomaton:where(.mm-mobile) .pm .pm-panel__fonds .pm-thumbs { height:auto;align-content:start;gap:var(--spacing-gap-sm) } #bbPhotomaton:where(.mm-mobile) .pm .pm-panel__fonds .pm-thumb .pm-strip { height:28px } #bbPhotomaton:where(.mm-mobile) .pm .pm-print { flex-direction:column;flex-wrap:nowrap;gap:var(--spacing-gap-lg) } #bbPhotomaton:where(.mm-mobile) .pm .pm-dispenser { order:1;width:min(100%,240px);align-self:center;padding:var(--spacing-height-sm) var(--spacing-width-sm);border-radius:var(--radius-none) } #bbPhotomaton:where(.mm-mobile) .pm .pm-dispenser__tray { height:clamp(240px,calc(100svh - 470px),320px) } #bbPhotomaton:where(.mm-mobile) .pm .pm-dispenser__strip { height:calc(100% - 80px) } #bbPhotomaton:where(.mm-mobile) .pm .pm-final__stage { padding:var(--spacing-height-sm) 0 } #bbPhotomaton:where(.mm-mobile) .pm .pm-final__strip { max-height:clamp(200px,calc(100svh - 600px),280px) } #bbPhotomaton:where(.mm-mobile) .pm .pm-final .pm-panel>* { order:2 } #bbPhotomaton:where(.mm-mobile) .pm .pm-final .pm-panel>.pm-panel__head:first-child { order:-1 } #bbPhotomaton:where(.mm-mobile) .pm .pm-final .pm-panel>.pm-dock { order:1 } #bbPhotomaton:where(.mm-mobile) .pm .pm-booth--fond .pm-dock { gap:var(--spacing-gap-xl) } #bbPhotomaton:where(.mm-mobile) .pm .pm-dispenser { order:2 } #bbPhotomaton:where(.mm-mobile) .pm .pm-final { display:grid;grid-template-columns:auto minmax(0,1fr);grid-template-areas:"title title" "stage dl" "stage sh" "stage nets" "stage note" "rs rs";grid-template-rows:auto auto auto auto 1fr auto;column-gap:var(--spacing-gap-lg);row-gap:var(--spacing-gap-md);align-items:start } #bbPhotomaton:where(.mm-mobile) .pm .pm-final>.pm-panel, #bbPhotomaton:where(.mm-mobile) .pm .pm-final .pm-dock { display:contents } #bbPhotomaton:where(.mm-mobile) .pm .pm-final .pm-panel>.pm-panel__head:first-child { grid-area:title } #bbPhotomaton:where(.mm-mobile) .pm .pm-final>.pm-final__stage { grid-area:stage;padding:var(--spacing-height-xs) var(--spacing-width-xs);align-self:start } #bbPhotomaton:where(.mm-mobile) .pm .pm-final .pm-dock>a.btn { grid-area:dl } #bbPhotomaton:where(.mm-mobile) .pm .pm-final .pm-dock>button:nth-of-type(1) { grid-area:sh } #bbPhotomaton:where(.mm-mobile) .pm .pm-final .pm-dock>button:nth-of-type(2) { grid-area:rs;margin-top:var(--spacing-gap-md) } #bbPhotomaton:where(.mm-mobile) .pm .pm-final .pm-sep { display:none } #bbPhotomaton:where(.mm-mobile) .pm .pm-final .pm-panel>.pm-panel__head:not(:first-child) { grid-area:nets;margin-top:var(--spacing-gap-sm) } #bbPhotomaton:where(.mm-mobile) .pm .pm-final .pm-panel>.pm-privacy { grid-area:note;font-size:var(--font-size-xs);line-height:var(--line-height-xs) } #bbPhotomaton:where(.mm-mobile) .pm .pm-final .pm-nets { gap:var(--spacing-gap-sm) } #bbPhotomaton:where(.mm-mobile) .pm .pm-final .pm-net { width:36px;height:36px } #bbPhotomaton:where(.mm-mobile) .pm .pm-final .pm-panel__head:not(:first-child)>.pm-muted { font-size:var(--font-size-xs);line-height:var(--line-height-xs) } #bbPhotomaton:where(.mm-mobile) .pm .pm-final__strip { max-height:clamp(300px,calc(100svh - 430px),420px);width:auto } #bbPhotomaton:where(.mm-mobile) .pm .pm-final .btn { padding:0 var(--spacing-width-md) } #bbPhotomaton .pm .pm-privacy { display:flex } #bbPhotomaton:where(.mm-mobile) .pm .pm-info__btn { display:flex } #bbPhotomaton .pm .pm-privacy, #bbPhotomaton .pm .pm-info__btn { align-items:center;gap:var(--spacing-gap-md);text-align:left;font-family:var(--font-family-text);font-size:var(--font-size-sm);line-height:var(--line-height-sm);font-weight:var(--font-weight-base);color:var(--color-foreground-neutral-7) } #bbPhotomaton .pm .pm-info__btn { height:auto;padding:0;width:100% } #bbPhotomaton .pm .pm-privacy .arr, #bbPhotomaton .pm .pm-info__btn .arr { width:24px;height:24px;flex:0 0 24px } #bbPhotomaton .pm .pm-info .fb.soft.neutral { background:transparent;padding:0;gap:var(--spacing-gap-md);color:var(--color-foreground-neutral-7) } #bbPhotomaton .pm .pm-info .fb .text-md-regular { font-size:var(--font-size-sm);line-height:var(--line-height-sm) } #bbPhotomaton:where(.mm-mobile) .pm .pm-info .fb.soft.neutral { background:var(--color-surface-0);padding:var(--spacing-height-md) var(--spacing-width-md);color:var(--color-foreground-neutral-10) } #bbPhotomaton .pm .pm-panel>.pm-panel__head:first-child { gap:var(--spacing-gap-md) } #bbPhotomaton .pm .pm-panel>.pm-panel__head:first-child>h2 { font-family:var(--font-family-heading);font-weight:var(--font-weight-base);font-size:var(--font-size-2xl);line-height:var(--line-height-2xl);letter-spacing:var(--letter-spacing-default);margin:0 } #bbPhotomaton .pm .pm-panel>.pm-panel__head:first-child>.pm-muted { font-size:var(--font-size-md);line-height:var(--line-height-md) } #bbPhotomaton:where(.mm-mobile) .pm .pm-panel>.pm-panel__head:first-child { gap:var(--spacing-gap-sm) } #bbPhotomaton:where(.mm-mobile) .pm .pm-panel>.pm-panel__head:first-child>h2 { font-size:var(--font-size-xl);line-height:var(--line-height-xl) } #bbPhotomaton:where(.mm-mobile) .pm .pm-panel>.pm-panel__head:first-child>.pm-muted { font-size:var(--font-size-sm);line-height:var(--line-height-sm) } #bbPhotomaton .pm .pm-roll { margin-bottom:var(--spacing-gap-lg) } #bbPhotomaton .pm .pm-meter { position:relative;height:32px;border-radius:var(--radius-none);overflow:hidden;background:var(--color-background-neutral-8) } #bbPhotomaton .pm .pm-meter__bar { position:absolute;left:0;top:0;bottom:0;background:var(--color-background-neutral-0);border-radius:var(--radius-none) } #bbPhotomaton .pm .pm-meter__txt { position:relative;z-index:1;display:flex;align-items:center;justify-content:center;height:100%;padding:0 var(--spacing-width-md);color:var(--color-foreground-neutral-0);mix-blend-mode:difference;font-family:var(--font-family-text);font-weight:var(--font-weight-strong);font-size:var(--font-size-sm);line-height:var(--line-height-sm);white-space:nowrap } #bbPhotomaton .pm-final__zoom { display:block;padding:0;border:0;background:transparent;cursor:zoom-in } #bbPhotomaton .pm-final__zoom:focus-visible { outline:var(--line-stroke-bold) solid var(--color-border-neutral-10);outline-offset:var(--spacing-gap-sm) } #bbPhotomaton .pm-lightbox { position:fixed;inset:0;z-index:99000;display:flex;align-items:center;justify-content:center;padding:var(--spacing-height-2xl) var(--spacing-width-xl);background:color-mix(in srgb,var(--color-background-neutral-10) 88%,transparent);cursor:zoom-out;animation:pmPopFade .25s ease-out both } #bbPhotomaton .pm-lightbox__img { display:block;max-width:100%;max-height:100%;height:calc(100svh - 96px);width:auto;object-fit:contain;box-shadow:var(--elevation-lg);animation:pmPopCard .4s cubic-bezier(.34,1.56,.64,1) both } #bbPhotomaton .pm-lightbox__close { position:absolute;top:var(--spacing-height-lg);right:var(--spacing-width-lg);border-radius:var(--radius-button) } @media (prefers-reduced-motion:reduce) { #bbPhotomaton .pm *, #bbPhotomaton .pm *::before, #bbPhotomaton .pm *::after { animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important } } #bbPhotomaton:where(.mm-mobile) .pm-booth, #bbPhotomaton:where(.mm-mobile) .pm-final { grid-template-columns:minmax(0,1fr) } #bbPhotomaton:where(.mm-mobile) .pm-launch { grid-template-columns:minmax(0,1fr);gap:var(--spacing-gap-2xl) } #bbPhotomaton:where(.mm-mobile) .pm-launch__txt { padding-bottom:0 } #bbPhotomaton:where(.mm-mobile) .pm-screen { padding:var(--spacing-height-md) var(--spacing-width-md) } #bbPhotomaton:where(.mm-mobile) .pm-screen__in { height:clamp(320px,calc(100svh - 380px),480px);gap:var(--spacing-gap-lg);padding:var(--spacing-height-xl) var(--spacing-width-md) } #bbPhotomaton:where(.mm-mobile) .pm-screen { padding:var(--spacing-height-lg) var(--spacing-width-lg) } #bbPhotomaton:where(.mm-mobile) .pm-print { flex-direction:column } #bbPhotomaton:where(.mm-mobile) .pm-dispenser__tray { height:clamp(380px,calc(100svh - 300px),520px) } #bbPhotomaton:where(.mm-mobile) .pm-screen__in--cam { min-height:0;padding:0 } #bbPhotomaton:where(.mm-mobile) .pm-screen__in--prep .btn { min-width:0;width:100% } #bbPhotomaton:where(.mm-mobile) .pm-steps { gap:var(--spacing-gap-lg) } #bbPhotomaton:where(.mm-mobile) .pm-step__label { display:none } #bbPhotomaton:where(.mm-mobile) .pm-step.is-active .pm-step__label { display:inline } #bbPhotomaton:where(.mm-mobile) .pm-count__n { width:132px;height:132px } #bbPhotomaton:where(.mm-mobile) .pm-final__strip { max-height:520px } #bbPhotomaton:where(.mm-mobile) .pm-dispenser { width:100% } #bbPhotomaton:where(.mm-mobile) .pm .fb.toast { left:var(--spacing-margin-mobile-md);right:var(--spacing-margin-mobile-md);max-width:none } #bbPhotomaton.mm-mobile .pm { padding:var(--spacing-height-3xl) var(--spacing-margin-mobile-md) } @media (max-width:760px) { #bbPhotomaton .pm { padding:var(--spacing-height-3xl) var(--spacing-margin-mobile-md) } } #bbPhotomaton .pm .pm-print { display:flex;justify-content:center;align-items:center } #bbPhotomaton .pm .pm-print .pm-dispenser { transition:background-color .35s ease,box-shadow .35s ease } #bbPhotomaton .pm .pm-print .pm-dispenser__tray, #bbPhotomaton .pm .pm-print .pm-dispenser__mouth { transition:background .35s ease,opacity .35s ease } #bbPhotomaton .pm-print__count { position:absolute;inset:0;z-index:3;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:var(--spacing-gap-md);color:var(--color-foreground-neutral-10);pointer-events:none } #bbPhotomaton .pm-print__n { font-variant-numeric:tabular-nums } #bbPhotomaton .pm-print__lbl { color:var(--color-foreground-neutral-6) } #bbPhotomaton .pm .pm-print.is-leaving .pm-dispenser { background-color:transparent;box-shadow:none } #bbPhotomaton .pm .pm-print.is-leaving .pm-dispenser__tray { background:transparent } #bbPhotomaton .pm .pm-print.is-leaving .pm-dispenser__mouth { opacity:0 } #bbPhotomaton .pm .pm-print.is-leaving .pm-dispenser__strip { box-shadow:var(--elevation-md) } #bbPhotomaton .pm .pm-final.pm-final--from-print, #bbPhotomaton .pm .pm-final--from-print .pm-final__strip { animation:none } #bbPhotomaton .pm .pm-final--from-print .pm-final__strip { transform:rotate(-1.5deg) } #bbPhotomaton .pm .pm-bar { align-items:center;flex-wrap:nowrap } #bbPhotomaton .pm .pm-bar .pm-steps { flex:1 1 auto;max-width:640px;display:flex;flex-wrap:nowrap;gap:0;padding:0;margin:0;background:transparent;box-shadow:none;border-radius:0 } #bbPhotomaton .pm .pm-bar .pm-step { position:relative;flex:1 1 0;min-width:0;display:flex;flex-direction:column;align-items:center;gap:var(--spacing-gap-sm);padding:0;background:transparent;border-radius:0;color:var(--color-foreground-neutral-5);transition:color .35s ease } #bbPhotomaton .pm .pm-bar .pm-step::after { content:"";position:absolute;top:18px;left:calc(50% + 18px);right:calc(-50% + 18px);height:var(--line-stroke-base);background:var(--color-border-neutral-4);transition:background-color .35s ease } #bbPhotomaton .pm .pm-bar .pm-step:last-child::after { display:none } #bbPhotomaton .pm .pm-bar .pm-step.is-done::after { background:var(--color-border-neutral-10) } #bbPhotomaton .pm .pm-bar .pm-step__dot { position:relative;display:flex;align-items:center;justify-content:center;width:36px;height:36px;flex:none;border-radius:50%;border:var(--line-stroke-base) solid var(--color-border-neutral-4);background:var(--color-surface-0);color:var(--color-foreground-neutral-5);transition:background-color .35s ease,border-color .35s ease,color .35s ease } #bbPhotomaton .pm .pm-bar .pm-step__ico { width:20px;height:20px;background:currentColor;-webkit-mask:var(--pm-ico) center/contain no-repeat;mask:var(--pm-ico) center/contain no-repeat } #bbPhotomaton .pm .pm-bar .pm-step--fond { --pm-ico:url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22black%22 stroke-width=%221%22 stroke-linejoin=%22miter%22%3E%3Crect x=%223.5%22 y=%225.5%22 width=%2217%22 height=%2213%22/%3E%3Cpath d=%22M3.5 16.5l5-5 4 4 2.5-2.5 5.5 5%22/%3E%3Ccircle cx=%2215.5%22 cy=%229.5%22 r=%221.5%22/%3E%3C/svg%3E") } #bbPhotomaton .pm .pm-bar .pm-step--prep { --pm-ico:url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22black%22 stroke-width=%221%22 stroke-linejoin=%22miter%22%3E%3Cpath d=%22M4 7.5h16M4 16.5h16%22/%3E%3Crect x=%227.5%22 y=%225.5%22 width=%223%22 height=%224%22 fill=%22white%22/%3E%3Crect x=%2213.5%22 y=%2214.5%22 width=%223%22 height=%224%22 fill=%22white%22/%3E%3C/svg%3E") } #bbPhotomaton .pm .pm-bar .pm-step--shoot { --pm-ico:url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22black%22 stroke-width=%221%22 stroke-linejoin=%22miter%22%3E%3Cpath d=%22M3.5 7.5h4l1.5-2h6l1.5 2h4v11h-17z%22/%3E%3Ccircle cx=%2212%22 cy=%2213%22 r=%223.5%22/%3E%3C/svg%3E") } #bbPhotomaton .pm .pm-bar .pm-step--print { --pm-ico:url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22black%22 stroke-width=%221%22 stroke-linejoin=%22miter%22%3E%3Cpath d=%22M7.5 9.5v-5h9v5M7.5 15.5h-4v-6h17v6h-4%22/%3E%3Crect x=%227.5%22 y=%2213.5%22 width=%229%22 height=%226%22/%3E%3C/svg%3E") } #bbPhotomaton .pm .pm-bar .pm-step--final { --pm-ico:url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22black%22 stroke-width=%221%22 stroke-linejoin=%22miter%22%3E%3Cpath d=%22M12 3.5v11M8 7.5l4-4 4 4M8.5 10.5h-3v10h13v-10h-3%22/%3E%3C/svg%3E") } #bbPhotomaton .pm .pm-bar .pm-step.is-done { --pm-ico:url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22black%22 stroke-width=%221%22 stroke-linejoin=%22miter%22%3E%3Cpath d=%22M6.5 12.5l3.5 3.5 7.5-7.5%22/%3E%3C/svg%3E");color:var(--color-foreground-neutral-10) } #bbPhotomaton .pm .pm-bar .pm-step.is-done .pm-step__dot { background:var(--color-surface-0);border-color:var(--color-border-neutral-10);color:var(--color-foreground-neutral-10) } #bbPhotomaton .pm .pm-bar .pm-step.is-active { color:var(--color-foreground-neutral-10) } #bbPhotomaton .pm .pm-bar .pm-step.is-active .pm-step__dot { background:var(--color-background-neutral-10);border-color:var(--color-border-neutral-10);color:var(--color-foreground-neutral-0) } #bbPhotomaton .pm .pm-bar .pm-step__label { display:block;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;text-align:center } #bbPhotomaton .pm .pm-bar .pm-quit { flex:none } #bbPhotomaton:where(.mm-mobile) .pm .pm-bar { gap:var(--spacing-gap-md) } #bbPhotomaton:where(.mm-mobile) .pm .pm-bar .pm-step { gap:var(--spacing-gap-xs) } #bbPhotomaton:where(.mm-mobile) .pm .pm-bar .pm-step::after { top:14px;left:calc(50% + 14px);right:calc(-50% + 14px) } #bbPhotomaton:where(.mm-mobile) .pm .pm-bar .pm-step__dot { width:28px;height:28px } #bbPhotomaton:where(.mm-mobile) .pm .pm-bar .pm-step__ico { width:16px;height:16px } #bbPhotomaton:where(.mm-mobile) .pm .pm-bar .pm-step__label, #bbPhotomaton:where(.mm-mobile) .pm .pm-bar .pm-step.is-active .pm-step__label { display:block;font-size:var(--font-size-2xs, 10px);line-height:1.2 } @media (min-width:761px) { #bbPhotomaton .pm.pm--launch { padding-top:0;padding-left:0;padding-right:0 } } @container pm (min-width:1101px) { #bbPhotomaton .pm--launch .pm__in { max-width:none;gap:0 } #bbPhotomaton .pm--launch .pm-launch { height:100vh;height:100svh;min-height:600px;grid-template-columns:minmax(0,0.9fr) minmax(0,1.5fr);gap:0;align-items:stretch;margin-left:calc(50% - 50vw);margin-right:calc(50% - 50vw) } #bbPhotomaton .pm--launch .pm-launch__txt { justify-content:center;align-items:center;padding:var(--spacing-height-3xl) var(--spacing-gap-4xl) } #bbPhotomaton .pm--launch .pm-launch__txt>* { width:100%;max-width:520px } #bbPhotomaton .pm--launch .pm-facade { aspect-ratio:auto;height:100%;box-shadow:none } #bbPhotomaton .pm--launch .pm-facade__img { object-position:50% 60% } } @media (min-width:761px) { #bbPhotomaton .pm:not(.pm--launch) { --pm-av:600px;min-height:100svh;justify-content:center;padding-top:var(--spacing-height-lg);padding-bottom:var(--spacing-height-lg) } #bbPhotomaton .pm:not(.pm--launch) .pm-screen__in { height:max(360px, var(--pm-av)) } #bbPhotomaton .pm:not(.pm--launch) .pm-screen__in--cam { height:auto } #bbPhotomaton .pm:not(.pm--launch) .pm-screen--cam { max-width:calc(max(360px, var(--pm-av)) * 4 / 3 + 48px) } #bbPhotomaton .pm:not(.pm--launch) .pm-dispenser__tray { height:max(360px, var(--pm-av)) } #bbPhotomaton .pm:not(.pm--launch) .pm-final__strip { max-height:calc(var(--pm-av) - 10px) } } #bbPhotomaton .pm .pm-bar--side { display:none } @media (min-width:761px) { #bbPhotomaton .pm:not(.pm--print) .pm-bar:not(.pm-bar--side) .pm-steps { visibility:hidden } #bbPhotomaton .pm .pm-bar.pm-bar--side { display:flex;padding:0;margin:0 0 var(--spacing-gap-md);border:0 } #bbPhotomaton .pm .pm-bar--side .pm-steps { max-width:none;width:100% } #bbPhotomaton .pm .pm-booth { grid-template-columns:minmax(0,720px) 380px;justify-content:center } } #bbPhotomaton:where(.mm-mobile) .pm .pm-final .pm-nets { flex-wrap:nowrap;gap:6px } #bbPhotomaton:where(.mm-mobile) .pm .pm-final .pm-net { width:34px;height:34px;flex:none } #bbPhotomaton:where(.mm-mobile) .pm .pm-final .pm-dock .btn { padding-left:var(--spacing-width-sm);padding-right:var(--spacing-width-sm);gap:var(--spacing-gap-xs);font-size:var(--font-size-sm);white-space:normal;text-align:center } #bbPhotomaton .pm-f--sdprune { background:#780D1D;color:var(--color-foreground-neutral-0) } #bbPhotomaton .pm-f--sdprune .pm-slot { background:color-mix(in srgb,#780D1D 75%,var(--color-background-neutral-0)) } #bbPhotomaton .pm-f--sdnoir { background:var(--color-background-neutral-10);color:var(--color-foreground-neutral-0) } #bbPhotomaton .pm-f--sdnoir .pm-slot { background:var(--color-background-neutral-8) } #bbPhotomaton .pm-f--sdprune .pm-slot:nth-child(3), #bbPhotomaton .pm-f--sdnoir .pm-slot:nth-child(3) { background:#780D1D;display:flex;align-items:center;justify-content:center } #bbPhotomaton .pm-f--sdprune .pm-slot:nth-child(3)::after, #bbPhotomaton .pm-f--sdnoir .pm-slot:nth-child(3)::after { content:"SINGLES’ DAY";font-family:"Hanken Grotesk",var(--font-family-text),sans-serif;font-weight:800;font-size:10.5cqw;line-height:1;letter-spacing:-0.01em;color:var(--color-foreground-neutral-0);white-space:nowrap } #bbPhotomaton .pm-f--sdnoir { position:relative } #bbPhotomaton .pm-f--sdnoir::after { content:"";position:absolute;left:0;top:0;width:100%;height:338cqw;z-index:2;pointer-events:none; background-image:var(--pm-stk-c),var(--pm-stk-t),var(--pm-stk-l);background-repeat:no-repeat; background-size:40cqw auto,33.33cqw auto,41.67cqw auto;background-position:55.83cqw 60.5cqw,6.67cqw 135.42cqw,53.83cqw 274.42cqw; filter:drop-shadow(0 0.5cqw 1.2cqw rgba(0,0,0,.35)) } #bbPhotomaton .pm .pm-final .pm-dock { flex-direction:row } #bbPhotomaton .pm .pm-final .pm-dock>.btn { flex:1 1 0;min-width:0 } #bbPhotomaton .pm .pm-share { display:flex;align-items:center;gap:var(--spacing-gap-md) } #bbPhotomaton .pm .pm-share .pm-net { flex:none } #bbPhotomaton .pm .pm-share p { margin:0 } #bbPhotomaton .pm .pm-final .pm-nets.pm-share { flex-wrap:nowrap;align-items:center;justify-content:flex-start;text-align:left } #bbPhotomaton .pm .pm-final .pm-share p { flex:1 1 0;min-width:0 } #bbPhotomaton .pm .pm-promo { display:flex;justify-content:center;align-items:center;background:var(--color-background-neutral-10);padding:var(--spacing-height-md) var(--spacing-width-lg);text-decoration:none;transition:opacity .2s ease } #bbPhotomaton .pm .pm-promo:hover { opacity:.9 } #bbPhotomaton .pm .pm-promo img { display:block;width:100%;max-width:300px;height:auto } #bbPhotomaton:where(.mm-mobile) .pm .pm-final .pm-promo { grid-column:1 / -1;order:20;padding:var(--spacing-height-sm) var(--spacing-width-md) } #bbPhotomaton:where(.mm-mobile) .pm .pm-final .pm-promo { padding:6px var(--spacing-width-md) } #bbPhotomaton:where(.mm-mobile) .pm .pm-final .pm-promo img { width:auto;max-width:100%;height:42px } #bbPhotomaton .pm .pm-promo:focus-visible { outline:var(--line-stroke-bold) solid var(--color-border-neutral-10);outline-offset:2px } #bbPhotomaton .pm .pm-style { display:flex;flex-direction:column;gap:var(--spacing-gap-sm) } @media (min-width:761px) { #bbPhotomaton .pm .pm-bar--side .pm-steps { position:relative;justify-content:space-between } #bbPhotomaton .pm .pm-bar--side .pm-step { flex:0 0 36px;width:36px;overflow:visible;z-index:1 } #bbPhotomaton .pm .pm-bar--side .pm-step::after { display:none } #bbPhotomaton .pm .pm-bar--side .pm-step__label { overflow:visible;max-width:none } #bbPhotomaton .pm .pm-bar--side .pm-step:first-child { align-items:flex-start } #bbPhotomaton .pm .pm-bar--side .pm-step:last-child { align-items:flex-end } #bbPhotomaton .pm .pm-bar--side .pm-steps::before, #bbPhotomaton .pm .pm-bar--side .pm-steps::after { content:"";position:absolute;left:18px;top:18px;height:var(--line-stroke-base);background:var(--color-border-neutral-4) } #bbPhotomaton .pm .pm-bar--side .pm-steps::before { right:18px } #bbPhotomaton .pm .pm-bar--side .pm-steps::after { width:0;background:var(--color-border-neutral-10) } #bbPhotomaton .pm .pm-bar--side .pm-steps--p1::after { width:calc((100% - 36px) / 3) } #bbPhotomaton .pm .pm-bar--side .pm-steps--p2::after { width:calc((100% - 36px) * 2 / 3) } #bbPhotomaton .pm .pm-bar--side .pm-steps--p3::after { width:calc(100% - 36px) } #bbPhotomaton .pm .pm-bar--side .pm-steps--p4::after { width:calc(100% - 36px) } } #bbPhotomaton .pm .pm-choices { grid-template-columns:minmax(0,1fr);max-width:340px;justify-items:stretch } #bbPhotomaton .pm .pm-screen__in--prep .pm-style { width:100%;max-width:340px } @media (min-width:761px) { #bbPhotomaton .pm .pm-booth, #bbPhotomaton .pm .pm-final { align-items:start } #bbPhotomaton .pm .pm-final .pm-final__stage { align-self:start } } #bbPhotomaton .pm-f--sdnoir { background:var(--color-surface-0);color:var(--color-foreground-neutral-10) } #bbPhotomaton .pm-f--sdnoir .pm-slot { background:var(--color-background-neutral-3) } #bbPhotomaton .pm-f--sdnoir .pm-slot:nth-child(3) { background:var(--color-surface-0) } #bbPhotomaton .pm-f--sdnoir .pm-slot:nth-child(3)::after { color:var(--color-foreground-neutral-10) } #bbPhotomaton .pm-thumb .pm-f--sdnoir { box-shadow:inset 0 0 0 var(--line-stroke-base) var(--color-border-neutral-3) } #bbPhotomaton:where(.mm-mobile) .pm .pm-booth .pm-screen__in--prep .pm-choices, #bbPhotomaton:where(.mm-mobile) .pm .pm-booth .pm-screen__in--prep .pm-style { max-width:none } #bbPhotomaton:where(.mm-mobile) .pm .pm-booth .pm-screen__in--prep .pm-choice { flex-direction:column;align-items:flex-start;min-height:190px;padding:var(--spacing-height-xl) var(--spacing-width-xl) } #bbPhotomaton:where(.mm-mobile) .pm .pm-booth .pm-screen__in--prep .pm-choice__s { display:block } #bbPhotomaton:where(.mm-mobile) .pm .pm-booth .pm-screen__in--prep .pm-choice__go { margin:auto 0 0 auto;align-self:flex-end } @media (min-width:761px) { #bbPhotomaton .pm .pm-booth, #bbPhotomaton .pm .pm-final { align-items:stretch } #bbPhotomaton .pm .pm-booth>.pm-screen, #bbPhotomaton .pm .pm-final>.pm-final__stage { align-self:start } #bbPhotomaton .pm .pm-booth>.pm-panel, #bbPhotomaton .pm .pm-final>.pm-panel { position:relative;display:flex;flex-direction:column;justify-content:center;padding-top:96px } #bbPhotomaton .pm .pm-panel .pm-bar.pm-bar--side { position:absolute;top:0;left:0;right:0;margin:0 } } #bbPhotomaton .pm .pm-dock .pm-style .pm-seg-wrap { display:flex;width:100% } #bbPhotomaton:where(.mm-mobile) .pm .pm-dock .pm-style .pm-seg { height:30px } #bbPhotomaton:where(.mm-mobile) .pm .pm-dock .pm-style .pm-seg-wrap { padding:2px } #bbPhotomaton:where(.mm-mobile) .pm .pm-booth .pm-dock:has(.pm-style) { gap:var(--spacing-gap-xs) } @media (min-width:761px) { #bbPhotomaton .pm .pm-final { grid-template-columns:minmax(0,720px) 380px;justify-content:center;gap:var(--spacing-gap-4xl) } #bbPhotomaton .pm .pm-final>.pm-final__stage { display:flex;justify-content:center } #bbPhotomaton .pm .pm-final .pm-promo { padding:var(--spacing-height-2xl) var(--spacing-width-lg) } #bbPhotomaton .pm--launch .pm-launch__txt { align-items:center;padding:var(--spacing-height-3xl) var(--spacing-gap-4xl) } #bbPhotomaton .pm--launch .pm-launch__txt>* { width:100%;max-width:520px } } @media (min-width:761px) { #bbPhotomaton .pm:not(.pm--launch) { padding-top:var(--spacing-height-md);justify-content:flex-start } #bbPhotomaton .pm:not(.pm--launch):not(.pm--print) .pm__in { gap:var(--spacing-gap-md) } #bbPhotomaton .pm:not(.pm--print) .pm-bar:not(.pm-bar--side) { padding:0;margin:0;min-height:0 } #bbPhotomaton .pm:not(.pm--print) .pm-bar:not(.pm-bar--side) .pm-steps { height:0;overflow:hidden } } #bbPhotomaton .pm .pm-quit { width:44px;height:44px;min-width:0;padding:0;justify-content:center;gap:0 } #bbPhotomaton .pm .pm-quit .arr { width:24px;height:24px } #bbPhotomaton .pm-cam-cta { position:absolute;left:0;right:0;bottom:var(--spacing-height-xl);z-index:6;display:flex;justify-content:center;pointer-events:none } #bbPhotomaton .pm-cam-cta .btn { pointer-events:auto;min-width:240px;box-shadow:var(--elevation-lg) } #bbPhotomaton:where(.mm-mobile) .pm-cam-cta { bottom:var(--spacing-height-sm) } #bbPhotomaton:where(.mm-mobile) .pm-cam-cta .btn { min-width:0;height:40px;padding:0 var(--spacing-width-lg) } #bbPhotomaton .pm .pm-roll--n3 { grid-template-columns:repeat(3,calc((100% - 3 * var(--spacing-gap-md)) / 4));justify-content:center } #bbPhotomaton:where(.mm-mobile) .pm .pm-roll--n3 { grid-template-columns:minmax(0,1fr);grid-template-rows:repeat(3,minmax(0,1fr)) } @media (min-width:761px) { #bbPhotomaton .pm.pm--print .pm-bar:not(.pm-bar--side) { position:relative;justify-content:center } #bbPhotomaton .pm.pm--print .pm-bar:not(.pm-bar--side) .pm-steps { flex:0 1 640px } #bbPhotomaton .pm.pm--print .pm-bar:not(.pm-bar--side) .pm-quit { position:absolute;right:0;top:0 } } #bbPhotomaton .pm-curtain.is-open { pointer-events:none } #bbPhotomaton:where(.mm-mobile) .pm .pm-bar:not(.pm-bar--side) .pm-steps { position:relative;justify-content:space-between } #bbPhotomaton:where(.mm-mobile) .pm .pm-bar:not(.pm-bar--side) .pm-step { flex:0 0 28px;width:28px;overflow:visible;z-index:1 } #bbPhotomaton:where(.mm-mobile) .pm .pm-bar:not(.pm-bar--side) .pm-step::after { display:none } #bbPhotomaton:where(.mm-mobile) .pm .pm-bar:not(.pm-bar--side) .pm-step__label { overflow:visible;max-width:none } #bbPhotomaton:where(.mm-mobile) .pm .pm-bar:not(.pm-bar--side) .pm-step:first-child { align-items:flex-start } #bbPhotomaton:where(.mm-mobile) .pm .pm-bar:not(.pm-bar--side) .pm-step:last-child { align-items:flex-end } #bbPhotomaton:where(.mm-mobile) .pm .pm-bar:not(.pm-bar--side) .pm-steps::before, #bbPhotomaton:where(.mm-mobile) .pm .pm-bar:not(.pm-bar--side) .pm-steps::after { content:"";position:absolute;left:14px;top:14px;height:var(--line-stroke-base);background:var(--color-border-neutral-4) } #bbPhotomaton:where(.mm-mobile) .pm .pm-bar:not(.pm-bar--side) .pm-steps::before { right:14px } #bbPhotomaton:where(.mm-mobile) .pm .pm-bar:not(.pm-bar--side) .pm-steps::after { width:0;background:var(--color-border-neutral-10) } #bbPhotomaton:where(.mm-mobile) .pm .pm-bar:not(.pm-bar--side) .pm-steps--p1::after { width:calc((100% - 28px) / 3) } #bbPhotomaton:where(.mm-mobile) .pm .pm-bar:not(.pm-bar--side) .pm-steps--p2::after { width:calc((100% - 28px) * 2 / 3) } #bbPhotomaton:where(.mm-mobile) .pm .pm-bar:not(.pm-bar--side) .pm-steps--p3::after { width:calc(100% - 28px) } #bbPhotomaton:where(.mm-mobile) .pm .pm-final { grid-template-areas:"title title" "stage dl" "stage sh" "stage nets" "stage promo" "stage note" "rs rs";grid-template-rows:auto auto auto auto auto 1fr auto } #bbPhotomaton:where(.mm-mobile) .pm .pm-final .pm-promo { grid-area:promo;grid-column:auto;order:0;padding:var(--spacing-height-lg) var(--spacing-width-lg) } #bbPhotomaton:where(.mm-mobile) .pm .pm-final .pm-promo img { width:76%;height:auto;max-width:none;margin:0 auto } @media (min-width:761px) and (max-width:1100px) { #bbPhotomaton .pm .pm-booth, #bbPhotomaton .pm .pm-final { grid-template-columns:minmax(0,1fr) 300px;gap:var(--spacing-gap-2xl) } #bbPhotomaton .pm .pm-thumbs { gap:var(--spacing-gap-xs) } } #bbPhotomaton .pm-more { display:inline;margin:0 0 0 var(--spacing-gap-xs);padding:0;border:0;background:none;font:inherit;color:inherit;text-decoration:underline;text-underline-offset:3px;cursor:pointer } #bbPhotomaton .pm-more:hover { color:var(--color-foreground-neutral-10) } #bbPhotomaton .pm-more:focus-visible { outline:var(--line-stroke-bold) solid var(--color-border-neutral-10);outline-offset:2px } #bbPhotomaton .pm-modal { position:fixed;inset:0;z-index:99500;display:flex;align-items:center;justify-content:center;padding:var(--spacing-height-xl) var(--spacing-width-lg);background:color-mix(in srgb,var(--color-background-neutral-10) 60%,transparent);animation:pmModalFade .2s ease both } #bbPhotomaton .pm-modal__card { position:relative;box-sizing:border-box;width:100%;max-width:560px;max-height:calc(100svh - 48px);overflow:auto;display:flex;flex-direction:column;gap:var(--spacing-gap-lg);padding:var(--spacing-height-3xl) var(--spacing-width-3xl);background:var(--color-surface-0);box-shadow:var(--elevation-lg);border-radius:var(--radius-none);color:var(--color-foreground-neutral-8);text-align:left;animation:pmPopCard .35s cubic-bezier(.34,1.56,.64,1) both } #bbPhotomaton .pm-modal__title { margin:0;padding-right:48px;color:var(--color-foreground-neutral-10) } #bbPhotomaton .pm-modal__card p { margin:0 } #bbPhotomaton .pm-modal__link { color:var(--color-foreground-neutral-10);text-decoration:underline;text-underline-offset:3px } #bbPhotomaton .pm-modal__close { position:absolute;top:var(--spacing-height-lg);right:var(--spacing-width-lg) } @keyframes pmModalFade {from{opacity:0}to{opacity:1}} @media (max-width:640px) { #bbPhotomaton .pm-modal { align-items:flex-end;padding:0 } #bbPhotomaton .pm-modal__card { max-width:none;max-height:88svh;padding:var(--spacing-height-2xl) var(--spacing-width-xl) } } @media (prefers-reduced-motion:reduce) { #bbPhotomaton .pm-modal, #bbPhotomaton .pm-modal__card { animation:none } } #bbPhotomaton .hero__media { background:var(--color-background-neutral-10) url("https://videosr2.bobochicparis.com/thumbs/mediatheque_photomaton-desk.jpg") center / cover no-repeat } @media (max-width:760px) { #bbPhotomaton .hero__media { background-image:url("https://videosr2.bobochicparis.com/thumbs/mediatheque_photomaton-mob.jpg") } } #bbPhotomaton .pm .pm-final .pm-notes { display:flex;flex-direction:column;gap:var(--spacing-gap-md) } #bbPhotomaton .pm.pm--shoot .pm-booth .pm-dock { gap:var(--spacing-gap-lg) } #bbPhotomaton:where(.mm-mobile) .pm .pm-final .pm-panel>.pm-notes { grid-area:note } #bbPhotomaton:where(.mm-mobile) .pm .pm-final .pm-panel>.pm-notes .pm-privacy { font-size:var(--font-size-xs);line-height:var(--line-height-xs) } /* ── Adaptations PrestaShop (en fin de fichier pour primer) ── */ /* Hero : toute la hauteur de l'écran (100 % du viewport), sur ordinateur comme sur mobile */ #bbPhotomaton .hero, #bbPhotomaton:not(.mm-mobile) .hero, #bbPhotomaton.mm-mobile .hero { height: 100vh; height: 100svh; min-height: 560px; } #bbPhotomaton .hero .hero__inner, #bbPhotomaton.mm-mobile .hero .hero__inner { height: 100%; min-height: 0; } /* Cabine : plein écran, moins la hauteur du header s'il reste collé en haut */ #bbPhotomaton .pm { min-height: calc(100svh - var(--bbpm-hs, 0px)); } @media (min-width: 761px) { #bbPhotomaton .pm:not(.pm--launch) { min-height: 100svh; } } /* Barre de progression de la séance : discrète, ne se confond plus avec les boutons */ /* iOS : pas de grossissement automatique du texte (la remise à zéro locale l'avait réactivé) */ #bbPhotomaton, #bbPhotomaton * { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; } /* Écrans tactiles : pas d'effets de survol qui restent « collés » après un toucher */ @media (hover: none) { #bbPhotomaton .pm-choice:hover, #bbPhotomaton .pm-choice + .pm-choice:hover { transform: none; } #bbPhotomaton .pm-choice:hover .pm-choice__go { transform: none; } #bbPhotomaton .pm-thumb:not(.is-selected):hover, #bbPhotomaton .pm-thumb:nth-child(2n):not(.is-selected):hover { transform: none; } #bbPhotomaton .pm-net:hover, #bbPhotomaton .pm-nav:hover { transform: none; } } /* ── Mobile : toute l'étape tient dans l'écran visible sous le header ── */ #bbPhotomaton.mm-mobile .pm:not(.pm--launch) { padding-top: var(--spacing-height-md); padding-bottom: var(--spacing-height-md); } #bbPhotomaton.mm-mobile .pm:not(.pm--launch) .pm__in { gap: var(--spacing-gap-md); } #bbPhotomaton.mm-mobile .pm .pm-steps { flex-wrap: nowrap; white-space: nowrap; } #bbPhotomaton.mm-mobile .pm .pm-booth, #bbPhotomaton.mm-mobile .pm .pm-final { row-gap: var(--spacing-gap-md); } #bbPhotomaton.mm-mobile .pm .pm-panel > .pm-panel__head:first-child { gap: var(--spacing-gap-xs); } /* Préparation : le titre de l'étape suffit, cartes plus compactes */ #bbPhotomaton.mm-mobile .pm .pm-screen__in--prep > .heading-title-md { display: none; } #bbPhotomaton.mm-mobile .pm .pm-screen__in.pm-screen__in--prep { padding: var(--spacing-height-sm); gap: var(--spacing-gap-sm); } #bbPhotomaton.mm-mobile .pm .pm-choice { padding: var(--spacing-height-md) var(--spacing-width-lg); } #bbPhotomaton.mm-mobile .pm .pm-choices { gap: var(--spacing-gap-sm); } /* Titres d'étape plus discrets sur mobile */ #bbPhotomaton.mm-mobile .pm .pm-panel > .pm-panel__head:first-child > h2, #bbPhotomaton.mm-mobile .pm .pm-plate .heading-title-md { font-size: var(--font-size-lg); line-height: var(--line-height-lg); } /* Étape Fond (mobile) : aperçu à gauche ; fonds 2 par 2 puis style à droite ; bouton en bas */ #bbPhotomaton.mm-mobile .pm .pm-booth--fond { grid-template-columns: minmax(0, 44fr) minmax(0, 56fr); grid-template-rows: auto auto 1fr auto; grid-template-areas: "title title" "screen fonds" "screen style" "cta cta"; column-gap: var(--spacing-gap-md); row-gap: var(--spacing-gap-md); } #bbPhotomaton.mm-mobile .pm .pm-booth--fond > .pm-panel, #bbPhotomaton.mm-mobile .pm .pm-booth--fond .pm-dock { display: contents; } #bbPhotomaton.mm-mobile .pm .pm-booth--fond > .pm-screen { grid-area: screen; display: flex; flex-direction: column; padding: var(--spacing-height-xs); min-height: 340px; } #bbPhotomaton.mm-mobile .pm .pm-booth--fond .pm-screen__in--glass { flex: 1 1 auto; height: auto; min-height: 0; padding: var(--spacing-height-xs); gap: 0; } #bbPhotomaton.mm-mobile .pm .pm-booth--fond .pm-preview { height: 100%; max-height: 100%; max-width: 50%; } #bbPhotomaton.mm-mobile .pm .pm-booth--fond .pm-nav { width: 28px; height: 28px; flex: none; } #bbPhotomaton.mm-mobile .pm .pm-booth--fond .pm-panel__fonds { grid-area: fonds; } #bbPhotomaton.mm-mobile .pm .pm-booth--fond .pm-panel__fonds .pm-thumbs { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--spacing-gap-sm); } #bbPhotomaton.mm-mobile .pm .pm-booth--fond .pm-dock > .pm-panel__head { grid-area: style; align-self: end; display: flex; flex-direction: column; align-items: stretch; gap: var(--spacing-gap-xs); min-width: 0; } #bbPhotomaton.mm-mobile .pm .pm-booth--fond .pm-dock > .pm-panel__head > .pm-label { display: block; } #bbPhotomaton.mm-mobile .pm .pm-booth--fond .pm-seg-wrap { width: 100%; } #bbPhotomaton.mm-mobile .pm .pm-booth--fond .pm-seg { flex: 1 1 0; padding-left: var(--spacing-width-xs); padding-right: var(--spacing-width-xs); } #bbPhotomaton.mm-mobile .pm .pm-booth--fond .pm-dock > .btn { grid-area: cta; } /* Étape Séance (mobile) : caméra agrandie, photos prises empilées à droite */ #bbPhotomaton.mm-mobile .pm--shoot .pm-booth { display: grid; grid-template-columns: minmax(0, 1fr) 72px; grid-template-rows: auto auto auto auto auto; grid-template-areas: "title title" "cam roll" "meter meter" "err err" "dock dock"; column-gap: var(--spacing-gap-sm); row-gap: var(--spacing-gap-md); } #bbPhotomaton.mm-mobile .pm--shoot .pm-booth > .pm-panel, #bbPhotomaton.mm-mobile .pm--shoot .pm-panel > .pm-panel__head:nth-child(2) { display: contents; } #bbPhotomaton.mm-mobile .pm--shoot .pm-panel > .pm-panel__head:first-child { grid-area: title; } #bbPhotomaton.mm-mobile .pm--shoot .pm-screen--cam { grid-area: cam; max-width: none; width: 100%; padding: var(--spacing-height-xs); } #bbPhotomaton.mm-mobile .pm--shoot .pm-screen__in.pm-screen__in--cam { aspect-ratio: auto; width: 100%; height: 320px; } #bbPhotomaton.mm-mobile .pm--shoot .pm-roll { grid-area: roll; grid-template-columns: minmax(0, 1fr); grid-template-rows: repeat(4, minmax(0, 1fr)); gap: var(--spacing-gap-sm); margin: 0; min-height: 0; padding: var(--spacing-height-xs) 0; } #bbPhotomaton.mm-mobile .pm--shoot .pm-roll__cell { aspect-ratio: auto; height: auto; min-height: 0; } #bbPhotomaton.mm-mobile .pm--shoot .pm-roll.pm-roll--n3 { grid-template-rows: repeat(3, minmax(0, 1fr)); } #bbPhotomaton.mm-mobile .pm--shoot .pm-roll__cell.is-full:nth-child(n) { transform: none; } #bbPhotomaton.mm-mobile .pm--shoot .pm-meter { grid-area: meter; } #bbPhotomaton.mm-mobile .pm--shoot .pm-panel > .fb { grid-area: err; } #bbPhotomaton.mm-mobile .pm--shoot .pm-dock { grid-area: dock; } /* Étape Tirage (mobile) : distributeur centré, aussi haut que l'écran le permet (compte à rebours au centre) */ #bbPhotomaton.mm-mobile .pm--print .pm-print { display: flex; justify-content: center; } #bbPhotomaton.mm-mobile .pm--print .pm-dispenser { width: min(100%, 260px); max-width: none; align-self: center; padding: var(--spacing-height-xs); } #bbPhotomaton.mm-mobile .pm--print .pm-dispenser__tray { height: 460px; } #bbPhotomaton.mm-mobile .pm--print .pm-print__n { font-size: var(--font-size-6xl); line-height: var(--line-height-6xl); } /* Étape Partage (mobile) : plus d'air sous le titre, zone de partage plus étroite et centrée */ #bbPhotomaton.mm-mobile .pm--final .pm-final { grid-template-columns: minmax(0, 1fr) 200px; } #bbPhotomaton.mm-mobile .pm--final .pm-final .pm-panel > .pm-panel__head:first-child { margin-bottom: var(--spacing-gap-md); } #bbPhotomaton.mm-mobile .pm--final .pm-final > .pm-final__stage { justify-self: center; } #bbPhotomaton.mm-mobile .pm--final .pm-final .pm-panel > .pm-panel__head:not(:first-child) { align-items: center; text-align: center; margin-top: var(--spacing-gap-md); } #bbPhotomaton.mm-mobile .pm--final .pm-final .pm-nets { justify-content: center; margin-bottom: var(--spacing-gap-sm); } #bbPhotomaton.mm-mobile .pm--final .pm-final .pm-panel > .pm-notes { align-self: end; gap: var(--spacing-gap-md); } #bbPhotomaton.mm-mobile .pm--final .pm-final .pm-panel > .pm-notes .pm-privacy { flex-direction: column; align-items: center; justify-content: center; text-align: center; gap: var(--spacing-gap-xs); } /* Fond « Singles' Day » : rose et cœurs roses */ #bbPhotomaton .pm-f--singles { background-color: #F8D7E3; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='40' viewBox='0 0 40 40'%3E%3Cg fill='%23EC7FA9'%3E%3Cpath transform='translate(-9 -9) scale(.75)' d='M12 21s-7.5-4.6-10-9.3C.4 8.6 2.1 4.5 6 4.5c2.3 0 3.8 1.4 6 3.6 2.2-2.2 3.7-3.6 6-3.6 3.9 0 5.6 4.1 4 7.2C19.5 16.4 12 21 12 21z'/%3E%3Cpath transform='translate(11 11) scale(.75)' d='M12 21s-7.5-4.6-10-9.3C.4 8.6 2.1 4.5 6 4.5c2.3 0 3.8 1.4 6 3.6 2.2-2.2 3.7-3.6 6-3.6 3.9 0 5.6 4.1 4 7.2C19.5 16.4 12 21 12 21z'/%3E%3Cpath transform='translate(31 -9) scale(.75)' d='M12 21s-7.5-4.6-10-9.3C.4 8.6 2.1 4.5 6 4.5c2.3 0 3.8 1.4 6 3.6 2.2-2.2 3.7-3.6 6-3.6 3.9 0 5.6 4.1 4 7.2C19.5 16.4 12 21 12 21z'/%3E%3Cpath transform='translate(-9 31) scale(.75)' d='M12 21s-7.5-4.6-10-9.3C.4 8.6 2.1 4.5 6 4.5c2.3 0 3.8 1.4 6 3.6 2.2-2.2 3.7-3.6 6-3.6 3.9 0 5.6 4.1 4 7.2C19.5 16.4 12 21 12 21z'/%3E%3Cpath transform='translate(31 31) scale(.75)' d='M12 21s-7.5-4.6-10-9.3C.4 8.6 2.1 4.5 6 4.5c2.3 0 3.8 1.4 6 3.6 2.2-2.2 3.7-3.6 6-3.6 3.9 0 5.6 4.1 4 7.2C19.5 16.4 12 21 12 21z'/%3E%3C/g%3E%3C/svg%3E"); background-size: 14% auto; background-repeat: repeat; color: var(--color-foreground-neutral-10); } #bbPhotomaton .pm-thumb .pm-f--singles { background-size: 9px 9px; } /* 6 fonds sur ordinateur / tablette : une ligne de 6 vignettes */ #bbPhotomaton:not(.mm-mobile) .pm .pm-thumbs { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--spacing-gap-sm); } /* Mobile — Fond : les 6 fonds occupent toute la hauteur libre, « Choisissez votre style » centré */ #bbPhotomaton.mm-mobile .pm .pm-booth--fond { grid-template-rows: auto minmax(0, 1fr) auto auto; } #bbPhotomaton.mm-mobile .pm .pm-booth--fond .pm-panel__fonds { display: flex; flex-direction: column; min-height: 0; } #bbPhotomaton.mm-mobile .pm .pm-booth--fond .pm-panel__fonds .pm-thumbs { flex: 1 1 auto; height: auto; grid-template-rows: repeat(2, minmax(0, 1fr)); align-content: stretch; } #bbPhotomaton.mm-mobile .pm .pm-booth--fond .pm-panel__fonds .pm-thumb { min-height: 0; } #bbPhotomaton.mm-mobile .pm .pm-booth--fond .pm-panel__fonds .pm-thumb .pm-strip { height: auto; flex: 1 1 0; min-height: 14px; } #bbPhotomaton.mm-mobile .pm .pm-booth--fond .pm-dock > .pm-panel__head { align-self: center; align-items: center; text-align: center; margin: var(--spacing-height-md) 0; } /* Mobile — Séance : caméra et miniatures au format 4:3 */ #bbPhotomaton.mm-mobile .pm--shoot .pm-booth { grid-template-columns: minmax(0, 1fr) 64px; align-items: center; } #bbPhotomaton.mm-mobile .pm--shoot .pm-screen__in.pm-screen__in--cam { aspect-ratio: 4 / 3; width: 100%; height: auto; } #bbPhotomaton.mm-mobile .pm--shoot .pm-roll { grid-template-rows: none; height: auto; align-self: center; padding: 0; } #bbPhotomaton.mm-mobile .pm--shoot .pm-roll__cell { aspect-ratio: 4 / 3; height: auto; } #bbPhotomaton.mm-mobile .pm--shoot .pm-booth .pm-screen--cam { padding: var(--spacing-height-xs); } #bbPhotomaton.bbpm-fit .pm--shoot .pm-booth .pm-screen--cam { width: auto; max-width: 100%; justify-self: center; } #bbPhotomaton.bbpm-fit .pm--shoot .pm-screen__in.pm-screen__in--cam { height: var(--bbpm-fit); width: var(--bbpm-fitw, 100%); max-width: 100%; aspect-ratio: auto; margin: 0; } /* Mobile — Partage : plus d'air, zone de partage décollée du bord droit */ #bbPhotomaton.mm-mobile .pm--final .pm-final .pm-panel > .pm-panel__head:first-child { margin-bottom: var(--spacing-gap-lg); } #bbPhotomaton.mm-mobile .pm--final .pm-final > .pm-final__stage { margin-bottom: var(--spacing-gap-lg); } #bbPhotomaton.mm-mobile .pm--final .pm-final { grid-template-columns: minmax(0, 1fr) 192px; } #bbPhotomaton.mm-mobile .pm--final .pm-final .pm-panel > .pm-panel__head:not(:first-child), #bbPhotomaton.mm-mobile .pm--final .pm-final .pm-panel > .pm-notes .pm-privacy { padding-right: var(--spacing-width-sm); } #bbPhotomaton.mm-mobile .pm--final .pm-final .pm-panel > .pm-panel__head:not(:first-child) { gap: var(--spacing-gap-md); } #bbPhotomaton.mm-mobile .pm--final .pm-final .pm-nets { margin-bottom: 0; } /* ===== Mobile (v4.2) ===== */ /* Partage : bannière Singles' Day plus aérée */ #bbPhotomaton.mm-mobile .pm--final .pm-final .pm-promo { padding: var(--spacing-height-lg) var(--spacing-width-lg); } #bbPhotomaton.mm-mobile .pm--final .pm-final .pm-promo img { width: 76%; max-width: none; height: auto; margin: 0 auto; } /* Fond : pellicule plus large, fonds un peu plus étroits ; la pellicule garde ses proportions (plus de fond qui s'étire sous le logo) */ #bbPhotomaton.mm-mobile .pm .pm-booth--fond { grid-template-columns: minmax(0, 58fr) minmax(0, 42fr); } #bbPhotomaton.mm-mobile .pm .pm-booth--fond .pm-screen__in--glass { display: flex; align-items: center; justify-content: center; } #bbPhotomaton.mm-mobile .pm .pm-booth--fond .pm-preview { height: 100%; max-height: 100%; width: auto; aspect-ratio: 600 / 2028; max-width: none; flex: none; } #bbPhotomaton.mm-mobile .pm .pm-booth--fond .pm-preview .pm-strip { height: 100%; width: 100%; } /* Séance : ni aperçus ni compteur sur mobile, la caméra prend la place ; cadre aux marges Meridian */ #bbPhotomaton.mm-mobile .pm--shoot .pm-roll, #bbPhotomaton.mm-mobile .pm--shoot .pm-meter { display: none; } #bbPhotomaton.mm-mobile .pm--shoot .pm-booth { grid-template-areas: "title" "cam" "err" "dock"; grid-template-rows: auto auto auto auto; } #bbPhotomaton.mm-mobile .pm--shoot .pm-booth .pm-screen--cam { padding: var(--spacing-height-xs); display: block; } #bbPhotomaton.mm-mobile .pm--shoot .pm-screen__in.pm-screen__in--cam { width: 100%; height: auto; aspect-ratio: 4 / 3; max-width: none; min-height: 0; } #bbPhotomaton.mm-mobile .pm--shoot .pm-booth { row-gap: var(--spacing-gap-md); align-content: start; } /* séance mobile : pas de rangées vides (bande, progression) entre la caméra et les réglages ; réglages bien espacés */ #bbPhotomaton.mm-mobile .pm.pm--shoot .pm-booth.pm-booth { grid-template-areas: "title" "cam" "dock" "err"; grid-template-rows: auto auto auto auto; row-gap: var(--spacing-gap-lg); } #bbPhotomaton.mm-mobile .pm.pm--shoot .pm-booth .pm-dock { gap: var(--spacing-gap-lg); } @media (max-height: 700px) { #bbPhotomaton.mm-mobile .pm.pm--shoot .pm-booth.pm-booth, #bbPhotomaton.mm-mobile .pm.pm--shoot .pm-booth .pm-dock { row-gap: var(--spacing-gap-md); gap: var(--spacing-gap-md); } } @media (min-width: 481px) { #bbPhotomaton.mm-mobile .pm.pm--shoot .pm-booth .pm-screen--cam { justify-self: center; width: 100%; max-width: min(100%, calc((100svh - 420px) * 4 / 3)); margin-inline: auto; } } #bbPhotomaton.mm-mobile .pm:not(.pm--launch) { padding-bottom: calc(var(--spacing-height-md) + var(--bbpm-bottom-safe, 0px)); } /* ===== Mobile (v4.1) : les étapes remplissent la hauteur disponible ===== */ /* Fond : aperçu à gauche, les 4 fonds empilés à droite sur toute la hauteur, bouton en bas */ #bbPhotomaton.mm-mobile .pm .pm-booth--fond { grid-template-rows: auto minmax(0, 1fr) auto; grid-template-areas: "title title" "screen fonds" "cta cta"; } #bbPhotomaton.mm-mobile .pm .pm-booth--fond .pm-panel__fonds { align-self: stretch; } #bbPhotomaton.mm-mobile .pm .pm-booth--fond .pm-panel__fonds .pm-thumbs { grid-template-columns: minmax(0, 1fr); grid-template-rows: repeat(4, minmax(0, 1fr)); height: 100%; } #bbPhotomaton.mm-mobile .pm .pm-booth--fond .pm-panel__fonds .pm-thumb { display: flex; flex-direction: column; } #bbPhotomaton.mm-mobile .pm .pm-booth--fond > .pm-screen { min-height: 0; } /* Séance : caméra en grand, aperçus des photos dessous, puis la progression */ #bbPhotomaton.mm-mobile .pm--shoot .pm-booth { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto auto auto auto auto auto; grid-template-areas: "title" "cam" "roll" "meter" "err" "dock"; align-items: stretch; } #bbPhotomaton.mm-mobile .pm--shoot .pm-booth .pm-screen--cam { justify-self: stretch; width: 100%; max-width: 100%; box-sizing: border-box; display: flex; justify-content: center; align-items: center; } #bbPhotomaton.mm-mobile .pm--shoot .pm-screen__in.pm-screen__in--cam { min-width: 0; min-height: 120px; } #bbPhotomaton.mm-mobile .pm--shoot .pm-roll, #bbPhotomaton.mm-mobile .pm--shoot .pm-roll.pm-roll--n3 { grid-template-columns: repeat(4, minmax(0, 1fr)); grid-template-rows: none; align-self: auto; height: auto; padding: 0; } #bbPhotomaton.mm-mobile .pm--shoot .pm-roll.pm-roll--n3 { grid-template-columns: repeat(3, calc((100% - 3 * var(--spacing-gap-sm)) / 4)); justify-content: center; } #bbPhotomaton.mm-mobile .pm--shoot .pm-roll__cell { aspect-ratio: 4 / 3; height: auto; } #bbPhotomaton.mm-mobile .pm--shoot .pm-roll, #bbPhotomaton.mm-mobile .pm--shoot .pm-roll.pm-roll--n3 { grid-template-columns: repeat(var(--pm-n, 4), 64px); justify-content: center; } #bbPhotomaton.mm-mobile .pm--shoot .pm-roll.pm-roll--n3 { --pm-n: 3; } #bbPhotomaton.mm-mobile .pm--shoot .pm-panel > .pm-panel__head:first-child > .pm-muted { display: none; } /* Préparation : la carte des choix occupe toute la largeur */ #bbPhotomaton.mm-mobile .pm--prep .pm-booth > .pm-screen { padding: var(--spacing-height-xs); } #bbPhotomaton.mm-mobile .pm .pm-screen__in.pm-screen__in--prep { width: 100%; max-width: none; align-self: stretch; overflow: hidden; } #bbPhotomaton.mm-mobile .pm .pm-screen__in--prep .pm-choices { width: 100%; grid-template-columns: minmax(0, 1fr); } #bbPhotomaton.mm-mobile .pm .pm-screen__in--prep .pm-choice { width: auto; min-width: 0; max-width: 100%; justify-self: stretch; transform: none; } /* Ajustement automatique (photomaton.js) : l'élément principal de l'étape prend la hauteur restante */ #bbPhotomaton.bbpm-fit .pm .pm-booth--fond > .pm-screen { min-height: var(--bbpm-fit); } #bbPhotomaton.bbpm-t1 .pm .pm-booth--fond .pm-thumb .pm-strip { height: 16px; } #bbPhotomaton.bbpm-t1 .pm .pm-booth--fond .pm-thumbs { gap: var(--spacing-gap-xs); } #bbPhotomaton.bbpm-fit .pm .pm-screen__in.pm-screen__in--cam { height: var(--bbpm-fit); } #bbPhotomaton.bbpm-fit .pm .pm-dispenser__tray { height: var(--bbpm-fit); } #bbPhotomaton.bbpm-fit .pm .pm-final__strip { max-height: var(--bbpm-fit); } /* Écrans très courts : on retire le secondaire, par paliers */ #bbPhotomaton.bbpm-t1 .pm .pm-panel > .pm-panel__head:first-child > .pm-muted { display: none; } #bbPhotomaton.bbpm-t1 .pm:not(.pm--shoot) .pm-roll { margin-bottom: 0; gap: var(--spacing-gap-sm); } #bbPhotomaton.bbpm-t1 .pm:not(.pm--shoot) .pm-roll__cell { aspect-ratio: auto; height: 36px; } #bbPhotomaton.bbpm-t1 .pm .pm-screen { padding: var(--spacing-height-xs); } #bbPhotomaton.bbpm-t2 .pm .pm-privacy:not(.pm-privacy--group), #bbPhotomaton.bbpm-t2 .pm .pm-info { display: none; } /* mention « Vous posez à plusieurs ? » : toujours visible, en plus compact sur les petits écrans */ #bbPhotomaton.bbpm-t2 .pm .pm-privacy--group { font-size: var(--font-size-xs); line-height: var(--line-height-xs); gap: var(--spacing-gap-sm); } #bbPhotomaton.bbpm-t2 .pm .pm-privacy--group .arr { width: 16px; height: 16px; flex: 0 0 16px; } #bbPhotomaton.bbpm-t2 .pm:not(.pm--shoot) .pm-roll { display: none; } #bbPhotomaton.bbpm-t2 .pm .pm-choice { padding: var(--spacing-height-sm) var(--spacing-width-md); } /* Bouton « retour en haut » du thème masqué dans la cabine (classe posée sur par photomaton.js) */ html.bbpm-open .btn-retour-overall { display: none !important; } #bbPhotomaton .pm .pm-meter { height: 24px; background: var(--color-background-neutral-1); box-shadow: inset 0 0 0 var(--line-stroke-base) var(--color-border-neutral-2); } #bbPhotomaton .pm .pm-meter__bar { background: var(--color-background-neutral-3); } #bbPhotomaton .pm .pm-meter__txt { mix-blend-mode: normal; color: var(--color-foreground-neutral-7); font-weight: var(--font-weight-base); font-size: var(--font-size-sm); line-height: var(--line-height-sm); }