/* Compagnon d'aide cours.mbr.li — tour guidé (bulles) + panneau d'aide « h ».
   Partagé (timeline + portail). S'adapte au thème via les variables existantes,
   avec repli si la page ne les définit pas. */
:root{
  --cepv-panel: var(--panel, var(--sidebar-bg, #fffdf8));
  --cepv-ink:   var(--ink, #1a1916);
  --cepv-muted: var(--muted, #6b665d);
  --cepv-line:  var(--line, #d5ccbd);
  --cepv-accent:var(--accent, #19684f);
  --cepv-soft:  var(--soft, rgba(0,0,0,.05));
  --cepv-sans:  var(--sans, "Inter","Segoe UI",system-ui,sans-serif);
  --cepv-mono:  var(--mono, "Roboto Mono",Consolas,monospace);
}

/* Bouton flottant « ? » */
.cepv-help-btn{
  position:fixed; right:16px; bottom:16px; z-index:2147482000;
  width:40px; height:40px; border-radius:50%;
  border:1px solid var(--cepv-line); background:var(--cepv-panel); color:var(--cepv-ink);
  font:600 20px/1 var(--cepv-sans); cursor:pointer; box-shadow:0 2px 12px rgba(0,0,0,.28);
}
.cepv-help-btn:hover{ border-color:var(--cepv-accent); color:var(--cepv-accent); }
.cepv-help-btn:focus-visible{ outline:2px solid var(--cepv-accent); outline-offset:2px; }

/* Panneau d'aide (modal) */
.cepv-help-overlay{
  position:fixed; inset:0; z-index:2147483200; background:rgba(0,0,0,.45);
  display:flex; align-items:center; justify-content:center; padding:20px;
}
.cepv-help-overlay[hidden]{ display:none; }
.cepv-help-modal{
  background:var(--cepv-panel); color:var(--cepv-ink);
  border:1px solid var(--cepv-line); border-radius:12px;
  max-width:560px; width:100%; max-height:85vh; overflow:auto; padding:20px 24px;
  font:15px/1.55 var(--cepv-sans); box-shadow:0 14px 44px rgba(0,0,0,.45);
}
.cepv-help-modal h2{ margin:0; font-size:20px; }
.cepv-help-modal h3{ margin:18px 0 6px; font-size:12px; text-transform:uppercase; letter-spacing:.06em; color:var(--cepv-muted); }
.cepv-help-modal .cepv-intro{ color:var(--cepv-muted); margin:2px 0 0; }
.cepv-help-modal ul{ margin:0; padding:0; list-style:none; }
.cepv-help-modal li{ padding:7px 0; border-bottom:1px solid var(--cepv-line); }
.cepv-help-modal li:last-child{ border-bottom:0; }
.cepv-help-modal .cepv-sc{ display:flex; gap:10px; align-items:baseline; }
.cepv-help-modal .cepv-sc>kbd{ flex:0 0 auto; }
.cepv-help-modal kbd{
  display:inline-block; min-width:18px; text-align:center; padding:2px 7px;
  border:1px solid var(--cepv-line); border-bottom-width:2px; border-radius:5px;
  font:400 12px/1.3 var(--cepv-mono); background:var(--cepv-soft);
}
.cepv-help-modal .cepv-task b{ display:block; }
.cepv-help-modal .cepv-task span{ color:var(--cepv-muted); font-size:14px; }
.cepv-help-foot{ margin-top:16px; color:var(--cepv-muted); font-size:13px; }
.cepv-help-actions{ display:flex; gap:8px; margin-top:18px; flex-wrap:wrap; }
.cepv-help-close{ float:right; background:none; border:0; font:22px/1 var(--cepv-sans); cursor:pointer; color:var(--cepv-muted); padding:0 2px; }
.cepv-help-close:hover{ color:var(--cepv-ink); }

/* Boutons */
.cepv-btn{ padding:8px 14px; border-radius:8px; border:1px solid var(--cepv-line); background:transparent; color:var(--cepv-ink); cursor:pointer; font:inherit; }
.cepv-btn:hover{ border-color:var(--cepv-accent); }
.cepv-btn-primary{ background:var(--cepv-accent); border-color:var(--cepv-accent); color:#fff; }
.cepv-btn-primary:hover{ filter:brightness(1.08); }

/* Tour guidé */
.cepv-tour-catch{ position:fixed; inset:0; z-index:2147483100; }
.cepv-tour-spot{
  position:fixed; z-index:2147483110; border-radius:8px; pointer-events:none;
  box-shadow:0 0 0 3px var(--cepv-accent), 0 0 0 100vmax rgba(0,0,0,.55);
  transition:top .2s ease, left .2s ease, width .2s ease, height .2s ease;
}
.cepv-tour-spot[hidden]{ display:none; }
.cepv-tour-bubble{
  position:fixed; z-index:2147483120; max-width:350px;
  background:var(--cepv-panel); color:var(--cepv-ink);
  border:1px solid var(--cepv-line); border-radius:10px; padding:14px 16px;
  box-shadow:0 12px 34px rgba(0,0,0,.45); font:14px/1.55 var(--cepv-sans);
}
.cepv-tour-bubble h4{ margin:0 0 5px; font-size:15px; }
.cepv-tour-bubble p{ margin:0 0 12px; }
.cepv-tour-nav{ display:flex; align-items:center; gap:6px; }
.cepv-tour-count{ color:var(--cepv-muted); font-size:12px; margin-right:auto; white-space:nowrap; }
.cepv-tour-nav .cepv-btn{ padding:6px 11px; font-size:13px; }
.cepv-tour-table{ border-collapse:collapse; margin:2px 0 6px; font-size:12px; width:100%; }
.cepv-tour-table th, .cepv-tour-table td{ border:1px solid var(--cepv-line); padding:2px 8px; text-align:left; }
.cepv-tour-table th{ background:color-mix(in srgb, var(--cepv-ink) 7%, transparent); font-weight:700; }
.cepv-tour-table td:last-child, .cepv-tour-table th:last-child{ text-align:right; font-variant-numeric:tabular-nums; }

@media (max-width:560px){
  .cepv-tour-bubble{ max-width:calc(100vw - 32px); }
}

/* Texture de fond (trame dither transparente, opacité par section) —
   z-index:-1 : derrière le contenu, au-dessus du fond de base ; l'encre sombre
   est inversée sur fond sombre pour rester visible sans choisir de couleur. */
.bg-texture{
  position:fixed; inset:0; z-index:-1; pointer-events:none;
  background-size:cover; background-position:center; background-repeat:no-repeat;
}
.bg-texture.on-dark,
:root[data-theme="dark"] .bg-texture{ filter:invert(1); }