/* Écran du laptop : verrouillage puis bureau épuré */
.wall{position:absolute;inset:0;background:radial-gradient(70% 60% at 78% 105%,rgba(232,184,106,.16),transparent 60%),radial-gradient(120% 95% at 30% 115%,#1f3474 0%,#0b1433 45%,#04060d 82%);font-family:var(--ui);color:#eef1f8;overflow:hidden}
.wall::after{content:"";position:absolute;inset:0;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence baseFrequency='.9'/%3E%3C/filter%3E%3Crect width='120' height='120' filter='url(%23n)' opacity='.07'/%3E%3C/svg%3E");pointer-events:none}
.lock{z-index:3;display:flex;flex-direction:column;align-items:center;justify-content:center;cursor:pointer;transition:transform .7s cubic-bezier(.7,0,.25,1),opacity .5s .15s}
.lock .dt{font:500 10.5px var(--mono);letter-spacing:.28em;text-transform:uppercase;opacity:.6}
.lock .tm{font:italic 400 92px/1 var(--serif);letter-spacing:-3px;margin:4px 0 26px}
.lock .who{display:flex;align-items:center;gap:9px;font:600 11px var(--ui);letter-spacing:.02em}
.lock .who i{width:26px;height:26px;border-radius:50%;background:#dfe4ec center 12%/170% no-repeat;box-shadow:0 0 0 1.5px rgba(255,255,255,.5)}
.lock .go{margin-top:14px;font:500 10.5px var(--ui);letter-spacing:.06em;padding:6px 13px;border-radius:999px;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.16);backdrop-filter:blur(10px);animation:breathe 2.4s ease-in-out infinite}
@keyframes breathe{50%{background:rgba(255,255,255,.16);border-color:rgba(255,255,255,.32)}}
.screen.open .lock{transform:translateY(-100%);opacity:0;pointer-events:none}
.desk{z-index:2;display:flex;flex-direction:column;opacity:0;transition:opacity .6s .25s}
.screen.open .desk{opacity:1}
.desk .bar{display:flex;justify-content:space-between;padding:7px 12px;font:600 10.5px var(--ui);letter-spacing:.04em;opacity:.75}
.desk .bar span:first-child::before{content:"";display:inline-block;width:5px;height:5px;border-radius:50%;background:var(--gold);margin-right:6px;vertical-align:1px}
.hero-lib{all:unset;box-sizing:border-box;cursor:pointer;margin:auto;width:430px;display:grid;grid-template-columns:1fr 150px;align-items:center;gap:22px;padding:22px 24px;border-radius:16px;background:linear-gradient(160deg,rgba(255,255,255,.09),rgba(255,255,255,.03));border:1px solid rgba(255,255,255,.14);box-shadow:inset 0 1px 0 rgba(255,255,255,.12),0 18px 40px rgba(0,0,0,.35);transition:transform .35s cubic-bezier(.2,.8,.2,1),border-color .3s}
.hero-lib:hover,.hero-lib:focus-visible{transform:translateY(-3px);border-color:rgba(232,184,106,.55)}
.hero-lib small{font:500 10px var(--mono);letter-spacing:.22em;text-transform:uppercase;color:var(--gold)}
.hero-lib h3{margin:6px 0 6px;font:italic 400 34px/1 var(--serif);letter-spacing:-1px}
.hero-lib p{margin:0 0 14px;font:400 11px/1.5 var(--ui);color:#c9d1e6}
.hero-lib em{font:600 10.5px var(--ui);font-style:normal;border-bottom:1px solid var(--gold);padding-bottom:2px}
.shelf{display:flex;align-items:flex-end;gap:3px;height:96px;padding:0 8px 6px;border-bottom:2px solid rgba(255,255,255,.25)}
.shelf i{flex:1;border-radius:2px 2px 0 0;background:var(--c);box-shadow:inset -2px 0 0 rgba(0,0,0,.2);transition:transform .35s cubic-bezier(.2,.8,.2,1)}
.hero-lib:hover .shelf i:nth-child(3){transform:translateY(-10px) rotate(-4deg)}
.dock{display:flex;gap:6px;margin:0 auto 12px;padding:5px;border-radius:13px;background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.12);backdrop-filter:blur(12px)}
.dock button{all:unset;cursor:pointer;position:relative;width:28px;height:28px;border-radius:8px;display:grid;place-items:center;background:rgba(255,255,255,.06);transition:transform .25s cubic-bezier(.2,.8,.2,1),background .2s}
.dock button:hover,.dock button:focus-visible{transform:translateY(-3px);background:rgba(255,255,255,.14)}
.dock svg{width:14px;height:14px;stroke:#eef1f8;fill:none;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.dock button::after{content:attr(aria-label);position:absolute;bottom:34px;left:50%;transform:translateX(-50%);white-space:nowrap;font:500 10px var(--ui);padding:3px 6px;border-radius:5px;background:rgba(0,0,0,.7);opacity:0;pointer-events:none;transition:opacity .2s}
.dock button:hover::after,.dock button:focus-visible::after{opacity:1}

/* Téléphone : l'écran du laptop ne fait que ~260 px de large, on agrandit tout (≈ ×2,2) */
@media (max-width:700px){
 .lock .dt{font-size:24px;letter-spacing:.18em}
 .lock .tm{font-size:150px;margin:6px 0 34px}
 .lock .who{font-size:26px;gap:14px}.lock .who i{width:52px;height:52px}
 .lock .go{font-size:26px;padding:14px 30px;margin-top:26px}
 .desk .bar{font-size:22px;padding:14px 22px}
 .desk .bar span:first-child::before{width:12px;height:12px;margin-right:12px}
 .hero-lib{width:520px;grid-template-columns:1fr;gap:0;padding:30px 34px;border-radius:24px}
 .hero-lib small{font-size:20px}.hero-lib h3{font-size:72px;margin:10px 0 18px}
 .hero-lib p,.shelf{display:none}.hero-lib em{font-size:28px;padding-bottom:4px}
 .dock{gap:14px;padding:12px;border-radius:26px;margin-bottom:22px}
 .dock button{width:66px;height:66px;border-radius:18px}.dock svg{width:32px;height:32px}
 .dock button::after{display:none}
}

/* Barre du bureau : titre en serif italique, heure en mono, petites capitales espacées */
.desk .bar{align-items:center;opacity:1;font:500 10px var(--ui);background:linear-gradient(180deg,rgba(0,0,0,.28),transparent)}
.desk .bar span:first-child::before{content:none}
.desk .bar .bt,.desk .bar .bc{display:flex;align-items:baseline;gap:7px}
.desk .bar .bt b{font:italic 400 15px/1 "Instrument Serif",Georgia,serif;letter-spacing:.01em;color:#fff;display:flex;align-items:center;gap:6px}
.desk .bar .bt b::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--gold);box-shadow:0 0 8px var(--gold)}
.desk .bar i{font:500 8.5px/1 "JetBrains Mono",monospace;letter-spacing:.2em;text-transform:uppercase;font-style:normal;color:rgba(255,255,255,.62)}
.desk .bar .bc b{font:500 12px/1 "JetBrains Mono",monospace;font-variant-numeric:tabular-nums;color:#fff;letter-spacing:.02em}
.desk .bar .bc b s{text-decoration:none;animation:blink 1s steps(1) infinite;color:var(--gold)}
@keyframes blink{50%{opacity:.2}}
@media (prefers-reduced-motion:reduce){.desk .bar .bc b s{animation:none}}
@media (max-width:700px){.desk .bar .bt b{font-size:30px}.desk .bar .bt b::before{width:12px;height:12px}.desk .bar i{font-size:15px}.desk .bar .bc b{font-size:24px}}