/* ===== Fond d'écran 3D personnel (desktop-scene.css) — markup et comportement : desktop-scene.js =====
   Windows : « pile de verre » (5 cartes de projets en perspective). Linux : « système solaire de projets » (plan orbital incliné).
   Uniquement transform / opacity ; will-change seulement pendant le mouvement (.is-moving). Aucune boucle d'animation.
   .ds-static : scène à plat (même disposition) en mode appareil lent, reduced-motion, « Animations » éteint, petit écran. */

.ds { --u: 1px; position: absolute; z-index: 1; pointer-events: none; perspective: calc(1250 * var(--u)); perspective-origin: 50% 40%; }
.ds-tilt { position: absolute; inset: 0; transform-style: preserve-3d; transform: rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)); transition: transform .5s cubic-bezier(.2, .7, .2, 1); }
.ds.is-moving .ds-tilt, .ds.is-moving .ds-orbit, .ds.is-moving .ds-planet, .ds.is-moving .ds-card { will-change: transform; }
.ds button { font-family: inherit; }
.ds-lin .ds-hint { bottom: calc(-84 * var(--u)); }
.ds-hint { position: absolute; left: 0; right: 0; bottom: calc(-46 * var(--u)); margin: 0; text-align: center; pointer-events: none; }
.ds-hint span { display: inline-block; padding: 6px 14px; border-radius: 99px; background: #0b1a33d9; color: #fff; font: 500 13px/1.3 'DM Sans', system-ui, sans-serif; }
.ds-img { position: absolute; inset: 0; display: block; overflow: hidden; }
.ds-img img { display: block; width: 100%; height: 100%; object-fit: cover; user-select: none; -webkit-user-drag: none; }
.ds-img--empty { display: grid; place-items: center; background: linear-gradient(135deg, var(--pg-g1, #5e5ce6), var(--pg-g2, #3a8fd9)); }
.ds-img--empty i { font: 700 calc(30 * var(--u)) 'IBM Plex Mono', monospace; font-style: normal; color: #fff; text-shadow: 0 2px 8px #0006; }

/* ---------- WINDOWS : pile de verre ---------- */
.ds-win { left: 54%; top: 55%; width: calc(560 * var(--u)); height: calc(330 * var(--u)); margin: calc(-165 * var(--u)) 0 0 calc(-280 * var(--u)); }
.ds-win .ds-tilt { transform: rotateX(calc(5deg + var(--rx, 0deg))) rotateY(calc(-9deg + var(--ry, 0deg))); }      /* pose de repos (la parallaxe ajoute 6° au plus) */
.ds-win .ds-mono { position: absolute; right: calc(6 * var(--u)); bottom: calc(-2 * var(--u)); width: calc(132 * var(--u)); height: calc(132 * var(--u)); display: grid; place-items: center; border-radius: calc(34 * var(--u));
  transform: translateZ(calc(-60 * var(--u))); border: 1px solid #ffffff55; background: linear-gradient(145deg, #ffffff2e, #ffffff0d); box-shadow: inset 0 0 calc(40 * var(--u)) #ffffff26, 0 calc(20 * var(--u)) calc(50 * var(--u)) #04132b66; }
.ds-win .ds-mono span { font: 800 calc(52 * var(--u))/1 'DM Sans', system-ui, sans-serif; letter-spacing: -.06em; color: #fff; text-shadow: 0 2px 14px #0a2a5a99; }
:root[data-theme="light"] .ds-win .ds-mono { background: linear-gradient(145deg, #ffffffd9, #ffffff8c); border-color: #ffffffcc; }
:root[data-theme="light"] .ds-win .ds-mono span { color: #0d2342; text-shadow: none; }
.ds-stack { position: absolute; inset: 0; transform-style: preserve-3d; --sp: 1; }
.ds-stack:hover { --sp: 1.1; }
.ds-card { --lz: 0px; --ly: 0px; position: absolute; z-index: calc(10 - var(--k)); left: 0; top: 0; width: calc(232 * var(--u)); height: calc(146 * var(--u)); padding: 0; overflow: hidden; border: 1px solid #ffffff66; border-radius: calc(12 * var(--u)); background: #0d2342; color: #fff; text-align: start; cursor: pointer; pointer-events: auto;
  transform: translate3d(calc(var(--k) * 78 * var(--u) * var(--sp)), calc((4 - var(--k)) * 43 * var(--u) * var(--sp) + var(--ly)), calc(var(--k) * -48 * var(--u) + var(--lz)));
  box-shadow: 0 calc(16 * var(--u)) calc(34 * var(--u)) #04132b73, inset 0 0 0 1px #ffffff26; transition: transform .4s cubic-bezier(.2, .7, .2, 1), box-shadow .3s, border-color .3s; }
.ds-card::after { content: ''; position: absolute; inset: 0; background: linear-gradient(135deg, #ffffff40, #ffffff00 42%); pointer-events: none; }
.ds-card:hover, .ds-card:focus-visible { --lz: calc(46 * var(--u)); --ly: calc(-8 * var(--u)); border-color: #fff; box-shadow: 0 calc(24 * var(--u)) calc(44 * var(--u)) #04132b99, inset 0 0 0 1px #ffffff40; outline: none; }
.ds-card:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }
.ds-card .ds-img { inset: calc(30 * var(--u)) 0 0; }
.ds-cap { position: absolute; z-index: 2; left: 0; right: 0; top: 0; height: calc(30 * var(--u)); display: flex; align-items: center; gap: 8px; padding: 0 10px; background: #0a1b36eb; font: 600 calc(12 * var(--u))/1.2 'DM Sans', system-ui, sans-serif; }
.ds-cap b { flex: none; font: 600 calc(10 * var(--u)) 'IBM Plex Mono', monospace; color: #9fc4ee; }
.ds-t { min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
@keyframes dsDeal { from { opacity: 0; translate: 0 calc(34 * var(--u)); } }
.ds-win.ds-intro .ds-card { animation: dsDeal .7s cubic-bezier(.2, .8, .2, 1) both; animation-delay: calc((4 - var(--k)) * 90ms); }

/* ---------- LINUX : système solaire de projets ---------- */
.ds-lin { --tilt: 62deg; --spin: 0deg; left: 55%; top: 60%; width: calc(720 * var(--u)); height: calc(420 * var(--u)); margin: calc(-210 * var(--u)) 0 0 calc(-360 * var(--u)); }
.ds-plane { position: absolute; left: 50%; top: 50%; width: 0; height: 0; transform-style: preserve-3d; transform: rotateX(var(--tilt)); }
.ds-ring { position: absolute; width: calc(var(--r) * 2 * var(--u)); height: calc(var(--r) * 2 * var(--u)); left: calc(var(--r) * -1 * var(--u)); top: calc(var(--r) * -1 * var(--u)); border: 1px solid #ffffff2e; border-radius: 50%; }
.ds-orbit { position: absolute; left: 0; top: 0; width: 0; height: 0; transform-style: preserve-3d; transform: rotateZ(calc(var(--a) + var(--spin) * var(--sp))); transition: transform .7s cubic-bezier(.2, .7, .2, 1); }
.ds-arm { position: absolute; left: 0; top: 0; width: 0; height: 0; transform-style: preserve-3d; transform: translateX(calc(var(--r) * var(--u))); }
.ds-planet { --hs: 1; position: absolute; left: calc(var(--sz) * var(--pu, var(--u)) / -2); top: calc(var(--sz) * var(--pu, var(--u)) / -2); width: calc(var(--sz) * var(--pu, var(--u))); height: calc(var(--sz) * var(--pu, var(--u))); padding: 0; border: 0; border-radius: 50%; background: #2a1d33; cursor: pointer; pointer-events: auto; transform-style: flat;
  transform: rotateZ(calc(-1 * (var(--a) + var(--spin) * var(--sp)))) rotateX(calc(-1 * var(--tilt))) scale(var(--hs)); box-shadow: 0 0 0 2px #ffffff4d, 0 calc(8 * var(--u)) calc(22 * var(--u)) #000a; transition: transform .7s cubic-bezier(.2, .7, .2, 1), box-shadow .25s; }
.ds-planet .ds-img { border-radius: 50%; }
.ds-planet::after { content: ''; position: absolute; inset: 0; border-radius: 50%; background: radial-gradient(circle at 32% 28%, #ffffff59, #fff0 38%), radial-gradient(circle at 72% 78%, #00000073, #0000 62%); pointer-events: none; }
.ds-planet:hover, .ds-planet:focus-visible { --hs: 1.2; box-shadow: 0 0 0 3px #fff, 0 calc(10 * var(--u)) calc(28 * var(--u)) #000c; outline: none; z-index: 2; }
.ds-planet:focus-visible { box-shadow: 0 0 0 3px #fff, 0 0 0 6px #e95420; }
.ds-name { position: absolute; left: 50%; top: 100%; margin-top: 8px; max-width: 240px; padding: 4px 11px; overflow: hidden; transform: translateX(-50%); border-radius: 99px; background: #150d1bf2; color: #fff; font: 600 13px/1.3 var(--font, 'DM Sans', system-ui, sans-serif); white-space: nowrap; text-overflow: ellipsis; opacity: 0; transition: opacity .2s; pointer-events: none; }
.ds-planet:hover .ds-name, .ds-planet:focus-visible .ds-name { opacity: 1; }
.ds-sun { position: absolute; left: 50%; top: 50%; width: calc(132 * var(--u)); height: calc(132 * var(--u)); margin: calc(-66 * var(--u)) 0 0 calc(-66 * var(--u)); display: grid; place-items: center; border-radius: 50%;
  background: radial-gradient(circle at 36% 30%, #ffc790, #ff8a3d 46%, #e95420 80%, #b53b12); box-shadow: 0 0 calc(56 * var(--u)) calc(8 * var(--u)) #e9542099, 0 0 calc(130 * var(--u)) #e9542055; }
.ds-sun span { font: 800 calc(44 * var(--u))/1 var(--font, 'DM Sans', system-ui, sans-serif); letter-spacing: -.05em; color: #2a0d05; }
@keyframes dsRev { from { rotate: 0 0 1 -360deg; } }
@keyframes dsRevBack { from { rotate: 0 0 1 360deg; } }
.ds-lin.ds-intro .ds-orbit { animation: dsRev 3.6s cubic-bezier(.25, .7, .2, 1) both; }
.ds-lin.ds-intro .ds-planet { animation: dsRevBack 3.6s cubic-bezier(.25, .7, .2, 1) both; }

/* ---------- Décor à plat : appareil lent, reduced-motion, « Animations » éteint ---------- */
.ds-static .ds-tilt, .ds-static .ds-orbit, .ds-static .ds-planet, .ds-static .ds-card { transition: none; }
.ds-static .ds-stack:hover { --sp: 1; }
@media (prefers-reduced-motion: reduce) { .ds *, .ds-tip { animation: none !important; transition: none !important; } }
body.no-anim .ds *, body.no-anim .ds-tip { animation: none !important; transition: none !important; }

/* ---------- Titre du bureau : plus petit et moins envahissant ---------- */
/* Windows : une ligne d'accueil (pastille translucide foncée : contraste ≥ 4,5:1 en thème clair comme sombre) */
body.windows .center-copy { left: calc(54% - 280px) !important; right: auto !important; top: 5.5% !important; max-width: min(560px, calc(100% - 32px)); }
.center-copy .dw-line { color: #fff; }
.dw-line { display: inline-block; margin: 0; padding: 8px 16px; border-radius: 99px; background: #0b2a54b3; color: #fff; font: 600 15px/1.35 'DM Sans', system-ui, sans-serif; letter-spacing: .01em; box-shadow: 0 6px 18px #04132b40; animation: dwIn .6s cubic-bezier(.2, .8, .2, 1) .2s both; }
@keyframes dwIn { from { opacity: 0; transform: translateY(8px); } }
/* Linux : ligne d'invite décorative, en bas à droite (tapée une fois par linux-conky.js) */
body.linux .brand { left: auto; right: 24px; top: auto; bottom: 22px; transform: none; }
.brand-prompt { margin: 0; padding: 7px 14px; border-radius: 10px; background: #12091ad1; color: #f2ecf5; font: 500 14px/1.4 'Ubuntu Mono', 'IBM Plex Mono', ui-monospace, monospace; white-space: nowrap; box-shadow: 0 8px 22px #0006; }
.bp-u { color: #8ae234; font-weight: 700; } .bp-p { color: #8fb8ff; font-weight: 700; } .bp-s { color: #f2ecf5; }
.bp-caret { display: inline-block; width: .55em; height: 1.05em; margin-inline-start: 2px; vertical-align: -.15em; background: #f2ecf5; opacity: .85; }
.brand-prompt.is-done .bp-caret { opacity: .45; }

/* ---------- Petit écran : version réduite, statique, 3 projets ---------- */
@media (max-width: 899px) {
  .ds { --u: .46px; }
  .ds-win { left: auto; right: 12px; top: 33%; width: calc(388 * var(--u)); height: calc(232 * var(--u)); margin: 0; }
  .ds-win .ds-card:nth-child(n + 4) { display: none; }
  .ds-card { transform: translate3d(calc(var(--k) * 78 * var(--u)), calc((2 - var(--k)) * 43 * var(--u)), calc(var(--k) * -48 * var(--u))); }
  .ds-win .ds-mono { display: none; }
  .ds-lin { --u: .4px; --pu: .7px; left: auto; right: 4px; top: 38%; width: calc(560 * var(--u)); height: calc(330 * var(--u)); margin: 0; }
  .ds-orbit[data-k="3"], .ds-orbit[data-k="4"], .ds-ring[data-k="3"], .ds-ring[data-k="4"] { display: none; }
  .ds-sun { width: calc(100 * var(--u)); height: calc(100 * var(--u)); margin: calc(-50 * var(--u)) 0 0 calc(-50 * var(--u)); }
  .ds-sun span { font-size: calc(34 * var(--u)); }
  .ds-name { display: none; }
  .ds-hint { display: none; }
  body.windows .center-copy { left: 12px !important; right: auto !important; top: auto !important; bottom: 74px; }
  .dw-line { font-size: 13px; padding: 6px 12px; }
  body.linux .brand { right: 10px; bottom: 92px; }
  .brand-prompt { font-size: 12px; padding: 5px 10px; }
}

/* ---------- Indice « Commencez par mes projets » ---------- */
.ds-tip { position: fixed; z-index: 9000; max-width: min(260px, calc(100vw - 16px)); padding: 9px 14px; border-radius: 10px; background: #0d1f3a; color: #fff; font: 600 14px/1.3 'DM Sans', system-ui, sans-serif; box-shadow: 0 12px 30px #0009; opacity: 0; transform: translateX(-6px); transition: opacity .35s ease, transform .35s ease; pointer-events: none; }
.ds-tip.is-on { opacity: 1; transform: none; }
.ds-tip::before { content: ''; position: absolute; left: -6px; top: 50%; width: 12px; height: 12px; margin-top: -6px; transform: rotate(45deg); background: inherit; }
.ds-tip.is-left::before { left: auto; right: -6px; }
.fx-icon.is-hinted, .desktop-icon.is-hinted { background: #ffffff2e; border-color: #ffffffa6; box-shadow: 0 0 0 2px #ffffff66; }