:root {
    --bg-color: #ffffff; --text-color: #1a1a1a;
    --header-bg: #ffffff; --input-bg: #f5f7f9; --border-color: #efefef;
    --icon-filter: none;
}

[data-theme="dark"] {
    --bg-color: #121212; --text-color: #f5f5f5;
    --header-bg: #1e1e1e; --input-bg: #2d2d2d; --border-color: #3d3d3d;
    --icon-filter: invert(1) brightness(2);
}

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { margin: 0; padding: 0; width: 100%; height: 100%; overflow: hidden; font-family: 'Inter', sans-serif; background: var(--bg-color); }

header { background: var(--header-bg); border-bottom: 1px solid var(--border-color); z-index: 2000; position: fixed; top: 0; left: 0; right: 0; }
.header-container { max-width: 1400px; margin: 0 auto; padding: 10px 20px; display: flex; align-items: center; justify-content: space-between; height: 80px; }
.logo-link { display: flex; align-items: center; gap: 12px; text-decoration: none; }
.logo-img { width: 35px; }
.brand-name { font-weight: 900; font-size: 22px; letter-spacing: -1px; color: var(--text-color); }

.search-wrapper { position: relative; flex: 1; max-width: 450px; margin: 0 20px; }
input[type="text"] { 
    width: 100%; padding: 12px 50px 12px 45px; border-radius: 30px; 
    border: 1px solid var(--border-color); background: var(--input-bg); 
    color: var(--text-color); font-size: 16px; outline: none;
}
[data-theme="dark"] input[type="text"] { border: 2px solid #ffffff; background: #1e1e1e; color: #ffffff; }

.icon-loupe { position: absolute; left: 15px; top: 50%; transform: translateY(-50%); width: 18px; opacity: 0.5; }
body:not([data-theme="dark"]) .icon-loupe { filter: brightness(0); }
.btn-validate { position: absolute; right: 10px; top: 50%; transform: translateY(-50%); background: transparent; border: none; cursor: pointer; display: flex; }
.btn-validate img { width: 20px; filter: var(--icon-filter); }

.actions { display: flex; gap: 10px; }
.btn-icon { background: var(--input-bg); border: none; width: 42px; height: 42px; border-radius: 50%; cursor: pointer; display: flex; align-items: center; justify-content: center; }
.btn-icon img { width: 20px; filter: var(--icon-filter); }

/* ANIMATION ROTATIVE GPS */
.gps-loading img { animation: rotateGps 1s infinite linear; }
@keyframes rotateGps { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }

#map { height: 100vh; width: 100%; z-index: 1; padding-top: 80px; } 
@media (max-width: 768px) { 
    .header-container { flex-wrap: wrap; height: auto; padding: 10px 15px 15px; }
    .search-wrapper { order: 3; flex: 0 0 100%; max-width: 100%; margin: 12px 0 0; }
    #map { padding-top: 135px; }
}

#suggestions { position: absolute; top: 100%; left: 0; right: 0; background: var(--header-bg); border: 1px solid var(--border-color); border-radius: 15px; margin-top: 8px; z-index: 3000; display: none; box-shadow: 0 10px 25px rgba(0,0,0,0.15); max-height: 250px; overflow-y: auto; }
.sug-item { padding: 14px 20px; border-bottom: 1px solid var(--border-color); cursor: pointer; color: var(--text-color); text-align: left; }

/* MODAL SHARE */
#share-modal { position: fixed; inset: 0; background: rgba(0,0,0,0.8); z-index: 9000; display: none; align-items: center; justify-content: center; backdrop-filter: blur(10px); }
.modal-content { background: #ffffff !important; color: #1a1a1a !important; width: 95%; max-width: 420px; border-radius: 35px; padding: 50px 25px 30px; position: relative; text-align: center; }
.modal-title { font-weight: 900; font-size: 24px; margin-bottom: 25px; color: #1a1a1a !important; }
.btn-close-modal { position: absolute; top: 20px; right: 20px; background: #f4f4f4; border: none; width: 36px; height: 36px; border-radius: 50%; color: #000; cursor: pointer; font-weight: bold; }
.qr-border { display: inline-block; background: #fff; padding: 10px; border-radius: 15px; border: 1px solid #eee; margin-bottom: 20px; }
#qr-img { width: 150px; display: block; }
.share-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 15px; margin-bottom: 25px; }
.share-option { background: none; border: none; cursor: pointer; display: flex; flex-direction: column; align-items: center; gap: 8px; }
.share-icon-circle { width: 60px; height: 60px; border-radius: 50%; display: flex; align-items: center; justify-content: center; }
.share-icon-circle img { width: 28px; }
.wa-bg { background: #25D366; }
.standard-bg { background: #f4f4f4; }
.standard-bg img { filter: brightness(0); opacity: 0.8; }
.share-option span { font-size: 11px; font-weight: 800; color: #1a1a1a !important; }
.modal-footer { border-top: 1px solid #eee; margin-top: 20px; padding-top: 15px; }
.modal-footer p { font-size: 13px; color: #bbb; margin: 0; font-weight: 600; }

/* ERROR OVERLAY STYLISÉ */
#error-overlay { 
    position: fixed; inset: 0; background: #ffffff; z-index: 10000; 
    display: none; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 20px;
}
.error-title { font-weight: 900; font-size: 24px; color: #000; line-height: 1.3; margin-bottom: 30px; }
.btn-back { 
    background: #000; color: #fff; border: none; padding: 16px 35px; 
    border-radius: 40px; font-weight: 800; font-size: 16px; cursor: pointer;
    box-shadow: 0 10px 20px rgba(0,0,0,0.1); transition: transform 0.2s;
}
.btn-back:active { transform: scale(0.95); }