:root {
  --bg: #0f0f0f;
  --fg: #f5f5f5;
  --muted: #9a9a9a;
  --accent: #ffffff;
  --max-width: 1100px;
}

* { margin:0; padding:0; box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { font-family:-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; background: var(--bg); color: var(--fg); line-height:1.6; }
a { font-size: 2rem; color:inherit; text-decoration:none; }
img { width:100%; height:auto; display:block; }
section { padding:120px 24px; min-height:100vh; }
.container { max-width: var(--max-width); margin:0 auto; }

h1{
  font-size: 10vw;
}
h2{
  font-size: 4rem;
  margin-bottom:48px;
  letter-spacing:-0.02em;
}
p{
  font-size: 2rem;
}


/* HERO CINÉMATIQUE */
.hero {
  position:relative;
  color: var(--fg);
  display:flex;
  align-items:center;
  justify-content:center;
  text-align:center;
  min-height:100vh;
  overflow:hidden;
}
.hero::before {
  content:'';
  position:absolute; top:0; left:0; width:100%; height:100%;
  background: rgba(0,0,0,0.5);
  z-index:0;
}
.hero .slides { position:absolute; top:0; left:0; width:100%; height:100%; z-index:-1; overflow:hidden; }
.hero .slides img {
  position:absolute;
  width:100%;
  height:100%;
  object-fit:cover;
  top:0;
  left:0;
  opacity:0;
  transform: scale(1.1);
  transition: opacity 1s ease-in-out, transform 6s ease-out;
}
.hero .slides img.active {
  opacity:1;
  transform: scale(1);
}

.hero .container { position:relative; z-index:1; }

/* Animation hero texte */
.hero h1, .hero p, .hero .btn {
  opacity:0;
  transform: translateY(20px);
  animation-fill-mode: forwards;
}
.hero h1 { animation: fadeUp 1s ease-out 0.3s forwards; }
.hero p { animation: fadeUp 1s ease-out 0.6s forwards; }
.hero .btn { animation: fadeUp 1s ease-out 0.9s forwards; }

@keyframes fadeUp {
  0% { opacity:0; transform: translateY(20px); }
  100% { opacity:1; transform: translateY(0); }
}

/* SECTIONS */
.grid { display:grid; grid-template-columns: repeat(auto-fit, minmax(260px,1fr)); gap:32px; }
.card { background:#161616; padding:24px; opacity:0; transform: translateY(20px); transition: all 0.8s ease-out; }
.card.show { opacity:1; transform: translateY(0); }
.card h3 { margin:16px 0 8px; font-size:1.2rem; }
.card p { color:var(--muted); font-size:0.95rem; }
.link{ text-align: center; }
.btn { display:inline-block; margin-top:24px; padding:10px 20px; border:1px solid var(--fg); color:var(--fg); font-weight:500; text-transform:uppercase; letter-spacing:0.05em; transition: all 0.3s ease; }
.btn:hover { background:var(--fg); color:var(--bg); }

/* FULL IMAGE */
.full-image { padding:0; }
.full-image img { height:80vh; object-fit:cover; }

/* CONTACT */
.contact p { /*max-width:520px;*/ color:var(--muted); margin-bottom:24px; }
.contact a { display:inline-block; border-bottom:1px solid var(--fg); padding-bottom:4px; font-weight:500; }
/*#contact { display:flex; align-items:center; }*/

footer { padding:48px 24px; text-align:center; color:var(--muted); font-size:0.85rem; }

/* NAVIGATION FIXE */
nav.horizontal-nav {
  position: fixed; top:0; left:0; width:100%;
  background:#161616;
  display:flex; justify-content:center; gap:32px;
  padding:16px 0; z-index:1000;
  transition: top 0.3s ease;
}
nav.horizontal-nav a { font-size:0.95rem; color:var(--muted); font-weight:500; text-transform:uppercase; transition: color 0.3s ease; }
nav.horizontal-nav a.active, nav.horizontal-nav a:hover { color:var(--fg); }

/* HAMBURGER MENU */
.hamburger { display:none; flex-direction: column; justify-content: space-between; width:28px; height:22px; cursor:pointer; z-index:1001; position:absolute; top:16px; right:24px; }
.hamburger div { height:3px; background:var(--fg); border-radius:2px; transition: all 0.3s ease; transform-origin: center; }

/* Animation croix */
.hamburger.active div:nth-child(1) { transform: rotate(45deg) translate(5px,5px); }
.hamburger.active div:nth-child(2) { opacity:0; }
.hamburger.active div:nth-child(3) { transform: rotate(-45deg) translate(5px,-5px); }

/* MENU HAMBURGER PLEIN ÉCRAN */
nav.horizontal-nav.active {
  position: fixed;
  top:0; left:0;
  width:100%; height:100vh;
  background: rgba(0,0,0,0.95);
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 40px;
}
nav.horizontal-nav.active a { display:block; font-size:2rem; }

/* RESPONSIVE */
@media (max-width: 768px) {
  nav.horizontal-nav { flex-direction: row; justify-content: space-between; padding:16px 24px; }
  nav.horizontal-nav a { display:none; }
  .hamburger { display:flex; }
  section { padding:100px 16px; }
  .full-image img { height:50vh; }
}

@media (max-width:480px) {
  .hero h1 { font-size:3rem; }
  section { padding:80px 16px; }
  .full-image img { height:40vh; }
}