/* Cleaned CSS (human-readable, deduped, non-breaking) */

/* ========== Variables ========== */
:root{
  --bg:#0b0b0b;--panel:#1c1c0c;--muted:#242424;--text:#f4f4f4;--accent:#fdd835;
  --radius:12px;--gap:12px;--left-column-width:360px;--left-column-max:380px;
  --scroll-track: rgba(20,20,20,0.6);--scroll-thumb: rgba(245,213,53,0.95);
  --scroll-thumb-hover: rgba(245,213,53,1);--scroll-radius:8px;--scroll-w:10px;
}

/* ========== Cancel homepage nav styles leaking into bone pages ========== */
nav.tabs {
  position: static !important;
  top: auto !important;
  left: auto !important;
  right: auto !important;
  background: transparent !important;
  z-index: 1 !important;
  border-bottom: none !important;
  padding: 0 !important;
  display: flex !important;
  width: 100% !important;
}

/* ========== Reset + Base ========== */
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{height:100%;margin:0;background:var(--bg);color:var(--text);
  font-family:'Poppins',system-ui,Arial,sans-serif;overflow-x:hidden}
a{color:var(--accent)}
.container{max-width:1000px;margin:0 auto;padding:14px;box-sizing:border-box}

/* ========== Topbar ========== */
.topbar{
  display:flex;justify-content:space-between;align-items:center;gap:10px;
  padding:0 24px;min-height:64px;margin-bottom:8px;
  background:linear-gradient(180deg,#232323 0%,#161616 100%);
  border-top:1px solid rgba(255,255,255,0.06);
  position:relative;box-sizing:border-box;width:100%;z-index:1000;
  border-bottom:none;box-shadow:0 4px 18px rgba(0,0,0,0.45)
}
.topbar::after{
  content:"";position:absolute;left:0;right:0;bottom:-1px;height:1px;
  background:linear-gradient(90deg,transparent 0%,var(--accent) 30%,var(--accent) 70%,transparent 100%);
  opacity:0.85;box-shadow:0 1px 8px rgba(253,216,53,0.35);pointer-events:none
}
/* inner container handled by header.topbar>.container rule below */
/* slight inset on very small screens */
@media (max-width:520px){
  .topbar{padding-left:12px;padding-right:12px}
}

/* Brand / Retour */
.brand{display:flex;align-items:center;gap:10px}
.brand img{height:50px;width:auto;border-radius:0;max-width:none;flex-shrink:0}
.title{font-weight:700;color:var(--accent)}
.brand .subtle{font-size:0.85rem;color:rgba(240,240,240,0.72)}

/* Retour button */
.retour{
  background:transparent;color:var(--accent);
  border:1px solid rgba(253,216,53,0.35);
  padding:8px 16px;border-radius:10px;font-weight:700;display:inline-flex;
  align-items:center;gap:8px;transition:all .18s ease;
  box-shadow:none;text-decoration:none;font-size:0.92rem;letter-spacing:0.01em;
}
.retour:hover,.retour:focus{
  background:rgba(253,216,53,0.08);
  border-color:#fdd835;
  box-shadow:0 0 16px rgba(253,216,53,0.12);
  transform:translateY(-1px);text-decoration:none;outline:none
}
a.retour{color:var(--accent)}

/* ========== Hero ========== */
.hero{margin:10px 0}
.hero-card{background:linear-gradient(180deg,rgba(255,255,255,0.01),rgba(255,255,255,0.006));border-radius:14px;padding:10px;border:1px solid rgba(255,255,255,0.03);box-shadow:0 12px 40px rgba(245,213,53,0.04);transition:box-shadow .18s ease,transform .18s ease}
.hero-card.glow{box-shadow:0 26px 90px rgba(245,213,53,0.20);transform:translateY(-2px)}
.hero-image{overflow:hidden;border-radius:10px;background:var(--muted);display:flex;justify-content:center;align-items:center;padding:8px;position:relative;z-index:1}
.hero-image img{display:block;width:auto;max-width:100%;height:auto;max-height:66vh;object-fit:contain;border-radius:8px;cursor:pointer;transition:transform .18s ease}
.hero-image:hover img{transform:scale(1.02)}
.crane-glow,.hero-image .glow,.hero-image::before,.hero-image::after{z-index:0;pointer-events:none}

/* ========== Controls ========== */
.hero-controls{display:flex;gap:8px;align-items:center;margin-top:10px;flex-wrap:wrap}
.btn{
  flex:0 0 auto;padding:7px 14px;border-radius:9px;font-size:0.85rem;font-weight:700;
  border:1px solid rgba(255,255,255,0.14);background:transparent;color:rgba(240,240,240,0.85);
  cursor:pointer;letter-spacing:0.01em;transition:all .18s ease;box-shadow:none
}
.btn:hover{border-color:rgba(255,255,255,0.28);color:#fff}
.btn.accent,#zoomBtn,#gotoInc{
  background:rgba(253,216,53,0.08);color:var(--accent) !important;
  border:1px solid rgba(253,216,53,0.4);font-weight:700
}
.btn.accent:hover,#zoomBtn:hover,#gotoInc:hover{
  background:rgba(253,216,53,0.14);border-color:var(--accent);
  box-shadow:0 0 14px rgba(253,216,53,0.12);transform:translateY(-1px)
}

