/* MARQUEUR-EMOJI-PIN-V3 */
body { font-family: sans-serif; max-width: 420px; margin: 0 auto; background: #f1efe8; position:relative; }
header { display:flex; align-items:center; gap:8px; justify-content:space-between; flex-wrap:wrap; padding:14px 16px; background:#fff; border-bottom:1px solid #ddd; }
header span { font-size:16px; font-weight:600; }
header .header-back { text-decoration:none; color:#333; font-size:18px; }
header .header-history { text-decoration:none; color:#378ADD; font-size:12px; font-weight:600; padding:6px 10px; border-radius:8px; background:#eef4fc; white-space:nowrap; }
.header-report-btn { border:none; background:#378ADD; color:#fff; font-size:12px; font-weight:600; padding:6px 10px; border-radius:8px; white-space:nowrap; }

.history-list { padding:12px 16px; display:flex; flex-direction:column; gap:10px; }
.history-empty { text-align:center; color:#888; font-size:13px; margin-top:24px; }
.history-row { display:flex; align-items:center; gap:12px; background:#fff; border:1px solid #ddd; border-radius:12px; padding:10px 12px; cursor:pointer; }
.history-thumb { width:48px; height:48px; border-radius:10px; background:#f1efe8; overflow:hidden; display:flex; align-items:center; justify-content:center; flex-shrink:0; }
.history-thumb img { width:100%; height:100%; object-fit:cover; }
.history-info { display:flex; flex-direction:column; gap:2px; }
.history-date { margin:0; font-size:14px; font-weight:600; }
.history-status { margin:0; font-size:12px; color:#888; }

.history-modal { position:fixed; inset:0; background:rgba(0,0,0,0.6); display:flex; align-items:center; justify-content:center; z-index:2000; padding:16px; box-sizing:border-box; }
.history-modal-content { position:relative; background:#fff; border-radius:16px; padding:20px; max-width:420px; width:100%; max-height:85vh; overflow-y:auto; box-sizing:border-box; }
.history-modal-close { position:absolute; top:10px; right:10px; width:32px; height:32px; border:none; background:#f1efe8; border-radius:50%; font-size:16px; line-height:1; cursor:pointer; }
.history-modal-photo { width:100%; border-radius:12px; margin-top:8px; margin-bottom:14px; object-fit:cover; }
.history-modal-date { margin:0; font-size:16px; font-weight:700; }
.history-modal-status { margin:4px 0 0; font-size:13px; color:#888; }

.form-view { padding:24px 16px; }
.form-view input { width:100%; box-sizing:border-box; padding:10px; margin-bottom:10px; border:1px solid #ccc; border-radius:8px; }
.form-view button { width:100%; padding:12px; border:none; border-radius:12px; background:#378ADD; color:#fff; font-size:15px; font-weight:600; }

.password-field { position:relative; display:flex; align-items:center; margin-bottom:10px; }
.password-field input { margin-bottom:0; padding-right:40px; }
.form-view button.password-toggle { position:absolute; top:50%; right:8px; transform:translateY(-50%); width:24px; height:24px; border:none; background:transparent; padding:0; display:flex; align-items:center; justify-content:center; }
.eye-icon { position:relative; width:16px; height:10px; border:1.5px solid #333; border-radius:50%; display:block; }
.eye-icon::after { content:''; position:absolute; top:50%; left:50%; width:5px; height:5px; background:#333; border-radius:50%; transform:translate(-50%,-50%); }
.eye-icon-closed { border-color:transparent; }
.eye-icon-closed::after { display:none; }
.eye-icon-closed::before { content:''; position:absolute; top:50%; left:0; width:100%; height:1.5px; background:#333; transform:translateY(-50%); }

.logout-btn { background:transparent; border:none; color:#c0392b; font-size:13px; text-decoration:underline; padding:8px; margin-top:4px; }
.webauthn-btn { width:100%; padding:12px; border:1px solid #378ADD; border-radius:12px; background:#fff; color:#378ADD; font-size:14px; font-weight:600; margin-top:8px; }
.webauthn-setup-btn { width:100%; padding:10px; border:1px solid #378ADD; border-radius:12px; background:#fff; color:#378ADD; font-size:13px; font-weight:600; }
.form-error { color:#c0392b; font-size:13px; margin-bottom:10px; }
.form-link { text-align:center; margin-top:12px; }
.form-link a { font-size:13px; color:#378ADD; }
.legal-link { text-align:center; margin:16px 0 8px; }
.legal-link a { font-size:13px; color:#378ADD; text-decoration:underline; font-weight:600; }

#map { position:relative; height:340px; width:100%; z-index:1; }
#map.map-full { height:calc(100vh - 53px); }
.marker-me { width:16px; height:16px; border-radius:50%; background:#378ADD; border:3px solid #fff; box-shadow:0 0 0 1px #ccc, 0 0 0 8px rgba(55,138,221,0.15); }
.marker-car { width:34px; height:34px; border-radius:50% 50% 50% 0; background:#D85A30; transform:rotate(-45deg); display:flex; align-items:center; justify-content:center; box-shadow:0 2px 6px rgba(0,0,0,0.3); }
.marker-car i { transform:rotate(45deg); color:#fff; font-style:normal; font-weight:700; font-size:14px; }
.marker-public-parking { background:#378ADD; color:#fff; font-size:12px; font-weight:700; border-radius:6px; padding:2px 6px; box-shadow:0 1px 4px rgba(0,0,0,0.3); white-space:nowrap; }
.popup-gmaps-link { display:inline-block; margin-top:6px; color:#378ADD; font-weight:600; font-size:13px; }

.marker-report-pin { font-size:28px; line-height:1; text-shadow:0 1px 3px rgba(0,0,0,0.4); }

.report-panel { position:absolute; top:60px; right:16px; display:flex; flex-direction:column; gap:8px; z-index:1000; }
.report-choice { padding:10px 16px; border-radius:10px; border:none; color:#fff; font-weight:600; font-size:14px; box-shadow:0 2px 8px rgba(0,0,0,0.25); white-space:nowrap; }
.report-choice-libre { background:#3aa757; }
.report-choice-occupee { background:#c0392b; }

.popup-report-btn { margin-top:8px; margin-right:6px; padding:6px 12px; border-radius:8px; border:none; color:#fff; font-size:13px; font-weight:600; background:#378ADD; }
.popup-report-btn-secondary { background:#888; }

.install-btn { display:block; width:calc(100% - 32px); margin:16px 16px 0; padding:12px; border-radius:12px; border:none; background:#2fbf71; color:#fff; font-size:14px; font-weight:700; }
.ios-install-hint { margin:10px 16px 0; padding:10px 12px; background:#eef4fc; border-radius:10px; font-size:13px; color:#333; line-height:1.4; }
#bottom-panel { padding:16px; display:flex; flex-direction:column; gap:10px; }
.info-card { background:#fff; border-radius:12px; border:1px solid #ddd; padding:12px 14px; }
.info-card p { margin:0; }
.info-card-row { display:flex; align-items:center; justify-content:space-between; }
.photo-btn { width:40px; height:40px; border-radius:10px; background:#f1efe8; border:1px dashed #999; display:flex; align-items:center; justify-content:center; overflow:hidden; padding:0; cursor:pointer; }
.photo-btn img { width:100%; height:100%; object-fit:cover; }
.photo-btn #photo-icon { font-size:18px; }
.label { font-size:13px; color:#666; }
.value { font-size:15px; font-weight:600; margin-top:2px; }
.spot-elapsed { font-size:13px; color:#378ADD; font-weight:600; margin-top:10px; }
.paid-duration-block { margin-top:8px; }
.paid-duration-summary { font-size:13px; color:#888; margin:0; }
.paid-duration-link { display:inline-block; font-size:12px; font-weight:600; color:#378ADD; text-decoration:none; background:#eef4fc; padding:6px 10px; border-radius:8px; }
.paid-duration-clear { color:#c0392b; background:#fbeaea; margin-left:6px; }
.paid-duration-form { margin-top:8px; display:flex; flex-direction:column; gap:8px; }
.paid-duration-form input { width:100%; box-sizing:border-box; padding:10px; border:1px solid #ccc; border-radius:8px; }
.paid-duration-form-actions { display:flex; gap:8px; }
.paid-duration-form-actions button { flex:1; padding:10px; border:none; border-radius:10px; font-size:13px; font-weight:600; }
#btn-paid-duration-save { background:#378ADD; color:#fff; }
.paid-duration-cancel { background:transparent; color:#666; border:1px solid #ccc !important; }
#btn-park, #btn-maps, #btn-new { width:100%; height:48px; border-radius:12px; font-size:15px; font-weight:600; border:none; }
#btn-park { background:#378ADD; color:#fff; }
#btn-maps { background:#378ADD; color:#fff; }
#btn-new { background:transparent; color:#666; border:1px solid #ccc; }
.hidden { display:none; }
#status-msg { text-align:center; font-size:13px; color:#666; margin:8px 0; }

.legal-page { padding:16px 20px; font-size:14px; line-height:1.6; color:#333; }
.legal-page h2 { font-size:16px; margin:20px 0 8px; color:#222; }
.legal-page h2:first-of-type { margin-top:0; }
.legal-page p { margin:0 0 10px; }
.legal-page ul { margin:0 0 10px; padding-left:20px; }
.legal-page li { margin-bottom:6px; }
.legal-page a { color:#378ADD; }
.legal-updated { font-size:12px; color:#888; margin-bottom:16px; }