:root{
    --bg:#fff; --fg:#111; --muted:#666; --card:#f6f7f9; --accent:#2563eb; --border:#e6e6e6;
    --header-h:56px;
  }
  @media (prefers-color-scheme: dark){
    :root{ --bg:#0c0c0f; --fg:#f5f7fb; --muted:#9aa0a6; --card:#15161a; --accent:#60a5fa; --border:#24262b; }
  }
  [data-theme="light"]{ --bg:#fff; --fg:#111; --muted:#666; --card:#f6f7f9; --accent:#2563eb; --border:#e6e6e6; }
  [data-theme="dark"]{ --bg:#0c0f12; --fg:#f5f7fb; --muted:#9aa0a6; --card:#15161a; --accent:#60a5fa; --border:#24262b; }

  *{box-sizing:border-box}
  html,body{margin:0;background:var(--bg);color:var(--fg);font-family:system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,sans-serif}
  body{touch-action:pan-y pinch-zoom;}

  header{
    position:sticky; top:0; z-index:20;
    border-bottom:1px solid var(--border);
    backdrop-filter:blur(6px);
    background:color-mix(in srgb,var(--bg) 85%,transparent)
  }
  .bar{max-width:980px;margin:0 auto;padding:10px;display:flex;gap:10px;align-items:center;flex-wrap:wrap}
  .title{font-weight:800}
  .spacer{flex:1;min-width:10px}
  .iconbtn{border:1px solid var(--border);background:var(--card);color:var(--fg);
           border-radius:10px;padding:6px 9px;font-size:.85rem;font-weight:600;text-decoration:none}
  .pill{font-size:.75rem;border-radius:999px;padding:4px 8px;border:1px solid var(--border);background:var(--card)}

  .playerSticky{
    position:sticky;
    top:calc(var(--header-h) + 4px);
    z-index:18;
  }
  .playerCard{
    position: relative; /* For absolute positioning of toggle button */
    margin:4px auto;
    padding:4px 8px;
    border:1px solid var(--border);
    border-radius:12px;
    background:var(--card);
    max-width:980px;
  }
  .playerCard h2{
    font-size:.9rem;
    margin:0 0 2px;
  }
  audio{
    width:100%;
    height:32px;
  }
  .timeDisplay{
    margin:6px 0 0;
    font-size:.82rem;
    font-weight:500;
    display:flex;
    gap:6px;
    align-items:center;
  }

  .playerControls .btn{
    border:1px solid var(--border);
    background:var(--card);
    color:var(--fg);
    border-radius:12px;
    padding:8px 12px;
    font-size:.86rem;
    font-weight:700;
    cursor:pointer;
    transition:transform .12s ease, box-shadow .12s ease;
  }
  .playerControls .btn:hover:not(:disabled){transform:translateY(-1px);}
  .playerControls .btn:disabled{opacity:0.5;cursor:default;}
  .playerControls .skipGroup{
    display:flex;
    gap:2px;
    flex-wrap:wrap;
  }
  .playerControls .skipGroup .btn{
    min-width:px;
    text-align:center;
  }
  .playerControls .btn[data-role]{
    background:var(--accent);
    color:#fff;
    border-color:var(--accent);
    box-shadow:0 4px 10px rgba(0,0,0,0.14);
  }
  .playerControls .btn[data-role]:disabled{
    opacity:0.6;
    color:#fff;
  }
  .sectionInfo{
    margin-top:8px;
    border:1px dashed var(--border);
    border-radius:12px;
    background:color-mix(in srgb,var(--card) 92%, transparent);
    padding:8px 10px;
  }
  .sectionInfo h3{
    margin:0 0 4px;
    font-size:.95rem;
  }
  .sectionInfo .meta{
    margin:0 0 6px;
    padding:0;
    font-size:.8rem;
    color:var(--muted);
  }
  .sectionInfo .sectionText{
    margin:0 0 6px;
    font-size:.9rem;
    white-space:pre-wrap;
  }
  .sectionImages{
    display:flex;
    flex-wrap:wrap;
    gap:8px;
  }
  .sectionImages img{
    width:100%;
    height:auto;
    object-fit:cover;
    border-radius:8px;
    border:1px solid var(--border);
    cursor:pointer;
    background:#000;
  }
  .audioDebug{
    margin-top:2px;
    font-size:.4rem;
    color:var(--muted);
  }
  .audioDebug a{color:var(--accent);text-decoration:none;}

  /* En plein écran on compresse le lecteur (on cache le texte pour gagner de la place) */
  body.fs-open .playerCard h2,
  body.fs-open .audioDebug{display:none;}

  main{max-width:980px;margin:0 auto;padding:10px 10px 40px}
  .note{font-size:.9rem;color:var(--muted);margin:4px 0 8px}
  .note strong{font-weight:700}

  .sections{display:grid;gap:10px;grid-template-columns:1fr;margin-top:8px}
  @media(min-width:700px){ .sections{ grid-template-columns:repeat(2, minmax(0,1fr)); } }

  .part{
    border:1px solid var(--border);
    border-radius:12px;
    overflow:hidden;
    background:var(--card);
    outline:none;
  }
  .part:focus-visible{outline:2px solid var(--accent);outline-offset:2px;}
  .partHead{
    display:flex;
    align-items:center;
    gap:6px;
    padding:6px 8px;
    border-bottom:1px solid var(--border)
  }
  .partHead h3{
    font-size:.95rem;
    margin:0;
    flex:1;
    cursor:pointer;
  }

  .playbtn{
    border:1px solid var(--border);
    background:var(--fg);
    color:var(--bg);
    padding:4px 8px;
    border-radius:999px;
    cursor:pointer;
    font-weight:700;
    font-size:.75rem;
  }
  .playbtn:hover{filter:brightness(1.05);}

  .sheet.hasimg{padding:0;background:none;cursor:pointer}
  .sheet.hasimg img{display:block;width:100%;height:auto;border:0}

  .sheet.noimg{
    min-height:40px;height:40px;display:flex;align-items:center;
    padding:4px 8px;background:none!important;
  }
  .sheet.noimg .label{
    background:var(--card);border:1px solid var(--border);padding:4px 8px;
    border-radius:16px;font-size:.8rem;font-weight:600;
  }

  .meta{
    display:flex;
    gap:8px;
    align-items:center;
    padding:6px 8px;
    color:var(--muted);
    font-size:.75rem
  }
  .dot{width:6px;height:6px;border-radius:50%;background:var(--accent)}

  .sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);border:0}
  .error{color:#f97373;font-size:.9rem;margin-top:6px}

  /* Visionneuse plein écran */
  .fsOverlay{
    position:fixed;
    inset:0;
    background:rgba(0,0,0,0.95);
    color:#f9fafb;
    display:none;
    z-index:40;
    align-items:flex-start;
    justify-content:center;
    padding:10px 0 80px;
  }
  .fsOverlay.open{display:flex;}
  .fsInner{
    position:relative;
    width:100%;
    max-width:1024px;
    max-height:100vh;
    padding:0 10px;
    display:flex;
    flex-direction:column;
    gap:6px;
  }
  .fsClose{
    position:absolute;
    top:6px; right:18px;
    border:none;
    background:rgba(15,23,42,0.8);
    color:#f9fafb;
    border-radius:999px;
    padding:4px 9px;
    cursor:pointer;
    font-size:.8rem;
    z-index:5;
  }
  .fsImageWrap{
    flex:1;
    display:flex;
    align-items:flex-start;
    justify-content:flex-start;  /* image ancrée à gauche */
    padding:10px 2px 0;
    overflow:auto;
    
  }
  .fsImageWrap img{
    max-width:100%;
    max-height:60vh;
    object-fit:contain;
    background:#000;
    transition:transform 0.15s ease;
  }
  .fsImageWrap img.zoomed{
    max-width:none;
    max-height:none;
    transform:scale(1.7);       /* zoom clair */
    transform-origin:top left;
  }

  .fsMeta{
    border-radius:14px;
    background:rgba(15,23,42,0.96);
    padding:8px 10px;
    font-size:.85rem;
    display:flex;
    flex-direction:column;
    gap:4px;
  }
  .fsLabel{font-weight:700;}
  .fsTime{font-size:.8rem;color:#e5e7eb;}

  .fsNavRow{
    margin-top:2px;
    display:flex;
    align-items:center;
    gap:6px;
  }
  .fsNavBtn{
    flex:1;
    border:1px solid rgba(148,163,184,0.7);
    background:transparent;
    color:#e5e7eb;
    border-radius:999px;
    padding:4px 6px;
    font-size:.72rem;
    cursor:pointer;
    text-align:left;
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
  }
  .fsNavBtn.right{text-align:right;}
  .fsNavBtn.disabled{opacity:0.3;cursor:default;}

  .fsControlsRow{
    margin-top:4px;
    display:flex;
    align-items:center;
    gap:6px;
    flex-wrap:wrap;
  }
  .fsPlayBtn{
    border:none;
    background:#22c55e;
    color:#022c22;
    padding:4px 10px;
    border-radius:999px;
    font-weight:700;
    cursor:pointer;
    font-size:.8rem;
    white-space:nowrap;
  }
  .fsPlayBtn:hover{filter:brightness(1.05);}
  .fsZoomBtn{
    border:none;
    background:#eab308;
    color:#422006;
    padding:4px 8px;
    border-radius:999px;
    font-weight:600;
    cursor:pointer;
    font-size:.8rem;
    white-space:nowrap;
  }
  .fsZoomBtn:hover{filter:brightness(1.05);}

  .btn-primary{
    border:none;
    background:#22c55e;
    color:#022c22;
    padding:4px 10px;
    border-radius:999px;
    font-weight:700;
    font-size:.8rem;
    cursor:pointer;
    white-space:nowrap;
  }
  .btn-secondary{
    border:none;
    background:#eab308;
    color:#422006;
    padding:4px 8px;
    border-radius:999px;
    font-weight:600;
    font-size:.8rem;
    cursor:pointer;
    white-space:nowrap;
  }

  .changelog{
    max-width:980px;margin:8px auto 40px;border:1px dashed var(--border);
    border-radius:10px;background:var(--card);padding:8px 10px;display:none;font-size:.8rem;
  }
  .changelog.open{display:block}
  .changelog h4{margin:0 0 4px;font-size:.85rem}
  .small{font-size:.8rem;color:var(--muted);}
  .stickyToggle {
    position: absolute;
    top: 8px;
    right: 8px;
    border: 1px solid var(--border);
    background: var(--card);
    color: var(--fg);
    border-radius: 8px;
    padding: 4px 8px;
    font-size: 0.75rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
    z-index: 1;
  }

  .stickyToggle:hover {
    background: var(--accent);
    color: #fff;
    border-color: var(--accent);
    transform: translateY(-1px);
  }

  .stickyToggle.active {
    background: var(--accent);
    color: #fff;
    border-color: var(--accent);
  }
  /* Ensure lives/instruments cards never exceed the page content width */
.tabContent { max-width: 980px; margin: 16px auto; padding: 0 16px; }

/* Force one column so each card matches the main player width */
.extra-grid{
  display: grid;
  grid-template-columns: 1fr;
  gap: 10px;
  margin-top: 12px;
}

/* Card and media should not overflow */
.extra-card{
  max-width: 100%;
  width: 100%;
}
.extra-card audio,
.extra-card video{
  width: 100%;
  max-width: 100%;
  border-radius: 10px;
}

/* Notes and file contents wrap and stay within the card */
.note{ white-space: pre-wrap; }
.file-note summary{ cursor:pointer; font-weight:600; }
.file-note pre{
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 8px;
  margin: 6px 0 0;
  white-space: pre-wrap;      /* keep line breaks, wrap long lines */
  word-break: break-word;     /* break long words/paths */
  overflow: auto;             /* scroll if still too wide */
  max-width: 100%;
}