:root {
  --primary:#4a246d;       /* violet clair */
  --primary-dark:#4a246d;  /* violet foncé */
  --ink:#0b0b0b;           /* fond noir */
  --ink-2:#111113;
}

html, body { scroll-behavior: smooth; }

body {
  background: radial-gradient(1200px 800px at 80% -10%, rgba(139,92,246,.08), transparent),
              radial-gradient(1000px 700px at 0% 100%, rgba(109,40,217,.06), transparent),
              #0b0b0b;
  color: #e7e7e7;
}

.backdrop { background: linear-gradient(to bottom, rgba(0,0,0,.5), rgba(0,0,0,.2)); }
.card { border-radius: 1rem; box-shadow: 0 10px 30px rgba(0,0,0,0.2); }
.glass { background: rgba(255,255,255,0.04); backdrop-filter: blur(8px); border: 1px solid rgba(255,255,255,0.08); }

.overlay {
  position: fixed; inset: 0; display: none; align-items: center; justify-content: center;
  background: rgba(0,0,0,.75); z-index: 60;
}
.overlay.show { display: flex; }

.lightbox img { max-width: 90vw; max-height: 90vh; border-radius: 1rem; box-shadow: 0 20px 60px rgba(0,0,0,.6); }

.tag { border: 1px solid rgba(255,255,255,.12); border-radius: 9999px; padding: .15rem .6rem; font-size: .75rem; color: var(--primary); }

