/* ═══════════════════════════════════════════════════════════
   Phoenix Inscription – Frontend styles
   Scoped under #phoenix-inscription
   ═══════════════════════════════════════════════════════════ */

/* ── Scoped Reset ── */
#phoenix-inscription,
#phoenix-inscription *,
#phoenix-inscription *::before,
#phoenix-inscription *::after {
  margin: 0 !important;
  padding: 0 !important;
  box-sizing: border-box !important;
  border: none !important;
  outline: none !important;
  float: none !important;
  text-transform: none !important;
  text-decoration: none !important;
  list-style: none !important;
  background: none !important;
  box-shadow: none !important;
}

/* ── Variables & Base ── */
#phoenix-inscription {
  --phi-fire-dark: #1a0a00;
  --phi-fire-900: #2d1106;
  --phi-fire-700: #7a2e10;
  --phi-fire-600: #b34215;
  --phi-fire-500: #e85d1a;
  --phi-fire-400: #f47d3a;
  --phi-fire-accent: #ffd166;
  --phi-fire-light: #fff5eb;
  --phi-txt: #1a1a2e;
  --phi-txt2: #4a4a68;
  --phi-white: #ffffff;
  --phi-radius: 12px;

  font-family: 'Source Sans 3', 'Segoe UI', sans-serif !important;
  font-size: 16px !important;
  line-height: 1.6 !important;
  color: var(--phi-txt) !important;
  max-width: 900px !important;
  margin: 0 auto !important;
  padding: 20px 16px 40px !important;
  background: transparent !important;
}

/* ── Header ── */
#phoenix-inscription .phi-header {
  background: linear-gradient(135deg, var(--phi-fire-900) 0%, var(--phi-fire-700) 40%, var(--phi-fire-500) 100%) !important;
  border-radius: var(--phi-radius) !important;
  padding: 40px 36px 32px !important;
  position: relative !important;
  overflow: hidden !important;
  margin-bottom: 28px !important;
}
#phoenix-inscription .phi-header::before {
  content: '' !important;
  position: absolute !important;
  top: -60px !important;
  right: -40px !important;
  width: 260px !important;
  height: 260px !important;
  background: radial-gradient(circle, rgba(255,209,102,0.25) 0%, transparent 70%) !important;
  border-radius: 50% !important;
  pointer-events: none !important;
}
#phoenix-inscription .phi-header::after {
  content: '🔥' !important;
  position: absolute !important;
  top: 18px !important;
  right: 28px !important;
  font-size: 48px !important;
  opacity: 0.3 !important;
  filter: drop-shadow(0 0 12px rgba(255,150,50,0.5)) !important;
  animation: phiFlicker 3s ease-in-out infinite alternate !important;
  background: none !important;
}
@keyframes phiFlicker {
  0%, 100% { opacity: 0.25; transform: scale(1); }
  50% { opacity: 0.4; transform: scale(1.05); }
}
#phoenix-inscription .phi-header h2 {
  font-family: 'Oswald', sans-serif !important;
  font-weight: 700 !important;
  font-size: 2rem !important;
  letter-spacing: 0.04em !important;
  text-transform: uppercase !important;
  color: var(--phi-white) !important;
  line-height: 1.15 !important;
  position: relative !important;
}
#phoenix-inscription .phi-header h2 span {
  display: block !important;
  font-size: 0.55em !important;
  font-weight: 400 !important;
  letter-spacing: 0.12em !important;
  color: var(--phi-fire-accent) !important;
  margin-bottom: 4px !important;
  text-transform: uppercase !important;
}

/* ── Trial Banner ── */
#phoenix-inscription .phi-trial-banner {
  background: linear-gradient(135deg, #14532d 0%, #2ea043 100%) !important;
  border-radius: var(--phi-radius) !important;
  padding: 22px 28px !important;
  margin-bottom: 24px !important;
  text-align: center !important;
  position: relative !important;
  overflow: hidden !important;
}
#phoenix-inscription .phi-trial-banner::before {
  content: '' !important;
  position: absolute !important;
  inset: 0 !important;
  background: repeating-linear-gradient(-45deg, transparent, transparent 12px, rgba(255,255,255,0.04) 12px, rgba(255,255,255,0.04) 24px) !important;
  pointer-events: none !important;
}
#phoenix-inscription .phi-trial-banner p {
  font-family: 'Oswald', sans-serif !important;
  font-weight: 700 !important;
  font-size: 1.4rem !important;
  color: var(--phi-white) !important;
  letter-spacing: 0.06em !important;
  text-transform: uppercase !important;
  position: relative !important;
  line-height: 1.3 !important;
}
#phoenix-inscription .phi-trial-banner p em {
  display: block !important;
  font-style: normal !important;
  font-size: 0.65em !important;
  font-weight: 400 !important;
  letter-spacing: 0.1em !important;
  color: rgba(255,255,255,0.8) !important;
  margin-top: 4px !important;
}

