/* modules/zoaicp/views/css/public_profile.css */

@media (max-width: 700px) {
    body {
        padding-top: 0 !important;
    }
}

#content-wrapper {
    max-width: 1180px;
    margin: 0 auto;
    padding: 0 12px 30px;
}

h3.title {
    margin: 2px;
    font-size: 1.38rem;
}
#zoa-public-icp-modal{ display:none; }
#zoa-public-icp-modal:not(.hidden){ display:grid !important; }

.mobile-only {
    display: none;
}

#zoa-public-icp-modal .zoa-mini-gauge.zoa-echart{
  height: 70px !important;
}

/* éviter que le wrapper de table coupe verticalement */
#zoa-public-icp-modal .table-responsive{
  overflow-y: visible;
}
/* =========================
   ACCENTS par section
   ========================= */

/* 1) Infos principales : “brand lagoon” */
.aq-about-main {
  --card-accent-a: var(--brand);
  --card-accent-b: var(--accent-2);
}

/* 2) Export & vivant : vert “accent” */
.aq-about-tech {
  --card-accent-a: var(--cat-major-a);   /* vert */
  --card-accent-b: var(--cat-major-b);   /* vert clair */
}

/* 3) Profil guidé : nutriments / warm (doux) */
.aq-about-life{
  --card-accent-a: var(--cat-nutrients-a); /* orange */
  --card-accent-b: var(--cat-nutrients-b); /* orange/peche */
}

/* 4) Partage communauté : minor (indigo) */
.aq-about-notes {
  --card-accent-a: var(--cat-minor-a);  /* indigo */
  --card-accent-b: var(--cat-minor-b);  /* lavande */
}

/* Dark : on baisse un peu la “lumière” du ruban */
html[data-theme="dark"] .card.card--themed::before{
  opacity: .75;
}
/* Keep the public profile centered and readable even if the theme container differs */
.zoa-public-page {
  max-width: 1120px;
  margin: 0 auto;
  padding: 0 14px 28px;
}
/* Onglets du profil public : ne montrer que le pane actif */
.aq-public-tabs .tab-pane {
  display: none;
}

.aq-public-tabs .tab-pane.is-active {
  display: block;
}

/* Public hero: ensure cover doesn't create massive empty area */
.aq-public-hero .aq-cover {
  position: relative;
  overflow: hidden;
  border-radius: 20px 20px 0 0;
  min-height: 150px;
  /* max-height: 150px; */
}
.aq-public-hero .aq-cover-img {
  width: 100%;
  height: 260px;
  object-fit: cover;
  display: block;
}

.aq-public-header {
  display: grid;
  grid-template-columns: 153px 1fr;
  gap: 14px;
  margin-top: -68px;
  padding: 10px 33px 12px;
  align-items: end;
  color: var(--text);
  margin-bottom: 29px;
}

.aq-avatar-wrap {
  width: 150px;
  height: 150px;
  z-index: 9;
}
.aq-avatar,
.aq-avatar--fallback {
  width: 150px;
  height: 150px;
  border-radius: 22px;
  object-fit: cover;
  display: grid;
  place-items: center;
  font-weight: 800;
  font-size: 2.5rem;
  letter-spacing: .02em;
  border: 3px solid #fff;
  color: #FFF;
}

.aq-public-meta {z-index: 0; /* Safari */}

.aq-title-row {
  display: flex;
  align-items: baseline;
  gap: 10px;
  flex-wrap: wrap;
}


.aq-public-name {
  margin: 0;
  line-height: 1.1;
}

section.aq-public-tabs {
    color: var(--text);
}

.aq-public-bio {
  margin: 8px 0 10px;
  opacity: .92;
}

.aq-public-actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-top: 10px;
}

.zoa-public-kpis {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
}

/* Photos grid */
.zoa-public-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: .6rem;
}
.zoa-public-grid .zoa-photo img {
  width: 100%;
  height: 120px;
  object-fit: cover;
  border-radius: 14px;
  display: block;
}

/* ICP list */
.zoa-public-icp-list { display: grid; gap: .7rem; }
.zoa-public-icp-item { padding: .85rem; }
.zoa-public-icp-head { display:flex; justify-content:space-between; gap:.5rem; flex-wrap:wrap; }

