:root{
  --bci-bg:#ffffff; --bci-bg-alt:#f5f7fb; --bci-bg-deep:#2c3457;
  --bci-surface:#ffffff; --bci-surface-2:#f0f3f9;
  --bci-border:#e2e6f0; --bci-border-strong:#c9d0e2;
  --bci-heading:#2c3457; --bci-text:#3f4560; --bci-text-muted:#64698a;
  --bci-on-dark:#eef1f8; --bci-on-dark-muted:#b6bcd2;
  --bci-navy:#2c3457; --bci-navy-soft:#3d4772;
  --bci-red:#c61f44; --bci-red-dark:#a81639;
  --bci-green:#1f9d6b; --bci-amber:#e0a12a;
  --bci-radius:12px; --bci-container:1200px;
  --bci-font-body:"Inter",-apple-system,"Segoe UI",Roboto,Arial,sans-serif;
  --bci-font-head:"Barlow",var(--bci-font-body);
  --bci-font-mono:"IBM Plex Mono",ui-monospace,Consolas,monospace;
}
*{box-sizing:border-box}
body{margin:0;font-family:var(--bci-font-body);color:var(--bci-text);
     background:var(--bci-bg-alt);font-size:15px;line-height:1.55}
h1,h2,h3{font-family:var(--bci-font-head);color:var(--bci-heading);
         margin:0;font-weight:600;letter-spacing:-.01em}

/* ---- bandeau ---- */
header{background:var(--bci-navy);color:var(--bci-on-dark);
       padding:14px 24px;display:flex;align-items:center;gap:20px;
       box-shadow:0 1px 3px rgba(44,52,87,.2)}
