/* ==========================================================================
   Aqua Manager — Knowledge Modal V2
   Refonte visuelle de la fiche élément, sans modifier le chargement ni le JS.
   ========================================================================== */

#zoa-knowledge-modal.zoa-knowledge-modal-v2{
  --know-v2-navy-deep:#052a54;
  --know-v2-navy:#07386b;
  --know-v2-ocean:#0c5f91;
  --know-v2-cyan:#10b8c1;
  --know-v2-mint:#40d5aa;
  --know-v2-indigo:#6f78e8;
  --know-v2-magenta:#df66a4;
  --know-v2-ink:#102b4d;
  --know-v2-muted:#6f8296;
  --know-v2-line:#d6e6ec;
  --know-v2-soft:#f4fafc;
}

#zoa-knowledge-modal.zoa-knowledge-modal-v2 .zoa-modal-v2__dialog{
  width:min(96vw,1080px)!important;
  max-width:1080px!important;
  max-height:min(90dvh,900px)!important;
  overflow:hidden!important;
  border-radius:24px!important;
  background:#f5fafc!important;
}

/* ==========================================================================
   HERO / EN-TÊTE
   ========================================================================== */

#zoa-knowledge-modal.zoa-knowledge-modal-v2 .zoa-know-head{
  position:relative;
  flex:0 0 auto;
  min-height:188px;
  display:grid!important;
  grid-template-columns:minmax(0,1fr) 350px;
  align-items:stretch;
  gap:20px;
  margin:0!important;
  padding:18px 62px 18px 20px!important;
  overflow:hidden!important;
  border:0!important;
  color:#fff!important;
  background:
    radial-gradient(380px 230px at 100% 0%,rgba(66,222,219,.22),transparent 64%),
    radial-gradient(300px 220px at 70% 135%,rgba(23,139,195,.20),transparent 70%),
    linear-gradient(138deg,var(--know-v2-navy-deep),var(--know-v2-navy) 58%,var(--know-v2-ocean))!important;
}

#zoa-knowledge-modal.zoa-knowledge-modal-v2 .zoa-know-head::before{
  content:"";
  position:absolute;
  right:-70px;
  top:-150px;
  width:390px;
  height:390px;
  border:1px solid rgba(90,229,226,.14);
  border-radius:50%;
  box-shadow:
    0 0 0 48px rgba(90,229,226,.035),
    0 0 0 98px rgba(90,229,226,.022);
  pointer-events:none;
}

#zoa-knowledge-modal.zoa-knowledge-modal-v2 .zoa-know-head::after{
  content:"";
  position:absolute;
  left:0;
  right:0;
  bottom:0;
  height:2px;
  background:linear-gradient(90deg,var(--know-v2-mint),var(--know-v2-cyan),transparent 88%);
  opacity:.95;
  pointer-events:none;
}

#zoa-knowledge-modal.zoa-knowledge-modal-v2 .zoa-know-head__left{
  position:relative;
  z-index:2;
  min-width:0;
  display:grid!important;
  grid-template-columns:104px minmax(0,1fr);
  align-items:center;
  gap:18px;
}

#zoa-knowledge-modal.zoa-knowledge-modal-v2 .zoa-atom-card{
  width:104px!important;
  min-width:104px!important;
  height:132px;
  aspect-ratio:auto!important;
  display:grid!important;
  grid-template-columns:1fr auto;
  grid-template-rows:auto 1fr auto;
  align-items:start;
  margin:0!important;
  padding:10px 11px!important;
  overflow:hidden;
  border:1px solid rgba(255,255,255,.20)!important;
  border-radius:17px!important;
  color:#fff!important;
  background:
    radial-gradient(110px 80px at 100% 0%,rgba(101,229,223,.12),transparent 72%),
    rgba(255,255,255,.075)!important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.10),
    0 14px 28px rgba(1,22,48,.15)!important;
  backdrop-filter:blur(9px);
}

#zoa-knowledge-modal.zoa-knowledge-modal-v2 .zoa-atom-num{
  grid-column:1;
  grid-row:1;
  justify-self:start;
  color:rgba(255,255,255,.70)!important;
  font-size:11px!important;
  font-weight:900!important;
}

#zoa-knowledge-modal.zoa-knowledge-modal-v2 .zoa-atom-mass{
  grid-column:2;
  grid-row:1;
  justify-self:end;
  color:rgba(255,255,255,.48)!important;
  font-size:9px!important;
  font-weight:800;
}

#zoa-knowledge-modal.zoa-knowledge-modal-v2 .zoa-atom-sym{
  grid-column:1 / -1;
  grid-row:2;
  align-self:center;
  justify-self:start;
  margin:2px 0 0!important;
  color:#fff!important;
  font-size:43px!important;
  line-height:.95!important;
  font-weight:950!important;
  letter-spacing:-.045em;
  text-shadow:0 8px 20px rgba(0,0,0,.13);
}

#zoa-knowledge-modal.zoa-knowledge-modal-v2 .zoa-atom-name{
  grid-column:1 / -1;
  grid-row:3;
  align-self:end;
  color:rgba(255,255,255,.72)!important;
  font-size:10px!important;
  line-height:1.1;
  font-weight:850!important;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}

#zoa-knowledge-modal.zoa-knowledge-modal-v2 .zoa-atom-meta{
  min-width:0;
  display:flex!important;
  flex-direction:column;
  align-items:flex-start!important;
  gap:6px!important;
}

#zoa-knowledge-modal.zoa-knowledge-modal-v2 .zoa-knowledge-v2__kicker{
  display:block;
  margin:0 0 2px;
  color:#65e5df!important;
  font-size:9px;
  line-height:1;
  font-weight:950;
  letter-spacing:.13em;
  text-transform:uppercase;
}

#zoa-knowledge-modal.zoa-knowledge-modal-v2 .zoa-atom-name-xl{
  max-width:100%;
  margin:0!important;
  color:#fff!important;
  font-size:28px!important;
  line-height:1.05!important;
  font-weight:950!important;
  letter-spacing:-.035em;
  text-wrap:balance;
}

#zoa-knowledge-modal.zoa-knowledge-modal-v2 .zoa-atom-meta > .badge.accent{
  min-height:28px;
  display:inline-flex!important;
  align-items:center;
  padding:5px 9px!important;
  border:1px solid rgba(101,229,223,.36)!important;
  border-radius:9px!important;
  color:#fff!important;
  background:rgba(101,229,223,.11)!important;
  font-size:9px!important;
  line-height:1!important;
  font-weight:900!important;
  letter-spacing:.05em;
}

#zoa-knowledge-modal.zoa-knowledge-modal-v2 .zoa-know-head__right{
  position:relative!important;
  z-index:2;
  min-width:0;
  min-height:150px;
  display:flex;
  align-items:center;
  justify-content:center;
  overflow:hidden!important;
  border:1px solid rgba(255,255,255,.10);
  border-radius:18px;
  background:
    radial-gradient(220px 110px at 50% 55%,rgba(101,229,223,.085),transparent 74%),
    rgba(255,255,255,.035);
}

#zoa-knowledge-modal.zoa-knowledge-modal-v2 model-viewer.zoa-mv-float{
  position:relative!important;
  inset:auto!important;
  width:100%!important;
  height:170px!important;
  margin:0!important;
  border:0!important;
  border-radius:16px!important;
  contain:paint;
  background:transparent!important;
  --poster-color:transparent;
}

/* Bouton X supérieur */
#zoa-knowledge-modal.zoa-knowledge-modal-v2 .zoa-modal__close{
  position:absolute!important;
  z-index:8!important;
  top:15px!important;
  right:15px!important;
  width:38px!important;
  height:38px!important;
  display:grid!important;
  place-items:center!important;
  padding:0!important;
  border:1px solid rgba(255,255,255,.20)!important;
  border-radius:11px!important;
  color:#fff!important;
  background:rgba(255,255,255,.075)!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.07);
  font-size:21px!important;
  line-height:1!important;
  transition:background .15s ease,border-color .15s ease,transform .15s ease;
}

