:root{
 --bg:#06070a;
 --text:#f5f5f5;
 --muted:rgba(255,255,255,0.65);
 --line:rgba(255,255,255,0.1);
 --gold:#d9b56a;
}

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

body{
 background:var(--bg);
 color:var(--text);
 font-family:Inter;
 line-height:1.6;
}

header{
 padding:80px 20px 40px;
 text-align:center;
 border-bottom:1px solid var(--line);
}

h1{
 font-size:34px;
 letter-spacing:2px;
 margin-bottom:10px;
}

.subtitle{
 color:var(--muted);
 font-size:14px;
 letter-spacing:1px;
}

.lang{
 margin-top:10px;
 font-size:12px;
 color:var(--muted);
}

.lang a{
 color:var(--gold);
 text-decoration:none;
 margin-left:6px;
}

/* VISUAL */
.hero-img{
 max-width:1000px;
 margin:20px auto 0;
 display:grid;
 grid-template-columns:1fr 1fr;
 gap:12px;
 padding:0 20px;
}

.hero-img img{
 /*width:100%;
 height:280px;
 object-fit:cover;
 border-radius:12px;
 filter:brightness(0.85);*/
  width:100%;
  height:280px;
  object-fit:contain;
  background:rgba(255,255,255,0.02);
  border-radius:12px;
}

/* STRUCTURE */
.container{
 max-width:1000px;
 margin:auto;
 padding:60px 20px;
}

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

.card{
 border:1px solid var(--line);
 padding:24px;
 border-radius:16px;
 background:rgba(255,255,255,0.02);
}

.card h2{
 font-size:18px;
 margin-bottom:10px;
}

.card p{
 color:var(--muted);
 font-size:13px;
}

.badge{
 display:inline-block;
 padding:4px 10px;
 border:1px solid var(--gold);
 border-radius:20px;
 font-size:10px;
 margin-bottom:10px;
 color:var(--gold);
 line-height:1; /* IMPORTANT aussi */
}

.btn{
 display:inline-block;
 margin-top:12px;
 padding:10px 14px;
 border:1px solid var(--gold);
 border-radius:10px;
 color:var(--gold);
 font-size:12px;
 text-decoration:none;
}


.list{
 margin-top:10px;
 font-size:13px;
 color:var(--muted);
}

footer{
 text-align:center;
 padding:40px;
 font-size:11px;
 color:var(--muted);
 border-top:1px solid var(--line);
 margin-top:40px;
}


/* live drop */
.live{
 background:#ff2d2d;
 color:white;
 font-size:10px;
 padding:4px 10px;
 border-radius:20px;
 letter-spacing:1px;
 animation:pulse 1.5s infinite;
 line-height:1; /* IMPORTANT */
 display:flex;
 align-items:center;
 margin-top:-10px;
}

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

.countdown{
 margin-top:-10px;
 font-size:13px;
 color:#ff2d2d;
 letter-spacing:2px;
}

.drop-header{
 display:flex;
 align-items:center; /* clé du fix */
 gap:10px;
}


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

  .hero-img {
    grid-template-columns: 1fr; /* optionnel : passe en 1 colonne */
  }
  
  .grid {
    grid-template-columns: 1fr;
    gap: 20px;
  }

  .container {
    padding: 40px 16px;
  }
  
  .countdown {
    font-size: 11px;
    letter-spacing: 1px;
    white-space: nowrap;
  }
}

/* animation texte */
/* texte animé (très subtil) */
.upcoming-card .animated-text p{
  opacity:0;
  transform:translateY(6px);
  overflow:hidden;
  white-space:nowrap;
  width:0;

  animation:
    typingSoft 2.8s steps(50, end) forwards,
    fadeSoft 1s ease forwards;
}

/* timing très posé */
.upcoming-card .animated-text p:nth-child(1){
  animation-delay:0.4s, 0.4s;
}
.upcoming-card .animated-text p:nth-child(2){
  animation-delay:3.2s, 3.2s;
}
.upcoming-card .animated-text p:nth-child(3){
  animation-delay:6s, 6s;
}

/* highlight */
.upcoming-card .highlight{
  color:var(--gold);
  margin-top:10px;
}

