body.vitrine-page .phone-device{position:relative;container-type:inline-size;transform-origin:50% 70%}
body.vitrine-page .phone-device>img{display:block}
body.vitrine-page .phone-reading{position:absolute;left:20.15%;top:17.99%;width:28.2%;height:4.92%;display:flex;align-items:center;gap:.7cqi;background:linear-gradient(#fcfcfc,#fbfbfb);color:#e91646;font:750 9.4cqi/1 system-ui,sans-serif;letter-spacing:-.05em}
body.vitrine-page .phone-reading small{font:700 3.2cqi/1 system-ui,sans-serif;letter-spacing:0;align-self:center;margin-top:2.7cqi}
body.vitrine-page .phone-target{position:absolute;left:20.15%;top:23.25%;width:39%;height:2.1%;display:flex;align-items:center;background:#fcfcfc;color:#82908f;font:500 2.9cqi/1 system-ui,sans-serif;white-space:nowrap}
/* Ce masque suit l'écran réel de la photo, y compris pendant la vibration. */
body.vitrine-page .phone-screen-overlay{position:absolute;inset:5.4% 13.9% 6.4% 14%;border-radius:11% / 5%;overflow:hidden;pointer-events:none}
body.vitrine-page .phone-notification{box-sizing:border-box;position:absolute;z-index:1;left:3%;top:7.5%;width:94%;padding:clamp(8px,3.6cqi,11px);border:1px solid #ffffffcc;border-radius:clamp(10px,4.5cqi,14px);background:#fffef7f2;backdrop-filter:blur(14px);box-shadow:0 5px 12px #00121933;color:#001219;text-align:left;line-height:1.35;overflow-wrap:anywhere}
body.vitrine-page .phone-notification[hidden]{display:none}
body.vitrine-page .phone-notification-app{display:flex;gap:5px;align-items:center;font-size:clamp(7px,2.9cqi,9px);font-weight:800;letter-spacing:.025em;margin-bottom:9px}
body.vitrine-page .phone-notification-icon{display:grid;place-items:center;flex:none;width:22px;height:22px;background:#005f73;border-radius:6px;color:#fffaf0}
body.vitrine-page .phone-notification-icon svg{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
body.vitrine-page .phone-notification>strong{display:block;font:400 clamp(12px,5.2cqi,16px)/1.15 'Titan One',sans-serif;margin-bottom:8px}
body.vitrine-page .phone-notification>p{font-size:clamp(11px,4.2cqi,13px);line-height:1.4;margin:0}
body.vitrine-page .phone-notification>p b{color:#e91646}
body.vitrine-page .phone-notification-time{display:block;font-size:clamp(8px,3.3cqi,10px);color:#526867;margin-top:8px}
body.vitrine-page .phone-device.is-receiving{animation:phone-message-vibration .75s ease-in-out}
body.vitrine-page .phone-device.is-receiving .phone-notification{animation:phone-message-arrival .55s cubic-bezier(.2,.8,.2,1) both}
body.vitrine-page .phone-demo-caption{text-align:center;margin-top:10px;color:#526867;font-size:11px}
@keyframes phone-message-vibration{0%,100%{transform:translateX(0) rotate(0)}12%,36%,60%{transform:translateX(-2px) rotate(-1deg)}24%,48%,72%{transform:translateX(2px) rotate(1deg)}84%{transform:translateX(-1px) rotate(-.4deg)}}
@keyframes phone-message-arrival{from{opacity:0;transform:translateY(-18px) scale(.96)}to{opacity:1;transform:translateY(0) scale(1)}}
@media(prefers-reduced-motion:reduce){body.vitrine-page .phone-device.is-receiving,body.vitrine-page .phone-device.is-receiving .phone-notification{animation:none}}