/* =========================
   LAYOUT GÉNÉRAL
   ========================= */
/* Light par défaut */
    @font-face {
        font-family: "caveat";
        src: url(../../../../themes/alysumchild/assets/fonts/caveatbrush-regular-webfont.woff2) format("woff2"),url(../fonts/caveatbrush-regular-webfont.woff) format("woff");
        font-weight: 400;
        font-style: normal;
        font-display: swap
    }

    @font-face {
        font-family: "covered";
        src: url(../../../../themes/alysumchild/assets/fonts/coveredbyyourgrace-regular-webfont.woff2) format("woff2"),url(../fonts/coveredbyyourgrace-regular-webfont.woff) format("woff");
        font-weight: 400;
        font-style: normal;
        font-display: swap
    }

:root{
  --page-bg: #F7FAFD;
  --stepimport: #FB7185;
  --stepimport-card: #A7D8E6; 	
}
/* Dark = override */
html[data-theme="dark"]{
  --page-bg: #0B1220;
}

/* Applique le fond uniquement aux pages ZoaICP */
body#module-zoaicp-router, body#module-zoaicp-share, body#module-zoaicp-public, body#module-zoaicp-community {
  background: var(--page-bg);
  min-height: 100vh;
}

:root { --navm-h: 60px; }
	
@media (max-width: 768px) {

  .main-content { 
    padding-bottom: calc(var(--navm-h) + max(env(safe-area-inset-bottom), 0px));
  }
}

/* =========================
   THEME TOKENS — PALETTES
   ========================= */
[data-theme="light"]{
  /* Brand */
  --brand:#2AA7C8;        /* bleu-lagon logo */
  --brand-ink:#0E5C73;    /* bleu profond */
  --accent:#22C55E;       /* vert qualité */
  --accent-2:#5EC6D1;     /* dégradé secondaire */

  /* Base */
  --bg:#F7FAFD;
  --text:#0F172A;         /* slate-900 */
  --muted:#55637A;        /* slate-600 */
  --line:rgba(15,23,42,.14);
  --line2:rgba(15,23,42,.20);
  --primary: #2563eb;

  /* Surfaces */
  --surface:#FFFFFF;
  --surface-2:#f6f8fb;
  --surface-3:#FFFFFF;
  --surface-4:#f6f8fb;

  /* UI */
  --card-shadow:0 8px 24px rgba(2,6,23,.06);
  --badge-bg:#EFF6FB;
  --toolbar-bg:#FFFFFF;
  --table-head:#F1F5F9;
  --row-hover:#F6FAFF;

  /* États */
  --ok:#22C55E;
  --warn:#F59E0B;         /* orange tabs */
  --bad:#E11D48;          /* rouge lisible */
  --info:#2AA7C8;

  /* Graphes (sparklines) */
  --g1a:#2AA7C8;
  --g1b:#22C55E;
  --g2a:#F59E0B;
  --g2b:#E11D48;
  --g3a:#2AA7C8;
  --g3b:#94A3B8;
	
 /* surfaces/bordures utilisées par la modale */
  --bg-elev: var(--surface);
  --border:  var(--line);
  --ring:    rgba(2,6,23,.06);
	
/* === Couleurs par catégorie (dégradés a/b) === */
  --cat-base-a:#2AA7C8;
  --cat-base-b:#5EC6D1;   /* salinité/KH/Ca/Mg */
  --cat-major-a:#22C55E;
  --cat-major-b:#86EFAC;  /* Ca, KH, Mg etc. */
  --cat-nutrients-a:#F59E0B;
  --cat-nutrients-b:#F97316; /* NO3/PO4 */
  --cat-minor-a:#6366F1;
  --cat-minor-b:#A5B4FC;  /* iode/bore/strontium… */
  --cat-pollutants-a:#E11D48;
  --cat-pollutants-b:#FB7185; /* Cu/Al/… */
  --cat-autres-a:#94A3B8;
  --cat-autres-b:#CBD5E1;  /* divers */

  /* Chips (basés sur la teinte brand) */
  --chip-bg:     color-mix(in oklab, var(--brand), white 85%);
  --chip-border: color-mix(in oklab, var(--brand), black 10%);
  --chip-ink:    color-mix(in oklab, var(--brand), black 60%);
  --shadow-lg:0 20px 40px rgba(2,6,23,.16),0 6px 16px rgba(2,6,23,.08);
  --shadow-md:0 10px 25px rgba(2,6,23,.12),0 4px 10px rgba(2,6,23,.06);
  --zi-default-bg: #fcfdff;
  --zi-default-border: #e5e7eb; /* gray-200 */
  --zi-default-fg: #374151;     /* gray-700 */
  --zi-placeholder: #6b7280;    /* gray-500 */
  --zi-profile-bg: #eff6ff;                    /* blue-50 */
  --zi-profile-border: #3b82f6;                /* blue-300 */
  --zi-profile-ring: rgba(59,130,246,.18);     /* blue-500 */

  /* en clair on peut rester doux, pas vert plein */
  --zi-custom-bg: #ecfdf5;                     /* emerald-50 */
  --zi-custom-border: #86efac;                 /* emerald-300 */
  --zi-custom-ring: rgba(185 109 16 / 18%);      /* emerald-500 */
  --zs-ok-bg:    #e6f4ea;
  --zs-ok-bd:    #b7e1c0;
  --zs-ok-fg:    #14532d;
  --zs-warn-bg:  #eef2f7;
  --zs-warn-bd:  #d6d9de;
  --zs-warn-fg:  #1f2937;
  --zs-err-bg:   #fdecea;
  --zs-err-bd:   #f5c6cb;
  --zs-err-fg:   #7f1d1d;
  --zs-spin-ring: rgba(0,0,0,.18);
  --zs-spin-top:  rgba(0,0,0,.55);
}

[data-theme="dark"]{
  /* Brand */
  --brand:#5EC6D1;
  --brand-ink:#A7D8E6;
  --accent:#34D399;
  --accent-2:#7BD0DC;

  /* Base */
  --bg:#0B1220;
  --text:#E6EEFC;
  --muted:#9EB1CE;
  --line:rgba(255,255,255,.10);
  --line2:rgba(255,255,255,.17);	
  --primary: #60a5fa;

  /* Surfaces */
  --surface:#101A31;
  --surface-2:#0C1324;
  --surface-3:#0C1429;
--surface-4:#121821;

  /* UI */
  --card-shadow:0 12px 30px rgba(0,0,0,.28);
  --badge-bg:#0E2A3B;
  --toolbar-bg:#0D1B32;
  --table-head:#0E1C35;
  --row-hover:#0F203E;

  /* États */
  --ok:#34D399;
  --warn:#F6AD55;
  --bad:#FB7185;
  --info:#5EC6D1;

  /* Graphes (sparklines) */
  --g1a:#5EC6D1; --g1b:#34D399;
  --g2a:#F6AD55; --g2b:#FB7185;
  --g3a:#5EC6D1; --g3b:#A9B8CF;
	
	/* === Couleurs par catégorie (dégradés a/b) === */	
  --cat-base-a:#5EC6D1;    --cat-base-b:#7BD0DC;
  --cat-major-a:#34D399;   --cat-major-b:#6EE7B7;
  --cat-nutrients-a:#F6AD55; --cat-nutrients-b:#F59E0B;
  --cat-minor-a:#818CF8;   --cat-minor-b:#A5B4FC;
  --cat-pollutants-a:#FB7185; --cat-pollutants-b:#FCA5A5;
  --cat-autres-a:#A9B8CF;  --cat-autres-b:#94A3B8;

	
	  --bg-elev: var(--surface);
  --border:  var(--line);
  --ring:    rgba(255,255,255,.06);

  /* en sombre on “mixe” avec le noir pour garder du contraste */
  --chip-bg:     color-mix(in oklab, var(--brand), black 75%);
  --chip-border: color-mix(in oklab, var(--brand), black 30%);
  --chip-ink:    color-mix(in oklab, var(--brand), white 70%);

  --shadow-lg:0 22px 48px rgba(0,0,0,.45),0 6px 16px rgba(0,0,0,.35);
  --shadow-md:0 12px 28px rgba(0,0,0,.35),0 4px 10px rgba(0,0,0,.25);
	
  --zi-default-bg: #0b1220;    /* ardoise très sombre */
  --zi-default-border: #334155;/* slate-600 */
  --zi-default-fg: #e5e7eb;    /* gray-200 */
  --zi-placeholder: #9ca3af;   /* gray-400 */

  /* privilégier des fonds translucides + bordure saturée */
  --zi-profile-bg: rgba(59,130,246,.12);   /* halo bleu discret */
  --zi-profile-border: #3b82f6;            /* blue-500 */
  --zi-profile-ring: rgba(59,130,246,.35);

  --zi-custom-bg: rgba(34,197,94,.12);     /* halo vert discret */
  --zi-custom-border: #22c55e;             /* green-500 */
  --zi-custom-ring: rgba(197 147 34 / 22%);
	
  --zs-ok-bg:    #0b3d2a;
  --zs-ok-bd:    #146a3b;
  --zs-ok-fg:    #c0f2d2;

  --zs-warn-bg:  #1f2a37;
  --zs-warn-bd:  #2f3b4a;
  --zs-warn-fg:  #e5e7eb;

  --zs-err-bg:   #3a0f12;
  --zs-err-bd:   #6b1c20;
  --zs-err-fg:   #fecaca;

  --zs-spin-ring: rgba(255,255,255,.25);
  --zs-spin-top:  rgba(255,255,255,.85);
}


:root[data-theme="dark"] {
  --zoa-surface: #0b1220;
  --zoa-surface-2: #111a2e;
  --zoa-text: #e5e7eb;
  --zoa-muted: #94a3b8;
  --zoa-line: rgba(148,163,184,.16);
}
:root:not([data-theme="dark"]) {
  --zoa-surface: #ffffff;
  --zoa-surface-2: #f3f4f6;
  --zoa-text: #111827;
  --zoa-muted: #6b7280;
  --zoa-line: rgba(17,24,39,.08);
}

/* Light par défaut */
.zoa-nav-logo{
  content: url("/modules/zoaicp/views/img/zoanthuslab_logo_mini.svg");
}

/* Dark */
html[data-theme="dark"] .zoa-nav-logo{
  content: url("/modules/zoaicp/views/img/zoanthuslab_logo_mini_dark.svg");
}

