/* A single mobile canvas at every viewport width. No desktop composition. */
:root:has(.sh-welcome) { color-scheme: light; }
body:has(.sh-welcome) { padding: 0; background: #e9e8ec; }
.app-shell:has(.sh-welcome) { width: 100%; max-width: 430px; min-height: 100svh; border-radius: 0; box-shadow: none; overflow: clip; background: #f6f4f7; }
/* Motion contract: the renderer may animate the two Y positions, opacities,
   blurs. Read type metrics from each data-*-copy span. */
.sh-welcome { --welcome-surface: #f6f4f7; --welcome-ink: #17151b; --welcome-muted: #777376; --welcome-blue: var(--azure, #0071e3); --intro-opacity: 1; --final-opacity: 0; --actions-opacity: 0; --intro-y: 50%; --final-y: 50.3%; --intro-blur: 0px; --final-blur: 0px; --intro-size: min(32px, 7.44186cqw); --action-height: max(44px, min(60px, 13.953488cqw)); position: relative; isolation: isolate; container-type: inline-size; width: 100%; min-height: 480px; height: 100svh; color: var(--welcome-ink); background: var(--welcome-surface); font-family: 'Inter', sans-serif; letter-spacing: -.025em; }
.sh-welcome *, .sh-welcome *::before, .sh-welcome *::after { box-sizing: border-box; }
.sh-welcome [hidden] { display: none !important; }
.sh-welcome button, .sh-welcome a { -webkit-tap-highlight-color: transparent; }
.sh-welcome button { cursor: pointer; font: inherit; }
.sh-welcome button:focus-visible, .sh-welcome a:focus-visible { outline: 2px solid var(--welcome-blue); outline-offset: 4px; }
.sh-welcome[data-input="keyboard"] button:focus, .sh-welcome[data-input="keyboard"] a:focus { outline: 2px solid var(--welcome-blue); outline-offset: 4px; }
.sh-welcome[data-input="pointer"] button:focus-visible, .sh-welcome[data-input="pointer"] a:focus-visible { outline: none; }
.sh-welcome svg { stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; fill: none; }
.sh-welcome__logo { position: absolute; z-index: 2; top: min(30%, calc(var(--intro-y) - var(--intro-size) * 1.25 - 28px - 20.31cqw)); left: 16%; width: 68%; height: auto; opacity: var(--intro-opacity); pointer-events: none; }
.sh-welcome__scene { position: absolute; inset: 0; z-index: 1; overflow: hidden; touch-action: none; user-select: none; -webkit-user-select: none; }
.sh-welcome__scene canvas { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; }
.sh-welcome.is-glass-ready .sh-welcome__scene canvas { opacity: 1; }
.sh-welcome__fallback-bubbles { position: absolute; inset: 0; }
.sh-welcome__fallback-bubbles img { position: absolute; left: 0; top: 0; width: 80px; height: 80px; object-fit: cover; border-radius: 50%; opacity: 0; box-shadow: inset 0 0 6px white, 0 3px 10px #21153420; will-change: transform; }
.sh-welcome.is-glass-ready .sh-welcome__fallback-bubbles { visibility: hidden; }
.sh-welcome__dome { position: absolute; width: 150%; aspect-ratio: 1; left: -25%; top: calc(107.5% - 75cqw); border: 1px solid #fff; border-radius: 50%; background: radial-gradient(ellipse at 50% 6%, #ffffff88, #ffffff03 48%); box-shadow: inset 0 6px 8px #fff9, inset 0 -4px 10px #d0cde366, 0 -5px 20px #eeeaf53d; }
.sh-welcome__dome::before { content: ''; position: absolute; inset: 0; border-radius: inherit; box-shadow: inset 0 0 var(--halo-depth, 0px) rgb(26 169 255 / var(--halo-opacity, 0)); }
.sh-welcome__dome::after { content: ''; position: absolute; inset: -2px; padding: 3px; border-radius: inherit; background: linear-gradient(140deg, #50d9ff, #6290fa 55%, #8570fc); -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0); mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0); -webkit-mask-composite: xor; mask-composite: exclude; filter: blur(1px); }
.sh-welcome.is-glass-ready .sh-welcome__dome { visibility: hidden; }
/* Mascotte assise sur le rond : taille et position écrites par le script (transform), au-dessus du canvas et du dôme. */
.sh-welcome__mascot { position: absolute; left: 0; top: 0; width: 100px; height: auto; object-fit: contain; object-position: center bottom; opacity: 0; pointer-events: none; user-select: none; -webkit-user-select: none; will-change: transform, opacity; filter: drop-shadow(0 8px 14px #21153426); }
.sh-welcome__headline { margin: 0; font-size: var(--intro-size); font-weight: 600; letter-spacing: -.045em; text-align: center; }
.sh-welcome__intro-copy, .sh-welcome__final-copy { position: absolute; left: 6%; right: 6%; display: block; pointer-events: none; }
.sh-welcome__intro-copy { top: var(--intro-y); transform: translateY(-50%); opacity: var(--intro-opacity); font-size: var(--intro-size); line-height: 1.25; filter: blur(var(--intro-blur)); }
.sh-welcome__final-copy { top: var(--final-y); opacity: var(--final-opacity); font-size: min(32px, 7.44186cqw); font-weight: 600; letter-spacing: -.045em; line-height: 1.22; filter: blur(var(--final-blur)); }
.sh-welcome.is-glass-ready .sh-welcome__headline { color: transparent; }
.sh-welcome__enter { position: absolute; z-index: 3; bottom: 0; height: 30%; width: 100%; border: 0; padding: 0 24px max(calc(9.4svh + env(safe-area-inset-bottom, 0px)), 40px); display: flex; flex-direction: column; align-items: center; justify-content: end; color: var(--welcome-muted); background: none; touch-action: none; opacity: var(--intro-opacity); font-size: min(16px, 3.72093cqw) !important; font-weight: 600 !important; letter-spacing: -.025em; }
.sh-welcome__enter:focus-visible { outline-offset: -8px !important; border-radius: 50% 50% 0 0; }
.sh-welcome__actions { position: absolute; z-index: 3; left: 6%; right: 6%; bottom: calc(32px + env(safe-area-inset-bottom, 0px)); opacity: var(--actions-opacity); transform: translateY(calc((1 - var(--actions-opacity)) * 12px)); }
.sh-welcome__salon { position: absolute; left: 0; right: 0; bottom: calc(100% + 12px); margin: 0; text-align: center; color: var(--welcome-muted); font-size: 10px; line-height: 1.3; }
.sh-welcome__salon img { display: block; width: auto; max-width: 140px; height: 28px; object-fit: contain; margin: 0 auto; }
.sh-welcome__cta { display: flex; justify-content: center; align-items: center; gap: 18px; width: 100%; min-height: var(--action-height); border: 1px solid #ffffff55; border-radius: 999px; background: var(--welcome-blue); color: #fff; padding: 12px 20px; font-size: min(16px, 3.72093cqw) !important; font-weight: 600 !important; box-shadow: inset 0 1px 0 #ffffff44, 0 2px 3px #21153416; transition: transform 120ms ease-out; }
.sh-welcome__actions > .sh-welcome__cta { height: var(--action-height); }
.sh-welcome__cta:active { transform: scale(.97); }
.sh-welcome__cta:disabled { opacity: .6; cursor: wait; }
.sh-welcome__reassurance { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; list-style: none; margin: 18px 0 12px; padding: 0; letter-spacing: -.03em; }
.sh-welcome__reassurance li { display: flex; align-items: center; justify-content: center; gap: 7px; padding: 9px 12px; border-radius: 999px; background: #fff; font-size: min(12px, 2.9cqw); line-height: 1.25; box-shadow: 0 3px 8px #2115340d, 0 1px 2px #2115340b; }
.sh-welcome__reassurance svg { flex-shrink: 0; width: 16px; height: 16px; color: var(--welcome-blue); }
.sh-welcome__privacy { display: block; padding: 0 8px; color: var(--welcome-muted); font-size: min(11px, 2.7cqw); line-height: 1.5; text-align: center; text-decoration: none; letter-spacing: -.015em; }
.sh-welcome__dialog { width: min(390px, calc(100% - 32px)); max-height: calc(100svh - 48px); border: 1px solid #d8d4de; border-radius: 28px; padding: 40px 24px 24px; color: var(--welcome-ink); background: var(--welcome-surface); overscroll-behavior: contain; box-shadow: 0 24px 90px #15102240; }
.sh-welcome__dialog::backdrop { background: #17121f66; backdrop-filter: blur(8px); }
.sh-welcome__dialog[open] { animation: sh-sheet-in 220ms cubic-bezier(.23,1,.32,1); }
.sh-welcome__dialog h2 { font-size: 27px; font-weight: 600; line-height: 1.15; letter-spacing: -.05em; margin: 0 0 24px; }
.sh-welcome__dialog > p { color: var(--welcome-muted); font-size: 14px; line-height: 1.6; }
.sh-welcome__eyebrow { color: var(--welcome-muted); font-size: 9px !important; font-weight: 600; letter-spacing: .1em; margin: 0 0 16px; }
.sh-welcome__close { position: absolute; top: 8px; right: 8px; width: 44px; height: 44px; border-radius: 50%; border: 0; background: transparent; color: var(--welcome-muted); font-size: 28px !important; }
.sh-welcome__privacy-note { margin: 24px 0; font-size: 11px !important; }
.sh-welcome__notice { position: absolute; left: 0; right: 0; bottom: calc(100% + 44px); margin: 0; font-size: 12px; line-height: 1.5; padding: 12px; border: 1px solid currentColor; border-radius: 12px; background: var(--welcome-surface); }
body:has(.sh-welcome) .lang-fab { top: calc(5px + env(safe-area-inset-top, 0px)); bottom: auto; transform: scale(.75); transform-origin: top right; }
body:has(.sh-welcome[data-phase="intro"]) .lang-fab, body:has(.sh-welcome[data-phase="transition"]) .lang-fab { visibility: hidden; }
@keyframes sh-sheet-in { from { opacity: 0; transform: translateY(12px); } }
@media (max-height: 650px) and (min-aspect-ratio: 3/5) {
    .sh-welcome { --action-height: 44px; }
    .sh-welcome__final-copy { font-size: min(28px, 7.44186cqw); }
    .sh-welcome__reassurance { gap: 6px; margin: 12px 0 10px; }
    .sh-welcome__reassurance li { padding: 6px 10px; }
    .sh-welcome__privacy { font-size: min(10px, 2.7cqw); }
}
@media (prefers-reduced-motion: reduce) {
    .sh-welcome *, .sh-welcome *::before, .sh-welcome *::after { animation: none !important; transition: none !important; }
    .sh-welcome__cta:active { transform: none; }
}
@media (forced-colors: active) {
    .sh-welcome__scene canvas { display: none; }
    .sh-welcome.is-glass-ready .sh-welcome__headline { color: CanvasText; }
    .sh-welcome.is-glass-ready .sh-welcome__fallback-bubbles, .sh-welcome.is-glass-ready .sh-welcome__dome { visibility: visible; }
    .sh-welcome__cta { border: 2px solid ButtonText; }
}