/* =====================================================
   Hyperprices — Style inspiré de zecprice.com
   Ultra-minimaliste, typographique, focus prix
   ===================================================== */

:root{
  --bg:#000;
  --text:#fff;
  --text-dim:#999;
  --accent:#ffd700;
  --border:rgba(255,255,255,.08);
}
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url("/fonts/inter-300.woff2") format("woff2");
}

@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/fonts/inter-400.woff2") format("woff2");
}

@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("/fonts/inter-500.woff2") format("woff2");
}

*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%}
body{
  margin:0;
  color:var(--text);
  background:var(--bg);
  font-family: "Inter", system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x:hidden;
  overflow-y:auto;
}

@media (max-width: 1200px){
  body{
    overflow-y:auto;
  }
  
  body.panels-hidden{
    overflow:hidden;
  }
}

.stage{
  position:relative;
  min-height:100vh;
  background:var(--bg);
}

/* Stars - Très subtiles */
.starfield{
  position:fixed;
  inset:0;
  z-index:0;
  pointer-events:none;
  opacity:0;
}

/* Intro - Style typographique */
.intro{
  position:fixed;
  top:50%;
  left:50%;
  transform:translate(-50%, -50%);
  z-index:3;
  width:100%;
  max-width:900px;
  padding:0 20px;
  text-align:center;
  pointer-events:none;
}

.intro-line{
  font-size:clamp(18px, 2vw, 20px);
  font-weight:300;
  letter-spacing:.15em;
  line-height:1.5;
  color:rgba(255,255,255,.7);
  opacity:0;
  filter:blur(8px);
  will-change:opacity,filter;
  display:grid;
  gap:12px;
  margin-bottom:0;
}

.intro-line.is-in{
  opacity:1;
  filter:blur(0);
  transition:opacity 1.6s cubic-bezier(.16,.84,.44,1),
             filter 1.6s cubic-bezier(.16,.84,.44,1);
}

.intro-line.is-out{
  opacity:0;
  filter:blur(8px);
  transition:opacity 1.4s cubic-bezier(.6,.04,.98,.34),
             filter 1.4s cubic-bezier(.6,.04,.98,.34);
}

.intro-sub{
  font-size:clamp(10px, 1.5vw, 12px);
  font-weight:300;
  letter-spacing:.15em;
  line-height:1.5;
  color:rgba(255,255,255,.5);
  opacity:0;
  filter:blur(4px);
  will-change:opacity,filter;
  transition:opacity 1.6s cubic-bezier(.16,.84,.44,1),
             filter 1.6s cubic-bezier(.16,.84,.44,1);
}

/* Center - Style zecprice.com */
.center{
  position:fixed;
  top:50%;
  left:50%;
  transform:translate(-50%, -50%);
  z-index:4;
  width:100%;
  max-width:900px;
  padding:0 20px;
  text-align:center;
  opacity:0;
  transition:opacity 1.2s cubic-bezier(.22,.61,.36,1);
}

@media (max-width: 1200px){
  .center{
    position:fixed;
    top:45%;
    left:50%;
    transform:translate(-50%, -50%);
  }
}

@media (max-width: 768px){
  .center{
    padding:0 16px;
    top:40%;
  }
}

.center.is-on{
  opacity:1;
}

.ticker{
  font-size:clamp(12px, 1.2vw, 14px);
  font-weight:500;
  letter-spacing:.2em;
  text-transform:uppercase;
  color:rgba(255,255,255,.5);
  margin-bottom:clamp(20px, 3vh, 32px);
}

.price-row{
  display:flex;
  align-items:baseline;
  justify-content:center;
  gap:clamp(6px, 1vw, 12px);
  margin-bottom:clamp(8px, 1.5vh, 16px);
  position:relative;
}

@media (max-width: 1200px){
  .price-row{
    margin-top:-20px;
  }
}

.currency{
  font-size:clamp(20px, 3vw, 32px);
  font-weight:300;
  opacity:.6;
}

.price{
  font-size:clamp(64px, 14vw, 83px);
  font-weight:300;
  font-variant-numeric:tabular-nums;
  letter-spacing:-.02em;
  line-height:1;
  color:var(--text);
}

.price-row .dot{display:none}

.subline{
  display:flex;
  gap:12px;
  align-items:center;
  justify-content:center;
  font-size:clamp(10px, 1vw, 13px);
  letter-spacing:.25em;
  text-transform:uppercase;
  color:var(--text-dim);
  margin-bottom:clamp(32px, 5vh, 60px);
}

.subline .sub{display:none}

.live-pill{
  display:inline-flex;
  align-items:center;
  padding:6px 14px;
  border:1px solid var(--border);
  border-radius:2px;
  font-weight:500;
  letter-spacing:.3em;
  opacity:.85;
  background:transparent;
}

/* Throttle - Minimaliste */
.throttle-wrap{
  display:grid;
  justify-items:center;
  gap:16px;
  opacity:0;
  transition:opacity 1s cubic-bezier(.22,.61,.36,1);
  margin-top:clamp(20px, 4vh, 40px);
}

@media (max-width: 1200px){
  .throttle-wrap{
    margin-top:clamp(40px, 6vh, 60px);
  }
}

.center.is-on .throttle-wrap{
  opacity:1;
}

