/*
 * peeryx-v128-cloudflare.css — Cloudflare-confident redesign
 * Navbar + Hero : typo massive, zéro effet gadget, CTA institutionnel
 *
 * Principe : confiance par la retenue, pas par la décoration.
 * - Aucune animation gadget (shimmer, sweep, bounce)
 * - CTA blanc / texte sombre — lisible, direct, autoritaire
 * - H1 massive + line-height ultra-serré
 * - Nettopo élargi, plus de présence
 */

/* ═══════════════════════════════════════════════════════════════════
   §1  NAVBAR — refonte Cloudflare
   ═══════════════════════════════════════════════════════════════════ */

/* Retire la barre teal du haut — trop "gaming", pas assez "infra" */
html .pxnav::after { display: none !important; }

/* Background plus opaque, plus propre */
html .pxnav::before {
  background: rgba(5, 10, 22, 0.97) !important;
  backdrop-filter: blur(24px) saturate(160%) !important;
  -webkit-backdrop-filter: blur(24px) saturate(160%) !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.07) !important;
  box-shadow: 0 1px 0 rgba(0, 0, 0, 0.4) !important;
}

/* Scrolled : border légèrement plus visible */
html .pxnav.scrolled::before {
  background: rgba(4, 8, 18, 0.99) !important;
  border-bottom-color: rgba(255, 255, 255, 0.10) !important;
  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.50) !important;
}

/* Bar : 72px desktop */
@media (min-width: 1024px) {
  :root { --pxnav-h: 72px; }
  html .pxnav__bar { height: 72px !important; }
}

/* Logo — plus grand */
@media (min-width: 1024px) {
  html .pxnav__logo {
    width: 162px !important;
    max-height: 52px !important;
  }
}

/* Nav links — Cloudflare : gris moyen, blanc au hover, pas de bg coloré */
html .pxnav__link {
  font-size: 14.5px !important;
  font-weight: 500 !important;
  color: #7a96ae !important;
  padding: 8px 14px !important;
  letter-spacing: 0.008em !important;
  border-radius: 4px !important;
  transition: color 0.12s ease !important;
  background: transparent !important;
}
html .pxnav__link:hover {
  color: #e8f4ff !important;
  background: rgba(255, 255, 255, 0.04) !important;
}
html .pxnav__link--active,
html .pxnav__link[aria-current="page"] {
  color: #ffffff !important;
  font-weight: 600 !important;
}
/* Active : underline fin, pas de barre colorée */
html .pxnav__link--active::after,
html .pxnav__link[aria-current="page"]::after {
  background: rgba(255, 255, 255, 0.5) !important;
  width: 14px !important;
  height: 1.5px !important;
  opacity: 1 !important;
}

/* CTA — blanc sur fond sombre (Cloudflare signature) */
html .pxnav__cta {
  background: #ffffff !important;
  color: #050a16 !important;
  -webkit-text-fill-color: #050a16 !important;
  font-size: 13.5px !important;
  font-weight: 700 !important;
  padding: 9px 20px !important;
  border-radius: 6px !important;
  letter-spacing: 0.01em !important;
  box-shadow: none !important;
  transition: background 0.15s ease, transform 0.12s ease !important;
  gap: 0 !important;
}
html .pxnav__cta:hover {
  background: #e8f0ff !important;
  color: #050a16 !important;
  -webkit-text-fill-color: #050a16 !important;
  box-shadow: none !important;
  transform: none !important;
}
/* Supprime le shimmer sweep */
html .pxnav__cta::before { display: none !important; }
/* Supprime l'icône arrow */
html .pxnav__cta-icon { display: none !important; }
/* ID-specificity override: beats all class-based link-color rules */
#site-header a.pxnav__cta {
  color: #050a16 !important;
  -webkit-text-fill-color: #050a16 !important;
}
#site-header a.pxnav__cta:hover {
  color: #050a16 !important;
  -webkit-text-fill-color: #050a16 !important;
}

/* signin — épuré */
html .pxnav__signin {
  color: #6a8ea8 !important;
  font-size: 13.5px !important;
  font-weight: 500 !important;
  padding: 8px 14px !important;
  border: none !important;
  background: none !important;
  letter-spacing: 0 !important;
}
html .pxnav__signin:hover {
  color: #c8e0f4 !important;
  background: rgba(255, 255, 255, 0.04) !important;
  border: none !important;
}

/* ═══════════════════════════════════════════════════════════════════
   §2  HERO — typographie massive, Cloudflare-confident
   ═══════════════════════════════════════════════════════════════════ */

