/* ════════════════════════════════════════════════════════════════════════
   LAPTOP v5 — « MATA PRO 16 »
   ------------------------------------------------------------------------
   Maquette 3D en CSS pur, chargée APRÈS site.css. Elle remplace la coque
   historique (.scene/.laptop/.lp-lid/.lp-deck…) dont les ~12 couches de
   règles successives se contredisaient. L'écran (.lp-display et ses barres
   Ubuntu / Windows, le terminal) est conservé tel quel.

   Principes :
   · Toutes les cotes sont en cqi = % de la largeur de .mx (conteneur). La
     machine se met donc à l'échelle d'un seul bloc, du téléphone au 4K,
     sans jamais s'étirer ni déborder.
   · Repère du « rig » : l'origine est la ligne de charnière. Le socle est un
     plan couché (rotateX 90°) qui vient vers l'observateur, le capot pivote
     autour de son arête basse. La caméra = rotateX négatif du rig.
   · hero.js n'écrit que deux transforms (rig + capot) et deux variables de
     lumière ; aucune mesure de mise en page n'est nécessaire.
   · Pièges connus : pas de filter / backdrop-filter / overflow / opacity<1
     sur un élément preserve-3d (ça aplatit la 3D) ; texte et SVG uniquement
     sur des faces « feuilles ».
   ═══════════════════════════════════════════════════════════════════════ */

/* ── Conteneur et caméra ──────────────────────────────────────────────── */
.hero-stage{perspective:none}
.mx{position:relative;width:100%;margin:0 auto;container-type:inline-size;
  touch-action:pan-y;cursor:grab;-webkit-tap-highlight-color:transparent;user-select:none}
.mx.is-drag,.mx.is-drag *{cursor:grabbing !important}
.mx-view{
  --L:76cqi;                         /* largeur de la machine            */
  --H:calc(var(--L) * .671);         /* hauteur du capot = profondeur     */
  --T:calc(var(--L) * .032);         /* épaisseur du socle                */
  --t:calc(var(--L) * .011);         /* épaisseur du capot                */
  --hy:73%;                        /* hauteur de la charnière dans la vue */
  position:relative;width:100%;aspect-ratio:100/80;
  perspective:250cqi;perspective-origin:50% 22%;
}
/* Téléphones : la machine prend plus de largeur, perspective plus douce
   (moins d'évasement du bord avant, sinon il déborderait). */
@container (max-width:520px){
  .mx-view{--L:80cqi;--hy:76%;aspect-ratio:100/81.5;perspective:300cqi}
}

/* ── Rig : tout l'objet, pivot au centre du socle ─────────────────────── */
.mx-rig{position:absolute;left:50%;top:var(--hy);width:var(--L);height:0;
  margin-left:calc(var(--L) / -2);transform-style:preserve-3d;
  transform-origin:50% 0 calc(var(--H) / 2);
  transform:rotateX(-16deg);will-change:transform}

/* ── Socle ─────────────────────────────────────────────────────────────── */
.mx-base{position:absolute;left:0;top:0;width:100%;height:var(--H);
  transform-origin:50% 0;transform:rotateX(90deg);transform-style:preserve-3d;pointer-events:none}