/* ========== Tabs ========== */
.tabs{display:flex;flex-direction:column;gap:6px;margin-top:12px;overflow-x:visible}
.tab-btn{
  padding:9px 14px;border-radius:9px;font-size:0.88rem;
  border:1px solid rgba(255,255,255,0.08);background:transparent;
  color:rgba(240,240,240,0.75);font-weight:700;cursor:pointer;text-align:left;transition:all .18s ease
}
.tab-btn:hover{border-color:rgba(255,255,255,0.2);color:#fff}
.tab-btn.active{
  background:rgba(253,216,53,0.1);color:var(--accent);
  border:1px solid rgba(253,216,53,0.45);box-shadow:none;transform:none
}
.tab-content{display:none}
.tab-content.active{display:block}
.tabs .tab-btn:not(.active){background:transparent}

/* ========== Layout — Incidences (mobile-first) ========== */
.incidences-grid{display:grid;grid-template-columns:1fr;gap:12px;align-items:start;width:100%}
.accordion{display:flex;flex-direction:column;gap:10px}
.acc-item{background:linear-gradient(180deg,rgba(255,255,255,0.012),transparent);border-radius:12px;padding:10px;border:1px solid rgba(255,255,255,0.03);cursor:pointer;margin:0;overflow:hidden}
.acc-head{display:flex;gap:12px;align-items:center;padding:12px 14px;min-height:88px;cursor:pointer}
.thumb{width:120px;height:86px;border-radius:10px;overflow:hidden;flex-shrink:0}
.thumb img{width:100%;height:100%;object-fit:cover;display:block;border-radius:6px}
.acc-meta{flex:1}
.acc-meta h4{margin:0 0 4px;font-size:1.06rem;line-height:1.25;font-weight:800}
.acc-meta p{margin:0;color:rgba(240,240,240,0.85);font-size:0.95rem;line-height:1.2;white-space:normal;display:-webkit-box;overflow:hidden;-webkit-box-orient:vertical;-webkit-line-clamp:2;line-clamp:2}
.acc-body{max-height:0;overflow:hidden;transition:max-height 280ms ease,padding 200ms ease;-webkit-overflow-scrolling:touch}
.acc-item.open{z-index:6;box-shadow:0 8px 30px rgba(0,0,0,0.45);outline:2px solid rgba(253,216,53,.28)}
.acc-item.open .acc-body{padding:12px;max-height:60vh;overflow-y:auto;-webkit-overflow-scrolling:touch;touch-action:pan-y}

/* ========== Images & Content Blocks ========== */
.pos-img{width:100%;border-radius:8px;overflow:hidden;background:#111;margin-bottom:10px}
.pos-img img,.detail-main-img img,.rx-annot img,.extra-row img{width:100%;height:auto;display:block;border-radius:8px;object-fit:contain}
.tech{display:flex;flex-direction:column;gap:8px;margin-bottom:10px}
.tech-row{display:flex;gap:8px;align-items:flex-start}
.tech-row strong{min-width:120px;display:inline-block}
.criteria ul{margin:8px 0 0 18px}

/* RX box */
.rx-annot{margin-top:10px;border-radius:8px;padding:10px;background:linear-gradient(180deg,rgba(40,40,40,0.72),rgba(30,30,30,0.6));border:1px solid rgba(245,213,53,0.12);box-shadow:0 18px 70px rgba(245,213,53,0.18),inset 0 1px 0 rgba(255,255,255,0.02)}
.rx-annot img{border-radius:8px;display:block}

/* Grid / detail */
.anat-grid{display:flex;flex-wrap:wrap;gap:12px;margin-top:10px}
.anat-item{width:48%}
.anat-item img{width:100%;border-radius:8px;cursor:pointer}
.anat-item figcaption{color:rgba(240,240,240,0.78);font-size:0.9rem;margin-top:6px}
.anat-item .small{color:rgba(240,240,240,0.6);font-size:0.85rem}

.detail-panel{margin-top:10px;align-self:start;min-width:0}
.card{margin-top:8px;padding:12px;border-radius:12px;background:linear-gradient(180deg,rgba(255,255,255,0.01),rgba(255,255,255,0.006));border:1px solid rgba(255,255,255,0.03)}
.card h3{margin:0;color:var(--accent);font-size:1.05rem}

/* ========== Zoom Modal (Upgraded) ========== */
.zoom-modal{
  position:fixed;inset:0;display:none;align-items:center;justify-content:center;
  background:rgba(11,11,11,0.85);backdrop-filter:blur(8px);z-index:99999;padding:20px;
  opacity:0;transform:scale(1.02);transition:opacity .3s ease,transform .35s ease
}
.zoom-modal.open{display:flex;opacity:1;transform:scale(1)}
@keyframes zoomFadeIn{from{opacity:0}to{opacity:1}}

/* ---- Themed frame: a lighter-grey card that clearly stands out from the
   black backdrop. Holds the clipped viewport + toolbar together as one
   unit, with the close button badged on its top-right corner. ---- */
.zoom-frame{
  position:relative;display:flex;flex-direction:column;align-items:center;gap:14px;
  max-width:96vw;max-height:96vh;
  padding:20px 20px 18px;border-radius:22px;
  background:#0f0f0f;
  border:1px solid rgba(245,213,53,0.16);
  box-shadow:0 30px 90px rgba(0,0,0,0.6),0 0 50px rgba(245,213,53,0.14);
  animation:zoomFadeIn .3s ease;
}

/* ---- Viewport: clips the zoomed/panned image to a fixed box, so it can
   never visually spill over the toolbar or the close button again. Kept
   to a thin single hairline (same weight/language as the header's fading
   accent line) with one soft glow, instead of a heavy ring. ---- */
.zoom-viewport{
  display:inline-block;line-height:0;overflow:hidden;border-radius:12px;
  border:1px solid rgba(245,213,53,0.55);
  box-shadow:0 0 22px rgba(245,213,53,0.28),0 12px 40px rgba(0,0,0,0.5);
}
.zoom-modal img{
  display:block;max-width:86vw;max-height:76vh;
  touch-action:none;user-select:none;-webkit-user-drag:none;
  cursor:zoom-in;transform-origin:center center;will-change:transform
}
.zoom-modal.zoomed img{cursor:grab}

.zoom-close{
  position:absolute;top:-16px;right:-16px;background:rgba(20,20,20,0.92);color:var(--accent);
  width:38px;height:38px;padding:0;font-size:19px;border-radius:50%;
  border:1px solid rgba(245,213,53,0.4);
  display:flex;align-items:center;justify-content:center;
  cursor:pointer;transition:transform .2s ease,background .2s ease;
  box-shadow:0 6px 18px rgba(0,0,0,0.5);z-index:3
}
.zoom-close:hover{background:rgba(245,213,53,0.22);transform:scale(1.1)}

/* ---- Minimal icon-only pill: −, reset, + — in-flow under the viewport
   on larger screens ---- */
.zoom-toolbar{
  position:static;display:flex;align-items:center;gap:2px;flex:0 0 auto;z-index:2;
  background:rgba(20,20,20,0.78);backdrop-filter:blur(8px);
  border:1px solid rgba(245,213,53,0.3);border-radius:999px;
  padding:5px;box-shadow:0 6px 24px rgba(0,0,0,0.45),0 0 24px rgba(245,213,53,0.2);
}
.zoom-toolbar .zoom-btn{
  width:40px;height:40px;border-radius:50%;
  background:transparent;color:var(--accent);
  border:none;font-size:19px;line-height:1;font-weight:700;cursor:pointer;
  display:flex;align-items:center;justify-content:center;
  transition:transform .15s ease,background .15s ease,box-shadow .15s ease,opacity .15s ease
}
.zoom-toolbar .zoom-btn-reset{font-size:16px}
.zoom-toolbar .zoom-btn:hover{background:rgba(245,213,53,0.18);transform:scale(1.08);box-shadow:0 0 14px rgba(245,213,53,0.3)}
.zoom-toolbar .zoom-btn:active{transform:scale(0.92)}
.zoom-toolbar .zoom-btn:disabled{opacity:0.3;cursor:default;pointer-events:none;transform:none;box-shadow:none}

/* ---- Mobile: pull the toolbar out of flow into a compact corner cluster
   on the viewport, so it never eats vertical space on small screens ---- */
@media (max-width:899px){
  .zoom-frame{max-width:90vw;max-height:88vh;padding:14px 14px 12px}
  .zoom-modal img{max-width:88vw;max-height:74vh}
  .zoom-close{top:-10px;right:-10px;width:34px;height:34px;font-size:17px}
  .zoom-toolbar{
    position:absolute;right:20px;bottom:20px;flex-direction:column;gap:6px;padding:6px;
  }
  .zoom-toolbar .zoom-btn{width:38px;height:38px;font-size:17px}
  .zoom-toolbar .zoom-btn-reset{font-size:15px}
}

button,.card{transition:transform .25s ease,box-shadow .25s ease}
button:hover,.card:hover{transform:translateY(-3px);box-shadow:0 0 20px rgba(245,213,53,0.25)}

/* ========== Extra rows / thumbnails ========== */
.extra-row{display:flex;gap:8px;flex-wrap:wrap;margin-top:8px;max-width:100%;overflow:hidden}
.extra-row img{width:160px;height:100px;object-fit:cover;border-radius:8px;cursor:pointer;border:1px solid rgba(255,255,255,0.03);max-width:100%;height:auto;flex:0 0 auto}

/* ========== Lists & small helpers ========== */
.block-section{margin-bottom:10px;color:rgba(240,240,240,0.95)}
.interest-block ul,.rx-notes ul,.criteria ul{margin-top:8px;margin-left:18px}
.reco{margin-top:12px;background:rgba(255,255,255,0.01);padding:8px;border-radius:8px}
.reco-txt{margin-top:6px;color:rgba(240,240,240,0.92)}
.lines{margin:6px 0}
.lines .line{margin-bottom:6px;font-size:0.95rem;color:inherit}

/* ========== Left panel / Accordion container ========== */
.incidences-grid>div:first-child{
  flex:0 0 var(--left-column-width);max-width:var(--left-column-max);
  display:flex;flex-direction:column;box-sizing:border-box
}
#incAccordion{
  box-sizing:border-box;flex:1 1 auto;max-height:calc(100vh - 160px);
  overflow-y:auto;padding:12px;gap:14px;-webkit-overflow-scrolling:touch;overscroll-behavior:contain
}
.incidences-container{max-height:300px;overflow-y:auto;padding-right:8px;scrollbar-width:thin;scrollbar-color:#ffcc00 #222}

/* Open state polish */
.acc-item.open{-webkit-overflow-scrolling:touch;outline:2px solid rgba(253,216,53,0.18);box-shadow:0 10px 30px rgba(253,216,53,.06)}

/* ========== Desktop layout ========== */
@media (min-width:900px){
  .tabs{flex-direction:row}
  .tab-btn{flex:1;text-align:center}
}

/* ========== Mobile & smaller screens (general UI) ========== */
@media(max-width:900px){
  .container{padding:12px;max-width:100%}
  .hero-card{box-shadow:0 18px 50px rgba(245,213,53,0.06)}
  .hero-image{padding:6px;border-radius:12px}
  .hero-image img{max-height:34vh}
  .hero-controls .btn{min-height:36px;padding:6px 12px;border-radius:9px;font-size:0.82rem}
  .tabs{display:flex;gap:6px;overflow-x:auto;-webkit-overflow-scrolling:touch;padding:4px 2px;margin-top:12px}
  .tab-btn{flex:0 0 auto;padding:7px 14px;border-radius:999px;min-width:0;text-align:center;background:transparent;font-weight:700;font-size:0.82rem}
  .tab-btn.active{background:rgba(253,216,53,0.12);color:var(--accent);border:1px solid rgba(253,216,53,0.45);box-shadow:none}
  body::before{
    content:'';position:fixed;inset:0;pointer-events:none;
    background:radial-gradient(800px 300px at 85% 8%,rgba(245,213,53,0.03),transparent 10%),
               radial-gradient(600px 200px at 10% 88%,rgba(245,213,53,0.02),transparent 8%);
    z-index:0
  }
  .container,header,.hero-card,.big-tab-area{position:relative;z-index:2}
}

/* ========== Final safety & readability ========== */
.acc-meta p{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;line-clamp:2;overflow:hidden;white-space:normal}
img,video{max-width:100%;height:auto;display:block}

/* ---------- Unified Scrollbar Theme (WebKit + Firefox) ---------- */
*::-webkit-scrollbar{width:var(--scroll-w);height:var(--scroll-w)}
*::-webkit-scrollbar-track{background:var(--scroll-track);border-radius:var(--scroll-radius)}
*::-webkit-scrollbar-thumb{background:var(--scroll-thumb);border-radius:var(--scroll-radius);border:2px solid rgba(0,0,0,0.18)}
*::-webkit-scrollbar-thumb:hover{background:var(--scroll-thumb-hover)}
#incAccordion,.incidences-container,.incidences-list,html,body{scrollbar-color:var(--scroll-thumb) var(--scroll-track);scrollbar-width:thin}

/* ===== LEFT MENU STRUCTURE ===== */
#incAccordion .acc-item,.incidences-list .acc-item{
  width:100%;box-sizing:border-box;display:flex;align-items:center;gap:14px;
  padding:12px 14px;border-radius:12px;overflow:visible;background:inherit
}
#incAccordion .thumb,#incAccordion .thumb img{
  flex:0 0 120px;width:120px;height:86px;max-width:120px;object-fit:cover;border-radius:10px;display:block;box-sizing:border-box
}
#incAccordion .acc-meta{flex:1 1 auto;min-width:0}
#incAccordion .acc-meta h4{
  margin:0 0 4px;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;line-clamp:2;overflow:hidden;white-space:normal
}
#incAccordion .acc-meta p{margin:0;white-space:normal;overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
#incAccordion>.acc-item:last-child{margin-bottom:12px}
@media (max-width:900px){
  #incAccordion .thumb{flex:0 0 110px;width:110px;height:80px}
}

