/* Fallback styles for header when Tailwind CDN is unavailable */
:root{--slate-200:#e5e7eb;--slate-500:#6b7280;--brand:#10A39D}
header.sticky{position:sticky;top:0;z-index:20;background:#fff;border-bottom:1px solid var(--slate-200);backdrop-filter:saturate(180%) blur(8px)}
.max-w-6xl{max-width:72rem}.mx-auto{margin-left:auto;margin-right:auto}
.px-4{padding-left:1rem;padding-right:1rem}.py-3{padding-top:.75rem;padding-bottom:.75rem}.py-4{padding-top:1rem;padding-bottom:1rem}
.grid{display:grid}.grid-cols-3{grid-template-columns:repeat(3,minmax(0,1fr))}.items-center{align-items:center}
.flex{display:flex}.gap-3{gap:.75rem}.gap-8{gap:2rem}.justify-center{justify-content:center}.relative{position:relative}
.text-2xl{font-size:1.5rem;font-weight:800}.uppercase{text-transform:uppercase}.tracking-wider{letter-spacing:.08em}
.text-slate-500{color:var(--slate-500)}
.border-t{border-top:1px solid var(--slate-200)}
/* tab bar */
#top-tabs .tab-btn{background:none;border:0;cursor:pointer;color:#111827;display:inline-flex;align-items:center;gap:.25rem}
#top-tabs .tab-btn:hover{color:var(--brand)}
#top-tabs .tab-btn.active{color:var(--brand);font-weight:700}
.tab-underline{position:absolute;bottom:-2px;left:0;height:2px;background:var(--brand);width:0;transition:all .25s}
/* dropdown */
[data-tabpanel]{display:none}
[data-tabpanel].open{display:block}
.menu-link{color:#111827;text-decoration:none}
.menu-link:hover{color:var(--brand)}


/* === Tabs hover & active (green) === */
:root{
  --brand-500:#14b8a6; /* hover */
  --brand-600:#0d9488; /* active */
}

/* hover vert pour tous les onglets */
#top-tabs .tab-btn:hover{
  color: var(--brand-500) !important;
}

/* underline vert */
#top-tabs .tab-underline{
  background: var(--brand-600) !important;
}

/* onglet actif : page convert/pdftools/compress */
html[data-active-tab="convert"]  #top-tabs [data-tab="convert"],
html[data-active-tab="pdftools"] #top-tabs [data-tab="pdftools"],
html[data-active-tab="compress"] #top-tabs [data-tab="compress"]{
  color: var(--brand-600) !important;
  font-weight: 600;
}

/* hover plus clair pour l'onglet actif */
html[data-active-tab="convert"]  #top-tabs [data-tab="convert"]:hover,
html[data-active-tab="pdftools"] #top-tabs [data-tab="pdftools"]:hover,
html[data-active-tab="compress"] #top-tabs [data-tab="compress"]:hover{
  color: var(--brand-500) !important;
}

/* forcer une seule ligne */
#top-tabs .tab-btn{ white-space: nowrap; }

/* au cas où le JS force text-primary (rouge), on re-map sur vert au hover */
#top-tabs .tab-btn.text-primary:hover{ color: var(--brand-500) !important; }



/* --- Stronger hover when Compress is selected (and generally) --- */
header #top-tabs .tab-btn:hover,
#top-tabs .tabs .tab-btn:hover {
  color: var(--brand-500) !important;
}

/* caret should follow text color */
#top-tabs .tab-btn .nav-caret{
  border-top-color: currentColor !important;
  border-color: currentColor !important;
  color: currentColor !important;
}

/* also when focused via keyboard */
#top-tabs .tab-btn:focus-visible{
  color: var(--brand-500) !important;
  outline: none;
}

/* ensure dropdown trigger keeps green on hover even if theme overrides */
html[data-active-tab="compress"] header #top-tabs [data-tab="convert"]:hover,
html[data-active-tab="compress"] header #top-tabs [data-tab="pdftools"]:hover{
  color: var(--brand-500) !important;
}

/* === FORCE single-line icon + text in dropdowns (strong) === */
header .dropdown-panel .panel-content li > a,
header [data-tabpanel] .panel-content li > a{
  display: inline-flex !important;
  flex-direction: row !important;
  align-items: center !important;
  gap: 10px !important;
  white-space: nowrap !important;
  vertical-align: middle !important;
}

header .dropdown-panel .panel-content li > a svg,
header [data-tabpanel] .panel-content li > a svg{
  display: inline-block !important;
  width: 20px !important;
  height: 20px !important;
  flex: 0 0 20px !important;
}


