/*
 * Section vitrine Vtiny Hosting — reprise de
 * marketing/show-cases/_samples_2026/vtiny-showcase-ezn.html.
 * Tout est préfixé .vth- pour rester isolé du reste de la page.
 */

.vth-showcase{
  --vth-brand:#0e5077;
  --vth-brand-deep:#0a3a58;
  --vth-brand-deeper:#082c42;
  --vth-gold:#ffc40d;
  --vth-gold-deep:#d89e00;
  --vth-soft:#cfe0ea;
  --vth-muted:#aecdda;
  --vth-font-display:'Space Grotesk', 'IBM Plex Sans', sans-serif;
  --vth-font-body:'IBM Plex Sans', sans-serif;

  position:relative;
  overflow:hidden;
  border-radius:14px;
  background:linear-gradient(160deg, var(--vth-brand-deeper) 0%, var(--vth-brand-deep) 58%, var(--vth-brand) 100%);
  color:#fff;
  font-family:var(--vth-font-body);
  line-height:1.55;
  -webkit-font-smoothing:antialiased;
  text-align:left;
}
.vth-showcase *, .vth-showcase *::before, .vth-showcase *::after{ box-sizing:border-box; }
.vth-showcase h2, .vth-showcase h3, .vth-showcase p{ margin:0; }
.vth-showcase a{ text-decoration:none; }
.vth-showcase img, .vth-showcase svg{ display:block; max-width:100%; }

/* Carte du monde en points, très discrète */
.vth-showcase::before{
  content:"";
  position:absolute;
  inset:auto -6% -18% 38%;
  height:90%;
  background:url("https://cdn.eznovation.com/vtiny/ws/img/world-dots.svg") center / contain no-repeat;
  opacity:0.07;
  filter:invert(1);
  pointer-events:none;
}

.vth-inner{
  position:relative;
  display:grid;
  grid-template-columns:minmax(0,1.08fr) minmax(0,0.92fr);
  gap:52px;
  align-items:center;
  padding:64px 56px 40px;
}

/* --- Colonne gauche --- */
.vth-brand{
  display:flex;
  align-items:center;
  gap:14px;
  color:#fff;
}
/* Texte aligné sur le bas du nuage, comme dans l'en-tête de website/v2026
   (décalages mis à l'échelle du logo, ~42px de haut ici contre 35px). */
.vth-brand img{ width:76px; height:auto; position:relative; top:-5px; }
.vth-brand span{
  font-family:var(--vth-font-display);
  font-weight:600;
  font-size:1.45rem;
  letter-spacing:-0.01em;
  position:relative;
  top:5px;
}

.vth-showcase h2{
  margin-top:20px;
  font-family:var(--vth-font-display);
  font-weight:600;
  color:#fff;
  font-size:clamp(1.9rem, 3.6vw, 2.8rem);
  line-height:1.12;
  letter-spacing:-0.01em;
}
.vth-showcase h2 .vth-h2-sub{
  display:block;
  font-size:0.62em;
  font-weight:500;
  color:var(--vth-gold);
  margin-top:6px;
}
.vth-lede{
  margin-top:18px !important;
  color:var(--vth-soft);
  font-size:1.06rem;
  max-width:520px;
}

