/* ==========================================================================
   DEVICES IN 3D — the quality of the Collection's transformation, for the stage of « On en parle ? »:
   a screen with a body (a back plate set back in depth, its edges catching the light), a real bezel and Safari bar,
   the glass with a sheen that sweeps it, a soft shadow on the floor. GSAP moves and turns the outer element
   (.cs-site, .cs-app, .cs-win); the 3D tilt lives on the inner .d3, so the two never fight.
   ========================================================================== */
.cs-site, .cs-app, .cs-win { perspective: 1400px; background: none !important; box-shadow: none !important; border-radius: 0 !important; overflow: visible !important; padding: 0 !important; aspect-ratio: auto !important; }
.d3 { position: relative; container-type: inline-size; transform-style: preserve-3d; }
.d3-face { position: relative; transform-style: preserve-3d; }
.d3-back { position: absolute; inset: 0; transform-style: preserve-3d; background: linear-gradient(135deg, #34303a, #0d0c0e 62%); }
.d3-glare { position: absolute; z-index: 5; pointer-events: none; overflow: hidden; }
.d3-glare::before { content: ""; position: absolute; inset: 0; background: linear-gradient(118deg, rgba(255, 255, 255, .2) 0%, rgba(255, 255, 255, .04) 26%, rgba(255, 255, 255, 0) 40%); }
.d3-glare::after { content: ""; position: absolute; top: -30%; bottom: -30%; left: -50%; width: 30%; background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .26), transparent); transform: skewX(-14deg); animation: d3-sweep 6.5s ease-in-out infinite; }
@keyframes d3-sweep { 0%, 55% { left: -50%; } 88%, 100% { left: 140%; } }
.d3-floor { position: absolute; z-index: -1; left: 6%; right: 6%; top: 100%; height: 26%; margin-top: 3%; border-radius: 50%; pointer-events: none; background: radial-gradient(50% 50% at 50% 50%, rgba(20, 18, 21, .38), rgba(20, 18, 21, 0) 70%); filter: blur(6px); }

