@import url('https://fonts.googleapis.com/css2?family=JetBrains+Mono:ital,wght@0,300;0,400;0,500;0,700;1,400&display=swap');

:root {
  --bg:      #0d0d0d;
  --bg2:     #141414;
  --bg3:     #1c1c1c;
  --border:  #222;
  --green:   #3dd68c;
  --yellow:  #e5c07b;
  --blue:    #61afef;
  --purple:  #c678dd;
  --red:     #e06c75;
  --cyan:    #56b6c2;
  --comment: #5c6370;
  --bright:  #dcdfe4;
  --dim:     #4b5263;
  --dot-r:   #ff5f57;
  --dot-y:   #febc2e;
  --dot-g:   #28c840;

  --sb-w: 460px;
}

*, *::before, *::after { margin:0; padding:0; box-sizing:border-box; }

html, body {
  width:100vw; height:100vh;
  overflow:hidden;
  background:var(--bg);
  font-family:'JetBrains Mono', monospace;
  /* ↓ Remplace cursor.png par ton fichier (max 128×128px) */
  cursor: url('#') 0 0, crosshair;
  -webkit-font-smoothing:antialiased;
}

/* ════════════════════════════════
   SIDEBAR TERMINAL
════════════════════════════════ */
#sidebar {
  position:fixed;
  top:0; left:0;
  width:var(--sb-w); height:100vh;
  background:var(--bg);
  display:flex;
  flex-direction:column;
  z-index:10;
  overflow:hidden;
}

.mac-bar {
  background:var(--bg2);
  border-bottom:1px solid var(--border);
  padding:13px 16px;
  display:flex; align-items:center; gap:8px;
  flex-shrink:0;
}
.mac-dot { width:12px; height:12px; border-radius:50%; flex-shrink:0; }
.mac-dot.r { background:var(--dot-r); }
.mac-dot.y { background:var(--dot-y); }
.mac-dot.g { background:var(--dot-g); }
.mac-bar-name { margin-left:10px; color:var(--bright); font-size:11px; font-weight:500; letter-spacing:0.05em; }

