/* ══════════════════════════════════════════════════════════════════
   PRICING REFRESH — Cartes d'offres lisibles & thématisées
   Utilisé par : minecraft.html, hytale.html, vps-game.html, vps-windows.html
   À inclure APRÈS le CSS spécifique de la page.
   ══════════════════════════════════════════════════════════════════ */

/* Couleurs d'accent par défaut (overridées par chaque page via [data-pricing-theme]) */
:root {
  --pr-accent:        var(--purple, #9b6dff);
  --pr-accent-2:      var(--purple2, #6f42c1);
  --pr-accent-soft:   rgba(155,109,255,0.10);
  --pr-accent-line:   rgba(155,109,255,0.28);
  --pr-trial:         #4ade80;
  --pr-trial-2:       #0d9f5a;
  --pr-card-bg:       var(--surface, #0f1225);
  --pr-card-bg-2:     #0b0e1f;
  --pr-tile-bg:       rgba(255,255,255,0.035);
  --pr-tile-border:   rgba(255,255,255,0.07);
  --pr-tile-hover:    rgba(255,255,255,0.05);
  --pr-text:          var(--white, #fff);
  --pr-text-soft:     var(--w70, rgba(255,255,255,0.70));
  --pr-text-muted:    var(--w40, rgba(255,255,255,0.40));
}

/* ══════ CARTE PRINCIPALE ══════ */
.pricing-card {
  background:
    radial-gradient(120% 80% at 50% -20%, var(--pr-accent-soft), transparent 55%),
    linear-gradient(180deg, var(--pr-card-bg), var(--pr-card-bg-2));
  border: 1px solid var(--border2, rgba(255,255,255,0.10));
  border-radius: 18px !important;
  padding: 22px 22px 20px !important;
  position: relative;
  overflow: hidden;
  transition: transform .25s ease, border-color .25s ease, box-shadow .25s ease;
}
.pricing-card::after {
  content:"";
  position:absolute; inset:0; pointer-events:none; border-radius:inherit;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.05);
}
.pricing-card:hover {
  transform: translateY(-4px);
  border-color: var(--pr-accent-line);
  box-shadow:
    0 24px 60px rgba(0,0,0,0.45),
    0 0 0 1px var(--pr-accent-line);
}

/* Carte populaire : gros halo + ruban */
.pricing-card.popular {
  border-color: var(--pr-accent-line);
  background:
    radial-gradient(120% 80% at 50% -10%, var(--pr-accent-soft), transparent 60%),
    linear-gradient(180deg, var(--pr-card-bg), var(--pr-card-bg-2));
  box-shadow:
    0 0 0 1px var(--pr-accent-line),
    0 32px 80px rgba(0,0,0,0.5),
    0 0 80px var(--pr-accent-soft);
}
.pricing-card.popular::before {
  height: 3px !important;
  background: linear-gradient(90deg, transparent, var(--pr-accent), transparent) !important;
}

/* Carte essai gratuit */
.pricing-card.trial {
  border-color: rgba(74,222,128,0.32);
  background:
    radial-gradient(120% 80% at 50% -10%, rgba(74,222,128,0.10), transparent 55%),
    linear-gradient(180deg, var(--pr-card-bg), var(--pr-card-bg-2));
}
.pricing-card.trial::before {
  height: 3px !important;
  background: linear-gradient(90deg, transparent, var(--pr-trial), transparent) !important;
}

/* ══════ EN-TÊTE / NOM DE L'OFFRE ══════ */
.pricing-name {
  font-family: 'Syne', sans-serif !important;
  font-size: 18px !important;
  font-weight: 800 !important;
  letter-spacing: -0.01em;
  margin: 6px 0 8px !important;
  color: var(--pr-text);
  line-height: 1.1;
}

.pricing-category {
  font-size: 10px !important;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--pr-accent) !important;
  font-weight: 700 !important;
}

/* Badge usage en haut */
.pricing-usecase {
  display: block !important;            /* override le flex initial */
  background: rgba(245,158,11,0.06) !important;
  border: 1px solid rgba(245,158,11,0.20) !important;
  border-radius: 10px !important;
  padding: 9px 11px !important;
  font-size: 11.5px !important;
  color: var(--pr-text-soft) !important;
  line-height: 1.45 !important;
  position: relative;
}
.pricing-usecase::before {
  content: "Recommandé pour";
  display: block;
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #f59e0b;
  margin-bottom: 4px;
}
.pricing-usecase i { display:none !important; }

/* Backup */
.pricing-backup {
  font-size: 11.5px !important;
  margin: 12px 0 10px !important;
}

/* Prix bien affirmé */
.pricing-price {
  font-family: 'Syne', sans-serif !important;
  font-size: 2.2rem !important;
  font-weight: 800 !important;
  letter-spacing: -0.02em !important;
  margin-bottom: 18px !important;
  background: linear-gradient(135deg, var(--pr-text), var(--pr-text-soft));
  -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;
}
.pricing-price small {
  font-size: 12px !important;
  -webkit-text-fill-color: var(--pr-text-muted);
}

/* ══════ SPECS — REFONTE COMPLÈTE EN TUILES ══════ */
/* On force une grille 2x2 au lieu d'une colonne de chips */
.pricing-specs {
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap: 8px !important;
  margin: 4px 0 14px !important;
}
/* La row qui contenait disque + réseau devient des cellules normales */
.pricing-specs .pricing-spec-row {
  display: contents !important;
}

/* Chaque spec devient une vraie tuile avec gros icône + label explicite + valeur */
.pricing-spec-badge {
  position: relative;
  display: flex !important;
  flex-direction: column;
  align-items: flex-start !important;
  gap: 4px !important;
  background: var(--pr-tile-bg) !important;
  border: 1px solid var(--pr-tile-border) !important;
  border-radius: 12px !important;
  padding: 12px 12px 12px 44px !important;
  font-size: 12.5px !important;
  color: var(--pr-text) !important;
  font-weight: 600 !important;
  line-height: 1.25 !important;
  min-height: 60px;
  transition: border-color .2s ease, background .2s ease, transform .2s ease;
}
.pricing-spec-badge:hover {
  background: var(--pr-tile-hover) !important;
  border-color: var(--pr-accent-line) !important;
  transform: translateY(-1px);
}

/* Icône en grand, dans un carré coloré à gauche */
.pricing-spec-badge i {
  position: absolute;
  left: 10px; top: 50%;
  transform: translateY(-50%);
  width: 26px !important; height: 26px !important;
  display: flex; align-items: center; justify-content: center;
  border-radius: 8px;
  font-size: 13px !important;
  color: var(--pr-accent) !important;
  background: var(--pr-accent-soft);
  border: 1px solid var(--pr-accent-line);
}

/* Label "Processeur / Mémoire vive / Disque NVMe / Réseau" injecté avant la valeur */
.pricing-spec-badge::before {
  content: "Spécification";
  display: block;
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--pr-text-muted);
  font-family: inherit;
}
/* Label par type d'icône — détecté grâce à la classe FA présente */
.pricing-spec-badge:has(i.fa-microchip)::before     { content: "Processeur"; }
.pricing-spec-badge:has(i.fa-memory)::before        { content: "Mémoire vive"; }
.pricing-spec-badge:has(i.fa-hard-drive)::before    { content: "Disque NVMe"; }
.pricing-spec-badge:has(i.fa-network-wired)::before { content: "Réseau"; }
.pricing-spec-badge:has(i.fa-shield-halved)::before { content: "Protection"; }
.pricing-spec-badge:has(i.fa-display)::before       { content: "Bureau"; }
.pricing-spec-badge:has(i.fa-server)::before        { content: "Serveur"; }
.pricing-spec-badge:has(i.fa-globe)::before         { content: "Localisation"; }
.pricing-spec-badge:has(i.fa-bolt)::before          { content: "Performance"; }

/* Couleurs d'icônes par type pour repérage visuel rapide */
.pricing-spec-badge:has(i.fa-microchip) i     { color:#7dd3fc; background: rgba(125,211,252,0.10); border-color: rgba(125,211,252,0.28); }
.pricing-spec-badge:has(i.fa-memory) i        { color:#86efac; background: rgba(134,239,172,0.10); border-color: rgba(134,239,172,0.28); }
.pricing-spec-badge:has(i.fa-hard-drive) i    { color:#fbbf24; background: rgba(251,191,36,0.10); border-color: rgba(251,191,36,0.28); }
.pricing-spec-badge:has(i.fa-network-wired) i { color:#f0abfc; background: rgba(240,171,252,0.10); border-color: rgba(240,171,252,0.28); }

/* ══════ FEATURES (slots, SLA, Anti-DDoS) ══════ */
.pricing-features {
  display: grid !important;
  grid-template-columns: 1fr;
  gap: 6px !important;
  margin: 6px 0 18px !important;
}
.pricing-feature {
  font-size: 12px !important;
  padding: 7px 11px !important;
  border-radius: 8px !important;
  background: rgba(74,222,128,0.06) !important;
  border: 1px solid rgba(74,222,128,0.18) !important;
  color: rgba(220,252,231,0.95) !important;
}

/* ══════ BOUTON CTA ══════ */
.pricing-btn {
  font-size: 13px !important;
  font-weight: 800 !important;
  padding: 13px 18px !important;
  border-radius: 12px !important;
  letter-spacing: 0.02em;
  background: rgba(255,255,255,0.05);
  border: 1px solid var(--border2, rgba(255,255,255,0.14)) !important;
  transition: transform .15s ease, box-shadow .2s ease, background .2s ease;
}
.pricing-btn:hover {
  background: rgba(255,255,255,0.10) !important;
  transform: translateY(-2px);
  box-shadow: 0 12px 28px rgba(0,0,0,0.35);
}

/* CTA mis en avant sur la carte populaire */
.pricing-card.popular .pricing-btn,
.pricing-btn.primary {
  background: linear-gradient(135deg, var(--pr-accent-2), var(--pr-accent)) !important;
  border-color: transparent !important;
  color: #fff !important;
  box-shadow: 0 10px 28px var(--pr-accent-soft);
}
.pricing-card.popular .pricing-btn:hover,
.pricing-btn.primary:hover {
  filter: brightness(1.08);
}

/* CTA essai gratuit */
.pricing-btn.trial {
  background: linear-gradient(135deg, var(--pr-trial-2), var(--pr-trial)) !important;
  color:#041b0d !important;
  border-color: transparent !important;
  box-shadow: 0 10px 28px rgba(74,222,128,0.30);
}

/* ══════ THÈME LIGHT — adaptation ══════ */
[data-theme="light"] .pricing-card {
  --pr-card-bg: #ffffff;
  --pr-card-bg-2: #fafbff;
  --pr-tile-bg: rgba(0,0,0,0.025);
  --pr-tile-border: rgba(0,0,0,0.06);
  --pr-tile-hover: rgba(0,0,0,0.04);
  --pr-text: #111827;
  --pr-text-soft: rgba(17,24,39,0.70);
  --pr-text-muted: rgba(17,24,39,0.45);
}
[data-theme="light"] .pricing-feature {
  background: rgba(22,163,74,0.06) !important;
  border-color: rgba(22,163,74,0.20) !important;
  color: #065f46 !important;
}
[data-theme="light"] .pricing-btn {
  background: rgba(0,0,0,0.03);
  border-color: rgba(0,0,0,0.10) !important;
  color:#111827 !important;
}
[data-theme="light"] .pricing-btn:hover { background: rgba(0,0,0,0.06) !important; }

/* ══════════════════════════════════════════════════════════════════
   THÈMES PAR PAGE — appliqués via [data-pricing-theme="..."] sur la
   section #pricing pour ne pas polluer le reste du site.
   ══════════════════════════════════════════════════════════════════ */

/* ── MINECRAFT : Mossy Cobblestone (vert mousse + roche) ── */
[data-pricing-theme="minecraft"] {
  --pr-accent:        #6ee087;
  --pr-accent-2:      #2f7d3a;
  --pr-accent-soft:   rgba(110,224,135,0.12);
  --pr-accent-line:   rgba(110,224,135,0.32);
}
[data-pricing-theme="minecraft"] .pricing-card {
  border-radius: 14px 16px 14px 18px !important;
  background:
    radial-gradient(120% 80% at 50% -20%, rgba(110,224,135,0.10), transparent 55%),
    linear-gradient(180deg, #14201a, #0c1612) !important;
}
[data-pricing-theme="minecraft"] .pricing-card.popular {
  background:
    radial-gradient(120% 80% at 50% -10%, rgba(110,224,135,0.16), transparent 60%),
    linear-gradient(180deg, #16261d, #0d1814) !important;
  border-color: rgba(110,224,135,0.45);
}
/* Bord "herbe" en haut de la carte */
[data-pricing-theme="minecraft"] .pricing-card::before {
  content:"" !important;
  position:absolute; top:0; left:0; right:0; height: 6px !important;
  background:
    linear-gradient(90deg, #4a8a3a 0 8px, #5a9e3a 8px 14px, #4a8a3a 14px 22px,
                          #6cb84a 22px 28px, #5a9e3a 28px 38px, #4a8a3a 38px 44px,
                          #5a9e3a 44px 56px, #6cb84a 56px 62px, #4a8a3a 62px 100%) !important;
  box-shadow: inset 0 -1px 0 rgba(0,0,0,0.4);
}
[data-pricing-theme="minecraft"] .pricing-name { color:#eafff0; }
[data-pricing-theme="minecraft"] .pricing-category { color:#6ee087 !important; }
[data-pricing-theme="minecraft"] .pricing-spec-badge { border-radius: 6px !important; }
[data-pricing-theme="minecraft"] .pricing-spec-badge i { border-radius: 4px; }
[data-pricing-theme="minecraft"] .pricing-card.popular .pricing-btn,
[data-pricing-theme="minecraft"] .pricing-btn.primary {
  background: linear-gradient(135deg, #2f7d3a, #6ee087) !important;
  color:#0a1f10 !important;
}

/* ── HYTALE : Cristal magique (orange ambre + violet) ── */
[data-pricing-theme="hytale"] {
  --pr-accent:        #f9a826;
  --pr-accent-2:      #b45309;
  --pr-accent-soft:   rgba(249,168,38,0.12);
  --pr-accent-line:   rgba(249,168,38,0.32);
}
[data-pricing-theme="hytale"] .pricing-card {
  background:
    radial-gradient(120% 80% at 50% -20%, rgba(249,168,38,0.10), transparent 55%),
    linear-gradient(180deg, #1c1530, #110b22) !important;
}
[data-pricing-theme="hytale"] .pricing-card.popular {
  background:
    radial-gradient(120% 80% at 50% -10%, rgba(249,168,38,0.18), transparent 60%),
    linear-gradient(180deg, #221a3a, #130c25) !important;
  border-color: rgba(249,168,38,0.45);
  box-shadow:
    0 0 0 1px rgba(249,168,38,0.30),
    0 32px 80px rgba(0,0,0,0.5),
    0 0 90px rgba(249,168,38,0.15);
}
/* Liseré cristal en haut */
[data-pricing-theme="hytale"] .pricing-card::before {
  height: 2px !important;
  background: linear-gradient(90deg, transparent, var(--pr-accent), #c084fc, var(--pr-accent), transparent) !important;
}
[data-pricing-theme="hytale"] .pricing-card.popular .pricing-btn,
[data-pricing-theme="hytale"] .pricing-btn.primary {
  background: linear-gradient(135deg, #b45309, #f9a826) !important;
  color:#1a0f00 !important;
  box-shadow: 0 10px 28px rgba(249,168,38,0.35);
}

/* ── VPS GAME : Rack tech (cyan + violet) ── */
[data-pricing-theme="vps-game"] {
  --pr-accent:        #38bdf8;
  --pr-accent-2:      #6f42c1;
  --pr-accent-soft:   rgba(56,189,248,0.10);
  --pr-accent-line:   rgba(56,189,248,0.30);
}
[data-pricing-theme="vps-game"] .pricing-card {
  background:
    radial-gradient(120% 80% at 50% -20%, rgba(56,189,248,0.10), transparent 55%),
    linear-gradient(180deg, #0e1626, #08101c) !important;
}
[data-pricing-theme="vps-game"] .pricing-card.popular .pricing-btn,
[data-pricing-theme="vps-game"] .pricing-btn.primary {
  background: linear-gradient(135deg, #6f42c1, #38bdf8) !important;
  color:#06121f !important;
}

/* ── VPS WINDOWS : Bleu pro ── */
[data-pricing-theme="vps-windows"] {
  --pr-accent:        #60a5fa;
  --pr-accent-2:      #1e40af;
  --pr-accent-soft:   rgba(96,165,250,0.10);
  --pr-accent-line:   rgba(96,165,250,0.32);
}
[data-pricing-theme="vps-windows"] .pricing-card {
  background:
    radial-gradient(120% 80% at 50% -20%, rgba(96,165,250,0.10), transparent 55%),
    linear-gradient(180deg, #0d1424, #08101c) !important;
}
[data-pricing-theme="vps-windows"] .pricing-card.popular .pricing-btn,
[data-pricing-theme="vps-windows"] .pricing-btn.primary {
  background: linear-gradient(135deg, #1e40af, #60a5fa) !important;
  color:#fff !important;
}

/* ══════ RESPONSIVE ══════ */
@media (max-width: 520px) {
  .pricing-specs { grid-template-columns: 1fr !important; }
  .pricing-spec-badge { min-height: 56px; }
}

/* ══════════════════════════════════════════════════════════════════
   PATCH REFRESH v2 — alignement, badges flottants, light theme
   ══════════════════════════════════════════════════════════════════ */

/* La carte doit pouvoir laisser dépasser le badge en haut */
.pricing-card { overflow: visible !important; }
.pricing-card::after { overflow: hidden; }

/* Badges ESSAI / POPULAIRE flottants au-dessus de la carte */
.pricing-card > .pricing-badge {
  position: absolute !important;
  top: -14px !important;
  left: 50%;
  transform: translateX(-50%);
  margin: 0 !important;
  z-index: 3;
  white-space: nowrap;
  padding: 6px 14px !important;
  font-size: 10px !important;
  letter-spacing: 0.10em !important;
  border-radius: 999px !important;
  box-shadow: 0 8px 22px rgba(0,0,0,0.35);
}
/* Petite réserve d'espace en haut des cartes pour laisser respirer le badge */
.pricing-grid, .pricing-grid-row2 { padding-top: 14px; }

/* Spécifications : grille 2 colonnes parfaitement alignée, hauteurs égales */
.pricing-specs {
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  grid-auto-rows: 1fr !important;
  gap: 10px !important;
  align-items: stretch !important;
}
.pricing-specs .pricing-spec-row { display: contents !important; }
.pricing-spec-badge {
  width: 100% !important;
  height: 100% !important;
  min-height: 64px !important;
  box-sizing: border-box;
  align-self: stretch !important;
}

/* Supprime visuellement les sous-taglines résiduels (entre titre et "recommandé pour") */
.pricing-card > p[style*="margin-top:-8px"],
.pricing-card > p[style*="margin-top: -8px"],
.pricing-card > span[style*="margin-top:-8px"],
.pricing-card > span[style*="margin-top: -8px"],
.pricing-card .pricing-tagline {
  display: none !important;
}

/* ══════ LIGHT THEME — adaptation complète ══════ */
[data-theme="light"] .pricing-card {
  --pr-card-bg: #ffffff;
  --pr-card-bg-2: #f7f8fc;
  --pr-tile-bg: rgba(17,24,39,0.035);
  --pr-tile-border: rgba(17,24,39,0.08);
  --pr-tile-hover: rgba(17,24,39,0.06);
  --pr-text: #0f172a;
  --pr-text-soft: rgba(15,23,42,0.72);
  --pr-text-muted: rgba(15,23,42,0.50);
  background:
    radial-gradient(120% 80% at 50% -20%, var(--pr-accent-soft), transparent 55%),
    linear-gradient(180deg, #ffffff, #f7f8fc) !important;
  border: 1px solid rgba(17,24,39,0.08) !important;
  box-shadow: 0 6px 24px rgba(15,23,42,0.06);
  color: #0f172a;
}
[data-theme="light"] .pricing-card.popular {
  border-color: var(--pr-accent-line) !important;
  box-shadow:
    0 0 0 1px var(--pr-accent-line),
    0 18px 50px rgba(15,23,42,0.10);
}
[data-theme="light"] .pricing-card.trial {
  border-color: rgba(13,159,90,0.32) !important;
}

/* Texte */
[data-theme="light"] .pricing-name {
  color: #0f172a !important;
  background: none !important;
  -webkit-text-fill-color: #0f172a !important;
}
[data-theme="light"] .pricing-price {
  background: none !important;
  -webkit-text-fill-color: #0f172a !important;
  color: #0f172a !important;
}
[data-theme="light"] .pricing-price small {
  -webkit-text-fill-color: rgba(15,23,42,0.55) !important;
  color: rgba(15,23,42,0.55) !important;
}
[data-theme="light"] .pricing-category { color: var(--pr-accent) !important; }
[data-theme="light"] .pricing-backup { color: #047857 !important; }
[data-theme="light"] .pricing-auto {
  background: rgba(17,24,39,0.04) !important;
  border-color: rgba(17,24,39,0.08) !important;
  color: rgba(15,23,42,0.55) !important;
}
[data-theme="light"] .pricing-auto i { color: var(--pr-accent) !important; }
[data-theme="light"] .pricing-usecase {
  background: rgba(217,119,6,0.06) !important;
  border-color: rgba(217,119,6,0.22) !important;
  color: rgba(15,23,42,0.78) !important;
}
[data-theme="light"] .pricing-usecase::before { color: #b45309 !important; }
[data-theme="light"] .pricing-spec-badge { color: #0f172a !important; }
[data-theme="light"] .pricing-spec-badge::before { color: rgba(15,23,42,0.50) !important; }
[data-theme="light"] .pricing-feature {
  background: rgba(5,150,105,0.07) !important;
  border-color: rgba(5,150,105,0.22) !important;
  color: #065f46 !important;
}

/* Récompenses (bloc rewards utilisé sur les pages produits) */
[data-theme="light"] .pricing-rewards {
  background: var(--pr-accent-soft) !important;
  border: 1px solid var(--pr-accent-line) !important;
}
[data-theme="light"] .pricing-rewards-title { color: #0f172a !important; }
[data-theme="light"] .pricing-reward-row span:first-child { color: rgba(15,23,42,0.78) !important; }
[data-theme="light"] .pricing-reward-row .pts { color: var(--pr-accent) !important; }

/* Boutons */
[data-theme="light"] .pricing-btn {
  background: rgba(17,24,39,0.04) !important;
  border-color: rgba(17,24,39,0.10) !important;
  color: #0f172a !important;
}
[data-theme="light"] .pricing-btn:hover { background: rgba(17,24,39,0.07) !important; }
[data-theme="light"] .pricing-card.popular .pricing-btn,
[data-theme="light"] .pricing-btn.primary {
  color: #fff !important;
}