.mx-base>*{position:absolute}
/* Dessus : aluminium noir sidéral, léger brossé, chanfrein lumineux */
.mx-deck{inset:0;border-radius:0 0 1.1cqi 1.1cqi;backface-visibility:hidden;pointer-events:auto;
  background:
    radial-gradient(120% 70% at 50% 0,rgba(255,255,255,.05),transparent 60%),
    repeating-linear-gradient(90deg,rgba(255,255,255,.012) 0 1px,rgba(0,0,0,.02) 1px 3px),
    linear-gradient(180deg,#2c2e34 0%,#26282d 45%,#1f2125 100%);
  box-shadow:inset 0 0 0 .14cqi rgba(255,255,255,.07),inset 0 -.5cqi 1cqi rgba(0,0,0,.35)}
.mx-hinge{left:9%;right:9%;top:0;height:2.4%;border-radius:0 0 .5cqi .5cqi;
  background:linear-gradient(180deg,#07080a,#16171b 70%,#2a2c31)}
/* Grilles de haut-parleurs de part et d'autre du clavier */
.mx-grille{top:6.2%;height:43.5%;width:8%;border-radius:.4cqi;
  background:radial-gradient(circle,#030405 0 .12cqi,rgba(255,255,255,.05) .15cqi,transparent .2cqi) 0 0/.5cqi .5cqi}
.mx-grille-l{left:3.2%}
.mx-grille-r{right:3.2%}
/* Lumière de l'écran sur le repose-poignets, une fois allumé */
.mx-deck-light{inset:0;border-radius:inherit;pointer-events:none;opacity:0;transition:opacity .8s ease;
  background:radial-gradient(70% 55% at 50% 0,rgba(130,150,255,.13),transparent 70%)}
.mx-rig.lp-lit .mx-deck-light{opacity:1}

/* Clavier (AZERTY Mac, rangée de fonctions + Touch ID, flèches en T) */
.mx .keyboard{position:absolute;left:12.6%;right:12.6%;top:6.2%;height:43.5%;
  display:flex;flex-direction:column;align-items:stretch;justify-content:stretch;gap:.34cqi;padding:.42cqi;border-radius:.7cqi;
  background:#0b0c0e;box-shadow:inset 0 0 0 .1cqi rgba(0,0,0,.7),inset 0 .2cqi .5cqi rgba(0,0,0,.6),0 .06cqi 0 rgba(255,255,255,.05);
  direction:ltr;margin:0;width:auto;transform:none}
.mx .kb-row{display:flex;align-items:stretch;justify-content:stretch;gap:.34cqi;flex:1 1 0;min-height:0;margin:0;width:auto;padding:0}
.mx .kb-row.kr-fn{flex:.62 1 0}
.mx .key{flex:1 1 0;min-width:0;width:auto;height:auto;display:grid;place-items:center;position:relative;
  border-radius:.32cqi;font:600 .92cqi/1 var(--sans,system-ui),sans-serif;color:#aeb4c0;
  background:linear-gradient(180deg,#1c1d22,#121316);border:0;padding:0;
  box-shadow:inset 0 .07cqi 0 rgba(255,255,255,.08),inset 0 -.08cqi 0 rgba(0,0,0,.6),0 .08cqi .06cqi rgba(0,0,0,.7);
  transition:transform .08s,background .08s,color .4s,text-shadow .4s;cursor:pointer;transform:none}
.mx .key>span{pointer-events:none;white-space:nowrap;transform:none}
.mx .key.k-tid{background:radial-gradient(circle at 50% 50%,#1b1c20 0 38%,#0d0e10 42% 100%)}
.mx .key.press{transform:translateY(.06cqi) scale(.96);background:linear-gradient(180deg,#2a2d38,#1a1c24);color:#e8f3ff}
/* Entrée ISO : deux demi-touches soudées sur deux rangées */
.mx .key.kent-top{border-radius:.32cqi .32cqi 0 .32cqi}
.mx .key.kent-bot{border-radius:0 0 .32cqi .32cqi;margin-top:-.42cqi;padding-top:.42cqi}
/* Bloc de flèches : haut/bas empilés en demi-hauteur */
.mx .k-arrows{flex:3 1 0;display:flex;gap:.34cqi;min-width:0}
.mx .k-arrows>.key{align-self:flex-end;height:50%}
.mx .k-ud{flex:1 1 0;display:flex;flex-direction:column;gap:.12cqi}
.mx .k-ud>.key{flex:1 1 0;height:auto}
/* Rétroéclairage */
.mx-rig.lp-lit .key{color:#dfe7ff;text-shadow:0 0 .5cqi rgba(140,170,255,.55)}

.mx .trackpad{position:absolute;left:28%;right:28%;top:55.5%;bottom:7%;margin:0;width:auto;height:auto;max-width:none;
  border-radius:1cqi;background:linear-gradient(170deg,#2a2c32,#25272c 60%,#212328);
  box-shadow:inset 0 0 0 .12cqi rgba(255,255,255,.07),inset 0 .15cqi .6cqi rgba(0,0,0,.45)}

/* Chant avant + encoche d'ouverture + témoin */
.mx-front{left:0;top:100%;width:100%;height:var(--T);transform-origin:50% 0;transform:rotateX(-90deg);
  border-radius:0 0 1.2cqi 1.2cqi;
  background:linear-gradient(180deg,#34363c 0%,#202226 30%,#141518 100%);
  box-shadow:inset 0 .12cqi 0 rgba(255,255,255,.12)}
.mx-notch{position:absolute;left:43%;width:14%;top:0;height:45%;border-radius:0 0 50% 50%/0 0 100% 100%;
  background:linear-gradient(180deg,#0c0d0f,#1b1c20)}
.mx-front .lp-led{position:absolute;left:auto;right:30%;top:46%;bottom:auto;transform:none;
  width:.5cqi;height:.5cqi;border-radius:50%;background:#2a2d33;box-shadow:none;animation:none}
.mx-rig[data-stage="closed"] .mx-front .lp-led{background:#f0a23a;box-shadow:0 0 .7cqi rgba(240,162,58,.9);animation:ledBreathe 2.4s ease-in-out infinite}
.mx-rig.lp-lit .mx-front .lp-led{background:#3ddc84;box-shadow:0 0 .7cqi rgba(61,220,132,.95);animation:none}
/* Flancs (ports) */
.mx-side{top:0;width:var(--T);height:100%;transform-origin:0 50%;transform:rotateY(90deg);
  background:linear-gradient(90deg,#2a2c31,#16171a);display:flex;flex-direction:column;justify-content:center;
  gap:calc(var(--H) * .022);padding:0 calc(var(--T) * .24);box-sizing:border-box}
.mx-side-l{left:0}
.mx-side-r{left:100%}
.mx-port{display:block;width:100%;height:calc(var(--H) * .045);border-radius:.3cqi;background:#08090b;box-shadow:inset 0 0 0 .08cqi rgba(255,255,255,.08)}
.mx-magsafe{height:calc(var(--H) * .07)}
.mx-jack{display:block;width:100%;aspect-ratio:1;border-radius:50%;background:#08090b}
/* Dessous + ombre portée (dans le plan du sol, donc en perspective juste) */
.mx-bottom{inset:0;transform:translateZ(calc(var(--T) * -1)) rotateX(180deg);border-radius:1.2cqi;
  background:linear-gradient(180deg,#1b1c20,#111214)}
.mx-shadow{left:-14%;right:-14%;top:-6%;bottom:-26%;transform:translateZ(calc(var(--T) * -1 - 1px));
  background:
    radial-gradient(50% 42% at 50% 54%,rgba(0,0,0,.75),rgba(0,0,0,.35) 55%,transparent 72%),
    radial-gradient(60% 50% at 50% 60%,rgba(34,211,238,.10),transparent 70%)}

/* ── Capot ─────────────────────────────────────────────────────────────── */
.mx-lid{position:absolute;left:0;bottom:calc(var(--t) / 2);width:100%;height:var(--H);
  transform-origin:50% 100%;transform-style:preserve-3d;transform:rotateX(14deg);will-change:transform}
.mx-lid>*{position:absolute}
.mx-panel,.mx-cover{inset:0;border-radius:1.15cqi 1.15cqi .7cqi .7cqi;backface-visibility:hidden;-webkit-backface-visibility:hidden}
/* Face écran : verre noir bord à bord, liseré alu, caméra, menton */
.mx-panel{transform:translateZ(calc(var(--t) / 2));
  padding:calc(var(--L) * .024) calc(var(--L) * .016) calc(var(--L) * .042);
  background:linear-gradient(180deg,#07080b,#040507);
  box-shadow:inset 0 0 0 .16cqi #34373e,inset 0 0 0 .3cqi #0b0c0f,inset 0 .35cqi .5cqi rgba(255,255,255,.04)}
.mx-notch-cam,.mx-chin{position:absolute}
.mx-notch-cam{left:50%;top:calc(var(--L) * .009);width:.62cqi;height:.62cqi;margin-left:-.31cqi;border-radius:50%;
  background:radial-gradient(circle at 40% 40%,#2b3550,#07080c 60%);box-shadow:0 0 0 .1cqi rgba(255,255,255,.05)}
.mx-notch-cam i{position:absolute;left:30%;top:28%;width:22%;height:22%;border-radius:50%;background:rgba(120,170,255,.55)}
.mx-chin{left:0;right:0;bottom:0;height:calc(var(--L) * .042);display:grid;place-items:center;
  font:600 1.02cqi/1 var(--sans,system-ui),sans-serif;letter-spacing:.32em;color:#4a4e58;
  text-shadow:0 .06cqi 0 rgba(0,0,0,.8);pointer-events:none}
/* Face coque : alu anodisé + emblème (lisible capot fermé, vu de face) */
.mx-cover{transform:rotateY(180deg) translateZ(calc(var(--t) / 2));pointer-events:none;overflow:hidden;
  background:
    radial-gradient(120% 90% at 30% 15%,rgba(255,255,255,.07),transparent 55%),
    repeating-linear-gradient(90deg,rgba(255,255,255,.012) 0 1px,rgba(0,0,0,.02) 1px 3px),
    linear-gradient(160deg,#33363d 0%,#26282e 50%,#1c1d22 100%);
  box-shadow:inset 0 0 0 .14cqi rgba(255,255,255,.08)}
.mx-cover-sheen{inset:-30%;position:absolute;
  background:linear-gradient(115deg,transparent 40%,rgba(255,255,255,.07) 50%,transparent 60%);
  transform:translateX(calc(var(--par-x,0) * 8%))}
.mx-logo{position:absolute;left:50%;top:50%;width:13%;height:auto;transform:translate(-50%,-50%) rotate(180deg);opacity:.9}
/* Chants du capot */
.mx-ledge{background:linear-gradient(90deg,#3a3d44,#1d1f23);pointer-events:none}
.mx-ledge-t{left:1cqi;right:1cqi;top:0;height:var(--t);transform-origin:50% 0;transform:translateZ(calc(var(--t) / -2)) rotateX(90deg)}
.mx-ledge-b{left:1cqi;right:1cqi;top:100%;height:var(--t);transform-origin:50% 0;transform:translateZ(calc(var(--t) / 2)) rotateX(-90deg);background:#0d0e10}
.mx-ledge-l,.mx-ledge-r{top:.7cqi;bottom:.7cqi;width:var(--t);transform-origin:0 50%;transform:translateZ(calc(var(--t) / 2)) rotateY(90deg)}
.mx-ledge-l{left:0}
.mx-ledge-r{left:100%}

/* ── Dalle : l'écran existant, remis à l'échelle de la machine ──────────── */
.mx .lp-display{position:relative;width:100%;aspect-ratio:16/10;border:0;border-radius:.45cqi .45cqi 0 0;
  filter:none;box-shadow:none;background:#04050a;
  font-size:clamp(6.5px,1.62cqi,14px)}          /* police du terminal = base em */
@container (max-width:520px){ .mx .lp-display{font-size:clamp(6.5px,1.95cqi,12px)} }
.mx .lp-display::after{display:none}
.mx .lp-display::before{z-index:24}
/* Chrome des deux OS en em : il suit la taille de la dalle */
.mx .u-topbar{height:1.85em;padding:0 .9em;gap:.8em;font-size:.82em}
.mx .u-tray{gap:.55em}
.mx .u-tray svg{width:1.25em;height:1.25em}
.mx .u-ava{width:1.45em;height:1.45em}
.mx .u-desk{padding:1.1em 1.1em 0}
.mx .u-tbar{height:2.1em;padding:0 .9em}
.mx .u-tt{font-size:.9em}
.mx .u-wc{gap:.55em;right:1.4em}
.mx .u-wc i{width:.9em;height:.9em}
.mx .u-body{height:auto;font-size:1em;padding:.85em 1em;line-height:1.55}
.mx .u-cur{width:.58em;height:1.08em}
.mx .u-neo{gap:1.1em}
.mx .u-neo-logo{width:6.6em;height:6.6em}
.mx .u-neo-info{font-size:1em;min-width:0}
.mx .u-neo-info>div{white-space:normal}     /* jamais tronqué : on replie */
.mx .u-hidden-input{top:2.1em}
.mx .w-tbar{height:2.1em;gap:.5em;padding:0 .5em 0 .65em}
.mx .w-tab{height:1.55em;gap:.5em;padding:0 .65em;font-size:.82em}
.mx .w-tab-ic{width:.9em;height:.9em}
.mx .w-wc i{width:1.6em;height:1.6em;font-size:.68em}
.mx .w-taskbar{height:2.1em;gap:.8em}
.mx .w-ic{width:1.4em;height:1.4em}
.mx .w-ic svg{width:1em;height:1em}
.mx .w-clock{font-size:.75em}
.mx .w-tray svg{width:.9em;height:.9em}
.mx .lp-boot-logo{font-size:2.2em}
.mx .lp-boot-bar{height:.25em}
/* Reflet du verre : glisse avec le point de vue */
.mx-glass{position:absolute;inset:0;z-index:26;pointer-events:none;
  background:
    linear-gradient(calc(118deg + var(--par-x,0) * 6deg),rgba(255,255,255,.10) 0,rgba(255,255,255,.025) 20%,transparent 40%),
    radial-gradient(80% 60% at calc(50% + var(--par-x,0) * 18%) -10%,rgba(255,255,255,.06),transparent 60%)}

/* États d'alimentation (repris de l'ancienne coque, re-ciblés sur le rig) */
.mx-rig[data-stage="on"] .lp-power-layer{background:radial-gradient(circle at 50% 44%,#0a1226,#04060b 72%)}
.mx-rig.lp-booted .lp-power-layer{opacity:0;visibility:hidden}
.mx-rig.lp-lit .lp-boot-logo{animation:bootLogo 1.05s var(--ease) forwards}
.mx-rig.lp-lit .lp-boot-bar{opacity:1}
.mx-rig.lp-lit .lp-boot-bar i{animation:bootBar 1s var(--ease) .12s forwards}
.mx-rig.lp-booted .u-topbar,.mx-rig.lp-booted .u-desk{opacity:1}
.mx-rig.lp-booted .u-body{cursor:text}
.mx-rig.lp-lit .lp-display{box-shadow:0 0 4cqi -.5cqi rgba(124,150,255,.35)}

/* Halo ambiant derrière la machine (plat, hors 3D) */
.mx-glow{position:absolute;left:50%;top:34%;width:110%;height:90%;transform:translate(-50%,-50%);
  pointer-events:none;opacity:.45;transition:opacity .9s ease;
  background:radial-gradient(closest-side,rgba(99,102,241,.28),rgba(34,211,238,.10) 55%,transparent)}
.mx-rig.lp-lit ~ .mx-glow,.mx.is-lit .mx-glow{opacity:1}

/* ── Hit-testing : seules la dalle et le clavier reçoivent les clics ───── */
.mx-cover,.mx-ledge,.mx-front,.mx-side,.mx-bottom,.mx-shadow,.mx-hinge,.mx-grille,.mx-glow{pointer-events:none}

/* ── Mise en page autour de la machine ────────────────────────────────── */
.hero-stage{gap:0}
.hero-stage .os-switch{margin-top:10px}
.hero-stage .stage-tools{margin-top:12px}
/* Desktop épinglé : la machine ne dépasse jamais la hauteur disponible
   (barre de nav + commandes déduites). Purement CSS : plus de mesure JS. */
@media (min-width:1025px){
  .mx{max-width:min(100%, calc((100svh - 250px) * 1.25))}
  .hero-stage[data-reveal]{transform:translateY(34px)}
  .hero-stage[data-reveal].in{transform:none}
  .hero.is-focus .mx{max-width:min(100%, calc((100svh - 230px) * 1.25), 1100px)}
}
@media (max-width:1024px){
  .mx{max-width:640px}
  .hero.is-focus .mx{max-width:min(100%, 900px)}
}
.hero.is-focus .hero-inner{max-width:1400px}
/* « Défilez pour ouvrir le capot » n'a plus de sens une fois ouvert, et
   chevaucherait les commandes sur les écrans courts. */
.hero-scroll{transition:opacity .4s ease}
.hero.is-open .hero-scroll{opacity:0;pointer-events:none}
@media (min-width:1025px) and (max-height:820px){ .hero-scroll{display:none} }
.mx{transition:max-width .55s var(--ease)}

@media (prefers-reduced-motion:reduce){
  .mx{transition:none}
}