.vth-ctas{
  display:flex;
  flex-wrap:wrap;
  gap:12px;
  margin-top:26px;
}
.vth-btn{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:13px 24px;
  border-radius:6px;
  font-weight:600;
  font-size:0.97rem;
  border:1.5px solid transparent;
  transition:background 0.15s ease, border-color 0.15s ease;
}
.vth-btn svg{ width:16px; height:16px; }
.vth-btn-gold{ background:var(--vth-gold); color:var(--vth-brand-deeper) !important; }
.vth-btn-gold:hover{ background:var(--vth-gold-deep); }
.vth-btn-ghost{ border-color:rgba(255,255,255,0.35); color:#fff !important; }
.vth-btn-ghost:hover{ border-color:#fff; background:rgba(255,255,255,0.08); }
.vth-btn:focus-visible{ outline:2.5px solid var(--vth-gold); outline-offset:2px; }

.vth-pills{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  margin:28px 0 0;
  padding:0;
  list-style:none;
}
.vth-pills li{
  display:flex;
  align-items:center;
  gap:7px;
  padding:7px 12px;
  border-radius:999px;
  background:rgba(255,255,255,0.08);
  border:1px solid rgba(255,255,255,0.16);
  font-size:0.82rem;
  color:#e7f1f6;
}
.vth-pills svg{ width:14px; height:14px; color:var(--vth-gold); flex:none; }

/* --- Colonne droite : "seul l'espace disque change" --- */
.vth-card{
  background:rgba(255,255,255,0.06);
  border:1px solid rgba(255,255,255,0.14);
  border-radius:10px;
  padding:28px;
  backdrop-filter:blur(2px);
}
.vth-card h3{
  font-family:var(--vth-font-display);
  font-weight:600;
  font-size:1.15rem;
  color:#fff;
}
.vth-card-sub{
  margin-top:6px !important;
  font-size:0.86rem;
  color:var(--vth-muted);
}
.vth-legend{
  display:flex;
  gap:18px;
  margin-top:18px;
  font-size:0.76rem;
  color:var(--vth-muted);
}
.vth-legend span{ display:flex; align-items:center; gap:6px; }
.vth-legend i{ width:14px; height:6px; border-radius:3px; display:block; }
.vth-legend .vth-k-power{ background:var(--vth-gold); }
.vth-legend .vth-k-disk{ background:#7fc4e6; }

.vth-plans{ margin-top:14px; display:flex; flex-direction:column; gap:14px; }
.vth-plan{
  display:grid;
  grid-template-columns:62px 1fr 64px;
  gap:6px 12px;
  align-items:center;
}
.vth-plan-name{
  grid-row:span 2;
  font-family:var(--vth-font-display);
  font-weight:600;
  font-size:0.95rem;
}
.vth-plan-val{
  grid-row:span 2;
  text-align:right;
  font-family:var(--vth-font-display);
  font-weight:600;
  font-size:0.88rem;
  color:#fff;
  white-space:nowrap;
}
.vth-track{
  height:6px;
  border-radius:3px;
  background:rgba(255,255,255,0.1);
  overflow:hidden;
  position:relative;
}
.vth-fill{
  position:absolute;
  inset:0 auto 0 0;
  width:0;
  border-radius:3px;
  transition:width 1.1s cubic-bezier(.22,1,.36,1);
}
.vth-track-power .vth-fill{ background:var(--vth-gold); }
.vth-track-disk .vth-fill{ background:#7fc4e6; }
/* Tiny : 10 Go plein, puis plage jusqu'à 50 Go en hachuré */
.vth-track-disk .vth-range{
  background:repeating-linear-gradient(-45deg, rgba(127,196,230,0.55) 0 4px, rgba(127,196,230,0.2) 4px 8px);
}
.vth-card.vth-in .vth-fill{ width:var(--w); }
.vth-card.vth-in .vth-plan:nth-child(2) .vth-fill{ transition-delay:0.08s; }
.vth-card.vth-in .vth-plan:nth-child(3) .vth-fill{ transition-delay:0.16s; }
.vth-card.vth-in .vth-plan:nth-child(4) .vth-fill{ transition-delay:0.24s; }

.vth-specs{
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap:8px;
  margin-top:22px;
}
.vth-specs div{
  padding:9px 6px;
  border-radius:6px;
  background:rgba(255,255,255,0.05);
  border:1px solid rgba(255,255,255,0.12);
  text-align:center;
}
.vth-specs strong{
  display:block;
  font-family:var(--vth-font-display);
  font-weight:600;
  font-size:0.9rem;
  color:#fff;
}
.vth-specs span{ font-size:0.72rem; color:var(--vth-muted); }

/* --- Bande du bas : technologies + mention de marque --- */
.vth-foot{
  position:relative;
  display:flex;
  align-items:center;
  justify-content:space-between;
  flex-wrap:wrap;
  gap:16px 28px;
  margin:0 56px;
  padding:22px 0 26px;
  border-top:1px solid rgba(255,255,255,0.12);
}
.vth-tech{ display:flex; align-items:center; flex-wrap:wrap; gap:10px 14px; }
.vth-tech-label{ font-size:0.8rem; color:var(--vth-muted); margin-right:4px; }
.vth-tech-list{ display:flex; flex-wrap:wrap; gap:8px; margin:0; padding:0; list-style:none; }
.vth-tech-list li{
  width:38px; height:38px;
  display:grid;
  place-items:center;
  border-radius:8px;
  background:rgba(255,255,255,0.94);
  transition:transform 0.15s ease;
}
.vth-tech-list li:hover{ transform:translateY(-2px); }
.vth-tech-list img{ width:22px; height:22px; }
.vth-tm{ font-size:0.78rem; color:#8fb3c4; }

/* --- Responsive --- */
@media (max-width:960px){
  .vth-inner{ grid-template-columns:minmax(0,1fr); gap:40px; padding:48px 32px 32px; }
  .vth-card{ max-width:480px; }
  .vth-foot{ margin:0 32px; }
}
@media (max-width:560px){
  .vth-showcase{ border-radius:10px; }
  .vth-inner{ padding:36px 20px 28px; }
  .vth-foot{ margin:0 20px; }
  .vth-card{ padding:22px 18px; }
  .vth-plan{ grid-template-columns:52px 1fr 58px; gap:5px 10px; }
  .vth-btn{ flex:1 1 auto; justify-content:center; }
  .vth-tech-list li{ width:34px; height:34px; }
  .vth-tech-list img{ width:20px; height:20px; }
}
@media (prefers-reduced-motion: reduce){
  .vth-fill, .vth-tech-list li{ transition:none !important; }
}