/* Page Protection — effets premium additionnels */

.page-protection {
  --shield-glow: rgba(34, 211, 238, 0.35);
}

.page-protection .orb-a {
  opacity: 0.65;
  background: radial-gradient(circle, #22d3ee 0%, var(--violet-500) 40%, transparent 70%);
}

.page-protection .orb-b {
  opacity: 0.45;
}

.scanlines {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 9998;
  opacity: 0.035;
  background: repeating-linear-gradient(
    0deg,
    transparent,
    transparent 2px,
    rgba(0, 0, 0, 0.45) 2px,
    rgba(0, 0, 0, 0.45) 4px
  );
  animation: scan-drift 14s linear infinite;
}

@keyframes scan-drift {
  to {
    transform: translateY(12px);
  }
}

.vignette {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 9997;
  background: radial-gradient(ellipse 90% 70% at 50% 45%, transparent 30%, rgba(0, 0, 0, 0.55) 100%);
}

/* Shield hero */
.shield-hero {
  position: relative;
  z-index: 1;
  min-height: 88vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: clamp(5rem, 12vw, 8rem) clamp(1.25rem, 4vw, 3rem) 4rem;
  text-align: center;
  overflow: hidden;
}

.shield-hero::before {
  content: "";
  position: absolute;
  inset: -20%;
  background:
    radial-gradient(circle at 50% 50%, rgba(124, 58, 237, 0.25) 0%, transparent 45%),
    conic-gradient(from 180deg at 50% 50%, transparent, rgba(34, 211, 238, 0.08), transparent 40%);
  animation: shield-aura 10s linear infinite;
  pointer-events: none;
}

@keyframes shield-aura {
  to {
    transform: rotate(360deg);
  }
}

.shield-badge {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.45rem 1.1rem;
  margin-bottom: 1.5rem;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--accent-2);
  border: 1px solid rgba(34, 211, 238, 0.45);
  border-radius: 999px;
  background: rgba(34, 211, 238, 0.08);
  box-shadow: 0 0 40px rgba(34, 211, 238, 0.15);
  animation: badge-pulse 2.4s ease-in-out infinite;
}

@keyframes badge-pulse {
  0%,
  100% {
    box-shadow: 0 0 20px rgba(34, 211, 238, 0.12);
  }
  50% {
    box-shadow: 0 0 48px rgba(34, 211, 238, 0.35);
  }
}

.shield-visual {
  position: relative;
  width: min(92vw, 420px);
  height: min(92vw, 420px);
  margin: 0 auto 2.5rem;
}

/* Anneaux & satellites autour du disque (animation « autour du bail ») */
.shield-orbit-wrap {
  position: absolute;
  inset: 4%;
  z-index: 0;
  pointer-events: none;
}

.shield-orbit {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 2px solid transparent;
}

/* Anneau cyan — rotation horaire */
.shield-orbit--a {
  border-top-color: rgba(34, 211, 238, 0.85);
  border-right-color: rgba(34, 211, 238, 0.15);
  filter: drop-shadow(0 0 6px rgba(34, 211, 238, 0.45));
  animation: shield-orbit-spin 14s linear infinite;
}

/* Anneau magenta — sens inverse, plus large visuellement */
.shield-orbit--b {
  inset: 5%;
  border-width: 1px;
  border-bottom-color: rgba(232, 121, 249, 0.75);
  border-left-color: rgba(232, 121, 249, 0.12);
  animation: shield-orbit-spin-reverse 22s linear infinite;
}

/* Trait discontinu violet — tourne plus vite */
.shield-orbit--c {
  inset: -1%;
  border: none;
  background: conic-gradient(
    from 0deg,
    rgba(167, 139, 250, 0.95) 0deg,
    rgba(167, 139, 250, 0.95) 8deg,
    transparent 8deg,
    transparent 20deg,
    rgba(124, 58, 237, 0.6) 20deg,
    rgba(124, 58, 237, 0.6) 26deg,
    transparent 26deg,
    transparent 48deg,
    rgba(34, 211, 238, 0.5) 48deg,
    rgba(34, 211, 238, 0.5) 54deg,
    transparent 54deg,
    transparent 360deg
  );
  mask: radial-gradient(farthest-side, transparent calc(100% - 3px), #000 calc(100% - 3px + 0.5px));
  -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 3px), #000 calc(100% - 3px + 0.5px));
  animation: shield-orbit-spin 9s linear infinite;
  opacity: 0.65;
}