/* ===== ENSURE ONLY #incAccordion SCROLLS ===== */
#incAccordion,.incidences-list,.incidences-container{overflow-y:auto;overflow-x:hidden;max-height:calc(100vh - 160px);box-sizing:border-box}
#incAccordion .acc-body,#incAccordion .acc-item .acc-body,.incidences-list .acc-body,.incidences-list .acc-item .acc-body{max-height:none;height:auto;overflow:visible;-webkit-overflow-scrolling:auto}
#incAccordion .acc-item,#incAccordion .acc-item.open{overflow:visible;max-height:none;height:auto;box-sizing:border-box}
#incAccordion .acc-item,#incAccordion .acc-head,#incAccordion .acc-meta,#incAccordion .thumb,#incAccordion .thumb img,#incAccordion .pos-img img,#incAccordion .extra-row img,#incAccordion .detail-main-img img{max-width:100%;width:100%;box-sizing:border-box}
#incAccordion .thumb img{width:100%;height:100%;object-fit:cover}
#incAccordion .acc-meta,#incAccordion .acc-meta *{min-width:0;white-space:normal;overflow-wrap:anywhere;word-break:break-word}
#incAccordion{padding-bottom:48px;scroll-padding-bottom:48px}
@media (max-width:900px){#incAccordion{max-height:none}#incAccordion .acc-body{padding:12px}}

/* ===== Desktop: keep detail panel on right & hide left acc-body ===== */
@media (min-width:900px){
  .incidences-grid{display:grid;grid-template-columns:var(--left-column-width) minmax(0,1fr);gap:16px;align-items:start}
  .incidences-grid>div:first-child{grid-column:1;position:relative;z-index:2}
  .incidences-grid>div:last-child{grid-column:2;position:relative;z-index:1}
  #incAccordion .acc-body{display:none;max-height:0;overflow:hidden;padding:0}
  #detailPanel{display:block;position:relative;z-index:3;min-width:0;box-sizing:border-box}
}

/* ===== Mobile: stacked header + themed detail card ===== */
@media (max-width:900px){
  #detailPanel{display:none;visibility:hidden;height:0;overflow:hidden}
  #incAccordion .acc-item{display:block;width:100%;padding:0;margin:0 0 18px 0;background:transparent;box-shadow:none;border-radius:0;overflow:visible;box-sizing:border-box}
  #incAccordion .acc-head{
    display:flex;align-items:center;gap:12px;padding:12px 16px;min-height:72px;
    background:linear-gradient(180deg,rgba(255,255,255,0.01),rgba(255,255,255,0.006));
    border-radius:14px;border:1px solid rgba(255,255,255,0.03);position:relative;z-index:3
  }
  #incAccordion .thumb{flex:0 0 110px;width:110px;height:80px;border-radius:10px;overflow:hidden}
  #incAccordion .thumb img{width:100%;height:100%;object-fit:cover}
  #incAccordion .acc-badge{
    position:absolute;top:10px;right:12px;background:var(--accent);color:#111;padding:8px 10px;
    font-weight:800;border-radius:8px;box-shadow:0 8px 26px rgba(0,0,0,0.35);z-index:5;min-width:36px;text-align:center
  }
  #incAccordion .acc-body{display:none;max-height:none;overflow:visible;padding:0;margin:0;box-sizing:border-box}
  #incAccordion .acc-item.open .acc-body{
    display:block;width:100%;max-width:520px;margin:12px auto 0 auto;padding:18px;
    background:var(--panel);border-radius:14px;
    box-shadow:0 18px 60px rgba(0,0,0,0.45);overflow:visible;-webkit-overflow-scrolling:auto;z-index:2;
    border:1px solid rgba(255,255,255,0.03)
  }
  #incAccordion .acc-item.open .acc-body img,#incAccordion .detail-main-img img,#incAccordion .pos-img img{
    border-radius:10px;width:100%;height:auto;max-height:48vh;object-fit:contain;display:block
  }
  #incAccordion .acc-item.open .acc-body h4,#incAccordion .acc-item.open .acc-body .accent-h{margin-top:0}
  #incAccordion .acc-item.open .acc-body,#incAccordion .acc-item.open .acc-body *{white-space:normal;word-break:break-word;overflow-wrap:anywhere;min-width:0}
  /* Restore yellow labels inside mobile open body */
  #incAccordion .acc-item.open .acc-body .block-section strong,
  #incAccordion .acc-item.open .acc-body .info-pill strong,
  #incAccordion .acc-item.open .acc-body .criteria h4,
  #incAccordion .acc-item.open .acc-body .rx-annot h4,
  #incAccordion .acc-item.open .acc-body .reco strong{color:#fdd835 !important}
  #incAccordion,.incidences-list{max-height:none;overflow:visible;-webkit-overflow-scrolling:auto;padding-bottom:64px;scroll-padding-bottom:64px}
  @media(max-width:360px){
    #incAccordion .acc-head{padding:10px 12px;min-height:64px}
    #incAccordion .thumb{flex:0 0 92px;width:92px;height:72px}
    #incAccordion .acc-item.open .acc-body{max-width:380px;padding:12px}
  }
}