/* the laptop screen: turned to the left, tipped back; a 3cqw thick body */
.d3-pc { transform: rotateY(-18deg) rotateX(7deg); }
.d3-pc .d3-back { border-radius: 3.2cqw 3.2cqw 1.8cqw 1.8cqw; transform: translateZ(-3.2cqw); box-shadow: 0 0 0 1px rgba(255, 255, 255, .06); }
.d3-pc .d3-back::before, .d3-pc .d3-back::after { content: ""; position: absolute; }
.d3-pc .d3-back::after { top: 2.5%; bottom: 2.5%; left: 100%; width: 3.2cqw; transform-origin: 0 50%; transform: rotateY(90deg); background: linear-gradient(90deg, #6a6470, #2a272d 40%, #141215); border-radius: 0 1cqw 1cqw 0; }
.d3-pc .d3-back::before { left: 2.5%; right: 2.5%; bottom: 100%; height: 3.2cqw; transform-origin: 50% 100%; transform: rotateX(-90deg); background: linear-gradient(0deg, #6a6470, #2a272d 40%, #141215); border-radius: 1cqw 1cqw 0 0; }
.d3-pc .d3-face { padding: 1.7cqw 1.7cqw 2cqw; border-radius: 3.2cqw 3.2cqw 1.8cqw 1.8cqw;
  background: radial-gradient(circle at 50% .9cqw, #2C2A31 .3cqw, #121014 .42cqw, transparent .52cqw), #1B191C;
  box-shadow: inset 0 0 0 .24cqw #5a545e, inset 0 0 0 .45cqw #0E0D0F, inset .2cqw .2cqw 0 .5cqw rgba(255, 255, 255, .04), 0 2.2cqw 4cqw -1.2cqw rgba(20, 18, 21, .5); }
.d3-bar { position: relative; display: flex; align-items: center; gap: .9cqw; height: 4.6cqw; margin: 0; padding: 0 1.8cqw; border-radius: 1cqw 1cqw 0 0; background: linear-gradient(#F8F5EF, #ECE7DE); border-bottom: 1px solid rgba(20, 18, 21, .1); }
.d3-bar i { width: 1.25cqw; height: 1.25cqw; border-radius: 50%; background: #FF5F57; box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .12); }
.d3-bar i:nth-child(2) { background: #FEBC2E; } .d3-bar i:nth-child(3) { background: #28C840; }
.d3-bar span { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); min-width: 34%; padding: .55cqw 3cqw; border-radius: .9cqw; background: #fff; color: #4a454c; font: 500 1.75cqw/1.2 var(--text, sans-serif); text-align: center; white-space: nowrap; box-shadow: 0 0 0 1px rgba(20, 18, 21, .07), 0 1px 2px rgba(20, 18, 21, .06); }
.d3-pc .d3-scr { position: relative; overflow: hidden; border-radius: 0 0 1cqw 1cqw; background: #fff; }
.d3-pc .d3-scr img { display: block; width: 100%; aspect-ratio: 1.6; height: auto; object-fit: cover; object-position: top; }
.d3-pc .d3-glare { inset: 1.7cqw 1.7cqw 2cqw; border-radius: 1cqw; }

/* the phone: turned to the right, a 6cqw thick body, its side buttons on the edge */
.d3-ph { transform: rotateY(20deg) rotateX(5deg); aspect-ratio: .49; }
.d3-ph .d3-back { border-radius: 17cqw; transform: translateZ(-6cqw); }
.d3-ph .d3-back::after { content: ""; position: absolute; top: 5%; bottom: 5%; right: 100%; width: 6cqw; transform-origin: 100% 50%; transform: rotateY(-90deg); background: linear-gradient(270deg, #6a6470, #2a272d 40%, #141215); border-radius: 2cqw 0 0 2cqw; }
.d3-ph .d3-face { height: 100%; padding: 3.6cqw; border-radius: 17cqw; background: #1B191C;
  box-shadow: inset 0 0 0 1cqw #5a545e, inset 0 0 0 1.8cqw #0E0D0F, inset 1.6cqw 1.2cqw 0 1.8cqw rgba(255, 255, 255, .04), 0 6cqw 10cqw -3cqw rgba(20, 18, 21, .5); }
.d3-isl { position: absolute; z-index: 6; left: 50%; top: 7.6cqw; width: 28cqw; height: 8cqw; transform: translateX(-50%); border-radius: 99px; background: #050505; box-shadow: inset 0 0 0 .5cqw #111; }
.d3-ph .d3-scr { position: relative; height: 100%; overflow: hidden; border-radius: 14cqw; background: #fff; }
.d3-ph .d3-scr img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: top; }
.d3-ph .d3-glare { inset: 3.6cqw; border-radius: 14cqw; }
.d3-btns { position: absolute; left: -1.4cqw; top: 26%; width: 1.4cqw; height: 9%; border-radius: 1cqw 0 0 1cqw; background: #3A363C; box-shadow: 0 -12cqw 0 #3A363C, 0 11cqw 0 #3A363C; transform: translateZ(-3cqw); }
.cs-app .d3-floor { left: 0; right: 0; height: 12%; margin-top: 6%; }

/* the chosen window of the Collection: its first light turns framboise */
.cs-win.is-chosen .d3-bar i:first-child { background: var(--framboise, #FF4D7E); }
@media (prefers-reduced-motion: reduce) { .d3-glare::after { animation: none; } }
/* phone body: no flat strip for the edge (it showed as a separate bar); the thickness is three rounded plates
   stacked in depth, so the side follows the phone's round corners */
.d3-ph .d3-back::after, .d3-ph .d3-back::before { content: ""; position: absolute; inset: 0; border-radius: inherit; top: 0; bottom: 0; right: 0; width: auto; transform-origin: 50% 50%; }
.d3-ph .d3-back { background: #1a181c; box-shadow: inset 0 0 0 .8cqw #3c3840; }
.d3-ph .d3-back::before { transform: translateZ(2cqw); background: #2a272d; box-shadow: inset 0 0 0 .8cqw #57525c; }
.d3-ph .d3-back::after { transform: translateZ(4cqw); background: #3a363e; box-shadow: inset 0 0 0 .8cqw #6a6470; }
.d3-btns { display: none; }