#zoa-knowledge-modal.zoa-knowledge-modal-v2 .zoa-modal__close:hover{
  transform:translateY(-1px);
  border-color:rgba(101,229,223,.48)!important;
  color:#fff!important;
  background:rgba(101,229,223,.13)!important;
}

/* ==========================================================================
   STRIP DE MÉTADONNÉES
   ========================================================================== */

#zoa-knowledge-modal.zoa-knowledge-modal-v2 .zoa-know-badges{
  flex:0 0 auto;
  display:grid!important;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:8px!important;
  margin:0!important;
  padding:12px 16px!important;
  border-bottom:1px solid var(--know-v2-line);
  background:
    radial-gradient(420px 120px at 0% 0%,rgba(16,184,193,.045),transparent 72%),
    #f8fcfd;
}

#zoa-knowledge-modal.zoa-knowledge-modal-v2 .zoa-know-badges .badge{
  min-width:0;
  min-height:42px;
  display:flex!important;
  align-items:center!important;
  justify-content:flex-start;
  margin:0!important;
  padding:8px 10px!important;
  overflow:hidden;
  border:1px solid #d6e6ec!important;
  border-radius:12px!important;
  color:#27445f!important;
  background:
    linear-gradient(135deg,rgba(16,184,193,.045),rgba(255,255,255,.96))!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.8);
  font-size:11px!important;
  line-height:1.2!important;
  font-weight:750!important;
  white-space:normal;
}

#zoa-knowledge-modal.zoa-knowledge-modal-v2 .zoa-know-badges .badge.accent{
  border-color:rgba(16,184,193,.22)!important;
}

#zoa-knowledge-modal.zoa-knowledge-modal-v2 .zoa-know-badges .badge-secondary{
  color:#61778e!important;
  background:
    linear-gradient(135deg,rgba(111,120,232,.04),rgba(255,255,255,.96))!important;
}

/* ==========================================================================
   CORPS / ACCORDÉON
   ========================================================================== */

#zoa-knowledge-modal.zoa-knowledge-modal-v2 .zoa-know-body{
  flex:1 1 auto;
  min-height:0;
  display:block!important;
  margin:0!important;
  padding:14px 16px 16px!important;
  overflow:auto!important;
  overscroll-behavior:contain;
  color:var(--know-v2-ink);
  background:
    radial-gradient(520px 250px at 0% 0%,rgba(16,184,193,.045),transparent 72%),
    linear-gradient(180deg,#fbfdfe,#f4fafc);
  scrollbar-width:thin;
  scrollbar-color:rgba(13,112,130,.38) transparent;
}

#zoa-knowledge-modal.zoa-knowledge-modal-v2 .zoa-accordion{
  display:grid!important;
  grid-template-columns:1fr;
  gap:9px!important;
}

#zoa-knowledge-modal.zoa-knowledge-modal-v2 .zoa-acc-item{
  --know-section-accent:var(--know-v2-cyan);
  position:relative;
  margin:0!important;
  overflow:hidden;
  border:1px solid var(--know-v2-line)!important;
  border-radius:15px!important;
  color:var(--know-v2-ink)!important;
  background:rgba(255,255,255,.88)!important;
  box-shadow:
    0 6px 20px rgba(15,66,96,.04),
    inset 0 1px 0 rgba(255,255,255,.82);
}

#zoa-knowledge-modal.zoa-knowledge-modal-v2 .zoa-acc-item--summary{
  --know-section-accent:var(--know-v2-cyan);
}

#zoa-knowledge-modal.zoa-knowledge-modal-v2 .zoa-acc-item--description{
  --know-section-accent:var(--know-v2-indigo);
}

#zoa-knowledge-modal.zoa-knowledge-modal-v2 .zoa-acc-item--low{
  --know-section-accent:var(--know-v2-mint);
}

#zoa-knowledge-modal.zoa-knowledge-modal-v2 .zoa-acc-item--high{
  --know-section-accent:var(--know-v2-magenta);
}

#zoa-knowledge-modal.zoa-knowledge-modal-v2 .zoa-acc-item--periodic{
  --know-section-accent:#2f96c7;
}

#zoa-knowledge-modal.zoa-knowledge-modal-v2 .zoa-acc-title,
#zoa-knowledge-modal.zoa-knowledge-modal-v2 .acc--elev .zoa-acc-title{
  position:relative;
  min-height:48px;
  width:100%;
  display:flex!important;
  align-items:center;
  gap:9px!important;
  margin:0!important;
  padding:10px 13px 10px 16px!important;
  border:0!important;
  border-bottom:0!important;
  color:#173b61!important;
  background:
    radial-gradient(300px 100px at 0% 0%,color-mix(in srgb,var(--know-section-accent) 8%,transparent),transparent 76%),
    rgba(255,255,255,.78)!important;
  box-shadow:none!important;
  font-size:12px!important;
  line-height:1.2!important;
  font-weight:900!important;
  letter-spacing:.01em!important;
}

#zoa-knowledge-modal.zoa-knowledge-modal-v2 .zoa-acc-title::before,
#zoa-knowledge-modal.zoa-knowledge-modal-v2 .acc--elev .zoa-acc-title::before{
  content:""!important;
  flex:0 0 4px;
  width:4px!important;
  height:20px!important;
  margin:0 2px 0 0!important;
  border-radius:999px!important;
  background:linear-gradient(180deg,var(--know-section-accent),color-mix(in srgb,var(--know-section-accent) 60%,#fff))!important;
  box-shadow:none!important;
}

#zoa-knowledge-modal.zoa-knowledge-modal-v2 .zoa-acc-title::after{
  content:"›"!important;
  width:24px;
  height:24px;
  display:grid;
  place-items:center;
  margin-left:auto!important;
  border:1px solid rgba(16,184,193,.16);
  border-radius:8px;
  color:#5c7891!important;
  background:rgba(16,184,193,.045);
  font-size:17px;
  line-height:1;
  font-weight:800!important;
  transform:rotate(90deg)!important;
  transition:transform .18s ease,background .18s ease!important;
}

#zoa-knowledge-modal.zoa-knowledge-modal-v2 .zoa-acc-item.is-open .zoa-acc-title::after{
  transform:rotate(-90deg)!important;
  background:rgba(16,184,193,.085);
}

#zoa-knowledge-modal.zoa-knowledge-modal-v2 .zoa-acc-panel{
  display:none;
  margin:0!important;
  padding:14px 16px 16px!important;
  border-top:1px solid #e0edf1!important;
  color:#263b52!important;
  background:
    linear-gradient(180deg,rgba(247,251,253,.68),rgba(255,255,255,.96))!important;
  font-size:14px!important;
  line-height:1.62!important;
}

#zoa-knowledge-modal.zoa-knowledge-modal-v2 .zoa-acc-item.is-open .zoa-acc-panel{
  display:block;
}

#zoa-knowledge-modal.zoa-knowledge-modal-v2 .zoa-acc-panel .kb{
  max-width:92ch;
  color:#263b52!important;
}

#zoa-knowledge-modal.zoa-knowledge-modal-v2 .zoa-acc-panel p{
  margin:0 0 10px!important;
  color:#263b52!important;
}

#zoa-knowledge-modal.zoa-knowledge-modal-v2 .zoa-acc-panel p:last-child{
  margin-bottom:0!important;
}

#zoa-knowledge-modal.zoa-knowledge-modal-v2 .zoa-acc-panel strong{
  color:#102f55!important;
  font-weight:900!important;
}

#zoa-knowledge-modal.zoa-knowledge-modal-v2 .panel-soft,
#zoa-knowledge-modal.zoa-knowledge-modal-v2 .zoa-chemistry-blurb{
  margin:0 0 12px!important;
  padding:13px 14px!important;
  border:1px solid rgba(16,184,193,.17)!important;
  border-radius:13px!important;
  color:#294158!important;
  background:
    linear-gradient(135deg,rgba(16,184,193,.045),rgba(111,120,232,.025)),
    #f9fcfd!important;
}

#zoa-knowledge-modal.zoa-knowledge-modal-v2 .zoa-chemistry-blurb-title{
  display:flex;
  align-items:center;
  gap:8px;
  margin:0 0 7px!important;
  color:#087f91!important;
}

