/* =====================================================================
   SIPRO-CHIM — Design system « Écarts LABSA »
   Palette dérivée du logo : rouge + bleu royal.
   ===================================================================== */
:root{
  --sipro-red:#D42027;
  --sipro-red-dark:#AE1A20;
  --sipro-blue:#1E3F8F;
  --sipro-blue-dark:#152C64;
  --sipro-blue-light:#3A5FB0;

  --ink:#1e2733;
  --muted:#697586;
  --line:#e6e9f0;
  --bg:#eef1f7;
  --card:#ffffff;

  --ok:#1b7f4b;
  --warn:#c98a00;
  --crit:var(--sipro-red);

  --radius:14px;
  --shadow:0 1px 2px rgba(21,44,100,.06), 0 6px 24px rgba(21,44,100,.07);
  --shadow-sm:0 1px 2px rgba(21,44,100,.08);
}

body{
  background:
    radial-gradient(1200px 400px at 100% -50%, rgba(30,63,143,.06), transparent),
    var(--bg);
  color:var(--ink);
  font-family:'Inter',"Segoe UI",system-ui,-apple-system,Roboto,Helvetica,Arial,sans-serif;
  -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale;
  font-size:15.5px; line-height:1.55; letter-spacing:.1px;
}
/* Chiffres alignés (colonnes de valeurs, KPI) */
.kpi-val, .table-calcul td.val, .table .text-end, .kfig .val, td[class*="val"]{ font-variant-numeric:tabular-nums; }

