/* Assemblage 3D : la charnière est commune au capot et au plateau fixe. */
.device-laptop {
  --metal-light: oklch(80% .008 210);
  --metal-mid: oklch(62% .008 210);
  --metal-dark: oklch(37% .008 210);
  --key: oklch(22% .006 210);
  --lid-radius: 12px 12px 4px 4px;
  --deck-radius: 3px 3px 12px 12px;
  position: relative; width: 100%; aspect-ratio: 1.25;
  container-type: inline-size; perspective: 1800px; perspective-origin: 50% 67.5%;
}
.laptop-model { position: absolute; top: 0; left: 4%; width: 92%; height: 54cqw; transform-style: preserve-3d; transform-origin: center bottom; transform: rotateX(-18deg); }
.laptop-lid { position: absolute; inset: 0; transform-origin: center bottom; transform-style: preserve-3d; transform: rotateX(8deg); }
.laptop-display-face { position: absolute; inset: 0; padding: 2.2% 1.4% 2.8%; background: var(--encre); border: 2px solid var(--metal-mid); border-radius: var(--lid-radius); box-shadow: inset 0 0 0 1px var(--metal-dark); backface-visibility: hidden; }
.laptop-display-face::before { content: ''; position: absolute; top: 1.5%; left: calc(50% - 2px); width: 4px; height: 4px; border-radius: 50%; background: oklch(32% .015 190); box-shadow: 0 0 0 1px oklch(15% .008 210); }
.laptop-display-face::after { content: ''; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; background: linear-gradient(135deg, oklch(97% .005 210 / .09), transparent 45%); }
.laptop-display-face .capture-desktop { width: 100%; height: 100%; aspect-ratio: auto; border-radius: 3px; }
.laptop-cover { position: absolute; inset: 0; display: grid; place-items: center; border: 1px solid var(--metal-light); border-radius: var(--lid-radius); background: linear-gradient(125deg, var(--metal-mid), var(--metal-light) 52%, var(--metal-mid)); transform: translateZ(-5px) rotateY(180deg); backface-visibility: hidden; box-shadow: inset 0 0 0 1px oklch(45% .008 210 / .6); }
.laptop-cover span { font: 600 4cqw/1 var(--font-titre); letter-spacing: -.06em; color: var(--metal-dark); text-shadow: 0 1px oklch(92% .008 210 / .45); transform: rotate(180deg); }
.laptop-hinge { position: absolute; top: calc(100% - 3px); left: 8%; width: 84%; height: 8px; border-radius: 4px; background: linear-gradient(var(--metal-dark), var(--key), var(--metal-mid)); transform: translateZ(1px); }
.laptop-deck { position: absolute; top: 100%; left: 0; width: 100%; height: 54cqw; transform-origin: center top; transform: translateY(4px) rotateX(90deg); transform-style: preserve-3d; }
.deck-top { position: absolute; inset: 0; border-radius: var(--deck-radius); border: 1px solid var(--metal-light); background: linear-gradient(110deg, var(--metal-mid), var(--metal-light) 45%, var(--metal-mid)); backface-visibility: hidden; }
.laptop-keyboard { position: absolute; top: 8%; left: 9%; width: 82%; height: 53%; display: flex; flex-direction: column; gap: 3.5%; padding: 1.2%; border: 1px solid var(--metal-dark); border-radius: 4px; background: oklch(39% .007 210); box-shadow: inset 0 1px 3px oklch(15% .005 210 / .5); }
.keyboard-row { display: flex; flex: 1; gap: .85%; min-height: 0; }
.keyboard-row span { display: grid; place-items: center; flex: 1; min-width: 0; font: 400 1cqw/1 var(--font-texte); color: oklch(83% .01 210); background: linear-gradient(oklch(27% .006 210), var(--key)); border: 1px solid oklch(15% .005 210); border-radius: 3px; box-shadow: inset 0 1px 0 oklch(42% .008 210), 0 1px 1px oklch(15% .005 210 / .5); }
.keyboard-row .key-space { flex: 4; }
.laptop-trackpad { position: absolute; left: 32%; bottom: 7%; width: 36%; height: 26%; border: 1px solid oklch(46% .008 210); border-radius: 5px; background: linear-gradient(145deg, oklch(76% .008 210), oklch(68% .008 210)); box-shadow: 0 1px 0 oklch(90% .008 210 / .7), inset 0 1px 2px oklch(45% .008 210 / .2); }
.laptop-speaker { position: absolute; top: 9%; height: 49%; width: 3.5%; background: radial-gradient(circle, var(--metal-dark) .6px, transparent .9px) 0 0 / 3px 3px; opacity: .7; }
.speaker-left { left: 3%; }
.speaker-right { right: 3%; }
.deck-front { position: absolute; top: 100%; left: 12px; right: 12px; height: 9px; background: linear-gradient(var(--metal-light), var(--metal-mid) 40%, var(--metal-dark)); border-radius: 0; transform-origin: top; transform: rotateX(-90deg); }
.deck-front span { position: absolute; left: 42%; top: -1px; width: 16%; height: 4px; border-radius: 0 0 8px 8px; background: var(--metal-dark); box-shadow: 0 1px 0 var(--metal-light); }
.laptop-ground { position: absolute; left: 2%; bottom: 4%; width: 96%; height: 13%; border-radius: 50%; background: radial-gradient(ellipse, rgb(0 0 0 / .55), transparent 66%); pointer-events: none; }
@media (max-width: 760px) {
  .device-laptop { perspective: 1600px; }
  .device-laptop { --lid-radius: 7px 7px 3px 3px; }
  .keyboard-row span { border-width: .5px; border-radius: 1px; }
}

/* Coques pleines : mêmes contours arrondis à chaque profondeur. Les plans
   latéraux indépendants laissaient des angles ouverts et dépassaient des coins. */
.laptop-shell { position: absolute; inset: 0; transform-style: preserve-3d; pointer-events: none; }
.laptop-shell > i { position: absolute; inset: 0; display: block; background: oklch(var(--shell-tone) .008 210); transform: translateZ(var(--shell-z)); }
.lid-shell > i { border-radius: var(--lid-radius); }
.deck-shell > i { border-radius: var(--deck-radius); }