/* ========================================================================
   ZOANTHUS — Analyses (FO)
   Fichier : modules/zoaicp/views/css/zoa_analyses.css
   Dépendances : markup de la maquette (#zoa-analyses …)
   ======================================================================== */

#zoa-analyses{color:var(--text)}
#zoa-analyses .topbar{
  display:flex;align-items:center;gap:12px;
  color:var(--muted);font-size:13px;margin-bottom:12px
}
#zoa-analyses .crumb{opacity:.9}
#zoa-analyses .spacer{flex:1}

/* Grilles & cartes */
#zoa-attention-panel {
	margin-bottom:20px
}
#zoa-analyses .header{display:grid;grid-template-columns:2.2fr .8fr;gap:16px}
#zoa-analyses .panel{display:grid;grid-template-columns:2fr 1fr;gap:16px;margin-top:16px}
#zoa-analyses .card{
  background:
    radial-gradient(900px 320px at 10% -10%, color-mix(in lab, var(--brand) 10%, transparent), transparent 60%),
    var(--surface);
  border:1px solid var(--line);border-radius:18px;
  padding:16px;box-shadow:var(--card-shadow)
}
#zoa-analyses .title{letter-spacing:.2px}
#zoa-analyses .sub{color:var(--muted);font-size:13px}
#zoa-analyses .row-an{display:flex;gap:12px;flex-wrap:wrap}
#zoa-analyses .hstack{display:flex;align-items:center;gap:12px}

.title_graph {
font-size: 0.80rem;	
}


/* =========================
   SÉLECTEURS / INPUTS
   ========================= */
#zoa-analyses .select{
  display:flex;align-items:center;gap:8px;
  padding:10px 12px;background:var(--surface-3);
  border:1px solid var(--line);border-radius:12px;min-width:240px
}
[data-theme="light"] #zoa-analyses .select{background:#fff}
#zoa-analyses select{
  background:transparent;color:var(--text);
  border:none;outline:none;width:100%;height:auto;
}

/* =========================
   KPI & SPARKLINES
   ========================= */
#zoa-analyses .kpis{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-top:12px}
#zoa-analyses .kpi{
  background:var(--surface-2);border:1px solid var(--line);
  border-radius:16px;padding:14px;position:relative;overflow:hidden
}
#zoa-analyses .kpi .label{color:var(--muted);font-size:12px}
#zoa-analyses .kpi .value{font-size:22px;font-weight:800;margin-top:4px}
#zoa-analyses .pill {
margin-left: -20px;
    display: inline-flex
;
    align-items: center;
    gap: 6px;
    padding: 4px 10px;
    border-radius: 999px;
    font-size: 12px;
}

a.pill.zoa-chip {
    margin-right: 19px;
}

span.pill.cockpit {
    margin-left: 0 !important;
}

#zoa-analyses .pill.ok{background:color-mix(in srgb, var(--ok) 16%, transparent);color:var(--ok)}
#zoa-analyses .pill.warn{background:color-mix(in srgb, var(--warn) 16%, transparent);color:var(--warn)}
#zoa-analyses .pill.bad{background:color-mix(in srgb, var(--bad) 16%, transparent);color:var(--bad)}
#zoa-analyses .zoa-chip.bad{background:color-mix(in srgb, var(--bad) 16%, transparent);color:var(--bad);border: 1px solid var(--line, #1f2730);}
#zoa-analyses .zoa-chip.warn{background:color-mix(in srgb, var(--warn) 16%, transparent);color:var(--warn);border: 1px solid var(--line, #1f2730);}


#zoa-analyses .spark{height:28px;margin-top:8px;opacity:.95}

.titlebar {
  display: flex;
  align-items: center;
  gap: 8px;
}
.titlebar .card-title { margin: 0; }
.titlebar .info-tip { margin-left: auto; }

/* =========================
   TOOLBAR / RECHERCHE
   ========================= */
#zoa-analyses .toolbar{display:flex;align-items:center;gap:12px;margin-top:12px}
#zoa-analyses .search{
  flex:1;display:flex;align-items:center;gap:8px;
  padding:10px 12px;background:var(--toolbar-bg);
  border:1px solid var(--line);border-radius:12px
}
#zoa-analyses .search input{flex:1;background:transparent;border:none;outline:none;color:var(--text)}
#zoa-analyses .toggle{display:flex;border:1px solid var(--line);border-radius:12px;overflow:hidden}
#zoa-analyses .toggle button{
  padding:8px 12px;background:var(--surface-2);
  border:none;color:var(--muted);cursor:pointer
}
#zoa-analyses .toggle button.active{
  background:color-mix(in srgb, var(--brand) 15%, transparent);color:var(--text)
}

/* =========================
   TIMELINE
   ========================= */
#zoa-analyses .timeline{display:flex;gap:8px;align-items:center;margin-top:12px}
#zoa-analyses .tick{
  height:26px;min-width:6px;border-radius:6px;
  background:color-mix(in srgb, var(--info) 16%, transparent);
  border:1px solid var(--line);position:relative
}
#zoa-analyses .tick.ok{background:linear-gradient(color-mix(in srgb, var(--ok) 24%, transparent), color-mix(in srgb, var(--ok) 38%, transparent))}
#zoa-analyses .tick.warn{background:linear-gradient(color-mix(in srgb, var(--warn) 24%, transparent), color-mix(in srgb, var(--warn) 38%, transparent))}
#zoa-analyses .tick.bad{background:linear-gradient(color-mix(in srgb, var(--bad) 24%, transparent), color-mix(in srgb, var(--bad) 38%, transparent))}
#zoa-analyses .tick .date{
  position:absolute;bottom:-20px;left:50%;transform:translateX(-50%);
  font-size:10px;color:var(--muted)
}

/* =========================
   FAVORIS & ALERTES
   ========================= */
#zoa-analyses .favorites{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-top: 32px;}
#zoa-analyses .fav{
  background:var(--surface-2);border:1px solid var(--line);
  border-radius:14px;padding:12px
}
#zoa-analyses .fav .name {
    font-size: 15px;
    color: var(--muted);
    font-weight: 800;
}
#zoa-analyses .fav .val{font-size:18px;font-weight:700}
#zoa-analyses .fav .ideal{font-size:12px;color:var(--muted)}

#zoa-analyses .alerts{background:
  conic-gradient(from 200deg at 110% -10%, color-mix(in lab, var(--accent-2) 10%, transparent), transparent 30%),
  var(--surface);
  border:1px solid var(--line);border-radius:16px;padding:14px
}
#zoa-analyses .alert{
  display:flex;gap:10px;align-items:flex-start;
  background:color-mix(in srgb, var(--brand) 0%, var(--surface-2));
  border:1px dashed color-mix(in srgb, var(--text) 14%, transparent);
  border-radius:12px;padding:10px;margin-top:8px
}

/* =========================
   TABLE HISTORIQUE
   ========================= */


#zoa-analyses .list{margin-top:18px}
#zoa-analyses table{
  width:100%;border-collapse:separate;border-spacing:0;
  background:var(--surface-2);border:1px solid var(--line);
  border-radius:14px;overflow:hidden
}
#zoa-analyses th,#zoa-analyses td{
  padding:12px 14px;border-bottom:1px solid var(--line);font-size:16px;border-top: 0;
}
#zoa-analyses th{background:var(--table-head);text-align:left;color:color-mix(in srgb, var(--text) 70%, transparent)}
#zoa-analyses tr:hover td{background:var(--row-hover)}
#zoa-analyses .status{
  display:inline-flex;align-items:center;gap:6px;
  padding:4px 10px;border-radius:999px;font-size:12px
}
#zoa-analyses .status.ok{background:color-mix(in srgb, var(--ok) 16%, transparent);color:var(--ok)}
#zoa-analyses .status.warn{background:color-mix(in srgb, var(--warn) 16%, transparent);color:var(--warn)}
#zoa-analyses .status.bad{background:color-mix(in srgb, var(--bad) 16%, transparent);color:var(--bad)}

.zoa-a1 .status-note {
grid-column: 1 / -1;
    margin: 0 0 0 0;
    font-size: 0.85rem;
    opacity: 0.75;
    text-align: center;
}

/* =========================
   SWITCH THÈME
   ========================= */
 .theme-switch{display:inline-flex;align-items:center;gap:8px;cursor:pointer;color:var(--muted)}
.theme-switch input{
  appearance:none;width:36px;height:20px;border-radius:999px;
  border:1px solid var(--line);background:linear-gradient(135deg,var(--brand),var(--accent));
;
  position:relative;outline:none
}
.theme-switch input:after{
  content:"";position:absolute;left:2px;top:2px;width:16px;height:16px;
  border-radius:50%;background:#ffffff;box-shadow:0 1px 2px rgba(0,0,0,.25);
  transition:transform .2s ease
}
.theme-switch input:checked:after{transform:translateX(16px)}
.theme-switch .theme-label{font-size:12px}

/* =========================
   RESPONSIVE
   ========================= */

/* Tablet / petit desktop */
@media (max-width: 920px){
  #zoa-analyses .header{grid-template-columns:1fr}
  #zoa-analyses .kpis{grid-template-columns:repeat(2,1fr)}
  #zoa-analyses .panel{grid-template-columns:1fr}
  #zoa-analyses .favorites{grid-template-columns:repeat(1,1fr)}
  #zoa-analyses .toolbar{flex-direction:column;align-items:stretch}
  #zoa-analyses .toggle{width:100%}
  #zoa-analyses .search{width:100%}

	.box{
  display:flex;
  align-items:center;
  flex-wrap:wrap;    
  gap:8px;
}
.box > :nth-child(1){ flex:0 0 auto; }    
.box > :nth-child(2){
  flex:1 1 auto;                                 
  display:flex; align-items:center; gap:8px;   
}

.box > :nth-child(3){
  flex:0 0 100%;
  margin-top:6px;                             
}

}

/* Mobile étroit */
@media (max-width: 560px){
	
	.spacing {
	flex-direction: column;
	}
	
  /* CTAs full-width, select fluide */
  #zoa-analyses .select{min-width:unset;width:100%}
  #zoa-analyses .row{gap:10px}

  /* Timeline scrollable */
  #zoa-analyses .timeline{
    overflow-x:auto;gap:6px;padding-bottom:6px;
    scroll-snap-type:x proximity
  }
  #zoa-analyses .timeline .tick{
    scroll-snap-align:center;min-width:22px
  }

  /* KPI en colonne unique */
  #zoa-analyses .kpis{grid-template-columns:1fr}
  #zoa-analyses .spark{height:24px}

  /* Table -> Cartes (sans changer le HTML) */
  #zoa-analyses table thead{display:none}
  #zoa-analyses table, 
  #zoa-analyses tbody, 
  #zoa-analyses tr, 
  #zoa-analyses td{display:block;width:100%}
  #zoa-analyses tbody tr{
    border:1px solid var(--line);border-radius:14px;
    background:var(--surface-2);margin-bottom:12px;overflow:hidden
  }
  #zoa-analyses tbody tr td{
    border-bottom:1px solid var(--line);padding:10px 12px
  }
  #zoa-analyses tbody tr td:last-child{border-bottom:0}
  #zoa-analyses td.hstack{display:flex;gap:8px;flex-wrap:wrap}

  /* Étiquettes de champ */
  #zoa-analyses tbody tr td:nth-child(1)::before{content:"Date";display:block;color:var(--muted);font-size:12px;margin-bottom:2px}
  #zoa-analyses tbody tr td:nth-child(2)::before{content:"Laboratoire";display:block;color:var(--muted);font-size:12px;margin-bottom:2px}
  #zoa-analyses tbody tr td:nth-child(3)::before{content:"Hors plage";display:block;color:var(--muted);font-size:12px;margin-bottom:2px}
  #zoa-analyses tbody tr td:nth-child(4)::before{content:"Santé";display:block;color:var(--muted);font-size:12px;margin-bottom:2px}
  #zoa-analyses tbody tr td:nth-child(5)::before{content:"Actions";display:block;color:var(--muted);font-size:12px;margin-bottom:2px}
}

/* ===========================
   Overlay & base <modal>
   =========================== */

/* Fermée = invisible et non-cliquable */
:is(#zoaRelationsDialog, #zoaOrganicsDialog, #zoaEditValueDialog):not([open]) { display: none; }

/* Ouverte = centrée, fond géré par ::backdrop */
:is(#zoaRelationsDialog, #zoaOrganicsDialog, #zoaEditValueDialog)[open] {
  display: grid;
  place-items: center;
  border: 0;
  padding: 0;
  background: transparent;
  overflow: hidden;
}

/* Overlay natif du <dialog> */
:is(#zoaRelationsDialog, #zoaOrganicsDialog, #zoaEditValueDialog)::backdrop {
  background: rgba(0,0,0,.68);
  background: color-mix(in srgb, #000 68%, transparent);
  backdrop-filter: blur(2px);
}

#zoa-edit-value-form.modal-content {
	width: min(92vw, 386px);
}

.fav-name{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:.75rem;              /* espace entre nom et badge */
  margin-bottom:.25rem;    /* optionnel */
}

/* =========================
   MODALE FAVORIS (dark-ready)
   ========================= */
/* Masquage */
#modal-favorites.hidden,
#modal-charts.hidden { 
  display: none; 
}

/* Conteneur plein écran */
#modal-favorites,
#modal-charts {
  position: fixed; 
  inset: 0; 
  z-index: 99999;
  display: grid; 
  place-items: center;
}

/* Overlay plein écran (si présent dans la modale) */
#modal-favorites .modal-overlay,
#modal-charts .modal-overlay {
  position: fixed; 
  inset: 0;
  background: rgba(0,0,0,.45);
}

/* Wrapper centré */
#modal-favorites .modal-content,
#modal-charts .modal-content {
  position: relative;
  /* légère texture + surface système pour bien ressortir dans le sombre */
  background:
    radial-gradient(800px 260px at 8% -10%, color-mix(in lab, var(--brand) 10%, transparent), transparent 55%),
    var(--surface);
  color: var(--text);
  width: min(92vw, 560px);
  border-radius: 14px;
  border: 1px solid var(--line);
  box-shadow: 0 14px 48px rgba(0,0,0,.55);

  display: flex;
  flex-direction: column;
  max-height: 86vh;
  overflow: hidden; /* le scroll est dans .modal-body */
}

/* Titre */
#modal-favorites .modal-title,
#modal-charts .modal-title {
  font-weight: 700; 
  font-size: 18px; 
  margin-bottom: 8px;
}

/* Corps défilant */
#modal-favorites .modal-body,
#modal-charts  .modal-body {
  flex: 1 1 auto;
  overflow: auto;
  padding: 21px;
}

/* Groupes + titres */
.fav-group { 
  margin-bottom: 14px; 
}

.fav-group-title {
  position: relative;
  padding-left: 16px;
  font-weight: 700; 
  font-size: 13px; 
  letter-spacing:.2px;
  color: color-mix(in srgb, var(--text) 76%, transparent);
  margin: 8px 0 6px;
}

/* petit dot avant le titre (couleur par défaut, surchargée par catégorie) */
.fav-group-title:before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  width: 9px;
  height: 9px;
  border-radius: 999px;
  transform: translateY(-50%);
  background: var(--brand);
  opacity: .9;
}

/* Grille d’éléments */
#modal-favorites .fav-grid,
#modal-charts  .fav-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(160px,1fr));
  gap: 8px 10px;
  margin: 10px 0 6px;
}

/* Tuile = <label class="fav-pick"> */
#modal-favorites .fav-pick,
#modal-charts  .fav-pick {
  display:flex; 
  align-items:center; 
  gap:8px;
  font-size:14px; 
  line-height:1.2;
  padding:8px 10px;
  background: var(--surface-2);
  border:1px solid color-mix(in srgb, var(--text) 8%, transparent);
  border-radius: 10px;
  transition: border-color .15s ease, background-color .15s ease, transform .12s ease;
}

#modal-favorites .fav-pick:hover,
#modal-charts  .fav-pick:hover {
  background: color-mix(in srgb, var(--brand) 8%, var(--surface-2));
  border-color: color-mix(in srgb, var(--brand) 26%, var(--line));
}

#modal-favorites .fav-pick:focus-within,
#modal-charts  .fav-pick:focus-within {
  outline: 2px solid color-mix(in srgb, var(--brand) 55%, transparent);
  outline-offset: 2px;
}

[data-theme="dark"] #modal-favorites .fav-pick,
[data-theme="dark"] #modal-charts  .fav-pick {
  color: #ffffff75;
}

/* Checkbox */
#modal-favorites .fav-checkbox,
#modal-charts  .fav-checkbox {
  width:16px; 
  height:16px; 
  flex:0 0 auto;
  accent-color: var(--brand); /* surchargé par catégorie plus bas */
  border-radius:4px;
}

#modal-favorites .fav-checkbox:focus-visible,
#modal-charts  .fav-checkbox:focus-visible {
  outline: 2px solid color-mix(in srgb, var(--brand) 55%, transparent);
  outline-offset: 2px;
}

/* Noms en mode sombre */
body.dark #modal-favorites .el-name,
body.dark #modal-charts  .el-name { 
  color: #ffffff75; 
}

html[data-theme="dark"] #modal-favorites .el-name,
html[data-theme="dark"] #modal-charts  .el-name { 
  color: #ffffff75; 
}

/* Etat checked (générique, fallback tous navigateurs) */
#modal-favorites .fav-checkbox:checked + .el-name,
#modal-charts  .fav-checkbox:checked + .el-name {
  color: color-mix(in srgb, var(--brand) 70%, var(--text));
  font-weight: 600;
}

