/* --- CONFIGURATION GÉNÉRALE --- */
body { margin: 0; padding: 0; background: #050505; font-family: 'Rajdhani', sans-serif; color: white; overflow: hidden; }
.view-section { position: absolute; top: 0; left: 0; width: 100%; height: calc(100vh - 60px); display: none; overflow-y: auto; }
.view-section.active { display: block; }

/* MAP */
#map { height: 100%; width: 100%; z-index: 1; background: #121212; }
.fab-add { position: absolute; bottom: 80px; right: 20px; background: #ff3b3b; width: 50px; height: 50px; border-radius: 50%; display: flex; justify-content: center; align-items: center; font-size: 30px; box-shadow: 0 0 15px rgba(255,0,0,0.5); z-index: 4000; cursor: pointer; transition: transform 0.2s; }
.fab-add:active { transform: scale(0.9); }

/* ICONES MAP */
.map-marker { display: flex; justify-content: center; align-items: center; width: 40px; height: 40px; background: #111; border-radius: 50%; font-size: 20px; box-shadow: 0 0 10px rgba(0,0,0,0.8); border: 2px solid white; transition: transform 0.2s; }
.marker-Rasso { border-color: #ff3b3b; box-shadow: 0 0 15px rgba(255, 59, 59, 0.6); }
.marker-Garage { border-color: #0984e3; box-shadow: 0 0 15px rgba(9, 132, 227, 0.6); }
.marker-Detailing { border-color: #a29bfe; box-shadow: 0 0 15px rgba(162, 155, 254, 0.6); }
.marker-Photographe { border-color: #55efc4; box-shadow: 0 0 15px rgba(85, 239, 196, 0.6); }

/* LISTE & FILTRES */
#listView { background: #050505; padding: 20px; padding-bottom: 80px; }
.list-header { text-align: center; margin-bottom: 15px; border-bottom: 1px solid #333; padding-bottom: 10px; position: sticky; top: 0; background: #050505; z-index: 10; }
.filters-bar { display: flex; gap: 10px; justify-content: center; }
.filters-bar select { width: 48%; font-size: 14px; padding: 8px; background: #111; border-color: #444; }

/* CARDS */
.rasso-card { background: #161616; border: 1px solid #333; border-left: 3px solid #ff3b3b; margin-bottom: 15px; padding: 15px; border-radius: 5px; position: relative; }
.rasso-card.Pro { border-left-color: #0984e3; }
.rasso-card h3 { margin: 0 0 5px 0; font-size: 18px; text-transform: uppercase; }
.rasso-infos { font-size: 14px; color: #aaa; margin-bottom: 10px; line-height: 1.4; }
.rasso-actions { display: flex; justify-content: space-between; align-items: center; margin-top: 10px; border-top: 1px solid #222; padding-top: 10px; }

/* BADGES & BOUTONS */
.badge { display: inline-block; padding: 2px 6px; border-radius: 4px; font-size: 10px; font-weight: bold; text-transform: uppercase; margin-left: 5px; }
.badge-cat { background: #333; color: white; border: 1px solid #555; }
.badge-recur { background: #6c5ce7; color: white; }
.badge-free { background: #00b894; color: black; }
.badge-paid { background: #fdcb6e; color: black; }

.btn-fire { background: #222; border: 1px solid #444; color: #777; padding: 5px 12px; border-radius: 20px; cursor: pointer; display: flex; align-items: center; gap: 5px; font-weight: bold; font-size: 12px; }
.btn-fire.active { background: #d60000; color: white; border-color: #ff3b3b; box-shadow: 0 0 10px rgba(214,0,0,0.4); }
.btn-reviews { background: #222; border: 1px solid #0984e3; color: #0984e3; padding: 5px 12px; border-radius: 20px; cursor: pointer; font-weight: bold; font-size: 12px; }

/* --- NOUVEAU : GARAGE & BADGES --- */
.user-badges-container { display:flex; justify-content:center; gap:5px; margin: 10px 0; flex-wrap:wrap; }
.user-badge { padding: 4px 8px; border-radius: 4px; font-size: 10px; font-weight: bold; text-transform: uppercase; border: 1px solid #444; background: #222; }
.badge-gold { background: linear-gradient(45deg, #ffd700, #b8860b); color: black; border: none; }
.badge-silver { background: linear-gradient(45deg, #c0c0c0, #7f8c8d); color: black; border: none; }
.badge-bronze { background: linear-gradient(45deg, #cd7f32, #a0522d); color: black; border: none; }

.garage-item { background: #111; padding: 8px; margin: 5px 0; border-left: 3px solid #d60000; display:flex; justify-content:space-between; align-items:center; }
.garage-name { font-weight:bold; font-size:14px; }
.btn-del-car { background:transparent; border:none; color:#555; cursor:pointer; font-size:12px; }

/* REVIEWS */
.review-item { background: #111; padding: 10px; margin-bottom: 10px; border-radius: 5px; border-left: 2px solid #0984e3; }
.review-head { display: flex; justify-content: space-between; font-size: 12px; color: #aaa; margin-bottom: 5px; }
.review-stars { color: #f1c40f; letter-spacing: 2px; }
.review-text { font-size: 14px; color: #ddd; font-style: italic; }

/* UI COMMUNE */
.profile-container { padding: 30px; text-align: center; max-width: 400px; margin: 0 auto; }
label { font-size: 12px; color: #ff3b3b; text-transform: uppercase; font-weight: bold; display: block; margin-top: 12px; text-align: left; }
input, select, textarea { width: 100%; padding: 12px; margin: 5px 0; background: #0d0d0d; border: 1px solid #333; color: white; font-family: 'Rajdhani'; box-sizing: border-box; border-radius: 4px; }
.btn-main { width: 100%; background: linear-gradient(45deg, #d60000, #ff4d4d); color: white; padding: 12px; border: none; font-weight: bold; cursor: pointer; text-transform: uppercase; margin-top: 10px; border-radius: 4px; }
.btn-main:disabled { background: #333; cursor: not-allowed; opacity: 0.5; }
.btn-outline { width: 100%; background: transparent; border: 1px solid #555; color: #aaa; padding: 12px; font-weight: bold; cursor: pointer; text-transform: uppercase; margin-top: 10px; border-radius: 4px; }
.btn-google { width: 100%; background: white; color: #333; border: none; padding: 12px; font-weight: bold; cursor: pointer; margin-bottom: 10px; border-radius: 4px; }

.navbar { position: fixed; bottom: 0; width: 100%; height: 60px; background: #111; border-top: 2px solid #ff3b3b; display: flex; justify-content: space-around; align-items: center; z-index: 5000; }
.nav-item { text-align: center; color: #555; font-size: 12px; cursor: pointer; flex: 1; }
.nav-item span { display: block; font-size: 20px; margin-bottom: 2px; }
.nav-item.active { color: #ff3b3b; }

.modal { display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.9); z-index: 6000; justify-content: center; align-items: center; backdrop-filter: blur(5px); }
.modal-content { background: #1a1a1a; border: 1px solid #333; padding: 25px; width: 85%; border-radius: 10px; color: #ddd; max-height: 90vh; overflow-y: auto; text-align: center; box-shadow: 0 0 20px rgba(255,59,59,0.2); }
.close-modal { float:right; cursor:pointer; font-size:24px; color:#ff3b3b; }

.leaflet-popup-content-wrapper { background: #111; color: white; border: 1px solid #ff3b3b; font-family: 'Rajdhani'; border-radius: 5px; }
.leaflet-popup-tip { background: #111; border-top: 1px solid #ff3b3b; }
.popup-fire { margin-top:5px; padding: 5px; background: #222; border-radius: 5px; text-align: center; cursor: pointer; border: 1px solid #444; }
.popup-fire.active { background: #d60000; color: white; }