/*
 * Source de vérité visuelle du blog public.
 *
 * Ce fichier est volontairement partagé par les deux contextes:
 * 1) chargement blog complet (full load)
 * 2) chargement blog injecté via le shell Ajax
 *
 * Objectif strict:
 * éviter les divergences full vs shell en centralisant le même socle CSS.
 *
 * Important:
 * - pas de refonte design ici
 * - pas de changement de classes/ids/sélecteurs
 * - on déplace seulement le CSS inline existant
 */

:root {
    --bg-page: #f5f7fb;
    --bg-card: #ffffff;
    --text-main: #0f172a;
    --text-muted: #64748b;
    --accent: #0f766e;
}
body {
    background: var(--site-bg-gradient);
    color: var(--site-text);
}
.site-shell {
    max-width: 1180px;
}
#site-shell-root {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}
#site-shell-main {
    flex: 1 1 auto;
}
#site-shell-content {
    position: relative;
}
#site-shell-player-zone {
    position: relative;
    z-index: 10;
}
.navbar-brand {
    letter-spacing: .02em;
}
.blog-content img {
    max-width: 100%;
    height: auto;
    border-radius: .5rem;
}
.blog-content {
    line-height: 1.7;
}
.comment-pending-card {
    opacity: .78;
}
.access-cta {
    border-left: 4px solid var(--accent);
    background: #eefbf8;
}
.blog-post-card {
    overflow: hidden;
}
.blog-post-card .card-body {
    display: flex;
    flex-direction: column;
    height: 100%;
}
.blog-post-card-body {
    /*
     * Compactage ciblé des cartes du mur blog:
     * - gauche/droite/haut réduits nettement
     * - bas encore un peu plus petit
     * On garde cette règle locale pour ne pas impacter d'autres cartes bootstrap.
     */
    padding: .62rem .68rem .45rem !important;
}
.blog-post-top {
    min-height: 190px;
    display: flex;
    flex-direction: column;
}
.blog-post-title {
    font-size: 1.18rem;
    line-height: 1.24;
    margin: 0;
}
.blog-post-title a {
    color: #1f5fd6;
}
.blog-post-title a:hover {
    text-decoration: underline;
    color: #174aa8;
}
.blog-post-access-indicator {
    width: 1rem;
    height: 1rem;
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: .68rem;
    font-weight: 700;
    line-height: 1;
    cursor: help;
    border: 1px solid rgba(15, 23, 42, .16);
}
.blog-post-access-indicator.is-access-granted {
    color: #0f766e;
    background: rgba(16, 185, 129, .12);
    border-color: rgba(16, 185, 129, .35);
}
.blog-post-access-indicator.is-access-limited {
    color: #b45309;
    background: rgba(245, 158, 11, .14);
    border-color: rgba(245, 158, 11, .35);
}
.blog-post-access-indicator.is-access-info {
    color: #1d4ed8;
    background: rgba(59, 130, 246, .12);
    border-color: rgba(59, 130, 246, .35);
}
.blog-post-meta {
    line-height: 1.15;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    font-size: .74rem;
    opacity: .5;
}

