/* =======================================================================
   OSMIA LABS — Topbar partagée (pages intérieures)
   Extrait de home.css — duplication assumée (home.css non modifié).
   ======================================================================= */

:root {
  --noir: #282828;
  --noir-deep: #1c1c1c;
  --blanc: #ffffff;
  --gris: #e1e1e1;
  --gris-soft: rgba(225, 225, 225, 0.78);
  --jaune: #e7c112;
  --jaune-soft: rgba(231, 193, 18, 0.16);
  --cyan: #009dd7;
  --cyan-soft: rgba(0, 157, 215, 0.16);
  --line: rgba(255, 255, 255, 0.12);

  --font-body: 'Manrope', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-display: 'Outfit', sans-serif;

  --ease: cubic-bezier(0.4, 0, 0.2, 1);
  --blur: blur(16px);
  --ls-md: -0.03em;
}

/* --------------------------------------------------------------- Topbar */
/* z-index: 1100 — au-dessus des colonnes Elementor (z:99) et sections sticky (z:999)
   Cause racine du bug article : post-1123.css déclare z-index:99 sur les colonnes
   (.elementor-element-4dd3dc1, .elementor-element-dbed0ed) avec position:relative,
   créant un stacking context qui l'emportait sur la topbar (ancienne valeur 40). */
.topbar { position: fixed; inset: 0 0 auto 0; z-index: 1100;
  padding: 16px 0;
  background: linear-gradient(180deg, rgba(28,28,28,0.9), transparent);
  backdrop-filter: var(--blur); }
.topbar-inner { width: min(1240px, calc(100% - 64px)); margin: 0 auto;
  display: flex; align-items: center; justify-content: space-between; gap: clamp(18px, 2.6vw, 34px); }
.logo { text-decoration: none; color: var(--blanc); font-family: var(--font-display);
  letter-spacing: var(--ls-md); font-size: 20px; display: flex; gap: 6px; align-items: baseline; }
.logo strong { font-weight: 500; }
.logo span { color: var(--jaune); font-size: 11px; letter-spacing: 3px; }
.logo-img { height: 32px; width: auto; display: block; }
.topbar nav { display: flex; gap: 24px; }
.topbar nav a { color: var(--gris-soft); text-decoration: none; font-size: 14px; transition: color .25s var(--ease); }
.topbar nav a:hover, .topbar nav a:focus-visible { color: var(--cyan); }

/* --------------------------------------------------------- Boutons topbar */
.button { display: inline-flex; align-items: center; gap: 8px; text-decoration: none;
  font-size: 14px; font-weight: 800; text-transform: uppercase; letter-spacing: .045em;
  padding: 12px 22px; border-radius: 12px;
  transition: transform .25s var(--ease), box-shadow .25s var(--ease), background .25s; }
.button.small { padding: 9px 16px; }
.button.primary { background: var(--jaune); color: var(--noir);
  box-shadow: 0 6px 22px rgba(231,193,18,0.28); }
.button.primary:hover { transform: translateY(-2px); box-shadow: 0 10px 30px rgba(231,193,18,0.4); }
.button:focus-visible { outline: 2px solid rgba(255,255,255,0.88); outline-offset: 3px; }
.ico-rocket { flex: 0 0 auto; display: inline-block; vertical-align: middle; }

/* ===== Burger menu mobile (<=1024px) ===== */
.burger{ display:none; }
.mobile-menu{ display:none; }
@media (max-width: 1024px){
  .topbar nav { display: none; }
  .burger{ display:inline-flex; flex-direction:column; justify-content:center; gap:5px;
    width:42px; height:42px; padding:0; position:relative; z-index:70;
    border:1px solid rgba(255,255,255,.16); border-radius:11px;
    background:rgba(28,28,28,.5); -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px); cursor:pointer; }
  .burger span{ display:block; width:20px; height:2px; margin:0 auto; background:var(--blanc);
    border-radius:2px; transition:transform .3s var(--ease), opacity .2s; }
  body.menu-open .topbar{ z-index:1100; }
  body.menu-open .burger span:nth-child(1){ transform:translateY(7px) rotate(45deg); }
  body.menu-open .burger span:nth-child(2){ opacity:0; }
  body.menu-open .burger span:nth-child(3){ transform:translateY(-7px) rotate(-45deg); }
  .mobile-menu{ position:fixed; inset:0; display:flex; flex-direction:column;
    align-items:center; justify-content:center; gap:24px;
    background:linear-gradient(160deg, rgba(20,26,46,.985), rgba(8,8,10,.99));
    -webkit-backdrop-filter:blur(20px); backdrop-filter:blur(20px);
    opacity:0; pointer-events:none; transform:translateY(-8px);
    transition:opacity .3s var(--ease), transform .3s var(--ease); z-index:1090; }
  body.menu-open .n8n-chatbot-icon, body.menu-open .n8n-chatbot-toggle{ display:none !important; }
  .mobile-menu a{ font-family:var(--font-display); font-size:24px; letter-spacing:.01em; color:var(--blanc); text-decoration:none; }
  .mobile-menu a:hover, .mobile-menu a:focus-visible{ color:var(--cyan); }
  body.menu-open .mobile-menu{ opacity:1; pointer-events:auto; transform:none; }
  body.menu-open{ overflow:hidden; }
}

/* ===== Compensation hauteur topbar (topbar réelle ~78-80px) ===== */
/* Appliquée sur les pages intérieures uniquement via body.osmia-has-topbar */
/* Mesures réelles : topbar height 80px desktop / 78px mobile → 80px (multiple 8px) */
body.osmia-has-topbar { padding-top: 80px; }
@media (max-width: 1024px) {
  body.osmia-has-topbar { padding-top: 80px; }
}

/* Admin bar : topbar passe dessous proprement */
.admin-bar .topbar {
  top: var(--wp-admin--admin-bar--height, 32px);
}

/* =======================================================================
   FIX TOPBAR — pages article uniquement (ne touche PAS la home osmia-home-scrolly)
   La home gère son propre CSS via home.css, ce bloc ne s'applique qu'aux
   single-post/single où le dégradé transparent laissait transparaître le texte.
   ======================================================================= */
body.single-post .topbar,
body.single .topbar {
  background: rgba(14, 18, 28, 0.97) !important;
  backdrop-filter: blur(10px) !important;
  -webkit-backdrop-filter: blur(10px) !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06) !important;
}