
:root{
  --orange:#f08a28;
  --dark:#1f1b15;
  --blue:#bfeef4;
}
*{box-sizing:border-box;margin:0;padding:0}
body{
  font-family:system-ui,-apple-system,Segoe UI,Roboto,Arial,"Noto Sans",sans-serif;
  background:
    radial-gradient(circle at top, #3b2512 0%, #1b1109 40%, #050304 100%);
  color:#fff;
}
header{
  text-align:center;
  padding:60px 20px 30px;
  background:linear-gradient(180deg, rgba(0,0,0,.85), rgba(0,0,0,.4));
}
.logo{
  width:220px;
  height:auto;
  display:block;
  margin:0 auto 12px;

  /* Cercle autour du logo */
  border-radius:50%;
  padding:18px;
  background:radial-gradient(circle at 30% 30%, #ffe2bf 0%, #f0b67f 45%, #f08a28 80%);
  box-shadow:0 10px 30px rgba(0,0,0,.45);
  transition:transform .25s ease, box-shadow .25s ease;
}
.logo:hover{
  transform:translateY(-2px) scale(1.03) rotate(-1.5deg);
  box-shadow:0 16px 40px rgba(0,0,0,.6);
}
h1{
  font-size:clamp(34px,6vw,60px);
  color:var(--blue);
  text-shadow:0 4px 0 rgba(0,0,0,.4);
  letter-spacing:0.08em;
  transition:transform .25s ease, text-shadow .25s ease;
}
h1:hover{
  transform:translateY(-2px);
  text-shadow:0 6px 18px rgba(0,0,0,.65);
}
.subtitle{
  color:#ffe9c9;
  margin-top:6px;
  text-shadow:0 2px 6px rgba(0,0,0,.7);
}
.countdown{
  display:flex;
  justify-content:center;
  gap:14px;
  margin:20px auto;
  flex-wrap:wrap;
}
.box{
  background:rgba(0,0,0,.3);
  border:1px solid rgba(255,255,255,.2);
  border-radius:12px;
  padding:12px 14px;
  width:80px;
  text-align:center;
  transition:transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.box strong{
  display:block;
  font-size:24px;
  color:var(--blue);
}
.box span{
  font-size:12px;
  color:#ffd7ae;
  text-transform:uppercase;
}
.box:hover{
  transform:translateY(-2px) scale(1.03);
  border-color:rgba(191,238,244,.8);
  box-shadow:0 10px 24px rgba(0,0,0,.45);
}
section{
  max-width:980px;
  margin:0 auto;
  padding:20px;
}
section h2{
  color:var(--blue);
  text-align:center;
  margin-bottom:12px;
  letter-spacing:0.06em;
}
.card{
  background:rgba(255,255,255,.08);
  border:1px solid rgba(255,255,255,.15);
  border-radius:14px;
  padding:18px;
  margin-bottom:16px;
  backdrop-filter:blur(6px);
}
.btn-row{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  margin-top:10px;
}
.btn{
  display:inline-block;
  background:var(--orange);
  color:#fff;
  padding:10px 14px;
  border-radius:10px;
  text-decoration:none;
  font-weight:700;
  transition:background .2s ease, transform .2s ease, box-shadow .2s ease;
}
.btn:hover{
  background:#f59b3c;
  transform:translateY(-2px);
  box-shadow:0 8px 22px rgba(0,0,0,.45);
}
.btn-secondary{
  background:#2a1d0f;
  border:1px solid rgba(255,255,255,.25);
}
.btn-secondary:hover{
  background:#3a2614;
}
.poster-wrap{padding:10px}
.poster{
  display:block;
  width:100%;
  height:auto;
  border-radius:14px;
  box-shadow:0 16px 40px rgba(0,0,0,.35);
  transition:transform .3s ease, box-shadow .3s ease;
}
.poster:hover{
  transform:translateY(-4px);
  box-shadow:0 20px 50px rgba(0,0,0,.6);
}
footer{
  text-align:center;
  padding:20px;
  color:#ffffffb0;
  border-top:1px solid rgba(255,255,255,.2);
  margin-top:20px;
}
.footer-btn{
  display:inline-block;
  margin-left:10px;
  padding:8px 12px;
  border-radius:10px;
  background:#2a1d0f;
  border:1px solid rgba(255,255,255,.22);
  color:#ffd7ae;
  text-decoration:none;
  font-weight:700;
  transition:background .2s ease, transform .2s ease;
}
.footer-btn:hover{
  background:#3a2614;
  transform:translateY(-1px);
}

/* Reveal animations */
.reveal{
  opacity:0;
  transform:translateY(14px);
  transition:opacity .6s ease, transform .6s ease;
}
.reveal.show{
  opacity:1;
  transform:translateY(0);
}

/* Plan / Google Maps */
#plan h2{margin-bottom:10px}
.map-wrap{
  overflow:hidden;
  border-radius:14px;
  border:1px solid rgba(255,255,255,.18);
  box-shadow:0 10px 30px rgba(0,0,0,.4);
}
.map-wrap iframe{
  display:block;
  width:100%;
  min-height:260px;
  border:0;
}
@media (min-width:768px){
  .map-wrap iframe{ min-height:340px; }
}

/* Cuite progress bar */
.cuite-wrapper{
  margin-top:16px;
}
.cuite-label{
  font-size:0.9rem;
  color:#ffe9c9;
  margin-bottom:6px;
}
.cuite-bar{
  width:100%;
  height:10px;
  border-radius:999px;
  background:rgba(0,0,0,.4);
  overflow:hidden;
  box-shadow:inset 0 0 4px rgba(0,0,0,.6);
}
.cuite-fill{
  height:100%;
  width:0;
  border-radius:999px;
  background:linear-gradient(90deg,#f08a28,#f0b67f);
  transition:width .4s ease;
}