/* Buttons */
.btn { border:1px solid rgba(255,255,255,.18); border-radius:.9rem; padding:.7rem 1.2rem; display:inline-block; transition: all .25s ease; }
.btn:hover { transform: translateY(-1px); }
.btn-primary { background: var(--primary); color:#fff; border-color: var(--primary); font-weight:700; letter-spacing:.02em; }
.btn-primary:hover{ box-shadow: 0 0 0 3px rgba(139,92,246,.25), 0 10px 25px rgba(139,92,246,.25); }

/* Hero */
.hero-bg { background-attachment: fixed; background-size: cover; background-position: center; position: relative; }
.hero-title {
  font-weight: 800;
  background: linear-gradient(90deg, var(--primary), #ffffff, var(--primary-dark));
  background-size: 200% 200%;
  -webkit-background-clip: text; background-clip: text; color: transparent;
  animation: gradientMove 8s ease infinite; letter-spacing:.02em;
}
@keyframes gradientMove { 0% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } 100% { background-position: 0% 50%; } }

/* Typing */
.typing { overflow: hidden; white-space: nowrap; border-right: 2px solid var(--primary); width: 0; animation: typing 3s steps(28, end) forwards, blink .8s step-end infinite; }
@keyframes typing { from { width: 0 } to { width: 100% } } @keyframes blink { 50% { border-color: transparent } }

/* Portfolio */
.portfolio-item { position: relative; overflow: hidden; border-radius: 1rem; background:#0e0e0f; border:1px solid rgba(255,255,255,.08); transform-origin: center; transition: transform .25s ease, opacity .25s ease; }
.portfolio-item.hide { opacity: 0; transform: scale(.96); pointer-events: none; }
.portfolio-item img { transition: transform .6s ease; display:block; }
.portfolio-item:hover img { transform: scale(1.06); }
.portfolio-item .overlay-violet { position:absolute; inset:0; background: radial-gradient(600px 300px at 60% 0%, rgba(139,92,246,.2), transparent 60%); opacity:0; transition: opacity .35s ease; }
.portfolio-item:hover .overlay-violet{ opacity:1; }
.portfolio-caption{ position:absolute; left:0; right:0; bottom:-60px; padding: .9rem 1rem; background: linear-gradient(to top, rgba(0,0,0,.75), transparent); color: var(--primary); font-weight:600; transition: bottom .35s ease; }
.portfolio-item:hover .portfolio-caption{ bottom:0; }

.form-input { background:#0b0b0b; border:1px solid rgba(255,255,255,.12); border-radius: .9rem; padding:.8rem 1rem; width:100%; transition: border .2s ease, box-shadow .2s ease; color:#fff; }
.form-input:focus{ outline:none; border-color: var(--primary); box-shadow: 0 0 0 3px rgba(139,92,246,.2); }

.hr { height:1px; background: linear-gradient(90deg, transparent, rgba(255,255,255,.1), transparent); border:0; }

/* Filtres */
.filter-chip { border:1px solid rgba(255,255,255,.16); padding:.45rem .8rem; border-radius:9999px; cursor:pointer; user-select:none; transition: all .2s ease; }
.filter-chip:hover { border-color: var(--primary); }
.filter-chip.active { background: var(--primary); color:#fff; border-color: var(--primary); }
.category-btn { border:1px solid rgba(255,255,255,.16); padding:.6rem 1rem; border-radius:.8rem; transition:.2s; }
.category-btn.active { background: var(--primary); color:#fff; border-color: var(--primary); }

/* Mini “chatbox” */
.chatbox { background:#0f0f10; border:1px solid rgba(255,255,255,.08); border-radius:1rem; padding:.75rem; display:flex; gap:.5rem; align-items:center; }
.chatbox input { flex:1; background:transparent; border:none; outline:none; color:#fff; }
.chatbox button { white-space:nowrap; }

/* MODAL (portfolio + admin) */
.modal {
  background:#0f0f10; border:1px solid rgba(255,255,255,.12); border-radius:1rem;
  max-width: 900px; width: calc(100vw - 2rem); color:#fff;
  animation: pop .18s ease-out;
}
@keyframes pop { from { transform: scale(.97); opacity: 0; } to { transform: scale(1); opacity: 1; } }
.modal-header { display:flex; justify-content:space-between; align-items:center; padding:1rem 1.25rem; border-bottom:1px solid rgba(255,255,255,.08); }
.modal-body { padding: 1rem 1.25rem; }
.modal-close { border:none; background:transparent; color:#aaa; font-size:1.25rem; cursor:pointer; }
.modal-close:hover { color:#fff; }

/* ADMIN tabs */
.tabs { display:flex; gap:.5rem; border-bottom:1px solid rgba(255,255,255,.08); margin-bottom:1rem; }
.tab-btn { padding:.6rem 1rem; border:1px solid transparent; border-radius:.6rem .6rem 0 0; cursor:pointer; }
.tab-btn.active { border-color: rgba(255,255,255,.12); border-bottom-color: transparent; background:#141416; }
.tab-panel { display:none; }
.tab-panel.active { display:block; }
/* Animations carte */
.portfolio-item {
  transition: transform .3s ease, opacity .3s ease;
}
.portfolio-item.hide {
  opacity: 0.2;
  transform: scale(.95);
  filter: grayscale(70%);
}

/* Transition sur grid */
#portfolioGrid {
  transition: all .4s ease;
}
/* Wizard */
.step { display:none; }
.step.active { display:block; animation: fadeInUp 0.5s ease; }

#wizardProgress { position:relative; }
.wizard-bar { height:100%; background:linear-gradient(90deg, var(--primary), var(--primary-dark)); }

/* Bouton upload stylé */
.file-btn {
  display:inline-block;
  position:relative;
  overflow:hidden;
  cursor:pointer;
  background:linear-gradient(90deg, var(--primary), var(--primary-dark));
  color:white;
  font-weight:600;
  border-radius:9999px;
  padding:.6rem 1rem;
}
.file-btn input { position:absolute; left:0; top:0; opacity:0; width:100%; height:100%; cursor:pointer; }
.file-btn span { pointer-events:none; }

/* Portfolio admin cartes */
.portfolio-card { transition: all .3s ease; }
.portfolio-card:hover { transform:translateY(-4px); box-shadow:0 8px 20px rgba(0,0,0,.4); }

/* Portfolio pick */
.portfolio-pick input { position:absolute; top:8px; left:8px; }
.portfolio-pick .pick-badge {
  position:absolute; top:8px; right:8px;
  background:var(--primary); color:white;
  font-size:.7rem; padding:.2rem .5rem;
  border-radius:.5rem; opacity:0;
  transition:.3s;
}
.portfolio-pick.picked .pick-badge { opacity:1; }

/* Slot radio stylé */
.slot-radio { display:flex; align-items:center; gap:.6rem; cursor:pointer; }
.slot-radio input { accent-color: var(--primary); }

/* Anim fade/slide */
@keyframes fadeInUp {
  from { opacity:0; transform:translateY(20px); }
  to { opacity:1; transform:translateY(0); }
}