/* ── Sections ── */
#phoenix-inscription .phi-sections {
  display: flex !important;
  flex-direction: column !important;
  gap: 20px !important;
}
#phoenix-inscription .phi-section {
  background: var(--phi-white) !important;
  border-radius: var(--phi-radius) !important;
  border: 1px solid #e8e8f0 !important;
  overflow: hidden !important;
  box-shadow: 0 2px 8px rgba(0,0,0,0.04) !important;
}
#phoenix-inscription .phi-section-header {
  font-family: 'Oswald', sans-serif !important;
  font-weight: 600 !important;
  font-size: 1.05rem !important;
  text-transform: uppercase !important;
  letter-spacing: 0.08em !important;
  padding: 14px 22px !important;
  background: var(--phi-fire-dark) !important;
  color: var(--phi-fire-accent) !important;
  position: relative !important;
}
#phoenix-inscription .phi-section-header::after {
  content: '' !important;
  position: absolute !important;
  bottom: 0 !important;
  left: 22px !important;
  right: 22px !important;
  height: 2px !important;
  background: linear-gradient(90deg, var(--phi-fire-500), var(--phi-fire-accent), transparent) !important;
}
#phoenix-inscription .phi-section-body {
  padding: 22px !important;
  font-size: 0.94rem !important;
  line-height: 1.7 !important;
}
#phoenix-inscription .phi-section-body p {
  margin-bottom: 12px !important;
  font-size: 0.94rem !important;
  line-height: 1.7 !important;
  color: var(--phi-txt) !important;
}
#phoenix-inscription .phi-section-body p:last-child {
  margin-bottom: 0 !important;
}
#phoenix-inscription .phi-section-body strong {
  font-weight: 600 !important;
}
#phoenix-inscription .phi-section-body em {
  font-style: italic !important;
  color: #78350f !important;
}

/* Lists inside sections (from HTML content) */
#phoenix-inscription .phi-section-body ul {
  margin: 14px 0 !important;
  padding: 0 !important;
}
#phoenix-inscription .phi-section-body ul li {
  display: flex !important;
  align-items: flex-start !important;
  gap: 10px !important;
  padding: 10px 16px !important;
  margin-bottom: 6px !important;
  background: var(--phi-fire-light) !important;
  border-radius: 8px !important;
  font-size: 0.9rem !important;
  line-height: 1.5 !important;
  list-style: none !important;
}
#phoenix-inscription .phi-section-body ul li::before {
  content: '✓' !important;
  flex-shrink: 0 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 20px !important;
  height: 20px !important;
  background: var(--phi-fire-500) !important;
  color: #fff !important;
  border-radius: 50% !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  margin-top: 1px !important;
}

/* ── Email Link ── */
#phoenix-inscription .phi-email-link {
  color: var(--phi-fire-600) !important;
  font-weight: 600 !important;
  text-decoration: none !important;
  border-bottom: 1px dashed var(--phi-fire-400) !important;
  transition: border-color 0.2s !important;
}
#phoenix-inscription .phi-email-link:hover {
  border-bottom-style: solid !important;
  text-decoration: none !important;
}

/* ── Cotisation Grid ── */
#phoenix-inscription .phi-cotisation-grid {
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap: 8px !important;
  margin: 18px 0 !important;
}
#phoenix-inscription .phi-cotisation-row {
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
  padding: 12px 18px !important;
  background: var(--phi-white) !important;
  border: 1px solid #eee !important;
  border-radius: 8px !important;
  transition: background 0.2s ease, transform 0.15s ease !important;
}
#phoenix-inscription .phi-cotisation-row:hover {
  background: var(--phi-fire-light) !important;
  transform: translateY(-1px) !important;
}
#phoenix-inscription .phi-cotisation-cat {
  font-weight: 600 !important;
  font-size: 0.92rem !important;
  color: var(--phi-txt) !important;
}
#phoenix-inscription .phi-cotisation-price {
  font-family: 'Oswald', sans-serif !important;
  font-weight: 600 !important;
  font-size: 1.05rem !important;
  color: var(--phi-fire-600) !important;
  white-space: nowrap !important;
}

