/* ═══════════════════════════════════════════════════
   HTML Reader Pro — reader.css  (Sidebar Accordion)
   Compatible Astra Theme · Responsive PC/Tablet/Mobile
   ═══════════════════════════════════════════════════ */

:root {
  --hrp-primary:         #2563eb;
  --hrp-primary-hover:   #1d4ed8;
  --hrp-radius:          10px;
  --hrp-toolbar-h:       52px;
  --hrp-sidebar-w:       270px;
  --hrp-shadow:          0 4px 24px rgba(0,0,0,.10);
  --hrp-font:            -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --hrp-transition:      .22s ease;

  /* Light theme */
  --hrp-bg:              #ffffff;
  --hrp-border:          #e2e8f0;
  --hrp-toolbar-bg:      #f8fafc;
  --hrp-toolbar-text:    #334155;
  --hrp-btn-bg:          #ffffff;
  --hrp-btn-hover:       #f1f5f9;
  --hrp-btn-text:        #475569;
  --hrp-overlay:         rgba(255,255,255,.85);

  /* Sidebar */
  --hrp-sb-bg:           #1e293b;
  --hrp-sb-text:         #cbd5e1;
  --hrp-sb-border:       #334155;
  --hrp-sb-hover:        #334155;
  --hrp-sb-active:       #2563eb;
  --hrp-sb-active-bg:    rgba(37,99,235,.15);
  --hrp-sb-header-bg:    #0f172a;
  --hrp-sb-course-bg:    #0f172a;
  --hrp-sb-course-text:  #f1f5f9;
  --hrp-sb-leaf-text:    #94a3b8;
  --hrp-sb-leaf-hover:   #e2e8f0;
  --hrp-sb-indent:       16px;
}

/* ── Dark theme ─────────────────────────────────────── */
.hrp-theme-dark {
  --hrp-bg:              #0f172a;
  --hrp-border:          #1e293b;
  --hrp-toolbar-bg:      #1e293b;
  --hrp-toolbar-text:    #cbd5e1;
  --hrp-btn-bg:          #1e293b;
  --hrp-btn-hover:       #334155;
  --hrp-btn-text:        #94a3b8;
  --hrp-overlay:         rgba(15,23,42,.85);
}

/* ═══════════════════════════════════════════════════
   LAYOUT PRINCIPAL
   ═══════════════════════════════════════════════════ */

.hrp-reader-wrap {
  display: flex;
  background: var(--hrp-bg);
  border: 1px solid var(--hrp-border);
  border-radius: var(--hrp-radius);
  box-shadow: var(--hrp-shadow);
  font-family: var(--hrp-font);
  overflow: hidden;
  position: relative;
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
  transition: background var(--hrp-transition), border-color var(--hrp-transition);
}

/* Fullscreen */
.hrp-reader-wrap.hrp-fullscreen {
  position: fixed !important;
  inset: 0 !important;
  z-index: 99999 !important;
  border-radius: 0 !important;
  border: none !important;
}
.hrp-reader-wrap.hrp-fullscreen .hrp-main { flex: 1; }
.hrp-reader-wrap.hrp-fullscreen .hrp-iframe-wrapper { flex: 1; height: 0; }
.hrp-reader-wrap.hrp-fullscreen .hrp-iframe { height: 100% !important; }

/* ═══════════════════════════════════════════════════
   SIDEBAR
   ═══════════════════════════════════════════════════ */

.hrp-sidebar {
  width: var(--hrp-sidebar-w);
  min-width: var(--hrp-sidebar-w);
  background: var(--hrp-sb-bg);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  transition: width var(--hrp-transition), min-width var(--hrp-transition), transform var(--hrp-transition);
  border-right: 1px solid var(--hrp-sb-border);
  flex-shrink: 0;
}

.hrp-sidebar.hrp-sidebar-collapsed {
  width: 0;
  min-width: 0;
  border-right: none;
}

/* Header sidebar */
.hrp-sidebar-header {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 0 14px;
  height: var(--hrp-toolbar-h);
  background: var(--hrp-sb-header-bg);
  border-bottom: 1px solid var(--hrp-sb-border);
  flex-shrink: 0;
}

.hrp-sidebar-logo { font-size: 18px; }

.hrp-sidebar-label {
  flex: 1;
  font-size: 13px;
  font-weight: 700;
  color: var(--hrp-sb-course-text);
  text-transform: uppercase;
  letter-spacing: .06em;
}

