/* =========================================================
   RESET
   ========================================================= */
*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%}

/* =========================================================
   THEME
   ========================================================= */
:root{
  --bg1:#e8f0ff;
  --bg2:#f6f9ff;

  --text:#1b2559;
  --primary:#3A66E8;
  --primary2:#6F8BFA;
  --primaryHover:#5878e0;

  --card:#ffffff;
  --fieldBg:#f5f8ff;
  --border:#d0d7e2;

  --shadowSm:0 2px 6px rgba(0,0,0,.08);
  --shadowMd:0 6px 14px rgba(0,0,0,.06);
  --shadowLg:0 12px 28px rgba(0,0,0,.08);

  --radiusSm:12px;
  --radiusMd:16px;
  --radiusLg:22px;
  --radiusXl:26px;
}

/* =========================================================
   BASE
   ========================================================= */
body{
  font-family:'Inter',-apple-system,BlinkMacSystemFont,"Segoe UI",Arial,sans-serif;
  background:linear-gradient(135deg,var(--bg1),var(--bg2));
  color:var(--text);
}

/* =========================================================
   LAYOUT
   ========================================================= */
.container,
.page{
  max-width:420px;
  width:100%;
  margin:32px auto 40px;
  padding:24px 20px;
  background:rgba(255,255,255,.94);
  border-radius:var(--radiusLg);
  box-shadow:0 12px 28px rgba(0,0,0,.06);
  backdrop-filter:blur(8px);
}

/* =========================================================
   TITRES
   ========================================================= */
h1,h2,h3{color:var(--primary);font-weight:700;margin-bottom:12px}
h1{font-size:26px;text-align:center}
h2{font-size:22px;text-align:center}
h3{font-size:18px}

.page-title{
  text-align:center;
  font-size:24px;
  font-weight:700;
  color:var(--primary);
  margin-bottom:20px;
}

.label-small{
  color:#444;
  margin-bottom:2px;
  line-height:18px;
  font-weight:600;
  font-size:14px;
}

label{font-weight:600;font-size:14px;margin-bottom:4px;color:var(--text);display:block}

/* =========================================================
   INPUTS / SELECTS / TEXTAREAS — style global (sans classes)
   ========================================================= */
input[type="text"],
input[type="password"],
input[type="date"],
input[type="time"],
input[type="number"],
input[type="email"],
input[type="datetime-local"],
input[list],
select,
textarea{
  width:100%;
  padding:12px 14px;
  margin:6px 0 12px;
  border-radius:14px;
  border:1px solid var(--border);
  background:var(--fieldBg);
  font-size:15px;
  color:var(--text);
  transition:all .25s ease;
}

