/* Bandeau de la plateforme « wifi - B COM INFO » : repris TEL QUEL de l'admin (bci.css : variables, bandeau,
   marque, pastille de version, règles @media), pour que le module ait exactement la même tête que l'admin et la
   supervision. Aucune ressource externe (CSP) : le mot « wifi » est un tracé inline, les logos sont servis ici.
   © 2026 B COM INFO. */
: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;
}

/* ---- bandeau (bci.css de l'admin) ---- */
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);
       /* le corps de page de l'admin (police, taille, interligne) : même hauteur de bandeau */
       font-family:var(--bci-font-body);font-size:15px;line-height:1.55;flex:none}
header .marque{margin:0;flex:none}
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)}
/* le produit (SUPERVISION, ADMINISTRATION, PROJETS) : le titre du bandeau,
   grand, avec son icone ; la version a la suite */
header .site.produit{flex:none}
header .site.produit .nom{font-size:21px;letter-spacing:.2em;text-indent:.05em;display:flex;align-items:center}
header .produit-bandeau{display:inline-flex;align-items:center;gap:9px}
header .produit-bandeau svg{color:#8fd48a;flex:none}
header .site.camping{flex:1;display:flex;align-items:center;gap:12px;margin-left:12px}
header .site.camping .nom{font-size:16px}
@media(max-width:900px){header .site.produit .nom{font-size:16px;letter-spacing:.14em}}
header .client{display:flex;align-items:center;gap:12px;font-size:13px;
               color:var(--bci-on-dark-muted);margin-left:auto}
.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}
/* la version (pastille) : lien vers les nouveautés dans l'admin ; ici sans lien (span) */
header .site a.version,header .site span.version{display:inline-block;margin-left:12px;padding:0 7px;border:1px solid rgba(255,255,255,.35);
  border-radius:10px;color:var(--bci-on-dark-muted);text-decoration:none;font-family:var(--bci-font-body);font-weight:400;
  font-size:11px;line-height:16px;letter-spacing:.2px;text-indent:0;vertical-align:2px}
header .site a.version:hover{background:rgba(255,255,255,.12);border-color:rgba(255,255,255,.6)}

/* ---------------------------------------------------------------- marque « wifi - B COM INFO »
   Le mot est en Poppins Bold CONVERTI EN TRACES (aucune police à charger). Une seule valeur commande tout :
   --mq-l, la largeur du logo. Rapports mesurés sur le fichier logo de Romain (lignes de base communes). */
.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}
.mq-produit{margin-top:calc(var(--mq-l) * .05);
  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) * .3252);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) */
.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)}
}
@media (prefers-reduced-motion: reduce){ .mq-onde{animation:none} }
.mq-slogan{margin-top:calc(var(--mq-l) * .085);font-family:var(--bci-font-head);
  font-size:calc(var(--mq-l) * .072);font-weight:500;font-style:italic;
  color:var(--bci-navy-soft);letter-spacing:.005em}
.marque.sombre .mq-slogan{color:var(--bci-on-dark-muted)}
/* dans le bandeau (logo à 112 px ou 72 px) : le slogan reste lisible, sur une ligne */
.mq-slogan-bandeau{margin-top:3px;font-size:10.5px;white-space:nowrap;letter-spacing:.01em}
@media(max-width:640px){.mq-slogan-bandeau{display:none}}

/* petit écran (mobile.css de l'admin) : marque réduite, séparateur et projet en cours masqués */
@media(max-width:760px){
  header{gap:10px;padding:10px 12px}
  header .marque{--mq-l:72px}
  header .sep,header .site.camping{display:none}
  header .site{min-width:0}
  header .site.produit .nom{font-size:14px;letter-spacing:.1em}
  header .site .sous,header .site span.version{display:none}
  header .client .qui{display:none}
}
@media print{header{display:none !important}}