/* Fond hero : gradient plus marqué, présence visuelle */
html body .pxv93-hero {
  background: #03060f !important;
}
html body .pxv93-hero::before {
  background:
    radial-gradient(ellipse 70% 90% at 62% 40%, rgba(0, 180, 140, 0.07) 0%, transparent 65%),
    radial-gradient(ellipse 40% 60% at 20% 70%, rgba(20, 60, 120, 0.08) 0%, transparent 70%) !important;
}

/* Grid hero : plus de padding vertical */
html body .pxv93-hero-grid {
  padding-top: 96px !important;
  padding-bottom: 88px !important;
  gap: 56px !important;
  align-items: start !important;
}
@media (max-width: 1023px) {
  html body .pxv93-hero-grid {
    padding-top: 72px !important;
    padding-bottom: 64px !important;
    grid-template-columns: 1fr !important;
  }
}

/* H1 — le grand changement : taille, poids, interligne */
html body .pxv93-hero-copy h1 {
  font-size: clamp(40px, 5.8vw, 74px) !important;
  font-weight: 800 !important;
  line-height: 1.04 !important;
  letter-spacing: -0.04em !important;
  color: #ffffff !important;
  margin-bottom: 22px !important;
}

/* Lead — plus lisible, plus d'autorité */
html body .pxv93-lead {
  font-size: 17.5px !important;
  line-height: 1.62 !important;
  color: rgba(190, 215, 245, 0.80) !important;
  -webkit-text-fill-color: rgba(190, 215, 245, 0.80) !important;
  max-width: 480px !important;
  margin-bottom: 16px !important;
}

/* Text sous lead — plus discret */
html body .pxv93-text {
  font-size: 14px !important;
  color: rgba(160, 190, 220, 0.48) !important;
  -webkit-text-fill-color: rgba(160, 190, 220, 0.48) !important;
}

/* CTA primaire — BLANC / SOMBRE (Cloudflare-style) */
html body .pxv93-btn.pxv93-primary,
html body .pxv93-hero-copy .pxv93-actions a.pxv93-primary,
html body .pxv93-home .pxv93-primary {
  background: #ffffff !important;
  color: #020810 !important;
  -webkit-text-fill-color: #020810 !important;
  font-size: 14.5px !important;
  font-weight: 700 !important;
  padding: 13px 28px !important;
  border-radius: 7px !important;
  letter-spacing: 0.005em !important;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25) !important;
  transition: background 0.14s ease, box-shadow 0.14s ease !important;
}
html body .pxv93-btn.pxv93-primary:hover,
html body .pxv93-hero-copy .pxv93-actions a.pxv93-primary:hover,
html body .pxv93-home .pxv93-primary:hover {
  background: #e8f0ff !important;
  color: #020810 !important;
  -webkit-text-fill-color: #020810 !important;
  transform: none !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.20) !important;
}

/* High-specificity override: beat v95-bundle a:not(...) link-color rule (specificity 0,6,1).
   These selectors reach 0,6,3 (more tag tokens tie-break over 0,6,1). */
html body .pxv93-home .pxv93-hero-copy .pxv93-actions a.pxv93-btn.pxv93-primary:not([href=""]),
html body .pxv93-home .pxv93-cta .pxv93-cta-card a.pxv93-btn.pxv93-primary:not([href=""]),
html body .pxv93-home .pxv93-cta .pxv93-cta-card a.pxv93-primary:not([href=""]):not(.ghost) {
  color: #020810 !important;
  -webkit-text-fill-color: #020810 !important;
}

/* CTA section button: v128 loads after v120 so same specificity (0,4,2) wins here */
html body .pxv93-home .pxv93-cta-card .pxv93-btn.pxv93-primary,
html body .pxv93-home .pxv93-cta-card a.pxv93-primary {
  background: #ffffff !important;
  color: #020810 !important;
  -webkit-text-fill-color: #020810 !important;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25) !important;
}
html body .pxv93-home .pxv93-cta-card .pxv93-btn.pxv93-primary:hover,
html body .pxv93-home .pxv93-cta-card a.pxv93-primary:hover {
  background: #e8f0ff !important;
  color: #020810 !important;
  -webkit-text-fill-color: #020810 !important;
  transform: none !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.20) !important;
}