.shield-orbit-glow {
  position: absolute;
  inset: -4%;
  border-radius: 50%;
  background: radial-gradient(circle, transparent 55%, rgba(34, 211, 238, 0.12) 62%, transparent 70%);
  animation: shield-halo-pulse 3.5s ease-in-out infinite;
}

@keyframes shield-halo-pulse {
  0%,
  100% {
    opacity: 0.5;
    transform: scale(0.96);
  }
  50% {
    opacity: 1;
    transform: scale(1.04);
  }
}

@keyframes shield-orbit-spin {
  to {
    transform: rotate(360deg);
  }
}

@keyframes shield-orbit-spin-reverse {
  to {
    transform: rotate(-360deg);
  }
}

/* Petits points en orbite (bras + rotation du conteneur) */
.shield-satellites {
  position: absolute;
  inset: 0;
  animation: shield-orbit-spin 28s linear infinite;
}

.shield-sat-arm {
  position: absolute;
  left: 50%;
  bottom: 50%;
  width: 0;
  height: 47%;
  transform-origin: bottom center;
}

.shield-sat-arm:nth-child(1) {
  transform: translateX(-50%) rotate(0deg);
}

.shield-sat-arm:nth-child(2) {
  transform: translateX(-50%) rotate(120deg);
}

.shield-sat-arm:nth-child(3) {
  transform: translateX(-50%) rotate(240deg);
}

.shield-sat-arm span {
  position: absolute;
  top: 0;
  left: 50%;
  width: 8px;
  height: 8px;
  margin: -4px 0 0 -4px;
  border-radius: 50%;
  background: #22d3ee;
  box-shadow: 0 0 14px rgba(34, 211, 238, 0.95), 0 0 28px rgba(34, 211, 238, 0.35);
}

.shield-sat-arm:nth-child(2) span {
  background: var(--accent);
  box-shadow: 0 0 14px rgba(232, 121, 249, 0.9), 0 0 26px rgba(232, 121, 249, 0.35);
}

.shield-sat-arm:nth-child(3) span {
  background: var(--violet-400);
  box-shadow: 0 0 12px rgba(167, 139, 250, 0.85);
}

.shield-rings {
  position: absolute;
  inset: 0;
  z-index: 0;
  border-radius: 50%;
  border: 1px solid rgba(167, 139, 250, 0.25);
  animation: ring-expand 4s ease-out infinite;
}

.shield-rings:nth-child(2) {
  animation-delay: 1.3s;
  border-color: rgba(34, 211, 238, 0.2);
}

.shield-rings:nth-child(3) {
  animation-delay: 2.6s;
  border-color: rgba(232, 121, 249, 0.15);
}

@keyframes ring-expand {
  0% {
    transform: scale(0.35);
    opacity: 0.9;
  }
  100% {
    transform: scale(1.15);
    opacity: 0;
  }
}

.shield-core {
  position: absolute;
  inset: 12%;
  z-index: 2;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: radial-gradient(circle at 30% 25%, rgba(255, 255, 255, 0.12), transparent 50%),
    linear-gradient(145deg, rgba(124, 58, 237, 0.5), rgba(15, 10, 28, 0.95));
  border: 1px solid rgba(167, 139, 250, 0.5);
  box-shadow:
    inset 0 0 60px rgba(124, 58, 237, 0.35),
    0 0 80px var(--shield-glow),
    0 0 140px rgba(124, 58, 237, 0.25);
  animation: core-breathe 5s ease-in-out infinite;
}

