/* Share topbar: theme left, logo center, lang right */
.zoa-aside--share-top{
  position: sticky;
  top: 0;
  z-index: 50;
  backdrop-filter: blur(10px);
  padding: 0rem .75rem;
  margin: 0rem 0 1.5rem;
  background: var(--bg-elev);
}


.zoa-aside--share-top::after{
  content:"";
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  bottom: 0;

  width: 100vw;
  height: 2px;
  background: var(--accent-2);

  pointer-events: none;
}

.zoa-share-topbar{
  display: grid;
  grid-template-columns: minmax(180px, 1fr) auto minmax(180px, 1fr);
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  width: 100%	
}

/* Left / Right alignment */
.zoa-share-topbar__left{ justify-self: start; }
.zoa-share-topbar__right{ justify-self: end; display:flex; align-items:center; gap:10px; }

/* Center logo */
.zoa-share-topbar__center{
  justify-self: center;
  display: flex;
  align-items: center;
  line-height: 0;
}

.zoa-share-logo{
  display: block;
  height: 28px;
  width: auto;
}

/* Mobile: stack cleanly */
@media (max-width: 640px){
  /* 1 ligne : switch | logo | langue */
  .zoa-share-topbar{
    grid-template-columns: auto 1fr auto;
    grid-template-areas: none;   /* on annule ton layout en zones */
    row-gap: 0;
    gap: 10px;
    padding: 10px 10px;
  }

  .zoa-share-topbar__left{ justify-self: start; }
  .zoa-share-topbar__center{ justify-self: center; }
  .zoa-share-topbar__right{ justify-self: end; }

  .theme-label{ display:none; } /* garde juste le switch */
}

@media (max-width:640px){
  .zoa-share-topbar__right > a.btn.ghost{ display:none !important; }
}

/* Logos thème (share topbar) */
.zoa-logo{ display:none; line-height:0; }
.zoa-logo svg{ display:block; height:28px; width:auto; }

/* Si ton data-theme est sur html ou un wrapper parent, ça suffit */
[data-theme="light"] .zoa-logo--light{ display:block; }
[data-theme="dark"]  .zoa-logo--dark{ display:block; }

/* ===== CTA mobile bottom (apparaît au scroll) ===== */
.zoa-share-cta-mobile{
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 9999;

  padding: 10px 12px calc(10px + env(safe-area-inset-bottom));
  background: linear-gradient(to top, rgba(0,0,0,.22), rgba(0,0,0,0));
  pointer-events: none;

  transform: translateY(110%);
  opacity: 0;
  transition: transform .22s ease, opacity .22s ease;
}

.zoa-share-cta-mobile__btn{
  width: min(560px, calc(100% - 24px));
  margin: 0 auto;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:10px;

  border-radius: 14px;
  box-shadow: var(--shadow-lg);
  pointer-events: auto;
  white-space: nowrap;
}

.zoa-share-cta-mobile.is-visible{
  transform: translateY(0);
  opacity: 1;
}

/* desktop: jamais afficher */
@media (min-width: 641px){
  .zoa-share-cta-mobile{ display:none !important; }
}

/* évite que le CTA masque la fin de page */
@media (max-width: 640px){
  body{ padding-bottom: 78px; }
}

    .zoa-kpi-row{display:grid;gap:12px;grid-template-columns:1fr;align-items:stretch;margin-top: 15px;}
    @media(min-width:768px){.zoa-kpi-row{grid-template-columns:1fr 1fr}}
    .kpi-card{background:#fff;border:1px solid rgba(15,23,42,.12);border-radius:12px;padding:12px}
    .kpi-card .kpi-header{margin-bottom:6px;font-weight:600}
    .kpi-card .half-donut{width:100%;min-height:160px}
    .kpi-card .muted{color: var(--text, #e7ebf2);font-size:.9rem;margin-top:4px}

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

.zoa-aside--share-top{
  position: sticky;
  top: 0;
  z-index: 999;
  transform: translateY(0);
  transition: transform .22s ease, opacity .22s ease;
  will-change: transform;
}

/* Etat "caché" */
.zoa-aside--share-top.is-hidden{
  transform: translateY(-110%);
  opacity: 0.98; /* garde une transition douce (optionnel) */
}

/* Respect accessibilité: si reduced motion, pas d'anim */
@media (prefers-reduced-motion: reduce){
  .zoa-aside--share-top{ transition: none; }
}

/* Desktop: on ne fait rien (tu peux laisser sticky si tu veux) */
@media (min-width: 992px){
  .zoa-aside--share-top.is-hidden{ transform: none; opacity: 1; }
}