/* ── Remarks ── */
#phoenix-inscription .phi-remarks {
  margin-top: 18px !important;
}
#phoenix-inscription .phi-remark {
  display: flex !important;
  align-items: flex-start !important;
  gap: 10px !important;
  padding: 10px 0 !important;
  border-bottom: 1px solid #f0f0f5 !important;
  font-size: 0.88rem !important;
  line-height: 1.6 !important;
  color: var(--phi-txt) !important;
}
#phoenix-inscription .phi-remark:last-child {
  border-bottom: none !important;
}
#phoenix-inscription .phi-remark-bullet {
  flex-shrink: 0 !important;
  width: 6px !important;
  height: 6px !important;
  background: var(--phi-fire-500) !important;
  border-radius: 50% !important;
  margin-top: 9px !important;
}
#phoenix-inscription .phi-remark strong {
  font-weight: 600 !important;
}

/* ── Bank Card ── */
#phoenix-inscription .phi-bank-card {
  margin-top: 22px !important;
  background: linear-gradient(135deg, #1a1a2e 0%, #2d2d4e 100%) !important;
  border-radius: var(--phi-radius) !important;
  padding: 24px 26px !important;
  color: var(--phi-white) !important;
  position: relative !important;
  overflow: hidden !important;
}
#phoenix-inscription .phi-bank-card::before {
  content: '' !important;
  position: absolute !important;
  top: -30px !important;
  right: -30px !important;
  width: 140px !important;
  height: 140px !important;
  background: radial-gradient(circle, rgba(255,209,102,0.15) 0%, transparent 70%) !important;
  border-radius: 50% !important;
  pointer-events: none !important;
}
#phoenix-inscription .phi-bank-label {
  font-family: 'Oswald', sans-serif !important;
  font-size: 0.75rem !important;
  text-transform: uppercase !important;
  letter-spacing: 0.12em !important;
  color: rgba(255,255,255,0.5) !important;
  margin-bottom: 4px !important;
}
#phoenix-inscription .phi-bank-name {
  font-family: 'Oswald', sans-serif !important;
  font-weight: 600 !important;
  font-size: 1rem !important;
  color: var(--phi-fire-accent) !important;
  margin-bottom: 14px !important;
}
#phoenix-inscription .phi-bank-iban {
  font-family: 'Oswald', monospace !important;
  font-weight: 600 !important;
  font-size: 1.25rem !important;
  letter-spacing: 0.08em !important;
  color: var(--phi-white) !important;
  margin-bottom: 16px !important;
}
#phoenix-inscription .phi-bank-comm {
  font-size: 0.85rem !important;
  line-height: 1.5 !important;
  color: rgba(255,255,255,0.7) !important;
  padding: 10px 14px !important;
  background: rgba(255,255,255,0.06) !important;
  border-radius: 8px !important;
}
#phoenix-inscription .phi-bank-comm strong {
  font-weight: 600 !important;
  color: var(--phi-fire-accent) !important;
}
#phoenix-inscription .phi-bank-comm code {
  font-family: 'Oswald', monospace !important;
  background: rgba(255,255,255,0.1) !important;
  padding: 2px 8px !important;
  border-radius: 4px !important;
  color: var(--phi-white) !important;
  font-size: 0.9em !important;
}

/* ── Responsive ── */
@media (max-width: 600px) {
  #phoenix-inscription {
    padding: 12px 10px 32px !important;
  }
  #phoenix-inscription .phi-header {
    padding: 28px 22px 24px !important;
  }
  #phoenix-inscription .phi-header h2 {
    font-size: 1.5rem !important;
  }
  #phoenix-inscription .phi-header h2 span {
    font-size: 0.6em !important;
  }
  #phoenix-inscription .phi-header::after {
    font-size: 32px !important;
    top: 12px !important;
    right: 16px !important;
  }
  #phoenix-inscription .phi-trial-banner p {
    font-size: 1.15rem !important;
  }
  #phoenix-inscription .phi-cotisation-grid {
    grid-template-columns: 1fr !important;
  }
  #phoenix-inscription .phi-section-body {
    padding: 16px !important;
  }
  #phoenix-inscription .phi-bank-iban {
    font-size: 1rem !important;
    letter-spacing: 0.04em !important;
  }
}