/* ===== Couche animations + 3D (desktop-effects.css) ===== */
:root{--fx-ease:cubic-bezier(.2,.8,.2,1)}
/* Position de la souris (--mx / --my) : déclarées « non héritées ». Le JS ne les pose que sur les éléments qui
   s'en servent ; le navigateur ne recalcule donc plus le style de toutes les fenêtres à chaque mouvement de souris. */
@property --mx{syntax:'<number>';inherits:false;initial-value:0}
@property --my{syntax:'<number>';inherits:false;initial-value:0}
.desktop::before{--mx:inherit;--my:inherit}
.desktop{perspective:1400px;perspective-origin:50% 40%}

/* Fond parallaxe 3D : étoiles + montagnes à plusieurs profondeurs */
.fx-stars{position:absolute;inset:-5%;pointer-events:none;background:
 radial-gradient(1.5px 1.5px at 12% 20%,#fff9,transparent),radial-gradient(1px 1px at 33% 12%,#fff8,transparent),
 radial-gradient(1.5px 1.5px at 58% 26%,#fffb,transparent),radial-gradient(1px 1px at 81% 14%,#fff8,transparent),
 radial-gradient(1px 1px at 92% 34%,#fff9,transparent),radial-gradient(1.5px 1.5px at 70% 8%,#fffa,transparent);
 transform:translate3d(calc(var(--mx,0)*-8px),calc(var(--my,0)*-6px),-200px) scale(1.3);animation:fxTwinkle 4s ease-in-out infinite alternate}
.mountains{transform:translate3d(calc(var(--mx,0)*-18px),calc(var(--my,0)*-10px),-80px) scale(1.12);transition:transform .25s ease-out;will-change:transform}
.fx-layer{position:absolute;inset:auto -6% 0;height:34%;pointer-events:none;clip-path:polygon(0 70%,12% 50%,24% 66%,38% 26%,52% 68%,64% 46%,78% 70%,90% 36%,100% 58%,100% 100%,0 100%);
 background:linear-gradient(#0f2f58cc,#091d3a);transform:translate3d(calc(var(--mx,0)*-34px),calc(var(--my,0)*-16px),0) scale(1.1);transition:transform .25s ease-out}
@keyframes fxTwinkle{from{opacity:.55}to{opacity:1}}

/* Titre du bureau : léger tilt (la scène 3D est dans desktop-scene.css) */
.center-copy{transform-style:preserve-3d;transform:rotateY(calc(var(--mx,0)*5deg)) rotateX(calc(var(--my,0)*-4deg));transition:transform .2s ease-out}
.center-copy h1{text-shadow:0 14px 30px #0a2a5a88}

/* Icônes bureau : tilt 3D + lévitation au survol */
.win-icons button,.desktop-projects{transform-style:preserve-3d;transition:transform .18s var(--fx-ease),background .18s,box-shadow .18s;will-change:transform}
.win-icons button:hover,.desktop-projects:hover{transform:perspective(500px) translateZ(14px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg));filter:drop-shadow(0 12px 12px #0a2a5a66)}
.win-icons button span,.desktop-projects span{transition:transform .25s var(--fx-ease)}
.win-icons button:hover span,.desktop-projects:hover span{transform:translateZ(24px) scale(1.12)}
.win-icons button{animation:fxIconIn .5s var(--fx-ease) both;animation-delay:calc(var(--i,0)*70ms + .2s)}
@keyframes fxIconIn{from{opacity:0;transform:translateY(-18px) rotateX(-60deg)}to{opacity:1;transform:none}}

/* Fenêtres : ouverture 3D, profondeur selon focus, tilt pendant drag */
.window,.contact-window-panel{transform-origin:50% 100%}
@keyframes fxOpen{0%{opacity:0;transform:perspective(1200px) rotateX(14deg) translateY(40px) scale(.9)}60%{opacity:1}100%{opacity:1;transform:perspective(1200px) none}}
@keyframes fxClose{to{opacity:0;transform:perspective(1200px) rotateX(-10deg) translateY(30px) scale(.9)}}
.window:not(.competence-window):not(.experience-window):not(.education-window){animation:fxOpen .42s var(--fx-ease)}
.window.competence-window,.window.experience-window,.window.education-window{animation:fxOpen .42s var(--fx-ease)}
.contact-window-panel{animation:fxOpen .42s var(--fx-ease)!important}
.window.fx-closing{animation:fxClose .22s ease-in forwards;pointer-events:none}
.window{transition:box-shadow .25s,opacity .25s,filter .25s}
.window:not(.inactive){box-shadow:0 40px 90px #05204488,0 0 0 1px #ffffff55}
.window.inactive{box-shadow:0 14px 34px #05204455;filter:saturate(.85)}
/* Pendant le déplacement : ombre allégée et flou de la barre des tâches coupé, le temps du geste (choix validé) */
.window.fx-dragging{box-shadow:0 16px 36px #05204466!important;transition:none;will-change:transform}
body.fx-win-moving .taskbar{backdrop-filter:none}
.window.fx-dragging .window-head{cursor:grabbing}

/* Cartes compétences/expérience : tilt 3D piloté en JS */
.skill-card{transform-style:preserve-3d;transition:transform .2s var(--fx-ease),box-shadow .2s,opacity .2s}
.skill-card.fx-tilt:hover{transform:perspective(700px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg)) translateZ(10px)}
.skill-card.fx-tilt:hover .skill-icon{transform:translateZ(28px)}
.skill-icon{transition:transform .25s var(--fx-ease)}

/* Barre des tâches : boutons de fenêtres ouvertes */
.task-apps{display:flex;gap:5px;margin-left:6px}
.task-app{position:relative;width:46px!important;height:42px;border-radius:8px;font-size:19px;background:#ffffff66;transition:transform .18s var(--fx-ease),background .18s;animation:fxTaskIn .35s var(--fx-ease)}
.task-app:hover{transform:translateY(-4px) scale(1.06);background:#fff}
.task-app::after{content:'';position:absolute;bottom:3px;left:50%;width:8px;height:3px;border-radius:3px;background:#7b8ea3;transform:translateX(-50%);transition:width .25s var(--fx-ease),background .2s}
.task-app.is-active::after{width:20px;background:var(--pink,#E91E63)}
.task-app.is-active{background:#fff}
.task-app.is-min{opacity:.75}
@keyframes fxTaskIn{from{opacity:0;transform:translateY(24px) scale(.6)}to{opacity:1;transform:none}}
.taskbar .start{transition:transform .2s var(--fx-ease)}
.taskbar .start:hover{transform:rotateY(180deg) scale(1.08)}
.taskbar .start:active{transform:scale(.9)}

/* Menu Démarrer animé */
.start-menu{transform-origin:50% 100%;transition:none}
.start-menu.fx-show{animation:fxStart .3s var(--fx-ease)}
@keyframes fxStart{from{opacity:0;transform:translateX(-50%) perspective(900px) rotateX(-12deg) translateY(30px) scale(.95)}to{opacity:1;transform:translateX(-50%)}}
.start-menu input.fx-search{width:100%;padding:11px 14px;border:1px solid #c9dce9;border-radius:9px;font:14px 'DM Sans',sans-serif;outline:none;background:#fff;margin-bottom:14px}
.start-menu input.fx-search:focus{border-color:#3884bf;box-shadow:0 0 0 3px #3884bf22}
.pinned-grid>*{transition:transform .2s var(--fx-ease)}
.pinned-grid>*:hover{transform:translateY(-4px) scale(1.05)}
.pinned-grid>.fx-hide{display:none}

/* Menu contextuel + toasts */
.fx-ctx{position:fixed;z-index:9000;min-width:190px;padding:6px;background:#f4f8fcf2;color:#17304d;border:1px solid #fff9;border-radius:10px;box-shadow:0 18px 50px #09203a66;backdrop-filter:blur(14px);animation:fxOpen .18s var(--fx-ease);font:13px 'DM Sans',sans-serif}
.fx-ctx button{display:block;width:100%;text-align:left;border:0;background:none;padding:8px 12px;border-radius:6px;cursor:pointer;font:inherit;color:inherit}
.fx-ctx button:hover{background:#dbe9f8}
.fx-toasts{position:fixed;right:16px;bottom:80px;z-index:9000;display:grid;gap:8px}
.fx-toast{min-width:240px;padding:12px 16px;background:#f4f8fcf2;color:#17304d;border-radius:10px;border-left:4px solid var(--pink,#E91E63);box-shadow:0 14px 40px #09203a55;font:13px 'DM Sans',sans-serif;animation:fxToastIn .4s var(--fx-ease)}
.fx-toast.out{animation:fxToastOut .3s ease-in forwards}
.fx-toast small{display:block;color:#556b82;margin-top:3px}
@keyframes fxToastIn{from{opacity:0;transform:translateX(60px) rotateY(-25deg)}to{opacity:1;transform:none}}
@keyframes fxToastOut{to{opacity:0;transform:translateX(60px)}}

@media (max-width:899px){.fx-stars,.fx-layer{display:none}}
@media (prefers-reduced-motion:reduce){
 *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}
 .mountains,.center-copy{transform:none!important}
}

/* ===== Icônes du bureau (grille) ===== */
.fx-grid{position:absolute;inset:0 0 0 0;z-index:3;pointer-events:none}
.fx-icon{position:absolute;width:96px;height:100px;padding:8px 4px;border:1px solid transparent;border-radius:10px;background:transparent;color:#fff;display:grid;grid-template-rows:46px auto;justify-items:center;align-content:center;gap:4px;cursor:pointer;pointer-events:auto;text-shadow:0 2px 4px #0a2346;touch-action:none;user-select:none;
 transition:left .35s var(--fx-ease),top .35s var(--fx-ease),transform .2s var(--fx-ease),background .2s,border-color .2s,box-shadow .2s;
 animation:fxIconIn .6s var(--fx-ease) both,fxFloat 6s ease-in-out infinite;animation-delay:calc(var(--i,0)*80ms + .3s),calc(var(--i,0)*-.7s)}
.fx-icon small{font:500 12px 'DM Sans',sans-serif;line-height:1.15;text-align:center}
.fx-glyph{font-size:32px;line-height:46px;color:#e3f1ff;transition:transform .25s var(--fx-ease),text-shadow .25s}
.fx-icon:hover{background:#ffffff24;border-color:#ffffff55;transform:perspective(500px) translateZ(14px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg));box-shadow:0 14px 26px #0a234666;animation-play-state:running,paused}
.fx-icon:hover .fx-glyph{transform:translateZ(26px) scale(1.18);text-shadow:0 0 18px #9fd0ff}
.fx-icon.is-selected{background:#4b8bc555;border-color:#9fd0ff99;box-shadow:0 0 0 1px #ffffff33 inset}
.fx-icon.is-dragging{z-index:20;opacity:.85;transition:none;transform:scale(1.12) rotate(-3deg);cursor:grabbing;animation:none;box-shadow:0 26px 40px #0a234688}
.fx-icon:focus-visible{outline:2px solid #fff;outline-offset:2px}
.fx-ghost{display:none;position:absolute;width:96px;height:100px;border:2px dashed #ffffff88;border-radius:10px;background:#ffffff14;pointer-events:none;animation:fxPulse 1s ease-in-out infinite}
@keyframes fxFloat{0%,100%{translate:0 0}50%{translate:0 -4px}}
@keyframes fxPulse{50%{background:#ffffff2e}}
.center-copy{right:16%!important;top:22%!important}

/* ===== Fond animé ===== */
.desktop{background:linear-gradient(140deg,#4b8bc5,#16477d 50%,#0e2750);background-size:220% 220%;animation:fxWall 22s ease-in-out infinite alternate}
@keyframes fxWall{from{background-position:0% 30%}to{background-position:100% 70%}}
/* Écran large : même dégradé et même trajet, mais porté par un calque (::after) déplacé avec transform.
   Animer background-position obligeait à repeindre tout l'écran 60 fois par seconde ; transform ne repeint rien.
   Le calque fait 220 % du bureau (comme background-size) ; 0 % 30 % → 100 % 70 % devient le même décalage en translate.
   (Petit écran : le bureau défile, on garde l'animation d'origine ci-dessus.) */
@media (min-width:900px){
 .desktop{background-size:auto;animation:none}
 .desktop::after{content:'';position:absolute;left:0;top:0;width:220%;height:220%;z-index:-1;pointer-events:none;background:linear-gradient(140deg,#4b8bc5,#16477d 50%,#0e2750);animation:fxWallMove 22s ease-in-out infinite alternate;will-change:transform}
}
@keyframes fxWallMove{from{transform:translate3d(0,-16.3636%,0)}to{transform:translate3d(-54.5455%,-38.1818%,0)}}
.desktop::before{content:'';position:absolute;inset:0;pointer-events:none;z-index:0;
 background:radial-gradient(420px circle at calc(50% + var(--mx,0)*100%) calc(40% + var(--my,0)*100%),#ffffff1c,transparent 60%),
 radial-gradient(600px circle at 15% 85%,#e91e6322,transparent 60%),radial-gradient(500px circle at 85% 20%,#7058dc26,transparent 60%);animation:fxAurora 14s ease-in-out infinite alternate}
@keyframes fxAurora{to{opacity:.65;transform:scale(1.08) translate(1%,-1%)}}
.fx-particles{position:absolute;inset:0;overflow:hidden;pointer-events:none}
.fx-particles i{position:absolute;bottom:-12px;border-radius:50%;background:#fff;box-shadow:0 0 8px #bfe1ff;animation:fxRise linear infinite}
@keyframes fxRise{to{transform:translate3d(30px,-110vh,0)}}

/* ===== Titre lettre par lettre ===== */
.fx-ch{display:inline-block;opacity:0;animation:fxLetter .6s var(--fx-ease) forwards}
@keyframes fxLetter{from{opacity:0;transform:translateY(40px) rotateX(-90deg);filter:blur(6px)}to{opacity:1;transform:none;filter:none}}
.fx-ch{white-space:pre}
.center-copy em .fx-ch{background:linear-gradient(90deg,#d7eaff,#ffb3cf,#d7eaff);background-size:300% 100%;-webkit-background-clip:text;background-clip:text;color:transparent;animation:fxLetter .6s var(--fx-ease) forwards}
@keyframes fxShine{to{background-position:200% 0}}
.center-copy small,.center-copy p{animation:fxFade 1s .3s both}
.center-copy p{animation-delay:1.6s}
@keyframes fxFade{from{opacity:0;transform:translateY(14px)}}

/* ===== Barre des tâches / Démarrer ===== */
.taskbar{animation:fxBar .7s var(--fx-ease) .1s both}
@keyframes fxBar{from{transform:translateY(100%)}}
.pinned button,.taskbar .search,.taskbar .linux-switch{transition:transform .2s var(--fx-ease),background .2s,box-shadow .2s}
.pinned button:hover,.taskbar .linux-switch:hover,.taskbar .search:hover{transform:translateY(-3px);background:#fff;box-shadow:0 8px 16px #0a234633}
.pinned button{animation:fxTaskIn .5s var(--fx-ease) both}
.pinned button:nth-child(2){animation-delay:.08s}.pinned button:nth-child(3){animation-delay:.16s}.pinned button:nth-child(4){animation-delay:.24s}
.start-menu.fx-show .pinned-grid>*{animation:fxPop .4s var(--fx-ease) both}
.pinned-grid>*:nth-child(1){animation-delay:.04s!important}.pinned-grid>*:nth-child(2){animation-delay:.08s!important}.pinned-grid>*:nth-child(3){animation-delay:.12s!important}.pinned-grid>*:nth-child(4){animation-delay:.16s!important}.pinned-grid>*:nth-child(5){animation-delay:.2s!important}.pinned-grid>*:nth-child(6){animation-delay:.24s!important}.pinned-grid>*:nth-child(n+7){animation-delay:.3s!important}
@keyframes fxPop{from{opacity:0;transform:scale(.6) translateY(16px)}}

/* ===== Contenu des fenêtres ===== */
.fx-reveal{opacity:0;transform:translateY(22px) scale(.98);transition:opacity .6s var(--fx-ease),transform .6s var(--fx-ease)}
.fx-reveal.fx-in{opacity:1;transform:none}
.window-body .skill-card{transition-delay:0s}
.skills-grid .skill-card:nth-child(1){transition-delay:.05s}.skills-grid .skill-card:nth-child(2){transition-delay:.1s}.skills-grid .skill-card:nth-child(3){transition-delay:.15s}.skills-grid .skill-card:nth-child(4){transition-delay:.2s}.skills-grid .skill-card:nth-child(5){transition-delay:.25s}.skills-grid .skill-card:nth-child(n+6){transition-delay:.3s}
/* Barres de progression : le dégradé qui défile est porté par un ::before déplacé avec transform
   (2 motifs côte à côte, décalés d'un motif à chaque cycle : même rendu que background-position 0 → 200 %). */
.progress span{position:relative;overflow:hidden;background:none}
.progress span::before{content:'';position:absolute;left:0;top:0;width:400%;height:100%;background:linear-gradient(90deg,var(--accent),#ff9fba) 0 0/50% 100%;animation:fxBar2 2.4s linear infinite}
@keyframes fxBar2{to{transform:translate3d(-50%,0,0)}}
/* Animations en boucle sorties de l'écran (défilement d'une fenêtre) : en pause — classe posée par desktop-effects.js */
.fx-off,.progress span.fx-off::before{animation-play-state:paused!important}
/* Points « en ligne » : l'onde verte était un box-shadow animé (repeint à chaque image, et il obligeait le navigateur
   à recalculer toutes les autres animations 60 fois par seconde). Même onde, faite avec transform + opacity :
   ::before = le disque qui grandit (7 px → 7 + 2 × 6 px, soit × 2,714) en s'effaçant, ::after = le point posé par-dessus. */
/* Le point lui-même est dessiné par ::after (même couleur, héritée) ; le fond d'origine du <i> est neutralisé avec
   background-clip:text (rien n'est peint puisqu'il n'y a pas de texte) pour ne pas dessiner le point deux fois. */
.toolbar-status i,.skills-footer i,.window-toolbar .toolbar-status i{position:relative;-webkit-background-clip:text;background-clip:text}
.toolbar-status i::before,.skills-footer i::before{content:'';position:absolute;inset:0;border-radius:50%;background:#39ad78;opacity:0;animation:fxDotWave 1.8s ease-in-out infinite}
.toolbar-status i::after,.skills-footer i::after{content:'';position:absolute;inset:0;border-radius:50%;background:inherit;-webkit-background-clip:border-box;background-clip:border-box}
.toolbar-status i.fx-off::before,.skills-footer i.fx-off::before{animation-play-state:paused}
@keyframes fxDotWave{0%,100%{opacity:.5;transform:scale(1)}50%{opacity:0;transform:scale(2.7143)}}
@keyframes fxDot{0%,100%{box-shadow:0 0 0 0 #39ad7880}50%{box-shadow:0 0 0 6px #39ad7800}}
.title-dot{display:inline-block;animation:fxSpinSlow 8s linear infinite}
@keyframes fxSpinSlow{to{transform:rotate(360deg)}}
.intro-badge{animation:fxBadge 5s ease-in-out infinite}
@keyframes fxBadge{0%,100%{transform:rotate(7deg) translateY(0)}50%{transform:rotate(3deg) translateY(-6px)}}
.app-icon{animation:fxFloat 4s ease-in-out infinite}
.eyebrow,.page-intro .eyebrow{animation:fxFade .8s both}
.skills-intro h1,.page-intro h1{animation:fxSlide .8s .1s var(--fx-ease) both}
@keyframes fxSlide{from{opacity:0;transform:translateX(-30px)}}
.social-card{animation:fxSlide .6s var(--fx-ease) both}
.social-card:nth-child(2){animation-delay:.12s}.social-card:nth-child(3){animation-delay:.24s}
.win-button,.category-tabs button{overflow:hidden}
.fx-ripple{position:absolute;border-radius:50%;background:#ffffff88;transform:scale(0);animation:fxRip .65s ease-out forwards;pointer-events:none}
@keyframes fxRip{to{transform:scale(1);opacity:0}}
.about-hero,.about-portrait{animation:fxFade .8s both}
.about-skills span{animation:fxPop .5s var(--fx-ease) both;animation-delay:var(--skill-delay,0ms)}
.about-dot{animation:fxDot 2s ease-in-out infinite}
.project-modal-panel{animation:fxOpen .45s var(--fx-ease)}
.project-modal-languages>*{animation:fxPop .4s var(--fx-ease) both}
.window-head{background-size:200% 100%;transition:background .3s}
/* Barre de titre active : même reflet qui défile, porté par un ::before déplacé avec transform
   (avant : background-position 0 → 300 % en 8 s, soit 2 motifs ; maintenant : 1 motif en 4 s, même vitesse). */
.window:not(.inactive) .window-head{position:relative;isolation:isolate}
.window:not(.inactive) .window-head::before{content:'';position:absolute;left:0;top:0;width:600%;height:100%;z-index:-1;pointer-events:none;background:linear-gradient(90deg,#edf5fd,#f7e9f1,#edf5fd) 0 0/50% 100%;animation:fxHead 4s linear infinite}
@keyframes fxHead{to{transform:translate3d(-50%,0,0)}}
.controls button{transition:transform .15s,background .15s,color .15s}
.controls button:hover{transform:scale(1.15) rotate(6deg)}
@media (max-width:899px){
 .fx-icon{width:80px}.fx-grid{overflow:auto;pointer-events:auto}.center-copy{left:16px!important;right:auto!important;top:auto!important;bottom:90px}
}

/* Menu Démarrer : projets trouvés par la recherche (une ligne par projet) */
.pinned-grid>.fx-proj.fx-hide{display:none}.pinned-grid>.fx-proj{grid-column:1/-1;display:flex;align-items:center;gap:12px;text-align:left;padding:8px 12px;font-weight:600}.pinned-grid>.fx-proj:hover{transform:translateX(4px)}.pinned-grid>.fx-proj span{color:#2871b6}

/* ===== Mode « appareil modeste » (classe posée sur <html> par perf-lite.js) : mêmes effets, flous plus légers ===== */
.perf-lite .taskbar{backdrop-filter:blur(8px)}
.perf-lite .start-menu{backdrop-filter:blur(12px)}
.perf-lite .fx-ctx{backdrop-filter:blur(6px)}

/* Titre du bureau entièrement caché derrière une fenêtre : son dégradé animé est mis en pause
   (classe posée par desktop-effects.js). Ils reprennent dès que le titre redevient visible. */
.desktop.fx-hero-covered .center-copy .fx-ch{animation-play-state:paused}

/* Menu Démarrer : résultats de recherche (mêmes données que les Activités de Linux, voir portfolio-search.js) */
.start-results{display:grid;gap:4px;margin:0 0 6px;max-height:min(420px,calc(100vh - 260px));overflow:auto;overscroll-behavior:contain}
.start-results[hidden]{display:none}
.start-hit{display:flex;align-items:center;gap:12px;width:100%;padding:8px 10px;border:0;border-radius:8px;background:transparent;color:inherit;text-align:start;cursor:pointer;animation:fxPop .3s var(--fx-ease,ease) both;animation-delay:calc(var(--i,0)*25ms)}
.start-hit:hover,.start-hit.on{background:#dceafa}
.start-hit:focus-visible{outline:2px solid #2871b6;outline-offset:-2px}
.start-hit b{display:block;font-size:14px}.start-hit small{display:block;color:#60768d;font-size:12px}
.start-hit-ic{flex:none;width:40px;height:40px;border-radius:9px;display:grid;place-items:center;background:#e5eff8;color:#2871b6;font-size:18px;overflow:hidden}
.start-hit-ic.has-img{background:#dbe8f5}
.start-hit-img{width:100%;height:100%;object-fit:cover;display:block}
.start-none{margin:10px 6px;color:#60768d}
.start-menu.searching>h3,.start-menu.searching>.pinned-grid,.start-menu.searching>.recommended{display:none}
@media (prefers-reduced-motion:reduce){.start-hit{animation:none}}

/* ===== Thème sombre : effets du bureau Windows ===== */
:root[data-theme="dark"] .desktop{background-image:linear-gradient(140deg,#24466f,#0f2547 50%,#070f22)}
:root[data-theme="dark"] .desktop::after{background:linear-gradient(140deg,#24466f,#0f2547 50%,#070f22)}
:root[data-theme="dark"] .fx-layer{background:linear-gradient(#060f20cc,#030913)}
:root[data-theme="dark"] .task-app{background:#ffffff14}
:root[data-theme="dark"] .task-app:hover,:root[data-theme="dark"] .task-app.is-active{background:#ffffff2e}
:root[data-theme="dark"] .task-app::after{background:#8aa0b8}
:root[data-theme="dark"] .pinned button:hover,:root[data-theme="dark"] .taskbar .linux-switch:hover,:root[data-theme="dark"] .taskbar .search:hover{background:#ffffff2e;box-shadow:0 8px 16px #00000055}
:root[data-theme="dark"] .start-menu input.fx-search{border-color:#2b3d5d;background:#1c2b48;color:#e8f0fb}
:root[data-theme="dark"] .start-menu input.fx-search:focus{border-color:#60cdff;box-shadow:0 0 0 3px #60cdff33}
:root[data-theme="dark"] .fx-ctx,:root[data-theme="dark"] .fx-toast{background:#18243ff2;color:#e8f0fb;border-color:#ffffff1f;box-shadow:0 18px 50px #000000aa}
:root[data-theme="dark"] .fx-ctx button:hover{background:#223552}
:root[data-theme="dark"] .fx-toast small{color:#a9bbd2}
:root[data-theme="dark"] .window:not(.inactive){box-shadow:0 40px 90px #000000aa,0 0 0 1px #ffffff22}
:root[data-theme="dark"] .window.inactive{box-shadow:0 14px 34px #00000066}
:root[data-theme="dark"] .window:not(.inactive) .window-head::before{background:linear-gradient(90deg,#18264a,#241d4d,#18264a) 0 0/50% 100%}
:root[data-theme="dark"] .pinned-grid>.fx-proj span{color:#7fb8f5}
:root[data-theme="dark"] .start-hit:hover,:root[data-theme="dark"] .start-hit.on{background:#223552}
:root[data-theme="dark"] .start-hit:focus-visible{outline-color:#60cdff}
:root[data-theme="dark"] .start-hit small,:root[data-theme="dark"] .start-none{color:#a9bbd2}
:root[data-theme="dark"] .start-hit-ic{background:#1c2b48;color:#7fb8f5}
:root[data-theme="dark"] .start-hit-ic.has-img{background:#16233d}

/* ===== Icônes SVG nettes (portfolio-icons.js) : bureau, barre des tâches, menu Démarrer, recherche =====
   Pas de transformation 3D ni d'échelle sur les icônes (elles seraient ré-échantillonnées, donc floues) : survol = léger soulèvement.
   Le flottement en boucle des icônes (fxFloat) est retiré : animation continue + position sous-pixel = icônes floues. */
.fx-icon{grid-template-rows:48px auto;animation:fxIconIn .6s var(--fx-ease) both;animation-delay:calc(var(--i,0)*80ms + .3s);will-change:auto}
.fx-icon:hover{transform:translateY(-2px)}
.fx-glyph{width:48px;height:48px;display:grid;place-items:center;line-height:1;font-size:32px}
.fx-glyph .pi{filter:drop-shadow(0 1px 1.5px #0a234680)}
.fx-icon:hover .fx-glyph{transform:none;text-shadow:none}
.fx-icon small{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;max-width:92px;text-shadow:0 1px 2px #0a2346,0 0 6px #0a2346cc;overflow-wrap:break-word}
.fx-icon.is-selected{background:#4b8bc566;border-color:#cfe6ffcc}
.fx-icon:focus-visible{outline:2px solid #fff;outline-offset:-2px;box-shadow:0 0 0 4px #0a234699}
.taskbar .start,.taskbar .pinned button,.task-app{display:inline-grid;place-items:center;padding:0}
.taskbar .start:hover{transform:translateY(-2px)}
.taskbar .search,.taskbar .linux-switch{display:inline-flex!important;align-items:center;gap:8px;line-height:normal}  /* skills.css impose display:block!important sur .search */
.taskbar .search .pi{color:#3b5878}
.task-app:hover{transform:translateY(-3px)}
.tb-sys{display:inline-flex;align-items:center;gap:8px;color:#1b3351}
:root[data-theme="dark"] .tb-sys,:root[data-theme="dark"] .taskbar .search .pi{color:#dce8f6}
.pinned-grid span{display:grid;place-items:center;height:30px}
.start-hit-ic .pi{width:24px;height:24px}
@media (prefers-reduced-motion:reduce){.fx-icon:hover,.task-app:hover,.taskbar .start:hover{transform:none}}
/* Thème clair : fond bleu clair → étiquettes posées sur une pastille translucide foncée (contraste ≥ 4,5:1) */
:root[data-theme="light"] .fx-icon small{padding:0 5px;border-radius:5px;background:#0b2a5466}