/* ========== Incidence number badges ========== */
.acc-badge,.badge-num,.accidence-badge,.incidence .badge-num,.acc-head .num,.acc-head .number{
  display:inline-flex;align-items:center;justify-content:center;background:var(--accent);color:#111;font-weight:800;
  font-size:0.85rem;width:34px;height:34px;padding:0;border-radius:8px;box-shadow:0 6px 18px rgba(0,0,0,0.25);
  line-height:1;text-align:center;min-width:34px;flex:0 0 auto;margin-right:10px
}
@media (max-width:520px){.acc-badge,.badge-num,.acc-head .num{width:30px;height:30px;font-size:0.78rem;border-radius:6px}}

/* ========== Right detail panel (desktop theme) ========== */
@media (min-width:900px){
  #detailPanel,.detail-panel,.detail-panel .card,#detailPanel .card{
    background:linear-gradient(180deg,rgba(245,213,53,0.06),rgba(28,28,28,0.96));
    border:1px solid rgba(245,213,53,0.10);
    box-shadow:0 6px 24px rgba(0,0,0,0.45),inset 0 1px 0 rgba(255,255,255,0.02);
    color:var(--text);border-radius:12px;padding:10px
  }
  #detailPanel .card h3,#detailPanel h2,.detail-panel .card h3{color:rgba(245,213,53,0.98)}
}

