/* ===== Projets — fenêtre Windows (windows-projects.css) : volet SplitView Fluent, verre clair bleu / rose =====
   Animations : transform + opacity seulement, coupées avec prefers-reduced-motion. */

.window[data-id=projects] { width: min(1180px, calc(100vw - 80px)); height: min(690px, calc(100dvh - 130px)); }
.window[data-id=projects] > .window-body { padding: 0; overflow: hidden; display: flex; flex-direction: column; }
.wp-root { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; }
.wp {
  --wp-bg: #f5f9fe; --wp-fg: #14253a; --wp-muted: #52687f; --wp-line: #dbe6f1; --wp-card: #ffffffd9; --wp-hover: #e6f0fb; --wp-sel: #dbeafc; --wp-a: #1f66a8; --wp-a2: #e91e63;
  flex: 1 1 auto; min-height: 0; display: grid; grid-template-columns: 350px minmax(0, 1fr); background: linear-gradient(160deg, #f6fbff, #eef3fc 60%, #fdf1f6); color: var(--wp-fg); font: 14px/1.5 'DM Sans', system-ui, sans-serif;
}
/* thème sombre (ex-@media prefers-color-scheme) */
 :where(:root[data-theme="dark"]) .wp { --wp-bg: #131f36; --wp-fg: #e8f0fb; --wp-muted: #b4c5da; --wp-line: #2b3d5d; --wp-card: #1c2b48d9; --wp-hover: #223552; --wp-sel: #29466f; --wp-a: #8cc4ff; --wp-a2: #ff7aa6; background: linear-gradient(160deg, #14213a, #121c32 60%, #241a35); } 
html.lang-rtl .wp { direction: rtl; }
.wp *, .wp *::before, .wp *::after { box-sizing: border-box; }
.wp button:focus-visible, .wp a:focus-visible, .wp [tabindex]:focus-visible { outline: 2px solid var(--wp-a); outline-offset: -2px; }

/* Volet de gauche : liste de tuiles */
.wp-pane { min-height: 0; display: flex; flex-direction: column; border-inline-end: 1px solid var(--wp-line); background: color-mix(in srgb, var(--wp-card) 55%, transparent); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); }
.wp-ph { flex: none; display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 16px 16px 10px; }
.wp-ph h2 { margin: 0; font-size: 15px; line-height: 1.25; }
.wp-count { flex: none; min-width: 28px; padding: 2px 9px; border-radius: 99px; background: color-mix(in srgb, var(--wp-a) 14%, transparent); color: var(--wp-a); font: 700 12px 'IBM Plex Mono', ui-monospace, monospace; text-align: center; }
.wp-list { flex: 1 1 auto; min-height: 0; overflow-y: auto; display: grid; align-content: start; gap: 4px; padding: 2px 8px 12px; overscroll-behavior: contain; scrollbar-width: thin; }
.wp-tile { position: relative; display: flex; gap: 12px; align-items: flex-start; width: 100%; padding: 9px 10px; border: 1px solid transparent; border-radius: 10px; background: none; color: inherit; font: inherit; text-align: start; cursor: pointer; animation: wpIn .4s cubic-bezier(.2, .8, .2, 1) both; animation-delay: calc(var(--i, 0) * 35ms); transition: background .15s; }
.wp-tile:hover { background: var(--wp-hover); }
.wp-tile[aria-selected="true"] { background: var(--wp-sel); border-color: color-mix(in srgb, var(--wp-a) 30%, transparent); }
.wp-tile[aria-selected="true"]::before { content: ''; position: absolute; inset-inline-start: 0; top: 14px; bottom: 14px; width: 3px; border-radius: 3px; background: linear-gradient(var(--wp-a), var(--wp-a2)); }
.wp-photo.project-image { flex: none; width: 84px; height: 56px; margin: 0; border-radius: 8px; overflow: hidden; border: 0; box-shadow: 0 2px 8px #0a1f3a26; }
.wp-photo .project-image-empty i { font-size: 22px; }
.wp-tt { display: grid; min-width: 0; gap: 1px; }
.wp-tt small { color: var(--wp-a); font: 700 11px 'IBM Plex Mono', ui-monospace, monospace; letter-spacing: .04em; }
.wp-tt b { font-size: 13.5px; line-height: 1.25; }
.wp-tt em { font-style: normal; color: var(--wp-muted); font-size: 12px; line-height: 1.35; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }

/* Panneau de détails */
.wp-detail { min-width: 0; min-height: 0; overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; outline: none; }
.wp-art { padding: 20px 26px 28px; animation: wpIn .35s cubic-bezier(.2, .8, .2, 1) both; }
.wp-back { display: none; margin: 0 0 8px; padding: 6px 10px; border: 0; border-radius: 6px; background: none; color: var(--wp-a); font: 600 13px inherit; cursor: pointer; }
.wp-kicker { margin: 0 0 4px; color: var(--wp-a); font: 700 11.5px 'IBM Plex Mono', ui-monospace, monospace; letter-spacing: .12em; text-transform: uppercase; }
.wp-head h2 { margin: 0 0 10px; font-size: clamp(1.4rem, 2.6vw, 2rem); line-height: 1.12; letter-spacing: -.02em; }
.wp-links { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 14px; }
.wp-link { padding: 8px 14px; border-radius: 8px; border: 1px solid transparent; background: linear-gradient(105deg, var(--wp-a), color-mix(in srgb, var(--wp-a) 55%, var(--wp-a2))); color: #fff; font-weight: 700; font-size: 12.5px; text-decoration: none; }
.wp-media { margin: 6px 0 18px; }
.wp-media .pg { padding: 0; --pg-thumb-w: 92px; --pg-thumb-h: 62px; }
.wp-media .pg-stage { border-radius: 14px; box-shadow: 0 12px 30px #0a1f3a26; }
.wp-media .pg-thumb { background: var(--wp-card); }
.wp-media .project-image-empty i { font-size: 64px; }
.wp-cols { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 16px; align-items: start; }
.wp-side { display: grid; gap: 14px; }
.wp-card { padding: 16px 18px; border: 1px solid var(--wp-line); border-radius: 14px; background: var(--wp-card); box-shadow: 0 8px 22px #0a1f3a10; }
.wp-card h3 { margin: 16px 0 6px; font-size: 12px; letter-spacing: .08em; text-transform: uppercase; color: var(--wp-a); }
.wp-card h3:first-child { margin-top: 0; }
.wp-card p { margin: 0; color: var(--wp-fg); }
.wp-card ul { margin: 0; padding-inline-start: 18px; display: grid; gap: 6px; }
.wp-chips { display: flex; flex-wrap: wrap; gap: 7px; }
.wp-chips span { padding: 5px 11px; border: 1px solid color-mix(in srgb, var(--wp-a) 25%, var(--wp-line)); border-radius: 99px; background: color-mix(in srgb, var(--wp-a) 9%, transparent); color: var(--wp-a); font-size: 12px; font-weight: 700; animation: wpIn .4s ease both; animation-delay: calc(var(--i, 0) * 30ms); }
.wp-info { display: grid; grid-template-columns: auto 1fr; gap: 6px 14px; margin: 0; }
.wp-info dt { color: var(--wp-muted); }
.wp-info dd { margin: 0; font-weight: 600; }
@keyframes wpIn { from { opacity: 0; transform: translateY(8px); } }

@media (max-width: 900px) { .wp-cols { grid-template-columns: 1fr; } }
/* Mobile : la liste, puis le détail en plein écran avec « Retour » */
@media (max-width: 760px) {
  .window[data-id=projects] { width: calc(100vw - 80px); }
  .wp { grid-template-columns: 1fr; }
  .wp > .wp-pane, .wp > .wp-detail { display: none; }
  .wp[data-pane="list"] > .wp-pane { display: flex; border: 0; }
  .wp[data-pane="detail"] > .wp-detail { display: block; }
  .wp-art { padding: 14px 14px 24px; }
  .wp-back { display: inline-block; }
}
@media (prefers-reduced-motion: reduce) { .wp *, .wp *::before, .wp *::after { animation: none !important; transition: none !important; } }
.perf-lite .wp-pane { backdrop-filter: none; -webkit-backdrop-filter: none; }

/* Navigation évidente : projet sélectionné très visible, boutons Précédent / Suivant avec compteur, fondu court du détail */
.wp-tile[aria-selected="true"] { background: var(--wp-sel); border-color: color-mix(in srgb, var(--wp-a) 55%, transparent); transform: scale(1.025); box-shadow: 0 8px 20px color-mix(in srgb, var(--wp-a) 22%, transparent); z-index: 1; }
.wp-tile[aria-selected="true"]::before { width: 5px; }
.wp-tile[aria-selected="true"] .wp-tt b { color: var(--wp-a); }
.wp-tile { transition: background .15s, transform .18s cubic-bezier(.2, .8, .2, 1), box-shadow .18s; }
.wp-detail { transition: opacity .15s ease; }
.wp-detail.fade { opacity: 0; }
.wp-nav { position: sticky; top: 0; z-index: 3; display: flex; align-items: center; justify-content: space-between; gap: 10px; margin: -20px -26px 14px; padding: 10px 26px; background: color-mix(in srgb, var(--wp-bg) 88%, transparent); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); border-bottom: 1px solid var(--wp-line); }
.wp-nav button { padding: 7px 14px; border: 1px solid var(--wp-line); border-radius: 8px; background: var(--wp-card); color: var(--wp-fg); font: 600 13px inherit; cursor: pointer; transition: background .15s, border-color .15s; }
.wp-nav button:hover { border-color: var(--wp-a); background: var(--wp-hover); }
.wp-pos { font: 700 13px 'IBM Plex Mono', ui-monospace, monospace; color: var(--wp-a); }
html.lang-rtl .wp-nav button span { display: inline-block; transform: scaleX(-1); }
@media (max-width: 760px) { .wp-nav { margin: -14px -14px 12px; padding: 8px 14px; } }
@media (prefers-reduced-motion: reduce) { .wp-detail, .wp-tile { transition: none !important; } }

/* Fluidité : pas de flou d'arrière-plan sur le volet de liste ni sur la barre Précédent / Suivant (coûteux au défilement) */
.wp-pane { -webkit-backdrop-filter: none; backdrop-filter: none; background: color-mix(in srgb, var(--wp-bg) 82%, transparent); }
.wp-nav { -webkit-backdrop-filter: none; backdrop-filter: none; background: var(--wp-bg); }

/* Cause du bug « tuiles réduites » : la liste était une grille de hauteur imposée ; l'effet d'ondulation de desktop-effects.js pose
   « overflow: hidden » sur le bouton cliqué, et dans une grille de hauteur définie un élément avec overflow ≠ visible n'a plus de
   hauteur minimale : sa ligne se réduisait à ses marges (nom caché). La liste est maintenant une colonne flex, tuiles à hauteur fixe de contenu. */
.wp-list { display: flex; flex-direction: column; align-content: normal; }
.wp-tile { flex: none; min-height: 68px; overflow: hidden; }

/* Fiche en niveaux : l'image reste un bandeau pour que l'accroche, les pastilles et les repères (niveau 1) tiennent dans le premier écran */
.wp-media { margin-bottom: 12px; }
.wp-media .pg-stage { aspect-ratio: auto; height: clamp(120px, 21vh, 250px); }
@media (max-height: 800px) { .wp-media .pg-stage { height: clamp(96px, 16vh, 200px); } .wp-media { margin-bottom: 8px; } .wp-detail .ps { gap: 10px; } }

/* ===== Affinage : recherche et puces de filtre, tuiles plus riches, en-tête collant avec titre, « Réalisations » mis en avant, « Retour en haut » =====
   Le filtre masque les tuiles (hidden) sans reconstruire la liste ; l'animation d'entrée ne rejoue pas (data-still). Une seule fois, aucune boucle. */
.wp { position: relative; }
.wp-tools { flex: none; display: grid; gap: 8px; padding: 0 12px 10px; }
.wp-search { display: flex; align-items: center; gap: 8px; padding: 0 10px; height: 36px; border: 1px solid var(--wp-line); border-radius: 8px; background: var(--wp-card); color: var(--wp-muted); transition: border-color .15s, box-shadow .15s; }
.wp-search:focus-within { border-color: var(--wp-a); box-shadow: 0 0 0 3px color-mix(in srgb, var(--wp-a) 20%, transparent); }
.wp-q { flex: 1; min-width: 0; height: 100%; border: 0; outline: 0; background: none; color: var(--wp-fg); font: 13.5px 'DM Sans', system-ui, sans-serif; }
.wp-q::placeholder { color: var(--wp-muted); }
.wp-filters { display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none; padding-bottom: 2px; }
.wp-filters::-webkit-scrollbar { display: none; }
.wp-chip { flex: none; padding: 5px 11px; border: 1px solid var(--wp-line); border-radius: 99px; background: var(--wp-card); color: var(--wp-fg); font: 600 12px 'DM Sans', system-ui, sans-serif; cursor: pointer; transition: background .15s, border-color .15s, color .15s; }
.wp-chip:hover { border-color: var(--wp-a); }
.wp-chip[aria-pressed="true"] { background: var(--wp-a); border-color: var(--wp-a); color: var(--wp-bg); }
.wp-list[data-still] .wp-tile { animation: none; }
.wp-tile[hidden] { display: none; }
.wp-none { margin: 18px 10px; color: var(--wp-muted); text-align: center; }
.wp-photo.project-image { width: 96px; height: 64px; }
.wp-photo img { image-rendering: auto; }
.wp-rank { opacity: .75; }
.wp-pills { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 4px; }
.wp-pills i { padding: 1px 7px; border-radius: 99px; background: color-mix(in srgb, var(--wp-a) 16%, transparent); color: var(--wp-fg); font: 600 10.5px/1.6 'DM Sans', system-ui, sans-serif; font-style: normal; }
.wp-tile:hover { transform: translateY(-1px); }
.wp-tile[aria-selected="true"] { outline: 2px solid color-mix(in srgb, var(--wp-a) 70%, transparent); outline-offset: -2px; }
/* En-tête collant : le titre et la catégorie apparaissent quand le grand titre sort de la vue */
.wp-nav { display: grid; grid-template-columns: auto minmax(0, 1fr) auto auto; }
.wp-navt { display: grid; min-width: 0; opacity: 0; transform: translateY(4px); transition: opacity .2s, transform .2s; }
.wp-navt small { color: var(--wp-a); font: 700 10.5px 'IBM Plex Mono', ui-monospace, monospace; letter-spacing: .1em; text-transform: uppercase; }
.wp-navt b { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font-size: 13.5px; }
.wp-nav.is-stuck .wp-navt { opacity: 1; transform: none; }
.wp-nav.is-stuck { box-shadow: 0 6px 16px #0a1f3a14; }
/* Images : coins et ombres douces, pellicule soignée */
.wp-media .pg-stage { box-shadow: 0 14px 34px #0a1f3a24, 0 2px 6px #0a1f3a14; }
.wp-media .pg-thumb { border-radius: 8px; overflow: hidden; box-shadow: 0 2px 6px #0a1f3a1f; transition: transform .15s; }
.wp-media .pg-thumb:hover { transform: translateY(-2px); }
.wp-media .pg-count { border-radius: 99px; }
/* Sections du détail : apparition en cascade, une fois par projet affiché */
.wp-art > * { animation: wpIn .4s cubic-bezier(.2, .8, .2, 1) both; }
.wp-art > :nth-child(2) { animation-delay: .04s; } .wp-art > :nth-child(3) { animation-delay: .1s; } .wp-art > :nth-child(4) { animation-delay: .16s; }
.wp-art > .wp-nav { animation: none; }
.wp .ps-sec[data-sec="done"] { border-inline-start: 3px solid var(--wp-a); border-radius: 12px; background: color-mix(in srgb, var(--wp-a) 6%, transparent); }
.wp .ps-sec[data-sec="done"] .ps-t { color: var(--wp-a); }
/* « Retour en haut » */
.wp-top { position: absolute; inset-inline-end: 18px; bottom: 16px; z-index: 4; display: grid; place-items: center; width: 40px; height: 40px; border: 1px solid var(--wp-line); border-radius: 50%; background: var(--wp-card); color: var(--wp-a); box-shadow: 0 8px 20px #0a1f3a26; cursor: pointer; animation: wpIn .25s ease both; }
.wp-top[hidden] { display: none; }
.wp-top:hover { border-color: var(--wp-a); }
@media (max-width: 760px) { .wp[data-pane="list"] > .wp-top { display: none; } .wp-nav { grid-template-columns: auto minmax(0, 1fr) auto; } .wp-navt { display: none; } }
@media (prefers-reduced-motion: reduce) { .wp-navt, .wp-chip, .wp-search, .wp-media .pg-thumb { transition: none !important; } }