.hrp-sidebar-toggle {
  border: none;
  background: none;
  color: var(--hrp-sb-text);
  cursor: pointer;
  font-size: 16px;
  padding: 4px 6px;
  border-radius: 5px;
  line-height: 1;
  transition: background var(--hrp-transition);
}
.hrp-sidebar-toggle:hover { background: var(--hrp-sb-hover); }

/* Scrollable list */
.hrp-accordion {
  list-style: none;
  margin: 0;
  padding: 8px 0;
  overflow-y: auto;
  flex: 1;
  scrollbar-width: thin;
  scrollbar-color: var(--hrp-sb-border) transparent;
}
.hrp-accordion::-webkit-scrollbar       { width: 4px; }
.hrp-accordion::-webkit-scrollbar-thumb { background: var(--hrp-sb-border); border-radius: 4px; }

/* ── Section row (niveau 0) ── */
.hrp-section-item { list-style: none; }

.hrp-section-btn {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  padding: 8px 14px 8px 10px;
  border: none;
  background: rgba(99,102,241,.18);
  color: #a5b4fc;
  cursor: pointer;
  font-size: 11px;
  font-weight: 700;
  text-align: left;
  text-transform: uppercase;
  letter-spacing: .07em;
  border-top: 1px solid rgba(99,102,241,.25);
  border-bottom: 1px solid rgba(99,102,241,.15);
  transition: background var(--hrp-transition);
}
.hrp-section-btn:hover { background: rgba(99,102,241,.28); }
.hrp-section-item:first-child > .hrp-section-btn { border-top: none; }