#zoa-knowledge-modal.zoa-knowledge-modal-v2 .zoa-chemistry-blurb-title strong{
  color:#173b61!important;
  font-size:12px!important;
}

/* Tableau périodique dans une surface claire */
#zoa-knowledge-modal.zoa-knowledge-modal-v2 .js-periodic-table{
  width:100%;
  overflow:auto;
  padding:10px;
  border:1px solid #dbe9ee;
  border-radius:13px;
  background:#fff;
}

/* ==========================================================================
   FOOTER
   ========================================================================== */

#zoa-knowledge-modal.zoa-knowledge-modal-v2 .zoa-knowledge-v2__footer{
  flex:0 0 auto;
}

#zoa-knowledge-modal.zoa-knowledge-modal-v2 #zoa-knowledge-close{
  min-width:102px;
}

/* ==========================================================================
   DARK
   ========================================================================== */

html[data-theme="dark"] #zoa-knowledge-modal.zoa-knowledge-modal-v2 .zoa-know-badges,
html[data-theme="dark"] #zoa-knowledge-modal.zoa-knowledge-modal-v2 .zoa-know-body{
  border-color:#28536e!important;
  background:#082945!important;
}

html[data-theme="dark"] #zoa-knowledge-modal.zoa-knowledge-modal-v2 .zoa-know-badges .badge,
html[data-theme="dark"] #zoa-knowledge-modal.zoa-knowledge-modal-v2 .zoa-acc-item{
  border-color:#28536e!important;
  color:#dcecf4!important;
  background:rgba(255,255,255,.035)!important;
}

html[data-theme="dark"] #zoa-knowledge-modal.zoa-knowledge-modal-v2 .zoa-acc-title,
html[data-theme="dark"] #zoa-knowledge-modal.zoa-knowledge-modal-v2 .acc--elev .zoa-acc-title{
  color:#edfaff!important;
  background:rgba(255,255,255,.025)!important;
}

html[data-theme="dark"] #zoa-knowledge-modal.zoa-knowledge-modal-v2 .zoa-acc-panel,
html[data-theme="dark"] #zoa-knowledge-modal.zoa-knowledge-modal-v2 .zoa-acc-panel .kb,
html[data-theme="dark"] #zoa-knowledge-modal.zoa-knowledge-modal-v2 .zoa-acc-panel p{
  border-color:#28536e!important;
  color:#d7e8f1!important;
  background:#0a3151!important;
}

html[data-theme="dark"] #zoa-knowledge-modal.zoa-knowledge-modal-v2 .zoa-acc-panel strong{
  color:#fff!important;
}

html[data-theme="dark"] #zoa-knowledge-modal.zoa-knowledge-modal-v2 .panel-soft,
html[data-theme="dark"] #zoa-knowledge-modal.zoa-knowledge-modal-v2 .zoa-chemistry-blurb,
html[data-theme="dark"] #zoa-knowledge-modal.zoa-knowledge-modal-v2 .js-periodic-table{
  border-color:#28536e!important;
  color:#d7e8f1!important;
  background:#082945!important;
}

/* ==========================================================================
   MOBILE
   ========================================================================== */

@media (max-width:760px){
  #zoa-knowledge-modal.zoa-knowledge-modal-v2{
    padding:10px!important;
  }

  #zoa-knowledge-modal.zoa-knowledge-modal-v2 .zoa-modal-v2__dialog{
    width:min(calc(100vw - 20px),560px)!important;
    max-width:560px!important;
    max-height:calc(100dvh - 20px)!important;
    border-radius:20px!important;
  }

  #zoa-knowledge-modal.zoa-knowledge-modal-v2 .zoa-know-head{
    min-height:148px;
    grid-template-columns:minmax(0,1fr) 118px;
    gap:10px;
    padding:12px 48px 12px 12px!important;
  }

  #zoa-knowledge-modal.zoa-knowledge-modal-v2 .zoa-know-head__left{
    grid-template-columns:68px minmax(0,1fr);
    gap:10px;
  }

  #zoa-knowledge-modal.zoa-knowledge-modal-v2 .zoa-atom-card{
    width:68px!important;
    min-width:68px!important;
    height:88px!important;
    padding:7px 8px!important;
    border-radius:13px!important;
  }

  #zoa-knowledge-modal.zoa-knowledge-modal-v2 .zoa-atom-num{
    font-size:9px!important;
  }

  #zoa-knowledge-modal.zoa-knowledge-modal-v2 .zoa-atom-mass{
    font-size:7px!important;
  }

  #zoa-knowledge-modal.zoa-knowledge-modal-v2 .zoa-atom-sym{
    font-size:31px!important;
  }

  #zoa-knowledge-modal.zoa-knowledge-modal-v2 .zoa-atom-name{
    font-size:8px!important;
  }

  #zoa-knowledge-modal.zoa-knowledge-modal-v2 .zoa-knowledge-v2__kicker{
    font-size:7px;
  }

  #zoa-knowledge-modal.zoa-knowledge-modal-v2 .zoa-atom-name-xl{
    font-size:18px!important;
    line-height:1.06!important;
  }

  #zoa-knowledge-modal.zoa-knowledge-modal-v2 .zoa-atom-meta > .badge.accent{
    min-height:23px;
    padding:4px 6px!important;
    font-size:7px!important;
  }

  #zoa-knowledge-modal.zoa-knowledge-modal-v2 .zoa-know-head__right{
    min-height:98px;
    border-radius:13px;
  }

  #zoa-knowledge-modal.zoa-knowledge-modal-v2 model-viewer.zoa-mv-float{
    position:relative!important;
    width:100%!important;
    height:112px!important;
    margin:0!important;
  }

  #zoa-knowledge-modal.zoa-knowledge-modal-v2 .zoa-modal__close{
    top:10px!important;
    right:10px!important;
    width:32px!important;
    height:32px!important;
    border-radius:9px!important;
    font-size:18px!important;
  }

  #zoa-knowledge-modal.zoa-knowledge-modal-v2 .zoa-know-badges{
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:6px!important;
    padding:9px 10px!important;
  }

  #zoa-knowledge-modal.zoa-knowledge-modal-v2 .zoa-know-badges .badge{
    min-height:36px;
    padding:7px 8px!important;
    border-radius:10px!important;
    font-size:10px!important;
  }

  #zoa-knowledge-modal.zoa-knowledge-modal-v2 .zoa-know-body{
    padding:10px!important;
  }

  #zoa-knowledge-modal.zoa-knowledge-modal-v2 .zoa-accordion{
    gap:7px!important;
  }

  #zoa-knowledge-modal.zoa-knowledge-modal-v2 .zoa-acc-item{
    border-radius:12px!important;
  }

  #zoa-knowledge-modal.zoa-knowledge-modal-v2 .zoa-acc-title,
  #zoa-knowledge-modal.zoa-knowledge-modal-v2 .acc--elev .zoa-acc-title{
    min-height:44px;
    padding:9px 10px 9px 12px!important;
    font-size:12px!important;
  }

  #zoa-knowledge-modal.zoa-knowledge-modal-v2 .zoa-acc-panel{
    padding:12px!important;
    font-size:13px!important;
    line-height:1.58!important;
  }

  #zoa-knowledge-modal.zoa-knowledge-modal-v2 .zoa-modal-v2__footer{
    min-height:60px;
    padding:10px 12px!important;
  }
}

@media (max-width:390px){
  #zoa-knowledge-modal.zoa-knowledge-modal-v2 .zoa-know-head{
    grid-template-columns:minmax(0,1fr) 102px;
    padding-right:44px!important;
  }

  #zoa-knowledge-modal.zoa-knowledge-modal-v2 .zoa-know-head__left{
    grid-template-columns:60px minmax(0,1fr);
  }

  #zoa-knowledge-modal.zoa-knowledge-modal-v2 .zoa-atom-card{
    width:60px!important;
    min-width:60px!important;
    height:82px!important;
  }

  #zoa-knowledge-modal.zoa-knowledge-modal-v2 .zoa-atom-sym{
    font-size:28px!important;
  }

  #zoa-knowledge-modal.zoa-knowledge-modal-v2 .zoa-atom-name-xl{
    font-size:16px!important;
  }
}

