:root{
 --bg:#f2f2f2;
 --text:#111111;
 --muted:rgba(0,0,0,0.6);
 --gold:#b88a3d;
 --line:rgba(0,0,0,0.12);
 --red:#c40000;
}

html, body{
  overflow-x:hidden;
  width:100%;
}

img{
  max-width:100%;
  display:block;
}

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

body{
  background:
    radial-gradient(circle at 20% 10%, rgba(0,0,0,0.04), transparent 40%),
    radial-gradient(circle at 80% 60%, rgba(0,0,0,0.03), transparent 50%),
    var(--bg);

  font-family:Inter,sans-serif;
  overflow-x:hidden;
  padding-top:0px;
  margin:0;
  color:var(--text);
}

/* =========================================================
TOPBAR
========================================================= */

.topbar{
  position:fixed;
  top:0;
  left:0;
  right:0;

  height:120px;

  display:grid;
  grid-template-columns:1fr auto 1fr;
  align-items:center;

  padding:0 20px;

  background:rgba(242,242,242,0.92);
  backdrop-filter:blur(12px);

  z-index:9999;
}

/* LEFT */
.left{
  justify-self:start;
}

/* CENTER */
.center-block{
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:6px;
}

.label{
  font-size:10px;
  letter-spacing:2px;
  color:var(--muted);
  text-align:center;
  white-space:nowrap;
  font-weight: bold;
  
}

/* LOGO */
.center-logo{
  display:flex;
  align-items:center;
  justify-content:center;
}

.center-logo img{
  height:100px;
  width:auto;
  object-fit:contain;
  display:block;
}

/* RIGHT */
.right-stack{
  justify-self:end;

  display:flex;
  flex-direction:column;
  align-items:flex-end;

  gap:4px;
}

/* LIVE */
.live{
  background:#ff2d2d;
  color:#fff;

  font-size:10px;
  padding:4px 10px;

  border-radius:20px;

  letter-spacing:1px;
  line-height:1;

  animation:pulse 1.5s infinite;
}

/* COUNTDOWN */
.countdown{
  font-size:13px;
  color:#ff2d2d;
  letter-spacing:2px;
  margin-top:0;
  line-height:1;
  font-variant-numeric: tabular-nums;
  letter-spacing:1.5px;
}

/* STOCK */
.stock{
  font-size:11px;
  /*color:var(--red);*/
  color:black;
  letter-spacing:1px;
}

@keyframes pulse{
  0%{opacity:1;}
  50%{opacity:0.5;}
  100%{opacity:1;}
}

/* =========================================================
HERO
========================================================= */
/* =========================================================
HERO
========================================================= */

.hero{
  position:relative;
  height:100vh;
  overflow:hidden;
}

/* IMAGE WRAP */
.image-dark-wrap{
  position:absolute;
  inset:0;
  z-index:1;
}

/* IMAGE */
.image-dark-wrap img{
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center -20%;
  transform:scale(1.25);
  animation:heroZoom 12s ease-in-out forwards;
}

/* HALO */
.image-dark-wrap::after{
  content:"";
  position:absolute;
  inset:0;
  z-index:2;
  pointer-events:none;

  background: radial-gradient(
    circle at center,
    rgba(0,0,0,0) 25%,
    rgba(0,0,0,0.65) 100%
  );
}

/* TEXTE HERO */
.hero-title,
.hero-sub{
  position:absolute;
  left:0;
  width:100%;
  text-align:center;
  z-index:3;
  color:#111;
}

.hero-title{
  bottom:5%;
  font-size:46px;
}

.hero-sub{
  bottom:3%;
  font-size:18px;
}

/* ZOOM */
@keyframes heroZoom{
  from{ transform:scale(1.35); }
  to{ transform:scale(1.10); }
}




/* =========================================================
SECTIONS
========================================================= */

section{
  padding:60px 20px;

  display:flex;
  justify-content:center;
}

.container{
  max-width:1100px;
  width:100%;
}

/* =========================================================
PRODUCT
========================================================= */