/* CTA ghost — plus confiant */
html body .pxv93-btn.pxv93-ghost,
html body .pxv93-hero-copy .pxv93-actions a.pxv93-ghost {
  font-size: 14.5px !important;
  font-weight: 600 !important;
  color: rgba(200, 225, 255, 0.65) !important;
  -webkit-text-fill-color: rgba(200, 225, 255, 0.65) !important;
  border: 1px solid rgba(255, 255, 255, 0.14) !important;
  padding: 13px 24px !important;
  border-radius: 7px !important;
  transition: color 0.14s ease, border-color 0.14s ease !important;
}
html body .pxv93-btn.pxv93-ghost:hover,
html body .pxv93-hero-copy .pxv93-actions a.pxv93-ghost:hover {
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
  border-color: rgba(255, 255, 255, 0.30) !important;
}
/* Ghost also needs high-specificity to beat the link-color rule */
html body .pxv93-home .pxv93-hero-copy .pxv93-actions a.pxv93-btn.pxv93-ghost:not([href=""]) {
  color: rgba(200, 225, 255, 0.65) !important;
  -webkit-text-fill-color: rgba(200, 225, 255, 0.65) !important;
}

/* Eyebrow — plus sobre, moins gaming */
html body .pxv93-eyebrow {
  font-size: 10px !important;
  letter-spacing: 0.18em !important;
  background: rgba(255, 255, 255, 0.05) !important;
  border: 1px solid rgba(255, 255, 255, 0.12) !important;
  color: #8ab4cc !important;
  -webkit-text-fill-color: #8ab4cc !important;
  padding: 4px 12px !important;
}

/* Hero metrics strip — plus sobre */
html body .pxv93-metrics {
  gap: 6px !important;
  padding-top: 20px !important;
  border-top-color: rgba(255, 255, 255, 0.05) !important;
}
html body .pxv93-metrics > li {
  background: rgba(255, 255, 255, 0.025) !important;
  border-color: rgba(255, 255, 255, 0.055) !important;
  padding: 10px 12px !important;
}

/* ═══════════════════════════════════════════════════════════════════
   §3  NETTOPO — plus grand, plus présent
   ═══════════════════════════════════════════════════════════════════ */

html body .px-nettopo {
  background: rgba(8, 14, 30, 0.92) !important;
  border: 1px solid rgba(255, 255, 255, 0.09) !important;
  border-radius: 14px !important;
  padding: 24px !important;
  min-height: 300px !important;
  box-shadow:
    0 0 0 1px rgba(0, 200, 160, 0.07),
    0 24px 64px rgba(0, 0, 0, 0.5),
    inset 0 1px 0 rgba(255, 255, 255, 0.05) !important;
}

html body .px-nt-head {
  margin-bottom: 20px !important;
  padding-bottom: 14px !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06) !important;
}

/* ASN — monospace, plus discret */
html body .px-nt-asn {
  font-family: 'JetBrains Mono', 'Courier New', monospace !important;
  font-size: 11px !important;
  color: #5a7a8e !important;
  background: rgba(255, 255, 255, 0.04) !important;
  padding: 2px 8px !important;
  border-radius: 4px !important;
  border: 1px solid rgba(255, 255, 255, 0.07) !important;
}

/* Node labels — plus lisibles */
html body .px-nt-node span {
  font-size: 11.5px !important;
  font-weight: 600 !important;
  letter-spacing: 0.02em !important;
}

/* Metrics strip */
html body .px-nt-metrics {
  border-top: 1px solid rgba(255, 255, 255, 0.06) !important;
  padding-top: 14px !important;
  margin-top: 18px !important;
}
html body .px-nt-metric {
  padding: 8px 14px !important;
}
html body .px-nt-metric strong {
  font-size: 12px !important;
  font-family: 'JetBrains Mono', monospace !important;
  letter-spacing: 0.02em !important;
}

/* ═══════════════════════════════════════════════════════════════════
   §4  DRAWER MOBILE — cohérence Cloudflare
   ═══════════════════════════════════════════════════════════════════ */

/* Drawer CTA blanc */
html .pxnav__drawer-cta {
  background: #ffffff !important;
  color: #050a16 !important;
  font-weight: 700 !important;
  border: none !important;
}
html .pxnav__drawer-cta:hover {
  background: #e8f0ff !important;
  color: #050a16 !important;
}

/* ═══════════════════════════════════════════════════════════════════
   §5  REVEAL — force visible (évite les sections vides au screenshot)
   ═══════════════════════════════════════════════════════════════════ */

/* Garantit que le contenu reste visible même si IntersectionObserver
   n'a pas encore déclenché — l'animation reste mais le fallback est sûr */
.reveal.visible,
.pxv93-home .reveal.visible,
[data-pxv99-reveal].pxv99-in {
  opacity: 1 !important;
  transform: none !important;
}