/* ================================================
   AXIOM — Static Pages Design System
   Carbon Void Dark · Metallic Surfaces
   ================================================ */

/* === BODY VOID === */
body {
  background: #060912;
}

/* === NAV METAL === */
nav.s {
  background: rgba(6,9,18,0.97) !important;
  border-bottom: 1px solid rgba(79,172,254,0.1) !important;
  box-shadow:
    0 1px 0 rgba(255,255,255,0.025),
    0 4px 20px rgba(0,0,0,0.5);
}

/* === CARBON FIBER CARDS === */
/* La trame croisée diagonale à 2% d'opacité simule le tissage de la fibre carbone */
.blog-card,
.featured-card,
.mod-card,
.acc-item,
.why-card,
.art-body,
.nl-box,
.takeaway,
.quiz-zone,
.rel-card,
.bio-box,
.pv-box,
.faq-item,
.step-card,
.bonus-item {
  background:
    repeating-linear-gradient(
      45deg,
      rgba(255,255,255,0.022) 0px,
      rgba(255,255,255,0.022) 1px,
      transparent 1px,
      transparent 10px
    ),
    repeating-linear-gradient(
      -45deg,
      rgba(255,255,255,0.022) 0px,
      rgba(255,255,255,0.022) 1px,
      transparent 1px,
      transparent 10px
    ),
    rgba(10,13,24,0.90) !important;
  border-color: rgba(79,172,254,0.12) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.045),
    inset 0 -1px 0 rgba(0,0,0,0.22),
    0 4px 20px rgba(0,0,0,0.4) !important;
}

/* Profondeur accrue au hover sur les cards */
.blog-card:hover,
.featured-card:hover,
.rel-card:hover,
.mod-card:hover {
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.06),
    inset 0 -1px 0 rgba(0,0,0,0.28),
    0 12px 40px rgba(0,0,0,0.55) !important;
}

/* Accordion open state */
.acc-item.open {
  border-color: rgba(79,172,254,0.22) !important;
  box-shadow:
    inset 0 1px 0 rgba(79,172,254,0.08),
    0 0 28px rgba(79,172,254,0.06) !important;
}

/* === METALLIC BUTTONS === */
/*
  Effet biseauté métal :
  - dégradé interne inset (clair en haut, sombre en bas)
  - gradient principal bleu électrique → indigo
  - glow bleu intense en box-shadow
*/
.read-btn,
.quiz-submit,
.btn-p,
.mod-next-btn,
.nl-btn,
.back-btn[style*="4facfe"],
.back-btn[style*="color:#4facfe"],
.mc-open-btn[class] {
  background:
    repeating-linear-gradient(
      180deg,
      rgba(255,255,255,0.16) 0px,
      rgba(255,255,255,0.16) 1px,
      transparent 1px,
      transparent 3px
    ),
    linear-gradient(
      180deg,
      rgba(255,255,255,0.40) 0%,
      rgba(255,255,255,0.07) 44%,
      rgba(0,0,0,0.09) 56%,
      rgba(0,0,0,0.28) 100%
    ),
    linear-gradient(135deg, #4facfe 0%, #00d4ff 48%, #00ff9d 100%) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.46),
    inset 0 -1px 0 rgba(0,0,0,0.26),
    0 4px 22px rgba(79,172,254,0.48),
    0 1px 4px rgba(0,0,0,0.42) !important;
  border: none !important;
  position: relative;
  overflow: hidden;
}

/* Sweep lumineux au hover — simulation reflet métal poli */
.read-btn::after,
.quiz-submit::after,
.btn-p::after,
.mod-next-btn::after,
.nl-btn::after {
  content: '';
  position: absolute;
  top: 0;
  left: -90%;
  width: 50%;
  height: 100%;
  background: linear-gradient(
    90deg,
    transparent 0%,
    rgba(255,255,255,0.30) 50%,
    transparent 100%
  );
  transform: skewX(-12deg);
  pointer-events: none;
  transition: left 0.5s ease;
  opacity: 0;
}
.read-btn:hover::after,
.quiz-submit:hover::after,
.btn-p:hover::after,
.mod-next-btn:hover::after,
.nl-btn:hover::after {
  left: 160%;
  opacity: 1;
}

.read-btn:hover,
.quiz-submit:hover,
.btn-p:hover,
.mod-next-btn:hover,
.nl-btn:hover {
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.50),
    inset 0 -1px 0 rgba(0,0,0,0.28),
    0 8px 36px rgba(79,172,254,0.60),
    0 2px 6px rgba(0,0,0,0.48) !important;
}