/* ========== Mobile details panel bg ========== */
@media (max-width:900px){
  #incAccordion .acc-item.open .acc-body{
    background:linear-gradient(180deg,rgba(245,213,53,0.03),rgba(28,28,28,0.98));
    border:1px solid rgba(245,213,53,0.06);box-shadow:0 18px 60px rgba(0,0,0,0.45);-webkit-overflow-scrolling:touch
  }
}

/* ========== Misc polish ========== */
.acc-head,#incAccordion .acc-item,.acc-meta{min-width:0;overflow-wrap:anywhere;word-break:break-word}
.tabs .tab-btn,.topbar .brand,.hero-controls .btn{position:relative;z-index:1002}

/* ---------- NAVBAR FIX v5 ---------- */
header.topbar>.container{
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  max-width:1200px;width:100%;margin:0 auto;padding:0 1.5rem;box-sizing:border-box
}
header.topbar .brand{
  order:0;display:flex;align-items:center;gap:10px;white-space:nowrap;overflow:visible;flex:0 1 auto;min-width:0
}
header.topbar .brand img{height:50px;width:auto;max-width:none;flex-shrink:0;border-radius:0}
header.topbar .brand .title{
  white-space:nowrap;display:inline-block;flex:0 1 auto;min-width:0;font-size:clamp(0.95rem,1.1vw,1.05rem)
}
/* margin-inline-start (not margin-left) so this stays correct under
   dir="rtl" — it's just a fallback for if bone-page.js hasn't run yet;
   once it does, #bpHeaderActions wraps both the lang pill and this
   button together and owns the right-alignment itself (see its own
   rule below). No `order` needed either way — plain document order
   already places .retour after .brand. */
header.topbar .retour{
  margin-inline-start:auto;display:inline-flex;align-items:center;gap:6px;padding:8px 16px;border-radius:10px;
  font-weight:700;text-decoration:none;white-space:nowrap;flex-shrink:0
}
header.topbar .retour::before{
  content:"\2190";font-size:1rem;font-weight:700;color:var(--accent);
}
/* RTL: a left-pointing arrow reads backwards once the button sits on the
   left of a right-to-left header — flip it to point the way "back"
   actually feels in RTL (toward the reading-start, i.e. the right). */
html[dir="rtl"] header.topbar .retour::before{
  content:"\2192";
}
/* Once JS groups the lang pill + retour, this wrapper owns the
   right-alignment; .retour itself no longer needs its own auto margin. */
header.topbar #bpHeaderActions{
  display:flex;align-items:center;gap:10px;margin-inline-start:auto;flex-shrink:0
}
header.topbar #bpHeaderActions .retour{
  margin-inline-start:0;
}
@media (max-width:520px){
  header.topbar .retour{padding:6px 12px;font-size:0.88rem;}
}
@media (max-width:420px){
  header.topbar{padding-top:10px;padding-bottom:10px}
  header.topbar>.container{gap:8px;flex-wrap:wrap}
  header.topbar .brand{white-space:normal;flex-wrap:wrap}
  header.topbar .brand .title{white-space:normal;display:block;width:100%;margin-top:4px;font-size:0.98rem}
  header.topbar .retour{margin-top:6px;align-self:center}
  header.topbar #bpHeaderActions{margin-inline-start:0;width:100%;margin-top:6px;justify-content:center}
}
header.topbar .retour:hover,header.topbar .retour:focus{
  transform:translateY(-2px) scale(1.03);box-shadow:0 14px 50px rgba(245,213,53,0.18);outline:none
}

