:root {
  --green: #00ff41;
  --green-dim: #00cc33;
  --green-dark: #003b00;
  --green-glow: rgba(0, 255, 65, 0.15);
  --bg: #000000;
  --card-bg: rgba(0, 10, 0, 0.85);
  --border: rgba(0, 255, 65, 0.3);
}


/* ─────────────────────────────────────────
   PROJECTS
───────────────────────────────────────── */
.projects.card {
  margin-bottom: 16px;
}
/* ─────────────────────────────────────────
   PROJECTS GRID
───────────────────────────────────────── */
.projects-grid{
  display:grid;
  /* auto-fit + clamp() : la largeur minimale d'une colonne descend
     jusqu'à 170px sur petit écran (permet 2 colonnes sur mobile au lieu
     d'une seule) et remonte jusqu'à 240px sur desktop. Plus besoin de
     forcer 1fr dans les media queries plus bas. */
  grid-template-columns:repeat(auto-fit, minmax(clamp(170px, 40vw, 240px), 1fr));
  gap:clamp(10px, 3vw, 20px);
  width:100%;
  justify-items: center;
  padding:clamp(8px, 2vw, 12px) clamp(6px, 2vw, 8px) clamp(14px, 3vw, 20px);
  box-sizing:border-box;
}
.project-card{
  width:100%;
  min-height:180px;
  padding:clamp(14px, 4vw, 20px);
  border:1px solid var(--border);
  background:rgba(0,10,0,.8);
  cursor:pointer;
  transition:
    transform .22s,
    border-color .22s,
    box-shadow .22s;
  box-sizing:border-box;
}

@media (hover: hover) and (pointer: fine) {
  .project-card:hover{
    transform:translateY(-4px);
    border-color:var(--green);
    box-shadow:0 0 22px rgba(0,255,65,.2);
  }
}

.project-icon{
  font-size:clamp(1.4rem, 5vw, 2rem);
  margin-bottom:12px;
}
.project-name{
  font-size:clamp(0.85rem, 3vw, 1rem);
  margin-bottom:8px;
  letter-spacing:.08em;
}
.project-count{
  color:#666;
  font-size:.78rem;
}
/* ─────────────────────────────────────────
   Projects
───────────────────────────────────────── */
.projects-scroll {
  overflow-x:auto;
  overflow-y:visible;
  scrollbar-width:none;
  margin-left:-4px;
  margin-right:-4px;
  /* Momentum scroll fluide sur iOS pour la rangée de catégories */
  -webkit-overflow-scrolling:touch;
}
.projects-scroll::-webkit-scrollbar { display:none; }