.throttle-label{
  font-size:clamp(9px, 1vw, 11px);
  font-weight:500;
  letter-spacing:.35em;
  text-transform:uppercase;
  color:var(--text-dim);
}

.throttle{
  width:clamp(80px, 10vw, 120px);
  height:clamp(60px, 8vh, 80px);
  border:2px solid var(--border);
  border-radius:2px;
  background:transparent;
  cursor:pointer;
  transition:border-color 200ms ease, background 200ms ease;
  position:relative;
  overflow:hidden;
  display:flex;
  align-items:center;
  justify-content:center;
}

.throttle-text{
  font-size:clamp(8px, 0.8vw, 10px);
  font-weight:500;
  letter-spacing:.2em;
  text-transform:uppercase;
  color:var(--text-dim);
  opacity:0.6;
  transition:opacity 200ms ease;
  pointer-events:none;
  z-index:1;
}

.throttle::before{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(180deg, transparent, rgba(255,255,255,.03));
  opacity:0;
  transition:opacity 200ms ease;
}

.throttle:hover{
  border-color:rgba(255,255,255,.2);
}

.throttle:hover .throttle-text{
  opacity:1;
  color:var(--text);
}

.throttle:hover::before{
  opacity:1;
}

.throttle:active{
  background:rgba(255,255,255,.05);
}

.throttle-read{display:none}

/* Panels - Style carte minimaliste */
.panel{
  position:fixed;
  top:50%;
  transform:translateY(-50%);
  width:clamp(260px, 28vw, 340px);
  max-height:calc(100vh - 100px);
  overflow:hidden;
  padding:clamp(20px, 2.5vw, 28px);
  border:1px solid var(--border);
  background:rgba(0,0,0,.6);
  backdrop-filter:blur(20px);
  z-index:4;
  opacity:0;
  transition:opacity 1.2s cubic-bezier(.22,.61,.36,1);
}

.panel.hidden-initial{
  opacity:0;
  pointer-events:none;
}

.panel.is-on{
  opacity:1;
  pointer-events:auto;
}

.panel.left{
  left:clamp(16px, 3vw, 40px);
}

.panel.right{
  right:clamp(16px, 3vw, 40px);
}

.panel-title{
  font-size:clamp(10px, 1vw, 12px);
  font-weight:500;
  letter-spacing:.3em;
  text-transform:uppercase;
  color:var(--text-dim);
  margin-bottom:clamp(16px, 2vh, 24px);
  padding-bottom:12px;
  border-bottom:1px solid var(--border);
}

.field{
  display:grid;
  gap:8px;
  margin-bottom:clamp(16px, 2vh, 20px);
}

.field .k{
  font-size:10px;
  font-weight:500;
  letter-spacing:.25em;
  text-transform:uppercase;
  color:var(--text-dim);
}

.field input{
  height:48px;
  padding:0 16px;
  border:1px solid var(--border);
  border-radius:2px;
  background:transparent;
  color:var(--text);
  font-size:15px;
  font-variant-numeric:tabular-nums;
  outline:none;
  transition:border-color 200ms ease;
}

.field input:focus{
  border-color:rgba(255,255,255,.3);
}

.field input::placeholder{
  color:var(--text-dim);
  opacity:.5;
}

.kv{
  display:grid;
  grid-template-columns:1fr auto;
  gap:12px 16px;
  font-size:12px;
  padding:16px 0;
  border-top:1px solid var(--border);
}

.kv .k{
  color:var(--text-dim);
  font-size:10px;
  letter-spacing:.2em;
  text-transform:uppercase;
}

.kv .v{
  color:var(--text);
  font-variant-numeric:tabular-nums;
  font-size:14px;
  font-weight:500;
  text-align:right;
}

.panel-note{
  margin-top:16px;
  padding-top:16px;
  border-top:1px solid var(--border);
  font-size:10px;
  line-height:1.6;
  color:var(--text-dim);
  opacity:.7;
}

.list{
  max-height:320px;
  overflow:auto;
  margin-right:-8px;
  padding-right:8px;
}

.list::-webkit-scrollbar{width:4px}
.list::-webkit-scrollbar-thumb{background:var(--border);border-radius:2px}
.list::-webkit-scrollbar-track{background:transparent}

.item{
  padding:16px;
  border:1px solid var(--border);
  background:rgba(255,255,255,.02);
  display:grid;
  gap:12px;
  margin-bottom:0;
  transition:background 200ms ease;
}

.item:hover{
  background:rgba(255,255,255,.04);
}

.item-top{
  display:flex;
  justify-content:space-between;
  gap:16px;
  font-size:11px;
  margin-bottom:8px;
}

.item-top .d{
  color:var(--text-dim);
  font-size:10px;
  letter-spacing:.2em;
  text-transform:uppercase;
}

.item-top .p{
  color:var(--text);
  font-variant-numeric:tabular-nums;
  font-size:13px;
  font-weight:500;
}

.item-msg{
  font-size:12px;
  line-height:1.6;
  color:var(--text);
  opacity:.85;
  display:grid;
  gap:12px;
  margin-bottom:0;
}

.item-links{
  display:flex;
  gap:12px;
  font-size:10px;
  padding-top:12px;
  border-top:1px solid var(--border);
}

.item-links a{
  color:var(--text-dim);
  text-decoration:none;
  letter-spacing:.2em;
  text-transform:uppercase;
  transition:color 200ms ease;
}

