/* ═══════════════════════════════════════════════════════
   CRA.CSS — Palette : violet indigo (identique à DORA)
   ═══════════════════════════════════════════════════════ */

/* ── Orbs hero CRA : violet saturé ───────────────────── */
.page-cra .orb.o1 {
  background: radial-gradient(circle, rgba(138,60,190,.60) 0%, transparent 70%) !important;
}
.page-cra .orb.o2 {
  background: radial-gradient(circle, rgba(104,1,127,.50) 0%, transparent 70%) !important;
}
.page-cra .orb.o3 {
  background: radial-gradient(circle, rgba(176,68,207,.38) 0%, transparent 70%) !important;
}
.page-cra .orb.o4 {
  background: radial-gradient(circle, rgba(138,60,190,.28) 0%, transparent 70%) !important;
  width: 120px; height: 120px;
  top: 25%; right: 8%;
}
.page-cra .orb.o5 {
  background: radial-gradient(circle, rgba(104,1,127,.22) 0%, transparent 70%) !important;
  width: 80px; height: 80px;
  bottom: 15%; left: 20%;
}

/* ── Hero ── violet indigo profond ───────────────────── */
.page-cra .hero {
  background:
    radial-gradient(ellipse 65% 55% at 75% 8%, rgba(138,60,190,.22) 0%, transparent 60%),
    radial-gradient(ellipse 45% 45% at 5% 85%, rgba(104,1,127,.18) 0%, transparent 55%),
    #0e0320 !important;
}
.page-cra .hero-bg {
  background:
    radial-gradient(ellipse 80% 55% at 50% 0%, rgba(138,60,190,.12) 0%, transparent 70%) !important;
}

/* ── Section OFFER ── violet foncé ───────────────────── */
.page-cra .offer {
  background:
    radial-gradient(ellipse 55% 45% at 8% 20%, rgba(241,136,71,.07) 0%, transparent 55%),
    radial-gradient(ellipse 40% 40% at 92% 80%, rgba(104,1,127,.14) 0%, transparent 55%),
    #0b0218 !important;
  position: relative;
}
.page-cra .offer::after {
  content: '';
  position: absolute;
  bottom: 0; left: 0; right: 0;
  height: 80px;
  background: linear-gradient(180deg, transparent 0%, #160530 100%);
  pointer-events: none;
}

/* Off-cards CRA : orange / violet vif / gris */
.page-cra .offer .off-card:nth-child(1) {
  --off-bar: linear-gradient(90deg, #F18847 0%, #f5c08a 100%) !important;
  --off-glow: rgba(241,136,71,0.22) !important;
}
.page-cra .offer .off-card:nth-child(2) {
  --off-bar: linear-gradient(90deg, #68017F 0%, #b044cf 100%) !important;
  --off-glow: rgba(104,1,127,0.24) !important;
}
.page-cra .offer .off-card:nth-child(3) {
  --off-bar: linear-gradient(90deg, #6b6b80 0%, #9898aa 100%) !important;
  --off-glow: rgba(130,130,160,0.18) !important;
}

/* ── Section METHOD ── violet moyen ──────────────────── */
.page-cra .method {
  background:
    radial-gradient(ellipse 55% 50% at 95% 5%, rgba(104,1,127,.14) 0%, transparent 55%),
    radial-gradient(ellipse 40% 40% at 5% 95%, rgba(241,136,71,.05) 0%, transparent 50%),
    linear-gradient(180deg, #160530 0%, #1e0840 100%) !important;
  position: relative;
}
.page-cra .method::after {
  content: '';
  position: absolute;
  bottom: 0; left: 0; right: 0;
  height: 80px;
  background: linear-gradient(180deg, transparent 0%, #0d0220 100%);
  pointer-events: none;
}

/* ── Section WHY ── violet très sombre ───────────────── */
.page-cra .why {
  background:
    radial-gradient(ellipse 65% 55% at 10% 50%, rgba(138,60,190,.20) 0%, transparent 60%),
    radial-gradient(ellipse 50% 40% at 90% 20%, rgba(241,136,71,.06) 0%, transparent 55%),
    linear-gradient(180deg, #0d0220 0%, #180438 100%) !important;
  position: relative;
}
/* Transition vers owner orange */
.page-cra .why::after {
  content: '';
  position: absolute;
  bottom: 0; left: 0; right: 0;
  height: 80px;
  background: linear-gradient(180deg, transparent 0%, #c85e1a 100%);
  pointer-events: none;
}

/* ── Fix z-index ─────────────────────────────────────── */
.page-cra .offer .wrap,
.page-cra .method .wrap,
.page-cra .why .wrap {
  position: relative;
  z-index: 1;
}

/* ── Hero h1 accent : orange vif ─────────────────────── */
.page-cra h1 .red {
  color: #F18847 !important;
}

/* ── Hero : timeline verticale des dates clés, sans fond ─ */
.page-cra .hero-timeline {
  display: flex;
  flex-direction: column;
  gap: 22px;
}
.page-cra .hero-timeline-item {
  position: relative;
  display: flex;
  gap: 16px;
}
.page-cra .hero-timeline-dot {
  flex-shrink: 0;
  width: 11px;
  height: 11px;
  margin-top: 4px;
  border-radius: 50%;
  background: transparent;
  border: 2px solid #b044cf;
  position: relative;
  z-index: 1;
}
.page-cra .hero-timeline-item:nth-child(1) .hero-timeline-dot { border-color: #8a3cbe; }
.page-cra .hero-timeline-item:nth-child(2) .hero-timeline-dot { border-color: #a24ccb; }
.page-cra .hero-timeline-item:nth-child(3) .hero-timeline-dot { border-color: #b044cf; }
.page-cra .hero-timeline-item:nth-child(4) .hero-timeline-dot { border-color: #c060d8; }
.page-cra .hero-timeline-item--final .hero-timeline-dot {
  border-color: #F18847;
  background: #F18847;
}
.page-cra .hero-timeline-date {
  font-family: 'Raleway', sans-serif;
  font-size: .7rem;
  font-weight: 800;
  letter-spacing: .07em;
  text-transform: uppercase;
  color: #c060d8;
  margin-bottom: 4px;
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.page-cra .hero-timeline-item--final .hero-timeline-date {
  color: #F18847;
}
.page-cra .hero-timeline-now {
  font-size: .56rem;
  font-weight: 800;
  letter-spacing: .05em;
  text-transform: uppercase;
  color: #F18847;
  background: rgba(241,136,71,.12);
  border: 1px solid rgba(241,136,71,.3);
  padding: 2px 7px;
  border-radius: 999px;
}
.page-cra .hero-timeline-label {
  margin: 0;
  font-size: .82rem;
  line-height: 1.44;
  color: rgba(255,255,255,.66);
}
.page-cra .hero-timeline-item--final .hero-timeline-label {
  color: rgba(255,255,255,.88);
  font-weight: 600;
}

/* ── Mobile : évite l'overlap avec la navbar ─────────── */
@media (max-width: 768px) {
  .page-cra .hero {
    align-items: flex-start !important;
    padding-top: 100px !important;
  }
}