header .marque{height:30px;display:block}
header .sep{width:1px;height:32px;background:rgba(255,255,255,.2)}
header .site{flex:1}
header .site .nom{font-family:var(--bci-font-head);font-size:17px;
                  font-weight:600;color:#fff;line-height:1.2}
header .site .sous{font-size:12.5px;color:var(--bci-on-dark-muted)}
header .client{display:flex;align-items:center;gap:12px;font-size:13px;
               color:var(--bci-on-dark-muted)}
.pastille-client{width:38px;height:38px;border-radius:9px;background:#fff;
  display:grid;place-items:center;font-family:var(--bci-font-head);
  font-weight:700;color:var(--bci-navy);font-size:13px}

main{max-width:var(--bci-container);margin:0 auto;padding:26px 24px 60px}

/* ---- etat general ---- */
.etat{background:var(--bci-surface);border:1px solid var(--bci-border);
      border-left:5px solid var(--bci-green);border-radius:var(--bci-radius);
      padding:20px 24px;display:flex;align-items:center;gap:20px;
      margin-bottom:22px}
.etat .rond{width:46px;height:46px;border-radius:50%;background:rgba(31,157,107,.12);
            display:grid;place-items:center;flex:none}
.etat .rond span{width:18px;height:18px;border-radius:50%;background:var(--bci-green)}
.etat h2{font-size:19px;margin-bottom:2px}
.etat p{margin:0;color:var(--bci-text-muted);font-size:14px}
.etat .maj{margin-left:auto;text-align:right;font-size:12.5px;
           color:var(--bci-text-muted);white-space:nowrap}

/* ---- indicateurs ---- */
.grille{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-bottom:22px}
.carte{background:var(--bci-surface);border:1px solid var(--bci-border);
       border-radius:var(--bci-radius);padding:18px 20px}
.carte .lib{font-size:12.5px;text-transform:uppercase;letter-spacing:.06em;
            color:var(--bci-text-muted);margin-bottom:8px;font-weight:500}
.carte .val{font-family:var(--bci-font-head);font-size:30px;font-weight:600;
            color:var(--bci-heading);line-height:1}
.carte .val small{font-size:15px;font-weight:500;color:var(--bci-text-muted)}
.carte .note{margin-top:7px;font-size:12.5px;color:var(--bci-text-muted)}
.carte.ok .val{color:var(--bci-green)}
.carte.att .val{color:var(--bci-amber)}

/* ---- deux colonnes ---- */
.deux{display:grid;grid-template-columns:1.55fr 1fr;gap:16px;align-items:start}
.bloc{background:var(--bci-surface);border:1px solid var(--bci-border);
      border-radius:var(--bci-radius);overflow:hidden}
.bloc > h3{padding:15px 20px;border-bottom:1px solid var(--bci-border);
           font-size:15px;display:flex;align-items:center;gap:10px}
.bloc > h3 .compte{margin-left:auto;font-family:var(--bci-font-body);
  font-size:12px;font-weight:500;color:var(--bci-text-muted);
  background:var(--bci-surface-2);padding:2px 9px;border-radius:20px}

/* ---- carte ---- */
.plan{position:relative;aspect-ratio:16/11;background:var(--bci-surface-2);
      background-image:
        linear-gradient(rgba(44,52,87,.05) 1px,transparent 1px),
        linear-gradient(90deg,rgba(44,52,87,.05) 1px,transparent 1px);
      background-size:34px 34px}
.plan .filigrane{position:absolute;inset:0;display:grid;place-items:center;
  color:var(--bci-text-muted);font-size:13px;opacity:.5}
.pt{position:absolute;width:13px;height:13px;border-radius:50%;
    transform:translate(-50%,-50%);border:2px solid #fff;
    box-shadow:0 1px 3px rgba(44,52,87,.3)}
.pt.v{background:var(--bci-green)} .pt.o{background:var(--bci-amber)}
.pt.r{background:var(--bci-red)}   .pt.g{background:var(--bci-text-muted)}
.legende{display:flex;gap:18px;padding:12px 20px;border-top:1px solid var(--bci-border);
         font-size:12.5px;color:var(--bci-text-muted);flex-wrap:wrap}
.legende i{width:10px;height:10px;border-radius:50%;display:inline-block;
           margin-right:6px;vertical-align:-1px}

/* ---- alertes ---- */
.alerte{padding:14px 20px;border-bottom:1px solid var(--bci-border);
        display:flex;gap:13px;align-items:flex-start}
.alerte:last-child{border-bottom:0}
.alerte .puce{width:9px;height:9px;border-radius:50%;margin-top:6px;flex:none}
.alerte .titre{font-weight:600;color:var(--bci-heading);font-size:14px}
.alerte .det{font-size:13px;color:var(--bci-text-muted);margin-top:2px}
.alerte .quand{margin-left:auto;font-size:12px;color:var(--bci-text-muted);
               white-space:nowrap}
.fiche{padding:4px 20px 16px}
.ligne{display:flex;gap:14px;padding:11px 0;border-bottom:1px solid var(--bci-border);
       align-items:flex-start}
.ligne:last-child{border-bottom:0}
.cle{flex:none;width:130px;font-size:12.5px;color:var(--bci-text-muted);
     padding-top:1px}
.val2{font-size:14px;color:var(--bci-heading);font-weight:500;line-height:1.45}
.dim{font-weight:400;font-size:12.5px;color:var(--bci-text-muted);
     text-decoration:none}
a.dim:hover{color:var(--bci-red)}
.vide{padding:34px 20px;text-align:center;color:var(--bci-text-muted);font-size:14px}

footer{max-width:var(--bci-container);margin:0 auto;padding:0 24px 40px;
       color:var(--bci-text-muted);font-size:12.5px;
       display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap}
footer a{color:var(--bci-navy-soft);text-decoration:none}
@media(max-width:980px){
  .grille{grid-template-columns:repeat(2,1fr)}
  .deux{grid-template-columns:1fr}
}

.onglets{display:flex;gap:2px;margin:0 0 22px;border-bottom:2px solid var(--bci-border)}
.onglets a{padding:11px 20px;text-decoration:none;color:var(--bci-text-muted);
  font-weight:500;font-size:14.5px;border-bottom:2px solid transparent;
  margin-bottom:-2px}
.onglets a.on{color:var(--bci-navy);border-bottom-color:var(--bci-red);font-weight:600}
.onglets a:hover{color:var(--bci-navy)}
.entonnoir{display:flex;gap:2px;margin:18px 20px 6px;height:46px;border-radius:8px;
  overflow:hidden}
.entonnoir div{display:flex;align-items:center;justify-content:center;color:#fff;
  font-size:13px;font-weight:600;font-family:var(--bci-font-head)}
.leg{display:flex;gap:22px;padding:0 20px 18px;font-size:12.5px;
  color:var(--bci-text-muted);flex-wrap:wrap}
.leg i{width:10px;height:10px;border-radius:2px;display:inline-block;margin-right:6px}
.barres{display:flex;align-items:flex-end;gap:3px;height:150px;padding:18px 20px 8px}
.barres .b{flex:1;display:flex;flex-direction:column;justify-content:flex-end;gap:1px}
.barres .b span{display:block;border-radius:1px}
.jours{display:flex;gap:3px;padding:0 20px 16px;font-size:10.5px;
  color:var(--bci-text-dim)}
.jours div{flex:1;text-align:center}
.donut{display:flex;align-items:center;gap:26px;padding:20px}
.donut svg{flex:none}
.donut ul{list-style:none;margin:0;padding:0;font-size:13.5px;flex:1}
.donut li{display:flex;align-items:center;gap:9px;padding:5px 0}
.donut li i{width:11px;height:11px;border-radius:3px;flex:none}
.donut li b{margin-left:auto;font-family:var(--bci-font-mono);font-size:13px;
  color:var(--bci-heading)}
.donut li em{font-style:normal;color:var(--bci-red);font-size:11.5px;font-weight:600}
.enseign{background:var(--bci-surface-2);border-left:3px solid var(--bci-navy-soft);
  padding:14px 18px;margin:16px 20px;border-radius:0 8px 8px 0;font-size:13.5px;
  color:var(--bci-text)}
.enseign b{color:var(--bci-heading)}
.trois{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-bottom:18px}
@media(max-width:1000px){.trois{grid-template-columns:1fr}}

/* ---------------------------------------------------------- navigation */
.onglets{display:flex;gap:2px;margin:0 0 22px;border-bottom:2px solid var(--bci-border);
  flex-wrap:wrap}
.onglets a{padding:11px 20px;text-decoration:none;color:var(--bci-text-muted);
  font-weight:500;font-size:14.5px;border-bottom:2px solid transparent;
  margin-bottom:-2px}
.onglets a.on{color:var(--bci-navy);border-bottom-color:var(--bci-red);font-weight:600}
.onglets a:hover{color:var(--bci-navy)}

/* ---------------------------------------------------------- formulaires */
.connexion{max-width:520px;margin:40px auto}
.connexion h3{margin-top:0}
.connexion form{padding:4px 20px 20px}
.connexion label{display:block;font-size:13px;font-weight:600;
  color:var(--bci-text-muted);margin:16px 0 6px}
.connexion input{width:100%;padding:11px 13px;font-size:15px;
  font-family:var(--bci-font-body);color:var(--bci-text);
  border:1px solid var(--bci-border-strong);border-radius:8px;background:#fff}
.connexion input:focus{outline:none;border-color:var(--bci-navy);
  box-shadow:0 0 0 3px rgba(44,52,87,.12)}
.connexion button{margin-top:22px;width:100%;padding:12px;font-size:15px;
  font-weight:600;font-family:var(--bci-font-head);color:#fff;cursor:pointer;
  background:var(--bci-navy);border:0;border-radius:8px}
.connexion button:hover{background:var(--bci-navy-soft)}
.connexion .aide{margin:0;padding:14px 20px;font-size:13px;line-height:1.6;
  text-align:center;
  color:var(--bci-text-muted);border-top:1px solid var(--bci-border);
  background:var(--bci-surface-2);border-radius:0 0 var(--bci-radius) var(--bci-radius)}
.alerte-erreur,.alerte-info{margin:0 20px;padding:12px 15px;border-radius:8px;
  font-size:13.5px;line-height:1.55}
.alerte-erreur{background:#fdecef;border-left:3px solid var(--bci-red);
  color:var(--bci-red-dark)}
.alerte-info{background:var(--bci-surface-2);border-left:3px solid var(--bci-navy-soft);
  color:var(--bci-text)}

/* ---------------------------------------------------------- tableaux */
table.liste{width:100%;border-collapse:collapse;font-size:13.5px}
table.liste th{text-align:left;padding:11px 14px;font-size:11.5px;
  letter-spacing:.04em;text-transform:uppercase;color:var(--bci-text-muted);
  border-bottom:1px solid var(--bci-border);white-space:nowrap;font-weight:600}
table.liste td{padding:11px 14px;border-bottom:1px solid var(--bci-border);
  color:var(--bci-text)}
table.liste tr:last-child td{border-bottom:0}
table.liste tr:hover td{background:var(--bci-surface-2)}
table.liste td.n{font-family:var(--bci-font-mono);text-align:right;
  color:var(--bci-heading)}
table.liste a{color:var(--bci-navy);font-weight:600;text-decoration:none}
table.liste a:hover{text-decoration:underline}
.etiq{display:inline-block;padding:3px 9px;border-radius:20px;font-size:11.5px;
  font-weight:600;line-height:1.5}
.etiq.ok{background:#e6f6ef;color:#14724d}
.etiq.att{background:#fdf3e0;color:#8a6111}
.etiq.ko{background:#fdecef;color:var(--bci-red-dark)}
.etiq.gris{background:var(--bci-surface-2);color:var(--bci-text-muted)}
.vide{padding:38px 20px;text-align:center;color:var(--bci-text-muted);
  font-size:14px;line-height:1.7}
.actions{display:flex;gap:10px;flex-wrap:wrap;padding:16px 20px 20px;
  border-top:1px solid var(--bci-border)}
.actions form{display:inline}
.bouton{display:inline-block;padding:9px 16px;border-radius:8px;font-size:13.5px;
  font-weight:600;font-family:var(--bci-font-head);cursor:pointer;border:0;
  text-decoration:none;background:var(--bci-navy);color:#fff}
.bouton:hover{background:var(--bci-navy-soft)}
.bouton.leger{background:var(--bci-surface-2);color:var(--bci-navy);
  border:1px solid var(--bci-border-strong)}
.bouton.leger:hover{background:var(--bci-border)}
.bouton.danger{background:var(--bci-red)}
.bouton.danger:hover{background:var(--bci-red-dark)}

/* ---------------------------------------------------- page d'identification */
body.nue{background:var(--bci-bg-alt);display:flex;flex-direction:column;
  min-height:100vh}
body.nue main{flex:1;display:flex;flex-direction:column;justify-content:center;
  align-items:center;padding:40px 20px}
.portail{width:100%;max-width:460px}
.portail .marque-nue{display:block;margin:0 auto 22px;width:250px;
  height:auto;max-width:100%}
.portail .titre{text-align:center;font-family:var(--bci-font-head);
  font-size:23px;font-weight:600;color:var(--bci-heading);margin:0 0 4px;
  letter-spacing:-.01em}
.portail .titre em{font-style:normal;color:var(--bci-red)}
.portail .adresse{text-align:center;font-size:12.5px;color:var(--bci-text-dim);
  margin:0 0 24px;font-family:var(--bci-font-mono)}
.portail .connexion{margin:0}
body.nue footer{margin-top:0}

/* ---------------------------------------------------------------- marque

   « wifi - B COM INFO ».

   Le mot est en Poppins Bold CONVERTI EN TRACES : il ne depend plus
   d'aucune police installee sur le poste du visiteur, et sa graisse
   tient face a vos lettres dessinees.

   Les rapports ci-dessous ne sont pas regles a l'oeil. Ils viennent des
   proportions mesurees de votre fichier logo (mot-symbole de 1213 x 304,
   6 px de marge) : a ces valeurs, les deux blocs cales par le BAS ont
   leurs lignes de base exactement au meme endroit -- ecart 0,000 px.

   Une seule valeur commande tout : --mq-l, la largeur de votre logo.  */

.marque{--mq-l:186px;display:flex;flex-direction:column;align-items:center;
  margin-bottom:calc(var(--mq-l) * .21)}
.marque-bloc{display:flex;align-items:flex-end;justify-content:center;
  gap:calc(var(--mq-l) * .065);color:var(--bci-heading)}
.marque.sombre,
.marque-bloc.sombre{color:#fff}
.marque.sombre{margin-bottom:0}

/* Le nom du produit, sous la marque. Petites capitales espacees : il
   nomme sans se mettre en avant, et il ne repete pas le logo.        */
.mq-produit{margin-top:calc(var(--mq-l) * .085);
  font-family:var(--bci-font-body);font-weight:600;
  font-size:calc(var(--mq-l) * .062);letter-spacing:.28em;text-indent:.28em;
  color:var(--bci-text-muted);white-space:nowrap}
.marque.sombre .mq-produit{color:var(--bci-on-dark-muted)}

.mq-wifi{height:calc(var(--mq-l) * .3474);width:auto;flex:none;display:block}
.mq-logo{width:var(--mq-l);height:auto;flex:none;display:block}
.mq-tiret{flex:none;width:calc(var(--mq-l) * .080);
  height:calc(var(--mq-l) * .027);border-radius:1px;background:currentColor;
  margin-bottom:calc(var(--mq-l) * .1118)}

.mq-arc1{stroke:var(--bci-red)}
.mq-arc2{stroke:var(--bci-navy-soft)}
.marque-bloc.sombre .mq-arc2{stroke:#b6bcd2}
.mq-pt{fill:var(--bci-red)}
.marque-bloc.sombre .mq-pt{fill:#fff}

/* L'onde qui part. Les deux arcs fixes restent visibles en permanence :
   la marque n'est jamais incomplete, l'animation ne fait qu'ajouter.
   L'origine est le point emetteur, exprimee en pourcentage du cadre.  */
.mq-onde{stroke:var(--bci-red);opacity:0;
  transform-box:view-box;transform-origin:54.68% 28.93%;
  animation:mq-emission 3.4s cubic-bezier(.22,.61,.36,1) infinite}
.marque-bloc.sombre .mq-onde{stroke:#8f9ac2}
@keyframes mq-emission{
  0%   {opacity:0;   transform:scale(.55)}
  18%  {opacity:.62; transform:scale(.85)}
  58%  {opacity:0;   transform:scale(1.55)}
  100% {opacity:0;   transform:scale(1.55)}
}
/* Une marque qui clignote toute la journee sur un poste de reception,
   c'est fatigant : on la coupe pour qui a demande moins d'animations. */
@media (prefers-reduced-motion: reduce){ .mq-onde{animation:none} }