/* HB9V · habillage d'APRS Live dans le design de hb9v.ch (netVD, octobre 2026).
   Se charge APRÈS /style.css et ne fait que le surcharger : aucun changement du JavaScript ni des données.
   Clair = noir sur crème, accent orange #ff5b1f ; sombre = crème sur noir. Angles droits, polices du site. */
@font-face{font-family:"Cabinet";src:url(fonts/CabinetGrotesk-Medium.woff2) format("woff2");font-weight:500;font-display:swap}
@font-face{font-family:"Cabinet";src:url(fonts/CabinetGrotesk-Bold.woff2) format("woff2");font-weight:700;font-display:swap}
@font-face{font-family:"General";src:url(fonts/GeneralSans-Regular.woff2) format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:"General";src:url(fonts/GeneralSans-Semibold.woff2) format("woff2");font-weight:600;font-display:swap}

:root{
  --bg:#0d0d0e; --panel:rgba(20,20,22,.9); --panel-solid:#1b1b1d; --border:rgba(255,255,255,.12);
  --text:#fbfaf8; --text-dim:#a9a9ae; --accent:#ff5b1f; --accent-2:#ff5b1f;
  --shadow:0 24px 50px -24px rgba(0,0,0,.7); --radius:0;
  --btn:#fbfaf8; --btn-txt:#0d0d0e;
  --titre:"Cabinet",system-ui,sans-serif; --texte:"General",system-ui,sans-serif; --mono:"IBM Plex Mono",ui-monospace,monospace;
  --ease:cubic-bezier(.2,.7,.1,1);
}
[data-theme="light"]{
  --bg:#fbfaf8; --panel:rgba(251,250,248,.93); --panel-solid:#fff; --border:#e4e2de;
  --text:#0d0d0e; --text-dim:#6f6f74; --accent:#ff5b1f; --accent-2:#ff5b1f;
  --shadow:0 24px 50px -28px rgba(13,13,14,.45);
  --btn:#0d0d0e; --btn-txt:#fff;
}
body{font-family:var(--texte);-webkit-font-smoothing:antialiased}

/* angles droits partout dans l'application (les pastilles rondes restent rondes) */
#app :is(.panel,.tbtn,#search,#search-results,#lang-select,select,input,button,.d-cell,.d-comment,.chart-card,.chart-range,.toast,.msg,.d-btn,.acc-btn,#ap-add,#ap-pick,.ap-notif,#live-badge){border-radius:0}
#app :is(.legend-dot,.dot,.badge,#rp-play,.acc-user .av){border-radius:50%}
.maplibregl-popup-content{border-radius:0;font-family:var(--texte)}

/* ---------- barre du haut ---------- */
#topbar{height:64px;padding:0 18px;gap:18px;-webkit-backdrop-filter:blur(14px) saturate(1.2);backdrop-filter:blur(14px) saturate(1.2)}
.brand{gap:12px;font:500 15px/1 var(--titre);letter-spacing:.2em;text-transform:uppercase}
.brand .x-ecu{display:block;height:50px;width:auto;filter:drop-shadow(0 5px 10px rgba(13,13,14,.2));transition:transform .4s var(--ease)}
.brand:hover .x-ecu{transform:scale(1.05) rotate(-2deg)}
.brand .x-nom{display:flex;flex-direction:column;gap:5px}
.brand .x-nom b{font-weight:500}
.brand .x-nom small{font:400 10px/1 var(--mono);letter-spacing:.08em;color:var(--text-dim);text-transform:none}
.brand .x-nom small i{display:inline-block;width:6px;height:6px;border-radius:50%;background:var(--accent);margin-right:6px;vertical-align:1px;animation:x-pouls 1.6s infinite}
@keyframes x-pouls{0%{box-shadow:0 0 0 0 rgba(255,91,31,.6)}70%{box-shadow:0 0 0 7px rgba(255,91,31,0)}100%{box-shadow:0 0 0 0 rgba(255,91,31,0)}}

#search{height:42px;font:400 14px var(--texte);border-color:var(--border);padding:0 16px 0 40px;
  background:var(--panel-solid) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='none' stroke='%236f6f74' stroke-width='1.6'%3E%3Ccircle cx='7' cy='7' r='5.2'/%3E%3Cpath d='M11 11l3.6 3.6'/%3E%3C/svg%3E") 14px 50%/16px no-repeat}