/* ==========================================================================
   Knowledge Modal V2.1 — compaction du hero + hiérarchie des métadonnées
   ========================================================================== */

#zoa-knowledge-modal.zoa-knowledge-modal-v2 .zoa-know-head{
  min-height:158px!important;
  grid-template-columns:minmax(0,1fr) 320px!important;
  gap:16px!important;
  padding:14px 58px 14px 16px!important;
}

#zoa-knowledge-modal.zoa-knowledge-modal-v2 .zoa-know-head__left{
  grid-template-columns:92px minmax(0,1fr)!important;
  grid-template-areas:"atom meta"!important;
  gap:14px!important;
}

#zoa-knowledge-modal.zoa-knowledge-modal-v2 .zoa-atom-card{
  grid-area:atom!important;
  width:92px!important;
  min-width:92px!important;
  height:112px!important;
  padding:9px 10px!important;
}

#zoa-knowledge-modal.zoa-knowledge-modal-v2 .zoa-atom-meta{
  grid-area:meta!important;
  display:flex!important;
  flex-direction:row!important;
  flex-wrap:wrap!important;
  align-content:center!important;
  align-items:center!important;
  gap:7px 8px!important;
}

#zoa-knowledge-modal.zoa-knowledge-modal-v2 .zoa-knowledge-v2__kicker{
  flex:0 0 100%;
  margin:0!important;
}

#zoa-knowledge-modal.zoa-knowledge-modal-v2 .zoa-atom-name-xl{
  flex:0 1 auto;
  font-size:26px!important;
}

#zoa-knowledge-modal.zoa-knowledge-modal-v2 .zoa-atom-meta > .badge.accent{
  flex:0 0 auto;
  margin:0!important;
}

#zoa-knowledge-modal.zoa-knowledge-modal-v2 .zoa-atom-sym{
  font-size:38px!important;
}

#zoa-knowledge-modal.zoa-knowledge-modal-v2 .zoa-know-head__right{
  min-height:126px!important;
  border-radius:16px!important;
}

#zoa-knowledge-modal.zoa-knowledge-modal-v2 model-viewer.zoa-mv-float{
  height:145px!important;
}

#zoa-knowledge-modal.zoa-knowledge-modal-v2 .zoa-know-badges .zoa-know-stat{
  min-height:48px!important;
  display:flex!important;
  flex-direction:column!important;
  align-items:flex-start!important;
  justify-content:center!important;
  gap:4px!important;
  padding:8px 10px!important;
}

#zoa-knowledge-modal.zoa-knowledge-modal-v2 .zoa-know-stat__label{
  display:block;
  color:#0d9da5!important;
  font-size:8px!important;
  line-height:1!important;
  font-weight:950!important;
  letter-spacing:.09em;
  text-transform:uppercase;
}

#zoa-knowledge-modal.zoa-knowledge-modal-v2 .zoa-know-stat__value{
  display:block;
  max-width:100%;
  overflow:hidden;
  color:#173b61!important;
  font-size:12px!important;
  line-height:1.15!important;
  font-weight:900!important;
  text-overflow:ellipsis;
}

#zoa-knowledge-modal.zoa-knowledge-modal-v2 .zoa-know-stat--reference .zoa-know-stat__label{
  color:#697f95!important;
}

html[data-theme="dark"] #zoa-knowledge-modal.zoa-knowledge-modal-v2 .zoa-know-stat__value{
  color:#edfaff!important;
}

@media (max-width:760px){
  #zoa-knowledge-modal.zoa-knowledge-modal-v2 .zoa-know-head{
    min-height:126px!important;
    grid-template-columns:minmax(0,1fr) 108px!important;
    gap:9px!important;
    padding:10px 44px 10px 10px!important;
  }

  #zoa-knowledge-modal.zoa-knowledge-modal-v2 .zoa-know-head__left{
    grid-template-columns:58px minmax(0,1fr)!important;
    grid-template-areas:"atom meta"!important;
    gap:9px!important;
  }

  #zoa-knowledge-modal.zoa-knowledge-modal-v2 .zoa-atom-card{
    width:58px!important;
    min-width:58px!important;
    height:78px!important;
    padding:6px 7px!important;
    border-radius:12px!important;
  }

  #zoa-knowledge-modal.zoa-knowledge-modal-v2 .zoa-atom-num{ font-size:8px!important; }
  #zoa-knowledge-modal.zoa-knowledge-modal-v2 .zoa-atom-mass{ font-size:6px!important; }
  #zoa-knowledge-modal.zoa-knowledge-modal-v2 .zoa-atom-sym{ font-size:27px!important; }
  #zoa-knowledge-modal.zoa-knowledge-modal-v2 .zoa-atom-name{ font-size:7px!important; }

  #zoa-knowledge-modal.zoa-knowledge-modal-v2 .zoa-atom-meta{
    gap:5px 6px!important;
  }

  #zoa-knowledge-modal.zoa-knowledge-modal-v2 .zoa-knowledge-v2__kicker{
    font-size:7px!important;
  }

  #zoa-knowledge-modal.zoa-knowledge-modal-v2 .zoa-atom-name-xl{
    font-size:18px!important;
  }

  #zoa-knowledge-modal.zoa-knowledge-modal-v2 .zoa-atom-meta > .badge.accent{
    min-height:21px!important;
    padding:3px 6px!important;
    font-size:7px!important;
  }

  #zoa-knowledge-modal.zoa-knowledge-modal-v2 .zoa-know-head__right{
    min-height:92px!important;
    border-radius:12px!important;
  }

  #zoa-knowledge-modal.zoa-knowledge-modal-v2 model-viewer.zoa-mv-float{
    height:100px!important;
  }

  #zoa-knowledge-modal.zoa-knowledge-modal-v2 .zoa-know-badges{
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
    gap:6px!important;
    padding:8px 10px!important;
  }

  #zoa-knowledge-modal.zoa-knowledge-modal-v2 .zoa-know-badges .zoa-know-stat{
    min-height:44px!important;
    padding:7px 8px!important;
    gap:3px!important;
  }

  #zoa-knowledge-modal.zoa-knowledge-modal-v2 .zoa-know-stat__label{
    font-size:7px!important;
  }

  #zoa-knowledge-modal.zoa-knowledge-modal-v2 .zoa-know-stat__value{
    font-size:11px!important;
    white-space:normal;
  }
}

@media (max-width:390px){
  #zoa-knowledge-modal.zoa-knowledge-modal-v2 .zoa-know-head{
    grid-template-columns:minmax(0,1fr) 96px!important;
    padding-right:42px!important;
  }

  #zoa-knowledge-modal.zoa-knowledge-modal-v2 .zoa-know-head__left{
    grid-template-columns:54px minmax(0,1fr)!important;
  }

  #zoa-knowledge-modal.zoa-knowledge-modal-v2 .zoa-atom-card{
    width:54px!important;
    min-width:54px!important;
    height:74px!important;
  }

  #zoa-knowledge-modal.zoa-knowledge-modal-v2 .zoa-atom-name-xl{
    font-size:17px!important;
  }
}


/* ==========================================================================
   Knowledge Modal V2.2 — finitions visuelles
   Footer V2, viewport 3D clair, texte pleine largeur et carte atomique.
   ========================================================================== */