button[type="submit"]{
  display:inline-block;
  width:100%;
  padding:14px 16px;
  border-radius:14px;
  border:none;
  background:#6F8BFA;
  color:#fff;
  font-size:16px;
  font-weight:600;
  cursor:pointer;
  transition:.2s ease;
  margin-top:10px;
}
button[type="submit"]:hover{ background:#5878e0; }
button[type="submit"]:active{ transform:scale(.98); }

textarea{
  min-height:80px;
  resize:vertical;
}

input:focus,
select:focus,
textarea:focus{
  border-color:var(--primary);
  background:#fff;
  box-shadow:0 0 0 3px rgba(58,102,232,.15);
  outline:none;
}

/* (optionnel) si tu veux que les readonly aient un look "info" */
input[readonly],
textarea[readonly]{
  opacity:.95;
}
/* =========================================================
   ✅ SLIDERS — REMETTRE COMME AVANT (override final)
   ========================================================= */
input[type="range"]{
  -webkit-appearance:none;
  appearance:none;
  width:100%;
  height:12px;
  border-radius:10px;
  background:#e3e9fb;
  outline:none;
  margin:6px 0 14px;
  cursor:pointer;
}

/* Track */
input[type="range"]::-webkit-slider-runnable-track{
  height:12px;
  background:#dfe6ff;
  border-radius:10px;
}
input[type="range"]::-moz-range-track{
  height:12px;
  background:#dfe6ff;
  border-radius:10px;
}

/* Thumb */
input[type="range"]::-webkit-slider-thumb{
  -webkit-appearance:none;
  appearance:none;
  width:26px;
  height:26px;
  border-radius:50%;
  background:#6F8BFA;
  border:none;
  box-shadow:0 3px 6px rgba(0,0,0,0.15);
  margin-top:-7px; /* centre le thumb */
  transition:0.2s ease;
}
input[type="range"]::-moz-range-thumb{
  width:26px;
  height:26px;
  border-radius:50%;
  background:#6F8BFA;
  border:none;
  box-shadow:0 3px 6px rgba(0,0,0,0.15);
  transition:0.2s ease;
}

/* Hover / Active */
input[type="range"]::-webkit-slider-thumb:hover{ background:#5878e0; }
input[type="range"]:active::-webkit-slider-thumb{ transform:scale(1.12); }
input[type="range"]::-moz-range-thumb:hover{ background:#5878e0; }

/* =========================================================
   BUTTONS
   ========================================================= */
.btn{
  display:inline-block;
  width:100%;
  padding:14px 16px;
  border-radius:14px;
  border:none;
  background:var(--primary2);
  color:#fff;
  font-size:16px;
  font-weight:600;
  text-align:center;
  cursor:pointer;
  transition:.2s ease;
  text-decoration:none;
  margin-top:10px;
}
.btn:hover{background:var(--primaryHover)}
.btn:active{transform:scale(.98)}
.btn--success{background:#4CAF7A}
.btn--success:hover{background:#3c9b68}
.btn-row{display:flex;gap:10px}
.btn-row .btn{width:50%}

/* =========================================================
   STATUT COMMANDE (pill + dot)
   ========================================================= */
.status-pill{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  padding:10px 14px;
  border-radius:999px;
  font-weight:800;
  font-size:14px;
  letter-spacing:.2px;
  border:1px solid rgba(0,0,0,.06);
  background:#f2f4f8;
  margin:0 auto;
}
.status-pill .dot{width:12px;height:12px;border-radius:50%}

/* couleurs */
.st-realise{background:#e9f7ef;color:#1f6b3a}
.st-termine{background:#e6f4ea;color:#145a32}
.st-partielle{background:#e9f1ff;color:#1f4f9a}
.st-nonfacture{background:#ffecec;color:#a11111}
.st-facture{background:#f4e9ff;color:#5a2a7a}
.st-manquetarifs{background:#fff2e6;color:#8a4b00}

.st-realise .dot{background:#1f6b3a}
.st-termine .dot{background:#145a32}
.st-partielle .dot{background:#1f4f9a}
.st-nonfacture .dot{background:#a11111}
.st-facture .dot{background:#5a2a7a}
.st-manquetarifs .dot{background:#8a4b00}

/* fallback */
.status-pill:not(.st-realise):not(.st-termine):not(.st-partielle):not(.st-nonfacture):not(.st-facture):not(.st-manquetarifs){
  background:#f2f4f8;color:#3f4d6d;
}
.status-pill:not(.st-realise):not(.st-termine):not(.st-partielle):not(.st-nonfacture):not(.st-facture):not(.st-manquetarifs) .dot{
  background:#8892a6;
}

/* =========================================================
   COMMANDE CARD
   ========================================================= */
.command-card{
  width:100%;
  margin:20px auto;
  border:1px solid rgba(220,230,255,.55);
  border-radius:var(--radiusXl);
  overflow:hidden;
  box-shadow:var(--shadowLg);
  background:#fff;
}
.command-card-header{background:#dce9ff;padding:22px 18px;text-align:center}
.command-card-header .ref{
  background:#fff;padding:8px 18px;border-radius:14px;font-size:15px;font-weight:600;
  color:#2a3d66;display:inline-block;margin-bottom:12px;box-shadow:0 3px 6px rgba(0,0,0,.05);
}
.command-card-header .client{font-size:20px;font-weight:700;color:#1e2f50}
.command-card-header .project{font-size:14px;margin-top:4px;color:#3f4d6d}
.command-card-body{background:#fff;padding:18px 20px;font-size:15px;color:#2a3149;text-align:center}
.command-card-body p{margin:6px 0;line-height:1.35}
.command-separator{width:70%;height:1px;background:#e2e6f5;margin:10px auto 14px}

/* =========================================================
   LISTE ECHANTILLONS
   ========================================================= */
.prelv-row{display:flex;justify-content:center;gap:10px;margin:14px 0 4px;flex-wrap:wrap;padding:0 5px}
.ech-details{flex:1;line-height:1.35;font-size:15px}

.ech-line-btn{
  position:relative;
  display:flex;
  align-items:center;
  gap:14px;
  padding:14px 16px;
  width:100%;
  background:#fff;
  border-radius:16px;
  text-decoration:none;
  color:var(--text);
  margin-bottom:14px;
  border:1px solid rgba(210,220,255,.6);
  box-shadow:var(--shadowMd);
  border-right:5px solid transparent;
  transition:transform .15s ease,box-shadow .2s ease;
}

/* Bordure droite état (utilisée par commande.php) */
.border-ok{border-right-color:#0F9D58}
.border-ko{border-right-color:#D93025}
.border-wait{border-right-color:#7AA7E9}

/* =========================================================
   PRELEVEMENT PILL + pastille conf
   ========================================================= */
.prelv-pill{
  position:relative;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-width:54px;
  height:34px;
  padding:0 10px;
  border-radius:999px;
  font-weight:800;
  font-size:13px;
  letter-spacing:.2px;
  border:none;
  box-shadow:0 1px 3px rgba(0,0,0,.12);
  color:var(--text);
  white-space:nowrap;
}

.prelv-pill.conf-ok::after,
.prelv-pill.conf-ko::after,
.prelv-pill.conf-blue::after,
.prelv-pill.conf-grey::after,
.prelv-pill.conf-wait::after{
  content:"";
  position:absolute;
  top:-4px; right:-4px;
  width:10px;height:10px;
  border-radius:999px;
  border:2px solid #fff;
  box-shadow:0 1px 2px rgba(0,0,0,.15);
}
.prelv-pill.conf-ok::after{background:#0F9D58}
.prelv-pill.conf-ko::after{background:#D93025}
.prelv-pill.conf-blue::after{background:#7AA7E9}
.prelv-pill.conf-grey::after{background:#CCCCCC}
.prelv-pill.conf-wait::after{background:#7AA7E9}

/* info bubble */
.prelv-pill--info{background:#758CF7;color:#fff}

/* =========================================================
   TABLES (si tu en as sur d’autres pages)
   ========================================================= */
table{width:100%;border-collapse:collapse;font-size:14px;margin-top:10px}
th{color:var(--primary);font-weight:600;padding:8px}
td{padding:8px}
tr:nth-child(even){background:#f7f9ff}

/* =========================================================
   FOOTER / TEXT
   ========================================================= */
.small-text{font-size:13px;color:#66739a}
footer{text-align:center;margin:20px 0;color:#999;font-size:13px}

/* =========================================================
   ALERTES / CONFORMITE (utilisées ailleurs)
   ========================================================= */
.alert-success-box{
  background:#dff7df;
  border-left:6px solid #dff7df;
  padding:12px 18px;
  margin:15px 0 20px;
  border-radius:6px;
  font-size:16px;
  color:#2b6a2b;
  font-weight:500;
  text-align:center;
  box-shadow:0 2px 6px rgba(0,0,0,.08);
}
.cause-box{
  margin-top:10px;
  background:#ffefef;
  border-left:4px solid #cc0000;
  padding:10px;
  color:#a00000;
  font-size:14px;
  border-radius:6px;
}
.cause-item{margin:6px 0;font-size:14px;color:#444}

/* =========================================================
   COUCHES / BADGES MINI (utilisés dans tes pages)
   ========================================================= */
.couche-row>div{display:block;width:100%}
.couche-row{margin-bottom:14px}
.couche-line{display:block;width:100%}
.couche-line+.couche-line{margin-top:8px}

.badge-ok{display:inline-block;padding:2px 6px;border-radius:4px;background:#c8f7c5;color:#1b5e20;font-size:.75rem}
.badge-ko{display:inline-block;padding:2px 6px;border-radius:4px;background:#ffcdd2;color:#b71c1c;font-size:.75rem}
.badge-wait{display:inline-block;padding:2px 6px;border-radius:4px;background:#fff9c4;color:#f57f17;font-size:.75rem}
.badge-label{display:inline-block;width:160px}

/* =========================================================
   GRID Pose / Dépose (2 colonnes)
   ========================================================= */
.grid-wrapper{
  width:100%;
  margin-top:25px;
}

.grid-row{
  position:relative;
  width:100%;
  display:grid;
  grid-template-columns:1fr 1fr;
  column-gap:20px;   /* ↔️ horizontal */
  row-gap:4px;       /* ↕️ vertical */
  margin-bottom:4px;
}

.grid-cell{
  display:flex;
  flex-direction:column;
  width:100%;
}

/* si tu utilises grid-label */
.grid-label{
  text-align:center;
  font-weight:600;
  font-size:14px;
  margin:4px 0 2px;   /* 🔥 ultra compact */
}

/* ====== FIX bulles variation "comme avant" ====== */

/* La ligne doit être le repère */
.grid-row{
  position: relative;
}

/* Tous tes conteneurs de variations (les div vides) */
#var_debit,
#var_horaire,
#var_tc,
#var_hygro,
#var_pression,
#var_vent{
  position: absolute;
  left: 50%;
  top: 48%;
  transform: translate(-50%, -50%);
  transform: translateX(-50%);
  z-index: 50;
  pointer-events: none;
}

/* La bulle elle-même (injectée par JS) */
.variation-bubble{
  display: inline-block;
  padding: 4px 10px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 700;
  background: #fff;
  color: var(--primary);
  border: 1px solid rgba(58,102,232,.25);
  box-shadow: 0 6px 14px rgba(0,0,0,.10);
  white-space: nowrap;
}
.hidden { display: none !important; }
.periode-fields { margin-top: 8px; }

/* ✅ IMPORTANT : le bandeau doit se positionner par rapport au header */
.sticky-header.page{
  position: sticky !important;
  top: 0 !important;
  z-index: 9999 !important;
  background: #fff;

  position: relative;   /* 🔥 manquait : référence pour .status-corner */
  overflow: visible;    /* 🔥 évite les coupures */
}
.global-wrapper{ overflow: visible; }

.status-corner {
  position: absolute;
  top: 0;
  right: 0;
  width: 120px;
  height: 120px;
  overflow: hidden;
  pointer-events: none;
}
.status-corner span {
  position: absolute;
  top: 20px;
  right: -40px;
  transform: rotate(45deg);
  width: 180px;
  text-align: center;
  padding: 5px 0 5px 22px;
  font-size: 10px;
  font-weight: bold;
  color: white;
  letter-spacing: 1px;
}
#ok_icon span { background: green; }
#ko_icon span { background: #C40000; }

.switch-center{
  display:flex;
  justify-content:center;
}
/* override label global pour le switch */
.seg3 label{
  display:flex !important;
  align-items:center;
  justify-content:center;
  margin:0 !important;
}
.seg3{
  position:relative;
  display:grid;
  grid-template-columns:1fr 1fr 1fr;
  width:260px;
  height:34px;
  padding:2px;
  background:#f2f2f7;
  border:1px solid #d1d1d6;
  border-radius:14px;
}

.seg3 input{
  position:absolute;
  left:-9999px;
}

.seg3 label{
  z-index:2;
  display:flex;
  align-items:center;
  justify-content:center;
  font-weight:600;
  cursor:pointer;
}

.seg3-slider{
  position:absolute;
  top:2px;
  left:2px;
  width:calc((100% - 4px)/3);
  height:calc(100% - 4px);
  background:#fff;
  border-radius:12px;
  box-shadow:0 1px 2px rgba(0,0,0,.18);
  transition:.18s;
}

/* positions */
.seg3 input:nth-of-type(2):checked ~ .seg3-slider{
  transform:translateX(100%);
}
.seg3 input:nth-of-type(3):checked ~ .seg3-slider{
  transform:translateX(200%);
}

/* couleurs */
.seg3 input[value="1"]:checked ~ .seg3-slider{
  background:#008000;
}
.seg3 input[value="0"]:checked ~ .seg3-slider{
  background:#C40000;
}

/* =========================================================
   ✅ RESTORE STYLE "FILTRES" (comme avant)
   ========================================================= */

/* Carte filtre */
.prelevement-card{
  background:#ffffff;
  border-radius:22px;
  padding:18px 16px;
  margin:18px 0;
  border:1px solid rgba(210,220,255,0.60);
  box-shadow:0 6px 14px rgba(0,0,0,0.06);
}

/* Header de carte */
.prelevement-header{
  margin:-18px -16px 14px -16px;
  padding:14px 16px;
  background:#dce9ff;
  border-bottom:1px solid rgba(210,220,255,0.55);
  border-radius:22px 22px 0 0;
}
.prelevement-header h3{
  margin:0;
  font-size:18px;
  font-weight:800;
  color:#1e2f50;
}

/* Grilles à 2 colonnes (pompe/opérateur + valeurs) */
.prelevement-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:12px 14px;
  align-items:end;
  width:100%;
}

/* Labels petits */
.prelevement-card .label-small{
  font-size:13px;
  font-weight:700;
  color:#1b2559;
  margin:0 0 6px 0;
}

/* Inputs / selects dans carte */
.prelevement-card input[type="text"],
.prelevement-card input[type="datetime-local"],
.prelevement-card select{
  width:100%;
  padding:12px 14px;
  border-radius:14px;
  border:1px solid #d0d7e2;
  background:#f5f8ff;
  font-size:15px;
}

/* Bloc infos à droite (Δt, Dm, Vol) */
.prelevement-card [style*="float:right"]{
  float:right !important;
  text-align:left;
  margin-top:10px;
}
.prelevement-card [style*="float:right"] .label-small{
  margin:4px 0;
  font-weight:700;
}

/* Acceptation centrée */
.prelevement-card input[type="checkbox"]{
  transform:scale(1.15);
}

/* ✅ Neutralise les bulles / grids qui cassent la zone filtres */
.prelevement-card .variation-bubble,
.prelevement-card .grid-row,
.prelevement-card .grid-wrapper,
.prelevement-card .grid-cell,
.prelevement-card .compare-row{
  all:unset;
}
/* =========================================================
   CHECKBOX -> BOUTONS (PILLS)  ✅ comme avant
   ========================================================= */
.checkbox-buttons{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  margin:8px 0 12px;
}

.checkbox-buttons .pill-check{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:10px 14px;
  border-radius:14px;
  border:1px solid #d0d7e2;
  background:#f5f8ff;
  color:#1b2559;
  cursor:pointer;
  user-select:none;
  transition:all .2s ease;
  box-shadow: 0 2px 6px rgba(0,0,0,.04);
}

/* On cache la vraie checkbox */
.checkbox-buttons .pill-check input{
  position:absolute;
  opacity:0;
  width:1px;
  height:1px;
  pointer-events:none;
}

/* Etat ON */
.checkbox-buttons .pill-check input:checked + span{
  color:#fff;
}

.checkbox-buttons .pill-check:has(input:checked){
  background:#6F8BFA;
  border-color:#6F8BFA;
  box-shadow: 0 6px 14px rgba(111,139,250,.30);
}

/* Hover */
.checkbox-buttons .pill-check:hover{
  transform: translateY(-1px);
  box-shadow: 0 8px 18px rgba(0,0,0,.07);
}

/* Focus clavier */
.checkbox-buttons .pill-check:focus-within{
  outline:none;
  box-shadow: 0 0 0 3px rgba(58,102,232,.18);
}
.iwp-field{
  position:relative;
  margin:6px 0 12px;
}

.iwp-input{
  width:100%;
  box-sizing:border-box;
  padding:12px 52px 12px 14px;
  border-radius:18px;
  border:1px solid var(--border);
  background:var(--fieldBg);
  font-size:15px;
  color:var(--text);
  transition:all .25s ease;
}

.iwp-input:focus{
  outline:none;
  border-color:var(--blue);
  box-shadow:0 0 0 3px rgba(40,0,255,0.08);
}

.iwp-trigger{
  position:absolute;
  top:50%;
  right:10px;
  transform:translateY(-50%);
  width:34px;
  height:34px;
  border-radius:10px;
  display:flex;
  align-items:center;
  justify-content:center;
  cursor:pointer;
  color:#7d8291;
  transition:all .2s ease;
}

.iwp-trigger:hover{
  background:rgba(40,0,255,0.06);
  color:var(--blue);
}

.iwp-trigger svg{
  width:18px;
  height:18px;
  stroke:currentColor;
  fill:none;
  stroke-width:2;
  stroke-linecap:round;
  stroke-linejoin:round;
}

.iwp-modal{
  position:fixed;
  inset:0;
  z-index:99999;
  display:none;
}

.iwp-modal.open{
  display:block;
}

.iwp-backdrop{
  position:absolute;
  inset:0;
  background:rgba(15,23,42,0.34);
}

.iwp-panel{
  position:absolute;
  left:50%;
  top:50%;
  transform:translate(-50%, -50%);
  width:min(92vw, 560px);
  max-height:80vh;
  background:#ffffff;
  border-radius:24px;
  box-shadow:0 24px 80px rgba(0,0,0,0.18);
  overflow:hidden;
  display:flex;
  flex-direction:column;
}

.iwp-header{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:18px 20px 14px;
  border-bottom:1px solid #eef0f5;
}

.iwp-title{
  font-size:20px;
  font-weight:700;
  color:var(--text);
}

.iwp-close{
  width:34px;
  height:34px;
  border-radius:10px;
  display:flex;
  align-items:center;
  justify-content:center;
  cursor:pointer;
  font-size:24px;
  line-height:1;
  color:#7d8291;
  transition:all .2s ease;
}

.iwp-close:hover{
  background:#f3f5fb;
  color:var(--text);
}

.iwp-search-wrap{
  padding:16px 20px;
  border-bottom:1px solid #eef0f5;
}

.iwp-search{
  width:100%;
  box-sizing:border-box;
  padding:12px 14px;
  border-radius:16px;
  border:1px solid var(--border);
  background:var(--fieldBg);
  font-size:15px;
  color:var(--text);
}

.iwp-search:focus{
  outline:none;
  border-color:var(--blue);
  box-shadow:0 0 0 3px rgba(40,0,255,0.08);
}

.iwp-list{
  padding:10px;
  overflow-y:auto;
  max-height:55vh;
  -webkit-overflow-scrolling:touch;
}

.iwp-item{
  display:block;
  width:100%;
  box-sizing:border-box;
  padding:13px 14px;
  border-radius:14px;
  font-size:15px;
  color:var(--text);
  cursor:pointer;
  background:#fff;
  transition:background .18s ease;
}

.iwp-item:hover{
  background:#f5f7ff;
}

.iwp-item + .iwp-item{
  margin-top:4px;
}

.iwp-item.hidden{
  display:none;
}

@media (max-width: 640px){
  .iwp-panel{
    left:0;
    right:0;
    bottom:0;
    top:auto;
    transform:none;
    width:100%;
    max-height:82vh;
    border-radius:24px 24px 0 0;
  }

  .iwp-list{
    max-height:none;
    flex:1;
    padding-bottom:20px;
  }
}