.item-links a:hover{
  color:var(--text);
}

.empty{
  font-size:11px;
  color:var(--text-dim);
  text-align:center;
  padding:32px 16px;
  opacity:.6;
}

/* Footer - Épuré */
.footer{
  position:fixed;
  left:0;
  right:0;
  bottom:0;
  z-index:4;
  padding:8px clamp(16px, 3vw, 40px);
  opacity:0;
  transition:opacity 1.2s cubic-bezier(.22,.61,.36,1);
}

.footer.is-on{
  opacity:1;
}

.footer-inner{
  max-width:1000px;
  margin:0 auto;
  display:grid;
  gap:6px;
  justify-items:center;
  text-align:center;
}

.footer-links{
  display:flex;
  gap:clamp(8px, 1.5vw, 16px);
  flex-wrap:wrap;
  justify-content:center;
}

.pill{
  display:inline-flex;
  align-items:center;
  padding:0;
  border:none;
  background:transparent;
  color:var(--text-dim);
  text-decoration:none;
  font-size:10px;
  font-weight:500;
  letter-spacing:.25em;
  text-transform:uppercase;
  transition:color 200ms ease;
}

.pill:hover{
  color:var(--text);
}

.disclaimer{
  font-size:9px;
  line-height:1.3;
  color:var(--text-dim);
  opacity:.6;
  max-width:100%;
  letter-spacing:.02em;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
  margin-bottom:2px;
  margin-top:4px;
}

.credits{
  font-size:8px;
  line-height:1.3;
  color:var(--text-dim);
  opacity:.6;
  text-align:center;
  letter-spacing:.02em;
  margin:0;
}

@media (max-width: 1200px) {
  .disclaimer{
    white-space:normal;
  }
}

/* Tuner - Caché par défaut */
.tuner{
  position:fixed;
  right:20px;
  bottom:100px;
  width:320px;
  max-height:calc(100vh - 140px);
  overflow:auto;
  padding:24px;
  border:1px solid var(--border);
  background:rgba(0,0,0,.95);
  backdrop-filter:blur(20px);
  z-index:100;
}

.tuner-head{
  display:flex;
  justify-content:space-between;
  align-items:center;
  margin-bottom:20px;
  padding-bottom:16px;
  border-bottom:1px solid var(--border);
}

.tuner-title{
  font-size:11px;
  font-weight:500;
  letter-spacing:.3em;
  text-transform:uppercase;
  color:var(--text-dim);
}

.tuner-close{
  width:32px;
  height:32px;
  border:1px solid var(--border);
  border-radius:2px;
  background:transparent;
  color:var(--text);
  font-size:20px;
  cursor:pointer;
  display:grid;
  place-items:center;
  transition:background 200ms ease;
}

.tuner-close:hover{
  background:rgba(255,255,255,.05);
}

.tuner-group{
  padding:16px;
  border:1px solid var(--border);
  background:rgba(255,255,255,.02);
  margin-bottom:16px;
}

.tuner-group-title{
  font-size:10px;
  font-weight:500;
  letter-spacing:.3em;
  text-transform:uppercase;
  color:var(--text-dim);
  display:grid;
  gap:12px;
  margin-bottom:0;
}

.slider{
  display:grid;
  gap:6px;
  display:grid;
  gap:12px;
  margin-bottom:0;
}

.slider span{
  font-size:9px;
  font-weight:500;
  letter-spacing:.25em;
  text-transform:uppercase;
  color:var(--text-dim);
}

.slider input[type=range]{
  width:100%;
  height:4px;
  border-radius:2px;
  background:var(--border);
  outline:none;
}

.slider output{
  font-size:11px;
  font-variant-numeric:tabular-nums;
  color:var(--text);
}

.tuner-actions{
  display:flex;
  gap:8px;
  margin:16px 0;
}

.btn{
  flex:1;
  height:40px;
  border:1px solid var(--border);
  border-radius:2px;
  background:transparent;
  color:var(--text-dim);
  font-size:10px;
  font-weight:500;
  letter-spacing:.25em;
  text-transform:uppercase;
  cursor:pointer;
  transition:background 200ms ease, color 200ms ease;
}

.btn:hover{
  background:rgba(255,255,255,.05);
  color:var(--text);
}

.btn.ghost{
  opacity:.7;
}

.tuner-json{
  width:100%;
  min-height:140px;
  padding:12px;
  border:1px solid var(--border);
  border-radius:2px;
  background:rgba(0,0,0,.5);
  color:var(--text);
  font-family:ui-monospace,monospace;
  font-size:10px;
  line-height:1.5;
  resize:vertical;
  outline:none;
}

.tuner-hint{
  font-size:9px;
  color:var(--text-dim);
  opacity:.6;
  margin-top:12px;
}

kbd{
  font-family:inherit;
  font-size:9px;
  padding:2px 6px;
  border:1px solid var(--border);
  border-radius:2px;
  background:rgba(255,255,255,.05);
}

/* Milestone popup */
.milestone{
  position:fixed;
  top:30%;
  left:50%;
  transform:translate(-50%, -50%) scale(0.94);
  font-size:clamp(32px, 6vw, 56px);
  font-weight:200;
  letter-spacing:-.02em;
  color:var(--text);
  opacity:0;
  pointer-events:none;
  z-index:3;
  transition:opacity 600ms cubic-bezier(.22,.61,.36,1),
             transform 600ms cubic-bezier(.22,.61,.36,1);
}