.product{
  display:grid;
  grid-template-columns:1.2fr 1fr;
  gap:40px;

  align-items:start;
}

/* MEDIA */
.media{
  display:flex;
  flex-direction:column;
  gap:12px;

  max-width:465px;
}

/* MAIN IMAGE */
#mainImage{
  min-height:360px;
  width:100%;

  border-radius:18px;

  box-shadow:0 60px 160px rgba(0,0,0,0.8);
}

/* THUMBS */
.thumbs{
  display:flex;
  justify-content:center;
  gap:10px;
}

.thumbs img{
  width:72px;
  height:72px;

  object-fit:cover;

  border-radius:10px;

  cursor:pointer;

  border:1px solid rgba(255,255,255,0.2);

  transition:0.25s ease;
}

.thumbs img:hover{
  transform:scale(1.08);
  border-color:var(--gold);
}

/* =========================================================
PANEL
========================================================= */

.panel{
  background:rgba(255,255,255,0.7);

  border:1px solid var(--line);
  border-radius:18px;

  padding:24px;

  backdrop-filter:blur(10px);

  display:flex;
  flex-direction:column;
  justify-content:center;
}

.title{
  text-align:center;
  font-size:22px;
}

.desc{
  text-align:center;
  color:var(--muted);
  font-size:13px;
  margin:8px 0;
}

.price{
  text-align:center;
  font-size:32px;
  color:var(--gold);
}

