/* ═══════════════════════════════════════════════════════
   HUB BANNER + SECTION TOOLTIPS v1.0 — 2026-03-01
   Orientation naturelle dans l'app, sans surcharge visuelle
   ═══════════════════════════════════════════════════════ */

/* ── Hub Banner ─────────────────────────────────────── */
.hub-banner {
    background: linear-gradient(135deg,
        color-mix(in srgb, var(--accent, #8b5cf6) 6%, var(--bg-secondary, #1a1a2e)),
        var(--bg-secondary, #1a1a2e)
    );
    border: 1px solid color-mix(in srgb, var(--accent, #8b5cf6) 12%, transparent);
    border-radius: 20px;
    padding: 24px 24px 20px;
    margin: 0 0 24px;
    animation: hubFadeIn .35s cubic-bezier(.4,0,.2,1) both;
}

@keyframes hubFadeIn {
    from { opacity: 0; transform: translateY(-8px); }
    to   { opacity: 1; transform: translateY(0); }
}

.hub-greeting {
    font-size: 18px;
    font-weight: 700;
    color: var(--text-primary, #f4f4f5);
    margin-bottom: 16px;
    letter-spacing: -.01em;
}

/* Cartes raccourcis */
.hub-cards {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}

.hub-card {
    background: var(--bg-primary, #0f0f1a);
    border: 1px solid var(--border, rgba(255,255,255,.08));
    border-radius: 14px;
    padding: 12px 16px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 3px;
    cursor: pointer;
    transition: background .18s, border-color .18s, transform .18s;
    min-width: 90px;
    flex: 1;
    text-align: left;
}

.hub-card:hover {
    background: color-mix(in srgb, var(--accent, #8b5cf6) 10%, var(--bg-primary, #0f0f1a));
    border-color: color-mix(in srgb, var(--accent, #8b5cf6) 30%, transparent);
    transform: translateY(-2px);
}

.hub-card-emoji { font-size: 22px; line-height: 1; margin-bottom: 4px; }
.hub-card-label {
    font-size: 13px;
    font-weight: 600;
    color: var(--text-primary, #f4f4f5);
}
.hub-card-stat {
    font-size: 11px;
    color: var(--accent, #8b5cf6);
    font-weight: 500;
}

/* Suggestion contextuelle */
.hub-suggestion {
    margin-top: 14px;
    background: color-mix(in srgb, var(--accent, #8b5cf6) 8%, transparent);
    border: 1px solid color-mix(in srgb, var(--accent, #8b5cf6) 20%, transparent);
    border-radius: 12px;
    padding: 12px 16px;
    display: flex;
    align-items: center;
    gap: 10px;
    cursor: pointer;
    transition: background .18s;
}
.hub-suggestion:hover {
    background: color-mix(in srgb, var(--accent, #8b5cf6) 14%, transparent);
}
.hub-sugg-icon { font-size: 20px; flex-shrink: 0; }
.hub-sugg-text { font-size: 13px; color: var(--text-secondary, #a1a1aa); flex: 1; }
.hub-sugg-cta {
    background: var(--accent, #8b5cf6);
    color: #fff; border: none;
    padding: 6px 14px; border-radius: 8px;
    font-size: 12px; font-weight: 600;
    cursor: pointer; white-space: nowrap;
    flex-shrink: 0;
    transition: opacity .15s;
}
.hub-sugg-cta:hover { opacity: .85; }

/* Mobile */
@media (max-width: 600px) {
    .hub-cards { gap: 8px; }
    .hub-card { min-width: 70px; padding: 10px 12px; }
    .hub-card-emoji { font-size: 20px; }
    .hub-card-label { font-size: 12px; }
    .hub-suggestion { flex-wrap: wrap; }
    .hub-sugg-cta { width: 100%; text-align: center; margin-top: 4px; }
}


/* ═══════════════════════════════════════════════════════
   TOOLTIPS CONTEXTUELS — petit ? sur chaque nav item
   ═══════════════════════════════════════════════════════ */

/* Descriptions des sections */
:root {
    --section-desc-tasks:    "Gère tes tâches du quotidien, priorités et échéances.";
    --section-desc-projects: "Organise tes grands chantiers avec sous-tâches et avancement.";
    --section-desc-calendar: "Visualise tes deadlines et rendez-vous dans le temps.";
    --section-desc-notes:    "Capture tes idées, réflexions et documents librement.";
    --section-desc-galaxy:   "Vue panoramique de tout ton univers de travail.";
    --section-desc-journal:  "Ton espace intime pour écrire, réfléchir, progresser.";
    --section-desc-giriDrive:"Stocke et organise tous tes fichiers au même endroit.";
    --section-desc-business: "Tout pour piloter ton activité : CRM, ventes, finances.";
}

/* Bouton ? — styles dans style-overrides.css (premium design) */
/* Tooltip bulle — now handled by global Tooltips system (tooltips.js) */