/* ============================================================
   Dosage Peptide -- SHARED SITE CHROME (header + footer + sticky search)
   Loaded on EVERY page so the header/footer/sticky bar are byte-identical
   site-wide (home, blog, search, protocols, and all theme pages).
   Contains ONLY chrome rules -- NO hero/grid/card rules, so it never
   collides with home.css or protocol.css (which reuse .dp-hero/.dp-vial etc).
   ============================================================ */
*{box-sizing:border-box}
.dp-root{margin:0;font-family:'IBM Plex Sans',system-ui,sans-serif}
.dp-root a:focus-visible,.dp-root button:focus-visible,.dp-root summary:focus-visible,.dp-root input:focus-visible{outline:2px solid #3C6076;outline-offset:3px;border-radius:4px}

/* transitions on header/footer interactive bits */
.dp-nav-link,.dp-mega-link,.dp-icon-btn,.dp-btn-primary,.dp-mnav-link,.dp-foot-link,.dp-foot-legal{
  transition:background-color .18s ease,color .18s ease,border-color .18s ease,box-shadow .18s ease;
}

/* hover states (were style-hover in the design) */
.dp-nav-link:hover{background:rgba(165,182,196,.10)!important;color:#fff!important}
.dp-mega-wrap:hover .dp-mega-btn{background:rgba(165,182,196,.10)!important;color:#fff!important}
.dp-mega-link:hover{color:#fff!important}
.dp-icon-btn:hover{background:rgba(165,182,196,.12)!important}
.dp-btn-primary:hover{background:#456277!important}
.dp-mnav-link:hover{background:rgba(165,182,196,.10)!important;color:#fff!important}
.dp-foot-link:hover{color:#fff!important}
.dp-foot-legal:hover{color:#fff!important}

/* Protocols mega menu (CSS-only: hover + keyboard focus) */
.dp-mega{display:none}
.dp-mega-wrap:hover .dp-mega,
.dp-mega-wrap:focus-within .dp-mega{display:block}

/* mobile menu (home.js toggles .is-open) */
.dp-mobile-menu{display:none}
.dp-mobile-menu.is-open{display:block}

/* responsive header */
@media (max-width:900px){
  .dp-desktop-nav{display:none!important}
  .dp-head-actions{display:none!important}
  .dp-burger{display:inline-flex!important}
  .dp-headbar{height:60px!important;gap:12px!important;padding:0 18px!important}
}

/* sticky search bar -- visible sur mobile ET desktop */
.dp-mobilebar{display:flex!important}
/* jamais < 16px (sinon iOS Safari zoome au focus). Specificite + !important
   pour battre l'inline 16px ET d'eventuelles regles input du theme/Elementor. */
.dp-mobilebar input[type="search"]{font-size:16px!important}
@media (max-width:680px){
  .dp-root{padding-bottom:76px!important}
  /* champ et bouton a la MEME hauteur (44px) que sur desktop */
  .dp-mobilebar > div:not(.dp-ta){height:44px!important;padding:0 13px!important}
  .dp-mobilebar > div input{height:100%!important;line-height:normal!important}
  .dp-mobilebar > button{height:44px!important;padding:0 18px!important;display:flex!important;align-items:center!important}
}
/* desktop : pilule de recherche compacte, centree et flottante. Champ et bouton
   forces a la MEME hauteur (40px) -- la hauteur du bouton Search. */
@media (min-width:681px){
  .dp-root{padding-bottom:88px!important}
  .dp-mobilebar{left:50%!important;right:auto!important;bottom:18px!important;transform:translateX(-50%);width:min(480px,calc(100% - 40px))!important;padding:5px!important;gap:8px!important;align-items:center!important;border:1px solid rgba(165,182,196,.18)!important;border-radius:14px!important;box-shadow:0 18px 44px -14px rgba(0,0,0,.55)}
  .dp-mobilebar > div:not(.dp-ta){flex:1 1 auto!important;max-width:none;height:40px!important;padding:0 14px!important}
  .dp-mobilebar > div input{height:100%!important;line-height:normal!important}
  .dp-mobilebar > div i{font-size:15px!important}
  .dp-mobilebar > button{height:40px!important;padding:0 20px!important;display:flex!important;align-items:center!important}
}
/* ===== premium mega-menu + nav (2026-07) ===== */
.dp-nav-link.is-active,.dp-mnav-link.is-active{background:rgba(165,182,196,.12)!important;color:#fff!important}
.dp-mega-cols{display:grid;grid-template-columns:repeat(3,1fr);gap:2px 24px;padding-top:16px;border-top:1px solid rgba(165,182,196,.12)}
.dp-mega-col{display:flex;flex-direction:column;gap:1px}
.dp-mega-h{display:flex;align-items:center;gap:7px;font-family:'IBM Plex Mono',monospace;font-size:10.5px;letter-spacing:.13em;text-transform:uppercase;color:#8B98A3;text-decoration:none;padding:4px 10px;margin-bottom:5px}
.dp-mega-h:hover{color:#fff}
.dp-mega-link{display:flex;align-items:center;justify-content:space-between;gap:8px;color:#CBD3DA;text-decoration:none;font-size:13.5px;padding:7px 10px;border-radius:8px;transition:background-color .15s ease,color .15s ease}
.dp-mega-link:hover{background:rgba(165,182,196,.10);color:#fff}
.dp-mega-link .dp-ar,.dp-mega-h .dp-ar{color:#8FB4C4;font-size:12px}
.dp-mega-link .dp-ar{opacity:0;transform:translateX(-4px);transition:opacity .15s ease,transform .15s ease}
.dp-mega-link:hover .dp-ar{opacity:1;transform:translateX(0)}
.dp-mega-h .dp-ar{transition:transform .15s ease}
.dp-mega-h:hover .dp-ar{transform:translateX(3px)}
.dp-mega-all{font-family:'IBM Plex Mono',monospace;font-size:11px;color:#7E8B96;text-decoration:none;padding:9px 10px 2px;margin-top:auto}
.dp-mega-all:hover{color:#A9BCC8}
.dp-mega-tools{display:flex;flex-wrap:wrap;gap:6px;padding-top:14px;border-top:1px solid rgba(165,182,196,.12)}
.dp-mega-tool{display:inline-flex;align-items:center;gap:9px;color:#CBD3DA;text-decoration:none;font-size:13px;font-weight:500;padding:9px 13px;border-radius:9px;transition:background-color .15s ease,color .15s ease}
.dp-mega-tool i{font-size:13px;color:#8FB4C4;width:15px;text-align:center}
.dp-mega-tool:hover{background:rgba(165,182,196,.10);color:#fff}

/* header search typeahead (live suggestions from DP_SEARCH_INDEX) */
.dp-ta{position:absolute;left:0;right:0;top:calc(100% + 8px);z-index:60;background:#272D34;border:1px solid rgba(165,182,196,.22);border-radius:12px;box-shadow:0 26px 64px -18px rgba(0,0,0,.62);padding:6px;display:none;max-height:min(58vh,430px);overflow-y:auto}
.dp-ta.open{display:block}
.dp-ta.dp-ta-up{top:auto;bottom:calc(100% + 10px)}
.dp-ta-i{display:flex;align-items:center;gap:10px;padding:9px 12px;border-radius:9px;flex-wrap:wrap}
.dp-ta-i:hover,.dp-ta-i.on{background:rgba(165,182,196,.09)}
.dp-ta-dot{flex-shrink:0;width:9px;height:9px;border-radius:99px}
.dp-ta-nm{font-family:'Schibsted Grotesk',sans-serif;font-weight:600;font-size:14.5px;color:#fff;text-decoration:none}
.dp-ta-nm:hover{text-decoration:underline;text-underline-offset:3px}
.dp-ta-cat{font-family:'IBM Plex Mono',monospace;font-size:10.5px;letter-spacing:.05em;text-transform:uppercase;color:#8B98A3;white-space:nowrap}
.dp-ta-szs{display:flex;flex-wrap:wrap;gap:5px;margin-left:auto;justify-content:flex-end}
/* many sizes (e.g. Retatrutide) → drop chips to their own full-width line, centered, so they don't crowd the name */
.dp-ta-szs--wrap{flex-basis:100%;margin-left:0;justify-content:center;margin-top:5px}
.dp-ta-sz{display:inline-flex;align-items:center;font-family:'IBM Plex Mono',monospace;font-size:11px;font-weight:600;color:#B7C2CB;background:rgba(165,182,196,.10);border:1px solid rgba(165,182,196,.18);border-radius:6px;padding:3px 8px;text-decoration:none;transition:background-color .12s ease,color .12s ease,border-color .12s ease}
.dp-ta-sz:hover{background:#3C6076;color:#fff;border-color:#3C6076}
.dp-ta-empty{padding:12px 14px;color:#9AA6AE;font-size:13px;font-family:'IBM Plex Sans',sans-serif}

/* ===== mega size chips ===== */
.dp-mega-szs{display:flex;flex-wrap:wrap;gap:5px;padding:1px 10px 8px}
.dp-mega-sz{display:inline-flex;align-items:center;font-family:'IBM Plex Mono',monospace;font-size:10.5px;font-weight:600;color:#9FB0BC;background:rgba(165,182,196,.09);border:1px solid rgba(165,182,196,.16);border-radius:6px;padding:2px 7px;text-decoration:none;transition:background-color .12s ease,color .12s ease,border-color .12s ease}
.dp-mega-sz:hover{background:#3C6076;color:#fff;border-color:#3C6076}

/* reaudit-zfix: header + mega dropdown above Elementor content (z-index up to 200) */
.dp-headbar{position:relative;z-index:9999}
.dp-ta{z-index:9999}

/* reaudit-zfix2: sticky <header> had inline z-index:200 (trapped stacking ctx); Elementor content reaches z-index:1000 -> lift header + mobile bar above it */
.dp-root>header{z-index:9000!important}
.dp-mobilebar{z-index:9000!important}

/* a11y (reaudit maillage/green 2026-07-06): skip-link + focus-visible */
.dp-skip{position:absolute;left:-9999px;top:0;z-index:10000;background:#3C6076;color:#fff;padding:11px 18px;border-radius:0 0 9px 0;font-family:'IBM Plex Sans',sans-serif;font-size:14px;font-weight:600;text-decoration:none}
.dp-skip:focus{left:0}
a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible,summary:focus-visible,[tabindex]:focus-visible{outline:2px solid #8FB4C4;outline-offset:2px;border-radius:3px}