.milestone.on{
  opacity:1;
  transform:translate(-50%, -50%) scale(1);
}

/* Modal d'inscription */
.inscribe-modal{
  position:fixed;
  inset:0;
  z-index:200;
  background:rgba(0,0,0,.95);
  backdrop-filter:blur(20px);
  display:grid;
  place-items:center;
  opacity:0;
  pointer-events:none;
  transition:opacity 400ms ease;
}

.inscribe-modal.is-visible{
  opacity:1;
  pointer-events:auto;
}

.inscribe-content{
  position:relative;
  width:min(500px, calc(100vw - 40px));
  max-height:calc(100vh - 80px);
  overflow:auto;
  background:var(--bg);
  border:1px solid var(--border);
  padding:clamp(24px, 4vw, 40px);
  transform:scale(0.96);
  transition:transform 400ms ease;
}

.inscribe-modal.is-visible .inscribe-content{
  transform:scale(1);
}

.inscribe-close{
  position:absolute;
  top:20px;
  right:20px;
  width:32px;
  height:32px;
  border:1px solid var(--border);
  border-radius:2px;
  background:transparent;
  color:var(--text);
  font-size:20px;
  cursor:pointer;
  display:grid;
  place-items:center;
  transition:background 200ms ease;
}

.inscribe-close:hover{
  background:rgba(255,255,255,.05);
}

.inscribe-title{
  font-size:11px;
  font-weight:500;
  letter-spacing:.3em;
  text-transform:uppercase;
  color:var(--text-dim);
  margin-bottom:20px;
}

.inscribe-price{
  font-size:clamp(40px, 8vw, 64px);
  font-weight:200;
  font-variant-numeric:tabular-nums;
  letter-spacing:-.02em;
  color:var(--text);
  margin-bottom:8px;
}

.inscribe-subtitle{
  font-size:11px;
  color:var(--text-dim);
  margin-bottom:32px;
}

.inscribe-field{
  display:grid;
  gap:8px;
  margin-bottom:24px;
}

.inscribe-label{
  font-size:10px;
  font-weight:500;
  letter-spacing:.25em;
  text-transform:uppercase;
  color:var(--text-dim);
}

.inscribe-field textarea{
  width:100%;
  min-height:100px;
  padding:16px;
  border:1px solid var(--border);
  border-radius:2px;
  background:transparent;
  color:var(--text);
  font-family:inherit;
  font-size:13px;
  line-height:1.6;
  resize:vertical;
  outline:none;
  transition:border-color 200ms ease;
}

.inscribe-field textarea:focus{
  border-color:rgba(255,255,255,.3);
}

.inscribe-counter{
  font-size:10px;
  color:var(--text-dim);
  text-align:right;
  opacity:.6;
}

.inscribe-info{
  padding:20px;
  border:1px solid var(--border);
  background:rgba(255,255,255,.02);
  margin-bottom:24px;
}

.inscribe-info-title{
  font-size:11px;
  font-weight:500;
  letter-spacing:.25em;
  text-transform:uppercase;
  color:var(--text);
  display:grid;
  gap:12px;
  margin-bottom:0;
}

.inscribe-info-text{
  font-size:11px;
  line-height:1.7;
  color:var(--text-dim);
  margin-bottom:16px;
}

.inscribe-address{
  display:grid;
  gap:8px;
}

.inscribe-address-label{
  font-size:9px;
  font-weight:500;
  letter-spacing:.25em;
  text-transform:uppercase;
  color:var(--text-dim);
}

.inscribe-address code{
  font-family:ui-monospace,monospace;
  font-size:10px;
  color:var(--text);
  background:rgba(0,0,0,.5);
  padding:12px;
  border:1px solid var(--border);
  border-radius:2px;
  overflow-x:auto;
  white-space:nowrap;
}

.inscribe-actions{
  display:flex;
  gap:12px;
}

.inscribe-btn{
  flex:1;
  height:48px;
  border:1px solid var(--border);
  border-radius:2px;
  font-size:11px;
  font-weight:500;
  letter-spacing:.25em;
  text-transform:uppercase;
  cursor:pointer;
  transition:all 200ms ease;
}

.inscribe-btn.primary{
  background:var(--text);
  color:var(--bg);
  border-color:var(--text);
}

.inscribe-btn.primary:hover{
  opacity:.9;
}

.inscribe-btn.secondary{
  background:transparent;
  color:var(--text-dim);
}

.inscribe-btn.secondary:hover{
  color:var(--text);
  border-color:rgba(255,255,255,.2);
}

/* Responsive */
@media (max-width: 1200px){
  .stage{
    min-height:100vh;
  }
  
  .panel{
    position:relative !important;
    transform:none !important;
    width:calc(100% - 32px) !important;
    max-width:400px !important;
    margin:20px auto !important;
    padding:24px !important;
    top:auto !important;
    left:auto !important;
    right:auto !important;
    bottom:auto !important;
  }
  
  .panel.left{
    margin-top:80px !important;
    margin-bottom:20px !important;
    left:auto !important;
  }
  
  .panel.right{
    margin-top:20px !important;
    margin-bottom:20px !important;
    right:auto !important;
  }
  
  .center{
    position:fixed;
    top:40%;
    left:50%;
    transform:translate(-50%, -50%);
    margin:0;
    padding:0 16px;
    z-index:10;
    transition:all 0.6s cubic-bezier(.22,.61,.36,1);
  }
  
  body:not(.panels-hidden) .center{
    position:relative;
    top:auto;
    left:auto;
    transform:none;
    margin:60px auto 40px;
  }
  
  .footer{
    position:relative;
    margin-top:40px;
  }
}