.hrp-section-icon { font-size: 13px; flex-shrink: 0; }
.hrp-section-title { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hrp-section-item.hrp-open > .hrp-section-btn .hrp-chevron { transform: rotate(180deg); }

.hrp-section-children {
  list-style: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
  max-height: 0;
  transition: max-height .28s cubic-bezier(.4,0,.2,1);
}
.hrp-section-item.hrp-open > .hrp-section-children { max-height: 9999px; }

/* ── Course row (niveau 1) ── */
.hrp-course-item { list-style: none; }

.hrp-course-btn {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  padding: 9px 14px;
  border: none;
  background: transparent;
  color: var(--hrp-sb-course-text);
  cursor: pointer;
  font-size: 13px;
  font-weight: 600;
  text-align: left;
  transition: background var(--hrp-transition);
}
.hrp-course-btn:hover { background: var(--hrp-sb-hover); }

.hrp-course-item.hrp-open > .hrp-course-btn { background: var(--hrp-sb-course-bg); }

.hrp-course-icon { font-size: 15px; flex-shrink: 0; }
.hrp-course-title { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Chevron animate */
.hrp-chevron {
  width: 14px;
  height: 14px;
  stroke: currentColor;
  fill: none;
  stroke-width: 2.5;
  stroke-linecap: round;
  stroke-linejoin: round;
  flex-shrink: 0;
  transition: transform var(--hrp-transition);
  opacity: .6;
}
.hrp-course-item.hrp-open > .hrp-course-btn .hrp-chevron { transform: rotate(180deg); }
.hrp-devoir-item.hrp-open > .hrp-devoir-toggle .hrp-chevron,
.hrp-devoir-item.hrp-open > .hrp-file-btn     .hrp-chevron { transform: rotate(180deg); }

/* ── Children container ── */
.hrp-course-children,
.hrp-correction-list {
  list-style: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
  max-height: 0;
  transition: max-height .28s cubic-bezier(.4,0,.2,1);
}
.hrp-course-item.hrp-open   > .hrp-course-children   { max-height: 2000px; }
.hrp-devoir-item.hrp-open   > .hrp-correction-list   { max-height: 500px; }

/* ── File leaf (niveau 2 / cours) ── */
.hrp-leaf { list-style: none; }

.hrp-file-btn {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  padding: 7px 14px 7px calc(14px + var(--hrp-sb-indent));
  border: none;
  background: transparent;
  color: var(--hrp-sb-leaf-text);
  cursor: pointer;
  font-size: 12.5px;
  font-weight: 400;
  text-align: left;
  transition: background var(--hrp-transition), color var(--hrp-transition);
  border-left: 2px solid transparent;
}
.hrp-file-btn:hover { background: var(--hrp-sb-hover); color: var(--hrp-sb-leaf-hover); }
.hrp-file-btn.hrp-active {
  background: var(--hrp-sb-active-bg);
  color: var(--hrp-sb-active);
  border-left-color: var(--hrp-sb-active);
  font-weight: 600;
}
.hrp-file-btn span:last-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; flex: 1; }

/* ── Devoir (niveau 2) ── */
.hrp-devoir-item { list-style: none; }

.hrp-devoir-toggle,
.hrp-devoir-has-url {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  padding: 7px 14px 7px calc(14px + var(--hrp-sb-indent));
  border: none;
  background: transparent;
  color: var(--hrp-sb-leaf-text);
  cursor: pointer;
  font-size: 12.5px;
  font-weight: 500;
  text-align: left;
  transition: background var(--hrp-transition), color var(--hrp-transition);
  border-left: 2px solid transparent;
}
.hrp-devoir-toggle:hover,
.hrp-devoir-has-url:hover { background: var(--hrp-sb-hover); color: var(--hrp-sb-leaf-hover); }
.hrp-devoir-has-url.hrp-active {
  background: var(--hrp-sb-active-bg);
  color: var(--hrp-sb-active);
  border-left-color: var(--hrp-sb-active);
  font-weight: 600;
}
.hrp-devoir-toggle span:nth-child(2),
.hrp-devoir-has-url span:nth-child(2) { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.hrp-chevron-sm {
  width: 12px;
  height: 12px;
  stroke-width: 2.5;
}

/* Correction (niveau 3) */
.hrp-type-correction .hrp-file-btn {
  padding-left: calc(14px + var(--hrp-sb-indent) * 2);
  font-size: 12px;
}

.hrp-leaf-icon { font-size: 13px; flex-shrink: 0; }

/* ── Séparateur entre cours ── */
.hrp-course-item + .hrp-course-item { border-top: 1px solid var(--hrp-sb-border); }

/* ═══════════════════════════════════════════════════
   MAIN CONTENT
   ═══════════════════════════════════════════════════ */

.hrp-main {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  background: var(--hrp-bg);
  transition: background var(--hrp-transition);
  position: relative;
}

/* ── Toolbar ── */
.hrp-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 14px;
  height: var(--hrp-toolbar-h);
  background: var(--hrp-toolbar-bg);
  border-bottom: 1px solid var(--hrp-border);
  gap: 8px;
  flex-shrink: 0;
}

.hrp-toolbar-left {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: 1;
  min-width: 0;
}

.hrp-breadcrumb {
  font-size: 12.5px;
  color: var(--hrp-toolbar-text);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  opacity: .75;
}

.hrp-toolbar-right {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
}

.hrp-tool-group {
  display: flex;
  align-items: center;
  gap: 2px;
  background: var(--hrp-bg);
  border: 1px solid var(--hrp-border);
  border-radius: 7px;
  padding: 2px;
}

.hrp-zoom-level {
  font-size: 12px;
  font-weight: 600;
  color: var(--hrp-toolbar-text);
  min-width: 38px;
  text-align: center;
}

/* ── Buttons ── */
.hrp-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border: none;
  border-radius: 6px;
  background: var(--hrp-btn-bg);
  color: var(--hrp-btn-text);
  cursor: pointer;
  transition: background var(--hrp-transition), color var(--hrp-transition), transform .1s;
  padding: 0;
  outline: none;
  font-size: 13px;
  font-weight: 500;
  flex-shrink: 0;
}
.hrp-btn:hover  { background: var(--hrp-btn-hover); color: var(--hrp-primary); }
.hrp-btn:active { transform: scale(.92); }
.hrp-btn:focus-visible { box-shadow: 0 0 0 2px var(--hrp-primary); }
.hrp-btn svg {
  width: 16px; height: 16px;
  stroke: currentColor; fill: none;
  stroke-width: 2; stroke-linecap: round; stroke-linejoin: round;
  flex-shrink: 0;
}

/* Theme toggle icons */
.hrp-theme-dark .hrp-icon-sun  { display: none; }
.hrp-theme-dark .hrp-icon-moon { display: block; }
.hrp-icon-moon  { display: none; }
.hrp-icon-sun   { display: block; }

/* Fullscreen icons */
.hrp-fullscreen .hrp-icon-expand   { display: none; }
.hrp-fullscreen .hrp-icon-compress { display: block !important; }
.hrp-icon-compress { display: none; }