/* Footer : même bandeau bleu que les autres modales V2. */
#zoa-knowledge-modal.zoa-knowledge-modal-v2
.zoa-modal__foot.zoa-modal-v2__footer.zoa-knowledge-v2__footer{
  position:relative!important;
  z-index:3!important;
  min-height:70px!important;
  display:flex!important;
  align-items:center!important;
  justify-content:flex-end!important;
  gap:10px!important;
  margin:0!important;
  padding:12px 18px!important;
  border:0!important;
  border-top:1px solid rgba(101,229,223,.12)!important;
  background:
    radial-gradient(250px 100px at 100% 0%,rgba(64,213,170,.15),transparent 74%),
    linear-gradient(112deg,#052a54,#07386b 64%,#0a5579)!important;
}

#zoa-knowledge-modal.zoa-knowledge-modal-v2
.zoa-modal__foot.zoa-modal-v2__footer.zoa-knowledge-v2__footer::before{
  content:""!important;
  position:absolute!important;
  left:20px!important;
  top:50%!important;
  width:118px!important;
  height:30px!important;
  transform:translateY(-50%)!important;
  background-image:url("/modules/zoaicp/views/img/logo_zoanthuslab_dark.svg")!important;
  background-repeat:no-repeat!important;
  background-position:left center!important;
  background-size:contain!important;
  opacity:.92!important;
  pointer-events:none!important;
}

#zoa-knowledge-modal.zoa-knowledge-modal-v2
.zoa-modal__foot.zoa-modal-v2__footer.zoa-knowledge-v2__footer::after{
  display:none!important;
}

/* Le modèle 3D ressort mieux sur une vraie surface claire. */
#zoa-knowledge-modal.zoa-knowledge-modal-v2 .zoa-know-head__right{
  border-color:rgba(197,230,235,.95)!important;
  background:
    radial-gradient(240px 120px at 50% 55%,rgba(16,184,193,.07),transparent 74%),
    linear-gradient(145deg,rgba(255,255,255,.99),rgba(245,252,253,.97))!important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.95),
    0 10px 26px rgba(1,22,48,.10)!important;
}

#zoa-knowledge-modal.zoa-knowledge-modal-v2 model-viewer.zoa-mv-float{
  background:transparent!important;
  --poster-color:transparent!important;
}

/* Le contenu rédactionnel exploite toute la largeur disponible. */
#zoa-knowledge-modal.zoa-knowledge-modal-v2 .zoa-acc-panel .kb{
  width:100%!important;
  max-width:none!important;
}

#zoa-knowledge-modal.zoa-knowledge-modal-v2 .zoa-acc-panel .kb > *{
  max-width:none!important;
}

/* Métadonnées : un peu plus présentes et lisibles. */
#zoa-knowledge-modal.zoa-knowledge-modal-v2 .zoa-know-badges .zoa-know-stat{
  min-height:54px!important;
  padding:9px 11px!important;
}

#zoa-knowledge-modal.zoa-knowledge-modal-v2 .zoa-know-stat__label{
  font-size:9px!important;
  letter-spacing:.085em!important;
}

#zoa-knowledge-modal.zoa-knowledge-modal-v2 .zoa-know-stat__value{
  font-size:14px!important;
  line-height:1.18!important;
}

/* --------------------------------------------------------------------------
   Carte atomique : proportions et hiérarchie d'une vraie case périodique.
   -------------------------------------------------------------------------- */
#zoa-knowledge-modal.zoa-knowledge-modal-v2 .zoa-atom-card{
  position:relative!important;
  width:108px!important;
  min-width:108px!important;
  height:122px!important;
  grid-template-columns:1fr auto!important;
  grid-template-rows:18px 1fr 20px!important;
  padding:9px 10px 8px!important;
  overflow:hidden!important;
  border:1px solid rgba(101,229,223,.46)!important;
  border-radius:14px!important;
  background:
    linear-gradient(180deg,rgba(255,255,255,.115),rgba(255,255,255,.065))!important;
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,.05),
    inset 0 1px 0 rgba(255,255,255,.12),
    0 14px 30px rgba(1,22,48,.18)!important;
}

#zoa-knowledge-modal.zoa-knowledge-modal-v2 .zoa-atom-card::before{
  content:"";
  position:absolute;
  left:0;
  top:0;
  bottom:0;
  width:4px;
  background:linear-gradient(180deg,#65e5df,#10b8c1 62%,#40d5aa);
  opacity:.95;
}

#zoa-knowledge-modal.zoa-knowledge-modal-v2 .zoa-atom-card::after{
  content:"";
  position:absolute;
  left:10px;
  right:10px;
  bottom:25px;
  height:1px;
  background:linear-gradient(90deg,rgba(101,229,223,.35),transparent);
  pointer-events:none;
}

#zoa-knowledge-modal.zoa-knowledge-modal-v2 .zoa-atom-num{
  align-self:start!important;
  justify-self:start!important;
  color:#8cf0e9!important;
  font-size:11px!important;
  font-weight:950!important;
}

#zoa-knowledge-modal.zoa-knowledge-modal-v2 .zoa-atom-mass{
  align-self:start!important;
  justify-self:end!important;
  color:rgba(255,255,255,.52)!important;
  font-size:8px!important;
  font-weight:850!important;
}

#zoa-knowledge-modal.zoa-knowledge-modal-v2 .zoa-atom-sym{
  align-self:center!important;
  justify-self:center!important;
  margin:0!important;
  color:#fff!important;
  font-size:44px!important;
  line-height:.9!important;
  font-weight:950!important;
  letter-spacing:-.055em!important;
}

#zoa-knowledge-modal.zoa-knowledge-modal-v2 .zoa-atom-name{
  align-self:end!important;
  justify-self:center!important;
  width:100%;
  color:rgba(255,255,255,.78)!important;
  font-size:9px!important;
  line-height:1!important;
  font-weight:850!important;
  text-align:center!important;
}

/* Texte d'accordéon légèrement plus confortable sur desktop. */
#zoa-knowledge-modal.zoa-knowledge-modal-v2 .zoa-acc-panel{
  font-size:15px!important;
  line-height:1.68!important;
}

@media (max-width:760px){
  #zoa-knowledge-modal.zoa-knowledge-modal-v2 .zoa-modal__foot.zoa-modal-v2__footer.zoa-knowledge-v2__footer{
    min-height:60px!important;
    padding:10px 12px!important;
  }

  #zoa-knowledge-modal.zoa-knowledge-modal-v2 .zoa-modal__foot.zoa-modal-v2__footer.zoa-knowledge-v2__footer::before{
    left:14px!important;
    width:102px!important;
    height:26px!important;
  }

  #zoa-knowledge-modal.zoa-knowledge-modal-v2 .zoa-know-badges .zoa-know-stat{
    min-height:48px!important;
    padding:8px 9px!important;
  }

  #zoa-knowledge-modal.zoa-knowledge-modal-v2 .zoa-know-stat__label{
    font-size:8px!important;
  }

  #zoa-knowledge-modal.zoa-knowledge-modal-v2 .zoa-know-stat__value{
    font-size:12px!important;
  }

  #zoa-knowledge-modal.zoa-knowledge-modal-v2 .zoa-atom-card{
    width:62px!important;
    min-width:62px!important;
    height:82px!important;
    grid-template-rows:13px 1fr 15px!important;
    padding:6px 7px 5px!important;
    border-radius:11px!important;
  }

  #zoa-knowledge-modal.zoa-knowledge-modal-v2 .zoa-atom-card::before{
    width:3px;
  }

  #zoa-knowledge-modal.zoa-knowledge-modal-v2 .zoa-atom-card::after{
    left:7px;
    right:7px;
    bottom:18px;
  }

  #zoa-knowledge-modal.zoa-knowledge-modal-v2 .zoa-atom-num{
    font-size:8px!important;
  }

  #zoa-knowledge-modal.zoa-knowledge-modal-v2 .zoa-atom-mass{
    font-size:6px!important;
  }

  #zoa-knowledge-modal.zoa-knowledge-modal-v2 .zoa-atom-sym{
    font-size:29px!important;
  }

  #zoa-knowledge-modal.zoa-knowledge-modal-v2 .zoa-atom-name{
    font-size:7px!important;
  }

  #zoa-knowledge-modal.zoa-knowledge-modal-v2 .zoa-acc-panel{
    font-size:14px!important;
    line-height:1.62!important;
  }
}

/* ==========================================================================
   Knowledge Modal V2.3 — hero affiné + carte 3D conditionnelle
   ========================================================================== */

/* Carte 3D : translucide pour garder l'ADN du hero, mais assez claire
   pour que les orbites et électrons restent lisibles. */
#zoa-knowledge-modal.zoa-knowledge-modal-v2 .zoa-know-head__right{
  background:
    radial-gradient(240px 130px at 50% 52%,rgba(255,255,255,.42),transparent 76%),
    rgba(255,255,255,.58)!important;
  border-color:rgba(255,255,255,.34)!important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.34),
    0 10px 26px rgba(2,30,57,.08)!important;
  backdrop-filter:blur(7px) saturate(.94);
  -webkit-backdrop-filter:blur(7px) saturate(.94);
}

