/* Response8 — les interfaces web Wi-Fi (sansfil.js). Préfixe sf-.
   Chaque constructeur a sa couleur et sa mise en page (comme sa vraie interface). */
.sf-voile{position:fixed; inset:0; z-index:86; background:rgba(3,7,14,.72); display:flex; align-items:center; justify-content:center; padding:16px}
.sf-fen{--sf-c:#006FFF; --sf-fond:#F4F6F9; --sf-carte:#FFFFFF; --sf-encre:#1C2733; --sf-gris:#6B7785; --sf-trait:#DDE3EA; --sf-nav:#FFFFFF; --sf-navtxt:#3A4654;
  width:min(1080px,100%); height:min(740px,calc(100vh - 32px)); display:flex; flex-direction:column; overflow:hidden;
  background:var(--sf-fond); color:var(--sf-encre); border-radius:12px; box-shadow:0 24px 60px rgba(0,0,0,.5); font:14px/1.45 system-ui,-apple-system,"Segoe UI",Roboto,sans-serif}
.sf-tete{display:flex; align-items:center; gap:12px; padding:10px 14px; background:var(--sf-c); color:#fff; min-height:52px}
.sf-logo{display:inline-flex; align-items:center; justify-content:center; min-width:30px; height:30px; padding:0 6px; border-radius:7px; background:rgba(255,255,255,.18); font-weight:800; font-size:15px}
.sf-produit{font-size:16px; white-space:nowrap}
.sf-appareil{opacity:.85; font-size:13px; flex:1; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.sf-fermer{background:transparent; border:0; color:inherit; font-size:26px; line-height:1; cursor:pointer; padding:0 6px; border-radius:6px}
.sf-fermer:hover,.sf-fermer:focus-visible{background:rgba(255,255,255,.2); outline:none}
.sf-pas{display:inline-block; padding:2px 9px; border-radius:20px; font-size:12px; font-weight:600; background:#E9EDF2; color:#5A6573}
.sf-tete .sf-pas{background:rgba(255,255,255,.2); color:#fff}
.sf-pas--ok{background:#DDF5E5; color:#17803D}
.sf-tete .sf-pas--ok{background:#2FBF71; color:#fff}
.sf-corps{flex:1; display:flex; min-height:0}
.sf-nav{width:210px; flex:none; background:var(--sf-nav); border-right:1px solid var(--sf-trait); padding:10px 8px; overflow:auto; display:flex; flex-direction:column; gap:2px}
.sf-onglet{text-align:left; background:transparent; border:0; border-radius:7px; padding:9px 12px; color:var(--sf-navtxt); font:inherit; cursor:pointer}
.sf-onglet:hover{background:rgba(0,0,0,.05)}
.sf-onglet:focus-visible{outline:2px solid var(--sf-c); outline-offset:-2px}
.sf-onglet--actif{background:var(--sf-c); color:#fff; font-weight:600}
.sf-main{flex:1; overflow:auto; padding:16px 20px 28px}
.sf-titre{display:flex; align-items:center; justify-content:space-between; gap:10px; margin-bottom:12px}
.sf-titre h2{margin:0; font-size:20px; font-weight:600}
.sf-grille{display:grid; grid-template-columns:repeat(auto-fill,minmax(250px,1fr)); gap:14px}
.sf-carte{background:var(--sf-carte); border:1px solid var(--sf-trait); border-radius:10px; padding:14px 16px; margin-bottom:14px; overflow:auto}
.sf-grille .sf-carte{margin-bottom:0}
.sf-carte h3{margin:0 0 10px; font-size:15px}
.sf-carte h4{margin:0 0 8px; font-size:14px}
.sf-gros{font-size:34px; font-weight:700; margin:4px 0 0; color:var(--sf-c)}
.sf-table{width:100%; border-collapse:collapse; font-size:13px}
.sf-table th{text-align:left; color:var(--sf-gris); font-weight:600; padding:6px 8px; border-bottom:1px solid var(--sf-trait); white-space:nowrap}
.sf-table td{padding:7px 8px; border-bottom:1px solid var(--sf-trait); vertical-align:middle}
.sf-table tr:last-child td{border-bottom:0}
.sf-vide{color:var(--sf-gris); text-align:center}
.sf-form{display:flex; flex-direction:column; gap:10px; max-width:460px}
.sf-form--ligne{flex-direction:row; flex-wrap:wrap; max-width:none; align-items:flex-end; margin-top:12px}
.sf-champ{display:flex; flex-direction:column; gap:4px; font-size:13px}
.sf-champ>span{font-weight:600; color:var(--sf-navtxt)}
.sf-champ small{color:var(--sf-gris)}
.sf-in{font:inherit; padding:7px 10px; border:1px solid #C5CED8; border-radius:7px; background:#fff; color:#1C2733; min-width:0}
.sf-in:focus{outline:2px solid var(--sf-c); outline-offset:0; border-color:var(--sf-c)}
.sf-in:disabled{background:#EEF1F4; color:#8A95A2}
.sf-coche{display:flex; align-items:center; gap:8px; cursor:pointer}
.sf-case{width:16px; height:16px; accent-color:var(--sf-c)}
.sf-ligne{display:flex; align-items:flex-end; gap:8px; flex-wrap:wrap}
.sf-ligne .sf-champ{flex:1}
.sf-actions{display:flex; gap:8px; flex-wrap:wrap}
.sf-btn{font:inherit; font-size:13px; padding:7px 14px; border-radius:7px; border:1px solid #C5CED8; background:#fff; color:#1C2733; cursor:pointer}
.sf-btn:hover{border-color:var(--sf-c); color:var(--sf-c)}
.sf-btn:focus-visible{outline:2px solid var(--sf-c); outline-offset:1px}
.sf-btn--plein{background:var(--sf-c); border-color:var(--sf-c); color:#fff; font-weight:600}
.sf-btn--plein:hover{filter:brightness(1.08); color:#fff}
.sf-btn--petit{padding:6px 9px}
.sf-msg{min-height:0; font-size:13px; border-radius:8px}
.sf-msg:not(:empty){padding:8px 12px; margin-bottom:12px}
.sf-msg--ok{background:#DDF5E5; color:#17803D}
.sf-msg--err{background:#FDE3E3; color:#B42318}
.sf-pre{background:#0F1720; color:#C9F3D6; padding:10px 12px; border-radius:8px; min-height:2em; white-space:pre-wrap; font:12px/1.4 ui-monospace,Consolas,monospace}

/* les constructeurs */
.sf-th-unifi{--sf-c:#006FFF; --sf-fond:#F6F7F9}
.sf-th-unifi .sf-tete{background:#fff; color:#1C2733; border-bottom:1px solid var(--sf-trait)}
.sf-th-unifi .sf-logo{background:#006FFF; color:#fff}
.sf-th-unifi .sf-tete .sf-pas{background:#E9EDF2; color:#5A6573}
.sf-th-unifi .sf-tete .sf-pas--ok{background:#DDF5E5; color:#17803D}
.sf-th-unifi .sf-nav{width:190px}
.sf-th-meraki{--sf-c:#67B346; --sf-nav:#2B3A42; --sf-navtxt:#D7E1E6}
.sf-th-meraki .sf-tete{background:#fff; color:#2B3A42; border-bottom:3px solid #67B346}
.sf-th-meraki .sf-logo{background:#67B346; color:#fff}
.sf-th-meraki .sf-onglet:hover{background:rgba(255,255,255,.08)}
.sf-th-omada{--sf-c:#00A6A6; --sf-nav:#1F2A37; --sf-navtxt:#C9D4DF}
.sf-th-omada .sf-onglet:hover{background:rgba(255,255,255,.08)}
.sf-th-mist{--sf-c:#2E8B3E; --sf-nav:#16222C; --sf-navtxt:#C3D0DA; --sf-fond:#F2F4F6}
.sf-th-mist .sf-tete{background:#16222C}
.sf-th-mist .sf-onglet:hover{background:rgba(255,255,255,.08)}
.sf-th-aruba{--sf-c:#FF8300; --sf-nav:#333F48; --sf-navtxt:#E3E7EA}
.sf-th-aruba .sf-tete{background:#333F48}
.sf-th-aruba .sf-logo{background:#FF8300}
.sf-th-aruba .sf-onglet:hover{background:rgba(255,255,255,.08)}
.sf-th-ruckus{--sf-c:#F08A1C; --sf-fond:#F3F3F3}
.sf-th-ruckus .sf-tete{background:#2B2B2B}
.sf-th-ruckus .sf-logo{background:#F08A1C}
.sf-th-forti{--sf-c:#DA291C; --sf-nav:#262F38; --sf-navtxt:#D3DAE0}
.sf-th-forti .sf-tete{background:#262F38; border-bottom:3px solid #DA291C}
.sf-th-forti .sf-logo{background:#DA291C}
.sf-th-forti .sf-onglet:hover{background:rgba(255,255,255,.08)}
.sf-th-tplink{--sf-c:#4ACBD6}
.sf-th-tplink .sf-tete{background:linear-gradient(90deg,#4ACBD6,#2BA9B5)}
.sf-th-tplink .sf-corps{flex-direction:column}
.sf-th-tplink .sf-nav,.sf-th-netgear .sf-nav,.sf-th-linksys .sf-nav{width:auto; flex-direction:row; flex-wrap:wrap; border-right:0; border-bottom:1px solid var(--sf-trait); padding:6px 10px}
.sf-th-tplink .sf-corps,.sf-th-netgear .sf-corps,.sf-th-linksys .sf-corps{flex-direction:column}
.sf-th-linksys{--sf-c:#00739D; --sf-fond:#EEF2F5}
.sf-th-linksys .sf-tete{background:#1D2D3A}
.sf-th-netgear{--sf-c:#5B2D90; --sf-fond:#F2F0F6}
.sf-th-netgear .sf-tete{background:#1B1B1B}
.sf-th-netgear .sf-logo{background:#5B2D90}
.sf-th-fritz{--sf-c:#E2001A; --sf-fond:#F5F2EC; --sf-nav:#FBF9F5}
.sf-th-fritz .sf-tete{background:#fff; color:#3A3A3A; border-bottom:4px solid #E2001A}
.sf-th-fritz .sf-logo{background:#E2001A; color:#fff}
.sf-th-fritz .sf-tete .sf-pas{background:#EEE; color:#555}
.sf-th-fritz .sf-tete .sf-pas--ok{background:#DDF5E5; color:#17803D}

/* le téléphone : les réglages Wi-Fi */
.sf-tel{width:min(380px,100%); height:min(720px,calc(100vh - 32px)); border-radius:34px; border:10px solid #111; background:#F2F2F7}
.sf-tel__barre{display:flex; align-items:center; justify-content:space-between; padding:10px 18px; background:#F2F2F7; color:#000; font-weight:600}
.sf-tel__barre .sf-fermer{color:#000}
.sf-tel__barre .sf-fermer:hover,.sf-tel__barre .sf-fermer:focus-visible{background:rgba(0,0,0,.08)}
.sf-tel__corps{flex:1; overflow:auto; padding:6px 14px 20px; --sf-c:#007AFF}
.sf-tel__groupe{background:#fff; border-radius:12px; margin:12px 0; overflow:hidden; display:flex; flex-direction:column}
.sf-tel__groupe h4{margin:10px 14px 4px; font-size:12px; color:#8E8E93; font-weight:500}
.sf-tel__groupe.sf-form{padding:12px 14px; max-width:none}
.sf-tel__groupe>.sf-btn{margin:8px 14px 12px; align-self:flex-start}
.sf-tel__res{display:flex; justify-content:space-between; align-items:center; gap:10px; background:#fff; border:0; border-top:1px solid #E5E5EA; padding:12px 14px; font:inherit; color:#000; text-align:left; cursor:pointer}
.sf-tel__res:hover{background:#F7F7FA}
.sf-tel__res:focus-visible{outline:2px solid #007AFF; outline-offset:-2px}
.sf-tel__res small{color:#8E8E93}
.sf-tel__res--actif{cursor:default; flex-direction:column; align-items:flex-start; border-top:0}
.sf-tel__res--actif span{color:#007AFF; font-weight:600}
.sf-tel__note{color:#8E8E93; font-size:13px; padding:8px 4px}

@media (max-width:720px){
  .sf-voile{padding:0; align-items:stretch}
  .sf-fen{width:100%; height:100%; border-radius:0}
  .sf-corps{flex-direction:column}
  .sf-nav{width:auto !important; flex-direction:row; flex-wrap:nowrap; overflow-x:auto; border-right:0; border-bottom:1px solid var(--sf-trait)}
  .sf-onglet{white-space:nowrap}
  .sf-main{padding:12px}
  .sf-appareil{display:none}
  .sf-tel{border:0; border-radius:0; width:100%}
}