/* ==========================================================================
   TÉLÉPHONE 3D – VUE INTERNE  (fichier modifiable à la main)
   Les règles de base (.phone-stage, .face, .hot…) sont dans style.css.
   Ici : le plan du milieu (composants) et l'animation "écran en transparence".
   ========================================================================== */
.front,.back{transition:transform .8s cubic-bezier(.16,1,.3,1),opacity .6s}
.edge{transition:opacity .4s}

/* Plan interne, caché entre l'écran et le dos */
.mid{transform:translateZ(0);backface-visibility:visible;-webkit-backface-visibility:visible;
  background:linear-gradient(160deg,#0b1220,#0a0f1a);border-color:#334155}
.mid::before{content:"";position:absolute;inset:0;pointer-events:none;
  background:repeating-linear-gradient(0deg,rgba(0,210,255,.05) 0 1px,transparent 1px 14px),
             repeating-linear-gradient(90deg,rgba(0,210,255,.05) 0 1px,transparent 1px 14px)}

/* Vue interne : l'écran et le dos s'écartent et deviennent transparents */
.phone3d.open .front{transform:translateZ(86px);opacity:.3;pointer-events:none}
.phone3d.open .back{transform:rotateY(180deg) translateZ(86px);opacity:.3;pointer-events:none}
.phone3d.open .edge{opacity:0}
.phone3d.open .front .hot,.phone3d.open .back .hot{opacity:0}

/* Composants (positions en px dans un téléphone de 200 x 400) */
.m-cam{top:18px;left:18px;width:72px;height:72px;border-radius:50%}
.m-spk{top:30px;right:18px;width:84px;height:30px}
.m-pcb{top:104px;left:18px;right:18px;height:84px;align-items:flex-end;padding-bottom:6px;
  --chips:linear-gradient(rgba(0,210,255,.5),rgba(0,210,255,.5)) 12px 12px/26px 26px no-repeat,
          linear-gradient(rgba(0,210,255,.32),rgba(0,210,255,.32)) 50px 12px/18px 18px no-repeat,
          linear-gradient(rgba(0,210,255,.32),rgba(0,210,255,.32)) 80px 12px/30px 18px no-repeat,
          linear-gradient(rgba(0,210,255,.32),rgba(0,210,255,.32)) 122px 12px/36px 36px no-repeat;
  background:var(--chips),rgba(0,210,255,.08)}
/* Carte mère : simple décor (pas de réparation de ce type), non cliquable */
.m-pcb{pointer-events:none;cursor:default;border-color:rgba(100,116,139,.55);color:#64748b}
.m-bat{top:200px;left:18px;right:18px;height:128px;flex-direction:column;gap:6px;
  border-color:rgba(251,191,36,.85);background:rgba(251,191,36,.1);color:#fcd34d}
.m-bat::before{content:"⚡";font-size:26px}
.hot.m-bat:hover,.hot.m-bat.on{background:rgba(251,191,36,.3);box-shadow:0 0 18px rgba(251,191,36,.7)}
.m-usb{bottom:22px;left:66px;right:18px;height:34px}
.m-mic{bottom:22px;left:18px;width:40px;height:34px;font-size:9px}