/* =====================================================
   Formation IA Amigraf — Styles principaux
   Couleurs Amigraf : #E8471E → #D4337A → #7B2FBE
   Tous les sélecteurs préfixés #fia-app pour isolation
   ===================================================== */

@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:ital,wght@0,400;0,500;0,600;0,700;0,800;0,900;1,400&display=swap');

/* ════════════════════════════════════════════════════
   RESET ISOLÉ — neutralise les surcharges du thème
   ════════════════════════════════════════════════════ */
#fia-app,
#fia-app *,
#fia-app *::before,
#fia-app *::after {
  box-sizing: border-box !important;
  font-family: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif !important;
}
#fia-app * { margin: 0; padding: 0; }
#fia-app a { text-decoration: none; color: inherit; }
#fia-app ul, #fia-app ol { list-style: none; }
#fia-app img { max-width: 100%; display: block; }

/* ════════════════════════════════════════════════════
   CONTENEUR PRINCIPAL
   ════════════════════════════════════════════════════ */
#fia-app {
  background: #07090e !important;
  background-image: radial-gradient(ellipse 120% 60% at 50% 0%, #1e1b4b 0%, #07090e 65%) !important;
  min-height: 100vh;
  color: #f8fafc !important;
  position: relative;
  overflow-x: hidden;
}

/* ════════════════════════════════════════════════════
   BARRE DE PROGRESSION
   ════════════════════════════════════════════════════ */
#fia-progress-wrap {
  position: sticky !important;
  top: 0 !important;
  z-index: 200 !important;
  display: none;  /* masquée jusqu'à l'inscription */
  align-items: center;
  gap: 14px;
  padding: 10px 28px;
  background: rgba(7,9,14,.92) !important;
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border-bottom: 1px solid rgba(255,255,255,.08) !important;
}
#fia-progress-wrap.visible { display: flex !important; }

#fia-progress-bar-track {
  flex: 1;
  height: 5px;
  background: rgba(255,255,255,.1) !important;
  border-radius: 99px;
  overflow: hidden;
}
#fia-progress-bar {
  height: 100%;
  background: linear-gradient(90deg, #E8471E 0%, #D4337A 50%, #7B2FBE 100%) !important;
  border-radius: 99px;
  width: 0%;
  transition: width .6s cubic-bezier(.4,0,.2,1);
  box-shadow: 0 0 12px rgba(212,51,122,.5);
}
#fia-progress-label {
  font-size: .72rem !important;
  font-weight: 700 !important;
  color: #94a3b8 !important;
  white-space: nowrap;
  min-width: 88px;
  text-align: right;
}

/* ════════════════════════════════════════════════════
   STAGE
   ════════════════════════════════════════════════════ */
#fia-stage {
  display: flex;
  justify-content: center;
  padding: 0 16px 80px;
}
#fia-step-container {
  width: 100%;
  max-width: 820px;
  animation: fia-in .45s cubic-bezier(.4,0,.2,1) both;
}
@keyframes fia-in {
  from { opacity:0; transform:translateY(22px); }
  to   { opacity:1; transform:translateY(0); }
}

/* ════════════════════════════════════════════════════
   HERO REGISTRATION
   ════════════════════════════════════════════════════ */
#fia-hero {
  position: relative;
  overflow: hidden;
  padding: 70px 32px 56px;
  text-align: center;
  margin-bottom: 0;
}
#fia-hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse 80% 100% at 50% -10%, rgba(212,51,122,.18) 0%, transparent 70%);
  pointer-events: none;
}

/* Titre hero */
#fia-hero .hero-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 18px;
  border-radius: 99px;
  background: linear-gradient(135deg, #E8471E, #D4337A, #7B2FBE);
  font-size: .7rem !important;
  font-weight: 800 !important;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: #fff !important;
  margin-bottom: 22px;
  box-shadow: 0 4px 20px rgba(212,51,122,.35);
}
#fia-hero h1 {
  font-size: clamp(2.2rem, 6vw, 3.4rem) !important;
  font-weight: 900 !important;
  line-height: 1.1 !important;
  margin-bottom: 18px !important;
  background: linear-gradient(135deg, #fff 20%, #E8471E 50%, #7B2FBE 100%);
  -webkit-background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  background-clip: text !important;
}
#fia-hero p {
  font-size: 1.08rem !important;
  color: #94a3b8 !important;
  max-width: 520px;
  margin: 0 auto !important;
  line-height: 1.65 !important;
}

/* Pillules de features */
.fia-hero-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: center;
  margin-top: 24px;
}
.fia-hero-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 14px;
  border-radius: 99px;
  background: rgba(255,255,255,.06) !important;
  border: 1px solid rgba(255,255,255,.12) !important;
  font-size: .78rem !important;
  font-weight: 600 !important;
  color: #94a3b8 !important;
}

/* ════════════════════════════════════════════════════
   CARD PRINCIPALE
   ════════════════════════════════════════════════════ */
#fia-app .fia-card {
  background: rgba(18, 22, 38, 0.85) !important;
  border: 1px solid rgba(255,255,255,.11) !important;
  border-top: 1px solid rgba(255,255,255,.2) !important;
  border-left: 1px solid rgba(255,255,255,.2) !important;
  border-radius: 20px !important;
  padding: 32px !important;
  backdrop-filter: blur(20px) !important;
  -webkit-backdrop-filter: blur(20px) !important;
  box-shadow: 0 24px 64px rgba(0,0,0,.6), inset 0 1px 0 rgba(255,255,255,.08) !important;
  margin-bottom: 20px;
  position: relative;
  overflow: hidden;
}
#fia-app .fia-card::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(212,51,122,.4), transparent);
  pointer-events: none;
}

/* Card compacte */
#fia-app .fia-card-sm { padding: 20px 24px !important; }

/* ════════════════════════════════════════════════════
   FORMULAIRE — surcharge forte pour neutraliser le thème
   ════════════════════════════════════════════════════ */
#fia-app .fia-form-group { margin-bottom: 22px !important; }

#fia-app .fia-form-group label,
#fia-app label.fia-form-label {
  display: block !important;
  font-size: .72rem !important;
  font-weight: 800 !important;
  color: #94a3b8 !important;
  margin-bottom: 8px !important;
  text-transform: uppercase !important;
  letter-spacing: .1em !important;
  line-height: 1 !important;
}

#fia-app input.fia-input,
#fia-app textarea.fia-textarea {
  display: block !important;
  width: 100% !important;
  background: rgba(255,255,255,.05) !important;
  border: 1.5px solid rgba(255,255,255,.14) !important;
  border-radius: 12px !important;
  padding: 14px 18px !important;
  color: #f8fafc !important;
  font-size: .95rem !important;
  font-weight: 500 !important;
  line-height: 1.4 !important;
  outline: none !important;
  transition: border-color .25s, box-shadow .25s, background .25s !important;
  -webkit-appearance: none !important;
  appearance: none !important;
  box-shadow: none !important;
}
#fia-app input.fia-input::placeholder,
#fia-app textarea.fia-textarea::placeholder {
  color: rgba(148,163,184,.45) !important;
  font-weight: 400 !important;
}
#fia-app input.fia-input:focus,
#fia-app textarea.fia-textarea:focus {
  border-color: #D4337A !important;
  background: rgba(212,51,122,.06) !important;
  box-shadow: 0 0 0 3px rgba(212,51,122,.18), 0 0 20px rgba(212,51,122,.1) !important;
}
#fia-app textarea.fia-textarea {
  resize: vertical;
  min-height: 110px;
}

/* ════════════════════════════════════════════════════
   SÉLECTEUR DE DÉPARTEMENT
   ════════════════════════════════════════════════════ */
#fia-app .fia-dept-grid {
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap: 14px !important;
}
#fia-app .fia-dept-option {
  cursor: pointer;
  display: block !important;
}
#fia-app .fia-dept-option input[type="radio"] {
  display: none !important;
  width: 0 !important; height: 0 !important;
  position: absolute !important;
  opacity: 0 !important;
}
#fia-app .fia-dept-card {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  gap: 10px !important;
  padding: 28px 18px !important;
  border-radius: 16px !important;
  border: 2px solid rgba(255,255,255,.1) !important;
  background: rgba(255,255,255,.03) !important;
  transition: all .3s cubic-bezier(.4,0,.2,1) !important;
  text-align: center !important;
  position: relative !important;
  overflow: hidden !important;
  cursor: pointer;
}
#fia-app .fia-dept-card::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, #E8471E, #D4337A, #7B2FBE);
  opacity: 0;
  transition: opacity .3s;
  pointer-events: none;
}
#fia-app .fia-dept-card .dept-icon {
  font-size: 2.6rem !important;
  line-height: 1 !important;
  position: relative; z-index:1;
}
#fia-app .fia-dept-card .dept-name {
  font-weight: 800 !important;
  font-size: 1rem !important;
  color: #f8fafc !important;
  position: relative; z-index:1;
}
#fia-app .fia-dept-card .dept-desc {
  font-size: .78rem !important;
  color: #94a3b8 !important;
  line-height: 1.4 !important;
  position: relative; z-index:1;
}
#fia-app .fia-dept-option input:checked + .fia-dept-card {
  border-color: #D4337A !important;
  background: rgba(212,51,122,.08) !important;
  box-shadow: 0 0 0 1px #D4337A, 0 8px 32px rgba(212,51,122,.25) !important;
}
#fia-app .fia-dept-option input:checked + .fia-dept-card .dept-name,
#fia-app .fia-dept-option input:checked + .fia-dept-card .dept-desc {
  color: #f8fafc !important;
}
#fia-app .fia-dept-card:hover {
  border-color: rgba(212,51,122,.5) !important;
  background: rgba(212,51,122,.06) !important;
  transform: translateY(-3px);
}

/* ════════════════════════════════════════════════════
   BOUTONS
   ════════════════════════════════════════════════════ */
#fia-app .fia-btn {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  padding: 15px 30px !important;
  border-radius: 13px !important;
  font-size: .95rem !important;
  font-weight: 800 !important;
  cursor: pointer !important;
  transition: all .25s cubic-bezier(.4,0,.2,1) !important;
  border: none !important;
  text-decoration: none !important;
  letter-spacing: .01em !important;
  line-height: 1 !important;
  position: relative !important;
  overflow: hidden !important;
}
#fia-app .fia-btn-primary {
  background: linear-gradient(135deg, #E8471E 0%, #D4337A 50%, #7B2FBE 100%) !important;
  color: #fff !important;
  box-shadow: 0 6px 28px rgba(212,51,122,.4) !important;
}
#fia-app .fia-btn-primary:hover {
  transform: translateY(-2px) scale(1.02) !important;
  box-shadow: 0 12px 40px rgba(212,51,122,.55) !important;
  filter: brightness(1.1) !important;
}
#fia-app .fia-btn-ghost {
  background: rgba(255,255,255,.06) !important;
  color: #94a3b8 !important;
  border: 1px solid rgba(255,255,255,.15) !important;
}
#fia-app .fia-btn-ghost:hover {
  background: rgba(255,255,255,.1) !important;
  color: #f8fafc !important;
}
#fia-app .fia-btn:disabled {
  opacity: .4 !important;
  cursor: not-allowed !important;
  transform: none !important;
}
#fia-app .fia-btn-row {
  display: flex !important;
  gap: 12px !important;
  align-items: center !important;
  justify-content: flex-end !important;
  margin-top: 28px !important;
  flex-wrap: wrap !important;
}

/* ════════════════════════════════════════════════════
   BADGES & LABELS
   ════════════════════════════════════════════════════ */
#fia-app .fia-section-badge {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 6px 16px;
  border-radius: 99px;
  background: linear-gradient(135deg, #E8471E, #D4337A, #7B2FBE);
  font-size: .68rem !important;
  font-weight: 800 !important;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: #fff !important;
  margin-bottom: 16px;
  box-shadow: 0 4px 18px rgba(212,51,122,.3);
}
#fia-app .fia-step-title {
  font-size: clamp(1.7rem, 4vw, 2.5rem) !important;
  font-weight: 900 !important;
  line-height: 1.12 !important;
  margin-bottom: 12px !important;
  background: linear-gradient(135deg, #E8471E 0%, #D4337A 50%, #7B2FBE 100%);
  -webkit-background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  background-clip: text !important;
}
#fia-app .fia-step-subtitle {
  color: #94a3b8 !important;
  font-size: 1rem !important;
  line-height: 1.65 !important;
  margin-bottom: 32px !important;
}

/* ════════════════════════════════════════════════════
   MESSAGE D'ERREUR / SUCCÈS
   ════════════════════════════════════════════════════ */
#fia-app .fia-error-msg {
  background: rgba(248,113,113,.1) !important;
  border: 1px solid rgba(248,113,113,.35) !important;
  color: #f87171 !important;
  border-radius: 10px !important;
  padding: 11px 16px !important;
  font-size: .87rem !important;
  font-weight: 600 !important;
  margin-bottom: 18px !important;
  display: none;
}
#fia-app .fia-error-msg.visible { display: block !important; }

#fia-app .fia-success-flash {
  background: rgba(52,211,153,.1) !important;
  border: 1px solid rgba(52,211,153,.3) !important;
  color: #34d399 !important;
  border-radius: 10px !important;
  padding: 11px 16px !important;
  font-size: .87rem !important;
  font-weight: 600 !important;
  animation: fia-in .3s ease;
}

/* ════════════════════════════════════════════════════
   LOADER
   ════════════════════════════════════════════════════ */
#fia-loading {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  min-height: 50vh;
  gap: 20px;
  color: #94a3b8 !important;
  font-size: .9rem !important;
}
.fia-spinner {
  width: 44px; height: 44px;
  border: 3px solid rgba(255,255,255,.08);
  border-top-color: #D4337A;
  border-radius: 50%;
  animation: fia-spin .8s linear infinite;
}
@keyframes fia-spin { to { transform:rotate(360deg); } }

/* ════════════════════════════════════════════════════
   OVERLAY DE TRANSITION
   ════════════════════════════════════════════════════ */
#fia-overlay {
  position: fixed; inset: 0;
  background: #07090e;
  z-index: 9000;
  pointer-events: none;
  opacity: 0;
  transition: opacity .28s ease;
}
#fia-overlay.visible { opacity: 1 !important; pointer-events: all !important; }

/* ════════════════════════════════════════════════════
   MODULE : INTRODUCTION
   ════════════════════════════════════════════════════ */