/* Carte périodique un peu plus compacte et identité légèrement décalée
   pour éviter que le texte paraisse collé à la tuile. */
#zoa-knowledge-modal.zoa-knowledge-modal-v2 .zoa-know-head__left{
  grid-template-columns:84px minmax(0,1fr)!important;
  gap:20px!important;
}

#zoa-knowledge-modal.zoa-knowledge-modal-v2 .zoa-atom-card{
  width:84px!important;
  min-width:84px!important;
  height:106px!important;
  padding:8px 9px!important;
}

#zoa-knowledge-modal.zoa-knowledge-modal-v2 .zoa-atom-meta{
  padding-left:3px!important;
}

#zoa-knowledge-modal.zoa-knowledge-modal-v2 .zoa-atom-sym{
  font-size:35px!important;
}

/* Si aucun fichier GLB n'existe, la zone 3D disparaît et le contenu du hero
   utilise toute la largeur disponible. */
#zoa-knowledge-modal.zoa-knowledge-modal-v2 .zoa-know-head--no-3d{
  grid-template-columns:1fr!important;
}

#zoa-knowledge-modal.zoa-knowledge-modal-v2 .zoa-know-head--no-3d .zoa-know-head__left{
  max-width:720px;
}

/* Mobile */
@media (max-width:760px){
  #zoa-knowledge-modal.zoa-knowledge-modal-v2 .zoa-know-head__left{
    grid-template-columns:52px minmax(0,1fr)!important;
    gap:12px!important;
  }

  #zoa-knowledge-modal.zoa-knowledge-modal-v2 .zoa-atom-card{
    width:52px!important;
    min-width:52px!important;
    height:72px!important;
    padding:6px!important;
  }

  #zoa-knowledge-modal.zoa-knowledge-modal-v2 .zoa-atom-sym{
    font-size:25px!important;
  }

  #zoa-knowledge-modal.zoa-knowledge-modal-v2 .zoa-atom-meta{
    padding-left:2px!important;
  }

  #zoa-knowledge-modal.zoa-knowledge-modal-v2 .zoa-know-head__right{
    background:
      radial-gradient(150px 95px at 50% 52%,rgba(255,255,255,.44),transparent 76%),
      rgba(255,255,255,.56)!important;
  }

  #zoa-knowledge-modal.zoa-knowledge-modal-v2 .zoa-know-head--no-3d{
    grid-template-columns:1fr!important;
    padding-right:44px!important;
  }

  #zoa-knowledge-modal.zoa-knowledge-modal-v2 .zoa-know-head--no-3d .zoa-know-head__left{
    grid-template-columns:52px minmax(0,1fr)!important;
    max-width:none;
  }
}

/* ==========================================================================
   Knowledge Modal V2.4 — modèle 3D flottant dans le hero
   ========================================================================== */

#zoa-knowledge-modal.zoa-knowledge-modal-v2{
  --know-3d-halo:rgba(255,255,255,.13);
  --know-3d-glow:rgba(101,229,223,.16);
  --know-3d-ring:rgba(101,229,223,.16);
}

/* On abandonne la "card" rectangulaire claire :
   le modèle flotte dans le hero avec un halo scientifique discret. */
#zoa-knowledge-modal.zoa-knowledge-modal-v2 .zoa-know-head__right{
  position:relative!important;
  min-height:130px!important;
  overflow:visible!important;
  border:0!important;
  border-radius:0!important;
  background:transparent!important;
  box-shadow:none!important;
  backdrop-filter:none!important;
  -webkit-backdrop-filter:none!important;
}

#zoa-knowledge-modal.zoa-knowledge-modal-v2 .zoa-know-head__right::before{
  content:"";
  position:absolute;
  z-index:0;
  left:50%;
  top:50%;
  width:270px;
  height:118px;
  transform:translate(-50%,-50%);
  border-radius:50%;
  background:
    radial-gradient(ellipse at center,
      var(--know-3d-halo) 0%,
      rgba(255,255,255,.09) 34%,
      var(--know-3d-glow) 56%,
      transparent 76%);
  filter:blur(1px);
  pointer-events:none;
}

#zoa-knowledge-modal.zoa-knowledge-modal-v2 .zoa-know-head__right::after{
  content:"";
  position:absolute;
  z-index:0;
  left:50%;
  top:50%;
  width:238px;
  height:92px;
  transform:translate(-50%,-50%);
  border:1px solid var(--know-3d-ring);
  border-radius:50%;
  box-shadow:
    0 0 0 16px rgba(101,229,223,.025),
    0 0 32px rgba(101,229,223,.08);
  pointer-events:none;
}

#zoa-knowledge-modal.zoa-knowledge-modal-v2 model-viewer.zoa-mv-float{
  position:relative!important;
  z-index:1!important;
  width:100%!important;
  height:154px!important;
  margin:0!important;
  border:0!important;
  border-radius:0!important;
  background:transparent!important;
  --poster-color:transparent;
}

/* La zone droite peut être légèrement plus étroite maintenant qu'il n'y a
   plus de card rectangulaire. */
#zoa-knowledge-modal.zoa-knowledge-modal-v2 .zoa-know-head{
  grid-template-columns:minmax(0,1fr) 300px!important;
}

/* Mobile */
@media (max-width:760px){
  #zoa-knowledge-modal.zoa-knowledge-modal-v2 .zoa-know-head{
    grid-template-columns:minmax(0,1fr) 104px!important;
  }

  #zoa-knowledge-modal.zoa-knowledge-modal-v2 .zoa-know-head__right{
    min-height:92px!important;
  }

  #zoa-knowledge-modal.zoa-knowledge-modal-v2 .zoa-know-head__right::before{
    width:112px;
    height:74px;
  }

  #zoa-knowledge-modal.zoa-knowledge-modal-v2 .zoa-know-head__right::after{
    width:96px;
    height:58px;
    box-shadow:
      0 0 0 9px rgba(101,229,223,.022),
      0 0 20px rgba(101,229,223,.07);
  }

  #zoa-knowledge-modal.zoa-knowledge-modal-v2 model-viewer.zoa-mv-float{
    height:100px!important;
  }
}

/* ==========================================================================
   Knowledge Modal V2.4.1 — 3D intégrée au hero, sans effet projecteur
   ========================================================================== */

/* On retire l'anneau/halo trop visible de la V2.4. */
#zoa-knowledge-modal.zoa-knowledge-modal-v2 .zoa-know-head__right::after{
  display:none!important;
}

#zoa-knowledge-modal.zoa-knowledge-modal-v2 .zoa-know-head__right::before{
  left:50%!important;
  top:52%!important;
  width:210px!important;
  height:92px!important;
  transform:translate(-50%,-50%)!important;
  border-radius:50%!important;
  background:
    radial-gradient(ellipse at center,
      rgba(255,255,255,.10) 0%,
      rgba(101,229,223,.055) 42%,
      transparent 74%)!important;
  filter:blur(5px)!important;
  opacity:.85!important;
}

/* Le modèle reste directement dans le hero, sans cadre. */
#zoa-knowledge-modal.zoa-knowledge-modal-v2 .zoa-know-head__right{
  overflow:hidden!important;
  background:transparent!important;
}

#zoa-knowledge-modal.zoa-knowledge-modal-v2 model-viewer.zoa-mv-float{
  width:100%!important;
  height:148px!important;
  background:transparent!important;
  --poster-color:transparent;
}

/* Mobile : effet encore plus discret. */
@media (max-width:760px){
  #zoa-knowledge-modal.zoa-knowledge-modal-v2 .zoa-know-head__right::before{
    width:92px!important;
    height:58px!important;
    background:
      radial-gradient(ellipse at center,
        rgba(255,255,255,.085) 0%,
        rgba(101,229,223,.04) 44%,
        transparent 76%)!important;
    filter:blur(4px)!important;
  }

  #zoa-knowledge-modal.zoa-knowledge-modal-v2 model-viewer.zoa-mv-float{
    height:94px!important;
  }
}