/* Etat checked avec :has (navigateurs modernes) */
@supports(selector(:has(*))){
  /* générique */
  #modal-favorites .fav-pick:has(.fav-checkbox:checked),
  #modal-charts  .fav-pick:has(.fav-checkbox:checked){
    background: color-mix(in srgb, var(--brand) 12%, var(--surface-2));
    border-color: color-mix(in srgb, var(--brand) 40%, var(--line));
    transform: translateY(-1px);
  }

  #modal-favorites .fav-pick:has(.fav-checkbox:checked) .el-name,
  #modal-charts  .fav-pick:has(.fav-checkbox:checked) .el-name {
    color: color-mix(in srgb, var(--brand) 75%, var(--text));
    font-weight: 600;
  }

  /* ==== Overrides par CATEGORIE (Base / Major / Nutr / Minor / Pollu / Autre) ==== */

  /* Base */
  #modal-favorites .fav-group[data-cat*="Base"] .fav-group-title:before,
  #modal-charts  .fav-group[data-cat*="Base"] .fav-group-title:before {
    background: color-mix(in oklab, var(--cat-base-a), black 10%);
  }

  #modal-favorites .fav-group[data-cat*="Base"] .fav-pick:has(.fav-checkbox:checked),
  #modal-charts  .fav-group[data-cat*="Base"] .fav-pick:has(.fav-checkbox:checked){
    background: color-mix(in oklab, var(--cat-base-a), var(--surface-2) 85%);
    border-color: color-mix(in oklab, var(--cat-base-a), black 18%);
  }

  #modal-favorites .fav-group[data-cat*="Base"] .fav-pick:has(.fav-checkbox:checked) .el-name,
  #modal-charts  .fav-group[data-cat*="Base"] .fav-pick:has(.fav-checkbox:checked) .el-name{
    color: color-mix(in oklab, var(--cat-base-a), #ffffff 25%);
  }

  /* Major */
  #modal-favorites .fav-group[data-cat*="Major"] .fav-group-title:before,
  #modal-charts  .fav-group[data-cat*="Major"] .fav-group-title:before {
    background: color-mix(in oklab, var(--cat-major-a), black 10%);
  }

  #modal-favorites .fav-group[data-cat*="Major"] .fav-pick:has(.fav-checkbox:checked),
  #modal-charts  .fav-group[data-cat*="Major"] .fav-pick:has(.fav-checkbox:checked){
    background: color-mix(in oklab, var(--cat-major-a), var(--surface-2) 85%);
    border-color: color-mix(in oklab, var(--cat-major-a), black 18%);
  }

  #modal-favorites .fav-group[data-cat*="Major"] .fav-pick:has(.fav-checkbox:checked) .el-name,
  #modal-charts  .fav-group[data-cat*="Major"] .fav-pick:has(.fav-checkbox:checked) .el-name{
    color: color-mix(in oklab, var(--cat-major-a), #ffffff 25%);
  }

  /* Nutriments */
  #modal-favorites .fav-group[data-cat*="Nutr"] .fav-group-title:before,
  #modal-charts  .fav-group[data-cat*="Nutr"] .fav-group-title:before {
    background: color-mix(in oklab, var(--cat-nutrients-a), black 10%);
  }

  #modal-favorites .fav-group[data-cat*="Nutr"] .fav-pick:has(.fav-checkbox:checked),
  #modal-charts  .fav-group[data-cat*="Nutr"] .fav-pick:has(.fav-checkbox:checked){
    background: color-mix(in oklab, var(--cat-nutrients-a), var(--surface-2) 85%);
    border-color: color-mix(in oklab, var(--cat-nutrients-a), black 18%);
  }

  #modal-favorites .fav-group[data-cat*="Nutr"] .fav-pick:has(.fav-checkbox:checked) .el-name,
  #modal-charts  .fav-group[data-cat*="Nutr"] .fav-pick:has(.fav-checkbox:checked) .el-name{
    color: color-mix(in oklab, var(--cat-nutrients-a), #ffffff 25%);
  }

  /* Minor */
  #modal-favorites .fav-group[data-cat*="Minor"] .fav-group-title:before,
  #modal-charts  .fav-group[data-cat*="Minor"] .fav-group-title:before {
    background: color-mix(in oklab, var(--cat-minor-a), black 10%);
  }

  #modal-favorites .fav-group[data-cat*="Minor"] .fav-pick:has(.fav-checkbox:checked),
  #modal-charts  .fav-group[data-cat*="Minor"] .fav-pick:has(.fav-checkbox:checked){
    background: color-mix(in oklab, var(--cat-minor-a), var(--surface-2) 85%);
    border-color: color-mix(in oklab, var(--cat-minor-a), black 18%);
  }

  #modal-favorites .fav-group[data-cat*="Minor"] .fav-pick:has(.fav-checkbox:checked) .el-name,
  #modal-charts  .fav-group[data-cat*="Minor"] .fav-pick:has(.fav-checkbox:checked) .el-name{
    color: color-mix(in oklab, var(--cat-minor-a), #ffffff 25%);
  }

  /* Polluants */
  #modal-favorites .fav-group[data-cat*="Pollu"] .fav-group-title:before,
  #modal-charts  .fav-group[data-cat*="Pollu"] .fav-group-title:before {
    background: color-mix(in oklab, var(--cat-pollutants-a), black 10%);
  }

  #modal-favorites .fav-group[data-cat*="Pollu"] .fav-pick:has(.fav-checkbox:checked),
  #modal-charts  .fav-group[data-cat*="Pollu"] .fav-pick:has(.fav-checkbox:checked){
    background: color-mix(in oklab, var(--cat-pollutants-a), var(--surface-2) 85%);
    border-color: color-mix(in oklab, var(--cat-pollutants-a), black 18%);
  }

  #modal-favorites .fav-group[data-cat*="Pollu"] .fav-pick:has(.fav-checkbox:checked) .el-name,
  #modal-charts  .fav-group[data-cat*="Pollu"] .fav-pick:has(.fav-checkbox:checked) .el-name{
    color: color-mix(in oklab, var(--cat-pollutants-a), #ffffff 25%);
  }

  /* Autres */
  #modal-favorites .fav-group[data-cat*="Autre"] .fav-group-title:before,
  #modal-charts  .fav-group[data-cat*="Autre"] .fav-group-title:before {
    background: color-mix(in oklab, var(--cat-autres-a), black 10%);
  }

  #modal-favorites .fav-group[data-cat*="Autre"] .fav-pick:has(.fav-checkbox:checked),
  #modal-charts  .fav-group[data-cat*="Autre"] .fav-pick:has(.fav-checkbox:checked){
    background: color-mix(in oklab, var(--cat-autres-a), var(--surface-2) 85%);
    border-color: color-mix(in oklab, var(--cat-autres-a), black 18%);
  }

  #modal-favorites .fav-group[data-cat*="Autre"] .fav-pick:has(.fav-checkbox:checked) .el-name,
  #modal-charts  .fav-group[data-cat*="Autre"] .fav-pick:has(.fav-checkbox:checked) .el-name{
    color: color-mix(in oklab, var(--cat-autres-a), #ffffff 25%);
  }
}

}

/* Accent-color par catégorie (checkbox) */
#modal-favorites .fav-group[data-cat*="Base"]  .fav-checkbox,
#modal-charts  .fav-group[data-cat*="Base"]  .fav-checkbox{
  accent-color: color-mix(in oklab, var(--cat-base-a), black 5%);
}
#modal-favorites .fav-group[data-cat*="Major"] .fav-checkbox,
#modal-charts  .fav-group[data-cat*="Major"] .fav-checkbox{
  accent-color: color-mix(in oklab, var(--cat-major-a), black 5%);
}
#modal-favorites .fav-group[data-cat*="Nutr"]  .fav-checkbox,
#modal-charts  .fav-group[data-cat*="Nutr"]  .fav-checkbox{
  accent-color: color-mix(in oklab, var(--cat-nutrients-a), black 5%);
}
#modal-favorites .fav-group[data-cat*="Minor"] .fav-checkbox,
#modal-charts  .fav-group[data-cat*="Minor"] .fav-checkbox{
  accent-color: color-mix(in oklab, var(--cat-minor-a), black 5%);
}
#modal-favorites .fav-group[data-cat*="Pollu"] .fav-checkbox,
#modal-charts  .fav-group[data-cat*="Pollu"] .fav-checkbox{
  accent-color: color-mix(in oklab, var(--cat-pollutants-a), black 5%);
}
#modal-favorites .fav-group[data-cat*="Autre"] .fav-checkbox,
#modal-charts  .fav-group[data-cat*="Autre"] .fav-checkbox{
  accent-color: color-mix(in oklab, var(--cat-autres-a), black 5%);
}

/* Actions collées en bas */
#modal-favorites .modal-actions,
#modal-charts  .modal-actions{
  position: sticky;
  bottom: 0;
  z-index: 1;
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  background:
    linear-gradient(to top, color-mix(in srgb, var(--surface) 100%, transparent) 60%, transparent),
    var(--surface);
  border-top: 1px solid var(--line);
  padding-top: 10px;
  padding-bottom: 10px;
  margin-top: 0;
}

#modal-favorites .btn.secondary,
#modal-charts  .btn.secondary{
  background: var(--surface-3);
  border:1px solid var(--line);
  color: var(--text);
}

#modal-favorites .btn.primary,
#modal-charts  .btn.primary{
  background: linear-gradient(135deg, var(--brand), var(--accent));
  border-color: transparent; 
  color: #fff;
}

/* Scrollbar douce sur le conteneur */
#modal-favorites .modal-content::-webkit-scrollbar,
#modal-charts  .modal-content::-webkit-scrollbar{ 
  width:10px; 
}
#modal-favorites .modal-content::-webkit-scrollbar-track,
#modal-charts  .modal-content::-webkit-scrollbar-track{ 
  background: color-mix(in srgb, var(--surface-3) 70%, transparent); 
}
#modal-favorites .modal-content::-webkit-scrollbar-thumb,
#modal-charts  .modal-content::-webkit-scrollbar-thumb{
  background: color-mix(in srgb, var(--text) 20%, transparent);
  border-radius: 8px;
}


/* Ajustements titres de groupe (version large) */
.fav-group { margin-bottom: 16px; }
.fav-group-title {
  font-weight: 600;
  font-size: 17px;
  margin: 8px 0 6px;
  opacity: .8;
}


/* === Status & Pills icons ================================================= */
/* mise en ligne: aligne texte + icône proprement */
.status, .pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;              /* espace entre icône et texte */
}

/* base icône : taille & héritage de la couleur du texte */
.status::before, .pill::before {
  content: "";
  width: 14px;
  height: 14px;
  display: inline-block;
  background-color: currentColor;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-size: contain;
  mask-size: contain;
}

/* ✓ OK -------------------------------------------------------------------- */
.status.ok::before, .pill.ok::before {
  -webkit-mask-image: url("data:image/svg+xml;utf8,\
<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'>\
<path fill='%23000' d='M9 16.17 4.83 12l-1.42 1.41L9 19l12-12-1.41-1.41z'/>\
</svg>");
  mask-image: url("data:image/svg+xml;utf8,\
<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'>\
<path fill='%23000' d='M9 16.17 4.83 12l-1.42 1.41L9 19l12-12-1.41-1.41z'/>\
</svg>");
}

/* ! Attention (triangle) --------------------------------------------------- */
.status.warn::before, .pill.warn::before {
  -webkit-mask-image: url("data:image/svg+xml;utf8,\
<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'>\
<path fill='%23000' d='M1 21h22L12 2 1 21zm12-3h-2v2h2v-2zm0-8h-2v6h2V10z'/>\
</svg>");
  mask-image: url("data:image/svg+xml;utf8,\
<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'>\
<path fill='%23000' d='M1 21h22L12 2 1 21zm12-3h-2v2h2v-2zm0-8h-2v6h2V10z'/>\
</svg>");
}

/* ✕ Alerte (croix dans un cercle) ----------------------------------------- */
.status.alert::before, .pill.alert::before {
  -webkit-mask-image: url("data:image/svg+xml;utf8,\
<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'>\
<path fill='%23000' d='M12 2a10 10 0 1 0 0 20 10 10 0 0 0 0-20zm3.54 13.54-1.41 1.41L12 13.41l-2.12 2.12-1.41-1.41L10.59 12 8.47 9.88l1.41-1.41L12 10.59l2.12-2.12 1.41 1.41L13.41 12l2.13 2.12z'/>\
</svg>");
  mask-image: url("data:image/svg+xml;utf8,\
<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'>\
<path fill='%23000' d='M12 2a10 10 0 1 0 0 20 10 10 0 0 0 0-20zm3.54 13.54-1.41 1.41L12 13.41l-2.12 2.12-1.41-1.41L10.59 12 8.47 9.88l1.41-1.41L12 10.59l2.12-2.12 1.41 1.41L13.41 12l2.13 2.12z'/>\
</svg>");
}

/* === Modale ICP Import (dark-ready) === */
#modal-icp-import.hidden{ display:none; }
#modal-icp-import{ position:fixed; inset:0; z-index:9999; display:grid; place-items:center; }
#modal-icp-import .modal-body{ flex:1 1 auto; overflow:auto; }



/* === Modale modal-icp-delete (dark-ready) === */
#modal-icp-delete.hidden{ display:none; }
#modal-icp-delete{ position:fixed; inset:0; z-index:9999; display:grid; place-items:center; }
#modal-icp-delete .modal-body{ flex:1 1 auto; overflow:auto; }

/* Footer sticky */
#modal-icp-delete .modal-actions{
  position:sticky; bottom:0; z-index:1; display:flex; justify-content:flex-end; gap:8px;
  border-top:1px solid var(--line);
  padding:10px 0 10px;
}

/* Champs */
#icp-import-form .field{ margin-bottom:12px; }
#icp-import-form input[type="date"],
#icp-import-form select,
#icp-import-form textarea{
  width:100%; background:var(--surface-3); color:var(--text);
  border:1px solid var(--line); border-radius:10px; padding:10px 12px; outline:none;
}
#icp-import-form textarea{ resize:vertical; }

/* Dropzone */
#icp-import-form .dropzone{
  position:relative; border:1px dashed color-mix(in srgb, var(--text) 14%, transparent);
  background:var(--surface-2); border-radius:12px; padding:16px; text-align:center; cursor:pointer;
  transition:border-color .15s ease, background-color .15s ease;
}
#icp-import-form .dropzone.drag{
  background: color-mix(in srgb, var(--brand) 10%, var(--surface-2));
  border-color: color-mix(in srgb, var(--brand) 40%, var(--line));
}
#icp-import-form .dropzone input[type="file"]{
  position:absolute; inset:0; width:100%; height:100%; opacity:0; cursor:pointer;
}
#icp-import-form .dropzone .dz-icon{
  width:34px; height:34px; margin: 0 auto 8px; background-color: var(--text);
  -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path fill='%23000' d='M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8zm0 2 4 4h-4zM8 13h8v2H8zm0 4h8v2H8zM8 9h4v2H8z'/></svg>") center/contain no-repeat;
          mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path fill='%23000' d='M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8zm0 2 4 4h-4zM8 13h8v2H8zm0 4h8v2H8zM8 9h4v2H8z'/></svg>") center/contain no-repeat;
}
#icp-import-form .dropzone .dz-text strong{ display:block; }
#icp-import-form .dropzone .dz-text .muted{ color:var(--muted); font-size:12px; }
#icp-import-form .dropzone .file-name{ margin-top:6px; font-size:12px; opacity:.85; }
#icp-import-form input[type="datetime-local"],
#icp-import-form input[type="date"],
#icp-import-form select,
#icp-import-form textarea{
  width:100%; background:var(--surface-3); color:var(--text);
  border:1px solid var(--line); border-radius:10px; padding:10px 12px; outline:none;
}

/* === Filtres Analyses — style identique aux .fav-pick ===================== */
#zoa-analyses .filters-like-fav .zoa-filter{
  /* on neutralise le style bootstrap du .btn et on recrée la tuile */
  all: unset;
  display:flex; align-items:center; gap:8px;
  font-size:14px; line-height:1.2;
  padding:3px 10px; border-radius:10px; cursor:pointer;
  background: var(--surface-2);
  border:1px solid color-mix(in srgb, var(--text) 8%, transparent);
  transition: border-color .15s ease, background-color .15s ease, transform .12s ease, color .12s ease;
}

#zoa-analyses .filters-like-fav .zoa-filter:hover{
  background: color-mix(in srgb, var(--brand) 8%, var(--surface-2));
  border-color: color-mix(in srgb, var(--brand) 26%, var(--line));
}

#zoa-analyses .filters-like-fav .zoa-filter:focus-visible{
  outline: 2px solid color-mix(in srgb, var(--brand) 55%, transparent);
  outline-offset: 2px;
}

@supports(selector(:has(*))){
  /* si le moteur supporte :has, on copie l'effet “checked” → “active” */
  #zoa-analyses .filters-like-fav .zoa-filter.active{
    background: color-mix(in srgb, var(--brand) 12%, var(--surface-2));
    border-color: color-mix(in srgb, var(--brand) 40%, var(--line));
    transform: translateY(-1px);
  }
}

/* Fallback universel si :has non supporté : même rendu via .active */
#zoa-analyses .filters-like-fav .zoa-filter.active{
  background: color-mix(in srgb, var(--brand) 12%, var(--surface-2));
  border-color: color-mix(in srgb, var(--brand) 40%, var(--line));
  transform: translateY(-1px);
}

/* Texte interne comme .el-name dans la modale */
#zoa-analyses .filters-like-fav .zoa-filter .el-name{ 
  color: inherit; 
}
#zoa-analyses .filters-like-fav .zoa-filter.active .el-name{
  color: color-mix(in srgb, var(--brand) 70%, var(--text));
  font-weight: 600;
}

/* Thème sombre : même nuance que .fav-pick/.el-name */
[data-theme="dark"] #zoa-analyses .filters-like-fav .zoa-filter{
  color: #ffffff75;
}
[data-theme="dark"] #zoa-analyses .filters-like-fav .zoa-filter.active{
  color: inherit; /* la teinte active reprend le texte normal + el-name ajustée */
}



.zoa-chip-box{
  position:relative;
  border:1px dashed var(--line, rgba(255,255,255,.15));
  border-radius:12px;
  padding:18px 12px 12px; /* espace haut pour le cartouche */
}

/* Légende posée sur la bordure en haut-gauche */
.zoa-chip-legend{
  position:absolute; z-index:1;
  top:0; left:12px; transform:translateY(-50%);
  display:inline-flex; align-items:center; gap:.5rem;
  padding:0 .5rem;
  border-radius:8px;
}

.spacing {
display: flex;
 gap: 11px;
margin-left: -3px;
}

/* checkbox plus lisible (reste natif) */
.fav-checkbox{
  width:16px; height:16px; flex:0 0 auto;
  accent-color: var(--brand);              /* moderne (Chrome/Firefox) */
  border-radius:4px;
}
.fav-checkbox:focus-visible{
  outline: 2px solid color-mix(in srgb, var(--brand) 55%, transparent);
  outline-offset: 2px;
}

/* ===== CHIP "Calcium" — rendu maquette, scoped à la modale ===== */
#zoa-action-modal #zoa-element-chip{
  /* on ignore le rendu .badge.accent générique et on force notre chip */
  display:inline-flex; align-items:center;
  border-radius:8px;
  background: var(--chip-bg);
  color: var(--chip-ink);
  border: 1px solid var(--chip-border);
  box-shadow:
    0 1px 0 var(--ring) inset,                 /* léger relief intérieur */
    0 0 0 1px color-mix(in oklab, var(--chip-border), transparent 65%); /* liseré doux */
  font-size:.86rem; white-space:nowrap;
  line-height:1; vertical-align:middle;
}

/* si le chip te paraît encore "gris" en sombre, hausse un poil le contraste */
html[data-theme="dark"] #zoa-action-modal #zoa-element-chip,
.theme-dark #zoa-action-modal #zoa-element-chip{
  background: color-mix(in oklab, var(--chip-bg), white 6%);
  border-color: color-mix(in oklab, var(--chip-border), white 14%);
  box-shadow:
    0 1px 0 color-mix(in oklab, var(--ring), white 18%) inset,
    0 0 0 1px color-mix(in oklab, var(--chip-border), transparent 55%);
}

/* === Liste historique en cartes — variante A1 avec rail ================== */
.zoa-a1-rail{
  position: relative;
  padding-left: 26px;             /* espace pour le rail */
}
.zoa-a1-rail::before{
  content:"";
  position:absolute; left:12px; top:0; bottom:0; width:2px;
  background: color-mix(in oklab, var(--text) 14%, transparent);
}