/* typing très doux (presque imperceptible) */
@keyframes typingSoft{
  0%{ width:0 }
  85%{ width:100% }
  100%{ width:100% }
}

/* fade élégant */
@keyframes fadeSoft{
  to{
    opacity:1;
    transform:translateY(0);
  }
}

/* CTA apparition différée */
.apply-link{
  display:inline-block;
  margin-top:22px;
  font-size:12px;
  color:var(--gold);
  text-decoration:none;
  border-bottom:1px solid rgba(217,181,106,0.3);

  opacity:0;
  transform:translateY(6px);
  animation:fadeSoft 1s ease forwards;
  animation-delay:7.2s;
}

.apply-link:hover{
  opacity:0.7;
  letter-spacing:1px;
}



<style>

/* CARD */
.card.dv-cert-card{
  display:flex;
  align-items:center;
  gap:22px;

  padding:22px;
  border:1px solid rgba(255,255,255,0.08);
  border-radius:14px;

  background:rgba(6,7,10,0.85);
  color:white;

  max-width:520px;
  position:relative;
  overflow:hidden;
}

/* =========================
   BADGE
========================= */
.dv-badge{
  position:relative;
  flex-shrink:0;
}

/* cercle animé (pulse lent luxe) */
.dv-circle{
  fill:none;
  stroke:#d9b56a;
  stroke-width:2;

  stroke-dasharray:600;
  stroke-dashoffset:600;

  animation: drawCircle 2.2s ease forwards,
             pulse 4s ease-in-out infinite;
}

/* texte */
.dv-text-top,
.dv-text-center,
.dv-text-bottom{
  fill:white;
  font-family:Inter, sans-serif;
}

.dv-text-top{
  font-size:10px;
  fill:#d9b56a;
  letter-spacing:2px;
  opacity:0;
  animation: fadeIn 1s ease forwards 0.8s;
}

.dv-text-center{
  font-size:18px;
  font-weight:bold;
  opacity:0;
  animation: fadeIn 1s ease forwards 1.1s;
}

.dv-text-bottom{
  font-size:9px;
  fill:#d9b56a;
  letter-spacing:2px;
  opacity:0;
  animation: fadeIn 1s ease forwards 1.4s;
}

.dv-line{
  stroke:#d9b56a;
  stroke-width:1;
  opacity:0;
  animation: fadeIn 1s ease forwards 1.2s;
}

/* SCAN EFFECT */
.dv-scan{
  position:absolute;
  top:-50%;
  left:-50%;
  width:200%;
  height:200%;

  background: linear-gradient(
    120deg,
    transparent 40%,
    rgba(217,181,106,0.15) 50%,
    transparent 60%
  );

  transform: rotate(25deg);
  animation: scanMove 3.5s linear infinite;
}

/* =========================
   INFO PANEL
========================= */
.dv-info{
  display:flex;
  flex-direction:column;
  gap:8px;
}

.dv-title{
  font-size:11px;
  letter-spacing:3px;
  color:#d9b56a;
  margin-bottom:6px;
}

/* LIGNES */
.dv-line-row{
  display:flex;
  justify-content:space-between;
  font-size:12px;
}

.dv-label{
  font-size:10px;
  color:rgba(255,255,255,0.4);
  letter-spacing:1px;
}

.dv-value{
  font-size:12px;
  color:white;
}

/* ID */
.dv-id{
  margin-top:10px;
  font-family:monospace;
  font-size:11px;
  color:#d9b56a;
}

/* =========================
   ANIMATIONS
========================= */
@keyframes drawCircle{
  to{ stroke-dashoffset:0; }
}

@keyframes fadeIn{
  to{ opacity:1; }
}

@keyframes scanMove{
  0%{ transform:translateX(-60%) rotate(25deg); }
  100%{ transform:translateX(60%) rotate(25deg); }
}

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

.dv-btn{
  margin-top:10px;
  display:inline-block;
  font-size:11px;
  letter-spacing:2px;
  color:#d9b56a;
  text-decoration:none;
  border:1px solid rgba(217,181,106,0.4);
  padding:6px 10px;
  border-radius:6px;
}

/**/

.dv-cert-card{
  display:flex;
  gap:6mm;
  align-items:center;
}