/* ==========================================================================
   Knowledge Modal V2.4.2 — halo V2 + palette matériaux 3D
   ========================================================================== */

#zoa-knowledge-modal.zoa-knowledge-modal-v2{
  --know-3d-proton:#ff6b82;
  --know-3d-neutron:#4f7dff;
  --know-3d-electron:#65e5df;
  --know-3d-orbit:#b9e5f1;
}

/* Retour d'un halo, plus contenu que la première version. */
#zoa-knowledge-modal.zoa-knowledge-modal-v2 .zoa-know-head__right{
  position:relative!important;
  overflow:visible!important;
  background:transparent!important;
}

#zoa-knowledge-modal.zoa-knowledge-modal-v2 .zoa-know-head__right::before{
  content:""!important;
  display:block!important;
  position:absolute!important;
  z-index:0!important;
  left:50%!important;
  top:52%!important;
  width:238px!important;
  height:102px!important;
  transform:translate(-50%,-50%)!important;
  border-radius:50%!important;
  background:
    radial-gradient(ellipse at center,
      rgba(255,255,255,.16) 0%,
      rgba(101,229,223,.12) 34%,
      rgba(16,184,193,.055) 58%,
      transparent 78%)!important;
  filter:blur(7px)!important;
  opacity:1!important;
  pointer-events:none!important;
}

#zoa-knowledge-modal.zoa-knowledge-modal-v2 .zoa-know-head__right::after{
  content:""!important;
  display:block!important;
  position:absolute!important;
  z-index:0!important;
  left:50%!important;
  top:52%!important;
  width:208px!important;
  height:76px!important;
  transform:translate(-50%,-50%)!important;
  border:1px solid rgba(101,229,223,.13)!important;
  border-radius:50%!important;
  box-shadow:
    0 0 0 11px rgba(101,229,223,.018),
    0 0 26px rgba(101,229,223,.06)!important;
  opacity:.72!important;
  pointer-events:none!important;
}

#zoa-knowledge-modal.zoa-knowledge-modal-v2 model-viewer.zoa-mv-float{
  position:relative!important;
  z-index:1!important;
  background:transparent!important;
  --poster-color:transparent;
}

/* Mobile : halo réduit pour ne pas concurrencer le titre. */
@media (max-width:760px){
  #zoa-knowledge-modal.zoa-knowledge-modal-v2 .zoa-know-head__right::before{
    width:108px!important;
    height:66px!important;
    filter:blur(5px)!important;
  }

  #zoa-knowledge-modal.zoa-knowledge-modal-v2 .zoa-know-head__right::after{
    width:92px!important;
    height:52px!important;
    box-shadow:
      0 0 0 7px rgba(101,229,223,.016),
      0 0 17px rgba(101,229,223,.05)!important;
  }
}

/* ==========================================================================
   Knowledge Modal V2.4.3 — modèle 3D plus grand + palette V2 plus contrastée
   ========================================================================== */

#zoa-knowledge-modal.zoa-knowledge-modal-v2{
  --know-3d-proton:#ff4d7d;
  --know-3d-neutron:#426dff;
  --know-3d-electron:#39e6c1;
  --know-3d-orbit:#55d5ff;
}

#zoa-knowledge-modal.zoa-knowledge-modal-v2 .zoa-know-head__right::before{
  width:270px!important;
  height:112px!important;
  background:
    radial-gradient(ellipse at center,
      rgba(255,255,255,.14) 0%,
      rgba(85,213,255,.13) 33%,
      rgba(57,230,193,.065) 56%,
      transparent 79%)!important;
  filter:blur(8px)!important;
}

#zoa-knowledge-modal.zoa-knowledge-modal-v2 .zoa-know-head__right::after{
  width:230px!important;
  height:82px!important;
  border-color:rgba(85,213,255,.16)!important;
  box-shadow:
    0 0 0 12px rgba(85,213,255,.018),
    0 0 30px rgba(57,230,193,.065)!important;
}

#zoa-knowledge-modal.zoa-knowledge-modal-v2 .zoa-know-head__right{
  overflow:visible!important;
}

#zoa-knowledge-modal.zoa-knowledge-modal-v2 model-viewer.zoa-mv-float{
  width:126%!important;
  max-width:none!important;
  height:174px!important;
  margin-left:-13%!important;
  overflow:visible!important;
}

@media (max-width:760px){
  #zoa-knowledge-modal.zoa-knowledge-modal-v2 .zoa-know-head__right::before{
    width:122px!important;
    height:72px!important;
  }

  #zoa-knowledge-modal.zoa-knowledge-modal-v2 .zoa-know-head__right::after{
    width:104px!important;
    height:56px!important;
  }

  #zoa-knowledge-modal.zoa-knowledge-modal-v2 model-viewer.zoa-mv-float{
    width:132%!important;
    height:112px!important;
    margin-left:-16%!important;
  }
}

/* ==========================================================================
   Knowledge Modal V2.4.4 — 3D plus grande + saturation fiable
   ========================================================================== */

#zoa-knowledge-modal.zoa-knowledge-modal-v2{
  --know-3d-proton:#ff315f;
  --know-3d-neutron:#3568ff;
  --know-3d-electron:#46f0c4;
  --know-3d-orbit:#8eeaff;
}

/* Modèle plus présent dans le hero. */
#zoa-knowledge-modal.zoa-knowledge-modal-v2 model-viewer.zoa-mv-float{
  width:142%!important;
  max-width:none!important;
  height:192px!important;
  margin-left:-21%!important;
  overflow:visible!important;

  /* Le filtre agit sur le rendu WebGL final et garantit un contraste
     plus franc même si le GLB contient ses propres textures/matériaux. */
  filter:saturate(1.55) contrast(1.10) brightness(.94)!important;
}

/* Halo conservé mais moins blanchissant. */
#zoa-knowledge-modal.zoa-knowledge-modal-v2 .zoa-know-head__right::before{
  width:286px!important;
  height:116px!important;
  background:
    radial-gradient(ellipse at center,
      rgba(142,234,255,.14) 0%,
      rgba(70,240,196,.085) 38%,
      rgba(16,184,193,.035) 60%,
      transparent 79%)!important;
  filter:blur(9px)!important;
}

#zoa-knowledge-modal.zoa-knowledge-modal-v2 .zoa-know-head__right::after{
  width:238px!important;
  height:82px!important;
  border-color:rgba(142,234,255,.13)!important;
  box-shadow:
    0 0 0 11px rgba(142,234,255,.014),
    0 0 26px rgba(70,240,196,.045)!important;
}

@media (max-width:760px){
  #zoa-knowledge-modal.zoa-knowledge-modal-v2 model-viewer.zoa-mv-float{
    width:150%!important;
    height:126px!important;
    margin-left:-25%!important;
    filter:saturate(1.55) contrast(1.10) brightness(.95)!important;
  }

  #zoa-knowledge-modal.zoa-knowledge-modal-v2 .zoa-know-head__right::before{
    width:126px!important;
    height:72px!important;
  }

  #zoa-knowledge-modal.zoa-knowledge-modal-v2 .zoa-know-head__right::after{
    width:104px!important;
    height:54px!important;
  }
}

/* === KNOWLEDGE MODAL V2.4.5 — MOBILE 3D VIEWPORT === */
@media (max-width:760px){
  /*
   * L'ancien rendu mobile utilisait une colonne 3D de 108px puis agrandissait
   * le model-viewer à 150% avec une marge négative. Le parent étant masqué,
   * les orbites du modèle étaient coupées sur les côtés.
   *
   * On donne maintenant réellement plus de place au viewport 3D et on laisse
   * model-viewer occuper 100% de son conteneur, sans zoom CSS artificiel.
   */
  #zoa-knowledge-modal.zoa-knowledge-modal-v2 .zoa-know-head{
    grid-template-columns:minmax(0,1fr) 132px!important;
    gap:8px!important;
  }

  #zoa-knowledge-modal.zoa-knowledge-modal-v2 .zoa-know-head__right{
    min-width:132px!important;
    width:132px!important;
    min-height:132px!important;
    overflow:hidden!important;
  }

  #zoa-knowledge-modal.zoa-knowledge-modal-v2 model-viewer.zoa-mv-float{
    width:100%!important;
    height:132px!important;
    margin-left:0!important;
    margin-right:0!important;
    transform:none!important;
  }
}