#search:focus{border-color:var(--text)}
#search::placeholder{color:var(--text-dim)}
#search-results{top:48px}
.sr-item:hover{background:rgba(255,91,31,.1)}
.sr-call{font-family:var(--mono);font-weight:500}

.stats{gap:0}
.stat{align-items:flex-start;padding:0 22px;border-left:1px solid var(--border);gap:5px}
.stat-val{font:400 17px/1 var(--mono);color:var(--text)}
.stat-lbl{font:500 9.5px/1 var(--texte);letter-spacing:.22em;color:var(--text-dim)}

/* boutons : icônes au trait (masques SVG) à la place des émojis */
.tbtn{width:42px;height:42px;background:transparent;border-color:transparent;color:var(--text);font-size:0;position:relative;transition:background .2s,color .2s,border-color .2s}
.tbtn:hover{border-color:var(--border);background:var(--panel-solid);color:var(--accent)}
.tbtn::before{content:"";width:19px;height:19px;background:currentColor;-webkit-mask:var(--i) center/contain no-repeat;mask:var(--i) center/contain no-repeat}
#locate-btn{--i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.6'%3E%3Cpath d='M12 21s-7-6.2-7-11.5A7 7 0 0 1 19 9.5C19 14.8 12 21 12 21z'/%3E%3Ccircle cx='12' cy='9.5' r='2.5'/%3E%3C/svg%3E")}
#replay-btn{--i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.6'%3E%3Ccircle cx='12' cy='12' r='8.5'/%3E%3Cpath d='M12 7v5l3.5 2'/%3E%3C/svg%3E")}
#alert-btn{--i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.6'%3E%3Cpath d='M6 16V11a6 6 0 0 1 12 0v5l1.5 2h-15z'/%3E%3Cpath d='M10 20.5a2 2 0 0 0 4 0'/%3E%3C/svg%3E")}
#msg-btn{--i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.6'%3E%3Crect x='3.5' y='5.5' width='17' height='13'/%3E%3Cpath d='M4 6.5l8 6 8-6'/%3E%3C/svg%3E")}
#theme-toggle{--i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.6'%3E%3Ccircle cx='12' cy='12' r='4'/%3E%3Cpath d='M12 2.5v2.5M12 19v2.5M2.5 12H5M19 12h2.5M5.3 5.3l1.8 1.8M16.9 16.9l1.8 1.8M5.3 18.7l1.8-1.8M16.9 7.1l1.8-1.8'/%3E%3C/svg%3E")}
[data-theme="dark"] #theme-toggle{--i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.6'%3E%3Cpath d='M19.5 14.5A8 8 0 0 1 9.5 4.5a8 8 0 1 0 10 10z'/%3E%3C/svg%3E")}
#account-btn{--i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.6'%3E%3Ccircle cx='12' cy='8.5' r='4'/%3E%3Cpath d='M4.5 20.5c1.2-4 4-6 7.5-6s6.3 2 7.5 6'/%3E%3C/svg%3E")}
#menu-btn{font-size:0;--i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.5'%3E%3Cpath d='M3 8.5h18M3 15.5h18'/%3E%3C/svg%3E")}
#account-btn.logged,#replay-btn.active{color:var(--accent)}
@media (min-width:901px){#account-btn.logged::after{content:"";position:absolute;right:8px;top:8px;width:6px;height:6px;border-radius:50%;background:var(--accent)}}
.badge{background:var(--accent);font:500 10px/1 var(--mono);top:3px;right:3px}
#lang-select{height:42px;background:transparent;border-color:transparent;font:500 11px var(--texte);letter-spacing:.2em;padding:0 8px}
#lang-select:hover{border-color:var(--border)}
#actions{gap:2px;padding-left:14px;border-left:1px solid var(--border)}

/* ---------- panneaux ---------- */
.panel{border-color:var(--border)}
.panel-title{font:500 10px/1.3 var(--texte);letter-spacing:.26em;color:var(--text-dim);margin-bottom:12px}
#legend{left:18px;bottom:18px;padding:16px 18px}
.legend-item{font-size:13.5px;padding:4px 0}
.legend-basemap label{font:500 10px var(--texte);letter-spacing:.2em;text-transform:uppercase}
.legend-links a{font:500 10.5px var(--texte);letter-spacing:.2em;text-transform:uppercase;color:var(--text)}
.legend-links a:hover{color:var(--accent);text-decoration:none}
#live-badge{top:78px;right:18px;font:500 10px var(--texte);letter-spacing:.24em;padding:8px 13px;background:var(--panel);color:var(--text)}
#live-badge .dot{background:var(--accent);animation:x-pouls 1.6s infinite}

#detail,#alerts-panel,#account-panel{top:78px;right:18px}
#messages-panel{top:78px;left:18px}
#detail,#alerts-panel,#messages-panel{bottom:18px}
#app :is(#detail-close,#acc-close,#ap-close,#mp-close,#rp-close){background:transparent;border-color:var(--border);color:var(--text);transition:background .2s,color .2s}
#app :is(#detail-close,#acc-close,#ap-close,#mp-close,#rp-close):hover{background:var(--btn);color:var(--btn-txt)}

/* fiche station */
.d-call{font:500 28px/1.1 var(--mono);letter-spacing:.02em}
.d-type{font:500 9.5px/1 var(--texte);letter-spacing:.22em;padding:6px 10px;border-radius:0}
.d-cell{border-color:var(--border)}
.d-cell .k{font:500 9.5px/1.3 var(--texte);letter-spacing:.2em}
.d-cell .v{font:400 16px/1.3 var(--mono)}
.chart-card .chart-h{font:500 9.5px/1.3 var(--texte);letter-spacing:.2em}
.chart-card .chart-h .now{font-family:var(--mono);color:var(--accent)}

/* boutons d'action : noirs, orange au survol (comme sur hb9v.ch) */
#app :is(.d-btn,.acc-btn:not(.alt),#ap-add,.msg-compose button,.mp-compose button){background:var(--btn);color:var(--btn-txt);font:600 10.5px/1 var(--texte);letter-spacing:.22em;text-transform:uppercase;transition:background .2s,color .2s}
#app :is(.d-btn,.acc-btn:not(.alt),#ap-add,.msg-compose button,.mp-compose button):hover{background:var(--accent);color:#fff;filter:none}
.acc-btn.alt{font:600 10.5px/1 var(--texte);letter-spacing:.22em;text-transform:uppercase}
.chart-range.active{background:var(--btn);color:var(--btn-txt);border-color:var(--btn)}
#rp-play{background:var(--btn);color:var(--btn-txt)}
#rp-play:hover{background:var(--accent);color:#fff;filter:none}
#rp-time{font:400 13px var(--mono)}
.msg.out{background:var(--btn);color:var(--btn-txt)}
.msg.out .msg-meta{color:inherit}
.acc-title{font:500 20px/1.2 var(--titre);letter-spacing:.1em;text-transform:uppercase}
.acc-user .av{background:var(--btn);color:var(--btn-txt)}
#app :is(.acc-form input,.ap-form input,.ap-form select,.msg-compose input,.mp-compose input):focus{border-color:var(--text)}
.toast{border-color:var(--accent);font-weight:500}
.fav-row .fc,.mp-item .mp-call,.ap-event .ae-call{color:var(--text);font-family:var(--mono)}
.fav-row .fc:hover,.mp-item .mp-call:hover,.ap-event .ae-call:hover{color:var(--accent);text-decoration:none}
.acc-link{color:var(--text);text-decoration-color:var(--accent)}

/* commandes de la carte */
.maplibregl-ctrl-group{border-radius:0!important;box-shadow:var(--shadow)!important}
.maplibregl-ctrl-attrib{font-family:var(--texte)}

/* ---------- tablette et mobile ---------- */
@media (max-width:900px){
  #actions{top:64px;right:10px;padding:8px;border-left:1px solid var(--border);border-radius:0}
  #actions .tbtn{font-size:0;gap:14px}
  #actions .tbtn::after{font:500 14px var(--texte);color:var(--text)}
  #actions .tbtn:hover{color:var(--accent)}
}
@media (max-width:640px){
  #detail,#alerts-panel,#messages-panel,#account-panel{left:8px;right:8px;top:72px;bottom:8px}
  #legend{left:10px;bottom:10px}
}
@media (max-width:560px){
  #topbar{padding:0 10px;gap:10px}
  .brand .x-nom{display:none}
  .brand .x-ecu{height:46px}
}