/* ---------- Barre d'application (avec logo) ------------------------- */
.navbar-sipro{
  background:var(--card);
  border-bottom:1px solid var(--line);
  box-shadow:0 2px 12px rgba(21,44,100,.05);
  padding-top:.4rem; padding-bottom:.4rem;
  position:relative;
}
.navbar-sipro::after{ /* filet dégradé bleu -> rouge sous la barre */
  content:""; position:absolute; left:0; right:0; bottom:-3px; height:3px;
  background:linear-gradient(90deg, var(--sipro-blue) 0%, var(--sipro-blue-light) 45%, var(--sipro-red) 100%);
}
.brand-logo{
  height:40px; width:auto; border-radius:8px; background:#fff;
  padding:2px; box-shadow:0 1px 3px rgba(0,0,0,.08);
}
.brand-txt{ display:flex; flex-direction:column; justify-content:center; line-height:1.1; margin-left:.6rem; }
.brand-txt b{ color:var(--sipro-blue); font-weight:800; letter-spacing:.2px; font-size:1.02rem; }
.brand-txt small{ display:block; color:var(--muted); font-size:.7rem; text-transform:uppercase; letter-spacing:.07em; }
.navbar-sipro .nav-link{ color:var(--ink) !important; font-weight:600; border-radius:8px; padding:.35rem .8rem !important; }
.navbar-sipro .nav-link:hover{ background:rgba(30,63,143,.06); color:var(--sipro-blue) !important; }
.navbar-sipro .nav-link.active{ background:rgba(30,63,143,.10); color:var(--sipro-blue) !important; }
.user-chip{
  display:inline-flex; align-items:center; gap:.5rem; font-size:.85rem; color:var(--muted);
}
.user-chip .role{ background:var(--sipro-blue); color:#fff; border-radius:20px; padding:.12rem .6rem; font-size:.72rem; font-weight:700; letter-spacing:.03em; }

/* ---------- Typo & titres ------------------------------------------ */
.page-title{ color:var(--sipro-blue); font-weight:800; letter-spacing:-.2px; }
.text-sipro{ color:var(--sipro-blue) !important; }
.eyebrow{ color:var(--muted); font-size:.78rem; text-transform:uppercase; letter-spacing:.09em; }

/* ---------- Boutons ------------------------------------------------- */
.btn-sipro{ background:var(--sipro-blue); border:1px solid var(--sipro-blue); color:#fff; font-weight:600; border-radius:10px; }
.btn-sipro:hover{ background:var(--sipro-blue-dark); border-color:var(--sipro-blue-dark); color:#fff; }
.btn-sipro-rouge{ background:var(--sipro-red); border:1px solid var(--sipro-red); color:#fff; font-weight:600; border-radius:10px; }
.btn-sipro-rouge:hover{ background:var(--sipro-red-dark); border-color:var(--sipro-red-dark); color:#fff; }
.btn-outline-secondary{ border-radius:10px; }

/* ---------- Cartes -------------------------------------------------- */
.card{ border:1px solid var(--line); border-radius:var(--radius); box-shadow:var(--shadow-sm); }
.card.shadow-sm{ box-shadow:var(--shadow) !important; }
.card-header{ font-weight:700; border-top-left-radius:var(--radius)!important; border-top-right-radius:var(--radius)!important; }
.bg-sipro{ background:linear-gradient(100deg, var(--sipro-blue), var(--sipro-blue-light)); color:#fff; border:none; }
.bg-sipro-rouge{ background:linear-gradient(100deg, var(--sipro-red), #E24A4F); color:#fff; border:none; }

/* KPI */
.card-kpi{ border:1px solid var(--line); border-left:5px solid var(--sipro-blue); border-radius:var(--radius); background:var(--card); }
.card-kpi .kpi-lib{ font-size:.74rem; color:var(--muted); text-transform:uppercase; letter-spacing:.06em; font-weight:600; }
.card-kpi .kpi-val{ font-size:1.7rem; font-weight:800; color:var(--sipro-blue); line-height:1.1; }

/* ---------- Tableaux ----------------------------------------------- */
.table{ --bs-table-color:var(--ink); }
.table thead.table-light th{ background:#f3f5fa; color:var(--muted); text-transform:uppercase; font-size:.72rem; letter-spacing:.05em; border-color:var(--line); }
.table-calcul td.formule{ color:#8a94a6; font-size:.8rem; font-family:ui-monospace,"Cascadia Code",Consolas,monospace; }
.table-calcul td.val{ text-align:right; font-variant-numeric:tabular-nums; font-weight:600; }
.table-hover tbody tr:hover{ background:rgba(30,63,143,.035); }

/* ---------- Badges de statut --------------------------------------- */
.badge{ border-radius:20px; font-weight:700; letter-spacing:.02em; }
.badge.bg-success{ background:var(--ok)!important; }
.badge.bg-danger{ background:var(--crit)!important; }

/* ---------- Bandeaux d'interprétation ------------------------------ */
.bandeau-incertitude{ border-left:5px solid var(--warn); background:#fff8e6; border-radius:12px; }
.bandeau-exploitable{ border-left:5px solid var(--ok); background:#eefaf2; border-radius:12px; }

/* ---------- Onglets ------------------------------------------------- */
.nav-tabs{ border-bottom:2px solid var(--line); }
.nav-tabs .nav-link{ color:var(--muted); font-weight:600; border:none; }
.nav-tabs .nav-link.active{ color:var(--sipro-blue); border-bottom:3px solid var(--sipro-red); background:transparent; }

/* ---------- Connexion ---------------------------------------------- */
.login-wrap{ min-height:78vh; display:flex; align-items:center; }
.login-card{ border:1px solid var(--line); border-radius:18px; box-shadow:var(--shadow); overflow:hidden; }
.login-logo{ height:74px; border-radius:14px; background:#fff; padding:6px; box-shadow:0 2px 8px rgba(0,0,0,.08); }

/* ---------- Fil d'étapes (parcours hebdo) -------------------------- */
.stepper{ display:flex; align-items:center; flex-wrap:wrap; gap:.15rem; background:var(--card);
  border:1px solid var(--line); border-radius:var(--radius); padding:.7rem 1rem; box-shadow:var(--shadow-sm); }
.stepper-step{ display:flex; align-items:center; gap:.5rem; text-decoration:none; padding:.15rem .4rem; border-radius:8px; }
.stepper-dot{ width:26px; height:26px; border-radius:50%; display:grid; place-items:center;
  font-size:.8rem; font-weight:700; flex:0 0 auto; }
.stepper-label{ font-size:.82rem; font-weight:600; white-space:nowrap; }
.stepper-line{ flex:1 1 18px; height:2px; min-width:14px; background:var(--line); }
.stepper-line.done{ background:var(--ok); }
.stepper-step.done .stepper-dot{ background:var(--ok); color:#fff; }
.stepper-step.done .stepper-label{ color:var(--ok); }
.stepper-step.current .stepper-dot{ background:var(--sipro-blue); color:#fff; box-shadow:0 0 0 4px rgba(30,63,143,.15); }
.stepper-step.current .stepper-label{ color:var(--sipro-blue); }
.stepper-step.todo .stepper-dot{ background:#eef1f7; color:var(--muted); border:1px solid var(--line); }
.stepper-step.todo .stepper-label{ color:var(--muted); }
.stepper-step.locked{ opacity:.5; pointer-events:none; }
.stepper-step.locked .stepper-dot{ background:#eef1f7; color:var(--muted); }

/* ---------- Interrupteur jeté / réincorporé ------------------------ */
.btn-check:checked + .btn-outline-success{ background:var(--ok); border-color:var(--ok); color:#fff; }

/* ===================================================================
   LOOK APPLICATION (PWA) — barre d'onglets, plein écran, hors-ligne
   =================================================================== */
.navbar-sipro{ position:sticky; top:0; z-index:1020; padding-top:calc(.4rem + env(safe-area-inset-top)); }
.offline-bar{ display:none; background:var(--warn); color:#fff; text-align:center;
  font-size:.82rem; font-weight:600; padding:.4rem .75rem; position:sticky; top:0; z-index:1100; }
body.offline .offline-bar{ display:block; }

/* Barre d'onglets mobile */
.app-tabbar{
  position:fixed; left:0; right:0; bottom:0; z-index:1030;
  display:flex; justify-content:space-around; align-items:stretch;
  background:var(--card); border-top:1px solid var(--line);
  box-shadow:0 -2px 14px rgba(21,44,100,.08);
  padding-bottom:env(safe-area-inset-bottom);
}
.app-tabbar a, .app-tabbar button{
  flex:1; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:2px;
  padding:.45rem 0 .4rem; background:none; border:none; text-decoration:none; cursor:pointer;
  color:var(--muted); font-size:.68rem; font-weight:600;
}
.app-tabbar svg{ width:23px; height:23px; }
.app-tabbar a.active{ color:var(--sipro-blue); }
.app-tabbar a:active, .app-tabbar button:active{ background:rgba(30,63,143,.06); }

/* Badge « saisies en attente » + toast de synchro */
.sync-chip{
  position:fixed; right:12px; bottom:14px; z-index:1040;
  background:var(--warn); color:#fff; font-size:.78rem; font-weight:700;
  padding:.4rem .8rem; border-radius:20px; box-shadow:0 4px 14px rgba(0,0,0,.18);
}
.sync-toast{
  position:fixed; left:50%; bottom:80px; transform:translate(-50%,16px); z-index:1200;
  background:var(--ink); color:#fff; font-size:.85rem; font-weight:500;
  padding:.6rem 1rem; border-radius:12px; max-width:90%; text-align:center;
  box-shadow:0 6px 20px rgba(0,0,0,.25); opacity:0; transition:opacity .35s, transform .35s;
}
.sync-toast.show{ opacity:1; transform:translate(-50%,0); }

/* Place pour la barre d'onglets sur mobile */
@media (max-width:991.98px){
  body.app-logged{ padding-bottom:70px; }
  .app-footer{ display:none; }
  .sync-chip{ bottom:80px; }  /* au-dessus de la barre d'onglets */
}

/* Affichage téléphone : lisibilité, champs tactiles, tableaux allégés */
@media (max-width:767.98px){
  body{ font-size:16px; }
  h1.page-title, .page-title{ font-size:1.3rem; }
  .card{ border-radius:12px; }
  .card-body{ padding:1rem; }
  .card-header{ font-size:.95rem; padding:.6rem .9rem; }
  /* Champs plus grands pour le doigt */
  .form-control, .form-select{ min-height:48px; font-size:1rem; border-radius:10px; }
  .form-label{ font-weight:600; margin-bottom:.25rem; }
  .btn{ min-height:44px; }
  .btn-sm{ min-height:38px; }
  /* KPI un peu plus compacts */
  .card-kpi .kpi-val{ font-size:1.45rem; }
  /* Tableaux de calcul : on masque la colonne « formule » (explicative) pour aérer */
  .table-calcul td.formule{ display:none; }
  .table-calcul td, .table-calcul th{ padding:.5rem .4rem; }
  .table{ font-size:.92rem; }
  /* Fil d'étapes : labels plus petits pour tenir */
  .stepper{ padding:.6rem .5rem; gap:.1rem; }
  .stepper-label{ font-size:.72rem; }
  .stepper-dot{ width:24px; height:24px; }
  /* Onglets Réglages scrollables horizontalement si trop larges */
  .nav-tabs{ flex-wrap:nowrap; overflow-x:auto; -webkit-overflow-scrolling:touch; }
  .nav-tabs .nav-link{ white-space:nowrap; }
}

/* ===================================================================
   RAPPORT IMPRIMABLE — papier à en-tête SIPRO-CHIM
   =================================================================== */
.rapport{ max-width:900px; margin:0 auto; background:#fff; border:1px solid var(--line); border-radius:12px; }
.rapport-head{ display:flex; align-items:center; justify-content:space-between; gap:1rem; }
.rapport-logo{ height:56px; background:#fff; border-radius:10px; padding:3px; box-shadow:0 1px 4px rgba(0,0,0,.08); }
.rapport-org{ color:var(--sipro-blue); font-weight:800; font-size:1.35rem; letter-spacing:.2px; line-height:1; }
.rapport-sub{ color:var(--muted); font-size:.86rem; }
.rapport-badge-sem{ color:var(--sipro-red); font-weight:800; font-size:1.25rem; }
.rapport-rule{ height:5px; border-radius:3px; background:linear-gradient(90deg, var(--sipro-blue) 0%, var(--sipro-blue-light) 50%, var(--sipro-red) 100%); }
.rapport h6{ color:var(--sipro-blue); font-weight:700; text-transform:uppercase; letter-spacing:.04em; font-size:.82rem; margin-top:1.1rem; }
.rapport .kfig{ border:1px solid var(--line); border-radius:10px; padding:.5rem .25rem; text-align:center; }
.rapport .kfig .lib{ font-size:.72rem; color:var(--muted); }
.rapport .kfig .val{ font-weight:800; color:var(--ink); }
.rapport-sign .nom{ font-weight:800; color:var(--sipro-blue); }

@media print{
  .no-print{ display:none !important; }
  body{ background:#fff; }
  .rapport{ max-width:100%; border:none; border-radius:0; }
  a[href]:after{ content:""; }
  @page{ margin:14mm; }
}