/* =====================================================
   Hytale-Serveur.online — Thème Orange & Or premium gaming v2
   ===================================================== */
@import url('https://fonts.googleapis.com/css2?family=Rajdhani:wght@500;600;700&family=Inter:wght@400;500;600;700;800;900&display=swap');

:root {
  --orange: #FF8A00;
  --orange-vif: #FF9F1C;
  --gold: #FFC857;
  --gold-light: #FFD875;
  --bg: #0B0B0D;
  --bg-2: #141416;
  --card: #1A1A1E;
  --card-hi: #202026;
  --text: #FFFFFF;
  --muted: #A8A8AD;
  --online: #22C55E;
  --offline: #EF4444;
  --border: rgba(255,255,255,.07);
  --border-glow: rgba(255,138,0,.35);
  --grad: linear-gradient(135deg, var(--orange) 0%, var(--gold) 100%);
  --grad-soft: linear-gradient(135deg, rgba(255,138,0,.14), rgba(255,200,87,.08));
  --glow: 0 0 24px rgba(255,138,0,.25);
  --glow-strong: 0 0 44px rgba(255,160,30,.4);
  --radius: 18px;
  --font-display: 'Rajdhani', 'Segoe UI', sans-serif;
  --font-body: 'Inter', 'Segoe UI', system-ui, sans-serif;
}

* { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-body);
  line-height: 1.65;
  min-height: 100vh;
  -webkit-font-smoothing: antialiased;
}
::selection { background: rgba(255,138,0,.4); color: #fff; }
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: var(--bg); }
::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg, var(--orange), var(--gold));
  border-radius: 99px; border: 2px solid var(--bg);
}
a { color: inherit; text-decoration: none; }
img { max-width: 100%; }
.container { max-width: 1240px; margin: 0 auto; padding: 0 20px; }