.blog-person-meta-inline {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    min-width: 0;
    width: 100%;
}
.blog-person-meta-text {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.blog-post-meta-avatar,
.blog-modal-meta-avatar,
.blog-reaction-user-avatar,
.blog-reactions-list-avatar,
.blog-person-avatar {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 999px;
    overflow: hidden;
    flex: 0 0 auto;
    font-weight: 700;
    line-height: 1;
}
.blog-post-meta-avatar {
    width: 1rem;
    height: 1rem;
    font-size: .58rem;
}
.blog-modal-meta-avatar {
    width: 1.1rem;
    height: 1.1rem;
    font-size: .62rem;
}
.blog-reaction-user-avatar,
.blog-reactions-list-avatar {
    width: 1.15rem;
    height: 1.15rem;
    font-size: .62rem;
}
.blog-person-avatar-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.blog-modal-meta {
    line-height: 1.2;
}
.blog-recent-reactions-inline {
    display: inline-flex;
    align-items: center;
    gap: .45rem;
    min-width: 0;
}
.blog-recent-reactions-avatars {
    display: inline-flex;
    align-items: center;
}
.blog-recent-reactions-avatars .blog-reaction-user-avatar + .blog-reaction-user-avatar {
    margin-left: -.2rem;
    box-shadow: 0 0 0 2px #fff;
}
.blog-recent-reactions-text {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.blog-post-preview {
    color: var(--site-text);
    white-space: pre-line;
    word-break: break-word;
    font-size: .95rem;
    line-height: 1.42;
    padding-left: .35rem;
    padding-right: .35rem;
}
.blog-post-preview.is-collapsed {
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.blog-post-toggle {
    font-weight: 600;
    color: #2563eb;
    margin-bottom: .1rem;
}
.blog-post-toggle:hover {
    color: #1d4ed8;
}
.blog-post-media {
    margin: auto -.65rem 0;
}
.blog-post-read-btn {
    align-self: flex-start;
    margin-top: auto;
}
.blog-wall-social-summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .72rem;
    border-top: 1px solid rgba(15, 23, 42, .08);
    border-bottom: 1px solid rgba(15, 23, 42, .08);
    padding: .46rem 0;
    margin-top: .08rem;
    margin-bottom: .08rem;
}
.blog-wall-social-summary .btn-link {
    color: inherit;
}
.blog-wall-social-summary .small {
    font-size: .79rem;
}
.blog-wall-social-actions {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-top: .32rem !important;
    padding-top: .12rem;
    padding-bottom: .08rem;
}
.blog-wall-social-actions .btn-link {
    font-weight: 600;
    color: #334155;
}
.blog-wall-social-actions .btn-link.is-reacted {
    color: #1d4ed8;
}
.blog-reactions-list-modal {
    position: fixed;
    inset: 0;
    z-index: 50020;
    background: rgba(7, 12, 20, .58);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1rem;
}
body.blog-reactions-list-open {
    overflow: hidden;
}
.blog-reactions-list-dialog {
    width: min(460px, 96vw);
    max-height: min(78vh, 720px);
    background: #fff;
    border: 1px solid rgba(15, 23, 42, .12);
    border-radius: 14px;
    box-shadow: 0 18px 45px rgba(15, 23, 42, .3);
    display: flex;
    flex-direction: column;
    overflow: hidden;
}
.blog-reactions-list-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .8rem;
    padding: .75rem .95rem;
    border-bottom: 1px solid rgba(15, 23, 42, .08);
}
.blog-reactions-list-title {
    margin: 0;
    font-size: 1rem;
    font-weight: 700;
}
.blog-reactions-list-close {
    border: 0;
    background: transparent;
    color: #64748b;
    font-size: 1.45rem;
    line-height: 1;
    padding: 0 .2rem;
}
.blog-reactions-list-body {
    padding: .75rem .95rem;
    overflow: auto;
}
.blog-reactions-list-items {
    margin: 0;
    padding: 0;
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: .38rem;
}
.blog-reactions-list-item {
    display: grid;
    grid-template-columns: 1.5rem 1.35rem 1fr auto;
    align-items: center;
    gap: .55rem;
    padding: .35rem .4rem;
    border-radius: .5rem;
}
.blog-reactions-list-item:hover {
    background: #f1f5f9;
}
.blog-reactions-list-emoji {
    font-size: 1.05rem;
    line-height: 1;
}

.blog-reactions-list-avatar-wrap {
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.blog-reactions-list-name {
    font-size: .92rem;
    color: #0f172a;
    font-weight: 600;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.blog-reactions-list-label {
    font-size: .8rem;
    color: #64748b;
}
.blog-post-image-link {
    display: block;
    text-decoration: none;
    margin-top: .35rem;
    margin-bottom: .37rem;
}
.blog-post-image-wrap {
    position: relative;
    width: 100%;
    aspect-ratio: 16 / 9;
    background: #e9eef8;
    border-radius: .65rem;
    overflow: hidden;
}
.blog-post-image-wrap::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image: var(--blog-card-image-bg, none);
    background-size: cover;
    background-position: center;
    filter: blur(54px);
    transform: scale(1.2);
    opacity: 0;
    transition: opacity .24s ease;
    pointer-events: none;
}
.blog-post-image-wrap.is-portrait,
.blog-post-image-wrap.is-contained {
    display: flex;
    align-items: center;
    justify-content: center;
}
.blog-post-image-wrap.is-portrait::before,
.blog-post-image-wrap.is-contained::before {
    opacity: .62;
}

.blog-post-text-visual-wrap {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1rem;
}
.blog-post-text-visual {
    color: #fff;
    font-weight: 800;
    font-size: clamp(1.2rem, 2.2vw, 1.85rem);
    line-height: 1.25;
    text-align: center;
    white-space: pre-wrap;
    word-break: break-word;
    text-shadow: 0 1px 2px rgba(0,0,0,.22);
    max-width: 92%;
    display: -webkit-box;
    -webkit-line-clamp: 5;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.post-fallback {
    width: 100%;
    height: 100%;
    min-height: 180px;
    border-radius: 8px;
    position: relative;
    overflow: hidden;
}
.post-fallback::before,
.post-fallback::after {
    content: '';
    position: absolute;
    inset: 0;
    pointer-events: none;
}
.post-fallback-1 {
    background: linear-gradient(135deg, #2668d6 0%, #5746de 55%, #7b39b8 100%);
}
.post-fallback-1::before {
    opacity: .22;
    background-image: radial-gradient(rgba(255, 255, 255, .35) .8px, transparent .8px);
    background-size: 8px 8px;
    mix-blend-mode: screen;
}
.post-fallback-2 {
    background: linear-gradient(160deg, #0b1226 0%, #111f3d 50%, #102a4f 100%);
}
.post-fallback-2::before {
    opacity: .4;
    background-image:
        linear-gradient(rgba(124, 183, 255, .22) 1px, transparent 1px),
        linear-gradient(90deg, rgba(124, 183, 255, .22) 1px, transparent 1px);
    background-size: 24px 24px;
}
.post-fallback-3 {
    background:
        radial-gradient(circle at 72% 26%, rgba(120, 219, 255, .42), transparent 44%),
        linear-gradient(145deg, #0f6e8f 0%, #1b2f6d 52%, #4a2978 100%);
}
.post-fallback-3::after {
    opacity: .32;
    background: radial-gradient(circle at 75% 24%, rgba(255, 255, 255, .5), transparent 52%);
    filter: blur(8px);
}
.post-fallback-4 {
    background: linear-gradient(155deg, #0f3557 0%, #18566e 48%, #246469 100%);
}
.post-fallback-4::before {
    opacity: .25;
    background-image: repeating-linear-gradient(
        -35deg,
        rgba(255, 255, 255, .35) 0 2px,
        transparent 2px 12px
    );
}
.blog-post-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform .32s ease;
}
.blog-post-image-wrap.is-portrait .blog-post-image,
.blog-post-image-wrap.is-contained .blog-post-image {
    width: auto;
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    position: relative;
    z-index: 1;
}
.blog-post-image-link:hover .blog-post-image,
.blog-post-image-link:focus-visible .blog-post-image {
    transform: scale(1.035);
}
.blog-post-visibility-badge {
    position: absolute;
    right: .65rem;
    bottom: .65rem;
    z-index: 2;
}
.blog-post-featured-image {
    max-height: 460px;
    object-fit: cover;
}
:root[data-theme="dark"] #site-shell-content[data-shell-page="blog"] .card {
    background: #111a2c;
    color: #e6ebf5;
    border-color: #30415d !important;
}
:root[data-theme="dark"] #site-shell-content[data-shell-page="blog"] .text-muted,
:root[data-theme="dark"] #site-shell-content[data-shell-page="blog"] .small.text-muted {
    color: #9ab0cb !important;
}
:root[data-theme="dark"] #site-shell-content[data-shell-page="blog"] .blog-post-preview {
    color: #d9e5f6;
}
:root[data-theme="dark"] #site-shell-content[data-shell-page="blog"] .blog-post-title {
    color: #8db8ff;
}
:root[data-theme="dark"] #site-shell-content[data-shell-page="blog"] .blog-post-title a {
    color: #8db8ff;
}
:root[data-theme="dark"] #site-shell-content[data-shell-page="blog"] .blog-post-title a:hover {
    color: #b2d0ff;
}
:root[data-theme="dark"] #site-shell-content[data-shell-page="blog"] .blog-post-access-indicator.is-access-granted {
    color: #34d399;
    background: rgba(16, 185, 129, .18);
    border-color: rgba(52, 211, 153, .35);
}
:root[data-theme="dark"] #site-shell-content[data-shell-page="blog"] .blog-post-access-indicator.is-access-limited {
    color: #fbbf24;
    background: rgba(217, 119, 6, .25);
    border-color: rgba(251, 191, 36, .35);
}
:root[data-theme="dark"] #site-shell-content[data-shell-page="blog"] .blog-post-access-indicator.is-access-info {
    color: #93c5fd;
    background: rgba(37, 99, 235, .28);
    border-color: rgba(147, 197, 253, .35);
}
:root[data-theme="dark"] #site-shell-content[data-shell-page="blog"] .blog-post-toggle {
    color: #7db4ff;
}
:root[data-theme="dark"] #site-shell-content[data-shell-page="blog"] .blog-post-toggle:hover {
    color: #9ec7ff;
}
:root[data-theme="dark"] #site-shell-content[data-shell-page="blog"] .access-cta {
    background: #1a253b;
    border-left-color: #36c8ff;
}
:root[data-theme="dark"] #site-shell-content[data-shell-page="blog"] .comment-pending-card {
    opacity: .84;
}
:root[data-theme="dark"] #site-shell-content[data-shell-page="blog"] .blog-post-image-wrap {
    background: #0f1728;
}
:root[data-theme="dark"] #site-shell-content[data-shell-page="blog"] .blog-post-image-wrap.is-portrait::before,
.blog-post-image-wrap.is-contained::before {
    opacity: .52;
}
:root[data-theme="dark"] #site-shell-content[data-shell-page="blog"] .post-fallback-1 {
    background: linear-gradient(140deg, #1c4ca3 0%, #3e35b3 55%, #5d2c8b 100%);
}
:root[data-theme="dark"] #site-shell-content[data-shell-page="blog"] .post-fallback-2 {
    background: linear-gradient(160deg, #090f1d 0%, #101a34 50%, #102540 100%);
}
:root[data-theme="dark"] #site-shell-content[data-shell-page="blog"] .post-fallback-3 {
    background:
        radial-gradient(circle at 72% 26%, rgba(94, 202, 255, .38), transparent 42%),
        linear-gradient(145deg, #0a5068 0%, #152857 52%, #3b215f 100%);
}
:root[data-theme="dark"] #site-shell-content[data-shell-page="blog"] .post-fallback-4 {
    background: linear-gradient(155deg, #0a253f 0%, #123f53 48%, #1c4c50 100%);
}
:root[data-theme="dark"] #site-shell-content[data-shell-page="blog"] .blog-wall-social-summary {
    border-top-color: rgba(148, 163, 184, .25);
    border-bottom-color: rgba(148, 163, 184, .25);
}
:root[data-theme="dark"] #site-shell-content[data-shell-page="blog"] .blog-wall-social-actions .btn-link {
    color: #d0ddf3;
}
:root[data-theme="dark"] #site-shell-content[data-shell-page="blog"] .blog-wall-social-actions .btn-link.is-reacted {
    color: #8db8ff;
}
:root[data-theme="dark"] .blog-reactions-list-dialog {
    background: #111a2c;
    border-color: rgba(148, 163, 184, .3);
}
:root[data-theme="dark"] .blog-reactions-list-header {
    border-bottom-color: rgba(148, 163, 184, .3);
}
:root[data-theme="dark"] .blog-reactions-list-title {
    color: #dce7f7;
}
:root[data-theme="dark"] .blog-reactions-list-close {
    color: #a9bdd7;
}
:root[data-theme="dark"] .blog-reactions-list-item:hover {
    background: rgba(148, 163, 184, .14);
}
:root[data-theme="dark"] .blog-reactions-list-name {
    color: #dce7f7;
}
:root[data-theme="dark"] .blog-reactions-list-label {
    color: #9ab0cb;
}
:root[data-theme="dark"] #site-shell-content[data-shell-page="blog"] .btn-outline-secondary {
    color: #c8d5ea;
    border-color: #405577;
}
.blog-post-modal-overlay {
    position: fixed;
    inset: 0;
    background: rgba(7, 12, 20, .62);
    z-index: var(--z-blog-article-overlay, 120060);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1rem;
}
.blog-post-modal-dialog {
    width: min(980px, 96vw);
    max-height: min(92vh, 980px);
    background: #fff;
    border-radius: 14px;
    border: 1px solid rgba(15, 23, 42, .08);
    box-shadow: 0 22px 55px rgba(15, 23, 42, .28);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    position: relative;
}
.blog-post-modal-header {
    flex: 0 0 auto;
    padding: .9rem 1rem;
    border-bottom: 1px solid rgba(15, 23, 42, .08);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .75rem;
}
.blog-post-modal-title {
    margin: 0;
    font-size: 1.05rem;
    line-height: 1.25;
    color: #1f5fd6;
}
.blog-post-modal-close {
    border: 0;
    background: transparent;
    font-size: 1.6rem;
    line-height: 1;
    color: #475569;
    padding: 0 .25rem;
    cursor: pointer;
}
.blog-post-modal-content {
    flex: 1 1 auto;
    overflow-y: auto;
    padding: 1rem 1rem 1.1rem;
    min-height: 0;
}
.blog-modal-image-wrap {
    position: relative;
    border-radius: .75rem;
    overflow: hidden;
    background: #0b1220;
}
.blog-modal-image-wrap::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image: var(--blog-modal-image-bg, none);
    background-size: cover;
    background-position: center;
    filter: blur(58px);
    transform: scale(1.22);
    opacity: .6;
    pointer-events: none;
}
.blog-modal-image-wrap.is-portrait {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 180px;
    max-height: min(46vh, 520px);
}