#fia-app .fia-intro-grid {
  display: grid !important;
  grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)) !important;
  gap: 12px !important;
  margin: 22px 0 !important;
}
#fia-app .fia-intro-card {
  background: rgba(255,255,255,.04) !important;
  border: 1px solid rgba(255,255,255,.08) !important;
  border-radius: 12px !important;
  padding: 18px !important;
  transition: all .3s !important;
}
#fia-app .fia-intro-card:hover { border-color: rgba(212,51,122,.4) !important; transform:translateY(-3px); }
#fia-app .fia-intro-card .step-num {
  width: 30px; height: 30px;
  border-radius: 8px;
  background: linear-gradient(135deg, #E8471E, #7B2FBE);
  display: flex; align-items:center; justify-content:center;
  font-weight: 900 !important; font-size: .8rem !important; color: #fff !important;
  margin-bottom: 10px;
}
#fia-app .fia-intro-card .step-time { font-size: .72rem !important; color: #E8471E !important; font-weight: 700 !important; margin-bottom: 4px !important; }
#fia-app .fia-intro-card .step-label { font-weight: 700 !important; font-size: .88rem !important; color: #f8fafc !important; }

/* Emoji poll */
#fia-app .fia-emoji-poll { display:flex; justify-content:center; gap:10px; flex-wrap:wrap; margin:20px 0; }
#fia-app .fia-emoji-btn {
  display:flex; flex-direction:column; align-items:center; gap:6px;
  padding:16px 18px;
  background: rgba(255,255,255,.04) !important;
  border: 2px solid rgba(255,255,255,.08) !important;
  border-radius: 14px !important;
  cursor: pointer; color: #94a3b8 !important;
  font-size: .75rem !important; font-weight: 600 !important;
  min-width: 76px; text-align: center;
  transition: all .25s;
}
#fia-app .fia-emoji-btn .emoji { font-size: 1.8rem !important; line-height: 1; }
#fia-app .fia-emoji-btn:hover,
#fia-app .fia-emoji-btn.selected {
  border-color: #D4337A !important;
  background: rgba(212,51,122,.1) !important;
  color: #f8fafc !important;
}

/* ════════════════════════════════════════════════════
   MODULE : QUIZ LÉGAL
   ════════════════════════════════════════════════════ */
#fia-app .fia-quiz-header { display:flex; justify-content:space-between; align-items:center; margin-bottom:22px; flex-wrap:wrap; gap:8px; }
#fia-app .fia-quiz-counter { font-size:.82rem !important; font-weight:700 !important; color:#94a3b8 !important; }
#fia-app .fia-quiz-score-badge { background:rgba(251,191,36,.12) !important; border:1px solid rgba(251,191,36,.3) !important; border-radius:8px !important; padding:6px 14px !important; font-size:.82rem !important; font-weight:800 !important; color:#fbbf24 !important; }
#fia-app .fia-question-text { font-size:1.1rem !important; font-weight:700 !important; line-height:1.5 !important; margin-bottom:22px !important; color:#f8fafc !important; }
#fia-app .fia-options { display:flex; flex-direction:column; gap:10px; }
#fia-app .fia-option {
  display:flex; align-items:flex-start; gap:14px;
  padding: 15px 18px !important;
  border-radius: 12px !important;
  border: 1.5px solid rgba(255,255,255,.1) !important;
  background: rgba(255,255,255,.03) !important;
  cursor: pointer;
  font-size: .9rem !important; font-weight: 500 !important; color: #94a3b8 !important;
  text-align: left; width: 100%;
  transition: all .2s;
}
#fia-app .fia-option:hover:not(.locked) { border-color:rgba(212,51,122,.5) !important; background:rgba(212,51,122,.07) !important; color:#f8fafc !important; }
#fia-app .fia-option .opt-letter {
  width:28px; height:28px; flex-shrink:0; border-radius:7px;
  background:rgba(255,255,255,.08) !important; display:flex; align-items:center; justify-content:center;
  font-weight:900 !important; font-size:.78rem !important; color:#94a3b8 !important;
}
#fia-app .fia-option.correct { border-color:#34d399 !important; background:rgba(52,211,153,.1) !important; color:#34d399 !important; }
#fia-app .fia-option.correct .opt-letter { background:#34d399 !important; color:#fff !important; }
#fia-app .fia-option.wrong  { border-color:#f87171 !important; background:rgba(248,113,113,.08) !important; color:#64748b !important; opacity:.65; }
#fia-app .fia-option.wrong .opt-letter  { background:#f87171 !important; color:#fff !important; }
#fia-app .fia-explanation {
  margin-top:16px; padding:15px 18px;
  border-radius:12px; background:rgba(255,255,255,.04) !important;
  border-left:4px solid #7B2FBE !important;
  font-size:.87rem !important; color:#94a3b8 !important; line-height:1.6 !important;
  animation: fia-in .3s ease;
}
#fia-app .fia-explanation strong { color:#D4337A !important; }
#fia-app .fia-quiz-dots { display:flex; justify-content:center; gap:6px; margin:18px 0 6px; }
#fia-app .fia-quiz-dot { width:8px; height:8px; border-radius:50%; background:rgba(255,255,255,.12); transition:all .3s; }
#fia-app .fia-quiz-dot.done-correct { background:#34d399 !important; }
#fia-app .fia-quiz-dot.done-wrong   { background:#f87171 !important; }
#fia-app .fia-quiz-dot.current      { background:#D4337A !important; width:20px; border-radius:4px; }

/* ════════════════════════════════════════════════════
   MODULE : MATCHING GAME
   ════════════════════════════════════════════════════ */
#fia-app .fia-match-intro { font-size:.88rem !important; color:#94a3b8 !important; margin-bottom:22px; line-height:1.6 !important; }
#fia-app .fia-match-tabs { display:flex; gap:8px; margin-bottom:22px; border-bottom:1px solid rgba(255,255,255,.08); padding-bottom:12px; }
#fia-app .fia-match-tab { padding:8px 16px; border-radius:8px; font-size:.8rem !important; font-weight:700 !important; cursor:pointer; color:#94a3b8 !important; background:transparent !important; border:1px solid rgba(255,255,255,.1) !important; transition:all .2s; }
#fia-app .fia-match-tab.active { background:linear-gradient(135deg,#E8471E,#7B2FBE) !important; color:#fff !important; border-color:transparent !important; }
#fia-app .fia-company-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(210px,1fr)); gap:12px; margin-bottom:28px; }
#fia-app .fia-company-card {
  padding:16px; border-radius:12px;
  border:1.5px solid rgba(255,255,255,.09) !important;
  background:rgba(255,255,255,.03) !important;
  cursor:pointer; transition:all .25s; position:relative; overflow:hidden;
}
#fia-app .fia-company-card::before { content:''; position:absolute; top:0; left:0; right:0; height:3px; background:linear-gradient(90deg,#E8471E,#7B2FBE); opacity:0; transition:opacity .2s; }
#fia-app .fia-company-card:hover::before,
#fia-app .fia-company-card.selected::before { opacity:1; }
#fia-app .fia-company-card.selected { border-color:#D4337A !important; background:rgba(212,51,122,.09) !important; }
#fia-app .fia-company-card .company-name { font-weight:800 !important; font-size:.95rem !important; color:#f8fafc !important; margin-bottom:4px; }
#fia-app .fia-company-card .company-country { font-size:.76rem !important; color:#64748b !important; }
#fia-app .fia-match-choices { display:flex; flex-direction:column; gap:8px; }
#fia-app .fia-match-choice {
  padding:12px 16px; border-radius:10px; width:100%; text-align:left;
  border:1.5px solid rgba(255,255,255,.09) !important;
  background:rgba(255,255,255,.03) !important;
  cursor:pointer; font-size:.87rem !important; font-weight:600 !important; color:#94a3b8 !important; transition:all .2s;
}
#fia-app .fia-match-choice:hover:not(.locked) { border-color:#D4337A !important; color:#f8fafc !important; background:rgba(212,51,122,.07) !important; }
#fia-app .fia-match-choice.correct { border-color:#34d399 !important; color:#34d399 !important; background:rgba(52,211,153,.08) !important; }
#fia-app .fia-match-choice.wrong   { border-color:#f87171 !important; color:#f87171 !important; background:rgba(248,113,113,.07) !important; opacity:.6; }

/* Reveal résultats */
#fia-app .fia-company-reveal { padding:16px 18px; border-radius:12px; border:1px solid rgba(255,255,255,.09) !important; background:rgba(255,255,255,.03) !important; margin-bottom:10px; animation:fia-in .3s ease; }
#fia-app .fia-company-reveal .rev-header { display:flex; justify-content:space-between; align-items:center; margin-bottom:8px; flex-wrap:wrap; gap:6px; }
#fia-app .fia-company-reveal .rev-name { font-weight:800 !important; font-size:.95rem !important; color:#f8fafc !important; }
#fia-app .fia-company-reveal .rev-badge { font-size:.72rem !important; padding:3px 8px; border-radius:6px; font-weight:700 !important; }
#fia-app .fia-company-reveal .rev-badge.correct { background:rgba(52,211,153,.15) !important; color:#34d399 !important; }
#fia-app .fia-company-reveal .rev-law { font-size:.87rem !important; color:#fbbf24 !important; font-weight:700 !important; margin:6px 0; }
#fia-app .fia-company-reveal .rev-detail { font-size:.8rem !important; color:#94a3b8 !important; line-height:1.5 !important; }
#fia-app .fia-company-reveal .rev-risk { font-size:.8rem !important; color:#94a3b8 !important; border-left:3px solid #E8471E !important; padding-left:10px; margin-top:8px; line-height:1.5; }
#fia-app .fia-company-reveal .rev-optout { margin-top:8px; font-size:.76rem !important; color:#34d399 !important; background:rgba(52,211,153,.07) !important; border-radius:6px; padding:6px 10px; }

/* CGU box */
#fia-app .fia-cgu-box { background:rgba(251,191,36,.07) !important; border:1px solid rgba(251,191,36,.25) !important; border-radius:14px !important; padding:22px !important; margin:24px 0; }
#fia-app .fia-cgu-box .cgu-title { font-weight:800 !important; font-size:1rem !important; color:#fbbf24 !important; margin-bottom:12px !important; display:flex; align-items:center; gap:8px; }
#fia-app .fia-cgu-box ul { display:flex; flex-direction:column; gap:8px; }
#fia-app .fia-cgu-box li { display:flex; gap:10px; font-size:.85rem !important; color:#94a3b8 !important; line-height:1.5 !important; }
#fia-app .fia-cgu-box li::before { content:'→'; color:#fbbf24 !important; font-weight:700 !important; flex-shrink:0; }

/* ════════════════════════════════════════════════════
   MODULE : MÉTHODE 5P
   ════════════════════════════════════════════════════ */
#fia-app .fia-5p-grid { display:flex; flex-direction:column; gap:14px; }
#fia-app .fia-5p-card { display:flex; gap:18px; padding:20px !important; border-radius:14px !important; border:1px solid rgba(255,255,255,.08) !important; background:rgba(255,255,255,.03) !important; transition:all .3s !important; }
#fia-app .fia-5p-card:hover { border-color:rgba(212,51,122,.35) !important; background:rgba(212,51,122,.04) !important; }
#fia-app .fia-5p-card .p-letter { width:48px; height:48px; flex-shrink:0; border-radius:12px; background:linear-gradient(135deg,#E8471E,#7B2FBE) !important; display:flex; align-items:center; justify-content:center; font-weight:900 !important; font-size:1.3rem !important; color:#fff !important; box-shadow:0 4px 16px rgba(212,51,122,.25); }
#fia-app .fia-5p-card .p-name { font-weight:800 !important; font-size:.98rem !important; color:#f8fafc !important; margin-bottom:4px; display:flex; align-items:center; gap:7px; }
#fia-app .fia-5p-card .p-desc { font-size:.86rem !important; color:#94a3b8 !important; line-height:1.5 !important; margin-bottom:8px; }
#fia-app .fia-5p-card .p-example { font-size:.8rem !important; color:#D4337A !important; font-style:italic; padding:8px 12px; background:rgba(212,51,122,.07) !important; border-radius:8px; }

/* ════════════════════════════════════════════════════
   MODULE : CHALLENGE IMAGE
   ════════════════════════════════════════════════════ */
#fia-app .fia-challenge-target { border-radius:16px !important; overflow:hidden; margin-bottom:24px; border:1px solid rgba(255,255,255,.12) !important; }
#fia-app .fia-target-visual { background:linear-gradient(135deg,#1a0a00,#2d1400,#1a0a00) !important; height:200px; display:flex; align-items:center; justify-content:center; flex-direction:column; gap:10px; }
#fia-app .fia-target-visual .target-icon { font-size:3rem !important; }
#fia-app .fia-target-visual .target-label { font-size:.75rem !important; color:rgba(255,255,255,.4) !important; font-weight:600 !important; text-transform:uppercase; letter-spacing:.1em; }
#fia-app .fia-target-desc { padding:16px 20px !important; background:rgba(255,255,255,.04) !important; font-size:.86rem !important; color:#94a3b8 !important; line-height:1.6 !important; border-top:1px solid rgba(255,255,255,.08) !important; }

/* Variante avec vraie photo cible */
#fia-app .fia-challenge-target--photo { border-color:rgba(232,71,30,.3) !important; }
#fia-app .fia-target-label-row { display:flex; align-items:center; flex-wrap:wrap; gap:10px; padding:14px 20px !important; background:rgba(232,71,30,.08) !important; border-bottom:1px solid rgba(232,71,30,.2) !important; }
#fia-app .target-badge { background:linear-gradient(135deg,var(--ami-orange),var(--ami-pink)) !important; color:#fff !important; font-size:.78rem !important; font-weight:800 !important; padding:4px 12px; border-radius:20px; white-space:nowrap; }
#fia-app .target-hint { font-size:.82rem !important; color:var(--text-muted) !important; font-style:italic; }
#fia-app .fia-target-photo-wrap { background:#000 !important; display:flex; justify-content:center; align-items:center; padding:16px; }
#fia-app .fia-target-photo { max-width:100% !important; max-height:320px !important; border-radius:10px !important; object-fit:contain !important; box-shadow:0 8px 32px rgba(0,0,0,.5) !important; }
#fia-app .fia-p-field.fia-form-group {}
#fia-app .fia-p-field label { display:flex; align-items:center; gap:8px; }
#fia-app .fia-p-field .p-tag { background:linear-gradient(135deg,#E8471E,#7B2FBE) !important; color:#fff !important; width:22px; height:22px; border-radius:6px; display:inline-flex; align-items:center; justify-content:center; font-size:.7rem !important; font-weight:900 !important; flex-shrink:0; }

/* Score */
#fia-app .fia-score-reveal { display:flex; flex-direction:column; align-items:center; gap:16px; padding:32px !important; border-radius:16px !important; background:rgba(255,255,255,.03) !important; border:1px solid rgba(255,255,255,.08) !important; text-align:center; animation:fia-in .5s ease; }
#fia-app .fia-score-circle { width:110px; height:110px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:1.8rem !important; font-weight:900 !important; color:#f8fafc !important; position:relative; background:conic-gradient(from 0deg, #E8471E, #D4337A, #7B2FBE calc(var(--pct)), rgba(255,255,255,.08) calc(var(--pct))); }
#fia-app .fia-score-circle::after { content:''; position:absolute; inset:8px; background:#0e1118 !important; border-radius:50%; z-index:0; }
#fia-app .fia-score-circle .score-val { position:relative; z-index:1; }