/* ── Placeholder ── */
.hrp-placeholder {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 40px 20px;
  color: #94a3b8;
  text-align: center;
}
.hrp-placeholder-inner { display: flex; flex-direction: column; align-items: center; gap: 12px; }
.hrp-placeholder-icon  { font-size: 48px; opacity: .4; }
.hrp-placeholder p      { font-size: 14px; margin: 0; }

/* ── iFrame ── */
.hrp-iframe-wrapper {
  position: relative;
  overflow: hidden;
  background: var(--hrp-bg);
  flex: 1;
}

.hrp-iframe {
  display: block;
  width: 100%;
  border: none;
  transition: opacity .25s;
  transform-origin: 0 0;
  background: #fff;
}

/* ── Loading overlay ── */
.hrp-loading {
  position: absolute;
  inset: 0;
  background: var(--hrp-overlay);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  z-index: 10;
  backdrop-filter: blur(4px);
  font-size: 13px;
  color: var(--hrp-toolbar-text);
  transition: opacity .3s;
}
.hrp-loading.hidden { opacity: 0; pointer-events: none; }
.hrp-spinner {
  width: 36px; height: 36px;
  border: 3px solid var(--hrp-border);
  border-top-color: var(--hrp-primary);
  border-radius: 50%;
  animation: hrp-spin .7s linear infinite;
}
@keyframes hrp-spin { to { transform: rotate(360deg); } }

.hrp-no-files { padding: 24px; text-align: center; color: #94a3b8; font-style: italic; }

/* ── Bouton ouvrir menu (masqué sur desktop, visible sur mobile) ── */
/* ── Bouton Menu (toujours visible dans la toolbar) ── */
.hrp-menu-open {
  display: inline-flex !important;
  align-items: center;
  gap: 5px;
  padding: 0 10px;
  width: auto;
  font-size: 13px;
  font-weight: 600;
  color: var(--hrp-btn-text);
  background: var(--hrp-btn-bg);
  border: 1px solid var(--hrp-border);
  border-radius: 6px;
  height: 34px;
  white-space: nowrap;
  flex-shrink: 0;
}
.hrp-menu-open:hover {
  background: var(--hrp-btn-hover);
  color: var(--hrp-primary);
}
.hrp-menu-open svg {
  width: 15px;
  height: 15px;
  flex-shrink: 0;
}
.hrp-menu-open::after {
  content: "Menu";
}

/* ── Mobile overlay ── */
.hrp-sidebar-overlay {
  display: none;
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,.45);
  z-index: 50;
}

/* ════════════════════════════════════════════════
   RESPONSIVE
   ════════════════════════════════════════════════ */

/* Tablet (≤ 900px) */
@media (max-width: 900px) {
  .hrp-reader-wrap { position: relative; }

  .hrp-sidebar {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    z-index: 60;
    transform: translateX(0);
    box-shadow: 4px 0 20px rgba(0,0,0,.3);
  }
  .hrp-sidebar.hrp-sidebar-collapsed { transform: translateX(-100%); width: var(--hrp-sidebar-w); min-width: var(--hrp-sidebar-w); }

  .hrp-sidebar-overlay { display: block; pointer-events: none; opacity: 0; transition: opacity .25s; }
  .hrp-sidebar-overlay.hrp-overlay-visible { opacity: 1; pointer-events: auto; }

  .hrp-main { width: 100%; }
}

/* Mobile (≤ 480px) */
@media (max-width: 480px) {
  :root { --hrp-radius: 6px; --hrp-sidebar-w: 240px; }
  .hrp-toolbar { padding: 0 8px; }
  .hrp-breadcrumb { display: none; }
  .hrp-btn { width: 36px; height: 36px; }
  .hrp-btn svg { width: 15px; height: 15px; }
  .hrp-tool-group { padding: 1px; gap: 1px; }
  .hrp-zoom-level { font-size: 11px; min-width: 32px; }
  .hrp-iframe { min-height: 400px; }
  /* Bouton Menu plus compact sur petit écran */
  .hrp-menu-open { padding: 0 7px; font-size: 12px; }
}

/* ── Astra compatibility ── */
.ast-container .hrp-reader-wrap,
.entry-content  .hrp-reader-wrap,
.site-content   .hrp-reader-wrap {
  margin-top: 20px;
  margin-bottom: 20px;
  clear: both;
}
.hrp-iframe-wrapper iframe { border: none !important; outline: none !important; }

