/* =====================================================================
   PEERYX — Enterprise Light Design System (v212)
   Palette navy/blanc + accent bleu institutionnel + motion raffiné.
   Chargé EN DERNIER après le bundle light. Zéro néon, jamais.
   ===================================================================== */

/* =====================================================================
   PEERYX — Enterprise Light Design System (v211)
   Pivot "clair entreprise" 2026-07-16 (type Cloudflare/OVHcloud).
   Exécution sobre : un seul accent bleu institutionnel, hairlines,
   ombres neutres discrètes, AUCUN néon/glow/dégradé décoratif.
   Chargé EN DERNIER, après le bundle recoloré peeryx-v210-light.min.css.
   ===================================================================== */

:root {
  /* --- Palette canonique ------------------------------------------- */
  --corp-page:        #f7f9fc;   /* fond de page / sections             */
  --corp-page-2:      #eef2f8;   /* sections alternées                  */
  --corp-page-3:      #e7edf6;
  --corp-page-mesh:   none;      /* pas de mesh décoratif               */

  --corp-surface:     #ffffff;   /* cartes / panneaux                   */
  --corp-surface-2:   #f8fafd;
  --corp-surface-3:   #eff4fa;

  --corp-ink:         #0e1b2c;   /* titres, texte fort (navy encre)     */
  --corp-ink-2:       #1b2b42;
  --corp-text:        #364a63;   /* corps de texte                      */
  --corp-muted:       #5a6b81;   /* secondaire                          */
  --corp-muted-2:     #7e8da1;

  --corp-line:        rgba(13,35,64,.12);
  --corp-line-strong: rgba(13,35,64,.22);

  --corp-accent:        #1d4ed8; /* bleu institutionnel unique          */
  --corp-accent-strong: #1e40af; /* hover / appuyé                      */
  --corp-accent-2:      #2563eb;
  --corp-accent-ink:    #1e40af; /* accent en texte sur clair           */
  --corp-accent-soft:   #eef3fd; /* fond teinté accent                  */
  --corp-on-accent:     #ffffff;

  /* Console sombre (panneaux "produit" volontairement foncés) */
  --corp-console:       #0e1c31;
  --corp-console-2:     #13233c;
  --corp-console-line:  rgba(150,180,220,.16);
  --corp-console-text:  #c6d4e6;
  --corp-console-muted: #8fa3bd;

  --corp-warn:        #b45309;
  --corp-ok:          #15803d;

  /* Ombres neutres uniquement — jamais colorées */
  --corp-shadow-sm:     0 1px 2px rgba(14,27,44,.05);
  --corp-shadow:        0 4px 14px rgba(14,27,44,.07), 0 1px 3px rgba(14,27,44,.05);
  --corp-shadow-lg:     0 18px 44px rgba(14,27,44,.10), 0 4px 12px rgba(14,27,44,.06);
  --corp-shadow-accent: var(--corp-shadow);   /* alias neutralisé */

  --corp-glass:       #ffffff;
  --corp-grad-surface:#ffffff;

  --corp-radius:      12px;
  --corp-radius-sm:   8px;
}

/* =====================================================================
   Enterprise Light — couche composants (sobriété stricte)
   Règles d'or : 1 accent, hairlines, ombres neutres, zéro animation
   décorative, typo resserrée. La confiance vient de la retenue.
   ===================================================================== */

