html, body, #carte { height: 100%; margin: 0; }
body { font-family: system-ui, sans-serif; }
.barre { position: absolute; z-index: 1000; left: 8px; right: 8px;
         bottom: calc(16px + env(safe-area-inset-bottom));
         display: flex; gap: 8px; justify-content: center; }
.barre button { font-size: 18px; padding: 12px 14px; border: 0; border-radius: 10px;
                background: #0b2a3a; color: #fff; box-shadow: 0 2px 6px rgba(0,0,0,.35); }
.barre button.actif { background: #c8a96a; color: #000; }
.info { position: absolute; z-index: 1000; top: calc(8px + env(safe-area-inset-top)); left: 50%;
        transform: translateX(-50%); background: rgba(11,42,58,.9); color: #fff; padding: 6px 12px;
        border-radius: 8px; font-size: 14px; text-align: center; max-width: 90%; }
.info.alerte { background: #b3261e; }
.reglage { position: absolute; z-index: 1000; top: calc(80px + env(safe-area-inset-top)); right: 10px;
           background: #fff; padding: 6px 8px; border-radius: 8px; font-size: 13px;
           box-shadow: 0 1px 4px rgba(0,0,0,.3); }
.reglage select { max-width: 170px; font-size: 13px; }
.reglage input { width: 80px; }

.panneau { position: absolute; z-index: 2000; left: 8px; right: 8px; bottom: calc(80px + env(safe-area-inset-bottom));
           background: #fff; border-radius: 12px; padding: 12px 14px; box-shadow: 0 4px 16px rgba(0,0,0,.4);
           max-width: 480px; margin: 0 auto; }
.panneau.grand { top: calc(8px + env(safe-area-inset-top)); bottom: calc(80px + env(safe-area-inset-bottom)); overflow-y: auto; }
.panneau h3 { margin: 4px 0 10px; font-size: 17px; color: #0b2a3a; }
.panneau label { display: block; margin-bottom: 8px; font-size: 14px; }
.panneau input, .panneau select, .panneau textarea { display: block; width: 100%; box-sizing: border-box;
           font-size: 16px; padding: 8px; margin-top: 3px; border: 1px solid #bbb; border-radius: 8px; }
.boutons { display: flex; gap: 8px; justify-content: flex-end; }
.boutons button, .entete button, .ligne button { font-size: 15px; padding: 9px 12px; border: 0; border-radius: 8px; background: #e6e6e6; }
.boutons .ok { background: #0b2a3a; color: #fff; }
.danger { background: #b3261e !important; color: #fff; }
.entete { display: flex; justify-content: space-between; align-items: center; }
.ligne { display: flex; align-items: center; gap: 6px; padding: 8px 0; border-bottom: 1px solid #eee; font-size: 14px; }
.ligne .txt { flex: 1; cursor: pointer; }
.ligne .txt small { color: #666; }
.ligne button { padding: 7px 9px; font-size: 14px; }
.aide { font-size: 12px; color: #666; }
.repere { font-size: 22px; line-height: 22px; text-align: center; text-shadow: 0 0 3px #fff; }