/* ---------- Modern Anatomy tab styles ---------- */
.anat-tab{padding:14px;box-sizing:border-box}
.anat-layout{display:flex;gap:20px;align-items:flex-start;width:100%;box-sizing:border-box}
.anat-left{
  flex:0 0 340px;max-width:360px;min-width:240px;padding:18px;border-radius:12px;
  background:linear-gradient(180deg,rgba(255,255,255,0.02),rgba(255,255,255,0.01));
  border:1px solid rgba(255,255,255,0.02);box-shadow:0 8px 30px rgba(0,0,0,0.45)
}
.anat-left h4{margin:0 0 8px 0;color:var(--accent);font-size:1.02rem}
.anat-left p{color:rgba(240,240,240,0.92);line-height:1.5;margin:8px 0 12px}
.anat-left ul{margin:8px 0 0 18px;color:rgba(240,240,240,0.92)}
.anat-right{flex:1 1 0;display:flex;flex-direction:column;gap:12px;min-width:0}
.anat-main-card{
  border-radius:12px;padding:12px;background:linear-gradient(180deg,rgba(20,20,20,0.6),rgba(12,12,12,0.6));
  border:1px solid rgba(255,255,255,0.03);box-shadow:0 16px 60px rgba(0,0,0,0.6);
  display:flex;flex-direction:column;align-items:center
}
.anat-main-card img{width:100%;max-height:64vh;object-fit:contain;border-radius:10px;display:block;transition:transform .18s ease,box-shadow .18s ease;cursor:pointer}
.anat-main-card img:hover{transform:scale(1.01);box-shadow:0 20px 60px rgba(245,213,53,0.06)}
.anat-caption{display:none !important}
.anat-thumbs{display:flex;gap:10px;align-items:center;overflow-x:auto;padding:8px 4px;-webkit-overflow-scrolling:touch}
.anat-thumb{width:120px;height:78px;flex:0 0 auto;border-radius:10px;overflow:hidden;position:relative;cursor:pointer;border:2px solid transparent;box-shadow:0 6px 18px rgba(0,0,0,0.45)}
.anat-thumb img{width:100%;height:100%;object-fit:cover;display:block}
.anat-thumb .thumb-label{position:absolute;left:8px;bottom:6px;font-size:0.82rem;padding:6px 8px;background:rgba(0,0,0,0.4);color:#fff;border-radius:8px;font-weight:700}
.anat-thumb.active{border-color:rgba(245,213,53,0.96);transform:translateY(-4px);box-shadow:0 18px 40px rgba(245,213,53,0.08)}
#anatGrid{display:grid;grid-template-columns:repeat(2,1fr);gap:10px;margin-top:6px}
#anatGrid figure{background:linear-gradient(180deg,rgba(255,255,255,0.01),rgba(255,255,255,0.004));padding:8px;border-radius:10px;box-sizing:border-box;cursor:pointer}
#anatGrid img{width:100%;height:140px;object-fit:cover;border-radius:8px;display:block}
@media (max-width:900px){
  .anat-layout{flex-direction:column}
  .anat-left{order:2;width:100%;max-width:100%;padding:12px}
  .anat-right{order:1}
  #anatGrid img{height:120px}
  .anat-thumb{width:96px;height:68px}
}

/* Scrollable sections in Anatomie (left panel) */
.anat-left .scroll-section{
  margin:10px 0 14px;padding:10px;border-radius:12px;
  background:linear-gradient(180deg,rgba(255,255,255,0.02),rgba(255,255,255,0.01));
  border:1px solid rgba(255,255,255,0.03);box-shadow:0 8px 26px rgba(0,0,0,0.35)
}
.anat-left .scroll-title{margin:0 0 8px 0;font-size:1.02rem;font-weight:800;color:var(--accent)}
.anat-left .scroll-body{
  background:var(--panel);border:1px solid rgba(255,255,255,0.04);border-radius:10px;padding:12px 14px;
  box-shadow:inset 0 1px 0 rgba(255,255,255,0.02);overflow:auto;max-height:clamp(140px,24vh,240px)
}
.anat-left .scroll-body p{margin:0;color:rgba(240,240,240,0.92);line-height:1.5}
.anat-left .scroll-body ul{margin:0;padding-left:18px;list-style:disc;color:rgba(240,240,240,0.92)}
.anat-left .scroll-body li{margin:6px 0}
/* themed slim scrollbar inside */
.anat-left .scroll-body::-webkit-scrollbar{width:var(--scroll-w)}
.anat-left .scroll-body::-webkit-scrollbar-track{background:var(--scroll-track);border-radius:var(--scroll-radius)}
.anat-left .scroll-body::-webkit-scrollbar-thumb{background:var(--scroll-thumb);border-radius:var(--scroll-radius);border:2px solid rgba(0,0,0,0.18)}
.anat-left .scroll-body::-webkit-scrollbar-thumb:hover{background:var(--scroll-thumb-hover)}
.anat-left .scroll-body{scrollbar-color:var(--scroll-thumb) var(--scroll-track);scrollbar-width:thin}
/* Taller Crâne scroll section */
.anat-left .crane-scroll{max-height:clamp(200px,32vh,5px)}

/* SOURCES TAB STYLING */
.sources-list{display:grid;gap:1rem;margin-top:1rem}
.source-card{
  background:var(--panel,#1c1c1c);padding:1rem;border-radius:1rem;
  box-shadow:0 4px 12px rgba(0,0,0,0.3);transition:transform .2s ease,box-shadow .2s ease;
  min-width:0;overflow-wrap:anywhere;word-break:break-word
}
.source-card:hover{transform:translateY(-4px);box-shadow:0 6px 16px rgba(0,0,0,0.4)}
.source-card h4{margin:0 0 .25rem 0;color:var(--accent,#f5c518);font-weight:700}
.source-card p,.source-card a{color:rgba(240,240,240,0.9);font-size:0.95rem}
.source-card a{text-decoration:underline;transition:color .2s ease}
.source-card a:hover{color:var(--accent,#f5c518)}
@media (min-width:700px){.sources-list{grid-template-columns:repeat(auto-fit,minmax(280px,1fr))}}

/* ===== Header meta title behavior (no subtitle in header) ===== */
#incAccordion .acc-head .acc-meta{min-width:0 !important;overflow:hidden !important}
#incAccordion .acc-head .acc-meta>h4,#incAccordion .acc-head .acc-meta h4{
  display:block !important;white-space:normal !important;overflow:visible !important;text-overflow:unset !important;
  max-width:100% !important;margin:0 0 4px 0 !important;word-break:break-word !important;overflow-wrap:anywhere !important
}
#incAccordion .acc-head .acc-meta>p{
  display:none !important;visibility:hidden !important;height:0 !important;margin:0 !important;padding:0 !important;overflow:hidden !important;
  padding-right:40px !important;position:relative
}
#incAccordion .acc-head .acc-meta>h4{padding-right:6px;overflow-wrap:normal !important;word-break:normal !important}
#incAccordion .acc-head .acc-badge{flex:0 0 auto;margin-left:8px}
@media (max-width:520px){#incAccordion .acc-head .acc-meta>h4{font-size:1rem}}

/* === Top navbar bottom edge handled by .topbar::after gradient hairline === */

/* ===== Incidences — animated + themed (append at end) ===== */

/* base: prepare items for animation and hover */
#incAccordion .acc-item {
  position: relative;
  transform: translateY(10px) scale(1);
  opacity: 0;
  will-change: transform, opacity, box-shadow;
  animation: accFadeIn 380ms cubic-bezier(.2,.9,.2,1) forwards;
  transition: transform .22s cubic-bezier(.2,.9,.2,1), box-shadow .22s ease, background .22s ease, border-color .22s ease;
  background-clip: padding-box;
}

/* staggered entrance (extend if you have many items) */
#incAccordion .acc-item:nth-child(1){ animation-delay: 0.06s; }
#incAccordion .acc-item:nth-child(2){ animation-delay: 0.12s; }
#incAccordion .acc-item:nth-child(3){ animation-delay: 0.18s; }
#incAccordion .acc-item:nth-child(4){ animation-delay: 0.24s; }
#incAccordion .acc-item:nth-child(5){ animation-delay: 0.30s; }
#incAccordion .acc-item:nth-child(6){ animation-delay: 0.36s; }
#incAccordion .acc-item:nth-child(7){ animation-delay: 0.42s; }
#incAccordion .acc-item:nth-child(8){ animation-delay: 0.48s; }
#incAccordion .acc-item:nth-child(9){ animation-delay: 0.54s; }
#incAccordion .acc-item:nth-child(10){ animation-delay: 0.60s; }
#incAccordion .acc-item:nth-child(11){ animation-delay: 0.66s; }
#incAccordion .acc-item:nth-child(12){ animation-delay: 0.72s; }

/* entry keyframe */
@keyframes accFadeIn {
  from { opacity: 0; transform: translateY(12px) scale(0.997); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}

/* hover / focus interactions (themed) */
#incAccordion .acc-item:hover,
#incAccordion .acc-item:focus-within {
  transform: translateY(-8px) scale(1.02);
  box-shadow: 0 18px 60px rgba(245,213,53,0.06), 0 6px 18px rgba(0,0,0,0.45);
  background: linear-gradient(180deg, rgba(245,213,53,0.02), rgba(18,18,18,0.6));
  border-color: rgba(245,213,53,0.06);
}

/* keep the open state elevated too */
#incAccordion .acc-item.open {
  transform: translateY(-6px) scale(1.01);
}

/* small tap/active feedback for touch */
#incAccordion .acc-item:active {
  transform: translateY(-4px) scale(1.01);
}

/* thumb image scales subtly */
#incAccordion .thumb img {
  transition: transform .28s cubic-bezier(.2,.9,.2,1), box-shadow .22s ease;
  backface-visibility: hidden;
  transform-origin: center;
}
#incAccordion .acc-item:hover .thumb img,
#incAccordion .acc-item:focus-within .thumb img {
  transform: scale(1.035);
  box-shadow: 0 12px 30px rgba(0,0,0,0.35);
}