@media (max-height: 700px) and (max-width: 1200px){
  .center{
    top:30%;
  }
}

/* Share Module */
.captures-gallery{
  margin-top:20px;
  margin-bottom:0;
  padding:12px;
  border:1px solid var(--border);
  background:rgba(255,255,255,.01);
}

.gallery-title{
  font-size:9px;
  font-weight:500;
  letter-spacing:.3em;
  text-transform:uppercase;
  color:var(--text-dim);
  margin-bottom:12px;
  padding-bottom:6px;
  border-bottom:1px solid var(--border);
}

.gallery-items{
  margin-bottom:0;
}

.gallery-item{
  padding:20px;
  background:rgba(255,255,255,.03);
  border:1px solid var(--border);
  text-align:center;
  transition:none;
}

.gallery-visual{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  margin-bottom:12px;
  opacity:.7;
}

.visual-stars{
  font-size:16px;
  animation:twinkle 2s ease-in-out infinite;
}

@keyframes twinkle {
  0%, 100% { opacity:1; transform:scale(1); }
  50% { opacity:.6; transform:scale(1.1); }
}

.visual-arrow{
  font-size:14px;
  color:var(--text-dim);
  font-weight:bold;
  animation:pulse-arrow 1.5s ease-in-out infinite;
}

@keyframes pulse-arrow {
  0%, 100% { transform:translateX(0); opacity:1; }
  50% { transform:translateX(4px); opacity:.7; }
}

.gallery-price{
  font-size:32px;
  font-weight:300;
  font-variant-numeric:tabular-nums;
  color:var(--text);
  margin-bottom:8px;
}

.gallery-stats{
  display:flex;
  gap:16px;
  justify-content:center;
  align-items:center;
  margin-bottom:12px;
}

.gallery-change{
  display:flex;
  align-items:center;
  gap:6px;
  font-size:13px;
  font-weight:600;
  color:#10b981;
}

.gallery-live{
  font-size:11px;
  color:var(--text-dim);
  font-weight:400;
}

.gallery-datetime{
  display:flex;
  gap:12px;
  justify-content:center;
  align-items:center;
  font-size:10px;
  color:var(--text-dim);
  margin-bottom:12px;
}

.gallery-date{
  padding:4px 8px;
  background:rgba(255,255,255,.05);
  border-radius:2px;
  letter-spacing:.15em;
}

.gallery-time{
  padding:4px 8px;
  background:rgba(255,255,255,.05);
  border-radius:2px;
}

.gallery-meta{
  display:flex;
  justify-content:center;
  align-items:center;
  gap:12px;
  font-size:10px;
  color:var(--text-dim);
  margin-bottom:12px;
}

.gallery-intensity{
  padding:4px 8px;
  background:rgba(255,215,0,.1);
  border:1px solid rgba(255,215,0,.2);
  border-radius:2px;
  color:rgba(255,215,0,.9);
  font-weight:500;
}

.gallery-action{
  font-size:9px;
  text-align:center;
  color:rgba(255,255,255,.4);
  text-transform:uppercase;
  letter-spacing:.2em;
  padding-top:12px;
  border-top:1px solid rgba(255,255,255,.05);
}

.gallery-dots{
  display:flex;
  gap:6px;
  justify-content:center;
  margin-top:12px;
  padding-top:10px;
  border-top:1px solid rgba(255,255,255,.08);
  padding-bottom:6px;
}

.dot{
  width:6px;
  height:6px;
  border-radius:50%;
  background:rgba(255,255,255,.15);
  border:1px solid rgba(255,255,255,.25);
  cursor:pointer;
  transition:all 200ms ease;
  box-sizing:border-box;
}

.dot:hover{
  background:rgba(255,255,255,.3);
  border-color:rgba(255,255,255,.4);
  transform:scale(1.3);
}

.dot.active{
  background:rgba(255,255,255,.35);
  border-color:rgba(255,255,255,.5);
  width:18px;
  border-radius:3px;
}

.gallery-cta{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:6px;
  padding:12px;
  background:rgba(255,255,255,.02);
  border-radius:2px;
  border:1px dashed var(--border);
}

.cta-icon{
  font-size:20px;
  animation:bounce 2s ease-in-out infinite;
}

@keyframes bounce {
  0%, 100% { transform:translateY(0); }
  50% { transform:translateY(-4px); }
}

.cta-text{
  font-size:10px;
  text-align:center;
  color:var(--text-dim);
  font-weight:500;
  letter-spacing:.15em;
}

.share-info{
  margin-bottom:16px;
}

.share-desc{
  font-size:10px;
  line-height:1.4;
  color:var(--text-dim);
  text-align:center;
  margin:0;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}

.captured-display{
  padding:16px;
  background:rgba(255,255,255,.03);
  border:1px solid var(--border);
  margin-bottom:16px;
  text-align:center;
}

