:root{
  --bg:#000;
  --fg:#fff;
  --muted:#9b9b9b;
  --accent:#870ea5;
  --radius:14px;
  --max-card-width:620px;
  font-family:"FigTree",system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial;
}

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

html,body{
    height:100%
}

body{
    background:var(--bg);
    color:var(--fg);line-height:1.45;
    -webkit-font-smoothing:antialiased;
}
a{
    color:inherit;
    text-decoration:none;
}
img{
    display:block;
    max-width:100%;
    height:auto;
}

/* HERO */
.hero{
  min-height:100vh;
  display:grid;
  place-items:center;
  padding:3rem 1rem;
  position:relative;
  overflow:hidden;
}
.hero::before{
  content:"";
  position:absolute;
  inset:0;
  background:
    radial-gradient(1200px 600px at 10% 10%, rgba(255,255,255,0.03), transparent 8%),
    radial-gradient(900px 500px at 90% 80%, rgba(255,255,255,0.02), transparent 6%);
  pointer-events:none;
  z-index:0;
}
.hero-inner{position:relative;z-index:1;text-align:center;max-width:1200px;width:100%;}
h1.hero-title{
  font-weight:600;
  font-size:clamp(2rem,7.5vw,6rem);
  margin-bottom:0.5rem;
  opacity:0;
  transform:translateY(36px);
  animation:titleIn 900ms cubic-bezier(.2,.9,.25,1) 300ms forwards;
}
h1.hero-title .me{
  display:inline-block;
  font-weight:700;
  color:transparent;
  -webkit-background-clip:text;
  background-clip:text;
  background-image: linear-gradient(90deg,#fff 0%,#d7d7d7 45%,#fff 100%);
  filter:drop-shadow(0 6px 14px rgba(0,0,0,0.45));
  opacity:0;
  transform:translateY(30px) scale(0.95);
  animation:meIn 900ms cubic-bezier(.2,.9,.25,1) 700ms forwards;
}

.hero-sub{
    color:var(--muted);
    font-weight:400;
    margin-top:1rem;
    font-size:1rem;
}

.hero-cta{
    margin-top:
    2rem;display:
    flex;gap:1rem;
    justify-content:center;
    flex-wrap:wrap;
}

.btn{
    background:transparent;
    color:var(--fg);
    border:1px solid rgba(255,255,255,0.12);
    padding:0.7rem 1rem;
    border-radius:10px;
    font-weight:600;transition:all .22s ease;
}

.btn.primary{
    background:linear-gradient(90deg,var(--accent),#06b6b4 120%);
    color:#022;border:0;
}

.btn:hover{transform:translateY(-4px);
    box-shadow:0 10px 30px rgba(0,0,0,0.45);
}

@keyframes titleIn{to{opacity:1;transform:translateY(0)}}
@keyframes meIn{to{opacity:1;transform:translateY(0) scale(1)}}


#about{
    background:#fff;color:#111;padding:3rem 1rem;
    display:flex;
    justify-content:center;
}

.about-inner{
    max-width:1000px;
    display:flex;gap:2rem;
    align-items:center;
    flex-wrap:wrap;
}

.about-photo{
    width:140px;
    height:140px;
    border-radius:50%;
    object-fit:cover;
    border:4px solid #fff;
    box-shadow:0 10px 30px rgba(0,0,0,0.08);
}

.about-text{
    flex:1;
}
.about-text h3{
    font-size:1.2rem;
    margin-bottom:0.5rem;
}
.about-text p{
    color:#333;
    line-height:1.5;
}

/* WORK / caroussel */
#work{padding:3rem 1rem;
    display:flex;
    justify-content:center;
    background:#050505;color:var(--fg);
}
.work-inner{
    width:100%;
    max-width:1100px;
    text-align:center;
}
.work-inner h2{
    margin-bottom:1rem;
    font-size:1.6rem;
    font-weight:600;
}
.carousel{position:relative;
    display:flex;
    flex-direction:column;
    align-items:center;
}
.carousel-frame{
    width:100%;
    max-width:var(--max-card-width);
    overflow-x:auto;
    scroll-snap-type:x mandatory;
    display:flex;
    gap:1rem;
    padding-bottom:1rem;
    -webkit-overflow-scrolling:touch;
}
.slides{
    display:flex;
    gap:1rem;
}
.slide{
    flex:0 0 80%;
    scroll-snap-align:center;
    background:linear-gradient(180deg,#0f0f0f,#151515);
    border-radius:var(--radius);
    overflow:hidden;box-shadow:0 18px 40px rgba(0,0,0,0.6);
    border:1px solid rgba(255,255,255,0.04);
    transition:transform .45s ease;
}
.slide img{
    width:100%;
    height:250px;
    object-fit:cover;
}
.slide .meta{
    padding:1rem;
    text-align:left;
}
.slide h3{
    margin:0;
    font-size:1rem;
}
.slide p{
    margin-top:0.25rem;
    font-size:0.9rem;
    color:var(--muted);
}
.slide.center{
    transform:scale(1.02);
}
.slide.dim{
    opacity:0.62;
    transform:scale(0.98) translateY(4px);
}
.carousel-controls{
    display:flex;
    gap:.5rem;
    margin-top:0.75rem;
}

.dot{
    width:10px;
    height:10px;
    border-radius:50%;
    background:rgba(255,255,255,0.08);
    border:1px solid rgba(255,255,255,0.04);
    cursor:pointer;
}
.dot.active{
    background:var(--accent);
    transform:scale(1.1);
}

/* CONTACT */
#contact{
    padding:3rem 1rem;display:flex;
    justify-content:center;}
.contact-inner{
    width:100%;
    max-width:800px;
    display:grid;
    grid-template-columns:1fr;
    gap:1.5rem;}
.contact-card{
    background:linear-gradient(180deg,#0b0b0b,#0d0d0d);
    padding:1rem;border-radius:12px;
    border:1px solid rgba(255,255,255,0.03);
}
.form-actions{
    display:flex;
    gap:.5rem;
    flex-wrap:wrap;
}
.small-muted{
    color:var(--muted);
    font-size:0.9rem;
}

footer{
    padding:1rem;
    text-align:center;
    color:rgba(255,255,255,0.5);
    font-size:0.85rem;
}

/* MEDIA QUERIES */
@media(max-width:768px){
  .hero-title{
    font-size:clamp(1.8rem,8vw,3rem);
}
  .hero-sub{
    font-size:0.9rem;
}
  .slide img{
    height:200px;
}
  .about-photo{
    width:100px;
    height:100px;
}
  .about-text h3{
    font-size:1.1rem;
}
  .about-text p{
    font-size:0.9rem;
}
}

#contact-form input,
#contact-form textarea {
  width:100%;
  max-width:100%;      /* empêche le shrink sur PC */
  padding:0.9rem 1.1rem;
  font-size:1rem;
  border-radius:12px;
  border:1px solid rgba(255,255,255,0.12);
  background:#0e0e0e;
  color:white;
}
#contact-form input{
  margin-bottom:1rem;
}
#contact-form textarea{
  margin-bottom:1.5rem;
}

#toast {
  position: fixed;
  bottom: -80px;
  left: 50%;
  transform: translateX(-50%);
  background: linear-gradient(90deg,var(--accent),#06b6b4);
  color:#022;
  padding:0.9rem 1.3rem;
  border-radius:12px;
  font-weight:600;
  font-size:0.95rem;
  box-shadow:0 10px 30px rgba(0,0,0,0.45);
  transition: all .45s cubic-bezier(.21,1.05,.69,1.08);
  z-index:999;
}
#toast.show {
  bottom:32px;
}