/* 404 coloré — juste en dessous de la mac-bar */
.sidebar-404 {
  padding:14px 24px 0;
  font-size:13px;
  font-weight:700;
  letter-spacing:0.04em;
  flex-shrink:0;
  user-select:none;
  line-height:1;
}
.c1 { color:#ff0066 !important; }
.c2 { color:#ffff00 !important; }
.c3 { color:#3399cc !important; }

/* Logo */
.sidebar-logo { padding:12px 24px 0; flex-shrink:0; }
.sidebar-logo img { height:30px; }

/* Corps terminal */
#term-body {
  flex:1; overflow-y:auto;
  padding:16px 22px 48px;
  scrollbar-width:thin;
  scrollbar-color:var(--border) transparent;
}
#term-body::-webkit-scrollbar { width:3px; }
#term-body::-webkit-scrollbar-thumb { background:var(--border); }

/* Tokens syntaxiques */
.t-prompt { font-size:12px; line-height:1.4; margin-bottom:2px; }
.t-user   { color:var(--green); }
.t-at     { color:var(--dim); }
.t-host   { color:var(--blue); }
.t-path   { color:var(--dim); }
.t-sym    { color:var(--bright); }
.t-cmd    { color:var(--bright); }
.t-flag   { color:var(--purple); }
.t-arg    { color:var(--yellow); }
.t-output { font-size:11px; color:var(--comment); line-height:1.6; margin:6px 0 2px; padding-left:2px; }

.t-section {
  margin:22px 0 5px;
  font-size:10px; color:var(--dim);
  letter-spacing:0.08em; text-transform:uppercase;
  border-bottom:1px solid var(--border);
  padding-bottom:4px;
}

/* Ligne projet */
.proj-row {
  display:grid;
  grid-template-columns:38px 14px 1fr;
  align-items:baseline; gap:8px;
  padding:4px 6px; border-radius:2px;
  cursor:pointer; transition:background 0.08s;
}
.proj-row:hover { background:var(--bg3); }
.proj-row:hover .proj-name { color:#fff; }
.proj-yr    { color:var(--comment); font-size:10px; text-align:right; }
.proj-arrow { color:var(--red);     font-size:12px; }
.proj-name  { color:var(--yellow);  font-size:12px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }

/* Contacts */
.contact-row {
  display:grid; grid-template-columns:14px 1fr;
  align-items:baseline; gap:10px;
  padding:4px 6px; border-radius:2px;
  cursor:pointer; transition:background 0.08s;
  text-decoration:none;
}
.contact-row:hover { background:var(--bg3); }
.contact-arrow { color:var(--cyan);   font-size:12px; }
.contact-key   { color:var(--purple); font-size:11px; }
.contact-sep   { color:var(--dim);    font-size:11px; }
.contact-val   { color:var(--green);  font-size:11px; }

/* Curseur */
.t-cursor-line { display:flex; align-items:center; gap:4px; margin-top:26px; font-size:12px; }
.t-cursor { display:inline-block; width:8px; height:15px; background:var(--green); animation:blink 1.1s step-end infinite; }
@keyframes blink { 50%{ opacity:0; } }

/* ════════════════════════════════
   FENÊTRES — z démarre à 1000
════════════════════════════════ */
.win {
  position:fixed;
  background:#fff;
  border-radius:11px;
  box-shadow:
    0 2px 0 rgba(0,0,0,0.5),
    0 12px 48px rgba(0,0,0,0.55),
    0 48px 120px rgba(0,0,0,0.35);
  display:flex; flex-direction:column;
  overflow:hidden;
  min-width:380px; min-height:260px;
  isolation:isolate;
  transition: left 0.2s ease, top 0.2s ease, width 0.2s ease, height 0.2s ease, border-radius 0.2s ease;
}
@keyframes winPop {
  from { opacity:0; transform:scale(0.96) translateY(8px); }
  to   { opacity:1; transform:scale(1)    translateY(0); }
}
.win { animation:winPop 0.18s cubic-bezier(.22,1,.36,1); }

/* Plein écran total via bouton vert */
.win.fullscreen {
  left:0 !important; top:0 !important;
  width:100vw !important; height:100vh !important;
  border-radius:0 !important;
}

/* Chrome navigateur */
.win-chrome {
  background:#e8e8e8;
  border-bottom:1px solid #ccc;
  padding:10px 14px;
  display:flex; align-items:center; gap:10px;
  flex-shrink:0; cursor:move; user-select:none;
}
/* Pas de drag en plein écran */
.win.fullscreen .win-chrome { cursor:default; }

.win-dot2 {
  width:13px; height:13px; border-radius:50%;
  cursor:pointer; flex-shrink:0; position:relative;
  transition: transform 0.12s, box-shadow 0.12s;
  display:flex; align-items:center; justify-content:center;
}
.win-dot2.close    { background:#ff5f57; box-shadow:inset 0 -1px 0 rgba(0,0,0,0.2), inset 0 1px 0 rgba(255,255,255,0.3); }
.win-dot2.minimize { background:#febc2e; box-shadow:inset 0 -1px 0 rgba(0,0,0,0.2), inset 0 1px 0 rgba(255,255,255,0.3); }
.win-dot2.maximize { background:#28c840; box-shadow:inset 0 -1px 0 rgba(0,0,0,0.2), inset 0 1px 0 rgba(255,255,255,0.3); }

/* Icône SVG inline via background — invisible au repos */
.win-dot2::after {
  content:'';
  position:absolute; inset:0;
  border-radius:50%;
  opacity:0;
  transition: opacity 0.12s;
  background-repeat:no-repeat;
  background-position:center;
  background-size:8px 8px;
}
/* Croix pour fermer */
.win-dot2.close::after {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 10'%3E%3Cline x1='2' y1='2' x2='8' y2='8' stroke='%234d0000' stroke-width='1.6' stroke-linecap='round'/%3E%3Cline x1='8' y1='2' x2='2' y2='8' stroke='%234d0000' stroke-width='1.6' stroke-linecap='round'/%3E%3C/svg%3E");
}
/* Tiret pour minimize */
.win-dot2.minimize::after {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 10'%3E%3Cline x1='2' y1='5' x2='8' y2='5' stroke='%234d3000' stroke-width='1.6' stroke-linecap='round'/%3E%3C/svg%3E");
}
/* Flèches diagonales pour maximize */
.win-dot2.maximize::after {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 10'%3E%3Cline x1='2' y1='8' x2='8' y2='2' stroke='%23003d00' stroke-width='1.6' stroke-linecap='round'/%3E%3Cpolyline points='5,2 8,2 8,5' stroke='%23003d00' stroke-width='1.5' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpolyline points='5,8 2,8 2,5' stroke='%23003d00' stroke-width='1.5' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

/* Au hover sur le chrome : agrandir légèrement + afficher icônes */
.win-chrome:hover .win-dot2 {
  transform: scale(1.18);
}
.win-chrome:hover .win-dot2::after { opacity:1; }

/* Bouton minimize caché en plein écran */
.win.fullscreen .win-dot2.minimize { pointer-events:none; opacity:0.3; }

.win-urlbar {
  flex:1; background:#fff; border:1px solid #ccc; border-radius:6px;
  padding:3px 10px; font-size:11px; font-family:'JetBrains Mono',monospace;
  color:#555; overflow:hidden; white-space:nowrap; text-overflow:ellipsis;
  cursor:text; user-select:text;
}
.win-urlbar .url-proto { color:#999; }
.win-urlbar .url-host  { color:#333; font-weight:500; }
.win-urlbar .url-path  { color:#777; }

.win-body {
  flex:1; overflow-y:auto; background:#fff;
  scrollbar-width:thin; scrollbar-color:#ddd transparent;
  user-select:text;
}
.win-body::-webkit-scrollbar { width:6px; }
.win-body::-webkit-scrollbar-thumb { background:#ddd; border-radius:3px; }

/* Resize coin — caché en plein écran */
.win-resizer {
  position:absolute; right:0; bottom:0;
  width:16px; height:16px; cursor:se-resize; z-index:2;
}
.win-resizer::after {
  content:''; position:absolute; right:4px; bottom:4px;
  width:7px; height:7px;
  border-right:2px solid #bbb; border-bottom:2px solid #bbb;
  border-radius:0 0 2px 0;
}
.win.fullscreen .win-resizer { display:none; }

/* ════════════════════════════════
   LAYOUTS INTÉRIEURS
════════════════════════════════ */
.gallery-masonry { display:flex; flex-wrap:wrap; gap:6px; }
.gallery-masonry img { display:block; object-fit:cover; cursor:zoom-in; }

/* A — Brutalist */
.layout-a .win-header { padding:36px 40px 22px; border-bottom:4px solid #000; }
.layout-a .win-proj-title { font-family:'JetBrains Mono',monospace; font-size:28px; font-weight:700; color:#000; text-transform:uppercase; letter-spacing:-1px; line-height:1; }
.layout-a .win-proj-meta { margin-top:8px; font-size:11px; color:#aaa; font-family:'JetBrains Mono',monospace; }
.layout-a .win-proj-desc { margin-top:14px; font-size:13px; line-height:1.7; color:#222; font-family:Georgia,serif; }
.layout-a .win-gallery { padding:24px 40px 40px; }

/* B — Sombre */
.layout-b .win-body { background:#0f0f0f; }
.layout-b .win-header { padding:30px 34px 20px; border-bottom:1px solid #2a2a2a; }
.layout-b .win-proj-title { font-family:'JetBrains Mono',monospace; font-size:20px; font-weight:300; color:#e0e0e0; letter-spacing:0.08em; text-transform:uppercase; }
.layout-b .win-proj-meta { font-size:11px; color:#444; margin-top:6px; font-family:'JetBrains Mono',monospace; }
.layout-b .win-proj-desc { font-size:12px; line-height:1.9; color:#666; margin-top:12px; font-family:'JetBrains Mono',monospace; }
.layout-b .win-gallery { padding:18px 34px 34px; }
.layout-b .gallery-masonry img { border:1px solid #1e1e1e; }

/* C — Sidebar gauche */
.layout-c .win-inner { display:grid; grid-template-columns:240px 1fr; min-height:100%; }
.layout-c .win-header { padding:28px 22px; border-right:1px solid #ebebeb; background:#f8f8f8; }
.layout-c .win-proj-title { font-size:17px; font-weight:700; color:#000; font-family:Georgia,serif; line-height:1.3; }
.layout-c .win-proj-meta { font-size:10px; color:#bbb; margin-top:10px; font-family:'JetBrains Mono',monospace; letter-spacing:0.05em; text-transform:uppercase; }
.layout-c .win-proj-desc { font-size:12px; line-height:1.8; color:#555; margin-top:16px; font-family:Georgia,serif; }
.layout-c .win-gallery { padding:22px; }

/* D — Magazine */
.layout-d .win-inner { display:flex; flex-direction:column; }
.layout-d .win-header { padding:22px 32px 16px; display:flex; align-items:flex-end; justify-content:space-between; border-bottom:2px solid #f0f0f0; }
.layout-d .win-proj-title { font-size:22px; font-weight:700; color:#000; font-family:'JetBrains Mono',monospace; text-transform:uppercase; letter-spacing:0.02em; }
.layout-d .win-proj-meta { font-size:10px; color:#ccc; font-family:'JetBrains Mono',monospace; padding-bottom:2px; }
.layout-d .win-proj-desc { font-size:12px; line-height:1.7; color:#666; padding:16px 32px; font-family:Georgia,serif; border-bottom:1px solid #f4f4f4; }
.layout-d .win-gallery { padding:16px 32px 32px; }
.layout-d .gallery-masonry img { transition:opacity 0.2s; }
.layout-d .gallery-masonry img:hover { opacity:0.88; }

/* E — Éditorial crème */
.layout-e .win-body { background:#fdf8f0; }
.layout-e .win-header { padding:44px 44px 26px; }
.layout-e .win-proj-title { font-size:32px; font-weight:300; color:#1a1a1a; font-family:Georgia,serif; font-style:italic; line-height:1.1; }
.layout-e .win-proj-meta { font-size:10px; color:#bbb; margin-top:12px; font-family:'JetBrains Mono',monospace; letter-spacing:0.12em; text-transform:uppercase; }
.layout-e .win-proj-desc { font-size:13px; line-height:1.8; color:#555; margin-top:16px; font-family:Georgia,serif; max-width:460px; }
.layout-e .win-gallery { padding:4px 44px 44px; }
.layout-e .gallery-masonry img { filter:sepia(0.1); transition:filter 0.25s; }
.layout-e .gallery-masonry img:hover { filter:sepia(0); }

/* F — Ultra-minimal mono */
.layout-f .win-header { padding:24px 36px 18px; border-bottom:1px solid #e8e8e8; }
.layout-f .win-proj-title { font-size:14px; font-weight:500; color:#000; font-family:'JetBrains Mono',monospace; letter-spacing:0.1em; text-transform:uppercase; }
.layout-f .win-proj-meta { font-size:10px; color:#ccc; margin-top:5px; font-family:'JetBrains Mono',monospace; }
.layout-f .win-proj-desc { font-size:11px; line-height:1.9; color:#888; margin-top:8px; font-family:'JetBrains Mono',monospace; }
.layout-f .win-gallery { padding:18px 36px 36px; }
.layout-f .gallery-masonry img { transition:filter 0.25s; }
.layout-f .gallery-masonry img:hover { filter:grayscale(0.4); }

/* ════════════════════════════════
   LIGHTBOX
════════════════════════════════ */
#lightbox {
  display:none; position:fixed; inset:0;
  background:rgba(0,0,0,0.94); z-index:999999;
  align-items:center; justify-content:center; cursor:zoom-out;
}
#lightbox.on { display:flex; }
#lightbox img { max-width:90vw; max-height:90vh; object-fit:contain; }

/* ════════════════════════════════
   RESPONSIVE
════════════════════════════════ */
@media (max-width: 860px) {
  :root { --sb-w: 100vw; }

  #sidebar { width:100vw; height:100vh; z-index:10; }

  /* Sur mobile les fenêtres s'ouvrent toujours en plein écran */
  .win {
    left:0 !important; top:0 !important;
    width:100vw !important; height:100vh !important;
    border-radius:0 !important;
    animation:none;
  }

  .win-resizer { display:none; }
  .win-chrome { padding:14px 16px; gap:12px; }
  .win-dot2 { width:14px; height:14px; }

  .layout-c .win-inner { grid-template-columns:1fr; }
  .layout-c .win-header { border-right:none; border-bottom:1px solid #ebebeb; }
  .layout-d .win-header { flex-direction:column; align-items:flex-start; gap:4px; }

  .gallery-masonry img { width:100% !important; height:auto !important; }
}

@media (max-width: 480px) {
  .layout-a .win-proj-title { font-size:20px; }
  .layout-e .win-proj-title { font-size:24px; }
  .layout-a .win-header, .layout-e .win-header { padding:24px 20px 16px; }
  .layout-a .win-gallery, .layout-e .win-gallery,
  .layout-b .win-gallery, .layout-f .win-gallery { padding:16px 20px 28px; }
  .layout-c .win-gallery { padding:16px; }
  .layout-d .win-proj-desc { padding:12px 20px; }
  .layout-d .win-gallery { padding:12px 20px 24px; }
  .win-urlbar { font-size:10px; }
}

/* ── Curseur rose #ff0066 sur les éléments cliquables ── */
a, button, .proj-row, .contact-row, .win-dot2,
.win-chrome, [cursor="pointer"], label,
.gallery-masonry img, .win-dot, .mac-dot {
  cursor: url('#') 16 16, pointer !important;
}