.captured-label{
  font-size:10px;
  font-weight:500;
  letter-spacing:.3em;
  text-transform:uppercase;
  color:var(--text-dim);
  display:grid;
  gap:12px;
  margin-bottom:0;
}

.captured-ticker{
  font-size:11px;
  font-weight:500;
  letter-spacing:.25em;
  color:rgba(29,155,240,1);
  margin-bottom:8px;
}

.captured-value{
  font-size:32px;
  font-weight:300;
  font-variant-numeric:tabular-nums;
  color:var(--text);
  display:grid;
  gap:12px;
  margin-bottom:8px;
}

.captured-stats{
  display:flex;
  gap:16px;
  justify-content:center;
  align-items:center;
  margin-bottom:12px;
}

.captured-change{
  display:flex;
  align-items:center;
  gap:6px;
  font-size:13px;
  font-weight:600;
  color:#10b981;
}

.change-icon{
  stroke:#10b981;
  flex-shrink:0;
}

.captured-live{
  font-size:11px;
  color:var(--text-dim);
  font-weight:400;
}

.captured-datetime{
  display:flex;
  gap:12px;
  justify-content:center;
  align-items:center;
  font-size:10px;
  color:var(--text-dim);
}

.captured-date{
  padding:4px 8px;
  background:rgba(255,255,255,.05);
  border-radius:2px;
}

.captured-time{
  padding:4px 8px;
  background:rgba(255,255,255,.05);
  border-radius:2px;
}

.share-actions-main{
  display:grid;
  gap:10px;
  margin-bottom:0;
}


.share-btn{
  flex:1;
  height:44px;
  border:1px solid var(--border);
  border-radius:2px;
  background:transparent;
  color:var(--text-dim);
  font-size:10px;
  font-weight:500;
  letter-spacing:.2em;
  text-transform:uppercase;
  cursor:pointer;
  transition:all 200ms ease;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:8px;
}

.share-btn:disabled{
  opacity:.3;
  cursor:not-allowed;
}

.share-btn:not(:disabled):hover{
  background:rgba(255,255,255,.05);
  color:var(--text);
  border-color:rgba(255,255,255,.2);
}

.copy-image-btn:not(:disabled){
  background:linear-gradient(135deg, rgba(139,92,246,.15), rgba(59,130,246,.15));
  border-color:rgba(139,92,246,.4);
  color:rgb(167,139,250);
  font-weight:600;
  
}

.copy-image-btn:not(:disabled):hover{
  background:linear-gradient(135deg, rgba(139,92,246,.25), rgba(59,130,246,.25));
  border-color:rgb(139,92,246);
  transform:translateY(-2px);
  box-shadow:0 4px 12px rgba(139,92,246,.3);
}

.tweet-btn:not(:disabled){
  background:rgba(29,155,240,.1);
  border-color:rgba(29,155,240,.3);
  color:rgb(29,155,240);
}

.tweet-btn:not(:disabled):hover{
  background:rgba(29,155,240,.2);
  border-color:rgb(29,155,240);
}

.share-preview{
    filter:none !important;
  }
}
.intro-sub{
  font-size:clamp(12px, 1.5vw, 14px);
  font-weight:300;
  letter-spacing:.15em;
  line-height:1.5;
  color:rgba(255,255,255,.5);
  opacity:0;
  filter:blur(4px);
  will-change:opacity,filter;
}

.intro-sub.visible{
  opacity:1;
  filter:blur(0);
  transition:opacity 1.6s cubic-bezier(.16,.84,.44,1) 0.3s,
             filter 1.6s cubic-bezier(.16,.84,.44,1) 0.3s;
}

.intro-sub{
  font-size:clamp(12px, 1.5vw, 14px);
  font-weight:300;
  letter-spacing:.15em;
  line-height:1.5;
  color:rgba(255,255,255,.5);
  opacity:0;
  filter:blur(4px);
  will-change:opacity,filter;
}

.intro-sub.visible{
  opacity:1;
  filter:blur(0);
  transition:opacity 1.6s cubic-bezier(.16,.84,.44,1) 0.3s,
             filter 1.6s cubic-bezier(.16,.84,.44,1) 0.3s;
}

/* Modal de donation */
.donate-modal{
  position:fixed;
  inset:0;
  z-index:300;
  background:rgba(0,0,0,.95);
  backdrop-filter:blur(20px);
  display:grid;
  place-items:center;
  opacity:0;
  pointer-events:none;
  transition:opacity 400ms ease;
}

.donate-modal.is-visible{
  opacity:1;
  pointer-events:auto;
}

.donate-content{
  position:relative;
  width:min(500px, calc(100vw - 40px));
  background:var(--bg);
  border:1px solid var(--border);
  padding:clamp(32px, 5vw, 40px);
  transform:scale(0.96);
  transition:transform 400ms ease;
}

.donate-modal.is-visible .donate-content{
  transform:scale(1);
}

.donate-close{
  position:absolute;
  top:20px;
  right:20px;
  width:40px;
  height:40px;
  border:1px solid var(--border);
  border-radius:2px;
  background:transparent;
  color:var(--text);
  font-size:28px;
  line-height:1;
  cursor:pointer;
  display:grid;
  place-items:center;
  transition:background 200ms ease;
  z-index:1;
}

.donate-close:hover{
  background:rgba(255,255,255,.05);
}