#module-zoaicp-router .top-content, #module-zoaicp-router .ql_menu_ctn, #module-zoaicp-share .top-content, #module-zoaicp-share .ql_menu_ctn, header#header, #footer, div#cookiescript_badge, div#sag_b_cocarde {
 display: none !important
}

body#module-zoaicp-lab,
body#module-zoaicp-lab_login{
  background: var(--page-bg);
  min-height: 100vh;
}
body#module-zoaicp-lab header#header,
body#module-zoaicp-lab #footer,
body#module-zoaicp-lab_login header#header,
body#module-zoaicp-lab_login #footer,
.page-width.top-content {
  display:none !important;
}

@media (max-width: 700px) {
    body#module-zoaicp-lab {
        padding-top: 5px;
    }
}

#module-zoaicp-lab .page-width.main-content {
    max-width: none;
    width: unset;
}


body#module-zoaicp-router,
body#module-zoaicp-share,
body#module-zoaicp-lab,
body#module-zoaicp-public,
body#module-zoaicp-community{
  position: relative;
}

body#module-zoaicp-router::before,
body#module-zoaicp-router::after,
body#module-zoaicp-share::before,
body#module-zoaicp-share::after,
body#module-zoaicp-lab::before,
body#module-zoaicp-lab::after,
body#module-zoaicp-public::before,
body#module-zoaicp-public::after,
body#module-zoaicp-community::before,
body#module-zoaicp-community::after{
  content: "";
  position: fixed;
  bottom: 0;
  width: clamp(140px, 22vw, 260px);
  aspect-ratio: 1 / 1;
  background-repeat: no-repeat;
  background-size: contain;
  pointer-events: none;
  opacity: 0.45;
  z-index: -1; /* <-- derrière tout */
}



/* remonte le contenu au-dessus du fond décoratif */
body#module-zoaicp-router #wrapper,
body#module-zoaicp-router .zoa-main,
body#module-zoaicp-share #wrapper,
body#module-zoaicp-share .zoa-main,
body#module-zoaicp-public #wrapper,
body#module-zoaicp-public .zoa-main,
body#module-zoaicp-community #wrapper,
body#module-zoaicp-community .zoa-main{
  position: relative;
  z-index: 1;
}

/* Image gauche */
body#module-zoaicp-router::before, body#module-zoaicp-lab::before, body#module-zoaicp-share::before, body#module-zoaicp-public::before, body#module-zoaicp-community::before  {
  left: 0;
  bottom: 0; /* assure qu’elle colle bien en bas */
  background-image: url('/modules/zoaicp/views/img/cms/zoa-left.png');
}

/* Image droite */
body#module-zoaicp-router::after, body#module-zoaicp-lab::after, body#module-zoaicp-share::after, body#module-zoaicp-public::after, body#module-zoaicp-community::after {
  right: 0;
  bottom: -55px; /* idem pour la droite */
  background-image: url('/modules/zoaicp/views/img/cms/zoa-right.png');
}


@media (max-width: 700px) {
    #module-zoaicp-router, #module-zoaicp-share {
        padding-top: 0;
    }
}
@media (max-width: 768px) {
    #content-wrapper {
        padding-top: 0;
    }	
}

.transform-hover {
    transition: all .3s cubic-bezier(.4,0,.2,1)
}

.transform-hover:hover {
    background: radial-gradient(900px 320px at 10% -10%,
 color-mix(in lab, var(--brand) 10%, transparent), transparent 60%), var(--surface) !important;
    transform: translateY(-4px);
    box-shadow: 0 10px 25px -5px #0000004d
}

