:root { --blue:#0047ba; --ink:#003fb3; --yellow:#fff222; --pale:#eceb50; }
* { box-sizing:border-box; }
html,body { margin:0; width:100%; height:100%; overflow:hidden; }
body { background:var(--blue); font-family:'Courier Prime',monospace; }
button { font:inherit; cursor:pointer; -webkit-tap-highlight-color:transparent; }
button:focus-visible { outline:2px solid currentColor; outline-offset:6px; }
[hidden] { display:none !important; }
.screen { position:absolute; inset:0; width:100%; height:100%; height:100svh; padding:clamp(24px,4vw,48px); display:flex; flex-direction:column; opacity:1; transition:opacity 280ms ease; }
.screen.faded { opacity:0; pointer-events:none; }
.blue { background:var(--blue); color:var(--pale); }
.yellow { background:var(--yellow); color:var(--ink); }
h1,h2,p,figure { margin:0; }
h2[tabindex="-1"]:focus { outline:none; }
h1,h2 { font-family:'Special Elite',monospace; font-weight:400; letter-spacing:.07em; }
.home-title { flex:1; display:flex; align-items:center; justify-content:center; text-align:center; }
h1 { font-size:clamp(23px,4.5vw,60px); text-shadow:1px 1px #000,0 0 3px #eceb5066; }
.folders { display:flex; justify-content:flex-end; align-items:flex-start; gap:18px; padding:0 clamp(0px,3vw,48px) 32px 0; }
.folder { display:flex; flex-direction:column; align-items:center; padding:8px 12px; border:0; border-radius:6px; background:none; color:#fff; }
.folder.selected { background:#ffffff38; }
.folder-icon { width:80px; height:64px; filter:drop-shadow(0 4px 5px #0003); }
.folder span { font:500 13px system-ui,sans-serif; margin-top:5px; text-shadow:0 1px 2px #000c; }
.folder.selected span { background:#005fb8; border-radius:3px; }
header { min-height:44px; display:flex; align-items:center; justify-content:space-between; flex-shrink:0; }
.back { border:0; background:none; color:inherit; padding:0; font:40px/1 system-ui,sans-serif; width:44px; height:44px; text-align:left; }
header h2 { font-size:14px; letter-spacing:.26em; }
.header-spacer { width:44px; }
.date-center { margin:auto 0; text-align:center; }
.date-center h2 { font-size:clamp(30px,5.8vw,72px); font-weight:bold; line-height:1.2; }
.event-date { margin-top:12px; font-size:clamp(25px,4vw,48px); letter-spacing:.12em; }
.countdown { margin-top:28px; }
.countdown-caption { font-size:10px; letter-spacing:.25em; text-transform:uppercase; margin-bottom:12px; }
.countdown-grid { display:flex; justify-content:center; gap:clamp(14px,4vw,36px); }
.countdown-unit { min-width:42px; }
.countdown-unit > span { display:block; font-size:clamp(25px,5vw,44px); line-height:1; font-variant-numeric:tabular-nums; }
.countdown-unit small { display:block; margin-top:8px; font-size:9px; letter-spacing:.15em; text-transform:uppercase; }
footer { text-align:center; padding-bottom:24px; font:800 clamp(15px,2vw,26px)/1.35 'Syne',sans-serif; letter-spacing:.02em; }
.photo-stage { flex:1; min-height:0; display:flex; align-items:center; justify-content:center; padding:24px 0 28px; }
.mac-window { width:min(880px,100%); height:min(650px,100%); display:flex; flex-direction:column; background:#1b1b1b; border:1px solid #666; border-radius:12px; overflow:hidden; box-shadow:0 24px 65px #00153766,0 2px 8px #0005; }
.mac-titlebar { height:42px; min-height:42px; display:flex; align-items:center; justify-content:space-between; padding:0 15px; color:#dedede; background:linear-gradient(#303030,#252525); border-bottom:1px solid #111; font:600 13px system-ui,sans-serif; }
.window-controls { display:flex; align-items:center; gap:8px; width:62px; }
.window-dot { width:13px; height:13px; border:1px solid #0002; border-radius:50%; padding:0; display:grid; place-items:center; font:12px/1 system-ui,sans-serif; color:#0009; }
.window-dot span { opacity:0; }
.window-controls:hover span,.window-dot:focus-visible span { opacity:1; }
.close-dot { background:#ff5f57; }.minimize-dot { background:#febc2e; }.zoom-dot { background:#28c840; }
.titlebar-balance { width:62px; }
.mac-photo { flex:1; min-height:0; display:flex; justify-content:center; align-items:center; background:#151515; }
.mac-photo img { display:block; width:100%; height:100%; object-fit:contain; }
.mac-window.expanded { width:100%; height:100%; }
@media(max-width:600px) { .folder-icon { width:64px;height:56px; } .folders { gap:8px; padding-bottom:20px; } footer { padding-bottom:12px; } }
@media(max-height:550px) { .screen { padding:16px 24px; } .photo-stage { padding:18px; } .countdown { margin-top:14px; } .date-center h2 { font-size:30px; } .event-date { font-size:24px; } .countdown-unit > span { font-size:25px; } footer { padding-bottom:0; } .folders { padding-bottom:0; } }
@media(prefers-reduced-motion:reduce) { *,*::before,*::after { transition:none !important; animation:none !important; } }

/* La fenêtre est une couche du bureau, sans nouvelle page. */
.window-layer { z-index:10; background:transparent; pointer-events:none; padding:clamp(24px,4vw,48px); transition:none; }
.window-layer .photo-stage { padding:16px 0 56px; pointer-events:none; }
.window-layer .mac-window { pointer-events:auto; transform-origin:center center; will-change:transform,opacity; }
.window-layer .mac-window:not(.expanded) { width:min(820px,100%); height:min(620px,100%); }
.folder.launching .folder-icon { filter:drop-shadow(0 4px 10px #7abaff99); }
@media(max-width:600px) { .window-layer { padding:20px; } .window-layer .photo-stage { padding:10px 0 75px; } }