.donate-thanks{
  text-align:center;
  font-size:14px;
  color:var(--text);
  margin-bottom:24px;
  padding-bottom:20px;
  border-bottom:1px solid var(--border);
}

.donate-qr{
  display:flex;
  justify-content:center;
  margin-bottom:24px;
  padding:20px;
  background:rgba(255,255,255,.02);
  border:1px solid var(--border);
}

.donate-qr img{
  width:200px;
  height:200px;
  border-radius:4px;
}

.donate-address-box{
  padding:24px;
  background:rgba(255,255,255,.02);
  border:1px solid var(--border);
  margin-bottom:32px;
}

.donate-label{
  font-size:10px;
  font-weight:500;
  letter-spacing:.3em;
  text-transform:uppercase;
  color:var(--text-dim);
  margin-bottom:12px;
}

.donate-address{
  font-family:ui-monospace,monospace;
  font-size:11px;
  line-height:1.6;
  color:var(--text);
  word-break:break-all;
  padding:16px;
  background:rgba(0,0,0,.5);
  border:1px solid var(--border);
  border-radius:2px;
  margin-bottom:16px;
}

.donate-copy-btn{
  width:100%;
  height:48px;
  border:1px solid var(--border);
  border-radius:2px;
  background:linear-gradient(135deg, rgba(139,92,246,.15), rgba(59,130,246,.15));
  border-color:rgba(139,92,246,.4);
  color:rgb(167,139,250);
  font-size:11px;
  font-weight:600;
  letter-spacing:.2em;
  text-transform:uppercase;
  cursor:pointer;
  transition:all 200ms ease;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:8px;
}

.donate-copy-btn:hover{
  background:linear-gradient(135deg, rgba(139,92,246,.25), rgba(59,130,246,.25));
  border-color:rgb(139,92,246);
  transform:translateY(-2px);
  box-shadow:0 4px 12px rgba(139,92,246,.3);
}

.donate-actions{
  margin-bottom:0;
}

.donate-or{
  font-size:11px;
  text-align:center;
  color:var(--text-dim);
  text-transform:uppercase;
  letter-spacing:.2em;
  margin-bottom:16px;
  position:relative;
}

.donate-or::before,
.donate-or::after{
  content:"";
  position:absolute;
  top:50%;
  width:calc(50% - 60px);
  height:1px;
  background:var(--border);
}

.donate-or::before{
  left:0;
}

.donate-or::after{
  right:0;
}

.donate-wallet-btn-single{
  width:100%;
  height:56px;
  border:1px solid var(--border);
  border-radius:2px;
  background:transparent;
  color:var(--text-dim);
  font-size:13px;
  font-weight:500;
  letter-spacing:.15em;
  text-transform:uppercase;
  text-decoration:none;
  cursor:pointer;
  transition:all 200ms ease;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:12px;
}

.wallet-icon-zashi{
  width:32px;
  height:32px;
  flex-shrink:0;
}

.donate-wallet-btn-single:hover{
  background:rgba(255,107,53,.05);
  color:var(--text);
  border-color:rgba(255,107,53,.4);
  transform:translateY(-2px);
}

/* Wish button */
.wish-btn{
  background:linear-gradient(135deg, rgba(236,72,153,.15), rgba(168,85,247,.15));
  border-color:rgba(236,72,153,.4);
  color:rgb(244,114,182);
}

.wish-btn:hover{
  background:linear-gradient(135deg, rgba(236,72,153,.25), rgba(168,85,247,.25));
  border-color:rgb(236,72,153);
  transform:translateY(-2px);
  box-shadow:0 4px 12px rgba(236,72,153,.3);
}

/* Wish Modal */
.wish-modal{
  position:fixed;
  inset:0;
  z-index:300;
  background:rgba(0,0,0,.95);
  backdrop-filter:blur(20px);
  display:grid;
  place-items:center;
  opacity:0;
  pointer-events:none;
  transition:opacity 400ms ease;
}

.wish-modal.is-visible{
  opacity:1;
  pointer-events:auto;
}

.wish-content{
  position:relative;
  width:min(500px, calc(100vw - 40px));
  background:var(--bg);
  border:1px solid var(--border);
  padding:clamp(32px, 5vw, 40px);
  transform:scale(0.96);
  transition:transform 400ms ease;
}

.wish-modal.is-visible .wish-content{
  transform:scale(1);
}

.wish-close{
  position:absolute;
  top:20px;
  right:20px;
  width:40px;
  height:40px;
  border:1px solid var(--border);
  border-radius:2px;
  background:transparent;
  color:var(--text);
  font-size:28px;
  line-height:1;
  cursor:pointer;
  display:grid;
  place-items:center;
  transition:background 200ms ease;
  z-index:1;
}

.wish-close:hover{
  background:rgba(255,255,255,.05);
}

.wish-header{
  text-align:center;
  margin-bottom:32px;
  padding-bottom:24px;
  border-bottom:1px solid var(--border);
}

.wish-icon{
  font-size:48px;
  margin-bottom:16px;
}

.wish-title{
  font-size:20px;
  font-weight:300;
  letter-spacing:.1em;
  text-transform:uppercase;
  color:var(--text);
  margin:0 0 12px 0;
}

.wish-subtitle{
  font-size:13px;
  color:var(--text-dim);
  margin:0;
}