/* Carte A1 (3 blocs) */
.zoa-a1 {
  position: relative;
  display: grid;
  grid-template-columns: 96px minmax(0, 1fr);
  gap: 14px;
  padding: 14px;
  margin: 12px 0;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 14px;
  box-shadow: var(--card-shadow);
  align-items: stretch;
  border-left: 3px solid var(--cat-base-a);
}

.zoa-a1 .kit-side {
  display: flex;
  align-items: center;
  justify-content: center;
}

.zoa-a1 .kit-badge {
  width: 95%;
  min-height: 92%;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 8px 6px;
  border-radius: 16px;
  border: 1px solid color-mix(in oklab, var(--brand), var(--line) 70%);
  background: #fff;
  box-shadow: 0 8px 18px rgba(15, 23, 42, .04);
}

.zoa-a1 .kit-logo {
  display: block;
  width: 100%;
  max-width: 68px;
  height: auto;
  max-height: 68px;
  object-fit: contain;
}

.zoa-a1 .zoa-a1-body {
  min-width: 0;
  display: grid;
  gap: 10px;
  align-content: center;
}

.zoa-a1 .head {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  text-align: left;
  font-weight: 700;
}

.zoa-a1 .head .lab {
  opacity: .75;
  font-weight: 600;
  color: var(--muted);
}

.zoa-a1 .badges {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}

.zoa-a1 .status-note {
  margin: 0;
  font-size: .85rem;
  opacity: .75;
  text-align: left;
  grid-column: auto;
}

/* pastille reliée au rail */
.zoa-a1::before {
    content: "";
    position: absolute;
    left: -23px;
    top: 50%;
    transform: translateY(-50%);
    width: 12px;
    height: 12px;
    border-radius: 999px;
    background: var(--page-bg);
    border: 2px solid
 color-mix(in oklab, var(--brand) 73%, transparent);
}

@media (max-width: 767px) {

.zoa-a1.zoa-a1--history .zoa-a1-main {
    padding-bottom: 13px;
    border-bottom: 1px solid 
color-mix(in oklab, var(--text) 25%, transparent);
}

	
  .zoa-a1 {
    grid-template-columns: 1fr;
    gap: 12px;
  }

  .zoa-a1 .kit-side {
    justify-content: center;
  }

  .zoa-a1 .kit-badge {
    width: 77px;
    min-height: 77px;
    padding: 10px 14px;
  }

  .zoa-a1 .kit-logo {
    max-width: 94px;
    max-height: 55px;
  }

  .zoa-a1 .head {
    justify-content: center;
    text-align: center;
  }

  .zoa-a1 .badges {
    justify-content: center;
    text-align: center;
  }

  .zoa-a1 .status-note {
    text-align: center;
  }
}

.zoa-a1 .head{ display:flex; align-items:baseline; gap:8px; font-weight:700 }
.zoa-a1 .head .lab{ opacity:.75; font-weight:600 }
.zoa-a1 .badges{ display:flex; gap:6px; flex-wrap:wrap }
.zoa-a1 .actions{ display:flex; gap:6px; align-items:center; justify-content:flex-end }

/* “chips” légers qui s’appuient sur tes tokens */
.chip{
  font-size:.86rem;
  padding:.25rem .55rem;
  border-radius:999px;
  border:1px solid var(--line);
  background: color-mix(in srgb, var(--zi-profile-border)  14%, transparent);
  color: var(--muted);
  text-align: center;
}
.chip.ok   { background: color-mix(in srgb, var(--ok)   14%, transparent); color: var(--ok) }
.chip.warn { background: color-mix(in srgb, var(--warn) 14%, transparent); color: var(--warn) }
.chip.bad  { background: color-mix(in srgb, var(--bad)  14%, transparent); color: var(--bad) }
.chip.nd   { background: color-mix(in srgb, var(--text) 10%, transparent); color: var(--muted) }

/* Desktop : 3 colonnes (date+lab | chips | actions) & pastille centrée */
@media (min-width:700px){
  .zoa-a1::before{ top:50%; transform: translateY(-50%); }
}

/* Très étroit : actions full width (cohérent avec tes règles mobiles) */
@media (max-width:560px){
  .zoa-a1 .actions .btn{ width:100%; }
}

.zoa-a1.zoa-a1--history {
  display: grid;
  grid-template-columns: 96px minmax(0, 1fr) auto;
  gap: 14px;
  align-items: center;
}

.zoa-a1.zoa-a1--history .zoa-a1-media {
  display: flex;
  align-items: center;
  justify-content: center;
}

.zoa-a1.zoa-a1--history .zoa-a1-main {
  min-width: 0;
  display: grid;
  gap: 10px;
}

.zoa-a1.zoa-a1--history .head {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  text-align: left;
  justify-content: flex-start;
}

.zoa-a1.zoa-a1--history .badges {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  justify-content: flex-start;
  text-align: left;
}

.zoa-a1.zoa-a1--history .actions {
  display: flex;
  gap: 8px;
  align-items: center;
  justify-content: flex-end;
  flex-wrap: wrap;
}