@keyframes core-breathe {
  0%,
  100% {
    transform: scale(1);
    box-shadow:
      inset 0 0 60px rgba(124, 58, 237, 0.35),
      0 0 80px var(--shield-glow),
      0 0 120px rgba(124, 58, 237, 0.2);
  }
  50% {
    transform: scale(1.03);
    box-shadow:
      inset 0 0 80px rgba(124, 58, 237, 0.45),
      0 0 100px rgba(34, 211, 238, 0.45),
      0 0 180px rgba(124, 58, 237, 0.35);
  }
}

.shield-svg {
  width: 42%;
  height: 42%;
  filter: drop-shadow(0 0 20px rgba(34, 211, 238, 0.6));
  animation: shield-tilt 8s ease-in-out infinite;
}

@keyframes shield-tilt {
  0%,
  100% {
    transform: rotate(-4deg);
  }
  50% {
    transform: rotate(4deg);
  }
}

.mega-stat {
  position: relative;
  z-index: 2;
}

.mega-label {
  margin: 0 0 0.35rem;
  font-size: 0.85rem;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--text-muted);
}

.mega-number {
  margin: 0;
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: 0.25rem;
  flex-wrap: wrap;
  line-height: 0.95;
}

.mega-number-value {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(3.5rem, 14vw, 8rem);
  letter-spacing: -0.04em;
  background: linear-gradient(135deg, #fff 0%, var(--accent-2) 35%, var(--violet-300) 70%, var(--accent) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  filter: drop-shadow(0 0 40px rgba(34, 211, 238, 0.35));
}

.mega-suffix {
  font-size: clamp(1.5rem, 5vw, 2.75rem);
  font-weight: 700;
  font-family: var(--font-display);
  background: linear-gradient(90deg, var(--accent-2), var(--violet-400));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.mega-sub {
  margin: 1rem auto 0;
  max-width: 42rem;
  font-size: 1.1rem;
  color: var(--text-muted);
}

/* Threat ticker */
.ticker-threat {
  position: relative;
  z-index: 1;
  border-block: 1px solid rgba(34, 211, 238, 0.2);
  background: linear-gradient(90deg, rgba(0, 0, 0, 0.5), rgba(124, 58, 237, 0.12), rgba(0, 0, 0, 0.5));
  overflow: hidden;
}

.ticker-threat .marquee-inner {
  animation-direction: reverse;
  animation-duration: 22s;
  color: rgba(255, 255, 255, 0.55);
}

.ticker-threat .marquee-inner span.tick-ok {
  color: #4ade80;
  font-weight: 800;
}

/* Radar strip */
.radar-section {
  position: relative;
  z-index: 1;
  padding: 3rem clamp(1.25rem, 4vw, 3rem);
  max-width: 1100px;
  margin: 0 auto;
}

.radar-card {
  position: relative;
  padding: 2rem;
  overflow: hidden;
}

.radar-card::after {
  content: "";
  position: absolute;
  width: 140%;
  height: 140%;
  top: -20%;
  left: -20%;
  background: conic-gradient(from 0deg, transparent 0deg, rgba(34, 211, 238, 0.12) 60deg, transparent 120deg);
  animation: radar-sweep 6s linear infinite;
  pointer-events: none;
}

@keyframes radar-sweep {
  to {
    transform: rotate(360deg);
  }
}

.radar-inner {
  position: relative;
  z-index: 1;
  display: grid;
  gap: 1.5rem;
}

@media (min-width: 768px) {
  .radar-inner {
    grid-template-columns: 1fr 1fr;
    align-items: center;
  }
}

.radar-title {
  font-family: var(--font-display);
  font-size: 1.5rem;
  margin: 0 0 0.5rem;
}

.radar-lead {
  margin: 0;
  color: var(--text-muted);
}

.radar-stats {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1rem;
}

.radar-stat {
  padding: 1rem 1.1rem;
  border-radius: var(--radius-sm);
  background: rgba(0, 0, 0, 0.35);
  border: 1px solid var(--border);
  text-align: center;
}

.radar-stat strong {
  display: block;
  font-family: var(--font-display);
  font-size: 1.5rem;
  color: var(--accent-2);
  margin-bottom: 0.25rem;
}

.radar-stat span {
  font-size: 0.75rem;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

/* Layer stack */
.layers-section {
  position: relative;
  z-index: 1;
  padding: clamp(4rem, 10vw, 6rem) clamp(1.25rem, 4vw, 3rem);
  max-width: 1100px;
  margin: 0 auto;
}

.layers-grid {
  display: grid;
  gap: 1rem;
}

@media (min-width: 768px) {
  .layers-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

.layer-card {
  position: relative;
  padding: 1.75rem 1.5rem;
  overflow: hidden;
  transition: transform 0.35s var(--ease-out-expo), border-color 0.3s ease;
}

.layer-card::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--violet-500), var(--accent-2), var(--accent));
  opacity: 0.85;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.5s var(--ease-out-expo);
}

.layer-card:hover {
  transform: translateY(-6px);
  border-color: rgba(34, 211, 238, 0.35);
}

.layer-card:hover::before {
  transform: scaleX(1);
}

.layer-num {
  font-family: var(--font-display);
  font-size: 2.5rem;
  font-weight: 800;
  line-height: 1;
  margin-bottom: 0.5rem;
  opacity: 0.35;
  background: linear-gradient(180deg, var(--violet-400), transparent);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.layer-card h3 {
  margin: 0 0 0.5rem;
  font-family: var(--font-display);
  font-size: 1.15rem;
}

.layer-card p {
  margin: 0;
  font-size: 0.92rem;
  color: var(--text-muted);
}

/* Premium pitch block */
.pitch-premium {
  position: relative;
  z-index: 1;
  max-width: 800px;
  margin: 0 auto;
  padding: 0 clamp(1.25rem, 4vw, 3rem) 4rem;
  text-align: center;
}

.pitch-premium h2 {
  font-family: var(--font-display);
  font-size: clamp(1.6rem, 3.5vw, 2.25rem);
  margin: 0 0 1rem;
}

.pitch-premium p {
  margin: 0 0 1rem;
  color: var(--text-muted);
}

.disclaimer-micro {
  margin-top: 2rem;
  font-size: 0.72rem;
  line-height: 1.5;
  color: rgba(255, 255, 255, 0.35);
  max-width: 52ch;
  margin-left: auto;
  margin-right: auto;
}

/* Floating particles (CSS) */
.particle-field {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
}

.particle-field span {
  position: absolute;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: var(--accent-2);
  opacity: 0.35;
  animation: float-p 12s linear infinite;
  box-shadow: 0 0 10px var(--accent-2);
}

.particle-field span:nth-child(1) {
  left: 10%;
  top: 20%;
  animation-delay: 0s;
  animation-duration: 14s;
}

.particle-field span:nth-child(2) {
  left: 25%;
  top: 70%;
  animation-delay: -2s;
  background: var(--accent);
  box-shadow: 0 0 10px var(--accent);
  animation-duration: 11s;
}

.particle-field span:nth-child(3) {
  left: 55%;
  top: 15%;
  animation-delay: -4s;
  animation-duration: 16s;
}

.particle-field span:nth-child(4) {
  left: 78%;
  top: 45%;
  animation-delay: -1s;
  animation-duration: 13s;
}

.particle-field span:nth-child(5) {
  left: 88%;
  top: 80%;
  animation-delay: -6s;
  background: var(--violet-400);
  box-shadow: 0 0 10px var(--violet-400);
  animation-duration: 15s;
}

.particle-field span:nth-child(6) {
  left: 40%;
  top: 55%;
  animation-delay: -3s;
  animation-duration: 12s;
}

@keyframes float-p {
  0% {
    transform: translate(0, 0) scale(1);
    opacity: 0;
  }
  10% {
    opacity: 0.5;
  }
  90% {
    opacity: 0.35;
  }
  100% {
    transform: translate(20px, -120px) scale(0.3);
    opacity: 0;
  }
}

/* Lien Protection — même hauteur que la nav, style CTA discret */
.nav a.nav-shield {
  padding: 0 0.85rem;
  min-height: 2.45rem;
  border-radius: 999px;
  border: 1px solid rgba(34, 211, 238, 0.28);
  background: linear-gradient(135deg, rgba(34, 211, 238, 0.08), rgba(124, 58, 237, 0.1));
  color: var(--text-muted);
  font-weight: 500;
  box-shadow: none;
  animation: nav-shield-glow 3.5s ease-in-out infinite alternate;
}

.nav a.nav-shield:hover {
  color: var(--text);
  border-color: rgba(34, 211, 238, 0.5);
  background: linear-gradient(135deg, rgba(34, 211, 238, 0.14), rgba(124, 58, 237, 0.16));
  box-shadow: 0 0 20px rgba(34, 211, 238, 0.12);
}

/* Page Protection active : même logique que .is-active + accent cyan */
.nav a.nav-shield.is-active {
  color: var(--text);
  font-weight: 600;
  border-color: rgba(34, 211, 238, 0.65);
  background: linear-gradient(135deg, rgba(34, 211, 238, 0.18), rgba(124, 58, 237, 0.22));
  box-shadow: 0 0 28px rgba(34, 211, 238, 0.22);
}

@keyframes nav-shield-glow {
  from {
    box-shadow: 0 0 16px rgba(34, 211, 238, 0.1);
  }
  to {
    box-shadow: 0 0 36px rgba(124, 58, 237, 0.25);
  }
}

/* Hub cards (home) */
.hub-grid {
  display: grid;
  gap: 1.25rem;
  max-width: 1100px;
  margin: 0 auto;
  padding: 0 clamp(1.25rem, 4vw, 3rem) clamp(4rem, 10vw, 6rem);
}

@media (min-width: 720px) {
  .hub-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 1024px) {
  .hub-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

.hub-card {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: 1.75rem;
  min-height: 200px;
  overflow: hidden;
  transition: transform 0.4s var(--ease-out-expo), border-color 0.3s ease, box-shadow 0.35s ease;
}

.hub-card::after {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(600px circle at var(--hx, 50%) var(--hy, 0%), rgba(124, 58, 237, 0.18), transparent 45%);
  opacity: 0;
  transition: opacity 0.4s ease;
  pointer-events: none;
}

.hub-card:hover {
  transform: translateY(-8px) scale(1.01);
  border-color: rgba(167, 139, 250, 0.45);
  box-shadow: 0 28px 80px rgba(0, 0, 0, 0.4);
}

.hub-card:hover::after {
  opacity: 1;
}

.hub-card--shield {
  border-color: rgba(34, 211, 238, 0.35);
  background: linear-gradient(155deg, rgba(34, 211, 238, 0.12), var(--bg-card));
}

.hub-card--shield:hover {
  box-shadow: 0 28px 90px rgba(34, 211, 238, 0.15);
}

.hub-icon {
  font-size: 1.75rem;
  margin-bottom: 0.75rem;
}

.hub-card h2 {
  font-family: var(--font-display);
  font-size: 1.25rem;
  margin: 0 0 0.5rem;
}

.hub-card p {
  margin: 0 0 1.25rem;
  flex: 1;
  color: var(--text-muted);
  font-size: 0.95rem;
}

.hub-link {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  font-weight: 600;
  font-size: 0.9rem;
  color: var(--violet-400);
  transition: gap 0.25s var(--ease-out-expo), color 0.2s ease;
}

.hub-card:hover .hub-link {
  gap: 0.6rem;
  color: var(--accent-2);
}

.mobile-nav a.nav-shield {
  border: 1px solid rgba(34, 211, 238, 0.28);
  background: rgba(34, 211, 238, 0.06);
}

.mobile-nav a.nav-shield.is-active {
  border-color: rgba(34, 211, 238, 0.5);
  background: rgba(34, 211, 238, 0.12);
}

@media (prefers-reduced-motion: reduce) {
  .shield-orbit--a,
  .shield-orbit--b,
  .shield-orbit--c,
  .shield-satellites,
  .shield-orbit-glow {
    animation: none !important;
  }

  .shield-orbit-glow {
    opacity: 0.65;
    transform: none;
  }
}