.wish-options{
  display:grid;
  gap:12px;
  margin-bottom:24px;
}

.wish-option{
  display:flex;
  align-items:center;
  gap:16px;
  padding:20px;
  background:rgba(255,255,255,.02);
  border:1px solid var(--border);
  border-radius:2px;
  cursor:pointer;
  transition:all 200ms ease;
  text-align:left;
}

.wish-option:hover{
  background:rgba(255,255,255,.05);
  border-color:rgba(255,255,255,.2);
  transform:translateY(-2px);
}

.wish-option svg{
  flex-shrink:0;
  color:var(--text-dim);
}

.wish-option-text{
  flex:1;
}

.wish-option-title{
  font-size:14px;
  font-weight:500;
  color:var(--text);
  margin-bottom:4px;
}

.wish-option-desc{
  font-size:11px;
  color:var(--text-dim);
}

.wish-address-box{
  padding:24px;
  background:rgba(255,255,255,.02);
  border:1px solid var(--border);
  margin-bottom:24px;
}

.wish-label{
  font-size:10px;
  font-weight:500;
  letter-spacing:.3em;
  text-transform:uppercase;
  color:var(--text-dim);
  margin-bottom:12px;
}

.wish-address{
  font-family:ui-monospace,monospace;
  font-size:10px;
  line-height:1.6;
  color:var(--text);
  word-break:break-all;
  padding:12px;
  background:rgba(0,0,0,.5);
  border:1px solid var(--border);
  border-radius:2px;
  margin-bottom:16px;
}

.wish-copy-btn{
  width:100%;
  height:44px;
  border:1px solid var(--border);
  border-radius:2px;
  background:linear-gradient(135deg, rgba(139,92,246,.15), rgba(59,130,246,.15));
  border-color:rgba(139,92,246,.4);
  color:rgb(167,139,250);
  font-size:11px;
  font-weight:600;
  letter-spacing:.2em;
  text-transform:uppercase;
  cursor:pointer;
  transition:all 200ms ease;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  margin-bottom:12px;
}

.wish-copy-btn:hover{
  background:linear-gradient(135deg, rgba(139,92,246,.25), rgba(59,130,246,.25));
  border-color:rgb(139,92,246);
  transform:translateY(-2px);
}

.wish-wallet-btn{
  width:100%;
  height:48px;
  border:1px solid var(--border);
  border-radius:2px;
  background:transparent;
  color:var(--text-dim);
  font-size:12px;
  font-weight:500;
  letter-spacing:.15em;
  text-transform:uppercase;
  text-decoration:none;
  cursor:pointer;
  transition:all 200ms ease;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:12px;
}

.wish-wallet-btn:hover{
  background:rgba(255,107,53,.05);
  color:var(--text);
  border-color:rgba(255,107,53,.4);
}

.wish-note{
  text-align:center;
  font-size:11px;
  line-height:1.7;
  color:var(--text-dim);
  padding:16px;
  background:rgba(255,255,255,.02);
  border:1px solid var(--border);
  border-radius:2px;
}

/* Flash lumineux tous les 15000$ */
.price-flash{
  position:fixed;
  inset:0;
  z-index:1000;
  pointer-events:none;
  background:radial-gradient(circle at center, 
    rgba(255,255,255,.9), 
    rgba(255,255,255,.6), 
    rgba(255,255,255,.3) 50%,
    transparent 80%);
  opacity:0;
  transition:opacity 150ms cubic-bezier(.19,1,.22,1);
}

.price-flash.active{
  opacity:1;
}

/* Ring d'expansion (shockwave) */
.flash-ring{
  position:fixed;
  top:50%;
  left:50%;
  transform:translate(-50%, -50%) scale(0);
  width:200px;
  height:200px;
  border:4px solid rgba(255,255,255,.8);
  border-radius:50%;
  z-index:999;
  pointer-events:none;
  opacity:1;
  box-shadow:0 0 30px rgba(255,255,255,.6),
             inset 0 0 30px rgba(255,255,255,.4);
}

.flash-ring.active{
  animation:ringExpand 1.2s cubic-bezier(.16,.84,.44,1) forwards;
}

@keyframes ringExpand{
  0%{
    transform:translate(-50%, -50%) scale(0);
    opacity:1;
    border-width:4px;
  }
  50%{
    opacity:.8;
    border-width:3px;
  }
  100%{
    transform:translate(-50%, -50%) scale(8);
    opacity:0;
    border-width:1px;
  }
}

/* Shake de l'écran */
.screen-shake{
  animation:screenShake 300ms cubic-bezier(.36,.07,.19,.97);
}

@keyframes screenShake{
  0%, 100%{transform:translate(0, 0)}
  10%{transform:translate(-2px, -2px)}
  20%{transform:translate(2px, 2px)}
  30%{transform:translate(-2px, 2px)}
  40%{transform:translate(2px, -2px)}
  50%{transform:translate(-2px, -2px)}
  60%{transform:translate(2px, 2px)}
  70%{transform:translate(-2px, 2px)}
  80%{transform:translate(2px, -2px)}
  90%{transform:translate(-2px, -2px)}
}

@media (prefers-reduced-motion: reduce){
  .flash-ring,
  .screen-shake{
    animation:none !important;
  }
  
  .flash-ring.active{
    opacity:0;
  }
}