.blog-modal-text-visual-wrap {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: min(52vh, 520px);
    padding: 1.4rem;
}
.blog-modal-text-visual {
    color: #fff;
    font-weight: 800;
    font-size: clamp(2rem, 4vw, 3.3rem);
    line-height: 1.2;
    text-align: center;
    white-space: pre-wrap;
    word-break: break-word;
    text-shadow: 0 2px 4px rgba(0,0,0,.28);
    max-width: 90%;
}
.blog-modal-image {
    display: block;
    width: 100%;
    height: auto;
    position: relative;
    z-index: 1;
}
.blog-modal-image-wrap.is-portrait .blog-modal-image {
    width: auto;
    max-width: 100%;
    max-height: min(46vh, 520px);
    object-fit: contain;
}
:root[data-theme="dark"] .blog-modal-image-wrap::before {
    opacity: .5;
}
:root[data-theme="dark"] .blog-modal-access-badge.is-access-granted {
    color: #34d399;
    background: rgba(16, 185, 129, .18);
    border-color: rgba(52, 211, 153, .30);
}
:root[data-theme="dark"] .blog-modal-access-badge.is-access-limited {
    color: #fbbf24;
    background: rgba(217, 119, 6, .25);
    border-color: rgba(251, 191, 36, .30);
}
:root[data-theme="dark"] .blog-modal-access-badge.is-access-info {
    color: #93c5fd;
    background: rgba(37, 99, 235, .28);
    border-color: rgba(147, 197, 253, .30);
}
:root[data-theme="dark"] .blog-modal-access-badge-icon {
    background: rgba(15, 23, 42, .32);
}
.blog-modal-visibility-badge {
    position: absolute;
    top: .6rem;
    left: .6rem;
    z-index: 2;
}
.blog-modal-access-strip {
    display: flex;
    align-items: center;
    gap: .5rem;
}
.blog-modal-access-badge {
    display: inline-flex;
    align-items: center;
    gap: .38rem;
    padding: .26rem .6rem;
    border-radius: 999px;
    border: 1px solid rgba(15, 23, 42, .14);
    font-size: .78rem;
    font-weight: 600;
    line-height: 1;
    cursor: help;
}
.blog-modal-access-badge-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1rem;
    height: 1rem;
    border-radius: 999px;
    font-size: .66rem;
    font-weight: 700;
    background: rgba(255,255,255,.55);
}
.blog-modal-access-badge.is-access-granted {
    color: #0f766e;
    background: rgba(16, 185, 129, .12);
    border-color: rgba(16, 185, 129, .30);
}
.blog-modal-access-badge.is-access-limited {
    color: #b45309;
    background: rgba(245, 158, 11, .14);
    border-color: rgba(245, 158, 11, .34);
}
.blog-modal-access-badge.is-access-info {
    color: #1d4ed8;
    background: rgba(59, 130, 246, .12);
    border-color: rgba(59, 130, 246, .30);
}
.blog-modal-access-cta-wrap .access-cta {
    margin-bottom: 0;
}
.blog-modal-comments-tree {
    display: flex;
    flex-direction: column;
    gap: .35rem;
}
.c-node.blog-modal-comment-item {
    position: relative;
    z-index: 1;
    padding: .15rem 0;
}
.c-node.blog-modal-comment-item.is-comment-menu-ancestor {
    z-index: 2147483000;
}
.c-node.blog-modal-comment-item.is-comment-menu-open {
    z-index: 2147483200;
}
.c-node.blog-modal-comment-item.is-pending {
    opacity: .78;
}
.c-node.blog-modal-comment-item.is-reply {
    opacity: .97;
}
.c-row {
    display: flex;
    gap: 8px;
    align-items: flex-start;
}
.c-node {
    --c-avatar-size: 32px;
    --c-avatar-font-size: 0.9rem;
}
.c-node.is-reply {
    --c-avatar-size: 24px;
    --c-avatar-font-size: 0.72rem;
}
.av {
    width: var(--c-avatar-size);
    height: var(--c-avatar-size);
    min-width: var(--c-avatar-size);
    min-height: var(--c-avatar-size);
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 var(--c-avatar-size);
}
.bubble {
    width: 100%;
}
.actions {
    margin-left: calc(var(--c-avatar-size) + 8px);
}
.c-node > svg.c-rails-collapsed {
    position: absolute;
    z-index: 0;
    top: 0;
    left: 0;
    overflow: visible;
    pointer-events: none;
}
.c-node > svg.c-rails-collapsed[hidden] {
    display: none !important;
}
.c-node > svg.c-rails-collapsed path {
    stroke: #d8dde5;
    stroke-width: 2;
}
.c-node > .c-row,
.c-node > .actions,
.c-node > .blog-comment-replies-toggle,
.c-node > .c-group {
    position: relative;
    z-index: 1;
}
.c-group {
    --comment-rail-width: 44px;
    position: relative;
    padding-left: var(--comment-rail-width);
    margin-top: .34rem;
}
.c-group > svg.c-rails {
    position: absolute;
    left: 0;
    top: 0;
    width: var(--comment-rail-width);
    overflow: visible;
    pointer-events: none;
    z-index: 0;
}
.c-group > svg.c-rails path {
    stroke: #e2e5e9;
    stroke-width: 2;
}
.c-item {
    position: relative;
    padding-top: 8px;
}
.c-item-inner {
    position: relative;
}
.c-group,
.c-group > svg.c-rails,
.c-item,
.c-item-inner {
    overflow: visible;
}
.blog-modal-comment-main {
    display: flex;
    gap: .5rem;
    align-items: flex-start;
}
.blog-modal-comment-avatar {
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: var(--c-avatar-font-size);
    line-height: 1;
    overflow: hidden;
}
.blog-modal-comment-avatar-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.blog-modal-comment-bubble {
    background: #f0f2f5;
    border: 0;
    box-shadow: none;
    border-radius: 16px;
    padding: .45rem .7rem;
    width: 100%;
    position: relative;
}
.blog-modal-comment-bubble strong {
    color: #0f172a;
}
.blog-comment-pending-label {
    color: #334155;
    font-style: italic;
}
.blog-comment-reply-to {
    color: #475569;
    margin-top: -.1rem;
}
.blog-comment-moderation-wrap {
    position: absolute;
    top: .35rem;
    right: .35rem;
    z-index: 3;
}
.blog-comment-moderation-toggle {
    color: #64748b;
    line-height: 1;
    width: 1.4rem;
    height: 1.4rem;
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    opacity: .45;
}
.blog-modal-comment-bubble:hover .blog-comment-moderation-toggle,
.blog-comment-moderation-wrap.is-open .blog-comment-moderation-toggle {
    opacity: 1;
    background: rgba(148, 163, 184, .16);
}
.blog-comment-moderation-menu {
    position: absolute;
    top: calc(100% + .2rem);
    right: 0;
    background: #fff;
    border: 1px solid rgba(15, 23, 42, .12);
    border-radius: .5rem;
    box-shadow: 0 10px 22px rgba(15, 23, 42, .2);
    padding: .2rem;
    min-width: 120px;
    display: none;
}
.blog-comment-moderation-wrap.is-open .blog-comment-moderation-menu {
    display: block;
}
.blog-comment-moderation-action {
    width: 100%;
    border: 0;
    background: transparent;
    text-align: left;
    font-size: .78rem;
    padding: .32rem .45rem;
    border-radius: .35rem;
    color: #1e293b;
}
.blog-comment-moderation-action:hover {
    background: #f1f5f9;
}
.blog-comment-moderation-action.is-danger {
    color: #b91c1c;
}
.blog-modal-comment-actions {
    margin-left: 2.4rem;
    margin-top: .15rem;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .6rem;
}
.blog-modal-comment-actions .btn-link,
.blog-modal-comment-actions .blog-comment-time {
    font-size: .76rem;
    font-weight: 600;
    color: #64748b;
}
.blog-modal-comment-actions .btn-link:hover {
    color: #1d4ed8;
}
.blog-modal-comment-item.is-just-posted .blog-modal-comment-bubble {
    background: #dbeafe;
    border-color: rgba(29, 78, 216, .25);
    transition: background .45s ease, border-color .45s ease;
}
/* Ciblage via ancre #comment-<id> depuis l'admin:
   on ajoute un halo léger temporaire pour repérer la cible. */