.zoa-public-sep { margin: 1rem 0; border: none; border-top: 1px dashed var(--line, rgba(0,0,0,.14)); }

/* Sticky CTA */
.zoa-share-cta-mobile {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 10px;
  display: none;
  justify-content: center;
  padding: 0 12px;
  z-index: 999;
}
.zoa-share-cta-mobile.is-visible { display: flex; }

@media (max-width: 900px) {
  .aq-public-hero .aq-cover-img { height: 220px; }
}

@media (max-width: 720px) {
  .zoa-public-page { padding: 0 10px 22px; }
  .aq-public-header {
    grid-template-columns: 129px 1fr;
    margin-top: -52px;
    padding: 10px 9px 12px;
  }
  .aq-avatar-wrap {width: 120px;height: 120px;}
  .aq-avatar,
  .aq-avatar--fallback {width: 120px;height: 120px;border-radius: 18px;font-size: 1.9rem;}
  .zoa-public-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .zoa-public-grid .zoa-photo img { height: 132px; }
}
/* ===== Galerie publique ===== */

.zoa-public-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: .6rem;
}

.zoa-photo-tile {
  border: 0;
  padding: 0;
  margin: 0;
  background: none;
  cursor: pointer;
  position: relative;
  border-radius: 14px;
  overflow: hidden;
}

.zoa-public-grid .zoa-photo img {
  width: 100%;
  height: 160px;
  object-fit: cover;
  display: block;
  border-radius: 14px;
}

.zoa-photo-badge-row {
  position: absolute;
  left: 8px;
  right: 8px;
  bottom: 8px;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: flex-end;
}

.zoa-photo-badge-row .chip {
  font-size: 11px;
  padding: 2px 8px;
  border-radius: 999px;
  background: rgba(15, 23, 42, 0.86);
  color: #fff;
  border-color: transparent;
}

/* Modale photo */

.aq-photo-modal-body {
  display: grid;
  grid-template-columns: minmax(0, 3fr) minmax(0, 2fr);
  gap: 1.4rem;
  align-items: flex-start;
}

.aq-photo-modal-media img {
  width: 100%;
  max-height: 70vh;
  object-fit: contain;
  border-radius: 16px;
}

.aq-photo-modal-meta {
  display: flex;
  flex-direction: column;
  gap: .6rem;
}

.aq-photo-modal-legend {
  font-weight: 600;
}

/* Responsive : deux colonnes -> une colonne sur mobile */
@media (max-width: 920px) {
  .zoa-public-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .zoa-public-grid .zoa-photo img {
    height: 160px;
  }
  .aq-photo-modal-body {
    grid-template-columns: 1fr;
  }
}

/* Responsive : deux colonnes -> une colonne sur mobile */
@media (max-width: 720px) {
  .zoa-public-grid {
    grid-template-columns: repeat(1, minmax(0, 1fr));
  }
  .zoa-public-grid .zoa-photo img {
    height: 160px;
  }
  .aq-photo-modal-body {
    grid-template-columns: 1fr;
  }
}

.aq-public-tabs .tab-pane { display:none; }
.aq-public-tabs .tab-pane.is-active { display:block; }

.zoa-photo-tile {
  border:0;
  padding:0;
  margin:0;
  background:none;
  cursor:pointer;
  position:relative;
  border-radius:14px;
  overflow:hidden;
}

.zoa-photo-badge-row {
  position:absolute;
  left:8px;
  right:8px;
  bottom:8px;
  display:flex;
  flex-wrap:wrap;
  gap:6px;
}
.zoa-photo-badge-row .chip {
  font-size:11px;
  padding:2px 8px;
  border-radius:999px;
  background:rgba(15,23,42,.88);
  color:#fff;
  border-color:transparent;
}

.aq-photo-modal-body {
  display:grid;
  grid-template-columns:minmax(0,3fr) minmax(0,2fr);
  gap:1.4rem;
}
.aq-photo-modal-media img {
  width:100%;
  max-height:70vh;
  object-fit:contain;
  border-radius:16px;
}
.aq-photo-modal-meta { display:flex; flex-direction:column; gap:.6rem; }
.aq-photo-modal-legend { font-weight:600; }