/* ════════════════════════════════════════════════════
   MODULE : DROITS D'AUTEUR (étape 4)
   ════════════════════════════════════════════════════ */
#fia-app .fia-auth-tabs { display:flex; gap:8px; flex-wrap:wrap; margin-bottom:4px; }
#fia-app .fia-auth-tab { padding:8px 16px; border-radius:8px; font-size:.82rem !important; font-weight:700 !important; cursor:pointer; border:1px solid rgba(255,255,255,.12) !important; background:rgba(255,255,255,.04) !important; color:#94a3b8 !important; transition:all .2s; }
#fia-app .fia-auth-tab.active { background:linear-gradient(135deg,#E8471E,#D4337A) !important; color:#fff !important; border-color:transparent !important; }
#fia-app .fia-auth-table { width:100%; border-collapse:collapse; font-size:.82rem !important; }
#fia-app .fia-auth-table th { padding:10px 12px; text-align:left; font-size:.75rem !important; font-weight:800 !important; color:#94a3b8 !important; text-transform:uppercase; letter-spacing:.05em; border-bottom:1px solid rgba(255,255,255,.1); }
#fia-app .fia-auth-table td { padding:10px 12px; border-bottom:1px solid rgba(255,255,255,.06); vertical-align:top; line-height:1.45; }
#fia-app .fia-auth-table td strong { color:#f8fafc !important; }
#fia-app .auth-cell { font-size:.78rem !important; color:#94a3b8 !important; }
#fia-app .auth-green  { color:#34d399 !important; }
#fia-app .auth-yellow { color:#fbbf24 !important; }
#fia-app .auth-red    { color:#f87171 !important; }
#fia-app .fia-law-card { display:flex; gap:14px; align-items:flex-start; padding:14px; background:rgba(255,255,255,.03); border-radius:10px; margin-bottom:10px; border:1px solid rgba(255,255,255,.06); }
#fia-app .fia-law-card .law-icon { font-size:1.5rem; flex-shrink:0; }
#fia-app .fia-law-card .law-title { font-weight:800 !important; font-size:.88rem !important; color:#f8fafc !important; margin-bottom:4px; }
#fia-app .fia-law-card .law-text  { font-size:.8rem !important; color:#94a3b8 !important; line-height:1.55; }

/* ════════════════════════════════════════════════════
   MODULE : IMAGE CHALLENGE (étape 6)
   ════════════════════════════════════════════════════ */
#fia-app .fia-impact-bar { display:flex; gap:0; justify-content:center; background:rgba(255,255,255,.04); border-radius:12px; overflow:hidden; border:1px solid rgba(255,255,255,.08); margin:12px 0; }
#fia-app .impact-item { flex:1; text-align:center; padding:12px 8px; border-right:1px solid rgba(255,255,255,.06); }
#fia-app .impact-item:last-child { border-right:none; }
#fia-app .impact-val { display:block; font-size:1.1rem !important; font-weight:900 !important; color:#D4337A !important; }
#fia-app .impact-lab { display:block; font-size:.68rem !important; color:#64748b !important; margin-top:2px; text-transform:uppercase; letter-spacing:.04em; }
#fia-app .fia-spinner-sm { display:inline-block; width:14px; height:14px; border:2px solid rgba(255,255,255,.3); border-top-color:#fff; border-radius:50%; animation:fia-spin .7s linear infinite; vertical-align:middle; margin-right:6px; }

/* ════════════════════════════════════════════════════
   MODULE : WORKFLOW INTERACTIF (étape 7)
   ════════════════════════════════════════════════════ */
#fia-app .fia-wf-pain { display:flex; flex-direction:column; gap:4px; margin-top:8px; padding:10px 14px; border-radius:10px; cursor:pointer; background:rgba(248,113,113,.08); border:1px solid rgba(248,113,113,.2); transition:all .3s ease; }
#fia-app .fia-wf-pain:hover:not(.pain-resolved) { background:rgba(248,113,113,.15); border-color:rgba(248,113,113,.4); transform:translateX(4px); }
#fia-app .fia-wf-pain .pain-text  { font-size:.78rem !important; color:#f87171 !important; font-weight:700; }
#fia-app .fia-wf-pain .pain-hint  { font-size:.68rem !important; color:#94a3b8 !important; }
#fia-app .fia-wf-pain.pain-resolved { background:rgba(52,211,153,.08) !important; border-color:rgba(52,211,153,.25) !important; cursor:default; animation:fia-resolve-in .4s ease; }
#fia-app .fia-wf-pain .pain-sol   { font-size:.78rem !important; color:#34d399 !important; font-weight:700; }
#fia-app .fia-wf-step.wf-step-done .fia-wf-step-title { color:#34d399 !important; }
#fia-app .fia-wf-step-dot.dot-done { background:rgba(52,211,153,.2) !important; color:#34d399 !important; border-color:rgba(52,211,153,.4) !important; box-shadow:0 0 12px rgba(52,211,153,.3); }
@keyframes fia-resolve-in { from{opacity:0;transform:translateX(-8px);}to{opacity:1;transform:translateX(0);} }

/* ════════════════════════════════════════════════════
   MODULE : KAHOOT
   ════════════════════════════════════════════════════ */
#fia-app .fia-kahoot-box { display:flex; flex-direction:column; align-items:center; gap:20px; padding:40px 24px !important; text-align:center; }
#fia-app .fia-kahoot-box .kahoot-icon { font-size:3.5rem !important; }
#fia-app .fia-kahoot-box h2 { font-size:1.5rem !important; font-weight:900 !important; color:#f8fafc !important; }
#fia-app .fia-kahoot-box p  { color:#94a3b8 !important; max-width:460px; line-height:1.6 !important; font-size:.92rem !important; }
#fia-app .fia-kahoot-steps { display:flex; flex-direction:column; gap:10px; width:100%; max-width:420px; text-align:left; }
#fia-app .fia-kahoot-step { display:flex; gap:14px; align-items:flex-start; padding:14px 16px !important; background:rgba(255,255,255,.04) !important; border-radius:10px !important; }
#fia-app .fia-kahoot-step .ks-num { width:28px; height:28px; border-radius:8px; background:linear-gradient(135deg,#E8471E,#7B2FBE) !important; display:flex; align-items:center; justify-content:center; font-weight:900 !important; font-size:.8rem !important; color:#fff !important; flex-shrink:0; }
#fia-app .fia-kahoot-step .ks-text { font-size:.87rem !important; color:#94a3b8 !important; line-height:1.5 !important; }
#fia-app .fia-kahoot-step .ks-text strong { color:#f8fafc !important; display:block; margin-bottom:2px; }
#fia-app .fia-kahoot-validate { display:flex; flex-direction:column; align-items:center; gap:12px; margin-top:10px; }
#fia-app .fia-validate-check { display:flex; align-items:center; gap:10px; cursor:pointer; font-size:.9rem !important; color:#94a3b8 !important; }
#fia-app .fia-validate-check input { accent-color:#D4337A; width:18px; height:18px; cursor:pointer; }

/* ════════════════════════════════════════════════════
   MODULE : WORKFLOW
   ════════════════════════════════════════════════════ */
#fia-app .fia-workflow-timeline { display:flex; flex-direction:column; gap:0; position:relative; }
#fia-app .fia-workflow-timeline::before { content:''; position:absolute; left:20px; top:0; bottom:0; width:2px; background:linear-gradient(to bottom,transparent,rgba(255,255,255,.12) 5%,rgba(255,255,255,.12) 95%,transparent); }
#fia-app .fia-wf-step { display:flex; gap:18px; padding:16px 0 16px 0; position:relative; }
#fia-app .fia-wf-step-dot { width:42px; height:42px; flex-shrink:0; border-radius:12px; display:flex; align-items:center; justify-content:center; font-size:1.1rem !important; position:relative; z-index:1; }
#fia-app .fia-wf-step-dot.yellow { background:rgba(251,191,36,.15) !important; color:#fbbf24 !important; border:1px solid rgba(251,191,36,.3) !important; }
#fia-app .fia-wf-step-dot.green  { background:rgba(52,211,153,.15) !important; color:#34d399 !important; border:1px solid rgba(52,211,153,.3) !important; }
#fia-app .fia-wf-step-dot.blue   { background:rgba(96,165,250,.15) !important; color:#60a5fa !important; border:1px solid rgba(96,165,250,.3) !important; }
#fia-app .fia-wf-step-dot.orange { background:rgba(251,146,60,.15) !important; color:#fb923c !important; border:1px solid rgba(251,146,60,.3) !important; }
#fia-app .fia-wf-step-dot.purple { background:rgba(168,85,247,.15) !important; color:#a855f7 !important; border:1px solid rgba(168,85,247,.3) !important; }
#fia-app .fia-wf-step-body { flex:1; padding-top:6px; }
#fia-app .fia-wf-step-title { font-weight:800 !important; font-size:.93rem !important; color:#f8fafc !important; margin-bottom:4px; }
#fia-app .fia-wf-step-desc  { font-size:.8rem !important; color:#94a3b8 !important; line-height:1.5 !important; }
#fia-app .fia-wf-step-tags  { display:flex; flex-wrap:wrap; gap:6px; margin-top:8px; }
#fia-app .fia-tag { display:inline-flex; align-items:center; gap:4px; padding:4px 10px; border-radius:6px; font-size:.7rem !important; font-weight:700 !important; }
#fia-app .fia-tag-ia      { background:rgba(212,51,122,.12) !important; color:#D4337A !important; border:1px solid rgba(212,51,122,.25) !important; }
#fia-app .fia-tag-action  { background:rgba(52,211,153,.1) !important;  color:#34d399 !important; border:1px solid rgba(52,211,153,.25) !important; }
#fia-app .fia-tag-livrable{ background:rgba(96,165,250,.1) !important;  color:#60a5fa !important; border:1px solid rgba(96,165,250,.25) !important; }
#fia-app .fia-tag-warning { background:rgba(248,113,113,.1) !important; color:#f87171 !important; border:1px solid rgba(248,113,113,.25) !important; }
#fia-app .wf-toggle-btn { font-size:.73rem !important; color:#D4337A !important; cursor:pointer; background:none !important; border:none !important; font-weight:700 !important; padding:0; margin-top:6px; display:flex; align-items:center; gap:4px; }

/* ════════════════════════════════════════════════════
   MODULE : CERTIFICAT
   ════════════════════════════════════════════════════ */
#fia-app .fia-certificate { text-align:center; padding:44px 28px !important; display:flex; flex-direction:column; align-items:center; gap:16px; }
#fia-app .fia-cert-badge { width:100px; height:100px; border-radius:50%; background:linear-gradient(135deg,#E8471E,#D4337A,#7B2FBE) !important; display:flex; align-items:center; justify-content:center; font-size:3rem !important; box-shadow:0 0 40px rgba(212,51,122,.4),0 0 80px rgba(123,47,190,.2) !important; animation:fia-pulse 2s ease-in-out infinite; }
@keyframes fia-pulse { 0%,100%{box-shadow:0 0 40px rgba(212,51,122,.4),0 0 80px rgba(123,47,190,.2);}50%{box-shadow:0 0 60px rgba(212,51,122,.6),0 0 100px rgba(123,47,190,.35);} }
#fia-app .fia-cert-name { font-size:1.8rem !important; font-weight:900 !important; background:linear-gradient(135deg,#E8471E,#D4337A,#7B2FBE); -webkit-background-clip:text !important; -webkit-text-fill-color:transparent !important; background-clip:text !important; }
#fia-app .fia-cert-subtitle { font-size:.95rem !important; color:#94a3b8 !important; }
#fia-app .fia-cert-stats { display:flex; gap:18px; justify-content:center; flex-wrap:wrap; margin:8px 0; }
#fia-app .fia-cert-stat { background:rgba(255,255,255,.05) !important; border-radius:10px; padding:12px 20px; text-align:center; }
#fia-app .fia-cert-stat .s-num   { font-size:1.5rem !important; font-weight:900 !important; color:#D4337A !important; display:block; }
#fia-app .fia-cert-stat .s-label { font-size:.73rem !important; color:#94a3b8 !important; display:block; }

/* ════════════════════════════════════════════════════
   TOASTS
   ════════════════════════════════════════════════════ */
#fia-toast-wrap { position:fixed; bottom:24px; right:24px; z-index:9999; display:flex; flex-direction:column; gap:10px; pointer-events:none; }
#fia-app ~ #fia-toast-wrap,
#fia-toast-wrap { pointer-events: none; }
.fia-toast { padding:12px 20px; border-radius:10px; font-family:'Plus Jakarta Sans',sans-serif !important; font-size:.87rem !important; font-weight:600 !important; color:#fff !important; animation:fia-toast-in .3s ease; box-shadow:0 8px 28px rgba(0,0,0,.5) !important; max-width:320px; pointer-events:all; }
.fia-toast-success { background:linear-gradient(135deg,#16a34a,#15803d) !important; }
.fia-toast-error   { background:linear-gradient(135deg,#dc2626,#b91c1c) !important; }
.fia-toast-info    { background:linear-gradient(135deg,#E8471E,#7B2FBE) !important; }
@keyframes fia-toast-in { from{opacity:0;transform:translateX(40px);}to{opacity:1;transform:translateX(0);} }

/* ════════════════════════════════════════════════════
   CONFETTIS
   ════════════════════════════════════════════════════ */
.fia-confetti { position:fixed; top:0; left:0; right:0; pointer-events:none; z-index:9998; overflow:hidden; height:100vh; }
.fia-confetti-piece { position:absolute; top:-20px; width:8px; height:12px; border-radius:2px; animation:fia-confetti-fall linear forwards; }
@keyframes fia-confetti-fall { to{transform:translateY(110vh) rotate(720deg);opacity:0;} }

/* ════════════════════════════════════════════════════
   WORKFLOW INTERACTIF — Animations & effets v2
   ════════════════════════════════════════════════════ */

/* ── Tutoriel UX — callout interactif ────────────── */
#fia-app .fia-wf-tutorial {
  display: flex !important;
  align-items: flex-start !important;
  gap: 16px !important;
  background: rgba(232,71,30,.08) !important;
  border: 1px solid rgba(232,71,30,.28) !important;
  border-radius: 14px !important;
  padding: 18px 20px !important;
  margin-bottom: 16px !important;
  position: relative !important;
  overflow: hidden !important;
  animation: fia-tuto-in .5s ease !important;
}
@keyframes fia-tuto-in {
  from { opacity:0; transform:translateY(-10px); }
  to   { opacity:1; transform:translateY(0); }
}
/* Pastille pulsante rouge à gauche */
#fia-app .wf-tuto-pulse {
  width: 20px !important; height: 20px !important;
  border-radius: 50% !important;
  background: #E8471E !important;
  flex-shrink: 0 !important;
  margin-top: 2px !important;
  box-shadow: 0 0 0 0 rgba(232,71,30,.6) !important;
  animation: fia-tuto-pulse 1.6s ease-in-out infinite !important;
}
@keyframes fia-tuto-pulse {
  0%, 100% { box-shadow: 0 0 0  0 rgba(232,71,30,.5); }
  50%       { box-shadow: 0 0 0 10px rgba(232,71,30,0); }
}
#fia-app .wf-tuto-title {
  font-weight: 800 !important;
  font-size: .9rem !important;
  color: #f8fafc !important;
  margin-bottom: 6px !important;
}
#fia-app .wf-tuto-text {
  font-size: .82rem !important;
  color: #94a3b8 !important;
  line-height: 1.6 !important;
}
#fia-app .wf-tuto-text strong { color: #f8fafc !important; }

/* ── Bouton verrouillé ────────────────────────────── */
#fia-app .fia-btn-locked-wrap {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  gap: 8px !important;
  width: 100% !important;
}
#fia-app .fia-btn.fia-btn-locked {
  background: rgba(255,255,255,.06) !important;
  border: 1px dashed rgba(255,255,255,.2) !important;
  color: #64748b !important;
  cursor: not-allowed !important;
  opacity: .85 !important;
  width: 100% !important;
  justify-content: center !important;
  font-size: .88rem !important;
}
#fia-app .fia-btn-locked-hint {
  font-size: .74rem !important;
  color: #475569 !important;
  text-align: center !important;
  font-style: italic !important;
}