/* Desktop table refaite */
.zoa-table-wrap { width:100%; }
.zoa-table { border-collapse:separate; border-spacing:0; width:100%; min-width:880px; background:var(--row,#0c1117); }
.zoa-table thead th { position:sticky; top:0; z-index:1; background:var(--thead,#0e151d);
  color:var(--muted,#9aa3af); font-weight:700; text-align:left; padding:10px 12px;
  border-bottom:1px solid var(--line,#1f2730); white-space:nowrap; }
.zoa-table tbody td { padding:12px; border-bottom:1px solid var(--line,#1f2730); vertical-align:middle; }
.zoa-table tbody tr:hover { background:var(--row-hover,#121a23); }
.text-end { text-align:left; }

.col-el{width:21ch} .col-measure{width:24ch} .col-gauge{width:320px}
.col-status{width:14ch} .col-actions{width:22ch}

.zoa-table tbody tr[data-sev="warning"]{ border-left:4px solid var(--warn,#f59e0b); }
.zoa-table tbody tr[data-sev="critical"]{ border-left:4px solid var(--bad,#ef4444); }
.zoa-table tbody tr[data-sev="nd"]{ border-left:4px solid transparent; }
.measure .small, .measure .sub { font-size:.85rem; color:var(--muted,#9aa3af); }

/* Pills (reprend tes classes) */
.pill{ display:inline-flex; align-items:center; gap:.4rem; font-weight:600;
  padding:.2rem .6rem; border-radius:999px; border:1px solid var(--line,#1f2730); }
.pill.ok{ background:color-mix(in oklab, var(--ok,#10b981) 18%, transparent); }
.pill.warn{ background:color-mix(in oklab, var(--warn,#f59e0b) 20%, transparent); }
.pill.bad{ background:color-mix(in oklab, var(--bad,#ef4444) 22%, transparent); }

/* Mobile: accordéon */
.desktop-only{ display:block; }
.zoa-accordion{ display:none; margin-top:12px; }
.mobile-only  { display:none  !important; }

@media (max-width:980px){
  .desktop-only{ display:none; }
  .zoa-accordion{ display:block; }
  .mobile-only  { display:block !important; }
}

    @media (min-width: 767.98px){
aside.zoa-aside--share-top.mobile-only {display:none !important}
    }

.acc{ background:var(--surface,#0f141a); border-radius:14px; overflow:hidden; }
.acc details{ border-top:1px solid var(--line,#1f2730); }
.acc summary{ list-style:none; display:grid; grid-template-columns:1fr auto; gap:12px; align-items:center; padding:12px 14px; cursor:pointer;background:radial-gradient(900px 320px at 10% -10%, color-mix(in lab, var(--brand) 10%, transparent), transparent 60%),    var(--surface);border-bottom: 1px solid var(--line, #1f2730); }
.acc summary::-webkit-details-marker{ display:none; }
.acc-title{ font-weight:800; }
.acc-body{ padding:12px 14px;

}

/* Masquer le triangle natif WebKit */
.zoa-accordion details summary::-webkit-details-marker { display: none; }

/* Mise en page du summary */
.zoa-accordion details summary {
  display: flex;
  align-items: center;
  justify-content: space-between; /* titre + pill à gauche, flèche allée à droite */
  gap: .75rem;
  position: relative;
  padding-right: 28px;            /* espace pour la flèche */
  cursor: pointer;
}

/* Optionnel : contraste en thème clair/sombre */
.zoa-accordion details summary { color: var(--text, #0f172a); }

/* Cache proprement ce qui ne matche pas le filtre */
.zoa-row.hidden,
.zoa-acc-item.hidden { display: none !important; }
.zoa-mini-gauge { overflow: visible; }
/* la jauge et ses wrappers ne doivent pas clipper */
.zoa-accordion .box,
.zoa-accordion .box .zoa-mini-gauge,
.zoa-accordion .box .zoa-mini-gauge > div {
  overflow: visible !important;
}

/* (optionnel) un peu plus de hauteur mini pour être confortable */
.zoa-mini-gauge { min-height: 75px; }


.kb-ana h3 {
    margin: 25px 0 0 13px;
    font-size: 1.35rem;
    line-height: 1.2;
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    border-bottom: 2px solid
 color-mix(in oklab, var(--kb-primary, var(--primary, #2563eb)), transparent 60%);
}

.kb-ana h3::before{
  content:"";
  width:8px; height:18px; border-radius:999px;
  background: color-mix(in oklab, var(--kb-primary, var(--primary,#2563eb)), white 25%);
  box-shadow: 0 0 0 1px color-mix(in oklab, var(--kb-primary, var(--primary,#2563eb)), black 20%) inset;
}

.kb-ana.cat-base{
  --kb-primary: var(--cat-base-b);
}

.kb-ana.cat-major{
  --kb-primary: var(--cat-major-b);
}

.kb-ana.cat-nutrients{
  --kb-primary: var(--cat-nutrients-b);
}

.kb-ana.cat-minor{
  --kb-primary: var(--cat-minor-b);
}

.kb-ana.cat-pollutants{
  --kb-primary: var(--cat-pollutants-b);
}

.kb-ana.cat-autres{
  --kb-primary: var(--cat-autres-b);
}


.zoa-meta-card {
      background: radial-gradient(900px 320px at 10% -10%,
 color-mix(in lab, var(--brand) 10%, transparent), transparent 60%), var(--surface);
    box-shadow: var(--card-shadow);
	padding: .75rem 1rem;
}

.zoa-meta-card .meta-row{
  display:flex;
  gap:.75rem;
  padding:.25rem 0;
  border-top:1px dashed #e5e7eb;
}
.zoa-meta-card .meta-row:first-child{ border-top:0; }

/* Le conteneur a une hauteur responsive basée sur sa largeur */
#zoaAnalysisKpis .half-donut {
  width: 100%;
  aspect-ratio: var(--donut-ratio, 1.85 / 1); /* ~ demi-donut: ajuste 1.7–2.0 */
  height: auto;            /* important: ne pas forcer 100% ici */
  display: block;
}

/* Les enfants ECharts occupent toute la boîte du conteneur */
#zoaAnalysisKpis .half-donut > div,
#zoaAnalysisKpis .half-donut canvas {
  width: 100% !important;
  height: 100% !important;
  min-height: 0;
}

/* Espace sous le donut pour le texte */
#zoaAnalysisKpis .half-donut + .muted {
  margin-top: 12px;
  line-height: 1.25;
}

#modal-manual-import.modal {
  position: fixed; inset: 0; z-index: 1050;
  display: flex; align-items: center; justify-content: center;
  padding: 6vh 16px 3vh;
}
#modal-manual-import.modal.hidden { opacity: 0; visibility: hidden; pointer-events: none; }
#modal-manual-import .modal-overlay { position:absolute; inset:0; background: rgba(0,0,0,.38); }

#manual-table .zoa-value-wrap { position: relative; }
#manual-table .zoa-value-wrap .form-control { padding-right: 4.5rem; }
#manual-table .zoa-value-wrap .zoa-value-unit {
  position: absolute; right: .6rem; top: 50%; transform: translateY(-50%);
  color: #999; font-size: .9em; max-width: 45%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; pointer-events: none;
}

.kpi-header h3.title{
  display:flex;
  align-items:center;
  gap:.75rem;             
  margin:0;
}
.kpi-header h3.title .btn{
  margin-left:auto;        
  white-space:nowrap;      
}

@media (max-width: 640px){
  .kpi-header h3.title{ flex-wrap:wrap; }
  .kpi-header h3.title .btn{
    margin-left:0;
    width:100%;
  }
	#zoa-attention-panel .card-header {
	flex-wrap:wrap;	
	}
	:is(#zoaRelationsDialog, #zoaOrganicsDialog, #zoaEditValueDialog)[open] {
	    max-width: 600px;	
	}
}

.kpi-card .muted {
  text-align: center;
}

#zoa-attention-panel .card-header {
    display: flex;
    align-items: center;
    gap: .75rem;
    margin-bottom: 24px;
}
#zoa-attention-panel .card-header .title { margin: 0; flex: 0 1 auto; font-size: 0.99em; }


/* Liste param responsive */
.param-list { display: grid; gap: 12px; }

/* Carte-ligne */
.param-row {
    display: grid;
    gap: 10px;
    padding: 12px;
    border: 1px dashed
 color-mix(in srgb, var(--text) 14%, transparent);
    border-radius: 10px;
    background: radial-gradient(900px 320px at 10% -10%,
 color-mix(in lab, var(--brand) 10%, transparent), transparent 60%), var(--surface);
}

/* Champs + labels */
.param-row .form-field { display: flex; flex-direction: column; gap: 6px; }
.param-row .form-field > label { font-size: .85rem; opacity: .8;display: flex;justify-content: center; }

/* Input group pour suffixe d’unité */
.input-group { display: grid; grid-template-columns: 1fr auto; align-items: center; }
.input-group .suffix {
  min-width: 46px; text-align: center; padding: 0 8px;
  height: 38px; display: inline-flex; align-items: center; justify-content: center;
}
.input-group .form-control { border-radius: 6px 0 0 6px; }

/* Colonne action compacte */
.param-row .form-actions { display: flex; align-items: end;align-self: baseline; }

.modal-content{
  display: flex;
  flex-direction: column;
}

.modal-body{
  overflow: auto;                 
  -webkit-overflow-scrolling: touch; 
  overscroll-behavior: contain;
}

/* Desktop : grille 5 colonnes */
@media (min-width: 900px) {
  .param-row{
    grid-template-columns:
      minmax(220px, 1.2fr)
      minmax(160px, .9fr)
      minmax(220px, 1fr)
      max-content;
    align-items: end;
  }

  .param-row .form-actions{
    justify-self: end;      
  }

  .param-row .form-actions .btn{
    white-space: nowrap;
  }
}

/* Thème sombre (si tu as un var() dark) */
@media (prefers-color-scheme: dark) {
  .param-row {
    background: var(--zoa-card-bg-dark, #1f1f1f);
    border-color: rgba(255,255,255,.1);
  }
  .input-group .suffix { border-color: rgba(255,255,255,.2); }
}


/* la carte d'une ligne devient le conteneur de positionnement */
.param-row{ position: relative; }

/* Mobile : bouton en haut-droit, à côté du label "Élément" */
@media (max-width: 900px){
  .param-row .form-actions{
    position: absolute;
    top: 8px;
    right: 8px;
    z-index: 2;            /* au-dessus des champs si besoin */
    align-self: auto;      /* neutralise les règles grid desktop */
    justify-self: auto;
  }

  /* laisse de la place au bouton pour ne pas couper le label */
  .param-row .form-field:first-child{
    padding-right: 48px;   /* ajuste si ton bouton est plus large */
  }

  /* petit style compact du bouton */
  .param-row .form-actions .btn{
    height: 28px;
    line-height: 26px;
    padding: 0 10px;
    border-radius: 8px;
    white-space: nowrap;
  }
	.param-row .form-field > label {
	    justify-content: flex-start;
		margin-bottom: -4px;
	}
}

@media (min-width: 900px){
  .param-row .form-actions{
    position: static;
    justify-self: end;
    align-self: center;   /* centre verticalement par rapport aux autres champs */
  }
}

/* Card dosage */

.zoa-dosing-card{ display:block; }

/* Chips */
.zoa-dosing-card .chip{
  display:inline-flex; align-items:center; gap:.4rem;
  padding:.28rem .55rem; border:1px solid var(--line); border-radius:999px;
  background:var(--badge-bg); color:var(--muted); font-size:.78rem; font-weight:600;
}
.zoa-dosing-card .chip-el{
  background: var(--chip-bg); border-color: var(--chip-border); color: var(--chip-ink);
  font-weight:800; letter-spacing:.02em;
}

/* Empty */
.zoa-dosing-card .empty{ margin-top:.4rem; }
.zoa-dosing-card .empty-row{ display:flex; gap:.5rem; align-items:center; color:var(--muted); }

/* Grid head (desktop) */
.zoa-dosing-card .dosing-grid.head{
  display:grid; grid-template-columns: 2.15fr 1fr .9fr 1.1fr .8fr 1.4fr; gap:10px;
  font-weight:700; color:color-mix(in oklab, var(--text) 75%, transparent);
  background:var(--surface-2); border:1px solid var(--line); border-radius:10px; padding:8px 10px; margin-top:.35rem;
}

/* Rows wrapper */
.zoa-dosing-card .dosing-list{ display:flex; flex-direction:column; gap:10px; margin-top:10px; }

/* Row */
.zoa-dosing-card .dosing-row:hover{ background:var(--surface-3); }

/* Cells */
.zoa-dosing-card .cell{ display:block; min-width:0; color:var(--text); }
/* Conteneur : ligne texte + bouton */
.zoa-dosing-card .cell .prod-sub {
    display: flex;
    align-items: center;
    gap: .5rem;
    flex: 1 1 auto;
    overflow: hidden;
}

/* Le texte doit pouvoir rétrécir et ellipser */
.zoa-dosing-card .cell .prod-sub .prod-text {
  min-width: 0;               /* indispensable en flex pour ellipsis */
  flex: 1 1 auto;             /* prend tout l’espace restant */
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Le bouton garde sa taille et reste toujours visible */
.zoa-dosing-card .cell .prod-sub .zoa-action-btn {
  flex: 0 0 auto;
}

/* Optionnel : un peu plus serré en mobile */
@media (max-width: 640px) {
  .zoa-dosing-card .cell .prod-sub { gap: .35rem; }
}
.zoa-dosing-card .cell .note{ font-size:.86rem; color:var(--muted); margin-top:.25rem; }
.zoa-dosing-card .cell-line{ display:flex; align-items:center; gap:.45rem; }
.zoa-dosing-card .ico{ color:var(--muted); display:inline-flex; }

/* Product block */
.zoa-dosing-card .prod-name{ font-weight:800; white-space:nowrap; overflow:hidden; line-height:1.25; text-overflow:ellipsis; }

/* Priority badge */
.zoa-dosing-card .prio-badge{
  display:inline-flex; align-items:center; gap:.45rem; padding:.32rem .6rem;
  border-radius:999px; font-weight:700; border:1px solid var(--line);
}
.zoa-dosing-card .prio-badge .dot{ width:.6rem; height:.6rem; border-radius:999px; display:inline-block; }
.zoa-dosing-card [data-prio="1"] .prio-badge{ background: color-mix(in oklab, var(--ok) 18%, transparent); }
.zoa-dosing-card [data-prio="1"] .prio-badge .dot{ background: var(--ok); }
.zoa-dosing-card [data-prio="2"] .prio-badge{ background: color-mix(in oklab, var(--warn) 18%, transparent); }
.zoa-dosing-card [data-prio="2"] .prio-badge .dot{ background: var(--warn); }
.zoa-dosing-card [data-prio="3"] .prio-badge{ background: color-mix(in oklab, var(--bad) 18%, transparent); }
.zoa-dosing-card [data-prio="3"] .prio-badge .dot{ background: var(--bad); }

/* Checks */
.zoa-dosing-card .checks-wrap{ display:flex; flex-wrap:wrap; gap:6px; }
.zoa-dosing-card .dose-wrap{ display:inline-flex; align-items:center; gap:.4rem; }
.zoa-dosing-card .dose-wrap input{ accent-color: var(--brand); }
.zoa-dosing-card .day-chip{
  display:inline-flex; align-items:center; justify-content:center;
  min-width: 2ch; padding:.15rem .4rem; border-radius:8px;
  border:1px solid var(--line); background:var(--surface);
  font-size:.8rem; font-weight:700; color:var(--text);
}

.zoa-dosing-card .dosing-grid.head {
  background: var(--table-head);
  color: var(--text);
  border-bottom: 1px solid var(--line);
}

/* Lignes : survol doux + liseré de priorité à gauche */
.zoa-dosing-card .dosing-row:hover {
  background: var(--row-hover);
}
.zoa-dosing-card .dosing-row[data-prio="1"] { border-left-color: var(--ok); }
.zoa-dosing-card .dosing-row[data-prio="2"] { border-left-color: var(--warn); }
.zoa-dosing-card .dosing-row[data-prio="3"] { border-left-color: var(--bad); }

/* Chips éléments — couleur “soft” par catégorie (teinte -b) */
.chip.chip-el{
    border: 1px solid transparent;
    font-weight: 700;
    margin-right: 6px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 34px;
    width: 34px;
    padding: 0 10px;
    border-radius: 999px;
    box-sizing: border-box;
    line-height: 1;
    font-size: 13px;
}

/* BASE */
.chip.chip-el.cat-base{
  color: var(--cat-base-a);
  background: color-mix(in oklab, var(--cat-base-b), transparent 88%);
  border-color: color-mix(in oklab, var(--cat-base-a), transparent 72%);
}

/* MAJOR */
.chip.chip-el.cat-major{
  color: var(--cat-major-a);
  background: color-mix(in oklab, var(--cat-major-b), transparent 88%);
  border-color: color-mix(in oklab, var(--cat-major-a), transparent 72%);
}

/* NUTRIENTS */
.chip.chip-el.cat-nutrients{
  color: var(--cat-nutrients-a);
  background: color-mix(in oklab, var(--cat-nutrients-b), transparent 88%);
  border-color: color-mix(in oklab, var(--cat-nutrients-a), transparent 72%);
}

/* MINOR */
.chip.chip-el.cat-minor{
  color: var(--cat-minor-a);
  background: color-mix(in oklab, var(--cat-minor-b), transparent 88%);
  border-color: color-mix(in oklab, var(--cat-minor-a), transparent 72%);
}

/* POLLUTANTS */
.chip.chip-el.cat-pollutants{
  color: var(--cat-pollutants-a);
  background: color-mix(in oklab, var(--cat-pollutants-b), transparent 88%);
  border-color: color-mix(in oklab, var(--cat-pollutants-a), transparent 72%);
}

/* AUTRES */
.chip.chip-el.cat-autres{
  color: var(--cat-autres-a);
  background: color-mix(in oklab, var(--cat-autres-b), transparent 88%);
  border-color: color-mix(in oklab, var(--cat-autres-a), transparent 72%);
}

/* Badges de priorité (couleur + petit dot) */
.zoa-dosing-card .prio-badge {
  display: inline-flex; align-items: center; gap: .4rem;
  padding: .22rem .6rem; border-radius: 999px;
  font-weight: 600; border: 1px solid transparent;
  background: var(--badge-bg);
  color: var(--text);
}
.zoa-dosing-card .prio-badge .dot {
  width: .55rem; height: .55rem; border-radius: 999px; display: inline-block;
  background: currentColor; box-shadow: inset 0 0 0 2px rgba(255,255,255,.45);
}
.zoa-dosing-card .prio-1 { background: color-mix(in oklab, var(--ok) 16%, transparent); color: var(--ok); border-color: color-mix(in oklab, var(--ok) 35%, transparent); }
.zoa-dosing-card .prio-2 { background: color-mix(in oklab, var(--warn) 16%, transparent); color: var(--warn); border-color: color-mix(in oklab, var(--warn) 35%, transparent); }
.zoa-dosing-card .prio-3 { background: color-mix(in oklab, var(--bad) 16%, transparent); color: var(--bad); border-color: color-mix(in oklab, var(--bad) 35%, transparent); }

/* Icônes par cellule (teintes cohérentes) */
.zoa-dosing-card .cell.total .ico   { color: var(--info); }
.zoa-dosing-card .cell.days .ico    { color: var(--brand); }
.zoa-dosing-card .cell.perday .ico  { color: var(--accent); }

/* Valeurs mises en avant */
.zoa-dosing-card .cell .value {
  color: var(--text);
  font-weight: 700;
}
.zoa-dosing-card .cell.total .value {
  color: color-mix(in oklab, var(--info) 68%, var(--text));
}

/* Note "Limité par…" : ton secondaire lisible */
.zoa-dosing-card .cell.total .note {
  color: var(--muted);
}

/* Sous-texte produit + bouton "Modifier" */
.zoa-dosing-card .prod-sub { color: var(--muted); }

/* État vide : alerte teintée au thème */
.zoa-dosing-card .alert-bloc.empty {
  background: color-mix(in oklab, var(--info) 8%, var(--surface));
  border: 1px solid color-mix(in oklab, var(--info) 28%, var(--line));
  color: color-mix(in oklab, var(--info) 60%, var(--text));
  border-radius: 10px;
}
.zoa-dosing-card .alert-bloc.empty .ico { color: var(--info); }

/* Pulse léger lors d'une MAJ de ligne (déjà géré en JS) */
@keyframes zoaPulse {
  0% { box-shadow: 0 0 0 0 color-mix(in oklab, var(--brand) 30%, transparent); }
  100% { box-shadow: 0 0 0 14px transparent; }
}
.zoa-dosing-card .dosing-row.zoa-pulse {
  animation: zoaPulse .9s ease-out 1;
}

@media (min-width:560px) and (max-width:980px){
  .extra-grid{
    display: flex;
    flex-wrap: wrap;
    gap: 12px;              /* ajuste si besoin */
    align-items: stretch;
  }

  /* Les titres occupent toute la ligne (au-dessus des items) */
  .extra-grid > .row-expand-title{
    flex: 0 0 100%;
    margin: 0;              /* au cas où */
  }

  /* Les 3 premiers items après le 1er titre → 3 colonnes */
  .extra-grid > .row-expand-title + .extra-item,
  .extra-grid > .row-expand-title + .extra-item + .extra-item,
  .extra-grid > .row-expand-title + .extra-item + .extra-item + .extra-item{
    flex: 1 0 calc(33.333% - 8px);  /* 3 par ligne ; ajuste le -8px si tu changes gap */
  }

  /* Le 2e titre force un retour à la ligne avant les 2 derniers items */
  .extra-grid > .row-expand-title:nth-of-type(2){
    flex-basis: 100%;
  }

  /* Les items après le 2e titre → 2 colonnes */
  .extra-grid > .row-expand-title:nth-of-type(2) ~ .extra-item{
    flex: 1 0 calc(50% - 6px);      /* 2 par ligne ; ajuste selon gap */
  }
}


/* Mobile layout */
@media (max-width: 980px){
  .zoa-dosing-card .dosing-grid.head{ display:none; }
  .zoa-dosing-card .dosing-row{ grid-template-columns: 1fr; gap:8px; padding:12px 12px 38px 12px; }
  .zoa-dosing-card .cell.total,
  .zoa-dosing-card .cell.days,
  .zoa-dosing-card .cell.perday,
  .zoa-dosing-card .cell.prio{ display:none; }

  .zoa-dosing-card .mobile-extra{ display:block; }
  .zoa-dosing-card .extra-item{ border:1px dashed var(--line); border-radius:10px; padding:8px 10px; border-color: 
 color-mix(in oklab, var(--info) 35%, var(--line));
        background: linear-gradient(135deg,
 color-mix(in oklab, var(--info) 10%, transparent) 0%, transparent 60%); }
  .zoa-dosing-card .extra-item .lbl{ display:block; font-size:.78rem; color:var(--muted); margin-bottom:2px; }
  .zoa-dosing-card .extra-item .val{ font-weight:800; color:var(--text); white-space:nowrap; }
	  /* teintes par “type” en se basant sur la position (si tu gardes cet ordre) */
  .zoa-dosing-card .cell.mobile-extra .extra-item:nth-child(2){ /* Quantité totale */
    border-color: color-mix(in oklab, var(--info) 35%, var(--line));
    background:
      linear-gradient(135deg, color-mix(in oklab, var(--info) 10%, transparent) 0%, transparent 60%);
  }
  .zoa-dosing-card .cell.mobile-extra .extra-item:nth-child(2) .lbl{ color: color-mix(in oklab, var(--info) 70%, var(--muted)); }
  .zoa-dosing-card .cell.mobile-extra .extra-item:nth-child(2) .val{ color: color-mix(in oklab, var(--info) 68%, var(--text)); }

  .zoa-dosing-card .cell.mobile-extra .extra-item:nth-child(3){ /* Correspond à */
    border-color: color-mix(in oklab, var(--accent) 35%, var(--line));
    background:
      linear-gradient(135deg, color-mix(in oklab, var(--accent) 10%, transparent) 0%, transparent 60%);
  }
  .zoa-dosing-card .cell.mobile-extra .extra-item:nth-child(3) .lbl{ color: color-mix(in oklab, var(--accent) 70%, var(--muted)); }
  .zoa-dosing-card .cell.mobile-extra .extra-item:nth-child(3) .val{ color: color-mix(in oklab, var(--accent) 68%, var(--text)); }

  .zoa-dosing-card .cell.mobile-extra .extra-item:nth-child(4){ /* Réparti sur… */
    border-color: color-mix(in oklab, var(--brand) 35%, var(--line));
    background:
      linear-gradient(135deg, color-mix(in oklab, var(--brand) 10%, transparent) 0%, transparent 60%);
  }
  .zoa-dosing-card .cell.mobile-extra .extra-item:nth-child(4) .lbl{ color: color-mix(in oklab, var(--brand) 70%, var(--muted)); }
  .zoa-dosing-card .cell.mobile-extra .extra-item:nth-child(4) .val{ color: color-mix(in oklab, var(--brand) 68%, var(--text)); }
}

/* XS extra */
@media (max-width: 560px){
  .zoa-dosing-card .extra-grid{ grid-template-columns: repeat(2,minmax(0,1fr)); }
}

/* Accessibilité / motion */
@media (prefers-reduced-motion: reduce){
  .zoa-dosing-card .dosing-row{ transition: none; }
}

/* ===== Compact desktop pour le bloc produit ===== */
@media (min-width: 981px){
  .zoa-dosing-card .cell.product{ display:flex; align-items:baseline; flex-wrap:wrap; gap:.35rem .5rem; }
  .zoa-dosing-card .prod-name{
    order:2; flex-basis:100%;
    font-weight:700; font-size:.95rem; line-height:1.25;
    white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
  }
  .zoa-dosing-card .dosing-grid.head{ grid-template-columns: 2fr .9fr .8fr .95fr .7fr; padding:6px 8px; gap:8px; }
  .zoa-dosing-card .chip{ padding:.22rem .5rem; font-size:.76rem; }
}

/* Toggle visuals (piloté par ZOA_Collapse) */
.card-content[hidden]
.card-content{
  overflow: hidden;
  max-height: 0;
  opacity: 0;
  transition: max-height .32s ease, opacity .24s ease;
  will-change: max-height, opacity;
}
.card-content.is-open{ opacity: 1; }


/* Tête du produit : puce + nom sur une seule ligne */
.prod-head{
  display:flex;
  align-items:center;
  gap:.5rem;           /* espace entre la puce et le nom */
  flex-wrap:nowrap;    /* ne pas passer à la ligne */
}

/* La puce et le nom sur la même ligne */
.chip.chip-el{flex:0 0 auto;}
.prod-name.small{
  flex:1 1 auto;       /* prend la place restante */
  white-space:nowrap;  /* reste sur une ligne */
  overflow:hidden;     /* cache le surplus */
  text-overflow:ellipsis; /* … si trop long */
  margin:0;            /* au cas où un style global ajoute une marge */
}

/* La sous-ligne reste en dessous (déjà block par défaut) */
.prod-sub.muted{
  margin-top:.25rem;
}


/* Mobile only */
@media (max-width: 559px){
  /* grille mobile */
  .zoa-dosing-card .cell.mobile-extra .extra-grid{
    display: grid;
    grid-template-columns: 1fr;
    gap: .65rem;
    padding: .8rem .9rem;
    background: color-mix(in srgb, var(--brand) 0%, var(--surface-2));
    border: 1px dashed color-mix(in srgb, var(--text) 14%, transparent);
    border-radius: 10px;
    margin-top: .5rem;
  }

  /* cartes mini pour chaque extra-item */
  .zoa-dosing-card .cell.mobile-extra .extra-item{
    display: grid;
    grid-template-columns: auto 1fr;
    align-items: center;
    gap: .5rem .75rem;
    padding: .6rem .75rem;
    border: 1px solid var(--zi-profile-border);
    border-radius: 10px;
    background:
      linear-gradient(0deg, color-mix(in oklab, var(--surface) 92%, transparent), transparent);
    box-shadow: 0 1px 0 rgba(0,0,0,.02);
  }

  /* label + valeur */
  .zoa-dosing-card .cell.mobile-extra .extra-item .lbl{
    color: var(--zi-profile-border);
    font-size: .86rem;
    font-weight: 600;
  }
  .zoa-dosing-card .cell.mobile-extra .extra-item .val{
    color: var(--text);
    font-weight: 700;
    justify-self: end;
    white-space: nowrap;
  }

  /* variante si la ligne a une priorité (accentue subtilement le halo) */
  .zoa-dosing-card .dosing-row[data-prio="3"] .cell.mobile-extra .extra-item{
    box-shadow: 0 0 0 2px color-mix(in oklab, var(--bad) 12%, transparent);
  }
  .zoa-dosing-card .dosing-row[data-prio="2"] .cell.mobile-extra .extra-item{
    box-shadow: 0 0 0 2px color-mix(in oklab, var(--warn) 12%, transparent);
  }
  .zoa-dosing-card .dosing-row[data-prio="1"] .cell.mobile-extra .extra-item{
    box-shadow: 0 0 0 2px color-mix(in oklab, var(--ok) 12%, transparent);
  }
}

/* place ça dans ton CSS */
.kb-ana{
  display:flex;
  align-items:center;             /* vertical align */
  justify-content:space-between;  /* h3 à gauche, boutons à droite */
  gap:.75rem;
}
.kb-ana h3{ margin:0; }           /* supprime l’espace par défaut */
.kb-ana .acc-tools{
  display:flex;
  gap:.5rem;
  margin: 25px 0 0 13px;               /* pousse les boutons à droite */
}
@media (max-width: 575px){
  .kb-ana{ flex-wrap:wrap; }      /* si besoin de retour à la ligne sur mobile */
}

/* léger fondu/déplacement sur les items mobiles */
.mobile-only details.zoa-acc-item {
  will-change: opacity, transform;
}
@media (prefers-reduced-motion: no-preference) {
  .zoa-anim-in  { opacity: 1 !important; transform: translateY(0) !important; transition: opacity .22s ease, transform .22s ease; }
  .zoa-anim-out { opacity: 0 !important; transform: translateY(-6px) !important; transition: opacity .18s ease, transform .18s ease; }

  /* collapse du body de catégorie */
  .zoa-collapsing {
    overflow: hidden;
    transition: max-height .24s ease, opacity .24s ease;
  }
}
/* ========== Variables (durées réglables) ========== */
:root{
  --zoa-archive-finalize-ms: 15s;  /* temps de flou sur place */
  --zoa-archive-fly-ms: 5s;       /* temps du vol vers les archives */
}

/* Option: durées spécifiques à la carte, via data-attrs */
.zoa-dosing-card[data-finalize-ms]{
  --zoa-archive-finalize-ms: attr(data-finalize-ms s);
}
.zoa-dosing-card[data-fly-ms]{
  --zoa-archive-fly-ms: attr(data-fly-ms s);
}

/* ========== Finalisation (flou contenu uniquement) ========== */
.dosing-row.finalizing{
  position: relative;
}
.dosing-row.finalizing > *:not(.zoa-finalize-overlay){
  filter: blur(2px) saturate(.95);
  opacity: .9;
  transition:
    filter var(--zoa-archive-finalize-ms) ease,
    opacity var(--zoa-archive-finalize-ms) ease;
}

/* L’overlay “check” reste net et au-dessus */
.zoa-finalize-overlay{
  position:absolute; inset:0;
  display:flex; align-items:center; justify-content:center;
  pointer-events:none; z-index:5; filter:none !important; opacity:1;
}
.zoa-finalize-overlay .zoa-check-wrap{
  width:86px; height:86px; border-radius:999px;
  background:rgba(16,185,129,.95);
  display:flex; align-items:center; justify-content:center;
  box-shadow:0 10px 30px rgba(0,0,0,.18);
}
.zoa-finalize-overlay .zoa-check-wrap .lottie,
.zoa-finalize-overlay .zoa-check-wrap canvas,
.zoa-finalize-overlay .zoa-check-wrap svg{
  width:56px; height:56px; display:block;
}

/* ========== État archived (rangée en bas) ========== */
.dosing-row.archived{
  opacity:.92;
  background: var(--zoa-muted-bg, #f8fafc);
}
.dosing-row.archived .days-strip,
.dosing-row.archived .zoa-row-gauge,
.dosing-row.archived input.dose-check,
.dosing-row.archived .mini-gauge{
  display:none !important;
}

/* ========== Mini gabarit “flyer” (copie visuelle pendant le vol) ========== */
.zoa-archive-flyer{
  position:absolute; margin:0; pointer-events:none; z-index:9999;
  transform: translate3d(0,0,0);
  box-shadow:0 8px 24px rgba(0,0,0,.08);
}

/* Accessibilité : réduire les motions si demandé */
@media (prefers-reduced-motion: reduce){
  .dosing-row.finalizing > *:not(.zoa-finalize-overlay){
    transition:none !important;
  }
}
div#modal-unarchive-dose {
    position: fixed;
    inset: 0;
    z-index: 9999;
    display: grid;
    place-items: center;
}

/* =========================
   Dosing Archives — 4 colonnes
   Desktop = tableau
   Mobile  = cards
   S'appuie sur tes tokens : --surface, --row-hover, --zoa-line, --brand, etc.
   ========================= */

/* En-tête (desktop) */
.dosing-grid.head.archived{
  display:grid;
  grid-template-columns: minmax(0,1.1fr) minmax(0,2.2fr) minmax(0,1fr) minmax(0,1.1fr);
  gap:.5rem;
  padding:.5rem .75rem;
  background: var(--table-head);
  border: 1px solid var(--zoa-line);
  border-radius:.75rem;
  font-weight:600;
  color: var(--text);
}

/* Liste */
.dosing-archive-list{
  display:flex;
  flex-direction:column;
  gap:.5rem;
  margin-top:.5rem;
}

/* Ligne (desktop = 4 colonnes) */
.dosing-archive-row{
  display:grid;
  grid-template-columns: minmax(0,1.1fr) minmax(0,2.2fr) minmax(0,1fr) minmax(0,1.1fr);
  gap:.75rem;
  align-items:center;
  padding:.65rem .85rem;
  background: var(--surface);
  border:1px solid var(--zoa-line);
  border-radius:.85rem;
  box-shadow: 0 1px 0 rgba(0,0,0,.02);
  transition: background .15s ease, box-shadow .15s ease, border-color .15s ease;
}
.dosing-archive-row:hover{
  background: var(--row-hover);
  box-shadow: var(--shadow-md);
  border-color: color-mix(in oklab, var(--brand), var(--zoa-line) 75%);
}

/* Cellules */
.dosing-archive-row .cell{ min-width:0; }
.dosing-archive-row .cell.el{ display:flex; align-items:center; gap:.5rem; }
.dosing-archive-row .cell.product .prod-name{ font-weight:600; color:var(--text); }
.dosing-archive-row .cell.product .prod-sub{ margin-top:.15rem; font-size:.85rem; color:var(--muted); }

/* “Total” en badge discret */
.dosing-archive-row .cell.total{
  font-weight:600;
  color: var(--brand-ink);
  justify-self:start;
}
.dosing-archive-row .cell.total .v{
  display:inline-block;
  padding:.18rem .5rem;
  border:1px solid color-mix(in oklab, var(--brand), var(--zoa-line) 70%);
  background: color-mix(in oklab, var(--brand), white 92%);
  color: color-mix(in oklab, var(--brand-ink), var(--text) 20%);
  border-radius:.5rem;
}
/* =========================
   Mobile — Cards compactes
   ========================= */
@media (max-width: 900px){
  .desktop-only{ display:none !important; }

  .dosing-archive-row{
    grid-template-columns: 1fr;
    gap:.5rem;
    padding:.85rem;
    background: var(--surface-2);
    border-radius:1rem;
    box-shadow: var(--card-shadow);
  }

  /* Ordonnancement : titre (élément) → produit → méta “total” → actions */
  .dosing-archive-row .cell.el{
    order:1;
  }
  .dosing-archive-row .cell.product{
    order:2;
  }
  .dosing-archive-row .cell.total{
    order:3;
  }
  .dosing-archive-row .cell.actions{
    order:4; justify-self:stretch;
  }
  .dosing-archive-row .cell.actions .btn{
    width:100%;
    text-align:center;
  }

  /* “Total” avec libellé automatique (tu peux surcharger via data-label) */
  .dosing-archive-row .cell.total::before{
    content: attr(data-label);
    content: attr(data-label) " / " !important; /* si data-label présent */
    display: inline-block;
    margin-right:.35rem;
    font-size:.8rem;
    color: var(--muted);
  }
  /* Fallback si pas de data-label */
  .dosing-archive-row .cell.total:not([data-label])::before{
    content: "Volume total :";
  }

  .dosing-archive-row .cell.total .v{
    display:inline-block;
  }
}

/* Option : ajoute la valeur dans un span.v en TPL pour bénéficier du badge */
.dosing-archive-row .cell.total > .v::after{
  /* rien — hook visuel réservé si besoin */
}

/* Petites animations “add/remove” (utiles quand on restaure une archive) */
@keyframes zoaFadeSlideIn { from {opacity:0; transform: translateY(-6px);} to {opacity:1; transform: translateY(0);} }
@keyframes zoaFadeSlideOut{ to   {opacity:0; transform: translateY(-6px);} }
.dosing-archive-row.zoa-anim-in  { animation: zoaFadeSlideIn .22s ease forwards; }
.dosing-archive-row.zoa-anim-out { animation: zoaFadeSlideOut .18s ease forwards; }


/* ===== Manual modal — Variant C1 (Zoanthus tokens) ===== */
#modal-manual-import .modal-content{
  max-width: 920px;
}

/* Date header */
#modal-manual-import .zoa-manual-date{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  margin: 0 0 12px;
}
#modal-manual-import .zoa-manual-date-label{
  font-weight:900;
  color: var(--text);
  margin:0;
}
#modal-manual-import .manual-date-pill{
  padding: 10px 12px;
  border-radius: 16px;
  background: var(--bg-elev);
  border: 1px solid var(--border);
  box-shadow: var(--shadow-md);
}
#modal-manual-import .manual-date-pill .form-control{
  height: 44px;
  border-radius: 12px;
  background: transparent;
}

/* Cat blocks */
#modal-manual-import .measure-cat{
  margin: 14px 0;
}
#modal-manual-import .measure-cat-title{
  display:flex;
  align-items:center;
  gap:10px;
  margin: 12px 4px 8px;
  font-weight: 900;
  color: var(--text);
}
/* Pastille du titre de catégorie (couleur par défaut, surchargée par catégories) */
#modal-manual-import .measure-cat-title:before{
  content:"";
  width:10px;
  height:10px;
  border-radius:999px;
  background: var(--brand);
  opacity:.95;
}
#modal-manual-import .measure-cat-body{
  display:flex;
  flex-direction:column;
  gap:10px;
}

/* Layout général de la ligne */
#modal-manual-import .measure-row{
  display:grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
  grid-template-areas:
    "left right"
    "left norm"; /* Norme sous le champ à droite */
  gap: 10px;

  padding: 12px;
  border-radius: 18px;

  background: var(--bg-elev);
  border: 1px solid var(--border);
  box-shadow: var(--shadow-md);
}

/* Colonne gauche : symbole + nom */
#modal-manual-import .m-left{
  grid-area:left;
  display:flex;
  gap:12px;
  align-items:flex-start;
  min-width:0;
}

/* On n’utilise plus le span.dot visuellement */
#modal-manual-import .dot{
  display:none;
}

#modal-manual-import .m-txt{
  min-width:0;
}

/* Symbole avec pastille colorée en before */
#modal-manual-import .m-code{
  position: relative;
  padding-left: 16px; /* place pour la pastille */
  font-size: 16px;
  font-weight: 950;
  line-height: 1.1;
  color: var(--text);
}
#modal-manual-import .m-code::before{
  content:"";
  position:absolute;
  left:0;
  top:50%;
  transform: translateY(-50%);
  width:10px;
  height:10px;
  border-radius:999px;
  background: var(--brand); /* surchargé par catégories */
  opacity:.95;
}

/* Nom de l’élément en dessous */
#modal-manual-import .m-label{
  margin-top: 4px;
  font-size: 13px;
  color: var(--muted);
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}

/* Bloc Norme : libellé + chip, sous le champ */
#modal-manual-import .m-mid{
  grid-area:norm;
  text-align:left;
  padding-left:0;
  align-self:flex-start;
}

#modal-manual-import .m-n-title{
  display: flex;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--muted);
  margin-bottom: 2px;
  vertical-align: middle;
  align-content: center;
  justify-items: center;
}

#modal-manual-import .m-n-val{
  display:inline-flex;
  align-items:center;
  gap:8px;

  padding: 6px 10px;
  border-radius: 999px;

  font-weight: 900;
  font-size: 12px;

  background: var(--chip-bg);
  border: 1px solid var(--chip-border);
  color: var(--chip-ink);
}
#modal-manual-import .m-n-val:before{
  content:"";
  width:6px;
  height:6px;
  border-radius:999px;
  background: var(--brand); /* surchargé par catégories */
  opacity:.9;
}

/* Colonne droite : champ de saisie */
#modal-manual-import .m-right{
  grid-area:right;
}
#modal-manual-import .m-right .m-input{
  height: 50px;
  border-radius: 14px;
  text-align: right;
  font-weight: 900;

  background: var(--surface-2);
  border: 1px solid color-mix(in oklab, var(--text) 35%, transparent);
  color: var(--text);
}
#modal-manual-import .m-right .m-input::placeholder{
  color: var(--zi-placeholder, var(--muted));
  opacity:.9;
}
#modal-manual-import .m-right .m-input:focus{
  outline:none;
  border-color: color-mix(in oklab, var(--brand), black 10%);
  box-shadow: 0 0 0 4px var(--ring);
}

/* Hover (desktop) */
@media (hover:hover){
  #modal-manual-import .measure-row:hover{
    border-color: color-mix(in oklab, var(--brand), transparent 55%);
    transform: translateY(-1px);
    transition: transform .12s ease, border-color .12s ease;
  }
}

/* Desktop: 3 colonnes, norme au milieu */
@media (min-width: 721px){
  #modal-manual-import .measure-row{
    grid-template-columns: 0.8fr 1fr .8fr;
    grid-template-areas:
      "left norm right";
    align-items:center;
  }
  #modal-manual-import .m-left{ grid-area:left; }
  #modal-manual-import .m-mid{ grid-area:norm; padding-left:0; }
  #modal-manual-import .m-right{ grid-area:right; }
}

/* Petits ajustements */
#modal-manual-import .measure-list{
  margin-top: 6px;
}

/* =========================
   Thématisation par CATEGORIE
   - titre (before)
   - norme (chip + before)
   - pastille du symbole (.m-code::before)
   ========================= */

/* Base */
#modal-manual-import .measure-cat[data-cat*="Base"] .measure-cat-title:before,
#modal-manual-import .measure-cat[data-cat*="Base"] .m-n-val:before,
#modal-manual-import .measure-cat[data-cat*="Base"] .m-code::before{
  background: color-mix(in oklab, var(--cat-base-a), black 10%);
}
#modal-manual-import .measure-cat[data-cat*="Base"] .m-n-val{
  border-color: color-mix(in oklab, var(--cat-base-a), black 10%);
  background: color-mix(in oklab, var(--cat-base-a), var(--surface) 85%);
}

/* Major */
#modal-manual-import .measure-cat[data-cat*="Major"] .measure-cat-title:before,
#modal-manual-import .measure-cat[data-cat*="Major"] .m-n-val:before,
#modal-manual-import .measure-cat[data-cat*="Major"] .m-code::before{
  background: color-mix(in oklab, var(--cat-major-a), black 10%);
}
#modal-manual-import .measure-cat[data-cat*="Major"] .m-n-val{
  border-color: color-mix(in oklab, var(--cat-major-a), black 10%);
  background: color-mix(in oklab, var(--cat-major-a), var(--surface) 85%);
}

/* Nutriments */
#modal-manual-import .measure-cat[data-cat*="Nutr"] .measure-cat-title:before,
#modal-manual-import .measure-cat[data-cat*="Nutr"] .m-n-val:before,
#modal-manual-import .measure-cat[data-cat*="Nutr"] .m-code::before{
  background: color-mix(in oklab, var(--cat-nutrients-a), black 10%);
}
#modal-manual-import .measure-cat[data-cat*="Nutr"] .m-n-val{
  border-color: color-mix(in oklab, var(--cat-nutrients-a), black 10%);
  background: color-mix(in oklab, var(--cat-nutrients-a), var(--surface) 85%);
}

/* Minor */
#modal-manual-import .measure-cat[data-cat*="Minor"] .measure-cat-title:before,
#modal-manual-import .measure-cat[data-cat*="Minor"] .m-n-val:before,
#modal-manual-import .measure-cat[data-cat*="Minor"] .m-code::before{
  background: color-mix(in oklab, var(--cat-minor-a), black 10%);
}
#modal-manual-import .measure-cat[data-cat*="Minor"] .m-n-val{
  border-color: color-mix(in oklab, var(--cat-minor-a), black 10%);
  background: color-mix(in oklab, var(--cat-minor-a), var(--surface) 85%);
}

/* Polluants */
#modal-manual-import .measure-cat[data-cat*="Pollu"] .measure-cat-title:before,
#modal-manual-import .measure-cat[data-cat*="Pollu"] .m-n-val:before,
#modal-manual-import .measure-cat[data-cat*="Pollu"] .m-code::before{
  background: color-mix(in oklab, var(--cat-pollutants-a), black 10%);
}
#modal-manual-import .measure-cat[data-cat*="Pollu"] .m-n-val{
  border-color: color-mix(in oklab, var(--cat-pollutants-a), black 10%);
  background: color-mix(in oklab, var(--cat-pollutants-a), var(--surface) 85%);
}

/* Autres */
#modal-manual-import .measure-cat[data-cat*="Autre"] .measure-cat-title:before,
#modal-manual-import .measure-cat[data-cat*="Autre"] .m-n-val:before,
#modal-manual-import .measure-cat[data-cat*="Autre"] .m-code::before{
  background: color-mix(in oklab, var(--cat-autres-a), black 10%);
}
#modal-manual-import .measure-cat[data-cat*="Autre"] .m-n-val{
  border-color: color-mix(in oklab, var(--cat-autres-a), black 10%);
  background: color-mix(in oklab, var(--cat-autres-a), var(--surface) 85%);
}

