/* Response8 — l'interface web des pare-feu (webgui.js) : une fenêtre de navigateur
   aux couleurs de chaque constructeur ; plein écran sur téléphone.         */
html.wg-ouvert .a-avis{z-index:95}
.wg-voile{position:fixed; inset:0; z-index:86; background:rgba(3,7,14,.74); display:flex; align-items:center; justify-content:center; padding:16px}
.wg-fen{
  --wg-p:#337AB7; --wg-tete:#212121; --wg-tete-t:#fff; --wg-nav:#2B2B2B; --wg-nav-t:#D8D8D8; --wg-nav-on:#337AB7; --wg-fond:#F4F5F7; --wg-carte:#fff; --wg-t:#1F2328; --wg-trait:#D9DDE3; --wg-h:#3A4654;
  width:min(1180px,100%); height:min(800px,calc(100vh - 32px)); display:flex; flex-direction:column; background:#DEE1E6; border-radius:12px; overflow:hidden;
  box-shadow:0 30px 80px rgba(0,0,0,.55); color:var(--wg-t); font:14px/1.4 system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
}
.wg-fen[data-style=opnsense]{--wg-p:#D94F00; --wg-tete:#FFFFFF; --wg-tete-t:#333; --wg-nav:#3C3C3C; --wg-nav-on:#D94F00}
.wg-fen[data-style=sophos]{--wg-p:#2D6CDF; --wg-tete:#00205B; --wg-nav:#0A2E6E; --wg-nav-t:#C9D7F2; --wg-nav-on:#2D6CDF}
.wg-fen[data-style=sonicwall]{--wg-p:#F26F21; --wg-tete:#1A1D21; --wg-nav:#25292E; --wg-nav-on:#F26F21}
.wg-fen[data-style=watchguard]{--wg-p:#C8102E; --wg-tete:#C8102E; --wg-nav:#3A3A3A; --wg-nav-on:#C8102E}
.wg-fen[data-style=stormshield]{--wg-p:#2D8CFF; --wg-tete:#1C2A3A; --wg-nav:#243447; --wg-nav-on:#2D8CFF}
.wg-fen[data-style=barracuda]{--wg-p:#0071B9; --wg-tete:#20262E; --wg-nav:#2F3742; --wg-nav-on:#0071B9}
.wg-fen[data-style=forcepoint]{--wg-p:#00A07A; --wg-tete:#14262B; --wg-nav:#1E363D; --wg-nav-on:#00A07A}
.wg-fen[data-style=ftd]{--wg-p:#049FD9; --wg-tete:#1D2733; --wg-nav:#26323F; --wg-nav-on:#049FD9}
/* — le navigateur */
.wg-barre{display:flex; align-items:flex-end; gap:6px; padding:8px 8px 0 12px; background:#CBD0D8}
.wg-onglet{display:flex; align-items:center; gap:8px; max-width:340px; min-width:0; padding:8px 14px; background:#F1F3F5; border-radius:9px 9px 0 0; font-size:13px}
.wg-onglet__ico{width:12px; height:12px; border-radius:3px; background:var(--wg-p); flex:0 0 auto}
.wg-onglet__t{white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.wg-espace{flex:1}
.wg-fen .wg-x{width:34px; height:34px; margin-bottom:4px; border:0; border-radius:8px; background:none; font-size:22px; cursor:pointer; color:#333}
.wg-fen .wg-x:hover{background:rgba(0,0,0,.08)}
.wg-url{display:flex; align-items:center; gap:8px; margin:0; padding:7px 12px; background:#F1F3F5; border-bottom:1px solid #C5CAD2}
.wg-url__cad{font-size:12px}
.wg-url__t{flex:1; padding:5px 12px; background:#fff; border-radius:16px; font:13px/1.2 ui-monospace,Menlo,Consolas,monospace; color:#3C4043; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.wg-corps{flex:1; min-height:0; overflow:auto; background:var(--wg-fond)}
.wg-voile :focus-visible{outline:2px solid var(--wg-p); outline-offset:2px}
.wg-eteint{padding:40px; text-align:center; color:#555}
/* — la connexion */
.wg-login{max-width:360px; margin:8vh auto; padding:28px; background:var(--wg-carte); border:1px solid var(--wg-trait); border-radius:10px; display:flex; flex-direction:column; gap:12px; box-shadow:0 6px 24px rgba(0,0,0,.08)}
.wg-login__logo{font-size:26px; color:var(--wg-tete-t); background:var(--wg-tete); padding:14px; border-radius:8px; text-align:center}
.wg-fen[data-style=opnsense] .wg-login__logo{border:1px solid var(--wg-trait)}
.wg-login h2{margin:0; font-size:16px; color:var(--wg-h); text-align:center}
.wg-login__err{margin:0; min-height:1.2em; color:#C62828; font-size:13px}
.wg-login__aide{color:#666; text-align:center}
/* — l'application */
.wg-app{display:flex; flex-direction:column; min-height:100%}
.wg-tete{display:flex; align-items:center; gap:12px; padding:10px 16px; background:var(--wg-tete); color:var(--wg-tete-t); border-bottom:3px solid var(--wg-p)}
.wg-logo{font-size:20px; white-space:nowrap}
.wg-logo small,.wg-login__logo small{font-size:.55em; opacity:.8; margin-left:4px; font-weight:400}
.wg-tete__nom{font:13px ui-monospace,Menlo,Consolas,monospace; opacity:.85}
.wg-milieu{flex:1; display:flex; min-height:0}
.wg-nav{flex:0 0 220px; display:flex; flex-direction:column; padding:8px 0; background:var(--wg-nav)}
.wg-fen .wg-nav__b{text-align:left; padding:10px 16px; border:0; border-left:3px solid transparent; background:none; color:var(--wg-nav-t); font:inherit; font-size:13.5px; cursor:pointer}
.wg-fen .wg-nav__b:hover{background:rgba(255,255,255,.07); color:#fff}
.wg-fen .wg-nav__b--on{border-left-color:var(--wg-nav-on); background:rgba(255,255,255,.1); color:#fff; font-weight:600}
.wg-contenu{flex:1; min-width:0; padding:16px 20px 30px; display:flex; flex-direction:column; gap:14px}
.wg-h1{margin:0; font-size:20px; font-weight:600; color:var(--wg-h)}
.wg-panneau{background:var(--wg-carte); border:1px solid var(--wg-trait); border-radius:6px; overflow:hidden}
.wg-panneau > *:not(.wg-panneau__t){margin:10px 12px}
.wg-panneau__t{margin:0; padding:9px 12px; font-size:14px; font-weight:600; background:var(--wg-tete); color:var(--wg-tete-t)}
.wg-fen[data-style=opnsense] .wg-panneau__t{background:#F4F4F4; border-bottom:1px solid var(--wg-trait)}
.wg-defile{overflow-x:auto; background:var(--wg-carte); border:1px solid var(--wg-trait); border-radius:6px}
.wg-panneau .wg-defile{border:0}
.wg-fen .wg-table{width:100%; border-collapse:collapse; font-size:13px}
.wg-fen .wg-table th{text-align:left; padding:8px 10px; background:#EEF0F3; color:#3A4654; font-weight:600; white-space:nowrap; border-bottom:1px solid var(--wg-trait)}
.wg-fen .wg-table td{padding:7px 10px; border-bottom:1px solid #ECEEF1; vertical-align:middle}
.wg-fen .wg-table tr.wg-off td{opacity:.5}
.wg-fen .wg-table tr.wg-auto td{background:#F7F8FA; font-style:italic; color:#555}
.wg-vide{color:#888; text-align:center; font-style:italic}
.wg-in{font:inherit; font-size:13px; padding:6px 8px; border:1px solid #C3C9D2; border-radius:4px; background:#fff; color:#1F2328; min-width:0; max-width:100%}
.wg-in:focus{border-color:var(--wg-p); outline:0; box-shadow:0 0 0 2px color-mix(in srgb,var(--wg-p) 25%,transparent)}
.wg-ipm{display:inline-flex; align-items:center; gap:4px; white-space:nowrap}
.wg-fen .wg-btn{font:inherit; font-size:13px; padding:7px 14px; border-radius:4px; border:1px solid #BCC3CD; background:#fff; color:#1F2328; cursor:pointer; white-space:nowrap}
.wg-fen .wg-btn:hover{border-color:var(--wg-p); color:var(--wg-p)}
.wg-fen .wg-btn--plein{background:var(--wg-p); border-color:var(--wg-p); color:#fff}
.wg-fen .wg-btn--plein:hover{filter:brightness(1.08); color:#fff}
.wg-fen .wg-btn--appliquer{background:#2E8B57; border-color:#2E8B57; color:#fff; font-weight:600}
.wg-fen .wg-btn--appliquer:hover{color:#fff; filter:brightness(1.1)}
.wg-fen .wg-btn--discret{background:transparent; color:inherit; border-color:rgba(127,127,127,.5)}
.wg-fen .wg-btn--petit{padding:3px 8px; font-size:12px}
.wg-fen .wg-btn--danger{color:#C62828; border-color:#E3A3A3}
.wg-outils{display:inline-flex; gap:4px; flex-wrap:wrap}
.wg-actions{display:flex; gap:8px; flex-wrap:wrap; align-items:center}
.wg-grille{display:grid; grid-template-columns:repeat(auto-fill,minmax(210px,1fr)); gap:10px}
.wg-ligne{display:flex; flex-direction:column; gap:4px}
.wg-ligne__lib{font-size:12.5px; font-weight:600; color:#3A4654}
.wg-ligne__aide{color:#777; font-size:11.5px}
.wg-panneau > .wg-ligne{max-width:520px}
.wg-note{margin:0; color:#5B6573; font-size:12.5px}
.wg-avis{padding:10px 14px; border-radius:6px; border:1px solid}
.wg-avis ul{margin:4px 0 0; padding-left:18px}
.wg-avis--ok{background:#E8F5E9; border-color:#A5D6A7; color:#1B5E20}
.wg-avis--err{background:#FDECEA; border-color:#F5C2C0; color:#8E1C14}
.wg-avis[hidden]{display:none}
.wg-attente{display:flex; align-items:center; gap:10px; flex-wrap:wrap; padding:10px 14px; background:#FFF8E1; border:1px solid #F3D27A; border-radius:6px; color:#5D4300}
.wg-attente span{flex:1; min-width:200px}
.wg-act{display:inline-block; padding:2px 8px; border-radius:10px; font-size:12px; font-weight:600; color:#fff; background:#2E8B57}
.wg-act--deny,.wg-act--reject{background:#C62828}
.wg-act--config{background:#5B6573}
.wg-etat{font-weight:600}
.wg-etat--up{color:#2E7D32}
.wg-etat--down{color:#B71C1C}
.wg-fen .wg-tabs{display:flex; gap:2px; flex-wrap:wrap; border-bottom:2px solid var(--wg-p)}
.wg-fen .wg-tab{border-radius:4px 4px 0 0; border-bottom:0}
.wg-fen .wg-tab--on{background:var(--wg-p); color:#fff; border-color:var(--wg-p)}
.wg-pre{margin:0; padding:10px; min-height:60px; background:#111; color:#D7F5D0; border-radius:4px; font:12.5px/1.45 ui-monospace,Menlo,Consolas,monospace; white-space:pre-wrap; overflow:auto}
.wg-facade{margin-left:4px}
@media (max-width:760px){
  .wg-voile{padding:0}
  .wg-fen{width:100%; height:100%; border-radius:0}
  .wg-milieu{flex-direction:column}
  .wg-nav{flex:0 0 auto; flex-direction:row; overflow-x:auto; padding:0}
  .wg-fen .wg-nav__b{border-left:0; border-bottom:3px solid transparent; white-space:nowrap; padding:10px 12px}
  .wg-fen .wg-nav__b--on{border-bottom-color:var(--wg-nav-on)}
  .wg-contenu{padding:12px}
  .wg-tete{flex-wrap:wrap; gap:8px; padding:8px 12px}
  .wg-logo{font-size:17px}
  .wg-tete__nom{display:none}
  .wg-onglet{max-width:70vw}
}
@media (prefers-reduced-motion:reduce){ .wg-voile *{transition:none!important} }