/* ops-shared.css — socle commun (thème, topbar, search, section, card, badge, gauge)
   Extrait de testindex.html le 2026-09-13. Ne pas dupliquer ces règles ailleurs. */

*{margin:0;padding:0;box-sizing:border-box;}
:root{
  --bg:#0c0d0f;--bg2:#0f1113;--card:#15171a;--card2:#1a1d21;--hover:#1f2329;
  --line:rgba(255,255,255,.07);--line2:rgba(255,255,255,.12);
  --tx:#e6e8ea;--t2:#9aa1a9;--t3:#5d646d;
  --accent:#3ad6b4;--accent-d:rgba(58,214,180,.12);
  --ok:#35d07f;--ok-d:rgba(53,208,127,.13);
  --warn:#e8b339;--warn-d:rgba(232,179,57,.13);
  --err:#f0556b;--err-d:rgba(240,85,107,.13);
  --blue:#5b8cff;--blue-d:rgba(91,140,255,.13);
  --violet:#a987ff;--violet-d:rgba(169,135,255,.13);
  --m4-s27:#5b8cff;--m4-s2:#27a888;--m4-semb:#9b7cf5;
  --r:14px;--r-sm:10px;
}
[data-theme="light"]{
  --bg:#eaedf1;--bg2:#e3e7ec;--card:#ffffff;--card2:#f3f5f8;--hover:#eaeef3;
  --line:rgba(15,20,28,.10);--line2:rgba(15,20,28,.18);
  --tx:#141a21;--t2:#56606b;--t3:#919aa5;
  --accent:#0fa085;--accent-d:rgba(15,160,133,.12);
  --ok:#179a55;--ok-d:rgba(23,154,85,.13);
  --warn:#bd8410;--warn-d:rgba(189,132,16,.14);
  --err:#d8324c;--err-d:rgba(216,50,76,.12);
  --blue:#3565e6;--blue-d:rgba(53,101,230,.12);
  --violet:#7544db;--violet-d:rgba(117,68,219,.12);
  --m4-s27:#3565e6;--m4-s2:#0fa085;--m4-semb:#7544db;
}
html,body{min-height:100%;background:var(--bg);color:var(--tx);font-family:'IBM Plex Sans',system-ui,sans-serif;font-size:13px;line-height:1.5;overflow-x:hidden;}
body{background-image:radial-gradient(circle at 12% -10%,rgba(58,214,180,.06),transparent 45%),radial-gradient(circle at 92% 0%,rgba(91,140,255,.05),transparent 40%);background-attachment:fixed;}
[data-theme="light"] body{background-image:radial-gradient(circle at 12% -10%,rgba(15,160,133,.07),transparent 45%),radial-gradient(circle at 92% 0%,rgba(53,101,230,.06),transparent 40%);}

/* ── TICKER (infos) ── */
.ticker{display:flex;align-items:stretch;background:var(--card);border:1px solid var(--line);border-radius:var(--r-sm);overflow:hidden;margin-bottom:4px;}
.tk-tag{flex-shrink:0;display:flex;align-items:center;gap:7px;padding:0 14px;font-family:'IBM Plex Mono';font-size:9px;font-weight:700;letter-spacing:1.5px;text-transform:uppercase;color:var(--err);border-right:1px solid var(--line);}
.tk-tag .pulse{width:6px;height:6px;border-radius:50%;background:var(--err);animation:breathe 1.6s ease-in-out infinite;}
.tk-scroll{flex:1;overflow:hidden;display:flex;align-items:center;height:36px;}
.tk-inner{display:flex;align-items:center;white-space:nowrap;animation:tkscroll 70s linear infinite;}
.tk-inner:hover{animation-play-state:paused;}
@keyframes tkscroll{0%{transform:translateX(0);}100%{transform:translateX(-50%);}}
.tk-i{display:inline-flex;align-items:center;gap:7px;padding:0 18px;font-size:12px;color:var(--t2);border-right:1px solid var(--line);}
.tk-i .sep{color:var(--accent);font-weight:700;}

