/**
 * Centre d'aide — bouton flottant, offcanvas, thème Shepherd.
 *
 * Le CSS officiel de Shepherd.js (layout, arrows, overlay, close icon) est
 * importé dans app.js. Ce fichier ne fait qu'accorder ces éléments à la
 * charte NUKUNTCHE (couleurs, radius, ombres, typographie).
 */

/* ─── Bouton flottant (FAB) ───────────────────────────────────────── */
.help-center-fab {
    position: fixed;
    bottom: 24px;
    right: 24px;
    width: 52px;
    height: 52px;
    border-radius: 50%;
    border: 0;
    background: var(--brand-primary, #2563eb);
    color: #fff;
    box-shadow: 0 6px 16px rgba(37, 99, 235, 0.35);
    z-index: 1030;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.help-center-fab i {
    font-size: 24px;
    line-height: 1;
}

.help-center-fab:hover {
    transform: translateY(-2px) scale(1.05);
    box-shadow: 0 10px 24px rgba(37, 99, 235, 0.45);
}

.help-center-fab:focus-visible {
    outline: 2px solid #fff;
    outline-offset: 2px;
}

/* ─── Offcanvas ───────────────────────────────────────────────────── */
.help-icon-circle {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: rgba(37, 99, 235, 0.12);
    color: var(--brand-primary, #2563eb);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.help-icon-circle i {
    font-size: 18px;
}

.help-action {
    background: var(--color-bg-tertiary, #f1f5f9);
    transition: background 0.15s ease, transform 0.1s ease;
}

.help-action:hover {
    background: rgba(37, 99, 235, 0.08);
    transform: translateX(2px);
}

.help-action-icon {
    width: 32px;
    height: 32px;
    border-radius: 6px;
    background: #fff;
    color: var(--brand-primary, #2563eb);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.help-action-icon i {
    font-size: 14px;
}

/* ─── Thème Shepherd NUKUNTCHE (étend le CSS officiel) ─────────────────── */
/*
 * On ne touche PAS à .shepherd-element (layout du popup) ni à
 * .shepherd-arrow (la flèche est gérée par le CSS officiel). On habille
 * uniquement les variantes "shepherd-nukuntche-theme" appliquées via la classe
 * "classes" de Shepherd.Tour.
 */
.shepherd-nukuntche-theme {
    border-radius: 10px;
    box-shadow: 0 20px 48px rgba(15, 23, 42, 0.25), 0 6px 16px rgba(15, 23, 42, 0.12);
    max-width: 380px;
    font-family: inherit;
    background: #fff;
    border: 1px solid var(--color-border, #e5e7eb);
}

.shepherd-nukuntche-theme .shepherd-header {
    background: transparent;
    padding: 18px 20px 4px;
    border-radius: 10px 10px 0 0;
    position: relative;
}

.shepherd-nukuntche-theme .shepherd-title {
    font-weight: 700;
    font-size: 15px;
    color: var(--color-text-primary, #0f172a);
    padding-right: 32px; /* place pour l'icône × officielle */
}

.shepherd-nukuntche-theme .shepherd-text {
    padding: 8px 20px 16px;
    font-size: 13.5px;
    line-height: 1.6;
    color: var(--color-text-secondary, #475569);
}

.shepherd-nukuntche-theme .shepherd-text i.ti {
    color: var(--brand-primary, #2563eb);
    font-weight: bold;
}

.shepherd-nukuntche-theme .shepherd-footer {
    padding: 0 20px 18px;
    display: flex;
    gap: 8px;
    justify-content: flex-end;
    background: transparent;
    border-top: 0;
}

/* Boutons — on remplace entièrement les styles officiels */
.shepherd-nukuntche-theme .shepherd-button {
    border-radius: 6px;
    font-size: 12.5px;
    font-weight: 600;
    padding: 7px 16px;
    cursor: pointer;
    transition: background 0.15s ease, transform 0.1s ease;
    border: 0;
    font-family: inherit;
}

.shepherd-nukuntche-theme .shepherd-button-primary {
    background: var(--brand-primary, #2563eb);
    color: #fff;
}

.shepherd-nukuntche-theme .shepherd-button-primary:hover {
    background: #1d4ed8;
    transform: translateY(-1px);
}

.shepherd-nukuntche-theme .shepherd-button-secondary {
    background: var(--color-bg-tertiary, #f1f5f9);
    color: var(--color-text-primary, #0f172a);
}

.shepherd-nukuntche-theme .shepherd-button-secondary:hover {
    background: #e5e7eb;
}

/* Icône de fermeture : utilise l'icône Tabler pour cohérence */
.shepherd-nukuntche-theme .shepherd-cancel-icon {
    color: var(--color-text-secondary, #64748b);
    font-size: 20px;
    width: 24px;
    height: 24px;
    transition: color 0.15s ease;
}

.shepherd-nukuntche-theme .shepherd-cancel-icon:hover {
    color: var(--color-danger, #dc2626);
}

/* Modal overlay : plus discret que le défaut */
.shepherd-modal-overlay-container {
    z-index: 1050;
}

.shepherd-modal-overlay-container.shepherd-modal-is-visible {
    opacity: 0.55;
}

/* Le popup lui-même doit passer au-dessus de l'overlay */
.shepherd-element {
    z-index: 1055;
}