/* HB9V · tableau de bord XLX240 dans le design de hb9v.ch (netVD, octobre 2026).
   S'ajoute à coque.css (copie de celle du site). Les tableaux viennent des pages d'origine du tableau de bord
   (attributs bgcolor, width, align) : on les reprend ici sans toucher au PHP. */

/* ---------- bandeau de titre ---------- */
.x-titre{padding-bottom:0!important}
.x-titre .x-titre-g{display:grid;grid-template-columns:1fr auto;gap:40px;align-items:center}
.x-titre h1{letter-spacing:.1em!important}
.x-titre .x-ecu{display:block;height:clamp(150px,19vw,250px);width:auto;filter:drop-shadow(0 18px 26px rgba(13,13,14,.22));animation:x-flotte 7s ease-in-out infinite}
@keyframes x-flotte{50%{transform:translateY(-8px) rotate(-1deg)}}
@media(prefers-reduced-motion:reduce){.x-titre .x-ecu{animation:none}}
.x-air{display:inline-flex;align-items:center;gap:12px;margin-top:28px;padding:11px 18px 11px 15px;border:1px solid var(--h9-ligne);background:rgba(251,250,248,.75);font:400 12.5px/1.4 var(--h9-mono);color:var(--h9-gris)}
.x-air i{width:9px;height:9px;border-radius:50%;background:var(--h9-gris-c);flex:none}
.x-air.x-on{border-color:var(--h9-signal);color:var(--h9-noir);background:#fff}
.x-air.x-on i{background:var(--h9-signal);box-shadow:0 0 0 0 rgba(255,91,31,.6);animation:x-pouls 1.4s infinite}
@keyframes x-pouls{70%{box-shadow:0 0 0 10px rgba(255,91,31,0)}100%{box-shadow:0 0 0 0 rgba(255,91,31,0)}}

/* légende en direct, comme sur l'accueil de hb9v.ch */
.x-legende{display:grid;grid-template-columns:repeat(6,auto);justify-content:space-between;margin:clamp(36px,5vw,60px) 0 0;padding:0 24px;border-top:1px solid rgba(13,13,14,.14);background:rgba(238,237,234,.86);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}
.x-legende > div{padding:16px 28px 20px 0;border-right:1px solid rgba(13,13,14,.14)}
.x-legende > div + div{padding-left:28px}
.x-legende > div:last-child{border-right:0}
.x-legende dt{font:500 10px/1 var(--h9-texte);letter-spacing:.24em;text-transform:uppercase;color:var(--h9-gris);margin:0 0 10px}
.x-legende dd{margin:0;font:400 19px/1.1 var(--h9-mono);color:var(--h9-noir);white-space:nowrap}

/* ---------- onglets ---------- */
.x-onglets{position:sticky;top:var(--h9-haut);z-index:50;background:rgba(251,250,248,.94);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border-bottom:1px solid var(--h9-ligne)}
.x-onglets .h9-wrap{display:flex;gap:6px 34px;overflow-x:auto;scrollbar-width:none;-webkit-overflow-scrolling:touch}
.x-onglets .h9-wrap::-webkit-scrollbar{display:none}
.x-onglets a{flex:none;position:relative;padding:22px 0 20px;font:500 11px/1 var(--h9-texte);letter-spacing:.22em;text-transform:uppercase;color:var(--h9-gris);text-decoration:none;white-space:nowrap;transition:color .2s}
.x-onglets a sup{font:400 10px/0 var(--h9-mono);letter-spacing:0;margin-left:3px;vertical-align:0;position:relative;top:-5px}
.x-onglets a::after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:2px;background:var(--h9-signal);transform:scaleX(0);transform-origin:right;transition:transform .45s var(--h9-ease)}
.x-onglets a:hover{color:var(--h9-noir)}
.x-onglets a.h9-actif{color:var(--h9-noir)}
.x-onglets a.h9-actif::after{transform:scaleX(1);transform-origin:left}

/* ---------- contenu ---------- */
.x-contenu{display:block;padding:0 0 clamp(60px,8vw,100px);font-size:14.5px}
.x-contenu > .h9-wrap{padding-top:clamp(36px,5vw,64px)}
.x-contenu > .h9-wrap > table{width:100%;border-collapse:collapse}
.x-contenu > .h9-wrap > table > tbody > tr > td{vertical-align:top}
.x-vue-users > .h9-wrap > table > tbody > tr > td:last-child{padding-left:40px!important}

