/* ===================================================== */
/* ===================== RESET HUB ===================== */
/* ===================================================== */

.hub h2,
.hub h3,
.hub p,
.hub article,
.hub a,
.hub section,
.hub footer {
    all: unset;
    box-sizing: border-box;
    display: block;
}

/* ⚠️ header EXCLU du reset total */
.hub header {
    box-sizing: border-box;
    display: block;
}

/* liens inline par défaut */
.hub a {
    display: inline-block;
    cursor: pointer;
}

/* ===================================================== */
/* ============== RUBRIQUES (hub-category) ============= */
/* ===================================================== */

.hub section.hub-category {
    margin-bottom: 18px;
    border: 1px solid rgba(255, 255, 255, 0.14);
    border-radius: 14px;
    overflow: hidden;
    max-height: 2.6em;
    transition: max-height 0.5s ease;
    padding: 0 14px;
    background: rgba(255, 255, 255, 0.035);
}

/* ===================================================== */
/* =================== TITRE RUBRIQUE ================== */
/* ===================================================== */

.hub section.hub-category > header h2 {
    display: flex;                 /* CENTRAGE RÉEL */
    align-items: center;           /* CENTRAGE VERTICAL */
    height: 2.6em;                 /* identique à la hauteur fermée */
    cursor: pointer;

    padding: 0 38px 0 14px;
    margin: 0;

    font-size: 0.95em;
    font-weight: 500;
    line-height: 1;
    letter-spacing: 0.04em;
    color: #f5f3ff;
    text-transform: uppercase;

    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    position: relative;
}

/* + / − */
.hub section.hub-category > header h2::after {
    content: '+';
    position: absolute;
    right: 14px;

    font-size: 1.6em;      /* PLUS GROS */
    font-weight: 700;      /* PLUS GRAS */
    line-height: 1;

    color: #9ae6ff;
}

/* rubrique ouverte */
.hub section.hub-category.active {
    max-height: 5000px;
    padding-bottom: 14px;
}

.hub section.hub-category.active > header h2::after {
    content: '−';
    color: #b794f4;
}

/* ===================================================== */
/* ====================== ARTICLES ===================== */
/* ===================================================== */

.hub article {
    margin: 18px 0 10px;
    padding: 14px 18px;
    background: rgba(255, 255, 255, 0.045);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-left: 3px solid #b794f4;
    border-radius: 12px;
    box-shadow: 0 3px 12px rgba(0, 0, 0, 0.35);
    transition: background 0.3s ease, box-shadow 0.3s ease;
}

.hub article:hover {
    background: rgba(255, 255, 255, 0.07);
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.45);
}

/* ===================================================== */
/* =================== TITRES ARTICLE ================== */
/* ===================================================== */

.hub article h3 {
    position: relative;
    padding-right: 26px;
    margin: 0;

    font-size: 0.9em;
    font-weight: 500;
    line-height: 1.4;
    color: #ffffff;
    cursor: pointer;
}

.hub article h3::after {
    content: '+';
    position: absolute;
    right: 0;

    font-size: 1.35em;
    font-weight: 700;
    line-height: 1;

    color: #7dd3fc;
}

.hub article.active h3::after {
    content: '−';
    color: #b794f4;
}

/* ===================================================== */
/* ============== CONTENU ARTICLES CACHE =============== */
/* ===================================================== */

.hub article p,
.hub article a {
    display: none;
    margin: 0.8em 0;
    font-size: 0.9em;
    line-height: 1.6;
    color: #e5e5f0;
}

.hub article.active p,
.hub article.active a {
    display: block;
}

/* ===================================================== */
/* ====================== LIENS ======================== */
/* ===================================================== */

.hub article a {
    color: #c4b5fd;
    text-decoration: none;
    font-weight: 500;
    padding-left: 18px;
    position: relative;
}

.hub article a::before {
    content: '➤';
    position: absolute;
    left: 0;
    color: #7dd3fc;
}

.hub article a:hover {
    color: #fbbf24;
    text-decoration: underline;
}

/* ===================================================== */
/* ===================== FOOTER HUB ==================== */
/* ===================================================== */

.hub footer h3 {
    font-size: 0.95em;
    margin-top: 2em;
    border-top: 1px solid rgba(255, 255, 255, 0.14);
    padding-top: 0.4em;
    font-weight: 500;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: #f5f3ff;
}

.hub footer p {
    font-size: 0.9em;
    color: #cfcfe6;
}