/* ── Déverrouillage — animation d'apparition ─────── */
@keyframes fia-btn-unlock {
  0%   { opacity:0; transform:scale(.92) translateY(6px); }
  60%  { transform:scale(1.04) translateY(-2px); }
  100% { opacity:1; transform:scale(1) translateY(0); }
}
#fia-app .fia-btn.fia-btn-unlock-anim {
  animation: fia-btn-unlock .5s cubic-bezier(.34,1.56,.64,1) !important;
  box-shadow: 0 0 0 0 rgba(212,51,122,.5) !important;
  animation: fia-btn-unlock .5s cubic-bezier(.34,1.56,.64,1),
             fia-btn-glow 1.2s ease .5s 3 !important;
}
@keyframes fia-btn-glow {
  0%, 100% { box-shadow: 0 4px 20px rgba(212,51,122,.3); }
  50%       { box-shadow: 0 4px 40px rgba(212,51,122,.7), 0 0 60px rgba(123,47,190,.3); }
}

/* ── Reveal progressif des cartes workflow ────────── */
@keyframes fia-wf-reveal {
  from { opacity:0; transform:translateX(28px); }
  to   { opacity:1; transform:translateX(0); }
}

/* ── Zen header ───────────────────────────────────── */
#fia-app .fia-zen-header {
  background: rgba(18,22,38,.9) !important;
  border: 1px solid rgba(255,255,255,.1) !important;
  border-radius: 16px !important;
  padding: 20px 24px !important;
  margin-bottom: 20px !important;
  position: sticky !important;
  top: 56px !important;
  z-index: 100 !important;
  backdrop-filter: blur(16px) !important;
  -webkit-backdrop-filter: blur(16px) !important;
  transition: border-color .5s, box-shadow .5s !important;
}
#fia-app .fia-zen-header.zen-header-done {
  border-color: rgba(52,211,153,.4) !important;
  box-shadow: 0 0 32px rgba(52,211,153,.15) !important;
}
#fia-app .zen-stats {
  display: flex !important;
  align-items: center !important;
  gap: 24px !important;
  margin-bottom: 14px !important;
}
#fia-app .zen-stat {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
}
#fia-app .zen-icon { font-size: 1.6rem !important; }
#fia-app .zen-val {
  display: block !important;
  font-size: 1.55rem !important;
  font-weight: 900 !important;
  color: #34d399 !important;
  line-height: 1.1 !important;
  transition: color .3s !important;
}
#fia-app .zen-val-bump {
  animation: fia-val-bump .5s ease !important;
}
@keyframes fia-val-bump {
  0%   { transform: scale(1); }
  40%  { transform: scale(1.22); color: #fbbf24; }
  100% { transform: scale(1); }
}
#fia-app .zen-lab {
  display: block !important;
  font-size: .72rem !important;
  color: #64748b !important;
  text-transform: uppercase !important;
  letter-spacing: .05em !important;
}
#fia-app .zen-divider {
  width: 1px !important;
  height: 40px !important;
  background: rgba(255,255,255,.1) !important;
  flex-shrink: 0 !important;
}
/* Barre de progression zen */
#fia-app .zen-bar-track {
  height: 8px !important;
  background: rgba(255,255,255,.07) !important;
  border-radius: 4px !important;
  overflow: hidden !important;
  position: relative !important;
}
#fia-app .zen-bar-fill {
  height: 100% !important;
  background: linear-gradient(90deg, #10b981, #34d399, #6ee7b7) !important;
  border-radius: 4px !important;
  transition: width .55s cubic-bezier(.34,1.56,.64,1) !important;
  position: relative !important;
}
#fia-app .zen-bar-fill::after {
  content: '' !important;
  position: absolute !important;
  right: 0 !important; top: 0 !important; bottom: 0 !important;
  width: 20px !important;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.5)) !important;
  animation: fia-bar-shine 1.5s ease-in-out infinite !important;
}
@keyframes fia-bar-shine {
  0%, 100% { opacity: 0; }
  50%       { opacity: 1; }
}
#fia-app .zen-footer-msg {
  font-size: .78rem !important;
  color: #64748b !important;
  margin-top: 8px !important;
  text-align: center !important;
  transition: color .5s !important;
}
#fia-app .zen-header-done .zen-footer-msg {
  color: #34d399 !important;
  font-weight: 700 !important;
}

/* ── Pain cards — état par défaut ─────────────────── */
#fia-app .fia-wf-pain {
  margin-top: 8px !important;
  padding: 10px 14px !important;
  border-radius: 10px !important;
  cursor: pointer !important;
  background: rgba(248,113,113,.07) !important;
  border: 1px solid rgba(248,113,113,.22) !important;
  transition: background .2s, border-color .2s, transform .15s !important;
  position: relative !important;
  overflow: hidden !important;
  user-select: none !important;
}
#fia-app .fia-wf-pain:hover:not(.pain-resolved):not(.pain-exiting) {
  background: rgba(248,113,113,.14) !important;
  border-color: rgba(248,113,113,.45) !important;
  transform: translateX(5px) !important;
}
#fia-app .fia-wf-pain .pain-content { position: relative; z-index: 1; }
#fia-app .fia-wf-pain .pain-text  {
  display: block !important;
  font-size: .78rem !important; font-weight: 700 !important;
  color: #f87171 !important;
}
#fia-app .fia-wf-pain .pain-cta {
  display: block !important;
  font-size: .68rem !important;
  color: #94a3b8 !important;
  margin-top: 3px !important;
  opacity: .7 !important;
}

/* Ripple interne du pain (pulsation rouge pour attirer le clic) */
#fia-app .pain-ripple {
  position: absolute !important;
  inset: 0 !important;
  border-radius: 10px !important;
  pointer-events: none !important;
  animation: fia-pain-pulse 2.4s ease-in-out infinite !important;
}
@keyframes fia-pain-pulse {
  0%, 100% { box-shadow: inset 0 0 0 0 rgba(248,113,113,0); }
  50%       { box-shadow: inset 0 0 0 2px rgba(248,113,113,.35); }
}

/* ── Pain exit — shake + dissolve ─────────────────── */
@keyframes fia-pain-exit {
  0%   { transform: translateX(0) scale(1);    opacity: 1; }
  12%  { transform: translateX(-7px) scale(1); }
  25%  { transform: translateX(7px)  scale(1); box-shadow: 0 0 18px rgba(248,113,113,.5); }
  38%  { transform: translateX(-5px) scale(1); }
  50%  { transform: translateX(4px)  scale(1); }
  62%  { transform: translateX(-2px) scale(1); }
  80%  { transform: translateX(0) scale(.92);  opacity: .4; }
  100% { transform: translateX(8px) scale(.88);opacity: 0; height: 0; padding: 0; margin: 0; }
}
#fia-app .fia-wf-pain.pain-exiting {
  animation: fia-pain-exit .52s ease forwards !important;
  pointer-events: none !important;
  border-color: rgba(248,113,113,.8) !important;
  background: rgba(248,113,113,.18) !important;
}

/* ── Pain résolu — slide-in vert ──────────────────── */
@keyframes fia-pain-resolve {
  from { opacity:0; transform:translateX(-10px) scale(.97); }
  to   { opacity:1; transform:translateX(0)     scale(1); }
}
#fia-app .fia-wf-pain.pain-resolved {
  background: rgba(52,211,153,.08) !important;
  border-color: rgba(52,211,153,.25) !important;
  cursor: default !important;
  animation: fia-pain-resolve .4s ease !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 8px !important;
}
#fia-app .fia-wf-pain .pain-sol {
  font-size: .78rem !important;
  color: #34d399 !important;
  font-weight: 700 !important;
}
#fia-app .fia-wf-pain .pain-time-inline {
  font-size: .7rem !important;
  color: #6ee7b7 !important;
  font-weight: 800 !important;
  background: rgba(52,211,153,.12) !important;
  padding: 2px 8px !important;
  border-radius: 20px !important;
  white-space: nowrap !important;
  flex-shrink: 0 !important;
}

/* ── Solutions sans pain associé ──────────────────── */
#fia-app .fia-wf-sol-tag {
  display: inline-flex !important;
  align-items: center !important;
  margin-top: 8px !important;
  margin-right: 6px !important;
  padding: 4px 10px !important;
  border-radius: 6px !important;
  font-size: .7rem !important;
  font-weight: 700 !important;
  background: rgba(212,51,122,.1) !important;
  color: #D4337A !important;
  border: 1px solid rgba(212,51,122,.22) !important;
}

/* ── Step entière résolue ─────────────────────────── */
#fia-app .fia-wf-step.wf-step-done .fia-wf-step-title { color: #34d399 !important; }

@keyframes fia-dot-resolve {
  0%   { box-shadow: 0 0 0  0 rgba(52,211,153,.6); }
  60%  { box-shadow: 0 0 0 14px rgba(52,211,153,0); }
  100% { box-shadow: 0 0 0  0 rgba(52,211,153,0); }
}
#fia-app .fia-wf-step-dot.dot-done {
  background: rgba(52,211,153,.18) !important;
  color: #34d399 !important;
  border-color: rgba(52,211,153,.4) !important;
  animation: fia-dot-resolve .8s ease 2 !important;
}

/* ── Badge flottant "+X min" ──────────────────────── */
@keyframes fia-float-badge {
  0%   { opacity: 0;   transform: translateY(0)   scale(.8); }
  15%  { opacity: 1;   transform: translateY(-8px) scale(1.08); }
  80%  { opacity: 1;   transform: translateY(-60px) scale(1); }
  100% { opacity: 0;   transform: translateY(-80px) scale(.9); }
}
.fia-float-badge {
  position: fixed !important;
  z-index: 9997 !important;
  background: linear-gradient(135deg, #16a34a, #15803d) !important;
  color: #fff !important;
  font-family: 'Plus Jakarta Sans', sans-serif !important;
  font-size: .88rem !important;
  font-weight: 900 !important;
  padding: 7px 16px !important;
  border-radius: 24px !important;
  pointer-events: none !important;
  white-space: nowrap !important;
  animation: fia-float-badge 2s cubic-bezier(.22,.61,.36,1) forwards !important;
  box-shadow: 0 6px 20px rgba(22,163,74,.45) !important;
}

/* ── Sparkles / confettis ponctuels ──────────────── */
@keyframes fia-sparkle {
  0%   { opacity: 1; transform: translate(0,0) scale(1); }
  100% { opacity: 0; transform: translate(var(--tx),var(--ty)) scale(0); }
}
.fia-sparkle {
  position: fixed !important;
  border-radius: 50% !important;
  pointer-events: none !important;
  z-index: 9996 !important;
  animation: fia-sparkle .75s ease-out forwards !important;
  /* La durée est surchargée via animation-duration inline depuis le JS */
}

/* ════════════════════════════════════════════════════
   PAGES DE COURS — STRUCTURE GÉNÉRALE
   ════════════════════════════════════════════════════ */
#fia-app .fia-lesson {
  display: flex !important;
  flex-direction: column !important;
  gap: 24px !important;
  font-size: .9rem !important;
}

/* Hero du cours */
#fia-app .lesson-hero {
  background: linear-gradient(135deg, rgba(232,71,30,.1) 0%, rgba(212,51,122,.12) 50%, rgba(123,47,190,.1) 100%) !important;
  border: 1px solid rgba(212,51,122,.2) !important;
  border-radius: 18px !important;
  padding: 32px 28px !important;
}
#fia-app .lesson-hero-badge {
  display: inline-block !important;
  font-size: .65rem !important;
  font-weight: 900 !important;
  text-transform: uppercase !important;
  letter-spacing: .12em !important;
  color: var(--ami-pink) !important;
  background: rgba(212,51,122,.1) !important;
  border: 1px solid rgba(212,51,122,.25) !important;
  border-radius: 6px !important;
  padding: 4px 10px !important;
  margin-bottom: 14px !important;
}
#fia-app .lesson-hero-title {
  font-size: 1.5rem !important;
  font-weight: 900 !important;
  color: var(--text) !important;
  line-height: 1.25 !important;
  margin-bottom: 12px !important;
  letter-spacing: -.02em !important;
}
#fia-app .lesson-hero-sub {
  font-size: .9rem !important;
  color: var(--text-muted) !important;
  line-height: 1.65 !important;
  margin-bottom: 18px !important;
}
#fia-app .lesson-meta-row {
  display: flex !important;
  gap: 10px !important;
  flex-wrap: wrap !important;
}
#fia-app .lesson-time-badge {
  background: rgba(255,255,255,.08) !important;
  border: 1px solid rgba(255,255,255,.14) !important;
  border-radius: 20px !important;
  padding: 5px 14px !important;
  font-size: .75rem !important;
  font-weight: 700 !important;
  color: var(--text-muted) !important;
}
#fia-app .lesson-sections-badge {
  background: rgba(255,255,255,.05) !important;
  border: 1px solid rgba(255,255,255,.1) !important;
  border-radius: 20px !important;
  padding: 5px 14px !important;
  font-size: .75rem !important;
  color: var(--text-dim) !important;
}

