/* =============================================================
   HORIZON RESPECT – WIDGETS PRO
   CSS fusionné : Block14 + Tabs + Editorial
   ============================================================= */

/* ----------------------------------------------------
   TITRE DU WIDGET (style global)
---------------------------------------------------- */

.widget-title,
.widgettitle {
    position: relative;
    padding-bottom: 20px;
    font-weight: 500;
    letter-spacing: 0.5px;
    color: #8511bd !important;
}

.widget-title::after,
.widgettitle::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    width: 45px;
    height: 2px;
    background-color: #8511bd;
    border-radius: 2px;
    opacity: 0.9;
}

    cursor: pointer;
    color: #444;
    position: relative;
}

.hr-tab-btn.active {
    color: #8511bd;
}

.hr-tab-btn.active::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: -4px;
    width: 40px; /* ⭐ petit trait violet */
    height: 2px;
    background-color: #8511bd;
    border-radius: 2px;
}
.hr-tab-btn.active::after {
    display: none !important;
}

/* ----------------------------------------------------
   ONGLET – CONTENU
---------------------------------------------------- */
.hr-tab-content {
    display: none;
}

.hr-tab-content.active {
    display: block;
}

.wp-tab-widget .tabs li {
    padding: 12px 18px !important;
    border-radius: 4px;
}

/* ----------------------------------------------------
   ARTICLE VEDETTE
---------------------------------------------------- */
.hr-wfnews-featured {
    margin-bottom: 20px;
}

.hr-wfnews-featured-thumb {
    width: 100%;
    height: 230px;
    background-size: cover;
    background-position: center;
    border-radius: 6px;
    margin-bottom: 12px;
}

.hr-wfnews-featured-title a {
    font-size: 18px;
    font-weight: 600;
    color: #0072FF;
}

.hr-wfnews-featured-title a:hover {
    opacity: 0.85;
}

.hr-wfnews-featured-excerpt {
    margin-top: 6px;
    line-height: 1.35;
    color: #000;
    font-size: 15px;
    font-weight: 400;
}

/* ----------------------------------------------------
   META
---------------------------------------------------- */
.hr-wfnews-meta {
    font-size: 12px;
    margin-bottom: 6px;
    color: #8511bd;
}

/* ----------------------------------------------------
   MINI ARTICLES
---------------------------------------------------- */
.hr-wfnews-mini-posts {
    margin-top: 10px;
}

.hr-wfnews-mini {
    display: flex;
    gap: 12px;
    margin-bottom: 16px;
    padding-bottom: 12px;
    border-bottom: 1px solid #e6e6e6;
}

.hr-wfnews-mini-thumb {
    width: 105px;
    height: 78px;
    background-size: cover;
    background-position: center;
    border-radius: 4px;
}

.hr-wfnews-mini-title a {
    font-size: 15px;
    font-weight: 600;
    color: #0072FF;
    display: block;
    margin-bottom: 4px;
}

.hr-wfnews-mini-title a:hover {
    opacity: 0.85;
}

.hr-wfnews-mini .hr-wfnews-meta {
    margin-top: 2px;
    font-size: 11px;
    color: #8511bd;
}

/* Padding des onglets WP Tab Widget */
.wp-tab-widget .tabs li a {
    padding: 12px 18px !important;
    display: inline-block;
}

/* Espace entre le titre du widget et les onglets */
.wp-tab-widget .tabs {
    margin-top: 12px !important;
}

/* ----------------------------------------------------
   FIX WP TAB WIDGET – PADDING ONGLET
---------------------------------------------------- */
.wp-tab-widget .tabs li a {
    padding: 12px 18px !important;
    display: inline-block;
}

.wp-tab-widget .tabs {
    margin-top: 12px !important;
}

.hr-tabs-nav .hr-tab-btn {
    padding: 12px 22px !important;
    border-radius: 4px;
    font-weight: 500;
}
/* =============================================================
   EDITORIAL WIDGET PRO
   ============================================================= */

/* --------------------------------------------------------------
   HORIZON RESPECT – EDITORIAL WIDGET PRO
   Styles généraux
-------------------------------------------------------------- */

.hr-editorial-widget {
    width: 100%;
    display: block;
    margin: 0;
    padding: 0;
    font-family: inherit;
}

.hr-editorial-heading {
    font-size: 1.2rem;
    font-weight: 700;
    padding: 8px 12px;
    margin-bottom: 15px;
    border-radius: 4px;
}

.hr-editorial-widget a {
    text-decoration: none;
    transition: color 0.2s ease;
}

.hr-editorial-widget a:hover {
    opacity: 0.8;
}

.hr-editorial-widget .hr-meta,
.hr-editorial-widget .hr-default-mini-meta,
.hr-editorial-widget .hr-list-meta,
.hr-editorial-widget .hr-left-meta,
.hr-editorial-widget .hr-right-meta,
.hr-editorial-widget .hr-round-meta,
.hr-editorial-widget .hr-compact-meta {
    font-size: 0.8rem;
    opacity: 0.8;
    margin-top: 4px;
    margin-bottom: 4px;
}

/* --------------------------------------------------------------
   LAYOUT DEFAULT (vedette + mini)
-------------------------------------------------------------- */

