/* ================= Étape E4 : téléphone pixel, réseau social Snapchat, interview ================= */
#phone { position: fixed; right: calc(var(--u) * 4); bottom: calc(var(--u) * 17); z-index: 6; pointer-events: none;
  transform: translateY(calc(100% + var(--u) * 22)); transition: transform .3s steps(6); }
#phone.open { transform: none; pointer-events: auto; }
#phone .ph-body { position: relative; padding: calc(var(--u) * 4) calc(var(--u) * 4) calc(var(--u) * 2); background: #1d1926;
  clip-path: polygon(calc(var(--u) * 3) 0, calc(100% - var(--u) * 3) 0, calc(100% - var(--u) * 3) var(--u), calc(100% - var(--u)) var(--u), calc(100% - var(--u)) calc(var(--u) * 3), 100% calc(var(--u) * 3),
    100% calc(100% - var(--u) * 3), calc(100% - var(--u)) calc(100% - var(--u) * 3), calc(100% - var(--u)) calc(100% - var(--u)), calc(100% - var(--u) * 3) calc(100% - var(--u)), calc(100% - var(--u) * 3) 100%,
    calc(var(--u) * 3) 100%, calc(var(--u) * 3) calc(100% - var(--u)), var(--u) calc(100% - var(--u)), var(--u) calc(100% - var(--u) * 3), 0 calc(100% - var(--u) * 3), 0 calc(var(--u) * 3), var(--u) calc(var(--u) * 3), var(--u) var(--u), calc(var(--u) * 3) var(--u));
  box-shadow: inset 0 0 0 var(--u) #0b0910, inset var(--u) var(--u) 0 var(--u) #3e3650, inset calc(var(--u) * -1) calc(var(--u) * -1) 0 var(--u) #120f18; }