/* Supprimer les flèches des <input type="number"> dans la modale */
#modal-manual-import .m-input::-webkit-outer-spin-button,
#modal-manual-import .m-input::-webkit-inner-spin-button{
  -webkit-appearance: none;
  margin: 0;
}
#modal-manual-import .m-input[type="number"]{
  -moz-appearance: textfield;
}

@media (max-width: 767px){
  #modal-manual-import .measure-row{
    display:flex !important;
    flex-direction:column !important;
    align-items:stretch !important;
    gap:10px !important;
  }

  #modal-manual-import .measure-row .m-mid{
    order: 3;
    width: 100% !important;
    display: flex;
    gap: 12px;
    align-items: center;
  }
  #modal-manual-import .measure-row .m-right{
    order: 2;
    align-self: stretch !important;
  }

  #modal-manual-import .measure-row .m-left{
    order: 1;
  }
}

/* ===== Bloc tendances catégories ICP ===== */

.trend-section {
  margin-top: 18px;
  padding: 18px 20px;
  border-radius: 14px;
  background: var(--surface);
  box-shadow: var(--shadow-md);
  border: 1px solid var(--line);
}

/* Header */
.trend-header {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 8px;
  margin-bottom: 14px;
}

.trend-title {
  font-size: 1rem;
  font-weight: 600;
  color: var(--text);
}

.trend-subtitle {
  font-size: 0.85rem;
  color: var(--muted);
}

/* Container des lignes */
.trend-rows {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

/* Chaque ligne catégorie */
.trend-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 8px 10px;
  border-radius: 10px;
  background: var(--surface-2);
  border: 1px solid color-mix(in oklab, var(--line), transparent 30%);
}

/* Label de la famille (Base, Major, Nutriments, etc.) */
.trend-label {
  font-size: 0.9rem;
  font-weight: 500;
  color: var(--text);
  display: flex;
  align-items: center;
  gap: 6px;
}

/* Petits pastilles couleur facultatives par famille
   (si tu veux t’en servir, à mettre dans le TPL) */
.trend-label-dot {
  width: 8px;
  height: 8px;
  border-radius: 999px;
  background: var(--cat-autres-a);
}

/* Badges à droite */
.trend-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  justify-content: flex-end;
}

/* Pillule de tendance (base) */
.trend-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 9px;
  border-radius: 999px;
  font-size: 0.78rem;
  line-height: 1.2;
  border: 1px solid transparent;
  white-space: nowrap;
}

/* Pastille ronde dans le badge */
.trend-dot {
  width: 7px;
  height: 7px;
  border-radius: 999px;
}

/* États : En amélioration / Stable / À corriger
   (classes ajoutées dans le TPL selon $trend.families.*.state) */

/* En amélioration */
.trend-pill--better {
  background: color-mix(in oklab, var(--ok), transparent 75%);
  border-color: color-mix(in oklab, var(--ok), transparent 55%);
  color: color-mix(in oklab, var(--ok), black 50%);
}
.trend-dot-better {
  background: var(--ok);
}

/* Stable */
.trend-pill--stable {
  background: color-mix(in oklab, var(--badge-bg), transparent 10%);
  border-color: color-mix(in oklab, var(--badge-bg), var(--line) 40%);
  color: var(--muted);
}
.trend-dot-stable {
  background: var(--muted);
}

/* À corriger */
.trend-pill--worse {
  background: color-mix(in oklab, var(--bad), transparent 78%);
  border-color: color-mix(in oklab, var(--bad), transparent 50%);
  color: color-mix(in oklab, var(--bad), black 35%);
}
.trend-dot-worse {
  background: var(--bad);
}

/* “Pas assez de données” (no_data) */
.trend-pill--empty {
  background: transparent;
  border-color: var(--line);
  color: var(--muted);
}
.trend-dot-empty {
  background: var(--muted);
  opacity: 0.4;
}

/* ===== Responsive ===== */

@media (max-width: 768px) {
  .trend-section {
    padding: 14px 12px;
  }
  .trend-header {
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
  }
  .trend-badges {
    justify-content: flex-start;
  }
}

.zoa-help-tend {
	margin-bottom: 15px
}

/* Bloc résumés par famille (Nutriments / Oligos / Polluants) */
.summary-block {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

/* Carte individuelle */
.summary-card {
  position: relative;
  padding: 10px 12px 11px;
  border-radius: 10px;
  background: var(--surface-2);
  box-shadow: 0 8px 20px rgba(15,23,42,.08);
  border: 1px solid rgba(148,163,184,.25);
}

/* Ligne colorée à gauche par famille */
.summary-card--nutrients {
  border-left: 4px solid var(--cat-nutrients-a);
}
.summary-card--trace {
  border-left: 4px solid var(--cat-minor-a);
}
.summary-card--pollutants {
  border-left: 4px solid var(--cat-pollutants-a);
}
.summary-card--base {
  border-left: 4px solid var(--cat-base-a);
}
.summary-card--major {
  border-left: 4px solid var(--cat-major-a);
}

/* Puce + label au-dessus du texte */
.summary-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 6px;
  font-size: 0.85rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .03em;
  color: var(--muted);
}

.summary-dot {
  width: 8px;
  height: 8px;
  border-radius: 999px;
  display: inline-block;
}