/* ── TV ── */
/* TV : aspect-ratio préservé, disposition adaptive */
.tv-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;place-content:center;}
.tv-ch{background:#000;border:1px solid var(--line);border-radius:var(--r);overflow:hidden;position:relative;aspect-ratio:16/9;}
/* 2×2 — widget étiré au-delà de la hauteur naturelle 4×1 */
@container widget (min-height:420px){
  .tv-grid{grid-template-columns:repeat(2,1fr);}
}
/* 1×4 — widget très haut */
@container widget (min-height:820px){
  .tv-grid{grid-template-columns:1fr;}
}
.tv-ph{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:7px;background:var(--card2);}
.tv-ph.hidden{display:none;}
.tv-ph .pulse{width:7px;height:7px;border-radius:50%;background:var(--err);animation:breathe 1.6s ease-in-out infinite;}
.tv-ph .nm{font-family:'IBM Plex Mono';font-size:10px;font-weight:600;color:var(--t2);text-transform:uppercase;letter-spacing:1px;}
.tv-ch video,.tv-ch iframe{width:100%;height:100%;object-fit:cover;border:none;display:block;}
.sec-act{display:flex;align-items:center;gap:8px;}
.sec-act a,.sec-act button{display:flex;align-items:center;gap:5px;font-family:'IBM Plex Mono';font-size:10px;text-transform:uppercase;letter-spacing:.5px;color:var(--t3);background:var(--card);border:1px solid var(--line);border-radius:7px;padding:4px 9px;cursor:pointer;text-decoration:none;transition:all .15s;}
.sec-act a:hover,.sec-act button:hover{color:var(--tx);border-color:var(--line2);}
.tv-collapsed .tv-grid{display:none;}
.mono{font-family:'IBM Plex Mono',monospace;}
.shell{max-width:1640px;margin:0 auto;padding:22px 26px 60px;}

/* ── TOP BAR ── */
.topbar{display:flex;align-items:center;gap:24px;flex-wrap:wrap;padding-bottom:18px;border-bottom:1px solid var(--line);}
.host{display:flex;flex-direction:column;gap:3px;}
.host-name{font-family:'IBM Plex Mono';font-size:15px;font-weight:600;letter-spacing:-.3px;display:flex;align-items:center;gap:9px;}
.host-dot{width:8px;height:8px;border-radius:50%;background:var(--ok);box-shadow:0 0 0 3px var(--ok-d);animation:breathe 2.4s ease-in-out infinite;}
@keyframes breathe{0%,100%{opacity:1;}50%{opacity:.5;}}
.host-sub{font-size:11px;color:var(--t3);font-family:'IBM Plex Mono';}
.topstats{display:flex;align-items:center;gap:4px;margin-left:auto;flex-wrap:wrap;}
.tstat{display:flex;align-items:center;gap:9px;padding:7px 15px;border-right:1px solid var(--line);}
.tstat:last-of-type{border-right:none;}
.tstat svg{width:17px;height:17px;stroke:var(--t3);fill:none;stroke-width:1.7;flex-shrink:0;}
.tstat .v{font-family:'IBM Plex Mono';font-size:15px;font-weight:600;letter-spacing:-.5px;}
.tstat .l{font-size:9px;color:var(--t3);text-transform:uppercase;letter-spacing:1.2px;font-weight:600;}
.tstat .col{display:flex;flex-direction:column;gap:0;line-height:1.15;}
.clockblock{display:flex;flex-direction:column;gap:1px;}
.clock{font-family:'IBM Plex Mono';font-size:3.4rem;font-weight:600;letter-spacing:-3px;line-height:.85;font-variant-numeric:tabular-nums;}
.cdate{font-size:12px;color:var(--t2);text-transform:capitalize;font-weight:500;margin-top:3px;}
.cgreet{font-size:10px;color:var(--t3);}
.host{display:flex;flex-direction:column;gap:3px;padding-left:18px;border-left:1px solid var(--line);align-self:stretch;justify-content:center;}
.right-cluster{display:flex;align-items:center;gap:9px;margin-left:8px;}
.wbadge{display:flex;align-items:center;gap:8px;padding:7px 13px;background:var(--card);border:1px solid var(--line);border-radius:var(--r-sm);}
.triplink{display:flex;align-items:center;gap:7px;padding:7px 13px;background:var(--card);border:1px solid var(--line);border-radius:var(--r-sm);color:var(--tx);text-decoration:none;font-size:13px;font-weight:600;white-space:nowrap;transition:all .15s;}
.triplink:hover{background:var(--hover);border-color:var(--line2);}
.triplink .tl-sub{color:var(--t2);font-weight:500;font-size:11.5px;}
.wemoji{font-size:1.25rem;}
.wtemp{font-family:'IBM Plex Mono';font-size:16px;font-weight:600;}
.wsub{font-size:10px;color:var(--t3);}
.ibtn{width:36px;height:36px;border-radius:var(--r-sm);display:flex;align-items:center;justify-content:center;background:var(--card);border:1px solid var(--line);color:var(--t2);cursor:pointer;transition:all .15s;}
.ibtn:hover{background:var(--hover);color:var(--tx);border-color:var(--line2);}
.ibtn svg{width:16px;height:16px;stroke:currentColor;fill:none;stroke-width:1.8;}
.ibtn.spin svg{animation:spin .7s linear infinite;}
@keyframes spin{to{transform:rotate(360deg);}}

/* ── SEARCH ── */
.search{display:flex;align-items:center;gap:11px;background:var(--card);border:1px solid var(--line);border-radius:var(--r-sm);padding:11px 16px;margin:18px 0 22px;transition:all .15s;}
.search:focus-within{border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-d);}
.search svg{width:15px;height:15px;stroke:var(--t3);fill:none;stroke-width:2;}
.search input{flex:1;background:none;border:none;outline:none;color:var(--tx);font-family:inherit;font-size:13px;}
.search input::placeholder{color:var(--t3);}