/* tableaux de données */
.listingtable{width:100%;margin:0 0 28px;border-collapse:collapse;background:#fff;border:1px solid var(--h9-ligne);font-size:14px}
.listingtable th{background:var(--h9-noir);color:#fff;font:500 10px/1.35 var(--h9-texte);letter-spacing:.2em;text-transform:uppercase;padding:15px 12px;text-align:left;vertical-align:middle;border:0;border-right:1px solid rgba(255,255,255,.08)}
.listingtable th:last-child{border-right:0}
.listingtable tr{background:#fff}
.listingtable td{padding:12px;border-top:1px solid var(--h9-ligne);color:var(--h9-encre);vertical-align:middle}
.listingtable tr:hover > td{background:var(--h9-pierre)}
.listingtable a.pl{font:500 14.5px/1 var(--h9-mono);color:var(--h9-noir);text-decoration:none;letter-spacing:.02em}
.listingtable a.pl:hover{color:var(--h9-signal)}
.listingtable td img[src*="flags"]{display:block;height:14px;width:auto;margin:0 auto;box-shadow:0 0 0 1px rgba(13,13,14,.08)}
.listingtable td img[src*="sat.png"]{height:18px;width:auto;opacity:.55;transition:opacity .2s}
.listingtable td a:hover img[src*="sat.png"]{opacity:1}
.listingtable td img[src*="tx.gif"]{height:18px!important;margin:0!important}
.listinglink,.smalllink{color:var(--h9-noir);text-decoration:underline;text-decoration-color:var(--h9-signal);text-underline-offset:3px;font-size:14px}

/* dernière colonne (module écouté) : pastille */
.x-vue-users .listingtable tr > td:last-child{font:500 13px/1 var(--h9-mono);text-align:center}

/* grille des modules (à droite des stations) */
.listingtable td > table{width:100%;border-collapse:collapse}
.listingtable td > table td{border-top:0;border-bottom:1px solid var(--h9-ligne)!important;padding:9px 12px}

/* barre de filtres */
.listingtable th.filterbar{background:var(--h9-pierre);color:var(--h9-encre);padding:14px 14px;border-bottom:1px solid var(--h9-ligne);letter-spacing:0;text-transform:none;font:400 14px var(--h9-texte)}
.listingtable th.filterbar table{width:100%;border-collapse:collapse}
.listingtable th.filterbar td{border:0;padding:0 6px;background:none!important}
.listingtable th.filterbar form{display:inline-flex;gap:0;margin:0}
.FilterField{height:40px;width:170px;box-sizing:border-box;padding:0 14px;border:1px solid var(--h9-ligne);border-right:0;background:#fff;font:400 14px var(--h9-mono);color:var(--h9-noir);border-radius:0;outline:none}
.FilterField:focus{border-color:var(--h9-noir)}
.FilterField::placeholder{color:var(--h9-gris-c);font-family:var(--h9-texte)}
.FilterSubmit{height:40px;padding:0 20px;border:1px solid var(--h9-noir);background:var(--h9-noir);color:#fff;font:600 10.5px/1 var(--h9-texte);letter-spacing:.22em;text-transform:uppercase;cursor:pointer;border-radius:0;transition:background .2s,border-color .2s}
.FilterSubmit:hover{background:var(--h9-signal);border-color:var(--h9-signal)}

/* infobulles des drapeaux */
a.tip{position:relative;text-decoration:none;display:inline-block}
a.tip span{display:none}
a.tip:hover span{display:block;position:absolute;left:50%;top:calc(100% + 8px);transform:translateX(-50%);z-index:20;background:var(--h9-noir);color:#fff;font:400 12.5px/1.3 var(--h9-texte);white-space:nowrap;padding:8px 12px}

.error{margin:0 0 24px;padding:16px 18px;border:1px solid #c2261c;background:#fff;color:#c2261c;font-size:15px}
.x-contenu iframe{max-width:100%;border:1px solid var(--h9-ligne)!important;margin-top:0!important}
.x-version{margin:30px 0 0;font:400 12px/1.7 var(--h9-mono);color:var(--h9-gris)}
.x-version a{color:var(--h9-noir);text-decoration-color:var(--h9-signal);text-underline-offset:3px}

/* ---------- tablette et mobile ---------- */
@media(max-width:1100px){
  .x-legende{grid-template-columns:repeat(3,1fr)}
  .x-legende > div{margin-right:0;padding-left:0;border-bottom:1px solid rgba(13,13,14,.14)}
  .x-legende > div:nth-child(3n){border-right:0}
  .x-legende{padding:0 20px}
  .x-legende > div + div{padding-left:0}
  .x-legende > div:nth-child(3n+2),.x-legende > div:nth-child(3n){padding-left:20px}
  .x-contenu > .h9-wrap > table,.x-contenu > .h9-wrap > table > tbody,.x-contenu > .h9-wrap > table > tbody > tr,.x-contenu > .h9-wrap > table > tbody > tr > td{display:block;width:auto;padding-left:0!important}
  .listingtable{display:block;max-width:100%;overflow-x:auto;-webkit-overflow-scrolling:touch}
}
@media(max-width:900px){
  .listingtable{display:block;overflow-x:auto;-webkit-overflow-scrolling:touch}
  .x-onglets{top:84px}
}
@media(max-width:700px){
  .x-titre .x-titre-g{grid-template-columns:1fr}
  .x-titre .x-ecu{display:none}
  .x-legende{grid-template-columns:1fr 1fr}
  .x-legende{padding:0 16px}
  .x-legende > div,.x-legende > div:nth-child(n){padding:14px 0 16px;border-right:0}
  .x-legende > div:nth-child(odd){border-right:1px solid rgba(13,13,14,.14);padding-right:14px}
  .x-legende > div:nth-child(even){padding-left:16px}
  .x-legende dd{font-size:16px}
  .x-air{font-size:11.5px}
  .listingtable th.filterbar table,.listingtable th.filterbar tbody,.listingtable th.filterbar tr,.listingtable th.filterbar td{display:block;width:100%;padding:0}
  .listingtable th.filterbar form{display:flex;margin:4px 0;max-width:calc(100vw - 74px)}
  .FilterField{flex:1;width:auto}
}

/* retouches : la barre de filtres et les tableaux repliés n'ont pas de fond blanc propre */
.listingtable th.filterbar tr,.listingtable th.filterbar td{background:none!important}
.listingtable td img[src*="flags"]{margin:0}
@media(max-width:1100px){.listingtable{border:0;background:none}.listingtable > tbody{border:1px solid var(--h9-ligne)}}

/* ---------- D-Star en direct (flux ircDDB) ---------- */
.x-dstar-tete{display:flex;justify-content:space-between;align-items:flex-end;gap:24px;flex-wrap:wrap;margin-bottom:18px}
.x-dstar-tete p{margin:0;max-width:62ch;color:var(--h9-gris);font-size:15.5px;line-height:1.6}
.x-dstar-tete b{color:var(--h9-signal);font-weight:600}
.x-dstar-filtre{display:flex;align-items:center;gap:12px}
.x-dstar-filtre span{font:500 10px/1 var(--h9-texte);letter-spacing:.24em;text-transform:uppercase;color:var(--h9-gris)}
.x-dstar-filtre input{height:40px;width:190px;box-sizing:border-box;padding:0 14px;border:1px solid var(--h9-ligne);background:#fff;font:400 14px var(--h9-mono);color:var(--h9-noir);border-radius:0;outline:none;text-transform:uppercase}
.x-dstar-filtre input:focus{border-color:var(--h9-noir)}
.x-dstar-filtre input::placeholder{text-transform:none;color:var(--h9-gris-c);font-family:var(--h9-texte)}
.x-dstar-etat{display:inline-flex;align-items:center;gap:10px;margin-bottom:14px;font:400 12px/1.4 var(--h9-mono);color:var(--h9-gris)}
.x-dstar-etat i{width:8px;height:8px;border-radius:50%;background:var(--h9-gris-c)}
.x-dstar-etat.x-ok i{background:var(--h9-signal);animation:x-pouls 1.4s infinite}
.x-dstar-etat.x-ko{color:#c2261c}.x-dstar-etat.x-ko i{background:#c2261c}
.x-dstar-table{overflow-x:auto;-webkit-overflow-scrolling:touch}
#x-ds{min-width:980px;display:table}
#x-ds td{padding:10px 12px;font-size:13.5px;white-space:nowrap}
#x-ds td.x-mono{font:400 13px var(--h9-mono)}
#x-ds td.x-ind{font:500 14px var(--h9-mono);color:var(--h9-noir)}
#x-ds td.x-err{color:#c2261c}
#x-ds td.x-lien{color:var(--h9-noir);text-decoration:underline;text-decoration-color:var(--h9-signal);text-underline-offset:3px}
#x-ds tr{animation:x-entre .5s var(--h9-ease)}
@keyframes x-entre{from{opacity:0;transform:translateY(-6px)}}
#x-ds tr.x-tx > td{background:#fff3ec}
#x-ds tr.x-tx > td:first-child{box-shadow:inset 3px 0 0 var(--h9-signal)}
#x-ds tr.x-tx > td:last-child{color:var(--h9-signal);font-weight:500}
@media(max-width:1100px){.x-dstar-table .listingtable{display:table;max-width:none;overflow:visible}}
#x-ds td.x-masque{color:var(--h9-gris-c);font:italic 400 13px var(--h9-texte)}