.blog-modal-comment-item.is-targeted-comment .blog-modal-comment-bubble {
    background: #eef6ff;
    border-color: rgba(29, 78, 216, .3);
    box-shadow: 0 0 0 2px rgba(96, 165, 250, .3);
    transition: background .45s ease, border-color .45s ease, box-shadow .45s ease;
}
.blog-modal-social-summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .65rem;
    border-top: 1px solid rgba(15, 23, 42, .08);
    border-bottom: 1px solid rgba(15, 23, 42, .08);
    padding: .55rem 0;
    margin-bottom: .55rem;
}
.blog-modal-social-actions {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .85rem;
    padding-bottom: .55rem;
}
.blog-modal-social-stats {
    line-height: 1;
}
.blog-modal-social-actions .btn-link {
    font-weight: 600;
    color: #334155;
}
.blog-modal-social-actions .btn-link.is-reacted {
    color: #1d4ed8;
}
.blog-modal-comments-filter {
    width: auto;
    min-width: 170px;
    font-size: .8rem;
}
.blog-reaction-icons-stack {
    display: inline-flex;
    align-items: center;
}
.blog-reaction-icon-mini {
    width: 22px;
    height: 22px;
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: #fff;
    border: 1px solid rgba(15, 23, 42, .18);
    font-size: .8rem;
    margin-right: -6px;
}
.blog-reaction-trigger-wrap {
    position: relative;
    display: inline-flex;
    align-items: center;
}
.blog-reaction-trigger-wrap::after {
    content: '';
    position: absolute;
    left: -6px;
    right: -6px;
    bottom: 100%;
    height: 14px;
    pointer-events: auto;
}
.blog-reaction-picker {
    position: absolute;
    left: 0;
    bottom: calc(100% + 6px);
    z-index: 4;
    display: none;
    align-items: center;
    gap: .3rem;
    padding: .3rem;
    border-radius: 999px;
    background: #fff;
    border: 1px solid rgba(15, 23, 42, .15);
    box-shadow: 0 10px 25px rgba(15, 23, 42, .25);
    white-space: nowrap;
}
.blog-reaction-trigger-wrap.is-open .blog-reaction-picker {
    display: inline-flex;
}
.blog-reaction-choice {
    border: 0;
    background: transparent;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    font-size: 1rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}