/* couleurs des petits points */
.summary-dot--nutrients {
  background: var(--cat-nutrients-a);
}
.summary-dot--trace {
  background: var(--cat-minor-a);
}
.summary-dot--pollutants {
  background: var(--cat-pollutants-a);
}
.summary-dot--base {
  background: var(--cat-base-a);
}
.summary-dot--major {
  background: var(--cat-major-a);
}

.summary-chip-label {
  line-height: 1.1;
}

/* Texte */
.summary-text {
  font-size: 0.9rem;
  line-height: 1.5;
  color: var(--muted);
}

/* Mobile : légère réduction */
@media (max-width: 640px) {
  .summary-card {
    padding: 9px 10px 10px;
  }
  .summary-text {
    font-size: 0.88rem;
  }
}

/* ===========================
   Empty state — ICP (FO)
   =========================== */

/* conteneur principal */
.zoa-empty-icp-body{
  margin-top: 12px;
  padding: 16px;
  border-radius: 12px;
  background: var(--surface-2);
  border: 1px solid rgba(148,163,184,.25);
  box-shadow: 0 8px 20px rgba(15,23,42,.08);
  text-align: center;
  display: grid;
  gap: 10px;
  justify-items: center;
}

/* on neutralise l'aspect Bootstrap “alert” pour coller au thème */
.zoa-empty-icp-body .alert{
  margin: 0 !important;
  width: 100%;
  max-width: 720px;
  padding: 14px 14px 12px;
  border-radius: 12px;
  border: 1px solid rgba(148,163,184,.25);
  background: transparent;
  color: var(--text);
  box-shadow: none;
}

/* titre / message */
.zoa-empty-icp-body .alert strong{
  display: block;
  font-weight: 900;
  font-size: 16px;
  letter-spacing: .2px;
  margin-bottom: 6px;
}

/* actions : centrées et responsive */
.zoa-empty-icp-body .actions{
  margin-top: 12px !important;
  display: flex !important;
  gap: 10px !important;
  flex-wrap: wrap !important;
  justify-content: center !important;
  align-items: center !important;
}

/* boutons : même taille/alignement, pas trop larges */
.zoa-empty-icp-body .actions .btn{
  min-width: 220px;
  justify-content: center;
}

/* note de bas de bloc */
.zoa-empty-icp-note{
  width: 100%;
  max-width: 720px;
  padding: 10px 14px;
  border-radius: 12px;
  border: 1px dashed rgba(148,163,184,.28);
  background: rgba(148,163,184,.06);
  color: var(--muted);
  font-size: 13px;
  line-height: 1.35;
}

.no-icp {
	gap: 0 !important;
    text-align: center;
    flex-direction: column;
    align-items: center !important;
    justify-content: center;
}

/* mobile */
@media (max-width: 520px){
  .zoa-empty-icp-body{
    padding: 14px;
    gap: 8px;
  }
  .zoa-empty-icp-body .actions .btn{
    width: 100%;
    min-width: 0;
  }
}

/* =========================
   Carte META ICP compacte
   ========================= */

.icp-meta-card.icp-meta-card--compact {
  padding: 10px 14px;
  border-radius: 14px;
  background: var(--surface-2);
  border: 1px solid var(--line);
  box-shadow: var(--card-shadow);
  color: var(--text);
  font-size: 13px;
}

/* Lignes de la carte */
.icp-meta-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.icp-meta-row--top {
  margin-bottom: 6px;
}

.icp-meta-row--middle {
  margin-top: 4px;
  padding-top: 6px;
  padding-bottom: 4px;
  border-top: 1px dashed rgba(148,163,184,.4);
}

/* Bloc gauche du header (Laboratoire) */
.icp-meta-top-left {
  display: flex;
  flex-direction: row;
  gap: 9px;
}

.icp-meta-kicker {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--muted);
  /* vertical-align: middle; */
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 32px;
}

.icp-meta-lab {
  font-size: 14px;
  font-weight: 600;
}

/* Bloc droit du header (badge + partage) */
.icp-meta-top-right {
  display: flex;
  align-items: center;
  gap: 10px;
}

/* Badges labo */
.icp-meta-badge {
  padding: 2px 10px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .06em;
  text-transform: uppercase;
  background: var(--badge-bg);
  border: 1px solid color-mix(in oklab, var(--brand), black 20%);
  color: var(--brand-ink);
  white-space: nowrap;
}

.icp-meta-badge--manual {
  background: color-mix(in oklab, var(--ok), black 80%);
  border-color: var(--ok);
  color: #bbf7d0;
}

.icp-meta-badge--zoa {
  background: color-mix(in oklab, var(--brand), black 70%);
  border-color: var(--brand);
  color: var(--brand-ink);
}

/* Partage compact (icônes) */
.icp-meta-share-compact {
  display: flex;
  align-items: center;
  gap: 6px;
}

.icp-meta-share-label {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--muted);
}

.icp-meta-share-icons {
  display: inline-flex;
  gap: 4px;
}

.icp-meta-top-left .icp-meta-badge--lab {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  min-width: 64px;
  min-height: 44px;
  padding: 6px 6px;
  border-radius: 14px;
  background: #FFF;
  border: 1px solid var(--line);
  box-sizing: border-box;
  max-height: none;
  width: auto;
  height: auto;
  overflow: visible;
  gap: 8px;
}
.icp-meta-top-left .icp-meta-badge--lab .lab-logo {
  display: block;
  width: auto;
  height: 45px;
  max-width: none;
  object-fit: contain;
  flex: 0 0 auto;
}

span.icp-lab-name {
    color: var(--brand);
}

/* Boutons d’icônes (email / WA / FB / X / natif) */
.icp-share-icon-btn {
  width: 24px;
  height: 24px;
  border-radius: 999px;
  border: 1px solid rgba(148,163,184,.6);
  background: rgba(15,23,42,.6);
  color: var(--text);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  cursor: pointer;
  text-decoration: none;
  transition: background .15s ease, border-color .15s ease, transform .1s ease;
}

[data-theme="light"] .icp-share-icon-btn {
  background: #ffffff;
}

.icp-share-icon-btn:hover {
  border-color: var(--brand);
  background: color-mix(in oklab, var(--brand), black 80%);
  transform: translateY(-1px);
}

/* bouton “natif” affiché seulement si navigator.share présent (JS) */
.icp-share-icon-btn--native {
  display: none;
}

/* =========================
   ICP meta top row — mobile
   ========================= */
@media (max-width: 520px){

  /* 1 ligne: gauche (labo) + droite (partage) */
  .icp-meta-row--top{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:10px;
    flex-wrap:nowrap;
  }

  .icp-meta-top-left{
    min-width:0;              /* autorise l’ellipsis */
    flex: 1 1 auto;
    /* flex-direction: column; */
    /* gap: 0; */
  }

  .icp-meta-kicker{
    font-size: 11px;
    opacity: .85;
    line-height: 1.1;
    display: none;
  }

  .icp-meta-lab{
    font-size: 14px;
    font-weight: 800;
    line-height: 1.15;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;  /* évite que ça pousse les icônes */
    max-width: 100%;
  }

  .icp-meta-top-right{
    flex: 0 0 auto;
    display:flex;
    align-items:center;
    gap:8px;
    white-space: nowrap;
    justify-content: center;
  }

  /* On supprime le badge sur mobile (dont Zoanthus Lab) */
  .icp-meta-badge,
  .icp-meta-badge--zoa,
  .icp-meta-badge--manual{
    display:none !important;
  }

  /* Partage compact en une ligne */
  .icp-meta-share-compact{
    display:flex;
    align-items:center;
    gap:8px;
  }

  /* Optionnel: on enlève le libellé “Partager” pour gagner de la place */
  .icp-meta-share-label{
    display:none;
  }

  .icp-meta-share-icons{
    display:flex;
    align-items:center;
    gap:6px;
  }

  /* Icônes un poil plus petites */
  .icp-meta-share-icons .btn.ghost{
    width: 34px;
    height: 34px;
    padding: 0;
    border-radius: 10px;
  }

  /* Au cas où : lottie size (si tu le gères en CSS) */
  .icp-meta-share-icons .has-lottie-share{
    --lottie-size: 26px;
  }
}


/* =========================
   Pills d’infos (ligne du milieu)
   ========================= */

.icp-meta-pill {
  flex: 1 1 0;
  min-width: 0;
  padding: 4px 8px;
  border-radius: 8px;
  background: var(--surface-2);
  box-shadow: 0 8px 20px rgba(15, 23, 42, .08);
    border: 1px solid rgba(148, 163, 184, .25);	
}

[data-theme="light"] .icp-meta-pill {
  background: #f8fafc;
}

.icp-meta-pill-label {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--muted);
  margin-bottom: 1px;
}

.icp-meta-pill-value {
  font-size: 12px;
  font-weight: 500;
  color: var(--text);
  white-space: nowrap;
}

/* Rapport : valeur avec icône + texte */
.icp-meta-pill--rapport {
  /* rien de spécial pour l’instant, même flex que les autres */
}

.icp-meta-pill-value--rapport {
  display: flex;
  align-items: center;
  gap: 8px;
  white-space: normal;   /* autoriser le wrap si besoin */
}

/* Sous-bloc fichier dans le pill Rapport */
.icp-meta-file-icon {
  width: 22px;
  height: 22px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: rgba(59,130,246,.16);
  border: 1px solid rgba(59,130,246,.7);
  font-size: 14px;
}

.icp-meta-pill-file-name {
  font-size: 12px;
  font-weight: 500;
}

.icp-meta-pill-file-link {
  font-size: 11px;
  color: var(--info);
  text-decoration: none;
}

.icp-meta-pill-file-link:hover {
  text-decoration: underline;
}

/* =========================
   Responsive
   ========================= */


@media (max-width: 640px) {
  .icp-meta-row--middle {
    flex-direction: column;
    align-items: stretch;
  }
  .icp-meta-pill {
    width: 100%;
  }
}

.has-lottie-share {
 padding: 0.1rem;
}

.barcode-row{
  display:flex;
  gap:10px;
  align-items:stretch;
  flex-wrap: wrap;
}

.barcode-row .form-control{
  flex:1 1 auto;
  min-width:160px;
}

.barcode-row .btn{
  flex:0 0 auto;
  white-space:nowrap;
}

  .barcode-row .btn {
flex: 1 1 calc(50% - 5px);
width: calc(50% - 5px);
justify-content: center;
    }

/* Mobile : input full width, puis 2 boutons sur 1 ligne en 50/50 */
@media (max-width:520px){
  .barcode-row{
    flex-wrap:wrap;
  }

  /* l'input prend toute la ligne */
  .barcode-row .form-control{
    flex:1 1 100%;
    min-width:0;
  }

  /* les 2 boutons partagent la largeur */
  .barcode-row .btn{
    flex:1 1 calc(50% - 5px);
    width:calc(50% - 5px);
    justify-content:center;
  }
}

@media (max-width:520px){
  .sample-aq-row{
    flex-wrap:wrap; /* on wrap si vraiment pas la place */
  }

  .sample-aq-current{
    min-width: 0;           /* autorise l'ellipsis */
    overflow:hidden;
  }
  .sample-aq-name{
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
    display:block;
    max-width:100%;
  }
  .sample-aq-vol{
    flex:0 0 auto;
    white-space:nowrap;
    margin-left:6px;
    opacity:.75;
  }
}


@media (max-width: 520px){
  .icp-meta-pill{
    display:flex;
    align-items:center;          /* centrage vertical */
    justify-content:space-between;
    gap:10px;
    flex-wrap:nowrap;
  }

  .icp-meta-pill-label{
    flex: 0 0 auto;
    white-space: nowrap;
  }
}

/* 1) On neutralise le grid imposé par .acc summary UNIQUEMENT pour nos summaries */
.acc summary.zoa-acc-sum{
  display:flex !important;
  flex-direction:column !important;  /* ligne1 puis ligne2 */
  align-items:stretch !important;
  gap:6px !important;
  grid-template-columns: none !important; /* au cas où */
}

/* 2) Ligne 1 : titre à gauche + pill à droite */
.acc summary.zoa-acc-sum .zoa-acc-sum--line1{
  display:flex !important;
  align-items:center !important;
  justify-content:space-between !important;
  gap:12px !important;
  flex-wrap:nowrap !important;
  min-width:0 !important;
}

/* Titre ellipsis */
.acc summary.zoa-acc-sum .zoa-acc-sum--line1 .acc-title{
  flex:1 1 auto !important;
  min-width:0 !important;
  white-space:nowrap !important;
  overflow:hidden !important;
  text-overflow:ellipsis !important;
}

/* Pill ne doit jamais passer à la ligne */
.acc summary.zoa-acc-sum .zoa-acc-sum--line1 .sum-right,
.acc summary.zoa-acc-sum .zoa-acc-sum--line1 .pill{
  flex:0 0 auto !important;
  white-space:nowrap !important;
  margin-left:0 !important;
}

/* 3) Ligne 2 : valeurs sous le titre */
.acc summary.zoa-acc-sum .zoa-acc-sum--line2{
  display:flex !important;
  align-items:baseline !important;
  gap:10px !important;
  flex-wrap:wrap !important;
}

a.pill.warn.zoa-chip::before, a.pill.bad.zoa-chip::before {
    content: none;
}

.title.charts-title-mobile {
  display: flex;
  align-items: center;          
  justify-content: space-between;
  gap: .75rem;
  flex-direction: unset;
}

.title.charts-title-mobile .actions {
  margin-left: auto;
  display: flex;
  align-items: center;
  width: unset;	
}

/* =========================================================
   ZOAICP – Dosing rows UI (maquette) — VERSION THEME TOKENS
   ✅ Reprend tes variables (light/dark via [data-theme])
   ========================================================= */

/* (optionnel) helpers locaux, pour éviter "surface-soft" etc */
:root{
  --zoa-radius-lg:16px;
  --zoa-radius-md:12px;
}

/* ---------- Liste ---------- */
.zoa-dosing-list{
  display:flex;
  flex-direction:column;
  gap:14px;
}

/* ---------- Row container ---------- */
.zoa-dosing-row{
  background:var(--surface);
  border-radius:var(--zoa-radius-lg);
  box-shadow:var(--card-shadow);
  padding:14px 14px 0;
  display:flex;
  flex-direction:column;
  gap:10px;
  border:1px solid color-mix(in oklab, var(--border), transparent 25%);
}

/* ---------- Top area ---------- */
.zoa-dosing-row .zd-main{
  display:flex;
  gap:12px;
  align-items:flex-start;
  justify-content:space-between;
  flex-wrap:wrap;
}

.zoa-dosing-row .zd-el-head{
  display:flex;
  align-items:center;
  gap:10px;
  margin-bottom:4px;
}

/* Chip element : utilise tes tokens chip */
.zoa-dosing-row .chip{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:34px;
  height:34px;
  border-radius:999px;
  font-size:13px;
  font-weight:700;
  color:var(--chip-ink);
  background:var(--chip-bg);
  border:1px solid var(--chip-border);
  flex-shrink:0;
}

/* Title + delta + badge */
.zoa-dosing-row .zd-el-title{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:6px;
  font-size:14px;
  font-weight:700;
  min-width:0;
}

.zoa-dosing-row .zd-el-title .el-name{
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
  max-width:min(520px, 72vw);
}

.zoa-dosing-row .zd-el-title .delta{
  font-weight:500;
  font-size:12px;
  color:var(--muted);
}

/* Badge d’état : ok / warn / bad (tes couleurs) */
.zoa-dosing-row .range-badge{
  font-size:11px;
  padding:2px 7px;
  border-radius:999px;
  border:1px solid transparent;
  text-transform:uppercase;
  letter-spacing:.03em;
  font-weight:800;
  white-space:nowrap;
}

.zoa-dosing-row .range-badge.in{
  color:var(--ok);
  background:color-mix(in oklab, var(--ok), transparent 85%);
  border-color:color-mix(in oklab, var(--ok), transparent 70%);
}
.zoa-dosing-row .range-badge.warn{
  color:var(--warn);
  background:color-mix(in oklab, var(--warn), transparent 86%);
  border-color:color-mix(in oklab, var(--warn), transparent 70%);
}
.zoa-dosing-row .range-badge.bad,
.zoa-dosing-row .range-badge.out{
  color:var(--bad);
  background:color-mix(in oklab, var(--bad), transparent 88%);
  border-color:color-mix(in oklab, var(--bad), transparent 72%);
}

/* Product line */
.zoa-dosing-row .zd-el-product{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:8px;
  font-size:.85rem;
  color:var(--muted);
  min-width:0;
  flex-wrap:nowrap;	
}

.zoa-dosing-row .zd-el-product .prod-text,
.zoa-dosing-row .zd-el-product .prod-sub{
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
  max-width:420px;
}

/* Bouton "Modifier" : compatible .btn ou .zoa-action-btn */
.zoa-dosing-row .btn,
.zoa-dosing-row .zoa-action-btn{
  border-radius:999px;
  border:1px solid color-mix(in oklab, var(--border), black 10%);
  background:var(--surface-2);
  padding:6px 10px;
  font-size:11px;
  line-height:1.1;
  cursor:pointer;
  color:var(--brand-ink);
  display:inline-flex;
  align-items:center;
  gap:6px;
  transition:background .15s,border-color .15s,transform .08s, box-shadow .15s;
  text-decoration:none;
}

.zoa-dosing-row .btn:hover,
.zoa-dosing-row .zoa-action-btn:hover{
  background:color-mix(in oklab, var(--brand), var(--surface-2) 86%);
  border-color:color-mix(in oklab, var(--brand), var(--border) 60%);
}

.zoa-dosing-row .btn:active,
.zoa-dosing-row .zoa-action-btn:active{
  transform:scale(.97);
}

.zoa-dosing-row .btn:focus-visible,
.zoa-dosing-row .zoa-action-btn:focus-visible{
  outline:none;
  box-shadow:0 0 0 3px color-mix(in oklab, var(--brand), transparent 72%);
}

/* Right side (KPIs + prio) */
.zoa-dosing-row .zd-main-right{
  display:flex;
  align-items:stretch;
  gap:10px;
  flex:0 0 auto;
}

.zoa-dosing-row .zd-kpis{
  display:flex;
  flex-direction:row;
  gap:10px;
  align-items:flex-start;
  flex-wrap:wrap;
}