#phone .ph-side { position: absolute; width: var(--u); background: #3e3650; box-shadow: inset calc(var(--u) * -.0) 0 0 #000; }
#phone .ph-side.l1 { left: 0; top: calc(var(--u) * 26); height: calc(var(--u) * 7); }
#phone .ph-side.l2 { left: 0; top: calc(var(--u) * 36); height: calc(var(--u) * 12); }
#phone .ph-side.r1 { right: 0; top: calc(var(--u) * 30); height: calc(var(--u) * 14); }
#phone .ph-body { margin: 0 var(--u); }
#phone .ph-top { height: calc(var(--u) * 4); display: flex; align-items: center; justify-content: center; gap: calc(var(--u) * 3); margin-bottom: var(--u); }
#phone .ph-spk { display: block; width: calc(var(--u) * 14); height: var(--u); background: #3e3650; box-shadow: 0 var(--u) 0 #0b0910; }
#phone .ph-lens { display: block; width: calc(var(--u) * 2); height: calc(var(--u) * 2); background: #2a3354; box-shadow: inset calc(var(--u) * .0) 0 0 #000, 0 0 0 var(--u) #0b0910; }
#phone .ph-bottom { height: calc(var(--u) * 9); display: flex; align-items: center; justify-content: center; }
#phone .ph-home { display: block; width: calc(var(--u) * 6); height: calc(var(--u) * 6); cursor: pointer; box-shadow: inset 0 0 0 var(--u) #4a4258; }
#phone .ph-home:hover { box-shadow: inset 0 0 0 var(--u) #ffd60a; }
.ph-screen { position: relative; width: calc(var(--u) * 68); height: calc(var(--u) * 140); overflow: hidden; background: #0e0c12; box-shadow: 0 0 0 var(--u) #000; }
.ph-status { position: absolute; left: 0; right: 0; top: 0; height: calc(var(--u) * 6); display: flex; align-items: center; gap: calc(var(--u) * 1.5); padding: 0 calc(var(--u) * 2);
  background: #141018; color: var(--paper); font-size: calc(var(--u) * 3); z-index: 2; cursor: pointer; }
.ph-status .t { font-size: calc(var(--u) * 2.7); line-height: 1; }
.ph-clock { margin-right: auto; }
.ph-net { display: flex; align-items: flex-end; gap: calc(var(--u) * .5); height: calc(var(--u) * 3); }
.ph-net i { display: block; width: var(--u); background: #4a4258; }
.ph-net i:nth-child(1) { height: var(--u); } .ph-net i:nth-child(2) { height: calc(var(--u) * 1.5); } .ph-net i:nth-child(3) { height: calc(var(--u) * 2); } .ph-net i:nth-child(4) { height: calc(var(--u) * 3); }
.ph-net i.on { background: var(--paper); }
.ph-netlbl { color: var(--orange); }
.ph-bat { position: relative; width: calc(var(--u) * 7); height: calc(var(--u) * 3); box-shadow: inset 0 0 0 calc(var(--u) * .5) var(--paper); padding: calc(var(--u) * .5); display: flex; }
.ph-bat::after { content: ''; position: absolute; right: calc(var(--u) * -1); top: var(--u); width: calc(var(--u) * .5); height: var(--u); background: var(--paper); }
.ph-bat i { display: block; height: 100%; background: #7ee081; }
.ph-bat.mid i { background: #ffa62b; } .ph-bat.low i { background: #ff5a4e; animation: blink .6s steps(2) infinite; }
.ph-app { position: absolute; left: 0; right: 0; top: calc(var(--u) * 6); bottom: 0; display: flex; flex-direction: column; overflow: hidden; background: #221d2c; color: var(--paper);
  font: 400 calc(var(--u) * 3.4)/1.25 'Pixelify', monospace; }
.ph-app img, .ph-app canvas, .ph-media, .pi { image-rendering: pixelated; }
.ph-app .t { font-family: 'Silk', monospace; text-transform: uppercase; }
.pi { display: inline-block; vertical-align: middle; }
/* accueil */
.ph-app.scr-home { background: #241a40; }
.ph-homebg { position: absolute; inset: 0; }
.ph-homebg canvas { width: 100%; height: 100%; display: block; }
.ph-bigclock { position: relative; margin-top: calc(var(--u) * 7); text-align: center; font-size: calc(var(--u) * 10); line-height: 1; color: var(--paper); text-shadow: var(--u) var(--u) 0 #141018; }
.ph-date { position: relative; text-align: center; font-size: calc(var(--u) * 2.7); color: #f4c890; margin-top: calc(var(--u) * 1.5); text-shadow: calc(var(--u) * .5) calc(var(--u) * .5) 0 #141018; }
.ph-grid { position: relative; display: grid; grid-template-columns: repeat(3, 1fr); gap: calc(var(--u) * 4) calc(var(--u) * 1); padding: calc(var(--u) * 8) calc(var(--u) * 3) 0; }
.ph-appic { position: relative; display: flex; flex-direction: column; align-items: center; gap: calc(var(--u) * 1.2); cursor: pointer; }
.ph-appic img { width: calc(var(--u) * 16); height: calc(var(--u) * 16); display: block; box-shadow: 0 var(--u) 0 #141018; }
.ph-appic span { font-size: calc(var(--u) * 2.6); line-height: 1.5; color: var(--paper); background: #141018; padding: 0 var(--u); }
.ph-appic.sel img { box-shadow: 0 0 0 var(--u) #ffd60a, 0 calc(var(--u) * 2) 0 #141018; transform: translateY(calc(var(--u) * -1)); }
.ph-appic.sel span { color: var(--sun); }
.ph-badge { position: absolute; top: calc(var(--u) * -1.5); right: calc(var(--u) * 2); min-width: calc(var(--u) * 4.5); padding: 0 calc(var(--u) * .8); text-align: center;
  background: #e0302a; color: #fff; font: calc(var(--u) * 2.7)/1.5 'Silk', monospace; box-shadow: 0 0 0 calc(var(--u) * .5) #141018; }
.ph-badge.in { position: static; flex: none; }
.ph-dot { width: calc(var(--u) * 2); height: calc(var(--u) * 2); background: #ffd60a; flex: none; animation: blink 1s steps(2) infinite; }
.ph-hint { position: absolute; left: 0; right: 0; bottom: calc(var(--u) * 2); text-align: center; font-size: calc(var(--u) * 2.4); color: #f4c890; text-shadow: calc(var(--u) * .5) calc(var(--u) * .5) 0 #141018; }
/* en-têtes et listes */
.ph-head { flex: none; height: calc(var(--u) * 8); display: flex; align-items: center; gap: calc(var(--u) * 2); padding: 0 calc(var(--u) * 2.5); font-size: calc(var(--u) * 3.6); cursor: pointer;
  box-shadow: inset 0 calc(var(--u) * -1) 0 rgba(0, 0, 0, .3), inset 0 var(--u) 0 rgba(255, 255, 255, .2); }
.ph-head .t { font-size: calc(var(--u) * 3.2); }
.ph-head .ph-av { margin-left: auto; }
.h-msg { background: #2f9e57; } .h-call { background: #3c78d8; } .h-klax { background: #fffc00; color: #141018; } .h-klax .ph-back img { filter: invert(1); } .h-cam { background: #4a4652; } .h-map { background: #a8801e; }
.ph-list { flex: 1; overflow-y: auto; scrollbar-width: none; }
.ph-list::-webkit-scrollbar { display: none; }
.ph-row { display: flex; align-items: center; gap: calc(var(--u) * 2); padding: calc(var(--u) * 1.8) calc(var(--u) * 2.5); box-shadow: inset 0 calc(var(--u) * -.5) 0 #2e2740; cursor: pointer; }
.ph-row.sel, .ph-post.sel { background: #3d3456; box-shadow: inset var(--u) 0 0 #ffd60a, inset 0 calc(var(--u) * -.5) 0 #2e2740; }
.ph-row.off .ph-rowtx { opacity: .6; }
.ph-av { width: calc(var(--u) * 10); height: calc(var(--u) * 10); flex: none; box-shadow: 0 0 0 calc(var(--u) * .5) #141018; }
.ph-av.sm { width: calc(var(--u) * 6); height: calc(var(--u) * 6); }
.ph-av.big { width: calc(var(--u) * 24); height: calc(var(--u) * 24); box-shadow: 0 0 0 var(--u) #141018, 0 calc(var(--u) * 2) 0 var(--u) #0b0910; }
.ph-rowtx { flex: 1; min-width: 0; }
.ph-rowtx b { display: block; font-size: calc(var(--u) * 3.4); color: var(--paper); }
.ph-rowtx span { display: block; font-size: calc(var(--u) * 2.9); color: var(--dim); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ph-empty { padding: calc(var(--u) * 6) calc(var(--u) * 4); color: var(--dim); text-align: center; }
.ph-foot { flex: none; padding: calc(var(--u) * 1.8) calc(var(--u) * 2.5); min-height: calc(var(--u) * 12); font-size: calc(var(--u) * 3); color: var(--dim); background: #1a1622; box-shadow: inset 0 calc(var(--u) * .5) 0 #2e2740; }
/* messages */
.ph-thread { flex: 1; overflow-y: auto; scrollbar-width: none; padding: calc(var(--u) * 2); display: flex; flex-direction: column; gap: calc(var(--u) * 1.6); }
.ph-thread::-webkit-scrollbar { display: none; }
.ph-msg { max-width: 82%; padding: calc(var(--u) * 1.2) calc(var(--u) * 2); font-size: calc(var(--u) * 3.2); box-shadow: 0 var(--u) 0 #141018; }
.ph-msg.them { align-self: flex-start; background: #3a3346; }
.ph-msg.me { align-self: flex-end; background: #ffd60a; color: #141018; }
.ph-msg .ph-media { margin-bottom: var(--u); }
.ph-opts { flex: none; display: flex; flex-direction: column; gap: var(--u); padding: calc(var(--u) * 1.5) calc(var(--u) * 2) calc(var(--u) * 2); background: #1a1622; max-height: calc(var(--u) * 50); overflow-y: auto; scrollbar-width: none; }
.ph-opt { padding: calc(var(--u) * 1) calc(var(--u) * 2); background: #2e2740; font-size: calc(var(--u) * 3.1); cursor: pointer; box-shadow: inset 0 0 0 calc(var(--u) * .5) #141018; }
.ph-opt.sel { background: #ffd60a; color: #141018; }
.ph-opt.off { color: var(--dim); } .ph-opt.off.sel { background: #5a5068; color: #d8cbb0; }
.ph-opt em { display: block; font-style: normal; font-size: calc(var(--u) * 2.6); color: #ffa62b; }
.ph-opt.danger { color: #ffb4a8; } .ph-opt.danger.sel { background: #ff5a4e; color: #fff; }
.ph-opt.write { color: #bfe3ff; } .ph-opt.write.sel { color: #141018; }
.ph-type { flex: none; margin: calc(var(--u) * 2) calc(var(--u) * 2) var(--u); padding: calc(var(--u) * 1.5) calc(var(--u) * 2); background: #fff8e6; color: #141018; min-height: calc(var(--u) * 7);
  font-size: calc(var(--u) * 3.2); box-shadow: inset 0 0 0 calc(var(--u) * .5) #141018, 0 0 0 calc(var(--u) * .5) #ffd60a; word-break: break-word; }
.ph-type em { color: #8a8070; font-style: normal; }
.ph-caret { display: inline-block; width: var(--u); height: calc(var(--u) * 3.4); background: #141018; vertical-align: middle; animation: blink .8s steps(2) infinite; }
.ph-typehint { flex: none; text-align: center; font-size: calc(var(--u) * 2.4); color: var(--dim); padding-bottom: calc(var(--u) * 2); }
/* appels */
.ph-route { flex: none; background: #2f9e57; color: #fff; font-size: calc(var(--u) * 2.6); padding: calc(var(--u) * .8) calc(var(--u) * 2.5); animation: blink 1.4s steps(2) infinite; }
.ph-callic { flex: none; width: calc(var(--u) * 5); height: calc(var(--u) * 5); background: #2f9e57; box-shadow: inset 0 0 0 var(--u) #1d6a3a; }
.ph-callic.no { background: #4a4258; box-shadow: inset 0 0 0 var(--u) #3a3346; }
.ph-call { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: calc(var(--u) * 3); padding: calc(var(--u) * 4); text-align: center; background: #1b2a4a; }
.ph-call b { font-size: calc(var(--u) * 3); color: var(--paper); }
.ph-call p { margin: 0; font-size: calc(var(--u) * 3.2); color: #dfe8ff; }
.ph-ring, .ph-eta { font-size: calc(var(--u) * 2.8); color: #7ee081; }
.ph-hang { width: calc(var(--u) * 14); height: calc(var(--u) * 7); background: #e0302a; cursor: pointer; display: grid; place-items: center; box-shadow: 0 var(--u) 0 #6d1712; }
.ph-hang i { width: calc(var(--u) * 8); height: calc(var(--u) * 2); background: #fff; }
.ph-hang.sel { box-shadow: 0 0 0 var(--u) #ffd60a, 0 calc(var(--u) * 2) 0 #6d1712; }
/* Snapchat */
.ph-kstats { flex: none; display: flex; justify-content: space-between; align-items: center; padding: var(--u) calc(var(--u) * 2.5); font-size: calc(var(--u) * 2.9); background: #3a1416; }
.ph-kstats b { color: var(--sun); }
.ph-op { font: calc(var(--u) * 2.5)/1 'Silk', monospace; color: var(--dim); display: flex; align-items: center; gap: var(--u); }
.ph-op i { display: block; width: calc(var(--u) * 10); height: calc(var(--u) * 2); background: #141018; position: relative; }
.ph-op i::after { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: var(--v); background: #7ee081; }
.ph-tabs { flex: none; display: flex; background: #2a1416; }
.ph-tabs span { flex: 1; text-align: center; font-size: calc(var(--u) * 2.6); padding: var(--u) 0; color: var(--dim); }
.ph-tabs span.on { color: #fff; box-shadow: inset 0 calc(var(--u) * -1) 0 #ffd60a; }
.ph-post { display: flex; gap: calc(var(--u) * 2); padding: calc(var(--u) * 2) calc(var(--u) * 2.5); box-shadow: inset 0 calc(var(--u) * -.5) 0 #2e2740; cursor: pointer; }
.ph-post.mine { background: #2c2618; }
.ph-post.big { flex: 1; overflow-y: auto; cursor: default; }
.ph-pbody { flex: 1; min-width: 0; }
.ph-pname { display: flex; flex-wrap: wrap; align-items: center; gap: 0 var(--u); }
.ph-pname b { font-size: calc(var(--u) * 3.1); color: var(--paper); }
.ph-pname span { font-size: calc(var(--u) * 2.6); color: var(--dim); width: 100%; }
.ph-cert { display: inline-block; width: calc(var(--u) * 2.5); height: calc(var(--u) * 2.5); background: #3c9bff; box-shadow: inset 0 0 0 calc(var(--u) * .5) #bfe3ff; }
.ph-ptext { font-size: calc(var(--u) * 3.1); margin: calc(var(--u) * .5) 0 var(--u); word-break: break-word; }
.ph-ptext u { color: #6ab8ff; text-decoration: none; }
.ph-pstats { display: flex; align-items: center; gap: calc(var(--u) * 2.5); font-size: calc(var(--u) * 2.7); color: var(--dim); }
.ph-pstats .lk { color: #ff8a9a; } .ph-pstats .sh { color: #7ee081; }
.ph-viral { margin-left: auto; background: #ffd60a; color: #141018; font-size: calc(var(--u) * 2.4); padding: 0 var(--u); animation: blink .7s steps(2) infinite; }
.ph-gal { display: grid; grid-template-columns: repeat(3, 1fr); gap: calc(var(--u) * 1.5); padding: calc(var(--u) * 2); }
.ph-gcell { position: relative; aspect-ratio: 4 / 3; background: #141018; cursor: pointer; display: grid; place-items: center; box-shadow: 0 0 0 calc(var(--u) * .5) #141018; }
.ph-gcell .ph-media { width: 100%; height: 100%; }
.ph-gcell.sel { box-shadow: 0 0 0 var(--u) #ffd60a; }
.ph-gcell.done::after { content: 'PUBLIÉ'; position: absolute; left: 0; bottom: 0; font: calc(var(--u) * 2)/1.3 'Silk', monospace; background: #2f9e57; color: #fff; padding: 0 calc(var(--u) * .5); }
.ph-gcell.new img { width: calc(var(--u) * 10); height: calc(var(--u) * 10); }
.ph-vtag { position: absolute; right: calc(var(--u) * .5); top: calc(var(--u) * .5); width: calc(var(--u) * 2); height: calc(var(--u) * 2); background: #e0302a; }
/* images et vidéos (pellicule de 8 images jouée en boucle) */
.ph-media { background-color: #141018; background-repeat: no-repeat; background-size: 100% 100%; position: relative; }
.ph-media.feed { width: calc(var(--u) * 40); height: calc(var(--u) * 30); margin: var(--u) 0; box-shadow: 0 0 0 calc(var(--u) * .5) #141018; }
.ph-media.large { width: calc(var(--u) * 80); height: calc(var(--u) * 60); flex: none; }
.ph-post .ph-media.large { width: calc(var(--u) * 60); height: calc(var(--u) * 45); }
.ph-media.small { width: calc(var(--u) * 24); height: calc(var(--u) * 18); flex: none; }
.ph-media.tiny { width: 100%; height: 100%; }
.ph-vid { animation: phvid 1.1s steps(8, jump-none) infinite; }
@keyframes phvid { from { background-position: 0 0; } to { background-position: 100% 0; } }
.ph-play { position: absolute; left: var(--u); top: var(--u); width: calc(var(--u) * 3); height: calc(var(--u) * 3); background: #e0302a; box-shadow: 0 0 0 calc(var(--u) * .5) #141018; }
.ph-noimg { display: grid; place-items: center; color: var(--dim); font-size: calc(var(--u) * 2.2); }
.ph-chips { display: flex; flex-wrap: wrap; gap: var(--u); padding: calc(var(--u) * 1.5) calc(var(--u) * 2) var(--u); }
.ph-post .ph-chips { padding: var(--u) 0; }
.ph-chip { font: calc(var(--u) * 2.4)/1.4 'Silk', monospace; background: #3a3346; color: var(--paper); padding: 0 var(--u); box-shadow: 0 calc(var(--u) * .5) 0 #141018; }
.ph-chip.risk { background: #a3161f; } .ph-chip.dim { color: var(--dim); background: transparent; box-shadow: none; }
/* appareil photo */
.ph-cam { flex: 1; display: flex; flex-direction: column; background: #0e0c12; }
.ph-vfwrap { position: relative; width: calc(var(--u) * 80); height: calc(var(--u) * 60); flex: none; overflow: hidden; }
.ph-vfwrap canvas { width: 100%; height: 100%; display: block; }
.ph-vfwrap.selfie canvas { transform: scaleX(-1); }
.ph-corner { position: absolute; width: calc(var(--u) * 5); height: calc(var(--u) * 5); }
.ph-corner.a { left: calc(var(--u) * 3); top: calc(var(--u) * 3); box-shadow: inset var(--u) var(--u) 0 #fff8e6; }
.ph-corner.b { right: calc(var(--u) * 3); top: calc(var(--u) * 3); box-shadow: inset calc(var(--u) * -1) var(--u) 0 #fff8e6; }
.ph-corner.c { left: calc(var(--u) * 3); bottom: calc(var(--u) * 3); box-shadow: inset var(--u) calc(var(--u) * -1) 0 #fff8e6; }
.ph-corner.d { right: calc(var(--u) * 3); bottom: calc(var(--u) * 3); box-shadow: inset calc(var(--u) * -1) calc(var(--u) * -1) 0 #fff8e6; }
.ph-rec { position: absolute; left: calc(var(--u) * 3); top: calc(var(--u) * 9); background: #e0302a; color: #fff; font-size: calc(var(--u) * 2.6); padding: 0 var(--u); animation: blink .5s steps(2) infinite; }
.ph-flash { position: absolute; inset: 0; background: #fff8e6; opacity: .85; }
.ph-live { flex: none; display: flex; flex-wrap: wrap; align-items: center; gap: var(--u); padding: calc(var(--u) * 1.5) calc(var(--u) * 2); min-height: calc(var(--u) * 11); background: #1a1622; }
.ph-live > .t { width: 100%; font-size: calc(var(--u) * 2.3); color: var(--dim); }
.ph-modes { flex: none; display: flex; justify-content: center; gap: calc(var(--u) * 4); font-size: calc(var(--u) * 2.7); color: var(--dim); padding: calc(var(--u) * 1.5) 0 0; }
.ph-modes .on { color: var(--sun); box-shadow: 0 var(--u) 0 #ffd60a; }
.ph-shutrow { flex: 1; display: flex; align-items: center; justify-content: space-between; padding: 0 calc(var(--u) * 4); }
.ph-lastshot { width: calc(var(--u) * 14); height: calc(var(--u) * 10.5); box-shadow: 0 0 0 calc(var(--u) * .5) #3a3346; }
.ph-shutter { width: calc(var(--u) * 13); height: calc(var(--u) * 13); background: #fff8e6; display: grid; place-items: center; cursor: pointer; box-shadow: inset 0 0 0 var(--u) #141018, 0 0 0 var(--u) #fff8e6; }
.ph-shutter i { width: calc(var(--u) * 7); height: calc(var(--u) * 7); background: #d8cbb0; }
.ph-shutter.rec i { background: #e0302a; animation: blink .5s steps(2) infinite; }
.ph-shutter.sel { box-shadow: inset 0 0 0 var(--u) #141018, 0 0 0 var(--u) #fff8e6, 0 0 0 calc(var(--u) * 2) #ffd60a; }
.ph-camhint { width: calc(var(--u) * 14); text-align: center; font-size: calc(var(--u) * 2.3); color: var(--dim); }
.ph-score { flex: none; display: flex; align-items: center; gap: calc(var(--u) * 2); padding: var(--u) calc(var(--u) * 2.5); font-size: calc(var(--u) * 3); }
.ph-score i { flex: 1; height: calc(var(--u) * 2.5); background: #141018; position: relative; }
.ph-score i::after { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: var(--v); background: repeating-linear-gradient(90deg, #ffd60a 0 calc(var(--u) * 2), #c9a20a calc(var(--u) * 2) calc(var(--u) * 3)); }
.ph-score b { color: var(--sun); }
.ph-warn { flex: none; background: #5a1a14; color: #ffb4a8; font-size: calc(var(--u) * 2.9); padding: var(--u) calc(var(--u) * 2.5); }
.ph-comp { flex: none; display: flex; gap: calc(var(--u) * 2); padding: calc(var(--u) * 2) calc(var(--u) * 2.5) var(--u); align-items: flex-start; }
.ph-comp .ph-chips { padding: 0 0 var(--u); }
.ph-est { font-size: calc(var(--u) * 2.9); color: #7ee081; }
.ph-cap { flex: none; font-size: calc(var(--u) * 2.4); color: var(--dim); padding: var(--u) calc(var(--u) * 2.5) 0; }
/* carte */
.ph-mapwrap { position: relative; width: calc(var(--u) * 80); height: calc(var(--u) * 56); flex: none; background: #141018; }
.ph-mapwrap canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
.ph-legend { display: grid; grid-template-columns: 1fr 1fr; gap: var(--u) calc(var(--u) * 2); padding: calc(var(--u) * 2.5); font-size: calc(var(--u) * 2.8); color: var(--dim); }
.ph-legend i { display: inline-block; width: calc(var(--u) * 2); height: calc(var(--u) * 2); margin-right: var(--u); box-shadow: 0 0 0 calc(var(--u) * .5) #141018; }
/* écran mort, notification interne */
.ph-dead { position: absolute; inset: 0; z-index: 3; background: #000; display: none; flex-direction: column; align-items: center; justify-content: center; gap: calc(var(--u) * 3); }
#phone.dead .ph-dead { display: flex; }
.ph-dead i { width: calc(var(--u) * 14); height: calc(var(--u) * 7); box-shadow: inset 0 0 0 var(--u) #ff5a4e; position: relative; animation: blink 1s steps(2) infinite; }
.ph-dead i::after { content: ''; position: absolute; right: calc(var(--u) * -2); top: calc(var(--u) * 2); width: var(--u); height: calc(var(--u) * 3); background: #ff5a4e; }
.ph-dead span { font-size: calc(var(--u) * 2.7); color: #ff5a4e; }
.ph-notif { position: absolute; left: calc(var(--u) * 2); right: calc(var(--u) * 2); top: calc(var(--u) * 7); z-index: 2; display: flex; gap: calc(var(--u) * 1.5); align-items: center; padding: calc(var(--u) * 1.2);
  background: #fff8e6; color: #141018; box-shadow: 0 var(--u) 0 #141018; transform: translateY(calc(var(--u) * -30)); pointer-events: none; font-size: calc(var(--u) * 2.8); }
.ph-notif.show { animation: phnotif 2.6s steps(1) forwards; }
@keyframes phnotif { 0% { transform: translateY(calc(var(--u) * -8)); } 5% { transform: translateY(calc(var(--u) * -3)); } 10%, 90% { transform: none; } 95% { transform: translateY(calc(var(--u) * -6)); } 100% { transform: translateY(calc(var(--u) * -30)); } }
.ph-notif img, #phone-toast img { width: calc(var(--u) * 8); height: calc(var(--u) * 8); flex: none; image-rendering: pixelated; }
.ph-notif b, #phone-toast b { display: block; font-size: calc(var(--u) * 3); }
.ph-notif span { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: calc(var(--u) * 62); }
/* icône rangée + aperçu des notifications */
#phone-icon { right: calc(var(--u) * 4); bottom: calc(var(--u) * 17); display: flex; align-items: center; gap: calc(var(--u) * 2); padding: calc(var(--u) * 2) calc(var(--u) * 3); cursor: pointer; z-index: 5; }
#phone-icon img { width: calc(var(--u) * 12); height: calc(var(--u) * 14); image-rendering: pixelated; display: block; }
#phone-icon .ph-badge { top: calc(var(--u) * .5); right: auto; left: calc(var(--u) * 12); }
#phone-icon .ph-icbat { font-size: calc(var(--u) * 3); color: var(--paper); }
#phone-icon kbd { margin: 0; }
#phone-icon.hide { display: none; }
#phone-icon.none { opacity: .45; }
#phone-icon.low .ph-icbat { color: var(--red); animation: blink .6s steps(2) infinite; }
#phone-icon:hover { filter: brightness(1.15); }
#phone-toast { right: calc(var(--u) * 4); bottom: calc(var(--u) * 37); width: calc(var(--u) * 84); display: none; gap: calc(var(--u) * 2); align-items: center; z-index: 5; font-size: calc(var(--u) * 3.2); pointer-events: none; }
#phone-toast.show { display: flex; animation: pulse .4s steps(3); }
#phone-toast b { color: var(--sun); }
#phone-toast span { display: block; color: var(--paper); }
/* interview */
#interview { left: 50%; bottom: calc(var(--u) * 6); transform: translateX(-50%); width: calc(var(--u) * 150); display: none; z-index: 7; }
#interview.show { display: block; }
body:has(#interview.show) #menu { display: none !important; }
.iv-head { display: flex; align-items: center; gap: calc(var(--u) * 3); margin-bottom: calc(var(--u) * 2); }
.iv-head b { display: block; color: var(--sun); font-size: calc(var(--u) * 5); }
.iv-head span { color: var(--dim); font-size: calc(var(--u) * 4); }
.iv-port { background: var(--bg2); box-shadow: 0 0 0 var(--u) var(--ink); line-height: 0; }
.iv-port canvas { image-rendering: pixelated; height: calc(var(--u) * 26); }
.iv-rec { margin-left: auto; background: var(--red); color: #fff; padding: 0 var(--u); font-size: calc(var(--u) * 3.6) !important; animation: blink .6s steps(2) infinite; }
.iv-q { margin: 0 0 calc(var(--u) * 3); font-size: calc(var(--u) * 5.2); color: var(--paper); }
.iv-opt { padding: calc(var(--u) * 1) calc(var(--u) * 2); cursor: pointer; font-size: calc(var(--u) * 4.6); }
.iv-opt.sel { background: #3d3456; box-shadow: inset var(--u) 0 0 var(--sun); }
.iv-opt:hover { background: #2e2740; }
.iv-foot { margin-top: calc(var(--u) * 2); color: var(--dim); font-size: calc(var(--u) * 4); }
.iv-res { display: flex; gap: calc(var(--u) * 6); margin-bottom: calc(var(--u) * 3); font-size: calc(var(--u) * 4.6); }
.iv-res b { color: var(--sun); } .iv-res b.up { color: var(--green); } .iv-res b.down { color: var(--red); }

/* ================= Branche `tel` : lisibilité, bandeau de notification, Snapchat interactif ================= */
/* Corps de texte en Pixelify Sans (pixel, mais aux lettres larges et ouvertes) ; titres en Silkscreen. */
@font-face { font-family: 'PhoneSans'; src: url(../fonts/PixelifySans.ttf) format('truetype'); font-weight: 400 700; }
#phone { --ph-ink: #fff8e6; --ph-dim: #d9ccb0; --ph-w: 76; }
.ph-screen { width: calc(var(--u) * 76); }
.ph-app { font: 400 calc(var(--u) * 3.9)/1.32 'PhoneSans', 'Pixelify', monospace; color: var(--ph-ink); -webkit-font-smoothing: auto; letter-spacing: .01em; }
.ph-app .t, .ph-status .t, .ph-notif .t { letter-spacing: .02em; }
.ph-rowtx b, .ph-pname b { font-size: calc(var(--u) * 3.8); }
.ph-rowtx span { font-size: calc(var(--u) * 3.4); color: var(--ph-dim); }
.ph-rowtx.wrap span { white-space: normal; }
.ph-msg { font-size: calc(var(--u) * 3.8); line-height: 1.32; padding: calc(var(--u) * 1.5) calc(var(--u) * 2.2); }
.ph-msg.them { background: #463e56; color: var(--ph-ink); }
.ph-opt { font-size: calc(var(--u) * 3.6); line-height: 1.3; padding: calc(var(--u) * 1.3) calc(var(--u) * 2.2); }
.ph-opt em { font-size: calc(var(--u) * 3); color: #ffc070; }
.ph-ptext { font-size: calc(var(--u) * 3.7); line-height: 1.32; color: var(--ph-ink); }
.ph-pname span, .ph-pstats { font-size: calc(var(--u) * 3); color: var(--ph-dim); }
.ph-foot, .ph-empty, .ph-legend { font-size: calc(var(--u) * 3.4); color: var(--ph-dim); }
.ph-head .t { font-size: calc(var(--u) * 3.4); }
.ph-tabs span { font-size: calc(var(--u) * 2.8); color: #c8b8a0; }
.ph-chip { font-size: calc(var(--u) * 2.6); }
.ph-status .t { font-size: calc(var(--u) * 3); }
.ph-appic span { font-size: calc(var(--u) * 2.8); }
.ph-date { font-size: calc(var(--u) * 3); }
.ph-type { font-size: calc(var(--u) * 3.8); }
.ph-media.large { width: 100%; height: calc(var(--u) * 57); }
.ph-post .ph-media.large { width: 100%; height: calc(var(--u) * 45); }
.ph-mapwrap { width: 100%; height: calc(var(--u) * 57); }
/* le sac et le suivi de quête se rangent à gauche du téléphone, un peu plus large */
body:has(#phone.open) #inv { right: calc(var(--u-phone, var(--u)) * 96) !important; }
body.phone-over-q:has(#phone.open) #qtrack { right: calc(var(--u-phone, var(--u)) * 94) !important; }

/* bandeau de notification : sous la barre d'état ; l'appli glisse dessous, rien n'est couvert */
.ph-app { transition: top .12s steps(2); }
.ph-screen.notif .ph-app { top: calc(var(--u) * 17); }
.ph-notif { left: 0; right: 0; top: calc(var(--u) * 6); height: calc(var(--u) * 11); transform: none; display: none; padding: var(--u) calc(var(--u) * 2); gap: calc(var(--u) * 2);
  background: #fff8e6; color: #141018; box-shadow: inset 0 calc(var(--u) * -.5) 0 #c9b88f; pointer-events: auto; cursor: pointer; font: 400 calc(var(--u) * 3.3)/1.2 'PhoneSans', 'Pixelify', monospace; z-index: 2; }
.ph-screen.notif .ph-notif { display: flex; animation: none; }
.ph-notif img { width: calc(var(--u) * 7); height: calc(var(--u) * 7); }
.ph-notif > div { flex: 1; min-width: 0; }
.ph-notif b { font-size: calc(var(--u) * 3.3); }
.ph-notif span { max-width: none; }
.ph-notif em { font-style: normal; font-size: calc(var(--u) * 2.6); background: #e0302a; color: #fff; padding: 0 var(--u); }
/* rangé : une seule ligne discrète au-dessus de l'icône, jamais par-dessus le téléphone sorti */
#phone-toast { width: auto; max-width: calc(var(--u) * 72); bottom: calc(var(--u) * 33); padding: var(--u) calc(var(--u) * 2.5); gap: calc(var(--u) * 1.5); font: 400 calc(var(--u) * 3.4)/1.2 'PhoneSans', 'Pixelify', monospace; opacity: .94; }
#phone-toast.show { animation: none; }
#phone-toast b { font-size: calc(var(--u) * 3.4); white-space: nowrap; }
#phone-toast span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
body:has(#phone.open) #phone-toast { display: none !important; }

/* Snapchat : étoiles, photo notée, gestes */
.ph-stars { display: inline-flex; gap: calc(var(--u) * .5); vertical-align: middle; }
.ph-stars i, .ph-gstar .st { display: inline-block; width: calc(var(--u) * 2.5); height: calc(var(--u) * 2.5); background: #4a4258;
  clip-path: polygon(50% 0, 63% 35%, 100% 38%, 70% 60%, 80% 100%, 50% 77%, 20% 100%, 30% 60%, 0 38%, 37% 35%); }
.ph-stars i.on, .ph-gstar .st { background: #ffd60a; }
.ph-shot { position: relative; flex: none; }
.ph-ov { position: absolute; left: 0; right: 0; top: 0; bottom: 0; display: flex; flex-direction: column; justify-content: space-between; pointer-events: none; }
.ph-ovchips { display: flex; flex-wrap: wrap; gap: calc(var(--u) * .7); padding: var(--u); }
.ph-ovchips .ph-chip { background: rgba(20, 16, 24, .82); }
.ph-ovchips .ph-chip.risk { background: rgba(163, 22, 31, .9); }
.ph-ovscore { align-self: flex-end; margin: var(--u); padding: calc(var(--u) * .5) calc(var(--u) * 1.5); background: rgba(20, 16, 24, .85); display: flex; gap: calc(var(--u) * 1.5); align-items: center; }
.ph-ovscore b { color: var(--sun); font: calc(var(--u) * 3)/1 'Silk', monospace; }
.ph-verdict { flex: none; display: flex; justify-content: space-between; padding: var(--u) calc(var(--u) * 2.5); font-size: calc(var(--u) * 3.6); }
.ph-verdict b { color: var(--sun); } .ph-verdict span { color: #7ee081; }
.ph-warn.soft { background: #4a3a14; color: #ffd890; }
.ph-gstar { position: absolute; right: calc(var(--u) * .5); bottom: calc(var(--u) * .5); background: rgba(20, 16, 24, .85); color: #ffd60a; font: calc(var(--u) * 2.4)/1 'Silk', monospace; padding: calc(var(--u) * .4); display: flex; align-items: center; gap: calc(var(--u) * .4); }
.ph-gcell { position: relative; }
.ph-pstats .on { color: #ff8a8a; } .ph-pstats .sh.on { color: #7ee081; }
.ph-flag { display: inline-block; margin: calc(var(--u) * .5) 0; padding: 0 var(--u); font-size: calc(var(--u) * 2.4); background: #ffa62b; color: #141018; }
.ph-flag.ok { background: #7ee081; } .ph-flag.pin { background: #ffd60a; margin-right: var(--u); }
.ph-folw { display: inline-block; width: calc(var(--u) * 2); height: calc(var(--u) * 2); background: #7ee081; box-shadow: 0 0 0 calc(var(--u) * .5) #141018; }
.ph-reply { margin-top: var(--u); padding: var(--u) calc(var(--u) * 1.5); background: #3a3346; font-size: calc(var(--u) * 3.4); }
.ph-reply.me { background: #4a4020; } .ph-reply b { color: var(--sun); }
.ph-quote { flex: none; margin: calc(var(--u) * 2); padding: calc(var(--u) * 1.5) calc(var(--u) * 2); background: #2e2740; font-size: calc(var(--u) * 3.5); box-shadow: inset var(--u) 0 0 #d23a32; max-height: calc(var(--u) * 30); overflow: hidden; }
.ph-quote b { color: var(--sun); }
.ph-opts.grow { flex: 1; max-height: none; }
.ph-opt.on { color: #ff8a8a; } .ph-opt.on.sel { color: #a3161f; }
.ph-opt.good { color: #a8f0a8; } .ph-opt.good.sel { background: #7ee081; color: #141018; }
.ph-post.big { flex: 1 1 auto; min-height: 0; }
.ph-row.com { align-items: flex-start; }
.ph-row.com.hostile .ph-rowtx b { color: #ff9a8a; }
.ph-row.com .me { color: #ffd60a; white-space: normal; }
.ph-avdot { flex: none; width: calc(var(--u) * 6); height: calc(var(--u) * 6); background: #4a4258; box-shadow: 0 0 0 calc(var(--u) * .5) #141018; }
.ph-kst { flex: 1; overflow-y: auto; scrollbar-width: none; padding: calc(var(--u) * 2) calc(var(--u) * 2.5); display: flex; flex-direction: column; gap: calc(var(--u) * 1.5); }
.ph-big { display: flex; align-items: baseline; gap: calc(var(--u) * 2); }
.ph-big b { font: calc(var(--u) * 8)/1 'Silk', monospace; color: var(--sun); }
.ph-big span { color: var(--ph-dim); }
.ph-spark { height: calc(var(--u) * 14); display: flex; align-items: flex-end; gap: calc(var(--u) * .5); background: #1a1622; padding: var(--u); }
.ph-spark i { flex: 1; background: #d23a32; box-shadow: inset 0 var(--u) 0 #ff7a6a; }
.ph-krow { display: flex; justify-content: space-between; font-size: calc(var(--u) * 3.4); }
.ph-krow span { color: var(--ph-dim); } .ph-krow b { color: var(--ph-ink); }
.ph-gauge { display: grid; grid-template-columns: calc(var(--u) * 26) 1fr calc(var(--u) * 6); align-items: center; gap: calc(var(--u) * 1.5); }
.ph-gauge .t { font-size: calc(var(--u) * 2.4); color: var(--ph-dim); }
.ph-gauge i { height: calc(var(--u) * 2.5); background: #141018; position: relative; }
.ph-gauge i::after { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: var(--v); background: #ffd60a; }
.ph-gauge.op i::after { background: #7ee081; } .ph-gauge.risk i::after { background: #ff5a4e; }
.ph-gauge b { font-size: calc(var(--u) * 3); text-align: right; }
/* ---------- appli Rumeurs (ui/phone_rumeurs.js) ---------- */
.h-rum { background: #c4661a; }
.ph-row.rum .ph-rowtx b:not(.ph-flag) { white-space: normal; }
.ph-row.rum .ph-flag { margin: 0 0 calc(var(--u) * .5); }
.ph-flag.bad { background: #ff6a5e; color: #141018; }
.ph-rum { flex: none; padding: calc(var(--u) * 1.6) calc(var(--u) * 2.5); background: #221c2c; box-shadow: inset 0 calc(var(--u) * -.5) 0 #2e2740; }
.ph-rum-txt { margin: calc(var(--u) * .6) 0; font-size: calc(var(--u) * 3.8); line-height: 1.25; color: #fff8e6; }
.ph-rum-k { font-size: calc(var(--u) * 3); line-height: 1.3; color: var(--ph-dim, #d9ccb0); margin-top: calc(var(--u) * .6); }
.ph-rum-k b { color: #ffa62b; font-size: calc(var(--u) * 2.4); margin-right: var(--u); }
.ph-rum-live { font-size: calc(var(--u) * 2.4); color: #9a8fa8; }
.ph-rum-live.on { color: #ffa62b; animation: blink 1s steps(2) infinite; }
.ph-rum-n { display: grid; grid-template-columns: 1fr 1fr; gap: calc(var(--u) * .4) calc(var(--u) * 2); margin-top: calc(var(--u) * .8); font-size: calc(var(--u) * 2.9); color: #d9ccb0; }
.ph-rum-n b { color: #fff8e6; font-size: calc(var(--u) * 3.6); }
.scr-rumlancer .ph-opts, .scr-rumeur .ph-opts { overflow-y: auto; }