/* Bouton outline (back-btn, small-read-btn) — métal froid */
.back-btn,
.small-read-btn,
.card-read,
.quiz-retry {
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.04) !important;
}
.back-btn:hover,
.small-read-btn:hover,
.card-read:hover {
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.06),
    0 0 14px rgba(79,172,254,0.12) !important;
}

/* === HERO SECTIONS === */
.blog-hero,
.hero,
.art-hero-inner,
.art-body h2,
.art-hero-title {
  /* Keep existing colors, just add depth */
}

/* === PROGRESS BAR DOTS (formation) === */
.prog-dot {
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.08), 0 2px 8px rgba(0,0,0,0.4);
}
.prog-connector.done {
  box-shadow: 0 0 6px rgba(79,172,254,0.3);
}

/* === QUIZ ZONE METAL === */
.quiz-zone {
  border-color: rgba(79,172,254,0.18) !important;
}
.quiz-opt {
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.03);
  transition: all 0.2s ease;
}
.quiz-opt:hover {
  box-shadow:
    inset 0 1px 0 rgba(79,172,254,0.1),
    0 0 12px rgba(79,172,254,0.08);
}
.quiz-opt.correct {
  box-shadow: inset 0 1px 0 rgba(0,255,157,0.15), 0 0 14px rgba(0,255,157,0.1) !important;
}
.quiz-opt.wrong {
  box-shadow: inset 0 1px 0 rgba(255,78,106,0.1), 0 0 12px rgba(255,78,106,0.08) !important;
}

/* === NEWSLETTER BOX === */
.nl-box {
  border-color: rgba(79,172,254,0.2) !important;
}
.nl-input {
  background: rgba(6,9,18,0.7) !important;
  border-color: rgba(79,172,254,0.15) !important;
  box-shadow: inset 0 1px 3px rgba(0,0,0,0.3);
}
.nl-input:focus {
  border-color: rgba(79,172,254,0.5) !important;
  box-shadow: 0 0 0 3px rgba(79,172,254,0.1), inset 0 1px 3px rgba(0,0,0,0.3) !important;
  outline: none;
}

/* === BREADCRUMB metal === */
.breadcrumb {
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.05);
}

/* === STATUS BADGES (formation) === */
.done-badge {
  box-shadow: 0 0 10px rgba(0,255,157,0.12);
}
.locked-badge {
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.04);
}

/* === TAKEAWAY BOX === */
.takeaway {
  background:
    repeating-linear-gradient(
      45deg,
      rgba(255,255,255,0.016) 0px,
      rgba(255,255,255,0.016) 1px,
      transparent 1px,
      transparent 10px
    ),
    repeating-linear-gradient(
      -45deg,
      rgba(255,255,255,0.016) 0px,
      rgba(255,255,255,0.016) 1px,
      transparent 1px,
      transparent 10px
    ),
    linear-gradient(135deg, rgba(79,172,254,0.06), rgba(124,58,237,0.06)) !important;
}

/* === FOOTER metal border === */
footer {
  border-top-color: rgba(79,172,254,0.1) !important;
  box-shadow: 0 -1px 0 rgba(255,255,255,0.02);
}

/* === SEARCH / INPUT generic === */
input[type="email"],
input[type="text"],
input[type="search"] {
  box-shadow: inset 0 1px 3px rgba(0,0,0,0.3);
}