.blog-reaction-choice:hover {
    background: rgba(37, 99, 235, .12);
    transform: translateY(-1px);
}
.blog-post-modal-footer {
    flex: 0 0 auto;
    border-top: 1px solid rgba(15, 23, 42, .08);
    background: #fff;
    padding: .7rem .95rem;
}
.blog-modal-scroll-bottom-btn {
    width: 1.7rem;
    height: 1.7rem;
    border: 1px solid rgba(15, 23, 42, .14);
    border-radius: 999px;
    background: rgba(255, 255, 255, .96);
    color: #0f172a;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: .88rem;
    line-height: 1;
    box-shadow: 0 3px 9px rgba(15, 23, 42, .18);
    margin-right: .25rem;
}
.blog-modal-scroll-bottom-btn:hover {
    background: #fff;
    border-color: rgba(29, 78, 216, .45);
    color: #1d4ed8;
}
.blog-modal-comment-form {
    display: flex;
    flex-direction: column;
    gap: .45rem;
}
.blog-modal-comment-form .d-flex {
    display: flex;
    gap: .5rem;
    align-items: center;
}
.blog-modal-reply-context {
    display: inline-flex;
    align-items: center;
    justify-content: space-between;
    gap: .5rem;
    background: #eef2ff;
    border: 1px solid rgba(79, 70, 229, .24);
    border-radius: 999px;
    padding: .2rem .6rem;
    width: fit-content;
    max-width: 100%;
}
.blog-modal-reply-context .js-modal-reply-author {
    color: #1e3a8a;
}
.blog-modal-reply-context .js-modal-reply-cancel {
    font-size: 1.05rem;
    line-height: 1;
    color: #334155;
}
.blog-modal-comment-bar-inner .form-control {
    min-height: 34px;
}
body.blog-modal-open {
    overflow: hidden;
}
:root[data-theme="dark"] .blog-post-modal-dialog {
    background: #0f172a;
    border-color: #2b3a56;
    box-shadow: 0 24px 58px rgba(0, 0, 0, .5);
}
:root[data-theme="dark"] .blog-post-modal-header,
:root[data-theme="dark"] .blog-post-modal-footer {
    border-color: #2b3a56;
    background: #0f172a;
}
:root[data-theme="dark"] .blog-post-modal-title {
    color: #8db8ff;
}
:root[data-theme="dark"] .blog-post-modal-close {
    color: #b8c7df;
}
:root[data-theme="dark"] .blog-modal-meta {
    color: #b4c4da !important;
}
:root[data-theme="dark"] .blog-modal-content-body,
:root[data-theme="dark"] .blog-modal-content-body p,
:root[data-theme="dark"] .blog-modal-content-body li {
    color: #d8e5f7;
}
:root[data-theme="dark"] .blog-modal-comment-item {
    background: transparent;
}
:root[data-theme="dark"] .blog-modal-comment-bubble {
    background: #1a2640;
    border-color: #31476d;
}
:root[data-theme="dark"] .blog-modal-comment-bubble strong {
    color: #e6eefc;
}
:root[data-theme="dark"] .blog-comment-pending-label {
    color: #a7bbd8;
}
:root[data-theme="dark"] .blog-comment-reply-to {
    color: #9cb1cf;
}
:root[data-theme="dark"] .c-group > svg.c-rails path,
:root[data-theme="dark"] .c-node > svg.c-rails-collapsed path {
    stroke: rgba(124, 151, 189, .82);
}
:root[data-theme="dark"] .blog-comment-moderation-toggle {
    color: #a5b8d6;
}
:root[data-theme="dark"] .blog-comment-moderation-wrap.is-open .blog-comment-moderation-toggle,
:root[data-theme="dark"] .blog-modal-comment-bubble:hover .blog-comment-moderation-toggle {
    background: rgba(71, 91, 124, .35);
}
:root[data-theme="dark"] .blog-comment-moderation-menu {
    background: #0f1a2f;
    border-color: #344969;
    box-shadow: 0 12px 26px rgba(0, 0, 0, .38);
}
:root[data-theme="dark"] .blog-comment-moderation-action {
    color: #d1def0;
}
:root[data-theme="dark"] .blog-comment-moderation-action:hover {
    background: #1b2b46;
}
:root[data-theme="dark"] .blog-comment-moderation-action.is-danger {
    color: #fca5a5;
}
:root[data-theme="dark"] .blog-modal-comment-actions .btn-link,
:root[data-theme="dark"] .blog-modal-comment-actions .blog-comment-time {
    color: #9fb4d2;
}
:root[data-theme="dark"] .blog-modal-comment-actions .btn-link:hover {
    color: #8db8ff;
}
:root[data-theme="dark"] .blog-modal-social-summary,
:root[data-theme="dark"] .blog-post-modal-header,
:root[data-theme="dark"] .blog-post-modal-footer {
    border-color: #2b3a56;
}
:root[data-theme="dark"] .blog-modal-social-summary .text-muted,
:root[data-theme="dark"] .blog-modal-social-actions .text-muted {
    color: #9fb4d2 !important;
}
:root[data-theme="dark"] .blog-modal-social-summary .small,
:root[data-theme="dark"] .blog-modal-social-stats {
    color: #a9bedb !important;
}
:root[data-theme="dark"] .blog-reaction-picker {
    background: #0f172a;
    border-color: #2b3a56;
    box-shadow: 0 10px 25px rgba(0, 0, 0, .45);
}
:root[data-theme="dark"] .blog-reaction-icon-mini {
    background: #0f172a;
    border-color: #2b3a56;
}
:root[data-theme="dark"] .blog-modal-social-actions .btn-link {
    color: #c5d6ef;
}
:root[data-theme="dark"] .blog-modal-social-actions .btn-link.is-reacted {
    color: #89b7ff;
}
:root[data-theme="dark"] .blog-modal-comment-item.is-just-posted .blog-modal-comment-bubble {
    background: #173764;
    border-color: #2f6fc4;
}
:root[data-theme="dark"] .blog-modal-comment-item.is-targeted-comment .blog-modal-comment-bubble {
    background: #163459;
    border-color: #3a79c8;
    box-shadow: 0 0 0 2px rgba(88, 154, 247, .35);
}
:root[data-theme="dark"] .blog-modal-reply-context {
    background: #1e293b;
    border-color: #3b4f71;
}
:root[data-theme="dark"] .blog-modal-reply-context .js-modal-reply-author {
    color: #9ec5ff;
}
:root[data-theme="dark"] .blog-post-modal-footer .form-control,
:root[data-theme="dark"] .blog-post-modal-footer .form-select {
    background: #0f1a2f;
    border-color: #334766;
    color: #dbe7f8;
}
:root[data-theme="dark"] .blog-modal-comments-filter {
    background: #0f1a2f;
    border-color: #334766;
    color: #dbe7f8;
}
:root[data-theme="dark"] .blog-post-modal-footer .form-control::placeholder {
    color: #87a0c2;
}
:root[data-theme="dark"] .blog-post-modal-footer .form-control:focus,
:root[data-theme="dark"] .blog-post-modal-footer .form-select:focus {
    border-color: #4a79bf;
    box-shadow: 0 0 0 .2rem rgba(93, 155, 255, .22);
}
:root[data-theme="dark"] .blog-post-modal-footer .btn-outline-secondary {
    color: #c9d9ef;
    border-color: #446086;
}
:root[data-theme="dark"] .blog-modal-scroll-bottom-btn {
    background: rgba(15, 26, 47, .95);
    color: #dbe7f8;
    border-color: #3d5579;
    box-shadow: 0 4px 10px rgba(0, 0, 0, .35);
}
:root[data-theme="dark"] .blog-modal-scroll-bottom-btn:hover {
    border-color: #6da4ff;
    color: #9ec5ff;
}
@media (max-width: 767.98px) {
    .blog-post-top {
        min-height: 0;
    }
    .blog-post-title {
        font-size: 1.08rem;
        line-height: 1.26;
    }
    .blog-post-modal-overlay {
        padding: .35rem;
    }
    .blog-post-modal-dialog {
        width: 100%;
        max-height: 96vh;
        border-radius: 10px;
    }
    .blog-post-modal-content {
        padding: .85rem .85rem 1rem;
    }
    .blog-post-modal-footer {
        padding: .6rem .7rem;
    }
    .blog-modal-social-summary,
    .blog-modal-social-actions {
        flex-direction: column;
        align-items: flex-start;
    }
    .blog-modal-comments-filter {
        width: 100%;
        min-width: 0;
    }
}
.borg-offer-card.is-support {
    border: 1px solid rgba(245, 197, 24, .35) !important;
    box-shadow: 0 .4rem 1rem rgba(245, 197, 24, .15);
}
:root[data-theme="dark"] #site-shell-content[data-shell-page="blog"] .borg-offer-card.is-support {
    border-color: rgba(245, 197, 24, .45) !important;
    box-shadow: 0 .45rem 1rem rgba(245, 197, 24, .2);
}

:root[data-theme="dark"] .blog-recent-reactions-avatars .blog-reaction-user-avatar + .blog-reaction-user-avatar {
    box-shadow: 0 0 0 2px #0f172a;
}