/* Section de cours */
#fia-app .lesson-section {
  background: rgba(255,255,255,.03) !important;
  border: 1px solid rgba(255,255,255,.07) !important;
  border-radius: 16px !important;
  overflow: hidden !important;
}
#fia-app .lesson-section-header {
  display: flex !important;
  align-items: center !important;
  gap: 16px !important;
  padding: 18px 24px !important;
  background: rgba(255,255,255,.03) !important;
  border-bottom: 1px solid rgba(255,255,255,.06) !important;
}
#fia-app .ls-num {
  font-size: 2rem !important;
  font-weight: 900 !important;
  color: rgba(212,51,122,.25) !important;
  line-height: 1 !important;
  font-variant-numeric: tabular-nums !important;
  flex-shrink: 0 !important;
  width: 44px !important;
}
#fia-app .ls-title {
  font-size: .95rem !important;
  font-weight: 800 !important;
  color: var(--text) !important;
  line-height: 1.3 !important;
}
#fia-app .ls-subtitle {
  font-size: .75rem !important;
  color: var(--text-muted) !important;
  margin-top: 2px !important;
}
#fia-app .ls-time {
  margin-left: auto !important;
  flex-shrink: 0 !important;
  font-size: .7rem !important;
  color: var(--text-dim) !important;
  background: rgba(255,255,255,.06) !important;
  padding: 3px 9px !important;
  border-radius: 12px !important;
  font-weight: 600 !important;
}
#fia-app .lesson-section-body {
  padding: 24px !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 20px !important;
}
#fia-app .lesson-section-body p {
  color: var(--text-muted) !important;
  line-height: 1.7 !important;
  margin: 0 !important;
}
#fia-app .ls-subhead {
  font-size: .88rem !important;
  font-weight: 800 !important;
  color: var(--text) !important;
  margin: 0 !important;
}

/* ═══ COMPOSANTS PÉDAGOGIQUES ═══ */

/* Mythe vs réalité */
#fia-app .lesson-myth {
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap: 12px !important;
}
@media (max-width: 560px) { #fia-app .lesson-myth { grid-template-columns: 1fr !important; } }
#fia-app .myth-col {
  border-radius: 12px !important;
  padding: 16px !important;
}
#fia-app .myth-col p { font-size: .84rem !important; margin: 6px 0 0 !important; }
#fia-app .myth-label {
  font-size: .7rem !important;
  font-weight: 900 !important;
  text-transform: uppercase !important;
  letter-spacing: .08em !important;
}
#fia-app .myth-bad {
  background: rgba(239,68,68,.08) !important;
  border: 1px solid rgba(239,68,68,.2) !important;
}
#fia-app .myth-bad .myth-label { color: #f87171 !important; }
#fia-app .myth-good {
  background: rgba(52,211,153,.07) !important;
  border: 1px solid rgba(52,211,153,.2) !important;
}
#fia-app .myth-good .myth-label { color: #34d399 !important; }

/* Analogie */
#fia-app .lesson-analogy {
  display: flex !important;
  gap: 16px !important;
  background: rgba(123,47,190,.08) !important;
  border: 1px solid rgba(123,47,190,.2) !important;
  border-radius: 12px !important;
  padding: 18px !important;
  align-items: flex-start !important;
}
#fia-app .analogy-icon { font-size: 2rem !important; flex-shrink: 0 !important; line-height: 1 !important; }
#fia-app .lesson-analogy div { font-size: .86rem !important; color: var(--text-muted) !important; line-height: 1.65 !important; }
#fia-app .lesson-analogy strong { color: var(--text) !important; }

/* Insight */
#fia-app .lesson-insight {
  display: flex !important;
  gap: 14px !important;
  background: linear-gradient(135deg, rgba(212,51,122,.08), rgba(123,47,190,.08)) !important;
  border: 1px solid rgba(212,51,122,.2) !important;
  border-radius: 12px !important;
  padding: 16px !important;
  align-items: flex-start !important;
}
#fia-app .insight-icon { font-size: 1.4rem !important; flex-shrink: 0 !important; }
#fia-app .lesson-insight div { font-size: .85rem !important; color: var(--text-muted) !important; line-height: 1.6 !important; }
#fia-app .lesson-insight strong { color: var(--text) !important; }

/* Rappel actif */
#fia-app .lesson-recall {
  background: rgba(96,165,250,.07) !important;
  border: 1px solid rgba(96,165,250,.22) !important;
  border-radius: 12px !important;
  padding: 18px !important;
}
#fia-app .recall-q {
  font-size: .85rem !important;
  color: var(--text-muted) !important;
  line-height: 1.55 !important;
  margin-bottom: 12px !important;
}
#fia-app .recall-q strong { color: #93c5fd !important; }
#fia-app .recall-reveal-btn {
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  background: rgba(96,165,250,.14) !important;
  border: 1px solid rgba(96,165,250,.3) !important;
  color: #93c5fd !important;
  font-size: .78rem !important;
  font-weight: 700 !important;
  padding: 7px 14px !important;
  border-radius: 8px !important;
  cursor: pointer !important;
  font-family: inherit !important;
  transition: background .18s !important;
}
#fia-app .recall-reveal-btn:hover { background: rgba(96,165,250,.22) !important; }
#fia-app .recall-answer {
  margin-top: 14px !important;
  padding: 14px !important;
  background: rgba(96,165,250,.06) !important;
  border-radius: 8px !important;
  font-size: .83rem !important;
  color: var(--text-muted) !important;
  line-height: 1.6 !important;
  border-left: 3px solid #60a5fa !important;
}
#fia-app .recall-answer strong { color: var(--text) !important; }

/* Brain tip (technique mémorisation) */
#fia-app .lesson-brain-tip {
  display: flex !important;
  gap: 14px !important;
  background: rgba(251,191,36,.07) !important;
  border: 1px solid rgba(251,191,36,.2) !important;
  border-radius: 12px !important;
  padding: 16px !important;
  align-items: flex-start !important;
}
#fia-app .brain-tip-icon { font-size: 1.5rem !important; flex-shrink: 0 !important; }
#fia-app .lesson-brain-tip div { font-size: .83rem !important; color: var(--text-muted) !important; line-height: 1.6 !important; }
#fia-app .lesson-brain-tip strong { color: #fcd34d !important; }

/* Concept grid (4 cards) */
#fia-app .lesson-concept-grid {
  display: grid !important;
  grid-template-columns: repeat(2, 1fr) !important;
  gap: 12px !important;
}
@media (max-width: 560px) { #fia-app .lesson-concept-grid { grid-template-columns: 1fr !important; } }
#fia-app .lesson-concept-card {
  background: rgba(255,255,255,.04) !important;
  border: 1px solid rgba(255,255,255,.08) !important;
  border-radius: 12px !important;
  padding: 16px !important;
}
#fia-app .concept-icon { font-size: 1.6rem !important; margin-bottom: 8px !important; }
#fia-app .concept-name { font-size: .82rem !important; font-weight: 800 !important; color: var(--text) !important; margin-bottom: 6px !important; }
#fia-app .concept-desc { font-size: .78rem !important; color: var(--text-muted) !important; line-height: 1.55 !important; }

/* Table générique */
#fia-app .lesson-table {
  width: 100% !important;
  border-collapse: separate !important;
  border-spacing: 0 5px !important;
  font-size: .8rem !important;
}
#fia-app .lesson-table th {
  font-size: .72rem !important;
  font-weight: 800 !important;
  text-transform: uppercase !important;
  letter-spacing: .06em !important;
  color: var(--text-dim) !important;
  padding: 6px 14px 10px !important;
  text-align: left !important;
}
#fia-app .lesson-table td {
  padding: 10px 14px !important;
  background: rgba(255,255,255,.03) !important;
  color: var(--text-muted) !important;
  line-height: 1.4 !important;
}
#fia-app .lesson-table td:first-child { border-radius: 8px 0 0 8px !important; }
#fia-app .lesson-table td:last-child { border-radius: 0 8px 8px 0 !important; }
#fia-app .lesson-table tr:nth-child(odd) td { background: rgba(255,255,255,.05) !important; }

/* 4 familles IA */
#fia-app .lesson-ai-families {
  display: grid !important;
  grid-template-columns: repeat(2, 1fr) !important;
  gap: 12px !important;
}
@media (max-width: 540px) { #fia-app .lesson-ai-families { grid-template-columns: 1fr !important; } }
#fia-app .ai-family {
  border-radius: 12px !important;
  padding: 14px !important;
  background: rgba(255,255,255,.04) !important;
  border: 1px solid rgba(255,255,255,.07) !important;
}
#fia-app .af-header {
  font-size: .82rem !important;
  font-weight: 800 !important;
  padding: 4px 8px !important;
  border-radius: 6px !important;
  display: inline-block !important;
  margin-bottom: 8px !important;
}
#fia-app .af-text { background: rgba(212,51,122,.14) !important; color: var(--ami-pink) !important; }
#fia-app .af-image { background: rgba(123,47,190,.14) !important; color: #a855f7 !important; }
#fia-app .af-audio { background: rgba(232,71,30,.14) !important; color: var(--ami-orange) !important; }
#fia-app .af-code { background: rgba(96,165,250,.14) !important; color: #60a5fa !important; }
#fia-app .af-tools { font-size: .75rem !important; color: var(--text-dim) !important; margin-bottom: 5px !important; }
#fia-app .af-use { font-size: .78rem !important; color: var(--text-muted) !important; margin-bottom: 6px !important; }
#fia-app .af-risk { font-size: .73rem !important; color: #fcd34d !important; }

/* Contexte Amigraf */
#fia-app .lesson-amigraf-context {
  background: rgba(123,47,190,.07) !important;
  border: 1px solid rgba(123,47,190,.2) !important;
  border-radius: 12px !important;
  padding: 18px !important;
}
#fia-app .amigraf-context-title {
  font-size: .85rem !important;
  font-weight: 800 !important;
  color: #a855f7 !important;
  margin-bottom: 12px !important;
}
#fia-app .amigraf-context-grid {
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap: 6px !important;
}
@media (max-width: 520px) { #fia-app .amigraf-context-grid { grid-template-columns: 1fr !important; } }
#fia-app .ac-item {
  font-size: .78rem !important;
  padding: 8px 10px !important;
  border-radius: 8px !important;
  line-height: 1.4 !important;
}
#fia-app .ac-ok { background: rgba(52,211,153,.08) !important; color: #6ee7b7 !important; }
#fia-app .ac-warn { background: rgba(251,191,36,.08) !important; color: #fcd34d !important; }

/* Data flow diagram (sécurité) */
#fia-app .lesson-data-flow {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 8px !important;
  align-items: center !important;
}
#fia-app .df-step {
  flex: 1 !important;
  min-width: 140px !important;
  background: rgba(255,255,255,.04) !important;
  border: 1px solid rgba(255,255,255,.08) !important;
  border-radius: 10px !important;
  padding: 12px !important;
}
#fia-app .df-num {
  width: 22px !important;
  height: 22px !important;
  background: rgba(212,51,122,.25) !important;
  border-radius: 50% !important;
  font-size: .7rem !important;
  font-weight: 900 !important;
  color: var(--ami-pink) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  margin-bottom: 6px !important;
}
#fia-app .df-label { font-size: .78rem !important; font-weight: 700 !important; color: var(--text) !important; margin-bottom: 4px !important; }
#fia-app .df-detail { font-size: .7rem !important; color: var(--text-dim) !important; line-height: 1.4 !important; }
#fia-app .df-arrow { font-size: 1.2rem !important; color: var(--text-dim) !important; flex-shrink: 0 !important; }

/* Risques (niveaux) */
#fia-app .lesson-risks { display: flex !important; flex-direction: column !important; gap: 8px !important; }
#fia-app .risk-item {
  display: flex !important;
  gap: 14px !important;
  border-radius: 10px !important;
  padding: 14px !important;
  align-items: flex-start !important;
}
#fia-app .risk-high { background: rgba(239,68,68,.07) !important; border: 1px solid rgba(239,68,68,.18) !important; }
#fia-app .risk-medium { background: rgba(251,191,36,.06) !important; border: 1px solid rgba(251,191,36,.18) !important; }
#fia-app .risk-low { background: rgba(52,211,153,.06) !important; border: 1px solid rgba(52,211,153,.18) !important; }
#fia-app .risk-badge { font-size: .65rem !important; font-weight: 900 !important; white-space: nowrap !important; flex-shrink: 0 !important; padding-top: 2px !important; }
#fia-app .risk-name { font-size: .83rem !important; font-weight: 800 !important; color: var(--text) !important; margin-bottom: 4px !important; }
#fia-app .risk-desc { font-size: .78rem !important; color: var(--text-muted) !important; line-height: 1.5 !important; }

/* Niveaux de données */
#fia-app .lesson-data-levels { display: flex !important; flex-direction: column !important; gap: 10px !important; }
#fia-app .data-level {
  border-radius: 12px !important;
  padding: 16px !important;
}
#fia-app .dl-public  { background: rgba(52,211,153,.07) !important; border: 1px solid rgba(52,211,153,.2) !important; }
#fia-app .dl-internal { background: rgba(96,165,250,.07) !important; border: 1px solid rgba(96,165,250,.2) !important; }
#fia-app .dl-confidential { background: rgba(251,191,36,.07) !important; border: 1px solid rgba(251,191,36,.2) !important; }
#fia-app .dl-secret { background: rgba(239,68,68,.07) !important; border: 1px solid rgba(239,68,68,.2) !important; }
#fia-app .dl-badge {
  font-size: .7rem !important;
  font-weight: 900 !important;
  text-transform: uppercase !important;
  letter-spacing: .06em !important;
  margin-bottom: 6px !important;
}
#fia-app .dl-public .dl-badge { color: #34d399 !important; }
#fia-app .dl-internal .dl-badge { color: #60a5fa !important; }
#fia-app .dl-confidential .dl-badge { color: #fbbf24 !important; }
#fia-app .dl-secret .dl-badge { color: #f87171 !important; }
#fia-app .dl-title { font-size: .88rem !important; font-weight: 800 !important; color: var(--text) !important; margin-bottom: 4px !important; }
#fia-app .dl-desc { font-size: .78rem !important; color: var(--text-muted) !important; margin-bottom: 8px !important; }
#fia-app .dl-examples { font-size: .75rem !important; color: var(--text-dim) !important; margin-bottom: 8px !important; line-height: 1.5 !important; }
#fia-app .dl-rule { font-size: .78rem !important; line-height: 1.45 !important; }
#fia-app .dl-public .dl-rule { color: #6ee7b7 !important; }
#fia-app .dl-internal .dl-rule { color: #93c5fd !important; }
#fia-app .dl-confidential .dl-rule { color: #fcd34d !important; }
#fia-app .dl-secret .dl-rule { color: #fca5a5 !important; }