/* ---- Base ---------------------------------------------------------- */
/* Le legacy laisse html en quasi-noir → visible en overscroll/rubber-band */
html:not(#_):not(#_) { background: var(--corp-page) !important; }
html body {
  background: var(--corp-page) !important;
  color: var(--corp-text);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
/* site-shell : certaines pages (gaming) le peignent en quasi-noir */
html body .site-shell:not(#_):not(#_):not(#_) { position: relative; z-index: 1; background: transparent !important; }

html body :where(h1,h2,h3,h4,h5,h6) { color: var(--corp-ink); letter-spacing: -.02em; }

/* Titres : aplat encre net — bat les dégradés/clip-text du legacy */
html body :is(h1,h2,h3,h4,h5,h6):not(#_):not(#_):not(#_) {
  -webkit-text-fill-color: var(--corp-ink) !important;
  color: var(--corp-ink) !important;
  background: none !important;
  background-image: none !important;
  background-clip: border-box !important;
  -webkit-background-clip: border-box !important;
  text-shadow: none !important;
  opacity: 1 !important;
}
html body a { color: var(--corp-accent-ink); }
html body ::selection { background: rgba(29,78,216,.16); color: var(--corp-ink); }

/* Animations : politique "motion raffiné".
   - HTML : aucune animation décorative (kill global conservé)
   - SVG des consoles produit : animations AUTORISÉES (paquets qui
     circulent dans le schéma réseau = produit vivant, pas du néon)
   - Reveals au scroll : transitions, non concernées par ce kill        */
html body main *:not(svg):not(svg *):not(#_):not(#_),
html body .site-header *:not(#_):not(#_) { animation: none !important; }
@media (prefers-reduced-motion: reduce) {
  html body main svg *:not(#_):not(#_) { animation: none !important; }
}

/* Décors "cyber" du legacy : auroras/grilles/particules → supprimés.
   Le bundle les peint sur main, .site-shell, .pxv93-home, .pxv93-hero,
   .pxv93-hero-visual et body::after — on neutralise tout, avec le hack
   de spécificité pour battre leurs !important. */
html body .pxv93-grid-bg:not(#_):not(#_):not(#_) { display: none !important; background: none !important; }
/* Constellation de particules dessinée en JS (canvas) : coupée */
html body canvas.pxv99-net:not(#_):not(#_) { display: none !important; }
html body:not(#_):not(#_)::before,
html body:not(#_):not(#_)::after { content: none !important; }
html body :is(main, .site-shell, .pxv93-home, .pxv93-hero, .pxv93-hero-visual):not(#_):not(#_):not(#_) {
  background-image: none !important;
}
html body :is(main, .pxv93-home, .pxv93-hero, .pxv93-hero-visual):not(#_):not(#_):not(#_)::before,
html body :is(main, .pxv93-home, .pxv93-hero, .pxv93-hero-visual):not(#_):not(#_):not(#_)::after {
  content: none !important;
}
/* Hairlines lumineuses bleues des containers (néon discret = néon quand même) */
html body :is(.pxv93-container, .pxv93-hero-grid):not(#_):not(#_):not(#_)::before,
html body :is(.pxv93-container, .pxv93-hero-grid):not(#_):not(#_):not(#_)::after {
  content: none !important;
}
/* Glows résiduels de la console (halo radial + liseré balayé) */
html body .hero-netmap:not(#_):not(#_):not(#_)::before,
html body .hero-netmap:not(#_):not(#_):not(#_)::after { content: none !important; }
/* Souligné du H1 : aplat accent, pas de dégradé */
html body .pxv93-hero h1:not(#_):not(#_)::after {
  background: var(--corp-accent) !important; background-image: none !important;
}

/* ---- Header / nav : blanc net, hairline --------------------------- */
html body .site-header,
html body .peeryx-header-v97 {
  background: rgba(255,255,255,.88) !important;
  -webkit-backdrop-filter: saturate(140%) blur(12px);
  backdrop-filter: saturate(140%) blur(12px);
  border-bottom: 1px solid var(--corp-line);
  box-shadow: none;
}
/* Liens de nav : fond transparent (le legacy posait un blanc 60% →
   dalle grise continue sur les pages à héro teinté) */
html body .site-header .nav-link:not(#_):not(#_) {
  color: var(--corp-ink-2) !important;
  background: transparent !important;
  font-weight: 550; border-radius: 8px;
  transition: color .15s ease, background .15s ease;
}
html body .site-header .nav-link:hover:not(#_):not(#_) {
  color: var(--corp-accent-ink) !important;
  background: var(--corp-accent-soft) !important;
}
html body .site-header .nav-link.active:not(#_):not(#_),
html body .site-header .nav-link[aria-current="page"]:not(#_):not(#_) {
  color: var(--corp-accent-ink) !important;
  background: var(--corp-accent-soft) !important;
}
/* Boutons compte (Espace client) : nets */
html body .site-header .account-link:not(#_):not(#_) {
  color: var(--corp-ink-2) !important;
  -webkit-text-fill-color: var(--corp-ink-2) !important;
  background: #ffffff !important;
  border: 1px solid var(--corp-line-strong) !important;
  border-radius: 8px;
}
html body .site-header .account-link:hover:not(#_):not(#_) {
  border-color: var(--corp-accent) !important;
  color: var(--corp-accent-ink) !important;
  -webkit-text-fill-color: var(--corp-accent-ink) !important;
}
/* CTA principal du header : bleu plein — l'œil sait où aller */
html body .site-header .account-link-register:not(#_):not(#_):not(#_) {
  background: var(--corp-accent) !important;
  border-color: var(--corp-accent) !important;
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
  font-weight: 650;
}
html body .site-header .account-link-register:hover:not(#_):not(#_):not(#_) {
  background: var(--corp-accent-strong) !important;
  border-color: var(--corp-accent-strong) !important;
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
}
html body .brand-name { color: var(--corp-ink) !important; }
html body .brand-sub { color: var(--corp-muted) !important; }

/* ---- Boutons : nets, sans glow ------------------------------------ */
html body :where(.pxv93-btn, .btn, .px-btn, a.cta, .cta-btn) {
  border-radius: var(--corp-radius-sm); font-weight: 620; letter-spacing: .1px;
  transition: background .15s ease, border-color .15s ease, color .15s ease, box-shadow .15s ease;
  box-shadow: none;
}
html body :where(.pxv93-primary, .btn-primary, .px-btn-primary, .cta-primary):not(#_):not(#_) {
  background: var(--corp-accent) !important;
  color: var(--corp-on-accent) !important;
  border: 1px solid var(--corp-accent) !important;
  box-shadow: var(--corp-shadow-sm) !important;
  font-weight: 650;
  text-shadow: none;
}
html body :where(.pxv93-primary, .btn-primary, .cta-primary):hover {
  background: var(--corp-accent-strong) !important;
  border-color: var(--corp-accent-strong) !important;
  transform: translateY(-1px);
  box-shadow: 0 8px 22px rgba(14,27,44,.14) !important;
}
/* La flèche des CTA glisse au survol */
html body :where(.pxv93-primary, .btn-primary, .cta-primary) span {
  display: inline-block;
  transition: transform .22s cubic-bezier(.2,.6,.3,1);
}
html body :where(.pxv93-primary, .btn-primary, .cta-primary):hover span {
  transform: translateX(4px);
}
html body :where(.pxv93-ghost, .btn-ghost, .px-btn-ghost, .cta-secondary):not(#_):not(#_) {
  background: var(--corp-surface) !important;
  color: var(--corp-ink-2) !important;
  border: 1px solid var(--corp-line-strong) !important;
}
html body :where(.pxv93-ghost, .btn-ghost, .cta-secondary):hover {
  border-color: var(--corp-accent) !important;
  color: var(--corp-accent-ink) !important;
  background: var(--corp-surface) !important;
  transform: none;
}

/* ---- Eyebrows : badges cohérents partout --------------------------- */
html body :is(.pxv93-eyebrow, .px-eyebrow, [class*="eyebrow"], [class*="kicker"]):not(#_):not(#_):not(#_) {
  display: inline-block;
  color: var(--corp-accent-ink) !important;
  -webkit-text-fill-color: var(--corp-accent-ink) !important;
  letter-spacing: .1em; text-transform: uppercase; font-weight: 700;
  font-size: .78rem;
  background: var(--corp-accent-soft) !important;
  border: 0 !important; box-shadow: none !important;
  border-radius: 6px;
  padding: .35em .7em !important;
}

/* ---- Cartes : blanc, hairline, survol discret ---------------------- */
html body :where(
  .pxv93-uc-card, .pxv93-solution, .pxv93-faq-item, .pxv93-arch-step,
  [class*="-card"], [class*="-panel"]
) { border-color: var(--corp-line) !important; }
html body :where(
  .pxv93-uc-card, .pxv93-solution, .pxv93-arch-step,
  [class*="-card"]:not([class*="hero"]):not([class*="featured"])
) {
  box-shadow: var(--corp-shadow-sm);
  transition: transform .28s cubic-bezier(.2,.6,.3,1), box-shadow .28s cubic-bezier(.2,.6,.3,1), border-color .2s ease;
}
html body :where(.pxv93-uc-card, .pxv93-solution, [class*="-card"]:not([class*="hero"])):hover {
  transform: translateY(-3px);
  box-shadow: 0 12px 32px rgba(14,27,44,.10), 0 2px 6px rgba(14,27,44,.06);
  border-color: var(--corp-line-strong) !important;
}
@media (prefers-reduced-motion: reduce) {
  html body :where(.pxv93-uc-card, .pxv93-solution, [class*="-card"]):hover { transform: none; }
}

/* ---- Corps de texte neutre dans les cartes --------------------------
   Le moteur assombrit le texte bleu clair → bleu lisible, mais le corps
   de texte doit rester gris ardoise ; le bleu est réservé aux accents.  */
html body :is(.pxv93-solution, .pxv93-uc-card, .pxv93-arch-step) :is(p, li):not(#_):not(#_) {
  color: var(--corp-text) !important;
}
html body .pxv93-section-head p:not(#_):not(#_) { color: var(--corp-muted) !important; }

/* ---- Rythme de sections -------------------------------------------- */
html body :where(.pxv93-why, .pxv93-usecases, .pxv93-solutions) { background: var(--corp-page-2); }
html body main > section:not(.pxv93-hero):not(#_) { min-height: 0 !important; }
html body main > section:not(.pxv93-hero) { padding-top: 4.5rem !important; padding-bottom: 4.5rem !important; }

/* ---- Liens du corps ------------------------------------------------ */
html body main a:not([class]) { color: var(--corp-accent-ink); text-underline-offset: 3px; }
html body main a:not([class]):hover { color: var(--corp-accent); }

/* ---- Footer : navy institutionnel ---------------------------------- */
html body .site-footer:not(#_):not(#_) {
  background: #0e1c31 !important;
  color: #9fb2c9 !important;
  border-top: 0;
}
html body .site-footer :is(h1,h2,h3,h4,h5,h6,.brand-name):not(#_):not(#_):not(#_) { color:#fff !important; -webkit-text-fill-color:#fff !important; }
/* Liens/texte : le moteur avait mis les liens en bleu encre → illisibles
   sur navy. text-fill-color inclus (prioritaire sur color). */
html body .site-footer :is(a, li, p, span, small, dd, dt):not(#_):not(#_):not(#_) {
  color: #9db1c9 !important;
  -webkit-text-fill-color: #9db1c9 !important;
}
html body .site-footer a:hover:not(#_):not(#_):not(#_) {
  color: #ffffff !important; -webkit-text-fill-color: #ffffff !important;
}
/* Bloc contact ("Échangeons") : panneau navy élevé, hairline */
html body .site-footer :is(.footer-contact-block, [class*="footer-contact"]):not(#_):not(#_) {
  background: #13233c !important;
  border: 1px solid rgba(150,180,220,.16) !important;
  box-shadow: none !important;
}
/* CTA footer : aplat bleu, PAS de cyan glow */
html body .site-footer :is(.footer-link-cta, [class*="footer-cta"], .site-footer a.cta):not(#_):not(#_):not(#_) {
  background: var(--corp-accent) !important;
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
  border: 1px solid var(--corp-accent) !important;
  border-radius: 8px !important;
  box-shadow: none !important;
  text-shadow: none !important;
  font-weight: 650;
}
html body .site-footer .footer-link-cta:hover:not(#_):not(#_):not(#_) {
  background: var(--corp-accent-strong) !important;
  border-color: var(--corp-accent-strong) !important;
}

/* ---- Finitions ------------------------------------------------------ */
html { scroll-behavior: smooth; }
html body ::-webkit-scrollbar { width: 12px; height: 12px; }
html body ::-webkit-scrollbar-track { background: #eef2f8; }
html body ::-webkit-scrollbar-thumb {
  background: #c3cfdf; border: 3px solid #eef2f8; border-radius: 999px;
}
html body ::-webkit-scrollbar-thumb:hover { background: #9fb0c6; }
html body * { scrollbar-color: #c3cfdf #eef2f8; }
html body :where(a,button,input,select,textarea,[tabindex]):focus-visible {
  outline: 2px solid var(--corp-accent) !important;
  outline-offset: 2px; border-radius: 6px;
}

/* ---- Héro : clair avec une lumière très discrète -------------------
   Un seul wash radial bleu à 4% — de la profondeur, pas une aurora.   */
html body .pxv93-hero:not(#_):not(#_):not(#_) {
  position: relative; overflow: hidden;
  background:
    radial-gradient(1100px 520px at 82% -8%, rgba(29,78,216,.055), transparent 62%),
    radial-gradient(700px 420px at -6% 30%, rgba(29,78,216,.03), transparent 55%),
    var(--corp-surface) !important;
  border-bottom: 1px solid var(--corp-line);
}

/* ---- Sous-pages : mêmes moments WAOUW que la home -------------------
   .cta-band = bande CTA des pages produit → navy (comme .pxv93-cta-card)
   .hero-subpage = héros de sous-pages → wash radial discret
   .reveal = reveals des pages px83 → même courbe que .pxv99-reveal      */
html body .cta-band:not(#_):not(#_):not(#_) {
  background: transparent !important;
}
html body .cta-band .cta-band-inner:not(#_):not(#_):not(#_) {
  background:
    radial-gradient(900px 420px at 88% -20%, rgba(59,110,238,.18), transparent 60%),
    #0e1c31 !important;
  border: 1px solid rgba(150,180,220,.14) !important;
  border-radius: 18px;
  box-shadow: 0 24px 60px rgba(14,27,44,.18) !important;
  padding: 44px 48px;
}
html body .cta-band .cta-band-inner :is(h1,h2,h3):not(#_):not(#_):not(#_):not(#_) {
  color: #ffffff !important; -webkit-text-fill-color: #ffffff !important;
}
html body .cta-band .cta-band-inner p:not(#_):not(#_):not(#_) {
  color: #b6c6dd !important; -webkit-text-fill-color: #b6c6dd !important;
}
html body .cta-band .cta-band-inner .button-primary:not(#_):not(#_):not(#_) {
  background: var(--corp-accent-2) !important;
  border-color: var(--corp-accent-2) !important;
  color: #ffffff !important; -webkit-text-fill-color: #ffffff !important;
}
html body .cta-band .cta-band-inner .button-ghost:not(#_):not(#_):not(#_) {
  background: transparent !important;
  border: 1px solid rgba(150,180,220,.35) !important;
  color: #dbe6f5 !important; -webkit-text-fill-color: #dbe6f5 !important;
}
html body .cta-band .cta-band-inner .button-ghost:hover:not(#_):not(#_):not(#_) {
  border-color: #ffffff !important;
  color: #ffffff !important; -webkit-text-fill-color: #ffffff !important;
}

/* Grandes valeurs chiffrées (bandes preuves/stats) : le legacy les
   rendait en dégradé-texte (clip:text + fill transparent) ; le dégradé
   ayant disparu au passage en clair, le texte était INVISIBLE
   ("15 Tbps+", "5 modes", "500 Mpps+"…). Aplat encre, définitif.       */
html body :is(.transit-proof-item-v81, .px-antiddos-stat, [class*="proof-item"], [class*="-stat"]) > strong:not(#_):not(#_):not(#_) {
  background: none !important;
  -webkit-background-clip: border-box !important;
  background-clip: border-box !important;
  color: var(--corp-ink) !important;
  -webkit-text-fill-color: var(--corp-ink) !important;
}

/* Boutons px83 : primaire = aplat bleu partout (était délavé) */
html body .button.button-primary:not(#_):not(#_):not(#_) {
  background: var(--corp-accent) !important;
  border: 1px solid var(--corp-accent) !important;
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
  box-shadow: var(--corp-shadow-sm) !important;
  text-shadow: none !important;
}
html body .button.button-primary:hover:not(#_):not(#_):not(#_) {
  background: var(--corp-accent-strong) !important;
  border-color: var(--corp-accent-strong) !important;
  transform: translateY(-1px);
}

/* Mini-label px83 ("EDGE DESIGN") : chip compact, pas une barre */
html body .px83-mini-label:not(#_):not(#_):not(#_) {
  display: inline-flex !important;
  width: fit-content !important;
  align-items: center;
  background: var(--corp-accent-soft) !important;
  color: var(--corp-accent-ink) !important;
  -webkit-text-fill-color: var(--corp-accent-ink) !important;
  border-radius: 6px;
  padding: .35em .7em !important;
  font-size: .78rem; font-weight: 700;
  letter-spacing: .1em; text-transform: uppercase;
}
/* Carte footprint (Présence réseau) : le CSS legacy repeint mer et
   continent en navy → retour au rendu clair du SVG source. */
html body .footprint-map > rect:not(#_):not(#_) { fill: #f2f7fd !important; }
html body .footprint-map path:not([class]):not(#_):not(#_) { fill: #d6e2f0 !important; }
html body .footprint-map .map-route.live:not(#_):not(#_) { stroke: #1d4ed8 !important; }
html body .footprint-map .map-route.soon:not(#_):not(#_) { stroke: #c98a2b !important; }
html body .footprint-map .map-labels rect:not(#_):not(#_) { fill: #1d4ed8 !important; }
html body .footprint-map .map-labels text:not(#_):not(#_) {
  fill: #ffffff !important;
}

html body .hero-subpage:not(#_):not(#_):not(#_) {
  background:
    radial-gradient(1100px 520px at 82% -8%, rgba(29,78,216,.055), transparent 62%),
    radial-gradient(700px 420px at -6% 30%, rgba(29,78,216,.03), transparent 55%),
    var(--corp-surface) !important;
  border-bottom: 1px solid var(--corp-line);
}

/* PAS de styling reveal sur .reveal (pages px83) : le JS legacy ne pose
   pas .visible de façon fiable sur toutes ces pages → contenu invisible
   au chargement (héro transit vide constaté). Seul .pxv99-reveal, dont
   l'observer est prouvé, porte le motion. La lisibilité prime.         */
html body .reveal:not(#_):not(#_):not(#_) { opacity: 1 !important; transform: none !important; }

/* ---- Menu mobile : carte flottante restaurée ------------------------
   Une règle fantôme écrasait le panneau à 122px (inset:0 + height fixe)
   → liens clippés invisibles. On force la géométrie voulue.            */
html body .mobile-nav:not(#_):not(#_):not(#_) {
  position: fixed !important;
  top: 82px !important; left: 14px !important; right: 14px !important; bottom: auto !important;
  inset: 82px 14px auto 14px !important;
  height: auto !important;
  max-height: calc(100dvh - 104px) !important;
  overflow: auto !important;
  padding: 18px 14px !important;
}
html body .mobile-nav .button:not(#_):not(#_):not(#_) {
  color: #ffffff !important; -webkit-text-fill-color: #ffffff !important;
  background: var(--corp-accent) !important;
}
html body .mobile-nav.open:not(#_):not(#_):not(#_) {
  opacity: 1 !important;
  background: #ffffff !important;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  border: 1px solid var(--corp-line) !important;
  box-shadow: 0 28px 80px rgba(14,27,44,.18) !important;
}

/* ---- Header : s'affirme au scroll ---------------------------------- */
html body .site-header.scrolled:not(#_):not(#_),
html body .peeryx-header-v97.scrolled:not(#_):not(#_) {
  box-shadow: 0 6px 24px rgba(14,27,44,.08) !important;
  background: rgba(255,255,255,.95) !important;
}

/* ---- Reveals au scroll : fade-up doux et court ---------------------
   Le JS legacy (IntersectionObserver) ajoute .visible ; on ne fait
   qu'affiner la courbe. Distance courte = perçu premium, pas gadget.  */
@media (prefers-reduced-motion: no-preference) {
  html body .pxv99-reveal:not(#_):not(#_) {
    opacity: 0;
    transform: translateY(14px);
    transition: opacity .55s cubic-bezier(.2,.6,.25,1), transform .55s cubic-bezier(.2,.6,.25,1);
  }
  html body .pxv99-reveal.visible:not(#_):not(#_),
  html body .pxv99-reveal.pxv99-in:not(#_):not(#_) {
    opacity: 1;
    transform: none;
  }
}
@media (prefers-reduced-motion: reduce) {
  html body .pxv99-reveal:not(#_):not(#_) { opacity: 1 !important; transform: none !important; }
}

/* ---- Consoles produit : sombres VOLONTAIREMENT ----------------------
   Pattern entreprise (Stripe/Datadog) : la "capture produit" sombre sur
   page claire. Indispensable ici : les textes des SVG inline sont blancs
   en dur — sur carte claire ils seraient invisibles.                   */
html body .hero-netmap:not(#_):not(#_):not(#_) {
  background: var(--corp-console) !important;
  border: 1px solid var(--corp-console-line) !important;
  border-radius: var(--corp-radius) !important;
  box-shadow: var(--corp-shadow-lg) !important;
}
html body .hero-netmap :is(.netmap-header):not(#_):not(#_) {
  background: var(--corp-console-2) !important;
  border-bottom: 1px solid var(--corp-console-line) !important;
}
html body .hero-netmap :is(.netmap-live):not(#_):not(#_) { color: #34d399 !important; }
html body .hero-netmap :is(.netmap-asn):not(#_):not(#_) { color: var(--corp-console-muted) !important; }
html body .hero-netmap :is(.netmap-metric-label):not(#_):not(#_) { color: var(--corp-console-muted) !important; }
html body .hero-netmap :is(.netmap-metric-value):not(#_):not(#_) { color: var(--corp-console-text) !important; }
html body .hero-netmap :is(.netmap-footer, .netmap-foot, [class*="netmap-bottom"]):not(#_):not(#_) {
  color: var(--corp-console-muted) !important;
  border-top: 1px solid var(--corp-console-line) !important;
  background: transparent !important;
}
html body .hero-netmap :is(.netmap-metric-bar-track):not(#_):not(#_) { background: rgba(150,180,220,.14) !important; }
/* Valeurs colorées (bloqué/livré) : préservées par le moteur (vives) */

/* Panneau NOC : épouse son contenu (pas d'étirement par la grille) */
html body .hero-panel > .hero-netmap { align-self: start; }

/* ---- Bande CTA finale : moment de contraste navy --------------------
   Le seul panneau sombre "marketing" de la page (avec les consoles) :
   pattern Stripe — la demande d'action se détache de tout le reste.   */
html body .pxv93-cta-card:not(#_):not(#_):not(#_) {
  background:
    radial-gradient(900px 420px at 88% -20%, rgba(59,110,238,.18), transparent 60%),
    #0e1c31 !important;
  border: 1px solid rgba(150,180,220,.14) !important;
  box-shadow: 0 24px 60px rgba(14,27,44,.18) !important;
}
html body .pxv93-cta-card :is(h1,h2,h3):not(#_):not(#_):not(#_):not(#_) {
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
}
html body .pxv93-cta-card p:not(#_):not(#_):not(#_) {
  color: #b6c6dd !important;
  -webkit-text-fill-color: #b6c6dd !important;
}
html body .pxv93-cta-card > i:not(#_):not(#_) {
  background: rgba(59,110,238,.14) !important;
  border: 1px solid rgba(150,180,220,.18) !important;
  color: #9db9f5 !important;
}
html body .pxv93-cta-card .pxv93-plain:not(#_):not(#_):not(#_) {
  color: #c6d4e6 !important;
  -webkit-text-fill-color: #c6d4e6 !important;
}
html body .pxv93-cta-card .pxv93-plain:hover:not(#_):not(#_):not(#_) {
  color: #ffffff !important; -webkit-text-fill-color: #ffffff !important;
}
html body .pxv93-cta-card :is(.pxv93-primary):not(#_):not(#_):not(#_) {
  background: var(--corp-accent-2) !important;
  border-color: var(--corp-accent-2) !important;
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
}
html body .pxv93-cta-card .pxv93-primary :is(span):not(#_):not(#_) {
  color: #ffffff !important; -webkit-text-fill-color: #ffffff !important;
}

/* ---- HÉRO "5 premières secondes" ------------------------------------
   Titre bénéfice, console produit imposante, chips flottantes, preuves
   en rangée nette. Le tout sans néon.                                   */
@media (min-width: 981px) {
  html body .pxv93-hero-grid:not(#_):not(#_) {
    grid-template-columns: minmax(0, 46fr) minmax(0, 54fr) !important;
    align-items: center !important;
    gap: 48px !important;
  }
}
html body .pxv93-hero-copy h1:not(#_):not(#_) {
  font-size: clamp(2.1rem, 4.6vw, 4.05rem) !important;
  line-height: 1.06 !important;
  letter-spacing: -.03em !important;
  overflow-wrap: normal !important;
  word-break: normal !important;
  hyphens: manual !important;
}
html body .pxv93-hero-copy .pxv93-lead:not(#_):not(#_) {
  font-size: 1.16rem; line-height: 1.6;
  color: var(--corp-text) !important;
}
/* Le paragraphe descriptif passe après les preuves : on l'allège */
html body .pxv93-hero-copy .pxv93-text:not(#_):not(#_) {
  font-size: .95rem; color: var(--corp-muted) !important;
}
/* Lien découverte sous les CTA */
html body .pxv93-hero-more {
  display: inline-block; margin-top: 14px;
  font-weight: 650; font-size: .95rem;
  color: var(--corp-accent-ink) !important;
  -webkit-text-fill-color: var(--corp-accent-ink) !important;
  text-decoration: none;
  border-bottom: 1px solid rgba(29,78,216,.28);
  padding-bottom: 2px;
  transition: border-color .15s ease, color .15s ease;
}
html body .pxv93-hero-more:hover {
  color: var(--corp-accent) !important;
  -webkit-text-fill-color: var(--corp-accent) !important;
  border-bottom-color: var(--corp-accent);
}

/* Console produit : imposante, ancrée, avec profondeur */
html body .pxv93-hero-visual:not(#_):not(#_):not(#_) {
  position: relative;
  display: flex; justify-content: center;
  padding: 10px 8px;
  margin: 0 !important;
  transform: none !important;
  background: none !important;
  border: 0 !important;
  box-shadow: none !important;
  /* le legacy fige height:380px (ancien schéma) et centre → la console
     de 588px débordait de 104px au-dessus et en dessous */
  height: auto !important;
  min-height: 0 !important;
  max-height: none !important;
}
@media (max-width: 980px) {
  html body .pxv93-hero-visual:not(#_):not(#_):not(#_) { margin-top: 26px !important; }
}
/* Le legacy fige grid-template-rows (406px = hauteur de l'ANCIEN schéma)
   → la nouvelle console (588px) débordait de sa rangée. Rangées libres. */
html body .pxv93-hero-grid:not(#_):not(#_):not(#_) {
  grid-template-rows: none !important;
  grid-auto-rows: auto !important;
}
html body .pxv93-hero-visual:not(#_):not(#_):not(#_)::before,
html body .pxv93-hero-visual:not(#_):not(#_):not(#_)::after { content: none !important; }

/* ---- PXH : la carte produit du héro (HTML net, zéro SVG flou) -------
   Elle raconte : Internet → attaque absorbée → Peeryx → trafic propre
   → vos services en ligne. Texte croustillant, hiérarchie claire.     */
html body .pxh-console {
  width: min(560px, 100%);
  background:
    radial-gradient(560px 300px at 85% -10%, rgba(59,110,238,.16), transparent 60%),
    var(--corp-console);
  border: 1px solid var(--corp-console-line);
  border-radius: 16px;
  box-shadow: var(--corp-shadow-lg);
  overflow: hidden;
}
html body .pxh-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px 20px;
  background: var(--corp-console-2);
  border-bottom: 1px solid var(--corp-console-line);
}
html body .pxh-live {
  display: inline-flex; align-items: center; gap: 8px;
  color: #34d399 !important; -webkit-text-fill-color: #34d399 !important;
  font-family: "IBM Plex Mono", ui-monospace, monospace;
  font-size: .78rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
}
html body .pxh-live i {
  width: 8px; height: 8px; border-radius: 50%;
  background: #34d399; flex: 0 0 auto;
}
html body .pxh-asn {
  color: var(--corp-console-muted) !important; -webkit-text-fill-color: var(--corp-console-muted) !important;
  font-family: "IBM Plex Mono", ui-monospace, monospace;
  font-size: .78rem; letter-spacing: .04em;
}
html body .pxh-flow { padding: 18px 20px 10px; display: grid; gap: 10px; }
html body .pxh-node {
  border: 1px solid var(--corp-console-line);
  border-radius: 12px;
  padding: 12px 16px;
  background: rgba(255,255,255,.025);
}
html body .pxh-node-k {
  display: block;
  color: var(--corp-console-muted) !important; -webkit-text-fill-color: var(--corp-console-muted) !important;
  font-family: "IBM Plex Mono", ui-monospace, monospace;
  font-size: .68rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase;
  margin-bottom: 2px;
}
html body .pxh-node strong {
  color: #e8eef7 !important; -webkit-text-fill-color: #e8eef7 !important;
  font-size: 1.02rem; letter-spacing: -.01em;
}
html body .pxh-node em {
  display: block; font-style: normal;
  color: var(--corp-console-muted) !important; -webkit-text-fill-color: var(--corp-console-muted) !important;
  font-size: .8rem; margin-top: 2px;
}
html body .pxh-node-core {
  border-color: rgba(94,140,255,.45);
  background: rgba(59,110,238,.12);
}
html body .pxh-node-core .pxh-node-k { color: #9db9f5 !important; -webkit-text-fill-color: #9db9f5 !important; }
/* Connecteurs : bandes fines teintées, avec un rail qui coule */
html body .pxh-link {
  display: flex; align-items: center; gap: 12px;
  padding: 8px 16px 8px 12px;
  margin: 0 18px;
  border-radius: 10px;
  position: relative;
}
html body .pxh-link-attack { background: rgba(248,113,113,.09); }
html body .pxh-link-clean  { background: rgba(52,211,153,.09); }
html body .pxh-link i {
  display: grid; place-items: center;
  width: 28px; height: 28px; border-radius: 8px; flex: 0 0 auto;
  font-style: normal; font-weight: 800;
}
html body .pxh-link i svg { width: 15px; height: 15px; }
html body .pxh-link-attack i { background: rgba(248,113,113,.16); color: #f87171; }
html body .pxh-link-clean i  { background: rgba(52,211,153,.16); color: #34d399; }
html body .pxh-link strong {
  display: block; font-size: .9rem; letter-spacing: -.01em;
}
html body .pxh-link-attack strong { color: #fca5a5 !important; -webkit-text-fill-color: #fca5a5 !important; }
html body .pxh-link-clean strong  { color: #6ee7b7 !important; -webkit-text-fill-color: #6ee7b7 !important; }
html body .pxh-link span {
  display: block; font-size: .76rem;
  color: var(--corp-console-muted) !important; -webkit-text-fill-color: var(--corp-console-muted) !important;
}
/* Stats en pied de console : gros chiffres mono */
html body .pxh-stats {
  display: grid; grid-template-columns: repeat(3, 1fr);
  border-top: 1px solid var(--corp-console-line);
  margin-top: 10px;
}
html body .pxh-stats > div {
  padding: 14px 10px; text-align: center;
}
html body .pxh-stats > div + div { border-left: 1px solid var(--corp-console-line); }
html body .pxh-stats strong {
  display: block;
  color: #e8eef7 !important; -webkit-text-fill-color: #e8eef7 !important;
  font-family: "IBM Plex Mono", ui-monospace, monospace;
  font-size: clamp(.92rem, 2.6vw, 1.18rem); font-weight: 700; letter-spacing: -.01em;
  white-space: nowrap;
}
html body .pxh-stats span {
  display: block; margin-top: 2px;
  color: var(--corp-console-muted) !important; -webkit-text-fill-color: var(--corp-console-muted) !important;
  font-size: .72rem; letter-spacing: .03em;
}
/* Vie mesurée : pulse du statut + rails qui coulent (exemptés du kill) */
@media (prefers-reduced-motion: no-preference) {
  html body main .pxh-live i:not(#_):not(#_):not(#_) {
    box-shadow: 0 0 0 0 rgba(52,211,153,.5);
    animation: pxh-pulse 2.2s ease-in-out infinite !important;
  }
  @keyframes pxh-pulse {
    0%,100% { box-shadow: 0 0 0 0 rgba(52,211,153,.45); }
    50%     { box-shadow: 0 0 0 6px rgba(52,211,153,0); }
  }
  html body main .pxh-link:not(#_):not(#_):not(#_)::after {
    content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1.5px;
    border-radius: 2px;
    background: linear-gradient(90deg, transparent 0%, currentColor 45%, transparent 90%);
    background-size: 220% 100%;
    opacity: .5;
    animation: pxh-flow 3.2s linear infinite !important;
  }
  html body main .pxh-link-attack::after { color: #f87171; }
  html body main .pxh-link-clean::after  { color: #34d399; animation-delay: 1.1s !important; }
  @keyframes pxh-flow {
    0%   { background-position: 120% 0; }
    100% { background-position: -120% 0; }
  }
}

/* ---- Chips stats du héro (preuves) : rangée nette de 4 -------------- */
html body .pxv93-metrics:not(#_):not(#_) {
  display: grid !important;
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  gap: 10px !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  padding: 0 !important;
  margin-top: 26px;
}
@media (max-width: 760px) {
  html body .pxv93-metrics:not(#_):not(#_) { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
}
html body .pxv93-metrics > div {
  border: 1px solid var(--corp-line);
  border-radius: 10px;
  background: var(--corp-surface);
  transition: border-color .15s ease;
  margin: 0 !important;
  width: auto !important;
}
html body .pxv93-metrics > div:hover { transform: none; border-color: var(--corp-line-strong); background: var(--corp-surface); }
html body .pxv93-metrics > div > strong { color: var(--corp-ink); letter-spacing: -.01em; }
html body .pxv93-metrics > div > span { color: var(--corp-muted); }

/* ---- Cartes "Pourquoi Peeryx" : alignées à gauche ------------------- */
html body .pxv93-why article {
  align-items: flex-start !important;
  text-align: left !important;
}
html body .pxv93-why article > i { margin-left: 0; align-self: flex-start; }
html body .pxv93-why article > strong,
html body .pxv93-why article > p { text-align: left !important; width: 100%; }
html body .pxv93-why article > strong { font-size: 1.1rem; }
html body .pxv93-why article > p { color: var(--corp-muted); }

/* ---- Cartes blog "Guides techniques" -------------------------------- */
html body .pxv93-blog .pxv93-articles > a {
  display: flex; flex-direction: column; align-items: flex-start;
  text-align: left; gap: .7rem;
  padding: 1.4rem 1.4rem 1.2rem;
  min-height: 180px;
  border-radius: var(--corp-radius);
  text-decoration: none;
  position: relative; overflow: hidden;
  background: var(--corp-surface);
}
html body .pxv93-blog .pxv93-articles > a > span { align-self: flex-start; margin: 0; }
html body .pxv93-blog .pxv93-articles > a > h3 {
  margin: .1rem 0 0; font-size: 1.14rem; line-height: 1.3; text-align: left;
}
html body .pxv93-blog .pxv93-articles > a > p {
  margin: 0; color: var(--corp-muted); text-align: left; font-size: .94rem;
  line-height: 1.5; flex: 1 1 auto;
}
html body .pxv93-blog .pxv93-articles > a > small {
  margin-top: .35rem; padding-top: .7rem;
  width: 100%; border-top: 1px solid var(--corp-line);
  color: var(--corp-muted-2); text-align: left; font-size: .82rem;
  display: flex; align-items: center; gap: .4rem;
}
html body .pxv93-blog .pxv93-articles > a > small::after {
  content: "→"; margin-left: auto; color: var(--corp-accent-ink);
  opacity: 0; transition: opacity .15s ease;
}
html body .pxv93-blog .pxv93-articles > a:hover > small::after { opacity: 1; }

/* ---- FAQ : puce +/× centrée (réparation portée du thème sombre) ----- */
html body .pxv93-faq-plus::before,
html body .pxv93-faq-plus::after,
html body .pxv93-home .pxv93-faq-plus::before,
html body .pxv93-home .pxv93-faq-plus::after {
  inset: 0 !important; margin: auto !important;
  background: var(--corp-accent-ink) !important;
}
html body .pxv93-faq-plus:not(#_):not(#_) {
  background: var(--corp-accent-soft) !important;
  border: 1px solid var(--corp-line) !important;
}
html body .pxv93-faq-plus::after,
html body .pxv93-home .pxv93-faq-plus::after { transform: scaleY(1); opacity: 1; }
html body .pxv93-home details.pxv93-faq-item[open] .pxv93-faq-plus::after {
  transform: none !important; opacity: 1 !important;
}

/* ---- Console gaming (px85) : correctifs de mise en page -------------- */
html body .px85-game-console:not(#_):not(#_) { min-height: 0 !important; align-self: start; }
html body .px85-flow-node :is(strong, span) { overflow-wrap: break-word; }
html body .px85-flow-node strong:not(#_):not(#_) { font-size: 1rem !important; line-height: 1.2 !important; }

/* ---- Carte PoP : pas de letterbox ----------------------------------- */
html body .pxv93-map:not(#_):not(#_) { min-height: 0 !important; }

/* ---- Blog index : grilles imbriquées en conflit ---------------------
   .blog-cards-wrap (grid 3×366px) n'a qu'UN enfant, .resource-card-grid,
   qui refait un 3-colonnes DANS une seule piste → cartes de 107px,
   titres tronqués. On neutralise la grille externe.                    */
html body .blog-cards-wrap:not(#_):not(#_) { display: block !important; }
/* Cartes article : rangée de contenu auto (les titres étaient tranchés
   par grid-template-rows:220px 220px + overflow:hidden) et line-clamp
   réparé (inopérant sans display:-webkit-box). */
html body .blog-home-card:not(#_):not(#_) {
  height: auto !important;
  grid-template-rows: 220px auto !important;
}
html body .blog-home-card :is(h3, h2):not(#_):not(#_) {
  display: -webkit-box !important;
  -webkit-box-orient: vertical !important;
  -webkit-line-clamp: 3 !important;
  overflow: hidden !important;
}
/* ---- Page infrastructure : section blueprint écrasée ----------------
   .blueprint-band est en display:flex avec DEUX .container enfants →
   côte à côte à 720px chacun (titre un mot par ligne, visuel étiré en
   bande verticale, cartes flottantes). Retour au flux empilé.          */
html body .blueprint-band:not(#_):not(#_) { display: block !important; }
html body .blueprint-band > .container:not(#_):not(#_) { width: 100% !important; max-width: 1200px !important; margin-left: auto !important; margin-right: auto !important; }
html body .blueprint-band .blueprint-cards-wrap:not(#_):not(#_) { margin-top: 28px !important; }
html body .blueprint-band .strategy-cards:not(#_):not(#_) { width: 100% !important; }

/* ---- Page infrastructure : bande "Présence réseau" (nouvelle) ------- */
html body .infrastructure-pops-band .infra-pops-map { margin: 8px 0 24px; }
html body .infrastructure-pops-band .infra-pops-map img {
  display: block; width: 100%; height: auto; border-radius: 14px;
}
html body .infrastructure-pops-band .infra-pops-grid {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px;
}
@media (max-width: 980px) {
  html body .infrastructure-pops-band .infra-pops-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 640px) {
  html body .infrastructure-pops-band .infra-pops-grid { grid-template-columns: 1fr; }
}
html body .infra-pop-card:not(#_):not(#_) {
  display: flex; flex-direction: column; gap: 6px;
  padding: 18px 20px;
  background: var(--corp-surface) !important;
  border: 1px solid var(--corp-line) !important;
  border-radius: var(--corp-radius) !important;
  box-shadow: var(--corp-shadow-sm) !important;
}
html body .infra-pop-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
html body .infra-pop-head strong { font-size: 1.1rem; color: var(--corp-ink); letter-spacing: -.01em; }
html body .infra-pop-card small { color: var(--corp-muted-2); font-size: .82rem; }
html body .infra-pop-card p:not(#_):not(#_) { margin: 2px 0 0; color: var(--corp-text) !important; font-size: .93rem; line-height: 1.5; }
html body .infra-pop-status {
  flex: 0 0 auto;
  font-size: .72rem; font-weight: 700; letter-spacing: .05em; text-transform: uppercase;
  padding: .3em .65em; border-radius: 999px; white-space: nowrap;
}
html body .infra-pop-live { color: #15803d; background: #eaf7f0; border: 1px solid rgba(21,128,61,.25); }
html body .infra-pop-deploy { color: var(--corp-accent-ink); background: var(--corp-accent-soft); border: 1px solid rgba(29,78,216,.25); }
html body .infra-pop-y2026, html body .infra-pop-y2027 { color: var(--corp-muted); background: var(--corp-surface-3); border: 1px solid var(--corp-line); }

/* Carte "à la une" : le layout v80 empilait le panneau copy PAR-DESSUS
   l'image de couverture (recouverte à 100%) avec bord arrondi + ombre
   passant derrière le titre → effet "bugué". Remise en flux vertical :
   badge, image visible, contenu — sans chevauchement ni ombre interne. */
html body .blog-featured-panel-v80:not(#_):not(#_) {
  display: flex !important;
  flex-direction: column !important;
  align-items: stretch !important;
  gap: 14px !important;
  height: auto !important;
}
html body .blog-featured-panel-v80 > img:not(#_):not(#_) {
  position: static !important;
  inset: auto !important;
  width: 100% !important;
  height: 200px !important;
  object-fit: cover !important;
  border-radius: 12px !important;
  margin: 0 !important;
}
html body .blog-featured-copy-v80:not(#_):not(#_) {
  position: static !important;
  inset: auto !important;
  transform: none !important;
  margin: 0 !important;
  height: auto !important;
  min-height: 0 !important;
  background: #ffffff !important;
  box-shadow: none !important;
  border: 0 !important;
  border-radius: 0 !important;
  padding: 0 !important;
}
html body .blog-featured-copy-v80 p:not(#_):not(#_) {
  height: auto !important;
  min-height: 0 !important;
  color: var(--corp-text) !important;
}

/* Console : texte lisible génériquement (les sous-pages utilisent
   d'autres classes que netmap-* ; le moteur avait mis leur texte en
   encre sombre → invisible sur console). Les valeurs vives (rouge/vert)
   gardent leurs règles spécifiques plus fortes. */
html body .hero-netmap :is(span, small, strong, div, p, dt, dd, li):not([class*="netmap-metric-value"]):not(#_):not(#_):not(#_) {
  color: var(--corp-console-text) !important;
  -webkit-text-fill-color: var(--corp-console-text) !important;
}
html body .hero-netmap :is(small, [class*="label"], [class*="kicker"], [class*="sub"]):not(#_):not(#_):not(#_) {
  color: var(--corp-console-muted) !important;
  -webkit-text-fill-color: var(--corp-console-muted) !important;
}
/* Les valeurs d'état colorées (bloqué / livré) restent vives — HOME
   uniquement : sur les sous-pages les mêmes classes de ligne portent des
   métriques neutres (500 Mpps+…) qui ne doivent pas être rouges/vertes. */
html body .pxv93-home .hero-netmap .netmap-metric-row.m-attack .netmap-metric-value:not(#_):not(#_) { color: #f87171 !important; -webkit-text-fill-color: #f87171 !important; }
html body .pxv93-home .hero-netmap .netmap-metric-row.m-clean .netmap-metric-value:not(#_):not(#_) { color: #34d399 !important; -webkit-text-fill-color: #34d399 !important; }

/* Le kill des animations laissait à opacity:0 les éléments dont
   l'animation d'entrée (fill-mode) portait l'apparition. */
html body .hero-netmap *:not(#_):not(#_):not(#_) { opacity: 1 !important; }