/* badge pop */
#incAccordion .acc-item:hover .acc-badge,
#incAccordion .acc-item:focus-within .acc-badge {
  transform: scale(1.06);
  box-shadow: 0 10px 30px rgba(0,0,0,0.38);
}

/* subtle top accent bar (appears on hover) */
#incAccordion .acc-item::after{
  content: "";
  position: absolute;
  left: 0; right: 0; top: 0;
  height: 3px;
  border-radius: 3px 3px 0 0;
  background: linear-gradient(90deg, rgba(245,213,53,0.98), rgba(245,213,53,0.65));
  transform: scaleX(0);
  transform-origin: left;
  opacity: 0;
  transition: transform .28s ease, opacity .28s ease;
  pointer-events: none;
}
#incAccordion .acc-item:hover::after,
#incAccordion .acc-item:focus-within::after {
  transform: scaleX(1);
  opacity: 1;
}

/* title / meta color shift on hover (themed) */
#incAccordion .acc-item:hover .acc-meta h4,
#incAccordion .acc-item:focus-within .acc-meta h4 {
  color: var(--accent);
  transition: color .18s ease;
}

/* accessible focus ring */
#incAccordion .acc-item:focus-within,
#incAccordion .acc-item:focus {
  outline: none;
  box-shadow: 0 0 0 4px rgba(245,213,53,0.08), 0 12px 40px rgba(0,0,0,0.35);
}

/* reduce motion for users who prefer it */
@media (prefers-reduced-motion: reduce) {
  #incAccordion .acc-item,
  #incAccordion .acc-item * {
    animation: none !important;
    transition: none !important;
  }
  #incAccordion .acc-item { opacity: 1; transform: none; }
}

/* optional: limit heavy shadows on small screens */
@media (max-width: 520px) {
  #incAccordion .acc-item:hover { box-shadow: 0 8px 20px rgba(0,0,0,0.35); transform: translateY(-4px) scale(1.01); }
  #incAccordion .acc-item::after{ height: 2px; }
}

/* === FIX: Accordion items clipping text === */
.acc-head {
  display: flex;
  align-items: center;
  gap: 12px; /* space between elements */
}

.acc-meta {
  flex: 1;            /* let text take all available space */
  min-width: 0;       /* IMPORTANT: prevents flexbox text clipping */
}

.acc-meta h4 {
  white-space: normal; /* allow wrapping */
  overflow: visible;   /* no clipping */
  text-overflow: unset;
  margin: 0 0 4px 0;   /* add breathing room above/below */
}

.acc-badge {
  flex-shrink: 0;       /* badge keeps its size */
  margin-left: 10px;    /* space from text */
}

/* 768px block removed — layout handled by 900px breakpoints only */

/* ===== MOBILE: force accordion details to expand BELOW the item (final) =====
   Paste this at the VERY END of crane.css and hard-refresh the page.
*/

