/* Charte « station de lavage agricole / environnement » :
   bandeaux vert forêt, boutons ton blé-ocre, fond papier naturel verdi,
   statuts en vert feuille / bleu eau / ambre / terre cuite.
   (Les noms de variables historiques --navy, --salmon sont conservés
   pour compatibilité ; leurs valeurs suivent désormais ce thème.) */
:root{
  --bg: #F1F4E9;
  --card: #FFFFFF;
  --card-border: #DFE3D1;
  --navy: #24462E;
  --navy-2: #2E5A3B;
  --navy-text: #EFF3E2;
  --salmon: #C68A38;
  --salmon-dark: #A5702A;
  --btn: #8A6A26;
  --btn-active: #6E531D;
  --ink: #2A2B20;
  --ink-soft: #5F6150;
  --green: #4E9A51;
  --blue: #2F80A6;
  --orange: #E0912F;
  --red: #C4482F;
  --off: #C6BEA6;
  --font-display: 'Space Grotesk', sans-serif;
  --font-body: 'IBM Plex Sans', sans-serif;
  --font-mono: 'IBM Plex Mono', monospace;
}
*{box-sizing:border-box;}
body{
  margin:0;
  background:var(--bg);
  color:var(--ink);
  font-family:var(--font-body);
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3,.brand{font-family:var(--font-display);}
a{color:inherit; text-decoration:none;}
button{font-family:var(--font-body); cursor:pointer;}
:focus-visible{outline:3px solid var(--blue); outline-offset:2px;}

/* --- Bannière de démonstration --- */
.demo-bar{
  background:#2A2B20; color:#EFF3E2; font-family:var(--font-mono); font-size:12px;
  padding:8px 16px; display:flex; gap:16px; align-items:center; flex-wrap:wrap; justify-content:space-between;
}
.demo-bar b{color:#F2C9B0;}
.demo-bar select{
  background:#3A2F27; color:#EFF3E2; border:1px solid #5A4A3D; border-radius:4px; padding:3px 6px;
  font-family:var(--font-mono); font-size:12px;
}
.demo-left{display:flex; align-items:center; gap:16px; flex-wrap:wrap;}
.quick-access{display:flex; align-items:center; gap:6px; flex-wrap:wrap;}
.quick-access a{
  background:#3A2F27; color:#EFF3E2; border:1px solid #5A4A3D; border-radius:14px;
  padding:4px 11px; font-family:var(--font-mono); font-size:11.5px; display:inline-block;
}
.quick-access a:hover{background:var(--salmon-dark); border-color:var(--salmon-dark);}
.quick-access a.current{background:var(--salmon); border-color:var(--salmon); color:#fff;}

/* --- Bandeaux --- */
.bandeau{
  background:linear-gradient(180deg,var(--navy),var(--navy-2));
  color:var(--navy-text);
  padding:10px 20px;
  display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap;
}
.bandeau-top{position:sticky; top:0; z-index:20;}
.brand{font-size:19px; font-weight:700; letter-spacing:.3px; display:flex; align-items:center; gap:10px;}
.brand .dot{width:9px;height:9px;border-radius:50%;background:var(--salmon);display:inline-block;}
.brand-logo{height:34px; width:auto; border-radius:6px; background:#fff; padding:3px; box-shadow:0 1px 3px rgba(0,0,0,.25); display:block;}
.session-meta{display:flex; gap:10px; align-items:center; font-size:13px; font-family:var(--font-mono);}
.pill{
  border:1px solid rgba(242,236,225,.35); border-radius:20px; padding:4px 12px;
}
.pill.admin{background:rgba(198,138,56,.18); border-color:var(--salmon);}
.pill.client{background:rgba(47,128,166,.18); border-color:var(--blue);}
.nav{
  display:flex; gap:6px; flex-wrap:wrap; padding:10px 20px 0 20px; max-width:1180px; margin:0 auto;
}
.nav a{
  background:var(--btn); color:#fff; border:none; padding:9px 18px; border-radius:8px 8px 0 0;
  font-weight:600; font-size:14px; letter-spacing:.2px; display:inline-block;
}
.nav a.active{background:var(--btn-active);}
.nav a.locked{background:#D9DCC9; color:#7C7E66; cursor:not-allowed; pointer-events:none;}

.footer-bandeau{
  display:flex; justify-content:space-between; align-items:center; font-size:13px; padding:12px 20px;
}
.footer-bandeau .logout{
  background:transparent; border:1px solid rgba(242,236,225,.4); color:var(--navy-text);
  padding:6px 14px; border-radius:6px; font-size:13px; display:inline-block;
}
.footer-bandeau .logout:hover{background:rgba(242,236,225,.12);}

main{max-width:1180px; margin:0 auto; padding:22px 20px 60px;}

.card{
  background:var(--card); border:1px solid var(--card-border); border-radius:14px;
  padding:22px; margin-bottom:18px;
}
.page-title{display:flex; align-items:baseline; justify-content:space-between; flex-wrap:wrap; gap:10px; margin-bottom:14px;}
.page-title h2{margin:0; font-size:22px;}
.page-title .sub{color:var(--ink-soft); font-size:13px; font-family:var(--font-mono);}

.toolbar{display:flex; gap:10px; flex-wrap:wrap; margin-bottom:16px; align-items:center;}
select, input[type=text], input[type=password]{
  font-family:var(--font-mono); font-size:13px; padding:8px 10px; border-radius:7px;
  border:1px solid var(--card-border); background:#FCFDF7; color:var(--ink);
}
label{font-size:12px; color:var(--ink-soft); display:block; margin-bottom:4px; font-family:var(--font-body);}

/* --- LOGIN --- */
.login-wrap{
  min-height:calc(100vh - 60px); display:flex; align-items:center; justify-content:center; padding:40px 20px;
}
.login-card{
  background:var(--card); border:1px solid var(--card-border); border-radius:16px; padding:38px;
  width:100%; max-width:400px; box-shadow:0 18px 40px -20px rgba(23,33,59,.25);
}
.login-card h1{font-size:22px; margin:0 0 4px;}
.login-card p.lede{color:var(--ink-soft); font-size:13.5px; margin:0 0 22px;}
.field{margin-bottom:14px;}
.field input{width:100%;}
.btn-primary{
  width:100%; background:var(--btn); color:#fff; border:none; padding:11px; border-radius:8px;
  font-weight:600; font-size:14.5px; margin-top:6px; display:block; text-align:center;
}
.btn-primary:hover{background:var(--btn-active);}
.btn-ghost{background:transparent; border:1px solid var(--card-border); color:var(--ink); padding:9px 14px; border-radius:8px; font-size:13px;}
.otp-boxes{display:flex; gap:8px; margin-bottom:8px;}
.otp-boxes input{width:44px; height:52px; text-align:center; font-size:19px;}
.step-label{font-size:12px; font-family:var(--font-mono); color:var(--salmon-dark); text-transform:uppercase; letter-spacing:.08em; margin-bottom:6px;}
.role-picker{display:flex; gap:8px; margin-bottom:18px; flex-wrap:wrap;}
.role-picker button{
  flex:1; min-width:100px; background:#EEF1E2; border:1px solid var(--card-border); border-radius:8px;
  padding:8px 6px; font-size:11.5px; font-family:var(--font-mono); color:var(--ink-soft);
}
.role-picker button.selected{background:var(--navy); color:var(--navy-text); border-color:var(--navy);}

/* --- Tables --- */
.table-wrap{width:100%; overflow-x:auto; -webkit-overflow-scrolling:touch;}
.table-wrap table{min-width:660px;}
table{width:100%; border-collapse:collapse; font-size:13.5px;}
th{
  text-align:left; font-family:var(--font-mono); font-weight:600; font-size:11.5px; text-transform:uppercase;
  letter-spacing:.05em; color:var(--ink-soft); border-bottom:2px solid var(--card-border); padding:9px 8px;
}
td{padding:10px 8px; border-bottom:1px solid #E7EBDB; font-family:var(--font-mono); font-size:13px;}
tr.badge-A{background:#F5ECD8;}
tr.badge-B{background:#E0EDF2;}
tr.badge-C{background:#E7F1DE;}
tr.badge-A td:first-child{border-left:4px solid var(--salmon);}
tr.badge-B td:first-child{border-left:4px solid var(--blue);}
tr.badge-C td:first-child{border-left:4px solid var(--green);}
tr.badge-A:hover{background:#EFE3C6;}
tr.badge-B:hover{background:#D2E5EE;}
tr.badge-C:hover{background:#DCEBCE;}
.conso{font-weight:600;}
.swatch{width:12px; height:12px; border-radius:3px; display:inline-block; border:1px solid rgba(0,0,0,.12);}
.swatch-A{background:var(--salmon);}
.swatch-B{background:var(--blue);}
.swatch-C{background:var(--green);}

.badge-checks{display:flex; gap:14px; margin-bottom:14px; flex-wrap:wrap;}
.badge-checks label{display:flex; align-items:center; gap:6px; font-size:13px; color:var(--ink); font-family:var(--font-body);}

/* --- Tabs (badges / pistes) --- */
.subtabs{display:flex; gap:6px; margin-bottom:16px; flex-wrap:wrap;}
.subtabs button{
  background:#ECEFDF; border:none; padding:7px 14px; border-radius:20px; font-size:13px; font-weight:500; color:var(--ink);
}
.subtabs button.active{background:var(--navy); color:var(--navy-text);}

/* --- Supervision synoptic (harmonisé avec la charte, voyants réalistes) --- */
.piste-grid{display:grid; grid-template-columns:repeat(auto-fit,minmax(300px,1fr)); gap:16px; align-items:start;}

.synoptic{
  display:flex; flex-direction:column;
  border-radius:14px;
  padding:16px 16px 14px;
  color:var(--ink);
  background:linear-gradient(180deg,#FDFEF8,#EEF2E4);
  border:1px solid var(--card-border);
  box-shadow:0 10px 24px -18px rgba(23,33,59,.35);
  overflow:hidden;
}

.synoptic-top{display:flex; justify-content:space-between; align-items:flex-start; gap:12px; flex-wrap:nowrap; margin-bottom:16px;}
.synoptic-info{display:flex; flex-direction:column; gap:4px; min-width:0; flex:1;}
.piste-title{font-family:var(--font-display); font-weight:700; font-size:20px; color:var(--navy); line-height:1;}
.info-line{font-size:12px; color:var(--ink-soft); line-height:1.3;}
.info-line b{font-weight:600; color:var(--ink); overflow-wrap:anywhere;}
.info-line.presence{height:2.7em; overflow:hidden;}
.info-line.mode{height:1.35em; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}

.alarm-group{display:flex; gap:12px; flex:none;}
.alarm{display:flex; flex-direction:column; align-items:center; gap:7px;}
.alarm-label{
  white-space:nowrap;
  background:var(--navy); color:var(--navy-text);
  font-family:var(--font-mono); font-size:11px; font-weight:500; letter-spacing:.02em;
  padding:4px 12px; border-radius:20px;
}

.voyant-grid{display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:12px 8px; margin-bottom:14px;}
.voyant{display:flex; flex-direction:column; align-items:center; gap:6px; min-width:0;}
.voyant-label{
  width:100%; box-sizing:border-box; text-align:center;
  background:#ECEFDF; color:var(--ink-soft);
  font-family:var(--font-mono); font-size:11px; font-weight:500; line-height:1.15;
  padding:4px; border-radius:6px; border:1px solid var(--card-border);
  min-height:32px; display:flex; align-items:center; justify-content:center;
  overflow-wrap:anywhere; hyphens:auto;
}

/* Pastille présence : distinction nette piste occupée / libre */
.presence-pill{
  align-self:flex-start; display:inline-flex; align-items:center; gap:6px; white-space:nowrap;
  font-family:var(--font-mono); font-size:11.5px; font-weight:600;
  padding:3px 11px; border-radius:20px; margin:2px 0 2px;
}
.presence-pill .pdot{width:8px; height:8px; border-radius:50%; display:inline-block;}
.synoptic.occupied .presence-pill{background:#E7F1E0; color:#2F6B33; border:1px solid #C2D8AE;}
.synoptic.occupied .presence-pill .pdot{background:var(--green);}
.synoptic.empty .presence-pill{background:#E9ECDD; color:var(--ink-soft); border:1px solid var(--card-border);}
.synoptic.empty .presence-pill .pdot{background:var(--off);}

/* Voyant moderne : pastille pleine, anneau clair, halo doux (assorti à la charte) */
.led{
  position:relative; flex:none; box-sizing:border-box;
  width:40px; height:40px; border-radius:50%;
  border:4px solid #FDFEF8;
  background:var(--off);
  box-shadow:0 1px 2px rgba(23,33,59,.15), inset 0 0 0 1px rgba(0,0,0,.06);
}
.led::after{
  content:""; position:absolute; top:14%; left:20%; width:42%; height:30%; border-radius:50%;
  background:radial-gradient(ellipse at center, rgba(255,255,255,.6), rgba(255,255,255,0) 70%);
}
.led.on-green{background:var(--green); box-shadow:0 1px 2px rgba(23,33,59,.15), inset 0 0 0 1px rgba(0,0,0,.06), 0 0 10px 1px rgba(78,154,81,.45);}
.led.on-blue{background:var(--blue); box-shadow:0 1px 2px rgba(23,33,59,.15), inset 0 0 0 1px rgba(0,0,0,.06), 0 0 10px 1px rgba(47,128,166,.45);}
.led.on-orange{background:var(--orange); box-shadow:0 1px 2px rgba(23,33,59,.15), inset 0 0 0 1px rgba(0,0,0,.06), 0 0 10px 1px rgba(224,145,47,.45);}
.led.on-red{background:var(--red); box-shadow:0 1px 2px rgba(23,33,59,.15), inset 0 0 0 1px rgba(0,0,0,.06), 0 0 10px 1px rgba(196,72,47,.5);}

.led-lg{width:48px; height:48px; border-width:5px;}

.defaut-bar{
  margin-top:2px;
  background:#EEF1E2; border:1px dashed #D6DCC2; color:var(--ink-soft);
  font-family:var(--font-mono); font-size:12px;
  padding:8px 12px; border-radius:8px;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.defaut-bar.active{
  background:#AE3B26; border:1px solid #AE3B26; border-style:solid; color:#fff; font-weight:600;
  animation:pulse 1.6s infinite;
}
@keyframes pulse{0%,100%{opacity:1;}50%{opacity:.6;}}
@media (prefers-reduced-motion: reduce){ .defaut-bar.active{animation:none;} }

.compteur-list{display:flex; flex-direction:column; gap:8px;}
.compteur-row{display:grid; grid-template-columns:1.4fr 1fr 1fr auto; gap:10px; align-items:center; padding:10px 12px; background:#F1F4E9; border:1px solid var(--card-border); border-radius:9px; font-size:13px;}
.dot-state{width:9px; height:9px; border-radius:50%; display:inline-block;}
.dot-state.run{background:var(--green); box-shadow:0 0 6px 1px rgba(78,154,81,.6);}
.dot-state.stop{background:var(--off);}

/* --- Paramétrage --- */
.badge-list{display:flex; flex-direction:column; gap:8px; margin-bottom:20px;}
.badge-row{
  display:grid; grid-template-columns:1.2fr 1fr auto; gap:10px; align-items:center;
  padding:10px 14px; border-radius:9px; border:1px solid var(--card-border); background:#FCFDF7; font-size:13.5px;
}
.badge-row.assigned{background:#E7F1E0; border-color:#C2D8AE;}
.tag{font-size:11px; font-family:var(--font-mono); padding:3px 8px; border-radius:6px; background:var(--card-border);}
.badge-row.assigned .tag{background:#CFE3BC; color:#2F6B33;}
.form-grid{display:grid; grid-template-columns:1fr 1fr; gap:14px; margin-bottom:16px;}
@media(max-width:640px){.form-grid{grid-template-columns:1fr;}}

/* --- Gestion des sessions (créer / modifier / supprimer) --- */
.session-list{display:flex; flex-direction:column; gap:8px; margin-bottom:18px;}
.srow{
  display:grid; grid-template-columns:minmax(0,1fr) auto; gap:12px; align-items:center;
  padding:12px 14px; border-radius:9px; border:1px solid var(--card-border); background:#FCFDF7;
}
.srow.assigned{background:#E7F1E0; border-color:#C2D8AE;}
.srow.editing{outline:2px solid var(--salmon); outline-offset:1px;}
.srow-main{min-width:0; display:flex; flex-direction:column; gap:3px;}
.srow-id{font-family:var(--font-mono); font-weight:600; font-size:14px; color:var(--ink); overflow:hidden; text-overflow:ellipsis;}
.srow-sub{font-size:12.5px; color:var(--ink-soft); overflow:hidden; text-overflow:ellipsis;}
.srow-actions{display:flex; gap:8px; flex-wrap:wrap; justify-content:flex-end;}
.btn-mini{
  font-family:var(--font-body); font-size:12.5px; padding:6px 13px; border-radius:7px;
  border:1px solid var(--card-border); background:#FFF; color:var(--ink); white-space:nowrap;
}
.btn-mini:hover{background:#ECEFDF;}
.btn-mini.danger{color:#A5432B; border-color:#E0B6A3; background:#F6E7DF;}
.btn-mini.danger:hover{background:#F0D8CB;}
.form-card{background:#FCFDF7; border:1px solid var(--card-border); border-radius:11px; padding:16px;}
.form-actions{display:flex; gap:10px; align-items:center; flex-wrap:wrap; margin-top:6px;}
.form-card .badge-checks{flex-direction:column; gap:8px; margin-top:6px;}
.form-card .badge-checks label{width:100%;}
.empty{font-size:13px; color:var(--ink-soft); font-family:var(--font-mono); padding:6px 2px;}

.note{
  font-size:12.5px; color:var(--ink-soft); background:#EEF1E2; border:1px dashed #D6DCC2; border-radius:8px; padding:10px 12px; margin-top:12px;
}
.chart-wrap{height:320px;}
.legend-row{display:flex; gap:16px; margin-top:10px; flex-wrap:wrap; font-size:12.5px; font-family:var(--font-mono);}
.legend-dot{width:10px; height:10px; border-radius:50%; display:inline-block; margin-right:6px;}

.locked-msg{
  background:#EEF1E2; border:1px dashed #D6DCC2; border-radius:10px; padding:30px; text-align:center;
  color:var(--ink-soft); font-family:var(--font-mono); font-size:13px;
}

/* --- Bascule segmentée (type de graphique) & cases valeurs (mensuelle) --- */
.seg{display:inline-flex;gap:6px;flex-wrap:wrap;}
.seg button{border:1px solid var(--card-border);background:#fff;color:var(--ink);border-radius:8px;padding:6px 12px;font:inherit;cursor:pointer;}
.seg button:hover{border-color:var(--btn);}
.seg button.active{background:var(--btn);color:#fff;border-color:var(--btn);}
.mode-checks{border:1px solid var(--card-border);border-radius:10px;padding:10px 14px;margin:0 0 14px;display:flex;flex-wrap:wrap;gap:8px 20px;}
.mode-checks legend{padding:0 6px;color:var(--ink-soft);font-weight:600;font-size:13px;}
.mode-checks label{display:inline-flex;align-items:center;gap:6px;font-size:14px;cursor:pointer;}

/* --- Onglets internes (paramétrage) --- */
.tabbar{display:flex;gap:6px;flex-wrap:wrap;border-bottom:2px solid var(--card-border);margin:0 0 18px;}
.tabbar button{border:none;background:transparent;color:var(--ink-soft);font:inherit;font-weight:600;padding:9px 14px;border-radius:8px 8px 0 0;cursor:pointer;border-bottom:3px solid transparent;margin-bottom:-2px;}
.tabbar button:hover{color:var(--ink);}
.tabbar button.active{color:var(--navy);border-bottom-color:var(--salmon);background:#fff;}
.tabpane{display:none;}
.tabpane.active{display:block;}

/* --- Table des sites (super-administration) --- */
.site-row{display:grid;grid-template-columns:1.1fr 1.6fr auto auto;gap:14px;align-items:center;padding:12px 14px;border:1px solid var(--card-border);border-radius:10px;margin-bottom:10px;background:#fff;}
.site-code{font-family:var(--font-mono);font-weight:700;color:var(--navy);}
.switch{display:inline-flex;align-items:center;gap:8px;font-size:13px;color:var(--ink-soft);}
.switch input{width:16px;height:16px;}
.badge-state{display:inline-block;padding:2px 10px;border-radius:999px;font-size:12px;font-weight:600;}
.state-on{background:#E4F0DD;color:#2F6B36;}
.state-off{background:#F0E1DD;color:#9E4527;}

/* Le O final de DataPrO est en italique (identité de marque).
   Le nom est regroupé dans .brand-name : sans cela, le <span> deviendrait un
   élément flex distinct de .brand et hériterait de son gap. */
.brand-name{white-space:nowrap;}
.logo-o{font-style:italic; letter-spacing:0;}

/* Logo de l'application, centré au-dessus du titre de la page de connexion */
.login-logo{
  display:block;
  margin:0 auto 16px;
  max-width:200px;
  max-height:90px;
  width:auto; height:auto;
  border-radius:8px;
}

/* Mention « Hébergé en France » — typographie inspirée du label Made in France :
   deux barres (bleu, rouge) au-dessus d'un texte capitalisé et espacé. */
.hosted-fr{
  margin:22px auto 0;
  width:max-content;
  text-align:center;
}
.hosted-fr .hosted-bar{
  display:inline-block;
  width:46px; height:4px;
  vertical-align:middle;
  margin:0 6px 8px;
}
.hosted-fr .bar-blue{background:#0B3B75;}
.hosted-fr .bar-red{background:#C8102E;}
.hosted-fr .hosted-text{
  display:block;
  font-size:11px;
  letter-spacing:.22em;
  text-transform:uppercase;
  color:var(--ink-soft);
}