/* ================================================================
   PROP PHONE STUDIO — lot2-screens.css
   Styles pour : contacts, map-nav
   ================================================================ */

/* ---------- Contacts (#screen-contacts) ---------- */
#screen-contacts { background: #0e0e11; color: #fff; display: flex; flex-direction: column; }
.contacts-header { padding: 10px 16px 6px; }
.contacts-header h2 { margin: 0 0 8px; font-size: 22px; }
.contacts-search { width: 100%; box-sizing: border-box; padding: 8px 12px; border-radius: 10px; background: #1c1c20; border: 1px solid #2a2a2f; color: #fff; font-size: 13px; }
.contacts-groups-bar { display: flex; gap: 6px; padding: 8px 16px; overflow-x: auto; }
.contacts-group-chip { flex-shrink: 0; padding: 5px 12px; border-radius: 14px; background: #1a1a1d; border: 1px solid #2a2a2f; color: #ccc; font-size: 12px; cursor: pointer; }
.contacts-group-chip.active { background: #4f8ef7; border-color: #4f8ef7; color: #fff; }
.contacts-scroll { flex: 1; overflow-y: auto; padding: 4px 0 12px; }
.contacts-section-label { padding: 10px 16px 4px; font-size: 11px; color: #8a8a92; text-transform: uppercase; letter-spacing: 0.5px; }
.contacts-favs-row { display: flex; gap: 14px; padding: 4px 16px 10px; overflow-x: auto; }
.contacts-fav { display: flex; flex-direction: column; align-items: center; gap: 4px; font-size: 11px; flex-shrink: 0; cursor: pointer; }
.contacts-avatar { width: 42px; height: 42px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-weight: 700; color: #fff; }
.contacts-row { display: flex; align-items: center; gap: 12px; padding: 8px 16px; cursor: pointer; }
.contacts-row:active { background: rgba(255,255,255,0.04); }
.contacts-row-info { display: flex; flex-direction: column; flex: 1; }
.contacts-row-info b { font-size: 14px; }
.contacts-row-info span { font-size: 12px; color: #8a8a92; }
.contacts-star { color: #f0d989; }
.contacts-empty { text-align: center; padding: 30px; color: #666; font-size: 13px; }

.contacts-detail { display: flex; flex-direction: column; align-items: center; padding: 16px; text-align: center; height: 100%; overflow-y: auto; }
.contacts-back { align-self: flex-start; background: none; border: none; color: #4f8ef7; font-size: 14px; cursor: pointer; margin-bottom: 10px; }
.contacts-detail-avatar { width: 84px; height: 84px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 32px; font-weight: 700; color: #fff; margin-bottom: 10px; }
.contacts-detail h2 { margin: 0 0 2px; }
.contacts-detail-sub { color: #8a8a92; font-size: 13px; margin-bottom: 18px; }
.contacts-detail-actions { display: flex; gap: 22px; margin-bottom: 20px; }
.contacts-action-btn { display: flex; flex-direction: column; align-items: center; gap: 4px; background: #1c1c20; border: 1px solid #2a2a2f; border-radius: 14px; padding: 10px 16px; color: #fff; font-size: 10px; cursor: pointer; }
.contacts-detail-info { width: 100%; background: #16161a; border-radius: 12px; overflow: hidden; margin-bottom: 16px; }
.contacts-info-row { display: flex; justify-content: space-between; padding: 10px 14px; border-bottom: 1px solid #232327; font-size: 13px; }
.contacts-info-row:last-child { border-bottom: none; }
.contacts-info-row .label { color: #8a8a92; }
.contacts-fav-toggle { background: none; border: 1px solid #2a2a2f; color: #f0d989; padding: 8px 16px; border-radius: 10px; font-size: 12px; cursor: pointer; }

/* ---------- Carte / Navigation (#screen-map) ---------- */
#screen-map { background: #10151a; color: #fff; }
.mapnav-wrap { position: relative; height: 100%; overflow: hidden; }
.mapnav-svg { width: 100%; height: 100%; display: block; }
.mapnav-marker { cursor: pointer; }
.mapnav-pos { filter: drop-shadow(0 0 4px rgba(79,142,247,0.8)); }
.mapnav-search-bar { position: absolute; top: 10px; left: 10px; right: 10px; }
.mapnav-search-bar input { width: 100%; box-sizing: border-box; padding: 9px 14px; border-radius: 12px; background: rgba(20,22,26,0.92); border: 1px solid rgba(255,255,255,0.1); color: #fff; font-size: 13px; backdrop-filter: blur(6px); }
.mapnav-results { position: absolute; top: 54px; left: 10px; right: 10px; background: rgba(20,22,26,0.92); border-radius: 12px; overflow: hidden; backdrop-filter: blur(6px); }
.mapnav-result { padding: 10px 14px; font-size: 13px; border-bottom: 1px solid rgba(255,255,255,0.06); cursor: pointer; }
.mapnav-result:last-child { border-bottom: none; }

.mapnav-route-card { position: absolute; left: 10px; right: 10px; bottom: 14px; background: rgba(18,20,24,0.94); border-radius: 16px; padding: 16px; backdrop-filter: blur(8px); }
.mapnav-route-dest { font-weight: 700; margin-bottom: 4px; }
.mapnav-route-stats { color: #8a8a92; font-size: 13px; margin-bottom: 12px; }
.mapnav-mode-toggle { display: flex; gap: 8px; margin-bottom: 12px; }
.mapnav-mode-btn { flex: 1; padding: 8px; border-radius: 10px; background: #1c1c20; border: 1px solid #2a2a2f; color: #ccc; font-size: 12px; cursor: pointer; }
.mapnav-mode-btn.active { background: #4f8ef7; border-color: #4f8ef7; color: #fff; }
.mapnav-start-btn { width: 100%; padding: 11px; border-radius: 10px; background: #34c759; border: none; color: #fff; font-weight: 700; font-size: 14px; cursor: pointer; }

.mapnav-wrap.navigating .mapnav-svg { filter: brightness(0.85); }
.mapnav-nav-banner { position: absolute; top: 10px; left: 10px; right: 10px; background: rgba(18,20,24,0.94); border-radius: 14px; padding: 14px; backdrop-filter: blur(8px); }
.mapnav-nav-instruction { font-weight: 700; font-size: 14px; }
.mapnav-nav-eta { color: #8a8a92; font-size: 12px; margin-top: 2px; }
.mapnav-progress-bar { position: absolute; left: 10px; right: 10px; bottom: 14px; height: 5px; background: rgba(255,255,255,0.12); border-radius: 3px; }
.mapnav-progress-fill { height: 100%; background: #4f8ef7; border-radius: 3px; transition: width 0.6s; }

.mapnav-arrived { height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; text-align: center; }
.mapnav-arrived-icon { width: 60px; height: 60px; border-radius: 50%; background: #34c759; display: flex; align-items: center; justify-content: center; font-size: 28px; }
.mapnav-arrived-dest { color: #8a8a92; font-size: 13px; margin-bottom: 14px; }
.mapnav-close-btn { padding: 9px 22px; border-radius: 10px; background: #1c1c20; border: 1px solid #2a2a2f; color: #fff; font-size: 13px; cursor: pointer; }