@media (max-width: 900px) {
  /* Hide the right-side detail panel on mobile (we want inline expansion) */
  #detailPanel,
  .detail-panel {
    display: none !important;
    visibility: hidden !important;
    height: 0 !important;
    overflow: hidden !important;
  }

  /* Make each acc-item stack (not a side-by-side flex row) */
  #incAccordion .acc-item {
    display: block !important;
    width: 100% !important;
    padding: 0 !important;
    margin: 0 0 18px 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    border-radius: 0 !important;
    overflow: visible !important;
    box-sizing: border-box !important;
    position: relative !important;
  }

  /* Header stays a compact row: thumb | meta; badge will be absolute */
  #incAccordion .acc-head {
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
    padding: 12px 16px !important;
    min-height: 72px !important;
    background: linear-gradient(180deg, rgba(255,255,255,0.01), rgba(255,255,255,0.006)) !important;
    border-radius: 14px !important;
    border: 1px solid rgba(255,255,255,0.03) !important;
    position: relative !important; /* so absolute badge sits inside header */
    z-index: 3 !important;
  }

  /* Thumb small but fixed on mobile header */
  #incAccordion .thumb {
    flex: 0 0 92px !important;
    width: 92px !important;
    height: 72px !important;
    min-width: 92px !important;
    overflow: hidden !important;
    border-radius: 10px !important;
  }
  #incAccordion .thumb img { width: 100% !important; height: 100% !important; object-fit: cover !important; display:block !important; }

  /* Meta expands to remaining header space */
  #incAccordion .acc-meta {
    flex: 1 1 auto !important;
    min-width: 0 !important;
    max-width: calc(100% - 140px) !important;
    overflow: visible !important;
    white-space: normal !important;
    padding-right: 8px !important;
  }
  #incAccordion .acc-meta h4 { margin: 0 !important; line-height: 1.18 !important; white-space: normal !important; }

  /* Put the badge as overlay inside the header on mobile (like before) */
  #incAccordion .acc-badge {
    position: absolute !important;
    top: 10px !important;
    right: 12px !important;
    z-index: 6 !important;
    flex: 0 0 auto !important;
    width: 36px !important;
    height: 36px !important;
    min-width: 36px !important;
    margin: 0 !important;
  }

  /* When item is opened, show acc-body FULL WIDTH below header */
  #incAccordion .acc-item.open .acc-body {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    margin: 12px 0 0 0 !important;
    padding: 18px !important;
    background: var(--panel) !important;
    border-radius: 12px !important;
    box-shadow: 0 18px 60px rgba(0,0,0,0.45) !important;
    overflow: visible !important;
    -webkit-overflow-scrolling: touch !important;
    z-index: 2 !important;
    border: 1px solid rgba(255,255,255,0.03) !important;
    box-sizing: border-box !important;
  }

  /* Make images inside the open body big and responsive */
  #incAccordion .acc-item.open .acc-body img,
  #incAccordion .acc-item.open .pos-img img,
  #incAccordion .acc-item.open .detail-main-img img {
    width: 100% !important;
    height: auto !important;
    max-height: 48vh !important;
    object-fit: contain !important;
    display: block !important;
    border-radius: 10px !important;
  }

  /* Yellow section labels — guaranteed via CSS (JS inline styles also set these) */
  #incAccordion .acc-item.open .acc-body .block-section strong,
  #incAccordion .acc-item.open .acc-body .info-pill strong,
  #incAccordion .acc-item.open .acc-body .criteria h4,
  #incAccordion .acc-item.open .acc-body .rx-annot h4,
  #incAccordion .acc-item.open .acc-body .reco strong {
    color: #fdd835 !important;
  }
}

/* ---------- FIX: prevent incidence titles from being cut off by the badge ---------- */
/* Paste this at the END of crane.css */

#incAccordion .acc-head .acc-meta {
  min-width: 0 !important;            /* allow proper flex shrinking */
  padding-right: 56px !important;     /* reserve space for badge + gap */
  overflow: visible !important;
  word-break: break-word;
  overflow-wrap: anywhere;
}

/* Keep the two-line clamp but allow clean wrapping within the reserved space */
#incAccordion .acc-head .acc-meta > h4,
#incAccordion .acc-head .acc-meta h4 {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: normal;
  margin: 0;
  line-height: 1.18;
}

/* Desktop: badge usually sits inline — less padding needed */
@media (min-width: 900px) {
  #incAccordion .acc-head .acc-meta { padding-right: 44px !important; }
}

/* Mobile: badge is absolutely positioned in the header — give more space */
@media (max-width: 900px) {
  #incAccordion .acc-head .acc-meta { padding-right: 72px !important; }
  /* ensure the header stays vertically centered when titles wrap */
  #incAccordion .acc-head { align-items: center; }
  /* keep badge visible but not overlapping text */
  #incAccordion .acc-head .acc-badge { z-index: 6; flex-shrink: 0; margin-left: 8px; }
}

/* small-safe fallback if some browsers still clip */
#incAccordion .acc-head .acc-meta { min-width: 0; max-width: 100%; }

/* ---------- FIX: make right detail panel scrollable on big screens ---------- */
@media (min-width: 900px) {
  #detailPanel .card {
    max-height: 85vh;       /* limits to 70% of viewport height */
    overflow-y: auto;       /* enables vertical scrolling */
    padding-right: 8px;     /* room so scrollbar doesn’t overlay text */
  }

  /* nice scrollbar styling to match theme */
  #detailPanel .card::-webkit-scrollbar {
    width: 8px;
  }
  #detailPanel .card::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.2);
    border-radius: 6px;
  }
  #detailPanel .card::-webkit-scrollbar-thumb:hover {
    background: rgba(255, 255, 255, 0.35);
  }
}

.block-section strong,
.info-pill strong,
.criteria h4,
.rx-annot h4,
.reco strong {
  color: #fdd835 !important;
}

/* ── Accordion card title fix ── */
.acc-meta h4 {
  font-size: 0.85rem;
  line-height: 1.3;
  word-break: break-word;
}

/* ── Unify intérêt + critères styling ── */
.block-section .lines .line {
  font-size: 0.9rem;
  line-height: 1.6;
  padding: 4px 0;
  border-bottom: 1px solid rgba(255,255,255,0.04);
}

.criteria ul {
  list-style: none;
  padding: 0;
}

.criteria ul li {
  font-size: 0.9rem;
  line-height: 1.6;
  padding: 4px 0;
  border-bottom: 1px solid rgba(255,255,255,0.04);
}

.criteria ul li::before {
  content: none;
}