@media (max-width:720px){
  .aq-photo-modal-body { grid-template-columns:1fr; }
}

/* === Lightbox publique : agrandir la modale & la photo === */

.zoa-photo-modal .modal-content {
  /* beaucoup plus large que la modale standard */
  max-width: min(100%, 96vw);
  width: 100%;
}

/* Mise en page en 2 colonnes : photo grande à gauche, texte à droite */
.zoa-photo-modal .aq-photo-modal-body {
  display: grid;
  grid-template-columns: minmax(0, 3fr) minmax(0, 2fr);
  gap: 1.5rem;
  align-items: flex-start;
  grid-template-columns: minmax(0, 5fr) minmax(0, 1.2fr); /* ~80% / 20% */
  padding: 15px;
}

/* La zone image prend bien tout son espace */
.zoa-photo-modal .aq-photo-modal-media {
  width: 100%;
}

/* Image vraiment grande dans la modale */
.zoa-photo-modal #aq-photo-modal-img {
  display: block;
  width: 100%;
  height: auto;
  max-height: calc(100vh - 220px); /* pour ne pas dépasser l’écran */
  object-fit: contain;
  border-radius: 18px;
}

/* Colonne texte : on évite que ça s’étale trop large */
.zoa-photo-modal .aq-photo-modal-meta {
  max-width: 320px;
}

/* Mobile : on repasse en colonne unique */
@media (max-width: 768px) {
  .zoa-photo-modal .modal-content {
    width: 94vw;
    max-width: 94vw;
  }

  .zoa-photo-modal .aq-photo-modal-body {
    grid-template-columns: minmax(0, 1fr);
  }

  .zoa-photo-modal .aq-photo-modal-meta {
    max-width: none;
  }
 .aq-public-header {
        margin-top: -36px;
    }
	.aq-title-row {

    gap: 0;
flex-direction: column
}
}

.aq-public-chips {
    font-size: .78rem;
    color: var(--muted);
}

.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%;
}

.kb-ana .acc-tools {
    display: flex;
    gap: .5rem;
    margin: 25px 0 0 13px;
}

.kb-ana {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .75rem;
}

.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);
}

button#aq-photo-modal-close {
    margin-left: auto;
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background-color: unset;
}

.modal-title {
      display: flex;
      align-items: center;
      padding: 0px 12px;
      margin-bottom: 0;
}

nav#aq-public-tabs {
    margin: 0 0 12px;
    border-bottom: 2px solid var(--accent-2);
}

/* Barre globale */
.zoa-tabbar {
  margin: 1.25rem 0 .75rem;
  display: flex;
  justify-content: flex-start;
}

/* Tabs */
.zoa-tabbar .seg-btn {
  cursor: pointer;
  transition:
    color .18s ease,
    background .18s ease,
    box-shadow .18s ease,
    transform .12s ease;
  border-radius: 10px 10px 0 0;
  background: var(--surface-3);
  color: var(--text);
  border: 1px solid var(--line);
  border-bottom: 0;
  /* gap: 10px; */
  display: inline-flex;         /* texte + icône sur la même ligne */
  align-items: center;          /* centrage vertical */
  justify-content: center;
  gap: 0.4rem;                  /* espace entre l’icône et le texte */
  line-height: 1;
  /* font-size: 11px; */
}

/* Hover / focus */
.zoa-tabbar .seg-btn:hover {
  color: var(--text);
  background: color-mix(in oklab, var(--surface-4), var(--brand) 10%);
  border: 1px solid var(--brand);
  border-bottom: 0;
}

.zoa-tabbar .seg-btn:focus-visible {
  outline: 2px solid var(--brand);
  outline-offset: 2px;
}

/* État actif : pill en dégradé brand + accent */
.zoa-tabbar .seg-btn.is-active {
  background: color-mix(in srgb, var(--brand) 15%, transparent);
  border-radius: 10px 10px 0 0;
  align-items: center;
  }

/* Grille générale de l'onglet À propos */
.aq-about-grid {
  display: grid;
  grid-template-columns: minmax(0, 2.1fr) minmax(0, 1.9fr);
  gap: 1.25rem;
  margin-top: 1.25rem;
}