/* ═══════════════════════════════════════════════════
   MESSAGES D'ACCÈS (login / accès refusé)
   ═══════════════════════════════════════════════════ */
.hrp-access-box {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 280px;
  background: linear-gradient(135deg, #1e293b 0%, #0f172a 100%);
  border-radius: var(--hrp-radius, 10px);
  border: 1px solid #334155;
  box-shadow: 0 4px 24px rgba(0,0,0,.15);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  padding: 40px 20px;
}

.hrp-access-inner {
  text-align: center;
  max-width: 360px;
}

.hrp-access-icon {
  display: block;
  font-size: 48px;
  margin-bottom: 16px;
  line-height: 1;
}

.hrp-access-title {
  font-size: 20px;
  font-weight: 700;
  color: #f1f5f9;
  margin: 0 0 10px;
}

.hrp-access-desc {
  font-size: 14px;
  color: #94a3b8;
  margin: 0 0 24px;
  line-height: 1.6;
}

.hrp-access-btn {
  display: inline-block;
  padding: 11px 28px;
  background: #2563eb;
  color: #fff !important;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 600;
  text-decoration: none !important;
  transition: background .2s, transform .15s;
  border: none;
  cursor: pointer;
}
.hrp-access-btn:hover {
  background: #1d4ed8;
  transform: translateY(-1px);
  color: #fff !important;
}

.hrp-access-denied .hrp-access-icon { filter: grayscale(.3); }
.hrp-access-denied .hrp-access-title { color: #fca5a5; }

/* ── Formulaire de login intégré ── */
.hrp-login-box { align-items: flex-start; padding: 40px 20px; }

.hrp-login-inner {
  width: 100%;
  max-width: 400px;
  margin: 0 auto;
}

.hrp-login-form {
  display: flex;
  flex-direction: column;
  gap: 16px;
  margin-top: 20px;
  text-align: left;
}

.hrp-field-group {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.hrp-field-group label {
  font-size: 13px;
  font-weight: 600;
  color: #94a3b8;
  text-transform: uppercase;
  letter-spacing: .05em;
}

.hrp-field-group input[type="text"],
.hrp-field-group input[type="password"] {
  width: 100%;
  padding: 10px 14px;
  background: #1e293b;
  border: 1px solid #334155;
  border-radius: 8px;
  color: #f1f5f9;
  font-size: 14px;
  outline: none;
  transition: border-color .2s, box-shadow .2s;
  box-sizing: border-box;
}
.hrp-field-group input:focus {
  border-color: #2563eb;
  box-shadow: 0 0 0 3px rgba(37,99,235,.25);
}
.hrp-field-group input::placeholder { color: #475569; }

.hrp-pass-wrap {
  position: relative;
  display: flex;
  align-items: center;
}
.hrp-pass-wrap input { padding-right: 42px; }
.hrp-toggle-pass {
  position: absolute;
  right: 10px;
  background: none;
  border: none;
  cursor: pointer;
  font-size: 16px;
  padding: 0;
  line-height: 1;
  color: #64748b;
  transition: color .2s;
}
.hrp-toggle-pass:hover { color: #94a3b8; }

.hrp-remember-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 13px;
  color: #64748b;
}
.hrp-remember-label {
  display: flex;
  align-items: center;
  gap: 7px;
  cursor: pointer;
  color: #94a3b8;
}
.hrp-remember-label input[type="checkbox"] {
  width: 15px;
  height: 15px;
  accent-color: #2563eb;
  cursor: pointer;
}
.hrp-forgot {
  color: #60a5fa;
  text-decoration: none;
  font-size: 12.5px;
  transition: color .2s;
}
.hrp-forgot:hover { color: #93c5fd; text-decoration: underline; }

.hrp-submit-btn {
  width: 100%;
  padding: 12px;
  font-size: 15px;
  border-radius: 8px;
  margin-top: 4px;
  justify-content: center;
}

.hrp-login-error {
  background: rgba(220,38,38,.15);
  border: 1px solid rgba(220,38,38,.4);
  color: #fca5a5;
  padding: 10px 14px;
  border-radius: 8px;
  font-size: 13px;
  margin: 0;
}

@media (max-width: 480px) {
  .hrp-login-inner { max-width: 100%; }
  .hrp-access-box  { padding: 30px 16px; }
}