/* Très petits écrans : garder un peu d'air pour les infos élément. */
@media (max-width:360px){
  #zoa-knowledge-modal.zoa-knowledge-modal-v2 .zoa-know-head{
    grid-template-columns:minmax(0,1fr) 124px!important;
  }

  #zoa-knowledge-modal.zoa-knowledge-modal-v2 .zoa-know-head__right{
    min-width:124px!important;
    width:124px!important;
  }
}

/* === KNOWLEDGE MODAL V2.4.6 — MOBILE 3D FRAMING === */
@media (max-width:760px){
  /*
   * Le canvas interne de <model-viewer> reprend les dimensions du host.
   * Pour mieux voir les orbites, on donne un viewport légèrement plus large
   * que haut, au lieu d'un carré 132x132.
   */
  #zoa-knowledge-modal.zoa-knowledge-modal-v2 .zoa-know-head{
    grid-template-columns:minmax(0,1fr) 150px!important;
    gap:8px!important;
  }

  #zoa-knowledge-modal.zoa-knowledge-modal-v2 .zoa-know-head__right{
    width:150px!important;
    min-width:150px!important;
    min-height:124px!important;
    height:124px!important;
    overflow:hidden!important;
  }

  #zoa-knowledge-modal.zoa-knowledge-modal-v2 model-viewer.zoa-mv-float{
    width:150px!important;
    height:124px!important;
    max-width:none!important;
    margin:0!important;
    transform:none!important;
  }
}

@media (max-width:360px){
  #zoa-knowledge-modal.zoa-knowledge-modal-v2 .zoa-know-head{
    grid-template-columns:minmax(0,1fr) 140px!important;
  }

  #zoa-knowledge-modal.zoa-knowledge-modal-v2 .zoa-know-head__right{
    width:140px!important;
    min-width:140px!important;
    height:120px!important;
    min-height:120px!important;
  }

  #zoa-knowledge-modal.zoa-knowledge-modal-v2 model-viewer.zoa-mv-float{
    width:140px!important;
    height:120px!important;
  }
}

/* === KNOWLEDGE MODAL V2.4.7 — MOBILE 3D OVERLAY 210PX === */
@media (max-width:760px){
  /*
   * Le modèle 3D ne doit plus être limité à une petite colonne.
   * Il flotte à droite sur ~210px et peut visuellement empiéter
   * sur la zone gauche, sans réduire la largeur du contenu texte.
   */
  #zoa-knowledge-modal.zoa-knowledge-modal-v2 .zoa-know-head{
    position:relative!important;
    display:block!important;
    min-height:132px!important;
    padding:10px 42px 10px 10px!important;
    overflow:hidden!important;
  }

  #zoa-knowledge-modal.zoa-knowledge-modal-v2 .zoa-know-head__left{
    position:relative!important;
    z-index:3!important;
    width:100%!important;
    min-height:112px!important;
    padding-right:104px!important;
    grid-template-columns:52px minmax(0,1fr)!important;
    gap:12px!important;
  }

  /*
   * Le viewport 3D flotte par-dessus la largeur disponible.
   * Le fond et la bordure du petit ancien conteneur disparaissent.
   */
  #zoa-knowledge-modal.zoa-knowledge-modal-v2 .zoa-know-head__right{
    position:absolute!important;
    z-index:2!important;
    top:0!important;
    right:4px!important;
    width:210px!important;
    min-width:210px!important;
    max-width:210px!important;
    height:132px!important;
    min-height:132px!important;
    margin:0!important;
    padding:0!important;
    overflow:hidden!important;
    border:0!important;
    border-radius:0!important;
    background:transparent!important;
    box-shadow:none!important;
    pointer-events:auto;
  }

  #zoa-knowledge-modal.zoa-knowledge-modal-v2 model-viewer.zoa-mv-float{
    position:absolute!important;
    inset:0!important;
    width:210px!important;
    min-width:210px!important;
    max-width:210px!important;
    height:132px!important;
    min-height:132px!important;
    max-height:132px!important;
    margin:0!important;
    padding:0!important;
    transform:none!important;
    border:0!important;
    background:transparent!important;
  }

  /*
   * Les halos restent derrière le modèle, mais suivent maintenant
   * le viewport élargi.
   */
  #zoa-knowledge-modal.zoa-knowledge-modal-v2 .zoa-know-head__right::before{
    width:190px!important;
    height:92px!important;
    left:10px!important;
    right:auto!important;
  }

  #zoa-knowledge-modal.zoa-knowledge-modal-v2 .zoa-know-head__right::after{
    width:160px!important;
    left:25px!important;
    right:auto!important;
  }
}

/* Très petits mobiles : on reste large sans écraser complètement le texte. */
@media (max-width:360px){
  #zoa-knowledge-modal.zoa-knowledge-modal-v2 .zoa-know-head__left{
    padding-right:94px!important;
  }

  #zoa-knowledge-modal.zoa-knowledge-modal-v2 .zoa-know-head__right,
  #zoa-knowledge-modal.zoa-knowledge-modal-v2 model-viewer.zoa-mv-float{
    width:196px!important;
    min-width:196px!important;
    max-width:196px!important;
  }
}

/* === KNOWLEDGE MODAL V2.4.8 — MOBILE 3D WIDER / LEFT SHIFT === */
@media (max-width:760px){
  /*
   * V2.4.8
   * On élargit réellement le viewport 3D sans changer sa hauteur.
   * Comme il reste ancré à droite, l'augmentation de largeur le décale
   * naturellement vers la gauche tout en donnant plus d'espace aux orbites.
   */
  #zoa-knowledge-modal.zoa-knowledge-modal-v2 .zoa-know-head__right{
    right:0!important;
    width:238px!important;
    min-width:238px!important;
    max-width:238px!important;
  }

  #zoa-knowledge-modal.zoa-knowledge-modal-v2 model-viewer.zoa-mv-float{
    width:238px!important;
    min-width:238px!important;
    max-width:238px!important;
  }

  #zoa-knowledge-modal.zoa-knowledge-modal-v2 .zoa-know-head__right::before{
    width:214px!important;
    left:8px!important;
  }

  #zoa-knowledge-modal.zoa-knowledge-modal-v2 .zoa-know-head__right::after{
    width:184px!important;
    left:22px!important;
  }
}

@media (max-width:360px){
  #zoa-knowledge-modal.zoa-knowledge-modal-v2 .zoa-know-head__right,
  #zoa-knowledge-modal.zoa-knowledge-modal-v2 model-viewer.zoa-mv-float{
    width:220px!important;
    min-width:220px!important;
    max-width:220px!important;
  }
}

/* === KNOWLEDGE MODAL V2.4.9 — UNIFIED MOBILE HERO BACKGROUND === */
@media (max-width:760px){
  /*
   * Le header possède déjà son propre fond V2.
   * La zone 3D ne doit donc ajouter aucun fond/halo autonome :
   * elle devient un simple viewport transparent au-dessus du même hero.
   */
  #zoa-knowledge-modal.zoa-knowledge-modal-v2 .zoa-know-head__right{
    border:0!important;
    border-radius:0!important;
    background:transparent!important;
    background-image:none!important;
    box-shadow:none!important;
    backdrop-filter:none!important;
    -webkit-backdrop-filter:none!important;
  }

  #zoa-knowledge-modal.zoa-knowledge-modal-v2 .zoa-know-head__right::before,
  #zoa-knowledge-modal.zoa-knowledge-modal-v2 .zoa-know-head__right::after{
    content:none!important;
    display:none!important;
    background:none!important;
    box-shadow:none!important;
    filter:none!important;
  }

  #zoa-knowledge-modal.zoa-knowledge-modal-v2 model-viewer.zoa-mv-float{
    border:0!important;
    border-radius:0!important;
    background:transparent!important;
    background-image:none!important;
    box-shadow:none!important;
    --poster-color:transparent!important;
  }
}