@media (max-width: 1024px) {
  .aq-about-grid {
    grid-template-columns: minmax(0, 1fr);
  }
}

.aq-about-card h2 {
  font-size: 1.38rem;
  margin: 0 0 .75rem;
  display: flex;
  align-items: center;
  gap: .4rem;
}

.aq-about-block-title {
  margin: 1rem 0 .5rem;
  font-size: 1.1rem;
}

/* Header de la carte principale */
.aq-about-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: .75rem;
  margin-bottom: .75rem;
}

.aq-about-head-meta {
  display: flex;
  flex-wrap: wrap;
  gap: .35rem;
  justify-content: flex-end;
}

.aq-about-main-top {
  margin-bottom: .75rem;
}

.aq-about-main-name {
  margin-bottom: .35rem;
}

.aq-about-title {
  font-size: 1.15rem;
  margin: 0 0 .25rem;
}

.aq-about-subtitle {
  display: flex;
  flex-wrap: wrap;
  gap: .35rem;
}

.aq-type-pill {
  display: inline-flex;
  align-items: center;
  padding: .18rem .5rem;
  border-radius: 999px;
  font-size: .78rem;
  background: var(--chip-bg);
  border: 1px solid var(--chip-border);
  color: var(--chip-ink);
}

.aq-about-bio {
  margin: 0 0 .25rem;
  font-size: .85rem;
  color: var(--muted);
}

/* Key/Value rows */
.aq-kv {
  margin: .25rem 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: .25rem;
}

.aq-kv-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: .75rem;
  padding: .35rem .6rem;
  border-radius: .75rem;
  background: var(--surface-2);
  border: 1px dashed var(--line2);
  box-shadow: 0 8px 18px rgba(15, 23, 42, .04);
}

.aq-kv-row dt {
  margin: 0;
  font-size: .78rem;
  color: var(--muted);
}

.aq-kv-row dd {
  margin: 0;
  font-size: .84rem;
  font-weight: 500;
  color: var(--text);
  text-align: right;
}

/* Lignes avec label + chips */
.aq-about-row {
  margin-top: .75rem;
}

.aq-about-label {
  font-size: 1.1rem;
  margin-bottom: .25rem;
  font-family: 'Archivo Narrow';
}

.aq-about-chips {
  display: flex;
  flex-wrap: wrap;
  gap: .35rem;
}

/* Notes */
.aq-about-notes-text {
  font-size: .85rem;
  line-height: 1.5;
  color: var(--text);
  white-space: pre-line;
}

.zoa-card.zoa-quality.mb-3.zoa-meta.animate-fade-up {
    border-radius: 18px;
    padding: 12px;
    box-shadow: var(--card-shadow);
    border: 1px solid color-mix(in oklab, var(--cat-pollutants-a), var(--line) 85%);
    background: radial-gradient(900px 320px at 10% -10%, color-mix(in lab, var(--brand) 10%, transparent), transparent 60%), var(--surface);
}

#zoa-public-icp-modal .modal-content {
    width: min(92vw, 1000px);
}

#zoa-public-icp-modal table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    background: var(--surface-2);
    border: 1px solid var(--line);
    border-radius: 14px;
    overflow: hidden;
}

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

.pill {
    margin-left: -20px;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 10px;
    border-radius: 999px;
    font-size: 12px;
}

table tbody tr.zoa-row {
    transition: transform .28s ease, opacity .28s ease;
    will-change: transform;
    scroll-margin-top: var(--zoa-scroll-offset);
}

zoa-public-icp-modal table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    background: var(--surface-2);
    border: 1px solid var(--line);
    border-radius: 14px;
    overflow: hidden;
}

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


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

/* 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%);
}

/* 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ù */
  padding: 12px 10px 30px 10px;
}

/* 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 */
}


/* 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%);
}

/* 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%);
}

#zoaPubIcpLoading{
  display: flex;
  justify-content: center;
  width: 100%;
}

/* === 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{ grid-template-columns: 0.8fr 1.2fr auto; align-items: center; }
  .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%; }
  .aq-public-hero .aq-cover-img{

  object-position: center -90px; /* remonte de 30px */
}

  .aq-public-hero .aq-cover {
     max-height: 150px;
}
}
/* Topbar right: keep icons on ONE line */
.zoa-share-topbar__right{
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0; /* important pour éviter des débordements bizarres */
}