.zoa-dosing-row .zd-kpi{
    padding: 6px 10px;
    border-radius: 999px;
    background: var(--surface-2);
    border: 1px solid
 color-mix(in oklab, var(--border), transparent 25%);
    min-width: 86px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.zoa-dosing-row .zd-kpi-label{
  font-size:.85rem;
  color:var(--muted);
  line-height: 1.15;	
}

.zoa-dosing-row .zd-kpi-value{
  font-size:13px;
  font-weight:800;
  color:var(--text);
  line-height: 1.5;	
}

.zoa-dosing-row .zd-kpi-note{
  font-size:.85rem;
  color:var(--muted);
  margin-top:3px;
}

/* Priority badge */
.zoa-dosing-row .zd-prio{
  display:flex;
  align-items:flex-start;
}

.zoa-dosing-row .prio-badge{
  display:inline-flex;
  align-items:center;
  gap:6px;
  padding:6px 10px;
  border-radius:999px;
  background:color-mix(in oklab, var(--text), transparent 6%);
  color:color-mix(in oklab, var(--surface), white 0%);
  font-size:.85rem;
  font-weight:700;
  white-space:nowrap;
  box-shadow:0 6px 14px rgba(2,6,23,.12);
}

/* petit point: par défaut brand, et sur classes prio-* tu peux recolorer si tu veux */
.zoa-dosing-row .prio-badge .dot{
  width:7px;
  height:7px;
  border-radius:999px;
  background:var(--ok);
}

/* ---------- Progress block ---------- */
.zoa-dosing-row .zd-progress{
  padding-top:6px;
  border-top:1px dashed var(--line);
  display:flex;
  flex-direction:column;
  gap:8px;
}

.zoa-dosing-row .zd-progress-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  flex-wrap:wrap;
  font-size:.85rem;
}

.zoa-dosing-row .zd-progress-title{
  font-weight:600;
}

.zoa-dosing-row .dose-remaining{
  font-size:.85rem;
  color:var(--muted);
  display:flex;
  gap:4px;
  align-items:center;
}

.zoa-dosing-row .dose-remaining .dr-label{
  font-weight:700;
  color:var(--text);
}
.zoa-dosing-row .dose-remaining .dr-value{
  font-weight:900;
  color:var(--muted);
}

/* Gauge */
.zoa-dosing-row .zd-gauge{
  display:flex;
  align-items:center;
  gap:10px;
  font-size:12px;
}

.zoa-dosing-row .zd-gauge-track{
  flex:1;
  height:17px;
  border-radius:999px;
  background:color-mix(in oklab, var(--border), transparent 72%);
  overflow:hidden;
  position:relative;
  border: 1px solid var(--line);
  padding: 2px;
  background: color-mix(in oklab, var(--surface-2), transparent 0%);
}

.zoa-dosing-row .zd-gauge-fill{
  height:100%;
  width:0%;
  border-radius:999px;
  background:linear-gradient(90deg,var(--g1b),var(--g1a));
  transition:width .25s ease-out;
}

.zoa-dosing-row .zd-gauge-percent{
  min-width:40px;
  text-align:right;
  font-variant-numeric:tabular-nums;
  color:var(--muted);
  font-size:12px;
}

/* ---------- Responsive ---------- */
@media (max-width: 768px){
	
	.zoa-dosing-row .zd-el-head {
    margin-bottom: 13px;
    border-bottom: 1px dashed var(--line2);
    padding-bottom: .5rem;
}
	
	.zd-el-head {
  display: flex;
  align-items: center;
  gap: 8px;
}

/* La chip reste à gauche, taille auto */
.zd-el-head .chip {
  flex: 0 0 auto;
}

/* Le bloc titre prend tout l’espace, texte centré */
.zd-el-head .zd-el-title {
  position: relative;
  flex: 1 1 auto;
  text-align: center;
  display: inline-block; /* ou block si tu préfères */
}

/* Nom + delta : petit espace entre les deux (optionnel) */
.zd-el-head .zd-el-title .el-name {
  margin-right: 6px;
}

/* Badge totalement à droite, centré verticalement */
.zd-el-head .zd-el-title .range-badge {
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
}

/* Optionnel : éviter que le texte passe sous le badge sur très petit écran */
.zd-el-head .zd-el-title {
  padding-right: 72px; /* à ajuster à la largeur du badge */
}
	
	.zoa-dosing-row .zd-kpi-note {
    justify-content: center;
    text-align: center;
    min-width: auto;
}
	
  .zoa-dosing-row{
    padding:12px 10px 14px;
    border-radius:var(--zoa-radius-md);
  }
  .zoa-dosing-row .zd-main{
    flex-direction:column;
    align-items:stretch;
  }
  .zoa-dosing-row .zd-main-right{
    justify-content:center;
  }
  .zoa-dosing-row .zd-el-product .prod-text,
  .zoa-dosing-row .zd-el-product .prod-sub{
    flex: 1 1 auto;
        min-width: 0;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        max-width: 62vw;
  }
  .zoa-dosing-row .zd-kpis{
    width:100%;
    justify-content:space-between;
  }
  .zoa-dosing-row .zd-kpi{
    flex:1 1 0;
    text-align:center;
    min-width:auto;
  }
  .zoa-dosing-row .zd-days{
    flex-direction:column;
    align-items:flex-start;
  }
  .zoa-dosing-row .days-strip{
    justify-content:flex-start;
  }
	.zd-el-title.result {
        padding-right: 0;
}
}
/* Tiroir: prendre toute la largeur (évite le shrink-to-fit) */
.zoa-dosing-row .row-expand,
.zoa-dosing-row .row-expand-inner,
.zoa-dosing-row .zd-progress{
  width: 100%;
  max-width: none;
}

/* Si un parent est en flex, on force l’expansion */
.zoa-dosing-row .row-expand,
.zoa-dosing-row .row-expand-inner,
.zoa-dosing-row .zd-progress{
  flex: 1 1 100%;
  min-width: 0;
}

/* Si tu avais un ancien layout en grid/colonnes qui reste actif */
.zoa-dosing-row .row-expand-grid,
.zoa-dosing-row .gcol,
.zoa-dosing-row .rcol{
  width: 100%;
  max-width: none;
}


.zd-kpis{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
}

.zd-kpi{
  padding:6px 10px;
  border-radius:999px;
  background:var(--surface-2);
  border:1px solid var(--line);
}

/* Mobile */
@media (max-width: 520px){
  .zd-kpi{
    flex: 1 1 calc(50% - 10px); /* 2 par ligne */
    min-width: 0;
    text-align:center;
  }
  .zd-kpi:nth-child(3){
    flex-basis: 100%;           /* la 3e en pleine largeur */
  }
}


/* Barre filtres */
.zoa-dosing-filters{
  display:grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap:10px;
  align-items:stretch;
  margin: 10px 0 14px;
}

/* Boutons pills */
.zoa-dosing-filters .btn{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  padding:8px 12px;
  border-radius:999px;
  border:1px solid var(--line);
  background:var(--surface-2);
  color:var(--text);
  font-weight:700;
  font-size:12px;
  text-transform:uppercase;
  letter-spacing:.03em;
  line-height:1;
  min-width:0;
  white-space:nowrap;
}

.zoa-dosing-filters .btn:hover{
  background:var(--row-hover);
  color:var(--text)	
}

/* État actif */
.zoa-dosing-filters .btn.is-active{
  background: color-mix(in oklab, var(--brand), var(--surface) 86%);
  border-color: color-mix(in oklab, var(--brand), var(--line) 40%);
  color: var(--brand-ink);
}

/* Compteur (badge) */
.zoa-dosing-filters .count{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-width:22px;
  height:18px;
  padding:0 6px;
  border-radius:999px;
  font-size:11px;
  font-weight:800;
  background: var(--badge-bg);
  color: var(--brand-ink);
  border:1px solid var(--line);
}

.zoa-dosing-filters-wrap{
  display:flex;
  align-items:center;
  gap:12px;
}

.zoa-dosing-filters-label{
  font-size:12px;
  font-weight:800;
  text-transform:uppercase;
  letter-spacing:.04em;
  color:var(--muted);
  white-space:nowrap;
}

/* on enlève le margin ici (déjà sur le wrap) */
.zoa-dosing-filters{
  margin:0;
  flex:1 1 auto;
}

/* Mobile : 2 colonnes, et le 1er bouton pleine largeur */
@media (max-width: 520px){
  .zoa-dosing-filters{
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .zoa-dosing-filters .btn[data-filter="out"], button.zoa-element-all {
    grid-column: 1 / -1;
  }
  .zoa-dosing-filters .btn{
    justify-content:center;
    font-size:11px;
    padding:8px 10px;
  }
	  .zoa-dosing-filters-wrap{
    flex-direction:column;
    align-items:stretch;
    gap:8px;
  }
  .zoa-dosing-filters-label{
    text-align:left;
  }
}
}

/* padding bas pour loger le bouton */
.dosing-row.zoa-dosing-row {
  position: relative;
  padding-bottom: 32px;
}

.zd-collapse-trigger {
  position: absolute;
  left: 50%;
  bottom: 8px;
  transform: translateX(-50%);
}

/* Par défaut : flèche vers le BAS (fermée) */
.dosing-row.zoa-dosing-row .dosing-chevron {
  transition: transform 0.2s ease;
}

/* Quand la ligne est ouverte : flèche vers le HAUT */
.dosing-row.zoa-dosing-row .collapse-btn[aria-expanded="true"] .dosing-chevron {
  transform: rotate(-180deg); /* > devient ^ */
}


/* ==========================================================
   ZOAICP — Dosing days (compact pill + state) — v2
   - Toute la carte est cliquable (label)
   - "À faire / Fait" bascule au check
   - Responsive: mobile (scroll), tablette/desktop (wrap)
   - Robuste: fallback + :has() si wrapper / rendu différent
   ========================================================== */

.zd-days{
  display:block;
}

/* --- Strip: mobile = scroll horizontal, tablette/desktop = wrap --- */
.zd-days__strip{
  display:flex;
  gap:10px;
  overflow:auto;
  padding: 2px 2px 40px;
  -webkit-overflow-scrolling: touch;
  scroll-snap-type: x mandatory;
  justify-content: center;
  text-align: center; 	
}

.zd-days__strip::-webkit-scrollbar{ height: 8px; }
.zd-days__strip::-webkit-scrollbar-thumb{
  background: color-mix(in oklab, var(--line), transparent 20%);
  border-radius:999px;
}

/* --- Item container (label) --- */
.zd-day{
  position:relative;
  display:block;
  min-width: 170px;
  scroll-snap-align: start;
  cursor:pointer;
  user-select:none;
  -webkit-tap-highlight-color: transparent;
}

/* --- Hide checkbox but keep it focusable --- */
.zd-day__check{
  position:absolute;
  inset:0;
  opacity:0;
  pointer-events:none;
}

/* --- Pill (full width clickable surface) --- */
.zd-day__pill{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;

  width:100%;
  padding:5px 12px;

  border-radius:14px;
  border:1px solid var(--line);
  background: var(--surface);

  transition:
    transform .08s ease,
    border-color .12s ease,
    box-shadow .12s ease,
    background .12s ease;
}

.zd-day:hover .zd-day__pill{
  transform: translateY(-1px);
  border-color: color-mix(in oklab, var(--brand), var(--line) 60%);
  box-shadow: 0 10px 26px rgba(15,23,42,.09);
}

/* --- Left block: Jx + dose --- */
.zd-day__left{
  display:flex;
  align-items:center;
  gap:10px;
  min-width: 0; /* allow ellipsis */
}

/* Compact J badge */
.zd-day__j{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:4px 8px;
  border-radius:999px;
  border:1px solid var(--line);
  background: color-mix(in oklab, var(--surface-2), transparent 0%);
  font-weight: 800;
  font-size: 12px;
  line-height: 1;
  flex: 0 0 auto;
}

/* Dose */
.zd-day__dose{
  font-weight: 900;
  font-size: 14px;
  letter-spacing: -0.01em;
  color: var(--text);
  white-space: nowrap;
  overflow:hidden;
  text-overflow: ellipsis;
}

/* --- State pill (À faire / Fait) --- */
.zd-day__state{
  flex: 0 0 auto;
  display:inline-flex;
  align-items:center;
  padding:4px 8px;
  border-radius:999px;
  border:1px solid var(--line);
  font-size: 12px;
  font-weight: 800;
  color: var(--muted);
  background: color-mix(in oklab, var(--surface-2), transparent 0%);
  white-space: nowrap;
}

/* Default shows todo only */
.zd-day__done{ display:none; }

/* --- FOCUS (accessibilité clavier) --- */
.zd-day:focus-within .zd-day__pill{
  outline: 2px solid color-mix(in oklab, var(--brand), transparent 55%);
  outline-offset: 2px;
}

/* ==========================================================
   Checked state — fallback adjacent sibling (input + pill)
   (marche si .zd-day__pill est immédiatement après l'input)
   ========================================================== */
.zd-day__check:checked + .zd-day__pill{
  border-color: color-mix(in oklab, var(--accent), var(--line) 30%);
  background: color-mix(in oklab, var(--accent), white 92%);
}

.zd-day__check:checked + .zd-day__pill .zd-day__j{
  border-color: color-mix(in oklab, var(--accent), var(--line) 35%);
  background: color-mix(in oklab, var(--accent), white 90%);
}

.zd-day__check:checked + .zd-day__pill .zd-day__state{
  border-color: color-mix(in oklab, var(--accent), var(--line) 35%);
  background: color-mix(in oklab, var(--accent), white 90%);
  color: color-mix(in oklab, var(--text), var(--brand) 25%);
}

.zd-day__check:checked + .zd-day__pill .zd-day__todo{ display:none; }
.zd-day__check:checked + .zd-day__pill .zd-day__done{ display:inline; }

/* ==========================================================
   Checked state — robuste via :has() (si wrapper/rendu diff)
   ========================================================== */
@supports(selector(.zd-day:has(input:checked))){
  .zd-day:has(.zd-day__check:checked) .zd-day__pill{
background: 
color-mix(in srgb, var(--ok) 16%, transparent);
        color: var(--muted);
  }
  .zd-day:has(.zd-day__check:checked) .zd-day__j{
        border: 1px solid var(--line);
        background: 
 color-mix(in oklab, var(--surface-2), transparent 0%);
  }
  .zd-day:has(.zd-day__check:checked) .zd-day__state{
        background: 
color-mix(in srgb, var(--ok) 16%, transparent);
        color: var(--text);
  }
  .zd-day:has(.zd-day__check:checked) .zd-day__todo{ display:none; }
  .zd-day:has(.zd-day__check:checked) .zd-day__done{ display:inline; }
}

/* ==========================================================
   Responsive tweaks
   ========================================================== */

/* Petit mobile : on compacte + l'état passe dessous si besoin */
@media (max-width: 460px){
	.zd-days__strip {
    padding: 2px 2px 4px;
    flex-direction: column;
	gap: 4px;	
	}
}

/* Tablette et + : on préfère wrap plutôt que scroll */
@media (min-width: 768px){
  .zd-days__strip{
    overflow: visible;
    flex-wrap: wrap;
    scroll-snap-type: none;
  }
}


#barcode-video{
  width:100%;
  height: clamp(160px, 28vh, 240px);
  display:block;
  background:#000;
  object-fit: cover;
}

/* Summary compact (mobile) */
.zoa-acc-item--compact > summary.zoa-acc-sum{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding: 12px 10px 30px 10px;
}

.zoa-acc-item--compact .sum-left{
  min-width:0;
}

.zoa-acc-item--compact .acc-title{
  font-weight:700;
  line-height:1.15;
  margin:0 0 6px 0;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}

.zoa-acc-item--compact .sum-meta{
  display:flex;
  align-items:baseline;
  gap:10px;
  opacity:.9;
  font-size:.92rem;
}

.zoa-acc-item--compact .sum-val .unit{
  opacity:.85;
  margin-left:4px;
  font-weight:600;
}

.zoa-acc-item--compact .sum-ideal{
  font-size: 11px;
    letter-spacing: .06em;
    color: var(--muted);
}

.zoa-acc-item--compact .sum-right{
  display:flex;
  align-items:center;
  gap:10px;
  flex-shrink:0;
  margin-right: 17px;	
}

/* Mesure + bouton modifier sur une ligne */
.zoa-acc-item--compact .row-inline{
  display:flex;
  align-items:center;
  gap:10px;
  flex-wrap:wrap;
}

/* Actions compactes */
.actions--compact{
  display:flex;
  gap:10px;
  margin-top:10px;
}
.actions--compact .btn.xs{
  padding:8px 10px;
  font-size:.9rem;
}

.col-sm-6.mb-2.alert.zoa-chip-box.attention {
    border-left: 4px solid var(--cat-nutrients-a) !important;
}

.col-sm-6.mb-2.alert.zoa-chip-box.critical {
    border-left: 4px solid var(--cat-pollutants-a) !important;
}

span.pill.bad.title {
    border-left: 4px solid var(--cat-pollutants-a) !important;
    border: 1px solid var(--cat-pollutants-a);
}

span.pill.warn.title {
    border-left: 4px solid var(--cat-nutrients-a) !important;
    border: 1px solid var(--cat-nutrients-a);
}

/* 1) On neutralise le grid imposé par .acc summary UNIQUEMENT pour nos summaries */
.acc summary.zoa-acc-sum{
  display:flex !important;
  flex-direction:column !important;  /* ligne1 puis ligne2 */
  align-items:stretch !important;
  gap:6px !important;
  grid-template-columns: none !important; /* au cas où */
}

/* 2) Ligne 1 : titre à gauche + pill à droite */

/* Header type DosingLab dans l'accordéon Analyses */
.zoa-acc-sum .zd-el-head{
  display:grid;
  grid-template-columns:auto 1fr auto;
  align-items:center;
  gap:10px;
  width:100%;
}

.zoa-acc-sum .zd-el-title{
  min-width:0;
  text-align:center;
}

.zoa-acc-sum .zd-el-title .el-name{
  display:inline-block;
  max-width:100%;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
  font-weight:800;
  line-height:1.1;
}

.zoa-acc-sum .zd-el-right{
  display:flex;
  align-items:center;
  justify-content:flex-end;
  gap:8px;
  white-space:nowrap;
}


.zoa-acc-sum .zd-el-title .delta{
  font-size:12px;
  opacity:.9;
  white-space:nowrap;
}

/* Badge plage */
.zoa-acc-sum .range-badge{
  font-size:11px;
  font-weight:800;
  padding:3px 8px;
  border-radius:999px;
  white-space:nowrap;
  border:1px solid transparent;
}

/* Couleurs (adapte si tu as déjà ok/warn/out ailleurs) */
.zoa-acc-sum .range-badge.ok{
  color: var(--ok);
  background: color-mix(in oklab, var(--ok), transparent 88%);
  border-color: color-mix(in oklab, var(--ok), transparent 72%);
}
.zoa-acc-sum .range-badge.warn{
  color: var(--warn);
  background: color-mix(in oklab, var(--warn), transparent 88%);
  border-color: color-mix(in oklab, var(--warn), transparent 72%);
}
.zoa-acc-sum .range-badge.out{
  color: var(--bad);
  background: color-mix(in oklab, var(--bad), transparent 88%);
  border-color: color-mix(in oklab, var(--bad), transparent 72%);
}
.zoa-acc-sum .range-badge.nd{
  opacity:.75;
}


.acc summary.zoa-acc-sum .zoa-acc-sum--line1{
  display:flex !important;
  align-items:center !important;
  justify-content:space-between !important;
  gap:12px !important;
  flex-wrap:nowrap !important;
  min-width:0 !important;
}

/* Titre ellipsis */
.acc summary.zoa-acc-sum .zoa-acc-sum--line1 .acc-title{
  flex:1 1 auto !important;
  min-width:0 !important;
  white-space:nowrap !important;
  overflow:hidden !important;
  text-overflow:ellipsis !important;
}