/* BUTTON */
.btn{
  display:block;

  margin-top:15px;
  padding:14px;

  text-align:center;
  text-decoration:none;

  background:linear-gradient(135deg,#d9b56a,#b88a3d);

  color:#000;
  font-weight:bold;

  border-radius:12px;
}

/* TRUST */
.trust{
  margin-top:15px;

  display:flex;
  flex-direction:column;
  gap:6px;
  align-items:center;

  font-size:12px;
  color:var(--muted);
}

/* =========================================================
LOT
========================================================= */

.lot{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:40px;

  align-items:start;

  max-width:1100px;
  width:100%;

  margin:auto;
}

.lot > div:first-child{
  display:flex;
  flex-direction:column;
  gap:8px;
}

.lot img{
  width:100%;
  max-width:465px;

  border-radius:18px;

  display:block;

  box-shadow:0 60px 160px rgba(0,0,0,0.8);
}

.list li{
  list-style:none;
  margin-bottom:5px;
  color:var(--muted);
}

/* =========================================================
STORY + VIDEO
========================================================= */

.story-video{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:40px;

  align-items:center;

  max-width:1100px;
  width:100%;
}

/* STORY */
.story{
  color:var(--text);

  background:rgba(255,255,255,0.6);

  line-height:1.8;
  font-size:14px;

  border:1px solid var(--line);
  border-radius:16px;

  padding:25px;
}

/* VIDEO */
.film video{
  width:100%;
  max-height:420px;

  object-fit:cover;

  border-radius:18px;

  box-shadow:
    0 40px 120px rgba(0,0,0,0.35),
    0 10px 30px rgba(0,0,0,0.2);
}

/* =========================================================
MEDIA FULL
========================================================= */

.media-full{
  width:100%;
  padding:20px 20px;

  display:flex;
  justify-content:center;

  position:relative;
  z-index:1;
}

/* NEW INNER */
.media-full-inner2{
  width:100%;
  max-width:1100px;

 /* background:rgba(255,255,255,0.03);*/
  background:#fff;
  border:1px solid var(--line);
  border-radius:18px;

  padding:40px;

  backdrop-filter:blur(12px);

  position:relative;
  z-index:0;

  display:grid;
  grid-template-columns:1fr 420px;
  gap:40px;

  align-items:start;
}

/* TEXT */
.media-full-text{
  text-align:left;

  color:var(--muted);

  font-size:15px;
  line-height:1.85;
}

/* LINKS */
.media-full-text a{
  color:var(--gold);
  text-decoration:none;

  border-bottom:1px solid rgba(217,181,106,0.4);

  transition:0.2s ease;
}

.media-full-text a:hover{
  opacity:0.8;
}

/* PHOTO */
.media-full-photo{
  width:100%;
  max-width:420px;

  border-radius:22px;

  overflow:hidden;

  position:relative;
}

.media-full-photo img{
  width:100%;
  display:block;

  object-fit:cover;

  border-radius:22px;
}

/* =========================================================
IMAGE DARK WRAP
========================================================= */

/*.image-dark-wrap{
  position:relative;
  display:inline-block;

  border-radius:18px;
  overflow:hidden;
}*/

/*.image-dark-wrap img{
  display:block;
  width:100%;
  height:auto;
}*/


/* =========================================================
CONTACT
========================================================= */

.contact{
  text-align:center;

  font-size:13px;
  color:var(--muted);

  line-height:1.6;
}

/* =========================================================
FOOTER
========================================================= */

footer{
  text-align:center;

  padding:40px;

  font-size:11px;
  color:var(--muted);
}

/* =========================================================
RESPONSIVE
========================================================= */

@media(max-width:900px){

  .product,
  .lot,
  .story-video,
  .media-full-inner2{
    grid-template-columns:1fr;
  }

  section{
    padding:40px 15px;
  }


  .hero-title{
    font-size:34px;
    bottom:18%;
  }

  .hero-sub{
    font-size:15px;
  }

  .film video{
    max-height:260px;
  }

  .lot img{
    max-width:100%;
    width:100%;
    margin-top:20px;
  }

  .media-full-inner2{
    padding:25px;
  }

  .media-full-text{
    font-size:14px;
    line-height:1.7;
  }

  .media-full-photo{
    max-width:100%;
    width:100%;
  }

  .center-logo img{
    height:85px;
  }

  .topbar{
    height:105px;
    padding:0 12px;
  }

  .label{
    font-size:8px;
    letter-spacing:1px;
  }

  .live{
    font-size:9px;
    padding:3px 8px;
  }

  .countdown{
    font-size:11px;
  }

  .stock{
    font-size:10px;
  }

}

@keyframes zoomMobile{
  0%{
    transform:scale(1.15);
  }

  100%{
    transform:scale(1);
  }
}


.media-full-inner{
  width:100%;
  max-width:1100px;

  background:rgba(255,255,255,0.03);
  border:1px solid var(--line);
  border-radius:18px;

  padding:40px;

  backdrop-filter:blur(12px);

  position:relative;
  z-index:0;

  display:grid;
  gap:40px;

}

@media(max-width:900px){

  .media-full-inner{
    grid-template-columns:1fr;
    padding:25px;
  }

}

.small-note ul{
  padding-left:18px;
  margin-top:10px;
}

.small-note li{
  margin-bottom:10px;
  color:var(--muted);
  line-height:1.6;
}

/* CACHE HERO SUR MOBILE */
@media(max-width:768px){
  .hero{
    display:none;
  }
}

/* =========================
   HERO MOBILE PREMIUM
========================= */
/* =========================
MOBILE HERO OFF
========================= */

@media(max-width:768px){
  .hero{
    display:none;
  }
}

/* =========================
HERO MOBILE PREMIUM (POSTER GALLERY)
========================= */

/* =========================
HERO MOBILE PREMIUM (POSTER GALLERY)
========================= */

/* =========================
MOBILE HERO PREMIUM CLEAN
========================= */

.hero-mobile{
  display:none;
}

@media(max-width:768px){
	
	.topbar{
    grid-template-columns:1fr auto;
    grid-template-rows:auto auto;
    height:auto;
    padding:10px 12px;
    row-gap:6px;
  }

  /* centre logo reste au centre */
  .center-block{
    grid-column:1 / span 2;
  }

  /* on écrase la colonne droite */
  .right-stack{
    grid-column:1 / span 2;

    flex-direction:row;
    justify-content:space-between;
    align-items:center;

    width:100%;
    padding:6px 0;
  }

  /* COUNTDOWN EN BANDEAU BAS */
  .countdown{
    position:absolute;
    left:0;
    right:0;
    bottom:12px; /* colle sous la topbar */
    
    width:100%;
    text-align:center;

    font-size:12px;
    letter-spacing:1px;

   /* background:rgba(242,242,242,0.95);*/
   background:transparent;
    padding:6px 0;

    border-top:1px solid rgba(0,0,0,0.08);
  }
	


  /* ON CACHE HERO DESKTOP */
  .hero{
    display:none;
  }

  /* HERO MOBILE */
  .hero-mobile{
    display:flex;
    flex-direction:column;
    align-items:center;

    padding-top:155px; /* colle sous topbar */
    min-height:60vh;

    background:linear-gradient(180deg,#f5f5f5,#eaeaea);
    overflow-x:hidden;
  }

  /* =========================
     POSTER FULL WIDTH FIX
  ========================= */

  .poster-wrap{
    width:100vw;
    margin-left:calc(-50vw + 50%);
    margin-right:calc(-50vw + 50%);

    position:relative;
    overflow:hidden;

    background:#fff;
  }
  
  

  /* IMAGE POSTER */
  .poster-wrap img{
    width:calc(100% + 40px);
    margin-left:-20px;
    display:block;
    object-fit:cover;

    transform:scale(1.10);
    transform-origin:center;

    animation:posterZoom 12s ease-in-out forwards;
  }

  /* OVERLAY CINÉMA */
  /*.poster-wrap::after{
    content:"";
    position:absolute;
    inset:0;
    pointer-events:none;

    background: radial-gradient(
      circle at center,
      rgba(0,0,0,0) 30%,
      rgba(0,0,0,0.55) 100%
    );
  }*/
  
    .poster-wrap::after{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  z-index:2;

  background: radial-gradient(
    circle at center,
    rgba(0,0,0,0) 35%,
    rgba(0,0,0,0.55) 100%
  );
}

  /* ANIMATION PROPRE */
  @keyframes posterZoom{
    0%{ transform:scale(1.15); }
    100%{ transform:scale(1.05); }
  }

  /* =========================
     ESPACEMENT ULTRA CONTRÔLÉ
  ========================= */

  .hero-mobile > *:not(.poster-wrap){
    margin-top:6px;
  }

  .poster-title{
    margin-top:10px;
    font-size:28px;
    text-align:center;
  }

  .poster-sub{
    margin-top:6px;
    font-size:12px;
    text-align:center;
    opacity:0.6;
  }
  
  /* enlève l’espace global entre sections */
  section{
    padding-top:20px;
    padding-bottom:20px;
  }

  /* supprime l’air sous le hero mobile */
  .hero-mobile{
    padding-bottom:0;
    margin-bottom:0;
  }

  /* colle la section suivante */
  .media-full{
    margin-top:0;
    padding-top:20px;
  }
  
  
}



/* TITRES */
.poster-title{
  margin-top:25px;
  font-size:28px;
  letter-spacing:2px;
  text-align:center;
}

.poster-sub{
  margin-top:10px;
  font-size:12px;
  letter-spacing:1px;
  text-align:center;
  opacity:0.6;
}






}

/* =========================
SECTIONS (inchangé)
========================= */

section{
  padding:60px 20px;
  display:flex;
  justify-content:center;
}

.container{
  max-width:1100px;
  width:100%;
}


.drop-color{
  color: var(--gold);
}

.site-footer{
  padding:30px 20px;
  border-top:1px solid rgba(0,0,0,0.08);
  font-size:12px;
  color:rgba(0,0,0,0.6);
}

.footer-inner{
  max-width:1100px;
  margin:auto;

  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:10px;
}

.site-footer a{
  color:#b88a3d;
  text-decoration:none;
}

.site-footer a:hover{
  opacity:0.7;
}

@media(max-width:768px){
  .footer-inner{
    flex-direction:column;
    text-align:center;
    gap:8px;
  }
}