/* Checklist (7 réflexes) */
#fia-app .lesson-checklist { display: flex !important; flex-direction: column !important; gap: 8px !important; }
#fia-app .check-item {
  display: flex !important;
  gap: 14px !important;
  background: rgba(255,255,255,.03) !important;
  border: 1px solid rgba(255,255,255,.06) !important;
  border-radius: 10px !important;
  padding: 14px !important;
  align-items: flex-start !important;
  font-size: .83rem !important;
  color: var(--text-muted) !important;
  line-height: 1.5 !important;
}
#fia-app .check-num {
  width: 26px !important;
  height: 26px !important;
  background: linear-gradient(135deg, var(--ami-pink), #7B2FBE) !important;
  border-radius: 50% !important;
  font-size: .72rem !important;
  font-weight: 900 !important;
  color: #fff !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex-shrink: 0 !important;
}
#fia-app .check-item strong { color: var(--text) !important; }

/* Comparaison prompt (avant/après) */
#fia-app .lesson-prompt-compare {
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap: 12px !important;
}
@media (max-width: 560px) { #fia-app .lesson-prompt-compare { grid-template-columns: 1fr !important; } }
#fia-app .pc-col {
  border-radius: 12px !important;
  padding: 16px !important;
}
#fia-app .pc-bad { background: rgba(239,68,68,.07) !important; border: 1px solid rgba(239,68,68,.2) !important; }
#fia-app .pc-good { background: rgba(52,211,153,.07) !important; border: 1px solid rgba(52,211,153,.2) !important; }
#fia-app .pc-label { font-size: .7rem !important; font-weight: 900 !important; text-transform: uppercase !important; letter-spacing: .07em !important; margin-bottom: 10px !important; }
#fia-app .pc-bad .pc-label { color: #f87171 !important; }
#fia-app .pc-good .pc-label { color: #34d399 !important; }
#fia-app .pc-prompt {
  font-family: monospace !important;
  font-size: .78rem !important;
  background: rgba(0,0,0,.25) !important;
  border-radius: 8px !important;
  padding: 10px 12px !important;
  color: var(--text-muted) !important;
  line-height: 1.6 !important;
  margin-bottom: 10px !important;
}
#fia-app .pc-result { font-size: .75rem !important; color: var(--text-dim) !important; line-height: 1.45 !important; font-style: italic !important; }

/* Chaîne de prompts */
#fia-app .lesson-chain-example {
  background: rgba(123,47,190,.07) !important;
  border: 1px solid rgba(123,47,190,.2) !important;
  border-radius: 14px !important;
  padding: 18px !important;
}
#fia-app .chain-title { font-size: .85rem !important; font-weight: 800 !important; color: #a855f7 !important; margin-bottom: 16px !important; }
#fia-app .chain-steps { display: flex !important; flex-direction: column !important; gap: 0 !important; }
#fia-app .chain-step {
  display: flex !important;
  gap: 14px !important;
  align-items: flex-start !important;
}
#fia-app .cs-num {
  font-size: .65rem !important;
  font-weight: 900 !important;
  text-transform: uppercase !important;
  letter-spacing: .06em !important;
  color: #a855f7 !important;
  background: rgba(123,47,190,.15) !important;
  padding: 3px 8px !important;
  border-radius: 6px !important;
  white-space: nowrap !important;
  flex-shrink: 0 !important;
  margin-top: 1px !important;
}
#fia-app .cs-body {
  font-size: .8rem !important;
  color: var(--text-muted) !important;
  line-height: 1.5 !important;
  font-family: monospace !important;
  background: rgba(0,0,0,.2) !important;
  padding: 10px 12px !important;
  border-radius: 8px !important;
  flex: 1 !important;
}
#fia-app .chain-arrow { color: rgba(123,47,190,.5) !important; font-size: 1.2rem !important; text-align: center !important; padding: 4px 0 !important; padding-left: calc(var(--cs-num-w, 64px) + 14px) !important; }

/* Bibliothèque de prompts */
#fia-app .lesson-prompt-library { display: flex !important; flex-direction: column !important; gap: 10px !important; }
#fia-app .prompt-lib-item {
  background: rgba(255,255,255,.03) !important;
  border: 1px solid rgba(255,255,255,.07) !important;
  border-radius: 12px !important;
  padding: 14px !important;
}
#fia-app .pli-tag {
  display: inline-block !important;
  font-size: .68rem !important;
  font-weight: 800 !important;
  text-transform: uppercase !important;
  letter-spacing: .07em !important;
  color: var(--ami-pink) !important;
  background: rgba(212,51,122,.1) !important;
  padding: 2px 8px !important;
  border-radius: 4px !important;
  margin-bottom: 8px !important;
}
#fia-app .pli-prompt {
  font-size: .8rem !important;
  color: var(--text-muted) !important;
  line-height: 1.6 !important;
  font-family: monospace !important;
  background: rgba(0,0,0,.2) !important;
  padding: 10px 12px !important;
  border-radius: 8px !important;
}

/* Grille compétences (hausse/baisse) */
#fia-app .lesson-skills-grid {
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap: 14px !important;
}
@media (max-width: 560px) { #fia-app .lesson-skills-grid { grid-template-columns: 1fr !important; } }
#fia-app .skills-col { border-radius: 12px !important; padding: 16px !important; }
#fia-app .skills-up { background: rgba(52,211,153,.06) !important; border: 1px solid rgba(52,211,153,.18) !important; }
#fia-app .skills-down { background: rgba(239,68,68,.06) !important; border: 1px solid rgba(239,68,68,.18) !important; }
#fia-app .skills-label { font-size: .72rem !important; font-weight: 900 !important; text-transform: uppercase !important; letter-spacing: .06em !important; margin-bottom: 12px !important; }
#fia-app .skills-up .skills-label { color: #34d399 !important; }
#fia-app .skills-down .skills-label { color: #f87171 !important; }
#fia-app .skill-item { display: flex !important; gap: 10px !important; margin-bottom: 10px !important; font-size: .8rem !important; color: var(--text-muted) !important; line-height: 1.5 !important; }
#fia-app .si-icon { font-size: 1.1rem !important; flex-shrink: 0 !important; }
#fia-app .skill-item strong { color: var(--text) !important; }

/* Cas éthiques */
#fia-app .lesson-ethics-cases { display: flex !important; flex-direction: column !important; gap: 14px !important; }
#fia-app .ethics-case {
  background: rgba(255,255,255,.04) !important;
  border: 1px solid rgba(255,255,255,.08) !important;
  border-radius: 12px !important;
  padding: 16px !important;
}
#fia-app .ec-situation { font-size: .84rem !important; color: var(--text-muted) !important; line-height: 1.55 !important; margin-bottom: 10px !important; }
#fia-app .ec-question { font-size: .78rem !important; font-weight: 800 !important; color: var(--ami-pink) !important; margin-bottom: 10px !important; }
#fia-app .ec-btn { font-size: .75rem !important; }
#fia-app .ec-answer { border-left-color: var(--ami-pink) !important; }

/* Engagements */
#fia-app .lesson-commitments { display: flex !important; flex-direction: column !important; gap: 10px !important; }
#fia-app .commitment-item {
  display: flex !important;
  gap: 16px !important;
  background: rgba(255,255,255,.03) !important;
  border: 1px solid rgba(255,255,255,.07) !important;
  border-radius: 12px !important;
  padding: 16px !important;
  font-size: .84rem !important;
  color: var(--text-muted) !important;
  line-height: 1.6 !important;
  align-items: flex-start !important;
}
#fia-app .ci-num {
  width: 30px !important;
  height: 30px !important;
  background: linear-gradient(135deg, rgba(212,51,122,.3), rgba(123,47,190,.3)) !important;
  border: 1px solid rgba(212,51,122,.35) !important;
  border-radius: 50% !important;
  font-size: .82rem !important;
  font-weight: 900 !important;
  color: var(--ami-pink) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex-shrink: 0 !important;
}
#fia-app .commitment-item strong { color: var(--text) !important; display: block !important; margin-bottom: 4px !important; }

/* Bouton continuer (fin de cours) */
#fia-app .lesson-continue-wrap {
  background: rgba(255,255,255,.03) !important;
  border: 1px solid rgba(255,255,255,.08) !important;
  border-radius: 16px !important;
  padding: 24px !important;
  text-align: center !important;
}
#fia-app .lesson-continue-recap {
  font-size: .82rem !important;
  color: var(--text-muted) !important;
  line-height: 1.65 !important;
  margin-bottom: 20px !important;
  text-align: left !important;
  background: rgba(52,211,153,.06) !important;
  border: 1px solid rgba(52,211,153,.15) !important;
  border-radius: 10px !important;
  padding: 14px !important;
}
#fia-app .lesson-continue-recap strong { color: #34d399 !important; }
#fia-app .lesson-btn-continue {
  min-width: 280px !important;
  font-size: .95rem !important;
  padding: 14px 32px !important;
}

/* ════════════════════════════════════════════════════
   COURS PAGINÉS — CHAPITRE PAR CHAPITRE
   ════════════════════════════════════════════════════ */
#fia-app .fia-lesson-paged {
  display: flex !important;
  flex-direction: column !important;
  gap: 0 !important;
}

/* Barre de chapitres */
#fia-app .lesson-chapter-bar {
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
  padding: 14px 20px !important;
  background: rgba(255,255,255,.03) !important;
  border: 1px solid rgba(255,255,255,.08) !important;
  border-radius: 12px !important;
  margin-bottom: 20px !important;
  flex-wrap: wrap !important;
}

/* Points de progression */
#fia-app .lp-dots {
  display: flex !important;
  gap: 6px !important;
  flex-shrink: 0 !important;
}
#fia-app .lp-dot {
  width: 10px !important;
  height: 10px !important;
  border-radius: 50% !important;
  background: rgba(255,255,255,.15) !important;
  border: none !important;
  padding: 0 !important;
  cursor: default !important;
  transition: background .2s !important;
  flex-shrink: 0 !important;
}
#fia-app .lp-dot-done {
  background: rgba(52,211,153,.5) !important;
  cursor: pointer !important;
}
#fia-app .lp-dot-done:hover { background: rgba(52,211,153,.8) !important; }
#fia-app .lp-dot-active {
  background: var(--ami-orange) !important;
  box-shadow: 0 0 6px rgba(232,71,30,.5) !important;
}

/* Label du chapitre courant */
#fia-app .lp-chapter-label {
  font-size: .82rem !important;
  font-weight: 700 !important;
  color: var(--text) !important;
  flex: 1 !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

/* Compteur X/Y */
#fia-app .lp-counter {
  font-size: .75rem !important;
  color: var(--text-dim) !important;
  font-variant-numeric: tabular-nums !important;
  white-space: nowrap !important;
  flex-shrink: 0 !important;
}

/* Contenu du chapitre */
#fia-app .lesson-page-body {
  flex: 1 !important;
  animation: lpFadeIn .25s ease !important;
}
@keyframes lpFadeIn {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* Footer prev/next */
#fia-app .lesson-page-footer {
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
  gap: 12px !important;
  margin-top: 28px !important;
  padding-top: 20px !important;
  border-top: 1px solid rgba(255,255,255,.06) !important;
}

#fia-app .lesson-btn-prev {
  font-size: .85rem !important;
  padding: 10px 20px !important;
  color: var(--text-muted) !important;
  background: transparent !important;
  border: 1px solid rgba(255,255,255,.12) !important;
  border-radius: 10px !important;
  cursor: pointer !important;
  transition: all .2s !important;
}
#fia-app .lesson-btn-prev:hover {
  background: rgba(255,255,255,.05) !important;
  color: var(--text) !important;
}

#fia-app .lesson-btn-next {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  font-size: .9rem !important;
  padding: 12px 24px !important;
}
#fia-app .btn-next-label {
  font-size: .78rem !important;
  opacity: .8 !important;
  font-weight: 500 !important;
  font-style: italic !important;
}

/* ════════════════════════════════════════════════════
   WORKFLOW — SÉLECTEUR DE TEMPS (IRRITANTS)
   ════════════════════════════════════════════════════ */
#fia-app .pain-time-picker {
  background: rgba(255,255,255,.04) !important;
  border: 1px solid rgba(255,200,50,.2) !important;
  border-radius: 14px !important;
  padding: 16px !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 12px !important;
}
#fia-app .ptp-irritant {
  font-size: .82rem !important;
  color: var(--text-muted) !important;
  font-style: italic !important;
  border-left: 3px solid rgba(255,200,50,.4) !important;
  padding-left: 10px !important;
}
#fia-app .ptp-question {
  font-size: .9rem !important;
  font-weight: 700 !important;
  color: var(--text) !important;
}
#fia-app .ptp-slider-row {
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
}
#fia-app .ptp-slider {
  flex: 1 !important;
  accent-color: var(--ami-orange) !important;
  cursor: pointer !important;
}
#fia-app .ptp-val {
  font-size: .9rem !important;
  font-weight: 800 !important;
  color: var(--ami-orange) !important;
  min-width: 64px !important;
  text-align: right !important;
  white-space: nowrap !important;
}
#fia-app .ptp-actions {
  display: flex !important;
  gap: 10px !important;
  justify-content: flex-end !important;
  flex-wrap: wrap !important;
}
#fia-app .ptp-nc {
  background: transparent !important;
  border: 1px solid rgba(255,255,255,.15) !important;
  border-radius: 8px !important;
  padding: 8px 16px !important;
  font-size: .82rem !important;
  color: var(--text-muted) !important;
  cursor: pointer !important;
  transition: all .2s !important;
}
#fia-app .ptp-nc:hover {
  background: rgba(255,255,255,.05) !important;
  color: var(--text) !important;
}
#fia-app .ptp-confirm {
  background: linear-gradient(135deg, var(--ami-orange), var(--ami-pink)) !important;
  border: none !important;
  border-radius: 8px !important;
  padding: 8px 18px !important;
  font-size: .85rem !important;
  font-weight: 700 !important;
  color: #fff !important;
  cursor: pointer !important;
  transition: opacity .2s !important;
}
#fia-app .ptp-confirm:hover { opacity: .85 !important; }
#fia-app .pain-time-inline {
  display: inline-block !important;
  font-size: .8rem !important;
  font-weight: 700 !important;
  color: #34d399 !important;
  margin-left: 8px !important;
}
#fia-app .pain-time-inline.pain-nc {
  color: var(--text-dim) !important;
  font-style: italic !important;
}
#fia-app .pain-picking { opacity: .95 !important; }

/* ════════════════════════════════════════════════════
   BARRE DE NAVIGATION — MODULES
   ════════════════════════════════════════════════════ */
#fia-nav {
  position: sticky !important;
  top: 0 !important;
  z-index: 200 !important;
  background: rgba(12, 9, 26, 0.92) !important;
  backdrop-filter: blur(16px) saturate(1.4) !important;
  -webkit-backdrop-filter: blur(16px) saturate(1.4) !important;
  border-bottom: 1px solid rgba(255,255,255,.08) !important;
  padding: 10px 20px !important;
}
#fia-nav[hidden] { display: none !important; }

#fia-app .fia-nav-inner {
  max-width: 860px !important;
  margin: 0 auto !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 8px !important;
}
#fia-app .fia-nav-meta {
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
  font-size: .68rem !important;
  font-weight: 600 !important;
}
#fia-app .nav-meta-done { color: #34d399 !important; }
#fia-app .nav-meta-total { color: var(--text-dim) !important; }