.hr-default-wrapper {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.hr-default-featured {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.hr-default-featured-thumb {
    width: 100%;
    height: 220px;
    background-size: cover;
    background-position: center;
    border-radius: 6px;
}

.hr-default-featured-content {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.hr-default-title {
    font-size: 1.1rem;
    font-weight: 700;
    line-height: 1.3;
    margin: 0;
}

.hr-default-excerpt {
    font-size: 0.9rem;
    line-height: 1.4;
    opacity: 0.9;
    margin: 0;
}

.hr-default-mini-list {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.hr-default-mini {
    display: flex;
    gap: 12px;
    align-items: center;
}

.hr-default-mini-thumb {
    width: 70px;
    height: 70px;
    background-size: cover;
    background-position: center;
    border-radius: 6px;
    flex-shrink: 0;
}

.hr-default-mini-content {
    flex: 1;
}

.hr-default-mini-title {
    font-size: 0.95rem;
    font-weight: 600;
    line-height: 1.3;
    margin: 0;
}

/* --------------------------------------------------------------
   LAYOUT LIST (sans image)
-------------------------------------------------------------- */

.hr-list-wrapper {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.hr-list-item {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.hr-list-title {
    font-size: 1rem;
    font-weight: 600;
    margin: 0;
}

.hr-list-excerpt {
    font-size: 0.85rem;
    line-height: 1.4;
    margin: 4px 0 0;
}

/* --------------------------------------------------------------
   LAYOUT LEFT THUMB (image à gauche)
-------------------------------------------------------------- */

.hr-left-wrapper {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.hr-left-item {
    display: flex;
    gap: 12px;
    align-items: flex-start;
}

.hr-left-thumb {
    width: 90px;
    height: 90px;
    background-size: cover;
    background-position: center;
    border-radius: 6px;
    flex-shrink: 0;
}

.hr-left-content {
    flex: 1;
}

.hr-left-title {
    font-size: 1rem;
    font-weight: 600;
    margin: 0;
}

/* --------------------------------------------------------------
   LAYOUT RIGHT THUMB (image à droite)
-------------------------------------------------------------- */

.hr-right-wrapper {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.hr-right-item {
    display: flex;
    gap: 12px;
    justify-content: space-between;
    align-items: flex-start;
}

.hr-right-content {
    flex: 1;
}

.hr-right-thumb {
    width: 90px;
    height: 90px;
    background-size: cover;
    background-position: center;
    border-radius: 6px;
    flex-shrink: 0;
}

.hr-right-title {
    font-size: 1rem;
    font-weight: 600;
    margin: 0;
}

/* --------------------------------------------------------------
   LAYOUT ROUND THUMB (image ronde)
-------------------------------------------------------------- */

.hr-round-wrapper {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.hr-round-item {
    display: flex;
    gap: 12px;
    align-items: center;
}

.hr-round-thumb {
    width: 80px;
    height: 80px;
    background-size: cover;
    background-position: center;
    border-radius: 50%;
    flex-shrink: 0;
}

.hr-round-content {
    flex: 1;
}

.hr-round-title {
    font-size: 1rem;
    font-weight: 600;
    margin: 0;
}

/* --------------------------------------------------------------
   LAYOUT COMPACT (mini-liste)
-------------------------------------------------------------- */

.hr-compact-wrapper {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.hr-compact-item {
    display: flex;
    gap: 10px;
    align-items: center;
}

.hr-compact-thumb {
    width: 55px;
    height: 55px;
    background-size: cover;
    background-position: center;
    border-radius: 6px;
    flex-shrink: 0;
}

.hr-compact-content {
    flex: 1;
}

.hr-compact-title {
    font-size: 0.95rem;
    font-weight: 600;
    margin: 0;
}

/* --------------------------------------------------------------
   LAYOUT AUTHOR (liste auteurs)
-------------------------------------------------------------- */

.hr-author-wrapper {
    display: flex;
    flex-direction: column;
    gap: 18px;
}

.hr-author-item {
    display: flex;
    gap: 14px;
    align-items: center;
}

.hr-author-photo {
    width: 70px;
    height: 70px;
    background-size: cover;
    background-position: center;
    flex-shrink: 0;
}

.hr-author-shape-round .hr-author-photo {
    border-radius: 50%;
}

.hr-author-shape-square .hr-author-photo {
    border-radius: 6px;
}

.hr-author-content {
    flex: 1;
}

.hr-author-name {
    font-size: 1rem;
    font-weight: 700;
    margin: 0;
}

.hr-author-role {
    font-size: 0.85rem;
    opacity: 0.8;
    margin-top: 3px;
}

.hr-author-count {
    font-size: 0.8rem;
    opacity: 0.7;
    margin-top: 2px;
}

/* --------------------------------------------------------------
   RESPONSIVE
-------------------------------------------------------------- */

@media (max-width: 600px) {

    .hr-left-item,
    .hr-right-item {
        flex-direction: column;
        align-items: flex-start;
    }

    .hr-left-thumb,
    .hr-right-thumb {
        width: 100%;
        height: 180px;
    }

    .hr-round-item {
        align-items: flex-start;
    }

    .hr-round-thumb {
        width: 60px;
        height: 60px;
    }

    .hr-default-featured-thumb {
        height: 180px;
    }
}