/* BADGE */
.dv-badge{
  position:relative;
}

/* cercle animé */
.dv-circle{
  fill:none;
  stroke:#d9b56a;
  stroke-width:2;
  stroke-dasharray:600;
  stroke-dashoffset:600;
  animation:dvDraw 2s ease forwards;
}

/* texte stylé */
.dv-text-top,
.dv-text-bottom{
  fill:#d9b56a;
  font-size:10px;
  letter-spacing:2px;
}

.dv-text-center{
  fill:#fff;
  font-size:18px;
  font-weight:bold;
}

/* lignes */
.dv-line{
  stroke:#d9b56a;
  stroke-width:1;
  opacity:0.8;
}

/* scan animation */
.dv-scan{
  position:absolute;
  top:0;
  left:0;
  width:110px;
  height:110px;
  background: linear-gradient(
    180deg,
    transparent,
    rgba(217,181,106,0.25),
    transparent
  );
  animation: scanMove 2.5s infinite;
  pointer-events:none;
}

@keyframes scanMove{
  0%{ transform: translateY(-100%); }
  100%{ transform: translateY(100%); }
}

@keyframes dvDraw{
  to{ stroke-dashoffset:0; }
}

/* INFO PANEL */
.dv-info{
  color:white;
  font-size:12px;
}

.dv-title{
  font-weight:bold;
  margin-bottom:3mm;
  letter-spacing:1px;
}

.dv-line-row{
  display:flex;
  justify-content:space-between;
  font-size:11px;
  margin-bottom:2mm;
  color:rgba(255,255,255,0.8);
}

.dv-label{
  color:rgba(255,255,255,0.4);
}

.dv-id{
  margin-top:3mm;
  font-size:10px;
  color:#d9b56a;
  opacity:0.9;
}

.dv-btn{
  display:inline-block;
  margin-top:4mm;
  padding:2mm 4mm;
  border:1px solid #d9b56a;
  color:#d9b56a;
  text-decoration:none;
  font-size:10px;
  letter-spacing:1px;
}

/*BARRE DE PROGRESSION*/
.stock-bar{
 width:100%;
 height:10px;
 background:rgba(255,255,255,0.08);
 border-radius:10px;
 overflow:hidden;
 margin:10px 0;
 position:relative;
}

#bar{
 height:100%;
 width:0%;
 transition:width 1.2s cubic-bezier(0.22, 1, 0.36, 1);
 border-radius:10px;
 position:relative;
}

/* effet “pulse” quand ça change */
#bar::after{
 content:"";
 position:absolute;
 top:0;
 left:0;
 right:0;
 bottom:0;
 background:rgba(255,255,255,0.15);
 animation:shine 1.5s infinite;
}

@keyframes shine{
 0%{transform:translateX(-100%);}
 100%{transform:translateX(100%);}
}

/* micro shake “drop tension” */
.stock-anim{
 animation:shake 0.4s ease;
}

@keyframes shake{
 0%{transform:translateX(0);}
 25%{transform:translateX(-2px);}
 50%{transform:translateX(2px);}
 100%{transform:translateX(0);}
}

.value-text{
 font-size:11px;
 opacity:0.6;
 text-align:center;
 margin-top:5px;
}


.artist-section{
  margin-top:18px;
  padding-top:14px;
  border-top:1px solid var(--line);
}

.artist-section h3{
  font-size:12px;
  letter-spacing:1px;
  margin-bottom:8px;
  color:var(--text);
}

.artist-section p{
  font-size:13px;
  color:var(--muted);
  margin-bottom:6px;
}

/*.section-title{
  font-size:12px;
  letter-spacing:2px;
  color:var(--muted);
  margin:60px 0 20px;
  text-align:center;
}*/

.section-separator{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  margin:50px 0 25px;
  color:var(--muted);
  font-size:11px;
  letter-spacing:2px;
}

.section-separator span{
  white-space:nowrap;
}

.section-separator::before,
.section-separator::after{
  content:"";
  flex:1;
  height:1px;
  background:var(--line);
}

@media (max-width:768px){
  .section-separator{
    font-size:10px;
    gap:8px;
    margin:35px 0 20px;
  }

  .section-separator::before,
  .section-separator::after{
    max-width:40px;
  }
}