/* Pill ne doit jamais passer à la ligne */
.acc summary.zoa-acc-sum .zoa-acc-sum--line1 .sum-right,
.acc summary.zoa-acc-sum .zoa-acc-sum--line1 .pill{
  flex:0 0 auto !important;
  white-space:nowrap !important;
  margin-left:0 !important;
}

/* 3) Ligne 2 : valeurs sous le titre */
/* Mix C (blocs UI) + B (flèche) */
.zoa-acc-sum .sum-line2--uiarrow{
  display:grid;
  grid-template-columns: 1fr auto 1fr;
  align-items:center;
  gap:10px;
  margin-top:6px;
}

.zoa-acc-sum .sum-line2--uiarrow .col{
    padding: 8px 10px;
    border: 1px solid var(--line);
    border-radius: 12px;
    background: 
 color-mix(in oklab, var(--surface, #fff), transparent 0%);
    min-width: 0;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.zoa-acc-sum .sum-line2--uiarrow .k{
  font-size:11px;
  opacity:.75;
  line-height:1.1;
}

.zoa-acc-sum .sum-line2--uiarrow .v {
  margin-top:2px;
  font-size:22px;
  font-weight:800;
  line-height:1.1;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}

.zoa-acc-sum .sum-line2--uiarrow .unit {
  font-weight:700;
  opacity:.9;
  font-size: 12px;	
  color: var(--muted);
  white-space: nowrap;
}

.zoa-acc-sum .sum-line2--uiarrow .arrow {
  width:28px;
  height:28px;
  border-radius:999px;
  display:grid;
  place-items:center;
  font-weight:900;
  opacity:.75;
  border:1px solid var(--line);
  background: color-mix(in oklab, var(--surface, #fff), transparent 0%);
}

/* Si pas de cible : une seule colonne sur toute la largeur */
.zoa-acc-sum .sum-line2--uiarrow:has(.col--measured):not(:has(.col--target)){
  grid-template-columns: 1fr;
}

/* Chevron dans le summary (Analyses) */
.zoa-acc-item > summary .zd-collapse-trigger{
  display:inline-flex;
  align-items:center;
}

.zoa-acc-item > summary .dosing-chevron{
  transition: transform .18s ease;
  transform: rotate(0deg);
  opacity:.9;
}

/* Quand le details est ouvert */
.zoa-acc-item[open] > summary .dosing-chevron{
  transform: rotate(180deg);
}

/* Optionnel: éviter que le bouton intercepte le click du summary */
.zoa-acc-item > summary .collapse-btn{
  pointer-events:none; /* le summary reste la zone cliquable */
}

/* ==========================================================================
   ZOAICP — Accordeon (acc-body)
   Markup: .acc-body > .acc-kpis + .acc-gauge-card + .acc-actions
   ========================================================================== */

.zoa-acc-item .acc-body{
  padding: 12px 14px 14px;
  border-top: 1px solid var(--line);
  background: var(--surface);
}

/* ---- KPIs (ici: uniquement "Écart") ---- */
.zoa-acc-item .acc-kpis{
  display: grid;
  grid-template-columns: 1fr;
  gap: 10px;
  margin: 0 0 12px;
}

.zoa-acc-item .acc-kpi{
  position: relative;
  border: 1px solid var(--line);
  background: var(--surface-2);
  border-radius: 14px;
  padding: 10px 12px;
  box-shadow: 0 10px 26px rgba(15,23,42,.04);
}

.zoa-acc-item .acc-kpi .k{
  font-size: 12px;
  color: var(--muted);
  letter-spacing: .2px;
  margin-bottom: 6px;
}

.zoa-acc-item .acc-kpi .v{
  display: flex;
  align-items: baseline;
  gap: 6px;
  line-height: 1.1;
}

.zoa-acc-item .acc-kpi .num{
  font-size: 18px;
  font-weight: 800;
  color: var(--text);
}

.zoa-acc-item .acc-kpi .unit{
  font-size: 12px;
  color: var(--muted);
}

.zoa-acc-item .acc-kpi .meta{
  margin-top: 6px;
  font-size: 12px;
  color: var(--muted);
}

/* Base (fallback = brand) */
.zoa-acc-item .col.col--measured{
  /* barre à gauche */
  border-left: 4px solid color-mix(in oklab, var(--brand), transparent 35%);

  /* un peu de profondeur */
  box-shadow: 0 10px 26px rgba(15,23,42,.04);
}

/* Couleurs selon la sévérité */
.zoa-acc-item[data-sev="ok"] .col.col--measured{
  border-left-color: color-mix(in oklab, var(--accent), transparent 25%);
}
.zoa-acc-item[data-sev="warning"] .col.col--measured{
  border-left-color: color-mix(in oklab, #f59e0b, transparent 18%);
}
.zoa-acc-item[data-sev="critical"] .col.col--measured{
  border-left-color: color-mix(in oklab, #ef4444, transparent 12%);
}

/* ---- Carte jauge (ECharts) ---- */
.zoa-acc-item .acc-gauge-card{
  border: 1px solid var(--line);
  background: var(--surface-2);
  border-radius: 16px;
  padding: 12px;
  box-shadow: 0 12px 28px rgba(15,23,42,.05);
}

.zoa-acc-item .acc-gauge-head{
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
}

.zoa-acc-item .acc-gauge-head .t{
  font-size: 13px;
  font-weight: 800;
  color: var(--text);
}

.zoa-acc-item .acc-gauge-head .s{
  font-size: 12px;
  color: var(--muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 62%;
}

/* ---- Actions ---- */
.zoa-acc-item .acc-actions{
  display: flex;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin-top: 12px;
}

.zoa-acc-item .acc-actions .btn{
  width: 100%;
  justify-content: center;
  border-radius: 12px;
}

/* ---- Bonus: bouton "Modifier" dans le summary visible seulement quand ouvert ---- */
.zoa-acc-item .acc-edit-inline{ display:none; }
.zoa-acc-item[open] .acc-edit-inline{ display:inline-flex; }
.unit-button {margin-top: 4px}


/* Container global */
.favorites{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(260px,1fr));
  gap:16px;
}

/* Carte principale */
.fav-card{
  position:relative;
  display:flex;
  flex-direction:column;
  gap:10px;
  padding:12px 16px 5px 16px;
  border-radius:16px;
  background:var(--surface-2,rgba(15,23,42,.6));
  border:1px solid rgba(148,163,184,.3);
}

/* Header : symbole + nom + source */
.fav-card__head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:8px;
}

.fav-card__head-left{
  display:flex;
  align-items:center;
  gap:8px;
  min-width:0;
}

.fav-card__name{
  font-weight:600;
  font-size:14px;
  color:var(--text);
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}

/* Source chip (ICP / Manuel) */
.chip-src{
  display:inline-flex;
  align-items:center;
  gap:6px;
  padding:2px 8px;
  border-radius:999px;
  border:1px solid rgba(148,163,184,.4);
  font-size:11px;
  color:var(--muted);
}

.chip-src .dot{
  width:6px;
  height:6px;
  border-radius:999px;
  background:currentColor;
}

/* Corps */
.fav-card__body{
  display:flex;
  flex-direction:column;
  gap:8px;
}

/* Ligne valeur + état */
.fav-card__value-row{
display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    flex: 1 1 0;
    padding: 8px 10px;
    border-radius: 12px;
    border: 1px solid rgba(148, 163, 184, .35);
    background: var(--surface);
    display: flex;
    gap: 4px;
	border-left: 4px solid;
}

.fav-card__value{
  font-weight:700;
  font-size:18px;
}

/* Double bloc Idéal / Δ */
.fav-card__dual{
  display:flex;
  align-items:stretch;
  gap:10px;
}

.fav-card__dual-box{
  flex:1 1 0;
  padding:4px 10px;
  border-radius:12px;
  border:1px solid rgba(148,163,184,.35);
  background:var(--surface);
  display:flex;
  flex-direction:column;
  text-align: center;	
}

.fav-card__value-row.ok {
	    border-color: 
 color-mix(in oklab, var(--accent), transparent 25%);
}

.fav-card__value-row.warn {
	    border-color: 
 color-mix(in oklab, #f59e0b, transparent 18%);
}

.fav-card__value-row.bad {
	    border-color: 
 color-mix(in oklab, #ef4444, transparent 12%);
}

.fav-card__dual-label{
  font-size:11px;
  text-transform:uppercase;
  letter-spacing:.04em;
  color:var(--muted);
}

.fav-card__dual-value{
  font-size:14px;
  font-weight:600;
  color:var(--text);
}

/* Footer */
.fav-card__foot{
    font-size: 11px;
    color: var(--muted);
    text-align: center;
}

/* Responsive */
@media (max-width: 480px){
  .favorites{
    grid-template-columns:1fr;
  }

  .fav-card__value{
    font-size:16px;
  }
}

.zoa-a1.zoa-a1--history .icp-logo-badge {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: 72px;
  padding: 10px 12px;
  border-radius: 16px;
  background: #fff;
  border: 1px solid color-mix(in oklab, var(--brand), var(--line) 70%);
  box-shadow: 0 8px 18px rgba(15, 23, 42, .04);
}

.zoa-a1.zoa-a1--history .lab-logo {
  display: block;
  width: auto;
  height: auto;
  max-width: 110px;
  max-height: 51px;
  object-fit: contain;
}
	
	.barcode-split {
  display: grid;
  grid-template-columns: 1fr auto 1fr auto 1fr auto 1fr;
  gap: 2px;
  align-items: center;
  width: 100%;
}

@media (max-width: 767px) {

	  .zoa-a1.zoa-a1--history .actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    justify-content: center;
    width: 100%;
    min-width: 0;
    box-sizing: border-box;
  }

  .zoa-a1.zoa-a1--history .actions > * {
    min-width: 0;
    box-sizing: border-box;
  }

  .zoa-a1.zoa-a1--history .actions > :first-child {
    flex: 0 0 100%;
  }

  .zoa-a1.zoa-a1--history .actions > :not(:first-child) {
    flex: 1 1 0;
    max-width: calc(50% - 4px);
    justify-content: center;
  }
	
  .zoa-a1.zoa-a1--history {
    grid-template-columns: 1fr;
    gap: 12px;
  }

  .zoa-a1.zoa-a1--history .zoa-a1-media {
    justify-content: center;
  }

  .zoa-a1.zoa-a1--history .icp-logo-badge {
    width: 104px;
    min-height: 77px;
    padding: 10px 14px;
  }

  .zoa-a1.zoa-a1--history .head {
    justify-content: center;
    text-align: center;
  }

  .zoa-a1.zoa-a1--history .badges {
    justify-content: center;
    text-align: center;
  }

  .zoa-a1.zoa-a1--history .actions {
    justify-content: center;
    width: 100%;
  }
}

.barcode-split .barcode-part {
  width: 100%;
  min-width: 0;
  text-align: center;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  font-weight: 600;
  color: var(--brand);
}

.barcode-sep {
  text-align: center;
  opacity: 0.65;
  font-weight: 700;
  font-size: 18px;
}

.barcode-split .barcode-part::-webkit-input-placeholder {
  color: #94a3b866;
}

.barcode-split .barcode-part::-moz-placeholder {
  color: #94a3b866;
  opacity: 1;
}

.barcode-split .barcode-part:-ms-input-placeholder {
  color: #94a3b866;
}

.barcode-split .barcode-part::placeholder {
  color: #94a3b866;
  opacity: 1;
}

.barcode-scan-wrap {
  width: 100%;
}

.barcode-scan-box {
  position: relative;
  width: 100%;
  max-width: 477px;
  margin: 0 auto;
  border-radius: 18px;
  overflow: hidden;
  border: 1px solid rgba(148, 163, 184, 0.25);
  background: #000;
  box-shadow: 0 12px 30px rgba(15, 23, 42, 0.18);
}

.barcode-video {
  width: 100%;
  height: 100%;
  background: #000;
}

.barcode-video video {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover;
}

.barcode-scan-overlay {
  position: absolute;
  inset: 0;
  pointer-events: none;
  display: flex;
  align-items: center;
  justify-content: center;
}

.barcode-scan-frame {
  position: relative;
  width: 68%;
  height: 68%;
  border-radius: 18px;
  box-shadow:
    0 0 0 9999px rgba(0, 0, 0, 0.28);
}

.barcode-scan-frame::before,
.barcode-scan-frame::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 18px;
}

.barcode-scan-frame::before {
  border: 2px solid rgba(255, 255, 255, 0.22);
}

.barcode-scan-frame::after {
  background:
    linear-gradient(#df8428, #df8428) top left / 28px 3px no-repeat,
    linear-gradient(#df8428, #df8428) top left / 3px 28px no-repeat,
    linear-gradient(#df8428, #df8428) top right / 28px 3px no-repeat,
    linear-gradient(#df8428, #df8428) top right / 3px 28px no-repeat,
    linear-gradient(#df8428, #df8428) bottom left / 28px 3px no-repeat,
    linear-gradient(#df8428, #df8428) bottom left / 3px 28px no-repeat,
    linear-gradient(#df8428, #df8428) bottom right / 28px 3px no-repeat,
    linear-gradient(#df8428, #df8428) bottom right / 3px 28px no-repeat;
}

.barcode-scan-actions {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  margin-top: 10px;
}

.barcode-scan-help {
  margin: 0;
  opacity: .85;
}

p.help-block {
    border-radius: 12px;
    background: rgba(59, 130, 246, .08);
    border: 1px solid rgba(59, 130, 246, .35);
    padding: 7px;
    font-size: 13px;
    margin: 10px 0;
}


.form-field.scan-zone, .date-part {
    background-color: aliceblue;
    padding: 13px;
    border-radius: 15px;
    border: 1px solid var(--line);
    border-radius: 16px;
    background: var(--surface-2);
    box-shadow: 0 8px 18px rgba(15, 23, 42, .04);
    margin-bottom: 15px;
    border-left: 4px solid var(--cat-base-a);
}

@media (max-width: 450px){

  .barcode-split .barcode-part {
    font-size: 13px;
  }
}

#barcode-modal-success-state {
  padding: 6px 0;
}

.barcode-success-state-inner {
  padding: 0px 4px 8px;
}

.barcode-success-visual {
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 0 0 10px;
}

.barcode-success-lottie {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 90px;
}

.barcode-success-title {
  margin: 0 0 10px;
  text-align: center;
  font-size: 26px;
  line-height: 1.2;
  color: var(--text);
}

.barcode-success-text {
  max-width: 760px;
  margin: 0 auto 22px;
  text-align: center;
  font-size: 15px;
  line-height: 1.55;
  opacity: .92;
  color: var(--text);
}

.barcode-steps {
  display: grid;
  grid-template-columns: 1fr;
  gap: 5px;
  margin: 0 auto 20px;
}

.barcode-step-card {
  padding: 14px;
  color: #fff;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: var(--surface-2);
  box-shadow: 0 8px 18px rgba(15, 23, 42, .04);
}

.barcode-step-head {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 12px;
}

.barcode-step-num {
  flex: 0 0 30px;
  width: 30px;
  height: 30px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--stepimport);
  color: #fff;
  font-size: 14px;
  font-weight: 700;
  line-height: 1;
}

.barcode-step-head h4 {
  margin: 0;
  font-size: 21px;
  line-height: 1.05;
  font-weight: 400;
  color: var(--text);
  letter-spacing: -.02em;
}

.barcode-step-body {
  display: flow-root;
}

.barcode-step-media {
  float: left;
  width: 100px;
  height: 100px;
  margin: 0 14px 8px 0;
  border-radius: 16px;
  overflow: hidden;
  background: var(--stepimport-card);
  box-shadow: 0 6px 18px rgba(0,0,0,.12);
  padding: 5px;
}

.barcode-step-media img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.barcode-step-text {
  min-width: 0;
}

.barcode-step-text p {
  margin: 0;
  font-size: 15px;
  line-height: 1.5;
  color: var(--muted);
}

.barcode-success-tip {
  display: flex;
  align-items: flex-start;
  gap: 21px;
  margin: 18px auto 0;
  padding: 10px 12px;
  border-radius: 14px;
  background: rgba(59, 130, 246, .08);
  border: 1px solid rgba(59, 130, 246, .35);
}

.barcode-success-tip-icon {
  flex: 0 0 45px;
  width: 45px;
  height: 45px;
  border-radius: 999px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #fff;
  font-size: 18px;
  box-shadow: 0 4px 10px rgba(0,0,0,.06);
  padding: 26px;
}

.barcode-success-tip-content strong {
  display: block;
  margin: 0 0 4px;
  font-size: 15px;
  color: var(--text);
}

.barcode-success-tip-content p {
  margin: 0;
  font-size: 14px;
  line-height: 1.55;
  opacity: .92;
  color: var(--text);
}

.barcode-success-actions {
  margin-top: 18px;
  text-align: center;
}

/* Desktop / tablette */
@media (min-width: 768px) {
  .barcode-steps {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 7px;
  }

  .barcode-success-state-inner {
    padding: 0px 8px 10px;
  }

  .barcode-success-tip {
    max-width: 900px;
  }
}

/* Mobile */
@media (max-width: 767px) {
  .barcode-success-title {
    font-size: 22px;
  }

  .barcode-success-text {
    font-size: 14px;
    margin-bottom: 18px;
  }

  .barcode-step-card {
    padding: 12px;
    border-radius: 18px;
  }

  .barcode-step-head {
    gap: 8px;
    margin-bottom: 10px;
  }

  .barcode-step-num {
    width: 28px;
    height: 28px;
    flex-basis: 28px;
    font-size: 13px;
  }

  .barcode-step-head h4 {
    font-size: 18px;
    line-height: 1.1;
  }

  .barcode-step-media {
    width: 76px;
    height: 76px;
    margin: 0 12px 6px 0;
    border-radius: 14px;
  }

  .barcode-step-text p {
    font-size: 15px;
    line-height: 1.45;
  }

  .barcode-success-tip-content p {
    font-size: 13px;
  }
}

/* Très petits écrans */
@media (max-width: 420px) {
  .barcode-step-head h4 {
    font-size: 19px;
  }

  .barcode-step-media {
    width: 80px;
    height: 80px;
    margin-right: 10px;
  }

  .barcode-step-text p {
    font-size: 14px;
  }
}

.form-grid {
    padding: .6rem .85rem;
    border-radius: .85rem;
    background: var(--surface-2);
    border: 1px dashed var(--line2);
    box-shadow: 0 8px 18px rgba(15, 23, 42, .04);
    margin-bottom: 10px;
}

#zoa-push-status.is-ok {
  color: var(--brand);
}

#zoa-push-status.is-error {
  color: var(--bad);
}

.m-input-wrap{
  position: relative;
  display: flex;
  align-items: center;
}

.m-input-wrap .m-input{
  width: 100%;
  padding-right: 56px; /* ajuste selon la longueur des unités */
}

.m-input-wrap .m-unit{
  position: absolute;
  right: 12px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 12px;
  line-height: 1;
  color: rgba(255,255,255,.65);
  pointer-events: none;
  white-space: nowrap;
}