/* === overlay safe === */
header .dropdown-wrap{
  pointer-events: none;
  display: none;
  position: absolute;
  top: 100%;
  left: 0; right: 0;
  z-index: 40;
}
header .dropdown-wrap.open{
  display: block;
  pointer-events: auto;
}


/* === overlay safe (v2): hidden by default, but auto-opens if inline display:block or .open present === */
header .dropdown-wrap{
  position: absolute;
  top: 100%;
  left: 0; right: 0;
  display: none;
  pointer-events: none;
  z-index: 55;
}
/* Show when the site JS toggles inline display or when we add .open */
header .dropdown-wrap.open,
header .dropdown-wrap[style*="display:block"]{
  display: block;
  pointer-events: auto;
}


/* === dropdown hover (CSS-only) === */
/* When the tabs row is hovered, reveal the dropdown sibling */
header #top-tabs:hover + .dropdown-wrap{
  display: block !important;
  pointer-events: auto !important;
}
/* Keep it open while the mouse is over the dropdown itself */
header .dropdown-wrap:hover{
  display: block !important;
  pointer-events: auto !important;
}


/* === MENU VISIBILITY (robust for merge/split) === */
header .dropdown-wrap{ display:none; pointer-events:none; }
header:hover .dropdown-wrap,
header #top-tabs:hover .dropdown-wrap,
header .dropdown-wrap:hover,
header .dropdown-wrap.open,
header .dropdown-wrap [data-tabpanel].open,
header .dropdown-wrap .dropdown-panel.open,
header .dropdown-wrap [style*="display:block"]{
  display:block !important;
  pointer-events:auto !important;
}


/* --- Menu dropdown visibility/z-index safety --- */
header { overflow: visible; }
#top-tabs .dropdown-wrap{ position: relative; }
#top-tabs [data-tabpanel]{
  position: absolute;
  top: calc(100% + 8px);
  left: 0;
  z-index: 100;
  display: none;
  visibility: hidden;
}
/* JS will toggle these: */
#top-tabs [data-tabpanel].open{
  display: block;
  visibility: visible;
}


/* === V4 dropdown + mobile nav === */
header { overflow: visible; }
#top-tabs .dropdown-wrap{ position:relative; }
#top-tabs .dropdown-panel{
  position:absolute;
  left:0; top:calc(100% + 8px);
  z-index:100;
  display:none; visibility:hidden;
  pointer-events:auto;
}
#top-tabs .dropdown-wrap.open > .dropdown-panel,
#top-tabs .dropdown-wrap:focus-within > .dropdown-panel {
  display:block; visibility:visible;
}
#top-tabs .tab-btn{ cursor:pointer; }

/* Mobile */
#hamburger{ display:none; align-items:center; justify-content:center; width:42px; height:42px; border-radius:10px; border:1px solid var(--slate-200); }
#hamburger:focus{ outline:2px solid var(--brand); outline-offset:2px; }

@media (max-width: 1024px){
  #hamburger{ display:inline-flex; }
  #top-tabs{ display:none; position:static; }
  #top-tabs.open{ display:block; }
  #top-tabs .dropdown-panel{ position:static; display:none; visibility:visible; margin-top:.5rem; border:1px solid var(--slate-200); border-radius:12px; }
  #top-tabs .dropdown-wrap.open > .dropdown-panel{ display:block; }
}

/* Build marker */
body[data-build-id="zaqta-v4-1761360209"]::after{
  content:"zaqta-v4-1761360209"; position:fixed; bottom:6px; right:8px; font-size:10px; color:#94a3b8; opacity:.7; pointer-events:none;
}


/* === V5: CSS-only desktop dropdowns + mobile accordion === */
#top-tabs .relative{ position:relative; }
#top-tabs .dropdown-panel{ 
  position:absolute; left:0; top:calc(100% + 10px);
  min-width: 640px;
  display:none; visibility:hidden; opacity:0; transform:translateY(6px);
  z-index:120;
  transition:opacity .12s ease, transform .12s ease;
}
/* Show on hover/focus WITHOUT JS (desktop) */
#top-tabs .relative:hover > .dropdown-panel,
#top-tabs .relative:focus-within > .dropdown-panel{
  display:block!important; visibility:visible!important; opacity:1!important; transform:none!important;
}
/* Mobile: stack panels as accordion */
@media (max-width: 1024px){
  #top-tabs .dropdown-panel{ 
    position:static; min-width:auto; margin-top:.5rem; 
    display:none; visibility:visible; opacity:1; transform:none;
  }
  #top-tabs .relative.open > .dropdown-panel{ display:block; }
}

/* Build marker */
body[data-build-id="zaqta-v5-1761360728"]::after{ content:"zaqta-v5-1761360728"; position:fixed; bottom:6px; right:8px; font-size:10px; color:#94a3b8; opacity:.7; pointer-events:none; }