/* ── SECTION ── */
.sec{display:flex;align-items:center;gap:12px;margin:26px 0 14px;}
.sec-t{font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:2px;color:var(--accent);}
.sec-line{flex:1;height:1px;background:var(--accent);opacity:.25;}
.sec-meta{font-family:'IBM Plex Mono';font-size:11px;color:var(--t3);}

.card{background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:18px;position:relative;overflow:hidden;transition:border-color .15s;display:flex;flex-direction:column;justify-content:space-between;align-items:stretch;min-height:0;}
.card:hover{border-color:var(--line2);}
.card-h{display:flex;align-items:center;justify-content:space-between;}
.card-title{display:flex;align-items:center;gap:9px;font-size:12px;font-weight:600;}
.card-title .ic{width:30px;height:30px;border-radius:9px;display:flex;align-items:center;justify-content:center;flex-shrink:0;}
.card-title .ic svg{width:16px;height:16px;stroke-width:1.8;fill:none;}
.badge{font-family:'IBM Plex Mono';font-size:9px;font-weight:700;text-transform:uppercase;letter-spacing:.6px;padding:3px 8px;border-radius:6px;}
.badge.ok{color:var(--ok);background:var(--ok-d);}
.badge.warn{color:var(--warn);background:var(--warn-d);}
.badge.err{color:var(--err);background:var(--err-d);}
.badge.idle{color:var(--t3);background:rgba(255,255,255,.05);}

/* gauges */
.gauges{display:flex;justify-content:space-around;gap:8px;}
.gauge{display:flex;flex-direction:column;align-items:center;gap:6px;}
.gauge svg{width:58px;height:58px;transform:rotate(-90deg);}
.gauge .track{fill:none;stroke:rgba(255,255,255,.07);stroke-width:5;}
.gauge .prog{fill:none;stroke-width:5;stroke-linecap:round;transition:stroke-dashoffset .6s ease;}
.gauge .center{position:absolute;font-family:'IBM Plex Mono';font-size:13px;font-weight:600;}
.gauge-wrap{position:relative;display:flex;align-items:center;justify-content:center;}
.gauge .center{transform:none;}
.gauge .lbl{font-size:9px;color:var(--t3);text-transform:uppercase;letter-spacing:1px;font-weight:600;}
.vps-foot{display:flex;justify-content:space-between;font-family:'IBM Plex Mono';font-size:10px;color:var(--t2);padding-top:12px;border-top:1px solid var(--line);}
.vps-foot b{color:var(--tx);font-weight:600;}