/* Chips horizontaux */
#fia-app .fia-nav-chips {
  display: flex !important;
  gap: 6px !important;
  overflow-x: auto !important;
  scrollbar-width: none !important;
  padding-bottom: 2px !important;
  scroll-snap-type: x mandatory !important;
}
#fia-app .fia-nav-chips::-webkit-scrollbar { display: none !important; }

#fia-app .fia-nav-chip {
  flex-shrink: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  gap: 3px !important;
  padding: 8px 12px !important;
  border-radius: 10px !important;
  border: 1px solid rgba(255,255,255,.08) !important;
  background: rgba(255,255,255,.04) !important;
  cursor: pointer !important;
  transition: transform .2s ease, background .2s ease, border-color .2s ease, box-shadow .2s ease !important;
  min-width: 68px !important;
  scroll-snap-align: start !important;
  font-family: inherit !important;
}
#fia-app .fia-nav-chip .chip-icon {
  font-size: .95rem !important;
  line-height: 1 !important;
}
#fia-app .fia-nav-chip .chip-name {
  font-size: .6rem !important;
  font-weight: 700 !important;
  color: var(--text-muted) !important;
  line-height: 1.2 !important;
  text-align: center !important;
  max-width: 72px !important;
}
#fia-app .fia-nav-chip .chip-time {
  font-size: .58rem !important;
  color: var(--text-dim) !important;
  font-weight: 500 !important;
}

/* — Chip : étape passée (revisitable) — */
#fia-app .fia-nav-chip.chip-past {
  background: rgba(52,211,153,.07) !important;
  border-color: rgba(52,211,153,.2) !important;
}
#fia-app .fia-nav-chip.chip-past .chip-name { color: #6ee7b7 !important; }
#fia-app .fia-nav-chip.chip-past .chip-time { color: rgba(110,231,183,.5) !important; }
#fia-app .fia-nav-chip.chip-past:hover {
  background: rgba(52,211,153,.14) !important;
  border-color: rgba(52,211,153,.4) !important;
  transform: translateY(-2px) !important;
  box-shadow: 0 4px 16px rgba(52,211,153,.18) !important;
}
#fia-app .fia-nav-chip.chip-past:hover .chip-name { color: #34d399 !important; }

/* — Chip : étape actuelle — */
#fia-app .fia-nav-chip.chip-current {
  background: linear-gradient(135deg, rgba(212,51,122,.18), rgba(123,47,190,.18)) !important;
  border-color: rgba(212,51,122,.45) !important;
  cursor: default !important;
  box-shadow: 0 0 0 2px rgba(212,51,122,.2) !important;
}
#fia-app .fia-nav-chip.chip-current .chip-name { color: var(--ami-pink) !important; }
#fia-app .fia-nav-chip.chip-current .chip-time { color: rgba(212,51,122,.55) !important; }

/* — Chip : étape future (verrouillée) — */
#fia-app .fia-nav-chip.chip-future {
  opacity: .32 !important;
  cursor: not-allowed !important;
}

/* ════════════════════════════════════════════════════
   ÉCRAN D'ACCUEIL — PROGRAMME
   ════════════════════════════════════════════════════ */
#fia-app .fia-programme-card {
  background: rgba(255,255,255,.04) !important;
  border: 1px solid rgba(255,255,255,.08) !important;
  border-radius: 16px !important;
  padding: 20px !important;
  margin-bottom: 16px !important;
}
#fia-app .fia-prog-header {
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
  margin-bottom: 14px !important;
}
#fia-app .fia-prog-title {
  font-size: .88rem !important;
  font-weight: 800 !important;
  color: var(--text) !important;
}
#fia-app .fia-prog-badge {
  background: rgba(212,51,122,.14) !important;
  border: 1px solid rgba(212,51,122,.3) !important;
  color: var(--ami-pink) !important;
  font-size: .75rem !important;
  font-weight: 800 !important;
  padding: 3px 10px !important;
  border-radius: 20px !important;
}
#fia-app .fia-prog-list {
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap: 6px !important;
}
@media (max-width: 480px) {
  #fia-app .fia-prog-list { grid-template-columns: 1fr !important; }
}
#fia-app .fia-prog-item {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  padding: 8px 10px !important;
  border-radius: 9px !important;
  background: rgba(255,255,255,.03) !important;
  border: 1px solid rgba(255,255,255,.05) !important;
  transition: background .18s !important;
}
#fia-app .fia-prog-item:hover { background: rgba(255,255,255,.06) !important; }
#fia-app .fia-prog-item .prog-icon {
  font-size: 1.1rem !important;
  flex-shrink: 0 !important;
  width: 24px !important;
  text-align: center !important;
}
#fia-app .fia-prog-item .prog-name {
  flex: 1 !important;
  font-size: .78rem !important;
  color: var(--text-muted) !important;
  line-height: 1.3 !important;
}
#fia-app .fia-prog-item .prog-time {
  font-size: .7rem !important;
  color: var(--text-dim) !important;
  font-weight: 600 !important;
  white-space: nowrap !important;
  background: rgba(255,255,255,.06) !important;
  padding: 2px 7px !important;
  border-radius: 10px !important;
}

/* ════════════════════════════════════════════════════
   ÉCRAN DE RETOUR — "Content de te revoir"
   ════════════════════════════════════════════════════ */
#fia-app .fia-resume-next {
  display: flex !important;
  align-items: center !important;
  gap: 16px !important;
  background: linear-gradient(135deg, rgba(212,51,122,.1), rgba(123,47,190,.1)) !important;
  border: 1px solid rgba(212,51,122,.25) !important;
  border-radius: 14px !important;
  padding: 16px 20px !important;
  text-align: left !important;
  margin: 0 auto !important;
  max-width: 360px !important;
}
#fia-app .fia-resume-next .resume-icon {
  font-size: 2.2rem !important;
  flex-shrink: 0 !important;
}
#fia-app .fia-resume-next .resume-label {
  font-size: .65rem !important;
  font-weight: 800 !important;
  text-transform: uppercase !important;
  letter-spacing: .08em !important;
  color: var(--ami-pink) !important;
  margin-bottom: 3px !important;
}
#fia-app .fia-resume-next .resume-name {
  font-size: .92rem !important;
  font-weight: 700 !important;
  color: var(--text) !important;
  line-height: 1.3 !important;
}
#fia-app .fia-resume-next .resume-time {
  font-size: .75rem !important;
  color: var(--text-muted) !important;
  margin-top: 3px !important;
}

/* ════════════════════════════════════════════════════
   QUIZ UI AMÉLIORÉ
   ════════════════════════════════════════════════════ */
#fia-app .fia-quiz-card { padding: 28px 28px 24px !important; }

#fia-app .fia-quiz-header {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  margin-bottom: 14px !important;
  flex-wrap: wrap !important;
  gap: 8px !important;
}
#fia-app .quiz-counter-pill {
  display: flex !important;
  align-items: baseline !important;
  gap: 2px !important;
  background: rgba(212,51,122,.12) !important;
  border: 1px solid rgba(212,51,122,.25) !important;
  border-radius: 20px !important;
  padding: 4px 12px !important;
  font-size: .85rem !important;
  font-weight: 800 !important;
  color: var(--ami-pink) !important;
}
#fia-app .quiz-counter-pill .quiz-n { font-size: 1.1rem !important; }
#fia-app .quiz-counter-pill .quiz-sep { color: rgba(212,51,122,.5) !important; margin: 0 2px !important; }
#fia-app .quiz-counter-pill .quiz-total { color: rgba(212,51,122,.6) !important; }

#fia-app .quiz-dots-row {
  display: flex !important;
  gap: 6px !important;
  align-items: center !important;
  flex-wrap: wrap !important;
}
#fia-app .quiz-score-pill {
  background: rgba(251,191,36,.12) !important;
  border: 1px solid rgba(251,191,36,.3) !important;
  border-radius: 20px !important;
  padding: 4px 12px !important;
  font-size: .82rem !important;
  font-weight: 700 !important;
  color: #fbbf24 !important;
}

#fia-app .quiz-progress-bar-track {
  height: 5px !important;
  background: rgba(255,255,255,.07) !important;
  border-radius: 99px !important;
  margin-bottom: 22px !important;
  overflow: hidden !important;
}
#fia-app .quiz-progress-bar-fill {
  height: 100% !important;
  background: linear-gradient(90deg, var(--ami-pink), #7B2FBE) !important;
  border-radius: 99px !important;
  transition: width .5s cubic-bezier(.4,0,.2,1) !important;
}
#fia-app .quiz-question-block {
  margin-bottom: 20px !important;
  padding: 16px 18px !important;
  background: rgba(255,255,255,.035) !important;
  border-radius: 10px !important;
  border-left: 3px solid var(--ami-pink) !important;
}
#fia-app .fia-question-text {
  font-size: 1.05rem !important;
  font-weight: 700 !important;
  color: var(--text) !important;
  line-height: 1.5 !important;
  margin: 0 !important;
}
#fia-app .fia-quiz-tip {
  margin-top: 16px !important;
  padding: 12px 16px !important;
  background: rgba(96,165,250,.07) !important;
  border: 1px solid rgba(96,165,250,.18) !important;
  border-radius: 10px !important;
  font-size: .82rem !important;
  color: var(--text-muted) !important;
  line-height: 1.5 !important;
}

/* ════════════════════════════════════════════════════
   BLOCS DE SYNTHÈSE / COURS
   ════════════════════════════════════════════════════ */
#fia-app .fia-synthesis {
  margin-top: 32px !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 24px !important;
}
#fia-app .synth-eyebrow {
  font-size: .7rem !important;
  font-weight: 900 !important;
  text-transform: uppercase !important;
  letter-spacing: .12em !important;
  color: var(--ami-pink) !important;
  padding: 6px 14px !important;
  background: rgba(212,51,122,.08) !important;
  border-radius: 6px !important;
  display: inline-block !important;
  margin-bottom: -8px !important;
}
#fia-app .synth-section {
  background: rgba(255,255,255,.04) !important;
  border: 1px solid rgba(255,255,255,.07) !important;
  border-radius: 16px !important;
  padding: 24px !important;
}
#fia-app .synth-section-title {
  font-size: .95rem !important;
  font-weight: 800 !important;
  color: var(--text) !important;
  margin-bottom: 18px !important;
  letter-spacing: -.01em !important;
}

/* — Grille 3 régimes légaux — */
#fia-app .synth-grid-3 {
  display: grid !important;
  grid-template-columns: repeat(3, 1fr) !important;
  gap: 14px !important;
}
@media (max-width: 680px) {
  #fia-app .synth-grid-3 { grid-template-columns: 1fr !important; }
}
#fia-app .synth-regime {
  border-radius: 12px !important;
  padding: 18px 16px !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 8px !important;
}
#fia-app .synth-regime-eu {
  background: rgba(59,130,246,.1) !important;
  border: 1px solid rgba(59,130,246,.25) !important;
}
#fia-app .synth-regime-us {
  background: rgba(239,68,68,.1) !important;
  border: 1px solid rgba(239,68,68,.25) !important;
}
#fia-app .synth-regime-cgu {
  background: rgba(251,191,36,.09) !important;
  border: 1px solid rgba(251,191,36,.22) !important;
}
#fia-app .regime-flag { font-size: 2rem !important; line-height: 1 !important; }
#fia-app .regime-name {
  font-size: .88rem !important;
  font-weight: 800 !important;
  color: var(--text) !important;
}
#fia-app .regime-desc {
  font-size: .78rem !important;
  color: var(--text-muted) !important;
  line-height: 1.55 !important;
}

/* — Alerte — */
#fia-app .synth-alert {
  display: flex !important;
  gap: 16px !important;
  background: rgba(251,191,36,.08) !important;
  border: 1px solid rgba(251,191,36,.28) !important;
  border-radius: 14px !important;
  padding: 20px !important;
  align-items: flex-start !important;
}
#fia-app .synth-alert-icon { font-size: 1.6rem !important; flex-shrink: 0 !important; line-height: 1 !important; }
#fia-app .synth-alert p {
  margin: 4px 0 0 !important;
  font-size: .85rem !important;
  color: var(--text-muted) !important;
  line-height: 1.6 !important;
}
#fia-app .synth-alert strong { color: var(--text) !important; }

/* — 2 colonnes bad/good — */
#fia-app .synth-two-cols {
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap: 14px !important;
}
@media (max-width: 560px) {
  #fia-app .synth-two-cols { grid-template-columns: 1fr !important; }
}
#fia-app .synth-col {
  border-radius: 12px !important;
  padding: 16px !important;
}
#fia-app .synth-col ul {
  list-style: none !important;
  margin: 8px 0 0 !important;
  padding: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 6px !important;
}
#fia-app .synth-col ul li {
  font-size: .82rem !important;
  color: var(--text-muted) !important;
  line-height: 1.4 !important;
  padding-left: 4px !important;
}
#fia-app .synth-col-bad {
  background: rgba(239,68,68,.08) !important;
  border: 1px solid rgba(239,68,68,.22) !important;
}
#fia-app .synth-col-good {
  background: rgba(52,211,153,.07) !important;
  border: 1px solid rgba(52,211,153,.22) !important;
}
#fia-app .col-label {
  font-size: .78rem !important;
  font-weight: 800 !important;
  text-transform: uppercase !important;
  letter-spacing: .06em !important;
  color: var(--text-muted) !important;
  margin-bottom: 2px !important;
}

/* — Bloc Amigraf — */
#fia-app .synth-amigraf {
  background: rgba(123,47,190,.07) !important;
  border: 1px solid rgba(123,47,190,.22) !important;
  border-radius: 14px !important;
  padding: 20px !important;
}
#fia-app .synth-amigraf-title {
  font-size: .9rem !important;
  font-weight: 800 !important;
  color: #a855f7 !important;
  margin-bottom: 14px !important;
}
#fia-app .synth-amigraf-rows {
  display: flex !important;
  flex-direction: column !important;
  gap: 8px !important;
}
#fia-app .amigraf-row {
  padding: 10px 14px !important;
  border-radius: 8px !important;
  font-size: .84rem !important;
  line-height: 1.45 !important;
}
#fia-app .amigraf-ok  { background: rgba(52,211,153,.1) !important; color: #6ee7b7 !important; }
#fia-app .amigraf-warn { background: rgba(251,191,36,.1) !important; color: #fcd34d !important; }
#fia-app .amigraf-bad { background: rgba(239,68,68,.1) !important; color: #fca5a5 !important; }

