/* =====================================================================
   CJT - Aide contextuelle (CT4) : bouton « ? », panneau latéral, visite guidée.
   Feuille autonome (hors build Tailwind) chargée par views/layouts/main.php ; voir js/cjt-help.js.
   ===================================================================== */

/* --- Bouton « ? » ----------------------------------------------------- */
.cjt-help-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.5rem;
    height: 1.5rem;
    flex-shrink: 0;
    border-radius: 9999px;
    border: 0;
    background: transparent;
    color: #94a3b8;
    font-size: 0.875rem;
    line-height: 1;
    cursor: pointer;
    vertical-align: middle;
    transition: color .15s ease, background-color .15s ease;
}
.cjt-help-btn:hover { color: #2563eb; background: #eff6ff; }
.cjt-help-btn:focus-visible { outline: 2px solid #3b82f6; outline-offset: 2px; color: #2563eb; }
/* Variante sur fond sombre (barre d'outils du classeur) */
.cjt-help-btn.is-dark { color: #cbd5e1; }
.cjt-help-btn.is-dark:hover { color: #fde68a; background: rgba(255, 255, 255, .1); }

.cjt-tour-btn {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    padding: .5rem .8rem;
    border-radius: .75rem;
    border: 1px solid #cbd5e1;
    background: #fff;
    color: #334155;
    font-size: .75rem;
    font-weight: 700;
    cursor: pointer;
    transition: border-color .15s ease, color .15s ease;
}
.cjt-tour-btn:hover { border-color: #60a5fa; color: #1d4ed8; }
.cjt-tour-btn:focus-visible { outline: 2px solid #3b82f6; outline-offset: 2px; }
.cjt-tour-btn i { color: #3b82f6; }

/* --- Panneau latéral --------------------------------------------------- */
.cjt-hp-root { position: fixed; inset: 0; z-index: 10010; pointer-events: none; }
.cjt-hp-overlay {
    position: absolute;
    inset: 0;
    background: rgba(15, 23, 42, .35);
    opacity: 0;
    transition: opacity .2s ease;
}
.cjt-hp {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    width: min(28rem, 100vw);
    display: flex;
    flex-direction: column;
    background: #fff;
    border-left: 1px solid #e2e8f0;
    box-shadow: -12px 0 40px rgba(15, 23, 42, .18);
    transform: translateX(100%);
    transition: transform .25s ease;
    outline: none;
}
.cjt-hp-root.is-open { pointer-events: auto; }
.cjt-hp-root.is-open .cjt-hp-overlay { opacity: 1; }
.cjt-hp-root.is-open .cjt-hp { transform: translateX(0); }

.cjt-hp-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: .9rem 1.25rem;
    border-bottom: 1px solid #f1f5f9;
}
.cjt-hp-kicker {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    font-size: .7rem;
    font-weight: 800;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: #0891b2;
}
.cjt-hp-close {
    width: 2rem;
    height: 2rem;
    border-radius: 9999px;
    border: 0;
    background: #f1f5f9;
    color: #64748b;
    cursor: pointer;
}
.cjt-hp-close:hover { background: #e2e8f0; color: #0f172a; }
.cjt-hp-close:focus-visible { outline: 2px solid #3b82f6; outline-offset: 2px; }

.cjt-hp-body { flex: 1; overflow-y: auto; padding: 1.25rem; }
.cjt-hp-title {
    margin: 0 0 .9rem;
    font-size: 1.05rem;
    font-weight: 800;
    line-height: 1.35;
    color: #0f172a;
}
.cjt-hp-content { font-size: .875rem; line-height: 1.65; color: #334155; }
.cjt-hp-content p { margin: 0 0 .75rem; }
.cjt-hp-content ul, .cjt-hp-content ol { margin: 0 0 .75rem; padding-left: 1.25rem; }
.cjt-hp-content ul { list-style: disc; }
.cjt-hp-content ol { list-style: decimal; }
.cjt-hp-content li { margin-bottom: .3rem; }
.cjt-hp-content a { color: #2563eb; text-decoration: underline; }
.cjt-hp-content img { max-width: 100%; height: auto; border-radius: .5rem; }
.cjt-hp-content table { width: 100%; border-collapse: collapse; font-size: .8rem; margin-bottom: .75rem; }
.cjt-hp-content th, .cjt-hp-content td { border: 1px solid #e2e8f0; padding: .35rem .5rem; text-align: left; }
.cjt-hp-muted { color: #64748b; font-size: .85rem; }

.cjt-hp-foot { padding: .9rem 1.25rem; border-top: 1px solid #f1f5f9; }
.cjt-hp-faq {
    display: inline-flex;
    align-items: center;
    gap: .45rem;
    font-size: .8rem;
    font-weight: 700;
    color: #2563eb;
    text-decoration: none;
}
.cjt-hp-faq:hover { text-decoration: underline; }

/* --- Visite guidée ---------------------------------------------------- */
.cjt-tour-root { position: fixed; inset: 0; z-index: 10000; pointer-events: none; }
.cjt-tour-spot {
    position: fixed;
    border-radius: .9rem;
    box-shadow: 0 0 0 9999px rgba(15, 23, 42, .55), 0 0 0 3px #fbbf24;
    /* Pas de transition de position : le projecteur doit suivre la cible au pixel près pendant le défilement. */
    pointer-events: none;
}
.cjt-tour-bubble {
    position: fixed;
    width: min(22rem, calc(100vw - 24px));
    padding: 1rem 1.1rem .9rem;
    border-radius: 1rem;
    background: #fff;
    box-shadow: 0 20px 45px rgba(15, 23, 42, .3);
    pointer-events: auto;
    outline: none;
}
.cjt-tour-bubble.is-docked { left: 12px; right: 12px; bottom: 12px; top: auto !important; width: auto; }
.cjt-tour-arrow {
    position: absolute;
    width: 14px;
    height: 14px;
    background: #fff;
    transform: translateX(-50%) rotate(45deg);
}
.cjt-tour-bubble[data-side="below"] .cjt-tour-arrow { top: -7px; }
.cjt-tour-bubble[data-side="above"] .cjt-tour-arrow { bottom: -7px; }

.cjt-tour-meta {
    display: flex;
    justify-content: space-between;
    gap: .5rem;
    font-size: .68rem;
    font-weight: 800;
    letter-spacing: .05em;
    text-transform: uppercase;
    color: #b45309;
    margin-bottom: .35rem;
}
.cjt-tour-count { color: #94a3b8; }
.cjt-tour-title { margin: 0 0 .35rem; font-size: .98rem; font-weight: 800; color: #0f172a; }
.cjt-tour-text { margin: 0 0 .6rem; font-size: .85rem; line-height: 1.55; color: #334155; }
.cjt-tour-more {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    margin-bottom: .75rem;
    padding: 0;
    border: 0;
    background: none;
    font-size: .8rem;
    font-weight: 700;
    color: #2563eb;
    cursor: pointer;
}
.cjt-tour-more:hover { text-decoration: underline; }
.cjt-tour-more[hidden] { display: none; }
.cjt-tour-actions { display: flex; align-items: center; justify-content: space-between; gap: .5rem; }
.cjt-tour-nav { display: inline-flex; gap: .4rem; }
.cjt-tour-skip, .cjt-tour-prev, .cjt-tour-next {
    border-radius: .65rem;
    font-size: .78rem;
    font-weight: 700;
    cursor: pointer;
    padding: .45rem .8rem;
    border: 1px solid transparent;
}
.cjt-tour-skip { background: none; color: #64748b; padding-left: 0; padding-right: 0; }
.cjt-tour-skip:hover { color: #0f172a; text-decoration: underline; }
.cjt-tour-prev { background: #f1f5f9; color: #334155; }
.cjt-tour-prev:hover { background: #e2e8f0; }
.cjt-tour-prev[hidden] { display: none; }
.cjt-tour-next { background: #2563eb; color: #fff; }
.cjt-tour-next:hover { background: #1d4ed8; }
.cjt-tour-bubble button:focus-visible { outline: 2px solid #3b82f6; outline-offset: 2px; }

@media (prefers-reduced-motion: reduce) {
    .cjt-hp, .cjt-hp-overlay { transition: none; }
}

@media print {
    .cjt-help-btn, .cjt-tour-btn, .cjt-hp-root, .cjt-tour-root { display: none !important; }
}