/* ═══════════════════════════════════════════════════════════
   MON PROJET DE VIE — CHARTE JEUNESSE v6
   Couleurs : violet électrique · corail · jaune soleil · vert menthe
   Ambiance : espoir, joie, vision, énergie
═══════════════════════════════════════════════════════════ */

/* ── PALETTE JEUNESSE ────────────────────────────────────── */
:root {
  --j-purple:  #7C3AED;   /* violet électrique */
  --j-coral:   #FF6B6B;   /* corail chaleureux */
  --j-yellow:  #FFD93D;   /* jaune soleil */
  --j-green:   #6BCB77;   /* vert espoir */
  --j-blue:    #4D96FF;   /* bleu ciel */
  --j-pink:    #FF6FD8;   /* rose bonheur */
  --j-orange:  #FF9A3C;   /* orange pêche */
  --j-mint:    #4EE8C0;   /* menthe fraîche */

  /* Dégradés signature */
  --grad-hero:    linear-gradient(135deg, #7C3AED 0%, #FF6FD8 50%, #FF6B6B 100%);
  --grad-action:  linear-gradient(135deg, #FFD93D 0%, #FF9A3C 100%);
  --grad-success: linear-gradient(135deg, #6BCB77 0%, #4EE8C0 100%);
  --grad-info:    linear-gradient(135deg, #4D96FF 0%, #7C3AED 100%);
  --grad-card:    linear-gradient(145deg, #fff 0%, #fafbff 100%);

  /* Override thème original */
  --gold:   #FFD93D;
  --sun:    #FFD93D;
  --teal:   #6BCB77;
  --mint:   #4EE8C0;
  --navy:   #1a0533;
  --blue:   #2d1b69;
  --rose:   #FF6B6B;
}

/* ── FOND ANIMÉ ──────────────────────────────────────────── */
body {
  background: #f8f4ff;
  min-height: 100vh;
}

/* Bulles de fond animées */
.bg-shapes span:nth-child(1) { background: var(--j-purple); width:320px; height:320px; opacity:.07; animation-duration:20s; }
.bg-shapes span:nth-child(2) { background: var(--j-coral);  width:220px; height:220px; opacity:.07; animation-duration:16s; }
.bg-shapes span:nth-child(3) { background: var(--j-yellow); width:260px; height:260px; opacity:.07; animation-duration:24s; }
.bg-shapes span:nth-child(4) { background: var(--j-blue);   width:180px; height:180px; opacity:.07; animation-duration:18s; }

/* ── HEADER ──────────────────────────────────────────────── */
.header {
  background: var(--grad-hero) !important;
  position: sticky; top: 0; z-index: 200;
  box-shadow: 0 4px 24px rgba(124,58,237,.4);
}
.h-logo {
  background: rgba(255,255,255,.25) !important;
  animation: logoPulse 3s ease-in-out infinite;
}
@keyframes logoPulse {
  0%,100% { transform: scale(1) rotate(0deg); }
  50%      { transform: scale(1.08) rotate(5deg); }
}
.h-titles h1 { font-size: 1.05rem !important; }
.h-titles p  { color: #FFD93D !important; }

/* ── BARRE DE PROGRESSION ────────────────────────────────── */
.prog-fill {
  background: var(--grad-action) !important;
  box-shadow: 0 0 8px rgba(255,217,61,.6);
}

/* ── ÉTAPES NAVIGATION ───────────────────────────────────── */
.etape-pill.actif { background: var(--j-yellow) !important; color: var(--navy) !important; }
.etape-pill.fait  { background: rgba(107,203,119,.25) !important; color: var(--j-green) !important; }

/* ── SECTION HEAD ────────────────────────────────────────── */
.section-head h2 {
  background: var(--grad-hero);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  font-size: 2rem !important;
}
.section-emoji { filter: drop-shadow(0 4px 8px rgba(124,58,237,.3)); }

/* ── CARTES DE QUESTIONS ─────────────────────────────────── */
.qcard {
  background: var(--grad-card) !important;
  border-radius: 20px !important;
  border: none !important;
  box-shadow: 0 4px 24px rgba(124,58,237,.08), 0 1px 4px rgba(0,0,0,.06) !important;
  transition: transform .2s ease, box-shadow .2s ease !important;
  border-top: 3px solid transparent;
  border-image: var(--grad-hero) 1;
  position: relative;
  overflow: visible;
}
.qcard:focus-within {
  transform: translateY(-3px) !important;
  box-shadow: 0 8px 32px rgba(124,58,237,.18), 0 2px 8px rgba(0,0,0,.08) !important;
  border-top: 3px solid var(--j-purple);
}

/* Numéro de question coloré */
.q-num {
  background: var(--grad-hero) !important;
  color: #fff !important;
  width: 30px; height: 30px;
  font-size: .75rem !important;
  box-shadow: 0 3px 10px rgba(124,58,237,.4);
  animation: numBounce 2s ease-in-out infinite;
}
@keyframes numBounce {
  0%,100% { transform: translateY(0); }
  50%      { transform: translateY(-3px); }
}

/* ── CHAMPS DE SAISIE ────────────────────────────────────── */
textarea, input[type=text], input[type=search], input[type=date], input[type=tel], select {
  border: 2px solid #e8e0ff !important;
  border-radius: 12px !important;
  background: #fff !important;
  transition: all .2s ease !important;
  font-size: .92rem !important;
}
textarea:focus, input:focus, select:focus {
  border-color: var(--j-purple) !important;
  box-shadow: 0 0 0 4px rgba(124,58,237,.12) !important;
  background: #fff !important;
}
textarea::placeholder, input::placeholder {
  color: #c4b5fd !important;
  font-style: italic;
}

/* ── BOUTONS ─────────────────────────────────────────────── */
.btn-gold, .btn-nav-next {
  background: var(--grad-action) !important;
  color: var(--navy) !important;
  border-radius: 12px !important;
  font-weight: 800 !important;
  box-shadow: 0 4px 16px rgba(255,154,60,.4) !important;
  transition: all .2s ease !important;
}
.btn-gold:hover, .btn-nav-next:hover {
  transform: translateY(-3px) scale(1.02) !important;
  box-shadow: 0 8px 24px rgba(255,154,60,.5) !important;
}
.btn-teal {
  background: var(--grad-success) !important;
  color: var(--navy) !important;
  border-radius: 12px !important;
}
.btn-navy {
  background: var(--grad-info) !important;
  border-radius: 12px !important;
}
.btn-outline {
  border: 2px solid var(--j-purple) !important;
  color: var(--j-purple) !important;
  border-radius: 12px !important;
}
.btn-outline:hover {
  background: var(--j-purple) !important;
  color: #fff !important;
}

/* ── CARROUSEL / SLIDES ──────────────────────────────────── */
.q-arr-btn.q-prev {
  background: var(--j-purple) !important;
  box-shadow: 0 4px 16px rgba(124,58,237,.4) !important;
  border-radius: 50% !important;
  width: 56px !important; height: 56px !important;
  font-size: 28px !important;
}
.q-arr-btn.q-next:not(.last-q) {
  background: var(--grad-action) !important;
  color: var(--navy) !important;
  box-shadow: 0 4px 16px rgba(255,154,60,.4) !important;
  border-radius: 50% !important;
  width: 56px !important; height: 56px !important;
  font-size: 28px !important;
}
.q-arr-btn.last-q {
  background: var(--grad-success) !important;
  color: var(--navy) !important;
  width: 56px !important; height: 56px !important;
  font-size: 22px !important;
}
.q-pfill {
  background: var(--grad-hero) !important;
  box-shadow: 0 0 8px rgba(124,58,237,.5);
}
.q-count {
  font-size: .82rem !important;
  color: var(--j-purple) !important;
  font-weight: 900 !important;
  letter-spacing: .04em;
}

/* ── TOKEN BOX ───────────────────────────────────────────── */
.token-box {
  background: linear-gradient(135deg, #7C3AED11, #FF6FD811) !important;
  border: 2px solid #7C3AED33 !important;
  border-radius: 16px !important;
}
.token-val {
  color: var(--j-purple) !important;
  font-size: 1.1rem !important;
  letter-spacing: .12em !important;
}

/* ── CHAP BANNERS ────────────────────────────────────────── */
.chap-banner {
  background: var(--grad-hero) !important;
  border-radius: 16px !important;
  box-shadow: 0 4px 20px rgba(124,58,237,.25) !important;
}

/* ── MODAL ───────────────────────────────────────────────── */
.modal-head {
  background: var(--grad-hero) !important;
}
.modal-body .mb-highlight {
  background: rgba(124,58,237,.07) !important;
  border-left: 4px solid var(--j-purple) !important;
}

/* ── HERO ACCUEIL ────────────────────────────────────────── */
.hero { padding: 32px 0 24px !important; }
.hero-badges .hbadge { font-size: .82rem !important; }
.hb-d1 { background: var(--j-green) !important; }
.hb-d2 { background: var(--j-yellow) !important; }
.hb-d3 { background: var(--j-purple) !important; }

/* ── RADIO CARDS ─────────────────────────────────────────── */
.radio-card.selected {
  border-color: var(--j-purple) !important;
  background: rgba(124,58,237,.06) !important;
}
.radio-card:hover { border-color: var(--j-purple) !important; }

/* ── CADRAN CARDS ────────────────────────────────────────── */
.cadran-card.selected {
  border-color: var(--j-purple) !important;
  background: rgba(124,58,237,.06) !important;
}

/* ── MASLOW ──────────────────────────────────────────────── */
.maslow-opt.selected {
  border-color: var(--j-purple) !important;
  background: rgba(124,58,237,.06) !important;
}

/* ── SAVE DOT ────────────────────────────────────────────── */
.save-dot.saved  { background: var(--j-green) !important; }
.save-dot.saving { background: var(--j-yellow) !important; }
.save-dot.err    { background: var(--j-coral) !important; }

/* ── TOAST ───────────────────────────────────────────────── */
#toast.ok   { background: linear-gradient(135deg,#6BCB77,#4EE8C0) !important; color: var(--navy) !important; }
#toast.err  { background: linear-gradient(135deg,#FF6B6B,#FF9A3C) !important; }
#toast.info { background: var(--grad-info) !important; }

/* ── SLIDER ──────────────────────────────────────────────── */
input[type=range] { accent-color: var(--j-purple) !important; }
.slider-val {
  background: var(--grad-hero) !important;
  color: #fff !important;
}

/* ── TABLEAUX PROCHES ────────────────────────────────────── */
.tableau-head {
  background: linear-gradient(135deg, var(--j-purple), #4D96FF) !important;
}
.add-row-btn {
  color: var(--j-purple) !important;
  border-color: var(--j-purple) !important;
}
.add-row-btn:hover {
  background: var(--j-purple) !important;
  color: #fff !important;
}

/* ── CONFETTI PERMANENT (fond) ───────────────────────────── */
.confetti-dot {
  position: fixed;
  width: 8px; height: 8px;
  border-radius: 50%;
  pointer-events: none;
  z-index: 0;
  animation: confDrift linear infinite;
  opacity: .18;
}
@keyframes confDrift {
  0%   { transform: translateY(-10px) rotate(0deg);   }
  100% { transform: translateY(110vh) rotate(720deg); }
}

/* ── ANIMATION ENTRÉE SECTION ────────────────────────────── */
.section.actif {
  animation: sectionBurst .4s cubic-bezier(.34,1.4,.64,1) both !important;
}
@keyframes sectionBurst {
  from { opacity:0; transform: scale(.96) translateY(16px); }
  to   { opacity:1; transform: none; }
}

/* ── RÉPONSE REMPLIE ─────────────────────────────────────── */
.qcard.rempli {
  border-top: 3px solid var(--j-green) !important;
  background: linear-gradient(145deg, #f0fff4, #fff) !important;
}
.qcard.rempli .q-num {
  background: var(--grad-success) !important;
}

/* ── FICHES PROMO ────────────────────────────────────────── */
.fiches-promo {
  background: var(--grad-hero) !important;
  border-radius: 16px !important;
  box-shadow: 0 8px 28px rgba(124,58,237,.3) !important;
}

/* ── BTN ICON HEADER ─────────────────────────────────────── */
.btn-icon {
  background: rgba(255,255,255,.2) !important;
  border-color: rgba(255,255,255,.3) !important;
  border-radius: 10px !important;
}
.btn-icon:hover {
  background: rgba(255,255,255,.35) !important;
}

/* ── TOP NAV ─────────────────────────────────────────────── */
.btn-nav-back {
  border-color: rgba(124,58,237,.3) !important;
  color: var(--j-purple) !important;
  border-radius: 10px !important;
}
.btn-nav-back:hover { background: var(--j-purple) !important; color: #fff !important; }

/* ── RESPONSIVE ──────────────────────────────────────────── */
@media(max-width:480px) {
  .section-head h2 { font-size: 1.5rem !important; }
  .q-arr-btn.q-prev, .q-arr-btn.q-next { width:48px!important; height:48px!important; }
}

/* ── SCROLLBAR JOLIE ─────────────────────────────────────── */
::-webkit-scrollbar { width: 6px; }
::-webkit-scrollbar-track { background: #f8f4ff; }
::-webkit-scrollbar-thumb { background: var(--j-purple); border-radius: 99px; }