/* Prompt 4 · polish mur/blog/cartes */
.blog-post-card {
    border-radius: 1rem;
    border: 1px solid rgba(148, 163, 184, .18);
    box-shadow: 0 10px 26px rgba(15, 23, 42, .08);
    transition: transform 180ms ease, box-shadow 180ms ease, border-color 180ms ease;
    background: #fff;
}
.blog-post-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 16px 34px rgba(15, 23, 42, .12);
    border-color: rgba(37, 99, 235, .18);
}
.blog-post-card .card-body {
    border-radius: inherit;
}
.blog-post-title {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    min-height: calc(1.24em * 2);
}
.blog-post-meta {
    opacity: .72;
}
.blog-person-meta-inline {
    border-radius: .55rem;
    padding: .12rem .18rem;
    margin-left: -.18rem;
    margin-right: -.18rem;
    transition: background-color 140ms ease, color 140ms ease;
}
.blog-person-meta-inline[data-profile-hover-linkable="1"]:hover,
.blog-person-meta-inline[data-profile-hover-linkable="1"]:focus-visible {
    background: rgba(37, 99, 235, .08);
    color: #0f172a;
    outline: none;
}
.blog-person-meta-inline[data-profile-hover-linkable="1"] .blog-person-meta-name {
    text-decoration: underline;
    text-decoration-color: transparent;
    text-underline-offset: .14em;
    transition: text-decoration-color 140ms ease;
}
.blog-person-meta-inline[data-profile-hover-linkable="1"]:hover .blog-person-meta-name,
.blog-person-meta-inline[data-profile-hover-linkable="1"]:focus-visible .blog-person-meta-name {
    text-decoration-color: currentColor;
}
.blog-post-meta-avatar {
    box-shadow: 0 0 0 1px rgba(255,255,255,.9), 0 3px 8px rgba(15,23,42,.12);
}
.blog-post-preview {
    min-height: 4.25rem;
}
.blog-post-toggle {
    margin-top: .18rem;
}
.blog-wall-social-summary .btn-link,
.blog-wall-social-actions .btn-link {
    border-radius: .6rem;
    transition: background-color 140ms ease, color 140ms ease;
}
.blog-wall-social-summary .btn-link:hover,
.blog-wall-social-actions .btn-link:hover,
.blog-wall-social-summary .btn-link:focus-visible,
.blog-wall-social-actions .btn-link:focus-visible {
    background: rgba(15, 23, 42, .045);
    outline: none;
}
.blog-wall-social-actions .btn-link {
    padding: .22rem .34rem !important;
}
.blog-reaction-trigger-wrap {
    border-radius: .7rem;
}
.blog-reaction-picker {
    box-shadow: 0 14px 34px rgba(15, 23, 42, .18);
}
:root[data-theme="dark"] #site-shell-content[data-shell-page="blog"] .blog-post-card {
    background: #0f1728;
    border-color: rgba(96, 165, 250, .14);
    box-shadow: 0 16px 36px rgba(2, 6, 23, .34);
}
:root[data-theme="dark"] #site-shell-content[data-shell-page="blog"] .blog-post-card:hover {
    border-color: rgba(125, 180, 255, .32);
    box-shadow: 0 22px 44px rgba(2, 6, 23, .44);
}
:root[data-theme="dark"] #site-shell-content[data-shell-page="blog"] .blog-person-meta-inline[data-profile-hover-linkable="1"]:hover,
:root[data-theme="dark"] #site-shell-content[data-shell-page="blog"] .blog-person-meta-inline[data-profile-hover-linkable="1"]:focus-visible {
    background: rgba(125, 180, 255, .12);
    color: #e2e8f0;
}
:root[data-theme="dark"] #site-shell-content[data-shell-page="blog"] .blog-post-meta-avatar {
    box-shadow: 0 0 0 1px rgba(15,23,42,.82), 0 4px 12px rgba(2,6,23,.38);
}
:root[data-theme="dark"] #site-shell-content[data-shell-page="blog"] .blog-wall-social-summary .btn-link:hover,
:root[data-theme="dark"] #site-shell-content[data-shell-page="blog"] .blog-wall-social-actions .btn-link:hover,
:root[data-theme="dark"] #site-shell-content[data-shell-page="blog"] .blog-wall-social-summary .btn-link:focus-visible,
:root[data-theme="dark"] #site-shell-content[data-shell-page="blog"] .blog-wall-social-actions .btn-link:focus-visible {
    background: rgba(148, 163, 184, .12);
    color: #e2e8f0;
}
@media (max-width: 767.98px) {
    .blog-post-card:hover {
        transform: none;
    }
    .blog-post-title {
        font-size: 1.08rem;
        min-height: auto;
    }
    .blog-post-preview {
        min-height: 0;
    }
}

