/* ============================================================================
   Plateforme QHSE : éléments communs à toutes les pages
   (menu latéral, barre mobile, fil d'Ariane, pied de page, sélecteur de
   période, variations, écran de connexion, bandeau d'état).
   Préfixe "qs-" et propriétés explicites pour ne jamais entrer en conflit
   avec Bootstrap (formulaire M-TEC) ni avec le style propre à chaque outil.
   ============================================================================ */
:root {
  --qs-ink: #0f1b33;
  --qs-text: #24324d;
  --qs-muted: #5b6780;
  --qs-line: #dde4ef;
  --qs-soft: #eef2f8;
  --qs-brand: #0f1b33;
  --qs-accent: #5b8def;
  --qs-font: 'Segoe UI', system-ui, -apple-system, Roboto, Arial, sans-serif;
  --qs-side-w: 264px;    /* largeur du menu latéral */
  --qs-rail-w: 72px;     /* largeur du menu réduit */
  --qs-top: 0px;         /* hauteur de la barre fixe du haut (mobile / tablette uniquement) */
  --qs-bnav-h: 0px;      /* réservé (aucune barre en bas) */
  --qs-side-bg: #0f1b33;
  --qs-side-text: #c9d3e6;
  --qs-side-hover: rgba(255, 255, 255, .07);
}
body[data-societe="mtec"] { --qs-brand: #0B2A6F; --qs-accent: #0B2A6F; --qs-soft: #E8EDF7; }
body[data-societe="innoventis"] { --qs-brand: #11366E; --qs-accent: #EB0015; --qs-soft: #e8edf6; }

.qs-ico { width: 20px; height: 20px; flex: 0 0 auto; display: block; }
.qs-toggle {
  display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; flex: 0 0 auto;
  border: 0; border-radius: 10px; background: transparent; color: inherit; cursor: pointer; padding: 0;
}
.qs-mark {
  width: 34px; height: 34px; border-radius: 9px; flex: 0 0 auto; display: block;
  background: #0f1b33 url("/assets/img/favicon.svg") center / cover no-repeat;
}

/* ------------------------------ Menu latéral ------------------------------ */
.qs-side {
  position: fixed; top: 0; bottom: 0; left: 0; z-index: 160; width: var(--qs-side-w);
  display: flex; flex-direction: column; background: var(--qs-side-bg); color: var(--qs-side-text);
  font: 14px/1.35 var(--qs-font); box-shadow: 2px 0 14px rgba(15, 27, 51, .12);
  transition: width .2s ease, transform .25s ease;
}
.qs-side ul { list-style: none; margin: 0; padding: 0; }
.qs-side a { text-decoration: none; }
.qs-side-head { display: flex; align-items: center; gap: .4rem; padding: .9rem .8rem .9rem 1rem; min-height: 64px; border-bottom: 1px solid rgba(255, 255, 255, .08); }
.qs-brand { display: flex; align-items: center; gap: .65rem; color: #fff; flex: 1 1 auto; min-width: 0; }
.qs-brand-txt { font-weight: 800; letter-spacing: .05em; font-size: 15px; color: #fff; white-space: nowrap; }
.qs-brand-txt small { display: block; font-weight: 500; letter-spacing: 0; font-size: 11.5px; color: var(--qs-side-text); }
.qs-side .qs-toggle { color: var(--qs-side-text); }
.qs-side .qs-toggle:hover { background: var(--qs-side-hover); color: #fff; }
.qs-close { display: none; }

.qs-side-nav { flex: 1 1 auto; overflow-y: auto; padding: .6rem .55rem; scrollbar-width: thin; }
.qs-side-title { font-size: 10.5px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: #8193b5; padding: 1rem .7rem .4rem; }
.qs-side-link {
  display: flex; align-items: center; gap: .7rem; width: 100%; min-height: 42px; padding: 0 .7rem; margin: 1px 0;
  border: 0; border-radius: 10px; background: transparent; color: var(--qs-side-text);
  font: 600 14px/1.25 var(--qs-font); text-align: left; cursor: pointer; transition: background .15s, color .15s;
}
.qs-side-link:hover { background: var(--qs-side-hover); color: #fff; }
.qs-side-link.qs-active { background: rgba(91, 141, 239, .18); color: #fff; box-shadow: inset 3px 0 0 #5b8def; }
.qs-label { min-width: 0; overflow: hidden; text-overflow: ellipsis; }

.qs-group { margin-top: .25rem; }
.qs-group-head {
  display: flex; align-items: center; gap: .65rem; width: 100%; min-height: 44px; padding: 0 .7rem;
  border: 0; border-radius: 10px; background: transparent; color: #fff; cursor: pointer;
  font: 700 14px/1.2 var(--qs-font); text-align: left;
}
.qs-group-head:hover { background: var(--qs-side-hover); }
.qs-group-badge {
  width: 26px; height: 26px; border-radius: 7px; display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto;
  font: 800 12px/1 var(--qs-font); color: #fff; background: #3d63b8;
}
.qs-group[data-group="innoventis"] .qs-group-badge { background: #EB0015; }
.qs-group-head .qs-label { flex: 1 1 auto; }
.qs-caret { width: 16px; height: 16px; transition: transform .2s; opacity: .7; }
.qs-group.qs-open > .qs-group-head .qs-caret { transform: rotate(180deg); }
.qs-group-body { display: none; padding: .1rem 0 .4rem .55rem; margin-left: .8rem; border-left: 1px solid rgba(255, 255, 255, .1); }
.qs-group.qs-open > .qs-group-body { display: block; }
.qs-row { display: flex; align-items: center; gap: 2px; }
.qs-row .qs-side-link { flex: 1 1 auto; min-width: 0; }
.qs-sub-toggle { width: 34px; height: 34px; }
.qs-sub-toggle .qs-ico { width: 16px; height: 16px; transition: transform .2s; }
.qs-sub-open .qs-sub-toggle .qs-ico { transform: rotate(180deg); }
.qs-sub { padding: .1rem 0 .3rem 2.1rem; }
.qs-sub-link {
  display: flex; align-items: center; min-height: 36px; padding: 0 .6rem; border-radius: 8px;
  color: #aebbd4; font-size: 13px; font-weight: 500; line-height: 1.2;
}
.qs-sub-link:hover { background: var(--qs-side-hover); color: #fff; }
.qs-sub-link.qs-active { color: #fff; background: rgba(91, 141, 239, .18); font-weight: 700; }

.qs-side-foot { padding: .55rem; border-top: 1px solid rgba(255, 255, 255, .08); }
.qs-side a:focus-visible, .qs-side button:focus-visible, .qs-top button:focus-visible, .qs-top a:focus-visible,
.qs-period button:focus-visible { outline: 3px solid #5b8def; outline-offset: 2px; }

/* Contenu décalé à droite du menu (grand écran) */
body.qs-app { padding-left: var(--qs-side-w); transition: padding-left .2s ease; }
.qs-top, .qs-scrim { display: none; }

/* Menu réduit en barre d'icônes */
body.qs-rail { padding-left: var(--qs-rail-w); }
body.qs-rail .qs-side { width: var(--qs-rail-w); }
body.qs-rail .qs-side .qs-label, body.qs-rail .qs-caret, body.qs-rail .qs-sub, body.qs-rail .qs-sub-toggle,
body.qs-rail .qs-side-title { display: none !important; }
body.qs-rail .qs-side-head { flex-direction: column; padding: .8rem .4rem; gap: .5rem; }
body.qs-rail .qs-rail-toggle .qs-ico { transform: rotate(180deg); }
body.qs-rail .qs-side-link, body.qs-rail .qs-group-head { justify-content: center; padding: 0; }
body.qs-rail .qs-group-body { display: block; margin-left: 0; padding-left: 0; border-left: 0; }

/* Fil d'Ariane (grand écran) */
.qs-crumb { display: flex; align-items: center; gap: .8rem; margin: 0 0 1rem; font: 13px/1.3 var(--qs-font); color: var(--qs-muted); }
.qs-crumb img { height: 36px; width: auto; max-width: 180px; display: block; }
.qs-crumb-txt { padding-left: .8rem; border-left: 1px solid var(--qs-line); }
.qs-crumb b { color: var(--qs-ink); }

/* ------------------------- Mobile et tablette : tiroir ------------------------- */
@media (max-width: 1023.98px) {
  :root { --qs-top: 56px; }
  body.qs-app, body.qs-rail { padding-left: 0; }
  .qs-top {
    position: sticky; top: 0; z-index: 150; display: flex; align-items: center; gap: .6rem;
    height: var(--qs-top); padding: 0 .6rem; background: #fff; color: var(--qs-ink);
    border-bottom: 3px solid var(--qs-accent); box-shadow: 0 2px 10px rgba(15, 27, 51, .08);
    font: 14px/1.2 var(--qs-font);
  }
  .qs-top .qs-toggle { color: var(--qs-ink); }
  .qs-top .qs-toggle:hover { background: var(--qs-soft); }
  .qs-top-brand { display: flex; align-items: center; gap: .5rem; color: var(--qs-ink); text-decoration: none; flex: 0 0 auto; }
  .qs-top-brand .qs-logo { height: 30px; width: auto; max-width: 130px; display: block; }
  .qs-top-brand .qs-mark { width: 30px; height: 30px; }
  .qs-top-title { margin-left: auto; font-weight: 700; color: var(--qs-brand); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; padding-right: .3rem; }
  .qs-crumb { display: none; }

  .qs-side, body.qs-rail .qs-side { width: min(86vw, 300px); transform: translateX(-102%); z-index: 2000; }
  body.qs-drawer-open .qs-side { transform: translateX(0); }
  body.qs-rail .qs-side .qs-label, body.qs-rail .qs-caret, body.qs-rail .qs-sub-toggle, body.qs-rail .qs-side-title { display: revert !important; }
  body.qs-rail .qs-side-link, body.qs-rail .qs-group-head { justify-content: flex-start; padding: 0 .7rem; }
  body.qs-rail .qs-side-head { flex-direction: row; padding: .9rem .8rem .9rem 1rem; }
  body.qs-rail .qs-group-body { display: none; margin-left: .8rem; padding-left: .55rem; border-left: 1px solid rgba(255, 255, 255, .1); }
  body.qs-rail .qs-group.qs-open > .qs-group-body { display: block; }
  .qs-rail-toggle { display: none; }
  .qs-close { display: inline-flex; }
  .qs-scrim { position: fixed; inset: 0; z-index: 1990; background: rgba(15, 27, 51, .5); }
  body.qs-drawer-open .qs-scrim { display: block; }
  body.qs-drawer-open { overflow: hidden; }
  .qs-side-link, .qs-group-head { min-height: 46px; }
  .qs-sub-link { min-height: 42px; }
}

/* ------------------------------- Pied de page ------------------------------- */
.qs-foot {
  text-align: center; font: 12px/1.5 var(--qs-font); color: var(--qs-muted);
  padding: 1.2rem 1rem 1.6rem; margin: 0; border: 0; background: transparent;
}

/* --------------------------- Sélecteur de période --------------------------- */
.qs-period { display: flex; align-items: center; gap: .6rem 1rem; flex-wrap: wrap; font-family: var(--qs-font); }
.qs-period-types { display: inline-flex; background: var(--qs-soft); border-radius: 10px; padding: 3px; flex-wrap: wrap; }
.qs-period-types button {
  border: 0; background: transparent; color: var(--qs-text); font: 600 13px/1 var(--qs-font);
  min-height: 36px; padding: 0 .8rem; border-radius: 8px; cursor: pointer; transition: background .15s, color .15s;
}
.qs-period-types button:hover { color: var(--qs-brand); }
.qs-period-types button.qs-on { background: var(--qs-brand); color: #fff; }
.qs-period-nav { display: inline-flex; align-items: center; gap: .35rem; flex: 1 1 260px; min-width: 0; }
.qs-period-label { font: 700 14px/1.3 var(--qs-font); color: var(--qs-ink); padding: 0 .3rem; flex: 0 1 auto; min-width: 0; }
.qs-period-label::first-letter { text-transform: uppercase; }
.qs-period-arrow {
  display: inline-flex; align-items: center; justify-content: center; width: 38px; height: 38px; flex: 0 0 auto;
  border: 1px solid var(--qs-line); background: #fff; color: var(--qs-brand); border-radius: 10px; cursor: pointer; padding: 0;
}
.qs-period-arrow:hover:not(:disabled) { background: var(--qs-soft); }
.qs-period-arrow:disabled { opacity: .35; cursor: default; }
.qs-period-arrow[hidden] { display: none; }
.qs-period-today {
  margin-left: auto; border: 1px solid var(--qs-line); background: #fff; color: var(--qs-brand);
  font: 600 13px/1 var(--qs-font); min-height: 38px; padding: 0 .8rem; border-radius: 10px; cursor: pointer;
}
.qs-period-today:hover { background: var(--qs-soft); }
@media (max-width: 575.98px) {
  .qs-period-types { display: grid; grid-template-columns: repeat(5, 1fr); width: 100%; }
  .qs-period-types button { padding: 0 .2rem; font-size: 12.5px; min-height: 40px; }
  .qs-period-nav { flex-basis: 100%; }
  .qs-period-label { flex: 1 1 auto; text-align: center; font-size: 13.5px; }
}

/* Variation d'un indicateur par rapport à la période précédente */
.qs-delta { display: inline-flex; align-items: center; gap: .15rem; font: 700 12px/1.2 var(--qs-font); white-space: nowrap; }
.qs-delta .qs-ico { width: 14px; height: 14px; }
.qs-delta.up-good, .qs-delta.down-good { color: #14663f; }
.qs-delta.up-bad, .qs-delta.down-bad { color: #b42318; }
.qs-delta.flat, .qs-delta.neutral { color: var(--qs-muted); }

/* ------------------------------ Écran de connexion ------------------------------ */
.qs-login {
  position: fixed; inset: 0; z-index: 3000; display: flex; align-items: center; justify-content: center;
  background: rgba(15, 27, 51, .72); backdrop-filter: blur(4px); padding: 1rem;
  font-family: var(--qs-font);
}
.qs-login-card {
  width: 100%; max-width: 380px; background: #fff; border-radius: 16px; padding: 1.6rem 1.5rem;
  box-shadow: 0 20px 50px rgba(0, 0, 0, .3); color: #263248;
}
.qs-login-card h2 { margin: 0 0 .3rem; font-size: 1.2rem; color: var(--qs-ink); }
.qs-login-card p { margin: 0 0 1rem; font-size: .88rem; color: #5b6780; }
.qs-login-card input {
  width: 100%; box-sizing: border-box; font-size: 16px; padding: .7rem .8rem; border-radius: 10px;
  border: 1.5px solid #cfd8e8; margin-bottom: .8rem; font-family: inherit;
}
.qs-login-card input:focus { outline: none; border-color: var(--qs-accent); box-shadow: 0 0 0 3px rgba(91, 141, 239, .2); }
.qs-login-card button {
  width: 100%; border: none; border-radius: 10px; padding: .75rem; font: inherit; font-weight: 700; min-height: 46px;
  background: var(--qs-ink); color: #fff; cursor: pointer;
}
.qs-login-card button:hover { background: #1c2b4a; }
.qs-login-err { color: #c0262d; font-size: .84rem; min-height: 1.2em; margin-bottom: .4rem; }

/* ------------------------------ Bandeau d'état ------------------------------ */
.qs-status {
  display: inline-flex; align-items: center; gap: .4rem; font-size: .78rem; font-weight: 600;
  padding: .3rem .7rem; border-radius: 999px; background: #eef2f8; color: #3b4a66;
}
.qs-status::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: #9aa7bb; }
.qs-status.ok::before { background: #1e9e5a; }
.qs-status.err::before { background: #d33b3b; }
.qs-hidden { display: none !important; }

@media (prefers-reduced-motion: reduce) {
  .qs-side, body.qs-app, .qs-side * , .qs-period * { transition: none !important; }
}