*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
body { font-family: 'DM Sans', 'Segoe UI', system-ui, sans-serif; background: #f8fafc; color: #0f172a; min-height: 100vh; -webkit-font-smoothing: antialiased; }

/* --- HEADER --- */
.header { background: #fff; border-bottom: 1px solid #e2e8f0; padding: 12px 16px; position: sticky; top: 0; z-index: 10; display: none; }
.header-inner { max-width: 640px; margin: 0 auto; display: flex; align-items: center; justify-content: space-between; }
.logo { display: flex; align-items: center; gap: 6px; background: none; border: none; cursor: pointer; padding: 0; text-decoration: none; }
.logo-box { width: 28px; height: 28px; border-radius: 6px; background: #1e293b; color: #fff; display: flex; align-items: center; justify-content: center; font-weight: 800; font-size: 11px; }
.logo-text { font-weight: 800; font-size: 16px; color: #0f172a; }
.count-badge { font-size: 13px; color: #64748b; font-weight: 500; }

/* --- HOME --- */
.home { max-width: 540px; margin: 0 auto; padding: 60px 20px; text-align: center; }
.home-logo { display: inline-flex; align-items: center; gap: 8px; margin-bottom: 32px; }
.home-logo-box { width: 36px; height: 36px; border-radius: 8px; background: #1e293b; color: #fff; display: flex; align-items: center; justify-content: center; font-weight: 800; font-size: 16px; }
.home-logo-text { font-weight: 800; font-size: 22px; color: #0f172a; letter-spacing: -0.5px; }
.home h1 { font-size: 28px; font-weight: 800; color: #0f172a; line-height: 1.3; margin-bottom: 10px; }
.home p { color: #64748b; font-size: 15px; line-height: 1.6; margin-bottom: 36px; }
.home-buttons { display: flex; flex-direction: column; gap: 12px; max-width: 320px; margin: 0 auto; }
.btn-primary { padding: 14px 0; border-radius: 10px; background: #1e293b; color: #fff; border: none; cursor: pointer; font-weight: 700; font-size: 15px; transition: background .15s; font-family: inherit; }
.btn-primary:hover { background: #334155; }
.btn-secondary { padding: 14px 0; border-radius: 10px; background: #fff; color: #1e293b; border: 2px solid #1e293b; cursor: pointer; font-weight: 700; font-size: 15px; transition: background .15s; font-family: inherit; }
.btn-secondary:hover { background: #f1f5f9; }

/* --- SEARCH --- */
.search-wrap { max-width: 640px; margin: 0 auto; padding: 16px 16px 40px; }
.search-bar { position: relative; margin-bottom: 12px; }
.search-bar input { width: 100%; padding: 10px 12px 10px 38px; border-radius: 8px; border: 1px solid #e2e8f0; font-size: 14px; outline: none; background: #fff; font-family: inherit; }
.search-bar input:focus { border-color: #94a3b8; }
.search-bar svg { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); color: #94a3b8; }
.filters { display: flex; gap: 8px; margin-bottom: 16px; flex-wrap: wrap; }
.filters select { flex: 1; min-width: 160px; padding: 9px 12px; border-radius: 8px; border: 1px solid #e2e8f0; font-size: 13px; background: #fff; font-family: inherit; color: #94a3b8; }
.filters select.active { color: #0f172a; }
.btn-clear { padding: 8px 12px; border-radius: 8px; border: 1px solid #e2e8f0; background: #fff; cursor: pointer; display: flex; align-items: center; gap: 4px; font-size: 13px; color: #64748b; font-family: inherit; }
.btn-clear:hover { background: #f1f5f9; }

/* --- CARDS --- */
.card { display: flex; flex-direction: column; gap: 10px; padding: 16px; background: #fff; border: 1px solid #e2e8f0; border-radius: 10px; cursor: pointer; text-align: left; width: 100%; transition: box-shadow .15s, border-color .15s; }
.card:hover { box-shadow: 0 4px 12px rgba(0,0,0,.08); border-color: #94a3b8; }
.card-top { display: flex; justify-content: space-between; align-items: flex-start; }
.card-identity { display: flex; align-items: center; gap: 10px; }
.avatar { width: 42px; height: 42px; border-radius: 50%; background: #1e293b; color: #fff; display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 15px; flex-shrink: 0; }
.avatar-lg { width: 60px; height: 60px; font-size: 22px; font-weight: 800; background: #fff; color: #1e293b; }
.card-name { font-weight: 700; font-size: 15px; color: #0f172a; }
.card-loc { font-size: 13px; color: #64748b; display: flex; align-items: center; gap: 4px; margin-top: 1px; }
.tags { display: flex; flex-wrap: wrap; gap: 4px; }
.tag { display: inline-block; padding: 3px 10px; border-radius: 6px; background: #f1f5f9; color: #334155; font-size: 12px; font-weight: 500; border: 1px solid #e2e8f0; }
.xp { font-size: 13px; color: #64748b; }
.results-list { display: flex; flex-direction: column; gap: 8px; }

/* --- DISPO TAG --- */
.dispo { display: inline-flex; align-items: center; gap: 6px; padding: 3px 10px; border-radius: 20px; font-size: 12px; font-weight: 600; }
.dispo-ok { background: #dcfce7; color: #166534; }
.dispo-ok .dot { background: #22c55e; }
.dispo-busy { background: #fee2e2; color: #991b1b; }
.dispo-busy .dot { background: #ef4444; }
.dispo-soon { background: #fef9c3; color: #854d0e; }
.dispo-soon .dot { background: #eab308; }
.dot { width: 7px; height: 7px; border-radius: 50%; }
.badge-pro { display: inline-flex; align-items: center; gap: 4px; padding: 3px 9px; border-radius: 20px; background: #dbeafe; color: #1e40af; font-size: 11px; font-weight: 700; }
.badge-guso { display: inline-flex; align-items: center; gap: 4px; padding: 3px 9px; border-radius: 20px; background: #f0fdf4; color: #166534; font-size: 11px; font-weight: 600; }

/* --- DETAIL --- */
.detail { max-width: 540px; margin: 0 auto; padding: 24px 16px; }
.btn-back { display: flex; align-items: center; gap: 4px; background: none; border: none; cursor: pointer; color: #64748b; font-size: 14px; padding: 8px 0; margin-bottom: 8px; font-family: inherit; }
.btn-back:hover { color: #334155; }
.detail-card { background: #fff; border: 1px solid #e2e8f0; border-radius: 12px; overflow: hidden; }
.detail-header { background: #1e293b; padding: 28px 24px; display: flex; align-items: center; gap: 16px; }
.detail-header-name { font-weight: 700; font-size: 20px; color: #fff; }
.detail-header-metiers { color: #94a3b8; font-size: 14px; margin-top: 2px; }
.detail-body { padding: 24px; display: flex; flex-direction: column; gap: 18px; }
.detail-meta { display: flex; align-items: center; gap: 24px; flex-wrap: wrap; }
.detail-xp { font-size: 13px; color: #64748b; display: flex; align-items: center; gap: 5px; }
.detail-bio { font-size: 14px; color: #334155; line-height: 1.6; }
.detail-sep { border: none; border-top: 1px solid #f1f5f9; }
.detail-info { display: flex; flex-direction: column; gap: 10px; }
.detail-info-row { display: flex; align-items: center; gap: 8px; font-size: 14px; color: #334155; }
.detail-info-row svg { color: #64748b; flex-shrink: 0; }
.detail-section-title { font-size: 13px; font-weight: 600; color: #64748b; margin-bottom: 8px; text-transform: uppercase; letter-spacing: 0.5px; }
.btn-contact { margin-top: 4px; padding: 12px 0; border-radius: 8px; background: #1e293b; color: #fff; border: none; cursor: pointer; font-weight: 600; font-size: 14px; width: 100%; font-family: inherit; transition: background .15s; }
.btn-contact:hover { background: #334155; }

/* --- FORM --- */
.form-wrap { max-width: 480px; margin: 0 auto; padding: 24px 16px; }
.form-card { background: #fff; border: 1px solid #e2e8f0; border-radius: 12px; padding: 24px; }
.form-card h2 { font-size: 18px; font-weight: 700; color: #0f172a; margin-bottom: 4px; }
.form-card .sub { color: #64748b; font-size: 13px; margin-bottom: 20px; }
.field { margin-bottom: 14px; }
.field label { display: block; font-size: 13px; font-weight: 600; color: #334155; margin-bottom: 4px; }
.field input, .field select { width: 100%; padding: 9px 12px; border-radius: 7px; border: 1px solid #e2e8f0; font-size: 14px; outline: none; font-family: inherit; background: #fff; }
.field input:focus, .field select:focus { border-color: #94a3b8; }
.field-short input { width: 100px; }
.metier-checkbox { display: flex; align-items: center; gap: 6px; cursor: pointer; font-size: 13px; color: #334155; padding: 4px 0; }
.metier-checkbox input[type="checkbox"] { width: 16px; height: 16px; accent-color: #1e293b; cursor: pointer; flex-shrink: 0; }
.metier-checkbox:hover { color: #0f172a; }
.exp-row { display: flex; gap: 6px; align-items: flex-start; }
.exp-row input { flex: 1; padding: 8px 10px; border-radius: 6px; border: 1px solid #e2e8f0; font-size: 13px; font-family: inherit; outline: none; }
.exp-row input:focus { border-color: #94a3b8; }
.exp-row .exp-year { width: 70px; flex: none; }
.exp-row .btn-remove-exp { width: 32px; height: 34px; border-radius: 6px; border: 1px solid #e2e8f0; background: #fff; cursor: pointer; display: flex; align-items: center; justify-content: center; color: #94a3b8; flex-shrink: 0; transition: color .15s, border-color .15s; }
.exp-row .btn-remove-exp:hover { color: #ef4444; border-color: #fca5a5; }
.exp-entry { display: flex; align-items: center; gap: 8px; padding: 10px 12px; background: #f8fafc; border: 1px solid #e2e8f0; border-radius: 8px; font-size: 13px; color: #334155; }
.exp-entry strong { color: #0f172a; }
.exp-entry .exp-year-tag { background: #e2e8f0; color: #475569; padding: 2px 8px; border-radius: 4px; font-size: 11px; font-weight: 600; flex-shrink: 0; }
.success-screen { max-width: 480px; margin: 40px auto; text-align: center; }
.success-screen .check { font-size: 48px; margin-bottom: 12px; color: #22c55e; }
.success-screen h2 { font-size: 20px; font-weight: 700; color: #0f172a; }
.success-screen p { color: #64748b; margin-top: 8px; font-size: 14px; }
.success-screen button { margin-top: 20px; }

/* --- EMPTY --- */
.empty { text-align: center; padding: 48px 0; color: #94a3b8; }
.empty .icon { font-size: 36px; margin-bottom: 8px; }
.empty .title { font-size: 15px; font-weight: 600; }
.empty .sub { font-size: 13px; margin-top: 4px; }

/* --- AUTH TABS --- */
.auth-tab-active { font-weight: 700 !important; color: #1e293b !important; border-bottom-color: #1e293b !important; }
.auth-tab-inactive { font-weight: 500 !important; color: #94a3b8 !important; border-bottom-color: transparent !important; }

/* --- USER MENU --- */
.user-badge { display: inline-flex; align-items: center; gap: 6px; padding: 5px 12px; border-radius: 6px; background: #f1f5f9; color: #334155; font-size: 12px; font-weight: 600; border: 1px solid #e2e8f0; cursor: default; }
.btn-logout { padding: 5px 10px; border-radius: 6px; background: none; color: #94a3b8; border: 1px solid #e2e8f0; cursor: pointer; font-size: 11px; font-family: inherit; transition: color .15s; }
.btn-logout:hover { color: #ef4444; border-color: #fca5a5; }

/* --- SCREEN VISIBILITY --- */
.screen { display: none; }
.screen.active { display: block; }

/* --- RESPONSIVE MOBILE --- */
@media (max-width: 640px) {
  /* Header compact */
  .header { padding: 8px 12px; }
  .header-inner { gap: 6px; }
  .logo-text { font-size: 14px; }
  .logo-box { width: 24px; height: 24px; font-size: 10px; }
  .count-badge { font-size: 11px; }

  /* Home */
  .home { padding: 40px 16px; }
  .home h1 { font-size: 22px; }
  .home p { font-size: 14px; margin-bottom: 28px; }
  .home-buttons { max-width: 100%; }

  /* Search */
  .search-wrap { padding: 12px 12px 30px; }
  .filters { flex-direction: column; gap: 6px; }
  .filters select { min-width: 100%; }

  /* Cards */
  .card { padding: 12px; gap: 8px; }
  .card-top { flex-direction: column; gap: 8px; }
  .card-name { font-size: 14px; }
  .card-loc { font-size: 12px; }
  .tag { font-size: 11px; padding: 2px 8px; }
  .xp { font-size: 12px; }

  /* Detail */
  .detail { padding: 16px 12px; }
  .detail-header { padding: 20px 16px; gap: 12px; }
  .detail-header-name { font-size: 17px; }
  .detail-body { padding: 16px; gap: 14px; }
  .detail-meta { gap: 10px; }

  /* Forms */
  .form-wrap { padding: 16px 12px; }
  .form-card { padding: 16px; }
  .form-card h2 { font-size: 16px; }

  /* Tarifs - forfaits en colonne sur mobile */
  .tarif-card { padding: 20px 16px !important; }
}

@media (max-width: 400px) {
  .home h1 { font-size: 20px; }
  .btn-primary { font-size: 14px; padding: 12px 0; }
  .btn-secondary { font-size: 14px; padding: 12px 0; }
  .avatar { width: 36px; height: 36px; font-size: 13px; }
}