/* ClubOS 6.9 — menu Facebook-like et édition inline des commentaires */
.blog-modal-comment-bubble { position: relative; padding-right: 2.6rem; }
.blog-comment-actions-menu-wrap {
    position: absolute;
    top: .25rem;
    right: .25rem;
    z-index: 2147483400;
}
.blog-comment-actions-menu-trigger {
    width: 32px;
    height: 32px;
    display: grid;
    place-items: center;
    border: 0;
    border-radius: 50%;
    background: transparent;
    color: var(--bs-secondary-color, #6b7280);
    font-weight: 800;
    letter-spacing: 1px;
    line-height: 1;
    opacity: 0;
    transition: opacity .12s ease, background-color .12s ease;
}
.blog-modal-comment-bubble:hover > .blog-comment-actions-menu-wrap > .blog-comment-actions-menu-trigger,
.blog-comment-actions-menu-wrap:focus-within > .blog-comment-actions-menu-trigger,
.blog-comment-actions-menu-trigger:focus-visible,
.blog-comment-actions-menu-trigger[aria-expanded="true"] { opacity: 1; }
.blog-comment-actions-menu-trigger:hover,
.blog-comment-actions-menu-trigger:focus-visible,
.blog-comment-actions-menu-trigger[aria-expanded="true"] { background: rgba(127,127,127,.16); }
.blog-comment-actions-menu {
    position: absolute;
    z-index: 2147483500;
    top: calc(100% + 5px);
    right: 0;
    width: 250px;
    padding: .4rem;
    border: 1px solid var(--bs-border-color, #d5d9e0);
    border-radius: 12px;
    background: var(--bs-body-bg, #fff);
    color: var(--bs-body-color, #1f2937);
    box-shadow: 0 16px 38px rgba(0,0,0,.22);
}
.blog-comment-actions-menu[hidden] { display: none !important; }
.blog-comment-actions-menu button {
    display: block;
    width: 100%;
    border: 0;
    border-radius: 8px;
    padding: .68rem .75rem;
    background: transparent;
    color: inherit;
    text-align: left;
    font-size: .92rem;
}
.blog-comment-actions-menu button:hover,
.blog-comment-actions-menu button:focus-visible { background: rgba(127,127,127,.14); outline: none; }
.blog-comment-actions-menu button.is-danger { color: var(--bs-danger, #dc3545); }
.blog-comment-inline-editor { margin-top: .35rem; }
.blog-comment-inline-textarea {
    min-height: 76px;
    max-height: 220px;
    resize: vertical;
    border-radius: 12px;
}
.blog-comment-inline-editor-actions {
    display: flex;
    justify-content: flex-end;
    gap: .45rem;
    margin-top: .45rem;
}
.js-comment-history-trigger {
    border: 0;
    color: var(--bs-secondary-color, #64748b);
    font-size: .76rem;
    font-weight: 600;
    line-height: 1;
}
.js-comment-history-trigger:hover,
.js-comment-history-trigger:focus-visible {
    color: var(--bs-primary, #2563eb);
    text-decoration: underline !important;
}
.post-display-undo-notice {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .75rem;
}
@media (hover: none) {
    .blog-comment-actions-menu-trigger { opacity: 1; }
}
@media (max-width: 575.98px) {
    .blog-comment-actions-menu { width: min(250px, calc(100vw - 42px)); }
}

/* Flux continu des publications. */
.club-feed-stream-sentinel {
    display: flex; align-items: center; justify-content: center; gap: .7rem;
    min-height: 5rem; margin: 1rem 0 2rem; border-radius: 1rem;
    color: var(--site-text-muted, #64748b); cursor: pointer;
}
.club-feed-stream-sentinel:hover { background: rgba(13,110,253,.055); }
.club-feed-stream-spinner {
    width: 1.15rem; height: 1.15rem; border-radius: 50%;
    border: 2px solid rgba(100,116,139,.25); border-top-color: var(--bs-primary, #0d6efd);
    animation: club-feed-spin .8s linear infinite;
}
.club-feed-stream-sentinel:not(.is-loading) .club-feed-stream-spinner { opacity: .45; animation-play-state: paused; }
.club-feed-stream-sentinel.is-error { color: #b42318; }
@keyframes club-feed-spin { to { transform: rotate(360deg); } }


/* B.3.2 — connectiques robustes et interactions tactiles prévisibles. */
.js-comment-reaction-trigger {
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
}

@media (max-width: 767.98px) {
    .blog-modal-comments-tree .c-group {
        --comment-rail-width: 36px;
    }
}

/* ========================================================================== */
/* ClubOS 8.14.0-B.3.2.2 — colonne racine et géométrie mesurée des fils.     */
/* ========================================================================== */
.blog-modal-comments-tree {
    position: relative;
    isolation: isolate;
}
.blog-modal-comments-tree > svg.c-root-spine {
    position: absolute;
    z-index: 0;
    top: 0;
    left: 0;
    overflow: visible;
    pointer-events: none;
}
.blog-modal-comments-tree > svg.c-root-spine[hidden] {
    display: none !important;
}
.blog-modal-comments-tree > svg.c-root-spine path {
    stroke: #d8dde5;
    stroke-width: 2;
}
:root[data-theme="dark"] .blog-modal-comments-tree > svg.c-root-spine path {
    stroke: rgba(148, 163, 184, .46);
}

/* ========================================================================== */
/* 8.14.0.60.8.15.9.1 — Flux « Pour vous » / « Abonnements »                */
/* ========================================================================== */
.club-feed-mode-switch {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: .55rem;
    margin: 0 0 1rem;
    padding: .3rem;
    border: 1px solid rgba(100, 116, 139, .18);
    border-radius: 1rem;
    background: rgba(248, 250, 252, .88);
    box-shadow: 0 8px 22px rgba(15, 23, 42, .05);
}

.club-feed-mode-tab {
    display: flex;
    min-width: 0;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: .08rem;
    padding: .65rem .75rem;
    border-radius: .75rem;
    color: #64748b;
    text-align: center;
    text-decoration: none;
    transition: background-color .16s ease, color .16s ease, box-shadow .16s ease, transform .16s ease;
}

.club-feed-mode-tab:hover {
    color: #0f172a;
    background: rgba(255, 255, 255, .72);
}

.club-feed-mode-tab.is-active {
    color: #0f172a;
    background: #fff;
    box-shadow: 0 5px 16px rgba(15, 23, 42, .09);
}

.club-feed-mode-tab-title {
    font-size: .92rem;
    font-weight: 750;
    line-height: 1.15;
}

.club-feed-mode-tab-caption {
    overflow: hidden;
    max-width: 100%;
    color: #94a3b8;
    font-size: .69rem;
    line-height: 1.2;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.club-feed-mode-tab.is-active .club-feed-mode-tab-caption {
    color: #64748b;
}

.club-feed-suggestion-note {
    display: inline-flex;
    max-width: 100%;
    align-items: center;
    gap: .38rem;
    margin: 0 0 .48rem;
    padding: .24rem .5rem;
    border-radius: 999px;
    background: rgba(37, 99, 235, .075);
    color: #475569;
    font-size: .68rem;
    font-weight: 650;
    line-height: 1.25;
}

.club-feed-suggestion-dot {
    width: .42rem;
    height: .42rem;
    flex: 0 0 .42rem;
    border-radius: 50%;
    background: #2563eb;
}

[data-theme="dark"] .club-feed-mode-switch,
html[data-theme="dark"] .club-feed-mode-switch,
body.theme-dark .club-feed-mode-switch {
    border-color: rgba(148, 163, 184, .16);
    background: rgba(15, 23, 42, .76);
}

[data-theme="dark"] .club-feed-mode-tab,
html[data-theme="dark"] .club-feed-mode-tab,
body.theme-dark .club-feed-mode-tab {
    color: #94a3b8;
}

[data-theme="dark"] .club-feed-mode-tab:hover,
[data-theme="dark"] .club-feed-mode-tab.is-active,
html[data-theme="dark"] .club-feed-mode-tab:hover,
html[data-theme="dark"] .club-feed-mode-tab.is-active,
body.theme-dark .club-feed-mode-tab:hover,
body.theme-dark .club-feed-mode-tab.is-active {
    color: #f8fafc;
    background: rgba(30, 41, 59, .95);
}

[data-theme="dark"] .club-feed-suggestion-note,
html[data-theme="dark"] .club-feed-suggestion-note,
body.theme-dark .club-feed-suggestion-note {
    background: rgba(59, 130, 246, .13);
    color: #cbd5e1;
}

@media (max-width: 575.98px) {
    .club-feed-mode-switch {
        gap: .35rem;
        margin-bottom: .75rem;
        padding: .22rem;
        border-radius: .85rem;
    }

    .club-feed-mode-tab {
        padding: .58rem .4rem;
        border-radius: .68rem;
    }

    .club-feed-mode-tab-title {
        font-size: .88rem;
    }

    .club-feed-mode-tab-caption {
        font-size: .62rem;
    }
}

/* 8.15.9.2 — accès discret au mécanisme public de signalement légal. */
.blog-public-legal-report-row{display:flex;align-items:center;justify-content:flex-end;gap:.45rem;flex-wrap:wrap;margin-top:.55rem;padding-top:.45rem;border-top:1px solid rgba(100,116,139,.12);font-size:.72rem;color:#94a3b8}.blog-public-legal-report-link{color:#64748b;text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:2px}.blog-public-legal-report-link:hover,.blog-public-legal-report-link:focus-visible{color:#334155}.blog-public-legal-report-row span{font-size:.68rem}@media(max-width:575.98px){.blog-public-legal-report-row{justify-content:flex-start}.blog-public-legal-report-row span{display:none}}:root[data-theme="dark"] .blog-public-legal-report-link{color:#94a3b8}:root[data-theme="dark"] .blog-public-legal-report-link:hover{color:#e2e8f0}

/* Club Alex Borg 8.15.9.7.11 — cartes mur/profil : chiffres compacts,
 * vraies icônes SVG et état de réaction personnel immédiatement visible. */
.blog-wall-social-metrics {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    margin-left: auto;
    white-space: nowrap;
}

.blog-wall-social-metric {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    color: #64748b;
    font-size: .79rem;
    line-height: 1;
    text-decoration: none;
    font-variant-numeric: tabular-nums;
}

.blog-wall-social-metric:hover,
.blog-wall-social-metric:focus-visible {
    color: #1d4ed8;
    outline: none;
}

.blog-wall-social-metric .club-social-icon {
    width: 16px;
    height: 16px;
    flex-basis: 16px;
}

.blog-wall-social-actions .club-social-action {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.blog-wall-social-actions .club-social-action-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 17px;
    min-height: 17px;
    font-size: .95rem;
    line-height: 1;
}

.blog-wall-social-actions .club-social-action-svg,
.blog-wall-social-actions .club-social-like-svg {
    width: 17px;
    height: 17px;
    flex: 0 0 17px;
}

.blog-wall-social-actions .js-post-reaction-trigger.is-reacted {
    color: #2563eb;
}

:root[data-theme="dark"] #site-shell-content[data-shell-page="blog"] .blog-wall-social-metric,
:root[data-theme="dark"] .profile-public-wrap .blog-wall-social-metric {
    color: #aab8cc;
}

:root[data-theme="dark"] #site-shell-content[data-shell-page="blog"] .blog-wall-social-metric:hover,
:root[data-theme="dark"] #site-shell-content[data-shell-page="blog"] .blog-wall-social-metric:focus-visible,
:root[data-theme="dark"] .profile-public-wrap .blog-wall-social-metric:hover,
:root[data-theme="dark"] .profile-public-wrap .blog-wall-social-metric:focus-visible {
    color: #bfdbfe;
}

@media (max-width: 520px) {
    .blog-wall-social-summary {
        gap: .45rem;
    }

    .blog-wall-social-metrics {
        gap: 8px;
    }

    .blog-wall-social-actions {
        justify-content: space-between;
        gap: .35rem;
    }

    .blog-wall-social-actions .club-social-action {
        gap: 4px;
        padding-inline: .22rem !important;
        font-size: .8rem;
    }
}

[data-post-display-card="1"] .blog-post-preview {
    cursor: pointer;
}


/* AV.1.1 R6 FIX5 — preserve portrait media instead of cropping it. */
.blog-post-gallery-count-1.is-portrait,
.blog-post-gallery-count-1.is-contained {
    background: #0b0f17;
}
.blog-post-gallery-count-1.is-portrait .blog-post-gallery-item,
.blog-post-gallery-count-1.is-contained .blog-post-gallery-item {
    display: flex;
    align-items: center;
    justify-content: center;
}
.blog-post-gallery-count-1.is-portrait .blog-post-image,
.blog-post-gallery-count-1.is-contained .blog-post-image {
    width: auto !important;
    max-width: 100%;
    height: 100% !important;
    max-height: 100%;
    object-fit: contain !important;
    position: relative;
    z-index: 1;
}

@media (max-width: 767.98px) {
    .blog-post-gallery-count-1.is-portrait,
    .blog-post-gallery-count-1.is-contained {
        aspect-ratio: auto;
        min-height: 0;
        background: #080b11;
    }
    .blog-post-gallery-count-1.is-portrait::before,
    .blog-post-gallery-count-1.is-contained::before {
        display: none;
    }
    .blog-post-gallery-count-1.is-portrait .blog-post-gallery-item,
    .blog-post-gallery-count-1.is-contained .blog-post-gallery-item {
        display: block;
        height: auto;
        min-height: 0;
    }
    .blog-post-gallery-count-1.is-portrait .blog-post-image,
    .blog-post-gallery-count-1.is-contained .blog-post-image {
        width: 100% !important;
        height: auto !important;
        max-width: 100%;
        max-height: none;
        object-fit: contain !important;
        transform: none;
    }
    .blog-post-gallery-count-1.is-portrait .blog-post-image-link:hover .blog-post-image,
    .blog-post-gallery-count-1.is-contained .blog-post-image-link:hover .blog-post-image {
        transform: none;
    }
}


/* AV.1.1 R6 FIX7 — final wall/profile cascade guard: single media is complete. */
#site-shell-content[data-shell-page="blog"] .blog-post-gallery-count-1 .blog-post-image,
.profile-public-wrap .blog-post-gallery-count-1 .blog-post-image {
    width: auto !important;
    max-width: 100% !important;
    height: 100% !important;
    max-height: 100% !important;
    object-fit: contain !important;
    transform: none !important;
}
#site-shell-content[data-shell-page="blog"] .blog-post-gallery-count-1,
.profile-public-wrap .blog-post-gallery-count-1 {
    background: #080b11;
}
@media (max-width: 767.98px) {
    #site-shell-content[data-shell-page="blog"] .blog-post-gallery-count-1,
    .profile-public-wrap .blog-post-gallery-count-1 {
        aspect-ratio: auto !important;
        min-height: 0 !important;
    }
    #site-shell-content[data-shell-page="blog"] .blog-post-gallery-count-1 .blog-post-gallery-item,
    .profile-public-wrap .blog-post-gallery-count-1 .blog-post-gallery-item {
        display: block !important;
        height: auto !important;
        min-height: 0 !important;
    }
    #site-shell-content[data-shell-page="blog"] .blog-post-gallery-count-1 .blog-post-image,
    .profile-public-wrap .blog-post-gallery-count-1 .blog-post-image {
        width: 100% !important;
        height: auto !important;
        max-height: none !important;
        object-fit: contain !important;
    }
}


/* AV.1.1 R6 FIX8 — final shell cascade + adaptive blurred gutters.
 * This block intentionally comes last and carries shell/profile specificity so
 * site-theme.css cannot reintroduce cover on a single image. */
#site-shell-content[data-shell-page="blog"] .blog-post-gallery-count-1,
.profile-public-wrap .blog-post-gallery-count-1 {
    position:relative;
    background:#080b11;
}
#site-shell-content[data-shell-page="blog"] .blog-post-gallery-count-1::before,
.profile-public-wrap .blog-post-gallery-count-1::before {
    display:block !important;
    opacity:.68 !important;
}
#site-shell-content[data-shell-page="blog"] .blog-post-gallery-count-1 .blog-post-gallery-item,
.profile-public-wrap .blog-post-gallery-count-1 .blog-post-gallery-item {
    width:100%;
    display:flex !important;
    align-items:center;
    justify-content:center;
}
#site-shell-content[data-shell-page="blog"] .blog-post-gallery-count-1 .blog-post-image,
.profile-public-wrap .blog-post-gallery-count-1 .blog-post-image {
    position:relative;
    z-index:1;
    width:auto !important;
    height:auto !important;
    max-width:100% !important;
    max-height:100% !important;
    object-fit:contain !important;
    transform:none !important;
}
@media (max-width:767.98px) {
    #site-shell-content[data-shell-page="blog"] .blog-post-gallery-count-1,
    .profile-public-wrap .blog-post-gallery-count-1 {
        aspect-ratio:auto !important;
        min-height:0 !important;
    }
    #site-shell-content[data-shell-page="blog"] .blog-post-gallery-count-1::before,
    .profile-public-wrap .blog-post-gallery-count-1::before {
        display:block !important;
        opacity:.66 !important;
    }
    #site-shell-content[data-shell-page="blog"] .blog-post-gallery-count-1 .blog-post-gallery-item,
    .profile-public-wrap .blog-post-gallery-count-1 .blog-post-gallery-item {
        width:100%;
        height:auto !important;
        min-height:0 !important;
        display:flex !important;
        align-items:center;
        justify-content:center;
    }
    #site-shell-content[data-shell-page="blog"] .blog-post-gallery-count-1 .blog-post-image,
    .profile-public-wrap .blog-post-gallery-count-1 .blog-post-image {
        width:auto !important;
        height:auto !important;
        max-width:calc(100% - 12px) !important;
        max-height:min(68svh, 620px) !important;
        object-fit:contain !important;
        margin-inline:auto;
    }
}


/* AV.1.1 R6 FIX9 — final wall/profile single-media contract.
 * The foreground is always complete; the blurred copy only fills unused stage space. */
#site-shell-content[data-shell-page="blog"] .blog-post-gallery.is-single-media,
.profile-public-wrap .blog-post-gallery.is-single-media {
    position:relative;
    isolation:isolate;
    background:#080b11;
}
#site-shell-content[data-shell-page="blog"] .blog-post-gallery.is-single-media::before,
.profile-public-wrap .blog-post-gallery.is-single-media::before {
    display:block !important;
    opacity:.42 !important;
    filter:blur(32px) saturate(.86) !important;
    transform:scale(1.10) !important;
}
#site-shell-content[data-shell-page="blog"] .blog-post-gallery.is-single-media .blog-post-gallery-item,
.profile-public-wrap .blog-post-gallery.is-single-media .blog-post-gallery-item {
    position:relative;
    z-index:1;
    width:100%;
    height:100%;
    display:block !important;
}
#site-shell-content[data-shell-page="blog"] .blog-post-gallery.is-single-media .blog-post-image,
.profile-public-wrap .blog-post-gallery.is-single-media .blog-post-image {
    width:100% !important;
    height:100% !important;
    max-width:none !important;
    max-height:none !important;
    object-fit:contain !important;
    object-position:center center !important;
    transform:none !important;
}
@media (max-width:767.98px) {
    #site-shell-content[data-shell-page="blog"] .blog-post-gallery.is-single-media,
    .profile-public-wrap .blog-post-gallery.is-single-media {
        aspect-ratio:auto !important;
        height:min(68svh, 620px) !important;
        min-height:min(48svh, 390px);
    }
}

/* OVH R6 HOTFIX2 — mobile single-media ratio correction.
 * FIX9's viewport-height stage applies to portrait media only. */
@media (max-width:767.98px) {
    #site-shell-content[data-shell-page="blog"] .blog-post-gallery.is-single-media:not(.is-portrait),
    .profile-public-wrap .blog-post-gallery.is-single-media:not(.is-portrait) {
        aspect-ratio:16 / 10 !important;
        height:auto !important;
        min-height:0 !important;
    }
    #site-shell-content[data-shell-page="blog"] .blog-post-gallery.is-single-media.is-portrait,
    .profile-public-wrap .blog-post-gallery.is-single-media.is-portrait {
        aspect-ratio:auto !important;
        height:min(68svh, 620px) !important;
        min-height:min(48svh, 390px) !important;
    }
}