.cat-card {
  min-width:clamp(150px, 45vw, 250px);
  max-width:clamp(150px, 45vw, 250px);
  border:1px solid rgba(0,255,65,0.2);
  background:rgba(0,10,0,0.75);
  padding:clamp(14px, 4vw, 20px);
  cursor:pointer;
  transition:all 0.22s;
  position:relative;
  overflow:hidden;
  backdrop-filter:blur(6px);
  flex-shrink:0;
}
.cat-card::before { content:''; position:absolute; inset:0; background:linear-gradient(135deg,var(--cat-color,#00ff41) 0%,transparent 60%); opacity:0; transition:opacity 0.3s; }

@media (hover: hover) and (pointer: fine) {
  .cat-card:hover::before { opacity:0.07; }
  .cat-card:hover { border-color:var(--cat-color,#00ff41); box-shadow:0 0 20px color-mix(in srgb,var(--cat-color,#00ff41) 20%,transparent); transform:translateY(-2px); }
}

.cat-card.active { border-color:var(--cat-color,#00ff41); box-shadow:0 0 24px color-mix(in srgb,var(--cat-color,#00ff41) 30%,transparent),inset 0 0 20px rgba(255,255,255,0.02); background:rgba(0,255,65,0.05); }
.cat-header { display:flex; align-items:center; gap:10px; margin-bottom:10px; }
.cat-icon { font-size:clamp(1.2rem, 3.5vw, 1.4rem); color:var(--cat-color,#00ff41); text-shadow:0 0 10px var(--cat-color,#00ff41); line-height:1; }
.cat-name { font-family:'Minecraft',monospace; font-size:clamp(0.78rem, 2.4vw, 0.88rem); letter-spacing:.14em; color:var(--cat-color,#00ff41); line-height:1; }
.cat-count { font-size:0.72rem; color:#444; margin-top:6px; letter-spacing:0.1em; }
.cat-count.has-projects { color:#666; }

#proj-overlay {
  position:fixed;
  inset:0;
  z-index:1000;
  display:flex;
  align-items:center;
  justify-content:center;
  background:rgba(0,0,0,0.88);
  backdrop-filter:blur(8px);
  opacity:0;
  pointer-events:none;
  transition:opacity 0.25s;
  /* Marge de sécurité sur mobile pour ne pas coller la modal aux bords */
  padding:16px;
  box-sizing:border-box;
}
#proj-overlay.open { opacity:1; pointer-events:all; }

#proj-modal {
  background:#020d02;
  border:1px solid var(--modal-color,#00ff41);
  box-shadow:0 0 50px color-mix(in srgb,var(--modal-color,#00ff41) 18%,transparent);
  width:min(700px,92vw);
  max-height:85vh;
  overflow:hidden;
  display:flex;
  flex-direction:column;
  transform:translateY(14px);
  transition:transform 0.25s;
}
#proj-overlay.open #proj-modal { transform:translateY(0); }

.modal-header {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding:clamp(14px, 4vw, 20px) clamp(16px, 5vw, 28px);
  border-bottom:1px solid rgba(255,255,255,0.06);
  flex-shrink:0;
  background:#020d02;
}
.modal-title {
  font-family:'Minecraft',monospace;
  font-size:clamp(1.15rem, 4.5vw, 1.6rem);
  color:var(--modal-color,#00ff41);
  text-shadow:0 0 12px var(--modal-color,#00ff41);
  letter-spacing:0.1em;
  word-break:break-word;
}
.modal-close {
  background:none;
  border:1px solid rgba(255,255,255,0.15);
  color:#666;
  font-family:'Minecraft',monospace;
  font-size:1rem;
  width:32px;
  height:32px;
  cursor:pointer;
  transition:all 0.2s;
  display:flex;
  align-items:center;
  justify-content:center;
  flex-shrink:0;
}
.modal-close:hover { border-color:var(--modal-color,#00ff41); color:var(--modal-color,#00ff41); }

.modal-body {
  padding:clamp(16px, 4vw, 24px) clamp(16px, 5vw, 28px);
  display:flex;
  flex-direction:column;
  gap:14px;
  overflow-y:auto;
}
.proj-item {
  font-family:'Minecraft',monospace;
  border:1px solid rgba(255,255,255,0.06);
  background:rgba(255,255,255,0.02);
  padding:clamp(14px, 4vw, 18px) clamp(14px, 4vw, 20px);
  transition:all 0.2s;
}
.proj-item:hover { border-color:color-mix(in srgb,var(--modal-color,#00ff41) 35%,transparent); background:rgba(255,255,255,0.03); }

.proj-top {
  display:flex;
  align-items:baseline;
  justify-content:space-between;
  flex-wrap:wrap;
  gap:8px 12px;
  margin-bottom:8px;
}
.proj-name { font-family:'Minecraft',monospace; font-size:clamp(0.85rem, 2.8vw, 0.95rem); color:var(--modal-color,#00ff41); letter-spacing:0.05em; }
.proj-name a { color:inherit; text-decoration:none; }
.proj-name a:hover { text-decoration:underline; }
.proj-meta { display:flex; align-items:center; gap:10px; flex-shrink:0; flex-wrap:wrap; }
.proj-date { font-size:0.72rem; color:#444; letter-spacing:0.1em; }
.proj-status { font-size:0.7rem; letter-spacing:0.12em; padding:2px 8px; border:1px solid; }
.proj-desc { font-size:clamp(0.78rem, 2.6vw, 0.83rem); color:#556655; line-height:1.7; margin-bottom:10px; }
.proj-tags { display:flex; flex-wrap:wrap; gap:6px; }
.proj-tag { font-size:0.7rem; color:#445544; border:1px solid #1a2e1a; padding:2px 8px; letter-spacing:0.08em; }
.empty-state { text-align:center; padding:40px 20px; color:#333; font-size:0.85rem; letter-spacing:0.1em; }
.modal-body::-webkit-scrollbar { width:4px; }
.modal-body::-webkit-scrollbar-track { background:transparent; }
.modal-body::-webkit-scrollbar-thumb { background:#1a3a1a; }

/* ─────────────────────────────────────────
   RESPONSIVE
───────────────────────────────────────── */

/* Mobile : le modal prend quasiment tout l'écran en hauteur.
   La grille n'est plus forcée en 1fr ici : le clamp(170px, 40vw, 240px)
   du grid-template-columns gère déjà 1 ou 2 colonnes tout seul selon
   la largeur réelle disponible. */
@media (max-width: 480px) {
  #proj-modal{
    width:100%;
    max-height:90vh;
  }

  .modal-title{
    letter-spacing:0.06em;
  }

  .proj-top{
    flex-direction:column;
    align-items:flex-start;
  }
}

@media (prefers-reduced-motion: reduce) {
  .project-card,
  .cat-card,
  .proj-item,
  #proj-modal,
  #proj-overlay{
    transition:none;
  }
}