/* The UL inside right area */
.zoa-share-topbar__right .zoa-tabs{
  display: flex;
  flex-wrap: nowrap;          /* <= pas de retour à la ligne */
  align-items: center;
  gap: 10px;
  margin: 0;
  padding: 0;
  list-style: none;
  min-width: 0;

  overflow-x: auto;           /* si trop d’icônes, scroll horizontal */
  -webkit-overflow-scrolling: touch;
}

/* Items */
.zoa-share-topbar__right .zoa-tabs > li{
  flex: 0 0 auto;
}

/* Links (centres lottie) */
.zoa-share-topbar__right .zoa-tabs > li > a{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  white-space: nowrap;
}

.zoa-tabs a{      appearance: none;
    border: 1px solid var(--line);
    background: #ffffff00;
    color: var(--text);
    padding: 5px 10px;
    border-radius: 12px;
    cursor: pointer;
    transition: .2s 
ease;
    box-shadow: 0 1px 0 rgba(0, 0, 0, .04) inset;
    gap: 7px;
    font-size: 13px;}
.zoa-tabs a:hover{background:color-mix(in srgb, var(--brand) 15%, transparent);color:var(--text);border-color: var(--text);
  box-shadow:0 10px 22px color-mix(in srgb, var(--brand) 24%, transparent)}
.zoa-tabs li.active a{background:color-mix(in srgb, var(--brand) 15%, transparent);color:var(--text);border-color: var(--text);}
.zoa-topnav-spacer{height:.25rem}

/* ================================
   Public hero cover — same fallback as community
================================ */

/* base cover */
.aq-cover{
  position: relative;
  overflow: hidden;
  border-radius: 18px;      /* adapte si besoin */
  height: 220px;            /* adapte à ton hero */
  background: transparent;
}

/* image cover */
.aq-cover-img{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit: cover;
  display:block;
}

/* fallback gradient animé */
.aq-cover.is-fallback{
  background: var(--aq-cover-bg, linear-gradient(135deg, hsl(210,70%,50%), hsl(260,75%,55%)));
  background-size: 260% 260%;
  background-position: 0% 50%;
  will-change: background-position;
  animation: zoaCoverShiftHero 10s ease-in-out infinite;
}

/* watermark initiales (optionnel mais joli) */
.aq-cover.is-fallback::before{
  content: attr(data-initials);
  position:absolute;
  right: 18px;
  bottom: -36px;
  font-size: 160px;
  font-weight: 900;
  letter-spacing: .03em;
  color: rgba(255,255,255,.08);
  line-height: 1;
  pointer-events:none;
}

/* fade bas (lisibilité) */
.aq-cover::after{
  content:"";
  position:absolute;
  inset:0;
  background: linear-gradient(to bottom,
    rgba(0,0,0,0) 35%,
    rgba(0,0,0,.42) 100%
  );
  pointer-events:none;
}

/* animation */
@keyframes zoaCoverShiftHero{
  0%   { background-position: 0% 50%; }
  50%  { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

/* reduced motion */
@media (prefers-reduced-motion: reduce){
  .aq-cover.is-fallback{ animation: none; }
}


.lab {
  display: inline-flex;
  align-items: center;
  justify-content: flex-end;
  min-height: 24px;
}

.lab-logo {
  display: inline-block;
  width: auto;
  height: 24px;
  max-width: 120px;
  max-height: 24px;
  opacity: 1;
  visibility: visible;
}

.icp-logo-badge {
    padding: 3px 9px;
    border-radius: 999px;
    background: #FFF;
    border: 1px solid
 color-mix(in oklab, var(--brand), black 20%);
    display: block;
    max-height: 35px;
    width: auto;
    height: auto;
}


.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;
}


.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;
}

@media (max-width: 767px) {
  .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 .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%;
  }
      .zoa-a1.zoa-a1--history .icp-logo-badge {
        width: 77px;
        min-height: 77px;
        padding: 10px 14px;
    }
}