/* ---------- Typo ---------- */
h1, h2, h3, .logo, .btn, .rank-num, .plan-price, .stat-card b {
  font-family: var(--font-display);
  letter-spacing: .01em;
}
h2.section-title, h3 { text-transform: uppercase; letter-spacing: .04em; }
.grad-text {
  background: var(--grad);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.section-title { font-size: clamp(1.5rem, 3vw, 2.2rem); margin-bottom: .4rem; }
.section-sub { color: var(--muted); margin-bottom: 2rem; max-width: 720px; }

/* ---------- Boutons ---------- */
.btn {
  position: relative; display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  padding: .74rem 1.5rem; border-radius: 12px; border: 1px solid transparent;
  font-weight: 700; font-size: .93rem; cursor: pointer; transition: all .22s cubic-bezier(.4,0,.2,1);
  white-space: nowrap; overflow: hidden; letter-spacing: .02em;
}
.btn::after {
  content: ''; position: absolute; top: 0; left: -80%; width: 60%; height: 100%;
  background: linear-gradient(105deg, transparent, rgba(255,255,255,.45), transparent);
  transform: skewX(-20deg); transition: left .55s ease; pointer-events: none;
}
.btn:hover::after { left: 130%; }
.btn-primary {
  background: var(--grad); color: #17110a;
  box-shadow: 0 4px 20px rgba(255,138,0,.32), inset 0 1px 0 rgba(255,255,255,.35);
}
.btn-primary:hover { transform: translateY(-2px); box-shadow: 0 10px 34px rgba(255,150,20,.5); filter: brightness(1.05); }
.btn-outline { background: transparent; color: var(--gold-light); border-color: rgba(255,200,87,.35); }
.btn-outline:hover { border-color: var(--gold); box-shadow: var(--glow); transform: translateY(-2px); background: rgba(255,200,87,.06); }
.btn-ghost { background: rgba(255,255,255,.05); color: var(--text); backdrop-filter: blur(6px); }
.btn-ghost:hover { background: var(--grad-soft); color: var(--gold-light); }
.btn-sm { padding: .46rem .95rem; font-size: .84rem; border-radius: 9px; }
.btn-block { width: 100%; }
.btn-danger { background: rgba(239,68,68,.13); color: #f87171; border-color: rgba(239,68,68,.3); }
.btn-danger:hover { background: rgba(239,68,68,.28); box-shadow: 0 0 18px rgba(239,68,68,.25); }
.btn-success { background: rgba(34,197,94,.13); color: #4ade80; border-color: rgba(34,197,94,.3); }
.btn-success:hover { box-shadow: 0 0 18px rgba(34,197,94,.25); }
.btn-warning { background: rgba(255,159,28,.13); color: var(--orange-vif); border-color: rgba(255,159,28,.3); }
button:disabled { opacity: .55; cursor: not-allowed; filter: grayscale(.4); }

/* ---------- Navbar ---------- */
.navbar {
  position: sticky; top: 0; z-index: 100;
  background: rgba(11,11,13,.72); backdrop-filter: blur(18px) saturate(160%);
  border-bottom: 1px solid var(--border);
}
.navbar::after {
  content:''; position:absolute; bottom:-1px; left:0; right:0; height:1px;
  background: linear-gradient(90deg, transparent 5%, rgba(255,138,0,.55) 50%, transparent 95%);
  opacity:.7;
}
.navbar-inner {
  display: flex; align-items: center; gap: 1.1rem; min-height: 74px; height: auto;
  max-width: 1420px; flex-wrap: wrap; row-gap: .2rem; padding: .3rem 0;
}
.logo { display: flex; align-items: center; gap: .58rem; font-weight: 800; font-size: 1.14rem; letter-spacing: .01em; transition: transform .25s; }
.logo:hover { transform: scale(1.03); }
.logo-img { width: 160px; height: 68px; object-fit: contain; display: block; }
.logo-img-lg { width: 224px; height: 95px; object-fit: contain; display: block; margin: 0 auto; }
.logo-mark {
  width: 40px; height: 40px; border-radius: 12px; background: var(--grad);
  display: grid; place-items: center; font-size: 1.08rem;
  box-shadow: 0 0 22px rgba(255,138,0,.45), inset 0 1px 0 rgba(255,255,255,.45);
  animation: markPulse 3.2s ease-in-out infinite; position: relative;
}
@keyframes markPulse { 0%,100% { box-shadow: 0 0 18px rgba(255,138,0,.4); } 50% { box-shadow: 0 0 38px rgba(255,170,40,.65); } }
.logo b { color: transparent; background: var(--grad); -webkit-background-clip: text; background-clip: text; }
.nav-links { display: flex; align-items: center; gap: .3rem; flex: 1; min-width: 0; flex-wrap: wrap; }
.nav-links a {
  color: var(--muted); font-weight: 600; font-size: .9rem; padding: .48rem .7rem;
  border-radius: 9px; position: relative; transition: color .22s, background .22s;
  white-space: nowrap; flex-shrink: 0;
}
.nav-links a::after {
  content:''; position:absolute; left:50%; right:50%; bottom:2px; height:2px;
  background: var(--grad); border-radius:2px; transition: left .28s cubic-bezier(.4,0,.2,1), right .28s cubic-bezier(.4,0,.2,1), box-shadow .28s;
}
.nav-links a:hover { color: var(--gold-light); background: rgba(255,138,0,.06); }
.nav-links a:hover::after { left: 20%; right: 20%; box-shadow: 0 0 10px rgba(255,138,0,.8); }
.nav-links a.active { color: var(--gold-light); }
.nav-links a.active::after { left: 16%; right: 16%; box-shadow: 0 0 10px rgba(255,138,0,.85); }
.nav-search { flex: 1 1 120px; min-width: 0; position: relative; }
.nav-search input {
  width: 100%; padding: .62rem .9rem .62rem 2.5rem; border-radius: 999px;
  background: rgba(255,255,255,.05); border: 1px solid var(--border); color: var(--text);
  font-size: .86rem; outline: none; transition: all .28s; white-space: nowrap;
}
.nav-search input:focus {
  border-color: rgba(255,138,0,.55); box-shadow: var(--glow);
  background: rgba(255,138,0,.06);
}
.nav-search input::placeholder { color: rgba(168,168,173,.6); }
.nav-search::before { content: '🔍'; position: absolute; left: .85rem; top: 50%; transform: translateY(-50%); font-size: .76rem; opacity: .55; z-index: 1; }
.nav-actions { display: flex; align-items: center; gap: .6rem; }

/* Bandeau d'annonce */
.announce-bar {
  background: linear-gradient(90deg, rgba(255,138,0,.16), rgba(255,200,87,.10), rgba(255,138,0,.16));
  border-bottom: 1px solid rgba(255,200,87,.25);
  padding: .55rem 0; text-align: center;
  font-size: .9rem; font-weight: 600; color: var(--gold-light);
}

/* Menu utilisateur déroulant */
.user-menu { position: relative; flex-shrink: 0; }
.user-menu > a {
  display:inline-flex; align-items:center; gap:.45rem; padding:.5rem .9rem; border-radius:999px;
  background: rgba(255,255,255,.04); border:1px solid rgba(255,200,87,.28);
  font-weight:700; font-size:.86rem; color:var(--gold-light); transition: all .22s;
  white-space: nowrap;
}
.user-menu > a:hover { border-color: var(--gold); box-shadow: var(--glow); }
.user-menu > a::after { content:'▾'; font-size:.7rem; transition: transform .25s ease; display:inline-block; }
.user-menu:hover > a::after, .user-menu:focus-within > a::after, .user-menu.open > a::after { transform: rotate(180deg); }
.user-dropdown {
  position:absolute; top:calc(100% + 8px); right:0; min-width:200px;
  background: var(--card-hi); border:1px solid var(--border-glow); border-radius:14px;
  padding:.5rem; box-shadow: 0 18px 44px rgba(0,0,0,.55), var(--glow);
  opacity:0; visibility:hidden; transform: translateY(-8px) scale(.98);
  transform-origin: top right;
  transition: opacity .22s ease, transform .22s cubic-bezier(.34,1.3,.64,1), visibility 0s linear .22s;
}
/* Pont invisible : garde le survol entre le bouton et le menu */
.user-dropdown::before { content:''; position:absolute; top:-10px; left:-8px; right:-8px; height:10px; }
.user-menu:hover .user-dropdown,
.user-menu:focus-within .user-dropdown,
.user-menu.open .user-dropdown {
  opacity:1; visibility:visible; transform:none;
  transition: opacity .22s ease, transform .22s cubic-bezier(.34,1.3,.64,1), visibility 0s;
}
.user-dropdown a {
  display:flex; align-items:center; gap:.55rem; padding:.6rem .8rem; border-radius:9px;
  color:var(--muted); font-size:.87rem; font-weight:600;
  transition: background .18s ease, color .18s ease, transform .18s ease, padding-left .18s ease;
}
.user-dropdown a:hover { background: var(--grad-soft); color: var(--gold-light); transform: translateX(4px); }
.user-dropdown a:active { transform: translateX(4px) scale(.97); }
.hamburger { display: none; background: none; border: none; color: var(--text); font-size: 1.5rem; cursor: pointer; padding: .3rem .5rem; border-radius: 8px; transition: all .2s; }
.hamburger:hover { background: rgba(255,138,0,.1); }

/* ---------- Hero ---------- */
.hero {
  position: relative; overflow: hidden; text-align: center;
  padding: 110px 20px 130px;
  background:
    radial-gradient(ellipse 60% 50% at 50% -10%, rgba(255,138,0,.17), transparent),
    radial-gradient(ellipse 40% 40% at 85% 110%, rgba(255,200,87,.09), transparent),
    radial-gradient(ellipse 40% 40% at 12% 110%, rgba(255,159,28,.08), transparent),
    var(--bg);
}
.hero-bg {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; object-position: center 35%; z-index: 0; pointer-events: none;
}
.hero-bg-overlay {
  position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background:
    linear-gradient(180deg, rgba(16,16,22,.78) 0%, rgba(16,16,22,.42) 45%, rgba(16,16,22,.85) 100%),
    radial-gradient(ellipse 60% 50% at 50% -10%, rgba(255,138,0,.15), transparent);
}
.hero-grid-bg {
  position: absolute; inset: 0; opacity: .5; pointer-events: none;
  background-image:
    linear-gradient(rgba(255,138,0,.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,138,0,.05) 1px, transparent 1px);
  background-size: 56px 56px;
  mask-image: radial-gradient(ellipse 70% 60% at 50% 30%, black 30%, transparent 75%);
}
.hero::before, .hero::after {
  content: ''; position: absolute; border-radius: 50%; filter: blur(90px); pointer-events: none;
  animation: floatOrb 9s ease-in-out infinite alternate;
}
.hero::before { width: 430px; height: 430px; left: -120px; top: -120px; background: rgba(255,138,0,.11); }
.hero::after { width: 380px; height: 380px; right: -100px; bottom: -140px; background: rgba(255,200,87,.09); animation-delay: -4s; }
@keyframes floatOrb { from { transform: translateY(0) scale(1); } to { transform: translateY(34px) scale(1.1); } }
.hero-badge {
  display: inline-flex; align-items: center; gap: .5rem; padding: .42rem 1.05rem;
  border-radius: 999px; border: 1px solid rgba(255,200,87,.32);
  background: rgba(255,200,87,.07); color: var(--gold-light);
  font-size: .8rem; font-weight: 700; margin-bottom: 1.4rem;
  animation: badgeGlow 2.6s ease-in-out infinite;
}
@keyframes badgeGlow { 0%,100% { box-shadow: 0 0 0 rgba(255,200,87,0); } 50% { box-shadow: 0 0 24px rgba(255,200,87,.25); } }
.hero h1 {
  font-family: var(--font-display);
  font-size: clamp(2.6rem, 6.5vw, 4.8rem); font-weight: 700; text-transform: uppercase;
  letter-spacing: .02em; line-height: 1.04;
  background: linear-gradient(135deg, #fff 5%, var(--gold-light) 48%, var(--orange) 96%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
  filter: drop-shadow(0 6px 30px rgba(255,150,20,.22));
  margin-bottom: 1.1rem;
}
.hero p { color: var(--muted); font-size: clamp(1rem, 2vw, 1.18rem); max-width: 640px; margin: 0 auto 2.3rem; }
.hero-actions { display: flex; gap: 1rem; justify-content: center; flex-wrap: wrap; }
.hero-stats {
  display: flex; gap: 2.8rem; justify-content: center; margin-top: 3.4rem; flex-wrap: wrap;
  padding-top: 2rem; border-top: 1px solid rgba(255,255,255,.06);
}
.hero-stat b {
  display: block; font-size: 1.9rem; font-weight: 700;
  background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent;
}
.hero-stat span { color: var(--muted); font-size: .83rem; text-transform: uppercase; letter-spacing: .09em; }

/* Particules subtiles */
.particles { position: absolute; inset: 0; overflow: hidden; pointer-events: none; }
.particle {
  position: absolute; width: 4px; height: 4px; border-radius: 50%;
  background: radial-gradient(circle, rgba(255,200,87,.9), transparent 70%);
  animation: rise linear infinite; opacity: 0;
}
@keyframes rise {
  0% { transform: translateY(0) scale(.6); opacity: 0; }
  12% { opacity: .75; }
  90% { opacity: .15; }
  100% { transform: translateY(-340px) scale(1.15); opacity: 0; }
}

/* ---------- Sections & cartes ---------- */
section.block { padding: 64px 0; }
.grid { display: grid; gap: 1.25rem; }
.grid-servers { grid-template-columns: repeat(auto-fill, minmax(340px, 1fr)); }
.grid-stats { grid-template-columns: repeat(auto-fit, minmax(172px, 1fr)); }
.grid-plans { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); max-width: 1060px; margin: 0 auto; }

.card {
  background: linear-gradient(180deg, var(--card-hi), var(--card) 55%);
  border: 1px solid var(--border); border-radius: var(--radius);
  padding: 1.45rem; transition: all .26s cubic-bezier(.4,0,.2,1); position: relative;
}
.card::before {
  content: ''; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
  background: radial-gradient(220px circle at var(--mx, 50%) var(--my, 0%), rgba(255,138,0,.12), transparent 65%);
  opacity: 0; transition: opacity .3s;
}
/* Bordure dégradée animée au survol (les cartes sponsorisées ont déjà leur ::after) */
.card:not(.sponsored)::after {
  content: ''; position: absolute; inset: -1px; border-radius: inherit; pointer-events: none;
  opacity: 0; transition: opacity .35s ease;
  border: 1px solid transparent;
  background: linear-gradient(130deg, rgba(255,138,0,.6), rgba(255,200,87,.25) 35%, transparent 55%, rgba(255,200,87,.5)) border-box;
  mask: linear-gradient(#fff 0 0) padding-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
}
.card:not(.sponsored):hover::after { opacity: 1; }
.card:hover { border-color: var(--border-glow); box-shadow: 0 12px 40px rgba(0,0,0,.4), 0 0 30px rgba(255,138,0,.14); transform: translateY(-4px); }
.card:hover::before { opacity: 1; }

.stat-card { overflow: hidden; }
.stat-card .icon {
  width: 44px; height: 44px; border-radius: 12px; display: grid; place-items: center;
  background: var(--grad-soft); border: 1px solid rgba(255,138,0,.2);
  font-size: 1.15rem; margin-bottom: .85rem; transition: all .3s;
}
.stat-card:hover .icon { transform: scale(1.1) rotate(-6deg); box-shadow: var(--glow); }
.stat-card b { font-size: 1.75rem; display: block; line-height: 1.1; }
.stat-card span { color: var(--muted); font-size: .8rem; text-transform: uppercase; letter-spacing: .08em; }
.stat-card.gold b { background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent; }

/* ---------- Carte serveur ---------- */
.server-card {
  display: flex; flex-direction: column; gap: .9rem;
  background:
    linear-gradient(180deg, rgba(255,255,255,.03), rgba(255,255,255,0) 42%),
    var(--bg-1);
  transition: transform .22s ease, border-color .22s ease, box-shadow .25s ease;
}
/* Carte entièrement cliquable : le clic hors boutons ouvre la fiche */
.server-card[data-href] { cursor: pointer; }
.server-card[data-href]:hover {
  border-color: rgba(255,138,0,.45);
  transform: translateY(-4px);
  box-shadow: 0 14px 38px rgba(0,0,0,.42), 0 0 0 1px rgba(255,138,0,.12), 0 6px 24px -8px rgba(255,138,0,.28);
}
.server-card[data-href]:active { transform: translateY(-2px) scale(.995); }
.server-card.sponsored { border-color: rgba(255,200,87,.5); box-shadow: inset 0 0 40px rgba(255,138,0,.05); }
.server-card.sponsored::after {
  content: ''; position: absolute; inset: -1px; border-radius: inherit; pointer-events: none;
  border: 1px solid transparent;
  background: linear-gradient(135deg, rgba(255,138,0,.5), transparent 40%, transparent 60%, rgba(255,200,87,.4)) border-box;
  mask: linear-gradient(#fff 0 0) padding-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
  animation: promoBorder 3s ease-in-out infinite;
}
@keyframes promoBorder { 0%,100% { opacity: .5; } 50% { opacity: 1; } }
.server-head { display: flex; align-items: center; gap: .9rem; }
.rank-num {
  min-width: 46px; height: 46px; border-radius: 13px; display: grid; place-items: center;
  font-weight: 800; font-size: 1.08rem; background: rgba(255,255,255,.04);
  color: var(--muted); border: 1px solid var(--border);
  font-family: var(--font-display, inherit); letter-spacing: .02em;
  transition: transform .2s ease;
}
.rank-1 { background: linear-gradient(135deg,#FFE29A,#FFC857); color:#17110a; box-shadow: 0 0 30px rgba(255,200,87,.6); border: none; }
.rank-2 { background: linear-gradient(135deg,#FFC97A,#FF9F1C); color:#17110a; border: none; }
.rank-3 { background: linear-gradient(135deg,#FFAB47,#FF8A00); color:#17110a; border: none; }
.server-card:hover .rank-num { transform: scale(1.08) rotate(-4deg); }
.server-logo {
  width: 54px; height: 54px; border-radius: 14px; object-fit: cover;
  background: var(--bg-2); border: 1px solid rgba(255,138,0,.2); transition: all .3s;
  box-shadow: inset 0 0 0 1px rgba(0,0,0,.25);
}
.server-card:hover .server-logo { transform: scale(1.07) rotate(-3deg); box-shadow: var(--glow); }
.server-name {
  font-weight: 700; font-size: 1.08rem; letter-spacing: .01em;
  transition: color .2s;
}
.server-card[data-href]:hover .server-name { color: var(--gold-light); }
.status-dot { display: inline-flex; align-items: center; gap: .38rem; font-size: .76rem; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; }
.status-dot.online { color: var(--online); } .status-dot.online::before { content:''; width:8px; height:8px; border-radius:50%; background:var(--online); box-shadow:0 0 10px var(--online); animation: pulseDot 2s infinite; }
.status-dot.offline { color: var(--offline); } .status-dot.offline::before { content:''; width:8px; height:8px; border-radius:50%; background:var(--offline); opacity:.8; }
@keyframes pulseDot { 0%,100% { opacity: 1; } 50% { opacity: .45; } }
.ip-chip {
  display: inline-flex; align-items: center; gap: .5rem; padding: .4rem .85rem;
  background: rgba(255,255,255,.03); border: 1px dashed rgba(255,200,87,.32); border-radius: 9px;
  font-family: Consolas, monospace; font-size: .84rem; color: var(--gold-light); cursor: pointer;
  transition: all .2s;
}
.ip-chip:hover { border-style: solid; border-color: var(--gold); background: rgba(255,200,87,.07); box-shadow: var(--glow); }
.server-desc {
  color: var(--muted); font-size: .88rem; min-height: 2.6em;
  display: -webkit-box; -webkit-line-clamp: 2; line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.tag-row { display: flex; flex-wrap: wrap; gap: .4rem; }
/* Tag cliquable : même rendu, hover orange */
a.tag { text-decoration: none; transition: all .18s; }
a.tag:hover { border-color: var(--orange); background: rgba(255,138,0,.16); color: var(--orange); transform: translateY(-1px); }
.tag {
  padding: .26rem .72rem; border-radius: 999px; font-size: .73rem; font-weight: 700;
  background: rgba(255,138,0,.08); color: var(--gold-light);
  border: 1px solid rgba(255,138,0,.2); letter-spacing: .03em; transition: all .18s;
}
.card:hover .tag { border-color: rgba(255,138,0,.35); }
.server-meta { display: flex; gap: .45rem; flex-wrap: wrap; font-size: .78rem; }
.server-meta > span {
  display: inline-flex; align-items: center; gap: .34rem;
  padding: .3rem .68rem; border-radius: 999px;
  background: rgba(255,255,255,.035); border: 1px solid var(--border); color: var(--muted);
  transition: border-color .2s;
}
.server-card:hover .server-meta > span { border-color: rgba(255,138,0,.18); }
.server-meta b { color: var(--gold-light); font-weight: 700; }
/* Chip « offre jusqu'au … » sur les cartes sponsorisées */
.meta-promo {
  border-color: rgba(255,138,0,.45) !important;
  background: linear-gradient(90deg, rgba(255,138,0,.14), rgba(255,200,87,.08)) !important;
  color: var(--gold-light);
}
/* Mini-badge sponsor (podium + tableau classement) */
.promo-mini {
  display: inline-flex; align-items: center; gap: .3rem;
  padding: .18rem .6rem; margin-left: .5rem; border-radius: 999px;
  font-size: .68rem; font-weight: 800; letter-spacing: .04em; text-transform: uppercase;
  background: var(--grad); color: #17110a;
  box-shadow: 0 3px 12px rgba(255,138,0,.4); vertical-align: middle;
}
.podium-item .promo-mini { margin-left: 0; }
.server-actions { display: flex; gap: .6rem; margin-top: auto; }
.badge-promo {
  position: absolute; top: -12px; right: 14px; padding: .3rem .85rem; border-radius: 999px;
  background: var(--grad); color: #17110a; font-size: .68rem; font-weight: 800;
  letter-spacing: .09em; box-shadow: 0 4px 18px rgba(255,138,0,.5);
  font-family: var(--font-display); text-transform: uppercase;
}
.badge-promo-img {
  position: absolute; top: -16px; right: 14px; height: 34px; max-width: 150px;
  object-fit: contain; filter: drop-shadow(0 4px 14px rgba(255,138,0,.45));
}

/* ---------- Fiche serveur (hero + infos) ---------- */
.srv-hero { padding: 0; position: relative; }
.srv-hero-banner {
  height: 270px; background-size: cover; background-position: center 30%; position: relative;
}
.srv-hero-banner::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(11,11,13,.12) 0%, rgba(11,11,13,.5) 58%, var(--bg) 100%);
}
.srv-hero-body { margin-top: -68px; position: relative; z-index: 2; }
.srv-logo-lg {
  width: 112px; height: 112px; border-radius: 26px; object-fit: cover; background: var(--bg-2);
  border: 3px solid var(--orange);
  box-shadow: 0 14px 44px rgba(255,138,0,.32), inset 0 0 0 1px rgba(0,0,0,.3);
  transition: transform .25s ease;
}
.srv-hero-head { display: flex; align-items: flex-end; gap: 1.2rem; flex-wrap: wrap; }
.srv-logo-lg:hover { transform: scale(1.04) rotate(-2deg); }
.srv-hero-title h1 {
  font-size: clamp(1.7rem, 4vw, 2.6rem); margin: 0;
  text-shadow: 0 4px 24px rgba(0,0,0,.5);
}
.srv-verified {
  color: var(--gold); font-size: .55em; vertical-align: middle; letter-spacing: .06em;
  padding: .18em .6em; border-radius: 999px; background: rgba(255,200,87,.1);
  border: 1px solid rgba(255,200,87,.35);
}
.srv-chips { display: flex; gap: .5rem; flex-wrap: wrap; align-items: center; margin-top: .5rem; }
.srv-chip {
  display: inline-flex; align-items: center; gap: .34rem;
  padding: .36rem .82rem; border-radius: 999px; font-size: .8rem;
  background: rgba(255,255,255,.05); border: 1px solid var(--border);
  color: var(--muted); backdrop-filter: blur(4px); transition: border-color .2s;
}
.srv-chip:hover { border-color: rgba(255,138,0,.3); }
.srv-chip b { color: var(--gold-light); }
/* Chip de l'offre active sur la fiche */
.srv-chip-promo {
  background: linear-gradient(90deg, rgba(255,138,0,.16), rgba(255,200,87,.10));
  border-color: rgba(255,138,0,.45); color: var(--gold-light); font-weight: 600;
}
.ip-chip.srv-ip { padding: .72rem 1.4rem; font-size: .92rem; }
/* Bannière : zoom lent à l'arrivée sur la page */
@keyframes srvKb { from { transform: scale(1.07); } to { transform: scale(1); } }
.srv-hero-banner { animation: srvKb 1.8s cubic-bezier(.22,.61,.36,1) both; }

/* Mise en page 2 colonnes de la fiche */
.srv-layout { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 1.3rem; align-items: start; }
.srv-aside { position: sticky; top: 84px; display: flex; flex-direction: column; gap: 1rem; }
@media (max-width: 1000px) {
  .srv-layout { grid-template-columns: 1fr; }
  .srv-aside { position: static; order: -1; }
}
.srv-side h3 { font-size: .95rem; margin: 0 0 .75rem; display:flex; align-items:center; gap:.4rem; }
.srv-side-row {
  display: flex; justify-content: space-between; align-items: center; gap: .8rem;
  padding: .52rem 0; border-bottom: 1px solid var(--border); font-size: .87rem;
}
.srv-side-row:last-child { border-bottom: none; padding-bottom: 0; }
.srv-side-row b { color: var(--text); }
.srv-connect-ip {
  font-family: Consolas, monospace; color: var(--gold-light);
  background: rgba(255,255,255,.04); border: 1px dashed rgba(255,200,87,.35);
  border-radius: 10px; padding: .7rem .8rem; text-align: center;
  word-break: break-all; margin-bottom: .6rem; font-size: .95rem;
}
/* Titres de section avec accent orange */
.srv-main .section-title, .srv-aside .srv-side + * { position: relative; }
.srv-main .section-title { padding-left: .85rem; }
.srv-main .section-title::before {
  content: ''; position: absolute; left: 0; top: .34em; bottom: .34em;
  width: 4px; border-radius: 4px; background: linear-gradient(180deg, var(--gold), var(--orange));
}

/* Graphique d'activité de la fiche */
.srv-chart { display: flex; align-items: flex-end; gap: 3px; height: 130px; }
.srv-chart-col {
  flex: 1 1 0; min-width: 0; max-width: 24px; margin: 0 auto;
  display: flex; flex-direction: column; height: 100%;
}
.srv-bar-area {
  flex: 1; display: flex; align-items: flex-end;
  border-bottom: 1px solid var(--border);
}
.srv-bar-fill {
  width: 100%; min-height: 3px;
  background: linear-gradient(180deg, var(--gold), var(--orange));
  border-radius: 4px 4px 0 0; transition: filter .15s, transform .15s; transform-origin: bottom;
}
.srv-chart-col:hover .srv-bar-fill { filter: brightness(1.25); transform: scaleY(1.03); }
.srv-chart-col.is-max .srv-bar-fill { box-shadow: 0 0 14px rgba(255,170,40,.55); }
.srv-bar-label {
  display: block; height: 14px; font-size: .56rem; line-height: 14px;
  color: var(--muted); text-align: center; white-space: nowrap; overflow: visible;
}

/* ---------- Filtres ---------- */
.filters { display: flex; flex-wrap: wrap; gap: .55rem; margin: 1.6rem 0; }
.filter-chip {
  padding: .48rem 1.05rem; border-radius: 999px; font-size: .85rem; font-weight: 600;
  background: rgba(255,255,255,.03); border: 1px solid var(--border); color: var(--muted);
  cursor: pointer; transition: all .2s; user-select: none;
}
.filter-chip:hover { border-color: rgba(255,138,0,.55); color: var(--gold-light); transform: translateY(-1px); }
.filter-chip.active {
  background: var(--grad-soft); border-color: var(--orange); color: var(--gold-light);
  box-shadow: var(--glow);
}

/* ---------- Classement podium ---------- */
.podium { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 1.25rem; align-items: end; margin-bottom: 2.6rem; }
.podium-item {
  text-align: center; padding: 1.8rem 1.2rem 1.5rem; border-radius: 22px;
  background: linear-gradient(180deg, var(--card-hi), var(--card));
  border: 1px solid var(--border); position: relative; transition: all .28s; display: block;
}
.podium-item:hover { transform: translateY(-6px); }
.podium-item.p1 {
  border-color: rgba(255,200,87,.55); padding-top: 2.7rem;
  box-shadow: 0 0 60px rgba(255,200,87,.18), inset 0 0 40px rgba(255,200,87,.04);
  background: linear-gradient(180deg, rgba(255,200,87,.08), var(--card) 45%);
}
.podium-item.p2 { order: 1; border-color: rgba(255,159,28,.35); }
.podium-item.p3 { order: 3; border-color: rgba(255,138,0,.3); }
.podium-medal { font-size: 2.6rem; filter: drop-shadow(0 4px 14px rgba(255,180,50,.4)); }
.podium-item h3 { margin: .55rem 0 .2rem; font-size: 1.2rem; }
.podium-votes { color: var(--gold-light); font-weight: 700; font-family: var(--font-display); }

/* ---------- Tables ---------- */
.table-wrap { overflow-x: auto; overflow-y: visible; border-radius: 16px; border: 1px solid var(--border); background: var(--card); -webkit-overflow-scrolling: touch; overscroll-behavior: contain; }
table.data { width: 100%; border-collapse: collapse; font-size: .95rem; min-width: 0; }
table.data th {
  text-align: left; padding: .95rem 1.1rem; color: var(--gold-light); font-size: .74rem;
  font-family: var(--font-display); text-transform: uppercase; letter-spacing: .1em;
  border-bottom: 1px solid rgba(255,138,0,.18);
  background: linear-gradient(180deg, rgba(255,138,0,.07), rgba(255,138,0,.02));
  position: sticky; top: 14px; z-index: 5;
}
table.data td { padding: .9rem 1.1rem; border-bottom: 1px solid var(--border); color: var(--muted); vertical-align: middle; }
table.data tr:last-child td { border-bottom: none; }
table.data tbody tr { transition: background .18s; }
table.data tbody tr:hover td { background: rgba(255,138,0,.04); color: var(--text); }

/* ---------- Badges ---------- */
.badge {
  display: inline-flex; align-items: center; gap:.3rem; padding: .27rem .72rem; border-radius: 999px;
  font-size: .73rem; font-weight: 700; letter-spacing: .04em;
}
.badge-success { background: rgba(34,197,94,.13); color: #4ade80; border: 1px solid rgba(34,197,94,.25); }
.badge-warning { background: rgba(255,159,28,.13); color: var(--orange-vif); border: 1px solid rgba(255,159,28,.25); }
.badge-danger  { background: rgba(239,68,68,.13); color: #f87171; border: 1px solid rgba(239,68,68,.25); }
.badge-gold    { background: rgba(255,200,87,.15); color: var(--gold-light); border: 1px solid rgba(255,200,87,.3); }
.badge-orange  { background: rgba(255,138,0,.15); color: var(--orange); border: 1px solid rgba(255,138,0,.3); }
.badge-muted   { background: rgba(255,255,255,.06); color: var(--muted); border: 1px solid var(--border); }

/* ---------- Formulaires ---------- */
.form-group { margin-bottom: 1.1rem; }
.form-group label { display: block; font-size: .84rem; font-weight: 700; margin-bottom: .45rem; color: var(--gold-light); letter-spacing: .02em; }
.form-control {
  width: 100%; padding: .74rem 1rem; border-radius: 12px; background: rgba(255,255,255,.03);
  border: 1px solid var(--border); color: var(--text); font-size: .93rem; outline: none;
  transition: all .22s; font-family: var(--font-body);
}
.form-control:focus { border-color: var(--border-glow); box-shadow: var(--glow); background: rgba(255,138,0,.04); }
textarea.form-control { resize: vertical; min-height: 110px; }
select.form-control option { background: var(--bg-2); }
.form-hint { font-size: .77rem; color: var(--muted); margin-top: .3rem; }
.alert { padding: .95rem 1.2rem; border-radius: 12px; margin-bottom: 1.2rem; font-size: .9rem; animation: fadeIn .3s ease; }
.alert-error { background: rgba(239,68,68,.09); border: 1px solid rgba(239,68,68,.3); color: #fca5a5; }
.alert-success { background: rgba(34,197,94,.09); border: 1px solid rgba(34,197,94,.3); color: #86efac; }
.checkbox-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px,1fr)); gap: .5rem; }
.checkbox-chip {
  display:flex; align-items:center; gap:.55rem; padding:.55rem .85rem;
  background: rgba(255,255,255,.03); border:1px solid var(--border); border-radius:10px;
  font-size:.85rem; cursor:pointer; transition: all .2s;
}
.checkbox-chip:hover { border-color: rgba(255,138,0,.4); }
.checkbox-chip:has(input:checked) {
  border-color: var(--orange); background: var(--grad-soft); color: var(--gold-light); box-shadow: var(--glow);
}

/* ---------- Offres promotion ---------- */
.plan-card { text-align: center; padding: 2.3rem 1.6rem; transition: all .3s; }
.plan-card.recommended {
  border: 2px solid var(--gold); transform: scale(1.03); z-index: 2;
  box-shadow: 0 0 60px rgba(255,200,87,.2), inset 0 0 50px rgba(255,200,87,.04);
  background: linear-gradient(180deg, rgba(255,200,87,.07), var(--card) 40%);
}
.plan-card.recommended:hover { transform: scale(1.03) translateY(-6px); }
.plan-icon { font-size: 2.4rem; margin-bottom: .5rem; filter: drop-shadow(0 4px 16px rgba(255,160,30,.4)); }
.plan-name { font-size: 1.3rem; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; font-family: var(--font-display); }
.plan-price {
  font-size: 2.7rem; font-weight: 700; margin: 1rem 0 .1rem;
  background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent;
  font-family: var(--font-display);
}
.plan-period { color: var(--muted); font-size: .84rem; margin-bottom: 1.5rem; }
.plan-features { list-style: none; text-align: left; margin: 0 auto 1.7rem; max-width: 240px; }
.plan-features li { padding: .45rem 0; color: var(--muted); font-size: .88rem; border-bottom: 1px dashed var(--border); }
.plan-features li::before { content: '✦ '; color: var(--orange); font-weight: 700; }
.recommended-flag {
  position: absolute; top: -14px; left: 50%; transform: translateX(-50%);
  background: var(--grad); color:#17110a; font-size:.71rem; font-weight:800;
  padding:.32rem 1.05rem; border-radius:999px; white-space:nowrap; letter-spacing:.08em;
  font-family: var(--font-display); text-transform: uppercase;
  box-shadow: 0 4px 18px rgba(255,138,0,.5);
}

/* ---------- Checkout ---------- */
.checkout-layout { display: grid; grid-template-columns: 1.4fr 1fr; gap: 1.6rem; align-items: start; }
.order-summary-line { display: flex; justify-content: space-between; padding: .68rem 0; border-bottom: 1px dashed var(--border); color: var(--muted); font-size: .92rem; }
.order-total { display: flex; justify-content: space-between; padding-top: 1.1rem; font-size: 1.3rem; font-weight: 700; font-family: var(--font-display); }
.order-total .amount { background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent; }
.paypal-btn-wrap { margin-top: 1.4rem; min-height: 48px; }
.paypal-note { font-size: .77rem; color: var(--muted); text-align: center; margin-top: .8rem; }

/* ---------- Layout App (dashboard/admin) ---------- */
.app-layout { display: grid; grid-template-columns: 256px 1fr; min-height: 100vh; }
.sidebar {
  background: linear-gradient(180deg, var(--bg-2), #101013);
  border-right: 1px solid var(--border); padding: 1.5rem .95rem;
  position: sticky; top: 0; height: 100vh; overflow-y: auto;
}
.sidebar::-webkit-scrollbar { width: 5px; }
.sidebar .logo { margin-bottom: 1.9rem; padding: 0 .4rem; }
.sidebar-section {
  font-size: .66rem; font-weight: 700; text-transform: uppercase; letter-spacing: .16em;
  color: rgba(255,200,87,.55); margin: 1.3rem .6rem .5rem;
  display: flex; align-items: center; gap: .5rem;
}
.sidebar-section::after { content:''; flex:1; height:1px; background:linear-gradient(90deg, rgba(255,138,0,.25), transparent); }
.sidebar a.item {
  display: flex; align-items: center; gap: .7rem; padding: .63rem .85rem; border-radius: 10px;
  color: var(--muted); font-size: .9rem; font-weight: 600; margin-bottom: 2px;
  transition: all .18s; border-left: 3px solid transparent; position: relative;
}
.sidebar a.item:hover { background: rgba(255,138,0,.07); color: var(--gold-light); transform: translateX(2px); }
.sidebar a.item.active {
  background: linear-gradient(90deg, rgba(255,138,0,.15), rgba(255,200,87,.04));
  color: var(--gold-light); border-left-color: var(--orange);
  box-shadow: inset 0 0 20px rgba(255,138,0,.05);
}
.main-content { padding: 1.9rem 2.3rem; min-width: 0; }
.admin-footer { padding: 1.1rem 2.3rem; color: var(--muted); font-size: .8rem; border-top: 1px solid var(--border); background: var(--bg-2); }
.page-header { display: flex; justify-content: space-between; align-items: center; gap: 1rem; margin-bottom: 1.7rem; flex-wrap: wrap; }
.page-header h1 { font-size: 1.55rem; text-transform: uppercase; letter-spacing: .04em; }
.page-header h1::after {
  content:''; display:block; width:44px; height:3px; margin-top:.35rem;
  background: var(--grad); border-radius: 3px; box-shadow: var(--glow);
}

/* ---------- Notifications ---------- */
.notif {
  display:flex; gap:.9rem; padding: 1.05rem 1.15rem; background: var(--card);
  border:1px solid var(--border); border-left: 3px solid var(--orange);
  border-radius: 12px; margin-bottom: .7rem; transition: all .2s;
}
.notif:hover { transform: translateX(3px); box-shadow: -4px 0 20px rgba(255,138,0,.12); }
.notif.unread { border-left-color: var(--gold); background: linear-gradient(90deg, rgba(255,200,87,.06), var(--card) 40%); }

/* ---------- Footer ---------- */
footer.site-footer {
  border-top: 1px solid var(--border); background: var(--bg-2);
  padding: 3.2rem 0 1.7rem; margin-top: 4rem; position: relative; overflow: hidden;
}
footer.site-footer::before {
  content:''; position:absolute; top:0; left:0; right:0; height:1px;
  background: linear-gradient(90deg, transparent, rgba(255,138,0,.6), transparent);
}
.footer-grid { display:grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: 2rem; margin-bottom: 2.2rem; }
.footer-grid h4 {
  color: var(--gold-light); font-size: .8rem; margin-bottom: .95rem;
  text-transform: uppercase; letter-spacing: .12em; font-family: var(--font-display);
}
.footer-grid a { display:block; color: var(--muted); font-size: .88rem; padding: .24rem 0; transition: all .2s; }
.footer-grid a:hover { color: var(--gold-light); transform: translateX(3px); }
.footer-bottom { text-align:center; color: var(--muted); font-size:.8rem; border-top:1px solid var(--border); padding-top:1.5rem; }

/* ---------- Divers ---------- */
.muted { color: var(--muted); }
.small { font-size: .84rem; }
.mt-1{margin-top:.5rem}.mt-2{margin-top:1rem}.mt-3{margin-top:1.6rem}.mt-4{margin-top:2.4rem}
.mb-2{margin-bottom:1rem}.mb-3{margin-bottom:1.6rem}
.flex-between { display:flex; justify-content:space-between; align-items:center; gap:1rem; flex-wrap:wrap; }
.countdown { font-family: Consolas, monospace; color: var(--orange-vif); font-weight: 700; }
code { background: rgba(255,138,0,.1); padding: .12rem .45rem; border-radius: 6px; font-size: .88em; }
details.card summary { list-style: none; }
details.card summary::-webkit-details-marker { display: none; }
details.card summary::before { content: '▸ '; color: var(--orange); }
details[open].card summary::before { content: '▾ '; }
.toast {
  position: fixed; bottom: 24px; right: 24px; z-index: 999; padding: .95rem 1.35rem;
  background: var(--card); border: 1px solid var(--gold); border-radius: 12px;
  box-shadow: 0 8px 30px rgba(0,0,0,.5), var(--glow-strong); font-size: .9rem;
  animation: toastIn .32s cubic-bezier(.34,1.56,.64,1);
}
@keyframes toastIn { from { transform: translateY(18px) scale(.95); opacity: 0; } to { transform: none; opacity: 1; } }
.fade-in { animation: fadeIn .45s ease both; }
@keyframes fadeIn { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }

/* Écrans moyens : navbar compacte (évite l'écrasement des liens) */
@media (max-width: 1450px) and (min-width: 861px) {
  /* La recherche quitte la barre : elle reste disponible sur /serveurs */
  .nav-search { display: none; }
}
@media (max-width: 1330px) and (min-width: 861px) {
  .navbar-inner { gap: .7rem; }
  .nav-links { gap: 0; }
  .nav-links a { font-size: .82rem; padding: .45rem .5rem; }
  .nav-actions { gap: .45rem; }
  .logo { font-size: 1rem; }
  .user-menu > a { padding: .45rem .7rem; font-size: .8rem; }
}
@media (max-width: 1120px) and (min-width: 861px) {
  .nav-links a { font-size: .78rem; padding: .42rem .38rem; }
  .btn-primary.btn-sm { padding: .42rem .75rem; font-size: .78rem; }
}

/* =====================================================
   RESPONSIVE
   ===================================================== */
@media (max-width: 1024px) {
  .checkout-layout { grid-template-columns: 1fr; }
  .app-layout { grid-template-columns: 1fr; }
  .sidebar { position: fixed; left: -270px; z-index: 200; transition: left .3s ease; width: 250px; }
  .sidebar.open { left: 0; box-shadow: 0 0 60px rgba(0,0,0,.6); }
  .main-content { padding: 1.4rem; }
  .sidebar-toggle { display: inline-flex !important; }
}
@media (max-width: 860px) {
  .nav-links {
    display: none; position: absolute; top: 74px; left: 0; right: 0;
    background: rgba(20,20,22,.97); backdrop-filter: blur(18px);
    flex-direction: column; padding: 1.1rem; align-items: stretch;
    border-bottom: 1px solid var(--border-glow);
    box-shadow: 0 24px 48px rgba(0,0,0,.6);
    gap: .3rem;
  }
  .nav-links.open { display: flex; animation: menuSlide .32s cubic-bezier(.34,1.2,.64,1) both; }
  @keyframes menuSlide { from { opacity: 0; transform: translateY(-12px); } to { opacity: 1; transform: none; } }
  .nav-links a { padding: .85rem 1rem; border-radius: 11px; font-size: .98rem; }
  .nav-links a::after { display: none; }
  .nav-links a.active { background: var(--grad-soft); border-left: 3px solid var(--orange); }
  .hamburger { display: block; }
  .nav-search { order: 10; flex-basis: 100%; display: none; padding-bottom: .4rem; }
  .navbar-inner.expanded .nav-search { display: block; animation: fadeIn .25s ease both; }
  .nav-search input:focus { width: 100%; }
  .nav-actions .btn-outline { display: none; }
  .footer-grid { grid-template-columns: 1fr 1fr; }
  .hero { padding: 70px 16px 90px; }
  .hero-stats { gap: 1.5rem; }
  table.data { min-width: 0; }
  .grid-servers { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

/* =====================================================
   EFFETS PREMIUM v3 — shimmer, reveal, spotlight, blink
   ===================================================== */

/* Dégradé animé sur les titres .grad-text */
.grad-text {
  background-size: 200% auto;
  animation: gradShift 5s linear infinite;
}
@keyframes gradShift { to { background-position: 200% center; } }

/* Brillance qui traverse le titre du hero */
.hero h1 {
  background-size: 220% auto;
  animation: heroShine 7s ease-in-out infinite;
}
@keyframes heroShine {
  0%, 100% { background-position: 0% center; }
  50%      { background-position: 100% center; }
}

/* Halo pulsant discret sur le bouton principal */
@media (hover: hover) {
  .btn-primary:not(:disabled) { animation: primaryPulse 3.4s ease-in-out infinite; }
}
@keyframes primaryPulse {
  0%, 100% { box-shadow: 0 4px 20px rgba(255,138,0,.32), inset 0 1px 0 rgba(255,255,255,.35); }
  50%      { box-shadow: 0 6px 30px rgba(255,150,20,.55), inset 0 1px 0 rgba(255,255,255,.35); }
}

/* Reflet balayant sur les badges de rang or/argent/bronze */
.rank-num { position: relative; overflow: hidden; }
.rank-1::after, .rank-2::after, .rank-3::after {
  content: ''; position: absolute; top: 0; left: -90%; width: 55%; height: 100%;
  background: linear-gradient(105deg, transparent, rgba(255,255,255,.75), transparent);
  transform: skewX(-20deg);
  animation: rankShine 3.6s ease-in-out infinite;
}
.rank-2::after { animation-delay: .5s; }
.rank-3::after { animation-delay: 1s; }
@keyframes rankShine { 0%, 55% { left: -90%; } 85%, 100% { left: 140%; } }

/* Médaille du podium qui flotte */
.podium-medal { animation: medalFloat 3.2s ease-in-out infinite; display: inline-block; }
@keyframes medalFloat {
  0%, 100% { transform: translateY(0) rotate(-3deg); }
  50%      { transform: translateY(-8px) rotate(3deg); }
}

/* Étoile « RECOMMANDÉ » qui rebondit doucement */
.recommended-flag { animation: flagBounce 2.4s cubic-bezier(.34,1.56,.64,1) infinite; }
@keyframes flagBounce {
  0%, 100% { transform: translateX(-50%) translateY(0); }
  50%      { transform: translateX(-50%) translateY(-5px); }
}

/* Barre d'accent dorée sur les lignes de tableau au survol */
table.data tbody tr:hover td:first-child { box-shadow: inset 3px 0 0 var(--orange); }

/* Révélation au scroll (classe posée par main.js + IntersectionObserver) */
.reveal { opacity: 0; transform: translateY(22px); transition: opacity .6s ease, transform .6s cubic-bezier(.34,1.2,.64,1); transition-delay: var(--d, 0s); }
.reveal.revealed { opacity: 1; transform: none; }

/* Pop du bouton de vote après un vote réussi */
.vote-pop { animation: votePop .45s cubic-bezier(.34,1.56,.64,1); }
@keyframes votePop {
  0% { transform: scale(1); } 40% { transform: scale(1.18); box-shadow: 0 0 34px rgba(34,197,94,.65); }
  100% { transform: scale(1); }
}

/* Flash vert quand l'IP est copiée */
.ip-chip.copied {
  border-color: var(--online) !important; border-style: solid !important;
  color: var(--online) !important; box-shadow: 0 0 16px rgba(34,197,94,.45) !important;
}

/* 😊 Smiley orange clignotant (réutilisable partout) */
.smiley-blink {
  display: inline-block; font-size: 2.2rem; line-height: 1;
  filter: sepia(1) saturate(6) hue-rotate(-15deg) brightness(1.08)
          drop-shadow(0 0 10px rgba(255,138,0,.85)) drop-shadow(0 0 26px rgba(255,160,30,.45));
  animation: smileyBlink 1.5s ease-in-out infinite;
  user-select: none; pointer-events: none;
}
.smiley-blink.sm-sm { font-size: 1.15rem; }
.smiley-blink.sm-lg  { font-size: 3.2rem; }
@keyframes smileyBlink {
  0%, 100% { opacity: 1;   transform: scale(1)    rotate(0deg); }
  25%      { opacity: .28; transform: scale(.94) rotate(-6deg); }
  50%      { opacity: 1;   transform: scale(1.04) rotate(4deg); }
  62%      { opacity: .32; transform: scale(.96); }
  74%      { opacity: 1;   transform: scale(1); }
}

/* Smileys flottants décoratifs (fond du hero) */
.hero-smiley {
  position: absolute; z-index: 1; pointer-events: none; opacity: .5;
  animation: smileyDrift 9s ease-in-out infinite alternate;
}
@keyframes smileyDrift {
  from { transform: translateY(0) rotate(-10deg); }
  to   { transform: translateY(-30px) rotate(12deg); }
}

/* Smileys du hero : combinaison clignotement doux + dérive flottante */
.hero-smiley.smiley-blink {
  font-size: 1.7rem;
  animation: smileyBlinkSoft 3.4s ease-in-out infinite, smileyDrift 9s ease-in-out infinite alternate;
}
@keyframes smileyBlinkSoft {
  0%, 100% { opacity: .55; transform: scale(1) rotate(0deg); }
  50%      { opacity: .12; transform: scale(.9) rotate(-8deg); }
}

/* ---------- Finitions globales (accessibilité & cohérence) ---------- */
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important; animation-iteration-count: 1 !important;
    transition-duration: .01ms !important; scroll-behavior: auto !important;
  }
}
:focus-visible { outline: 2px solid var(--orange); outline-offset: 2px; border-radius: 6px; }
.btn:focus-visible, .ip-chip:focus-visible { outline-offset: 3px; }
img { -webkit-user-drag: none; user-select: none; }
/* Accent sous les titres de section (hors hero) */
.section-title::after {
  content: ''; display: block; width: 54px; height: 3px; margin-top: .5rem;
  border-radius: 3px; background: linear-gradient(90deg, var(--gold), var(--orange));
  opacity: .9;
}
.hero h1.section-title::after, h1.section-title::after { width: 74px; }
/* Liens de contenu plus lisibles */
p a:not(.btn):not(.tag), li a:not(.btn):not(.tag) {
  color: var(--gold-light); text-decoration-color: rgba(255,200,87,.4); text-underline-offset: 3px;
}
p a:not(.btn):not(.tag):hover { text-decoration-color: var(--orange); }
/* Pied de page : liens légèrement plus vivants */
footer.site-footer a { transition: color .2s; }
footer.site-footer a:hover { color: var(--gold-light); }

/* =====================================================
   ADMIN PREMIUM — Harmonisation Orange & Or v2.1
   Composants communs : filter-bar, stat-card, table, bulk, form
   Scope : .main-content (toutes pages admin)
   ===================================================== */
.main-content .filters{
  display:flex;flex-wrap:wrap;gap:.5rem;
  background:linear-gradient(180deg,rgba(255,255,255,.035),rgba(255,138,0,.04));
  border:1px solid rgba(255,200,87,.10);
  border-radius:14px;
  padding:.6rem .65rem;
  backdrop-filter:blur(8px);
  box-shadow:0 4px 24px rgba(0,0,0,.14);
}
.main-content .filter-chip{
  font-weight:700;letter-spacing:.01em;
  background:rgba(255,255,255,.04);
  border-color:rgba(255,255,255,.07);
  transition:all .18s cubic-bezier(.4,0,.2,1);
}
.main-content .filter-chip:hover{
  border-color:rgba(255,138,0,.28);
  color:var(--gold-light);
  background:rgba(255,138,0,.07);
  transform:translateY(-1px);
}
.main-content .filter-chip.active{
  background:linear-gradient(135deg,rgba(255,138,0,.18),rgba(255,200,87,.11));
  border-color:rgba(255,138,0,.32);
  color:var(--gold-light);
  box-shadow:0 4px 18px rgba(255,138,0,.18),inset 0 0 0 1px rgba(255,200,87,.07);
}
.main-content .table-wrap{
  border-radius:16px;
  border:1px solid rgba(255,200,87,.09);
  background:linear-gradient(180deg,rgba(255,255,255,.02),var(--card));
  box-shadow:0 8px 32px rgba(0,0,0,.22);
  overflow:hidden;
}
.main-content table.data{border-collapse:separate;border-spacing:0}
.main-content table.data th{
  background:linear-gradient(180deg,rgba(255,138,0,.11),rgba(18,18,20,.98));
  color:var(--gold-light);
  font-weight:800;letter-spacing:.08em;font-size:.71rem;
  border-bottom:1px solid rgba(255,138,0,.14);
  position:sticky;top:0;z-index:2;
}
.main-content table.data td{
  border-bottom:1px solid rgba(255,255,255,.05);
  vertical-align:middle;
}
.main-content table.data tbody tr{transition:transform .16s,box-shadow .16s,background .16s}
.main-content table.data tbody tr:hover{transform:translateY(-1px);box-shadow:0 6px 20px rgba(0,0,0,.24)}
.main-content table.data tbody tr:hover td{background:rgba(255,138,0,.035);color:var(--text)}
.main-content table.data tbody tr:hover td:first-child{box-shadow:inset 3px 0 0 var(--orange)}
.main-content .card{
  border-radius:18px;
  border:1px solid rgba(255,200,87,.08);
  background:linear-gradient(180deg,rgba(255,255,255,.025),var(--card));
  box-shadow:0 8px 32px rgba(0,0,0,.20);
}
.main-content .card h3{
  font-size:1.02rem;letter-spacing:.02em;
  display:flex;align-items:center;gap:.5rem;
}
.main-content .grid-stats{gap:1rem}
.main-content .stat-card{
  position:relative;overflow:hidden;
  background:linear-gradient(180deg,rgba(255,255,255,.04),var(--card));
  border:1px solid rgba(255,200,87,.10);
  border-radius:16px;
  padding:1.15rem 1.1rem;
  transition:all .22s cubic-bezier(.4,0,.2,1);
}
.main-content .stat-card::after{
  content:'';position:absolute;inset:0;border-radius:inherit;pointer-events:none;opacity:0;
  background:radial-gradient(240px circle at 30% 0%,rgba(255,138,0,.14),transparent 65%);
  transition:opacity .25s;
}
.main-content .stat-card:hover{
  transform:translateY(-4px);
  border-color:rgba(255,138,0,.22);
  box-shadow:0 14px 36px rgba(0,0,0,.32),0 0 22px rgba(255,138,0,.10);
}
.main-content .stat-card:hover::after{opacity:1}
.main-content .stat-card .icon{
  width:42px;height:42px;border-radius:12px;
  display:grid;place-items:center;
  background:linear-gradient(135deg,rgba(255,138,0,.16),rgba(255,200,87,.09));
  border:1px solid rgba(255,138,0,.18);
  font-size:1.15rem;margin-bottom:.8rem;
  box-shadow:0 4px 14px rgba(255,138,0,.12);
  transition:transform .22s;
}
.main-content .stat-card:hover .icon{transform:scale(1.08) rotate(-5deg);box-shadow:0 6px 20px rgba(255,138,0,.22)}
.main-content .stat-card b{
  font-size:1.65rem;line-height:1.1;display:block;
}
.main-content .stat-card.gold b{
  background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent;
}
.main-content .stat-card span{color:var(--muted);font-size:.78rem;text-transform:uppercase;letter-spacing:.07em;font-weight:600}
#bulkBar{
  background:linear-gradient(180deg,rgba(255,255,255,.04),rgba(255,138,0,.05)) !important;
  border:1px solid rgba(255,200,87,.13) !important;
  border-radius:14px !important;
  backdrop-filter:blur(8px);
  box-shadow:0 6px 24px rgba(0,0,0,.18);
}
.main-content .form-control{
  border-radius:11px;
  background:rgba(255,255,255,.04);
  border:1px solid rgba(255,255,255,.08);
  transition:all .2s;
}
.main-content .form-control:focus{
  border-color:rgba(255,138,0,.38);
  box-shadow:0 0 0 3px rgba(255,138,0,.12),0 0 18px rgba(255,138,0,.10);
  background:rgba(255,138,0,.04);
}
.main-content .alert{
  border-radius:13px;
  backdrop-filter:blur(6px);
  border-width:1px;
}
.main-content .badge{
  font-weight:800;letter-spacing:.03em;
  box-shadow:0 2px 10px rgba(0,0,0,.12);
}
.main-content table.data .btn{box-shadow:0 2px 10px rgba(0,0,0,.10)}
.main-content table.data .btn:hover{transform:translateY(-1px)}
@media(max-width:860px){
  .main-content .filters{padding:.5rem}
  .main-content table.data th{position:static}
  .main-content .grid-stats{grid-template-columns:repeat(auto-fit,minmax(150px,1fr))}
}