/* — Actions — */
#fia-app .synth-actions {
  background: linear-gradient(135deg, rgba(232,71,30,.06), rgba(212,51,122,.06)) !important;
  border: 1px solid rgba(212,51,122,.18) !important;
  border-radius: 14px !important;
  padding: 20px !important;
}
#fia-app .synth-action-title {
  font-size: .9rem !important;
  font-weight: 800 !important;
  color: var(--ami-pink) !important;
  margin-bottom: 12px !important;
}
#fia-app .synth-action-list {
  margin: 0 !important;
  padding-left: 18px !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 8px !important;
}
#fia-app .synth-action-list li {
  font-size: .85rem !important;
  color: var(--text-muted) !important;
  line-height: 1.55 !important;
}
#fia-app .synth-action-list strong { color: var(--text) !important; }

/* — Méta-règle "3 questions" — */
#fia-app .synth-3q {
  display: flex !important;
  flex-direction: column !important;
  gap: 10px !important;
}
#fia-app .synth-3q-item {
  display: flex !important;
  gap: 14px !important;
  align-items: flex-start !important;
  background: rgba(255,255,255,.04) !important;
  border-radius: 10px !important;
  padding: 14px 16px !important;
  border: 1px solid rgba(255,255,255,.07) !important;
}
#fia-app .synth-3q-num {
  width: 28px !important;
  height: 28px !important;
  border-radius: 50% !important;
  background: linear-gradient(135deg, var(--ami-pink), #7B2FBE) !important;
  color: #fff !important;
  font-size: .78rem !important;
  font-weight: 900 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex-shrink: 0 !important;
}
#fia-app .synth-3q-text {
  font-size: .85rem !important;
  color: var(--text-muted) !important;
  line-height: 1.5 !important;
}
#fia-app .synth-3q-text strong { color: var(--text) !important; font-size: .88rem !important; display: block !important; margin-bottom: 2px !important; }

/* — Piège Canva/AWS — */
#fia-app .synth-trap {
  display: flex !important;
  gap: 14px !important;
  background: rgba(239,68,68,.07) !important;
  border: 1px solid rgba(239,68,68,.2) !important;
  border-radius: 12px !important;
  padding: 18px !important;
  align-items: flex-start !important;
}
#fia-app .synth-trap-icon { font-size: 1.8rem !important; flex-shrink: 0 !important; }
#fia-app .synth-trap p {
  margin: 4px 0 0 !important;
  font-size: .83rem !important;
  color: var(--text-muted) !important;
  line-height: 1.55 !important;
}
#fia-app .synth-trap strong { color: #f87171 !important; }

/* — Tableau comparatif droits — */
#fia-app .synth-rights-table {
  width: 100% !important;
  border-collapse: separate !important;
  border-spacing: 0 6px !important;
  font-size: .8rem !important;
}
#fia-app .synth-rights-table th {
  font-size: .7rem !important;
  font-weight: 800 !important;
  text-transform: uppercase !important;
  letter-spacing: .07em !important;
  color: var(--text-dim) !important;
  padding: 4px 12px 8px !important;
  text-align: left !important;
}
#fia-app .synth-rights-table td {
  padding: 10px 12px !important;
  color: var(--text-muted) !important;
  line-height: 1.4 !important;
  background: rgba(255,255,255,.035) !important;
}
#fia-app .synth-rights-table td:first-child { border-radius: 8px 0 0 8px !important; font-weight: 700 !important; color: var(--text) !important; }
#fia-app .synth-rights-table td:last-child { border-radius: 0 8px 8px 0 !important; }

/* — Matching game — sélection améliorée — */
#fia-app .match-selected-indicator {
  margin: 14px 0 4px !important;
  padding: 10px 16px !important;
  background: rgba(212,51,122,.1) !important;
  border: 1px dashed rgba(212,51,122,.4) !important;
  border-radius: 10px !important;
  font-size: .83rem !important;
  color: var(--ami-pink) !important;
  font-weight: 700 !important;
  text-align: center !important;
  min-height: 40px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  transition: all .25s ease !important;
}
#fia-app .match-selected-indicator.has-selection {
  background: rgba(212,51,122,.16) !important;
  border-style: solid !important;
}
#fia-app .fia-company-card {
  cursor: pointer !important;
  transition: transform .18s, box-shadow .18s, border-color .18s !important;
  position: relative !important;
}
#fia-app .fia-company-card.selected {
  border-color: var(--ami-pink) !important;
  box-shadow: 0 0 0 3px rgba(212,51,122,.35), 0 6px 24px rgba(212,51,122,.25) !important;
  transform: translateY(-3px) !important;
}
#fia-app .fia-company-card.selected::after {
  content: '✓' !important;
  position: absolute !important;
  top: -8px !important;
  right: -8px !important;
  width: 20px !important;
  height: 20px !important;
  background: var(--ami-pink) !important;
  color: #fff !important;
  border-radius: 50% !important;
  font-size: .65rem !important;
  font-weight: 900 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}
#fia-app .fia-match-instructions {
  background: rgba(96,165,250,.07) !important;
  border: 1px solid rgba(96,165,250,.18) !important;
  border-radius: 10px !important;
  padding: 12px 16px !important;
  font-size: .82rem !important;
  color: var(--text-muted) !important;
  line-height: 1.5 !important;
  margin-bottom: 18px !important;
  display: flex !important;
  gap: 10px !important;
  align-items: flex-start !important;
}
#fia-app .fia-match-instructions .instr-icon { font-size: 1.1rem !important; flex-shrink: 0 !important; }

/* ════════════════════════════════════════════════════
   ÉTAPE 8 — VISION IA + JAUGES OUTILS
   ════════════════════════════════════════════════════ */

/* ── Vision card ── */
#fia-app .fia-vision-card {
  border-left: 4px solid #8b5cf6 !important;
  background: linear-gradient(135deg, rgba(139,92,246,.04) 0%, transparent 60%) !important;
}
#fia-app .vision-card-header {
  display: flex !important;
  gap: 14px !important;
  align-items: flex-start !important;
  margin-bottom: 16px !important;
}
#fia-app .vision-card-icon {
  font-size: 2rem !important;
  flex-shrink: 0 !important;
  line-height: 1 !important;
}
#fia-app .vision-card-title {
  font-size: 1.05rem !important;
  font-weight: 800 !important;
  margin: 0 0 4px !important;
  color: var(--text-bright) !important;
}
#fia-app .vision-card-desc {
  font-size: .82rem !important;
  color: var(--text-muted) !important;
  margin: 0 !important;
}
#fia-app .vision-prompts {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 8px !important;
  margin-bottom: 16px !important;
}
#fia-app .vision-prompt-chip {
  background: rgba(139,92,246,.1) !important;
  border: 1px solid rgba(139,92,246,.22) !important;
  color: #a78bfa !important;
  font-size: .78rem !important;
  font-weight: 500 !important;
  padding: 5px 12px !important;
  border-radius: 20px !important;
  cursor: default !important;
  user-select: none !important;
}
#fia-app .vision-textarea {
  min-height: 130px !important;
  font-size: .9rem !important;
  line-height: 1.6 !important;
  resize: vertical !important;
}
#fia-app .vision-char-counter {
  text-align: right !important;
  font-size: .73rem !important;
  color: var(--text-dim) !important;
  margin-top: 6px !important;
}

/* ── Tools card ── */
#fia-app .fia-tools-card {
  border-left: 4px solid #3b82f6 !important;
}
#fia-app .tools-card-header {
  display: flex !important;
  gap: 14px !important;
  align-items: flex-start !important;
  margin-bottom: 20px !important;
}
#fia-app .tools-card-icon {
  font-size: 2rem !important;
  flex-shrink: 0 !important;
  line-height: 1 !important;
}
#fia-app .tools-card-title {
  font-size: 1.05rem !important;
  font-weight: 800 !important;
  margin: 0 0 4px !important;
  color: var(--text-bright) !important;
}
#fia-app .tools-card-desc {
  font-size: .82rem !important;
  color: var(--text-muted) !important;
  margin: 0 !important;
}

/* ── Gauge legend ── */
#fia-app .tool-gauge-legend {
  display: flex !important;
  gap: 18px !important;
  flex-wrap: wrap !important;
  margin-bottom: 18px !important;
  padding: 10px 14px !important;
  background: rgba(255,255,255,.03) !important;
  border-radius: 10px !important;
  border: 1px solid var(--border) !important;
}
#fia-app .tgl-item {
  display: flex !important;
  align-items: center !important;
  gap: 6px !important;
  font-size: .78rem !important;
  color: var(--text-muted) !important;
  font-weight: 500 !important;
}
#fia-app .tgl-dot {
  width: 10px !important;
  height: 10px !important;
  border-radius: 50% !important;
  flex-shrink: 0 !important;
}
#fia-app .tgl-0 { background: #94a3b8 !important; }
#fia-app .tgl-3 { background: #34d399 !important; }
#fia-app .tgl-5 { background: #8b5cf6 !important; }

/* ── Gauge row ── */
#fia-app .tool-gauges-list {
  display: flex !important;
  flex-direction: column !important;
  gap: 10px !important;
  margin-bottom: 24px !important;
}
#fia-app .tool-gauge-row {
  display: grid !important;
  grid-template-columns: 160px 1fr 120px !important;
  align-items: center !important;
  gap: 14px !important;
  padding: 10px 14px !important;
  border-radius: 12px !important;
  background: rgba(255,255,255,.025) !important;
  border: 1px solid transparent !important;
  transition: background .15s, border-color .15s !important;
}
#fia-app .tool-gauge-row:hover {
  background: rgba(255,255,255,.05) !important;
  border-color: var(--border) !important;
}
#fia-app .tool-gauge-custom {
  grid-template-columns: 160px 1fr 120px 32px !important;
  border-style: dashed !important;
  border-color: rgba(59,130,246,.25) !important;
}
#fia-app .tg-label {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  min-width: 0 !important;
}
#fia-app .tg-icon {
  font-size: 1.1rem !important;
  flex-shrink: 0 !important;
}
#fia-app .tg-name {
  font-size: .84rem !important;
  font-weight: 600 !important;
  color: var(--text-bright) !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

/* ── Slider track + thumb ── */
#fia-app .tg-slider-wrap {
  display: flex !important;
  flex-direction: column !important;
  gap: 3px !important;
}
#fia-app .tool-gauge-input {
  -webkit-appearance: none !important;
  appearance: none !important;
  width: 100% !important;
  height: 6px !important;
  border-radius: 3px !important;
  cursor: pointer !important;
  outline: none !important;
  border: none !important;
  background: linear-gradient(
    to right,
    var(--gauge-color, #94a3b8) 0%,
    var(--gauge-color, #94a3b8) var(--gauge-pct, 0%),
    rgba(255,255,255,.12) var(--gauge-pct, 0%),
    rgba(255,255,255,.12) 100%
  ) !important;
  transition: background .1s !important;
}
#fia-app .tool-gauge-input::-webkit-slider-thumb {
  -webkit-appearance: none !important;
  width: 18px !important;
  height: 18px !important;
  border-radius: 50% !important;
  background: var(--gauge-color, #94a3b8) !important;
  box-shadow: 0 0 0 3px rgba(255,255,255,.15), 0 2px 6px rgba(0,0,0,.4) !important;
  cursor: pointer !important;
  transition: transform .12s, box-shadow .12s !important;
}
#fia-app .tool-gauge-input::-webkit-slider-thumb:hover {
  transform: scale(1.25) !important;
  box-shadow: 0 0 0 5px rgba(255,255,255,.2), 0 2px 8px rgba(0,0,0,.5) !important;
}
#fia-app .tool-gauge-input::-moz-range-thumb {
  width: 18px !important;
  height: 18px !important;
  border-radius: 50% !important;
  background: var(--gauge-color, #94a3b8) !important;
  border: none !important;
  cursor: pointer !important;
}
#fia-app .tg-track-labels {
  display: flex !important;
  justify-content: space-between !important;
  padding: 0 2px !important;
}
#fia-app .tg-track-labels span {
  font-size: .64rem !important;
  color: var(--text-dim) !important;
  line-height: 1 !important;
}

/* ── Value label ── */
#fia-app .tg-value-label {
  font-size: .78rem !important;
  font-weight: 700 !important;
  color: #94a3b8 !important;
  text-align: right !important;
  transition: color .2s !important;
  white-space: nowrap !important;
}

/* ── Remove button (custom tools) ── */
#fia-app .tg-remove-btn {
  background: transparent !important;
  border: 1px solid rgba(239,68,68,.3) !important;
  color: #f87171 !important;
  width: 26px !important;
  height: 26px !important;
  border-radius: 50% !important;
  cursor: pointer !important;
  font-size: 1rem !important;
  line-height: 1 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 0 !important;
  transition: background .15s, color .15s !important;
  box-shadow: none !important;
}
#fia-app .tg-remove-btn:hover {
  background: rgba(239,68,68,.15) !important;
  color: #fca5a5 !important;
}

/* ── Add custom tool ── */
#fia-app .add-tool-wrap {
  border-top: 1px dashed var(--border) !important;
  padding-top: 16px !important;
  margin-top: 4px !important;
}
#fia-app .add-tool-inner {
  display: flex !important;
  gap: 10px !important;
  flex-wrap: wrap !important;
}
#fia-app .add-tool-input {
  flex: 1 !important;
  min-width: 180px !important;
  height: 40px !important;
  padding: 0 14px !important;
  font-size: .88rem !important;
}
#fia-app .add-tool-btn {
  height: 40px !important;
  font-size: .84rem !important;
  white-space: nowrap !important;
  display: flex !important;
  align-items: center !important;
  gap: 6px !important;
}
#fia-app .add-tool-btn span {
  font-size: 1.1rem !important;
  line-height: 1 !important;
  font-weight: 300 !important;
}
#fia-app .add-tool-hint {
  font-size: .74rem !important;
  color: var(--text-dim) !important;
  margin: 6px 0 0 !important;
}

/* ════════════════════════════════════════════════════
   RESPONSIVE
   ════════════════════════════════════════════════════ */
@media (max-width:640px) {
  #fia-app .fia-card { padding:20px 16px !important; }
  #fia-hero { padding:50px 20px 40px !important; }
  #fia-app .fia-dept-grid { grid-template-columns:1fr !important; }
  #fia-app .fia-intro-grid { grid-template-columns:1fr 1fr !important; }
  #fia-app .fia-5p-card { flex-direction:column !important; }
  #fia-app .fia-btn-row { flex-direction:column-reverse !important; }
  #fia-app .fia-btn { width:100% !important; justify-content:center !important; }
  #fia-app .fia-company-grid { grid-template-columns:1fr 1fr !important; }
  #fia-app .fia-cert-stats { gap:10px; }
  #fia-app .tool-gauge-row {
    grid-template-columns: 1fr !important;
    gap: 8px !important;
  }
  #fia-app .tool-gauge-custom { grid-template-columns: 1fr 32px !important; }
  #fia-app .tg-value-label { text-align: left !important; }
  #fia-app .vision-prompts { gap: 6px !important; }
  #fia-app .add-tool-inner { flex-direction: column !important; }
  #fia-app .add-tool-input { min-width: 100% !important; }
}