@keyframes fadeUp {
  from { opacity: 0; transform: translateY(30px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* état initial, masqué tant qu'on n'a pas posé l'animation */
.will-animate:not(.animate-fade-up) {
  opacity: 0;
  transform: translateY(30px);
  visibility: hidden;
}

/* animation posée */
.animate-fade-up {
  animation: fadeUp .8s cubic-bezier(.4,0,.2,1) both;
  animation-delay: var(--adelay, 0ms);
  visibility: visible;
  will-change: transform, opacity;
  transform: translateZ(0);
}

/* Sur devices "no hover" (mobile), ne JAMAIS rester invisibles trop longtemps */
@media (hover: none) {
  .will-animate:not(.animate-fade-up) {
    visibility: visible;      /* ← évite l’élément "perdu" sur mobile */
  }
}

@media (prefers-reduced-motion: reduce) {
  .will-animate, .animate-fade-up {
    animation: none !important;
    opacity: 1 !important;
    transform: none !important;
    visibility: visible !important;
  }
}

/* Carte sélection d'aquarium (base desktop + mobile) */

/* Avatar compact dans le bloc sélectionné */
.aside-selected{
  display:flex;
  align-items:center;
  gap:10px;
}
.aq-miniAvatar{
  width:34px; height:34px;
  border-radius:999px;
  overflow:hidden;
  flex:0 0 auto;
  box-shadow: 0 8px 24px rgba(2,6,23,.10);
  border:1px solid var(--text);
  background: var(--surface);
}
.aq-miniAvatar__img{
  width:100%; height:100%;
  object-fit:cover;
  display:block;
}
.aq-miniAvatar__fallback{
  width:100%; height:100%;
  display:flex;
  align-items:center;
  justify-content:center;
  font-weight:800;
  letter-spacing:.02em;
  color:#fff;
}

/* Avatar dans la modale */
.aq-switch-item{
  display:grid;
  grid-template-columns: 18px 40px 1fr auto;
  align-items:center;
  gap:10px;
}
.aq-switch-avatar{
  width:45px; height:45px;
  border-radius:999px;
  overflow:hidden;
  border:1px solid var(--line);
  background: var(--surface);
  box-shadow: 0 8px 24px rgba(2,6,23,.08);
}
.aq-switch-avatar__img{
  width:100%; height:100%;
  display:block;
  object-fit:cover;
}
.aq-switch-avatar__fallback{
  width:100%;
  height:100%;
  display:flex;
  align-items:center;
  justify-content:center;
  font-weight:800;
  color:#fff;
  font-family: caveat;
  font-size: 17px;
}


.aq-switch-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 10px;
  border-radius: 10px;
  background: var(--surface-2, #020617);
  border: 1px solid var(--border-subtle, rgba(148,163,184,0.45));
  cursor: pointer;
  transition:
    background 0.15s ease,
    border-color 0.15s ease,
    box-shadow 0.15s ease,
    transform 0.12s ease;
}

.aq-switch-item:hover {
  border-color: var(--brand, #2AA7C8);
  box-shadow: 0 8px 20px rgba(15, 23, 42, 0.35);
  transform: translateY(-1px);
}

.aq-switch-item input[type="radio"] {
  margin-right: 10px;
  flex: 0 0 auto;
  accent-color: var(--brand, #2AA7C8);
}

/* Bloc nom + volume */
.aq-switch-main {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
  flex: 1 1 auto;
}

.aq-switch-name {
  font-weight: 600;
  font-size: 0.95rem;
  color: var(--text, #e5e7eb);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.aq-switch-vol {
  font-size: 0.8rem;
  color: var(--text-muted, #9ca3af);
}

/* Meta (nb d’ICP) — sur la même ligne */
.aq-switch-meta {
  margin-left: 12px;
  font-size: 0.8rem;
  color: var(--text-muted, #9ca3af);
  white-space: nowrap;           /* ne pas passer à la ligne */
  flex: 0 0 auto;                /* ne pas se compresser avec le main */
}

/* État sélectionné */
.aq-switch-item input[type="radio"]:checked ~ .aq-switch-main .aq-switch-name {
  color: var(--brand, #2AA7C8);
}
.aq-switch-item input[type="radio"]:checked ~ .aq-switch-meta {
  color: var(--brand-ink, var(--brand, #2AA7C8));
}

/* Ajustements mobile : on réduit un peu les tailles mais on garde la même ligne */
@media (max-width: 480px) {
  .aq-switch-item {
    padding: 8px 8px;
  }

  .aq-switch-item input[type="radio"] {
    margin-right: 8px;
  }

  .aq-switch-name {
    font-size: 0.9rem;
  }

  .aq-switch-vol {
    font-size: 0.78rem;
  }

  .aq-switch-meta {
    margin-left: 8px;
    font-size: 0.78rem;
    max-width: 45%;              /* évite de pousser le nom trop loin */
    overflow: hidden;
    text-overflow: ellipsis;     /* tronque si vraiment trop long */
  }
}


/* ================================
   Language dropdown — MOBILE ONLY
   ================================ */

/* Par défaut : caché (desktop / tablette) */
.zoa-lang-dd--mobile{
  display:none;
}

/* Visible uniquement sur mobile */
@media (max-width: 768px){
  .zoa-lang-dd--mobile{
    display:inline-flex;
    align-items:center;
    position:relative;
    margin-left:10px; /* petit espace après le switch thème */
  }

  /* On peut réduire un poil la taille sur mobile */
  .zoa-lang-dd--mobile .zoa-lang-btn{
    height:34px;
    padding:0 10px;
  }

  .zoa-lang-dd--mobile .zoa-flag-img{
    width:16px;
    height:16px;
  }

  .zoa-lang-dd--mobile .zoa-lang-code{
    font-size:11px;
  }
}


/* Wrapper */
.zoa-lang-dd{
  position: relative;
  margin-left:0;
  flex: 0 0 auto;
}

/* Bouton */
.zoa-lang-btn{
  display: inline-flex;
  align-items: center;
  gap: 8px;

  height: 38px;
  padding: 0 12px;

  border-radius: 999px;
  border: 1px solid rgba(0,0,0,.12);
  background: #fff;
  color: inherit;

  font-weight: 800;
  letter-spacing: .02em;
  cursor: pointer;
  user-select: none;
  vertical-align: middle;
  transition: transform .08s ease, box-shadow .15s ease, border-color .15s ease;
  color:#000000
}

@media (min-width: 769px) { 
	.zoa-lang-btn{
margin-right: 10px;	
	}
}

.zoa-lang-btn:hover{
  border-color: rgba(0,0,0,.18);
  box-shadow: 0 6px 16px rgba(0,0,0,.10);
}

.zoa-lang-btn:active{
  transform: translateY(1px);
}

.zoa-lang-btn:focus{
  outline: none;
}

.zoa-lang-btn:focus-visible{
  outline: 2px solid rgba(223,132,40,.45); /* ton accent #df8428 */
  outline-offset: 2px;
}

/* Drapeau image */
.zoa-flag-img{
  width: 18px;
  height: 18px;
  display: inline-block;
  border-radius: 999px;   /* rond */
  object-fit: cover;
  background: rgba(0,0,0,.06);
}

/* Code langue */
.zoa-lang-code{
  font-size: 12px;
  line-height: 1;
  text-transform: uppercase;
}

/* Caret */
.zoa-lang-caret{
  width: 0;
  height: 0;
  border-left: 5px solid transparent;
  border-right: 5px solid transparent;
  border-top: 6px solid currentColor;
  opacity: .65;
  margin-left: 2px;
}

/* Menu dropdown */
.zoa-lang-menu{
  position: absolute;
  right: 0;
  top: calc(100% + 10px);

  min-width: 140px;
  padding: 8px;

  border-radius: 14px;
  border: 1px solid rgba(0,0,0,.12);
  background: #fff;

  box-shadow: 0 12px 30px rgba(0,0,0,.16);

  display: none;
  z-index: 9999;
}

/* Ouverture */
.zoa-lang-dd.is-open .zoa-lang-menu{
  display: block;
}

/* Items */
.zoa-lang-item{
  display: flex;
  align-items: center;
  gap: 10px;

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

  text-decoration: none;
  color: inherit;
  font-weight: 800;
  color: #000000;
}

.zoa-lang-item:hover{
  background: rgba(0,0,0,.05);
}

.zoa-lang-item:active{
  background: rgba(0,0,0,.08);
}
/* -------------------------------------------------------
   ZOA — Help / Info accordion (details/summary)
   - Ouverture fluide (max-height + fade/slide + blur léger)
   - Sans JS
-------------------------------------------------------- */


:root{
  --zoa-ease-spring: cubic-bezier(.2,.9,.2,1.15);
  --zoa-ease-soft:   cubic-bezier(.2,.8,.2,1);
	  --zoa-app-top-gap: 36px;
}


body.zoa-app-mode #content-wrapper { padding-top: 34px; } @supports (padding-top: env(safe-area-inset-top)) { body.zoa-app-mode #content-wrapper { padding-top: calc(env(safe-area-inset-top) + 34px); } }


.zoa-app-statusbar-gap {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: var(--zoa-app-top-gap);
  background: var(--surface);
  z-index: 998;
  pointer-events: none;
}

.zoa-topnav.zoa-nav--desktop.is-app {
  top: var(--zoa-app-top-gap);
}

@supports (top: env(safe-area-inset-top)) {
  .zoa-app-statusbar-gap {
    height: calc(env(safe-area-inset-top) + var(--zoa-app-top-gap));
  }

  .zoa-topnav.zoa-nav--desktop.is-app {
    top: calc(env(safe-area-inset-top) + var(--zoa-app-top-gap));
  }
}

html[data-theme="dark"] {
  --zoa-app-top-bg: #121821;
}

.zoa-topnav.is-app::before,
.zoa-topnav-mobile.is-app::before {
  content: "";
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: var(--zoa-app-top-gap);
  background: var(--zoa-app-top-bg);
  z-index: 999;
  pointer-events: none;
}

.zoa-topnav.is-app,
.zoa-topnav-mobile.is-app {
  top: var(--zoa-app-top-gap);
}

@supports (top: env(safe-area-inset-top)) {
  .zoa-topnav.is-app::before,
  .zoa-topnav-mobile.is-app::before {
    height: calc(env(safe-area-inset-top) + var(--zoa-app-top-gap));
  }

  .zoa-topnav.is-app,
  .zoa-topnav-mobile.is-app {
    top: calc(env(safe-area-inset-top) + var(--zoa-app-top-gap));
  }
}


.zoa-help-details{
  margin-top: 15px;
  border-radius:12px;
  background: rgba(59, 130, 246, .08);
  border: 1px solid rgba(59, 130, 246, .35);
  overflow:hidden;
}

/* variante existante */
.zoa-help-details.stats-global {
  margin: 0 15px;
}

/* header cliquable (summary -> maintenant <button>) */
.zoa-help-summary{
  list-style:none;
  cursor:pointer;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding:10px 12px;
  user-select:none;
  width:100%;
  background:transparent;
  border:0;
  text-align:left;
}

/* petit feedback hover/focus */
.zoa-help-summary:hover{
  background: rgba(148,163,184,.06);
}
.zoa-help-summary:focus,
.zoa-help-summary:focus-visible{
  outline: none;
}

/* bloc gauche (icône + titre) */
.zoa-help-left{
  display:flex;
  align-items:center;
  gap:10px;
  min-width:0;
}

/* icône "?" */
.zoa-help-icon{
  width:20px;height:20px;border-radius:999px;
  display:inline-flex;align-items:center;justify-content:center;
  font-weight:800;font-size:12px;line-height:1;
  background: rgba(59,130,246,.18);
  border: 1px solid rgba(59,130,246,.35);
  color: var(--text);
  flex:0 0 auto;
  transition:
    transform .22s var(--zoa-ease-spring),
    background .22s var(--zoa-ease-soft);
}
.zoa-help-summary:hover .zoa-help-icon,
.zoa-help-summary:focus .zoa-help-icon{
  transform: scale(1.06);
  background: rgba(59,130,246,.24);
}

.zoa-help-title{
  font-size:12px;
  font-weight:700;
  opacity:.9;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
  color: var(--text)
}

/* Chevron à droite (montre que ça s’ouvre) */
.zoa-help-caret{
  font-size:18px;
  line-height:1;
  opacity:.75;
  transform: rotate(0deg);
  transition: transform .26s var(--zoa-ease-spring),
              opacity .18s var(--zoa-ease-soft);
  margin-left:8px;
  color: var(--text)	
}

/* Caret tourné + style "ouvert" piloté par aria-expanded (ZOA_Collapse) */
.zoa-help-summary[aria-expanded="true"] .zoa-help-caret{
  transform: rotate(90deg);
  opacity:.95;
}

/* (Optionnel, mais sympa visuellement – nécessite :has, sinon juste ignoré) */
.zoa-help-details:has(.zoa-help-summary[aria-expanded="true"]){
border-color: rgba(59, 130, 246, .35);
    background: rgba(59, 130, 246, .08);
}

/* Body : ZOA_Collapse gère max-height en JS, on anime seulement */
.zoa-help-body{
  overflow:hidden;
  max-height:0; /* état fermé par défaut, JS passera à une valeur px */
  transition: max-height .38s var(--zoa-ease-spring);
}

/* contenu : fade + slide + blur léger */
.zoa-help-inner{
  overflow:hidden;
  padding:0 12px 10px;
  font-size:12px;
  line-height:1.35;
  opacity:0;
  transform: translateY(-6px);
  filter: blur(1px);
  transition:
    opacity .22s var(--zoa-ease-soft),
    transform .32s var(--zoa-ease-spring),
    filter .22s var(--zoa-ease-soft);
}

/* état ouvert : ZOA_Collapse ajoute .is-open sur le body */
.zoa-help-body.is-open .zoa-help-inner{
  opacity:.85;
  transform: translateY(0);
  filter: blur(0);
  background: var(--surface-2);	
}

/* Mobile : padding + tailles un poil plus compact */
@media (max-width: 768px){
  .zoa-help-summary{ padding:8px 10px; }
  .zoa-help-inner{ padding:0 10px 10px; }
}

/* Contenu aide : style “timeline” propre */
.zoa-help-inner{
  position: relative;
  padding: 10px 16px 14px;
  font-size: 13px;
  line-height: 1.6;
  background: var(--surface-2);
  color: var(--text);
}

/* petite ligne verticale à gauche pour structurer */
.zoa-help-inner::before{
  content: "";
  position: absolute;
  left: 8px;
  top: 10px;
  bottom: 14px;
  width: 1px;
  background: rgba(148, 163, 184, .35); /* gris/bleu discret */
}

/* chaque paragraphe devient un “bloc” avec puce décalée */
.zoa-help-inner p{
  position: relative;
  margin: 0 0 8px;
  padding-left: 18px;          /* espace pour la puce */
}

/* puce ronde en before */
.zoa-help-inner p::before{
  content: "";
  position: absolute;
  left: 3px;
  top: 0.65em;
  width: 7px;
  height: 7px;
  border-radius: 999px;
  background: rgba(59, 130, 246, .95);    /* bleu brand */
  box-shadow: 0 0 0 2px rgba(59,130,246,.18);
}

/* dernier paragraphe sans marge bas */
.zoa-help-inner p:last-child{
  margin-bottom: 0;
}

/* paragraphe d’intro un peu plus “important” */
.zoa-help-inner p:first-child{
  font-weight: 500;
}

/* si tu utilises <strong> dans le texte */
.zoa-help-inner strong{
  font-weight: 600;
}

/* Mobile : un peu plus compact */
@media (max-width: 768px){
  .zoa-help-inner{
    padding: 8px 12px 12px;
    font-size: 12.5px;
    line-height: 1.55;
  }
  .zoa-help-inner::before{
    left: 6px;
  }
  .zoa-help-inner p{
    padding-left: 16px;
  }
}



/* Responsive : sur très petit écran, réduire un peu */
@media (max-width: 420px){
  .zoa-lang-btn{
    height: 36px;
    padding: 0 10px;
  }
  .zoa-flag-img{
    width: 16px;
    height: 16px;
  }
}

.zoa-backtotop{
  position: fixed;
  right: 16px;
  bottom: 16px;
  z-index: 9999;

  width: 46px;
  height: 46px;
  border: 0;
  border-radius: 999px;

  background: linear-gradient(135deg,var(--brand),var(--accent));
  color: #fff;

  display: inline-flex;
  align-items: center;
  justify-content: center;

  cursor: pointer;

  /* caché par défaut */
  opacity: 0;
  visibility: hidden;
  transform: translateY(10px);
  pointer-events: none;

  transition: opacity .18s ease, transform .18s ease, visibility 0s linear .18s;
  box-shadow: 0 10px 25px rgba(0,0,0,.18);
}

.zoa-backtotop.is-visible{
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
  pointer-events: auto;

  transition: opacity .18s ease, transform .18s ease, visibility 0s;
}

.zoa-backtotop:hover{
  transform: translateY(-1px);
}

.zoa-backtotop:active{
  transform: translateY(0);
}

.zoa-backtotop:focus{
  outline: 2px solid rgba(59,130,246,.18);
  outline-offset: 3px;
}

.zoa-backtotop__icon{
  display: block;
}

@media (prefers-reduced-motion: reduce){
  .zoa-backtotop{
    transition: none !important;
  }
}

@media (max-width: 767px){
  .zoa-backtotop{
    width: 40px;
    height: 40px;

    /* au-dessus de la barre nav mobile */
    bottom: 76px;  /* ajuste si ta barre fait +/− haut */
    right: 12px;

    box-shadow: 0 10px 22px rgba(0,0,0,.16);
  }

  .zoa-backtotop__icon{
    width: 18px;
    height: 18px;
  }
}

/* =========================
   MODALES
   ========================= */

#modal-barcode-sample.modal {
  position: fixed;
  inset: 0; /* top/right/bottom/left:0 */
  display: none;          
  align-items: center;
  justify-content: center;
  padding: 1.5rem;
  z-index: 1000;
}

#modal-barcode-sample.modal:not(.hidden) {
  display: flex;
}

#aq-switch-form label {
    margin-bottom: 6px;
}

.modal-overlay {
    position: absolute;
    inset: 0;
    background: color-mix(in srgb, #000 68%, transparent);
    backdrop-filter: blur(2px);
}

.modal-content {
    position: relative;
    width: min(92vw, 560px);
    border-radius: 14px;
    background: radial-gradient(800px 260px at 8% -10%,
 color-mix(in lab, var(--brand) 10%, transparent), transparent 55%), var(--surface);
    color: var(--text);
    border: 1px solid var(--line);
    box-shadow: 0 14px 48px rgba(0, 0, 0, .55);
    display: flex;
    flex-direction: column;
    max-height: 86vh;
    overflow: hidden;
}

.modal-body {
    min-height: 0;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
}

.modal-title {
    margin-bottom: 8px;
    padding: 14px 16px;
    font-size: 1.125rem;
    font-weight: 700;
    border-bottom: 1px solid var(--zoa-line, rgba(15, 23, 42, .12));
        background: radial-gradient(900px 320px at 10% -10%,
 color-mix(in lab, var(--brand) 10%, transparent), transparent 60%), var(--surface);
}

/* Footer sticky */
.modal-actions {
    position: sticky;
    bottom: 0;
    z-index: 1;
    padding: 10px 12px;
    display: flex;
    gap: 8px;
    justify-content: flex-end;
    border-top: 1px solid var(--zoa-line, rgba(15, 23, 42, .12));
    background: radial-gradient(900px 320px at 10% -10%,
 color-mix(in lab, var(--brand) 10%, transparent), transparent 60%), var(--surface);
    margin-top: 17px;
}

 label {
    display: block;
    font-size: 13px;
    color: var(--muted);
    /* margin-bottom: 6px; */
}

.form-control {
    width: 100%;
    background: var(--surface-3) !important;
    color: var(--text);
    border: 1px solid var(--line);
    border-radius: 10px;
    padding: 10px 12px;
    outline: none;
}

.modal-footer {
    position: sticky;
    z-index: 1;
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    border-top: 1px solid var(--line);
    padding: 10px 0 10px; 
}

.modal-dialog {
    position: fixed;
    inset: 0;
    z-index: 99999;
    display: grid;
    place-items: center;
	max-width: 960px;
    width: min(960px, 100%);
}

.d-flex {
    display: flex;
    justify-content: flex-end;
    margin: 0 0 12px;
    padding-bottom: 14px;
    border-bottom: 2px solid var(--accent-2);
	gap: 10px;
}

/* =========================
   BOUTONS / CTA
   ========================= */
.btn{
  appearance:none;border:1px solid var(--line);
  background:#ffffff00;
  padding:10px 14px;border-radius:12px;cursor:pointer;
  transition:.2s ease;box-shadow:0 1px 0 rgba(0,0,0,.04) inset
}

.btn.primary:hover{
color:#FFF
}

.btn.primary{
  background:linear-gradient(135deg,var(--brand),var(--accent));
  border-color:transparent;color:#fff;
  box-shadow:0 10px 22px color-mix(in srgb, var(--brand) 24%, transparent)
}
.btn.ghost{background:transparent}
.btn:hover{
  transform:translateY(-1px);box-shadow:0 8px 18px rgba(0,0,0,.18)
}

.danger {
     background-color: var(--bad) !important;	
}

.btn.cancel {
    border-color: var(--bad) !important;
    color: var(--text) !important;
    background-color: color-mix(in srgb, var(--bad) 20%, transparent) !important;
}

.ghost {
    border-color: var(--g1a) !important;
	color:var(--text) !important;
}

.js-edit-measured {
    padding: 5px !important;
}

.align-items-center {
    margin: 15px 0 0 0;
    display: flex;
    justify-content: center;
    width: 100%;
}

/* ========== Cards / Layout ========== */

.card {
    background: radial-gradient(900px 320px at 10% -10%,
 color-mix(in lab, var(--brand) 10%, transparent), transparent 60%), var(--surface);
    border: 1px solid var(--line);
    border-radius: 18px;
    padding: 12px;
    box-shadow: var(--card-shadow);
}

.card-bd-accent {
border-left: 4px solid var(--accent-2) !important;	
}

.zoa-nav-logo{
  height: clamp(34px, 3.2vw, 42px);
  width: auto;
  max-width: 48vw;
  vertical-align: middle;
  margin-right: .5rem;
  image-rendering: auto;
}
/* Optionnel : bon alignement si le conteneur nav utilise flex */
.zoa-topnav .zoa-nav-logo{ flex: 0 0 auto; }

.zoa-aside .theme-switch{
  display:inline-flex;
  align-items:center;
  gap:.4rem;
  user-select:none;
  cursor:pointer;
  padding:.25rem .5rem;
  border-radius:.5rem;
  background: var(--surface, #fff);
  box-shadow: var(--card-shadow, 0 8px 24px rgba(2,6,23,.06));
}

.zoa-aside .theme-label{
  font-size:.875rem;
  color: var(--muted, #55637A);
}
.ctn-tittle {
    display: flex;
    justify-content: center;	
}

h3.card-title {
    color: var(--text);
}

p.card-subtitle {
    color: var(--muted);
}

.zoa-title-main {
	color:var(--text);
    font-size: 39px;
    font-family: caveat, serif;
    margin-bottom: 54px;
	text-transform: uppercase;
	display: flex;
    justify-content: center;
    flex-direction: column;
    transform: rotate(-2deg);
    position: relative;
    text-align: center;
    padding-left: 53px;
    padding-right: 58px;
}

.zoa-title-main:before {
    content: "";
    position: absolute;
    background: transparent url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA0Mi43MyA3OC42NiI+PGRlZnM+PHN0eWxlPi5jbHMtMXtmaWxsOiM4MGNhY2Q7fS5jbHMtMntmaWxsOiM3ZGM5Y2M7fTwvc3R5bGU+PC9kZWZzPjx0aXRsZT5GaWNoaWVyIDI4PC90aXRsZT48ZyBpZD0iQ2FscXVlXzIiIGRhdGEtbmFtZT0iQ2FscXVlIDIiPjxnIGlkPSJDYWxxdWVfMS0yIiBkYXRhLW5hbWU9IkNhbHF1ZSAxIj48cGF0aCBjbGFzcz0iY2xzLTEiIGQ9Ik0wLDQyLjE0YzkuODYtNC4wNiwyMC41OS00LjQ5LDMwLjc1LTcuM2EyLjk0LDIuOTQsMCwwLDEsMy42MiwxLjg3QTEuOCwxLjgsMCwwLDEsMzMsMzkuMzVjLTEwLjIxLDIuNTYtMjAuMzQsNS43LTMxLjA3LDUuMjlBOC4xOSw4LjE5LDAsMCwxLDAsNDQuMTJaIi8+PHBhdGggY2xhc3M9ImNscy0yIiBkPSJNNy4yOSwwQTE0MC4yOSwxNDAuMjksMCwwLDEsMjkuODMsNy4yMmM0LDEuNjQsNy45MiwzLjQsMTEuMjcsNi4xOCwxLC44MywyLjI5LDEuNzcsMS4yNCwzLjI2YTIuODEsMi44MSwwLDAsMS0zLjU3Ljg4Yy0xMS00LjI5LTIyLTguMy0zMy4zMy0xMS42MS0xLjczLS41LTMuMTEtMS42OS0yLjczLTMuNThTNC44LDAsNy4yOSwwWiIvPjxwYXRoIGNsYXNzPSJjbHMtMSIgZD0iTTM4LjUxLDY0LjJhMTIuNzMsMTIuNzMsMCwwLDEtMS45MywyLjMxYy00LjY2LDMuNjktOS4zOSw3LjMxLTE0LjEyLDEwLjkyLTEuNTUsMS4xOC0zLjMzLDItNC43NCwwLTEuMy0xLjg2LjM1LTMuMTEsMS42LTQuMDlxNy4yMy01LjY2LDE0LjYxLTExLjEyYzEtLjc3LDIuMjktMS41MywzLjY2LS41OEEyLjMyLDIuMzIsMCwwLDEsMzguNTEsNjQuMloiLz48L2c+PC9nPjwvc3ZnPg==) center left no-repeat;
    left: -20px;
    width: 80px;
    height: 80px;
    background-size: auto;
}

.zoa-title-main:after {
    content: "";
    position: absolute;
    background: transparent url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA0Ni4zIDkxLjU3Ij48ZGVmcz48c3R5bGU+LmNscy0xe2ZpbGw6IzdkYzljYzt9PC9zdHlsZT48L2RlZnM+PHRpdGxlPkJsa0xHRC50aWY8L3RpdGxlPjxnIGlkPSJDYWxxdWVfMiIgZGF0YS1uYW1lPSJDYWxxdWUgMiI+PGcgaWQ9IkNhbHF1ZV8xLTIiIGRhdGEtbmFtZT0iQ2FscXVlIDEiPjxnIGlkPSJCbGtMR0QudGlmIj48cGF0aCBjbGFzcz0iY2xzLTEiIGQ9Ik00Ni4zLDkwLjg3Yy0yLjMzLDEuNDUtNC4zNy4zLTYuMjctLjM2QzMwLjQ2LDg3LjE4LDIxLjgxLDgyLDEzLDc3LjA4YTEyLjkxLDEyLjkxLDAsMCwxLTIuNTctMi4yOWMtLjg4LS44OC0xLjQtMS45LS41Ni0zLjA3YTIuNSwyLjUsMCwwLDEsMy40My0xYzEwLjIzLDUuMzYsMjAuNTgsMTAuNTMsMzAuMywxNi43OUE1LjczLDUuNzMsMCwwLDEsNDYuMyw5MC44N1oiLz48cGF0aCBjbGFzcz0iY2xzLTEiIGQ9Ik0yLjg4LDIyLjMyYy0xLjMzLjE1LTIuMTUsMC0yLjU3LS44NC0uODMtMS42NS4xNC0yLjgxLDEuMjItMy45LDUtNS4wNiwxMC45Mi05LDE2LjcyLTEzLjA2LDItMS40LDMuNzctMy4yLDYuMjctMy45MUMyNiwuMiwyNy40Ni0uNjIsMjguNjMuNzljMS40MywxLjcxLDAsMy4xNS0xLjA2LDQuMjhBMzEuNywzMS43LDAsMCwxLDIyLjcsOS4yMkMxNy4xNywxMy4wOSwxMS41NiwxNi44Nyw2LDIwLjY1QTMzLjY2LDMzLjY2LDAsMCwxLDIuODgsMjIuMzJaIi8+PHBhdGggY2xhc3M9ImNscy0xIiBkPSJNNDUuNjcsNDEuMjhjLTMuMDgsMy4xNy02LjYyLDMuNi05Ljk0LDQuMjZhMTY4Ljc5LDE2OC43OSwwLDAsMS0yNC4wOSwzLjM0Yy0yLjEuMTEtNSwwLTUtMi44LDAtMi40NywyLjcxLTIuMjksNC42OC0yLjUzLDguMDUtLjk1LDE2LjEtMiwyNC4xNi0yLjg5QTI1LjkyLDI1LjkyLDAsMCwxLDQ1LjY3LDQxLjI4WiIvPjwvZz48L2c+PC9nPjwvc3ZnPg==) center right no-repeat;
    right: 0;
    width: 80px;
    height: 80px;
    background-size: auto;
}

/* Variante page "create" */
#zoa-create.zoa-card{
  max-width:720px;
  margin:2rem auto;
  padding:1.25rem;
  border-radius:16px;
  box-shadow:0 10px 25px rgba(0,0,0,.06);
  background:#fff;
}

/* Intro box */
.zoa-intro{
  background:#fff7ed; border:1px solid #fed7aa; border-radius:12px;
  padding:1rem 1.25rem; margin-bottom:1rem;
}
.zoa-intro h2{ margin:0 0 .25rem; font-size:1.1rem; color:#9a3412; }
.zoa-intro-list{ margin:.5rem 0 .75rem 1.25rem; }
.zoa-note{ color:#6b7280; font-size:.9rem; }

/* ========== Titres / Form ========== */
.zoa-title{font-size:1.6rem;margin:.25rem 0}
.zoa-subtitle{color:#6b7280;margin-bottom:1rem}
.zoa-form .form-group{display:flex;flex-direction:column;margin-bottom:1rem}
.zoa-form .form-inline{display:grid;gap:1rem;grid-template-columns:1fr 1fr}
.zoa-form label{font-weight:600;margin-bottom:.25rem}
.zoa-form input{border:1px solid #e5e7eb;border-radius:10px;padding:.6rem}
.zoa-form input:focus{border-color:#df8428!important;box-shadow:0 0 0 3px rgba(223,132,40,.2)!important}
.zoa-form .hint{color:#6b7280;font-size:.85rem;margin-top:.25rem}

/* ========== Boutons / Alerts (scopé léger) ========== */
.btn{display:inline-block;padding:.6rem 1rem;border-radius:10px;text-decoration:none}
.btn-primary{background:#0ea5e9;color:#fff}
.btn-secondary{background:#e5e7eb;color:#111827}
.btn-sm{padding:.35rem .6rem;font-size:.9rem;border-radius:8px}
.alert{border-radius:10px;padding:.75rem 1rem}
.alert-danger{background:#fee2e2;color:#991b1b}

/* ========== Dashboard widgets ========== */
.zoa-dashboard .zoa-row{display:flex;gap:1rem;align-items:center;justify-content:space-between;margin:.75rem 0}
.zoa-dashboard .header .left{display:flex;gap:.5rem;align-items:center}
.zoa-dashboard .health{padding:.25rem .5rem;border-radius:999px;font-weight:600}
.zoa-dashboard .health.ok{background:#dcfce7;color:#166534}
.zoa-dashboard .health.warn{background:#fef9c3;color:#854d0e}
.zoa-dashboard .health.critical{background:#fee2e2;color:#991b1b}
.zoa-dashboard .qa{display:flex;align-items:center;gap:1rem}
.zoa-dashboard .qa-title{font-weight:600;color:#6b7280}
.kpi-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.75rem}
@media (min-width:900px){.kpi-grid{grid-template-columns:repeat(3,minmax(0,1fr))}}
.kpi-card{border:1px solid #e5e7eb;border-radius:12px;padding:.75rem;background:#fff}
.kpi-card.ok{border-color:#bbf7d0}
.kpi-card.warn{border-color:#fde68a}
.kpi-card.critical{border-color:#fecaca}
.kpi-label{color:#6b7280;font-size:.9rem}
.kpi-value{font-size:1.25rem;font-weight:700}
.kpi-target{color:#6b7280;font-size:.85rem}

/* ========== Sticky top nav ========== */

/* ============================
   ZOA TOP NAV: fixed on scroll
   + fade-in on show
   + smooth return (FLIP translate-only)
   Desktop + tablette uniquement
   ============================ */

@media (min-width: 768px){

  .zoa-topnav.zoa-nav--desktop{
    position: relative;
    z-index: 50;
  }

  /* Spacer injecté en JS juste après la nav pour éviter le saut */
  .zoa-nav-spacer{
    height: 0;
  }

  @keyframes zoaNavFadeIn {
    from { opacity: 0; transform: translateY(-8px); }
    to   { opacity: 1; transform: translateY(0); }
  }

  /* état fixed (apparaît avec fade-in) */
  .zoa-topnav.zoa-nav--desktop.is-fixed{
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    width: 100%;
    z-index: 9999;

    background: var(--bg, #fff);
    box-shadow: 0 10px 30px rgba(0,0,0,.08);

    will-change: transform, opacity;
    animation: zoaNavFadeIn .18s ease both;
  }

  /* FLIP return: on n’anime QUE transform (translate), jamais de scale */
  .zoa-topnav.zoa-nav--desktop.is-flip-return{
    will-change: transform;
    transition: transform 240ms ease;
  }

  /* accessibilité */
  @media (prefers-reduced-motion: reduce){
    .zoa-topnav.zoa-nav--desktop.is-fixed{
      animation: none !important;
    }
    .zoa-topnav.zoa-nav--desktop.is-flip-return{
      transition: none !important;
    }
  }
}


.zoa-topnav{
    position: static;
    border:1px solid var(--line);
      background:
    radial-gradient(900px 320px at 10% -10%, color-mix(in lab, var(--brand) 10%, transparent), transparent 60%),
    var(--surface);
    border-radius: 10px;
	margin-top: 0
}
.zoa-topnav .zoa-container{
  display:flex; align-items:center; justify-content:space-between; gap:1rem; padding:.5rem 1rem
}
.zoa-topnav .zoa-brand{    font-weight: 100;
    color: #66cccc;
    align-items: end;
    font-family: 'caveat';
    font-size: 18px;}

.zoa-topnav .zoa-tabs{display:flex; gap:.5rem; list-style:none; margin:0; padding:0; flex-wrap:wrap}
.zoa-topnav .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: 16px;}
.zoa-topnav .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-topnav .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}

#module-zoaicp-router .btn-secondary:hover, #module-zoaicp-share .btn-secondary:hover {
  background-color: #FFF;
	color:#df8428
}

#module-zoaicp-router .btn-secondary, #module-zoaicp-share .btn-secondary {
    background-color: #df8428;	
}

.label {color:var(--muted);font-size:12px}


/* ========== Two-column layout ========== */
@media (max-width:900px){.zoa-grid{grid-template-columns:1fr}}

/* ========== Aside "Mon aquarium sélectionné" (1 ligne) ========== */
.zoa-aside{
  display:flex; 
align-items:center; 
	gap:.75rem;
  padding:.5rem .75rem; 
	margin:.5rem 0 1rem;
  justify-content: flex-end;
  text-align: right;
    justify-content: space-between;	
}
.zoa-aside .aside-name{
  font-size:1.05rem; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:100%;color: var(--muted);
}
.zoa-aside .btn{ white-space:nowrap; }
@media (max-width:576px){
  .zoa-aside{ flex-wrap:wrap; }
  .zoa-aside .aside-name{ white-space:normal; }
.d-flex {flex-direction: column;}	
}

/* ========== Aquarium selection grid ========== */
.zoa-cards-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:1rem}
.aq-name{font-weight:700}
.aq-meta{color:#6b7280;margin:.25rem 0 .5rem}

/* ========== Analysis detail: meta box (light grey) ========== */
.zoa-muted{ background:#f3f4f6; } /* gris clair */
.zoa-meta{
  border:1px solid #e5e7eb;
  border-radius:12px;
  padding:.75rem 1rem;
  margin-top: 21px;
}
.zoa-meta .meta-row{
  display:flex;
  gap:.75rem;
  padding:.25rem 0;
  border-top:1px dashed #e5e7eb;
}
.zoa-meta .meta-row:first-child{ border-top:0; }
.zoa-meta .meta-label{
  width:220px; min-width:160px;
  font-weight:700; 
}

.meta-value a {
    color: #ababab !important;
}
.zoa-meta .meta-value{ flex:1; }
@media (max-width:600px){
  .zoa-meta .meta-row{ flex-direction:column; }
  .zoa-meta .meta-label{ width:auto; min-width:0; }
  .zoa-title-main{font-size: 27px;}
	.zoa-title-main:before{left: 10px;
    width: 66px;
    height: 60px;}
}
.zoa-title-main:after {    right: -3px;
    width: 66px;
    height: 66px;}

.card-header {
    font-size: 19px;
	margin-bottom: 25px;
}

.table {
    border: 1px solid #e5e7eb;
    border-radius: 20px;
}

/* === ZOAICP: Valeurs cibles — origine des champs === */
.zoa-target-input{
  background: var(--zi-default-bg);
  border: 1px solid var(--zi-default-border);
  color: var(--zi-default-fg);
  transition: box-shadow .15s ease, border-color .15s ease, background-color .15s ease;
}
.zoa-target-input::placeholder{ color: var(--zi-placeholder); opacity:1; }

/* état “défaut” (champ vide = valeur de référence) */
.zoa-target-input.is-default{
  background: var(--zi-default-bg);
  border-color: var(--zi-default-border);
  color: var(--zi-default-fg);
  box-shadow: none;
}

/* état “profil chargé” */
.zoa-target-input.is-profile{
  background: var(--zi-profile-bg);
  border-color: var(--zi-profile-border);
  box-shadow: 0 0 0 2px var(--zi-profile-ring);
}

/* état “personnalisé par l’utilisateur” */
.zoa-target-input.is-custom{
  background: var(--warn);
  border-color: var(--warn);
  box-shadow: 0 0 0 2px var(--zi-custom-ring);
}

/* focus accessible (si tu veux un liseré même sans état) */
.zoa-target-input:focus-visible{
  outline: 0;
  box-shadow: 0 0 0 2px var(--zi-profile-ring);
}

.zoa-target-input.is-profile.zoa-pulse{
  animation: zoaPulse 1.2s ease-out 2;
}

/* Badges & mini-infos */
.badge{
  display:inline-flex;align-items:center;gap:6px;
  padding:6px 10px;border:1px solid var(--line);
  border-radius:999px;background:var(--surface, #fff);
  color:var(--muted);font-size:12px;padding: .25rem .5rem;
    border-radius: 8px;
}

.alert-bloc {
    background: var(--surface-2);
    border: 1px solid var(--line) !important;
    border-radius: 14px;
    padding: 12px;
	margin-bottom: 10px;
}

.card-margin {
	margin-bottom: 25px;
}

@keyframes zoaPulse{
  0%{box-shadow:0 0 0 0 rgba(59,130,246,.35)}
  100%{box-shadow:0 0 0 12px rgba(59,130,246,0)}
}
.zoa-target-legend{display:flex;gap:.75rem;align-items:center;margin:.5rem 0 1rem}
.zoa-legend-dot{width:12px;height:12px;border-radius:999px;display:inline-block}
.zoa-legend-default{background:#e5e7eb}
.zoa-legend-profile{background:#93c5fd}
.zoa-legend-custom {background:  var(--warn)}

  .zoa-quality .zoa-echart { height: 220px; }
  @media (max-width: 767px){ .zoa-quality .zoa-echart { height: 180px; } }

/* Toutes les tables de la vue détail */
.zoa-card .table.align-middle { table-layout: fixed; }

/* Colonne 3 = "Écart visuel" : largeur fixe => même longueur de barre */
.zoa-card .table.align-middle th:nth-child(3),
.zoa-card .table.align-middle td:nth-child(3) { width: 46%; }

/* Le conteneur ECharts occupe 100% de sa cellule */
.zoa-mini-gauge { display:block; width:100%; height:48px; min-width:260px; }
@media (max-width:576px){ .zoa-mini-gauge{ min-width:200px; } }


/* Conteneur : switch à gauche, reste à droite */
.zoa-aside {
  display:flex;
  gap:.5rem .75rem;
  justify-content: space-between;

}

/* Le bloc de droite pousse à droite */
.zoa-aside .aside-right{
  margin-left:auto;                /* <-- clé pour coller tout à droite */
  display:flex;
  align-items:center;
  gap:.5rem .75rem;
  flex-wrap:wrap;                  /* évite les débordements en mobile */
}

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

/* Petites largeurs : tout passe en colonne proprement */
@media (max-width: 640px){
  .zoa-aside{
    align-items:flex-start;
  }
  .zoa-aside .aside-right{
    margin-left:0;
    justify-content:space-between;
	display: grid
  }
	.btn.primary, .btn.cancel, .btn.ghost {
		justify-content: center
	}
	.card {
    padding: 5px;
}
}

/* === Onglets T2 (Segmented + dropdown mobile) === */
.zoa-tabbar.T2{display:flex;gap:8px;align-items:center;justify-content:center;margin:0 0 12px;padding-bottom: 14px;}
.zoa-tabbar.T2 .seg{
  display:flex; gap:6px; padding:6px;
  border:1px solid var(--line); border-radius:12px; background:var(--surface);
  overflow:auto; scrollbar-width:none;
  box-shadow: var(--shadow-md);
}
.zoa-tabbar.T2 .seg::-webkit-scrollbar{ display:none; }

.zoa-tabbar.T2 .tab{
  display:inline-flex; align-items:center; white-space:nowrap; cursor:pointer;
  padding:.2rem .8rem; border-radius:9px; border:1px solid transparent; text-decoration:none;
  color:var(--text);
}

.zoa-tabbar.T2 .tab:hover{
    border-color: var(--g1a) !important;
}

.zoa-tabbar.T2 .tab[aria-selected="true"]{
  background: linear-gradient(135deg, var(--brand), var(--accent));
    border-color: transparent;
    color: #fff;
    box-shadow: 0 10px 22px color-mix(in srgb, var(--brand) 24%, transparent);
}

.zoa-tabbar.T2 .dropdown{ display:none; }
@media (max-width: 767.98px){
  .zoa-tabbar.T2 .seg{ display:none; }
  .zoa-tabbar.T2 .dropdown{ display:block; }
	
	/* Wrapper qui héberge l’icône */
.select-burger{
  position: relative;
  display: inline-block;   /* mets width:100% si tu veux pleine largeur */
  width: 100%;
}

/* Icône burger en ::before (3 barres) */
.select-burger::before{
  content:"";
  position:absolute;
  left: .65rem;            /* espace à gauche du champ */
  top: 50%;
  transform: translateY(-50%);
  width: 16px;             /* largeur des barres */
  height: 14px;            /* hauteur globale du bloc icône */
  pointer-events: none;    /* clics = pour le select */

  /* 3 barres alignées via 3 backgrounds */
  /* background: #000000; */ /* barre basse */
  border-radius: 2px;
  opacity: .9;            /* un léger adoucissement */
  z-index: 999;
  background: linear-gradient(var(--brand),var(--brand)) center / 16px 2px no-repeat,                 /* barre centrale */
    linear-gradient(var(--brand),var(--brand)) center calc(50% - 6px) / 16px 2px no-repeat, /* barre haute */
    linear-gradient(var(--brand),var(--brand)) center calc(50% + 6px) / 16px 2px no-repeat;
}
/* Laisse de la place à l’icône dans le champ */
.select-burger > select{
  padding-left: 2.25rem;
  color: var(--text)	
}
}

/* Panes (compat) */
#zoa-tabContent .tab-pane{ display:none; }
#zoa-tabContent .tab-pane.active{ display:block; }


fieldset.card > legend {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    padding: 0 .6rem;
    height: 28px;
    line-height: 28px;
    font-weight: 600;
    font-size: .95rem;
    color: var(--text);
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: 999px;
    transform: translateY(0px);
}

fieldset.card > legend::before{
  content:"";
  width:8px;height:8px;border-radius:999px;
  background:var(--brand);
}

.form-group {
    margin-bottom: 0;	
}

/* Desktop ≥ 992px : le 1er fieldset plein large */
@media (min-width: 992px){
	
	  .supp-grid{
	grid-template-columns: 1fr 2fr;
        align-items: start;
        display: grid;
        gap: 1rem;
  }
	
  /* 1er : pleine largeur + retour à la ligne suivante */
  #tab-general form > fieldset.card.card-margin:first-of-type{
    display:block;        /* casse la ligne des inline-block */
    width:100%;
    margin-right:0;
    margin-bottom:12px;   /* espace avec la rangée suivante */
  }

  /* Tous les autres : 2 colonnes */
  #tab-general form > fieldset.card.card-margin:not(:first-of-type){
    display:inline-block;
    vertical-align:top;
    width:calc(49.7% - 8px);
    margin-right:12px;
  }
  #tab-general form > fieldset.card.card-margin:not(:first-of-type):nth-of-type(2n){
    margin-right:0;
  }
}
@media (max-width: 1280px){
span.desktop-only-large {
	display:none
}
}

@media (max-width: 1120px){
.zoa-topnav .zoa-tabs a {
	font-size:11px
}
}	

/* Large desktop ≥ 1280px : garde 2 colonnes ou passe à 3 pour les suivants */
@media (min-width: 1280px){
  /* Option A : rester en 2 colonnes (rien à changer) */

  /* Option B : passer les suivants en 3 colonnes */
  #tab-general form > fieldset.card.card-margin:not(:first-of-type){
    width:calc(50% - 8px);
    margin-right:12px;
  }
  #tab-general form > fieldset.card.card-margin:not(:first-of-type):nth-of-type(3n){
    margin-right:0;
  }
}


/* ========== Table -> Cards mobile ========== */
.zoa-table-cards { width: 100%; }

/* Catégories (ligne "active") */
.zoa-table-cards .zoa-cat td {
  background: color-mix(in oklab, var(--primary, #ff8a00) 12%, var(--surface, #141922));
  border-radius: 10px;
  padding: 8px 10px;
  font-weight: 700;
  color: var(--text, #e7ebf2);
}

/* ----- Mobile (≤ 768px): transformer en cartes ----- */
@media (max-width: 768px){
  .zoa-table-cards thead { display: none; }

  .zoa-table-cards tbody { display: grid; gap: 10px; }

  .zoa-table-cards tbody tr.zoa-row-card {
    display: block;
    background: var(--surface-2);
    border: 1px solid color-mix(in oklab, var(--text, #dfe3ea) 12%, transparent);
    border-radius: 12px;
    padding: 10px 12px;
    box-shadow: 0 1px 8px color-mix(in oklab, #000 20%, transparent);
  }

  .zoa-table-cards tbody tr.zoa-row-card:hover { background: color-mix(in oklab, var(--primary) 5%, var(--card)); }

  /* Chaque cellule devient une ligne “label : valeur” */
  .zoa-table-cards .zoa-row-card .zoa-cell {
    display: grid;
    grid-template-columns: 140px 1fr; /* label / contenu */
    gap: 8px;
    padding: 6px 0;
    border-bottom: 1px dashed color-mix(in oklab, var(--text) 10%, transparent);
	color: var(--text, #e7ebf2);
  }
  .zoa-table-cards .zoa-row-card .zoa-cell:last-child { border-bottom: 0; }

  /* Le label de colonne vient de data-label */
  .zoa-table-cards .zoa-row-card .zoa-cell::before {
    content: attr(data-label);
    font-size: .78rem;
    line-height: 1.2;
    color: color-mix(in oklab, var(--text, #e7ebf2) 60%, transparent);
    text-transform: uppercase;
    letter-spacing: .02em;
    align-self: start;
  }

  /* Petits ajustements de contenu */
  .zoa-table-cards .zoa-row-card .el strong { font-size: 1rem;color: var(--text);}
  .zoa-table-cards .zoa-row-card .small.text-muted { font-size: .82rem; }
  .zoa-table-cards .zoa-row-card .def { text-align: left !important; }
  .zoa-table-cards .zoa-row-card input.form-control { width: 100%; }
}

/* ----- Desktop (≥ 769px): comportement tableau standard ----- */
@media (min-width: 769px){
  .zoa-table-cards tbody tr.zoa-row-card td { vertical-align: middle; }
}

.meta-grid{
  display:grid;
  grid-template-columns: 1fr;
  gap:8px;
}
.meta-row{
    min-height: 36px;
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
}
.meta-label{
  color: color-mix(in oklab, var(--text, #e7ebf2) 75%, transparent);
  font-weight:600;
  white-space:nowrap;
}
.meta-value{
  color: var(--text, #e7ebf2);
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}

/* Mobile: passe sur 1 colonne si besoin */
@media (max-width: 640px){
  .meta-row{ grid-template-columns: 1fr; }
  .meta-label{ margin-bottom: 2px; }
  .meta-value{ white-space:normal; }
}


.mt-3 {
display: flex;
justify-content: flex-end;	
}


/* ===== Profils cibles : barre responsive ===== */
.zoa-profilebar{ display:grid; gap:10px; }

/* Ligne principale: mobile = empilé */
.zoa-profilebar .row-main{
  display:grid;
  grid-template-columns: 1fr;
  gap:8px;
  align-items:center;
}

/* Label + select + bouton */
.zoa-profilebar .fld-label{
  font-weight:600;
  color: color-mix(in oklab, var(--text, #e7ebf2) 75%, transparent);
  white-space:nowrap;
}
.zoa-profilebar .fld-control select.form-control{ width:100%; }
.zoa-profilebar .fld-action .btn{ width:100%; }

/* Texte d’aide */
.zoa-profilebar .help-block{
  margin:0;
  color: color-mix(in oklab, var(--text, #e7ebf2) 65%, transparent);
}

/* ≥ 768px : tout sur une ligne (label / select / bouton) */
@media (min-width: 768px){
  .zoa-profilebar .row-main{
    grid-template-columns: auto minmax(220px, 1fr) auto;
    column-gap:12px;
  }
  .zoa-profilebar .fld-action .btn{ width:auto; white-space:nowrap; }
}

/* ≥ 1200px : select plus confort */
@media (min-width: 1200px){
  .zoa-profilebar .row-main{
    grid-template-columns: auto minmax(320px, 480px) auto;
  }
}

/* Conteneur du label + bouton "?" */
.meta-label{
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

/* Bouton "?" */
.info-tip{
    display: inline-flex
;
    justify-content: center;
    align-items: center;
    width: 18px;
    border-radius: 999px;
    border: 1px solid var(--g1a);
    background: var(--surface);
    color: var(--text);
    font: 700 13px / 1 system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
    cursor: help;
    padding: 4px 10px;

}
.info-tip::before{ content:"?"; transform: translateY(-.5px); }

/* Bulle d’aide (cachée par défaut) */
.info-tip-pop{
position: absolute;
    left: 103%;
    top: calc(100% + 8px);
    transform: translateX(-50%);
    max-width: min(92vw, 420px);
    width: max-content;
    padding: 8px 10px;
    background: 
 color-mix(in oklab, var(--surface) 85%, #000);
    color: var(--text);
    border: 1px solid var(--line);
    border-radius: 8px;
    box-shadow: 0 8px 24px 
 color-mix(in oklab, #000 35%, transparent);
    font-size: .9rem;
    line-height: 1.35;
    z-index: 40;
    opacity: 0;
    pointer-events: none;
    transition: opacity .15s 
ease;
    white-space: normal;
    overflow-wrap: anywhere;
    word-break: break-word;
}

.info-tip-pop::after{
  content: "";
  position: absolute;
  top: -6px;
  left: 50%;
  transform: translateX(-50%);
  border: 6px solid transparent;
  border-bottom-color: color-mix(in oklab, var(--surface) 85%, #000);
}

/* Affichage au survol / focus clavier */
.meta-label:hover .info-tip-pop,
.meta-label:focus-within .info-tip-pop{
  opacity: 1;
  pointer-events: auto;
}

/* Sécurité sur très petits écrans */
@media (max-width: 360px){
  .info-tip-pop{ left: 50%;
        transform: translateX(-42%);
        max-width: 85vw; }
}


/* Mobile: tout empilé */
#tab-targets.tab-pane.active{
  display:grid;           /* remplace le display:block des tabs */
  grid-template-columns: 1fr;
  gap:12px;
}

/* Desktop: 2 colonnes pour les 2 premiers fieldsets, le gros formulaire en dessous pleine largeur */
@media (min-width: 992px){
  #tab-targets.tab-pane.active{
    grid-template-columns: repeat(2, minmax(0,1fr));
    align-items:start;
  }

  /* Les deux premiers fieldsets (enfants directs) : une colonne chacun */
  #tab-targets > fieldset.card.card-margin:nth-of-type(1),
  #tab-targets > fieldset.card.card-margin:nth-of-type(2){
    grid-column: auto;
  }

  /* Le gros <form> (tableau) : pleine largeur sous les 2 fieldsets */
  #tab-targets > form{
    grid-column: 1 / -1;
  }
}

/* Évite qu’un <script> prenne une “case” inutile dans la grille */
#tab-targets > script{ display:none; }


.zoa-target-legend{
  display: grid;
  align-items: center;
  column-gap: .5rem;
  row-gap: .25rem;
  /* 3 paires (pastille + label) sur une ligne en desktop */
  grid-template-columns: auto 1fr auto 1fr auto 1fr;
}

/* Sur mobile : 1 paire par ligne (les unes sous les autres) */
@media (max-width: 576px){
  .zoa-target-legend{
    grid-template-columns: auto 1fr; /* pastille + label */
  }
}

.panel-heading {
    color: var(--text, #e7ebf2);	
}

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

#zoa-tabContent th {
    background: var(--table-head);
    text-align: left;
    color: 
 color-mix(in srgb, var(--text) 70%, transparent);
}

.summary-title .title {
color:var(--text)	
}

#zoa-tabContent th, #zoa-tabContent td {
    padding: 12px 14px;
    border-bottom: 1px solid var(--line);
    font-size: 16px;
}
.zoa-table thead th {
    position: sticky;
    top: 0;
    z-index: 1;
    background: var(--thead, #0e151d);
    color: var(--muted, #9aa3af);
    font-weight: 700;
    text-align: left;
    padding: 10px 12px;
    border-bottom: 1px solid var(--line, #1f2730);
    white-space: nowrap;
}

#zoa-aquariums .kb-ana {
    font-size: 1.15rem;
    border-bottom: 2px solid var(--accent-2);
    color: var(--text);
	display: inline-flex;
	gap: .5rem;
	align-items: center;
}

#tab-targets .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 var(--accent-2);
	color: var(--text);
}

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

    .desktop-only{display:block;}
    .mobile-only{display:none;}
    @media (max-width: 767.98px){
      .desktop-only{display:none!important;}
      .mobile-only{display:block!important;}
	    .acc-grid .box{ display:flex; align-items:center; gap:.5rem; }
  .zoa-acc-item .form-control.zoa-target-input{
    width: 8ch !important;
    text-align: right; /* plus lisible pour des nombres */
  }
    }
.zoa-accordion {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.acc {
    background: var(--surface, #0f141a);
    /* border-radius: 14px; */
    overflow: hidden;
}

.acc details {
    /* border-top: 1px solid var(--line, #1f2730); */
}

.zoa-accordion details summary {
    color: var(--text, #0f172a);
}
.zoa-accordion details summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    position: relative;
    padding-right: 28px;
    cursor: pointer;
	border-radius: 12px 12px 0 0;
}

.acc summary {
    list-style: none;
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 12px;
    align-items: center;
    padding: 12px 14px;
    cursor: pointer;
    background: radial-gradient(900px 320px at 10% -10%,
 color-mix(in lab, var(--brand) 10%, transparent), transparent 60%), var(--surface);
    border: 1px solid var(--line, #1f2730);
}

.acc-body {
    padding: 12px 14px;
    border: 1px solid var(--border);
    border-radius: 0 0 12px 12px;
    background: linear-gradient(180deg, var(--table-head), var(--table-head));
    overflow: hidden;
    color: var(
    --text);
}

.zoa-acc-item {
    border: 1px solid var(--zk-border);
     border-radius: 12px;
    background: linear-gradient(180deg, var(--zk-bg), var(--zk-bg-2));
    overflow: hidden;
    color: var(--text);
}

.box {
    background: 
 color-mix(in srgb, var(--brand) 0%, var(--surface-2));
    border: 1px dashed
 color-mix(in srgb, var(--text) 14%, transparent);
    border-radius: 10px;
    padding: 10px;
    margin-bottom: 10px;
}


/* Conteneur status (placé après l'input, table ou accordéon) */
.zoa-inline-status{
  display:none;
  margin-top:.4rem;
  font-size:.875rem;
  line-height:1.2;
}

/* Badge commun */
.zoa-badge{
  display:inline-flex;
  align-items:center;
  gap:.4rem;
  border:1px solid transparent;
  border-radius:999px;
  padding:.35rem .6rem;
  font-weight:600;
  letter-spacing:.01em;
}

/* États (on ajoute la couleur au badge via le conteneur) */
.zoa-inline-status.zoa-ok   .zoa-badge{ background:var(--zs-ok-bg);   border-color:var(--zs-ok-bd);   color:var(--zs-ok-fg); }
.zoa-inline-status.zoa-err  .zoa-badge{ background:var(--zs-err-bg);  border-color:var(--zs-err-bd);  color:var(--zs-err-fg); }
.zoa-inline-status.zoa-pending .zoa-badge{ background:var(--zs-warn-bg); border-color:var(--zs-warn-bd); color:var(--zs-warn-fg); }

.zoa-inline-status.show{ display:block; }

/* Spinner lisible dans les 2 thèmes */
.zoa-spinner{
  width: 1em; height: 1em;
  border: 2px solid var(--brand) !important;
  border-top-color: var(--bg) !important;
  border-radius: 50%;
  animation: zoaSpin .6s linear infinite;
}
@keyframes zoaSpin { to { transform: rotate(360deg); } }

/* Mobile : petit ajustement d’espacement/retour ligne */
@media (max-width: 767.98px){
  .zoa-inline-status{
    margin-top:.5rem;
    /* évite que le badge colle le bord du conteneur étroit */
    word-break: keep-all;
  }
	.container{
	padding-left: 10px;
    padding-right: 10px;	
	}
}

/* panneau repliable générique */
.zoa-collapsible{
  overflow:hidden;
  max-height:0;
  opacity:0;
  transition:max-height .32s ease, opacity .24s ease;
  will-change:max-height, opacity;
}
.zoa-collapsible.is-open{
  opacity:1;
}

.header-card-row {
    display: flex
;
    align-items: center;
    justify-content: space-between;
    gap: .75rem;
    margin-bottom: .5rem;
    border-bottom: 1px dashed var(--line2);
    padding-bottom: .5rem;
}
	
.collapse-btn {
	  padding: .3rem 0.7rem;
	}


.header-card-left{ align-items:center; gap:.5rem .75rem; flex-wrap:wrap; }
.header-card-right{ display:flex; gap:.4rem; flex-wrap:wrap; }

/* suggéré : rotation du chevron sur aria-expanded */
[data-collapse-btn] .chev{ transition: transform .24s ease; }
[data-collapse-btn][aria-expanded="false"] .chev{ transform: rotate(-90deg); }

/* accessibilité (réduit les anims) */
@media (prefers-reduced-motion: reduce){
  .zoa-collapsible{ transition:none; }
  [data-collapse-btn] .chev{ transition:none; }
}

/* ---- ligne qui se met à jour ---- */
@keyframes zoaRowFlash {
  0%   { background: rgba(88,166,255,.15); }
  100% { background: transparent; }
}
.dosing-row.zoa-pulse {
  animation: zoaRowFlash 900ms ease-out;
}

/* ---- pop de la valeur ---- */
@keyframes zoaValuePop {
  0%   { transform: scale(0.96); filter: brightness(1.15); }
  100% { transform: scale(1);    filter: none; }
}
.zoa-pop {
  animation: zoaValuePop 220ms ease-out;
}

/* (optionnel) petite lueur */
.zoa-glow {
  text-shadow: 0 0 .6em rgba(88,166,255,.35);
}

/* lock scroll quand une modale est ouverte (ModalAnim) */
html.has-modal, body.has-modal { overflow: hidden !important; }

/* transitions (le conteneur) */
.modal-animated {
  transition: opacity .16s ease;
  opacity: 1;
      position: fixed;
    inset: 0;
    display: none;
    place-items: center;
    z-index: 9999;	
}
.modal-animated.is-opening { opacity: 0; } /* à l'ouverture, passe vite à 1 */
.modal-animated.is-closing { opacity: 0; }

/* contenu interne (glisse légèrement) */
.modal-animated .modal-content{
  transform: translateY(0);
  transition: transform .16s ease, opacity .16s ease;
  opacity: 1;
}
.modal-animated.is-opening .modal-content{ transform: translateY(12px); opacity: 0; }
.modal-animated.is-closing .modal-content{ transform: translateY(8px);  opacity: 0; }


.btn, .btn.ghost { display:inline-flex; align-items:center; gap:.5rem; }
.zoa-lottie-ico { display:inline-block; width:1em; height:1em; vertical-align:middle; }
.theme-dark .zoa-lottie-ico svg { filter: invert(1); } /* si nécessaire */

.zoa-lottie-ico svg .primary,
.zoa-lottie-ico svg [fill]:not([fill="none"]),
.zoa-lottie-ico svg [stroke]:not([stroke="none"]) {
  fill: currentColor !important;
  stroke: currentColor !important;
}
.has-lottie {
    padding: 0.4rem;
}

button.close-top {
    background: none;
    border: none;
}

.modal-title{
  gap:10px;
  padding:8px 12px;
}
.modal-title > [data-lottie]{ flex:0 0 auto; }
.modal-title__text{
  flex:1 1 auto;
  min-width:0;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis; /* coupe proprement si long */
  font-weight:700;
  color:var(--text);
}
.modal-title > .close-top{
  margin-left:auto;              /* pousse à droite */
  flex:0 0 auto;
  display:inline-flex;
  align-items:center;
  justify-content:center;
}


/* Visibilité des 2 navs */
.zoa-nav--desktop { display: block; }
.zoa-nav--mobile  { display: none; }

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

/* Vars pour la hauteur de la barre mobile */
:root { --navm-h: 60px; }

@media (max-width: 768px) {
  /* Barre mobile FIXE en bas */
  .zoa-nav--mobile.zoa-topnav-mobile {
    position: fixed;
    left: 0; right: 0; bottom: 0;
    z-index: 50;
    height: var(--navm-h);
    display: block;
    background: radial-gradient(900px 320px at 10% -10%, color-mix(in oklab, var(--catA, var(--brand)) 10%, transparent), transparent 60%),
    var(--surface);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border-top: 1px solid color-mix(in oklab, var(--text) 42%, transparent);
    /* Respect des encoches iOS */
    padding-bottom: max(env(safe-area-inset-bottom), 0px);
  }
	
		/* Barre mobile : 4 onglets + logout à droite */
.zoa-nav--mobile .zoa-tabs-icons {
  display: flex;
  align-items: center;
  padding: 0;
  margin: 0;
  list-style: none;
}

/* Les 4 premiers onglets prennent la place dispo */
.zoa-nav--mobile .zoa-tabs-icons > li {
  flex: 1 1 0;
  text-align: center;
}

/* Le bouton logout ne s’étire pas, se colle à droite */
.zoa-nav--mobile .zoa-tabs-icons > li.zoa-nav-logout {
  flex: 0 0 auto;
  margin-left: 15px;
  margin-right: 8px;
}

/* Icône logout un poil plus petite si besoin */
.zoa-nav--mobile .zoa-nav-logout .zoa-logout-ico {
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
	
	  .zoa-topnav-mobile {
    transition: transform 220ms ease;
    will-change: transform;
  }
  .zoa-topnav-mobile.is-hidden {
    transform: translateY(100%);
  }
  @media (prefers-reduced-motion: reduce) {
    .zoa-topnav-mobile { transition: none; }
  }

  /* Grille d'icônes centrées */
  .zoa-tabs-icons {
    display: grid;
    align-items: center;
    height: 100%;
    padding: 6px 10px 8px;
    margin: 0;
    gap: 0;
    list-style: none;
  }

  .zoa-tabs-icons > li > a {
    display: grid;
    place-items: center;
    text-decoration: none;
    color: var(--text);
    line-height: 1;
  }

  /* Indicateur actif EN HAUT de l’icône (car barre en bas) */
  .zoa-tabs-icons li.active > a { position: relative; }
  .zoa-tabs-icons li.active > a::after {
    content: "";
    position: absolute;
    left: 50%; transform: translateX(-50%);
    top: 2px;                /* au-dessus de l’icône */
    width: 22px; height: 3px;
    border-radius: 2px;
    background: var(--brand);
  }

	.title{
  display:flex;
  align-items:center;
  gap:10px;          /* espace entre le titre et le bouton */
}
.title .btn{
  margin-left:auto;  /* pousse le bouton complètement à droite */
  display:inline-flex;
  align-items:center;
  gap:8px;
}
	
/* Ligne: switch à gauche, bloc sélection calé à droite */
.zoa-aside{
  display:flex;
  align-items:center;
  gap:12px;
}

/* Le bloc sélection file tout à droite */
.zoa-aside .aside-right{
  margin-left:auto;                 /* pousse à droite */
  display:flex;
  align-items:center;
  gap:10px;
  min-width:0;                      /* autorise la troncature du nom */
  white-space:nowrap;               /* une seule ligne */
}

/* Option: masquer le sous-titre pour compacter */
.zoa-aside .aside-right .aside-title{ display:none; }

/* Nom ellipsé si trop long */
.zoa-aside .aside-right .aside-name{
  display:flex;
  align-items:baseline;
  gap:6px;
  min-width:0;
}
.zoa-aside .aside-right .aside-name .aq-name{
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  max-width: clamp(120px, 40vw, 320px);  /* ajuste si besoin */
}
.zoa-aside .aside-right .aside-name .aq-vol{
  opacity:.7;
}

/* Bouton compact (garde ton style si déjà défini) */
.zoa-aside .aside-right .aq-action{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:6px 10px;
}

/* Mobile: un peu plus agressif sur la place */
@media (max-width: 768px){
  .zoa-aside{
 gap:8px;
 padding-inline:12px;
 }
  .zoa-aside .aside-right .aside-name .aq-name{ max-width: 48vw;font-size:13px;font-weight: 400; }
  .zoa-aside .aside-right .aside-name .aq-vol{ display:none; } /* gagne de la place */
  .zoa-aside .aside-right .aq-action{
    padding:0; width:28px; height:28px; border-radius:999px; justify-content:center;
  }
  .zoa-aside .aside-right .aq-action .aq-action-label{
    position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0);
  }
	  .aside-right.badge [data-lottie] .zoa-lottie-ico,
  .aside-right.badge [data-lottie].zoa-lottie-ico,
  .aside-right.badge [data-lottie] svg {
    width: 18px !important;   /* taille mobile spécifique à ce bloc */
    height: 18px !important;
  }
}
	/* Corps des blocs d’aide : fermé par défaut */
.zoa-help-body{
  max-height: 0;
  overflow: hidden;
  opacity: 0;
  transition:
    max-height .28s var(--zoa-ease-spring),
    opacity .18s var(--zoa-ease-soft);
}

/* Quand le <details> est ouvert, on "déplie" */
.zoa-help-details[open] .zoa-help-body{
  max-height: 800px; /* assez grand pour contenir le texte */
  opacity: 1;
}

/* Chevron : on peut garder ta version d’origine */
.zoa-help-caret{
  font-size:18px;
  line-height:1;
  opacity:.75;
  transform: rotate(0deg);
  transition: transform .26s var(--zoa-ease-spring),
              opacity .18s var(--zoa-ease-soft);
  margin-left:8px;	
}
.zoa-help-details[open] .zoa-help-caret{
  transform: rotate(90deg);
  opacity:.95;
}

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

	/* Share topbar: theme left, logo center, lang right */
.zoa-aside--share-top{
  position: sticky;
  top: 0;
  z-index: 50;
  backdrop-filter: blur(10px);
  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;justify-content: center;display: flex;}
  .zoa-share-topbar__center{justify-self: center;max-height: 0px;}
  .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;max-height: 41px;}
.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; }